diff --git a/App.js b/App.js
index 12e2176..4ec9332 100644
--- a/App.js
+++ b/App.js
@@ -1,10 +1,10 @@
-import Login from "./Login";
-
-function App(){
-    return(
-        <Login/>
-    )
-}
-export default App;
-
-
+import Login from "./Login";
+
+function App(){
+    return(
+        <Login/>
+    )
+}
+export default App;
+
+
diff --git a/Left.js b/Left.js
index e81eb33..24c5be7 100644
--- a/Left.js
+++ b/Left.js
@@ -1,19 +1,23 @@
-import eye from "./images/eye.png";
-import user from "./images/user.png";
-const Left = () => {
-
-    return(
-        <div className="left">
-        <p id="titl">Login</p>
-        <h5 id="sig">Sign in to your Account</h5>
-        <div className="mail2"><img src={user} alt="hui" id="user"/><input  className="mail" type ="email" placeholder="Username"></input></div>
-        <div className="password2"><img src={eye} alt="hui" id="eye"/><input className="password" type="password" placeholder="Password"></input></div>
-        <button id="log">Login</button>
-        <a href="google.com" id="forgot">Forgot password</a>
-        <button id="crt">Create New Account</button>
-        {/* <img src={eye} alt="hui"></img> */}
-
-    </div>
-    );
-}
+// import eye from "./images/eye.png";
+import mail from "./images/mail.png";
+import user from "./images/user.png";
+import lock from "./images/lock.png";
+const Left = () => {
+
+    return(
+        <div className="left">
+        <p id="titl">Sign Up</p>
+        <h5 id="sig">Create New Account Here</h5>
+        <div className="mail2"><img src={user} alt="hui" id="user"/><input  className="mail" type ="text" placeholder="Name"></input></div>
+        <div className="password2"><img src={mail} alt="hui" id="eye"/><input className="password" type="email" placeholder="College Mail"></input></div>
+        <div className="password2"><img src={lock} alt="hui" id="eye"/><input className="password" type="text" placeholder="Password"></input></div>
+        <div className="password2"><img src={lock} alt="hui" id="eye"/><input className="password" type="text" placeholder="Confirm Password"></input></div>
+        <button id="log">Login</button>
+        <p id="forgot">Already have an Account</p>
+        <button id="crt">Create New Account</button>
+        {/* <img src={eye} alt="hui"></img> */}
+
+    </div>
+    );
+}
 export default Left;
\ No newline at end of file
diff --git a/Login.js b/Login.js
index 8d7c1d6..a466f2b 100644
--- a/Login.js
+++ b/Login.js
@@ -1,22 +1,22 @@
-import Left from "./Left";
-import Right from "./Right";
-
-
-const Login = () => {
-      
-    return(
-        <div className = "main">
-             <div className="left">
-             <Left/>
-             </div>
-            
-             <div className="right">
-             <Right/>
-             </div>
-            
-           
-        </div>
-
-    );
-}
+import Left from "./Left";
+// import Right from "./Right";
+
+
+const Login = () => {
+      
+    return(
+        <div className = "main">
+             <div className="left">
+             <Left/>
+             </div>
+            
+             {/* <div className="right">
+             <Right/>
+             </div> */}
+            
+           
+        </div>
+
+    );
+}
 export default Login;
\ No newline at end of file
diff --git a/Right.js b/Right.js
new file mode 100644
index 0000000..29d0b88
--- /dev/null
+++ b/Right.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import SignUPButton from './SignUPButton';
+const Boxstyle={
+    padding: "70px 40px",
+    position: "absolute",
+    left: "800px",
+    top: "80px",
+    width: "550px",
+    height: "650px",
+
+    background: "#90E0DB",
+    borderRadius: "106px",
+    
+}
+const TxtStyle={
+
+    // position: "absolute",
+    // width: "462px",
+    // height: "402px",
+    // left: "821px",
+    // top: "211px",
+
+    fontFamily: "Sahitya",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: "30px",
+    // lineHeight: "78px",
+
+    color: "#ffffff"
+}
+
+
+
+function Right() {
+    return(
+        <>
+        <div className="rightBox" style={Boxstyle}> 
+        <div className="textHeading" style={{fontSize:"25px",color: "#ffffff",fontFamily: "Sahitya",fontStyle: "normal",fontWeight: "bold"}}><h1>HOLA!! FRIENDS,</h1></div>
+        <div className="introTxt"><p>Join the exclusive community of  
+ABV -IIITM and share your opinion ,you can also answer to some questions and peek into the weired journey of an engineer.</p></div>
+{<SignUPButton/>}
+</div>
+        </>
+
+    );
+}
+
+export default Right;
\ No newline at end of file
diff --git a/SignUPButton.js b/SignUPButton.js
new file mode 100644
index 0000000..4fb440d
--- /dev/null
+++ b/SignUPButton.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+const btnStyling={
+    
+    color: "white",
+    height: "75px",
+    width: "333px",
+    borderRadius: "25px",
+    backgroundColor: "#90E0DB",
+    border: "5px solid #FFFFFF",
+    position: "absolute",
+    left: "100px",
+    top: "400px",
+    
+    // text inside button
+
+    // width: "230px",
+    // height: "32px",
+    // left: "975px",
+    // top: "568px",
+
+    fontFamily: "Sahitya",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: "30px",
+    // lineHeight: "47px",
+    
+
+    
+
+
+    
+}
+
+
+
+function SignUPButton() {
+    return (
+        <button id="sign" ><b>SIGNUP</b></button>
+    
+    
+    );
+  }
+ export default SignUPButton;
\ No newline at end of file
diff --git a/eye.png b/eye.png
new file mode 100644
index 0000000..5a7a230
Binary files /dev/null and b/eye.png differ
diff --git a/index.css b/index.css
index ef2db24..e362922 100644
--- a/index.css
+++ b/index.css
@@ -135,41 +135,22 @@ flex-direction: row;
   margin-top: 20px;
 }
 #sig{
+  margin-top: 10px;
   margin-left: 30px;
 }
 .main{
   display: flex;
   flex-direction: row;
+  justify-content: end;
 
 }
-#sign{
-  
-    
-    color:"white";
-    height: "75px";
-    width:"333px";
-    border-Radius: "25px";
-    background-Color: "#90E0DB";
-    border: "5px solid #FFFFFF";
-    position: "absolute";
-    left: "100px";
-    top: "400px";
-    font-Family: "Sahitya";
-    font-Style: "normal";
-    font-Weight: "bold";
-    font-Size: "30px";
-    
-  }
-  .introTxt{
-    font-Family: "Sahitya";
-    font-Style: "normal";
-    font-Weight: "bold";
-    font-Size: "30px";
-  
-    color: "#ffffff"
+.left{
+  margin-right: 180px;
 }
 
 
+
+
     
 
 
diff --git a/lock.png b/lock.png
new file mode 100644
index 0000000..1d81df0
Binary files /dev/null and b/lock.png differ
diff --git a/mail.png b/mail.png
new file mode 100644
index 0000000..b27da06
Binary files /dev/null and b/mail.png differ
diff --git a/user.png b/user.png
new file mode 100644
index 0000000..74dfb10
Binary files /dev/null and b/user.png differ