diff --git a/README.md b/README.md
index f70628af..41c33ff0 100644
--- a/README.md
+++ b/README.md
@@ -33,11 +33,18 @@ Pre-requisites:
 - Access to OpenShift namespace for Organics Info (ORI) project
 - OC CLI installed.(https://console.apps.silver.devops.gov.bc.ca/command-line-tools)
 - .env file is created in the backend folder based on the .env.sample file, the values can be retrieved from secrets in
-  OpenShift namespace.
+  OpenShift namespace: 
+  - `NR_ORACLE_SERVICE_URL=http://localhost:9080`
+  - `NR_ORACLE_SERVICE_KEY` value is the `apiKey` value in the [nr-oracle-service dev project](https://console.apps.silver.devops.gov.bc.ca/k8s/ns/d37bb7-dev/secrets/nr-oracle-service)
+  -  The `OS_` values can be found in the [nr-epd-organics-info-prod project](https://console.apps.silver.devops.gov.bc.ca/k8s/ns/d37bb7-prod/secrets/nr-epd-organics-info-prod)
 
 Steps:
 
-1. Open terminal, do oc login and switch to the namespace where the application is deployed.
+1. Open a terminal, run the oc login command and switch to the namespace where the application is deployed.
+   - The oc login command can be found by logging into [OpenShift](https://console.apps.silver.devops.gov.bc.ca/)
+   - Clicking on your name in the top right corner and choose `Copy login command` 
+   - Then choose `Developer Log In` and click `Display Token`
+   - Then copy the `oc login ...` command
 2. Run the following command in terminal `oc port-forward service/nr-oracle-service 9080:80`, this enables access to nr
    oracle service on port 9080 of local machine.
 3. Run the following command in terminal `cd backend && npm install && npm run start:debug`, this will start the backend
@@ -45,6 +52,24 @@ Steps:
 4. Run the following command in terminal `cd frontend && npm install && npm run dev`, this will start the frontend
    application on port 3001.
 
+## Running Frontend Tests
+
+**End to end** tests are run using [Playwright](https://playwright.dev/).
+Here are the steps to follow to run the end to end tests:
+1. First install Playwright: `npx playwright install`
+2. Then run start the server and frontend as shown above in steps 1-4.
+3. Run Playwright with this command: `npx playwright test` or `npm run test:e2e`
+
+To configure playwright edit the `playwright.config.ts` file.
+End to end tests are located in the `/e2e` folder.
+
+**Unit tests** do not require the server or frontend to be running.
+You can run the unit tests with this command: `npm run test:unit`
+To generate a coverage report, use this command: `npm run test:cov`
+The coverage report can be viewed in the `coverage` folder.
+Unit tests use [MSW](https://mswjs.io/) to mock API responses, see the
+`src/test-setup.ts` file where it is set up.
+
 # Contribution Guidelines
 
 Follow the steps outlined in this repository to contribute: [CONTRIBUTING.md](./CONTRIBUTING.md).
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
index 6878e9a6..15e5883e 100644
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -9,5 +9,22 @@
       "experimentalObjectRestSpread": true,
       "spread": true
     }
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "unused-imports"
+  ],
+  "rules": {
+    "unused-imports/no-unused-imports": "warn",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ]
   }
 }
diff --git a/frontend/e2e/omrr.spec.ts b/frontend/e2e/omrr.spec.ts
index 27fb4655..5f91c5a8 100644
--- a/frontend/e2e/omrr.spec.ts
+++ b/frontend/e2e/omrr.spec.ts
@@ -1,16 +1,20 @@
-import { test } from '@playwright/test';
-import { dashboard_page } from './pages/dashboard';
-import { authorization_list_page } from './pages/auth.list';
-import { authorization_details_page } from './pages/auth.details';
+import { test } from '@playwright/test'
+import { dashboard_page } from './pages/dashboard'
+import { authorization_list_page } from './pages/auth.list'
+import { authorization_details_page } from './pages/auth.details'
+import { map_page } from './pages/map'
 
 test.describe.parallel('Organics Info', () => {
   test('Dashboard Page', async ({ page }) => {
-    await dashboard_page(page);
-  });
+    await dashboard_page(page)
+  })
   test('Authorization List', async ({ page }) => {
-    await authorization_list_page(page);
-  });
+    await authorization_list_page(page)
+  })
   test('Authorization Details', async ({ page }) => {
-    await authorization_details_page(page);
-  });
-});
+    await authorization_details_page(page)
+  })
+  test('Map View', async ({ page }) => {
+    await map_page(page)
+  })
+})
diff --git a/frontend/e2e/pages/dashboard.ts b/frontend/e2e/pages/dashboard.ts
index df9f616d..db8a0ae7 100644
--- a/frontend/e2e/pages/dashboard.ts
+++ b/frontend/e2e/pages/dashboard.ts
@@ -1,20 +1,41 @@
-import { test, expect } from '@playwright/test';
-import { baseURL } from '../utils';
-import { Page } from 'playwright';
+import { expect } from '@playwright/test'
+import { baseURL } from '../utils'
+import { Page } from 'playwright'
 
 export const dashboard_page = async (page: Page) => {
-  await page.goto(baseURL);
-  await expect(page.getByText('Organics Info')).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Logo' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Text Search' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Contact Us' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Compost and Biosolids' })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Find an authorized compost' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'List all authorizations' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Legislation' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Process and procedures' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Compliance and enforcement' })).toBeVisible();
-  await expect(page.locator('.MuiCardContent-root > .MuiCardMedia-root').first()).toBeVisible();
-  await expect(page.locator('div:nth-child(2) > .MuiPaper-root > .MuiCardContent-root > .MuiCardMedia-root')).toBeVisible();
-  await expect(page.locator('div:nth-child(3) > .MuiPaper-root > .MuiCardContent-root > .MuiCardMedia-root')).toBeVisible();
-};
\ No newline at end of file
+  await page.goto(baseURL)
+  await expect(page.getByText('Organics Info')).toBeVisible()
+  await expect(page.getByAltText('Logo')).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Map Search' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Text Search' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Contact Us' })).toBeVisible()
+  await expect(
+    page.getByRole('heading', { name: 'Compost and Biosolids' }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('heading', { name: 'Find an authorized compost' }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('button', { name: 'List all authorizations' }),
+  ).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Legislation' })).toBeVisible()
+  await expect(
+    page.getByRole('link', { name: 'Process and procedures' }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('link', { name: 'Compliance and enforcement' }),
+  ).toBeVisible()
+  await expect(
+    page.locator('.MuiCardContent-root > .MuiCardMedia-root').first(),
+  ).toBeVisible()
+  await expect(
+    page.locator(
+      'div:nth-child(2) > .MuiPaper-root > .MuiCardContent-root > .MuiCardMedia-root',
+    ),
+  ).toBeVisible()
+  await expect(
+    page.locator(
+      'div:nth-child(3) > .MuiPaper-root > .MuiCardContent-root > .MuiCardMedia-root',
+    ),
+  ).toBeVisible()
+}
diff --git a/frontend/e2e/pages/map.ts b/frontend/e2e/pages/map.ts
new file mode 100644
index 00000000..0a7ddaa2
--- /dev/null
+++ b/frontend/e2e/pages/map.ts
@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test'
+import { baseURL } from '../utils'
+import { Page } from 'playwright'
+
+export const map_page = async (page: Page) => {
+  await page.goto(baseURL)
+
+  await page.getByRole('button', { name: 'Map Search' }).click()
+
+  await expect(page).toHaveTitle('Organics Info')
+  await expect(page.getByRole('button', { name: 'Map Search' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Text Search' })).toBeVisible()
+
+  await page.getByTestId('map-view')
+
+  // Find map markers - expect there to be some
+  // TODO not sure why this fails on CI (chromium/Chrome)
+  // const markers = await page.getByAltText('Authorization marker').all()
+  // expect(markers.length > 0).toBe(true)
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c1163f4f..0847330c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -28,35 +28,38 @@
         "react-router": "^6.12.1",
         "react-router-dom": "^6.12.1",
         "rfdc": "^1.3.1",
-        "vite": "^5.0.0",
-        "vite-tsconfig-paths": "^4.2.0"
+        "vite": "^5.3.3",
+        "vite-tsconfig-paths": "^4.3.2"
       },
       "devDependencies": {
         "@playwright/test": "^1.43.1",
         "@testing-library/jest-dom": "^6.0.0",
         "@testing-library/react": "^15.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/leaflet": "^1.9.8",
+        "@types/css-mediaquery": "^0.1.4",
+        "@types/leaflet": "^1.9.12",
         "@types/mui-datatables": "^4.3.5",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
         "@types/rfdc": "^1.2.0",
+        "@typescript-eslint/parser": "^7.15.0",
         "@vitest/coverage-v8": "^1.0.0",
         "@vitest/ui": "^1.0.0",
+        "css-mediaquery": "^0.1.2",
         "eslint": "^8.57.0",
-        "eslint-config-love": "^43.1.0",
-        "eslint-config-prettier": "^9.0.0",
+        "eslint-config-love": "^54.0.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-import-resolver-typescript": "^3.5.5",
-        "eslint-plugin-cypress": "^2.13.3",
-        "eslint-plugin-html": "^8.0.0",
-        "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-prettier": "^5.0.0",
-        "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-react": "^7.32.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-tsdoc": "^0.2.17",
-        "eslint-plugin-yaml": "^0.5.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
+        "eslint-plugin-html": "^8.1.1",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-promise": "^6.4.0",
+        "eslint-plugin-react": "^7.34.3",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-tsdoc": "^0.3.0",
+        "eslint-plugin-unused-imports": "3.2",
+        "eslint-plugin-yaml": "^1.0.3",
         "history": "^5.3.0",
         "jsdom": "^24.0.0",
         "msw": "^2.0.1",
@@ -656,9 +659,9 @@
       "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
       "cpu": [
         "ppc64"
       ],
@@ -671,9 +674,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
       "cpu": [
         "arm"
       ],
@@ -686,9 +689,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
       "cpu": [
         "arm64"
       ],
@@ -701,9 +704,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
       "cpu": [
         "x64"
       ],
@@ -716,9 +719,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
       "cpu": [
         "arm64"
       ],
@@ -731,9 +734,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
       "cpu": [
         "x64"
       ],
@@ -746,9 +749,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
       "cpu": [
         "arm64"
       ],
@@ -761,9 +764,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
       "cpu": [
         "x64"
       ],
@@ -776,9 +779,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
       "cpu": [
         "arm"
       ],
@@ -791,9 +794,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
       "cpu": [
         "arm64"
       ],
@@ -806,9 +809,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
       "cpu": [
         "ia32"
       ],
@@ -821,9 +824,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
       "cpu": [
         "loong64"
       ],
@@ -836,9 +839,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
       "cpu": [
         "mips64el"
       ],
@@ -851,9 +854,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
       "cpu": [
         "ppc64"
       ],
@@ -866,9 +869,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
       "cpu": [
         "riscv64"
       ],
@@ -881,9 +884,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "cpu": [
         "s390x"
       ],
@@ -896,9 +899,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
       "cpu": [
         "x64"
       ],
@@ -911,9 +914,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "cpu": [
         "x64"
       ],
@@ -926,9 +929,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "cpu": [
         "x64"
       ],
@@ -941,9 +944,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "cpu": [
         "x64"
       ],
@@ -956,9 +959,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "cpu": [
         "arm64"
       ],
@@ -971,9 +974,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "cpu": [
         "ia32"
       ],
@@ -986,9 +989,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
         "x64"
       ],
@@ -1016,9 +1019,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
-      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -1311,36 +1314,45 @@
       "integrity": "sha512-ow4R+7C24xeTjiMTTZ4k6lvxj7MRBqvqLCQjThQff3RjOmIMokMP20LNYVFhGafJtUx/Xo2Qp4qU8eNoTVH0SA=="
     },
     "node_modules/@microsoft/tsdoc": {
-      "version": "0.14.2",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
-      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.0.tgz",
+      "integrity": "sha512-HZpPoABogPvjeJOdzCOSJsXeL/SMCBgBZMVC3X3d7YYp2gf31MfxhUoYUNwf1ERPJOnQc0wkFn9trqI6ZEdZuA==",
       "dev": true
     },
     "node_modules/@microsoft/tsdoc-config": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz",
-      "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.17.0.tgz",
+      "integrity": "sha512-v/EYRXnCAIHxOHW+Plb6OWuUoMotxTN0GLatnpOb1xq0KuTNw/WI3pamJx/UbsoJP5k9MCw1QxvvhPcF9pH3Zg==",
       "dev": true,
       "dependencies": {
-        "@microsoft/tsdoc": "0.14.2",
-        "ajv": "~6.12.6",
+        "@microsoft/tsdoc": "0.15.0",
+        "ajv": "~8.12.0",
         "jju": "~1.4.0",
-        "resolve": "~1.19.0"
+        "resolve": "~1.22.2"
       }
     },
-    "node_modules/@microsoft/tsdoc-config/node_modules/resolve": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
-      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+    "node_modules/@microsoft/tsdoc-config/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.1.0",
-        "path-parse": "^1.0.6"
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/@microsoft/tsdoc-config/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
     "node_modules/@mswjs/cookies": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-1.1.0.tgz",
@@ -2077,6 +2089,12 @@
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "dev": true
     },
+    "node_modules/@types/css-mediaquery": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/css-mediaquery/-/css-mediaquery-0.1.4.tgz",
+      "integrity": "sha512-DZyHAz716ZUctpqkUU2COwUoZ4gI6mZK2Q1oIz/fvNS6XHVpKSJgDnE7vRxZUBn9vjJHDVelCVW0dkshKOLFsA==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -2094,13 +2112,6 @@
       "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
       "dev": true
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -2108,9 +2119,9 @@
       "dev": true
     },
     "node_modules/@types/leaflet": {
-      "version": "1.9.8",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
-      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz",
+      "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==",
       "dev": true,
       "dependencies": {
         "@types/geojson": "*"
@@ -2205,13 +2216,6 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
-    "node_modules/@types/semver": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
-      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/@types/statuses": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz",
@@ -2230,34 +2234,31 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
-      "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.15.0.tgz",
+      "integrity": "sha512-uiNHpyjZtFrLwLDpHnzaDlP3Tt6sGMqTCiqmxaN4n4RP0EfYZDODJyddiFDF44Hjwxr5xAcaYxVKm9QKQFJFLA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
-        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/type-utils": "6.21.0",
-        "@typescript-eslint/utils": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
-        "debug": "^4.3.4",
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.15.0",
+        "@typescript-eslint/type-utils": "7.15.0",
+        "@typescript-eslint/utils": "7.15.0",
+        "@typescript-eslint/visitor-keys": "7.15.0",
         "graphemer": "^1.4.0",
-        "ignore": "^5.2.4",
+        "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
-        "eslint": "^7.0.0 || ^8.0.0"
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2266,26 +2267,26 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
-      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.15.0.tgz",
+      "integrity": "sha512-k9fYuQNnypLFcqORNClRykkGOMOj+pV6V91R4GO/l1FDGwpqmSwoOQrOHo3cGaH63e+D3ZiCAOsuS/D2c99j/A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
+        "@typescript-eslint/scope-manager": "7.15.0",
+        "@typescript-eslint/types": "7.15.0",
+        "@typescript-eslint/typescript-estree": "7.15.0",
+        "@typescript-eslint/visitor-keys": "7.15.0",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2294,16 +2295,16 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
-      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.15.0.tgz",
+      "integrity": "sha512-Q/1yrF/XbxOTvttNVPihxh1b9fxamjEoz2Os/Pe38OHwxC24CyCqXxGTOdpb4lt6HYtqw9HetA/Rf6gDGaMPlw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0"
+        "@typescript-eslint/types": "7.15.0",
+        "@typescript-eslint/visitor-keys": "7.15.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2311,26 +2312,25 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
-      "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.15.0.tgz",
+      "integrity": "sha512-SkgriaeV6PDvpA6253PDVep0qCqgbO1IOBiycjnXsszNTVQe5flN5wR5jiczoEoDEnAqYFSFFc9al9BSGVltkg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "@typescript-eslint/utils": "6.21.0",
+        "@typescript-eslint/typescript-estree": "7.15.0",
+        "@typescript-eslint/utils": "7.15.0",
         "debug": "^4.3.4",
-        "ts-api-utils": "^1.0.1"
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2339,12 +2339,12 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
-      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.15.0.tgz",
+      "integrity": "sha512-aV1+B1+ySXbQH0pLK0rx66I3IkiZNidYobyfn0WFsdGhSXw+P3YOqeTq5GED458SfB24tg+ux3S+9g118hjlTw==",
       "dev": true,
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2352,22 +2352,22 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
-      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.15.0.tgz",
+      "integrity": "sha512-gjyB/rHAopL/XxfmYThQbXbzRMGhZzGw6KpcMbfe8Q3nNQKStpxnUKeXb0KiN/fFDR42Z43szs6rY7eHk0zdGQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
+        "@typescript-eslint/types": "7.15.0",
+        "@typescript-eslint/visitor-keys": "7.15.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2380,42 +2380,38 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
-      "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.15.0.tgz",
+      "integrity": "sha512-hfDMDqaqOqsUVGiEPSMLR/AjTSCsmJwjpKkYQRo1FNbmW4tBwBspYDwO9eh7sKSTwMQgBw9/T4DHudPaqshRWA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "semver": "^7.5.4"
+        "@typescript-eslint/scope-manager": "7.15.0",
+        "@typescript-eslint/types": "7.15.0",
+        "@typescript-eslint/typescript-estree": "7.15.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
-      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.15.0.tgz",
+      "integrity": "sha512-Hqgy/ETgpt2L5xueA/zHHIl4fJI2O4XUE9l4+OIfbJIRSnTJb/QscncdqqZzofQegIJugRIF57OJea1khw2SDw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "eslint-visitor-keys": "^3.4.1"
+        "@typescript-eslint/types": "7.15.0",
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2901,16 +2897,19 @@
       }
     },
     "node_modules/array.prototype.tosorted": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
-      "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.1.0",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
         "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
@@ -3046,29 +3045,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/builtins": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "semver": "^7.0.0"
-      }
-    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -3336,6 +3312,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==",
+      "dev": true
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -3635,9 +3617,9 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
+      "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -3668,9 +3650,9 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.23.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.2.tgz",
-      "integrity": "sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
@@ -3712,11 +3694,11 @@
         "safe-regex-test": "^1.0.3",
         "string.prototype.trim": "^1.2.9",
         "string.prototype.trimend": "^1.0.8",
