diff --git a/README.md b/README.md
index 54ef094..64fe188 100644
--- a/README.md
+++ b/README.md
@@ -1,68 +1,17 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Nome dos integrantes:
 
-## Available Scripts
+Noh Ah Jeong
+Felipe Polato
+Murilo Mendonça
+Laura Sanches
+Carlos Augusto Luna
 
-In the project directory, you can run:
+O que não funciona:
 
-### `npm start`
+- Histórico de compras
+- Quantidade de produtos do carrinho
+- Active order
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Link do surge:
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+hard-to-find-animal.surge.sh
diff --git a/package-lock.json b/package-lock.json
index e8c18b2..dfcee96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1117,6 +1117,34 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1342,6 +1370,82 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@material-ui/core": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
+      "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.2",
+        "@material-ui/system": "^4.11.2",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz",
+      "integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz",
+      "integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1725,6 +1829,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -2437,6 +2549,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",
@@ -2674,6 +2794,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
       "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3343,6 +3479,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3577,6 +3718,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -3970,6 +4116,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4060,6 +4211,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -4076,6 +4237,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@@ -4535,6 +4705,22 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+        }
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6241,6 +6427,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6251,6 +6450,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -6454,6 +6661,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6537,6 +6749,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -6822,6 +7042,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -7679,6 +7904,92 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz",
+      "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+        }
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz",
+      "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz",
+      "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz",
+      "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz",
+      "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz",
+      "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz",
+      "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz",
+      "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.5.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
@@ -8153,6 +8464,25 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.12.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+          "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -9158,6 +9488,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -10648,6 +10983,52 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -10708,6 +11089,17 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11051,6 +11443,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -11524,6 +11921,11 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -12212,6 +12614,23 @@
         }
       }
     },
