diff --git a/cart.html b/cart.html
index 767318f..423935e 100644
--- a/cart.html
+++ b/cart.html
@@ -84,7 +84,7 @@ <h1 class="s">Shopping Cart</h1>
         <div class="listCart"></div>
         <div class="btn">
             <button class="close">CLOSE</button>
-           <a  href="http://127.0.0.1:5500/payment.html"  > <button  class="checkOut">Check Out</button></a>
+           <a  href="payment.html"> <button  class="checkOut">Check Out</button></a>
         </div>
     </div>
 
diff --git a/payment.css b/payment.css
index 6f357d7..da3ebdf 100644
--- a/payment.css
+++ b/payment.css
@@ -1,127 +1,82 @@
-.page{
-    padding-bottom: 20px;
+body {
+  margin: 0;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #0c0f14;
+  color: #fff;
 }
 
-*{
-    /* background: #2B3A4B; */
+.payment-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 20px;
+  min-height: 100vh;
 }
 
+.payment-form {
+  background: #1c1f26;
+  padding: 30px 40px;
+  border-radius: 20px;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.form-title {
+  margin-bottom: 25px;
+  font-size: 24px;
+  text-align: center;
+  color: #d17842;
+}
+
+.form-label {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.form-label span {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #aaa;
+}
 
-#navbar #nav{
-    background-color: #0c0f14;
+.form-label input {
+  padding: 12px 15px;
+  border: 1px solid #2c2f36;
+  border-radius: 12px;
+  background-color: #0c0f14;
+  color: #eee;
+  transition: border 0.3s ease;
 }
-.form {
-    background: #0c0f14;
-    box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
-      0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
-      0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
-    width: 320px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    padding: 20px;
-    position: relative;
-    border-radius: 25px;
-  }
-  .form .label {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    height: -moz-fit-content;
-    height: fit-content;
-  }
-  .form .label:has(input:focus) .title {
-    top: 0;
-    left: 0;
-    color: #d17842;
-  }
-  .form .label .title {
-    padding: 0 10px;
-    transition: all 300ms;
-    font-size: 12px;
-    color: #8b8e98;
-    font-weight: 600;
-    width: -moz-fit-content;
-    width: fit-content;
-    top: 14px;
-    position: relative;
-    left: 15px;
-    background: #0c0f14;
-  }
-  .form .input-field {
-    width: auto;
-    height: 50px;
-    text-indent: 15px;
-    border-radius: 15px;
-    outline: none;
-    background-color: #0c0f14;
-    /* background-color: transparent; */
-    border: 1px solid #21262e;
-    transition: all 0.3s;
-    caret-color: #d17842;
-    color: #aeaeae;
-  }
-  
-  .form .input-field:hover {
-    border-color: rgba(209, 121, 66, 0.5);
-  }
-  
-  .form .input-field:focus {
-    border-color: #d17842;
-  }
-  .form .split {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-    gap: 15px;
-  }
-  .form .split label {
-    width: 130px;
-  }
-  .form .checkout-btn {
-    margin-top: 20px;
-    padding: 20px 200px 20px 20px ;
-    border-radius: 25px;
-    font-weight: 700;
-    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
-    cursor: pointer;
-    font-size: 20px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    border: none;
-    justify-content: center;
-    fill: #fff;
-    color: #fff;
-    /* border: 2px solid transparent; */
-    background: #d17842;
-    transition: all 200ms;
-  }
 
-  .checkout-btn{
-    width: 500px;
-  }
-  .form .checkout-btn:active {
-    scale: 0.95;
-  }
-  
-  .form .checkout-btn:hover {
-    color: #d17842;
-    border: 2px solid #d17842;
-    background: transparent;
-  }
-  
-  .add-card.page {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    padding-bottom: 20px;
-  }
-  
-  a{
-    text-decoration: none;
-    justify-content: center;
-    align-items: center;
-  }
\ No newline at end of file
+.form-label input:focus {
+  outline: none;
+  border-color: #d17842;
+}
+
+.form-row {
+  display: flex;
+  gap: 20px;
+}
+
+.checkout-btn {
+  display: block;
+  width: 100%;
+  text-align: center;
+  padding: 14px;
+  background-color: #d17842;
+  border-radius: 15px;
+  font-size: 16px;
+  color: #fff;
+  font-weight: bold;
+  transition: background 0.3s ease;
+  text-decoration: none;
+  margin-top: 10px;
+}
+
+.checkout-btn:hover {
+  background-color: transparent;
+  border: 2px solid #d17842;
+  color: #d17842;
+}
diff --git a/payment.html b/payment.html
index 9aa23f6..c9b8156 100644
--- a/payment.html
+++ b/payment.html
@@ -1,95 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Payment Gateway</title>
-    <link rel="stylesheet" href="payment.css">
-    <link rel="stylesheet" href="navbar.css">
-    <link rel="stylesheet" href="footer.css">
-    <link rel="shortcut icon" href="pictures/Fitness.png" type="image/x-icon">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Payment Gateway</title>
+  <link rel="stylesheet" href="payment.css" />
+  <link rel="stylesheet" href="navbar.css" />
+  <link rel="stylesheet" href="footer.css" />
+  <link rel="stylesheet" href="style.css" />
+  <link rel="shortcut icon" href="pictures/Fitness.png" type="image/x-icon" />
 </head>
 <body>
-    <div id="nav"></div>
-<section class="add-card page">
-    <form class="form">
-      <label for="name" class="label">
-        <span class="title">Card holder full name</span>
-        <input
-          class="input-field"
-          type="text"
-          name="input-name"
-          title="Input title"
-          placeholder="Enter your full name"
-        />
+
+  <div id="navbar"></div>
+
+  <section class="payment-section">
+    <form class="payment-form">
+      <h2 class="form-title">Payment Details</h2>
+
+      <label class="form-label">
+        <span>Card Holder Name</span>
+        <input type="text" placeholder="John Doe" required />
       </label>
-      <label for="serialCardNumber" class="label">
-        <span class="title">Card Number</span>
-        <input
-          id="serialCardNumber"
-          class="input-field"
-          type="number"
-          name="input-name"
-          title="Input title"
-          placeholder="0000 0000 0000 0000"
-        />
+
+      <label class="form-label">
+        <span>Card Number</span>
+        <input type="text" maxlength="19" placeholder="0000 0000 0000 0000" required />
       </label>
-      <div class="split">
-        <label for="ExDate" class="label">
-          <span class="title">Expiry Date</span>
-          <input
-            id="ExDate"
-            class="input-field"
-            type="text"
-            name="input-name"
-            title="Expiry Date"
-            placeholder="01/25"
-          />
+
+      <div class="form-row">
+        <label class="form-label">
+          <span>Expiry Date</span>
+          <input type="text" placeholder="MM/YY" required />
         </label>
-        <label for="cvv" class="label">
-          <span class="title"> CVV</span>
-          <input
-            id="cvv"
-            class="input-field"
-            type="number"
-            name="cvv"
-            title="CVV"
-            placeholder="CVV"
-          />
+
+        <label class="form-label">
+          <span>CVV</span>
+          <input type="password" maxlength="4" placeholder="123" required />
         </label>
       </div>
-      <a  href="http://127.0.0.1:5500/cart.html"  > <span class="checkout-btn" type="button" value="Checkout" >  Checkout </span></a>
+
+      <a href="cart.html" class="checkout-btn">Checkout</a>
     </form>
   </section>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
-  integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
-  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  
-<!-- make sure to put gsap link before linking script.js -->    
-<!--gsap cdn is a js library for scrolling animations-->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
-  integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
-  crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- plugin for gsap-->
-  <div id="navbar"></div>
+
+  <div class="chatbox">
+    <div class="chat-container">
+      <div class="h1">Talk to your own assistant...</div>
+    </div>
+    <div class="input-area">
+      <input type="text" class="prompt" placeholder="Ask anything">
+      <button type="button" class="arrow">
+        <img src="pictures/btn.svg" alt="Send">
+      </button>
+    </div>
+  </div>
+
   <div id="footer"></div>
-  <script>
-    fetch('navbar.html')
-    .then(response => response.text())
-    .then(data => {
-        document.getElementById('navbar').innerHTML = data;
-    });
-    </script>
 
-<script>
-    fetch('footer.html')
-    .then(response => response.text())
-    .then(data => {
-        document.getElementById('footer').innerHTML = data;
-    });
-</script>
-<script src="chatbot.js"></script>
-<script src="navbar.js"></script>
-<script src="script.js"></script>   
-  
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
+  <script>
+    fetch('navbar.html').then(res => res.text()).then(data => document.getElementById('navbar').innerHTML = data);
+    fetch('footer.html').then(res => res.text()).then(data => document.getElementById('footer').innerHTML = data);
+  </script>
+  <script src="chatbot.js"></script>
+  <script src="navbar.js"></script>
+  <script src="script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>