diff --git a/src/common/pages/Dashboard/index.js b/src/common/pages/Dashboard/index.js
index 16ffaad..72f8731 100644
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -27,6 +27,8 @@ import {
 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 MuiCardActions} from '@material-ui/core/CardActions';
+import {default as MuiCardButton} from '@material-ui/core/Button';
 import EmptyComponent from '../EmptyComponent';
 import * as _ from 'lodash';
 import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
@@ -49,6 +51,7 @@ 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";
 
 const {
@@ -119,7 +122,7 @@ class DashboardComponent extends React.Component {
     };
 
     return (
-      <div className={classes.root}>
+      <Grid className={classes.root}>
         <Grid
           container
           direction="row"
@@ -131,25 +134,16 @@ class DashboardComponent extends React.Component {
             {this.props.appstate.wallet.data.wallet ? (
               <MuiCard className={classes.card}>
                 <MuiCardContent>
-                  <h3 style={{
-                    display: 'block',
-                    fontSize: '1rem',
-                    textTransform: 'uppercase',
-                    color: '#0006',
-                    letterSpacing: 1
-                  }}>Voucher</h3>
-                  <div className="value">
-                    {/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
+                  <Typography variant="h5" component="h2">
+                    Voucher
+                  </Typography>
+                  <Typography component="p">
                     <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                  </div>
-                  <div style={{marginTop: 10}}>
-                    <Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
-                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
-                      <span>Add Voucher</span>
-                      <Icon className="ml-8" type="right" />
-                    </a> */}
-                  </div>
+                  </Typography>
                 </MuiCardContent>
+                <MuiCardActions>
+                  <MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
+                </MuiCardActions>
               </MuiCard>
             ) : ''}
           </Grid>
@@ -201,8 +195,15 @@ class DashboardComponent extends React.Component {
           </Grid>
         </Grid>
 
-        <div style={{marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff'}}>
-          <div>
+        <Grid
+          container
+          direction="row"
+          justify="center"
+          alignItems="center"
+          spacing={24}
+          style={{marginTop: 30}}>
+
+          <Grid item xs={12} sm={12} md={12} lg={12}>
             <Slider {...settings}>
               <div>
                 <img src={slider1} width={'100%'}/>
@@ -220,11 +221,10 @@ class DashboardComponent extends React.Component {
                 <img src={slider5} width={'100%'}/>
               </div>
             </Slider>
-          </div>
+          </Grid>
 
-          <div>
-            <Grid container spacing={0} style={{}}>
-              {/* <Grid item xs={12}>
+          <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">
@@ -252,44 +252,44 @@ class DashboardComponent extends React.Component {
                   </div>
                 </div>
               </Grid> */}
-              <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>
+            <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>
 
-                      <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>
+                    <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>
-              </Grid>
+              </div>
             </Grid>
-          </div>
-        </div>
+          </Grid>
+        </Grid>
         <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
-      </div>
+      </Grid>
     );
   }
 }