diff --git a/package-lock.json b/package-lock.json
index f26ec7a8b..13900ba9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,23 @@
       "name": "platzi-intro-react-base",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-brands-svg-icons": "^6.5.1",
+        "@fortawesome/free-regular-svg-icons": "^6.5.1",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "react": "^18",
         "react-dom": "^18",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.4.16",
+        "gh-pages": "^6.1.0",
+        "onchange": "^7.1.0",
+        "postcss": "^8.4.31",
+        "postcss-cli": "^10.1.0",
+        "sass": "^1.69.5"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1853,6 +1866,18 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@blakeembrey/deque": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@blakeembrey/deque/-/deque-1.0.5.tgz",
+      "integrity": "sha512-6xnwtvp9DY1EINIKdTfvfeAtCYw4OqBZJhtiqkT3ivjnEfa25VQ3TsKvaFfKm8MyGIEfE95qLe+bNEt3nB0Ylg==",
+      "dev": true
+    },
+    "node_modules/@blakeembrey/template": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@blakeembrey/template/-/template-1.1.0.tgz",
+      "integrity": "sha512-iZf+UWfL+DogJVpd/xMQyP6X6McYd6ArdYoPMiv/zlOTzeXXfQbYxBNJJBF6tThvsjLMbA8tLjkCdm9RWMFCCw==",
+      "dev": true
+    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -2187,6 +2212,75 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -4321,6 +4415,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
@@ -4402,9 +4505,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.13",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
-      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4413,12 +4516,16 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.4",
-        "caniuse-lite": "^1.0.30001426",
-        "fraction.js": "^4.2.0",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -4868,9 +4975,9 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "node_modules/browserslist": {
-      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
-      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4879,13 +4986,17 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001400",
-        "electron-to-chromium": "^1.4.251",
-        "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.9"
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4986,9 +5097,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001431",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
-      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
+      "version": "1.0.30001565",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz",
+      "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==",
       "funding": [
         {
           "type": "opencollective",
@@ -4997,6 +5108,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -5873,6 +5988,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6121,9 +6245,15 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.284",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
-      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
+      "version": "1.4.600",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.600.tgz",
+      "integrity": "sha512-KD6CWjf1BnQG+NsXuyiTDDT1eV13sKuYsOUioXkQweYTQIbgHkXPry9K7M+7cKtYHnSUPitVaLrXYB1jTkkYrw=="
+    },
+    "node_modules/email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -7166,9 +7296,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -7285,6 +7415,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -7579,15 +7735,15 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "engines": {
         "node": "*"
       },
       "funding": {
         "type": "patreon",
-        "url": "https://www.patreon.com/infusion"
+        "url": "https://github.com/sponsors/rawify"
       }
     },
     "node_modules/fresh": {
@@ -7706,6 +7862,18 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-stdin": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
+      "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -7732,6 +7900,79 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.0.tgz",
+      "integrity": "sha512-MdXigvqN3I66Y+tAZsQJMzpBWQOI1snD6BYuECmP+GEdryYMMOQvzn4AConk/+qNg/XIuQhB1xNGrl3Rmj1iow==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.4",
+        "commander": "^11.0.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^11.1.1",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -8194,9 +8435,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
+      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
       "engines": {
         "node": ">= 4"
       }
@@ -8210,6 +8451,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "devOptional": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11231,9 +11478,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -11287,9 +11540,9 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
     },
     "node_modules/node-releases": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -11500,6 +11753,30 @@
         "wrappy": "1"
       }
     },
+    "node_modules/onchange": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/onchange/-/onchange-7.1.0.tgz",
+      "integrity": "sha512-ZJcqsPiWUAUpvmnJri5TPBooqJOPmC0ttN65juhN15Q8xA+Nbg3BaxBHXQ45EistKKlKElb0edmbPWnKSBkvMg==",
+      "dev": true,
+      "dependencies": {
+        "@blakeembrey/deque": "^1.0.5",
+        "@blakeembrey/template": "^1.0.0",
+        "arg": "^4.1.3",
+        "chokidar": "^3.3.1",
+        "cross-spawn": "^7.0.1",
+        "ignore": "^5.1.4",
+        "tree-kill": "^1.2.2"
+      },
+      "bin": {
+        "onchange": "dist/bin.js"
+      }
+    },
+    "node_modules/onchange/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
     "node_modules/onetime": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -11724,6 +12001,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -11859,9 +12157,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
-      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -11870,10 +12168,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -11937,6 +12239,186 @@
         "postcss": "^8.4.6"
       }
     },
+    "node_modules/postcss-cli": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz",
+      "integrity": "sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^0.11.0",
+        "fs-extra": "^11.0.0",
+        "get-stdin": "^9.0.0",
+        "globby": "^13.0.0",
+        "picocolors": "^1.0.0",
+        "postcss-load-config": "^4.0.0",
+        "postcss-reporter": "^7.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "slash": "^5.0.0",
+        "yargs": "^17.0.0"
+      },
+      "bin": {
+        "postcss": "index.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/globby": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+      "dev": true,
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/globby/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/lilconfig": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+      "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-cli/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/yaml": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/postcss-color-functional-notation": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
@@ -12905,6 +13387,26 @@
         "postcss": "^8.0.3"
       }
     },
+    "node_modules/postcss-reporter": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz",
+      "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "thenby": "^1.3.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-selector-not": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
@@ -13074,6 +13576,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -13955,6 +14466,23 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -14549,6 +15077,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -14899,6 +15439,12 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/thenby": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+      "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+      "dev": true
+    },
     "node_modules/throat": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
