diff --git a/backend/src/app/services/parcelDescriptions/parcelDescriptions.service.spec.ts b/backend/src/app/services/parcelDescriptions/parcelDescriptions.service.spec.ts
index 4524f3d6..0bc795d0 100644
--- a/backend/src/app/services/parcelDescriptions/parcelDescriptions.service.spec.ts
+++ b/backend/src/app/services/parcelDescriptions/parcelDescriptions.service.spec.ts
@@ -552,7 +552,7 @@ describe('ParcelDescriptionsService', () => {
         srAction: 'approved',
         userAction: 'approved',
         apiAction: 'updated',
-        srValue: false
+        srValue: false,
       };
       parcelDescriptionToAdd = {
         id: idForAddedParcelDescription,
@@ -563,7 +563,7 @@ describe('ParcelDescriptionsService', () => {
         srAction: 'pending',
         userAction: 'pending',
         apiAction: 'added',
-        srValue: false
+        srValue: false,
       };
       parcelDescriptionToDelete = {
         id: idForDeletedParcelDescription,
@@ -574,7 +574,7 @@ describe('ParcelDescriptionsService', () => {
         srAction: 'pending',
         userAction: 'pending',
         apiAction: 'deleted',
-        srValue: false
+        srValue: false,
       };
 
       siteId = '100';
@@ -784,7 +784,7 @@ describe('ParcelDescriptionsService', () => {
           srAction: 'pending',
           userAction: 'pending',
           apiAction: 'added',
-          srValue: false
+          srValue: false,
         },
       ];
       userInfo = { givenName: 'test' };
@@ -1016,7 +1016,7 @@ describe('ParcelDescriptionsService', () => {
           srAction: 'approved',
           userAction: 'approved',
           apiAction: 'updated',
-          srValue: true
+          srValue: true,
         },
       ];
       userInfo = { givenName: 'test' };
@@ -1312,7 +1312,7 @@ describe('ParcelDescriptionsService', () => {
           srAction: 'approved',
           userAction: 'approved',
           apiAction: 'deleted',
-          srValue: true
+          srValue: true,
         },
       ];
 
diff --git a/backend/src/app/services/site/site.service.spec.ts b/backend/src/app/services/site/site.service.spec.ts
index cce2e59d..dcf4901c 100644
--- a/backend/src/app/services/site/site.service.spec.ts
+++ b/backend/src/app/services/site/site.service.spec.ts
@@ -529,7 +529,7 @@ describe('SiteService', () => {
                   displayName: 'SAGER, J.',
                   srAction: 'false',
                   userAction: 'pending',
-                  srValue: true
+                  srValue: true,
                 },
               ],
             },
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ef8b47b4..ee4ea127 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,7 +13,7 @@
         "@bcgov/design-tokens": "^2.0.1",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@mui/material": "^5.10.8",
+        "@mui/material": "6.3.0",
         "@reduxjs/toolkit": "^1.8.5",
         "axios": "^0.27.2",
         "bootstrap": "^5.2.2",
@@ -2401,6 +2401,16 @@
         "stylis": "4.2.0"
       }
     },
+    "node_modules/@emotion/cache/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/cache/node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -2454,6 +2464,11 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@emotion/serialize/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
     "node_modules/@emotion/sheet": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
@@ -4275,34 +4290,34 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.16.11",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.11.tgz",
-      "integrity": "sha512-2eVDGg9OvIXNRmfDUQyKYH+jNcjdv1JkCH5F2YDgUye5fMX5nxGiYHAUe1BXaXyDMaLSwXC7LRksEKMiIQsFdw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.1.tgz",
+      "integrity": "sha512-2OmnEyoHpj5//dJJpMuxOeLItCCHdf99pjMFfUFdBteCunAK9jW+PwEo4mtdGcLs7P+IgZ+85ypd52eY4AigoQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.16.11",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.11.tgz",
-      "integrity": "sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/core-downloads-tracker": "^5.16.11",
-        "@mui/system": "^5.16.8",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.8",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz",
+      "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.3.0",
+        "@mui/system": "^6.3.0",
+        "@mui/types": "^7.2.20",
+        "@mui/utils": "^6.3.0",
         "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.10",
-        "clsx": "^2.1.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1",
+        "react-is": "^19.0.0",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -4311,6 +4326,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^6.3.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -4322,22 +4338,30 @@
         "@emotion/styled": {
           "optional": true
         },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
         "@types/react": {
           "optional": true
         }
       }
     },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g=="
