From cb254296a2490d2e4297cde186e3973693b4d7e9 Mon Sep 17 00:00:00 2001
From: afeescps <afees.kolawole@cps.gov.uk>
Date: Fri, 3 Jul 2026 08:44:21 +0000
Subject: [PATCH 01/28] feat(telemetry): Add shared Application Insights client
 for Materials (#415)

* feat(telemetry): Add shared Application Insights client for Materials UI. Initialise the web SDK once at startup from VITE_APPLICATIONINSIGHTS_CONNECTION_STRING and export shared track helpers.

* feat(telemetry): sample non-exceptions and tag cloud role

* feat(telemetry): fix sonar issue
---
 materials_ui/.env.example                     |  4 ++
 .../RouteChangeListener.tsx                   |  2 +
 materials_ui/src/index.tsx                    |  3 +
 materials_ui/src/telemetry/appInsights.ts     | 68 +++++++++++++++++++
 materials_ui/src/vite-env.d.ts                |  3 +
 5 files changed, 80 insertions(+)
 create mode 100644 materials_ui/src/telemetry/appInsights.ts

diff --git a/materials_ui/.env.example b/materials_ui/.env.example
index 508e7a4e..6a5de5f0 100644
--- a/materials_ui/.env.example
+++ b/materials_ui/.env.example
@@ -8,6 +8,10 @@ VITE_POLARIS_GATEWAY_SCOPE=
 VITE_REDACTION_LOG_URL=
 VITE_REDACTION_LOG_SCOPE=
 
+VITE_APPLICATIONINSIGHTS_CONNECTION_STRING=
+VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE=
+VITE_APPLICATIONINSIGHTS_CLOUD_ROLE=
+
 VITE_GLOBAL_SCRIPT_URL=
 
 VITE_DISABLE_FEATURE_FLAGS=
diff --git a/materials_ui/src/components/RouteChangeListener/RouteChangeListener.tsx b/materials_ui/src/components/RouteChangeListener/RouteChangeListener.tsx
index 38ea0fbb..3de6e74b 100644
--- a/materials_ui/src/components/RouteChangeListener/RouteChangeListener.tsx
+++ b/materials_ui/src/components/RouteChangeListener/RouteChangeListener.tsx
@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 
 import { useBanner } from '../../hooks';
 import { useMaterialTags, useSelectedItemsStore } from '../../stores';
+import { trackPageView } from '../../telemetry/appInsights';
 
 // this component is a non rendering component to perform actions when the user
 // changes pages for example resetting banners, selected items, etc
@@ -25,6 +26,7 @@ export const RouteChangeListener = () => {
 
     clearSelectedItems();
     scrollToTop();
+    trackPageView(pathname);
   }, [pathname]);
 
   return null;
diff --git a/materials_ui/src/index.tsx b/materials_ui/src/index.tsx
index a3d12cc1..f293abd8 100644
--- a/materials_ui/src/index.tsx
+++ b/materials_ui/src/index.tsx
@@ -11,6 +11,9 @@ import './App.scss';
 import { AppContextProvider } from './context/AppContext';
 import { FilterProvider } from './context/FiltersContext';
 import { msalConfig } from './msalInstance';
+import { initTelemetry } from './telemetry/appInsights';
+
+initTelemetry();
 
 if (import.meta.env.DEV && !import.meta.env.VITE_E2E) {
   const { worker } = await import('./mocks/browser');
diff --git a/materials_ui/src/telemetry/appInsights.ts b/materials_ui/src/telemetry/appInsights.ts
new file mode 100644
index 00000000..dd95fbd9
--- /dev/null
+++ b/materials_ui/src/telemetry/appInsights.ts
@@ -0,0 +1,68 @@
+import {
+  ApplicationInsights,
+  ICustomProperties
+} from '@microsoft/applicationinsights-web';
+
+const connectionString = import.meta.env
+  .VITE_APPLICATIONINSIGHTS_CONNECTION_STRING;
+const cloudRole = import.meta.env.VITE_APPLICATIONINSIGHTS_CLOUD_ROLE;
+const samplingPercentage =
+  Number(import.meta.env.VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE) || 20;
+
+let appInsights: ApplicationInsights | undefined;
+
+const normaliseError = (error: unknown): Error =>
+  error instanceof Error ? error : new Error(String(error));
+
+export const initTelemetry = () => {
+  if (appInsights || !connectionString) return;
+
+  appInsights = new ApplicationInsights({
+    config: {
+      connectionString,
+      enableAutoRouteTracking: false,
+      enableUnhandledPromiseRejectionTracking: true
+    }
+  });
+  appInsights.loadAppInsights();
+
+  // Sample non-exceptions ourselves so we never drop exceptions. One roll per
+  // load keeps a page's telemetry together.
+  const retainNonException = Math.random() * 100 < samplingPercentage;
+
+  appInsights.addTelemetryInitializer((item) => {
+    if (cloudRole) {
+      item.tags ??= {};
+      item.tags['ai.cloud.role'] = cloudRole;
+    }
+
+    if (item.baseType === 'ExceptionData') {
+      return true;
+    }
+
+    return retainNonException;
+  });
+};
+
+export const trackPageView = (pathname: string) => {
+  if (!appInsights) return;
+  // Manual SPA tracking doesn't refresh operation name; it stays on the first
+  // page unless we set it ourselves, so telemetry groups under the wrong route.
+  appInsights.context.telemetryTrace.name = pathname;
+  appInsights.trackPageView({ name: pathname });
+};
+
+export const trackEvent = (name: string, properties?: ICustomProperties) =>
+  appInsights?.trackEvent({ name }, properties);
+
+export const trackException = (
+  error: unknown,
+  properties?: ICustomProperties
+) =>
+  appInsights?.trackException({ exception: normaliseError(error) }, properties);
+
+export const trackMetric = (
+  name: string,
+  average: number,
+  properties?: ICustomProperties
+) => appInsights?.trackMetric({ name, average }, properties);
diff --git a/materials_ui/src/vite-env.d.ts b/materials_ui/src/vite-env.d.ts
index 00df2480..e779b139 100644
--- a/materials_ui/src/vite-env.d.ts
+++ b/materials_ui/src/vite-env.d.ts
@@ -6,4 +6,7 @@ interface ImportMetaEnv {
   readonly VITE_POLARIS_GATEWAY_SCOPE: string;
   readonly VITE_POLARIS_GATEWAY_URL: string;
   readonly VITE_REDACTION_LOG_URL: string;
+  readonly VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: string;
+  readonly VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: string;
+  readonly VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: string;
 }

From 8f40a3fcb8ac40cf7f6a60a366d0453f32a43c48 Mon Sep 17 00:00:00 2001
From: dbarber-cps <Daniel.Barber@cps.gov.uk>
Date: Tue, 7 Jul 2026 09:37:59 +0100
Subject: [PATCH 02/28] Bugfix/pr pipeline trigger failure (#429)

* syntax corrections on PR pipeline

* testing parameter options

* typo correction

* reverting to original parameter structure
---
 materials_devops_pipelines/Materials-PR.yml | 62 ++++++++++-----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/materials_devops_pipelines/Materials-PR.yml b/materials_devops_pipelines/Materials-PR.yml
index 1c702af2..6b684348 100644
--- a/materials_devops_pipelines/Materials-PR.yml
+++ b/materials_devops_pipelines/Materials-PR.yml
@@ -44,7 +44,7 @@ stages:
   - stage: Wait_For_Running_PRs
     displayName: Wait for running PRs
     jobs:
-      - job:
+      - job: Query_Status
         pool:
           name: $(dev-build-agent)
         steps:
@@ -61,7 +61,7 @@ stages:
           name: $(dev-build-agent)
         steps:
           - checkout: self
-            fetchDepth: 0
+            fetchDepth: '0'
 
           - task: PowerShell@2
             inputs:
@@ -187,10 +187,10 @@ stages:
         steps:
         
           # Setup Node.js
-          - task: UseNode@1
+          - task: NodeTool@0
             displayName: "Use Node.js"
             inputs:
-              version: "$(nodeVersion)"
+              versionSpec: "$(nodeVersion)"
             
           - task: Npm@1
             inputs:
@@ -234,19 +234,19 @@ stages:
 
           - script: |
               npx playwright install
-             displayName: 'Install Playwright browsers'
-             condition: ne(variables['PLAYWRIGHT_CACHE_RESTORED'], 'true')
-             workingDirectory: '$(workingDir)'
-             env:
-               PLAYWRIGHT_BROWSERS_PATH: '$(Pipeline.Workspace)/.playwright'
+            displayName: 'Install Playwright browsers'
+            condition: ne(variables['PLAYWRIGHT_CACHE_RESTORED'], 'true')
+            workingDirectory: '$(workingDir)'
+            env:
+              PLAYWRIGHT_BROWSERS_PATH: '$(Pipeline.Workspace)/.playwright'
 
-           - script: |
-               npx playwright install-deps
-             displayName: 'Install Playwright OS dependencies'
-             condition: and(eq(variables['Agent.OS'], 'Linux'), ne(variables['PLAYWRIGHT_CACHE_RESTORED'], 'true'))
-             workingDirectory: '$(workingDir)'
-             env:
-               PLAYWRIGHT_BROWSERS_PATH: '$(Pipeline.Workspace)/.playwright'
+          - script: |
+              npx playwright install-deps
+            displayName: 'Install Playwright OS dependencies'
+            condition: and(eq(variables['Agent.OS'], 'Linux'), ne(variables['PLAYWRIGHT_CACHE_RESTORED'], 'true'))
+            workingDirectory: '$(workingDir)'
+            env:
+              PLAYWRIGHT_BROWSERS_PATH: '$(Pipeline.Workspace)/.playwright'
 
           - script: |
               npx playwright install msedge
@@ -279,19 +279,19 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_E2E: True
 
-           - task: PublishPipelineArtifact@1
-             displayName: 'Publish E2E Artifact'
-             inputs:
-               targetPath: '$(workingDir)/tests/playwright-report'
-               artifact: 'playwright-report'
-               publishLocation: 'pipeline'
-             condition: succeededOrFailed() 
+          - task: PublishPipelineArtifact@1
+            displayName: 'Publish E2E Artifact'
+            inputs:
+              targetPath: '$(workingDir)/tests/playwright-report'
+              artifact: 'playwright-report'
+              publishLocation: 'pipeline'
+            condition: succeededOrFailed() 
 
-           - task: PublishTestResults@2
-             displayName: 'Publish E2E Test Results (JUnit)'
-             inputs:
-               testResultsFormat: 'JUnit'
-               testResultsFiles: '$(workingDir)/tests/e2e-test-results.xml'
-               testRunTitle: 'E2E Tests'
-               publishRunAttachments: false
-             condition: always()
\ No newline at end of file
+          - task: PublishTestResults@2
+            displayName: 'Publish E2E Test Results (JUnit)'
+            inputs:
+              testResultsFormat: 'JUnit'
+              testResultsFiles: '$(workingDir)/tests/e2e-test-results.xml'
+              testRunTitle: 'E2E Tests'
+              publishRunAttachments: false
+            condition: always()
\ No newline at end of file

From c1140f5c039e77b7450ad2faf91fdf641480c3d8 Mon Sep 17 00:00:00 2001
From: girmacps <girma.bewketu@cps.gov.uk>
Date: Tue, 7 Jul 2026 11:52:02 +0100
Subject: [PATCH 03/28] Fixing category list filter (#430)

---
 materials_ui/src/constants/categoryList.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/materials_ui/src/constants/categoryList.ts b/materials_ui/src/constants/categoryList.ts
index 010324fc..e94f29ec 100644
--- a/materials_ui/src/constants/categoryList.ts
+++ b/materials_ui/src/constants/categoryList.ts
@@ -4,7 +4,7 @@ export const materialsCategoryList = [
   'MG Form',
   'Other Material',
   'Unused Material',
-  'Defendant Pre Conns'
+  'Defendant Pre Cons'
 ];
 
 export const communicationsCategoryList = [

From b860caafe2ce7ba484afaadfd5ec435794505190 Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Tue, 7 Jul 2026 15:35:50 +0100
Subject: [PATCH 04/28] FCT2-20144-correct-label-spelling-capitilisation-2
 (#431)

---
 .../Filters/DocumentKeywordSearchFilters.tsx         | 12 ------------
 materials_ui/src/constants/categoryList.ts           |  2 +-
 .../CaseworkPdfRedactorWrapper.tsx                   |  9 ++++++---
 .../utils/categoriseDocumentHelperUtils.ts           |  6 +++---
 materials_ui/tests/tests-e2e/review-redact.spec.ts   |  2 +-
 5 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx b/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx
index be4e3bca..3ea63820 100644
--- a/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx
+++ b/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx
@@ -60,18 +60,6 @@ export const DocumentKeywordSearchFilters = ({
     documents: docsOnDocCategoryNames[category.categoryName]
   }));
 
-  //   const docsByDocType = (() => {
-  //     const map: Record<string, number> = {};
-
-  //     documents?.forEach((doc) => {
-  //       const type = doc.cmsDocType.documentType;
-  //       if (!type) return; // skip nulls
-  //       map[type] = (map[type] ?? 0) + 1;
-  //     });
-
-  //     return map;
-  //   })();
-
   return (
     <FilterForm
       onSubmit={handleFiltersSubmit}
diff --git a/materials_ui/src/constants/categoryList.ts b/materials_ui/src/constants/categoryList.ts
index e94f29ec..9ed3a1db 100644
--- a/materials_ui/src/constants/categoryList.ts
+++ b/materials_ui/src/constants/categoryList.ts
@@ -4,7 +4,7 @@ export const materialsCategoryList = [
   'MG Form',
   'Other Material',
   'Unused Material',
-  'Defendant Pre Cons'
+  'Defendant Pre-Cons'
 ];
 
 export const communicationsCategoryList = [
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index bf1b729a..bb15340a 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -4,6 +4,7 @@ import { useAxiosInstance } from '../DocumentSelectAccordion/getters/getAxiosIns
 import { TDocument } from '../DocumentSelectAccordion/getters/getDocumentList';
 import { GovUkBanner } from '../DocumentSelectAccordion/templates/GovUkBanner';
 import { categoriseDocument } from '../DocumentSelectAccordion/utils/categoriseDocument';
+import { TCategoryName } from '../DocumentSelectAccordion/utils/categoriseDocumentHelperUtils';
 import { PdfRedactorCenteredModal } from '../PdfRedactor/modals/PdfRedactorCenteredModal';
 import { PdfRedactorMiniModal } from '../PdfRedactor/modals/PdfRedactorMiniModal';
 import { DeletionReasonForm } from '../PdfRedactor/PdfDeletionReasonForm';
@@ -131,9 +132,11 @@ export const CaseworkPdfRedactorWrapper = (p: {
   const documentCategory = p.document
     ? categoriseDocument(p.document)
     : undefined;
-  const isUnredactableDocumentCategory = ['review', 'defendant'].includes(
-    documentCategory ?? ''
-  );
+  const isUnredactableDocumentCategory =
+    documentCategory &&
+    (['review', 'defendantPreCons'] as TCategoryName[]).includes(
+      documentCategory
+    );
   const isDocumentDispatched =
     p.document?.presentationFlags?.write === 'IsDispatched';
 
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
index e72020c6..0e8d7101 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
@@ -5,7 +5,7 @@ export const categoryDetails = [
   { label: 'Exhibits', categoryName: 'exhibit' },
   { label: 'MG forms', categoryName: 'mgForm' },
   { label: 'Other documents', categoryName: 'otherDocument' },
-  { label: 'Defendant pre cons', categoryName: 'defendant' },
+  { label: 'Defendant pre-cons', categoryName: 'defendantPreCons' },
   { label: 'Unused material', categoryName: 'unusedMaterial' }
 ] as const;
 
@@ -22,7 +22,7 @@ export const documentTypeIdsMap: Record<TCategoryName, number[]> = {
     1040, 1041, 1045, 1046, 1047, 1048, 1049, 1050, 1060, 1061, 1063, 1066, 1203
   ],
   otherDocument: [-2, 1201],
-  defendant: [1056, 1057],
+  defendantPreCons: [1056, 1057],
   unusedMaterial: [1009, 1010, 1011, 1058, 1202, 100239, 226148]
 };
 
@@ -33,6 +33,6 @@ export const initDocsOnDocCategoryNamesMap = (): {
   exhibit: [],
   mgForm: [],
   otherDocument: [],
-  defendant: [],
+  defendantPreCons: [],
   unusedMaterial: []
 });
diff --git a/materials_ui/tests/tests-e2e/review-redact.spec.ts b/materials_ui/tests/tests-e2e/review-redact.spec.ts
index ed3d5a6e..59799069 100644
--- a/materials_ui/tests/tests-e2e/review-redact.spec.ts
+++ b/materials_ui/tests/tests-e2e/review-redact.spec.ts
@@ -23,7 +23,7 @@ test.describe('Review redact page', () => {
     await expect(page.getByText('Exhibits')).toBeVisible();
     await expect(page.getByText('MG forms')).toBeVisible();
     await expect(page.getByText('Other documents')).toBeVisible();
-    await expect(page.getByText('Defendant pre cons')).toBeVisible();
+    await expect(page.getByText('Defendant pre-cons')).toBeVisible();
     await expect(page.getByText('Unused material')).toBeVisible();
   });
 

From dac0f938baa522586d7e26bca443b6d8ff373e7b Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Wed, 8 Jul 2026 11:06:19 +0100
Subject: [PATCH 05/28] FCT2-15908-high-contrast-pdf-2 (#433)

---
 materials_ui/package-lock.json                | 777 ++++++------------
 materials_ui/package.json                     |   2 +-
 .../src/components/PdfViewer/PdfViewer.tsx    |   7 +-
 materials_ui/src/hooks/index.ts               |   1 +
 materials_ui/src/hooks/ui/usePageColors.ts    |  30 +
 .../PdfRedactor/PdfRedactor.tsx               |   4 +-
 .../PdfRedactor/PdfRedactorPage.scss          |  23 +
 .../PdfRedactor/PdfRedactorPage.tsx           |   3 +
 materials_ui/src/pages/ViewDocumentPage.tsx   |   4 +-
 9 files changed, 339 insertions(+), 512 deletions(-)
 create mode 100644 materials_ui/src/hooks/ui/usePageColors.ts

diff --git a/materials_ui/package-lock.json b/materials_ui/package-lock.json
index b2265af1..640fc3e6 100644
--- a/materials_ui/package-lock.json
+++ b/materials_ui/package-lock.json
@@ -24,7 +24,7 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-hook-form": "^7.56.1",
-        "react-pdf": "^9.1.0",
+        "react-pdf": "^10.4.1",
         "react-router-dom": "^6.25.1",
         "react-use": "^17.6.0",
         "react-use-pagination": "^2.0.1",
@@ -2949,6 +2949,256 @@
         "node": ">=18"
       }
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+      "integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-x64": "0.1.100",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.100",
+        "@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+      "integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+      "integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+      "integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+      "integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+      "integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+      "integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+      "integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+      "integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+      "integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+      "integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+      "integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@nevware21/ts-async": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@nevware21/ts-async/-/ts-async-0.5.4.tgz",
@@ -4785,27 +5035,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.2.tgz",
@@ -4815,18 +5044,6 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
-    "node_modules/bl": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -4884,31 +5101,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
     "node_modules/buffer-builder": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
@@ -4980,21 +5172,6 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/canvas": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.0.tgz",
-      "integrity": "sha512-jk0GxrLtUEmW/TmFsk2WghvgHe8B0pxGilqCL21y8lHkPUGa6FTsnCNtHPOzT8O3y+N+m3espawV80bbBlgfTA==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "node-addon-api": "^7.0.0",
-        "prebuild-install": "^7.1.3"
-      },
-      "engines": {
-        "node": "^18.12.0 || >= 20.9.0"
-      }
-    },
     "node_modules/chai": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
@@ -5055,13 +5232,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "license": "ISC",
-      "optional": true
-    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -5432,22 +5602,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "mimic-response": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -5458,16 +5612,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5503,16 +5647,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/diff": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
@@ -5590,16 +5724,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/end-of-stream": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
-      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "once": "^1.4.0"
-      }
-    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -5949,16 +6073,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/expand-template": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
-      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
-      "license": "(MIT OR WTFPL)",
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/expect-type": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.2.tgz",
@@ -6100,13 +6214,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -6214,13 +6321,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/github-from-package": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
-      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -6440,27 +6540,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true
-    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6539,20 +6618,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC",
-      "optional": true
-    },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "license": "ISC",
-      "optional": true
-    },
     "node_modules/inline-style-prefixer": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
@@ -6993,9 +7058,9 @@
       }
     },
     "node_modules/make-cancellable-promise": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz",
-      "integrity": "sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-2.0.0.tgz",
+      "integrity": "sha512-3SEQqTpV9oqVsIWqAcmDuaNeo7yBO3tqPtqGRcKkEo0lrzD3wqbKG9mkxO65KoOgXqj+zH2phJ2LiAsdzlogSw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
@@ -7009,9 +7074,9 @@
       "license": "ISC"
     },
     "node_modules/make-event-props": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.2.tgz",
-      "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-2.0.0.tgz",
+      "integrity": "sha512-G/hncXrl4Qt7mauJEXSg3AcdYzmpkIITTNl5I+rH9sog5Yw0kK6vseJjCaPfOXqOqQuPUP89Rkhfz5kPS8ijtw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
@@ -7033,9 +7098,9 @@
       "license": "CC0-1.0"
     },
     "node_modules/merge-refs": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.3.0.tgz",
-      "integrity": "sha512-nqXPXbso+1dcKDpPCXvwZyJILz+vSLqGGOnDrYHQYE+B8n9JTCekVLC65AfCpR4ggVyA/45Y0iR9LDyS2iI+zA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-2.0.0.tgz",
+      "integrity": "sha512-3+B21mYK2IqUWnd2EivABLT7ueDhb0b8/dGK8LoFQPrU61YITeCMn14F7y7qZafWNZhUEKb24cJdiT5Wxs3prg==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
@@ -7097,19 +7162,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -7133,23 +7185,6 @@
         "node": "*"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "license": "MIT",
-      "optional": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/mkdirp-classic": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -7305,13 +7340,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/napi-build-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
-      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -7329,32 +7357,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-abi": {
-      "version": "3.85.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.85.0.tgz",
-      "integrity": "sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/node-abi/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -7375,16 +7377,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "optional": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/onetime": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
@@ -7562,16 +7554,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path2d": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz",
-      "integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -7590,16 +7572,15 @@
       }
     },
     "node_modules/pdfjs-dist": {
-      "version": "4.8.69",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.8.69.tgz",
-      "integrity": "sha512-IHZsA4T7YElCKNNXtiLgqScw4zPd3pG9do8UrznC757gMd7UPeHSL2qwNNMJo4r79fl8oj1Xx+1nh2YkzdMpLQ==",
+      "version": "5.4.296",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
+      "integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
       "license": "Apache-2.0",
       "engines": {
-        "node": ">=18"
+        "node": ">=20.16.0 || >=22.3.0"
       },
       "optionalDependencies": {
-        "canvas": "^3.0.0-rc2",
-        "path2d": "^0.2.1"
+        "@napi-rs/canvas": "^0.1.80"
       }
     },
     "node_modules/picocolors": {
@@ -7694,33 +7675,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/prebuild-install": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
-      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.0",
-        "expand-template": "^2.0.3",
-        "github-from-package": "0.0.0",
-        "minimist": "^1.2.3",
-        "mkdirp-classic": "^0.5.3",
-        "napi-build-utils": "^2.0.0",
-        "node-abi": "^3.3.0",
-        "pump": "^3.0.0",
-        "rc": "^1.2.7",
-        "simple-get": "^4.0.0",
-        "tar-fs": "^2.0.0",
-        "tunnel-agent": "^0.6.0"
-      },
-      "bin": {
-        "prebuild-install": "bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7800,17 +7754,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
-    "node_modules/pump": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
-      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -7821,32 +7764,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
-      "optional": true,
-      "dependencies": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "bin": {
-        "rc": "cli.js"
-      }
-    },
-    "node_modules/rc/node_modules/strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -7897,17 +7814,17 @@
       "peer": true
     },
     "node_modules/react-pdf": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.2.1.tgz",
-      "integrity": "sha512-AJt0lAIkItWEZRA5d/mO+Om4nPCuTiQ0saA+qItO967DTjmGjnhmF+Bi2tL286mOTfBlF5CyLzJ35KTMaDoH+A==",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-10.4.1.tgz",
+      "integrity": "sha512-kS/35staVCBqS29verTQJQZXw7RfsRCPO3fdJoW1KXylcv7A9dw6DZ3vJXC2w+bIBgLw5FN4pOFvKSQtkQhPfA==",
       "license": "MIT",
       "dependencies": {
         "clsx": "^2.0.0",
         "dequal": "^2.0.3",
-        "make-cancellable-promise": "^1.3.1",
-        "make-event-props": "^1.6.0",
-        "merge-refs": "^1.3.0",
-        "pdfjs-dist": "4.8.69",
+        "make-cancellable-promise": "^2.0.0",
+        "make-event-props": "^2.0.0",
+        "merge-refs": "^2.0.0",
+        "pdfjs-dist": "5.4.296",
         "tiny-invariant": "^1.0.0",
         "warning": "^4.0.0"
       },
@@ -8011,21 +7928,6 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -8310,27 +8212,6 @@
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8801,53 +8682,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/simple-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/simple-get": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
-      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "decompress-response": "^6.0.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
-      }
-    },
     "node_modules/slice-ansi": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
@@ -8982,16 +8816,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -9188,36 +9012,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/tar-fs": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
-      "integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "chownr": "^1.1.1",
-        "mkdirp-classic": "^0.5.2",
-        "pump": "^3.0.0",
-        "tar-stream": "^2.1.4"
-      }
-    },
-    "node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/throttle-debounce": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
@@ -9466,19 +9260,6 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
-    "node_modules/tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -9666,13 +9447,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/uuid": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
@@ -10196,13 +9970,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC",
-      "optional": true
-    },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
diff --git a/materials_ui/package.json b/materials_ui/package.json
index b313c04d..daf5b871 100644
--- a/materials_ui/package.json
+++ b/materials_ui/package.json
@@ -42,7 +42,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.56.1",
-    "react-pdf": "^9.1.0",
+    "react-pdf": "^10.4.1",
     "react-router-dom": "^6.25.1",
     "react-use": "^17.6.0",
     "react-use-pagination": "^2.0.1",
diff --git a/materials_ui/src/components/PdfViewer/PdfViewer.tsx b/materials_ui/src/components/PdfViewer/PdfViewer.tsx
index b80ca757..53116bcf 100644
--- a/materials_ui/src/components/PdfViewer/PdfViewer.tsx
+++ b/materials_ui/src/components/PdfViewer/PdfViewer.tsx
@@ -4,6 +4,7 @@ import { Document, Page, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
 import { usePagination } from 'react-use-pagination';
+import { usePageColors } from '../../hooks/ui/usePageColors';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.tsx';
 import { Pagination } from '../Pagination/Pagination.tsx';
 import './PdfViewer.css';
@@ -18,6 +19,7 @@ export const PdfViewer = ({ file, fileName }: Props) => {
   const [isLoading, setIsLoading] = useState(true);
   const { currentPage, setNextPage, setPreviousPage, setPage, totalPages } =
     usePagination({ initialPageSize: 1, totalItems: numItems });
+  const pageColors = usePageColors();
 
   function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
     setNumItems(numPages);
@@ -39,9 +41,7 @@ export const PdfViewer = ({ file, fileName }: Props) => {
         className="pdf-page-container"
         file={file}
         onLoadSuccess={onDocumentLoadSuccess}
-        loading={
-          <LoadingSpinner isLoading textContent="Loading preview..." />
-        }
+        loading={<LoadingSpinner isLoading textContent="Loading preview..." />}
         aria-label={
           isLoading
             ? `The document preview for ${fileName} is loading. Please wait.`
@@ -61,6 +61,7 @@ export const PdfViewer = ({ file, fileName }: Props) => {
           pageNumber={currentPage + 1}
           renderTextLayer={true}
           renderAnnotationLayer={true}
+          pageColors={pageColors}
         />
         <div className="pagination-wrapper">
           <Pagination
diff --git a/materials_ui/src/hooks/index.ts b/materials_ui/src/hooks/index.ts
index 0cf39c4b..82a68a59 100644
--- a/materials_ui/src/hooks/index.ts
+++ b/materials_ui/src/hooks/index.ts
@@ -37,6 +37,7 @@ export { useDebounce } from './ui/useDebounce';
 export { useFeatureFlag } from './ui/useFeatureFlag';
 export { useFilters } from './ui/useFilters';
 export { useLogger } from './ui/useLogger';
+export { usePageColors } from './ui/usePageColors';
 export { usePager } from './ui/usePager';
 export { useRequest } from './ui/useRequest';
 export { useStoreLogger } from './ui/useStoreLogger';
diff --git a/materials_ui/src/hooks/ui/usePageColors.ts b/materials_ui/src/hooks/ui/usePageColors.ts
new file mode 100644
index 00000000..988d9467
--- /dev/null
+++ b/materials_ui/src/hooks/ui/usePageColors.ts
@@ -0,0 +1,30 @@
+// used for setting high contrast colours to a pdf if user
+// is in high contrast mode, otherwise returns undefined
+// and falls back to usual behaviour
+
+import { useEffect, useState } from 'react';
+
+const FORCED_COLORS_QUERY = '(forced-colors: active)';
+type PdfPageColors = { background: string; foreground: string };
+
+const HIGH_CONTRAST_PAGE_COLORS: PdfPageColors = {
+  background: 'Canvas',
+  foreground: 'CanvasText'
+};
+
+export function usePageColors(): PdfPageColors | undefined {
+  const [isForcedColors, setIsForcedColors] = useState(() =>
+    Boolean(window.matchMedia?.(FORCED_COLORS_QUERY).matches)
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia?.(FORCED_COLORS_QUERY);
+    if (!mql) return;
+
+    const onChange = (e: MediaQueryListEvent) => setIsForcedColors(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return isForcedColors ? HIGH_CONTRAST_PAGE_COLORS : undefined;
+}
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
index fe06f856..8a2fac7b 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
@@ -2,6 +2,8 @@ import type { PDFDocumentProxy } from 'pdfjs-dist';
 import pdfWorker from 'pdfjs-dist/build/pdf.worker?url';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Document, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
 import { safeJsonParse } from '../DocumentSelectAccordion/utils/generalUtils';
 import { useDocumentFocus } from './hooks/useDocumentFocus';
 import { useShiftReleaseRedactTrigger } from './hooks/useShiftReleaseRedactTrigger';
@@ -21,8 +23,6 @@ import type {
   TSearchHighlight
 } from './utils/searchHighlightUtils';
 import { useTrigger } from './utils/useTriggger';
-import '/node_modules/react-pdf/dist/cjs/Page/AnnotationLayer.css';
-import '/node_modules/react-pdf/dist/cjs/Page/TextLayer.css';
 
 pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;
 
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.scss b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.scss
index bc88b8f7..a85a5665 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.scss
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.scss
@@ -12,3 +12,26 @@
   user-select: none;
   pointer-events: none;
 }
+
+// keep the redaction boxes and highlights visible when the OS is in high-contrast mode.
+@media (forced-colors: active) {
+  .react-pdf-page-wrapper .textLayer {
+    mix-blend-mode: normal;
+  }
+
+  .react-pdf-page-wrapper::selection,
+  .react-pdf-page-wrapper ::selection {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  .react-pdf-page-wrapper .redaction-box {
+    background: transparent !important;
+    border: 2px solid CanvasText !important;
+  }
+
+  .react-pdf-page-wrapper [data-text-highlight-id] {
+    background: transparent !important;
+    border-color: Highlight !important;
+  }
+}
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
index f460dbcf..d4e86b12 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
@@ -5,6 +5,7 @@ import {
   type MouseEvent as ReactMouseEvent
 } from 'react';
 import { Page } from 'react-pdf';
+import { usePageColors } from '../../hooks/ui/usePageColors';
 import { DocumentIcon } from './icons/DocumentIcon';
 import { RotateIcon } from './icons/RotateIcon';
 import {
@@ -362,6 +363,7 @@ export const PdfRedactorPage = (p: {
   highlightLayers?: THighlightLayer[];
 }) => {
   const { pageNumber, scale, redactions } = p;
+  const pageColors = usePageColors();
   const [pageDimensions, setPageDimensions] = useState<{
     width: number;
     height: number;
@@ -513,6 +515,7 @@ export const PdfRedactorPage = (p: {
           >
             <Page
               pageNumber={p.pageNumber}
+              pageColors={pageColors}
               onRenderSuccess={() => {
                 const canvas = pdfPageWrapperElmRef.current?.querySelector(
                   '.react-pdf__Page__canvas'
diff --git a/materials_ui/src/pages/ViewDocumentPage.tsx b/materials_ui/src/pages/ViewDocumentPage.tsx
index ec8d03a8..b2d879a9 100644
--- a/materials_ui/src/pages/ViewDocumentPage.tsx
+++ b/materials_ui/src/pages/ViewDocumentPage.tsx
@@ -4,6 +4,7 @@ import { Document, Page, pdfjs } from 'react-pdf';
 import { useParams } from 'react-router-dom';
 import { LoadingSpinner } from '../components';
 import { useDocumentPdfUrl } from '../hooks/documents/useDocumentPdfUrl';
+import { usePageColors } from '../hooks/ui/usePageColors';
 import { useAxiosInstance } from '../materials_components/DocumentSelectAccordion/getters/getAxiosInstance';
 import {
   safeGetDocumentListFromAxiosInstance,
@@ -46,6 +47,7 @@ const LoadAndViewPdf = (p: {
   const { data: pdfUrl } = useDocumentPdfUrl(p);
   const { data: documentList } = useDocumentListFromAxiosInstance(p);
   const [numPages, setNumPages] = useState<number>();
+  const pageColors = usePageColors();
 
   useEffect(() => {
     const cmsStrippedMaterialId = stripCmsPrefix(p.materialId);
@@ -86,7 +88,7 @@ const LoadAndViewPdf = (p: {
           }
         >
           {[...Array(numPages)].map((_, j) => (
-            <Page key={j} pageNumber={j + 1} />
+            <Page key={j} pageNumber={j + 1} pageColors={pageColors} />
           ))}
         </Document>
       )}

From 2d6b9c175e94fc8acc8f65a5896f03cf825acec8 Mon Sep 17 00:00:00 2001
From: dbarber-cps <Daniel.Barber@cps.gov.uk>
Date: Wed, 8 Jul 2026 13:41:28 +0100
Subject: [PATCH 06/28] added variables into build to support app insights
 logging (#435)

---
 materials_devops_pipelines/Materials-UI-Build-Dev.yml     | 4 ++++
 materials_devops_pipelines/Materials-UI-Build-Prod.yml    | 6 +++++-
 materials_devops_pipelines/Materials-UI-Build-Staging.yml | 4 ++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/materials_devops_pipelines/Materials-UI-Build-Dev.yml b/materials_devops_pipelines/Materials-UI-Build-Dev.yml
index aa76b78a..811d3036 100644
--- a/materials_devops_pipelines/Materials-UI-Build-Dev.yml
+++ b/materials_devops_pipelines/Materials-UI-Build-Dev.yml
@@ -26,6 +26,7 @@ variables:
     value: "materials_ui"
   - group: materials-global
   - group: materials-ui-spa-dev
+  - group: materials-kv-dev-terraform
 
 pool:
   name: $(dev-build-agent)
@@ -94,6 +95,9 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_REDACTION_LOG_URL: $(VITE_REDACTION_LOG_URL)
               VITE_REDACTION_LOG_SCOPE: $(VITE_REDACTION_LOG_SCOPE)
+              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-development-app-insights-instrumentation-key)
+              VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: $(APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE)
+              VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: $(APPLICATIONINSIGHTS_CLOUD_ROLE)
 
           - task: replacetokens@5
             displayName: "Set environment specific CSP in serve.json"
diff --git a/materials_devops_pipelines/Materials-UI-Build-Prod.yml b/materials_devops_pipelines/Materials-UI-Build-Prod.yml
index 305e6f19..0a2bdc95 100644
--- a/materials_devops_pipelines/Materials-UI-Build-Prod.yml
+++ b/materials_devops_pipelines/Materials-UI-Build-Prod.yml
@@ -26,6 +26,7 @@ variables:
     value: "materials_ui"
   - group: materials-global
   - group: materials-ui-spa-prod
+  - group: materials-kv-prod-terraform
 
 pool:
   name: $(prod-build-agent)
@@ -94,7 +95,10 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_REDACTION_LOG_URL: $(VITE_REDACTION_LOG_URL)
               VITE_REDACTION_LOG_SCOPE: $(VITE_REDACTION_LOG_SCOPE)
-              
+              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-prod-app-insights-instrumentation-key)
+              VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: $(APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE)
+              VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: $(APPLICATIONINSIGHTS_CLOUD_ROLE)
+
           - task: replacetokens@5
             displayName: "Set environment specific CSP in serve.json"
             inputs:
diff --git a/materials_devops_pipelines/Materials-UI-Build-Staging.yml b/materials_devops_pipelines/Materials-UI-Build-Staging.yml
index f4a63349..604a68cc 100644
--- a/materials_devops_pipelines/Materials-UI-Build-Staging.yml
+++ b/materials_devops_pipelines/Materials-UI-Build-Staging.yml
@@ -26,6 +26,7 @@ variables:
     value: "materials_ui"
   - group: materials-global
   - group: materials-ui-spa-stg
+  - group: materials-kv-stg-terraform
 
 pool:
   name: $(stg-build-agent)
@@ -94,6 +95,9 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_REDACTION_LOG_URL: $(VITE_REDACTION_LOG_URL)
               VITE_REDACTION_LOG_SCOPE: $(VITE_REDACTION_LOG_SCOPE)
+              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-qa-app-insights-instrumentation-key)
+              VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: $(APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE)
+              VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: $(APPLICATIONINSIGHTS_CLOUD_ROLE)
 
           - task: replacetokens@5
             displayName: "Set environment specific CSP in serve.json"

From dd455a9e1e2b075f6a5ce96373b2149e10ff5edd Mon Sep 17 00:00:00 2001
From: afeescps <afees.kolawole@cps.gov.uk>
Date: Thu, 9 Jul 2026 11:18:43 +0100
Subject: [PATCH 07/28] feat(tracking): track user actions, roles and time in
 telemetry (#432)

* feat(tracking): track user actions, roles and time in telemetry

- Emit completion-based UserAction events (Reclassified, Updated,
  Discarded, Renamed, Redacted, UpdatedAutomatically, OpenedInNewWindow)
  with materialId/category context; View-in-new-window fires on click
- Capture page and per-tab dwell time; stamp MSAL user role on all items
- Sample non-exceptions (default 20%) while keeping exceptions and
  actions; set cloud role name from env
- Normalise route names to strip case URN/id

* fix(tracking): send materialId as string in action telemetry

Numeric materialId was routed into customMeasurements by the SDK while
the reader/redact screens sent it as a string in customDimensions. Cast
to string at all numeric call sites so it's consistently a dimension.

* fix(materials-ui): resolve ambiguous JSX spacing in discard caption (S6772)

Move the trailing space out of the visually-hidden span into an explicit
{' '} so the caption spacing is unambiguous. Output unchanged.

* refactor(materials-ui): clarify route-normalisation helper in telemetry

Rename normalisePath to stripCaseIdsFromRoute and extract the two regexes
into named constants (CASE_URN_AND_ID, NUMERIC_ID_SEGMENT) for readability.
No behaviour change.
---
 materials_ui/src/app.tsx                      |   8 ++
 .../ReviewAndRedactPage.tsx                   |  10 ++
 .../Button/AutoReclassifyButton.tsx           |   2 +
 .../src/components/Drawer/RenameDrawer.tsx    |  13 ++-
 .../CaseworkPdfRedactorWrapper.tsx            |   2 +
 materials_ui/src/pages/Communications.tsx     |   5 +
 materials_ui/src/pages/DiscardMaterial.tsx    | 103 +++++++++---------
 materials_ui/src/pages/EditMaterial.tsx       |   5 +
 materials_ui/src/pages/Materials.tsx          |   5 +
 materials_ui/src/pages/Reclassification.tsx   |   5 +
 materials_ui/src/telemetry/appInsights.ts     |  37 ++++++-
 11 files changed, 140 insertions(+), 55 deletions(-)

diff --git a/materials_ui/src/app.tsx b/materials_ui/src/app.tsx
index 1997d9ec..1e7b509c 100644
--- a/materials_ui/src/app.tsx
+++ b/materials_ui/src/app.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { RouteChangeListener } from './components';
 import { loginRequest } from './msalInstance';
 import { Routes } from './routes';
+import { setTelemetryUserRole } from './telemetry/appInsights';
 
 export const App = () => {
   const { instance, accounts } = useMsal();
@@ -14,6 +15,13 @@ export const App = () => {
   }, [instance, accounts]);
 
   const account = instance.getActiveAccount() || accounts[0];
+  const role = (account?.idTokenClaims?.roles as string[] | undefined)?.join(
+    ','
+  );
+
+  useEffect(() => {
+    if (role) setTelemetryUserRole(role);
+  }, [role]);
 
   if (!account) {
     return <p>Redirecting to login...</p>;
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx
index a13b814c..7b11bf4d 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx
@@ -31,6 +31,7 @@ import { convertMatchesToSearchHighlights } from '../../../materials_components/
 import { useTrigger } from '../../../materials_components/PdfRedactor/utils/useTriggger';
 import { RedactionLogModal } from '../../../materials_components/RedactionLog/RedactionLogModal';
 import type { SearchTermResultType } from '../../../schemas/documents';
+import { trackAction, trackMetric } from '../../../telemetry/appInsights';
 import { Tabs } from '../../components/tabs';
 import { getLookups, useAxiosInstances } from '../../components/utils/getData';
 import { useSwitchContentArea } from '../../hooks/useSwitchContentArea';
@@ -365,6 +366,12 @@ export const ReviewAndRedactPage = () => {
 
   const activeTabId = activeParentId || openParentIds[0] || '';
 
+  useEffect(() => {
+    if (!activeTabId) return;
+    const start = Date.now();
+    return () => trackMetric('TabViewTime', Date.now() - start);
+  }, [activeTabId]);
+
   const activeDocument = openDocuments.find(
     (doc) => doc.parentId === activeTabId
   );
@@ -504,6 +511,9 @@ export const ReviewAndRedactPage = () => {
                   onRedactionLogClick={() => setShowRedactionLogModal(true)}
                   onViewInNewWindowClick={() => {
                     if (!urn || !caseId) return;
+                    trackAction('OpenedInNewWindow', {
+                      materialId: activeTabId
+                    });
                     navigateToViewDocumentPageInNewTab({
                       urn,
                       caseId,
diff --git a/materials_ui/src/components/Button/AutoReclassifyButton.tsx b/materials_ui/src/components/Button/AutoReclassifyButton.tsx
index 7d408447..b01ef3a7 100644
--- a/materials_ui/src/components/Button/AutoReclassifyButton.tsx
+++ b/materials_ui/src/components/Button/AutoReclassifyButton.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { useAutoReclassify, useBanner, useCaseMaterials } from '../../hooks';
 import { useMaterialTags } from '../../stores';
+import { trackAction } from '../../telemetry/appInsights';
 
 export const AutoReclassifyButton = () => {
   const [errorCount, setErrorCount] = useState(0);
@@ -45,6 +46,7 @@ export const AutoReclassifyButton = () => {
     },
     onSuccess: async (data) => {
       const totalMaterialsProcessed = data.reclassifiedMaterials.length || 1;
+      trackAction('UpdatedAutomatically', { count: totalMaterialsProcessed });
 
       setTags(
         data?.reclassifiedMaterials?.map((material) => ({
diff --git a/materials_ui/src/components/Drawer/RenameDrawer.tsx b/materials_ui/src/components/Drawer/RenameDrawer.tsx
index 04386511..57b3717f 100644
--- a/materials_ui/src/components/Drawer/RenameDrawer.tsx
+++ b/materials_ui/src/components/Drawer/RenameDrawer.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, FormEvent, useState } from 'react';
 import { useRename } from '../../hooks';
 import { TDocument } from '../../materials_components/DocumentSelectAccordion/getters/getDocumentList';
 import { CaseMaterialsType } from '../../schemas';
+import { trackAction } from '../../telemetry/appInsights';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import Drawer from './Drawer';
 
@@ -13,7 +14,17 @@ type Props = {
 
 export const RenameDrawer = ({ material, onCancel, onSuccess }: Props) => {
   const { isMutating, trigger: renameMaterial } = useRename(material, {
-    onSuccess
+    onSuccess: () => {
+      trackAction('Renamed', {
+        materialId:
+          material && 'materialId' in material
+            ? material.materialId?.toString()
+            : undefined,
+        category:
+          material && 'category' in material ? material.category : undefined
+      });
+      onSuccess();
+    }
   });
   const [error, setError] = useState<string>('');
 
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index bb15340a..e2501bc2 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps, useEffect, useState } from 'react';
 import { Button } from '../../caseWorkApp/components/button';
+import { trackAction } from '../../telemetry/appInsights';
 import { useAxiosInstance } from '../DocumentSelectAccordion/getters/getAxiosInstance';
 import { TDocument } from '../DocumentSelectAccordion/getters/getDocumentList';
 import { GovUkBanner } from '../DocumentSelectAccordion/templates/GovUkBanner';
@@ -404,6 +405,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
               redactions
             });
             setRedactions([]);
+            trackAction('Redacted', { materialId: p.parentId });
             p.onRedactionSaveStatusChange('saved');
             if (p.document) p.onModification(p.document);
             await documentCheckOutRequest.checkIn({
diff --git a/materials_ui/src/pages/Communications.tsx b/materials_ui/src/pages/Communications.tsx
index c4950e75..185c65ed 100644
--- a/materials_ui/src/pages/Communications.tsx
+++ b/materials_ui/src/pages/Communications.tsx
@@ -25,6 +25,7 @@ import {
   useMaterialTags,
   useSelectedItemsStore
 } from '../stores';
+import { trackAction } from '../telemetry/appInsights';
 
 export const CommunicationsPage = () => {
   const [selectedMaterial, setSelectedMaterial] =
@@ -95,6 +96,10 @@ export const CommunicationsPage = () => {
     const caseId = caseInfo?.id;
     if (!materialId || !urn || !caseId) return;
 
+    trackAction('OpenedInNewWindow', {
+      materialId: row?.materialId?.toString(),
+      category: row?.category
+    });
     navigateToViewDocumentPageInNewTab({ urn, caseId, materialId });
   };
 
diff --git a/materials_ui/src/pages/DiscardMaterial.tsx b/materials_ui/src/pages/DiscardMaterial.tsx
index 261828d6..18a6bce4 100644
--- a/materials_ui/src/pages/DiscardMaterial.tsx
+++ b/materials_ui/src/pages/DiscardMaterial.tsx
@@ -5,6 +5,7 @@ import { DISCARD_MATERIAL_OPTIONS } from '../constants';
 import { Layout, LoadingSpinner, RadioOption, Radios } from '../components';
 import { URL } from '../constants/url';
 import { useAppRoute, useBanner, useCaseMaterials, useDiscard } from '../hooks';
+import { trackAction } from '../telemetry/appInsights';
 
 export const DiscardMaterialPage = () => {
   const { getRoute } = useAppRoute();
@@ -24,6 +25,10 @@ export const DiscardMaterialPage = () => {
 
   const { isLoading: isDiscarding, trigger } = useDiscard(material, {
     onSuccess: async () => {
+      trackAction('Discarded', {
+        materialId: material?.materialId?.toString(),
+        category: material?.category
+      });
       setError('');
 
       navigate(returnTo, { state: { persistBanner: true } });
@@ -79,56 +84,56 @@ export const DiscardMaterialPage = () => {
     <>
       <LoadingSpinner isLoading={isDiscarding} />
       {!isDiscarding && (
-    <Layout plain title="Discard Material">
-      <Link
-        to={returnTo}
-        onClick={(e) => {
-          e.preventDefault();
-          navigate(-1);
-        }}
-        className="govuk-back-link"
-      >
-        Back
-      </Link>
-
-      <div className="govuk-main-wrapper">
-        <h2 className="govuk-caption-l hmrc-caption-l">
-          <span className="govuk-visually-hidden">This section is </span>Discard
-          material
-        </h2>
-        <h1 className="govuk-heading-l">Reason for discarding material</h1>
-
-        <form onSubmit={handleSubmit}>
-          <Radios
-            error={error}
-            legend="Select a reason for discarding material"
-            name="reason"
-            onChange={handleRadioChange}
-            options={DISCARD_MATERIAL_OPTIONS.map((option) => ({
-              ...option,
-              id: option.value
-            }))}
-            value={reason?.value as string}
-            required
-          />
-
-          <div className="govuk-button-group">
-            <button
-              type="submit"
-              className="govuk-button"
-              data-module="govuk-button"
-              onClick={() => null}
-              data-testid="saveChangesButton"
-            >
-              Save and discard
-            </button>
-            <Link to={returnTo} className="govuk-link cancel-status-change">
-              Cancel
-            </Link>
+        <Layout plain title="Discard Material">
+          <Link
+            to={returnTo}
+            onClick={(e) => {
+              e.preventDefault();
+              navigate(-1);
+            }}
+            className="govuk-back-link"
+          >
+            Back
+          </Link>
+
+          <div className="govuk-main-wrapper">
+            <h2 className="govuk-caption-l hmrc-caption-l">
+              <span className="govuk-visually-hidden">This section is</span>{' '}
+              Discard material
+            </h2>
+            <h1 className="govuk-heading-l">Reason for discarding material</h1>
+
+            <form onSubmit={handleSubmit}>
+              <Radios
+                error={error}
+                legend="Select a reason for discarding material"
+                name="reason"
+                onChange={handleRadioChange}
+                options={DISCARD_MATERIAL_OPTIONS.map((option) => ({
+                  ...option,
+                  id: option.value
+                }))}
+                value={reason?.value as string}
+                required
+              />
+
+              <div className="govuk-button-group">
+                <button
+                  type="submit"
+                  className="govuk-button"
+                  data-module="govuk-button"
+                  onClick={() => null}
+                  data-testid="saveChangesButton"
+                >
+                  Save and discard
+                </button>
+                <Link to={returnTo} className="govuk-link cancel-status-change">
+                  Cancel
+                </Link>
+              </div>
+            </form>
           </div>
-        </form>
-      </div>
-    </Layout>
+        </Layout>
       )}
     </>
   );
diff --git a/materials_ui/src/pages/EditMaterial.tsx b/materials_ui/src/pages/EditMaterial.tsx
index 5eb34508..177e241c 100644
--- a/materials_ui/src/pages/EditMaterial.tsx
+++ b/materials_ui/src/pages/EditMaterial.tsx
@@ -19,6 +19,7 @@ import {
   EditStatementType
 } from '../schemas/forms/editStatement';
 import { useMaterialTags } from '../stores';
+import { trackAction } from '../telemetry/appInsights';
 
 type EditMaterialLocationState = { returnTo: string; row: CaseMaterialsType };
 type FormStep = 'form' | 'summary';
@@ -46,6 +47,10 @@ export const EditMaterialPage = () => {
       });
     },
     onSuccess: (response) => {
+      trackAction('Updated', {
+        materialId: row?.materialId?.toString(),
+        category: row?.category
+      });
       setTags([{ materialId: response?.materialId, tagName: 'Updated' }]);
       setBanner(
         {
diff --git a/materials_ui/src/pages/Materials.tsx b/materials_ui/src/pages/Materials.tsx
index b8612c0e..14c2c1e2 100644
--- a/materials_ui/src/pages/Materials.tsx
+++ b/materials_ui/src/pages/Materials.tsx
@@ -28,6 +28,7 @@ import { useNavigate } from 'react-router-dom';
 import { URL } from '../constants/url';
 import { navigateToViewDocumentPageInNewTab } from '../hooks/ui/navigateToViewDocumentPageInNewTab';
 import { CaseMaterialsType } from '../schemas';
+import { trackAction } from '../telemetry/appInsights';
 
 export const MaterialsPage = () => {
   const { getRoute } = useAppRoute();
@@ -110,6 +111,10 @@ export const MaterialsPage = () => {
       const urn = caseInfo?.urn;
       const caseId = caseInfo?.id;
       if (!urn || !caseId) return;
+      trackAction('OpenedInNewWindow', {
+        materialId: materialId.toString(),
+        category: item.category
+      });
       navigateToViewDocumentPageInNewTab({ urn, caseId, materialId });
     }
   };
diff --git a/materials_ui/src/pages/Reclassification.tsx b/materials_ui/src/pages/Reclassification.tsx
index 0aeb1769..2dddd171 100644
--- a/materials_ui/src/pages/Reclassification.tsx
+++ b/materials_ui/src/pages/Reclassification.tsx
@@ -32,6 +32,7 @@ import {
   Reclassify_WitnessAndActionPlanType
 } from '../schemas/forms/reclassify';
 import { useMaterialTags } from '../stores';
+import { trackAction } from '../telemetry/appInsights';
 import { formatDate } from '../utils/date';
 import { getBannerData } from '../utils/reclassify';
 
@@ -84,6 +85,10 @@ export const ReclassificationPage = () => {
       });
 
       if (response.data.status !== 'Failed') {
+        trackAction('Reclassified', {
+          materialId: material.materialId?.toString(),
+          category: material.category
+        });
         const documentType = getDocumentTypeById(fieldValues.documentType);
         const materialReclassifiedId =
           response?.data?.reclassificationResult?.resultData
diff --git a/materials_ui/src/telemetry/appInsights.ts b/materials_ui/src/telemetry/appInsights.ts
index dd95fbd9..aeced5cc 100644
--- a/materials_ui/src/telemetry/appInsights.ts
+++ b/materials_ui/src/telemetry/appInsights.ts
@@ -10,10 +10,23 @@ const samplingPercentage =
   Number(import.meta.env.VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE) || 20;
 
 let appInsights: ApplicationInsights | undefined;
+let userRole: string | undefined;
 
 const normaliseError = (error: unknown): Error =>
   error instanceof Error ? error : new Error(String(error));
 
+// A route looks like /<urn>/<caseId>/<page>, sometimes with deeper numeric
+// ids (e.g. /materials/8923052). Those identify a specific case/document, so
+// we replace them with placeholders before sending telemetry: page views then
+// group by route (e.g. /:urn/:caseId/materials) instead of leaking case data.
+const CASE_URN_AND_ID = /^\/[^/]+\/[^/]+/; // leading /<urn>/<caseId>
+const NUMERIC_ID_SEGMENT = /\/\d+/g; // any /<number> segment
+
+const stripCaseIdsFromRoute = (path: string): string =>
+  path
+    .replace(CASE_URN_AND_ID, '/:urn/:caseId')
+    .replace(NUMERIC_ID_SEGMENT, '/:id');
+
 export const initTelemetry = () => {
   if (appInsights || !connectionString) return;
 
@@ -21,13 +34,14 @@ export const initTelemetry = () => {
     config: {
       connectionString,
       enableAutoRouteTracking: false,
-      enableUnhandledPromiseRejectionTracking: true
+      enableUnhandledPromiseRejectionTracking: true,
+      autoTrackPageVisitTime: true
     }
   });
   appInsights.loadAppInsights();
 
   // Sample non-exceptions ourselves so we never drop exceptions. One roll per
-  // load keeps a page's telemetry together.
+  // load keeps a page's telemetry together. Actions (events) are kept too.
   const retainNonException = Math.random() * 100 < samplingPercentage;
 
   appInsights.addTelemetryInitializer((item) => {
@@ -36,7 +50,12 @@ export const initTelemetry = () => {
       item.tags['ai.cloud.role'] = cloudRole;
     }
 
-    if (item.baseType === 'ExceptionData') {
+    if (userRole) {
+      item.data ??= {};
+      item.data.userRole = userRole;
+    }
+
+    if (item.baseType === 'ExceptionData' || item.baseType === 'EventData') {
       return true;
     }
 
@@ -44,14 +63,22 @@ export const initTelemetry = () => {
   });
 };
 
+export const setTelemetryUserRole = (role: string) => {
+  userRole = role;
+};
+
 export const trackPageView = (pathname: string) => {
   if (!appInsights) return;
+  const name = stripCaseIdsFromRoute(pathname);
   // Manual SPA tracking doesn't refresh operation name; it stays on the first
   // page unless we set it ourselves, so telemetry groups under the wrong route.
-  appInsights.context.telemetryTrace.name = pathname;
-  appInsights.trackPageView({ name: pathname });
+  appInsights.context.telemetryTrace.name = name;
+  appInsights.trackPageView({ name });
 };
 
+export const trackAction = (action: string, properties?: ICustomProperties) =>
+  appInsights?.trackEvent({ name: 'UserAction' }, { action, ...properties });
+
 export const trackEvent = (name: string, properties?: ICustomProperties) =>
   appInsights?.trackEvent({ name }, properties);
 

From f5c6cdedbd976d42a127f08f9a6820b42e221bbf Mon Sep 17 00:00:00 2001
From: dbarber-cps <Daniel.Barber@cps.gov.uk>
Date: Fri, 10 Jul 2026 11:04:26 +0100
Subject: [PATCH 08/28] updating appinsights connection string (#437)

---
 materials_devops_pipelines/Materials-UI-Build-Dev.yml     | 2 +-
 materials_devops_pipelines/Materials-UI-Build-Prod.yml    | 2 +-
 materials_devops_pipelines/Materials-UI-Build-Staging.yml | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/materials_devops_pipelines/Materials-UI-Build-Dev.yml b/materials_devops_pipelines/Materials-UI-Build-Dev.yml
index 811d3036..1f35a08c 100644
--- a/materials_devops_pipelines/Materials-UI-Build-Dev.yml
+++ b/materials_devops_pipelines/Materials-UI-Build-Dev.yml
@@ -95,7 +95,7 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_REDACTION_LOG_URL: $(VITE_REDACTION_LOG_URL)
               VITE_REDACTION_LOG_SCOPE: $(VITE_REDACTION_LOG_SCOPE)
-              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-development-app-insights-instrumentation-key)
+              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-development-app-insights-connection-string)
               VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: $(APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE)
               VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: $(APPLICATIONINSIGHTS_CLOUD_ROLE)
 
diff --git a/materials_devops_pipelines/Materials-UI-Build-Prod.yml b/materials_devops_pipelines/Materials-UI-Build-Prod.yml
index 0a2bdc95..475a5218 100644
--- a/materials_devops_pipelines/Materials-UI-Build-Prod.yml
+++ b/materials_devops_pipelines/Materials-UI-Build-Prod.yml
@@ -95,7 +95,7 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_REDACTION_LOG_URL: $(VITE_REDACTION_LOG_URL)
               VITE_REDACTION_LOG_SCOPE: $(VITE_REDACTION_LOG_SCOPE)
-              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-prod-app-insights-instrumentation-key)
+              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-prod-app-insights-connection-string)
               VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: $(APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE)
               VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: $(APPLICATIONINSIGHTS_CLOUD_ROLE)
 
diff --git a/materials_devops_pipelines/Materials-UI-Build-Staging.yml b/materials_devops_pipelines/Materials-UI-Build-Staging.yml
index 604a68cc..52524469 100644
--- a/materials_devops_pipelines/Materials-UI-Build-Staging.yml
+++ b/materials_devops_pipelines/Materials-UI-Build-Staging.yml
@@ -95,7 +95,7 @@ stages:
               VITE_GLOBAL_SCRIPT_URL: $(GLOBAL_SCRIPT_URL)
               VITE_REDACTION_LOG_URL: $(VITE_REDACTION_LOG_URL)
               VITE_REDACTION_LOG_SCOPE: $(VITE_REDACTION_LOG_SCOPE)
-              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-qa-app-insights-instrumentation-key)
+              VITE_APPLICATIONINSIGHTS_CONNECTION_STRING: $(innovation-qa-app-insights-connection-string)
               VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE: $(APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE)
               VITE_APPLICATIONINSIGHTS_CLOUD_ROLE: $(APPLICATIONINSIGHTS_CLOUD_ROLE)
 

From 84c34d9fceca9cd07d0ecd22aa77b4dd5a327c27 Mon Sep 17 00:00:00 2001
From: abdul-cps <abdul.tarafdar@cps.gov.uk>
Date: Fri, 10 Jul 2026 11:36:52 +0100
Subject: [PATCH 09/28] fix filtr tests (#438)

Co-authored-by: abdul-cps <abdu.tarafdar@cps.gov.uk>
---
 materials_ui/tests/tests-e2e/communications.spec.ts | 6 +++---
 materials_ui/tests/tests-e2e/materials.spec.ts      | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/materials_ui/tests/tests-e2e/communications.spec.ts b/materials_ui/tests/tests-e2e/communications.spec.ts
index 8bde02a0..235e0282 100644
--- a/materials_ui/tests/tests-e2e/communications.spec.ts
+++ b/materials_ui/tests/tests-e2e/communications.spec.ts
@@ -111,10 +111,10 @@ test.describe('Communications page', () => {
 
   // hide filter
   test('T-007: user is able to hide filter', async ({ page }) => {
-    await page.getByRole('button', { name: 'Hide filter' }).click();
-    await expect(page.getByText('FiltersClear filtersSearch')).toBeHidden();
+    await page.getByRole('button', { name: 'Hide filters' }).click();
+    await expect(page.getByText('Search communications')).toBeHidden();
     await page.getByRole('button', { name: 'Show filter' }).click();
-    await expect(page.getByText('FiltersClear filtersSearch')).toBeVisible();
+    await expect(page.getByText('Search communications')).toBeVisible();
   });
 
   // search
diff --git a/materials_ui/tests/tests-e2e/materials.spec.ts b/materials_ui/tests/tests-e2e/materials.spec.ts
index e6b581c3..c67c4258 100644
--- a/materials_ui/tests/tests-e2e/materials.spec.ts
+++ b/materials_ui/tests/tests-e2e/materials.spec.ts
@@ -139,10 +139,10 @@ test.describe('Materials page', () => {
 
   test('T-008: user is able to hide filter', async ({ page }) => {
     mockRoute(page, '/case-materials', mockCaseMaterials());
-    await page.getByRole('button', { name: 'Hide filter' }).click();
-    await expect(page.getByText('FiltersClear filtersSearch')).toBeHidden();
-    await page.getByRole('button', { name: 'Show filter' }).click();
-    await expect(page.getByText('FiltersClear filtersSearch')).toBeVisible();
+    await page.getByRole('button', { name: 'Hide filters' }).click();
+    await expect(page.getByText('Search materials')).toBeHidden();
+    await page.getByRole('button', { name: 'Show filters' }).click();
+    await expect(page.getByText('Search materials')).toBeVisible();
   });
 
   // search

From 6d7379512c38f63c502686735fb2f3c6d9f4d682 Mon Sep 17 00:00:00 2001
From: afeescps <afees.kolawole@cps.gov.uk>
Date: Fri, 10 Jul 2026 12:36:30 +0100
Subject: [PATCH 10/28] feat(relabelling): Re-label Search screen field names
 in Materials & Comms tabs (#436)

* feat(relabelling): Re-label Search screen field names in Materials & Comms tabs

* test: use corrector selector value

* test: use corrector selector API
---
 .../src/components/Filters/CommsFilters.tsx   |   3 +-
 .../components/Filters/MaterialsFilters.tsx   |   2 +-
 .../SortableTable/CaseMaterialsTable.tsx      | 164 +++++++++---------
 .../tests/tests-e2e/communications.spec.ts    |   8 +-
 .../tests/tests-e2e/materials.spec.ts         |   6 +-
 5 files changed, 88 insertions(+), 95 deletions(-)

diff --git a/materials_ui/src/components/Filters/CommsFilters.tsx b/materials_ui/src/components/Filters/CommsFilters.tsx
index 00710e16..980b1850 100644
--- a/materials_ui/src/components/Filters/CommsFilters.tsx
+++ b/materials_ui/src/components/Filters/CommsFilters.tsx
@@ -61,10 +61,9 @@ export const CommsFilters = () => {
       onSubmit={handleFiltersSubmit}
       onReset={resetFilters}
       onSearchChange={handleSearchChange}
-      searchLabel="Search communications"
+      searchLabel="Subject"
       defaultSearchValue={filters?.search || ''}
     >
-
       {hasAccess([1, 2, 3, 4, 5]) && (
         <div className="govuk-form-group">
           <div className="govuk-form-group">
diff --git a/materials_ui/src/components/Filters/MaterialsFilters.tsx b/materials_ui/src/components/Filters/MaterialsFilters.tsx
index 4faa1dbd..cd477d96 100644
--- a/materials_ui/src/components/Filters/MaterialsFilters.tsx
+++ b/materials_ui/src/components/Filters/MaterialsFilters.tsx
@@ -41,7 +41,7 @@ export const MaterialsFilters = () => {
       onSubmit={handleFiltersSubmit}
       onReset={resetFilters}
       onSearchChange={handleSearchChange}
-      searchLabel="Search materials"
+      searchLabel="Material name"
       defaultSearchValue={filters?.search || ''}
     >
       {hasAccess([2, 3, 4, 5]) && (
diff --git a/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx b/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx
index 33152cf6..b8c7c993 100644
--- a/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx
+++ b/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx
@@ -17,12 +17,7 @@ import { DEFAULT_RESULTS_PER_PAGE } from '../../constants/query';
 import { READ_STATUS } from '../../constants';
 import { formatDate } from '../../utils/date';
 
-import {
-  DocumentPreview,
-  LoadingSpinner,
-  Pagination,
-  StatusTag
-} from '..';
+import { DocumentPreview, LoadingSpinner, Pagination, StatusTag } from '..';
 import { useMaterialTags } from '../../stores';
 
 export const CaseMaterialsTable = () => {
@@ -37,57 +32,56 @@ export const CaseMaterialsTable = () => {
 
   const columns = useMemo<Column<CaseMaterialsType>[]>(
     () => [
-    {
-      key: 'subject',
-      heading: 'Material',
-      render: (row) => (
-        <>
-          {row.readStatus == READ_STATUS.UNREAD && <StatusTag status="New" />}
-          <span className="subject-field">{row.subject}</span>
-          {row.statusLabel && <StatusTag status={row.statusLabel} />}
-        </>
-      ),
-      isSortable: true
-    },
-    {
-      key: 'type',
-      heading: 'Type',
-      isSortable: true,
-      sortFn: ({ type: leftType }, { type: rightType }, direction) => {
-        const compareResult = leftType.localeCompare(
-          rightType,
-          undefined,
-          { numeric: true, sensitivity: 'base' }
-        );
-        return direction === 'ascending' ? compareResult : -compareResult;
+      {
+        key: 'subject',
+        heading: 'Material name',
+        render: (row) => (
+          <>
+            {row.readStatus == READ_STATUS.UNREAD && <StatusTag status="New" />}
+            <span className="subject-field">{row.subject}</span>
+            {row.statusLabel && <StatusTag status={row.statusLabel} />}
+          </>
+        ),
+        isSortable: true
+      },
+      {
+        key: 'type',
+        heading: 'Type',
+        isSortable: true,
+        sortFn: ({ type: leftType }, { type: rightType }, direction) => {
+          const compareResult = leftType.localeCompare(rightType, undefined, {
+            numeric: true,
+            sensitivity: 'base'
+          });
+          return direction === 'ascending' ? compareResult : -compareResult;
+        }
+      },
+      { key: 'category', heading: 'Category', isSortable: true },
+      {
+        key: 'date',
+        heading: 'Date',
+        render: (row) => (
+          <span
+            aria-label={row.date === null ? 'No date available' : undefined}
+          >
+            {formatDate(row.date)}
+          </span>
+        ),
+        isSortable: true
+      },
+      {
+        key: 'status',
+        heading: 'Status',
+        render: (row) => <StatusTag status={row.status} />,
+        isSortable: true
       }
-    },
-    { key: 'category', heading: 'Category', isSortable: true },
-    {
-      key: 'date',
-      heading: 'Date',
-      render: (row) => (
-        <span aria-label={row.date === null ? 'No date available' : undefined}>
-          {formatDate(row.date)}
-        </span>
-      ),
-      isSortable: true
-    },
-    {
-      key: 'status',
-      heading: 'Status',
-      render: (row) => <StatusTag status={row.status} />,
-      isSortable: true
-    }
-  ],
+    ],
     []
   );
 
   const filteredSortedData = useMemo(() => {
-    const sortFn = getSortFn(
-      columns,
-      filters?.sort,
-      (sortConfig) => defaultSortFn<CaseMaterialsType>(sortConfig)
+    const sortFn = getSortFn(columns, filters?.sort, (sortConfig) =>
+      defaultSortFn<CaseMaterialsType>(sortConfig)
     );
     const sortByStatusFn = defaultSortFn<CaseMaterialsType>({
       column: 'statusLabel',
@@ -163,38 +157,40 @@ export const CaseMaterialsTable = () => {
         textContent="Loading materials..."
       />
       {!caseMaterialsLoading && (
-      <>
-      <p className="govuk-body showing-materials-count">
-        Showing{' '}
-        <strong>
-          {filteredSortedData?.length === 0 ? 0 : recordsOnCurrentPage}
-        </strong>{' '}
-        materials out of <strong>{filteredSortedData?.length}</strong>
-      </p>
-      <SortableTable
-        data={(filteredSortedData || []).slice(startIndex, endIndex + 1)}
-        dataName="materials"
-        caption="Case materials list view"
-        filters={filters}
-        columns={columns}
-        expandableRow={expandableRow}
-        error={error}
-      />
-
-      <div
-        className={
-          totalPages > 1 ? 'table-actions-footer' : 'table-actions-footer-end'
-        }
-      >
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          setNextPage={setNextPage}
-          setPreviousPage={setPreviousPage}
-          setPage={setPage}
-        />
-      </div>
-      </>
+        <>
+          <p className="govuk-body showing-materials-count">
+            Showing{' '}
+            <strong>
+              {filteredSortedData?.length === 0 ? 0 : recordsOnCurrentPage}
+            </strong>{' '}
+            materials out of <strong>{filteredSortedData?.length}</strong>
+          </p>
+          <SortableTable
+            data={(filteredSortedData || []).slice(startIndex, endIndex + 1)}
+            dataName="materials"
+            caption="Case materials list view"
+            filters={filters}
+            columns={columns}
+            expandableRow={expandableRow}
+            error={error}
+          />
+
+          <div
+            className={
+              totalPages > 1
+                ? 'table-actions-footer'
+                : 'table-actions-footer-end'
+            }
+          >
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              setNextPage={setNextPage}
+              setPreviousPage={setPreviousPage}
+              setPage={setPage}
+            />
+          </div>
+        </>
       )}
     </>
   );
diff --git a/materials_ui/tests/tests-e2e/communications.spec.ts b/materials_ui/tests/tests-e2e/communications.spec.ts
index 235e0282..f0f7d891 100644
--- a/materials_ui/tests/tests-e2e/communications.spec.ts
+++ b/materials_ui/tests/tests-e2e/communications.spec.ts
@@ -112,9 +112,9 @@ test.describe('Communications page', () => {
   // hide filter
   test('T-007: user is able to hide filter', async ({ page }) => {
     await page.getByRole('button', { name: 'Hide filters' }).click();
-    await expect(page.getByText('Search communications')).toBeHidden();
+    await expect(page.getByLabel('Subject')).toBeHidden();
     await page.getByRole('button', { name: 'Show filter' }).click();
-    await expect(page.getByText('Search communications')).toBeVisible();
+    await expect(page.getByLabel('Subject')).toBeVisible();
   });
 
   // search
@@ -129,9 +129,7 @@ test.describe('Communications page', () => {
         method: 'Police'
       })
     );
-    await page
-      .getByRole('searchbox', { name: 'Search communications' })
-      .fill('test 1');
+    await page.getByRole('searchbox', { name: 'Subject' }).fill('test 1');
     await page.getByTestId('applyFiltersButton').click();
     await expect(page.getByText('test 1', { exact: true })).toBeVisible();
   });
diff --git a/materials_ui/tests/tests-e2e/materials.spec.ts b/materials_ui/tests/tests-e2e/materials.spec.ts
index c67c4258..99ce0ee9 100644
--- a/materials_ui/tests/tests-e2e/materials.spec.ts
+++ b/materials_ui/tests/tests-e2e/materials.spec.ts
@@ -140,9 +140,9 @@ test.describe('Materials page', () => {
   test('T-008: user is able to hide filter', async ({ page }) => {
     mockRoute(page, '/case-materials', mockCaseMaterials());
     await page.getByRole('button', { name: 'Hide filters' }).click();
-    await expect(page.getByText('Search materials')).toBeHidden();
+    await expect(page.getByLabel('Material name')).toBeHidden();
     await page.getByRole('button', { name: 'Show filters' }).click();
-    await expect(page.getByText('Search materials')).toBeVisible();
+    await expect(page.getByLabel('Material name')).toBeVisible();
   });
 
   // search
@@ -158,7 +158,7 @@ test.describe('Materials page', () => {
       })
     );
     await page
-      .getByRole('searchbox', { name: 'Search materials' })
+      .getByRole('searchbox', { name: 'Material name' })
       .fill('Case Action');
     await page.getByTestId('applyFiltersButton').click();
     await expect(

From b58d728abd69cd4b1df9c63658f185760af6e51f Mon Sep 17 00:00:00 2001
From: girmacps <girma.bewketu@cps.gov.uk>
Date: Fri, 10 Jul 2026 16:49:01 +0100
Subject: [PATCH 11/28] fix typo (#440)

---
 materials_ui/src/constants/categoryList.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/materials_ui/src/constants/categoryList.ts b/materials_ui/src/constants/categoryList.ts
index 9ed3a1db..e94f29ec 100644
--- a/materials_ui/src/constants/categoryList.ts
+++ b/materials_ui/src/constants/categoryList.ts
@@ -4,7 +4,7 @@ export const materialsCategoryList = [
   'MG Form',
   'Other Material',
   'Unused Material',
-  'Defendant Pre-Cons'
+  'Defendant Pre Cons'
 ];
 
 export const communicationsCategoryList = [

From e935594b04084f12631e612ce9020e34d2bd9f00 Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Mon, 13 Jul 2026 10:56:05 +0100
Subject: [PATCH 12/28] =?UTF-8?q?FCT2-20521-ensure-that-category-labels-in?=
 =?UTF-8?q?-the-filters-section-can-be-=E2=80=A6=20(#442)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FCT2-20521-ensure-that-category-labels-in-the-filters-section-can-be-changed-without-breaking-functionality

* FCT2-20521-ensure-that-category-labels-in-the-filters-section-can-be-changed-without-breaking-functionality
---
 materials_ui/src/components/Filters/MaterialsFilters.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/materials_ui/src/components/Filters/MaterialsFilters.tsx b/materials_ui/src/components/Filters/MaterialsFilters.tsx
index cd477d96..7cd30d88 100644
--- a/materials_ui/src/components/Filters/MaterialsFilters.tsx
+++ b/materials_ui/src/components/Filters/MaterialsFilters.tsx
@@ -5,6 +5,10 @@ import { useFeatureFlag, useFilters } from '../../hooks';
 import Checkbox from '../Checkbox/Checkbox';
 import { FilterForm } from './FilterForm';
 
+const categoryLabelLookup: { [k: string]: string } = {
+  'Defendant Pre Cons': 'Defendant Pre-Cons'
+};
+
 export const MaterialsFilters = () => {
   const {
     filters,
@@ -98,7 +102,10 @@ export const MaterialsFilters = () => {
           {categories.map((category) => (
             <Checkbox
               id={`category-${category}`}
-              label={category}
+              label={(() => {
+                const lookupLabel = categoryLabelLookup[category];
+                return lookupLabel ? lookupLabel : category;
+              })()}
               checked={
                 shallowFilters?.filters?.category?.includes(category) || false
               }

From 2de72e8bfea1225c3b067a352357f8d6026c3344 Mon Sep 17 00:00:00 2001
From: afeescps <afees.kolawole@cps.gov.uk>
Date: Mon, 13 Jul 2026 13:17:37 +0100
Subject: [PATCH 13/28] [FCT2-20204] - fix(materials): align category filter
 labels with Review and Redact (#441)

* fix(materials): align category filter labels with Review and Redact

* refactor(materials): simplify category filter labels and checked default
---
 .../components/Filters/MaterialsFilters.tsx   | 20 ++++++-------------
 materials_ui/src/constants/categoryList.ts    | 14 ++++++-------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/materials_ui/src/components/Filters/MaterialsFilters.tsx b/materials_ui/src/components/Filters/MaterialsFilters.tsx
index 7cd30d88..c1facde0 100644
--- a/materials_ui/src/components/Filters/MaterialsFilters.tsx
+++ b/materials_ui/src/components/Filters/MaterialsFilters.tsx
@@ -5,10 +5,6 @@ import { useFeatureFlag, useFilters } from '../../hooks';
 import Checkbox from '../Checkbox/Checkbox';
 import { FilterForm } from './FilterForm';
 
-const categoryLabelLookup: { [k: string]: string } = {
-  'Defendant Pre Cons': 'Defendant Pre-Cons'
-};
-
 export const MaterialsFilters = () => {
   const {
     filters,
@@ -37,7 +33,6 @@ export const MaterialsFilters = () => {
     setSearch(searchTerm);
   };
 
-  const categories = materialsCategoryList;
   const statusList = ['Used', 'Unused'];
 
   return (
@@ -99,19 +94,16 @@ export const MaterialsFilters = () => {
             <h3 className="govuk-heading-s small-heading-spacing">Category</h3>
           </legend>
 
-          {categories.map((category) => (
+          {materialsCategoryList.map(({ value, label }) => (
             <Checkbox
-              id={`category-${category}`}
-              label={(() => {
-                const lookupLabel = categoryLabelLookup[category];
-                return lookupLabel ? lookupLabel : category;
-              })()}
+              id={`category-${value}`}
+              label={label}
               checked={
-                shallowFilters?.filters?.category?.includes(category) || false
+                shallowFilters?.filters?.category?.includes(value) ?? false
               }
               onChange={(event) => handleCheckboxChange('category', event)}
-              value={category}
-              key={category}
+              value={value}
+              key={value}
             />
           ))}
         </fieldset>
diff --git a/materials_ui/src/constants/categoryList.ts b/materials_ui/src/constants/categoryList.ts
index e94f29ec..8fcf8e7b 100644
--- a/materials_ui/src/constants/categoryList.ts
+++ b/materials_ui/src/constants/categoryList.ts
@@ -1,11 +1,11 @@
 export const materialsCategoryList = [
-  'Statement',
-  'Exhibit',
-  'MG Form',
-  'Other Material',
-  'Unused Material',
-  'Defendant Pre Cons'
-];
+  { value: 'Statement', label: 'Statements' },
+  { value: 'Exhibit', label: 'Exhibits' },
+  { value: 'MG Form', label: 'MG forms' },
+  { value: 'Other Material', label: 'Other material' },
+  { value: 'Defendant Pre Cons', label: 'Defendant pre-cons' },
+  { value: 'Unused Material', label: 'Unused material' }
+] as const;
 
 export const communicationsCategoryList = [
   'Bundle',

From 1ec056ab295d10292fc19ab7b8fd057628af154a Mon Sep 17 00:00:00 2001
From: afeescps <afees.kolawole@cps.gov.uk>
Date: Mon, 13 Jul 2026 14:26:50 +0100
Subject: [PATCH 14/28] fix(review-redact): rename Other documents to Other
 material for consistency with Materials (#443)

---
 .../utils/categoriseDocumentHelperUtils.ts                  | 6 +++---
 materials_ui/tests/tests-e2e/review-redact.spec.ts          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
index 0e8d7101..f997aad6 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
@@ -4,7 +4,7 @@ export const categoryDetails = [
   { label: 'Statements', categoryName: 'statement' },
   { label: 'Exhibits', categoryName: 'exhibit' },
   { label: 'MG forms', categoryName: 'mgForm' },
-  { label: 'Other documents', categoryName: 'otherDocument' },
+  { label: 'Other material', categoryName: 'otherMaterial' },
   { label: 'Defendant pre-cons', categoryName: 'defendantPreCons' },
   { label: 'Unused material', categoryName: 'unusedMaterial' }
 ] as const;
@@ -21,7 +21,7 @@ export const documentTypeIdsMap: Record<TCategoryName, number[]> = {
     1019, 1024, 1025, 1026, 1027, 1033, 1034, 1035, 1036, 1037, 1038, 1039,
     1040, 1041, 1045, 1046, 1047, 1048, 1049, 1050, 1060, 1061, 1063, 1066, 1203
   ],
-  otherDocument: [-2, 1201],
+  otherMaterial: [-2, 1201],
   defendantPreCons: [1056, 1057],
   unusedMaterial: [1009, 1010, 1011, 1058, 1202, 100239, 226148]
 };
@@ -32,7 +32,7 @@ export const initDocsOnDocCategoryNamesMap = (): {
   statement: [],
   exhibit: [],
   mgForm: [],
-  otherDocument: [],
+  otherMaterial: [],
   defendantPreCons: [],
   unusedMaterial: []
 });
diff --git a/materials_ui/tests/tests-e2e/review-redact.spec.ts b/materials_ui/tests/tests-e2e/review-redact.spec.ts
index 59799069..5b4005a2 100644
--- a/materials_ui/tests/tests-e2e/review-redact.spec.ts
+++ b/materials_ui/tests/tests-e2e/review-redact.spec.ts
@@ -22,7 +22,7 @@ test.describe('Review redact page', () => {
     await expect(page.getByText('Statements')).toBeVisible();
     await expect(page.getByText('Exhibits')).toBeVisible();
     await expect(page.getByText('MG forms')).toBeVisible();
-    await expect(page.getByText('Other documents')).toBeVisible();
+    await expect(page.getByText('Other material')).toBeVisible();
     await expect(page.getByText('Defendant pre-cons')).toBeVisible();
     await expect(page.getByText('Unused material')).toBeVisible();
   });

From 6f68e6a6909acbcd685738af917065fd993a076d Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Tue, 14 Jul 2026 13:56:24 +0100
Subject: [PATCH 15/28] FCT2-20540-improve-fe-linting-and-agree-with-fe-devs-2
 (#445)

* FCT2-20540-improve-fe-linting-and-agree-with-fe-devs

* FCT2-20540-improve-fe-linting-and-agree-with-fe-devs-2
---
 .prettierrc                                   |   3 +-
 materials_ui/.prettierrc                      |   3 +-
 materials_ui/eslint.config.js                 |  17 +-
 materials_ui/playwright.config.ts             |  24 +-
 .../public/assets/images/manifest.json        |   7 +-
 materials_ui/public/body-class.js             |   5 +-
 .../global-components-msal-redirect.html      |  15 +-
 materials_ui/public/mockServiceWorker.js      | 193 ++++++-------
 materials_ui/renovate.json                    |   4 +-
 materials_ui/serve.json                       |   7 +-
 .../__tests__/components/CaseSearch.test.tsx  |  20 +-
 .../src/__tests__/stores/useCaseInfo.test.ts  |   4 +-
 .../__tests__/stores/useMaterialTags.test.ts  |  20 +-
 .../__tests__/stores/useSelectedItems.test.ts |  74 ++---
 materials_ui/src/app.tsx                      |   4 +-
 .../assetsCWA/svgs/DownArrowIcon.tsx          |   6 +-
 .../LinkButton/LinkButton.module.scss         |   2 +-
 .../components/LinkButton/LinkButton.tsx      |   6 +-
 .../caseWorkApp/components/button/index.tsx   |  20 +-
 .../dropDownButton/DropdownButton.module.scss |   2 -
 .../dropDownButton/DropdownButton.tsx         |  63 +----
 .../components/tabs/TabButtons.tsx            |  41 +--
 .../src/caseWorkApp/components/tabs/Tabs.tsx  |  32 +--
 .../src/caseWorkApp/components/tabs/index.ts  |   2 +-
 .../caseWorkApp/components/tabs/styles.scss   |  18 +-
 .../components/tooltip/index.module.scss      |   8 +-
 .../caseWorkApp/components/tooltip/index.tsx  |  18 +-
 .../caseWorkApp/components/utils/getData.ts   |  36 +--
 .../src/caseWorkApp/hooks/useFocusTrap.tsx    |  21 +-
 .../hooks/useGlobalDropdownClose.ts           |  26 +-
 .../src/caseWorkApp/hooks/useLastFocus.tsx    |  11 +-
 .../caseWorkApp/hooks/useSwitchContentArea.ts |   4 +-
 .../CloseTabUnsavedRedactionsModal.tsx        |   8 +-
 .../pages/ReviewAndRedactPage/Modal.tsx       |  10 +-
 .../ReviewAndRedactPage.tsx                   | 140 +++-------
 .../UnsavedRedactionsModal.tsx                |  19 +-
 .../pages/ReviewAndRedactPage/index.tsx       |   2 +-
 .../src/caseWorkApp/types/redaction.ts        |  14 +-
 .../src/caseWorkApp/types/redactionLog.ts     |   7 +-
 .../src/components/Accordion/Accordion.scss   |  10 +-
 .../src/components/Accordion/Accordion.tsx    |  22 +-
 .../src/components/Banner/Banner.scss         |   2 +-
 materials_ui/src/components/Banner/Banner.tsx |  11 +-
 .../Button/AutoReclassifyButton.tsx           |  19 +-
 .../src/components/ButtonMenu/ButtonMenu.tsx  |  39 +--
 .../src/components/CaseInfo/CaseInfo.tsx      |  12 +-
 .../src/components/Checkbox/Checkbox.tsx      |   8 +-
 .../src/components/DateField/DateField.tsx    |  47 +---
 .../DefinitionList/DefinitionList.tsx         |   4 +-
 .../DocumentKeywordSearch.tsx                 | 147 +++-------
 .../DocumentPreview/DocumentActions.tsx       |   8 +-
 .../DocumentPreview/DocumentPreview.tsx       |   7 +-
 materials_ui/src/components/Drawer/Drawer.tsx |   5 +-
 .../src/components/Drawer/RenameDrawer.tsx    |  42 +--
 .../src/components/Filters/CommsFilters.tsx   |  52 +---
 .../Filters/DocumentKeywordSearchFilters.tsx  |  30 +-
 .../src/components/Filters/FilterForm.tsx     |   2 +-
 .../components/Filters/MaterialsFilters.tsx   |  26 +-
 materials_ui/src/components/Layout/Layout.tsx |  28 +-
 .../LoadingSpinner/LoadingSpinner.tsx         |  10 +-
 .../src/components/NavList/NavList.scss       |   2 +-
 .../src/components/NavList/NavList.tsx        |  15 +-
 .../src/components/Pagination/Pagination.tsx  |   8 +-
 .../src/components/PdfViewer/PdfViewer.css    |   4 +-
 .../src/components/PdfViewer/PdfViewer.tsx    |  12 +-
 materials_ui/src/components/Radios/Radios.tsx |  34 +--
 .../components/SearchInput/SearchInput.tsx    |   2 +-
 .../components/SectionBreak/SectionBreak.scss |   3 +-
 .../src/components/SelectList/SelectList.tsx  |  28 +-
 .../SortableTable/CaseMaterialsTable.tsx      |  95 ++-----
 .../SortableTable/CommunicationsTable.tsx     | 131 +++------
 .../SortableTable/SortableTable.tsx           | 263 +++++++++---------
 .../components/SortableTable/TableActions.tsx |  10 +-
 .../components/SummaryCard/SummaryCard.tsx    |  14 +-
 .../src/components/TextArea/TextArea.tsx      |  15 +-
 .../src/components/TextInput/TextInput.tsx    |  10 +-
 .../forms/EditMaterial/EditExhibit.tsx        |  41 +--
 .../forms/EditMaterial/EditStatement.tsx      |  58 +---
 .../components/forms/EditMaterial/Summary.tsx |  21 +-
 .../forms/Reclassify/AddWitness.tsx           |  28 +-
 .../components/forms/Reclassify/Exhibit.tsx   |  14 +-
 .../components/forms/Reclassify/MGForms.tsx   |   6 +-
 .../forms/Reclassify/MaterialName.tsx         |  17 +-
 .../src/components/forms/Reclassify/Other.tsx |   6 +-
 .../components/forms/Reclassify/Statement.tsx |  29 +-
 .../components/forms/Reclassify/Summary.tsx   |  86 ++----
 .../Reclassify/common/DocumentTypeField.tsx   |  16 +-
 .../forms/Reclassify/common/SubjectField.tsx  |  10 +-
 .../forms/Reclassify/common/UsedField.tsx     |   8 +-
 .../forms/Reclassify/constants/options.tsx    |  35 +--
 .../forms/Reclassify/constants/string.ts      |   9 +-
 .../mappers/mapReclassifyExhibit.ts           |  14 +-
 .../Reclassify/mappers/mapReclassifyMGForm.ts |   6 +-
 .../Reclassify/mappers/mapReclassifyOther.ts  |   6 +-
 .../mappers/mapReclassifyStatement.ts         |  28 +-
 .../components/forms/Reclassify/utils/form.ts |   2 +-
 materials_ui/src/constants/categoryList.ts    |   8 +-
 materials_ui/src/constants/chargeStatus.ts    |   4 +-
 materials_ui/src/constants/discard.ts         |   2 +-
 materials_ui/src/constants/enum.ts            |   4 +-
 .../src/constants/featureFlagGroups.ts        |   2 +-
 materials_ui/src/constants/query.ts           |   2 +-
 materials_ui/src/constants/url.ts             |   7 +-
 materials_ui/src/context/AppContext.tsx       |  15 +-
 .../context/FiltersContext/helpers/utils.ts   |  22 +-
 .../src/context/FiltersContext/index.tsx      |  39 +--
 materials_ui/src/context/GroupContext.tsx     |   4 +-
 .../hooks/case-materials/useAutoReclassify.ts |   6 +-
 .../hooks/case-materials/useBulkSetUnused.ts  |  21 +-
 .../hooks/case-materials/useCaseMaterial.ts   |   4 +-
 .../hooks/case-materials/useCaseMaterials.ts  |  25 +-
 .../src/hooks/case-materials/useDiscard.ts    |  24 +-
 .../hooks/case-materials/useEditMaterial.tsx  |  75 +++--
 .../src/hooks/case-materials/useReadStatus.ts |  14 +-
 .../src/hooks/case-materials/useReclassify.ts |  28 +-
 .../hooks/case-materials/useReclassifyForm.ts |   9 +-
 .../src/hooks/case-materials/useRename.ts     |  27 +-
 .../src/hooks/case/useCaseDefendants.ts       |  24 +-
 materials_ui/src/hooks/case/useCaseInfo.ts    |   6 +-
 .../src/hooks/case/useCaseLockCheck.ts        |   6 +-
 .../src/hooks/case/useCaseWitnesses.ts        |  24 +-
 .../src/hooks/case/useWitnessStatements.ts    |  27 +-
 .../src/hooks/documents/useDocumentPdfUrl.ts  |  10 +-
 .../src/hooks/documents/useDocumentPreview.ts |   4 +-
 .../src/hooks/documents/useDocumentTypes.ts   |  42 +--
 .../src/hooks/documents/useDocuments.ts       |   8 +-
 .../src/hooks/exhibits/useExhibitProducers.ts |  21 +-
 .../src/hooks/exhibits/useExhibits.ts         |   6 +-
 materials_ui/src/hooks/index.ts               |  10 +-
 materials_ui/src/hooks/pcd-request/usePCD.ts  |   4 +-
 .../src/hooks/pcd-request/usePCDList.ts       |  10 +-
 .../src/hooks/pcd-review/usePCDReviewCore.ts  |  16 +-
 .../hooks/pcd-review/usePCDReviewDetails.ts   |  23 +-
 .../src/hooks/search/useCaseSearch.ts         |  20 +-
 .../src/hooks/search/useDocumentSearch.ts     |  23 +-
 .../src/hooks/search/useSearchTracker.ts      |  14 +-
 .../ui/navigateToViewDocumentPageInNewTab.ts  |   4 +-
 materials_ui/src/hooks/ui/useAppRoute.ts      |   2 +-
 materials_ui/src/hooks/ui/useBanner.ts        |   3 +-
 materials_ui/src/hooks/ui/useFeatureFlag.ts   |  10 +-
 materials_ui/src/hooks/ui/useFilters.ts       |  49 +---
 materials_ui/src/hooks/ui/useLogger.ts        |   2 +-
 materials_ui/src/hooks/ui/usePageColors.ts    |   7 +-
 materials_ui/src/hooks/ui/usePager.ts         |  15 +-
 materials_ui/src/hooks/ui/useRequest.ts       |  14 +-
 materials_ui/src/hooks/ui/useTableActions.ts  |  34 +--
 .../src/hooks/ui/useUserGroupsFeatureFlag.ts  |   3 +-
 materials_ui/src/index.tsx                    |  12 +-
 .../BulkRedactionForm.tsx                     |  42 +--
 .../CaseworkPdfRedactorWrapper.tsx            | 162 ++++-------
 .../hooks/useBulkRedactionFlow.ts             |  29 +-
 .../hooks/useBulkSearch.ts                    |  18 +-
 .../hooks/useDocumentCheckOutRequest.ts       |  37 +--
 .../utils/bulkSearchDocumentUtils.ts          |  11 +-
 .../utils/combineRedactionsDeletions.ts       |   4 +-
 .../utils/saveDeletionsUtils.ts               |   6 +-
 .../utils/saveRedactionsUtils.ts              |  14 +-
 .../utils/saveRotationsUtils.ts               |   6 +-
 .../DocumentSidebar.tsx                       |   9 +-
 .../DocumentSidebarAccordion.tsx              |  45 +--
 .../DocumentSidebarAccordionDocument.tsx      |  44 +--
 .../DocumentSidebarNotes.tsx                  |  46 +--
 .../DocumentSidebarTag.tsx                    |   5 +-
 .../DocumentSidebarWrapper.tsx                |   6 +-
 .../getters/getAccessTokenFromMsalInstance.ts |  11 +-
 .../getters/getAxiosInstance.tsx              |   2 +-
 .../getters/getDocumentList.tsx               |  30 +-
 .../getters/getDocumentNotes.tsx              |  17 +-
 .../templates/GovUkAccordion.scss             |  31 +--
 .../templates/GovUkAccordion.tsx              |  14 +-
 .../templates/GovUkBanner.tsx                 |  18 +-
 .../templates/GovUkButton.scss                |   4 +-
 .../templates/GovUkButton.tsx                 |   4 +-
 .../templates/GovUkLink.scss                  |   4 +-
 .../templates/GovUkTagTemplate.tsx            |  13 +-
 .../templates/NotesIcon.tsx                   |  15 +-
 .../utils/DocumentSidebarLocalStorageUtils.ts |  20 +-
 .../OpenDocumentTabsLocalStorageUtils.ts      |  17 +-
 .../utils/categoriseDocument.ts               |   7 +-
 .../utils/categoriseDocumentHelperUtils.ts    |  20 +-
 .../utils/dateUtils.ts                        |  12 +-
 .../DocumentTabPanel/DocumentTabPanel.tsx     |  40 +--
 .../PdfRedactor/ManualRedactionForm.tsx       |   5 +-
 .../PdfRedactor/PdfDeletionReasonForm.tsx     |  12 +-
 .../PdfRedactor/PdfRedactor.tsx               | 176 +++---------
 .../PdfRedactor/PdfRedactorComponents.scss    |   1 -
 .../PdfRedactor/PdfRedactorComponents.tsx     |  34 +--
 .../PdfRedactor/PdfRedactorPage.tsx           | 204 ++++----------
 .../PdfRedactor/RedactionTypeSelect.tsx       |   6 +-
 .../PdfRedactor/hooks/useDocumentFocus.ts     |  35 +--
 .../hooks/useDocumentFocusHelpers.ts          |   8 +-
 .../hooks/useScrollToFocusedHighlight.ts      |  12 +-
 .../PdfRedactor/icons/RotateIcon.tsx          |   8 +-
 .../PdfRedactor/icons/TickCircleIcon.tsx      |   6 +-
 .../modals/PdfRedactorCenteredModal.tsx       |   4 +-
 .../modals/PdfRedactorMiniModal.tsx           |  32 +--
 .../modals/SaveToProceedToDeletionsModal.tsx  |  21 +-
 .../modals/SaveToProceedToRedactionsModal.tsx |  21 +-
 .../modals/SaveToProceedToRotationsModal.tsx  |  21 +-
 .../PdfRedactor/templates/CloseIconButton.tsx |   9 +-
 .../PdfRedactor/templates/GovUkButton.scss    |   2 +-
 .../PdfRedactor/templates/GovUkButton.tsx     |   7 +-
 .../PdfRedactor/utils/bulkRedactionUtils.ts   |  14 +-
 .../PdfRedactor/utils/coordUtils.ts           |  11 +-
 .../PdfRedactor/utils/highlightedTextUtils.ts |  28 +-
 .../PdfRedactor/utils/rotationUtils.ts        |   6 +-
 .../PdfRedactor/utils/searchHighlightUtils.ts |  15 +-
 .../PdfRedactor/utils/useTriggger.tsx         |   7 +-
 .../RedactionLog/Modal.tsx                    |   2 +-
 .../RedactionLog/Popover.tsx                  |   2 +-
 .../RedactionLog/RedactionLogModal.tsx        |  46 ++-
 .../RedactionLog/RedactionLogModalBody.tsx    |  72 ++---
 .../RedactionLog/RedactionLogModalHeader.tsx  |  48 ++--
 .../RedactionLog/templates/Checkbox.tsx       |  14 +-
 .../RedactionLog/templates/ErrorSummary.tsx   |  11 +-
 .../RedactionLog/templates/Select.tsx         |   6 +-
 .../utils/getDocumentTypeValueFromMappings.ts |  12 +-
 .../RedactionLog/utils/transformFormData.ts   |  69 ++---
 .../DocumentActionsDropdown.tsx               |  14 +-
 .../documenViewportArea/index.module.scss     |   2 +-
 .../documenViewportArea/index.tsx             |  43 +--
 materials_ui/src/mocks/handlers.ts            |  12 +-
 materials_ui/src/msalInstance.ts              |   6 +-
 materials_ui/src/pages/CaseSearch.tsx         |  89 ++----
 materials_ui/src/pages/Communications.tsx     |  63 ++---
 materials_ui/src/pages/DiscardMaterial.tsx    |  23 +-
 materials_ui/src/pages/EditMaterial.tsx       | 148 ++++------
 materials_ui/src/pages/Materials.tsx          |  62 ++---
 materials_ui/src/pages/NotAuthorisedPage.tsx  |  13 +-
 materials_ui/src/pages/PcdRequest.tsx         | 211 ++++----------
 materials_ui/src/pages/PcdReview.tsx          | 126 +++------
 materials_ui/src/pages/Reclassification.tsx   | 132 +++------
 materials_ui/src/pages/ReclassifyToUnused.tsx |  39 +--
 materials_ui/src/pages/ServerErrorPage.tsx    |   8 +-
 materials_ui/src/pages/ViewDocumentPage.scss  |   1 -
 materials_ui/src/pages/ViewDocumentPage.tsx   |  29 +-
 materials_ui/src/routes.tsx                   |  62 +----
 materials_ui/src/schemas/app.ts               |   6 +-
 materials_ui/src/schemas/banner.ts            |   2 +-
 materials_ui/src/schemas/bulkSetUnused.ts     |  21 +-
 materials_ui/src/schemas/caseDetails.ts       |  22 +-
 materials_ui/src/schemas/caseLockStatus.ts    |   6 +-
 materials_ui/src/schemas/caseMaterials.ts     |  47 +---
 materials_ui/src/schemas/caseinfo.ts          |   2 +-
 materials_ui/src/schemas/classification.ts    |   8 +-
 materials_ui/src/schemas/defendants.ts        |  12 +-
 materials_ui/src/schemas/documentTypes.ts     |  13 +-
 materials_ui/src/schemas/documents.ts         |  25 +-
 materials_ui/src/schemas/exhibitProducer.ts   |  11 +-
 .../src/schemas/forms/editStatement.ts        |  70 +++--
 materials_ui/src/schemas/forms/reclassify.ts  | 152 ++++------
 materials_ui/src/schemas/index.ts             |   2 +-
 materials_ui/src/schemas/pcd.ts               |  19 +-
 materials_ui/src/schemas/pcdReview.ts         |  60 ++--
 materials_ui/src/schemas/polaris/caseinfo.ts  |   7 +-
 materials_ui/src/schemas/witness.ts           |  30 +-
 materials_ui/src/setupTests.ts                |   4 +-
 materials_ui/src/stores/useCaseInfo.ts        |   2 +-
 materials_ui/src/stores/useMaterialTags.ts    |  10 +-
 materials_ui/src/stores/useSelectedItems.ts   |  18 +-
 materials_ui/src/styles/_accessibility.scss   |   1 -
 materials_ui/src/telemetry/appInsights.ts     |  28 +-
 materials_ui/src/utils/cmsStringTransform.ts  |   3 +-
 materials_ui/src/utils/date.ts                |   8 +-
 materials_ui/src/utils/filtering.ts           |  19 +-
 materials_ui/src/utils/reclassify.ts          |  81 +++---
 materials_ui/src/utils/string.ts              |   5 +-
 materials_ui/src/utils/url.ts                 |  11 +-
 .../tests/global-setup/global.setup.ts        |   4 +-
 materials_ui/tests/helpers.ts                 |  10 +-
 materials_ui/tests/mocks/mockCaseDetails.ts   |  14 +-
 materials_ui/tests/mocks/mockCaseMaterials.ts |   9 +-
 materials_ui/tests/mocks/mockDefendents.ts    |  12 +-
 materials_ui/tests/mocks/mockLockCase.ts      |   6 +-
 .../tests/mocks/mockOchestrationReclassify.ts |   6 +-
 materials_ui/tests/mocks/mockWitness.ts       |  16 +-
 materials_ui/tests/mocks/pcd/mockPcdCore.ts   |  20 +-
 .../tests/mocks/pcd/mockPcdRequest.ts         |  35 +--
 .../tests/mocks/pcd/mockPcdReviewCore.ts      |   8 +-
 .../tests/mocks/pcd/mockPcdReviewDetails.ts   |  77 ++---
 materials_ui/tests/tests-e2e/actions.spec.ts  |  44 +--
 .../tests/tests-e2e/case-search.spec.ts       |  20 +-
 materials_ui/tests/tests-e2e/casework.spec.ts |   8 +-
 .../tests/tests-e2e/communications.spec.ts    |  38 ++-
 .../tests/tests-e2e/materials.spec.ts         |  72 ++---
 .../tests/tests-e2e/pcd-request.spec.ts       |  24 +-
 .../tests/tests-e2e/pcd-review.spec.ts        |  54 ++--
 .../tests/tests-e2e/reclassify.spec.ts        | 127 ++-------
 .../tests/tests-e2e/review-redact.spec.ts     |  23 +-
 materials_ui/tsconfig.app.json                |   1 -
 materials_ui/tsconfig.json                    |   5 +-
 materials_ui/vite.config.ts                   |  52 ++--
 292 files changed, 2404 insertions(+), 5147 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index b382ff0a..480073c0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,7 @@
 {
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "all",
+  "printWidth": 100,
   "objectWrap": "collapse",
   "semi": true,
   "useTabs": false,
diff --git a/materials_ui/.prettierrc b/materials_ui/.prettierrc
index 70ff5d0d..0401b8f0 100644
--- a/materials_ui/.prettierrc
+++ b/materials_ui/.prettierrc
@@ -1,7 +1,8 @@
 {
   "plugins": ["prettier-plugin-organize-imports"],
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "all",
+  "printWidth": 100,
   "objectWrap": "collapse",
   "semi": true,
   "useTabs": false,
diff --git a/materials_ui/eslint.config.js b/materials_ui/eslint.config.js
index a06d7cf4..33e47c3e 100644
--- a/materials_ui/eslint.config.js
+++ b/materials_ui/eslint.config.js
@@ -14,20 +14,13 @@ export default [
     plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true }
-      ],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'react-hooks/exhaustive-deps': 'off',
       '@typescript-eslint/no-unused-vars': [
         'error',
-        {
-          argsIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
-          caughtErrorsIgnorePattern: '^_'
-        }
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
       ],
-      '@typescript-eslint/no-explicit-any': 'warn'
-    }
-  }
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
 ];
diff --git a/materials_ui/playwright.config.ts b/materials_ui/playwright.config.ts
index 79275299..28597aba 100644
--- a/materials_ui/playwright.config.ts
+++ b/materials_ui/playwright.config.ts
@@ -27,8 +27,8 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [
-    ["html", { outputFolder: "./tests/playwright-report" }],
-    ["junit", { outputFile: "./tests/e2e-test-results.xml" }],
+    ['html', { outputFolder: './tests/playwright-report' }],
+    ['junit', { outputFile: './tests/e2e-test-results.xml' }],
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -38,10 +38,10 @@ export default defineConfig({
     screenshot: 'only-on-failure',
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    navigationTimeout: 60 * 1000,  // 60s for page.goto()
-    actionTimeout: 30 * 1000,      // 30s for clicks/fills
+    navigationTimeout: 60 * 1000, // 60s for page.goto()
+    actionTimeout: 30 * 1000, // 30s for clicks/fills
   },
-  
+
   /* Configure projects for major browsers */
   projects: [
     // {
@@ -76,10 +76,10 @@ export default defineConfig({
       use: {
         ...devices['Desktop Edge'],
         channel: 'msedge',
-        storageState: 'tests/.auth/globalSetup.json'
+        storageState: 'tests/.auth/globalSetup.json',
       },
-      dependencies: ['setup']
-    }
+      dependencies: ['setup'],
+    },
     // {
     //   name: 'Google Chrome',
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
@@ -95,7 +95,7 @@ export default defineConfig({
     env: {
       ...process.env,
       // Keep E2E independent from external script availability in CI.
-      VITE_GLOBAL_SCRIPT_URL: ''
-    }
-  }
-});
\ No newline at end of file
+      VITE_GLOBAL_SCRIPT_URL: '',
+    },
+  },
+});
diff --git a/materials_ui/public/assets/images/manifest.json b/materials_ui/public/assets/images/manifest.json
index 6c0dba9d..5eeab57f 100644
--- a/materials_ui/public/assets/images/manifest.json
+++ b/materials_ui/public/assets/images/manifest.json
@@ -1,12 +1,7 @@
 {
   "icons": [
     { "src": "images/favicon.ico", "type": "image/x-icon", "sizes": "48x48" },
-    {
-      "src": "images/favicon.svg",
-      "type": "image/svg+xml",
-      "sizes": "150x150",
-      "purpose": "any"
-    },
+    { "src": "images/favicon.svg", "type": "image/svg+xml", "sizes": "150x150", "purpose": "any" },
     {
       "src": "images/govuk-icon-180.png",
       "type": "image/png",
diff --git a/materials_ui/public/body-class.js b/materials_ui/public/body-class.js
index e59a18b2..1bf6e93b 100644
--- a/materials_ui/public/body-class.js
+++ b/materials_ui/public/body-class.js
@@ -1,5 +1,2 @@
 document.body.className +=
-  ' js-enabled' +
-  ('noModule' in HTMLScriptElement.prototype
-    ? ' govuk-frontend-supported'
-    : '');
+  ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
diff --git a/materials_ui/public/global-components-msal-redirect.html b/materials_ui/public/global-components-msal-redirect.html
index 779770e2..f47748a9 100644
--- a/materials_ui/public/global-components-msal-redirect.html
+++ b/materials_ui/public/global-components-msal-redirect.html
@@ -1,10 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <title>Global components auth termination</title>
-</head>
-<!--
+  <head>
+    <title>Global components auth termination</title>
+  </head>
+  <!--
   This file is part of an experimental feature (see #FCT2-8790). The file exists so that silent
   MSAL flows initiated by global components have a predictable URL to terminate at.
 
@@ -14,6 +13,4 @@
   of this file within this folder.
 
   This file doesn't interfere with the operation of the host app.
--->
-
-</html>
\ No newline at end of file
+--></html>
diff --git a/materials_ui/public/mockServiceWorker.js b/materials_ui/public/mockServiceWorker.js
index 558540fa..08460145 100644
--- a/materials_ui/public/mockServiceWorker.js
+++ b/materials_ui/public/mockServiceWorker.js
@@ -7,114 +7,99 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.12.4'
-const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
-const activeClientIds = new Set()
+const PACKAGE_VERSION = '2.12.4';
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82';
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
+const activeClientIds = new Set();
 
 addEventListener('install', function () {
-  self.skipWaiting()
-})
+  self.skipWaiting();
+});
 
 addEventListener('activate', function (event) {
-  event.waitUntil(self.clients.claim())
-})
+  event.waitUntil(self.clients.claim());
+});
 
 addEventListener('message', async function (event) {
-  const clientId = Reflect.get(event.source || {}, 'id')
+  const clientId = Reflect.get(event.source || {}, 'id');
 
   if (!clientId || !self.clients) {
-    return
+    return;
   }
 
-  const client = await self.clients.get(clientId)
+  const client = await self.clients.get(clientId);
 
   if (!client) {
-    return
+    return;
   }
 
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
+  const allClients = await self.clients.matchAll({ type: 'window' });
 
   switch (event.data) {
     case 'KEEPALIVE_REQUEST': {
-      sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
-      })
-      break
+      sendToClient(client, { type: 'KEEPALIVE_RESPONSE' });
+      break;
     }
 
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: {
-          packageVersion: PACKAGE_VERSION,
-          checksum: INTEGRITY_CHECKSUM,
-        },
-      })
-      break
+        payload: { packageVersion: PACKAGE_VERSION, checksum: INTEGRITY_CHECKSUM },
+      });
+      break;
     }
 
     case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
+      activeClientIds.add(clientId);
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
-      })
-      break
+        payload: { client: { id: client.id, frameType: client.frameType } },
+      });
+      break;
     }
 
     case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
+      activeClientIds.delete(clientId);
 
       const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
+        return client.id !== clientId;
+      });
 
       // Unregister itself when there are no more clients
       if (remainingClients.length === 0) {
-        self.registration.unregister()
+        self.registration.unregister();
       }
 
-      break
+      break;
     }
   }
-})
+});
 
 addEventListener('fetch', function (event) {
-  const requestInterceptedAt = Date.now()
+  const requestInterceptedAt = Date.now();
 
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
-    return
+    return;
   }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (
-    event.request.cache === 'only-if-cached' &&
-    event.request.mode !== 'same-origin'
-  ) {
-    return
+  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
+    return;
   }
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
   // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
-    return
+    return;
   }
 
-  const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
-})
+  const requestId = crypto.randomUUID();
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt));
+});
 
 /**
  * @param {FetchEvent} event
@@ -122,23 +107,18 @@ addEventListener('fetch', function (event) {
  * @param {number} requestInterceptedAt
  */
 async function handleRequest(event, requestId, requestInterceptedAt) {
-  const client = await resolveMainClient(event)
-  const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(
-    event,
-    client,
-    requestId,
-    requestInterceptedAt,
-  )
+  const client = await resolveMainClient(event);
+  const requestCloneForEvents = event.request.clone();
+  const response = await getResponse(event, client, requestId, requestInterceptedAt);
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
   // this message will pend indefinitely.
   if (client && activeClientIds.has(client.id)) {
-    const serializedRequest = await serializeRequest(requestCloneForEvents)
+    const serializedRequest = await serializeRequest(requestCloneForEvents);
 
     // Clone the response so both the client and the library could consume it.
-    const responseClone = response.clone()
+    const responseClone = response.clone();
 
     sendToClient(
       client,
@@ -146,10 +126,7 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
         type: 'RESPONSE',
         payload: {
           isMockedResponse: IS_MOCKED_RESPONSE in response,
-          request: {
-            id: requestId,
-            ...serializedRequest,
-          },
+          request: { id: requestId, ...serializedRequest },
           response: {
             type: responseClone.type,
             status: responseClone.status,
@@ -160,10 +137,10 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
         },
       },
       responseClone.body ? [serializedRequest.body, responseClone.body] : [],
-    )
+    );
   }
 
-  return response
+  return response;
 }
 
 /**
@@ -175,30 +152,28 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
  * @returns {Promise<Client | undefined>}
  */
 async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId)
+  const client = await self.clients.get(event.clientId);
 
   if (activeClientIds.has(event.clientId)) {
-    return client
+    return client;
   }
 
   if (client?.frameType === 'top-level') {
-    return client
+    return client;
   }
 
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
+  const allClients = await self.clients.matchAll({ type: 'window' });
 
   return allClients
     .filter((client) => {
       // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
+      return client.visibilityState === 'visible';
     })
     .find((client) => {
       // Find the client ID that's recorded in the
       // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
-    })
+      return activeClientIds.has(client.id);
+    });
 }
 
 /**
@@ -211,36 +186,34 @@ async function resolveMainClient(event) {
 async function getResponse(event, client, requestId, requestInterceptedAt) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
-  const requestClone = event.request.clone()
+  const requestClone = event.request.clone();
 
   function passthrough() {
     // Cast the request headers to a new Headers instance
     // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
+    const headers = new Headers(requestClone.headers);
 
     // Remove the "accept" header value that marked this request as passthrough.
     // This prevents request alteration and also keeps it compliant with the
     // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
+    const acceptHeader = headers.get('accept');
     if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
+      const values = acceptHeader.split(',').map((value) => value.trim());
+      const filteredValues = values.filter((value) => value !== 'msw/passthrough');
 
       if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
+        headers.set('accept', filteredValues.join(', '));
       } else {
-        headers.delete('accept')
+        headers.delete('accept');
       }
     }
 
-    return fetch(requestClone, { headers })
+    return fetch(requestClone, { headers });
   }
 
   // Bypass mocking when the client is not active.
   if (!client) {
-    return passthrough()
+    return passthrough();
   }
 
   // Bypass initial page load requests (i.e. static assets).
@@ -248,35 +221,31 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
   // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
   // and is not ready to handle requests.
   if (!activeClientIds.has(client.id)) {
-    return passthrough()
+    return passthrough();
   }
 
   // Notify the client that a request has been intercepted.
-  const serializedRequest = await serializeRequest(event.request)
+  const serializedRequest = await serializeRequest(event.request);
   const clientMessage = await sendToClient(
     client,
     {
       type: 'REQUEST',
-      payload: {
-        id: requestId,
-        interceptedAt: requestInterceptedAt,
-        ...serializedRequest,
-      },
+      payload: { id: requestId, interceptedAt: requestInterceptedAt, ...serializedRequest },
     },
     [serializedRequest.body],
-  )
+  );
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
+      return respondWithMock(clientMessage.data);
     }
 
     case 'PASSTHROUGH': {
-      return passthrough()
+      return passthrough();
     }
   }
 
-  return passthrough()
+  return passthrough();
 }
 
 /**
@@ -287,21 +256,18 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
  */
 function sendToClient(client, message, transferrables = []) {
   return new Promise((resolve, reject) => {
-    const channel = new MessageChannel()
+    const channel = new MessageChannel();
 
     channel.port1.onmessage = (event) => {
       if (event.data && event.data.error) {
-        return reject(event.data.error)
+        return reject(event.data.error);
       }
 
-      resolve(event.data)
-    }
+      resolve(event.data);
+    };
 
-    client.postMessage(message, [
-      channel.port2,
-      ...transferrables.filter(Boolean),
-    ])
-  })
+    client.postMessage(message, [channel.port2, ...transferrables.filter(Boolean)]);
+  });
 }
 
 /**
@@ -314,17 +280,14 @@ function respondWithMock(response) {
   // instance will have status code set to 0. Since it's not possible to create
   // a Response instance with status code 0, handle that use-case separately.
   if (response.status === 0) {
-    return Response.error()
+    return Response.error();
   }
 
-  const mockedResponse = new Response(response.body, response)
+  const mockedResponse = new Response(response.body, response);
 
-  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
-    value: true,
-    enumerable: true,
-  })
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, { value: true, enumerable: true });
 
-  return mockedResponse
+  return mockedResponse;
 }
 
 /**
@@ -345,5 +308,5 @@ async function serializeRequest(request) {
     referrerPolicy: request.referrerPolicy,
     body: await request.arrayBuffer(),
     keepalive: request.keepalive,
-  }
+  };
 }
diff --git a/materials_ui/renovate.json b/materials_ui/renovate.json
index 5db72dd6..22a99432 100644
--- a/materials_ui/renovate.json
+++ b/materials_ui/renovate.json
@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ]
+  "extends": ["config:recommended"]
 }
diff --git a/materials_ui/serve.json b/materials_ui/serve.json
index 0d5bccff..f3aa1593 100644
--- a/materials_ui/serve.json
+++ b/materials_ui/serve.json
@@ -8,11 +8,8 @@
         { "key": "Cache-Control", "value": "no-store" },
         { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
         { "key": "X-Permitted-Cross-Domain-Policies", "value": "none" },
-        {
-          "key": "Content-Security-Policy",
-          "value": "#{CSP_VALUE_IN_ADO_VARIABLE}#"
-        }
+        { "key": "Content-Security-Policy", "value": "#{CSP_VALUE_IN_ADO_VARIABLE}#" }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/materials_ui/src/__tests__/components/CaseSearch.test.tsx b/materials_ui/src/__tests__/components/CaseSearch.test.tsx
index 7c9193e3..60bf89b6 100644
--- a/materials_ui/src/__tests__/components/CaseSearch.test.tsx
+++ b/materials_ui/src/__tests__/components/CaseSearch.test.tsx
@@ -8,7 +8,7 @@ describe('<CaseSearchPage />', () => {
     render(
       <MemoryRouter>
         <CaseSearchPage />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
     expect(screen.getByText('Find a case')).toBeInTheDocument();
   });
@@ -17,7 +17,7 @@ describe('<CaseSearchPage />', () => {
     render(
       <MemoryRouter>
         <CaseSearchPage />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
     expect(screen.getByLabelText('Search for a case URN')).toBeInTheDocument();
   });
@@ -26,7 +26,7 @@ describe('<CaseSearchPage />', () => {
     render(
       <MemoryRouter>
         <CaseSearchPage />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
     expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
   });
@@ -35,10 +35,10 @@ describe('<CaseSearchPage />', () => {
     render(
       <MemoryRouter>
         <CaseSearchPage />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
     expect(
-      screen.getByText('Search and review a CPS case in England and Wales')
+      screen.getByText('Search and review a CPS case in England and Wales'),
     ).toBeInTheDocument();
   });
 
@@ -46,7 +46,7 @@ describe('<CaseSearchPage />', () => {
     render(
       <MemoryRouter>
         <CaseSearchPage />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
     expect(screen.getByText('Cancel')).toBeInTheDocument();
   });
@@ -55,7 +55,7 @@ describe('<CaseSearchPage />', () => {
     render(
       <MemoryRouter>
         <CaseSearchPage />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
     const input = screen.getByLabelText('Search for a case URN');
@@ -64,8 +64,8 @@ describe('<CaseSearchPage />', () => {
     await userEvent.type(input, '06SC12345711');
     await userEvent.click(button);
 
-    expect(
-      (await screen.findAllByText('Enter a URN in the right format')).length
-    ).toBeGreaterThan(0);
+    expect((await screen.findAllByText('Enter a URN in the right format')).length).toBeGreaterThan(
+      0,
+    );
   });
 });
diff --git a/materials_ui/src/__tests__/stores/useCaseInfo.test.ts b/materials_ui/src/__tests__/stores/useCaseInfo.test.ts
index c7543c38..eb4ce882 100644
--- a/materials_ui/src/__tests__/stores/useCaseInfo.test.ts
+++ b/materials_ui/src/__tests__/stores/useCaseInfo.test.ts
@@ -9,7 +9,7 @@ const caseInfoData1: CaseInfoType = {
   leadDefendantFirstNames: 'Joe',
   leadDefendantSurname: 'Bloggs',
   numberOfDefendants: 2,
-  unitName: 'Unit name 1'
+  unitName: 'Unit name 1',
 };
 
 const caseInfoData2: CaseInfoType = {
@@ -18,7 +18,7 @@ const caseInfoData2: CaseInfoType = {
   leadDefendantFirstNames: 'John',
   leadDefendantSurname: 'Doe',
   numberOfDefendants: 1,
-  unitName: 'Unit name 2'
+  unitName: 'Unit name 2',
 };
 
 describe('stores > useCaseInfoStore', () => {
diff --git a/materials_ui/src/__tests__/stores/useMaterialTags.test.ts b/materials_ui/src/__tests__/stores/useMaterialTags.test.ts
index f49d8993..8c2b8c76 100644
--- a/materials_ui/src/__tests__/stores/useMaterialTags.test.ts
+++ b/materials_ui/src/__tests__/stores/useMaterialTags.test.ts
@@ -10,7 +10,7 @@ describe('useMaterialTags Store', () => {
   it('should set new tags correctly', () => {
     const newTags = [
       { materialId: 1, tagName: 'tag1' },
-      { materialId: 2, tagName: 'tag2' }
+      { materialId: 2, tagName: 'tag2' },
     ];
 
     useMaterialTags.getState().setTags(newTags);
@@ -22,14 +22,14 @@ describe('useMaterialTags Store', () => {
   it('should update existing tags when the same materialId is added with new tagName', () => {
     const initialTags = [
       { materialId: 1, tagName: 'tag1' },
-      { materialId: 2, tagName: 'tag2' }
+      { materialId: 2, tagName: 'tag2' },
     ];
 
     useMaterialTags.getState().setTags(initialTags);
 
     const updatedTags = [
       { materialId: 1, tagName: 'updatedTag1' },
-      { materialId: 3, tagName: 'tag3' }
+      { materialId: 3, tagName: 'tag3' },
     ];
 
     useMaterialTags.getState().setTags(updatedTags);
@@ -38,21 +38,21 @@ describe('useMaterialTags Store', () => {
     expect(store.materialTags).toEqual([
       { materialId: 1, tagName: 'updatedTag1' },
       { materialId: 2, tagName: 'tag2' },
-      { materialId: 3, tagName: 'tag3' }
+      { materialId: 3, tagName: 'tag3' },
     ]);
   });
 
   it('should add new tags and update existing ones with the same materialId', () => {
     const newTags = [
       { materialId: 1, tagName: 'tag1' },
-      { materialId: 2, tagName: 'tag2' }
+      { materialId: 2, tagName: 'tag2' },
     ];
 
     useMaterialTags.getState().setTags(newTags);
 
     const duplicateTags = [
       { materialId: 1, tagName: 'newTag1' },
-      { materialId: 3, tagName: 'newTag3' }
+      { materialId: 3, tagName: 'newTag3' },
     ];
 
     useMaterialTags.getState().setTags(duplicateTags);
@@ -61,14 +61,14 @@ describe('useMaterialTags Store', () => {
     expect(store.materialTags).toEqual([
       { materialId: 1, tagName: 'newTag1' },
       { materialId: 2, tagName: 'tag2' },
-      { materialId: 3, tagName: 'newTag3' }
+      { materialId: 3, tagName: 'newTag3' },
     ]);
   });
 
   it('should clear all tags when clearTags is called with no materialIdsToRemove', () => {
     const newTags = [
       { materialId: 1, tagName: 'tag1' },
-      { materialId: 2, tagName: 'tag2' }
+      { materialId: 2, tagName: 'tag2' },
     ];
 
     useMaterialTags.getState().setTags(newTags);
@@ -82,7 +82,7 @@ describe('useMaterialTags Store', () => {
     const newTags = [
       { materialId: 1, tagName: 'tag1' },
       { materialId: 2, tagName: 'tag2' },
-      { materialId: 3, tagName: 'tag3' }
+      { materialId: 3, tagName: 'tag3' },
     ];
 
     useMaterialTags.getState().setTags(newTags);
@@ -96,7 +96,7 @@ describe('useMaterialTags Store', () => {
   it('should not modify tags when clearTags is called with an empty array', () => {
     const newTags = [
       { materialId: 1, tagName: 'tag1' },
-      { materialId: 2, tagName: 'tag2' }
+      { materialId: 2, tagName: 'tag2' },
     ];
 
     useMaterialTags.getState().setTags(newTags);
diff --git a/materials_ui/src/__tests__/stores/useSelectedItems.test.ts b/materials_ui/src/__tests__/stores/useSelectedItems.test.ts
index 3d9620fd..5c48edb0 100644
--- a/materials_ui/src/__tests__/stores/useSelectedItems.test.ts
+++ b/materials_ui/src/__tests__/stores/useSelectedItems.test.ts
@@ -28,15 +28,13 @@ function getMaterial(override?: Partial<CaseMaterialsType>): CaseMaterialsType {
     item: '',
     existingproducerOrWitnessId: 0,
     isReclassifiable: false,
-    ...override
+    ...override,
   };
 }
 
 describe('stores > useSelectedItems', () => {
   beforeEach(() => {
-    useSelectedItemsStore.setState({
-      items: { communications: [], materials: [] }
-    });
+    useSelectedItemsStore.setState({ items: { communications: [], materials: [] } });
   });
 
   it('should initialise as expected', () => {
@@ -50,16 +48,12 @@ describe('stores > useSelectedItems', () => {
     useSelectedItemsStore.getState().addItems([getMaterial()], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(1);
 
-    useSelectedItemsStore
-      .getState()
-      .addItems([getMaterial({ id: 2 })], 'materials');
+    useSelectedItemsStore.getState().addItems([getMaterial({ id: 2 })], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
   });
 
   it('should add multiple material items to state (addItems())', () => {
-    useSelectedItemsStore
-      .getState()
-      .addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
+    useSelectedItemsStore.getState().addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
   });
 
@@ -67,21 +61,15 @@ describe('stores > useSelectedItems', () => {
     useSelectedItemsStore.getState().addItems([getMaterial()], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(1);
 
-    useSelectedItemsStore
-      .getState()
-      .addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
+    useSelectedItemsStore.getState().addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
   });
 
   it('should remove a single material item from state (removeItems())', () => {
-    useSelectedItemsStore
-      .getState()
-      .addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
+    useSelectedItemsStore.getState().addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
 
-    useSelectedItemsStore
-      .getState()
-      .removeItems([getMaterial({ id: 2 })], 'materials');
+    useSelectedItemsStore.getState().removeItems([getMaterial({ id: 2 })], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(1);
   });
 
@@ -89,66 +77,40 @@ describe('stores > useSelectedItems', () => {
     useSelectedItemsStore
       .getState()
       .addItems(
-        [
-          getMaterial(),
-          getMaterial({ id: 2 }),
-          getMaterial({ id: 3 }),
-          getMaterial({ id: 4 })
-        ],
-        'materials'
+        [getMaterial(), getMaterial({ id: 2 }), getMaterial({ id: 3 }), getMaterial({ id: 4 })],
+        'materials',
       );
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(4);
 
     useSelectedItemsStore
       .getState()
-      .removeItems(
-        [getMaterial({ id: 2 }), getMaterial({ id: 4 })],
-        'materials'
-      );
+      .removeItems([getMaterial({ id: 2 }), getMaterial({ id: 4 })], 'materials');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
   });
 
   it('should clear items from one type (clear(type))', () => {
+    useSelectedItemsStore.getState().addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
     useSelectedItemsStore
       .getState()
-      .addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
-    useSelectedItemsStore
-      .getState()
-      .addItems(
-        [getMaterial({ id: 3 }), getMaterial({ id: 4 })],
-        'communications'
-      );
+      .addItems([getMaterial({ id: 3 }), getMaterial({ id: 4 })], 'communications');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
-    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(
-      2
-    );
+    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(2);
 
     useSelectedItemsStore.getState().clear('communications');
-    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(
-      0
-    );
+    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(0);
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
   });
 
   it('should clear all items (clear())', () => {
+    useSelectedItemsStore.getState().addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
     useSelectedItemsStore
       .getState()
-      .addItems([getMaterial(), getMaterial({ id: 2 })], 'materials');
-    useSelectedItemsStore
-      .getState()
-      .addItems(
-        [getMaterial({ id: 3 }), getMaterial({ id: 4 })],
-        'communications'
-      );
+      .addItems([getMaterial({ id: 3 }), getMaterial({ id: 4 })], 'communications');
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(2);
-    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(
-      2
-    );
+    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(2);
 
     useSelectedItemsStore.getState().clear();
-    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(
-      0
-    );
+    expect(useSelectedItemsStore.getState().items.communications).toHaveLength(0);
     expect(useSelectedItemsStore.getState().items.materials).toHaveLength(0);
   });
 });
diff --git a/materials_ui/src/app.tsx b/materials_ui/src/app.tsx
index 1e7b509c..d2a9ff2c 100644
--- a/materials_ui/src/app.tsx
+++ b/materials_ui/src/app.tsx
@@ -15,9 +15,7 @@ export const App = () => {
   }, [instance, accounts]);
 
   const account = instance.getActiveAccount() || accounts[0];
-  const role = (account?.idTokenClaims?.roles as string[] | undefined)?.join(
-    ','
-  );
+  const role = (account?.idTokenClaims?.roles as string[] | undefined)?.join(',');
 
   useEffect(() => {
     if (role) setTelemetryUserRole(role);
diff --git a/materials_ui/src/caseWorkApp/assetsCWA/svgs/DownArrowIcon.tsx b/materials_ui/src/caseWorkApp/assetsCWA/svgs/DownArrowIcon.tsx
index 7780a698..86e770bf 100644
--- a/materials_ui/src/caseWorkApp/assetsCWA/svgs/DownArrowIcon.tsx
+++ b/materials_ui/src/caseWorkApp/assetsCWA/svgs/DownArrowIcon.tsx
@@ -1,8 +1,4 @@
-export const DownArrowIcon = (p: {
-  color: string;
-  rotateDegrees?: number;
-  scale?: number;
-}) => {
+export const DownArrowIcon = (p: { color: string; rotateDegrees?: number; scale?: number }) => {
   const rotateDegrees = p.rotateDegrees ?? 0;
   const scale = p.scale ?? 1;
   return (
diff --git a/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.module.scss b/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.module.scss
index 818feffa..610ad082 100644
--- a/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.module.scss
+++ b/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.module.scss
@@ -7,7 +7,7 @@
   font-size: 1.187rem;
   width: fit-content;
   color: #1d70b8;
-  font-family: "NewTransport", "Arial", sans-serif;
+  font-family: 'NewTransport', 'Arial', sans-serif;
 
   &:hover:not(:disabled):not(:focus) {
     color: #fff;
diff --git a/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.tsx b/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.tsx
index ca81a705..24ba8d33 100644
--- a/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.tsx
+++ b/materials_ui/src/caseWorkApp/components/LinkButton/LinkButton.tsx
@@ -26,9 +26,9 @@ export const LinkButton = forwardRef<HTMLButtonElement | null, LinkButtonProps>(
       ariaLabel,
       ariaExpanded,
       disabled = false,
-      type
+      type,
     },
-    ref
+    ref,
   ) => {
     const resolvedClassName = `${classes.linkButton} ${className}`;
     return (
@@ -47,5 +47,5 @@ export const LinkButton = forwardRef<HTMLButtonElement | null, LinkButtonProps>(
         {children}
       </button>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/caseWorkApp/components/button/index.tsx b/materials_ui/src/caseWorkApp/components/button/index.tsx
index dc6e8e18..f590149b 100644
--- a/materials_ui/src/caseWorkApp/components/button/index.tsx
+++ b/materials_ui/src/caseWorkApp/components/button/index.tsx
@@ -14,29 +14,19 @@ const buttonVariantMap: { [k in TButtonVariant]: string } = {
   inverse: 'govuk-button--inverse',
   default: 'govuk-button--secondary',
   secondary: 'govuk-button--secondary',
-  red: 'govuk-button--red' // custom class to maintain consistency, not required
+  red: 'govuk-button--red', // custom class to maintain consistency, not required
 };
 
 const buttonSizeStyleMap: { [k in TButtonSize]: CSSProperties } = {
   s: { fontSize: '0.875rem' },
-  m: {}
+  m: {},
 };
 const buttonVariantStyleMap: { [k in TButtonVariant]?: CSSProperties } = {
-  red: { backgroundColor: '#d4351c', color: 'white' }
+  red: { backgroundColor: '#d4351c', color: 'white' },
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      variant = 'default',
-      size = 'm',
-      className,
-      style,
-      children,
-      ...restProps
-    },
-    ref
-  ) => {
+  ({ variant = 'default', size = 'm', className, style, children, ...restProps }, ref) => {
     const variantClass = buttonVariantMap[variant];
     const variantStyle = buttonVariantStyleMap[variant];
     const sizeStyle = buttonSizeStyleMap[size];
@@ -52,5 +42,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <span data-ismodified="1" className="br_wrap"></span>
       </button>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.module.scss b/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.module.scss
index 1fa57966..17b30241 100644
--- a/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.module.scss
+++ b/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.module.scss
@@ -58,5 +58,3 @@
     color: #b1b4b6;
   }
 }
-
-
diff --git a/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.tsx b/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.tsx
index dc3b86e7..03dc96b9 100644
--- a/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.tsx
+++ b/materials_ui/src/caseWorkApp/components/dropDownButton/DropdownButton.tsx
@@ -8,23 +8,12 @@ import classes from './DropdownButton.module.scss';
 
 type TButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
 
-export const DropdownListItem = (
-  initProps: TButtonProps & { borderBottom: boolean }
-) => {
+export const DropdownListItem = (initProps: TButtonProps & { borderBottom: boolean }) => {
   const { borderBottom, ...props } = initProps;
   return (
-    <div
-      style={{
-        whiteSpace: 'nowrap',
-        borderBottom: borderBottom ? 'solid 2px black' : ''
-      }}
-    >
+    <div style={{ whiteSpace: 'nowrap', borderBottom: borderBottom ? 'solid 2px black' : '' }}>
       <Button
-        style={{
-          width: '100%',
-          textAlign: 'right',
-          boxShadow: borderBottom ? undefined : 'unset'
-        }}
+        style={{ width: '100%', textAlign: 'right', boxShadow: borderBottom ? undefined : 'unset' }}
         {...props}
       />
     </div>
@@ -81,36 +70,18 @@ export const DropdownButton2 = (p: {
 
   return (
     <span style={{ position: 'relative' }}>
-      <Button
-        aria-label={p.ariaLabel}
-        ref={dropDownBtnRef}
-        onClick={() => p.setIsOpen(!p.isOpen)}
-      >
+      <Button aria-label={p.ariaLabel} ref={dropDownBtnRef} onClick={() => p.setIsOpen(!p.isOpen)}>
         <div style={{ display: 'flex', gap: '4px' }}>
           <div>{p.ButtonContent}</div>
-          <DownArrowIcon
-            color="#1d70b8"
-            rotateDegrees={p.isOpen ? 180 : 0}
-            scale={0.75}
-          />
+          <DownArrowIcon color="#1d70b8" rotateDegrees={p.isOpen ? 180 : 0} scale={0.75} />
         </div>
       </Button>
       {p.isOpen && (
         <div
           ref={dropDownPanelRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            right: '0',
-            zIndex: 1007
-          }}
+          style={{ position: 'absolute', top: '100%', right: '0', zIndex: 1007 }}
         >
-          <div
-            style={{
-              background: '#fff',
-              filter: 'drop-shadow(0 1px 0.15rem #000)'
-            }}
-          >
+          <div style={{ background: '#fff', filter: 'drop-shadow(0 1px 0.15rem #000)' }}>
             {p.children}
           </div>
         </div>
@@ -144,18 +115,13 @@ export const DropdownButton: React.FC<DropdownButtonProps> = ({
   dataTestId = 'dropdown-btn',
   ariaLabel = 'dropdown',
   disabled = false,
-  iconScale = 1
+  iconScale = 1,
 }) => {
   const dropDownBtnRef = useRef<HTMLButtonElement | null>(null);
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [buttonOpen, setButtonOpen] = useState(false);
 
-  useGlobalDropdownClose(
-    dropDownBtnRef,
-    panelRef,
-    setButtonOpen,
-    '#dropdown-panel'
-  );
+  useGlobalDropdownClose(dropDownBtnRef, panelRef, setButtonOpen, '#dropdown-panel');
 
   const handleBtnClick = (id: string) => {
     setButtonOpen(false);
@@ -178,18 +144,11 @@ export const DropdownButton: React.FC<DropdownButtonProps> = ({
       >
         <div style={{ display: 'flex', alignItems: 'flex-end', gap: '4px' }}>
           {name && (
-            <span
-              style={{ fontWeight: '700' }}
-              className={classes.dropdownBtnName}
-            >
+            <span style={{ fontWeight: '700' }} className={classes.dropdownBtnName}>
               {name}
             </span>
           )}
-          <DownArrowIcon
-            color="#1d70b8"
-            rotateDegrees={buttonOpen ? 180 : 0}
-            scale={iconScale}
-          />
+          <DownArrowIcon color="#1d70b8" rotateDegrees={buttonOpen ? 180 : 0} scale={iconScale} />
         </div>
       </LinkButton>
 
diff --git a/materials_ui/src/caseWorkApp/components/tabs/TabButtons.tsx b/materials_ui/src/caseWorkApp/components/tabs/TabButtons.tsx
index 84d5cf6f..418f606e 100644
--- a/materials_ui/src/caseWorkApp/components/tabs/TabButtons.tsx
+++ b/materials_ui/src/caseWorkApp/components/tabs/TabButtons.tsx
@@ -16,28 +16,20 @@ const TabButtons: React.FC<TabButtonProps> = ({
   items,
   activeTabIndex,
   handleTabSelection,
-  handleCloseTab
+  handleCloseTab,
 }) => {
   const activeTabRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     activeTabRef.current?.focus();
-    activeTabRef.current?.parentElement?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest'
-    });
+    activeTabRef.current?.parentElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   }, [activeTabIndex, items.length]);
 
   type ArrowKeyCodes = 'ArrowLeft' | 'ArrowRight';
 
-  const ARROW_KEY_SHIFTS: Record<ArrowKeyCodes, number> = {
-    ArrowLeft: -1,
-    ArrowRight: 1
-  };
+  const ARROW_KEY_SHIFTS: Record<ArrowKeyCodes, number> = { ArrowLeft: -1, ArrowRight: 1 };
 
-  const handleKeyPressOnTab: React.KeyboardEventHandler<HTMLButtonElement> = (
-    ev
-  ) => {
+  const handleKeyPressOnTab: React.KeyboardEventHandler<HTMLButtonElement> = (ev) => {
     if (ev.code in ARROW_KEY_SHIFTS) {
       const thisShift = ARROW_KEY_SHIFTS[ev.code as ArrowKeyCodes]; // -1, 1, or undefined
       moveToNextOrPreviousTab(thisShift);
@@ -50,7 +42,7 @@ const TabButtons: React.FC<TabButtonProps> = ({
       document.getElementById('tabs-dropdown')?.click();
       setTimeout(() => {
         const firstItem = document.querySelector<HTMLElement>(
-          '#dropdown-panel button:not(:disabled)'
+          '#dropdown-panel button:not(:disabled)',
         );
         firstItem?.focus();
       }, 0);
@@ -76,10 +68,7 @@ const TabButtons: React.FC<TabButtonProps> = ({
   };
 
   const tabDropdownItems = useMemo(() => {
-    return items.map((item) => ({
-      ...item,
-      disabled: item.id === items[activeTabIndex]?.id
-    }));
+    return items.map((item) => ({ ...item, disabled: item.id === items[activeTabIndex]?.id }));
   }, [items, activeTabIndex]);
 
   if (!items.length) {
@@ -116,9 +105,7 @@ const TabButtons: React.FC<TabButtonProps> = ({
         </div>
       </div>
 
-      <div
-        style={{ flex: 1, minWidth: 0, overflowX: 'auto', overflowY: 'hidden' }}
-      >
+      <div style={{ flex: 1, minWidth: 0, overflowX: 'auto', overflowY: 'hidden' }}>
         <ul className={`${classes.tabsList}`} role="tablist">
           {items.map((item, index) => {
             const { id, label, ariaLabel } = item;
@@ -126,9 +113,7 @@ const TabButtons: React.FC<TabButtonProps> = ({
             return (
               <li
                 className={`${
-                  activeTabIndex === index
-                    ? classes.activeTab
-                    : classes.inactiveTab
+                  activeTabIndex === index ? classes.activeTab : classes.inactiveTab
                 } ${classes.tabListItem}`}
                 key={id}
                 data-testid={`tab-${index}`}
@@ -136,17 +121,11 @@ const TabButtons: React.FC<TabButtonProps> = ({
               >
                 <button
                   id={`tab_${index}`}
-                  aria-controls={
-                    index === activeTabIndex
-                      ? 'active-tab-panel'
-                      : `panel-${index}`
-                  }
+                  aria-controls={index === activeTabIndex ? 'active-tab-panel' : `panel-${index}`}
                   aria-label={ariaLabel}
                   role="tab"
                   className={`${classes.tabButton} ${index === activeTabIndex ? 'tabButtonFocused' : ''}`}
-                  data-testid={
-                    index === activeTabIndex ? 'tab-active' : `btn-tab-${index}`
-                  }
+                  data-testid={index === activeTabIndex ? 'tab-active' : `btn-tab-${index}`}
                   onClick={() => {
                     if (id !== items[activeTabIndex]?.id) {
                       handleTabSelection(id);
diff --git a/materials_ui/src/caseWorkApp/components/tabs/Tabs.tsx b/materials_ui/src/caseWorkApp/components/tabs/Tabs.tsx
index 9494241f..4523bfa0 100644
--- a/materials_ui/src/caseWorkApp/components/tabs/Tabs.tsx
+++ b/materials_ui/src/caseWorkApp/components/tabs/Tabs.tsx
@@ -31,9 +31,7 @@ export const Tabs: React.FC<TabsProps> = ({
   const activeTabArrayPos = items.findIndex((item) => item.id === activeTabId);
   const activeTabIndex = activeTabArrayPos === -1 ? 0 : activeTabArrayPos;
 
-  const handleRegionKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
-    ev
-  ) => {
+  const handleRegionKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (ev) => {
     if (ev.target !== ev.currentTarget) return;
     if (ev.code === 'ArrowLeft' || ev.code === 'ArrowRight') {
       ev.preventDefault();
@@ -44,9 +42,7 @@ export const Tabs: React.FC<TabsProps> = ({
       ev.preventDefault();
       document.getElementById('tabs-dropdown')?.click();
       setTimeout(() => {
-        document
-          .querySelector<HTMLElement>('#dropdown-panel button:not(:disabled)')
-          ?.focus();
+        document.querySelector<HTMLElement>('#dropdown-panel button:not(:disabled)')?.focus();
       }, 0);
     }
   };
@@ -58,7 +54,7 @@ export const Tabs: React.FC<TabsProps> = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          marginBottom: '24px'
+          marginBottom: '24px',
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
@@ -92,19 +88,14 @@ export const Tabs: React.FC<TabsProps> = ({
         aria-labelledby="document-tabs-region-label"
         tabIndex={0}
         onKeyDown={handleRegionKeyDown}
-        style={{
-          display: 'flex',
-          gap: '8px',
-          width: '100%',
-          alignItems: 'start'
-        }}
+        style={{ display: 'flex', gap: '8px', width: '100%', alignItems: 'start' }}
       >
         <div style={{ flex: 1, minWidth: 0 }}>
           <TabButtons
             items={items.map((item) => ({
               id: item.id,
               label: item.label,
-              ariaLabel: `Document ${item.label}`
+              ariaLabel: `Document ${item.label}`,
             }))}
             activeTabIndex={activeTabIndex}
             handleTabSelection={handleTabSelection}
@@ -124,13 +115,9 @@ export const Tabs: React.FC<TabsProps> = ({
 
           return (
             <div
-              id={
-                index === activeTabIndex ? 'active-tab-panel' : `panel-${index}`
-              }
+              id={index === activeTabIndex ? 'active-tab-panel' : `panel-${index}`}
               aria-labelledby={
-                index === activeTabIndex
-                  ? 'document-panel-region-label'
-                  : `tab_${index}`
+                index === activeTabIndex ? 'document-panel-region-label' : `tab_${index}`
               }
               key={panelId}
               role="tabpanel"
@@ -141,10 +128,7 @@ export const Tabs: React.FC<TabsProps> = ({
               }  ${classes.contentArea}`}
             >
               {index === activeTabIndex && (
-                <span
-                  id="document-panel-region-label"
-                  className={classes.tabPanelRegionLabel}
-                >
+                <span id="document-panel-region-label" className={classes.tabPanelRegionLabel}>
                   Document view port
                 </span>
               )}
diff --git a/materials_ui/src/caseWorkApp/components/tabs/index.ts b/materials_ui/src/caseWorkApp/components/tabs/index.ts
index 471a0b2d..941e6bab 100644
--- a/materials_ui/src/caseWorkApp/components/tabs/index.ts
+++ b/materials_ui/src/caseWorkApp/components/tabs/index.ts
@@ -1 +1 @@
-export { Tabs } from "./Tabs";
+export { Tabs } from './Tabs';
diff --git a/materials_ui/src/caseWorkApp/components/tabs/styles.scss b/materials_ui/src/caseWorkApp/components/tabs/styles.scss
index ae3dadf4..e558d38c 100644
--- a/materials_ui/src/caseWorkApp/components/tabs/styles.scss
+++ b/materials_ui/src/caseWorkApp/components/tabs/styles.scss
@@ -1,24 +1,26 @@
 @font-face {
-  font-family: "NewTransport";
+  font-family: 'NewTransport';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../../../assets/fonts/NewTransport-RegularWEB.woff") format("woff"),
-  url("../../../assets/fonts/NewTransport-RegularWEB.woff2") format("woff2");
+  src:
+    url('../../../assets/fonts/NewTransport-RegularWEB.woff') format('woff'),
+    url('../../../assets/fonts/NewTransport-RegularWEB.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: "NewTransport";
+  font-family: 'NewTransport';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("../../../assets/fonts/NewTransport-BoldWEB.woff") format("woff"),
-  url("../../../assets/fonts/NewTransport-BoldWEB.woff2") format("woff2");
+  src:
+    url('../../../assets/fonts/NewTransport-BoldWEB.woff') format('woff'),
+    url('../../../assets/fonts/NewTransport-BoldWEB.woff2') format('woff2');
 }
 
-$govuk-font-family: "NewTransport", "Arial", sans-serif;
+$govuk-font-family: 'NewTransport', 'Arial', sans-serif;
 
-@import "govuk-frontend/dist/govuk/index";
+@import 'govuk-frontend/dist/govuk/index';
 
 body {
   margin: 0;
diff --git a/materials_ui/src/caseWorkApp/components/tooltip/index.module.scss b/materials_ui/src/caseWorkApp/components/tooltip/index.module.scss
index 23355782..4d26d1a7 100644
--- a/materials_ui/src/caseWorkApp/components/tooltip/index.module.scss
+++ b/materials_ui/src/caseWorkApp/components/tooltip/index.module.scss
@@ -31,7 +31,7 @@
     right: 50%;
     margin-right: -0.5rem;
     bottom: -0.5rem;
-    content: " ";
+    content: ' ';
   }
 }
 
@@ -49,7 +49,7 @@
     right: 50%;
     margin-right: -0.5rem;
     top: -0.5rem;
-    content: " ";
+    content: ' ';
   }
 }
 
@@ -66,7 +66,7 @@
     left: -0.625rem;
     top: 0.4375rem;
     position: absolute;
-    content: " ";
+    content: ' ';
   }
 }
 
@@ -83,6 +83,6 @@
     right: -0.625rem;
     top: 0.4375rem;
     position: absolute;
-    content: " ";
+    content: ' ';
   }
 }
diff --git a/materials_ui/src/caseWorkApp/components/tooltip/index.tsx b/materials_ui/src/caseWorkApp/components/tooltip/index.tsx
index 07ead9fc..fada7421 100644
--- a/materials_ui/src/caseWorkApp/components/tooltip/index.tsx
+++ b/materials_ui/src/caseWorkApp/components/tooltip/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
-import classes from "./index.module.scss";
+import React, { useState } from 'react';
+import classes from './index.module.scss';
 
 type TooltipProps = {
   text: string;
   children: React.ReactNode;
-  position?: "top" | "bottom" | "left" | "right";
+  position?: 'top' | 'bottom' | 'left' | 'right';
   className?: string;
   dataTestId?: string;
   onHoverCallback?: () => void;
@@ -14,8 +14,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
   text,
   children,
   className,
-  position = "bottom",
-  dataTestId = "tooltip",
+  position = 'bottom',
+  dataTestId = 'tooltip',
   onHoverCallback,
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
@@ -33,11 +33,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
 
   const getPositionClass = () => {
     switch (position) {
-      case "right":
+      case 'right':
         return classes.tooltipRight;
-      case "left":
+      case 'left':
         return classes.tooltipLeft;
-      case "top":
+      case 'top':
         return classes.tooltipTop;
       default:
         return classes.tooltipBottom;
@@ -49,7 +49,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
 
   return (
     <div
-      className={`${classes.tooltipContainer} ${className ? className : ""}`}
+      className={`${classes.tooltipContainer} ${className ? className : ''}`}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
diff --git a/materials_ui/src/caseWorkApp/components/utils/getData.ts b/materials_ui/src/caseWorkApp/components/utils/getData.ts
index acea5573..31905b8f 100644
--- a/materials_ui/src/caseWorkApp/components/utils/getData.ts
+++ b/materials_ui/src/caseWorkApp/components/utils/getData.ts
@@ -9,10 +9,7 @@ export const useAxiosInstances = () => {
   const createInstance = (baseURL: string, scopes?: string[]) => {
     const instance = axios.create({ baseURL, withCredentials: true });
     instance.interceptors.request.use(async (config) => {
-      const accessToken = await getAccessTokenFromMsalInstance(
-        msalInstance,
-        scopes
-      );
+      const accessToken = await getAccessTokenFromMsalInstance(msalInstance, scopes);
       config.headers.Authorization = `Bearer ${accessToken}`;
       config.headers['Correlation-Id'] = crypto.randomUUID();
       config.headers.ClientName = 'ManageMaterials';
@@ -27,8 +24,8 @@ export const useAxiosInstances = () => {
     axiosInstance: createInstance(import.meta.env.VITE_POLARIS_GATEWAY_URL),
     redactionLogAxios: createInstance(
       import.meta.env.VITE_REDACTION_LOG_URL,
-      redactionLogScope ? [redactionLogScope] : undefined
-    )
+      redactionLogScope ? [redactionLogScope] : undefined,
+    ),
   };
 };
 
@@ -40,13 +37,10 @@ export const getDocuments = async (p: {
   caseId: number | undefined;
 }) => {
   try {
-    const response = await p.axiosInstance.get(
-      `/api/urns/${p.urn}/cases/${p.caseId}/documents`
-    );
+    const response = await p.axiosInstance.get(`/api/urns/${p.urn}/cases/${p.caseId}/documents`);
     return response.data;
   } catch (error) {
-    if (error instanceof AxiosError)
-      console.error(`Error getting documents: ${error.message}`);
+    if (error instanceof AxiosError) console.error(`Error getting documents: ${error.message}`);
   }
 };
 
@@ -60,7 +54,7 @@ export const getPdfFiles = async (p: {
   try {
     const response = await p.axiosInstance.get(
       `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/pdf`,
-      { responseType: 'blob' }
+      { responseType: 'blob' },
     );
     return response.data;
   } catch (error: unknown) {
@@ -71,9 +65,7 @@ export const getPdfFiles = async (p: {
   }
 };
 
-export const getDocumentTypeMappings = async (p: {
-  axiosInstance: AxiosInstance;
-}) => {
+export const getDocumentTypeMappings = async (p: { axiosInstance: AxiosInstance }) => {
   try {
     const response = await p.axiosInstance.get('/api/polarisMappings');
     return response.data;
@@ -88,8 +80,7 @@ export const getLookups = async (p: { axiosInstance: AxiosInstance }) => {
     const response = await p.axiosInstance.get('/api/lookUps');
     return response.data;
   } catch (error) {
-    if (error instanceof AxiosError)
-      console.error(`Error getting lookups: ${error.message}`);
+    if (error instanceof AxiosError) console.error(`Error getting lookups: ${error.message}`);
   }
 };
 
@@ -101,18 +92,11 @@ export const postRedactionLog = async (p: {
     const response = await p.axiosInstance.post('/api/redactionLogs', p.data);
     return response.data;
   } catch (error) {
-    if (error instanceof AxiosError)
-      console.error(`Error posting redaction log: ${error.message}`);
+    if (error instanceof AxiosError) console.error(`Error posting redaction log: ${error.message}`);
     throw error;
   }
 };
 
 export const GetDataFromAxios = () => {
-  return {
-    useAxiosInstance,
-    getDocuments,
-    getPdfFiles,
-    getLookups,
-    postRedactionLog
-  };
+  return { useAxiosInstance, getDocuments, getPdfFiles, getLookups, postRedactionLog };
 };
diff --git a/materials_ui/src/caseWorkApp/hooks/useFocusTrap.tsx b/materials_ui/src/caseWorkApp/hooks/useFocusTrap.tsx
index 1bd51756..cbafe5c6 100644
--- a/materials_ui/src/caseWorkApp/hooks/useFocusTrap.tsx
+++ b/materials_ui/src/caseWorkApp/hooks/useFocusTrap.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useCallback } from "react";
+import { useCallback, useEffect } from 'react';
 
-export const useFocusTrap = (id = "#modal") => {
+export const useFocusTrap = (id = '#modal') => {
   const getTabbableElements = useCallback(() => {
     if (!document.querySelector(id)) {
       return;
@@ -8,7 +8,7 @@ export const useFocusTrap = (id = "#modal") => {
     const tabbableElements = document
       .querySelector(id)
       ?.querySelectorAll(
-        'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"], summary:not([disabled])'
+        'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"], summary:not([disabled])',
       );
 
     return tabbableElements;
@@ -18,26 +18,23 @@ export const useFocusTrap = (id = "#modal") => {
     (e: KeyboardEvent) => {
       const tabbableElements = getTabbableElements();
 
-      if ((e.code === "Tab" || e.key === "Tab") && tabbableElements) {
+      if ((e.code === 'Tab' || e.key === 'Tab') && tabbableElements) {
         if (e.shiftKey) {
           if (document.activeElement === tabbableElements[0]) {
-            (
-              tabbableElements[tabbableElements.length - 1] as HTMLElement
-            ).focus();
+            (tabbableElements[tabbableElements.length - 1] as HTMLElement).focus();
             e.preventDefault();
           }
         }
         if (
           !e.shiftKey &&
-          document.activeElement ===
-            tabbableElements[tabbableElements.length - 1]
+          document.activeElement === tabbableElements[tabbableElements.length - 1]
         ) {
           (tabbableElements[0] as HTMLElement).focus();
           e.preventDefault();
         }
       }
     },
-    [getTabbableElements]
+    [getTabbableElements],
   );
 
   useEffect(() => {
@@ -53,9 +50,9 @@ export const useFocusTrap = (id = "#modal") => {
   }, [getTabbableElements]);
 
   useEffect(() => {
-    window.addEventListener("keydown", keyDownHandler);
+    window.addEventListener('keydown', keyDownHandler);
     return () => {
-      window.removeEventListener("keydown", keyDownHandler);
+      window.removeEventListener('keydown', keyDownHandler);
     };
   }, [keyDownHandler]);
 };
diff --git a/materials_ui/src/caseWorkApp/hooks/useGlobalDropdownClose.ts b/materials_ui/src/caseWorkApp/hooks/useGlobalDropdownClose.ts
index 2ba31f0e..08c53d91 100644
--- a/materials_ui/src/caseWorkApp/hooks/useGlobalDropdownClose.ts
+++ b/materials_ui/src/caseWorkApp/hooks/useGlobalDropdownClose.ts
@@ -1,11 +1,11 @@
-import { useCallback, useEffect } from "react";
-import { useFocusTrap } from "./useFocusTrap";
+import { useCallback, useEffect } from 'react';
+import { useFocusTrap } from './useFocusTrap';
 
 export const useGlobalDropdownClose = (
   dropDownBtnRef: React.MutableRefObject<HTMLElement | null>,
   panelRef: React.MutableRefObject<HTMLElement | null>,
   setButtonOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  panelId: string
+  panelId: string,
 ) => {
   useFocusTrap(panelId);
 
@@ -19,38 +19,36 @@ export const useGlobalDropdownClose = (
       }
 
       const isTargetInsidePanel =
-        panelRef.current &&
-        event.target &&
-        panelRef.current.contains(event.target as Node);
+        panelRef.current && event.target && panelRef.current.contains(event.target as Node);
 
       const isTargetFlaggedAsExempt =
         event.target instanceof HTMLElement &&
-        event.target.hasAttribute("data-prevent-global-close");
+        event.target.hasAttribute('data-prevent-global-close');
 
       if (!(isTargetInsidePanel || isTargetFlaggedAsExempt)) {
         setButtonOpen(false);
         event.stopPropagation();
       }
     },
-    [dropDownBtnRef, panelRef, setButtonOpen]
+    [dropDownBtnRef, panelRef, setButtonOpen],
   );
 
   const keyDownHandler = useCallback(
     (event: KeyboardEvent) => {
-      if (event.code === "Escape" && panelRef.current) {
+      if (event.code === 'Escape' && panelRef.current) {
         setButtonOpen(false);
         dropDownBtnRef.current?.focus();
       }
     },
-    [dropDownBtnRef, panelRef, setButtonOpen]
+    [dropDownBtnRef, panelRef, setButtonOpen],
   );
 
   useEffect(() => {
-    window.addEventListener("keydown", keyDownHandler);
-    document.addEventListener("click", handleOutsideClick);
+    window.addEventListener('keydown', keyDownHandler);
+    document.addEventListener('click', handleOutsideClick);
     return () => {
-      window.removeEventListener("keydown", keyDownHandler);
-      document.removeEventListener("click", handleOutsideClick);
+      window.removeEventListener('keydown', keyDownHandler);
+      document.removeEventListener('click', handleOutsideClick);
     };
   }, [keyDownHandler, handleOutsideClick]);
 };
diff --git a/materials_ui/src/caseWorkApp/hooks/useLastFocus.tsx b/materials_ui/src/caseWorkApp/hooks/useLastFocus.tsx
index 9b3ae96d..3fb92f8b 100644
--- a/materials_ui/src/caseWorkApp/hooks/useLastFocus.tsx
+++ b/materials_ui/src/caseWorkApp/hooks/useLastFocus.tsx
@@ -1,23 +1,18 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 export const useLastFocus = (defaultFocusId?: string) => {
   const lastFocusElementRef = useRef<Element>(document.activeElement);
   useEffect(() => {
     const lastFocusElement = lastFocusElementRef.current;
     return () => {
       //only add last focus if the active element is set back to body element
-      if (
-        document.activeElement &&
-        document.activeElement?.tagName !== "BODY"
-      ) {
+      if (document.activeElement && document.activeElement?.tagName !== 'BODY') {
         return;
       }
       if (lastFocusElement && document.contains(lastFocusElement))
         (lastFocusElement as HTMLElement).focus();
       else {
         if (defaultFocusId) {
-          const defaultElement = document.querySelector(
-            `${defaultFocusId}`
-          ) as HTMLElement;
+          const defaultElement = document.querySelector(`${defaultFocusId}`) as HTMLElement;
           if (defaultElement) defaultElement.focus();
         }
       }
diff --git a/materials_ui/src/caseWorkApp/hooks/useSwitchContentArea.ts b/materials_ui/src/caseWorkApp/hooks/useSwitchContentArea.ts
index ef97da69..52d8ffd8 100644
--- a/materials_ui/src/caseWorkApp/hooks/useSwitchContentArea.ts
+++ b/materials_ui/src/caseWorkApp/hooks/useSwitchContentArea.ts
@@ -9,7 +9,7 @@ export const useSwitchContentArea = () => {
     const contentAreas = [
       document.querySelector('#side-panel'),
       document.querySelector('#document-tabs'),
-      document.querySelector('#active-tab-panel')
+      document.querySelector('#active-tab-panel'),
     ];
 
     return contentAreas.filter((contentArea) => contentArea);
@@ -21,7 +21,7 @@ export const useSwitchContentArea = () => {
     e.preventDefault();
     const contentAreas = getContentAreas();
     const activeAreaIndex = contentAreas.findIndex(
-      (contentArea) => document.activeElement === contentArea
+      (contentArea) => document.activeElement === contentArea,
     );
 
     if (
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx
index e1f46f4f..db66a88f 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx
@@ -21,12 +21,8 @@ export const CloseTabUnsavedRedactionsModal = (p: {
             <p className="govuk-body">
               {`You have ${p.redactions?.length ?? 0} unsaved redaction ${isPlural ? 's' : ''}`}
             </p>
-            <p className="govuk-body">
-              Return to the document to save your redactions
-            </p>
-            <p className="govuk-body">
-              If you select Ignore your redactions will not be applied.
-            </p>
+            <p className="govuk-body">Return to the document to save your redactions</p>
+            <p className="govuk-body">If you select Ignore your redactions will not be applied.</p>
             <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
               <Button variant="primary" onClick={p.onReturnClick}>
                 Return to case file
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/Modal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/Modal.tsx
index d934f826..d6e5f56d 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/Modal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/Modal.tsx
@@ -6,11 +6,7 @@ export type ModalProps = {
   onEscPress: () => void;
 };
 
-export const Modal = ({
-  children,
-  onBackgroundClick,
-  onEscPress
-}: ModalProps) => {
+export const Modal = ({ children, onBackgroundClick, onEscPress }: ModalProps) => {
   const popupRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -41,7 +37,7 @@ export const Modal = ({
           zIndex: 999,
           display: 'flex',
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         }}
         onClick={onBackgroundClick}
       >
@@ -53,7 +49,7 @@ export const Modal = ({
             boxShadow: '0 0 5px 5px #0003',
             zIndex: 1000,
             filter: 'drop-shadow(0 1px 2.5px #000)',
-            overflow: 'hidden'
+            overflow: 'hidden',
           }}
           onClick={(e) => e.stopPropagation()}
         >
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx
index 7b11bf4d..603b31cf 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/ReviewAndRedactPage.tsx
@@ -5,7 +5,7 @@ import {
   Layout,
   LoadingSpinner,
   RenameDrawer,
-  TwoCol
+  TwoCol,
 } from '../../../components';
 import { useCaseInfoStore } from '../../../hooks';
 import { navigateToViewDocumentPageInNewTab } from '../../../hooks/ui/navigateToViewDocumentPageInNewTab';
@@ -15,17 +15,17 @@ import { TDocument } from '../../../materials_components/DocumentSelectAccordion
 import {
   clearOpenDocumentTabsFromLocalStorage,
   safeGetOpenDocumentTabsFromLocalStorage,
-  safeSetOpenDocumentTabsFromLocalStorage
+  safeSetOpenDocumentTabsFromLocalStorage,
 } from '../../../materials_components/DocumentSelectAccordion/utils/OpenDocumentTabsLocalStorageUtils';
 import {
   DocSearchContext,
-  DocumentTabPanel
+  DocumentTabPanel,
 } from '../../../materials_components/DocumentTabPanel/DocumentTabPanel';
 import { DocumentActionsDropdown } from '../../../materials_components/documenViewportArea/DocumentActionsDropdown';
 import { TRedaction } from '../../../materials_components/PdfRedactor/utils/coordUtils';
 import {
   isRedactionEnabledMode,
-  TMode
+  TMode,
 } from '../../../materials_components/PdfRedactor/utils/modeUtils';
 import { convertMatchesToSearchHighlights } from '../../../materials_components/PdfRedactor/utils/searchHighlightUtils';
 import { useTrigger } from '../../../materials_components/PdfRedactor/utils/useTriggger';
@@ -52,7 +52,7 @@ export const ReviewAndRedactPage = () => {
     docType: docTypeParam,
     materialId: materialIdParam,
     searchTerm: searchTermParam,
-    searchMatches: searchMatchesParam
+    searchMatches: searchMatchesParam,
   } = (locationState || {}) as {
     docType?: string;
     materialId?: string;
@@ -69,8 +69,9 @@ export const ReviewAndRedactPage = () => {
     (TDocument & { materialId?: number }) | null
   >(null);
 
-  const [redactionsIndexedOnParentId, setRedactionsIndexedOnParentId] =
-    useState<{ [k: string]: TRedaction[] }>({});
+  const [redactionsIndexedOnParentId, setRedactionsIndexedOnParentId] = useState<{
+    [k: string]: TRedaction[];
+  }>({});
 
   const [searchContextByParentId, setSearchContextByParentId] = useState<
     Record<string, DocSearchContext>
@@ -86,18 +87,13 @@ export const ReviewAndRedactPage = () => {
   const [activeParentId, setActiveParentId] = useState('');
   const [newVersionParentId, setNewVersionParentId] = useState('');
 
-  const [modeByParentId, setModeByParentId] = useState<Record<string, TMode>>(
-    {}
-  );
-  const [numOfPagesByParentId, setNumOfPagesByParentId] = useState<
-    Record<string, number>
-  >({});
+  const [modeByParentId, setModeByParentId] = useState<Record<string, TMode>>({});
+  const [numOfPagesByParentId, setNumOfPagesByParentId] = useState<Record<string, number>>({});
 
   const [searchModalOpen, setSearchModalOpen] = useState(false);
 
   const [unsavedModal, setUnsavedModal] = useState<UnsavedModal | null>(null);
-  const [pendingUnsavedAction, setPendingUnsavedAction] =
-    useState<PendingUnsavedAction>();
+  const [pendingUnsavedAction, setPendingUnsavedAction] = useState<PendingUnsavedAction>();
   const [documents, setDocuments] = useState<TDocument[] | null | undefined>();
   const documentsRef = useRef<TDocument[] | null | undefined>(undefined);
 
@@ -134,7 +130,7 @@ export const ReviewAndRedactPage = () => {
       safeSetOpenDocumentTabsFromLocalStorage({
         caseId,
         openParentIds: openParentIds,
-        activeParentId: activeParentId
+        activeParentId: activeParentId,
       });
     }
   }, [caseId, openParentIds, activeParentId]);
@@ -145,18 +141,14 @@ export const ReviewAndRedactPage = () => {
       setOpenParentIds((openParentIds) =>
         openParentIds.includes(`${materialIdParam}`)
           ? openParentIds
-          : [...openParentIds, `${materialIdParam}`]
+          : [...openParentIds, `${materialIdParam}`],
       );
 
       if (searchTermParam && searchMatchesParam) {
         const highlights = convertMatchesToSearchHighlights(searchMatchesParam);
         setSearchContextByParentId((prev) => ({
           ...prev,
-          [materialIdParam]: {
-            searchTerm: searchTermParam,
-            highlights,
-            focusedIndex: 0
-          }
+          [materialIdParam]: { searchTerm: searchTermParam, highlights, focusedIndex: 0 },
         }));
       }
 
@@ -185,17 +177,13 @@ export const ReviewAndRedactPage = () => {
     if (docTypeParam && documents && documents.length > 0) {
       const filteredDocs = documents.filter(
         (doc) =>
-          doc.cmsDocType.documentType === docTypeParam &&
-          !openParentIds.includes(doc.parentId)
+          doc.cmsDocType.documentType === docTypeParam && !openParentIds.includes(doc.parentId),
       );
 
       if (filteredDocs.length) {
         const newActiveParentId = filteredDocs[0]?.parentId;
         if (newActiveParentId) setActiveParentId(newActiveParentId);
-        setOpenParentIds((prev) => [
-          ...prev,
-          ...filteredDocs.map((doc) => doc.parentId)
-        ]);
+        setOpenParentIds((prev) => [...prev, ...filteredDocs.map((doc) => doc.parentId)]);
       }
     }
   }, [docTypeParam, documents]);
@@ -224,10 +212,7 @@ export const ReviewAndRedactPage = () => {
           mode={modeByParentId[doc.parentId] ?? 'disabled'}
           onModeChange={(newMode) => handleModeChange(doc.parentId, newMode)}
           onRedactionsChange={(redactions) => {
-            setRedactionsIndexedOnParentId((prev) => ({
-              ...prev,
-              [doc.parentId]: redactions
-            }));
+            setRedactionsIndexedOnParentId((prev) => ({ ...prev, [doc.parentId]: redactions }));
           }}
           onModification={(document) => {
             setNewVersionParentId(document.parentId);
@@ -235,20 +220,15 @@ export const ReviewAndRedactPage = () => {
           }}
           initRedactions={redactionsIndexedOnParentId[doc.parentId]}
           onNumOfPagesChange={(numOfPages) =>
-            setNumOfPagesByParentId((prev) => ({
-              ...prev,
-              [doc.parentId]: numOfPages
-            }))
+            setNumOfPagesByParentId((prev) => ({ ...prev, [doc.parentId]: numOfPages }))
           }
           searchContext={searchContextByParentId[doc.parentId]}
-          onFocusedSearchIndexChange={(index) =>
-            setFocusedSearchIndex(doc.parentId, index)
-          }
+          onFocusedSearchIndexChange={(index) => setFocusedSearchIndex(doc.parentId, index)}
           onBackToSearchResults={() => setSearchModalOpen(true)}
           checkInDocumentTriggerData={checkInDocumentTrigger.data}
         />
-      )
-    }
+      ),
+    },
   }));
 
   const performCloseTab = (documentId: string | undefined) => {
@@ -259,13 +239,12 @@ export const ReviewAndRedactPage = () => {
         caseId,
         urn,
         parentId: document.parentId,
-        childId: document.childId
+        childId: document.childId,
       });
     }
     if (documentId && documentId === activeParentId) {
       const index = openParentIds.indexOf(documentId);
-      const nextDocumentId =
-        openParentIds[index + 1] ?? openParentIds[index - 1] ?? '';
+      const nextDocumentId = openParentIds[index + 1] ?? openParentIds[index - 1] ?? '';
       setActiveParentId(nextDocumentId);
     }
     setOpenParentIds((prev) => prev.filter((id) => id !== documentId));
@@ -283,7 +262,7 @@ export const ReviewAndRedactPage = () => {
           caseId,
           urn,
           parentId: document.parentId,
-          childId: document.childId
+          childId: document.childId,
         });
       });
     }
@@ -295,9 +274,8 @@ export const ReviewAndRedactPage = () => {
     setNumOfPagesByParentId({});
 
     const sidebarFocusTarget =
-      document.querySelector<HTMLElement>(
-        '#side-panel .govuk-accordion__section-button'
-      ) ?? document.querySelector<HTMLElement>('#side-panel');
+      document.querySelector<HTMLElement>('#side-panel .govuk-accordion__section-button') ??
+      document.querySelector<HTMLElement>('#side-panel');
     sidebarFocusTarget?.focus();
   };
 
@@ -319,15 +297,8 @@ export const ReviewAndRedactPage = () => {
   };
 
   const requestActiveTabChange = (nextParentId: string) => {
-    if (
-      nextParentId !== activeParentId &&
-      hasUnsavedRedactions(activeParentId)
-    ) {
-      setPendingUnsavedAction({
-        kind: 'switchTab',
-        parentId: activeParentId,
-        nextParentId
-      });
+    if (nextParentId !== activeParentId && hasUnsavedRedactions(activeParentId)) {
+      setPendingUnsavedAction({ kind: 'switchTab', parentId: activeParentId, nextParentId });
       return;
     }
     setActiveParentId(nextParentId);
@@ -335,8 +306,7 @@ export const ReviewAndRedactPage = () => {
 
   const handleModeChange = (parentId: string, newMode: TMode) => {
     const isStoppingRedaction =
-      isRedactionEnabledMode(modeByParentId[parentId] ?? 'disabled') &&
-      newMode === 'disabled';
+      isRedactionEnabledMode(modeByParentId[parentId] ?? 'disabled') && newMode === 'disabled';
     if (isStoppingRedaction && hasUnsavedRedactions(parentId)) {
       setPendingUnsavedAction({ kind: 'stopRedacting', parentId });
       return;
@@ -356,10 +326,7 @@ export const ReviewAndRedactPage = () => {
         setActiveParentId(action.nextParentId);
         break;
       case 'stopRedacting':
-        setModeByParentId((prev) => ({
-          ...prev,
-          [action.parentId]: 'disabled'
-        }));
+        setModeByParentId((prev) => ({ ...prev, [action.parentId]: 'disabled' }));
         break;
     }
   };
@@ -372,19 +339,13 @@ export const ReviewAndRedactPage = () => {
     return () => trackMetric('TabViewTime', Date.now() - start);
   }, [activeTabId]);
 
-  const activeDocument = openDocuments.find(
-    (doc) => doc.parentId === activeTabId
-  );
+  const activeDocument = openDocuments.find((doc) => doc.parentId === activeTabId);
 
-  const openUnsavedRedactions: { [k: string]: TRedaction[] } =
-    Object.fromEntries(
-      openParentIds
-        .filter(hasUnsavedRedactions)
-        .map((parentId) => [
-          parentId,
-          redactionsIndexedOnParentId[parentId] ?? []
-        ])
-    );
+  const openUnsavedRedactions: { [k: string]: TRedaction[] } = Object.fromEntries(
+    openParentIds
+      .filter(hasUnsavedRedactions)
+      .map((parentId) => [parentId, redactionsIndexedOnParentId[parentId] ?? []]),
+  );
 
   useEffect(() => {
     if (showRedactionLogModal) {
@@ -399,7 +360,7 @@ export const ReviewAndRedactPage = () => {
       title="Review and Redact"
       shouldBlockNavigationCheck={(tab) => {
         const shouldBlock = Object.values(redactionsIndexedOnParentId).some(
-          (redacts) => redacts.length > 0
+          (redacts) => redacts.length > 0,
         );
         if (!shouldBlock) return false;
 
@@ -407,18 +368,13 @@ export const ReviewAndRedactPage = () => {
         return true;
       }}
     >
-      <LoadingSpinner
-        isLoading={documents === undefined}
-        textContent="Loading documents"
-      />
+      <LoadingSpinner isLoading={documents === undefined} textContent="Loading documents" />
       {documents === null && <div>Error...</div>}
       {unsavedModal && (
         <UnsavedRedactionsModal
           documents={documents ?? []}
           redactionsIndexedOnDocumentId={
-            unsavedModal.kind === 'closeAll'
-              ? openUnsavedRedactions
-              : redactionsIndexedOnParentId
+            unsavedModal.kind === 'closeAll' ? openUnsavedRedactions : redactionsIndexedOnParentId
           }
           onReturnClick={() => setUnsavedModal(null)}
           onIgnoreClick={() => {
@@ -434,9 +390,7 @@ export const ReviewAndRedactPage = () => {
       )}
       {pendingUnsavedAction && (
         <CloseTabUnsavedRedactionsModal
-          redactions={
-            redactionsIndexedOnParentId[pendingUnsavedAction.parentId]
-          }
+          redactions={redactionsIndexedOnParentId[pendingUnsavedAction.parentId]}
           onReturnClick={() => setPendingUnsavedAction(undefined)}
           onIgnoreClick={proceedWithPendingAction}
         />
@@ -505,20 +459,12 @@ export const ReviewAndRedactPage = () => {
               documentActions={
                 <DocumentActionsDropdown
                   mode={modeByParentId[activeTabId] ?? 'disabled'}
-                  onModeChange={(newMode) =>
-                    handleModeChange(activeTabId, newMode)
-                  }
+                  onModeChange={(newMode) => handleModeChange(activeTabId, newMode)}
                   onRedactionLogClick={() => setShowRedactionLogModal(true)}
                   onViewInNewWindowClick={() => {
                     if (!urn || !caseId) return;
-                    trackAction('OpenedInNewWindow', {
-                      materialId: activeTabId
-                    });
-                    navigateToViewDocumentPageInNewTab({
-                      urn,
-                      caseId,
-                      materialId: activeTabId
-                    });
+                    trackAction('OpenedInNewWindow', { materialId: activeTabId });
+                    navigateToViewDocumentPageInNewTab({ urn, caseId, materialId: activeTabId });
                   }}
                   numOfDocumentPages={numOfPagesByParentId[activeTabId] ?? 0}
                 />
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
index 2a2f56d3..8f13158d 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
@@ -17,18 +17,15 @@ export const UnsavedRedactionsModal = ({
   documents,
   onReturnClick,
   onIgnoreClick,
-  onDocumentClick
+  onDocumentClick,
 }: UnsavedRedactionsModalProps) => {
-  const documentIdsWithRedactions = Object.keys(
-    redactionsIndexedOnDocumentId
-  ).filter(
+  const documentIdsWithRedactions = Object.keys(redactionsIndexedOnDocumentId).filter(
     (docId) =>
-      redactionsIndexedOnDocumentId[docId] &&
-      redactionsIndexedOnDocumentId[docId].length > 0
+      redactionsIndexedOnDocumentId[docId] && redactionsIndexedOnDocumentId[docId].length > 0,
   );
 
   const documentsWithRedactions = documents.filter((doc) =>
-    documentIdsWithRedactions.includes(doc.parentId)
+    documentIdsWithRedactions.includes(doc.parentId),
   );
 
   const isPluralDocuments = documentsWithRedactions.length !== 1;
@@ -41,9 +38,7 @@ export const UnsavedRedactionsModal = ({
         contentHeading={`You have ${documentsWithRedactions.length} document${isPluralDocuments ? 's' : ''} with unsaved redactions `}
         contentBody={
           <>
-            <div
-              style={{ display: 'flex', gap: '4px', flexDirection: 'column' }}
-            >
+            <div style={{ display: 'flex', gap: '4px', flexDirection: 'column' }}>
               {documentsWithRedactions.map((doc) => (
                 <a
                   className="govuk-link"
@@ -55,9 +50,7 @@ export const UnsavedRedactionsModal = ({
               ))}
             </div>
             <br />
-            <div>
-              Return to the case to save your redactions in these documents
-            </div>
+            <div>Return to the case to save your redactions in these documents</div>
             <div>If you select Ignore your redactions will not be applied.</div>
             <br />
             <div style={{ display: 'flex', gap: '16px' }}>
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/index.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/index.tsx
index 4f4bb39e..62894870 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/index.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/index.tsx
@@ -1,3 +1,3 @@
-export { ReviewAndRedactPage } from './ReviewAndRedactPage';
 export { Modal } from './Modal';
+export { ReviewAndRedactPage } from './ReviewAndRedactPage';
 export { UnsavedRedactionsModal } from './UnsavedRedactionsModal';
diff --git a/materials_ui/src/caseWorkApp/types/redaction.ts b/materials_ui/src/caseWorkApp/types/redaction.ts
index 73ea2a28..410ddd99 100644
--- a/materials_ui/src/caseWorkApp/types/redaction.ts
+++ b/materials_ui/src/caseWorkApp/types/redaction.ts
@@ -3,19 +3,9 @@ type TChildren = [{ id: string; name: string }];
 export type TLookupsResponse = {
   areas: { id: string; name: string; children: TChildren }[];
   divisions: { id: string; name: string; children: TChildren }[];
-  documentTypes: {
-    id: string;
-    cmsDocTypeId: string;
-    name: string;
-    children: TChildren;
-  }[];
+  documentTypes: { id: string; cmsDocTypeId: string; name: string; children: TChildren }[];
   investigatingAgencies: { id: string; name: string; children: TChildren }[];
-  missedRedactions: {
-    isDeletedPage: boolean;
-    id: string;
-    name: string;
-    children: TChildren;
-  }[];
+  missedRedactions: { isDeletedPage: boolean; id: string; name: string; children: TChildren }[];
   ouCodeMapping: {
     ouCode: string;
     areaCode: string;
diff --git a/materials_ui/src/caseWorkApp/types/redactionLog.ts b/materials_ui/src/caseWorkApp/types/redactionLog.ts
index c695c48c..c8d895bb 100644
--- a/materials_ui/src/caseWorkApp/types/redactionLog.ts
+++ b/materials_ui/src/caseWorkApp/types/redactionLog.ts
@@ -1,9 +1,4 @@
-export type Unit = {
-  id: string;
-  type: string;
-  areaDivisionName: string;
-  name: string;
-};
+export type Unit = { id: string; type: string; areaDivisionName: string; name: string };
 
 export type InvestigatingAgency = { id: string; name: string };
 
diff --git a/materials_ui/src/components/Accordion/Accordion.scss b/materials_ui/src/components/Accordion/Accordion.scss
index d33b2e67..4995749a 100644
--- a/materials_ui/src/components/Accordion/Accordion.scss
+++ b/materials_ui/src/components/Accordion/Accordion.scss
@@ -4,8 +4,8 @@
     margin-bottom: 0 !important;
   }
 
-    .govuk-accordion__section-button {
-      border-top: 0;
-      border-bottom: 0;
-    }
-}
\ No newline at end of file
+  .govuk-accordion__section-button {
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
diff --git a/materials_ui/src/components/Accordion/Accordion.tsx b/materials_ui/src/components/Accordion/Accordion.tsx
index cc0d9784..2d701c4b 100644
--- a/materials_ui/src/components/Accordion/Accordion.tsx
+++ b/materials_ui/src/components/Accordion/Accordion.tsx
@@ -7,16 +7,9 @@ type AccordionItemProps = {
   index: number;
 };
 
-type AccordionProps = {
-  items: Omit<AccordionItemProps, 'index'>[];
-  plain?: boolean;
-};
+type AccordionProps = { items: Omit<AccordionItemProps, 'index'>[]; plain?: boolean };
 
-export const AccordionItem = ({
-  title,
-  content,
-  index
-}: AccordionItemProps) => {
+export const AccordionItem = ({ title, content, index }: AccordionItemProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const itemId = index + 1;
   const titleTxt = isExpanded ? title.expanded : title.collapsed;
@@ -39,9 +32,7 @@ export const AccordionItem = ({
                   <span
                     className={`govuk-accordion-nav__chevron${!isExpanded ? ' govuk-accordion-nav__chevron--down' : ''}`}
                   ></span>
-                  <span className="govuk-accordion__section-toggle-text">
-                    {titleTxt}
-                  </span>
+                  <span className="govuk-accordion__section-toggle-text">{titleTxt}</span>
                 </span>
               </span>
             </button>
@@ -62,12 +53,7 @@ export const Accordion = ({ items = [], plain = false }: AccordionProps) => {
       data-testid="accordion"
     >
       {items.map((item, index) => (
-        <AccordionItem
-          title={item.title}
-          content={item.content}
-          index={index}
-          key={index}
-        />
+        <AccordionItem title={item.title} content={item.content} index={index} key={index} />
       ))}
     </div>
   );
diff --git a/materials_ui/src/components/Banner/Banner.scss b/materials_ui/src/components/Banner/Banner.scss
index fe02bc0d..a46d8f9d 100644
--- a/materials_ui/src/components/Banner/Banner.scss
+++ b/materials_ui/src/components/Banner/Banner.scss
@@ -12,4 +12,4 @@
       max-width: 66.666%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/materials_ui/src/components/Banner/Banner.tsx b/materials_ui/src/components/Banner/Banner.tsx
index 24eb52c4..fcbad05d 100644
--- a/materials_ui/src/components/Banner/Banner.tsx
+++ b/materials_ui/src/components/Banner/Banner.tsx
@@ -4,11 +4,7 @@ import './Banner.scss';
 
 type Props = BannerType;
 
-export const Banner = ({
-  type = 'success',
-  header,
-  content
-}: PropsWithChildren<Props>) => {
+export const Banner = ({ type = 'success', header, content }: PropsWithChildren<Props>) => {
   const bannerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -49,10 +45,7 @@ export const Banner = ({
       tabIndex={-1}
     >
       <div className="govuk-notification-banner__header">
-        <h2
-          className="govuk-notification-banner__title"
-          id="govuk-notification-banner-title"
-        >
+        <h2 className="govuk-notification-banner__title" id="govuk-notification-banner-title">
           {getBannerTitle()}
         </h2>
       </div>
diff --git a/materials_ui/src/components/Button/AutoReclassifyButton.tsx b/materials_ui/src/components/Button/AutoReclassifyButton.tsx
index b01ef3a7..4f44c3ab 100644
--- a/materials_ui/src/components/Button/AutoReclassifyButton.tsx
+++ b/materials_ui/src/components/Button/AutoReclassifyButton.tsx
@@ -7,9 +7,7 @@ import { trackAction } from '../../telemetry/appInsights';
 export const AutoReclassifyButton = () => {
   const [errorCount, setErrorCount] = useState(0);
   const { resetBanner, setBanner } = useBanner();
-  const { mutate: refreshMaterials } = useCaseMaterials({
-    dataType: 'materials'
-  });
+  const { mutate: refreshMaterials } = useCaseMaterials({ dataType: 'materials' });
   const { setTags } = useMaterialTags();
 
   const { mutate: submitAutoReclassifyRequest } = useAutoReclassify({
@@ -20,7 +18,7 @@ export const AutoReclassifyButton = () => {
         setBanner({
           type: 'important',
           header: 'Important',
-          content: 'No materials were identified for reclassification.'
+          content: 'No materials were identified for reclassification.',
         });
       }
 
@@ -29,15 +27,14 @@ export const AutoReclassifyButton = () => {
           setBanner({
             type: 'error',
             header: 'An error occurred',
-            content:
-              'There was a problem reclassifying materials. Please try again.'
+            content: 'There was a problem reclassifying materials. Please try again.',
           });
         } else {
           setBanner({
             type: 'error',
             header: 'An error occurred',
             content:
-              'Materials cannot be reclassified automatically. You can still reclassify materials manually.'
+              'Materials cannot be reclassified automatically. You can still reclassify materials manually.',
           });
         }
       }
@@ -51,19 +48,19 @@ export const AutoReclassifyButton = () => {
       setTags(
         data?.reclassifiedMaterials?.map((material) => ({
           materialId: material?.materialId,
-          tagName: 'Reclassified'
-        }))
+          tagName: 'Reclassified',
+        })),
       );
 
       setErrorCount(0);
       setBanner({
         type: 'success',
         header: 'Reclassification successful',
-        content: `${totalMaterialsProcessed} Unused Material${totalMaterialsProcessed === 1 ? '' : 's'} reclassified successfully.`
+        content: `${totalMaterialsProcessed} Unused Material${totalMaterialsProcessed === 1 ? '' : 's'} reclassified successfully.`,
       });
 
       await refreshMaterials();
-    }
+    },
   });
 
   const handleClick = async () => {
diff --git a/materials_ui/src/components/ButtonMenu/ButtonMenu.tsx b/materials_ui/src/components/ButtonMenu/ButtonMenu.tsx
index 49e5a865..91084090 100644
--- a/materials_ui/src/components/ButtonMenu/ButtonMenu.tsx
+++ b/materials_ui/src/components/ButtonMenu/ButtonMenu.tsx
@@ -1,29 +1,18 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import './_button-menu.scss';
 
-type MenuItem = {
-  label: string;
-  onClick: () => void;
-  className?: string;
-  hide?: boolean;
-};
+type MenuItem = { label: string; onClick: () => void; className?: string; hide?: boolean };
 
 type Props = { menuTitle: string; menuItems: MenuItem[]; isDisabled?: boolean };
 
-export function ButtonMenuComponent({
-  menuTitle,
-  menuItems,
-  isDisabled = false
-}: Props) {
+export function ButtonMenuComponent({ menuTitle, menuItems, isDisabled = false }: Props) {
   const [openMenu, setOpenMenu] = useState(false);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const itemsRef = useRef<(HTMLButtonElement | null)[]>([]);
 
   // Focus helper
   const focusItem = (index: number) => {
-    const visibleItems = itemsRef.current.filter(
-      Boolean
-    ) as HTMLButtonElement[];
+    const visibleItems = itemsRef.current.filter(Boolean) as HTMLButtonElement[];
     if (!visibleItems.length) return;
 
     if (index >= visibleItems.length) index = 0;
@@ -33,12 +22,10 @@ export function ButtonMenuComponent({
 
   const currentFocusIndex = () => {
     const visibleItems = itemsRef.current.filter(
-      (item): item is HTMLButtonElement => item !== null
+      (item): item is HTMLButtonElement => item !== null,
     );
     const active = document.activeElement;
-    return active instanceof HTMLButtonElement
-      ? visibleItems.indexOf(active)
-      : -1;
+    return active instanceof HTMLButtonElement ? visibleItems.indexOf(active) : -1;
   };
 
   const closeMenu = (moveFocus = true) => {
@@ -60,9 +47,7 @@ export function ButtonMenuComponent({
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     const { key } = event;
     const isToggle = event.target === buttonRef.current;
-    const isMenuItem = itemsRef.current
-      .filter(Boolean)
-      .includes(event.target as HTMLButtonElement);
+    const isMenuItem = itemsRef.current.filter(Boolean).includes(event.target as HTMLButtonElement);
 
     if (isToggle) {
       if (isDisabled) return;
@@ -122,10 +107,7 @@ export function ButtonMenuComponent({
   return (
     <div
       className={`moj-button-menu ${isDisabled ? 'disabled' : ''}`}
-      style={{
-        opacity: isDisabled ? 0.5 : 1,
-        pointerEvents: isDisabled ? 'none' : 'auto'
-      }}
+      style={{ opacity: isDisabled ? 0.5 : 1, pointerEvents: isDisabled ? 'none' : 'auto' }}
       onKeyDown={handleKeyDown}
     >
       <button
@@ -144,10 +126,7 @@ export function ButtonMenuComponent({
             height="5"
             viewBox="0 0 11 5"
             xmlns="http://www.w3.org/2000/svg"
-            style={{
-              marginLeft: '8px',
-              transform: openMenu ? 'rotate(0deg)' : 'rotate(180deg)'
-            }}
+            style={{ marginLeft: '8px', transform: openMenu ? 'rotate(0deg)' : 'rotate(180deg)' }}
           >
             <path d="M5.5 0L11 5L0 5L5.5 0Z" fill="currentColor" />
           </svg>
@@ -177,7 +156,7 @@ export function ButtonMenuComponent({
                   {item.label}
                 </button>
               </li>
-            )
+            ),
           )}
         </ul>
       )}
diff --git a/materials_ui/src/components/CaseInfo/CaseInfo.tsx b/materials_ui/src/components/CaseInfo/CaseInfo.tsx
index 1578360b..98b5906b 100644
--- a/materials_ui/src/components/CaseInfo/CaseInfo.tsx
+++ b/materials_ui/src/components/CaseInfo/CaseInfo.tsx
@@ -17,9 +17,7 @@ export const CaseInfo = ({ caseInfo }: Props) => {
     return null;
   }
 
-  const handleCaseDefendantsLinkClick = (
-    event: MouseEvent<HTMLAnchorElement>
-  ) => {
+  const handleCaseDefendantsLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
 
     navigate(getRoute('REVIEW_REDACT'), { state: { docType: 'DAC' } });
@@ -30,9 +28,7 @@ export const CaseInfo = ({ caseInfo }: Props) => {
     ? `, ${caseInfo?.leadDefendantFirstNames}`
     : '';
   const plusNumber =
-    caseInfo?.numberOfDefendants > 1
-      ? ` +${caseInfo?.numberOfDefendants - 1}`
-      : '';
+    caseInfo?.numberOfDefendants > 1 ? ` +${caseInfo?.numberOfDefendants - 1}` : '';
 
   const caseInfoName = `${surname}${firstNames}${plusNumber}`;
 
@@ -49,9 +45,7 @@ export const CaseInfo = ({ caseInfo }: Props) => {
           <div className="govuk-grid-row">
             <div className="caseInfo__container govuk-grid-column-full">
               <div className="caseInfo__info">
-                <h2 className="govuk-heading-m case-info-name">
-                  {caseInfoName}
-                </h2>
+                <h2 className="govuk-heading-m case-info-name">{caseInfoName}</h2>
                 <p className="govuk-body caseInfo__urn">{caseInfo?.urn}</p>
                 {caseInfo.numberOfDefendants > 0 && (
                   <p style={{ marginTop: 0 }}>
diff --git a/materials_ui/src/components/Checkbox/Checkbox.tsx b/materials_ui/src/components/Checkbox/Checkbox.tsx
index c7fa330e..0dfa8407 100644
--- a/materials_ui/src/components/Checkbox/Checkbox.tsx
+++ b/materials_ui/src/components/Checkbox/Checkbox.tsx
@@ -17,7 +17,7 @@ export default function Checkbox({
   ariaLabel,
   labelVisuallyHidden,
   onChange,
-  value
+  value,
 }: Props) {
   return (
     <div
@@ -38,11 +38,7 @@ export default function Checkbox({
           value={value}
         />
         <label className="govuk-label govuk-checkboxes__label" htmlFor={id}>
-          {labelVisuallyHidden ? (
-            <span className="govuk-visually-hidden">{label}</span>
-          ) : (
-            label
-          )}
+          {labelVisuallyHidden ? <span className="govuk-visually-hidden">{label}</span> : label}
         </label>
       </div>
     </div>
diff --git a/materials_ui/src/components/DateField/DateField.tsx b/materials_ui/src/components/DateField/DateField.tsx
index 6616e6c2..87139192 100644
--- a/materials_ui/src/components/DateField/DateField.tsx
+++ b/materials_ui/src/components/DateField/DateField.tsx
@@ -1,11 +1,5 @@
 import dayjs from 'dayjs';
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 type Props = {
   id: string;
@@ -20,15 +14,9 @@ export const DateField = forwardRef<HTMLInputElement, Props>(
   ({ error, id, hint, label, onChange, value }, ref) => {
     const initialDate = value && dayjs(value).isValid() ? dayjs(value) : null;
 
-    const [day, setDay] = useState<string>(
-      initialDate ? String(initialDate.date()) : ''
-    );
-    const [month, setMonth] = useState<string>(
-      initialDate ? String(initialDate.month() + 1) : ''
-    );
-    const [year, setYear] = useState<string>(
-      initialDate ? String(initialDate.year()) : ''
-    );
+    const [day, setDay] = useState<string>(initialDate ? String(initialDate.date()) : '');
+    const [month, setMonth] = useState<string>(initialDate ? String(initialDate.month() + 1) : '');
+    const [year, setYear] = useState<string>(initialDate ? String(initialDate.year()) : '');
 
     // Internal refs
     const dayRef = useRef<HTMLInputElement>(null);
@@ -48,14 +36,8 @@ export const DateField = forwardRef<HTMLInputElement, Props>(
     }, [day, month, year, onChange]);
 
     return (
-      <div
-        className={`govuk-form-group ${error ? 'govuk-form-group--error' : ''}`}
-      >
-        <fieldset
-          className="govuk-fieldset"
-          role="group"
-          aria-describedby={`${id}-hint`}
-        >
+      <div className={`govuk-form-group ${error ? 'govuk-form-group--error' : ''}`}>
+        <fieldset className="govuk-fieldset" role="group" aria-describedby={`${id}-hint`}>
           <legend
             className="govuk-fieldset__legend govuk-fieldset__legend--l"
             style={{ fontSize: 19 }}
@@ -78,10 +60,7 @@ export const DateField = forwardRef<HTMLInputElement, Props>(
           <div className="govuk-date-input" id={id}>
             <div className="govuk-date-input__item">
               <div className="govuk-form-group">
-                <label
-                  className="govuk-label govuk-date-input__label"
-                  htmlFor={`${id}-day`}
-                >
+                <label className="govuk-label govuk-date-input__label" htmlFor={`${id}-day`}>
                   Day
                 </label>
                 <input
@@ -98,10 +77,7 @@ export const DateField = forwardRef<HTMLInputElement, Props>(
             </div>
             <div className="govuk-date-input__item">
               <div className="govuk-form-group">
-                <label
-                  className="govuk-label govuk-date-input__label"
-                  htmlFor={`${id}-month`}
-                >
+                <label className="govuk-label govuk-date-input__label" htmlFor={`${id}-month`}>
                   Month
                 </label>
                 <input
@@ -118,10 +94,7 @@ export const DateField = forwardRef<HTMLInputElement, Props>(
             </div>
             <div className="govuk-date-input__item">
               <div className="govuk-form-group">
-                <label
-                  className="govuk-label govuk-date-input__label"
-                  htmlFor={`${id}-year`}
-                >
+                <label className="govuk-label govuk-date-input__label" htmlFor={`${id}-year`}>
                   Year
                 </label>
                 <input
@@ -140,5 +113,5 @@ export const DateField = forwardRef<HTMLInputElement, Props>(
         </fieldset>
       </div>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/components/DefinitionList/DefinitionList.tsx b/materials_ui/src/components/DefinitionList/DefinitionList.tsx
index 5391d456..05ac15ee 100644
--- a/materials_ui/src/components/DefinitionList/DefinitionList.tsx
+++ b/materials_ui/src/components/DefinitionList/DefinitionList.tsx
@@ -8,9 +8,7 @@ export const DefinitionList = ({ items, fixedWidth }: Props) => {
   if (!items.length) return null;
 
   return (
-    <dl
-      className={`definition-list ${fixedWidth ? 'definition-list--fixed-width' : ''}`}
-    >
+    <dl className={`definition-list ${fixedWidth ? 'definition-list--fixed-width' : ''}`}>
       {items.map((item, index) => (
         <div key={index} className="definition-list__row">
           <dt className="definition-list__title">{item.title}</dt>
diff --git a/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx b/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx
index 8b28341b..939cf5ff 100644
--- a/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx
+++ b/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx
@@ -7,18 +7,10 @@ import {
   useDocumentSearchResults,
   useFilters,
   usePager,
-  useSearchTracker
+  useSearchTracker,
 } from '../../hooks';
 
-import {
-  Banner,
-  LoadingSpinner,
-  Modal,
-  Pagination,
-  SearchInput,
-  SectionBreak,
-  TwoCol
-} from '..';
+import { Banner, LoadingSpinner, Modal, Pagination, SearchInput, SectionBreak, TwoCol } from '..';
 
 import { categoriseDocument } from '../../materials_components/DocumentSelectAccordion/utils/categoriseDocument';
 import { SearchTermResultType } from '../../schemas/documents';
@@ -29,36 +21,21 @@ import { DocumentKeywordSearchFilters } from '../Filters/DocumentKeywordSearchFi
 import { DEFAULT_RESULTS_PER_PAGE } from '../../constants/query';
 import './DocumentKeywordSearch.scss';
 
-type DocumentKeywordSearchProps = {
-  modalOpen: boolean;
-  setModalOpen: (open: boolean) => void;
-};
+type DocumentKeywordSearchProps = { modalOpen: boolean; setModalOpen: (open: boolean) => void };
 
-export const DocumentKeywordSearch = ({
-  modalOpen,
-  setModalOpen
-}: DocumentKeywordSearchProps) => {
+export const DocumentKeywordSearch = ({ modalOpen, setModalOpen }: DocumentKeywordSearchProps) => {
   const { getRoute } = useAppRoute();
   const [searchTerm, setSearchTerm] = useState<string | null>(null);
-  const [expandedDocuments, setExpandedDocuments] = useState<
-    Record<string, boolean>
-  >({});
+  const [expandedDocuments, setExpandedDocuments] = useState<Record<string, boolean>>({});
   const [selectedSort, setSelectedSort] = useState('date');
 
-  const { isComplete: trackerComplete, failedToConvert } =
-    useSearchTracker(searchTerm);
+  const { isComplete: trackerComplete, failedToConvert } = useSearchTracker(searchTerm);
 
-  const { searchResults, loading } = useDocumentSearch(
-    searchTerm,
-    trackerComplete
-  );
+  const { searchResults, loading } = useDocumentSearch(searchTerm, trackerComplete);
 
   const { documents } = useDocuments();
 
-  const combinedSearchResults = useDocumentSearchResults(
-    documents ?? [],
-    searchResults ?? []
-  );
+  const combinedSearchResults = useDocumentSearchResults(documents ?? [], searchResults ?? []);
 
   const { filters, resetFilters } = useFilters('documents');
 
@@ -84,14 +61,11 @@ export const DocumentKeywordSearch = ({
 
     const newStatus = selectedStatus.includes('New');
 
-    const sortColumn =
-      selectedSort === 'date'
-        ? 'cmsFileCreatedDate'
-        : 'resultsPerDocumentCount';
+    const sortColumn = selectedSort === 'date' ? 'cmsFileCreatedDate' : 'resultsPerDocumentCount';
 
     const sortFn = defaultSortFn<SearchTermResultType>({
       column: sortColumn,
-      direction: 'descending'
+      direction: 'descending',
     });
 
     return combinedSearchResults
@@ -107,31 +81,19 @@ export const DocumentKeywordSearch = ({
           (category !== null && selectedCategories.includes(category))
         );
       })
-      .map((item) => ({
-        ...item,
-        [sortColumn]: String(item[sortColumn] ?? '')
-      }))
+      .map((item) => ({ ...item, [sortColumn]: String(item[sortColumn] ?? '') }))
       .sort(sortFn);
-  }, [
-    combinedSearchResults,
-    filters?.filters?.category,
-    filters?.filters?.status,
-    selectedSort
-  ]);
+  }, [combinedSearchResults, filters?.filters?.category, filters?.filters?.status, selectedSort]);
 
   const highlightExactMatches = (
     text: string,
-    words: { boundingBox: number[] | null; text: string; matchType: string[] }[]
+    words: { boundingBox: number[] | null; text: string; matchType: string[] }[],
   ) => {
-    const exactWords = words
-      .filter((w) => w.matchType.includes('Exact'))
-      .map((w) => w.text);
+    const exactWords = words.filter((w) => w.matchType.includes('Exact')).map((w) => w.text);
 
     if (!text || exactWords.length === 0) return text;
 
-    const escaped = exactWords.map((w) =>
-      w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    );
+    const escaped = exactWords.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
 
     const regex = new RegExp(`(${escaped.join('|')})`, 'gi');
 
@@ -142,23 +104,16 @@ export const DocumentKeywordSearch = ({
         <strong key={i}>{part}</strong>
       ) : (
         <span key={i}>{part}</span>
-      )
+      ),
     );
   };
 
-  const {
-    currentPage,
-    totalPages,
-    startIndex,
-    endIndex,
-    setNextPage,
-    setPage,
-    setPreviousPage
-  } = usePager({
-    totalItems: filteredResults ? filteredResults.length : 0,
-    initialPageSize: DEFAULT_RESULTS_PER_PAGE,
-    initialPage: 0
-  });
+  const { currentPage, totalPages, startIndex, endIndex, setNextPage, setPage, setPreviousPage } =
+    usePager({
+      totalItems: filteredResults ? filteredResults.length : 0,
+      initialPageSize: DEFAULT_RESULTS_PER_PAGE,
+      initialPage: 0,
+    });
 
   return (
     <div style={{ marginBottom: '20px' }}>
@@ -171,16 +126,11 @@ export const DocumentKeywordSearch = ({
       />
 
       <Modal open={modalOpen} onClose={handleModalClose}>
-        <LoadingSpinner
-          isLoading={!trackerComplete}
-          textContent="Loading search results"
-        />
+        <LoadingSpinner isLoading={!trackerComplete} textContent="Loading search results" />
         {trackerComplete && (
           <TwoCol
             sidebar={
-              <DocumentKeywordSearchFilters
-                onSearchSubmit={(term) => setSearchTerm(term)}
-              />
+              <DocumentKeywordSearchFilters onSearchSubmit={(term) => setSearchTerm(term)} />
             }
           >
             {loading && <p>Searching…</p>}
@@ -193,16 +143,12 @@ export const DocumentKeywordSearch = ({
                     <strong>{documents?.length}</strong> documents in this case
                   </p>
                   <p className="govuk-body">
-                    Search may not have found all instances of "{searchTerm}" in
-                    this case
+                    Search may not have found all instances of "{searchTerm}" in this case
                   </p>
                 </div>
 
                 <div className="govuk-form-group">
-                  <label
-                    className="govuk-label govuk-visually-hidden"
-                    htmlFor="sort"
-                  >
+                  <label className="govuk-label govuk-visually-hidden" htmlFor="sort">
                     Sort by
                   </label>
                   <select
@@ -215,9 +161,7 @@ export const DocumentKeywordSearch = ({
                     <option value="date" defaultValue="date">
                       Date added
                     </option>
-                    <option value="resultsPerDocument">
-                      Results per document
-                    </option>
+                    <option value="resultsPerDocument">Results per document</option>
                   </select>
                 </div>
               </div>
@@ -228,10 +172,7 @@ export const DocumentKeywordSearch = ({
                 type="important"
                 header="Technical problems stopped us from searching these documents:"
                 content={failedToConvert.map((doc: SearchTermResultType) => (
-                  <p
-                    key={doc.parentId}
-                    style={{ fontStyle: 'italic', color: '#505a5f' }}
-                  >
+                  <p key={doc.parentId} style={{ fontStyle: 'italic', color: '#505a5f' }}>
                     {doc.presentationTitle}
                   </p>
                 ))}
@@ -244,22 +185,15 @@ export const DocumentKeywordSearch = ({
                 const isExpanded = expandedDocuments[doc.parentId] ?? false;
                 const first = doc.matches[0];
                 const firstLineMatchCount =
-                  first?.words.filter((word) =>
-                    word.matchType?.includes('Exact')
-                  ).length ?? 0;
-                const remainingCount =
-                  (doc.resultsPerDocumentCount ?? 0) - firstLineMatchCount;
+                  first?.words.filter((word) => word.matchType?.includes('Exact')).length ?? 0;
+                const remainingCount = (doc.resultsPerDocumentCount ?? 0) - firstLineMatchCount;
 
                 return (
                   <div key={doc.parentId} style={{ marginBottom: 20 }}>
                     <h2 className="govuk-heading-m govuk-!-margin-bottom-1">
                       <Link
                         to={getRoute('REVIEW_REDACT')}
-                        state={{
-                          materialId: doc.parentId,
-                          searchTerm,
-                          searchMatches: doc.matches
-                        }}
+                        state={{ materialId: doc.parentId, searchTerm, searchMatches: doc.matches }}
                         onClick={handleModalClose}
                       >
                         {doc.documentTitle}
@@ -270,24 +204,17 @@ export const DocumentKeywordSearch = ({
                       Uploaded: {formatDateLong(doc.cmsFileCreatedDate)}
                     </p>
                     {doc.cmsDocType.documentType && (
-                      <p className="govuk-body-s">
-                        Type: {doc.cmsDocType.documentType}
-                      </p>
+                      <p className="govuk-body-s">Type: {doc.cmsDocType.documentType}</p>
                     )}
 
                     <div className="govuk-inset-text">
-                      <p>
-                        {first &&
-                          highlightExactMatches(first.text, first.words)}
-                      </p>
+                      <p>{first && highlightExactMatches(first.text, first.words)}</p>
 
                       {isExpanded && remainingCount > 0 && (
                         <>
                           {doc.matches.slice(1).map((match, index) => (
                             <div key={index} style={{ marginTop: '1rem' }}>
-                              <p>
-                                {highlightExactMatches(match.text, match.words)}
-                              </p>
+                              <p>{highlightExactMatches(match.text, match.words)}</p>
                             </div>
                           ))}
                         </>
@@ -299,13 +226,11 @@ export const DocumentKeywordSearch = ({
                             cursor: 'pointer',
                             textDecoration: 'underline',
                             display: 'inline-block',
-                            marginTop: 8
+                            marginTop: 8,
                           }}
                           onClick={() => toggleDocumentExpand(doc.parentId)}
                         >
-                          {isExpanded
-                            ? 'Hide additional results'
-                            : `View ${remainingCount} more`}
+                          {isExpanded ? 'Hide additional results' : `View ${remainingCount} more`}
                         </span>
                       )}
                     </div>
diff --git a/materials_ui/src/components/DocumentPreview/DocumentActions.tsx b/materials_ui/src/components/DocumentPreview/DocumentActions.tsx
index 99c2de4d..786fbf20 100644
--- a/materials_ui/src/components/DocumentPreview/DocumentActions.tsx
+++ b/materials_ui/src/components/DocumentPreview/DocumentActions.tsx
@@ -1,10 +1,6 @@
 type Props = { label: string; isOpen: boolean; onDocumentOpen: () => void };
 
-export default function DocumentActions({
-  label,
-  isOpen = false,
-  onDocumentOpen
-}: Props) {
+export default function DocumentActions({ label, isOpen = false, onDocumentOpen }: Props) {
   return (
     <a
       href="#"
@@ -18,7 +14,7 @@ export default function DocumentActions({
         marginBottom: '0px',
         display: 'inline-flex',
         alignItems: 'center',
-        justifyContent: 'flex-end'
+        justifyContent: 'flex-end',
       }}
       data-testid="buttonActions"
     >
diff --git a/materials_ui/src/components/DocumentPreview/DocumentPreview.tsx b/materials_ui/src/components/DocumentPreview/DocumentPreview.tsx
index 3c4cf482..b35c80d9 100644
--- a/materials_ui/src/components/DocumentPreview/DocumentPreview.tsx
+++ b/materials_ui/src/components/DocumentPreview/DocumentPreview.tsx
@@ -11,7 +11,7 @@ export default function DocumentPreview({ row }: Props) {
   const {
     data: caseDocumentData,
     loading: caseDocumentLoading,
-    error: caseDocumentError
+    error: caseDocumentError,
   } = useDocumentPreview({ materialId: row.materialId });
 
   const errorTitle = caseDocumentError?.toString().includes('403')
@@ -38,10 +38,7 @@ export default function DocumentPreview({ row }: Props) {
 
   return (
     <>
-      <LoadingSpinner
-        isLoading={caseDocumentLoading}
-        textContent="Loading preview..."
-      />
+      <LoadingSpinner isLoading={caseDocumentLoading} textContent="Loading preview..." />
       {content}
     </>
   );
diff --git a/materials_ui/src/components/Drawer/Drawer.tsx b/materials_ui/src/components/Drawer/Drawer.tsx
index ae896fbb..fcaae86c 100644
--- a/materials_ui/src/components/Drawer/Drawer.tsx
+++ b/materials_ui/src/components/Drawer/Drawer.tsx
@@ -3,10 +3,7 @@ import './Drawer.scss';
 
 type Props = { heading: string };
 
-export default function Drawer({
-  heading,
-  children
-}: PropsWithChildren<Props>) {
+export default function Drawer({ heading, children }: PropsWithChildren<Props>) {
   return (
     <div className="drawer-container">
       <div className="drawer-header">
diff --git a/materials_ui/src/components/Drawer/RenameDrawer.tsx b/materials_ui/src/components/Drawer/RenameDrawer.tsx
index 57b3717f..383696d6 100644
--- a/materials_ui/src/components/Drawer/RenameDrawer.tsx
+++ b/materials_ui/src/components/Drawer/RenameDrawer.tsx
@@ -17,36 +17,26 @@ export const RenameDrawer = ({ material, onCancel, onSuccess }: Props) => {
     onSuccess: () => {
       trackAction('Renamed', {
         materialId:
-          material && 'materialId' in material
-            ? material.materialId?.toString()
-            : undefined,
-        category:
-          material && 'category' in material ? material.category : undefined
+          material && 'materialId' in material ? material.materialId?.toString() : undefined,
+        category: material && 'category' in material ? material.category : undefined,
       });
       onSuccess();
-    }
+    },
   });
   const [error, setError] = useState<string>('');
 
-  const getDefaultMaterialName = (
-    material: CaseMaterialsType | TDocument | null
-  ) => {
+  const getDefaultMaterialName = (material: CaseMaterialsType | TDocument | null) => {
     if (!material) return '';
     if ('subject' in material && typeof material.subject === 'string') {
       return material.subject;
     }
-    if (
-      'presentationTitle' in material &&
-      typeof material.presentationTitle === 'string'
-    ) {
+    if ('presentationTitle' in material && typeof material.presentationTitle === 'string') {
       return material.presentationTitle;
     }
     return '';
   };
 
-  const [inputValue, setInputValue] = useState<string>(
-    getDefaultMaterialName(material)
-  );
+  const [inputValue, setInputValue] = useState<string>(getDefaultMaterialName(material));
 
   if (!material) return null;
 
@@ -85,23 +75,13 @@ export const RenameDrawer = ({ material, onCancel, onSuccess }: Props) => {
 
   return (
     <Drawer heading="Rename">
-      <LoadingSpinner
-        isLoading={isMutating}
-        textContent="Renaming material..."
-      />
+      <LoadingSpinner isLoading={isMutating} textContent="Renaming material..." />
       {!isMutating && (
         <form onSubmit={handleSubmit}>
-          <div
-            className={`${
-              error ? 'govuk-form-group--error' : 'govuk-form-group'
-            }`}
-          >
+          <div className={`${error ? 'govuk-form-group--error' : 'govuk-form-group'}`}>
             <div>
               <h1 className="govuk-label-wrapper">
-                <label
-                  className="govuk-label govuk-label--s"
-                  htmlFor="new-material-name"
-                >
+                <label className="govuk-label govuk-label--s" htmlFor="new-material-name">
                   What is the new name of the material?
                 </label>
               </h1>
@@ -114,9 +94,7 @@ export const RenameDrawer = ({ material, onCancel, onSuccess }: Props) => {
               )}
 
               <input
-                className={`${
-                  error ? 'govuk-input govuk-input--error' : 'govuk-input'
-                }`}
+                className={`${error ? 'govuk-input govuk-input--error' : 'govuk-input'}`}
                 id="new-material-name"
                 name="newMaterialName"
                 type="text"
diff --git a/materials_ui/src/components/Filters/CommsFilters.tsx b/materials_ui/src/components/Filters/CommsFilters.tsx
index 980b1850..a6043f27 100644
--- a/materials_ui/src/components/Filters/CommsFilters.tsx
+++ b/materials_ui/src/components/Filters/CommsFilters.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import {
   communicationsCategoryList,
   communicationsWithList,
-  typeList
+  typeList,
 } from '../../constants/categoryList';
 import { READ_STATUS } from '../../constants/readStatus';
 import { useFeatureFlag, useFilters } from '../../hooks';
@@ -16,14 +16,11 @@ export const CommsFilters = () => {
     shallowFilters,
     setCheckboxFilter,
     setSearch,
-    saveFiltersToContext
+    saveFiltersToContext,
   } = useFilters('communications');
   const hasAccess = useFeatureFlag();
 
-  const handleCheckboxChange = (
-    filterGroup: string,
-    event: ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleCheckboxChange = (filterGroup: string, event: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = event.target;
 
     setCheckboxFilter(filterGroup, value, checked);
@@ -38,22 +35,10 @@ export const CommsFilters = () => {
   };
 
   const formGroups = [
-    {
-      heading: 'In/Out',
-      data: ['Incoming', 'Outgoing'],
-      filterGroup: 'direction'
-    },
-    {
-      heading: 'Comms type',
-      data: communicationsCategoryList,
-      filterGroup: 'method'
-    },
-    {
-      heading: 'Comms with',
-      data: communicationsWithList,
-      filterGroup: 'party'
-    },
-    { heading: 'Type', data: typeList, filterGroup: 'type' }
+    { heading: 'In/Out', data: ['Incoming', 'Outgoing'], filterGroup: 'direction' },
+    { heading: 'Comms type', data: communicationsCategoryList, filterGroup: 'method' },
+    { heading: 'Comms with', data: communicationsWithList, filterGroup: 'party' },
+    { heading: 'Type', data: typeList, filterGroup: 'type' },
   ];
 
   return (
@@ -69,18 +54,12 @@ export const CommsFilters = () => {
           <div className="govuk-form-group">
             <fieldset className="govuk-fieldset">
               <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-                <h3 className="govuk-heading-s small-heading-spacing">
-                  New communication
-                </h3>
+                <h3 className="govuk-heading-s small-heading-spacing">New communication</h3>
               </legend>
               <Checkbox
                 id="readStatus"
                 label="Show only new communications (unread)"
-                checked={
-                  shallowFilters?.filters?.readStatus?.includes(
-                    READ_STATUS.UNREAD
-                  ) || false
-                }
+                checked={shallowFilters?.filters?.readStatus?.includes(READ_STATUS.UNREAD) || false}
                 onChange={(event) => handleCheckboxChange('readStatus', event)}
                 value={READ_STATUS.UNREAD}
               />
@@ -93,21 +72,14 @@ export const CommsFilters = () => {
         <div className="govuk-form-group" key={index}>
           <fieldset className="govuk-fieldset">
             <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-              <h3 className="govuk-heading-s small-heading-spacing">
-                {heading}
-              </h3>
+              <h3 className="govuk-heading-s small-heading-spacing">{heading}</h3>
             </legend>
             {data.map((value) => (
               <Checkbox
                 id={`${filterGroup}-${value}`}
                 label={value}
-                checked={
-                  shallowFilters?.filters?.[filterGroup]?.includes(value) ||
-                  false
-                }
-                onChange={(event) =>
-                  handleCheckboxChange(`${filterGroup}`, event)
-                }
+                checked={shallowFilters?.filters?.[filterGroup]?.includes(value) || false}
+                onChange={(event) => handleCheckboxChange(`${filterGroup}`, event)}
                 value={value}
                 key={value}
               />
diff --git a/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx b/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx
index 3ea63820..a1e4f11e 100644
--- a/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx
+++ b/materials_ui/src/components/Filters/DocumentKeywordSearchFilters.tsx
@@ -3,17 +3,15 @@ import { useDocuments, useFilters } from '../../hooks';
 import { categoriseDocument } from '../../materials_components/DocumentSelectAccordion/utils/categoriseDocument';
 import {
   categoryDetails,
-  initDocsOnDocCategoryNamesMap
+  initDocsOnDocCategoryNamesMap,
 } from '../../materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils';
 import Checkbox from '../Checkbox/Checkbox';
 import { FilterForm } from './FilterForm';
 
-type DocumentKeywordSearchFiltersProps = {
-  onSearchSubmit?: (term: string) => void;
-};
+type DocumentKeywordSearchFiltersProps = { onSearchSubmit?: (term: string) => void };
 
 export const DocumentKeywordSearchFilters = ({
-  onSearchSubmit
+  onSearchSubmit,
 }: DocumentKeywordSearchFiltersProps) => {
   const {
     filters,
@@ -21,15 +19,12 @@ export const DocumentKeywordSearchFilters = ({
     shallowFilters,
     setCheckboxFilter,
     saveFiltersToContext,
-    setSearch
+    setSearch,
   } = useFilters('documents');
 
   const { documents } = useDocuments();
 
-  const handleCheckboxChange = (
-    filterGroup: string,
-    event: ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleCheckboxChange = (filterGroup: string, event: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = event.target;
 
     setCheckboxFilter(filterGroup, value, checked);
@@ -57,7 +52,7 @@ export const DocumentKeywordSearchFilters = ({
   const categoriesList = categoryDetails.map((category) => ({
     key: category.categoryName,
     label: category.label,
-    documents: docsOnDocCategoryNames[category.categoryName]
+    documents: docsOnDocCategoryNames[category.categoryName],
   }));
 
   return (
@@ -72,16 +67,12 @@ export const DocumentKeywordSearchFilters = ({
         <div className="govuk-form-group">
           <fieldset className="govuk-fieldset">
             <legend className="govuk-fieldset__legend govuk-fieldset__legend--m govuk-!-margin-bottom-1">
-              <h3 className="govuk-heading-s small-heading-spacing">
-                New materials
-              </h3>
+              <h3 className="govuk-heading-s small-heading-spacing">New materials</h3>
             </legend>
             <Checkbox
               id="readStatus"
               label="Show unread"
-              checked={
-                shallowFilters?.filters?.status?.includes('New') || false
-              }
+              checked={shallowFilters?.filters?.status?.includes('New') || false}
               onChange={(event) => handleCheckboxChange('status', event)}
               value={'New'}
             />
@@ -99,10 +90,7 @@ export const DocumentKeywordSearchFilters = ({
             <Checkbox
               id={`category-${category.key}`}
               label={category.label}
-              checked={
-                shallowFilters?.filters?.category?.includes(category.key) ||
-                false
-              }
+              checked={shallowFilters?.filters?.category?.includes(category.key) || false}
               onChange={(event) => handleCheckboxChange('category', event)}
               value={category.key}
               key={category.key}
diff --git a/materials_ui/src/components/Filters/FilterForm.tsx b/materials_ui/src/components/Filters/FilterForm.tsx
index 363647fa..1be96cc2 100644
--- a/materials_ui/src/components/Filters/FilterForm.tsx
+++ b/materials_ui/src/components/Filters/FilterForm.tsx
@@ -17,7 +17,7 @@ export const FilterForm = ({
   onSearchChange,
   searchLabel,
   defaultSearchValue,
-  children
+  children,
 }: FilterFormProps) => {
   return (
     <form
diff --git a/materials_ui/src/components/Filters/MaterialsFilters.tsx b/materials_ui/src/components/Filters/MaterialsFilters.tsx
index c1facde0..d11e92e4 100644
--- a/materials_ui/src/components/Filters/MaterialsFilters.tsx
+++ b/materials_ui/src/components/Filters/MaterialsFilters.tsx
@@ -12,14 +12,11 @@ export const MaterialsFilters = () => {
     shallowFilters,
     setCheckboxFilter,
     setSearch,
-    saveFiltersToContext
+    saveFiltersToContext,
   } = useFilters('materials');
   const hasAccess = useFeatureFlag();
 
-  const handleCheckboxChange = (
-    filterGroup: string,
-    event: ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleCheckboxChange = (filterGroup: string, event: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = event.target;
 
     setCheckboxFilter(filterGroup, value, checked);
@@ -48,18 +45,12 @@ export const MaterialsFilters = () => {
           <div className="govuk-form-group">
             <fieldset className="govuk-fieldset">
               <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-                <h3 className="govuk-heading-s small-heading-spacing">
-                  New material
-                </h3>
+                <h3 className="govuk-heading-s small-heading-spacing">New material</h3>
               </legend>
               <Checkbox
                 id="readStatus"
                 label="Show only new material (unread)"
-                checked={
-                  shallowFilters?.filters?.readStatus?.includes(
-                    READ_STATUS.UNREAD
-                  ) || false
-                }
+                checked={shallowFilters?.filters?.readStatus?.includes(READ_STATUS.UNREAD) || false}
                 onChange={(event) => handleCheckboxChange('readStatus', event)}
                 value={READ_STATUS.UNREAD}
               />
@@ -73,13 +64,12 @@ export const MaterialsFilters = () => {
           <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
             <h3 className="govuk-heading-s small-heading-spacing">Status</h3>
           </legend>
+
           {statusList.map((status) => (
             <Checkbox
               id={`status-${status}`}
               label={status}
-              checked={
-                shallowFilters?.filters?.status?.includes(status) || false
-              }
+              checked={shallowFilters?.filters?.status?.includes(status) || false}
               onChange={(event) => handleCheckboxChange('status', event)}
               value={status}
               key={status}
@@ -98,9 +88,7 @@ export const MaterialsFilters = () => {
             <Checkbox
               id={`category-${value}`}
               label={label}
-              checked={
-                shallowFilters?.filters?.category?.includes(value) ?? false
-              }
+              checked={shallowFilters?.filters?.category?.includes(value) ?? false}
               onChange={(event) => handleCheckboxChange('category', event)}
               value={value}
               key={value}
diff --git a/materials_ui/src/components/Layout/Layout.tsx b/materials_ui/src/components/Layout/Layout.tsx
index f4eb44d1..0dc82863 100644
--- a/materials_ui/src/components/Layout/Layout.tsx
+++ b/materials_ui/src/components/Layout/Layout.tsx
@@ -19,7 +19,7 @@ export const Layout = ({
   children,
   plain = false,
   title,
-  shouldBlockNavigationCheck
+  shouldBlockNavigationCheck,
 }: PropsWithChildren<Props>) => {
   const { banners } = useBanner();
   const { caseInfo, isLoading: caseInfoLoading } = useCaseInfoStore();
@@ -31,36 +31,32 @@ export const Layout = ({
       id: 'pcd-request',
       name: 'PCD Request',
       href: getRoute('PCD_REQUEST'),
-      active:
-        location.pathname === '/' ||
-        location.pathname.includes(getRoute('PCD_REQUEST'))
+      active: location.pathname === '/' || location.pathname.includes(getRoute('PCD_REQUEST')),
     },
     {
       id: 'materials',
       name: 'Materials',
       href: getRoute('MATERIALS'),
-      active: location.pathname === getRoute('MATERIALS')
+      active: location.pathname === getRoute('MATERIALS'),
     },
     {
       id: 'review-redact',
       name: 'Review and Redact',
       href: getRoute('REVIEW_REDACT'),
-      active: location.pathname === getRoute('REVIEW_REDACT')
+      active: location.pathname === getRoute('REVIEW_REDACT'),
     },
     {
       id: 'communications',
       name: 'Communications',
       href: getRoute('COMMUNICATIONS'),
-      active: location.pathname === getRoute('COMMUNICATIONS')
+      active: location.pathname === getRoute('COMMUNICATIONS'),
     },
     {
       id: 'pcd-review',
       name: 'Reviews',
       href: getRoute('PCD_REVIEW'),
-      active:
-        location.pathname === '/' ||
-        location.pathname.includes(getRoute('PCD_REVIEW'))
-    }
+      active: location.pathname === '/' || location.pathname.includes(getRoute('PCD_REVIEW')),
+    },
   ];
 
   const tabs = initTabs.map((tab) => ({ ...tab, shouldBlockNavigationCheck }));
@@ -74,17 +70,11 @@ export const Layout = ({
   return (
     <>
       <main className="main-container">
-        <div>
-          {banners &&
-            banners.map((banner, index) => <Banner key={index} {...banner} />)}
-        </div>
+        <div>{banners && banners.map((banner, index) => <Banner key={index} {...banner} />)}</div>
 
         {!plain ? (
           <>
-            <LoadingSpinner
-              isLoading={caseInfoLoading || !caseInfo}
-              textContent="Loading case"
-            />
+            <LoadingSpinner isLoading={caseInfoLoading || !caseInfo} textContent="Loading case" />
             {!caseInfoLoading && caseInfo && (
               <>
                 <CaseInfo caseInfo={caseInfo} />
diff --git a/materials_ui/src/components/LoadingSpinner/LoadingSpinner.tsx b/materials_ui/src/components/LoadingSpinner/LoadingSpinner.tsx
index 9ff60805..4210964e 100644
--- a/materials_ui/src/components/LoadingSpinner/LoadingSpinner.tsx
+++ b/materials_ui/src/components/LoadingSpinner/LoadingSpinner.tsx
@@ -1,14 +1,8 @@
 import { useRef } from 'react';
 
-type Props = {
-  isLoading: boolean;
-  textContent?: string;
-};
+type Props = { isLoading: boolean; textContent?: string };
 
-export const LoadingSpinner = ({
-  isLoading,
-  textContent = 'Loading...',
-}: Props) => {
+export const LoadingSpinner = ({ isLoading, textContent = 'Loading...' }: Props) => {
   const wasLoading = useRef(false);
   const completeMessage = 'Loading complete.';
 
diff --git a/materials_ui/src/components/NavList/NavList.scss b/materials_ui/src/components/NavList/NavList.scss
index 43efca0a..5314afa5 100644
--- a/materials_ui/src/components/NavList/NavList.scss
+++ b/materials_ui/src/components/NavList/NavList.scss
@@ -14,4 +14,4 @@
 
 .nav-list-section__heading:first-child {
   margin-top: 0;
-}
\ No newline at end of file
+}
diff --git a/materials_ui/src/components/NavList/NavList.tsx b/materials_ui/src/components/NavList/NavList.tsx
index 2c48f30c..98ad076d 100644
--- a/materials_ui/src/components/NavList/NavList.tsx
+++ b/materials_ui/src/components/NavList/NavList.tsx
@@ -8,11 +8,7 @@ import './NavList.scss';
 export type NavListItem = { href: string; name: string };
 export type NavListSection = { headerLabel?: string; items: NavListItem[] };
 
-type Props = {
-  items?: NavListItem[];
-  headerLabel?: string;
-  sections?: NavListSection[];
-};
+type Props = { items?: NavListItem[]; headerLabel?: string; sections?: NavListSection[] };
 
 export const NavList = ({ items = [], headerLabel, sections }: Props) => {
   const { pathname } = useLocation();
@@ -23,10 +19,7 @@ export const NavList = ({ items = [], headerLabel, sections }: Props) => {
   }
 
   return (
-    <nav
-      className="moj-side-navigation cps-side-navigation"
-      aria-label="Side navigation"
-    >
+    <nav className="moj-side-navigation cps-side-navigation" aria-label="Side navigation">
       {navSections.map((section, sectionIndex) => {
         if (section.items.length === 0) {
           return null;
@@ -35,9 +28,7 @@ export const NavList = ({ items = [], headerLabel, sections }: Props) => {
         return (
           <Fragment key={section.headerLabel ?? `section-${sectionIndex}`}>
             {section.headerLabel ? (
-              <h3 className="govuk-heading-s govuk-!-margin-bottom-1">
-                {section.headerLabel}
-              </h3>
+              <h3 className="govuk-heading-s govuk-!-margin-bottom-1">{section.headerLabel}</h3>
             ) : null}
             <ul className="moj-side-navigation__list">
               {section.items.map((item) => {
diff --git a/materials_ui/src/components/Pagination/Pagination.tsx b/materials_ui/src/components/Pagination/Pagination.tsx
index 2959e591..36f1129c 100644
--- a/materials_ui/src/components/Pagination/Pagination.tsx
+++ b/materials_ui/src/components/Pagination/Pagination.tsx
@@ -11,7 +11,7 @@ export const Pagination = ({
   setNextPage,
   setPage,
   setPreviousPage,
-  totalPages
+  totalPages,
 }: Props) => {
   const pageNumbers = [];
   const currentPagePlusOne = currentPage + 1;
@@ -105,9 +105,7 @@ export const Pagination = ({
               key={index}
               id={`pagination-item-${index}`}
               className={`govuk-pagination__item ${
-                currentPagePlusOne === pageNumber
-                  ? 'govuk-pagination__item--current'
-                  : ''
+                currentPagePlusOne === pageNumber ? 'govuk-pagination__item--current' : ''
               }`}
             >
               <a
@@ -121,7 +119,7 @@ export const Pagination = ({
                 {pageNumber}
               </a>
             </li>
-          )
+          ),
         )}
 
         {currentPagePlusOne < totalPages && (
diff --git a/materials_ui/src/components/PdfViewer/PdfViewer.css b/materials_ui/src/components/PdfViewer/PdfViewer.css
index 66038076..4ef56244 100644
--- a/materials_ui/src/components/PdfViewer/PdfViewer.css
+++ b/materials_ui/src/components/PdfViewer/PdfViewer.css
@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  background-color: #F3F2F1;
+  background-color: #f3f2f1;
   padding: 2rem;
   border: 2px solid black;
 }
@@ -15,7 +15,7 @@
 }
 
 .react-pdf__Page {
-  background-color: #F3F2F1 !important;
+  background-color: #f3f2f1 !important;
   position: relative;
 }
 
diff --git a/materials_ui/src/components/PdfViewer/PdfViewer.tsx b/materials_ui/src/components/PdfViewer/PdfViewer.tsx
index 53116bcf..1a13006e 100644
--- a/materials_ui/src/components/PdfViewer/PdfViewer.tsx
+++ b/materials_ui/src/components/PdfViewer/PdfViewer.tsx
@@ -17,8 +17,10 @@ type Props = { file: any; fileName: string };
 export const PdfViewer = ({ file, fileName }: Props) => {
   const [numItems, setNumItems] = useState(1);
   const [isLoading, setIsLoading] = useState(true);
-  const { currentPage, setNextPage, setPreviousPage, setPage, totalPages } =
-    usePagination({ initialPageSize: 1, totalItems: numItems });
+  const { currentPage, setNextPage, setPreviousPage, setPage, totalPages } = usePagination({
+    initialPageSize: 1,
+    totalItems: numItems,
+  });
   const pageColors = usePageColors();
 
   function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
@@ -28,11 +30,7 @@ export const PdfViewer = ({ file, fileName }: Props) => {
 
   return (
     <div>
-      <div
-        aria-live="polite"
-        aria-atomic="true"
-        className="govuk-visually-hidden"
-      >
+      <div aria-live="polite" aria-atomic="true" className="govuk-visually-hidden">
         {isLoading
           ? `The document preview for ${fileName} is loading. Please wait.`
           : `The document "${fileName}" has finished loading and is ready to view. Please use the arrow keys to navigate through the document.`}
diff --git a/materials_ui/src/components/Radios/Radios.tsx b/materials_ui/src/components/Radios/Radios.tsx
index ed4ee17d..f82ce1fb 100644
--- a/materials_ui/src/components/Radios/Radios.tsx
+++ b/materials_ui/src/components/Radios/Radios.tsx
@@ -23,24 +23,11 @@ export type Props = {
 
 export const Radios = forwardRef<HTMLInputElement, Props>(
   (
-    {
-      error,
-      id,
-      legend,
-      name,
-      onChange,
-      options,
-      required = false,
-      inline,
-      value,
-      defaultValue
-    },
-    ref
+    { error, id, legend, name, onChange, options, required = false, inline, value, defaultValue },
+    ref,
   ) => {
     return (
-      <div
-        className={`govuk-form-group${error ? ' govuk-form-group--error' : ''}`}
-      >
+      <div className={`govuk-form-group${error ? ' govuk-form-group--error' : ''}`}>
         <fieldset
           className="govuk-fieldset"
           role="radiogroup"
@@ -48,9 +35,7 @@ export const Radios = forwardRef<HTMLInputElement, Props>(
           aria-invalid={!!error}
           id={id}
         >
-          <legend className="govuk-fieldset__legend govuk-fieldset__legend--s">
-            {legend}
-          </legend>
+          <legend className="govuk-fieldset__legend govuk-fieldset__legend--s">{legend}</legend>
 
           {error && (
             <p className="govuk-error-message">
@@ -76,19 +61,14 @@ export const Radios = forwardRef<HTMLInputElement, Props>(
                     checked={option.value === value}
                     onChange={() => onChange(option)}
                   />
-                  <label
-                    className="govuk-label govuk-radios__label"
-                    htmlFor={`radio-${option.id}`}
-                  >
+                  <label className="govuk-label govuk-radios__label" htmlFor={`radio-${option.id}`}>
                     {option.label}
                   </label>
                 </div>
 
                 {option.conditionalField &&
                   (option.value === defaultValue || value === option.value) && (
-                    <div className="govuk-radios__conditional">
-                      {option.conditionalField}
-                    </div>
+                    <div className="govuk-radios__conditional">{option.conditionalField}</div>
                   )}
               </Fragment>
             ))}
@@ -96,5 +76,5 @@ export const Radios = forwardRef<HTMLInputElement, Props>(
         </fieldset>
       </div>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/components/SearchInput/SearchInput.tsx b/materials_ui/src/components/SearchInput/SearchInput.tsx
index af8618d7..1ae79a1f 100644
--- a/materials_ui/src/components/SearchInput/SearchInput.tsx
+++ b/materials_ui/src/components/SearchInput/SearchInput.tsx
@@ -17,7 +17,7 @@ export const SearchInput = ({
   onSearch,
   hideButton = true,
   label,
-  placeholder
+  placeholder,
 }: Props) => {
   const [searchTerm, setSearchTerm] = useState('');
 
diff --git a/materials_ui/src/components/SectionBreak/SectionBreak.scss b/materials_ui/src/components/SectionBreak/SectionBreak.scss
index 47ef0c0c..8c64a4a2 100644
--- a/materials_ui/src/components/SectionBreak/SectionBreak.scss
+++ b/materials_ui/src/components/SectionBreak/SectionBreak.scss
@@ -13,5 +13,4 @@
     margin-bottom: 30px;
     margin-top: 30px;
   }
-
-}
\ No newline at end of file
+}
diff --git a/materials_ui/src/components/SelectList/SelectList.tsx b/materials_ui/src/components/SelectList/SelectList.tsx
index eee2ae2c..73bfc7ef 100644
--- a/materials_ui/src/components/SelectList/SelectList.tsx
+++ b/materials_ui/src/components/SelectList/SelectList.tsx
@@ -22,26 +22,13 @@ type Props = {
 
 export const SelectList = forwardRef<HTMLSelectElement, Props>(
   (
-    {
-      id,
-      defaultValue,
-      disabled = false,
-      label,
-      hint,
-      error,
-      options,
-      onChange,
-      required,
-      value
-    },
-    ref
+    { id, defaultValue, disabled = false, label, hint, error, options, onChange, required, value },
+    ref,
   ) => {
     const hasError = !!error;
 
     return (
-      <div
-        className={`govuk-form-group ${hasError ? 'govuk-form-group--error' : ''}`}
-      >
+      <div className={`govuk-form-group ${hasError ? 'govuk-form-group--error' : ''}`}>
         <label className="govuk-label" htmlFor={id} style={{ fontWeight: 700 }}>
           {label}
         </label>
@@ -73,17 +60,12 @@ export const SelectList = forwardRef<HTMLSelectElement, Props>(
           required={required}
         >
           {options.map(({ value, label, id, disabled = false }) => (
-            <option
-              key={id}
-              value={value}
-              id={`option-${id}`}
-              disabled={disabled}
-            >
+            <option key={id} value={value} id={`option-${id}`} disabled={disabled}>
               {label}
             </option>
           ))}
         </select>
       </div>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx b/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx
index b8c7c993..ed049225 100644
--- a/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx
+++ b/materials_ui/src/components/SortableTable/CaseMaterialsTable.tsx
@@ -4,12 +4,7 @@ import { useSearchParams } from 'react-router-dom';
 import { useCaseMaterials, useFilters, usePager } from '../../hooks';
 
 import { CaseMaterialsType } from '../../schemas';
-import {
-  defaultFilterFn,
-  defaultSearchFn,
-  defaultSortFn,
-  getSortFn
-} from '../../utils/filtering';
+import { defaultFilterFn, defaultSearchFn, defaultSortFn, getSortFn } from '../../utils/filtering';
 import SortableTable, { Column } from './SortableTable';
 
 import { DEFAULT_RESULTS_PER_PAGE } from '../../constants/query';
@@ -25,7 +20,7 @@ export const CaseMaterialsTable = () => {
   const {
     filteredData,
     loading: caseMaterialsLoading,
-    error
+    error,
   } = useCaseMaterials({ dataType: 'materials' });
   const { filters } = useFilters('materials');
   const { materialTags } = useMaterialTags();
@@ -42,7 +37,7 @@ export const CaseMaterialsTable = () => {
             {row.statusLabel && <StatusTag status={row.statusLabel} />}
           </>
         ),
-        isSortable: true
+        isSortable: true,
       },
       {
         key: 'type',
@@ -51,71 +46,58 @@ export const CaseMaterialsTable = () => {
         sortFn: ({ type: leftType }, { type: rightType }, direction) => {
           const compareResult = leftType.localeCompare(rightType, undefined, {
             numeric: true,
-            sensitivity: 'base'
+            sensitivity: 'base',
           });
           return direction === 'ascending' ? compareResult : -compareResult;
-        }
+        },
       },
       { key: 'category', heading: 'Category', isSortable: true },
       {
         key: 'date',
         heading: 'Date',
         render: (row) => (
-          <span
-            aria-label={row.date === null ? 'No date available' : undefined}
-          >
+          <span aria-label={row.date === null ? 'No date available' : undefined}>
             {formatDate(row.date)}
           </span>
         ),
-        isSortable: true
+        isSortable: true,
       },
       {
         key: 'status',
         heading: 'Status',
         render: (row) => <StatusTag status={row.status} />,
-        isSortable: true
-      }
+        isSortable: true,
+      },
     ],
-    []
+    [],
   );
 
   const filteredSortedData = useMemo(() => {
     const sortFn = getSortFn(columns, filters?.sort, (sortConfig) =>
-      defaultSortFn<CaseMaterialsType>(sortConfig)
+      defaultSortFn<CaseMaterialsType>(sortConfig),
     );
     const sortByStatusFn = defaultSortFn<CaseMaterialsType>({
       column: 'statusLabel',
-      direction: 'descending'
+      direction: 'descending',
     });
     const filterFn = defaultFilterFn<CaseMaterialsType>(filters?.filters);
-    const searchFn = defaultSearchFn<CaseMaterialsType>(
-      'subject',
-      filters?.search
-    );
+    const searchFn = defaultSearchFn<CaseMaterialsType>('subject', filters?.search);
 
     return filteredData
       ?.map((material) => {
         const materialTag = materialTags.find(
-          (materialTag) => materialTag.materialId === material.materialId
+          (materialTag) => materialTag.materialId === material.materialId,
         );
 
-        return materialTag
-          ? { ...material, statusLabel: materialTag.tagName }
-          : material;
+        return materialTag ? { ...material, statusLabel: materialTag.tagName } : material;
       })
       ?.filter(searchFn)
       ?.filter(filterFn)
       ?.sort((a, b) => {
-        if (
-          a.readStatus === READ_STATUS.UNREAD &&
-          b.readStatus !== READ_STATUS.UNREAD
-        ) {
+        if (a.readStatus === READ_STATUS.UNREAD && b.readStatus !== READ_STATUS.UNREAD) {
           return -1;
         }
-        if (
-          a.readStatus !== READ_STATUS.READ &&
-          b.readStatus === READ_STATUS.READ
-        ) {
+        if (a.readStatus !== READ_STATUS.READ && b.readStatus === READ_STATUS.READ) {
           return 1;
         }
         return 0;
@@ -126,23 +108,14 @@ export const CaseMaterialsTable = () => {
 
   const currentPageParam = queryParams?.get('page');
 
-  const {
-    currentPage,
-    totalPages,
-    startIndex,
-    endIndex,
-    setNextPage,
-    setPage,
-    setPreviousPage
-  } = usePager({
-    totalItems: filteredSortedData?.length,
-    initialPageSize: DEFAULT_RESULTS_PER_PAGE,
-    initialPage: currentPageParam ? +currentPageParam - 1 : 0
-  });
-
-  const expandableRow = (row: CaseMaterialsType) => (
-    <DocumentPreview row={row} />
-  );
+  const { currentPage, totalPages, startIndex, endIndex, setNextPage, setPage, setPreviousPage } =
+    usePager({
+      totalItems: filteredSortedData?.length,
+      initialPageSize: DEFAULT_RESULTS_PER_PAGE,
+      initialPage: currentPageParam ? +currentPageParam - 1 : 0,
+    });
+
+  const expandableRow = (row: CaseMaterialsType) => <DocumentPreview row={row} />;
 
   const recordsOnCurrentPage = endIndex + 1 - startIndex;
 
@@ -152,17 +125,11 @@ export const CaseMaterialsTable = () => {
 
   return (
     <>
-      <LoadingSpinner
-        isLoading={caseMaterialsLoading}
-        textContent="Loading materials..."
-      />
+      <LoadingSpinner isLoading={caseMaterialsLoading} textContent="Loading materials..." />
       {!caseMaterialsLoading && (
         <>
           <p className="govuk-body showing-materials-count">
-            Showing{' '}
-            <strong>
-              {filteredSortedData?.length === 0 ? 0 : recordsOnCurrentPage}
-            </strong>{' '}
+            Showing <strong>{filteredSortedData?.length === 0 ? 0 : recordsOnCurrentPage}</strong>{' '}
             materials out of <strong>{filteredSortedData?.length}</strong>
           </p>
           <SortableTable
@@ -175,13 +142,7 @@ export const CaseMaterialsTable = () => {
             error={error}
           />
 
-          <div
-            className={
-              totalPages > 1
-                ? 'table-actions-footer'
-                : 'table-actions-footer-end'
-            }
-          >
+          <div className={totalPages > 1 ? 'table-actions-footer' : 'table-actions-footer-end'}>
             <Pagination
               currentPage={currentPage}
               totalPages={totalPages}
diff --git a/materials_ui/src/components/SortableTable/CommunicationsTable.tsx b/materials_ui/src/components/SortableTable/CommunicationsTable.tsx
index ed24328a..93b577d1 100644
--- a/materials_ui/src/components/SortableTable/CommunicationsTable.tsx
+++ b/materials_ui/src/components/SortableTable/CommunicationsTable.tsx
@@ -3,23 +3,14 @@ import { useSearchParams } from 'react-router-dom';
 import { useCaseMaterials, useFilters, usePager } from '../../hooks';
 
 import { CaseMaterialsType } from '../../schemas';
-import {
-  defaultFilterFn,
-  defaultSearchFn,
-  defaultSortFn
-} from '../../utils/filtering';
+import { defaultFilterFn, defaultSearchFn, defaultSortFn } from '../../utils/filtering';
 
 import SortableTable, { Column } from './SortableTable';
 
 import { READ_STATUS } from '../../constants';
 import { DEFAULT_RESULTS_PER_PAGE } from '../../constants/query';
 
-import {
-  DocumentPreview,
-  LoadingSpinner,
-  Pagination,
-  StatusTag
-} from '..';
+import { DocumentPreview, LoadingSpinner, Pagination, StatusTag } from '..';
 import { useMaterialTags } from '../../stores';
 import { formatDate } from '../../utils/date';
 
@@ -28,7 +19,7 @@ export const CommunicationsTable = () => {
   const {
     filteredData,
     loading: caseMaterialsLoading,
-    error
+    error,
   } = useCaseMaterials({ dataType: 'communications' });
 
   const { filters } = useFilters('communications');
@@ -38,37 +29,26 @@ export const CommunicationsTable = () => {
     const sortFn = defaultSortFn<CaseMaterialsType>(filters?.sort);
     const sortByStatusFn = defaultSortFn<CaseMaterialsType>({
       column: 'statusLabel',
-      direction: 'descending'
+      direction: 'descending',
     });
     const filterFn = defaultFilterFn<CaseMaterialsType>(filters?.filters);
-    const searchFn = defaultSearchFn<CaseMaterialsType>(
-      'subject',
-      filters?.search
-    );
+    const searchFn = defaultSearchFn<CaseMaterialsType>('subject', filters?.search);
 
     return filteredData
       ?.map((material) => {
         const materialTag = materialTags.find(
-          (materialTag) => materialTag.materialId === material.materialId
+          (materialTag) => materialTag.materialId === material.materialId,
         );
 
-        return materialTag
-          ? { ...material, statusLabel: materialTag.tagName }
-          : material;
+        return materialTag ? { ...material, statusLabel: materialTag.tagName } : material;
       })
       ?.filter(searchFn)
       ?.filter(filterFn)
       ?.sort((a, b) => {
-        if (
-          a.readStatus === READ_STATUS.UNREAD &&
-          b.readStatus !== READ_STATUS.UNREAD
-        ) {
+        if (a.readStatus === READ_STATUS.UNREAD && b.readStatus !== READ_STATUS.UNREAD) {
           return -1;
         }
-        if (
-          a.readStatus !== READ_STATUS.READ &&
-          b.readStatus === READ_STATUS.READ
-        ) {
+        if (a.readStatus !== READ_STATUS.READ && b.readStatus === READ_STATUS.READ) {
           return 1;
         }
         return 0;
@@ -79,19 +59,12 @@ export const CommunicationsTable = () => {
 
   const currentPageParam = queryParams?.get('page');
 
-  const {
-    currentPage,
-    totalPages,
-    startIndex,
-    endIndex,
-    setNextPage,
-    setPage,
-    setPreviousPage
-  } = usePager({
-    totalItems: filteredSortedData?.length,
-    initialPageSize: DEFAULT_RESULTS_PER_PAGE,
-    initialPage: currentPageParam ? +currentPageParam - 1 : 0
-  });
+  const { currentPage, totalPages, startIndex, endIndex, setNextPage, setPage, setPreviousPage } =
+    usePager({
+      totalItems: filteredSortedData?.length,
+      initialPageSize: DEFAULT_RESULTS_PER_PAGE,
+      initialPage: currentPageParam ? +currentPageParam - 1 : 0,
+    });
 
   const columns: Column<CaseMaterialsType>[] = [
     {
@@ -104,7 +77,7 @@ export const CommunicationsTable = () => {
           {row.statusLabel && <StatusTag status={row.statusLabel} />}
         </>
       ),
-      isSortable: true
+      isSortable: true,
     },
     { key: 'direction', heading: 'In/Out', isSortable: true },
     { key: 'party', heading: 'Comms with', isSortable: true },
@@ -118,13 +91,11 @@ export const CommunicationsTable = () => {
           {formatDate(row.date)}
         </span>
       ),
-      isSortable: true
-    }
+      isSortable: true,
+    },
   ];
 
-  const expandableRow = (row: CaseMaterialsType) => (
-    <DocumentPreview row={row} />
-  );
+  const expandableRow = (row: CaseMaterialsType) => <DocumentPreview row={row} />;
 
   const recordsOnCurrentPage = endIndex + 1 - startIndex;
 
@@ -134,44 +105,34 @@ export const CommunicationsTable = () => {
 
   return (
     <>
-      <LoadingSpinner
-        isLoading={caseMaterialsLoading}
-        textContent="Loading materials..."
-      />
+      <LoadingSpinner isLoading={caseMaterialsLoading} textContent="Loading materials..." />
       {!caseMaterialsLoading && (
-      <>
-      <p className="govuk-body showing-materials-count">
-        Showing{' '}
-        <strong>
-          {filteredSortedData?.length === 0 ? 0 : recordsOnCurrentPage}
-        </strong>{' '}
-        {filteredSortedData?.length === 1 ? `communication` : `communications`}{' '}
-        out of <strong>{filteredSortedData?.length}</strong>
-      </p>
-      <SortableTable
-        data={(filteredSortedData || []).slice(startIndex, endIndex + 1)}
-        dataName="communications"
-        caption="Communications list view"
-        filters={filters}
-        columns={columns}
-        expandableRow={expandableRow}
-        error={error}
-        isCommunications
-      />
-      <div
-        className={
-          totalPages > 1 ? 'table-actions-footer' : 'table-actions-footer-end'
-        }
-      >
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          setNextPage={setNextPage}
-          setPreviousPage={setPreviousPage}
-          setPage={setPage}
-        />
-      </div>
-      </>
+        <>
+          <p className="govuk-body showing-materials-count">
+            Showing <strong>{filteredSortedData?.length === 0 ? 0 : recordsOnCurrentPage}</strong>{' '}
+            {filteredSortedData?.length === 1 ? `communication` : `communications`} out of{' '}
+            <strong>{filteredSortedData?.length}</strong>
+          </p>
+          <SortableTable
+            data={(filteredSortedData || []).slice(startIndex, endIndex + 1)}
+            dataName="communications"
+            caption="Communications list view"
+            filters={filters}
+            columns={columns}
+            expandableRow={expandableRow}
+            error={error}
+            isCommunications
+          />
+          <div className={totalPages > 1 ? 'table-actions-footer' : 'table-actions-footer-end'}>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              setNextPage={setNextPage}
+              setPreviousPage={setPreviousPage}
+              setPage={setPage}
+            />
+          </div>
+        </>
       )}
     </>
   );
diff --git a/materials_ui/src/components/SortableTable/SortableTable.tsx b/materials_ui/src/components/SortableTable/SortableTable.tsx
index 46704162..d4d6f5ae 100644
--- a/materials_ui/src/components/SortableTable/SortableTable.tsx
+++ b/materials_ui/src/components/SortableTable/SortableTable.tsx
@@ -36,24 +36,23 @@ const SortableTable = <T,>({
   dataName,
   checkboxes = true,
   error,
-  isCommunications = false
+  isCommunications = false,
 }: SortableTableProps<T>) => {
   const {
     items: selectedItems,
     addItems: addSelectedItems,
     removeItems: removeSelectedItems,
-    clear: clearSelectedItems
+    clear: clearSelectedItems,
   } = useSelectedItemsStore();
   const { isPending: isAutoReclassifyPending } = useAutoReclassify();
   const { setSort } = useFilters(dataName);
-  const { selectedMaterialId, selectMaterial, deselectMaterial } =
-    useCaseMaterial();
+  const { selectedMaterialId, selectMaterial, deselectMaterial } = useCaseMaterial();
 
   const materialType = isCommunications ? 'communications' : 'materials';
 
   const handleSelectItem = (material: CaseMaterialsType) => {
     const isSelected = selectedItems[materialType]?.some(
-      (m) => m.materialId === material.materialId
+      (m) => m.materialId === material.materialId,
     );
 
     if (isSelected) {
@@ -86,145 +85,131 @@ const SortableTable = <T,>({
         textContent={`Reclassifying ${dataName}...`}
       />
       {!isAutoReclassifyPending && (
-    <div className="table-container">
-      <table className="govuk-table">
-        <caption className="govuk-visually-hidden">{caption}</caption>
-        <thead className="govuk-table__head">
-          <tr className="govuk-table__row">
-            {checkboxes && (
-              <th className="govuk-table__header">
-                <Checkbox
-                  id="select-all"
-                  aria-label="Select all case materials"
-                  label="Select All"
-                  labelVisuallyHidden={true}
-                  onChange={handleSelectAll}
-                  checked={
-                    selectedItems[materialType]?.length === data.length &&
-                    data?.length > 0
-                  }
-                />
-              </th>
-            )}
-            {columns.length &&
-              columns.map(({ key, heading, isSortable }) => {
-                const isSortedColumn =
-                  filters?.sort?.column === key && !!filters?.sort?.direction;
-                const ariaSortValue = isSortable
-                  ? isSortedColumn && filters?.sort?.direction
-                    ? filters.sort.direction
-                    : 'none'
-                  : undefined;
+        <div className="table-container">
+          <table className="govuk-table">
+            <caption className="govuk-visually-hidden">{caption}</caption>
+            <thead className="govuk-table__head">
+              <tr className="govuk-table__row">
+                {checkboxes && (
+                  <th className="govuk-table__header">
+                    <Checkbox
+                      id="select-all"
+                      aria-label="Select all case materials"
+                      label="Select All"
+                      labelVisuallyHidden={true}
+                      onChange={handleSelectAll}
+                      checked={
+                        selectedItems[materialType]?.length === data.length && data?.length > 0
+                      }
+                    />
+                  </th>
+                )}
+                {columns.length &&
+                  columns.map(({ key, heading, isSortable }) => {
+                    const isSortedColumn =
+                      filters?.sort?.column === key && !!filters?.sort?.direction;
+                    const ariaSortValue = isSortable
+                      ? isSortedColumn && filters?.sort?.direction
+                        ? filters.sort.direction
+                        : 'none'
+                      : undefined;
 
-                return (
-                  <th
-                    key={key}
-                    scope="col"
-                    className="govuk-table__header"
-                    aria-sort={ariaSortValue}
-                  >
-                    {isSortable ? (
-                      <button
-                        type="button"
-                        className="sortable-table-header-button"
-                        onClick={() => setSort(key)}
+                    return (
+                      <th
+                        key={key}
+                        scope="col"
+                        className="govuk-table__header"
+                        aria-sort={ariaSortValue}
                       >
-                        {heading}
-                      </button>
-                    ) : (
-                      heading
-                    )}
-                  </th>
-                );
-              })}
-            <th
-              scope="col"
-              className="govuk-table__header"
-              style={{ width: '10%' }}
-            ></th>
-          </tr>
-        </thead>
+                        {isSortable ? (
+                          <button
+                            type="button"
+                            className="sortable-table-header-button"
+                            onClick={() => setSort(key)}
+                          >
+                            {heading}
+                          </button>
+                        ) : (
+                          heading
+                        )}
+                      </th>
+                    );
+                  })}
+                <th scope="col" className="govuk-table__header" style={{ width: '10%' }}></th>
+              </tr>
+            </thead>
 
-        <tbody className="govuk-table__body">
-          {data.length > 0 ? (
-            data.map((row, index) => {
-              const isCurrentMaterial =
-                selectedMaterialId !== null &&
-                +selectedMaterialId === row.materialId;
+            <tbody className="govuk-table__body">
+              {data.length > 0 ? (
+                data.map((row, index) => {
+                  const isCurrentMaterial =
+                    selectedMaterialId !== null && +selectedMaterialId === row.materialId;
 
-              return (
-                <Fragment key={index}>
-                  <tr key={index} className="govuk-table__row">
-                    {checkboxes && (
-                      <td className="govuk-table__cell">
-                        <Checkbox
-                          id={`select-${row.subject}`}
-                          label={`Select ${row.subject}`}
-                          checked={selectedItems[materialType]?.some(
-                            (m) => m.id === row.id
-                          )}
-                          onChange={() => handleSelectItem(row)}
-                          labelVisuallyHidden={true}
-                        />
-                      </td>
-                    )}
-                    {columns.map((col, colIndex) => (
-                      <td
-                        key={colIndex}
-                        className="govuk-table__cell"
-                        style={{ fontVariantLigatures: 'none' }}
-                      >
-                        {/* @ts-expect-error generic type mismatch with CaseMaterialsType */}
-                        {col.render ? col.render(row) : row[col.key]}
-                      </td>
-                    ))}
-                    <td
-                      className="govuk-table__cell"
-                      style={{ textAlign: 'right' }}
-                    >
-                      <DocumentActions
-                        label={row.subject}
-                        isOpen={isCurrentMaterial}
-                        onDocumentOpen={() =>
-                          handleActionsClick(
-                            isCurrentMaterial ? null : row.materialId
-                          )
-                        }
-                      />
-                    </td>
-                  </tr>
+                  return (
+                    <Fragment key={index}>
+                      <tr key={index} className="govuk-table__row">
+                        {checkboxes && (
+                          <td className="govuk-table__cell">
+                            <Checkbox
+                              id={`select-${row.subject}`}
+                              label={`Select ${row.subject}`}
+                              checked={selectedItems[materialType]?.some((m) => m.id === row.id)}
+                              onChange={() => handleSelectItem(row)}
+                              labelVisuallyHidden={true}
+                            />
+                          </td>
+                        )}
+                        {columns.map((col, colIndex) => (
+                          <td
+                            key={colIndex}
+                            className="govuk-table__cell"
+                            style={{ fontVariantLigatures: 'none' }}
+                          >
+                            {/* @ts-expect-error generic type mismatch with CaseMaterialsType */}
+                            {col.render ? col.render(row) : row[col.key]}
+                          </td>
+                        ))}
+                        <td className="govuk-table__cell" style={{ textAlign: 'right' }}>
+                          <DocumentActions
+                            label={row.subject}
+                            isOpen={isCurrentMaterial}
+                            onDocumentOpen={() =>
+                              handleActionsClick(isCurrentMaterial ? null : row.materialId)
+                            }
+                          />
+                        </td>
+                      </tr>
 
-                  {expandableRow && isCurrentMaterial && (
-                    <tr>
-                      <td className="govuk-table__cell" colSpan={8}>
-                        {expandableRow(row as any)}
-                      </td>
-                    </tr>
-                  )}
-                </Fragment>
-              );
-            })
-          ) : error ? (
-            <tr>
-              <td colSpan={8}>
-                <p className="govuk-body no-materials-message">
-                  Unable to fetch {dataName} for this case
-                </p>
-              </td>
-            </tr>
-          ) : (
-            <tr>
-              <td colSpan={8}>
-                <p className="govuk-body no-materials-message">
-                  There are no {dataName} that match your selection for this
-                  case
-                </p>
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
+                      {expandableRow && isCurrentMaterial && (
+                        <tr>
+                          <td className="govuk-table__cell" colSpan={8}>
+                            {expandableRow(row as any)}
+                          </td>
+                        </tr>
+                      )}
+                    </Fragment>
+                  );
+                })
+              ) : error ? (
+                <tr>
+                  <td colSpan={8}>
+                    <p className="govuk-body no-materials-message">
+                      Unable to fetch {dataName} for this case
+                    </p>
+                  </td>
+                </tr>
+              ) : (
+                <tr>
+                  <td colSpan={8}>
+                    <p className="govuk-body no-materials-message">
+                      There are no {dataName} that match your selection for this case
+                    </p>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       )}
     </>
   );
diff --git a/materials_ui/src/components/SortableTable/TableActions.tsx b/materials_ui/src/components/SortableTable/TableActions.tsx
index eb18c8d1..d3202b0f 100644
--- a/materials_ui/src/components/SortableTable/TableActions.tsx
+++ b/materials_ui/src/components/SortableTable/TableActions.tsx
@@ -17,7 +17,7 @@ export function TableActions({
   showFilter,
   onSetShowFilter,
   menuItems = [],
-  selectedItems
+  selectedItems,
 }: Props) {
   const { caseInfo } = useCaseInfoStore();
   const [isSticky, setIsSticky] = useState(false);
@@ -29,7 +29,7 @@ export function TableActions({
       ([entry]) => {
         if (entry) setIsSticky(!entry.isIntersecting);
       },
-      { threshold: 0 }
+      { threshold: 0 },
     );
 
     if (ref.current) {
@@ -44,9 +44,7 @@ export function TableActions({
   return (
     <>
       <div ref={ref} style={{ height: 1 }}></div>
-      <div
-        className={`govuk-grid-row search-input-container ${isSticky ? 'is-sticky' : ''}`}
-      >
+      <div className={`govuk-grid-row search-input-container ${isSticky ? 'is-sticky' : ''}`}>
         <div className="search-input-row">
           {!isSticky && (
             <div className="filter-button">
@@ -58,7 +56,7 @@ export function TableActions({
                   onSetShowFilter(!showFilter);
                   log({
                     logLevel: 1,
-                    message: `HK-UI-FE: caseId [${caseInfo?.id}] - filter panel is now ${filterStatus}.`
+                    message: `HK-UI-FE: caseId [${caseInfo?.id}] - filter panel is now ${filterStatus}.`,
                   });
                 }}
               >
diff --git a/materials_ui/src/components/SummaryCard/SummaryCard.tsx b/materials_ui/src/components/SummaryCard/SummaryCard.tsx
index 08746bba..e3c7be7f 100644
--- a/materials_ui/src/components/SummaryCard/SummaryCard.tsx
+++ b/materials_ui/src/components/SummaryCard/SummaryCard.tsx
@@ -1,18 +1,8 @@
 export type ContentItem = { key: string; value: unknown };
 
-type Props = {
-  title: string;
-  content: ContentItem[];
-  actionName?: string;
-  action?: () => void;
-};
+type Props = { title: string; content: ContentItem[]; actionName?: string; action?: () => void };
 
-export const SummaryCard = ({
-  title,
-  content,
-  actionName = 'Change',
-  action
-}: Props) => {
+export const SummaryCard = ({ title, content, actionName = 'Change', action }: Props) => {
   return (
     <div className="govuk-summary-card">
       <div className="govuk-summary-card__title-wrapper">
diff --git a/materials_ui/src/components/TextArea/TextArea.tsx b/materials_ui/src/components/TextArea/TextArea.tsx
index 2cbf31a2..d00b9e38 100644
--- a/materials_ui/src/components/TextArea/TextArea.tsx
+++ b/materials_ui/src/components/TextArea/TextArea.tsx
@@ -25,9 +25,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
       onChange,
       required,
       rows = 5,
-      maxCharacters = 0
+      maxCharacters = 0,
     },
-    ref
+    ref,
   ) => {
     const [text, setText] = useState('');
     const hasError = !!error;
@@ -38,9 +38,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
     };
 
     return (
-      <div
-        className={`govuk-form-group ${hasError ? 'govuk-form-group--error' : ''}`}
-      >
+      <div className={`govuk-form-group ${hasError ? 'govuk-form-group--error' : ''}`}>
         <label className="govuk-label" htmlFor={id} style={{ fontWeight: 700 }}>
           {label}
         </label>
@@ -74,14 +72,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
         />
 
         {!!maxCharacters && (
-          <div
-            className="govuk-hint govuk-character-count__message"
-            style={{ marginTop: '-25px' }}
-          >
+          <div className="govuk-hint govuk-character-count__message" style={{ marginTop: '-25px' }}>
             You can enter up to {maxCharacters - text.length} characters
           </div>
         )}
       </div>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/components/TextInput/TextInput.tsx b/materials_ui/src/components/TextInput/TextInput.tsx
index e928e8d2..fba692cb 100644
--- a/materials_ui/src/components/TextInput/TextInput.tsx
+++ b/materials_ui/src/components/TextInput/TextInput.tsx
@@ -35,16 +35,14 @@ export const TextInput = forwardRef<HTMLInputElement, Props>(
       type = 'text',
       autocomplete,
       spellCheck,
-      readonly = false
+      readonly = false,
     },
-    ref
+    ref,
   ) => {
     const hasError = !!error;
 
     return (
-      <div
-        className={`govuk-form-group ${hasError ? 'govuk-form-group--error' : ''}`}
-      >
+      <div className={`govuk-form-group ${hasError ? 'govuk-form-group--error' : ''}`}>
         <label className="govuk-label" htmlFor={id} style={{ fontWeight: 700 }}>
           {label}
         </label>
@@ -82,5 +80,5 @@ export const TextInput = forwardRef<HTMLInputElement, Props>(
         />
       </div>
     );
-  }
+  },
 );
diff --git a/materials_ui/src/components/forms/EditMaterial/EditExhibit.tsx b/materials_ui/src/components/forms/EditMaterial/EditExhibit.tsx
index 362fffd1..bde49177 100644
--- a/materials_ui/src/components/forms/EditMaterial/EditExhibit.tsx
+++ b/materials_ui/src/components/forms/EditMaterial/EditExhibit.tsx
@@ -3,10 +3,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 
 import { useExhibitProducers } from '../../../hooks/index.ts';
-import {
-  EditExhibitSchema,
-  EditExhibitType
-} from '../../../schemas/forms/editStatement.ts';
+import { EditExhibitSchema, EditExhibitType } from '../../../schemas/forms/editStatement.ts';
 import { CaseMaterialsType } from '../../../schemas/index.ts';
 import { SelectList } from '../../SelectList/SelectList.tsx';
 
@@ -21,22 +18,15 @@ type Props = {
   onSuccess: (data: EditExhibitType) => void;
 };
 
-export const EditExhibitForm = ({
-  cancelUrl,
-  formState,
-  material,
-  onSuccess
-}: Props) => {
-  const {
-    selectOptions: exhibitProducers,
-    loading: isExhibitProducersLoading
-  } = useExhibitProducers();
+export const EditExhibitForm = ({ cancelUrl, formState, material, onSuccess }: Props) => {
+  const { selectOptions: exhibitProducers, loading: isExhibitProducersLoading } =
+    useExhibitProducers();
 
   const {
     control,
     handleSubmit,
     formState: { errors },
-    watch
+    watch,
   } = useForm<EditExhibitType>({
     // @ts-expect-error fix type
     resolver: zodResolver(EditExhibitSchema),
@@ -48,14 +38,11 @@ export const EditExhibitForm = ({
       subject: formState?.item || material?.subject || '',
       used: formState?.used || material?.status === 'Used',
       existingproducerOrWitnessId:
-        formState?.existingproducerOrWitnessId ||
-        material?.existingproducerOrWitnessId,
+        formState?.existingproducerOrWitnessId || material?.existingproducerOrWitnessId,
       producedBy:
         formState?.producedBy ||
-        (!material?.existingproducerOrWitnessId
-          ? material?.producer?.trim()
-          : undefined)
-    }
+        (!material?.existingproducerOrWitnessId ? material?.producer?.trim() : undefined),
+    },
   });
 
   const fieldValues = watch();
@@ -126,10 +113,8 @@ export const EditExhibitForm = ({
               options={[
                 ...(isExhibitProducersLoading
                   ? [{ label: 'Loading...', value: '', id: '' }]
-                  : [
-                      { label: 'Select producer or witness', value: '', id: '' }
-                    ]),
-                ...exhibitProducers
+                  : [{ label: 'Select producer or witness', value: '', id: '' }]),
+                ...exhibitProducers,
               ]}
             />
           )}
@@ -154,11 +139,7 @@ export const EditExhibitForm = ({
         <UsedField control={control} errors={errors} />
 
         <div className="govuk-button-group">
-          <button
-            type="submit"
-            className="govuk-button"
-            data-module="govuk-button"
-          >
+          <button type="submit" className="govuk-button" data-module="govuk-button">
             Continue
           </button>
           <Link to={cancelUrl} className="govuk-link cancel-status-change">
diff --git a/materials_ui/src/components/forms/EditMaterial/EditStatement.tsx b/materials_ui/src/components/forms/EditMaterial/EditStatement.tsx
index 172b75dc..f5a0df57 100644
--- a/materials_ui/src/components/forms/EditMaterial/EditStatement.tsx
+++ b/materials_ui/src/components/forms/EditMaterial/EditStatement.tsx
@@ -3,14 +3,8 @@ import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 
-import {
-  useCaseWitnesses,
-  useWitnessStatements
-} from '../../../hooks/index.ts';
-import {
-  EditStatementSchema,
-  EditStatementType
-} from '../../../schemas/forms/editStatement.ts';
+import { useCaseWitnesses, useWitnessStatements } from '../../../hooks/index.ts';
+import { EditStatementSchema, EditStatementType } from '../../../schemas/forms/editStatement.ts';
 import { CaseMaterialsType } from '../../../schemas/index.ts';
 import { SelectList } from '../../SelectList/SelectList.tsx';
 
@@ -26,21 +20,16 @@ type Props = {
   cancelUrl: string;
 };
 
-export const EditStatementForm = ({
-  formState,
-  material,
-  onSuccess,
-  cancelUrl
-}: Props) => {
+export const EditStatementForm = ({ formState, material, onSuccess, cancelUrl }: Props) => {
   const { selectOptions, loading: isWitnessesLoading } = useCaseWitnesses();
   const {
     data: witnessStatements,
     loading: isWitnessStatementsLoading,
-    setWitnessId
+    setWitnessId,
   } = useWitnessStatements();
 
   const matchedStatement = witnessStatements.find(
-    (statement) => statement.id === material.materialId
+    (statement) => statement.id === material.materialId,
   );
 
   const defaultStatementNumber = matchedStatement
@@ -51,21 +40,18 @@ export const EditStatementForm = ({
     control,
     handleSubmit,
     formState: { errors },
-    watch
+    watch,
   } = useForm<EditStatementType>({
     // @ts-expect-error fix type here
     resolver: zodResolver(EditStatementSchema),
     defaultValues: {
-      hasStatementDate: formState
-        ? formState?.hasStatementDate
-        : !!material?.recordedDate,
+      hasStatementDate: formState ? formState?.hasStatementDate : !!material?.recordedDate,
       materialId: material?.materialId,
-      statementDate:
-        formState?.statementDate || material?.recordedDate || undefined,
+      statementDate: formState?.statementDate || material?.recordedDate || undefined,
       statementNumber: formState?.statementNumber || undefined,
       used: formState ? formState.used : material?.status === 'Used',
-      witnessId: formState?.witnessId || material?.witnessId || undefined
-    }
+      witnessId: formState?.witnessId || material?.witnessId || undefined,
+    },
   });
 
   const fieldValues = watch();
@@ -122,12 +108,8 @@ export const EditStatementForm = ({
               label="Who is the witness?"
               error={errors?.witnessId?.message as string}
               options={[
-                {
-                  label: isWitnessesLoading ? 'Loading...' : 'Select witness',
-                  value: '',
-                  id: ''
-                },
-                ...selectOptions
+                { label: isWitnessesLoading ? 'Loading...' : 'Select witness', value: '', id: '' },
+                ...selectOptions,
               ]}
             />
           )}
@@ -139,18 +121,12 @@ export const EditStatementForm = ({
           render={({ field }) => (
             <Radios
               {...field}
-              value={
-                field.value !== undefined
-                  ? field.value
-                    ? 'true'
-                    : 'false'
-                  : undefined
-              }
+              value={field.value !== undefined ? (field.value ? 'true' : 'false') : undefined}
               id={field.name}
               legend="Does the statement have a date?"
               options={[
                 { id: 'true', value: 'true', label: 'Yes' },
-                { id: 'false', value: 'false', label: 'No' }
+                { id: 'false', value: 'false', label: 'No' },
               ]}
               required
               error={errors?.hasStatementDate?.message as string}
@@ -204,11 +180,7 @@ export const EditStatementForm = ({
         <UsedField control={control} errors={errors} />
 
         <div className="govuk-button-group">
-          <button
-            type="submit"
-            className="govuk-button"
-            data-module="govuk-button"
-          >
+          <button type="submit" className="govuk-button" data-module="govuk-button">
             Continue
           </button>
           <Link to={cancelUrl} className="govuk-link cancel-status-change">
diff --git a/materials_ui/src/components/forms/EditMaterial/Summary.tsx b/materials_ui/src/components/forms/EditMaterial/Summary.tsx
index e004e10b..416f1138 100644
--- a/materials_ui/src/components/forms/EditMaterial/Summary.tsx
+++ b/materials_ui/src/components/forms/EditMaterial/Summary.tsx
@@ -1,6 +1,6 @@
-import { type ContentItem, SummaryCard } from '../../SummaryCard/SummaryCard.tsx';
 import { Link } from 'react-router-dom';
 import { URL } from '../../../constants/url.ts';
+import { type ContentItem, SummaryCard } from '../../SummaryCard/SummaryCard.tsx';
 
 type Props = {
   onChange: () => void;
@@ -9,12 +9,7 @@ type Props = {
   title: string;
 };
 
-export const Summary = ({
-  onChange,
-  onSave,
-  summaryCardData,
-  title
-}: Props) => {
+export const Summary = ({ onChange, onSave, summaryCardData, title }: Props) => {
   const handleChangeClick = () => {
     onChange();
   };
@@ -27,18 +22,10 @@ export const Summary = ({
     <>
       <h1 className="govuk-heading-l">Check your answers</h1>
 
-      <SummaryCard
-        action={handleChangeClick}
-        title={title}
-        content={summaryCardData}
-      />
+      <SummaryCard action={handleChangeClick} title={title} content={summaryCardData} />
 
       <div className="govuk-button-group">
-        <button
-          className="govuk-button"
-          data-module="govuk-button"
-          onClick={handleSaveClick}
-        >
+        <button className="govuk-button" data-module="govuk-button" onClick={handleSaveClick}>
           Save
         </button>
         <Link to={URL.MATERIALS} className="govuk-link cancel-status-change">
diff --git a/materials_ui/src/components/forms/Reclassify/AddWitness.tsx b/materials_ui/src/components/forms/Reclassify/AddWitness.tsx
index 5bbe563e..8f7aa2c9 100644
--- a/materials_ui/src/components/forms/Reclassify/AddWitness.tsx
+++ b/materials_ui/src/components/forms/Reclassify/AddWitness.tsx
@@ -3,15 +3,15 @@ import dayjs from 'dayjs';
 import { Controller, useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 
-import { ErrorSummary, Radios, SelectList, TextArea, TextInput } from '../../index.ts';
 import { URL } from '../../../constants/url.ts';
 import { useCaseDefendants } from '../../../hooks/index.ts';
 import {
   Reclassify_WitnessAndActionPlanSchema,
-  type Reclassify_WitnessAndActionPlanType
+  type Reclassify_WitnessAndActionPlanType,
 } from '../../../schemas/forms/reclassify.ts';
 import { formatDateInputValue } from '../../../utils/date.ts';
 import type { ErrorSummaryItem } from '../../ErrorSummary/ErrorSummary.tsx';
+import { ErrorSummary, Radios, SelectList, TextArea, TextInput } from '../../index.ts';
 
 type Props = {
   data: Reclassify_WitnessAndActionPlanType;
@@ -24,11 +24,11 @@ export const AddWitness = ({ data, onSave }: Props) => {
     control,
     formState: { errors },
     handleSubmit,
-    watch
+    watch,
   } = useForm<Reclassify_WitnessAndActionPlanType>({
     defaultValues: data,
     // @ts-expect-error fix type
-    resolver: zodResolver(Reclassify_WitnessAndActionPlanSchema)
+    resolver: zodResolver(Reclassify_WitnessAndActionPlanSchema),
   });
 
   // format react-hook-form error object into array to be rendered by ErrorSummary
@@ -104,7 +104,7 @@ export const AddWitness = ({ data, onSave }: Props) => {
               legend="What do you want to request?"
               options={[
                 { id: 'KWD', value: 'KWD', label: 'Key witness details' },
-                { id: 'NKWD', value: 'NKWD', label: 'Non-key witness details' }
+                { id: 'NKWD', value: 'NKWD', label: 'Non-key witness details' },
               ]}
               required
               error={errors?.requestType?.message as string}
@@ -128,7 +128,7 @@ export const AddWitness = ({ data, onSave }: Props) => {
                 ...defendantSelectOptions,
                 ...(defendantSelectOptions?.length > 1
                   ? [{ label: 'All defendants', value: 0, id: 0 }]
-                  : [])
+                  : []),
               ]}
             />
           )}
@@ -174,18 +174,12 @@ export const AddWitness = ({ data, onSave }: Props) => {
           render={({ field }) => (
             <Radios
               {...field}
-              value={
-                field.value !== undefined
-                  ? field.value
-                    ? 'true'
-                    : 'false'
-                  : undefined
-              }
+              value={field.value !== undefined ? (field.value ? 'true' : 'false') : undefined}
               id={field.name}
               legend="Do you want to add a follow up?"
               options={[
                 { id: 'true', value: 'true', label: 'Yes' },
-                { id: 'false', value: 'false', label: 'No' }
+                { id: 'false', value: 'false', label: 'No' },
               ]}
               required
               error={errors?.followUp?.message as string}
@@ -220,11 +214,7 @@ export const AddWitness = ({ data, onSave }: Props) => {
         )}
 
         <div className="govuk-button-group">
-          <button
-            type="submit"
-            className="govuk-button"
-            data-module="govuk-button"
-          >
+          <button type="submit" className="govuk-button" data-module="govuk-button">
             Continue
           </button>
           <Link to={URL.MATERIALS} className="govuk-link cancel-status-change">
diff --git a/materials_ui/src/components/forms/Reclassify/Exhibit.tsx b/materials_ui/src/components/forms/Reclassify/Exhibit.tsx
index 5df8db94..3533ae05 100644
--- a/materials_ui/src/components/forms/Reclassify/Exhibit.tsx
+++ b/materials_ui/src/components/forms/Reclassify/Exhibit.tsx
@@ -15,10 +15,8 @@ type Props = {
 };
 
 export const Exhibit = ({ control, data, errors, currentMaterial }: Props) => {
-  const {
-    selectOptions: exhibitProducerOptions,
-    loading: isExhibitProducersLoading
-  } = useExhibitProducers();
+  const { selectOptions: exhibitProducerOptions, loading: isExhibitProducersLoading } =
+    useExhibitProducers();
 
   return (
     <>
@@ -43,11 +41,7 @@ export const Exhibit = ({ control, data, errors, currentMaterial }: Props) => {
         )}
       />
 
-      <SubjectField
-        control={control}
-        errors={errors}
-        label="Exhibit name (subject)"
-      />
+      <SubjectField control={control} errors={errors} label="Exhibit name (subject)" />
 
       <Controller
         control={control}
@@ -79,7 +73,7 @@ export const Exhibit = ({ control, data, errors, currentMaterial }: Props) => {
               ...(isExhibitProducersLoading
                 ? [{ label: 'Loading...', value: '', id: '' }]
                 : [{ label: 'Select producer or witness', value: '', id: '' }]),
-              ...exhibitProducerOptions
+              ...exhibitProducerOptions,
             ]}
           />
         )}
diff --git a/materials_ui/src/components/forms/Reclassify/MGForms.tsx b/materials_ui/src/components/forms/Reclassify/MGForms.tsx
index 24a4d713..a2632efe 100644
--- a/materials_ui/src/components/forms/Reclassify/MGForms.tsx
+++ b/materials_ui/src/components/forms/Reclassify/MGForms.tsx
@@ -5,11 +5,7 @@ import { DocumentTypeField } from './common/DocumentTypeField';
 import { SubjectField } from './common/SubjectField';
 import { UsedField } from './common/UsedField';
 
-type Props = {
-  control: Control;
-  errors?: FieldErrors;
-  currentMaterial: CaseMaterialsType;
-};
+type Props = { control: Control; errors?: FieldErrors; currentMaterial: CaseMaterialsType };
 
 export const MGForms = ({ control, errors, currentMaterial }: Props) => {
   return (
diff --git a/materials_ui/src/components/forms/Reclassify/MaterialName.tsx b/materials_ui/src/components/forms/Reclassify/MaterialName.tsx
index ec679bfc..16a3c8ef 100644
--- a/materials_ui/src/components/forms/Reclassify/MaterialName.tsx
+++ b/materials_ui/src/components/forms/Reclassify/MaterialName.tsx
@@ -6,24 +6,21 @@ import { ErrorSummary } from '../..';
 import { URL } from '../../../constants/url';
 import {
   Reclassify_MaterialNameFormSchema,
-  Reclassify_MaterialNameFormType
+  Reclassify_MaterialNameFormType,
 } from '../../../schemas/forms/reclassify';
 import type { ErrorSummaryItem } from '../../ErrorSummary/ErrorSummary';
 import { SubjectField } from './common/SubjectField';
 
-type Props = {
-  data: Record<string, unknown>;
-  onSave: (data: Record<string, unknown>) => void;
-};
+type Props = { data: Record<string, unknown>; onSave: (data: Record<string, unknown>) => void };
 
 export const MaterialName = ({ data, onSave }: Props) => {
   const {
     control,
     formState: { errors },
-    handleSubmit
+    handleSubmit,
   } = useForm<Reclassify_MaterialNameFormType>({
     defaultValues: data,
-    resolver: zodResolver(Reclassify_MaterialNameFormSchema)
+    resolver: zodResolver(Reclassify_MaterialNameFormSchema),
   });
 
   // format react-hook-form error object into array to be rendered by ErrorSummary
@@ -52,11 +49,7 @@ export const MaterialName = ({ data, onSave }: Props) => {
         <SubjectField control={control} errors={errors} />
 
         <div className="govuk-button-group">
-          <button
-            type="submit"
-            className="govuk-button"
-            data-module="govuk-button"
-          >
+          <button type="submit" className="govuk-button" data-module="govuk-button">
             Continue
           </button>
           <Link to={URL.MATERIALS} className="govuk-link cancel-status-change">
diff --git a/materials_ui/src/components/forms/Reclassify/Other.tsx b/materials_ui/src/components/forms/Reclassify/Other.tsx
index ecf3bd28..6cbc9cc6 100644
--- a/materials_ui/src/components/forms/Reclassify/Other.tsx
+++ b/materials_ui/src/components/forms/Reclassify/Other.tsx
@@ -5,11 +5,7 @@ import { DocumentTypeField } from './common/DocumentTypeField';
 import { SubjectField } from './common/SubjectField';
 import { UsedField } from './common/UsedField';
 
-type Props = {
-  control: Control;
-  errors?: FieldErrors;
-  currentMaterial: CaseMaterialsType;
-};
+type Props = { control: Control; errors?: FieldErrors; currentMaterial: CaseMaterialsType };
 
 export const Other = ({ control, errors, currentMaterial }: Props) => {
   return (
diff --git a/materials_ui/src/components/forms/Reclassify/Statement.tsx b/materials_ui/src/components/forms/Reclassify/Statement.tsx
index a382b0eb..ed1aa851 100644
--- a/materials_ui/src/components/forms/Reclassify/Statement.tsx
+++ b/materials_ui/src/components/forms/Reclassify/Statement.tsx
@@ -5,15 +5,10 @@ import type { ReclassifyFormData } from '../../../hooks';
 import { useCaseWitnesses, useWitnessStatements } from '../../../hooks';
 import { UsedField } from './common/UsedField';
 
-type Props = {
-  control: Control;
-  errors?: FieldErrors;
-  data?: ReclassifyFormData;
-};
+type Props = { control: Control; errors?: FieldErrors; data?: ReclassifyFormData };
 
 export const Statement = ({ control, data, errors }: Props) => {
-  const { selectOptions: witnessOptions, loading: isWitnessesLoading } =
-    useCaseWitnesses();
+  const { selectOptions: witnessOptions, loading: isWitnessesLoading } = useCaseWitnesses();
   const { data: witnessStatements, setWitnessId } = useWitnessStatements();
 
   if (data?.classification !== 'STATEMENT') {
@@ -65,20 +60,14 @@ export const Statement = ({ control, data, errors }: Props) => {
                 ? [{ label: 'Loading...', value: '', id: '' }]
                 : [{ label: 'Select witness', value: '', id: '' }]),
               ...witnessOptions,
-              {
-                label: 'Witness not on the list - add witness',
-                value: '0',
-                id: '0'
-              }
+              { label: 'Witness not on the list - add witness', value: '0', id: '0' },
             ]}
           />
         )}
       />
       {data?.witnessId === 0 && (
         <p style={{ margin: '-20px 0 20px' }}>
-          <strong>
-            You will be asked to add a new witness on the next page.
-          </strong>
+          <strong>You will be asked to add a new witness on the next page.</strong>
         </p>
       )}
 
@@ -88,18 +77,12 @@ export const Statement = ({ control, data, errors }: Props) => {
         render={({ field }) => (
           <Radios
             {...field}
-            value={
-              field.value !== undefined
-                ? field.value
-                  ? 'true'
-                  : 'false'
-                : undefined
-            }
+            value={field.value !== undefined ? (field.value ? 'true' : 'false') : undefined}
             id={field.name}
             legend="Does the statement have a date?"
             options={[
               { id: 'true', value: 'true', label: 'Yes' },
-              { id: 'false', value: 'false', label: 'No' }
+              { id: 'false', value: 'false', label: 'No' },
             ]}
             required
             error={errors?.hasStatementDate?.message as string}
diff --git a/materials_ui/src/components/forms/Reclassify/Summary.tsx b/materials_ui/src/components/forms/Reclassify/Summary.tsx
index 9b5fcfbe..779c8c98 100644
--- a/materials_ui/src/components/forms/Reclassify/Summary.tsx
+++ b/materials_ui/src/components/forms/Reclassify/Summary.tsx
@@ -8,7 +8,7 @@ import {
   useCaseDefendants,
   useCaseWitnesses,
   useDocumentTypes,
-  useExhibitProducers
+  useExhibitProducers,
 } from '../../../hooks';
 import type { Reclassify_ClassificationForm } from '../../../schemas/forms/reclassify';
 import { formatDate } from '../../../utils/date';
@@ -43,7 +43,7 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
   const documentType = getDocumentTypeById(data?.documentType as number);
   const usedStatus = data?.used ? 'Used' : 'Unused';
   const classification = mapBEClassificationToFE(
-    data?.classification as Reclassify_ClassificationForm['classification']
+    data?.classification as Reclassify_ClassificationForm['classification'],
   );
   const witnessName =
     data?.classification === 'STATEMENT'
@@ -53,15 +53,11 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
     data?.classification === 'STATEMENT'
       ? data?.witnessActionPlan?.defendantId === 0
         ? 'All defendants'
-        : formatDefendantName(
-            getDefendantById(data?.witnessActionPlan?.defendantId as number)
-          )
+        : formatDefendantName(getDefendantById(data?.witnessActionPlan?.defendantId as number))
       : null;
 
   const exhibitProducer =
-    data?.classification === 'EXHIBIT'
-      ? getExhibitProducerById(data?.producerId)
-      : false;
+    data?.classification === 'EXHIBIT' ? getExhibitProducerById(data?.producerId) : false;
 
   return (
     <>
@@ -77,8 +73,8 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
                 <br />
                 {documentType?.name}
               </>
-            )
-          }
+            ),
+          },
         ]}
       />
 
@@ -88,29 +84,21 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
             action={() => handleChangeClick('classification')}
             title={`${documentType?.name} details`}
             content={[
-              {
-                key: 'Who is the Witness',
-                value: witnessName || 'New witness (see below)'
-              },
+              { key: 'Who is the Witness', value: witnessName || 'New witness (see below)' },
               {
                 key: 'Does the statement have a date?',
-                value: data?.hasStatementDate ? 'Yes' : 'No'
+                value: data?.hasStatementDate ? 'Yes' : 'No',
               },
               ...(data?.hasStatementDate
                 ? [
                     {
                       key: 'What is the statement date?',
-                      value: data?.statementDate
-                        ? formatDate(data?.statementDate)
-                        : ''
-                    }
+                      value: data?.statementDate ? formatDate(data?.statementDate) : '',
+                    },
                   ]
                 : []),
-              {
-                key: 'Statement number',
-                value: data?.statementNumber as number
-              },
-              { key: 'What is the material status?', value: usedStatus }
+              { key: 'Statement number', value: data?.statementNumber as number },
+              { key: 'What is the material status?', value: usedStatus },
             ]}
           />
 
@@ -121,41 +109,29 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
               content={[
                 { key: 'Name', value: data?.witnessActionPlan?.firstName },
                 { key: 'Surname', value: data?.witnessActionPlan?.surname },
-                {
-                  key: 'Contested issue',
-                  value: data?.witnessActionPlan?.actionPointText
-                },
+                { key: 'Contested issue', value: data?.witnessActionPlan?.actionPointText },
                 {
                   key: 'What do you want to request',
                   value:
                     data?.witnessActionPlan?.requestType === 'KWD'
                       ? 'Key witness details'
-                      : 'Non-key witness details'
-                },
-                {
-                  key: 'Select the defendant the action plan relates to',
-                  value: defendantName
-                },
-                {
-                  key: 'Describe the action plan',
-                  value: data?.witnessActionPlan?.actionPlan
-                },
-                {
-                  key: 'Date needed',
-                  value: formatDate(data?.witnessActionPlan?.dateNeeded)
+                      : 'Non-key witness details',
                 },
+                { key: 'Select the defendant the action plan relates to', value: defendantName },
+                { key: 'Describe the action plan', value: data?.witnessActionPlan?.actionPlan },
+                { key: 'Date needed', value: formatDate(data?.witnessActionPlan?.dateNeeded) },
                 {
                   key: 'Do you want to add a follow up?',
-                  value: data?.witnessActionPlan?.followUp ? 'Yes' : 'No'
+                  value: data?.witnessActionPlan?.followUp ? 'Yes' : 'No',
                 },
                 ...(data?.witnessActionPlan?.followUp
                   ? [
                       {
                         key: 'Follow up date',
-                        value: formatDate(data?.witnessActionPlan?.followUpDate)
-                      }
+                        value: formatDate(data?.witnessActionPlan?.followUpDate),
+                      },
                     ]
-                  : [])
+                  : []),
               ]}
             />
           )}
@@ -177,13 +153,11 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
                 ? [
                     {
                       key: 'Exhibit producer',
-                      value: exhibitProducer
-                        ? exhibitProducer?.producer
-                        : data?.producedBy
-                    }
+                      value: exhibitProducer ? exhibitProducer?.producer : data?.producedBy,
+                    },
                   ]
                 : []),
-              { key: 'What is the material status?', value: usedStatus }
+              { key: 'What is the material status?', value: usedStatus },
             ]}
           />
         </>
@@ -192,24 +166,18 @@ export const Summary = ({ data, onChange, onSave }: Props) => {
       {['MG Form', 'OTHER'].includes(data.classification as string) && (
         <SummaryCard
           action={() =>
-            handleChangeClick(
-              data.classification === 'STATEMENT' ? 'subject' : 'classification'
-            )
+            handleChangeClick(data.classification === 'STATEMENT' ? 'subject' : 'classification')
           }
           title={`${documentType?.name} details`}
           content={[
             { key: 'Material name', value: data?.subject },
-            { key: 'What is the material status?', value: usedStatus }
+            { key: 'What is the material status?', value: usedStatus },
           ]}
         />
       )}
 
       <div className="govuk-button-group">
-        <button
-          className="govuk-button"
-          data-module="govuk-button"
-          onClick={handleSaveClick}
-        >
+        <button className="govuk-button" data-module="govuk-button" onClick={handleSaveClick}>
           Save
         </button>
         <Link to={URL.MATERIALS} className="govuk-link cancel-status-change">
diff --git a/materials_ui/src/components/forms/Reclassify/common/DocumentTypeField.tsx b/materials_ui/src/components/forms/Reclassify/common/DocumentTypeField.tsx
index a0681486..0a0e0cc6 100644
--- a/materials_ui/src/components/forms/Reclassify/common/DocumentTypeField.tsx
+++ b/materials_ui/src/components/forms/Reclassify/common/DocumentTypeField.tsx
@@ -12,21 +12,16 @@ type Props = {
   excludedTypeIds: (string | number)[];
 };
 
-export const DocumentTypeField = ({
-  control,
-  errors,
-  type,
-  excludedTypeIds = []
-}: Props) => {
+export const DocumentTypeField = ({ control, errors, type, excludedTypeIds = [] }: Props) => {
   const { selectOptions } = useDocumentTypes();
 
   const filteredOptions = useMemo(
     () =>
       selectOptions(type).map((option) => ({
         ...option,
-        disabled: excludedTypeIds?.includes(option?.id)
+        disabled: excludedTypeIds?.includes(option?.id),
       })),
-    [excludedTypeIds, selectOptions, type]
+    [excludedTypeIds, selectOptions, type],
   );
 
   return (
@@ -40,10 +35,7 @@ export const DocumentTypeField = ({
           label="What is the material classification type?"
           error={errors?.documentType?.message as string}
           defaultValue={field?.value?.toString()}
-          options={[
-            { label: 'Select type', value: '', id: '' },
-            ...filteredOptions
-          ]}
+          options={[{ label: 'Select type', value: '', id: '' }, ...filteredOptions]}
           onChange={(value) => {
             field.onChange(value || undefined);
           }}
diff --git a/materials_ui/src/components/forms/Reclassify/common/SubjectField.tsx b/materials_ui/src/components/forms/Reclassify/common/SubjectField.tsx
index e88f5ed0..acb8b9a2 100644
--- a/materials_ui/src/components/forms/Reclassify/common/SubjectField.tsx
+++ b/materials_ui/src/components/forms/Reclassify/common/SubjectField.tsx
@@ -1,10 +1,4 @@
-import {
-  Control,
-  Controller,
-  FieldErrors,
-  FieldValues,
-  Path
-} from 'react-hook-form';
+import { Control, Controller, FieldErrors, FieldValues, Path } from 'react-hook-form';
 import { TextInput } from '../../..';
 
 type Props<T extends FieldValues> = {
@@ -18,7 +12,7 @@ export const SubjectField = <T extends FieldValues>({
   control,
   defaultValue,
   errors,
-  label
+  label,
 }: Props<T>) => {
   return (
     <Controller
diff --git a/materials_ui/src/components/forms/Reclassify/common/UsedField.tsx b/materials_ui/src/components/forms/Reclassify/common/UsedField.tsx
index 59675986..e8fbce9d 100644
--- a/materials_ui/src/components/forms/Reclassify/common/UsedField.tsx
+++ b/materials_ui/src/components/forms/Reclassify/common/UsedField.tsx
@@ -13,13 +13,7 @@ export const UsedField = ({ control, errors }: Props) => {
       render={({ field }) => (
         <Radios
           {...field}
-          value={
-            field.value !== undefined
-              ? field.value
-                ? 'true'
-                : 'false'
-              : undefined
-          }
+          value={field.value !== undefined ? (field.value ? 'true' : 'false') : undefined}
           id={field.name}
           legend="What is the material status?"
           options={usedOptions}
diff --git a/materials_ui/src/components/forms/Reclassify/constants/options.tsx b/materials_ui/src/components/forms/Reclassify/constants/options.tsx
index 5806683d..4de5996e 100644
--- a/materials_ui/src/components/forms/Reclassify/constants/options.tsx
+++ b/materials_ui/src/components/forms/Reclassify/constants/options.tsx
@@ -9,7 +9,7 @@ export const categoryOptions = (
   control: Control,
   data: Record<string, unknown>,
   errors: FieldErrors,
-  caseMaterial: CaseMaterialsType
+  caseMaterial: CaseMaterialsType,
 ): RadioOption[] => [
   {
     label: 'Statement (MG11)',
@@ -18,49 +18,32 @@ export const categoryOptions = (
     // prevent user trying to reclassify a statement to a statement
     disabled: caseMaterial.category === 'Statement',
     conditionalField: (
-      <Statement
-        control={control}
-        errors={errors}
-        data={data as ReclassifyFormData}
-      />
-    )
+      <Statement control={control} errors={errors} data={data as ReclassifyFormData} />
+    ),
   },
   {
     label: 'Exhibit',
     value: 'EXHIBIT',
     id: 'exhibit',
     conditionalField: (
-      <Exhibit
-        control={control}
-        data={data}
-        errors={errors}
-        currentMaterial={caseMaterial}
-      />
-    )
+      <Exhibit control={control} data={data} errors={errors} currentMaterial={caseMaterial} />
+    ),
   },
   {
     label: 'MG Forms',
     value: 'MG Form',
     id: 'mgForm',
-    conditionalField: (
-      <MGForms
-        control={control}
-        errors={errors}
-        currentMaterial={caseMaterial}
-      />
-    )
+    conditionalField: <MGForms control={control} errors={errors} currentMaterial={caseMaterial} />,
   },
   {
     label: 'Other',
     value: 'OTHER',
     id: 'other',
-    conditionalField: (
-      <Other control={control} errors={errors} currentMaterial={caseMaterial} />
-    )
-  }
+    conditionalField: <Other control={control} errors={errors} currentMaterial={caseMaterial} />,
+  },
 ];
 
 export const usedOptions: RadioOption[] = [
   { label: 'Used', value: 'true', id: 'used' },
-  { label: 'Unused', value: 'false', id: 'unused' }
+  { label: 'Unused', value: 'false', id: 'unused' },
 ];
diff --git a/materials_ui/src/components/forms/Reclassify/constants/string.ts b/materials_ui/src/components/forms/Reclassify/constants/string.ts
index fbb37008..469b9dc2 100644
--- a/materials_ui/src/components/forms/Reclassify/constants/string.ts
+++ b/materials_ui/src/components/forms/Reclassify/constants/string.ts
@@ -3,15 +3,10 @@ import { Reclassify_ClassificationForm } from '../../../../schemas/forms/reclass
 const BE_TO_FE_CLASSIFICATIONS_MAP: Record<
   Reclassify_ClassificationForm['classification'],
   string
-> = {
-  STATEMENT: 'Statement',
-  EXHIBIT: 'Exhibit',
-  'MG Form': 'MG Forms',
-  OTHER: 'Other'
-};
+> = { STATEMENT: 'Statement', EXHIBIT: 'Exhibit', 'MG Form': 'MG Forms', OTHER: 'Other' };
 
 export const mapBEClassificationToFE = (
-  classification: Reclassify_ClassificationForm['classification']
+  classification: Reclassify_ClassificationForm['classification'],
 ) => {
   return BE_TO_FE_CLASSIFICATIONS_MAP[classification];
 };
diff --git a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyExhibit.ts b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyExhibit.ts
index aebb9c8c..6282cb2b 100644
--- a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyExhibit.ts
+++ b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyExhibit.ts
@@ -3,7 +3,7 @@ import type { Reclassify_Orchestrated_Request_Type } from '../../../../schemas/f
 
 export const mapReclassifyExhibit = (
   data: ReclassifyFormData,
-  urn: string
+  urn: string,
 ): Reclassify_Orchestrated_Request_Type => {
   if (data.classification !== 'EXHIBIT') {
     throw new Error('Not a valid classification');
@@ -19,13 +19,9 @@ export const mapReclassifyExhibit = (
       exhibit: {
         item: data?.item,
         reference: data?.referenceNumber,
-        ...(data?.producerId
-          ? { existingproducerOrWitnessId: data?.producerId as number }
-          : {}),
-        ...(data?.producedBy
-          ? { Producer: data?.producedBy, newProducer: data?.producedBy }
-          : {})
-      }
-    }
+        ...(data?.producerId ? { existingproducerOrWitnessId: data?.producerId as number } : {}),
+        ...(data?.producedBy ? { Producer: data?.producedBy, newProducer: data?.producedBy } : {}),
+      },
+    },
   };
 };
diff --git a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyMGForm.ts b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyMGForm.ts
index ffc87fbb..8b802178 100644
--- a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyMGForm.ts
+++ b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyMGForm.ts
@@ -3,7 +3,7 @@ import type { Reclassify_Orchestrated_Request_Type } from '../../../../schemas/f
 
 export const mapReclassifyMGForm = (
   data: ReclassifyFormData,
-  urn: string
+  urn: string,
 ): Reclassify_Orchestrated_Request_Type => {
   if (data.classification !== 'MG Form') {
     throw new Error('Not a valid classification');
@@ -15,7 +15,7 @@ export const mapReclassifyMGForm = (
       classification: 'OTHER',
       documentTypeId: data?.documentType,
       subject: data?.subject,
-      used: data?.used
-    }
+      used: data?.used,
+    },
   };
 };
diff --git a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyOther.ts b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyOther.ts
index 99510ed9..35d40b64 100644
--- a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyOther.ts
+++ b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyOther.ts
@@ -3,7 +3,7 @@ import type { Reclassify_Orchestrated_Request_Type } from '../../../../schemas/f
 
 export const mapReclassifyOther = (
   data: ReclassifyFormData,
-  urn: string
+  urn: string,
 ): Reclassify_Orchestrated_Request_Type => {
   if (data.classification !== 'OTHER') {
     throw new Error('Not a valid classification');
@@ -15,7 +15,7 @@ export const mapReclassifyOther = (
       classification: 'OTHER',
       documentTypeId: data?.documentType,
       subject: data?.subject,
-      used: data?.used
-    }
+      used: data?.used,
+    },
   };
 };
diff --git a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyStatement.ts b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyStatement.ts
index b195ef89..a716b261 100644
--- a/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyStatement.ts
+++ b/materials_ui/src/components/forms/Reclassify/mappers/mapReclassifyStatement.ts
@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import type { ReclassifyFormData } from '../../../../hooks';
 import {
   type Reclassify_Orchestrated_Request_Type,
-  Reclassify_RequestTypeEnum
+  Reclassify_RequestTypeEnum,
 } from '../../../../schemas/forms/reclassify';
 import { formatDateInputValue } from '../../../../utils/date';
 
@@ -11,7 +11,7 @@ const dateFormat = 'YYYY-MM-DD';
 
 export const mapReclassifyStatement = (
   data: ReclassifyFormData,
-  urn: string
+  urn: string,
 ): Reclassify_Orchestrated_Request_Type => {
   if (data.classification !== 'STATEMENT') {
     throw new Error('Not a valid classification');
@@ -46,8 +46,8 @@ export const mapReclassifyStatement = (
               description: 'Key Witness Details',
               text: '',
               hidden: false,
-              hiddenDraft: false
-            }
+              hiddenDraft: false,
+            },
           ]
         : [
             {
@@ -55,10 +55,10 @@ export const mapReclassifyStatement = (
               description: 'Non-Key Witness Details',
               text: '',
               hidden: false,
-              hiddenDraft: false
-            }
-          ])
-    ]
+              hiddenDraft: false,
+            },
+          ]),
+    ],
   };
 
   const witness: Reclassify_Orchestrated_Request_Type['witness'] = {
@@ -66,8 +66,8 @@ export const mapReclassifyStatement = (
       ? { witnessId: data?.witnessId }
       : {
           firstName: witnessActionPlan?.firstName || '',
-          surname: witnessActionPlan?.surname || ''
-        })
+          surname: witnessActionPlan?.surname || '',
+        }),
   };
 
   return {
@@ -79,12 +79,10 @@ export const mapReclassifyStatement = (
       used: data?.used,
       statement: {
         statementNo: data?.statementNumber,
-        ...(data?.hasStatementDate
-          ? { date: formatDateInputValue(data?.statementDate) }
-          : {})
-      }
+        ...(data?.hasStatementDate ? { date: formatDateInputValue(data?.statementDate) } : {}),
+      },
     },
     witness,
-    ...(hasActionPlan ? { actionPlan: actionPlanData } : {})
+    ...(hasActionPlan ? { actionPlan: actionPlanData } : {}),
   };
 };
diff --git a/materials_ui/src/components/forms/Reclassify/utils/form.ts b/materials_ui/src/components/forms/Reclassify/utils/form.ts
index 9f669502..74c9f75d 100644
--- a/materials_ui/src/components/forms/Reclassify/utils/form.ts
+++ b/materials_ui/src/components/forms/Reclassify/utils/form.ts
@@ -2,7 +2,7 @@ export const generateMaterialName = (
   documentType: string,
   firstName: string,
   surname: string,
-  date?: string
+  date?: string,
 ) => {
   return `${documentType} ${surname.toUpperCase()} ${firstName}${date ? ' ' + date : ''}`;
 };
diff --git a/materials_ui/src/constants/categoryList.ts b/materials_ui/src/constants/categoryList.ts
index 8fcf8e7b..e366639a 100644
--- a/materials_ui/src/constants/categoryList.ts
+++ b/materials_ui/src/constants/categoryList.ts
@@ -4,7 +4,7 @@ export const materialsCategoryList = [
   { value: 'MG Form', label: 'MG forms' },
   { value: 'Other Material', label: 'Other material' },
   { value: 'Defendant Pre Cons', label: 'Defendant pre-cons' },
-  { value: 'Unused Material', label: 'Unused material' }
+  { value: 'Unused Material', label: 'Unused material' },
 ] as const;
 
 export const communicationsCategoryList = [
@@ -13,7 +13,7 @@ export const communicationsCategoryList = [
   'Email',
   'Item',
   'Meeting',
-  'Telephone call'
+  'Telephone call',
 ];
 
 export const communicationsWithList = [
@@ -23,7 +23,7 @@ export const communicationsWithList = [
   'Defence',
   'Police',
   'WCU',
-  'Other'
+  'Other',
 ];
 
 export const typeList = [
@@ -36,5 +36,5 @@ export const typeList = [
   'Forwarded Internal Email',
   'Correspondence',
   'Other Communication',
-  'Service of ABE'
+  'Service of ABE',
 ];
diff --git a/materials_ui/src/constants/chargeStatus.ts b/materials_ui/src/constants/chargeStatus.ts
index dca7e6d2..201b641c 100644
--- a/materials_ui/src/constants/chargeStatus.ts
+++ b/materials_ui/src/constants/chargeStatus.ts
@@ -1,9 +1,9 @@
 export enum ChargeStatusCode {
   PreCharge = 1,
-  PostCharge = 2
+  PostCharge = 2,
 }
 
 export const CHARGE_STATUS_SELECT_OPTIONS = [
   { id: String(ChargeStatusCode.PreCharge), name: 'Pre-charge' },
-  { id: String(ChargeStatusCode.PostCharge), name: 'Post-charge' }
+  { id: String(ChargeStatusCode.PostCharge), name: 'Post-charge' },
 ];
diff --git a/materials_ui/src/constants/discard.ts b/materials_ui/src/constants/discard.ts
index f7ddb643..3d42a892 100644
--- a/materials_ui/src/constants/discard.ts
+++ b/materials_ui/src/constants/discard.ts
@@ -4,5 +4,5 @@ export const DISCARD_MATERIAL_OPTIONS = [
   { label: 'Duplicate', value: 'DUP' },
   { label: 'Illegible', value: 'ILG' },
   { label: 'Replaced', value: 'REP' },
-  { label: 'Superfluous', value: 'SUP' }
+  { label: 'Superfluous', value: 'SUP' },
 ];
diff --git a/materials_ui/src/constants/enum.ts b/materials_ui/src/constants/enum.ts
index 7123bed8..2b994b8c 100644
--- a/materials_ui/src/constants/enum.ts
+++ b/materials_ui/src/constants/enum.ts
@@ -1,11 +1,11 @@
 export enum PcdReviewCoreType {
   EarlyAdvice = 0,
   InitialReview = 1,
-  PreChargeDecisionAnalysis = 2
+  PreChargeDecisionAnalysis = 2,
 }
 
 export const PcdReviewTypeLabel: Record<PcdReviewCoreType, string> = {
   [PcdReviewCoreType.EarlyAdvice]: 'Early Advice',
   [PcdReviewCoreType.InitialReview]: 'Initial Review',
-  [PcdReviewCoreType.PreChargeDecisionAnalysis]: 'Further Review'
+  [PcdReviewCoreType.PreChargeDecisionAnalysis]: 'Further Review',
 };
diff --git a/materials_ui/src/constants/featureFlagGroups.ts b/materials_ui/src/constants/featureFlagGroups.ts
index bf5269ca..0bf22be7 100644
--- a/materials_ui/src/constants/featureFlagGroups.ts
+++ b/materials_ui/src/constants/featureFlagGroups.ts
@@ -3,5 +3,5 @@ export const PRIVATE_BETA_FEATURE_USER_GROUPS: Record<string, string> = {
   2: '1663cea9-062e-4f6e-a7ac-26f0942724f3', // group 2
   3: '870b7ef9-5937-4eb6-9ea0-98158f522ed7', // group 3 (stale)
   4: '4e8b4cd0-5794-4dd8-a5a9-3bf6c19efb17', // group 4 (stale)
-  5: 'bc71fb89-46f2-4b85-8cfc-9aaea49e0e5a' // group 5 (stale)
+  5: 'bc71fb89-46f2-4b85-8cfc-9aaea49e0e5a', // group 5 (stale)
 };
diff --git a/materials_ui/src/constants/query.ts b/materials_ui/src/constants/query.ts
index 5ebcf983..9be4111c 100644
--- a/materials_ui/src/constants/query.ts
+++ b/materials_ui/src/constants/query.ts
@@ -26,7 +26,7 @@ export const QUERY_KEYS = {
   DOCUMENT_SEARCH: 'documentSearch',
   GET_ALL_DOCUMENTS: 'getAllDocuments',
   UPDATE_STATEMENT: 'updateStatement',
-  UPDATE_EXHIBIT: 'updateExhibit'
+  UPDATE_EXHIBIT: 'updateExhibit',
 };
 
 export const DEFAULT_RESULTS_PER_PAGE = 20;
diff --git a/materials_ui/src/constants/url.ts b/materials_ui/src/constants/url.ts
index 2d025998..0faca3a0 100644
--- a/materials_ui/src/constants/url.ts
+++ b/materials_ui/src/constants/url.ts
@@ -15,7 +15,7 @@ export const URL = {
   COMMUNICATIONS: '/communications',
   ERROR: '/error',
   PCD_REVIEW: '/pcd-review',
-  PCD_REVIEW_DETAILS: '/pcd-review:pcdId'
+  PCD_REVIEW_DETAILS: '/pcd-review:pcdId',
 };
 
 export const APP_DEFAULT_PAGE = URL.ROOT;
@@ -50,8 +50,7 @@ export const API_ENDPOINTS = {
   RECLASSIFY: '/material/{materialId}/reclassify-complete',
   EXHIBIT_PRODUCERS: '/exhibit-producers',
   CREATE_WITNESS: '/case-witnesses',
-  CREATE_ACTION_PLAN: '/action-plan'
+  CREATE_ACTION_PLAN: '/action-plan',
 };
 
-export const AUTH_REDIRECT_URL =
-  '{apiUrl}/init?caseId={caseId}&screen={screenPath}';
+export const AUTH_REDIRECT_URL = '{apiUrl}/init?caseId={caseId}&screen={screenPath}';
diff --git a/materials_ui/src/context/AppContext.tsx b/materials_ui/src/context/AppContext.tsx
index e3cba2cf..b7a7d0fb 100644
--- a/materials_ui/src/context/AppContext.tsx
+++ b/materials_ui/src/context/AppContext.tsx
@@ -16,7 +16,7 @@ export const AppContext = createContext<AppContextTypeWithSetter>({
   wmReturnUrl: null,
   removeBanner: () => null,
   setBannerState: () => null,
-  setWmTriageUrl: () => null
+  setWmTriageUrl: () => null,
 });
 
 export const AppContextProvider = ({ children }: PropsWithChildren) => {
@@ -36,9 +36,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
   };
 
   const removeBanner = (bannerIdentifier: string) => {
-    setBanner(
-      banners.filter((banner) => banner.identifier !== bannerIdentifier)
-    );
+    setBanner(banners.filter((banner) => banner.identifier !== bannerIdentifier));
   };
 
   const setWmTriageUrl = (url?: string | null) => {
@@ -47,14 +45,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 
   return (
     <AppContext.Provider
-      value={{
-        banners,
-        clearBanners,
-        wmReturnUrl,
-        removeBanner,
-        setBannerState,
-        setWmTriageUrl
-      }}
+      value={{ banners, clearBanners, wmReturnUrl, removeBanner, setBannerState, setWmTriageUrl }}
     >
       {children}
     </AppContext.Provider>
diff --git a/materials_ui/src/context/FiltersContext/helpers/utils.ts b/materials_ui/src/context/FiltersContext/helpers/utils.ts
index 4eed3107..e9ae0734 100644
--- a/materials_ui/src/context/FiltersContext/helpers/utils.ts
+++ b/materials_ui/src/context/FiltersContext/helpers/utils.ts
@@ -4,36 +4,32 @@ export const getDefaultState = (defaultFilters?: FilterItem): FilterItem => {
   return {
     filters: { ...(defaultFilters ? defaultFilters?.filters : {}) },
     search: '',
-    sort: { ...(defaultFilters?.sort || { column: null, direction: null }) }
+    sort: { ...(defaultFilters?.sort || { column: null, direction: null }) },
   };
 };
 
 // updates a FilterItem with new sort criteria
-export const setSort = (
-  column: string | null,
-  direction: SortBy
-): FilterItem['sort'] => ({ column, direction });
+export const setSort = (column: string | null, direction: SortBy): FilterItem['sort'] => ({
+  column,
+  direction,
+});
 
 // updates a FilterItem with new filter criteria
 export const setFilter = (
   currentFilters: FilterItem['filters'],
   fieldGroup: string,
   name: string,
-  checked: boolean
+  checked: boolean,
 ): FilterItem['filters'] => {
   // if this filter hasn't been checked, create it if checked
-  if (
-    !Object.prototype.hasOwnProperty.call(currentFilters, fieldGroup) &&
-    checked
-  ) {
+  if (!Object.prototype.hasOwnProperty.call(currentFilters, fieldGroup) && checked) {
     return { ...currentFilters, [fieldGroup]: [name] };
   }
 
   const newFilterValues = checked
     ? [...(currentFilters?.[fieldGroup] || []), name]
-    : currentFilters?.[fieldGroup]?.filter(
-        (existingFilterName) => existingFilterName !== name
-      ) || [];
+    : currentFilters?.[fieldGroup]?.filter((existingFilterName) => existingFilterName !== name) ||
+      [];
 
   if (!newFilterValues?.length) {
     delete currentFilters?.[fieldGroup];
diff --git a/materials_ui/src/context/FiltersContext/index.tsx b/materials_ui/src/context/FiltersContext/index.tsx
index 8c196e89..26a4a58b 100644
--- a/materials_ui/src/context/FiltersContext/index.tsx
+++ b/materials_ui/src/context/FiltersContext/index.tsx
@@ -1,10 +1,6 @@
 import { createContext, PropsWithChildren, useState } from 'react';
 
-import type {
-  FilterItem,
-  FilterKeys,
-  FiltersContextState
-} from './helpers/types';
+import type { FilterItem, FilterKeys, FiltersContextState } from './helpers/types';
 import { getDefaultState } from './helpers/utils';
 
 // DATA STRUCTURE
@@ -18,14 +14,8 @@ import { getDefaultState } from './helpers/utils';
 
 export type FiltersContext = {
   filters: FiltersContextState;
-  createFilterContext: (
-    filterSet: FilterKeys,
-    defaultState?: FilterItem
-  ) => void;
-  updateFilterContext: (
-    filterSet: FilterKeys,
-    newFilterSet: FilterItem
-  ) => void;
+  createFilterContext: (filterSet: FilterKeys, defaultState?: FilterItem) => void;
+  updateFilterContext: (filterSet: FilterKeys, newFilterSet: FilterItem) => void;
   resetFilterContext: (filterSet: FilterKeys) => void;
   resetAllFilters: () => void;
 };
@@ -41,34 +31,25 @@ export const FilterContext = createContext<FiltersContext>({
 export const FilterProvider = ({ children }: PropsWithChildren) => {
   const [filters, setFilters] = useState<FiltersContextState>({});
 
-  const createFilterContext = (
-    filterSet: string,
-    defaultState?: FilterItem
-  ) => {
-    setFilters((prev) => ({
-      ...prev,
-      [filterSet]: getDefaultState(defaultState)
-    }));
+  const createFilterContext = (filterSet: string, defaultState?: FilterItem) => {
+    setFilters((prev) => ({ ...prev, [filterSet]: getDefaultState(defaultState) }));
   };
 
-  const updateFilterContext = (
-    filterSet: FilterKeys,
-    newFilterSet: FilterItem
-  ) => {
+  const updateFilterContext = (filterSet: FilterKeys, newFilterSet: FilterItem) => {
     setFilters((prev) => ({
       ...prev,
       [filterSet]: {
         filters: { ...(newFilterSet.filters ?? {}) },
         search: newFilterSet.search ?? '',
-        sort: newFilterSet.sort ?? prev[filterSet]?.sort
-      }
+        sort: newFilterSet.sort ?? prev[filterSet]?.sort,
+      },
     }));
   };
 
   const resetFilterContext = (filterSet: FilterKeys) => {
     setFilters((prev) => ({
       ...prev,
-      [filterSet]: { sort: prev[filterSet]?.sort, filters: {}, search: '' }
+      [filterSet]: { sort: prev[filterSet]?.sort, filters: {}, search: '' },
     }));
   };
 
@@ -81,7 +62,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         resetAllFilters,
         createFilterContext,
         resetFilterContext,
-        updateFilterContext
+        updateFilterContext,
       }}
     >
       {children}
diff --git a/materials_ui/src/context/GroupContext.tsx b/materials_ui/src/context/GroupContext.tsx
index 852706cb..023c58a6 100644
--- a/materials_ui/src/context/GroupContext.tsx
+++ b/materials_ui/src/context/GroupContext.tsx
@@ -11,9 +11,7 @@ export type GroupContextType = {
   hasAppAccess: () => boolean;
 };
 
-export const GroupDataContext = createContext<GroupContextType>(
-  {} as GroupContextType
-);
+export const GroupDataContext = createContext<GroupContextType>({} as GroupContextType);
 
 export const GroupDataProvider = ({ children }: PropsWithChildren) => {
   const [groups, setGroups] = useState<UserGroupType[]>(() => {
diff --git a/materials_ui/src/hooks/case-materials/useAutoReclassify.ts b/materials_ui/src/hooks/case-materials/useAutoReclassify.ts
index 4ff4a5e8..d82fef14 100644
--- a/materials_ui/src/hooks/case-materials/useAutoReclassify.ts
+++ b/materials_ui/src/hooks/case-materials/useAutoReclassify.ts
@@ -17,7 +17,7 @@ export const useAutoReclassify = (options?: UseAutoReclassifyProps) => {
 
   const postAutoReclassify = () =>
     request.post<AutoReclassifyResponseType>(
-      `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/uma-reclassify`
+      `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/uma-reclassify`,
     );
 
   const { trigger, isMutating, error } = useSWRMutation(
@@ -33,8 +33,8 @@ export const useAutoReclassify = (options?: UseAutoReclassifyProps) => {
         if (options?.onError) {
           options.onError(error);
         }
-      }
-    }
+      },
+    },
   );
 
   return { isPending: isMutating, error, mutate: trigger };
diff --git a/materials_ui/src/hooks/case-materials/useBulkSetUnused.ts b/materials_ui/src/hooks/case-materials/useBulkSetUnused.ts
index b8aaa3e2..2c0da72c 100644
--- a/materials_ui/src/hooks/case-materials/useBulkSetUnused.ts
+++ b/materials_ui/src/hooks/case-materials/useBulkSetUnused.ts
@@ -3,10 +3,7 @@ import useSWRMutation from 'swr/mutation';
 import { useBanner, useLogger, useRequest } from '..';
 import { QUERY_KEYS } from '../../constants/query';
 import { SwrPayload } from '../../schemas';
-import {
-  BulkSetUnusedRequestType,
-  BulkSetUnusedResponseType
-} from '../../schemas/bulkSetUnused';
+import { BulkSetUnusedRequestType, BulkSetUnusedResponseType } from '../../schemas/bulkSetUnused';
 import { useCaseInfoStore } from '../../stores';
 
 type UseBulkSetUnusedOptions = {
@@ -14,10 +11,7 @@ type UseBulkSetUnusedOptions = {
   onSuccess?: (response: { data: BulkSetUnusedResponseType }) => void;
 };
 
-export const useBulkSetUnused = ({
-  onError,
-  onSuccess
-}: UseBulkSetUnusedOptions) => {
+export const useBulkSetUnused = ({ onError, onSuccess }: UseBulkSetUnusedOptions) => {
   const request = useRequest();
   const { resetBanner } = useBanner();
   const { log } = useLogger();
@@ -25,14 +19,14 @@ export const useBulkSetUnused = ({
 
   const postBulkSetUnused = async (
     _url: string,
-    { arg: data }: SwrPayload<BulkSetUnusedRequestType>
+    { arg: data }: SwrPayload<BulkSetUnusedRequestType>,
   ) => {
     resetBanner();
 
     return request
       .post<BulkSetUnusedResponseType>(
         `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/bulk-set-unused`,
-        data
+        data,
       )
       .then((response) => response);
   };
@@ -49,11 +43,10 @@ export const useBulkSetUnused = ({
 
         log({
           logLevel: 3,
-          message:
-            'HK-UI-FE: Failed to update status to Unused for selected materials.'
+          message: 'HK-UI-FE: Failed to update status to Unused for selected materials.',
         });
-      }
-    }
+      },
+    },
   );
 
   return { trigger, isMutating, error, data };
diff --git a/materials_ui/src/hooks/case-materials/useCaseMaterial.ts b/materials_ui/src/hooks/case-materials/useCaseMaterial.ts
index cd613b21..d688a79f 100644
--- a/materials_ui/src/hooks/case-materials/useCaseMaterial.ts
+++ b/materials_ui/src/hooks/case-materials/useCaseMaterial.ts
@@ -4,9 +4,7 @@ import { SELECTED_MATERIAL_QUERY_PARAM } from '../../constants/materials';
 export const useCaseMaterial = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const newQueryCommands = new URLSearchParams(searchParams);
-  const selectedMaterialId = newQueryCommands.get(
-    SELECTED_MATERIAL_QUERY_PARAM
-  );
+  const selectedMaterialId = newQueryCommands.get(SELECTED_MATERIAL_QUERY_PARAM);
 
   const selectMaterial = (materialId: number) => {
     newQueryCommands.set(SELECTED_MATERIAL_QUERY_PARAM, materialId.toString());
diff --git a/materials_ui/src/hooks/case-materials/useCaseMaterials.ts b/materials_ui/src/hooks/case-materials/useCaseMaterials.ts
index a87b900f..d986c43b 100644
--- a/materials_ui/src/hooks/case-materials/useCaseMaterials.ts
+++ b/materials_ui/src/hooks/case-materials/useCaseMaterials.ts
@@ -15,39 +15,28 @@ export const useCaseMaterials = ({ dataType }: UseCaseMaterialsProps) => {
 
   const getCaseMaterials = async () => {
     const response = await request.get<CaseMaterialsResponseType>(
-      `/urns/${urn}/cases/${id}/case-materials`
+      `/urns/${urn}/cases/${id}/case-materials`,
     );
 
     if (response.status === 422 || response.status !== 200) {
-      throw new Error(
-        `Validation error: Unable to process ${dataType} request`
-      );
+      throw new Error(`Validation error: Unable to process ${dataType} request`);
     }
 
     return response.data;
   };
 
-  const { data, error, isLoading, isValidating, mutate } = useSWR(
-    materialsKey,
-    getCaseMaterials,
-    { keepPreviousData: true }
-  );
+  const { data, error, isLoading, isValidating, mutate } = useSWR(materialsKey, getCaseMaterials, {
+    keepPreviousData: true,
+  });
 
   const filteredData = (data ?? []).filter((material) =>
     dataType === 'communications'
       ? material.category === 'Communication'
-      : material.category !== 'Communication'
+      : material.category !== 'Communication',
   );
 
   const isInitialLoading = !data && isLoading;
   const isRefreshing = !!data && isValidating;
 
-  return {
-    data,
-    loading: isInitialLoading,
-    refreshing: isRefreshing,
-    error,
-    filteredData,
-    mutate
-  };
+  return { data, loading: isInitialLoading, refreshing: isRefreshing, error, filteredData, mutate };
 };
diff --git a/materials_ui/src/hooks/case-materials/useDiscard.ts b/materials_ui/src/hooks/case-materials/useDiscard.ts
index 6525fcc6..a1ecd1e6 100644
--- a/materials_ui/src/hooks/case-materials/useDiscard.ts
+++ b/materials_ui/src/hooks/case-materials/useDiscard.ts
@@ -7,29 +7,23 @@ import { SwrPayload } from '../../schemas';
 import {
   CaseMaterialDiscardRequestType,
   CaseMaterialDiscardResponseType,
-  CaseMaterialsType
+  CaseMaterialsType,
 } from '../../schemas/caseMaterials';
 
-export type UseDiscardOptions = {
-  onError?: () => void;
-  onSuccess?: () => void;
-};
+export type UseDiscardOptions = { onError?: () => void; onSuccess?: () => void };
 
-export const useDiscard = (
-  material?: CaseMaterialsType,
-  options?: UseDiscardOptions
-) => {
+export const useDiscard = (material?: CaseMaterialsType, options?: UseDiscardOptions) => {
   const request = useRequest();
   const { caseInfo } = useCaseInfoStore();
   const { log } = useLogger();
 
   const discardMaterialRequest = async (
     _url: string,
-    { arg: data }: SwrPayload<CaseMaterialDiscardRequestType>
+    { arg: data }: SwrPayload<CaseMaterialDiscardRequestType>,
   ) => {
     return await request.patch<CaseMaterialDiscardResponseType>(
       `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${material?.materialId}/discard`,
-      data
+      data,
     );
   };
 
@@ -46,7 +40,7 @@ export const useDiscard = (
         log({
           logLevel: 1,
           message: `HK-UI-FE: caseId ${caseInfo?.id} - Material [${material?.materialId}] discarded`,
-          errorMessage: ''
+          errorMessage: '',
         });
       },
       onError: (error: AxiosError) => {
@@ -58,10 +52,10 @@ export const useDiscard = (
         log({
           logLevel: 3,
           message: `HK-UI-FE: Error discarding material ${material?.materialId}`,
-          errorMessage: `HK-UI-FE: Error discarding material ${material?.materialId}`
+          errorMessage: `HK-UI-FE: Error discarding material ${material?.materialId}`,
         });
-      }
-    }
+      },
+    },
   );
 
   return { isLoading: isMutating, trigger, error };
diff --git a/materials_ui/src/hooks/case-materials/useEditMaterial.tsx b/materials_ui/src/hooks/case-materials/useEditMaterial.tsx
index cde189ca..3922f89e 100644
--- a/materials_ui/src/hooks/case-materials/useEditMaterial.tsx
+++ b/materials_ui/src/hooks/case-materials/useEditMaterial.tsx
@@ -8,7 +8,7 @@ import {
   EditExhibitType,
   EditStatementRequestType,
   EditStatementResponseType,
-  EditStatementType
+  EditStatementType,
 } from '../../schemas/forms/editStatement.ts';
 import { SwrPayload } from '../../schemas/index.ts';
 
@@ -17,20 +17,17 @@ type UseEditMaterialOptions = {
   onSuccess?: (response: { materialId: number }) => void;
 };
 
-export const useEditMaterial = ({
-                                  onError,
-                                  onSuccess
-                                }: UseEditMaterialOptions) => {
+export const useEditMaterial = ({ onError, onSuccess }: UseEditMaterialOptions) => {
   const request = useRequest();
   const { caseInfo } = useCaseInfoStore();
 
   const postUpdateStatement = async (
     _url: string,
-    { arg: data }: SwrPayload<EditStatementRequestType>
+    { arg: data }: SwrPayload<EditStatementRequestType>,
   ): Promise<EditStatementResponseType> => {
     const response = await request.patch<EditStatementResponseType>(
       `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${data?.materialId}/statement`,
-      data
+      data,
     );
 
     return response.data;
@@ -38,58 +35,54 @@ export const useEditMaterial = ({
 
   const postUpdateExhibit = async (
     _url: string,
-    { arg: data }: SwrPayload<EditExhibitType>
+    { arg: data }: SwrPayload<EditExhibitType>,
   ): Promise<EditExhibitResponseType> => {
     const response = await request.patch<EditExhibitResponseType>(
       `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${data?.materialId}/exhibit`,
       {
         ...data,
-        newProducer: data?.existingproducerOrWitnessId
-          ? undefined
-          : data?.producedBy,
+        newProducer: data?.existingproducerOrWitnessId ? undefined : data?.producedBy,
         existingProducerOrWitnessId: !data?.existingproducerOrWitnessId
           ? undefined
-          : data?.existingproducerOrWitnessId
-      }
+          : data?.existingproducerOrWitnessId,
+      },
     );
 
     return response.data;
   };
 
-  const { trigger: submitUpdateStatement, isMutating: isStatementUpdating } =
-    useSWRMutation(
-      caseInfo ? QUERY_KEYS.UPDATE_STATEMENT : null,
-      postUpdateStatement,
-      {
-        onError,
-        onSuccess: (response) => {
-          if (onSuccess) {
-            onSuccess({ materialId: response.updateStatement.id });
-          }
+  const { trigger: submitUpdateStatement, isMutating: isStatementUpdating } = useSWRMutation(
+    caseInfo ? QUERY_KEYS.UPDATE_STATEMENT : null,
+    postUpdateStatement,
+    {
+      onError,
+      onSuccess: (response) => {
+        if (onSuccess) {
+          onSuccess({ materialId: response.updateStatement.id });
         }
-      }
-    );
+      },
+    },
+  );
 
-  const { trigger: submitUpdateExhibit, isMutating: isExhibitUpdating } =
-    useSWRMutation(
-      caseInfo ? QUERY_KEYS.UPDATE_EXHIBIT : null,
-      postUpdateExhibit,
-      {
-        onError,
-        onSuccess: (response) => {
-          if (onSuccess) {
-            onSuccess({ materialId: response.updateExhibit.id });
-          }
+  const { trigger: submitUpdateExhibit, isMutating: isExhibitUpdating } = useSWRMutation(
+    caseInfo ? QUERY_KEYS.UPDATE_EXHIBIT : null,
+    postUpdateExhibit,
+    {
+      onError,
+      onSuccess: (response) => {
+        if (onSuccess) {
+          onSuccess({ materialId: response.updateExhibit.id });
         }
-      }
-    );
+      },
+    },
+  );
 
   const updateStatement = async (data: EditStatementType) => {
     await submitUpdateStatement({
       ...data,
       statementDate: data?.hasStatementDate
         ? dayjs(data?.statementDate).format('YYYY-MM-DD')
-        : null
+        : null,
     });
   };
 
@@ -97,9 +90,5 @@ export const useEditMaterial = ({
     await submitUpdateExhibit(data);
   };
 
-  return {
-    loading: isStatementUpdating || isExhibitUpdating,
-    updateExhibit,
-    updateStatement
-  };
+  return { loading: isStatementUpdating || isExhibitUpdating, updateExhibit, updateStatement };
 };
diff --git a/materials_ui/src/hooks/case-materials/useReadStatus.ts b/materials_ui/src/hooks/case-materials/useReadStatus.ts
index f910d500..eaba9852 100644
--- a/materials_ui/src/hooks/case-materials/useReadStatus.ts
+++ b/materials_ui/src/hooks/case-materials/useReadStatus.ts
@@ -2,7 +2,7 @@ import { QUERY_KEYS } from '../../constants/query';
 import { SwrPayload } from '../../schemas';
 import {
   CaseMaterialReadStatusRequestType,
-  CaseMaterialReadStatusResponseType
+  CaseMaterialReadStatusResponseType,
 } from '../../schemas/caseMaterials';
 
 import useSWRMutation from 'swr/mutation';
@@ -16,11 +16,11 @@ export const useReadStatus = () => {
 
   const updateReadStatus = async (
     _url: string,
-    { arg: data }: SwrPayload<CaseMaterialReadStatusRequestType>
+    { arg: data }: SwrPayload<CaseMaterialReadStatusRequestType>,
   ) => {
     return await request.patch<CaseMaterialReadStatusResponseType>(
       `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${data?.materialId}/read-status`,
-      data
+      data,
     );
   };
 
@@ -31,7 +31,7 @@ export const useReadStatus = () => {
       onSuccess: () => {
         log({
           logLevel: 1,
-          message: `HK-UI-FE: caseId ${caseInfo?.id} - Material [id] read status updated`
+          message: `HK-UI-FE: caseId ${caseInfo?.id} - Material [id] read status updated`,
         });
       },
       onError: (error) => {
@@ -39,10 +39,10 @@ export const useReadStatus = () => {
         log({
           logLevel: 3,
           message: 'HK-UI-FE: Error updating material read status',
-          errorMessage: 'HK-UI-FE: Error updating material read status'
+          errorMessage: 'HK-UI-FE: Error updating material read status',
         });
-      }
-    }
+      },
+    },
   );
 
   return { trigger, isMutating, error };
diff --git a/materials_ui/src/hooks/case-materials/useReclassify.ts b/materials_ui/src/hooks/case-materials/useReclassify.ts
index bb9aa73f..67ac62ac 100644
--- a/materials_ui/src/hooks/case-materials/useReclassify.ts
+++ b/materials_ui/src/hooks/case-materials/useReclassify.ts
@@ -4,13 +4,13 @@ import {
   mapReclassifyExhibit,
   mapReclassifyMGForm,
   mapReclassifyOther,
-  mapReclassifyStatement
+  mapReclassifyStatement,
 } from '../../components/forms/Reclassify/mappers';
 import { SwrPayload } from '../../schemas';
 import {
   Reclassify_ClassificationEnumType,
   Reclassify_Orchestrated_Request_Type,
-  Reclassify_Orchestrated_Response_Type
+  Reclassify_Orchestrated_Response_Type,
 } from '../../schemas/forms/reclassify';
 import { ReclassifyFormData } from './useReclassifyForm';
 
@@ -36,34 +36,28 @@ const getDataMapper = (classification: Reclassify_ClassificationEnumType) => {
 export type UseReclassifyOptions = {
   materialId: number;
   onError?: (error: Error) => void;
-  onSuccess?: (response: {
-    data: Reclassify_Orchestrated_Response_Type;
-  }) => void;
+  onSuccess?: (response: { data: Reclassify_Orchestrated_Response_Type }) => void;
 };
 
-export const useReclassify = ({
-  materialId,
-  onError,
-  onSuccess
-}: UseReclassifyOptions) => {
+export const useReclassify = ({ materialId, onError, onSuccess }: UseReclassifyOptions) => {
   const request = useRequest();
   const { caseInfo } = useCaseInfoStore();
 
   const postReclassification = async (
     _url: string,
-    { arg: data }: SwrPayload<Reclassify_Orchestrated_Request_Type>
+    { arg: data }: SwrPayload<Reclassify_Orchestrated_Request_Type>,
   ) => {
     return await request.post<Reclassify_Orchestrated_Response_Type>(
       `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${materialId}/reclassify-complete`,
-      data
+      data,
     );
   };
 
-  const { trigger: submitReclassify, isMutating: isReclassifyLoading } =
-    useSWRMutation(QUERY_KEYS.RECLASSIFY_MATERIAL, postReclassification, {
-      onError,
-      onSuccess
-    });
+  const { trigger: submitReclassify, isMutating: isReclassifyLoading } = useSWRMutation(
+    QUERY_KEYS.RECLASSIFY_MATERIAL,
+    postReclassification,
+    { onError, onSuccess },
+  );
 
   const submitReclassification = async (data: ReclassifyFormData) => {
     const mapper = getDataMapper(data?.classification);
diff --git a/materials_ui/src/hooks/case-materials/useReclassifyForm.ts b/materials_ui/src/hooks/case-materials/useReclassifyForm.ts
index 72229a34..55b118fc 100644
--- a/materials_ui/src/hooks/case-materials/useReclassifyForm.ts
+++ b/materials_ui/src/hooks/case-materials/useReclassifyForm.ts
@@ -5,7 +5,7 @@ import {
   Reclassify_TypeMGFormType,
   Reclassify_TypeOtherType,
   Reclassify_TypeStatementType,
-  Reclassify_WitnessAndActionPlanType
+  Reclassify_WitnessAndActionPlanType,
 } from '../../schemas/forms/reclassify';
 
 export type FormStep = 'classification' | 'summary' | 'addWitness' | 'subject';
@@ -15,10 +15,7 @@ type Reclassify_Statement_With_ActionPlan = {
   witnessActionPlan: Reclassify_WitnessAndActionPlanType;
 };
 
-type Reclassify_Statement_Without_ActionPlan = {
-  witnessId: number;
-  witnessActionPlan?: undefined;
-};
+type Reclassify_Statement_Without_ActionPlan = { witnessId: number; witnessActionPlan?: undefined };
 
 type Reclassify_Statement_Data = (
   | Reclassify_Statement_With_ActionPlan
@@ -37,7 +34,7 @@ export const useReclassifyForm = (material: CaseMaterialsType) => {
   const [formData, setFormData] = useState<Partial<ReclassifyFormData>>({
     materialId: material?.materialId,
     subject: material?.subject,
-    used: true
+    used: true,
   });
 
   const changeFormStep = (step: FormStep) => {
diff --git a/materials_ui/src/hooks/case-materials/useRename.ts b/materials_ui/src/hooks/case-materials/useRename.ts
index 39e1a734..1ec0bf7c 100644
--- a/materials_ui/src/hooks/case-materials/useRename.ts
+++ b/materials_ui/src/hooks/case-materials/useRename.ts
@@ -1,34 +1,25 @@
 import useSWRMutation from 'swr/mutation';
 import { QUERY_KEYS } from '../../constants/query.ts';
 import { TDocument } from '../../materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx';
-import {
-  CaseMaterialRenameResponseType,
-  CaseMaterialsType
-} from '../../schemas/caseMaterials.ts';
+import { CaseMaterialRenameResponseType, CaseMaterialsType } from '../../schemas/caseMaterials.ts';
 import { SwrPayload } from '../../schemas/index.ts';
 import { useCaseInfoStore } from '../../stores/index.ts';
 import { useLogger, useRequest } from '../index.ts';
 
-type UseRenameOptions = {
-  onError?: (error: Error) => void;
-  onSuccess?: () => void;
-};
+type UseRenameOptions = { onError?: (error: Error) => void; onSuccess?: () => void };
 
 export const useRename = (
   material: CaseMaterialsType | (TDocument & { materialId?: number }) | null,
-  options?: UseRenameOptions
+  options?: UseRenameOptions,
 ) => {
   const request = useRequest();
   const { caseInfo } = useCaseInfoStore();
   const { log } = useLogger();
 
-  const renameMaterialRequest = (
-    _url: string,
-    { arg: newSubject }: SwrPayload<string>
-  ) => {
+  const renameMaterialRequest = (_url: string, { arg: newSubject }: SwrPayload<string>) => {
     return request.patch<CaseMaterialRenameResponseType>(
       `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${material?.materialId}/rename`,
-      { materialId: material?.materialId, subject: newSubject }
+      { materialId: material?.materialId, subject: newSubject },
     );
   };
   const { trigger, isMutating } = useSWRMutation(
@@ -42,7 +33,7 @@ export const useRename = (
         console.error('Error renaming material:', error);
         log({
           logLevel: 1,
-          message: `HK-UI-FE: caseId [${caseInfo?.id}] - materialID [${material?.materialId}] has not been renamed.`
+          message: `HK-UI-FE: caseId [${caseInfo?.id}] - materialID [${material?.materialId}] has not been renamed.`,
         });
       },
       onSuccess: () => {
@@ -51,10 +42,10 @@ export const useRename = (
 
         log({
           logLevel: 1,
-          message: `HK-UI-FE: caseId [${caseInfo?.id}] - materialID [${material?.materialId}] has been renamed.`
+          message: `HK-UI-FE: caseId [${caseInfo?.id}] - materialID [${material?.materialId}] has been renamed.`,
         });
-      }
-    }
+      },
+    },
   );
 
   return { trigger, isMutating };
diff --git a/materials_ui/src/hooks/case/useCaseDefendants.ts b/materials_ui/src/hooks/case/useCaseDefendants.ts
index 84c04e51..c73bc6ec 100644
--- a/materials_ui/src/hooks/case/useCaseDefendants.ts
+++ b/materials_ui/src/hooks/case/useCaseDefendants.ts
@@ -3,10 +3,7 @@ import useSWR from 'swr';
 import { useRequest } from '../';
 import type { SelectOption } from '../../components/SelectList/SelectList';
 import { QUERY_KEYS } from '../../constants/query';
-import {
-  DefendantsResponseType,
-  DefendantType
-} from '../../schemas/defendants';
+import { DefendantsResponseType, DefendantType } from '../../schemas/defendants';
 import { useCaseInfoStore } from '../../stores';
 
 export const useCaseDefendants = () => {
@@ -15,15 +12,14 @@ export const useCaseDefendants = () => {
 
   const getCaseDefendants = async () =>
     await request
-      .get<DefendantsResponseType>(
-        `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-defendants`,
-        { params: { caseId: caseInfo?.id } }
-      )
+      .get<DefendantsResponseType>(`/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-defendants`, {
+        params: { caseId: caseInfo?.id },
+      })
       .then((response) => response.data);
 
   const { data: caseDefendants, isLoading } = useSWR(
     caseInfo?.id ? QUERY_KEYS.CASE_DEFENDANTS : null,
-    getCaseDefendants
+    getCaseDefendants,
   );
 
   const formatDefendantName = (defendant?: DefendantType | null): string => {
@@ -34,15 +30,13 @@ export const useCaseDefendants = () => {
     return `${defendant?.firstNames} ${defendant?.surname}`;
   };
 
-  const getDefendantById = (
-    defendantId?: number | string
-  ): DefendantType | null => {
+  const getDefendantById = (defendantId?: number | string): DefendantType | null => {
     if (!defendantId) {
       return null;
     }
 
     const defendant = caseDefendants?.defendants?.find(
-      (def) => def.id.toString() === defendantId?.toString()
+      (def) => def.id.toString() === defendantId?.toString(),
     );
 
     return defendant || null;
@@ -52,7 +46,7 @@ export const useCaseDefendants = () => {
     caseDefendants?.defendants?.map((defendant) => ({
       id: defendant?.id,
       label: formatDefendantName(defendant) || '',
-      value: defendant?.id
+      value: defendant?.id,
     })) || [];
 
   return {
@@ -60,6 +54,6 @@ export const useCaseDefendants = () => {
     loading: isLoading,
     getDefendantById,
     formatDefendantName,
-    selectOptions
+    selectOptions,
   };
 };
diff --git a/materials_ui/src/hooks/case/useCaseInfo.ts b/materials_ui/src/hooks/case/useCaseInfo.ts
index 6d9dc82b..a4215943 100644
--- a/materials_ui/src/hooks/case/useCaseInfo.ts
+++ b/materials_ui/src/hooks/case/useCaseInfo.ts
@@ -18,9 +18,5 @@ export const useCaseInfo = ({ caseId, urn }: UseCaseInfoProps) => {
 
   const { data, isLoading, isValidating, mutate } = useSWR(key, getCaseInfo);
 
-  return {
-    caseInfo: data || null,
-    loading: isLoading || isValidating,
-    refresh: mutate
-  };
+  return { caseInfo: data || null, loading: isLoading || isValidating, refresh: mutate };
 };
diff --git a/materials_ui/src/hooks/case/useCaseLockCheck.ts b/materials_ui/src/hooks/case/useCaseLockCheck.ts
index 6dff97dc..835896af 100644
--- a/materials_ui/src/hooks/case/useCaseLockCheck.ts
+++ b/materials_ui/src/hooks/case/useCaseLockCheck.ts
@@ -17,7 +17,7 @@ export const useCaseLockCheck = (): UseCaseLockStatus => {
 
   const getCaseLockStatus = async () => {
     const response = await request.get<CaseLockStatusResponseType>(
-      `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-lock-info`
+      `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-lock-info`,
     );
 
     return response.data;
@@ -25,12 +25,12 @@ export const useCaseLockCheck = (): UseCaseLockStatus => {
 
   const { data, mutate: refreshCaseLockStatus } = useSWR(
     caseInfo ? QUERY_KEYS.CASE_LOCK_STATUS : null,
-    getCaseLockStatus
+    getCaseLockStatus,
   );
 
   return {
     isLocked: data?.isLocked || false,
     name: data?.lockedByUser || null,
-    refreshCaseLockStatus
+    refreshCaseLockStatus,
   };
 };
diff --git a/materials_ui/src/hooks/case/useCaseWitnesses.ts b/materials_ui/src/hooks/case/useCaseWitnesses.ts
index 997e8282..93684a78 100644
--- a/materials_ui/src/hooks/case/useCaseWitnesses.ts
+++ b/materials_ui/src/hooks/case/useCaseWitnesses.ts
@@ -3,10 +3,7 @@ import useSWR from 'swr';
 import { useRequest } from '../';
 import type { SelectOption } from '../../components/SelectList/SelectList';
 import { QUERY_KEYS } from '../../constants/query';
-import type {
-  WitnessListItemType,
-  WitnessListResponseType
-} from '../../schemas/witness';
+import type { WitnessListItemType, WitnessListResponseType } from '../../schemas/witness';
 import { useCaseInfoStore } from '../../stores';
 
 export const useCaseWitnesses = () => {
@@ -15,15 +12,14 @@ export const useCaseWitnesses = () => {
 
   const getCaseWitnesses = async () =>
     await request
-      .get<WitnessListResponseType>(
-        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-witnesses`,
-        { params: { caseId: caseInfo?.id } }
-      )
+      .get<WitnessListResponseType>(`urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-witnesses`, {
+        params: { caseId: caseInfo?.id },
+      })
       .then((response) => response.data);
 
   const { data: caseWitnesses, isLoading } = useSWR(
     caseInfo ? QUERY_KEYS.CASE_WITNESSES : null,
-    getCaseWitnesses
+    getCaseWitnesses,
   );
 
   const formatWitnessName = (witness?: WitnessListItemType | null): string => {
@@ -33,15 +29,13 @@ export const useCaseWitnesses = () => {
 
     return `${witness?.firstName} ${witness?.surname}`;
   };
-  const getWitnessById = (
-    witnessId?: number | string
-  ): WitnessListItemType | null => {
+  const getWitnessById = (witnessId?: number | string): WitnessListItemType | null => {
     if (!witnessId) {
       return null;
     }
 
     const witness = caseWitnesses?.witnesses?.find(
-      (witness) => witness.witnessId.toString() === witnessId?.toString()
+      (witness) => witness.witnessId.toString() === witnessId?.toString(),
     );
 
     return witness || null;
@@ -51,7 +45,7 @@ export const useCaseWitnesses = () => {
     caseWitnesses?.witnesses?.map((witness) => ({
       id: witness?.witnessId,
       label: formatWitnessName(witness) || '',
-      value: witness?.witnessId
+      value: witness?.witnessId,
     })) || [];
 
   return {
@@ -59,6 +53,6 @@ export const useCaseWitnesses = () => {
     loading: isLoading,
     data: caseWitnesses?.witnesses || [],
     selectOptions,
-    formatWitnessName
+    formatWitnessName,
   };
 };
diff --git a/materials_ui/src/hooks/case/useWitnessStatements.ts b/materials_ui/src/hooks/case/useWitnessStatements.ts
index 329817ab..16bc5586 100644
--- a/materials_ui/src/hooks/case/useWitnessStatements.ts
+++ b/materials_ui/src/hooks/case/useWitnessStatements.ts
@@ -3,10 +3,7 @@ import useSWR from 'swr';
 
 import { useRequest } from '..';
 import { QUERY_KEYS } from '../../constants/query';
-import type {
-  WitnessStatementResponseType,
-  WitnessStatementType
-} from '../../schemas/witness';
+import type { WitnessStatementResponseType, WitnessStatementType } from '../../schemas/witness';
 import { useCaseInfoStore } from '../../stores';
 
 export const useWitnessStatements = () => {
@@ -17,38 +14,28 @@ export const useWitnessStatements = () => {
   const getWitnessStatements = async () =>
     await request
       .get<WitnessStatementResponseType>(
-        `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/witnesses/${witnessId}/witness-statements`
+        `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/witnesses/${witnessId}/witness-statements`,
       )
       .then((response) => response.data);
 
   const { data, isLoading } = useSWR(
     witnessId && caseInfo ? [QUERY_KEYS.WITNESS_STATEMENTS, witnessId] : null,
-    getWitnessStatements
+    getWitnessStatements,
   );
 
   const setWitnessId = (id: number | null) => {
     setWitness(id);
   };
 
-  const [witnessStatements, lastStatementId] = useMemo((): [
-    WitnessStatementType[],
-    number
-  ] => {
-    const statements = (data?.statementsForWitness || []).sort(
-      (a, b) => a.title - b.title
-    );
+  const [witnessStatements, lastStatementId] = useMemo((): [WitnessStatementType[], number] => {
+    const statements = (data?.statementsForWitness || []).sort((a, b) => a.title - b.title);
 
     const statementIds: number = Math.max(
-      ...(statements || []).map((item: WitnessStatementType) => item.title)
+      ...(statements || []).map((item: WitnessStatementType) => item.title),
     );
 
     return [statements, statementIds];
   }, [data]);
 
-  return {
-    data: witnessStatements,
-    loading: isLoading,
-    setWitnessId,
-    lastStatementId
-  };
+  return { data: witnessStatements, loading: isLoading, setWitnessId, lastStatementId };
 };
diff --git a/materials_ui/src/hooks/documents/useDocumentPdfUrl.ts b/materials_ui/src/hooks/documents/useDocumentPdfUrl.ts
index d5912b62..5a57ed6e 100644
--- a/materials_ui/src/hooks/documents/useDocumentPdfUrl.ts
+++ b/materials_ui/src/hooks/documents/useDocumentPdfUrl.ts
@@ -12,7 +12,7 @@ const getDocumentBlobFromAxiosInstance = async (p: {
   try {
     const response = await p.axiosInstance.get(
       `/urns/${p.urn}/cases/${p.caseId}/materials/${p.materialId}/document`,
-      { responseType: 'blob' }
+      { responseType: 'blob' },
     );
 
     const blob = response.data;
@@ -26,11 +26,7 @@ const getDocumentBlobFromAxiosInstance = async (p: {
   }
 };
 
-export const useDocumentPdfUrl = (p: {
-  urn: string;
-  caseId: number;
-  materialId: string;
-}) => {
+export const useDocumentPdfUrl = (p: { urn: string; caseId: number; materialId: string }) => {
   const [pdfUrl, setPdfUrl] = useState<string | null | undefined>();
   const axiosInstance = useAxiosInstance();
 
@@ -40,7 +36,7 @@ export const useDocumentPdfUrl = (p: {
         axiosInstance,
         urn: p.urn,
         caseId: p.caseId,
-        materialId: stripCmsPrefix(p.materialId)
+        materialId: stripCmsPrefix(p.materialId),
       });
 
       if (!resp.success) return setPdfUrl(null);
diff --git a/materials_ui/src/hooks/documents/useDocumentPreview.ts b/materials_ui/src/hooks/documents/useDocumentPreview.ts
index e5c0f2d8..403461d5 100644
--- a/materials_ui/src/hooks/documents/useDocumentPreview.ts
+++ b/materials_ui/src/hooks/documents/useDocumentPreview.ts
@@ -14,13 +14,13 @@ export const useDocumentPreview = ({ materialId }: Props) => {
     await request
       .get<CaseMaterialDocumentPreviewResponseType>(
         `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/materials/${materialId}/document`,
-        { responseType: 'blob' }
+        { responseType: 'blob' },
       )
       .then((response) => response.data);
 
   const { data, error, isLoading } = useSWR(
     caseInfo ? `${QUERY_KEYS.CASE_MATERIAL_FULL_DOCUMENT}/${materialId}` : null,
-    getDocumentPreview
+    getDocumentPreview,
   );
 
   return { data, loading: isLoading, error };
diff --git a/materials_ui/src/hooks/documents/useDocumentTypes.ts b/materials_ui/src/hooks/documents/useDocumentTypes.ts
index 57126653..0b8633ba 100644
--- a/materials_ui/src/hooks/documents/useDocumentTypes.ts
+++ b/materials_ui/src/hooks/documents/useDocumentTypes.ts
@@ -2,10 +2,7 @@ import useSWR from 'swr';
 import { useRequest } from '../';
 import type { SelectOption } from '../../components/SelectList/SelectList';
 import { QUERY_KEYS } from '../../constants/query';
-import {
-  DocumentType,
-  DocumentTypeResponseType
-} from '../../schemas/documentTypes';
+import { DocumentType, DocumentTypeResponseType } from '../../schemas/documentTypes';
 import { useCaseInfoStore } from '../../stores';
 
 export const useDocumentTypes = () => {
@@ -14,35 +11,26 @@ export const useDocumentTypes = () => {
 
   const getDocumentTypes = async () =>
     await request
-      .get<DocumentTypeResponseType>(
-        `/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/document-types`
-      )
+      .get<DocumentTypeResponseType>(`/urns/${caseInfo?.urn}/cases/${caseInfo?.id}/document-types`)
       .then((response) => response.data);
 
   const { data: documentTypes, isLoading } = useSWR(
     caseInfo ? QUERY_KEYS.DOCUMENT_TYPES : null,
-    getDocumentTypes
+    getDocumentTypes,
   );
 
-  const getDocumentTypeById = (
-    documentId: number | string
-  ): DocumentType | undefined => {
-    return documentTypes?.find(
-      (type) => type.id.toString() === documentId.toString()
-    );
+  const getDocumentTypeById = (documentId: number | string): DocumentType | undefined => {
+    return documentTypes?.find((type) => type.id.toString() === documentId.toString());
   };
 
   // Step 1: Group by `group`
-  const types = documentTypes?.reduce<Record<string, typeof documentTypes>>(
-    (acc, item) => {
-      if (!acc[item.group]) {
-        acc[item.group] = [];
-      }
-      acc[item.group]?.push(item);
-      return acc;
-    },
-    {}
-  );
+  const types = documentTypes?.reduce<Record<string, typeof documentTypes>>((acc, item) => {
+    if (!acc[item.group]) {
+      acc[item.group] = [];
+    }
+    acc[item.group]?.push(item);
+    return acc;
+  }, {});
 
   // Step 2: Sort each group by `name`
   for (const group in types) {
@@ -54,11 +42,7 @@ export const useDocumentTypes = () => {
       return [];
     }
 
-    return types[group].map((type) => ({
-      id: type.id,
-      label: type.name,
-      value: type.id
-    }));
+    return types[group].map((type) => ({ id: type.id, label: type.name, value: type.id }));
   };
 
   return { getDocumentTypeById, loading: isLoading, selectOptions, types };
diff --git a/materials_ui/src/hooks/documents/useDocuments.ts b/materials_ui/src/hooks/documents/useDocuments.ts
index c5689c13..f6de9cd8 100644
--- a/materials_ui/src/hooks/documents/useDocuments.ts
+++ b/materials_ui/src/hooks/documents/useDocuments.ts
@@ -17,16 +17,14 @@ export const useDocuments = () => {
 
   const { data, isLoading } = useSWR<DocumentResultType>(
     urn && caseId ? [QUERY_KEYS.GET_ALL_DOCUMENTS, urn, caseId] : null,
-    getDocuments
+    getDocuments,
   );
 
   const docTypes = data
     ? Array.from(
         new Set(
-          data
-            .map((doc) => doc.cmsDocType.documentType)
-            .filter((t) => t != null && t !== '')
-        )
+          data.map((doc) => doc.cmsDocType.documentType).filter((t) => t != null && t !== ''),
+        ),
       )
     : [];
 
diff --git a/materials_ui/src/hooks/exhibits/useExhibitProducers.ts b/materials_ui/src/hooks/exhibits/useExhibitProducers.ts
index dc6a924e..d600629e 100644
--- a/materials_ui/src/hooks/exhibits/useExhibitProducers.ts
+++ b/materials_ui/src/hooks/exhibits/useExhibitProducers.ts
@@ -3,10 +3,7 @@ import useSWR from 'swr';
 import { useRequest } from '../';
 import type { SelectOption } from '../../components/SelectList/SelectList';
 import { QUERY_KEYS } from '../../constants/query';
-import {
-  ExhibitProducerResponseType,
-  ExhibitProducerType
-} from '../../schemas/exhibitProducer';
+import { ExhibitProducerResponseType, ExhibitProducerType } from '../../schemas/exhibitProducer';
 import { useCaseInfoStore } from '../../stores';
 
 export const useExhibitProducers = () => {
@@ -16,32 +13,28 @@ export const useExhibitProducers = () => {
   const getExhibitProducers = async () =>
     await request
       .get<ExhibitProducerResponseType>(
-        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-exhibit-producers`
+        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/case-exhibit-producers`,
       )
       .then((response) => response.data);
 
   const { data, isLoading, isValidating } = useSWR(
     caseInfo ? QUERY_KEYS.EXHIBIT_PRODUCERS : null,
-    getExhibitProducers
+    getExhibitProducers,
   );
 
   const selectOptions: SelectOption[] =
     data?.exhibitProducers?.map((item) => ({
       id: item?.id,
       label: item.producer,
-      value: item?.id
+      value: item?.id,
     })) || [];
 
-  const getExhibitProducerById = (
-    id?: number | string
-  ): ExhibitProducerType | null => {
+  const getExhibitProducerById = (id?: number | string): ExhibitProducerType | null => {
     if (!id) {
       return null;
     }
 
-    const producer = data?.exhibitProducers?.find(
-      (item) => item.id.toString() === id?.toString()
-    );
+    const producer = data?.exhibitProducers?.find((item) => item.id.toString() === id?.toString());
 
     return producer || null;
   };
@@ -50,6 +43,6 @@ export const useExhibitProducers = () => {
     data: data?.exhibitProducers || [],
     getExhibitProducerById,
     loading: isLoading || isValidating,
-    selectOptions
+    selectOptions,
   };
 };
diff --git a/materials_ui/src/hooks/exhibits/useExhibits.ts b/materials_ui/src/hooks/exhibits/useExhibits.ts
index e8132cfd..8a86364a 100644
--- a/materials_ui/src/hooks/exhibits/useExhibits.ts
+++ b/materials_ui/src/hooks/exhibits/useExhibits.ts
@@ -4,14 +4,12 @@ export const useExhibits = () => {
   const {
     data: materials,
     loading: isLoading,
-    error
+    error,
   } = useCaseMaterials({ dataType: 'materials' });
 
   const references = materials?.length
     ? materials
-        ?.map((material) =>
-          (material.reference || '').trim().toLocaleLowerCase()
-        )
+        ?.map((material) => (material.reference || '').trim().toLocaleLowerCase())
         .filter((ref) => !!ref)
     : [];
 
diff --git a/materials_ui/src/hooks/index.ts b/materials_ui/src/hooks/index.ts
index 82a68a59..ce8f23cd 100644
--- a/materials_ui/src/hooks/index.ts
+++ b/materials_ui/src/hooks/index.ts
@@ -8,10 +8,7 @@ export { useEditMaterial } from './case-materials/useEditMaterial';
 export { useReadStatus } from './case-materials/useReadStatus';
 export { useReclassify } from './case-materials/useReclassify';
 export { useReclassifyForm } from './case-materials/useReclassifyForm';
-export type {
-  FormStep,
-  ReclassifyFormData
-} from './case-materials/useReclassifyForm';
+export type { FormStep, ReclassifyFormData } from './case-materials/useReclassifyForm';
 export { useRename } from './case-materials/useRename';
 export { useCaseDefendants } from './case/useCaseDefendants';
 export { useCaseInfo } from './case/useCaseInfo';
@@ -26,10 +23,7 @@ export { useExhibits } from './exhibits/useExhibits';
 export { usePCD } from './pcd-request/usePCD';
 export { usePCDList } from './pcd-request/usePCDList';
 export { useCaseSearch } from './search/useCaseSearch';
-export {
-  useDocumentSearch,
-  useDocumentSearchResults
-} from './search/useDocumentSearch';
+export { useDocumentSearch, useDocumentSearchResults } from './search/useDocumentSearch';
 export { useSearchTracker } from './search/useSearchTracker';
 export { useAppRoute } from './ui/useAppRoute';
 export { useBanner } from './ui/useBanner';
diff --git a/materials_ui/src/hooks/pcd-request/usePCD.ts b/materials_ui/src/hooks/pcd-request/usePCD.ts
index cfe090c3..60440d3b 100644
--- a/materials_ui/src/hooks/pcd-request/usePCD.ts
+++ b/materials_ui/src/hooks/pcd-request/usePCD.ts
@@ -13,13 +13,13 @@ export const usePCD = ({ pcdId }: UsePCDProps) => {
   const getPCDDetails = async () =>
     await request
       .get<PCDDetailsResponseType>(
-        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/pcds/${pcdId}/pcd-request`
+        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/pcds/${pcdId}/pcd-request`,
       )
       .then((response) => response.data);
 
   const { data, error, isLoading, isValidating } = useSWR(
     caseInfo && pcdId ? `${QUERY_KEYS.PCD_REQUEST}/${pcdId}` : null,
-    getPCDDetails
+    getPCDDetails,
   );
 
   return { data, error, isLoading: isLoading || isValidating };
diff --git a/materials_ui/src/hooks/pcd-request/usePCDList.ts b/materials_ui/src/hooks/pcd-request/usePCDList.ts
index 9f564e92..4f2cfe1e 100644
--- a/materials_ui/src/hooks/pcd-request/usePCDList.ts
+++ b/materials_ui/src/hooks/pcd-request/usePCDList.ts
@@ -10,21 +10,17 @@ export const usePCDList = () => {
   const getPCDList = async () =>
     await request
       .get<PCDListingResponseType>(
-        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/pcds/${caseInfo?.id}/pcd-request-core`
+        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/pcds/${caseInfo?.id}/pcd-request-core`,
       )
       .then((response) => response.data);
 
   const { data, error, isLoading, isValidating } = useSWR(
     caseInfo ? QUERY_KEYS.PCD_REQUESTS : null,
-    getPCDList
+    getPCDList,
   );
 
   const sortByDate = (a: PCDListingType, b: PCDListingType) =>
     Date.parse(b.decisionRequested) - Date.parse(a.decisionRequested);
 
-  return {
-    data: data?.sort(sortByDate) || undefined,
-    error,
-    isLoading: isLoading || isValidating
-  };
+  return { data: data?.sort(sortByDate) || undefined, error, isLoading: isLoading || isValidating };
 };
diff --git a/materials_ui/src/hooks/pcd-review/usePCDReviewCore.ts b/materials_ui/src/hooks/pcd-review/usePCDReviewCore.ts
index aef00405..6af77aca 100644
--- a/materials_ui/src/hooks/pcd-review/usePCDReviewCore.ts
+++ b/materials_ui/src/hooks/pcd-review/usePCDReviewCore.ts
@@ -2,10 +2,7 @@ import useSWR from 'swr';
 
 import { useCaseInfoStore, useRequest } from '..';
 import { QUERY_KEYS } from '../../constants/query';
-import {
-  PCDReviewCoreResponseType,
-  PCDReviewCoreSchema
-} from '../../schemas/pcdReview';
+import { PCDReviewCoreResponseType, PCDReviewCoreSchema } from '../../schemas/pcdReview';
 
 export const usePCDReviewCore = () => {
   const request = useRequest();
@@ -14,7 +11,7 @@ export const usePCDReviewCore = () => {
   const getPCDReviewCore = async () => {
     try {
       const response = await request.get(
-        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/pcd-review-core`
+        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/pcd-review-core`,
       );
 
       const parsedResponse = PCDReviewCoreSchema.safeParse(response.data);
@@ -30,11 +27,10 @@ export const usePCDReviewCore = () => {
     }
   };
 
-  const { data, error, isLoading, isValidating } =
-    useSWR<PCDReviewCoreResponseType>(
-      caseInfo ? QUERY_KEYS.PCD_REVIEW_CORE : null,
-      getPCDReviewCore
-    );
+  const { data, error, isLoading, isValidating } = useSWR<PCDReviewCoreResponseType>(
+    caseInfo ? QUERY_KEYS.PCD_REVIEW_CORE : null,
+    getPCDReviewCore,
+  );
 
   return { data, error, isLoading: isLoading || isValidating };
 };
diff --git a/materials_ui/src/hooks/pcd-review/usePCDReviewDetails.ts b/materials_ui/src/hooks/pcd-review/usePCDReviewDetails.ts
index e0449e99..45577eea 100644
--- a/materials_ui/src/hooks/pcd-review/usePCDReviewDetails.ts
+++ b/materials_ui/src/hooks/pcd-review/usePCDReviewDetails.ts
@@ -2,22 +2,16 @@ import useSWR from 'swr';
 
 import { useCaseInfoStore, useRequest } from '..';
 import { QUERY_KEYS } from '../../constants/query';
-import {
-  PCDReviewDetailsResponseType,
-  PCDReviewDetailsSchema
-} from '../../schemas/pcdReview';
+import { PCDReviewDetailsResponseType, PCDReviewDetailsSchema } from '../../schemas/pcdReview';
 
 export const usePCDReviewDetails = (historyId: number | undefined) => {
   const request = useRequest();
   const { caseInfo } = useCaseInfoStore();
 
-  const getPCDReviewDetails = async ([, requestedHistoryId]: readonly [
-    string,
-    number
-  ]) => {
+  const getPCDReviewDetails = async ([, requestedHistoryId]: readonly [string, number]) => {
     try {
       const response = await request.get(
-        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/history/${requestedHistoryId}/pcd-review-details`
+        `urns/${caseInfo?.urn}/cases/${caseInfo?.id}/history/${requestedHistoryId}/pcd-review-details`,
       );
       const parsedResponse = PCDReviewDetailsSchema.safeParse(response.data);
 
@@ -32,13 +26,10 @@ export const usePCDReviewDetails = (historyId: number | undefined) => {
     }
   };
 
-  const { data, error, isLoading, isValidating } =
-    useSWR<PCDReviewDetailsResponseType>(
-      caseInfo && historyId !== undefined
-        ? [QUERY_KEYS.PCD_REVIEW_REVIEW_DETAILS, historyId]
-        : null,
-      getPCDReviewDetails
-    );
+  const { data, error, isLoading, isValidating } = useSWR<PCDReviewDetailsResponseType>(
+    caseInfo && historyId !== undefined ? [QUERY_KEYS.PCD_REVIEW_REVIEW_DETAILS, historyId] : null,
+    getPCDReviewDetails,
+  );
 
   return { data, error, isLoading: isLoading || isValidating };
 };
diff --git a/materials_ui/src/hooks/search/useCaseSearch.ts b/materials_ui/src/hooks/search/useCaseSearch.ts
index 5b3a8786..48953ee6 100644
--- a/materials_ui/src/hooks/search/useCaseSearch.ts
+++ b/materials_ui/src/hooks/search/useCaseSearch.ts
@@ -27,25 +27,17 @@ export const useCaseSearch = (urn: string | undefined) => {
           setBanner({
             type: 'error',
             header: 'Something went wrong',
-            content:
-              'There was a problem with the server when searching for a case.'
+            content: 'There was a problem with the server when searching for a case.',
           });
         }
-      }
-    }
+      },
+    },
   );
 
-  return {
-    caseDetails: data ?? null,
-    loading: isLoading || isValidating,
-    refresh: mutate
-  };
+  return { caseDetails: data ?? null, loading: isLoading || isValidating, refresh: mutate };
 };
 
-export const getCaseDetails = async (p: {
-  axiosInstance: AxiosInstance;
-  urn: string;
-}) => {
+export const getCaseDetails = async (p: { axiosInstance: AxiosInstance; urn: string }) => {
   return p.axiosInstance.get<CaseDetailsType>(`/urns/${p.urn}/cases`);
 };
 
@@ -57,7 +49,7 @@ export const useCaseDetails = (p: { urn: string }) => {
     () => {
       if (!p.urn) return;
       return getCaseDetails({ axiosInstance, urn: p.urn });
-    }
+    },
   );
 
   return rtn;
diff --git a/materials_ui/src/hooks/search/useDocumentSearch.ts b/materials_ui/src/hooks/search/useDocumentSearch.ts
index ac1d849b..4e1dfa72 100644
--- a/materials_ui/src/hooks/search/useDocumentSearch.ts
+++ b/materials_ui/src/hooks/search/useDocumentSearch.ts
@@ -4,13 +4,10 @@ import { QUERY_KEYS } from '../../constants/query';
 import {
   DocumentResultType,
   SearchResultType,
-  SearchTermResultType
+  SearchTermResultType,
 } from '../../schemas/documents';
 
-export const useDocumentSearch = (
-  searchTerm: string | null,
-  trackerComplete: boolean
-) => {
+export const useDocumentSearch = (searchTerm: string | null, trackerComplete: boolean) => {
   const request = useRequest();
   const { caseInfo } = useCaseInfoStore();
 
@@ -25,10 +22,8 @@ export const useDocumentSearch = (
       .then((res) => res.data);
 
   const { data, isLoading } = useSWR(
-    searchTerm && trackerComplete
-      ? [QUERY_KEYS.DOCUMENT_SEARCH, urn, caseId, searchTerm]
-      : null,
-    getSearch
+    searchTerm && trackerComplete ? [QUERY_KEYS.DOCUMENT_SEARCH, urn, caseId, searchTerm] : null,
+    getSearch,
   );
 
   return { searchResults: data ?? null, loading: isLoading };
@@ -36,7 +31,7 @@ export const useDocumentSearch = (
 
 export const useDocumentSearchResults = (
   documents: DocumentResultType = [],
-  searchResults: SearchResultType[] = []
+  searchResults: SearchResultType[] = [],
 ) => {
   if (!documents || !searchResults) return [];
 
@@ -46,9 +41,7 @@ export const useDocumentSearchResults = (
     const matches = searchResults.filter((sr) => sr.parentId === doc.parentId);
 
     const resultsPerDocumentCount = matches.reduce((acc, curr) => {
-      const count = curr.words.filter((w) =>
-        w.matchType?.includes('Exact')
-      ).length;
+      const count = curr.words.filter((w) => w.matchType?.includes('Exact')).length;
 
       return acc + count;
     }, 0);
@@ -70,9 +63,9 @@ export const useDocumentSearchResults = (
           lineIndex: match.lineIndex,
           pageHeight: match.pageHeight,
           pageWidth: match.pageWidth,
-          words: match.words
+          words: match.words,
         })),
-        resultsPerDocumentCount
+        resultsPerDocumentCount,
       });
     }
   }
diff --git a/materials_ui/src/hooks/search/useSearchTracker.ts b/materials_ui/src/hooks/search/useSearchTracker.ts
index 6816be2e..9764cbe7 100644
--- a/materials_ui/src/hooks/search/useSearchTracker.ts
+++ b/materials_ui/src/hooks/search/useSearchTracker.ts
@@ -15,11 +15,9 @@ export const useSearchTracker = (trigger: unknown) => {
   const getTracker = () => request.get(`/urns/${urn}/cases/${caseId}/tracker`);
 
   // Start pipeline once per case when first search is triggered
-  const { data: postData } = useSWR(
-    trigger ? ['tracker-init', urn, caseId] : null,
-    postInit,
-    { revalidateOnFocus: false }
-  );
+  const { data: postData } = useSWR(trigger ? ['tracker-init', urn, caseId] : null, postInit, {
+    revalidateOnFocus: false,
+  });
 
   // Poll until Completed
   const { data: trackerData, isLoading: trackerLoading } = useSWR(
@@ -33,8 +31,8 @@ export const useSearchTracker = (trigger: unknown) => {
           ? 1000
           : 0,
       dedupingInterval: 0,
-      revalidateOnFocus: false
-    }
+      revalidateOnFocus: false,
+    },
   );
 
   const failedToConvert =
@@ -42,7 +40,7 @@ export const useSearchTracker = (trigger: unknown) => {
       (doc: SearchTermResultType) =>
         doc.status === 'UnableToConvertToPdf' ||
         doc.conversionStatus === 'UnexpectedError' ||
-        doc.status === 'OcrAndIndexFailure'
+        doc.status === 'OcrAndIndexFailure',
     ) ?? [];
 
   const isComplete = trackerData?.data.status === 'Completed';
diff --git a/materials_ui/src/hooks/ui/navigateToViewDocumentPageInNewTab.ts b/materials_ui/src/hooks/ui/navigateToViewDocumentPageInNewTab.ts
index 1fab1028..9dbec7a9 100644
--- a/materials_ui/src/hooks/ui/navigateToViewDocumentPageInNewTab.ts
+++ b/materials_ui/src/hooks/ui/navigateToViewDocumentPageInNewTab.ts
@@ -3,7 +3,5 @@ export const navigateToViewDocumentPageInNewTab = (p: {
   caseId: number;
   materialId: string | number;
 }) => {
-  window.open(
-    `${import.meta.env.BASE_URL}${p.urn}/${p.caseId}/view-document/${p.materialId}`
-  );
+  window.open(`${import.meta.env.BASE_URL}${p.urn}/${p.caseId}/view-document/${p.materialId}`);
 };
diff --git a/materials_ui/src/hooks/ui/useAppRoute.ts b/materials_ui/src/hooks/ui/useAppRoute.ts
index d1d89bbf..3abaf17b 100644
--- a/materials_ui/src/hooks/ui/useAppRoute.ts
+++ b/materials_ui/src/hooks/ui/useAppRoute.ts
@@ -15,7 +15,7 @@ export const APP_ROUTES = {
   SERVER_ERROR: 'service-down',
   UNAUTHORISED: 'unauthorized',
   CASE_SEARCH: 'case-search',
-  UPDATE_MATERIAL: 'update-material'
+  UPDATE_MATERIAL: 'update-material',
 } as const;
 
 type AppRouteKey = keyof typeof APP_ROUTES;
diff --git a/materials_ui/src/hooks/ui/useBanner.ts b/materials_ui/src/hooks/ui/useBanner.ts
index 34ca6154..3a2922cb 100644
--- a/materials_ui/src/hooks/ui/useBanner.ts
+++ b/materials_ui/src/hooks/ui/useBanner.ts
@@ -3,8 +3,7 @@ import { AppContext } from '../../context/AppContext';
 import { BannerType } from '../../schemas';
 
 export const useBanner = () => {
-  const { banners, clearBanners, removeBanner, setBannerState } =
-    useContext(AppContext);
+  const { banners, clearBanners, removeBanner, setBannerState } = useContext(AppContext);
 
   const setBanner = (banner: BannerType, persistBanners?: boolean) => {
     setBannerState(banner, persistBanners);
diff --git a/materials_ui/src/hooks/ui/useFeatureFlag.ts b/materials_ui/src/hooks/ui/useFeatureFlag.ts
index cf888ffc..cf073f24 100644
--- a/materials_ui/src/hooks/ui/useFeatureFlag.ts
+++ b/materials_ui/src/hooks/ui/useFeatureFlag.ts
@@ -3,13 +3,9 @@ import { PRIVATE_BETA_FEATURE_USER_GROUPS } from '../../constants';
 import { GroupDataContext } from '../../context';
 import { UserGroupType } from '../../schemas/user';
 
-type UseFeatureFlag = (
-  allowedGroups: number[],
-  groupsOverride?: UserGroupType[]
-) => boolean;
+type UseFeatureFlag = (allowedGroups: number[], groupsOverride?: UserGroupType[]) => boolean;
 
-const featureFlagsDisabled =
-  import.meta.env.VITE_DISABLE_FEATURE_FLAGS === 'true';
+const featureFlagsDisabled = import.meta.env.VITE_DISABLE_FEATURE_FLAGS === 'true';
 
 export const useFeatureFlag = (): UseFeatureFlag => {
   const { groups = [] } = useContext(GroupDataContext);
@@ -28,7 +24,7 @@ export const useFeatureFlag = (): UseFeatureFlag => {
         .map((groupId) => {
           return PRIVATE_BETA_FEATURE_USER_GROUPS[groupId];
         })
-        .includes(group?.id)
+        .includes(group?.id),
     );
   };
 };
diff --git a/materials_ui/src/hooks/ui/useFilters.ts b/materials_ui/src/hooks/ui/useFilters.ts
index f8a23848..289d7226 100644
--- a/materials_ui/src/hooks/ui/useFilters.ts
+++ b/materials_ui/src/hooks/ui/useFilters.ts
@@ -1,46 +1,31 @@
 import { useContext, useEffect, useState } from 'react';
 
 import { FilterContext } from '../../context/FiltersContext';
-import type {
-  FilterItem,
-  FilterKeys
-} from '../../context/FiltersContext/helpers/types';
+import type { FilterItem, FilterKeys } from '../../context/FiltersContext/helpers/types';
 import {
   getDefaultState,
   setFilter as setFilterState,
-  setSort as setSortState
+  setSort as setSortState,
 } from '../../context/FiltersContext/helpers/utils';
 
-export const useFilters = (
-  filterSetName: FilterKeys,
-  defaultState?: FilterItem
-) => {
-  const {
-    createFilterContext,
-    filters,
-    resetFilterContext,
-    updateFilterContext
-  } = useContext(FilterContext);
+export const useFilters = (filterSetName: FilterKeys, defaultState?: FilterItem) => {
+  const { createFilterContext, filters, resetFilterContext, updateFilterContext } =
+    useContext(FilterContext);
   const [shallowFilters, setShallowFilters] = useState<FilterItem>(
-    () => filters[filterSetName] ?? getDefaultState(defaultState)
+    () => filters[filterSetName] ?? getDefaultState(defaultState),
   );
 
   const setSort = (column: string | null) => {
     setShallowFilters((prev) => {
       const newSortDirection =
-        !prev.sort?.direction || prev.sort?.direction === 'descending'
-          ? 'ascending'
-          : 'descending';
+        !prev.sort?.direction || prev.sort?.direction === 'descending' ? 'ascending' : 'descending';
 
       const hasSortColumnChanged = prev.sort?.column !== column;
 
       const newSortState: FilterItem = {
         filters: filters[filterSetName]?.filters ?? {},
         // if someone clicks on a new sort column, we want to change to ascending no matter what
-        sort: setSortState(
-          column,
-          hasSortColumnChanged ? 'ascending' : newSortDirection
-        )
+        sort: setSortState(column, hasSortColumnChanged ? 'ascending' : newSortDirection),
       };
 
       // we want to update context immediately for sorting
@@ -52,18 +37,14 @@ export const useFilters = (
   const setFilter = (filterGroup: string, name: string, value: boolean) => {
     setShallowFilters((prev) => ({
       ...prev,
-      filters: setFilterState(prev.filters, filterGroup, name, value)
+      filters: setFilterState(prev.filters, filterGroup, name, value),
     }));
   };
 
-  const setCheckboxFilter = (
-    filterGroup: string,
-    name: string,
-    checked: boolean
-  ) => {
+  const setCheckboxFilter = (filterGroup: string, name: string, checked: boolean) => {
     setShallowFilters((prev) => ({
       ...prev,
-      filters: setFilterState(prev.filters, filterGroup, name, checked)
+      filters: setFilterState(prev.filters, filterGroup, name, checked),
     }));
   };
 
@@ -76,11 +57,7 @@ export const useFilters = (
   };
 
   const resetFilters = () => {
-    setShallowFilters((prev) => ({
-      ...prev,
-      filters: defaultState?.filters || {},
-      search: ''
-    }));
+    setShallowFilters((prev) => ({ ...prev, filters: defaultState?.filters || {}, search: '' }));
     resetFilterContext(filterSetName);
   };
 
@@ -102,6 +79,6 @@ export const useFilters = (
     setFilter,
     setCheckboxFilter,
     setSearch,
-    setSort
+    setSort,
   };
 };
diff --git a/materials_ui/src/hooks/ui/useLogger.ts b/materials_ui/src/hooks/ui/useLogger.ts
index e06c0c25..35106ff9 100644
--- a/materials_ui/src/hooks/ui/useLogger.ts
+++ b/materials_ui/src/hooks/ui/useLogger.ts
@@ -21,7 +21,7 @@ export const useLogger = () => {
         console.error('Failed to send log:', error);
       }
     },
-    [request]
+    [request],
   );
 
   return { log };
diff --git a/materials_ui/src/hooks/ui/usePageColors.ts b/materials_ui/src/hooks/ui/usePageColors.ts
index 988d9467..e8fd7d20 100644
--- a/materials_ui/src/hooks/ui/usePageColors.ts
+++ b/materials_ui/src/hooks/ui/usePageColors.ts
@@ -7,14 +7,11 @@ import { useEffect, useState } from 'react';
 const FORCED_COLORS_QUERY = '(forced-colors: active)';
 type PdfPageColors = { background: string; foreground: string };
 
-const HIGH_CONTRAST_PAGE_COLORS: PdfPageColors = {
-  background: 'Canvas',
-  foreground: 'CanvasText'
-};
+const HIGH_CONTRAST_PAGE_COLORS: PdfPageColors = { background: 'Canvas', foreground: 'CanvasText' };
 
 export function usePageColors(): PdfPageColors | undefined {
   const [isForcedColors, setIsForcedColors] = useState(() =>
-    Boolean(window.matchMedia?.(FORCED_COLORS_QUERY).matches)
+    Boolean(window.matchMedia?.(FORCED_COLORS_QUERY).matches),
   );
 
   useEffect(() => {
diff --git a/materials_ui/src/hooks/ui/usePager.ts b/materials_ui/src/hooks/ui/usePager.ts
index c6205b42..bb450f50 100644
--- a/materials_ui/src/hooks/ui/usePager.ts
+++ b/materials_ui/src/hooks/ui/usePager.ts
@@ -1,12 +1,8 @@
-import { usePagination } from 'react-use-pagination';
-import { useSearchParams } from 'react-router-dom';
 import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { usePagination } from 'react-use-pagination';
 
-type UsePagerOptions = {
-  totalItems?: number;
-  initialPage?: number;
-  initialPageSize?: number;
-};
+type UsePagerOptions = { totalItems?: number; initialPage?: number; initialPageSize?: number };
 
 export const usePager = (options?: UsePagerOptions) => {
   const usePaginationData = usePagination(options);
@@ -17,10 +13,7 @@ export const usePager = (options?: UsePagerOptions) => {
     if (usePaginationData.currentPage === 0) {
       newQueryCommands.delete('page');
     } else {
-      newQueryCommands.set(
-        'page',
-        (usePaginationData.currentPage + 1 || '').toString()
-      );
+      newQueryCommands.set('page', (usePaginationData.currentPage + 1 || '').toString());
     }
     setQueryParams(newQueryCommands);
   }, [usePaginationData.currentPage]);
diff --git a/materials_ui/src/hooks/ui/useRequest.ts b/materials_ui/src/hooks/ui/useRequest.ts
index 7589b929..34be55fd 100644
--- a/materials_ui/src/hooks/ui/useRequest.ts
+++ b/materials_ui/src/hooks/ui/useRequest.ts
@@ -13,13 +13,13 @@ export const useRequest = () => {
 
   const axiosInstance = axios.create({
     baseURL: `${POLARIS_GATEWAY_URL}/api/`,
-    withCredentials: true
+    withCredentials: true,
   });
 
   axiosInstance.interceptors.request.use(async (config) => {
     const tokenResponse = await msalInstance.acquireTokenSilent({
       ...loginRequest,
-      account: msalInstance.getActiveAccount()!
+      account: msalInstance.getActiveAccount()!,
     });
 
     config.headers['Authorization'] = `Bearer ${tokenResponse.accessToken}`;
@@ -47,16 +47,14 @@ export const useRequest = () => {
 
         if (
           !error.request.responseURL.includes('/uma-reclassify') &&
-          !/^\/api\/urns\/[^/]+\/cases$/.test(
-            new URL(error.request.responseURL).pathname
-          )
+          !/^\/api\/urns\/[^/]+\/cases$/.test(new URL(error.request.responseURL).pathname)
         ) {
           return navigate(`/${getRoute('SERVER_ERROR', false)}`);
         }
       }
 
       return Promise.reject(error);
-    }
+    },
   );
 
   return axiosInstance;
@@ -67,13 +65,13 @@ export const useAxiosInstance = () => {
 
   const axiosInstance = axios.create({
     baseURL: `${POLARIS_GATEWAY_URL}/api/`,
-    withCredentials: true
+    withCredentials: true,
   });
 
   axiosInstance.interceptors.request.use(async (config) => {
     const tokenResponse = await msalInstance.acquireTokenSilent({
       ...loginRequest,
-      account: msalInstance.getActiveAccount()!
+      account: msalInstance.getActiveAccount()!,
     });
 
     config.headers['Authorization'] = `Bearer ${tokenResponse.accessToken}`;
diff --git a/materials_ui/src/hooks/ui/useTableActions.ts b/materials_ui/src/hooks/ui/useTableActions.ts
index dd7ae84b..a213536c 100644
--- a/materials_ui/src/hooks/ui/useTableActions.ts
+++ b/materials_ui/src/hooks/ui/useTableActions.ts
@@ -23,7 +23,7 @@ export const useTableActions = ({
   refreshData,
   setBanner,
   deselectItem,
-  resetBanner
+  resetBanner,
 }: TableActionsProps) => {
   const { getRoute } = useAppRoute();
   const navigate = useNavigate();
@@ -32,37 +32,26 @@ export const useTableActions = ({
   const [isReadStatusUpdating, setIsReadStatusUpdating] = useState(false);
 
   const handleReclassifyClick = () => {
-    navigate(getRoute('RECLASSIFICATION'), {
-      state: { row: selectedItems[0] }
-    });
+    navigate(getRoute('RECLASSIFICATION'), { state: { row: selectedItems[0] } });
   };
 
   const handleDiscardClick = (returnToUrl: string) => {
     navigate(getRoute('DISCARD'), {
-      state: { selectedMaterial: selectedItems[0], returnTo: returnToUrl }
+      state: { selectedMaterial: selectedItems[0], returnTo: returnToUrl },
     });
   };
 
   const handleEditClick = (material: CaseMaterialsType, returnTo: string) => {
-    navigate(getRoute('UPDATE_MATERIAL'), {
-      state: { returnTo, row: material }
-    });
+    navigate(getRoute('UPDATE_MATERIAL'), { state: { returnTo, row: material } });
   };
 
   const handleRedactClick = (materialId: number) => {
-    navigate(getRoute('REVIEW_REDACT'), {
-      state: { materialId: `CMS-${materialId}` }
-    });
+    navigate(getRoute('REVIEW_REDACT'), { state: { materialId: `CMS-${materialId}` } });
   };
 
-  const handleUnusedClick = (
-    materials: CaseMaterialsType[],
-    returnTo: string
-  ) => {
+  const handleUnusedClick = (materials: CaseMaterialsType[], returnTo: string) => {
     resetBanner();
-    navigate(getRoute('RECLASSIFY_TO_UNUSED'), {
-      state: { materials, returnTo }
-    });
+    navigate(getRoute('RECLASSIFY_TO_UNUSED'), { state: { materials, returnTo } });
   };
 
   const determineReadStatusLabel = (items: CaseMaterialsType[]) => {
@@ -83,7 +72,7 @@ export const useTableActions = ({
         await trigger({
           materialId: row.materialId,
           state: row.readStatus === READ_STATUS.READ ? 'unread' : 'read',
-          correspondenceId: uuidv4()
+          correspondenceId: uuidv4(),
         });
       }
 
@@ -93,15 +82,14 @@ export const useTableActions = ({
       setBanner({
         type: 'success',
         header: 'Read status updated',
-        content: 'Selected items have been updated.'
+        content: 'Selected items have been updated.',
       });
     } catch (error) {
       console.error('Error updating read status:', error);
       setBanner({
         type: 'error',
         header: 'Error updating read status',
-        content:
-          'There was an error updating the read status of the selected items.'
+        content: 'There was an error updating the read status of the selected items.',
       });
     } finally {
       setIsReadStatusUpdating(false);
@@ -116,6 +104,6 @@ export const useTableActions = ({
     handleUnusedClick,
     determineReadStatusLabel,
     handleReadStatusClick,
-    isReadStatusUpdating
+    isReadStatusUpdating,
   };
 };
diff --git a/materials_ui/src/hooks/ui/useUserGroupsFeatureFlag.ts b/materials_ui/src/hooks/ui/useUserGroupsFeatureFlag.ts
index 936cba76..94ce6554 100644
--- a/materials_ui/src/hooks/ui/useUserGroupsFeatureFlag.ts
+++ b/materials_ui/src/hooks/ui/useUserGroupsFeatureFlag.ts
@@ -3,8 +3,7 @@ import { PRIVATE_BETA_FEATURE_USER_GROUPS } from '../../constants';
 
 export type UserGroupsFeatureFlags = { bulkRedaction: boolean };
 
-const featureFlagsDisabled =
-  import.meta.env.VITE_DISABLE_FEATURE_FLAGS === 'true';
+const featureFlagsDisabled = import.meta.env.VITE_DISABLE_FEATURE_FLAGS === 'true';
 
 export const useUserGroupsFeatureFlag = (): UserGroupsFeatureFlags => {
   const { instance } = useMsal();
diff --git a/materials_ui/src/index.tsx b/materials_ui/src/index.tsx
index f293abd8..fd856d2d 100644
--- a/materials_ui/src/index.tsx
+++ b/materials_ui/src/index.tsx
@@ -19,7 +19,7 @@ if (import.meta.env.DEV && !import.meta.env.VITE_E2E) {
   const { worker } = await import('./mocks/browser');
   await worker.start({
     onUnhandledRequest: 'bypass',
-    serviceWorker: { url: `${import.meta.env.BASE_URL}mockServiceWorker.js` }
+    serviceWorker: { url: `${import.meta.env.BASE_URL}mockServiceWorker.js` },
   });
 }
 
@@ -34,13 +34,7 @@ if (redirectResult?.account) {
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <MsalProvider instance={msalInstance}>
-    <SWRConfig
-      value={{
-        errorRetryCount: 0,
-        revalidateOnFocus: false,
-        shouldRetryOnError: false
-      }}
-    >
+    <SWRConfig value={{ errorRetryCount: 0, revalidateOnFocus: false, shouldRetryOnError: false }}>
       <BrowserRouter
         basename={import.meta.env.BASE_URL}
         future={{ v7_startTransition: false, v7_relativeSplatPath: false }}
@@ -52,5 +46,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         </AppContextProvider>
       </BrowserRouter>
     </SWRConfig>
-  </MsalProvider>
+  </MsalProvider>,
 );
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/BulkRedactionForm.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/BulkRedactionForm.tsx
index ed9913b3..8e070601 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/BulkRedactionForm.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/BulkRedactionForm.tsx
@@ -1,8 +1,5 @@
 import { useState } from 'react';
-import {
-  RedactionTypeSelect,
-  TRedactionType
-} from '../PdfRedactor/RedactionTypeSelect';
+import { RedactionTypeSelect, TRedactionType } from '../PdfRedactor/RedactionTypeSelect';
 import { GovUkButton } from '../PdfRedactor/templates/GovUkButton';
 
 export type TBulkSearchSummary =
@@ -23,10 +20,8 @@ export type TBulkProps = {
 const BulkSearchStatusText = (p: { search: TBulkSearchSummary }) => {
   if (p.search.status === 'idle') return null;
   if (p.search.status === 'loading') return <span>Searching…</span>;
-  if (p.search.status === 'error')
-    return <span>Couldn’t search this document.</span>;
-  if (p.search.count === 0)
-    return <span>No other matches found in the document.</span>;
+  if (p.search.status === 'error') return <span>Couldn’t search this document.</span>;
+  if (p.search.count === 0) return <span>No other matches found in the document.</span>;
   return (
     <span>
       This phrase appears <strong>{p.search.count}</strong> time
@@ -41,8 +36,7 @@ export const BulkRedactionForm = (p: {
 }) => {
   const [redactionType, setRedactionType] = useState<TRedactionType>();
 
-  const completedSearch =
-    p.bulkProps.search.status === 'done' ? p.bulkProps.search : undefined;
+  const completedSearch = p.bulkProps.search.status === 'done' ? p.bulkProps.search : undefined;
   const matchCount = completedSearch?.count ?? 0;
   const hasMatches = matchCount >= 1;
   const hasMultipleMatches = matchCount >= 2;
@@ -58,11 +52,7 @@ export const BulkRedactionForm = (p: {
 
   return (
     <div style={{ minWidth: '360px' }}>
-      <RedactionTypeSelect
-        initFocus
-        fullWidth
-        onRedactionTypeChange={setRedactionType}
-      />
+      <RedactionTypeSelect initFocus fullWidth onRedactionTypeChange={setRedactionType} />
 
       {p.bulkProps.search.status !== 'idle' && (
         <div style={{ marginTop: '12px', fontSize: '16px' }} aria-live="polite">
@@ -72,11 +62,7 @@ export const BulkRedactionForm = (p: {
 
       {!completedSearch && (
         <div style={{ display: 'flex', gap: '8px', marginTop: '12px' }}>
-          <GovUkButton
-            style={bulkButtonStyle}
-            disabled={!redactionType}
-            onClick={handleRedactThis}
-          >
+          <GovUkButton style={bulkButtonStyle} disabled={!redactionType} onClick={handleRedactThis}>
             Redact this text
           </GovUkButton>
           <GovUkButton
@@ -85,9 +71,7 @@ export const BulkRedactionForm = (p: {
             disabled={!redactionType || p.bulkProps.search.status === 'loading'}
             onClick={p.bulkProps.onFindMatchingText}
           >
-            {p.bulkProps.search.status === 'error'
-              ? 'Try again'
-              : 'Find matching text'}
+            {p.bulkProps.search.status === 'error' ? 'Try again' : 'Find matching text'}
           </GovUkButton>
         </div>
       )}
@@ -101,11 +85,7 @@ export const BulkRedactionForm = (p: {
           >
             View previous
           </GovUkButton>
-          <GovUkButton
-            variant="secondary"
-            style={bulkButtonStyle}
-            onClick={p.bulkProps.onViewNext}
-          >
+          <GovUkButton variant="secondary" style={bulkButtonStyle} onClick={p.bulkProps.onViewNext}>
             View next
           </GovUkButton>
         </div>
@@ -113,11 +93,7 @@ export const BulkRedactionForm = (p: {
 
       {completedSearch && (
         <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
-          <GovUkButton
-            style={bulkButtonStyle}
-            disabled={!redactionType}
-            onClick={handleRedactThis}
-          >
+          <GovUkButton style={bulkButtonStyle} disabled={!redactionType} onClick={handleRedactThis}>
             Redact this
           </GovUkButton>
           {hasMultipleMatches && (
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index e2501bc2..d13738b7 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -16,59 +16,39 @@ import { GovUkButton } from '../PdfRedactor/templates/GovUkButton';
 import { TCoord, TRedaction } from '../PdfRedactor/utils/coordUtils';
 import { TIndexedDeletion } from '../PdfRedactor/utils/deletionUtils';
 import { TMode } from '../PdfRedactor/utils/modeUtils';
-import {
-  TIndexedRotation,
-  TRotation
-} from '../PdfRedactor/utils/rotationUtils';
-import type {
-  THighlightLayer,
-  TSearchHighlight
-} from '../PdfRedactor/utils/searchHighlightUtils';
-import {
-  TTriggerData,
-  useTriggerListener
-} from '../PdfRedactor/utils/useTriggger';
+import { TIndexedRotation, TRotation } from '../PdfRedactor/utils/rotationUtils';
+import type { THighlightLayer, TSearchHighlight } from '../PdfRedactor/utils/searchHighlightUtils';
+import { TTriggerData, useTriggerListener } from '../PdfRedactor/utils/useTriggger';
 import { useWindowMouseListener } from '../PdfRedactor/utils/useWindowMouseListener';
 import { useBulkRedactionFlow } from './hooks/useBulkRedactionFlow';
 import { useDocumentCheckOutRequest } from './hooks/useDocumentCheckOutRequest';
 import { RedactionPopover } from './RedactionPopover';
 import {
   combineDeletionsWithDeletionDetails,
-  TDeletionDetail
+  TDeletionDetail,
 } from './utils/combineRedactionsDeletions';
 import { saveDeletions } from './utils/saveDeletionsUtils';
 import { saveRedactions } from './utils/saveRedactionsUtils';
 import { saveRotations } from './utils/saveRotationsUtils';
 
-const presentationWriteFlagToRedactionDisabledMessageMap: {
-  [k: string]: string;
-} = {
-  IsRedactionServiceOffline:
-    'Redaction is currently unavailable and undergoing maintenance.',
+const presentationWriteFlagToRedactionDisabledMessageMap: { [k: string]: string } = {
+  IsRedactionServiceOffline: 'Redaction is currently unavailable and undergoing maintenance.',
   OnlyAvailableInCms: 'This document can only be redacted in CMS.',
   DocTypeNotAllowed: 'Redaction is not supported for this document type.',
   OriginalFileTypeNotAllowed: 'Redaction is not supported for this file type.',
   IsDispatched: 'This is a dispatched document.',
   IsPageRotationModeOn:
-    'Redaction is unavailable in page rotation mode, please turn off page rotation to continue with redaction.'
+    'Redaction is unavailable in page rotation mode, please turn off page rotation to continue with redaction.',
 };
-const getDocumentRedactionDisabledMessage = (
-  doc: TDocument | null | undefined
-) => {
+const getDocumentRedactionDisabledMessage = (doc: TDocument | null | undefined) => {
   const writePresentationFlag = doc?.presentationFlags?.write;
   if (!writePresentationFlag) return null;
 
-  const value =
-    presentationWriteFlagToRedactionDisabledMessageMap[
-      `${writePresentationFlag}`
-    ];
+  const value = presentationWriteFlagToRedactionDisabledMessageMap[`${writePresentationFlag}`];
   return value ? value : null;
 };
 
-const createCheckoutMessageFromCheckoutResponse = (p: {
-  action?: string;
-  message?: string;
-}) =>
+const createCheckoutMessageFromCheckoutResponse = (p: { action?: string; message?: string }) =>
   p.message
     ? `It is not possible to ${p.action} as ${p.message}. Please try again later.`
     : 'Something has gone wrong, please try again later';
@@ -97,26 +77,18 @@ export const CaseworkPdfRedactorWrapper = (p: {
   checkInDocumentTriggerData: TTriggerData;
 }) => {
   const [isDocumentCheckedOut, setIsDocumentCheckedOut] = useState(false);
-  const [selectedRedactionTypes, setSelectedRedactionTypes] = useState<
-    TRedactionType[]
-  >([]);
+  const [selectedRedactionTypes, setSelectedRedactionTypes] = useState<TRedactionType[]>([]);
 
-  const documentCheckOutRequest = useDocumentCheckOutRequest({
-    caseId: p.caseId,
-    urn: p.urn
-  });
+  const documentCheckOutRequest = useDocumentCheckOutRequest({ caseId: p.caseId, urn: p.urn });
   const checkInDocument = async () => {
     if (!isDocumentCheckedOut) return;
     const resp = await documentCheckOutRequest.checkIn({
       parentId: p.parentId,
-      childId: p.childId
+      childId: p.childId,
     });
     if (resp.success) setIsDocumentCheckedOut(false);
   };
-  useTriggerListener({
-    triggerData: p.checkInDocumentTriggerData,
-    fn: () => checkInDocument()
-  });
+  useTriggerListener({ triggerData: p.checkInDocumentTriggerData, fn: () => checkInDocument() });
 
   useEffect(() => {
     return () => {
@@ -130,24 +102,17 @@ export const CaseworkPdfRedactorWrapper = (p: {
 
   const [deletionDetails, setDeletionDetails] = useState<TDeletionDetail[]>([]);
 
-  const documentCategory = p.document
-    ? categoriseDocument(p.document)
-    : undefined;
+  const documentCategory = p.document ? categoriseDocument(p.document) : undefined;
   const isUnredactableDocumentCategory =
     documentCategory &&
-    (['review', 'defendantPreCons'] as TCategoryName[]).includes(
-      documentCategory
-    );
-  const isDocumentDispatched =
-    p.document?.presentationFlags?.write === 'IsDispatched';
+    (['review', 'defendantPreCons'] as TCategoryName[]).includes(documentCategory);
+  const isDocumentDispatched = p.document?.presentationFlags?.write === 'IsDispatched';
 
   const cleanupDeletionDetails = () => {
     const deletionIds = Object.values(indexedDeletion)
       .filter((del) => del.isDeleted)
       .map((del) => del.id);
-    setDeletionDetails((prev) =>
-      prev.filter((detail) => deletionIds.includes(detail.deletionId))
-    );
+    setDeletionDetails((prev) => prev.filter((detail) => deletionIds.includes(detail.deletionId)));
   };
 
   useEffect(() => cleanupDeletionDetails(), [indexedDeletion]);
@@ -166,7 +131,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
     childId: p.childId,
     parentId: p.parentId,
     setRedactions,
-    setSelectedRedactionTypes
+    setSelectedRedactionTypes,
   });
 
   const searchLayer: THighlightLayer = {
@@ -174,17 +139,18 @@ export const CaseworkPdfRedactorWrapper = (p: {
     focusedId:
       p.focusedSearchIndex !== undefined
         ? p.searchHighlights?.[p.focusedSearchIndex]?.id
-        : undefined
+        : undefined,
   };
 
-  const [documentIsCheckedOutPopupProps, setDocumentIsCheckedOutPopupProps] =
-    useState<{ action: string; message: string } | null>(null);
-  const [
-    documentIsUnableToBeRedactedPopupProps,
-    setDocumentIsUnableToBeRedactedPopupProps
-  ] = useState<{ message: string } | null>(null);
-  const [redactionDisabledModalProps, setRedactionDisabledModalProps] =
+  const [documentIsCheckedOutPopupProps, setDocumentIsCheckedOutPopupProps] = useState<{
+    action: string;
+    message: string;
+  } | null>(null);
+  const [documentIsUnableToBeRedactedPopupProps, setDocumentIsUnableToBeRedactedPopupProps] =
     useState<{ message: string } | null>(null);
+  const [redactionDisabledModalProps, setRedactionDisabledModalProps] = useState<{
+    message: string;
+  } | null>(null);
 
   const [deleteReasonPopupProps, setDeleteReasonPopupProps] = useState<Omit<
     ComponentProps<typeof DeletionReasonForm> & TCoord,
@@ -201,11 +167,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
   };
   const unrotatePage = (pageNumber: number) => {
     setIndexedRotation((prev) => {
-      const noRotation: TRotation = {
-        id: crypto.randomUUID(),
-        pageNumber,
-        rotationDegrees: 0
-      };
+      const noRotation: TRotation = { id: crypto.randomUUID(), pageNumber, rotationDegrees: 0 };
       return { ...prev, [pageNumber]: noRotation };
     });
   };
@@ -214,7 +176,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
     if (isDocumentCheckedOut) return { success: true } as const;
     const checkoutResponse = await documentCheckOutRequest.checkOut({
       parentId: p.parentId,
-      childId: p.childId
+      childId: p.childId,
     });
     setIsDocumentCheckedOut(checkoutResponse.success);
     return checkoutResponse;
@@ -271,8 +233,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
         })()}
       {documentIsUnableToBeRedactedPopupProps &&
         (() => {
-          const closeModal = () =>
-            setDocumentIsUnableToBeRedactedPopupProps(null);
+          const closeModal = () => setDocumentIsUnableToBeRedactedPopupProps(null);
 
           return (
             <PdfRedactorCenteredModal
@@ -292,10 +253,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
           );
         })()}
       {bulkFlow.popupProps && (
-        <RedactionPopover
-          popupProps={bulkFlow.popupProps}
-          {...bulkFlow.popoverProps}
-        />
+        <RedactionPopover popupProps={bulkFlow.popupProps} {...bulkFlow.popoverProps} />
       )}
       {deleteReasonPopupProps &&
         (() => {
@@ -352,10 +310,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
 
           const popoverAnchor = (() => {
             if (highlightedText) {
-              const rect = window
-                .getSelection()
-                ?.getRangeAt(0)
-                ?.getBoundingClientRect();
+              const rect = window.getSelection()?.getRangeAt(0)?.getBoundingClientRect();
               if (rect && rect.width > 0) {
                 return { x: (rect.left + rect.right) / 2, y: rect.top };
               }
@@ -364,14 +319,10 @@ export const CaseworkPdfRedactorWrapper = (p: {
           })();
 
           const checkoutResponsePromise = checkCheckoutStatus();
-          const redactionDisabledMessage = getDocumentRedactionDisabledMessage(
-            p.document
-          );
+          const redactionDisabledMessage = getDocumentRedactionDisabledMessage(p.document);
           if (redactionDisabledMessage) {
             removeRedactions(add.map((x) => x.id));
-            setRedactionDisabledModalProps({
-              message: redactionDisabledMessage
-            });
+            setRedactionDisabledModalProps({ message: redactionDisabledMessage });
             return;
           }
           const checkoutResponse = await checkoutResponsePromise;
@@ -379,7 +330,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
             removeRedactions(add.map((x) => x.id));
             const message = createCheckoutMessageFromCheckoutResponse({
               action: 'redact',
-              message: checkoutResponse.message
+              message: checkoutResponse.message,
             });
             setDocumentIsCheckedOutPopupProps({ action: 'redact', message });
             return;
@@ -389,7 +340,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
             x: popoverAnchor.x,
             y: popoverAnchor.y,
             redactionIds: add.map((x) => x.id),
-            highlightedText
+            highlightedText,
           });
         }}
         onRemoveRedactions={() => {}}
@@ -402,16 +353,13 @@ export const CaseworkPdfRedactorWrapper = (p: {
               caseId: p.caseId,
               childId: p.childId,
               parentId: p.parentId,
-              redactions
+              redactions,
             });
             setRedactions([]);
             trackAction('Redacted', { materialId: p.parentId });
             p.onRedactionSaveStatusChange('saved');
             if (p.document) p.onModification(p.document);
-            await documentCheckOutRequest.checkIn({
-              parentId: p.parentId,
-              childId: p.childId
-            });
+            await documentCheckOutRequest.checkIn({ parentId: p.parentId, childId: p.childId });
           } catch (error) {
             console.error('Failed to save redactions:', error);
             setRedactions([]);
@@ -420,11 +368,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
           }
         }}
         onShowRedactionLogModal={(redactions) => {
-          p.onShowRedactionLogModal({
-            mode: 'list',
-            redactions,
-            selectedRedactionTypes
-          });
+          p.onShowRedactionLogModal({ mode: 'list', redactions, selectedRedactionTypes });
         }}
         indexedRotation={indexedRotation}
         onRotationsChange={(newRotations) => setIndexedRotation(newRotations)}
@@ -437,7 +381,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
 
           const message = createCheckoutMessageFromCheckoutResponse({
             action: 'rotate',
-            message: checkoutResponse.message
+            message: checkoutResponse.message,
           });
           setDocumentIsCheckedOutPopupProps({ action: 'rotate', message });
         }}
@@ -452,7 +396,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
 
             const message = createCheckoutMessageFromCheckoutResponse({
               action: 'delete',
-              message: checkoutResponse.message
+              message: checkoutResponse.message,
             });
             setDocumentIsCheckedOutPopupProps({ action: 'delete', message });
             return;
@@ -460,7 +404,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
 
           const newDeletionDetails = {
             deletionId: add.id,
-            randomId: `This deletion does ${crypto.randomUUID()}`
+            randomId: `This deletion does ${crypto.randomUUID()}`,
           };
           setDeletionDetails((prev) => [...prev, newDeletionDetails]);
           setDeleteReasonPopupProps(() => ({
@@ -469,14 +413,14 @@ export const CaseworkPdfRedactorWrapper = (p: {
             pageNumber: add.pageNumber,
             documentId: 'This document does not exist',
             urn: 'This URN does not exist',
-            caseId: 'This case does not exist'
+            caseId: 'This case does not exist',
           }));
         }}
         onDeletionRemove={() => {}}
         onSaveDeletions={async () => {
           combineDeletionsWithDeletionDetails({
             deletions: Object.values(indexedDeletion),
-            deletionDetails
+            deletionDetails,
           });
 
           await saveDeletions({
@@ -485,13 +429,10 @@ export const CaseworkPdfRedactorWrapper = (p: {
             caseId: p.caseId,
             childId: p.childId,
             parentId: p.parentId,
-            deletions: Object.values(indexedDeletion)
+            deletions: Object.values(indexedDeletion),
           });
           if (p.document) p.onModification(p.document);
-          await documentCheckOutRequest.checkIn({
-            parentId: p.parentId,
-            childId: p.childId
-          });
+          await documentCheckOutRequest.checkIn({ parentId: p.parentId, childId: p.childId });
         }}
         onSaveRotations={async () => {
           const checkoutResponse = await checkCheckoutStatus();
@@ -499,7 +440,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
           if (!checkoutResponse.success) {
             const message = createCheckoutMessageFromCheckoutResponse({
               action: 'rotate',
-              message: checkoutResponse.message
+              message: checkoutResponse.message,
             });
 
             setDocumentIsCheckedOutPopupProps({ action: 'rotate', message });
@@ -511,13 +452,10 @@ export const CaseworkPdfRedactorWrapper = (p: {
             caseId: p.caseId,
             childId: p.childId,
             parentId: p.parentId,
-            rotations: Object.values(indexedRotation)
+            rotations: Object.values(indexedRotation),
           });
           if (p.document) p.onModification(p.document);
-          await documentCheckOutRequest.checkIn({
-            parentId: p.parentId,
-            childId: p.childId
-          });
+          await documentCheckOutRequest.checkIn({ parentId: p.parentId, childId: p.childId });
         }}
         initRedactions={p.initRedactions}
         onNumOfDocPagesChanged={p.onNumOfPagesDocumentChange}
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkRedactionFlow.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkRedactionFlow.ts
index d8923f53..4d9cb658 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkRedactionFlow.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkRedactionFlow.ts
@@ -20,9 +20,7 @@ export const useBulkRedactionFlow = (p: {
 }) => {
   const featureFlags = useUserGroupsFeatureFlag();
 
-  const [popupProps, setPopupProps] = useState<TRedactionPopupProps | null>(
-    null
-  );
+  const [popupProps, setPopupProps] = useState<TRedactionPopupProps | null>(null);
 
   const removeRedactions = (ids: string[]) =>
     p.setRedactions((prev) => prev.filter((r) => !ids.includes(r.id)));
@@ -32,7 +30,7 @@ export const useBulkRedactionFlow = (p: {
     urn: p.urn,
     caseId: p.caseId,
     versionId: p.childId,
-    documentId: p.parentId
+    documentId: p.parentId,
   });
 
   // pin the popover above whichever match is currently focused
@@ -40,14 +38,10 @@ export const useBulkRedactionFlow = (p: {
     const focusedId = bulkSearch.focusedCandidate?.id;
     if (!focusedId) return;
 
-    const elm = document.querySelector(
-      `[data-text-highlight-id="${focusedId}"]`
-    );
+    const elm = document.querySelector(`[data-text-highlight-id="${focusedId}"]`);
     if (!elm) return;
     const matchTop = elm.getBoundingClientRect().top;
-    setPopupProps((prev) =>
-      prev ? { ...prev, x: window.innerWidth / 2, y: matchTop } : prev
-    );
+    setPopupProps((prev) => (prev ? { ...prev, x: window.innerWidth / 2, y: matchTop } : prev));
   }, [bulkSearch.focusedCandidate?.id]);
 
   const trimmedSearchText = popupProps?.highlightedText?.trim() ?? '';
@@ -65,7 +59,7 @@ export const useBulkRedactionFlow = (p: {
   const onSaveSingle = (currentType: TRedactionType) => {
     p.setSelectedRedactionTypes((prev) => [
       ...prev,
-      { id: currentType.id, name: currentType.name }
+      { id: currentType.id, name: currentType.name },
     ]);
     closePopover();
   };
@@ -85,7 +79,7 @@ export const useBulkRedactionFlow = (p: {
     p.setRedactions((prev) => [...prev, focused]);
     p.setSelectedRedactionTypes((prev) => [
       ...prev,
-      { id: currentType.id, name: currentType.name }
+      { id: currentType.id, name: currentType.name },
     ]);
     const willBeEmpty = bulkSearch.candidates.length === 1;
     bulkSearch.removeFocused();
@@ -97,10 +91,7 @@ export const useBulkRedactionFlow = (p: {
     p.setRedactions((prev) => [...prev, ...bulkSearch.candidates]);
     p.setSelectedRedactionTypes((prev) => [
       ...prev,
-      ...Array(bulkSearch.candidates.length).fill({
-        id: currentType.id,
-        name: currentType.name
-      })
+      ...Array(bulkSearch.candidates.length).fill({ id: currentType.id, name: currentType.name }),
     ]);
     closePopover();
   };
@@ -116,19 +107,19 @@ export const useBulkRedactionFlow = (p: {
           onViewPrevious: bulkSearch.goPrev,
           onViewNext: bulkSearch.goNext,
           onRedactFocused: acceptFocusedMatch,
-          onRedactAll: acceptAllMatches
+          onRedactAll: acceptAllMatches,
         }
       : undefined;
 
   const highlightLayer: THighlightLayer = {
     highlights: convertCandidatesToSearchHighlights(bulkSearch.candidates),
-    focusedId: bulkSearch.focusedCandidate?.id
+    focusedId: bulkSearch.focusedCandidate?.id,
   };
 
   return {
     highlightLayer,
     popupProps,
     openPopover: (props: TRedactionPopupProps) => setPopupProps(props),
-    popoverProps: { onClose, onSaveSingle, bulkProps }
+    popoverProps: { onClose, onSaveSingle, bulkProps },
   };
 };
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkSearch.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkSearch.ts
index fa8ff839..10b11bba 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkSearch.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useBulkSearch.ts
@@ -22,7 +22,7 @@ const wait = (ms: number, signal: AbortSignal) =>
         clearTimeout(timeoutId);
         resolve();
       },
-      { once: true }
+      { once: true },
     );
   });
 
@@ -33,9 +33,7 @@ export const useBulkSearch = (p: {
   versionId: number;
   documentId: string;
 }) => {
-  const [state, setState] = useState<TBulkSearchInternalState>({
-    status: 'idle'
-  });
+  const [state, setState] = useState<TBulkSearchInternalState>({ status: 'idle' });
   const abortRef = useRef<AbortController | null>(null);
 
   const clear = useCallback(() => {
@@ -60,7 +58,7 @@ export const useBulkSearch = (p: {
             versionId: p.versionId,
             documentId: p.documentId,
             searchText,
-            signal: controller.signal
+            signal: controller.signal,
           });
           if (controller.signal.aborted) return undefined;
 
@@ -94,7 +92,7 @@ export const useBulkSearch = (p: {
         return undefined;
       }
     },
-    [p.axiosInstance, p.urn, p.caseId, p.versionId, p.documentId]
+    [p.axiosInstance, p.urn, p.caseId, p.versionId, p.documentId],
   );
 
   const nudge = (delta: number) =>
@@ -110,14 +108,12 @@ export const useBulkSearch = (p: {
   const removeFocused = useCallback(() => {
     setState((prev) => {
       if (prev.status !== 'done' || prev.candidates.length === 0) return prev;
-      const remaining = prev.candidates.filter(
-        (_, i) => i !== prev.focusedIndex
-      );
+      const remaining = prev.candidates.filter((_, i) => i !== prev.focusedIndex);
       if (remaining.length === 0) return { status: 'idle' };
       return {
         status: 'done',
         candidates: remaining,
-        focusedIndex: Math.min(prev.focusedIndex, remaining.length - 1)
+        focusedIndex: Math.min(prev.focusedIndex, remaining.length - 1),
       };
     });
   }, []);
@@ -136,6 +132,6 @@ export const useBulkSearch = (p: {
     clear,
     goNext,
     goPrev,
-    removeFocused
+    removeFocused,
   };
 };
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useDocumentCheckOutRequest.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useDocumentCheckOutRequest.ts
index e12d09a6..131043fe 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useDocumentCheckOutRequest.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/hooks/useDocumentCheckOutRequest.ts
@@ -7,9 +7,7 @@ import { useAxiosInstance } from '../../../caseWorkApp/components/utils/getData'
 type UseDocumentCheckoutOptions = { caseId?: number; urn?: string };
 
 const extractReadableMessageFromError = (error: unknown) => {
-  const errorSchema = z.object({
-    response: z.object({ data: z.object({ Error: z.string() }) })
-  });
+  const errorSchema = z.object({ response: z.object({ data: z.object({ Error: z.string() }) }) });
   const parsed = errorSchema.safeParse(error);
   if (!parsed.success) return null;
 
@@ -27,7 +25,7 @@ const checkOutDocumentFromAxiosInstance = async (p: {
 }) => {
   try {
     const response = await p.axiosInstance.post(
-      `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/checkout`
+      `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/checkout`,
     );
 
     return { success: true, data: { response } } as const;
@@ -41,11 +39,7 @@ const checkOutDocumentFromAxiosInstance = async (p: {
       return { success: false, status: 'locked', message } as const;
     }
 
-    return {
-      success: false,
-      status: 'generic error',
-      message: defaultMessage
-    } as const;
+    return { success: false, status: 'generic error', message: defaultMessage } as const;
   }
 };
 
@@ -59,32 +53,24 @@ export const checkInDocumentFromAxiosInstance = async (p: {
   try {
     await p.axiosInstance.delete(
       `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/checkout`,
-      { fetchOptions: { keepalive: true } }
+      { fetchOptions: { keepalive: true } },
     );
 
     return { success: true } as const;
   } catch (error: unknown) {
-    if (!!error && typeof error === 'object' && 'message' in error)
-      console.error(error?.message);
+    if (!!error && typeof error === 'object' && 'message' in error) console.error(error?.message);
 
     return { success: false } as const;
   }
 };
 
-export const useDocumentCheckOutRequest = ({
-  caseId,
-  urn
-}: UseDocumentCheckoutOptions) => {
+export const useDocumentCheckOutRequest = ({ caseId, urn }: UseDocumentCheckoutOptions) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const axiosInstance = useAxiosInstance();
 
-  const checkOut = async (fnProps: {
-    parentId: string;
-    childId: number | string;
-  }) => {
+  const checkOut = async (fnProps: { parentId: string; childId: number | string }) => {
     if (!urn) return { success: false, message: 'no urn provided' } as const;
-    if (!caseId)
-      return { success: false, message: 'no caseId provided' } as const;
+    if (!caseId) return { success: false, message: 'no caseId provided' } as const;
 
     setIsLoading(true);
     const resp = await checkOutDocumentFromAxiosInstance({
@@ -92,7 +78,7 @@ export const useDocumentCheckOutRequest = ({
       urn,
       caseId,
       parentId: fnProps.parentId,
-      childId: fnProps.childId
+      childId: fnProps.childId,
     });
     setIsLoading(false);
 
@@ -101,8 +87,7 @@ export const useDocumentCheckOutRequest = ({
 
   const checkIn = async (fnProps: { parentId: string; childId: number }) => {
     if (!urn) return { success: false, message: 'no urn provided' } as const;
-    if (!caseId)
-      return { success: false, message: 'no caseId provided' } as const;
+    if (!caseId) return { success: false, message: 'no caseId provided' } as const;
 
     setIsLoading(true);
     const resp = await checkInDocumentFromAxiosInstance({
@@ -110,7 +95,7 @@ export const useDocumentCheckOutRequest = ({
       urn,
       caseId,
       parentId: fnProps.parentId,
-      childId: fnProps.childId
+      childId: fnProps.childId,
     });
     setIsLoading(false);
 
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/bulkSearchDocumentUtils.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/bulkSearchDocumentUtils.ts
index 94d1faf3..f82787bd 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/bulkSearchDocumentUtils.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/bulkSearchDocumentUtils.ts
@@ -19,10 +19,7 @@ export type TBulkSearchResponse = {
   isNotFound: boolean;
 };
 
-export type TBulkSearchResult = {
-  status: number;
-  data: TBulkSearchResponse | null;
-};
+export type TBulkSearchResult = { status: number; data: TBulkSearchResponse | null };
 
 export const bulkSearchDocument = async (p: {
   axiosInstance: AxiosInstance;
@@ -35,11 +32,7 @@ export const bulkSearchDocument = async (p: {
 }): Promise<TBulkSearchResult> => {
   const response = await p.axiosInstance.get<TBulkSearchResponse>(
     `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.documentId}/versions/${p.versionId}/search`,
-    {
-      params: { SearchText: p.searchText },
-      signal: p.signal,
-      validateStatus: () => true
-    }
+    { params: { SearchText: p.searchText }, signal: p.signal, validateStatus: () => true },
   );
   return { status: response.status, data: response.data ?? null };
 };
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/combineRedactionsDeletions.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/combineRedactionsDeletions.ts
index 02ca2351..e8608200 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/combineRedactionsDeletions.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/combineRedactionsDeletions.ts
@@ -10,9 +10,7 @@ export const combineRedactionsWithRedactionDetails = (p: {
 }) => {
   const redactionsWithDetails = p.redactions
     .map((x) => {
-      const thisDetails = p.redactionDetails.find(
-        (y) => y.redactionId === x.id
-      );
+      const thisDetails = p.redactionDetails.find((y) => y.redactionId === x.id);
       if (!thisDetails) return undefined;
       return { ...x, ...thisDetails };
     })
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveDeletionsUtils.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveDeletionsUtils.ts
index f9dcef29..f1f54746 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveDeletionsUtils.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveDeletionsUtils.ts
@@ -13,13 +13,13 @@ export const saveDeletions = async (p: {
     redactions: [],
     documentModifications: p.deletions.map((red) => ({
       pageIndex: red.pageNumber,
-      operation: 'delete'
-    }))
+      operation: 'delete',
+    })),
   };
 
   const response = await p.axiosInstance.put(
     `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/redact`,
-    payload
+    payload,
   );
 
   return response.data;
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRedactionsUtils.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRedactionsUtils.ts
index 8d4e5e0f..f88daf7a 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRedactionsUtils.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRedactionsUtils.ts
@@ -10,12 +10,8 @@ export const saveRedactions = async (p: {
   redactions: TRedaction[];
 }) => {
   const redactionsIndexedOnPageNumber: { [k: number]: TRedaction[] } = {};
-  p.redactions.forEach(
-    (red) => (redactionsIndexedOnPageNumber[red.pageNumber] = [])
-  );
-  p.redactions.forEach((red) =>
-    redactionsIndexedOnPageNumber[red.pageNumber]!.push(red)
-  );
+  p.redactions.forEach((red) => (redactionsIndexedOnPageNumber[red.pageNumber] = []));
+  p.redactions.forEach((red) => redactionsIndexedOnPageNumber[red.pageNumber]!.push(red));
   const payload = {
     redactions: Object.values(redactionsIndexedOnPageNumber).map((reds) => {
       const first = reds[0]!;
@@ -26,13 +22,13 @@ export const saveRedactions = async (p: {
         width: first.pageWidth,
         redactionCoordinates: reds.map((red) => {
           return { x1: red.x1, y1: red.y1, x2: red.x2, y2: red.y2 };
-        })
+        }),
       };
-    })
+    }),
   };
   const response = await p.axiosInstance.put(
     `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/redact`,
-    payload
+    payload,
   );
 
   return response.data;
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRotationsUtils.ts b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRotationsUtils.ts
index 9c9be17b..c46de2e8 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRotationsUtils.ts
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/utils/saveRotationsUtils.ts
@@ -13,13 +13,13 @@ export const saveRotations = async (p: {
     documentModifications: p.rotations.map((rotation) => ({
       pageIndex: rotation.pageNumber,
       operation: 'rotate',
-      arg: rotation.rotationDegrees
-    }))
+      arg: rotation.rotationDegrees,
+    })),
   };
 
   const response = await p.axiosInstance.post(
     `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/modify`,
-    payload
+    payload,
   );
 
   return response.data;
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebar.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebar.tsx
index 0235ad08..26d29972 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebar.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebar.tsx
@@ -21,10 +21,7 @@ export const DocumentSidebar = (p: {
     { mode: 'accordion' } | { mode: 'notes'; documentId: string }
   >({ mode: 'accordion' });
 
-  useTriggerListener({
-    triggerData: p.reloadTriggerData,
-    fn: () => documentList.load()
-  });
+  useTriggerListener({ triggerData: p.reloadTriggerData, fn: () => documentList.load() });
 
   const documentList = useGetDocumentList({ urn, caseId });
   useEffect(() => {
@@ -49,9 +46,7 @@ export const DocumentSidebar = (p: {
           openDocumentIds={p.openDocumentIds}
           onSetActiveDocumentIds={(docIds) => p.onSetDocumentOpenIds(docIds)}
           onDocumentClick={p.onDocumentClick}
-          onNotesClick={(docId: string) =>
-            setStatus({ mode: 'notes', documentId: docId })
-          }
+          onNotesClick={(docId: string) => setStatus({ mode: 'notes', documentId: docId })}
           ActionComponent={p.ActionComponent}
         />
       </div>
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordion.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordion.tsx
index 88367763..f0690620 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordion.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordion.tsx
@@ -1,30 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import {
   DocumentSidebarAccordionDocument,
-  DocumentSidebarAccordionNoDocumentsAvailable
+  DocumentSidebarAccordionNoDocumentsAvailable,
 } from './DocumentSidebarAccordionDocument';
 import { DocumentSidebarWrapper } from './DocumentSidebarWrapper';
 import { TDocument, TDocumentList } from './getters/getDocumentList';
 import {
   GovUkAccordionOpenCloseLinkTemplate,
   GovUkAccordionSectionTemplate,
-  GovUkAccordionTemplate
+  GovUkAccordionTemplate,
 } from './templates/GovUkAccordion';
 import { categoriseDocument } from './utils/categoriseDocument';
 import {
   categoryDetails,
-  initDocsOnDocCategoryNamesMap
+  initDocsOnDocCategoryNamesMap,
 } from './utils/categoriseDocumentHelperUtils';
 import {
   safeGetDocumentSidebarReadDocIdsFromLocalStorage,
-  safeSetDocumentSidebarReadDocIdsFromLocalStorage
+  safeSetDocumentSidebarReadDocIdsFromLocalStorage,
 } from './utils/DocumentSidebarLocalStorageUtils';
 import { areSetsEqual } from './utils/generalUtils';
 
-const createOpenDocumentAccordionSectionKey = (p: {
-  caseId: number;
-  sectionTitle: string;
-}) => `openDocumentAccordionSection-${p.caseId}-${p.sectionTitle}`;
+const createOpenDocumentAccordionSectionKey = (p: { caseId: number; sectionTitle: string }) =>
+  `openDocumentAccordionSection-${p.caseId}-${p.sectionTitle}`;
 
 export const DocumentSidebarAccordion = (p: {
   caseId: number;
@@ -40,9 +38,7 @@ export const DocumentSidebarAccordion = (p: {
 }) => {
   const { caseId } = p;
 
-  const [openDocumentIds, setOpenDocumentIds] = useState<string[]>(
-    p.openDocumentIds
-  );
+  const [openDocumentIds, setOpenDocumentIds] = useState<string[]>(p.openDocumentIds);
 
   const isNoChangeInActiveDocIds = () =>
     areSetsEqual(new Set(openDocumentIds), new Set(p.openDocumentIds));
@@ -57,13 +53,11 @@ export const DocumentSidebarAccordion = (p: {
   }, [openDocumentIds]);
 
   const [readDocumentIds, setReadDocumentIds] = useState<string[]>(
-    safeGetDocumentSidebarReadDocIdsFromLocalStorage(p.caseId)
+    safeGetDocumentSidebarReadDocIdsFromLocalStorage(p.caseId),
   );
 
   useEffect(() => {
-    const newReadDocIds = [
-      ...new Set([...readDocumentIds, ...p.openDocumentIds])
-    ];
+    const newReadDocIds = [...new Set([...readDocumentIds, ...p.openDocumentIds])];
     safeSetDocumentSidebarReadDocIdsFromLocalStorage({ caseId, newReadDocIds });
   }, [readDocumentIds]);
 
@@ -77,13 +71,11 @@ export const DocumentSidebarAccordion = (p: {
     key: x.label,
     label: x.label,
     categoryName: x.categoryName,
-    documents: docsOnDocCategoryNames[x.categoryName]
+    documents: docsOnDocCategoryNames[x.categoryName],
   }));
 
   const [isExpandedController, setIsExpandedController] = useState(false);
-  const [isExpandedSectionsTracker, setIsExpandedSectionsTracker] = useState<
-    boolean[]
-  >([]);
+  const [isExpandedSectionsTracker, setIsExpandedSectionsTracker] = useState<boolean[]>([]);
   useEffect(() => {
     if (isExpandedSectionsTracker.length === 0) return;
     const allSectionsExpanded = isExpandedSectionsTracker.every((x) => x);
@@ -115,7 +107,7 @@ export const DocumentSidebarAccordion = (p: {
               }}
               localStorageKey={createOpenDocumentAccordionSectionKey({
                 caseId: p.caseId,
-                sectionTitle: item.label
+                sectionTitle: item.label,
               })}
             >
               {item.documents.length === 0 ? (
@@ -131,20 +123,13 @@ export const DocumentSidebarAccordion = (p: {
                     readDocumentIds={readDocumentIds}
                     onDocumentClick={() => {
                       p.onDocumentClick?.(document.parentId);
-                      setReadDocumentIds((docIds) => [
-                        ...new Set([...docIds, document.parentId])
-                      ]);
-                      const docSet = new Set([
-                        ...openDocumentIds,
-                        document.parentId
-                      ]);
+                      setReadDocumentIds((docIds) => [...new Set([...docIds, document.parentId])]);
+                      const docSet = new Set([...openDocumentIds, document.parentId]);
                       setOpenDocumentIds([...docSet]);
                     }}
                     onNotesClick={() => p.onNotesClick(document.parentId)}
                     ActionComponent={
-                      p.ActionComponent ? (
-                        <p.ActionComponent document={document} />
-                      ) : null
+                      p.ActionComponent ? <p.ActionComponent document={document} /> : null
                     }
                     urn={p.urn}
                     caseId={p.caseId}
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordionDocument.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordionDocument.tsx
index 42ee9d8c..e4d41f3d 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordionDocument.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarAccordionDocument.tsx
@@ -3,12 +3,7 @@ import { DocumentSidebarTag } from './DocumentSidebarTag';
 import { TDocument } from './getters/getDocumentList';
 import { useGetDocumentNotes } from './getters/getDocumentNotes';
 import './templates/GovUkAccordion.scss';
-import {
-  NOTES_ARIA_LABELS,
-  NOTES_STATUS,
-  NotesIcon,
-  NotesStatus
-} from './templates/NotesIcon';
+import { NOTES_ARIA_LABELS, NOTES_STATUS, NotesIcon, NotesStatus } from './templates/NotesIcon';
 import { formatShortDate } from './utils/dateUtils';
 
 export const DocumentSidebarAccordionNoDocumentsAvailable = () => {
@@ -18,7 +13,7 @@ export const DocumentSidebarAccordionNoDocumentsAvailable = () => {
         borderTop: 'solid 1px #b1b4b6',
         background: '#ffffff',
         height: '60px',
-        padding: '12px'
+        padding: '12px',
       }}
     >
       There are no documents available.
@@ -36,7 +31,7 @@ const Tooltip = (p: { text: string }) => {
           padding: '8px 14px',
           borderRadius: '6px',
           whiteSpace: 'nowrap',
-          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)'
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
         }}
       >
         {p.text}
@@ -48,7 +43,7 @@ const Tooltip = (p: { text: string }) => {
             height: '0',
             borderLeft: '6px solid transparent',
             borderRight: '6px solid transparent',
-            borderTop: '6px solid #3d3d3d'
+            borderTop: '6px solid #3d3d3d',
           }}
         />
       </div>
@@ -72,7 +67,7 @@ export const DocumentSidebarAccordionDocument = (p: {
     urn: p.urn,
     caseId: p.caseId,
     documentId: p.document.parentId,
-    revalidateOnMount: false
+    revalidateOnMount: false,
   });
 
   const tooltipText = (() => {
@@ -82,9 +77,7 @@ export const DocumentSidebarAccordionDocument = (p: {
 
     const firstNote = documentNotes.data[0];
 
-    return firstNote
-      ? `${firstNote.text} (+${documentNotes.data.length - 1} more)`
-      : '';
+    return firstNote ? `${firstNote.text} (+${documentNotes.data.length - 1} more)` : '';
   })();
 
   return (
@@ -96,9 +89,7 @@ export const DocumentSidebarAccordionDocument = (p: {
       NewVersionTag={p.newVersionDocumentId === p.document.parentId}
       showLeftBorder={p.activeDocumentId === p.document.parentId}
       showRightBorder={p.openDocumentIds.includes(p.document.parentId)}
-      backgroundColor={
-        p.readDocumentIds.includes(p.document.parentId) ? 'white' : 'blue'
-      }
+      backgroundColor={p.readDocumentIds.includes(p.document.parentId) ? 'white' : 'blue'}
       // backgroundColor="blue"
       notesStatus={(() => {
         if (
@@ -143,24 +134,11 @@ export const DocumentSidebarAccordionDocumentTemplate = (p: {
       className={`document-select-accordion-document ${p.backgroundColor === 'blue' ? 'bg-blue' : 'bg-white'} ${p.showLeftBorder ? 'show-left-border' : ''} ${p.showRightBorder ? 'show-right-border' : ''}`}
     >
       <div className="document-select-accordion-document--inner-wrapper">
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            width: '100%'
-          }}
-        >
+        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
           <div
-            style={{
-              display: 'flex',
-              gap: '8px',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}
+            style={{ display: 'flex', gap: '8px', alignItems: 'center', justifyContent: 'center' }}
           >
-            {p.ActiveDocumentTag && (
-              <DocumentSidebarTag tagName="ActiveDocument" />
-            )}
+            {p.ActiveDocumentTag && <DocumentSidebarTag tagName="ActiveDocument" />}
             {p.NewTag && <DocumentSidebarTag tagName="New" />}
             {p.NewVersionTag && <DocumentSidebarTag tagName="NewVersion" />}
             {p.ReclassifiedTag && <DocumentSidebarTag tagName="Reclassified" />}
@@ -195,7 +173,7 @@ export const DocumentSidebarAccordionDocumentTemplate = (p: {
                   top: '0',
                   left: '50%',
                   transform: 'translate(-50%, -100%)',
-                  zIndex: 850
+                  zIndex: 850,
                 }}
               >
                 <Tooltip text={p.tooltipText} />
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx
index cdcb7278..3387f883 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx
@@ -4,7 +4,7 @@ import { DocumentSidebarWrapper } from './DocumentSidebarWrapper';
 import { useAxiosInstance } from './getters/getAxiosInstance';
 import {
   postDocumentNotesFromAxiosInstance,
-  useGetDocumentNotes
+  useGetDocumentNotes,
 } from './getters/getDocumentNotes';
 import { CloseIconButton } from './templates/CloseIconButton';
 import { GovUkBanner } from './templates/GovUkBanner';
@@ -30,7 +30,7 @@ export const DocumentSidebarNotes = (p: {
   const documentNotes = useGetDocumentNotes({
     urn: p.urn,
     caseId: p.caseId,
-    documentId: p.documentId
+    documentId: p.documentId,
   });
 
   return (
@@ -39,12 +39,10 @@ export const DocumentSidebarNotes = (p: {
         style={{
           borderBottom: 'solid 1px #b1b4b6',
           display: 'flex',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
         }}
       >
-        <div style={{ fontSize: '20px', fontWeight: 700, padding: '10px' }}>
-          Notes
-        </div>
+        <div style={{ fontSize: '20px', fontWeight: 700, padding: '10px' }}>Notes</div>
         <CloseIconButton onClick={() => p.onBackButtonClick()} />
       </div>
       {savedSuccessfully && (
@@ -56,11 +54,7 @@ export const DocumentSidebarNotes = (p: {
       )}
       <div style={{ padding: '10px' }}>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-          <label
-            htmlFor="notes-textarea"
-            className="govuk-label"
-            style={{ fontWeight: 700 }}
-          >
+          <label htmlFor="notes-textarea" className="govuk-label" style={{ fontWeight: 700 }}>
             Add a note to the document
           </label>
           <GovUkTextarea
@@ -72,21 +66,10 @@ export const DocumentSidebarNotes = (p: {
             maxLength={NOTES_CHAR_COUNT_MAX_LENGTH}
             rows={5}
           />
-          <span
-            id="notes-char-count"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true"
-          >
+          <span id="notes-char-count" role="status" aria-live="polite" aria-atomic="true">
             You have {remainingCharacters} characters remaining
           </span>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <GovUkButton
               onClick={async () => {
                 await postDocumentNotesFromAxiosInstance({
@@ -94,7 +77,7 @@ export const DocumentSidebarNotes = (p: {
                   urn: p.urn,
                   documentId: p.documentId,
                   caseId: p.caseId,
-                  text
+                  text,
                 });
                 setSavedSuccessfully(true);
                 documentNotes.mutate();
@@ -116,20 +99,13 @@ export const DocumentSidebarNotes = (p: {
                 borderLeft: 'solid 4px #0066cc',
                 display: 'flex',
                 gap: '10px',
-                flexDirection: 'column'
+                flexDirection: 'column',
               }}
             >
               {documentNotes.data.map((note) => (
-                <div
-                  style={{ display: 'flex', gap: '10px' }}
-                  key={`${note.date}-${note.text}`}
-                >
+                <div style={{ display: 'flex', gap: '10px' }} key={`${note.date}-${note.text}`}>
                   <div
-                    style={{
-                      width: '10px',
-                      height: '6px',
-                      borderBottom: 'solid 4px #0066cc'
-                    }}
+                    style={{ width: '10px', height: '6px', borderBottom: 'solid 4px #0066cc' }}
                   />
                   <div style={{ flex: 1 }}>
                     <div style={{ fontWeight: 700 }}>{note.createdByName}</div>
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarTag.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarTag.tsx
index 8fdda18a..c31572de 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarTag.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarTag.tsx
@@ -5,11 +5,10 @@ const documentSelectTagNameToTagPropMap = {
   NewVersion: { children: 'New Version', color: 'green' },
   New: { children: 'New', color: 'green' },
   Reclassified: { children: 'Reclassified', color: 'purple' },
-  Updated: { children: 'Updated', color: 'orange' }
+  Updated: { children: 'Updated', color: 'orange' },
 } satisfies { [key: string]: { children: string; color: TTagStyleColor } };
 
-export type TDocumentSidebarTagName =
-  keyof typeof documentSelectTagNameToTagPropMap;
+export type TDocumentSidebarTagName = keyof typeof documentSelectTagNameToTagPropMap;
 
 export const DocumentSidebarTag = (p: { tagName: TDocumentSidebarTagName }) => {
   const props = documentSelectTagNameToTagPropMap[p.tagName];
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarWrapper.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarWrapper.tsx
index 0045ea16..249c2d0d 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarWrapper.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarWrapper.tsx
@@ -1,7 +1,3 @@
 export const DocumentSidebarWrapper = (p: { children: React.ReactNode }) => {
-  return (
-    <div style={{ background: '#f1f2f3', border: 'solid 1px #b1b4b6' }}>
-      {p.children}
-    </div>
-  );
+  return <div style={{ background: '#f1f2f3', border: 'solid 1px #b1b4b6' }}>{p.children}</div>;
 };
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAccessTokenFromMsalInstance.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAccessTokenFromMsalInstance.ts
index 9571ae99..18e86087 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAccessTokenFromMsalInstance.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAccessTokenFromMsalInstance.ts
@@ -1,18 +1,15 @@
-import {
-  IPublicClientApplication,
-  InteractionRequiredAuthError
-} from '@azure/msal-browser';
+import { IPublicClientApplication, InteractionRequiredAuthError } from '@azure/msal-browser';
 
 export const getAccessTokenFromMsalInstance = async (
   msalInstance: IPublicClientApplication,
-  scopes?: string[]
+  scopes?: string[],
 ) => {
   const account = msalInstance.getActiveAccount();
 
   try {
     const tokenResponse = await msalInstance.acquireTokenSilent({
       scopes: scopes || [import.meta.env.VITE_POLARIS_GATEWAY_SCOPE],
-      account: account!
+      account: account!,
     });
 
     return tokenResponse.accessToken;
@@ -20,7 +17,7 @@ export const getAccessTokenFromMsalInstance = async (
     if (error instanceof InteractionRequiredAuthError) {
       const tokenResponse = await msalInstance.acquireTokenPopup({
         scopes: scopes || [import.meta.env.VITE_POLARIS_GATEWAY_SCOPE],
-        account: account!
+        account: account!,
       });
       return tokenResponse.accessToken;
     }
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAxiosInstance.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAxiosInstance.tsx
index 196e01ef..110ebbc2 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAxiosInstance.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getAxiosInstance.tsx
@@ -7,7 +7,7 @@ export const useAxiosInstance = () => {
 
   const axiosInstance = axios.create({
     baseURL: import.meta.env.VITE_POLARIS_GATEWAY_URL,
-    withCredentials: true
+    withCredentials: true,
   });
 
   axiosInstance.interceptors.request.use(async (config) => {
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx
index f648c9d3..d48d5c19 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx
@@ -9,7 +9,7 @@ export const documentSchema = z.object({
   cmsDocType: z.object({
     documentTypeId: z.number(),
     documentType: z.string().nullable(),
-    documentCategory: z.string()
+    documentCategory: z.string(),
   }),
   cmsOriginalFileName: z.string(),
   presentationTitle: z.string(),
@@ -17,9 +17,7 @@ export const documentSchema = z.object({
   isUnused: z.boolean(),
   hasNotes: z.boolean(),
   childId: z.number(),
-  presentationFlags: z
-    .object({ write: z.union([z.string(), z.boolean()]).nullish() })
-    .nullish()
+  presentationFlags: z.object({ write: z.union([z.string(), z.boolean()]).nullish() }).nullish(),
 });
 export const documentListSchema = z.array(documentSchema);
 export type TDocument = z.infer<typeof documentSchema>;
@@ -30,9 +28,7 @@ export const getDocumentListFromAxiosInstance = async (p: {
   urn: string | undefined;
   caseId: number | undefined;
 }) => {
-  const response = await p.axiosInstance.get(
-    `/api/urns/${p.urn}/cases/${p.caseId}/documents`
-  );
+  const response = await p.axiosInstance.get(`/api/urns/${p.urn}/cases/${p.caseId}/documents`);
 
   return response.data;
 };
@@ -44,7 +40,7 @@ export const getDocumentFromAxiosInstance = async (p: {
   versionId: number | undefined;
 }) => {
   const response = await p.axiosInstance.get(
-    `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.documentId}/versions/${p.versionId}`
+    `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.documentId}/versions/${p.versionId}`,
   );
 
   return response.data;
@@ -59,7 +55,7 @@ export const safeGetDocumentListFromAxiosInstance = async (p: {
     const resp = await getDocumentListFromAxiosInstance({
       urn: p.urn,
       caseId: p.caseId,
-      axiosInstance: p.axiosInstance
+      axiosInstance: p.axiosInstance,
     });
 
     return documentListSchema.safeParse(resp);
@@ -83,15 +79,10 @@ export const safeGetDocumentListFromLocalStorage = (p: {
   }
 };
 
-export const useGetDocumentList = (p: {
-  urn: string | undefined;
-  caseId: number | undefined;
-}) => {
+export const useGetDocumentList = (p: { urn: string | undefined; caseId: number | undefined }) => {
   const axiosInstance = useAxiosInstance();
 
-  const [data, setDocumentList] = useState<TDocumentList | null | undefined>(
-    undefined
-  );
+  const [data, setDocumentList] = useState<TDocumentList | null | undefined>(undefined);
   useEffect(() => {
     const key = `documentList-${p.urn}-${p.caseId}`;
     if (data) localStorage.setItem(key, JSON.stringify(data));
@@ -99,10 +90,7 @@ export const useGetDocumentList = (p: {
   }, [data]);
 
   const loadFromLocalStorage = () => {
-    const resp = safeGetDocumentListFromLocalStorage({
-      urn: p.urn,
-      caseId: p.caseId
-    });
+    const resp = safeGetDocumentListFromLocalStorage({ urn: p.urn, caseId: p.caseId });
 
     if (resp.success) setDocumentList(resp.data);
   };
@@ -111,7 +99,7 @@ export const useGetDocumentList = (p: {
     const resp = await safeGetDocumentListFromAxiosInstance({
       axiosInstance,
       urn: p.urn,
-      caseId: p.caseId
+      caseId: p.caseId,
     });
 
     setDocumentList(resp.success ? resp.data : null);
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentNotes.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentNotes.tsx
index 2e1c404a..3ae80963 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentNotes.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentNotes.tsx
@@ -7,7 +7,7 @@ import { useAxiosInstance } from './getAxiosInstance';
 const documentNoteSchema = z.object({
   createdByName: z.string(),
   date: z.string(),
-  text: z.string()
+  text: z.string(),
 });
 const documentNotesSchema = z.array(documentNoteSchema);
 
@@ -23,7 +23,7 @@ export const postDocumentNotesFromAxiosInstance = async (p: {
 }) => {
   const response = await p.axiosInstance.post(
     `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.documentId}/notes`,
-    { Text: p.text }
+    { Text: p.text },
   );
 
   return response.data;
@@ -36,7 +36,7 @@ export const getDocumentNotesFromAxiosInstance = async (p: {
   caseId: number | undefined;
 }) => {
   const response = await p.axiosInstance.get(
-    `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.documentId}/notes`
+    `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.documentId}/notes`,
   );
 
   return response.data;
@@ -75,7 +75,7 @@ export const safeGetDocumentNotesFromAxiosInstance = async (p: {
       urn: p.urn,
       caseId: p.caseId,
       documentId: p.documentId,
-      axiosInstance: p.axiosInstance
+      axiosInstance: p.axiosInstance,
     });
 
     return documentNotesSchema.safeParse(resp);
@@ -93,7 +93,7 @@ export const safeSetDocumentNotesFromLocalStorage = (p: {
   const localStorageKey = createGetDocumentNotesKey({
     urn: p.urn,
     documentId: p.documentId,
-    caseId: p.caseId
+    caseId: p.caseId,
   });
   window.localStorage.setItem(localStorageKey, JSON.stringify(p.data));
 };
@@ -116,13 +116,10 @@ export const useGetDocumentNotes = (p: {
   const rtn = useSWR(
     key,
     async () => {
-      const resp = await safeGetDocumentNotesFromAxiosInstance({
-        ...p,
-        axiosInstance
-      });
+      const resp = await safeGetDocumentNotesFromAxiosInstance({ ...p, axiosInstance });
       return resp.success ? resp.data : null;
     },
-    { fallbackData, revalidateOnMount }
+    { fallbackData, revalidateOnMount },
   );
 
   useEffect(() => {
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.scss b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.scss
index 229eaf2b..b379fe97 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.scss
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.scss
@@ -1,5 +1,5 @@
 .govuk-frontend-supported .govuk-accordion {
-  border:0;
+  border: 0;
   margin: 0;
 
   .govuk-accordion__section {
@@ -19,23 +19,23 @@
     border-bottom-style: solid;
     border-bottom-color: #f3f2f1;
     background-color: #f3f2f1;
-    
+
     &:hover {
       background-color: #e7e5e3;
       border-bottom-color: #e7e5e3;
     }
-    
+
     &:focus {
       border-bottom-color: black;
     }
 
     .govuk-accordion__section-toggle {
-      margin: 0 ;
-      
-      .govuk-accordion__section-toggle-focus{
-        display: flex ;
-        padding: 10px 18px ;
-        margin: 0 ;
+      margin: 0;
+
+      .govuk-accordion__section-toggle-focus {
+        display: flex;
+        padding: 10px 18px;
+        margin: 0;
         box-shadow: none;
 
         .govuk-accordion__section-toggle-text {
@@ -71,19 +71,19 @@
   display: flex;
   padding: 12px 22px;
   border-top: solid 1px #b1b4b6;
-  
+
   &.bg-blue {
     background-color: #1d70b813;
   }
   &.bg-white {
     background-color: #ffffff;
   }
-  
+
   &.show-left-border {
     padding-left: 17px;
     border-left: solid 5px #1d70b8;
   }
-  
+
   &.show-right-border {
     padding-right: 17px;
     border-right: solid 5px #1d70b8;
@@ -95,20 +95,17 @@
     flex-direction: column;
     gap: 8px;
   }
-  
 
   .govuk-link {
     cursor: pointer;
     color: #1d70b8;
 
     &:hover {
-      color: #003078
+      color: #003078;
     }
-   
+
     &.disabled {
       cursor: default;
     }
   }
 }
-
-
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.tsx
index 6d9386c0..33a3fccb 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkAccordion.tsx
@@ -16,9 +16,8 @@ const safeSetToLocalStorage = (p: { key: string; value: unknown }) => {
   window.localStorage.setItem(p.key, JSON.stringify(p.value));
 };
 
-const safeGetAccordionSectionIsExpandedFromLocalStorage = (p: {
-  key: string;
-}) => safeGetFromLocalStorage({ key: p.key, schema: z.boolean() });
+const safeGetAccordionSectionIsExpandedFromLocalStorage = (p: { key: string }) =>
+  safeGetFromLocalStorage({ key: p.key, schema: z.boolean() });
 
 export const GovUkAccordionSectionTemplate = (p: {
   title: string;
@@ -29,10 +28,7 @@ export const GovUkAccordionSectionTemplate = (p: {
 }) => {
   const isFirstRenderRef = useRef(true);
   const [isExpanded, setIsExpanded] = useState(
-    () =>
-      safeGetAccordionSectionIsExpandedFromLocalStorage({
-        key: p.localStorageKey
-      }) === true
+    () => safeGetAccordionSectionIsExpandedFromLocalStorage({ key: p.localStorageKey }) === true,
   );
 
   useEffect(() => {
@@ -64,9 +60,7 @@ export const GovUkAccordionSectionTemplate = (p: {
               >
                 <span className="govuk-accordion__section-toggle">
                   <span className="govuk-accordion__section-toggle-focus">
-                    <span className="govuk-accordion__section-toggle-text">
-                      {p.title}
-                    </span>
+                    <span className="govuk-accordion__section-toggle-text">{p.title}</span>
                     <span className="govuk-accordion-nav__chevron-wrapper">
                       <span
                         className={`govuk-accordion-nav__chevron${!isExpanded ? ' govuk-accordion-nav__chevron--down' : ''}`}
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkBanner.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkBanner.tsx
index 8eb5f878..00649455 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkBanner.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkBanner.tsx
@@ -2,7 +2,7 @@ type TBannerVariant = 'error' | 'success' | 'info';
 const variantClassMap: { [k in TBannerVariant]: string } = {
   error: 'banner-error',
   success: 'govuk-notification-banner--success',
-  info: ''
+  info: '',
 };
 
 export const GovUkBanner = (p: {
@@ -24,26 +24,16 @@ export const GovUkBanner = (p: {
     >
       <div
         className="govuk-notification-banner__header"
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        }}
+        style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
       >
-        <h2
-          className="govuk-notification-banner__title"
-          id="govuk-notification-banner-title"
-        >
+        <h2 className="govuk-notification-banner__title" id="govuk-notification-banner-title">
           {p.headerTitle}
         </h2>
         {p.headerRight && <span>{p.headerRight}</span>}
       </div>
       <div className="govuk-notification-banner__content">
         {p.contentHeading && (
-          <h3
-            className="govuk-notification-banner__heading"
-            style={{ maxWidth: 'none' }}
-          >
+          <h3 className="govuk-notification-banner__heading" style={{ maxWidth: 'none' }}>
             {p.contentHeading}
           </h3>
         )}
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.scss b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.scss
index ee210ff7..1fd2ed64 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.scss
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.scss
@@ -1,3 +1,3 @@
 .govuk-button {
-  margin-bottom: 0 ;
-}
\ No newline at end of file
+  margin-bottom: 0;
+}
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.tsx
index 57dfbb81..55a1af23 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkButton.tsx
@@ -3,7 +3,5 @@ type TProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const GovUkButton = (p: TProps) => {
   const { className, ...otherProps } = p;
-  return (
-    <button className={`govuk-button custom ${className}`} {...otherProps} />
-  );
+  return <button className={`govuk-button custom ${className}`} {...otherProps} />;
 };
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkLink.scss b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkLink.scss
index 8b1b23c7..3709e3a6 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkLink.scss
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkLink.scss
@@ -3,9 +3,9 @@
   color: #1d70b8;
 
   &:hover {
-    color: #003078
+    color: #003078;
   }
-  
+
   &.disabled {
     cursor: default;
   }
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkTagTemplate.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkTagTemplate.tsx
index 44f32af2..8809ffcb 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkTagTemplate.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/GovUkTagTemplate.tsx
@@ -9,19 +9,12 @@ const tagStyleColorMap = {
   pink: 'govuk-tag--pink',
   red: 'govuk-tag--red',
   orange: 'govuk-tag--orange',
-  yellow: 'govuk-tag--yellow'
+  yellow: 'govuk-tag--yellow',
 } as const;
 export type TTagStyleColor = keyof typeof tagStyleColorMap;
 
-export const GovUkTagTemplate = (p: {
-  color?: TTagStyleColor;
-  children: React.ReactNode;
-}) => {
+export const GovUkTagTemplate = (p: { color?: TTagStyleColor; children: React.ReactNode }) => {
   const colorKey = p.color ?? 'none';
 
-  return (
-    <strong className={`govuk-tag ${tagStyleColorMap[colorKey]}`}>
-      {p.children}
-    </strong>
-  );
+  return <strong className={`govuk-tag ${tagStyleColorMap[colorKey]}`}>{p.children}</strong>;
 };
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/NotesIcon.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/NotesIcon.tsx
index 21719f96..f38f3be7 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/templates/NotesIcon.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/templates/NotesIcon.tsx
@@ -1,21 +1,14 @@
 export type NotesStatus = 'disabled' | 'newNotes' | 'none';
 
-export const NOTES_STATUS = {
-  DISABLED: 'disabled',
-  NEW_NOTES: 'newNotes',
-  NONE: 'none'
-} as const;
+export const NOTES_STATUS = { DISABLED: 'disabled', NEW_NOTES: 'newNotes', NONE: 'none' } as const;
 
 export const NOTES_ARIA_LABELS: Record<NotesStatus, string> = {
   disabled: 'Comments unavailable for this document type',
   newNotes: 'Comments with notifications',
-  none: 'Comments'
+  none: 'Comments',
 };
 
-export const NotesIcon = (p: {
-  width: number;
-  notesStatus: NotesStatus;
-}) => {
+export const NotesIcon = (p: { width: number; notesStatus: NotesStatus }) => {
   return (
     <div style={{ display: 'flex' }} aria-hidden="true">
       <svg
@@ -39,7 +32,7 @@ export const NotesIcon = (p: {
             height: '10px',
             width: '10px',
             background: '#1d70b8',
-            borderRadius: '5px'
+            borderRadius: '5px',
           }}
         />
       )}
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/DocumentSidebarLocalStorageUtils.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/DocumentSidebarLocalStorageUtils.ts
index 81fcabcb..010e8f7e 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/DocumentSidebarLocalStorageUtils.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/DocumentSidebarLocalStorageUtils.ts
@@ -1,19 +1,13 @@
 import z from 'zod';
 import { safeJsonParse } from './generalUtils';
 
-export const createDocumentSidebarReadDocIdsLocalStorageKey = (
-  caseId: number
-) => `documentSidebarReadDocIds-${caseId}`;
+export const createDocumentSidebarReadDocIdsLocalStorageKey = (caseId: number) =>
+  `documentSidebarReadDocIds-${caseId}`;
 
 const schema = z.array(z.string());
-export const safeGetDocumentSidebarReadDocIdsFromLocalStorage = (
-  caseId: number
-): string[] => {
-  const localStorageKey =
-    createDocumentSidebarReadDocIdsLocalStorageKey(caseId);
-  const readDocsJsonParsed = safeJsonParse(
-    window.localStorage.getItem(localStorageKey)
-  );
+export const safeGetDocumentSidebarReadDocIdsFromLocalStorage = (caseId: number): string[] => {
+  const localStorageKey = createDocumentSidebarReadDocIdsLocalStorageKey(caseId);
+  const readDocsJsonParsed = safeJsonParse(window.localStorage.getItem(localStorageKey));
   const readDocsSchemaParsed = schema.safeParse(readDocsJsonParsed.data);
 
   return readDocsSchemaParsed.success ? readDocsSchemaParsed.data : [];
@@ -23,8 +17,6 @@ export const safeSetDocumentSidebarReadDocIdsFromLocalStorage = (p: {
   caseId: number;
   newReadDocIds: string[];
 }) => {
-  const localStorageKey = createDocumentSidebarReadDocIdsLocalStorageKey(
-    p.caseId
-  );
+  const localStorageKey = createDocumentSidebarReadDocIdsLocalStorageKey(p.caseId);
   window.localStorage.setItem(localStorageKey, JSON.stringify(p.newReadDocIds));
 };
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/OpenDocumentTabsLocalStorageUtils.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/OpenDocumentTabsLocalStorageUtils.ts
index ba25d824..bbe2d6ce 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/OpenDocumentTabsLocalStorageUtils.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/OpenDocumentTabsLocalStorageUtils.ts
@@ -1,19 +1,13 @@
 import { z } from 'zod';
 import { safeJsonParse } from './generalUtils';
 
-const openTabsSchema = z.object({
-  openParentIds: z.array(z.string()),
-  activeParentId: z.string()
-});
+const openTabsSchema = z.object({ openParentIds: z.array(z.string()), activeParentId: z.string() });
 
 type OpenTabsState = z.infer<typeof openTabsSchema>;
 
-export const createOpenDocumentTabsKey = (caseId: number) =>
-  `openDocumentTabs-${caseId}`;
+export const createOpenDocumentTabsKey = (caseId: number) => `openDocumentTabs-${caseId}`;
 
-export const safeGetOpenDocumentTabsFromLocalStorage = (
-  caseId: number
-): OpenTabsState | null => {
+export const safeGetOpenDocumentTabsFromLocalStorage = (caseId: number): OpenTabsState | null => {
   const key = createOpenDocumentTabsKey(caseId);
   const parsed = safeJsonParse(window.localStorage.getItem(key));
   const validated = openTabsSchema.safeParse(parsed.data);
@@ -28,10 +22,7 @@ export const safeSetOpenDocumentTabsFromLocalStorage = (p: {
   const key = createOpenDocumentTabsKey(p.caseId);
   window.localStorage.setItem(
     key,
-    JSON.stringify({
-      openParentIds: p.openParentIds,
-      activeParentId: p.activeParentId
-    })
+    JSON.stringify({ openParentIds: p.openParentIds, activeParentId: p.activeParentId }),
   );
 };
 
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocument.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocument.ts
index ba9c7a64..4ce733af 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocument.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocument.ts
@@ -1,13 +1,10 @@
 import z from 'zod';
 import { SearchTermResultSchema } from '../../../schemas/documents';
 import { documentSchema } from '../getters/getDocumentList';
-import {
-  documentTypeIdsMap,
-  TCategoryName
-} from './categoriseDocumentHelperUtils';
+import { documentTypeIdsMap, TCategoryName } from './categoriseDocumentHelperUtils';
 
 export const categoriseDocument = (
-  doc: z.infer<typeof documentSchema> | z.infer<typeof SearchTermResultSchema>
+  doc: z.infer<typeof documentSchema> | z.infer<typeof SearchTermResultSchema>,
 ): TCategoryName | null => {
   const id = doc.cmsDocType.documentTypeId;
 
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
index f997aad6..31dc488b 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/categoriseDocumentHelperUtils.ts
@@ -6,33 +6,29 @@ export const categoryDetails = [
   { label: 'MG forms', categoryName: 'mgForm' },
   { label: 'Other material', categoryName: 'otherMaterial' },
   { label: 'Defendant pre-cons', categoryName: 'defendantPreCons' },
-  { label: 'Unused material', categoryName: 'unusedMaterial' }
+  { label: 'Unused material', categoryName: 'unusedMaterial' },
 ] as const;
 
 export type TCategoryName = (typeof categoryDetails)[number]['categoryName'];
 
 export const documentTypeIdsMap: Record<TCategoryName, number[]> = {
   statement: [1016, 1017, 1018, 1031, 1051, 1059],
-  exhibit: [
-    1020, 1021, 1022, 1023, 1028, 1030, 1042, 1044, 1052, 1062, 1406, 225522
-  ],
+  exhibit: [1020, 1021, 1022, 1023, 1028, 1030, 1042, 1044, 1052, 1062, 1406, 225522],
   mgForm: [
-    516, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1012, 1013, 1014, 1015,
-    1019, 1024, 1025, 1026, 1027, 1033, 1034, 1035, 1036, 1037, 1038, 1039,
-    1040, 1041, 1045, 1046, 1047, 1048, 1049, 1050, 1060, 1061, 1063, 1066, 1203
+    516, 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1012, 1013, 1014, 1015, 1019, 1024, 1025,
+    1026, 1027, 1033, 1034, 1035, 1036, 1037, 1038, 1039, 1040, 1041, 1045, 1046, 1047, 1048, 1049,
+    1050, 1060, 1061, 1063, 1066, 1203,
   ],
   otherMaterial: [-2, 1201],
   defendantPreCons: [1056, 1057],
-  unusedMaterial: [1009, 1010, 1011, 1058, 1202, 100239, 226148]
+  unusedMaterial: [1009, 1010, 1011, 1058, 1202, 100239, 226148],
 };
 
-export const initDocsOnDocCategoryNamesMap = (): {
-  [k in TCategoryName]: TDocumentList;
-} => ({
+export const initDocsOnDocCategoryNamesMap = (): { [k in TCategoryName]: TDocumentList } => ({
   statement: [],
   exhibit: [],
   mgForm: [],
   otherMaterial: [],
   defendantPreCons: [],
-  unusedMaterial: []
+  unusedMaterial: [],
 });
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/dateUtils.ts b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/dateUtils.ts
index 6ba18c33..6af610bf 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/utils/dateUtils.ts
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/utils/dateUtils.ts
@@ -4,11 +4,7 @@ export const formatDate = (dtStr: string) => {
   // FORMAT: "04 November 2025"
 
   // Method 1: Using toLocaleDateString with options
-  return date.toLocaleDateString('en-GB', {
-    day: '2-digit',
-    month: 'long',
-    year: 'numeric'
-  });
+  return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' });
 };
 
 export const formatShortDate = (dtStr: string) => {
@@ -16,9 +12,5 @@ export const formatShortDate = (dtStr: string) => {
 
   // FORMAT: "02/06/2020" (DD/MM/YYYY)
 
-  return date.toLocaleDateString('en-GB', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric'
-  });
+  return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
 };
diff --git a/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx b/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx
index dad3c6f1..26371f10 100644
--- a/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx
+++ b/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import {
   getLookups,
   getPdfFiles,
-  useAxiosInstances
+  useAxiosInstances,
 } from '../../caseWorkApp/components/utils/getData';
 import { TLookupsResponse } from '../../caseWorkApp/types/redaction';
 import { Banner } from '../../components';
@@ -65,7 +65,7 @@ export const DocumentTabPanel = ({
   searchContext,
   onFocusedSearchIndexChange,
   onBackToSearchResults,
-  checkInDocumentTriggerData
+  checkInDocumentTriggerData,
 }: DocumentTabPanelProps) => {
   const { redactionLogAxios, axiosInstance } = useAxiosInstances();
 
@@ -75,11 +75,8 @@ export const DocumentTabPanel = ({
   const blobUrlRef = useRef<string | null>(null);
 
   const [showRedactionLogModal, setShowRedactionLogModal] = useState(false);
-  const [redactionSaveStatus, setRedactionSaveStatus] = useState<
-    'saving' | 'saved'
-  >();
-  const [redactionLogModalData, setRedactionLogModalData] =
-    useState<RedactionLogModalData>();
+  const [redactionSaveStatus, setRedactionSaveStatus] = useState<'saving' | 'saved'>();
+  const [redactionLogModalData, setRedactionLogModalData] = useState<RedactionLogModalData>();
   const [lookups, setLookups] = useState<TLookupsResponse>();
 
   useEffect(() => {
@@ -92,7 +89,7 @@ export const DocumentTabPanel = ({
           urn,
           caseId,
           parentId: parentId,
-          childId: childId
+          childId: childId,
         });
 
         if (blob instanceof Blob) {
@@ -104,9 +101,7 @@ export const DocumentTabPanel = ({
           setStatus('error');
         }
       } catch (e) {
-        setStatusCode(
-          axios.isAxiosError(e) ? (e.response?.status ?? null) : null
-        );
+        setStatusCode(axios.isAxiosError(e) ? (e.response?.status ?? null) : null);
         setStatus('error');
       }
     };
@@ -150,22 +145,15 @@ export const DocumentTabPanel = ({
         />
       )}
 
-      <LoadingSpinner
-        isLoading={status === 'loading'}
-        textContent="Loading document..."
-      />
+      <LoadingSpinner isLoading={status === 'loading'} textContent="Loading document..." />
 
-      {status === 'error' && (
-        <div className="govuk-error-message">Failed to load Document</div>
-      )}
+      {status === 'error' && <div className="govuk-error-message">Failed to load Document</div>}
 
       {status === 'error' && statusCode === 403 && (
         <Banner
           type="error"
           header="This document is password protected"
-          content={
-            'Ask the agency who supplied it to remove the password and resend the document.'
-          }
+          content={'Ask the agency who supplied it to remove the password and resend the document.'}
         />
       )}
 
@@ -182,17 +170,15 @@ export const DocumentTabPanel = ({
                     totalMatches: searchContext.highlights.length,
                     focusedIndex: searchContext.focusedIndex,
                     onPrev: () =>
-                      onFocusedSearchIndexChange?.(
-                        Math.max(0, searchContext.focusedIndex - 1)
-                      ),
+                      onFocusedSearchIndexChange?.(Math.max(0, searchContext.focusedIndex - 1)),
                     onNext: () =>
                       onFocusedSearchIndexChange?.(
                         Math.min(
                           searchContext.highlights.length - 1,
-                          searchContext.focusedIndex + 1
-                        )
+                          searchContext.focusedIndex + 1,
+                        ),
                       ),
-                    onBackToSearchResults: () => onBackToSearchResults?.()
+                    onBackToSearchResults: () => onBackToSearchResults?.(),
                   }
                 : undefined
             }
diff --git a/materials_ui/src/materials_components/PdfRedactor/ManualRedactionForm.tsx b/materials_ui/src/materials_components/PdfRedactor/ManualRedactionForm.tsx
index 0d09e7b2..bee5f6af 100644
--- a/materials_ui/src/materials_components/PdfRedactor/ManualRedactionForm.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/ManualRedactionForm.tsx
@@ -12,10 +12,7 @@ export const ManualRedactionForm = (p: {
     <div>
       <div className="govuk-label">Redaction Details</div>
       <div style={{ display: 'flex', alignItems: 'start', gap: '8px' }}>
-        <RedactionTypeSelect
-          initFocus
-          onRedactionTypeChange={setRedactionType}
-        />
+        <RedactionTypeSelect initFocus onRedactionTypeChange={setRedactionType} />
         <GovUkButton variant="secondary" onClick={p.onCancel}>
           Cancel
         </GovUkButton>
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfDeletionReasonForm.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfDeletionReasonForm.tsx
index 466043e2..e8fb2b7c 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfDeletionReasonForm.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfDeletionReasonForm.tsx
@@ -4,7 +4,7 @@ import { GovUkButton } from './templates/GovUkButton';
 const deletionReasonData = [
   { id: '1', name: 'MG11 Backsheet' },
   { id: '2', name: 'Page contains personal information' },
-  { id: '3', name: 'Blank page' }
+  { id: '3', name: 'Blank page' },
 ];
 
 type TDeletionReason = (typeof deletionReasonData)[number];
@@ -25,9 +25,7 @@ const DeletionReasonSelect = (p: {
       className="govuk-select"
       value={deletionReasonId}
       onChange={(e) => {
-        const newDeletionReason = deletionReasonData.find(
-          (itm) => itm.id === e.target.value
-        );
+        const newDeletionReason = deletionReasonData.find((itm) => itm.id === e.target.value);
 
         setDeletionReasonId(e.target.value);
         p.onDeletionReasonChange(newDeletionReason);
@@ -64,11 +62,7 @@ export const DeletionReasonForm = (p: {
         <GovUkButton variant="secondary" onClick={p.onCancelClick}>
           Cancel
         </GovUkButton>
-        <GovUkButton
-          className="govuk-button"
-          disabled={!deletionReason}
-          onClick={p.onSaveSuccess}
-        >
+        <GovUkButton className="govuk-button" disabled={!deletionReason} onClick={p.onSaveSuccess}>
           Redact
         </GovUkButton>
       </div>
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
index 8a2fac7b..5a8c272e 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
@@ -18,10 +18,7 @@ import { TDeletion, TIndexedDeletion } from './utils/deletionUtils';
 import { isRedactionEnabledMode, type TMode } from './utils/modeUtils';
 import styles from './utils/PdfRedactor.module.css';
 import { TIndexedRotation, TRotation } from './utils/rotationUtils';
-import type {
-  THighlightLayer,
-  TSearchHighlight
-} from './utils/searchHighlightUtils';
+import type { THighlightLayer, TSearchHighlight } from './utils/searchHighlightUtils';
 import { useTrigger } from './utils/useTriggger';
 
 pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;
@@ -30,7 +27,7 @@ const modeClassMap: { [x in TMode]: string | undefined } = {
   redact: styles.redact,
   rotation: styles.rotation,
   deletion: styles.deletion,
-  disabled: undefined
+  disabled: undefined,
 };
 
 const useScaleHelper = (p?: { initScale?: number }) => {
@@ -50,21 +47,14 @@ const useScaleHelper = (p?: { initScale?: number }) => {
 const indexRedactionsOnPageNumber = (redactions: TRedaction[]) => {
   const temp: { [k: number]: TRedaction[] } = {};
   redactions.forEach((redaction) => (temp[redaction.pageNumber] = []));
-  redactions.forEach((redaction) =>
-    temp[redaction.pageNumber]!.push(redaction)
-  );
+  redactions.forEach((redaction) => temp[redaction.pageNumber]!.push(redaction));
   return temp;
 };
 
 const PdfRedactorFooter = (p: { children: React.ReactNode }) => {
   return (
     <div
-      style={{
-        border: '1px solid black',
-        background: 'white',
-        color: 'black',
-        userSelect: 'none'
-      }}
+      style={{ border: '1px solid black', background: 'white', color: 'black', userSelect: 'none' }}
     >
       {p.children}
     </div>
@@ -84,7 +74,7 @@ const RedactionsFooter = (p: {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          padding: '10px'
+          padding: '10px',
         }}
       >
         <button
@@ -96,9 +86,7 @@ const RedactionsFooter = (p: {
         <span style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           <span>
             {p.redactions.length === 1 && <>There is 1 redaction</>}
-            {p.redactions.length > 1 && (
-              <>There are {p.redactions.length} redactions</>
-            )}
+            {p.redactions.length > 1 && <>There are {p.redactions.length} redactions</>}
           </span>
           <button
             className="govuk-button"
@@ -129,7 +117,7 @@ const RotationsFooter = (p: {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          padding: '10px'
+          padding: '10px',
         }}
       >
         <button
@@ -141,14 +129,9 @@ const RotationsFooter = (p: {
         <span style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           <span>
             {p.rotations.length === 1 && <>There is 1 rotation</>}
-            {p.rotations.length > 1 && (
-              <>There are {p.rotations.length} rotations</>
-            )}
+            {p.rotations.length > 1 && <>There are {p.rotations.length} rotations</>}
           </span>
-          <button
-            className="govuk-button"
-            onClick={() => p.onSaveRotationsClick(p.rotations)}
-          >
+          <button className="govuk-button" onClick={() => p.onSaveRotationsClick(p.rotations)}>
             Save all rotations
           </button>
         </span>
@@ -169,7 +152,7 @@ const DeletionsFooter = (p: {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          padding: '10px'
+          padding: '10px',
         }}
       >
         <button
@@ -181,14 +164,9 @@ const DeletionsFooter = (p: {
         <span style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           <span>
             {p.deletions.length === 1 && <>There is 1 deletion</>}
-            {p.deletions.length > 1 && (
-              <>There are {p.deletions.length} deletions</>
-            )}
+            {p.deletions.length > 1 && <>There are {p.deletions.length} deletions</>}
           </span>
-          <button
-            className="govuk-button"
-            onClick={() => p.onSaveDeletionsClick(p.deletions)}
-          >
+          <button className="govuk-button" onClick={() => p.onSaveDeletionsClick(p.deletions)}>
             Save all deletions
           </button>
         </span>
@@ -209,18 +187,14 @@ const usePreviousModeRef = (value: TMode) => {
   return { previousModeRef };
 };
 
-const writeRedactionsToCache = (p: {
-  key: string;
-  redactions: TRedaction[];
-}) => {
+const writeRedactionsToCache = (p: { key: string; redactions: TRedaction[] }) => {
   localStorage.setItem(p.key, JSON.stringify(p.redactions));
 };
 
 const getRedactionsFromCache = (key: string) => {
   const redactionsStr = localStorage.getItem(key);
   const jsonParsedRedactions = safeJsonParse(redactionsStr);
-  if (!jsonParsedRedactions.success)
-    return { success: false, data: undefined } as const;
+  if (!jsonParsedRedactions.success) return { success: false, data: undefined } as const;
 
   return redactionsSchema.safeParse(jsonParsedRedactions.data);
 };
@@ -232,10 +206,7 @@ export const PdfRedactor = (p: {
   mode: TMode;
   onModeChange: (x: TMode) => void;
   onRedactionsChange: (redactions: TRedaction[]) => void;
-  onAddRedactions: (p: {
-    redactions: TRedaction[];
-    highlightedText: string | undefined;
-  }) => void;
+  onAddRedactions: (p: { redactions: TRedaction[]; highlightedText: string | undefined }) => void;
   onRemoveRedactions: (redactionIds: string[]) => void;
   onSaveRedactions: () => Promise<void>;
   onSaveDeletions: () => Promise<void>;
@@ -268,9 +239,7 @@ export const PdfRedactor = (p: {
     modeRef.current = p.mode;
   }, [p.mode]);
 
-  const [displayToProceedModal, setDisplayToProceedModal] = useState<
-    TMode | undefined
-  >(undefined);
+  const [displayToProceedModal, setDisplayToProceedModal] = useState<TMode | undefined>(undefined);
 
   const [numPages, setNumPages] = useState<number>();
   const scaleHelper = useScaleHelper();
@@ -282,10 +251,7 @@ export const PdfRedactor = (p: {
   }, [p.redactions]);
   useEffect(() => {
     if (isFirstLoadRef.current) return;
-    writeRedactionsToCache({
-      key: getKeyForAutosaveRedactions(),
-      redactions: p.redactions
-    });
+    writeRedactionsToCache({ key: getKeyForAutosaveRedactions(), redactions: p.redactions });
   }, [p.redactions]);
 
   // group each highlight layer's matches by page number so every page can be
@@ -300,7 +266,7 @@ export const PdfRedactor = (p: {
         });
         return { byPage, focusedId: layer.focusedId };
       }),
-    [p.highlightLayers]
+    [p.highlightLayers],
   );
 
   const rotations = useMemo(() => {
@@ -318,10 +284,7 @@ export const PdfRedactor = (p: {
   }, [deletions]);
 
   useEffect(() => {
-    if (
-      p.mode === 'rotation' &&
-      (p.redactions.length > 0 || filteredDeletions.length > 0)
-    ) {
+    if (p.mode === 'rotation' && (p.redactions.length > 0 || filteredDeletions.length > 0)) {
       p.onModeChange(previousModeRef.current);
       setDisplayToProceedModal(previousModeRef.current);
     }
@@ -332,10 +295,7 @@ export const PdfRedactor = (p: {
       p.onModeChange(previousModeRef.current);
       setDisplayToProceedModal(previousModeRef.current);
     }
-    if (
-      p.mode === 'deletion' &&
-      (filteredRotations.length > 0 || p.redactions.length > 0)
-    ) {
+    if (p.mode === 'deletion' && (filteredRotations.length > 0 || p.redactions.length > 0)) {
       p.onModeChange(previousModeRef.current);
       setDisplayToProceedModal(previousModeRef.current);
     }
@@ -369,15 +329,14 @@ export const PdfRedactor = (p: {
     if (!elm) return;
 
     elm.addEventListener('mouseup', redactHighlightedIfTextRedactionMode);
-    return () =>
-      elm.removeEventListener('mouseup', redactHighlightedIfTextRedactionMode);
+    return () => elm.removeEventListener('mouseup', redactHighlightedIfTextRedactionMode);
   }, []);
 
   useDocumentFocus({ containerRef: pdfRedactorWrapperElmRef });
   useShiftReleaseRedactTrigger({
     modeRef,
     containerRef: pdfRedactorWrapperElmRef,
-    fire: redactHighlightedTextTrigger.fire
+    fire: redactHighlightedTextTrigger.fire,
   });
 
   const pageDeleteButtonDisabled = (numPages ?? 0) - deletions.length <= 1;
@@ -387,11 +346,7 @@ export const PdfRedactor = (p: {
   }, []);
 
   return (
-    <div
-      className={modeClassMap[p.mode]}
-      ref={pdfRedactorWrapperElmRef}
-      tabIndex={-1}
-    >
+    <div className={modeClassMap[p.mode]} ref={pdfRedactorWrapperElmRef} tabIndex={-1}>
       {displayToProceedModal && (
         <PdfRedactorCenteredModal
           onBackgroundClick={() => setDisplayToProceedModal(undefined)}
@@ -399,19 +354,13 @@ export const PdfRedactor = (p: {
           ariaLabel="Save changes before proceeding"
         >
           {isRedactionEnabledMode(displayToProceedModal) && (
-            <SaveToProceedToRedactionsModal
-              onClose={() => setDisplayToProceedModal(undefined)}
-            />
+            <SaveToProceedToRedactionsModal onClose={() => setDisplayToProceedModal(undefined)} />
           )}
           {displayToProceedModal === 'rotation' && (
-            <SaveToProceedToRotationsModal
-              onClose={() => setDisplayToProceedModal(undefined)}
-            />
+            <SaveToProceedToRotationsModal onClose={() => setDisplayToProceedModal(undefined)} />
           )}
           {displayToProceedModal === 'deletion' && (
-            <SaveToProceedToRotationsModal
-              onClose={() => setDisplayToProceedModal(undefined)}
-            />
+            <SaveToProceedToRotationsModal onClose={() => setDisplayToProceedModal(undefined)} />
           )}
         </PdfRedactorCenteredModal>
       )}
@@ -424,7 +373,7 @@ export const PdfRedactor = (p: {
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
-            padding: '10px'
+            padding: '10px',
           }}
         >
           <span style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
@@ -432,11 +381,7 @@ export const PdfRedactor = (p: {
               className={`govuk-button ${
                 isRedactionEnabledMode(p.mode) ? '' : 'govuk-button--secondary'
               }`}
-              onClick={() =>
-                p.onModeChange(
-                  isRedactionEnabledMode(p.mode) ? 'disabled' : 'redact'
-                )
-              }
+              onClick={() => p.onModeChange(isRedactionEnabledMode(p.mode) ? 'disabled' : 'redact')}
               aria-label="Redaction mode"
               aria-pressed={isRedactionEnabledMode(p.mode)}
             >
@@ -491,15 +436,13 @@ export const PdfRedactor = (p: {
             backgroundColor: '#F3F2F1',
             paddingBottom: '70px',
             boxSizing: 'border-box',
-            border: 'solid 1px black'
+            border: 'solid 1px black',
           }}
         >
           <Document
             file={p.fileUrl}
             onLoadSuccess={async (pdf) => {
-              const cachedRedactionsResp = getRedactionsFromCache(
-                getKeyForAutosaveRedactions()
-              );
+              const cachedRedactionsResp = getRedactionsFromCache(getKeyForAutosaveRedactions());
               const cachedRedactions = cachedRedactionsResp.data;
               const initOrCachedRedactions = (() => {
                 if (p.initRedactions.length > 0) return p.initRedactions;
@@ -519,22 +462,18 @@ export const PdfRedactor = (p: {
                 pagesAmount={numPages!}
                 scale={scaleHelper.scale}
                 onMouseMove={() => {}}
-                redactHighlightedTextTriggerData={
-                  redactHighlightedTextTrigger.data
-                }
+                redactHighlightedTextTriggerData={redactHighlightedTextTrigger.data}
                 mode={p.mode}
                 onPageRedactionsChange={() => {}}
                 onAddRedactions={(x) => {
                   p.onRedactionsChange([...p.redactions, ...x]);
                   p.onAddRedactions({
                     redactions: x,
-                    highlightedText: window.getSelection()?.toString()
+                    highlightedText: window.getSelection()?.toString(),
                   });
                 }}
                 onRemoveRedactions={(ids) => {
-                  p.onRedactionsChange(
-                    p.redactions.filter((red) => !ids.includes(red.id))
-                  );
+                  p.onRedactionsChange(p.redactions.filter((red) => !ids.includes(red.id)));
                   p.onRemoveRedactions(ids);
                 }}
                 redactions={indexedRedactions[j + 1] ?? []}
@@ -545,45 +484,26 @@ export const PdfRedactor = (p: {
                 onPageRotationChange={(x) => {
                   p.onRotationsChange({
                     ...p.indexedRotation,
-                    [j + 1]: {
-                      id: crypto.randomUUID(),
-                      pageNumber: j + 1,
-                      rotationDegrees: x
-                    }
+                    [j + 1]: { id: crypto.randomUUID(), pageNumber: j + 1, rotationDegrees: x },
                   });
                 }}
                 highlightLayers={indexedHighlightLayers.map((layer) => ({
                   highlights: layer.byPage[j + 1] ?? [],
-                  focusedId: layer.focusedId
+                  focusedId: layer.focusedId,
                 }))}
                 pageIsDelete={!!p.indexedDeletion[j + 1]?.isDeleted}
                 onPageIsDeleteChange={(isDeleted) => {
-                  const deletion = {
-                    id: crypto.randomUUID(),
-                    pageNumber: j + 1,
-                    isDeleted
-                  };
+                  const deletion = { id: crypto.randomUUID(), pageNumber: j + 1, isDeleted };
                   const fn = isDeleted ? p.onDeletionAdd : p.onDeletionRemove;
                   fn(deletion);
-                  p.onDeletionsChange({
-                    ...p.indexedDeletion,
-                    [j + 1]: deletion
-                  });
+                  p.onDeletionsChange({ ...p.indexedDeletion, [j + 1]: deletion });
                 }}
               />
             ))}
           </Document>
         </div>
         {p.redactions.length > 0 && (
-          <div
-            style={{
-              position: 'absolute',
-              bottom: '25px',
-              left: 0,
-              right: 0,
-              zIndex: 800
-            }}
-          >
+          <div style={{ position: 'absolute', bottom: '25px', left: 0, right: 0, zIndex: 800 }}>
             <RedactionsFooter
               redactions={p.redactions}
               onRemoveAllRedactionsClick={() => p.onRedactionsChange([])}
@@ -596,15 +516,7 @@ export const PdfRedactor = (p: {
           </div>
         )}
         {filteredRotations.length > 0 && (
-          <div
-            style={{
-              position: 'absolute',
-              bottom: '25px',
-              left: 0,
-              right: 0,
-              zIndex: 800
-            }}
-          >
+          <div style={{ position: 'absolute', bottom: '25px', left: 0, right: 0, zIndex: 800 }}>
             <RotationsFooter
               rotations={filteredRotations}
               onRemoveAllRotationsClick={() => p.onRotationsChange({})}
@@ -616,15 +528,7 @@ export const PdfRedactor = (p: {
           </div>
         )}
         {filteredDeletions.length > 0 && (
-          <div
-            style={{
-              position: 'absolute',
-              bottom: '25px',
-              left: 0,
-              right: 0,
-              zIndex: 800
-            }}
-          >
+          <div style={{ position: 'absolute', bottom: '25px', left: 0, right: 0, zIndex: 800 }}>
             <DeletionsFooter
               deletions={filteredDeletions}
               onRemoveAllDeletionsClick={() => p.onDeletionsChange({})}
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.scss b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.scss
index b7d0724d..6e19dd37 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.scss
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.scss
@@ -1,4 +1,3 @@
-
 .redaction-tooltip {
   display: none;
 
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx
index 304c4b0c..03059659 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx
@@ -17,7 +17,7 @@ export const RedactionTooltip = (p: { onClick: () => void }) => {
         padding: 0,
         cursor: 'pointer',
         font: 'inherit',
-        color: 'inherit'
+        color: 'inherit',
       }}
     >
       <div
@@ -25,7 +25,7 @@ export const RedactionTooltip = (p: { onClick: () => void }) => {
           display: 'inline-flex',
           flexDirection: 'column',
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         }}
       >
         <div
@@ -37,7 +37,7 @@ export const RedactionTooltip = (p: { onClick: () => void }) => {
             display: 'inline-block',
             color: 'white',
             fontWeight: '500',
-            whiteSpace: 'nowrap'
+            whiteSpace: 'nowrap',
           }}
         >
           Remove Redaction
@@ -48,7 +48,7 @@ export const RedactionTooltip = (p: { onClick: () => void }) => {
             height: '0',
             borderLeft: '15px solid transparent',
             borderRight: '15px solid transparent',
-            borderTop: '15px solid #00703c'
+            borderTop: '15px solid #00703c',
           }}
         ></div>
       </div>
@@ -88,14 +88,10 @@ export const PdfTextHighlightOverlay = (p: {
               style={{
                 height: '100%',
                 width: '100%',
-                background: isFocused
-                  ? 'rgba(255, 221, 0, 0.4)'
-                  : 'rgba(255, 0, 0, 0.3)',
-                border: isFocused
-                  ? '3px dashed rgba(255, 221, 0, 0.4)'
-                  : '3px dashed #ff4141',
+                background: isFocused ? 'rgba(255, 221, 0, 0.4)' : 'rgba(255, 0, 0, 0.3)',
+                border: isFocused ? '3px dashed rgba(255, 221, 0, 0.4)' : '3px dashed #ff4141',
                 boxSizing: 'border-box',
-                pointerEvents: 'none'
+                pointerEvents: 'none',
               }}
             />
           </PositionPdfOverlayBox>
@@ -106,7 +102,7 @@ export const PdfTextHighlightOverlay = (p: {
 };
 
 export const PositionPdfOverlayBox = (
-  p: TXywhPair & { scale: number; children: React.ReactNode }
+  p: TXywhPair & { scale: number; children: React.ReactNode },
 ) => (
   <div
     style={{
@@ -114,7 +110,7 @@ export const PositionPdfOverlayBox = (
       left: `${p.xLeft * p.scale}px`,
       bottom: `${p.yBottom * p.scale}px`,
       width: `${p.width * p.scale}px`,
-      height: `${p.height * p.scale}px`
+      height: `${p.height * p.scale}px`,
     }}
   >
     {p.children}
@@ -130,7 +126,7 @@ export const CloseIcon = (p: { color?: string }) => (
       alignItems: 'center',
       justifyContent: 'center',
       fontWeight: 'bold',
-      color: p.color ?? 'black'
+      color: p.color ?? 'black',
     }}
   >
     ×
@@ -149,16 +145,14 @@ export const RedactionBox = (p: {
       className={`redaction-box ${p.interactive ? 'interactive' : ''}`}
       tabIndex={p.interactive ? 0 : -1}
       role={p.interactive ? 'button' : undefined}
-      aria-label={
-        p.interactive ? 'Redaction area. Press Enter to remove.' : undefined
-      }
+      aria-label={p.interactive ? 'Redaction area. Press Enter to remove.' : undefined}
       style={{
         position: 'relative',
         boxSizing: 'border-box',
         background: p.background,
         border: p.border,
         height: '100%',
-        width: '100%'
+        width: '100%',
       }}
       onKeyDown={(e) => {
         if (e.code === 'Enter' || e.code === 'Space') {
@@ -178,7 +172,7 @@ export const PositionedRedactionBox = (
     onRedactionBoxEnterPress: () => void;
     onRedactionTooltipClick: () => void;
     interactive: boolean;
-  }
+  },
 ) => {
   return (
     <PositionPdfOverlayBox
@@ -199,7 +193,7 @@ export const PositionedRedactionBox = (
             position: 'absolute',
             top: '-2px',
             left: '50%',
-            transform: 'translate(-50%, -100%)'
+            transform: 'translate(-50%, -100%)',
           }}
         >
           <RedactionTooltip onClick={p.onRedactionTooltipClick} />
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
index d4e86b12..fa06e945 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
@@ -1,9 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type MouseEvent as ReactMouseEvent
-} from 'react';
+import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react';
 import { Page } from 'react-pdf';
 import { usePageColors } from '../../hooks/ui/usePageColors';
 import { DocumentIcon } from './icons/DocumentIcon';
@@ -12,7 +7,7 @@ import {
   PdfTextHighlightOverlay,
   PositionedRedactionBox,
   PositionPdfOverlayBox,
-  RedactionBox
+  RedactionBox,
 } from './PdfRedactorComponents';
 
 import './PdfRedactorPage.scss';
@@ -25,7 +20,7 @@ import {
   getPdfCoords,
   MIN_REDACTION_SIZE_PX,
   type TCoord,
-  type TRedaction
+  type TRedaction,
 } from './utils/coordUtils';
 import { createId } from './utils/generalUtils';
 import { getPdfCoordPairsOfHighlightedText } from './utils/highlightedTextUtils';
@@ -39,21 +34,14 @@ const isSelectableTextTarget = (target: EventTarget | null) => {
   return el.tagName === 'SPAN' && !!el.closest('.react-pdf__Page__textContent');
 };
 
-const isAreaLargeEnoughToRedact = (
-  corner1: TCoord,
-  corner2: TCoord,
-  scale: number
-) => {
+const isAreaLargeEnoughToRedact = (corner1: TCoord, corner2: TCoord, scale: number) => {
   const { width, height } = convertCoordPairToXywh({
     x1: corner1.x,
     y1: corner1.y,
     x2: corner2.x,
-    y2: corner2.y
+    y2: corner2.y,
   });
-  return (
-    width * scale >= MIN_REDACTION_SIZE_PX &&
-    height * scale >= MIN_REDACTION_SIZE_PX
-  );
+  return width * scale >= MIN_REDACTION_SIZE_PX && height * scale >= MIN_REDACTION_SIZE_PX;
 };
 
 export const PdfRedactorRotationOverlay = (p: {
@@ -76,17 +64,10 @@ export const PdfRedactorRotationOverlay = (p: {
             padding: 0,
             paddingRight: '8px',
             gap: '8px',
-            alignItems: 'center'
+            alignItems: 'center',
           }}
         >
-          <span
-            style={{
-              background: '#1d70b8',
-              height: '25px',
-              width: '25px',
-              padding: '5px'
-            }}
-          >
+          <span style={{ background: '#1d70b8', height: '25px', width: '25px', padding: '5px' }}>
             <RotateIcon color="white" />
           </span>
           <div>
@@ -105,25 +86,13 @@ export const PdfRedactorRotationOverlay = (p: {
         right: 0,
         left: 0,
         backgroundColor: '#00000055',
-        zIndex: 500
+        zIndex: 500,
       }}
     >
       <div
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%,-50%)'
-        }}
+        style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)' }}
       >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            color: '#ffffff',
-            gap: '8px'
-          }}
-        >
+        <div style={{ display: 'flex', flexDirection: 'column', color: '#ffffff', gap: '8px' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
             <GovUkButton
               variant="inverse"
@@ -138,16 +107,11 @@ export const PdfRedactorRotationOverlay = (p: {
                 padding: 0,
                 paddingRight: '8px',
                 gap: '8px',
-                alignItems: 'center'
+                alignItems: 'center',
               }}
             >
               <span
-                style={{
-                  background: '#1d70b8',
-                  height: '25px',
-                  width: '25px',
-                  padding: '5px'
-                }}
+                style={{ background: '#1d70b8', height: '25px', width: '25px', padding: '5px' }}
               >
                 <RotateIcon color="white" flip />
               </span>
@@ -169,26 +133,19 @@ export const PdfRedactorRotationOverlay = (p: {
                 padding: 0,
                 paddingLeft: '8px',
                 gap: '8px',
-                alignItems: 'center'
+                alignItems: 'center',
               }}
             >
               <div>rotate page right</div>
               <span
-                style={{
-                  background: '#1d70b8',
-                  height: '25px',
-                  width: '25px',
-                  padding: '5px'
-                }}
+                style={{ background: '#1d70b8', height: '25px', width: '25px', padding: '5px' }}
               >
                 <RotateIcon color="white" />
               </span>
             </GovUkButton>
           </div>
           <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <span style={{ fontSize: '2.5rem' }}>
-              Rotate page {p.pageRotation}&deg;
-            </span>
+            <span style={{ fontSize: '2.5rem' }}>Rotate page {p.pageRotation}&deg;</span>
           </div>
           <div style={{ display: 'flex', justifyContent: 'center' }}>
             <button
@@ -206,7 +163,7 @@ export const PdfRedactorRotationOverlay = (p: {
                 padding: 0,
                 font: 'inherit',
                 lineHeight: 'inherit',
-                textDecoration: 'underline'
+                textDecoration: 'underline',
               }}
             >
               Cancel
@@ -241,7 +198,7 @@ export const PdfRedactorDeletionOverlay = (p: {
                 padding: 0,
                 paddingRight: '8px',
                 gap: '8px',
-                alignItems: 'center'
+                alignItems: 'center',
               }}
               disabled={pageDeleteButtonDisabled}
             >
@@ -250,18 +207,12 @@ export const PdfRedactorDeletionOverlay = (p: {
                   background: pageDeleteButtonDisabled ? 'gray' : '#1d70b8',
                   height: '25px',
                   width: '25px',
-                  padding: '5px'
+                  padding: '5px',
                 }}
               >
                 <DeleteIcon color="white" />
               </span>
-              <div
-                style={{
-                  textDecoration: pageDeleteButtonDisabled
-                    ? 'line-through'
-                    : 'none'
-                }}
-              >
+              <div style={{ textDecoration: pageDeleteButtonDisabled ? 'line-through' : 'none' }}>
                 Delete page {p.pageNumber} / {p.pagesAmount}
               </div>
             </GovUkButton>
@@ -277,7 +228,7 @@ export const PdfRedactorDeletionOverlay = (p: {
             right: 0,
             left: 0,
             backgroundColor: '#00000055',
-            zIndex: 500
+            zIndex: 500,
           }}
         >
           <div
@@ -285,24 +236,11 @@ export const PdfRedactorDeletionOverlay = (p: {
               position: 'absolute',
               top: '50%',
               left: '50%',
-              transform: 'translate(-50%,-50%)'
+              transform: 'translate(-50%,-50%)',
             }}
           >
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                color: '#ffffff',
-                gap: '8px'
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  gap: '20px'
-                }}
-              >
+            <div style={{ display: 'flex', flexDirection: 'column', color: '#ffffff', gap: '8px' }}>
+              <div style={{ display: 'flex', justifyContent: 'center', gap: '20px' }}>
                 <span style={{ height: '125px', width: '125px' }}>
                   <DocumentIcon color="white" rotateDegrees={0} />
                 </span>
@@ -314,8 +252,7 @@ export const PdfRedactorDeletionOverlay = (p: {
               </div>
               <div style={{ display: 'flex', justifyContent: 'center' }}>
                 <span style={{ color: '#ffffff', textAlign: 'center' }}>
-                  Click "save all deletions" to remove the page from the
-                  document
+                  Click "save all deletions" to remove the page from the document
                 </span>
               </div>
               <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -331,7 +268,7 @@ export const PdfRedactorDeletionOverlay = (p: {
                     padding: 0,
                     font: 'inherit',
                     lineHeight: 'inherit',
-                    textDecoration: 'underline'
+                    textDecoration: 'underline',
                   }}
                 >
                   Cancel
@@ -364,16 +301,13 @@ export const PdfRedactorPage = (p: {
 }) => {
   const { pageNumber, scale, redactions } = p;
   const pageColors = usePageColors();
-  const [pageDimensions, setPageDimensions] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
+  const [pageDimensions, setPageDimensions] = useState<{ width: number; height: number } | null>(
+    null,
+  );
 
   const [firstCorner, setFirstCorner] = useState<TCoord | null>(null);
   const [isAreaDragging, setIsAreaDragging] = useState(false);
-  const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(
-    null
-  );
+  const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);
   const cancelAreaDrag = () => {
     setFirstCorner(null);
     setIsAreaDragging(false);
@@ -397,19 +331,10 @@ export const PdfRedactorPage = (p: {
       const pageHeight = pdfPageRect.height / p.scale;
       const pageWidth = pdfPageRect.width / p.scale;
 
-      const coordPairs = getPdfCoordPairsOfHighlightedText({
-        pdfPageRect,
-        scale
-      });
+      const coordPairs = getPdfCoordPairsOfHighlightedText({ pdfPageRect, scale });
 
       const newRedactions = coordPairs.map((coordPair) => {
-        return {
-          ...coordPair,
-          id: createId(),
-          pageNumber,
-          pageHeight,
-          pageWidth
-        };
+        return { ...coordPair, id: createId(), pageNumber, pageHeight, pageWidth };
       });
 
       if (newRedactions.length === 0) return;
@@ -418,15 +343,14 @@ export const PdfRedactorPage = (p: {
       p.onPageRedactionsChange([...redactions, ...newRedactions]);
 
       window.getSelection()?.removeAllRanges();
-    }
+    },
   });
 
   const pdfPageWrapperElmRef = useRef<HTMLDivElement | null>(null);
   const requestAnimationFrameRef = useRef<number | null>(null);
   useEffect(() => {
     return () => {
-      if (requestAnimationFrameRef.current)
-        cancelAnimationFrame(requestAnimationFrameRef.current);
+      if (requestAnimationFrameRef.current) cancelAnimationFrame(requestAnimationFrameRef.current);
     };
   }, []);
 
@@ -446,13 +370,10 @@ export const PdfRedactorPage = (p: {
         coord2: mousePos,
         pageNumber: p.pageNumber,
         pageRect: pdfPageWrapperElm.getBoundingClientRect(),
-        scale
+        scale,
       });
       p.onAddRedactions([newRedaction]);
-      p.onPageRedactionsChange([
-        ...(redactions ? redactions : []),
-        newRedaction
-      ]);
+      p.onPageRedactionsChange([...(redactions ? redactions : []), newRedaction]);
     }
 
     setFirstCorner(null);
@@ -467,7 +388,7 @@ export const PdfRedactorPage = (p: {
       screenX: e.clientX,
       screenY: e.clientY,
       scale: p.scale,
-      pdfPageRect: e.currentTarget.getBoundingClientRect()
+      pdfPageRect: e.currentTarget.getBoundingClientRect(),
     });
     if (!start) return;
 
@@ -484,7 +405,7 @@ export const PdfRedactorPage = (p: {
           display: 'block',
           margin: 'auto',
           width: 'fit-content',
-          padding: '10px 10px 0px 10px'
+          padding: '10px 10px 0px 10px',
         }}
       >
         <span style={{ position: 'relative', display: 'inline-flex' }}>
@@ -508,9 +429,7 @@ export const PdfRedactorPage = (p: {
           <div
             ref={pdfPageWrapperElmRef}
             style={{ position: 'relative' }}
-            className={`react-pdf-page-wrapper${
-              isAreaDragging ? ' area-dragging' : ''
-            }`}
+            className={`react-pdf-page-wrapper${isAreaDragging ? ' area-dragging' : ''}`}
             onMouseUp={finishAreaRedactionDrag}
           >
             <Page
@@ -518,14 +437,11 @@ export const PdfRedactorPage = (p: {
               pageColors={pageColors}
               onRenderSuccess={() => {
                 const canvas = pdfPageWrapperElmRef.current?.querySelector(
-                  '.react-pdf__Page__canvas'
+                  '.react-pdf__Page__canvas',
                 );
                 if (!canvas) return;
                 const rect = canvas.getBoundingClientRect();
-                setPageDimensions({
-                  width: rect.width / p.scale,
-                  height: rect.height / p.scale
-                });
+                setPageDimensions({ width: rect.width / p.scale, height: rect.height / p.scale });
               }}
               onMouseDown={startAreaRedactionDrag}
               scale={p.scale}
@@ -541,7 +457,7 @@ export const PdfRedactorPage = (p: {
                     screenX: e.clientX,
                     screenY: e.clientY,
                     scale: p.scale,
-                    pdfPageRect: rect
+                    pdfPageRect: rect,
                   });
                   setMousePos(coord);
 
@@ -552,13 +468,12 @@ export const PdfRedactorPage = (p: {
             {firstCorner &&
               mousePos &&
               (() => {
-                const { xLeft, yBottom, width, height } =
-                  convertCoordPairToXywh({
-                    x1: firstCorner.x,
-                    y1: firstCorner.y,
-                    x2: mousePos.x,
-                    y2: mousePos.y
-                  });
+                const { xLeft, yBottom, width, height } = convertCoordPairToXywh({
+                  x1: firstCorner.x,
+                  y1: firstCorner.y,
+                  x2: mousePos.x,
+                  y2: mousePos.y,
+                });
 
                 return (
                   <PositionPdfOverlayBox
@@ -578,21 +493,14 @@ export const PdfRedactorPage = (p: {
               })()}
 
             {redactions?.map((box, i) => {
-              const { xLeft, yBottom, width, height } =
-                convertCoordPairToXywh(box);
+              const { xLeft, yBottom, width, height } = convertCoordPairToXywh(box);
 
-              const widthScale = pageDimensions
-                ? pageDimensions.width / box.pageWidth
-                : 1;
-              const heightScale = pageDimensions
-                ? pageDimensions.height / box.pageHeight
-                : 1;
+              const widthScale = pageDimensions ? pageDimensions.width / box.pageWidth : 1;
+              const heightScale = pageDimensions ? pageDimensions.height / box.pageHeight : 1;
 
               const handleRemoveRedaction = (fnProps: { boxId: string }) => {
                 p.onRemoveRedactions([fnProps.boxId]);
-                p.onPageRedactionsChange(
-                  redactions?.filter((x) => x.id !== fnProps.boxId)
-                );
+                p.onPageRedactionsChange(redactions?.filter((x) => x.id !== fnProps.boxId));
               };
 
               return (
@@ -603,12 +511,8 @@ export const PdfRedactorPage = (p: {
                   width={width * widthScale}
                   height={height * heightScale}
                   scale={p.scale}
-                  onRedactionBoxEnterPress={() =>
-                    handleRemoveRedaction({ boxId: box.id })
-                  }
-                  onRedactionTooltipClick={() =>
-                    handleRemoveRedaction({ boxId: box.id })
-                  }
+                  onRedactionBoxEnterPress={() => handleRemoveRedaction({ boxId: box.id })}
+                  onRedactionTooltipClick={() => handleRemoveRedaction({ boxId: box.id })}
                   interactive
                 />
               );
diff --git a/materials_ui/src/materials_components/PdfRedactor/RedactionTypeSelect.tsx b/materials_ui/src/materials_components/PdfRedactor/RedactionTypeSelect.tsx
index b9998512..aa9855c4 100644
--- a/materials_ui/src/materials_components/PdfRedactor/RedactionTypeSelect.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/RedactionTypeSelect.tsx
@@ -15,7 +15,7 @@ const redactionTypeData = [
   { id: '12', name: 'Phone number' },
   { id: '13', name: 'Email address' },
   { id: '14', name: 'Previous convictions' },
-  { id: '15', name: 'Other' }
+  { id: '15', name: 'Other' },
 ];
 
 export type TRedactionType = (typeof redactionTypeData)[number];
@@ -38,9 +38,7 @@ export const RedactionTypeSelect = (p: {
       style={p.fullWidth ? { width: '100%' } : undefined}
       value={redactionTypeId}
       onChange={(e) => {
-        const newRedactionType = redactionTypeData.find(
-          (itm) => itm.id === e.target.value
-        );
+        const newRedactionType = redactionTypeData.find((itm) => itm.id === e.target.value);
 
         setRedactionTypeId(e.target.value);
         p.onRedactionTypeChange(newRedactionType);
diff --git a/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocus.ts b/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocus.ts
index 8e83694b..ae70c05d 100644
--- a/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocus.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocus.ts
@@ -1,20 +1,14 @@
 import { RefObject, useEffect, useRef } from 'react';
-import {
-  getOrderedTextSpans,
-  getWordStartingIndices
-} from './useDocumentFocusHelpers';
+import { getOrderedTextSpans, getWordStartingIndices } from './useDocumentFocusHelpers';
 
 type WordPosition = { span: Element; offset: number };
 
-export const useDocumentFocus = (p: {
-  containerRef: RefObject<HTMLElement | null>;
-}) => {
+export const useDocumentFocus = (p: { containerRef: RefObject<HTMLElement | null> }) => {
   const currentWordIndex = useRef(-1);
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      const isForward =
-        e.ctrlKey && !e.shiftKey && !e.altKey && e.code === 'Comma';
+      const isForward = e.ctrlKey && !e.shiftKey && !e.altKey && e.code === 'Comma';
       const isBackward = e.ctrlKey && e.key === 'Shift' && !e.altKey;
       if (!isForward && !isBackward) return;
 
@@ -29,11 +23,7 @@ export const useDocumentFocus = (p: {
       if (!words.length) return;
 
       const step = isBackward ? -1 : 1;
-      currentWordIndex.current = clamp(
-        currentWordIndex.current + step,
-        0,
-        words.length - 1
-      );
+      currentWordIndex.current = clamp(currentWordIndex.current + step, 0, words.length - 1);
 
       placeCaretAt(words[currentWordIndex.current]!, container);
     };
@@ -45,21 +35,13 @@ export const useDocumentFocus = (p: {
 
 const collectWordPositions = (container: HTMLElement): WordPosition[] => {
   const textLayers = container.querySelectorAll('.textLayer');
-  const spans = Array.from(textLayers).flatMap((tl) =>
-    getOrderedTextSpans(tl.children)
-  );
+  const spans = Array.from(textLayers).flatMap((tl) => getOrderedTextSpans(tl.children));
   return spans.flatMap((span) =>
-    getWordStartingIndices(span.textContent ?? '').map((offset) => ({
-      span,
-      offset
-    }))
+    getWordStartingIndices(span.textContent ?? '').map((offset) => ({ span, offset })),
   );
 };
 
-const placeCaretAt = (
-  { span, offset }: WordPosition,
-  container: HTMLElement
-) => {
+const placeCaretAt = ({ span, offset }: WordPosition, container: HTMLElement) => {
   const textNode = span.firstChild;
   if (!textNode) return;
 
@@ -77,5 +59,4 @@ const placeCaretAt = (
   container.focus({ preventScroll: true });
 };
 
-const clamp = (value: number, min: number, max: number) =>
-  Math.max(min, Math.min(value, max));
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
diff --git a/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocusHelpers.ts b/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocusHelpers.ts
index 1ccf558f..d5752c75 100644
--- a/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocusHelpers.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/hooks/useDocumentFocusHelpers.ts
@@ -2,9 +2,7 @@ export const getWordStartingIndices = (sentence: string): number[] =>
   Array.from(sentence.matchAll(/\S+/g), (match) => match.index!);
 
 const getTextSpans = (element: Element): Element[] =>
-  element.children.length
-    ? Array.from(element.children).flatMap(getTextSpans)
-    : [element];
+  element.children.length ? Array.from(element.children).flatMap(getTextSpans) : [element];
 
 export const getOrderedTextSpans = (elements: HTMLCollection): Element[] =>
   Array.from(elements)
@@ -14,8 +12,6 @@ export const getOrderedTextSpans = (elements: HTMLCollection): Element[] =>
     .sort((a, b) => {
       const topDifference = a.rect.top - b.rect.top;
       // treat tops within 3px as the same row due to pdfjs oddity
-      return Math.abs(topDifference) > 3
-        ? topDifference
-        : a.rect.left - b.rect.left;
+      return Math.abs(topDifference) > 3 ? topDifference : a.rect.left - b.rect.left;
     })
     .map(({ span }) => span);
diff --git a/materials_ui/src/materials_components/PdfRedactor/hooks/useScrollToFocusedHighlight.ts b/materials_ui/src/materials_components/PdfRedactor/hooks/useScrollToFocusedHighlight.ts
index 387111f7..2a5c40ba 100644
--- a/materials_ui/src/materials_components/PdfRedactor/hooks/useScrollToFocusedHighlight.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/hooks/useScrollToFocusedHighlight.ts
@@ -3,19 +3,13 @@ import type { TSearchHighlight } from '../utils/searchHighlightUtils';
 
 export const useScrollToFocusedHighlight = (
   highlights: TSearchHighlight[],
-  focusedId: string | undefined
+  focusedId: string | undefined,
 ) => {
   useEffect(() => {
     if (!focusedId) return;
     const focusedIsInThisLayer = highlights.some((hl) => hl.id === focusedId);
     if (!focusedIsInThisLayer) return;
-    const elm = document.querySelector(
-      `[data-text-highlight-id="${focusedId}"]`
-    );
-    elm?.scrollIntoView({
-      behavior: 'instant',
-      block: 'center',
-      inline: 'center'
-    });
+    const elm = document.querySelector(`[data-text-highlight-id="${focusedId}"]`);
+    elm?.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'center' });
   }, [focusedId, highlights]);
 };
diff --git a/materials_ui/src/materials_components/PdfRedactor/icons/RotateIcon.tsx b/materials_ui/src/materials_components/PdfRedactor/icons/RotateIcon.tsx
index cb7f34b9..c37344c3 100644
--- a/materials_ui/src/materials_components/PdfRedactor/icons/RotateIcon.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/icons/RotateIcon.tsx
@@ -1,8 +1,4 @@
-export const RotateIcon = (p: {
-  flip?: boolean;
-  color: string;
-  rotateDegrees?: number;
-}) => {
+export const RotateIcon = (p: { flip?: boolean; color: string; rotateDegrees?: number }) => {
   const { rotateDegrees = 0, flip = false } = p;
   return (
     <svg
@@ -11,7 +7,7 @@ export const RotateIcon = (p: {
       style={{
         width: '100%',
         height: '100%',
-        transform: `rotate(${rotateDegrees}deg) scaleX(${flip ? -1 : 1})`
+        transform: `rotate(${rotateDegrees}deg) scaleX(${flip ? -1 : 1})`,
       }}
       fill={p.color}
     >
diff --git a/materials_ui/src/materials_components/PdfRedactor/icons/TickCircleIcon.tsx b/materials_ui/src/materials_components/PdfRedactor/icons/TickCircleIcon.tsx
index f20373e7..29ae89bd 100644
--- a/materials_ui/src/materials_components/PdfRedactor/icons/TickCircleIcon.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/icons/TickCircleIcon.tsx
@@ -1,8 +1,4 @@
-export const TickCircleIcon = (p: {
-  height: number;
-  width: number;
-  color?: string;
-}) => {
+export const TickCircleIcon = (p: { height: number; width: number; color?: string }) => {
   return (
     <div style={{ width: `${p.width}px`, height: `${p.height}px` }}>
       <svg
diff --git a/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorCenteredModal.tsx b/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorCenteredModal.tsx
index 0e993c01..63d00372 100644
--- a/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorCenteredModal.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorCenteredModal.tsx
@@ -41,7 +41,7 @@ export const PdfRedactorCenteredModal = (p: {
           zIndex: 999,
           display: 'flex',
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         }}
         onClick={p.onBackgroundClick}
       >
@@ -57,7 +57,7 @@ export const PdfRedactorCenteredModal = (p: {
             boxShadow: '0 0 5px 5px #0003',
             zIndex: 1000,
             filter: 'drop-shadow(0 1px 2.5px #000)',
-            overflow: 'hidden'
+            overflow: 'hidden',
           }}
           onClick={(e) => e.stopPropagation()}
         >
diff --git a/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorMiniModal.tsx b/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorMiniModal.tsx
index f5097a34..c2b23738 100644
--- a/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorMiniModal.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/modals/PdfRedactorMiniModal.tsx
@@ -1,10 +1,4 @@
-import {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type ReactNode
-} from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { useFocusTrap } from '../../../caseWorkApp/hooks/useFocusTrap';
 import { useLastFocus } from '../../../caseWorkApp/hooks/useLastFocus';
 
@@ -26,8 +20,7 @@ const computePosition = (p: {
   if (p.placement === 'above') {
     left = p.coordX - p.width / 2;
     const roomAbove = p.coordY - GAP_PX;
-    top =
-      roomAbove >= p.height ? p.coordY - GAP_PX - p.height : p.coordY + GAP_PX;
+    top = roomAbove >= p.height ? p.coordY - GAP_PX - p.height : p.coordY + GAP_PX;
   } else {
     left = p.coordX + p.width > vw ? p.coordX - p.width : p.coordX;
     top = p.coordY + p.height > vh ? p.coordY - p.height : p.coordY;
@@ -35,7 +28,7 @@ const computePosition = (p: {
 
   return {
     left: Math.min(Math.max(GAP_PX, left), vw - p.width - GAP_PX),
-    top: Math.min(Math.max(GAP_PX, top), vh - p.height - GAP_PX)
+    top: Math.min(Math.max(GAP_PX, top), vh - p.height - GAP_PX),
   };
 };
 
@@ -52,10 +45,7 @@ export const PdfRedactorMiniModal = (p: {
   const dimBackground = p.dimBackground ?? true;
   const placement = p.placement ?? 'auto';
   const popupRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<{
-    left: number;
-    top: number;
-  } | null>(null);
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
 
   useFocusTrap('#pdf-redactor-mini-modal');
   useLastFocus();
@@ -79,15 +69,7 @@ export const PdfRedactorMiniModal = (p: {
     const el = popupRef.current;
     if (!el) return;
     const { width, height } = el.getBoundingClientRect();
-    setPosition(
-      computePosition({
-        coordX: p.coordX,
-        coordY: p.coordY,
-        width,
-        height,
-        placement
-      })
-    );
+    setPosition(computePosition({ coordX: p.coordX, coordY: p.coordY, width, height, placement }));
   }, [p.coordX, p.coordY, placement]);
 
   return (
@@ -101,7 +83,7 @@ export const PdfRedactorMiniModal = (p: {
           bottom: 0,
           backgroundColor: dimBackground ? '#00000080' : undefined,
           zIndex: 999,
-          pointerEvents: 'auto'
+          pointerEvents: 'auto',
         }}
         onClick={p.onBackgroundClick}
       />
@@ -122,7 +104,7 @@ export const PdfRedactorMiniModal = (p: {
           padding: '16px',
           zIndex: 1000,
           filter: 'drop-shadow(0 1px 2.5px #000)',
-          pointerEvents: 'auto'
+          pointerEvents: 'auto',
         }}
       >
         {p.children}
diff --git a/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToDeletionsModal.tsx b/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToDeletionsModal.tsx
index 3fa7ef94..d0262ea1 100644
--- a/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToDeletionsModal.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToDeletionsModal.tsx
@@ -9,7 +9,7 @@ export const SaveToProceedToDeletionsModal = (p: { onClose: () => void }) => {
         maxWidth: '45vw',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'stretch'
+        alignItems: 'stretch',
       }}
     >
       <div
@@ -17,7 +17,7 @@ export const SaveToProceedToDeletionsModal = (p: { onClose: () => void }) => {
           background: '#f1f2f3',
           borderBottom: 'solid 1px #b1b4b6',
           display: 'flex',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
         }}
       >
         <div style={{ fontSize: '20px', fontWeight: 700, padding: '10px' }}>
@@ -25,14 +25,7 @@ export const SaveToProceedToDeletionsModal = (p: { onClose: () => void }) => {
         </div>
         <CloseIconButton onClick={() => p.onClose()} />
       </div>
-      <div
-        style={{
-          padding: '16px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '16px'
-        }}
-      >
+      <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
         <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
           <span
             style={{
@@ -40,19 +33,17 @@ export const SaveToProceedToDeletionsModal = (p: { onClose: () => void }) => {
               overflow: 'hidden',
               minWidth: '45px',
               minHeight: '45px',
-              display: 'inline-flex'
+              display: 'inline-flex',
             }}
           >
             <CloseIcon backgroundColor="black" />
           </span>
           <div style={{ fontSize: '20px', fontWeight: 700 }}>
-            You cannot delete pages as you have unsaved rotations/redactions and
-            these will be lost.
+            You cannot delete pages as you have unsaved rotations/redactions and these will be lost.
           </div>
         </div>
         <div style={{ fontSize: '20px' }}>
-          Remove or save your rotations/redactions and you will be able to
-          continue.
+          Remove or save your rotations/redactions and you will be able to continue.
         </div>
         <div>
           <GovUkButton onClick={() => p.onClose()} variant="inverse">
diff --git a/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRedactionsModal.tsx b/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRedactionsModal.tsx
index 1d5ebfa7..88857bfe 100644
--- a/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRedactionsModal.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRedactionsModal.tsx
@@ -9,7 +9,7 @@ export const SaveToProceedToRedactionsModal = (p: { onClose: () => void }) => {
         maxWidth: '45vw',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'stretch'
+        alignItems: 'stretch',
       }}
     >
       <div
@@ -17,7 +17,7 @@ export const SaveToProceedToRedactionsModal = (p: { onClose: () => void }) => {
           background: '#f1f2f3',
           borderBottom: 'solid 1px #b1b4b6',
           display: 'flex',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
         }}
       >
         <div style={{ fontSize: '20px', fontWeight: 700, padding: '10px' }}>
@@ -25,14 +25,7 @@ export const SaveToProceedToRedactionsModal = (p: { onClose: () => void }) => {
         </div>
         <CloseIconButton onClick={() => p.onClose()} />
       </div>
-      <div
-        style={{
-          padding: '16px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '16px'
-        }}
-      >
+      <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
         <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
           <span
             style={{
@@ -40,19 +33,17 @@ export const SaveToProceedToRedactionsModal = (p: { onClose: () => void }) => {
               overflow: 'hidden',
               minWidth: '45px',
               minHeight: '45px',
-              display: 'inline-flex'
+              display: 'inline-flex',
             }}
           >
             <CloseIcon backgroundColor="black" />
           </span>
           <div style={{ fontSize: '20px', fontWeight: 700 }}>
-            You cannot redact pages as you have unsaved rotations/deletions and
-            these will be lost.
+            You cannot redact pages as you have unsaved rotations/deletions and these will be lost.
           </div>
         </div>
         <div style={{ fontSize: '20px' }}>
-          Remove or save your rotations/deletions and you will be able to
-          continue
+          Remove or save your rotations/deletions and you will be able to continue
         </div>
         <div>
           <GovUkButton onClick={() => p.onClose()} variant="inverse">
diff --git a/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRotationsModal.tsx b/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRotationsModal.tsx
index 68af0db1..00b184a2 100644
--- a/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRotationsModal.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/modals/SaveToProceedToRotationsModal.tsx
@@ -9,7 +9,7 @@ export const SaveToProceedToRotationsModal = (p: { onClose: () => void }) => {
         maxWidth: '45vw',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'stretch'
+        alignItems: 'stretch',
       }}
     >
       <div
@@ -17,7 +17,7 @@ export const SaveToProceedToRotationsModal = (p: { onClose: () => void }) => {
           background: '#f1f2f3',
           borderBottom: 'solid 1px #b1b4b6',
           display: 'flex',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
         }}
       >
         <div style={{ fontSize: '20px', fontWeight: 700, padding: '10px' }}>
@@ -25,14 +25,7 @@ export const SaveToProceedToRotationsModal = (p: { onClose: () => void }) => {
         </div>
         <CloseIconButton onClick={() => p.onClose()} />
       </div>
-      <div
-        style={{
-          padding: '16px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '16px'
-        }}
-      >
+      <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
         <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
           <span
             style={{
@@ -40,19 +33,17 @@ export const SaveToProceedToRotationsModal = (p: { onClose: () => void }) => {
               overflow: 'hidden',
               minWidth: '45px',
               minHeight: '45px',
-              display: 'inline-flex'
+              display: 'inline-flex',
             }}
           >
             <CloseIcon backgroundColor="black" />
           </span>
           <div style={{ fontSize: '20px', fontWeight: 700 }}>
-            You cannot rotate pages as you have unsaved redactions/deletions and
-            these will be lost.
+            You cannot rotate pages as you have unsaved redactions/deletions and these will be lost.
           </div>
         </div>
         <div style={{ fontSize: '20px' }}>
-          Remove or save your redactions/deletions and you will be able to
-          continue.
+          Remove or save your redactions/deletions and you will be able to continue.
         </div>
         <div>
           <GovUkButton onClick={() => p.onClose()} variant="inverse">
diff --git a/materials_ui/src/materials_components/PdfRedactor/templates/CloseIconButton.tsx b/materials_ui/src/materials_components/PdfRedactor/templates/CloseIconButton.tsx
index 2514d7d4..aa7d8490 100644
--- a/materials_ui/src/materials_components/PdfRedactor/templates/CloseIconButton.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/templates/CloseIconButton.tsx
@@ -14,15 +14,10 @@ export const CloseIconButton = (p: { onClick: () => void }) => {
         cursor: 'pointer',
         border: 'none',
         padding: 0,
-        display: 'inline-flex'
+        display: 'inline-flex',
       }}
     >
-      <svg
-        viewBox="0 0 25 25"
-        xmlns="http://www.w3.org/2000/svg"
-        height="45px"
-        width="45px"
-      >
+      <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" height="45px" width="45px">
         <path stroke="white" strokeWidth="3" d="M7.25,7.25,17.75,17.75" />
         <path stroke="white" strokeWidth="3" d="M7.25,17.75,17.75,7.25" />
       </svg>
diff --git a/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.scss b/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.scss
index fdf6f955..58864bd4 100644
--- a/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.scss
+++ b/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.scss
@@ -1,3 +1,3 @@
 .govuk-button {
   margin-bottom: 0 !important;
-}
\ No newline at end of file
+}
diff --git a/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.tsx b/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.tsx
index 2db8fe18..b5c837dc 100644
--- a/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/templates/GovUkButton.tsx
@@ -7,15 +7,12 @@ type TProps = TInitProps & { variant?: TButtonVariant };
 const buttonVariantMap: { [k in TButtonVariant]: string } = {
   default: '',
   inverse: 'govuk-button--inverse',
-  secondary: 'govuk-button--secondary'
+  secondary: 'govuk-button--secondary',
 };
 
 export const GovUkButton = (p: TProps) => {
   const { className, variant = 'default', ...otherProps } = p;
   return (
-    <button
-      className={`govuk-button ${buttonVariantMap[variant]} ${className}`}
-      {...otherProps}
-    />
+    <button className={`govuk-button ${buttonVariantMap[variant]} ${className}`} {...otherProps} />
   );
 };
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/bulkRedactionUtils.ts b/materials_ui/src/materials_components/PdfRedactor/utils/bulkRedactionUtils.ts
index eb362fcf..cb917185 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/bulkRedactionUtils.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/bulkRedactionUtils.ts
@@ -7,9 +7,7 @@ const POINTS_PER_INCH = 72;
 const PADDING_X_POINTS = 3;
 const PADDING_Y_POINTS = 1.1;
 
-export const convertSearchResponseToRedactions = (
-  resp: TBulkSearchResponse
-): TRedaction[] =>
+export const convertSearchResponseToRedactions = (resp: TBulkSearchResponse): TRedaction[] =>
   resp.redactionDefinitions
     .flatMap((def) =>
       def.redactionCoordinates.map((c) => {
@@ -22,18 +20,16 @@ export const convertSearchResponseToRedactions = (
           x1: toPoints(Math.min(c.x1, c.x2)),
           y1: toPoints(def.height - Math.max(c.y1, c.y2)) - PADDING_Y_POINTS,
           x2: toPoints(Math.max(c.x1, c.x2)) + PADDING_X_POINTS,
-          y2: toPoints(def.height - Math.min(c.y1, c.y2)) + PADDING_Y_POINTS
+          y2: toPoints(def.height - Math.min(c.y1, c.y2)) + PADDING_Y_POINTS,
         };
-      })
+      }),
     )
     .sort((a, b) => {
       if (a.pageNumber !== b.pageNumber) return a.pageNumber - b.pageNumber;
       return b.y1 - a.y1;
     });
 
-export const convertCandidatesToSearchHighlights = (
-  candidates: TRedaction[]
-): TSearchHighlight[] =>
+export const convertCandidatesToSearchHighlights = (candidates: TRedaction[]): TSearchHighlight[] =>
   candidates.map((c) => ({
     id: c.id,
     pageNumber: c.pageNumber,
@@ -42,5 +38,5 @@ export const convertCandidatesToSearchHighlights = (
     xLeft: Math.min(c.x1, c.x2),
     xRight: Math.max(c.x1, c.x2),
     yTop: c.pageHeight - Math.max(c.y1, c.y2),
-    yBottom: c.pageHeight - Math.min(c.y1, c.y2)
+    yBottom: c.pageHeight - Math.min(c.y1, c.y2),
   }));
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/coordUtils.ts b/materials_ui/src/materials_components/PdfRedactor/utils/coordUtils.ts
index 4aa6d69f..e7d9c360 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/coordUtils.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/coordUtils.ts
@@ -10,12 +10,7 @@ export type TRect = {
   width: number;
   height: number;
 };
-export type TXywhPair = {
-  xLeft: number;
-  yBottom: number;
-  width: number;
-  height: number;
-};
+export type TXywhPair = { xLeft: number; yBottom: number; width: number; height: number };
 export type TRedaction = TCoordPair & {
   id: string;
   pageNumber: number;
@@ -30,7 +25,7 @@ export const redactionSchema = z.object({
   x1: z.number(),
   y1: z.number(),
   x2: z.number(),
-  y2: z.number()
+  y2: z.number(),
 });
 export const redactionsSchema = z.array(redactionSchema);
 
@@ -96,5 +91,5 @@ export const createRedaction = (p: {
   y2: p.coord2.y,
   pageNumber: p.pageNumber,
   pageHeight: p.pageRect.height / p.scale,
-  pageWidth: p.pageRect.width / p.scale
+  pageWidth: p.pageRect.width / p.scale,
 });
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/highlightedTextUtils.ts b/materials_ui/src/materials_components/PdfRedactor/utils/highlightedTextUtils.ts
index cca5c2ac..80db8175 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/highlightedTextUtils.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/highlightedTextUtils.ts
@@ -3,7 +3,7 @@ import {
   MIN_REDACTION_SIZE_PX,
   safeGetRangeAt,
   TRect,
-  type TCoordPair
+  type TCoordPair,
 } from './coordUtils';
 
 const mergeDomRects = (domRectList: DOMRect[]) => {
@@ -17,7 +17,7 @@ const mergeDomRects = (domRectList: DOMRect[]) => {
         rect.bottom > existing.top &&
         // Horizontally close enough to be on the same line segment
         rect.left <= existing.right + 5 &&
-        rect.right >= existing.left - 5
+        rect.right >= existing.left - 5,
     );
 
     if (match) {
@@ -35,7 +35,7 @@ const mergeDomRects = (domRectList: DOMRect[]) => {
         top: rect.top,
         bottom: rect.bottom,
         width: rect.width,
-        height: rect.height
+        height: rect.height,
       };
       mergedDomRects.push(newRect);
     }
@@ -44,10 +44,7 @@ const mergeDomRects = (domRectList: DOMRect[]) => {
   return mergedDomRects;
 };
 
-export const getPdfCoordPairsOfHighlightedText = (p: {
-  pdfPageRect: DOMRect;
-  scale: number;
-}) => {
+export const getPdfCoordPairsOfHighlightedText = (p: { pdfPageRect: DOMRect; scale: number }) => {
   const selection = window.getSelection();
   if (!selection) return [];
 
@@ -58,33 +55,24 @@ export const getPdfCoordPairsOfHighlightedText = (p: {
   const rects = range.getClientRects();
   const mergedRects = mergeDomRects([...rects]);
   const coordPairs = mergedRects.map((rect) => {
-    if (
-      rect.width < MIN_REDACTION_SIZE_PX ||
-      rect.height < MIN_REDACTION_SIZE_PX
-    )
-      return;
+    if (rect.width < MIN_REDACTION_SIZE_PX || rect.height < MIN_REDACTION_SIZE_PX) return;
 
     const coord1 = getPdfCoords({
       screenX: rect.left,
       screenY: rect.bottom,
       scale: p.scale,
-      pdfPageRect: p.pdfPageRect
+      pdfPageRect: p.pdfPageRect,
     });
     const coord2 = getPdfCoords({
       screenX: rect.right,
       screenY: rect.top,
       scale: p.scale,
-      pdfPageRect: p.pdfPageRect
+      pdfPageRect: p.pdfPageRect,
     });
 
     if (!coord1 || !coord2) return;
 
-    const newRedaction: TCoordPair = {
-      x1: coord1.x,
-      y1: coord1.y,
-      x2: coord2.x,
-      y2: coord2.y
-    };
+    const newRedaction: TCoordPair = { x1: coord1.x, y1: coord1.y, x2: coord2.x, y2: coord2.y };
     return newRedaction;
   });
 
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/rotationUtils.ts b/materials_ui/src/materials_components/PdfRedactor/utils/rotationUtils.ts
index 7f2dee40..c791e067 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/rotationUtils.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/rotationUtils.ts
@@ -1,7 +1,3 @@
-export type TRotation = {
-  id: string;
-  pageNumber: number;
-  rotationDegrees: number;
-};
+export type TRotation = { id: string; pageNumber: number; rotationDegrees: number };
 
 export type TIndexedRotation = { [k: number]: TRotation };
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts b/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts
index 80e1465b..92235df8 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts
@@ -13,13 +13,10 @@ export type TSearchHighlight = {
   yBottom: number;
 };
 
-export type THighlightLayer = {
-  highlights: TSearchHighlight[];
-  focusedId?: string;
-};
+export type THighlightLayer = { highlights: TSearchHighlight[]; focusedId?: string };
 
 export const convertMatchesToSearchHighlights = (
-  matches: SearchTermResultType['matches']
+  matches: SearchTermResultType['matches'],
 ): TSearchHighlight[] =>
   matches
     .flatMap((match) =>
@@ -30,13 +27,13 @@ export const convertMatchesToSearchHighlights = (
             w.boundingBox![0]!,
             w.boundingBox![2]!,
             w.boundingBox![4]!,
-            w.boundingBox![6]!
+            w.boundingBox![6]!,
           ];
           const ys = [
             w.boundingBox![1]!,
             w.boundingBox![3]!,
             w.boundingBox![5]!,
-            w.boundingBox![7]!
+            w.boundingBox![7]!,
           ];
           return {
             id: crypto.randomUUID(),
@@ -46,9 +43,9 @@ export const convertMatchesToSearchHighlights = (
             xLeft: Math.min(...xs) + PADDING_INCHES,
             xRight: Math.max(...xs) + PADDING_INCHES,
             yTop: Math.min(...ys) - PADDING_INCHES,
-            yBottom: Math.max(...ys) + PADDING_INCHES
+            yBottom: Math.max(...ys) + PADDING_INCHES,
           };
-        })
+        }),
     )
     .sort((a, b) => {
       if (a.pageNumber !== b.pageNumber) return a.pageNumber - b.pageNumber;
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/useTriggger.tsx b/materials_ui/src/materials_components/PdfRedactor/utils/useTriggger.tsx
index b4d85597..9bf75751 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/useTriggger.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/useTriggger.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
 export type TTriggerData = [] | undefined;
 export const useTrigger = () => {
@@ -11,10 +11,7 @@ export const useTrigger = () => {
   return { data, fire };
 };
 
-export const useTriggerListener = (p: {
-  triggerData: TTriggerData;
-  fn: () => void;
-}) => {
+export const useTriggerListener = (p: { triggerData: TTriggerData; fn: () => void }) => {
   useEffect(() => {
     if (!p.triggerData) return;
     p.fn();
diff --git a/materials_ui/src/materials_components/RedactionLog/Modal.tsx b/materials_ui/src/materials_components/RedactionLog/Modal.tsx
index 6c41d76c..e92a8f07 100644
--- a/materials_ui/src/materials_components/RedactionLog/Modal.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/Modal.tsx
@@ -18,6 +18,6 @@ export const Modal = ({ children, onClose }: ModalProps) => {
         {children}
       </div>
     </div>,
-    document.body
+    document.body,
   );
 };
diff --git a/materials_ui/src/materials_components/RedactionLog/Popover.tsx b/materials_ui/src/materials_components/RedactionLog/Popover.tsx
index 1cf6fce4..7fc621ce 100644
--- a/materials_ui/src/materials_components/RedactionLog/Popover.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/Popover.tsx
@@ -14,7 +14,7 @@ export const Popover = ({ title, content }: Props) => {
         position: 'absolute',
         top: '40px',
         right: '0px',
-        zIndex: 1000
+        zIndex: 1000,
       }}
     >
       <h3 style={{ margin: 0, fontSize: '19px' }}>{title}</h3>
diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx
index f7f327f3..05015614 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx
@@ -3,7 +3,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import {
   getDocumentTypeMappings,
   postRedactionLog,
-  useAxiosInstances
+  useAxiosInstances,
 } from '../../caseWorkApp/components/utils/getData';
 import { TLookupsResponse } from '../../caseWorkApp/types/redaction';
 import { ChargeStatusCode } from '../../constants/chargeStatus';
@@ -17,7 +17,7 @@ import { RedactionLogModalBody } from './RedactionLogModalBody';
 import { RedactionLogModalHeader } from './RedactionLogModalHeader';
 import {
   getDocumentTypeValueFromMappings,
-  type RedactionLogMappingData
+  type RedactionLogMappingData,
 } from './utils/getDocumentTypeValueFromMappings';
 import { transformFormDataToApiFormat } from './utils/transformFormData';
 
@@ -55,11 +55,7 @@ type RedactionLogModalProps = {
 };
 
 const WhiteTickIcon = () => (
-  <svg
-    className={styles.whiteTickIcon}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
+  <svg className={styles.whiteTickIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <path d="M369.2,174.8c7.8,7.8,7.8,20.5,0,28.3L235,337.2c-7.8,7.8-20.5,7.8-28.3,0l-63.9-63.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l49.7,49.7l120-120C348.7,167,361.4,167,369.2,174.8z M512,256c0,141.5-114.5,256-256,256C114.5,512,0,397.5,0,256C0,114.5,114.5,0,256,0C397.5,0,512,114.5,512,256z M472,256c0-119.4-96.6-216-216-216C136.6,40,40,136.6,40,256c0,119.4,96.6,216,216,216C375.4,472,472,375.4,472,256z" />
   </svg>
 );
@@ -74,10 +70,11 @@ export const RedactionLogModal = ({
   mode,
   redactions,
   selectedRedactionTypes = [],
-  redactionSaveStatus
+  redactionSaveStatus,
 }: RedactionLogModalProps) => {
-  const [documentTypeMappings, setDocumentTypeMappings] =
-    useState<RedactionLogMappingData | null>(null);
+  const [documentTypeMappings, setDocumentTypeMappings] = useState<RedactionLogMappingData | null>(
+    null,
+  );
   const { data: caseDetailsResponse } = useCaseDetails({ urn });
 
   const chargeStatusFromCase = useMemo((): ChargeStatusCode | undefined => {
@@ -91,24 +88,20 @@ export const RedactionLogModal = ({
       return undefined;
     }
 
-    return row.isCaseCharged
-      ? ChargeStatusCode.PostCharge
-      : ChargeStatusCode.PreCharge;
+    return row.isCaseCharged ? ChargeStatusCode.PostCharge : ChargeStatusCode.PreCharge;
   }, [caseId, caseDetailsResponse]);
 
   const policeCode = urn.substring(0, 2);
 
   const existingInvestigatingAgencyId = lookups?.ouCodeMapping.find(
-    (ia) => ia.ouCode === policeCode
+    (ia) => ia.ouCode === policeCode,
   )?.investigatingAgencyCode;
 
   const { redactionLogAxios } = useAxiosInstances();
 
   useEffect(() => {
     const loadDocumentTypeMappings = async () => {
-      const data = await getDocumentTypeMappings({
-        axiosInstance: redactionLogAxios
-      });
+      const data = await getDocumentTypeMappings({ axiosInstance: redactionLogAxios });
       if (data) {
         setDocumentTypeMappings(data);
       }
@@ -130,8 +123,8 @@ export const RedactionLogModal = ({
       investigatingAgencyId: existingInvestigatingAgencyId || '',
       chargeStatus: chargeStatusFromCase ?? ChargeStatusCode.PreCharge,
       documentTypeId: activeDocument?.cmsDocType.documentTypeId || '',
-      supportingNotes: ''
-    }
+      supportingNotes: '',
+    },
   });
 
   useEffect(() => {
@@ -143,7 +136,7 @@ export const RedactionLogModal = ({
 
     const documentTypeIdValue = getDocumentTypeValueFromMappings(
       cmsDocumentTypeId,
-      documentTypeMappings
+      documentTypeMappings,
     );
 
     if (!documentTypeIdValue) {
@@ -153,7 +146,7 @@ export const RedactionLogModal = ({
     form.setValue('documentTypeId', documentTypeIdValue, {
       shouldDirty: false,
       shouldTouch: false,
-      shouldValidate: false
+      shouldValidate: false,
     });
   }, [activeDocument?.cmsDocType.documentTypeId, documentTypeMappings, form]);
 
@@ -165,13 +158,10 @@ export const RedactionLogModal = ({
         activeDocument,
         lookups,
         mode,
-        listModeRedactionTypes: selectedRedactionTypes
+        listModeRedactionTypes: selectedRedactionTypes,
       });
 
-      await postRedactionLog({
-        axiosInstance: redactionLogAxios,
-        data: apiData
-      });
+      await postRedactionLog({ axiosInstance: redactionLogAxios, data: apiData });
 
       onClose();
     } catch (error) {
@@ -195,9 +185,7 @@ export const RedactionLogModal = ({
           {redactionSaveStatus === 'saved' && (
             <div className={styles.savedBanner}>
               <WhiteTickIcon />
-              <h2 className={styles.bannerText}>
-                Redactions successfully saved
-              </h2>
+              <h2 className={styles.bannerText}>Redactions successfully saved</h2>
             </div>
           )}
 
diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
index 1842e9ab..960e3aaa 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
@@ -34,7 +34,7 @@ export type RedactionLogFormValues = {
 const RedactionTypesGrid = ({
   value,
   onChange,
-  redactionTypes = []
+  redactionTypes = [],
 }: {
   value: number[];
   onChange: (next: number[]) => void;
@@ -60,7 +60,7 @@ const RedactionTypesGrid = ({
         display: 'grid',
         gridTemplateColumns: 'repeat(4, 1fr)',
         gap: '8px',
-        marginTop: '8px'
+        marginTop: '8px',
       }}
     >
       {redactionTypes.map((type) => (
@@ -81,13 +81,13 @@ export const RedactionLogModalBody = ({
   activeDocument,
   mode,
   selectedRedactionTypes,
-  lookups
+  lookups,
 }: RedactionLogModalBodyProps) => {
   const {
     control,
     register,
     watch,
-    formState: { errors }
+    formState: { errors },
   } = useFormContext<RedactionLogFormValues>();
 
   const [showPopover, setShowPopover] = useState(false);
@@ -100,7 +100,7 @@ export const RedactionLogModalBody = ({
   const redactionTypes =
     lookups?.missedRedactions?.map((redaction) => ({
       id: parseInt(redaction.id),
-      name: redaction.name
+      name: redaction.name,
     })) || [];
 
   return (
@@ -117,14 +117,11 @@ export const RedactionLogModalBody = ({
                 selectedRedactionTypes.reduce(
                   (acc, x) => {
                     const current = acc[x.id];
-                    acc[x.id] = {
-                      name: current?.name ?? x.name,
-                      count: (current?.count ?? 0) + 1
-                    };
+                    acc[x.id] = { name: current?.name ?? x.name, count: (current?.count ?? 0) + 1 };
                     return acc;
                   },
-                  {} as Record<string, { name: string; count: number }>
-                )
+                  {} as Record<string, { name: string; count: number }>,
+                ),
               ).map(([id, value]) => (
                 <li key={id}>
                   {value.count} - {value.name}
@@ -143,14 +140,10 @@ export const RedactionLogModalBody = ({
           }
         >
           <fieldset className="govuk-fieldset">
-            <legend className="govuk-fieldset__legend">
-              Confirm the redaction type
-            </legend>
+            <legend className="govuk-fieldset__legend">Confirm the redaction type</legend>
 
             {errors.redactionCategorySelected && (
-              <p className="govuk-error-message">
-                {errors.redactionCategorySelected.message}
-              </p>
+              <p className="govuk-error-message">{errors.redactionCategorySelected.message}</p>
             )}
 
             <Controller
@@ -184,7 +177,7 @@ export const RedactionLogModalBody = ({
                         if (!underRedactionSelected) return true;
                         if (arr && arr.length > 0) return true;
                         return 'Select an under redaction type';
-                      }
+                      },
                     }}
                     render={({ field }) => (
                       <>
@@ -194,9 +187,7 @@ export const RedactionLogModalBody = ({
                           </p>
                         )}
 
-                        <legend className="govuk-fieldset__legend">
-                          Types of redaction
-                        </legend>
+                        <legend className="govuk-fieldset__legend">Types of redaction</legend>
                         <RedactionTypesGrid
                           value={field.value ?? []}
                           onChange={field.onChange}
@@ -229,7 +220,7 @@ export const RedactionLogModalBody = ({
                 validate: () =>
                   underRedactionSelected || overRedactionSelected
                     ? true
-                    : 'Select a redaction category'
+                    : 'Select a redaction category',
               }}
               render={() => <></>}
             />
@@ -244,9 +235,7 @@ export const RedactionLogModalBody = ({
                   className={`govuk-form-group ${errors.overReason?.message ? 'govuk-form-group--error' : ''}`}
                 >
                   {errors.overReason?.message && (
-                    <p className="govuk-error-message">
-                      {errors.overReason?.message}
-                    </p>
+                    <p className="govuk-error-message">{errors.overReason?.message}</p>
                   )}
                   <Controller
                     name="overReason"
@@ -254,19 +243,13 @@ export const RedactionLogModalBody = ({
                     rules={{
                       validate: (value) => {
                         if (!overRedactionSelected) return true;
-                        if (
-                          value === 'investigative-agency' ||
-                          value === 'cps-colleague'
-                        )
+                        if (value === 'investigative-agency' || value === 'cps-colleague')
                           return true;
                         return 'Select an under redaction type';
-                      }
+                      },
                     }}
                     render={({ field }) => (
-                      <div
-                        className="govuk-radios govuk-radios--small"
-                        data-module="govuk-radios"
-                      >
+                      <div className="govuk-radios govuk-radios--small" data-module="govuk-radios">
                         <div className="govuk-radios__item">
                           <input
                             className="govuk-radios__input"
@@ -316,13 +299,11 @@ export const RedactionLogModalBody = ({
                         if (!overRedactionSelected) return true;
                         if (arr && arr.length > 0) return true;
                         return 'Select an over redaction type';
-                      }
+                      },
                     }}
                     render={({ field }) => (
                       <>
-                        <legend className="govuk-fieldset__legend">
-                          Types of redaction
-                        </legend>
+                        <legend className="govuk-fieldset__legend">Types of redaction</legend>
 
                         {errors.overRedactionTypeIds && (
                           <p className="govuk-error-message">
@@ -354,16 +335,14 @@ export const RedactionLogModalBody = ({
             gap: '8px',
             justifyContent: 'space-between',
             width: '50%',
-            position: 'relative'
+            position: 'relative',
           }}
         >
           <label className="govuk-label" htmlFor="supportingNotes">
             Supporting notes (optional)
           </label>
           {errors.supportingNotes && (
-            <p className="govuk-error-message">
-              {errors.supportingNotes.message}
-            </p>
+            <p className="govuk-error-message">{errors.supportingNotes.message}</p>
           )}
 
           <a
@@ -381,8 +360,8 @@ export const RedactionLogModalBody = ({
                 return (
                   <ul style={{ paddingLeft: '1rem', fontSize: '19px' }}>
                     <li>
-                      Detail the redaction issue identified, e.g. Statement of
-                      XX (Initials) DOB redacted
+                      Detail the redaction issue identified, e.g. Statement of XX (Initials) DOB
+                      redacted
                     </li>
                     <li>Avoid recording full names</li>
                     <li>Do not record sensitive personal data</li>
@@ -401,10 +380,7 @@ export const RedactionLogModalBody = ({
           style={{ width: '50%' }}
           maxLength={400}
           {...register('supportingNotes', {
-            maxLength: {
-              value: 400,
-              message: 'Supporting notes cannot exceed 400 characters'
-            }
+            maxLength: { value: 400, message: 'Supporting notes cannot exceed 400 characters' },
           })}
         />
 
diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalHeader.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalHeader.tsx
index a4e9432d..b909f54e 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalHeader.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalHeader.tsx
@@ -9,10 +9,7 @@ import { SelectDropdown } from './templates/Select';
 
 type RedactionLogModalHeaderProps = { urn: string; lookups?: TLookupsResponse };
 
-export const RedactionLogModalHeader = ({
-  urn,
-  lookups
-}: RedactionLogModalHeaderProps) => {
+export const RedactionLogModalHeader = ({ urn, lookups }: RedactionLogModalHeaderProps) => {
   const areas = lookups?.areas || [];
   const divisions = lookups?.divisions || [];
   const investigatingAgencies = lookups?.investigatingAgencies || [];
@@ -26,12 +23,11 @@ export const RedactionLogModalHeader = ({
   const {
     control,
     setValue,
-    formState: { errors }
+    formState: { errors },
   } = useFormContext<RedactionLogFormInputs>();
 
   if (errors.areasAndDivisionsId) {
-    errors.areasAndDivisionsId.message =
-      'Please enter valid CPS Area or Central Casework Division';
+    errors.areasAndDivisionsId.message = 'Please enter valid CPS Area or Central Casework Division';
   }
 
   if (errors.businessUnitId) {
@@ -46,12 +42,10 @@ export const RedactionLogModalHeader = ({
           alignItems: 'center',
           justifyContent: 'space-between',
           marginBottom: '2rem',
-          position: 'relative'
+          position: 'relative',
         }}
       >
-        <h1 className="govuk-heading-l govuk-!-margin-bottom-0">
-          {urn} - Redaction Log
-        </h1>
+        <h1 className="govuk-heading-l govuk-!-margin-bottom-0">{urn} - Redaction Log</h1>
         <a
           className="govuk-link"
           style={{ fontSize: '19px' }}
@@ -67,16 +61,16 @@ export const RedactionLogModalHeader = ({
               return (
                 <ul style={{ paddingLeft: '1rem', fontSize: '19px' }}>
                   <li>
-                    This popup allows the capture of details which will be
-                    recorded into the Redaction Log automatically
+                    This popup allows the capture of details which will be recorded into the
+                    Redaction Log automatically
                   </li>
                   <li>
-                    Once added, if an entry needs editing or deleting, this
-                    should be done in the Redaction log
+                    Once added, if an entry needs editing or deleting, this should be done in the
+                    Redaction log
                   </li>
                   <li>
-                    Once added, if an entry needs editing or deleting, this
-                    should be done in the Redaction log
+                    Once added, if an entry needs editing or deleting, this should be done in the
+                    Redaction log
                   </li>
                 </ul>
               );
@@ -95,7 +89,7 @@ export const RedactionLogModalHeader = ({
           gap: '20px',
           width: '100%',
           maxWidth: '100%',
-          marginBottom: '0'
+          marginBottom: '0',
         }}
       >
         <Controller
@@ -103,8 +97,7 @@ export const RedactionLogModalHeader = ({
           control={control}
           rules={{
             required: true,
-            validate: (v) =>
-              v !== '' || 'Select a CPS Area or Central Casework Division'
+            validate: (v) => v !== '' || 'Select a CPS Area or Central Casework Division',
           }}
           render={({ field }) => (
             <SelectDropdown
@@ -118,11 +111,7 @@ export const RedactionLogModalHeader = ({
                 setSelectedId(e.target.value);
                 setValue('businessUnitId', '');
               }}
-              error={
-                errors.areasAndDivisionsId
-                  ? 'Select an Area or Division'
-                  : undefined
-              }
+              error={errors.areasAndDivisionsId ? 'Select an Area or Division' : undefined}
             />
           )}
         />
@@ -130,10 +119,7 @@ export const RedactionLogModalHeader = ({
         <Controller
           name="businessUnitId"
           control={control}
-          rules={{
-            required: true,
-            validate: (v) => v !== '' || 'Select a CPS Business Unit'
-          }}
+          rules={{ required: true, validate: (v) => v !== '' || 'Select a CPS Business Unit' }}
           render={({ field }) => (
             <SelectDropdown
               label="CPS Business Unit: "
@@ -142,9 +128,7 @@ export const RedactionLogModalHeader = ({
               options={selectedItem?.children || []}
               value={field.value}
               onChange={(e) => field.onChange(e.target.value)}
-              error={
-                errors.businessUnitId ? 'Select a Business Unit' : undefined
-              }
+              error={errors.businessUnitId ? 'Select a Business Unit' : undefined}
             />
           )}
         />
diff --git a/materials_ui/src/materials_components/RedactionLog/templates/Checkbox.tsx b/materials_ui/src/materials_components/RedactionLog/templates/Checkbox.tsx
index 83236160..ba12c4e1 100644
--- a/materials_ui/src/materials_components/RedactionLog/templates/Checkbox.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/templates/Checkbox.tsx
@@ -7,14 +7,7 @@ type CheckboxProps = {
   isSmall?: boolean;
 };
 
-export const Checkbox = ({
-  id,
-  label,
-  hint,
-  checked,
-  onChange,
-  isSmall
-}: CheckboxProps) => {
+export const Checkbox = ({ id, label, hint, checked, onChange, isSmall }: CheckboxProps) => {
   return (
     <div
       className={`govuk-checkboxes ${isSmall ? 'govuk-checkboxes--small' : ''}`}
@@ -34,10 +27,7 @@ export const Checkbox = ({
         </label>
 
         {hint && (
-          <div
-            id={`${id}-item-hint`}
-            className="govuk-hint govuk-checkboxes__hint"
-          >
+          <div id={`${id}-item-hint`} className="govuk-hint govuk-checkboxes__hint">
             {hint}
           </div>
         )}
diff --git a/materials_ui/src/materials_components/RedactionLog/templates/ErrorSummary.tsx b/materials_ui/src/materials_components/RedactionLog/templates/ErrorSummary.tsx
index 3dba359a..52a2c221 100644
--- a/materials_ui/src/materials_components/RedactionLog/templates/ErrorSummary.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/templates/ErrorSummary.tsx
@@ -1,18 +1,11 @@
 import { FieldErrors } from 'react-hook-form';
 import { RedactionLogFormValues } from '../RedactionLogModalBody';
 
-export const ErrorSummary = ({
-  errors
-}: {
-  errors: FieldErrors<RedactionLogFormValues>;
-}) => {
+export const ErrorSummary = ({ errors }: { errors: FieldErrors<RedactionLogFormValues> }) => {
   if (Object.keys(errors).length === 0) return null;
 
   return (
-    <div
-      className="govuk-error-summary govuk-!-margin-bottom-0"
-      data-module="govuk-error-summary"
-    >
+    <div className="govuk-error-summary govuk-!-margin-bottom-0" data-module="govuk-error-summary">
       <div role="alert">
         <h2 className="govuk-error-summary__title">There is a problem</h2>
         <div className="govuk-error-summary__body">
diff --git a/materials_ui/src/materials_components/RedactionLog/templates/Select.tsx b/materials_ui/src/materials_components/RedactionLog/templates/Select.tsx
index 20f9c800..1d5044ca 100644
--- a/materials_ui/src/materials_components/RedactionLog/templates/Select.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/templates/Select.tsx
@@ -19,11 +19,9 @@ export const SelectDropdown = ({
   options,
   value,
   onChange,
-  error
+  error,
 }: SelectDropdownProps) => (
-  <div
-    className={styles.selectWrapper + (error ? ` govuk-form-group--error` : '')}
-  >
+  <div className={styles.selectWrapper + (error ? ` govuk-form-group--error` : '')}>
     <label className="govuk-label" htmlFor={id}>
       {label}
     </label>
diff --git a/materials_ui/src/materials_components/RedactionLog/utils/getDocumentTypeValueFromMappings.ts b/materials_ui/src/materials_components/RedactionLog/utils/getDocumentTypeValueFromMappings.ts
index deda3094..9d3436a7 100644
--- a/materials_ui/src/materials_components/RedactionLog/utils/getDocumentTypeValueFromMappings.ts
+++ b/materials_ui/src/materials_components/RedactionLog/utils/getDocumentTypeValueFromMappings.ts
@@ -1,10 +1,7 @@
 export type RedactionLogMappingData = {
   businessUnits: { ou: string; areaId: string | null; unitId: string | null }[];
   documentTypes: { cmsDocTypeId: string; docTypeId: string }[];
-  investigatingAgencies: {
-    ouCode: string;
-    investigatingAgencyId: string | null;
-  }[];
+  investigatingAgencies: { ouCode: string; investigatingAgencyId: string | null }[];
 };
 
 const MANUALLY_SELECT_DOCUMENT_TYPE_IDS = new Set([-1, 1029, 1200]);
@@ -13,13 +10,12 @@ const PNC_PRINT_DOCUMENT_TYPE_ID = '34';
 
 export function getDocumentTypeValueFromMappings(
   documentTypeId: number,
-  documentTypeMappings: RedactionLogMappingData | null
+  documentTypeMappings: RedactionLogMappingData | null,
 ): string | undefined {
-  const documentIsManuallySelected =
-    MANUALLY_SELECT_DOCUMENT_TYPE_IDS.has(documentTypeId);
+  const documentIsManuallySelected = MANUALLY_SELECT_DOCUMENT_TYPE_IDS.has(documentTypeId);
 
   const currentDocumentType = documentTypeMappings?.documentTypes.find(
-    ({ cmsDocTypeId }) => cmsDocTypeId === `${documentTypeId}`
+    ({ cmsDocTypeId }) => cmsDocTypeId === `${documentTypeId}`,
   );
 
   if (documentIsManuallySelected || !currentDocumentType?.docTypeId) {
diff --git a/materials_ui/src/materials_components/RedactionLog/utils/transformFormData.ts b/materials_ui/src/materials_components/RedactionLog/utils/transformFormData.ts
index 55ff06f6..b6dfa5dd 100644
--- a/materials_ui/src/materials_components/RedactionLog/utils/transformFormData.ts
+++ b/materials_ui/src/materials_components/RedactionLog/utils/transformFormData.ts
@@ -4,29 +4,19 @@ import { TDocument } from '../../DocumentSelectAccordion/getters/getDocumentList
 import { TRedactionType } from '../../PdfRedactor/RedactionTypeSelect';
 import { RedactionLogFormInputs } from '../RedactionLogModal';
 
-const normalizeToString = (
-  value: string | number | undefined | null
-): string =>
+const normalizeToString = (value: string | number | undefined | null): string =>
   value === undefined || value === null ? '' : value.toString().trim();
 
-const findAreaAndUnit = (
-  lookups: TLookupsResponse,
-  areaId: string,
-  unitId: string
-) => {
+const findAreaAndUnit = (lookups: TLookupsResponse, areaId: string, unitId: string) => {
   const trimmedAreaId = normalizeToString(areaId);
   const trimmedUnitId = normalizeToString(unitId);
 
   for (const area of lookups.areas || []) {
     if (
       normalizeToString(area.id) === trimmedAreaId &&
-      area.children?.some(
-        (child) => normalizeToString(child.id) === trimmedUnitId
-      )
+      area.children?.some((child) => normalizeToString(child.id) === trimmedUnitId)
     ) {
-      const unit = area.children?.find(
-        (child) => normalizeToString(child.id) === trimmedUnitId
-      );
+      const unit = area.children?.find((child) => normalizeToString(child.id) === trimmedUnitId);
       return { area, unit };
     }
   }
@@ -34,12 +24,10 @@ const findAreaAndUnit = (
   for (const division of lookups.divisions || []) {
     if (
       normalizeToString(division.id) === trimmedAreaId &&
-      division.children?.some(
-        (child) => normalizeToString(child.id) === trimmedUnitId
-      )
+      division.children?.some((child) => normalizeToString(child.id) === trimmedUnitId)
     ) {
       const unit = division.children?.find(
-        (child) => normalizeToString(child.id) === trimmedUnitId
+        (child) => normalizeToString(child.id) === trimmedUnitId,
       );
       return { area: division, unit };
     }
@@ -52,15 +40,13 @@ const createOverUnderModeRedactions = (
   lookups: TLookupsResponse,
   underRedactionTypeIds: number[],
   overRedactionTypeIds: number[],
-  overReason: 'investigative-agency' | 'cps-colleague' | null
+  overReason: 'investigative-agency' | 'cps-colleague' | null,
 ): RedactionLogData['redactions'] => {
   const redactionsArray: RedactionLogData['redactions'] = [];
   const isReturnedToIA = overReason === 'investigative-agency';
 
   const findRedactionType = (typeId: number) =>
-    lookups.missedRedactions?.find(
-      (rt) => normalizeToString(rt.id) === normalizeToString(typeId)
-    );
+    lookups.missedRedactions?.find((rt) => normalizeToString(rt.id) === normalizeToString(typeId));
 
   // under redactions
   underRedactionTypeIds.forEach((typeId) => {
@@ -69,7 +55,7 @@ const createOverUnderModeRedactions = (
       redactionsArray.push({
         missedRedaction: { id: redactionType.id, name: redactionType.name },
         redactionType: 1,
-        returnedToInvestigativeAuthority: isReturnedToIA
+        returnedToInvestigativeAuthority: isReturnedToIA,
       });
     }
   });
@@ -81,7 +67,7 @@ const createOverUnderModeRedactions = (
       redactionsArray.push({
         missedRedaction: { id: redactionType.id, name: redactionType.name },
         redactionType: 2,
-        returnedToInvestigativeAuthority: isReturnedToIA
+        returnedToInvestigativeAuthority: isReturnedToIA,
       });
     }
   });
@@ -89,13 +75,11 @@ const createOverUnderModeRedactions = (
   return redactionsArray;
 };
 
-const createListModeRedactions = (
-  types: TRedactionType[]
-): RedactionLogData['redactions'] =>
+const createListModeRedactions = (types: TRedactionType[]): RedactionLogData['redactions'] =>
   types.map(({ id, name }) => ({
     missedRedaction: { id, name },
     redactionType: 1,
-    returnedToInvestigativeAuthority: false
+    returnedToInvestigativeAuthority: false,
   }));
 
 type TransformFormDataToApiFormatParams = {
@@ -113,7 +97,7 @@ export const transformFormDataToApiFormat = ({
   activeDocument,
   lookups,
   mode,
-  listModeRedactionTypes
+  listModeRedactionTypes,
 }: TransformFormDataToApiFormatParams): RedactionLogData => {
   if (!lookups) {
     throw new Error('Lookups data is required for form transformation');
@@ -122,19 +106,17 @@ export const transformFormDataToApiFormat = ({
   const { area, unit } = findAreaAndUnit(
     lookups,
     formData.areasAndDivisionsId,
-    formData.businessUnitId
+    formData.businessUnitId,
   );
 
   const investigatingAgency = lookups.investigatingAgencies?.find(
-    (ia) =>
-      normalizeToString(ia.id) ===
-      normalizeToString(formData.investigatingAgencyId)
+    (ia) => normalizeToString(ia.id) === normalizeToString(formData.investigatingAgencyId),
   );
 
   const documentType = lookups.documentTypes?.find(
     (dt) =>
       normalizeToString(dt.id) &&
-      normalizeToString(dt.id) === normalizeToString(formData.documentTypeId)
+      normalizeToString(dt.id) === normalizeToString(formData.documentTypeId),
   );
 
   const redactions =
@@ -144,7 +126,7 @@ export const transformFormDataToApiFormat = ({
           lookups,
           formData.underRedactionTypeIds,
           formData.overRedactionTypeIds,
-          formData.overReason
+          formData.overReason,
         );
 
   return {
@@ -156,28 +138,25 @@ export const transformFormDataToApiFormat = ({
           : `${formData.areasAndDivisionsId}-${formData.businessUnitId}`,
       type: 'Area',
       areaDivisionName: area?.name || '',
-      name: unit?.name || ''
+      name: unit?.name || '',
     },
     investigatingAgency: {
       id: investigatingAgency?.id || formData.investigatingAgencyId,
-      name: investigatingAgency?.name || ''
+      name: investigatingAgency?.name || '',
     },
     documentType: {
       id: documentType?.id || normalizeToString(formData.documentTypeId),
-      name: documentType?.name || ''
+      name: documentType?.name || '',
     },
     redactions,
     notes: formData.supportingNotes,
     chargeStatus: formData.chargeStatus,
     cmsValues: {
       originalFileName: activeDocument?.cmsOriginalFileName || '',
-      documentId: activeDocument?.parentId
-        ? activeDocument.parentId.replace(/^CMS-/, '')
-        : 0,
+      documentId: activeDocument?.parentId ? activeDocument.parentId.replace(/^CMS-/, '') : 0,
       documentType: activeDocument?.cmsDocType.documentType || '',
-      fileCreatedDate:
-        activeDocument?.cmsFileCreatedDate || new Date().toISOString(),
-      documentTypeId: activeDocument?.cmsDocType.documentTypeId || 0
-    }
+      fileCreatedDate: activeDocument?.cmsFileCreatedDate || new Date().toISOString(),
+      documentTypeId: activeDocument?.cmsDocType.documentTypeId || 0,
+    },
   };
 };
diff --git a/materials_ui/src/materials_components/documenViewportArea/DocumentActionsDropdown.tsx b/materials_ui/src/materials_components/documenViewportArea/DocumentActionsDropdown.tsx
index 798ab197..b734a933 100644
--- a/materials_ui/src/materials_components/documenViewportArea/DocumentActionsDropdown.tsx
+++ b/materials_ui/src/materials_components/documenViewportArea/DocumentActionsDropdown.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
   DropdownButton2,
-  DropdownListItem
+  DropdownListItem,
 } from '../../caseWorkApp/components/dropDownButton/DropdownButton';
 import { TMode } from '../PdfRedactor/utils/modeUtils';
 
@@ -9,7 +9,7 @@ const DROPDOWN_ACTIONS = {
   LOG_REDACTION: 'log-redaction',
   ROTATE: 'rotate',
   DELETE: 'delete',
-  VIEW_NEW_WINDOW: 'view-new-window'
+  VIEW_NEW_WINDOW: 'view-new-window',
 } as const;
 
 type DocumentActionsDropdownProps = {
@@ -25,7 +25,7 @@ export const DocumentActionsDropdown = ({
   onModeChange,
   onRedactionLogClick,
   onViewInNewWindowClick,
-  numOfDocumentPages
+  numOfDocumentPages,
 }: DocumentActionsDropdownProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
@@ -55,9 +55,7 @@ export const DocumentActionsDropdown = ({
             setIsDropdownOpen(false);
           }}
         >
-          {mode === 'rotation'
-            ? 'Hide rotate document pages'
-            : 'Rotate document pages'}
+          {mode === 'rotation' ? 'Hide rotate document pages' : 'Rotate document pages'}
         </DropdownListItem>
         {numOfDocumentPages > 1 && (
           <DropdownListItem
@@ -68,9 +66,7 @@ export const DocumentActionsDropdown = ({
               setIsDropdownOpen(false);
             }}
           >
-            {mode === 'deletion'
-              ? 'Hide delete page options'
-              : 'Show delete page options'}
+            {mode === 'deletion' ? 'Hide delete page options' : 'Show delete page options'}
           </DropdownListItem>
         )}
         <DropdownListItem
diff --git a/materials_ui/src/materials_components/documenViewportArea/index.module.scss b/materials_ui/src/materials_components/documenViewportArea/index.module.scss
index 41645d83..5a329442 100644
--- a/materials_ui/src/materials_components/documenViewportArea/index.module.scss
+++ b/materials_ui/src/materials_components/documenViewportArea/index.module.scss
@@ -1,5 +1,5 @@
 .content {
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   background-color: #1d70b8;
   border-bottom: 0.0625rem solid #b1b4b6;
 }
diff --git a/materials_ui/src/materials_components/documenViewportArea/index.tsx b/materials_ui/src/materials_components/documenViewportArea/index.tsx
index 8bdcfd9e..8fbadf1f 100644
--- a/materials_ui/src/materials_components/documenViewportArea/index.tsx
+++ b/materials_ui/src/materials_components/documenViewportArea/index.tsx
@@ -11,7 +11,7 @@ const linkButtonStyle: CSSProperties = {
   textDecoration: 'underline',
   fontSize: '1rem',
   color: '#ffffff',
-  fontFamily: 'inherit'
+  fontFamily: 'inherit',
 };
 
 type SearchModeProps = {
@@ -34,14 +34,14 @@ export const DocumentViewportArea = ({
   documentName,
   mode,
   onModeChange,
-  searchMode
+  searchMode,
 }: DocumentViewportAreaProps) => {
   return (
     <div
       style={{
         padding: '.5rem 1rem',
         backgroundColor: '#1d70b8',
-        borderBottom: '0.0625rem solid #b1b4b6'
+        borderBottom: '0.0625rem solid #b1b4b6',
       }}
     >
       <div
@@ -49,7 +49,7 @@ export const DocumentViewportArea = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          height: '2.5rem'
+          height: '2.5rem',
         }}
       >
         {searchMode ? (
@@ -60,7 +60,7 @@ export const DocumentViewportArea = ({
               color: '#ffffff',
               lineHeight: 1.2,
               maxWidth: '33%',
-              minWidth: 0
+              minWidth: 0,
             }}
           >
             <button
@@ -76,18 +76,15 @@ export const DocumentViewportArea = ({
                 fontWeight: 700,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                textOverflow: 'ellipsis',
               }}
             >
-              {searchMode.totalMatches}{' '}
-              {searchMode.totalMatches === 1 ? 'match' : 'matches'} for "
+              {searchMode.totalMatches} {searchMode.totalMatches === 1 ? 'match' : 'matches'} for "
               {searchMode.searchTerm}" in {documentName}
             </span>
           </div>
         ) : (
-          <span style={{ color: '#ffffff', fontWeight: 700, lineHeight: 1 }}>
-            {documentName}
-          </span>
+          <span style={{ color: '#ffffff', fontWeight: 700, lineHeight: 1 }}>{documentName}</span>
         )}
         <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           {searchMode && searchMode.totalMatches > 0 && (
@@ -96,15 +93,11 @@ export const DocumentViewportArea = ({
                 display: 'flex',
                 alignItems: 'center',
                 color: '#ffffff',
-                marginRight: '8px'
+                marginRight: '8px',
               }}
             >
               {searchMode.focusedIndex > 0 && (
-                <button
-                  type="button"
-                  onClick={searchMode.onPrev}
-                  style={linkButtonStyle}
-                >
+                <button type="button" onClick={searchMode.onPrev} style={linkButtonStyle}>
                   Previous
                 </button>
               )}
@@ -113,17 +106,13 @@ export const DocumentViewportArea = ({
                   width: '2.5rem',
                   textAlign: 'center',
                   userSelect: 'none',
-                  fontSize: '1rem'
+                  fontSize: '1rem',
                 }}
               >
                 {searchMode.focusedIndex + 1}/{searchMode.totalMatches}
               </span>
               {searchMode.focusedIndex < searchMode.totalMatches - 1 && (
-                <button
-                  type="button"
-                  onClick={searchMode.onNext}
-                  style={linkButtonStyle}
-                >
+                <button type="button" onClick={searchMode.onNext} style={linkButtonStyle}>
                   Next
                 </button>
               )}
@@ -133,14 +122,10 @@ export const DocumentViewportArea = ({
             type="button"
             id="btn-toggle-redaction"
             aria-pressed={isRedactionEnabledMode(mode)}
-            onClick={() =>
-              onModeChange(isRedactionEnabledMode(mode) ? 'disabled' : 'redact')
-            }
+            onClick={() => onModeChange(isRedactionEnabledMode(mode) ? 'disabled' : 'redact')}
             style={linkButtonStyle}
           >
-            {isRedactionEnabledMode(mode)
-              ? 'Stop redacting'
-              : 'Start redacting'}
+            {isRedactionEnabledMode(mode) ? 'Stop redacting' : 'Start redacting'}
           </button>
         </div>
       </div>
diff --git a/materials_ui/src/mocks/handlers.ts b/materials_ui/src/mocks/handlers.ts
index 7b5673be..b200e993 100644
--- a/materials_ui/src/mocks/handlers.ts
+++ b/materials_ui/src/mocks/handlers.ts
@@ -3,21 +3,15 @@ import { API_ENDPOINTS, POLARIS_GATEWAY_URL } from '../constants/url';
 
 export const handlers = [
   http.get(API_ENDPOINTS.CASE_MATERIALS, () => {
-    return HttpResponse.json(
-      { message: 'Unprocessable Entity' },
-      { status: 422 }
-    );
+    return HttpResponse.json({ message: 'Unprocessable Entity' }, { status: 422 });
   }),
 
   http.post(`${POLARIS_GATEWAY_URL}/api/hk-logger`, async ({ request }) => {
-    const body = (await request.json()) as {
-      logLevel: number;
-      message: string;
-    };
+    const body = (await request.json()) as { logLevel: number; message: string };
 
     console.log('HK Logger mocked');
     console.table(body);
 
     return HttpResponse.json({}, { status: 200 });
-  })
+  }),
 ];
diff --git a/materials_ui/src/msalInstance.ts b/materials_ui/src/msalInstance.ts
index 0d91efc4..eb96e38a 100644
--- a/materials_ui/src/msalInstance.ts
+++ b/materials_ui/src/msalInstance.ts
@@ -3,15 +3,15 @@ import {
   MSAL_CLIENT_ID,
   MSAL_REDIRECT_URI,
   MSAL_TENANT_ID,
-  POLARIS_GATEWAY_SCOPE
+  POLARIS_GATEWAY_SCOPE,
 } from './constants/url';
 
 export const msalConfig: Configuration = {
   auth: {
     clientId: MSAL_CLIENT_ID,
     authority: `https://login.microsoftonline.com/${MSAL_TENANT_ID}`,
-    redirectUri: MSAL_REDIRECT_URI
-  }
+    redirectUri: MSAL_REDIRECT_URI,
+  },
 };
 
 export const loginRequest = { scopes: [POLARIS_GATEWAY_SCOPE] };
diff --git a/materials_ui/src/pages/CaseSearch.tsx b/materials_ui/src/pages/CaseSearch.tsx
index 39ca2b6a..9fab0a9e 100644
--- a/materials_ui/src/pages/CaseSearch.tsx
+++ b/materials_ui/src/pages/CaseSearch.tsx
@@ -7,12 +7,12 @@ import {
   Layout,
   LoadingSpinner,
   SectionBreak,
-  StatusTag
+  StatusTag,
 } from '../components';
+import { FilterContext, FiltersContext } from '../context/FiltersContext';
 import { useCaseInfoStore } from '../hooks';
 import { useCaseDetails } from '../hooks/search/useCaseSearch';
 import { formatDateLong } from '../utils/date';
-import { FilterContext, FiltersContext } from '../context/FiltersContext';
 
 type IFormInput = { urn: string };
 
@@ -23,7 +23,7 @@ export const CaseSearchPage = () => {
     register,
     handleSubmit,
     formState: { errors },
-    setFocus
+    setFocus,
   } = useForm<IFormInput>();
   const { clearCaseInfo } = useCaseInfoStore();
   const [queryUrn, setQueryUrn] = useState('');
@@ -55,30 +55,22 @@ export const CaseSearchPage = () => {
               />
             )}
 
-            <h1 className="govuk-heading-l govuk-!-margin-bottom-0">
-              Find a case
-            </h1>
+            <h1 className="govuk-heading-l govuk-!-margin-bottom-0">Find a case</h1>
             <p className="govuk-body govuk-hint govuk-!-margin-bottom-9">
               Search and review a CPS case in England and Wales
             </p>
 
             <form onSubmit={handleSubmit(onSubmit)}>
-              <div
-                className={`govuk-form-group${errors.urn ? ' govuk-form-group--error' : ''}`}
-              >
+              <div className={`govuk-form-group${errors.urn ? ' govuk-form-group--error' : ''}`}>
                 <h1 className="govuk-label-wrapper">
-                  <label
-                    className="govuk-label govuk-label--s"
-                    htmlFor="case-urn"
-                  >
+                  <label className="govuk-label govuk-label--s" htmlFor="case-urn">
                     Search for a case URN
                   </label>
                 </h1>
 
                 {errors.urn && (
                   <p id="case-urn-error" className="govuk-error-message">
-                    <span className="govuk-visually-hidden">Error:</span>{' '}
-                    {errors.urn.message}
+                    <span className="govuk-visually-hidden">Error:</span> {errors.urn.message}
                   </p>
                 )}
 
@@ -91,11 +83,7 @@ export const CaseSearchPage = () => {
               </div>
 
               <div className="govuk-button-group">
-                <button
-                  className="govuk-button"
-                  data-module="govuk-button"
-                  type="submit"
-                >
+                <button className="govuk-button" data-module="govuk-button" type="submit">
                   Search
                 </button>
               </div>
@@ -103,10 +91,7 @@ export const CaseSearchPage = () => {
           </div>
         </div>
 
-        <LoadingSpinner
-          isLoading={caseDetails.isLoading}
-          textContent="Searching for a case..."
-        />
+        <LoadingSpinner isLoading={caseDetails.isLoading} textContent="Searching for a case..." />
         {(() => {
           if (caseDetails.isLoading) return null;
 
@@ -116,12 +101,8 @@ export const CaseSearchPage = () => {
           if (caseDetails.error?.status === 403)
             return (
               <div className="govuk-body">
-                <div className="govuk-heading-m">
-                  You do not have access to this case
-                </div>
-                <p>
-                  This case is assigned to a unit you do not have access to.
-                </p>
+                <div className="govuk-heading-m">You do not have access to this case</div>
+                <p>This case is assigned to a unit you do not have access to.</p>
                 <a className="govuk-link" onClick={() => setFocus('urn')}>
                   Search for another case
                 </a>
@@ -148,8 +129,7 @@ export const CaseSearchPage = () => {
             <div className="govuk-grid-row govuk-grid-row--case-search">
               <div className="govuk-grid-column-two-thirds">
                 <p className="govuk-body">
-                  We've found <b>{caseDetailsData.length}</b> case that matches{' '}
-                  <b>{queryUrn}</b>
+                  We've found <b>{caseDetailsData.length}</b> case that matches <b>{queryUrn}</b>
                 </p>
 
                 {caseDetailsData.map((caseItem) => {
@@ -157,23 +137,15 @@ export const CaseSearchPage = () => {
 
                   const defendantFullName = lead
                     ? `${lead.surname}, ${lead.firstNames}${
-                        (caseItem.defendants?.length ?? 0) > 1
-                          ? ' and others'
-                          : ''
+                        (caseItem.defendants?.length ?? 0) > 1 ? ' and others' : ''
                       }`
                     : '';
 
-                  const dateOfBirth = lead
-                    ? `Date of birth: ${formatDateLong(lead.dob)}`
-                    : '';
+                  const dateOfBirth = lead ? `Date of birth: ${formatDateLong(lead.dob)}` : '';
 
-                  const nextHearingDate = formatDateLong(
-                    caseItem.headlineCharge?.nextHearingDate
-                  );
+                  const nextHearingDate = formatDateLong(caseItem.headlineCharge?.nextHearingDate);
 
-                  const dateOfOffence = formatDateLong(
-                    caseItem.headlineCharge?.date
-                  );
+                  const dateOfOffence = formatDateLong(caseItem.headlineCharge?.date);
 
                   return (
                     <div key={caseItem.id}>
@@ -207,22 +179,16 @@ export const CaseSearchPage = () => {
                               items={[
                                 {
                                   title: 'Status: ',
-                                  description: [<StatusTag status="Charged" />]
-                                },
-                                {
-                                  title: 'Court hearing: ',
-                                  description: [`${nextHearingDate}`]
-                                },
-                                {
-                                  title: 'Date of offence: ',
-                                  description: [`${dateOfOffence}`]
+                                  description: [<StatusTag status="Charged" />],
                                 },
+                                { title: 'Court hearing: ', description: [`${nextHearingDate}`] },
+                                { title: 'Date of offence: ', description: [`${dateOfOffence}`] },
                                 {
                                   title: 'Charges: ',
                                   description: [
-                                    `${caseItem.defendants[0]?.charges[0]?.shortDescription}`
-                                  ]
-                                }
+                                    `${caseItem.defendants[0]?.charges[0]?.shortDescription}`,
+                                  ],
+                                },
                               ]}
                             />
                           </>
@@ -232,17 +198,14 @@ export const CaseSearchPage = () => {
                             items={[
                               {
                                 title: 'Status: ',
-                                description: [
-                                  <StatusTag status="Not yet charged" />
-                                ]
+                                description: [<StatusTag status="Not yet charged" />],
                               },
                               {
                                 title: 'Proposed: ',
                                 description: [
-                                  !caseItem.defendants[0]?.proposedCharges
-                                    .length && 'N/A'
-                                ]
-                              }
+                                  !caseItem.defendants[0]?.proposedCharges.length && 'N/A',
+                                ],
+                              },
                             ]}
                           />
                         )}
diff --git a/materials_ui/src/pages/Communications.tsx b/materials_ui/src/pages/Communications.tsx
index 185c65ed..1993988b 100644
--- a/materials_ui/src/pages/Communications.tsx
+++ b/materials_ui/src/pages/Communications.tsx
@@ -8,7 +8,7 @@ import {
   LoadingSpinner,
   RenameDrawer,
   TableActions,
-  TwoCol
+  TwoCol,
 } from '../components';
 
 import {
@@ -16,30 +16,25 @@ import {
   useBanner,
   useCaseMaterial,
   useCaseMaterials,
-  useTableActions
+  useTableActions,
 } from '../hooks';
 import { navigateToViewDocumentPageInNewTab } from '../hooks/ui/navigateToViewDocumentPageInNewTab';
 import { CaseMaterialsType } from '../schemas';
-import {
-  useCaseInfoStore,
-  useMaterialTags,
-  useSelectedItemsStore
-} from '../stores';
+import { useCaseInfoStore, useMaterialTags, useSelectedItemsStore } from '../stores';
 import { trackAction } from '../telemetry/appInsights';
 
 export const CommunicationsPage = () => {
-  const [selectedMaterial, setSelectedMaterial] =
-    useState<CaseMaterialsType | null>(null);
+  const [selectedMaterial, setSelectedMaterial] = useState<CaseMaterialsType | null>(null);
   const { setBanner, resetBanner } = useBanner();
-  const { loading: caseMaterialsLoading, mutate: refreshCommunications } =
-    useCaseMaterials({ dataType: 'communications' });
+  const { loading: caseMaterialsLoading, mutate: refreshCommunications } = useCaseMaterials({
+    dataType: 'communications',
+  });
   const { deselectMaterial } = useCaseMaterial();
   const { getRoute } = useAppRoute();
   const { setTags } = useMaterialTags();
 
   const [showFilter, setShowFilter] = useState(true);
-  const { items: selectedItems, clear: clearSelectedItems } =
-    useSelectedItemsStore();
+  const { items: selectedItems, clear: clearSelectedItems } = useSelectedItemsStore();
   const { caseInfo } = useCaseInfoStore();
 
   const {
@@ -50,13 +45,13 @@ export const CommunicationsPage = () => {
     handleReadStatusClick,
     handleUnusedClick,
     determineReadStatusLabel,
-    isReadStatusUpdating
+    isReadStatusUpdating,
   } = useTableActions({
     selectedItems: selectedItems.communications,
     refreshData: refreshCommunications,
     setBanner,
     deselectItem: deselectMaterial,
-    resetBanner
+    resetBanner,
   });
 
   const handleRenameClick = () => {
@@ -71,9 +66,7 @@ export const CommunicationsPage = () => {
   };
 
   const handleSuccessfulRename = async () => {
-    setTags([
-      { materialId: selectedMaterial?.materialId as number, tagName: 'Renamed' }
-    ]);
+    setTags([{ materialId: selectedMaterial?.materialId as number, tagName: 'Renamed' }]);
 
     setSelectedMaterial(null);
     deselectMaterial();
@@ -82,7 +75,7 @@ export const CommunicationsPage = () => {
     setBanner({
       type: 'success',
       header: 'Renaming successful',
-      content: 'Material successfully renamed.'
+      content: 'Material successfully renamed.',
     });
 
     await refreshCommunications();
@@ -98,7 +91,7 @@ export const CommunicationsPage = () => {
 
     trackAction('OpenedInNewWindow', {
       materialId: row?.materialId?.toString(),
-      category: row?.category
+      category: row?.category,
     });
     navigateToViewDocumentPageInNewTab({ urn, caseId, materialId });
   };
@@ -111,21 +104,17 @@ export const CommunicationsPage = () => {
         const rowDocId = row?.documentTypeId;
         if (!rowDocId) return false;
 
-        return (
-          [1031, 1059].includes(rowDocId) ||
-          selectedItems.communications.length > 1
-        );
-      })()
+        return [1031, 1059].includes(rowDocId) || selectedItems.communications.length > 1;
+      })(),
     },
     {
       label: 'Reclassify',
       onClick: handleReclassifyClick,
-      hide: !row?.isReclassifiable || selectedItems.communications.length > 1
+      hide: !row?.isReclassifiable || selectedItems.communications.length > 1,
     },
     {
       label: 'Update',
-      onClick: () =>
-        handleEditClick(row as CaseMaterialsType, getRoute('COMMUNICATIONS')),
+      onClick: () => handleEditClick(row as CaseMaterialsType, getRoute('COMMUNICATIONS')),
       hide: (() => {
         const itemCommsCategory = selectedItems.communications[0]?.category;
         if (!itemCommsCategory) return;
@@ -133,37 +122,33 @@ export const CommunicationsPage = () => {
           selectedItems.communications.length > 1 ||
           !['Exhibit', 'Statement'].includes(itemCommsCategory)
         );
-      })()
+      })(),
     },
     {
       label: 'Redact',
       onClick: () => {
         if (row?.materialId) return handleRedactClick(row.materialId);
       },
-      hide: selectedItems.communications.length > 1
+      hide: selectedItems.communications.length > 1,
     },
     {
       label: 'Discard',
       onClick: () => handleDiscardClick(getRoute('COMMUNICATIONS')),
-      hide: selectedItems.communications.length > 1
+      hide: selectedItems.communications.length > 1,
     },
     {
       label: determineReadStatusLabel(selectedItems.communications),
-      onClick: () => handleReadStatusClick(selectedItems.communications)
+      onClick: () => handleReadStatusClick(selectedItems.communications),
     },
     {
       label: 'Mark as unused',
-      onClick: () =>
-        handleUnusedClick(
-          selectedItems.communications,
-          getRoute('COMMUNICATIONS')
-        )
+      onClick: () => handleUnusedClick(selectedItems.communications, getRoute('COMMUNICATIONS')),
     },
     {
       label: 'View in new window',
       onClick: handleViewInNewWindowClick,
-      hide: selectedItems.communications?.length !== 1
-    }
+      hide: selectedItems.communications?.length !== 1,
+    },
   ];
 
   useEffect(() => {
diff --git a/materials_ui/src/pages/DiscardMaterial.tsx b/materials_ui/src/pages/DiscardMaterial.tsx
index 18a6bce4..7c0674ae 100644
--- a/materials_ui/src/pages/DiscardMaterial.tsx
+++ b/materials_ui/src/pages/DiscardMaterial.tsx
@@ -14,9 +14,7 @@ export const DiscardMaterialPage = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
   const { setBanner } = useBanner();
-  const { mutate: refreshCaseMaterials } = useCaseMaterials({
-    dataType: 'materials'
-  });
+  const { mutate: refreshCaseMaterials } = useCaseMaterials({ dataType: 'materials' });
 
   const material = state?.selectedMaterial;
 
@@ -27,7 +25,7 @@ export const DiscardMaterialPage = () => {
     onSuccess: async () => {
       trackAction('Discarded', {
         materialId: material?.materialId?.toString(),
-        category: material?.category
+        category: material?.category,
       });
       setError('');
 
@@ -38,7 +36,7 @@ export const DiscardMaterialPage = () => {
       setBanner({
         type: 'success',
         header: 'Discard successful',
-        content: `${material?.subject} has been discarded.`
+        content: `${material?.subject} has been discarded.`,
       });
     },
     onError: async () => {
@@ -46,14 +44,10 @@ export const DiscardMaterialPage = () => {
 
       errorMessage = `Unable to discard ${material?.subject}. Please try again.`;
       setError(errorMessage);
-      setBanner({
-        type: 'error',
-        header: 'Discard unsuccessful',
-        content: errorMessage
-      });
+      setBanner({ type: 'error', header: 'Discard unsuccessful', content: errorMessage });
 
       navigate(returnTo, { state: { persistBanner: true } });
-    }
+    },
   });
 
   useEffect(() => {
@@ -75,7 +69,7 @@ export const DiscardMaterialPage = () => {
       await trigger({
         materialId: material?.materialId,
         discardReason: reason.value as string,
-        discardReasonDescription: reason.label
+        discardReasonDescription: reason.label,
       });
     }
   };
@@ -98,8 +92,7 @@ export const DiscardMaterialPage = () => {
 
           <div className="govuk-main-wrapper">
             <h2 className="govuk-caption-l hmrc-caption-l">
-              <span className="govuk-visually-hidden">This section is</span>{' '}
-              Discard material
+              <span className="govuk-visually-hidden">This section is</span> Discard material
             </h2>
             <h1 className="govuk-heading-l">Reason for discarding material</h1>
 
@@ -111,7 +104,7 @@ export const DiscardMaterialPage = () => {
                 onChange={handleRadioChange}
                 options={DISCARD_MATERIAL_OPTIONS.map((option) => ({
                   ...option,
-                  id: option.value
+                  id: option.value,
                 }))}
                 value={reason?.value as string}
                 required
diff --git a/materials_ui/src/pages/EditMaterial.tsx b/materials_ui/src/pages/EditMaterial.tsx
index 177e241c..264bd6ff 100644
--- a/materials_ui/src/pages/EditMaterial.tsx
+++ b/materials_ui/src/pages/EditMaterial.tsx
@@ -7,17 +7,9 @@ import { EditExhibitForm } from '../components/forms/EditMaterial/EditExhibit';
 import { EditStatementForm } from '../components/forms/EditMaterial/EditStatement';
 import { Summary } from '../components/forms/EditMaterial/Summary';
 import type { ContentItem } from '../components/SummaryCard/SummaryCard';
-import {
-  useAppRoute,
-  useBanner,
-  useCaseWitnesses,
-  useEditMaterial
-} from '../hooks';
+import { useAppRoute, useBanner, useCaseWitnesses, useEditMaterial } from '../hooks';
 import type { CaseMaterialsType } from '../schemas';
-import {
-  EditExhibitType,
-  EditStatementType
-} from '../schemas/forms/editStatement';
+import { EditExhibitType, EditStatementType } from '../schemas/forms/editStatement';
 import { useMaterialTags } from '../stores';
 import { trackAction } from '../telemetry/appInsights';
 
@@ -30,39 +22,23 @@ export const EditMaterialPage = () => {
   const { setBanner } = useBanner();
   const navigate = useNavigate();
   const [formStep, setFormStep] = useState<FormStep>('form');
-  const [formData, setFormData] = useState<
-    EditStatementType | EditExhibitType | null
-  >(null);
+  const [formData, setFormData] = useState<EditStatementType | EditExhibitType | null>(null);
   const { getWitnessById, formatWitnessName } = useCaseWitnesses();
   const location = useLocation();
-  const { returnTo, row } = (location?.state ||
-    {}) as EditMaterialLocationState;
+  const { returnTo, row } = (location?.state || {}) as EditMaterialLocationState;
   const type = row?.category === 'Statement' ? 'Statement' : 'Exhibit';
 
   const { updateExhibit, updateStatement } = useEditMaterial({
     onError: () => {
-      setBanner({
-        type: 'error',
-        header: 'Unable to update material selected.'
-      });
+      setBanner({ type: 'error', header: 'Unable to update material selected.' });
     },
     onSuccess: (response) => {
-      trackAction('Updated', {
-        materialId: row?.materialId?.toString(),
-        category: row?.category
-      });
+      trackAction('Updated', { materialId: row?.materialId?.toString(), category: row?.category });
       setTags([{ materialId: response?.materialId, tagName: 'Updated' }]);
-      setBanner(
-        {
-          type: 'success',
-          header: 'Success',
-          content: `Material has been updated`
-        },
-        true
-      );
+      setBanner({ type: 'success', header: 'Success', content: `Material has been updated` }, true);
 
       navigate(returnTo, { state: { persistBanner: true } });
-    }
+    },
   });
 
   const returnUrlPath = returnTo || getRoute('MATERIALS');
@@ -91,77 +67,59 @@ export const EditMaterialPage = () => {
     }
   };
 
-  const summaryCardData: { data: ContentItem[]; title: string } =
-    useMemo(() => {
-      if (type === 'Statement') {
-        const statementData = formData as EditStatementType;
-
-        const witness = getWitnessById(statementData?.witnessId);
-
-        // statement data
-        return {
-          data: [
-            { key: 'Who is the witness?', value: formatWitnessName(witness) },
-            {
-              key: 'Does the statement have a date?',
-              value: statementData?.hasStatementDate ? 'Yes' : 'No'
-            },
-            ...(statementData?.hasStatementDate
-              ? [
-                  {
-                    key: 'What is the statement date?',
-                    value: dayjs(statementData?.statementDate).format(
-                      'D MMM YYYY'
-                    )
-                  }
-                ]
-              : []),
-            {
-              key: 'What is the statement number?',
-              value: statementData?.statementNumber
-            },
-            {
-              key: 'What is the material status?',
-              value: statementData?.used ? 'Used' : 'Unused'
-            }
-          ],
-          title: `Statement ${row?.type} details`
-        };
-      }
-
-      const exhibitData = formData as EditExhibitType;
-
-      // exhibit data
+  const summaryCardData: { data: ContentItem[]; title: string } = useMemo(() => {
+    if (type === 'Statement') {
+      const statementData = formData as EditStatementType;
+
+      const witness = getWitnessById(statementData?.witnessId);
+
+      // statement data
       return {
         data: [
+          { key: 'Who is the witness?', value: formatWitnessName(witness) },
           {
-            key: 'What is the exhibit reference number?',
-            value: exhibitData?.reference
+            key: 'Does the statement have a date?',
+            value: statementData?.hasStatementDate ? 'Yes' : 'No',
           },
-          { key: 'What is the exhibit item?', value: exhibitData?.item },
-          { key: 'What is the exhibit name?', value: exhibitData?.subject },
-
-          ...(exhibitData?.existingproducerOrWitnessId ||
-          exhibitData?.producedBy
+          ...(statementData?.hasStatementDate
             ? [
                 {
-                  key: 'Exhibit producer or witness',
-                  value: exhibitData?.existingproducerOrWitnessId
-                    ? formatWitnessName(
-                        getWitnessById(exhibitData?.existingproducerOrWitnessId)
-                      )
-                    : exhibitData?.producedBy
-                }
+                  key: 'What is the statement date?',
+                  value: dayjs(statementData?.statementDate).format('D MMM YYYY'),
+                },
               ]
             : []),
-          {
-            key: 'What is the material status?',
-            value: exhibitData?.used ? 'Used' : 'Unused'
-          }
+          { key: 'What is the statement number?', value: statementData?.statementNumber },
+          { key: 'What is the material status?', value: statementData?.used ? 'Used' : 'Unused' },
         ],
-        title: row?.type
+        title: `Statement ${row?.type} details`,
       };
-    }, [formData, row]);
+    }
+
+    const exhibitData = formData as EditExhibitType;
+
+    // exhibit data
+    return {
+      data: [
+        { key: 'What is the exhibit reference number?', value: exhibitData?.reference },
+        { key: 'What is the exhibit item?', value: exhibitData?.item },
+        { key: 'What is the exhibit name?', value: exhibitData?.subject },
+
+        ...(exhibitData?.existingproducerOrWitnessId || exhibitData?.producedBy
+          ? [
+              {
+                key: 'Exhibit producer or witness',
+                value: exhibitData?.existingproducerOrWitnessId
+                  ? formatWitnessName(getWitnessById(exhibitData?.existingproducerOrWitnessId))
+                  : exhibitData?.producedBy,
+              },
+            ]
+          : []),
+        { key: 'What is the material status?', value: exhibitData?.used ? 'Used' : 'Unused' },
+      ],
+      title: row?.type,
+    };
+  }, [formData, row]);
 
   const renderBackLink = () => {
     if (formStep === 'summary') {
@@ -227,9 +185,7 @@ export const EditMaterialPage = () => {
               />
             )}
           </div>
-          <div className="govuk-grid-column-one-half">
-            {row && <DocumentPreview row={row} />}
-          </div>
+          <div className="govuk-grid-column-one-half">{row && <DocumentPreview row={row} />}</div>
         </div>
       </div>
     </>
diff --git a/materials_ui/src/pages/Materials.tsx b/materials_ui/src/pages/Materials.tsx
index 14c2c1e2..dbeb0f65 100644
--- a/materials_ui/src/pages/Materials.tsx
+++ b/materials_ui/src/pages/Materials.tsx
@@ -8,7 +8,7 @@ import {
   MaterialsFilters,
   RenameDrawer,
   TableActions,
-  TwoCol
+  TwoCol,
 } from '../components';
 
 import {
@@ -16,13 +16,9 @@ import {
   useBanner,
   useCaseMaterial,
   useCaseMaterials,
-  useTableActions
+  useTableActions,
 } from '../hooks';
-import {
-  useCaseInfoStore,
-  useMaterialTags,
-  useSelectedItemsStore
-} from '../stores';
+import { useCaseInfoStore, useMaterialTags, useSelectedItemsStore } from '../stores';
 
 import { useNavigate } from 'react-router-dom';
 import { URL } from '../constants/url';
@@ -34,17 +30,16 @@ export const MaterialsPage = () => {
   const { getRoute } = useAppRoute();
   const navigate = useNavigate();
   const [showFilter, setShowFilter] = useState(true);
-  const [selectedMaterial, setSelectedMaterial] =
-    useState<CaseMaterialsType | null>(null);
+  const [selectedMaterial, setSelectedMaterial] = useState<CaseMaterialsType | null>(null);
   const { caseInfo } = useCaseInfoStore();
 
-  const { mutate: refreshCaseMaterials, loading: caseMaterialsLoading } =
-    useCaseMaterials({ dataType: 'materials' });
+  const { mutate: refreshCaseMaterials, loading: caseMaterialsLoading } = useCaseMaterials({
+    dataType: 'materials',
+  });
   const { setBanner, resetBanner } = useBanner();
   const { deselectMaterial } = useCaseMaterial();
 
-  const { items: selectedItems, clear: clearSelectedItems } =
-    useSelectedItemsStore();
+  const { items: selectedItems, clear: clearSelectedItems } = useSelectedItemsStore();
   const { setTags } = useMaterialTags();
 
   const {
@@ -54,13 +49,13 @@ export const MaterialsPage = () => {
     handleUnusedClick,
     determineReadStatusLabel,
     handleEditClick,
-    isReadStatusUpdating
+    isReadStatusUpdating,
   } = useTableActions({
     selectedItems: selectedItems.materials,
     refreshData: refreshCaseMaterials,
     setBanner,
     deselectItem: deselectMaterial,
-    resetBanner
+    resetBanner,
   });
 
   const handleRenameClick = () => {
@@ -71,10 +66,7 @@ export const MaterialsPage = () => {
 
   const handleDiscardClick = () => {
     navigate(getRoute('DISCARD'), {
-      state: {
-        selectedMaterial: selectedItems.materials[0],
-        returnTo: getRoute('MATERIALS')
-      }
+      state: { selectedMaterial: selectedItems.materials[0], returnTo: getRoute('MATERIALS') },
     });
   };
 
@@ -84,9 +76,7 @@ export const MaterialsPage = () => {
   };
 
   const handleSuccessfulRename = async () => {
-    setTags([
-      { materialId: selectedMaterial?.materialId as number, tagName: 'Renamed' }
-    ]);
+    setTags([{ materialId: selectedMaterial?.materialId as number, tagName: 'Renamed' }]);
 
     setSelectedMaterial(null);
     deselectMaterial();
@@ -95,7 +85,7 @@ export const MaterialsPage = () => {
     setBanner({
       type: 'success',
       header: 'Renaming successful',
-      content: 'Material successfully renamed.'
+      content: 'Material successfully renamed.',
     });
 
     await refreshCaseMaterials();
@@ -113,7 +103,7 @@ export const MaterialsPage = () => {
       if (!urn || !caseId) return;
       trackAction('OpenedInNewWindow', {
         materialId: materialId.toString(),
-        category: item.category
+        category: item.category,
       });
       navigateToViewDocumentPageInNewTab({ urn, caseId, materialId });
     }
@@ -127,21 +117,17 @@ export const MaterialsPage = () => {
         const rowDocId = row?.documentTypeId;
         if (!rowDocId) return false;
 
-        return (
-          [1031, 1059].includes(rowDocId) ||
-          selectedItems.communications.length > 1
-        );
-      })()
+        return [1031, 1059].includes(rowDocId) || selectedItems.communications.length > 1;
+      })(),
     },
     {
       label: 'Reclassify',
       onClick: handleReclassifyClick,
-      hide: selectedItems.materials?.length > 1 || !row?.isReclassifiable
+      hide: selectedItems.materials?.length > 1 || !row?.isReclassifiable,
     },
     {
       label: 'Update',
-      onClick: () =>
-        handleEditClick(row as CaseMaterialsType, getRoute('MATERIALS')),
+      onClick: () => handleEditClick(row as CaseMaterialsType, getRoute('MATERIALS')),
       hide: (() => {
         const itemMaterialsCategory = selectedItems.materials[0]?.category;
         if (!itemMaterialsCategory) return;
@@ -149,31 +135,31 @@ export const MaterialsPage = () => {
           selectedItems.materials.length > 1 ||
           !['Exhibit', 'Statement'].includes(itemMaterialsCategory)
         );
-      })()
+      })(),
     },
     {
       label: 'Redact',
       onClick: () => {
         if (row?.materialId) return handleRedactClick(row.materialId);
       },
-      hide: selectedItems.materials?.length > 1
+      hide: selectedItems.materials?.length > 1,
     },
     {
       label: 'Discard',
       onClick: handleDiscardClick,
       disabled: selectedItems.materials?.length > 1,
-      hide: selectedItems.materials?.length > 1
+      hide: selectedItems.materials?.length > 1,
     },
     {
       label: determineReadStatusLabel(selectedItems.materials),
-      onClick: () => handleReadStatusClick(selectedItems.materials)
+      onClick: () => handleReadStatusClick(selectedItems.materials),
     },
     {
       label: 'Mark as unused',
       onClick: () => handleUnusedClick(selectedItems.materials, URL.MATERIALS),
-      hide: selectedItems.materials?.some((item) => item.status === 'Unused')
+      hide: selectedItems.materials?.some((item) => item.status === 'Unused'),
     },
-    { label: 'View in new window', onClick: handleViewInNewWindowClick }
+    { label: 'View in new window', onClick: handleViewInNewWindowClick },
   ];
 
   return (
diff --git a/materials_ui/src/pages/NotAuthorisedPage.tsx b/materials_ui/src/pages/NotAuthorisedPage.tsx
index 1527fa74..7fe4829b 100644
--- a/materials_ui/src/pages/NotAuthorisedPage.tsx
+++ b/materials_ui/src/pages/NotAuthorisedPage.tsx
@@ -16,21 +16,14 @@ export const NotAuthorisedPage = () => {
             rel="noopener noreferrer"
           >
             CMS (opens in new tab)
-            <img
-              src={NewWindowIcon}
-              alt="Open in new window"
-              className="new-window-icon"
-            />
+            <img src={NewWindowIcon} alt="Open in new window" className="new-window-icon" />
           </a>
         </p>
         <p className="govuk-body">
-          To return to the case reopen in 'Casework App' and go to 'Bulk UM
-          Classification'.
+          To return to the case reopen in 'Casework App' and go to 'Bulk UM Classification'.
         </p>
 
-        <div className="govuk-inset-text">
-          CMS_AUTH_ERROR: Unable to connect to CMS.
-        </div>
+        <div className="govuk-inset-text">CMS_AUTH_ERROR: Unable to connect to CMS.</div>
       </>
     </Layout>
   );
diff --git a/materials_ui/src/pages/PcdRequest.tsx b/materials_ui/src/pages/PcdRequest.tsx
index a9ffb56c..e7496f53 100644
--- a/materials_ui/src/pages/PcdRequest.tsx
+++ b/materials_ui/src/pages/PcdRequest.tsx
@@ -10,7 +10,7 @@ import {
   NavList,
   NavListItem,
   SectionBreak,
-  TwoCol
+  TwoCol,
 } from '../components';
 import { useAppRoute, usePCD, usePCDList } from '../hooks';
 import { formatDate } from '../utils/date';
@@ -30,16 +30,13 @@ export const PcdRequestPage = () => {
     pcdId: (() => {
       if (pcdId) return pcdId;
       if (pcdListData?.[0]) return pcdListData[0].id;
-    })()
+    })(),
   });
 
-  const navLinks: NavListItem[] | undefined = pcdListData?.map(
-    (pcd, index) => ({
-      href: `${getRoute('PCD_REQUEST', false)}/${pcd.id}`,
-      name:
-        index === 0 ? 'Latest PCD request' : formatDate(pcd.decisionRequested)
-    })
-  );
+  const navLinks: NavListItem[] | undefined = pcdListData?.map((pcd, index) => ({
+    href: `${getRoute('PCD_REQUEST', false)}/${pcd.id}`,
+    name: index === 0 ? 'Latest PCD request' : formatDate(pcd.decisionRequested),
+  }));
 
   const renderSidebar = () => {
     return (
@@ -55,19 +52,14 @@ export const PcdRequestPage = () => {
     );
   };
 
-  const formatFullName = (
-    surname: string,
-    firstNames?: string | null
-  ): string => {
+  const formatFullName = (surname: string, firstNames?: string | null): string => {
     if (firstNames) return `${surname} ${firstNames}`;
 
     return surname;
   };
 
   const isLatestPcd =
-    pcdDetailsData &&
-    pcdListData?.length &&
-    pcdDetailsData?.id === pcdListData[0]?.id;
+    pcdDetailsData && pcdListData?.length && pcdDetailsData?.id === pcdListData[0]?.id;
 
   const suspectsAndCharges = useMemo(
     () =>
@@ -75,21 +67,19 @@ export const PcdRequestPage = () => {
         return proposedCharges.flatMap((charge, index) => ({
           ...charge,
           suspect: index === 0 ? suspect : undefined,
-          numberOfCharges: proposedCharges.length
+          numberOfCharges: proposedCharges.length,
         }));
       }),
-    [pcdDetailsData]
+    [pcdDetailsData],
   );
 
   return (
     <Layout title="PCD Request">
       {/* converting '\n' to actual line breaks with CSS*/}
       <div className="govuk-main-wrapper" style={{ whiteSpace: 'pre-wrap' }}>
-        <LoadingSpinner
-          isLoading={isPcdDetailsLoading || isPcdListLoading}
-        />
-        {!(isPcdDetailsLoading || isPcdListLoading) && (
-          navLinks?.length === 0 ? (
+        <LoadingSpinner isLoading={isPcdDetailsLoading || isPcdListLoading} />
+        {!(isPcdDetailsLoading || isPcdListLoading) &&
+          (navLinks?.length === 0 ? (
             <p className="govuk-body" tabIndex={-1} ref={(el) => el?.focus()}>
               There are no PCD Requests to show.
             </p>
@@ -106,16 +96,12 @@ export const PcdRequestPage = () => {
                     items={[
                       {
                         title: 'Decision required by:',
-                        description: [
-                          formatDate(pcdDetailsData?.decisionRequiredBy)
-                        ]
+                        description: [formatDate(pcdDetailsData?.decisionRequiredBy)],
                       },
                       {
                         title: 'Decision requested:',
-                        description: [
-                          formatDate(pcdDetailsData?.decisionRequested)
-                        ]
-                      }
+                        description: [formatDate(pcdDetailsData?.decisionRequested)],
+                      },
                     ]}
                   />
 
@@ -147,7 +133,7 @@ export const PcdRequestPage = () => {
                               <td className="govuk-table__cell">{name}</td>
                               <td className="govuk-table__cell">{number}</td>
                             </tr>
-                          )
+                          ),
                         )}
                       </tbody>
                     </table>
@@ -156,30 +142,22 @@ export const PcdRequestPage = () => {
                   <SectionBreak size="xl" />
 
                   <h2 className="govuk-heading-l">Case outline</h2>
-                  {pcdDetailsData?.caseOutline.map(
-                    ({ heading, textWithCmsMarkup }, index) => (
-                      <Fragment key={index}>
-                        <h3 className="govuk-heading-m">{heading}</h3>
-                        <p
-                          className="govuk-body"
-                          dangerouslySetInnerHTML={{
-                            __html: DOMPurify.sanitize(
-                              cleanString(textWithCmsMarkup)
-                            )
-                          }}
-                        />
-                      </Fragment>
-                    )
-                  )}
+                  {pcdDetailsData?.caseOutline.map(({ heading, textWithCmsMarkup }, index) => (
+                    <Fragment key={index}>
+                      <h3 className="govuk-heading-m">{heading}</h3>
+                      <p
+                        className="govuk-body"
+                        dangerouslySetInnerHTML={{
+                          __html: DOMPurify.sanitize(cleanString(textWithCmsMarkup)),
+                        }}
+                      />
+                    </Fragment>
+                  ))}
 
                   <SectionBreak size="xl" />
 
-                  <h2 className="govuk-heading-l">
-                    Supervising officer's comments
-                  </h2>
-                  <p className="govuk-body">
-                    {pcdDetailsData?.comments?.text || 'None'}
-                  </p>
+                  <h2 className="govuk-heading-l">Supervising officer's comments</h2>
+                  <p className="govuk-body">{pcdDetailsData?.comments?.text || 'None'}</p>
 
                   <SectionBreak size="xl" />
 
@@ -189,16 +167,10 @@ export const PcdRequestPage = () => {
                     <table className="govuk-table gov-table--pcd">
                       <thead className="govuk-table__head">
                         <tr className="govuk-table__row">
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--md"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--md">
                             Name
                           </th>
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--sm"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--sm">
                             Date of birth
                           </th>
                           <th scope="col" className="govuk-table__header">
@@ -207,16 +179,10 @@ export const PcdRequestPage = () => {
                           <th scope="col" className="govuk-table__header">
                             Proposed charge
                           </th>
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--sm"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--sm">
                             Location
                           </th>
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--sm"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--sm">
                             Date
                           </th>
                         </tr>
@@ -224,18 +190,10 @@ export const PcdRequestPage = () => {
                       <tbody className="govuk-table__body">
                         {suspectsAndCharges?.map(
                           (
-                            {
-                              suspect,
-                              location,
-                              charge,
-                              earlyDate,
-                              numberOfCharges,
-                              category
-                            },
-                            index
+                            { suspect, location, charge, earlyDate, numberOfCharges, category },
+                            index,
                           ) => {
-                            const rowSpan =
-                              numberOfCharges > 1 ? numberOfCharges : undefined;
+                            const rowSpan = numberOfCharges > 1 ? numberOfCharges : undefined;
 
                             return (
                               <tr className="govuk-table__row" key={index}>
@@ -247,39 +205,24 @@ export const PcdRequestPage = () => {
                                         className="govuk-table__cell"
                                         rowSpan={rowSpan}
                                       >
-                                        {formatFullName(
-                                          suspect.surname,
-                                          suspect.firstNames
-                                        )}
+                                        {formatFullName(suspect.surname, suspect.firstNames)}
                                       </th>
-                                      <td
-                                        className="govuk-table__cell"
-                                        rowSpan={rowSpan}
-                                      >
+                                      <td className="govuk-table__cell" rowSpan={rowSpan}>
                                         {formatDate(suspect.dob)}
                                       </td>
-                                      <td
-                                        className="govuk-table__cell"
-                                        rowSpan={rowSpan}
-                                      >
+                                      <td className="govuk-table__cell" rowSpan={rowSpan}>
                                         {category}
                                       </td>
                                     </>
                                   )}
 
-                                  <td className="govuk-table__cell">
-                                    {charge}
-                                  </td>
-                                  <td className="govuk-table__cell">
-                                    {location}
-                                  </td>
-                                  <td className="govuk-table__cell">
-                                    {formatDate(earlyDate)}
-                                  </td>
+                                  <td className="govuk-table__cell">{charge}</td>
+                                  <td className="govuk-table__cell">{location}</td>
+                                  <td className="govuk-table__cell">{formatDate(earlyDate)}</td>
                                 </>
                               </tr>
                             );
-                          }
+                          },
                         )}
                       </tbody>
                     </table>
@@ -293,22 +236,13 @@ export const PcdRequestPage = () => {
                     <table className="govuk-table gov-table--pcd">
                       <thead className="govuk-table__head">
                         <tr className="govuk-table__row">
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--md"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--md">
                             Name
                           </th>
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--sm"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--sm">
                             Bail date
                           </th>
-                          <th
-                            scope="col"
-                            className="govuk-table__header govuk-table__cell--md"
-                          >
+                          <th scope="col" className="govuk-table__header govuk-table__cell--md">
                             Remand status
                           </th>
                           <th scope="col" className="govuk-table__header">
@@ -320,20 +254,11 @@ export const PcdRequestPage = () => {
                         {pcdDetailsData?.suspects.map((suspect, index) => (
                           <tr className="govuk-table__row" key={index}>
                             <th scope="row" className="govuk-table__cell">
-                              {formatFullName(
-                                suspect.surname,
-                                suspect.firstNames
-                              )}
+                              {formatFullName(suspect.surname, suspect.firstNames)}
                             </th>
-                            <td className="govuk-table__cell">
-                              {formatDate(suspect.bailDate)}
-                            </td>
-                            <td className="govuk-table__cell">
-                              {suspect.remandStatus}
-                            </td>
-                            <td className="govuk-table__cell">
-                              {suspect.bailConditions}
-                            </td>
+                            <td className="govuk-table__cell">{formatDate(suspect.bailDate)}</td>
+                            <td className="govuk-table__cell">{suspect.remandStatus}</td>
+                            <td className="govuk-table__cell">{suspect.bailConditions}</td>
                           </tr>
                         ))}
                       </tbody>
@@ -350,23 +275,17 @@ export const PcdRequestPage = () => {
                         {
                           title: {
                             expanded: 'Hide all materials provided',
-                            collapsed: 'Show all materials provided'
+                            collapsed: 'Show all materials provided',
                           },
                           content: (
                             <div className="table-container">
                               <table className="govuk-table govuk-table--width-fluid gov-table--pcd">
                                 <thead className="govuk-table__head">
                                   <tr className="govuk-table__row">
-                                    <th
-                                      scope="col"
-                                      className="govuk-table__header"
-                                    >
+                                    <th scope="col" className="govuk-table__header">
                                       Material name
                                     </th>
-                                    <th
-                                      scope="col"
-                                      className="govuk-table__header"
-                                    >
+                                    <th scope="col" className="govuk-table__header">
                                       Date
                                     </th>
                                   </tr>
@@ -374,24 +293,17 @@ export const PcdRequestPage = () => {
                                 <tbody className="govuk-table__body">
                                   {pcdDetailsData?.materialProvided.map(
                                     ({ subject, date }, index) => (
-                                      <tr
-                                        className="govuk-table__row"
-                                        key={index}
-                                      >
-                                        <td className="govuk-table__header">
-                                          {subject}
-                                        </td>
-                                        <td className="govuk-table__cell">
-                                          {date}
-                                        </td>
+                                      <tr className="govuk-table__row" key={index}>
+                                        <td className="govuk-table__header">{subject}</td>
+                                        <td className="govuk-table__cell">{date}</td>
                                       </tr>
-                                    )
+                                    ),
                                   )}
                                 </tbody>
                               </table>
                             </div>
-                          )
-                        }
+                          ),
+                        },
                       ]}
                     />
                   ) : (
@@ -400,8 +312,7 @@ export const PcdRequestPage = () => {
                 </>
               )}
             </TwoCol>
-          )
-        )}
+          ))}
       </div>
     </Layout>
   );
diff --git a/materials_ui/src/pages/PcdReview.tsx b/materials_ui/src/pages/PcdReview.tsx
index 106afa3a..f3a70c34 100644
--- a/materials_ui/src/pages/PcdReview.tsx
+++ b/materials_ui/src/pages/PcdReview.tsx
@@ -11,17 +11,14 @@ import {
   type NavListItem,
   type NavListSection,
   SectionBreak,
-  TwoCol
+  TwoCol,
 } from '../components';
 
 import { PcdReviewCoreType, PcdReviewTypeLabel } from '../constants/enum.ts';
 import { useAppRoute, useCaseInfoStore } from '../hooks/';
 import { usePCDReviewCore } from '../hooks/pcd-review/usePCDReviewCore.ts';
 import { usePCDReviewDetails } from '../hooks/pcd-review/usePCDReviewDetails.ts';
-import type {
-  PCDReviewCoreResponseType,
-  PCDReviewDetailsResponseType
-} from '../schemas/pcdReview';
+import type { PCDReviewCoreResponseType, PCDReviewDetailsResponseType } from '../schemas/pcdReview';
 
 /**
  * compactWhitespace
@@ -53,7 +50,7 @@ dayjs.extend(customParseFormat);
 const PCD_REVIEW_CORE_NAV_TYPE_ORDER: PcdReviewCoreType[] = [
   PcdReviewCoreType.PreChargeDecisionAnalysis,
   PcdReviewCoreType.InitialReview,
-  PcdReviewCoreType.EarlyAdvice
+  PcdReviewCoreType.EarlyAdvice,
 ];
 
 const CHARGING_DECISION_TABLE_HEADINGS = [
@@ -61,37 +58,26 @@ const CHARGING_DECISION_TABLE_HEADINGS = [
   'Charging code',
   'Advice',
   'Evidential Reason Code (if ‘K’)',
-  'Public Interest Code (if C, D, D2, D5, E, F or L)'
+  'Public Interest Code (if C, D, D2, D5, E, F or L)',
 ];
 
-const PUBLIC_INTEREST_REASON_CODES = new Set([
-  'C',
-  'D',
-  'D2',
-  'D5',
-  'E',
-  'F',
-  'L'
-]);
-
-type AnalysisOutcome =
-  PCDReviewDetailsResponseType['preChargeDecisionAnalysisOutcome'];
+const PUBLIC_INTEREST_REASON_CODES = new Set(['C', 'D', 'D2', 'D5', 'E', 'F', 'L']);
+
+type AnalysisOutcome = PCDReviewDetailsResponseType['preChargeDecisionAnalysisOutcome'];
 type DecisionOutcome = PCDReviewDetailsResponseType['preChargeDecisionOutcome'];
 
 const ReviewSidebar = ({ core }: { core: PCDReviewCoreResponseType }) => {
   const { getRoute } = useAppRoute();
 
-  const sections: NavListSection[] = PCD_REVIEW_CORE_NAV_TYPE_ORDER.map(
-    (type) => ({
-      headerLabel: PcdReviewTypeLabel[type],
-      items: core
-        .filter((item) => item.type === type)
-        .map<NavListItem>((item) => ({
-          name: dayjs(item.date, 'DD/MM/YYYY').format('D MMMM YYYY'),
-          href: `${getRoute('PCD_REVIEW', false)}/${item.id}`
-        }))
-    })
-  );
+  const sections: NavListSection[] = PCD_REVIEW_CORE_NAV_TYPE_ORDER.map((type) => ({
+    headerLabel: PcdReviewTypeLabel[type],
+    items: core
+      .filter((item) => item.type === type)
+      .map<NavListItem>((item) => ({
+        name: dayjs(item.date, 'DD/MM/YYYY').format('D MMMM YYYY'),
+        href: `${getRoute('PCD_REVIEW', false)}/${item.id}`,
+      })),
+  }));
 
   return (
     <>
@@ -103,7 +89,7 @@ const ReviewSidebar = ({ core }: { core: PCDReviewCoreResponseType }) => {
 
 const ReviewSummary = ({
   analysis,
-  decision
+  decision,
 }: {
   analysis: AnalysisOutcome;
   decision: DecisionOutcome;
@@ -112,10 +98,7 @@ const ReviewSummary = ({
     items={[
       { title: 'Review type: ', description: [`${analysis.consultationType}`] },
       { title: 'Prosecutor name: ', description: [decision.decisionMadeBy] },
-      {
-        title: 'Review date: ',
-        description: [`${decision.pcdHistoryActionPlan[0]?.entryDate}`]
-      }
+      { title: 'Review date: ', description: [`${decision.pcdHistoryActionPlan[0]?.entryDate}`] },
     ]}
   />
 );
@@ -123,25 +106,19 @@ const ReviewSummary = ({
 const CaseHeadlineCodeTest = ({ analysis }: { analysis: AnalysisOutcome }) => {
   const items = [
     { header: 'Evidential Assessment', body: analysis.evidentialAssessment },
-    {
-      header: 'Public Interest Assessment',
-      body: analysis.publicInterestAssessment
-    },
+    { header: 'Public Interest Assessment', body: analysis.publicInterestAssessment },
     { header: 'Allocation', body: analysis.allocation },
     { header: 'ECHR', body: analysis.europeanCourtOfHumanRights },
-    {
-      header: 'Disclosure Actions and Issues',
-      body: analysis.disclosureActionsAndIssues
-    },
+    { header: 'Disclosure Actions and Issues', body: analysis.disclosureActionsAndIssues },
     { header: 'Trial Strategy', body: analysis.trialStrategy },
     {
       header: 'Witness / Victim Information and Actions',
-      body: analysis.witnessOrVictimInformationAndActions
+      body: analysis.witnessOrVictimInformationAndActions,
     },
     {
       header: 'Instructions to Op Delivery / Advocate',
-      body: analysis.instructionsToOperationsDeliveryOrAdvocate
-    }
+      body: analysis.instructionsToOperationsDeliveryOrAdvocate,
+    },
   ];
 
   return (
@@ -150,7 +127,7 @@ const CaseHeadlineCodeTest = ({ analysis }: { analysis: AnalysisOutcome }) => {
       <div
         className="govuk-body"
         dangerouslySetInnerHTML={{
-          __html: DomPurify.sanitize(compactWhitespace(analysis.caseSummary))
+          __html: DomPurify.sanitize(compactWhitespace(analysis.caseSummary)),
         }}
       />
       {items.map((c) => (
@@ -159,9 +136,7 @@ const CaseHeadlineCodeTest = ({ analysis }: { analysis: AnalysisOutcome }) => {
           {c.body && (
             <div
               className="govuk-body"
-              dangerouslySetInnerHTML={{
-                __html: DomPurify.sanitize(compactWhitespace(c.body))
-              }}
+              dangerouslySetInnerHTML={{ __html: DomPurify.sanitize(compactWhitespace(c.body)) }}
             />
           )}
         </div>
@@ -182,7 +157,7 @@ const ChargingDecisionTable = ({ decision }: { decision: DecisionOutcome }) => {
       advice: advice?.trim(),
       reason,
       reasonCode: d?.reasonCode,
-      publicInterestCode: d?.publicInterestCode
+      publicInterestCode: d?.publicInterestCode,
     };
   });
 
@@ -210,13 +185,9 @@ const ChargingDecisionTable = ({ decision }: { decision: DecisionOutcome }) => {
               </th>
               <td className="govuk-table__cell">{d.chargingCode}</td>
               <td className="govuk-table__cell">{d.advice}</td>
+              <td className="govuk-table__cell">{d.chargingCode === 'K' ? d.reason : '-'}</td>
               <td className="govuk-table__cell">
-                {d.chargingCode === 'K' ? d.reason : '-'}
-              </td>
-              <td className="govuk-table__cell">
-                {PUBLIC_INTEREST_REASON_CODES.has(d.reasonCode)
-                  ? d.publicInterestCode
-                  : '-'}
+                {PUBLIC_INTEREST_REASON_CODES.has(d.reasonCode) ? d.publicInterestCode : '-'}
               </td>
             </tr>
           ))}
@@ -232,26 +203,18 @@ const FurtherActionDetails = ({ decision }: { decision: DecisionOutcome }) => {
 
   return (
     <>
-      <h1 className="govuk-heading-l">
-        Further action agreed for codes A, B, B2, H, I, J
-      </h1>
+      <h1 className="govuk-heading-l">Further action agreed for codes A, B, B2, H, I, J</h1>
       <DefinitionList
         items={[
           { title: 'Action type:', description: [`${plan?.actionType}`] },
           { title: 'Action date:', description: [`${plan?.actionDate}`] },
           { title: '', description: [`${plan?.actionPoint}`] },
-          {
-            title: 'Return bail date:',
-            description: [`${firstDefendant?.returnBailDate}`]
-          },
+          { title: 'Return bail date:', description: [`${firstDefendant?.returnBailDate}`] },
           {
             title: 'Investigation stage at which advice sought:',
-            description: [decision.investigationStage]
+            description: [decision.investigationStage],
           },
-          {
-            title: 'How advice delivered:',
-            description: [`${decision.method}`]
-          }
+          { title: 'How advice delivered:', description: [`${decision.method}`] },
         ]}
       />
     </>
@@ -259,13 +222,10 @@ const FurtherActionDetails = ({ decision }: { decision: DecisionOutcome }) => {
 };
 
 export const PcdReviewPage = () => {
-  const { reviewHistoryId: reviewHistoryIdParam } = useParams<{
-    reviewHistoryId?: string;
-  }>();
+  const { reviewHistoryId: reviewHistoryIdParam } = useParams<{ reviewHistoryId?: string }>();
   const { caseInfo } = useCaseInfoStore();
 
-  const { data: pcdReviewCoreData, isLoading: pcdReviewCoreLoading } =
-    usePCDReviewCore();
+  const { data: pcdReviewCoreData, isLoading: pcdReviewCoreLoading } = usePCDReviewCore();
 
   const reviewHistoryId = Number(reviewHistoryIdParam);
   const firstPcdReviewCoreHistoryId = pcdReviewCoreData?.[0]?.id;
@@ -273,24 +233,18 @@ export const PcdReviewPage = () => {
     ? reviewHistoryId
     : firstPcdReviewCoreHistoryId;
   const shouldRedirectToFirstReview =
-    !reviewHistoryIdParam &&
-    !pcdReviewCoreLoading &&
-    firstPcdReviewCoreHistoryId !== undefined;
+    !reviewHistoryIdParam && !pcdReviewCoreLoading && firstPcdReviewCoreHistoryId !== undefined;
 
   const { isLoading: pcdReviewDetailsLoading, data: pcdReviewDetailsData } =
     usePCDReviewDetails(resolvedReviewHistoryId);
 
   const isLoadingPage = !caseInfo || pcdReviewCoreLoading;
   const noReviewCompleted =
-    !pcdReviewCoreLoading &&
-    Array.isArray(pcdReviewCoreData) &&
-    pcdReviewCoreData.length === 0;
+    !pcdReviewCoreLoading && Array.isArray(pcdReviewCoreData) && pcdReviewCoreData.length === 0;
 
   const noReviewContent = (
     <div className="govuk-main-wrapper">
-      <p className="govuk-body">
-        A Review has not yet been completed for this case.
-      </p>
+      <p className="govuk-body">A Review has not yet been completed for this case.</p>
     </div>
   );
 
@@ -303,11 +257,7 @@ export const PcdReviewPage = () => {
     const decision = pcdReviewDetailsData?.preChargeDecisionOutcome;
 
     if (!analysis || !decision) {
-      return (
-        <p className="govuk-body">
-          Details could not be loaded for this review.
-        </p>
-      );
+      return <p className="govuk-body">Details could not be loaded for this review.</p>;
     }
 
     return (
diff --git a/materials_ui/src/pages/Reclassification.tsx b/materials_ui/src/pages/Reclassification.tsx
index 2dddd171..202cd914 100644
--- a/materials_ui/src/pages/Reclassification.tsx
+++ b/materials_ui/src/pages/Reclassification.tsx
@@ -6,11 +6,7 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { ErrorSummary, LoadingSpinner, Radios } from '../components';
 import DocumentPreview from '../components/DocumentPreview/DocumentPreview';
 import type { ErrorSummaryItem } from '../components/ErrorSummary/ErrorSummary';
-import {
-  AddWitness,
-  MaterialName,
-  Summary
-} from '../components/forms/Reclassify';
+import { AddWitness, MaterialName, Summary } from '../components/forms/Reclassify';
 import { categoryOptions } from '../components/forms/Reclassify/constants/options';
 import { generateMaterialName } from '../components/forms/Reclassify/utils/form';
 import {
@@ -22,14 +18,14 @@ import {
   useDocumentTypes,
   useExhibits,
   useReclassify,
-  useReclassifyForm
+  useReclassifyForm,
 } from '../hooks';
 import { CaseMaterialsType } from '../schemas';
 import {
   Reclassify_ClassificationEnumType,
   Reclassify_ClassificationForm,
   Reclassify_ClassificationFormSchema,
-  Reclassify_WitnessAndActionPlanType
+  Reclassify_WitnessAndActionPlanType,
 } from '../schemas/forms/reclassify';
 import { useMaterialTags } from '../stores';
 import { trackAction } from '../telemetry/appInsights';
@@ -45,18 +41,13 @@ export const ReclassificationPage = () => {
   const { getDocumentTypeById } = useDocumentTypes();
   const { resetBanner, setBanner } = useBanner();
   const { compareRefs } = useExhibits();
-  const {
-    isLocked: isCaseLocked,
-    name: caseLockName,
-    refreshCaseLockStatus
-  } = useCaseLockCheck();
+  const { isLocked: isCaseLocked, name: caseLockName, refreshCaseLockStatus } = useCaseLockCheck();
 
   if (!material) {
     navigate(getRoute('MATERIALS'));
   }
 
-  const { changeFormStep, currentStep, formData, saveFormData } =
-    useReclassifyForm(material);
+  const { changeFormStep, currentStep, formData, saveFormData } = useReclassifyForm(material);
 
   const { loading: reclassifyLoading, submitReclassification } = useReclassify({
     materialId: material.materialId,
@@ -64,7 +55,7 @@ export const ReclassificationPage = () => {
       setBanner({
         type: 'error',
         header: 'Reclassify unsuccessful',
-        content: 'Unable to reclassify the material selected'
+        content: 'Unable to reclassify the material selected',
       });
     },
     onSuccess: (response) => {
@@ -77,7 +68,7 @@ export const ReclassificationPage = () => {
       const banners = getBannerData(
         response?.data,
         formData?.classification as Reclassify_ClassificationEnumType,
-        isRenamed
+        isRenamed,
       );
 
       banners.forEach((banner) => {
@@ -87,29 +78,23 @@ export const ReclassificationPage = () => {
       if (response.data.status !== 'Failed') {
         trackAction('Reclassified', {
           materialId: material.materialId?.toString(),
-          category: material.category
+          category: material.category,
         });
         const documentType = getDocumentTypeById(fieldValues.documentType);
         const materialReclassifiedId =
-          response?.data?.reclassificationResult?.resultData
-            ?.reclassifyCommunication?.id;
+          response?.data?.reclassificationResult?.resultData?.reclassifyCommunication?.id;
 
-        setTags([
-          {
-            materialId: materialReclassifiedId as number,
-            tagName: 'Reclassified'
-          }
-        ]);
+        setTags([{ materialId: materialReclassifiedId as number, tagName: 'Reclassified' }]);
 
         // if material reclassified to a communication, redirect to communication tab instead of materials
         navigate(
           documentType?.category === 'Communication'
             ? getRoute('COMMUNICATIONS')
             : getRoute('MATERIALS'),
-          { state: { persistBanner: true } }
+          { state: { persistBanner: true } },
         );
       }
-    }
+    },
   });
 
   const {
@@ -120,11 +105,11 @@ export const ReclassificationPage = () => {
     resetField,
     setError,
     setValue,
-    watch
+    watch,
   } = useForm<Reclassify_ClassificationForm>({
     // @ts-expect-error fix type here
     resolver: zodResolver(Reclassify_ClassificationFormSchema),
-    defaultValues: formData
+    defaultValues: formData,
   });
 
   const fieldValues = watch();
@@ -133,8 +118,7 @@ export const ReclassificationPage = () => {
   // so we're doing it here in a slightly hacky way
   const errors = useMemo((): FieldErrors => {
     if (formErrors.classification) {
-      formErrors.classification.message =
-        'Choose a new material classification category';
+      formErrors.classification.message = 'Choose a new material classification category';
     }
 
     return formErrors;
@@ -150,7 +134,7 @@ export const ReclassificationPage = () => {
       if (compareRefs(data?.referenceNumber)) {
         setError('referenceNumber', {
           type: 'manual',
-          message: `The reference number '${data?.referenceNumber}' has already been used`
+          message: `The reference number '${data?.referenceNumber}' has already been used`,
         });
 
         return;
@@ -158,9 +142,7 @@ export const ReclassificationPage = () => {
     }
 
     // no additional form steps for these classifications, head to the summary view
-    if (
-      ['EXHIBIT', 'MG Form', 'OTHER'].includes(data?.classification as string)
-    ) {
+    if (['EXHIBIT', 'MG Form', 'OTHER'].includes(data?.classification as string)) {
       saveFormData(data);
       changeFormStep('summary');
     }
@@ -185,9 +167,7 @@ export const ReclassificationPage = () => {
     changeFormStep('summary');
   };
 
-  const handleAddWitnessAndActionPlanFormSubmit = (
-    data: Reclassify_WitnessAndActionPlanType
-  ) => {
+  const handleAddWitnessAndActionPlanFormSubmit = (data: Reclassify_WitnessAndActionPlanType) => {
     if (formData?.classification === 'STATEMENT') {
       saveFormData({
         witnessActionPlan: data,
@@ -195,8 +175,8 @@ export const ReclassificationPage = () => {
           'MG11',
           (data?.firstName as string) || '',
           (data?.surname as string) || '',
-          formatDate(formData?.statementDate, '-', 'DD-MM-YYYY')
-        )
+          formatDate(formData?.statementDate, '-', 'DD-MM-YYYY'),
+        ),
       });
     }
 
@@ -215,10 +195,7 @@ export const ReclassificationPage = () => {
     if (currentStep !== 'classification') {
       let goToStep: FormStep;
 
-      if (
-        formData.classification === 'STATEMENT' &&
-        currentStep === 'subject'
-      ) {
+      if (formData.classification === 'STATEMENT' && currentStep === 'subject') {
         if (formData?.witnessId === 0) {
           goToStep = 'addWitness';
         }
@@ -257,9 +234,8 @@ export const ReclassificationPage = () => {
         setBanner({
           type: 'error',
           header: `You cannot complete this action due to the case being in use by ${caseLockName}`,
-          content:
-            'To unlock, please contact the user and ask them to exit the case',
-          identifier: 'caselock'
+          content: 'To unlock, please contact the user and ask them to exit the case',
+          identifier: 'caselock',
         });
       } else {
         resetBanner('caselock');
@@ -314,9 +290,7 @@ export const ReclassificationPage = () => {
             {currentStep === 'classification' && (
               <>
                 <h2 className="govuk-caption-l hmrc-caption-l">
-                  <span className="govuk-visually-hidden">
-                    This section is{' '}
-                  </span>
+                  <span className="govuk-visually-hidden">This section is </span>
                   Reclassify
                 </h2>
                 <h1 className="govuk-heading-l">Material category</h1>
@@ -325,7 +299,7 @@ export const ReclassificationPage = () => {
                   onSubmit={handleSubmit(
                     // @ts-expect-error need to fix type
                     handleFormSubmit,
-                    handleErrorsOnSubmit
+                    handleErrorsOnSubmit,
                   )}
                   noValidate
                 >
@@ -342,7 +316,7 @@ export const ReclassificationPage = () => {
                           control,
                           fieldValues,
                           errors,
-                          material
+                          material,
                         )}
                         required
                         error={errors?.classification?.message as string}
@@ -352,17 +326,10 @@ export const ReclassificationPage = () => {
                   />
 
                   <div className="govuk-button-group">
-                    <button
-                      type="submit"
-                      className="govuk-button"
-                      data-module="govuk-button"
-                    >
+                    <button type="submit" className="govuk-button" data-module="govuk-button">
                       Continue
                     </button>
-                    <Link
-                      to={getRoute('MATERIALS')}
-                      className="govuk-link cancel-status-change"
-                    >
+                    <Link to={getRoute('MATERIALS')} className="govuk-link cancel-status-change">
                       Cancel
                     </Link>
                   </div>
@@ -370,40 +337,27 @@ export const ReclassificationPage = () => {
               </>
             )}
 
-            {formData.classification === 'STATEMENT' &&
-              currentStep === 'addWitness' && (
-                <>
-                  <h2 className="govuk-caption-l hmrc-caption-l">
-                    <span className="govuk-visually-hidden">
-                      This section is{' '}
-                    </span>
-                    Reclassify
-                  </h2>
-                  <h1 className="govuk-heading-l">
-                    New witness and action plan request
-                  </h1>
-                  <AddWitness
-                    data={
-                      formData?.witnessActionPlan as Reclassify_WitnessAndActionPlanType
-                    }
-                    onSave={handleAddWitnessAndActionPlanFormSubmit}
-                  />
-                </>
-              )}
+            {formData.classification === 'STATEMENT' && currentStep === 'addWitness' && (
+              <>
+                <h2 className="govuk-caption-l hmrc-caption-l">
+                  <span className="govuk-visually-hidden">This section is </span>
+                  Reclassify
+                </h2>
+                <h1 className="govuk-heading-l">New witness and action plan request</h1>
+                <AddWitness
+                  data={formData?.witnessActionPlan as Reclassify_WitnessAndActionPlanType}
+                  onSave={handleAddWitnessAndActionPlanFormSubmit}
+                />
+              </>
+            )}
 
             {currentStep === 'subject' && (
-              <MaterialName
-                data={formData}
-                onSave={handleMaterialNameFormSubmit}
-              />
+              <MaterialName data={formData} onSave={handleMaterialNameFormSubmit} />
             )}
 
             {currentStep === 'summary' && (
               <>
-                <LoadingSpinner
-                  isLoading={reclassifyLoading}
-                  textContent="Please wait..."
-                />
+                <LoadingSpinner isLoading={reclassifyLoading} textContent="Please wait..." />
                 {!reclassifyLoading && (
                   <>
                     <h1 className="govuk-heading-l">Check your answers</h1>
diff --git a/materials_ui/src/pages/ReclassifyToUnused.tsx b/materials_ui/src/pages/ReclassifyToUnused.tsx
index 96a52220..6834ed1d 100644
--- a/materials_ui/src/pages/ReclassifyToUnused.tsx
+++ b/materials_ui/src/pages/ReclassifyToUnused.tsx
@@ -4,13 +4,7 @@ import { useSWRConfig } from 'swr';
 
 import { Layout, StatusTag } from '../components';
 import { QUERY_KEYS } from '../constants/query';
-import {
-  useAppRoute,
-  useBanner,
-  useBulkSetUnused,
-  useFilters,
-  useLogger
-} from '../hooks';
+import { useAppRoute, useBanner, useBulkSetUnused, useFilters, useLogger } from '../hooks';
 import { CaseMaterialsType } from '../schemas';
 import { useMaterialTags } from '../stores';
 
@@ -37,7 +31,7 @@ export const ReclassifyToUnusedPage = () => {
       setBanner({
         type: 'error',
         header: 'Reclassification unsuccessful',
-        content: 'There was a problem marking the material as unread.'
+        content: 'There was a problem marking the material as unread.',
       });
     },
     onSuccess: async (response) => {
@@ -46,27 +40,24 @@ export const ReclassifyToUnusedPage = () => {
       setTags(
         updatedMaterials.map((material) => ({
           materialId: material?.materialId,
-          tagName: 'Reclassified'
-        }))
+          tagName: 'Reclassified',
+        })),
       );
 
       setBanner({
         type: 'success',
         header: 'Reclassify to Unused success',
-        content: `${updatedMaterials?.length} Unused Material${updatedMaterials?.length === 1 ? '' : 's'} reclassified successfully`
+        content: `${updatedMaterials?.length} Unused Material${updatedMaterials?.length === 1 ? '' : 's'} reclassified successfully`,
       });
 
-      log({
-        logLevel: 0,
-        message: `HK-UI-FE: Materials have been updated: ${updatedMaterials}`
-      });
+      log({ logLevel: 0, message: `HK-UI-FE: Materials have been updated: ${updatedMaterials}` });
 
       resetFilters();
 
       await mutate(QUERY_KEYS.CASE_MATERIAL);
 
       navigate(returnToMaterialsUrl, { state: { persistBanner: true } });
-    }
+    },
   });
 
   const handleSaveChanges = async () => {
@@ -74,13 +65,11 @@ export const ReclassifyToUnusedPage = () => {
   };
 
   const handleRemoveItem = (material: CaseMaterialsType) => {
-    setCaseMaterials(
-      caseMaterials.filter((item) => item.materialId !== material.materialId)
-    );
+    setCaseMaterials(caseMaterials.filter((item) => item.materialId !== material.materialId));
 
     log({
       logLevel: 1,
-      message: `HK-UI-FE: Removed ${material.materialId} from selected materials.`
+      message: `HK-UI-FE: Removed ${material.materialId} from selected materials.`,
     });
   };
 
@@ -117,10 +106,7 @@ export const ReclassifyToUnusedPage = () => {
             </caption>
             <thead className="govuk-table__head">
               <tr className="govuk-table__row">
-                <th
-                  scope="col"
-                  className="govuk-table__header govuk-!-width-one-half"
-                >
+                <th scope="col" className="govuk-table__header govuk-!-width-one-half">
                   Material
                 </th>
                 <th scope="col" className="govuk-table__header">
@@ -177,10 +163,7 @@ export const ReclassifyToUnusedPage = () => {
           >
             Save and return to list view
           </button>
-          <Link
-            to={returnToMaterialsUrl}
-            className="govuk-link cancel-status-change"
-          >
+          <Link to={returnToMaterialsUrl} className="govuk-link cancel-status-change">
             Cancel
           </Link>
         </div>
diff --git a/materials_ui/src/pages/ServerErrorPage.tsx b/materials_ui/src/pages/ServerErrorPage.tsx
index 015fdfc7..ce91e3d7 100644
--- a/materials_ui/src/pages/ServerErrorPage.tsx
+++ b/materials_ui/src/pages/ServerErrorPage.tsx
@@ -4,12 +4,8 @@ export const ServerErrorPage = () => {
   return (
     <Layout plain title="Service Unavailable">
       <>
-        <h1 className="govuk-heading-l">
-          This service is temporarily unavailable
-        </h1>
-        <p className="govuk-body">
-          We are working to restore the service as soon as possible.
-        </p>
+        <h1 className="govuk-heading-l">This service is temporarily unavailable</h1>
+        <p className="govuk-body">We are working to restore the service as soon as possible.</p>
         <p className="govuk-body">Please try again later.</p>
       </>
     </Layout>
diff --git a/materials_ui/src/pages/ViewDocumentPage.scss b/materials_ui/src/pages/ViewDocumentPage.scss
index eac6b555..13f3e95d 100644
--- a/materials_ui/src/pages/ViewDocumentPage.scss
+++ b/materials_ui/src/pages/ViewDocumentPage.scss
@@ -8,4 +8,3 @@ body.hide-footer {
     display: none;
   }
 }
-
diff --git a/materials_ui/src/pages/ViewDocumentPage.tsx b/materials_ui/src/pages/ViewDocumentPage.tsx
index b2d879a9..a441c72e 100644
--- a/materials_ui/src/pages/ViewDocumentPage.tsx
+++ b/materials_ui/src/pages/ViewDocumentPage.tsx
@@ -8,7 +8,7 @@ import { usePageColors } from '../hooks/ui/usePageColors';
 import { useAxiosInstance } from '../materials_components/DocumentSelectAccordion/getters/getAxiosInstance';
 import {
   safeGetDocumentListFromAxiosInstance,
-  TDocumentList
+  TDocumentList,
 } from '../materials_components/DocumentSelectAccordion/getters/getDocumentList';
 import { GovUkBanner } from '../materials_components/DocumentSelectAccordion/templates/GovUkBanner';
 import { stripCmsPrefix } from '../utils/cmsStringTransform';
@@ -16,21 +16,16 @@ import './ViewDocumentPage.scss';
 
 pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;
 
-const useDocumentListFromAxiosInstance = (p: {
-  urn: string;
-  caseId: number;
-}) => {
+const useDocumentListFromAxiosInstance = (p: { urn: string; caseId: number }) => {
   const axiosInstance = useAxiosInstance();
-  const [documentList, setDocumentList] = useState<
-    TDocumentList | null | undefined
-  >(undefined);
+  const [documentList, setDocumentList] = useState<TDocumentList | null | undefined>(undefined);
 
   useEffect(() => {
     (async () => {
       const documentListResp = await safeGetDocumentListFromAxiosInstance({
         axiosInstance,
         urn: p.urn,
-        caseId: p.caseId
+        caseId: p.caseId,
       });
       setDocumentList(documentListResp.success ? documentListResp.data : null);
     })();
@@ -39,11 +34,7 @@ const useDocumentListFromAxiosInstance = (p: {
   return { data: documentList };
 };
 
-const LoadAndViewPdf = (p: {
-  urn: string;
-  caseId: number;
-  materialId: string;
-}) => {
+const LoadAndViewPdf = (p: { urn: string; caseId: number; materialId: string }) => {
   const { data: pdfUrl } = useDocumentPdfUrl(p);
   const { data: documentList } = useDocumentListFromAxiosInstance(p);
   const [numPages, setNumPages] = useState<number>();
@@ -52,7 +43,7 @@ const LoadAndViewPdf = (p: {
   useEffect(() => {
     const cmsStrippedMaterialId = stripCmsPrefix(p.materialId);
     const documentPresentationTitle = documentList?.find(
-      (x) => stripCmsPrefix(x.parentId) === cmsStrippedMaterialId
+      (x) => stripCmsPrefix(x.parentId) === cmsStrippedMaterialId,
     )?.presentationTitle;
     const documentTitleSuffix = ' - Managed Materials';
     const documentTitlePrefix = (() => {
@@ -65,9 +56,7 @@ const LoadAndViewPdf = (p: {
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-      {pdfUrl === undefined && (
-        <LoadingSpinner isLoading={true} textContent="Fetching document" />
-      )}
+      {pdfUrl === undefined && <LoadingSpinner isLoading={true} textContent="Fetching document" />}
       {pdfUrl === null && (
         <div>
           <br />
@@ -83,9 +72,7 @@ const LoadAndViewPdf = (p: {
         <Document
           file={pdfUrl}
           onLoadSuccess={(pdf) => setNumPages(pdf.numPages)}
-          loading={
-            <LoadingSpinner isLoading={true} textContent="Fetching document" />
-          }
+          loading={<LoadingSpinner isLoading={true} textContent="Fetching document" />}
         >
           {[...Array(numPages)].map((_, j) => (
             <Page key={j} pageNumber={j + 1} pageColors={pageColors} />
diff --git a/materials_ui/src/routes.tsx b/materials_ui/src/routes.tsx
index 5cb51c4b..db025c42 100644
--- a/materials_ui/src/routes.tsx
+++ b/materials_ui/src/routes.tsx
@@ -15,7 +15,7 @@ import {
   PcdReviewPage,
   ReclassificationPage,
   ReclassifyToUnusedPage,
-  ServerErrorPage
+  ServerErrorPage,
 } from './pages';
 import { CaseSearchPage } from './pages/CaseSearch';
 import { ViewDocumentPage } from './pages/ViewDocumentPage';
@@ -40,65 +40,29 @@ export const Routes = () => {
 
   return (
     <Router>
-      <Route
-        path="/"
-        element={<Navigate to={getRoute('CASE_SEARCH', false)} replace />}
-      />
+      <Route path="/" element={<Navigate to={getRoute('CASE_SEARCH', false)} replace />} />
 
-      <Route
-        path={getRoute('UNAUTHORISED', false)}
-        element={<NotAuthorisedPage />}
-      />
-      <Route
-        path={getRoute('SERVER_ERROR', false)}
-        element={<ServerErrorPage />}
-      />
-      <Route
-        path={getRoute('CASE_SEARCH', false)}
-        element={<CaseSearchPage />}
-      />
-      <Route
-        path={'/:urn/:caseId/view-document/:documentId'}
-        element={<ViewDocumentPage />}
-      />
+      <Route path={getRoute('UNAUTHORISED', false)} element={<NotAuthorisedPage />} />
+      <Route path={getRoute('SERVER_ERROR', false)} element={<ServerErrorPage />} />
+      <Route path={getRoute('CASE_SEARCH', false)} element={<CaseSearchPage />} />
+      <Route path={'/:urn/:caseId/view-document/:documentId'} element={<ViewDocumentPage />} />
 
       <Route path={`:urn/:caseId`}>
-        <Route
-          path={getRoute('DISCARD', false)}
-          element={<DiscardMaterialPage />}
-        />
-        <Route
-          path={`${getRoute('PCD_REQUEST', false)}/:pcdId?`}
-          element={<PcdRequestPage />}
-        />
+        <Route path={getRoute('DISCARD', false)} element={<DiscardMaterialPage />} />
+        <Route path={`${getRoute('PCD_REQUEST', false)}/:pcdId?`} element={<PcdRequestPage />} />
         <Route
           path={`${getRoute('PCD_REVIEW', false)}/:reviewHistoryId?`}
           element={<PcdReviewPage />}
         />
-        <Route
-          path={getRoute('MATERIALS', false)}
-          element={<MaterialsPage />}
-        />
-        <Route
-          path={getRoute('COMMUNICATIONS', false)}
-          element={<CommunicationsPage />}
-        />
-        <Route
-          path={getRoute('REVIEW_REDACT', false)}
-          element={<ReviewAndRedactPage />}
-        />
+        <Route path={getRoute('MATERIALS', false)} element={<MaterialsPage />} />
+        <Route path={getRoute('COMMUNICATIONS', false)} element={<CommunicationsPage />} />
+        <Route path={getRoute('REVIEW_REDACT', false)} element={<ReviewAndRedactPage />} />
         <Route
           path={getRoute('RECLASSIFY_TO_UNUSED', false)}
           element={<ReclassifyToUnusedPage />}
         />
-        <Route
-          path={getRoute('RECLASSIFICATION', false)}
-          element={<ReclassificationPage />}
-        />
-        <Route
-          path={getRoute('UPDATE_MATERIAL', false)}
-          element={<EditMaterialPage />}
-        />
+        <Route path={getRoute('RECLASSIFICATION', false)} element={<ReclassificationPage />} />
+        <Route path={getRoute('UPDATE_MATERIAL', false)} element={<EditMaterialPage />} />
       </Route>
 
       <Route path="*" element={<NotFoundPage />} />
diff --git a/materials_ui/src/schemas/app.ts b/materials_ui/src/schemas/app.ts
index 8b9bc673..6bdbc229 100644
--- a/materials_ui/src/schemas/app.ts
+++ b/materials_ui/src/schemas/app.ts
@@ -3,12 +3,10 @@ import { BannerSchema } from './banner';
 
 export const AppContextSchema = z.object({
   banner: BannerSchema.optional(),
-  wmReturnUrl: z.string().nullable()
+  wmReturnUrl: z.string().nullable(),
 });
 
-export const AppErrorSchema = z
-  .enum(['auth', 'materialRetrieval', 'serviceDown'])
-  .optional();
+export const AppErrorSchema = z.enum(['auth', 'materialRetrieval', 'serviceDown']).optional();
 
 export type AppContextType = z.infer<typeof AppContextSchema>;
 export type AppErrorType = z.infer<typeof AppErrorSchema>;
diff --git a/materials_ui/src/schemas/banner.ts b/materials_ui/src/schemas/banner.ts
index c43c994e..d141bcfc 100644
--- a/materials_ui/src/schemas/banner.ts
+++ b/materials_ui/src/schemas/banner.ts
@@ -6,7 +6,7 @@ export const BannerSchema = z.object({
   type: BannerTypeSchema.optional(),
   header: z.string(),
   content: z.string().optional(),
-  identifier: z.string().optional()
+  identifier: z.string().optional(),
 });
 
 export type BannerTypeEnum = z.infer<typeof BannerTypeSchema>;
diff --git a/materials_ui/src/schemas/bulkSetUnused.ts b/materials_ui/src/schemas/bulkSetUnused.ts
index 6741b458..ad6ed985 100644
--- a/materials_ui/src/schemas/bulkSetUnused.ts
+++ b/materials_ui/src/schemas/bulkSetUnused.ts
@@ -1,9 +1,6 @@
 import { z } from 'zod';
 
-export const BulkSetUnusedSchema = z.object({
-  materialId: z.number(),
-  subject: z.string()
-});
+export const BulkSetUnusedSchema = z.object({ materialId: z.number(), subject: z.string() });
 
 export const BulkSetUnusedRequestSchema = z.array(BulkSetUnusedSchema);
 export const BulkSetUnusedResponseSchema = z.object({
@@ -11,18 +8,10 @@ export const BulkSetUnusedResponseSchema = z.object({
   message: z.string(),
   reclassifiedMaterials: z.array(BulkSetUnusedSchema),
   failedMaterials: z.array(
-    z.object({
-      materialId: z.number(),
-      subject: z.string(),
-      errorMessage: z.string()
-    })
-  )
+    z.object({ materialId: z.number(), subject: z.string(), errorMessage: z.string() }),
+  ),
 });
 
 export type BulkSetUnusedType = z.infer<typeof BulkSetUnusedSchema>;
-export type BulkSetUnusedRequestType = z.infer<
-  typeof BulkSetUnusedRequestSchema
->;
-export type BulkSetUnusedResponseType = z.infer<
-  typeof BulkSetUnusedResponseSchema
->;
+export type BulkSetUnusedRequestType = z.infer<typeof BulkSetUnusedRequestSchema>;
+export type BulkSetUnusedResponseType = z.infer<typeof BulkSetUnusedResponseSchema>;
diff --git a/materials_ui/src/schemas/caseDetails.ts b/materials_ui/src/schemas/caseDetails.ts
index 4a74ea23..595395f8 100644
--- a/materials_ui/src/schemas/caseDetails.ts
+++ b/materials_ui/src/schemas/caseDetails.ts
@@ -9,7 +9,7 @@ const DefendantDetailsSchema = z.object({
   dob: z.string(),
   age: z.string(),
   youth: z.boolean(),
-  type: z.string()
+  type: z.string(),
 });
 
 const HeadlineChargeSchema = z.object({
@@ -17,13 +17,13 @@ const HeadlineChargeSchema = z.object({
   date: z.string().nullable(),
   earlyDate: z.string().nullable(),
   lateDate: z.string().nullable(),
-  nextHearingDate: z.string().nullable()
+  nextHearingDate: z.string().nullable(),
 });
 
 const CustodyTimeLimitSchema = z.object({
   expiryDate: z.string().nullable(),
   expiryDays: z.number().nullable(),
-  expiryIndicator: z.boolean().nullable()
+  expiryIndicator: z.boolean().nullable(),
 });
 
 const ChargesSchema = z.array(
@@ -37,8 +37,8 @@ const ChargesSchema = z.array(
     code: z.string(),
     shortDescription: z.string(),
     longDescription: z.string(),
-    custodyTimeLimit: CustodyTimeLimitSchema
-  })
+    custodyTimeLimit: CustodyTimeLimitSchema,
+  }),
 );
 
 const DefendantSchema = z.array(
@@ -48,8 +48,8 @@ const DefendantSchema = z.array(
     defendantDetails: DefendantDetailsSchema,
     custodyTimeLimit: CustodyTimeLimitSchema,
     charges: ChargesSchema,
-    proposedCharges: z.array(z.unknown())
-  })
+    proposedCharges: z.array(z.unknown()),
+  }),
 );
 
 const WitnessSchema = z.array(
@@ -70,8 +70,8 @@ const WitnessSchema = z.array(
     professional: z.boolean(),
     specialNeeds: z.boolean(),
     intimidated: z.boolean(),
-    victim: z.boolean()
-  })
+    victim: z.boolean(),
+  }),
 );
 
 export const caseDetailsSchema = z.array(
@@ -85,8 +85,8 @@ export const caseDetailsSchema = z.array(
     headlineCharge: HeadlineChargeSchema,
     defendants: DefendantSchema,
     witnesses: WitnessSchema,
-    preChargeDecisionRequests: z.array(z.unknown())
-  })
+    preChargeDecisionRequests: z.array(z.unknown()),
+  }),
 );
 
 export type CaseDetailsType = z.infer<typeof caseDetailsSchema>;
diff --git a/materials_ui/src/schemas/caseLockStatus.ts b/materials_ui/src/schemas/caseLockStatus.ts
index 0b0a725e..36cd3de0 100644
--- a/materials_ui/src/schemas/caseLockStatus.ts
+++ b/materials_ui/src/schemas/caseLockStatus.ts
@@ -4,9 +4,7 @@ export const CaseLockStatusResponseSchema = z.object({
   caseLockedMessage: z.string().nullable(),
   isLocked: z.boolean(),
   isLockedByCurrentUser: z.boolean(),
-  lockedByUser: z.string().nullable()
+  lockedByUser: z.string().nullable(),
 });
 
-export type CaseLockStatusResponseType = z.infer<
-  typeof CaseLockStatusResponseSchema
->;
+export type CaseLockStatusResponseType = z.infer<typeof CaseLockStatusResponseSchema>;
diff --git a/materials_ui/src/schemas/caseMaterials.ts b/materials_ui/src/schemas/caseMaterials.ts
index 307965b3..e5e006f0 100644
--- a/materials_ui/src/schemas/caseMaterials.ts
+++ b/materials_ui/src/schemas/caseMaterials.ts
@@ -24,7 +24,7 @@ export const CaseMaterialsSchema = z.object({
   reference: z.string(),
   item: z.string(),
   existingproducerOrWitnessId: z.number(),
-  isReclassifiable: z.boolean()
+  isReclassifiable: z.boolean(),
 });
 
 export const CaseMaterialDataSchema = z.enum(['materials', 'communications']);
@@ -33,51 +33,38 @@ export type CaseMaterialDataType = z.infer<typeof CaseMaterialDataSchema>;
 export const CaseMaterialsRequestSchema = z.array(CaseMaterialsSchema);
 export const CaseMaterialsResponseSchema = z.array(CaseMaterialsSchema);
 
-export const CaseMaterialRenameSchema = z.object({
-  materialId: z.number(),
-  subject: z.string()
-});
+export const CaseMaterialRenameSchema = z.object({ materialId: z.number(), subject: z.string() });
 
 export const CaseMaterialRenameRequestSchema = CaseMaterialRenameSchema;
 export const CaseMaterialRenameResponseSchema = z.object({
-  updateCommunication: z.object({ id: z.coerce.string() })
+  updateCommunication: z.object({ id: z.coerce.string() }),
 });
 
 export type CaseMaterialsType = z.infer<typeof CaseMaterialsSchema>;
-export type CaseMaterialsRequestType = z.infer<
-  typeof CaseMaterialsRequestSchema
->;
-export type CaseMaterialsResponseType = z.infer<
-  typeof CaseMaterialsResponseSchema
->;
+export type CaseMaterialsRequestType = z.infer<typeof CaseMaterialsRequestSchema>;
+export type CaseMaterialsResponseType = z.infer<typeof CaseMaterialsResponseSchema>;
 export type CaseMaterialRenameType = z.infer<typeof CaseMaterialRenameSchema>;
-export type CaseMaterialRenameRequestType = z.infer<
-  typeof CaseMaterialRenameRequestSchema
->;
-export type CaseMaterialRenameResponseType = z.infer<
-  typeof CaseMaterialRenameResponseSchema
->;
+export type CaseMaterialRenameRequestType = z.infer<typeof CaseMaterialRenameRequestSchema>;
+export type CaseMaterialRenameResponseType = z.infer<typeof CaseMaterialRenameResponseSchema>;
 
 export const CaseMaterialReadStatusRequestSchema = z.object({
   materialId: z.number(),
   state: z.string(),
-  correspondenceId: z.string().uuid()
+  correspondenceId: z.string().uuid(),
 });
 
 export const CaseMaterialReadStatusResponseSchema = z.object({
-  completeCommunicationData: z.object({ id: z.number() })
+  completeCommunicationData: z.object({ id: z.number() }),
 });
 
-export type CaseMaterialReadStatusRequestType = z.infer<
-  typeof CaseMaterialReadStatusRequestSchema
->;
+export type CaseMaterialReadStatusRequestType = z.infer<typeof CaseMaterialReadStatusRequestSchema>;
 
 export type CaseMaterialReadStatusResponseType = z.infer<
   typeof CaseMaterialReadStatusResponseSchema
 >;
 
 export const CaseMaterialDocumentPreviewSchema = z.object({
-  Blob: z.object({ size: z.number(), type: z.string() })
+  Blob: z.object({ size: z.number(), type: z.string() }),
 });
 
 export type CaseMaterialDocumentPreviewResponseType = z.infer<
@@ -87,16 +74,12 @@ export type CaseMaterialDocumentPreviewResponseType = z.infer<
 export const CaseMaterialDiscardRequestSchema = z.object({
   materialId: z.number(),
   discardReason: z.string(),
-  discardReasonDescription: z.string()
+  discardReasonDescription: z.string(),
 });
 
 export const CaseMaterialDiscardResponseSchema = z.object({
-  discardMaterialData: z.object({ id: z.number() })
+  discardMaterialData: z.object({ id: z.number() }),
 });
 
-export type CaseMaterialDiscardRequestType = z.infer<
-  typeof CaseMaterialDiscardRequestSchema
->;
-export type CaseMaterialDiscardResponseType = z.infer<
-  typeof CaseMaterialDiscardResponseSchema
->;
+export type CaseMaterialDiscardRequestType = z.infer<typeof CaseMaterialDiscardRequestSchema>;
+export type CaseMaterialDiscardResponseType = z.infer<typeof CaseMaterialDiscardResponseSchema>;
diff --git a/materials_ui/src/schemas/caseinfo.ts b/materials_ui/src/schemas/caseinfo.ts
index 5ea3490e..4f00d03c 100644
--- a/materials_ui/src/schemas/caseinfo.ts
+++ b/materials_ui/src/schemas/caseinfo.ts
@@ -6,7 +6,7 @@ export const CaseInfoSchema = z.strictObject({
   leadDefendantFirstNames: z.string(),
   leadDefendantSurname: z.string(),
   numberOfDefendants: z.number(),
-  unitName: z.string()
+  unitName: z.string(),
 });
 
 export const CaseInfoRequestSchema = z.null();
diff --git a/materials_ui/src/schemas/classification.ts b/materials_ui/src/schemas/classification.ts
index b46c2fc5..d0a893aa 100644
--- a/materials_ui/src/schemas/classification.ts
+++ b/materials_ui/src/schemas/classification.ts
@@ -2,16 +2,14 @@ import { z } from 'zod';
 
 export const AutoReclassifyMaterialSchema = z.object({
   materialId: z.number(),
-  subject: z.string()
+  subject: z.string(),
 });
 
 export const AutoReclassifyResponseSchema = z.object({
   status: z.string(),
   message: z.string(),
   reclassifiedMaterials: z.array(AutoReclassifyMaterialSchema),
-  failedMaterials: z.array(AutoReclassifyMaterialSchema)
+  failedMaterials: z.array(AutoReclassifyMaterialSchema),
 });
 
-export type AutoReclassifyResponseType = z.infer<
-  typeof AutoReclassifyResponseSchema
->;
+export type AutoReclassifyResponseType = z.infer<typeof AutoReclassifyResponseSchema>;
diff --git a/materials_ui/src/schemas/defendants.ts b/materials_ui/src/schemas/defendants.ts
index 56f5ebcf..b972fa17 100644
--- a/materials_ui/src/schemas/defendants.ts
+++ b/materials_ui/src/schemas/defendants.ts
@@ -26,8 +26,8 @@ export const DefendantSchema = z.object({
       disposedReason: z.string(),
       lastHearingOutcome: z.string().nullable(),
       custodyTimeLimit: z.string().nullable(),
-      latestPleaDescription: z.string()
-    })
+      latestPleaDescription: z.string(),
+    }),
   ),
   charges: z.array(z.unknown()),
   proposedCharges: z.array(z.unknown()),
@@ -45,13 +45,11 @@ export const DefendantSchema = z.object({
     workPhoneNumber: z.string().nullable(),
     preferredCorrespondenceLanguage: z.string(),
     religion: z.string(),
-    guardian: z.string().nullable()
-  })
+    guardian: z.string().nullable(),
+  }),
 });
 
-export const DefendantsResponseSchema = z.object({
-  defendants: z.array(DefendantSchema)
-});
+export const DefendantsResponseSchema = z.object({ defendants: z.array(DefendantSchema) });
 
 export type DefendantType = z.infer<typeof DefendantSchema>;
 export type DefendantsResponseType = z.infer<typeof DefendantsResponseSchema>;
diff --git a/materials_ui/src/schemas/documentTypes.ts b/materials_ui/src/schemas/documentTypes.ts
index f992a7ac..c0ecabf9 100644
--- a/materials_ui/src/schemas/documentTypes.ts
+++ b/materials_ui/src/schemas/documentTypes.ts
@@ -1,22 +1,15 @@
 import { z } from 'zod';
 
-export const DocumentGroup = z.enum([
-  'Exhibit',
-  'MG Form',
-  'Other',
-  'Statement'
-]);
+export const DocumentGroup = z.enum(['Exhibit', 'MG Form', 'Other', 'Statement']);
 
 export const DocumentType = z.object({
   id: z.number(),
   name: z.string(),
   group: DocumentGroup,
-  category: z.string()
+  category: z.string(),
 });
 
 export const DocumentTypeResponseSchema = z.array(DocumentType);
 
 export type DocumentType = z.infer<typeof DocumentType>;
-export type DocumentTypeResponseType = z.infer<
-  typeof DocumentTypeResponseSchema
->;
+export type DocumentTypeResponseType = z.infer<typeof DocumentTypeResponseSchema>;
diff --git a/materials_ui/src/schemas/documents.ts b/materials_ui/src/schemas/documents.ts
index 7affca8c..1d34c612 100644
--- a/materials_ui/src/schemas/documents.ts
+++ b/materials_ui/src/schemas/documents.ts
@@ -3,7 +3,7 @@ import { z } from 'zod';
 export const cmsDocTypeSchema = z.object({
   documentTypeId: z.number(),
   documentType: z.string(),
-  documentCategory: z.string()
+  documentCategory: z.string(),
 });
 
 export const DocumentSchema = z.object({
@@ -16,10 +16,7 @@ export const DocumentSchema = z.object({
   cmsFileCreatedDate: z.string(),
   isOcrProcessed: z.boolean(),
   categoryListOrder: z.number(),
-  presentationFlags: z.object({
-    read: z.literal('Ok'),
-    write: z.literal('Ok')
-  }),
+  presentationFlags: z.object({ read: z.literal('Ok'), write: z.literal('Ok') }),
   parentDocumentId: z.string().nullable(),
   witnessId: z.number().nullable(),
   hasFailedAttachments: z.boolean(),
@@ -33,7 +30,7 @@ export const DocumentSchema = z.object({
   canReclassify: z.boolean(),
   canRename: z.boolean(),
   renameStatus: z.string(),
-  reference: z.string().nullable()
+  reference: z.string().nullable(),
 });
 
 export const SearchResultSchema = z.object({
@@ -50,9 +47,9 @@ export const SearchResultSchema = z.object({
     z.object({
       boundingBox: z.array(z.number()).nullable(),
       text: z.string(),
-      matchType: z.array(z.string())
-    })
-  )
+      matchType: z.array(z.string()),
+    }),
+  ),
 });
 
 export const SearchTermResultSchema = z.object({
@@ -71,17 +68,17 @@ export const SearchTermResultSchema = z.object({
         z.object({
           boundingBox: z.array(z.number()).nullable(),
           text: z.string(),
-          matchType: z.array(z.string())
-        })
-      )
-    })
+          matchType: z.array(z.string()),
+        }),
+      ),
+    }),
   ),
   status: z.string(),
   isUnused: z.boolean(),
   presentationTitle: z.string(),
   cmsOriginalFileName: z.string(),
   conversionStatus: z.string(),
-  resultsPerDocumentCount: z.number().optional()
+  resultsPerDocumentCount: z.number().optional(),
 });
 export const documentListSchema = z.array(DocumentSchema);
 export type DocumentResultType = z.infer<typeof documentListSchema>;
diff --git a/materials_ui/src/schemas/exhibitProducer.ts b/materials_ui/src/schemas/exhibitProducer.ts
index 5ee80b70..9d1f691e 100644
--- a/materials_ui/src/schemas/exhibitProducer.ts
+++ b/materials_ui/src/schemas/exhibitProducer.ts
@@ -1,15 +1,10 @@
 import { z } from 'zod';
 
-export const ExhibitProducerSchema = z.object({
-  id: z.number(),
-  producer: z.string()
-});
+export const ExhibitProducerSchema = z.object({ id: z.number(), producer: z.string() });
 
 export const ExhibitProducerResponseSchema = z.object({
-  exhibitProducers: z.array(ExhibitProducerSchema)
+  exhibitProducers: z.array(ExhibitProducerSchema),
 });
 
 export type ExhibitProducerType = z.infer<typeof ExhibitProducerSchema>;
-export type ExhibitProducerResponseType = z.infer<
-  typeof ExhibitProducerResponseSchema
->;
+export type ExhibitProducerResponseType = z.infer<typeof ExhibitProducerResponseSchema>;
diff --git a/materials_ui/src/schemas/forms/editStatement.ts b/materials_ui/src/schemas/forms/editStatement.ts
index d42cbd4f..cfd4cb45 100644
--- a/materials_ui/src/schemas/forms/editStatement.ts
+++ b/materials_ui/src/schemas/forms/editStatement.ts
@@ -6,7 +6,7 @@ export const BaseEditStatementSchema = z.object({
   statementDate: z.coerce.date().optional(),
   statementNumber: z.string({ message: 'Enter a statement number' }),
   used: z.boolean({ message: 'Choose a material status' }),
-  witnessId: z.coerce.number({ message: 'Choose a witness' })
+  witnessId: z.coerce.number({ message: 'Choose a witness' }),
 });
 
 export const EditExhibitSchema = z.object({
@@ -20,62 +20,54 @@ export const EditExhibitSchema = z.object({
   used: z.boolean({ message: 'Choose a material status' }),
   producedBy: z.string({ message: 'Enter produced by' }).optional(),
   existingproducerOrWitnessId: z.coerce.number().optional(),
-  newProducer: z.string().optional()
+  newProducer: z.string().optional(),
 });
 
-export const EditStatementSchema = BaseEditStatementSchema.superRefine(
-  (data, ctx) => {
-    if (data.hasStatementDate) {
-      const date = data.statementDate;
+export const EditStatementSchema = BaseEditStatementSchema.superRefine((data, ctx) => {
+  if (data.hasStatementDate) {
+    const date = data.statementDate;
 
-      // Missing or invalid date
-      if (!date || isNaN(date.getTime())) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: 'Enter the statement date',
-          path: ['statementDate']
-        });
-        return;
-      }
+    // Missing or invalid date
+    if (!date || isNaN(date.getTime())) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Enter the statement date',
+        path: ['statementDate'],
+      });
+      return;
+    }
 
-      // Date in the future
-      const today = new Date();
-      today.setHours(0, 0, 0, 0);
+    // Date in the future
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
 
-      const input = new Date(date);
-      input.setHours(0, 0, 0, 0);
+    const input = new Date(date);
+    input.setHours(0, 0, 0, 0);
 
-      if (input > today) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: 'Date cannot be in the future',
-          path: ['statementDate']
-        });
-      }
+    if (input > today) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Date cannot be in the future',
+        path: ['statementDate'],
+      });
     }
   }
-);
+});
 
 export const EditStatementRequestSchema = BaseEditStatementSchema.omit({
-  hasStatementDate: true
+  hasStatementDate: true,
 }).extend({ statementDate: z.string().nullable() });
 
 export const EditStatementResponseSchema = z.object({
-  updateStatement: z.object({ id: z.number() })
+  updateStatement: z.object({ id: z.number() }),
 });
 
-export const EditExhibitResponseSchema = z.object({
-  updateExhibit: z.object({ id: z.number() })
-});
+export const EditExhibitResponseSchema = z.object({ updateExhibit: z.object({ id: z.number() }) });
 
 export type EditStatementType = z.infer<typeof EditStatementSchema>;
 export type EditExhibitType = z.infer<typeof EditExhibitSchema>;
-export type EditStatementRequestType = z.infer<
-  typeof EditStatementRequestSchema
->;
-export type EditStatementResponseType = z.infer<
-  typeof EditStatementResponseSchema
->;
+export type EditStatementRequestType = z.infer<typeof EditStatementRequestSchema>;
+export type EditStatementResponseType = z.infer<typeof EditStatementResponseSchema>;
 
 export type EditExhibitRequestType = z.infer<typeof EditStatementRequestSchema>;
 
diff --git a/materials_ui/src/schemas/forms/reclassify.ts b/materials_ui/src/schemas/forms/reclassify.ts
index eb19067e..df81b13d 100644
--- a/materials_ui/src/schemas/forms/reclassify.ts
+++ b/materials_ui/src/schemas/forms/reclassify.ts
@@ -1,11 +1,6 @@
 import { z } from 'zod';
 
-const Reclassify_ClassificationEnum = z.enum([
-  'STATEMENT',
-  'EXHIBIT',
-  'MG Form',
-  'OTHER'
-]);
+const Reclassify_ClassificationEnum = z.enum(['STATEMENT', 'EXHIBIT', 'MG Form', 'OTHER']);
 
 const MaterialNameSchema = z
   .string({ message: 'Enter a material name' })
@@ -14,10 +9,8 @@ const MaterialNameSchema = z
 const Reclassification_BaseSchema = z.object({
   classification: Reclassify_ClassificationEnum,
   materialId: z.number(),
-  documentType: z.coerce.number({
-    message: 'Choose a material classification type'
-  }),
-  used: z.boolean({ message: 'Choose a material status' })
+  documentType: z.coerce.number({ message: 'Choose a material classification type' }),
+  used: z.boolean({ message: 'Choose a material status' }),
 });
 
 const Reclassify_TypeStatementSchema = Reclassification_BaseSchema.extend({
@@ -25,7 +18,7 @@ const Reclassify_TypeStatementSchema = Reclassification_BaseSchema.extend({
   hasStatementDate: z.boolean({ message: 'Select if statement has a date' }),
   statementDate: z.coerce.date().optional(),
   statementNumber: z.coerce.number({ message: 'Enter a statement number' }),
-  witnessId: z.coerce.number({ message: 'Choose a witness' })
+  witnessId: z.coerce.number({ message: 'Choose a witness' }),
 });
 
 const Reclassify_TypeExhibitSchema = Reclassification_BaseSchema.extend({
@@ -36,21 +29,21 @@ const Reclassify_TypeExhibitSchema = Reclassification_BaseSchema.extend({
     .min(1, 'Enter the exhibit reference number'),
   producedBy: z.string({ message: 'Enter produced by' }).optional(),
   producerId: z.coerce.number().optional(),
-  subject: z.string({ message: 'Enter the exhibit name (subject)' })
+  subject: z.string({ message: 'Enter the exhibit name (subject)' }),
 });
 
 const Reclassify_TypeMGFormSchema = Reclassification_BaseSchema.extend({
   classification: z.literal(Reclassify_ClassificationEnum.enum['MG Form']),
-  subject: MaterialNameSchema
+  subject: MaterialNameSchema,
 });
 
 const Reclassify_TypeOtherSchema = Reclassification_BaseSchema.extend({
   classification: z.literal(Reclassify_ClassificationEnum.enum.OTHER),
-  subject: MaterialNameSchema
+  subject: MaterialNameSchema,
 });
 
 export const Reclassify_RequestTypeEnum = z.enum(['KWD', 'NKWD'], {
-  message: 'Choose what you want to request'
+  message: 'Choose what you want to request',
 });
 
 export const Reclassify_WitnessAndActionPlanSchema = z
@@ -61,15 +54,11 @@ export const Reclassify_WitnessAndActionPlanSchema = z
       .string({ message: 'Enter the contested issue' })
       .min(1, { message: 'Enter the contested issue' }),
     requestType: Reclassify_RequestTypeEnum,
-    defendantId: z.coerce.number({
-      message: 'Select a defendant the action plan relates to'
-    }),
+    defendantId: z.coerce.number({ message: 'Select a defendant the action plan relates to' }),
     actionPlan: z
       .string({ message: 'Enter the action plan description' })
       .min(1, { message: 'Enter the action plan description' })
-      .max(2000, {
-        message: 'The action plan cannot be more than 2000 characters'
-      }),
+      .max(2000, { message: 'The action plan cannot be more than 2000 characters' }),
     dateNeeded: z
       .string({ message: 'Enter a valid date in the future' })
       .nonempty({ message: 'Enter a valid date in the future' })
@@ -84,7 +73,7 @@ export const Reclassify_WitnessAndActionPlanSchema = z
 
           return inputDate >= today;
         },
-        { message: 'Enter a valid date in the future' }
+        { message: 'Enter a valid date in the future' },
       )
       .transform((val) => new Date(val)),
     followUp: z.boolean({ message: 'Select if you want to add a follow up' }),
@@ -102,43 +91,32 @@ export const Reclassify_WitnessAndActionPlanSchema = z
 
           return inputDate >= today;
         },
-        { message: 'Enter a valid date in the future' }
+        { message: 'Enter a valid date in the future' },
       )
       .transform((val) => new Date(val))
-      .optional()
+      .optional(),
   })
   .superRefine((data, ctx) => {
-    if (
-      data?.followUp &&
-      (!data.followUpDate || isNaN(data.followUpDate.getTime()))
-    ) {
+    if (data?.followUp && (!data.followUpDate || isNaN(data.followUpDate.getTime()))) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: 'Enter the follow up date',
-        path: ['followUpDate']
+        path: ['followUpDate'],
       });
     }
 
     if (data?.followUp && data.followUpDate) {
       const input = data.followUpDate;
 
-      const inputDate = new Date(
-        input.getFullYear(),
-        input.getMonth(),
-        input.getDate()
-      );
+      const inputDate = new Date(input.getFullYear(), input.getMonth(), input.getDate());
       const today = new Date();
-      const todayDate = new Date(
-        today.getFullYear(),
-        today.getMonth(),
-        today.getDate()
-      );
+      const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
 
       if (inputDate < todayDate) {
         ctx.addIssue({
           path: ['followUpDate'],
           code: z.ZodIssueCode.custom,
-          message: 'Follow up date must be today or in the future'
+          message: 'Follow up date must be today or in the future',
         });
       }
     }
@@ -149,7 +127,7 @@ export const Reclassify_ClassificationFormSchema = z
     Reclassify_TypeStatementSchema,
     Reclassify_TypeExhibitSchema,
     Reclassify_TypeMGFormSchema,
-    Reclassify_TypeOtherSchema
+    Reclassify_TypeOtherSchema,
   ])
   .superRefine((data, ctx) => {
     if (data.classification === 'STATEMENT') {
@@ -162,7 +140,7 @@ export const Reclassify_ClassificationFormSchema = z
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: 'Enter the statement date',
-            path: ['statementDate']
+            path: ['statementDate'],
           });
           return;
         }
@@ -178,34 +156,28 @@ export const Reclassify_ClassificationFormSchema = z
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: 'Date cannot be in the future',
-            path: ['statementDate']
+            path: ['statementDate'],
           });
         }
       }
     }
   });
 
-export const Reclassify_MaterialNameFormSchema = z.object({
-  subject: MaterialNameSchema
-});
+export const Reclassify_MaterialNameFormSchema = z.object({ subject: MaterialNameSchema });
 
-export type Reclassify_ClassificationForm = z.infer<
-  typeof Reclassify_ClassificationFormSchema
->;
+export type Reclassify_ClassificationForm = z.infer<typeof Reclassify_ClassificationFormSchema>;
 export type Reclassify_WitnessAndActionPlanType = z.infer<
   typeof Reclassify_WitnessAndActionPlanSchema
 >;
 
-export type Reclassify_MaterialNameFormType = z.infer<
-  typeof Reclassify_MaterialNameFormSchema
->;
+export type Reclassify_MaterialNameFormType = z.infer<typeof Reclassify_MaterialNameFormSchema>;
 
 export const Reclassify_Request_Other_Schema = z.object({
   classification: z.literal('OTHER'),
   documentTypeId: z.number(),
   materialId: z.number(),
   subject: z.string(),
-  used: z.boolean().default(true)
+  used: z.boolean().default(true),
 });
 
 export const Reclassify_Request_MGForm_Schema = z.object({
@@ -213,7 +185,7 @@ export const Reclassify_Request_MGForm_Schema = z.object({
   documentTypeId: z.number(),
   materialId: z.number(),
   subject: z.string(),
-  used: z.boolean().default(true)
+  used: z.boolean().default(true),
 });
 
 export const Reclassify_Request_Exhibit_Schema = z.object({
@@ -225,10 +197,10 @@ export const Reclassify_Request_Exhibit_Schema = z.object({
     reference: z.string(),
     existingproducerOrWitnessId: z.number().optional(),
     Producer: z.string().optional(),
-    newProducer: z.string().optional()
+    newProducer: z.string().optional(),
   }),
   subject: z.string(),
-  used: z.boolean().default(true)
+  used: z.boolean().default(true),
 });
 
 export const Reclassify_Request_Statement_Schema = z.object({
@@ -240,12 +212,12 @@ export const Reclassify_Request_Statement_Schema = z.object({
   statement: z.object({
     date: z.string().optional(),
     statementNo: z.coerce.number(),
-    witness: z.coerce.number()
-  })
+    witness: z.coerce.number(),
+  }),
 });
 
 export const Reclassify_Response_Schema = z.object({
-  reclassifyCommunication: z.object({ id: z.number() })
+  reclassifyCommunication: z.object({ id: z.number() }),
 });
 
 export const ActionPlanStepSchema = z.object({
@@ -253,7 +225,7 @@ export const ActionPlanStepSchema = z.object({
   description: z.string(),
   text: z.string(),
   hidden: z.boolean().default(false),
-  hiddenDraft: z.boolean().default(false)
+  hiddenDraft: z.boolean().default(false),
 });
 
 export const Reclassify_Orchestrated_Request_Schema = z.object({
@@ -263,18 +235,16 @@ export const Reclassify_Orchestrated_Request_Schema = z.object({
     documentTypeId: z.number(),
     subject: z.string(),
     used: z.boolean(),
-    statement: z
-      .object({ statementNo: z.number(), date: z.string().optional() })
-      .optional(),
+    statement: z.object({ statementNo: z.number(), date: z.string().optional() }).optional(),
     exhibit: z
       .object({
         item: z.string(),
         reference: z.string().default(''),
         existingproducerOrWitnessId: z.number().optional(),
         Producer: z.string().optional(),
-        newProducer: z.string().optional()
+        newProducer: z.string().optional(),
       })
-      .optional()
+      .optional(),
   }),
   actionPlan: z
     .object({
@@ -288,15 +258,15 @@ export const Reclassify_Orchestrated_Request_Schema = z.object({
       actionPointText: z.string(),
       statusDescription: z.string(),
       createdByOrganisation: z.literal('CPS'),
-      steps: z.array(ActionPlanStepSchema)
+      steps: z.array(ActionPlanStepSchema),
     })
     .optional(),
   witness: z
     .union([
       z.object({ witnessId: z.number() }),
-      z.object({ firstName: z.string(), surname: z.string() })
+      z.object({ firstName: z.string(), surname: z.string() }),
     ])
-    .optional()
+    .optional(),
 });
 
 const Reclassify_Orchestrated_Result_Schema = z
@@ -304,9 +274,7 @@ const Reclassify_Orchestrated_Result_Schema = z
     success: z.boolean(),
     operationName: z.string(),
     errorMessage: z.string(),
-    resultData: z
-      .object({ reclassifyCommunication: z.object({ id: z.number() }) })
-      .nullable()
+    resultData: z.object({ reclassifyCommunication: z.object({ id: z.number() }) }).nullable(),
   })
   .nullable();
 
@@ -321,42 +289,22 @@ export const Reclassify_Orchestrated_Response_Schema = z.object({
   witnessResult: Reclassify_Orchestrated_Result_Schema,
   errors: z.array(z.string()),
   warnings: z.unknown(),
-  contentType: z.literal('application/json')
+  contentType: z.literal('application/json'),
 });
 
-export type Reclassify_Request_Other_Type = z.infer<
-  typeof Reclassify_Request_Other_Schema
->;
-export type Reclassify_Request_MGForm_Type = z.infer<
-  typeof Reclassify_Request_MGForm_Schema
->;
-export type Reclassify_Request_Exhibit_Type = z.infer<
-  typeof Reclassify_Request_Exhibit_Schema
->;
-export type Reclassify_Request_Statement_Type = z.infer<
-  typeof Reclassify_Request_Statement_Schema
->;
-export type Reclassify_Response_Type = z.infer<
-  typeof Reclassify_Response_Schema
->;
+export type Reclassify_Request_Other_Type = z.infer<typeof Reclassify_Request_Other_Schema>;
+export type Reclassify_Request_MGForm_Type = z.infer<typeof Reclassify_Request_MGForm_Schema>;
+export type Reclassify_Request_Exhibit_Type = z.infer<typeof Reclassify_Request_Exhibit_Schema>;
+export type Reclassify_Request_Statement_Type = z.infer<typeof Reclassify_Request_Statement_Schema>;
+export type Reclassify_Response_Type = z.infer<typeof Reclassify_Response_Schema>;
 
-export type Reclassify_ClassificationEnumType = z.infer<
-  typeof Reclassify_ClassificationEnum
->;
+export type Reclassify_ClassificationEnumType = z.infer<typeof Reclassify_ClassificationEnum>;
 
-export type Reclassify_TypeStatementType = z.infer<
-  typeof Reclassify_TypeStatementSchema
->;
+export type Reclassify_TypeStatementType = z.infer<typeof Reclassify_TypeStatementSchema>;
 
-export type Reclassify_TypeExhibitType = z.infer<
-  typeof Reclassify_TypeExhibitSchema
->;
-export type Reclassify_TypeMGFormType = z.infer<
-  typeof Reclassify_TypeMGFormSchema
->;
-export type Reclassify_TypeOtherType = z.infer<
-  typeof Reclassify_TypeOtherSchema
->;
+export type Reclassify_TypeExhibitType = z.infer<typeof Reclassify_TypeExhibitSchema>;
+export type Reclassify_TypeMGFormType = z.infer<typeof Reclassify_TypeMGFormSchema>;
+export type Reclassify_TypeOtherType = z.infer<typeof Reclassify_TypeOtherSchema>;
 
 export type Reclassify_RequestType = z.infer<typeof Reclassify_RequestTypeEnum>;
 
diff --git a/materials_ui/src/schemas/index.ts b/materials_ui/src/schemas/index.ts
index 683e3772..d7a16b5d 100644
--- a/materials_ui/src/schemas/index.ts
+++ b/materials_ui/src/schemas/index.ts
@@ -5,6 +5,6 @@ export type { CaseInfoType } from './caseinfo';
 export type {
   CaseMaterialDataType,
   CaseMaterialsResponseType,
-  CaseMaterialsType
+  CaseMaterialsType,
 } from './caseMaterials';
 export type { StatusTag } from './statusTags';
diff --git a/materials_ui/src/schemas/pcd.ts b/materials_ui/src/schemas/pcd.ts
index c38d82e1..a6f4da66 100644
--- a/materials_ui/src/schemas/pcd.ts
+++ b/materials_ui/src/schemas/pcd.ts
@@ -4,26 +4,23 @@ export const PCDListingSchema = z.object({
   id: z.number(),
   type: z.string(),
   decisionRequiredBy: z.string(),
-  decisionRequested: z.string()
+  decisionRequested: z.string(),
 });
 
 export const PCDCaseOutlineSchema = z.object({
   heading: z.string(),
   text: z.string(),
-  textWithCmsMarkup: z.string()
+  textWithCmsMarkup: z.string(),
 });
 
 export const PCDPoliceContactSchema = z.object({
   role: z.string(),
   rank: z.string(),
   name: z.string(),
-  number: z.string()
+  number: z.string(),
 });
 
-export const PCDMaterialSchema = z.object({
-  subject: z.string(),
-  date: z.string()
-});
+export const PCDMaterialSchema = z.object({ subject: z.string(), date: z.string() });
 
 export const PCDSuspect = z.object({
   surname: z.string(),
@@ -38,9 +35,9 @@ export const PCDSuspect = z.object({
       earlyDate: z.string(),
       lateDate: z.string(),
       location: z.string(),
-      category: z.string()
-    })
-  )
+      category: z.string(),
+    }),
+  ),
 });
 
 export const PCDDetailsSchema = z.object({
@@ -52,7 +49,7 @@ export const PCDDetailsSchema = z.object({
   comments: z.object({ text: z.string(), textWithCmsMarkup: z.string() }),
   suspects: z.array(PCDSuspect),
   policeContactDetails: z.array(PCDPoliceContactSchema),
-  materialProvided: z.array(PCDMaterialSchema)
+  materialProvided: z.array(PCDMaterialSchema),
 });
 
 export const PCDListingResponseSchema = z.array(PCDListingSchema);
diff --git a/materials_ui/src/schemas/pcdReview.ts b/materials_ui/src/schemas/pcdReview.ts
index 9790df0a..8160df51 100644
--- a/materials_ui/src/schemas/pcdReview.ts
+++ b/materials_ui/src/schemas/pcdReview.ts
@@ -5,7 +5,7 @@ import { PcdReviewCoreType } from '../constants/enum';
 const PcdReviewCoreTypeSchema = z.union([
   z.literal(PcdReviewCoreType.EarlyAdvice),
   z.literal(PcdReviewCoreType.InitialReview),
-  z.literal(PcdReviewCoreType.PreChargeDecisionAnalysis)
+  z.literal(PcdReviewCoreType.PreChargeDecisionAnalysis),
 ]);
 
 const nullableString = z.string().nullable();
@@ -16,16 +16,11 @@ const CurrentEventSchema = z.object({
   name: z.string(),
   date: z.string(),
   authorOrVenue: z.string(),
-  type: z.number()
+  type: z.number(),
 });
 
 const NextEventLinkSchema = z.array(
-  z.object({
-    id: z.number(),
-    href: z.string(),
-    rel: z.string(),
-    type: z.string()
-  })
+  z.object({ id: z.number(), href: z.string(), rel: z.string(), type: z.string() }),
 );
 
 const MonitoringCodesSchema = z.array(
@@ -34,8 +29,8 @@ const MonitoringCodesSchema = z.array(
     description: z.string(),
     type: nullableNumber,
     disabled: z.boolean(),
-    isAssigned: z.boolean()
-  })
+    isAssigned: z.boolean(),
+  }),
 );
 
 const DgAssessmentItemsSchema = z.array(
@@ -43,8 +38,8 @@ const DgAssessmentItemsSchema = z.array(
     itemName: nullableString,
     title: nullableString,
     description: nullableString,
-    comment: nullableString
-  })
+    comment: nullableString,
+  }),
 );
 
 const DgDetailsSchema = z.object({
@@ -54,7 +49,7 @@ const DgDetailsSchema = z.object({
   policeResponse: nullableString,
   principalOffenceCategory: nullableString,
   stageAssessmentCompleted: nullableString,
-  submissionDgCompliant: nullableString
+  submissionDgCompliant: nullableString,
 });
 
 const PCDInitialReviewSchema = z.object({
@@ -79,7 +74,7 @@ const PCDInitialReviewSchema = z.object({
   publicInterestAssessment: nullableString,
   reviewSummary: nullableString,
   trialStrategy: z.string(),
-  witnessOrVictimInformationAndActions: nullableString
+  witnessOrVictimInformationAndActions: nullableString,
 });
 
 const DefendantDecisionSchema = z.object({
@@ -95,7 +90,7 @@ const DefendantDecisionSchema = z.object({
   reason: z.string(),
   reasonCode: z.string(),
   returnBailDate: nullableString,
-  specifiedCharges: nullableString
+  specifiedCharges: nullableString,
 });
 
 const DefendantDecisionsSchema = z.array(DefendantDecisionSchema);
@@ -109,8 +104,8 @@ const PCDHistoryActionPlanSchema = z.array(
     entryDate: z.string(),
     policeCovidUrgency: nullableString,
     status: z.string(),
-    suspect: z.string()
-  })
+    suspect: z.string(),
+  }),
 );
 
 const PCDReviewSchema = z.object({
@@ -132,53 +127,42 @@ const PCDReviewSchema = z.object({
   nextEventLink: NextEventLinkSchema,
   pcdHistoryActionPlan: PCDHistoryActionPlanSchema,
   policeCovidUrgency: nullableString,
-  urn: nullableString
+  urn: nullableString,
 });
 
 export const PCDReviewCoreSchema = z.array(
-  z.object({
-    date: z.string(),
-    id: z.coerce.number(),
-    type: PcdReviewCoreTypeSchema
-  })
+  z.object({ date: z.string(), id: z.coerce.number(), type: PcdReviewCoreTypeSchema }),
 );
 
-const ChargeDetailSchema = z.object({
-  code: z.string(),
-  description: z.string()
-});
+const ChargeDetailSchema = z.object({ code: z.string(), description: z.string() });
 
 const PreChargeDefendantDecisionSchema = DefendantDecisionSchema.extend({
-  chargeDetails: z.array(ChargeDetailSchema)
+  chargeDetails: z.array(ChargeDetailSchema),
 });
 
 const LinkedCaseUrnSchema = z.object({
   urn: z.string(),
   asn: z.string(),
   pncId: nullableString,
-  policeCC: nullableString
+  policeCC: nullableString,
 });
 
 const PreChargeDecisionAnalysisOutcomeSchema = PCDInitialReviewSchema.extend({
   dppConsent: nullableString,
-  linkedCaseUrns: z.array(LinkedCaseUrnSchema)
+  linkedCaseUrns: z.array(LinkedCaseUrnSchema),
 });
 
 const PreChargeDecisionOutcomeDetailSchema = PCDReviewSchema.extend({
-  defendantDecisions: z.array(PreChargeDefendantDecisionSchema)
+  defendantDecisions: z.array(PreChargeDefendantDecisionSchema),
 });
 
 export const PCDReviewDetailsSchema = z.object({
   preChargeDecisionAnalysisOutcome: PreChargeDecisionAnalysisOutcomeSchema,
-  preChargeDecisionOutcome: PreChargeDecisionOutcomeDetailSchema
+  preChargeDecisionOutcome: PreChargeDecisionOutcomeDetailSchema,
 });
 
-export type PCDInitialReviewResponseType = z.infer<
-  typeof PCDInitialReviewSchema
->;
+export type PCDInitialReviewResponseType = z.infer<typeof PCDInitialReviewSchema>;
 export type PCDReviewResponseType = z.infer<typeof PCDReviewSchema>;
 export type CaseHistoryResponseType = z.infer<typeof CurrentEventSchema>;
 export type PCDReviewCoreResponseType = z.infer<typeof PCDReviewCoreSchema>;
-export type PCDReviewDetailsResponseType = z.infer<
-  typeof PCDReviewDetailsSchema
->;
+export type PCDReviewDetailsResponseType = z.infer<typeof PCDReviewDetailsSchema>;
diff --git a/materials_ui/src/schemas/polaris/caseinfo.ts b/materials_ui/src/schemas/polaris/caseinfo.ts
index c4318bc8..cbecca02 100644
--- a/materials_ui/src/schemas/polaris/caseinfo.ts
+++ b/materials_ui/src/schemas/polaris/caseinfo.ts
@@ -1,15 +1,12 @@
 import { z } from 'zod';
 
-export const LeadDefendantDetailsSchema = z.object({
-  firstNames: z.string(),
-  surname: z.string()
-});
+export const LeadDefendantDetailsSchema = z.object({ firstNames: z.string(), surname: z.string() });
 
 export const CaseInfoSchema = z.strictObject({
   id: z.number(),
   uniqueReferenceNumber: z.string(),
   leadDefendantDetails: LeadDefendantDetailsSchema,
-  numberOfDefendants: z.number()
+  numberOfDefendants: z.number(),
 });
 
 export const CaseInfoRequestSchema = z.null();
diff --git a/materials_ui/src/schemas/witness.ts b/materials_ui/src/schemas/witness.ts
index 6271ba71..190aa310 100644
--- a/materials_ui/src/schemas/witness.ts
+++ b/materials_ui/src/schemas/witness.ts
@@ -4,41 +4,27 @@ export const WitnessListItemSchema = z.object({
   caseId: z.number(),
   firstName: z.string(),
   surname: z.string(),
-  witnessId: z.number()
+  witnessId: z.number(),
 });
 
 export const WitnessListSchema = z.array(WitnessListItemSchema);
 
-export const WitnessListResponseSchema = z.object({
-  witnesses: WitnessListSchema
-});
+export const WitnessListResponseSchema = z.object({ witnesses: WitnessListSchema });
 
-export const WitnessStatementSchema = z.object({
-  id: z.number(),
-  title: z.number()
-});
+export const WitnessStatementSchema = z.object({ id: z.number(), title: z.number() });
 
 export const WitnessStatementResponseSchema = z.object({
-  statementsForWitness: z.array(WitnessStatementSchema)
+  statementsForWitness: z.array(WitnessStatementSchema),
 });
 
-export const CreateWitnessRequestSchema = z.object({
-  FirstName: z.string(),
-  Surname: z.string()
-});
+export const CreateWitnessRequestSchema = z.object({ FirstName: z.string(), Surname: z.string() });
 
 export const CreateWitnessResponseSchema = z.number();
 
 export type WitnessListItemType = z.infer<typeof WitnessListItemSchema>;
 export type WitnessListResponseType = z.infer<typeof WitnessListResponseSchema>;
-export type WitnessStatementResponseType = z.infer<
-  typeof WitnessStatementResponseSchema
->;
+export type WitnessStatementResponseType = z.infer<typeof WitnessStatementResponseSchema>;
 export type WitnessStatementType = z.infer<typeof WitnessStatementSchema>;
 
-export type CreateWitnessResponseType = z.infer<
-  typeof CreateWitnessResponseSchema
->;
-export type CreateWitnessRequestType = z.infer<
-  typeof CreateWitnessRequestSchema
->;
+export type CreateWitnessResponseType = z.infer<typeof CreateWitnessResponseSchema>;
+export type CreateWitnessRequestType = z.infer<typeof CreateWitnessRequestSchema>;
diff --git a/materials_ui/src/setupTests.ts b/materials_ui/src/setupTests.ts
index a8babeca..ae0e7ab9 100644
--- a/materials_ui/src/setupTests.ts
+++ b/materials_ui/src/setupTests.ts
@@ -5,6 +5,4 @@ import { expect } from 'vitest';
 expect.extend(matchers);
 
 // Mock import.meta if needed
-Object.defineProperty(global, 'import.meta', {
-  value: { env: { MODE: 'test' } }
-});
+Object.defineProperty(global, 'import.meta', { value: { env: { MODE: 'test' } } });
diff --git a/materials_ui/src/stores/useCaseInfo.ts b/materials_ui/src/stores/useCaseInfo.ts
index e7f9362a..cbb40338 100644
--- a/materials_ui/src/stores/useCaseInfo.ts
+++ b/materials_ui/src/stores/useCaseInfo.ts
@@ -19,5 +19,5 @@ export const useCaseInfoStore = create<CaseStore>((set) => ({
 
   setIsLoading: (isLoading) => set(() => ({ isLoading })),
 
-  clearCaseInfo: () => set(() => ({ caseInfo: null }))
+  clearCaseInfo: () => set(() => ({ caseInfo: null })),
 }));
diff --git a/materials_ui/src/stores/useMaterialTags.ts b/materials_ui/src/stores/useMaterialTags.ts
index e0e3f5fd..e63ca509 100644
--- a/materials_ui/src/stores/useMaterialTags.ts
+++ b/materials_ui/src/stores/useMaterialTags.ts
@@ -18,7 +18,7 @@ export const useMaterialTags = create<MaterialTagsStore>((set) => ({
 
       newMaterialTags.forEach((newTag) => {
         const existingIndex = updatedMaterialTags.findIndex(
-          (item) => item.materialId === newTag.materialId
+          (item) => item.materialId === newTag.materialId,
         );
 
         if (existingIndex === -1) {
@@ -35,9 +35,7 @@ export const useMaterialTags = create<MaterialTagsStore>((set) => ({
     set((state) => ({
       materialTags:
         materialIdsToRemove && materialIdsToRemove.length > 0
-          ? state.materialTags.filter(
-              (item) => !materialIdsToRemove.includes(item.materialId)
-            )
-          : []
-    }))
+          ? state.materialTags.filter((item) => !materialIdsToRemove.includes(item.materialId))
+          : [],
+    })),
 }));
diff --git a/materials_ui/src/stores/useSelectedItems.ts b/materials_ui/src/stores/useSelectedItems.ts
index 4448dffc..a71e0563 100644
--- a/materials_ui/src/stores/useSelectedItems.ts
+++ b/materials_ui/src/stores/useSelectedItems.ts
@@ -16,10 +16,7 @@ type SelectedItemsStore = {
   clear: (type?: SelectedItemKeys) => void;
 };
 
-const defaultState: SelectedItemsDefaultState = {
-  communications: [],
-  materials: []
-};
+const defaultState: SelectedItemsDefaultState = { communications: [], materials: [] };
 
 export const useSelectedItemsStore = create<SelectedItemsStore>((set) => ({
   items: { ...defaultState },
@@ -29,12 +26,7 @@ export const useSelectedItemsStore = create<SelectedItemsStore>((set) => ({
       const stateIds = state.items[type].map((item) => item.id);
       const dedupedState = items.filter((item) => !stateIds.includes(item.id));
 
-      return {
-        items: {
-          ...state.items,
-          [type]: [...(state.items[type] ?? []), ...dedupedState]
-        }
-      };
+      return { items: { ...state.items, [type]: [...(state.items[type] ?? []), ...dedupedState] } };
     });
   },
 
@@ -45,8 +37,8 @@ export const useSelectedItemsStore = create<SelectedItemsStore>((set) => ({
       return {
         items: {
           ...state.items,
-          [type]: state.items[type].filter((item) => !idsToRemove.has(item.id))
-        }
+          [type]: state.items[type].filter((item) => !idsToRemove.has(item.id)),
+        },
       };
     }),
 
@@ -56,5 +48,5 @@ export const useSelectedItemsStore = create<SelectedItemsStore>((set) => ({
     } else {
       set(() => ({ items: { ...defaultState } }));
     }
-  }
+  },
 }));
diff --git a/materials_ui/src/styles/_accessibility.scss b/materials_ui/src/styles/_accessibility.scss
index 20b6a826..7bd673c8 100644
--- a/materials_ui/src/styles/_accessibility.scss
+++ b/materials_ui/src/styles/_accessibility.scss
@@ -3,4 +3,3 @@
     @content;
   }
 }
-
diff --git a/materials_ui/src/telemetry/appInsights.ts b/materials_ui/src/telemetry/appInsights.ts
index aeced5cc..7af330a0 100644
--- a/materials_ui/src/telemetry/appInsights.ts
+++ b/materials_ui/src/telemetry/appInsights.ts
@@ -1,10 +1,6 @@
-import {
-  ApplicationInsights,
-  ICustomProperties
-} from '@microsoft/applicationinsights-web';
+import { ApplicationInsights, ICustomProperties } from '@microsoft/applicationinsights-web';
 
-const connectionString = import.meta.env
-  .VITE_APPLICATIONINSIGHTS_CONNECTION_STRING;
+const connectionString = import.meta.env.VITE_APPLICATIONINSIGHTS_CONNECTION_STRING;
 const cloudRole = import.meta.env.VITE_APPLICATIONINSIGHTS_CLOUD_ROLE;
 const samplingPercentage =
   Number(import.meta.env.VITE_APPLICATIONINSIGHTS_SAMPLING_PERCENTAGE) || 20;
@@ -23,9 +19,7 @@ const CASE_URN_AND_ID = /^\/[^/]+\/[^/]+/; // leading /<urn>/<caseId>
 const NUMERIC_ID_SEGMENT = /\/\d+/g; // any /<number> segment
 
 const stripCaseIdsFromRoute = (path: string): string =>
-  path
-    .replace(CASE_URN_AND_ID, '/:urn/:caseId')
-    .replace(NUMERIC_ID_SEGMENT, '/:id');
+  path.replace(CASE_URN_AND_ID, '/:urn/:caseId').replace(NUMERIC_ID_SEGMENT, '/:id');
 
 export const initTelemetry = () => {
   if (appInsights || !connectionString) return;
@@ -35,8 +29,8 @@ export const initTelemetry = () => {
       connectionString,
       enableAutoRouteTracking: false,
       enableUnhandledPromiseRejectionTracking: true,
-      autoTrackPageVisitTime: true
-    }
+      autoTrackPageVisitTime: true,
+    },
   });
   appInsights.loadAppInsights();
 
@@ -82,14 +76,8 @@ export const trackAction = (action: string, properties?: ICustomProperties) =>
 export const trackEvent = (name: string, properties?: ICustomProperties) =>
   appInsights?.trackEvent({ name }, properties);
 
-export const trackException = (
-  error: unknown,
-  properties?: ICustomProperties
-) =>
+export const trackException = (error: unknown, properties?: ICustomProperties) =>
   appInsights?.trackException({ exception: normaliseError(error) }, properties);
 
-export const trackMetric = (
-  name: string,
-  average: number,
-  properties?: ICustomProperties
-) => appInsights?.trackMetric({ name, average }, properties);
+export const trackMetric = (name: string, average: number, properties?: ICustomProperties) =>
+  appInsights?.trackMetric({ name, average }, properties);
diff --git a/materials_ui/src/utils/cmsStringTransform.ts b/materials_ui/src/utils/cmsStringTransform.ts
index 9b1fb22c..d0f1b93e 100644
--- a/materials_ui/src/utils/cmsStringTransform.ts
+++ b/materials_ui/src/utils/cmsStringTransform.ts
@@ -1,2 +1 @@
-export const stripCmsPrefix = (str: string) =>
-  str.startsWith('CMS-') ? str.slice(4) : str;
+export const stripCmsPrefix = (str: string) => (str.startsWith('CMS-') ? str.slice(4) : str);
diff --git a/materials_ui/src/utils/date.ts b/materials_ui/src/utils/date.ts
index aaf83d9c..410d560e 100644
--- a/materials_ui/src/utils/date.ts
+++ b/materials_ui/src/utils/date.ts
@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 export const formatDate = (
   dateStr?: string | Date,
   separator: string = '/',
-  expectedFormat?: string
+  expectedFormat?: string,
 ): string => {
   if (!dateStr) return '-';
 
@@ -22,9 +22,5 @@ export const formatDateInputValue = (dateStr?: string | Date) => {
 
 export const formatDateLong = (d?: string | null) =>
   d
-    ? new Date(d).toLocaleDateString('en-GB', {
-        day: '2-digit',
-        month: 'long',
-        year: 'numeric'
-      })
+    ? new Date(d).toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' })
     : '';
diff --git a/materials_ui/src/utils/filtering.ts b/materials_ui/src/utils/filtering.ts
index 1582e1fb..662f83a9 100644
--- a/materials_ui/src/utils/filtering.ts
+++ b/materials_ui/src/utils/filtering.ts
@@ -1,7 +1,4 @@
-import {
-  FilterItem,
-  SortBy
-} from '../context/FiltersContext/helpers/types';
+import { FilterItem, SortBy } from '../context/FiltersContext/helpers/types';
 import { isObjectEmpty } from './object';
 
 export type ColumnSortFn<T> = (a: T, b: T, direction: SortBy) => number;
@@ -13,8 +10,8 @@ export type ColumnSortFn<T> = (a: T, b: T, direction: SortBy) => number;
 export const getSortFn = <T>(
   columns: { key: string; sortFn?: ColumnSortFn<T> }[],
   sort: FilterItem['sort'],
-  fallbackSortFn: (s: FilterItem['sort']) => (a: T, b: T) => number
-): (a: T, b: T) => number => {
+  fallbackSortFn: (s: FilterItem['sort']) => (a: T, b: T) => number,
+): ((a: T, b: T) => number) => {
   if (!sort?.column || !sort?.direction) {
     return fallbackSortFn(sort);
   }
@@ -37,11 +34,9 @@ export const defaultSortFn = <T>(sort: FilterItem['sort']) => {
     // @ts-expect-error need to figure out dynamic typing here
     const comparatorB = (b[sort?.column] || '').toLowerCase();
 
-    if (comparatorA < comparatorB)
-      return sort?.direction === 'ascending' ? -1 : 1;
+    if (comparatorA < comparatorB) return sort?.direction === 'ascending' ? -1 : 1;
 
-    if (comparatorA > comparatorB)
-      return sort?.direction === 'ascending' ? 1 : -1;
+    if (comparatorA > comparatorB) return sort?.direction === 'ascending' ? 1 : -1;
 
     return 0;
   };
@@ -73,8 +68,6 @@ export const defaultSearchFn = <T>(fieldName: string, searchTerm?: string) => {
     }
 
     // @ts-expect-error dynamic object index causing TS error
-    return (item[fieldName] as string)
-      ?.toLowerCase()
-      .includes(searchTerm?.toLowerCase() || '');
+    return (item[fieldName] as string)?.toLowerCase().includes(searchTerm?.toLowerCase() || '');
   };
 };
diff --git a/materials_ui/src/utils/reclassify.ts b/materials_ui/src/utils/reclassify.ts
index 077196eb..f4511dad 100644
--- a/materials_ui/src/utils/reclassify.ts
+++ b/materials_ui/src/utils/reclassify.ts
@@ -1,49 +1,41 @@
+import { BannerType, BannerTypeSchema } from '../schemas/banner';
 import {
+  Reclassify_ClassificationEnumType,
   Reclassify_Orchestrated_Response_Type,
-  Reclassify_ClassificationEnumType
 } from '../schemas/forms/reclassify';
-import { BannerType, BannerTypeSchema } from '../schemas/banner';
 
 export const getBannerData = (
   response: Reclassify_Orchestrated_Response_Type,
   classificationType: Reclassify_ClassificationEnumType,
-  isRenamed: boolean
+  isRenamed: boolean,
 ): BannerType[] => {
   const bannerTypes = BannerTypeSchema.enum;
 
   // STATEMENT HANDLING
   if (classificationType === 'STATEMENT') {
     if (response.status === 'Success') {
-      if (
-        response.witnessResult?.success &&
-        response.actionPlanResult?.success === false
-      ) {
+      if (response.witnessResult?.success && response.actionPlanResult?.success === false) {
         return [
           {
             type: 'success',
             header: 'Reclassification successful',
-            content: 'Material reclassified and witness added successfully.'
+            content: 'Material reclassified and witness added successfully.',
           },
           {
             type: 'error',
             header: 'Action plan creation failed',
-            content:
-              'Unable to reclassify material, add witness and send action plan.'
-          }
+            content: 'Unable to reclassify material, add witness and send action plan.',
+          },
         ];
       }
 
-      if (
-        response.witnessResult?.success &&
-        response.actionPlanResult?.success
-      ) {
+      if (response.witnessResult?.success && response.actionPlanResult?.success) {
         return [
           {
             type: bannerTypes.success,
             header: 'Reclassification successful',
-            content:
-              'Material reclassified, witness added and action plan sent successfully.'
-          }
+            content: 'Material reclassified, witness added and action plan sent successfully.',
+          },
         ];
       }
 
@@ -51,8 +43,8 @@ export const getBannerData = (
         {
           type: bannerTypes.success,
           header: 'Reclassification successful',
-          content: 'Material reclassified successfully.'
-        }
+          content: 'Material reclassified successfully.',
+        },
       ];
     } else if (response.status === 'PartialSuccess') {
       if (
@@ -63,13 +55,13 @@ export const getBannerData = (
           {
             type: 'success',
             header: 'Reclassification successful',
-            content: 'Material reclassified and witness added successfully.'
+            content: 'Material reclassified and witness added successfully.',
           },
           {
             type: 'error',
             header: 'Action plan creation failed',
-            content: 'Unable to send action plan.'
-          }
+            content: 'Unable to send action plan.',
+          },
         ];
       }
 
@@ -82,13 +74,13 @@ export const getBannerData = (
           {
             type: 'success',
             header: 'Action plan success',
-            content: 'Action plan sent successfully.'
+            content: 'Action plan sent successfully.',
           },
           {
             type: 'error',
             header: 'Reclassification failed',
-            content: 'Unable to reclassify material and add witness.'
-          }
+            content: 'Unable to reclassify material and add witness.',
+          },
         ];
       }
 
@@ -101,13 +93,13 @@ export const getBannerData = (
           {
             type: 'success',
             header: 'New witness and action plan success',
-            content: 'New witness added and action plan sent successfully.'
+            content: 'New witness added and action plan sent successfully.',
           },
           {
             type: 'error',
             header: 'Reclassification failed',
-            content: 'Unable to reclassify material.'
-          }
+            content: 'Unable to reclassify material.',
+          },
         ];
       }
 
@@ -121,9 +113,8 @@ export const getBannerData = (
           {
             type: bannerTypes.error,
             header: 'Reclassification failed',
-            content:
-              'Unable to reclassify material, add witness and send action plan.'
-          }
+            content: 'Unable to reclassify material, add witness and send action plan.',
+          },
         ];
       }
 
@@ -131,8 +122,8 @@ export const getBannerData = (
         {
           type: bannerTypes.error,
           header: 'Reclassification failed',
-          content: 'Unable to reclassify material.'
-        }
+          content: 'Unable to reclassify material.',
+        },
       ];
     }
   }
@@ -145,8 +136,8 @@ export const getBannerData = (
         {
           type: bannerTypes.success,
           header: 'Reclassification successful',
-          content: 'Material reclassified and renamed successfully.'
-        }
+          content: 'Material reclassified and renamed successfully.',
+        },
       ];
     }
 
@@ -154,8 +145,8 @@ export const getBannerData = (
       {
         type: bannerTypes.success,
         header: 'Reclassification successful',
-        content: 'Material reclassified successfully.'
-      }
+        content: 'Material reclassified successfully.',
+      },
     ];
   }
 
@@ -167,27 +158,27 @@ export const getBannerData = (
       banners.push({
         type: bannerTypes.success,
         header: 'Reclassification successful',
-        content: 'Material reclassified successfully.'
+        content: 'Material reclassified successfully.',
       });
 
       if (isRenamed && !response.renameMaterialResult?.success) {
         banners.push({
           type: bannerTypes.error,
           header: 'Rename failed',
-          content: 'Unable to rename material.'
+          content: 'Unable to rename material.',
         });
       }
     } else {
       banners.push({
         type: bannerTypes.error,
         header: 'Reclassification failed',
-        content: 'Unable to reclassify material.'
+        content: 'Unable to reclassify material.',
       });
       if (isRenamed) {
         banners.push({
           type: bannerTypes.success,
           header: 'Renamed successfully',
-          content: 'Material renamed successfully.'
+          content: 'Material renamed successfully.',
         });
       }
     }
@@ -196,10 +187,6 @@ export const getBannerData = (
   }
 
   return [
-    {
-      type: 'error',
-      header: 'Reclassification failed',
-      content: 'Unable to reclassify material.'
-    }
+    { type: 'error', header: 'Reclassification failed', content: 'Unable to reclassify material.' },
   ];
 };
diff --git a/materials_ui/src/utils/string.ts b/materials_ui/src/utils/string.ts
index fd2a660d..4829ef41 100644
--- a/materials_ui/src/utils/string.ts
+++ b/materials_ui/src/utils/string.ts
@@ -1,7 +1,4 @@
-export const replaceTokens = (
-  stringToReplace: string,
-  tokens: Record<string, string | number>
-) => {
+export const replaceTokens = (stringToReplace: string, tokens: Record<string, string | number>) => {
   let str = stringToReplace;
 
   Object.entries(tokens).map(([key, token]) => {
diff --git a/materials_ui/src/utils/url.ts b/materials_ui/src/utils/url.ts
index 396a8a9a..a2813484 100644
--- a/materials_ui/src/utils/url.ts
+++ b/materials_ui/src/utils/url.ts
@@ -1,9 +1,6 @@
 import { APP_DEFAULT_PAGE } from '../constants/url';
 
-export const isPathCurrentUrl = (
-  currentPath: string,
-  path: string = ''
-): boolean => {
+export const isPathCurrentUrl = (currentPath: string, path: string = ''): boolean => {
   if (!path) return false;
 
   if (currentPath === '/' && path === APP_DEFAULT_PAGE) {
@@ -24,12 +21,10 @@ export const isPathCurrentUrl = (
 export const isAllowedDomain = (url: string) => {
   const decodedUrl = decodeURIComponent(url);
   const domainToTest = decodedUrl.match(
-    /^(?:https?:)?(?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im
+    /^(?:https?:)?(?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im,
   )?.[1];
 
-  const domains: string[] = (
-    import.meta.env.VITE_ALLOWED_RETURN_DOMAINS || ''
-  ).split(',');
+  const domains: string[] = (import.meta.env.VITE_ALLOWED_RETURN_DOMAINS || '').split(',');
 
   if (!decodedUrl) return false;
 
diff --git a/materials_ui/tests/global-setup/global.setup.ts b/materials_ui/tests/global-setup/global.setup.ts
index ff530952..16fa7e7e 100644
--- a/materials_ui/tests/global-setup/global.setup.ts
+++ b/materials_ui/tests/global-setup/global.setup.ts
@@ -24,9 +24,7 @@ setup('setup cookie', async ({ browser }) => {
   await page.screenshot();
 
   const allCookies = await context.cookies();
-  const authCookie = allCookies.find(
-    (cookie) => cookie.name === 'Cms-Auth-Values'
-  );
+  const authCookie = allCookies.find((cookie) => cookie.name === 'Cms-Auth-Values');
 
   if (authCookie) {
     log('Cms-Auth-Value cookie found');
diff --git a/materials_ui/tests/helpers.ts b/materials_ui/tests/helpers.ts
index 25bab56b..81f40b3c 100644
--- a/materials_ui/tests/helpers.ts
+++ b/materials_ui/tests/helpers.ts
@@ -3,14 +3,10 @@ import { Page } from '@playwright/test';
 export async function mockRoute(page: Page, endpoint: string, data?: unknown) {
   console.log(`Mocking route for endpoint: ${endpoint}`);
   await page.route(`**${endpoint}`, (route) =>
-    route.fulfill({
-      contentType: 'application/json',
-      status: 200,
-      body: JSON.stringify(data)
-    })
+    route.fulfill({ contentType: 'application/json', status: 200, body: JSON.stringify(data) }),
   );
   console.log(
-    `Route mocked successfully for endpoint: ${endpoint} + data: ${JSON.stringify(data)}`
+    `Route mocked successfully for endpoint: ${endpoint} + data: ${JSON.stringify(data)}`,
   );
 }
 
@@ -19,7 +15,7 @@ export async function mockServerError(page: Page, endpoint: string) {
     route.fulfill({
       status: 401,
       contentType: 'application/json',
-      body: JSON.stringify({ message: 'Unauthorized' })
+      body: JSON.stringify({ message: 'Unauthorized' }),
     });
   });
 }
diff --git a/materials_ui/tests/mocks/mockCaseDetails.ts b/materials_ui/tests/mocks/mockCaseDetails.ts
index 4f44bd61..fc6ee388 100644
--- a/materials_ui/tests/mocks/mockCaseDetails.ts
+++ b/materials_ui/tests/mocks/mockCaseDetails.ts
@@ -16,21 +16,21 @@ const mockCaseDetails: CaseDetailsType = [
       dob: '01/01/1980',
       age: '',
       youth: false,
-      type: 'Person'
+      type: 'Person',
     },
     headlineCharge: {
       charge: 'FA97031\u00A0Theft',
       date: null,
       earlyDate: '2025-09-19',
       lateDate: '2025-09-22',
-      nextHearingDate: null
+      nextHearingDate: null,
     },
     defendants: [],
     witnesses: [],
-    preChargeDecisionRequests: []
-  }
+    preChargeDecisionRequests: [],
+  },
 ];
 
-export const mockCaseDetailsResponse = (
-  overwrite: Partial<CaseDetailsType[0]> = {}
-) => [{ ...mockCaseDetails[0], ...overwrite }];
+export const mockCaseDetailsResponse = (overwrite: Partial<CaseDetailsType[0]> = {}) => [
+  { ...mockCaseDetails[0], ...overwrite },
+];
diff --git a/materials_ui/tests/mocks/mockCaseMaterials.ts b/materials_ui/tests/mocks/mockCaseMaterials.ts
index d1199a4d..a3d35a5a 100644
--- a/materials_ui/tests/mocks/mockCaseMaterials.ts
+++ b/materials_ui/tests/mocks/mockCaseMaterials.ts
@@ -24,16 +24,13 @@ const material: CaseMaterialsType[] = [
     reference: 't1',
     item: 'test',
     existingproducerOrWitnessId: 0,
-    isReclassifiable: true
-  }
+    isReclassifiable: true,
+  },
 ];
 
 export const mockCaseMaterials = (overwrite?: Partial<CaseMaterialsType>) => {
   try {
-    return material.map((currentMaterial) => ({
-      ...currentMaterial,
-      ...overwrite
-    }));
+    return material.map((currentMaterial) => ({ ...currentMaterial, ...overwrite }));
   } catch (error) {
     console.error('Error in mockCaseMaterials:', error);
     throw error;
diff --git a/materials_ui/tests/mocks/mockDefendents.ts b/materials_ui/tests/mocks/mockDefendents.ts
index 541d657e..d404da27 100644
--- a/materials_ui/tests/mocks/mockDefendents.ts
+++ b/materials_ui/tests/mocks/mockDefendents.ts
@@ -28,8 +28,8 @@ const defendants: DefendantsResponseType = {
           disposedReason: 'FINALISED',
           lastHearingOutcome: null,
           custodyTimeLimit: null,
-          latestPleaDescription: '-'
-        }
+          latestPleaDescription: '-',
+        },
       ],
       charges: [],
       proposedCharges: [],
@@ -47,10 +47,10 @@ const defendants: DefendantsResponseType = {
         workPhoneNumber: null,
         preferredCorrespondenceLanguage: 'English',
         religion: 'NotProvided',
-        guardian: null
-      }
-    }
-  ]
+        guardian: null,
+      },
+    },
+  ],
 };
 
 export const mockDefendants = (overwrite?: Partial<DefendantsResponseType>) => {
diff --git a/materials_ui/tests/mocks/mockLockCase.ts b/materials_ui/tests/mocks/mockLockCase.ts
index 4380a305..f6eb382a 100644
--- a/materials_ui/tests/mocks/mockLockCase.ts
+++ b/materials_ui/tests/mocks/mockLockCase.ts
@@ -4,11 +4,9 @@ const lockCase: CaseLockStatusResponseType = {
   caseLockedMessage: 'null',
   isLocked: false,
   isLockedByCurrentUser: false,
-  lockedByUser: 'null'
+  lockedByUser: 'null',
 };
 
-export const mockLockCase = (
-  overwrite?: Partial<CaseLockStatusResponseType>
-) => {
+export const mockLockCase = (overwrite?: Partial<CaseLockStatusResponseType>) => {
   return { ...lockCase, ...overwrite };
 };
diff --git a/materials_ui/tests/mocks/mockOchestrationReclassify.ts b/materials_ui/tests/mocks/mockOchestrationReclassify.ts
index afd67dad..34b383ed 100644
--- a/materials_ui/tests/mocks/mockOchestrationReclassify.ts
+++ b/materials_ui/tests/mocks/mockOchestrationReclassify.ts
@@ -9,16 +9,16 @@ const mockOrchestratedResponse: Reclassify_Orchestrated_Response_Type = {
     success: true,
     operationName: 'ReclassifyCaseMaterial',
     errorMessage: '',
-    resultData: { reclassifyCommunication: { id: 8836399 } }
+    resultData: { reclassifyCommunication: { id: 8836399 } },
   },
   renameMaterialResult: null,
   actionPlanResult: null,
   witnessResult: null,
   errors: [''],
   warnings: null,
-  contentType: 'application/json'
+  contentType: 'application/json',
 };
 
 export const mockOchestration = (
-  overwrites: Partial<Reclassify_Orchestrated_Response_Type> = {}
+  overwrites: Partial<Reclassify_Orchestrated_Response_Type> = {},
 ) => ({ ...mockOrchestratedResponse, ...overwrites });
diff --git a/materials_ui/tests/mocks/mockWitness.ts b/materials_ui/tests/mocks/mockWitness.ts
index 19ce634d..61507767 100644
--- a/materials_ui/tests/mocks/mockWitness.ts
+++ b/materials_ui/tests/mocks/mockWitness.ts
@@ -1,15 +1,9 @@
 import { WitnessListResponseType } from '../../src/schemas/witness';
 
 const mockWitnesses: WitnessListResponseType = {
-  witnesses: [
-    {
-      caseId: 2167259,
-      witnessId: 2794967,
-      firstName: 'Test',
-      surname: 'Witness'
-    }
-  ]
+  witnesses: [{ caseId: 2167259, witnessId: 2794967, firstName: 'Test', surname: 'Witness' }],
 };
-export const mockWitness = (
-  overwrite: Partial<WitnessListResponseType> = {}
-) => ({ ...mockWitnesses, ...overwrite });
+export const mockWitness = (overwrite: Partial<WitnessListResponseType> = {}) => ({
+  ...mockWitnesses,
+  ...overwrite,
+});
diff --git a/materials_ui/tests/mocks/pcd/mockPcdCore.ts b/materials_ui/tests/mocks/pcd/mockPcdCore.ts
index b802745b..3cfb622b 100644
--- a/materials_ui/tests/mocks/pcd/mockPcdCore.ts
+++ b/materials_ui/tests/mocks/pcd/mockPcdCore.ts
@@ -4,45 +4,43 @@ const PcdCoreResponse: PCDListingResponseType = [
     id: 131403,
     type: 'Face-to-Face',
     decisionRequiredBy: '2021-06-28',
-    decisionRequested: '2000-01-01'
+    decisionRequested: '2000-01-01',
   },
   {
     id: 131404,
     type: 'Face-to-Face',
     decisionRequiredBy: '2021-10-26',
-    decisionRequested: '2021-10-19'
+    decisionRequested: '2021-10-19',
   },
   {
     id: 131405,
     type: 'Face-to-Face',
     decisionRequiredBy: '2021-12-21',
-    decisionRequested: '2021-12-14'
+    decisionRequested: '2021-12-14',
   },
   {
     id: 131582,
     type: 'Face-to-Face',
     decisionRequiredBy: '2022-02-01',
-    decisionRequested: '2022-01-25'
+    decisionRequested: '2022-01-25',
   },
   {
     id: 131694,
     type: 'Face-to-Face',
     decisionRequiredBy: '2022-02-15',
-    decisionRequested: '2022-02-08'
+    decisionRequested: '2022-02-08',
   },
   {
     id: 131809,
     type: 'Face-to-Face',
     decisionRequiredBy: '2022-02-15',
-    decisionRequested: '2022-02-21'
-  }
+    decisionRequested: '2022-02-21',
+  },
 ];
 
-export const mockPcdCoreResponse = (
-  overwrite?: Partial<PCDListingResponseType>
-) => {
+export const mockPcdCoreResponse = (overwrite?: Partial<PCDListingResponseType>) => {
   return PcdCoreResponse.map((currentPcdCoreResponse) => ({
     ...currentPcdCoreResponse,
-    ...overwrite
+    ...overwrite,
   }));
 };
diff --git a/materials_ui/tests/mocks/pcd/mockPcdRequest.ts b/materials_ui/tests/mocks/pcd/mockPcdRequest.ts
index 45848ae2..35a5ba3b 100644
--- a/materials_ui/tests/mocks/pcd/mockPcdRequest.ts
+++ b/materials_ui/tests/mocks/pcd/mockPcdRequest.ts
@@ -2,22 +2,14 @@ import { PCDDetailsResponseType } from '../../../src/schemas/pcd';
 
 const PcdRequestResponse: PCDDetailsResponseType = {
   caseOutline: [
-    {
-      heading: 'Summary of Key Evidence',
-      text: 'test test',
-      textWithCmsMarkup: 'test test'
-    },
+    { heading: 'Summary of Key Evidence', text: 'test test', textWithCmsMarkup: 'test test' },
     {
       heading: 'Defendant Interview',
       text: 'test test more information',
-      textWithCmsMarkup: 'test test more information'
+      textWithCmsMarkup: 'test test more information',
     },
-    {
-      heading: 'Fingerprint/Forensic/Drugs Evidence',
-      text: 'test',
-      textWithCmsMarkup: 'test'
-    },
-    { heading: 'Outstanding Work', text: 'test', textWithCmsMarkup: 'test' }
+    { heading: 'Fingerprint/Forensic/Drugs Evidence', text: 'test', textWithCmsMarkup: 'test' },
+    { heading: 'Outstanding Work', text: 'test', textWithCmsMarkup: 'test' },
   ],
   comments: { text: '.', textWithCmsMarkup: '.' },
   suspects: [
@@ -33,26 +25,23 @@ const PcdRequestResponse: PCDDetailsResponseType = {
           charge: 'FI68091\u00A0Trespass in a building with a firearm',
           earlyDate: '2020-02-28',
           lateDate: '',
-          location:
-            '13 High Street,\u00A0Birmingham,\u00A0West Midlands,\u00A0B23 6RG',
-          category: 'EW'
-        }
-      ]
-    }
+          location: '13 High Street,\u00A0Birmingham,\u00A0West Midlands,\u00A0B23 6RG',
+          category: 'EW',
+        },
+      ],
+    },
   ],
   policeContactDetails: [
     { role: 'Supervising', rank: '', name: 'Tufan Butuner', number: '9770' },
-    { role: 'Completing', rank: 'PS', name: 'James Chapman', number: '187' }
+    { role: 'Completing', rank: 'PS', name: 'James Chapman', number: '187' },
   ],
   materialProvided: [],
   id: 131721,
   type: 'Telephone',
   decisionRequiredBy: '2021-02-02',
-  decisionRequested: '2022-02-09'
+  decisionRequested: '2022-02-09',
 };
 
-export const mockPcdRequestResponse = (
-  overwrite?: Partial<PCDDetailsResponseType>
-) => {
+export const mockPcdRequestResponse = (overwrite?: Partial<PCDDetailsResponseType>) => {
   return { ...PcdRequestResponse, ...overwrite };
 };
diff --git a/materials_ui/tests/mocks/pcd/mockPcdReviewCore.ts b/materials_ui/tests/mocks/pcd/mockPcdReviewCore.ts
index de617009..dc3d284a 100644
--- a/materials_ui/tests/mocks/pcd/mockPcdReviewCore.ts
+++ b/materials_ui/tests/mocks/pcd/mockPcdReviewCore.ts
@@ -3,13 +3,9 @@ import type { PCDReviewCoreResponseType } from '../../../src/schemas/pcdReview';
 
 const PcdReviewCoreDataResponse: PCDReviewCoreResponseType = [
   { id: 4380514, date: '19/05/2025', type: PcdReviewCoreType.InitialReview },
-  {
-    id: 4380522,
-    date: '19/05/2025',
-    type: PcdReviewCoreType.PreChargeDecisionAnalysis
-  }
+  { id: 4380522, date: '19/05/2025', type: PcdReviewCoreType.PreChargeDecisionAnalysis },
 ];
 
 export const mockPcdReviewCoreDataResponse = (
-  data?: PCDReviewCoreResponseType
+  data?: PCDReviewCoreResponseType,
 ): PCDReviewCoreResponseType => data ?? PcdReviewCoreDataResponse;
diff --git a/materials_ui/tests/mocks/pcd/mockPcdReviewDetails.ts b/materials_ui/tests/mocks/pcd/mockPcdReviewDetails.ts
index 886daf6c..aedf0c63 100644
--- a/materials_ui/tests/mocks/pcd/mockPcdReviewDetails.ts
+++ b/materials_ui/tests/mocks/pcd/mockPcdReviewDetails.ts
@@ -1,6 +1,6 @@
 import {
   PCDReviewDetailsSchema,
-  type PCDReviewDetailsResponseType
+  type PCDReviewDetailsResponseType,
 } from '../../../src/schemas/pcdReview';
 
 const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
@@ -13,8 +13,7 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
     consultationType: 'Full Code Test',
     disclosureActionsAndIssues:
       'Think about what steps to take regarding disclosing information now. Try to anticipate issues that might come up as the cases progresses.',
-    europeanCourtOfHumanRights:
-      'Human rights factors are not an issue in this case at this time',
+    europeanCourtOfHumanRights: 'Human rights factors are not an issue in this case at this time',
     evidentialAssessment:
       'Explain if and how the evidence proves all elements of the offence or offences in accordance with the Full Code Test. Your assessment should anticipate any likely issues for trial and suggest ways to overcome potential challenges to the prosecution case.',
     id: 4380514,
@@ -31,34 +30,16 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
     prosecutorDeclaration:
       'I confirm that I have considered the impact of potentially disclosable material, on the decision to charge or continue with proceedings, including any unexamined material or material that could be obtained through further reasonable lines of inquiry',
     monitoringCodes: [
-      {
-        code: '',
-        description: 'Domestic Violence',
-        type: 0,
-        disabled: false,
-        isAssigned: true
-      },
-      {
-        code: '',
-        description: 'Pre-Charge Decision',
-        type: 0,
-        disabled: false,
-        isAssigned: true
-      },
-      {
-        code: '',
-        description: 'Rape',
-        type: 0,
-        disabled: false,
-        isAssigned: true
-      },
+      { code: '', description: 'Domestic Violence', type: 0, disabled: false, isAssigned: true },
+      { code: '', description: 'Pre-Charge Decision', type: 0, disabled: false, isAssigned: true },
+      { code: '', description: 'Rape', type: 0, disabled: false, isAssigned: true },
       {
         code: '',
         description: 'Vulnerable/Intimidated victim',
         type: 0,
         disabled: false,
-        isAssigned: true
-      }
+        isAssigned: true,
+      },
     ],
     isCompleted: true,
     eventDate: '19/05/2025',
@@ -73,27 +54,27 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
         { itemName: '', title: '', description: '', comment: '' },
         { itemName: '', title: '', description: '', comment: '' },
         { itemName: '', title: '', description: '', comment: '' },
-        { itemName: '', title: '', description: '', comment: '' }
+        { itemName: '', title: '', description: '', comment: '' },
       ],
-      policeResponse: ''
+      policeResponse: '',
     },
     currentEvent: {
       id: 4380514,
       name: 'Initial Review',
       date: '19/05/2025',
       authorOrVenue: 'Erika Farrugia',
-      type: 1
+      type: 1,
     },
     nextEventLink: [
       {
         id: 4380514,
         href: 'api/cases/2161796/history?caseId=4380514&historyType=1',
         rel: 'InitialReview',
-        type: 'GET'
-      }
+        type: 'GET',
+      },
     ],
     dppConsent: null,
-    linkedCaseUrns: []
+    linkedCaseUrns: [],
   },
   preChargeDecisionOutcome: {
     author: 'Erika Farrugia',
@@ -115,7 +96,7 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
         pcdPrincipalOffenceCategory: '',
         reasonCode: 'K',
         publicInterestCode: '',
-        chargeDetails: []
+        chargeDetails: [],
       },
       {
         id: 2785313,
@@ -131,8 +112,8 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
         pcdPrincipalOffenceCategory: '',
         reasonCode: 'C',
         publicInterestCode: 'D77 - Public Interest Code',
-        chargeDetails: []
-      }
+        chargeDetails: [],
+      },
     ],
     eventDate: '19/05/2025',
     id: 4380522,
@@ -154,7 +135,7 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
         actionPoint:
           'Requested:\n- Victim Personal Statement;\n(Please provide the witness personal statement as we can see what was actually said as this is missing from the files)',
         policeCovidUrgency: '',
-        cpsCovidUrgency: ''
+        cpsCovidUrgency: '',
       },
       {
         actionType: 'Action Plan',
@@ -165,7 +146,7 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
         actionPoint:
           'Requested:\n- Medical Evidence;\n(Send us the medical evidence of the injuries incurred as a result of the assault)',
         policeCovidUrgency: '',
-        cpsCovidUrgency: ''
+        cpsCovidUrgency: '',
       },
       {
         actionType: 'Action Plan',
@@ -176,8 +157,8 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
         actionPoint:
           'Requested:\n- Unused/Sensitive Material;\n(Any further Unused Material that may be needed for a further review)',
         policeCovidUrgency: '',
-        cpsCovidUrgency: ''
-      }
+        cpsCovidUrgency: '',
+      },
     ],
     urn: '16123630825',
     currentEvent: {
@@ -185,32 +166,32 @@ const PcdReviewDetailsDataResponse: PCDReviewDetailsResponseType = {
       name: 'Pre-charge Decision',
       date: '19/05/2025',
       authorOrVenue: 'Erika Farrugia',
-      type: 3
+      type: 3,
     },
     nextEventLink: [
       {
         id: 4380522,
         href: 'api/cases/2161796/history?caseId=4380522&historyType=3',
         rel: 'PreChargeDecision',
-        type: 'GET'
-      }
-    ]
-  }
+        type: 'GET',
+      },
+    ],
+  },
 };
 
 PCDReviewDetailsSchema.parse(PcdReviewDetailsDataResponse);
 
 export const mockPcdReviewDetailsResponse = (
-  overwrite?: Partial<PCDReviewDetailsResponseType>
+  overwrite?: Partial<PCDReviewDetailsResponseType>,
 ): PCDReviewDetailsResponseType => ({
   ...PcdReviewDetailsDataResponse,
   ...overwrite,
   preChargeDecisionAnalysisOutcome: {
     ...PcdReviewDetailsDataResponse.preChargeDecisionAnalysisOutcome,
-    ...overwrite?.preChargeDecisionAnalysisOutcome
+    ...overwrite?.preChargeDecisionAnalysisOutcome,
   },
   preChargeDecisionOutcome: {
     ...PcdReviewDetailsDataResponse.preChargeDecisionOutcome,
-    ...overwrite?.preChargeDecisionOutcome
-  }
+    ...overwrite?.preChargeDecisionOutcome,
+  },
 });
diff --git a/materials_ui/tests/tests-e2e/actions.spec.ts b/materials_ui/tests/tests-e2e/actions.spec.ts
index f8e56a65..9aa39cc1 100644
--- a/materials_ui/tests/tests-e2e/actions.spec.ts
+++ b/materials_ui/tests/tests-e2e/actions.spec.ts
@@ -7,23 +7,14 @@ test.describe('Actions', () => {
     await page.goto('./materials', { waitUntil: 'domcontentloaded' });
   });
   test('Discard material', async ({ page }) => {
-    mockRoute(
-      page,
-      '/case-materials',
-      mockCaseMaterials({ subject: 'test 1' })
-    );
+    mockRoute(page, '/case-materials', mockCaseMaterials({ subject: 'test 1' }));
     mockRoute(page, '/material/discard');
     const table = page.getByRole('table');
     const row = table.getByRole('row', { name: 'test 1' });
     await row.getByRole('checkbox').check();
 
-    await page
-      .getByRole('button', { name: 'Action on selection' })
-      .first()
-      .click();
-    await page
-      .getByRole('menuitem', { name: 'Discard' })
-      .click({ force: true });
+    await page.getByRole('button', { name: 'Action on selection' }).first().click();
+    await page.getByRole('menuitem', { name: 'Discard' }).click({ force: true });
     await page.getByRole('radio', { name: 'Attached in error' }).click();
     await page.getByRole('button', { name: 'Save and discard' }).click();
     const succesMessage = page.getByText('Discard successful');
@@ -31,18 +22,11 @@ test.describe('Actions', () => {
   });
 
   test('Rename material', async ({ page }) => {
-    mockRoute(
-      page,
-      '/case-materials',
-      mockCaseMaterials({ subject: 'test 1' })
-    );
+    mockRoute(page, '/case-materials', mockCaseMaterials({ subject: 'test 1' }));
     const table = page.getByRole('table');
     const row = table.getByRole('row', { name: 'test 1' });
     await row.getByRole('checkbox').check();
-    await page
-      .getByRole('button', { name: 'Action on selection' })
-      .first()
-      .click();
+    await page.getByRole('button', { name: 'Action on selection' }).first().click();
     await page.getByRole('menuitem', { name: 'Rename' }).click();
     await page
       .getByRole('textbox', { name: 'What is the new name of the material?' })
@@ -54,18 +38,11 @@ test.describe('Actions', () => {
 
   //mark as read
   test('Mark as read', async ({ page }) => {
-    mockRoute(
-      page,
-      '/case-materials',
-      mockCaseMaterials({ subject: 'test 1' })
-    );
+    mockRoute(page, '/case-materials', mockCaseMaterials({ subject: 'test 1' }));
     const table = page.getByRole('table');
     const row = table.getByRole('row', { name: 'test 1' });
     await row.getByRole('checkbox').check();
-    await page
-      .getByRole('button', { name: 'Action on selection' })
-      .first()
-      .click();
+    await page.getByRole('button', { name: 'Action on selection' }).first().click();
     await page.getByRole('menuitem', { name: 'Mark as unread' }).click();
     const succesMessage = page.getByText('Read status updated');
     await expect(succesMessage).toBeVisible();
@@ -76,15 +53,12 @@ test.describe('Actions', () => {
     mockRoute(
       page,
       '/case-materials',
-      mockCaseMaterials({ subject: 'test 2', readStatus: 'Unread' })
+      mockCaseMaterials({ subject: 'test 2', readStatus: 'Unread' }),
     );
     const table = page.getByRole('table');
     const row = table.getByRole('row', { name: 'test 2' });
     await row.getByRole('checkbox').check();
-    await page
-      .getByRole('button', { name: 'Action on selection' })
-      .first()
-      .click();
+    await page.getByRole('button', { name: 'Action on selection' }).first().click();
     await page.getByRole('menuitem', { name: 'Mark as read' }).click();
     const succesMessage = page.getByText('Read status updated');
     await expect(succesMessage).toBeVisible();
diff --git a/materials_ui/tests/tests-e2e/case-search.spec.ts b/materials_ui/tests/tests-e2e/case-search.spec.ts
index 4b8ea727..ea5b358e 100644
--- a/materials_ui/tests/tests-e2e/case-search.spec.ts
+++ b/materials_ui/tests/tests-e2e/case-search.spec.ts
@@ -9,25 +9,15 @@ test.describe('Case Search page', () => {
   });
 
   test('T-001: expect page loads correctly', async ({ page }) => {
-    await expect(
-      page.getByRole('heading', { name: 'Find a case' })
-    ).toBeVisible();
-    await expect(
-      page.getByText('Search and review a CPS case in England and Wales')
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Find a case' })).toBeVisible();
+    await expect(page.getByText('Search and review a CPS case in England and Wales')).toBeVisible();
   });
 
   test('T-002: user is able to search a case on page', async ({ page }) => {
-    await expect(
-      page.getByRole('textbox', { name: 'Search for a case URN' })
-    ).toBeVisible();
-    await page
-      .getByRole('textbox', { name: 'Search for a case URN' })
-      .fill('16WW1058825');
+    await expect(page.getByRole('textbox', { name: 'Search for a case URN' })).toBeVisible();
+    await page.getByRole('textbox', { name: 'Search for a case URN' }).fill('16WW1058825');
     await page.getByRole('button', { name: 'Search' }).click();
-    await expect(
-      page.getByRole('heading', { name: '16WW1058825' })
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: '16WW1058825' })).toBeVisible();
     await expect(page.getByText('Status: Not yet charged')).toBeVisible();
     await expect(page.getByText('Proposed: N/A')).toBeVisible();
   });
diff --git a/materials_ui/tests/tests-e2e/casework.spec.ts b/materials_ui/tests/tests-e2e/casework.spec.ts
index 569d9b09..0f9ff131 100644
--- a/materials_ui/tests/tests-e2e/casework.spec.ts
+++ b/materials_ui/tests/tests-e2e/casework.spec.ts
@@ -1,11 +1,9 @@
 import { expect, test } from '@playwright/test';
 
 test('TC:001 load page and check tabs present', async ({ page }) => {
-  await page.goto('./communications', {waitUntil: "domcontentloaded"});
+  await page.goto('./communications', { waitUntil: 'domcontentloaded' });
   await expect(page.getByRole('tab', { name: 'PCD Request' })).toBeVisible();
   await expect(page.getByRole('tab', { name: 'Materials' })).toBeVisible();
-  await expect(
-    page.getByRole('tab', { name: 'Review and Redact' })
-  ).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'Review and Redact' })).toBeVisible();
   await expect(page.getByRole('tab', { name: 'Communications' })).toBeVisible();
-});
\ No newline at end of file
+});
diff --git a/materials_ui/tests/tests-e2e/communications.spec.ts b/materials_ui/tests/tests-e2e/communications.spec.ts
index f0f7d891..c36a27dd 100644
--- a/materials_ui/tests/tests-e2e/communications.spec.ts
+++ b/materials_ui/tests/tests-e2e/communications.spec.ts
@@ -15,17 +15,15 @@ test.describe('Communications page', () => {
       mockCaseMaterials({
         subject: 'MG7 SMITH Will (Redacted)',
         type: 'DCF',
-        category: 'Communication'
-      })
+        category: 'Communication',
+      }),
     );
 
-    await expect(
-      page.getByText('MG7 SMITH Will (Redacted)', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('MG7 SMITH Will (Redacted)', { exact: true })).toBeVisible();
   });
 
   test('T-002: page shows no communications text if no communications are displayed', async ({
-    page
+    page,
   }) => {
     mockRoute(page, '/case-materials', mockCaseMaterials({}));
 
@@ -33,9 +31,7 @@ test.describe('Communications page', () => {
     await page.waitForSelector('tbody'); // Ensure table exists first
     await page.route('/case-materials', (route) => route.abort());
     expect(
-      page.getByText(
-        'There are no communications that match your selection for this case'
-      )
+      page.getByText('There are no communications that match your selection for this case'),
     ).toBeVisible();
   });
 
@@ -48,14 +44,12 @@ test.describe('Communications page', () => {
         subject: 'MG7 SMITH Will (Redacted)',
         type: 'DCF',
         category: 'Communication',
-        direction: 'Incoming'
-      })
+        direction: 'Incoming',
+      }),
     );
     await page.getByTestId('direction-Incoming').check();
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('MG7 SMITH Will (Redacted)', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('MG7 SMITH Will (Redacted)', { exact: true })).toBeVisible();
   });
 
   //comms type filter
@@ -67,8 +61,8 @@ test.describe('Communications page', () => {
         subject: 'test 1',
         type: 'DCF',
         category: 'Communication',
-        method: 'Bundle'
-      })
+        method: 'Bundle',
+      }),
     );
 
     await page.getByTestId('method-Bundle').check();
@@ -84,8 +78,8 @@ test.describe('Communications page', () => {
         subject: 'test 2',
         type: 'DCF',
         category: 'Communication',
-        method: 'Police'
-      })
+        method: 'Police',
+      }),
     );
     await page.getByTestId('checkbox-party-Police').click();
     await page.getByTestId('applyFiltersButton').click();
@@ -100,8 +94,8 @@ test.describe('Communications page', () => {
         subject: 'test 3',
         type: 'Meeting',
         category: 'Communication',
-        method: 'Police'
-      })
+        method: 'Police',
+      }),
     );
 
     await page.getByTestId('type-Meeting').check();
@@ -126,8 +120,8 @@ test.describe('Communications page', () => {
         subject: 'test 1',
         type: 'Meeting',
         category: 'Communication',
-        method: 'Police'
-      })
+        method: 'Police',
+      }),
     );
     await page.getByRole('searchbox', { name: 'Subject' }).fill('test 1');
     await page.getByTestId('applyFiltersButton').click();
diff --git a/materials_ui/tests/tests-e2e/materials.spec.ts b/materials_ui/tests/tests-e2e/materials.spec.ts
index 99ce0ee9..f5e5255b 100644
--- a/materials_ui/tests/tests-e2e/materials.spec.ts
+++ b/materials_ui/tests/tests-e2e/materials.spec.ts
@@ -16,27 +16,23 @@ test.describe('Materials page', () => {
       mockCaseMaterials({
         subject: 'MG11 Shelagh  Mc Love Undated',
         type: 'Statement',
-        category: 'Other Material'
-      })
+        category: 'Other Material',
+      }),
     );
 
     console.log(
-      `Route mocked successfully for endpoint data: ${JSON.stringify(mockCaseMaterials())}`
+      `Route mocked successfully for endpoint data: ${JSON.stringify(mockCaseMaterials())}`,
     );
-    await expect(
-      page.getByText('MG11 Shelagh  Mc Love Undated', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('MG11 Shelagh  Mc Love Undated', { exact: true })).toBeVisible();
   });
 
-  test('T-002: page shows no materials text if no materials are displayed', async ({
-    page
-  }) => {
+  test('T-002: page shows no materials text if no materials are displayed', async ({ page }) => {
     mockRoute(page, '/case-materials', []);
 
     // no materials
     await page.waitForSelector('tbody'); // Ensure table exists first
     await expect(page.locator('tbody')).toContainText(
-      'There are no materials that match your selection for this case'
+      'There are no materials that match your selection for this case',
     );
   });
 
@@ -48,16 +44,14 @@ test.describe('Materials page', () => {
         subject: 'MG11 Shelagh  Mc Love Undated',
         type: 'Statement',
         category: 'Other Material',
-        status: 'Used'
-      })
+        status: 'Used',
+      }),
     );
 
     //used status
     await page.getByTestId('status-Used').check();
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('MG11 Shelagh  Mc Love Undated', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('MG11 Shelagh  Mc Love Undated', { exact: true })).toBeVisible();
   });
 
   test('T-004: user is able to filter by unused status', async ({ page }) => {
@@ -68,37 +62,31 @@ test.describe('Materials page', () => {
         subject: 'Stmt: Twob DCPTWIFVIC',
         type: 'Statement',
         category: 'Other Material',
-        status: 'Unused'
-      })
+        status: 'Unused',
+      }),
     );
 
     //nused status
     await page.getByTestId('status-Unused').check();
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('Stmt: Twob DCPTWIFVIC', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('Stmt: Twob DCPTWIFVIC', { exact: true })).toBeVisible();
   });
 
-  test('T-005: user is able to filter by statement category', async ({
-    page
-  }) => {
+  test('T-005: user is able to filter by statement category', async ({ page }) => {
     mockRoute(
       page,
       '/case-materials',
       mockCaseMaterials({
         subject: 'MG11 Shelagh  Mc Love Undated',
         type: 'Statement',
-        category: 'Statement'
-      })
+        category: 'Statement',
+      }),
     );
 
     // statement
     await page.getByTestId('category-Statement').check();
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('MG11 Shelagh  Mc Love Undated', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('MG11 Shelagh  Mc Love Undated', { exact: true })).toBeVisible();
   });
 
   test('T-006: user is able to filter by exhibit', async ({ page }) => {
@@ -108,15 +96,13 @@ test.describe('Materials page', () => {
       mockCaseMaterials({
         subject: 'Stmt: Twob DCPTWIFVIC',
         type: 'Statement',
-        category: 'Exhibit'
-      })
+        category: 'Exhibit',
+      }),
     );
     // exhibit
     await page.getByTestId('category-Exhibit').check();
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('Stmt: Twob DCPTWIFVIC', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('Stmt: Twob DCPTWIFVIC', { exact: true })).toBeVisible();
   });
 
   test('T-007: user is able to filter by category', async ({ page }) => {
@@ -126,15 +112,13 @@ test.describe('Materials page', () => {
       mockCaseMaterials({
         subject: 'Case Action Plan 4',
         type: 'Statement',
-        category: 'Other Material'
-      })
+        category: 'Other Material',
+      }),
     );
     //other material
     await page.getByTestId('category-Other Material').check();
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('Case Action Plan 4', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('Case Action Plan 4', { exact: true })).toBeVisible();
   });
 
   test('T-008: user is able to hide filter', async ({ page }) => {
@@ -154,15 +138,11 @@ test.describe('Materials page', () => {
         subject: 'Case Action Plan 4',
         type: 'Statement',
         category: 'Other Material',
-        status: 'None'
-      })
+        status: 'None',
+      }),
     );
-    await page
-      .getByRole('searchbox', { name: 'Material name' })
-      .fill('Case Action');
+    await page.getByRole('searchbox', { name: 'Material name' }).fill('Case Action');
     await page.getByTestId('applyFiltersButton').click();
-    await expect(
-      page.getByText('Case Action Plan 4', { exact: true })
-    ).toBeVisible();
+    await expect(page.getByText('Case Action Plan 4', { exact: true })).toBeVisible();
   });
 });
diff --git a/materials_ui/tests/tests-e2e/pcd-request.spec.ts b/materials_ui/tests/tests-e2e/pcd-request.spec.ts
index d3bf8151..7393b03f 100644
--- a/materials_ui/tests/tests-e2e/pcd-request.spec.ts
+++ b/materials_ui/tests/tests-e2e/pcd-request.spec.ts
@@ -4,9 +4,7 @@ import { mockPcdCoreResponse } from '../mocks/pcd/mockPcdCore';
 import { mockPcdRequestResponse } from '../mocks/pcd/mockPcdRequest';
 
 test.describe('PCD Request Page', () => {
-  test('T-001: page loads list of PCD requests as expected', async ({
-    page,
-  }) => {
+  test('T-001: page loads list of PCD requests as expected', async ({ page }) => {
     mockRoute(page, 'pcds/2167259/pcd-request-core', mockPcdCoreResponse());
     mockRoute(page, 'pcd-request', mockPcdRequestResponse());
     await page.goto('./pcd-request/145739', { waitUntil: 'domcontentloaded' });
@@ -18,14 +16,10 @@ test.describe('PCD Request Page', () => {
       .getByRole('heading', { name: 'Loading case', includeHidden: true })
       .waitFor({ state: 'detached' });
 
-    await expect(
-      page.getByRole('heading', { name: 'Police details' }),
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Police details' })).toBeVisible();
 
     await expect(page.getByText('Case outline')).toBeVisible();
-    await expect(
-      page.getByText(`Supervising officer's comments`),
-    ).toBeVisible();
+    await expect(page.getByText(`Supervising officer's comments`)).toBeVisible();
     await expect(page.getByText('Proposed charges')).toBeVisible();
     await expect(page.getByText('Bail details')).toBeVisible();
     await expect(page.getByText('Materials provided')).toBeVisible();
@@ -44,16 +38,12 @@ test.describe('PCD Request Page', () => {
     await page
       .getByRole('heading', { name: 'Loading case', includeHidden: true })
       .waitFor({ state: 'detached' });
-    await expect(
-      page.getByRole('heading', { name: 'Police details' }),
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Police details' })).toBeVisible();
     await page.locator(`a:text("01/01/2000")`).click();
     await expect(page.locator('dd').nth(0)).toHaveText(`02/02/2021`);
   });
 
-  test('T-003: should display a message when no PCD requests are available', async ({
-    page,
-  }) => {
+  test('T-003: should display a message when no PCD requests are available', async ({ page }) => {
     mockRoute(page, 'pcds/2167259/pcd-request-core', []);
     mockRoute(page, 'pcds/145739/pcd-request', {});
     await page.goto('./pcd-request/145739', { waitUntil: 'domcontentloaded' });
@@ -64,8 +54,6 @@ test.describe('PCD Request Page', () => {
     await page
       .getByRole('heading', { name: 'Loading case', includeHidden: true })
       .waitFor({ state: 'detached' });
-    await expect(
-      page.getByText('There are no PCD Requests to show.'),
-    ).toBeVisible();
+    await expect(page.getByText('There are no PCD Requests to show.')).toBeVisible();
   });
 });
diff --git a/materials_ui/tests/tests-e2e/pcd-review.spec.ts b/materials_ui/tests/tests-e2e/pcd-review.spec.ts
index 19e2376a..9a7b4013 100644
--- a/materials_ui/tests/tests-e2e/pcd-review.spec.ts
+++ b/materials_ui/tests/tests-e2e/pcd-review.spec.ts
@@ -7,24 +7,18 @@ const CASE_ID = '2167259';
 const FIRST_REVIEW_HISTORY_ID = 4380514;
 
 test.describe('PCD Review', () => {
-  test('T-001: page loads Initial Review and displays all main sections', async ({
-    page
-  }) => {
-    await mockRoute(
-      page,
-      `cases/${CASE_ID}/pcd-review-core`,
-      mockPcdReviewCoreDataResponse()
-    );
+  test('T-001: page loads Initial Review and displays all main sections', async ({ page }) => {
+    await mockRoute(page, `cases/${CASE_ID}/pcd-review-core`, mockPcdReviewCoreDataResponse());
     await mockRoute(
       page,
       `cases/${CASE_ID}/history/${FIRST_REVIEW_HISTORY_ID}/pcd-review-details`,
-      mockPcdReviewDetailsResponse()
+      mockPcdReviewDetailsResponse(),
     );
 
     await page.goto('./pcd-review', { waitUntil: 'domcontentloaded' });
     await page.waitForRequest('**/case-info/2167259');
     await expect(
-      page.getByRole('heading', { name: 'Loading case', includeHidden: true })
+      page.getByRole('heading', { name: 'Loading case', includeHidden: true }),
     ).toBeVisible();
     await page
       .getByRole('heading', { name: 'Loading case', includeHidden: true })
@@ -32,28 +26,16 @@ test.describe('PCD Review', () => {
 
     // Main headings
     await expect(page.getByRole('heading', { name: 'Reviews' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Case Headline ' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Charging Decision & Advice' })).toBeVisible();
     await expect(
-      page.getByRole('heading', { name: 'Case Headline ' })
-    ).toBeVisible();
-    await expect(
-      page.getByRole('heading', { name: 'Charging Decision & Advice' })
-    ).toBeVisible();
-    await expect(
-      page.getByRole('heading', {
-        name: 'Further action agreed for codes A, B, B2, H, I, J'
-      })
+      page.getByRole('heading', { name: 'Further action agreed for codes A, B, B2, H, I, J' }),
     ).toBeVisible();
 
     // Table headings
-    await expect(
-      page.getByRole('columnheader', { name: 'Suspect' })
-    ).toBeVisible();
-    await expect(
-      page.getByRole('columnheader', { name: 'Charging code' })
-    ).toBeVisible();
-    await expect(
-      page.getByRole('columnheader', { name: 'Advice' })
-    ).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Suspect' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Charging code' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Advice' })).toBeVisible();
     // Definition list items
     await expect(page.getByText('Review type:')).toBeVisible();
     await expect(page.getByText('Prosecutor name:')).toBeVisible();
@@ -63,39 +45,35 @@ test.describe('PCD Review', () => {
     await expect(page.getByText('Return bail date:')).toBeVisible();
   });
 
-  test('T-002: should show error message when server returns 401', async ({
-    page
-  }) => {
+  test('T-002: should show error message when server returns 401', async ({ page }) => {
     mockServerError(page, `cases/${CASE_ID}/pcd-review-core`);
 
     await page.goto('./pcd-review', { waitUntil: 'domcontentloaded' });
     await page.waitForRequest('**/case-info/2167259');
     await expect(
-      page.getByRole('heading', { name: 'Loading case', includeHidden: true })
+      page.getByRole('heading', { name: 'Loading case', includeHidden: true }),
     ).toBeVisible();
     await page
       .getByRole('heading', { name: 'Loading case', includeHidden: true })
       .waitFor({ state: 'detached' });
-    await expect(
-      page.getByRole('heading', { name: 'Authentication Error' })
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Authentication Error' })).toBeVisible();
   });
 
   test('T-003: Review has not been completed message shown if no data is returned', async ({
-    page
+    page,
   }) => {
     await mockRoute(page, `cases/${CASE_ID}/pcd-review-core`, []);
 
     await page.goto('./pcd-review', { waitUntil: 'domcontentloaded' });
     await page.waitForRequest('**/case-info/2167259');
     await expect(
-      page.getByRole('heading', { name: 'Loading case', includeHidden: true })
+      page.getByRole('heading', { name: 'Loading case', includeHidden: true }),
     ).toBeVisible();
     await page
       .getByRole('heading', { name: 'Loading case', includeHidden: true })
       .waitFor({ state: 'detached' });
     await expect(
-      page.getByText('A Review has not yet been completed for this case.')
+      page.getByText('A Review has not yet been completed for this case.'),
     ).toBeVisible();
   });
 });
diff --git a/materials_ui/tests/tests-e2e/reclassify.spec.ts b/materials_ui/tests/tests-e2e/reclassify.spec.ts
index 8af91114..79d7d45e 100644
--- a/materials_ui/tests/tests-e2e/reclassify.spec.ts
+++ b/materials_ui/tests/tests-e2e/reclassify.spec.ts
@@ -12,15 +12,9 @@ test.beforeEach(async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Loading case', includeHidden: true })
     .waitFor({ state: 'detached' });
-  const rowFilter = page
-    .getByRole('row')
-    .filter({ hasText: 'MG15(CNOI)' })
-    .getByRole('checkbox');
+  const rowFilter = page.getByRole('row').filter({ hasText: 'MG15(CNOI)' }).getByRole('checkbox');
   await rowFilter.check();
-  await page
-    .getByRole('button', { name: 'Action on selection' })
-    .first()
-    .click();
+  await page.getByRole('button', { name: 'Action on selection' }).first().click();
   await page.getByRole('listitem').filter({ hasText: 'Reclassify' }).click();
 });
 
@@ -29,9 +23,7 @@ test('page loads as expected', async ({ page }) => {
   const title = await page.title();
   const mainHeading = page.getByRole('heading', { level: 1 });
   const backLink = page.getByRole('link', { name: 'Back' });
-  const firstQuestion = page.getByText(
-    'What is the new material classification category?',
-  );
+  const firstQuestion = page.getByText('What is the new material classification category?');
   const radios = page.getByRole('radio');
   const submitButton = page.getByRole('button', { name: 'Continue' });
   const cancelLink = page.getByRole('link', { name: 'Cancel' });
@@ -80,15 +72,11 @@ test.describe('validation', () => {
   test('statement errors', async ({ page }) => {
     await page.getByRole('radio', { name: 'Statement' }).check();
     await page.getByRole('button', { name: 'Continue' }).click();
-    const dateErrorMessage = page.getByRole('link', {
-      name: 'Select if statement has a date',
-    });
+    const dateErrorMessage = page.getByRole('link', { name: 'Select if statement has a date' });
     const statementNumberErrorMessage = page.getByRole('link', {
       name: 'Enter a statement number',
     });
-    const witnessErrorMessage = page.getByRole('link', {
-      name: 'Choose a witness',
-    });
+    const witnessErrorMessage = page.getByRole('link', { name: 'Choose a witness' });
     await expect(dateErrorMessage).toBeVisible();
     await expect(statementNumberErrorMessage).toBeVisible();
     await expect(witnessErrorMessage).toBeVisible();
@@ -103,18 +91,12 @@ test.describe('validation', () => {
     await page.getByText('Statement number').fill('1');
     await page.getByRole('button', { name: 'Continue' }).click();
     await page.getByRole('button', { name: 'Continue' }).click();
-    const firstNameErorMessage = page.getByRole('link', {
-      name: 'Enter the first name',
-    });
-    const lastNameErrorMessage = page.getByRole('link', {
-      name: 'Enter the last name',
-    });
+    const firstNameErorMessage = page.getByRole('link', { name: 'Enter the first name' });
+    const lastNameErrorMessage = page.getByRole('link', { name: 'Enter the last name' });
     const contestedIssueErrorMessage = page.getByRole('link', {
       name: 'Enter the contested issue',
     });
-    const requestErrorMessage = page.getByRole('link', {
-      name: 'Choose what you want to request',
-    });
+    const requestErrorMessage = page.getByRole('link', { name: 'Choose what you want to request' });
     const defendantErrorMessage = page.getByRole('link', {
       name: 'Select a defendant the action plan relates to',
     });
@@ -143,9 +125,7 @@ test.describe('validation', () => {
       name: 'Choose a material classification type',
     });
     const itemErrorMessage = page.getByRole('link', { name: 'Enter the item' });
-    const exhibitRefErrorMessage = page.getByRole('link', {
-      name: 'Enter the exhibit reference',
-    });
+    const exhibitRefErrorMessage = page.getByRole('link', { name: 'Enter the exhibit reference' });
     await expect(exhibitTypeErrorMessage).toBeVisible();
     await expect(itemErrorMessage).toBeVisible();
     await expect(exhibitRefErrorMessage).toBeVisible();
@@ -170,11 +150,7 @@ test.describe('validation', () => {
 
 test.describe('form submission', () => {
   test('reclassify MG forms', async ({ page }) => {
-    await mockRoute(
-      page,
-      'material/8836399/reclassify-complete',
-      mockOchestration(),
-    );
+    await mockRoute(page, 'material/8836399/reclassify-complete', mockOchestration());
 
     await page.getByRole('radio', { name: 'MG Forms' }).check();
     await page.getByLabel('What is the material').selectOption('1064');
@@ -183,18 +159,12 @@ test.describe('form submission', () => {
     await page
       .getByRole('heading', { name: 'Please wait..', includeHidden: true })
       .waitFor({ state: 'detached' });
-    await expect(
-      page.getByText('Material reclassified successfully'),
-    ).toBeVisible();
+    await expect(page.getByText('Material reclassified successfully')).toBeVisible();
   });
 
   test('statement reclassify with witness', async ({ page }) => {
     await mockRoute(page, 'case-witnesses?caseId=2167259', mockWitness());
-    await mockRoute(
-      page,
-      'material/8836399/reclassify-complete',
-      mockOchestration(),
-    );
+    await mockRoute(page, 'material/8836399/reclassify-complete', mockOchestration());
     await page.unroute('api/case-materials');
     await mockRoute(
       page,
@@ -218,18 +188,12 @@ test.describe('form submission', () => {
     await page
       .getByRole('heading', { name: 'Please wait..', includeHidden: true })
       .waitFor({ state: 'detached' });
-    await expect(
-      page.getByText('Material reclassified successfully'),
-    ).toBeVisible();
+    await expect(page.getByText('Material reclassified successfully')).toBeVisible();
   });
 
   test('statement reclassify with add witness', async ({ page }) => {
     await mockRoute(page, 'case-witnesses?caseId=2167259', mockWitness());
-    await mockRoute(
-      page,
-      'material/8836399/reclassify-complete',
-      mockOchestration(),
-    );
+    await mockRoute(page, 'material/8836399/reclassify-complete', mockOchestration());
     await page.unroute('api/case-materials');
     await mockRoute(
       page,
@@ -254,12 +218,8 @@ test.describe('form submission', () => {
 
     await page.getByRole('textbox', { name: 'First name' }).fill('John');
     await page.getByRole('textbox', { name: 'Last name' }).fill('Doe');
-    await page
-      .getByRole('textbox', { name: 'Contested issue' })
-      .fill('Contested issue');
-    await page
-      .getByRole('radio', { name: 'Key witness details', exact: true })
-      .check();
+    await page.getByRole('textbox', { name: 'Contested issue' }).fill('Contested issue');
+    await page.getByRole('radio', { name: 'Key witness details', exact: true }).check();
     await page
       .getByLabel('Select the defendant the action plan relates to')
       .selectOption('Will SMITH');
@@ -281,11 +241,7 @@ test.describe('form submission', () => {
 
   test('reclassify exhibit', async ({ page }) => {
     await mockRoute(page, 'case-witnesses?caseId=2167259', mockWitness());
-    await mockRoute(
-      page,
-      'api/material/8836399/reclassify-complete',
-      mockOchestration(),
-    );
+    await mockRoute(page, 'api/material/8836399/reclassify-complete', mockOchestration());
 
     await page.unroute('api/case-materials');
 
@@ -302,39 +258,22 @@ test.describe('form submission', () => {
         documentTypeId: 1062,
       }),
     );
-    await mockRoute(
-      page,
-      'api/case-defendants?caseId=2167259',
-      mockDefendants(),
-    );
+    await mockRoute(page, 'api/case-defendants?caseId=2167259', mockDefendants());
     await page.getByRole('radio', { name: 'Exhibit' }).check();
-    await page
-      .getByLabel('What is the material classification type?')
-      .selectOption('MG15(ROTI)');
+    await page.getByLabel('What is the material classification type?').selectOption('MG15(ROTI)');
     await page.getByRole('textbox', { name: 'Item' }).fill('Item 1');
-    await page
-      .getByRole('textbox', { name: 'Exhibit reference' })
-      .fill('AT-01');
+    await page.getByRole('textbox', { name: 'Exhibit reference' }).fill('AT-01');
     await page.getByRole('button', { name: 'Continue' }).click();
     await page.getByRole('button', { name: 'Save' }).click();
     await expect(
-      page.getByRole('heading', {
-        name: 'Please wait...',
-        includeHidden: true,
-      }),
-    ).toBeVisible();
-    await expect(
-      page.getByText('Material reclassified successfully'),
+      page.getByRole('heading', { name: 'Please wait...', includeHidden: true }),
     ).toBeVisible();
+    await expect(page.getByText('Material reclassified successfully')).toBeVisible();
   });
 
   test('reclassify other', async ({ page }) => {
     await mockRoute(page, 'case-witnesses?caseId=2167259', mockWitness());
-    await mockRoute(
-      page,
-      'api/material/4242662/reclassify-complete',
-      mockOchestration(),
-    );
+    await mockRoute(page, 'api/material/4242662/reclassify-complete', mockOchestration());
 
     await page.unroute('api/case-materials');
 
@@ -351,29 +290,17 @@ test.describe('form submission', () => {
         documentTypeId: 1062,
       }),
     );
-    await mockRoute(
-      page,
-      'api/case-defendants?caseId=2147043',
-      mockDefendants(),
-    );
+    await mockRoute(page, 'api/case-defendants?caseId=2147043', mockDefendants());
 
-    await mockRoute(
-      page,
-      'api/material/8836399/reclassify-complete',
-      mockOchestration(),
-    );
+    await mockRoute(page, 'api/material/8836399/reclassify-complete', mockOchestration());
 
     await page.getByRole('radio', { name: 'Other' }).check();
-    await page
-      .getByLabel('What is the material classification type?')
-      .selectOption('1201');
+    await page.getByLabel('What is the material classification type?').selectOption('1201');
     await page.getByRole('button', { name: 'Continue' }).click();
     await page.getByRole('button', { name: 'Save' }).click();
     await page
       .getByRole('heading', { name: 'Please wait..', includeHidden: true })
       .waitFor({ state: 'detached' });
-    await expect(
-      page.getByText('Material reclassified successfully'),
-    ).toBeVisible();
+    await expect(page.getByText('Material reclassified successfully')).toBeVisible();
   });
 });
diff --git a/materials_ui/tests/tests-e2e/review-redact.spec.ts b/materials_ui/tests/tests-e2e/review-redact.spec.ts
index 5b4005a2..71ed2678 100644
--- a/materials_ui/tests/tests-e2e/review-redact.spec.ts
+++ b/materials_ui/tests/tests-e2e/review-redact.spec.ts
@@ -6,7 +6,7 @@ test.describe('Review redact page', () => {
   test.beforeEach(async ({ page }) => {
     const loadingDocumentHeader = page.getByRole('heading', {
       name: 'Loading documents',
-      includeHidden: true
+      includeHidden: true,
     });
     await mockRoute(page, '/case-materials', mockCaseMaterials());
     await page.goto('./review-and-redact', { waitUntil: 'domcontentloaded' });
@@ -16,9 +16,7 @@ test.describe('Review redact page', () => {
   });
 
   test('T-001: page loads correctly with materials', async ({ page }) => {
-    await expect(
-      page.getByRole('searchbox', { name: 'Search within material' })
-    ).toBeVisible();
+    await expect(page.getByRole('searchbox', { name: 'Search within material' })).toBeVisible();
     await expect(page.getByText('Statements')).toBeVisible();
     await expect(page.getByText('Exhibits')).toBeVisible();
     await expect(page.getByText('MG forms')).toBeVisible();
@@ -27,24 +25,15 @@ test.describe('Review redact page', () => {
     await expect(page.getByText('Unused material')).toBeVisible();
   });
 
-  test('T-002: If no searches are found messages is displayed to user', async ({
-    page
-  }) => {
-    await expect(
-      page.getByRole('searchbox', { name: 'Search within material' })
-    ).toBeVisible();
-    await page
-      .getByRole('searchbox', { name: 'Search within material' })
-      .fill('test search');
+  test('T-002: If no searches are found messages is displayed to user', async ({ page }) => {
+    await expect(page.getByRole('searchbox', { name: 'Search within material' })).toBeVisible();
+    await page.getByRole('searchbox', { name: 'Search within material' }).fill('test search');
     await page
       .getByRole('heading', { name: 'Loading documents', includeHidden: true })
       .waitFor({ state: 'detached' });
     await page.getByRole('button', { name: 'Search' }).click();
     await page
-      .getByRole('heading', {
-        name: 'Loading search results',
-        includeHidden: true
-      })
+      .getByRole('heading', { name: 'Loading search results', includeHidden: true })
       .waitFor({ state: 'detached' });
     await expect(page.getByText('No results.')).toBeVisible();
   });
diff --git a/materials_ui/tsconfig.app.json b/materials_ui/tsconfig.app.json
index 31858622..e70d05b8 100644
--- a/materials_ui/tsconfig.app.json
+++ b/materials_ui/tsconfig.app.json
@@ -25,4 +25,3 @@
   },
   "include": ["src"]
 }
-
diff --git a/materials_ui/tsconfig.json b/materials_ui/tsconfig.json
index 1ffef600..d32ff682 100644
--- a/materials_ui/tsconfig.json
+++ b/materials_ui/tsconfig.json
@@ -1,7 +1,4 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }
diff --git a/materials_ui/vite.config.ts b/materials_ui/vite.config.ts
index 74d3bcbd..e6cea035 100644
--- a/materials_ui/vite.config.ts
+++ b/materials_ui/vite.config.ts
@@ -12,9 +12,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     base: '/materials-ui/',
-    define: {
-      __MAINTENANCE_MODE__: JSON.stringify(env.VITE_MAINTENANCE_MODE === 'true')
-    },
+    define: { __MAINTENANCE_MODE__: JSON.stringify(env.VITE_MAINTENANCE_MODE === 'true') },
     plugins: [
       svgr(),
       react(),
@@ -26,39 +24,33 @@ export default defineConfig(({ mode }) => {
             console.log(env.VITE_GLOBAL_SCRIPT_URL);
             return html.replace(
               '</head>',
-              `<script src="${env.VITE_GLOBAL_SCRIPT_URL}" type="module"></script>\n</head>`
+              `<script src="${env.VITE_GLOBAL_SCRIPT_URL}" type="module"></script>\n</head>`,
             );
           }
           return html;
-        }
+        },
       },
       {
         name: 'copy-govuk-assets',
         buildStart() {
-          const dest = path.resolve(
-            import.meta.dirname,
-            'public/assets/images'
-          );
+          const dest = path.resolve(import.meta.dirname, 'public/assets/images');
           fs.mkdirSync(dest, { recursive: true });
           const src = path.resolve(
             import.meta.dirname,
-            'node_modules/govuk-frontend/dist/govuk/assets/images'
+            'node_modules/govuk-frontend/dist/govuk/assets/images',
           );
           for (const file of fs.readdirSync(src)) {
             fs.copyFileSync(path.join(src, file), path.join(dest, file));
           }
-        }
+        },
       },
       {
         name: 'copy-index-to-root',
         closeBundle() {
-          const src = path.resolve(
-            import.meta.dirname,
-            'build/materials-ui/index.html'
-          );
+          const src = path.resolve(import.meta.dirname, 'build/materials-ui/index.html');
           const dest = path.resolve(import.meta.dirname, 'build/index.html');
           fs.copyFileSync(src, dest);
-        }
+        },
       },
       {
         name: 'redirect-trailing-slash',
@@ -71,12 +63,12 @@ export default defineConfig(({ mode }) => {
             }
             next();
           });
-        }
-      }
+        },
+      },
     ],
     resolve: {
       alias: [{ find: 'node_modules', replacement: '/node_modules' }],
-      dedupe: ['react', 'react-dom']
+      dedupe: ['react', 'react-dom'],
     },
     server: { port: 3000 },
     preview: {
@@ -103,8 +95,8 @@ export default defineConfig(({ mode }) => {
               ;
         `
           .replace(/\s{2,}/g, ' ')
-          .trim()
-      }
+          .trim(),
+      },
     },
     esbuild: { drop: mode === 'production' ? ['debugger'] : [] },
     build: {
@@ -135,9 +127,9 @@ export default defineConfig(({ mode }) => {
               }
               return 'vendor'; // Default fallback for other dependencies
             }
-          }
-        }
-      }
+          },
+        },
+      },
     },
     css: {
       preprocessorOptions: {
@@ -148,11 +140,11 @@ export default defineConfig(({ mode }) => {
             'import',
             'slash-div',
             'global-builtin',
-            'function-units'
+            'function-units',
           ],
-          quietDeps: true
-        }
-      }
+          quietDeps: true,
+        },
+      },
     },
     test: {
       globals: true,
@@ -160,7 +152,7 @@ export default defineConfig(({ mode }) => {
       outputFile: { junit: './unit-test-results.xml' },
       setupFiles: './src/setupTests.ts',
       silent: true,
-      exclude: ['e2e', 'node_modules']
-    }
+      exclude: ['e2e', 'node_modules'],
+    },
   };
 });

From 94f02e44cf0f40a865045d54893e0c64a3996eea Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Tue, 14 Jul 2026 15:29:34 +0100
Subject: [PATCH 16/28] =?UTF-8?q?FCT2-16304-review-redact-tab-redaction-us?=
 =?UTF-8?q?er-alerts-redaction-exceptio=E2=80=A6=20(#447)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-2

* FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-2
---
 .../CaseworkPdfRedactorWrapper.tsx                           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index d13738b7..3d00741d 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -34,12 +34,13 @@ import { saveRotations } from './utils/saveRotationsUtils';
 const presentationWriteFlagToRedactionDisabledMessageMap: { [k: string]: string } = {
   IsRedactionServiceOffline: 'Redaction is currently unavailable and undergoing maintenance.',
   OnlyAvailableInCms: 'This document can only be redacted in CMS.',
-  DocTypeNotAllowed: 'Redaction is not supported for this document type.',
+  DocTypeNotAllowed: 'You cannot redact this type of document',
   OriginalFileTypeNotAllowed: 'Redaction is not supported for this file type.',
-  IsDispatched: 'This is a dispatched document.',
+  IsDispatched: 'You cannot redact this type of document because it has been dispatched.',
   IsPageRotationModeOn:
     'Redaction is unavailable in page rotation mode, please turn off page rotation to continue with redaction.',
 };
+
 const getDocumentRedactionDisabledMessage = (doc: TDocument | null | undefined) => {
   const writePresentationFlag = doc?.presentationFlags?.write;
   if (!writePresentationFlag) return null;

From df3f9e849dfc3652658bd112c9cdaf10290d5d82 Mon Sep 17 00:00:00 2001
From: benrome-cps <benjamin.rome@cps.gov.uk>
Date: Wed, 15 Jul 2026 09:23:22 +0100
Subject: [PATCH 17/28] FCT2-20523 fix error sceren on failed re fetch of doc
 list (#446)

---
 .../getters/getDocumentList.tsx               | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx
index d48d5c19..e04c4d3c 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/getters/getDocumentList.tsx
@@ -79,6 +79,9 @@ export const safeGetDocumentListFromLocalStorage = (p: {
   }
 };
 
+const DOCUMENT_LIST_RELOAD_ATTEMPTS = 3;
+const DOCUMENT_LIST_RELOAD_RETRY_DELAY_MS = 400;
+
 export const useGetDocumentList = (p: { urn: string | undefined; caseId: number | undefined }) => {
   const axiosInstance = useAxiosInstance();
 
@@ -96,13 +99,24 @@ export const useGetDocumentList = (p: { urn: string | undefined; caseId: number
   };
 
   const loadFromAxiosInstance = async () => {
-    const resp = await safeGetDocumentListFromAxiosInstance({
-      axiosInstance,
-      urn: p.urn,
-      caseId: p.caseId,
-    });
-
-    setDocumentList(resp.success ? resp.data : null);
+    for (let attempt = 1; attempt <= DOCUMENT_LIST_RELOAD_ATTEMPTS; attempt++) {
+      const resp = await safeGetDocumentListFromAxiosInstance({
+        axiosInstance,
+        urn: p.urn,
+        caseId: p.caseId,
+      });
+
+      if (resp.success) {
+        setDocumentList(resp.data);
+        return;
+      }
+
+      if (attempt < DOCUMENT_LIST_RELOAD_ATTEMPTS) {
+        await new Promise((resolve) => setTimeout(resolve, DOCUMENT_LIST_RELOAD_RETRY_DELAY_MS));
+      }
+    }
+
+    setDocumentList((prev) => prev ?? null);
   };
 
   const clear = () => setDocumentList(undefined);

From b23174367da22319b658f77977b3202e217ad0ee Mon Sep 17 00:00:00 2001
From: TahmeedAhmed-NTT-CPS <Tahmeed.Ahmed@cps.gov.uk>
Date: Wed, 15 Jul 2026 11:14:16 +0100
Subject: [PATCH 18/28] display error msg for redacting large file (#448)

* display error msg for redacting large file

* refactor hard coded number to const
---
 .../caseWorkApp/components/utils/getData.ts   |  7 +++-
 .../FileTooLargeToRedactModal.tsx             | 37 +++++++++++++++++++
 .../DocumentTabPanel/DocumentTabPanel.tsx     | 23 ++++++++++--
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx

diff --git a/materials_ui/src/caseWorkApp/components/utils/getData.ts b/materials_ui/src/caseWorkApp/components/utils/getData.ts
index 31905b8f..d30469b3 100644
--- a/materials_ui/src/caseWorkApp/components/utils/getData.ts
+++ b/materials_ui/src/caseWorkApp/components/utils/getData.ts
@@ -50,13 +50,16 @@ export const getPdfFiles = async (p: {
   caseId: number | string;
   parentId: number | string;
   childId?: number | string;
-}): Promise<Blob> => {
+}): Promise<{ blob: Blob; isFileTooLarge: boolean }> => {
   try {
     const response = await p.axiosInstance.get(
       `/api/urns/${p.urn}/cases/${p.caseId}/documents/${p.parentId}/versions/${p.childId}/pdf`,
       { responseType: 'blob' },
     );
-    return response.data;
+    const fileTooLargeHeader = response.headers['cps-file-too-large'] ?? null;
+    const isFileTooLarge = fileTooLargeHeader === 'true';
+
+    return { blob: response.data, isFileTooLarge };
   } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
       console.error(`Error getting PDF file: ${error.message}`);
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx
new file mode 100644
index 00000000..eeaababf
--- /dev/null
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx
@@ -0,0 +1,37 @@
+import { GovUkBanner } from '../../../materials_components/DocumentSelectAccordion/templates/GovUkBanner';
+import { Button } from '../../components/button';
+import { Modal } from './Modal';
+
+export const FileTooLargeToRedactModal = (p: { onReturnClick: () => void }) => {
+  const MAX_REDACTABLE_FILE_SIZE = 15;
+
+  return (
+    <Modal onBackgroundClick={p.onReturnClick} onEscPress={p.onReturnClick}>
+      <GovUkBanner
+        variant="error"
+        headerTitle="Error"
+        contentHeading="File is too large for redaction"
+        contentBody={
+          <>
+            <p className="govuk-body">
+              This file is larger than {MAX_REDACTABLE_FILE_SIZE}MB and cannot be redacted.
+            </p>
+
+            <p className="govuk-body">Compress the file and try again.</p>
+
+            <p className="govuk-body">
+              If the file is still too large, ask the investigating authority to send a smaller
+              file.
+            </p>
+
+            <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+              <Button variant="primary" onClick={p.onReturnClick}>
+                Return to case file
+              </Button>
+            </div>
+          </>
+        }
+      />
+    </Modal>
+  );
+};
diff --git a/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx b/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx
index 26371f10..bc174ed5 100644
--- a/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx
+++ b/materials_ui/src/materials_components/DocumentTabPanel/DocumentTabPanel.tsx
@@ -5,6 +5,7 @@ import {
   getPdfFiles,
   useAxiosInstances,
 } from '../../caseWorkApp/components/utils/getData';
+import { FileTooLargeToRedactModal } from '../../caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal';
 import { TLookupsResponse } from '../../caseWorkApp/types/redaction';
 import { Banner } from '../../components';
 import { LoadingSpinner } from '../../components/LoadingSpinner/LoadingSpinner';
@@ -13,7 +14,7 @@ import { TDocument } from '../DocumentSelectAccordion/getters/getDocumentList';
 import { DocumentViewportArea } from '../documenViewportArea';
 import { TRedactionType } from '../PdfRedactor/RedactionTypeSelect';
 import { TRedaction } from '../PdfRedactor/utils/coordUtils';
-import { TMode } from '../PdfRedactor/utils/modeUtils';
+import { isRedactionEnabledMode, TMode } from '../PdfRedactor/utils/modeUtils';
 import type { TSearchHighlight } from '../PdfRedactor/utils/searchHighlightUtils';
 import { TTriggerData } from '../PdfRedactor/utils/useTriggger';
 import { RedactionLogModal } from '../RedactionLog/RedactionLogModal';
@@ -72,6 +73,8 @@ export const DocumentTabPanel = ({
   const [pdfFileUrl, setPdfFileUrl] = useState<string>('');
   const [status, setStatus] = useState<LoadStatus>('loading');
   const [statusCode, setStatusCode] = useState<number | null>(null);
+  const [isFileTooLarge, setIsFileTooLarge] = useState(false);
+  const [showFileTooLargeModal, setShowFileTooLargeModal] = useState(false);
   const blobUrlRef = useRef<string | null>(null);
 
   const [showRedactionLogModal, setShowRedactionLogModal] = useState(false);
@@ -84,13 +87,14 @@ export const DocumentTabPanel = ({
       setStatus('loading');
 
       try {
-        const blob = await getPdfFiles({
+        const { blob, isFileTooLarge } = await getPdfFiles({
           axiosInstance,
           urn,
           caseId,
           parentId: parentId,
           childId: childId,
         });
+        setIsFileTooLarge(isFileTooLarge);
 
         if (blob instanceof Blob) {
           const url = URL.createObjectURL(blob);
@@ -147,6 +151,10 @@ export const DocumentTabPanel = ({
 
       <LoadingSpinner isLoading={status === 'loading'} textContent="Loading document..." />
 
+      {showFileTooLargeModal && (
+        <FileTooLargeToRedactModal onReturnClick={() => setShowFileTooLargeModal(false)} />
+      )}
+
       {status === 'error' && <div className="govuk-error-message">Failed to load Document</div>}
 
       {status === 'error' && statusCode === 403 && (
@@ -162,7 +170,16 @@ export const DocumentTabPanel = ({
           <DocumentViewportArea
             documentName={document.presentationTitle}
             mode={mode}
-            onModeChange={onModeChange}
+            onModeChange={(newMode) => {
+              const isStartRedactingClick = newMode === 'redact' && !isRedactionEnabledMode(mode);
+
+              if (isStartRedactingClick && isFileTooLarge) {
+                setShowFileTooLargeModal(true);
+                return;
+              }
+
+              onModeChange(newMode);
+            }}
             searchMode={
               searchContext
                 ? {

From eec5886a7c2aff97a298e70db728eaec2c40bb7e Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Wed, 15 Jul 2026 14:13:33 +0000
Subject: [PATCH 19/28] 
 FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-3
 (#450)

---
 .../CaseworkPdfRedactorWrapper.tsx                  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index 3d00741d..3c600fcb 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -31,7 +31,7 @@ import { saveDeletions } from './utils/saveDeletionsUtils';
 import { saveRedactions } from './utils/saveRedactionsUtils';
 import { saveRotations } from './utils/saveRotationsUtils';
 
-const presentationWriteFlagToRedactionDisabledMessageMap: { [k: string]: string } = {
+const presentationWriteFlagToRedactionDisabledMessageMap = {
   IsRedactionServiceOffline: 'Redaction is currently unavailable and undergoing maintenance.',
   OnlyAvailableInCms: 'This document can only be redacted in CMS.',
   DocTypeNotAllowed: 'You cannot redact this type of document',
@@ -39,13 +39,15 @@ const presentationWriteFlagToRedactionDisabledMessageMap: { [k: string]: string
   IsDispatched: 'You cannot redact this type of document because it has been dispatched.',
   IsPageRotationModeOn:
     'Redaction is unavailable in page rotation mode, please turn off page rotation to continue with redaction.',
-};
+} as const;
 
 const getDocumentRedactionDisabledMessage = (doc: TDocument | null | undefined) => {
   const writePresentationFlag = doc?.presentationFlags?.write;
   if (!writePresentationFlag) return null;
 
-  const value = presentationWriteFlagToRedactionDisabledMessageMap[`${writePresentationFlag}`];
+  const value = (presentationWriteFlagToRedactionDisabledMessageMap as { [k: string]: string })[
+    `${writePresentationFlag}`
+  ];
   return value ? value : null;
 };
 
@@ -302,8 +304,9 @@ export const CaseworkPdfRedactorWrapper = (p: {
           if (isUnredactableDocumentCategory || isDocumentDispatched) {
             removeRedactions(add.map((x) => x.id));
             const message = (() => {
-              if (isDocumentDispatched) return 'This is a dispatched document';
-              return 'Redaction is not supported for this document type.';
+              if (isDocumentDispatched)
+                return presentationWriteFlagToRedactionDisabledMessageMap.IsDispatched;
+              return presentationWriteFlagToRedactionDisabledMessageMap.DocTypeNotAllowed;
             })();
             setDocumentIsUnableToBeRedactedPopupProps({ message });
             return;

From 2b30441eaf9ab82b61e8bdeeb811593490a80773 Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Thu, 16 Jul 2026 09:02:34 +0000
Subject: [PATCH 20/28] 
 FCT2-20395-cwa-make-supporting-notes-required-where-redaction-type-other-is-selected-2
 (#451)

---
 .../RedactionLog/RedactionLogModalBody.tsx        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
index 960e3aaa..f9ea6726 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
@@ -90,6 +90,8 @@ export const RedactionLogModalBody = ({
     formState: { errors },
   } = useFormContext<RedactionLogFormValues>();
 
+  const isSelectedRedactionOfOtherType = selectedRedactionTypes?.some((x) => x.name === 'Other');
+
   const [showPopover, setShowPopover] = useState(false);
 
   const underRedactionSelected = watch('underRedactionSelected');
@@ -339,7 +341,7 @@ export const RedactionLogModalBody = ({
           }}
         >
           <label className="govuk-label" htmlFor="supportingNotes">
-            Supporting notes (optional)
+            Supporting notes {isSelectedRedactionOfOtherType ? '' : '(optional)'}
           </label>
           {errors.supportingNotes && (
             <p className="govuk-error-message">{errors.supportingNotes.message}</p>
@@ -373,13 +375,22 @@ export const RedactionLogModalBody = ({
           )}
         </div>
 
+        {errors.supportingNotes && (
+          <p className="govuk-error-message">{errors.supportingNotes.message}</p>
+        )}
+
         <textarea
           className="govuk-textarea"
           id="supportingNotes"
           rows={5}
-          style={{ width: '50%' }}
+          style={{ width: '550px' }}
           maxLength={400}
           {...register('supportingNotes', {
+            validate: (value) => {
+              if (isSelectedRedactionOfOtherType && value.trim().length === 0)
+                return 'Please enter required Supporting notes';
+              return true;
+            },
             maxLength: { value: 400, message: 'Supporting notes cannot exceed 400 characters' },
           })}
         />

From 3078a94ff228bb0ef6a1a4c10a9a7baefc6e559a Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Thu, 16 Jul 2026 09:28:48 +0000
Subject: [PATCH 21/28] 
 FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-1-2
 (#452)

---
 .../CaseworkPdfRedactorWrapper.tsx            | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index 3c600fcb..64f983a0 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -195,7 +195,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
             <PdfRedactorCenteredModal
               onBackgroundClick={closeModal}
               onEscPress={closeModal}
-              ariaLabel="Unable to redact"
+              ariaLabel="Unable to redact document"
             >
               <GovUkBanner
                 variant="error"
@@ -205,7 +205,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
                     <CloseIcon color="white" />
                   </Button>
                 }
-                contentHeading="Unable to redact"
+                contentHeading="Unable to redact document"
                 contentBody={redactionDisabledModalProps.message}
               />
             </PdfRedactorCenteredModal>
@@ -244,14 +244,17 @@ export const CaseworkPdfRedactorWrapper = (p: {
               onEscPress={closeModal}
               ariaLabel="Unable to redact document"
             >
-              <div style={{ background: 'white', padding: '20px' }}>
-                <h1 className="govuk-heading-m">Unable to redact document</h1>
-                <div>{documentIsUnableToBeRedactedPopupProps.message}</div>
-                <br />
-                <div style={{ display: 'flex', justifyContent: 'center' }}>
-                  <GovUkButton onClick={closeModal}>Ok</GovUkButton>
-                </div>
-              </div>
+              <GovUkBanner
+                variant="error"
+                headerTitle="Error"
+                headerRight={
+                  <Button variant="red" autoFocus onClick={closeModal}>
+                    <CloseIcon color="white" />
+                  </Button>
+                }
+                contentHeading="Unable to redact document"
+                contentBody={documentIsUnableToBeRedactedPopupProps.message}
+              />
             </PdfRedactorCenteredModal>
           );
         })()}

From 9d91d1ec7d13b64ed98d012448291940ce1fb664 Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Mon, 20 Jul 2026 15:36:03 +0100
Subject: [PATCH 22/28] =?UTF-8?q?FCT2-16304-review-redact-tab-redaction-us?=
 =?UTF-8?q?er-alerts-redaction-exceptio=E2=80=A6=20(#455)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-1-3

* FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-1-3
---
 .../RedactionLog/RedactionLogModalBody.tsx                     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
index f9ea6726..0501660d 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
@@ -341,8 +341,9 @@ export const RedactionLogModalBody = ({
           }}
         >
           <label className="govuk-label" htmlFor="supportingNotes">
-            Supporting notes {isSelectedRedactionOfOtherType ? '' : '(optional)'}
+            Supporting notes {isSelectedRedactionOfOtherType ? '(optional)' : ''}
           </label>
+
           {errors.supportingNotes && (
             <p className="govuk-error-message">{errors.supportingNotes.message}</p>
           )}

From 0cf9723263dc028a0ccb57c7391e6ab8a7ba7155 Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Tue, 21 Jul 2026 10:54:41 +0100
Subject: [PATCH 23/28] =?UTF-8?q?FCT2-16304-review-redact-tab-redaction-us?=
 =?UTF-8?q?er-alerts-redaction-exceptio=E2=80=A6=20(#456)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-1-4

* FCT2-16304-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-1-4
---
 .../RedactionLog/RedactionLogModalBody.tsx                 | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
index 0501660d..b98e0950 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModalBody.tsx
@@ -341,13 +341,8 @@ export const RedactionLogModalBody = ({
           }}
         >
           <label className="govuk-label" htmlFor="supportingNotes">
-            Supporting notes {isSelectedRedactionOfOtherType ? '(optional)' : ''}
+            Supporting notes {isSelectedRedactionOfOtherType ? '' : '(optional)'}
           </label>
-
-          {errors.supportingNotes && (
-            <p className="govuk-error-message">{errors.supportingNotes.message}</p>
-          )}
-
           <a
             className="govuk-link"
             onClick={() => setShowPopover(!showPopover)}

From 3427856c654aa3efda4f286a34ea76c6206c95ee Mon Sep 17 00:00:00 2001
From: benrome-cps <benjamin.rome@cps.gov.uk>
Date: Wed, 22 Jul 2026 13:27:24 +0100
Subject: [PATCH 24/28] FCT2-20693 clickable search results and fix search
 (#457)

---
 .../DocumentKeywordSearch.tsx                 |   6 +-
 .../src/hooks/search/useDocumentSearch.ts     |   4 +-
 .../CaseworkPdfRedactorWrapper.tsx            | 129 ++++++++++--------
 .../PdfRedactor/PdfRedactor.tsx               |   3 +-
 .../PdfRedactor/PdfRedactorComponents.tsx     |  36 +++--
 .../PdfRedactor/PdfRedactorPage.tsx           |   1 +
 .../PdfRedactor/utils/searchHighlightUtils.ts |  22 ++-
 materials_ui/src/schemas/documents.ts         |   8 +-
 8 files changed, 128 insertions(+), 81 deletions(-)

diff --git a/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx b/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx
index 939cf5ff..e1442e66 100644
--- a/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx
+++ b/materials_ui/src/components/DocumentKeywordSearch/DocumentKeywordSearch.tsx
@@ -87,9 +87,9 @@ export const DocumentKeywordSearch = ({ modalOpen, setModalOpen }: DocumentKeywo
 
   const highlightExactMatches = (
     text: string,
-    words: { boundingBox: number[] | null; text: string; matchType: string[] }[],
+    words: { boundingBox: number[] | null; text: string; matchType: string }[],
   ) => {
-    const exactWords = words.filter((w) => w.matchType.includes('Exact')).map((w) => w.text);
+    const exactWords = words.filter((w) => w.matchType === 'Exact').map((w) => w.text);
 
     if (!text || exactWords.length === 0) return text;
 
@@ -185,7 +185,7 @@ export const DocumentKeywordSearch = ({ modalOpen, setModalOpen }: DocumentKeywo
                 const isExpanded = expandedDocuments[doc.parentId] ?? false;
                 const first = doc.matches[0];
                 const firstLineMatchCount =
-                  first?.words.filter((word) => word.matchType?.includes('Exact')).length ?? 0;
+                  first?.words.filter((word) => word.matchType === 'Exact').length ?? 0;
                 const remainingCount = (doc.resultsPerDocumentCount ?? 0) - firstLineMatchCount;
 
                 return (
diff --git a/materials_ui/src/hooks/search/useDocumentSearch.ts b/materials_ui/src/hooks/search/useDocumentSearch.ts
index 4e1dfa72..2c6991d3 100644
--- a/materials_ui/src/hooks/search/useDocumentSearch.ts
+++ b/materials_ui/src/hooks/search/useDocumentSearch.ts
@@ -38,10 +38,10 @@ export const useDocumentSearchResults = (
   const combinedSearchResults: SearchTermResultType[] = [];
 
   for (const doc of documents) {
-    const matches = searchResults.filter((sr) => sr.parentId === doc.parentId);
+    const matches = searchResults.filter((sr) => sr.documentId === doc.parentId);
 
     const resultsPerDocumentCount = matches.reduce((acc, curr) => {
-      const count = curr.words.filter((w) => w.matchType?.includes('Exact')).length;
+      const count = curr.words.filter((w) => w.matchType === 'Exact').length;
 
       return acc + count;
     }, 0);
diff --git a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
index 64f983a0..138c7442 100644
--- a/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
+++ b/materials_ui/src/materials_components/CaseworkPdfRedactorWrapper/CaseworkPdfRedactorWrapper.tsx
@@ -17,7 +17,11 @@ import { TCoord, TRedaction } from '../PdfRedactor/utils/coordUtils';
 import { TIndexedDeletion } from '../PdfRedactor/utils/deletionUtils';
 import { TMode } from '../PdfRedactor/utils/modeUtils';
 import { TIndexedRotation, TRotation } from '../PdfRedactor/utils/rotationUtils';
-import type { THighlightLayer, TSearchHighlight } from '../PdfRedactor/utils/searchHighlightUtils';
+import {
+  convertSearchHighlightToRedaction,
+  type THighlightLayer,
+  type TSearchHighlight,
+} from '../PdfRedactor/utils/searchHighlightUtils';
 import { TTriggerData, useTriggerListener } from '../PdfRedactor/utils/useTriggger';
 import { useWindowMouseListener } from '../PdfRedactor/utils/useWindowMouseListener';
 import { useBulkRedactionFlow } from './hooks/useBulkRedactionFlow';
@@ -137,14 +141,6 @@ export const CaseworkPdfRedactorWrapper = (p: {
     setSelectedRedactionTypes,
   });
 
-  const searchLayer: THighlightLayer = {
-    highlights: p.searchHighlights ?? [],
-    focusedId:
-      p.focusedSearchIndex !== undefined
-        ? p.searchHighlights?.[p.focusedSearchIndex]?.id
-        : undefined,
-  };
-
   const [documentIsCheckedOutPopupProps, setDocumentIsCheckedOutPopupProps] = useState<{
     action: string;
     message: string;
@@ -185,6 +181,73 @@ export const CaseworkPdfRedactorWrapper = (p: {
     return checkoutResponse;
   };
 
+  const handleAddRedactions = async ({
+    redactions: add,
+    highlightedText,
+  }: {
+    redactions: TRedaction[];
+    highlightedText: string | undefined;
+  }) => {
+    if (isUnredactableDocumentCategory || isDocumentDispatched) {
+      removeRedactions(add.map((x) => x.id));
+      const message = (() => {
+        if (isDocumentDispatched)
+          return presentationWriteFlagToRedactionDisabledMessageMap.IsDispatched;
+        return presentationWriteFlagToRedactionDisabledMessageMap.DocTypeNotAllowed;
+      })();
+      setDocumentIsUnableToBeRedactedPopupProps({ message });
+      return;
+    }
+
+    const popoverAnchor = (() => {
+      if (highlightedText) {
+        const rect = window.getSelection()?.getRangeAt(0)?.getBoundingClientRect();
+        if (rect && rect.width > 0) {
+          return { x: (rect.left + rect.right) / 2, y: rect.top };
+        }
+      }
+      return { x: mousePos.current.x, y: mousePos.current.y };
+    })();
+
+    const checkoutResponsePromise = checkCheckoutStatus();
+    const redactionDisabledMessage = getDocumentRedactionDisabledMessage(p.document);
+    if (redactionDisabledMessage) {
+      removeRedactions(add.map((x) => x.id));
+      setRedactionDisabledModalProps({ message: redactionDisabledMessage });
+      return;
+    }
+    const checkoutResponse = await checkoutResponsePromise;
+    if (!checkoutResponse.success) {
+      removeRedactions(add.map((x) => x.id));
+      const message = createCheckoutMessageFromCheckoutResponse({
+        action: 'redact',
+        message: checkoutResponse.message,
+      });
+      setDocumentIsCheckedOutPopupProps({ action: 'redact', message });
+      return;
+    }
+
+    bulkFlow.openPopover({
+      x: popoverAnchor.x,
+      y: popoverAnchor.y,
+      redactionIds: add.map((x) => x.id),
+      highlightedText,
+    });
+  };
+
+  const searchLayer: THighlightLayer = {
+    highlights: p.searchHighlights ?? [],
+    focusedId:
+      p.focusedSearchIndex !== undefined
+        ? p.searchHighlights?.[p.focusedSearchIndex]?.id
+        : undefined,
+    onHighlightClick: (highlight) => {
+      const redaction = convertSearchHighlightToRedaction(highlight);
+      setRedactions((prev) => [...prev, redaction]);
+      handleAddRedactions({ redactions: [redaction], highlightedText: undefined });
+    },
+  };
+
   return (
     <div>
       {redactionDisabledModalProps &&
@@ -303,53 +366,7 @@ export const CaseworkPdfRedactorWrapper = (p: {
             setSelectedRedactionTypes([]);
           }
         }}
-        onAddRedactions={async ({ redactions: add, highlightedText }) => {
-          if (isUnredactableDocumentCategory || isDocumentDispatched) {
-            removeRedactions(add.map((x) => x.id));
-            const message = (() => {
-              if (isDocumentDispatched)
-                return presentationWriteFlagToRedactionDisabledMessageMap.IsDispatched;
-              return presentationWriteFlagToRedactionDisabledMessageMap.DocTypeNotAllowed;
-            })();
-            setDocumentIsUnableToBeRedactedPopupProps({ message });
-            return;
-          }
-
-          const popoverAnchor = (() => {
-            if (highlightedText) {
-              const rect = window.getSelection()?.getRangeAt(0)?.getBoundingClientRect();
-              if (rect && rect.width > 0) {
-                return { x: (rect.left + rect.right) / 2, y: rect.top };
-              }
-            }
-            return { x: mousePos.current.x, y: mousePos.current.y };
-          })();
-
-          const checkoutResponsePromise = checkCheckoutStatus();
-          const redactionDisabledMessage = getDocumentRedactionDisabledMessage(p.document);
-          if (redactionDisabledMessage) {
-            removeRedactions(add.map((x) => x.id));
-            setRedactionDisabledModalProps({ message: redactionDisabledMessage });
-            return;
-          }
-          const checkoutResponse = await checkoutResponsePromise;
-          if (!checkoutResponse.success) {
-            removeRedactions(add.map((x) => x.id));
-            const message = createCheckoutMessageFromCheckoutResponse({
-              action: 'redact',
-              message: checkoutResponse.message,
-            });
-            setDocumentIsCheckedOutPopupProps({ action: 'redact', message });
-            return;
-          }
-
-          bulkFlow.openPopover({
-            x: popoverAnchor.x,
-            y: popoverAnchor.y,
-            redactionIds: add.map((x) => x.id),
-            highlightedText,
-          });
-        }}
+        onAddRedactions={handleAddRedactions}
         onRemoveRedactions={() => {}}
         onSaveRedactions={async () => {
           p.onRedactionSaveStatusChange('saving');
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
index 5a8c272e..df108c34 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactor.tsx
@@ -264,7 +264,7 @@ export const PdfRedactor = (p: {
           if (!byPage[highlight.pageNumber]) byPage[highlight.pageNumber] = [];
           byPage[highlight.pageNumber]!.push(highlight);
         });
-        return { byPage, focusedId: layer.focusedId };
+        return { byPage, focusedId: layer.focusedId, onHighlightClick: layer.onHighlightClick };
       }),
     [p.highlightLayers],
   );
@@ -490,6 +490,7 @@ export const PdfRedactor = (p: {
                 highlightLayers={indexedHighlightLayers.map((layer) => ({
                   highlights: layer.byPage[j + 1] ?? [],
                   focusedId: layer.focusedId,
+                  onHighlightClick: layer.onHighlightClick,
                 }))}
                 pageIsDelete={!!p.indexedDeletion[j + 1]?.isDeleted}
                 onPageIsDeleteChange={(isDeleted) => {
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx
index 03059659..3e1e89a9 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorComponents.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { useScrollToFocusedHighlight } from './hooks/useScrollToFocusedHighlight';
 import type { TXywhPair } from './utils/coordUtils';
 import type { TSearchHighlight } from './utils/searchHighlightUtils';
@@ -61,9 +61,12 @@ export const PdfTextHighlightOverlay = (p: {
   focusedId?: string;
   pageDimensions: { width: number; height: number };
   scale: number;
+  onHighlightClick?: (highlight: TSearchHighlight) => void;
 }) => {
   useScrollToFocusedHighlight(p.highlights, p.focusedId);
 
+  const isClickable = !!p.onHighlightClick;
+
   return (
     <>
       {p.highlights.map((hl) => {
@@ -74,6 +77,15 @@ export const PdfTextHighlightOverlay = (p: {
         const height = (hl.yBottom - hl.yTop) * heightScale;
         const yBottom = p.pageDimensions.height - hl.yBottom * heightScale;
         const isFocused = hl.id === p.focusedId;
+        const boxStyle: CSSProperties = {
+          height: '100%',
+          width: '100%',
+          background: isFocused ? 'rgba(255, 221, 0, 0.4)' : 'rgba(255, 0, 0, 0.3)',
+          border: isFocused ? '3px dashed rgba(255, 221, 0, 0.4)' : '3px dashed #ff4141',
+          boxSizing: 'border-box',
+          pointerEvents: isClickable ? 'auto' : 'none',
+          cursor: isClickable ? 'pointer' : undefined,
+        };
         return (
           <PositionPdfOverlayBox
             key={hl.id}
@@ -83,17 +95,17 @@ export const PdfTextHighlightOverlay = (p: {
             height={height}
             scale={p.scale}
           >
-            <div
-              data-text-highlight-id={hl.id}
-              style={{
-                height: '100%',
-                width: '100%',
-                background: isFocused ? 'rgba(255, 221, 0, 0.4)' : 'rgba(255, 0, 0, 0.3)',
-                border: isFocused ? '3px dashed rgba(255, 221, 0, 0.4)' : '3px dashed #ff4141',
-                boxSizing: 'border-box',
-                pointerEvents: 'none',
-              }}
-            />
+            {isClickable ? (
+              <button
+                type="button"
+                data-text-highlight-id={hl.id}
+                aria-label="Redact search match"
+                onClick={() => p.onHighlightClick!(hl)}
+                style={{ ...boxStyle, margin: 0, position: 'relative', zIndex: 11 }}
+              />
+            ) : (
+              <div data-text-highlight-id={hl.id} style={boxStyle} />
+            )}
           </PositionPdfOverlayBox>
         );
       })}
diff --git a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
index fa06e945..7bf5bf60 100644
--- a/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
+++ b/materials_ui/src/materials_components/PdfRedactor/PdfRedactorPage.tsx
@@ -526,6 +526,7 @@ export const PdfRedactorPage = (p: {
                   focusedId={layer.focusedId}
                   pageDimensions={pageDimensions}
                   scale={p.scale}
+                  onHighlightClick={layer.onHighlightClick}
                 />
               ))}
           </div>
diff --git a/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts b/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts
index 92235df8..61e8449c 100644
--- a/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts
+++ b/materials_ui/src/materials_components/PdfRedactor/utils/searchHighlightUtils.ts
@@ -1,4 +1,5 @@
 import type { SearchTermResultType } from '../../../schemas/documents';
+import type { TRedaction } from './coordUtils';
 
 const PADDING_INCHES = 0.03;
 
@@ -13,7 +14,22 @@ export type TSearchHighlight = {
   yBottom: number;
 };
 
-export type THighlightLayer = { highlights: TSearchHighlight[]; focusedId?: string };
+export type THighlightLayer = {
+  highlights: TSearchHighlight[];
+  focusedId?: string;
+  onHighlightClick?: (highlight: TSearchHighlight) => void;
+};
+
+export const convertSearchHighlightToRedaction = (highlight: TSearchHighlight): TRedaction => ({
+  id: crypto.randomUUID(),
+  pageNumber: highlight.pageNumber,
+  pageHeight: highlight.pageHeight,
+  pageWidth: highlight.pageWidth,
+  x1: highlight.xLeft,
+  y1: highlight.pageHeight - highlight.yBottom,
+  x2: highlight.xRight,
+  y2: highlight.pageHeight - highlight.yTop,
+});
 
 export const convertMatchesToSearchHighlights = (
   matches: SearchTermResultType['matches'],
@@ -21,7 +37,7 @@ export const convertMatchesToSearchHighlights = (
   matches
     .flatMap((match) =>
       match.words
-        .filter((w) => w.matchType?.includes('Exact') && w.boundingBox)
+        .filter((w) => w.matchType === 'Exact' && w.boundingBox)
         .map((w) => {
           const xs = [
             w.boundingBox![0]!,
@@ -40,7 +56,7 @@ export const convertMatchesToSearchHighlights = (
             pageNumber: match.pageIndex,
             pageHeight: match.pageHeight,
             pageWidth: match.pageWidth,
-            xLeft: Math.min(...xs) + PADDING_INCHES,
+            xLeft: Math.min(...xs) - PADDING_INCHES,
             xRight: Math.max(...xs) + PADDING_INCHES,
             yTop: Math.min(...ys) - PADDING_INCHES,
             yBottom: Math.max(...ys) + PADDING_INCHES,
diff --git a/materials_ui/src/schemas/documents.ts b/materials_ui/src/schemas/documents.ts
index 1d34c612..4616ff9a 100644
--- a/materials_ui/src/schemas/documents.ts
+++ b/materials_ui/src/schemas/documents.ts
@@ -35,8 +35,8 @@ export const DocumentSchema = z.object({
 
 export const SearchResultSchema = z.object({
   id: z.string(),
-  parentId: z.string(),
-  childId: z.string(),
+  documentId: z.string(),
+  versionId: z.number(),
   fileName: z.string(),
   pageIndex: z.number(),
   lineIndex: z.number(),
@@ -47,7 +47,7 @@ export const SearchResultSchema = z.object({
     z.object({
       boundingBox: z.array(z.number()).nullable(),
       text: z.string(),
-      matchType: z.array(z.string()),
+      matchType: z.string(),
     }),
   ),
 });
@@ -68,7 +68,7 @@ export const SearchTermResultSchema = z.object({
         z.object({
           boundingBox: z.array(z.number()).nullable(),
           text: z.string(),
-          matchType: z.array(z.string()),
+          matchType: z.string(),
         }),
       ),
     }),

From 28c3dc19a242857f1058e8c2358f052b98921693 Mon Sep 17 00:00:00 2001
From: robmolloy-cps <robert.molloy@cps.gov.uk>
Date: Thu, 23 Jul 2026 15:56:50 +0100
Subject: [PATCH 25/28] 
 FCT2-16686-review-redact-tab-redaction-user-alerts-redaction-exceptions-update-2
 (#454)

---
 .../ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx      | 2 +-
 .../pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx     | 2 +-
 .../pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx
index db66a88f..20d3a9b1 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/CloseTabUnsavedRedactionsModal.tsx
@@ -25,7 +25,7 @@ export const CloseTabUnsavedRedactionsModal = (p: {
             <p className="govuk-body">If you select Ignore your redactions will not be applied.</p>
             <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
               <Button variant="primary" onClick={p.onReturnClick}>
-                Return to case file
+                Return to document
               </Button>
               <Button variant="inverse" onClick={p.onIgnoreClick}>
                 Ignore
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx
index eeaababf..35105643 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/FileTooLargeToRedactModal.tsx
@@ -26,7 +26,7 @@ export const FileTooLargeToRedactModal = (p: { onReturnClick: () => void }) => {
 
             <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
               <Button variant="primary" onClick={p.onReturnClick}>
-                Return to case file
+                Return to document
               </Button>
             </div>
           </>
diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
index 8f13158d..eb4c3524 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
@@ -55,7 +55,7 @@ export const UnsavedRedactionsModal = ({
             <br />
             <div style={{ display: 'flex', gap: '16px' }}>
               <Button variant="primary" onClick={onReturnClick}>
-                Return to case file
+                Return to document
               </Button>
               <Button variant="inverse" onClick={onIgnoreClick}>
                 Ignore

From b0748a90769841ebbe52b2e7fa9d54cfcaefd760 Mon Sep 17 00:00:00 2001
From: benrome-cps <benjamin.rome@cps.gov.uk>
Date: Thu, 23 Jul 2026 16:48:32 +0100
Subject: [PATCH 26/28] FCT2-20797 / FCT2-20795 / FCT2-20631 JAWS fixes (#460)

* JAWS fixes

* sonar fixes

* remoev useEffect for closing modal

* mock route in test
---
 materials_ui/src/components/Banner/Banner.tsx  |  5 ++++-
 .../DocumentSidebarNotes.tsx                   |  4 ++--
 .../RedactionLog/Modal.tsx                     | 18 +++++++++++++++---
 .../RedactionLog/RedactionLogModal.tsx         |  2 +-
 .../tests/tests-e2e/review-redact.spec.ts      |  4 ++++
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/materials_ui/src/components/Banner/Banner.tsx b/materials_ui/src/components/Banner/Banner.tsx
index fcbad05d..5e4dd963 100644
--- a/materials_ui/src/components/Banner/Banner.tsx
+++ b/materials_ui/src/components/Banner/Banner.tsx
@@ -35,12 +35,15 @@ export const Banner = ({ type = 'success', header, content }: PropsWithChildren<
     }
   };
 
+  const title = `${getBannerTitle()}: ${header}`;
+  const announcement = content ? `${title}. ${content}` : title;
+
   return (
     <div
       ref={bannerRef}
       className={`govuk-notification-banner ${getBannerClass()}`}
       role="alert"
-      aria-labelledby="govuk-notification-banner-title"
+      aria-label={announcement}
       data-module="govuk-notification-banner"
       tabIndex={-1}
     >
diff --git a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx
index 3387f883..a12be96c 100644
--- a/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx
+++ b/materials_ui/src/materials_components/DocumentSelectAccordion/DocumentSidebarNotes.tsx
@@ -66,9 +66,9 @@ export const DocumentSidebarNotes = (p: {
             maxLength={NOTES_CHAR_COUNT_MAX_LENGTH}
             rows={5}
           />
-          <span id="notes-char-count" role="status" aria-live="polite" aria-atomic="true">
+          <output id="notes-char-count" htmlFor="notes-textarea">
             You have {remainingCharacters} characters remaining
-          </span>
+          </output>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <GovUkButton
               onClick={async () => {
diff --git a/materials_ui/src/materials_components/RedactionLog/Modal.tsx b/materials_ui/src/materials_components/RedactionLog/Modal.tsx
index e92a8f07..7f83c7c7 100644
--- a/materials_ui/src/materials_components/RedactionLog/Modal.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/Modal.tsx
@@ -1,10 +1,15 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import { useFocusTrap } from '../../caseWorkApp/hooks/useFocusTrap';
+import { useLastFocus } from '../../caseWorkApp/hooks/useLastFocus';
 import styles from './RedactionLogModal.module.scss';
 
-type ModalProps = { children: React.ReactNode; onClose: () => void };
+type ModalProps = { children: React.ReactNode; onClose: () => void; ariaLabel: string };
+
+export const Modal = ({ children, onClose, ariaLabel }: ModalProps) => {
+  useFocusTrap('#redaction-log-modal');
+  useLastFocus();
 
-export const Modal = ({ children, onClose }: ModalProps) => {
   useEffect(() => {
     document.body.style.overflow = 'hidden';
     return () => {
@@ -14,7 +19,14 @@ export const Modal = ({ children, onClose }: ModalProps) => {
 
   return ReactDOM.createPortal(
     <div className={styles.modalOverlay} onClick={onClose}>
-      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+      <div
+        id="redaction-log-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        className={styles.modalContent}
+        onClick={(e) => e.stopPropagation()}
+      >
         {children}
       </div>
     </div>,
diff --git a/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx b/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx
index 05015614..e76dc90d 100644
--- a/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx
+++ b/materials_ui/src/materials_components/RedactionLog/RedactionLogModal.tsx
@@ -172,7 +172,7 @@ export const RedactionLogModal = ({
   if (!isOpen) return null;
 
   return (
-    <Modal onClose={onClose}>
+    <Modal onClose={onClose} ariaLabel={`${urn} - Redaction Log`}>
       <FormProvider {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
           {redactionSaveStatus === 'saving' && (
diff --git a/materials_ui/tests/tests-e2e/review-redact.spec.ts b/materials_ui/tests/tests-e2e/review-redact.spec.ts
index 71ed2678..43a8ad26 100644
--- a/materials_ui/tests/tests-e2e/review-redact.spec.ts
+++ b/materials_ui/tests/tests-e2e/review-redact.spec.ts
@@ -26,6 +26,10 @@ test.describe('Review redact page', () => {
   });
 
   test('T-002: If no searches are found messages is displayed to user', async ({ page }) => {
+    await mockRoute(page, '/cases/2167259', {});
+    await mockRoute(page, '/cases/2167259/tracker', { status: 'Completed', documents: [] });
+    await mockRoute(page, '/cases/2167259/search/**', []);
+
     await expect(page.getByRole('searchbox', { name: 'Search within material' })).toBeVisible();
     await page.getByRole('searchbox', { name: 'Search within material' }).fill('test search');
     await page

From 562b9237aeaf86dc164d756ae6634dd03f10255e Mon Sep 17 00:00:00 2001
From: benrome-cps <benjamin.rome@cps.gov.uk>
Date: Thu, 23 Jul 2026 17:13:49 +0100
Subject: [PATCH 27/28] fix copy for return to case button (#461)

---
 .../pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
index eb4c3524..2a386b02 100644
--- a/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
+++ b/materials_ui/src/caseWorkApp/pages/ReviewAndRedactPage/UnsavedRedactionsModal.tsx
@@ -55,7 +55,7 @@ export const UnsavedRedactionsModal = ({
             <br />
             <div style={{ display: 'flex', gap: '16px' }}>
               <Button variant="primary" onClick={onReturnClick}>
-                Return to document
+                Return to case
               </Button>
               <Button variant="inverse" onClick={onIgnoreClick}>
                 Ignore

From 96975738fe8fbbd0caec0985f8e77fa603934a64 Mon Sep 17 00:00:00 2001
From: afeescps <afees.kolawole@cps.gov.uk>
Date: Fri, 24 Jul 2026 12:42:58 +0100
Subject: [PATCH 28/28] feat(materials): support private beta usage reporting
 in App Insights (#458)

Emit AppOpened once per app load and stamp MSAL localAccountId on telemetry
so weekly reports can count distinct users without PageVisitTime sampling bias.
Add private-beta-weekly-usage.kql (rolling 7d/30d windows, beta floor
2026-05-07) and unit tests for telemetry helpers.
---
 materials_ui/src/app.tsx                  | 20 +++++++++++++++++++-
 materials_ui/src/telemetry/appInsights.ts | 15 +++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/materials_ui/src/app.tsx b/materials_ui/src/app.tsx
index d2a9ff2c..363eeff1 100644
--- a/materials_ui/src/app.tsx
+++ b/materials_ui/src/app.tsx
@@ -3,7 +3,13 @@ import { useEffect } from 'react';
 import { RouteChangeListener } from './components';
 import { loginRequest } from './msalInstance';
 import { Routes } from './routes';
-import { setTelemetryUserRole } from './telemetry/appInsights';
+import {
+  setTelemetryAuthenticatedUser,
+  setTelemetryUserRole,
+  trackAppOpened,
+} from './telemetry/appInsights';
+
+let appOpenedTracked = false;
 
 export const App = () => {
   const { instance, accounts } = useMsal();
@@ -21,6 +27,18 @@ export const App = () => {
     if (role) setTelemetryUserRole(role);
   }, [role]);
 
+  const accountId = account?.localAccountId;
+
+  useEffect(() => {
+    if (!accountId) return;
+    // Stamp the signed-in user first so the AppOpened event carries it.
+    setTelemetryAuthenticatedUser(accountId);
+    if (!appOpenedTracked) {
+      appOpenedTracked = true;
+      trackAppOpened();
+    }
+  }, [accountId]);
+
   if (!account) {
     return <p>Redirecting to login...</p>;
   }
diff --git a/materials_ui/src/telemetry/appInsights.ts b/materials_ui/src/telemetry/appInsights.ts
index 7af330a0..05317e92 100644
--- a/materials_ui/src/telemetry/appInsights.ts
+++ b/materials_ui/src/telemetry/appInsights.ts
@@ -7,6 +7,7 @@ const samplingPercentage =
 
 let appInsights: ApplicationInsights | undefined;
 let userRole: string | undefined;
+let authenticatedUserId: string | undefined;
 
 const normaliseError = (error: unknown): Error =>
   error instanceof Error ? error : new Error(String(error));
@@ -44,6 +45,13 @@ export const initTelemetry = () => {
       item.tags['ai.cloud.role'] = cloudRole;
     }
 
+    // Stamp the signed-in user (MSAL localAccountId, a GUID — no PII) so
+    // reports can count distinct people rather than anonymous browser ids.
+    if (authenticatedUserId) {
+      item.tags ??= {};
+      item.tags['ai.user.authUserId'] = authenticatedUserId;
+    }
+
     if (userRole) {
       item.data ??= {};
       item.data.userRole = userRole;
@@ -61,6 +69,10 @@ export const setTelemetryUserRole = (role: string) => {
   userRole = role;
 };
 
+export const setTelemetryAuthenticatedUser = (id: string) => {
+  authenticatedUserId = id;
+};
+
 export const trackPageView = (pathname: string) => {
   if (!appInsights) return;
   const name = stripCaseIdsFromRoute(pathname);
@@ -73,6 +85,9 @@ export const trackPageView = (pathname: string) => {
 export const trackAction = (action: string, properties?: ICustomProperties) =>
   appInsights?.trackEvent({ name: 'UserAction' }, { action, ...properties });
 
+// Once per load; events are not client-sampled (unlike page views / PageVisitTime).
+export const trackAppOpened = () => appInsights?.trackEvent({ name: 'AppOpened' });
+
 export const trackEvent = (name: string, properties?: ICustomProperties) =>
   appInsights?.trackEvent({ name }, properties);