diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 394c6e76..3adfaf95 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -51,9 +51,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -825,49 +825,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
+      "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
+      "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz",
+      "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==",
+      "dependencies": {
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.7",
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/compiler-ssr": "3.3.7",
+        "@vue/reactivity-transform": "3.3.7",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.31",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
+      "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -876,60 +876,60 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
+      "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
       "dependencies": {
-        "@vue/shared": "3.3.4"
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz",
+      "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.7",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "magic-string": "^0.30.5"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz",
+      "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==",
       "dependencies": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz",
+      "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.3.7",
+        "@vue/shared": "3.3.7",
+        "csstype": "^3.1.2"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
+      "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.3.7",
+        "@vue/shared": "3.3.7"
       },
       "peerDependencies": {
-        "vue": "3.3.4"
+        "vue": "3.3.7"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
+      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.4.1",
@@ -2617,9 +2617,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -3034,9 +3034,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3870,15 +3870,23 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz",
+      "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/compiler-sfc": "3.3.7",
+        "@vue/runtime-dom": "3.3.7",
+        "@vue/server-renderer": "3.3.7",
+        "@vue/shared": "3.3.7"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-component-type-helpers": {
@@ -3934,9 +3942,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.3.14",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.14.tgz",
-      "integrity": "sha512-5kGnahj/cX5989bV9XM432k/BJ11fRdJ3CCdISjo1auCz+rLEeLJdjMeqyCJVd0FZsWcE1Z8799s9sLdLM3Deg==",
+      "version": "3.3.23",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.23.tgz",
+      "integrity": "sha512-EVEFvDyKr/HK2+hQJyhQSjIDULDaBi9vfgAAB0ekm+2Tvc8AkaDwb7VK44R2eilGFGpju6iN52FV7Uasj8SmIg==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -4160,9 +4168,9 @@
       "dev": true
     },
     "@babel/parser": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ=="
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
     },
     "@bcgov/bc-sans": {
       "version": "2.0.0",
@@ -4627,49 +4635,49 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
+      "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
       "requires": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
+      "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
       "requires": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz",
+      "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==",
+      "requires": {
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.7",
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/compiler-ssr": "3.3.7",
+        "@vue/reactivity-transform": "3.3.7",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.31",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
+      "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
       "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "@vue/devtools-api": {
@@ -4678,57 +4686,57 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
+      "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
       "requires": {
-        "@vue/shared": "3.3.4"
+        "@vue/shared": "3.3.7"
       }
     },
     "@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz",
+      "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==",
       "requires": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.0",
+        "@vue/compiler-core": "3.3.7",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "magic-string": "^0.30.5"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz",
+      "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==",
       "requires": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz",
+      "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==",
       "requires": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.3.7",
+        "@vue/shared": "3.3.7",
+        "csstype": "^3.1.2"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
+      "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
       "requires": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
+      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg=="
     },
     "@vue/test-utils": {
       "version": "2.4.1",
@@ -5985,9 +5993,9 @@
       }
     },
     "magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -6268,9 +6276,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -6744,15 +6752,15 @@
       }
     },
     "vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz",
+      "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==",
       "requires": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/compiler-sfc": "3.3.7",
