diff --git a/index.js b/index.js
index af86cb2..b2d0a5a 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,14 @@ app.get("/checkout", (req, res) => {
   res.render("listings/checkout.ejs");
 });
 
+app.get("/order", (req, res) => {
+  res.render("listings/order.ejs");
+});
+
+app.get("/tracking", (req, res) => {
+  res.render("listings/tracking.ejs");
+});
+
 app.listen(8000, () => {
   console.log("App is listening on port 8000");
 });
diff --git a/tests-jasmin/MIT.LICENSE b/jasmine-standalone-5.1.1 (1)/MIT.LICENSE
similarity index 100%
rename from tests-jasmin/MIT.LICENSE
rename to jasmine-standalone-5.1.1 (1)/MIT.LICENSE
diff --git a/tests-jasmin/lib/jasmine-5.1.1/boot0.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot0.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/boot0.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot0.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/boot1.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot1.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/boot1.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot1.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine-html.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine-html.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine-html.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine-html.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine.css b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.css
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine.css
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.css
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine_favicon.png b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine_favicon.png
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine_favicon.png
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine_favicon.png
diff --git a/jasmine-standalone-5.1.1 (1)/moneyTest.js b/jasmine-standalone-5.1.1 (1)/moneyTest.js
new file mode 100644
index 0000000..b894a5c
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/moneyTest.js	
@@ -0,0 +1,64 @@
+import { formatCurrency } from "../public/js/money.js";
+import { Cart } from "../public/js/cart-class.js";
+
+describe("Test suite : formatCurrency", () => {
+  it("Converts cents into dollars", () => {
+    expect(formatCurrency(2000)).toEqual("20.00");
+  });
+  it("Works with zero", () => {
+    expect(formatCurrency(0)).toEqual("0.00");
+  });
+  it("round up to the nearest cent", () => {
+    expect(formatCurrency(2000.5)).toEqual("20.01");
+  });
+});
+
+describe("Cart Class", function () {
+  let cart;
+  const testProductId = "19c6a64a-5463-4d45-9af8-e41140a4100c";
+
+  // Mock localStorage
+  beforeEach(function () {
+    spyOn(localStorage, "getItem").and.callFake(() => {
+      return JSON.stringify([]);
+    });
+    spyOn(localStorage, "setItem");
+
+    const quantitySelector = document.createElement("input");
+    quantitySelector.classList.add(`js-quantity-selector-${testProductId}`);
+    quantitySelector.value = 1; // Default quantity for testing
+    document.body.appendChild(quantitySelector);
+
+    cart = new Cart("test-cart");
+  });
+
+  it("should add a new item to the cart", function () {
+    cart.addToCart(testProductId);
+
+    expect(cart.cartItems.length).toBe(1);
+    expect(cart.cartItems[0].productId).toBe(testProductId);
+    expect(cart.cartItems[0].quantity).toBe(1);
+    expect(localStorage.setItem).toHaveBeenCalled();
+  });
+
+  it("should increase quantity if item already exists", function () {
+    cart.addToCart(testProductId);
+    cart.addToCart(testProductId);
+
+    expect(cart.cartItems.length).toBe(1); // Still one item
+    expect(cart.cartItems[0].quantity).toBe(2); // Quantity increased
+    expect(localStorage.setItem).toHaveBeenCalledTimes(2);
+  });
+
+  // it("should handle multiple different products", function () {
+  //   cart.addToCart("a45cfa0a-66d6-4dc7-9475-e2b01595f7d7");
+  //   cart.addToCart("10ed8504-57db-433c-b0a3-fc71a35c88a1");
+
+  //   expect(cart.cartItems.length).toBe(2);
+  //   console.log(cart.cartItems)
+    // expect(cart.cartItems[0].productId).toBe("a45cfa0a-66d6-4dc7-9475-e2b01595f7d7");
+    // expect(cart.cartItems[1].productId).toBe("10ed8504-57db-433c-b0a3-fc71a35c88a1");
+    // expect(localStorage.setItem).toHaveBeenCalledTimes(2);
+  // });
+});
+
diff --git a/jasmine-standalone-5.1.1 (1)/test.html b/jasmine-standalone-5.1.1 (1)/test.html
new file mode 100644
index 0000000..054e58e
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/test.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Jasmine Spec Runner v5.1.1</title>
+
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="lib/jasmine-5.1.1/jasmine_favicon.png"
+    />
+    <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css" />
+
+    <script src="lib/jasmine-5.1.1/jasmine.js"></script>
+    <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
+    <script src="lib/jasmine-5.1.1/boot0.js"></script>
+    <!-- optional: include a file here that configures the Jasmine env -->
+    <script src="lib/jasmine-5.1.1/boot1.js"></script>
+    <script type="module" src="moneyTest.js"></script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/kaka.html b/kaka.html
new file mode 100644
index 0000000..52366f4
--- /dev/null
+++ b/kaka.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Loader</title>
+  </head>
+  <link rel="stylesheet" href="loder.css">
+  <body>
+    <div class="loader">
+      <svg viewBox="0 0 80 80">
+        <circle cx="40" cy="40" r="32"></circle>
+      </svg>
+    </div>
+
+    <div class="loader triangle">
+      <svg viewBox="0 0 86 80">
+        <polygon points="43 8 79 72 7 72"></polygon>
+      </svg>
+    </div>
+
+    <div class="loader">
+      <svg viewBox="0 0 80 80">
+        <rect x="8" y="8" width="64" height="64"></rect>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/loder.css b/loder.css
new file mode 100644
index 0000000..52aa147
--- /dev/null
+++ b/loder.css
@@ -0,0 +1,171 @@
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  background: #485769; /* Black background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  --path: #222f3d; /* Updated path color to white */
+  --dot: #febd69;
+  --duration: 3s;
+  width: 44px;
+  height: 44px;
+  position: relative;
+  margin: 0 8px; /* Reduced gap size */
+}
+
+.loader svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.loader svg rect,
+.loader svg polygon,
+.loader svg circle {
+  fill: none;
+  stroke: var(--path); /* This will now be white */
+  stroke-width: 10px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.loader svg polygon {
+  stroke-dasharray: 145 76 145 76;
+  stroke-dashoffset: 0;
+  -webkit-animation: pathTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: pathTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader svg rect {
+  stroke-dasharray: 192 64 192 64;
+  stroke-dashoffset: 0;
+  -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
+    infinite;
+  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader svg circle {
+  stroke-dasharray: 150 50 150 50;
+  stroke-dashoffset: 75;
+  -webkit-animation: pathCircle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: pathCircle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader:before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  background: var(--dot);
+  top: 37px;
+  left: 19px;
+  transform: translate(-18px, -18px);
+  -webkit-animation: dotMove var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: dotMove var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
+    infinite;
+}
+
+.loader.triangle {
+  width: 48px;
+}
+
+.loader.triangle:before {
+  left: 21px;
+  transform: translate(-10px, -18px);
+  -webkit-animation: dotTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: dotTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+@keyframes pathTriangle {
+  33% {
+    stroke-dashoffset: 74;
+  }
+  66% {
+    stroke-dashoffset: 147;
+  }
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+
+@keyframes dotTriangle {
+  33% {
+    transform: translate(0, 0);
+  }
+  66% {
+    transform: translate(10px, -18px);
+  }
+  100% {
+    transform: translate(-10px, -18px);
+  }
+}
+
+@keyframes pathRect {
+  25% {
+    stroke-dashoffset: 64;
+  }
+  50% {
+    stroke-dashoffset: 128;
+  }
+  75% {
+    stroke-dashoffset: 192;
+  }
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+
+@keyframes dotMove {
+  25% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(18px, -18px);
+  }
+  75% {
+    transform: translate(0, -36px);
+  }
+  100% {
+    transform: translate(-18px, -18px);
+  }
+}
+
+@keyframes pathCircle {
+  25% {
+    stroke-dashoffset: 125;
+  }
+  50% {
+    stroke-dashoffset: 175;
+  }
+  75% {
+    stroke-dashoffset: 225;
+  }
+  100% {
+    stroke-dashoffset: 275;
+  }
+}
\ No newline at end of file
diff --git a/public/css/checkout/checkout.css b/public/css/checkout/checkout.css
index 4fc9135..8b94533 100644
--- a/public/css/checkout/checkout.css
+++ b/public/css/checkout/checkout.css
@@ -65,7 +65,23 @@
   padding-left: 8rem;
   padding-right: 8rem;
 }
-
+.view-products {
+  padding: 12px 18px;
+  border-radius: 8px;
+  border: none;
+  font-size: 1.3rem;
+  font-weight: 500;
+  background-color: rgba(247, 202, 0, 0.8);
+  margin: 0rem 8rem;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
+}
+.view-products:hover {
+  background-color: #f7ca00;
+}
+.display-none{
+  display: none;
+}
 .checkout-grid {
   display: grid;
   grid-template-columns: 1fr 450px;
@@ -239,9 +255,17 @@
   border: none;
   font-size: 1.3rem;
   font-weight: 500;
-  background-color: #f7ca00;
+  background-color: rgba(247, 202, 0, 0.8);
   margin-top: 11px;
   margin-bottom: 15px;
+  cursor: pointer;
+}
+.place-order-button:hover {
+  background-color: #f7ca00;
+}
+.place-order-button a,.view-products a {
+  text-decoration: none;
+  color: black;
 }
 .quantity-input {
   width: 30px;
diff --git a/public/css/footer.css b/public/css/footer.css
index 65181e6..dac88ce 100644
--- a/public/css/footer.css
+++ b/public/css/footer.css
@@ -6,28 +6,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  text-decoration: underline #37475a;
 }
 .foot-panell:hover {
   background-color: #485769;
   text-decoration: underline #485769;
 }
-.foot-panell2 {
-  background-color: #222f3d;
-  height: 300px;
-  color: white;
-  display: flex;
-  justify-content: space-evenly;
-}
 .panel2 {
   background-color: #222f3d;
   color: white;
   display: flex;
   justify-content: space-evenly;
 }
-.panel2 ul a {
-  cursor: pointer;
-}
 ul {
   margin-top: 4rem;
 }
@@ -39,6 +28,7 @@ ul a {
   font-size: 1rem;
   margin-top: 0.8rem;
   color: #dddddd;
+  cursor: pointer;
 }
 ul a:hover {
   text-decoration: underline;
diff --git a/public/css/order/order.css b/public/css/order/order.css
new file mode 100644
index 0000000..52d82f1
--- /dev/null
+++ b/public/css/order/order.css
@@ -0,0 +1,101 @@
+body {
+  margin-top: 8.4rem;
+}
+.main {
+  width: 70%;
+  max-width: 850px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5rem;
+}
+.page-title {
+  font-weight: 700;
+  font-size: 22px;
+  padding: 2rem 0;
+}
+.order-grid {
+  border: 2px solid #d5d9d9;
+  border-radius: 1rem;
+}
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem 2rem;
+  background-color: #f0f2f2;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  border-bottom: 2px solid #d5d9d9;
+}
+.order-header div p {
+  margin: 0.3rem;
+}
+.order-total {
+  display: flex;
+}
+.order-total .total {
+  padding-left: 4rem;
+}
+.cart-item-details-grid {
+  display: grid;
+  grid-template-columns: 9rem 1fr 18rem;
+  grid-template-rows: auto auto;
+  row-gap: 4rem;
+  column-gap: 30px;
+  align-items: center;
+  margin: 1.5rem 2rem;
+}
+
+/* @media (max-width: 1000px) {
+  .cart-item-details-grid {
+    grid-template-columns: 100px 1fr;
+    row-gap: 30px;
+    }
+} */
+.orderProduct-image {
+  width: 100%;
+}
+.orderProduct-name {
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.orderCart-item-details .orderProduct-quantity {
+  margin-top: 0.5rem;
+}
+.orderCart-item-details button,
+.orderTrack {
+  background-color: rgba(247, 202, 20, 0.8);
+  border: none;
+  height: 3rem;
+  width: 12rem;
+  font-size: larger;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
+  margin-top: 8px;
+}
+.orderCart-item-details button:hover {
+  background-color: rgb(247, 202, 20);
+}
+.orderCart-item-details button img {
+  height: 2rem;
+}
+.orderCart-item-details button span {
+  padding-left: 1rem;
+}
+.orderTrack {
+  background-color: white;
+  border: 2px solid #d5d9d9;
+  width: 15rem;
+}
+.orderTrack span {
+  margin-left: 1rem;
+}
+.orderTrack span a{
+  color: black;  
+  text-decoration: none;
+}
+.orderTrack:hover {
+  background-color: #f7fafa;
+}
diff --git a/public/css/order/tracking.css b/public/css/order/tracking.css
new file mode 100644
index 0000000..f72508f
--- /dev/null
+++ b/public/css/order/tracking.css
@@ -0,0 +1,55 @@
+body {
+  margin-top: 10rem;
+}
+.main {
+  width: 70%;
+  max-width: 850px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 3rem;
+}
+.page-title {
+  font-weight: 700;
+  font-size: 22px;
+  padding: 1.5rem 0;
+}
+.cart-item-details-grid {
+  display: grid;
+  row-gap: 1rem;
+  column-gap: 30px;
+  align-items: center;
+  margin: 0rem 0;
+}
+.orderProduct-image {
+  width: 20%;
+  margin: 1rem 0;
+}
+.orderProduct-name {
+  font-weight: 700;
+}
+.orderCart-item-details .orderProduct-quantity {
+  margin-top: 0.5rem;
+}
+.tracking-delivery .process {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.process div {
+  margin: 1rem;
+}
+.percentage-bar,
+.percentage-bar div {
+  border-radius: 1.5rem;
+  width: 100%;
+  height: 2.5rem;
+}
+.percentage-bar {
+  border: 2px solid rgb(222, 222, 222);
+}
+.percentage-bar div {
+  width: 60%;
+  background-color: #008000;
+  background: linear-gradient(90deg, #115d33, #228b22, #4cbb17);
+}
diff --git a/public/js/amazon.js b/public/js/amazon.js
index 3ce08e4..79d2ef0 100644
--- a/public/js/amazon.js
+++ b/public/js/amazon.js
@@ -1,8 +1,18 @@
 import { cart } from "/js/cart-class.js";
-import { products } from "/js/products.js";
-let productsHTML = "";
-products.forEach((product) => {
-  productsHTML += `
+import { products, loadProductsFetch } from "/js/products.js";
+initializeHomePage();
+async function initializeHomePage() {
+  try {
+    await loadProductsFetch();
+    renderProductsGrid();
+  } catch (error) {
+    alert(error);
+  }
+}
+export function renderProductsGrid() {
+  let productsHTML = "";
+  products.forEach((product) => {
+    productsHTML += `
     <div class="product-container ">
           <div class="product-image-container">
             <img class="product-image"
@@ -48,18 +58,19 @@ products.forEach((product) => {
           </button>
         </div>
   `;
-});
-document.querySelector(".js-products-grid").innerHTML = productsHTML;
-document.querySelectorAll(".js-add-to-cart").forEach((button) => {
-  button.addEventListener("click", () => {
-    const { productId } = button.dataset;
-    cart.addToCart(productId);
-    cart.updateCartQuantity(productId);
   });
-});
-if (cart.calculateCartQuantity() === 0) {
-  document.querySelector(".js-cart-quantity").innerHTML = "";
-} else {
-  document.querySelector(".js-cart-quantity").innerHTML =
-    cart.calculateCartQuantity();
+  document.querySelector(".js-products-grid").innerHTML = productsHTML;
+  document.querySelectorAll(".js-add-to-cart").forEach((button) => {
+    button.addEventListener("click", () => {
+      const { productId } = button.dataset;
+      cart.addToCart(productId);
+      cart.updateCartQuantity(productId);
+    });
+  });
+  if (cart.calculateCartQuantity() === 0) {
+    document.querySelector(".js-cart-quantity").innerHTML = "";
+  } else {
+    document.querySelector(".js-cart-quantity").innerHTML =
+      cart.calculateCartQuantity();
+  }
 }
diff --git a/public/js/cart-class.js b/public/js/cart-class.js
index 6035249..2dc9510 100644
--- a/public/js/cart-class.js
+++ b/public/js/cart-class.js
@@ -1,4 +1,4 @@
-class Cart {
+export class Cart {
   cartItems;
   #localStoragekey;
 
diff --git a/public/js/checkout.js b/public/js/checkout.js
index aa48400..900ec69 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,3 +1,18 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
-renderOrderSummary();
-
+import { loadProductsFetch } from "./products.js";
+// import { renderCartSummary } from "./returnOrder.js";
+initializeCheckout();
+async function initializeCheckout() {
+  try {
+    await loadProductsFetch();
+    renderOrderSummary();
+  } catch (error) {
+    alert(error);
+  }
+}
+// document.querySelector(".js-place-order").addEventListener("click", () => {
+  //why renderCartSummary not working in returnOrder.js
+  // console.log("renderCartSummary")
+  // renderCartSummary();
+// });
+// renderCartSummary();
\ No newline at end of file
diff --git a/public/js/checkout/orderSummary.js b/public/js/checkout/orderSummary.js
index 91e7103..562bf64 100644
--- a/public/js/checkout/orderSummary.js
+++ b/public/js/checkout/orderSummary.js
@@ -106,36 +106,52 @@ export function renderOrderSummary() {
     const updateText = (selector, text) => {
       document.querySelector(selector).innerHTML = text;
     };
-    const updateTotals = (totals) => {
-      updateText(".js-cart-summary-total", totals.total);
-      updateText(".js-total-before-tax", totals.totalBeforeTax);
-      updateText(".js-extimated-tax", totals.estimatedTax);
-      updateText(".js-order-total", totals.orderTotal);
-    };
     if (cartQuantity === 0) {
-      updateText(".js-return-to-home-link", "Add Items");
-      updateText(".page-title", "Your Amazon Cart is empty.");
-      updateText(".js-cart-quantity", "");
-      updateText(".js-cart-summary-quantity", "Items (0) :");
-      updateTotals({
-        total: "$0.00",
-        totalBeforeTax: "$0.00",
-        estimatedTax: "$0.00",
-        orderTotal: "$0.00",
-      });
+      document.querySelector(".js-return-to-home-link").innerHTML = `Add Items`;
+      document.querySelector(
+        ".page-title"
+      ).innerHTML = `Your Amazon Cart is empty.`;
+      document.querySelector(".js-cart-quantity").innerHTML = "";
+      document.querySelector(".js-cart-summary-quantity").innerHTML =
+        "Items (0) :";
+      document.querySelector(".js-cart-summary-total").innerHTML = "$0.00";
+      document.querySelector(".js-total-before-tax").innerHTML = "$0.00";
+      document.querySelector(".js-extimated-tax").innerHTML = "$0.00";
+      document.querySelector(".js-order-total").innerHTML = "$0.00";
+      document.querySelector(".payment-summary button").disabled = true;
+      document.querySelector(".payment-summary button").style.background =
+        "#ffeb89";
+      document.querySelector(".view-products").classList.remove("display-none");
     } else {
-      const productPriceCents = renderPaymentSummary().productPriceCents;
-      const formattedPrice = (price) => `$${formatCurrency(price)}`;
-      updateText(".js-return-to-home-link", `${cartQuantity} Items`);
-      updateText(".page-title", "Review your order");
-      updateText(".js-cart-quantity", cartQuantity);
-      updateText(".js-cart-summary-quantity", `Items (${cartQuantity}) :`);
-      updateTotals({
-        total: formattedPrice(productPriceCents),
-        totalBeforeTax: formattedPrice(productPriceCents),
-        estimatedTax: formattedPrice(productPriceCents / 10),
-        orderTotal: formattedPrice(productPriceCents + productPriceCents / 10),
-      });
+      document.querySelector(".view-products").classList.add("display-none");
+      document.querySelector(
+        ".js-return-to-home-link"
+      ).innerHTML = `${cartQuantity} Items`;
+      document.querySelector(".page-title").innerHTML = `Review your order`;
+      document.querySelector(".js-cart-quantity").innerHTML =
+        cart.calculateCartQuantity();
+      document.querySelector(
+        ".js-cart-summary-quantity"
+      ).innerHTML = `Items (${cart.calculateCartQuantity()}) :`;
+      document.querySelector(
+        ".js-cart-summary-total"
+      ).innerHTML = `$${formatCurrency(
+        renderPaymentSummary().productPriceCents
+      )}`;
+      document.querySelector(
+        ".js-total-before-tax"
+      ).innerHTML = `$${formatCurrency(
+        renderPaymentSummary().productPriceCents
+      )}`;
+      document.querySelector(
+        ".js-extimated-tax"
+      ).innerHTML = `$${formatCurrency(
+        renderPaymentSummary().productPriceCents / 10
+      )}`;
+      document.querySelector(".js-order-total").innerHTML = `$${formatCurrency(
+        renderPaymentSummary().productPriceCents +
+          renderPaymentSummary().productPriceCents / 10
+      )}`;
     }
   }
   document.querySelectorAll(".js-update-link").forEach((link) => {
diff --git a/public/js/checkout/paymentSummery.js b/public/js/checkout/paymentSummery.js
index 12064fa..f9a3540 100644
--- a/public/js/checkout/paymentSummery.js
+++ b/public/js/checkout/paymentSummery.js
@@ -2,7 +2,7 @@ import { cart } from "/js/cart-class.js";
 import { getProduct } from "/js/products.js";
 import { getDeliveryOption } from "/js/deliveryOptions.js";
 import { formatCurrency } from "/js/money.js";
-
+import { addOrder } from "../order.js";
 export function renderPaymentSummary() {
   let productPriceCents = 0;
   let shippingPriceCents = 0;
@@ -16,3 +16,26 @@ export function renderPaymentSummary() {
   const totalPayment = formatCurrency(productPriceCents + shippingPriceCents);
   return { productPriceCents, shippingPrice, totalPayment };
 }
+// document
+//   .querySelector(".js-place-order")
+//   .addEventListener("click", async () => {
+//     try {
+//       const response = await fetch("https://supersimplebackend.dev/orders", {
+//         method: "POST",
+//         headers: {
+//           "Content-Type": "application/json",
+//         },
+//         body: JSON.stringify({
+//           cart: cart,
+//         }),
+//       });
+
+//       const order = await response.json();
+//       addOrder(order);
+//       console.log("order placed");
+//     } catch (error) {
+//       console.log(`Unexpected error, Try again later`,error);
+//       alert(error);
+//     }
+//     // window.location.href = 'orders.html';
+//   });
diff --git a/public/js/order.js b/public/js/order.js
new file mode 100644
index 0000000..9d0e91b
--- /dev/null
+++ b/public/js/order.js
@@ -0,0 +1,9 @@
+export const order = JSON.parse(localStorage.getItem("orders")) || [];
+export function addOrder(order) {
+  // order.unshift(order);
+  saveToStroage();
+}
+
+function saveToStroage() {
+  localStorage.setItem("orders", JSON.stringify(order));
+}
\ No newline at end of file
diff --git a/public/js/products.js b/public/js/products.js
index afee1a6..d2653b9 100644
--- a/public/js/products.js
+++ b/public/js/products.js
@@ -1,13 +1,16 @@
 import { formatCurrency } from "/js/money.js";
-export function getProduct(productId) {
-  let matchingProduct;
-  products.forEach((product) => {
-    if (product.id === productId) {
-      matchingProduct = product;
-    }
-  });
-  return matchingProduct;
-}
+// export function getProduct(productId) {
+//   loadProducts(()=>{
+//     let matchingProduct;
+//     products.forEach((product) => {
+//       if (product.id === productId) {
+//         matchingProduct = product;
+//       }
+//     });
+//     console.log(matchingProduct);
+//     return matchingProduct;
+//   });
+// }
 class Product {
   id;
   image;
@@ -68,7 +71,7 @@ class Appliances extends Product {
     `;
   }
 }
-export const products = [
+const kaka = [
   {
     id: "e43608ze-6aa0-4b85-b27f-e1d07eb67z16",
     image: "images/products/Chanakya Neeti.jpg",
@@ -689,3 +692,33 @@ export const products = [
   }
   return new Product(productDetails);
 });
+export function getProduct(productId) {
+  let matchingProduct;
+  kaka.forEach((product) => {
+    if (product.id === productId) {
+      matchingProduct = product;
+    }
+  });
+  return matchingProduct;
+}
+export let products = [];
+
+export function loadProductsFetch() {
+  const Promise = fetch("https://supersimplebackend.dev/products")
+    .then((response) => response.json())
+    .then((data) => {
+      products = data.map((productDetails) => {
+        if (productDetails.type === "clothing") {
+          return new Clothing(productDetails);
+        } else if (productDetails.type === "appliances") {
+          return new Appliances(productDetails);
+        }
+        return new Product(productDetails);
+      });
+      console.log("load Products");
+    })
+    .catch((error) => {
+      alert("Error fetching data:", error);
+    });
+  return Promise;
+}
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
new file mode 100644
index 0000000..04e2a36
--- /dev/null
+++ b/public/js/returnOrder.js
@@ -0,0 +1,59 @@
+import { cart } from "/js/cart-class.js";
+import { getProduct } from "./products.js";
+import { calculateDeliveryDate } from "./deliveryOptions.js";
+renderCartSummary();
+export function renderCartSummary() {
+  let orderSummaryHtml = "";
+  cart.cartItems.forEach((cartItem) => {
+    const productId = cartItem.productId;
+    const matchingProduct = getProduct(productId);
+    const dateString = calculateDeliveryDate(7);
+    orderSummaryHtml += `
+      <div class="cart-item-details-grid">
+        <img class="orderProduct-image"
+          src="${matchingProduct.image}">
+        <div class="orderCart-item-details">
+          <div class="orderProduct-name">
+            ${matchingProduct.name}
+          </div>
+          <div class="delivery-date">
+            Arriving on : ${dateString}
+          </div>
+          <div class="orderProduct-quantity">
+            <span>
+              Quantity : <span class="quantity-label js-quantity-label-${matchingProduct.id}">${cartItem.quantity}</span>
+            </span>
+          </div>
+          <button class="buy-again">
+            <img src="/images/icons/buy-again.png" alt="" />
+            <span>Buy it again</span>
+          </button> 
+        </div>
+        <div>
+          <button class="orderTrack">
+            <i class="fa-solid fa-map-location-dot"></i><span><a href="/tracking">Track package</a></span>
+          </button>
+        </div>
+      </div>`;
+  });
+  const orderDetailsGrid = document.querySelector(".js-order-summary");
+  if (orderDetailsGrid) {
+    document.querySelector(".js-order-summary").innerHTML = orderSummaryHtml;
+  }
+}
+document.querySelectorAll(".buy-again").forEach((button) => {
+  button.addEventListener("click", () => {
+    console.log("add ot cart");
+  });
+});
+document.querySelectorAll(".orderTrack").forEach((button) => {
+  button.addEventListener("click", () => {
+    console.log("track order");
+  });
+});
+if (cart.calculateCartQuantity() === 0) {
+  document.querySelector(".js-cart-quantity").innerHTML = "";
+} else {
+  document.querySelector(".js-cart-quantity").innerHTML =
+    cart.calculateCartQuantity();
+}
diff --git a/public/js/tracking.js b/public/js/tracking.js
new file mode 100644
index 0000000..a1a9974
--- /dev/null
+++ b/public/js/tracking.js
@@ -0,0 +1,41 @@
+import { cart } from "/js/cart-class.js";
+import { getProduct } from "./products.js";
+import { calculateDeliveryDate } from "./deliveryOptions.js";
+renderCartSummary();
+export function renderCartSummary() {
+  let orderSummaryHtml = "";
+  cart.cartItems.forEach((cartItem) => {
+    const productId = cartItem.productId;
+    const matchingProduct = getProduct(productId);
+    const dateString = calculateDeliveryDate(7);
+    orderSummaryHtml += `
+      <div class="cart-item-details-grid">
+        <div class="orderCart-item-details">
+          <div class="orderProduct-name">
+            ${matchingProduct.name}
+          </div>
+          <div class="orderProduct-quantity">
+            <span>
+              Quantity : <span class="quantity-label js-quantity-label-${matchingProduct.id}">${cartItem.quantity}</span>
+            </span>
+          </div>
+        </div>
+        <img class="orderProduct-image"
+          src="${matchingProduct.image}">
+      </div>`;
+  });
+  const orderDetailsGrid = document.querySelector(".js-order-summary");
+  if (orderDetailsGrid) {
+    document.querySelector(".js-order-summary").innerHTML = orderSummaryHtml;
+  }
+}
+
+document.querySelector(
+  ".page-title"
+).innerHTML = `Arriving on ${calculateDeliveryDate(3)}`;
+if (cart.calculateCartQuantity() === 0) {
+  document.querySelector(".js-cart-quantity").innerHTML = "";
+} else {
+  document.querySelector(".js-cart-quantity").innerHTML =
+    cart.calculateCartQuantity();
+}
diff --git a/tests-jasmin/cartTest.html b/tests-jasmin/cartTest.html
deleted file mode 100644
index bb0bb2a..0000000
--- a/tests-jasmin/cartTest.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./cartTest.js" type="module"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/tests-jasmin/cartTest.js b/tests-jasmin/cartTest.js
deleted file mode 100644
index f69e614..0000000
--- a/tests-jasmin/cartTest.js
+++ /dev/null
@@ -1,32 +0,0 @@
- import { addToCart,cart,loadFromStorage } from "../public/js/cart.js";
-
- describe('test suite: addToCart',()=>{
-  it('adds an existing product to the cart',()=>{
-    spyOn(localStorage,'setItem');
-    spyOn(localStorage,'getItem').and.callFake(()=>{
-      return JSON.stringify([{
-        productId: '8c9c52b5-5a19-4bcb-a5d1-158a74287c53',
-        quantity:1,
-        deliveryOptionId:'1',
-      }]);
-    });
-    loadFromStorage();
-    addToCart('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart.lenght).toEqual(1);
-    expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-    expect(cart[0].productId).toEqual('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart[0].quantity).toEqual(2);
-  })
-  it('adds a new product to cart',()=>{
-    spyOn(localStorage,'setItem');
-    spyOn(localStorage,'getItem').and.callFake(()=>{
-      return JSON.stringify([]);
-    });
-    loadFromStorage();
-    addToCart('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart.lenght).toEqual(1);
-    expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-    expect(cart[0].productId).toEqual('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart[0].quantity).toEqual(1);
-  });
- });
diff --git a/tests-jasmin/moneyTest.html b/tests-jasmin/moneyTest.html
deleted file mode 100644
index 23e6660..0000000
--- a/tests-jasmin/moneyTest.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./moneyTest.js" type="module"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/tests-jasmin/moneyTest.js b/tests-jasmin/moneyTest.js
deleted file mode 100644
index d88e8e9..0000000
--- a/tests-jasmin/moneyTest.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { formatCurrency } from "../public/js/money.js";
-
-describe('test suite: formateCurrency',()=>{
-  it('converts cents into dollars',()=>{
-    expect(formatCurrency(2095)).toEqual('20.95');
-  });
-  it('works with zero',()=>{
-    expect(formatCurrency(0)).toEqual("0.00");
-  });
-  it('round up to the nearest cent',()=>{
-    expect(formatCurrency(2000.5)).toEqual("20.01");
-  });
-});
\ No newline at end of file
diff --git a/tests-jasmin/orderSummary.html b/tests-jasmin/orderSummary.html
deleted file mode 100644
index 83dea12..0000000
--- a/tests-jasmin/orderSummary.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./orderSummaryTest.js" type="module"></script>
-</head>
-
-<body>
-  <div class="js-test-container"></div>
-</body>
-</html>
diff --git a/tests-jasmin/orderSummaryTest.js b/tests-jasmin/orderSummaryTest.js
deleted file mode 100644
index bbb8ba6..0000000
--- a/tests-jasmin/orderSummaryTest.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {renderOrderSummary} from '/checkout/orderSummary.js';
-import {loadFromStorage} from '/checkout/orderSummary.js';
-
-describe('test suite: renderOrdersummary',()=>{
-  it('displays the cart',()=>{
-    document.querySelector('.js-test-container').innerHTML = '<div class="js-order-summary"></div>';
-
-    spyOn(localStorage,'getItem').and.callFake(()=>{
-      return JSON.stringify([{
-        productId: '8c9c52b5-5a19-4bcb-a5d1-158a74287c53',
-        quantity:1,
-        deliveryOptionId:'1',
-      }]);
-    });
-    loadFromStorage();
-
-    renderOrderSummary();
-
-  })
-})
\ No newline at end of file
diff --git a/tests-jasmin/tests-simple/moneyTest.js b/tests-jasmin/tests-simple/moneyTest.js
deleted file mode 100644
index d10c056..0000000
--- a/tests-jasmin/tests-simple/moneyTest.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { formatCurrency } from "../../public/js/money.js";
-
-console.log('test suit: formatCurrency');
-console.log('converts cents into dollars');
-if(formatCurrency(2095) === "20.95"){
-  console.log('Passed');
-}else{
-  console.log('Failed');
-}
-
-console.log('works with zero');
-if(formatCurrency(0) === "0.00"){
-  console.log('Passed');
-}else{
-  console.log('Failed');
-}
-
-console.log('round up to the nearest cent');
-if(formatCurrency(2000.5) === '20.01'){
-  console.log('Passed');
-}else{
-  console.log('Failed');
-}
-console.log(formatCurrency(2000.5))
\ No newline at end of file
diff --git a/tests-jasmin/tests-simple/test.html b/tests-jasmin/tests-simple/test.html
deleted file mode 100644
index 5984c76..0000000
--- a/tests-jasmin/tests-simple/test.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head></head>
-  <body>
-    <script src="moneyTest.js" type="module"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/views/includes/footer.ejs b/views/includes/footer.ejs
index 1ea1341..3665cc1 100644
--- a/views/includes/footer.ejs
+++ b/views/includes/footer.ejs
@@ -1,7 +1,5 @@
 <footer>
-  <a href="/amazon">
-    <div class="foot-panell">Back to top</div>
-  </a>
+  <div class="foot-panell" onclick="topFunction()">Back to top</div>
   <div class="panel2">
     <ul>
       <p>Get to know us</p>
@@ -80,3 +78,9 @@
     <div class="copyright">© 1996-2024, Amazon.com, Inc. or its affiliates</div>
   </div>
 </footer>
+<script>
+  function topFunction() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+</script>
diff --git a/views/includes/navbar.ejs b/views/includes/navbar.ejs
index e1c4d89..4399c96 100644
--- a/views/includes/navbar.ejs
+++ b/views/includes/navbar.ejs
@@ -51,7 +51,7 @@
       <span class="orders-text">Account & Lists</span>
     </a>
 
-    <a class="orders-link header-link" href="orders.html">
+    <a class="orders-link header-link" href="/order">
       <span class="returns-text">Returns</span>
       <span class="orders-text">& Orders</span>
     </a>
diff --git a/views/layouts/boilerPlate.ejs b/views/layouts/boilerPlate.ejs
index 569bb78..90abdbb 100644
--- a/views/layouts/boilerPlate.ejs
+++ b/views/layouts/boilerPlate.ejs
@@ -13,6 +13,11 @@
     />
     <link rel="stylesheet" href="css/amazon-header.css" />
     <link rel="stylesheet" href="css/footer.css" />
+    <style>
+      html {
+        scroll-behavior: smooth;
+      }
+    </style>
   </head>
   <%- include('../includes/navbar') %> <%- body -%> <%-
   include('../includes/footer') %>
diff --git a/views/listings/checkout.ejs b/views/listings/checkout.ejs
index f9c46cd..1b70a60 100644
--- a/views/listings/checkout.ejs
+++ b/views/listings/checkout.ejs
@@ -14,6 +14,7 @@
 
   <div class="main">
     <div class="page-title"></div>
+    <button class="view-products" ><a href="/amazon">View Products</a></button>
     <div class="checkout-grid">
       <div class="order-summary js-order-summary">
       </div>
@@ -48,8 +49,8 @@
           <div class="payment-summary-money js-order-total"></div>
         </div>
 
-        <button class="place-order-button button-primary">
-          Place your order
+        <button class="place-order-button button-primary js-place-order">
+          <a href="/order">Place your order</a>
         </button>
       </div>
   </div>
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
new file mode 100644
index 0000000..f838338
--- /dev/null
+++ b/views/listings/order.ejs
@@ -0,0 +1,28 @@
+<% layout('layouts/boilerPlate') -%>
+<title>Order</title>
+<link rel="stylesheet" href="css/order/order.css" />
+<body>
+  <div class="main">
+    <div class="page-title">Your Orders..</div>
+    <div class="order-grid">
+      <div class="order-header">
+        <div class="order-total">
+          <div class="order">
+            <b>Order Placed:</b>
+            <p>January 22</p>
+          </div>
+          <div class="total">
+            <b>Total</b>
+            <p>$543</p>
+          </div>
+        </div>
+        <div class="order-id">
+          <b>Order Id</b>
+          <p>73bce3e6-ffb4-8261-9561-f3a2d8d3b609</p>
+        </div>
+      </div>
+      <div class="order-summary js-order-summary"></div>
+    </div>
+  </div>
+  <script type="module" src="/js/returnOrder.js"></script>
+</body>
diff --git a/views/listings/tracking.ejs b/views/listings/tracking.ejs
new file mode 100644
index 0000000..03ba5e6
--- /dev/null
+++ b/views/listings/tracking.ejs
@@ -0,0 +1,23 @@
+<% layout('layouts/boilerPlate') -%>
+<title>Track order</title>
+<link rel="stylesheet" href="css/order/tracking.css" />
+<body>
+  <div class="main">
+    <a href="/order">View all order</a>
+    <div class="page-title"></div>
+    <div class="order-grid">
+      <div class="order-summary js-order-summary"></div>
+    </div>
+    <div class="tracking-delivery">
+      <div class="process">
+        <div>Preparing</div>
+        <div>Shipped</div>
+        <div>Delivered</div>
+      </div>
+      <div class="percentage-bar">
+        <div></div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="/js/tracking.js"></script>
+</body>