diff --git a/package-lock.json b/package-lock.json
index 2f67b61..e3028c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13332,6 +13332,14 @@
         }
       }
     },
+    "react-collapse": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz",
+      "integrity": "sha512-OO4NhtEqFtz+1ma31J1B7+ezdRnzHCZiTGSSd/Pxoks9hxrZYhzFEddeYt05A/1477xTtdrwo7xEa2FLJyWGCQ==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-color": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.14.1.tgz",
diff --git a/package.json b/package.json
index 0d6d5f8..d32402e 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "rc-table": "^6.1.0",
     "rc-util": "^4.3.0",
     "react-addons-shallow-compare": "^15.6.2",
+    "react-collapse": "^4.0.3",
     "react-color": "^2.13.8",
     "react-compound-timer": "^1.0.7",
     "react-confirm": "^0.1.16",
@@ -105,6 +106,7 @@
     "react-mapbox-gl": "^3.3.0",
     "react-markdown": "^3.1.0",
     "react-markdown-loader": "^1.1.14",
+    "react-motion": "^0.5.2",
     "react-native-vector-icons": "^5.0.0",
     "react-number-format": "^3.0.3",
     "react-prop-types": "^0.4.0",
diff --git a/src/common/pages/App/style.scss b/src/common/pages/App/style.scss
index 994101e..89cc211 100644
--- a/src/common/pages/App/style.scss
+++ b/src/common/pages/App/style.scss
@@ -79,7 +79,7 @@
     position: fixed;
     width: 100%;
     top: 0;
-    z-index: 1100;
+    z-index: 1000;
     background-color: #f1f5f9 !important;
     height: 70px !important;
     padding: 8px 24px;