+        "@vue/runtime-dom": "3.3.7",
+        "@vue/server-renderer": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "vue-component-type-helpers": {
@@ -6791,9 +6799,9 @@
       }
     },
     "vuetify": {
-      "version": "3.3.14",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.14.tgz",
-      "integrity": "sha512-5kGnahj/cX5989bV9XM432k/BJ11fRdJ3CCdISjo1auCz+rLEeLJdjMeqyCJVd0FZsWcE1Z8799s9sLdLM3Deg==",
+      "version": "3.3.23",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.23.tgz",
+      "integrity": "sha512-EVEFvDyKr/HK2+hQJyhQSjIDULDaBi9vfgAAB0ekm+2Tvc8AkaDwb7VK44R2eilGFGpju6iN52FV7Uasj8SmIg==",
       "requires": {}
     },
     "watchpack": {
diff --git a/frontend/src/components/notifications/NotificationsTab.vue b/frontend/src/components/notifications/NotificationsTab.vue
index ced3175d..bc1f3110 100644
--- a/frontend/src/components/notifications/NotificationsTab.vue
+++ b/frontend/src/components/notifications/NotificationsTab.vue
@@ -2,76 +2,85 @@
   <v-container class="pa-3">
     <v-row>
       <v-col cols="6" class="border-right pa-0">
-        <v-data-table :headers="headers" :items="notifications" item-key="notificationId" hover single-select
-          height="500px" density="compact">
-          <template v-slot:top>
-            <div class="slot-top">
-              <div class="flex-container">
-                <!--div class="flex-item">
-                  <v-icon class="icon">mdi-email-plus-outline</v-icon><span class="icon-text">New
-                  Message</span>
-                </div-->
-                <div @click="updateCheckedReadUnread(false)" class="flex-item">
-                  <v-icon class="icon">mdi-email-outline</v-icon><span class="icon-text">Mark
-                    Unread</span>
+        <v-data-table-virtual v-model="rowCheckedIndexes" :headers="headers" :items="notifications"
+          item-key="notificationId" item-value="notificationId" show-select hover fixed-header density="compact"
+          class="data-table">
+          <!-- TOP -->
+          <template #top>
+            <v-row>
+              <v-col class="mt-1">
+                <div class="flex-item">
+                  <v-btn @click="updateBodyCheckboxesReadUnread(false)" class="btn-style">
+                    <v-icon class="icon" left>mdi-email</v-icon>
+                    <span class="btn-label">Mark Unread</span>
+                  </v-btn>
+                  <v-btn @click="updateBodyCheckboxesReadUnread(true)" class="btn-style">
+                    <v-icon class="icon" left>mdi-email-open</v-icon>
+                    <span class="btn-label">Mark read</span>
+                  </v-btn>
                 </div>
-                <div @click="updateCheckedReadUnread(true)" class="flex-item">
-                  <v-icon class="icon">mdi-email-open-outline</v-icon><span class="icon-text">Mark
-                    Read</span>
-                </div>
-              </div>
-            </div>
+              </v-col>
+            </v-row>
           </template>
+          <!-- HEADERS -->
           <template #headers="{ columns, isSorted, getSortIcon, toggleSort }">
             <tr>
-              <th v-for="column  in  columns" :key="column.key" @click="toggleSort(column)"
-                :style="{ width: column.width }">
-                <div v-if="column.title === null">
-                  <v-checkbox v-model="checkBoxToggleAllState" @click="toggleAllCheckBoxHandler" hide-details
-                    density="compact"></v-checkbox>
+              <th v-for="column in columns" :key="column.key" :style="{ width: column.width }"
+                @click="toggleSort(column)">
+                <div v-if="column.title === ''">
+                  <v-checkbox v-model="headerCheckboxState"
+                    :indeterminate="bodyCheckboxesSelected.length > 0 && bodyCheckboxesSelected.includes(true)"
+                    hide-details density="compact" @click.stop="headerCheckboxClickHandler" />
                 </div>
-                <div v-else>
+                <div v-else class="headers">
                   {{ column.title }}
-                  <v-icon v-if="isSorted(column)">{{ getSortIcon(column) }}</v-icon>
+                  <v-icon v-if="isSorted(column)" size="20" class="pa-0, ma-0">{{ getSortIcon(column) }}</v-icon>
                 </div>
               </th>
             </tr>
           </template>
+          <!-- BODY -->
           <template #item="{ item, index }">
-            <tr @click="rowClickHandler(item, index)"
-              :class="{ 'unread-notification': !item.selectable.isRead, 'highlighted': index === rowClickedIndex }">
-              <td :class="{ 'highlighted': index === rowClickedIndex }">
-                <v-checkbox @click="checkBoxClickHandler" v-model="checkBoxListState[index]" hide-details
-                  density="compact"></v-checkbox>
+            <tr :class="{ 'unread-notification': !item.isRead, 'highlighted-row': index === rowClickedIndex }"
+              item-key="notificationId" @click="rowClickHandler(item, index)">
+              <td :class="{ 'highlighted-row': index === rowClickedIndex }">
+                <v-checkbox v-model="bodyCheckboxesSelected[index]" hide-details density="compact"
+                  @click.stop="bodyCheckboxesClickHandler" />
               </td>
-              <td :class="{ 'highlighted': index === rowClickedIndex }">{{ (item.selectable.isRead) ? 'Read' : 'Unread' }}
+              <td :class="{ 'highlighted-row': index === rowClickedIndex }">
+                <div class="item">{{ (item.isRead) ?
+                  'Read' :
+                  'Unread' }}</div>
+              </td>
+              <td :class="{ 'highlighted-row': index === rowClickedIndex }">
+                <div class="item">{{ item.subject }}</div>
+              </td>
+              <td :class="{ 'highlighted-row': index === rowClickedIndex }">
+                <div class="item">{{ item.dateReceived }}</div>
               </td>
-              <td :class="{ 'highlighted': index === rowClickedIndex }">{{ item.selectable.subject }}</td>
-              <td :class="{ 'highlighted': index === rowClickedIndex }">{{ item.selectable.dateReceived }}</td>
             </tr>
           </template>
-          <template v-slot:bottom></template>
-        </v-data-table>
+        </v-data-table-virtual>
       </v-col>
       <v-col cols="6">
+        <!-- NOTIFICATION DETAILS -->
         <v-card v-if="notificationSelected" variant="flat">
-          <v-card-title class="card-title d-flex align-start flex-wrap">
+          <v-card-title>
             <div class="d-flex align-center justify-space-between w-100">
               <div class="d-flex align-center">
                 <span class="font-bold">From:</span>&nbsp;Operating Funding Model Program
               </div>
-              <div v-if="notificationSelected.selectable.isRead" @click="updateNotificationUnread(notificationSelected)"
-                class="d-flex align-center">
-                <v-icon class="icon ml-3">mdi-email-outline</v-icon>
-                <span class="icon-text">Mark Unread</span>
-              </div>
+              <v-btn v-if="notificationSelected.isRead" class="btn-style" @click="updateNotificationUnread">
+                <v-icon class="icon" left>mdi-email-open</v-icon>
+                <span class="btn-label">Mark Unread</span>
+              </v-btn>
             </div>
-            <div class="mt-2 w-100">
-              {{ notificationSelected.selectable.subject }}
+            <div class="w-100">
+              {{ notificationSelected.subject }}
             </div>
           </v-card-title>
           <hr>
-          <v-card-text v-html="notificationSelected.selectable.notificationContent"></v-card-text>
+          <v-card-text v-html="notificationSelected.notificationContent" />
         </v-card>
       </v-col>
     </v-row>
@@ -86,16 +95,35 @@ import { useNotificationsStore } from '@/stores/notifications'
 export default {
   data() {
     return {
-      checkBoxToggleAllState: false, // on/off state for toggle all checkbox
-      checkBoxListState: [], // on/off state for checkboxes in list
+      headerCheckboxState: false,
+      bodyCheckboxesSelected: [],
       rowClickedIndex: null,
+      checkBoxToggleAllState: false, // on/off state for toggle all checkbox
+      rowCheckedIndexes: [], // on/off state for checkboxes in list
       checkBoxClickedState: false, // on/off state for a checkbox clicked
       notificationSelected: null,
       headers: [
-        { title: null, align: 'start', key: 'name', sortable: false, width: '8%' },
-        { title: 'Read/Unread', align: 'start', key: 'isRead', sortable: true, width: '20%' },
-        { title: 'Subject', align: 'start', key: 'subject', sortable: false, width: '50%' },
-        { title: 'Date Received', align: 'start', key: 'dateReceived', sortable: true, width: '22%' },
+        {
+          title: 'Read/Unread',
+          align: 'start',
+          key: 'isRead',
+          sortable: true,
+          width: '22%',
+        },
+        {
+          title: 'Subject',
+          align: 'start',
+          key: 'subject',
+          sortable: true,
+          width: '50%',
+        },
+        {
+          title: 'Date Received',
+          align: 'start',
+          key: 'dateReceived',
+          sortable: true,
+          width: '23%',
+        },
       ],
     }
   },
@@ -104,70 +132,79 @@ export default {
     ...mapState(useNotificationsStore, ['notifications', 'unreadNotificationCount']),
   },
   async created() {
-    this.getNotifications(this.userInfo.contactId)
-    this.initCheckBoxState()
+    this.getNotifications(this.userInfo.contactId).then(() => {
+      this.initAllCheckboxState()
+    })
   },
   methods: {
     ...mapActions(useNotificationsStore, ['getNotifications', 'updateNotification']),
     /**
-     * Initializes the toggle all checkbox and checkbox list state.
-     */
-    initCheckBoxState() {
-      this.checkBoxListState = Array(this.notifications.length).fill(false)
-      this.checkBoxToggleAllState = false
-    },
-    /**
-     * Toggles all the notifications checked or unchecked.
+     * Initializes the header and body/item checkboxes to false.
      */
-    toggleAllCheckBoxHandler() {
-      this.checkBoxListState.fill(!this.checkBoxToggleAllState)
+    initAllCheckboxState() {
+      this.headerCheckboxState = false
+      this.bodyCheckboxesSelected = new Array(this.notifications.length).fill(false)
     },
     /**
-     * Flags a list item has been checked.
+     * Handles the header checkbox click event. When the header checkbox is clicked all body/item checkboxes are selected.
      */
-    checkBoxClickHandler() {
-      this.checkBoxClickedState = true
+    headerCheckboxClickHandler() {
+      this.bodyCheckboxesSelected.fill(!this.headerCheckboxState)
     },
     /**
-     * Handles the row click event. When a row is clicked the notification is displayed and marked as read.
+     *  This must exist to avoid mutation of the array
      */
-    rowClickHandler(item, index) {
-      if (!this.checkBoxClickedState) {
-        this.notificationSelected = item
-        this.rowClickedIndex = index // Used for row select highlighting in template slot item
-        this.notifications[index].isRead = true
-        this.updateNotification(this.notifications[index], true)
-      } else {
-        this.checkBoxClickedState = false
-      }
-    },
+    bodyCheckboxesClickHandler() { },
     /**
-     * Updates all checked notifications to read or unread.
+     * Update the body/item checkboxes to read or unread.
      */
-    updateCheckedReadUnread(isRead) {
-      this.checkBoxListState.forEach((item, index) => {
-        if (item) {
+    updateBodyCheckboxesReadUnread(isRead) {
+      this.bodyCheckboxesSelected.forEach((item, index) => {
+        if (item) { // jstorey can remove?
           this.notifications[index].isRead = isRead
           this.updateNotification(this.notifications[index], isRead)
         }
       })
-      this.initCheckBoxState()
+      this.initAllCheckboxState()
     },
     /**
-     * Updates a notification to unread.
+     * Handles the row click event. When a row is clicked the notification in context is displayed and marked as read.
      */
-    updateNotificationUnread(item) {
-      item.selectable.isRead = false
-      this.updateNotification(item.selectable, false)
+    rowClickHandler: function (item, index) {
+      this.rowClickedIndex = index // Used for row select highlighting in template slot item
+      this.notificationSelected = this.notifications.find(notification => notification.notificationId === item.notificationId)
+      this.notificationSelected.isRead = true
+      this.updateNotification(this.notificationSelected)
+    },
+    /**
+     * Updates the currnetly clicked/selected notification to unread.
+     */
+    updateNotificationUnread() {
+      this.notificationSelected.isRead = false
+      this.updateNotification(this.notificationSelected)
     },
   }
 };
 </script>
   
 <style scoped>
-.flex-container {
-  display: flex;
-  justify-content: space-evenly;
+th {
+  padding: 0px 0px 0px 4px !important;
+}
+
+td {
+  padding: 0px 3px 0px 4px !important;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: #6699cc;
+  background-image: linear-gradient(to right, #6699cc, #6699cc, #6699cc);
+}
+
+.data-table {
+  height: 524px;
 }
 
 .flex-item {
@@ -175,35 +212,52 @@ export default {
   align-items: left;
 }
 
-.icon {
-  font-size: 24px;
-  padding-right: 2px;
+.btn-style {
+  padding: 0px 6px !important;
+  margin: 0px;
+  font-size: 14px;
+  background-color: #ffffff;
   color: #6699cc;
-  cursor: pointer;
+  font-weight: bold;
+  text-transform: none;
+  max-height: 28px;
+  border: none;
+  box-shadow: none;
 }
 
-.icon:hover {
-  color: #6699cc;
+.btn-style:hover {
+  background-color: #ffffff;
 }
 
-.icon-text {
-  color: #6699cc;
-  cursor: pointer;
-  transition: color 0.3s ease;
+.btn-style:hover .btn-label {
+  text-decoration: underline;
 }
 
-.icon-text:hover {
-  color: #6699cc;
+.item {
+  padding-left: 4px;
 }
 
-.font-bold {
-  font-weight: bold;
+.btn-style .v-btn__content .icon {
+  padding: 0px !important;
+  margin: 0px;
+  font-size: 1.5em;
+}
+
+.headers {
+  padding-left: 4px !important;
+  font-weight: bold !important;
+  color: #878787 !important;
+}
+
+.headers:hover {
+  padding-left: 4px !important;
+  font-weight: bold !important;
+  color: black !important;
+  cursor: pointer !important;
 }
 
-.slot-top {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+.font-bold {
+  font-weight: bold;
 }
 
 .unread-notification {
@@ -215,19 +269,7 @@ export default {
   border-right: 2px solid #6699cc;
 }
 
-hr {
-  border: 0;
-  height: 1px;
-  background: #6699cc;
-  background-image: linear-gradient(to right, #6699cc, #6699cc, #6699cc);
-}
-
-.card-title {
-  font-size: medium;
-  padding-left: 0px !important;
-}
-
-.highlighted {
+.highlighted-row {
   background-color: #D4EAFF !important;
 }
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index c2862662..0f7cc779 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -4,7 +4,7 @@ import '@/assets/css/main.css'
 import '@/assets/css/reset.css'
 
 import App from './App.vue'
-import { VDataTable } from 'vuetify/lib/labs/components.mjs'
+import { VDataTableVirtual } from 'vuetify/lib/labs/components.mjs'
 import { createApp } from 'vue'
 import { createMetaManager } from 'vue-meta'
 import { createPinia } from 'pinia'
@@ -16,7 +16,7 @@ const app = createApp(App)
 
 const pinia = createPinia()
 
-app.component('VDataTable', VDataTable)
+app.component('VDataTableVirtual', VDataTableVirtual)
 app.provide('$moment', moment)
 app
   .use(router)
diff --git a/frontend/src/stores/notifications.js b/frontend/src/stores/notifications.js
index e93d6dde..cd779bf7 100644
--- a/frontend/src/stores/notifications.js
+++ b/frontend/src/stores/notifications.js
@@ -28,7 +28,7 @@ export const useNotificationsStore = defineStore('notifications', {
         this.messages = []
       }
     },
-    async updateNotification(notification, isRead) {
+    async updateNotification(notification) {
       if (!localStorage.getItem('jwtToken')) {
         console.log('unable to update Notification data because you are not logged in')
         throw 'unable to update Notification data because you are not logged in'
@@ -36,7 +36,7 @@ export const useNotificationsStore = defineStore('notifications', {
       if (notification.notificationId) {
         try {
           const payload = {
-            lastopenedtime: isRead ? new Date().toISOString() : null,
+            lastopenedtime: notification.isRead ? new Date().toISOString() : null,
           }
           await ApiService.apiAxios.put(ApiRoutes.NOTICE + '/' + notification.notificationId, payload)
         } catch (error) {
diff --git a/frontend/src/views/MessagingView.vue b/frontend/src/views/MessagingView.vue
index be108e17..0665c7b2 100644
--- a/frontend/src/views/MessagingView.vue
+++ b/frontend/src/views/MessagingView.vue
@@ -2,7 +2,7 @@
   <v-card class="messaging-card" variant="flat">
     <v-tabs v-model="tab" bg-color="none" class="messaging-tabs" density="compact">
       <div v-if="showUnreadNotificationCount">
-        <v-badge color="red" :content="unreadNotificationCount" offset-x="8" offset-y="9">
+        <v-badge color="red" :content="unreadNotificationCount" offset-x="9" offset-y="9">
           <v-tab class="messaging-tab" selected-class="messaging-tab-selected" value="one">Notifications</v-tab>
         </v-badge>
       </div>
@@ -53,8 +53,8 @@ export default {
 .messaging-tab {
   border: 2px solid #6699cc;
   border-bottom: 0px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: 10px !important;
+  border-top-right-radius: 10px !important;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   color: #336699;
@@ -87,4 +87,8 @@ export default {
 .messaging-window-item {
   padding: 0px;
 }
+
+:deep(.v-badge__badge) {
+  font-size: 0.75rem !important;
+}
 </style>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a56db71f..1c2e8abb 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7,10 +7,10 @@
   resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
-  version "7.22.10"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz"
-  integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
+"@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
 "@bcgov/bc-sans@^2.0.0":
   version "2.0.0"
@@ -269,100 +269,100 @@
     loupe "^2.3.6"
     pretty-format "^29.5.0"
 
-"@vue/compiler-core@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz"
-  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
+"@vue/compiler-core@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz"
+  integrity sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==
   dependencies:
-    "@babel/parser" "^7.21.3"
-    "@vue/shared" "3.3.4"
+    "@babel/parser" "^7.23.0"
+    "@vue/shared" "3.3.7"
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-dom@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz"
-  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
-  dependencies:
-    "@vue/compiler-core" "3.3.4"
-    "@vue/shared" "3.3.4"
-
-"@vue/compiler-sfc@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz"
-  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
-  dependencies:
-    "@babel/parser" "^7.20.15"
-    "@vue/compiler-core" "3.3.4"
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/compiler-ssr" "3.3.4"
-    "@vue/reactivity-transform" "3.3.4"
-    "@vue/shared" "3.3.4"
+"@vue/compiler-dom@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz"
+  integrity sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==
+  dependencies:
+    "@vue/compiler-core" "3.3.7"
+    "@vue/shared" "3.3.7"
+
+"@vue/compiler-sfc@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz"
+  integrity sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.7"
+    "@vue/compiler-dom" "3.3.7"
+    "@vue/compiler-ssr" "3.3.7"
+    "@vue/reactivity-transform" "3.3.7"
+    "@vue/shared" "3.3.7"
     estree-walker "^2.0.2"
-    magic-string "^0.30.0"
-    postcss "^8.1.10"
+    magic-string "^0.30.5"
+    postcss "^8.4.31"
     source-map-js "^1.0.2"
 
-"@vue/compiler-ssr@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz"
-  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
+"@vue/compiler-ssr@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz"
+  integrity sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==
   dependencies:
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/compiler-dom" "3.3.7"
+    "@vue/shared" "3.3.7"
 
 "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz"
   integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
 
-"@vue/reactivity-transform@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz"
-  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
+"@vue/reactivity-transform@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz"
+  integrity sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==
   dependencies:
-    "@babel/parser" "^7.20.15"
-    "@vue/compiler-core" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.7"
+    "@vue/shared" "3.3.7"
     estree-walker "^2.0.2"
-    magic-string "^0.30.0"
+    magic-string "^0.30.5"
 
-"@vue/reactivity@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz"
-  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+"@vue/reactivity@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz"
+  integrity sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==
   dependencies:
-    "@vue/shared" "3.3.4"
+    "@vue/shared" "3.3.7"
 
-"@vue/runtime-core@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz"
-  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
+"@vue/runtime-core@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz"
+  integrity sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==
   dependencies:
-    "@vue/reactivity" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/reactivity" "3.3.7"
+    "@vue/shared" "3.3.7"
 
-"@vue/runtime-dom@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz"
-  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
+"@vue/runtime-dom@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz"
+  integrity sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==
   dependencies:
-    "@vue/runtime-core" "3.3.4"
-    "@vue/shared" "3.3.4"
-    csstype "^3.1.1"
+    "@vue/runtime-core" "3.3.7"
+    "@vue/shared" "3.3.7"
+    csstype "^3.1.2"
 
-"@vue/server-renderer@^3.0.1", "@vue/server-renderer@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz"
-  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
+"@vue/server-renderer@^3.0.1", "@vue/server-renderer@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz"
+  integrity sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==
   dependencies:
-    "@vue/compiler-ssr" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/compiler-ssr" "3.3.7"
+    "@vue/shared" "3.3.7"
 
-"@vue/shared@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz"
-  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+"@vue/shared@3.3.7":
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz"
+  integrity sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==
 
 "@vue/test-utils@^2.4.1":
   version "2.4.1"
@@ -803,7 +803,7 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^3.1.1:
+csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -1408,10 +1408,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-magic-string@^0.30.0, magic-string@^0.30.1:
-  version "0.30.3"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz"
-  integrity sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==
+magic-string@^0.30.1, magic-string@^0.30.5:
+  version "0.30.5"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
@@ -1652,10 +1652,10 @@ postcss-selector-parser@^6.0.13:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.1.10, postcss@^8.4.27:
-  version "8.4.28"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz"
-  integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
+postcss@^8.4.27, postcss@^8.4.31:
+  version "8.4.31"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -2094,21 +2094,21 @@ vue-router@^4.2.4:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
-"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.1, vue@^3.2.0, vue@^3.2.25, vue@^3.3.4, vue@3.3.4:
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz"
-  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
+"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.1, vue@^3.2.0, vue@^3.2.25, vue@^3.3.4, vue@3.3.7:
+  version "3.3.7"
+  resolved "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz"
+  integrity sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==
   dependencies:
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/compiler-sfc" "3.3.4"
-    "@vue/runtime-dom" "3.3.4"
-    "@vue/server-renderer" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/compiler-dom" "3.3.7"
+    "@vue/compiler-sfc" "3.3.7"
+    "@vue/runtime-dom" "3.3.7"
+    "@vue/server-renderer" "3.3.7"
+    "@vue/shared" "3.3.7"
 
 vuetify@^3.0.0-beta.4, vuetify@^3.3.14:
-  version "3.3.14"
-  resolved "https://registry.npmjs.org/vuetify/-/vuetify-3.3.14.tgz"
-  integrity sha512-5kGnahj/cX5989bV9XM432k/BJ11fRdJ3CCdISjo1auCz+rLEeLJdjMeqyCJVd0FZsWcE1Z8799s9sLdLM3Deg==
+  version "3.3.23"
+  resolved "https://registry.npmjs.org/vuetify/-/vuetify-3.3.23.tgz"
+  integrity sha512-EVEFvDyKr/HK2+hQJyhQSjIDULDaBi9vfgAAB0ekm+2Tvc8AkaDwb7VK44R2eilGFGpju6iN52FV7Uasj8SmIg==
 
 watchpack@^2.4.0:
   version "2.4.0"