diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index d8b83df9..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-package-lock.json
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 91f0a228..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,84 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    jest: true,
-    "jest/globals": true,
-  },
-  extends: [
-    "airbnb",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:jsx-a11y/recommended",
-    "prettier",
-    "plugin:cypress/recommended",
-  ],
-  parser: "@babel/eslint-parser",
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: "module",
-    requireConfigFile: "false",
-    jsx: true,
-  },
-  plugins: [
-    "html",
-    "react",
-    "react-hooks",
-    "jsx-a11y",
-    "markdown",
-    "react-hooks",
-    "import",
-    "prettier",
-  ],
-  settings: {
-    react: {
-      version: "detect",
-    },
-    jest: {
-      version: 26,
-    },
-  },
-  overrides: [
-    {
-      files: ["*.html"],
-      parser: "@html-eslint/parser",
-      extends: ["plugin:@html-eslint/recommended"],
-    },
-    {
-      files: ["src/**/*.test.js"],
-      plugins: ["jest"],
-      rules: {
-        "jest/expect-expect": "error",
-      },
-      extends: ["plugin:jest/recommended"],
-    },
-  ],
-  rules: {
-    "prettier/prettier": [
-      "error",
-      {
-        endOfLine: "auto",
-      },
-    ],
-    "react/jsx-filename-extension": "off",
-    "import/prefer-default-export": "off",
-    "prefer-destructuring": "off",
-    "object-shorthand": "off",
-    "react/jsx-props-no-spreading": "off",
-    "arrow-body-style": "off",
-    "no-underscore-dangle": "off",
-    "react/forbid-prop-types": "off",
-    "react/prop-types": "off",
-    "no-unused-expressions": "off",
-    "jsx-a11y/label-has-for": [
-      "error",
-      {
-        required: {
-          some: ["nesting", "id"],
-        },
-      },
-    ],
-  },
-};
diff --git a/.husky/.gitignore b/.husky/.gitignore
new file mode 100644
index 00000000..31354ec1
--- /dev/null
+++ b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/package-lock.json b/package-lock.json
index 5a546dc7..7e785fc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2315,6 +2315,15 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.169.tgz",
       "integrity": "sha512-DvmZHoHTFJ8zhVYwCLWbQ7uAbYQEk52Ev2/ZiQ7Y7gQGeV9pjBqjnQpECMHfKS1rCYAhMI7LHVxwyZLZinJgdw=="
     },
+    "@types/mdast": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
+      "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
@@ -2425,6 +2434,12 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.28",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.28.tgz",
@@ -3566,12 +3581,6 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
-    "bail": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
-      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
-      "dev": true
-    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -4312,12 +4321,6 @@
         }
       }
     },
-    "collapse-white-space": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
-      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
-      "dev": true
-    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -5574,9 +5577,9 @@
       "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
     },
     "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
       "requires": {
         "ip": "^1.1.0",
         "safe-buffer": "^5.0.1"
@@ -6538,13 +6541,12 @@
       }
     },
     "eslint-plugin-markdown": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.1.0.tgz",
-      "integrity": "sha512-Rqw7tosArdlzXcR/xJGW3Er9gRiF7iE+QEMEm7hZZ/feZjUf8xCaGQJgB1nzs9yVhJnUeiAcj5TXLLfKMbp3DQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
+      "integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
       "dev": true,
       "requires": {
-        "remark-parse": "^7.0.0",
-        "unified": "^6.1.2"
+        "mdast-util-from-markdown": "^0.8.5"
       }
     },
     "eslint-plugin-node": {
@@ -7521,14 +7523,14 @@
       }
     },
     "formik": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
-      "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
+      "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.14",
-        "lodash-es": "^4.17.14",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "react-fast-compare": "^2.0.1",
         "tiny-warning": "^1.0.2",
         "tslib": "^1.10.0"
@@ -8856,23 +8858,11 @@
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw=="
     },
-    "is-whitespace-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
-      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
-      "dev": true
-    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
-    "is-word-character": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
-      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
-      "dev": true
-    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -10493,12 +10483,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-escapes": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
-      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
-      "dev": true
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10509,6 +10493,25 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "dev": true,
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -10582,6 +10585,16 @@
       "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
       "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g=="
     },
