diff --git a/package-lock.json b/package-lock.json
index cc2f9e8..0316886 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,12 +15,16 @@
         "@types/node": "^16.18.11",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.10",
+        "formik": "^2.2.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-imask": "^6.4.3",
+        "react-input-mask": "^2.0.4",
         "react-scripts": "5.0.1",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "yup": "^0.32.11"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3802,6 +3806,11 @@
       "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=="
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -7953,6 +7962,42 @@
         "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==",
+      "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==",
+      "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=="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8328,6 +8373,19 @@
         "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==",
+      "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=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8595,6 +8653,14 @@
         "node": ">= 4"
       }
     },
+    "node_modules/imask": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
+      "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==",
+      "engines": {
+        "npm": ">=4.0.0"
+      }
+    },
     "node_modules/immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -8698,6 +8764,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -11398,6 +11472,11 @@
       "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=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -11723,6 +11802,11 @@
         "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=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -13625,6 +13709,11 @@
       "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=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -13934,6 +14023,39 @@
       "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=="
+    },
+    "node_modules/react-imask": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
+      "integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
+      "dependencies": {
+        "imask": "^6.4.3",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "npm": ">=4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15477,6 +15599,11 @@
       "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=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -15509,6 +15636,11 @@
         "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=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@@ -15885,6 +16017,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -16809,6 +16949,23 @@
       "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==",
+      "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": {
@@ -19395,6 +19552,11 @@
       "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=="
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -22468,6 +22630,32 @@
         "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==",
+      "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=="
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -22726,6 +22914,21 @@
       "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==",
+      "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=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -22926,6 +23129,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
     },
+    "imask": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
+      "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw=="
+    },
     "immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -23000,6 +23208,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -24939,6 +25155,11 @@
       "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=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -25184,6 +25405,11 @@
         "thunky": "^1.0.2"
       }
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -26368,6 +26594,11 @@
         }
       }
     },
+    "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=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -26590,6 +26821,29 @@
       "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=="
+    },
+    "react-imask": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
+      "integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
+      "requires": {
+        "imask": "^6.4.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "requires": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27726,6 +27980,11 @@
       "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=="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -27749,6 +28008,11 @@
       "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=="
+    },
     "tough-cookie": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@@ -28025,6 +28289,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -28742,6 +29014,20 @@
       "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==",
+      "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 f1366d1..c3610be 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,16 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-imask": "^6.4.3",
+    "react-input-mask": "^2.0.4",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ad7a844..2d58c06 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,9 +5,9 @@ import Cart from "../assets/img/Cart.png";
 import iconMenu from "../assets/img/iconMenu.png";
 import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
-import MenuMobile from "./menuMobile";
+import MenuMobile from "./MenuMobile";
 