-        "string.prototype.trimstart": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.8",
         "typed-array-buffer": "^1.0.2",
         "typed-array-byte-length": "^1.0.1",
         "typed-array-byte-offset": "^1.0.2",
-        "typed-array-length": "^1.0.5",
+        "typed-array-length": "^1.0.6",
         "unbox-primitive": "^1.0.2",
         "which-typed-array": "^1.1.15"
       },
@@ -3749,14 +3731,14 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.18",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.18.tgz",
-      "integrity": "sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==",
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
+      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.0",
+        "es-abstract": "^1.23.3",
         "es-errors": "^1.3.0",
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
@@ -3826,9 +3808,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -3837,29 +3819,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
       }
     },
     "node_modules/escalade": {
@@ -3937,11 +3919,10 @@
       }
     },
     "node_modules/eslint-compat-utils": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.0.tgz",
-      "integrity": "sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "semver": "^7.5.4"
       },
@@ -3953,20 +3934,18 @@
       }
     },
     "node_modules/eslint-config-love": {
-      "version": "43.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-love/-/eslint-config-love-43.1.0.tgz",
-      "integrity": "sha512-r3+7mSaOl0BEGf8LEntPPDbWTDw8o0Dpy9vdts7m+NAuSpmz9C/gL+64lC0Z8nKNE4uwdymPGll4czGQiR+XmQ==",
+      "version": "54.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-love/-/eslint-config-love-54.0.0.tgz",
+      "integrity": "sha512-8qtibQSOuqPQprof3toeBGUND+M0iD4aJcjP7RiAtJq0vMbhIMsKJczJUjAICH+UbLclGz7WtWDRDoYKkkDCIg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/parser": "^6.4.0",
-        "eslint-config-standard": "17.1.0"
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-n": "^17.0.0",
+        "eslint-plugin-promise": "^6.0.0",
+        "typescript-eslint": "^7.14.1"
       },
       "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.4.0",
         "eslint": "^8.0.1",
-        "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
-        "eslint-plugin-promise": "^6.0.0",
         "typescript": "*"
       }
     },
@@ -3982,35 +3961,6 @@
         "eslint": ">=7.0.0"
       }
     },
-    "node_modules/eslint-config-standard": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz",
-      "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^8.0.1",
-        "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
-        "eslint-plugin-promise": "^6.0.0"
-      }
-    },
     "node_modules/eslint-import-resolver-alias": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz",
