diff --git a/package-lock.json b/package-lock.json
index cd8a956..51a82ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14745,6 +14745,22 @@
         }
       }
     },
+    "react-tooltip": {
+      "version": "4.2.21",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
+      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
diff --git a/package.json b/package.json
index 97dfe35..325a128 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-select": "^3.1.1",
+    "react-tooltip": "^4.2.21",
     "serve": "^11.3.2",
     "socket.io-client": "^2.3.0",
     "styled-components": "^5.2.1",
diff --git a/src/Component/Auth/Login.js b/src/Component/Auth/Login.js
index 55b7259..4200d07 100644
--- a/src/Component/Auth/Login.js
+++ b/src/Component/Auth/Login.js
@@ -122,8 +122,8 @@ setSubmitting(false);
        
     }
     return (
-        
-       <Container id="login">
+       <div className="wrapper">
+         <Container id="login">
           <Row>
               <Col id="login1">
               <h1>Welcome Back!</h1>
@@ -144,8 +144,8 @@ setSubmitting(false);
                 <h4  id="link" onClick={()=>setauthpage("forgot") } style={{color:":#834F80"}}>Forgot Password?</h4>
                 <h4>Not Registered yet?<a id="link" onClick={()=>setauthpage("signup")} style={{color:":#834F80"}}>Sign up</a></h4>
                 <button> {submitting?( <div>Loading  <div class="spinner-border " role="status">
-  <span class="sr-only">Loading...  </span>
-</div></div>):'Next'}  </button>
+                <span class="sr-only">Loading...  </span>
+                </div></div>):'Next'}  </button>
             </form>
             ):
             ( <form className="login_form" onSubmit={handlesubmit}>
@@ -156,8 +156,8 @@ setSubmitting(false);
              <h4  id="link" onClick={()=>setauthpage("forgot") } style={{color:":#834F80"}}>Forgot Password?</h4>
              <h4>Not Registered yet?<a id="link" onClick={()=>setauthpage("signup")} style={{color:":#834F80"}}>Sign up</a></h4>
              <button>{submitting?( <div>Loading  <div class="spinner-border " role="status">
-  <span class="sr-only">Loading...  </span>
-</div></div>):'Login'}</button><button onClick={()=>setBack(true)}>Back</button> 
+            <span class="sr-only">Loading...  </span>
+            </div></div>):'Login'}</button><button onClick={()=>setBack(true)}>Back</button> 
          </form>)}
               </Container>
              
@@ -165,6 +165,8 @@ setSubmitting(false);
           </Row>
           
         </Container>
+       </div> 
+       
         
         
     )
diff --git a/src/Component/Auth/login.css b/src/Component/Auth/login.css
index b348942..61bb666 100644
--- a/src/Component/Auth/login.css
+++ b/src/Component/Auth/login.css
@@ -1,111 +1,105 @@
 @media screen and (max-width: 800px) {
-  #login1{
-      display:none;
-  }  
-  body{
-    background:white;
+  #login1 {
+    display: none;
+  }
+  body {
   }
 }
 @media screen and (min-width: 400px) {
-  #login{
-      -webkit-box-shadow: 10px 10px 66px -4px rgba(0,0,0,0.75);
-      -moz-box-shadow: 10px 10px 66px -4px rgba(0,0,0,0.75);
-      box-shadow: 15px 15px 16px -4px rgba(0,0,0,0.75);
-     
-
+  #login {
+    box-shadow: 6px 4px 14px -6px rgba(17, 2, 2, 0.75);
+    -webkit-box-shadow: 6px 4px 14px -6px rgba(17, 2, 2, 0.75);
+    -moz-box-shadow: 6px 4px 14px -6px rgba(17, 2, 2, 0.75);
   }
 }
+
 #login {
