diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3b305db91..2ff85f1b2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 610d3e076..292bf7576 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "eplay",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.5.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -15,13 +16,21 @@
         "@types/node": "^16.18.23",
         "@types/react": "^18.0.31",
         "@types/react-dom": "^18.0.11",
+        "formik": "^2.4.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^9.2.0",
+        "react-router-dom": "^6.26.2",
+        "react-router-hash-link": "^2.4.3",
         "react-scripts": "5.0.1",
+        "react-spinners": "^0.15.0",
+        "styled-components": "^6.1.13",
         "typescript": "^4.9.5",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "yup": "^1.6.1"
       },
       "devDependencies": {
+        "@types/react-router-hash-link": "^2.4.9",
         "@types/styled-components": "^5.1.26",
         "@typescript-eslint/eslint-plugin": "^5.53.0",
         "@typescript-eslint/parser": "^5.53.0",
@@ -2148,6 +2157,24 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3112,6 +3139,46 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz",
+      "integrity": "sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3859,11 +3926,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
       "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*",
         "hoist-non-react-statics": "^3.3.0"
@@ -3963,12 +4035,11 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "18.0.31",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.31.tgz",
-      "integrity": "sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==",
+      "version": "18.3.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.17.tgz",
+      "integrity": "sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw==",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -3980,6 +4051,38 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/@types/react-router-hash-link": {
+      "version": "2.4.9",
+      "resolved": "https://registry.npmjs.org/@types/react-router-hash-link/-/react-router-hash-link-2.4.9.tgz",
+      "integrity": "sha512-zl/VMj+lfJZhvjOAQXIlBVPNKSK+/fRG8AUHhlP9++LhlA2ziLeTmbRxIMJI3PCiCTS+W/FosEoDRoNOGH0OzA==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router-dom": "^5.3.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3993,11 +4096,6 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-    },
     "node_modules/@types/semver": {
       "version": "7.3.13",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -4044,6 +4142,11 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
@@ -4057,6 +4160,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
       "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.4",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -5403,6 +5511,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5838,6 +5954,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
@@ -6019,6 +6143,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6206,9 +6340,9 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
     "node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -8108,6 +8242,38 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8512,7 +8678,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dev": true,
       "dependencies": {
         "react-is": "^16.7.0"
       }
@@ -8520,8 +8685,7 @@
     "node_modules/hoist-non-react-statics/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/hoopy": {
       "version": "0.1.4",
@@ -11623,6 +11787,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -11959,9 +12128,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -12608,9 +12777,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -12619,12 +12788,16 @@
         {
           "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.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -13893,6 +14066,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -14202,11 +14380,38 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14215,6 +14420,48 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-router-hash-link": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz",
+      "integrity": "sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=15",
+        "react-router-dom": ">=4"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14287,6 +14534,15 @@
         }
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
+      "integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14342,6 +14598,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14468,6 +14737,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -14993,6 +15267,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15075,9 +15354,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15395,6 +15674,33 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -15410,6 +15716,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+    },
     "node_modules/sucrase": {
       "version": "3.31.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.31.0.tgz",
@@ -15807,6 +16118,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -15839,6 +16160,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@@ -15913,9 +16239,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -16144,6 +16470,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17153,6 +17487,28 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
+      "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 8a7c7fe75..ab444c735 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.5.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,11 +11,18 @@
     "@types/node": "^16.18.23",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
+    "formik": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^6.26.2",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.15.0",
+    "styled-components": "^6.1.13",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.6.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -41,6 +49,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-hash-link": "^2.4.9",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
diff --git a/public/index.html b/public/index.html
index aa069f27c..e0fab60c1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,6 +25,9 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e0534..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: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index d53c68d8a..ea9264129 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,29 @@
-import React from 'react'
-import logo from './logo.svg'
-import './App.css'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+
+import { Header } from './components/Header'
+import { GlobalCss } from './styles'
+
+import { Rotas } from './routes'
+import { Footer } from './components/Footer'
+import { store } from './store'
+import { Cart } from './components/Cart'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <div className="App">
+        <BrowserRouter>
+          <GlobalCss />
+          <div className="container">
+            <Header />
+          </div>
+          <Rotas />
+          <Footer />
+          <Cart />
+        </BrowserRouter>
+      </div>
+    </Provider>
   )
 }
 
diff --git "a/src/assets/images/1 - Mistborn Primeira Era - O imp\303\251rio final.pdf" "b/src/assets/images/1 - Mistborn Primeira Era - O imp\303\251rio final.pdf"
new file mode 100644
index 000000000..b4d4f4604
Binary files /dev/null and "b/src/assets/images/1 - Mistborn Primeira Era - O imp\303\251rio final.pdf" differ
diff --git a/src/assets/images/banner-homem-aranha.png b/src/assets/images/banner-homem-aranha.png
new file mode 100644
index 000000000..b1efdf7da
Binary files /dev/null and b/src/assets/images/banner-homem-aranha.png differ
diff --git a/src/assets/images/barcode.png b/src/assets/images/barcode.png
new file mode 100644
index 000000000..43a383eba
Binary files /dev/null and b/src/assets/images/barcode.png differ
diff --git a/src/assets/images/carrinho.svg b/src/assets/images/carrinho.svg
new file mode 100644
index 000000000..096e47b83
--- /dev/null
+++ b/src/assets/images/carrinho.svg
@@ -0,0 +1,9 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="23" height="23" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_65_21" transform="scale(0.00195312)"/>
+</pattern>
+<image id="image0_65_21" width="512" height="512" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/assets/images/credit-card.png b/src/assets/images/credit-card.png
new file mode 100644
index 000000000..8c97f04c2
Binary files /dev/null and b/src/assets/images/credit-card.png differ
diff --git a/src/assets/images/diablo.png b/src/assets/images/diablo.png
new file mode 100644
index 000000000..1a80c0363
Binary files /dev/null and b/src/assets/images/diablo.png differ
diff --git a/src/assets/images/fechar.png b/src/assets/images/fechar.png
new file mode 100644
index 000000000..ccddafbb9
Binary files /dev/null and b/src/assets/images/fechar.png differ
diff --git a/src/assets/images/fifa.png b/src/assets/images/fifa.png
new file mode 100644
index 000000000..74022352c
Binary files /dev/null and b/src/assets/images/fifa.png differ
diff --git a/src/assets/images/fundo_hogwarts.png b/src/assets/images/fundo_hogwarts.png
new file mode 100644
index 000000000..50fd6eb7a
Binary files /dev/null and b/src/assets/images/fundo_hogwarts.png differ
diff --git a/src/assets/images/image_hogwarts.png b/src/assets/images/image_hogwarts.png
new file mode 100644
index 000000000..e0b11bd88
Binary files /dev/null and b/src/assets/images/image_hogwarts.png differ
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 000000000..7962d3ba9
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,10 @@
+<svg width="78" height="32" viewBox="0 0 78 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H77.1213V28.7866H0V0Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.9791 2.14226H2.14226V26.6444H74.9791V2.14226ZM0 0V28.7866H77.1213V0H0Z" fill="white"/>
+<path d="M6.0251 19.2803V8.03347H17.272V9.64017H9.23849V12.8536H15.6653V14.4603H9.23849V17.6736H17.272V19.2803H6.0251Z" fill="white"/>
+<path d="M18.8787 19.2803V8.03347H28.5188V9.64017H30.1255V14.4603H28.5188V16.0669H22.0921V19.2803H18.8787ZM22.0921 14.4603H26.9121V9.64017H22.0921V14.4603Z" fill="white"/>
+<path d="M33.3389 19.2803V8.03347H36.5523V17.6736H42.9791V19.2803H33.3389Z" fill="white"/>
+<path d="M44.5858 19.2803V11.2469H46.1925V9.64017H47.7992V8.03347H52.6192V9.64017H54.2259V11.2469H55.8326V19.2803H52.6192V16.0669H47.7992V19.2803H44.5858ZM47.7992 14.4603H52.6192V11.2469H51.0126V9.64017H49.4059V11.2469H47.7992V14.4603Z" fill="white"/>
+<path d="M62.2594 19.2803V14.4603H60.6527V12.8536H59.046V8.03347H62.2594V12.8536H65.4728V8.03347H68.6862V12.8536H67.0795V14.4603H65.4728V19.2803H62.2594Z" fill="white"/>
+<path d="M0 28.7866H77.1213V32H0V28.7866Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/play.png b/src/assets/images/play.png
new file mode 100644
index 000000000..e911712c2
Binary files /dev/null and b/src/assets/images/play.png differ
diff --git a/src/assets/images/resident.png b/src/assets/images/resident.png
new file mode 100644
index 000000000..d22fa6aff
Binary files /dev/null and b/src/assets/images/resident.png differ
diff --git a/src/assets/images/star_wars.png b/src/assets/images/star_wars.png
new file mode 100644
index 000000000..2578845cc
Binary files /dev/null and b/src/assets/images/star_wars.png differ
diff --git a/src/assets/images/streetFighter.png b/src/assets/images/streetFighter.png
new file mode 100644
index 000000000..61338d72c
Binary files /dev/null and b/src/assets/images/streetFighter.png differ
diff --git a/src/assets/images/zelda.png b/src/assets/images/zelda.png
new file mode 100644
index 000000000..c962705a0
Binary files /dev/null and b/src/assets/images/zelda.png differ
diff --git a/src/assets/images/zoom.png b/src/assets/images/zoom.png
new file mode 100644
index 000000000..9de1f92e5
Binary files /dev/null and b/src/assets/images/zoom.png differ
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
new file mode 100644
index 000000000..ccde2e851
--- /dev/null
+++ b/src/components/Banner/index.tsx
@@ -0,0 +1,39 @@
+import { Tags } from '../Tags'
+import { Button } from '../Button'
+import { parseToBrl } from '../../utils'
+import { Loader } from '../Loader'
+
+import { useGetFeaturedGameQuery } from '../../services/api'
+
+import * as S from './style'
+
+export const Banner = () => {
+  const { data: game } = useGetFeaturedGameQuery()
+
+  if (!game) {
+    return <Loader />
+  }
+
+  return (
+    <S.Image style={{ backgroundImage: `url(${game.media.cover})` }}>
+      <div className="container">
+        <Tags size="big">Destaque do dia</Tags>
+        <div>
+          <S.Title>{game.name}</S.Title>
+          <S.Price>
+            De <span>{parseToBrl(game?.prices.old)}</span>
+            <br />
+            por apenas {parseToBrl(game?.prices.discount)}
+          </S.Price>
+        </div>
+        <Button
+          type="link"
+          to={`/product/${game.id}`}
+          title="clique para aproveitar a oferta"
+        >
+          Aproveitar
+        </Button>
+      </div>
+    </S.Image>
+  )
+}
diff --git a/src/components/Banner/style.ts b/src/components/Banner/style.ts
new file mode 100644
index 000000000..90f025433
--- /dev/null
+++ b/src/components/Banner/style.ts
@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+import { TagsContainer } from '../Tags/style'
+
+export const Image = styled.div`
+  width: 100%;
+  height: 560px;
+  padding: 32px 0 56px 0;
+  display: block;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+
+  .container {
+    position: relative;
+    padding-top: 340px;
+    max-height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    z-index: 1;
+  }
+
+  ${TagsContainer} {
+    position: absolute;
+    top: 0;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    content: '';
+  }
+`
+
+export const Title = styled.h2`
+  font-size: 32px;
+  max-width: 450px;
+`
+
+export const Price = styled.p`
+  font-size: 24px;
+  margin-top: 24px;
+  span {
+    text-decoration: line-through;
+  }
+`
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 000000000..343de2ec6
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,38 @@
+import { ButtonContainer, ButtonLink } from './style'
+
+export type Props = {
+  type: 'button' | 'link' | 'submit'
+  title: string
+  to?: string
+  onClick?: () => void
+  children: string
+  variant?: 'primary' | 'secundary'
+}
+
+export const Button = ({
+  type,
+  title,
+  to,
+  onClick,
+  children,
+  variant = 'primary'
+}: Props) => {
+  if (type === 'button' || type === 'submit') {
+    return (
+      <ButtonContainer
+        variant={variant}
+        type={type}
+        title={title}
+        onClick={onClick}
+      >
+        {children}
+      </ButtonContainer>
+    )
+  }
+
+  return (
+    <ButtonLink to={to as string} title={title}>
+      {children}
+    </ButtonLink>
+  )
+}
diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts
new file mode 100644
index 000000000..d4956bf9f
--- /dev/null
+++ b/src/components/Button/style.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+import { Link } from 'react-router-dom'
+import { Props } from '.'
+
+export const ButtonContainer = styled.button<Props>`
+  border: 2px solid
+    ${(props) => (props.variant === 'primary' ? colors.green : colors.white)};
+  color: ${colors.white};
+  border-radius: 8px;
+  background: ${(props) =>
+    props.variant === 'primary' ? colors.green : 'transparent'};
+  padding: 8px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+`
+
+export const ButtonLink = styled(Link)`
+  border: 2px solid ${colors.white};
+  color: ${colors.white};
+  border-radius: 8px;
+  background: transparent;
+  padding: 8px 16px;
+  font-size: 16px;
+  font-weight: bold;
+`
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
new file mode 100644
index 000000000..ae75880d6
--- /dev/null
+++ b/src/components/Card/index.tsx
@@ -0,0 +1,15 @@
+import { Container } from './style'
+
+type Props = {
+  children: JSX.Element
+  title: string
+}
+
+export const Card = ({ children, title }: Props) => {
+  return (
+    <Container>
+      <h2>{title}</h2>
+      {children}
+    </Container>
+  )
+}
diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts
new file mode 100644
index 000000000..2622c301c
--- /dev/null
+++ b/src/components/Card/style.ts
@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+
+export const Container = styled.div`
+  border-radius: 8px;
+  background-color: ${colors.gray};
+  padding: 24px;
+  margin-bottom: 40px;
+
+  h2,
+  h3 {
+    font-size: 18px;
+    font-weight: 700;
+    color: ${colors.white};
+    margin-bottom: 24px;
+  }
+
+  h3 {
+    margin-top: 24px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .margin-top {
+    margin-top: 16px;
+  }
+`
diff --git a/src/components/Cart/index.tsx b/src/components/Cart/index.tsx
new file mode 100644
index 000000000..5acefb6cb
--- /dev/null
+++ b/src/components/Cart/index.tsx
@@ -0,0 +1,63 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+
+import { Tags } from '../Tags'
+import { Button } from '../Button'
+import { getTotalPrice, parseToBrl } from '../../utils'
+
+import { RootReducer } from '../../store'
+import { close, remove } from '../../store/reducers/cart'
+
+import * as S from './style'
+
+export const Cart = () => {
+  const { isOpen, items } = useSelector((state: RootReducer) => state.cart)
+  const navigate = useNavigate()
+
+  const dispatch = useDispatch()
+
+  const closeCart = () => {
+    dispatch(close())
+  }
+
+  const removeItem = (id: number) => {
+    dispatch(remove(id))
+  }
+
+  const goToCheckout = () => {
+    navigate('/checkout')
+    closeCart()
+  }
+
+  return (
+    <S.CartContainer className={isOpen ? 'isOpen' : ''}>
+      <S.Overlay onClick={closeCart} />
+      <S.Sidebar>
+        <ul>
+          {items.map((item) => (
+            <S.CartItem key={item.id}>
+              <img src={item.media.thumbnail} />
+              <div>
+                <h3>{item.name}</h3>
+                <Tags>{item.details.category}</Tags>
+                <Tags>{item.details.system}</Tags>
+                <p>{parseToBrl(item.prices.current)}</p>
+              </div>
+              <button onClick={() => removeItem(item.id)} type="button" />
+            </S.CartItem>
+          ))}
+        </ul>
+        <div>
+          <S.Quantity>{items.length} jogo(s) no carrinho</S.Quantity>
+          <S.Prices>
+            Total de {parseToBrl(getTotalPrice(items))}
+            <span>em até 6x sem juros</span>
+          </S.Prices>
+        </div>
+        <Button type="button" title="Continuar a compra" onClick={goToCheckout}>
+          Continuar a compra
+        </Button>
+      </S.Sidebar>
+    </S.CartContainer>
+  )
+}
diff --git a/src/components/Cart/style.ts b/src/components/Cart/style.ts
new file mode 100644
index 000000000..40e0fb16b
--- /dev/null
+++ b/src/components/Cart/style.ts
@@ -0,0 +1,87 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+import { ButtonContainer } from '../Button/style'
+import { TagsContainer } from '../Tags/style'
+
+import fechar from '../../assets/images/fechar.png'
+
+export const Overlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.7;
+`
+
+export const CartContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: none;
+  justify-content: end;
+
+  &.isOpen {
+    display: flex;
+  }
+`
+
+export const Sidebar = styled.aside`
+  padding: 40px 16px;
+  background-color: ${colors.gray};
+  height: 100%;
+  width: 360px;
+  z-index: 1;
+
+  ${ButtonContainer} {
+    width: 100%;
+    margin-top: 24px;
+  }
+`
+
+export const CartItem = styled.li`
+  display: flex;
+  border-bottom: 1px solid ${colors.lightgray};
+  padding: 8px 0;
+  position: relative;
+
+  img {
+    height: 80px;
+    width: 80px;
+    margin-right: 23px;
+    object-fit: cover;
+  }
+
+  ${TagsContainer} {
+    margin: 8px 8px 16px 0;
+  }
+
+  button {
+    background-image: url(${fechar});
+    width: 16px;
+    height: 16px;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    right: 0;
+  }
+`
+export const Quantity = styled.p`
+  margin: 32px 0 16px 0;
+  font-size: 16px;
+`
+
+export const Prices = styled.p`
+  font-size: 14px;
+  span {
+    display: block;
+    font-size: 12px;
+    color: ${colors.lightgray};
+  }
+`
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 000000000..7c638622e
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,77 @@
+import * as S from './style'
+
+const current = new Date().getFullYear()
+
+export const Footer = () => (
+  <S.ContainerFooter>
+    <div className="container">
+      <S.SectionFooter>
+        <S.Title>Categorias</S.Title>
+        <S.Links>
+          <li>
+            <S.Link
+              title="clique aqui para acessar as jogos de rpg"
+              to="/categories#rpg"
+            >
+              RPG
+            </S.Link>
+          </li>
+          <li>
+            <S.Link
+              title="clique aqui para acessar as jogos de ação"
+              to="/categories#action"
+            >
+              Ação
+            </S.Link>
+          </li>
+          <li>
+            <S.Link
+              title="clique aqui para acessar as jogos de esportes"
+              to="/categories#sports"
+            >
+              Esportes
+            </S.Link>
+          </li>
+          <li>
+            <S.Link
+              title="clique aqui para acessar as jogos de simulação"
+              to="/categories#simulation"
+            >
+              Simulação
+            </S.Link>
+          </li>
+          <li>
+            <S.Link
+              title="clique aqui para acessar as jogos de luta"
+              to="/categories#fight"
+            >
+              Luta
+            </S.Link>
+          </li>
+        </S.Links>
+      </S.SectionFooter>
+      <S.SectionFooter>
+        <S.Title>Acesso rápido</S.Title>
+        <S.Links>
+          <li>
+            <S.Link
+              title="clique aqui para acessar a seção de promoções"
+              to="#on-sale"
+            >
+              Promoções
+            </S.Link>
+          </li>
+          <li>
+            <S.Link
+              title="clique aqui para acessar a seção de em breve"
+              to="#coming-soon"
+            >
+              Em breve
+            </S.Link>
+          </li>
+        </S.Links>
+      </S.SectionFooter>
+      <p>{current} - &copy; E-PLAY Todos os direitos reservados</p>
+    </div>
+  </S.ContainerFooter>
+)
diff --git a/src/components/Footer/style.ts b/src/components/Footer/style.ts
new file mode 100644
index 000000000..4d704fa0e
--- /dev/null
+++ b/src/components/Footer/style.ts
@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+import { HashLink } from 'react-router-hash-link'
+
+export const ContainerFooter = styled.footer`
+  background-color: ${colors.gray};
+  font-size: 14px;
+  padding-bottom: 32px;
+  margin-top: 40px;
+`
+
+export const SectionFooter = styled.section`
+  margin-bottom: 64px;
+`
+
+export const Title = styled.h4`
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 16px;
+`
+
+export const Links = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+export const Link = styled(HashLink)`
+  color: ${colors.lightgray};
+  margin-right: 8px;
+`
diff --git a/src/components/Gallery/index.tsx b/src/components/Gallery/index.tsx
new file mode 100644
index 000000000..a11215493
--- /dev/null
+++ b/src/components/Gallery/index.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react'
+
+import { Section } from '../Section'
+
+import { GalleryItem } from '../../pages/Home'
+
+import zoom from '../../assets/images/zoom.png'
+import play from '../../assets/images/play.png'
+import closeIcon from '../../assets/images/fechar.png'
+
+import * as S from './style'
+
+type Props = {
+  defaultCover: string
+  nome: string
+  items: GalleryItem[]
+}
+
+interface ModalState extends GalleryItem {
+  isVisible: boolean
+}
+
+export const Gallery = ({ defaultCover, nome, items }: Props) => {
+  const [modal, setModal] = useState<ModalState>({
+    isVisible: false,
+    type: 'image',
+    url: ''
+  })
+
+  const getMediaCover = (item: GalleryItem) => {
+    if (item.type === 'image') return item.url
+    return defaultCover
+  }
+  const getMediaIcon = (item: GalleryItem) => {
+    if (item.type === 'image') return zoom
+    return play
+  }
+
+  const closeModal = () => {
+    setModal({
+      isVisible: false,
+      type: 'image',
+      url: ''
+    })
+  }
+
+  return (
+    <>
+      <Section background="black" title="Galeria">
+        <S.Items>
+          {items.map((media, index) => (
+            <S.Item
+              key={media.url}
+              onClick={() => {
+                setModal({
+                  isVisible: true,
+                  type: media.type,
+                  url: media.url
+                })
+              }}
+            >
+              <img
+                src={getMediaCover(media)}
+                alt={`Midia ${index + 1} de nome do jogo`}
+              />
+              <S.Action>
+                <img src={getMediaIcon(media)} alt={nome} />
+              </S.Action>
+            </S.Item>
+          ))}
+        </S.Items>
+      </Section>
+      <S.Modal
+        className={modal.isVisible ? 'is-visible' : ''}
+        onClick={() => closeModal()}
+      >
+        <S.ModalContent className="container">
+          <header>
+            <h4>{nome}</h4>
+            <img src={closeIcon} alt="Botao de fechar" onClick={closeModal} />
+          </header>
+          {modal.type === 'image' ? (
+            <img src={modal.url} alt="" />
+          ) : (
+            <iframe src={modal.url} />
+          )}
+        </S.ModalContent>
+      </S.Modal>
+    </>
+  )
+}
diff --git a/src/components/Gallery/style.ts b/src/components/Gallery/style.ts
new file mode 100644
index 000000000..b363938ac
--- /dev/null
+++ b/src/components/Gallery/style.ts
@@ -0,0 +1,103 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+
+export const Items = styled.ul`
+  @media only screen and (min-width: 600px) {
+    display: flex;
+  }
+`
+
+export const Action = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.73);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 0.5s ease;
+  cursor: zoom-in;
+`
+
+export const Item = styled.li`
+  position: relative;
+  border: 2px solid ${colors.white};
+  border-radius: 8px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  width: 100%;
+  height: 300px;
+
+  &:hover {
+    ${Action} {
+      opacity: 1;
+      transition: opacity 0.5s ease;
+    }
+  }
+
+  @media only screen and (min-width: 600px) {
+    width: 150px;
+    height: 150px;
+    margin-right: 16px;
+  }
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+export const Modal = styled.div`
+  position: fixed;
+  top: 0;
+  height: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.73);
+  display: none;
+  align-items: center;
+  justify-content: center;
+
+  &.is-visible {
+    display: flex;
+  }
+`
+
+export const ModalContent = styled.div`
+  max-width: 960px;
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    font-size: 18px;
+    font-weight: 700;
+
+    > img {
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  > img {
+    width: 100%;
+  }
+
+  img,
+  iframe {
+    display: block;
+    max-width: 100%;
+  }
+
+  iframe {
+    width: 100%;
+    height: 450px;
+  }
+`
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 000000000..fc01048b7
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,102 @@
+import { Link } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { useState } from 'react'
+
+import { RootReducer } from '../../store'
+import { open } from '../../store/reducers/cart'
+
+import logo from '../../assets/images/logo.svg'
+import cartIcon from '../../assets/images/carrinho.svg'
+
+import * as S from './style'
+import { HashLink } from 'react-router-hash-link'
+
+export const Header = () => {
+  const dispatch = useDispatch()
+  const { items } = useSelector((state: RootReducer) => state.cart)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const openCart = () => {
+    dispatch(open())
+  }
+
+  return (
+    <S.HeaderBar>
+      <S.HeaderRow>
+        <div>
+          <S.Hamburguer onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            <span />
+            <span />
+            <span />
+          </S.Hamburguer>
+          <Link to="/">
+            <img src={logo} alt="EPLAY" />
+          </Link>
+          <nav>
+            <S.Links>
+              <S.LinkItem>
+                <Link
+                  title="Clique aqui para acessar a página de categorias"
+                  to="/categories"
+                >
+                  Categorias
+                </Link>
+              </S.LinkItem>
+              <S.LinkItem>
+                <HashLink
+                  title="Clique aqui para acessar a página de em breve"
+                  to="/#coming-soon"
+                >
+                  Em breve
+                </HashLink>
+              </S.LinkItem>
+              <S.LinkItem>
+                <HashLink
+                  title="Clique aqui para acessar a página de promoções"
+                  to="/#on-sale"
+                >
+                  Promoções
+                </HashLink>
+              </S.LinkItem>
+            </S.Links>
+          </nav>
+        </div>
+        <S.CartButton onClick={openCart}>
+          {items.length} <span> - produto(s)</span>
+          <img src={cartIcon} alt="Carrinho de compras" />
+        </S.CartButton>
+      </S.HeaderRow>
+      <S.NavMobile className={isMenuOpen ? 'is-open' : ''}>
+        <S.Links>
+          <S.LinkItem>
+            <Link
+              to="/categories"
+              title="Clique aqui para acessar a página de categorias"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Categorias
+            </Link>
+          </S.LinkItem>
+          <S.LinkItem>
+            <HashLink
+              title="Clique aqui para acessar a página de em breve"
+              to="/#coming-soon"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Em breve
+            </HashLink>
+          </S.LinkItem>
+          <S.LinkItem>
+            <HashLink
+              title="Clique aqui para acessar a página de promoções"
+              to="/#on-sale"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Promoções
+            </HashLink>
+          </S.LinkItem>
+        </S.Links>
+      </S.NavMobile>
+    </S.HeaderBar>
+  )
+}
diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
new file mode 100644
index 000000000..f97a876ed
--- /dev/null
+++ b/src/components/Header/style.ts
@@ -0,0 +1,96 @@
+import styled from 'styled-components'
+import { breakpoint, colors } from '../../styles'
+
+export const Links = styled.ul`
+  display: flex;
+  margin-left: 40px;
+
+  @media (max-width: ${breakpoint.tablet}) {
+    margin-left: 0;
+    display: block;
+  }
+`
+
+export const HeaderBar = styled.header`
+  background-color: ${colors.gray};
+  padding: 24px;
+  margin-bottom: 80px;
+  border-radius: 16px;
+  }
+`
+
+export const HeaderRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+    > div {
+    display: flex;
+    align-items: center;
+
+    @media (max-width: ${breakpoint.tablet}) {
+      flex: 1;
+      justify-content: space-between;
+
+      ${Links} {
+        display: none;
+      }
+    }
+`
+
+export const NavMobile = styled.nav`
+  display: none;
+
+  &.is-open {
+    display: block;
+  }
+`
+
+export const LinkItem = styled.li`
+  color: ${colors.white};
+  margin-left: 16px;
+
+  @media (max-width: ${breakpoint.tablet}) {
+    margin-right: 0;
+
+    a {
+      padding: 16px 0;
+      display: block;
+      text-align: center;
+    }
+  }
+`
+
+export const CartButton = styled.a`
+  display: flex;
+  cursor: pointer;
+
+  img {
+    margin-left: 16px;
+  }
+
+  @media (max-width: ${breakpoint.tablet}) {
+    span {
+      display: none;
+    }
+  }
+`
+
+export const Hamburguer = styled.div`
+  width: 32px;
+  display: fex;
+  flex-direction: column;
+  cursor: pointer;
+
+  span {
+    height: 2px;
+    display: block;
+    width: 100%;
+    background-color: ${colors.white};
+    margin-bottom: 4px;
+  }
+
+  @media (min-width: ${breakpoint.tablet}) {
+    display: none;
+  }
+`
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
new file mode 100644
index 000000000..bff690710
--- /dev/null
+++ b/src/components/Hero/index.tsx
@@ -0,0 +1,53 @@
+import { useDispatch } from 'react-redux'
+
+import { Button } from '../Button'
+import { Tags } from '../Tags'
+
+import { Game } from '../../pages/Home'
+import { add, open } from '../../store/reducers/cart'
+
+import * as S from './style'
+import { parseToBrl } from '../../utils'
+
+type Props = {
+  game: Game
+}
+
+export const Hero = ({ game }: Props) => {
+  const dispatch = useDispatch()
+
+  const addToCart = () => {
+    dispatch(add(game))
+    dispatch(open())
+  }
+
+  return (
+    <S.Banner style={{ backgroundImage: `url(${game.media.cover})` }}>
+      <div className="container">
+        <div>
+          <Tags>{game.details.system}</Tags>
+          <Tags>{game.details.category}</Tags>
+        </div>
+        <S.Infos>
+          <h2>{game.name}</h2>
+          <p>
+            {game.prices.discount && (
+              <span>De {parseToBrl(game?.prices.old)}</span>
+            )}
+            {game.prices.current && <>Por {parseToBrl(game?.prices.current)}</>}
+          </p>
+          {game.prices.current && (
+            <Button
+              type="button"
+              title="clique aqui para adiocar esse jogo ao carrinho"
+              variant="primary"
+              onClick={addToCart}
+            >
+              Adicionar ao carrinho
+            </Button>
+          )}
+        </S.Infos>
+      </div>
+    </S.Banner>
+  )
+}
diff --git a/src/components/Hero/style.ts b/src/components/Hero/style.ts
new file mode 100644
index 000000000..b3060e6fd
--- /dev/null
+++ b/src/components/Hero/style.ts
@@ -0,0 +1,59 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+import { TagsContainer } from '../Tags/style'
+
+export const Banner = styled.div`
+  position: relative;
+  display: block;
+  height: 480px;
+  width: 100%;
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+
+  &::after {
+    position: absolute;
+    background-color: #000;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    content: '';
+    opacity: 0.56;
+  }
+
+  .container {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+
+    ${TagsContainer} {
+      margin-right: 8px;
+    }
+  }
+`
+
+export const Infos = styled.div`
+  padding: 16px;
+  background-color: ${colors.black};
+  font-weight: 700;
+  max-width: 290px;
+
+  h2 {
+    font-size: 32px;
+  }
+
+  p {
+    font-size: 18px;
+    margin: 16px 0;
+
+    span {
+      display: block;
+      text-decoration: line-through;
+    }
+  }
+`
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
new file mode 100644
index 000000000..7506701a4
--- /dev/null
+++ b/src/components/Loader/index.tsx
@@ -0,0 +1,11 @@
+import { PacmanLoader } from 'react-spinners'
+
+import { colors } from '../../styles'
+
+import { Container } from './style'
+
+export const Loader = () => (
+  <Container>
+    <PacmanLoader color={colors.white} />
+  </Container>
+)
diff --git a/src/components/Loader/style.ts b/src/components/Loader/style.ts
new file mode 100644
index 000000000..1ff84e4d6
--- /dev/null
+++ b/src/components/Loader/style.ts
@@ -0,0 +1,8 @@
+import { styled } from 'styled-components'
+
+export const Container = styled.div`
+  min-height: 360px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
diff --git a/src/components/Product/index.tsx b/src/components/Product/index.tsx
new file mode 100644
index 000000000..e56061a79
--- /dev/null
+++ b/src/components/Product/index.tsx
@@ -0,0 +1,47 @@
+import { Tags } from '../Tags'
+
+import * as S from './style'
+
+export type Props = {
+  title: string
+  category: string
+  system: string
+  description: string
+  infos: string[]
+  image: string
+  id: number
+}
+
+export const Product = ({
+  title,
+  category,
+  system,
+  description,
+  infos,
+  image,
+  id
+}: Props) => {
+  const getDescription = (text: string) => {
+    if (text.length > 95) {
+      return text.slice(0, 92) + '...'
+    }
+    return text
+  }
+  return (
+    <S.Card
+      title={`clique aqui para ver mais detalhes do jogo: ${title}`}
+      to={`/product/${id}`}
+    >
+      <img src={image} />
+      <S.Infos>
+        {infos.map((info) => (
+          <Tags key={info}>{info}</Tags>
+        ))}
+      </S.Infos>
+      <S.Title>{title}</S.Title>
+      <Tags>{category}</Tags>
+      <Tags>{system}</Tags>
+      <S.Description>{getDescription(description)}</S.Description>
+    </S.Card>
+  )
+}
diff --git a/src/components/Product/style.ts b/src/components/Product/style.ts
new file mode 100644
index 000000000..76320536e
--- /dev/null
+++ b/src/components/Product/style.ts
@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+import { colors } from '../../styles'
+import { TagsContainer } from '../Tags/style'
+
+export const Card = styled(Link)`
+  position: relative;
+  display: block;
+  height: 100%;
+  margin-bottom: 8px;
+  padding: 8px 8px 16px 8px;
+  border-radius: 8px;
+  background-color: ${colors.gray};
+  color: ${colors.white};
+  text-decoration: none;
+
+  img {
+    display: bolock;
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+  }
+
+  ${TagsContainer} {
+    margin-right: 8px;
+  }
+`
+
+export const Title = styled.h3`
+  font-size: 16px;
+  font-weiight: bold;
+  margin: 16px 0 8px 0;
+`
+
+export const Description = styled.p`
+  margin-top: 16px;
+  font-size: 14px;
+`
+
+export const Infos = styled.div`
+  top: 16px;
+  right: 16px;
+  position: absolute;
+`
diff --git a/src/components/ProductList/index.tsx b/src/components/ProductList/index.tsx
new file mode 100644
index 000000000..1a1837017
--- /dev/null
+++ b/src/components/ProductList/index.tsx
@@ -0,0 +1,68 @@
+import { Game } from '../../pages/Home'
+import { parseToBrl } from '../../utils'
+import { Loader } from '../Loader'
+import { Product } from '../Product'
+
+import * as S from './styles'
+
+export type Props = {
+  title: string
+  background: 'gray' | 'black'
+  games?: Game[]
+  id?: string
+  isLoading: boolean
+}
+
+export const ProductList = ({
+  title,
+  background,
+  games,
+  id,
+  isLoading
+}: Props) => {
+  const getGameTags = (game: Game) => {
+    const tags = []
+
+    if (game.relase_date) {
+      tags.push(game.relase_date)
+    }
+
+    if (game.prices.discount) {
+      tags.push(`${game.prices.discount}%`)
+    }
+
+    if (game.prices.current) {
+      tags.push(parseToBrl(game.prices.current))
+    }
+
+    return tags
+  }
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  return (
+    <S.Container id={id} background={background}>
+      <div className="container">
+        <S.Title>{title}</S.Title>
+        <S.List>
+          {games &&
+            games.map((game) => (
+              <li key={game.id}>
+                <Product
+                  id={game.id}
+                  category={game.details.category}
+                  description={game.description}
+                  image={game.media.thumbnail}
+                  infos={getGameTags(game)}
+                  system={game.details.system}
+                  title={game.name}
+                />
+              </li>
+            ))}
+        </S.List>
+      </div>
+    </S.Container>
+  )
+}
diff --git a/src/components/ProductList/styles.ts b/src/components/ProductList/styles.ts
new file mode 100644
index 000000000..a96750a66
--- /dev/null
+++ b/src/components/ProductList/styles.ts
@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+import { Props } from '.'
+import { breakpoint, colors } from '../../styles'
+import { Card } from '../Product/style'
+
+export const Container = styled.section<
+  Omit<Props, 'title' | 'games' | 'isLoading'>
+>`
+  padding-bottom: 32px;
+  background-color: ${(props) =>
+    props.background === 'black' ? colors.black : colors.gray};
+
+  ${Card} {
+    background-color: ${(props) =>
+      props.background === 'black' ? colors.gray : colors.black};
+  }
+`
+
+export const List = styled.ul`
+  display: grid;
+  gap: 40px 24px;
+
+  @media only screen and (min-width: ${breakpoint.tablet}) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media only screen and (min-width: ${breakpoint.desktop}) {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+`
+
+export const Title = styled.h2`
+  margin-bottom: 40px;
+`
diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
new file mode 100644
index 000000000..6c5f84400
--- /dev/null
+++ b/src/components/Section/index.tsx
@@ -0,0 +1,16 @@
+import * as S from './style'
+
+export type Props = {
+  title: string
+  background: 'black' | 'gray'
+  children: JSX.Element
+}
+
+export const Section = ({ title, background, children }: Props) => (
+  <S.Container background={background}>
+    <div className="container">
+      <S.Title>{title}</S.Title>
+      {children}
+    </div>
+  </S.Container>
+)
diff --git a/src/components/Section/style.ts b/src/components/Section/style.ts
new file mode 100644
index 000000000..404da20df
--- /dev/null
+++ b/src/components/Section/style.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+import { Props } from '.'
+import { colors } from '../../styles'
+import { Card } from '../Product/style'
+
+export const Container = styled.section<Omit<Props, 'title' | 'games'>>`
+  padding-bottom: 32px;
+  background-color: ${(props) =>
+    props.background === 'black' ? colors.black : colors.gray};
+
+  ${Card} {
+    background-color: ${(props) =>
+      props.background === 'black' ? colors.gray : colors.black};
+  }
+
+  p,
+  ul {
+    font-size: 14px;
+    line-height: 22px;
+    max-width: 640px;
+  }
+`
+
+export const Title = styled.h2`
+  margin-bottom: 40px;
+`
diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx
new file mode 100644
index 000000000..8f8ea8e24
--- /dev/null
+++ b/src/components/Tags/index.tsx
@@ -0,0 +1,10 @@
+import { TagsContainer } from './style'
+
+export type Props = {
+  size?: 'small' | 'big'
+  children: string
+}
+
+export const Tags = ({ children, size = 'small' }: Props) => (
+  <TagsContainer size={size}>{children}</TagsContainer>
+)
diff --git a/src/components/Tags/style.ts b/src/components/Tags/style.ts
new file mode 100644
index 000000000..bce4c079a
--- /dev/null
+++ b/src/components/Tags/style.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+import { Props } from '.'
+
+export const TagsContainer = styled.div<Props>`
+  background-color: ${colors.green};
+  color: ${colors.white};
+  padding: ${(props) => (props.size === 'big' ? '8px 16px' : '4px 6px')};
+  border-radius: 8px;
+  font-size: ${(props) => (props.size === 'big' ? '16px' : '10px')};
+  font-weight: bold;
+  display: inline-block;
+`
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.tsx b/src/index.tsx
index 1cc146d1e..5e4a391bf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c058..000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/Categorias/index.tsx b/src/pages/Categorias/index.tsx
new file mode 100644
index 000000000..ecab36a68
--- /dev/null
+++ b/src/pages/Categorias/index.tsx
@@ -0,0 +1,60 @@
+import { ProductList } from '../../components/ProductList'
+
+import {
+  useGetActionGamesQuery,
+  useGetFightGameQuery,
+  useGetRpgGameQuery,
+  useGetSportGamesQuery,
+  useGetSimulationGameQuery
+} from '../../services/api'
+
+export const Categories = () => {
+  const { data: actionGames, isLoading: isLoadingAction } =
+    useGetActionGamesQuery()
+  const { data: fightGames, isLoading: isLoadingFight } = useGetFightGameQuery()
+  const { data: rpgGames, isLoading: isLoadingRpg } = useGetRpgGameQuery()
+  const { data: simulationGames, isLoading: isLoadingSimulation } =
+    useGetSimulationGameQuery()
+  const { data: sportGames, isLoading: isLoadingSports } =
+    useGetSportGamesQuery()
+
+  return (
+    <>
+      <ProductList
+        title="Ação"
+        games={actionGames}
+        background={'gray'}
+        id="action"
+        isLoading={isLoadingAction}
+      />
+      <ProductList
+        title="Esportes"
+        games={sportGames}
+        background={'black'}
+        id="sports"
+        isLoading={isLoadingSports}
+      />
+      <ProductList
+        title="Luta"
+        games={fightGames}
+        background={'gray'}
+        id="fight"
+        isLoading={isLoadingFight}
+      />
+      <ProductList
+        title="Rpg"
+        games={rpgGames}
+        background={'black'}
+        id="rpg"
+        isLoading={isLoadingRpg}
+      />
+      <ProductList
+        title="Simulacão"
+        games={simulationGames}
+        background={'gray'}
+        id="simulation"
+        isLoading={isLoadingSimulation}
+      />
+    </>
+  )
+}
diff --git a/src/pages/Chekout/index.tsx b/src/pages/Chekout/index.tsx
new file mode 100644
index 000000000..e18a3a447
--- /dev/null
+++ b/src/pages/Chekout/index.tsx
@@ -0,0 +1,455 @@
+import { useEffect, useState } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { useSelector } from 'react-redux'
+
+import { Button } from '../../components/Button'
+import { Card } from '../../components/Card'
+
+import { usePurchaseMutation } from '../../services/api'
+import { RootReducer } from '../../store'
+
+import barCode from '../../assets/images/barcode.png'
+import cardImg from '../../assets/images/credit-card.png'
+
+import * as S from './style'
+import { Navigate } from 'react-router-dom'
+import { getTotalPrice, parseToBrl } from '../../utils'
+
+type Installment = {
+  quantity: number
+  amount: number
+  formattedAmount: string
+}
+
+export const Chekout = () => {
+  const [payWithCard, setPayWithCard] = useState(false)
+
+  const [purchase, { data, isSuccess }] = usePurchaseMutation()
+
+  const { items } = useSelector((state: RootReducer) => state.cart)
+
+  const [installments, setInstallments] = useState<Installment[]>([])
+
+  const totalPrice = getTotalPrice(items)
+
+  const form = useFormik({
+    initialValues: {
+      fullName: '',
+      email: '',
+      cpf: '',
+      deliveryEmail: '',
+      confirmDeliveryEmail: '',
+      cardOwner: '',
+      cpfCardOwner: '',
+      cardDisplayName: '',
+      cardNumber: '',
+      expiresMonth: '',
+      expiresYear: '',
+      cardCode: '',
+      installments: ''
+    },
+    validationSchema: Yup.object({
+      fullName: Yup.string()
+        .min(5, 'o campo precisa ter ao menos 5 caracteres')
+        .required('O campo é obrigatório'),
+      email: Yup.string()
+        .email('E-mail inválido')
+        .required('O campo é obrigatório'),
+      cpf: Yup.string()
+        .min(14, 'O campo precisa ter 14 caracteres')
+        .max(14, 'O campos precisa ter 14 caracteres')
+        .required('O campo é obrigatório'),
+      deliveryEmail: Yup.string()
+        .email('E-mail inválido')
+        .required('O campo é obrigatório'),
+      confirmDeliveryEmail: Yup.string()
+        .oneOf([Yup.ref('deliveryEmail')], 'Os e-mails são diferentes')
+        .required('O campo é obrigatório'),
+
+      cardOwner: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      cpfCardOwner: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      cardDisplayName: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      cardNumber: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      expiresMonth: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      expiresYear: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      cardCode: Yup.string().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      ),
+      installments: Yup.number().when((values, schema) =>
+        payWithCard ? schema.required('O campo é obrigatório') : schema
+      )
+    }),
+    onSubmit: (values) => {
+      purchase({
+        billing: {
+          document: values.cpf,
+          email: values.email,
+          name: values.fullName
+        },
+        delivery: {
+          email: values.deliveryEmail
+        },
+        payment: {
+          installments: 1,
+          card: {
+            active: payWithCard,
+            code: Number(values.cardCode),
+            name: values.cardDisplayName,
+            number: values.cardNumber,
+            owner: {
+              document: values.cpfCardOwner,
+              name: values.cardOwner
+            },
+            expires: {
+              month: 1,
+              year: 2025
+            }
+          }
+        },
+        products: [
+          {
+            id: 1,
+            price: 10
+          }
+        ]
+      })
+    }
+  })
+
+  console.log(form)
+
+  const checkInputHasError = (fieldName: string) => {
+    const isTouched = fieldName in form.touched
+    const isInvalid = fieldName in form.errors
+    const hasError = isTouched && isInvalid
+
+    return hasError
+  }
+
+  useEffect(() => {
+    const calculateInstallments = () => {
+      const installmentsArray: Installment[] = []
+
+      for (let i = 1; i <= 6; i++) {
+        installmentsArray.push({
+          quantity: i,
+          amount: totalPrice / i,
+          formattedAmount: parseToBrl(totalPrice / i)
+        })
+      }
+
+      return installmentsArray
+    }
+    if (totalPrice > 0) {
+      setInstallments(calculateInstallments())
+    }
+  }, [totalPrice])
+
+  if (items.length === 0) {
+    return <Navigate to={'/'} />
+  }
+
+  return (
+    <div className="container">
+      {isSuccess ? (
+        <Card title="Muito Obrigado">
+          <>
+            <p>
+              É com satisfação que informamos que recebemos seu pedido com
+              sucesso!
+            </p>
+            <p>Abaixo estão os detalhes da sua compra:</p>
+            <p>Número do pedido: {data.orderId}</p>
+            <p>
+              Forma de pagamento:{' '}
+              {payWithCard ? 'Cartão de Crédito' : 'Boleto Bancário'}
+            </p>
+            <p className="margin-top">
+              Caso tenha optado pelo pagamento via boleto bancário, lembre-se de
+              que a confirmação pode levar até 3 dias úteis. Após a aprovação do
+              pagamento, enviaremos um e-mail contendo o código de ativação do
+              jogo.
+            </p>
+            <p className="margin-top">
+              Se você optou pelo pagamento com cartão de crédito, a liberação do
+              código de ativação ocorrerá após a aprovação da transação pela
+              operadora do cartão. Você receberá o código no e-mail cadastrado
+              em nossa loja.
+            </p>
+            <p className="margin-top">
+              Pedimos que verifique sua caixa de entrada e a pasta de spam para
+              garantir que receba nossa comunicação. Caso tenha alguma dúvida ou
+              necessite de mais informações, por favor, entre em contato conosco
+              através dos nossos canais de atendimento ao cliente.
+            </p>
+            <p className="margin-top">
+              Agradecemos por escolher a EPLAY e esperamos que desfrute do seu
+              jogo!
+            </p>
+          </>
+        </Card>
+      ) : (
+        <form onSubmit={form.handleSubmit}>
+          <Card title="Dados de cobrança">
+            <>
+              <S.Row>
+                <S.InfoGroup>
+                  <label htmlFor="fullName">Nome completo</label>
+                  <input
+                    type="text"
+                    id="fullName"
+                    name="fullName"
+                    value={form.values.fullName}
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    className={checkInputHasError('fullName') ? 'error' : ''}
+                  />
+                </S.InfoGroup>
+                <S.InfoGroup>
+                  <label htmlFor="email">E-mail</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={form.values.email}
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    className={checkInputHasError('email') ? 'error' : ''}
+                  />
+                </S.InfoGroup>
+                <S.InfoGroup>
+                  <label htmlFor="cpf">CPF</label>
+                  <input
+                    type="text"
+                    id="cpf"
+                    name="cpf"
+                    value={form.values.cpf}
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    className={checkInputHasError('cpf') ? 'error' : ''}
+                  />
+                </S.InfoGroup>
+              </S.Row>
+              <h3>Dados de entrega - conteúdo digital</h3>
+              <S.Row>
+                <S.InfoGroup>
+                  <label htmlFor="deliveryEmail">E-mail</label>
+                  <input
+                    type="email"
+                    id="deliveryEmail"
+                    name="deliveryEmail"
+                    value={form.values.deliveryEmail}
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    className={
+                      checkInputHasError('deliveryEmail') ? 'error' : ''
+                    }
+                  />
+                </S.InfoGroup>
+                <S.InfoGroup>
+                  <label htmlFor="confirmDeliveryEmail">
+                    Confirme o e-mail
+                  </label>
+                  <input
+                    type="email"
+                    id="confirmDeliveryEmail"
+                    name="confirmDeliveryEmail"
+                    value={form.values.confirmDeliveryEmail}
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    className={
+                      checkInputHasError('confirmDeliveryEmail') ? 'error' : ''
+                    }
+                  />
+                </S.InfoGroup>
+              </S.Row>
+            </>
+          </Card>
+          <Card title="Pagamento">
+            <>
+              <div>
+                <S.TabButton
+                  isActive={!payWithCard}
+                  onClick={() => setPayWithCard(false)}
+                  type="button"
+                >
+                  <img src={barCode} alt="Boleto bancário" />
+                  Boleto bancário
+                </S.TabButton>
+                <S.TabButton
+                  isActive={payWithCard}
+                  onClick={() => setPayWithCard(true)}
+                  type="button"
+                >
+                  <img src={cardImg} alt="Cartão de crédito" />
+                  Cartão de crédito
+                </S.TabButton>
+              </div>
+              {payWithCard ? (
+                <>
+                  <S.Row>
+                    <S.InfoGroup>
+                      <label htmlFor="cardOwner">
+                        Nome do titular do cartão
+                      </label>
+                      <input
+                        type="text"
+                        id="cardOwner"
+                        name="cardOwner"
+                        value={form.values.cardOwner}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('cardOwner') ? 'error' : ''
+                        }
+                      />
+                    </S.InfoGroup>
+                    <S.InfoGroup>
+                      <label htmlFor="cpfCardOwner">
+                        Cpf do titular do cartão
+                      </label>
+                      <input
+                        type="text"
+                        id="cpfCardOwner"
+                        name="cpfCardOwner"
+                        value={form.values.cpfCardOwner}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('cpfCardOwner') ? 'error' : ''
+                        }
+                      />
+                    </S.InfoGroup>
+                  </S.Row>
+                  <S.Row marginTop="16px">
+                    <S.InfoGroup>
+                      <label htmlFor="cardDisplayName">Nome do cartão</label>
+                      <input
+                        type="text"
+                        id="cardDisplayName"
+                        name="cardDisplayName"
+                        value={form.values.cardDisplayName}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('cardDisplayName') ? 'error' : ''
+                        }
+                      />
+                    </S.InfoGroup>
+                    <S.InfoGroup>
+                      <label htmlFor="">Numero do cartão</label>
+                      <input
+                        type="text"
+                        id="cardNumber"
+                        name="cardNumber"
+                        value={form.values.cardNumber}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                      />
+                    </S.InfoGroup>
+                    <S.InfoGroup maxWidth="123px">
+                      <label htmlFor="expiresMonth">Mês de expiração</label>
+                      <input
+                        type="text"
+                        id="expiresMonth"
+                        name="expiresMonth"
+                        value={form.values.expiresMonth}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('expiresMonth') ? 'error' : ''
+                        }
+                      />
+                    </S.InfoGroup>
+                    <S.InfoGroup maxWidth="123px">
+                      <label htmlFor="expiresYear">Ano de expiração</label>
+                      <input
+                        type="text"
+                        id="expiresYear"
+                        name="expiresYear"
+                        value={form.values.expiresYear}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('expiresYear') ? 'error' : ''
+                        }
+                      />
+                    </S.InfoGroup>
+                    <S.InfoGroup maxWidth="48px">
+                      <label htmlFor="cardCode">CVV</label>
+                      <input
+                        type="text"
+                        id="cardCode"
+                        name="cardCode"
+                        value={form.values.cardCode}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('cardCode') ? 'error' : ''
+                        }
+                      />
+                    </S.InfoGroup>
+                  </S.Row>
+                  <S.Row>
+                    <S.InfoGroup maxWidth="150px">
+                      <label htmlFor="installments">Parcelamento</label>
+                      <select
+                        id="installments"
+                        name="installments"
+                        value={form.values.installments}
+                        onChange={form.handleChange}
+                        onBlur={form.handleBlur}
+                        className={
+                          checkInputHasError('installments') ? 'error' : ''
+                        }
+                      >
+                        {installments.map((installment) => (
+                          <option key={installment.quantity}>
+                            {installment.quantity}x de{' '}
+                            {installment.formattedAmount}
+                          </option>
+                        ))}
+                      </select>
+                    </S.InfoGroup>
+                  </S.Row>
+                </>
+              ) : (
+                <div>
+                  <p>
+                    Ao optar por essa forma de pagamento, é importante lembrar
+                    que a confirmação pode levar até 3 dias úteis, devido aos
+                    prazos estabelecidos pelas instituições financeiras.
+                    Portanto, a liberação do código de ativação do jogo
+                    adquirido ocorrerá somente após a aprovação do pagamento do
+                    boleto.
+                  </p>
+                </div>
+              )}
+            </>
+          </Card>
+
+          <Button
+            title="finalizar compra"
+            type="submit"
+            onClick={form.handleSubmit}
+          >
+            Finalizar Compra
+          </Button>
+        </form>
+      )}
+    </div>
+  )
+}
diff --git a/src/pages/Chekout/style.ts b/src/pages/Chekout/style.ts
new file mode 100644
index 000000000..1948d9bea
--- /dev/null
+++ b/src/pages/Chekout/style.ts
@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+
+type TabButtonProps = {
+  isActive: boolean
+}
+
+type InputGroupProps = {
+  maxWidth?: string
+}
+
+type RowProps = {
+  marginTop?: string
+}
+
+export const Row = styled.div<RowProps>`
+  display: flex;
+  column-gap: 24px;
+  margin-top: ${(props) => props.marginTop || '0'};
+`
+
+export const InfoGroup = styled.div<InputGroupProps>`
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+
+  max-width: ${(props) => props.maxWidth || 'auto'};
+
+  label {
+    font-size: 14px;
+    margin: 8px 0;
+  }
+
+  option {
+    color: ${colors.black};
+  }
+
+  input,
+  select {
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid ${colors.white};
+    background-color: ${colors.white};
+    color: ${colors.black};
+    widht: 100%;
+
+    &.error {
+      border: 1px solid red;
+    }
+  }
+`
+
+export const TabButton = styled.button<TabButtonProps>`
+  background-color: ${(props) =>
+    props.isActive ? colors.green : colors.black};
+  padding: 8px;
+  border-radius: 8px;
+  border: none;
+  height: 32px;
+  margin-right: 16px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+
+  img {
+    margin-right: 8px;
+  }
+`
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
new file mode 100644
index 000000000..885acfc06
--- /dev/null
+++ b/src/pages/Home/index.tsx
@@ -0,0 +1,57 @@
+import { Banner } from '../../components/Banner'
+import { ProductList } from '../../components/ProductList'
+
+import { useGetOnSaleQuery, useGetSoonQuery } from '../../services/api'
+
+export interface GalleryItem {
+  type: 'image' | 'video'
+  url: string
+}
+
+export type Game = {
+  id: number
+  name: string
+  description: string
+  relase_date?: string
+  prices: {
+    discount?: number
+    old?: number
+    current?: number
+  }
+  details: {
+    category: string
+    system: string
+    developer: string
+    publisher: string
+    languages: string[]
+  }
+  media: {
+    thumbnail: string
+    cover: string
+    gallery: GalleryItem[]
+  }
+}
+
+export const Home = () => {
+  const { data: onSaleGames, isLoading: isLoadingSale } = useGetOnSaleQuery()
+  const { data: soonGames, isLoading: isLoadingSoon } = useGetSoonQuery()
+  return (
+    <>
+      <Banner />
+      <ProductList
+        games={onSaleGames}
+        title="Promoções"
+        background="gray"
+        id="on-sale"
+        isLoading={isLoadingSale}
+      />
+      <ProductList
+        games={soonGames}
+        title="Em Breve"
+        background="black"
+        id="coming-soon"
+        isLoading={isLoadingSoon}
+      />
+    </>
+  )
+}
diff --git a/src/pages/Product/index.tsx b/src/pages/Product/index.tsx
new file mode 100644
index 000000000..3c4157189
--- /dev/null
+++ b/src/pages/Product/index.tsx
@@ -0,0 +1,53 @@
+import { useParams } from 'react-router-dom'
+
+import { Hero } from '../../components/Hero'
+import { Section } from '../../components/Section'
+import { Gallery } from '../../components/Gallery'
+import { Loader } from '../../components/Loader'
+
+import { useGetGameQuery } from '../../services/api'
+
+type GameParams = {
+  id: string
+}
+
+export const Product = () => {
+  const { id } = useParams() as GameParams
+
+  const { data: game } = useGetGameQuery(id)
+
+  if (!game) {
+    return <Loader />
+  }
+
+  return (
+    <>
+      <Hero game={game} />
+      <Section background="black" title="Sobre o jogo">
+        <p>{game?.description}</p>
+      </Section>
+      <Section background="gray" title="Mais detalhes">
+        <ul>
+          <li>
+            <b>Plataforma:</b> {game?.details.system}
+          </li>
+          <li>
+            <b>Desenvolvedor:</b> {game?.details.developer}
+          </li>
+          <li>
+            <b>Editora:</b> {game?.details.publisher}
+          </li>
+          <li>
+            <b>Idiomas:</b> O jogo oferece suporte a diversos idiomas, incluindo
+            {game?.details.languages.join(', ')}
+          </li>
+        </ul>
+      </Section>
+      <Gallery
+        nome={game.name}
+        defaultCover={game.media.cover}
+        items={game.media.gallery}
+      />
+    </>
+  )
+}
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 000000000..7df01743d
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,14 @@
+import { Routes, Route } from 'react-router-dom'
+import { Home } from './pages/Home'
+import { Categories } from './pages/Categorias'
+import { Product } from './pages/Product'
+import { Chekout } from './pages/Chekout'
+
+export const Rotas = () => (
+  <Routes>
+    <Route path="/" element={<Home />} />
+    <Route path="/categories" element={<Categories />} />
+    <Route path="/product/:id" element={<Product />} />
+    <Route path="/checkout" element={<Chekout />} />
+  </Routes>
+)
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 000000000..75c074336
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,94 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+import { Game } from '../pages/Home'
+
+type Product = {
+  id: number
+  price: number
+}
+
+type PurchasePayload = {
+  products: Product[]
+  billing: {
+    name: string
+    email: string
+    document: string
+  }
+  delivery: {
+    email: string
+  }
+  payment: {
+    card: {
+      active: boolean
+      owner?: {
+        name: string
+        document: string
+      }
+      name: string
+      number: string
+      expires: {
+        month: number
+        year: number
+      }
+      code: number
+    }
+    installments: number
+  }
+}
+
+const api = createApi({
+  baseQuery: fetchBaseQuery({
+    baseUrl: 'https://ebac-fake-api.vercel.app/api/eplay/checkout'
+  }),
+  endpoints: (builder) => ({
+    getFeaturedGame: builder.query<Game, void>({
+      query: () => 'destaque'
+    }),
+    getOnSale: builder.query<Game[], void>({
+      query: () => 'promocoes'
+    }),
+    getSoon: builder.query<Game[], void>({
+      query: () => 'em-breve'
+    }),
+    getActionGames: builder.query<Game[], void>({
+      query: () => 'acao'
+    }),
+    getSportGames: builder.query<Game[], void>({
+      query: () => 'esportes'
+    }),
+    getFightGame: builder.query<Game[], void>({
+      query: () => 'luta'
+    }),
+    getRpgGame: builder.query<Game[], void>({
+      query: () => 'rpg'
+    }),
+    getSimulationGame: builder.query<Game[], void>({
+      query: () => 'simulacao'
+    }),
+    getGame: builder.query<Game, string>({
+      query: (id) => `jogos/${id}`
+    }),
+    purchase: builder.mutation<any, PurchasePayload>({
+      query: (body) => ({
+        url: 'checkout',
+        method: 'Post',
+        body
+      })
+    })
+  })
+})
+
+export const {
+  useGetFeaturedGameQuery,
+  useGetOnSaleQuery,
+  useGetSoonQuery,
+  useGetActionGamesQuery,
+  useGetRpgGameQuery,
+  useGetSportGamesQuery,
+  useGetSimulationGameQuery,
+  useGetFightGameQuery,
+  useGetGameQuery,
+  usePurchaseMutation
+} = api
+
+export default api
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 000000000..db7d9ee69
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit'
+
+import api from '../services/api'
+
+import cartReducer from './reducers/cart'
+
+export const store = configureStore({
+  reducer: {
+    cart: cartReducer,
+    [api.reducerPath]: api.reducer
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(api.middleware)
+})
+
+export type RootReducer = ReturnType<typeof store.getState>
diff --git a/src/store/reducers/cart.ts b/src/store/reducers/cart.ts
new file mode 100644
index 000000000..73aa9fca6
--- /dev/null
+++ b/src/store/reducers/cart.ts
@@ -0,0 +1,41 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { Game } from '../../pages/Home'
+
+type CartState = {
+  items: Game[]
+  isOpen: boolean
+}
+
+const initialState: CartState = {
+  items: [],
+  isOpen: false
+}
+
+const cartSlice = createSlice({
+  name: 'cart',
+  initialState,
+  reducers: {
+    add: (state, action: PayloadAction<Game>) => {
+      const game = state.items.find((item) => item.id === action.payload.id)
+
+      if (!game) {
+        state.items.push(action.payload)
+      } else {
+        alert('O jogo já foi adicionado ao carrinho !')
+      }
+    },
+    remove: (state, action: PayloadAction<number>) => {
+      state.items = state.items.filter((item) => item.id !== action.payload)
+    },
+    open: (state) => {
+      state.isOpen = true
+    },
+    close: (state) => {
+      state.isOpen = false
+    }
+  }
+})
+
+export const { add, close, open, remove } = cartSlice.actions
+export default cartSlice.reducer
diff --git a/src/styles.ts b/src/styles.ts
new file mode 100644
index 000000000..a5697b942
--- /dev/null
+++ b/src/styles.ts
@@ -0,0 +1,41 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const colors = {
+  black: '#111111',
+  gray: '#333',
+  green: '#10AC84',
+  white: '#EEEEEE',
+  lightgray: '#A3A3A3'
+}
+
+export const breakpoint = {
+  desktop: '1024px',
+  tablet: '768px'
+}
+
+export const GlobalCss = createGlobalStyle`
+  * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: "Roboto", sans-serif;
+      list-style-type: none;
+      text-decoration: none;
+      color: ${colors.white};
+}
+
+body {
+  background-color: ${colors.black};
+}
+
+.container {
+  max-width: 1024px;
+  width: 80%;
+  margin: 0 auto;
+  padding-top: 40px;
+
+  @media only screen and (min-width: ${breakpoint.desktop}) {
+    width: 100%;
+  }
+}
+`
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 000000000..5f6c24e4b
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,17 @@
+import { Game } from '../pages/Home'
+
+export const parseToBrl = (amount = 0) => {
+  return new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL'
+  }).format(amount)
+}
+
+export const getTotalPrice = (items: Game[]) => {
+  return items.reduce((accumulator, currentItem) => {
+    if (currentItem.prices.current) {
+      return (accumulator += currentItem.prices.current)
+    }
+    return 0
+  }, 0)
+}