diff --git a/package-lock.json b/package-lock.json
index 45ecb5d..c922415 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,10 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "sass": "^1.57.1"
+        "formik": "^2.2.9",
+        "react-router-dom": "^6.7.0",
+        "sass": "^1.57.1",
+        "yup": "^0.32.11"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3066,6 +3069,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
+      "integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3777,6 +3789,12 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -7956,6 +7974,45 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/formik/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8356,6 +8413,21 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/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==",
+      "dev": true
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11445,6 +11517,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -11770,6 +11848,12 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==",
+      "dev": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -13672,6 +13756,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==",
+      "dev": true
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -13981,6 +14071,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "dev": true
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -13994,6 +14090,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
+      "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
+      "integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.3.0",
+        "react-router": "6.7.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15536,6 +15664,12 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "dev": true
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -15568,6 +15702,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "dev": true
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@@ -16881,6 +17021,24 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
     }
   },
   "dependencies": {
@@ -18919,6 +19077,12 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
+      "integrity": "sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA==",
+      "dev": true
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19443,6 +19607,12 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -22531,6 +22701,35 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "dev": true,
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -22802,6 +23001,23 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "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==",
+          "dev": true
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -25031,6 +25247,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -25276,6 +25498,12 @@
         "thunky": "^1.0.2"
       }
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==",
+      "dev": true
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -26460,6 +26688,12 @@
         }
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==",
+      "dev": true
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -26682,6 +26916,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "dev": true
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26692,6 +26932,25 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
+      "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
+      "dev": true,
+      "requires": {
+        "@remix-run/router": "1.3.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
+      "integrity": "sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg==",
+      "dev": true,
+      "requires": {
+        "@remix-run/router": "1.3.0",
+        "react-router": "6.7.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -27827,6 +28086,12 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "dev": true
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -27850,6 +28115,12 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "dev": true
+    },
     "tough-cookie": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@@ -28853,6 +29124,21 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 4598d22..5793d73 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,9 @@
     ]
   },
   "devDependencies": {
-    "sass": "^1.57.1"
+    "formik": "^2.2.9",
+    "react-router-dom": "^6.7.0",
+    "sass": "^1.57.1",
+    "yup": "^0.32.11"
   }
 }
diff --git a/public/index.html b/public/index.html
index 153310f..c0cd245 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 
     <title>React App</title>
   </head>
