diff --git a/client/package-lock.json b/client/package-lock.json
index 6d3547a9..c5f6304f 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -17052,19 +17052,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -19588,14 +19575,12 @@
     "@csstools/postcss-unset-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.1.tgz",
-      "integrity": "sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg==",
-      "requires": {}
+      "integrity": "sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg=="
     },
     "@csstools/selector-specificity": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.1.tgz",
-      "integrity": "sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==",
-      "requires": {}
+      "integrity": "sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA=="
     },
     "@emotion/babel-plugin": {
       "version": "11.9.2",
@@ -20393,8 +20378,7 @@
     "@mui/types": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.5.tgz",
-      "integrity": "sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA==",
-      "requires": {}
+      "integrity": "sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA=="
     },
     "@mui/utils": {
       "version": "5.9.1",
@@ -21567,14 +21551,12 @@
     "acorn-import-phases": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
-      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
-      "requires": {}
+      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ=="
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -21660,8 +21642,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -21966,8 +21947,7 @@
     "babel-plugin-named-asset-import": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
-      "requires": {}
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.1",
@@ -22173,8 +22153,7 @@
     "bootstrap": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
-      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
-      "requires": {}
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A=="
     },
     "brace-expansion": {
       "version": "1.1.12",
@@ -22650,8 +22629,7 @@
     "css-declaration-sorter": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
-      "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
-      "requires": {}
+      "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og=="
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -22741,8 +22719,7 @@
     "css-prefers-color-scheme": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
-      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "requires": {}
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA=="
     },
     "css-select": {
       "version": "4.3.0",
@@ -22846,8 +22823,7 @@
     "cssnano-utils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "requires": {}
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA=="
     },
     "csso": {
       "version": "4.2.0",
@@ -23765,8 +23741,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "requires": {}
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
     },
     "eslint-plugin-testing-library": {
       "version": "5.5.1",
@@ -24888,8 +24863,7 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "idb": {
       "version": "6.1.5",
@@ -26032,8 +26006,7 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "requires": {}
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -27730,8 +27703,7 @@
     "postcss-browser-comments": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
-      "requires": {}
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -27829,26 +27801,22 @@
     "postcss-discard-comments": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "requires": {}
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ=="
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "requires": {}
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw=="
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "requires": {}
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A=="
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "requires": {}
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw=="
     },
     "postcss-double-position-gradients": {
       "version": "3.1.1",
@@ -27870,8 +27838,7 @@
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "requires": {}
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -27892,14 +27859,12 @@
     "postcss-font-variant": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "requires": {}
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
     },
     "postcss-gap-properties": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
-      "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
-      "requires": {}
+      "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ=="
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -27922,8 +27887,7 @@
     "postcss-initial": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "requires": {}
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -27983,14 +27947,12 @@
     "postcss-logical": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
-      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "requires": {}
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g=="
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "requires": {}
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
     },
     "postcss-merge-longhand": {
       "version": "5.1.6",
@@ -28051,8 +28013,7 @@
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "requires": {}
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -28110,8 +28071,7 @@
     "postcss-normalize-charset": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "requires": {}
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg=="
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -28196,14 +28156,12 @@
     "postcss-overflow-shorthand": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz",
-      "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==",
-      "requires": {}
+      "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg=="
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "requires": {}
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -28295,8 +28253,7 @@
     "postcss-replace-overflow-wrap": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "requires": {}
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
     },
     "postcss-selector-not": {
       "version": "6.0.0",
@@ -28745,8 +28702,7 @@
     "react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
-      "requires": {}
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="
     },
     "react-is": {
       "version": "18.2.0",
@@ -28761,8 +28717,7 @@
     "react-loading": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
-      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A==",
-      "requires": {}
+      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A=="
     },
     "react-refresh": {
       "version": "0.11.0",
@@ -29716,8 +29671,7 @@
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-      "requires": {}
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
     "stylehacks": {
       "version": "5.1.0",
@@ -30146,12 +30100,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "peer": true
-    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -30576,8 +30524,7 @@
         "ws": {
           "version": "8.18.3",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-          "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-          "requires": {}
+          "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="
         }
       }
     },
@@ -31011,8 +30958,7 @@
     "ws": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
-      "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
-      "requires": {}
+      "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/client/src/app/App.js b/client/src/app/App.js
index 1608680f..43d46d6e 100644
--- a/client/src/app/App.js
+++ b/client/src/app/App.js
@@ -1,7 +1,14 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { useState, useEffect } from "react";
 
+
+
+
+
+
+
 import Loader from "../components/Loader/loader.js";