+    },
     "node_modules/@mui/private-theming": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.8.tgz",
-      "integrity": "sha512-3Vl9yFVLU6T3CFtxRMQTcJ60Ijv7wxQi4yjH92+9YXcsqvVspeIYoocqNoIV/1bXGYfyWu5zrCmwQVHaGY7bug==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.1.tgz",
+      "integrity": "sha512-g0u7hIUkmXmmrmmf5gdDYv9zdAig0KoxhIQn1JN8IVqApzf/AyRhH3uDGx5mSvs8+a1zb4+0W6LC260SyTTtdQ==",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.16.8",
+        "@babel/runtime": "^7.26.0",
+        "@mui/utils": "^6.3.1",
         "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -4354,17 +4378,19 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.8.tgz",
-      "integrity": "sha512-OFdgFf8JczSRs0kvWGdSn0ZeXxWrY0LITDPJ/nAtLEvUUTyrlFaO4il3SECX8ruzvf1VnAxHx4M/4mX9oOn9yA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.1.tgz",
+      "integrity": "sha512-/7CC0d2fIeiUxN5kCCwYu4AWUDd9cCTxWCyo0v/Rnv6s8uk6hWgJC3VLZBoDENBHf/KjqDZuYJ2CR+7hD6QYww==",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@emotion/cache": "^11.11.0",
+        "@babel/runtime": "^7.26.0",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -4385,21 +4411,21 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.8.tgz",
-      "integrity": "sha512-L32TaFDFpGIi1g6ysRtmhc9zDgrlxDXu3NlrGE8gAsQw/ziHrPdr0PNr20O0POUshA1q14W4dNZ/z0Nx2F9lhA==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.16.8",
-        "@mui/styled-engine": "^5.16.8",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.8",
-        "clsx": "^2.1.0",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.1.tgz",
+      "integrity": "sha512-AwqQ3EAIT2np85ki+N15fF0lFXX1iFPqenCzVOSl3QXKy2eifZeGd9dGtt7pGMoFw5dzW4dRGGzRpLAq9rkl7A==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.3.1",
+        "@mui/styled-engine": "^6.3.1",
+        "@mui/types": "^7.2.21",
+        "@mui/utils": "^6.3.1",
+        "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -4424,9 +4450,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.19",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
-      "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
+      "version": "7.2.21",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz",
+      "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -4437,19 +4463,19 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.8.tgz",
-      "integrity": "sha512-P/yb7BSWallQUeiNGxb+TM8epHteIUC8gzNTdPV2VfKhVY/EnGliHgt5np0GPkjQ7EzwDi/+gBevrAJtf+K94A==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.1.tgz",
+      "integrity": "sha512-sjGjXAngoio6lniQZKJ5zGfjm+LD2wvLwco7FbKe1fu8A7VIFmz2SwkLb+MDPLNX1lE7IscvNNyh1pobtZg2tw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/types": "^7.2.15",
-        "@types/prop-types": "^15.7.12",
+        "@babel/runtime": "^7.26.0",
+        "@mui/types": "^7.2.21",
+        "@types/prop-types": "^15.7.14",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
+        "react-is": "^19.0.0"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -4465,6 +4491,11 @@
         }
       }
     },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g=="
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -25051,6 +25082,18 @@
         "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "stylis": "4.2.0"