diff --git a/src/common/pages/Vouchers/All/index.js b/src/common/pages/Vouchers/All/index.js
deleted file mode 100644
index 6f123d8..0000000
--- a/src/common/pages/Vouchers/All/index.js
+++ /dev/null
@@ -1,567 +0,0 @@
-import React from 'react';
-import {observer, inject} from 'mobx-react';
-import bind from 'bind-decorator';
-import {
-  Card,
-  CardActions,
-  CardHeader,
-  CardMedia,
-  CardTitle,
-  AutoComplete,
-  CardText,
-  FlatButton,
-  Divider,
-  RaisedButton,
-  Toolbar,
-  DatePicker,
-  FontIcon,
-  SelectField,
-  MenuItem,
-  ToolbarGroup,
-  FloatingActionButton,
-  ToolbarSeparator,
-  IconButton,
-  ToolbarTitle,
-  Table,
-  TableBody,
-  TableHeader,
-  TableHeaderColumn,
-  TableRow,
-  TableRowColumn,
-  TextField,
-  Paper,
-  RadioButton,
-  RadioButtonGroup,
-  DropDownMenu,
-  Dialog
-} from 'material-ui';
-import {withRouter} from 'react-router';
-import {BrowserRouter as Router, Route} from 'react-router-dom';
-import StarBorder from 'material-ui/svg-icons/toggle/star-border';
-import ContentAdd from 'material-ui/svg-icons/content/add';
-import SwipeableViews from 'react-swipeable-views';
-import SearchIcon from 'material-ui/svg-icons/action/search';
-import AddIcon from 'material-ui/svg-icons/content/add';
-import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
-import DeleteIcon from 'material-ui/svg-icons/content/delete-sweep';
-import ImageEdit from 'material-ui/svg-icons/image/edit';
-import EmptyComponent from '../../EmptyComponent';
-import LoadingDialog from "../../LoadingDialog";
-import Loader from 'react-loader-advanced';
-import {Row, Col} from 'antd';
-
-import '../style.scss';
-import {appConfig} from "../../../config/app";
-import {Link} from 'react-router-dom';
-import {LINKS} from "../../../routes";
-import {ItemCard} from '../ItemCard';
-import InfiniteScroll from 'react-infinite-scroller';
-
-@inject('appstate')
-@observer
-export default class All extends React.Component {
-  constructor(props) {
-    super(props);``
-    this.props = props;
-    this.state = {
-      searchText:'',
-      value: 0,
-      statusBanned: "Banned",
-      statusSoldOut: "Sold Out"
-    };
-    this.handleChange = this
-      .handleChange
-      .bind(this);
-    this.defaultState = Object.assign({}, this.state);
-    this.http = props.appstate.http;
-    this.authStore = props.appstate.auth;
-    this.uiStore = props.appstate.uiStore;
-    this.userData = props.appstate.userData;
-    this.globalUI = props.appstate.globalUI;
-    this.rewardStore = props.appstate.reward;
-    this.userData = props.appstate.userData;
-    this.myStoreItem = props.appstate.myStoreItem;
-  }
-
-  componentDidMount() {
-    // this.myStoreItem.isSearching = false;
-    // if(this.userData.role == 'store') {
-    //   this.myStoreItem.getAll();
-    // }
-    // if(this.userData.role == 'administrator') {
-    //   this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
-    //   console.log('ini id',this.props.id);
-    //   this.myStoreItem.getAll();
-    // }
-  }
-
-  componentWillUnmount(){
-    // this.myStoreItem.isSearching = false;
-    // this.myStoreItem.reset();
-  }
-
-  deleteClicked = (id) => {
-    this.state.id = id;
-    this.setState({
-      openedDelete: true
-    });
-  }
-
-  search = (event)=>{
-    console.log("dataSearch",event.target.value);
-    if(event.target.value.length == 0){
-      this.myStoreItem.isSearching = false;
-    }
-    else{
-      this.myStoreItem.isSearching = true;
-      this.myStoreItem.search(event.target.value);
-    }
-  }
-
-
-  handleClickDelete = (id) => {
-    this.rewardStore.deleteReward(id);
-    this.setState({
-      openedDelete: false,
-      openSnackbarDelete: true
-    });
-    this.globalUI.openSnackbar("Successful Deleted Existing Reward");
-  }
-
-  handleCloseDelete = () => {
-    this.setState({
-      openedDelete: false
-    })
-  }
-
-  handleChange = (event, index, value) => this.setState({value});
-
-  loadMore = ()=>{
-    console.log('RUNNss');
-    if(this.myStoreItem.data.length > 0){
-      this.myStoreItem.nextPage(true);
-    }
-  }
-
-  render() {
-
-    const data = [
-      {
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      },{
-        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
-        created_at: "2019-01-02T04:00:08.803Z",
-        custom_fields: null,
-        deleted_at: null,
-        description: null,
-        height: "0.00",
-        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
-        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
-        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
-        length: "0.00",
-        name: "Silly Oregano Seasoning",
-        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
-        product_id: 205,
-        product_tmpl_id: 291,
-        product_uom: 21,
-        odoo_stock_id: 123634,
-        order: 147291,
-        preorder: null,
-        regular_price: "10",
-        sale_date_from: null,
-        sale_date_to: null,
-        sale_price: null,
-        seen: 0,
-        sold: 0,
-        stock: "34.00",
-        uom: "pack",
-        updated_at: "2019-01-02T13:00:05.042Z",
-        use_weight_as_stock: false,
-        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
-        visible: true,
-        weight: "0.04",
-        width: "0.00",
-        wishlist: "0",
-      }
-    ];
-
-    const actionsDelete = [
-      <FlatButton
-        label="Cancel"
-        primary={true}
-        onClick={this.handleCloseDelete}
-      />,
-      <FlatButton
-        label="Delete"
-        primary={true}
-        onClick={() => this.handleClickDelete(this.state.id)}
-      />,
-    ];
-
-    return (
-      <div>
-        <div className="row">
-          <div className="col l12 m12 s12">
-            <Card className="animated fadeIn cardLite">
-              <Toolbar className="toolbarCard radius4" style={{backgroundColor: '#fff'}}>
-                <ToolbarGroup>
-                  <SearchIcon style={{marginRight: 8, color: "#999"}}/>
-                  <TextField
-                    hintText="Search All by Name"
-                    style={{fontSize: 14}}
-                    hintStyle={{fontSize: 14}}
-                    underlineShow={false}
-                    // onChange={this.search}
-                  />
-                </ToolbarGroup>
-                {/*<ToolbarGroup className="ToolbarGroupLast">*/}
-                  {/*<ToolbarSeparator/>*/}
-                  {/*<Link to={`${LINKS.FORM_ITEMS}`}>*/}
-                    {/*<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Items"*/}
-                                  {/*primary={true}/>*/}
-                  {/*</Link>*/}
-                {/*</ToolbarGroup>*/}
-              </Toolbar>
-
-              {/*<div style={{paddingBottom: 5}}>*/}
-              {/*<Loader show={false} message={<LoadingDialog/>}*/}
-              {/*messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>*/}
-
-              {/*</Loader>*/}
-              {/*</div>*/}
-              <Dialog
-                title="Warning"
-                actions={actionsDelete}
-                modal={true}
-                open={this.state.openedDelete}
-                onRequestClose={() => this.handleCloseDelete()}
-              >
-                Are you sure want to delete this data?
-              </Dialog>
-            </Card>
-          </div>
-        </div>
-
-        <InfiniteScroll pageStart={0} loadMore={this.loadMore} hasMore={true}>
-        <Row className="row rowItem" gutter={8}>
-          {(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
-          <Col className="gutter-row col animated fadeIn" span={4}>
-            <Link to={`${LINKS.FORM_ITEMS}`} style={{color: '#424770'}}>
-              <div className="flex add-new"
-                   style={{
-                     flexDirection: 'column',
-                     alignItems: 'center',
-                     justifyContent: 'center',
-                     height: 323
-                   }}>
-                <div>
-                  <FontIcon className="material-icons icon-add ">add</FontIcon>
-                </div>
-                Add new item
-              </div>
-            </Link>
-          </Col> : ""
-          }
-
-          {(this.userData.role === 'administrator') ?
-            <Col className="gutter-row col animated fadeIn" span={4}>
-              <Link to={`${LINKS.FORM_ITEMS}/${this.props.id}`} style={{color: '#424770'}}>
-                <div className="flex add-new"
-                     style={{
-                       flexDirection: 'column',
-                       alignItems: 'center',
-                       justifyContent: 'center',
-                       height: 323
-                     }}>
-                  <div>
-                    <FontIcon className="material-icons icon-add ">add</FontIcon>
-                  </div>
-                  Add new item
-                </div>
-              </Link>
-            </Col> : ""
-          }
-
-          {data.map(item => {
-            return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}>
-              <div className="gutter-box"><ItemCard data={item}/></div>
-            </Col>)
-          })}
-        </Row>
-        </InfiniteScroll>
-
-      </div>
-    )
-  }
-}
-
diff --git a/src/common/pages/Vouchers/ItemCard/index.js b/src/common/pages/Vouchers/ItemCard/index.js
index 44ce089..3f24f5c 100644
--- a/src/common/pages/Vouchers/ItemCard/index.js
+++ b/src/common/pages/Vouchers/ItemCard/index.js
@@ -2,16 +2,13 @@ import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {
   Card,
-  CardMedia,
-  CardTitle,
-  CardText,
-  FontIcon,
-} from 'material-ui';
+} from 'antd';
 import NumberFormat from 'react-number-format';
 import {Link} from 'react-router-dom';
 import {LINKS} from "../../../routes";
 import {appConfig} from "../../../config/app";
 import get from 'lodash.get';