@@ -14974,6 +15520,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -15084,9 +15651,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -15188,9 +15755,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
       "funding": [
         {
           "type": "opencollective",
@@ -15199,6 +15766,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
@@ -15206,7 +15777,7 @@
         "picocolors": "^1.0.0"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
@@ -17448,6 +18019,18 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "@blakeembrey/deque": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@blakeembrey/deque/-/deque-1.0.5.tgz",
+      "integrity": "sha512-6xnwtvp9DY1EINIKdTfvfeAtCYw4OqBZJhtiqkT3ivjnEfa25VQ3TsKvaFfKm8MyGIEfE95qLe+bNEt3nB0Ylg==",
+      "dev": true
+    },
+    "@blakeembrey/template": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@blakeembrey/template/-/template-1.1.0.tgz",
+      "integrity": "sha512-iZf+UWfL+DogJVpd/xMQyP6X6McYd6ArdYoPMiv/zlOTzeXXfQbYxBNJJBF6tThvsjLMbA8tLjkCdm9RWMFCCw==",
+      "dev": true
+    },
     "@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -17618,6 +18201,51 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -19195,6 +19823,12 @@
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
     "array.prototype.flat": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
@@ -19255,13 +19889,13 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
     },
     "autoprefixer": {
-      "version": "10.4.13",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
-      "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
       "requires": {
-        "browserslist": "^4.21.4",
-        "caniuse-lite": "^1.0.30001426",
-        "fraction.js": "^4.2.0",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -19611,14 +20245,14 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "browserslist": {
-      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
-      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
       "requires": {
-        "caniuse-lite": "^1.0.30001400",
-        "electron-to-chromium": "^1.4.251",
-        "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.9"
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
       }
     },
     "bser": {
@@ -19689,9 +20323,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001431",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
-      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ=="
+      "version": "1.0.30001565",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz",
+      "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -20316,6 +20950,12 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -20503,9 +21143,15 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.284",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
-      "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
+      "version": "1.4.600",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.600.tgz",
+      "integrity": "sha512-KD6CWjf1BnQG+NsXuyiTDDT1eV13sKuYsOUioXkQweYTQIbgHkXPry9K7M+7cKtYHnSUPitVaLrXYB1jTkkYrw=="
+    },
+    "email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true
     },
     "emittery": {
       "version": "0.8.1",
@@ -21271,9 +21917,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -21369,6 +22015,23 @@
         }
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -21568,9 +22231,9 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
     },
     "fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
     "fresh": {
       "version": "0.5.2",
@@ -21654,6 +22317,12 @@
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
       "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q=="
     },
+    "get-stdin": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
+      "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
+      "dev": true
+    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -21668,6 +22337,62 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "gh-pages": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.0.tgz",
+      "integrity": "sha512-MdXigvqN3I66Y+tAZsQJMzpBWQOI1snD6BYuECmP+GEdryYMMOQvzn4AConk/+qNg/XIuQhB1xNGrl3Rmj1iow==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.4",
+        "commander": "^11.0.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^11.1.1",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "commander": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+          "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "11.2.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+          "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        }
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -22008,15 +22733,21 @@
       }
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
+      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg=="
     },
     "immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
       "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
     },
+    "immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "devOptional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -24206,9 +24937,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -24250,9 +24981,9 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
     },
     "node-releases": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -24397,6 +25128,29 @@
         "wrappy": "1"
       }
     },
+    "onchange": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/onchange/-/onchange-7.1.0.tgz",
+      "integrity": "sha512-ZJcqsPiWUAUpvmnJri5TPBooqJOPmC0ttN65juhN15Q8xA+Nbg3BaxBHXQ45EistKKlKElb0edmbPWnKSBkvMg==",
+      "dev": true,
+      "requires": {
+        "@blakeembrey/deque": "^1.0.5",
+        "@blakeembrey/template": "^1.0.0",
+        "arg": "^4.1.3",
+        "chokidar": "^3.3.1",
+        "cross-spawn": "^7.0.1",
+        "ignore": "^5.1.4",
+        "tree-kill": "^1.2.2"
+      },
+      "dependencies": {
+        "arg": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+          "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+          "dev": true
+        }
+      }
+    },
     "onetime": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -24555,6 +25309,21 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
     "pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -24652,11 +25421,11 @@
       }
     },
     "postcss": {
-      "version": "8.4.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
-      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -24692,6 +25461,120 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "postcss-cli": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz",
+      "integrity": "sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^0.11.0",
+        "fs-extra": "^11.0.0",
+        "get-stdin": "^9.0.0",
+        "globby": "^13.0.0",
+        "picocolors": "^1.0.0",
+        "postcss-load-config": "^4.0.0",
+        "postcss-reporter": "^7.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "slash": "^5.0.0",
+        "yargs": "^17.0.0"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+          "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.1",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "11.2.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+          "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "globby": {
+          "version": "13.2.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+          "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+          "dev": true,
+          "requires": {
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.3.0",
+            "ignore": "^5.2.4",
+            "merge2": "^1.4.1",
+            "slash": "^4.0.0"
+          },
+          "dependencies": {
+            "slash": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+              "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+              "dev": true
+            }
+          }
+        },
+        "lilconfig": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+          "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+          "dev": true
+        },
+        "postcss-load-config": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+          "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+          "dev": true,
+          "requires": {
+            "lilconfig": "^3.0.0",
+            "yaml": "^2.3.4"
+          }
+        },
+        "slash": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+          "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+          "dev": true
+        },
+        "yaml": {
+          "version": "2.3.4",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+          "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "17.7.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+          "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+          "dev": true,
+          "requires": {
+            "cliui": "^8.0.1",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.3",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^21.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+          "dev": true
+        }
+      }
+    },
     "postcss-color-functional-notation": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
@@ -25225,6 +26108,16 @@
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
       "requires": {}
     },
+    "postcss-reporter": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz",
+      "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==",
+      "dev": true,
+      "requires": {
+        "picocolors": "^1.0.0",
+        "thenby": "^1.3.4"
+      }
+    },
     "postcss-selector-not": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
@@ -25340,6 +26233,12 @@
         }
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -25975,6 +26874,17 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -26433,6 +27343,15 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -26685,6 +27604,12 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "thenby": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+      "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+      "dev": true
+    },
     "throat": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