+      },
+      "dependencies": {
+        "@emotion/memoize": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+          "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+        },
+        "@emotion/weak-memoize": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+          "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+        }
       }
     },
     "@emotion/hash": {
@@ -25096,6 +25139,13 @@
         "@emotion/unitless": "^0.10.0",
         "@emotion/utils": "^1.4.2",
         "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "@emotion/memoize": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+          "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+        }
       }
     },
     "@emotion/sheet": {
@@ -26499,82 +26549,98 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.16.11",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.11.tgz",
-      "integrity": "sha512-2eVDGg9OvIXNRmfDUQyKYH+jNcjdv1JkCH5F2YDgUye5fMX5nxGiYHAUe1BXaXyDMaLSwXC7LRksEKMiIQsFdw=="
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.1.tgz",
+      "integrity": "sha512-2OmnEyoHpj5//dJJpMuxOeLItCCHdf99pjMFfUFdBteCunAK9jW+PwEo4mtdGcLs7P+IgZ+85ypd52eY4AigoQ=="
     },
     "@mui/material": {
-      "version": "5.16.11",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.11.tgz",
-      "integrity": "sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==",
-      "requires": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/core-downloads-tracker": "^5.16.11",
-        "@mui/system": "^5.16.8",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.8",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz",
+      "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==",
+      "requires": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.3.0",
+        "@mui/system": "^6.3.0",
+        "@mui/types": "^7.2.20",
+        "@mui/utils": "^6.3.0",
         "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.10",
-        "clsx": "^2.1.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1",
+        "react-is": "^19.0.0",
         "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "19.0.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+          "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g=="
+        }
       }
     },
     "@mui/private-theming": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.8.tgz",
-      "integrity": "sha512-3Vl9yFVLU6T3CFtxRMQTcJ60Ijv7wxQi4yjH92+9YXcsqvVspeIYoocqNoIV/1bXGYfyWu5zrCmwQVHaGY7bug==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.1.tgz",
+      "integrity": "sha512-g0u7hIUkmXmmrmmf5gdDYv9zdAig0KoxhIQn1JN8IVqApzf/AyRhH3uDGx5mSvs8+a1zb4+0W6LC260SyTTtdQ==",
       "requires": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.16.8",
+        "@babel/runtime": "^7.26.0",
+        "@mui/utils": "^6.3.1",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.8.tgz",
-      "integrity": "sha512-OFdgFf8JczSRs0kvWGdSn0ZeXxWrY0LITDPJ/nAtLEvUUTyrlFaO4il3SECX8ruzvf1VnAxHx4M/4mX9oOn9yA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.1.tgz",
+      "integrity": "sha512-/7CC0d2fIeiUxN5kCCwYu4AWUDd9cCTxWCyo0v/Rnv6s8uk6hWgJC3VLZBoDENBHf/KjqDZuYJ2CR+7hD6QYww==",
       "requires": {
-        "@babel/runtime": "^7.23.9",
-        "@emotion/cache": "^11.11.0",
+        "@babel/runtime": "^7.26.0",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/system": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.8.tgz",
-      "integrity": "sha512-L32TaFDFpGIi1g6ysRtmhc9zDgrlxDXu3NlrGE8gAsQw/ziHrPdr0PNr20O0POUshA1q14W4dNZ/z0Nx2F9lhA==",
-      "requires": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.16.8",
-        "@mui/styled-engine": "^5.16.8",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.8",
-        "clsx": "^2.1.0",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.1.tgz",
+      "integrity": "sha512-AwqQ3EAIT2np85ki+N15fF0lFXX1iFPqenCzVOSl3QXKy2eifZeGd9dGtt7pGMoFw5dzW4dRGGzRpLAq9rkl7A==",
+      "requires": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.3.1",
+        "@mui/styled-engine": "^6.3.1",
+        "@mui/types": "^7.2.21",
+        "@mui/utils": "^6.3.1",
+        "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/types": {
-      "version": "7.2.19",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
-      "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
+      "version": "7.2.21",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz",
+      "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==",
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.8.tgz",
-      "integrity": "sha512-P/yb7BSWallQUeiNGxb+TM8epHteIUC8gzNTdPV2VfKhVY/EnGliHgt5np0GPkjQ7EzwDi/+gBevrAJtf+K94A==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.1.tgz",
+      "integrity": "sha512-sjGjXAngoio6lniQZKJ5zGfjm+LD2wvLwco7FbKe1fu8A7VIFmz2SwkLb+MDPLNX1lE7IscvNNyh1pobtZg2tw==",
       "requires": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/types": "^7.2.15",
-        "@types/prop-types": "^15.7.12",
+        "@babel/runtime": "^7.26.0",
+        "@mui/types": "^7.2.21",
+        "@types/prop-types": "^15.7.14",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
+        "react-is": "^19.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "19.0.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+          "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g=="
+        }
       }
     },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
