diff --git a/admin-portal-frontend/.gitignore b/admin-portal-frontend/.gitignore
index fd3dbb5..5103432 100644
--- a/admin-portal-frontend/.gitignore
+++ b/admin-portal-frontend/.gitignore
@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+dfm-sideline-sidekick-app-firebase-adminsdk-mqgtq-32d66e30cf.json
diff --git a/admin-portal-frontend/package-lock.json b/admin-portal-frontend/package-lock.json
index 0eda86c..80a5ce3 100644
--- a/admin-portal-frontend/package-lock.json
+++ b/admin-portal-frontend/package-lock.json
@@ -10,12 +10,18 @@
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "bootstrap": "^5.3.3",
         "dotenv": "^16.4.5",
+        "firebase": "^10.10.0",
+        "fontawesome": "^5.6.3",
         "next": "14.1.4",
         "react": "^18",
         "react-bootstrap": "^2.10.2",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-router-dom": "^6.23.0"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
@@ -2250,6 +2256,592 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.4.tgz",
+      "integrity": "sha512-OJEl/8Oye/k+vJ1zV/1L6eGpc1XzAj+WG2TPznJ7PszL7sOFLBXkL9IjHfOCGDGpXeO3btozy/cYUqv4zgNeHg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.10.tgz",
+      "integrity": "sha512-ia68RcLQLLMFWrM10JfmFod7eJGwqr4/uyrtzHpTDnxGX/6gNCBTOuxdAbyWIqXI5XmcMQdz9hDijGKOHgDfPw==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.4",
+        "@firebase/analytics-types": "0.8.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.2.tgz",
+      "integrity": "sha512-EnzNNLh+9/sJsimsA/FGqzakmrAUKLeJvjRHlg8df1f97NLUlFidk9600y0ZgWOp3CAxn6Hjtk+08tixlUOWyw=="
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.5.tgz",
+      "integrity": "sha512-iY/fNot+hWPk9sTX8aHMqlcX9ynRvpGkskWAdUZ2eQQdLo8d1hSFYcYNwPv0Q/frGMasw8udKWMcFOEpC9fG8g==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.8.4.tgz",
+      "integrity": "sha512-2tjRDaxcM5G7BEpytiDcIl+NovV99q8yEqRMKDbn4J4i/XjjuThuB4S+4PkmTnZiCbdLXQiBhkVxNlUDcfog5Q==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.11.tgz",
+      "integrity": "sha512-t01zaH3RJpKEey0nGduz3Is+uSz7Sj4U5nwOV6lWb+86s5xtxpIvBJzu/lKxJfYyfZ29eJwpdjEgT1/lm4iQyA==",
+      "dependencies": {
+        "@firebase/app-check": "0.8.4",
+        "@firebase/app-check-types": "0.5.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.2.tgz",
+      "integrity": "sha512-LMs47Vinv2HBMZi49C09dJxp0QT5LwDzFaVGf/+ITHe3BlIhUiLNttkATSXplc89A2lAaeTqjgqVkiRfUGyQiQ=="
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.2.tgz",
+      "integrity": "sha512-FSOEzTzL5bLUbD2co3Zut46iyPWML6xc4x+78TeaXMSuJap5QObfb+rVvZJtla3asN4RwU7elaQaduP+HFizDA=="
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.35.tgz",
+      "integrity": "sha512-vgay/WRjeH0r97/Q6L6df2CMx7oyNFDsE5yPQ9oR1G+zx2eT0s8vNNh0WlKqQxUEWaOLRnXhQ8gy7uu0cBgTRg==",
+      "dependencies": {
+        "@firebase/app": "0.10.5",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.2.tgz",
+      "integrity": "sha512-oMEZ1TDlBz479lmABwWsWjzHwheQKiAgnuKxE0pz0IXCVx7/rtlkx1fQ6GfgK24WCrxDKMplZrT50Kh04iMbXQ=="
+    },
+    "node_modules/@firebase/auth": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.7.4.tgz",
+      "integrity": "sha512-d2Fw17s5QesojwebrA903el20Li9/YGgkoOGJjagM4I1qAT36APa/FcZ+OX86KxbYKCtQKTMqraU8pxG7C2JWA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.9.tgz",
+      "integrity": "sha512-RX8Zh/3zz2CsVbmYfgHkfUm4fAEPCl+KHVIImNygV5jTGDF6oKOhBIpf4Yigclyu8ESQKZ4elyN0MBYm9/7zGw==",
+      "dependencies": {
+        "@firebase/auth": "1.7.4",
+        "@firebase/auth-types": "0.12.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.3.tgz",
+      "integrity": "sha512-Fc9wuJGgxoxQeavybiuwgyi+0rssr76b+nHpj+eGhXFYAdudMWyfBHvFL/I5fEHniUM/UQdFzi9VXJK2iZF7FQ=="
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.12.2.tgz",
+      "integrity": "sha512-qsEBaRMoGvHO10unlDJhaKSuPn4pyoTtlQuP1ghZfzB6rNQPuhp/N/DcFZxm9i4v0SogjCbf9reWupwIvfmH6w==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.7.tgz",
+      "integrity": "sha512-baH1AA5zxfaz4O8w0vDwETByrKTQqB5CDjRls79Sa4eAGAoERw4Tnung7XbMl3jbJ4B/dmmtsMrdki0KikwDYA==",
+      "dependencies": {
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.5.tgz",
+      "integrity": "sha512-cAfwBqMQuW6HbhwI3Cb/gDqZg7aR0OmaJ85WUxlnoYW2Tm4eR0hFl5FEijI3/gYPUiUcUPQvTkGV222VkT7KPw==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-1.0.5.tgz",
+      "integrity": "sha512-NDSMaDjQ+TZEMDMmzJwlTL05kh1+0Y84C+kVMaOmNOzRGRM7VHi29I6YUhCetXH+/b1Wh4ZZRyp1CuWkd8s6hg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/database": "1.0.5",
+        "@firebase/database-types": "1.0.3",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.3.tgz",
+      "integrity": "sha512-39V/Riv2R3O/aUjYKh0xypj7NTNXNAK1bcgY5Kx+hdQPRS/aPTS8/5c0CGFYKgVuFbYlnlnhrCTYsh2uNhGwzA==",
+      "dependencies": {
+        "@firebase/app-types": "0.9.2",
+        "@firebase/util": "1.9.6"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.6.3.tgz",
+      "integrity": "sha512-d/+N2iUsiJ/Dc7fApdpdmmTXzwuTCromsdA1lKwYfZtMIOd1fI881NSLwK2wV4I38wkLnvfKJUV6WpU1f3/ONg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "@firebase/webchannel-wrapper": "1.0.0",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.3.32",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.32.tgz",
+      "integrity": "sha512-at71mwK7a/mUXH0OgyY0+gUzedm/EUydDFYSFsBoO8DYowZ23Mgd6P4Rzq/Ll3zI/3xJN7LGe7Qp4iE/V/3Arg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/firestore": "4.6.3",
+        "@firebase/firestore-types": "3.0.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.2.tgz",
+      "integrity": "sha512-wp1A+t5rI2Qc/2q7r2ZpjUXkRVPtGMd6zCLsiWurjsQpqPgFin3AhNibKcIzoF2rnToNa/XYtyWXuifjOOwDgg==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.11.5.tgz",
+      "integrity": "sha512-qrHJ+l62mZiU5UZiVi84t/iLXZlhRuSvBQsa2qvNLgPsEWR7wdpWhRmVdB7AU8ndkSHJjGlMICqrVnz47sgU7Q==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.7",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.11.tgz",
+      "integrity": "sha512-Qn+ts/M6Lj2/6i1cp5V5TRR+Hi9kyXyHbo+w9GguINJ87zxrCe6ulx3TI5AGQkoQa8YFHUhT3DMGmLFiJjWTSQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/functions": "0.11.5",
+        "@firebase/functions-types": "0.6.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.2.tgz",
+      "integrity": "sha512-0KiJ9lZ28nS2iJJvimpY4nNccV21rkQyor5Iheu/nq8aKXJqtJdeSlZDspjPSBBiHRzo7/GMUttegnsEITqR+w=="
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.7.tgz",
+      "integrity": "sha512-i6iGoXRu5mX4rTsiMSSKrgh9pSEzD4hwBEzRh5kEhOTr8xN/wvQcCPZDSMVYKwM2XyCPBLVq0JzjyerwL0Rihg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.7.tgz",
+      "integrity": "sha512-RPcbD+3nqHbnhVjIOpWK2H5qzZ8pAAAScceiWph0VNTqpKyPQ5tDcp4V5fS0ELpfgsHYvroMLDKfeHxpfvm8cw==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/installations-types": "0.5.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.2.tgz",
+      "integrity": "sha512-que84TqGRZJpJKHBlF2pkvc1YcXrtEDOVGiDjovP/a3s6W4nlbohGXEsBJo0JCeeg/UG9A+DEZVDUV9GpklUzA==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.2.tgz",
+      "integrity": "sha512-Q1VuA5M1Gjqrwom6I6NUU4lQXdo9IAQieXlujeHZWvRt1b7qQ0KwBaNAjgxG27jgF9/mUwsNmO8ptBCGVYhB0A==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.12.9",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.9.tgz",
+      "integrity": "sha512-IH+JJmzbFGZXV3+TDyKdqqKPVfKRqBBg2BfYYOy7cm7J+SwV+uJMe8EnDKYeQLEQhtpwciPfJ3qQXJs2lbxDTw==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.6",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.9.tgz",
+      "integrity": "sha512-5jN6wyhwPgBH02zOtmmoOeyfsmoD7ty48D1m0vVPsFg55RqN2Z3Q9gkZ5GmPklFPjTPLcxB1ObcHOZvThTkm7g==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/messaging": "0.12.9",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.2.tgz",
+      "integrity": "sha512-l68HXbuD2PPzDUOFb3aG+nZj5KA3INcPwlocwLZOzPp9rFM9yeuI9YLl6DQfguTX5eAGxO0doTR+rDLDvQb5tA=="
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.6.7.tgz",
+      "integrity": "sha512-d+Q4ltjdJZqjzcdms5i0UC9KLYX7vKGcygZ+7zHA/Xk+bAbMD2CPU0nWTnlNFWifZWIcXZ/2mAMvaGMW3lypUA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.7.tgz",
+      "integrity": "sha512-cb8ge/5iTstxfIGW+iiY+7l3FtN8gobNh9JSQNZgLC9xmcfBYWEs8IeEWMI6S8T+At0oHc3lv+b2kpRMUWr8zQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/performance": "0.6.7",
+        "@firebase/performance-types": "0.2.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.2.tgz",
+      "integrity": "sha512-gVq0/lAClVH5STrIdKnHnCo2UcPLjJlDUoEB/tB4KM+hAeHUxWKnpT0nemUPvxZ5nbdY/pybeyMe8Cs29gEcHA=="
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.4.7.tgz",
+      "integrity": "sha512-5oPNrPFLsbsjpq0lUEIXoDF2eJK7vAbyXe/DEuZQxnwJlfR7aQbtUlEkRgQWcicXpyDmAmDLo7q7lDbCYa6CpA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.7.tgz",
+      "integrity": "sha512-Fq0oneQ4SluLnfr5/HfzRS1TZf1ANj1rWbCCW3+oC98An3nE+sCdp+FSuHsEVNwgMg4Tkwx9Oom2lkKeU+Vn+w==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/remote-config": "0.4.7",
+        "@firebase/remote-config-types": "0.3.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.3.2.tgz",
+      "integrity": "sha512-0BC4+Ud7y2aPTyhXJTMTFfrGGLqdYXrUB9sJVAB8NiqJswDTc4/2qrE/yfUbnQJhbSi6ZaTTBKyG3n1nplssaA=="
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.12.5.tgz",
+      "integrity": "sha512-nGWBOGFNr10j0LA4NJ3/Yh3us/lb0Q1xSIKZ38N6FcS+vY54nqJ7k3zE3PENregHC8+8txRow++A568G3v8hOA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.8.tgz",
+      "integrity": "sha512-qDfY9kMb6Ch2hZb40sBjDQ8YPxbjGOxuT+gU1Z0iIVSSpSX0f4YpGJCypUXiA0T11n6InCXB+T/Dknh2yxVTkg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/storage": "0.12.5",
+        "@firebase/storage-types": "0.8.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.2.tgz",
+      "integrity": "sha512-0vWu99rdey0g53lA7IShoA2Lol1jfnPovzLDUBuon65K7uKG9G+L5uO05brD9pMw+l4HRFw23ah3GwTGpEav6g==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.6.tgz",
+      "integrity": "sha512-IBr1MZbp4d5MjBCXL3TW1dK/PDXX4yOGbiwRNh1oAbE/+ci5Uuvy9KIrsFYY80as1I0iOaD5oOMA9Q8j4TJWcw==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/vertexai-preview": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@firebase/vertexai-preview/-/vertexai-preview-0.0.2.tgz",
+      "integrity": "sha512-NOOL63kFQRq45ioi5P+hlqj/4LNmvn1URhGjQdvyV54c1Irvoq26aW861PRRLjrSMIeNeiLtCLD5pe+ediepAg==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.0.tgz",
+      "integrity": "sha512-zuWxyfXNbsKbm96HhXzainONPFqRcoZblQ++e9cAIGUuHfl2cFSBzW01jtesqWG/lqaUyX3H8O1y9oWboGNQBA=="
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.9.14",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz",
+      "integrity": "sha512-nOpuzZ2G3IuMFN+UPPpKrC6NsLmWsTqSsm66IRfnBt1D4pwTqE27lmbpcPM+l2Ua4gE7PfjRHI6uedAy7hoXUw==",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+      "integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -2578,6 +3170,60 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+    },
     "node_modules/@react-aria/ssr": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz",
@@ -2592,6 +3238,14 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@restart/hooks": {
       "version": "0.4.16",
       "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
@@ -2979,7 +3633,6 @@
       "version": "20.11.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
       "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -3292,7 +3945,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3301,7 +3953,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -3894,11 +4545,57 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3909,8 +4606,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -4538,7 +5234,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
       "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5160,6 +5855,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5205,6 +5911,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/firebase": {
+      "version": "10.12.2",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.12.2.tgz",
+      "integrity": "sha512-ZxEdtSvP1I9su1yf32D8TIdgxtPgxwr6z3jYAR1TXS/t+fVfpoPc/N1/N2bxOco9mNjUoc+od34v5Fn4GeKs6Q==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.4",
+        "@firebase/analytics-compat": "0.2.10",
+        "@firebase/app": "0.10.5",
+        "@firebase/app-check": "0.8.4",
+        "@firebase/app-check-compat": "0.3.11",
+        "@firebase/app-compat": "0.2.35",
+        "@firebase/app-types": "0.9.2",
+        "@firebase/auth": "1.7.4",
+        "@firebase/auth-compat": "0.5.9",
+        "@firebase/database": "1.0.5",
+        "@firebase/database-compat": "1.0.5",
+        "@firebase/firestore": "4.6.3",
+        "@firebase/firestore-compat": "0.3.32",
+        "@firebase/functions": "0.11.5",
+        "@firebase/functions-compat": "0.3.11",
+        "@firebase/installations": "0.6.7",
+        "@firebase/installations-compat": "0.2.7",
+        "@firebase/messaging": "0.12.9",
+        "@firebase/messaging-compat": "0.2.9",
+        "@firebase/performance": "0.6.7",
+        "@firebase/performance-compat": "0.2.7",
+        "@firebase/remote-config": "0.4.7",
+        "@firebase/remote-config-compat": "0.2.7",
+        "@firebase/storage": "0.12.5",
+        "@firebase/storage-compat": "0.3.8",
+        "@firebase/util": "1.9.6",
+        "@firebase/vertexai-preview": "0.0.2"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -5225,6 +5965,11 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/fontawesome": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz",
+      "integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg=="
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -5313,6 +6058,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -5580,6 +6333,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
     "node_modules/husky": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
@@ -5595,6 +6353,11 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -5820,7 +6583,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6237,6 +6999,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6249,6 +7016,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -7006,6 +7778,29 @@
         "react": ">=0.14.0"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.0.tgz",
+      "integrity": "sha512-YWD03n3shzV9ImZRX3ccbjqLxj7NokGN0V/ESiBV5xWqrommYHYiihuIyavq03pWSGqlyvYUFmfoMKd+1rPA/g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -7097,6 +7892,36 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -7242,6 +8067,14 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -7361,6 +8194,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -7683,7 +8535,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -8104,11 +8955,21 @@
         "react": ">=15.0.0"
       }
     },
+    "node_modules/undici": {
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
@@ -8203,6 +9064,27 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -8397,6 +9279,14 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -8415,6 +9305,49 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/admin-portal-frontend/package.json b/admin-portal-frontend/package.json
index 07b04ac..24f658c 100644
--- a/admin-portal-frontend/package.json
+++ b/admin-portal-frontend/package.json
@@ -16,12 +16,18 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.3.3",
     "dotenv": "^16.4.5",
+    "firebase": "^10.10.0",
+    "fontawesome": "^5.6.3",
     "next": "14.1.4",
     "react": "^18",
     "react-bootstrap": "^2.10.2",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-router-dom": "^6.23.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
diff --git a/admin-portal-frontend/src/app/components/Popup.tsx b/admin-portal-frontend/src/app/components/Popup.tsx
new file mode 100644
index 0000000..3766558
--- /dev/null
+++ b/admin-portal-frontend/src/app/components/Popup.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+
+type PopupProps = {
+  message: string;
+  onClose: () => void;
+};
+
+const Popup: React.FC<PopupProps> = ({ message, onClose }) => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white p-12 px-36 rounded-lg shadow-lg relative">
+        <button
+          className="absolute text-2xl top-2 right-4 text-gray-400 hover:text-gray-600"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+        <div className="flex items-center space-x-2">
+          <svg
+            className="h-6 w-6 text-green-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+          </svg>
+          <p className="text-green-500 font-semibold text-lg">{message}</p>
+        </div>
+        <div className="mt-6 flex justify-center">
+          <button className="bg-dfm-blue text-white py-2 px-8 rounded" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;
diff --git a/admin-portal-frontend/src/app/components/admin-cards.tsx b/admin-portal-frontend/src/app/components/admin-cards.tsx
new file mode 100644
index 0000000..a98979a
--- /dev/null
+++ b/admin-portal-frontend/src/app/components/admin-cards.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { collection, deleteDoc, doc, getDocs, getFirestore } from "firebase/firestore";
+import React, { useEffect, useState } from "react";
+
+import Popup from "./Popup";
+
+type Admin = {
+  firstName: string;
+  lastName: string;
+  title: string;
+  email: string;
+  phone: string;
+};
+
+const AdminCards: React.FC = () => {
+  const [admins, setAdmins] = useState<Admin[]>([]);
+  const [showModal, setShowModal] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [popupMessage, setPopupMessage] = useState("");
+  const db = getFirestore();
+
+  useEffect(() => {
+    const fetchAdmins = async () => {
+      try {
+        const querySnapshot = await getDocs(collection(db, "invitations"));
+        const adminsList = querySnapshot.docs.map((doc) => doc.data() as Admin);
+        setAdmins(adminsList);
+      } catch (error) {
+        console.error("Error fetching admins: ", error);
+      }
+    };
+
+    fetchAdmins();
+  }, [db]);
+
+  const deleteAdmin = async (id: string) => {
+    try {
+      await deleteDoc(doc(db, "invitations", id));
+      setAdmins(admins.filter((admin) => admin.email !== id));
+      setPopupMessage("Physician deleted!");
+      setShowPopup(true);
+    } catch (error) {
+      console.error("Error deleting admin: ", error);
+    }
+  };
+
+  //having trouble with deleting account from firebase auth
+  //   const deleteAdmin = async (email: string) => {
+  //     try {
+  //       const response = await fetch('/api/deleteAdmin', {
+  //         method: 'DELETE',
+  //         headers: {
+  //           'Content-Type': 'application/json',
+  //         },
+  //         body: JSON.stringify({ email }),
+  //       });
+
+  //       if (!response.ok) {
+  //         console.log('deletion error')
+  //         throw new Error('Failed to delete admin');
+  //       }
+
+  //       setAdmins(admins.filter(admin => admin.email !== email));
+  //       setPopupMessage('Physician deleted!');
+  //       setShowPopup(true);
+  //     } catch (error) {
+  //       console.error("Error deleting admin:", error);
+  //     }
+  //   };
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
+      {admins.map((admin, index) => (
+        <div key={index} className="bg-white shadow-md rounded-lg p-4 py-3">
+          <button
+            className="flex justify-end pt-1 w-full text-gray-500 hover:text-gray-900"
+            onClick={() => deleteAdmin(admin.email)}
+          >
+            <FontAwesomeIcon icon={faTrash} />
+          </button>
+          <div className="flex items-center space-x-4">
+            {/* <div className="w-16 h-16 rounded-full overflow-hidden">
+              <img src="" alt="admin picture" />
+            </div> */}
+            <div>
+              <h2 className="text-xl font-semibold text-gray-800">
+                {admin.firstName} {admin.lastName}
+              </h2>
+              <p className="text-gray-600">{admin.title}</p>
+            </div>
+          </div>
+          <div className="mt-4">
+            <p className="text-gray-600 truncate mb-0.5">{admin.email}</p>
+            <p className="text-gray-600">{admin.phone}</p>
+          </div>
+        </div>
+      ))}
+
+      {showPopup && (
+        <Popup
+          message={popupMessage}
+          onClose={() => {
+            setShowPopup(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AdminCards;
diff --git a/admin-portal-frontend/src/app/components/invite-admin.tsx b/admin-portal-frontend/src/app/components/invite-admin.tsx
new file mode 100644
index 0000000..a6ab52a
--- /dev/null
+++ b/admin-portal-frontend/src/app/components/invite-admin.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { doc, setDoc } from "firebase/firestore";
+import React, { ChangeEvent, FormEvent, useState } from "react";
+
+import { db } from "../firebase-config";
+
+const InviteAdmin = () => {
+  const [adminForm, setAdminForm] = useState({
+    firstName: "",
+    lastName: "",
+    title: "",
+    email: "",
+    phone: "",
+  });
+  const [error, setError] = useState("");
+  const [showModal, setShowModal] = useState(false);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setAdminForm({ ...adminForm, [name]: value });
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const { firstName, lastName, title, email, phone } = adminForm;
+
+    try {
+      await setDoc(doc(db, "invitations", email), { firstName, lastName, title, email, phone });
+      setShowModal(false);
+      setAdminForm({ firstName: "", lastName: "", title: "", email: "", phone: "" });
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unexpected error occurred");
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-end w-full p-4">
+      <button
+        className="bg-dfm-blue text-white py-2 px-4 rounded"
+        onClick={() => {
+          setShowModal(true);
+        }}
+      >
+        Add Admin
+      </button>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+          <div className="relative bg-white shadow-xl rounded-lg p-8 flex flex-col w-full max-w-md">
+            <button
+              onClick={() => {
+                setShowModal(false);
+              }}
+              className="absolute top-4 right-5 text-2xl text-gray-400 hover:text-gray-600"
+              aria-label="Close"
+            >
+              &times;
+            </button>
+            <h2 className="text-xl text-dfm-navy font-bold">Add a new Admin</h2>
+            <p className="mb-4 text-dfm-navy">
+              Register a physician to your admin directory below.
+            </p>
+            {/*eslint-disable-next-line @typescript-eslint/no-misused-promises*/}
+            <form onSubmit={handleSubmit} className="w-full">
+              <p className="font-semibold text-dfm-navy text-lg mb-1">Physician Details</p>
+              <div className="mb-4">
+                <label htmlFor="firstName" className="text-slate-600 block font-sm">
+                  First Name*
+                </label>
+                <input
+                  type="text"
+                  name="firstName"
+                  id="firstName"
+                  className="p-2 border w-full rounded border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
+                  onChange={handleInputChange}
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label htmlFor="lastName" className="block text-slate-600 font-sm">
+                  Last Name*
+                </label>
+                <input
+                  type="text"
+                  name="lastName"
+                  id="lastName"
+                  className="p-2 border w-full rounded border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
+                  onChange={handleInputChange}
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label htmlFor="title" className="block text-slate-600 font-sm">
+                  Title (ex. HS Clinical Professor)
+                </label>
+                <input
+                  type="text"
+                  name="title"
+                  id="title"
+                  className="p-2 border w-full rounded border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
+                  onChange={handleInputChange}
+                />
+              </div>
+              <p className="font-semibold text-lg mb-2 text-dfm-navy">Contact Info</p>
+              <div className="mb-4">
+                <label htmlFor="email" className="block text-slate-600 font-sm">
+                  Email*
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  className="p-2 border w-full rounded border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
+                  onChange={handleInputChange}
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label htmlFor="phone" className="block text-slate-600 font-sm">
+                  Phone Number (format: xxx-xxx-xxxx)
+                </label>
+                <input
+                  type="tel"
+                  name="phone"
+                  id="phone"
+                  className="p-2 border w-full rounded border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 mb-4"
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className="flex justify-end space-x-2">
+                <button
+                  type="button"
+                  className="text-dfm-blue py-2 px-4 rounded hover:bg-gray-600"
+                  onClick={() => {
+                    setShowModal(false);
+                  }}
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="bg-dfm-blue text-white py-2 px-4 rounded">
+                  Save
+                </button>
+              </div>
+              {error && <p className="text-red-600 text-sm mt-4">{error}</p>}
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InviteAdmin;
diff --git a/admin-portal-frontend/src/app/favicon.ico b/admin-portal-frontend/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/admin-portal-frontend/src/app/favicon.ico and /dev/null differ
diff --git a/admin-portal-frontend/src/app/firebase-admin.tsx b/admin-portal-frontend/src/app/firebase-admin.tsx
new file mode 100644
index 0000000..86d132d
--- /dev/null
+++ b/admin-portal-frontend/src/app/firebase-admin.tsx
@@ -0,0 +1,12 @@
+import admin from "firebase-admin";
+
+const serviceAccount = require("./dfm-sideline-sidekick-app-firebase-adminsdk-mqgtq-32d66e30cf.json");
+
+if (!admin.apps.length) {
+  admin.initializeApp({
+    credential: admin.credential.cert(serviceAccount),
+  });
+}
+
+export const auth = admin.auth();
+export const firestore = admin.firestore();
diff --git a/admin-portal-frontend/src/app/firebase-config.js b/admin-portal-frontend/src/app/firebase-config.js
new file mode 100644
index 0000000..deda810
--- /dev/null
+++ b/admin-portal-frontend/src/app/firebase-config.js
@@ -0,0 +1,18 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore();
+
+export { auth, db };
diff --git a/admin-portal-frontend/src/app/forgot-password/page.tsx b/admin-portal-frontend/src/app/forgot-password/page.tsx
new file mode 100644
index 0000000..40c7ffd
--- /dev/null
+++ b/admin-portal-frontend/src/app/forgot-password/page.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { sendPasswordResetEmail } from "firebase/auth";
+import { useRouter } from "next/navigation";
+import React, { ChangeEvent, FormEvent, useState } from "react";
+
+import { auth } from "../firebase-config";
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState<string>("");
+  const [message, setMessage] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  const buttonStyle =
+  email ? { backgroundColor: "#00629B" } : { backgroundColor: "#6C6C6C", cursor: "not-allowed" };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      await sendPasswordResetEmail(auth, email);
+      setMessage("Password reset email sent. Please check your inbox.");
+      setError("");
+    } catch (err) {
+      setError(
+        "Failed to send password reset email. Please check the email address and try again.",
+      );
+      setMessage("");
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="w-full max-w-md bg-white shadow-xl rounded-lg p-8 flex flex-col mx-4">
+        <a className="text-sm self-start text-sky-700 mt-4" href="/">
+          <FontAwesomeIcon className=" mr-2"icon={faArrowLeft}/>
+          {" "}
+          Back to Sign In
+        </a>
+        <h2 className="text-blue-950 text-lg sm:text-xl font-bold mt-4">Reset Your Password</h2>
+        <div className="block text-sm sm:text-base font-medium my-2">
+          Enter the email associated with your account and we'll send you a link to reset your password. 
+        </div>
+        <form onSubmit={handleSubmit} className="w-full">
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-sm sm:text-base font-medium my-2">
+              Email
+            </label>
+            <input
+              className="mb-2 p-2 border w-full rounded border-black border-opacity-40"
+              type="email"
+              name="email"
+              id="email"
+              placeholder="Enter an email"
+              onChange={handleInputChange}
+              required
+            />
+          </div>
+          <button 
+            type="submit" 
+            style={buttonStyle} 
+            className={`mb-2 p-2 w-full text-white font-medium rounded ${email ? "hover:bg-blue-700" : ""}`}
+            disabled={!email}
+            >
+            Continue
+          </button>
+          {message && <p className="text-green-600 text-sm mt-2">{message}</p>}
+          {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
+        </form>
+        <div className="mt-1 self-start text-sm">
+          <span>Don&apos;t have an account?</span>
+          <a className="text-sky-700" href="/signup">
+            {" "}
+            Create a new account.
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/admin-portal-frontend/src/app/globals.css b/admin-portal-frontend/src/app/globals.css
index 57e74d9..b3b1663 100644
--- a/admin-portal-frontend/src/app/globals.css
+++ b/admin-portal-frontend/src/app/globals.css
@@ -4,7 +4,7 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
+  --background-start-rgb: 229, 239, 245;
   --background-end-rgb: 255, 255, 255;
 }
 
@@ -18,8 +18,10 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
-    rgb(var(--background-start-rgb));
+  background-color: rgb(var(--background-start-rgb));
+  a {
+    text-decoration: none;
+  }
 }
 
 @layer utilities {
diff --git a/admin-portal-frontend/src/app/home/page.tsx b/admin-portal-frontend/src/app/home/page.tsx
new file mode 100644
index 0000000..b1754da
--- /dev/null
+++ b/admin-portal-frontend/src/app/home/page.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import AdminCards from "../components/admin-cards";
+import InviteAdmin from "../components/invite-admin";
+
+export default function Home() {
+  return (
+    <>
+      <InviteAdmin />
+      <AdminCards />
+    </>
+  );
+}
diff --git a/admin-portal-frontend/src/app/layout.tsx b/admin-portal-frontend/src/app/layout.tsx
index 3cb6942..96ea191 100644
--- a/admin-portal-frontend/src/app/layout.tsx
+++ b/admin-portal-frontend/src/app/layout.tsx
@@ -1,23 +1,40 @@
-import { Inter } from "next/font/google";
+"use client";
 
-import type { Metadata } from "next";
 import "./globals.css";
+import { Roboto } from "next/font/google";
+import { usePathname } from "next/navigation";
+import React, { ReactNode } from "react";
 
-const inter = Inter({ subsets: ["latin"] });
+import HorizontalNavBar from "./components/HorizontalNavbar";
+import VerticalNavBar from "./components/VerticalNavBar";
+import styles from "./pageStyles";
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+const roboto = Roboto({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const location = usePathname();
+  const showNavbar =
+    location !== "/" && location !== "/signup/" && location !== "/forgot-password/";
+  const mainClass = `flex min-h-screen flex-col antialiased bg-sky-100/50 ${showNavbar ? "pt-16 pl-60" : ""}`;
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={roboto.className}>
+        {showNavbar && (
+          <>
+            <div style={styles.verticalNavBar}>
+              <VerticalNavBar />
+            </div>
+            <div style={styles.horizontalNavBar}>
+              <HorizontalNavBar />
+            </div>
+          </>
+        )}
+        <main className={mainClass}>{children}</main>
+      </body>
     </html>
   );
 }
diff --git a/admin-portal-frontend/src/app/page.tsx b/admin-portal-frontend/src/app/page.tsx
index 6494e43..ca58578 100644
--- a/admin-portal-frontend/src/app/page.tsx
+++ b/admin-portal-frontend/src/app/page.tsx
@@ -1,20 +1,136 @@
-import React from "react";
+"use client";
 
-import HorizontalNavBar from "./components/HorizontalNavbar";
-import VerticalNavBar from "./components/VerticalNavBar";
-import styles from "./pageStyles";
+import {
+  browserLocalPersistence,
+  onAuthStateChanged,
+  setPersistence,
+  signInWithEmailAndPassword,
+} from "firebase/auth";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
+
+import { auth } from "./firebase-config";
+import search from "./symbols/search.png";
+
+type LoginForm = {
+  email: string;
+  password: string;
+};
+
+export default function Home() {
+  const [loginForm, setLoginForm] = useState<LoginForm>({ email: "", password: "" });
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  const buttonStyle =
+    loginForm.email && loginForm.password
+      ? { backgroundColor: "#00629B" }
+      : { backgroundColor: "#6C6C6C", cursor: "not-allowed" };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setLoginForm({ ...loginForm, [name]: value });
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const { email, password } = loginForm;
+
+    try {
+      //set auth persistence to local, allowing sessions to persist across browser tabs
+      await setPersistence(auth, browserLocalPersistence);
+      await signInWithEmailAndPassword(auth, email, password);
+      router.push("/home");
+    } catch (err) {
+      setError("The email or password is incorrect.");
+    }
+  };
+
+  useEffect(() => {
+    // listen to auth state changes and automatically navigate if authenticated
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user) {
+        router.push("/home");
+      }
+    });
+
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "visible";
+      unsubscribe(); // detach listener to prevent memory leaks
+    };
+  }, [loginForm.email, loginForm.password, router]);
 
-const AnotherPage: React.FC = () => {
   return (
-    <div>
-      <div style={styles.verticalNavBar}>
-        <VerticalNavBar />
-      </div>
-      <div style={styles.horizontalNavBar}>
-        <HorizontalNavBar />
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="w-full max-w-md bg-white shadow-xl rounded-lg p-8 flex flex-col items-center mx-4">
+        <Image src={search} alt="Search Icon" width={60} height={60} />
+        <h2 className="text-blue-950 text-lg sm:text-xl font-bold my-4">
+          Sideline Sidekick Admin Mode
+        </h2>
+        {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+        <form onSubmit={handleSubmit} className="w-full">
+          <div className="mb-2">
+            <label htmlFor="email" className="block text-sm sm:text-base font-medium mb-1">
+              Username
+            </label>
+            <input
+              className="mb-4 p-2 border w-full rounded border-black border-opacity-40"
+              type="text"
+              name="email"
+              id="email"
+              placeholder="Enter username or email"
+              onChange={handleInputChange}
+            />
+          </div>
+          <div className="mb-2">
+            <label htmlFor="password" className="block text-sm sm:text-base font-medium mb-1">
+              Password
+            </label>
+            <input
+              className="mb-4 p-2 border w-full rounded border-black border-opacity-40"
+              type="password"
+              name="password"
+              id="password"
+              placeholder="Enter password"
+              onChange={handleInputChange}
+            />
+          </div>
+          <div className="mb-6 flex items-center">
+            <input
+              id="remember-me"
+              type="checkbox"
+              className="mr-2 h-4 w-4 accent-blue border-2 border-blue-900"
+              name="rememberMe"
+            />
+            <label htmlFor="remember-me" className="text-sm">
+              Remember me
+            </label>
+          </div>
+          <div className="mb-4">
+            <button
+              type="submit"
+              style={buttonStyle}
+              className={`p-2 w-full text-white font-bold rounded ${loginForm.email && loginForm.password ? "hover:bg-blue-700" : ""}`}
+              disabled={!loginForm.email || !loginForm.password}
+            >
+              Log in
+            </button>
+            {error && <p className="text-red-600 text-sm">{error}</p>}
+          </div>
+        </form>
+        <a className="text-sm self-start text-sky-700" href="/forgot-password">
+          I forgot my username or password
+        </a>
+        <div className="mt-1 self-start text-sm">
+          <span>Don&apos;t have an account?</span>
+          <a className="text-sky-700" href="/signup">
+            {" "}
+            Create a new account.
+          </a>
+        </div>
       </div>
     </div>
   );
-};
-
-export default AnotherPage;
+}
diff --git a/admin-portal-frontend/src/app/pageStyles.tsx b/admin-portal-frontend/src/app/pageStyles.tsx
index 3fc8506..e5c5cf5 100644
--- a/admin-portal-frontend/src/app/pageStyles.tsx
+++ b/admin-portal-frontend/src/app/pageStyles.tsx
@@ -16,6 +16,8 @@ const styles: Styles = {
   },
   horizontalNavBar: {
     height: "72px",
+    // zIndex: 1,
+    // position: 'absolute' as const
     zIndex: 100,
     position: "fixed",
   },
diff --git a/admin-portal-frontend/src/app/pages/api/Delete-Admin.tsx b/admin-portal-frontend/src/app/pages/api/Delete-Admin.tsx
new file mode 100644
index 0000000..166ef92
--- /dev/null
+++ b/admin-portal-frontend/src/app/pages/api/Delete-Admin.tsx
@@ -0,0 +1,30 @@
+// pages/api/deleteAdmin.ts
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { auth, firestore } from "../../firebase-admin";
+
+const deleteAdmin = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === "DELETE") {
+    const { email } = req.body;
+
+    try {
+      // Delete the admin from Firestore
+      const docRef = firestore.collection("invitations").doc(email);
+      await docRef.delete();
+
+      // Delete the admin from Firebase Authentication
+      const user = await auth.getUserByEmail(email);
+      await auth.deleteUser(user.uid);
+
+      res.status(200).json({ message: "Admin deleted successfully" });
+    } catch (error) {
+      console.error("Error deleting admin:", error);
+      res.status(500).json({ error: "Failed to delete admin" });
+    }
+  } else {
+    res.setHeader("Allow", ["DELETE"]);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+};
+
+export default deleteAdmin;
diff --git a/admin-portal-frontend/src/app/signup/page.tsx b/admin-portal-frontend/src/app/signup/page.tsx
new file mode 100644
index 0000000..4738d13
--- /dev/null
+++ b/admin-portal-frontend/src/app/signup/page.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { FirebaseError } from "firebase/app";
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { doc, getDoc, getFirestore } from "firebase/firestore";
+import { useRouter } from "next/navigation";
+import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
+
+import { auth } from "../firebase-config";
+
+type SignUpForm = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  username: string;
+  password: string;
+};
+
+const formatFirebaseError = (error: any): string => {
+  // Log the error to understand its structure
+  console.log("Firebase error:", error);
+
+  // Check if the error has a code property and it's a string
+  if (error?.code && typeof error.code === "string") {
+    const errorParts = error.code.split("/");
+    if (errorParts.length > 1) {
+      const errorCode = errorParts[1];
+      return errorCode
+        .split("-")
+        .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+    }
+  }
+
+  // Fallback if error.code doesn't exist or isn't in the expected format
+  return "An unexpected error occurred";
+};
+
+export default function SignUp() {
+  const db = getFirestore();
+  const [signUpForm, setSignUpForm] = useState<SignUpForm>({
+    firstName: "",
+    lastName: "",
+    email: "",
+    username: "",
+    password: "",
+  });
+
+  const buttonStyle =
+    signUpForm.email &&
+    signUpForm.password &&
+    signUpForm.firstName &&
+    signUpForm.lastName &&
+    signUpForm.username
+      ? { backgroundColor: "#00629B" }
+      : { backgroundColor: "#6C6C6C", cursor: "not-allowed" };
+
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setSignUpForm({ ...signUpForm, [name]: value });
+  };
+
+  const checkInvitation = async (email: string) => {
+    //checks if email has an invite
+    const inviteRef = doc(db, "invitations", email);
+    const inviteSnap = await getDoc(inviteRef);
+    return inviteSnap.exists();
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const { email, password } = signUpForm;
+    console.log("Here");
+
+    try {
+      const invited = await checkInvitation(email);
+      console.log(invited);
+      if (!invited) {
+        setError("You must be invited to create an account.");
+        return;
+      }
+
+      await createUserWithEmailAndPassword(auth, email, password);
+      router.push("/home");
+    } catch (err) {
+      if (err instanceof FirebaseError) {
+        const friendlyError = formatFirebaseError(err);
+        setError(friendlyError);
+      } else {
+        setError("Unexpected error occurred.");
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "visible";
+    };
+  });
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="bg-white shadow-lg rounded-lg p-16 flex flex-col items-center">
+        <div className="text-2xl font-bold text-blue-950 my-4">Create an Admin Mode Account</div>
+        {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+        <form onSubmit={handleSubmit} className="w-5/6">
+          <div className="flex gap-4 mb-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium mb-1">
+                First Name
+              </label>
+              <input
+                className="p-2 border w-full rounded border-black border-opacity-40"
+                type="text"
+                name="firstName"
+                placeholder="Enter your first name"
+                onChange={handleInputChange}
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium mb-1">
+                Last Name
+              </label>
+              <input
+                className="p-2 border w-full rounded border-black border-opacity-40"
+                type="text"
+                name="lastName"
+                placeholder="Enter your last name"
+                onChange={handleInputChange}
+                required
+              />
+            </div>
+          </div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1">
+            Enter your email
+          </label>
+          <input
+            className="p-2 border w-full rounded mb-4 border-black border-opacity-40"
+            type="email"
+            name="email"
+            placeholder="Enter your UCSD affiliated email"
+            onChange={handleInputChange}
+            required
+          />
+          <label htmlFor="username" className="block text-sm font-medium mb-1">
+            Create a Username
+          </label>
+          <input
+            className="p-2 border w-full rounded mb-4 border-black border-opacity-40"
+            type="text"
+            name="username"
+            placeholder="Type in a username"
+            onChange={handleInputChange}
+            required
+          />
+          <label htmlFor="password" className="block text-sm font-medium mb-1">
+            Create a Password
+          </label>
+          <input
+            className="mb-4 p-2 border w-full rounded border-black border-opacity-40"
+            type="password"
+            name="password"
+            placeholder="Create a Password"
+            onChange={handleInputChange}
+            required
+          />
+          <button
+            type="submit"
+            style={buttonStyle}
+            className={`p-2 w-full text-white font-bold rounded ${signUpForm.email && signUpForm.password && signUpForm.firstName && signUpForm.lastName && signUpForm.username ? "hover:bg-blue-700" : ""}`}
+            disabled={
+              !signUpForm.email ||
+              !signUpForm.password ||
+              !signUpForm.firstName ||
+              !signUpForm.lastName ||
+              !signUpForm.username
+            }
+          >
+            Create
+          </button>
+          {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
+        </form>
+        <div className="text-sm mt-4">
+          Reach out to William Andrew if you have trouble with making an account.
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/admin-portal-frontend/src/app/symbols/search.png b/admin-portal-frontend/src/app/symbols/search.png
new file mode 100644
index 0000000..fd4d340
Binary files /dev/null and b/admin-portal-frontend/src/app/symbols/search.png differ
diff --git a/admin-portal-frontend/tailwind.config.ts b/admin-portal-frontend/tailwind.config.ts
index adf06a6..c9ed251 100644
--- a/admin-portal-frontend/tailwind.config.ts
+++ b/admin-portal-frontend/tailwind.config.ts
@@ -12,6 +12,10 @@ const config: Config = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      colors: {
+        "dfm-blue": "#00629B",
+        "dfm-navy": "#182B49",
+      },
     },
   },
   plugins: [],
diff --git a/dfm-sideline-sidekick-app/tsconfig.json b/dfm-sideline-sidekick-app/tsconfig.json
index 868eda8..d711399 100644
--- a/dfm-sideline-sidekick-app/tsconfig.json
+++ b/dfm-sideline-sidekick-app/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react",
-    "strictNullChecks": true,
+    "strictNullChecks": true
   },
-  "extends": "expo/tsconfig.base",
+  "extends": "expo/tsconfig.base"
 }
diff --git a/package-lock.json b/package-lock.json
index bd5c619..f03da66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,178 @@
 {
   "name": "DFM-Sideline-Sidekick-App",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
+        "fortawesome": "^0.0.1-security",
+        "react-router-dom": "^6.23.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/fortawesome": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz",
+      "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA=="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
index b24af46..35724cd 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,8 @@
 {
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "fortawesome": "^0.0.1-security",
     "react-router-dom": "^6.23.0"
   }
 }