diff --git a/src/components/CardItem/CardItem.js b/src/components/CardItem/CardItem.js
index 1c30b27..a4b5286 100644
--- a/src/components/CardItem/CardItem.js
+++ b/src/components/CardItem/CardItem.js
@@ -11,6 +11,7 @@ export const CardItem = ({
   restaurantCurency,
   uuid,
   createOrder,
+  setAltData,
 }) => {
   const srcImage = imageUrl || './images/no_image.png';
   const srcTitle = title || 'no-image icon';
@@ -19,7 +20,17 @@ export const CardItem = ({
     <div
       id={uuid}
       className="card"
-      onClick={event => createOrder(event.target.id)}
+      onClick={
+        (event) => {
+          createOrder(event.target.id);
+          setAltData({
+            title,
+            imageUrl,
+            itemDescription: description,
+            price,
+          });
+        }
+      }
       onKeyPress={event => createOrder(event.target.id)}
       role="presentation"
     >
@@ -45,6 +56,7 @@ CardItem.propTypes = {
   price: PropTypes.number.isRequired,
   restaurantCurency: PropTypes.string,
   createOrder: PropTypes.func.isRequired,
+  setAltData: PropTypes.shape().isRequired,
 };
 
 CardItem.defaultProps = {
diff --git a/src/components/CardItem/index.js b/src/components/CardItem/index.js
index 53cd66c..c99f9b7 100644
--- a/src/components/CardItem/index.js
+++ b/src/components/CardItem/index.js
@@ -4,7 +4,7 @@ import { CardItem } from './CardItem';
 import {
   selectRestaurantCurency,
 } from '../../store/selector';
-import { loadMenuItem } from '../../store/actions';
+import { loadMenuItem, setAltDataModalWindow } from '../../store/actions';
 
 const mapStateToProps = state => ({
   restaurantCurency: selectRestaurantCurency(state),
@@ -12,6 +12,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   createOrder: uuid => dispatch(loadMenuItem(uuid)),
+  setAltData: data => dispatch(setAltDataModalWindow(data)),
 });
 
 const Enhanced = connect(
diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js
index 6a41e28..b869ab4 100644
--- a/src/components/Error/Error.js
+++ b/src/components/Error/Error.js
@@ -8,7 +8,7 @@ export const Error = (props) => {
 
   return (
     <div className="error">
-      <p className="error__text">Sorry, something wrong(</p>
+      <p className="error__text">something wrong</p>
       <p className="error__text">
         {message}
       </p>
diff --git a/src/components/Error/Error.scss b/src/components/Error/Error.scss
index fbd3c17..9d5921f 100644
--- a/src/components/Error/Error.scss
+++ b/src/components/Error/Error.scss
@@ -3,6 +3,7 @@
 .error {
   @extend %absolute-center;
   flex-flow: column nowrap;
+  padding: 10px;
 
   &__text {
     font-size: 30px;
diff --git a/src/components/Order/Order.js b/src/components/Order/Order.js
index fd41cba..d4faf67 100644
--- a/src/components/Order/Order.js
+++ b/src/components/Order/Order.js
@@ -2,60 +2,59 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Loader from '../Loader';
-import Error from '../Error';
+import { OrderFooter } from '../OrderFooter';
+import { OrderCustomizationsSection } from '../OrderCustomizationsSection';
 
 import './Order.scss';
 
 export const Order = ({
-  deleteOrder,
+  hideModalWindow,
   order,
   isLoading,
   error,
+  altData,
 }) => {
   if (isLoading) {
     return <Loader />;
   }
 
-  const { imageUrl, title, itemDescription } = order;
-  const countItem = 1;
+  const {
+    imageUrl,
+    title,
+    itemDescription,
+    customizationsList = [],
+  } = !error ? order : altData;
+
   const srcImage = imageUrl || './images/no_image.png';
   const srcTitle = title || 'no-image icon';
 
   return (
     <aside className="modal">
       <div className="modal-window">
-        {error && <Error message={error} />}
-        {!error && (
-          <>
-            <img className="modal-window__img" src={srcImage} alt={srcTitle} />
-            <div className="modal-window__wrapper-content">
-              <p className="modal-window__title">{title}</p>
-              <p className="modal-window__description">{itemDescription}</p>
-              <div className="modal-window__footer">
-                <div className="counter">
-                  <img
-                    className="counter__button"
-                    src="./images/button-minus.svg"
-                    alt="icon minus"
-                  />
-                  <div className="counter__item">{countItem}</div>
-                  <img
-                    className="counter__button"
-                    src="./images/button-plus.svg"
-                    alt="icon plus"
-                  />
-                </div>
-                <button type="button" className="modal-window__button-order">
-                  {`Add ${countItem}`}
-                </button>
-              </div>
-            </div>
-          </>
-        )
+        <div className="modal-window__wrapper-img">
+          <img
+            className="modal-window__img"
+            src={srcImage}
+            alt={srcTitle}
+          />
+        </div>
+        <div className="modal__wrapper-content">
+          <p className="modal-window__title">{title}</p>
+          <p className="modal-window__description">{itemDescription}</p>
+        </div>
+        {customizationsList
+          .map(item => (
+            <OrderCustomizationsSection customizations={item} key={item.uuid} />
+          ))
         }
+        <div className="modal__wrapper-content">
+          <div className="modal-window__footer">
+            <OrderFooter altPrice={altData.price} />
+          </div>
+        </div>
         <div
-          onClick={deleteOrder}
-          onKeyPress={deleteOrder}
+          onClick={hideModalWindow}
+          onKeyPress={hideModalWindow}
           role="presentation"
         >
           <img
@@ -73,7 +72,8 @@ export const Order = ({
 Order.propTypes = {
   isLoading: PropTypes.bool,
   error: PropTypes.string,
-  deleteOrder: PropTypes.func.isRequired,
+  hideModalWindow: PropTypes.func.isRequired,
+  altData: PropTypes.shape().isRequired,
   order: PropTypes.shape(),
 };
 
diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
index 56ce699..ee2df6b 100644
--- a/src/components/Order/Order.scss
+++ b/src/components/Order/Order.scss
@@ -1,3 +1,5 @@
+@import '../../styles/utils.scss';
+
 .modal{
   z-index: 2;
   position: fixed;
@@ -7,12 +9,23 @@
   right: 0;
   background: rgba(0,0,0, 0.7);
 
+  &__wrapper-content {
+    padding: 0 34px;
+  }
+
   &-window {
     position: relative;
     margin: 80px auto 0;
     background: #fff;
-    width: 716px;
-    min-height: 300px;
+    width: 720px;
+    height: 90vh;
+    overflow-y: auto;
+
+    @media (max-width: $breack-point-tablet) {
+      width: 100%;
+      margin: 0;
+      height: 100%;
+    }
 
     &__button-close {
       position: absolute;
@@ -28,65 +41,40 @@
       }
     }
 
-    &__img {
-      display: block;
-      height: 375px;
-      margin: 0 auto 50px;
+    &__wrapper-img {
+      margin-bottom: 50px;
     }
 
-    &__wrapper-content {
-      padding: 0 34px 24px;
+    &__img {
+      width: 100%;
     }
 
     &__title {
       font-size: 30px;
       font-weight: 500;
       line-height: 21px;
-      margin-bottom: 2px;
+      margin-bottom: 8px;
+
+      @media (max-width: $breack-point-phone) {
+        font-size: 24px;
+      }
     }
 
     &__description {
       font-size: 14px;
       font-weight: 21px;
       color: #626262;
+      margin-bottom: 30px;
     }
 
     &__footer {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-    }
-
-    &__button-order {
-      width: 485px;
-      height: 55px;
-      background: #247a00;
-      color: #fff;
-      font-weight: 500;
+      margin: 24px 0;
 
-      &:hover {
-        cursor: pointer;
+      @media (max-width: $breack-point-phone) {
+        display: block;
       }
     }
   }
 }
-
-.counter {
-  display: flex;
-  align-items: center;
-
-  &__button {
-    &:not(:last-of-type) {
-      margin-right: 17px;
-    }
-
-    &:hover{
-      cursor: pointer;
-    }
-  }
-
-  &__item {
-    margin-right: 17px;
-  }
-}
-
diff --git a/src/components/Order/index.js b/src/components/Order/index.js
index e160b7b..6c2fb30 100644
--- a/src/components/Order/index.js
+++ b/src/components/Order/index.js
@@ -1,25 +1,24 @@
 import { connect } from 'react-redux';
 
 import { Order } from './Order';
-import { setOrder, setModalWindow } from '../../store/actions';
+import { hideModalWindow } from '../../store/actions';
 import {
   selectOrder,
   selectRestaurantsListError,
   selectIsLoading,
+  selectAltDataModal,
 } from '../../store/selector';
 
 const mapStateToProps = state => ({
   order: selectOrder(state),
   error: selectRestaurantsListError(state),
   isLoading: selectIsLoading(state),
+  altData: selectAltDataModal(state),
 });
 
-const mapDispatchToProps = dispatch => ({
-  deleteOrder: () => {
-    dispatch(setModalWindow(false));
-    dispatch(setOrder(null));
-  },
-});
+const mapDispatchToProps = {
+  hideModalWindow,
+};
 
 const Enhanced = connect(
   mapStateToProps,
diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
new file mode 100644
index 0000000..9398a3c
--- /dev/null
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './OrderCustomizationsOptions.scss';
+
+export const OrderCustomizationsOptions = ({ option }) => {
+  const { title, uuid } = option;
+
+  return (
+    <div className="option">
+      <div className="option__checkbox">
+        <input id={uuid} type="checkbox" className="option__checkbox-input" />
+        <label htmlFor={uuid} className="option__checkbox-title">{title}</label>
+      </div>
+    </div>
+  );
+};
+
+OrderCustomizationsOptions.propTypes = {
+  option: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    uuid: PropTypes.string,
+  })).isRequired,
+};
diff --git a/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
new file mode 100644
index 0000000..9425da4
--- /dev/null
+++ b/src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.scss
@@ -0,0 +1,72 @@
+@import '../../styles/utils.scss';
+
+.option {
+  height: 48px;
+
+  display: flex;
+  align-items: center;
+
+  &__checkbox {
+    display: flex;
+
+    &-title {
+      display: flex;
+      position: relative;
+
+      font-size: 12px;
+      line-height: 21px;
+
+      &::before {
+        content: "";
+        display: inline-block;
+
+        height: 22px;
+        width: 22px;
+
+        margin-right: 14px;
+
+        border: 1px solid #d3d3d3;
+      }
+
+      &::after {
+        content: "";
+        display: inline-block;
+        height: 8px;
+        width: 12px;
+
+        position: absolute;
+        left: 5px;
+        top: 4px;
+
+        border-left: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+
+        transform: rotate(-45deg);
+      }
+    }
+
+    &-input {
+      opacity: 0;
+
+      -moz-appearance: none;
+      -webkit-appearance: none;
+    }
+
+    &-input + &-title::after {
+      content: none;
+    }
+
+    &-input:checked + &-title::after {
+      content: "";
+    }
+
+    &-input:checked + &-title::before {
+      background: $color-green;
+    }
+
+    &-input:focus + &-title::before {
+      outline: $color-green auto 5px;
+    }
+  }
+
+}
diff --git a/src/components/OrderCustomizationsOptions/index.js b/src/components/OrderCustomizationsOptions/index.js
new file mode 100644
index 0000000..ca85945
--- /dev/null
+++ b/src/components/OrderCustomizationsOptions/index.js
@@ -0,0 +1 @@
+export * from './OrderCustomizationsOptions';
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
new file mode 100644
index 0000000..f79e244
--- /dev/null
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { OrderCustomizationsOptions } from '../OrderCustomizationsOptions';
+
+import './OrderCustomizationsSection.scss';
+
+export const OrderCustomizationsSection = ({ customizations }) => {
+  const { title, maxPermitted, options } = customizations;
+  const maxCount = maxPermitted || 1;
+
+  return (
+    <div className="customizations-sections">
+      <div className="customizations-sections__head">
+        <div className="modal__wrapper-content">
+          <div className="customizations-sections__title">
+            {title}
+          </div>
+          <div className="customizations-sections__count">
+            {`Choose up to ${maxCount}`}
+          </div>
+        </div>
+      </div>
+
+      <div className="customizations-sections__options">
+        <div className="modal__wrapper-content">
+          {options.map(
+            item => <OrderCustomizationsOptions option={item} key={item.uuid} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+OrderCustomizationsSection.propTypes = {
+  customizations: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+};
diff --git a/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
new file mode 100644
index 0000000..e4bcd2a
--- /dev/null
+++ b/src/components/OrderCustomizationsSection/OrderCustomizationsSection.scss
@@ -0,0 +1,22 @@
+.customizations-sections {
+  &__head {
+    background: #f5f5f5;
+    padding: 17px 0;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 21px;
+  }
+
+  &__count {
+    font-size: 14px;
+    line-height: 21px;
+    color: #757575;
+  }
+
+  &__options {
+    padding: 12px 0;
+  }
+}
diff --git a/src/components/OrderCustomizationsSection/index.js b/src/components/OrderCustomizationsSection/index.js
new file mode 100644
index 0000000..3ba4d91
--- /dev/null
+++ b/src/components/OrderCustomizationsSection/index.js
@@ -0,0 +1 @@
+export * from './OrderCustomizationsSection';
diff --git a/src/components/OrderFooter/OrderFooter.js b/src/components/OrderFooter/OrderFooter.js
new file mode 100644
index 0000000..e177fa1
--- /dev/null
+++ b/src/components/OrderFooter/OrderFooter.js
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import './OrderFooter.scss';
+
+export const OrderFooter = ({
+  hideModalWindow,
+  orderAmount,
+  currencyCode,
+  altPrice,
+}) => {
+  const [countItem, changeCountItem] = useState(1);
+  const totalAmount = orderAmount || altPrice;
+
+  return (
+    <>
+      <div className="counter">
+        <div className="counter__mobile">
+          Quantity
+        </div>
+        <img
+          className="counter__button"
+          src="./images/button-minus.svg"
+          alt="icon minus"
+          onClick={() => {
+            if (countItem > 1) {
+              changeCountItem(countItem - 1);
+            }
+          }}
+          onKeyPress={() => changeCountItem(countItem + 1)}
+          role="presentation"
+        />
+        <div className="counter__item">{countItem}</div>
+        <img
+          className="counter__button"
+          src="./images/button-plus.svg"
+          alt="icon plus"
+          onClick={() => changeCountItem(countItem + 1)}
+          onKeyPress={() => changeCountItem(countItem + 1)}
+          role="presentation"
+        />
+      </div>
+      <button
+        type="button"
+        className="button-order"
+        onClick={hideModalWindow}
+      >
+        <div className="button-order__wrapper-number">
+          <span
+            className="button-order__number"
+          >
+            {`Add ${countItem} to order`}
+          </span>
+        </div>
+        <span
+          className="button-order__amount"
+        >
+          {`${(totalAmount * countItem).toFixed(2)} ${currencyCode}`}
+        </span>
+      </button>
+    </>
+  );
+};
+
+OrderFooter.propTypes = {
+  hideModalWindow: PropTypes.func.isRequired,
+  orderAmount: PropTypes.number.isRequired,
+  currencyCode: PropTypes.string.isRequired,
+  altPrice: PropTypes.number,
+};
+
+OrderFooter.defaultProps = {
+  altPrice: 0,
+};
diff --git a/src/components/OrderFooter/OrderFooter.scss b/src/components/OrderFooter/OrderFooter.scss
new file mode 100644
index 0000000..b548d9f
--- /dev/null
+++ b/src/components/OrderFooter/OrderFooter.scss
@@ -0,0 +1,89 @@
+@import '../../styles/utils.scss';
+
+.counter {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $breack-point-phone) {
+    margin-bottom: 20px;
+  }
+
+  &__mobile {
+    display: none;
+    @media (max-width: $breack-point-phone) {
+      display: inline;
+      margin-right: auto;
+    }
+  }
+
+  &__button {
+
+    border-radius: 50%;
+
+    transition: box-shadow 300ms;
+
+    margin-right: 17px;
+
+    @media (max-width: $breack-point-phone) {
+      &:not(:last-of-type) {
+        margin-right: 26px;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    }
+
+    &:active {
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
+    }
+  }
+
+  &__item {
+    margin-right: 17px;
+
+    @media (max-width: $breack-point-phone) {
+      &:not(:last-of-type) {
+        margin-right: 26px;
+      }
+    }
+  }
+}
+
+.button-order {
+  display: flex;
+  justify-content: flex-end;
+
+  height: 55px;
+  width: 100%;
+  background: #247a00;
+  color: #fff;
+
+  font-weight: 500;
+
+  transition: box-shadow 300ms;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(36,122,0, 0.5);
+  }
+
+  &:active {
+    box-shadow: inset 0 0 10px rgba(36,122,0, 0.5);
+  }
+
+  &__amount {
+    margin-right: 16px;
+    display: block;
+    white-space: nowrap;
+  }
+
+  &__wrapper-number {
+    width: 100%;
+  }
+}
diff --git a/src/components/OrderFooter/index.js b/src/components/OrderFooter/index.js
new file mode 100644
index 0000000..2a91dec
--- /dev/null
+++ b/src/components/OrderFooter/index.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import { OrderFooter } from './OrderFooter';
+import { hideModalWindow } from '../../store/actions';
+import { selectOrderAmount, selectCurencyCode } from '../../store/selector';
+
+const mapStateToProps = state => ({
+  orderAmount: selectOrderAmount(state),
+  currencyCode: selectCurencyCode(state),
+});
+
+const mapDispatchToProps = {
+  hideModalWindow,
+};
+
+const Enhanced = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(OrderFooter);
+
+export { Enhanced as OrderFooter };
diff --git a/src/store/actions.js b/src/store/actions.js
index a0d89aa..d72bc9c 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -8,6 +8,7 @@ export const ACTION_TYPES = {
   STOP_LOADING: 'STOP_LOADING',
   SET_ORDER: 'SET_ORDER',
   SET_MODAL_WINDOW: 'SET_MODAL_WINDOW',
+  SET_ALT_DATA_MODAL_WINDOW: 'SET_ALT_DATA_MODAL_WINDOW',
 };
 
 const saveRestaurants = data => ({
@@ -33,16 +34,27 @@ const stopLoading = () => ({
   type: ACTION_TYPES.STOP_LOADING,
 });
 
-export const setOrder = uuid => ({
+const setOrder = uuid => ({
   type: ACTION_TYPES.SET_ORDER,
   payload: uuid,
 });
 
-export const setModalWindow = bool => ({
+const setModalWindow = bool => ({
   type: ACTION_TYPES.SET_MODAL_WINDOW,
   payload: bool,
 });
 
+export const setAltDataModalWindow = data => ({
+  type: ACTION_TYPES.SET_ALT_DATA_MODAL_WINDOW,
+  payload: data,
+});
+
+export const hideModalWindow = () => (dispatch) => {
+  dispatch(setModalWindow(false));
+  dispatch(setOrder(null));
+  dispatch(setRestaurantsError(null));
+};
+
 export const loadRestaurants = () => (dispatch) => {
   dispatch(startLoading());
   fetch(`${BASE_URL}restaurants/`)
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
index 1893864..7f7c335 100644
--- a/src/store/rootReducer.js
+++ b/src/store/rootReducer.js
@@ -7,6 +7,13 @@ const initialState = {
   error: null,
   order: null,
   showModalWindow: false,
+  orderAmount: 0,
+  altDataModalWindow: {
+    title: '',
+    imageUrl: '',
+    itemDescription: '',
+    price: 0,
+  },
 };
 
 export function rootReducer(state = initialState, action) {
@@ -39,7 +46,6 @@ export function rootReducer(state = initialState, action) {
         ...state,
         error: payload,
         restaurantsListData: null,
-        restaurantPage: null,
         order: null,
       });
     }
@@ -60,10 +66,12 @@ export function rootReducer(state = initialState, action) {
 
     case ACTION_TYPES.SET_ORDER: {
       const { payload } = action;
+      const price = payload ? payload.price : 0;
 
       return ({
         ...state,
         order: payload,
+        orderAmount: price,
       });
     }
 
@@ -76,6 +84,15 @@ export function rootReducer(state = initialState, action) {
       });
     }
 
+    case ACTION_TYPES.SET_ALT_DATA_MODAL_WINDOW: {
+      const { payload } = action;
+
+      return ({
+        ...state,
+        altDataModalWindow: payload,
+      });
+    }
+
     default:
       return state;
   }
diff --git a/src/store/selector.js b/src/store/selector.js
index 5330065..617d083 100644
--- a/src/store/selector.js
+++ b/src/store/selector.js
@@ -92,3 +92,24 @@ export const selectStateModalWindow = createSelector(
   rootSelector,
   ({ showModalWindow }) => showModalWindow
 );
+
+export const selectOrderAmount = createSelector(
+  rootSelector,
+  ({ orderAmount }) => orderAmount
+);
+
+export const selectCurencyCode = createSelector(
+  rootSelector,
+  ({ restaurantPageData }) => {
+    if (!restaurantPageData) {
+      return [];
+    }
+
+    return restaurantPageData.currencyCode;
+  }
+);
+
+export const selectAltDataModal = createSelector(
+  rootSelector,
+  ({ altDataModalWindow }) => altDataModalWindow
+);