+    "micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "micromatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@@ -11447,9 +11460,9 @@
       }
     },
     "parse-entities": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
-      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
       "dev": true,
       "requires": {
         "character-entities": "^1.0.0",
@@ -11533,9 +11546,9 @@
       "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-starts-with": {
       "version": "1.0.0",
@@ -11766,9 +11779,9 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
-      "version": "7.0.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
       "requires": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -13348,11 +13361,11 @@
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
     "react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
@@ -13372,15 +13385,15 @@
       }
     },
     "react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
+      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
+        "react-router": "5.2.1",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
@@ -13760,29 +13773,6 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
     },
-    "remark-parse": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-7.0.2.tgz",
-      "integrity": "sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==",
-      "dev": true,
-      "requires": {
-        "collapse-white-space": "^1.0.2",
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0",
-        "is-whitespace-character": "^1.0.0",
-        "is-word-character": "^1.0.0",
-        "markdown-escapes": "^1.0.0",
-        "parse-entities": "^1.1.0",
-        "repeat-string": "^1.5.4",
-        "state-toggle": "^1.0.0",
-        "trim": "0.0.1",
-        "trim-trailing-lines": "^1.0.0",
-        "unherit": "^1.0.4",
-        "unist-util-remove-position": "^1.0.0",
-        "vfile-location": "^2.0.0",
-        "xtend": "^4.0.1"
-      }
-    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -13825,12 +13815,6 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
-    "replace-ext": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
-      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
-      "dev": true
-    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -13971,9 +13955,9 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "resolve-url-loader": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.3.tgz",
-      "integrity": "sha512-WbDSNFiKPPLem1ln+EVTE+bFUBdTTytfQZWbmghroaFNFaAVmGq0Saqw6F/306CwgPXsGwXVxbODE+3xAo/YbA==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz",
+      "integrity": "sha512-D3sQ04o0eeQEySLrcz4DsX3saHfsr8/N6tfhblxgZKXxMT2Louargg12oGNfoTRLV09GXhVUe5/qgA5vdgNigg==",
       "requires": {
         "adjust-sourcemap-loader": "3.0.0",
         "camelcase": "5.3.1",
@@ -13981,68 +13965,22 @@
         "convert-source-map": "1.7.0",
         "es6-iterator": "2.0.3",
         "loader-utils": "1.2.3",
-        "postcss": "7.0.21",
+        "postcss": "7.0.36",
         "rework": "1.0.1",
         "rework-visit": "1.0.0",
         "source-map": "0.6.1"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
         },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-        },
         "emojis-list": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
           "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
         },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -14060,24 +13998,6 @@
             "emojis-list": "^2.0.0",
             "json5": "^1.0.1"
           }
-        },
-        "postcss": {
-          "version": "7.0.21",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz",
-          "integrity": "sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==",
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
         }
       }
     },
@@ -15193,12 +15113,6 @@
         }
       }
     },
-    "state-toggle": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
-      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
-      "dev": true
-    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -15635,9 +15549,9 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
     },
     "tar": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
-      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -15982,24 +15896,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "trim": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
-      "dev": true
-    },
-    "trim-trailing-lines": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
-      "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
-      "dev": true
-    },
-    "trough": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
-      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
-      "dev": true
-    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -16124,16 +16020,6 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
-    "unherit": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
-      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -16158,20 +16044,6 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
     },
-    "unified": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
-      "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
-      "dev": true,
-      "requires": {
-        "bail": "^1.0.0",
-        "extend": "^3.0.0",
-        "is-plain-obj": "^1.1.0",
-        "trough": "^1.0.0",
-        "vfile": "^2.0.0",
-        "x-is-string": "^0.1.0"
-      }
-    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -16217,43 +16089,13 @@
         "crypto-random-string": "^1.0.0"
       }
     },
-    "unist-util-is": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
-      "dev": true
-    },
-    "unist-util-remove-position": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
-      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
-      "dev": true,
-      "requires": {
-        "unist-util-visit": "^1.1.0"
-      }
-    },
     "unist-util-stringify-position": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
-      "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==",
-      "dev": true
-    },
-    "unist-util-visit": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
-      "dev": true,
-      "requires": {
-        "unist-util-visit-parents": "^2.0.0"
-      }
-    },
-    "unist-util-visit-parents": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
       "dev": true,
       "requires": {
-        "unist-util-is": "^3.0.0"
+        "@types/unist": "^2.0.2"
       }
     },
     "universalify": {
@@ -16379,9 +16221,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -16494,33 +16336,6 @@
         "extsprintf": "^1.2.0"
       }
     },