@@ -4094,70 +4044,31 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/eslint-plugin-cypress": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.15.1.tgz",
-      "integrity": "sha512-eLHLWP5Q+I4j2AWepYq0PgFEei9/s5LvjuSqWrxurkg1YZ8ltxdvMNmdSf0drnsNo57CTgYY/NIHHLRSWejR7w==",
-      "dev": true,
-      "dependencies": {
-        "globals": "^13.20.0"
-      },
-      "peerDependencies": {
-        "eslint": ">= 3.2.1"
-      }
-    },
-    "node_modules/eslint-plugin-cypress/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-cypress/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint-plugin-es-x": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.6.0.tgz",
-      "integrity": "sha512-I0AmeNgevgaTR7y2lrVCJmGYF0rjoznpDvqV/kIkZSZbZ8Rw3eu4cGlvBBULScfkSOCzqKbff5LR4CNrV7mZHA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.8.0.tgz",
+      "integrity": "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==",
       "dev": true,
-      "peer": true,
+      "funding": [
+        "https://github.com/sponsors/ota-meshi",
+        "https://opencollective.com/eslint"
+      ],
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.1.2",
-        "@eslint-community/regexpp": "^4.6.0",
-        "eslint-compat-utils": "^0.5.0"
+        "@eslint-community/regexpp": "^4.11.0",
+        "eslint-compat-utils": "^0.5.1"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ota-meshi"
-      },
       "peerDependencies": {
         "eslint": ">=8"
       }
     },
     "node_modules/eslint-plugin-html": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-8.0.0.tgz",
-      "integrity": "sha512-NINLBAXM3mLa3k5Ezr/kNLHAJJwbot6lS7Ro+SUftDw4cA51KMmcDuCf98GP6Q6kTVPY1hIggzskxAdxfUPXSA==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-8.1.1.tgz",
+      "integrity": "sha512-6qmlJsc40D2m3Dn9oEH+0PAOkJhxVu0f5sVItqpCE0YWgYnyP4xCjBc3UWTHaJcY9ARkWOLIIuXLq0ndRnQOHw==",
       "dev": true,
       "dependencies": {
         "htmlparser2": "^9.1.0"
@@ -4250,82 +4161,37 @@
       }
     },
     "node_modules/eslint-plugin-n": {
-      "version": "16.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.6.2.tgz",
-      "integrity": "sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==",
+      "version": "17.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-17.9.0.tgz",
+      "integrity": "sha512-CPSaXDXdrT4nsrOrO4mT4VB6FMUkoySRkHWuuJJHVqsIEjIeZgMY1H7AzSwPbDScikBmLN82KeM1u7ixV7PzGg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "builtins": "^5.0.1",
+        "enhanced-resolve": "^5.17.0",
         "eslint-plugin-es-x": "^7.5.0",
         "get-tsconfig": "^4.7.0",
-        "globals": "^13.24.0",
+        "globals": "^15.0.0",
         "ignore": "^5.2.4",
-        "is-builtin-module": "^3.2.1",
-        "is-core-module": "^2.12.1",
-        "minimatch": "^3.1.2",
-        "resolve": "^1.22.2",
+        "minimatch": "^9.0.0",
         "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
+        "url": "https://opencollective.com/eslint"
       },
       "peerDependencies": {
-        "eslint": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "eslint": ">=8.23.0"
       }
     },
     "node_modules/eslint-plugin-n/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "15.8.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.8.0.tgz",
+      "integrity": "sha512-VZAJ4cewHTExBWDHR6yptdIBlx9YSSZuwojj9Nt5mBRXQzrKakDsVKQ1J63sklLvzAJm0X5+RpO4i3Y2hcOnFw==",
       "dev": true,
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
       "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -4362,41 +4228,44 @@
       }
     },
     "node_modules/eslint-plugin-promise": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
-      "integrity": "sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.4.0.tgz",
+      "integrity": "sha512-/KWWRaD3fGkVCZsdR0RU53PSthFmoHVhZl+y9+6DqeDLSikLdlUVpVEAmI6iCRR5QyOjBYBqHZV/bdv4DJ4Gtw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.34.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
-      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
+      "version": "7.34.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.3.tgz",
+      "integrity": "sha512-aoW4MV891jkUulwDApQbPYTVZmeuSyFrudpbTAQuj5Fv8VL+o6df2xIGpw8B0hPjAaih1/Fb0om9grCdyFYemA==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.7",
-        "array.prototype.findlast": "^1.2.4",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
         "array.prototype.flatmap": "^1.3.2",
         "array.prototype.toreversed": "^1.1.2",
-        "array.prototype.tosorted": "^1.1.3",
+        "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.17",
+        "es-iterator-helpers": "^1.0.19",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.7",
-        "object.fromentries": "^2.0.7",
-        "object.hasown": "^1.1.3",
-        "object.values": "^1.1.7",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.hasown": "^1.1.4",
+        "object.values": "^1.2.0",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.10"
+        "string.prototype.matchall": "^4.0.11"
       },
       "engines": {
         "node": ">=4"
@@ -4406,9 +4275,9 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -4478,26 +4347,56 @@
       }
     },
     "node_modules/eslint-plugin-tsdoc": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.17.tgz",
-      "integrity": "sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.3.0.tgz",
+      "integrity": "sha512-0MuFdBrrJVBjT/gyhkP2BqpD0np1NxNLfQ38xXDlSs/KVVpKI2A6vN7jx2Rve/CyUsvOsMGwp9KKrinv7q9g3A==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "0.15.0",
+        "@microsoft/tsdoc-config": "0.17.0"
+      }
+    },
+    "node_modules/eslint-plugin-unused-imports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.2.0.tgz",
+      "integrity": "sha512-6uXyn6xdINEpxE1MtDjxQsyXB37lfyO2yKGVVgtD7WEWQGORSOZjgrD6hBhvGv4/SO+TOlS+UnC6JppRqbuwGQ==",
       "dev": true,
       "dependencies": {
-        "@microsoft/tsdoc": "0.14.2",
-        "@microsoft/tsdoc-config": "0.16.2"
+        "eslint-rule-composer": "^0.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "6 - 7",
+        "eslint": "8"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-plugin-yaml": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-yaml/-/eslint-plugin-yaml-0.5.0.tgz",
-      "integrity": "sha512-Z6km4HEiRptSuvzc96nXBND1Vlg57b7pzRmIJOgb9+3PAE+XpaBaiMx+Dg+3Y15tSrEMKCIZ9WoZMwkwUbPI8A==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-yaml/-/eslint-plugin-yaml-1.0.3.tgz",
+      "integrity": "sha512-PNA2P38xFIrIdb82W0k66UPtpn0UHbPs8LxwtmZqG03PUzV1RE6OYFUi0pxL4LsFndHjgOyNlLqK2N5lGdX8ew==",
       "dev": true,
       "dependencies": {
         "js-yaml": "^4.1.0",
-        "jshint": "^2.13.0"
+        "jshint": "^2.13.6"
       },
       "engines": {
-        "node": "*"
+        "node": ">=12"
+      }
+    },
+    "node_modules/eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
       }
     },
     "node_modules/eslint-scope": {
@@ -5486,22 +5385,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-builtin-module": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
-      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "builtin-modules": "^3.3.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -6379,9 +6262,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -6844,9 +6727,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6925,9 +6808,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "funding": [
         {
           "type": "opencollective",
@@ -6944,7 +6827,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
@@ -7311,6 +7194,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -8234,6 +8126,32 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-7.15.0.tgz",
+      "integrity": "sha512-Ta40FhMXBCwHura4X4fncaCVkVcnJ9jnOq5+Lp4lN8F4DzHZtOwZdRvVBiNUGznUDHPwdGnrnwxmUOU2fFQqFA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "7.15.0",
+        "@typescript-eslint/parser": "7.15.0",
+        "@typescript-eslint/utils": "7.15.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
@@ -8347,12 +8265,12 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
-      "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
+      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
       "dependencies": {
-        "esbuild": "^0.20.1",
-        "postcss": "^8.4.36",
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.39",
         "rollup": "^4.13.0"
       },
       "bin": {
diff --git a/frontend/package.json b/frontend/package.json
index a46fbfc2..47678d62 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,12 +8,14 @@
     "build:analyze": "vite build --mode analyze",
     "build:clean": "rimraf dist",
     "clean": "rimraf ./node_modules/.vite",
+    "start": "vite",
     "dev": "vite --host",
     "lint": "eslint --ext .ts,.tsx .",
     "lint:fix": "npm run lint -- --fix",
     "preview": "vite preview",
     "test:unit": "vitest --mode test",
-    "test:cov": "vitest run --mode test --coverage"
+    "test:cov": "vitest run --mode test --coverage",
+    "test:e2e": "npx playwright test"
   },
   "dependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -36,39 +38,42 @@
     "react-router": "^6.12.1",
     "react-router-dom": "^6.12.1",
     "rfdc": "^1.3.1",
-    "vite": "^5.0.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite": "^5.3.3",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.43.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/leaflet": "^1.9.8",
+    "@types/css-mediaquery": "^0.1.4",
+    "@types/leaflet": "^1.9.12",
     "@types/mui-datatables": "^4.3.5",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/rfdc": "^1.2.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "@vitest/coverage-v8": "^1.0.0",
     "@vitest/ui": "^1.0.0",
+    "css-mediaquery": "^0.1.2",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-love": "^43.1.0",
+    "eslint-config-love": "^54.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-html": "^8.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-yaml": "^0.5.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-html": "^8.1.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-tsdoc": "^0.3.0",
+    "eslint-plugin-unused-imports": "3.2",
+    "eslint-plugin-yaml": "^1.0.3",
     "history": "^5.3.0",
     "jsdom": "^24.0.0",
-    "playwright": "^1.43.1",
     "msw": "^2.0.1",
+    "playwright": "^1.43.1",
     "prettier": "^3.0.0",
     "typescript": "^5.1.3",
     "vitest": "^1.0.0"
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index b1e00c5e..59e205cf 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig, devices } from '@playwright/test';
-import { baseURL } from './e2e/utils';
+import { defineConfig, devices } from '@playwright/test'
+import { baseURL } from './e2e/utils'
 
 /**
  * Read environment variables from file.
@@ -25,15 +25,15 @@ export default defineConfig({
   reporter: [
     ['line'],
     ['list', { printSteps: true }],
-    ['html', { open: 'always' }]
+    ['html', { open: 'never' }],
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: baseURL,
+    baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry'
+    trace: 'on-first-retry',
   },
 
   /* Configure projects for major browsers */
@@ -42,40 +42,40 @@ export default defineConfig({
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
-        baseURL: baseURL,
-      }
+        baseURL,
+      },
     },
     {
       name: 'Google Chrome',
       use: {
         ...devices['Desktop Chrome'],
         channel: 'chrome',
-        baseURL: baseURL
-      }
+        baseURL,
+      },
     },
 
     {
       name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
-        baseURL: baseURL,
-      }
+        baseURL,
+      },
     },
 
     {
       name: 'safari',
       use: {
         ...devices['Desktop Safari'],
-        baseURL: baseURL
-      }
+        baseURL,
+      },
     },
     {
       name: 'Microsoft Edge',
       use: {
         ...devices['Desktop Edge'],
         channel: 'msedge',
-        baseURL: baseURL
-      }
-    }
-  ]
-});
+        baseURL,
+      },
+    },
+  ],
+})
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
new file mode 100644
index 00000000..466f84af
--- /dev/null
+++ b/frontend/src/App.test.tsx
@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react'
+
+import App from '@/App'
+import { errorHandlers, mswServer } from '@/test-setup'
+import { render } from '@/test-utils'
+
+describe('App suite', () => {
+  test('renders the App with successful data load', async () => {
+    render(<App />, { withStateProvider: true })
+
+    screen.getByAltText('Logo')
+    screen.getByText('Organics Info')
+    // Wait for dashboard to load
+    await screen.findByText(
+      'Find an authorized compost and biosolid facility in British Columbia',
+    )
+  })
+
+  test('renders the App with error loading data', async () => {
+    mswServer.use(...errorHandlers)
+
+    render(<App />, { withStateProvider: true })
+
+    screen.getByAltText('Logo')
+    screen.getByText('Organics Info')
+    // Wait for error message to display
+    await screen.findByText('Loading failed, please try again later')
+  })
+})
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c44b7176..79bc7810 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,68 +1,52 @@
+import { useEffect } from 'react'
+import { BrowserRouter } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+
 import Grid from '@mui/material/Grid'