+import {Collapse} from "react-collapse";
 
 @inject('appstate')
 @observer
@@ -31,68 +28,12 @@ export class ItemCard extends React.Component {
 
   render() {
     const {data = {}} = this.props;
-    const main = get(data,'images.main',null);
-    // const mainImage = this.http.appendImagePath(main);
-    const mainImage = main;
 
     return (
-      <Link to={`${LINKS.FORM_ITEMS}/edit/${data.id}`}>
-      <Card className="animated fadeIn cardLite marketplace-cardBox" style={{height: 323, cursor: 'pointer', textOverflow: 'ellipsis'}}>
-        <CardMedia>
-          <img src={(main) ? mainImage : 'https://marketplace-sillyfish-api.asacreative.com/assets/no-image.png'} alt="" style={{height: 175, objectFit: 'cover'}}/>
-        </CardMedia>
-        {/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/}
-
-        <CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}
-                   subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/>
-        {/*<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}*/}
-                   {/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/}
-                                           {/*value={data.regular_price}*/}
-                                           {/*displayType={'text'}*/}
-                                           {/*thousandSeparator={true} prefix={'Rp'}/>}/>*/}
-
-        {/*<CardText style={{padding: 8}}>*/}
-        {/*<p className="font-14" style={{marginBottom: 32, fontWeight: 'bold'}}>{data.name}</p>*/}
-        {/*<div className="flex flexSpaceBetween">*/}
-        {/*<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}} value={data.regular_price}*/}
-        {/*displayType={'text'}*/}
-        {/*thousandSeparator={true} prefix={'Rp'}/>*/}
-        {/*<div style={{fontSize: "11px"}}><span style={{color: '#5a637e7d'}}>Stock</span>{data.stock}</div>*/}
-        {/*</div>*/}
-        {/*</CardText>*/}
-
-        <CardText style={{
-          padding: '16px 16px 8px',
-          boxShadow: '0px 5px 15px rgba(0,0,0,0.05)',
-          borderRadius: 6,
-          fontSize: 12
-        }}>
-          <div><span style={{color: '#636c72', fontWeight: '300'}}>Stock :</span> {+data.stock} {data.uom}</div>
-        </CardText>
-
-        <CardText style={{padding: "4px 16px"}}>
-          <div className="flex flexSpaceBetween">
-            <div className="font-12" style={{fontSize: '.72rem'}}>
-              <FontIcon className="material-icons font-12"
-                        color='#636c72'
-                        style={{
-                          display: "inlineFlex", verticalAlign: "middle", lineHight: 1
-                        }}>remove_red_eye</FontIcon> : {data.seen}
-            </div>
-            <div className="" style={{fontSize: '.72rem'}}>
-              <FontIcon className="material-icons font-12" color='#636c72' style={{
-                display: "inlineFlex",
-                verticalAlign: "middle",
-                lineHight: 1,
-              }}>favorite_border</FontIcon> : {data.wishlist}
-            </div>
-            <div style={{fontSize: '.72rem'}}><span style={{color: '#636c72', fontWeight: '300'}}>Sold</span>
-              : {data.sold}</div>
-          </div>
-        </CardText>
-
+      <Card className={'itemCard'}>
+        <img className={'imageCard'} src={data.image} />
+        <p className={'titleCard'}>{data.name}</p>
       </Card>
-      </Link>
     )
   }
 
