diff --git a/.env b/.env
index 46ba040..69b7e6f 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
 EMAIL = "minorprojectcse2020@gmail.com"
 PASSWORD = "wasd4321"
-  cloud_name: 'dn8binf6d'
-  api_key: '858617943453819'
-  api_secret: 'SmFaiFXHwpB_ZGhUV9zyrdVXKMc'
+  cloud_name= 'dn8binf6d'
+  api_key= '858617943453819'
+  api_secret= 'SmFaiFXHwpB_ZGhUV9zyrdVXKMc'
diff --git a/controller/image/addImage.js b/controller/image/addImage.js
index 30f0a1c..74e4b74 100644
--- a/controller/image/addImage.js
+++ b/controller/image/addImage.js
@@ -179,7 +179,7 @@ class AddImage {
                     $set: { 'image': image_mapping ,
                     'image_labels' : label_mapping
                   }}).then((user)=>{
-                    console.log(user)
+                   // console.log(user)
                   });
 
       }).catch((err)=>{
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 39e9495..b3f43bf 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -11,10 +11,10 @@
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <!-- Material Design Bootstrap -->
   <!-- Your custom styles (optional) -->
-  <!-- <link href="css/style.min.css" rel="stylesheet"> -->
+  <link href="css/style.min.css" rel="stylesheet">
   <link href="css/custom.css" rel="stylesheet">
-  <!-- <link href="css/mdb.lite.min.css" rel="stylesheet"> -->
-  <!-- <link href="css/mdb.min.css" rel="stylesheet"> -->
+  <link href="css/mdb.lite.min.css" rel="stylesheet"> 
+   <link href="css/mdb.min.css" rel="stylesheet">
 
 
   <style>
@@ -45,6 +45,13 @@
 <script type="text/javascript" src="./js/popper.min.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
 <script type="text/javascript" src="./js/mdb.min.js"></script>
+<script type="text/javascript" >
+
+$(function () {
+$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
+});
+</script>
+
 
 
 </html>
\ No newline at end of file
diff --git a/frontend/src/components/ImageTable/index.js b/frontend/src/components/ImageTable/index.js
index d119996..756091f 100644
--- a/frontend/src/components/ImageTable/index.js
+++ b/frontend/src/components/ImageTable/index.js
@@ -11,21 +11,34 @@ export default function ImageTable({ images, currentPage, pageSize, genre }) {
 
   // console.log("images present in image table ");
   // console.log(currentImages);
-  return ( 
-    <div className="row row-eq-height">
-      {!!images &&
-        currentImages.map((image) => {
-          // const encodedImage = new Buffer(image.img_buffer, "binary").toString(
-          //   "base64"
-          // );
-          // const coverImage = "data:image/jpeg;base64," + encodedImage;
-          const coverImage = image.img_name;
-         return( <div className="col-4  " key = {image._id}>
-                <img src={coverImage} className="gallery-img" alt={"cover"} key = {image._id}/>
-                </div>
-          )
-        })}
+  
+  return (
+    <div className="col-md-12">
+      <div id="mdb-lightbox-ui"></div>
+      <div class="mdb-lightbox ">
+        {!!images &&
+          currentImages.map((image) => {
+            const coverImage = image.img_name;
+            // const coverImage = "/uploads/" + image.img_name;
+            return (
+              // <div className="col-4  " key={image._id}>
+              //   <img
+              //     src={coverImage}
+              //     className="gallery-img"
+              //     alt={"cover"}
+              //     key={image._id}
+              //   />
+              // </div>
+              <figure class="col-md-4">
+              <a href={coverImage} data-size="1600x1067">
+                <img src={coverImage} class="img-fluid"/>
+              </a>
+              </figure>
+            );
+          })}
+      </div>
+      </div>
        
-    </div>
+   
   );
 }
diff --git a/frontend/src/pages/ForgotPassword/index.js b/frontend/src/pages/ForgotPassword/index.js
index e37a2a2..6ccf872 100644
--- a/frontend/src/pages/ForgotPassword/index.js
+++ b/frontend/src/pages/ForgotPassword/index.js
@@ -3,19 +3,18 @@ import Joi from "@hapi/joi";
 // import { Redirect } from 'react-router-dom';
 import _ from "lodash";
 import { connect } from "react-redux";
-import { forgotandverify ,forgotandupdate} from "../../actions/authAction";
-import "./style.css";
+import { forgotandverify, forgotandupdate } from "../../actions/authAction";
 
 class ForgotPassword extends React.Component {
   state = {
     data: {
       email: "",
       password: "",
-      repassword : "",
-      otp : "",
+      repassword: "",
+      otp: "",
     },
     errors: {},
-    passwordError : ""
+    passwordError: "",
   };
 
   schema = {
@@ -56,7 +55,7 @@ class ForgotPassword extends React.Component {
     );
     return errors;
   };
-  
+
   handleSubmit = (e) => {
     e.preventDefault();
     const errors = this.validate();
@@ -66,131 +65,168 @@ class ForgotPassword extends React.Component {
   handleVerify = (e) => {
     e.preventDefault();
     this.props.forgotandverify(this.state.data.email);
-  }
- 
-
+  };
 
   render() {
-    const { data, errors ,passwordError} = this.state;
-    const { email, password ,repassword,otp} = data;
-    const { authMessage} = this.props;
+    const { data, errors, passwordError } = this.state;
+    const { email, password, repassword, otp } = data;
+    const { authMessage } = this.props;
     return (
-
-             <div className="bg-image-login ">
-            <div className=" d-flex h-100 justify-content-center align-items-center">
-            <div className="container">
+      <div className="bg-image-login ">
+        <div className=" d-flex h-100 justify-content-center align-items-center">
+          <div className="container">
             <div className="row">
-                <div className="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">
-
+              <div className="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">
                 <div className="card wow fadeIn" data-wow-delay="0.3s">
-                    <div className="card-body">
-
+                  <div className="card-body">
                     <div className="form-header purple-gradient">
-                        <h3 className="font-weight-500 my-2 py-1"><i className="fas fa-user"></i> Forgot Password</h3>
+                      <h3 className="font-weight-500 my-2 py-1">
+                        <i className="fas fa-user"></i> Forgot Password
+                      </h3>
                     </div>
 
-
-              <form onSubmit={this.props.status ? this.handleSubmit : this.handleVerify}>
-                    <div className="md-form">
-                        <i className="fas fa-envelope prefix " ></i>
+                    <form
+                      onSubmit={
+                        this.props.status
+                          ? this.handleSubmit
+                          : this.handleVerify
+                      }
+                    >
+                      <div className="md-form">
+                        <i className="fas fa-envelope prefix "></i>
                         <input
-                        type="email"
-                        name="email"
-                        id="orangeForm-email" 
-                        className="form-control"
-                        onChange={this.handleChange}
-                        value={email}
-                        autoFocus
+                          type="email"
+                          name="email"
+                          id="orangeForm-email"
+                          className="form-control"
+                          onChange={this.handleChange}
+                          value={email}
+                          autoFocus
                         />
                         <label htmlFor="orangeForm-email">Your email</label>
-                        { errors["email"] && <div className="alert alert-danger"> {errors["email"]} </div> }
-                    </div>
-
-                    {
-                      this.props.status 
-                      ?
-                      <div>
-                      <div className="md-form pass">
-                          <i className="fas fa-lock prefix "></i>
-                          <input
-                          name="password"
-                          type="password"
-                          onChange={this.handleChange}
-                          value={password}
-                          id="orangeForm-pass" 
-                          className="form-control"
-                          />
-                          <label htmlFor="orangeForm-pass">New password</label>
-                          { errors["password"] && <div className="alert alert-danger"> {errors["password"]} </div> }
+                        {errors["email"] && (
+                          <div className="alert alert-danger">
+                            {" "}
+                            {errors["email"]}{" "}
+                          </div>
+                        )}
                       </div>
-                      <div className="md-form repass">
-                        <i className="fas fa-lock prefix "></i>
-                        <input
-                        name="repassword"
-                        type="password"
-                        onChange={this.handleChange}
-                        value={repassword}
-                        id="orangeForm-repass" 
-                        className="form-control repass"
-                        />
-                        <label htmlFor="orangeForm-repass">Re enter password</label>
-                        { errors["repassword"] && <div className="alert alert-danger"> {errors["repassword"]} </div> }
-                    </div>
-                    <div className="md-form">
-                        <i className="fas fa-key prefix"></i>
-                        <input
-                        type = "text"
-                        name="otp"
-                        id="orangeForm-otp" 
-                        className="form-control"
-                    
-                        onChange={this.handleChange}
-                        value = {otp}
-                        />
-                        <label for="orangeForm-otp">Enter OTP</label>
-                    </div>
-                    </div>
-                    :
-                    <></>
-                    }
 
-                    {authMessage || passwordError ? (
+                      {this.props.status ? (
+                        <div>
+                          <div className="md-form pass">
+                            <i className="fas fa-lock prefix "></i>
+                            <input
+                              name="password"
+                              type="password"
+                              onChange={this.handleChange}
+                              value={password}
+                              id="orangeForm-pass"
+                              className="form-control"
+                            />
+                            <label htmlFor="orangeForm-pass">
+                              New password
+                            </label>
+                            {errors["password"] && (
+                              <div className="alert alert-danger">
+                                {" "}
+                                {errors["password"]}{" "}
+                              </div>
+                            )}
+                          </div>
+                          <div className="md-form repass">
+                            <i className="fas fa-lock prefix "></i>
+                            <input
+                              name="repassword"
+                              type="password"
+                              onChange={this.handleChange}
+                              value={repassword}
+                              id="orangeForm-repass"
+                              className="form-control repass"
+                            />
+                            <label htmlFor="orangeForm-repass">
+                              Re enter password
+                            </label>
+                            {errors["repassword"] && (
+                              <div className="alert alert-danger">
+                                {" "}
+                                {errors["repassword"]}{" "}
+                              </div>
+                            )}
+                          </div>
+                          <div className="md-form">
+                            <i className="fas fa-key prefix"></i>
+                            <input
+                              type="text"
+                              name="otp"
+                              id="orangeForm-otp"
+                              className="form-control"
+                              onChange={this.handleChange}
+                              value={otp}
+                            />
+                            <label for="orangeForm-otp">Enter OTP</label>
+                          </div>
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+
+                      {authMessage || passwordError ? (
                         <p className="bg-info text-white">
-                        {" "}
-                        {authMessage} {passwordError}
+                          {" "}
+                          {authMessage} {passwordError}
                         </p>
-                        ) : (
+                      ) : (
                         <> </>
                       )}
 
-                    <div className="text-center" >
-                    {
-                    this.props.status 
-                    ? 
-                      <button className="btn purple-gradient btn-lg"
-                      onClick={this.handleSubmit}>Update</button> 
-                    :
-                      <button className="btn purple-gradient btn-lg"
-                      onClick={this.handleVerify}>Verify</button> 
-                    }
-                    </div>
-                  </form>
-                  <p style = {{paddingLeft: "38%"}}>Back to
-                    <a href = "http://localhost:3000/login"> Login</a>
-                    </p>
-                    </div>
-                </div>
+                      <div className="text-center">
+                        {this.props.status ? (
+                          <button
+                            className="btn purple-gradient btn-lg"
+                            onClick={this.handleSubmit}
+                          >
+                            Update
+                          </button>
+                        ) : (
+                          <button
+                            className="btn purple-gradient btn-lg"
+                            onClick={this.handleVerify}
+                          >
+                            Verify
+                          </button>
+                        )}
+                      </div>
+                    </form>
+                   
+                     <div className="d-flex flex-row justify-content-center mt-3">
+                            <span className="   mt-2  text-info">
+                              Back to
+                            </span>
+                            <a href="/login">
+                              {" "}
+                              <button
+                                type="button"
+                                className="btn btn-info btn-rounded btn-sm"
+                              >
+                                {" "}
+                                LogIn{" "}
+                              </button>
+                            </a>
+                          </div>
+                  </div>
                 </div>
+              </div>
             </div>
-            </div>
-        </div>
+          </div>
         </div>
+      </div>
     );
   }
 }
 const mapStateToProps = (state) => {
   return {
-    isVerify : state.auth.isVerify,
+    isVerify: state.auth.isVerify,
     authMessage: state.auth.authMessage,
     status: state.auth.status,
   };
@@ -202,4 +238,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ForgotPassword);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(ForgotPassword);
diff --git a/frontend/src/pages/ForgotPassword/style.css b/frontend/src/pages/ForgotPassword/style.css
index 5b6b3f7..e69de29 100644
--- a/frontend/src/pages/ForgotPassword/style.css
+++ b/frontend/src/pages/ForgotPassword/style.css
@@ -1,22 +0,0 @@
-html,
-body,
-header,
-.view {
-    height: 100%;
-}
-@media (min-width: 560px) and (max-width: 740px) {
-    html,
-    body,
-    header,
-    .view {
-    height: 650px;
-    }
-}
-@media (min-width: 800px) and (max-width: 850px) {
-    html,
-    body,
-    header,
-    .view  {
-    height: 650px;
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js
index c8d1836..05e564a 100644
--- a/frontend/src/pages/Login/index.js
+++ b/frontend/src/pages/Login/index.js
@@ -4,9 +4,6 @@ import Joi from "@hapi/joi";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { signIn } from "../../actions/authAction";
-// import Button from "../../components/common/Button";
-import "./style.css";
-// import {Helmet} from 'react-helmet';
 
 class Login extends React.Component {
   state = {
@@ -60,101 +57,130 @@ class Login extends React.Component {
     if (_.isEmpty(errors)) this.props.signIn(this.state.data);
   };
 
-  saveUserDetais(user,loggedIn){
+  saveUserDetais(user, loggedIn) {
     // console.log(user);
     // loggedIn = true;
-    if(loggedIn){
-      localStorage.setItem('loggedIn', true);
+    if (loggedIn) {
+      localStorage.setItem("loggedIn", true);
     }
-  } 
-
+  }
 
   render() {
     const { data, errors } = this.state;
     const { email, password } = data;
-    const { authMessage, loggedIn,userData} = this.props;
+    const { authMessage, loggedIn, userData } = this.props;
     if (loggedIn) this.props.history.push("/dashboard");
-    console.log("logged",loggedIn);
+    console.log("logged", loggedIn);
     return (
-
-             <div className="bg-image-login ">
-            <div className=" d-flex h-100 justify-content-center align-items-center">
-            <div className="container">
+      <div className="bg-image-login ">
+        <div className=" d-flex h-100 justify-content-center align-items-center">
+          <div className="container">
             <div className="row">
-                <div className="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">
-
+              <div className="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">
                 <div className="card wow fadeIn" data-wow-delay="0.3s">
-                    <div className="card-body">
-
+                  <div className="card-body">
                     <div className="form-header purple-gradient">
-                        <h3 className="font-weight-500 my-2 py-1"><i className="fas fa-user"></i> Log in</h3>
+                      <h3 className="font-weight-500 my-2 py-1">
+                        <i className="fas fa-user"></i> Log in
+                      </h3>
                     </div>
 
-
-              <form onSubmit={this.handleSubmit} onClick={this.saveUserDetais(userData,loggedIn)}>
-                    <div className="md-form">
-                        <i className="fas fa-envelope prefix " ></i>
+                    <form
+                      onSubmit={this.handleSubmit}
+                      onClick={this.saveUserDetais(userData, loggedIn)}
+                    >
+                      <div className="md-form">
+                        <i className="fas fa-envelope prefix "></i>
                         <input
-                        type="email"
-                        name="email"
-                        id="orangeForm-email" 
-                        className="form-control"
-                        onChange={this.handleChange}
-                        value={email}
-                        autoFocus
+                          type="email"
+                          name="email"
+                          id="orangeForm-email"
+                          className="form-control"
+                          onChange={this.handleChange}
+                          value={email}
+                          autoFocus
                         />
                         <label htmlFor="orangeForm-email">Your email</label>
-                        { errors["email"] && <div className="alert alert-danger"> {errors["email"]} </div> }
-                    </div>
+                        {errors["email"] && (
+                          <div className="alert alert-danger">
+                            {" "}
+                            {errors["email"]}{" "}
+                          </div>
+                        )}
+                      </div>
 
-                    <div className="md-form">
+                      <div className="md-form">
                         <i className="fas fa-lock prefix "></i>
                         <input
-                        name="password"
-                        type="password"
-                        onChange={this.handleChange}
-                        value={password}
-                        id="orangeForm-pass" 
-                        className="form-control"
+                          name="password"
+                          type="password"
+                          onChange={this.handleChange}
+                          value={password}
+                          id="orangeForm-pass"
+                          className="form-control"
                         />
                         <label htmlFor="orangeForm-pass">Your password</label>
-                        { errors["password"] && <div className="alert alert-danger"> {errors["password"]} </div> }
-                    </div>
+                        {errors["password"] && (
+                          <div className="alert alert-danger">
+                            {" "}
+                            {errors["password"]}{" "}
+                          </div>
+                        )}
+                      </div>
 
-                    {authMessage ? (
-                        <p className="bg-info text-white">
-                        {" "}
-                        {authMessage}
-                        </p>
-                        ) : (
+                      {authMessage ? (
+                        <p className="bg-info text-white"> {authMessage}</p>
+                      ) : (
                         <> </>
                       )}
-                    <div className="text-center" >
-                        <button className="btn purple-gradient btn-lg"
-                        onClick={this.handleSubmit}>Login</button>
-                        <div className="inline-ul text-center d-flex justify-content-center">
-                        <div>
-                          <a href="http://localhost:3000/forgotpassword" style={{
-                          color:"blue"}}>Forgot Password</a>
-                          <div style = {{backgroundColor: "blue",
+                      <div className="text-center">
+                        <button
+                          className="btn purple-gradient btn-lg"
+                          onClick={this.handleSubmit}
+                        >
+                          Login
+                        </button>
+                        <div className=" justify-content-center ">
+                          <div className=" text-info text-center mt-3 ">
+                            <a
+                              href="http://localhost:3000/forgotpassword"
+                             
+                            >
+                              <u><strong>Forgot your Password?</strong>  </u>
+                            </a>
+                            {/* <div
+                              style={{
+                                backgroundColor: "blue",
                                 width: "120px",
-                                height: "1px"}}/>
-                        </div>
-                        <div className="d-flex flex-row mt-5">
-                       <span className=" text-right  mt-2  text-info">No Account?</span>
-                               <a href="http://localhost:3000/register" 
-                                > <button type="button" className="btn btn-info btn-rounded btn-sm"> Register </button></a>
+                                height: "1px",
+                              }}
+                            /> */}
                           </div>
-                        </div>  
-                    </div>
-                  </form>
-                    </div>
-                </div>
+                          <div className="d-flex flex-row justify-content-center mt-3">
+                            <span className="   mt-2  text-info">
+                              No Account?
+                            </span>
+                            <a href="http://localhost:3000/register">
+                              {" "}
+                              <button
+                                type="button"
+                                className="btn btn-info btn-rounded btn-sm"
+                              >
+                                {" "}
+                                Register{" "}
+                              </button>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </form>
+                  </div>
                 </div>
+              </div>
             </div>
-            </div>
-        </div>
+          </div>
         </div>
+      </div>
     );
   }
 }
@@ -171,4 +197,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Login);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(Login);
diff --git a/frontend/src/pages/MainPage/index.js b/frontend/src/pages/MainPage/index.js
index 0fa24a2..14f9028 100644
--- a/frontend/src/pages/MainPage/index.js
+++ b/frontend/src/pages/MainPage/index.js
@@ -150,20 +150,20 @@ class MainPage extends React.Component {
     filteredImages = images;
     // console.log("images",images);
 
-    if (loadingPage) {
-      return (
-        <div className=" text-center  m-5">
-        <button className="btn btn-primary btn-large " type="button">
-          <span
-            className="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="false"
-          ></span>
-          Loading...
-        </button>
-      </div>
-      );
-    }
+    // if (loadingPage) {
+    //   return (
+    //     <div className=" text-center  m-5">
+    //     <button className="btn btn-primary btn-large " type="button">
+    //       <span
+    //         className="spinner-border spinner-border-sm"
+    //         role="status"
+    //         aria-hidden="false"
+    //       ></span>
+    //       Loading...
+    //     </button>
+    //   </div>
+    //   );
+    // }
 
 
     let div0 = ["btn", "btn-outline-info", "btn-rounded", " waves-effect"];
@@ -396,7 +396,7 @@ class MainPage extends React.Component {
               Images found.
             </p>
             <hr></hr>
-           
+                   <div className="row">
                                 
                   {!!filteredImages ? (
                     <ImageTable
@@ -406,11 +406,13 @@ class MainPage extends React.Component {
                       // genre = {currentGenre}
                     />
                   )
+                 
                   
                   
                   : (
                     <h1 className="text-white">No Images</h1>
                   )}
+                   </div>
                   
                 
               <br />
diff --git a/frontend/src/pages/Register/index.js b/frontend/src/pages/Register/index.js
index 284cd54..1e9b26d 100644
--- a/frontend/src/pages/Register/index.js
+++ b/frontend/src/pages/Register/index.js
@@ -2,28 +2,16 @@ import React from "react";
 import Joi from "@hapi/joi";
 import { connect } from "react-redux";
 import { getOTP, signUpandVerify } from "../../actions/authAction";
-import "./style.css";
-import {Helmet} from "react-helmet";
-
-
-import "../assets/css/bootstrap.min.css";
-import "../assets/css/mdb.lite.min.css";
-import "../assets/css/mdb.min.css";
-import "../assets/css/style.min.css";
-import "../assets/css/custom.css";
-
-
-
 
 class RegisterForm extends React.Component {
   state = {
     data: {
-      username:"",
+      username: "",
       email: "",
       password: "",
-      otp : "",
+      otp: "",
     },
-    isVerify : false,
+    isVerify: false,
     errors: {},
     authError: "",
   };
@@ -61,224 +49,239 @@ class RegisterForm extends React.Component {
   };
   handleSubmit = (e) => {
     e.preventDefault();
-     
-      this.props.getOTP(this.state.data.email);
-    };
 
-  handleVerify = (e) =>{
+    this.props.getOTP(this.state.data.email);
+  };
+
+  handleVerify = (e) => {
     e.preventDefault();
     // console.log(this.state.data,"verfiy");
 
-    if((this.state.data.username !== "") && 
-      (this.state.data.email !== "") && 
-      (this.state.data.username !== "") &&
-      (this.state.data.otp !== "")){
-        const {username, password, email ,otp} = this.state.data;
-        this.props.signUpandVerify({username, email, password ,otp});
-      }
-  }
+    if (
+      this.state.data.username !== "" &&
+      this.state.data.email !== "" &&
+      this.state.data.username !== "" &&
+      this.state.data.otp !== ""
+    ) {
+      const { username, password, email, otp } = this.state.data;
+      this.props.signUpandVerify({ username, email, password, otp });
+    }
+  };
 
   handleResend = (e) => {
     e.preventDefault();
     this.props.getOTP(this.state.data.email);
-  }
-
+  };
 
   schema = {
     username: Joi.string().alphanum().min(3).max(30),
     email: Joi.string().email().required().label("Email"),
     password: Joi.string().min(8).required().label("Password"),
-    otp: (this.state.isVerify === false) ? "" : Joi.string().min(6).max(6),
+    otp: this.state.isVerify === false ? "" : Joi.string().min(6).max(6),
   };
 
-
-  saveUserDetais(user,loggedIn,authMessage){
-    if(authMessage !== '' && authMessage !== undefined){return;}
-   // console.log("hiiii",user.userData);
-   // console.log(user);
-    if(user.userData === undefined){return;}
-    if(loggedIn){
-      localStorage.setItem('loggedIn', true);
-      if(localStorage.getItem('loggedIn')==='true'){  
-        localStorage.setItem('name',user.userData._id);
+  saveUserDetais(user, loggedIn, authMessage) {
+    if (authMessage !== "" && authMessage !== undefined) {
+      return;
+    }
+    // console.log("hiiii",user.userData);
+    // console.log(user);
+    if (user.userData === undefined) {
+      return;
+    }
+    if (loggedIn) {
+      localStorage.setItem("loggedIn", true);
+      if (localStorage.getItem("loggedIn") === "true") {
+        localStorage.setItem("name", user.userData._id);
       }
     }
   }
 
   render() {
-    if(this.props.status === true && this.state.isVerify === false){
-      this.setState({isVerify : true});
+    if (this.props.status === true && this.state.isVerify === false) {
+      this.setState({ isVerify: true });
     }
-    const { authMessage,userData ,loggedIn } = this.props;
+    const { authMessage, userData, loggedIn } = this.props;
     // console.log(loggedIn);
     const { errors, authError } = this.state;
-    const { username, email, password, otp} = this.state.data;
+    const { username, email, password, otp } = this.state.data;
     if (loggedIn) this.props.history.push("/dashboard");
 
     return (
-        <div >
-          <div className="bg-image-register ">
-            <div className="container h-100 d-flex justify-content-center align-items-center">
-
-              <div className="row pt-5">
-
-                <div className="col-md-12">
-
-                  <div className="card">
-                    <div className="card-body">
+      <div>
+        <div className="bg-image-register ">
+          <div className="container h-100 d-flex justify-content-center align-items-center">
+            <div className="row pt-5">
+              <div className="col-md-12">
+                <div className="card">
+                  <div className="card-body">
                     <div className="form-header purple-gradient">
-                        <h3 className="font-weight-500 my-2 py-1"><i className="fas fa-user"></i> Register</h3>
+                      <h3 className="font-weight-500 my-2 py-1">
+                        <i className="fas fa-user"></i> Register
+                      </h3>
                     </div>
-                      {/* <h2 className="font-weight-bold my-4 text-center mb-2 mt-2 font-weight-bold">
+                    {/* <h2 className="font-weight-bold my-4 text-center mb-2 mt-2 font-weight-bold">
                         <strong>Register</strong>
                       </h2> */}
 
-
+                    <div className="">
+                      <div className="d-flex flex-row-reverse">
+                        <a href="http://localhost:3000/login">
+                          {" "}
+                          <button
+                            type="button"
+                            className="btn btn-info btn-rounded btn-sm"
+                          >
+                            LogIn
+                          </button>
+                        </a>
+                        <span className=" text-right mt-2 text-info">
+                          Already member?
+                        </span>
+                      </div>
 
                       <div className="">
-                        <div className="d-flex flex-row-reverse">
-                        <a href="http://localhost:3000/login" 
-                            > <button type="button" className="btn btn-info btn-rounded btn-sm">SignIn</button></a>
-                          <span className=" text-right mt-2 text-info">Already member?</span>
-
-
-                        </div>
-
-
-
-                        <div className="">
-
-                          <form onSubmit={this.handleSubmit} onClick={this.saveUserDetais(userData,loggedIn,authMessage)}>
-
-
-                                <div className="md-form">
-                                    <i className="fas fa-user prefix"></i>
-                                    <input
-                                    type = "text"
-                                    name="username"
-                                     id="orangeForm-name" 
-                                    className="form-control"
-                                    error={errors["username"]}
-                                    onChange={this.handleChange}
-                                    value = {username}
-                                    />
-                                    <label for="orangeForm-name">Your name</label>
-                                    { errors["username"] && <div className="alert alert-danger"> {errors["username"]} </div> }
-                                </div>
-                                <div className="md-form">
-                                    <i className="fas fa-envelope prefix"></i>
-                                    <input
-                                    name="email"
-                                    id="orangeForm-email" 
-                                    className="form-control"
-                                    type="email"
-                                    error={errors["email"]}
-                                    onChange={this.handleChange}
-                                    value = {email}
-                                    />
-                                    <label for="orangeForm-email">Your email</label>
-                                    { errors["email"] && <div className="alert alert-danger"> {errors["email"]} </div> }
-                                </div>
-
-                                <div className="md-form">
-                                    <i className="fas fa-lock prefix"></i>
-                                    <input
-                                    name="password"
-                                    id="orangeForm-pass" 
-                                    className="form-control"
-                                    type="password"
-                                  
-                                    onChange={this.handleChange}
-                                    // label="password"
-                                    value = {password}
-                                    />
-                                    <label for="orangeForm-pass">Your password</label>
-                                    { errors["password"] && <div className="alert alert-danger"> {errors["password"]} </div> }
-                                </div>
-
-                                
-
-                                {
-                                  this.state.isVerify ?                       
-                                      <div className="md-form">
-                                        <i className="fas fa-key prefix"></i>
-                                        <input
-                                        type = "text"
-                                        name="otp"
-                                        id="orangeForm-otp" 
-                                        className="form-control"
-                                    
-                                        onChange={this.handleChange}
-                                        value = {otp}
-                                        />
-                                        <label for="orangeForm-otp">Enter OTP</label>
-                                    </div>
-                                  : 
-                                  ""
-                                }
-
-
-                                {authMessage ? (
-                                <p className="bg-info text-white">
+                        <form
+                          onSubmit={this.handleSubmit}
+                          onClick={this.saveUserDetais(
+                            userData,
+                            loggedIn,
+                            authMessage
+                          )}
+                        >
+                          <div className="md-form">
+                            <i className="fas fa-user prefix"></i>
+                            <input
+                              type="text"
+                              name="username"
+                              id="orangeForm-name"
+                              className="form-control"
+                              error={errors["username"]}
+                              onChange={this.handleChange}
+                              value={username}
+                            />
+                            <label for="orangeForm-name">Your name</label>
+                            {errors["username"] && (
+                              <div className="alert alert-danger">
+                                {" "}
+                                {errors["username"]}{" "}
+                              </div>
+                            )}
+                          </div>
+                          <div className="md-form">
+                            <i className="fas fa-envelope prefix"></i>
+                            <input
+                              name="email"
+                              id="orangeForm-email"
+                              className="form-control"
+                              type="email"
+                              error={errors["email"]}
+                              onChange={this.handleChange}
+                              value={email}
+                            />
+                            <label for="orangeForm-email">Your email</label>
+                            {errors["email"] && (
+                              <div className="alert alert-danger">
+                                {" "}
+                                {errors["email"]}{" "}
+                              </div>
+                            )}
+                          </div>
+
+                          <div className="md-form">
+                            <i className="fas fa-lock prefix"></i>
+                            <input
+                              name="password"
+                              id="orangeForm-pass"
+                              className="form-control"
+                              type="password"
+                              onChange={this.handleChange}
+                              // label="password"
+                              value={password}
+                            />
+                            <label for="orangeForm-pass">Your password</label>
+                            {errors["password"] && (
+                              <div className="alert alert-danger">
                                 {" "}
-                                {authMessage}
-                                </p>
-                                ) : (
-                                <> </>
-                                )}
-                                {
-                                  this.state.isVerify
-                                ?
-                                <div style = {{display : "flex"}}>
-                                  <div className="text-center"> 
-                                  <button className="btn btn-indigo btn-rounded mt-5"                 
+                                {errors["password"]}{" "}
+                              </div>
+                            )}
+                          </div>
+
+                          {this.state.isVerify ? (
+                            <div className="md-form">
+                              <i className="fas fa-key prefix"></i>
+                              <input
+                                type="text"
+                                name="otp"
+                                id="orangeForm-otp"
+                                className="form-control"
+                                onChange={this.handleChange}
+                                value={otp}
+                              />
+                              <label for="orangeForm-otp">Enter OTP</label>
+                            </div>
+                          ) : (
+                            ""
+                          )}
+
+                          {authMessage ? (
+                            <p className="bg-info text-white"> {authMessage}</p>
+                          ) : (
+                            <> </>
+                          )}
+                          {this.state.isVerify ? (
+                            <div className="row" style={{ display: "flex" }}>
+                              <div className="text-center col-6">
+                                <button
+                                  className="btn  purple-gradient btn-rounded mt-3 btn-lg"
                                   type="button"
                                   onClick={this.handleVerify}
-                                  >Verify</button>
-                                  </div> 
-
-                                  <div className="text-center"> 
-                                  <button className="btn btn-indigo btn-rounded mt-5"                 
+                                >
+                                  Verify
+                                </button>
+                              </div>
+
+                              <div className="text-center col-6">
+                                <button
+                                  className="btn  purple-gradient btn-rounded mt-3 btn-lg"
                                   type="button"
                                   onClick={this.handleResend}
-                                  >Resend</button>
-                                  </div>  
-                                </div>
-                                :
-                                  <div className="text-center"> 
-                                  <button className="btn purple-gradient mt-3 btn-lg"                 
-                                  type="button"
-                                  disabled = {this.validate()}
-                                  onClick={this.handleSubmit}
-                                  >Sign up</button>
-                                  </div>
-
-                                }
-
-
-
+                                >
+                                  Resend
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <div className="text-center">
+                              <button
+                                className="btn purple-gradient mt-3 btn-lg"
+                                type="button"
+                                disabled={this.validate()}
+                                onClick={this.handleSubmit}
+                              >
+                                Sign up
+                              </button>
+                            </div>
+                          )}
                         </form>
-                        </div>
-
-
-
-                          <div style = {{
-                                width: "154px",
-                                height: "1px",
-                                marginLeft : "256px"}}/>
-
-
                       </div>
+
+                      <div
+                        style={{
+                          width: "154px",
+                          height: "1px",
+                          marginLeft: "256px",
+                        }}
+                      />
                     </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          </div>
-
-
+        </div>
       </div>
-
     );
   }
 }
@@ -287,7 +290,7 @@ const mapStateToProps = (state) => {
     userData: state.auth.userData,
     loggedIn: state.auth.loggedIn,
     authMessage: state.auth.authMessage,
-    status: state.auth.status
+    status: state.auth.status,
   };
 };
 const mapDispatchToProps = (dispatch) => {
@@ -297,4 +300,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(RegisterForm);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(RegisterForm);
diff --git a/routes/vision.js b/routes/vision.js
index 203d7bf..2be1cd6 100644
--- a/routes/vision.js
+++ b/routes/vision.js
@@ -16,7 +16,7 @@ const getAllGenres = new GetAllGenres();
 
 const storage = multer.diskStorage({
     destination: (req, file, callback) => {
-      console.log("multer")
+     
       callback(null, "./uploads/");
     },
     filename: (req, file, callback) => {