diff --git a/assets/css/style.css b/assets/css/style.css
index dd973c36..cb522caa 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1436,28 +1436,34 @@ body.dark-mode .chapter-card:hover {
 \*-----------------------------------*/
  
 #pricing .container {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 97%;
+  padding: 20px 0px;
+  margin-left: 100px;
+}
 
-  margin-top:  20px;
-  margin-bottom:  20px;
-  width:  97%;
-  padding:  20px 0px;
-  margin-left:  100px;
+.pricing-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px; /* Space between the cards */
+  justify-content: space-around;
 
 }
 
 .pricing-card {
   box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px inset;
-  padding: 40px 50px;
+  padding: 20px 30px;
   background-color: var(--seashell);
   text-align: center;
   transition: var(--transition-2);
   border-radius: var(--radius-5);
-  /* box-shadow: var(--shadow-2); */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 150px;
-  margin-top: 100px;
+  flex-basis: 30%; /* Adjust width for 3 cards in a row */
+  min-height: 150px; /* Set the minimum height */
+ 
 }
 
 .pricing-card button {
@@ -1510,21 +1516,12 @@ body.dark-mode .pricing-card button {
   font-weight: var(--fw-700);
   margin-block-start: 10px;
   padding-left: 25%;
-  padding-right: 25%; 
+  padding-right: 25%;
 }
 .pricing-card .price:hover {
   color: rgb(255, 195, 0);
 }
 
-/* .pricing-card-list {
-  margin-block: 20px 40px;
-  flex-grow: 1;
-} */
-
-.pricing-card-list .card-item:not(:last-child) {
-  border-block-end: 1px solid var(--ghost-white);
-}
-
 .pricing-card .card-text {
   padding-block: 10px;
 }
@@ -1538,7 +1535,7 @@ body.dark-mode .pricing-card button {
   align-self: center;
   margin-top: auto;
 }
-*/ .dark-mode .pricing-card .btn {
+.dark-mode .pricing-card .btn {
   background-color: #8e4949 !important;
   border: none !important;
 }
@@ -1547,6 +1544,22 @@ body.dark-mode .pricing-card button {
   transform: scale(1.1);
 }
 
+/* Responsive design */
+@media (max-width: 768px) {
+  .pricing-card {
+    flex-basis: 45%; /* Adjust for smaller screens */
+    min-height: 200px;
+  }
+}
+
+@media (max-width: 480px) {
+  .pricing-card {
+    flex-basis: 100%; /* Single column layout for small screens */
+    min-height: 180px;
+  }
+}
+
+
 /*-----------------------------------*\
   #AUTHOR
 \*-----------------------------------*/
diff --git a/index.html b/index.html
index eab2bcb7..35f398d5 100644
--- a/index.html
+++ b/index.html
@@ -3893,80 +3893,50 @@ <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
         - #PRICING BASED ON THEIR VERSION
       -->
       <section class="section pricing" id="pricing" aria-label="pricing">
-        <div class="container">
-
-          
-          <!-- <div class="pricingContainer" style="margin-top : -3rem" > -->
-            <p class="section-subtitle">Pricing</p>
-            
-            <h2 class="h2 section-title has-underline" ">
-              Pricing based on their version
-              <span class="span has-before"></span>
-            </h2>
-          <!-- </div> -->
-
-          <ul class="grid-list">
-
-            <li>
-              <div class="pricing-card">
-
-                <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
-
-                <data class="price" value="5">75% Off</data>
-
-                <ul class="pricing-card-list">
-
-                  <li class="card-item">
-                    <p class="card-text">Exchange any recently released or gently used books, less than a year old, at
-                      75% of the original cost (Limited Offer)</p>
-                  </li>
-                  <li class="card-img">
-                    
-                  </li>
-                </ul>
-
-              <a href="assets\html\checkout.html"><button class="btn btn-secondary" >BUY NOW</button></a>
-              </div>
-            </li>
-            <li>
-              <div class="pricing-card">
-                <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
-                <data class="price" value="15">50% Off</data>
-                <ul class="pricing-card-list">
-
-                  <li class="card-item">
-                    <p class="card-text">beloved classics or books aged 1 to 5 years at 50% of the original cost,
-                      preserving the magic of timeless stories.</p>
-                  </li>
-                </ul>
-
-                <a href="assets\html\checkout.html"><button class="btn btn-secondary" >BUY NOW</button></a>
-
-              </div>
-            </li>
-
-            <li>
-              <div class="pricing-card">
-                <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
-                <data class="price" value="10">25% Off</data>
-                <ul class="pricing-card-list">
-
-
-                  <li class="card-item">
-                    <p class="card-text"> into the past with vintage editions or books over 5 years old, available
-                      for exchange at 25% of their original cost.</p>
-                  </li>
-                </ul>
+  <div class="container">
+    <p class="section-subtitle">Pricing</p>
+    <h2 class="h2 section-title has-underline">
+      Pricing based on their version
+      <span class="span has-before"></span>
+    </h2>
 
-                <a href="assets\html\checkout.html"><button class="btn btn-secondary" >BUY NOW</button></a>
+    <div class="pricing-container">
+      <div class="pricing-card">
+        <h3 class="h3 card-title">Fresh Pages - New Releases</h3>
+        <data class="price" value="5">75% Off</data>
+        <p class="card-text">
+          Exchange any recently released or gently used books, less than a year old, at 75% of the original cost (Limited Offer)
+        </p>
+        <a href="assets/html/checkout.html">
+          <button class="btn btn-secondary">BUY NOW</button>
+        </a>
+      </div>
 
-              </div>
-            </li>
+      <div class="pricing-card">
+        <h3 class="h3 card-title">Timeless Classics - Aged Wonders</h3>
+        <data class="price" value="15">50% Off</data>
+        <p class="card-text">
+          Beloved classics or books aged 1 to 5 years at 50% of the original cost, preserving the magic of timeless stories.
+        </p>
+        <a href="assets/html/checkout.html">
+          <button class="btn btn-secondary">BUY NOW</button>
+        </a>
+      </div>
 
-          </ul>
+      <div class="pricing-card">
+        <h3 class="h3 card-title">Hidden Treasures - Vintage Editions</h3>
+        <data class="price" value="10">25% Off</data>
+        <p class="card-text">
+          Dive into the past with vintage editions or books over 5 years old, available for exchange at 25% of their original cost.
+        </p>
+        <a href="assets/html/checkout.html">
+          <button class="btn btn-secondary">BUY NOW</button>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
 
-        </div>
-        </section>
 
       <!-- Genre -->