+
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -30,6 +37,10 @@ import FaqList from '../Pages/Footer/Faq/FaqList.js';
 import AccessiblityPage from '../Pages/Footer/Accessibility/Accessibility.js';
 import RefundPage from '../Pages/Footer/Refund/Refund.js';
 import ShippingPage from '../Pages/Footer/Shipping/Shipping.js';
+// import ResetPassword from '../components/Account/ResetPassword';
+import ResetPassword from '../components/Authentication/ResetPassword/ResetPassword';
+
+
 
 function App() {
   const [loading, setLoading] = useState(true);
@@ -61,59 +72,62 @@ function App() {
 
   return (
     <>
-      <CartItemsProvider>
-        <WishItemsProvider>
-          <SearchProvider>
-            <Router>
-              <div className="app__container">
-                <Header />
-                <main className="app__content">
-                  <Routes>
-                    <Route index element={<Home />} />
-                    <Route path="/account">
-                      <Route path="me" element={<MyAccount />} />
-                      <Route path="manage" element={<ManageAccount />} />
-                      <Route path="login" element={<Login />} />
-                      <Route path="register" element={<Register />} />
-                      <Route path="*" element={<Login />} />
-                    </Route>
-                    <Route path="/shop" element={<Shop />} />
-                    <Route path="/category">
-                      <Route path=":id" element={<CategoryView />} />
-                    </Route>
-                    <Route path="/item">
-                      <Route path="/item/men">
-                        <Route path=":id" element={<ItemView />} />
-                      </Route>
-                      <Route path="/item/women">
-                        <Route path=":id" element={<ItemView />} />
-                      </Route>
-                      <Route path="/item/kids">
-                        <Route path=":id" element={<ItemView />} />
-                      </Route>
-                      <Route path="/item/featured">
-                        <Route path=":id" element={<ItemView />} />
-                      </Route>
-                    </Route>
-                    <Route path="/wishlist" element={<Wishlist />} />
-                    <Route path="/search/*" element={<SearchView />} />
-                    <Route path="/terms" element={<TermsConditions />} />
-                    <Route path="/privacy" element={<PrivacyPolicy />} />
-                    <Route path="/faq" element={<FaqList />} />
-                    <Route path="/accessibility" element={<AccessiblityPage />} />
-                    <Route path="/shipping" element={<ShippingPage />} />
-                    <Route path="/refund" element={<RefundPage />} />
-                    <Route path="/admin" element={<Wishlist />} />
-                  </Routes>
-                </main>
-                <Footer />
-              </div>
-            </Router>
-          </SearchProvider>
-        </WishItemsProvider>
-      </CartItemsProvider>
-      <Toaster />
-    </>
+
+   <CartItemsProvider>
+      <WishItemsProvider>
+        <SearchProvider>
+          <Router >
+            <Header />
+            <Routes>
+              <Route index element={<Home />} />
+              <Route path="/account">
+                <Route path="me" element={<MyAccount />} />
+                <Route path="manage" element={<ManageAccount />} />
+                <Route path="login" element={<Login />} />
+                <Route path="register" element={<Register />} />
+                <Route path="*" element={<Login />} />
+              </Route>
+              <Route path="/ResetPassword" element={<ResetPassword />} />
+
+              <Route path="/shop" element={<Shop />} />
+              <Route path="/category">
+                <Route path=":id" element={<CategoryView />} />
+              </Route>
+              <Route path="/item">
+                <Route path="/item/men">
+                  <Route path=":id" element={<ItemView />} />
+                </Route>
+                <Route path="/item/women">
+                  <Route path=":id" element={<ItemView />} />
+                </Route>
+                <Route path="/item/kids">
+                  <Route path=":id" element={<ItemView />} />
+                </Route>
+                <Route path="/item/featured">
+                  <Route path=":id" element={<ItemView />} />
+                </Route>
+              </Route>
+              <Route path="/wishlist" element={<Wishlist />} />
+              <Route path="/search/*" element={<SearchView />} />
+              <Route path="/terms" element={<TermsConditions />} />
+              <Route path="/privacy" element={<PrivacyPolicy />} />
+              <Route path='/faq' element={<FaqList/>}></Route>
+              <Route path='/accessibility' element={<AccessiblityPage/>}></Route>
+              <Route path='/shipping' element={<ShippingPage/>}></Route>
+              <Route path='/refund' element={<RefundPage/>}></Route>
+              <Route path="/admin" element={<Wishlist />} />
+            </Routes>
+            <Footer />
+          </Router>
+        </SearchProvider>
+      </WishItemsProvider>
+   </CartItemsProvider>
+   <Toaster />
+
+   </>
+
+   
+
   );
 }
 
diff --git a/client/src/components/Authentication/Login/Login.js b/client/src/components/Authentication/Login/Login.js
index 600e4eb5..8042c7bc 100644
--- a/client/src/components/Authentication/Login/Login.js
+++ b/client/src/components/Authentication/Login/Login.js
@@ -1,23 +1,60 @@
 import { useState } from 'react';
+
+import { useNavigate, Link } from 'react-router-dom';
+import axios from 'axios';
+
+
 import LoginCard from '../../Card/LoginCard/LoginCard';
 import './Login.css';
 
 const Login = () => {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-
-    return (
-        <div className="login__auth__container">
-            <div className="login__auth">
-                <LoginCard
-                    email={email}
-                    password={password}
-                    setEmail={setEmail}
-                    setPassword={setPassword}
-                />
-            </div>
-        </div>
-    );
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await axios.post('/api/auth/login', {
+        email,
+        password,
+      });
+
+      localStorage.setItem('token', response.data.token);
+      alert('Login successful!');
+      navigate('/'); // Redirect to home or dashboard
+    } catch (error) {
+      alert(
+        `Login failed: ${
+          error.response ? error.response.data.message : error.message
+        }`
+      );
+    }
+  };
+
+  return (
+    <div className="login__auth__container">
+      <div className="login__auth">
+        <form onSubmit={handleLogin}>
+          <LoginCard
+            email={email}
+            password={password}
+            setEmail={setEmail}
+            setPassword={setPassword}
+          />
+
+          {/* Forgot Password Link */}
+          <div className="forgot-password" style={{ marginTop: '10px', textAlign: 'center' }}>
+            <Link to="/ResetPassword" className="text-blue-600 hover:underline">
+              Forgot Password?
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 };
 
 export default Login;
