diff --git a/client/package-lock.json b/client/package-lock.json
index 9fbc4057..14a9ac9b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -83,7 +83,6 @@
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -179,7 +178,6 @@
     },
     "node_modules/@babel/compat-data": {
       "version": "7.23.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -187,7 +185,6 @@
     },
     "node_modules/@babel/core": {
       "version": "7.23.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -216,7 +213,6 @@
     },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.1",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -257,7 +253,6 @@
     },
     "node_modules/@babel/generator": {
       "version": "7.23.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.23.0",
@@ -292,7 +287,6 @@
     },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.22.15",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.9",
@@ -307,7 +301,6 @@
     },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
       "version": "6.3.1",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -416,7 +409,6 @@
     },
     "node_modules/@babel/helper-hoist-variables": {
       "version": "7.22.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.22.5"
@@ -447,7 +439,6 @@
     },
     "node_modules/@babel/helper-module-transforms": {
       "version": "7.23.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -513,7 +504,6 @@
     },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.22.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.22.5"
@@ -558,7 +548,6 @@
     },
     "node_modules/@babel/helper-validator-option": {
       "version": "7.22.15",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -579,7 +568,6 @@
     },
     "node_modules/@babel/helpers": {
       "version": "7.23.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.22.15",
@@ -2144,7 +2132,6 @@
     },
     "node_modules/@babel/traverse": {
       "version": "7.23.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.22.13",
@@ -2926,7 +2913,6 @@
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
@@ -2939,7 +2925,6 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -2947,7 +2932,6 @@
     },
     "node_modules/@jridgewell/set-array": {
       "version": "1.1.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -2964,12 +2948,10 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -5127,6 +5109,53 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/babel-plugin-named-asset-import": {
       "version": "0.3.8",
       "dev": true,
@@ -5478,7 +5507,6 @@
     },
     "node_modules/browserslist": {
       "version": "4.22.1",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5620,7 +5648,6 @@
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001561",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6040,13 +6067,12 @@
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
@@ -7134,7 +7160,6 @@
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.578",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -7355,7 +7380,6 @@
     },
     "node_modules/escalade": {
       "version": "3.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -8130,9 +8154,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "dev": true,
       "dependencies": {
         "accepts": "~1.3.8",
@@ -8140,7 +8164,7 @@
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -8754,7 +8778,6 @@
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -8898,7 +8921,6 @@
     },
     "node_modules/globals": {
       "version": "11.12.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -11069,7 +11091,6 @@
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -11108,7 +11129,6 @@
     },
     "node_modules/json5": {
       "version": "2.2.3",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -11846,7 +11866,6 @@
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
@@ -12232,7 +12251,6 @@
     },
     "node_modules/node-releases": {
       "version": "2.0.13",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/normalize-path": {
@@ -12682,7 +12700,6 @@
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -18350,6 +18367,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "dev": true,
@@ -18483,7 +18514,6 @@
     },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -19434,7 +19464,6 @@
     },
     "node_modules/yallist": {
       "version": "3.1.1",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/yaml": {
@@ -19493,7 +19522,6 @@
     },
     "@ampproject/remapping": {
       "version": "2.2.1",
-      "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -19553,12 +19581,10 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.23.2",
-      "dev": true
+      "version": "7.23.2"
     },
     "@babel/core": {
       "version": "7.23.2",
-      "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.22.13",
@@ -19578,8 +19604,7 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "dev": true
+          "version": "6.3.1"
         }
       }
     },
@@ -19604,7 +19629,6 @@
     },
     "@babel/generator": {
       "version": "7.23.0",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.23.0",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -19627,7 +19651,6 @@
     },
     "@babel/helper-compilation-targets": {
       "version": "7.22.15",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.22.9",
         "@babel/helper-validator-option": "^7.22.15",
@@ -19637,8 +19660,7 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "dev": true
+          "version": "6.3.1"
         }
       }
     },
@@ -19710,7 +19732,6 @@
     },
     "@babel/helper-hoist-variables": {
       "version": "7.22.5",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.22.5"
       }