@@ -26744,6 +27669,21 @@
         "punycode": "^2.1.1"
       }
     },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true
+    },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -26831,9 +27771,9 @@
       }
     },
     "typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true
     },
     "unbox-primitive": {
@@ -26900,9 +27840,9 @@
       "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
     },
     "update-browserslist-db": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
diff --git a/package.json b/package.json
index 0c4b9cdc0..dbf9c3d0e 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,11 @@
   "name": "platzi-intro-react-base",
   "version": "0.1.0",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18",
     "react-dom": "^18",
     "react-scripts": "5.0.1",
@@ -9,8 +14,13 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "eject": "react-scripts eject",
+    "sass": "sass --style=compressed src/scss:src/css",
+    "prefix": "npm run sass && postcss src/css/**/*.css --use=autoprefixer --dir src/css --map",
     "build": "react-scripts build",
-    "eject": "react-scripts eject"
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+
   },
   "eslintConfig": {
     "extends": [
@@ -28,5 +38,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "homepage": "https://Iaramirez88.github.io/curso-react-platzi",
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "gh-pages": "^6.1.0",
+    "onchange": "^7.1.0",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^10.1.0",
+    "sass": "^1.69.5"
   }
 }
diff --git a/public/index.html b/public/index.html
index e5b37b15c..8b22a4f59 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,11 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>TODO Machine</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 4661df052..000000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #233553;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #97ca3f;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 952c8f1fd..3bb8d627d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,13 @@
-import logo from './platzi.webp';
-import './App.css';
+import React from 'react';
+import { AppUI } from './app/AppUI';
+import { TodoProvider } from './components/TodoContext';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edita el archivo <code>src/App.js</code> y guarda para recargar.
-        </p>
-        <a
-          className="App-link"
-          href="https://platzi.com/reactjs"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+
+  return(
+    <TodoProvider>
+      <AppUI/>
+    </TodoProvider>
   );
 }
 
