diff --git a/common.js b/common.js
new file mode 100644
index 0000000..843c24b
--- /dev/null
+++ b/common.js
@@ -0,0 +1,95 @@
+import { login } from "./login.js";
+
+let logininfo = JSON.parse(localStorage.getItem("info")) || [];
+
+document.getElementById("login").innerHTML = login();
+
+import { signUpPage, infopage } from "./signUpPage.js";
+
+document.getElementById("signappend").innerHTML = signUpPage();
+let info = infopage();
+
+let navlogin = document.getElementById("navlogin");
+
+navlogin.addEventListener("click", () => {
+  let login = document.getElementById("signappend");
+  login.style.display = "block";
+  login.style.overflowY;
+});
+//===========Animation
+let close = document.getElementById("close");
+close.addEventListener("click", () => {
+  let login = document.getElementById("signappend");
+  login.style.transform = "translateX(800px)";
+  login.style.transition = "1s";
+  setTimeout(()=>{
+    login.style.display="none";
+    login.style.transform = "translateX(0px)"
+  },1000);
+ 
+});
+
+$(".enterotp").keyup(function () {
+  if (this.value.length == this.maxLength) {
+    $(this).next(".enterotp").focus();
+  }
+});
+$(".loginput1").keyup(function () {
+  if (this.value.length == this.maxLength) {
+    $(this).next(".loginput1").focus();
+  }
+});
+
+let reqotp = document.getElementById("requestptp");
+let otpc2;
+reqotp.addEventListener("click", () => {
+  let userotp = Math.floor(Math.random() * 1000 + 1000);
+  otpc2=userotp;
+  setTimeout(() => {
+    alert(`${userotp} is Your OTP to login.`);
+  }, 2000);
+});
+
+let varifyotp = document.getElementById("verify");
+
+varifyotp.addEventListener("click", () => {
+  
+  let otp1 = document.querySelector(".enterotp1").value;
+  let otp2 = document.querySelector(".enterotp2").value;
+  let otp3 = document.querySelector(".enterotp3").value;
+  let otp4 = document.querySelector(".enterotp4").value;
+  let otp = otp1 + otp2 + otp3 + otp4;
+  console.log(otp);
+  let wrong = document.getElementById("incorrect");
+  if (otp == otpc2) {
+    document.getElementById("loginbox").innerHTML = info;
+    userName();
+  } else {
+    wrong.innerText = "Incorrect OTP! Please try again.";
+    wrong.style.color = "red";
+  }
+});
+var obj = JSON.parse(localStorage.getItem("userDetails")) || {};
+function userName() {
+  let savebtn = document.getElementById("savebtn");
+  savebtn.addEventListener("click", () => {
+    let username = document.getElementById("username").value;
+    let lastname = document.getElementById("userlastname").value;
+    obj = { username, lastname };
+    localStorage.setItem("userDetails", JSON.stringify(obj));
+    window.location.href = "login.html";
+  });
+}
+localStorage.setItem("userDetails", JSON.stringify(obj));
+
+let userInfo = JSON.parse(localStorage.getItem("userDetails"));
+
+if (Object.keys(userInfo).length > 0) {
+  let changename = document.getElementById("changename");
+  changename.innerText =
+    "Hi," + userInfo.username + " " + userInfo.lastname + " ";
+  let changebox = document.getElementById("navlogin");
+  changebox.style.backgroundColor = "lightgrey";
+  changebox.style.height = "30px";
+  changebox.style.padding = "5px";
+}
diff --git a/login.css b/login.css
new file mode 100644
index 0000000..8c6bb61
--- /dev/null
+++ b/login.css
@@ -0,0 +1,35 @@
+@import url("https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap");
+* {
+  font-family: Quicksand;
+}
+
+#navlogin{
+cursor: pointer;
+
+}
+
+#signappend{
+  display: none;
+  position: absolute;
+  margin-right: -55%;
+  margin-top: -25px;
+  animation: right 2s;
+  z-index: 1;
+  right: 745px;
+}
+
+@keyframes right{
+  from{
+  transform: translateX(700px);
+  }
+  to{
+    transform: translateX(0px);
+  }
+  }
+  
+  #navlogin{
+    display: flex;
+    align-items: center;
+  }
+
+  
diff --git a/signUpPage.css b/signUpPage.css
new file mode 100644
index 0000000..c7cab2c
--- /dev/null
+++ b/signUpPage.css
@@ -0,0 +1,206 @@
+@import url("https://fonts.googleapis.com/css?family=Quicksand");
+* {
+  font-family: Quicksand;
+}
+#sublogin {
+  border: 1px solid royalblue;
+  background-image: url(https://in.sugarcosmetics.com/Login_bg.svg);
+  height: 900px;
+  width: 655px;
+  background-position: 100%;
+  background-size: cover;
+  padding: 25px;
+  
+}
+body{
+  overflow: hidden;
+}
+
+
+#loginbox {
+  width: 640px;
+  height: 440px;
+  background-color: white;
+  margin-top: 25px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  
+}
+.boxtop {
+  display: flex;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-left: 30px;
+}
+.logmob {
+  margin-top: 26px;
+}
+.loginput {
+  margin-left: 30px;
+  width: 565px;
+  height: 45px;
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 20px;
+  align-items: center;
+}
+.loginput1 {
+  width: 28px;
+  text-align: center;
+  border-top: none;
+  border-right: none;
+  border-bottom: 1px solid rgb(160, 160, 163);
+  border-left: none;
+  border-image: initial;
+  margin: 3px;
+  font-weight: 600;
+  font-size: 24px;
+  outline: none;
+}
+#requestptp {
+  padding: 15px;
+  border: none;
+  cursor: pointer;
+}
+.loginsign {
+  font-size: 24px;
+}
+.contrycode {
+  font-size: calc(1.275rem + 0.3vw);
+  text-align: center;
+}
+.hrline {
+  border: 0.3px solid gray;
+  position: relative;
+  margin-top: 80px;
+  width: 95%;
+  margin-left: 10px;
+}
+.enterotp {
+  width: 25px;
+}
+#verify {
+  color: #fff;
+  width: 180px;
+  margin-left: 3px;
+  margin-top: 20px;
+  font-size: 14px;
+  border: none;
+  padding: 10px;
+  background-color: #fdaac9;
+  cursor: pointer;
+}
+#otpsection {
+  margin-left: 30px;
+}
+.enterotp {
+  width: 30px;
+  height: 30px;
+}
+.whats {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-top: 10px;
+}
+#logcontent {
+  margin-top: 25px;
+  width: 100%;
+  height: 300px;
+}
+.logp {
+  margin: auto;
+  width: 600px;
+  font-size: 15px;
+  padding: 25px;
+  font-weight: 600;
+}
+.logp p {
+  margin-bottom: 2px !important;
+}
+#smll {
+  display: flex;
+  justify-content: center;
+}
+#headlog {
+  font-size: 24px;
+  color: white;
+  font-weight: 800;
+  cursor: pointer;
+}
+#close {
+  color: white;
+  cursor: pointer;
+}
+
+
+#fbicon{
+  display: flex;
+  gap: 5px;
+  margin-left: 30px;
+}
+
+.infohrline{
+  border: 0.3px solid gray;
+  position: relative;
+  margin-top: 8px;
+  width: 95%;
+  margin-left: 10px;
+}
+#infoinput{
+  display: flex;
+  gap: 5px;
+}
+
+.infoname{
+  margin-left: 30px;
+  height: 35px;
+  width: 180px
+}
+
+.infoname input{
+  border: none;
+  background-color:#f5f5f5;
+  width: 100%;
+  height: 100%;
+}
+
+#infoemail{
+  margin-left: 30px;
+  height: 35px;
+  width: 366px;
+  margin-top: 10px;
+}
+
+#infoemail input{
+  border: none;
+  width: 100%;
+  height: 100%;
+  background-color:#f5f5f5;
+  
+}
+
+#savebtn{
+  cursor: pointer;
+  margin-left: 30px;
+  height: 35px;
+  width: 366px;
+  background-color: #fdaac9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.detail{
+  margin-left: 30px;
+}
+
+#requestptp:hover{
+  background-color: gray;
+}
+#verify:hover{
+background-color: rgb(236, 30, 64);
+}
+#savebtn:hover{
+  background-color: rgb(250, 54, 120);
+}
diff --git a/signUpPage.js b/signUpPage.js
new file mode 100644
index 0000000..6e40a5d
--- /dev/null
+++ b/signUpPage.js
@@ -0,0 +1,101 @@
+let signUpPage = ()=>{
+    return `<div id="sublogin">
+    <div id="close"><i class="fa-solid fa-xmark"></i></div>
+    <p id="headlog">Login/Sign Up</p>
+  <div id="loginbox">
+    <div class="boxtop">
+      <img
+        src="https://in.sugarcosmetics.com/smartphone.svg"
+        alt=""
+        height="30px"
+        width="30px"
+        class="logmob"
+      />
+      <p class="loginsign">Login/Sign Up Using Phone</p>
+    </div>
+    <div class="loginput">
+      <h4 class="contrycode">+91</h4>
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <input type="text" maxlength="1" class="loginput1" />
+      <button id="requestptp">Request OTP</button>
+    </div>
+    <div class="hrline"></div>
+    <div id="otpsection">
+      <p>Enter the 4 digit OTP received on your phone.</p>
+      <div class="otpbox">
+        <input type="text" class="enterotp enterotp1" maxlength="1" />
+        <input type="text" class="enterotp enterotp2" maxlength="1"/>
+        <input type="text" class="enterotp enterotp3" maxlength="1"/>
+        <input type="text" class="enterotp enterotp4" maxlength="1"/>
+        <div>
+            <button id="verify">Verify OTP</button>
+            <span id="incorrect"></span>
+        </div>
+        <div class="whats">
+            <input type="checkbox">
+            <p>Get Important Updates on Whatsapp. Terms and Conditions</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="logcontent">
+   <div class="logp">
+       <p>Registering for this site allows you to access your order status and history. Just fill in the
+          fields below, and we'll get a new account set up for you in no time. We will only ask you
+          for information necessary to make the purchase process faster and easier.</p>
+   </div>
+   <div id="smll">
+      <small class="smll">By Signing up or logging in, you agree to our Terms and Conditions</small>
+   </div>
+   
+  </div>
+</div>`
+}
+
+let infopage = ()=>{
+  return `<div class="boxtop">
+  <img
+    src="https://in.sugarcosmetics.com/smartphone.svg"
+    alt=""
+    height="30px"
+    width="30px"
+    class="logmob"
+  />
+  <p class="loginsign">WELCOME !</p>
+</div>
+<p class="detail">Phone Number Verified - +91 8084703458 (Try another number)</p>
+<div id="fbicon">
+    <div>
+        <img src="https://in.sugarcosmetics.com/desc-images/facebook_login.svg" width="148px" height="40px">
+    </div>
+    <p>Or</p>
+    <div>
+        <img src="https://in.sugarcosmetics.com/desc-images/google.png" width="158px" height="40px">
+    </div>
+</div>
+<div class="infohrline"></div>
+<p class="detail">Or Enter Account Details</p>
+<div id="infoinput">
+    <div class="infoname">
+        <input type="text" placeholder="Name" id="username" >
+    </div>
+    <div class="infoname">
+        <input type="text" placeholder="Last-Name" id="userlastname">
+    </div>
+</div>
+<div id="infoemail">
+    <input type="email" placeholder="Email Address">
+</div>
+<div id="savebtn">Save and Continue</div>
+</div>`
+}
+
+export {signUpPage,infopage};