+    "styled-components": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
+      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12267,6 +12686,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12518,6 +12942,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "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=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12889,6 +13323,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 2d4ff44..6ce39ca 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.21.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- 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.js b/src/App.js
index ce9cbd2..52fe53f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Routers from "./route/Routers";
+import { ThemeProvider } from "@material-ui/core/styles";
+import theme from "./constants/theme";
+import GlobalState from "./global/GlobalState";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <GlobalState>
+      <ThemeProvider theme={theme}>
+        <Routers />
+      </ThemeProvider>
+    </GlobalState>
   );
 }
 
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/Screens/CartPage/CartPage.js b/src/Screens/CartPage/CartPage.js
new file mode 100644
index 0000000..f5ebec0
--- /dev/null
+++ b/src/Screens/CartPage/CartPage.js
@@ -0,0 +1,132 @@
+import React, { useContext, useEffect, useState } from "react";
+import {
+  MainDiv,
+  ApplicationDiv,
+  AdressInfoDiv,
+  DeliveryAdress,
+  AdressDetail,
+  CartCardListContainer,
+  SubtotalDiv,
+  SubtotalTitle,
+  SubtotalValue,
+  ShippingDiv,
+  PaymentMethodDiv,
+  PaymentMethodTitle,
+  Hr,
+  ConfirmPayButton,
+} from "./styled";
+import Header from "../../components/Header/Header";
+import axios from "axios";
+import Footer from "../../components/Footer/Footer";
+
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import RadioButtonUncheckedIcon from "@material-ui/icons/RadioButtonUnchecked";
+import RadioButtonCheckedIcon from "@material-ui/icons/RadioButtonChecked";
+import GlobalStateContext from "../../global/GlobalStateContext";
+import DishCard from "../../components/DishCard/DishCard";
+
+function CartPage() {
+  const { states, setters } = useContext(GlobalStateContext);
+  const [products, setProducts] = useState([]);
+
+  console.log("na pagina de carrinho", states.cart)
+  
+  useEffect(() => {
+    getRestaurantDetails();
+  }, []);
+
+  const getRestaurantDetails = () => {
+    const body = {
+      products: [
+        {
+          id: "CnKdjU6CyKakQDGHzNln",
+          quantity: 10,
+        },
+        {
+          quantity: 1,
+          id: "KJqMl2DxeShkSBevKVre",
+        },
+      ],
+      paymentMethod: "creditcard",
+    };
+
+    axios
+      .post(
+        "https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/restaurants/1/order",
+        {
+          headers: {
+            authorization: localStorage.getItem("token"),
+          },
+        }
+      )
+      .then((response) => {
+        setProducts(response.data.restaurant.products);
+        console.log(response);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+  return (
+    <MainDiv>
+      <ApplicationDiv>
+        <Header title={"Meu carrinho"} showBackButton />
+        <AdressInfoDiv>
+          <DeliveryAdress>Endereço de entrega</DeliveryAdress>
+          <AdressDetail>Rua Labenu, 100</AdressDetail>
+        </AdressInfoDiv>
+        <CartCardListContainer>{states.cart && states.cart.map((item) => {
+          console.log("item no cart", item.newItem)
+          return (
+            <DishCard
+              key={item.newItem.id}
+              id={item.newItem.id}
+              name={item.newItem.name}
+              description={item.newItem.description}
+              photoUrl={item.newItem.photoUrl}
+              category={item.newItem.category}
+              price={item.newItem.price}
+              restaurantId={item.newItem.id}
+            />
+          )
+        })}</CartCardListContainer>
+        <ShippingDiv>
+          <p>Frete R$0,00</p>
+        </ShippingDiv>
+        <SubtotalDiv>
+          <SubtotalTitle>SUBTOTAL</SubtotalTitle>
+          <SubtotalValue>R$ 00,00</SubtotalValue>
+        </SubtotalDiv>
+        <PaymentMethodDiv>
+          <PaymentMethodTitle>Forma de Pagamento</PaymentMethodTitle>
+          <Hr />
+          <FormControlLabel
+            control={
+              <Checkbox
+                icon={<RadioButtonUncheckedIcon />}
+                checkedIcon={<RadioButtonCheckedIcon />}
+                name="money"
+              />
+            }
+            label="Dinheiro"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                icon={<RadioButtonUncheckedIcon />}
+                checkedIcon={<RadioButtonCheckedIcon />}
+                name="creditCard"
+              />
+            }
+            label="Cartão de crédito"
+          />
+          <ConfirmPayButton>Confirmar</ConfirmPayButton>
+        </PaymentMethodDiv>
+      </ApplicationDiv>
+      <Footer />
+    </MainDiv>
+  );
+}
+
+export default CartPage;
diff --git a/src/Screens/CartPage/styled.js b/src/Screens/CartPage/styled.js
new file mode 100644
index 0000000..b7c9ca6
--- /dev/null
+++ b/src/Screens/CartPage/styled.js
@@ -0,0 +1,143 @@
+import styled from "styled-components";
+
+export const MainDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ApplicationDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const AdressInfoDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 360px;
+  height: 76px;
+  background-color: #eeeeee;
+`;
+
+export const DeliveryAdress = styled.p`
+  display: flex;
+  width: 328px;
+  height: 18px;
+  margin: 0 0 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.39px;
+  color: grey;
+`;
+
+export const AdressDetail = styled.p`
+  display: flex;
+  width: 328px;
+  height: 18px;
+  margin: 8px 0 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.39px;
+  color: #000000;
+`;
+
+export const CartCardListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+`;
+export const ShippingDiv = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  p {
+    display: flex;
+    margin-right: 16px;
+  }
+`;
+
+export const SubtotalDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const SubtotalTitle = styled.p`
+  width: 164px;
+  height: 18px;
+  margin: 16px 0 24px 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.39px;
+  color: #000000;
+`;
+
+export const SubtotalValue = styled.p`
+  width: 164px;
+  height: 18px;
+  margin: 14px 16px 26px 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.43px;
+  text-align: right;
+  color: #5cb646;
+`;
+
+export const PaymentMethodDiv = styled.div`
+  display: flex;
+  position: relative;
+  height: 290px;
+  flex-direction: column;
+  padding-right: 16px;
+  padding-left: 16px;
+`;
+
+export const PaymentMethodTitle = styled.p`
+  width: 328px;
+  height: 18px;
+  margin: 24px 0px 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.39px;
+  color: #000000;
+`;
+
+export const Hr = styled.hr`
+  width: 328px;
+  border: solid 1px #000000;
+`;
+
+export const ConfirmPayButton = styled.button`
+  width: 328px;
+  height: 42px;
+  border: none;
+  font-weight: bold;
+  background-color: rgba(92, 182, 70, 0.5);
+`;
diff --git a/src/Screens/EditAddressPage/EditAddressPage.js b/src/Screens/EditAddressPage/EditAddressPage.js
new file mode 100644
index 0000000..667f3e3
--- /dev/null
+++ b/src/Screens/EditAddressPage/EditAddressPage.js
@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { EditAddressContainer, FormStyled } from "./styles";
+import Header from "../../components/Header/Header";
+import useForm from "../../hooks/useForm";
+import { useHistory } from "react-router";
+
+// MATERIAL UI - IMPORTS
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import { ThemeProvider } from "@material-ui/core/styles";
+import theme from "../../constants/theme";
+
+function EditAddressPage() {
+  const history = useHistory();
+  const [address, setaddress] = useState([]);
+
+  useEffect(() => {
+    getProfile();
+  }, []);
+
+  const getProfile = () => {
+    const token = localStorage.getItem("token");
+
+    axios
+      .get(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/profile/address`,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        setaddress(response.data.address);
+      })
+      .catch((error) => {
+        console.log(error.messenge);
+      });
+  };
+
+  const [profile, onChange] = useForm({
+    street: "",
+    number: "",
+    neighbourhood: "",
+    city: "",
+    state: "",
+    complement: "",
+  });
+
+  const putAddAddress = (event) => {
+    event.preventDefault();
+
+    const body = {
+      street: profile.street,
+      number: profile.number,
+      neighbourhood: profile.neighbourhood,
+      city: profile.city,
+      state: profile.state,
+      complement: profile.complement,
+    };
+    console.log("body", body);
+
+    const token = localStorage.getItem("token");
+    axios
+      .put(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/address`,
+        body,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        console.log("response", response);
+        history.push("/perfil");
+
+        alert("Endereço cadastrado com sucesso");
+      })
+      .catch((error) => {
+        alert("Erro ao cadastrar endereço");
+        console.error(error);
+      });
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Header title={"Editar endereço"} showBackButton />
+      <EditAddressContainer>
+        <FormStyled>
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            fullWidth
+            id="endereco"
+            label="Endereço"
+            placeholder={address.street}
+            name="street"
+            value={profile.street}
+            required
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            fullWidth
+            id="numero"
+            label="Número"
+            placeholder={address.number}
+            name="number"
+            value={profile.number}
+            required
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            fullWidth
+            id="complemento"
+            label="Complemento"
+            placeholder={address.complement}
+            name="complement"
+            value={profile.complement}
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            fullWidth
+            name="neighbourhood"
+            label="Bairro"
+            placeholder={address.neighbourhood}
+            id="bairro"
+            value={profile.neighbourhood}
+            required
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            fullWidth
+            name="city"
+            label="Cidade"
+            placeholder={address.city}
+            id="cidade"
+            value={profile.city}
+            required
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            fullWidth
+            name="state"
+            label="Estado"
+            placeholder={address.state}
+            id="estado"
+            value={profile.state}
+            required
+          />
+          <Button
+            onClick={putAddAddress}
+            color="primary"
+            type="submit"
+            fullWidth
+            variant="contained"
+          >
+            Salvar
+          </Button>
+        </FormStyled>
+      </EditAddressContainer>
+    </ThemeProvider>
+  );
+}
+
+export default EditAddressPage;
diff --git a/src/Screens/EditAddressPage/styles.js b/src/Screens/EditAddressPage/styles.js
new file mode 100644
index 0000000..9f11662
--- /dev/null
+++ b/src/Screens/EditAddressPage/styles.js
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const EditAddressContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  width: 360px;
+  height: 500px;
+  margin: 0 auto;
+`;
+
+export const FormStyled = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 85vw;
+  height: 500px;
+`;
diff --git a/src/Screens/EditPerfilPage/EditPerfilPage.js b/src/Screens/EditPerfilPage/EditPerfilPage.js
new file mode 100644
index 0000000..7df54f0
--- /dev/null
+++ b/src/Screens/EditPerfilPage/EditPerfilPage.js
@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { EditPerfilContainer, FormStyled } from "./styles";
+import useForm from "../../hooks/useForm";
+import Header from "../../components/Header/Header";
+import { useHistory } from "react-router";
+import useProtectedPage from "../../hooks/useProtectedPage";
+
+// MATERIAL UI - IMPORTS
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import { ThemeProvider } from "@material-ui/core/styles";
+import theme from "../../constants/theme";
+
+function EditPerfilPage() {
+  const history = useHistory();
+  useProtectedPage();
+  // useEffect(() => {}, []);
+
+  const [profile, onChange] = useForm({
+    name: "",
+    email: "",
+    cpf: "",
+  });
+
+  const putUpdateProfile = (event) => {
+    event.preventDefault();
+    const body = {
+      name: profile.name,
+      email: profile.email,
+      cpf: profile.cpf,
+    };
+
+    console.log("body", body);
+    const token = localStorage.getItem("token");
+
+    axios
+      .put(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/profile`,
+        body,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        console.log(response);
+        alert("Perfil editado com sucesso");
+        history.push("/perfil");
+      })
+      .catch((error) => {
+        alert("Erro ao editar perfil");
+        console.error(error);
+      });
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <EditPerfilContainer>
+        <Header title={"Editar"} showBackButton />
+        <FormStyled>
+          <TextField
+            onChange={onChange}
+            value={profile.name}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            id="name"
+            label="Nome"
+            name="name"
+            required
+          />
+          <TextField
+            onChange={onChange}
+            value={profile.email}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            id="email"
+            label="E-mail"
+            name="email"
+            required
+          />
+          <TextField
+            onChange={onChange}
+            value={profile.cpf}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            id="cpf"
+            label="CPF"
+            name="cpf"
+            required
+          />
+          <br />
+          <Button
+            onClick={putUpdateProfile}
+            color="primary"
+            type="submit"
+            fullWidth
+            variant="contained"
+          >
+            Salvar
+          </Button>
+        </FormStyled>
+      </EditPerfilContainer>
+    </ThemeProvider>
+  );
+}
+
+export default EditPerfilPage;
diff --git a/src/Screens/EditPerfilPage/styles.js b/src/Screens/EditPerfilPage/styles.js
new file mode 100644
index 0000000..bc7c311
--- /dev/null
+++ b/src/Screens/EditPerfilPage/styles.js
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const EditPerfilContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+`;
+
+export const FormStyled = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
diff --git a/src/Screens/FeedPage/FeedPage.js b/src/Screens/FeedPage/FeedPage.js
new file mode 100644
index 0000000..2284674
--- /dev/null
+++ b/src/Screens/FeedPage/FeedPage.js
@@ -0,0 +1,348 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import RestaurantCard from "../../components/RestaurantCard/RestaurantCard";
+import { makeStyles } from "@material-ui/core/styles";
+import { useHistory } from "react-router";
+import Header from "../../components/Header/Header";
+import Footer from "../../components/Footer/Footer";
+import theme from "../../constants/theme";
+import { ThemeProvider } from "@material-ui/core/styles";
+import {
+  AppBar,
+  Tab,
+  Tabs,
+  Box,
+  Paper,
+  InputBase,
+  IconButton,
+} from "@material-ui/core";
+import SearchIcon from "@material-ui/icons/Search";
+import { goToSearch } from "../../route/coordinator";
+
+import useProtectedPage from "../../hooks/useProtectedPage";
+
+const useStyles = makeStyles({
+  listContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+});
+
+function TabPanel(props) {
+  const { children, value, index } = props;
+
+  return <div>{value === index && <Box>{children}</Box>}</div>;
+}
+
+function FeedPage() {
+  useProtectedPage();
+  const history = useHistory();
+  const classes = useStyles();
+  const [restaurants, setRestaurants] = useState(0);
+  const [foodCategory, setFoodCategory] = useState(0);
+
+  useEffect(() => {
+    getRestaurants();
+  }, []);
+
+  const getRestaurants = () => {
+    const token = localStorage.getItem("token");
+    axios
+      .get(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/restaurants`,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        setRestaurants(response.data.restaurants);
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  };
+
+  const handleFoodCategoryChange = (event, newValue) => {
+    setFoodCategory(newValue);
+  };
+  console.log(restaurants);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div>
+        <Header title={"FutureEats"} />
+
+        <Paper color="primary" onClick={() => goToSearch(history)}>
+          <IconButton type="submit">
+            <SearchIcon />
+          </IconButton>
+          <InputBase placeholder="Restaurante" />
+        </Paper>
+
+        <AppBar position="static" color="default">
+          <Tabs
+            value={foodCategory}
+            onChange={handleFoodCategoryChange}
+            indicatorColor="primary"
+            textColor="primary"
+            variant="scrollable"
+            scrollButtons="auto"
+          >
+            <Tab label="Todos" />
+            <Tab label="Árabe" />
+            <Tab label="Asiática" />
+            <Tab label="Baiana" />
+            <Tab label="Carnes" />
+            <Tab label="Hamburguer" />
+            <Tab label="Italiana" />
+            <Tab label="Mexicana" />
+            <Tab label="Petiscos" />
+            <Tab label="Sorvetes" />
+          </Tabs>
+        </AppBar>
+        <TabPanel value={foodCategory} index={0}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants.map((restaurant) => {
+                return (
+                  <RestaurantCard
+                    key={restaurant.id}
+                    id={restaurant.id}
+                    name={restaurant.name}
+                    description={restaurant.description}
+                    address={restaurant.address}
+                    shipping={restaurant.shipping}
+                    deliveryTime={restaurant.deliveryTime}
+                    logoUrl={restaurant.logoUrl}
+                    category={restaurant.category}
+                  />
+                );
+              })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={1}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Árabe";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={2}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Asiática";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={3}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Baiana";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={4}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Carnes";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={5}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Hamburguer";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={6}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Italiana";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={7}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Mexicana";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={8}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Petiscos";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <TabPanel value={foodCategory} index={9}>
+          <div className={classes.listContainer}>
+            {restaurants &&
+              restaurants
+                .filter((restaurant) => {
+                  return restaurant.category === "Sorvetes";
+                })
+                .map((restaurant) => {
+                  return (
+                    <RestaurantCard
+                      key={restaurant.id}
+                      id={restaurant.id}
+                      name={restaurant.name}
+                      description={restaurant.description}
+                      address={restaurant.address}
+                      shipping={restaurant.shipping}
+                      deliveryTime={restaurant.deliveryTime}
+                      logoUrl={restaurant.logoUrl}
+                      category={restaurant.category}
+                    />
+                  );
+                })}
+          </div>
+        </TabPanel>
+        <Footer />
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default FeedPage;
diff --git a/src/Screens/LoadingPage/LoadingPage.js b/src/Screens/LoadingPage/LoadingPage.js
new file mode 100644
index 0000000..05d561d
--- /dev/null
+++ b/src/Screens/LoadingPage/LoadingPage.js
@@ -0,0 +1,35 @@
+import React, { useEffect } from "react";
+import Logo from "../../img/logo-future-eats-invert@2x.png";
+import styled from "styled-components";
+import { useHistory } from "react-router";
+import { goToFeed } from "../../route/coordinator";
+
+const LoadingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 360px;
+  height: 640px;
+  background-color: white;
+`;
+
+function LoadingPage() {
+  const history = useHistory();
+
+  useEffect(() => {
+    setTimeout(InitialPage, 2000);
+  }, []);
+
+  function InitialPage() {
+    goToFeed(history);
+  }
+
+  return (
+    <LoadingContainer>
+      <img src={Logo} alt="logo" />
+    </LoadingContainer>
+  );
+}
+
+export default LoadingPage;
diff --git a/src/Screens/LoginPage/LoginPage.js b/src/Screens/LoginPage/LoginPage.js
new file mode 100644
index 0000000..e4c8cd7
--- /dev/null
+++ b/src/Screens/LoginPage/LoginPage.js
@@ -0,0 +1,120 @@
+import React, { useEffect } from "react";
+import { LoginContainer, FormStyled } from "./styles";
+import Logo from "../../img/logo-future-eats-invert.png";
+import { useHistory } from "react-router";
+import useForm from "../../hooks/useForm";
+import axios from "axios";
+
+// MATERIAL UI - IMPORTS
+import TextField from "@material-ui/core/TextField";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import theme from "../../constants/theme";
+import { Button } from "@material-ui/core";
+import { ThemeProvider } from "@material-ui/core/styles";
+
+function LoginPage() {
+  const history = useHistory();
+  // const [hasAddress, setHasAddress] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      history.push("/");
+    }
+  }, [history]);
+
+  const [form, onChange] = useForm({
+    email: "",
+    password: "",
+  });
+
+  const handleLogin = async (event) => {
+    const body = {
+      email: form.email,
+      password: form.password,
+    };
+
+    try {
+      event.preventDefault();
+      const response = await axios.post(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/login`,
+        body
+      );
+      localStorage.setItem("token", response.data.token);
+      // setHasAddress(response.data.user.hasAddress);
+      handleLogin(form);
+
+      // console.log("RESPONSE TOKEN", response.data.token);
+      // console.log("user", response.data.user.hasAddress);
+
+      history.push("/");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const goToSignupPage = () => {
+    history.push("/signup");
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LoginContainer>
+        <img src={Logo} alt="logo" />
+        <br />
+        <Typography align="center" component="h1" variant="h5">
+          Entrar
+        </Typography>
+        <FormStyled>
+          <TextField
+            onChange={onChange}
+            inputProps={{ pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" }}
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="email"
+            label="Email"
+            name="email"
+            value={form.email}
+            autoFocus
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            value={form.password}
+          />
+          <br />
+          <Button
+            onClick={handleLogin}
+            color="primary"
+            type="submit"
+            fullWidth
+            variant="contained"
+          >
+            Login
+          </Button>
+          <Grid container>
+            <Grid item>
+              <br />
+              <Link align="center" onClick={goToSignupPage} variant="body2">
+                {"Não possui cadastro? Clique aqui."}
+              </Link>
+            </Grid>
+          </Grid>
+        </FormStyled>
+      </LoginContainer>
+    </ThemeProvider>
+  );
+}
+
+export default LoginPage;
diff --git a/src/Screens/LoginPage/styles.js b/src/Screens/LoginPage/styles.js
new file mode 100644
index 0000000..995bfa9
--- /dev/null
+++ b/src/Screens/LoginPage/styles.js
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const LoginContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  margin: 0 auto;
+`;
+
+export const FormStyled = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/Screens/PerfilPage/PerfilPage.js b/src/Screens/PerfilPage/PerfilPage.js
new file mode 100644
index 0000000..28d9533
--- /dev/null
+++ b/src/Screens/PerfilPage/PerfilPage.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import {
+  ProfileContainer, ProfileDetailContainer, RowFlexContainer, AddressDetailContainer, OrderHistoryContainer
+} from "./styles";
+import CreateIcon from "@material-ui/icons/Create";
+import axios from "axios";
+import Header from "../../components/Header/Header";
+import Footer from "../../components/Footer/Footer";
+import { goToEditProfile } from "../../route/coordinator";
+import { goToEditAddress } from "../../route/coordinator";
+import { useHistory } from "react-router";
+
+function PerfilPage() {
+  const history = useHistory();
+  const [profile, setProfile] = useState({});
+  const [orderHistory, setOrderHistory] = useState([]);
+
+  useEffect(() => {
+    getProfile();
+  }, []);
+
+  const getProfile = () => {
+    const token = localStorage.getItem("token");
+
+    axios
+      .get(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/profile`,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        setProfile(response.data.user);
+      })
+      .catch((error) => {
+        console.log(error.messenge);
+      });
+  };
+
+  const getOrdersHistory = () => {
+    const token = localStorage.getItem("token");
+    axios
+      .get(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/orders/history`,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        setOrderHistory(response.data.order);
+      })
+      .catch((error) => {
+        console.log(error.messenge);
+      });
+  };
+
+  return (
+    <ProfileContainer>
+      <Header title={"Meu Perfil"} />
+
+      <ProfileDetailContainer>
+        <RowFlexContainer>
+          <p>{profile.name}</p>
+          <CreateIcon onClick={() => goToEditProfile(history)} />
+        </RowFlexContainer>
+        <p>{profile.email}</p>
+        <p>{profile.cpf}</p>
+      </ProfileDetailContainer>
+
+      <AddressDetailContainer>
+        <RowFlexContainer>
+          <p>Endereço Cadastrado</p>
+          <CreateIcon onClick={() => goToEditAddress(history)} />
+        </RowFlexContainer>
+        <p>{profile.address}</p>
+      </AddressDetailContainer>
+
+      <OrderHistoryContainer>
+        <p>Histórico de pedidos</p>
+      </OrderHistoryContainer>
+
+      <Footer />
+    </ProfileContainer>
+  );
+}
+
+export default PerfilPage;
diff --git a/src/Screens/PerfilPage/styles.js b/src/Screens/PerfilPage/styles.js
new file mode 100644
index 0000000..cc004ae
--- /dev/null
+++ b/src/Screens/PerfilPage/styles.js
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export const ProfileContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 360px;
+  height: 640px;
+  align-items: center;
+`;
+
+export const ProfileDetailContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 360px;
+  padding: 16px;
+`;
+
+export const RowFlexContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const AddressDetailContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: #B8B8B8;
+  box-sizing: border-box;
+  width: 360px;
+  padding: 16px;
+`;
+
+export const OrderHistoryContainer = styled.div`
+`;
\ No newline at end of file
diff --git a/src/Screens/RegisterAddressPage/RegisterAddressPage.js b/src/Screens/RegisterAddressPage/RegisterAddressPage.js
new file mode 100644
index 0000000..5a94c2d
--- /dev/null
+++ b/src/Screens/RegisterAddressPage/RegisterAddressPage.js
@@ -0,0 +1,149 @@
+import React from "react";
+import { FormStyled, RegisterAddressContainer } from "./styles";
+import { useHistory } from "react-router";
+import useForm from "../../hooks/useForm";
+import axios from "axios";
+import useProtectedPage from "../../hooks/useProtectedPage";
+import Header from "../../components/Header/Header";
+
+// MATERIAL UI - IMPORTS
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import { ThemeProvider } from "@material-ui/core/styles";
+import theme from "../../constants/theme";
+import { Button } from "@material-ui/core";
+
+function RegisterAddressPage() {
+  const history = useHistory();
+  const token = localStorage.getItem("token");
+
+  useProtectedPage();
+
+  const [form, onChange] = useForm({
+    street: "",
+    number: "",
+    neighbourhood: "",
+    city: "",
+    state: "",
+    complement: "",
+  });
+
+  const handleAddAddress = (event) => {
+    event.preventDefault();
+
+    const body = {
+      street: form.street,
+      number: form.number,
+      neighbourhood: form.neighbourhood,
+      city: form.city,
+      state: form.state,
+      complement: form.complement,
+    };
+
+    axios
+      .put(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/address`,
+        body,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        localStorage.removeItem(token);
+
+        localStorage.setItem("token", response.user.token);
+        history.push("/feed");
+      })
+      .catch((error) => {
+        alert("Erro ao cadastrar endereço");
+      });
+  };
+
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <Header showBackButton />
+        <RegisterAddressContainer>
+          <Typography component="h1" variant="h5">
+            Meu endereço
+          </Typography>
+          <FormStyled>
+            <TextField
+              onChange={onChange}
+              variant="outlined"
+              fullWidth
+              id="logradouro"
+              label="Rua / Avenida"
+              name="street"
+              value={form.street}
+              required
+            />
+            <TextField
+              onChange={onChange}
+              variant="outlined"
+              fullWidth
+              id="numero"
+              label="Número"
+              name="number"
+              type="number"
+              value={form.number}
+              required
+            />
+            <TextField
+              onChange={onChange}
+              variant="outlined"
+              fullWidth
+              id="bairro"
+              label="Bairro"
+              name="neighbourhood"
+              value={form.neighbourhood}
+              required
+            />
+            <TextField
+              onChange={onChange}
+              variant="outlined"
+              fullWidth
+              id="cidade"
+              label="Cidade"
+              name="city"
+              value={form.city}
+              required
+            />
+            <TextField
+              onChange={onChange}
+              variant="outlined"
+              fullWidth
+              id="estado"
+              label="Estado"
+              name="state"
+              value={form.state}
+              required
+            />
+            <TextField
+              onChange={onChange}
+              variant="outlined"
+              fullWidth
+              id="complemento"
+              label="Apto / Bloco"
+              name="complement"
+              value={form.complement}
+            />
+            <Button
+              onClick={handleAddAddress}
+              color="primary"
+              type="submit"
+              fullWidth
+              variant="contained"
+            >
+              Salvar
+            </Button>
+          </FormStyled>
+        </RegisterAddressContainer>
+      </ThemeProvider>
+    </div>
+  );
+}
+
+export default RegisterAddressPage;
diff --git a/src/Screens/RegisterAddressPage/styles.js b/src/Screens/RegisterAddressPage/styles.js
new file mode 100644
index 0000000..c9312f8
--- /dev/null
+++ b/src/Screens/RegisterAddressPage/styles.js
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const RegisterAddressContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 360px;
+  height: 500px;
+  margin: 0 auto;
+`;
+
+export const FormStyled = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 85vw;
+  height: 500px;
+`;
diff --git a/src/Screens/RestaurantPage/RestaurantPage.js b/src/Screens/RestaurantPage/RestaurantPage.js
new file mode 100644
index 0000000..73239df
--- /dev/null
+++ b/src/Screens/RestaurantPage/RestaurantPage.js
@@ -0,0 +1,114 @@
+import React, { useContext, useEffect } from "react";
+import GlobalStateContext from "../../global/GlobalStateContext";
+import axios from 'axios'
+import { useParams } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Card,
+  CardContent,
+  CardMedia,
+  Typography,
+} from "@material-ui/core";
+import DishCard from "../../components/DishCard/DishCard";
+import Header from "../../components/Header/Header";
+
+const useStyles = makeStyles({
+  mainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  detailCardContainer: {
+    width: 328,
+    marginTop: 8,
+  },
+  image: {
+    height: 120,
+  },
+  middleContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+});
+
+function RestaurantPage() {
+  const params = useParams();
+  const classes = useStyles();
+  const { states, setters } = useContext(GlobalStateContext);
+
+  useEffect(() => {
+    getRestaurantDetail();
+  }, []);
+
+  const getRestaurantDetail = () => {
+    const token = localStorage.getItem("token");
+
+    axios
+      .get(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/restaurants/${params.id}`,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        setters.setRestaurantDetail(response.data.restaurant)
+      })
+      .catch((error) => {
+        console.error(error.message)
+        alert("Erro ao requisitar os detalhes")
+      });
+  };
+
+  const productsArray = states.restaurantDetail.products;
+  
+  return (
+    <div className={classes.mainContainer}>
+      <Header title={"Restaurante"} showBackButton />
+      <div className={classes.detailCardContainer}>
+        <Card>
+          <CardMedia
+            className={classes.image}
+            image={states.restaurantDetail.logoUrl}
+          />
+          <CardContent>
+            <Typography gutterBottom variant="body1">
+              {states.restaurantDetail.name}
+            </Typography>
+            <div className={classes.middleContainer}>
+              <Typography variant="body1" color="textSecondary">
+                {states.restaurantDetail.deliveryTime} min
+              </Typography>
+              <Typography variant="body1" color="textSecondary">
+                Frete R${states.restaurantDetail.shipping},00
+              </Typography>
+            </div>
+            <Typography variant="body1" color="textSecondary">
+              {states.restaurantDetail.address}
+            </Typography>
+          </CardContent>
+        </Card>
+      </div>
+      <div>
+        {productsArray &&
+          productsArray.map((product) => {
+            return (
+              <DishCard
+                key={product.id}
+                id={product.id}
+                name={product.name}
+                description={product.description}
+                photoUrl={product.photoUrl}
+                category={product.category}
+                price={product.price}
+                restaurantId={params.id}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export default RestaurantPage;
diff --git a/src/Screens/SearchBarPage/SearchBarPage.js b/src/Screens/SearchBarPage/SearchBarPage.js
new file mode 100644
index 0000000..12ee421
--- /dev/null
+++ b/src/Screens/SearchBarPage/SearchBarPage.js
@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+import useForm from "../../hooks/useForm";
+import { Paper, InputBase, IconButton } from "@material-ui/core";
+import axios from "axios";
+import { MainSearch } from "./styles";
+import SearchIcon from "@material-ui/icons/Search";
+import RestaurantCard from "../../components/RestaurantCard/RestaurantCard";
+import Header from "../../components/Header/Header";
+import { goToSearch } from "../../route/coordinator";
+import { useHistory } from "react-router";
+
+function SearchBarPage() {
+  const history = useHistory();
+  const [restaurants, setRestaurants] = useState(0);
+  const [filteredRestaurants, setFilteredRestaurants] = useState([]);
+  const [form, onChange] = useForm({
+    search: "",
+  });
+  useEffect(() => {
+    getListaRestaurants();
+  }, []);
+
+  const getListaRestaurants = () => {
+    const token = localStorage.getItem("token");
+
+    axios
+      .get(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/restaurants`,
+        {
+          headers: {
+            auth: token,
+          },
+        }
+      )
+      .then((response) => {
+        setRestaurants(response.data.restaurants);
+      })
+      .catch((error) => {
+        console.log(error.messenge);
+      });
+  };
+
+  console.log(restaurants);
+
+  const onSubmit = () => {
+    const listFilter =
+      restaurants &&
+      restaurants.filter((restaurant) => {
+        if (restaurant.name.toLowerCase().includes(form.search.toLowerCase())) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+    setFilteredRestaurants(listFilter);
+  };
+
+  return (
+    <MainSearch>
+      <Header title={"Busca"} showBackButton />
+      <Paper color="primary" onClick={() => goToSearch(history)}>
+          <IconButton type="submit">
+            <SearchIcon />
+          </IconButton>
+          <InputBase placeholder="Restaurante" />
+        </Paper>
+      {filteredRestaurants &&
+        filteredRestaurants.map((restaurant) => {
+          console.log(restaurant);
+          return (
+            <RestaurantCard
+              key={restaurant.id}
+              id={restaurant.id}
+              name={restaurant.name}
+              description={restaurant.description}
+              address={restaurant.address}
+              shipping={restaurant.shipping}
+              deliveryTime={restaurant.deliveryTime}
+              logoUrl={restaurant.logoUrl}
+              category={restaurant.category}
+            />
+          );
+        })}
+    </MainSearch>
+  );
+}
+
+export default SearchBarPage;
diff --git a/src/Screens/SearchBarPage/styles.js b/src/Screens/SearchBarPage/styles.js
new file mode 100644
index 0000000..dc36c0b
--- /dev/null
+++ b/src/Screens/SearchBarPage/styles.js
@@ -0,0 +1,24 @@
+import styles from "styled-components"
+
+export const SearchPage = styles.form`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 328px;
+    height: 56px;
+    margin: 8px 16px;
+    border-radius: 2px;
+    border: 1px solid black;
+`
+
+export const InputSearch = styles.input`
+    border: transparent;
+    height: 50px;
+    width: 90%;
+    outline: none;
+`
+
+export const MainSearch = styles.div`
+    width: 360px;
+    height: 640px;
+`
\ No newline at end of file
diff --git a/src/Screens/SignUpPage/SignUpPage.js b/src/Screens/SignUpPage/SignUpPage.js
new file mode 100644
index 0000000..ddb7579
--- /dev/null
+++ b/src/Screens/SignUpPage/SignUpPage.js
@@ -0,0 +1,143 @@
+import React, { useEffect } from "react";
+import { SignupContainer, FormStyled } from "./styles";
+import Logo from "../../img/logo-future-eats-invert.png";
+import useForm from "../../hooks/useForm";
+import axios from "axios";
+import { useHistory } from "react-router";
+import Header from "../../components/Header/Header";
+
+// MATERIAL UI - IMPORTS
+import TextField from "@material-ui/core/TextField";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+
+function SignUpPage() {
+  const history = useHistory();
+  // const [hasAdress, setHasAdress] = useState("");
+  const [form, onChange] = useForm({
+    name: "",
+    email: "",
+    cpf: "",
+    password: "",
+  });
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      history.push("/");
+    }
+  }, [history]);
+
+  const handleSignup = async (event) => {
+    event.preventDefault();
+
+    const body = {
+      name: form.nome,
+      email: form.email,
+      cpf: form.cpf,
+      password: form.senha,
+    };
+
+    try {
+      const response = await axios.post(
+        `https://us-central1-missao-newton.cloudfunctions.net/futureEatsA/signup`,
+        body
+      );
+      console.log("RESPONSE", response);
+      localStorage.setItem("token", response.data.token);
+
+      // setHasAdress(response.user.hasAdress)
+      // console.log("HAS Adress", response.user.hasAdress);
+      history.push("/signup/address");
+    } catch (error) {
+      alert("Cadastro falhou, tente novamente.");
+      console.error(error);
+    }
+  };
+
+  const goToLoginPage = () => {
+    history.push("/login");
+  };
+
+  return (
+    <div>
+      <Header showBackButton />
+      <SignupContainer>
+        <img src={Logo} alt="logo" />
+        <br />
+        <Typography align="center" component="h1" variant="h5">
+          Cadastrar
+        </Typography>
+        <FormStyled>
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            id="nome"
+            label="Nome"
+            name="nome"
+            value={form.nome}
+            required
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            id="email"
+            label="E-mail"
+            name="email"
+            value={form.email}
+            required
+          />
+          <TextField
+            inputProps={{ pattern: "[0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}" }}
+            onChange={onChange}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            id="cpf"
+            label="CPF"
+            name="cpf"
+            value={form.cpf}
+            required
+          />
+          <TextField
+            onChange={onChange}
+            variant="outlined"
+            margin="normal"
+            fullWidth
+            name="senha"
+            label="Senha"
+            type="password"
+            id="senha"
+            value={form.senha}
+            required
+          />
+          <br />
+          <Button
+            onClick={handleSignup}
+            color="primary"
+            fullWidth
+            variant="contained"
+          >
+            Criar
+          </Button>
+          <Grid container>
+            <Grid item>
+              <br />
+              <Link align="center" onClick={goToLoginPage} variant="body2">
+                {"Já possui cadastro? Clique aqui."}
+              </Link>
+            </Grid>
+          </Grid>
+        </FormStyled>
+      </SignupContainer>
+    </div>
+  );
+}
+
+export default SignUpPage;
diff --git a/src/Screens/SignUpPage/styles.js b/src/Screens/SignUpPage/styles.js
new file mode 100644
index 0000000..ae49905
--- /dev/null
+++ b/src/Screens/SignUpPage/styles.js
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const SignupContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 540px;
+  margin: 0 auto;
+`;
+
+export const FormStyled = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/ActiveOrder/ActiveOrder.js b/src/components/ActiveOrder/ActiveOrder.js
new file mode 100644
index 0000000..c0a2a65
--- /dev/null
+++ b/src/components/ActiveOrder/ActiveOrder.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { ActiveOrderContainer } from "./styles";
+
+import AccessTimeIcon from "@material-ui/icons/AccessTime";
+
+function ActiveOrder() {
+  return (
+    <ActiveOrderContainer>
+      <div>
+        <AccessTimeIcon />
+      </div>
+      <div>
+        <p>Pedido em andamento</p>
+        <p>Nome do restaurante</p>
+        <p>SUBTOTAL R$20,00</p>
+      </div>
+    </ActiveOrderContainer>
+  );
+}
+
+export default ActiveOrder;
diff --git a/src/components/ActiveOrder/styles.js b/src/components/ActiveOrder/styles.js
new file mode 100644
index 0000000..ec6091c
--- /dev/null
+++ b/src/components/ActiveOrder/styles.js
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const ActiveOrderContainer = styled.div`
+  width: 360px;
+  height: 118px;
+  background-color: #5cb646;
+  margin: 99px 0 49px;
+  padding: 24px;
+`;
diff --git a/src/components/DishCard/DishCard.js b/src/components/DishCard/DishCard.js
new file mode 100644
index 0000000..2cae343
--- /dev/null
+++ b/src/components/DishCard/DishCard.js
@@ -0,0 +1,95 @@
+import React, { useState, useContext } from 'react';
+import { useHistory } from 'react-router';
+import { CardContainer, DishImage, CardDetailContainer, Text16, Text12, CardActionContainer, ModalBodyContainer, StyledSelect } from "./styled";
+import { Button, MenuItem, Modal } from '@material-ui/core';
+import GlobalStateContext from "../../global/GlobalStateContext";
+
+function DishCard(props) {
+    const history = useHistory();
+    const { states, setters } = useContext(GlobalStateContext);
+    const [openModal, setOpenModal] = useState(false)
+    const [productQuantity, setProductQuantity] = useState(0);
+
+    const handleOpenModal = () => {
+        setOpenModal(true)
+    }
+
+    const handleCloseModal = () => {
+        setOpenModal(false)
+    }
+
+    const handleQuantityChange = (event) => {
+        setProductQuantity(event.target.value);
+    };
+
+    const cartItem = {
+        id: `${props.id}`,
+        name: `${props.name}`,
+        description: `${props.description}`,
+        photoUrl: `${props.photoUrl}`,
+        category: `${props.category}`,
+        price: `${props.price}`,
+        productQuantity: productQuantity,
+        restaurantId: `${props.restaurantId}`,
+    }
+
+    const addItemToCart = (newItem) => {
+        if (newItem.productQuantity != 0) {
+            let newCart = [...states.cart]
+            newCart.push({ newItem })
+            setters.setCart(newCart)
+            alert(`${newItem.productName} foi adicionado ao seu carrinho!`)
+            setOpenModal(false)
+        } else {
+            alert("A quantidade não pode ser sero!")
+        }
+    }
+    console.log("CARRINHO", states.cart)
+
+    const modalBody = (
+        <ModalBodyContainer>
+            <p>Selecione a quantidade desejada</p>
+            <div>
+                <StyledSelect
+                    id="demo-simple-select-disabled"
+                    value={productQuantity}
+                    onChange={handleQuantityChange}
+                >
+                    <MenuItem value="">
+                        <em>0</em>
+                    </MenuItem>
+                    <MenuItem value={1}>1</MenuItem>
+                    <MenuItem value={2}>2</MenuItem>
+                    <MenuItem value={3}>3</MenuItem>
+                    <MenuItem value={4}>4</MenuItem>
+                    <MenuItem value={5}>5</MenuItem>
+                </StyledSelect>
+            </div>
+            <Button color="primary" onClick={() => addItemToCart(cartItem)}>adicionar ao carrinho</Button>
+        </ModalBodyContainer>
+    )
+
+    return (
+        <CardContainer>
+            <DishImage src={props.photoUrl} />
+            <CardDetailContainer>
+                <Text16>{props.name}</Text16>
+                <Text12>{props.description}</Text12>
+                <Text16>R${props.price}</Text16>
+            </CardDetailContainer>
+            <CardActionContainer>
+                <button>{productQuantity}</button>
+                <div>
+                    <button onClick={handleOpenModal}>
+                        Adicionar
+                    </button>
+                    <Modal open={openModal} onClose={handleCloseModal} >
+                        {modalBody}
+                    </Modal>
+                </div>
+            </CardActionContainer>
+        </CardContainer>
+    );
+}
+
+export default DishCard
\ No newline at end of file
diff --git a/src/components/DishCard/styled.js b/src/components/DishCard/styled.js
new file mode 100644
index 0000000..7565a00
--- /dev/null
+++ b/src/components/DishCard/styled.js
@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+import { Select } from '@material-ui/core';
+
+export const CardContainer = styled.div`
+    width: 328px;
+    height: 112px;
+    margin: 7px 0 0;
+    border-radius: 8px;
+    border: solid 1px grey;
+    display: flex;
+`
+export const DishImage = styled.img`
+    width: 96px;
+    height: 112px;
+    object-fit: cover;
+    border-radius: 8px 0 0 8px;
+`
+export const CardDetailContainer = styled.div`
+    width: 216px;
+    height: 112px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    padding-left: 16px;
+`
+export const Text16 = styled.p`
+    font-size: 16px;
+    margin: 0;
+`
+export const Text12 = styled.p`
+    font-size: 12px;
+    margin: 0;
+`
+
+export const CardActionContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+`
+
+export const ModalBodyContainer = styled.div`
+    background: white;
+    margin-top: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+`
+
+
+export const StyledSelect = styled(Select)`
+    width: 280px;
+    variant="outlined"
+`
\ No newline at end of file
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
new file mode 100644
index 0000000..f6d2b32
--- /dev/null
+++ b/src/components/Footer/Footer.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { MainDiv, GoCartDiv, GoHomeDiv, GoProfileDiv } from "./styled";
+import theme from "../../constants/theme";
+import { Route, Switch, useHistory } from "react-router-dom";
+import { goToFeed, goToCart, goToProfile } from "../../route/coordinator"
+
+import { ThemeProvider } from "@material-ui/core/styles";
+import PersonOutlineOutlinedIcon from "@material-ui/icons/PersonOutlineOutlined";
+import ShoppingCartOutlinedIcon from "@material-ui/icons/ShoppingCartOutlined";
+import HomeOutlinedIcon from "@material-ui/icons/HomeOutlined";
+
+function Footer() {
+  const history = useHistory();
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Switch>
+        <MainDiv>
+          <Route exact path={["/login", "/", "/feed"]}>
+            <GoHomeDiv onClick={() => goToFeed(history)}>
+              <HomeOutlinedIcon color="primary" />
+            </GoHomeDiv>
+            <GoCartDiv onClick={() => goToCart(history)}>
+              <ShoppingCartOutlinedIcon />
+            </GoCartDiv>
+            <GoProfileDiv onClick={() => goToProfile(history)}>
+              <PersonOutlineOutlinedIcon />
+            </GoProfileDiv>
+          </Route>
+          <Route exact path="/cart">
+            <GoHomeDiv onClick={() => goToFeed(history)}>
+              <HomeOutlinedIcon />
+            </GoHomeDiv>
+            <GoCartDiv onClick={() => goToCart(history)}>
+              <ShoppingCartOutlinedIcon color="primary" />
+            </GoCartDiv>
+            <GoProfileDiv onClick={() => goToProfile(history)}>
+              <PersonOutlineOutlinedIcon />
+            </GoProfileDiv>
+          </Route>
+          <Route exact path="/perfil">
+            <GoHomeDiv onClick={() => goToFeed(history)}>
+              <HomeOutlinedIcon />
+            </GoHomeDiv>
+            <GoCartDiv onClick={() => goToCart(history)}>
+              <ShoppingCartOutlinedIcon />
+            </GoCartDiv>
+            <GoProfileDiv onClick={() => goToProfile(history)}>
+              <PersonOutlineOutlinedIcon color="primary" />
+            </GoProfileDiv>
+          </Route>
+        </MainDiv>
+      </Switch>
+    </ThemeProvider>
+  );
+}
+
+export default Footer;
diff --git a/src/components/Footer/styled.js b/src/components/Footer/styled.js
new file mode 100644
index 0000000..9fe82f1
--- /dev/null
+++ b/src/components/Footer/styled.js
@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const MainDiv = styled.footer`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 360px;
+  height: 49px;
+  border-top: 1px solid grey;
+  background: white;
+  position: fixed;
+  bottom: 0px;
+`;
+
+export const GoHomeDiv = styled.div`
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    color: #5cb646;
+  }
+`;
+
+export const GoCartDiv = styled.div`
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    color: #5cb646;
+  }
+`;
+
+export const GoProfileDiv = styled.div`
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    color: #5cb646;
+  }
+`;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..d7c0169
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { MainDiv, HeaderTitleDiv, StyelBackButton } from "./styled";
+
+function Header({ showBackButton, title }) {
+  const history = useHistory();
+
+  const goBack = () => {
+    history.goBack();
+  };
+
+  return (
+    <MainDiv>
+      <HeaderTitleDiv>
+        {showBackButton && <StyelBackButton onClick={goBack} />}
+        {title}
+      </HeaderTitleDiv>
+    </MainDiv>
+  );
+}
+
+export default Header;
diff --git a/src/components/Header/styled.js b/src/components/Header/styled.js
new file mode 100644
index 0000000..7a743c8
--- /dev/null
+++ b/src/components/Header/styled.js
@@ -0,0 +1,23 @@
+import styled from "styled-components"
+import ArrowBackIosOutlinedIcon from "@material-ui/icons/ArrowBackIosOutlined";
+
+export const MainDiv = styled.div`
+    display: flex;
+    width: 360px;
+    height: 64px;
+    justify-content: center;
+    align-items: center;
+`
+
+export const HeaderTitleDiv = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 175px;
+    height: 44px;
+`
+
+export const StyelBackButton = styled(ArrowBackIosOutlinedIcon)`
+    position: absolute;
+    left: 16px;
+`
\ No newline at end of file
diff --git a/src/components/OerdersHistoryCard/OrdersHistoryCard.js b/src/components/OerdersHistoryCard/OrdersHistoryCard.js
new file mode 100644
index 0000000..dc18c8b
--- /dev/null
+++ b/src/components/OerdersHistoryCard/OrdersHistoryCard.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function OrdersHistoryCard() {
+    return(
+        <div>
+            OrdersHistoryCard
+        </div>
+    )
+}
+
+export default OrdersHistoryCard;
\ No newline at end of file
diff --git a/src/components/RestaurantCard/RestaurantCard.js b/src/components/RestaurantCard/RestaurantCard.js
new file mode 100644
index 0000000..97a41a4
--- /dev/null
+++ b/src/components/RestaurantCard/RestaurantCard.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { useHistory } from "react-router-dom"
+import { Card, CardActionArea, CardMedia, CardContent, Typography } from '@material-ui/core'
+import { goToRestaurant } from '../../route/coordinator';
+
+const useStyles = makeStyles({
+    container: {
+        width: 328,
+        marginTop: 8,
+    },
+    image: {
+        height: 120,
+    },
+    bottomContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+    }
+});
+
+const RestaurantCard = (props) => {
+    const classes = useStyles()
+    const history = useHistory()
+
+    return (
+        <Card className={classes.container}>
+            <CardActionArea onClick={() => goToRestaurant(history, props.id)}>
+                <CardMedia
+                    className={classes.image}
+                    image={props.logoUrl}
+                />
+                <CardContent>
+                    <Typography
+                        gutterBottom
+                        variant="body1"
+                    >
+                        {props.name}
+                    </Typography>
+                    <div className={classes.bottomContainer}>
+                        <Typography
+                            variant="body1"
+                            color="textSecondary"
+                        >
+                            {props.deliveryTime} min
+                        </Typography>
+                        <Typography
+                            variant="body1"
+                            color="textSecondary"
+                        >
+                            Frete R${props.shipping},00
+                        </Typography>
+                    </div>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    )
+}
+
+export default RestaurantCard;
\ No newline at end of file
diff --git a/src/constants/colors.js b/src/constants/colors.js
new file mode 100644
index 0000000..815a852
--- /dev/null
+++ b/src/constants/colors.js
@@ -0,0 +1 @@
+export const primaryColor = "#5cb646";
diff --git a/src/constants/theme.js b/src/constants/theme.js
new file mode 100644
index 0000000..9bcda10
--- /dev/null
+++ b/src/constants/theme.js
@@ -0,0 +1,13 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+import { primaryColor } from "./colors";
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: primaryColor,
+      contrastText: "#000000",
+    },
+  },
+});
+
+export default theme;
diff --git a/src/global/GlobalState.js b/src/global/GlobalState.js
new file mode 100644
index 0000000..c4bf171
--- /dev/null
+++ b/src/global/GlobalState.js
@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import GlobalStateContext from './GlobalStateContext'
+
+const GlobalState = (props) => {
+    const [restaurantDetail, setRestaurantDetail] = useState([])
+    const [dishes, setDishes] = useState([])
+    const [cart, setCart] = useState([])
+
+    const states = { cart, restaurantDetail }
+    const setters = { setCart, setRestaurantDetail }
+
+    const data = { states, setters }
+
+    return (
+        <GlobalStateContext.Provider value={data}>
+            {props.children}
+        </GlobalStateContext.Provider>
+    )
+}
+
+export default GlobalState
\ No newline at end of file
diff --git a/src/global/GlobalStateContext.js b/src/global/GlobalStateContext.js
new file mode 100644
index 0000000..7e4112c
--- /dev/null
+++ b/src/global/GlobalStateContext.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+const GlobalStateContext = React.createContext();
+
+export default GlobalStateContext;
\ No newline at end of file
diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js
new file mode 100644
index 0000000..22dc509
--- /dev/null
+++ b/src/hooks/useForm.js
@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+const useForm = (initialValues) => {
+  const [form, setForm] = useState(initialValues);
+
+  const onChange = (event) => {
+    const { value, name } = event.target;
+    setForm({ ...form, [name]: value });
+  };
+
+  return [form, onChange];
+};
+
+export default useForm;
+
diff --git a/src/hooks/useProtectRouters.js b/src/hooks/useProtectRouters.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/hooks/useProtectedPage.js b/src/hooks/useProtectedPage.js
new file mode 100644
index 0000000..df4b226
--- /dev/null
+++ b/src/hooks/useProtectedPage.js
@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useHistory } from "react-router-dom";
+
+function useProtectedPage() {
+  const history = useHistory();
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      history.push("/login");
+    }
+  }, [history]);
+}
+
+export default useProtectedPage;
diff --git a/src/img/logo-future-eats-invert.png b/src/img/logo-future-eats-invert.png
new file mode 100644
index 0000000..975540a
Binary files /dev/null and b/src/img/logo-future-eats-invert.png differ
diff --git a/src/img/logo-future-eats-invert@2x.png b/src/img/logo-future-eats-invert@2x.png
new file mode 100644
index 0000000..5bc60e0
Binary files /dev/null and b/src/img/logo-future-eats-invert@2x.png differ
diff --git a/src/img/logo-future-eats-invert@3x.png b/src/img/logo-future-eats-invert@3x.png
new file mode 100644
index 0000000..318c9c2
Binary files /dev/null and b/src/img/logo-future-eats-invert@3x.png differ
diff --git a/src/index.js b/src/index.js
index f5185c1..6832e78 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -10,8 +9,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +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>
diff --git a/src/route/Routers.js b/src/route/Routers.js
new file mode 100644
index 0000000..1ed1d8d
--- /dev/null
+++ b/src/route/Routers.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import LoginPage from "../Screens/LoginPage/LoginPage";
+import SignUpPage from "../Screens/SignUpPage/SignUpPage";
+import FeedPage from "../Screens/FeedPage/FeedPage";
+import RegisterAddressPage from "../Screens/RegisterAddressPage/RegisterAddressPage";
+import RestaurantPage from "../Screens/RestaurantPage/RestaurantPage";
+import CartPage from "../Screens/CartPage/CartPage";
+import PerfilPage from "../Screens/PerfilPage/PerfilPage";
+import EditPerfilPage from "../Screens/EditPerfilPage/EditPerfilPage";
+import EditAddressPage from "../Screens/EditAddressPage/EditAddressPage";
+import SearchBarPage from "../Screens/SearchBarPage/SearchBarPage";
+import LoadingPage from "../Screens/LoadingPage/LoadingPage";
+
+function Routers() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path={"/"}>
+          <LoadingPage />
+        </Route>
+        <Route exact path={"/feed"}>
+          <FeedPage />
+        </Route>
+        <Route exact path="/login">
+          <LoginPage />
+        </Route>
+        <Route exact path="/search">
+          <SearchBarPage />
+        </Route>
+        <Route exact path="/signup">
+          <SignUpPage />
+        </Route>
+        <Route exact path="/signup/address">
+          <RegisterAddressPage />
+        </Route>
+        <Route exact path="/restaurant/:id">
+          <RestaurantPage />
+        </Route>
+        <Route exact path="/cart">
+          <CartPage />
+        </Route>
+        <Route exact path="/perfil">
+          <PerfilPage />
+        </Route>
+        <Route exact path="/perfil/edit">
+          <EditPerfilPage />
+        </Route>
+        <Route exact path="/perfil/address">
+          <EditAddressPage />
+        </Route>
+        <Route>
+          <div>Página não encontrada</div>
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
+}
+
+export default Routers;
diff --git a/src/route/coordinator.js b/src/route/coordinator.js
new file mode 100644
index 0000000..d984bc7
--- /dev/null
+++ b/src/route/coordinator.js
@@ -0,0 +1,35 @@
+export const goToLogin = (history) => {
+    history.push("/login")
+}
+
+export const goToFeed = (history) => {
+    history.push("/feed")
+}
+
+export const goToSignUp = (history) => {
+    history.push("/signup")
+}
+
+export const goToRestaurant = (history, id) => {
+    history.push(`/restaurant/${id}`)
+}
+
+export const goToCart = (history) => {
+  history.push("/cart");
+};
+
+export const goToProfile = (history) => {
+  history.push("/perfil");
+};
+
+export const goToEditProfile = (history) => {
+  history.push("/perfil/edit");
+};
+
+export const goToEditAddress = (history) => {
+  history.push("/perfil/address");
+};
+
+export const goToSearch = (history) => {
+  history.push("/search");
+};
\ No newline at end of file
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
deleted file mode 100644
index b04b771..0000000
--- a/src/serviceWorker.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then(registration => {
-        registration.unregister();
-      })
-      .catch(error => {
-        console.error(error.message);
-      });
-  }
-}
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 74b1a27..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';