@@ -19729,7 +19750,6 @@
     },
     "@babel/helper-module-transforms": {
       "version": "7.23.0",
-      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
@@ -19766,7 +19786,6 @@
     },
     "@babel/helper-simple-access": {
       "version": "7.22.5",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.22.5"
       }
@@ -19790,8 +19809,7 @@
       "version": "7.22.20"
     },
     "@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "dev": true
+      "version": "7.22.15"
     },
     "@babel/helper-wrap-function": {
       "version": "7.22.20",
@@ -19804,7 +19822,6 @@
     },
     "@babel/helpers": {
       "version": "7.23.2",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.22.15",
         "@babel/traverse": "^7.23.2",
@@ -20653,7 +20670,8 @@
           "version": "7.21.0-placeholder-for-preset-env.2",
           "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
           "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "semver": {
           "version": "6.3.1",
@@ -20713,7 +20731,6 @@
     },
     "@babel/traverse": {
       "version": "7.23.2",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.22.13",
         "@babel/generator": "^7.23.0",
@@ -20843,11 +20860,13 @@
     },
     "@csstools/postcss-unset-value": {
       "version": "1.0.2",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@csstools/selector-specificity": {
       "version": "2.2.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@emotion/babel-plugin": {
       "version": "11.11.0",
@@ -20958,7 +20977,8 @@
       "version": "0.8.1"
     },
     "@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.0.1"
+      "version": "1.0.1",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.1"
@@ -21179,7 +21199,6 @@
     },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
-      "dev": true,
       "requires": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -21187,12 +21206,10 @@
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.1.1",
-      "dev": true
+      "version": "3.1.1"
     },
     "@jridgewell/set-array": {
-      "version": "1.1.2",
-      "dev": true
+      "version": "1.1.2"
     },
     "@jridgewell/source-map": {
       "version": "0.3.5",
@@ -21203,12 +21220,10 @@
       }
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "dev": true
+      "version": "1.4.15"
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.20",
-      "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -21702,7 +21717,8 @@
     },
     "@testing-library/user-event": {
       "version": "14.5.1",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@tootallnate/once": {
       "version": "1.1.2",
@@ -22311,10 +22327,12 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
       "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
-      "version": "5.3.2"
+      "version": "5.3.2",
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -22636,7 +22654,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -22676,9 +22695,50 @@
         "@types/babel__traverse": "^7.0.6"
       }
     },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "resolve": {
+          "version": "1.22.8",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+          "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "is-core-module": "^2.13.0",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-named-asset-import": {
       "version": "0.3.8",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.4.6",
@@ -22936,7 +22996,6 @@
     },
     "browserslist": {
       "version": "4.22.1",
-      "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30001541",
         "electron-to-chromium": "^1.4.535",
@@ -23014,8 +23073,7 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001561",
-      "dev": true
+      "version": "1.0.30001561"
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -23283,13 +23341,12 @@
       "dev": true
     },
     "convert-source-map": {
-      "version": "2.0.0",
-      "dev": true
+      "version": "2.0.0"
     },
     "cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "dev": true
     },
     "cookie-signature": {
@@ -23368,7 +23425,8 @@
     },
     "css-declaration-sorter": {
       "version": "6.4.1",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -23436,7 +23494,8 @@
     },
     "css-prefers-color-scheme": {
       "version": "6.0.3",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-select": {
       "version": "4.3.0",
@@ -23536,7 +23595,8 @@
     },
     "cssnano-utils": {
       "version": "3.1.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -23979,8 +24039,7 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.578",
-      "dev": true
+      "version": "1.4.578"
     },
     "emoji-regex": {
       "version": "10.3.0"
@@ -24151,8 +24210,7 @@
       }
     },
     "escalade": {
-      "version": "3.1.1",
-      "dev": true
+      "version": "3.1.1"
     },
     "escape-html": {
       "version": "1.0.3"
@@ -24290,7 +24348,8 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
       "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-config-react-app": {
       "version": "7.0.1",
@@ -24485,7 +24544,8 @@
     },
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-testing-library": {
       "version": "5.11.1",
@@ -24630,9 +24690,9 @@
       "dev": true
     },
     "express": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