-    "vfile": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
-      "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
-      "dev": true,
-      "requires": {
-        "is-buffer": "^1.1.4",
-        "replace-ext": "1.0.0",
-        "unist-util-stringify-position": "^1.0.0",
-        "vfile-message": "^1.0.0"
-      }
-    },
-    "vfile-location": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
-      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
-      "dev": true
-    },
-    "vfile-message": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
-      "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
-      "dev": true,
-      "requires": {
-        "unist-util-stringify-position": "^1.1.1"
-      }
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -17569,9 +17384,9 @@
           }
         },
         "ws": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
-          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
           "requires": {
             "async-limiter": "~1.0.0"
           }
@@ -17983,15 +17798,9 @@
       }
     },
     "ws": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
-      "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g=="
-    },
-    "x-is-string": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
-      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
-      "dev": true
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
+      "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index 18a1117b..344df910 100644
--- a/package.json
+++ b/package.json
@@ -19,12 +19,12 @@
     "classnames": "^2.3.1",
     "clsx": "^1.1.1",
     "cypress": "^7.5.0",
-    "formik": "^2.2.6",
+    "formik": "^2.2.9",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.3",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
diff --git a/src/App.js b/src/App.js
index de524524..a13ba0bc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,13 @@
-import React from "react";
+import React, { Component } from "react";
+import Home from './Home'
 