-import styles from "../styles/header.module.scss";
+import styles from "./header.module.scss";
 
 const Header = () => {
   const [isActive, setIsActive] = useState(false);
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index c371e95..10a66d8 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,4 +1,4 @@
-import styles from "../styles/header.module.scss";
+import styles from "./header.module.scss";
 
 export interface LinkProps {
   link: string;
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 9c6eb1f..4acc6a3 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -2,7 +2,7 @@ import iconHome from "../assets/img/iconHome.png";
 import arrow from "../assets/img/arrow.png";
 import SubjectMain from "./SubjectMain";
 
-import styles from "../styles/main.module.scss";
+import styles from "./main.module.scss";
 
 const Main = () => {
   return (
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 81f8dcf..280520f 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,4 +1,4 @@
-import styles from "../styles/subject.module.scss";
+import styles from "./subject.module.scss";
 
 interface NavProps {
   text: string;
diff --git a/src/components/RegistrationForm.tsx b/src/components/RegistrationForm.tsx
new file mode 100644
index 0000000..5e1d73b
--- /dev/null
+++ b/src/components/RegistrationForm.tsx
@@ -0,0 +1,202 @@
+import { useCallback, useState } from "react";
+import styles from "./form.module.scss";
+import stylesInput from "./input.module.scss";
+import stylesCheckbox from "./checkbox.module.scss";
+import FormSchema from "../schema/FormSchema";
+
+import { Formik, Form, Field, ErrorMessage } from "formik";
+
+interface RegistrationFormProps {
+  active: boolean;
+}
+
+interface FormikValues {
+  name: string;
+  email: string;
+  cpf: string;
+  data: string;
+  tel: string;
+  instagram: string;
+  acceptTerms: boolean;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  data: "",
+  tel: "",
+  instagram: "",
+  acceptTerms: false,
+};
+
+const RegistrationForm = (props: RegistrationFormProps) => {
+  const [isSubmit, setIsSubmit] = useState(false);
+  const handleFormSubmit = (values: FormikValues) => {
+    values.name = "";
+    values.email = "";
+    values.cpf = "";
+    values.data = "";
+    values.tel = "";
+    values.instagram = "";
+    values.acceptTerms = false;
+    setIsSubmit(!isSubmit);
+  };
+
+  const handleTel = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+    let value = e.currentTarget.value;
+    value = value.replace(/\D/g, "");
+    value = value.replace(/^(\d{2})(\d{5})(\d)/, "($1) $2-$3");
+    e.currentTarget.value = value;
+  }, []);
+  const handleDate = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+    let value = e.currentTarget.value;
+    value = value.replace(/\D/g, "");
+    value = value.replace(/^(\d{2})(\d{2})(\d)/, "$1.$2.$3");
+    e.currentTarget.value = value;
+  }, []);
+  const handleCpf = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+    let value = e.currentTarget.value;
+    value = value.replace(/\D/g, "");
+    value = value.replace(/^(\d{3})(\d{3})(\d{3})(\d)/, "$1.$2.$3-$4");
+    e.currentTarget.value = value;
+  }, []);
+  return (
+    <div
+      className={props.active ? styles["page-main__form"] : styles["desative"]}
+    >
+      <Formik
+        onSubmit={handleFormSubmit}
+        initialValues={initialValues}
+        validationSchema={FormSchema}
+      >
+        <Form>
+          <h3 className={styles["page-main__title"]}>Preencha o formulário</h3>
+          <div className={stylesInput["page-main__container"]}>
+            <label className={stylesInput["page-main__label"]} htmlFor="Name">
+              Nome
+            </label>
+            <Field
+              className={stylesInput["page-main__input"]}
+              id="Name"
+              placeholder="Seu nome completo"
+              name="name"
+            />
+            <ErrorMessage
+              name="name"
+              component="span"
+              className={stylesInput["page-main__error"]}
+            />
+          </div>
+          <div className={stylesInput["page-main__container"]}>
+            <label className={stylesInput["page-main__label"]} htmlFor="E-mail">
+              E-mail
+            </label>
+            <Field
+              className={stylesInput["page-main__input"]}
+              id="Email"
+              placeholder="Seu e-mail"
+              name="email"
+            />
+            <ErrorMessage
+              component="span"
+              name="email"
+              className={stylesInput["page-main__error"]}
+            />
+          </div>
+          <div className={stylesInput["page-main__container"]}>
+            <label className={stylesInput["page-main__label"]} htmlFor="Cpf">
+              CPF
+            </label>
+            <Field
+              className={stylesInput["page-main__input"]}
+              id="Cpf"
+              placeholder="000.000.000-00"
+              name="cpf"
+              onKeyUp={handleCpf}
+            />
+            <ErrorMessage
+              component="span"
+              name="cpf"
+              className={stylesInput["page-main__error"]}
+            />
+          </div>
+          <div className={stylesInput["page-main__container"]}>
+            <label className={stylesInput["page-main__label"]} htmlFor="Data">
+              Data de Nascimento:
+            </label>
+            <Field
+              className={stylesInput["page-main__input"]}
+              id="Data"
+              placeholder="00.00.0000"
+              name="data"
+              onKeyUp={handleDate}
+            />
+            <ErrorMessage
+              component="span"
+              name="data"
+              className={stylesInput["page-main__error"]}
+            />
+          </div>
+          <div className={stylesInput["page-main__container"]}>
+            <label className={stylesInput["page-main__label"]} htmlFor="tel">
+              Telefone:
+            </label>
+            <Field
+              className={stylesInput["page-main__input"]}
+              id="tel"
+              placeholder="(00) 00000-0000"
+              name="tel"
+              onKeyUp={handleTel}
+            />
+            <ErrorMessage
+              component="span"
+              name="tel"
+              className={stylesInput["page-main__error"]}
+            />
+          </div>
+          <label
+            className={stylesInput["page-main__label"]}
+            htmlFor="Instagram"
+          >
+            Instagram
+          </label>
+          <Field
+            className={stylesInput["page-main__input"]}
+            id="Instagram"
+            placeholder="@seuuser"
+            name="instagram"
+          />
+
+          <div className={stylesCheckbox["page-main__container"]}>
+            <label
+              className={stylesCheckbox["page-main__label"]}
+              htmlFor="acceptTerms"
+            >
+              *<strong>Declaro que li e aceito</strong>
+            </label>
+            <Field
+              type="checkbox"
+              name="acceptTerms"
+              className={stylesCheckbox["page-main__input"]}
+            />
+          </div>
+          <button type="submit" className={styles["page-main__button"]}>
+            CADASTRE-SE
+          </button>
+          <p
+            className={
+              isSubmit
+                ? styles["page-main__success"]
+                : styles["page-main__error"]
+            }
+          >
+            *Formulário enviado com sucesso!
+          </p>
+        </Form>
+      </Formik>
+    </div>
+  );
+};
+
+export default RegistrationForm;
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index b724133..677b026 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,6 +1,6 @@
 import iconBusca from "../assets/img/IconBusca.png";
 