@@ -24640,7 +24700,7 @@
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -24923,7 +24983,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "chalk": {
           "version": "4.1.2",
@@ -25052,8 +25113,7 @@
       "version": "1.2.3"
     },
     "gensync": {
-      "version": "1.0.0-beta.2",
-      "dev": true
+      "version": "1.0.0-beta.2"
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -25143,8 +25203,7 @@
       }
     },
     "globals": {
-      "version": "11.12.0",
-      "dev": true
+      "version": "11.12.0"
     },
     "globalthis": {
       "version": "1.0.3",
@@ -25435,7 +25494,8 @@
     },
     "icss-utils": {
       "version": "5.1.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "idb": {
       "version": "7.1.1",
@@ -26400,7 +26460,8 @@
     },
     "jest-pnp-resolver": {
       "version": "1.2.3",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -26625,8 +26686,7 @@
       }
     },
     "jsesc": {
-      "version": "2.5.2",
-      "dev": true
+      "version": "2.5.2"
     },
     "json-buffer": {
       "version": "3.0.1"
@@ -26652,8 +26712,7 @@
       "dev": true
     },
     "json5": {
-      "version": "2.2.3",
-      "dev": true
+      "version": "2.2.3"
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -27153,7 +27212,6 @@
     },
     "lru-cache": {
       "version": "5.1.1",
-      "dev": true,
       "requires": {
         "yallist": "^3.0.2"
       }
@@ -27389,8 +27447,7 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.13",
-      "dev": true
+      "version": "2.0.13"
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -27667,8 +27724,7 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.0",
-      "dev": true
+      "version": "1.0.0"
     },
     "picomatch": {
       "version": "2.3.1",
@@ -27786,7 +27842,8 @@
     },
     "postcss-browser-comments": {
       "version": "4.0.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -27872,19 +27929,23 @@
     },
     "postcss-discard-comments": {
       "version": "5.1.2",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -27903,7 +27964,8 @@
     },
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -27921,11 +27983,13 @@
     },
     "postcss-font-variant": {
       "version": "5.0.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-gap-properties": {
       "version": "3.0.5",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -27956,7 +28020,8 @@
     },
     "postcss-initial": {
       "version": "4.0.1",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-js": {
       "version": "4.0.1",
@@ -27998,11 +28063,13 @@
     },
     "postcss-logical": {
       "version": "5.0.4",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.1.7",
@@ -28056,7 +28123,8 @@
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.3",
@@ -28107,7 +28175,8 @@
     },
     "postcss-normalize-charset": {
       "version": "5.1.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -28169,7 +28238,8 @@
     },
     "postcss-opacity-percentage": {
       "version": "1.1.3",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-ordered-values": {
       "version": "5.1.3",
@@ -28188,7 +28258,8 @@
     },
     "postcss-page-break": {
       "version": "3.0.4",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -28276,7 +28347,8 @@
     },
     "postcss-replace-overflow-wrap": {
       "version": "4.0.0",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -28699,7 +28771,8 @@
     "react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
-      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw=="
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "requires": {}
     },
     "react-input-mask": {
       "version": "2.0.4",
@@ -28754,7 +28827,8 @@
     "react-onclickoutside": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
-      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A=="
+      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+      "requires": {}
     },
     "react-popper": {
       "version": "2.3.0",
@@ -29829,10 +29903,12 @@
     "react-tiny-popover": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-8.1.2.tgz",
-      "integrity": "sha512-zzG9hGBCNeSesZLLItNOiQvIU+/tLdLQ9y8cfSAtLQnOH7eoKVJflQzEng8w7rTblE+cV0/R6dFjjiZS1A4qTA=="
+      "integrity": "sha512-zzG9hGBCNeSesZLLItNOiQvIU+/tLdLQ9y8cfSAtLQnOH7eoKVJflQzEng8w7rTblE+cV0/R6dFjjiZS1A4qTA==",
+      "requires": {}
     },
     "react-to-print": {
-      "version": "2.14.15"
+      "version": "2.14.15",
+      "requires": {}
     },
     "react-tooltip": {
       "version": "5.22.0",
@@ -29853,7 +29929,8 @@
       }
     },
     "reactjs-popup": {
-      "version": "2.0.6"
+      "version": "2.0.6",
+      "requires": {}
     },
     "read-cache": {
       "version": "1.0.0",
@@ -30240,7 +30317,8 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -30822,7 +30900,8 @@
     },
     "style-loader": {
       "version": "3.3.3",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "stylehacks": {
       "version": "5.1.1",
@@ -31363,6 +31442,13 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "dev": true,
@@ -31453,7 +31539,6 @@
     },
     "update-browserslist-db": {
       "version": "1.0.13",
-      "dev": true,
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -31476,10 +31561,12 @@
       }
     },
     "use-isomorphic-layout-effect": {
-      "version": "1.1.2"
+      "version": "1.1.2",
+      "requires": {}
     },
     "use-memo-one": {
-      "version": "1.1.3"
+      "version": "1.1.3",
+      "requires": {}
     },
     "util-deprecate": {
       "version": "1.0.2"
@@ -31688,7 +31775,8 @@
           "version": "8.18.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
           "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -32106,7 +32194,8 @@
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
       "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
@@ -32127,8 +32216,7 @@
       "dev": true
     },
     "yallist": {
-      "version": "3.1.1",
-      "dev": true
+      "version": "3.1.1"
     },
     "yaml": {
       "version": "1.10.2"
diff --git a/client/src/components/Authorization/Login.jsx b/client/src/components/Authorization/Login.jsx
index 8444e5e2..5de97046 100644
--- a/client/src/components/Authorization/Login.jsx
+++ b/client/src/components/Authorization/Login.jsx
@@ -181,7 +181,7 @@ const Login = () => {
                   >
                     <Button
                       color="colorDefault"
-                      variant="text"
+                      variant="outlined"
                       onClick={() => {
                         navigate("/calculation/1/0");
                       }}
diff --git a/client/src/components/Checklist/ChecklistModal.jsx b/client/src/components/Checklist/ChecklistModal.jsx
index fd7dc346..fca12d3f 100644
--- a/client/src/components/Checklist/ChecklistModal.jsx
+++ b/client/src/components/Checklist/ChecklistModal.jsx
@@ -3,7 +3,7 @@ import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
-import { FaX } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
 
 import "./ChecklistModal.css";
 
@@ -68,8 +68,7 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
       className={classes.modal}
     >
       <span className={classes.close} onClick={toggleChecklistModal}>
-        {/* <FontAwesomeIcon icon={faX} /> */}
-        <FaX />
+        <MdClose />
       </span>
       <ChecklistContent />
     </Modal>
diff --git a/client/src/components/Faq/DeleteFaqModal.jsx b/client/src/components/Faq/DeleteFaqModal.jsx
index 69f4a57c..0a667c8f 100644
--- a/client/src/components/Faq/DeleteFaqModal.jsx
+++ b/client/src/components/Faq/DeleteFaqModal.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import { MdDelete } from "react-icons/md";
 
@@ -39,11 +39,11 @@ const DeleteFaqModal = ({ isModalOpen, closeModal, handleDelete, isFaq }) => {
         {` Delete ${type}`}
       </div>
       <div className={classes.modalSubHeader}>
-        <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+        <MdWarning className={classes.warningIcon} alt="Warning" />
         {`Are you sure you want to permanently delete the ${type}?`}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={closeModal} variant="text" id="cancelButton">
+        <Button onClick={closeModal} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         <Button onClick={handleDelete} variant="contained" color={"colorError"}>
diff --git a/client/src/components/Faq/SaveConfirmationModal.jsx b/client/src/components/Faq/SaveConfirmationModal.jsx
index 5b8fda81..4fc54f4c 100644
--- a/client/src/components/Faq/SaveConfirmationModal.jsx
+++ b/client/src/components/Faq/SaveConfirmationModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
 import { createUseStyles } from "react-jss";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { MdSave } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
@@ -38,11 +38,11 @@ const SaveConfirmationModal = ({ isOpen, onClose, onYes }) => {
         {" Save Edits"}
       </div>
       <div className={classes.modalSubHeader}>
-        <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+        <MdWarning className={classes.warningIcon} alt="Warning" />
         {"Are you sure you want to save FAQ page edits?"}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text" id="cancelButton">
+        <Button onClick={onClose} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         <Button onClick={onYes} variant="contained" color={"colorPrimary"}>
diff --git a/client/src/components/Feedback/FeedbackPage.jsx b/client/src/components/Feedback/FeedbackPage.jsx
index ab2b5e5d..10b4aa4c 100644
--- a/client/src/components/Feedback/FeedbackPage.jsx
+++ b/client/src/components/Feedback/FeedbackPage.jsx
@@ -181,6 +181,7 @@ const FeedbackPage = ({ contentContainerRef }) => {
                   name="name"
                   innerRef={focusRef}
                   type="text"
+                  placeholder="required"
                   className={clsx(
                     classes.formInput,
                     errors.name && touched.name && classes.formErrorBorder
@@ -222,6 +223,7 @@ const FeedbackPage = ({ contentContainerRef }) => {
                 <Field
                   id="comment"
                   name="comment"
+                  placeholder="required"
                   as="textarea"
                   className={clsx(
                     classes.formTextArea,
diff --git a/client/src/components/Layout/NavBarToolTip.jsx b/client/src/components/Layout/NavBarToolTip.jsx
index 1bb4be45..3af5e311 100644
--- a/client/src/components/Layout/NavBarToolTip.jsx
+++ b/client/src/components/Layout/NavBarToolTip.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles({
   container: {
@@ -60,7 +60,7 @@ const NavBarToolTip = () => {
 
   return (
     <div className={classes[tooltipVisibility]}>
-      <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+      <MdWarning className={classes.warningIcon} alt="Warning" />
       <span>Only projects created after logging in can be saved</span>
       <div className={classes.arrowUp}> </div>
       <button
diff --git a/client/src/components/ProjectWizard/AffordableEdgeCaseModal.jsx b/client/src/components/ProjectWizard/AffordableEdgeCaseModal.jsx
index 111992a2..1ebd1671 100644
--- a/client/src/components/ProjectWizard/AffordableEdgeCaseModal.jsx
+++ b/client/src/components/ProjectWizard/AffordableEdgeCaseModal.jsx
@@ -62,7 +62,7 @@ const AffordableEdgeCaseModal = ({ isOpen, onClose, onYes }) => {
             {`100% affordable housing of less than 50 units are exempt from the TDM Ordinance. Did you intend to change to 100% Affordable Housing?`}
           </div>
           <div className={classes.buttonFlexBox}>
-            <Button onClick={onClose} variant="text" id="cancelButton">
+            <Button onClick={onClose} variant="outlined" id="cancelButton">
               NO
             </Button>
             <Button onClick={onYes} variant="contained" color={"colorPrimary"}>
diff --git a/client/src/components/ProjectWizard/NavConfirmDialog.jsx b/client/src/components/ProjectWizard/NavConfirmDialog.jsx
index aa7400c7..6be4abb5 100644
--- a/client/src/components/ProjectWizard/NavConfirmDialog.jsx
+++ b/client/src/components/ProjectWizard/NavConfirmDialog.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
 import { createUseStyles } from "react-jss";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles({
   title: {
@@ -37,7 +37,7 @@ const NavConfirmDialog = ({ blocker }) => {
       </h2>
       <br />
       <p className={classes.warningWrapper}>
-        <img src={WarningIcon} alt="Warning" />
+        <MdWarning alt="Warning" />
         <span className={classes.warningMessage}>
           &nbsp; This will permanently delete any unsaved projects or changes to
           project.
@@ -46,7 +46,7 @@ const NavConfirmDialog = ({ blocker }) => {
       <div className={classes.modalActions}>
         <Button
           color="colorCancel"
-          variant="text"
+          variant="outlined"
           id="modalCancel"
           data-testid="transitionCancel"
           onClick={() => blocker.reset()}
diff --git a/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx b/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx
index 441e1b0b..e28983f9 100644
--- a/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx
+++ b/client/src/components/ProjectWizard/WizardPages/Level0Page.jsx
@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import PlanningIcon from "../../../images/planning.png";
-import WarningIcon from "../../../images/warning-icon.png";
-import { createUseStyles } from "react-jss";
+import { createUseStyles, useTheme } from "react-jss";
 import { MdLaunch } from "react-icons/md";
+import { MdWarning } from "react-icons/md";
 
 const useStyles = createUseStyles({
   level0NavButtons: {
@@ -12,20 +12,12 @@ const useStyles = createUseStyles({
     }
   },
   level0Container: {
-    textAlign: "center",
-
-    "& h1": {
-      fontFamily: "Oswald",
-      fontWeight: "bold",
-      fontSize: "30px",
-      lineHeight: "44px",
-      marginTop: "22px"
-    }
+    textAlign: "center"
   },
   level0Message: {
     marginTop: "20px",
     maxWidth: "800px",
-    backgroundColor: "#FEF4F2",
+    backgroundColor: "#F9DFDA",
     color: "#B64E38",
     fontSize: "22px",
     lineHeight: "38px",
@@ -43,7 +35,8 @@ const useStyles = createUseStyles({
 });
 
 const Level0Page = ({ isLevel0 }) => {
-  const classes = useStyles();
+  const theme = useTheme();
+  const classes = useStyles({ theme });
 
   return (
     <>
@@ -51,13 +44,9 @@ const Level0Page = ({ isLevel0 }) => {
         <div className={classes.level0NavButtons}>
           <div className={classes.level0Container}>
             <img src={PlanningIcon} alt="planningIcon" />
-            <h1>Your project level is 0!</h1>
+            <h1 style={theme.typography.heading1}>Your project level is 0!</h1>
             <div className={classes.level0Message}>
-              <img
-                src={WarningIcon}
-                className={classes.warningIcon}
-                alt="warningIcon"
-              />
+              <MdWarning className={classes.warningIcon} alt="Warning" />
               <p>
                 Based on the information you provided, the Transportation Demand
                 Management (TDM) Ordinance <strong>may</strong> not apply to
diff --git a/client/src/components/Projects/ColumnHeaderPopups/DatePopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/DatePopup.jsx
index 83ec763c..6d5b4156 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/DatePopup.jsx
+++ b/client/src/components/Projects/ColumnHeaderPopups/DatePopup.jsx
@@ -96,7 +96,7 @@ const DatePopup = ({
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button
diff --git a/client/src/components/Projects/ColumnHeaderPopups/MultiSelectText.jsx b/client/src/components/Projects/ColumnHeaderPopups/MultiSelectText.jsx
index beb13f0d..f19be38a 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/MultiSelectText.jsx
+++ b/client/src/components/Projects/ColumnHeaderPopups/MultiSelectText.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import SearchIcon from "../../../images/search.png";
+import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
@@ -81,6 +82,7 @@ const MultiSelectText = ({ options, selectedOptions, setSelectedOptions }) => {
           placeholder="Search"
           className={classes.searchBar}
         />
+        <MdOutlineSearch className={classes.searchIcon} alt="Search Icon" />
         <img
           className={classes.searchIcon}
           src={SearchIcon}
diff --git a/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.jsx
index 5a1021e7..ae34748d 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.jsx
+++ b/client/src/components/Projects/ColumnHeaderPopups/StatusPopup.jsx
@@ -119,7 +119,7 @@ const StatusPopup = ({
       </div>
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button
diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx
index 81e9b33a..0d2c753d 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx
+++ b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx
@@ -4,7 +4,7 @@ import Button from "../../Button/Button";
 import RadioButton from "../../UI/RadioButton";
 import "react-datepicker/dist/react-datepicker.css";
 import { MdClose } from "react-icons/md";
-import SearchIcon from "../../../images/search.png";
+import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
@@ -190,11 +190,7 @@ const TextPopup = ({
           onChange={onChangeSearchString}
           className={classes.searchBar}
         />
-        <img
-          className={classes.searchIcon}
-          src={SearchIcon}
-          alt="Search Icon"
-        />
+        <MdOutlineSearch className={classes.searchIcon} alt="Search Icon" />
       </div>
 
       <div style={{ overflow: "auto", maxHeight: "12rem" }}>
@@ -217,7 +213,7 @@ const TextPopup = ({
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex", justifyContent: "center" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button
diff --git a/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.jsx
index 95aac0bb..98a3d015 100644
--- a/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.jsx
+++ b/client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.jsx
@@ -102,7 +102,7 @@ const VisibilityPopup = ({
 
       <hr style={{ width: "100%" }} />
       <div style={{ display: "flex" }}>
-        <Button onClick={setDefault} variant="text">
+        <Button onClick={setDefault} variant="outlined">
           Reset
         </Button>
         <Button
diff --git a/client/src/components/Projects/CopyProjectModal.jsx b/client/src/components/Projects/CopyProjectModal.jsx
index 2bbc4544..1981f7ad 100644
--- a/client/src/components/Projects/CopyProjectModal.jsx
+++ b/client/src/components/Projects/CopyProjectModal.jsx
@@ -56,7 +56,7 @@ export default function CopyProjectModal({
         />
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text">
+        <Button onClick={onClose} variant="outlined">
           Cancel
         </Button>
         <Button
diff --git a/client/src/components/Projects/CsvModal.jsx b/client/src/components/Projects/CsvModal.jsx
index 99c0f1ed..bc7c767a 100644
--- a/client/src/components/Projects/CsvModal.jsx
+++ b/client/src/components/Projects/CsvModal.jsx
@@ -158,7 +158,7 @@ const CsvModal = ({
               setProjectCollection("");
               setFilename("");
             }}
-            variant="text"
+            variant="outlined"
             id="cancelButton"
           >
             Cancel
diff --git a/client/src/components/Projects/DeleteProjectModal.jsx b/client/src/components/Projects/DeleteProjectModal.jsx
index ac374617..0e7d3a74 100644
--- a/client/src/components/Projects/DeleteProjectModal.jsx
+++ b/client/src/components/Projects/DeleteProjectModal.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { PropTypes } from "prop-types";
 import { MdDelete, MdRestoreFromTrash } from "react-icons/md";
 import Button from "../Button/Button";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { createUseStyles, useTheme } from "react-jss";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 
@@ -47,11 +47,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
             <MdRestoreFromTrash /> Restore Project from Trash
           </div>
           <div style={theme.typography.subHeading}>
-            <img
-              src={WarningIcon}
-              className={classes.warningIcon}
-              alt="Warning"
-            />
+            <MdWarning className={classes.warningIcon} alt="Warning" />
             Are you sure you want to restore the project from the trash,
           </div>
         </>
@@ -61,11 +57,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
             <MdDelete /> Delete Project
           </div>
           <div style={theme.typography.subHeading}>
-            <img
-              src={WarningIcon}
-              className={classes.warningIcon}
-              alt="Warning"
-            />
+            <MdWarning className={classes.warningIcon} alt="Warning" />
             Are you sure you want to delete the following? <br></br>(It will
             remain in the recycling bin for ninety days <br></br>before being
             permanently deleted)
@@ -76,7 +68,7 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
         {Array.isArray(project.name) ? project.name.join(", ") : project.name}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text" id="cancelButton">
+        <Button onClick={onClose} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         {project.dateTrashed ? (
diff --git a/client/src/components/Projects/DownloadProjectModal.jsx b/client/src/components/Projects/DownloadProjectModal.jsx
index 8f3e5aeb..e0bf769c 100644
--- a/client/src/components/Projects/DownloadProjectModal.jsx
+++ b/client/src/components/Projects/DownloadProjectModal.jsx
@@ -6,6 +6,8 @@ import Button from "../Button/Button";
 
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 
+// This file appears to be obsolete
+
 const useStyles = createUseStyles(theme => ({
   buttonFlexBox: {
     display: "flex",
@@ -93,7 +95,7 @@ export default function DownloadProjectModal({
         </table>
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={onClose} variant="text">
+        <Button onClick={onClose} variant="outlined">
           Close
         </Button>
         {/* <Button
diff --git a/client/src/components/Projects/ProjectsPage.jsx b/client/src/components/Projects/ProjectsPage.jsx
index 4f4f9aaf..7d053cf7 100644
--- a/client/src/components/Projects/ProjectsPage.jsx
+++ b/client/src/components/Projects/ProjectsPage.jsx
@@ -5,7 +5,7 @@ import { createUseStyles } from "react-jss";
 import UserContext from "../../contexts/UserContext";
 
 import { MdFilterAlt } from "react-icons/md";
-import SearchIcon from "../../images/search.png";
+import { MdOutlineSearch } from "react-icons/md";
 import Pagination from "../UI/Pagination";
 import ContentContainerNoSidebar from "../Layout/ContentContainerNoSidebar";
 import useErrorHandler from "../../hooks/useErrorHandler";
@@ -169,6 +169,7 @@ const ProjectsPage = ({ contentContainerRef }) => {
   const [droOptions, setDroOptions] = useState([]);
   const [droNameMap, setDroNameMap] = useState({});
   const projectsPerPage = perPage;
+  const isAdmin = userContext.account?.isAdmin || false;
 
   useEffect(() => {
     // Check if the user is an admin
@@ -890,11 +891,7 @@ const ProjectsPage = ({ contentContainerRef }) => {
                       value={filterText}
                       onChange={e => handleFilterTextChange(e.target.value)}
                     />
-                    <img
-                      className={classes.searchIcon}
-                      src={SearchIcon}
-                      alt="Search Icon"
-                    />
+                    <MdOutlineSearch className={classes.searchIcon} />
                   </div>
                   {filterCollapsed ? (
                     <button
@@ -948,18 +945,12 @@ const ProjectsPage = ({ contentContainerRef }) => {
                           handleHide={handleHide}
                           handleCheckboxChange={handleCheckboxChange}
                           checkedProjectIds={checkedProjectIds}
-                          isAdmin={
-                            UserContext.account
-                              ? UserContext.account.isAdmin
-                              : false
-                          }
+                          isAdmin={isAdmin}
                           droOptions={droOptions}
                           onDroChange={handleDroChange} // Pass the DRO change handler
                           onAdminNoteUpdate={handleAdminNoteUpdate} // Pass the admin note update handler
                           droName={
-                            userContext.account?.isAdmin
-                              ? null
-                              : droNameMap[project.droId] || "N/A"
+                            isAdmin ? null : droNameMap[project.droId] || "N/A"
                           } // Pass the droName
                         />
                       ))
diff --git a/client/src/components/UI/AriaModal/ModalDialog.jsx b/client/src/components/UI/AriaModal/ModalDialog.jsx
index cd3f685c..b61ca358 100644
--- a/client/src/components/UI/AriaModal/ModalDialog.jsx
+++ b/client/src/components/UI/AriaModal/ModalDialog.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
 import AriaModal from "react-aria-modal";
-import { FaX } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
 
 const useStyles = createUseStyles({
   modalContainer: {
@@ -89,7 +89,7 @@ export default function ModalDialog({
               className={classes.closeButton}
               aria-label={`Close ${title} modal`}
             >
-              <FaX />
+              <MdClose />
             </button>
           </div>
         )}
diff --git a/client/src/images/close.png b/client/src/images/close.png
deleted file mode 100644
index f2543d64..00000000
Binary files a/client/src/images/close.png and /dev/null differ
diff --git a/client/src/images/copy.png b/client/src/images/copy.png
deleted file mode 100644
index d8d8e0cb..00000000
Binary files a/client/src/images/copy.png and /dev/null differ
diff --git a/client/src/images/trash.png b/client/src/images/trash.png
deleted file mode 100644
index 1e64dab5..00000000
Binary files a/client/src/images/trash.png and /dev/null differ