diff --git a/src/app/AppUI.js b/src/app/AppUI.js
new file mode 100644
index 000000000..cd5be2290
--- /dev/null
+++ b/src/app/AppUI.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { TodoCounter } from '../components/TodoCounter';
+import { TodoSearch } from '../components/TodoSearch';
+import { TodoList } from '../components/TodoList';
+import { TodoItem } from '../components/TodoItem';
+import { TodosLoading } from '../components/TodosLoading';
+import { TodosError } from '../components/TodosError';
+import { EmptyTodos } from '../components/EmptyTodos';
+import { CreateTodoButton } from '../components/CreateTodoButton';
+import { TodoForm } from '../components/TodoForm';
+import { Modal } from '../modal';
+import { TodoContext } from '../components/TodoContext';
+
+function AppUI(){
+  const {
+    loading,
+    error,
+    searchedTodos,
+    completeTodo,
+    deleteTodo,
+    openModal,
+    setOpenModal,
+  } = React.useContext(TodoContext);
+return (
+    <>
+      <TodoCounter/>
+      <TodoSearch/>
+      <TodoList>
+      {loading && (
+        <>
+          <TodosLoading/>
+          <TodosLoading/>
+          <TodosLoading/>
+        </>
+      )}
+      {error && <TodosError/>}
+      {(!loading && searchedTodos.length === 0) && <EmptyTodos/>}
+      {searchedTodos.map(todo =>(
+        <TodoItem 
+        key={todo.text} 
+        text={todo.text} 
+        completed={todo.completed}
+        onComplete={() => completeTodo(todo.text)}
+        onDelete={() => deleteTodo(todo.text)}
+        />
+        ))}
+      </TodoList>
+      <CreateTodoButton setOpenModal={setOpenModal}/> 
+      {openModal && (
+        <Modal>
+          <TodoForm/>
+        </Modal>
+      )}
+    </>
+  );
+}
+export { AppUI };
\ No newline at end of file
diff --git a/src/components/CreateTodoButton.js b/src/components/CreateTodoButton.js
new file mode 100644
index 000000000..f895f2b92
--- /dev/null
+++ b/src/components/CreateTodoButton.js
@@ -0,0 +1,14 @@
+function CreateTodoButton({ setOpenModal }){
+    return (
+      <button 
+      className="CreateTodoButton"
+      onClick={
+        ()=>{
+          setOpenModal(state => !state);
+        }
+      }
+      >+</button>
+    );
+  }
+
+  export { CreateTodoButton };
\ No newline at end of file
diff --git a/src/components/EmptyTodos.js b/src/components/EmptyTodos.js
new file mode 100644
index 000000000..bbe491b68
--- /dev/null
+++ b/src/components/EmptyTodos.js
@@ -0,0 +1,9 @@
+import React from "react";
+function EmptyTodos(){
+    
+    return (
+      <p>¡Crea tu primer TODO!</p>
+    );
+  }
+
+  export { EmptyTodos };
\ No newline at end of file
diff --git a/src/components/TodoContext.js b/src/components/TodoContext.js
new file mode 100644
index 000000000..220f5444d
--- /dev/null
+++ b/src/components/TodoContext.js
@@ -0,0 +1,75 @@
+import React from  'react';
+import { useLocalStorage } from '../hooks/localStorage';
+
+const TodoContext = React.createContext();
+
+function TodoProvider({children}){   
+  const {
+    item: todos, 
+    saveItem: saveTodos, 
+    loading, 
+    error,
+  } = useLocalStorage('TODOS_V1', []);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [openModal, setOpenModal] = React.useState(false);
+  const completedTodos = todos.filter( 
+    todo => !!todo.completed
+  ).length;
+  const totalTodos = todos.length;
+  const searchedTodos = todos.filter(
+    (todo)=>{
+      const todoText = todo.text.toLowerCase();
+      const searchText = searchValue.toLowerCase();
+      return  todoText.includes(searchText);
+    }
+  );
+  
+  const addTodo = (text)=>{
+    const newTodos = [...todos];
+    newTodos.push({
+      text,
+      completed: false,
+    });
+    saveTodos(newTodos);
+  };
+
+  const completeTodo = (text) =>{
+    const newTodos = [...todos];
+    const todoIndex = newTodos.findIndex(
+      (todo) => todo.text === text
+    );
+    newTodos[todoIndex].completed = true;
+    saveTodos(newTodos);
+  };
+
+  const deleteTodo = (text) =>{
+    const newTodos = [...todos];
+    const todoIndex = newTodos.findIndex(
+      (todo) => todo.text === text
+    );
+    newTodos.splice(todoIndex, 1);
+    saveTodos(newTodos);
+  };
+
+  return (
+    <TodoContext.Provider value={{
+        addTodo,
+        loading,
+        error,
+        completedTodos,
+        totalTodos,
+        searchValue,
+        setSearchValue,
+        searchedTodos,
+        completeTodo,
+        deleteTodo,
+        openModal, 
+        setOpenModal,
+    }}>
+        {children}
+    </TodoContext.Provider>
+  )
+
+}
+
+export { TodoContext, TodoProvider};
\ No newline at end of file
diff --git a/src/components/TodoCounter.js b/src/components/TodoCounter.js
new file mode 100644
index 000000000..b0bdc01a2
--- /dev/null
+++ b/src/components/TodoCounter.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { TodoContext } from "./TodoContext";
+
+function TodoCounter(){
+  const {
+    completedTodos,
+    totalTodos,
+  } = React.useContext(TodoContext);
+  return (
+    <h1 className="TodoCounter">
+      Has completado <span>{completedTodos}</span> de <span>{totalTodos}</span> Todos
+    </h1>
+  );
+}
+
+export { TodoCounter };
\ No newline at end of file
diff --git a/src/components/TodoForm.js b/src/components/TodoForm.js
new file mode 100644
index 000000000..fdb88bcdd
--- /dev/null
+++ b/src/components/TodoForm.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { TodoContext } from './TodoContext';
+function TodoForm(){
+    const{
+        addTodo,
+        setOpenModal,
+    } = React.useContext(TodoContext);
+    const [newTodoValue, setNewTodoValue] = React.useState('')
+    const onSubmit = (event)=>{
+        event.preventDefault();
+        addTodo(newTodoValue);
+        setOpenModal(false);
+    };
+    const onCancel = () =>{
+        setOpenModal(false); 
+    }
+    const onChange = (event) =>{
+        setNewTodoValue(event.target.value);
+    }
+    return(
+        <form onSubmit={onSubmit}>
+            <label>Escribe tu nuevo TODO</label>
+            <textarea placeholder="Escribe tu tarea" value={newTodoValue} onChange={onChange}/>
+            <div className='TodoForm-buttonContainer'>
+                <button type="button" className='TodoForm-button TodoForm-button--cancel' onClick={onCancel}>Cancelar</button>
+                <button type="submit" className='TodoForm-button TodoForm-button--add'>Añadir</button>
+            </div>
+        </form>
+    );
+}
+
+export {TodoForm};
\ No newline at end of file
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
new file mode 100644
index 000000000..bed59893b
--- /dev/null
+++ b/src/components/TodoItem.js
@@ -0,0 +1,25 @@
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck,faXmark } from '@fortawesome/free-solid-svg-icons'
+
+function TodoItem(props){
+  return (
+    <li className='TodoItem'>
+      <span 
+        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`} 
+        onClick={props.onComplete}>
+        <FontAwesomeIcon icon={faCheck} />
+      </span>
+      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>
+        {props.text}
+      </p>
+      <span 
+        className="Icon Icon-delete"
+        onClick={props.onDelete}>
+        <FontAwesomeIcon icon={faXmark} />
+      </span>
+    </li>
+  );
+}
+
+  export { TodoItem };
\ No newline at end of file
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
new file mode 100644
index 000000000..b6e86e308
--- /dev/null
+++ b/src/components/TodoList.js
@@ -0,0 +1,9 @@
+function TodoList(props){
+    return (
+      <ul>
+        {props.children}
+      </ul>
+    );
+  }
+
+  export { TodoList };
\ No newline at end of file
diff --git a/src/components/TodoSearch.js b/src/components/TodoSearch.js
new file mode 100644
index 000000000..906bc31aa
--- /dev/null
+++ b/src/components/TodoSearch.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { TodoContext } from "./TodoContext";
+
+function TodoSearch(){
+  const {
+    searchValue,
+    setSearchValue,
+  } = React.useContext(TodoContext); 
+    return (
+      <input 
+        placeholder="buscar tarea" 
+        className="TodoSearch"
+        value={searchValue}
+        onChange={(event) =>{
+          setSearchValue(event.target.value);
+        }}
+      />
+    );
+  }
+
+  export { TodoSearch };
\ No newline at end of file
diff --git a/src/components/TodosError.js b/src/components/TodosError.js
new file mode 100644
index 000000000..d50854ce6
--- /dev/null
+++ b/src/components/TodosError.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+function TodosError(){
+        return (
+      <p>Error...</p>
+    );
+  }
+
+  export { TodosError };
\ No newline at end of file
diff --git a/src/components/TodosLoading.js b/src/components/TodosLoading.js
new file mode 100644
index 000000000..df6b388af
--- /dev/null
+++ b/src/components/TodosLoading.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+function TodosLoading(){
+    return (
+      <div className="LoadingTodo-container">
+        <span className="LoadingTodo-completeIcon"></span>
+        <p className="LoadingTodo-text"></p>
+        <span className="LoadingTodo-deleteIcon"></span>
+      </div>
+    );
+  }
+
+  export { TodosLoading };
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
new file mode 100644
index 000000000..df7019627
--- /dev/null
+++ b/src/css/main.css
@@ -0,0 +1,3 @@
+@font-face{font-family:"Montserrat-Bold";src:url("../fonts/montserrat.bold.otf") format("truetype");font-weight:700}@font-face{font-family:"Montserrat-Regular";src:url("../fonts/montserrat.regular (1).otf") format("truetype");font-weight:400}*{font-family:montserrat}body{background-color:#f2f4f5;width:375px;margin:0 auto}.TodoCounter{font-size:24px;text-align:center;margin:0;padding:48px;font-family:montserrat;font-weight:300;color:#000}.TodoCounter span{font-family:montserrat;font-weight:bold}.TodoSearch{width:279px;height:64px;border-radius:2px;border:2px solid #1e1e1f;margin:0 auto;display:block;font-size:24px;text-align:center;font-family:Montserrat}.TodoSearch::placeholder{color:#a5a5a5;font-weight:400;font-family:"Montserrat"}.TodoSearch:focus{outline-color:#61dafa}ul{width:327px;margin:0 auto;margin-top:40px;padding-inline-start:0px}ul .TodoItem{width:307px;height:100px;margin-top:20px;background-color:#fafafa;border-radius:2px;box-shadow:0px 0px 15px rgba(0,0,0,.1);display:flex;justify-content:space-between;padding-left:20px;align-items:center}ul .TodoItem .TodoItem-p{font-size:18px;color:#1e1e1f;font-family:montserrat}ul .TodoItem .TodoItem-p--complete{text-decoration:line-through}ul .TodoItem .Icon{cursor:pointer;display:flex;justify-content:center;align-items:center;height:48px;width:48px;font-size:24px;font-weight:bold}ul .TodoItem .Icon-delete{position:relative;top:-50px;right:12px}ul .TodoItem .Icon-delete:hover{color:red}ul .TodoItem .Icon-check--active{color:#4caf50}.CreateTodoButton{background-color:#61dafa;box-shadow:0px 5px 25px rgba(97,218,250,.5);border:none;border-radius:50%;cursor:pointer;font-size:50px;position:fixed;bottom:24px;right:24px;font-weight:bold;color:#fafafa;display:flex;justify-content:center;align-content:center;height:64px;width:64px;z-index:1;transform:rotate(0);transition:.3s ease}.CreateTodoButton:hover{transform:rotate(224deg)}ul{width:327px;margin:0 auto;margin-top:40px;padding-inline-start:0px}ul .LoadingTodo-container{width:307px;height:100px;margin-top:20px;border-radius:2px;box-shadow:0px 0px 15px rgba(0,0,0,.1);display:flex;justify-content:space-between;padding-left:20px;align-items:center;background:linear-gradient(90deg, rgb(250, 250, 250), rgb(200, 199, 199));background-size:400% 400%;animation:loadingAnimation 3s ease-in-out infinite}ul .LoadingTodo-container .LoadingTodo-text{font-size:18px;color:#1e1e1f;font-family:montserrat}ul .LoadingTodo-container .LoadingTodo-deleteIcon{position:relative;top:-45px;right:0;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:50px;height:48px;width:48px;background:linear-gradient(90deg, rgb(250, 250, 250), rgb(200, 199, 199));background-size:400% 400%;animation:loadingAnimation 3s ease-in-out infinite}ul .LoadingTodo-container .LoadingTodo-completeIcon{position:relative;left:12px;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:50px;height:48px;width:48px;background:linear-gradient(90deg, rgb(250, 250, 250), rgb(200, 199, 199));background-size:400% 400%;animation:loadingAnimation 3s ease-in-out infinite}@keyframes loadingAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.ModalBackground{background-color:rgba(32,35,41,.8);display:flex;justify-content:center;align-items:center;color:#fff;position:fixed;top:0;left:0;right:0;bottom:0}form{width:90%;max-width:300px;background-color:#fff;padding:33px 40px;display:flex;justify-content:center;align-items:center;flex-direction:column}form label{text-align:center;font-weight:bold;font-size:20px;color:#1e1e1f;margin-bottom:26px}form textarea{background-color:#f9fbfc;border:2px solid #202329;border-radius:2px;box-shadow:0px 5px 50px rgba(32,35,42,.25);color:#1e1e1f;font-size:20px;text-align:center;padding:12px;height:96px;width:calc(100% - 25px)}form textarea::placeholder{color:#a5a5a5;font-family:"Montserrat";font-weight:400}form textarea:focus{outline-color:#61dafa}form .TodoForm-buttonContainer{margin-top:14px;display:flex;justify-content:space-between;align-items:center;width:100%}form .TodoForm-button{cursor:pointer;display:inline-block;font-size:20px;color:#202329;font-weight:400;width:120px;height:48px;border-radius:2px;border:none;font-family:"Montserrat"}form .TodoForm-button--add{background:#61dafa;box-shadow:0px 5px 25px rgba(97,218,250,.5)}form .TodoForm-button--cancel{background:rgba(0,0,0,0)}
+
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/src/css/main.css.map b/src/css/main.css.map
new file mode 100644
index 000000000..af8db08d4
--- /dev/null
+++ b/src/css/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../scss/base/_fonts.scss","../scss/pages/home/_TodoCounter.scss","../scss/abstracts/_variables.scss","../scss/pages/home/_CreateTodoButton.scss","../scss/pages/home/_TodosLoading.scss","../scss/pages/home/_modal.scss","../scss/pages/home/_TodoForm.scss"],"names":[],"mappings":"AAIA,WACC,6BAAA,CACA,0DAAA,CACA,eAAA,CAID,WACC,gCAAA,CACA,iEAAA,CACA,eAAA,CCdD,EACI,sBAAA,CAEJ,KACI,wBAAA,CACA,WAAA,CACA,aAAA,CAEJ,aACI,cAAA,CACA,iBAAA,CACA,QAAA,CACA,YAAA,CACA,sBAAA,CACA,eAAA,CACA,UCVI,CDWJ,kBACI,sBAAA,CACA,gBAAA,CAGR,YACI,WAAA,CACA,WAAA,CACA,iBAAA,CACA,wBAAA,CACA,aAAA,CACA,aAAA,CACA,cAAA,CACA,iBAAA,CACA,sBAAA,CACA,yBACI,aAAA,CACA,eAAA,CACA,wBAAA,CAEJ,kBACI,qBAAA,CAGR,GACI,WAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,aACI,WAAA,CACA,YAAA,CACA,eAAA,CACA,wBAAA,CACA,iBAAA,CACA,sCAAA,CACA,YAAA,CACA,6BAAA,CACA,iBAAA,CACA,kBAAA,CACA,yBACI,cAAA,CACA,aAAA,CACA,sBAAA,CACA,mCACI,4BAAA,CAGR,mBACI,cAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,gBAAA,CACA,0BACI,iBAAA,CACA,SAAA,CACA,UAAA,CACA,gCACI,SAAA,CAGR,iCACI,aAAA,CElFhB,kBACI,wBAAA,CACA,2CAAA,CACA,WAAA,CACA,iBAAA,CACA,cAAA,CACA,cAAA,CACA,cAAA,CACA,WAAA,CACA,UAAA,CACA,gBAAA,CACA,aAAA,CACA,YAAA,CACA,sBAAA,CACA,oBAAA,CACA,WAAA,CACA,UAAA,CACA,SAAA,CACA,mBAAA,CACA,mBAAA,CAEJ,wBACI,wBAAA,CCrBJ,GACI,WAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,0BACI,WAAA,CACA,YAAA,CACA,eAAA,CACA,iBAAA,CACA,sCAAA,CACA,YAAA,CACA,6BAAA,CACA,iBAAA,CACA,kBAAA,CACA,yEAAA,CACJ,yBAAA,CACA,kDAAA,CACI,4CACA,cAAA,CACA,aAAA,CACA,sBAAA,CAEA,kDACI,iBAAA,CACA,SAAA,CACA,OAAA,CACA,cAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,yEAAA,CACR,yBAAA,CACA,kDAAA,CAEI,oDACI,iBAAA,CACA,SAAA,CACA,cAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,yEAAA,CACR,yBAAA,CACA,kDAAA,CAKJ,4BACI,GACI,0BAAA,CAEJ,IACI,4BAAA,CAEJ,KACI,0BAAA,CAAA,CChER,iBACI,kCAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,UAAA,CACA,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CCVJ,KACI,SAAA,CACA,eAAA,CACA,qBAAA,CACA,iBAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,qBAAA,CACD,WACC,iBAAA,CACA,gBAAA,CACA,cAAA,CACA,aAAA,CACA,kBAAA,CAED,cACC,wBAAA,CACA,wBAAA,CACA,iBAAA,CACA,0CAAA,CACA,aAAA,CACA,cAAA,CACA,iBAAA,CACA,YAAA,CACA,WAAA,CACA,uBAAA,CACA,2BACI,aAAA,CACA,wBAAA,CACA,eAAA,CAEJ,oBACI,qBAAA,CAGL,+BACC,eAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,UAAA,CAED,sBACC,cAAA,CACA,oBAAA,CACA,cAAA,CACA,aAAA,CACA,eAAA,CACA,WAAA,CACA,WAAA,CACA,iBAAA,CACA,WAAA,CACA,wBAAA,CACA,2BACI,kBAAA,CACA,2CAAA,CAEJ,8BACI,wBAAA","file":"main.css"}
\ No newline at end of file
diff --git a/src/fonts/montserrat.bold.otf b/src/fonts/montserrat.bold.otf
new file mode 100644
index 000000000..2a3ad4e7b
Binary files /dev/null and b/src/fonts/montserrat.bold.otf differ
diff --git a/src/fonts/montserrat.bold.ttf b/src/fonts/montserrat.bold.ttf
new file mode 100644
index 000000000..ae33a4538
Binary files /dev/null and b/src/fonts/montserrat.bold.ttf differ
diff --git a/src/fonts/montserrat.bold.woff2 b/src/fonts/montserrat.bold.woff2
new file mode 100644
index 000000000..c2a2ce3ca
Binary files /dev/null and b/src/fonts/montserrat.bold.woff2 differ
diff --git a/src/fonts/montserrat.regular (1).otf b/src/fonts/montserrat.regular (1).otf
new file mode 100644
index 000000000..171796473
Binary files /dev/null and b/src/fonts/montserrat.regular (1).otf differ
diff --git a/src/fonts/montserrat.regular (2).otf b/src/fonts/montserrat.regular (2).otf
new file mode 100644
index 000000000..2a3ad4e7b
Binary files /dev/null and b/src/fonts/montserrat.regular (2).otf differ
diff --git a/src/fonts/montserrat.regular.ttf b/src/fonts/montserrat.regular.ttf
new file mode 100644
index 000000000..5b4b5afe6
Binary files /dev/null and b/src/fonts/montserrat.regular.ttf differ
diff --git a/src/fonts/montserrat.regular.woff2 b/src/fonts/montserrat.regular.woff2
new file mode 100644
index 000000000..9bb61055b
Binary files /dev/null and b/src/fonts/montserrat.regular.woff2 differ
diff --git a/src/hooks/localStorage.js b/src/hooks/localStorage.js
new file mode 100644
index 000000000..82e4ea1a6
--- /dev/null
+++ b/src/hooks/localStorage.js
@@ -0,0 +1,52 @@
+import React from "react";
+// -------------start hook----------------
+function useLocalStorage(itemName, initialValue){
+
+    const [item, setItem] = React.useState(initialValue);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(false);
+
+    React.useEffect(() => {
+        setTimeout(() => {
+            try{
+                const localStorageItem = localStorage.getItem(itemName);
+            let parsedItem;
+    
+            if (!localStorageItem){
+                localStorage.setItem(itemName, JSON.stringify(initialValue));
+                parsedItem = initialValue;
+              } else {
+                parsedItem =JSON.parse(localStorageItem);
+                setItem(parsedItem);
+              }
+              setLoading(false);
+            } catch(error){
+                setLoading(false);
+                setError(true);
+            }
+        },2000);
+    },[itemName, initialValue]);
+
+    const saveItem = (newItem) => {
+      localStorage.setItem(itemName, JSON.stringify(newItem));
+      setItem(newItem);
+    }
+    return {
+        item, 
+        saveItem, 
+        loading, 
+        error,
+    };
+  }
+  export { useLocalStorage };
+  // -------------end hook------------------
+
+  // localStorage.removeItem('TODOS_V1');
+// const defaultTodos = [
+//   {text:'Cortar cebolla', completed: true},
+//   {text:'Tomar curso react', completed: false},
+//   {text:'llorar con la llorona', completed: false},
+//   {text:'lalallala', completed: false},
+//   {text:'otro estado', completed: true},
+// ]
+// localStorage.setItem('TODOS_V1', JSON.stringify(defaultTodos)); 
\ No newline at end of file
diff --git a/src/img/icons/Button Open Modal.png b/src/img/icons/Button Open Modal.png
new file mode 100644
index 000000000..db81c76d4
Binary files /dev/null and b/src/img/icons/Button Open Modal.png differ
diff --git a/src/img/icons/Check (1).png b/src/img/icons/Check (1).png
new file mode 100644
index 000000000..e4a4f00c7
Binary files /dev/null and b/src/img/icons/Check (1).png differ
diff --git a/src/img/icons/Check.png b/src/img/icons/Check.png
new file mode 100644
index 000000000..24141e0e4
Binary files /dev/null and b/src/img/icons/Check.png differ
diff --git a/src/img/icons/X (1).png b/src/img/icons/X (1).png
new file mode 100644
index 000000000..a4a82c415
Binary files /dev/null and b/src/img/icons/X (1).png differ
diff --git a/src/img/icons/X.png b/src/img/icons/X.png
new file mode 100644
index 000000000..17e259213
Binary files /dev/null and b/src/img/icons/X.png differ
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8c..000000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index 793e2b837..ad00011b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
+import './css/main.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<App />);
diff --git a/src/modal/index.js b/src/modal/index.js
new file mode 100644
index 000000000..bd7b894cf
--- /dev/null
+++ b/src/modal/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+function Modal({ children }){
+    return ReactDOM.createPortal(
+        <div className="ModalBackground">
+            {children}
+        </div>,
+        document.getElementById('modal')
+    );
+}
+
+export{Modal};
\ No newline at end of file
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
new file mode 100644
index 000000000..74a92d915
--- /dev/null
+++ b/src/scss/abstracts/_variables.scss
@@ -0,0 +1,25 @@
+////////////////////////////////////////////////////////////
+//variables
+////////////////////////////////////////////////////////////
+
+//Colors
+$black: #000000;
+$blue: #018fef;
+
+////////////////////////////////////////////////////////////
+//Fonts
+$Monserrat: "Monserrat";
+$Monserrat-Bold: "Monserrat-Bold";
+$Monserrat-Regular: "Monserrat-Regular";
+
+////////////////////////////////////////////////////////////
+//Media Queries
+$desktop_1920: 1921px !default;
+$desktop_1640: 1641px !default;
+$desktop_1440: 1441px !default;
+$desktop_1366: 1367px !default;
+$desktop_1280: 1281px !default;
+$desktop_1024: 1025px !default;
+$tablet: 769px !default;
+$mobile: 571px !default;
+$mobilex: 376px !default;
\ No newline at end of file
diff --git a/src/scss/base/_fonts.scss b/src/scss/base/_fonts.scss
new file mode 100644
index 000000000..e01998888
--- /dev/null
+++ b/src/scss/base/_fonts.scss
@@ -0,0 +1,17 @@
+////////////////////////////////////////////////////////////
+//fonts
+////////////////////////////////////////////////////////////
+/*Montserrat-Bold*/
+@font-face{
+	font-family: 'Montserrat-Bold';
+	src: url('../fonts/montserrat.bold.otf') format('truetype');
+	font-weight: 700;
+	
+}
+/*Montserrat-regular*/
+@font-face{
+	font-family: 'Montserrat-Regular';
+	src: url('../fonts/montserrat.regular (1).otf') format('truetype');
+	font-weight: 400;
+	
+}
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 000000000..6e957dcfd
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,13 @@
+//abstracts
+@import 'abstracts/variables';
+
+//base
+@import 'base/fonts';
+
+//pages
+    //home
+    @import 'pages/home/TodoCounter';
+    @import 'pages/home/CreateTodoButton';
+    @import 'pages/home/TodosLoading.scss';
+    @import 'pages/home/modal.scss';
+    @import 'pages/home/TodoForm.scss';
\ No newline at end of file
diff --git a/src/scss/pages/home/_CreateTodoButton.scss b/src/scss/pages/home/_CreateTodoButton.scss
new file mode 100644
index 000000000..b5b806471
--- /dev/null
+++ b/src/scss/pages/home/_CreateTodoButton.scss
@@ -0,0 +1,24 @@
+.CreateTodoButton{
+    background-color: #61DAFA;
+    box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
+    border:none;
+    border-radius: 50%;
+    cursor:pointer;
+    font-size: 50px;
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    font-weight: bold;
+    color:#fafafa;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    height: 64px;
+    width: 64px;
+    z-index: 1;
+    transform: rotate(0);
+    transition: .3s ease;
+}
+.CreateTodoButton:hover{
+    transform: rotate(224deg);
+}
\ No newline at end of file
diff --git a/src/scss/pages/home/_TodoCounter.scss b/src/scss/pages/home/_TodoCounter.scss
new file mode 100644
index 000000000..1d31b506f
--- /dev/null
+++ b/src/scss/pages/home/_TodoCounter.scss
@@ -0,0 +1,87 @@
+*{
+    font-family: montserrat;
+}
+body{
+    background-color: #F2F4F5;
+    width: 375px;
+    margin: 0 auto;
+}
+.TodoCounter {
+    font-size: 24px;
+    text-align: center;
+    margin: 0;
+    padding: 48px;
+    font-family: montserrat;
+    font-weight: 300;
+    color:$black;
+    span{
+        font-family: montserrat;
+        font-weight: bold;
+    }
+}
+.TodoSearch{
+    width: 279px;
+    height: 64px;
+    border-radius: 2px;
+    border: 2px solid #1e1e1f;
+    margin: 0 auto;
+    display: block;
+    font-size: 24px;
+    text-align: center;
+    font-family: Montserrat;
+    &::placeholder{
+        color: #a5a5a5;
+        font-weight: 400;
+        font-family: "Montserrat";
+    }
+    &:focus{
+        outline-color: #61dafa;
+    }
+}
+ul{
+    width: 327px;
+    margin: 0 auto;
+    margin-top: 40px;
+    padding-inline-start: 0px;
+    .TodoItem{
+        width: 307px;
+        height: 100px;
+        margin-top: 20px;
+        background-color: #FAFAFA;
+        border-radius: 2px;
+        box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
+        display: flex;
+        justify-content: space-between;
+        padding-left: 20px;
+        align-items: center;
+        .TodoItem-p{
+            font-size: 18px;
+            color: #1e1e1f;
+            font-family: montserrat;
+            &--complete{
+                text-decoration: line-through;
+            }
+        }
+        .Icon{
+            cursor:pointer;
+            display:flex;
+            justify-content: center;
+            align-items: center;
+            height: 48px;
+            width: 48px;
+            font-size: 24px;
+            font-weight: bold;
+            &-delete{
+                position: relative;
+                top: -50px;
+                right: 12px;
+                &:hover{
+                    color:red;
+                }
+            }
+            &-check--active{
+                color: #4caf50;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/scss/pages/home/_TodoForm.scss b/src/scss/pages/home/_TodoForm.scss
new file mode 100644
index 000000000..d66ece257
--- /dev/null
+++ b/src/scss/pages/home/_TodoForm.scss
@@ -0,0 +1,63 @@
+form{
+    width: 90%;
+    max-width: 300px;
+    background-color: #fff;
+    padding: 33px 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+   label{
+    text-align: center;
+    font-weight: bold;
+    font-size: 20px;
+    color: #1e1e1f;
+    margin-bottom: 26px;
+   }
+   textarea{
+    background-color: #f9fbfc;
+    border: 2px solid #202329;
+    border-radius: 2px;
+    box-shadow: 0px 5px 50px rgba(32,35,42,0.25);
+    color: #1e1e1f;
+    font-size: 20px;
+    text-align: center;
+    padding: 12px;
+    height: 96px;
+    width: calc(100% - 25px);
+    &::placeholder{
+        color:#a5a5a5;
+        font-family: 'Montserrat';
+        font-weight: 400;
+    }
+    &:focus{
+        outline-color: #61dafa;
+    }
+   }
+   .TodoForm-buttonContainer{
+    margin-top: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+   } 
+   .TodoForm-button{
+    cursor: pointer;
+    display: inline-block;
+    font-size: 20px;
+    color: #202329;
+    font-weight: 400;
+    width: 120px;
+    height: 48px;
+    border-radius: 2px;
+    border: none;
+    font-family: 'Montserrat';
+    &--add{
+        background: #61dafa;
+        box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
+    }
+    &--cancel{
+        background: transparent;
+    }
+   }
+}
\ No newline at end of file
diff --git a/src/scss/pages/home/_TodosLoading.scss b/src/scss/pages/home/_TodosLoading.scss
new file mode 100644
index 000000000..2a6affcb2
--- /dev/null
+++ b/src/scss/pages/home/_TodosLoading.scss
@@ -0,0 +1,67 @@
+
+ul{
+    width: 327px;
+    margin: 0 auto;
+    margin-top: 40px;
+    padding-inline-start: 0px;
+    .LoadingTodo-container{
+        width: 307px;
+        height: 100px;
+        margin-top: 20px;
+        border-radius: 2px;
+        box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
+        display: flex;
+        justify-content: space-between;
+        padding-left: 20px;
+        align-items: center;
+        background: linear-gradient(90deg, rgba(250,250,250,1), rgb(200, 199, 199));
+    background-size: 400% 400%;
+    animation: loadingAnimation 3s ease-in-out infinite;
+        .LoadingTodo-text{
+        font-size: 18px;
+        color: #1e1e1f;
+        font-family: montserrat;
+        }
+        .LoadingTodo-deleteIcon{
+            position: relative;
+            top: -45px;
+            right: 0;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50px;
+            height: 48px;
+            width: 48px;
+            background: linear-gradient(90deg, rgba(250,250,250,1), rgb(200, 199, 199));
+    background-size: 400% 400%;
+    animation: loadingAnimation 3s ease-in-out infinite;
+        }
+        .LoadingTodo-completeIcon{
+            position: relative;
+            left: 12px;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50px;
+            height: 48px;
+            width: 48px;
+            background: linear-gradient(90deg, rgba(250,250,250,1), rgb(200, 199, 199));
+    background-size: 400% 400%;
+    animation: loadingAnimation 3s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes loadingAnimation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
\ No newline at end of file
diff --git a/src/scss/pages/home/_modal.scss b/src/scss/pages/home/_modal.scss
new file mode 100644
index 000000000..8a64bdc35
--- /dev/null
+++ b/src/scss/pages/home/_modal.scss
@@ -0,0 +1,12 @@
+.ModalBackground{
+    background-color: rgba(32,35,41,.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
\ No newline at end of file