diff --git a/src/assets/svg/arrow.svg b/src/assets/svg/arrow.svg
new file mode 100644
index 0000000..313a213
--- /dev/null
+++ b/src/assets/svg/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.1918 7.85179L2.47543 1.13564C2.04819 0.708196 1.35549 0.708196 0.928456 1.13564C0.501387 1.56271 0.501387 2.25538 0.928456 2.68241L6.8714 8.62517L0.928629 14.5677C0.50156 14.995 0.50156 15.6876 0.928629 16.1146C1.3557 16.5419 2.04836 16.5419 2.4756 16.1146L9.19197 9.39838C9.4055 9.18474 9.51215 8.90504 9.51215 8.62521C9.51215 8.34523 9.4053 8.06532 9.1918 7.85179Z" fill="#C4C4C4"/>
+</svg>
diff --git a/src/assets/svg/house.svg b/src/assets/svg/house.svg
new file mode 100644
index 0000000..1226d2e
--- /dev/null
+++ b/src/assets/svg/house.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.9231 14.8352L28.692 12.6041L16.4148 0.326808C15.9789 -0.108936 15.2724 -0.108936 14.8366 0.326808L2.55921 12.6041L0.326997 14.8364C-0.101226 15.2798 -0.088997 15.9863 0.354399 16.4146C0.786939 16.8323 1.47263 16.8323 1.90517 16.4146L2.23105 16.0864V30.1339C2.23105 30.7503 2.73075 31.25 3.34719 31.25H27.9018C28.5183 31.25 29.018 30.7503 29.018 30.1339V16.0864L29.345 16.4134C29.7884 16.8417 30.4949 16.8294 30.9231 16.386C31.3409 15.9535 31.3409 15.2677 30.9231 14.8352ZM18.9729 29.0178H12.2762V20.0888H18.9729V29.0178ZM26.7857 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.089 17.8566H11.1601C10.5436 17.8566 10.0439 18.3563 10.0439 18.9727V29.0178H4.46333V13.8542L15.6245 2.69296L26.7857 13.8542V29.0178Z" fill="#C4C4C4"/>
+</svg>
diff --git a/src/components/Header/headerBottom.tsx b/src/components/Header/headerBottom.tsx
index c33d268..561bc35 100644
--- a/src/components/Header/headerBottom.tsx
+++ b/src/components/Header/headerBottom.tsx
@@ -15,11 +15,11 @@ const Links = (props: text) => {
 
 const HeaderBottom = () => {
     return(
-        <div className={styles["conteiner-bottom"]}>
+        <nav className={styles["conteiner-bottom"]}>
             <Links text='cursos'/>
             <Links text='saiba mais'/>
             <Links text='institucionais'/>
-        </div>
+        </nav>
     )
 };
 
diff --git a/src/components/Main/formschema.ts b/src/components/Main/formschema.ts
new file mode 100644
index 0000000..060a3b1
--- /dev/null
+++ b/src/components/Main/formschema.ts
@@ -0,0 +1,10 @@
+import { type } from "os";
+import * as Yup from "yup"
+
+export default Yup.object().shape({
+    nome: Yup.string().required("*Campo Obrigatório").min(2),
+    email: Yup.string().required("*Campo Obrigatório").email("E-mail inválido"),
+    cpf: Yup.number().required("*Campo Obrigatório").min(14),
+    dataDeNacismento: Yup.date().required("*Campo Obrigatório"),
+    telefone: Yup.number().required("*Campo Obrigatório").min(9),
+})
\ No newline at end of file
diff --git a/src/components/Main/main.module.scss b/src/components/Main/main.module.scss
new file mode 100644
index 0000000..c4f488e
--- /dev/null
+++ b/src/components/Main/main.module.scss
@@ -0,0 +1,209 @@
+.conteiner-main{
+    padding: 0 100px;
+
+    .main-top{
+        position: relative;
+
+        .main-house{
+            display: flex;
+            align-items: center;
+            font-family: 'Roboto';
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            color: #C4C4C4;
+            margin-top: 30px;
+            text-transform: uppercase;
+
+            .img-house{
+                height: 16px;
+                width: 16px;
+            }
+
+            .img-arrow{
+                height: 8px;
+                width: 8px;
+                margin: 0 8px;
+            }
+        }
+
+        .main-title{
+            margin: 80px 40.6481481%;
+            font-family: 'Roboto';
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 28px;
+            color: #292929;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+    }
+    .conteiner-div{
+        display: flex;
+
+        .conteiner-nav{
+            border-right: 1px solid black;
+            height: 285px;
+            width: 27.962963%;
+
+            .conteiner-ul {
+                width: 100%;
+
+                li{
+                    list-style: none;
+
+                    .item-li, .active-style{
+                        display: block;
+                        width: 100%;
+                        padding: 10px 16px;
+                        font-family: 'Roboto';
+                        font-size: 16px;
+                        line-height: 19px;
+                        text-decoration: none;
+                        
+                    }
+    
+                    .item-li{
+                        color: #7D7D7D;
+                        font-weight: 400;
+                    }
+                    
+                    .active-style{
+                        background-color: black;
+                        color: white;
+                        font-weight: 700;
+                    }
+                }
+
+            }
+        }
+        .conteiner-item-description, .conteiner-item-formik{
+            padding: 10px 0 81px 30px;
+
+            .item-description-text, .item-description-title{
+                font-family: 'Roboto';
+            }
+            .item-description-title{
+                font-weight: 700;
+                font-size: 24px;
+                line-height: 28px;
+                margin-bottom: 12px;
+                color: #292929;
+            }
+
+            .item-description-text {
+                font-weight: 400;
+                font-size: 13px;
+                line-height: 15px;
+                color: #7D7D7D;
+                max-width: 748px;
+                text-align: justify;
+            }
+        }
+
+        .conteiner-item-formik{
+            padding: 0;
+        }
+        
+        .conteiner-form{
+            padding: 10px 0 65px 30px;
+            width: 72.037037%;;
+
+            .item-form-title {
+                font-family: 'Roboto';
+                font-weight: 700;
+                font-size: 24px;
+                line-height: 28px;
+                color: #292929;
+            }
+
+            .form{
+                .item-form-conteiner{
+                    display: flex;
+                    flex-direction: column;
+                    
+                    .item-form-conteiner-schema {
+                        height: 40px;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .form-label, .invalid-feedback{
+                            font-family: 'Roboto';
+                            font-weight: 400;
+                            font-size: 14px;
+                            line-height: 16px;
+                            color: #100D0E;
+                            margin-left: 15px;
+                        }
+    
+                        .invalid-feedback{
+                            color: red;
+                            margin-left: 0;
+                            margin-top: 24px;
+                        }
+
+                    }
+
+                    .form-input{
+                        font-family: 'Roboto';
+                        font-weight: 400;
+                        font-size: 14px;
+                        line-height: 16px;
+                        border: 1px solid #100D0E;
+                        border-radius: 25px;
+                        padding: 15px 20px;
+                        color: #100D0E;
+                    }
+
+                    .form-input::placeholder{
+                        color: #B9B7B7;
+                    }
+                }
+
+                .form-conteiner-checkbox{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 12px 0;
+
+                    .form-checkbox-span{
+                        color: red;
+                    }
+
+                    .form-checkbox-label{
+                        font-weight: 400;
+                        font-size: 14px;
+                        line-height: 16px;
+                        font-family: 'Roboto';
+                        color: #100D0E;
+                        text-decoration: underline;
+                        margin: 0 4px;
+                    }
+
+                    .form-checkbox-input{
+                        border-radius: 3px;
+                        width: 18px;
+                        height: 18px;
+                    }
+                }
+
+                .form-buttom{
+                    width: 100%;
+                    padding: 15px 0;
+                    background-color: black;
+                    color: white;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 19px;
+                    font-family: 'Roboto';
+                    border-radius: 25px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/Main/main.scss b/src/components/Main/main.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Main/main.tsx b/src/components/Main/main.tsx
index a4f4f27..2d6259e 100644
--- a/src/components/Main/main.tsx
+++ b/src/components/Main/main.tsx
@@ -1,7 +1,27 @@
 import React from 'react';
+import house from '../../assets/svg/house.svg';
+import arrow from '../../assets/svg/arrow.svg';
+
+import styles from './main.module.scss';
+
+import { Nav } from './mainNav'
+
 
 const Main = () => {
-    return <div></div>
+    return (
+    <div className={styles['conteiner-main']}>
+        <div className={styles['main-top']}>
+            <div className={styles['main-house']}>
+                <img className={styles['img-house']} src={house} alt="casa" />
+                <img className={styles['img-arrow']} src={arrow} alt="flecha" />
+                <span>Institucional</span>
+            </div>
+            <h1 className={styles['main-title']}>Institucional</h1>
+        </div>
+        <Nav />
+    </div>
+    )
+
 }
 
 export { Main };
\ No newline at end of file
diff --git a/src/components/Main/mainFormik.tsx b/src/components/Main/mainFormik.tsx
new file mode 100644
index 0000000..f28351e
--- /dev/null
+++ b/src/components/Main/mainFormik.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+
+import styles from './main.module.scss';
+
+import formschema from './formschema';
+
+import {Formik, Form, Field, ErrorMessage, FormikHelpers} from 'formik';
+
+interface IformikValues {
+    nome: string;
+    email: string;
+    cpf: number;
+    dataDeNacismento: number;
+    telefone: number;
+    instagram: string;
+    checkbox: boolean;
+}
+
+const initialValue = {
+    nome: "",
+    email: "",
+    cpf: 0,
+    dataDeNacismento: 0,
+    telefone: 0,
+    instagram: "",
+    checkbox: false,
+}
+
+const Contato = () => {
+    const fomikSubmit = (value: IformikValues) => {
+        console.log(value)
+    };
+    return(
+        <div className={styles['conteiner-form']}>
+            <h2 className={styles['item-form-title']}>Preencha o formulário </h2>
+            <Formik onSubmit={fomikSubmit} initialValues={initialValue} validationSchema={formschema}>
+                <Form className={styles['form']}>
+                    <div className={styles['item-form-conteiner']}>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="nome" className={styles['form-label']}>
+                                Nome
+                            </label>
+                            <ErrorMessage component="span" name="nome" className={styles["invalid-feedback"]}/>
+                        </div>
+                        <Field className={styles['form-input']} id="nome" name="nome" placeholder="Seu nome completo" />
+                    </div>
+                    <div className={styles['item-form-conteiner']}>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="email" className={styles['form-label']}>
+                                E-mail
+                            </label>
+                            <ErrorMessage component="span" name="email" className={styles["invalid-feedback"]}/>
+                        </div>
+                        <Field className={styles['form-input']} id="email" name="email" placeholder="Seu e-mail" />
+                    </div>
+                    <div className={styles['item-form-conteiner']}>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="cpf" className={styles['form-label']}>
+                                CPF
+                            </label>
+                            <ErrorMessage component="span" name="cpf" className={styles["invalid-feedback"]}/>
+                        </div>
+                        <Field className={styles['form-input']} id="cpf" name="cpf" placeholder="000.000.000-00" />
+                    </div>
+                    <div className={styles['item-form-conteiner']}>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="dataDeNacismento" className={styles['form-label']}>
+                                Data de Nascimento
+                            </label>
+                            <ErrorMessage component="span" name="dataDeNacismento" className={styles["invalid-feedback"]}/>
+                        </div>
+                        <Field className={styles['form-input']} id="dataDeNacismento" name="dataDeNacismento" placeholder="00.00.0000" />
+                    </div>
+                    <div className={styles['item-form-conteiner']}>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="telefone" className={styles['form-label']}>
+                                Telefone
+                            </label>
+                            <ErrorMessage component="span" name="telefone" className={styles["invalid-feedback"]}/>
+                        </div>
+                        <Field className={styles['form-input']} id="telefone" name="telefone" placeholder="(00) 00000-0000" />
+                    </div>
+                    <div className={styles['item-form-conteiner']}>
+                        <div className={styles['item-form-conteiner-schema']}>
+                            <label htmlFor="instagram" className={styles['form-label']}>
+                                Instagram
+                            </label>
+                        </div>
+                        <Field className={styles['form-input']} id="instagram" name="instagram" placeholder="@seuuser" />
+                    </div>
+                    <div className={styles['form-conteiner-checkbox']}>
+                        <span className={styles['form-checkbox-span']}>*</span>
+                        <label className={styles['form-checkbox-label']} htmlFor="checkbox">Declaro que li e aceito</label>
+                        <input className={styles['form-checkbox-input']}  type="checkbox" name="checkbox" id="checkbox" />
+                    </div>
+                    <button  className={styles['form-buttom']} type="submit">CADASTRE-SE</button>
+                </Form>
+            </Formik>
+            
+        </div>
+    )
+}
+
+
+export { Contato }
\ No newline at end of file
diff --git a/src/components/Main/mainNav.tsx b/src/components/Main/mainNav.tsx
new file mode 100644
index 0000000..aa0ffd4
--- /dev/null
+++ b/src/components/Main/mainNav.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Sobre } from './mainSobre'
+import { Pagamento } from './mainSobre'
+import { Entrega } from './mainSobre'
+import { Troca } from './mainSobre'
+import { Seguranca } from './mainSobre'
+import { Contato } from './mainFormik'
+
+import styles from './main.module.scss';
+
+import { BrowserRouter, Routes, Route, NavLink,} from "react-router-dom";
+
+const Nav = () => {
+    return(
+        <BrowserRouter>
+            <div className={styles['conteiner-div']}>
+                <nav className={styles['conteiner-nav']}>
+                    <ul className={styles['conteiner-ul']}>
+                        <li>
+                            <NavLink 
+                            to={'/'} 
+                            className={({isActive}) => (isActive ? `${styles["active-style"]}` : `${styles['item-li']}`)}>
+                                Sobre
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink 
+                            to={'/pagamento'}
+                            className={({isActive}) => (isActive ? `${styles["active-style"]}` : `${styles['item-li']}`)}>
+                                Forma de Pagamento
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink to={'/entrega'}
+                            className={({isActive}) => (isActive ? `${styles["active-style"]}` : `${styles['item-li']}`)}>
+                                Entrega
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink to={'/troca'}
+                            className={({isActive}) => (isActive ? `${styles["active-style"]}` : `${styles['item-li']}`)}>
+                                Troca e Devolução
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink to={'/seguranca'}
+                            className={({isActive}) => (isActive ? `${styles["active-style"]}` : `${styles['item-li']}`)}>
+                                Segurança e Privacidade
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink to={'/contato'}
+                            className={({isActive}) => (isActive ? `${styles["active-style"]}` : `${styles['item-li']}`)}>
+                                Contato
+                            </NavLink>
+                        </li>
+                    </ul>
+                </nav>
+                <Routes>
+                    <Route path="/" element={<Sobre />}></Route>
+                    <Route path="/pagamento" element={<Pagamento />}></Route>
+                    <Route path="/entrega" element={<Entrega/>}></Route>
+                    <Route path="/troca" element={<Troca />}></Route>
+                    <Route path="/seguranca" element={<Seguranca />}></Route>
+                    <Route path="/contato" element={<Contato />}></Route>
+                </Routes>
+            </div>
+        </BrowserRouter>
+    )
+}
+
+export { Nav }
\ No newline at end of file
diff --git a/src/components/Main/mainSobre.tsx b/src/components/Main/mainSobre.tsx
new file mode 100644
index 0000000..3c460f1
--- /dev/null
+++ b/src/components/Main/mainSobre.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import  styles  from './main.module.scss';
+
+const Text = () => {
+    return(
+        <p className={styles['item-description-text']}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br />
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br/><br />
+        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+    )
+}
+
+const Sobre = () => {
+    return(
+        <div className={styles['conteiner-item-description']}>
+            <h2 className={styles['item-description-title']}>Sobre</h2>
+            <Text/>
+        </div>
+    )
+}
+
+const Pagamento = () => {
+    return(
+        <div className={styles['conteiner-item-description']}>
+            <h2 className={styles['item-description-title']}>Forma de Pagamento</h2>
+            <Text/>
+        </div>
+    )
+}
+
+
+const Entrega = () => {
+    return(
+        <div className={styles['conteiner-item-description']}>
+            <h2 className={styles['item-description-title']}>Entrega</h2>
+            <Text/>
+        </div>
+    )
+}
+
+const Troca = () => {
+    return(
+        <div className={styles['conteiner-item-description']}>
+            <h2 className={styles['item-description-title']}>Troca e Devolução</h2>
+            <Text/>
+        </div>
+    )
+}
+
+const Seguranca = () => {
+    return(
+        <div className={styles['conteiner-item-description']}>
+            <h2 className={styles['item-description-title']}>Segurança e Privacidade</h2>
+            <Text/>
+        </div>
+    )
+}
+
+export { Sobre }
+export { Pagamento }
+export { Entrega }
+export { Troca }
+export { Seguranca }
+
diff --git a/src/styles/App b/src/styles/App
deleted file mode 100644
index e69de29..0000000