diff --git a/package-lock.json b/package-lock.json
index 2557cee..062ebd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7894,6 +7894,7 @@
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7905,15 +7906,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8003,7 +8007,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8012,6 +8017,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -8034,6 +8040,7 @@
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -8120,7 +8127,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8129,6 +8137,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8214,6 +8223,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/src/common/pages/RegisterNew/index.js b/src/common/pages/RegisterNew/index.js
index 9cd62c4..79a8d4a 100644
--- a/src/common/pages/RegisterNew/index.js
+++ b/src/common/pages/RegisterNew/index.js
@@ -40,6 +40,8 @@ class RegisterPage extends React.Component {
         fileList_ktp: [],
         fileList_photo: [],
 
+        query: {},
+
         // form
         confirmPassword: "",
         phone_number: "",
@@ -65,6 +67,18 @@ class RegisterPage extends React.Component {
     }
 
     componentDidMount() {
+      let {location:{search}} = this.props;
+      search = search.substr(1);
+
+      const query = search.split("&")
+        .map(q => q.split('='))
+        .reduce((all, q) => {
+          all[q[0]] = q[1];
+          return all;
+        }, {});
+
+      this.setState({query});
+
       this.place.getAllProvince();
     }
 
@@ -114,6 +128,15 @@ class RegisterPage extends React.Component {
     };
 
     register = () => {
+
+        if (this.state.upload_photo === '') {
+          return message.warning("please upload photo");
+        }
+
+        if (this.state.upload_ktp === '') {
+          return message.warning("please upload ktp");
+        }
+
         this.setState({ isLoading: true });
         let data = {
             fullname: this.state.full_name,
@@ -129,11 +152,13 @@ class RegisterPage extends React.Component {
             district_id: this.state.district,
             subdistrict_id: this.state.subdistrict,
             zip_code: this.state.zip_code,
+            referal: this.state.query.referal,
             additional_data: {}
         };
         this.authStore.register(data).then(res => {
             setTimeout(() => {
                 this.setState({ isLoading: false });
+                message.success("Please check your email to confirm your account");
             }, 1000);
         }).catch(err => {
             this.setState({ isLoading: false });
@@ -476,10 +501,31 @@ class RegisterPage extends React.Component {
                                         </Grid>
                                     </div>
 
+                                    <Grid item xs={12} sm={12} md={12}>
+                                      <TextField
+                                        label="Referal"
+                                        value={this.state.query.referal}
+                                        onChange={event => {
+                                          this.setState({
+                                            query: {
+                                              ...this.state.query,
+                                              referal: event.target.value
+                                            }
+                                          })
+                                        }}
+                                        margin="normal"
+                                        type={"text"}
+                                        fullWidth
+                                        variant="outlined"
+                                      />
+                                    </Grid>
 
                                     <div style={{ padding: 5, marginTop: 20 }}>
-                                        <Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
-                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
+                                        <Button
+                                          disabled={!this.state.query.referal}
+                                          fullWidth
+                                          variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
+                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : (this.state.query.referal ? "Sign Up" : "Please add Referal to continue")}
                                         </Button>
                                     </div>
                                 </Paper>
diff --git a/src/common/pages/Vouchers/Stepper/index.js b/src/common/pages/Vouchers/Stepper/index.js
index db027d9..1a39608 100644
--- a/src/common/pages/Vouchers/Stepper/index.js
+++ b/src/common/pages/Vouchers/Stepper/index.js
@@ -1,26 +1,40 @@
 import {inject, observer} from "mobx-react";
+import PropTypes from 'prop-types';
 import React from "react";
 import './style.scss';
-import {
-  Step,
-  Stepper,
-  StepLabel,
-} from 'material-ui/Stepper';
+import Button from '@material-ui/core/Button';
 import RaisedButton from 'material-ui/RaisedButton';
 import FlatButton from 'material-ui/FlatButton';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
-import {Divider} from "material-ui";
+import {Divider} from "@material-ui/core";
 import CheckoutVouchers from "../Checkout";
 import PaymentVouchers from "../Payment";
 import {LINKS} from "../../../routes";
 import {notification, Modal} from "antd";
 import FinishVouchers from "../Finish";
+import { withStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
 
 const confirm = Modal.confirm;
 
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+  input: {
+    display: 'none',
+  },
+  divider: {
+    marginBottom: 10,
+    marginTop: 10,
+  }
+});
+
 @inject('appstate')
 @observer
-export default class VoucherStepperComponent extends React.Component {
+export class VoucherStepper extends React.Component {
 
   constructor(props) {
     super(props);
@@ -38,7 +52,7 @@ export default class VoucherStepperComponent extends React.Component {
   componentWillMount() {
     if(!this.vouchersStore.dataItems.name){
       // alert('jalan')
-      this.props.history.push(LINKS.VOUCHERS);
+      this.props.history.push(LINKS.DASHBOARD);
     }
     // alert('engga')
   }
@@ -94,19 +108,24 @@ export default class VoucherStepperComponent extends React.Component {
   };
 
   renderButton = () => {
+    const {classes} = this.props;
     return(
       <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
-        <FlatButton
-          label="Back"
-          disabled={this.state.stepIndex === 2}
-          onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
-          style={{marginRight: 12}}
-        />
-        <RaisedButton
-          label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
-          primary={true}
-          onClick={this.handleNext}
-        />
+        {/*<FlatButton*/}
+          {/*label="Back"*/}
+          {/*disabled={this.state.stepIndex === 2}*/}
+          {/*onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}*/}
+          {/*style={{marginRight: 12}}*/}
+        {/*/>*/}
+        <Button disabled={this.state.stepIndex === 2} onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev} className={classes.button}>Back</Button>
+        <Button variant="contained" color="primary" className={classes.button} onClick={this.handleNext}>
+          {this.state.stepIndex === 2 ? 'Finish' : 'Next'}
+        </Button>
+        {/*<RaisedButton*/}
+          {/*label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}*/}
+          {/*primary={true}*/}
+          {/*onClick={this.handleNext}*/}
+        {/*/>*/}
       </div>
     );
   };
@@ -126,6 +145,7 @@ export default class VoucherStepperComponent extends React.Component {
 
   render() {
     const {finished, stepIndex} = this.state;
+    const {classes} = this.props;
     const contentStyle = {margin: '0 16px'};
 
     if(!this.vouchersStore.dataItems.name){
@@ -158,25 +178,10 @@ export default class VoucherStepperComponent extends React.Component {
               <StepLabel>Finish</StepLabel>
             </Step>
           </Stepper>
-          <Divider style={{marginBottom:10,marginTop:10}} />
+          <Divider component="div" className={classes.divider} />
+          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
           <div style={contentStyle}>
-            {finished ? (
-              <p>
-                <a
-                  href="#"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    this.setState({stepIndex: 0, finished: false});
-                  }}
-                >
-                  Click here
-                </a> to reset the example.
-              </p>
-            ) : (
-              <div>
-                <p>{this.getStepContent(stepIndex)}</p>
-              </div>
-            )}
+            {this.getStepContent(stepIndex)}
           </div>
         </div>
       </div>
@@ -184,3 +189,9 @@ export default class VoucherStepperComponent extends React.Component {
   }
 
 }
+
+VoucherStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VoucherStepper);
diff --git a/src/common/pages/Vouchers/Stepper/style.scss b/src/common/pages/Vouchers/Stepper/style.scss
index f4639bd..8a1090f 100644
--- a/src/common/pages/Vouchers/Stepper/style.scss
+++ b/src/common/pages/Vouchers/Stepper/style.scss
@@ -1,9 +1,13 @@
 .stepper{
   margin-top: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //background-color: #fff;
   .divider-container{
-    max-width: 65vw;
+    max-width: 75vw;
   }
   .stepper-container{
-    max-width: 65vw;
+    max-width: 75vw;
   }
 }