+import CircularProgress from '@mui/material/CircularProgress'
+
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
 import AppRoutes from '@/routes'
-import { BrowserRouter } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
+import AppError from '@/components/AppError'
 import { fetchOMRRData } from '@/features/omrr/omrr-slice'
-import { useEffect } from 'react'
 import { RootState } from '@/app/store'
-import CircularProgress from '@mui/material/CircularProgress'
+
 import 'leaflet/dist/leaflet.css'
-import { Snackbar } from '@mui/material'
-import HeaderWithRouting from '@/components/HeaderWithRouting'
+
+const loadingStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+}
 
 export default function App() {
   const status: string = useSelector((state: RootState) => state.omrr.status)
+
   const dispatch = useDispatch()
   useEffect(() => {
     //@ts-expect-error
     dispatch(fetchOMRRData())
   }, [dispatch])
+
+  const isLoading = status === 'loading'
+  const isError = status === 'failed'
+  const isReady = !isLoading && !isError
+
   return (
-    <Grid container sx={{ flexGrow: 1 }}>
-      {status === 'loading' ? (
-        <><Grid item xs={12}>
+    <BrowserRouter>
+      <Grid container sx={{ flexGrow: 1, minHeight: '100vh' }}>
+        <Grid item xs={12}>
           <Header />
         </Grid>
-          <Grid item xs={12}>
-            <CircularProgress />
-          </Grid>
-          <Grid item xs={12}>
-            <Footer />
-          </Grid></>
-      ) : status === 'failed' ? (
-        <><Grid item xs={12}>
-          <Header />
+        <Grid item xs={12} style={isLoading ? loadingStyle : undefined}>
+          {isLoading && <CircularProgress />}
+          {isError && <AppError />}
+          {isReady && <AppRoutes />}
         </Grid>
-          <Grid item xs={12}>
-            <Snackbar
-              message="Loading Failed, Please try later refreshing the page"
-              sx={{ background: '#fffffff', backgroundColor: '#fffffff' }}
-              color="error"
-              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-              autoHideDuration={6000}
-              draggable
-              open={true}
-            ></Snackbar>
-          </Grid>
-          <Grid item xs={12}>
-            <Footer />
-          </Grid></>
-      ) : (
-        <><BrowserRouter>
-          <Grid item xs={12}>
-            <HeaderWithRouting />
-          </Grid>
-          <Grid item xs={12}>
-            <AppRoutes />
-          </Grid>
-          <Grid item xs={12}>
-            <Footer />
-          </Grid>
-        </BrowserRouter></>
-      )}
-
-    </Grid>
+        <Grid item xs={12}>
+          <Footer />
+        </Grid>
+      </Grid>
+    </BrowserRouter>
   )
 }
diff --git a/frontend/src/app/store.ts b/frontend/src/app/store.ts
index 092da196..3ac65341 100644
--- a/frontend/src/app/store.ts
+++ b/frontend/src/app/store.ts
@@ -1,11 +1,20 @@
-import { configureStore } from '@reduxjs/toolkit'
-import counterReducer from '@/features/counter/counter-slice'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
 import { omrrSlice } from '@/features/omrr/omrr-slice'
-export const store = configureStore({
-  reducer: { counter: counterReducer, omrr: omrrSlice.reducer},
+
+const rootReducer = combineReducers({
+  omrr: omrrSlice.reducer,
 })
 
+export function setupStore(preloadedState?: Partial<RootState>) {
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  })
+}
+
+export const store = setupStore()
+
 // Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof rootReducer>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
 export type AppDispatch = typeof store.dispatch
