diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index a53f39f..7faa8da 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -386,7 +386,7 @@ export default class App extends React.Component {
                        src={applicationIcon}/>
                 </Link>
 
-                <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
+                {/*<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>*/}
                 {/*<IconButton className="hide-on-small-only" style={{marginRight: 10}}*/}
                             {/*onClick={() => this.toggleDrawer()}>*/}
                   {/*<IconMenus/>*/}
@@ -403,11 +403,11 @@ export default class App extends React.Component {
               <Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
             </Button> */}
 
-                <Link onClick={this
-                  .changeRoute
-                  .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
-                  className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
-                  className="menuAkun">Home</span></MenuItem></Link>
+                {/*<Link onClick={this*/}
+                  {/*.changeRoute*/}
+                  {/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
+                  {/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
+                  {/*className="menuAkun">Home</span></MenuItem></Link>*/}
 
                 {/* <Link onClick={this
                   .changeRoute
diff --git a/src/common/pages/Dashboard/index.js b/src/common/pages/Dashboard/index.js
index 72f8731..abfcdc2 100644
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -29,6 +29,12 @@ import {default as MuiCard} from '@material-ui/core/Card'
 import {default as MuiCardContent} from '@material-ui/core/CardContent';
 import {default as MuiCardActions} from '@material-ui/core/CardActions';
 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 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';
@@ -53,6 +59,7 @@ import '../Vouchers/style.scss';
 import ModalTopupComponent from "../Wallet/Modal";
 import Typography from '@material-ui/core/Typography';
 import {styles} from "../RegisterNew/styles";
+import get from "lodash.get";
 
 const {
   LineChart,
@@ -123,77 +130,6 @@ class DashboardComponent extends React.Component {
 
     return (
       <Grid className={classes.root}>
-        <Grid
-          container
-          direction="row"
-          justify="center"
-          alignItems="center"
-          spacing={24}
-          style={{marginTop: 30}}>
-          <Grid item xs={12} sm={3} md={3} lg={3}>
-            {this.props.appstate.wallet.data.wallet ? (
-              <MuiCard className={classes.card}>
-                <MuiCardContent>
-                  <Typography variant="h5" component="h2">
-                    Voucher
-                  </Typography>
-                  <Typography component="p">
-                    <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                  </Typography>
-                </MuiCardContent>
-                <MuiCardActions>
-                  <MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
-                </MuiCardActions>
-              </MuiCard>
-            ) : ''}
-          </Grid>
-          <Grid item xs={12} sm={3} md={3} lg={3}>
-            {this.props.appstate.wallet.data.wallet ? (
-              <MuiCard className={classes.card}>
-                <MuiCardContent>
-                  <h3 style={{
-                    display: 'block',
-                    fontSize: '1rem',
-                    textTransform: 'uppercase',
-                    color: '#0006',
-                    letterSpacing: 1
-                  }}> Profile</h3>
-                  <div className="value">Please complete your profile</div>
-                  <div style={{marginTop: 10}}>
-                    <Button type="primary" icon="edit">Edit Profile</Button>
-                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
-                        <span>Edit Profile</span>
-                        <Icon className="ml-8" type="right" />
-                      </a> */}
-                  </div>
-                </MuiCardContent>
-              </MuiCard>
-            ) : ''}
-          </Grid>
-          <Grid item xs={12} sm={3} md={3} lg={3}>
-            {this.props.appstate.wallet.data.wallet ? (
-              <MuiCard className={classes.card}>
-                <MuiCardContent>
-                  <h3 style={{
-                    display: 'block',
-                    fontSize: '1rem',
-                    textTransform: 'uppercase',
-                    color: '#0006',
-                    letterSpacing: 1
-                  }}>Credit Card</h3>
-                  <div className="value ">Please add your credit card</div>
-                  <div style={{marginTop: 10}}>
-                    <Button type="primary" icon="plus">Add Credit Card</Button>
-                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
-                        <span>Add Credit Car</span>
-                        <Icon className="ml-8" type="right" />
-                      </a> */}
-                  </div>
-                </MuiCardContent>
-              </MuiCard>
-            ) : ''}
-          </Grid>
-        </Grid>
 
         <Grid
           container
@@ -201,7 +137,7 @@ class DashboardComponent extends React.Component {
           justify="center"
           alignItems="center"
           spacing={24}
-          style={{marginTop: 30}}>
+          style={{marginTop: 0}}>
 
           <Grid item xs={12} sm={12} md={12} lg={12}>
             <Slider {...settings}>
@@ -223,71 +159,151 @@ class DashboardComponent extends React.Component {
             </Slider>
           </Grid>
 
-          <Grid item xs={12} sm={12} md={12} lg={12}>
-            {/* <Grid item xs={12}>
-                <div>
-                  <div className="row">
-                    <div className="col l12 m12 s12 padding">
-                      <h3>
-                        Popular Items
-                      </h3>
-                      <Row gutter={10}>
-                        <PopularItemCardComponent/>
-                      </Row>
-                    </div>
-                  </div>
-                </div>
-              </Grid>
-              <Grid item xs={12}>
-                <div>
-                  <div className="row">
-                    <div className="col l12 m12 s12 padding">
-                      <h3>
-                        New Products
-                      </h3>
-                      <Row gutter={10}>
-                        <NewItemCardComponent/>
-                      </Row>
-                    </div>
-                  </div>
-                </div>
-              </Grid> */}
+          <Grid
+            container
+            direction="row"
+            justify="center"
+            alignItems="center"
+            spacing={24}
+            style={{marginTop: 30}}>
 
-            <Grid item xs={12}>
-              <div className={"voucher"} style={{marginTop: 0}}>
-                <div className="row">
-                  <div className="col l12 m12 s12 padding">
-                    <h3>
-                      Voucher & Gift Card
-                    </h3>
+            <Grid item xs={12} sm={3} md={3} lg={3}>
+              {this.props.appstate.wallet.data.wallet ? (
+                <MuiCard className={classes.card}>
+                  <MuiCardContent>
+                    <Typography variant="h5" component="h2">
+                      Voucher
+                    </Typography>
+                    <Typography component="p">
+                      <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                    </Typography>
+                  </MuiCardContent>
+                  <MuiCardActions>
+                    <MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
+                  </MuiCardActions>
+                </MuiCard>
+              ) : ''}
+            </Grid>
 
-                    <Row gutter={10}>
-                      {
-                        (this.vouchersStore.list.length > 0) ?
-                          this.vouchersStore.list.map((item, index) => {
-                            return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
-                              <ItemCard data={item}/>
-                            </Col>)
-                          })
-                          : (
-                            <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
-                          )
-                      }
-                    </Row>
+            <Grid item xs={12} sm={3} md={3} lg={3}>
+              {this.props.appstate.wallet.data.wallet ? (
+                <MuiCard className={classes.card}>
+                  <MuiCardContent>
+                    <Typography variant="h5" component="h2">
+                      Profile
+                    </Typography>
+                    <Typography component="p">
+                      Please complete your profile
+                    </Typography>
+                  </MuiCardContent>
+                  <MuiCardActions>
+                    <MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Edit Profile</MuiCardButton>
+                  </MuiCardActions>
+                </MuiCard>
+              ) : ''}
+            </Grid>
 
-                    <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>
+            <Grid item xs={12} sm={3} md={3} lg={3}>
+              {this.props.appstate.wallet.data.wallet ? (
+                <MuiCard className={classes.card}>
+                  <MuiCardContent>
+                    <Typography variant="h5" component="h2">
+                      Credit Card
+                    </Typography>
+                    <Typography component="p">
+                      Please add your credit card
+                    </Typography>
+                  </MuiCardContent>
+                  <MuiCardActions>
+                    <MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Add Credit Card</MuiCardButton>
+                  </MuiCardActions>
+                </MuiCard>
+              ) : ''}
             </Grid>
           </Grid>
+
+          <Grid
+            container
+            direction="row"
+            justify="center"
+            alignItems="center"
+            spacing={24}
+            style={{marginTop: 30}}>
+
+            <MuiGridList cellHeight={180} className={classes.gridList}>
+              <MuiGridListTile key="Subheader" cols={2} style={{height: 'auto'}}>
+                <ListSubheader component="div">December</ListSubheader>
+              </MuiGridListTile>
+
+              {(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 (
+                    <MuiGridListTile
+                      key={index}
+                      onClick={() => this.setState({isOpened: true, data: item})}>
+                      <img src={image} alt={''}/>
+                      <MuiGridListTileBar
+                        title={item.name}
+                        subtitle={<span>by: {item.name}</span>}
+                        actionIcon={
+                          <IconButton className={classes.icon}>
+                            <InfoIcon/>
+                          </IconButton>
+                        }
+                      />
+                    </MuiGridListTile>
+                  )
+                }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
+              }
+            </MuiGridList>
+
+            {/*<Grid item xs={12}>*/}
+              {/*<div className={"voucher"} style={{marginTop: 0}}>*/}
+                {/*<div className="row">*/}
+                  {/*<div className="col l12 m12 s12 padding">*/}
+                    {/*<h3>*/}
+                      {/*Voucher & Gift Card*/}
+                    {/*</h3>*/}
+
+                    {/*<Row gutter={10}>*/}
+                      {/*{*/}
+                        {/*(this.vouchersStore.list.length > 0) ?*/}
+                          {/*this.vouchersStore.list.map((item, index) => {*/}
+                            {/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
+                              {/*<ItemCard data={item}/>*/}
+                            {/*</Col>)*/}
+                          {/*})*/}
+                          {/*: (*/}
+                            {/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/}
+                          {/*)*/}
+                      {/*}*/}
+                    {/*</Row>*/}
+
+                    {/*<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>*/}
+            {/*</Grid>*/}
+          </Grid>
         </Grid>
+        <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>
     );