diff --git a/src/common/pages/RegisterNew/index.js b/src/common/pages/RegisterNew/index.js
index e005a3d..ac10380 100644
--- a/src/common/pages/RegisterNew/index.js
+++ b/src/common/pages/RegisterNew/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import withStyles from "@material-ui/core/styles/withStyles";
-import {styles} from './styles';
+import { styles } from './styles';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
@@ -15,26 +15,37 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import Snackbar from '@material-ui/core/Snackbar';
 
 import { Link } from 'react-router-dom'
-import {inject, observer} from "mobx-react";
+import { inject, observer } from "mobx-react";
 import schema from 'async-validator'
-import {startCase} from 'lodash';
+import { startCase } from 'lodash';
+import { Upload, Icon, message } from 'antd';
 
 @inject('appstate')
 @observer
-class RegisterPage extends React.Component{
+class RegisterPage extends React.Component {
     state = {
-        phone_number : "",
-        email : "",
-        password : "",
-        confirmPassword : "",
-        full_name : "",
-        showPassword : false,
-        showConfirmPassword : false,
-        openDialog : false,
-        isLoading : false
+        phone_number: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+        full_name: "",
+        showPassword: false,
+        showConfirmPassword: false,
+        openDialog: false,
+        isLoading: false,
+        no_ktp: '',
+        upload_ktp: '',
+        upload_photo: '',
+        address: '',
+        province: '',
+        city: '',
+        district: '',
+        sub_district: '',
+        zip_code: '',
+
     };
 
-    constructor(props){
+    constructor(props) {
         super(props);
         this.authStore = props.appstate.auth;
         // this.global_ui = props.store.global_ui;
@@ -46,32 +57,32 @@ class RegisterPage extends React.Component{
         });
     };
 
-    viewPassword = ()=>{
+    viewPassword = () => {
         this.setState({
-            showPassword : !this.state.showPassword
+            showPassword: !this.state.showPassword
         })
     };
 
-    viewConfirmPassword = ()=>{
+    viewConfirmPassword = () => {
         this.setState({
-            showConfirmPassword : !this.state.showConfirmPassword
+            showConfirmPassword: !this.state.showConfirmPassword
         })
     };
 
-    register = ()=>{
-        this.setState({isLoading:true});
+    register = () => {
+        this.setState({ isLoading: true });
         let data = {
-            full_name : this.state.full_name,
-            email : this.state.email,
-            phone_number : this.state.phone_number,
-            password : this.state.password
+            full_name: this.state.full_name,
+            email: this.state.email,
+            phone_number: this.state.phone_number,
+            password: this.state.password
         }
-        this.authStore.register(data).then(res=>{
-            setTimeout(()=>{
-                this.setState({isLoading:false});
-            },1000);
-        }).catch(err=>{
-            this.setState({isLoading:false});
+        this.authStore.register(data).then(res => {
+            setTimeout(() => {
+                this.setState({ isLoading: false });
+            }, 1000);
+        }).catch(err => {
+            this.setState({ isLoading: false });
         })
         // let rules = {
         //     full_name : {
@@ -111,8 +122,50 @@ class RegisterPage extends React.Component{
         // });
     };
 
-    render(){
+    handleChangeUploadKtp = (info) => {
+        if (info.file.status === 'uploading') {
+            this.setState({ loading: true });
+            return;
+        }
+        if (info.file.status === 'done') {
+            // Get this url from response in real world.
+            getBase64(info.file.originFileObj, imageUrl => this.setState({
+                upload_ktp,
+                loading: false,
+            }));
+        }
+    }
+
+    handleChangeUploadPhoto = (info) => {
+        if (info.file.status === 'uploading') {
+            this.setState({ loading: true });
+            return;
+        }
+        if (info.file.status === 'done') {
+            // Get this url from response in real world.
+            getBase64(info.file.originFileObj, imageUrl => this.setState({
+                upload_photo,
+                loading: false,
+            }));
+        }
+    }
+
+    render() {
         const { classes } = this.props;
+        const uploadButtonKtp = (
+            <div>
+                <Icon type={this.state.loading ? 'loading' : 'plus'} />
+                <div className="ant-upload-text">Upload KTP</div>
+            </div>
+        );
+        const uploadButtonPhoto = (
+            <div>
+                <Icon type={this.state.loading ? 'loading' : 'plus'} />
+                <div className="ant-upload-text">Upload Photo</div>
+            </div>
+        );
+        const upload_ktp = this.state.upload_ktp;
+        const upload_photo = this.state.upload_photo;
         return (
             <div className={classes.container}>
                 {/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
@@ -121,20 +174,20 @@ class RegisterPage extends React.Component{
                     <Grid item xs={12} className={classes.logoContainer}>
                         <img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
                     </Grid>
-                    <Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
+                    <Grid item xs={12} sm={12} md={10} lg={10} className={classes.registerContainer}>
                         <Grid container spacing={24} className={classes.registerPaper}>
                             <Hidden smDown>
-                                <Grid item xs={6}>
-                                    <img src={require('../../../../assets/images/register_image_2.png')} width={"80%"}/>
-                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
+                                <Grid item xs={5}>
+                                    <img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
+                                    <Typography style={{ color: '#FFF' }} variant={"h6"}>
                                         Redeem point, Get Your Item!
                                     </Typography>
-                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
+                                    <Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
                                         Get promo and benefits with BTN
                                     </Typography>
                                 </Grid>
                             </Hidden>
-                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
+                            <Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}>
                                 <Paper className={classes.formRegister}>
                                     <Typography variant="h6" gutterBottom>
                                         Register Now
@@ -142,79 +195,210 @@ class RegisterPage extends React.Component{
                                     <Typography variant="subtitle2" gutterBottom>
                                         Already have an account? <Link to={"/login"} replace>Back to Login</Link>
                                     </Typography>
-                                    <TextField
-                                        id="name"
-                                        label="Full name"
-                                        value={this.state.full_name}
-                                        onChange={this.handleChange('full_name')}
-                                        margin="normal"
-                                        type={"text"}
-                                        variant="outlined"
-                                    />
-                                    <TextField
-                                        id="phone"
-                                        label="Phone Number"
-                                        value={this.state.phone_number}
-                                        onChange={this.handleChange('phone_number')}
-                                        margin="normal"
-                                        type={"number"}
-                                        variant="outlined"
-                                    />
-                                    <TextField
-                                        id="email"
-                                        label="Email"
-                                        value={this.state.email}
-                                        onChange={this.handleChange('email')}
-                                        margin="normal"
-                                        variant="outlined"
-                                    />
-                                    <TextField
-                                        id="password"
-                                        label="Password"
-                                        value={this.state.password}
-                                        onChange={this.handleChange('password')}
-                                        margin="normal"
-                                        type={this.state.showPassword ? 'text' : 'password'}
-                                        fullWidth
-                                        variant="outlined"
-                                        InputProps={{
-                                            endAdornment: (
-                                                <InputAdornment position="end">
-                                                    <IconButton
-                                                        aria-label="Toggle password visibility"
-                                                        onClick={this.viewPassword}
-                                                    >
-                                                        {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
-                                                    </IconButton>
-                                                </InputAdornment>
-                                            ),
-                                        }}
-                                    />
-                                    <TextField
-                                        id="confirmPassword"
-                                        label="Re-type Password"
-                                        value={this.state.confirmPassword}
-                                        onChange={this.handleChange('confirmPassword')}
-                                        margin="normal"
-                                        type={this.state.showConfirmPassword ? 'text' : 'password'}
-                                        fullWidth
-                                        variant="outlined"
-                                        InputProps={{
-                                            endAdornment: (
-                                                <InputAdornment position="end">
-                                                    <IconButton
-                                                        aria-label="Toggle password visibility"
-                                                        onClick={this.viewConfirmPassword}
-                                                    >
-                                                        {this.state.showConfirmPassword ? <VisibilityOff style={{color:this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green'}}/> : <Visibility style={{color:this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green'}}/>}
-                                                    </IconButton>
-                                                </InputAdornment>
-                                            ),
-                                        }}
-                                    />
-                                    <div style={{padding : 5,marginTop : 20}}>
-                                        <Button fullWidth variant="contained" style={{backgroundColor:'#ffeb3b'}} onClick={this.register} disabled={this.state.full_name == '' || this.state.email == '' || this.state.password == '' || this.state.password != this.state.confirmPassword}>
-                                        {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
+                                    <div style={{
+                                        display: 'flex',
+                                        flexDirection: 'row'
+                                    }}>
+                                        <Grid container spacing={12}>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="name"
+                                                    label="Full name"
+                                                    value={this.state.full_name}
+                                                    onChange={this.handleChange('full_name')}
+                                                    margin="normal"
+                                                    type={"text"}
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="phone"
+                                                    label="Phone Number"
+                                                    value={this.state.phone_number}
+                                                    onChange={this.handleChange('phone_number')}
+                                                    margin="normal"
+                                                    type={"number"}
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="email"
+                                                    label="Email"
+                                                    value={this.state.email}
+                                                    onChange={this.handleChange('email')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="ktp"
+                                                    label="Nomor KTP"
+                                                    value={this.state.ktp}
+                                                    onChange={this.handleChange('ktp')}
+                                                    margin="normal"
+                                                    type={"number"}
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}>
+                                                <Upload
+                                                    name="avatar"
+                                                    listType="picture-card"
+                                                    className="avatar-uploader"
+                                                    showUploadList={false}
+                                                    action="//jsonplaceholder.typicode.com/posts/"
+                                                    onChange={this.handleChangeUploadKtp}
+                                                >
+                                                    {upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
+                                                </Upload>
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
+                                                <Upload
+                                                    style={{ marginTop: 16, marginBottom: 8 }}
+                                                    name="avatar"
+                                                    listType="picture-card"
+                                                    className="avatar-uploader"
+                                                    showUploadList={false}
+                                                    action="//jsonplaceholder.typicode.com/posts/"
+                                                    onChange={this.handleChangeUploadPhoto}
+                                                >
+                                                    {upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto}
+                                                </Upload>
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="address"
+                                                    label="Address"
+                                                    value={this.state.address}
+                                                    onChange={this.handleChange('address')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="province"
+                                                    label="Province"
+                                                    value={this.state.province}
+                                                    onChange={this.handleChange('province')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="city"
+                                                    label="City"
+                                                    value={this.state.city}
+                                                    onChange={this.handleChange('city')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="district"
+                                                    label="District"
+                                                    value={this.state.district}
+                                                    onChange={this.handleChange('district')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="sub_district"
+                                                    label="Sub district"
+                                                    value={this.state.sub_district}
+                                                    onChange={this.handleChange('sub_district')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="zip_code"
+                                                    label="Zip Code"
+                                                    value={this.state.zip_code}
+                                                    onChange={this.handleChange('zip_code')}
+                                                    margin="normal"
+                                                    variant="outlined"
+                                                    fullWidth
+                                                />
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="password"
+                                                    label="Password"
+                                                    value={this.state.password}
+                                                    onChange={this.handleChange('password')}
+                                                    margin="normal"
+                                                    type={this.state.showPassword ? 'text' : 'password'}
+                                                    variant="outlined"
+                                                    fullWidth
+                                                    InputProps={{
+                                                        endAdornment: (
+                                                            <InputAdornment position="end">
+                                                                <IconButton
+                                                                    aria-label="Toggle password visibility"
+                                                                    onClick={this.viewPassword}
+                                                                >
+                                                                    {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
+                                                                </IconButton>
+                                                            </InputAdornment>
+                                                        ),
+                                                    }}
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                                <TextField
+                                                    id="confirmPassword"
+                                                    label="Re-type Password"
+                                                    value={this.state.confirmPassword}
+                                                    onChange={this.handleChange('confirmPassword')}
+                                                    margin="normal"
+                                                    type={this.state.showConfirmPassword ? 'text' : 'password'}
+                                                    fullWidth
+                                                    variant="outlined"
+                                                    InputProps={{
+                                                        endAdornment: (
+                                                            <InputAdornment position="end">
+                                                                <IconButton
+                                                                    aria-label="Toggle password visibility"
+                                                                    onClick={this.viewConfirmPassword}
+                                                                >
+                                                                    {this.state.showConfirmPassword ? <VisibilityOff style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} /> : <Visibility style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} />}
+                                                                </IconButton>
+                                                            </InputAdornment>
+                                                        ),
+                                                    }}
+                                                />
+                                            </Grid>
+                                        </Grid>
+                                    </div>
+
+
+                                    <div style={{ padding: 5, marginTop: 20 }}>
+                                        <Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register} disabled={this.state.full_name == '' || this.state.email == '' || this.state.password == '' || this.state.password != this.state.confirmPassword}>
+                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
                                         </Button>
                                     </div>
                                 </Paper>
diff --git a/src/common/pages/RegisterNew/styles.js b/src/common/pages/RegisterNew/styles.js
index 2f40d31..1b6e7e8 100644
--- a/src/common/pages/RegisterNew/styles.js
+++ b/src/common/pages/RegisterNew/styles.js
@@ -5,7 +5,8 @@ export const styles = theme => ({
         flexGrow : 1,
         height : '100vh',
         backgroundColor:'#024f8e',
-        marginTop: '-56px'
+        marginTop: '-56px',
+        marginBottom:50
     },
     gridContainer : {
         flex :1,
@@ -32,5 +33,5 @@ export const styles = theme => ({
         textAlign : 'center',
         background : yellow['500'],
         padding : 20
-    }
+    },
 });
\ No newline at end of file