-   background:white;
-   display: flex;
-   flex-direction: column;
-   text-align: center;
-   padding: 5px;
-   max-width: 800px;
-   padding:0;
-   margin: auto auto;
-   margin-top: 40px;
-   
- }
-#login3 >h1{
-     color:#1F3D7B;
- }
- input{
-     padding:15px;
-     font-size: 1.1em;
-     border:none;
-     background:#f4f4f2;
-     margin-bottom:15px;
-     border-radius:5px;
-     width:70%;
- }
- #login1 {
-     background:#1F3D7B;
-    
- }
- #login1 > h1{
-     margin-top: 80px;
-   font-size: 5.4em;
-   font-weight: 800;
-   color:white;
- }
- #login1 >h2{
-   margin:20px;
-   font-size: 1.4em;
-   font-weight:300;
-   color:white;
-}
- input:focus{
-   outline:none;
-}
- button{
-   margin:auto auto;
-   margin-top:20px;
-   padding:15px;
-   width:60%;
-   font-size:1.2em;
-   background:#1F3D7B;
-   color:white;
-   border-radius:5px;
-   border:none;
- }
- button:focus{
-  outline:none;
-}
- #login3{
-     padding:25px 0 25px 0;
- }
- #btn0{
-   display:flex;
-   justify-content: center;
-   padding:15px;
-   font-size: 1.2em;
-   border:2px white solid;
-   background:#1F3D7B;
-   margin:50px auto;
-   border-radius: 5px;
-   width:55%;
-   color:white;
-   transition: all .4s ease;
- }
- #btn0:focus{
-   outline:none;
- }
+  background: white;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 5px;
+  max-width: 800px;
+  padding: 0;
+  margin: auto auto;
+  margin-top: 40px;
+}
+#login3 > h1 {
+  color: #6f4a8e;
+}
+input {
+  padding: 15px;
+  font-size: 1.1em;
+  border: none;
+  background: #f4f4f2;
+  margin-bottom: 15px;
+  border-radius: 5px;
+  width: 70%;
+}
+#login1 {
+  background: #6f4a8e;
+}
+#login1 > h1 {
+  margin-top: 80px;
+  font-size: 5.4em;
+  font-weight: 800;
+  color: white;
+}
+#login1 > h2 {
+  margin: 20px;
+  font-size: 1.4em;
+  font-weight: 300;
+  color: white;
+}
+input:focus {
+  outline: none;
+}
+button {
+  margin: auto auto;
+  margin-top: 20px;
+  padding: 15px;
+  width: 60%;
+  font-size: 1.2em;
+  background: #6f4a8e;
+  color: white;
+  border-radius: 5px;
+  border: none;
+}
+button:focus {
+  outline: none;
+}
+#login3 {
+  padding: 25px 0 25px 0;
+}
+#btn0 {
+  display: flex;
+  justify-content: center;
+  padding: 15px;
+  font-size: 1.2em;
+  border: 2px white solid;
+  background: #6f4a8e;
+  margin: 50px auto;
+  border-radius: 5px;
+  width: 55%;
+  color: white;
+  transition: all 0.4s ease;
+}
+#btn0:focus {
+  outline: none;
+}
 
- #btn0:hover{
-   background:white;
-   color:#1F3D7B
+#btn0:hover {
+  background: white;
+  color: #6f4a8e;
 }
 .login_icon {
-  
   object-fit: contain;
   display: block;
   margin: 0 auto;
 }
-#link{
-  color:#1F3D7B;
-  
+#link {
+  color: #6f4a8e;
 }
-#link:hover{
+#link:hover {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/Component/Auth/register.css b/src/Component/Auth/register.css
index ab756c1..b07ec8b 100644
--- a/src/Component/Auth/register.css
+++ b/src/Component/Auth/register.css
@@ -8,10 +8,9 @@
  }
  @media screen and (min-width: 800px) {
      #signup{
-         -webkit-box-shadow: 10px 10px 66px -4px rgba(0,0,0,0.75);
-         -moz-box-shadow: 10px 10px 66px -4px rgba(0,0,0,0.75);
-         box-shadow: 15px 15px 16px -4px rgba(0,0,0,0.75);
-        
+      box-shadow: 6px 4px 14px -6px rgba(17,2,2,0.75);
+      -webkit-box-shadow: 6px 4px 14px -6px rgba(17,2,2,0.75);
+      -moz-box-shadow: 6px 4px 14px -6px rgba(17,2,2,0.75);
  
      }
   }
@@ -28,7 +27,7 @@
      
    }
  #signup3 >h1{
-       color: #1F3D7B;
+       color: #6F4A8E;
    }
    input{
        padding:15px;
@@ -40,7 +39,7 @@
        width:70%;
    }
    #signup1 {
-       background:#1F3D7B;
+       background:#6F4A8E;
       
    }
    #signup1 > h1{
@@ -64,7 +63,7 @@
      padding:15px;
      width:60%;
      font-size:1.2em;
-     background:#1F3D7B;
+     background:#6F4A8E;
      color:white;
      border-radius:5px;
      border:none;
@@ -82,7 +81,7 @@
      font-size: 1.2em;
      border:none;
      border:2px white solid;
-     background:#1F3D7B;
+     background:#6F4A8E;
      margin:50px auto;
      border-radius: 5px;
      width:55%;
@@ -92,7 +91,7 @@
  
    #btn1:hover{
      background:white;
-     color:#1F3D7B;
+     color:#6F4A8E;
  }
  #btn1:focus{
      outline:none;
@@ -105,5 +104,5 @@
      margin: 0 auto;
    }
    #link1{