diff --git a/client/src/components/Authentication/ResetPassword/ResetPassword.css b/client/src/components/Authentication/ResetPassword/ResetPassword.css
new file mode 100644
index 00000000..bdba2d66
--- /dev/null
+++ b/client/src/components/Authentication/ResetPassword/ResetPassword.css
@@ -0,0 +1,50 @@
+.reset-password-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 70vh; /* Makes it take vertical space */
+  padding-top: 200px;  /* Top spacing from header */
+  padding-bottom: 80px; /* Bottom spacing from footer */
+  background-color: #f9f9f9;
+}
+
+
+.reset-password-box {
+  background: white;
+  padding-top: 100px;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+}
+
+.reset-password-box h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.reset-password-box input {
+  width: 100%;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+}
+
+.reset-password-box button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #ff5252;
+  color: white;
+  font-weight: bold;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.reset-password-box button:hover {
+  background-color: #e03e3e;
+}
diff --git a/client/src/components/Authentication/ResetPassword/ResetPassword.js b/client/src/components/Authentication/ResetPassword/ResetPassword.js
new file mode 100644
index 00000000..508e1c74
--- /dev/null
+++ b/client/src/components/Authentication/ResetPassword/ResetPassword.js
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import './ResetPassword.css'; // ✅ Correct import for the CSS
+
+const ResetPassword = () => {
+  const [email, setEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  useEffect(() => {
+    console.log("✅ ResetPassword component loaded");
+  }, []);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (newPassword !== confirmPassword) {
+      alert("Passwords do not match");
+      return;
+    }
+    alert("Password successfully updated!");
+  };
+
+  return (
+    <div className="reset-password-container">
+      <div className="reset-password-box">
+        <h2>Create New Password</h2>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="email"
+            placeholder="Email Address"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="New Password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Confirm Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+          />
+          <button type="submit">Reset Password</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;
+
+
diff --git a/client/src/components/Card/LoginCard/LoginCard.js b/client/src/components/Card/LoginCard/LoginCard.js
index f54bca7e..d4c85884 100644
--- a/client/src/components/Card/LoginCard/LoginCard.js
+++ b/client/src/components/Card/LoginCard/LoginCard.js
@@ -55,7 +55,7 @@ const LoginCard = ({ email, password, setEmail, setPassword }) => {
                     </div>
                 </form>
                 <div className="login__other__actions">
-                    <div className="login__forgot__password">Forgot password?</div>
+                    {/* <div className="login__forgot__password">Forgot password?</div> */}
                     <div className="login__new__account">Don't have account? <Link to="/account/register">Create account</Link> </div>
                 </div>
             </div>