diff --git a/about.html b/about.html
index dadffba..3468b6b 100644
--- a/about.html
+++ b/about.html
@@ -48,7 +48,7 @@
                 <button class="btn btn-outline-info" type="submit">Search</button>
             </form>
             <form class="d-flex">
-              <button class="btn btn-success mx-2" type="submit">LOGIN</button>
+              <a class="btn btn-success mx-2" href="./login.html">LOGIN</a>
               <button class="btn btn-danger" type="submit">LOGOUT</button>
             </form>
           </div>
@@ -99,19 +99,19 @@ <h4><span class="text-muted">Inside Story</span></h4>
   
       <!-- Right -->
       <div>
-        <a href="https://facebook.com/theritiktiwari" target="_blank" class="me-4 text-reset">
+        <a href="https://facebook.com/theritiktiwari" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-facebook-f"></i>
         </a>
-        <a href="https://twitter.com/theritiktiwari" target="_blank" class="me-4 text-reset">
+        <a href="https://twitter.com/theritiktiwari" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-twitter"></i>
         </a>
-        <a href="https://instagram.com/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://instagram.com/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-instagram"></i>
         </a>
-        <a href="https://linkedin.com/company/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://linkedin.com/company/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-linkedin"></i>
         </a>
-        <a href="https://github.com/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://github.com/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-github"></i>
         </a>
       </div>
diff --git a/contactUs.htm b/contactUs.htm
index f59cbcd..13e61d4 100644
--- a/contactUs.htm
+++ b/contactUs.htm
@@ -58,7 +58,7 @@
           <button class="btn btn-outline-info" type="submit">Search</button>
         </form>
         <form class="d-flex">
-          <button class="btn btn-success mx-2" type="submit">LOGIN</button>
+          <a class="btn btn-success mx-2"  href="./login.html">LOGIN</a>
           <button class="btn btn-danger" type="submit">LOGOUT</button>
         </form>
       </div>
@@ -99,19 +99,19 @@ <h1 class="text-center">Contact Us</h1>
 
       <!-- Right -->
       <div>
-        <a href="https://facebook.com/theritiktiwari" target="_blank" class="me-4 text-reset">
+        <a href="https://facebook.com/theritiktiwari" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-facebook-f"></i>
         </a>
-        <a href="https://twitter.com/theritiktiwari" target="_blank" class="me-4 text-reset">
+        <a href="https://twitter.com/theritiktiwari" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-twitter"></i>
         </a>
-        <a href="https://instagram.com/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://instagram.com/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-instagram"></i>
         </a>
-        <a href="https://linkedin.com/company/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://linkedin.com/company/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-linkedin"></i>
         </a>
-        <a href="https://github.com/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://github.com/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-github"></i>
         </a>
       </div>
diff --git a/images/login img.jpg b/images/login img.jpg
new file mode 100644
index 0000000..5945c25
Binary files /dev/null and b/images/login img.jpg differ
diff --git a/index.html b/index.html
index c1c2d5c..f31127e 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
           <button class="btn btn-outline-info" type="submit">Search</button>
         </form>
         <form class="d-flex">
-          <button class="btn btn-success mx-2" type="submit">LOGIN</button>
+          <a class="btn btn-success mx-2 " href="./login.html">LOGIN</a>
           <button class="btn btn-danger" type="submit">LOGOUT</button>
         </form>
       </div>
@@ -194,19 +194,19 @@ <h2 class="accordion-header" id="flush-headingFive">
 
       <!-- Right -->
       <div>
-        <a href="https://facebook.com/theritiktiwari" target="_blank" class="me-4 text-reset">
+        <a href="https://facebook.com/theritiktiwari" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-facebook-f"></i>
         </a>
-        <a href="https://twitter.com/theritiktiwari" target="_blank" class="me-4 text-reset">
+        <a href="https://twitter.com/theritiktiwari" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-twitter"></i>
         </a>
-        <a href="https://instagram.com/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://instagram.com/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-instagram"></i>
         </a>
-        <a href="https://linkedin.com/company/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://linkedin.com/company/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-linkedin"></i>
         </a>
-        <a href="https://github.com/codingwalls" target="_blank" class="me-4 text-reset">
+        <a href="https://github.com/codingwalls" target="_blank" class="me-4 text-reset text-decoration-none">
           <i class="fab fa-github"></i>
         </a>
       </div>
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..0e5fa16
--- /dev/null
+++ b/login.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <title>Log-in</title>
+    <style> 
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    body{
+        background:rgb(219, 226,226); 
+    }
+    .row{
+        background-color: white;
+        border-radius: 30px;
+        box-shadow: 12px 12px 22px grey;
+    }
+    img{
+        border-top-left-radius: 30px;
+        border-bottom-left-radius: 30px;
+    }
+    .btn1{
+    border: none;
+    outline: none;
+    height: 50px;
+    width: 100%;
+    background-color: black;
+    color: white;
+    border-radius: 4px;
+    font-weight: bold;
+    }
+    .btn1:hover{
+    background: white;
+    border: 1px solid;
+    color: black;
+    }
+    .p-2-5{
+        padding: .75rem;
+    }
+    </style>
+  </head>
+  <body>
+<section class="Form my-4 mx-5">
+    <div class="container">
+        <div class="row g-0">
+            <div class="col-lg-5">
+                <img src="./images/login img.jpg" class="img-fluid" alt="Oops">
+            </div>
+            <div class="col-lg-7 px-5 pt-5" >
+                <h1 class="font-weight-bold py-3">ECOM</h1>
+                <h4>Sign into your account</h4>
+                <form>
+                    <div class="from-row">
+                        <div class="col-lg-7">
+                            <input type="email" class="form-control my-3 p-2-5" placeholder="Email address">
+                        </div>
+                    </div>
+                    <div class="from-row">
+                        <div class="col-lg-7">
+                            <input type="password" class="form-control  my-3 p-2-5" placeholder="******">
+                        </div>
+                    </div>  
+                    <div class="from-row">
+                        <div class="col-lg-7">
+                           <button type="submit" class="btn1 mb-5" >Login</button>
+                        </div>
+                    </div> 
+                    <a href="#">Forgot password</a>
+                    <p>Don't have an account?<a href="#">Register here</a></p>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+  </body>
+</html>
\ No newline at end of file