diff --git a/src/common/pages/Otp/index.js b/src/common/pages/Otp/index.js
index 9329a15..3b9fb62 100644
--- a/src/common/pages/Otp/index.js
+++ b/src/common/pages/Otp/index.js
@@ -19,9 +19,9 @@ 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 moment from 'moment';
 import { Link } from 'react-router-dom';
 import {inject, observer} from 'mobx-react';
 import {LINKS} from "../../routes";
@@ -30,6 +30,8 @@ import {LINKS} from "../../routes";
 @observer
 class OtpPage extends React.Component{
     otp = [];
+    urlParams = new URLSearchParams(window.location.search);
+
     constructor(props) {
         super(props);
         this.props = props;
@@ -42,7 +44,10 @@ class OtpPage extends React.Component{
           isNeedEmailVerification: false,
           otp: [],
           otpText : "",
-          isResending: false
+          otpData : {},
+          isResending: false,
+          isOtpExpired : false,
+          isOtpWrong: false,
         };
         this.defaultState = Object.assign({}, this.state);
         this.authStore = props.appstate.auth;
@@ -50,7 +55,27 @@ class OtpPage extends React.Component{
 
     componentDidMount(){
         this.otp[0].focus();
-        console.log("otp",this.otp);
+        if(this.urlParams.has('login_request_id') && this.urlParams.has('expired_at')) {
+            console.log(this.urlParams);
+            this.setState({
+                otpData:{
+                    login_request_id : urlParams.get('login_request_id'),
+                    expired_at : urlParams.get('expired_at')
+                }
+            });
+        }
+        else{
+            this.setState({otpData:this.authStore.otpData});
+        }
+    }
+
+    checkIsExpired(){
+        console.log(Date.parse(Date().toISOString()),this.state.otpData.expired_at);
+        if(Date.parse(Date().toISOString()) < Date.parse(this.state.otpData.expired_at)){
+            return false;
+        }else{
+            return true
+        }
     }
 
     handleChange = name => event => {
@@ -67,31 +92,58 @@ class OtpPage extends React.Component{
     }
 
     login = () => {
-        console.log("otpText",this.state.otpText);
+        let data = {
+            code : this.state.otpText,
+            login_request_id : this.state.otpData.login_request_id
+        }
+        console.log("data",data);
         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);
-        // });
-      };
+        // if(this.checkIsExpired){
+        //     this.setState({isOtpExpired:true});
+        //     setTimeout(()=>{
+        //         this.setState({isOtpExpired:false});
+        //     },2000);
+        // }
+        // else{
+            this.authStore.validateOtp(data).then(res=>{
+                setTimeout(()=>{
+                    this.props.history.push(LINKS.DASHBOARD);
+                    this.setState({isLoading:false});
+                },1000);
+            }).catch(err=>{
+                setTimeout(()=>{
+                    this.setState({isLoading:false,isOtpWrong:true});
+                },2000);
+                setTimeout(()=>{
+                    this.setState({isOtpWrong:false});
+                },4000)
+            });
+        // }
+        
+    };
 
     render(){
         const { classes } = this.props;
         return (
             <div className={classes.container}>
+                <Snackbar
+                    anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
+                    open={this.state.isOtpWrong}
+                    onClose={()=>this.setState({isOtpWrong:false})}
+                    ContentProps={{
+                        'aria-describedby': 'message-id',
+                    }}
+                    message={<span id="message-id">Wrong OTP code</span>}
+                />
+                <Snackbar
+                    anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
+                    open={this.state.isOtpExpired}
+                    onClose={()=>this.setState({isOtpExpired:false})}
+                    ContentProps={{
+                        'aria-describedby': 'message-id',
+                    }}
+                    message={<span id="message-id">Your OTP code has expired</span>}
+                />
                 <Snackbar
                     anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
                     open={this.state.isResending}
@@ -129,7 +181,7 @@ class OtpPage extends React.Component{
                                     <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"/>
+                                            <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>