From e709f44e42fafaf12df56233fb57a412f0a7ee21 Mon Sep 17 00:00:00 2001
From: Alejandro-Vega <vegaalejandro15@gmail.com>
Date: Thu, 7 Dec 2023 13:42:19 -0500
Subject: [PATCH 1/3] Removed @mui/styles and any withStyles used

---
 package-lock.json                             | 340 +++++++++---------
 package.json                                  |   1 -
 .../Questionnaire/FormContainer.tsx           |  85 ++---
 .../ReviewDataListingProperty.tsx             |   3 +-
 .../TableFileTypeAndExtensionInput.tsx        | 176 ++++-----
 .../Questionnaire/TableTextInput.tsx          |  58 ++-
 src/components/Questionnaire/TextInput.tsx    | 199 +++++-----
 src/content/questionnaire/FormView.tsx        | 252 +++++++------
 src/content/questionnaire/sections/D.tsx      |   2 +-
 9 files changed, 518 insertions(+), 598 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d5356bf5..16032900 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@mui/icons-material": "^5.11.16",
         "@mui/lab": "^5.0.0-alpha.130",
         "@mui/material": "^5.13.1",
-        "@mui/styles": "^5.13.1",
         "@mui/x-charts": "^6.0.0-alpha.12",
         "@mui/x-date-pickers": "^6.8.0",
         "@testing-library/jest-dom": "^5.16.5",
@@ -2577,6 +2576,26 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@eslint/js": {
       "version": "8.42.0",
       "license": "MIT",
@@ -3557,45 +3576,6 @@
         }
       }
     },