diff --git a/frontend/package.json b/frontend/package.json
index 4d3bc6db..b4e710d2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
     "@bcgov/design-tokens": "^2.0.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@mui/material": "^5.10.8",
+    "@mui/material": "6.3.0",
     "@reduxjs/toolkit": "^1.8.5",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.2",
diff --git a/frontend/src/app/features/map/MapSearch.graphql b/frontend/src/app/features/map/MapSearch.graphql
index 30a27abc..08066722 100644
--- a/frontend/src/app/features/map/MapSearch.graphql
+++ b/frontend/src/app/features/map/MapSearch.graphql
@@ -1,39 +1,48 @@
 query mapSearch($searchParam: String) {
-    mapSearch(searchParam: $searchParam) {
-        data {
-            id
-            addrLine_1
-            latdeg
-            longdeg
-        }
+  mapSearch(searchParam: $searchParam) {
+    data {
+      id
+      addrLine_1
+      latdeg
+      longdeg
     }
+  }
 }
 
 query MapSearch_findSiteBySiteId($siteId: String!) {
-    findSiteBySiteId(siteId: $siteId) {
-        data {
-            id
-            addrLine_1
-            addrLine_2
-            addrLine_3
-            addrLine_4
-            city
-            latdeg
-            longdeg
-            latDegrees
-            latMinutes
-            latSeconds
-            longDegrees
-            longMinutes
-            longSeconds
-            generalDescription
-            siteRiskCode
-        }
+  findSiteBySiteId(siteId: $siteId) {
+    data {
+      id
+      addrLine_1
+      addrLine_2
+      addrLine_3
+      addrLine_4
+      city
+      latdeg
+      longdeg
+      latDegrees
+      latMinutes
+      latSeconds
+      longDegrees
+      longMinutes
+      longSeconds
+      generalDescription
+      siteRiskCode
     }
+  }
 }
 
-query MapSearch_filterSearchResults($page: Int!, $pageSize: Int!, $filters: SiteFilters!) {
-  searchSites(searchParam: "", page: $page, pageSize: $pageSize, filters: $filters) {
+query MapSearch_filterSearchResults(
+  $page: Int!
+  $pageSize: Int!
+  $filters: SiteFilters!
+) {
+  searchSites(
+    searchParam: ""
+    page: $page
+    pageSize: $pageSize
+    filters: $filters
+  ) {
     sites {
       id
       addrLine_1
@@ -65,10 +74,26 @@ query MapSearch_filterSearchResults($page: Int!, $pageSize: Int!, $filters: Site
 }
 
 mutation MapSearch_addCartItem($siteId: String!) {
-    addCartItem(cartDTO:  {
-       siteId: $siteId,
-       price: 0
-    }) {
-        success
+  addCartItem(cartDTO: { siteId: $siteId, price: 0 }) {
+    success
+  }
+}
+
+query MapSearch_findSitesAndPlaces($searchParam: String!) {
+  findSitesAndPlaces(searchParam: $searchParam) {
+    data {
+      sites {
+        id
+        commonName
+        latdeg
+        longdeg
+      }
+      places {
+        id
+        name
+        latdeg
+        longdeg
+      }
     }
+  }
 }
diff --git a/frontend/src/app/features/map/MapSearch.tsx b/frontend/src/app/features/map/MapSearch.tsx
index bf6269be..3ae3f094 100644
--- a/frontend/src/app/features/map/MapSearch.tsx
+++ b/frontend/src/app/features/map/MapSearch.tsx
@@ -1,6 +1,7 @@
 import { Autocomplete, Box, Stack } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { Map } from 'leaflet';
 
 import {
   ActiveToolEnum,
@@ -14,7 +15,7 @@ import { TextSearchButton } from './search/TextSearchButton';
 
 import './MapSearch.css';
 import { SearchInput } from './search/SearchInput';
-import React, { useContext, useState } from 'react';
+import React, { RefObject, useContext, useState } from 'react';
 import { FindMeButton } from './FindMeButton';
 import { HorizontalScroller } from './controls/HorizontalScroller';
 import { PolygonSearchButton } from './search/PolygonSearchButton';
@@ -22,6 +23,16 @@ import { RadiusSearchButton } from './search/RadiusSearchButton';
 import { MapSearchQueryParamsContext } from './mapSearchQueryParamsContext/MapSearchQueryParamsContext';
 import { RadiusSearch } from './search/RadiusSearch';
 import { PolygonSearch } from './search/PolygonSearch';
+import {
+  MapSearch_FindSitesAndPlacesQuery,
+  useMapSearch_FindSitesAndPlacesQuery,
+} from '../../../graphql/generated';
+import useDebouncedValue from '../../helpers/useDebouncedValue';
+import { getZoom, MAP_FLY_OPTIONS } from './mapOptions';
+import {
+  AutocompleteItem,
+  AutocompleteOption,
+} from './search/AutocompleteOption';
 
 const styles = {
   marginTop: {
@@ -62,7 +73,34 @@ const componentProps = {
   },
 };
 
+function formatDataForAutocomplete(
+  data: MapSearch_FindSitesAndPlacesQuery | undefined,
+) {
+  if (!data) return [];
+  return [
+    ...data.findSitesAndPlaces.data.sites.map(
+      ({ id, commonName: label, latdeg, longdeg, __typename }) => ({
+        id,
+        label,
+        latdeg,
+        longdeg,
+        type: __typename,
+      }),
+    ),
+    ...data.findSitesAndPlaces.data.places.map(
+      ({ id, name: label, latdeg, longdeg, __typename }) => ({
+        id,
+        label,
+        latdeg,
+        longdeg,
+        type: __typename,
+      }),
+    ),
+  ];
+}
+
 interface MapSearchProps {
+  mapRef: RefObject<Map | null>;
   activeTool?: ActiveToolEnum | null;
   setActiveTool?: React.Dispatch<React.SetStateAction<ActiveToolEnum | null>>;
   radius: number;
@@ -78,16 +116,26 @@ export function MapSearch({
   setRadius,
   isLocationVisible,
   setLocationVisible,
+  mapRef,
 }: MapSearchProps) {
   const { searchTerm, setQuery, clearQuery } = useContext(
     MapSearchQueryParamsContext,
   );
 
   const [searchValue, setSearchValue] = useState(searchTerm);
+  const searchValueDebounced = useDebouncedValue(searchValue);
+
   const theme = useTheme();
   const isLarge = useMediaQuery(theme.breakpoints.up('lg'));
   const isSmall = useMediaQuery(theme.breakpoints.down('md'));
 
+  const { data } = useMapSearch_FindSitesAndPlacesQuery({
+    variables: {
+      searchParam: searchValueDebounced || '',
+    },
+    skip: (searchValueDebounced?.length ?? 0) < 3,
+  });
+
   const clearSearch = () => {
     setSearchValue('');
     clearQuery();
@@ -97,9 +145,13 @@ export function MapSearch({
     setSearchValue(event.target.value);
   };
 
-  const submitSearchOnEnterPress = (e: React.KeyboardEvent) => {
-    if (e.key !== 'Enter' || searchValue === null) return;
-    setQuery({ search: searchValue }, 'replace');
+  const submitSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (searchValue) {
+      setQuery({ search: searchValue }, 'replace');
+      return;
+    }
   };
 
   const isPolygonTool = activeTool === ActiveToolEnum.polygonSearch;
@@ -127,6 +179,32 @@ export function MapSearch({
     }
   };
 
+  const onOptionSelect = (option: AutocompleteOption) => {
+    if (
+      !mapRef.current ||
+      !option.id ||
+      !option.latdeg ||
+      !option.longdeg ||
+      !option.type
+    )
+      return;
+
+    const lat = option.latdeg;
+    const lng = option.longdeg;
+
+    mapRef.current.flyTo(
+      { lat, lng },
+      getZoom(mapRef.current),
+      MAP_FLY_OPTIONS,
+    );
+
+    if (option?.type === 'Sites') {
+      setQuery({ site: option.id }, 'replace');
+    }
+  };
+
+  const autocompleteOptions = formatDataForAutocomplete(data);
+
   return (
     <Box component="div" sx={styles} className="map-search">
       <HorizontalScroller
@@ -136,25 +214,40 @@ export function MapSearch({
       >
         {isLarge ? (
           <Stack direction="row" className="map-search-row">
-            <Autocomplete
-              options={[]}
-              value={searchValue}
-              onKeyDown={submitSearchOnEnterPress}
-              freeSolo
-              renderInput={(params) => {
-                return (
-                  <SearchInput
-                    {...params}
-                    onChange={handleSearchChange}
-                    value={searchValue}
-                    sx={searchInputStyles}
-                    onClear={clearSearch}
-                  />
-                );
-              }}
-              className="search-autocomplete"
-              componentsProps={componentProps}
-            />
+            <form onSubmit={submitSearch}>
+              <Autocomplete
+                options={autocompleteOptions}
+                value={searchValue}
+                freeSolo
+                onChange={(_, option) => {
+                  if (typeof option === 'string' || option === null) return;
+                  onOptionSelect(option);
+                }}
+                renderInput={(params) => {
+                  return (
+                    <SearchInput
+                      {...params}
+                      onChange={handleSearchChange}
+                      value={searchValue}
+                      sx={searchInputStyles}
+                      onClear={clearSearch}
+                    />
+                  );
+                }}
+                className="search-autocomplete"
+                slotProps={componentProps}
+                renderOption={(props, option) => {
+                  const { key, ...optionProps } = props;
+                  return (
+                    <AutocompleteItem
+                      key={key}
+                      option={option}
+                      {...optionProps}
+                    />
+                  );
+                }}
+              />
+            </form>
             <FindMeButton
               isLocationVisible={isLocationVisible}
               setLocationVisible={setLocationVisible}
diff --git a/frontend/src/app/features/map/MapView.tsx b/frontend/src/app/features/map/MapView.tsx
index 0ac5dfa5..28c04384 100644
--- a/frontend/src/app/features/map/MapView.tsx
+++ b/frontend/src/app/features/map/MapView.tsx
@@ -106,6 +106,7 @@ function MapView() {
         />
       </MapContainer>
       <MapSearch
+        mapRef={mapRef}
         isLocationVisible={isLocationVisible}
         setLocationVisible={setLocationVisible}
         activeTool={activeTool}
diff --git a/frontend/src/app/features/map/search/AutocompleteOption.css b/frontend/src/app/features/map/search/AutocompleteOption.css
new file mode 100644
index 00000000..245a3e33
--- /dev/null
+++ b/frontend/src/app/features/map/search/AutocompleteOption.css
@@ -0,0 +1,43 @@
+.autocomplete-item {
+  height: 66px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  padding: 8px 16px;
+}
+
+.autocomplete-item:hover {
+  background-color: var(--surface-color-brand-gray-20);
+}
+
+.autocomplete-icon {
+  width: 18px;
+  height: 24px;
+  color: var(--typography-color-primary);
+}
+
+.autocomplete-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: flex-start;
+  gap: 4px;
+  overflow: hidden;
+}
+
+div.autocomplete-label {
+  font-size: 14px;
+  line-height: 21px;
+}
+
+div.autocomplete-value {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 27px;
+  width: 100%;
+  overflow: hidden;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/frontend/src/app/features/map/search/AutocompleteOption.tsx b/frontend/src/app/features/map/search/AutocompleteOption.tsx
new file mode 100644
index 00000000..8ccfade5
--- /dev/null
+++ b/frontend/src/app/features/map/search/AutocompleteOption.tsx
@@ -0,0 +1,45 @@
+import { FC } from 'react';
+import clsx from 'clsx';
+import './AutocompleteOption.css';
+
+import memoIcon from './assets/memo.png';
+import markerIcon from './assets/marker.png';
+
+export interface AutocompleteOption {
+  id: string;
+  label: string;
+  latdeg?: number | null;
+  longdeg?: number | null;
+  type?: 'Sites' | 'Place';
+}
+interface AutocompleteItemProps {
+  option: AutocompleteOption;
+  [key: string]: any;
+}
+export const AutocompleteItem: FC<AutocompleteItemProps> = ({
+  option: { label, type, id },
+  className,
+  ...rest
+}) => {
+  const optionTypeLabel =
+    type === 'Sites' ? (
+      <span>
+        Site ID #: <u>{id}</u>
+      </span>
+    ) : (
+      'City'
+    );
+  return (
+    <li className={clsx('autocomplete-item', className)} {...rest}>
+      <img
+        src={type === 'Sites' ? memoIcon : markerIcon}
+        alt=""
+        className="autocomplete-icon"
+      />
+      <div className="autocomplete-column">
+        <div className="autocomplete-label">{optionTypeLabel}</div>
+        <div className="autocomplete-value">{label}</div>
+      </div>
+    </li>
+  );
+};
diff --git a/frontend/src/app/features/map/search/RadiusSearchButton.tsx b/frontend/src/app/features/map/search/RadiusSearchButton.tsx
index a7ca6ddd..2c79706e 100644
--- a/frontend/src/app/features/map/search/RadiusSearchButton.tsx
+++ b/frontend/src/app/features/map/search/RadiusSearchButton.tsx
@@ -7,10 +7,7 @@ interface Props {
   onClick: () => void;
 }
 
-export function RadiusSearchButton({
-  isActive,
-  onClick,
-}: Readonly<Props>) {
+export function RadiusSearchButton({ isActive, onClick }: Readonly<Props>) {
   return (
     <Button
       variant="contained"
diff --git a/frontend/src/app/features/map/search/assets/marker.png b/frontend/src/app/features/map/search/assets/marker.png
new file mode 100644
index 00000000..711238e5
Binary files /dev/null and b/frontend/src/app/features/map/search/assets/marker.png differ
diff --git a/frontend/src/app/features/map/search/assets/memo.png b/frontend/src/app/features/map/search/assets/memo.png
new file mode 100644
index 00000000..8a2ea652
Binary files /dev/null and b/frontend/src/app/features/map/search/assets/memo.png differ
diff --git a/frontend/src/graphql/generated.ts b/frontend/src/graphql/generated.ts
index 9afe01ce..37bf6d2d 100644
--- a/frontend/src/graphql/generated.ts
+++ b/frontend/src/graphql/generated.ts
@@ -294,8 +294,8 @@ export type FetchSiteResponse = {
   timestamp?: Maybe<Scalars['String']['output']>;
 };
 
-export type FindSitesAndPlacesResponse = {
-  __typename?: 'FindSitesAndPlacesResponse';
+export type FindSitesAndPlaces = {
+  __typename?: 'FindSitesAndPlaces';
   httpStatusCode?: Maybe<Scalars['Int']['output']>;
   message?: Maybe<Scalars['String']['output']>;
   places: Array<Place>;
@@ -304,6 +304,15 @@ export type FindSitesAndPlacesResponse = {
   timestamp?: Maybe<Scalars['String']['output']>;
 };
 
+export type FindSitesAndPlacesResponse = {
+  __typename?: 'FindSitesAndPlacesResponse';
+  data: FindSitesAndPlaces;
+  httpStatusCode?: Maybe<Scalars['Int']['output']>;
+  message?: Maybe<Scalars['String']['output']>;
+  success?: Maybe<Scalars['Boolean']['output']>;
+  timestamp?: Maybe<Scalars['String']['output']>;
+};
+
 export type Folio = {
   __typename?: 'Folio';
   description: Scalars['String']['output'];
@@ -1440,6 +1449,13 @@ export type MapSearch_AddCartItemMutationVariables = Exact<{
 
 export type MapSearch_AddCartItemMutation = { __typename?: 'Mutation', addCartItem: { __typename?: 'CartResponse', success?: boolean | null } };
 
+export type MapSearch_FindSitesAndPlacesQueryVariables = Exact<{
+  searchParam: Scalars['String']['input'];
+}>;
+
+
+export type MapSearch_FindSitesAndPlacesQuery = { __typename?: 'Query', findSitesAndPlaces: { __typename?: 'FindSitesAndPlacesResponse', data: { __typename?: 'FindSitesAndPlaces', sites: Array<{ __typename?: 'Sites', id: string, commonName: string, latdeg?: number | null, longdeg?: number | null }>, places: Array<{ __typename?: 'Place', id: string, name: string, latdeg: number, longdeg: number }> } } };
+
 
 export const Folio_GetFolioItemsForUserDocument = gql`
     query Folio_getFolioItemsForUser {
@@ -1729,4 +1745,57 @@ export function useMapSearch_AddCartItemMutation(baseOptions?: Apollo.MutationHo
       }
 export type MapSearch_AddCartItemMutationHookResult = ReturnType<typeof useMapSearch_AddCartItemMutation>;
 export type MapSearch_AddCartItemMutationResult = Apollo.MutationResult<MapSearch_AddCartItemMutation>;
-export type MapSearch_AddCartItemMutationOptions = Apollo.BaseMutationOptions<MapSearch_AddCartItemMutation, MapSearch_AddCartItemMutationVariables>;
\ No newline at end of file
+export type MapSearch_AddCartItemMutationOptions = Apollo.BaseMutationOptions<MapSearch_AddCartItemMutation, MapSearch_AddCartItemMutationVariables>;
+export const MapSearch_FindSitesAndPlacesDocument = gql`
+    query MapSearch_findSitesAndPlaces($searchParam: String!) {
+  findSitesAndPlaces(searchParam: $searchParam) {
+    data {
+      sites {
+        id
+        commonName
+        latdeg
+        longdeg
+      }
+      places {
+        id
+        name
+        latdeg
+        longdeg
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMapSearch_FindSitesAndPlacesQuery__
+ *
+ * To run a query within a React component, call `useMapSearch_FindSitesAndPlacesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMapSearch_FindSitesAndPlacesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMapSearch_FindSitesAndPlacesQuery({
+ *   variables: {
+ *      searchParam: // value for 'searchParam'
+ *   },
+ * });
+ */
+export function useMapSearch_FindSitesAndPlacesQuery(baseOptions: Apollo.QueryHookOptions<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables> & ({ variables: MapSearch_FindSitesAndPlacesQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables>(MapSearch_FindSitesAndPlacesDocument, options);
+      }
+export function useMapSearch_FindSitesAndPlacesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables>(MapSearch_FindSitesAndPlacesDocument, options);
+        }
+export function useMapSearch_FindSitesAndPlacesSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables>) {
+          const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables>(MapSearch_FindSitesAndPlacesDocument, options);
+        }
+export type MapSearch_FindSitesAndPlacesQueryHookResult = ReturnType<typeof useMapSearch_FindSitesAndPlacesQuery>;
+export type MapSearch_FindSitesAndPlacesLazyQueryHookResult = ReturnType<typeof useMapSearch_FindSitesAndPlacesLazyQuery>;
+export type MapSearch_FindSitesAndPlacesSuspenseQueryHookResult = ReturnType<typeof useMapSearch_FindSitesAndPlacesSuspenseQuery>;
+export type MapSearch_FindSitesAndPlacesQueryResult = Apollo.QueryResult<MapSearch_FindSitesAndPlacesQuery, MapSearch_FindSitesAndPlacesQueryVariables>;
\ No newline at end of file