-       color:#1F3D7B;
+       color:#6F4A8E;
    }
\ No newline at end of file
diff --git a/src/Component/Questions/Data.js b/src/Component/Questions/Data.js
new file mode 100644
index 0000000..e1162fa
--- /dev/null
+++ b/src/Component/Questions/Data.js
@@ -0,0 +1,45 @@
+let questions =[
+
+    {
+       id:"1.",
+       title:"What is the time complexity of merge sort?",
+       op1:"O(n)",
+       op2:"O(n)",
+       op3:"O(n)",
+       op4:"O(n)",
+       correct:"O(n) is the correct answer",
+       exp:"This is because whenever your think about the"
+    },
+    {
+      id:"2.",
+      title:"What is the time complexity of merge sort?",
+      op1:"O(n)",
+      op2:"O(n)",
+      op3:"O(n)",
+      op4:"O(n)",
+      correct:"O(n) is the correct answer",
+      exp:"This is because whenever your think about the"
+   },
+   {
+      id:"3.",
+      title:"What is the time complexity of merge sort?",
+      op1:"O(n)",
+      op2:"O(n)",
+      op3:"O(n)",
+      op4:"O(n)",
+      correct:"O(n) is the correct answer",
+      exp:"This is because whenever your think about the"
+   },
+    
+   
+]
+
+
+
+
+
+
+
+
+
+export default questions;
\ No newline at end of file
diff --git a/src/Component/Questions/Mcq.js b/src/Component/Questions/Mcq.js
new file mode 100644
index 0000000..e84c7ee
--- /dev/null
+++ b/src/Component/Questions/Mcq.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import './mcq.css'
+import Header from '../Layout/Header'
+import questions from './Data'
+import ReactTooltip from 'react-tooltip';
+
+
+function Mcq() {
+
+    
+    
+    return (
+        <div className="mcq_wrapper">
+            <Header/>
+            <div className="container p-3">
+            <h1 className=" text-center mt-3 mb-5 q-title">Mock Interview MCQ Questions</h1>
+            <div className="ques-wrapper m-3">
+               {
+                   questions.map(ques=>{
+                       return (
+                           <div className="ques">
+                               <h4>{ques.id}{" "}{ques.title}</h4>
+                                 
+                                   <p> A. {ques.op1}</p>
+                                   <p> B. {ques.op2}</p>
+                                   <p> C. {ques.op3}</p>
+                                   <p> D. {ques.op4}</p>
+                                   <button type="button" class="btn btn-primary" data-tip="React-tooltip">View Answer</button>
+                                   <ReactTooltip place="right" type="dark" effect="solid">
+                                       <h6>{ques.correct}</h6>
+                                       <p>{ques.exp}</p>
+                                   </ReactTooltip>    
+                           </div>
+                       )
+                   })
+               }
+            </div>
+            </div>
+            
+        </div>
+    )
+}
+
+export default Mcq
diff --git a/src/Component/Questions/mcq.css b/src/Component/Questions/mcq.css
new file mode 100644
index 0000000..cd3a047
--- /dev/null
+++ b/src/Component/Questions/mcq.css
@@ -0,0 +1,16 @@
+.mcq_wrapper {
+  background: #d8d9f5;
+}
+
+.container {
+  background: rgb(234, 235, 253);
+  
+  border-radius: 15px;
+  padding-top: 20px;
+  
+}
+
+.ques {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
diff --git a/src/index.js b/src/index.js
index ffa48a9..2995480 100644
--- a/src/index.js
+++ b/src/index.js
@@ -40,6 +40,7 @@ const InterviewApprove = React.lazy(() => import('./Pages/InterviewApprove'));
 const Interviewed = React.lazy(() => import('./Pages/Interviewed'));
 const Hackathon = React.lazy(() => import('./Pages/Hackathon'));
 const Hackathonct = React.lazy(() => import('./Pages/Hackathonct'));
+const McqQues  = React.lazy(()=>import('./Component/Questions/Mcq'))
 const Root = () => {
   const initialState = useContext(Context);
   const [State, dispatch] = useReducer(reducer, initialState);
@@ -72,6 +73,7 @@ catch(err)
           <Route path="/details/:id" component={withRouter(Eventsp)} />
           <Route path="/verify" component={withRouter(ApproveEvent)} />
           <Route path="/profile" component={withRouter(Profile)} />
+          <Route path="/mcq" component={withRouter(McqQues)} />
           <Route path="/signup/club/:id" component={withRouter(SignupC)} />
          
           <ProtectedRoute path="/interview_create" component={withRouter(Interviewct)} />
diff --git a/src/index.scss b/src/index.scss
index 86b9bf8..dd39273 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,6 @@
-
+*{
+  margin:0px;
+}
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',