-    "node_modules/@mui/styles": {
-      "version": "5.13.2",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@emotion/hash": "^0.9.1",
-        "@mui/private-theming": "^5.13.1",
-        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.1",
-        "clsx": "^1.2.1",
-        "csstype": "^3.1.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.10.0",
-        "jss-plugin-camel-case": "^10.10.0",
-        "jss-plugin-default-unit": "^10.10.0",
-        "jss-plugin-global": "^10.10.0",
-        "jss-plugin-nested": "^10.10.0",
-        "jss-plugin-props-sort": "^10.10.0",
-        "jss-plugin-rule-value-function": "^10.10.0",
-        "jss-plugin-vendor-prefixer": "^10.10.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/system": {
       "version": "5.13.2",
       "license": "MIT",
@@ -5839,12 +5819,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "license": "MIT",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -5867,31 +5848,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "license": "MIT",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "license": "MIT",
@@ -6281,6 +6237,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "license": "MIT",
@@ -7408,20 +7392,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "license": "MIT",
@@ -7432,10 +7402,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.2.0",
       "license": "MIT",
@@ -8999,20 +8965,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/eslint-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "license": "MIT",
@@ -9035,10 +8987,6 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
     "node_modules/eslint-webpack-plugin/node_modules/schema-utils": {
       "version": "4.2.0",
       "license": "MIT",
@@ -9069,6 +9017,21 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/chalk": {
       "version": "4.1.2",
       "license": "MIT",
@@ -9104,6 +9067,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/espree": {
       "version": "9.5.2",
       "license": "BSD-2-Clause",
@@ -9592,6 +9560,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
       "version": "4.1.2",
       "license": "MIT",
@@ -9633,6 +9624,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
       "license": "MIT",
@@ -12251,8 +12247,9 @@
       "license": "(AFL-2.1 OR BSD-3-Clause)"
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "license": "MIT"
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -13254,20 +13251,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "license": "MIT",
@@ -13278,10 +13261,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.2.0",
       "license": "MIT",
@@ -16248,6 +16227,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "license": "MIT"
@@ -17008,6 +17015,29 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/svg-url-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/svg-url-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/svg-url-loader/node_modules/file-loader": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
@@ -17027,6 +17057,11 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/svg-url-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/svg-url-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -17648,7 +17683,6 @@
     },
     "node_modules/typescript": {
       "version": "5.1.3",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -18217,20 +18251,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "license": "MIT",
@@ -18241,10 +18261,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
       "version": "4.2.0",
       "license": "MIT",
@@ -18319,20 +18335,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "license": "MIT",
@@ -18343,10 +18345,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.2.0",
       "license": "MIT",
@@ -18629,20 +18627,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "license": "MIT",
@@ -18656,10 +18640,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "license": "BSD-3-Clause",
diff --git a/package.json b/package.json
index 9f93053c..bf22a0fd 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.130",
     "@mui/material": "^5.13.1",
-    "@mui/styles": "^5.13.1",
     "@mui/x-charts": "^6.0.0-alpha.12",
     "@mui/x-date-pickers": "^6.8.0",
     "@testing-library/jest-dom": "^5.16.5",
diff --git a/src/components/Questionnaire/FormContainer.tsx b/src/components/Questionnaire/FormContainer.tsx
index cb1a90e6..f98e44e9 100644
--- a/src/components/Questionnaire/FormContainer.tsx
+++ b/src/components/Questionnaire/FormContainer.tsx
@@ -1,6 +1,5 @@
 import React, { HTMLProps, MutableRefObject, forwardRef, useId } from 'react';
 import { Button, ButtonProps, Typography, styled } from '@mui/material';
-import { WithStyles, withStyles } from '@mui/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate } from 'react-router-dom';
 import useFormMode from '../../content/questionnaire/sections/hooks/useFormMode';
@@ -37,8 +36,29 @@ const StyledFormContainer = styled("div", {
   scrollMarginTop: "0px",
 }));
 
+const StyledForm = styled("form")(() => ({
+  fontWeight: 400,
+  fontSize: '16px',
+  fontFamily: "'Nunito', 'Rubik', sans-serif",
+}));
+
+const StyledTitleGroup = styled("div")(() => ({
+  background: "transparent",
+  color: "#337E90",
+  paddingBottom: "40px",
+  borderRadius: "8px 8px 0 0",
+  display: "flex",
+  alignItems: "center",
+}));
+
+const StyledSectionTitle = styled(Typography)(() => ({
+  fontWeight: 700,
+  fontSize: "24px",
+  fontFamily: "'Nunito', 'Rubik', sans-serif",
+  lineHeight: "32.74px",
+}));
+
 type Props = {
-  classes: WithStyles<typeof styles>['classes'];
   description: string;
   hideReturnToSubmissions?: boolean;
   children: React.ReactNode;
@@ -53,7 +73,6 @@ type Props = {
  */
 const FormContainer = forwardRef<HTMLDivElement, Props>(({
   description,
-  classes,
   children,
   formRef,
   hideReturnToSubmissions = true,
@@ -76,66 +95,20 @@ const FormContainer = forwardRef<HTMLDivElement, Props>(({
         <ArrowBackIcon fontSize="small" />
         Return to all Submissions
       </StyledButton>
-      <div className={classes.titleGroup}>
-        <Typography className={classes.sectionTitle} variant="h2">
+      <StyledTitleGroup>
+        <StyledSectionTitle variant="h2">
           {description}
-        </Typography>
-      </div>
-      <form
+        </StyledSectionTitle>
+      </StyledTitleGroup>
+      <StyledForm
         id={id}
         ref={formRef}
-        className={classes.form}
         onSubmit={(e) => e.preventDefault()}
       >
         {children}
-      </form>
+      </StyledForm>
     </StyledFormContainer>
   );
 });
 
-const styles = () => ({
-  formContainer: {
-    background: "transparent",
-    borderRadius: "8px",
-    paddingBottom: "25px",
-    marginTop: "0px !important",
-    scrollMarginTop: "30px"
-  },
-  form: {
-    fontWeight: 400,
-    fontSize: '16px',
-    fontFamily: "'Nunito', 'Rubik', sans-serif",
-  },
-  titleGroup: {
-    background: "transparent",
-    color: "#337E90",
-    paddingBottom: "40px",
-    borderRadius: "8px 8px 0 0",
-    display: "flex",
-    alignItems: "center",
-  },
-  sectionTitle: {
-    fontWeight: 700,
-    fontSize: "24px",
-    fontFamily: "'Nunito', 'Rubik', sans-serif",
-    lineHeight: "32.74px",
-  },
-  returnToSubmissions: {
-    fontWeight: 700,
-    fontSize: "14px",
-    fontFamily: "'Nunito', 'Rubik', sans-serif",
-    lineHeight: "19.6px",
-    color: "#2E5481",
-    padding: 0,
-    marginBottom: "16px",
-    display: "flex",
-    alignItems: "center",
-    verticalAlign: "middle",
-    textTranform: "initial",
-    "& svg": {
-      marginRight: "8px"
-    }
-  },
-});
-
-export default withStyles(styles, { withTheme: true })(FormContainer);
+export default FormContainer;
diff --git a/src/components/Questionnaire/ReviewDataListingProperty.tsx b/src/components/Questionnaire/ReviewDataListingProperty.tsx
index 4c93e3e9..03ce4b1e 100644
--- a/src/components/Questionnaire/ReviewDataListingProperty.tsx
+++ b/src/components/Questionnaire/ReviewDataListingProperty.tsx
@@ -1,6 +1,5 @@
 import { Grid, Stack, styled } from "@mui/material";
-import { CSSProperties } from "@mui/styles";
-import { FC, useMemo, useState } from "react";
+import { CSSProperties, FC, useMemo, useState } from "react";
 
 export const StyledLabel = styled("span")(() => ({
   color: "#000000",
diff --git a/src/components/Questionnaire/TableFileTypeAndExtensionInput.tsx b/src/components/Questionnaire/TableFileTypeAndExtensionInput.tsx
index 3ab3a3b6..dfd692cb 100644
--- a/src/components/Questionnaire/TableFileTypeAndExtensionInput.tsx
+++ b/src/components/Questionnaire/TableFileTypeAndExtensionInput.tsx
@@ -5,9 +5,9 @@ import {
   TableCell,
   Tooltip,
   TooltipProps,
-  styled
+  styled,
+  Paper
 } from "@mui/material";
-import { WithStyles, withStyles } from "@mui/styles";
 import dropdownArrowsIcon from "../../assets/icons/dropdown_arrows.svg";
 import { fileTypeExtensions } from "../../config/FileTypeConfig";
 import useFormMode from "../../content/questionnaire/sections/hooks/useFormMode";
@@ -22,7 +22,6 @@ const DropdownArrowsIcon = styled("div")(() => ({
 
 type Props = {
   inputID: string;
-  classes: WithStyles<typeof styles>["classes"];
   typeValue: string;
   extensionValue: string;
   options: string[];
@@ -48,6 +47,75 @@ const StyledTooltip = styled((props: TooltipProps) => (
   },
 }));
 
+const StyledTableCell = styled(TableCell)(() => ({
+  borderTop: "1px solid #6B7294 !important",
+  borderRight: "1px solid #6B7294 !important",
+  borderBottom: "none!important",
+  borderLeft: "none!important",
+  padding: "0",
+  "& .MuiStack-root": {
+    width: "auto",
+  }
+}));
+
+const StyledPaper = styled(Paper)(() => ({
+  borderRadius: "8px",
+  border: "1px solid #6B7294",
+  marginTop: "2px",
+  "& .MuiAutocomplete-listbox": {
+    padding: 0
+  },
+  "& .MuiAutocomplete-option[aria-selected='true']": {
+    color: "#083A50",
+    background: "#FFFFFF"
+  },
+  "& .MuiAutocomplete-option": {
+    padding: "0 10px",
+    height: "35px",
+    color: "#083A50",
+    background: "#FFFFFF"
+  },
+  "& .MuiAutocomplete-option:hover": {
+    backgroundColor: "#3E7E6D",
+    color: "#FFFFFF"
+  },
+  "& .MuiAutocomplete-option.Mui-focused": {
+    backgroundColor: "#3E7E6D !important",
+    color: "#FFFFFF"
+  },
+}));
+
+const StyledAutocomplete = styled(Autocomplete)(({ readOnly } : { readOnly? : boolean }) => ({
+  "& .MuiInputBase-root": {
+    backgroundColor: readOnly ? "#E5EEF4" : "#FFFFFF",
+    "&.MuiAutocomplete-inputRoot.MuiInputBase-root": {
+      display: 'flex',
+      alignItems: 'center',
+      padding: 0,
+    },
+    "& .MuiInputBase-input": {
+      fontWeight: 400,
+      fontSize: "16px",
+      fontFamily: "'Nunito', 'Rubik', sans-serif",
+      padding: "10px 12px 10px 12px !important",
+      color: readOnly ? "#083A50" : "initial",
+      cursor: readOnly ? "not-allowed !important" : "initial",
+    },
+    "& ::placeholder": {
+      color: "#87878C",
+      fontWeight: 400,
+      opacity: 1
+    },
+    "& .MuiAutocomplete-endAdornment": {
+      right: "8px",
+    },
+    "&.Mui-focused": {
+      boxShadow:
+        "2px 2px 2px 1px rgba(38, 184, 147, 0.10), -2px -2px 2px 1px rgba(38, 184, 147, 0.20)",
+    },
+  },
+}));
+
 /**
  * Generates a generic autocomplete select box with a label and help text
  *
@@ -56,7 +124,6 @@ const StyledTooltip = styled((props: TooltipProps) => (
  */
 const TableAutocompleteInput: FC<Props> = ({
   inputID,
-  classes,
   typeValue,
   extensionValue,
   name,
@@ -137,9 +204,10 @@ const TableAutocompleteInput: FC<Props> = ({
   useEffect(() => {
     onExtensionValChangeWrapper(null, extensionValue, null);
   }, [extensionValue]);
+
   return (
     <>
-      <TableCell className={classes.autocomplete}>
+      <StyledTableCell>
         <StyledAutocomplete
           sx={{
           "& .MuiInputBase-input": {
@@ -153,15 +221,12 @@ const TableAutocompleteInput: FC<Props> = ({
           id={inputID.concat("-type")}
           size="small"
           value={typeVal || ""}
-          classes={{ root: classes.inputInTable }}
           onChange={onTypeValChangeWrapper}
           popupIcon={<DropdownArrowsIcon />}
           readOnly={readOnlyInputs}
           freeSolo
+          PaperComponent={StyledPaper}
           slotProps={{
-          paper: {
-            className: classes.paper
-          },
           popper: {
             disablePortal: true,
             sx: {
@@ -206,8 +271,8 @@ const TableAutocompleteInput: FC<Props> = ({
         )}
           {...rest}
         />
-      </TableCell>
-      <TableCell className={classes.autocomplete}>
+      </StyledTableCell>
+      <StyledTableCell>
         <StyledAutocomplete
           sx={{
             "& .MuiInputBase-input": {
@@ -221,15 +286,12 @@ const TableAutocompleteInput: FC<Props> = ({
           id={inputID.concat("-extension")}
           size="small"
           value={extensionVal || ""}
-          classes={{ root: classes.inputInTable }}
           onChange={onExtensionValChangeWrapper}
           popupIcon={<DropdownArrowsIcon />}
           readOnly={readOnlyInputs}
           freeSolo
+          PaperComponent={StyledPaper}
           slotProps={{
-            paper: {
-              className: classes.paper
-            },
             popper: {
               disablePortal: true,
               sx: {
@@ -273,89 +335,9 @@ const TableAutocompleteInput: FC<Props> = ({
           )}
           options={fileTypeExtensions[typeVal] || []}
         />
-      </TableCell>
+      </StyledTableCell>
     </>
   );
 };
 
-const StyledAutocomplete = styled(Autocomplete)(({ readOnly } : { readOnly? : boolean }) => ({
-  "& .MuiInputBase-root": {
-    backgroundColor: readOnly ? "#D9DEE4" : "#FFFFFF",
-    "&.MuiAutocomplete-inputRoot.MuiInputBase-root": {
-      display: 'flex',
-      alignItems: 'center',
-      padding: 0,
-    },
-    "& .MuiInputBase-input": {
-      fontWeight: 400,
-      fontSize: "16px",
-      fontFamily: "'Nunito', 'Rubik', sans-serif",
-      padding: "10px 12px 10px 12px !important",
-      cursor: readOnly ? "not-allowed !important" : "initial",
-    },
-    "& .MuiAutocomplete-endAdornment": {
-      right: "8px",
-    },
-    "&.Mui-focused": {
-      boxShadow:
-        "2px 2px 2px 1px rgba(38, 184, 147, 0.10), -2px -2px 2px 1px rgba(38, 184, 147, 0.20)",
-    },
-  },
-}));
-
-const styles = () => ({
-  paper: {
-    borderRadius: "8px",
-    border: "1px solid #6B7294",
-    marginTop: "2px",
-    "& .MuiAutocomplete-listbox": {
-      padding: 0
-    },
-    "& .MuiAutocomplete-option[aria-selected='true']": {
-      color: "#083A50",
-      background: "#FFFFFF"
-    },
-    "& .MuiAutocomplete-option": {
-      padding: "0 10px",
-      height: "35px",
-      color: "#083A50",
-      background: "#FFFFFF"
-    },
-    "& .MuiAutocomplete-option:hover": {
-      backgroundColor: "#3E7E6D",
-      color: "#FFFFFF"
-    },
-    "& .MuiAutocomplete-option.Mui-focused": {
-      backgroundColor: "#3E7E6D !important",
-      color: "#FFFFFF"
-    },
-  },
-  inputInTable: {
-    backgroundColor: "#fff",
-    "& .MuiAutocomplete-inputRoot.MuiInputBase-root": {
-      padding: 0,
-    },
-    "& ::placeholder": {
-      color: "#87878C",
-      fontWeight: 400,
-      opacity: 1
-    },
-    "& .MuiAutocomplete-input:read-only": {
-      backgroundColor: "#E5EEF4",
-      color: "#083A50",
-      cursor: "not-allowed",
-    },
-  },
-  autocomplete: {
-    borderTop: "1px solid #6B7294 !important",
-    borderRight: "1px solid #6B7294 !important",
-    borderBottom: "none!important",
-    borderLeft: "none!important",
-    padding: "0",
-    "& .MuiStack-root": {
-      width: "auto",
-    }
-  }
-});
-
-export default withStyles(styles, { withTheme: true })(TableAutocompleteInput);
+export default TableAutocompleteInput;
diff --git a/src/components/Questionnaire/TableTextInput.tsx b/src/components/Questionnaire/TableTextInput.tsx
index 98b208a5..ec44d287 100644
--- a/src/components/Questionnaire/TableTextInput.tsx
+++ b/src/components/Questionnaire/TableTextInput.tsx
@@ -6,7 +6,6 @@ import {
   TooltipProps,
   styled,
 } from "@mui/material";
-import { WithStyles, withStyles } from "@mui/styles";
 import useFormMode from "../../content/questionnaire/sections/hooks/useFormMode";
 import { updateInputValidity } from '../../utils';
 /*
@@ -17,7 +16,6 @@ type Props = {
   patternValidityMessage?: string;
   maxLength?: number;
   filter?: (input: string) => string;
-  classes: WithStyles<typeof styles>["classes"];
 } & InputProps;
 
 const StyledTooltip = styled((props: TooltipProps) => (
@@ -32,6 +30,32 @@ const StyledTooltip = styled((props: TooltipProps) => (
     color: "#2B528B",
   },
 }));
+
+const StyledInput = styled(Input)(() => ({
+  "&.MuiInputBase-root": {
+    "& .MuiInputBase-input": {
+      padding: "0px",
+      color: "#083A50",
+      fontWeight: 400,
+      fontSize: "16px",
+      fontFamily: "'Nunito', 'Rubik', sans-serif",
+      height: "20px",
+      width: "100%"
+    },
+    "& ::placeholder": {
+      color: "#87878C",
+      fontWeight: 400,
+      opacity: 1,
+      height: "20px",
+    },
+    "& .MuiInputBase-input:read-only": {
+      backgroundColor: "#E5EEF4",
+      color: "#083A50",
+      cursor: "not-allowed",
+    },
+  }
+}));
+
 /**
  * Generates a generic text input with a label and help text
  *
@@ -99,10 +123,9 @@ const TableTextInput: FC<Props> = ({
       disableTouchListener
       open={showError}
     >
-      <Input
+      <StyledInput
         inputRef={inputRef}
         sx={{ width: "100%", display: "flex", alignItems: "center" }}
-        classes={{ input: classes.input }}
         id={id}
         size="small"
         value={val}
@@ -116,29 +139,4 @@ const TableTextInput: FC<Props> = ({
   );
 };
 
-const styles = () => ({
-  input: {
-    "&.MuiInputBase-input": {
-      padding: "0px",
-      color: "#083A50",
-      fontWeight: 400,
-      fontSize: "16px",
-      fontFamily: "'Nunito', 'Rubik', sans-serif",
-      height: "20px",
-      width: "100%"
-    },
-    "&::placeholder": {
-      color: "#87878C",
-      fontWeight: 400,
-      opacity: 1,
-      height: "20px",
-    },
-    "&.MuiInputBase-input:read-only": {
-      backgroundColor: "#E5EEF4",
-      color: "#083A50",
-      cursor: "not-allowed",
-    },
-  },
-});
-
-export default withStyles(styles, { withTheme: true })(TableTextInput);
+export default TableTextInput;
diff --git a/src/components/Questionnaire/TextInput.tsx b/src/components/Questionnaire/TextInput.tsx
index b7382163..42c062a2 100644
--- a/src/components/Questionnaire/TextInput.tsx
+++ b/src/components/Questionnaire/TextInput.tsx
@@ -5,13 +5,100 @@ import {
   Grid,
   OutlinedInput,
   OutlinedInputProps,
+  styled,
 } from "@mui/material";
-import { WithStyles, withStyles } from "@mui/styles";
 import { updateInputValidity } from "../../utils";
 import Tooltip from "../Tooltip";
 
+const StyledGridWrapper = styled(Grid)(({ theme }) => ({
+  "& .MuiFormHelperText-root": {
+    color: "#083A50",
+    marginLeft: "0",
+    [theme.breakpoints.up("lg")]: {
+      whiteSpace: "nowrap",
+    },
+  },
+  "& .MuiFormHelperText-root.Mui-error": {
+    color: "#D54309 !important",
+  },
+}));
+
+const StyledFormControl = styled(FormControl)(() => ({
+  height: "100%",
+  justifyContent: "end",
+}));
+
+const StyledLabel = styled("label")(() => ({
+  fontWeight: 700,
+  fontSize: "16px",
+  lineHeight: "19.6px",
+  minHeight: "20px",
+  color: "#083A50",
+  marginBottom: "4px",
+}));
+
+const StyledAsterisk = styled("span")(() => ({
+  color: "#D54309",
+  marginLeft: "2px",
+}));
+
+const StyledHelperText = styled(FormHelperText)(() => ({
+  marginTop: "4px",
+  minHeight: "20px",
+}));
+
+const StyledOutlinedInput = styled(OutlinedInput)(() => ({
+  borderRadius: "8px",
+  backgroundColor: "#fff",
+  color: "#083A50",
+  "& .MuiInputBase-input": {
+    fontWeight: 400,
+    fontSize: "16px",
+    fontFamily: "'Nunito', 'Rubik', sans-serif",
+    lineHeight: "19.6px",
+    padding: "12px",
+    height: "20px",
+  },
+  "&.MuiInputBase-multiline": {
+    padding: "12px",
+  },
+  "&.MuiInputBase-multiline .MuiInputBase-input": {
+    lineHeight: "25px",
+    padding: 0,
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    borderColor: "#6B7294",
+  },
+  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+    border: "1px solid #209D7D",
+    boxShadow: "2px 2px 4px 0px rgba(38, 184, 147, 0.10), -1px -1px 6px 0px rgba(38, 184, 147, 0.20)",
+  },
+  "& .MuiInputBase-input::placeholder": {
+    color: "#87878C",
+    fontWeight: 400,
+    opacity: 1
+  },
+  // Override the input error border color
+  "&.Mui-error fieldset": {
+    borderColor: "#D54309 !important",
+  },
+  // Target readOnly <textarea> inputs
+  "&.MuiInputBase-multiline.Mui-readOnly": {
+    backgroundColor: "#E5EEF4",
+    color: "#083A50",
+    cursor: "not-allowed",
+    borderRadius: "8px",
+  },
+  // Target readOnly <input> inputs
+  "& .MuiOutlinedInput-input:read-only": {
+    backgroundColor: "#E5EEF4",
+    color: "#083A50",
+    cursor: "not-allowed",
+    borderRadius: "8px",
+  },
+}));
+
 type Props = {
-  classes: WithStyles<typeof styles>["classes"];
   label?: string;
   infoText?: string;
   errorText?: string;
@@ -104,18 +191,17 @@ const TextInput: FC<Props> = ({
   }, [value]);
 
   return (
-    <Grid className={classes.root} md={gridWidth || 6} xs={12} item>
-      <FormControl className={classes.formControl} fullWidth error={error}>
+    <StyledGridWrapper md={gridWidth || 6} xs={12} item>
+      <StyledFormControl fullWidth error={error}>
         {label && (
-          <label htmlFor={id} className={classes.label}>
+          <StyledLabel htmlFor={id}>
             {label}
-            {required && label ? <span className={classes.asterisk}>*</span> : ""}
+            {required && label ? <StyledAsterisk>*</StyledAsterisk> : ""}
             {tooltipText && <Tooltip placement="right" title={tooltipText} />}
-          </label>
+          </StyledLabel>
         )}
-        <OutlinedInput
+        <StyledOutlinedInput
           inputRef={inputRef}
-          classes={{ root: classes.input }}
           type={type || "text"}
           size="small"
           value={val ?? ""}
@@ -125,97 +211,12 @@ const TextInput: FC<Props> = ({
           {...rest}
           id={id}
         />
-        <FormHelperText className={classes.helperText}>
+        <StyledHelperText>
           {(!hideValidation && !readOnly && error ? errorMsg : infoText) || " "}
-        </FormHelperText>
-      </FormControl>
-    </Grid>
+        </StyledHelperText>
+      </StyledFormControl>
+    </StyledGridWrapper>
   );
 };
 
-const styles = (theme) => ({
-  root: {
-    "& .MuiFormHelperText-root": {
-      color: "#083A50",
-      marginLeft: "0",
-      [theme.breakpoints.up("lg")]: {
-        whiteSpace: "nowrap",
-      },
-    },
-    "& .MuiFormHelperText-root.Mui-error": {
-      color: "#D54309 !important",
-    },
-  },
-  formControl: {
-    height: "100%",
-    justifyContent: "end",
-  },
-  label: {
-    fontWeight: 700,
-    fontSize: "16px",
-    lineHeight: "19.6px",
-    minHeight: "20px",
-    color: "#083A50",
-    marginBottom: "4px",
-  },
-  asterisk: {
-    color: "#D54309",
-    marginLeft: "2px",
-  },
-  input: {
-    borderRadius: "8px",
-    backgroundColor: "#fff",
-    color: "#083A50",
-    "& .MuiInputBase-input": {
-      fontWeight: 400,
-      fontSize: "16px",
-      fontFamily: "'Nunito', 'Rubik', sans-serif",
-      lineHeight: "19.6px",
-      padding: "12px",
-      height: "20px",
-    },
-    "&.MuiInputBase-multiline": {
-      padding: "12px",
-    },
-    "&.MuiInputBase-multiline .MuiInputBase-input": {
-      lineHeight: "25px",
-      padding: 0,
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#6B7294",
-    },
-    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-      border: "1px solid #209D7D",
-      boxShadow: "2px 2px 4px 0px rgba(38, 184, 147, 0.10), -1px -1px 6px 0px rgba(38, 184, 147, 0.20)",
-    },
-    "& ::placeholder": {
-      color: "#87878C",
-      fontWeight: 400,
-      opacity: 1
-    },
-    // Override the input error border color
-    "&.Mui-error fieldset": {
-      borderColor: "#D54309 !important",
-    },
-    // Target readOnly <textarea> inputs
-    "&.MuiInputBase-multiline.Mui-readOnly": {
-      backgroundColor: "#E5EEF4",
-      color: "#083A50",
-      cursor: "not-allowed",
-      borderRadius: "8px",
-    },
-    // Target readOnly <input> inputs
-    "& .MuiOutlinedInput-input:read-only": {
-      backgroundColor: "#E5EEF4",
-      color: "#083A50",
-      cursor: "not-allowed",
-      borderRadius: "8px",
-    },
-  },
-  helperText: {
-    marginTop: "4px",
-    minHeight: "20px",
-  },
-});
-
-export default withStyles(styles, { withTheme: true })(TextInput);
+export default TextInput;
diff --git a/src/content/questionnaire/FormView.tsx b/src/content/questionnaire/FormView.tsx
index 883ee6d9..e3287504 100644
--- a/src/content/questionnaire/FormView.tsx
+++ b/src/content/questionnaire/FormView.tsx
@@ -6,7 +6,6 @@ import {
 import { isEqual, cloneDeep } from 'lodash';
 import { Alert, AlertColor, Button, Container, Divider, Stack, styled } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-import { WithStyles, withStyles } from "@mui/styles";
 import ForwardArrowIcon from '@mui/icons-material/ArrowForwardIos';
 import BackwardArrowIcon from '@mui/icons-material/ArrowBackIos';
 import { Status as FormStatus, useFormContext } from '../../components/Contexts/FormContext';
@@ -37,7 +36,6 @@ const StyledContainer = styled(Container)(() => ({
 
 type Props = {
   section?: string;
-  classes: WithStyles<typeof styles>['classes'];
 };
 
 const validateSection = (section: string) => typeof map[section] !== 'undefined';
@@ -67,6 +65,106 @@ const StyledAlert = styled(Alert)({
   scrollMarginTop: "64px"
 });
 
+const StyledContent = styled(Stack)({
+  width: "100%",
+  maxWidth: "980px",
+  marginLeft: '41px',
+});
+
+const StyledControls = styled(Stack)({
+  color: "#FFFFFF",
+  marginTop: "15px !important",
+  "& button": {
+    margin: "0 6px",
+    padding: "14px 11px",
+    minWidth: "128px",
+    fontWeight: 700,
+    fontSize: '16px',
+    fontFamily: "'Nunito', 'Rubik', sans-serif",
+    letterSpacing: "0.32px",
+    lineHeight: "20.14px",
+    borderRadius: "8px",
+    borderColor: "#828282",
+    background: "#737373",
+    color: "inherit",
+    textTransform: "none",
+  },
+  "& button:disabled": {
+    backgroundColor: "#CDCDCD",
+  },
+  "& button:hover:not([disabled])": {
+    color: "#fff",
+    background: "#5E5E5E",
+  },
+  "& a": {
+    color: "inherit",
+    textDecoration: "none",
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: "20px",
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: "20px"
+  },
+  "& .MuiSvgIcon-root": {
+    fontSize: "20px"
+  }
+});
+
+const StyledBackButton = styled(Button)({
+  "&.MuiButton-root": {
+    display: "flex",
+    justifyContent: "flex-start"
+  }
+});
+
+const StyledSaveLoadingButton = styled(LoadingButton)({
+  "&.MuiButton-root": {
+    borderColor: "#26B893",
+    background: "#22A584"
+  }
+});
+
+const StyledSubmitLoadingButton = styled(LoadingButton)({
+  "&.MuiButton-root": {
+    display: "flex",
+    width: "128px",
+    height: "50.593px",
+    padding: "11px",
+    justifyContent: "center",
+    alignItems: "center",
+    flexShrink: 0,
+    borderRadius: "8px",
+    border: "1px solid #828282",
+    background: "#0B7F99",
+  }
+});
+
+const StyledApproveLoadingButton = styled(LoadingButton)({
+  "&.MuiButton-root": {
+    borderColor: "#26B893",
+    background: "#22A584"
+  }
+});
+const StyledInquireLoadingButton = styled(LoadingButton)({
+  "&.MuiButton-root": {
+    borderColor: "#26B893",
+    background: "#D54309"
+  }
+});
+const StyledRejectLoadingButton = styled(LoadingButton)({
+  "&.MuiButton-root": {
+    borderColor: "#26B893",
+    background: "#D54309"
+  }
+});
+const StyledNextButton = styled(LoadingButton)({
+  "&.MuiButton-root": {
+    display: "flex",
+    justifyContent: "flex-end"
+  }
+});
+
 export type SaveForm =
   | { status: "success"; id: string }
   | { status: "failed"; errorMessage: string };
@@ -82,7 +180,7 @@ type AlertState = {
  * @param {Props} props
  * @returns {JSX.Element}
  */
-const FormView: FC<Props> = ({ section, classes } : Props) => {
+const FormView: FC<Props> = ({ section } : Props) => {
   const navigate = useNavigate();
   const { status, data, setData, submitData, approveForm, inquireForm, rejectForm, reopenForm, reviewForm, error } = useFormContext();
   const { user, status: authStatus } = useAuthContext();
@@ -627,23 +725,21 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
             <StyledDivider orientation="vertical" />
           </StyledSidebar>
 
-          <Stack className={classes.content} direction="column" spacing={5}>
+          <StyledContent direction="column" spacing={5}>
             <StatusBar />
 
             {hasError && <StyledAlert ref={errorAlertRef} severity="error">Oops! An error occurred. Please refresh the page or try again later.</StyledAlert>}
 
             <Section section={activeSection} refs={refs} />
 
-            <Stack
-              className={classes.controls}
+            <StyledControls
               direction="row"
               justifyContent="center"
               alignItems="center"
               spacing={2}
             >
-              <Button
+              <StyledBackButton
                 id="submission-form-back-button"
-                className={classes.backButton}
                 variant="outlined"
                 type="button"
                 disabled={status === FormStatus.SAVING || !prevSection}
@@ -652,10 +748,9 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
                 startIcon={<BackwardArrowIcon />}
               >
                 Back
-              </Button>
-              <LoadingButton
+              </StyledBackButton>
+              <StyledSaveLoadingButton
                 id="submission-form-save-button"
-                className={classes.saveButton}
                 variant="outlined"
                 type="button"
                 ref={refs.saveFormRef}
@@ -665,10 +760,9 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
                 sx={{ display: readOnlyInputs ? "none !important" : "initial" }}
               >
                 Save
-              </LoadingButton>
-              <LoadingButton
+              </StyledSaveLoadingButton>
+              <StyledSubmitLoadingButton
                 id="submission-form-submit-button"
-                className={classes.submitButton}
                 variant="outlined"
                 type="submit"
                 ref={refs.submitFormRef}
@@ -677,40 +771,36 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
                 sx={{ display: readOnlyInputs ? "none !important" : "initial" }}
               >
                 Submit
-              </LoadingButton>
-              <LoadingButton
+              </StyledSubmitLoadingButton>
+              <StyledApproveLoadingButton
                 id="submission-form-approve-button"
-                className={classes.approveButton}
                 variant="outlined"
                 ref={refs.approveFormRef}
                 size="large"
                 onClick={handleApproveForm}
               >
                 Approve
-              </LoadingButton>
-              <LoadingButton
+              </StyledApproveLoadingButton>
+              <StyledInquireLoadingButton
                 id="submission-form-inquire-button"
-                className={classes.inquireButton}
                 variant="outlined"
                 ref={refs.inquireFormRef}
                 size="large"
                 onClick={handleInquireForm}
               >
                 Request Additional Information
-              </LoadingButton>
-              <LoadingButton
+              </StyledInquireLoadingButton>
+              <StyledRejectLoadingButton
                 id="submission-form-reject-button"
-                className={classes.rejectButton}
                 variant="outlined"
                 ref={refs.rejectFormRef}
                 size="large"
                 onClick={handleRejectForm}
               >
                 Reject
-              </LoadingButton>
-              <Button
+              </StyledRejectLoadingButton>
+              <StyledNextButton
                 id="submission-form-next-button"
-                className={classes.nextButton}
                 variant="outlined"
                 type="button"
                 ref={refs.nextButtonRef}
@@ -720,9 +810,9 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
                 endIcon={<ForwardArrowIcon />}
               >
                 Next
-              </Button>
-            </Stack>
-          </Stack>
+              </StyledNextButton>
+            </StyledControls>
+          </StyledContent>
         </StyledContentWrapper>
       </StyledContainer>
 
@@ -758,106 +848,4 @@ const FormView: FC<Props> = ({ section, classes } : Props) => {
   );
 };
 
-const styles = () => ({
-  header: {
-    width: "100%",
-    height: "300px",
-    background: "#F2F4F8",
-  },
-  content: {
-    width: "100%",
-    maxWidth: "980px",
-    marginLeft: '41px',
-  },
-  controls: {
-    color: "#FFFFFF",
-    marginTop: "15px !important",
-    "& button": {
-      margin: "0 6px",
-      padding: "14px 11px",
-      minWidth: "128px",
-      fontWeight: 700,
-      fontSize: '16px',
-      fontFamily: "'Nunito', 'Rubik', sans-serif",
-      letterSpacing: "0.32px",
-      lineHeight: "20.14px",
-      borderRadius: "8px",
-      borderColor: "#828282",
-      background: "#737373",
-      color: "inherit",
-      textTransform: "none",
-    },
-    "& button:disabled": {
-      backgroundColor: "#CDCDCD",
-    },
-    "& button:hover:not([disabled])": {
-      color: "#fff",
-      background: "#5E5E5E",
-    },
-    "& a": {
-      color: "inherit",
-      textDecoration: "none",
-    },
-    "& .MuiButton-startIcon": {
-      marginRight: "20px",
-    },
-    "& .MuiButton-endIcon": {
-      marginLeft: "20px"
-    },
-    "& .MuiSvgIcon-root": {
-      fontSize: "20px"
-    }
-  },
-  backButton: {
-    "&.MuiButton-root": {
-      display: "flex",
-      justifyContent: "flex-start"
-    }
-  },
-  nextButton: {
-    "&.MuiButton-root": {
-      display: "flex",
-      justifyContent: "flex-end"
-    }
-  },
-  saveButton: {
-    "&.MuiButton-root": {
-      borderColor: "#26B893",
-      background: "#22A584"
-    }
-  },
-  approveButton: {
-    "&.MuiButton-root": {
-      borderColor: "#26B893",
-      background: "#22A584"
-    }
-  },
-  inquireButton: {
-    "&.MuiButton-root": {
-      borderColor: "#26B893",
-      background: "#D54309"
-    }
-  },
-  rejectButton: {
-    "&.MuiButton-root": {
-      borderColor: "#26B893",
-      background: "#D54309"
-    }
-  },
-  submitButton: {
-    "&.MuiButton-root": {
-      display: "flex",
-      width: "128px",
-      height: "50.593px",
-      padding: "11px",
-      justifyContent: "center",
-      alignItems: "center",
-      flexShrink: 0,
-      borderRadius: "8px",
-      border: "1px solid #828282",
-      background: "#0B7F99",
-    }
-  },
-});
-
-export default withStyles(styles)(FormView);
+export default FormView;
diff --git a/src/content/questionnaire/sections/D.tsx b/src/content/questionnaire/sections/D.tsx
index 6320f9d7..420eec61 100644
--- a/src/content/questionnaire/sections/D.tsx
+++ b/src/content/questionnaire/sections/D.tsx
@@ -35,7 +35,7 @@ const TableContainer = styled.div`
     overflow: hidden;
     .readOnly {
       background-color: #E5EEF4;
-      color: "#083A50";
+      color: #083A50;
       cursor: not-allowed;
     }
     .MuiTableContainer-root {

From 3f6088b53e2c6337ed45a1a140d9e6f1ed686d69 Mon Sep 17 00:00:00 2001
From: Alejandro-Vega <vegaalejandro15@gmail.com>
Date: Thu, 7 Dec 2023 17:41:01 -0500
Subject: [PATCH 2/3] Removed styled-components dep, also updated all styling
 to use styled from MUI instead

---
 package-lock.json                             | 168 -----
 package.json                                  |   1 -
 src/components/DataSubmissions/RadioInput.tsx | 134 ++--
 src/components/Footer/FooterDesktop.tsx       | 418 ++++++------
 src/components/Footer/FooterMobile.tsx        | 529 +++++++--------
 src/components/Footer/FooterTablet.tsx        | 443 ++++++------
 src/components/Header/HeaderDesktop.tsx       |  30 +-
 .../Header/HeaderTabletAndMobile.tsx          | 279 ++++----
 src/components/Header/USABanner.tsx           |  66 +-
 .../Header/components/LogoDesktop.tsx         |  33 +-
 .../Header/components/LogoMobile.tsx          |  18 +-
 .../Header/components/LogoTablet.tsx          |  19 +-
 .../Header/components/NavbarDesktop.tsx       | 631 ++++++++----------
 .../InactivityDialog/InactivityDialog.tsx     | 217 +++---
 .../Questionnaire/RadioYesNoInput.tsx         | 110 +--
 .../Questionnaire/ReviewFileTypeTable.tsx     |   4 +-
 src/components/Questionnaire/SwitchInput.tsx  | 246 +++----
 src/content/index.tsx                         | 230 ++++---
 src/content/questionnaire/FormView.tsx        | 159 +++--
 src/content/questionnaire/sections/D.tsx      | 220 +++---
 20 files changed, 1825 insertions(+), 2130 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 16032900..573bad26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,6 @@
         "redux": "^4.2.1",
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.4.2",
-        "styled-components": "^6.0.0-rc.3",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -149,72 +148,6 @@
         "requestidlecallback": "^0.3.0"
       }
     },
-    "node_modules/@babel/cli": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "commander": "^4.0.1",
-        "convert-source-map": "^1.1.0",
-        "fs-readdir-recursive": "^1.1.0",
-        "glob": "^7.2.0",
-        "make-dir": "^2.1.0",
-        "slash": "^2.0.0"
-      },
-      "bin": {
-        "babel": "bin/babel.js",
-        "babel-external-helpers": "bin/babel-external-helpers.js"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "optionalDependencies": {
-        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
-        "chokidar": "^3.4.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/cli/node_modules/commander": {
-      "version": "4.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@babel/cli/node_modules/make-dir": {
-      "version": "2.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@babel/cli/node_modules/pify": {
-      "version": "4.0.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@babel/cli/node_modules/semver": {
-      "version": "5.7.1",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/@babel/cli/node_modules/slash": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.21.4",
       "license": "MIT",
@@ -722,19 +655,6 @@
         "@babel/core": "^7.13.0"
       }
     },
-    "node_modules/@babel/plugin-external-helpers": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-class-properties": {
       "version": "7.18.6",
       "license": "MIT",
@@ -794,23 +714,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.20.7",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.20.5",
-        "@babel/helper-compilation-targets": "^7.20.7",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.20.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-optional-chaining": {
       "version": "7.21.0",
       "license": "MIT",
@@ -3798,11 +3701,6 @@
         }
       }
     },
-    "node_modules/@nicolo-ribaudo/chokidar-2": {
-      "version": "2.1.8-no-fsevents.3",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "license": "MIT",
@@ -6744,13 +6642,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "license": "MIT",
@@ -7291,13 +7182,6 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.0",
       "license": "ISC",
@@ -7457,15 +7341,6 @@
       "version": "0.1.1",
       "license": "MIT"
     },
-    "node_modules/css-to-react-native": {
-      "version": "3.2.0",
-      "license": "MIT",
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "license": "MIT",
@@ -9705,10 +9580,6 @@
       "version": "1.0.4",
       "license": "Unlicense"
     },
-    "node_modules/fs-readdir-recursive": {
-      "version": "1.1.0",
-      "license": "MIT"
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "license": "ISC"
@@ -16852,45 +16723,6 @@
         "inline-style-parser": "0.1.1"
       }
     },
-    "node_modules/styled-components": {
-      "version": "6.0.0-rc.3",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.0",
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/plugin-external-helpers": "^7.18.6",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@babel/traverse": "^7.21.2",
-        "@emotion/unitless": "^0.8.0",
-        "css-to-react-native": "^3.2.0",
-        "postcss": "^8.4.23",
-        "shallowequal": "^1.1.0",
-        "stylis": "^4.2.0",
-        "tslib": "^2.5.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/styled-components"
-      },
-      "peerDependencies": {
-        "babel-plugin-styled-components": ">= 2",
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "babel-plugin-styled-components": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "license": "MIT",
diff --git a/package.json b/package.json
index bf22a0fd..06e8cbe7 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
-    "styled-components": "^6.0.0-rc.3",
     "web-vitals": "^2.1.4"
   },
   "overrides": {
diff --git a/src/components/DataSubmissions/RadioInput.tsx b/src/components/DataSubmissions/RadioInput.tsx
index 062cee4c..cce79839 100644
--- a/src/components/DataSubmissions/RadioInput.tsx
+++ b/src/components/DataSubmissions/RadioInput.tsx
@@ -1,59 +1,73 @@
-import React, { FC, useState, useRef, useEffect } from 'react';
-import { Grid, FormControl, FormControlLabel, Radio, RadioGroup, RadioProps, RadioGroupProps, FormHelperText, Stack } from '@mui/material';
-import styled from "styled-components";
-import { updateInputValidity } from '../../utils';
-
-const GridStyled = styled(Grid)<{ $containerWidth?: string; }>`
-  width: ${(props) => props.$containerWidth};
-  .formControl{
-    margin-top: 8px;
-    margin-bottom: 4px;
-  }
-  .css-hsm3ra-MuiFormLabel-root {
-    color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .MuiRadio-root {
-    color: #1D91AB !important;
-    margin-left: 10px;
-    padding-right: 7px;
-  }
-  #invisibleRadioInput {
-    height: 0;
-    border: none;
-    width: 0;
-  }
-  .MuiFormHelperText-root {
-    color: #083A50;
-    margin-left: 0;
-  }
-  .MuiFormHelperText-root.Mui-error {
-    color: #D54309 !important;
-  }
-  .displayNone {
-    display: none !important;
-  }
-`;
-
-const BpIcon = styled('span')(() => ({
-  borderRadius: '50%',
+import React, { FC, useState, useRef, useEffect } from "react";
+import {
+  Grid,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  RadioProps,
+  RadioGroupProps,
+  FormHelperText,
+  Stack,
+  styled,
+  GridProps,
+} from "@mui/material";
+import { updateInputValidity } from "../../utils";
+
+const GridStyled = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== "containerWidth",
+})<GridProps & { containerWidth?: string }>(({ containerWidth }) => ({
+  width: containerWidth,
+  "& .formControl": {
+    marginTop: "8px",
+    marginBottom: "4px",
+  },
+  "& .css-hsm3ra-MuiFormLabel-root": {
+    color: "rgba(0, 0, 0, 0.6) !important",
+  },
+  "& .MuiRadio-root": {
+    color: "#1D91AB !important",
+    marginLeft: "10px",
+    paddingRight: "7px",
+  },
+  "& #invisibleRadioInput": {
+    height: 0,
+    border: "none",
+    width: 0,
+  },
+  "& .MuiFormHelperText-root": {
+    color: "#083A50",
+    marginLeft: 0,
+  },
+  "& .MuiFormHelperText-root.Mui-error": {
+    color: "#D54309 !important",
+  },
+  "& .displayNone": {
+    display: "none !important",
+  },
+}));
+
+const BpIcon = styled("span")(() => ({
+  borderRadius: "50%",
   width: 24,
   height: 24,
-  outline: '6px auto #1D91AB',
-  'input:hover ~ &': {
+  outline: "6px auto #1D91AB",
+  "input:hover ~ &": {
     outlineOffset: "2px",
   },
 }));
 
 const BpCheckedIcon = styled(BpIcon)({
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  backgroundImage:
+    "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
+  "&:before": {
     borderRadius: "50%",
-    display: 'block',
+    display: "block",
     marginTop: "4px",
     marginLeft: "4px",
     width: 16,
     height: 16,
-    backgroundImage: 'radial-gradient(#1D91AB, #1D91AB)',
+    backgroundImage: "radial-gradient(#1D91AB, #1D91AB)",
     content: '""',
   },
 });
@@ -77,13 +91,13 @@ const StyledRadio = styled(Radio)((props) => ({
   },
   "& .radio-icon": {
     backgroundColor: props.readOnly ? "#D2DFE9 !important" : "initial",
-  }
+  },
 }));
 
 const StyledFormControlLabel = styled(FormControlLabel)(() => ({
   "&.MuiFormControlLabel-root": {
     paddingRight: "10px",
-    marginRight: "2px"
+    marginRight: "2px",
   },
   "& .MuiFormControlLabel-label": {
     color: "#083A50",
@@ -92,7 +106,7 @@ const StyledFormControlLabel = styled(FormControlLabel)(() => ({
     fontStyle: "normal",
     fontWeight: 500,
     lineHeight: "19.6px",
-  }
+  },
 }));
 
 // Inspired by blueprintjs
@@ -102,9 +116,11 @@ const BpRadio = (props: RadioProps) => (
     color="default"
     checkedIcon={<BpCheckedIcon className="radio-icon" />}
     icon={<BpIcon className="radio-icon" />}
-    inputProps={{
-        "data-type": "auto"
-      } as unknown}
+    inputProps={
+      {
+        "data-type": "auto",
+      } as unknown
+    }
     {...props}
   />
 );
@@ -143,7 +159,11 @@ const RadioYesNoInput: FC<Props> = ({
   readOnly,
   ...rest
 }) => {
-  const [val, setVal] = useState<string>((value?.toString() === "" || value?.toString() === undefined) ? null : value?.toString());
+  const [val, setVal] = useState<string>(
+    value?.toString() === "" || value?.toString() === undefined
+      ? null
+      : value?.toString()
+  );
   const [error, setError] = useState(false);
   const radioGroupInputRef = useRef<HTMLInputElement>(null);
 
@@ -178,9 +198,17 @@ const RadioYesNoInput: FC<Props> = ({
   }, [value]);
 
   return (
-    <GridStyled md={gridWidth || 6} xs={12} item $containerWidth={containerWidth}>
+    <GridStyled
+      md={gridWidth || 6}
+      xs={12}
+      item
+      containerWidth={containerWidth}
+    >
       <FormControl className="formControl" error={error}>
-        <Stack direction={inline ? "row" : "column"} alignItems={inline ? "center" : "initial"}>
+        <Stack
+          direction={inline ? "row" : "column"}
+          alignItems={inline ? "center" : "initial"}
+        >
           <StyledFormLabel>
             {label}
             {required ? <StyledAsterisk>*</StyledAsterisk> : ""}
diff --git a/src/components/Footer/FooterDesktop.tsx b/src/components/Footer/FooterDesktop.tsx
index ea468e31..73d1f563 100644
--- a/src/components/Footer/FooterDesktop.tsx
+++ b/src/components/Footer/FooterDesktop.tsx
@@ -1,226 +1,198 @@
-import React, { useState, useRef } from 'react';
-import styled from 'styled-components';
-import FooterData from '../../config/globalFooterData';
-
-const FooterStyled = styled.div`
-  background-color: #1B496E;
-  border-top: 1px solid #6C727B;
-  bottom: 0;
-  width: 100%;
-  z-index: 10;
-  position: relative;
-`;
-
-const FooterContainer = styled.div`
-  padding: 2rem 2rem 2rem 2rem;
-  max-width: 1400px;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: space-between;
-
-`;
-
-const FooterEmailSignupContainer = styled.form`
-  width: 33.3%;
-  .signUpTitle {
-    font-family: poppins;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    color: #FFFFFF;
-    margin-bottom: 1rem;
-  }
-
-  .enterTitle {
-    font-family: Open Sans;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    color: #FFFFFF;
-    margin-bottom: 10px;
-  }
-
-  .signUpInputBox {
-    width: 100%;
-    height: 47px;
-    font-size: 25px;
-    padding-left: 8px;
-    margin-top: 4px;
-  }
-
-  .signUpInputBox:focus {
-    outline: 0.25rem solid #2491ff;
-  }
-
-  .signUpButton {
-    background: #FACE00;
-    border-radius: 8px;
-    border: 0;
-    padding: 9px 16px;
-    font-family: Open Sans;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    color: #14315C;
-    margin-top: 18px;
-  }
-
-  .signUpButton:hover {
-    cursor: pointer;
-  }
-
-`;
-
-const FooterLinksContainer = styled.div`
-  width: 66.7%;
-  display: flex;
-  display: grid;
-  grid-template-columns: 33% 33% 33%;
-
-  .footItem {
-    /* padding: 0 16px 32px 16px; */
-    margin-bottom: 24px;
-  }
-
-  .footItemTitle {
-    font-family: Open Sans;
-    color: #FFFFFF;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    margin-bottom: 10px;
-  }
-
-  .footItemSubtitle {
-    margin-bottom: 10px;
-    max-width: 290px;
-  }
-
-  .footItemLink {
-    font-family: Open Sans;
-    color: #FFFFFF;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    text-decoration: none;
-  }
-
-  .footItemLink:hover {
-    text-decoration: underline;
-  }
-`;
-
-const BottomFooter = styled.div`
- background: #14315C;
-
-  span {
-    display: block;
-  }
-
-  .bottom-footer-container {
-    display: flex;
-    flex-flow: wrap;
-    justify-content: space-between;
-    max-width: 1400px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
-  .break {
-    order: 2;
-    width: 100%;
-    flex-basis: 100%;
-    height: 2rem;
-    margin: 0;
-    border: 0;
-  }
-
-  .logoText {
-    text-decoration: none;
-  }
-
-  .logoUpperText {
-    font-family: poppins;
-    font-weight: 700;
-    font-size: 24.96px;
-    line-height: 37px;
-    color: #FFFFFF;
-  }
-
-  .logoLowerText {
-    font-family: poppins;
-    font-weight: 400;
-    font-size: 18.72px;
-    color: #FFFFFF;
-  }
-
-  #bottom-footer-contact-us {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    text-align: right;
-    color: #FFFFFF;
-    order: 1;
-  }
-
-  #bottom-footer-contact-links {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    color: #FFFFFF;
-    margin-top: 0.25rem;
-  }
-
-  #bottom-footer-contact-links a {
-    text-decoration: none;
-    color: #FFFFFF;
-    margin-left: 1rem;
-  }
-
-  #bottom-footer-follow-us {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    color: #FFFFFF;
-    order: 3;
-  }
-
-  #bottom-footer-follow-us-links {
-    margin-top: 1rem;
-  }
-
-  .bottom-footer-social-media-imgs {
-    margin-left: 10px;
-  }
-
-  #bottom-footer-gov-links {
-    order: 4;
-  }
-
-  #bottom-footer-gov-links a {
-    text-decoration: none;
-    display: block;
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.6;
-    text-align: right;
-    color: #FFFFFF;
-  }
-`;
+import React, { useState, useRef } from "react";
+import { styled } from "@mui/material";
+import FooterData from "../../config/globalFooterData";
+
+const FooterStyled = styled("div")({
+  backgroundColor: "#1B496E",
+  borderTop: "1px solid #6C727B",
+  bottom: 0,
+  width: "100%",
+  zIndex: 10,
+  position: "relative",
+});
+
+const FooterContainer = styled("div")({
+  padding: "2rem",
+  maxWidth: "1400px",
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "flex",
+  justifyContent: "space-between",
+});
+
+const FooterEmailSignupContainer = styled("form")({
+  width: "33.3%",
+  "& .signUpTitle": {
+    fontFamily: "poppins",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    color: "#FFFFFF",
+    marginBottom: "1rem",
+  },
+  "& .enterTitle": {
+    fontFamily: "Open Sans",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#FFFFFF",
+    marginBottom: "10px",
+  },
+  "& .signUpInputBox": {
+    width: "100%",
+    height: "47px",
+    fontSize: "25px",
+    paddingLeft: "8px",
+    marginTop: "4px",
+    "&:focus": {
+      outline: "0.25rem solid #2491ff",
+    },
+  },
+  "& .signUpButton": {
+    background: "#FACE00",
+    borderRadius: "8px",
+    border: 0,
+    padding: "9px 16px",
+    fontFamily: "Open Sans",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#14315C",
+    marginTop: "18px",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+});
+
+const FooterLinksContainer = styled("div")({
+  width: "66.7%",
+  display: "grid",
+  gridTemplateColumns: "repeat(3, 33%)",
+  "& .footItem": {
+    marginBottom: "24px",
+  },
+  "& .footItemTitle": {
+    fontFamily: "Open Sans",
+    color: "#FFFFFF",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "22px",
+    marginBottom: "10px",
+  },
+  "& .footItemSubtitle": {
+    marginBottom: "10px",
+    maxWidth: "290px",
+  },
+  "& .footItemLink": {
+    fontFamily: "Open Sans",
+    color: "#FFFFFF",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+});
+
+const BottomFooter = styled("div")({
+  background: "#14315C",
+  "& span": {
+    display: "block",
+  },
+  "& .bottom-footer-container": {
+    display: "flex",
+    flexFlow: "wrap",
+    justifyContent: "space-between",
+    maxWidth: "1400px",
+    marginLeft: "auto",
+    marginRight: "auto",
+    height: "fit-content",
+    paddingTop: "1.25rem",
+    paddingBottom: "1.25rem",
+    paddingLeft: "2rem",
+    paddingRight: "2rem",
+  },
+  "& .break": {
+    order: 2,
+    width: "100%",
+    flexBasis: "100%",
+    height: "2rem",
+    margin: 0,
+    border: 0,
+  },
+  "& .logoText": {
+    textDecoration: "none",
+  },
+  "& .logoUpperText": {
+    fontFamily: "poppins",
+    fontWeight: 700,
+    fontSize: "24.96px",
+    lineHeight: "37px",
+    color: "#FFFFFF",
+  },
+  "& .logoLowerText": {
+    fontFamily: "poppins",
+    fontWeight: 400,
+    fontSize: "18.72px",
+    color: "#FFFFFF",
+  },
+  "& #bottom-footer-contact-us": {
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    textAlign: "right",
+    color: "#FFFFFF",
+    order: 1,
+  },
+  "& #bottom-footer-contact-links": {
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#FFFFFF",
+    marginTop: "0.25rem",
+    "& a": {
+      textDecoration: "none",
+      color: "#FFFFFF",
+      marginLeft: "1rem",
+    },
+  },
+  "& #bottom-footer-follow-us": {
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    color: "#FFFFFF",
+    order: 3,
+  },
+  "& #bottom-footer-follow-us-links": {
+    marginTop: "1rem",
+  },
+  "& .bottom-footer-social-media-imgs": {
+    marginLeft: "10px",
+  },
+  "& #bottom-footer-gov-links": {
+    order: 4,
+  },
+  "& #bottom-footer-gov-links a": {
+    textDecoration: "none",
+    display: "block",
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "1.6",
+    textAlign: "right",
+    color: "#FFFFFF",
+  },
+});
 
 const FooterDesktop = () => {
   const [emailContent, setEmailContent] = useState("");
diff --git a/src/components/Footer/FooterMobile.tsx b/src/components/Footer/FooterMobile.tsx
index cfbea842..fa2c8aa9 100644
--- a/src/components/Footer/FooterMobile.tsx
+++ b/src/components/Footer/FooterMobile.tsx
@@ -1,287 +1,248 @@
-import React, { useState, useRef } from 'react';
-import styled from 'styled-components';
-import FooterData from '../../config/globalFooterData';
-
-const FooterStyled = styled.footer`
-  background-color: #1B496E;
-  bottom: 0;
-  width: 100%;
-  z-index: 10;
-  position: relative;
-`;
-
-const FooterContainer = styled.div`
-  max-width: 1420px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-`;
-
-const FooterEmailSignupContainer = styled.form`
-  padding: 1rem 1rem 2rem 1rem;
-  .signUpTitle {
-    font-family: poppins;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    color: #FFFFFF;
-    margin-bottom: 1rem;
-  }
-
-  .enterTitle {
-    font-family: Open Sans;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    color: #FFFFFF;
-    margin-bottom: 10px;
-  }
-
-  .signUpInputBox {
-    width: 100%;
-    height: 47px;
-    font-size: 25px;
-    padding-left: 8px;
-    margin-top: 4px;
-  }
-
-  .signUpInputBox:focus {
-    outline: 0.25rem solid #2491ff;
-  }
-
-  .signUpButton {
-    width:100%;
-    background: #FACE00;
-    border-radius: 8px;
-    border: 0;
-    padding: 9px 16px;
-    font-family: Open Sans;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    color: #14315C;
-    margin-top: 18px;
-  }
-
-  .signUpButton:hover {
-    cursor: pointer;
-  }
-
-`;
-
-const FooterLinksContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  .footItem {
-    width: 253px;
-  }
-
-  .footItemTitle {
-    font-family: Open Sans;
-    color: #FFFFFF;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    margin-bottom: 10px;
-  }
-
-  .footItemSubtitle {
-    margin-bottom: 10px;
-    max-width: 290px;
-  }
-
-  .footItemLink {
-    font-family: Open Sans;
-    color: #FFFFFF;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    text-decoration: none;
-  }
-
-  .footItemLink:hover {
-    text-decoration: underline;
-  }
-
-  .dropbtn {
-    display:flex;
-    flex-direction: row;
-    vertical-align: middle;
-    text-align: left;
-    background-color: #1B496E;
-    width: 100%;
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 20px;
-    color: #FFFFFF;
-    padding: 1rem 0.5rem 1rem 0.5rem;
-    font-size: 16px;
-    border: none;
-    cursor: pointer;
-  }
-
-  .dropdown {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px solid black;
-  }
-
-  .dropdown-content {
-    display: none;
-    z-index: 1;
-  }
-
-  .dropdown-content a {
-    color: white;
-    padding: 0 0 1rem 1rem;
-    text-decoration: none;
-    display: block;
-    width: fit-content;
-  }
-
-
-  .show {
-    display:block;
-  }
-
-  .arrow {
-    margin-right: 0.25rem;
-  }
-  .rotate{
-    transform: rotate(90deg);
-  }
-`;
-
-const BottomFooter = styled.div`
- background: #14315C;
-
-  span {
-    display: block;
-  }
-
-  .bottom-footer-container {
-    display: flex;
-    flex-flow: wrap;
-    flex-direction: column;
-    justify-content: space-between;
-    max-width: 1420px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
-    padding-left: 1rem;
-  }
-
-  .break {
-    order: 2;
-    width: 100%;
-    flex-basis: 100%;
-    height: 2rem;
-    margin: 0;
-    border: 0;
-    display: none;
-  }
-
-  .logoText {
-    text-decoration: none;
-    white-space: nowrap;
-  }
-
-  .logoUpperText {
-    font-family: poppins;
-    font-weight: 700;
-    font-size: 24.96px;
-    line-height: 37px;
-    color: #FFFFFF;
-  }
-
-  .logoLowerText {
-    font-family: poppins;
-    font-weight: 400;
-    font-size: 18.72px;
-    color: #FFFFFF;
-  }
-
-  #bottom-footer-contact-us {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    text-align: left;
-    color: #FFFFFF;
-    order: 1;
-    margin-top: 1.5rem;
-  }
-
-  #bottom-footer-contact-links {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 1.6;
-    color: #FFFFFF;
-    margin-top: 0.25rem;
-  }
-
-  #bottom-footer-contact-links a {
-    text-decoration: none;
-    color: #FFFFFF;
-    display: block;
-    margin-left: 0px;
-    margin-right: 10px;
-    line-break: anywhere;
-  }
-
-
-  #bottom-footer-follow-us {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    color: #FFFFFF;
-    order: 3;
-    margin-top: 1rem;
-  }
-
-  #bottom-footer-follow-us-links {
-    margin-top: 1rem;
-  }
-
-  .bottom-footer-social-media-imgs {
-    margin-left: 10px;
-  }
-
-  #bottom-footer-gov-links {
-    order: 4;
-  }
-
-  #bottom-footer-gov-links a {
-    text-decoration: none;
-    display: block;
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.6;
-    text-align: left;
-    color: #FFFFFF;
-  }
-
-  #bottom-footer-follow-us-links {
-        margin-top: 0.75rem;
-  }
-
-  #bottom-footer-gov-links {
-      margin-right: 0px;
-      margin-top: 0.75rem;
-  }
-`;
+import React, { useState, useRef } from "react";
+import { styled } from "@mui/material";
+import FooterData from "../../config/globalFooterData";
+
+const FooterStyled = styled("footer")({
+  backgroundColor: "#1B496E",
+  bottom: 0,
+  width: "100%",
+  zIndex: 10,
+  position: "relative",
+});
+
+const FooterContainer = styled("div")({
+  maxWidth: "1420px",
+  margin: "0 auto",
+  display: "flex",
+  justifyContent: "space-between",
+  flexDirection: "column",
+});
+
+const FooterEmailSignupContainer = styled("form")({
+  padding: "1rem 1rem 2rem 1rem",
+  "& .signUpTitle": {
+    fontFamily: "poppins",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    color: "#FFFFFF",
+    marginBottom: "1rem",
+  },
+  "& .enterTitle": {
+    fontFamily: "Open Sans",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#FFFFFF",
+    marginBottom: "10px",
+  },
+  "& .signUpInputBox": {
+    width: "100%",
+    height: "47px",
+    fontSize: "25px",
+    paddingLeft: "8px",
+    marginTop: "4px",
+    "&:focus": {
+      outline: "0.25rem solid #2491ff",
+    },
+  },
+  "& .signUpButton": {
+    width: "100%",
+    background: "#FACE00",
+    borderRadius: "8px",
+    border: 0,
+    padding: "9px 16px",
+    fontFamily: "Open Sans",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#14315C",
+    marginTop: "18px",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+});
+
+const FooterLinksContainer = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  "& .footItem": {
+    width: "253px",
+  },
+  "& .footItemTitle": {
+    fontFamily: "Open Sans",
+    color: "#FFFFFF",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "22px",
+    marginBottom: "10px",
+  },
+  "& .footItemSubtitle": {
+    marginBottom: "10px",
+    maxWidth: "290px",
+  },
+  "& .footItemLink": {
+    fontFamily: "Open Sans",
+    color: "#FFFFFF",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+  "& .dropbtn": {
+    display: "flex",
+    flexDirection: "row",
+    verticalAlign: "middle",
+    textAlign: "left",
+    backgroundColor: "#1B496E",
+    width: "100%",
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "20px",
+    color: "#FFFFFF",
+    padding: "1rem 0.5rem",
+    border: "none",
+    cursor: "pointer",
+  },
+  "& .dropdown": {
+    position: "relative",
+    display: "inline-block",
+    borderBottom: "1px solid black",
+  },
+  "& .dropdown-content": {
+    display: "none",
+    zIndex: 1,
+  },
+  "& .dropdown-content a": {
+    color: "white",
+    padding: "0 0 1rem 1rem",
+    textDecoration: "none",
+    display: "block",
+    width: "fit-content",
+  },
+  "& .show": {
+    display: "block",
+  },
+  "& .arrow": {
+    marginRight: "0.25rem",
+  },
+  "& .rotate": {
+    transform: "rotate(90deg)",
+  },
+});
+
+const BottomFooter = styled("div")({
+  background: "#14315C",
+  "& span": {
+    display: "block",
+  },
+  "& .bottom-footer-container": {
+    display: "flex",
+    flexFlow: "wrap",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    maxWidth: "1420px",
+    marginLeft: "auto",
+    marginRight: "auto",
+    height: "fit-content",
+    paddingTop: "1.25rem",
+    paddingBottom: "1.25rem",
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+  },
+  "& .break": {
+    order: 2,
+    width: "100%",
+    flexBasis: "100%",
+    height: "2rem",
+    margin: 0,
+    border: 0,
+    display: "none",
+  },
+  "& .logoText": {
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+  },
+  "& .logoUpperText": {
+    fontFamily: "poppins",
+    fontWeight: 700,
+    fontSize: "24.96px",
+    lineHeight: "37px",
+    color: "#FFFFFF",
+  },
+  "& .logoLowerText": {
+    fontFamily: "poppins",
+    fontWeight: 400,
+    fontSize: "18.72px",
+    color: "#FFFFFF",
+  },
+  "& #bottom-footer-contact-us": {
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    textAlign: "left",
+    color: "#FFFFFF",
+    order: 1,
+    marginTop: "1.5rem",
+  },
+  "& #bottom-footer-contact-links": {
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: "#FFFFFF",
+    marginTop: "0.25rem",
+    "& a": {
+      textDecoration: "none",
+      color: "#FFFFFF",
+      display: "block",
+      marginLeft: "0px",
+      marginRight: "10px",
+      lineBreak: "anywhere",
+    },
+  },
+  "& #bottom-footer-follow-us": {
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    color: "#FFFFFF",
+    order: 3,
+    marginTop: "1rem",
+  },
+  "& #bottom-footer-follow-us-links": {
+    marginTop: "0.75rem",
+  },
+  "& .bottom-footer-social-media-imgs": {
+    marginLeft: "10px",
+  },
+  "& #bottom-footer-gov-links": {
+    order: 4,
+    marginRight: "0px",
+    marginTop: "0.75rem",
+    "& a": {
+      textDecoration: "none",
+      display: "block",
+      fontFamily: "Open Sans",
+      fontStyle: "normal",
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: "1.6",
+      textAlign: "left",
+      color: "#FFFFFF",
+    },
+  },
+});
 
 const FooterMobile = () => {
   const [emailContent, setEmailContent] = useState("");
diff --git a/src/components/Footer/FooterTablet.tsx b/src/components/Footer/FooterTablet.tsx
index 512a9fd1..9d5855df 100644
--- a/src/components/Footer/FooterTablet.tsx
+++ b/src/components/Footer/FooterTablet.tsx
@@ -1,241 +1,208 @@
-import React, { useState, useRef } from 'react';
-import styled from 'styled-components';
-import FooterData from '../../config/globalFooterData';
-
-const FooterStyled = styled.footer`
-  background-color: #1B496E;
-  border-top: 1px solid #6C727B;
-  bottom: 0;
-  width: 100%;
-  z-index: 10;
-  position: relative;
-`;
-
-const FooterContainer = styled.div`
-  padding: 2rem 1rem 0 1rem;
-  max-width: 1420px;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: space-between;
-
-`;
-
-const FooterEmailSignupContainer = styled.form`
-  width: 33.3%;
-  .signUpTitle {
-    font-family: poppins;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    color: #FFFFFF;
-    margin-bottom: 1rem;
-  }
-
-  .enterTitle {
-    font-family: Open Sans;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    color: #FFFFFF;
-    margin-bottom: 10px;
-  }
-
-  .signUpInputBox {
-    width: 100%;
-    height: 47px;
-    font-size: 25px;
-    padding-left: 8px;
-    margin-top: 4px;
-  }
-
-  .signUpInputBox:focus {
-    outline: 0.25rem solid #2491ff;
-  }
-
-  .signUpButton {
-    background: #FACE00;
-    border-radius: 8px;
-    border: 0;
-    padding: 9px 16px;
-    font-family: Open Sans;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    color: #14315C;
-    margin-top: 18px;
-  }
-
-  .signUpButton:hover {
-    cursor: pointer;
-  }
-`;
-
-const FooterLinksContainer = styled.div`
-  width: 66.7%;
-  display: grid;
-  grid-column-gap: 4%;
-  grid-template-columns: 46% 46%;
-
-  .footItem {
-    padding-bottom: 32px;
-    margin-bottom: 24px;
-  }
-
-  .footItemTitle {
-    font-family: Open Sans;
-    color: #FFFFFF;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    margin-bottom: 10px;
-  }
-
-  .footItemSubtitle {
-    margin-bottom: 10px;
-    max-width: 290px;
-  }
-
-  .footItemLink {
-    font-family: Open Sans;
-    color: #FFFFFF;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    text-decoration: none;
-  }
-
-  .footItemLink:hover {
-    text-decoration: underline;
-  }
-`;
-
-const BottomFooter = styled.div`
- background: #14315C;
-
-  span {
-    display: block;
-  }
-
-  .bottom-footer-container {
-    display: flex;
-    flex-flow: wrap;
-    flex-direction: column;
-    justify-content: space-between;
-    max-width: 1420px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
-    padding-left: 1rem;
-  }
-
-  .break {
-    order: 2;
-    width: 100%;
-    flex-basis: 100%;
-    height: 2rem;
-    margin: 0;
-    border: 0;
-    display: none;
-  }
-
-  .logoText {
-    text-decoration: none;
-    white-space: nowrap;
-  }
-
-  .logoUpperText {
-    font-family: poppins;
-    font-weight: 700;
-    font-size: 24.96px;
-    line-height: 37px;
-    color: #FFFFFF;
-  }
-
-  .logoLowerText {
-    font-family: poppins;
-    font-weight: 400;
-    font-size: 18.72px;
-    color: #FFFFFF;
-  }
-
-  #bottom-footer-contact-us {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    text-align: left;
-    color: #FFFFFF;
-    order: 1;
-    margin-top: 1.5rem;
-  }
-
-  #bottom-footer-contact-links {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 1.6;
-    color: #FFFFFF;
-    margin-top: 0.25rem;
-  }
-
-  #bottom-footer-contact-links a {
-    text-decoration: none;
-    color: #FFFFFF;
-    display: block;
-    margin-left: 0px;
-    margin-right: 10px;
-  }
-
-
-  #bottom-footer-follow-us {
-    font-family: 'Poppins';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 22.88px;
-    line-height: 34px;
-    color: #FFFFFF;
-    order: 3;
-    margin-top: 1rem;
-  }
-
-  #bottom-footer-follow-us-links {
-    margin-top: 1rem;
-  }
-
-  .bottom-footer-social-media-imgs {
-    margin-left: 10px;
-  }
-
-  #bottom-footer-gov-links {
-    order: 4;
-  }
-
-  #bottom-footer-gov-links a {
-    text-decoration: none;
-    display: block;
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.6;
-    text-align: left;
-    color: #FFFFFF;
-  }
-
-  #bottom-footer-follow-us-links {
-        margin-top: 0.75rem;
-  }
-
-  #bottom-footer-gov-links {
-      margin-right: 0px;
-      margin-top: 0.75rem;
-  }
-`;
+import React, { useState, useRef } from "react";
+import { styled } from "@mui/material";
+import FooterData from "../../config/globalFooterData";
+
+const FooterStyled = styled("footer")({
+  backgroundColor: "#1B496E",
+  borderTop: "1px solid #6C727B",
+  bottom: 0,
+  width: "100%",
+  zIndex: 10,
+  position: "relative",
+});
+
+const FooterContainer = styled("div")({
+  padding: "2rem 1rem 0 1rem",
+  maxWidth: "1420px",
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "flex",
+  justifyContent: "space-between",
+});
+
+const FooterEmailSignupContainer = styled("form")({
+  width: "33.3%",
+  "& .signUpTitle": {
+    fontFamily: "poppins",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    color: "#FFFFFF",
+    marginBottom: "1rem",
+  },
+  "& .enterTitle": {
+    fontFamily: "Open Sans",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#FFFFFF",
+    marginBottom: "10px",
+  },
+  "& .signUpInputBox": {
+    width: "100%",
+    height: "47px",
+    fontSize: "25px",
+    paddingLeft: "8px",
+    marginTop: "4px",
+    "&:focus": {
+      outline: "0.25rem solid #2491ff",
+    },
+  },
+  "& .signUpButton": {
+    background: "#FACE00",
+    borderRadius: "8px",
+    border: 0,
+    padding: "9px 16px",
+    fontFamily: "Open Sans",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#14315C",
+    marginTop: "18px",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+});
+
+const FooterLinksContainer = styled("div")({
+  width: "66.7%",
+  display: "grid",
+  gridColumnGap: "4%",
+  gridTemplateColumns: "46% 46%",
+  "& .footItem": {
+    paddingBottom: "32px",
+    marginBottom: "24px",
+  },
+  "& .footItemTitle": {
+    fontFamily: "Open Sans",
+    color: "#FFFFFF",
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "22px",
+    marginBottom: "10px",
+  },
+  "& .footItemSubtitle": {
+    marginBottom: "10px",
+    maxWidth: "290px",
+  },
+  "& .footItemLink": {
+    fontFamily: "Open Sans",
+    color: "#FFFFFF",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "22px",
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+});
+
+const BottomFooter = styled("div")({
+  background: "#14315C",
+  "& span": {
+    display: "block",
+  },
+  "& .bottom-footer-container": {
+    display: "flex",
+    flexFlow: "wrap",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    maxWidth: "1420px",
+    marginLeft: "auto",
+    marginRight: "auto",
+    height: "fit-content",
+    paddingTop: "1.25rem",
+    paddingBottom: "1.25rem",
+    paddingLeft: "1rem",
+  },
+  "& .break": {
+    order: 2,
+    width: "100%",
+    flexBasis: "100%",
+    height: "2rem",
+    margin: 0,
+    border: 0,
+    display: "none",
+  },
+  "& .logoText": {
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+  },
+  "& .logoUpperText": {
+    fontFamily: "poppins",
+    fontWeight: 700,
+    fontSize: "24.96px",
+    lineHeight: "37px",
+    color: "#FFFFFF",
+  },
+  "& .logoLowerText": {
+    fontFamily: "poppins",
+    fontWeight: 400,
+    fontSize: "18.72px",
+    color: "#FFFFFF",
+  },
+  "& #bottom-footer-contact-us": {
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    textAlign: "left",
+    color: "#FFFFFF",
+    order: 1,
+    marginTop: "1.5rem",
+  },
+  "& #bottom-footer-contact-links": {
+    fontFamily: "Open Sans",
+    fontStyle: "normal",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: "#FFFFFF",
+    marginTop: "0.25rem",
+    "& a": {
+      textDecoration: "none",
+      color: "#FFFFFF",
+      display: "block",
+      marginLeft: "0px",
+      marginRight: "10px",
+    },
+  },
+  "& #bottom-footer-follow-us": {
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontSize: "22.88px",
+    lineHeight: "34px",
+    color: "#FFFFFF",
+    order: 3,
+    marginTop: "1rem",
+  },
+  "& #bottom-footer-follow-us-links": {
+    marginTop: "0.75rem",
+  },
+  "& .bottom-footer-social-media-imgs": {
+    marginLeft: "10px",
+  },
+  "& #bottom-footer-gov-links": {
+    order: 4,
+    marginRight: "0px",
+    marginTop: "0.75rem",
+    "& a": {
+      textDecoration: "none",
+      display: "block",
+      fontFamily: "Open Sans",
+      fontStyle: "normal",
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: "1.6",
+      textAlign: "left",
+      color: "#FFFFFF",
+    },
+  },
+});
 
 const FooterTablet = () => {
   const [emailContent, setEmailContent] = useState("");
diff --git a/src/components/Header/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop.tsx
index 02f35b4f..e45cfcd3 100644
--- a/src/components/Header/HeaderDesktop.tsx
+++ b/src/components/Header/HeaderDesktop.tsx
@@ -1,25 +1,27 @@
-import React from 'react';
-import styled from 'styled-components';
-import Logo from './components/LogoDesktop';
-import NavBar from './components/NavbarDesktop';
+import React from "react";
+import { styled } from "@mui/material";
+import Logo from "./components/LogoDesktop";
+import NavBar from "./components/NavbarDesktop";
 
-const HeaderBanner = styled.div`
-  width: 100%;
-`;
+const HeaderBanner = styled("div")({
+  width: "100%",
+});
 
-const HeaderContainer = styled.div`
-    margin: 0 auto;
-    padding-left: 32px;
-    max-width: 1400px;
-    display: flex;
-`;
+const HeaderContainer = styled("div")({
+  margin: "0 auto",
+  paddingLeft: "32px",
+  maxWidth: "1400px",
+  display: "flex",
+});
 
 const Header = () => (
   <HeaderBanner>
     <HeaderContainer>
       <Logo />
     </HeaderContainer>
-    <div className="navbarContainer"><NavBar /></div>
+    <div className="navbarContainer">
+      <NavBar />
+    </div>
   </HeaderBanner>
 );
 
diff --git a/src/components/Header/HeaderTabletAndMobile.tsx b/src/components/Header/HeaderTabletAndMobile.tsx
index 3259d0d7..53c24922 100644
--- a/src/components/Header/HeaderTabletAndMobile.tsx
+++ b/src/components/Header/HeaderTabletAndMobile.tsx
@@ -1,159 +1,128 @@
-import React, { useEffect, useState } from 'react';
-import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom';
-import styled from 'styled-components';
+import React, { HTMLProps, useEffect, useState } from "react";
+import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
+import { styled } from "@mui/material";
 import Logo from "./components/LogoMobile";
-import menuClearIcon from '../../assets/header/Menu_Cancel_Icon.svg';
-import rightArrowIcon from '../../assets/header/Right_Arrow.svg';
-import leftArrowIcon from '../../assets/header/Left_Arrow.svg';
-import { navMobileList, navbarSublists } from '../../config/globalHeaderData';
-import { useAuthContext } from '../Contexts/AuthContext';
-import GenericAlert from '../GenericAlert';
-import APITokenDialog from '../../content/users/APITokenDialog';
-import UploaderToolDialog from '../../content/users/UploaderToolDialog';
-
-const HeaderBanner = styled.div`
-  width: 100%;
-`;
-
-const HeaderContainer = styled.div`
-    margin: 0 auto;
-    padding-left: 16px;
-    box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);
-
-    .headerLowerContainer {
-        display: flex;
-        margin: 16px 0 4px 0;
-        height: 51px;
-    }
-
-    .menuButton {
-        width: 89px;
-        height: 45px;
-        background: #1F4671;
-        border-radius: 5px;
-        font-family: 'Open Sans';
-        font-weight: 700;
-        font-size: 20px;
-        line-height: 45px;
-        color: #FFFFFF;
-        text-align: center;
-    }
-
-    .menuButton:hover {
-        cursor: pointer;
-    }
-
-    // .menuButton:active {
-    //     outline: 0.25rem solid #2491ff;
-    //     outline-offset: 0.25rem
-    // }
-`;
-
-const NavMobileContainer = styled.div<{ $display?: string; }>`
-    display: ${(props) => props.$display};
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    z-index: 1200;
-`;
-
-const MenuArea = styled.div`
-    height: 100%;
-    width: 100%;
-    display: flex;
-
-    .menuContainer {
-        background: #ffffff;
-        width: 300px;
-        height: 100%;
-        padding: 21px 16px;
-    }
-
-    .greyContainer {
-        width: 100%;
-        height: 100%;
-        background: rgba(0,0,0,.2);
-    }
-
-    .closeIcon {
-        height: 14px;
-        margin-bottom: 29px;
-    }
-
-    .closeIconImg {
-        float: right;
-    }
-
-    .closeIconImg:hover {
-        cursor: pointer;
-    }
-
-    .backButton {
-        font-family: Open Sans;
-        font-weight: 600;
-        font-size: 16px;
-        line-height: 16px;
-        color: #007BBD;
-        padding-left: 16px;
-        background: url(${leftArrowIcon}) left no-repeat;
-    }
-
-    .backButton:hover {
-        cursor: pointer;
-    }
-
-    // .backButton:active {
-    //     outline: 0.25rem solid #2491ff;
-    //     outline-offset: 0.5rem;
-    // }
-
-    .navMobileContainer {
-        padding: 24px 0 0 0;
-
-        a {
-            text-decoration: none;
-            color: #3D4551;
-        }
-    }
-
-    .navMobileItem {
-        width: 268px;
-        padding: 8px 24px 8px 16px;
-        font-family: Open Sans;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 16px;
-        border-top: 1px solid #F0F0F0;
-        border-bottom: 1px solid #F0F0F0;
-        color: #3D4551;
-    }
-
-    .navMobileItem:hover {
-        background-color: #f9f9f7;
-    }
-
-    // .navMobileItem:active {
-    //     outline: 0.25rem solid #2491ff;
-    // }
-
-    .SubItem {
-        padding-left: 24px;
-    }
-
-    .clickable {
-        background: url(${rightArrowIcon}) 90% no-repeat;
-    }
-
-    .clickable {
-        cursor: pointer;
-    }
+import menuClearIcon from "../../assets/header/Menu_Cancel_Icon.svg";
+import rightArrowIcon from "../../assets/header/Right_Arrow.svg";
+import leftArrowIcon from "../../assets/header/Left_Arrow.svg";
+import { navMobileList, navbarSublists } from "../../config/globalHeaderData";
+import { useAuthContext } from "../Contexts/AuthContext";
+import GenericAlert from "../GenericAlert";
+import APITokenDialog from "../../content/users/APITokenDialog";
+import UploaderToolDialog from "../../content/users/UploaderToolDialog";
+
+const HeaderBanner = styled("div")({
+  width: "100%",
+});
+
+const HeaderContainer = styled("div")({
+  margin: "0 auto",
+  paddingLeft: "16px",
+  boxShadow: "-0.1px 6px 9px -6px rgba(0, 0, 0, 0.5)",
+  "& .headerLowerContainer": {
+    display: "flex",
+    margin: "16px 0 4px 0",
+    height: "51px",
+  },
+  "& .menuButton": {
+    width: "89px",
+    height: "45px",
+    background: "#1F4671",
+    borderRadius: "5px",
+    fontFamily: "Open Sans",
+    fontWeight: 700,
+    fontSize: "20px",
+    lineHeight: "45px",
+    color: "#FFFFFF",
+    textAlign: "center",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+});
+
+const NavMobileContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "display",
+})<HTMLProps<HTMLDivElement> & { display: string }>(({ display }) => ({
+  display,
+  position: "absolute",
+  left: 0,
+  top: 0,
+  height: "100%",
+  width: "100%",
+  zIndex: 1200,
+}));
+
+const MenuArea = styled("div")({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  "& .menuContainer": {
+    background: "#ffffff",
+    width: "300px",
+    height: "100%",
+    padding: "21px 16px",
+  },
+  "& .greyContainer": {
+    width: "100%",
+    height: "100%",
+    background: "rgba(0,0,0,.2)",
+  },
+  "& .closeIcon": {
+    height: "14px",
+    marginBottom: "29px",
+  },
+  "& .closeIconImg": {
+    float: "right",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+  "& .backButton": {
+    fontFamily: "Open Sans",
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "16px",
+    color: "#007BBD",
+    paddingLeft: "16px",
+    background: `url(${leftArrowIcon}) left no-repeat`,
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+  "& .navMobileContainer": {
+    padding: "24px 0 0 0",
+    "& a": {
+      textDecoration: "none",
+      color: "#3D4551",
+    },
+  },
+  "& .navMobileItem": {
+    width: "268px",
+    padding: "8px 24px 8px 16px",
+    fontFamily: "Open Sans",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "16px",
+    borderTop: "1px solid #F0F0F0",
+    borderBottom: "1px solid #F0F0F0",
+    color: "#3D4551",
+    "&:hover": {
+      backgroundColor: "#f9f9f7",
+    },
+  },
+  "& .SubItem": {
+    paddingLeft: "24px",
+  },
+  "& .clickable": {
+    background: `url(${rightArrowIcon}) 90% no-repeat`,
+    cursor: "pointer",
+  },
+  "& .action": {
+    cursor: "pointer",
+  },
+});
 
-    .action {
-        cursor: pointer;
-    }
-`;
 type NavbarMobileList = {
   name: string;
   link: string;
@@ -275,7 +244,7 @@ const Header = () => {
           </div>
         </HeaderContainer>
       </HeaderBanner>
-      <NavMobileContainer $display={navMobileDisplay}>
+      <NavMobileContainer display={navMobileDisplay}>
         <MenuArea>
           <div className="menuContainer">
             <div
diff --git a/src/components/Header/USABanner.tsx b/src/components/Header/USABanner.tsx
index 9ad1571b..2bffa31c 100644
--- a/src/components/Header/USABanner.tsx
+++ b/src/components/Header/USABanner.tsx
@@ -1,38 +1,38 @@
-import React from 'react';
-import styled from 'styled-components';
-import { headerData } from '../../config/globalHeaderData';
+import React from "react";
+import { styled } from "@mui/material";
+import { headerData } from "../../config/globalHeaderData";
 
-const BannerArea = styled.div`
-    flex-direction:row;
-    width: 100%;
-    height: 46px;
-    background: #F0F0F0;
+const BannerArea = styled("div")({
+  flexDirection: "row",
+  width: "100%",
+  height: "46px",
+  background: "#F0F0F0",
+});
 
-`;
-const BannerContainer = styled.div`
-    display:flex;
-    align-items:center;
-    max-width: 1400px;
-    height:100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 2rem;
-    img{
-        margin-right: 14px;
-    }
-    .text{
-        font-family: 'Open Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 16px;
-        width: fit-content;
-        height: 16px;
-    }
-    @media (max-width: 1023px) {
-        padding-left: 1rem;
-    }
-`;
+const BannerContainer = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  maxWidth: "1400px",
+  height: "100%",
+  marginLeft: "auto",
+  marginRight: "auto",
+  paddingLeft: "2rem",
+  "& img": {
+    marginRight: "14px",
+  },
+  "& .text": {
+    fontFamily: "'Open Sans', sans-serif",
+    fontStyle: "normal",
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "16px",
+    width: "fit-content",
+    height: "16px",
+  },
+  "@media (max-width: 1023px)": {
+    paddingLeft: "1rem",
+  },
+});
 
 const USABanner = () => (
   <BannerArea>
diff --git a/src/components/Header/components/LogoDesktop.tsx b/src/components/Header/components/LogoDesktop.tsx
index 033c96a6..90aed300 100644
--- a/src/components/Header/components/LogoDesktop.tsx
+++ b/src/components/Header/components/LogoDesktop.tsx
@@ -1,22 +1,19 @@
-import React from 'react';
-import styled from 'styled-components';
-import { headerData } from '../../../config/globalHeaderData';
+import React from "react";
+import { styled } from "@mui/material";
+import { headerData } from "../../../config/globalHeaderData";
 
-const LogoArea = styled.div`
-    display: flex;
-
-    img {
-      width: fit-content;
-      height: 56px;
-      max-width: 100%
-    }
-
-    .logoContainer {
-      margin-top: 35px;
-      max-width: 440px;
-    }
-
-`;
+const LogoArea = styled("div")({
+  display: "flex",
+  "& img": {
+    width: "fit-content",
+    height: "56px",
+    maxWidth: "100%",
+  },
+  "& .logoContainer": {
+    marginTop: "35px",
+    maxWidth: "440px",
+  },
+});
 
 const Logo = () => (
   <LogoArea>
diff --git a/src/components/Header/components/LogoMobile.tsx b/src/components/Header/components/LogoMobile.tsx
index b5269aa4..58b3d905 100644
--- a/src/components/Header/components/LogoMobile.tsx
+++ b/src/components/Header/components/LogoMobile.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import styled from 'styled-components';
-import { headerData } from '../../../config/globalHeaderData';
+import React from "react";
+import { styled } from "@mui/material";
+import { headerData } from "../../../config/globalHeaderData";
 
-const LogoArea = styled.div`
-    display: flex;
+const LogoArea = styled("div")({
+  display: "flex",
 
-    .logoContainer {
-      margin-top: 32px;
-    }
-`;
+  "& .logoContainer": {
+    marginTop: "35px",
+  },
+});
 
 const Logo = () => (
   <LogoArea>
diff --git a/src/components/Header/components/LogoTablet.tsx b/src/components/Header/components/LogoTablet.tsx
index fc0c20b8..95ec7aa6 100644
--- a/src/components/Header/components/LogoTablet.tsx
+++ b/src/components/Header/components/LogoTablet.tsx
@@ -1,15 +1,14 @@
-import React from 'react';
-import styled from 'styled-components';
-import { headerData } from '../../../config/globalHeaderData';
+import React from "react";
+import { styled } from "@mui/material";
+import { headerData } from "../../../config/globalHeaderData";
 
-const LogoArea = styled.div`
-    display: flex;
+const LogoArea = styled("div")({
+  display: "flex",
 
-    .logoContainer {
-      margin-top: 32px;
-    }
-
-`;
+  "& .logoContainer": {
+    marginTop: "32px",
+  },
+});
 
 const Logo = () => (
   <LogoArea>
diff --git a/src/components/Header/components/NavbarDesktop.tsx b/src/components/Header/components/NavbarDesktop.tsx
index 688c50c3..e2f0f0de 100644
--- a/src/components/Header/components/NavbarDesktop.tsx
+++ b/src/components/Header/components/NavbarDesktop.tsx
@@ -1,361 +1,276 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom';
-import { Button } from '@mui/material';
-import styled from 'styled-components';
-import { useAuthContext } from '../../Contexts/AuthContext';
-import GenericAlert from '../../GenericAlert';
-import { navMobileList, navbarSublists } from '../../../config/globalHeaderData';
-import APITokenDialog from '../../../content/users/APITokenDialog';
-import UploaderToolDialog from '../../../content/users/UploaderToolDialog';
-
-const Nav = styled.div`
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: #ffffff;
-    box-shadow: -0.1px 6px 9px -6px rgba(0, 0, 0, 0.5);
-    z-index: 1100;
-    position: relative;
-
-    .dropdownContainer {
-      // outline: none;
-      // visibility: hidden;
-      // opacity: 0;
-      margin: 0 auto;
-      position: relative;
-      width: 1400px;
-    }
-    .loggedInName{
-      color: #007BBD;
-      text-align: right;
-      font-size: 14px;
-      font-family: Poppins;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
-      letter-spacing: 0.42px;
-      text-decoration: none;
-      text-transform: uppercase;
-      padding: 10px 0 10px 0;
-      margin-bottom: 4.5px;
-      margin-right: 40px;
-    }
-    .invisible {
-      visibility: hidden;
-    }
- `;
-
-const NavContainer = styled.div`
-    margin: 0 auto;
-    max-width: 1400px;
-    text-align: left;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: end;
-
-    #navbar-dropdown-name-container {
-      margin: 0;
-    }
-`;
-
-const UlContainer = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding-top: 17px;
-  padding-left: 11px;
-  display: flex;
-  width: 100%;
-`;
-
-const LiSection = styled.li`
-  display: inline-block;
-  position: relative;
-  line-height: 50px;
-  letter-spacing: 1px;
-  text-align: center;
-  transition:all 0.3s ease-in-out;
-
-  a {
-    color: #585C65;
-    text-decoration: none;
-  }
-
-  .displayName {
-    color: #007BBD;
-    font-size: 14px;
-    line-height: 20px;
-    padding: 10px 0px;
-    text-align: right;
-    width: fit-content;
-  }
-
-  &.name-dropdown-li {
-    margin-left: auto;
-  }
-
-  &.login-button {
-    line-height: 48px;
-  }
-
-  .navTitle {
-    display: block;
-    color: #585C65;
-    font-family: poppins;
-    font-size: 17px;
-    font-weight: 700;
-    line-height: 40px;
-    letter-spacing: normal;
-    text-decoration: none;
-    margin: 0 5px 0 5px;
-    padding: 0 8px;
-    user-select:none;
-    border-top: 4px solid transparent;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-  }
-
-  .navTitle:hover {
-    cursor: pointer;
-  }
-
-  .navText {
-    border-bottom: 4px solid transparent;
-    width: fit-content;
-    margin: auto;
-  }
-
-  .navText:hover {
-    cursor: pointer;
-    color: #3A75BD;
-    border-bottom: 4px solid #3A75BD;
-
-    ::after {
-      content: "";
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-bottom: 1px solid #298085;
-      border-left: 1px solid #298085;
-      margin: 0 0 4px 8px;
-      transform: rotate(-45deg);
-      -webkit-transform: rotate(-45deg);
-    }
-  }
-
-  .navText::after {
-    content: "";
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-bottom: 1px solid #585C65;
-    border-left: 1px solid #585C65;
-    margin: 0 0 4px 8px;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-  }
-
-  .clicked {
-    color: #FFFFFF;
-    background: #1F4671;
-  }
-
-  .clicked::after {
-    border-top: 1px solid #FFFFFF;
-    border-right: 1px solid #FFFFFF;
-    border-bottom: 0;
-    border-left: 0;
-    margin: 0 0 0 8px
-  }
-
-  .clicked:hover {
-    border-bottom: 4px solid #1F4671;
-    color: #FFFFFF;
-
-    ::after {
-      content: "";
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-top: 1px solid #FFFFFF;
-      border-right: 1px solid #FFFFFF;
-      border-bottom: 0;
-      border-left: 0;
-      margin: 0 0 0 8px;
-      transform: rotate(-45deg);
-      -webkit-transform: rotate(-45deg);
-    }
-  }
-
-  .directLink::after {
-    display: none;
-  }
-
-  .directLink:hover {
-    ::after {
-      display: none;
-    }
-  }
-  .shouldBeUnderlined {
-    border-bottom: 4px solid #3A75BD !important;
-  }
-  .navTitleClicked {
-    display: block;
-    color: #FFFFFF;
-    font-family: poppins;
-    font-size: 17px;
-    font-weight: 700;
-    line-height: 40px;
-    letter-spacing: normal;
-    text-decoration: none;
-    margin: 0 45px 0 5px;
-    padding: 0 15px;
-    user-select:none;
-    background: #1F4671;
-    border-top: 4px solid #5786FF;
-    border-left: 4px solid #5786FF;
-    border-right: 4px solid #5786FF;
-  }
-  .invisible {
-    visibility: hidden;
-  }
-`;
-
-const Dropdown = styled.div`
-    top: 60.5px;
-    left: 0;
-    width: 100%;
-    background: #1F4671;
-    z-index: 1100;
-    position: absolute;
-    // visibility: hidden;
-    // outline: none;
-    // opacity: 0;
-`;
-
-// const DropdownContainer = styled.div`
-//     margin: 0 auto;
-//     text-align: left;
-//     position: relative;
-//     max-width: 1400px;
-
-//     .dropdownList {
-//       background: #1F4671;
-//       display: grid;
-//       grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
-//       padding: 32px 32px 0 32px;
-//     }
-//     .dropdownNameList {
-//       background: #1F4671;
-//       display: flex;
-//       flex-direction: column;
-//       padding: 32px 32px 0 32px;
-//       width: 400px;
-//       height: 200px;
-//       justify-content: end;
-//     }
-
-//     .dropdownItem {
-//       padding: 0 10px 52px 10px;
-//       text-align: left;
-//       font-family: 'Poppins';
-//       font-weight: 600;
-//       font-style: normal;
-//       font-size: 20px;
-//       line-height: 110%;
-//       color: #FFFFFF;
-//       text-decoration: none;
-//   }
-
-//   .dropdownItem:hover {
-//     text-decoration: underline;
-//   }
-
-//   .dropdownItemText {
-//     margin-top: 5px;
-//     font-family: 'Open Sans';
-//     font-style: normal;
-//     font-weight: 400;
-//     font-size: 16.16px;
-//     line-height: 22px;
-//   }
-// `;
-
-const NameDropdownContainer = styled.div`
-  margin: 0 auto;
-  text-align: left;
-  position: relative;
-  max-width: 1400px;
-  .dropdownList {
-      background: #1F4671;
-      display: inline-flex;
-      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
-      padding: 32px 32px 0 32px;
-  }
-  .dropdownItem {
-    padding: 0 10px 52px 10px;
-    text-align: left;
-    font-family: 'Poppins';
-    font-weight: 600;
-    font-style: normal;
-    font-size: 20px;
-    line-height: 110%;
-    color: #FFFFFF;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .dropdownItem:hover {
-    text-decoration: underline;
-  }
-  .dropdownItemButton {
-    padding-bottom: 0;
-    text-transform: none;
-  }
-  .dropdownItemButton:hover {
-    background: transparent;
-  }
-  #navbar-dropdown-item-name-logout {
-    max-width: 200px;
-  }
-`;
-
-const NameDropdown = styled.div`
-    top: 60.5px;
-    left: 0;
-    width: 100%;
-    background: #1F4671;
-    z-index: 1100;
-    position: absolute;
-
-    // left: 0;
-    // background: #1F4671;
-    // z-index: 1100;
-    // position: absolute;
-    // // visibility: hidden;
-    // // outline: none;
-    // // opacity: 0;
-    // /* border-left: 4px solid #5786FF;
-    // border-bottom: 4px solid #5786FF;
-    // border-right: 4px solid #5786FF; */
-    // width: 100%;
-`;
-
-const StyledLoginLink = styled(Link)`
-  color: #007BBD !important;
-  text-align: right;
-  font-size: 14px;
-  font-family: Poppins;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  letter-spacing: 0.42px;
-  text-decoration: none;
-  text-transform: uppercase;
-  padding: 10px 0 10px 0;
-  margin-bottom: 4.5px;
-  margin-right: 32px;
-`;
+import React, { useEffect, useState, useRef } from "react";
+import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
+import { Button, styled } from "@mui/material";
+import { useAuthContext } from "../../Contexts/AuthContext";
+import GenericAlert from "../../GenericAlert";
+import {
+  navMobileList,
+  navbarSublists,
+} from "../../../config/globalHeaderData";
+import APITokenDialog from "../../../content/users/APITokenDialog";
+import UploaderToolDialog from "../../../content/users/UploaderToolDialog";
+
+const Nav = styled("div")({
+  top: 0,
+  left: 0,
+  width: "100%",
+  background: "#ffffff",
+  boxShadow: "-0.1px 6px 9px -6px rgba(0, 0, 0, 0.5)",
+  zIndex: 1100,
+  position: "relative",
+  "& .dropdownContainer": {
+    margin: "0 auto",
+    position: "relative",
+    width: "1400px",
+  },
+  "& .loggedInName": {
+    color: "#007BBD",
+    textAlign: "right",
+    fontSize: "14px",
+    fontFamily: "Poppins",
+    fontStyle: "normal",
+    fontWeight: 600,
+    lineHeight: "normal",
+    letterSpacing: "0.42px",
+    textDecoration: "none",
+    textTransform: "uppercase",
+    padding: "10px 0",
+    marginBottom: "4.5px",
+    marginRight: "40px",
+  },
+  "& .invisible": {
+    visibility: "hidden",
+  },
+});
+
+const NavContainer = styled("div")({
+  margin: "0 auto",
+  maxWidth: "1400px",
+  textAlign: "left",
+  position: "relative",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "end",
+  "#navbar-dropdown-name-container": {
+    margin: 0,
+  },
+});
+
+const UlContainer = styled("ul")({
+  listStyle: "none",
+  margin: 0,
+  paddingTop: "17px",
+  paddingLeft: "11px",
+  display: "flex",
+  width: "100%",
+});
+
+const LiSection = styled("li")({
+  display: "inline-block",
+  position: "relative",
+  lineHeight: "50px",
+  letterSpacing: "1px",
+  textAlign: "center",
+  transition: "all 0.3s ease-in-out",
+  "& a": {
+    color: "#585C65",
+    textDecoration: "none",
+  },
+  "& .displayName": {
+    color: "#007BBD",
+    fontSize: "14px",
+    lineHeight: "20px",
+    padding: "10px 0",
+    textAlign: "right",
+    width: "fit-content",
+  },
+  "&.name-dropdown-li": {
+    marginLeft: "auto",
+  },
+  "&.login-button": {
+    lineHeight: "48px",
+  },
+  "& .navTitle": {
+    display: "block",
+    color: "#585C65",
+    fontFamily: "poppins",
+    fontSize: "17px",
+    fontWeight: 700,
+    lineHeight: "40px",
+    letterSpacing: "normal",
+    textDecoration: "none",
+    margin: "0 5px",
+    padding: "0 8px",
+    userSelect: "none",
+    borderTop: "4px solid transparent",
+    borderLeft: "4px solid transparent",
+    borderRight: "4px solid transparent",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+  "& .navText": {
+    borderBottom: "4px solid transparent",
+    width: "fit-content",
+    margin: "auto",
+    "&:hover": {
+      cursor: "pointer",
+      color: "#3A75BD",
+      borderBottom: "4px solid #3A75BD",
+      "&::after": {
+        content: '""',
+        display: "inline-block",
+        width: "6px",
+        height: "6px",
+        borderBottom: "1px solid #298085",
+        borderLeft: "1px solid #298085",
+        margin: "0 0 4px 8px",
+        transform: "rotate(-45deg)",
+        WebkitTransform: "rotate(-45deg)",
+      },
+    },
+    "&::after": {
+      content: '""',
+      display: "inline-block",
+      width: "6px",
+      height: "6px",
+      borderBottom: "1px solid #585C65",
+      borderLeft: "1px solid #585C65",
+      margin: "0 0 4px 8px",
+      transform: "rotate(-45deg)",
+       WebkitTransform: "rotate(-45deg)",
+    },
+  },
+  "& .clicked": {
+    color: "#FFFFFF",
+    background: "#1F4671",
+    "&::after": {
+      borderTop: "1px solid #FFFFFF",
+      borderRight: "1px solid #FFFFFF",
+      borderBottom: "0",
+      borderLeft: "0",
+      margin: "0 0 0 8px",
+    },
+    "&:hover": {
+      borderBottom: "4px solid #1F4671",
+      color: "#FFFFFF",
+      "&::after": {
+        content: '""',
+        display: "inline-block",
+        width: "6px",
+        height: "6px",
+        borderTop: "1px solid #FFFFFF",
+        borderRight: "1px solid #FFFFFF",
+        borderBottom: "0",
+        borderLeft: "0",
+        margin: "0 0 0 8px",
+        transform: "rotate(-45deg)",
+         WebkitTransform: "rotate(-45deg)",
+      },
+    },
+  },
+  "& .directLink::after": {
+    display: "none",
+  },
+  "& .directLink:hover::after": {
+    display: "none",
+  },
+  "& .shouldBeUnderlined": {
+    borderBottom: "4px solid #3A75BD !important",
+  },
+  "& .navTitleClicked": {
+    display: "block",
+    color: "#FFFFFF",
+    fontFamily: "poppins",
+    fontSize: "17px",
+    fontWeight: 700,
+    lineHeight: "40px",
+    letterSpacing: "normal",
+    textDecoration: "none",
+    margin: "0 45px 0 5px",
+    padding: "0 15px",
+    userSelect: "none",
+    background: "#1F4671",
+    borderTop: "4px solid #5786FF",
+    borderLeft: "4px solid #5786FF",
+    borderRight: "4px solid #5786FF",
+  },
+  "& .invisible": {
+    visibility: "hidden",
+  },
+});
+
+const Dropdown = styled("div")({
+  top: "60.5px",
+  left: 0,
+  width: "100%",
+  background: "#1F4671",
+  zIndex: 1100,
+  position: "absolute",
+});
+
+const NameDropdownContainer = styled("div")({
+  margin: "0 auto",
+  textAlign: "left",
+  position: "relative",
+  maxWidth: "1400px",
+  "& .dropdownList": {
+    background: "#1F4671",
+    display: "inline-flex",
+    gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+    padding: "32px 32px 0 32px",
+  },
+  "& .dropdownItem": {
+    padding: "0 10px 52px 10px",
+    textAlign: "left",
+    fontFamily: "'Poppins', sans-serif",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: "20px",
+    lineHeight: "110%",
+    color: "#FFFFFF",
+    textDecoration: "none",
+    cursor: "pointer",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+  "& .dropdownItemButton": {
+    paddingBottom: 0,
+    textTransform: "none",
+    "&:hover": {
+      background: "transparent",
+    },
+  },
+  "#navbar-dropdown-item-name-logout": {
+    maxWidth: "200px",
+  },
+});
+
+const NameDropdown = styled("div")({
+  top: "60.5px",
+  left: 0,
+  width: "100%",
+  background: "#1F4671",
+  zIndex: 1100,
+  position: "absolute",
+});
+
+const StyledLoginLink = styled(Link)({
+  color: "#007BBD !important",
+  textAlign: "right",
+  fontSize: "14px",
+  fontFamily: "Poppins",
+  fontStyle: "normal",
+  fontWeight: 600,
+  lineHeight: "normal",
+  letterSpacing: "0.42px",
+  textDecoration: "none",
+  textTransform: "uppercase",
+  padding: "10px 0",
+  marginBottom: "4.5px",
+  marginRight: "32px",
+});
 
 const useOutsideAlerter = (ref1, ref2) => {
   useEffect(() => {
diff --git a/src/components/InactivityDialog/InactivityDialog.tsx b/src/components/InactivityDialog/InactivityDialog.tsx
index 4c9d65b8..26534bb5 100644
--- a/src/components/InactivityDialog/InactivityDialog.tsx
+++ b/src/components/InactivityDialog/InactivityDialog.tsx
@@ -1,115 +1,114 @@
-import React, { useState, useEffect } from 'react';
-import { Button, Dialog, DialogTitle } from '@mui/material';
-import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
-import GenericAlert from '../GenericAlert';
+import React, { useState, useEffect } from "react";
+import { Button, Dialog, DialogTitle, styled } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import GenericAlert from "../GenericAlert";
 
 // import env from '../../utils/env';
 
-import { useAuthContext } from '../Contexts/AuthContext';
+import { useAuthContext } from "../Contexts/AuthContext";
 
-const InacivityWarningDialog = styled(Dialog)`
-  .MuiDialog-paper {
-    width: 550px;
-    height: 320px;
-    border-radius: 8px;
-    border: 2px solid var(--secondary-one, #0B7F99);
-    background: linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B;
-    box-shadow: 0px 4px 45px 0px rgba(0, 0, 0, 0.40);
-  }
-  #customized-dialog-title {
-    margin: 0;
-    padding-left: 30px;
-    background-color: #6D89A2;
-    color: #FFFFFF;
-    font-family: Lato;
-    font-size: 20px;
-    font-weight: 600;
-    letter-spacing: 0;
-  }
-`;
+const InactivityWarningDialog = styled(Dialog)({
+  "& .MuiDialog-paper": {
+    width: "550px",
+    height: "320px",
+    borderRadius: "8px",
+    border: "2px solid var(--secondary-one, #0B7F99)",
+    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
+    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
+  },
+  "& #customized-dialog-title": {
+    margin: 0,
+    paddingLeft: "30px",
+    backgroundColor: "#6D89A2",
+    color: "#FFFFFF",
+    fontFamily: "Lato",
+    fontSize: "20px",
+    fontWeight: 600,
+    letterSpacing: 0,
+  },
+});
 
-const InacivityWarningContent = styled.div`
-    margin: 50px auto;
-    color: #000000;
-    font-family: Nunito;
-    font-size: 17px;
-    font-weight: 300;
-    letter-spacing: 0;
-    line-height: 24px;
-    .alignCenter {
-      text-align: center;
-    }
-    .buttonGroup {
-      color: #FFFFFF;
-      font-family: Lato;
-      font-size: 11px;
-      line-height: 22px;
-      width: 150px;
-      border: 1px solid #626262;
-      margin-top: 30px;
-    }
-    .extendButton {
-      background-color: #566672 !important;
-    }
-    .logOutButton{
-      margin-left: 20px;
-      background-color: #437BBE !important;
-    }
-`;
+const InactivityWarningContent = styled("div")({
+  margin: "50px auto",
+  color: "#000000",
+  fontFamily: "'Nunito', 'Rubik', sans-serif",
+  fontSize: "17px",
+  fontWeight: 300,
+  letterSpacing: 0,
+  lineHeight: "24px",
+  "& .alignCenter": {
+    textAlign: "center",
+  },
+  "& .buttonGroup": {
+    color: "#FFFFFF",
+    fontFamily: "Lato",
+    fontSize: "11px",
+    lineHeight: "22px",
+    width: "150px",
+    border: "1px solid #626262",
+    marginTop: "30px",
+  },
+  "& .extendButton": {
+    backgroundColor: "#566672 !important",
+  },
+  "& .logOutButton": {
+    marginLeft: "20px",
+    backgroundColor: "#437BBE !important",
+  },
+});
 
-const SessionTimeoutDialog = styled(Dialog)`
-  .MuiDialog-paper {
-    width: 550px;
-    height: 320px;
-    border-radius: 8px;
-    border: 2px solid var(--secondary-one, #0B7F99);
-    background: linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B;
-    box-shadow: 0px 4px 45px 0px rgba(0, 0, 0, 0.40);
-  }
-  .closeIcon {
-    cursor: pointer;
-    text-align: end;
-  }
-`;
+const SessionTimeoutDialog = styled(Dialog)({
+  "& .MuiDialog-paper": {
+    width: "550px",
+    height: "320px",
+    borderRadius: "8px",
+    border: "2px solid var(--secondary-one, #0B7F99)",
+    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
+    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
+  },
+  "& .closeIcon": {
+    cursor: "pointer",
+    textAlign: "end",
+  },
+});
 
-const SessionTimeoutContent = styled.div`
-  justify-content: space-between;
-  padding-right: 33px;
-  padding-left: 33px;
-  padding-top: 10px;
-  font-family: lato;
-  text-align: center;
-  .sessionTimeoutTitle {
-    font-size: 25px;
-    font-weight: bold;
-    padding-bottom: 12px;
-    color: #566672;
-  }
-  .sessionTimeoutMessage {
-    font-size: 17px;
-    padding-bottom: 14px;
-  }
-  .alignCenter {
-      text-align: center;
-    }
-    .buttonGroup {
-      color: #FFFFFF;
-      font-family: Lato;
-      font-size: 11px;
-      line-height: 22px;
-      width: 90px;
-      border: 1px solid #626262;
-      margin-top: 30px;
-    }
-    .closeButton {
-      background-color: #566672 !important;
-    }
-    .loginButton{
-      margin-left: 20px;
-      background-color: #437BBE !important;
-    }
-`;
+const SessionTimeoutContent = styled("div")({
+  justifyContent: "space-between",
+  paddingRight: "33px",
+  paddingLeft: "33px",
+  paddingTop: "10px",
+  fontFamily: "lato",
+  textAlign: "center",
+  "& .sessionTimeoutTitle": {
+    fontSize: "25px",
+    fontWeight: "bold",
+    paddingBottom: "12px",
+    color: "#566672",
+  },
+  "& .sessionTimeoutMessage": {
+    fontSize: "17px",
+    paddingBottom: "14px",
+  },
+  "& .alignCenter": {
+    textAlign: "center",
+  },
+  "& .buttonGroup": {
+    color: "#FFFFFF",
+    fontFamily: "Lato",
+    fontSize: "11px",
+    lineHeight: "22px",
+    width: "90px",
+    border: "1px solid #626262",
+    marginTop: "30px",
+  },
+  "& .closeButton": {
+    backgroundColor: "#566672 !important",
+  },
+  "& .loginButton": {
+    marginLeft: "20px",
+    backgroundColor: "#437BBE !important",
+  },
+});
 
 const secondsToMinuteString = (seconds) => new Date(seconds * 1000).toISOString().substring(14, 19);
 
@@ -202,9 +201,9 @@ const InactivityDialog = () => {
           You have been logged out.
         </span>
       </GenericAlert>
-      <InacivityWarningDialog open={warning}>
+      <InactivityWarningDialog open={warning}>
         <DialogTitle id="customized-dialog-title"> Session Timeout Warning</DialogTitle>
-        <InacivityWarningContent>
+        <InactivityWarningContent>
           This session is about to expire due to inactivity.
           <br />
           You will be logged out in
@@ -228,8 +227,8 @@ const InactivityDialog = () => {
               LOGOUT
             </Button>
           </div>
-        </InacivityWarningContent>
-      </InacivityWarningDialog>
+        </InactivityWarningContent>
+      </InactivityWarningDialog>
       <SessionTimeoutDialog open={timedOut}>
         <DialogTitle>
           <div
diff --git a/src/components/Questionnaire/RadioYesNoInput.tsx b/src/components/Questionnaire/RadioYesNoInput.tsx
index 7344038b..c839fa43 100644
--- a/src/components/Questionnaire/RadioYesNoInput.tsx
+++ b/src/components/Questionnaire/RadioYesNoInput.tsx
@@ -1,59 +1,69 @@
-import React, { FC, useState, useRef, useEffect } from 'react';
-import { Grid, FormControl, FormControlLabel, Radio, RadioGroup, RadioProps, RadioGroupProps, FormHelperText } from '@mui/material';
-import styled from "styled-components";
-import { updateInputValidity } from '../../utils';
-
-const GridStyled = styled(Grid)<{ $containerWidth?: string; }>`
-  width: ${(props) => props.$containerWidth};
-  .formControl{
-    margin-top: 8px;
-    margin-bottom: 4px;
-  }
-  .css-hsm3ra-MuiFormLabel-root {
-    color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .MuiRadio-root{
-    color: #1D91AB !important;
-    margin-left: 10px;
-  }
-
-  #invisibleRadioInput {
-    height: 0;
-    border: none;
-    width: 0;
-  }
-  .MuiFormHelperText-root {
-    color: #083A50;
-    margin-left: 0;
-  }
-  .MuiFormHelperText-root.Mui-error {
-    color: #D54309 !important;
-  }
-  .displayNone {
-    display: none !important;
-  }
-`;
-
-const BpIcon = styled('span')(() => ({
-  borderRadius: '50%',
+import React, { FC, useState, useRef, useEffect } from "react";
+import {
+  Grid,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  RadioProps,
+  RadioGroupProps,
+  FormHelperText,
+  styled,
+  GridProps,
+} from "@mui/material";
+import { updateInputValidity } from "../../utils";
+
+const GridStyled = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== "containerWidth",
+})<GridProps & { containerWidth?: string }>(({ containerWidth }) => ({
+  width: containerWidth,
+  "& .formControl": {
+    marginTop: "8px",
+    marginBottom: "4px",
+  },
+  "& .css-hsm3ra-MuiFormLabel-root": {
+    color: "rgba(0, 0, 0, 0.6) !important",
+  },
+  "& .MuiRadio-root": {
+    color: "#1D91AB !important",
+    marginLeft: "10px",
+  },
+  "& #invisibleRadioInput": {
+    height: 0,
+    border: "none",
+    width: 0,
+  },
+  "& .MuiFormHelperText-root": {
+    color: "#083A50",
+    marginLeft: 0,
+  },
+  "& .MuiFormHelperText-root.Mui-error": {
+    color: "#D54309 !important",
+  },
+  "& .displayNone": {
+    display: "none !important",
+  },
+}));
+const BpIcon = styled("span")(() => ({
+  borderRadius: "50%",
   width: 24,
   height: 24,
-  outline: '6px auto #1D91AB',
-  'input:hover ~ &': {
+  outline: "6px auto #1D91AB",
+  "input:hover ~ &": {
     outlineOffset: "2px",
   },
 }));
 
 const BpCheckedIcon = styled(BpIcon)({
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  backgroundImage: "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
+  "&:before": {
     borderRadius: "50%",
-    display: 'block',
+    display: "block",
     marginTop: "4px",
     marginLeft: "4px",
     width: 16,
     height: 16,
-    backgroundImage: 'radial-gradient(#1D91AB, #1D91AB)',
+    backgroundImage: "radial-gradient(#1D91AB, #1D91AB)",
     content: '""',
   },
 });
@@ -78,7 +88,7 @@ const StyledRadio = styled(Radio)((props) => ({
   },
   "& .radio-icon": {
     backgroundColor: props.readOnly ? "#E5EEF4 !important" : "initial",
-  }
+  },
 }));
 
 // Inspired by blueprintjs
@@ -88,9 +98,11 @@ const BpRadio = (props: RadioProps) => (
     color="default"
     checkedIcon={<BpCheckedIcon className="radio-icon" />}
     icon={<BpIcon className="radio-icon" />}
-    inputProps={{
-        "data-type": "auto"
-      } as unknown}
+    inputProps={
+      {
+        "data-type": "auto",
+      } as unknown
+    }
     {...props}
   />
 );
@@ -150,7 +162,7 @@ const RadioYesNoInput: FC<Props> = ({
   }, [radioGroupInputRef]);
 
   return (
-    <GridStyled md={gridWidth || 6} xs={12} item $containerWidth={containerWidth}>
+    <GridStyled md={gridWidth || 6} xs={12} item containerWidth={containerWidth}>
       <FormControl className="formControl" error={error}>
         <StyledFormLabel>
           {label}
diff --git a/src/components/Questionnaire/ReviewFileTypeTable.tsx b/src/components/Questionnaire/ReviewFileTypeTable.tsx
index e7e24856..38da4c04 100644
--- a/src/components/Questionnaire/ReviewFileTypeTable.tsx
+++ b/src/components/Questionnaire/ReviewFileTypeTable.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 import {
   Table,
   TableBody,
@@ -7,6 +6,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  styled,
 } from "@mui/material";
 import { addSpace } from "../../utils";
 
@@ -46,7 +46,7 @@ const StyledTableHeaderCell = styled(TableCell)(() => ({
     height: "100%",
     color: "#083A50",
     fontFamily: "'Nunito', 'Rubik', sans-serif",
-    fontSize: '16px',
+    fontSize: "16px",
     fontStyle: "normal",
     fontWeight: 700,
     lineHeight: "19.6px",
diff --git a/src/components/Questionnaire/SwitchInput.tsx b/src/components/Questionnaire/SwitchInput.tsx
index 644022f0..0ce62819 100644
--- a/src/components/Questionnaire/SwitchInput.tsx
+++ b/src/components/Questionnaire/SwitchInput.tsx
@@ -1,126 +1,136 @@
 import React, {
-  FC, ReactElement, useEffect,
-  useId, useMemo, useRef, useState
-} from 'react';
-import { SwitchProps, Grid, Switch, FormHelperText } from '@mui/material';
-import styled from "styled-components";
+  FC,
+  HTMLProps,
+  ReactElement,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  SwitchProps,
+  Grid,
+  Switch,
+  FormHelperText,
+  styled,
+} from "@mui/material";
 import Tooltip from "../Tooltip";
-import { updateInputValidity } from '../../utils';
+import { updateInputValidity } from "../../utils";
 
-const GridStyled = styled(Grid)`
-  margin-bottom: 20px;
-  // Customize the root class
-  .switchRoot {
-    width: 65px;
-    height: 35px;
-    padding: 0;
-  }
-  // Customize the switchBase class
-  .switchBase {
-    padding-top: 5px;
-    padding-left: 7px;
-   }
-  // Customize the thumb class
-  .thumb {
-    color: #1D91AB;
-    width: 25px;
-    height: 25px;
-    box-shadow: none;
-  }
-  .MuiSwitch-switchBase.Mui-checked{
-    transform: translateX(26px);
-  }
-  // Customize the track class
-  .track {
-    border-radius: 60px;
-    background-color: #FFFFFF;
-    border: 1px solid #DBDBDB;
-    opacity: 1;
-  }
-  .MuiSwitch-track{
-    background-color: white !important;
-  }
-  .readOnly .MuiSwitch-track {
-    background-color: #E5EEF4 !important;
-  }
-  .readOnly .MuiSwitch-input {
-    cursor: not-allowed;
-  }
-  .text {
-    display: inline;
-    font-family: Lato;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 22px;
-    color: #89A2A7;
-    margin-left: 6px;
-    margin-right: 6px;
-  }
-  .textChecked {
-    display: inline;
-    font-family: Lato;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 22px;
-    color: #4E5F63;
-    margin-left: 6px;
-    margin-right: 6px;
-  }
-  .input {
-    display: none;
-  }
+const GridStyled = styled(Grid)({
+  "& .switchRoot": {
+    width: "65px",
+    height: "35px",
+    padding: 0,
+  },
+  "& .switchBase": {
+    paddingTop: "5px",
+    paddingLeft: "7px",
+  },
+  "& .thumb": {
+    color: "#1D91AB",
+    width: "25px",
+    height: "25px",
+    boxShadow: "none",
+  },
+  "& .MuiSwitch-switchBase.Mui-checked": {
+    transform: "translateX(26px)",
+  },
+  "& .track": {
+    borderRadius: "60px",
+    backgroundColor: "#FFFFFF",
+    border: "1px solid #DBDBDB",
+    opacity: 1,
+  },
+  "& .MuiSwitch-track": {
+    backgroundColor: "white !important",
+  },
+  "& .readOnly .MuiSwitch-track": {
+    backgroundColor: "#E5EEF4 !important",
+  },
+  "& .readOnly .MuiSwitch-input": {
+    cursor: "not-allowed",
+  },
+  "& .text": {
+    display: "inline",
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#89A2A7",
+    marginLeft: "6px",
+    marginRight: "6px",
+  },
+  "& .textChecked": {
+    display: "inline",
+    fontFamily: "Lato",
+    fontStyle: "normal",
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "22px",
+    color: "#4E5F63",
+    marginLeft: "6px",
+    marginRight: "6px",
+  },
+  "& .input": {
+    display: "none",
+  },
+  "& .asterisk": {
+    color: "#D54309",
+    marginLeft: "2px",
+  },
+  "& .labelContainer": {
+    color: "#083A50",
+    display: "flex",
+    alignItems: "center",
+    height: "20px",
+  },
+  "& .switchYesNoContainer": {
+    display: "flex",
+    alignItems: "center",
+    marginRight: "72px",
+    minHeight: "50px",
+  },
+  "& .tooltip": {
+    alignSelf: "start",
+    marginLeft: "6px",
+  },
+  "& .errorMessage": {
+    color: "#D54309 !important",
+    marginTop: "44px",
+    marginLeft: "8px",
+    minHeight: "20px",
+    width: "fit-content",
+    position: "absolute",
+  },
+  "& .switchErrorContainer": {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
 
-  .asterisk {
-    color: #D54309;
-    margin-left: 2px;
-  }
-  .labelContainer {
-    color: #083A50;
-    display: flex;
-    align-items: center;
-    height: 20px;
-  }
-  .switchYesNoContainer {
-    display: flex;
-    align-items: center;
-    margin-right: 72px;
-    min-height: 50px;
-  }
-  .tooltip {
-    align-self: start;
-    margin-left: 6px;
-  }
-  .errorMessage {
-    color: #D54309 !important;
-    margin-top: 44px;
-    margin-left: 8px;
-    min-height: 20px;
-    width: fit-content;
-    position: absolute;
-  }
-  .switchErrorContainer {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-const Container = styled.div<{ $containerWidth?: string; }>`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 16px;
-  font-family: Nunito;
-  font-weight: 700;
-  line-height: 19.6px;
-  min-height: 50px;
-  flex-wrap: wrap;
-  width: ${(props) => props.$containerWidth};
-`;
+const Container = styled("div", {
+  shouldForwardProp: (prop) => prop !== "containerWidth",
+})<HTMLProps<HTMLDivElement> & { containerWidth?: string }>(
+  ({ containerWidth }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: "16px",
+    fontFamily: "'Nunito', 'Rubik', sans-serif",
+    fontWeight: 700,
+    lineHeight: "19.6px",
+    minHeight: "50px",
+    flexWrap: "wrap",
+    width: containerWidth,
+  })
+);
 
 const HideContentWrapper = styled("div")({
-  display: "none !important"
+  display: "none !important",
 });
 
 type Props = {
@@ -211,7 +221,7 @@ const CustomSwitch: FC<Props> = ({
 
   return (
     <GridStyled md={gridWidth || 6} xs={12} item sx={sx}>
-      <Container $containerWidth={containerWidth}>
+      <Container containerWidth={containerWidth}>
         <div className="labelContainer">
           {label && (
             <label htmlFor={id} id={`${id}-label`}>
diff --git a/src/content/index.tsx b/src/content/index.tsx
index 59aae5d9..a5340262 100644
--- a/src/content/index.tsx
+++ b/src/content/index.tsx
@@ -1,122 +1,118 @@
-import React, { FC, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { Dialog } from "@mui/material";
-import { Link, useLocation } from 'react-router-dom';
-import background from '../assets/loginPage/background.png';
-import { useAuthContext } from '../components/Contexts/AuthContext';
+import React, { FC, useState, useEffect } from "react";
+import { Dialog, styled } from "@mui/material";
+import { Link, useLocation } from "react-router-dom";
+import background from "../assets/loginPage/background.png";
+import { useAuthContext } from "../components/Contexts/AuthContext";
 
-const LoginDialog = styled(Dialog)`
-  .MuiDialog-paper {
-    width: 550px;
-    height: 218px;
-    border-radius: 8px;
-    border: 2px solid var(--secondary-one, #0B7F99);
-    background: linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B;
-    box-shadow: 0px 4px 45px 0px rgba(0, 0, 0, 0.40);
-  }
-  .buttonContainer {
-    display: flex;
-    justify-content: center;
-  }
-  .loginDialogText {
-    margin-top: 57px;
-    /* Body */
-    font-family: Nunito;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 19.6px; /* 122.5% */
-    text-align: center;
-  }
-  .loginDialogButton{
-    display: flex;
-    width: 128px;
-    height: 42px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    border: 1px solid #000;
-    margin-top: 39px;
-    text-decoration: none;
-    color: rgba(0, 0, 0, 0.87);
-    margin-left: 7px;
-    margin-right: 7px;
-  }
-  .loginDialogButton:hover {
-    cursor: pointer;
-  }
-  #loginDialogLinkToLogin{
-    color:black;
-  }
-`;
+const LoginDialog = styled(Dialog)({
+  "& .MuiDialog-paper": {
+    width: "550px",
+    height: "218px",
+    borderRadius: "8px",
+    border: "2px solid var(--secondary-one, #0B7F99)",
+    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
+    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
+  },
+  "& .buttonContainer": {
+    display: "flex",
+    justifyContent: "center",
+  },
+  "& .loginDialogText": {
+    marginTop: "57px",
+    fontFamily: "Nunito",
+    fontSize: "16px",
+    fontStyle: "normal",
+    fontWeight: 400,
+    lineHeight: "19.6px",
+    textAlign: "center",
+  },
+  "& .loginDialogButton": {
+    display: "flex",
+    width: "128px",
+    height: "42px",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "8px",
+    border: "1px solid #000",
+    marginTop: "39px",
+    textDecoration: "none",
+    color: "rgba(0, 0, 0, 0.87)",
+    marginLeft: "7px",
+    marginRight: "7px",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+  "& #loginDialogLinkToLogin": {
+    color: "black",
+  },
+});
 
-const PageContentContainer = styled.div`
-  width: 100%;
-  height: 633px;
-  margin: auto;
-  background-image: url(${background});
-  background-blend-mode: luminosity, normal;
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: flex;
-  justify-content: center;
-
-  .loginPageTextContainer {
-    width: 775px;
-    height: 265px;
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    align-items: center;
-    align-self: center;
-    justify-content: center;
-
-
-    border-radius: 5px;
-    border: 2px solid #C8E3FC;
-    background: #091a1961;
-    background-blend-mode: multiply;
-    box-shadow: -1px -1px 6px 0px rgba(62, 102, 125, 0.25), -1px -1px 6px 0px rgba(76, 121, 147, 0.25);
-  }
-  .loginPageTextTitle {
-    font-family: Nunito Sans;
-    font-size: 40px;
-    font-weight: 800;
-    line-height: 40px;
-    letter-spacing: -1.5px;
-    text-align: center;
-    color: #FFFFFF;
-    margin: 0;
-  }
-  .loginPageText{
-    font-family: Inter;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: 0em;
-    text-align: center;
-    margin-top: 30px;
-    color: #86E2F6;
-    margin-left: 30px;
-    margin-right: 30px;
-  }
-  .loginPageLoginButton{
-    display: flex;
-    width: 128px;
-    height: 51px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    border: 2px solid #005EA2;
-    margin-top: 30px;
-    text-decoration: none;
-    color: #3F53B2;
-    background: #FFFFFF;
-  }
-  .loginPageLoginButton:hover {
-    cursor: pointer;
-  }
-`;
+const PageContentContainer = styled("div")({
+  width: "100%",
+  height: "633px",
+  margin: "auto",
+  backgroundImage: `url(${background})`,
+  backgroundBlendMode: "luminosity, normal",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+  display: "flex",
+  justifyContent: "center",
+  "& .loginPageTextContainer": {
+    width: "775px",
+    height: "265px",
+    display: "flex",
+    flexDirection: "column",
+    textAlign: "center",
+    alignItems: "center",
+    alignSelf: "center",
+    justifyContent: "center",
+    borderRadius: "5px",
+    border: "2px solid #C8E3FC",
+    background: "#091a1961",
+    backgroundBlendMode: "multiply",
+    boxShadow:
+      "-1px -1px 6px 0px rgba(62, 102, 125, 0.25), -1px -1px 6px 0px rgba(76, 121, 147, 0.25)",
+  },
+  "& .loginPageTextTitle": {
+    fontFamily: "'Nunito Sans', 'Rubik', sans-serif",
+    fontSize: "40px",
+    fontWeight: 800,
+    lineHeight: "40px",
+    letterSpacing: "-1.5px",
+    textAlign: "center",
+    color: "#FFFFFF",
+    margin: 0,
+  },
+  "& .loginPageText": {
+    fontFamily: "'Inter', 'Rubik', sans-serif",
+    fontSize: "16px",
+    fontWeight: 400,
+    lineHeight: "22px",
+    letterSpacing: "0em",
+    textAlign: "center",
+    marginTop: "30px",
+    color: "#86E2F6",
+    marginLeft: "30px",
+    marginRight: "30px",
+  },
+  "& .loginPageLoginButton": {
+    display: "flex",
+    width: "128px",
+    height: "51px",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "8px",
+    border: "2px solid #005EA2",
+    marginTop: "30px",
+    textDecoration: "none",
+    color: "#3F53B2",
+    background: "#FFFFFF",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+});
 
 const Home: FC = () => {
     const [showRedirectDialog, setShowRedirectDialog] = useState(false);
diff --git a/src/content/questionnaire/FormView.tsx b/src/content/questionnaire/FormView.tsx
index e3287504..2f6773ff 100644
--- a/src/content/questionnaire/FormView.tsx
+++ b/src/content/questionnaire/FormView.tsx
@@ -1,45 +1,54 @@
-import React, { FC, createRef, useEffect, useRef, useState } from 'react';
+import React, { FC, createRef, useEffect, useRef, useState } from "react";
 import {
   useNavigate,
-  unstable_useBlocker as useBlocker, unstable_Blocker as Blocker, Navigate
-} from 'react-router-dom';
-import { isEqual, cloneDeep } from 'lodash';
-import { Alert, AlertColor, Button, Container, Divider, Stack, styled } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
-import ForwardArrowIcon from '@mui/icons-material/ArrowForwardIos';
-import BackwardArrowIcon from '@mui/icons-material/ArrowBackIos';
-import { Status as FormStatus, useFormContext } from '../../components/Contexts/FormContext';
-import SuspenseLoader from '../../components/SuspenseLoader';
-import StatusBar from '../../components/StatusBar/StatusBar';
-import ProgressBar from '../../components/ProgressBar/ProgressBar';
-import Section from './sections';
-import map, { InitialSections } from '../../config/SectionConfig';
-import UnsavedChangesDialog from '../../components/Questionnaire/UnsavedChangesDialog';
-import SubmitFormDialog from '../../components/Questionnaire/SubmitFormDialog';
-import useFormMode from './sections/hooks/useFormMode';
-import InquireFormDialog from '../../components/Questionnaire/InquireFormDialog';
-import RejectFormDialog from '../../components/Questionnaire/RejectFormDialog';
-import ApproveFormDialog from '../../components/Questionnaire/ApproveFormDialog';
-import PageBanner from '../../components/PageBanner';
+  unstable_useBlocker as useBlocker,
+  unstable_Blocker as Blocker,
+  Navigate,
+} from "react-router-dom";
+import { isEqual, cloneDeep } from "lodash";
+import {
+  Alert,
+  AlertColor,
+  Container,
+  Divider,
+  Stack,
+  styled,
+} from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import ForwardArrowIcon from "@mui/icons-material/ArrowForwardIos";
+import BackwardArrowIcon from "@mui/icons-material/ArrowBackIos";
+import {
+  Status as FormStatus,
+  useFormContext,
+} from "../../components/Contexts/FormContext";
+import SuspenseLoader from "../../components/SuspenseLoader";
+import StatusBar from "../../components/StatusBar/StatusBar";
+import ProgressBar from "../../components/ProgressBar/ProgressBar";
+import Section from "./sections";
+import map, { InitialSections } from "../../config/SectionConfig";
+import UnsavedChangesDialog from "../../components/Questionnaire/UnsavedChangesDialog";
+import SubmitFormDialog from "../../components/Questionnaire/SubmitFormDialog";
+import useFormMode from "./sections/hooks/useFormMode";
+import InquireFormDialog from "../../components/Questionnaire/InquireFormDialog";
+import RejectFormDialog from "../../components/Questionnaire/RejectFormDialog";
+import ApproveFormDialog from "../../components/Questionnaire/ApproveFormDialog";
+import PageBanner from "../../components/PageBanner";
 import bannerPng from "../../assets/banner/submission_banner.png";
-import GenericAlert from '../../components/GenericAlert';
-import { Status as AuthStatus, useAuthContext } from '../../components/Contexts/AuthContext';
-import ErrorCodes from '../../config/ErrorCodes';
+import GenericAlert from "../../components/GenericAlert";
+import {
+  Status as AuthStatus,
+  useAuthContext,
+} from "../../components/Contexts/AuthContext";
+import ErrorCodes from "../../config/ErrorCodes";
 
 const StyledContainer = styled(Container)(() => ({
   "&.MuiContainer-root": {
     padding: 0,
     minHeight: "300px",
     scrollMarginTop: "-60px",
-  }
+  },
 }));
 
-type Props = {
-  section?: string;
-};
-
-const validateSection = (section: string) => typeof map[section] !== 'undefined';
-
 const StyledSidebar = styled(Stack)({
   position: "sticky",
   top: 0,
@@ -62,13 +71,13 @@ const StyledAlert = styled(Alert)({
   fontWeight: 400,
   fontSize: "16px",
   fontFamily: "'Nunito', 'Rubik', sans-serif",
-  scrollMarginTop: "64px"
+  scrollMarginTop: "64px",
 });
 
 const StyledContent = styled(Stack)({
   width: "100%",
   maxWidth: "980px",
-  marginLeft: '41px',
+  marginLeft: "41px",
 });
 
 const StyledControls = styled(Stack)({
@@ -79,7 +88,7 @@ const StyledControls = styled(Stack)({
     padding: "14px 11px",
     minWidth: "128px",
     fontWeight: 700,
-    fontSize: '16px',
+    fontSize: "16px",
     fontFamily: "'Nunito', 'Rubik', sans-serif",
     letterSpacing: "0.32px",
     lineHeight: "20.14px",
@@ -104,28 +113,14 @@ const StyledControls = styled(Stack)({
     marginRight: "20px",
   },
   "& .MuiButton-endIcon": {
-    marginLeft: "20px"
+    marginLeft: "20px",
   },
   "& .MuiSvgIcon-root": {
-    fontSize: "20px"
-  }
-});
-
-const StyledBackButton = styled(Button)({
-  "&.MuiButton-root": {
-    display: "flex",
-    justifyContent: "flex-start"
-  }
-});
-
-const StyledSaveLoadingButton = styled(LoadingButton)({
-  "&.MuiButton-root": {
-    borderColor: "#26B893",
-    background: "#22A584"
-  }
+    fontSize: "20px",
+  },
 });
 
-const StyledSubmitLoadingButton = styled(LoadingButton)({
+const StyledBaseLoadingButton = styled(LoadingButton)({
   "&.MuiButton-root": {
     display: "flex",
     width: "128px",
@@ -135,36 +130,66 @@ const StyledSubmitLoadingButton = styled(LoadingButton)({
     alignItems: "center",
     flexShrink: 0,
     borderRadius: "8px",
+    textAlign: "center",
+    fontFamily: "'Nunito', 'Rubik', sans-serif",
+    fontSize: "16px",
+    fontStyle: "normal",
+    fontWeight: 700,
+    lineHeight: "16px",
+    letterSpacing: "0.32px",
+    "& .MuiSvgIcon-root": {
+      fontSize: "20px",
+    },
+  },
+});
+
+const StyledBackButton = styled(StyledBaseLoadingButton)({
+  "&.MuiButton-root": {
+    justifyContent: "flex-start",
+  },
+});
+
+const StyledSaveLoadingButton = styled(StyledBaseLoadingButton)({
+  "&.MuiButton-root": {
+    borderColor: "#26B893",
+    background: "#22A584",
+  },
+});
+
+const StyledSubmitLoadingButton = styled(StyledBaseLoadingButton)({
+  "&.MuiButton-root": {
     border: "1px solid #828282",
     background: "#0B7F99",
-  }
+  },
 });
 
-const StyledApproveLoadingButton = styled(LoadingButton)({
+const StyledApproveLoadingButton = styled(StyledBaseLoadingButton)({
   "&.MuiButton-root": {
     borderColor: "#26B893",
-    background: "#22A584"
-  }
+    background: "#22A584",
+  },
 });
-const StyledInquireLoadingButton = styled(LoadingButton)({
+const StyledInquireLoadingButton = styled(StyledBaseLoadingButton)({
   "&.MuiButton-root": {
     borderColor: "#26B893",
-    background: "#D54309"
-  }
+    background: "#D54309",
+  },
 });
-const StyledRejectLoadingButton = styled(LoadingButton)({
+const StyledRejectLoadingButton = styled(StyledBaseLoadingButton)({
   "&.MuiButton-root": {
     borderColor: "#26B893",
-    background: "#D54309"
-  }
+    background: "#D54309",
+  },
 });
-const StyledNextButton = styled(LoadingButton)({
+const StyledNextButton = styled(StyledBaseLoadingButton)({
   "&.MuiButton-root": {
     display: "flex",
-    justifyContent: "flex-end"
-  }
+    justifyContent: "flex-end",
+  },
 });
 
+const validateSection = (section: string) => typeof map[section] !== "undefined";
+
 export type SaveForm =
   | { status: "success"; id: string }
   | { status: "failed"; errorMessage: string };
@@ -174,6 +199,10 @@ type AlertState = {
   severity: AlertColor;
 };
 
+type Props = {
+  section?: string;
+};
+
 /**
  * Intake Form View Component
  *
diff --git a/src/content/questionnaire/sections/D.tsx b/src/content/questionnaire/sections/D.tsx
index 420eec61..efc4b199 100644
--- a/src/content/questionnaire/sections/D.tsx
+++ b/src/content/questionnaire/sections/D.tsx
@@ -2,11 +2,20 @@ import React, { FC, useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { parseForm } from "@jalik/form-parser";
 import { cloneDeep } from "lodash";
-import styled from 'styled-components';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  styled,
+} from "@mui/material";
 import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
-import { Status as FormStatus, useFormContext } from "../../../components/Contexts/FormContext";
+import {
+  Status as FormStatus,
+  useFormContext,
+} from "../../../components/Contexts/FormContext";
 import FormContainer from "../../../components/Questionnaire/FormContainer";
 import SectionGroup from "../../../components/Questionnaire/SectionGroup";
 import SwitchInput from "../../../components/Questionnaire/SwitchInput";
@@ -25,110 +34,109 @@ export type KeyedFileTypeData = {
   key: string;
 } & FileInfo;
 
-const TableContainer = styled.div`
-    margin-left: 12px;
-    margin-bottom: 24px;
-    display: flex;
-    width: 100%;
-    border: 1px solid #6B7294;
-    border-radius: 10px;
-    overflow: hidden;
-    .readOnly {
-      background-color: #E5EEF4;
-      color: #083A50;
-      cursor: not-allowed;
-    }
-    .MuiTableContainer-root {
-      width: 100%;
-      margin-left: 12px;
-      overflow-y: visible;
-      height: 200px;
-    }
-    th {
-      color: #083A50;
-      font-size: 16px;
-      font-family: Nunito;
-      font-weight: 700;
-      line-height: 19.6px;
-    }
-    table {
-      overflow-y: visible;
-    }
-
-    .noBorder {
-      border: none;
-    }
-    .topRowLast {
-      border: none;
-      padding: 10px 8px 10px 8px;
-      text-align: center;
-    }
-    .fileTypeTableCell{
-      border-top: none;
-      border-right: 1px solid #6B7294;
-      border-bottom: none;
-      border-left: none;
-      padding: 10px 20px 10px 20px;
-      text-align:center;
-    }
-    .tableTopRowMiddle {
-      border-top: none;
-      border-right: 1px solid #6B7294;
-      border-bottom: none;
-      border-left: none;
-      padding: 10px 10px 10px 10px;
-      text-align: center;
-    }
-    .bottomRowMiddle {
-      border-top: 1px solid #6B7294;
-      border-right: 1px solid #6B7294;
-      border-bottom: none;
-      border-left: none;
-      padding: 10px 10px 10px 10px;
-    }
-    .bottomRowLast {
-      border-top: 1px solid #6B7294;
-      border-right: none;
-      border-bottom: none;
-      border-left: none;
-      text-align: center;
-      padding: 10px;
-      width: 20px;
-      min-width: 0;
-    }
-    .autoComplete {
-      border-top: 1px solid #6B7294 !important;
-      border-right: 1px solid #6B7294 !important;
-      border-bottom: none !important;
-      border-left: none !important;
-      padding: 10px 12px 10px 15px;
-      .MuiStack-root {
-        width: auto;
-      }
-    }
-    .removeButtonContainer {
-      margin: auto;
-      width: 23px;
-      .MuiStack-root {
-        width: auto;
-      }
-    }
-    .asterisk {
-      color: #D54309;
-      margin-left: 2px;
-    }
-    .MuiButton-startIcon {
-      margin: 0 !important;
-    }
-`;
+const TableContainer = styled("div")({
+  marginLeft: "12px",
+  marginBottom: "24px",
+  display: "flex",
+  width: "100%",
+  border: "1px solid #6B7294",
+  borderRadius: "10px",
+  overflow: "hidden",
+  "& .readOnly": {
+    backgroundColor: "#E5EEF4",
+    color: "#083A50",
+    cursor: "not-allowed",
+  },
+  "& .MuiTableContainer-root": {
+    width: "100%",
+    marginLeft: "12px",
+    overflowY: "visible",
+    height: "200px",
+  },
+  "& th": {
+    color: "#083A50",
+    fontSize: "16px",
+    fontFamily: "'Nunito', 'Rubik', sans-serif",
+    fontWeight: 700,
+    lineHeight: "19.6px",
+  },
+  "& table": {
+    overflowY: "visible",
+  },
+  "& .noBorder": {
+    border: "none",
+  },
+  "& .topRowLast": {
+    border: "none",
+    padding: "10px 8px",
+    textAlign: "center",
+  },
+  "& .fileTypeTableCell": {
+    borderTop: "none",
+    borderRight: "1px solid #6B7294",
+    borderBottom: "none",
+    borderLeft: "none",
+    padding: "10px 20px",
+    textAlign: "center",
+  },
+  "& .tableTopRowMiddle": {
+    borderTop: "none",
+    borderRight: "1px solid #6B7294",
+    borderBottom: "none",
+    borderLeft: "none",
+    padding: "10px 10px",
+    textAlign: "center",
+  },
+  "& .bottomRowMiddle": {
+    borderTop: "1px solid #6B7294",
+    borderRight: "1px solid #6B7294",
+    borderBottom: "none",
+    borderLeft: "none",
+    padding: "10px 10px",
+  },
+  "& .bottomRowLast": {
+    borderTop: "1px solid #6B7294",
+    borderRight: "none",
+    borderBottom: "none",
+    borderLeft: "none",
+    textAlign: "center",
+    padding: "10px",
+    width: "20px",
+    minWidth: "0",
+  },
+  "& .autoComplete": {
+    borderTop: "1px solid #6B7294 !important",
+    borderRight: "1px solid #6B7294 !important",
+    borderBottom: "none !important",
+    borderLeft: "none !important",
+    padding: "10px 12px 10px 15px",
+    "& .MuiStack-root": {
+      width: "auto",
+    },
+  },
+  "& .removeButtonContainer": {
+    margin: "auto",
+    width: "23px",
+    "& .MuiStack-root": {
+      width: "auto",
+    },
+  },
+  "& .asterisk": {
+    color: "#D54309",
+    marginLeft: "2px",
+  },
+  "& .MuiButton-startIcon": {
+    margin: "0 !important",
+  },
+});
 
-const InvisibleInput = styled.input`
-  height: 0;
-  width: 0;
-  padding: 0;
-  border: 0;
-  display: block;
-`;
+const InvisibleInput = styled("input")({
+  height: 0,
+  width: 0,
+  padding: 0,
+  border: 0,
+  display: "block",
+});
 
 const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSectionProps) => {
   const { status, data: { questionnaireData: data } } = useFormContext();

From e04ae0a22436a3fe6113e55d04ba7e0f87eb6b78 Mon Sep 17 00:00:00 2001
From: Alejandro-Vega <vegaalejandro15@gmail.com>
Date: Fri, 8 Dec 2023 11:14:13 -0500
Subject: [PATCH 3/3] Minor margin change

---
 src/components/Header/components/LogoMobile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header/components/LogoMobile.tsx b/src/components/Header/components/LogoMobile.tsx
index 58b3d905..95ec7aa6 100644
--- a/src/components/Header/components/LogoMobile.tsx
+++ b/src/components/Header/components/LogoMobile.tsx
@@ -6,7 +6,7 @@ const LogoArea = styled("div")({
   display: "flex",
 
   "& .logoContainer": {
-    marginTop: "35px",
+    marginTop: "32px",
   },
 });