diff --git a/src/common/pages/Vouchers/Modal/index.js b/src/common/pages/Vouchers/Modal/index.js
new file mode 100644
index 0000000..60defa2
--- /dev/null
+++ b/src/common/pages/Vouchers/Modal/index.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Link} from 'react-router';
+import { Modal, Button, Alert, Select } from 'antd';
+import './style.scss';
+
+const Option = Select.Option;
+@inject('appstate')
+@observer
+export default class ModalVouchersComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      selectedOption: '0 Points'
+    };
+    this.defaultState = Object.assign({}, this.state);
+  }
+
+  componentDidMount() {}
+
+  render() {
+    const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
+
+    return (
+      <Modal
+        title={title}
+        visible={isVisible}
+        onOk={onOk}
+        onCancel={onCancel}
+        footer={null}
+        bodyStyle={{
+          padding: 0,
+          margin: 0,
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+        style={{
+          minWidth: '50vw'
+        }}
+      >
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          background: data.background_color || '#aaa',
+          // height: 500,
+          flex: 0.3
+        }}>
+          <img className={'imageModal'} src={data.image} />
+          <p className={'titleModal'}>{data.name}</p>
+        </div>
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 0.7,
+          padding: 30
+        }}>
+          <p className={'descriptionModal'} >{data.description}</p>
+
+          {(data.additional_information.length > 0) && <Alert className={'informationAlertModal'} message={
+            <div className={'informationContainerModal'}>
+              <p className={'informationTitleModal'}>Information</p>
+              <p className={'informationBodyModal'}>{data.additional_information}</p>
+            </div>
+          } type="success" />}
+
+          <Select
+            showSearch
+            className={'optionSelectModal'}
+            placeholder="Please Select your Option"
+            optionFilterProp="children"
+            onChange={(e) => this.setState({selectedOption: e})}
+            // filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+          >
+            {data.option.map((item, index) => {
+              return <Option value={item.cost}>{item.value}</Option>
+            })}
+          </Select>
+
+          <div className={'costContainerModal'}>
+            <div className={'costLeftPaneModal'}>
+              <p className={'costTitleModal'}>Cost</p>
+              <p className={'costValueModal'}>{this.state.selectedOption}</p>
+            </div>
+            <div className={'costRightPaneModal'}>
+              <Button className={'costButtonModal'} size={"large"} block>Buy</Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/src/common/pages/Vouchers/Modal/style.scss b/src/common/pages/Vouchers/Modal/style.scss
new file mode 100644
index 0000000..b8c7556
--- /dev/null
+++ b/src/common/pages/Vouchers/Modal/style.scss
@@ -0,0 +1,65 @@
+.imageModal{
+  width: 120px;
+}
+
+.titleModal{
+  text-align: center;
+  margin-top: 10px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.descriptionModal{
+
+}
+
+.informationAlertModal{
+  margin-top: 10px;
+  margin-bottom: 30px;
+  .informationContainerModal{
+    padding-top: 10px;
+    .informationTitleModal{
+      color: #5d961f;
+      font-weight: 700;
+    }
+    .informationBodyModal{}
+  }
+}
+
+.optionSelectModal{
+  margin-bottom: 30px;
+}
+
+.costContainerModal{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  //position: absolute;
+  //bottom: 10px;
+  //width: 32vw;
+  .costLeftPaneModal{
+    display: flex;
+    flex-direction: column;
+    flex: 0.5;
+    .costTitleModal{
+      color: #aaa;
+      font-size: 1.0rem;
+      margin-bottom: 0px;
+    }
+    .costValueModal{
+      color: #c21a1a;
+      font-size: 1.5rem;
+      margin-bottom: 0px;
+    }
+  }
+  .costRightPaneModal{
+    display: flex;
+    flex: 0.5;
+    justify-content: center;
+    align-items: center;
+    .costButtonModal{
+      background-color: #5d961f;
+      color: #fff;
+    }
+  }
+}
diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js
index d752e9a..79ad780 100644
--- a/src/common/pages/Vouchers/index.js
+++ b/src/common/pages/Vouchers/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {Link} from 'react-router';
-import { Affix, Card, Slider, Select } from 'antd';
+import {Affix, Card, Slider, Select, Col, Row } from 'antd';
 import {Tab, Tabs} from 'material-ui';
 import './style.scss';
-import All from "./All/index";
+import {ItemCard} from "./ItemCard";
+import ModalVouchersComponent from "./Modal";
 
 const Option = Select.Option;
 @inject('appstate')
@@ -14,8 +15,20 @@ export default class VouchersComponent extends React.Component {
     super(props);
     this.props = props;
     this.state = {
-      valueMinimal: 0,
-      valueMaximal: 0,
+      isOpened: false,
+      data: {
+        name: '',
+        image: '',
+        description: '',
+        additional_information: '',
+        background_color: '',
+        option: [
+          {
+            value: '',
+            cost: ''
+          },
+        ]
+      },
     };
     this.defaultState = Object.assign({}, this.state);
   }
@@ -23,61 +36,208 @@ export default class VouchersComponent extends React.Component {
   componentDidMount() {
   }
 
-  handleChangeMinimal = (valueMinimal) => {
-    this.setState({ valueMinimal });
-  };
-
-  handleChangeMaximal = (valueMaximal) => {
-    this.setState({ valueMaximal });
-  };
-
-  handleChange = (value) => {
-    console.log(`selected ${value}`);
-  }
-
-  handleBlur = () => {
-    console.log('blur');
-  }
-
-  handleFocus = () => {
-    console.log('focus');
-  }
-
   render() {
-    const { valueMinimal, valueMaximal } = this.state;
+    const data = [
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+      {
+        name: 'KFC',
+        image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
+        description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
+        additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
+        background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
+        option: [
+          {
+            value: 'Rp. 50.000',
+            cost: '50 Points'
+          },
+          {
+            value: 'Rp. 100.000',
+            cost: '100 Points'
+          },
+          {
+            value: 'Rp. 150.000',
+            cost: '150 Points'
+          },
+          {
+            value: 'Rp. 200.000',
+            cost: '200 Points'
+          },
+        ]
+      },
+    ];
 
     return (
       <div className="setting">
         <div className="row">
-          <div className="col l3 m3 s3 no-padding">
-            <Affix offsetTop={90}>
-              <Card title="Filter" bordered={true} style={{ width: '100%' }}>
-                <p>Min. Points</p>
-                <Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
+          <div className="col l12 m12 s12 padding">
+            <p className={'pageTitle'}>
+              Voucher & Gift Card
+            </p>
 
-                <p>Max. Points</p>
-                <Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
+            <Row gutter={10}>
+              {data.map((item, index) => {
+                return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
+                  <ItemCard data={item}/>
+                </Col>)
+              })}
+            </Row>
 
-                <p style={{marginTop: 25}}>Category</p>
-                <Select
-                  showSearch
-                  style={{ width: '100%' }}
-                  placeholder="Select a category"
-                  optionFilterProp="children"
-                  onChange={this.handleChange}
-                  onFocus={this.handleFocus}
-                  onBlur={this.handleBlur}
-                  // filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
-                >
-                  <Option value="jack">Electronic</Option>
-                  <Option value="lucy">Fashion</Option>
-                  <Option value="tom">Food</Option>
-                </Select>
-              </Card>
-            </Affix>
-          </div>
-          <div className="col l9 m9 s9 no-padding">
-            <All/>
+            <ModalVouchersComponent
+              title={this.state.data.name+' Vouchers'}
+              data={this.state.data}
+              isVisible={this.state.isOpened}
+              onOk={() => this.setState({isOpened: false})}
+              onCancel={() => this.setState({isOpened: false})}
+            />
           </div>
         </div>
       </div>
diff --git a/src/common/pages/Vouchers/style.scss b/src/common/pages/Vouchers/style.scss
index 6d4e533..57971c8 100644
--- a/src/common/pages/Vouchers/style.scss
+++ b/src/common/pages/Vouchers/style.scss
@@ -1,67 +1,31 @@
 .setting {
-    margin-top: 35px;
-    .container {
-      padding: 25px;
-  
-      .ant-card {
-        background: #fff;
-        border-radius: 0;
-        font-size: 12px;
-        position: relative;
-        overflow: hidden;
-        transition: all .3s;
-      }
-      .ant-card-head {
-        height: 48px;
-        line-height: 48px;
-        background: #fff;
-        border-bottom: 0 solid #e9e9e9;
-        padding: 0 24px;
-      }
-      .ant-card:hover {
-        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-        border-color: transparent;
-      }
-      .ant-card-body-dashboard {
-        padding: 10px;
-      }
-    }
-  
-  
-    .label-form {
-      font-size: 14px;
-      line-height: 30px;
-      color: rgb(153, 153, 153);
-      text-shadow: rgb(255, 255, 255) 0px 1px 0px;
-      margin-bottom: -8px;
-    }
-  
-    .backgroundImage {
-      height: 182px;
-      background-image: url('/assets/images/material3.jpg');
-      background-position: center;
-      background-size: cover;
-      cursor: pointer;
-      min-height: 75px;
-      position: relative;
-      width: 100%;
-    }
-  
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20vh;
+  max-width: 70vw;
+  p.pageTitle{
+    font-size: 1.5rem;
   }
-  
-  .photo-title{
-    font-size: 1.25em;
-    font-weight: 400;
-    margin-left: 12px;
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
-  
-  .box-upload{
+
+  .itemCard{
+    background-color: #eee;
+    border: #ccc 1px solid;
     width: 100%;
-    height: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    cursor: pointer;
   }
-  
-  
-  
-  
\ No newline at end of file
+
+  .imageCard{
+    width: 120px;
+  }
+
+  .titleCard{
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: -10px;
+  }
+}