diff --git a/cart.html b/cart.html
new file mode 100644
index 0000000..e69de29
diff --git a/index.css b/index.css
index aa0d983..69d18cf 100644
--- a/index.css
+++ b/index.css
@@ -33,7 +33,7 @@
 } 
 
 .login {
-    --bs-btn-hover-color: #000 ;
+    --bs-btn-hover-color: white !important;
     --bs-btn-hover-bg: black !important;
 }
 
@@ -78,3 +78,4 @@
     padding: 10px;
     background: transparent !important;
 }
+
diff --git a/index.html b/index.html
index 0dfb346..83e5a2d 100644
--- a/index.html
+++ b/index.html
@@ -25,12 +25,12 @@
               <span class="navbar-toggler-icon"></span>
             </a>
             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <li><a class="dropdown-item" href="#">Home</a></li>
-              <li><a class="dropdown-item" href="#">Product</a></li>
-              <li><a class="dropdown-item" href="#">Features</a></li>
+              <li><a class="dropdown-item" href="./index.html">Home</a></li>
+              <li><a class="dropdown-item" href="#product">Product</a></li>
+              <li><a class="dropdown-item" href="#footer-about">Features</a></li>
               <li><a class="dropdown-item" href="#">Pricing</a></li>
-              <li><a class="dropdown-item" href="#">Support</a></li>
-              <li><a class="dropdown-item" href="#">About</a></li>
+              <!-- <li><a class="dropdown-item" href="#">Support</a></li> -->
+              <li><a class="dropdown-item" href="#footer-about">About</a></li>
             </ul>
           
         </button>
@@ -44,27 +44,26 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
           </div>
           <div class="offcanvas-body ">
             <ul class="navbar-nav flex-grow-1 justify-content-between">
-              <li class="nav-item"><a class="nav-link" href="#">
+              <li class="nav-item"><a class="nav-link" href="./index.html">
                 <img src="./icons8-technology-64.svg" alt="E-smart logo" /> 
 
               </a></li>
-              <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
-              <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
-              <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
+              <li class="nav-item"><a class="nav-link" href="./index.html">Home</a></li>
+              <li class="nav-item"><a class="nav-link" href="#product">Product</a></li>
+              <li class="nav-item"><a class="nav-link" href="#footer-about">Features</a></li>
               <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
-              <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
-              <li class="nav-item"><a class="nav-link" href="#">About</a></li>
-              <li class="nav-item"><a class="nav-link" href="#">
+              <!-- <li class="nav-item"><a class="nav-link" href="#">Support</a></li> -->
+              <li class="nav-item"><a class="nav-link" href="#footer-about">About</a></li>
+              <li class="nav-item"><a class="nav-link" href="./cart.html">
                 <svg xmlns="http://www.w3.org/2000/svg" id="Isolation_Mode" data-name="Isolation Mode" viewBox="0 0 24 24" width="24" height="30" fill="white"><circle cx="7" cy="22" r="2"/><circle cx="17" cy="22" r="2"/><path d="M5.654,5,5.391,2.938A3.328,3.328,0,0,0,2.087,0H0V3H2.087a.331.331,0,0,1,.326.3l1.5,11.759A3.327,3.327,0,0,0,7.217,18H20.4L23.974,5ZM18.112,15H7.217a.329.329,0,0,1-.325-.3L6.037,8h14Z"/></svg>
               </a></li>
-              <form class="col-12 col-lg-auto col-md-auto mb-3 mb-lg-0 me-lg-3" role="search">
-                <input type="search" class="form-control form-control-dark text-bg" placeholder="Search..." aria-label="Search">
+              <form class="col-12 col-lg-auto col-md-auto mb-3 mb-lg-0 me-lg-3 " role="search">
+                <input type="search" class="form-control form-control-dark text-bg mt-1 mx-5 " placeholder="Search..." aria-label="Search">
               </form>
       
               <div class="text-end  d-lg-flex align-items-center" >
-                <!-- <a href="./login.html" ><button type="button" class="btn login btn-outline-light me-2 col d-none d-lg-block btn-sm ">   Login</button></a> -->
-                <button type="button" class="btn login btn-outline-light me-2 col d-none d-lg-block btn-sm " ><a href="./login.html" > Login </a> </button>
-                <button type="button" class="btn sign-up btn-warning col d-none d-lg-block btn-sm " style="width: 100px;"><a href="./login.html" > Sign-up </a> </button>
+                <button type="button" class="btn login btn-outline-light me-2 col d-none d-lg-block btn-sm px-4" > <a href="./login.html" >  Login </a> </button>
+                <!-- <button type="button" class="btn sign-up btn-warning  col d-none d-lg-block btn-sm " style="width: 100px;"><a href="./login.html" > Sign-up </a> </button> -->
               </div>
             </ul>
           </div>
@@ -77,7 +76,7 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
 
 
 
-  <div class="carousel-container " style="background-color: tomato;" >
+  <div class="carousel-container " id="heading" style="background-color: tomato;" >
     <div id="myCarousel" class="carousel slide mb-6 "   data-bs-ride="carousel">
       <div class="carousel-indicators "  >
         <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
@@ -129,7 +128,7 @@ <h2>One more for good measure.</h2>
 
 
 
-    <div class="row heading gradient-background" >
+    <div class="row heading gradient-background"  >
       <div class="col-lg-4" >
         <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect></svg>
         <h2 class="fw-normal">Heading</h2>
@@ -156,7 +155,7 @@ <h2 class="fw-normal">Heading</h2>
   
   <section>
 
-    <div class="album card-container  gradient-background-2 "  >
+    <div class="album card-container  gradient-background-2 " id="product"  >
       <!-- bg-body-tertiary -->
       <div class="container  " >
   