-function App() {
-  return (
-    <main className="container mt-5">
-      <section className="row">
-        <div className="col col-12">
-          <h1>Hola mundo</h1>
-        </div>
-      </section>
-    </main>
-  );
+class App extends Component {
+
+  render(){
+    return (
+      <Home/>
+    )
+    }
 }
 
-export default App;
+export default App
\ No newline at end of file
diff --git a/src/Components/Button/Button.js b/src/Components/Button/Button.js
new file mode 100644
index 00000000..1de373f1
--- /dev/null
+++ b/src/Components/Button/Button.js
@@ -0,0 +1,17 @@
+import React, {Component} from "react";
+import './Button.scss'
+
+class Button extends Component {
+    constructor(props){
+        super(props)
+    }
+    render(){
+        const {value} = this.props
+
+        return (
+            <button type="button" className="btn">{value}</button>
+        )
+    }
+}
+
+export default Button
\ No newline at end of file
diff --git a/src/Components/Button/Button.scss b/src/Components/Button/Button.scss
new file mode 100644
index 00000000..5ea2f8e2
--- /dev/null
+++ b/src/Components/Button/Button.scss
@@ -0,0 +1,13 @@
+.btn{
+    border: lightgrey 2px solid;
+    &__group{
+        display: flex;
+        flex-direction: row;
+    }
+    &__confirm{
+        margin-left: 2rem;
+    }
+    &__remove{
+        border: lightgrey 2px solid;
+    }
+}
\ No newline at end of file
diff --git a/src/Components/Button/index.js b/src/Components/Button/index.js
new file mode 100644
index 00000000..5853df07
--- /dev/null
+++ b/src/Components/Button/index.js
@@ -0,0 +1 @@
+export {default} from './Button'
\ No newline at end of file
diff --git a/src/Components/Counter/Counter.js b/src/Components/Counter/Counter.js
new file mode 100644
index 00000000..a80787fe
--- /dev/null
+++ b/src/Components/Counter/Counter.js
@@ -0,0 +1,18 @@
+import React, {Component} from "react";
+
+import './Counter.scss'
+
+class Counter extends Component {
+    
+    render(){
+        
+
+        return (
+            <div className="row counter__container">
+                <span>1</span><p>Tasks Left</p>
+            </div>
+        )
+    }
+}
+
+export default Counter
\ No newline at end of file
diff --git a/src/Components/Counter/Counter.scss b/src/Components/Counter/Counter.scss
new file mode 100644
index 00000000..c305e672
--- /dev/null
+++ b/src/Components/Counter/Counter.scss
@@ -0,0 +1,5 @@
+.counter__container{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/Components/Counter/index.js b/src/Components/Counter/index.js
new file mode 100644
index 00000000..5ced7017
--- /dev/null
+++ b/src/Components/Counter/index.js
@@ -0,0 +1 @@
+export {default} from './Counter'
\ No newline at end of file
diff --git a/src/Components/Footer/Footer.js b/src/Components/Footer/Footer.js
new file mode 100644
index 00000000..15e7e78a
--- /dev/null
+++ b/src/Components/Footer/Footer.js
@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+
+import  './Footer.scss'
+
+import Button from '../Button'
+import Counter from "../Counter"
+
+class Footer extends Component{
+    constructor(props){
+        super(props)
+    }
+    render(){
+        return(
+            <div className="footer">
+                <Counter />
+                <div className="btn__group">
+                    <NavLink to="/">
+                    <Button 
+                        value="All"
+                    />
+                    </NavLink>
+                    <NavLink to="/active" activeClassName="btn-secondary">
+                    <Button 
+                        value="Active"
+                    />
+                    </NavLink>
+                    <NavLink to="completed" activeClassName="btn-secondary">
+                    <Button 
+                        value="Completed"
+                    />
+                    </NavLink>
+                </div>
+                <Button 
+                    value="Delete All"
+                />
+            </div>
+        )
+    }
+}
+
+export default Footer;
+
diff --git a/src/Components/Footer/Footer.scss b/src/Components/Footer/Footer.scss
new file mode 100644
index 00000000..d0515187
--- /dev/null
+++ b/src/Components/Footer/Footer.scss
@@ -0,0 +1,7 @@
+.footer{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/src/Components/Footer/index.js b/src/Components/Footer/index.js
new file mode 100644
index 00000000..3fcfca8e
--- /dev/null
+++ b/src/Components/Footer/index.js
@@ -0,0 +1 @@
+export {default} from './Footer'
\ No newline at end of file
diff --git a/src/Components/Input/index.js b/src/Components/Input/index.js
new file mode 100644
index 00000000..cac250c4
--- /dev/null
+++ b/src/Components/Input/index.js
@@ -0,0 +1 @@
+export {default} from './input'
\ No newline at end of file
diff --git a/src/Components/Input/input.js b/src/Components/Input/input.js
new file mode 100644
index 00000000..72093347
--- /dev/null
+++ b/src/Components/Input/input.js
@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import "./input.scss";
+
+class Input extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      newValue: "",
+    };
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      newValue: e.target.value,
+    });
+  };
+  handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      this.props.handleEnter(this.state.newValue);
+      this.setState({
+        newValue: "",
+      });
+    }
+  };
+
+  render() {
+    const { newValue } = this.state;
+    return (
+      <>
+        <div className="input-group mb-3">
+          <input
+            type="text"
+            placeholder="Insert any activity... "
+            className="input__text"
+            aria-label="Insert any activity..."
+            value={newValue}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+          />
+          <div></div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default Input;
diff --git a/src/Components/Input/input.scss b/src/Components/Input/input.scss
new file mode 100644
index 00000000..8746f7e9
--- /dev/null
+++ b/src/Components/Input/input.scss
@@ -0,0 +1,68 @@
+.input{
+  &__text{
+    border: solid 2px lightgray;
+    border-radius: 5px;
+    width: 20rem;
+    height: 2rem;
+    background-color: rgba(176, 196, 222, 0.096);
+    margin-left: 2rem;
+  }
+}
+
+.line-through{
+  margin-left: 2rem;
+  font-style: italic;
+  text-decoration: line-through;
+}
+
+.normal__p{
+  margin-left: 2rem;
+}
+
+
+.input-group{
+  padding: 0.2rem;
+  background-color: white;
+}
+.round {
+  position: relative;
+}
+
+.round label {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 28px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 28px;
+}
+
+.round label:after {
+  border: 2px solid white;
+  border-top: none;
+  border-right: none;
+  content: "";
+  height: 6px;
+  left: 7px;
+  opacity: 0;
+  position: absolute;
+  top: 8px;
+  transform: rotate(-45deg);
+  width: 12px;
+}
+
+
+.round input[type="checkbox"]:checked + label {
+  background-color: blue;
+  border-color: white;
+}
+input[type="checkbox"]:checked + label:after {
+  opacity: 1;
+}
+
+input[type="checkbox"]{
+  visibility: hidden;
+}
diff --git a/src/Components/TodoList/TodoList.js b/src/Components/TodoList/TodoList.js
new file mode 100644
index 00000000..b10a1c54
--- /dev/null
+++ b/src/Components/TodoList/TodoList.js
@@ -0,0 +1,94 @@
+import React, { Component } from "react";
+import "./TodoList.scss";
+import "../Input/input.scss"
+
+export class TodoListItem extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isEditing: false,
+            value: props.value || "",
+            done:false
+                }
+        this.updateInput = this.updateInput.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleCheckbox = this.handleCheckbox.bind(this);
+    }
+
+    updateInput(keycode,value) {
+        this.setState({ 
+            [keycode]: value,
+        });
+    }
+
+    handleChange() {
+        if (this.state.isEditing) {
+            this.props.handleEdit(this.props.id, this.state.value);
+        }
+        this.setState({
+            isEditing: !this.state.isEditing,
+            
+        });
+    }
+    handleCheckbox(){
+        this.setState({
+            done:!this.state.done
+        })
+    }
+    render() {
+        const { id, done, handleRemove, handleEdit} = this.props;
+        const { isEditing, value } = this.state;
+
+        return (
+            <>
+            <div className="input__check__container">
+            <div className="round">
+                <input className="input__checkbox" id={"box" + id} type="checkbox"  
+                    checked={done}
+                    onChange={e => this.handleCheckbox(done)}
+                />
+                <label htmlFor={"box" + id}></label>
+            </div> 
+            {isEditing ? (<div className="input__todo__container">
+                <input type="text"
+                    className="input__text"
+                    id={id} 
+                    value={value}
+                    onChange={e => this.updateInput("value",e.target.value) 
+                    }
+                />
+                <button type="button" className="btn btn__confirm" onClick={() => this.handleChange(id, value,done)}>Confirm</button>
+                </div>):<p className={ this.state.done ? 'line-through': 'normal__p'} onClick={() => this.handleChange(id, value,done)}>{value}</p> }
+            </div>
+                <button className="btn btn__remove" type="button" onClick={() => handleRemove()}>Remove</button>
+            </>
+        );
+    }
+}
+
+class TodoList extends Component {
+
+    render(){
+        
+        return (
+            <div className="todo__list__container container-lg">
+            <ul>
+            {this.props.items.map((el)=> 
+                    <li key={el.id} id={el.id}>
+                    <TodoListItem 
+                        id={el.id} 
+                        value={el.value}
+                        handleRemove={() => this.props.handleRemove(el.id)}
+                        handleEdit={(id, value) => this.props.handelEdit(id,value)}
+                    />
+                   </li>
+                )
+                }
+                    
+              </ul>
+            </div>
+        )
+    }
+}
+
+export default TodoList;
\ No newline at end of file
diff --git a/src/Components/TodoList/TodoList.scss b/src/Components/TodoList/TodoList.scss
new file mode 100644
index 00000000..fd2026e6
--- /dev/null
+++ b/src/Components/TodoList/TodoList.scss
@@ -0,0 +1,30 @@
+li{
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1rem 0;
+    background-color: white;
+}
+.input__check__container{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+li:hover> .btn__remove{
+    display: contents;
+}
+
+.btn__remove{
+    display: none;
+    margin-right: 0rem;
+}
+
+.todo__list__container{
+    height: 20rem;
+}
+
+.title{
+    margin-left: 2rem;
+}
diff --git a/src/Components/TodoList/TodoList_Active.js b/src/Components/TodoList/TodoList_Active.js
new file mode 100644
index 00000000..63bd90b8
--- /dev/null
+++ b/src/Components/TodoList/TodoList_Active.js
@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import "./TodoList.scss";
+
+
+
+class TodoListActive extends Component {
+    constructor(props){
+        super(props)
+    }
+    
+    
+    render(){
+        return (
+            <div className="todo__list__container container-lg">
+            
+              </div>
+        )
+    }
+}
+
+export default TodoListActive;
\ No newline at end of file
diff --git a/src/Components/TodoList/TodoList_Completed.js b/src/Components/TodoList/TodoList_Completed.js
new file mode 100644
index 00000000..6e435369
--- /dev/null
+++ b/src/Components/TodoList/TodoList_Completed.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import "./TodoList.scss";
+import { TodoListItem } from "./TodoList";
+
+class TodoListCompleted extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      done: false,
+    };
+  }
+
+  render() {
+    const { done } = this.state;
+    return (
+      <div className="todo__list__container container-lg">
+        <ul id="completed">
+          {done ? (
+            this.props.items.map((el) => (
+              <li key={el.id} id={el.id}>
+                <TodoListItem
+                  id={el.id}
+                  value={el.value}
+                  handleRemove={() => this.props.handleRemove(el.id)}
+                  handleEdit={(id, value) => this.props.handelEdit(id, value)}
+                />
+              </li>
+            ))
+          ) : (
+            <p> Inside Function</p>
+          )}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default TodoListCompleted;
diff --git a/src/Components/TodoList/index.js b/src/Components/TodoList/index.js
new file mode 100644
index 00000000..6f9a599c
--- /dev/null
+++ b/src/Components/TodoList/index.js
@@ -0,0 +1 @@
+export {default} from './TodoList'
\ No newline at end of file
diff --git a/src/Home/home.js b/src/Home/home.js
new file mode 100644
index 00000000..ac7dfe8d
--- /dev/null
+++ b/src/Home/home.js
@@ -0,0 +1,87 @@
+import React, { Component } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
+import Input from "../Components/Input";
+import TodoList from "../Components/TodoList";
+import Footer from "../Components/Footer";
+import "./home.scss";
+import TodoListCompleted from "../Components/TodoList/TodoList_Completed";
+import TodoListActive from "../Components/TodoList/TodoList_Active";
+
+class Home extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      listToDos: [],
+      newToDo: "",
+    };
+    this.addItem = this.addItem.bind(this);
+    this.editItem = this.editItem.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
+  }
+  addItem(value) {
+    const newToDo = {
+      id: Math.floor(Math.random() * 100),
+      value: value,
+    };
+    const { listToDos } = this.state;
+    listToDos.push(newToDo);
+    this.setState({
+      listToDos,
+    });
+  }
+  editItem(id) {
+    const { listToDos } = this.state;
+    listToDos.find((item) => {
+      if (item.id === id) {
+      }
+    });
+    this.setState({
+      listToDos: listToDos,
+    });
+  }
+  deleteItem(id) {
+    const { listToDos } = this.state;
+    const updatedList = listToDos.filter((item) => item.id !== id);
+    this.setState({
+      listToDos: updatedList,
+      done:this.state
+    });
+  }
+  
+  render() {
+    // const displayData = this.getDataToDisplay(listToDos, filterData);
+    return (
+      <Router>
+        <main className="container mt-5">
+          <div className="container-lg">
+            <h1 className="title">TO DO</h1>
+          </div>
+          <section className="row container-lg input__todo">
+            <Input handleEnter={this.addItem} handelEdit={this.editItem} />
+          </section>
+          <section className="row container-lg">
+            <Switch>
+              <Route path="/" exact>
+                <TodoList
+                  items={this.state.listToDos}
+                  handleRemove={this.deleteItem}
+                  handelEdit={this.editItem}
+                />
+              </Route>
+              <Route path="/active" exact>
+                <TodoListActive />
+              </Route>
+              <Route path="/completed" exact>
+                <TodoListCompleted items={this.state.listToDos} />
+              </Route>
+            </Switch>
+            <Footer />
+          </section>
+        </main>
+      </Router>
+    );
+  }
+}
+
+export default Home;
diff --git a/src/Home/home.scss b/src/Home/home.scss
new file mode 100644
index 00000000..d9c72ff3
--- /dev/null
+++ b/src/Home/home.scss
@@ -0,0 +1,21 @@
+body{
+    background-color: rgba(176, 196, 222, 0.096);
+}
+p{
+    margin: 0;
+}
+
+h1{
+    margin-bottom: 5rem;
+    border-radius: 10px;
+}
+
+.container-lg{
+    background-color: white;
+    border-radius: 10px;
+}
+
+
+
+
+
diff --git a/src/Home/index.js b/src/Home/index.js
new file mode 100644
index 00000000..ad3e3351
--- /dev/null
+++ b/src/Home/index.js
@@ -0,0 +1 @@
+export {default} from './home'
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 19bb154c..d66b680f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 
-import App from "./App";
+import App from './App'
 import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(