diff --git a/src/common/pages/Otp/index.js b/src/common/pages/Otp/index.js
new file mode 100644
index 0000000..193a460
--- /dev/null
+++ b/src/common/pages/Otp/index.js
@@ -0,0 +1,139 @@
+import React from 'react';
+import withStyles from "@material-ui/core/styles/withStyles";
+import {styles} from './style';
+
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import Button from '@material-ui/core/Button';
+import Hidden from '@material-ui/core/Hidden';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import IconButton from '@material-ui/core/IconButton';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Snackbar from '@material-ui/core/Snackbar';
+
+import Text from 'material-ui/TextField';
+
+import { Link } from 'react-router-dom';
+import {inject, observer} from 'mobx-react';
+import {LINKS} from "../../routes";
+
+@inject('appstate')
+@observer
+class OtpPage extends React.Component{
+    otp = [];
+    constructor(props) {
+        super(props);
+        this.props = props;
+        this.state = {
+          email: "",
+          password: "",
+          showPassword : false,
+          isLoading: false,
+          loginFailed: false,
+          isNeedEmailVerification: false,
+          otp: [],
+          otpText : "",
+          isResending: false
+        };
+        this.defaultState = Object.assign({}, this.state);
+        this.authStore = props.appstate.auth;
+      }
+
+    componentDidMount(){
+        this.otp[0].focus();
+        console.log("otp",this.otp);
+    }
+
+    handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
+
+    resendCode = () => {
+
+    }
+
+    login = () => {
+        console.log("otpText",this.state.otpText);
+        this.setState({isLoading:true});
+        setTimeout(()=>{
+            this.setState({isLoading:false});
+        },1000);
+        // this.authStore.login(data).then(res => {
+        //     if(!res.need_email_verification){
+        //         setTimeout(()=>{
+        //             this.props.history.push(LINKS.DASHBOARD);
+        //             this.setState({isLoading:false});
+        //         },1000);
+        //     }
+        //     else{
+        //         this.setState({isNeedEmailVerification:true});
+        //     }
+        // }).catch(err => {
+        //     this.setState({loginFailed:true,isLoading:false});
+        //     setTimeout(()=>this.setState({loginFailed:false}),3000);
+        // });
+      };
+
+    render(){
+        const { classes } = this.props;
+        return (
+            <div className={classes.container}>
+                <Grid container spacing={0} className={classes.gridContainer}>
+                    <Grid item xs={12} className={classes.logoContainer}>
+                        <img src={require('../../../../assets/images/login/logo_new.png')} className={classes.logo} />
+                    </Grid>
+                    <Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
+                        <Grid container spacing={24} className={classes.registerPaper}>
+                            {/* <Hidden smDown>
+                                <Grid item xs={6}>
+                                    <img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
+                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
+                                        Welcome to BTN Points
+                                    </Typography>
+                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
+                                        Sign in to get various voucher and items
+                                    </Typography>
+                                </Grid>
+                            </Hidden> */}
+                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
+                                <Paper className={classes.formRegister}>
+                                    <Typography variant="h6" gutterBottom>
+                                        Input Your OTP Code
+                                    </Typography>
+                                    <Typography variant="subtitle2" gutterBottom>
+                                        Still not received OTP Code? <Link to={"/register"}>Resend Code</Link>
+                                    </Typography>
+                                    <Grid container justify="center" spacing={8}>
+                                        {[0, 1, 2, 3, 4, 5].map(x => (
+                                        <Grid item xs={1}>
+                                            <Text onChange={event=>this.setState({otpText:this.state.otpText+event.target.value})} autoFocus={true} ref={(input) => { this.otp[x] = input; }} key={x} id={x} inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxlength="1"/>
+                                        </Grid>
+                                        ))}
+                                    </Grid>
+                                    <div style={{padding : 5,marginTop : 20}}>
+                                        <Button onClick={() => this.login()} fullWidth variant="contained" style={{background:'#ffeb3b'}} disabled={this.state.otpText.length < 6}>
+                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign In"}
+                                        </Button>
+                                    </div>
+                                </Paper>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </div>
+        )
+    }
+}
+
+export default withStyles(styles)(OtpPage);
\ No newline at end of file
diff --git a/src/common/pages/Otp/style.js b/src/common/pages/Otp/style.js
new file mode 100644
index 0000000..24f9058
--- /dev/null
+++ b/src/common/pages/Otp/style.js
@@ -0,0 +1,36 @@
+import yellow from '@material-ui/core/colors/yellow';
+export const styles = theme => ({
+    container : {
+        flex :1,
+        flexGrow : 1,
+        height : '100vh',
+        marginTop: "-56px !important",
+        background : '#024F8E'
+    },
+    gridContainer : {
+        flex :1,
+        justifyContent:'center'
+    },
+    registerContainer: {
+        marginTop : 50
+    },
+    formRegister : {
+        padding : 20,
+        display : 'flex',
+        flexDirection: 'column',
+        textAlign : 'center'
+    },
+    registerPaper : {
+        flex :1,
+        flexDirection : 'row',
+        justifyContent:'center'
+    },
+    logo : {
+        width : '200px'
+    },
+    logoContainer : {
+        textAlign : 'center',
+        background : yellow['500'],
+        padding : 20
+    }
+});
\ No newline at end of file
diff --git a/src/common/pages/Otp/style.scss b/src/common/pages/Otp/style.scss
new file mode 100644
index 0000000..6e0b2a4
--- /dev/null
+++ b/src/common/pages/Otp/style.scss
@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css?family=Thasadith');
+
+.loginWrapper{
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  //background-color: #aaafff;
+  background-image: url("../../../../assets/images/login/background.jpg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center bottom;
+  margin-top: -56px !important;
+
+  .formContainer{
+    display: flex;
+    flex-direction: column;
+    margin-top: -17.5vh;
+
+    .logoLogin{
+      width: 200px;
+      height: auto;
+      align-self: center;
+    }
+
+    .textLogin{
+      text-align: center;
+      margin-top: 5vh;
+      margin-bottom: 6.5vh;
+      font-size: 1.25rem;
+      font-weight: lighter;
+      color: #555;
+      font-family: 'Thasadith', sans-serif;
+    }
+
+    .formParent{
+      display: flex;
+      flex-direction: row;
+
+      .inputContainer{
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.06), 0 10px 10px rgba(0,0,0,0.03);
+
+        .usernameForm{
+          border: 0px;
+          padding: 15px;
+          width: 20vw;
+          border-bottom: 1px solid #eee;
+        }
+        .passwordForm{
+          border: 0px;
+          padding: 15px;
+          width: 20vw;
+        }
+      }
+
+      .buttonLogin{
+        width: 100px;
+        height: 35px;
+        align-self: center;
+        margin-left: -3vw;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.09), 0 10px 10px rgba(0,0,0,0.06) !important;
+        color: #fff;
+        border: 0px;
+        background-color: #6772e5;
+        border-radius: 2.5px;
+        cursor: pointer;
+        transition: 0.5s;
+      }
+
+      .buttonLogin:hover{
+        background-color: #424770;
+      }
+    }
+  }
+}
+
+textarea:focus, input:focus{
+  outline: none;
+}
+