@@ -307,49 +306,52 @@ <h2 class="fw-normal">Heading</h2>
 
 
 
-  <section class="gradient-background">
+  <section class="gradient-background " id="footer-about">
 
     <div class="container footer ">
-        <footer class=" container gradient-background row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5 ">
+        <footer class=" container gradient-background row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5  ">
           <div class="col mb-3">
-            <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
+            <!-- <a href="./index.html" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
               <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
-            </a>
-            <p class="text-body-secondary">© E-smart</p>
+            </a> -->
+            <p class="text-body-secondary mt-5">© E-smart</p>
           </div>
       
           <div class="col mb-3">
       
           </div>
+
+         
       
           <div class="col mb-3">
             <h5>Appliances</h5>
             <ul class="nav flex-column">
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Smartphones</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Laptops</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Televisions</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Refrigerators</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">DSLR Cameras</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Air Conditioners</a></li>
             </ul>
           </div>
       
           <div class="col mb-3">
             <h5>Features</h5>
             <ul class="nav flex-column">
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Fastest Delivery</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Easy Returns</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Gift Cards</a></li>
+              <li class="nav-item mb-2"><a href="#heading" class="nav-link p-0 text-body-secondary">Best Deals</a></li>
+              <!-- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> -->
             </ul>
           </div>
       
           <div class="col mb-3">
             <h5>Contact Us</h5>
             <ul class="nav flex-column">
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
-              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
+              <!-- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> -->
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Help</a></li>
+              <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
               <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
               <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
             </ul>
diff --git a/index.js b/index.js
index 5dc4337..af80b7b 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,9 @@
-document.querySelector(".login button").addEventListener("click",function(){
-    document.querySelector("a").href="login.html";
-})
\ No newline at end of file
+// document.querySelector(".login button").addEventListener("click",function(){
+//     document.querySelector("a").href="login.html";
+// })
+
+// document.querySelectorAll(".text-end button")[i].addEventListener("click",function(){
+//     location.href="http://127.0.0.1:3000/project/E-smart/login.html";
+//     window.location="http://127.0.0.1:3000/project/E-smart/login.html";
+
+// });
\ No newline at end of file
diff --git a/login.css b/login.css
index 8c3a9b1..7bf83c6 100644
--- a/login.css
+++ b/login.css
@@ -1,15 +1,96 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
 body{
-    background-color: aqua;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: url(./night.jpg) no-repeat;
+    background-size: cover;
+    background-position: center;
 }
-
-.card-container{
-    background-color: black;
+.wrapper{
+    width: 420px;
+    background: transparent;
+    border:2px solid rgba(255, 255, 255, .2);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+    color: #fff;
+    border-radius: 10px;
+    padding: 30px 40px;
+}
+.wrapper h1{
+    font-size: 36px;
+    text-align: center;
 }
+.wrapper .input-box{
+    width: 100%;
+    height: 60px;
+    position: relative;
+    margin-top: 20px;
+}
+.input-box input{
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    border: 2px solid rgba(255, 255, 255, .2);
+    border-radius: 40px;
+    font-size: 16px;
+    color: #fff;
+    padding: 20px 40px 20px 20px;
+}
+.input-box input::placeholder{
+    color: #fff;
 
-.row{
-    background-color: blue;
 }
+.wrapper .remember-forgot{
+    display: flex;
+    justify-content: space-between;
+    font-size: 14.5px;
+    margin: 15px 5px 15px;
+}
+.remember-forgot label input{
+accent-color: #fff;
+margin-right: 3px;
+}
+.remember-forgot a {
+    color: #fff;
+    text-decoration: none;
+}
+.remember-forgot a:hover{
+    text-decoration: underline;
+    color: red;
+}
+.wrapper .btn{
+    width: 100%;
+    height: 45px;
+    background: #fff;
+    border: none;
+    outline: none;
+    border-radius: 40px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+    cursor: pointer;
+    color: #333;
+    font-weight: 700;
+}
+.wrapper .register-link{
+    font-size: 14.5px;
+    text-align: center;
+    margin: 20px 0 15px;
 
-.col{
-    background-color: brown;
+}
+.register-link p a{
+    color: #fff;
+    text-decoration: none;
+    font-weight: 600;
+}
+.register-link p a:hover{
+    text-decoration: underline;
+    color: blue;
 }
\ No newline at end of file
diff --git a/login.html b/login.html
index f63073d..2e49288 100644
--- a/login.html
+++ b/login.html
@@ -3,25 +3,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login-Signup</title>
-    <link rel="stylesheet" href="Login.css">
+    <title>login form</title>
+    <link rel="stylesheet" href="./login.css">
 </head>
 <body>
-    
-    <div class="card-container ">
-        <div class="pack-card row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 " >
-
-            <div class="col ">
-                <div class="card "> One</div>
+    <div class="wrapper">
+        <form action="">
+            <h1>Login </h1>
+            <div class="input-box">
+                <input type="text" placeholder="Username" required>
             </div>
-            
-            <div class="col">
-                <div class="card "> Two</div>
+            <div class="input-box">
+                <input type="password" placeholder="Password" required>
             </div>
-            
-        </div>
-        
-    </div>
+            <div class="remember-forgot">
+                <label>
+                    <input type="checkbox">Remember me
+                </label>
+                <a href="#">Forgot password ?</a>
+            </div>
+            <button type="submit" class="btn">Login</button>
 
+            <div class="register-link">
+                <p>Don't have an account?<a href="#">Register</a></p>
+            </div>
+        </form>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/night.jpg b/night.jpg
new file mode 100644
index 0000000..d57978e
Binary files /dev/null and b/night.jpg differ