diff --git a/src/common/pages/Dashboard/index.js b/src/common/pages/Dashboard/index.js
index 06040fb..3d8eef7 100644
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -1,17 +1,17 @@
 import React from "react";
-import {inject, observer} from "mobx-react";
+import { inject, observer } from "mobx-react";
 import compose from 'recompose/compose';
 import withStyles from "@material-ui/core/styles/withStyles";
-import withWidth, {isWidthUp} from '@material-ui/core/withWidth';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 import QueueAnim from 'rc-queue-anim';
 import "./style.scss";
 import NumberFormat from 'react-number-format';
-import {LINKS} from './../../routes'
-import {Link} from 'react-router-dom';
+import { LINKS } from './../../routes'
+import { Link } from 'react-router-dom';
 import CardAdmin from './CardAdmin';
 import CardAgent from './CardAgent';
 import moment from 'moment';
-import {Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row,} from 'antd';
+import { Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row, } from 'antd';
 import DC from 'decimal.js-light';
 import {
   Paper,
@@ -27,29 +27,29 @@ import {
   Divider, ListItem, List
 } from 'material-ui';
 import Grid from '@material-ui/core/Grid';
-import {default as MuiCard} from '@material-ui/core/Card'
-import {default as MuiCardContent} from '@material-ui/core/CardContent';
-import {default as MuiCardMedia} from '@material-ui/core/CardMedia';
-import {default as MuiCardActions} from '@material-ui/core/CardActions';
-import {default as MuiCardActionArea} from '@material-ui/core/CardActionArea';
-import {default as MuiCardButton} from '@material-ui/core/Button';
-import {default as MuiGridList} from '@material-ui/core/GridList';
-import {default as MuiGridListTile} from '@material-ui/core/GridListTile';
-import {default as MuiButton} from '@material-ui/core/Button';
-import {default as MuiDivider} from '@material-ui/core/Divider';
+import { default as MuiCard } from '@material-ui/core/Card'
+import { default as MuiCardContent } from '@material-ui/core/CardContent';
+import { default as MuiCardMedia } from '@material-ui/core/CardMedia';
+import { default as MuiCardActions } from '@material-ui/core/CardActions';
+import { default as MuiCardActionArea } from '@material-ui/core/CardActionArea';
+import { default as MuiCardButton } from '@material-ui/core/Button';
+import { default as MuiGridList } from '@material-ui/core/GridList';
+import { default as MuiGridListTile } from '@material-ui/core/GridListTile';
+import { default as MuiButton } from '@material-ui/core/Button';
+import { default as MuiDivider } from '@material-ui/core/Divider';
 import Hidden from '@material-ui/core/Hidden';
 import Chip from '@material-ui/core/Chip';
-import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar';
+import { default as MuiGridListTileBar } from '@material-ui/core/GridListTileBar';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/Info';
 import EmptyComponent from '../EmptyComponent';
 import * as _ from 'lodash';
-import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
+import { grey400, darkBlack, lightBlack, black } from 'material-ui/styles/colors';
 import './style.scss';
-import {Carousel} from 'react-responsive-carousel'
-import {ActionGrade, ContentDrafts, ContentInbox, ContentSend} from "material-ui/svg-icons/index";
-import {constant} from "../../config/const";
+import { Carousel } from 'react-responsive-carousel'
+import { ActionGrade, ContentDrafts, ContentInbox, ContentSend } from "material-ui/svg-icons/index";
+import { constant } from "../../config/const";
 import Slider from "react-slick";
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -59,14 +59,14 @@ import slider2 from '../../../../assets/images/slider/2.jpg';
 import slider3 from '../../../../assets/images/slider/3.jpg';
 import slider4 from '../../../../assets/images/slider/4.jpg';
 import slider5 from '../../../../assets/images/slider/5.jpg';
-import {ItemCard} from "../Vouchers/ItemCard";
+import { ItemCard } from "../Vouchers/ItemCard";
 import ModalVouchersComponent from "../Vouchers/Modal";
 import PopularItemCardComponent from "./PopularItemCard";
 import NewItemCardComponent from "./NewItemCard";
 import '../Vouchers/style.scss';
 import ModalTopupComponent from "../Wallet/Modal";
 import Typography from '@material-ui/core/Typography';
-import {styles} from "../RegisterNew/styles";
+import { styles } from "../RegisterNew/styles";
 import get from "lodash.get";
 
 const {
@@ -123,11 +123,11 @@ class DashboardComponent extends React.Component {
   }
 
   setModalTopup = (bool) => {
-    this.setState({modalTopup: bool});
+    this.setState({ modalTopup: bool });
   };
 
   render() {
-    const {classes} = this.props;
+    const { classes } = this.props;
     const getGridListCols = () => {
       if (isWidthUp('lg', this.props.width)) {
         return 4;
@@ -161,24 +161,24 @@ class DashboardComponent extends React.Component {
           justify="center"
           alignItems="center"
           spacing={24}
-          style={{marginTop: 0}}>
+          style={{ marginTop: 0 }}>
 
           <Grid item xs={12} sm={12} md={12} lg={12}>
             <Slider {...settings}>
               <div>
-                <img src={slider1} width={'100%'}/>
+                <img src={slider1} width={'100%'} />
               </div>
               <div>
-                <img src={slider2} width={'100%'}/>
+                <img src={slider2} width={'100%'} />
               </div>
               <div>
-                <img src={slider3} width={'100%'}/>
+                <img src={slider3} width={'100%'} />
               </div>
               <div>
-                <img src={slider4} width={'100%'}/>
+                <img src={slider4} width={'100%'} />
               </div>
               <div>
-                <img src={slider5} width={'100%'}/>
+                <img src={slider5} width={'100%'} />
               </div>
             </Slider>
           </Grid>
@@ -189,7 +189,7 @@ class DashboardComponent extends React.Component {
             justify="center"
             alignItems="center"
             spacing={24}
-            style={{marginTop: 30}}>
+            style={{ marginTop: 30 }}>
 
             <Grid item xs={10} sm={3} md={3} lg={3}>
               {this.props.appstate.wallet.data.wallet ? (
@@ -199,7 +199,7 @@ class DashboardComponent extends React.Component {
                       Voucher
                     </Typography>
                     <Typography component="p">
-                      <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                      <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
                     </Typography>
                   </MuiCardContent>
                   <MuiCardActions>
@@ -252,9 +252,9 @@ class DashboardComponent extends React.Component {
             justify="center"
             alignItems="center"
             spacing={24}
-            style={{marginTop: 30}}>
+            style={{ marginTop: 30 }}>
 
-            <Grid item xs={10} sm={10} md={9} lg={9}>
+            {/* <Grid item xs={10} sm={10} md={9} lg={9}>
               <Typography variant="h6" gutterBottom>
                 Voucher & Gift Card
               </Typography>
@@ -280,11 +280,16 @@ class DashboardComponent extends React.Component {
                             component="img"
                             alt={item.name}
                             className={classes.media}
-                            height="130"
+                            height="120"
+                            style={{
+                              marginLeft: 'auto',
+                              marginRight: 'auto',
+                              width: 180
+                            }}
                             image={image}
                             title={item.name}
                           />
-                          <MuiDivider light/>
+                          <MuiDivider light />
                           <MuiCardContent>
                             <Typography noWrap={true} variant="subtitle1">
                               {item.name}
@@ -301,7 +306,7 @@ class DashboardComponent extends React.Component {
                               fullWidth
                               variant="outlined"
                               color="primary"
-                              onClick={() => this.setState({isOpened: true, data: item})}
+                              onClick={() => this.setState({ isOpened: true, data: item })}
                               size="small">
                               Redeem
                             </MuiButton>
@@ -309,25 +314,94 @@ class DashboardComponent extends React.Component {
                         </MuiCard>
                       </MuiGridListTile>
                     )
-                  }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
+                  }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
                 }
               </MuiGridList>
+
+            </Grid> */}
+
+            <Grid item xs={10} sm={10} md={9} lg={9}>
+              <Typography variant="h6" gutterBottom>
+                Voucher & Gift Card
+              </Typography>
+            <Grid container spacing={24}
+              justify="center"
+              alignItems="center"
+              style={{ marginTop: 15 }}>
+              {(this.vouchersStore.list.length > 0) ?
+                this.vouchersStore.list.map((item, index) => {
+                  let image = get(item, 'images.logo', '');
+
+                  if (!image.includes('http')) {
+                    image = this.http.appendImagePath(image);
+                  }
+                  return (
+                    <Grid item xs={12} sm={6} md={4} lg={3}>
+
+                      <MuiCard className={classes.card}>
+                        <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
+                        <MuiCardMedia
+                          component="img"
+                          alt={item.name}
+                          className={classes.media}
+                          height="120"
+                          style={{
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                            marginTop:10,
+                            marginBottom:10,
+                            width: 180,
+                            objectFit:'contain'
+                          }}
+                          image={image}
+                          title={item.name}
+                        />
+                        </div>
+                        <MuiDivider light />
+                        <MuiCardContent>
+                          <Typography noWrap={true} variant="subtitle1">
+                            {item.name}
+                          </Typography>
+                          <Typography className={classes.pos} color="textSecondary">
+                            Ind
+                    </Typography>
+                          <Typography variant="subtitle2">
+                            From: 100 Point
+                    </Typography>
+                        </MuiCardContent>
+                        <MuiCardActions>
+                          <MuiButton
+                            fullWidth
+                            variant="outlined"
+                            color="primary"
+                            onClick={() => this.setState({ isOpened: true, data: item })}
+                            size="small">
+                            Redeem
+                    </MuiButton>
+                        </MuiCardActions>
+                      </MuiCard>
+                    </Grid>
+                  )
+                }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
+              }
             </Grid>
+            </Grid>
+
           </Grid>
         </Grid>
         {this.state.isOpened && (
-              <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})}
-              />
-            )}
-        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
+          <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 })}
+          />
+        )}
+        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
       </Grid>
     );
   }
 }
 
-export default compose(withStyles(styles), withWidth(),)(DashboardComponent);
+export default compose(withStyles(styles), withWidth())(DashboardComponent);