diff --git a/package-lock.json b/package-lock.json
index 0759749..456de1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,8 +1,10 @@
 {
   "name": "home_works",
   "version": "0.1.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
+<<<<<<< HEAD
+=======
   "packages": {
     "": {
       "name": "home_works",
@@ -23471,6 +23473,7 @@
       }
     }
   },
+>>>>>>> 0cdbbae (update dependencies)
   "dependencies": {
     "@adobe/css-tools": {
       "version": "4.0.1",
@@ -24847,14 +24850,12 @@
     "@csstools/postcss-unset-value": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
-      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
-      "requires": {}
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g=="
     },
     "@csstools/selector-specificity": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
-      "requires": {}
+      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg=="
     },
     "@emotion/babel-plugin": {
       "version": "11.10.2",
@@ -24970,8 +24971,7 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
-      "requires": {}
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A=="
     },
     "@emotion/utils": {
       "version": "1.2.0",
@@ -25265,8 +25265,7 @@
         "ws": {
           "version": "7.4.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-          "requires": {}
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
         }
       }
     },
@@ -26084,8 +26083,7 @@
     "@mui/types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.0.tgz",
-      "integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==",
-      "requires": {}
+      "integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA=="
     },
     "@mui/utils": {
       "version": "5.10.3",
@@ -27390,14 +27388,12 @@
     "acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "requires": {}
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
     },
     "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",
@@ -27462,8 +27458,7 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "requires": {}
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-formats": {
       "version": "2.1.1",
@@ -27494,8 +27489,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",
@@ -28151,8 +28145,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.2",
@@ -28876,6 +28869,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
+      "integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -29713,8 +29711,7 @@
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
-      "requires": {}
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -29727,8 +29724,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",
@@ -29832,8 +29828,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",
@@ -30852,8 +30847,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.6.1",
@@ -32421,8 +32415,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": "7.0.2",
@@ -33549,8 +33542,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",
@@ -35572,8 +35564,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",
@@ -35671,26 +35662,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.2",
@@ -35712,8 +35699,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",
@@ -35734,14 +35720,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.5",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
-      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
-      "requires": {}
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg=="
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -35764,8 +35748,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",
@@ -35796,14 +35779,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",
@@ -35864,8 +35845,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",
@@ -35923,8 +35903,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",
@@ -36017,8 +35996,7 @@
     "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.5",
@@ -36112,8 +36090,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.1",
@@ -36623,14 +36600,12 @@
     "react-hook-form": {
       "version": "7.35.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.35.0.tgz",
-      "integrity": "sha512-9CYdOed+Itbiu5VMVxW0PK9mBR3f0gDGJcZEyUSm0eJbDymQ913TRs2gHcQZZmfTC+rtxyDFRuelMxx/+xwMcw==",
-      "requires": {}
+      "integrity": "sha512-9CYdOed+Itbiu5VMVxW0PK9mBR3f0gDGJcZEyUSm0eJbDymQ913TRs2gHcQZZmfTC+rtxyDFRuelMxx/+xwMcw=="
     },
     "react-icons": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
-      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
-      "requires": {}
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg=="
     },
     "react-is": {
       "version": "17.0.2",
@@ -37114,8 +37089,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=="
         },
         "supports-color": {
           "version": "8.1.1",
@@ -38356,6 +38330,16 @@
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
+    },
+=======
+>>>>>>> da6305f (Added marketplace page)
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -38371,6 +38355,7 @@
         }
       }
     },
+>>>>>>> 0cdbbae (update dependencies)
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -38437,6 +38422,21 @@
         "es-abstract": "^1.19.5"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "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=="
+        }
+      }
+    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
@@ -40233,8 +40233,7 @@
         "ws": {
           "version": "8.8.1",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
-          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==",
-          "requires": {}
+          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA=="
         }
       }
     },
@@ -40676,8 +40675,7 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "requires": {}
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
@@ -40699,6 +40697,11 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug=="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 3657485..da65b88 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
     "@types/node": "^18.7.15",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "aos": "^2.3.4",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
+    "bootstrap": "^5.2.1",
     "ethers": "^5.7.0",
     "immutability-helper": "^3.1.1",
     "react": "^18.2.0",
@@ -27,7 +29,9 @@
     "react-scripts": "5.0.1",
     "solc": "^0.8.16",
     "typescript": "^4.8.2",
+    "walletlink": "^2.5.0",
     "web-vitals": "^2.1.4",
+    "web3-providers": "^1.0.0-beta.55",
     "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0",
     "yup": "^0.32.11"