-import styles from "../styles/header.module.scss";
+import styles from "./header.module.scss";
 
 const SearchBar = () => {
   return (
diff --git a/src/components/SubjectMain.tsx b/src/components/SubjectMain.tsx
index f46d0b2..0b06d1f 100644
--- a/src/components/SubjectMain.tsx
+++ b/src/components/SubjectMain.tsx
@@ -1,8 +1,8 @@
 import Nav from "./Nav";
 import SubjectText from "./SubjectText";
 
-import styles from "../styles/subject.module.scss";
-import Forum from "./form";
+import styles from "./subject.module.scss";
+import Forum from "./RegistrationForm";
 import { useState } from "react";
 
 const SubjectMain = () => {
@@ -123,8 +123,6 @@ const SubjectMain = () => {
     <Forum active={isForm} />,
   ];
 
-  console.log(Subjects);
-
   return (
     <section className={styles["page-subject"]}>
       <nav className={styles["page-subject__nav"]}>
diff --git a/src/components/SubjectText.tsx b/src/components/SubjectText.tsx
index 70da13f..9b41fad 100644
--- a/src/components/SubjectText.tsx
+++ b/src/components/SubjectText.tsx
@@ -1,4 +1,4 @@
-import styles from "../styles/subject.module.scss";
+import styles from "./subject.module.scss";
 
 interface SubjectTextProps {
   title: string;
diff --git a/src/styles/checkbox.module.scss b/src/components/checkbox.module.scss
similarity index 96%
rename from src/styles/checkbox.module.scss
rename to src/components/checkbox.module.scss
index a107309..87a0f0e 100644
--- a/src/styles/checkbox.module.scss
+++ b/src/components/checkbox.module.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import 'variables.scss';
 
 .page-main {
     &__container {
@@ -12,14 +12,15 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
-        color: $red;
         text-decoration: initial;
+        color: $red;
 
         strong {
             font-weight: 400;
             text-decoration: underline;
             color: $black-200;
         }
+
     }
 
     &__input {
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
deleted file mode 100644
index 9aa2eb1..0000000
--- a/src/components/checkbox.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import styles from "../styles/checkbox.module.scss";
-
-const Checkbox = () => {
-  return (
-    <div className={styles["page-main__container"]}>
-      <label className={styles["page-main__label"]} htmlFor="checkbox">
-        *<strong>Declaro que li e aceito</strong>
-      </label>
-      <input
-        id="checkbox"
-        className={styles["page-main__input"]}
-        type="checkbox"
-      />
-    </div>
-  );
-};
-
-export default Checkbox;
diff --git a/src/styles/form.module.scss b/src/components/form.module.scss
similarity index 97%
rename from src/styles/form.module.scss
rename to src/components/form.module.scss
index e5edb3d..b589eee 100644
--- a/src/styles/form.module.scss
+++ b/src/components/form.module.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import 'variables.scss';
 
 .desative {
     display: none;
diff --git a/src/components/form.tsx b/src/components/form.tsx
deleted file mode 100644
index 1397416..0000000
--- a/src/components/form.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import styles from "../styles/form.module.scss";
-import Checkbox from "./checkbox";
-import Input from "./input";
-
-interface FormProps {
-  active: boolean;
-  activeError?: boolean;
-}
-
-const Form = (props: FormProps) => {
-  return (
-    <form
-      className={props.active ? styles["page-main__form"] : styles["desative"]}
-    >
-      <h3 className={styles["page-main__title"]}>Preencha o formulário</h3>
-      <Input
-        htmlFor="Name"
-        id="Name"
-        textLabel="Nome"
-        type="text"
-        placeholder="Seu nome completo"
-      />
-      <Input
-        htmlFor="Email"
-        id="Email"
-        textLabel="E-mail"
-        type="email"
-        placeholder="Seu e-mail"
-      />
-      <Input
-        htmlFor="Cpf"
-        id="Cpf"
-        textLabel="CPF"
-        type="text"
-        placeholder="000.000.000-00"
-      />
-      <Input
-        htmlFor="Data"
-        id="Data"
-        textLabel="Data de Nascimento:"
-        type="text"
-        placeholder="00.00.0000"
-      />
-      <Input
-        htmlFor="tel"
-        id="tel"
-        textLabel="Telefone:"
-        type="text"
-        placeholder="(00) 00000-0000"
-      />
-      <Input
-        htmlFor="Instagram"
-        id="Instagram"
-        textLabel="Instagram"
-        type="text"
-        placeholder="@seuuser"
-      />
-      <Checkbox />
-      <button type="submit" className={styles["page-main__button"]}>
-        CADASTRE-SE
-      </button>
-      <p
-        className={
-          props.activeError
-            ? styles["page-main__success"]
-            : styles["page-main__error"]
-        }
-      >
-        *Formulário enviado com sucesso!
-      </p>
-    </form>
-  );
-};
-
-export default Form;
diff --git a/src/styles/header.module.scss b/src/components/header.module.scss
similarity index 99%
rename from src/styles/header.module.scss
rename to src/components/header.module.scss
index e043fdd..c0e3321 100644
--- a/src/styles/header.module.scss
+++ b/src/components/header.module.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import 'variables.scss';
 
 .page-header {
     display: flex;
diff --git a/src/styles/input.module.scss b/src/components/input.module.scss
similarity index 86%
rename from src/styles/input.module.scss
rename to src/components/input.module.scss
index 8fa7720..1f237b4 100644
--- a/src/styles/input.module.scss
+++ b/src/components/input.module.scss
@@ -1,12 +1,8 @@
-@import './variables.scss';
+@import 'variables.scss';
 
 .page-main {
     &__container {
         position: relative;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        margin-bottom: 12px;
     }
 
     &__label {
@@ -29,16 +25,13 @@
         padding-left: 20px;
         color: $gray-700;
         outline: 0;
+        margin: 12px 0;
 
         &::placeholder {
             color: $gray-700;
         }
     }
 
-    &__sem-erro {
-        display: none;
-    }
-
     &__error {
         display: flex;
         position: absolute;
diff --git a/src/components/input.tsx b/src/components/input.tsx
deleted file mode 100644
index 9db1560..0000000
--- a/src/components/input.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styles from "../styles/input.module.scss";
-
-interface InputProps {
-  placeholder: string;
-  type: string;
-  textLabel: string;
-  htmlFor: string;
-  id: string;
-  active?: boolean;
-}
-
-const Input = (props: InputProps) => {
-  return (
-    <div className={styles["page-main__container"]}>
-      <label className={styles["page-main__label"]} htmlFor={props.htmlFor}>
-        {props.textLabel}
-      </label>
-      <p
-        className={
-          props.active
-            ? styles["page-main__error"]
-            : styles["page-main__sem-erro"]
-        }
-      >
-        *Campo Obrigatório
-      </p>
-      <input
-        id={props.id}
-        className={styles["page-main__input"]}
-        type={props.type}
-        placeholder={props.placeholder}
-      />
-    </div>
-  );
-};
-
-export default Input;
diff --git a/src/styles/main.module.scss b/src/components/main.module.scss
similarity index 100%
rename from src/styles/main.module.scss
rename to src/components/main.module.scss
diff --git a/src/components/menuMobile.tsx b/src/components/menuMobile.tsx
index fa8cb06..60f26df 100644
--- a/src/components/menuMobile.tsx
+++ b/src/components/menuMobile.tsx
@@ -2,7 +2,7 @@ import iconExit from "../assets/img/iconExit.png";
 import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
 
-import styles from "../styles/header.module.scss";
+import styles from "./header.module.scss";
 
 interface MenuMobileProps {
   className: string;
diff --git a/src/styles/subject.module.scss b/src/components/subject.module.scss
similarity index 97%
rename from src/styles/subject.module.scss
rename to src/components/subject.module.scss
index 0029cd7..305d1d4 100644
--- a/src/styles/subject.module.scss
+++ b/src/components/subject.module.scss
@@ -107,6 +107,10 @@
         flex-direction: column;
         margin-top: 40px;
 
+        &__nav {
+            border: 0;
+        }
+
         &__menu {
             width: 100%;
             border-right: 0;
diff --git a/src/styles/variables.scss b/src/components/variables.scss
similarity index 100%
rename from src/styles/variables.scss
rename to src/components/variables.scss
diff --git a/src/styles/global.module.scss b/src/global.module.scss
similarity index 70%
rename from src/styles/global.module.scss
rename to src/global.module.scss
index 6f07fd5..a744e3f 100644
--- a/src/styles/global.module.scss
+++ b/src/global.module.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import './components/variables.scss';
 
 * {
     padding: 0;
diff --git a/src/index.tsx b/src/index.tsx
index 8f96f5b..8cdc8b4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import "./styles/global.module.scss";
+import "./global.module.scss";
 import Home from "./pages/Home";
 
 const App = () => {
diff --git a/src/schema/FormSchema.ts b/src/schema/FormSchema.ts
new file mode 100644
index 0000000..a40ed58
--- /dev/null
+++ b/src/schema/FormSchema.ts
@@ -0,0 +1,15 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  name: Yup.string()
+    .min(3, "mínimo 3 caracteres")
+    .required("*Campo Obrigatório"),
+  email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
+  cpf: Yup.string().length(14).required("*Campo Obrigatório"),
+  data: Yup.date()
+    .required("*Campo Obrigatório")
+    .max(new Date(), "Não é possível incluir uma data futura"),
+  tel: Yup.string().length(15).required("*Campo Obrigatório"),
+  instagram: Yup.string(),
+  acceptTerms: Yup.bool().oneOf([true], "*"),
+});