diff --git a/frontend/src/components/AppError.tsx b/frontend/src/components/AppError.tsx
new file mode 100644
index 00000000..8bad442d
--- /dev/null
+++ b/frontend/src/components/AppError.tsx
@@ -0,0 +1,28 @@
+import { Snackbar } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/app/store'
+
+export default function AppError() {
+  const error = useSelector((state: RootState) => state.omrr.error)
+  const theme = useTheme()
+  const errorStyle = {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.secondary.main,
+  }
+  console.info('App error:', error)
+
+  return (
+    <Snackbar
+      message="Loading failed, please try again later"
+      ContentProps={{ style: errorStyle }}
+      sx={{
+        '&.MuiSnackbar-root': { top: '6em' },
+      }}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      autoHideDuration={6000}
+      draggable
+      open={true}
+    />
+  )
+}
diff --git a/frontend/src/components/AuthorizationDetails.tsx b/frontend/src/components/AuthorizationDetails.tsx
index 7193d4f9..df07d3b1 100644
--- a/frontend/src/components/AuthorizationDetails.tsx
+++ b/frontend/src/components/AuthorizationDetails.tsx
@@ -98,14 +98,19 @@ function authorizationSection(mdMatches: boolean, data: OmrrData) {
               />
             </Grid>
             <Grid item xs={3}>
-              <span data-testid="auth-details-auth-number-value">{data['Authorization Number']}</span>
+              <span data-testid="auth-details-auth-number-value">
+                {data['Authorization Number']}
+              </span>
             </Grid>
             <Grid item xs={3}>
-              <span data-testid="auth-details-effactive-date-value">{data['Effective/Issue Date']?.toString()}</span>
+              <span data-testid="auth-details-effactive-date-value">
+                {data['Effective/Issue Date']?.toString()}
+              </span>
             </Grid>
             <Grid item xs={3}>
-              <span
-                data-testid="auth-details-last-ammendment-date-value">{data['Last Amendment Date']?.toString()}</span>
+              <span data-testid="auth-details-last-ammendment-date-value">
+                {data['Last Amendment Date']?.toString()}
+              </span>
             </Grid>
           </Grid>
         </>
@@ -165,7 +170,9 @@ function authorizationSection(mdMatches: boolean, data: OmrrData) {
               />
             </Grid>
             <Grid item xs={6}>
-              <span data-testid="auth-details-auth-number-value">{data['Authorization Number']}</span>
+              <span data-testid="auth-details-auth-number-value">
+                {data['Authorization Number']}
+              </span>
             </Grid>
           </Grid>
           <Grid container direction="row" sx={{ marginTop: '2em' }} spacing={0}>
@@ -204,10 +211,14 @@ function authorizationSection(mdMatches: boolean, data: OmrrData) {
             spacing={0}
           >
             <Grid item xs={6}>
-              <span data-testid="auth-details-effactive-date-valu">{data['Effective/Issue Date']?.toString()}</span>
+              <span data-testid="auth-details-effactive-date-valu">
+                {data['Effective/Issue Date']?.toString()}
+              </span>
             </Grid>
             <Grid item xs={6}>
-              <span data-testid="auth-details-last-ammendment-valu">{data['Last Amendment Date']?.toString()}</span>
+              <span data-testid="auth-details-last-ammendment-valu">
+                {data['Last Amendment Date']?.toString()}
+              </span>
             </Grid>
           </Grid>
         </>
@@ -342,8 +353,8 @@ function getAuthorizationGridOthersForMdAbove(data: OmrrData) {
 }
 
 function getAuthorizationGridNotificationCompostForMdAbove(data: OmrrData) {
-  const theme = useTheme()
-  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
+  // const theme = useTheme()
+  // const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
   return (
     <>
       {data['Authorization Type']?.toLowerCase() === 'notification' &&
@@ -1178,32 +1189,34 @@ function getAuthorizationGridNotificationOthers(data: OmrrData) {
   )
 }
 
+// define red icon
+const redIcon = new L.Icon({
+  //read from assets
+  iconUrl: pin,
+  shadowUrl: shadow,
+  iconSize: [50, 82],
+  iconAnchor: [25, 82],
+  popupAnchor: [1, -34],
+  shadowSize: [82, 82],
+})
+
 export default function AuthorizationDetails() {
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [])
   const theme = useTheme()
   const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
-  const smMatches = useMediaQuery(theme.breakpoints.up('sm'))
-  const xsMatches = useMediaQuery(theme.breakpoints.up('xs'))
-  const lgMatches = useMediaQuery(theme.breakpoints.up('lg'))
-  //define red icon
-  const redIcon = new L.Icon({
-    //read from assets
-    iconUrl: pin,
-    shadowUrl: shadow,
-    iconSize: [50, 82],
-    iconAnchor: [25, 82],
-    popupAnchor: [1, -34],
-    shadowSize: [82, 82],
-  })
+  // const smMatches = useMediaQuery(theme.breakpoints.up('sm'))
+  // const xsMatches = useMediaQuery(theme.breakpoints.up('xs'))
+  // const lgMatches = useMediaQuery(theme.breakpoints.up('lg'))
+
   const navigate = useNavigate()
   const buttonClicked = (route: any) => {
     navigate(route) // reset the state
   }
   const location = useLocation()
   const data = location?.state?.data
-  const authorizationType = data && data['Authorization Type']
+  // const authorizationType = data && data['Authorization Type']
   let facilityLatLng: LatLngLiteral | undefined = undefined
   if (data && data.Latitude && data.Longitude) {
     facilityLatLng = { lat: data.Latitude, lng: data.Longitude }
diff --git a/frontend/src/components/AuthorizationList.tsx b/frontend/src/components/AuthorizationList.tsx
index d4bc8f6c..9c96be34 100644
--- a/frontend/src/components/AuthorizationList.tsx
+++ b/frontend/src/components/AuthorizationList.tsx
@@ -1,9 +1,4 @@
-import {
-  ArrowDropDown,
-  ArrowDropUp,
-  MyLocation,
-  Search,
-} from '@mui/icons-material'
+import { ArrowDropDown, ArrowDropUp, Search } from '@mui/icons-material'
 import {
   Box,
   Button,
@@ -30,7 +25,6 @@ import {
   searchAuthorizationsByGlobalFilter,
   setExpand,
   setFilters,
-  setLocation,
   setPage,
   setSearchBy,
 } from '@/features/omrr/omrr-slice'
@@ -58,13 +52,12 @@ export default function AuthorizationList() {
     compostFacilityFilter,
     landApplicationBioSolidsFilter,
     operationalCertificateFilter,
-    location,
     searchBy,
     page,
     globalTextSearchFilter,
     compostFacilityFilterDisabled,
     landApplicationBioSolidsFilterDisabled,
-    lastModified
+    lastModified,
   } = useSelector((state: RootState) => state.omrr)
   const pagination = (
     <Grid item xs={12}>
@@ -401,7 +394,7 @@ export default function AuthorizationList() {
                 fontStyle: 'italic',
               }}
             >
-              Data Last Updated :  {lastModified}
+              Data Last Updated : {lastModified}
             </Typography>
           </Grid>
           {pagination}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index dc5b4eec..c13de0da 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,10 +1,15 @@
-import { AppBar, Fade, Grid, Link, Toolbar, useScrollTrigger } from '@mui/material'
+import {
+  AppBar,
+  Fade,
+  Grid,
+  Link,
+  Toolbar,
+  useScrollTrigger,
+} from '@mui/material'
 import Button from '@mui/material/Button'
 import { ArrowUpward } from '@mui/icons-material'
 import Divider from '@mui/material/Divider'
 import Stack from '@mui/material/Stack'
-import { useTheme } from '@mui/material/styles'
-import useMediaQuery from '@mui/material/useMediaQuery'
 import { useCallback } from 'react'
 
 const styles = {
@@ -15,6 +20,7 @@ const styles = {
     color: '#ffffff',
     backgroundColor: '#053662',
     display: 'flex',
+    height: '4em',
   },
   footerButton: {
     margin: '0.2em',
@@ -24,18 +30,17 @@ const styles = {
 }
 
 export default function Footer() {
-  const theme = useTheme()
-  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
+  // const theme = useTheme()
+  // const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
 
   // To Do: Build a check to see if user has scrolled to the bottom so we offset the button at the end of the page to not overlap the footer on mobile.
-  //
 
   function ScrollToTop() {
     const trigger = useScrollTrigger({
       threshold: 100,
     })
 
-    const ScrollToTop = useCallback(() => {
+    const scrollToTop = useCallback(() => {
       window.scrollTo({ top: 0, behavior: 'smooth' })
     }, [])
 
@@ -59,9 +64,7 @@ export default function Footer() {
             borderRadius: '.5em',
             zIndex: 9,
           }}
-          onClick={() => {
-            ScrollToTop()
-          }}
+          onClick={() => scrollToTop()}
         >
           <ArrowUpward />
         </Button>
@@ -69,7 +72,12 @@ export default function Footer() {
     )
   }
   return (
-    <AppBar position="relative" sx={styles.appBar} color="default">
+    <AppBar
+      position="relative"
+      sx={styles.appBar}
+      color="default"
+      component="footer"
+    >
       <Toolbar
         sx={{
           padding: {
diff --git a/frontend/src/components/Header.test.tsx b/frontend/src/components/Header.test.tsx
new file mode 100644
index 00000000..12f2f8d9
--- /dev/null
+++ b/frontend/src/components/Header.test.tsx
@@ -0,0 +1,56 @@
+import { getByText, screen } from '@testing-library/react'
+import Header from '@/components/Header'
+import { render } from '@/test-utils'
+import { themeBreakpointValues } from '@/theme'
+
+describe('Header suite', () => {
+  test('renders the Header on wide screen', async () => {
+    const { user } = render(<Header />, {
+      screenWidth: themeBreakpointValues.xxl + 10,
+      withRouter: true,
+    })
+
+    const logoLink = screen.getByAltText('Logo')
+    screen.getByText('Organics Info')
+    const mapLink = screen.getByRole('button', { name: 'Map Search' })
+    const textLink = screen.getByRole('button', { name: 'Text Search' })
+    screen.getByText('Contact Us')
+
+    await user.click(mapLink)
+    expect(location.href).toContain('/map')
+
+    await user.click(textLink)
+    expect(location.href).toContain('/search')
+
+    // Clicking on the logo will redirect back to "/"
+    // Find the base url without hard-coding the url
+    const { href } = location
+    const baseUrl = href.substring(0, href.indexOf('/search') + 1)
+
+    await user.click(logoLink)
+    expect(location.href).toEqual(baseUrl)
+  })
+
+  test('renders the Header on narrow screen with menu', async () => {
+    // On small+medium screens a menu is shown instead of toolbar buttons
+    const { user } = render(<Header />, {
+      screenWidth: themeBreakpointValues.sm,
+      withRouter: true,
+    })
+
+    const menuButton = screen.getByTitle('Menu')
+    // Show the menu
+    await user.click(menuButton)
+
+    const menu = screen.getByRole('menu')
+    const mapMenuItem = getByText(menu, 'Map Search')
+    const textMenuItem = getByText(menu, 'Text Search')
+    getByText(menu, 'Contact Us')
+
+    await user.click(mapMenuItem)
+    expect(location.href).toContain('/map')
+
+    await user.click(textMenuItem)
+    expect(location.href).toContain('/search')
+  })
+})
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index ffd9da7c..76978e2c 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,81 +1,179 @@
-import BCGovLogo from '@/assets/gov-bc-logo-horiz.png'
-import { AppBar, IconButton, Toolbar } from '@mui/material'
-import { Feed, Menu } from '@mui/icons-material'
+import { MouseEvent, useState } from 'react'
+import { useNavigate } from 'react-router'
+import {
+  AppBar,
+  Box,
+  IconButton,
+  Link,
+  Menu as MenuComponent,
+  MenuItem,
+  Toolbar,
+  Typography,
+} from '@mui/material'
+import { Feed, Map, Menu } from '@mui/icons-material'
 import Stack from '@mui/material/Stack'
 import { useTheme } from '@mui/material/styles'
 import useMediaQuery from '@mui/material/useMediaQuery'
 
+import { HeaderIconButton } from '@/components/HeaderIconButton'
+
+import BCGovLogoH from '@/assets/BCID_H_rgb_rev.png'
+import BCGovLogoV from '@/assets/BCID_V_rgb_rev.png'
+
 const styles = {
   appBar: {
     color: '#ffffff',
     backgroundColor: '#053662',
     borderBottom: '0.1em solid rgb(252, 186, 25) !important',
+    height: '4em',
+  },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+  },
+  logo: {
+    alignContent: 'center',
+    content: {
+      xs: `url(${BCGovLogoV})`,
+      sm: `url(${BCGovLogoH})`,
+    },
+    height: '4em',
+    position: 'relative',
+    top: '-2px',
+    cursor: 'pointer',
+  },
+  titleText: {
+    fontSize: {
+      xs: '1.3em',
+      sm: '1.5em',
+    },
+    marginLeft: {
+      xs: '.25em',
+      sm: '.5em',
+    },
+  },
+  menuLink: {
+    textTransform: 'none',
+    textDecoration: 'none',
+    color: 'inherit',
   },
 }
+
 export default function Header() {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>(undefined)
+  const navigate = useNavigate()
   const theme = useTheme()
-  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
+  const mdMatches = useMediaQuery(theme.breakpoints.up('lg'))
+
+  const handleMenuClick = (event: MouseEvent) => {
+    setAnchorEl(event.currentTarget as HTMLElement)
+  }
+  const handleMenuClose = () => {
+    setAnchorEl(undefined)
+  }
+  const buttonClicked = (route: string) => {
+    navigate(route)
+  }
+
   return (
     <AppBar position="fixed" sx={styles.appBar}>
-      <Toolbar
-        sx={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          alignContent: 'center',
-          justifyContent: 'space-between',
-        }}
-        id="back-to-top-anchor"
-      >
-        <Stack direction="row" id="logo_name">
-          <a href="/">
-            <img alt="Logo" src={BCGovLogo} />
-          </a>
-          <div>
-            {' '}
-            <span
-              style={{
-                fontFamily: 'BCSans',
-                fontSize: '1.5em',
-                lineHeight: '2.25em',
-                marginLeft: '1em',
-                alignItems: 'center',
-              }}
-            >
-              Organics Info
-            </span>
-          </div>
+      <Toolbar sx={styles.toolbar} id="back-to-top-anchor">
+        <Stack
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          id="logo_name"
+        >
+          <Link
+            style={{ display: 'inline-flex' }}
+            onClick={() => buttonClicked('/')}
+          >
+            <Box
+              component="img"
+              data-testid="header-logo"
+              sx={styles.logo}
+              alt="Logo"
+            />
+          </Link>
+          <Typography data-testid="header-title" sx={styles.titleText}>
+            Organics Info
+          </Typography>
         </Stack>
         <Stack direction="row" id="nav">
           {mdMatches && (
-            <div>
-              <a
-                href={'/search'}
-                target={'_self'}
-                style={{ textDecoration: 'none' }}
+            <>
+              <HeaderIconButton
+                onClick={() => buttonClicked('/map')}
+                icon={<Map color="secondary" />}
               >
-                <IconButton>
-                  <Feed color="secondary"></Feed>
-                </IconButton>
-                <span
-                  style={{
+                Map Search
+              </HeaderIconButton>
+              <HeaderIconButton
+                onClick={() => buttonClicked('/search')}
+                icon={<Feed color="secondary" />}
+              >
+                Text Search
+              </HeaderIconButton>
+              <a href="mailto:env.omrr.reg.reviews@gov.bc.ca">
+                <Link
+                  component="button"
+                  sx={{
                     color: '#ffffff',
                     textDecoration: 'none',
                     textTransform: 'none',
+                    padding: '.5em 1em',
                   }}
                 >
-                  {' '}
-                  Text Search
-                </span>
+                  Contact Us
+                </Link>
               </a>
-            </div>
+            </>
           )}
           {!mdMatches && (
             <div>
-              <a href={'/search'} target={'_self'}>
-                <IconButton>
-                  <Menu color="secondary"></Menu>
-                </IconButton>
-              </a>
+              <IconButton
+                onClick={handleMenuClick}
+                aria-label="Menu"
+                title="Menu"
+              >
+                <Menu color="secondary" />
+              </IconButton>
+              <MenuComponent
+                id="headerMenu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={Boolean(anchorEl)}
+                onClose={handleMenuClose}
+              >
+                <MenuItem onClick={handleMenuClose}>
+                  <Link
+                    sx={styles.menuLink}
+                    onClick={() => buttonClicked('/map')}
+                    component="button"
+                  >
+                    Map Search
+                  </Link>
+                </MenuItem>
+                <MenuItem onClick={handleMenuClose}>
+                  <Link
+                    sx={styles.menuLink}
+                    onClick={() => buttonClicked('/search')}
+                    component="button"
+                  >
+                    Text Search
+                  </Link>
+                </MenuItem>
+                <MenuItem onClick={handleMenuClose}>
+                  <a
+                    href="mailto:env.omrr.reg.reviews@gov.bc.ca"
+                    style={{ textDecoration: 'none', color: 'inherit' }}
+                  >
+                    Contact Us
+                  </a>
+                </MenuItem>
+              </MenuComponent>
             </div>
           )}
         </Stack>
diff --git a/frontend/src/components/HeaderIconButton.tsx b/frontend/src/components/HeaderIconButton.tsx
new file mode 100644
index 00000000..514858df
--- /dev/null
+++ b/frontend/src/components/HeaderIconButton.tsx
@@ -0,0 +1,37 @@
+import { MouseEventHandler, ReactNode } from 'react'
+import { Icon, Link } from '@mui/material'
+
+interface Props {
+  children?: ReactNode
+  icon?: ReactNode
+  onClick?: MouseEventHandler
+  [key: string]: any
+}
+
+export function HeaderIconButton({
+  children,
+  icon,
+  onClick,
+  ...rest
+}: Readonly<Props>) {
+  return (
+    <Link
+      {...rest}
+      sx={{
+        textTransform: 'none',
+        textDecoration: 'none',
+        padding: '.5em 1em',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '0.5em',
+        color: '#ffffff',
+      }}
+      onClick={onClick}
+      component="button"
+    >
+      {icon ? <Icon style={{ display: 'inline-flex' }}>{icon}</Icon> : null}
+      {children}
+    </Link>
+  )
+}
diff --git a/frontend/src/components/HeaderWithRouting.tsx b/frontend/src/components/HeaderWithRouting.tsx
deleted file mode 100644
index bb982bc2..00000000
--- a/frontend/src/components/HeaderWithRouting.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import BCGovLogoH from '@/assets/BCID_H_rgb_rev.png'
-import BCGovLogoV from '@/assets/BCID_V_rgb_rev.png'
-import {
-  AppBar,
-  Box,
-  Icon,
-  IconButton,
-  Link,
-  Menu as MenuComponent,
-  MenuItem,
-  Toolbar,
-  Typography,
-} from '@mui/material'
-import { Feed, Menu } from '@mui/icons-material'
-import Stack from '@mui/material/Stack'
-import { useTheme } from '@mui/material/styles'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import { useNavigate } from 'react-router'
-import { useState } from 'react'
-
-const styles = {
-  appBar: {
-    color: '#ffffff',
-    backgroundColor: '#053662',
-    borderBottom: '0.1em solid rgb(252, 186, 25) !important',
-  },
-}
-export default function HeaderWithRouting() {
-  const [anchorEl, setAnchorEl] = useState(null)
-
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-  const navigate = useNavigate()
-  const buttonClicked = (route: string) => {
-    navigate(route)
-  }
-  const theme = useTheme()
-  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
-  return (
-    <AppBar position="fixed" sx={styles.appBar}>
-      <Toolbar
-        sx={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          alignContent: 'center',
-          justifyContent: 'space-between',
-        }}
-        id="back-to-top-anchor"
-      >
-        <Stack direction="row" justifyContent={'center'} id="logo_name">
-          <a href="/" style={{ display: 'inline-flex' }}>
-            <Box
-              component="img"
-              data-testid="header-logo"
-              sx={{
-                alignContent: 'center',
-                content: {
-                  xs: `url(${BCGovLogoV})`,
-                  sm: `url(${BCGovLogoH})`,
-                },
-                height: '4em',
-                position: 'relative',
-                top: '-2px',
-              }}
-              alt="Logo"
-            />
-          </a>
-          <div style={{ display: 'inline-flex' }}>
-            <Typography
-              data-testid="header-title"
-              sx={{
-                display: 'inline-flex',
-                fontFamily: 'BCSans',
-                fontSize: {
-                  xs: '1.25em',
-                  sm: '1.5em',
-                },
-                lineHeight: '100%',
-                alignItems: 'center',
-                marginLeft: {
-                  xs: '.25em',
-                  sm: '.5em',
-                },
-              }}
-            >
-              Organics Info
-            </Typography>
-          </div>
-        </Stack>
-        <Stack direction="row" id="nav">
-          {mdMatches && (
-            <div>
-              <Link
-                sx={{
-                  textTransform: 'none',
-                  textDecoration: 'none',
-                  padding: '.5em 1em',
-                  display: 'inline-flex',
-                  justifyContent: 'center',
-                }}
-                onClick={() => buttonClicked('/search')}
-                component="button"
-              >
-                <span
-                  style={{
-                    color: '#ffffff',
-                    textDecoration: 'none',
-                    textTransform: 'none',
-                    display: 'inline-flex',
-                  }}
-                >
-                  <Icon
-                    sx={{
-                      display: 'inline-flex',
-                      marginRight: '.333em',
-                    }}
-                  >
-                    <Feed color="secondary"></Feed>
-                  </Icon>
-                  Text Search
-                </span>
-              </Link>
-              <a href="mailto:env.omrr.reg.reviews@gov.bc.ca">
-                <Link
-                  component="button"
-                  sx={{
-                    color: '#ffffff',
-                    textDecoration: 'none',
-                    textTransform: 'none',
-                    padding: '.5em 1em',
-                  }}
-                >
-                  Contact Us
-                </Link>
-              </a>
-            </div>
-          )}
-          {!mdMatches && (
-            <div>
-              <IconButton onClick={handleClick}>
-                <Menu color="secondary"></Menu>
-              </IconButton>
-              <MenuComponent
-                id="headerMenu"
-                anchorEl={anchorEl}
-                keepMounted
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-              >
-                <MenuItem onClick={handleClose}>
-                  <Link
-                    data-testid="header-text-search"
-                    sx={{
-                      textTransform: 'none',
-                      textDecoration: 'none',
-                      color: 'inherit',
-                    }}
-                    onClick={() => buttonClicked('/search')}
-                    component="button"
-                  >
-                    Text Search
-                  </Link>
-                </MenuItem>
-                <MenuItem onClick={handleClose}>
-                  <a data-testid="header-contact-us"
-                    href="mailto:env.omrr.reg.reviews@gov.bc.ca"
-                    style={{ textDecoration: 'none', color: 'inherit' }}
-                  >
-                    Contact Us
-                  </a>
-                </MenuItem>
-              </MenuComponent>
-            </div>
-          )}
-        </Stack>
-      </Toolbar>
-    </AppBar>
-  )
-}
diff --git a/frontend/src/components/MapView.jsx b/frontend/src/components/MapView.jsx
deleted file mode 100644
index 95e361ae..00000000
--- a/frontend/src/components/MapView.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import Table from '@mui/material/Table'
-import TableCell from '@mui/material/TableCell'
-import TableRow from '@mui/material/TableRow'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css' // Import Leaflet CSS
-import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
-import MarkerClusterGroup from 'react-leaflet-cluster'
-import { useSelector } from 'react-redux'
-import pin from '../assets/marker-icon-2x-red.png'
-import shadow from '../assets/marker-shadow.png'
-/**
- * Renders a map with a marker at the supplied location
- *
- */
-const LeafletMapWithPoint = () => {
-  const mapPopupValue = useSelector((state) => state.omrr.mapPopupValue)
-  const status = useSelector((state) => state.omrr.status)
-
-  // Set the position of the marker for center of BC
-  const position = [53.7267, -127.6476]
-
-  //define red icon
-  const redIcon = new L.Icon({
-    //read from assets
-    iconUrl: pin,
-    shadowUrl: shadow,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowSize: [41, 41],
-  })
-
-  return (
-    <>
-      <MapContainer
-        id="map"
-        center={position}
-        zoom={6}
-        style={{ height: '65em', width: '100%', marginLeft: '4em' }}
-        className="map-container"
-      >
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
-        <MarkerClusterGroup chunkedLoading>
-          {status === 'succeeded' &&
-            mapPopupValue.map((item, index) => (
-              <Marker key={index} position={item.position} icon={redIcon}>
-                <Popup sx={{ maxWidth: '50em' }}>
-                  <Table key={index} size="small">
-                    {Object.keys(item.details).map((itemDetails) => (
-                      <>
-                        <TableRow key={itemDetails}>
-                          <TableCell variant="head" align="right">
-                            {itemDetails}
-                          </TableCell>
-                          <TableCell align="right">
-                            {item.details[itemDetails]}
-                          </TableCell>
-                        </TableRow>
-                      </>
-                    ))}
-                  </Table>
-                </Popup>
-              </Marker>
-            ))}
-        </MarkerClusterGroup>
-      </MapContainer>
-    </>
-  )
-}
-
-export default LeafletMapWithPoint
diff --git a/frontend/src/components/MapView.test.tsx b/frontend/src/components/MapView.test.tsx
new file mode 100644
index 00000000..006a0b0a
--- /dev/null
+++ b/frontend/src/components/MapView.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+
+import MapView from './MapView'
+import { render } from '@/test-utils'
+import { OmrrSliceState } from '@/features/omrr/omrr-slice'
+import { omrrTestData } from '@/mocks/omrr-data'
+import OmrrData from '@/interfaces/omrr'
+
+describe('Test suite for MapView', () => {
+  it('should render the MapView with markers', () => {
+    render(<MapView />, {
+      withStateProvider: true,
+      initialState: {
+        omrr: {
+          value: omrrTestData,
+          status: 'succeeded',
+        } as OmrrSliceState,
+      },
+    })
+
+    screen.getByTestId('map-view')
+    const markers = screen.getAllByAltText('Authorization marker')
+    expect(markers.length > 0).toBe(true)
+  })
+
+  it('should render the MapView with no markers', async () => {
+    render(<MapView />, {
+      withStateProvider: true,
+      initialState: {
+        omrr: {
+          value: [] as OmrrData[],
+          status: 'succeeded',
+        } as OmrrSliceState,
+      },
+    })
+
+    screen.getByTestId('map-view')
+    const markers = screen.queryAllByAltText('Authorization marker')
+    expect(markers).toHaveLength(0)
+  })
+})
diff --git a/frontend/src/components/MapView.tsx b/frontend/src/components/MapView.tsx
new file mode 100644
index 00000000..bf5bdb22
--- /dev/null
+++ b/frontend/src/components/MapView.tsx
@@ -0,0 +1,107 @@
+import L, { LatLngTuple } from 'leaflet'
+import {
+  MapContainer,
+  Marker,
+  TileLayer,
+  Tooltip,
+  ZoomControl,
+} from 'react-leaflet'
+import MarkerClusterGroup from 'react-leaflet-cluster'
+import { useSelector } from 'react-redux'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+import { RootState } from '@/app/store'
+import OmrrData from '@/interfaces/omrr'
+
+import markerIcon2x from '../assets/marker-icon-2x-blue.png'
+import markerIcon1x from '../assets/marker-icon-1x-blue.png'
+import shadowIcon2x from '../assets/marker-shadow-2x.png'
+import shadowIcon1x from '../assets/marker-shadow-1x.png'
+
+import 'leaflet/dist/leaflet.css'
+
+const blueIcon2x = new L.Icon({
+  iconUrl: markerIcon2x,
+  iconSize: [34.5, 45],
+  iconAnchor: [17.25, 45],
+  // both relative to iconAnchor
+  popupAnchor: [0, -42],
+  tooltipAnchor: [0, -42],
+  shadowUrl: shadowIcon2x,
+  shadowSize: [32, 16],
+  shadowAnchor: [16, 8],
+})
+
+const blueIcon1x = new L.Icon({
+  iconUrl: markerIcon1x,
+  iconSize: [23, 30],
+  iconAnchor: [11.5, 30],
+  // both relative to iconAnchor
+  popupAnchor: [0, -28],
+  tooltipAnchor: [0, -28],
+  shadowUrl: shadowIcon1x,
+  shadowSize: [16, 8],
+  shadowAnchor: [8, 4],
+})
+
+// Set the position of the marker for center of BC
+const CENTER_OF_BC: LatLngTuple = [53.7267, -127.6476]
+
+/**
+ * Renders a map with a marker at the supplied location
+ */
+function MapView() {
+  const values = useSelector((state: RootState) => state.omrr.value)
+  const status = useSelector((state: RootState) => state.omrr.status)
+  const theme = useTheme()
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const hasMarkers =
+    status === 'succeeded' && Array.isArray(values) && values.length > 0
+  const markerIcon = isSmall ? blueIcon1x : blueIcon2x
+
+  return (
+    <div className="map-view" data-testid="map-view">
+      <MapContainer
+        id="map"
+        center={CENTER_OF_BC}
+        zoom={6}
+        zoomControl={false}
+        className="map-view-container"
+      >
+        <ZoomControl position="bottomright" />
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {hasMarkers && (
+          <MarkerClusterGroup
+            chunkedLoading
+            maxClusterRadius={20}
+            spiderfyOnMaxZoom
+            showCoverageOnHover
+          >
+            {values.map((item: OmrrData, index: number) => {
+              const key = `Marker-${index}-${item['Regulated Party']}`
+              const title = item['Regulated Party']
+              return (
+                <Marker
+                  key={key}
+                  position={[item.Latitude, item.Longitude]}
+                  icon={markerIcon}
+                  alt="Authorization marker"
+                  title={title}
+                >
+                  <Tooltip direction="top">{title}</Tooltip>
+                </Marker>
+              )
+            })}
+          </MarkerClusterGroup>
+        )}
+      </MapContainer>
+    </div>
+  )
+}
+
+export default MapView
diff --git a/frontend/src/components/__tests__/NotFound.test.tsx b/frontend/src/components/__tests__/NotFound.test.tsx
index 573dc74a..89d887b6 100644
--- a/frontend/src/components/__tests__/NotFound.test.tsx
+++ b/frontend/src/components/__tests__/NotFound.test.tsx
@@ -14,6 +14,6 @@ describe('NotFound', () => {
       useNavigate: useNavigateMock,
     }))
     render(<NotFound />)
-    const headingElement = screen.getByRole('heading', { name: /404/i })
+    screen.getByRole('heading', { name: /404/i })
   })
 })
diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts
new file mode 100644
index 00000000..084cf8a1
--- /dev/null
+++ b/frontend/src/constants/env.ts
@@ -0,0 +1,5 @@
+const env = import.meta.env
+
+export const isDevelopment = env.DEV
+export const isTest = env.NODE_ENV === 'test'
+export const isProduction = env.PROD
diff --git a/frontend/src/features/omrr/omrr-slice.ts b/frontend/src/features/omrr/omrr-slice.ts
index 40319411..ba384ec6 100644
--- a/frontend/src/features/omrr/omrr-slice.ts
+++ b/frontend/src/features/omrr/omrr-slice.ts
@@ -3,8 +3,8 @@ import {
   ActionReducerMapBuilder,
   createAsyncThunk,
   createSlice,
-  PayloadAction
-} from '@reduxjs/toolkit';
+  PayloadAction,
+} from '@reduxjs/toolkit'
 import { RootState } from '@/app/store'
 import apiService from '@/service/api-service'
 import { Location } from '@/interfaces/location'
@@ -39,7 +39,7 @@ export const fetchOMRRData = createAsyncThunk(
   async () => {
     const result = await apiService.getAxiosInstance().get('/omrr')
 
-    return result.data
+    return result?.data
   },
 )
 
@@ -97,7 +97,7 @@ function filterDataBasedOnDifferentFilters(state: OmrrSliceState) {
     const filteredItems = state.filteredValue.filter(
       (item: OmrrData) =>
         item['Authorization Type']?.toLowerCase() ===
-        'notification'.toLowerCase()
+        'notification'.toLowerCase(),
     )
     finalFilteredOMRRList = [...finalFilteredOMRRList, ...filteredItems]
   }
@@ -129,7 +129,7 @@ function filterDataBasedOnDifferentFilters(state: OmrrSliceState) {
   }
   if (state.landApplicationBioSolidsFilter) {
     const filteredItems = state.filteredValue.filter((item: OmrrData) =>
-      item['Operation Type']?.toLowerCase().includes('land application')
+      item['Operation Type']?.toLowerCase().includes('land application'),
     )
     nestedFilterOMRRList = [...nestedFilterOMRRList, ...filteredItems]
   }
@@ -253,7 +253,7 @@ export const omrrSlice = createSlice({
   },
   extraReducers: (builder: ActionReducerMapBuilder<OmrrSliceState>) => {
     // Handle the pending action
-    builder.addCase(fetchOMRRData.pending, (state, action) => {
+    builder.addCase(fetchOMRRData.pending, (state, _action) => {
       // Set the status to loading
       state.status = 'loading'
     })
@@ -274,9 +274,9 @@ export const omrrSlice = createSlice({
       // Store the data in the state
       // format the date as MMM DD, YYYY
       const lastModified = new Date(action.payload.lastModified)
-      const month = lastModified.toLocaleString('default', { month: 'short' });
+      const month = lastModified.toLocaleString('default', { month: 'short' })
       state.lastModified =
-        month + ' ' + lastModified.getDate() + ', ' + lastModified.getFullYear();
+        month + ' ' + lastModified.getDate() + ', ' + lastModified.getFullYear()
       let omrrData = []
       for (const item of action.payload.omrrData) {
         const individualData = {
@@ -285,17 +285,17 @@ export const omrrSlice = createSlice({
         if (individualData['Effective/Issue Date']) {
           const effDate = individualData['Effective/Issue Date'].substring(
             0,
-            10
-          );
-          individualData['Effective/Issue Date'] = effDate;
+            10,
+          )
+          individualData['Effective/Issue Date'] = effDate
         } else {
           individualData['Effective/Issue Date'] = undefined
         }
         if (item['Last Amendment Date']) {
           const lastAmendmentDate = individualData[
             'Last Amendment Date'
-            ].substring(0, 10);
-          individualData['Last Amendment Date'] = lastAmendmentDate;
+          ].substring(0, 10)
+          individualData['Last Amendment Date'] = lastAmendmentDate
         } else {
           individualData['Last Amendment Date'] = undefined
         }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 490d9603..f130e74b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,8 @@
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
 @font-face {
   font-family: 'BCSans';
   font-style: normal;
@@ -26,8 +31,27 @@
   src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-BoldItalic.woff')
     format('woff');
 }
+
 .map-container {
-    margin-top: 1em;
-    border-radius: 4px;
-    z-index: 1;
+  margin-top: 1em;
+  border-radius: 4px;
+  z-index: 1;
+}
+
+.map-view {
+  /* Map height is screen height minus footer height */
+  height: calc(100vh - 4em);
+  /* Header is fixed */
+  padding-top: 4em;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.map-view > .map-view-container {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d5c5084f..2381bb2e 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
+import { Provider } from 'react-redux'
 import { ThemeProvider } from '@emotion/react'
-import { Container, CssBaseline } from '@mui/material'
+import { CssBaseline } from '@mui/material'
+
 import theme from './theme'
 import App from './App'
 import { store } from './app/store'
+
 import './index.css'
-import { Provider } from 'react-redux'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
diff --git a/frontend/src/mocks/omrr-data.ts b/frontend/src/mocks/omrr-data.ts
new file mode 100644
index 00000000..2942ded7
--- /dev/null
+++ b/frontend/src/mocks/omrr-data.ts
@@ -0,0 +1,40 @@
+import OmrrData from '@/interfaces/omrr'
+
+export const omrrTestData: OmrrData[] = [
+  {
+    Manure: false,
+    'Untreated and Unprocessed Wood Residuals': false,
+    'Domestic Septic Tank Sludge': false,
+    Latitude: 49.028961,
+    'Yard Waste': false,
+    'Fish Wastes': false,
+    Whey: false,
+    'Animal Bedding': false,
+    Biosolids: false,
+    'Hatchery Waste': false,
+    'Last Amendment Date': new Date('1996-04-11T00:00:00.000+00:00'),
+    'Authorization Status': 'Inactive',
+    'Authorization Number': 11123,
+    'Milk Processing Waste': false,
+    'Poultry Carcasses': false,
+    'Authorization Type': 'Notification',
+    'Effective/Issue Date': new Date('2002-02-04T00:00:00.000+00:00'),
+    Longitude: -123.805217,
+    'Facility Location': 'LOT 10, OYSTER DISTRICT',
+    'Brewery Waste/Wine Waste': false,
+    'Regulated Party': 'WYNDLOW WOOD WASTE REDUCTION INC.',
+    'Food Waste': false,
+  },
+  {
+    Latitude: 49.019078,
+    'Last Amendment Date': new Date('1995-02-01T00:00:00.000+00:00'),
+    'Authorization Status': 'Inactive',
+    'Authorization Number': 11475,
+    'Waste Discharge Regulation': 'Schedule 2 - Composting Operations',
+    'Authorization Type': 'Permit',
+    'Effective/Issue Date': new Date('1992-11-19T00:00:00.000+00:00'),
+    Longitude: -122.455984,
+    'Facility Location': 'ABBOTSFORD, 27715 HUNTINGDON ROAD',
+    'Regulated Party': 'BIOWASTE MANAGEMENT LTD.',
+  },
+]
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index acd6f53c..133aac65 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -1,14 +1,15 @@
 import { Routes, Route } from 'react-router-dom'
-import NotFound from '@/components/NotFound'
 import Dashboard from '@/components/Dashboard'
 import AuthorizationList from '@/components/AuthorizationList'
 import AuthorizationDetails from '@/components/AuthorizationDetails'
+import MapView from '@/components/MapView'
 
 export default function AppRoutes() {
   return (
     <Routes>
       <Route path="/" element={<Dashboard />} />
       <Route path="/search" element={<AuthorizationList />} />
+      <Route path="/map" element={<MapView />} />
       <Route path="/authorization/:id" element={<AuthorizationDetails />} />
       <Route path="*" element={<Dashboard />} />
     </Routes>
diff --git a/frontend/src/service/api-service.ts b/frontend/src/service/api-service.ts
index b9b1d69e..beb6fb37 100644
--- a/frontend/src/service/api-service.ts
+++ b/frontend/src/service/api-service.ts
@@ -1,6 +1,8 @@
 import type { AxiosInstance } from 'axios'
 import axios from 'axios'
 
+import { isTest } from '@/constants/env'
+
 class APIService {
   private readonly client: AxiosInstance
 
@@ -13,11 +15,15 @@ class APIService {
     })
     this.client.interceptors.response.use(
       (config) => {
-        console.info(`received response status: ${config.status}`)
+        if (!isTest) {
+          console.info(`received response status: ${config.status}`)
+        }
         return config
       },
       (error) => {
-        console.error(error)
+        if (!isTest) {
+          console.error(error)
+        }
       },
     )
   }
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
index eb0ff7ff..1abcc278 100644
--- a/frontend/src/test-setup.ts
+++ b/frontend/src/test-setup.ts
@@ -1,32 +1,78 @@
 import '@testing-library/jest-dom'
 import { afterAll, afterEach, beforeAll } from 'vitest'
-import { setupServer } from 'msw/node'
 import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import mediaQuery from 'css-mediaquery'
+
+import OmrrResponse from '@/interfaces/omrr-response'
+import { omrrTestData } from '@/mocks/omrr-data'
+import { cleanup } from '@testing-library/react'
+
+// Vitest Mocks
+
+// This module doesn't work in unit tests as it is not in ESM
+vi.mock('react-leaflet-cluster', () => {
+  return {
+    default: ({ children }: any) => {
+      return children
+    },
+  }
+})
 
-const users = [
-  {
-    id: 1,
-    name: 'first post title',
-    email: 'first post body',
-  },
-  // ...
+/**
+ * Media Query support
+ * Call the setScreenWidth() function before a test to set the window width.
+ * @see https://mui.com/material-ui/react-use-media-query/#testing
+ * @see https://stackoverflow.com/questions/56180772/jest-material-ui-correctly-mocking-usemediaquery
+ */
+function createMatchMedia() {
+  return (query: string): any => {
+    const width = window.innerWidth
+    return {
+      matches: mediaQuery.match(query, { width }),
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      addEventListener: () => {},
+      removeListener: () => {},
+      removeEventListener: () => {},
+    }
+  }
+}
+
+// MSW Setup
+const baseUrl = 'http://localhost:3000/api'
+
+const omrrResponse: OmrrResponse = {
+  omrrData: omrrTestData,
+  lastModified: new Date().toISOString(),
+}
+
+const successHandlers = [
+  http.get(`${baseUrl}/omrr`, () => {
+    return HttpResponse.json(omrrResponse, { status: 200 })
+  }),
 ]
 
-export const restHandlers = [
-  http.get('http://localhost:3000/api/v1/users', () => {
-    return new HttpResponse(JSON.stringify(users), {
-      status: 200,
-    })
+export const errorHandlers = [
+  http.get(`${baseUrl}/omrr`, () => {
+    return new HttpResponse(null, { status: 500 })
   }),
 ]
 
-const server = setupServer(...restHandlers)
+export const mswServer = setupServer(...successHandlers)
 
 // Start server before all tests
-beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+beforeAll(() => {
+  window.matchMedia = createMatchMedia()
+  mswServer.listen({ onUnhandledRequest: 'error' })
+})
 
 //  Close server after all tests
-afterAll(() => server.close())
+afterAll(() => mswServer.close())
 
 // Reset handlers after each test `important for test isolation`
-afterEach(() => server.resetHandlers())
+afterEach(() => {
+  cleanup()
+  mswServer.resetHandlers()
+})
diff --git a/frontend/src/test-utils.tsx b/frontend/src/test-utils.tsx
index 93f2f6cb..35f0e03a 100644
--- a/frontend/src/test-utils.tsx
+++ b/frontend/src/test-utils.tsx
@@ -1,15 +1,95 @@
-import { cleanup, render } from '@testing-library/react'
-import { afterEach } from 'vitest'
-
-afterEach(() => {
-  cleanup()
-})
-
-function customRender(ui: React.ReactElement, options = {}) {
-  return render(ui, {
-    // wrap provider(s) here if needed
-    wrapper: ({ children }) => children,
-    ...options,
+import { ReactElement, ReactNode } from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { render, RenderOptions } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+import { RootState, setupStore } from '@/app/store'
+
+interface TestRouterProps {
+  children: ReactNode
+  withRouter?: boolean
+}
+
+function TestRouter({
+  children,
+  withRouter = false,
+}: Readonly<TestRouterProps>) {
+  if (withRouter) {
+    return (
+      <BrowserRouter>
+        <Routes>
+          <Route path="*" element={children} />
+        </Routes>
+      </BrowserRouter>
+    )
+  }
+  return children
+}
+
+interface TestStateProviderProps {
+  children: ReactNode
+  withStateProvider?: boolean
+  initialState?: Partial<RootState>
+}
+
+function TestStateProvider({
+  children,
+  withStateProvider = false,
+  initialState,
+}: Readonly<TestStateProviderProps>) {
+  if (withStateProvider) {
+    const store = setupStore(initialState)
+    return <Provider store={store}>{children}</Provider>
+  }
+  return children
+}
+
+type CustomRenderOptions = Omit<RenderOptions, 'wrapper'> & {
+  screenWidth?: number
+  withRouter?: boolean
+  withStateProvider?: boolean
+  initialState?: Partial<RootState>
+}
+
+function customRender(ui: ReactElement, options: CustomRenderOptions = {}) {
+  // Set a custom screen width
+  const {
+    screenWidth,
+    withRouter,
+    withStateProvider,
+    initialState,
+    ...restOptions
+  } = options
+  if (screenWidth !== undefined) {
+    setScreenWidth(screenWidth)
+  }
+
+  const renderValues = render(ui, {
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <TestRouter withRouter={withRouter}>
+        <TestStateProvider
+          withStateProvider={withStateProvider}
+          initialState={initialState}
+        >
+          {children}
+        </TestStateProvider>
+      </TestRouter>
+    ),
+    ...restOptions,
+  })
+
+  // Include user events in the return value
+  return {
+    user: userEvent.setup(),
+    ...renderValues,
+  }
+}
+
+export function setScreenWidth(width: number) {
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: width,
   })
 }
 
diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
index cacdccfc..8e5587ce 100644
--- a/frontend/src/theme.tsx
+++ b/frontend/src/theme.tsx
@@ -1,5 +1,24 @@
-import { createTheme, styled } from '@mui/material/styles'
-import { fontSize } from '@mui/system'
+import { createTheme } from '@mui/material/styles'
+
+declare module '@mui/material/styles' {
+  interface BreakpointOverrides {
+    xs: true
+    sm: true
+    md: true
+    lg: true
+    xl: true
+    xxl: true
+  }
+}
+
+export const themeBreakpointValues = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1320,
+}
 
 // A custom theme for this app
 const theme = createTheme({
@@ -20,6 +39,9 @@ const theme = createTheme({
       main: '#234720',
     },
   },
+  breakpoints: {
+    values: themeBreakpointValues,
+  },
   typography: {
     fontFamily: 'BCSans !important',
   },
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 29bc6670..8b1de646 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,10 +1,16 @@
-import { defineConfig, loadEnv } from 'vite'
+import { loadEnv, defineConfig } from 'vite'
 import { fileURLToPath, URL } from 'node:url'
 import react from '@vitejs/plugin-react'
+
 // https://vitejs.dev/config/
 export default ({ mode }) => {
   // Load app-level env vars to node-level env vars.
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
+
+  const define: Record<string, any> = {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+  }
+
   return defineConfig({
     plugins: [react()],
     server: {
@@ -20,6 +26,9 @@ export default ({ mode }) => {
           changeOrigin: true,
         },
       },
+      watch: {
+        ignored: ['**/coverage/**', '**/playwright-report/**'],
+      },
     },
     resolve: {
       // https://vitejs.dev/config/shared-options.html#resolve-alias
@@ -81,10 +90,13 @@ export default ({ mode }) => {
         },
       },
     },
+    define,
+    // @ts-ignore
     test: {
       exclude: ['**/node_modules/**', '**/e2e/**'],
       environment: 'jsdom',
       globals: true,
+      setupFiles: './src/test-setup.ts',
       coverage: {
         reporter: ['lcov', 'text-summary', 'text', 'json', 'html'],
       },