diff --git a/src/common/pages/Dashboard/index.js b/src/common/pages/Dashboard/index.js
index 3e9717e..5f0457d 100644
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -1,6 +1,8 @@
 import React from "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 QueueAnim from 'rc-queue-anim';
 import "./style.scss";
 import NumberFormat from 'react-number-format';
@@ -126,6 +128,21 @@ class DashboardComponent extends React.Component {
 
   render() {
     const {classes} = this.props;
+    const getGridListCols = () => {
+      if (isWidthUp('lg', this.props.width)) {
+        return 4;
+      }
+
+      if (isWidthUp('md', this.props.width)) {
+        return 3;
+      }
+
+      if (isWidthUp('sm', this.props.width)) {
+        return 2;
+      }
+
+      return 1;
+    }
     const settings = {
       arrows: true,
       infinite: true,
@@ -237,11 +254,11 @@ class DashboardComponent extends React.Component {
             spacing={24}
             style={{marginTop: 30}}>
 
-            <Grid item xs={9} sm={9} md={9} lg={9}>
+            <Grid item xs={10} sm={10} md={9} lg={9}>
               <Typography variant="h6" gutterBottom>
                 Voucher & Gift Card
               </Typography>
-              <MuiGridList spacing={10} cellHeight={180} cols={4} className={classes.gridList} style={{
+              <MuiGridList cellHeight={180} cols={getGridListCols()} className={classes.gridList} style={{
                 width: '100%',
                 height: undefined,
               }}>
@@ -253,83 +270,49 @@ class DashboardComponent extends React.Component {
                       image = this.http.appendImagePath(image);
                     }
                     return (
-                        <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
-                          height: 'auto',
-                          padding: 5,
-                          // border: "1px solid #000"
-                        }}>
-                          <MuiCard className={classes.card}>
-                            <MuiCardMedia
-                              component="img"
-                              alt={item.name}
-                              className={classes.media}
-                              height="130"
-                              image={image}
-                              title={item.name}
-                            />
-                            <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>
-                        </MuiGridListTile>
+                      <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
+                        height: 'auto',
+                        padding: 5,
+                        // border: "1px solid #000"
+                      }}>
+                        <MuiCard className={classes.card}>
+                          <MuiCardMedia
+                            component="img"
+                            alt={item.name}
+                            className={classes.media}
+                            height="130"
+                            image={image}
+                            title={item.name}
+                          />
+                          <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>
+                      </MuiGridListTile>
                     )
                   }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
                 }
               </MuiGridList>
             </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>*/}
-
-            {/*<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
@@ -345,4 +328,4 @@ class DashboardComponent extends React.Component {
   }
 }
 
-export default withStyles(styles)(DashboardComponent);
+export default compose(withStyles(styles), withWidth(),)(DashboardComponent);