diff --git a/public/index.html b/public/index.html
index ef26cd9..01e5dca 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,8 +16,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Inter:wght@400;600;700&family=Open+Sans:wght@400;600;800&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Open+Sans:wght@600&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.js b/src/App.js
index 2987e7a..0eaf0ed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,23 +12,23 @@ import LoanSeeker from './components/loanseekerhome/LoanSeeker';
 import './App.css';
 
 function App() {
-
   return (
-    <div className='App'>
+    <div className="App">
       <Routes>
-        <Route path="/" element={ <Home/> } />
-        <Route path="home" element={ <Home/> } />
+        <Route path="/" element={<Home />} />
+        <Route path="home" element={<Home />} />
         <Route path="about" element={<About />} />
-        <Route path="marketplace" element={<Marketplace />} />
+        <Route path="marketplace" element={<MarketPlace />} />
         <Route path="signup" element={<Signup />} />
         <Route path="login" element={<Login />} />
         <Route path="investor" element={<InvestorPage />} />
         <Route path="loan" element={<LoanSeekerForm />} />
-        <Route path=":id" element={<CollectionDetails />} />
+        <Route path="details" element={<Mint />} />
         <Route path="loanseeker" element={<LoanSeeker />} />
+        <Route path="dashboard" element={<Dashboard />} />
       </Routes>
     </div>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/collectionDetails/CollectionDetails.js b/src/components/collectionDetails/CollectionDetails.js
index b210053..72d8178 100644
--- a/src/components/collectionDetails/CollectionDetails.js
+++ b/src/components/collectionDetails/CollectionDetails.js
@@ -1,10 +1,151 @@
-import React from 'react';
-import './collectionDetails.css'
+import React from "react";
+import { Link } from "react-router-dom";
+import "./collectionDetails.css";
+import { ethers } from "ethers";
+import Web3Modal from "web3modal";
+import WalletConnectProvider from "@walletconnect/web3-provider";
+import WalletLink from "walletlink";
 
-function CollectionDetails() {
-    return (
-        <div>Collection Details</div>
-    )
+import DiversifyNFT from "../../contracts/DiversifyNFT.json";
+import DiversifyNFTSales from "../../contracts/DiversifyNFTSales.json";
+import nft1 from "../../assets/624c8c6d91d58f79a0e4d49b.jpg";
+
+const NFTAddress = "0xCc48a3ECB6c671eb4eEBBeBE000802D4C15796f6";
+const NFTSaleAddress = "0xB48bceaAF3bF8aB9C5517518aF0dCc21F81790cE";
+
+class details extends React.Component {
+    constructor(props) {
+      super(props);
+      this.addMintNumber = this.addMintNumber.bind(this);
+      this.subMintNumber = this.subMintNumber.bind(this);
+      // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
+      this.state = {
+        value: 3,
+        mintState: true,
+      };
+    }
+  
+    addMintNumber(e) {
+      let mintNum = this.state.value + 1;
+      if (mintNum > 5) {
+        mintNum = 5;
+      }
+      this.setState({ value: mintNum });
+    }
+  
+    subMintNumber(e) {
+      let mintNum = this.state.value - 1;
+      if (mintNum < 1) {
+        mintNum = 1;
+      }
+      this.setState({ value: mintNum });
+    }
+  
+    mintNFT = async () => {
+      const { ethereum } = window;
+      if (ethereum) {
+        const providerOptions = {
+          //   binancechainwallet: {
+          //     package: binancechainwallet
+          //     },
+          walletconnect: {
+            package: WalletConnectProvider,
+            options: {
+              infuraId: "0bbb45846bdf44d1bcbe6275327619ad",
+            },
+          },
+          walletlink: {
+            package: WalletLink,
+            options: {
+              appName: "Hip Ass Ape Minter",
+              infuraId: "0bbb45846bdf44d1bcbe6275327619ad",
+              rpc: "",
+              chainId: 4,
+              appLogoUrl: null,
+              darkMode: true,
+            },
+          },
+        };
+  
+        var provider = new ethers.providers.Web3Provider(ethereum);
+        const accounts = await provider.listAccounts();
+        if (accounts.length > 0) {
+          // var account = accounts[0];
+          const { chainId } = await provider.getNetwork();
+          if (chainId !== 0x4) {
+            // alert("Please change the network to rinkby");
+            return;
+          }
+          this.setState({ mintState: false });
+  
+          const signer = provider.getSigner();
+          const DiversifyNFTContract = new ethers.Contract(
+            NFTAddress,
+            DiversifyNFT.abi,
+            signer
+          );
+          const DiversifyNFTSalesContract = new ethers.Contract(
+            NFTSaleAddress,
+            DiversifyNFTSales.abi,
+            signer
+          );
+  
+          const result = await DiversifyNFTContract.totalSupply();
+          const totalSupply = result.toNumber();
+          // console.log("totalSupply : ", totalSupply);
+  
+          let data = [];
+          for (var n = 0; n < this.state.value; n++) {
+            const tokenID = totalSupply + n;
+            const obj = { user: accounts[0], tokenId: tokenID };
+            data.push(obj);
+          }
+          // console.log("mint data : ", data);
+  
+          const mintFee = await DiversifyNFTSalesContract.fee();
+          // console.log("fee : ", ethers.utils.formatEther(mintFee));
+  
+          await DiversifyNFTSalesContract.mint(data, { value: mintFee });
+  
+          alert("NFt minting successed!");
+  
+          // const mintResult = await DiversifyNFTSalesContract.minted();
+          // console.log("minted : ", mintResult.toNumber());
+        } else {
+          alert("Please connect the wallet");
+        }
+      } else {
+        alert("Please install Metamask!");
+      }
+  
+      this.setState({ mintState: true });
+    };
+    render () {
+  return (
+    <div>
+      <div className="nft-details">
+        <img src={nft1} className="detail-pic" alt="nftimages" />
+        <div className="details-info">
+          <span className="detail-name">The Greenepoint Collection</span>
+          <div className="detail-amt">250 Items</div>
+          <div>
+            <span className="detail-avail">(250 Sold, 250 Available)</span>
+            <Link to="/details">
+              <button
+                className="mintbtn"
+                variant="success"
+                onClick={this.mintNFT}
+                disabled={!this.state.mintState}
+              >
+                MInt
+              </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
 }
 
-export default CollectionDetails;
\ No newline at end of file
+export default details;
diff --git a/src/components/collectionDetails/collectionDetails.css b/src/components/collectionDetails/collectionDetails.css
index e69de29..93632c2 100644
--- a/src/components/collectionDetails/collectionDetails.css
+++ b/src/components/collectionDetails/collectionDetails.css
@@ -0,0 +1,53 @@
+* {
+  box-sizing: border-box;
+}
+.nft-details{
+    margin: 100px 30rem 0px ;
+    display: block;
+}
+.detail-pic {
+  width: 400px;
+  height: 350px;
+  background: #d9d9d9;
+  border-radius: 20px;
+  cursor: pointer;
+
+}
+.details-info{
+    padding-left: 40px;
+}
+.detail-name{
+    font-family: 'Nunito';
+font-style: normal;
+font-weight: 800;
+font-size: 16px;
+line-height: 22px;
+cursor: pointer;
+}
+.detail-amt{
+    padding-top: 12px;
+    font-family: 'Nunito';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 19px;
+}
+.detail-avail{
+    font-family: 'Nunito';
+font-style: normal;
+font-weight: 800;
+font-size: 14px;
+line-height: 14px;
+}
+.mintbtn{
+    margin-left:70px;
+    cursor: pointer;
+    width: 100px;
+    height: 50px;
+    border: none;
+    background: #DB15EC;
+    border-radius: 30px;
+    color: white;
+    font-family: 'Nunito';
+    font-weight: 600;
+}   
\ No newline at end of file
diff --git a/src/components/collectionDetails/index.js b/src/components/collectionDetails/index.js
new file mode 100644
index 0000000..73e1491
--- /dev/null
+++ b/src/components/collectionDetails/index.js
@@ -0,0 +1,199 @@
+import React from "react";
+import { Container, Row, Col, Button } from "react-bootstrap";
+import { ethers } from "ethers";
+import Web3Modal from "web3modal";
+import WalletConnectProvider from "@walletconnect/web3-provider";
+import WalletLink from "walletlink";
+
+import DiversifyNFT from "../../contracts/DiversifyNFT.json";
+import DiversifyNFTSales from "../../contracts/DiversifyNFTSales.json";
+
+const NftImage = "/images/PicsArt_01-20-04.44.33.png";
+
+const NFTAddress = "0xCc48a3ECB6c671eb4eEBBeBE000802D4C15796f6";
+const NFTSaleAddress = "0xB48bceaAF3bF8aB9C5517518aF0dCc21F81790cE";
+
+class MintNFT extends React.Component {
+  constructor(props) {
+    super(props);
+    this.addMintNumber = this.addMintNumber.bind(this);
+    this.subMintNumber = this.subMintNumber.bind(this);
+    // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
+    this.state = {
+      value: 3,
+      mintState: true,
+    };
+  }
+
+  addMintNumber(e) {
+    let mintNum = this.state.value + 1;
+    if (mintNum > 5) {
+      mintNum = 5;
+    }
+    this.setState({ value: mintNum });
+  }
+
+  subMintNumber(e) {
+    let mintNum = this.state.value - 1;
+    if (mintNum < 1) {
+      mintNum = 1;
+    }
+    this.setState({ value: mintNum });
+  }
+
+  mintNFT = async () => {
+    const { ethereum } = window;
+    if (ethereum) {
+      const providerOptions = {
+        //   binancechainwallet: {
+        //     package: binancechainwallet
+        //     },
+        walletconnect: {
+          package: WalletConnectProvider,
+          options: {
+            infuraId: "0bbb45846bdf44d1bcbe6275327619ad",
+          },
+        },
+        walletlink: {
+          package: WalletLink,
+          options: {
+            appName: "Hip Ass Ape Minter",
+            infuraId: "0bbb45846bdf44d1bcbe6275327619ad",
+            rpc: "",
+            chainId: 4,
+            appLogoUrl: null,
+            darkMode: true,
+          },
+        },
+      };
+
+      var provider = new ethers.providers.Web3Provider(ethereum);
+      const accounts = await provider.listAccounts();
+      if (accounts.length > 0) {
+        // var account = accounts[0];
+        const { chainId } = await provider.getNetwork();
+        if (chainId !== 0x4) {
+          // alert("Please change the network to rinkby");
+          return;
+        }
+        this.setState({ mintState: false });
+
+        const signer = provider.getSigner();
+        const DiversifyNFTContract = new ethers.Contract(
+          NFTAddress,
+          DiversifyNFT.abi,
+          signer
+        );
+        const DiversifyNFTSalesContract = new ethers.Contract(
+          NFTSaleAddress,
+          DiversifyNFTSales.abi,
+          signer
+        );
+
+        const result = await DiversifyNFTContract.totalSupply();
+        const totalSupply = result.toNumber();
+        // console.log("totalSupply : ", totalSupply);
+
+        let data = [];
+        for (var n = 0; n < this.state.value; n++) {
+          const tokenID = totalSupply + n;
+          const obj = { user: accounts[0], tokenId: tokenID };
+          data.push(obj);
+        }
+        // console.log("mint data : ", data);
+
+        const mintFee = await DiversifyNFTSalesContract.fee();
+        // console.log("fee : ", ethers.utils.formatEther(mintFee));
+
+        await DiversifyNFTSalesContract.mint(data, { value: mintFee });
+
+        alert("NFt minting successed!");
+
+        // const mintResult = await DiversifyNFTSalesContract.minted();
+        // console.log("minted : ", mintResult.toNumber());
+      } else {
+        alert("Please connect the wallet");
+      }
+    } else {
+      alert("Please install Metamask!");
+    }
+
+    this.setState({ mintState: true });
+  };
+
+  render() {
+    return (
+      <Container>
+        <div className="title text-center">
+          <div
+            className="title-big splitAnim"
+            data-aos="fade-up"
+            data-aos-duration="2000"
+          >
+            NFT Mint
+          </div>
+          <h2 className="splitAnim" data-aos="fade-up" data-aos-duration="2000">
+            NFT Mint
+          </h2>
+        </div>
+        <div
+          className="nftmint-list"
+          data-aos="fade-up"
+          data-aos-duration="2000"
+        >
+          <Row className="mint-row">
+            <Col lg={5}>
+              <div
+                className="mint-image"
+                data-aos="fade-right"
+                data-aos-duration="2000"
+              >
+                <img src={NftImage} className="img-fluid" alt="" />
+              </div>
+            </Col>
+            <Col lg={1}></Col>
+            <Col lg={3} className="mint-col">
+              <div className="mint-amount-col">
+                <Button
+                  variant="success"
+                  className="mint-number-button"
+                  onClick={this.subMintNumber}
+                >
+                  {" "}
+                  -{" "}
+                </Button>
+                <input
+                  className="mint-amount-input"
+                  type="number"
+                  pattern="[0-9]*"
+                  value={this.state.value}
+                  min={1}
+                  disabled
+                />
+                <Button
+                  variant="success"
+                  className="mint-number-button"
+                  onClick={this.addMintNumber}
+                >
+                  {" "}
+                  +{" "}
+                </Button>
+              </div>
+            </Col>
+            <Col lg={3} className="mint-col" style={{ marginBottom: "20px" }}>
+              <Button
+                variant="success"
+                onClick={this.mintNFT}
+                disabled={!this.state.mintState}
+              >
+                Mint Now
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      </Container>
+    );
+  }
+}
+
+export default MintNFT;
diff --git a/src/components/collectionDetails/mintPage.js b/src/components/collectionDetails/mintPage.js
new file mode 100644
index 0000000..02e3364
--- /dev/null
+++ b/src/components/collectionDetails/mintPage.js
@@ -0,0 +1,30 @@
+import AOS from "aos";
+import "aos/dist/aos.css";
+import React, { useEffect } from "react";
+import Header from "../home/header/Header";
+import Footer from "../home/footer/Footer";
+import MintNFT from "../../components/collectionDetails/CollectionDetails";
+
+function Mint() {
+  useEffect(() => {
+    AOS.init();
+    AOS.refresh();
+  }, []);
+
+  return (
+    <div>
+      <header className="page-header">
+        <Header />
+      </header>
+      <section className="mint">
+        <details />
+      </section>
+      <div className="section-seperater right"></div>
+      <footer className="page-footer">
+        <Footer />
+      </footer>
+    </div>
+  );
+}
+
+export default Mint;
diff --git a/src/components/dashboard/Dashboard.js b/src/components/dashboard/Dashboard.js
new file mode 100644
index 0000000..ace93a8
--- /dev/null
+++ b/src/components/dashboard/Dashboard.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import './dashboard.css'
+
+function Dashboard (){
+    return (
+        <div>
+            <div className='loandetailshead-text1'>Loan Details</div>
+            <div>
+            <span>Status</span>
+            <div>Approved</div>
+            </div>
+            <div><span>$200,000</span>
+                <div>Loan Amount</div></div>
+        </div>
+    )
+}
+
+export default Dashboard;
\ No newline at end of file
diff --git a/src/components/dashboard/dashboard.css b/src/components/dashboard/dashboard.css
new file mode 100644
index 0000000..0a7fc5d
--- /dev/null
+++ b/src/components/dashboard/dashboard.css
@@ -0,0 +1,17 @@
+*{
+    box-sizing: border-box;
+}
+
+.loandetailshead-text1{
+    width: 225px;
+height: 55px;
+font-family: 'Nunito';
+font-style: normal;
+font-weight: 400;
+font-size: 40px;
+line-height: 55px;
+/* identical to box height */
+
+
+color: #C115EC;
+}
\ No newline at end of file
diff --git a/src/components/home/footer/footer.css b/src/components/home/footer/footer.css
index fc28f23..54855ac 100644
--- a/src/components/home/footer/footer.css
+++ b/src/components/home/footer/footer.css
@@ -30,6 +30,7 @@ table > tr > th:hover, table > tr > td:hover{
 }
 table > tr > td{
     padding-top: 7px;
+    font-family: "Nunito";
     font-weight: 400;
     line-height: 22px;
 }
diff --git a/src/components/home/header/Header.js b/src/components/home/header/Header.js
index 7e752a5..46a9712 100644
--- a/src/components/home/header/Header.js
+++ b/src/components/home/header/Header.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import {Link} from 'react-router-dom'
+import { Link } from "react-router-dom";
 import "./header.css";
 //import SearchIcon from '@mui/icons-material/Search';
 
@@ -37,30 +37,12 @@ export default function Header() {
   };
   return (
     <header className="App-header">
-      {haveMetamask ? (
-        <div className="App-header">
-          {isConnected ? (
-            <div className="card">
-              <div className="card-row">
-                <h3>Wallet Address:</h3>
-                <p>
-                  {accountAddress.slice(0, 4)}...
-                  {accountAddress.slice(38, 42)}
-                </p>
-              </div>
-            </div>
-          ) : (
-            <img src="" className="App-logo" alt="logo" />
-          )}
-        </div>
-      ) : (
-        <p>Please Install MataMask</p>
-      )}
       <nav className="nav">
         <span className="sitename">HOMEWORKS</span>
         <ul className="nav-items">
-        <Link to='/marketplace'>
-        <li className="metaverse">Metaverse NFT Collections</li></Link>
+          <Link to="/marketplace">
+            <li className="metaverse">Metaverse NFT Collections</li>
+          </Link>
           <li>Loan Seeker</li>
           <li>Investor</li>
           <li>
@@ -73,12 +55,37 @@ export default function Header() {
             )}
           </li>
           <li>
-            <Link to='/login'>
+            <Link to="/login">
               <button className="header__signinIcon">Sign In</button>
             </Link>
           </li>
         </ul>
       </nav>
+      {haveMetamask ? (
+        <div className="App-header">
+          {isConnected ? (
+            <div className="">
+              <div
+                className="float-right text-success mx-5"
+                style={{ fontSize: "13px", float: "right" }}
+              >
+                <p>
+                  Wallet Address: {accountAddress.slice(0, 4)}...
+                  {accountAddress.slice(38, 42)}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <img src="" className="App-logo" alt="logo" />
+          )}
+        </div>
+      ) : (
+        <div className="text-warning mx-5">
+          <p className="" style={{ fontSize: "13px", float: "right" }}>
+            Please Install MataMask
+          </p>
+        </div>
+      )}
     </header>
   );
 }
diff --git a/src/components/home/homesection5/homesection5.css b/src/components/home/homesection5/homesection5.css
index ea3e705..08c2581 100644
--- a/src/components/home/homesection5/homesection5.css
+++ b/src/components/home/homesection5/homesection5.css
@@ -35,22 +35,25 @@
   align-items: center;
 }
 .homesec2-flex1 {
-  padding-left: 250px;
-  max-width: 700px;
+
+height: 166px;
+  padding-left: 200px;
+  max-width: 900px;
   padding-top: 100px;
-  font-family: "Open Sans";
+  font-family: 'Nunito';
   font-style: normal;
   font-weight: 800;
-  font-size: 30px;
-  line-height: 41px;
+  font-size: 40px;
+  line-height: 55px;
+
 }
 .homesec2-flex2 {
   cursor: pointer;
   text-align: left;
   margin: 0%;
   max-width: 1200px;
-  padding-left: 250px;
-  padding-top: 50px;
+  padding-left: 200px;
+  padding-top: 150px;
 }
 .homesec2-flex2 > tr > th {
   font-family: "Open Sans";
diff --git a/src/components/marketplace/Marketplace.js b/src/components/marketplace/Marketplace.js
deleted file mode 100644
index eee9842..0000000
--- a/src/components/marketplace/Marketplace.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from "react";
-import "./marketplace.css";
-import Header from "../home/header/Header";
-import Footer from "../home/footer/Footer";
-import Market from "./market/Market";
-import nft1 from "../../assets/624c8c6d91d58f79a0e4d49b.jpg";
-import nft2 from "../../assets/european_house_06.jpg";
-import nft3 from "../../assets/european_house_08.jpg";
-import nft4 from "../../assets/image_001.png";
-import nft5 from "../../assets/image_008.png";
-import nft6 from "../../assets/image_009.png";
-import nft7 from "../../assets/image_0010.png";
-import nft8 from "../../assets/image_0011.png";
-import nft9 from "../../assets/image_0012.png";
-import nft10 from "../../assets/image_0013.png";
-import nft11 from "../../assets/image_0014.png";
-import nft12 from "../../assets/ny_building_02.jpg";
-
-
-
-
-function Marketplace() {
-  return (
-    <div>
-      <Header />
-      <div className="marketplacecontainer-header">
-        <h1 className=".marketplacecontainer-headertext">
-          METAVERSE NFT COLLECTIONS
-        </h1>
-        <button type="input" className="marketplacesearch-btn">Search</button>
-      </div>
-      <div className="marketplacecontainer">
-        <Market
-          img={nft1}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft2}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft3}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft4}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft5}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft6}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft7}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft1}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft8}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft9}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft10}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft4}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft11}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <Market
-        img={nft12}
-          name="The Greenepoint Collection"
-          number="250 Items"
-          available="(250 Sold, 250 Available)"
-        />
-        <div className="marketplace-text">
-          THE BEST MARKETPLACE TO OWN AN NFT COLLECTION!
-        </div>
-      </div>
-
-      <Footer />
-    </div>
-  );
-}
-
-export default Marketplace;
diff --git a/src/components/marketplace/NftCard.jsx b/src/components/marketplace/NftCard.jsx
new file mode 100644
index 0000000..1e20e64
--- /dev/null
+++ b/src/components/marketplace/NftCard.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+import Image from "../../assets/rect1.png";
+
+const NftCard = ({ collectionName, itemsNumber, sold, available }) => {
+  return (
+    <div
+      className="card mx-auto mt-3 border-0 pb-2"
+      style={{ width: "18rem", backgroundColor: "#fff", borderRadius: "15px" }}
+    >
+      <img
+        className="card-img-top mx-auto mt-2"
+        src={Image}
+        alt="NFT"
+        style={{ width: "17rem", height: "12rem" }}
+      />
+      <div className="mt-2 nft-card-body">
+        <p className="mx-2">
+          <strong>{collectionName || "The Fort Green Collection"}</strong>
+        </p>
+      </div>
+      <div className="row pt-0 pl-1">
+        <div className="col-8">
+          <div className="card-body px-1 mx-0">
+            <p className="lh1">
+              <span className="nft-name" style={{ fontSize: "14px" }}>
+                {`${itemsNumber} Items`}
+              </span>{" "}
+              <br />
+              <span className="nft-name" style={{ fontSize: "12px" }}>
+                <strong>{`${sold} Sold, ${available} Available`}</strong>
+              </span>
+            </p>
+          </div>
+        </div>
+        <div className="col-4 px-0 mx-0 pt-4">
+          <div
+            className="btn py-1 text-light buy-button px-1"
+            style={{
+              backgroundColor: "#C115EC",
+              borderRadius: "20px",
+              fontSize: "12px",
+              fontWeight: "bold",
+            }}
+          >
+            View Details
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NftCard;
diff --git a/src/components/marketplace/NftPopup.jsx b/src/components/marketplace/NftPopup.jsx
new file mode 100644
index 0000000..1e2e74b
--- /dev/null
+++ b/src/components/marketplace/NftPopup.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import Image from "../../assets/rect1.png";
+
+const NftPopup = () => {
+  return (
+    <div
+      className="card mx-auto mt-3 border-0 pb-2"
+      style={{ width: "18rem", backgroundColor: "#fff", borderRadius: "15px" }}
+    >
+      <img
+        className="card-img-top mx-auto my-2"
+        src={Image}
+        alt="NFT"
+        style={{ width: "17rem", height: "12rem" }}
+      />
+      <div className="row pl-1">
+        <div className="col-7">
+          <div className="card-body px-1 mx-0" style={{ fontSize: "14px" }}>
+            <p className="lh-sm">
+              <span className="nft-name">
+                <strong>The Fort Green</strong>
+              </span>{" "}
+              <br />
+              <span className="nft-name">
+                <strong>Collection</strong> (Available)
+              </span>
+            </p>
+            <p className="">
+              <span className="">NFT PRICE</span> <br />
+              <span className="">($$$)</span>
+            </p>
+          </div>
+        </div>
+        <div className="col-5 px-1">
+          <div className="card-body px-0 mx-0">
+            <p className="lh1 text-muted" style={{ fontSize: "12px" }}>
+              <span>Estimated Monthly</span> <br />
+              <span>Income ($#)</span>
+            </p>
+            <p className="lh1 text-muted" style={{ fontSize: "12px" }}>
+              <span>Estimated value in</span> <br />
+              <span>36 months ($#)</span>
+            </p>
+          </div>
+          <div className="">
+            <div
+              className="btn py-1 text-light buy-button"
+              style={{
+                backgroundColor: "#C115EC",
+                borderRadius: "20px",
+                fontSize: "12px",
+                fontWeight: "bold",
+              }}
+            >
+              BUY NOW
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NftPopup;
diff --git a/src/components/marketplace/index.js b/src/components/marketplace/index.js
new file mode 100644
index 0000000..3a229a6
--- /dev/null
+++ b/src/components/marketplace/index.js
@@ -0,0 +1,116 @@
+import React from "react";
+import NftCard from "./NftCard";
+import Header from "../home/header/Header";
+import Footer from "../home/footer/Footer";
+
+const MarketPlace = () => {
+  return (
+    <div className="wrapper bg-light pb-5">
+      <Header />
+      <div className="row mx-5 mt-4">
+        <div className="col">
+          <span className="" style={{ fontSize: "24px", fontWeight: "bold" }}>
+            METAVERSE NFT COLLECTION
+          </span>
+        </div>
+        <div className="col">
+          <div
+            className="btn btn-outline py-1 text-light px-4"
+            style={{
+              backgroundColor: "#C115EC",
+              borderRadius: "20px",
+              fontSize: "12px",
+              fontWeight: "bold",
+              float: "right",
+              backgroundColor: "none",
+            }}
+          >
+            <i className="bi bi-search"></i> Search
+          </div>
+        </div>
+      </div>
+      <div className="d-flex justify-content-around mx-4">
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+      </div>
+      <div className="d-flex justify-content-around mx-4">
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+      </div>
+      <div className="d-flex justify-content-around mx-4">
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+        <NftCard
+          sold={16}
+          available={234}
+          collectionName="The Fort Green Collection"
+          itemsNumber={250}
+        />
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default MarketPlace;
diff --git a/src/components/marketplace/market/Market.js b/src/components/marketplace/market/Market.js
deleted file mode 100644
index cdb96ed..0000000
--- a/src/components/marketplace/market/Market.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import "./market.css";
-
-export default function Market(props) {
-  return (
-    <div className="market">
-      <img src={props.img} className="nft-pic" alt="nftimages" />
-      <div className="marketplaceinfo">
-        <span className="nft-name">{props.name}</span>
-        <div className="nft-amt">{props.number}</div>
-        <div>
-          <span className="nft-avail">{props.available}</span>
-          <button className="viewdetails">View details</button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/marketplace/market/market.css b/src/components/marketplace/market/market.css
deleted file mode 100644
index 235c611..0000000
--- a/src/components/marketplace/market/market.css
+++ /dev/null
@@ -1,67 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-
-    
- .nft-pic{
-    width: 323px;
-height: 290px;
-background: #D9D9D9;
-border-radius: 20px;
-cursor: pointer;
- }
- .market{
-    background-color: white;
-    border-radius: 8px;
-    margin: 10px;
-
-    width: 310px;
-    padding-bottom: 30px;
- }
-.market > img{
-    margin: 10px;
-}
- .marketplaceinfo{
-     margin-top: 10px;
-     margin-left: 10px;
- }
-.viewdetails{
-    color: white;
-    margin-left: 16px;
-    width: 101px;
-height: 32px;
-background: #C115EC;
-border-radius: 20px;
-    border: none;
-;
- }
-
-.viewdetails:hover{
-    color: black;
-}
- .nft-name{
-    font-family: 'Nunito';
-font-style: normal;
-font-weight: 800;
-font-size: 16px;
-line-height: 22px;
-cursor: pointer;
- }
-.nft-amt{
-    padding-top: 12px;
-    font-family: 'Nunito';
-font-style: normal;
-font-weight: 400;
-font-size: 14px;
-line-height: 19px;
-
-}
-.nft-avail {
-    font-family: 'Nunito';
-font-style: normal;
-font-weight: 800;
-font-size: 10px;
-line-height: 14px;
-
-}
diff --git a/src/components/marketplace/marketplace.css b/src/components/marketplace/marketplace.css
deleted file mode 100644
index 3fae47f..0000000
--- a/src/components/marketplace/marketplace.css
+++ /dev/null
@@ -1,38 +0,0 @@
-*{
-    box-sizing: border-box;
-}
-.marketplacecontainer-header{
-    display: flex;
-    padding-left:30px;
-    justify-content: space-between;
-}
-.marketplacecontainer-headertext{
-    font-family: 'Nunito';
-font-style: normal;
-font-weight: 800;
-font-size: 40px;
-line-height: 55px;
-}
-.marketplacecontainer{
-    display: flex;
-    flex-wrap: wrap;
-    background-color: white;
-}
-.marketplace-text{
-    margin: 90px;
-    font-family: 'Nunito';
-font-style: normal;
-font-weight: 700;
-font-size: 40px;
-line-height: 55px;
-text-align: right;
-max-width: 500px;
-}
-.marketplacesearch-btn{
-    width: 173px;
-height: 51px;
-margin-right: 30px;
-    margin-top: 25px;
-border: 1px solid #C115EC;
-border-radius: 30px;
-}
\ No newline at end of file
diff --git a/src/components/marketplace/nftCard.css b/src/components/marketplace/nftCard.css
new file mode 100644
index 0000000..245c2fd
--- /dev/null
+++ b/src/components/marketplace/nftCard.css
@@ -0,0 +1,18 @@
+.nft-name {
+  font-size: 16px;
+  font-weight: bolder !important;
+}
+.no-padding {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.buy-button {
+  background-color: "#C115EC";
+  border-radius: "20px";
+  font-size: "12px";
+  font-weight: "bold";
+}
+.nft-card-body {
+  padding-bottom: 0px !important;
+  margin-bottom: 0px !important;
+}
diff --git a/src/index.js b/src/index.js
index 7980526..42a2792 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 import { BrowserRouter } from "react-router-dom";
+import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>,
   document.getElementById("root")
-);
\ No newline at end of file
+);