diff --git a/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts b/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
index 90dda4f6d0..88e34dc189 100644
--- a/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
+++ b/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
@@ -30,9 +30,10 @@ import {
 import {
   GeoJsonChangeHandler,
   mockChangedMapGeoJson,
-  mockMapGeoJson,
   mockPropertyTypeOptions,
+  mockTitleBoundaryGeoJson,
 } from "./mocks/geospatialMocks";
+import { setupOSMapsStyles, setupOSMapsVectorTiles } from "./mocks/osMapsResponse";
 
 test.describe("Flow creation, publish and preview", () => {
   let context: TestContext = {
@@ -126,6 +127,9 @@ test.describe("Flow creation, publish and preview", () => {
       `/${context.team.slug}/${serviceProps.slug}/published?analytics=false`,
     );
 
+    setupOSMapsStyles(page)
+    setupOSMapsVectorTiles(page)
+
     await expect(
       page.locator("h1", { hasText: "Find the property" }),
     ).toBeVisible();
@@ -137,7 +141,7 @@ test.describe("Flow creation, publish and preview", () => {
     ).toBeVisible();
 
     // Check map component has geoJson content
-    await checkGeoJsonContent(page, "geojsondata", mockMapGeoJson);
+    await checkGeoJsonContent(page, "geojsondata", mockTitleBoundaryGeoJson);
 
     // Check property info is being shown
     await expect(page.getByText("Test Street, Testville")).toBeVisible();
@@ -181,16 +185,14 @@ test.describe("Flow creation, publish and preview", () => {
     });
     await expect(
       drawBoundaryTitle,
-      "We are in the Draw Boundary component",
     ).toBeVisible();
 
-    await checkGeoJsonContent(page, "drawgeojsondata", mockMapGeoJson);
+    await checkGeoJsonContent(page, "drawgeojsondata", mockTitleBoundaryGeoJson);
 
-    const area = "490.37";
+    const area = "The property boundary you have drawn is 490.37";
 
     await expect(
       page.getByText(area),
-      "We can see a value for area",
     ).toBeVisible();
 
     // navigate to upload file page and back
@@ -217,7 +219,7 @@ test.describe("Flow creation, publish and preview", () => {
 
     await expect(
       page.getByText(`${parsedJson.properties!["area.squareMetres"]}`),
-      "We can see a new value for area",
+      "The correct value for area comes from the map properties ",
     ).toBeVisible();
 
     // TODO: answer uploadAndLabel
diff --git a/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts b/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts
index e56646bf73..bca773dca2 100644
--- a/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts
+++ b/e2e/tests/ui-driven/src/mocks/geospatialMocks.ts
@@ -1,5 +1,5 @@
 import { OptionWithDataValues } from "../helpers/types";
-import { Feature, Polygon, Position } from "geojson";
+import { Feature, Polygon } from "geojson";
 
 type ChangeHandlerProperties = {
   label: string;
@@ -14,22 +14,20 @@ export const mockPropertyTypeOptions: OptionWithDataValues[] = [
   { optionText: "Commercial", dataValue: "commercial" },
 ];
 
-const mockCoordinates: Position[][][] = [
-  [
+export const mockTitleBoundaryGeoJson: Feature = {
+  type: "Feature",
+  geometry: { type: "MultiPolygon", coordinates: [
     [
-      [-0.633498, 51.605485],
-      [-0.633455, 51.605606],
-      [-0.633788, 51.605643],
-      [-0.634429, 51.605799],
-      [-0.634429, 51.605767],
-      [-0.633498, 51.605485],
+      [
+        [-0.633498, 51.605485],
+        [-0.633455, 51.605606],
+        [-0.633788, 51.605643],
+        [-0.634429, 51.605799],
+        [-0.634429, 51.605767],
+        [-0.633498, 51.605485],
+      ],
     ],
-  ],
-];
-
-export const mockMapGeoJson: Feature = {
-  type: "Feature",
-  geometry: { type: "MultiPolygon", coordinates: mockCoordinates },
+  ]},
   properties: {
     "entry-date": "2024-05-06",
     "start-date": "2010-05-12",
diff --git a/e2e/tests/ui-driven/src/mocks/osMapsMockData.ts b/e2e/tests/ui-driven/src/mocks/osMapsMockData.ts
new file mode 100644
index 0000000000..3df672f0ef
--- /dev/null
+++ b/e2e/tests/ui-driven/src/mocks/osMapsMockData.ts
@@ -0,0 +1,20 @@
+export const osMapsStylesResponse = {
+    version: 8,
+    sprite: "https://api.os.uk/maps/vector/v1/vts/resources/sprites/sprite?key=YOUR_KEY&srs=3857",
+    glyphs: "https://api.os.uk/maps/vector/v1/vts/resources/fonts/{fontstack}/{range}.pbf?key=YOUR_KEY&srs=3857",
+    sources: {
+      esri: {
+        type: "vector",
+        url: "https://api.os.uk/maps/vector/v1/vts?key=YOUR_KEY&srs=3857"
+      }
+    },
+    layers: [
+      {
+        id: "background",
+        type: "background",
+        paint: {
+          "background-color": "#0437F2"
+        }
+      },
+    ]
+  };
\ No newline at end of file
diff --git a/e2e/tests/ui-driven/src/mocks/osMapsResponse.ts b/e2e/tests/ui-driven/src/mocks/osMapsResponse.ts
new file mode 100644
index 0000000000..ae48bd1d96
--- /dev/null
+++ b/e2e/tests/ui-driven/src/mocks/osMapsResponse.ts
@@ -0,0 +1,27 @@
+import { Page } from "@playwright/test";
+import { osMapsStylesResponse } from "./osMapsMockData";
+
+export async function setupOSMapsStyles(page: Page) {
+  const ordnanceSurveyMapsStyles = new RegExp(
+    /\/proxy\/ordnance-survey\/maps\/vector\/v1\/vts\/resources\/styles.*/,
+  );
+  await page.route(ordnanceSurveyMapsStyles, async (route) => {
+    await route.fulfill({
+      status: 200,
+      body: JSON.stringify(osMapsStylesResponse),
+    });
+  });
+}
+
+export async function setupOSMapsVectorTiles(page: Page){
+    const ordnanceSurveyVectorTiles = new RegExp(
+        /\/proxy\/ordnance-survey\/maps\/vector\/v1\/vts\/tile/,
+    )
+
+    await page.route(ordnanceSurveyVectorTiles, async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: Buffer.from([]),
+        });
+      });
+}
\ No newline at end of file