diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..f673a71 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
\ No newline at end of file
diff --git a/admin/admin.css b/admin/admin.css
index bfd418b..a7a55a9 100644
--- a/admin/admin.css
+++ b/admin/admin.css
@@ -64,7 +64,7 @@
 #navbar div{
     display: grid;
     margin: auto;
-    grid-template-columns: repeat(3,1fr);
+    grid-template-columns: repeat(4,1fr);
     gap: 100px;
    
 }
@@ -166,7 +166,9 @@
         grid-template-columns: repeat(2,1fr);
     }
 }
-
+#logOut{
+    font-family: Arial, Helvetica, sans-serif;
+}
 @media only screen and (max-width: 450px){
     #heading{
         visibility: collapse;
diff --git a/admin/admin.js b/admin/admin.js
index 9502bf2..5164f9b 100644
--- a/admin/admin.js
+++ b/admin/admin.js
@@ -9,11 +9,16 @@ navBar.innerHTML = `
     <button id="removeProducts">All Products</button>
     <button id="addProducts">Add Product</button>
     <button id="editProducts">Edit Product</button>
+    <button id="logOut">Log out</button>
 </div>
 `;
 let removeProductsButton = document.getElementById("removeProducts");
 let userData=JSON.parse(localStorage.getItem("webUserData"))||[];
 
+logOut.addEventListener('click',()=>{
+  window.location.href='/index.html'
+})
+
 window.addEventListener("load", (event) => {
   event.preventDefault();
   fetch(url)
diff --git a/html/cart.html b/html/cart.html
index 26af30e..3514bad 100644
--- a/html/cart.html
+++ b/html/cart.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>welcome to trial</title>
     <link rel="stylesheet" href="/styles/cart.css">
     <style>
         .navbar-1 {
@@ -60,29 +60,50 @@
 </head>
 
 <body>
+    <nav class="navbar-1">
+        <div id="left">
+            <a href="/index.html">
+                <img src="https://hindubabynames.info/downloads/wp-content/themes/hbn_download/download/cosmetic-companies/nykaa-logo.png"
+                    alt="Nyka">
+            </a>
+        </div>
+        <div id="right">
+            <button id="Getapp-btn"><i class="fa-solid fa-mobile-screen-button"></i> Get App</button> |
+            <button id="Stores"><i class="fa-sharp fa-solid fa-location-dot"></i> Stores & Events</button> |
+            <button><i class="fa-solid fa-gift"></i> Gift Card</button> |
+            <button><i class="fa-solid fa-question"></i> Help</button>
+        </div>
+    </nav>
+    <!-- body of product page -->
 
-
+    <div class="container">
+        <div id="cart">Add Some Product to see</div>
+    </div>
+    
+    <!-- // -->
     <div id="navbar"></div>
     <div class="MyProfile-Container">
     <div class="MYWISH-CONT">
         <p class="mywish-text">Shopping bag <span class="prod-count"></span></p>
         
         <div class="MYWISH-BOX">
-            <p style="color: grey;">Total : <span id="total"></span></p>
-            <p style="color: grey;">Qty : <span id="qty"></span></p>
-            <input type="text" placeholder="Coupon">
+            <p ><b>Total :</b> <span id="total"></span></p>
+            <p ><b>Qty :</b> <span id="qty"></span></p>
+            <input type="text" placeholder="Coupon" id="masai20">
             <button id="coupon">Add Coupon</button>
-            <p style="color: grey;">Discount 20%</p>
-            <p style="color: grey;">Grand total : <span id="gran_total"></span></p>
         </div>
         <div>
-            <button id="newbutton">Procced</button>
+            <button id="newbutton">Proceed</button>
         </div>
     </div>
 
 </div>
 
 
+</div>
+
+
+
 </body>
 
 </html>
diff --git a/html/login.html b/html/login.html
index 9439e69..95d345a 100644
--- a/html/login.html
+++ b/html/login.html
@@ -20,7 +20,7 @@
 
 <body>
     <div id="logo" >
-        <a href="./index.html"><img  src="https://hindubabynames.info/downloads/wp-content/themes/hbn_download/download/cosmetic-companies/nykaa-logo.png" alt="NYKAA Logo"></a>
+        <a href="/index.html"><img  src="https://hindubabynames.info/downloads/wp-content/themes/hbn_download/download/cosmetic-companies/nykaa-logo.png" alt="NYKAA Logo"></a>
     </div>
     <div id="bodydiv">
         <div id="login">
diff --git a/html/order.html b/html/order.html
index b226c76..5046bc1 100644
--- a/html/order.html
+++ b/html/order.html
@@ -31,7 +31,7 @@ <h2>Thank You!</h2>
     </html>
     <script>
         function closepopup(){
-            window.location.href="index.html"
+            window.location.href="/index.html"
         }
     </script>
     
diff --git a/html/payment.html b/html/payment.html
index ac85822..9b7fa54 100644
--- a/html/payment.html
+++ b/html/payment.html
@@ -120,27 +120,22 @@ <h6 class="ms-3 mt-3 mb-0 ">CHOOSE PAYMENT METHOD</h6>
       <div class="content shadow-sm bg-body" id="totalprice">
         <div class="price-cont bg-body">
           <div class="subtotal mt-3">
-            <div>MRP Total : <span></span></div>
+            <div>MRP Total : <span id="amount"></span></div>
             
             <div id="subt"></div>
             <hr>
           </div>
           <div class="shc mt-3">
-            <div>Product Discount</div>
+            <div>Product Discount: <b>20%</b></div>
             
           </div>
           <hr>
           <div class="ds mt-3">
-            <div class="deta"><b>Total Amount</b></div>
+            <div class="deta"><b>Total Amount: </b><span id="total"></span></div>
             
           </div>
           <hr>
 
-          
-          
-
-
-
         </div>
       </div>
      </div>
@@ -154,10 +149,6 @@ <h6>CHANGE ADDRESS</h6> <a href="/html/adress.html" class="change_">Change</a>
 
 
 </div>
-
-
-    
-    
         </div>
       </div>
     </div>
@@ -182,5 +173,16 @@ <h6>CHANGE ADDRESS</h6> <a href="/html/adress.html" class="change_">Change</a>
 function myfun(){
   window.location.href="adress.html"
 }
+let data=JSON.parse(localStorage.getItem('webUserData'))||[];
+let num=data[0].userNumberID;
+let amount=document.getElementById('amount');
+let total=document.getElementById('total');
+let balance=0;
+for(let i=0;i<data[num].userCartData.length;i++){
+  balance+=data[num].userCartData[i].price*data[num].userCartData[i].quantity;
+}
+amount.innerText=balance;
+
+total.innerText=balance-balance*(.2);
  </script>
 </html>
\ No newline at end of file
diff --git a/html/product.html b/html/product.html
index bf6decf..415671e 100644
--- a/html/product.html
+++ b/html/product.html
@@ -86,7 +86,7 @@
     <nav class="navbar-1-2">
         <nav class="navbar-1">
             <div id="left">
-               <a href="index.html"><h4>BEAUTY BONANZA Get Your Daily Dose Of Amazing Deals</h4></a> 
+               <a href="/index.html"><h4>BEAUTY BONANZA Get Your Daily Dose Of Amazing Deals</h4></a> 
             </div>
             <div id="right">
                 <button id="Getapp-btn"><i class="fa-solid fa-mobile-screen-button"></i> Get App</button> |
@@ -116,7 +116,7 @@
             <div id="bag"><a href="/html/cart.html"><i class="fa-solid fa-bag-shopping"></i></a></div>
             
             </div>
-            <a href="./index.html">home🏡</a>
+            <a href="/index.html">home🏡</a>
             <a href="/html/profile.html">🦁</a>
         </nav>
     </nav>
@@ -291,17 +291,22 @@ <h5>Top Categories</h5>
     </div>
 </body>
 <script>
-    let arr;
+    let arr=[];
     let url = `https://639b3492d5141501974eaf28.mockapi.io/nykaa`
     fetch(url).then((res) => {
         return res.json();
     }).then((data) => {
         hotDisplay(data);
-        //console.log(data);
-        arr = data;
+        console.log(data);
+        data.forEach((e)=>{
+            arr.push(e);
+        })
+        // console.log(arr);
     }).catch((err) => {
         alert(err)
     })
+    console.log(arr);
+    
     function hotDisplay(data) {
         document.querySelector("#products").innerHTML = null;
         data.forEach(element => {
diff --git a/html/profile.html b/html/profile.html
index 83bdf36..c1e9e65 100644
--- a/html/profile.html
+++ b/html/profile.html
@@ -11,7 +11,7 @@
     <!-- <a href="/html/login.html">login</a> -->
     <nav>
         <a href="/html/login.html">login</a>
-        <a href="/html/index.html" style="font-family: Flat style; color: pink;">Nycaa</a>
+        <a href="/index.html" style="font-family: Flat style; color: pink;">Nykaa</a>
     </nav>
     <div class="conteinar" id="blur">
         <!-- change class profile to content -->
diff --git a/html/index.html b/index.html
similarity index 98%
rename from html/index.html
rename to index.html
index ebbb677..adc4582 100644
--- a/html/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <nav class="navbar-1-2">
     <nav class="navbar-1">
         <div id="left">
-           <a href="/html/index.html"><h4 id="top-text">BEAUTY BONANZA Get Your Daily Dose Of Amazing Deals</h4></a> 
+           <a href="/index.html"><h4 id="top-text">BEAUTY BONANZA Get Your Daily Dose Of Amazing Deals</h4></a> 
         </div>
         <div id="right">
             <a href="https://play.google.com/store/apps/details?id=com.fsn.nykaa&hl=en_IN&shortlink=b9cf200e&is_retargeting=true&c=Android&pid=Landing%20Page&source_caller=ui" target="_blank">
@@ -27,12 +27,12 @@
     <nav class="navbar-2">
         <div id="left1">
             <div>
-                <a href="/html/index.html"><img src="https://bl-i.thgim.com/public/incoming/t8zkyh/article65347390.ece/alternates/FREE_1200/Nykaa.png" alt="NYKAA Logo"></a>
+                <a href="/index.html"><img src="https://bl-i.thgim.com/public/incoming/t8zkyh/article65347390.ece/alternates/FREE_1200/Nykaa.png" alt="NYKAA Logo"></a>
             </div>
             <div><a href="">Categories</a></div>
             <div><a href="/html/product.html" target="_blank">Brands</a></div>
             <div><a href="">Luke</a></div>
-            <div><a href="/html/product.html" target="_blank">Nyka Fashion</a></div>
+            <div><a href="/html/product.html" target="_blank">Nykaa Fashion</a></div>
             <div><a href="">Beauty Advice</a></div>
         </div>
         <div id="right1">
@@ -41,8 +41,8 @@
             <input type="text" placeholder="Search on Nykaa">
         </form>
         <a href="/html/login.html"><button id="Signin-btn">Sign in</button></a>
-        <div id="bag"><a href=""><i class="fa-solid fa-bag-shopping"></i></a></div>
-        
+        <div id="bag"><a href="/html/cart.html"><i class="fa-solid fa-bag-shopping"></i></a></div>
+        <a href="./html/profile.html">🦁</a>
         </div>
     </nav>
 </nav>
diff --git a/scripts/cart.js b/scripts/cart.js
index 7cb4e11..02d8e39 100644
--- a/scripts/cart.js
+++ b/scripts/cart.js
@@ -1,10 +1,11 @@
 let data=JSON.parse(localStorage.getItem('webUserData'))||[];
 let num=data[0].userNumberID;
 let cart=document.getElementById('cart');
-let bill=document.getElementById('pay');
+let bill=document.getElementById('total');
 let coupan=document.getElementById('masai20');
-let couponBtn=document.getElementById('coupan');
-let totalQuantity=document.getElementById('totalQuantity');
+let couponBtn=document.getElementById('coupon');
+let totalQuantity=document.getElementById('qty');
+// let discount=document.getElementById('discount');
 display(data[num].userCartData);
 
 function display(value){
@@ -13,7 +14,8 @@ function display(value){
         totalCartValue+=(value[i].quantity)*(value[i].price);
         console.log(value[i]);
     }
-    totalCartValue-=totalCartValue*(0.20);
+    // totalCartValue-=totalCartValue*(0.20);
+    // discount.innerText=totalCartValue;
     couponBtn.addEventListener('click',(e)=>{
         e.preventDefault();
         if(coupan.value==='masai20'){
@@ -52,7 +54,6 @@ function display(value){
 
     let quantity=document.createElement('h2');
     quantity.setAttribute('class','add');
-    // quantity.style.backgroundColor='#c6c4b0'
     quantity.innerText=element.quantity;
     
     let subs=document.createElement('h3');;
@@ -104,5 +105,8 @@ function display(value){
 }
 
 
-
+let newbutton=document.getElementById('newbutton');
+newbutton.addEventListener('click',()=>{
+    window.location.href='./adress.html'
+})
 
diff --git a/scripts/index.js b/scripts/index.js
index 2771d26..45874e2 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -12,11 +12,21 @@ let arr = ['https://images-static.nykaa.com/uploads/cf96cee1-979c-4f29-bc44-ae4d
             slider.innerHTML=`
             <img src=${image} alt="Banner-Nykaa" >
             `
-            console.log(i)
+            // console.log(i)
             i++;
             if(i==arr.length){
                 i=0;
             }
         }
 
-    }, 2500)
\ No newline at end of file
+    }, 2500)
+    // let search=document.getElementById("search");
+    // search.addEventListener("input",()=>{
+    //     container.innerHTML=null;
+    //     let input=search.value.toLowerCase();
+    //     let newData=productData.filter((el)=>{
+    //         return el.Title.toLowerCase().includes(input);
+    //     });
+    //     console.log(newData);
+    //     display(newData);
+    // });
\ No newline at end of file
diff --git a/scripts/login.js b/scripts/login.js
index 06e1210..d96ed36 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -92,7 +92,7 @@ signupForm.addEventListener("submit",(e)=>{
             window.location.href='/admin/admin.html'
         }else{
             alert(`Welcome back ${userData[userData[0].userNumberID].userPersonalData.name}`);
-            window.location.href='./index.html';
+            window.location.href='/index.html';
         }
         console.log(userData);
     }else{
diff --git a/styles/cart.css b/styles/cart.css
index e69de29..c3ffa9a 100644
--- a/styles/cart.css
+++ b/styles/cart.css
@@ -0,0 +1,172 @@
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+#addsubs {
+    width: 40%;
+    display: flex;
+    justify-content: space-around;
+    margin: auto;
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+
+}
+
+#cart {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 30px;
+    margin: 20px;
+    padding: 20px;
+    /* margin: auto; */
+}
+
+#card {
+    width: auto;
+    height: auto;
+    background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
+    height: auto;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    border-radius: 15px;
+    text-align: center;
+}
+
+#card img {
+    width: 80%;
+    height: 50%;
+    margin-top: 2px;
+    border-radius: 10px;
+
+}
+
+#nav {
+    margin: 15px 0px 30px 10px;
+    background-color: #c6c4b0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#cart h3,
+#cart p {
+    margin-bottom: 10px;
+}
+
+@media screen and (min-width: 480px) and (max-width:700px) {
+    #cart {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+        margin: 15px;
+        padding: 15px;
+        /* margin: auto; */
+    }
+
+    #card {
+        width: auto;
+        height: auto;
+        background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
+        height: auto;
+        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+        border-radius: 10px;
+        text-align: center;
+    }
+
+    #card img {
+        width: 60%;
+        height: 30%;
+        margin-top: 2px;
+        border-radius: 8px;
+
+    }
+}
+
+@media screen and (max-width: 480px) {
+    #cart {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+        margin: 15px;
+        padding: 15px;
+        /* margin: auto; */
+    }
+
+    #card {
+        width: auto;
+        height: auto;
+        background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000);
+        height: auto;
+        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+        border-radius: 10px;
+        text-align: center;
+    }
+
+    #card img {
+        width: 60%;
+        height: 30%;
+        margin-top: 2px;
+        border-radius: 8px;
+
+    }
+    #remove:hover{
+        cursor: pointer;
+    }
+}
+
+/* // */
+body {
+    background-color: #F3F3F3;
+}
+
+.MyProfile-Container{
+    width: 50%;
+    margin: auto;
+    display: grid;
+    /* grid-template-columns: 26% 72%; */
+    grid-gap: 2%;
+    margin-bottom: 1rem;
+    height: 150px;
+}
+.Myprofile-navdiv{
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    height: 17.6rem;
+}
+
+
+.MYWISH-CONT{
+    background-color: #fff;
+    padding-bottom: 1rem;
+}
+
+.mywish-text{
+    padding: 1rem 1.5rem;
+    font-size: 22px;
+    border-bottom: 1px solid lightgray;
+}
+.prod-count{
+    color: #fc2779;
+}.MYWISH-BOX{
+    margin-left: 20px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}#newbutton{
+    background-color: #fc2779;
+    width: 150px;
+    height: 50px;
+    border: none;
+    border-radius: 30px;
+    margin-left: 225px;
+    color: white;
+    cursor: pointer;
+}
+.MYWISH-BOX p{
+    margin: 5px 0px;
+}
+
