diff --git a/README.md b/README.md
index 84c7a15..de37761 100644
--- a/README.md
+++ b/README.md
@@ -1,97 +1,2 @@
-# React Uber Eats
 
-## Task
-Follow this [Video guide](https://www.youtube.com/playlist?list=PL7FuXFaDeEX0MZnk9tC1tNfjoN4hnc6tl)(p. 1 - 4)
-
-To use `cc` alias as author follow [this instructions](./alias-README.md) - *this is not required, you may create files manually by self*
-
-Implement [Uber eats](https://www.ubereats.com/en-UA/feed/?pl=JTdCJTIyYWRkcmVzcyUyMiUzQSUyMkt5aXYlMjIlMkMlMjJyZWZlcmVuY2UlMjIlM0ElMjJDaElKQlVWYTRVN1AxRUFSX2tZQkY5SXhTWFklMjIlMkMlMjJyZWZlcmVuY2VUeXBlJTIyJTNBJTIyZ29vZ2xlX3BsYWNlcyUyMiUyQyUyMmxhdGl0dWRlJTIyJTNBNTAuNDQ5ODU4NyUyQyUyMmxvbmdpdHVkZSUyMiUzQTMwLjUyMzY0OTYlN0Q%3D)
-using [this design](https://www.figma.com/file/cABVXdvRdGiXYzffeOE4gG/Uber-Eats-Adaptive-Dev-Copy?node-id=0%3A1)
-
-Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
-
-1. Implement list of restaurants on the `Home` page
-    - use `redux` to store data
-    - use `redux-thunk` to handle async actions
-    - create separate component for restaurant card
-    - use https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants endpoint to fetch data
-    - accept optional query parameter `location`: `london|kyiv` 
-    - `RestaurantCard` should be clickable fully (not only the image) 
-2. Implement basic header markup
-3. Implement footer
-4. Add functionality and styles for mobile and tablet versions
-    - `Location`, `Deliver now` and `Search` should be replaced whith buttons on the small screens.
-    Block with inputs should apper below the header after click on the button. 
-5. Implement `RestaurantPage`
-    - use `uuid` in the URL
-    - fetch data from https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/:uuid
-6. Implement modal window for selecting a meal
-    - fetch data for modal from https://mate-uber-eats-api.herokuapp.com/api/v1/menu-items/:uuid
-    - open it when clicking on a meal
-    - close it on `X` or after adding
-    - (\*) close it on outside click
-    - (\*\*) use a unique link for a modal
-
-### Extra Tasks
-1. Implement dropdown to select location
-    - fetch data from https://mate-uber-eats-api.herokuapp.com/api/v1/locations
-    - use data from endpoint to render dropdown options
-    - select first option by default
-    - load restaurants only after you receive this response, use id of location in query params(https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants?location=:uuid)
-  - reload restaurants with other query when select item in dropdown
-2. Implement frontend search
-    - filter current list of restaurants on search input change
-    - use debounce
-    - do not save additional list in store, use selectors instead
-    - (\*) redirect to home page if user search on restaurant page
-3. Add functionality to the select meal modal
-    - add ability to change meal count
-    - render correct controls for customization options:
-        1. if section(item of customizationsList) minPermitted === maxPermitted === 1 - render options as radio button
-        2. if option maxPermitted > 2 - render + button(change to +, - and count if at least 1 selected)
-        3. else - render option as checkbox
-    - make inputs controlled(save selected customizations)
-    - change overal price after add remove customizations/after change meal count(if burger cost $10 and select additional chease for $2, then change count of meal to 3, price should be $36(not $32))
-4. Implement a `Basket`(so far as in [real uber](https://www.ubereats.com), design will be added later)
-    - show basket button in header instead of Sign in if there are at least 1 item in basket
-    - open basket sidebar when click on busket button, close on click outside or close icon
-    - add item to basket when click submit in MenuItemModal
-    - show list added items in basket
-    - add ability to change item count, remove item 
-    - when user click edit on item - open MenuItemModal with additional remove button. After submit, edit current item instead of add new one
-    - clear basket when user click order button
-5. Restore user session after close-open tab
-    - subscribe to store and save serialized state in localStorage on each update(or find another way)
-    - check localStorage for the presence of a saved state and use it in createStore
-    - (\*) use react-router-redux to save route in redux, user should be on the same page as before when open your website second time
-6. Rewrite the application on [TypeScript](https://www.typescriptlang.org/).
-    - write interfaces for Location, Restaurant, RestaurantDetails, MenuItem, CustomizationSection, CustomizationOption etc.
-
-## Workflow
-- Fork the repository with task
-- Clone forked repository 
-    ```bash
-    git clone git@github.com:<user_name>/<task_repository>.git
-    ```
-- Run `npm install` to install dependencies.
-- Then develop
-
-## Development mode 
-- Run `npm start` to start development server on `http://localhost:3000`
-    When you run server the command line window will no longer be available for 
-    writing commands until you stop server (`ctrl + c`). All other commands you 
-    need to run in new command line window.
-- Follow [HTML, CSS styleguide](https://mate-academy.github.io/style-guides/htmlcss.html)
-- Follow [the simplified JS styleguide](https://mate-academy.github.io/style-guides/javascript-standard-modified)
-- run `npm run lint` to check code style
-- When you finished add correct `homepage` to `package.json` and run `npm run deploy` 
-- Add links to your demo in readme.md.
-  - `[DEMO LINK](https://<your_account>.github.io/<repo_name>/)` - this will be a 
-  link to your index.html
-- Commit and push all recent changes.
-- Create `Pull Request` from forked repo `(<branch_name>)` to original repo 
-(`master`).
-- Add a link at `PR` to Google Spreadsheets.
-
-## Project structure
-You should be writing your code in `src/` directory.
+[Link](https://andrii-pavlenko.github.io/react_uber-eats/)
diff --git a/package.json b/package.json
index 7bd01de..8a44561 100755
--- a/package.json
+++ b/package.json
@@ -7,11 +7,17 @@
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
+    "classnames": "^2.2.6",
+    "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.3",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@mate-academy/eslint-config-react": "*",
diff --git a/public/images/apple-store.png b/public/images/apple-store.png
new file mode 100644
index 0000000..63f5795
Binary files /dev/null and b/public/images/apple-store.png differ
diff --git a/public/images/arrow.svg b/public/images/arrow.svg
new file mode 100644
index 0000000..2576a2a
--- /dev/null
+++ b/public/images/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4175 0L0 1.34583L7 8L14 1.34583L12.5825 0L7 5.30417L1.4175 0Z" fill="white"/>
+</svg>
diff --git a/public/images/close.svg b/public/images/close.svg
new file mode 100644
index 0000000..c784d0c
--- /dev/null
+++ b/public/images/close.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="black"/>
+</svg>
diff --git a/public/images/facebook.svg b/public/images/facebook.svg
new file mode 100644
index 0000000..22565b3
--- /dev/null
+++ b/public/images/facebook.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1164 0H0.883093C0.395706 0 0 0.394915 0 0.883093V15.1164C0 15.6046 0.395706 16 0.883093 16H8.54587V9.80386H6.46091V7.38879H8.54587V5.60785C8.54587 3.54159 9.80755 2.41586 11.6512 2.41586C12.5351 2.41586 13.293 2.48199 13.5141 2.5107V4.67049L12.2353 4.67101C11.2328 4.67101 11.0395 5.1476 11.0395 5.84654V7.388H13.4311L13.1184 9.80281H11.0392V15.9992H15.1161C15.604 15.9992 16 15.6032 16 15.1164V0.882566C15.9997 0.394915 15.6043 0 15.1164 0Z" fill="white"/>
+</svg>
diff --git a/public/images/footer-logo.svg b/public/images/footer-logo.svg
new file mode 100644
index 0000000..c3894d1
--- /dev/null
+++ b/public/images/footer-logo.svg
@@ -0,0 +1,4 @@
+<svg width="145" height="24" viewBox="0 0 145 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.8341 9.17115C64.682 9.17115 63.1554 10.8551 63.1554 13.44V22.922H59.8702V6.23213H63.1161V8.27016C63.5164 7.59468 64.0902 7.03857 64.7778 6.65947C65.4655 6.28037 66.242 6.09207 67.0269 6.1141H68.2072V9.17115H66.8341ZM57.6 14.5771C57.6 9.6 54.059 5.87803 49.2669 5.87803C48.1346 5.88572 47.0151 6.11721 45.9726 6.55919C44.9301 7.00117 43.9854 7.64491 43.1926 8.45338C42.3999 9.26185 41.7748 10.2191 41.3534 11.27C40.932 12.321 40.7225 13.4449 40.737 14.5771C40.737 19.5502 44.5731 23.3115 49.5777 23.3115C50.9757 23.3379 52.3595 23.0278 53.6125 22.4075C54.8656 21.7871 55.9511 20.8746 56.7777 19.7469L54.3934 18C53.8464 18.7634 53.1227 19.383 52.284 19.8058C51.4453 20.2285 50.5168 20.4419 49.5777 20.4275C48.2402 20.4212 46.9493 19.936 45.9388 19.0597C44.9283 18.1835 44.2651 16.9743 44.0695 15.6511H57.6079L57.6 14.5771ZM44.1403 13.0466C44.7266 10.501 46.7607 8.7777 49.2275 8.7777C51.6944 8.7777 53.7246 10.501 54.2754 13.0466H44.1403ZM30.3305 5.87803C29.2326 5.87896 28.1458 6.09744 27.1328 6.52086C26.1198 6.94428 25.2008 7.56424 24.4289 8.34492V0H21.1436V22.922H24.3895V20.8052C25.962 22.396 28.1016 23.2974 30.3384 23.3115C31.4986 23.3361 32.6522 23.1289 33.7313 22.7019C34.8104 22.2749 35.7935 21.6368 36.6228 20.8249C37.4521 20.0131 38.1109 19.0438 38.5607 17.974C39.0106 16.9042 39.2423 15.7553 39.2423 14.5948C39.2423 13.4342 39.0106 12.2854 38.5607 11.2155C38.1109 10.1457 37.4521 9.17644 36.6228 8.36458C35.7935 7.55271 34.8104 6.91458 33.7313 6.4876C32.6522 6.06062 31.4986 5.85338 30.3384 5.87803H30.3305ZM30.0944 20.3764C28.9493 20.3818 27.8284 20.047 26.8739 19.4144C25.9194 18.7818 25.1743 17.8798 24.7332 16.8231C24.2921 15.7663 24.1749 14.6024 24.3964 13.4789C24.6179 12.3554 25.1681 11.323 25.9773 10.5127C26.7864 9.70246 27.8181 9.15082 28.9413 8.92779C30.0644 8.70477 31.2286 8.82042 32.2859 9.26007C33.3433 9.69972 34.2462 10.4435 34.8801 11.3972C35.5141 12.3508 35.8504 13.4713 35.8466 14.6164C35.8476 15.3717 35.6995 16.1198 35.4107 16.8177C35.1219 17.5156 34.6981 18.1496 34.1636 18.6833C33.6292 19.217 32.9946 19.6399 32.2963 19.9278C31.598 20.2156 30.8497 20.3627 30.0944 20.3607V20.3764ZM9.04525 20.219C12.2164 20.219 14.6793 17.7875 14.6793 14.1443V0H18.0826V22.922H14.7187V20.7541C13.9328 21.5664 12.9902 22.2107 11.9481 22.6483C10.906 23.0858 9.78596 23.3074 8.65574 23.2997C3.76525 23.2997 0 19.7351 0 14.3292V0H3.46623V14.1639C3.46623 17.8269 5.82689 20.219 9.04525 20.219Z" fill="white"/>
+<path d="M76.3789 0H92.4589V3.93443H80.7225V9.52131H92.1323V13.322H80.7225V19.0033H92.4589V22.9377H76.3789V0ZM136.867 23.3508C141.797 23.3508 144.574 20.9902 144.574 17.7482C144.574 15.4387 142.93 13.7154 139.487 12.9679L135.848 12.2243C133.735 11.8308 133.07 11.4374 133.07 10.6505C133.07 9.63148 134.089 9.0059 135.966 9.0059C138 9.0059 139.507 9.55279 139.9 11.4334H144.165C143.933 7.89246 141.387 5.55541 136.225 5.55541C131.764 5.55541 128.632 7.39672 128.632 10.9652C128.632 13.4321 130.355 15.0374 134.073 15.8203L138.142 16.7607C139.747 17.0754 140.176 17.5082 140.176 18.1731C140.176 19.2315 138.964 19.8964 137.004 19.8964C134.542 19.8964 133.133 19.3495 132.586 17.4689H128.298C128.923 21.002 131.543 23.3508 136.867 23.3508ZM127.058 22.922H122.443C119.547 22.922 117.942 21.12 117.942 18.8459V9.83607H114.696V5.99606H117.958V1.17639H122.246V5.99606H127.058V9.83607H122.246V17.7482C122.246 18.6492 122.872 19.082 123.852 19.082H127.058V22.922ZM108.566 6.00394V7.53049C107.057 6.25411 105.142 5.55677 103.164 5.56328C101.981 5.53838 100.804 5.75002 99.7032 6.18579C98.6024 6.62156 97.5996 7.27269 96.7537 8.10102C95.9077 8.92935 95.2357 9.91821 94.7768 11.0096C94.318 12.1011 94.0817 13.2731 94.0817 14.4571C94.0817 15.641 94.318 16.813 94.7768 17.9045C95.2357 18.9959 95.9077 19.9848 96.7537 20.8131C97.5996 21.6414 98.6024 22.2925 99.7032 22.7283C100.804 23.1641 101.981 23.3757 103.164 23.3508C105.142 23.3594 107.058 22.6618 108.566 21.3836V22.9141H112.843V5.99606L108.566 6.00394ZM103.519 19.6367C102.493 19.6484 101.487 19.3549 100.628 18.7933C99.7692 18.2318 99.0969 17.4277 98.6964 16.4832C98.2958 15.5387 98.1852 14.4964 98.3784 13.4888C98.5716 12.4812 99.0601 11.5539 99.7816 10.8245C100.503 10.0952 101.425 9.59686 102.431 9.39285C103.436 9.18883 104.48 9.28834 105.428 9.67875C106.377 10.0691 107.188 10.7328 107.759 11.5854C108.33 12.438 108.634 13.4409 108.633 14.4669C108.64 15.1432 108.512 15.814 108.257 16.4405C108.002 17.0671 107.626 17.6369 107.149 18.1169C106.673 18.597 106.106 18.9778 105.481 19.2373C104.857 19.4968 104.187 19.6299 103.511 19.6289L103.519 19.6367Z" fill="#5FB709"/>
+</svg>
diff --git a/public/images/google-play.png b/public/images/google-play.png
new file mode 100644
index 0000000..cc9fc57
Binary files /dev/null and b/public/images/google-play.png differ
diff --git a/public/images/instagram.svg b/public/images/instagram.svg
new file mode 100644
index 0000000..7c3e6a0
--- /dev/null
+++ b/public/images/instagram.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9175 0H4.74833C2.31372 0 0.333008 1.98081 0.333008 4.41542V11.5846C0.333008 14.0193 2.31372 16 4.74833 16H11.9175C14.3523 16 16.333 14.0192 16.333 11.5846V4.41542C16.3331 1.98081 14.3523 0 11.9175 0ZM14.9135 11.5846C14.9135 13.2365 13.5695 14.5804 11.9176 14.5804H4.74833C3.09649 14.5805 1.75261 13.2365 1.75261 11.5846V4.41542C1.75261 2.76358 3.09649 1.4196 4.74833 1.4196H11.9175C13.5694 1.4196 14.9134 2.76358 14.9134 4.41542V11.5846H14.9135Z" fill="white"/>
+<path d="M8.33276 3.87734C6.05941 3.87734 4.20996 5.72679 4.20996 8.00014C4.20996 10.2734 6.05941 12.1227 8.33276 12.1227C10.6061 12.1227 12.4556 10.2734 12.4556 8.00014C12.4556 5.72679 10.6061 3.87734 8.33276 3.87734ZM8.33276 10.7031C6.84227 10.7031 5.62956 9.49053 5.62956 8.00004C5.62956 6.50947 6.84218 5.29685 8.33276 5.29685C9.82333 5.29685 11.036 6.50947 11.036 8.00004C11.036 9.49053 9.82324 10.7031 8.33276 10.7031Z" fill="white"/>
+<path d="M12.6289 2.67383C12.3554 2.67383 12.0867 2.78456 11.8936 2.97857C11.6995 3.17163 11.5879 3.44041 11.5879 3.71487C11.5879 3.98847 11.6996 4.25715 11.8936 4.45116C12.0866 4.64423 12.3554 4.7559 12.6289 4.7559C12.9034 4.7559 13.1712 4.64423 13.3652 4.45116C13.5592 4.25715 13.67 3.98838 13.67 3.71487C13.67 3.44041 13.5592 3.17163 13.3652 2.97857C13.1722 2.78456 12.9034 2.67383 12.6289 2.67383Z" fill="white"/>
+</svg>
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..7418753
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,4 @@
+<svg width="145" height="24" viewBox="0 0 145 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.8341 9.17115C64.682 9.17115 63.1554 10.8551 63.1554 13.44V22.922H59.8702V6.23213H63.1161V8.27016C63.5164 7.59468 64.0902 7.03857 64.7778 6.65947C65.4655 6.28037 66.242 6.09207 67.0269 6.1141H68.2072V9.17115H66.8341ZM57.6 14.5771C57.6 9.6 54.059 5.87803 49.2669 5.87803C48.1346 5.88572 47.0151 6.11721 45.9726 6.55919C44.9301 7.00117 43.9854 7.64491 43.1926 8.45338C42.3999 9.26185 41.7748 10.2191 41.3534 11.27C40.932 12.321 40.7225 13.4449 40.737 14.5771C40.737 19.5502 44.5731 23.3115 49.5777 23.3115C50.9757 23.3379 52.3595 23.0278 53.6125 22.4075C54.8656 21.7871 55.9511 20.8746 56.7777 19.7469L54.3934 18C53.8464 18.7634 53.1227 19.383 52.284 19.8058C51.4453 20.2285 50.5168 20.4419 49.5777 20.4275C48.2402 20.4212 46.9493 19.936 45.9388 19.0597C44.9283 18.1835 44.2651 16.9743 44.0695 15.6511H57.6079L57.6 14.5771ZM44.1403 13.0466C44.7266 10.501 46.7607 8.7777 49.2275 8.7777C51.6944 8.7777 53.7246 10.501 54.2754 13.0466H44.1403ZM30.3305 5.87803C29.2326 5.87896 28.1458 6.09744 27.1328 6.52086C26.1198 6.94428 25.2008 7.56424 24.4289 8.34492V0H21.1436V22.922H24.3895V20.8052C25.962 22.396 28.1016 23.2974 30.3384 23.3115C31.4986 23.3361 32.6522 23.1289 33.7313 22.7019C34.8104 22.2749 35.7935 21.6368 36.6228 20.8249C37.4521 20.0131 38.1109 19.0438 38.5607 17.974C39.0106 16.9042 39.2423 15.7553 39.2423 14.5948C39.2423 13.4342 39.0106 12.2854 38.5607 11.2155C38.1109 10.1457 37.4521 9.17644 36.6228 8.36458C35.7935 7.55271 34.8104 6.91458 33.7313 6.4876C32.6522 6.06062 31.4986 5.85338 30.3384 5.87803H30.3305ZM30.0944 20.3764C28.9493 20.3818 27.8284 20.047 26.8739 19.4144C25.9194 18.7818 25.1743 17.8798 24.7332 16.8231C24.2921 15.7663 24.1749 14.6024 24.3964 13.4789C24.6179 12.3554 25.1681 11.323 25.9773 10.5127C26.7864 9.70246 27.8181 9.15082 28.9413 8.92779C30.0644 8.70477 31.2286 8.82042 32.2859 9.26007C33.3433 9.69972 34.2462 10.4435 34.8801 11.3972C35.5141 12.3508 35.8504 13.4713 35.8466 14.6164C35.8476 15.3717 35.6995 16.1198 35.4107 16.8177C35.1219 17.5156 34.6981 18.1496 34.1636 18.6833C33.6292 19.217 32.9946 19.6399 32.2963 19.9278C31.598 20.2156 30.8497 20.3627 30.0944 20.3607V20.3764ZM9.04525 20.219C12.2164 20.219 14.6793 17.7875 14.6793 14.1443V0H18.0826V22.922H14.7187V20.7541C13.9328 21.5664 12.9902 22.2107 11.9481 22.6483C10.906 23.0858 9.78596 23.3074 8.65574 23.2997C3.76525 23.2997 0 19.7351 0 14.3292V0H3.46623V14.1639C3.46623 17.8269 5.82689 20.219 9.04525 20.219Z" fill="#262626"/>
+<path d="M76.3789 0H92.4589V3.93443H80.7225V9.52131H92.1323V13.322H80.7225V19.0033H92.4589V22.9377H76.3789V0ZM136.867 23.3508C141.797 23.3508 144.574 20.9902 144.574 17.7482C144.574 15.4387 142.93 13.7154 139.487 12.9679L135.848 12.2243C133.735 11.8308 133.07 11.4374 133.07 10.6505C133.07 9.63148 134.089 9.0059 135.966 9.0059C138 9.0059 139.507 9.55279 139.9 11.4334H144.165C143.933 7.89246 141.387 5.55541 136.225 5.55541C131.764 5.55541 128.632 7.39672 128.632 10.9652C128.632 13.4321 130.355 15.0374 134.073 15.8203L138.142 16.7607C139.747 17.0754 140.176 17.5082 140.176 18.1731C140.176 19.2315 138.964 19.8964 137.004 19.8964C134.542 19.8964 133.133 19.3495 132.586 17.4689H128.298C128.923 21.002 131.543 23.3508 136.867 23.3508ZM127.058 22.922H122.443C119.547 22.922 117.942 21.12 117.942 18.8459V9.83607H114.696V5.99606H117.958V1.17639H122.246V5.99606H127.058V9.83607H122.246V17.7482C122.246 18.6492 122.872 19.082 123.852 19.082H127.058V22.922ZM108.566 6.00394V7.53049C107.057 6.25411 105.142 5.55677 103.164 5.56328C101.981 5.53838 100.804 5.75002 99.7032 6.18579C98.6024 6.62156 97.5996 7.27269 96.7537 8.10102C95.9077 8.92935 95.2357 9.91821 94.7768 11.0096C94.318 12.1011 94.0817 13.2731 94.0817 14.4571C94.0817 15.641 94.318 16.813 94.7768 17.9045C95.2357 18.9959 95.9077 19.9848 96.7537 20.8131C97.5996 21.6414 98.6024 22.2925 99.7032 22.7283C100.804 23.1641 101.981 23.3757 103.164 23.3508C105.142 23.3594 107.058 22.6618 108.566 21.3836V22.9141H112.843V5.99606L108.566 6.00394ZM103.519 19.6367C102.493 19.6484 101.487 19.3549 100.628 18.7933C99.7692 18.2318 99.0969 17.4277 98.6964 16.4832C98.2958 15.5387 98.1852 14.4964 98.3784 13.4888C98.5716 12.4812 99.0601 11.5539 99.7816 10.8245C100.503 10.0952 101.425 9.59686 102.431 9.39285C103.436 9.18883 104.48 9.28834 105.428 9.67875C106.377 10.0691 107.188 10.7328 107.759 11.5854C108.33 12.438 108.634 13.4409 108.633 14.4669C108.64 15.1432 108.512 15.814 108.257 16.4405C108.002 17.0671 107.626 17.6369 107.149 18.1169C106.673 18.597 106.106 18.9778 105.481 19.2373C104.857 19.4968 104.187 19.6299 103.511 19.6289L103.519 19.6367Z" fill="#5FB709"/>
+</svg>
diff --git a/public/images/place.svg b/public/images/place.svg
new file mode 100644
index 0000000..a2f570f
--- /dev/null
+++ b/public/images/place.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 15.7859L11.2392 11.4636C13.5869 9.06988 13.5869 5.18495 11.2392 2.79123C8.89684 0.402923 5.10316 0.402923 2.76077 2.79123C0.413075 5.18495 0.413075 9.06988 2.76077 11.4636L7 15.7859Z" stroke="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z" stroke="#262626"/>
+</svg>
diff --git a/public/images/planet.svg b/public/images/planet.svg
new file mode 100644
index 0000000..b8806c7
--- /dev/null
+++ b/public/images/planet.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5251 0.99999L10.5251 0.999987C10.4415 0.989444 10.3578 0.978882 10.2729 0.978882C10.2552 0.978882 10.2378 0.981238 10.2205 0.983588C10.2054 0.985622 10.1904 0.987652 10.1754 0.988148C10.1481 0.987651 10.1211 0.985616 10.094 0.98358C10.0628 0.981232 10.0316 0.978882 10 0.978882C4.48607 0.978882 0 5.45581 0 10.9577C0 16.4603 4.48607 20.9365 10 20.9365C10.0317 20.9365 10.0631 20.9342 10.0944 20.932L10.0945 20.932C10.1213 20.93 10.1481 20.9281 10.175 20.9276C10.1902 20.9281 10.2053 20.93 10.2204 20.932C10.2378 20.9343 10.2552 20.9365 10.2729 20.9365C10.3623 20.9365 10.4503 20.9253 10.5382 20.914C10.561 20.9111 10.5837 20.9082 10.6064 20.9055C15.8379 20.5905 20 16.2561 20 10.9577C20 5.6593 15.8379 1.32529 10.6064 1.00989C10.5793 1.00683 10.5522 1.00341 10.5251 0.99999ZM7.00617 2.75938C5.99331 3.92619 5.17045 5.60156 4.71867 7.58022C3.31367 7.42804 2.46581 7.25092 2.12402 7.16895C3.11692 5.12304 4.86741 3.542 7.00617 2.75938ZM1.65096 8.33105C1.38846 9.16001 1.24561 10.0424 1.24561 10.9576C1.24708 12.0328 1.44885 13.0983 1.84061 14.0999C2.24096 14.0033 3.13311 13.8183 4.58132 13.6615C4.42775 12.803 4.33739 11.8995 4.33739 10.9576C4.33817 10.2381 4.38913 9.5196 4.48989 8.80718C2.80168 8.62008 1.88953 8.3952 1.65096 8.33105ZM2.38499 15.2518C2.83785 15.1556 3.64928 15.0099 4.84856 14.8848C5.32035 16.6268 6.08785 18.099 7.00713 19.1568C5.05128 18.4427 3.41303 17.0588 2.38428 15.2518H2.38499ZM5.98828 14.7785C6.63507 17.2782 8.21292 19.1325 9.28435 19.5801V14.6477C8.21292 14.6605 6.91828 14.7097 5.98828 14.7785ZM9.2846 13.4052C8.21318 13.4187 6.75496 13.4736 5.76068 13.5506C5.62389 12.7273 5.58496 11.8563 5.58496 10.9579C5.58496 10.2594 5.59853 9.57939 5.68318 8.92257C6.69282 9.0024 8.21318 9.05978 9.2846 9.07403V13.4048V13.4052ZM5.854 7.69091C6.81186 7.76397 8.21257 7.81814 9.284 7.83133V7.83097V2.33621C8.21257 2.81662 6.45222 4.91288 5.854 7.69091ZM17.8435 7.10074C17.6482 7.16061 16.8567 7.38086 15.2914 7.56582C14.9382 5.69123 14.3007 4.09391 13.4692 2.94064C15.3753 3.76496 16.9253 5.24895 17.8435 7.10038V7.10074ZM14.1368 7.68891C13.55 4.87631 11.7843 2.76115 10.7129 2.31745V7.83146C11.7843 7.81827 13.1943 7.76375 14.1368 7.68891ZM10.7129 9.07406C11.7843 9.06016 13.2861 9.00135 14.2832 8.91867C14.3654 9.57656 14.3861 10.2576 14.3861 10.9579C14.3861 11.8574 14.354 12.7299 14.2211 13.5542C13.2393 13.4751 11.7843 13.418 10.7129 13.4052V9.07406ZM10.7129 14.6477V19.5986V19.599C11.7843 19.1849 13.3707 17.3146 14.0065 14.7814C13.0886 14.7108 11.7843 14.6605 10.7129 14.6477ZM13.4692 18.9757C14.2185 17.9365 14.8153 16.5416 15.1835 14.9033C16.415 15.0448 17.1907 15.2094 17.5817 15.3078C16.6401 16.9385 15.1984 18.2242 13.4692 18.9757ZM15.4803 8.79411C15.6682 10.4179 15.643 12.0593 15.4053 13.6766L15.4056 13.6762C16.9256 13.8544 17.7903 14.069 18.1342 14.1691C18.5306 13.1741 18.7556 12.0925 18.7556 10.9581C18.7551 9.83681 18.5368 8.72626 18.1128 7.68789L18.3138 8.25454C18.2574 8.2745 17.4053 8.56353 15.4803 8.79411Z" fill="white"/>
+</svg>
diff --git a/public/images/search.svg b/public/images/search.svg
new file mode 100644
index 0000000..7e37c73
--- /dev/null
+++ b/public/images/search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9217 11.0417L15 15M12.8788 6.76471C12.8788 9.94847 10.2196 12.5294 6.93939 12.5294C3.65916 12.5294 1 9.94847 1 6.76471C1 3.58095 3.65916 1 6.93939 1C10.2196 1 12.8788 3.58095 12.8788 6.76471Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/public/images/twitter.svg b/public/images/twitter.svg
new file mode 100644
index 0000000..9c8b7bd
--- /dev/null
+++ b/public/images/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3333 1.89305C18.6218 2.21429 17.8582 2.43216 17.056 2.52942C17.8751 2.02968 18.5022 1.23702 18.7993 0.295398C18.031 0.758193 17.1829 1.09424 16.2792 1.27641C15.5556 0.489895 14.5262 0 13.3846 0C11.1943 0 9.41835 1.80937 9.41835 4.03969C9.41835 4.35601 9.45338 4.66496 9.52105 4.96039C6.22534 4.79174 3.30294 3.18301 1.34702 0.738495C1.00511 1.33425 0.810611 2.02842 0.810611 2.76943C0.810611 4.1714 1.51132 5.40841 2.57446 6.13213C1.92449 6.10999 1.31318 5.92782 0.77801 5.62502V5.67549C0.77801 7.63256 2.14559 9.2659 3.95895 9.63764C3.62671 9.72873 3.27637 9.7792 2.91394 9.7792C2.65783 9.7792 2.41016 9.75335 2.16733 9.70411C2.6723 11.3104 4.13655 12.4785 5.8714 12.5105C4.51469 13.5937 2.804 14.2374 0.945945 14.2374C0.625807 14.2374 0.310471 14.2177 0 14.182C1.75539 15.3304 3.83938 16 6.07921 16C13.375 16 17.3629 9.84321 17.3629 4.50374L17.3496 3.98063C18.1289 3.41439 18.803 2.70297 19.3333 1.89305Z" fill="white"/>
+</svg>
diff --git a/public/index.html b/public/index.html
index 4269d67..290b73e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React Uber eats</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/App.css b/src/App.css
index 8b13789..4a63ea4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1 +1,6 @@
-
+.page {
+  position: relative;
+  padding-top: 40px;
+  min-height: 100vh;
+  margin-bottom: 40px;
+}
diff --git a/src/App.js b/src/App.js
index d494a99..074ef32 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,22 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 import './App.css';
+import { store } from './store';
+import { RestaurantListPage }
+  from './components/RestaurantListPage/index';
+import { Header } from './components/Header';
+import { Footer } from './components/footer';
 
 const App = () => (
-  <div className="App">
-    <h1>React Uber eats</h1>
-  </div>
+  <Provider store={store}>
+    <Header />
+    <main className="page">
+      <div className="content">
+        <RestaurantListPage />
+      </div>
+    </main>
+    <Footer />
+  </Provider>
 );
 
 export default App;
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
new file mode 100644
index 0000000..944abfa
--- /dev/null
+++ b/src/components/Error/Error.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Error.scss';
+
+export const Error = (props) => {
+  const { message } = props;
+
+  return (
+    <div className="error">
+      <p className="error__text">
+        {message}
+      </p>
+
+      <a href="/" className="error__link">
+        Go Home
+      </a>
+    </div>
+  );
+};
+
+Error.propTypes = {
+  message: PropTypes.string,
+};
+
+Error.defaultProps = {
+  message: 'Sorry, something went wrong',
+};
diff --git a/src/components/Error/Error.scss b/src/components/Error/Error.scss
new file mode 100644
index 0000000..bac4345
--- /dev/null
+++ b/src/components/Error/Error.scss
@@ -0,0 +1,21 @@
+@import "../../styles/utils";
+
+.error {
+  @extend %absolute-center;
+  flex-flow: column nowrap;
+
+  &__text {
+    font-size: 30px;
+    font-weight: 500;
+  }
+
+  &__link {
+    font-size: 24px;
+    color: $color-green;
+
+    &:hover {
+      text-decoration: underline;
+
+    }
+  }
+}
diff --git a/src/components/Error/index.js b/src/components/Error/index.js
new file mode 100644
index 0000000..ae6e95d
--- /dev/null
+++ b/src/components/Error/index.js
@@ -0,0 +1 @@
+export * from './Error';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..09fc8b9
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+import './Header.scss';
+import { Input } from '../Input/Input';
+
+export class Header extends Component {
+  state = {
+    address: '',
+    time: '',
+    search: '',
+    isMobileSearchVisible: false,
+    isMobileDeliveryInfoVisible: false,
+  };
+
+  handleChange = ({ target }) => {
+    this.setState({
+      [target.name]: target.value,
+    });
+  };
+
+  toggleSearch = () => this.setState((prevState) => {
+    const { isMobileSearchVisible } = prevState;
+
+    return {
+      isMobileSearchVisible: !isMobileSearchVisible,
+      isMobileDeliveryInfoVisible: false,
+    };
+  });
+
+  toggleDeliveryInfo = () => this.setState((prevState) => {
+    const { isMobileDeliveryInfoVisible } = prevState;
+
+    return {
+      isMobileDeliveryInfoVisible: !isMobileDeliveryInfoVisible,
+      isMobileSearchVisible: false,
+    };
+  });
+
+  closeMobile = () => this.setState({
+    isMobileSearchVisible: false,
+    isMobileDeliveryInfoVisible: false,
+  });
+
+  render() {
+    const {
+      address,
+      time,
+      search,
+      isMobileSearchVisible,
+      isMobileDeliveryInfoVisible,
+    } = this.state;
+
+    return (
+      <header className="header">
+        <div className="content">
+          <div className="header__inner">
+            <img
+              src="./images/logo.svg"
+              alt="Uber Eats"
+              className="header__logo"
+            />
+
+            <div className="header__delivery-info">
+              <Input
+                name="address"
+                value={address}
+                onChange={this.handleChange}
+                placeholder="Address"
+                iconUrl="./images/place.svg"
+              />
+              <Input
+                name="time"
+                value={time}
+                onChange={this.handleChange}
+                placeholder="Time"
+                type="time"
+              />
+            </div>
+
+            <div className="header__search">
+              <Input
+                name="search"
+                value={search}
+                onChange={this.handleChange}
+                placeholder="Search"
+                iconUrl="./images/search.svg"
+              />
+            </div>
+
+            <div className="header__toggle-buttons">
+              <button
+                onClick={this.toggleDeliveryInfo}
+                type="button"
+                className="header__toggle-btn"
+              >
+                <img
+                  src="./images/place.svg"
+                  alt="place icon"
+                />
+              </button>
+              <button
+                onClick={this.toggleSearch}
+                type="button"
+                className="header__toggle-btn"
+              >
+                <img
+                  src="./images/search.svg"
+                  alt="search icon"
+                />
+              </button>
+            </div>
+
+            <a
+              className="header__link"
+              href="/sign-in"
+            >
+              Sign In
+            </a>
+          </div>
+
+          {(isMobileSearchVisible || isMobileDeliveryInfoVisible) && (
+            <div className="header__mobile-controls mobile-controls">
+              {isMobileSearchVisible && (
+                <Input
+                  label="Find"
+                  name="search"
+                  value={search}
+                  onChange={this.handleChange}
+                  placeholder="Search"
+                  iconUrl="./images/search.svg"
+                  isSmall={false}
+                />
+              )}
+
+              {isMobileDeliveryInfoVisible && (
+                <>
+                  <Input
+                    label="Where"
+                    name="address"
+                    value={address}
+                    onChange={this.handleChange}
+                    placeholder="Address"
+                    iconUrl="./images/place.svg"
+                    isSmall={false}
+                  />
+                  <Input
+                    label="To"
+                    name="time"
+                    value={time}
+                    onChange={this.handleChange}
+                    placeholder="Time"
+                    type="time"
+                    isSmall={false}
+                  />
+                </>
+              )}
+
+              <button
+                onClick={this.closeMobile}
+                type="button"
+                className="mobile-controls__close"
+              >
+                <img
+                  src="./images/close.svg"
+                  alt="search icon"
+                />
+              </button>
+            </div>
+          )}
+        </div>
+      </header>
+    );
+  }
+}
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
new file mode 100644
index 0000000..53f5353
--- /dev/null
+++ b/src/components/Header/Header.scss
@@ -0,0 +1,105 @@
+@import "../../styles/utils";
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+
+  padding: 16px 0;
+  width: 100%;
+
+  background-color: #fff;
+
+  &__inner {
+    @extend %flex-row-center;
+  }
+
+  &__logo {
+    height: 24px;
+    width: auto;
+
+    @media (max-width: $break-point-phone) {
+      height: 14px;
+    }
+  }
+
+  &__delivery-info {
+    @extend %flex-row-center;
+
+    margin-left: 7vw;
+
+    @media (max-width: $break-point-tablet) {
+      display: none;
+    }
+  }
+
+  &__search {
+    margin-left: auto;
+
+    @media (max-width: $break-point-tablet) {
+      display: none;
+    }
+  }
+
+  &__link {
+    margin-left: 40px;
+    padding: 12px 0;
+
+    white-space: nowrap;
+    color: #1f1f1f;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__toggle-buttons {
+    display: none;
+    margin-left: auto;
+
+    cursor: pointer;
+
+    @media (max-width: $break-point-tablet) {
+      display: flex;
+    }
+  }
+
+  &__toggle-btn {
+    display: flex;
+    align-items: center;
+    padding: 11px 5px;
+
+    cursor: pointer;
+    border: 1px solid transparent;
+
+    &:not(:last-of-type) {
+      margin-right: 20px;
+    }
+
+    &:focus {
+      border-color: $color-gray;
+    }
+  }
+}
+
+.mobile-controls {
+  display: none;
+  position: relative;
+  padding-top: 30px;
+
+  @media (max-width: $break-point-tablet) {
+    display: flex;
+  }
+
+  @media (max-width: $break-point-phone) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    cursor: pointer;
+  }
+}
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
new file mode 100644
index 0000000..266dec8
--- /dev/null
+++ b/src/components/Header/index.js
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
new file mode 100644
index 0000000..0a23bc8
--- /dev/null
+++ b/src/components/Input/Input.js
@@ -0,0 +1,96 @@
+import React, { PureComponent, createRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import './Input.scss';
+
+export class Input extends PureComponent {
+  state = {
+    isFocused: false,
+  };
+
+  inputRef = createRef();
+
+  handleFocus = () => this.setState({ isFocused: true });
+
+  handleBlur = () => this.setState({ isFocused: false });
+
+  focus = () => this.inputRef.current.focus();
+
+  render() {
+    const {
+      iconUrl,
+      value,
+      onChange,
+      type,
+      placeholder,
+      name,
+      className,
+      isSmall,
+      label,
+    } = this.props;
+
+    const { isFocused } = this.state;
+
+    const inputWrapperClass = cx(`control__input-wrapper`, {
+      'control__input-wrapper--focused': isFocused,
+      [className]: !!className,
+    });
+
+    const inputClass = cx(`control__input`, {
+      'control__input--small': isSmall,
+      'control__input--time': type === 'time',
+    });
+
+    return (
+      <label className="control">
+        {label && (
+          <p className="control__label">
+            {label}
+          </p>
+        )}
+        <div className={inputWrapperClass}>
+          {!!iconUrl && (
+            <img
+              src={iconUrl}
+              alt={placeholder}
+              className="control__icon"
+            />
+          )}
+
+          <input
+            ref={this.inputRef}
+            type={type}
+            name={name}
+            onChange={onChange}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            value={value}
+            placeholder={placeholder}
+            className={inputClass}
+          />
+        </div>
+      </label>
+    );
+  }
+}
+
+Input.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
+  iconUrl: PropTypes.string,
+  className: PropTypes.string,
+  label: PropTypes.string,
+  isSmall: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  type: 'text',
+  placeholder: '',
+  iconUrl: '',
+  className: '',
+  isSmall: true,
+  label: '',
+};
diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
new file mode 100644
index 0000000..b0d859e
--- /dev/null
+++ b/src/components/Input/Input.scss
@@ -0,0 +1,53 @@
+@import "../../styles/utils";
+
+.control {
+  &__input-wrapper {
+    @extend %flex-row-center;
+
+    padding: 11px 16px;
+
+    border: 1px solid #e0e0e0;
+    transition: border-color 500ms;
+  }
+
+  &--focused {
+    border-color: darken($color-gray, 20);
+  }
+
+  &__icon {
+    width: 14px;
+    height: 14px;
+
+    margin-right: 18px;
+  }
+
+  &__input {
+    max-height: 24px;
+    line-height: 24px;
+
+    &--time {
+      max-width: 75px;
+    }
+
+    &--small {
+      @media (max-width: $break-point-tablet-lg) {
+        max-width: 75px;
+      }
+    }
+  }
+
+  &__lable {
+    font-size: 14px;
+    margin-bottom: 8px;
+    color: #626262;
+  }
+
+  & + & {
+    margin-left: 20px;
+
+    @media (max-width: $break-point-phone) {
+      margin-left: 0;
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
new file mode 100644
index 0000000..ba9fe7e
--- /dev/null
+++ b/src/components/Input/index.js
@@ -0,0 +1 @@
+export * from './Input';
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
new file mode 100644
index 0000000..67435b7
--- /dev/null
+++ b/src/components/Loader/Loader.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Loader.scss';
+
+export const Loader = () => (
+  <div className="loader-container">
+    <div className="lds-roller">
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+);
diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.scss
new file mode 100644
index 0000000..fc57a00
--- /dev/null
+++ b/src/components/Loader/Loader.scss
@@ -0,0 +1,110 @@
+@import "../../styles/utils";
+
+.loader-container {
+  @extend %absolute-center;
+}
+
+.lds-roller {
+  display: inline-block;
+  position: relative;
+  width: 80px * 3;
+  height: 80px * 3;
+}
+
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 40px * 3 40px * 3;
+}
+
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 7px * 3;
+  height: 7px * 3;
+  border-radius: 50%;
+  background: $color-green;
+  margin: -4px * 3 0 0 -4px * 3;
+}
+
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+
+.lds-roller div:nth-child(1):after {
+  top: 63px * 3;
+  left: 63px * 3;
+}
+
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+
+.lds-roller div:nth-child(2):after {
+  top: 68px * 3;
+  left: 56px * 3;
+}
+
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+
+.lds-roller div:nth-child(3):after {
+  top: 71px * 3;
+  left: 48px * 3;
+}
+
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s;
+}
+
+.lds-roller div:nth-child(4):after {
+  top: 72px * 3;
+  left: 40px * 3;
+}
+
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s;
+}
+
+.lds-roller div:nth-child(5):after {
+  top: 71px * 3;
+  left: 32px * 3;
+}
+
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+
+.lds-roller div:nth-child(6):after {
+  top: 68px * 3;
+  left: 24px * 3;
+}
+
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+
+.lds-roller div:nth-child(7):after {
+  top: 63px * 3;
+  left: 17px * 3;
+}
+
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+
+.lds-roller div:nth-child(8):after {
+  top: 56px * 3;
+  left: 12px * 3;
+}
+
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
new file mode 100644
index 0000000..d5ce981
--- /dev/null
+++ b/src/components/Loader/index.js
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/RestaurantCard/RestaurantCard.js b/src/components/RestaurantCard/RestaurantCard.js
new file mode 100644
index 0000000..dd51fc0
--- /dev/null
+++ b/src/components/RestaurantCard/RestaurantCard.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RestaurantCard.scss';
+
+export const RestaurantCard = (props) => {
+  const {
+    imageUrl,
+    title,
+    categories,
+    etaRange,
+  } = props;
+
+  return (
+    <div className="restaurant-card">
+      <img src={imageUrl} alt={title} className="restaurant-card__img" />
+      <h2 className="restaurant-card__title">{title}</h2>
+      <div className="restaurant-card__categories">
+        {categories.join(' • ')}
+      </div>
+      <div className="restaurant-card__eta">
+        {etaRange}
+      </div>
+    </div>
+  );
+};
+
+RestaurantCard.propTypes = {
+  imageUrl: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  categories: PropTypes.arrayOf(PropTypes.string),
+  etaRange: PropTypes.string,
+};
+
+RestaurantCard.defaultProps = {
+  categories: [],
+  etaRange: '',
+};
+
+export default RestaurantCard;
diff --git a/src/components/RestaurantCard/RestaurantCard.scss b/src/components/RestaurantCard/RestaurantCard.scss
new file mode 100644
index 0000000..2b9e262
--- /dev/null
+++ b/src/components/RestaurantCard/RestaurantCard.scss
@@ -0,0 +1,41 @@
+@import "../../styles/utils";
+
+.restaurant-card {
+  --height: 367px;
+
+  height: var(--height);
+  width: 100%;
+
+  cursor: pointer;
+
+  @media (max-width: $break-point-phone) {
+    --height: 330px;
+  }
+
+  &__img {
+    height: calc(var(--height) * 0.7);
+    width: 100%;
+    object-fit: cover;
+  }
+
+  &__title {
+    font-weight: 500;
+    margin: 12px 0 4px;
+  }
+
+  &__categories {
+    font-size: 14px;
+    color: #757575;
+
+    margin-bottom: 4px;
+  }
+
+  &__eta {
+    font-size: 14px;
+
+    display: inline-block;
+    padding: 2px 8px;
+
+    background-color: #f5f5f5;
+  }
+}
diff --git a/src/components/RestaurantCard/index.js b/src/components/RestaurantCard/index.js
new file mode 100644
index 0000000..0992f0a
--- /dev/null
+++ b/src/components/RestaurantCard/index.js
@@ -0,0 +1 @@
+export * from './RestaurantCard';
diff --git a/src/components/RestaurantListPage/RestaurantListPage.js b/src/components/RestaurantListPage/RestaurantListPage.js
new file mode 100644
index 0000000..86f6118
--- /dev/null
+++ b/src/components/RestaurantListPage/RestaurantListPage.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RestaurantCard from '../RestaurantCard/RestaurantCard';
+import './RestaurantListPage.scss';
+import { Loader } from '../Loader';
+import { Error } from '../Error';
+
+const DEFAULT_ETA_RANGE = '20 - 30 min';
+
+export class RestaurantListPage extends Component {
+  componentDidMount() {
+    const { loadRestaurants } = this.props;
+
+    loadRestaurants();
+  }
+
+  render() {
+    const {
+      restaurantsData,
+      error,
+      isLoading,
+    } = this.props;
+
+    if (isLoading) {
+      return <Loader />;
+    }
+
+    if (error) {
+      return <Error message={error} />;
+    }
+
+    return (
+      <div className="restaurants-list">
+        {restaurantsData.map((restaurant) => {
+          const {
+            title,
+            uuid,
+            heroImageUrl,
+            categories,
+            etaRange,
+          } = restaurant;
+
+          return (
+            <RestaurantCard
+              key={uuid}
+              uuid={uuid}
+              title={title}
+              imageUrl={heroImageUrl}
+              categories={categories}
+              etaRange={etaRange ? etaRange.errorMessage : DEFAULT_ETA_RANGE}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+RestaurantListPage.propTypes = {
+  restaurantsData: PropTypes.arrayOf(PropTypes.shape({})),
+  loadRestaurants: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  isLoading: PropTypes.bool,
+};
+
+RestaurantListPage.defaultProps = {
+  restaurantsData: [],
+  error: null,
+  isLoading: false,
+};
diff --git a/src/components/RestaurantListPage/RestaurantListPage.scss b/src/components/RestaurantListPage/RestaurantListPage.scss
new file mode 100644
index 0000000..e11412f
--- /dev/null
+++ b/src/components/RestaurantListPage/RestaurantListPage.scss
@@ -0,0 +1,18 @@
+@import "../../styles/utils";
+
+.restaurants-list {
+  --card-width: 348px;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  gap: 40px 20px;
+
+  @media (max-width: $break-point-tablet-lg) {
+    --card-width: 348px;
+    row-gap: 20px;
+  }
+
+  @media (max-width: $break-point-phone) {
+    --card-width: 280px;
+  }
+}
diff --git a/src/components/RestaurantListPage/index.js b/src/components/RestaurantListPage/index.js
new file mode 100644
index 0000000..4b34a64
--- /dev/null
+++ b/src/components/RestaurantListPage/index.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { RestaurantListPage } from './RestaurantListPage';
+import { loadRestaurants } from '../../store/actions';
+import {
+  selectIsLoading,
+  selectRestaurantsList,
+  selectRestaurantsListError,
+} from '../../store/selectors';
+
+function mapState2Props(state) {
+  return {
+    restaurantsData: selectRestaurantsList(state),
+    error: selectRestaurantsListError(state),
+    isLoading: selectIsLoading(state),
+  };
+}
+
+const mapDispatch2Props = {
+  loadRestaurants,
+};
+
+const Enhanced = connect(
+  mapState2Props,
+  mapDispatch2Props,
+)(RestaurantListPage);
+
+export { Enhanced as RestaurantListPage };
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
new file mode 100644
index 0000000..c57eb83
--- /dev/null
+++ b/src/components/Select/Select.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Select.scss';
+
+export const Select = (props) => {
+  const {
+    name,
+    value,
+    onSelect,
+    options,
+    iconUrl,
+  } = props;
+
+  return (
+    <div className="select">
+      <select
+        name={name}
+        value={value}
+        onChange={onSelect}
+        className="select__input"
+      >
+        {options.map(({ value: optionValue, label }) => (
+          <option
+            value={optionValue}
+            selected={value === optionValue}
+            className="select__option"
+          >
+            {label}
+          </option>
+        ))}
+      </select>
+      {!!iconUrl && (
+        <img
+          className="select__icon"
+          src={iconUrl}
+          alt="select icon"
+        />
+      )}
+
+      <img
+        className="select__arrow"
+        src="./images/arrow.svg"
+        alt="arrow down"
+      />
+    </div>
+  );
+};
+
+Select.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onSelect: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })),
+  iconUrl: PropTypes.string,
+};
+
+Select.defaultProps = {
+  onSelect: () => {},
+  options: [],
+  iconUrl: '',
+};
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
new file mode 100644
index 0000000..750bc0b
--- /dev/null
+++ b/src/components/Select/Select.scss
@@ -0,0 +1,39 @@
+.select {
+  position: relative;
+
+  &__input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    color: #fff;
+
+    padding: 10px 40px;
+
+    background-color: transparent;
+    border: 1px solid #979797;
+    border-radius: 0;
+    cursor: pointer;
+  }
+
+  &__option {
+    background-color: #262626;
+  }
+
+  &__icon {
+    position: absolute;
+    top: 12px;
+    left: 10px;
+
+    width: 20px;
+    height: 20px;
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+
+    width: 14px;
+    height: 8px;
+  }
+}
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
new file mode 100644
index 0000000..7868ecb
--- /dev/null
+++ b/src/components/Select/index.js
@@ -0,0 +1 @@
+export * from './Select';
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
new file mode 100644
index 0000000..1ccef76
--- /dev/null
+++ b/src/components/footer/footer.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import './footer.scss';
+import { Select } from '../Select';
+
+export const Footer = () => (
+  <footer className="footer">
+    <div className="content">
+      <div className="footer__top-part">
+        <div className="footer__main">
+          <div className="footer__logo-container">
+            <img
+              src="./images/footer-logo.svg"
+              alt="Uber Eats"
+              className="footer__logo"
+            />
+
+            <Select
+              name="language"
+              options={[
+                { value: 'en', label: 'English' },
+                { value: 'ua', label: 'Ukrainian' },
+                { value: 'ru', label: 'Russian' },
+              ]}
+              value="en"
+              iconUrl="./images/planet.svg"
+            />
+          </div>
+
+          <div className="footer__mobile-apps">
+            <a
+              href="https://www.apple.com/retail/"
+              className="footer__mobile-app"
+            >
+              <img
+                src="./images/apple-store.png"
+                alt="Apple Store"
+              />
+            </a>
+
+            <a
+              href="https://play.google.com/store"
+              className="footer__mobile-app"
+            >
+              <img
+                src="./images/google-play.png"
+                alt="Google Play"
+              />
+            </a>
+
+          </div>
+        </div>
+
+        <div className="footer__top-links links">
+          <a href="#" className="links__link links__link--intended">
+            About UberEats
+          </a>
+          <a href="#" className="links__link">
+            Read our blog
+          </a>
+          <a href="#" className="links__link">
+            Sign up to deliver
+          </a>
+          <a href="#" className="links__link">
+            Add your restaurant
+          </a>
+        </div>
+
+        <div className="footer__top-links links">
+          <a href="#" className="links__link  links__link--intended">
+            Get help
+          </a>
+          <a href="#" className="links__link">
+            Read FAQs
+          </a>
+          <a href="#" className="links__link">
+            View all cities
+          </a>
+        </div>
+      </div>
+      <div className="footer__bottom-part">
+        <p className="footer__copyright">
+          © 2019 Uber Technologies Inc.
+        </p>
+
+        <div className="footer__misc">
+          <div className="footer__bottom-links links">
+            <a href="#" className="links__link">
+              Privacy policy
+            </a>
+            <a href="#" className="links__link">
+              Terms of use
+            </a>
+            <a href="#" className="links__link">
+              Pricing
+            </a>
+          </div>
+
+          <div className="footer__social social">
+            <a href="#" className="social__link">
+              <img src="./images/facebook.svg" alt="Facebook" />
+            </a>
+            <a href="#" className="social__link">
+              <img src="./images/twitter.svg" alt="Twitter" />
+            </a>
+            <a href="#" className="social__link">
+              <img src="./images/instagram.svg" alt="Instagram" />
+            </a>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </footer>
+);
+
+export default Footer;
diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
new file mode 100644
index 0000000..145cc0e
--- /dev/null
+++ b/src/components/footer/footer.scss
@@ -0,0 +1,134 @@
+@import "../../styles/utils";
+
+.footer {
+  background-color: #262626;
+  padding: 64px 0;
+  overflow: hidden;
+
+  @media (max-width: $break-point-tablet) {
+    padding: 40px 0;
+  }
+
+  &__top-part {
+    margin-bottom: 40px;
+    padding-bottom: 40px;
+    border-bottom: 1px solid #c4c4c4;
+  }
+
+  &__main {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+  }
+
+  &__logo-container {
+    @extend %flex-row-center;
+
+    margin-bottom: 40px;
+
+    @media (max-width: $break-point-tablet) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  &__mobile-app {
+    display: inline-block;
+
+    @media (max-width: $break-point-tablet) {
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    &:first-of-type {
+      margin-right: 20px;
+    }
+  }
+
+  &__logo {
+    margin-right: 40px;
+
+    @media (max-width: $break-point-tablet) {
+      margin-bottom: 20px;
+    }
+  }
+
+  &__top-part,
+  &__bottom-part {
+    @extend %flex-row-center;
+    align-items: flex-start;
+
+    @media (max-width: $break-point-phone-lg) {
+      flex-direction: column;
+    }
+  }
+
+  &__main,
+  &__copyright {
+    flex-basis: 45vw;
+    padding-right: 40px;
+
+    @media (max-width: $break-point-phone-lg) {
+      flex-basis: initial;
+    }
+  }
+
+  &__top-links:last-of-type {
+    margin-left: 10vw;
+
+    @media (max-width: $break-point-phone-lg) {
+      margin-left: 0;
+    }
+  }
+
+  &__copyright {
+    color: #fff;
+    font-size: 14px;
+
+    @media (max-width: $break-point-phone-lg) {
+      order: 1;
+    }
+  }
+
+  &__bottom-links {
+    @extend %flex-row-center;
+
+    margin-bottom: 40px;
+
+    @media (max-width: $break-point-phone-lg) {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 20px;
+      order: 1;
+    }
+
+    .links__link:not(:last-of-type) {
+      margin-right: 40px;
+    }
+  }
+
+  &__misc {
+    @media (max-width: $break-point-phone-lg) {
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+    }
+  }
+}
+
+.links {
+  &__link {
+    display: block;
+    margin-bottom: 16px;
+    color: #fff;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.social__link {
+  margin-right: 20px;
+}
diff --git a/src/components/footer/index.js b/src/components/footer/index.js
new file mode 100644
index 0000000..a058eae
--- /dev/null
+++ b/src/components/footer/index.js
@@ -0,0 +1 @@
+export * from './footer';
diff --git a/src/index.js b/src/index.js
index b597a44..b421ab3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import './styles/index.scss';
 
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..05d8bd0
--- /dev/null
+++ b/src/store/actions.js
@@ -0,0 +1,36 @@
+export const ACTION_TYPES = {
+  SAVE_RESTAURANTS: 'SAVE_RESTAURANTS',
+  SET_LOAD_RESTAURANTS_ERROR: 'SET_LOAD_RESTAURANTS_ERROR',
+  START_LOADING: 'START_LOADING',
+  STOP_LOADING: 'STOP_LOADING',
+};
+
+const saveRestaurants = data => ({
+  type: ACTION_TYPES.SAVE_RESTAURANTS,
+  payload: data,
+});
+
+const setRestaurantsError = error => ({
+  type: ACTION_TYPES.SET_LOAD_RESTAURANTS_ERROR,
+  payload: error,
+});
+
+const startLoading = () => ({
+  type: ACTION_TYPES.START_LOADING,
+});
+
+const stopLoading = () => ({
+  type: ACTION_TYPES.STOP_LOADING,
+});
+
+export const loadRestaurants = () => (dispatch) => {
+  dispatch(startLoading());
+
+  fetch('https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants')
+    .then(res => res.json())
+    .then(({ data }) => {
+      dispatch(saveRestaurants(data));
+    })
+    .catch(error => dispatch(setRestaurantsError(error.message)))
+    .finally(() => dispatch(stopLoading()));
+};
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..b33d373
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,13 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { rootReducer } from './rootReducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  || compose();
+
+const middlewares = [thunk];
+
+export const store = createStore(
+  rootReducer,
+  composeEnhancers(applyMiddleware(...middlewares))
+);
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
new file mode 100644
index 0000000..afe4ec6
--- /dev/null
+++ b/src/store/rootReducer.js
@@ -0,0 +1,48 @@
+import { ACTION_TYPES } from './actions';
+
+const initialState = {
+  restaurantListData: null,
+  isLoading: false,
+  error: null,
+};
+
+export function rootReducer(state = initialState, action) {
+  switch (action.type) {
+    case ACTION_TYPES.SAVE_RESTAURANTS: {
+      const { payload } = action;
+
+      return {
+        ...state,
+        error: null,
+        restaurantListData: payload,
+      };
+    }
+
+    case ACTION_TYPES.SET_LOAD_RESTAURANTS_ERROR: {
+      const { payload } = action;
+
+      return {
+        ...state,
+        error: payload,
+        restaurantListData: null,
+      };
+    }
+
+    case ACTION_TYPES.START_LOADING: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+
+    case ACTION_TYPES.STOP_LOADING: {
+      return {
+        ...state,
+        isLoading: false,
+      };
+    }
+
+    default:
+      return state;
+  }
+}
diff --git a/src/store/selectors.js b/src/store/selectors.js
new file mode 100644
index 0000000..53ab3db
--- /dev/null
+++ b/src/store/selectors.js
@@ -0,0 +1,26 @@
+import { createSelector } from 'reselect';
+
+const rootSelector = state => state;
+
+export const selectRestaurantsList = createSelector(
+  rootSelector,
+  ({ restaurantListData }) => {
+    if (!restaurantListData) {
+      return [];
+    }
+
+    const { feedItems, storesMap } = restaurantListData;
+
+    return feedItems.map(({ uuid }) => storesMap[uuid]);
+  }
+);
+
+export const selectRestaurantsListError = createSelector(
+  rootSelector,
+  ({ error }) => error
+);
+
+export const selectIsLoading = createSelector(
+  rootSelector,
+  ({ isLoading }) => isLoading
+);
diff --git a/src/styles/extends.scss b/src/styles/extends.scss
new file mode 100644
index 0000000..e89b780
--- /dev/null
+++ b/src/styles/extends.scss
@@ -0,0 +1,17 @@
+%flex-row-center {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+%absolute-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..9f85f12
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,48 @@
+@import "./utils";
+
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+body,
+a,
+button,
+input,
+select {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+input {
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+button {
+  border: none;
+  background: none;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.content {
+  max-width: 1160px;
+  padding: 0 34px;
+  margin: 0 auto;
+
+  @media (max-width: $break-point-phone) {
+    padding: 0 20px;
+  }
+
+  @media (min-width: $break-point-large) {
+    padding: 0 20px;
+    max-width: 1520px;
+  }
+}
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 0000000..8a83506
--- /dev/null
+++ b/src/styles/utils.scss
@@ -0,0 +1,2 @@
+@import "variables";
+@import "extends";
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..6731c15
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,8 @@
+$color-green: #5eb707;
+$color-gray: #e8e8e8;
+
+$break-point-tablet-lg: 956px;
+$break-point-tablet: 768px;
+$break-point-phone: 550px;
+$break-point-large: 1281px;
+$break-point-phone-lg: 620px;
