diff --git a/amazon.html b/amazon.html
index d9f431b6a..b4faa51af 100644
--- a/amazon.html
+++ b/amazon.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Amazon Project</title>
+    <title>Amazon</title>
 
     <!-- This code is needed for responsive design to work.
       (Responsive design = make the website look good on
@@ -31,7 +31,6 @@
 
       <div class="amazon-header-middle-section">
         <input class="search-bar" type="text" placeholder="Search">
-
         <button class="search-button">
           <img class="search-icon" src="images/icons/search-icon.png">
         </button>
@@ -39,167 +38,23 @@
 
       <div class="amazon-header-right-section">
         <a class="orders-link header-link" href="orders.html">
-          <span class="returns-text">Returns</span>
+          <span class="returns-text">Returns history</span>
           <span class="orders-text">& Orders</span>
         </a>
 
         <a class="cart-link header-link" href="checkout.html">
           <img class="cart-icon" src="images/icons/cart-icon.png">
-          <div class="cart-quantity">3</div>
+          <div class="cart-quantity js-cart-quantity"></div>
           <div class="cart-text">Cart</div>
         </a>
       </div>
     </div>
     
     <div class="main">
-      <div class="products-grid">
-        <div class="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/athletic-cotton-socks-6-pairs.jpg">
-          </div>
-
-          <div class="product-name limit-text-to-2-lines">
-            Black and Gray Athletic Cotton Socks - 6 Pairs
-          </div>
-
-          <div class="product-rating-container">
-            <img class="product-rating-stars"
-              src="images/ratings/rating-45.png">
-            <div class="product-rating-count link-primary">
-              87
-            </div>
-          </div>
-
-          <div class="product-price">
-            $10.90
-          </div>
-
-          <div class="product-quantity-container">
-            <select>
-              <option selected value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-            </select>
-          </div>
-
-          <div class="product-spacer"></div>
-
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
-
-          <button class="add-to-cart-button button-primary">
-            Add to Cart
-          </button>
-        </div>
-
-        <div class="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/intermediate-composite-basketball.jpg">
-          </div>
-
-          <div class="product-name limit-text-to-2-lines">
-            Intermediate Size Basketball
-          </div>
-
-          <div class="product-rating-container">
-            <img class="product-rating-stars"
-              src="images/ratings/rating-40.png">
-            <div class="product-rating-count link-primary">
-              127
-            </div>
-          </div>
-
-          <div class="product-price">
-            $20.95
-          </div>
-
-          <div class="product-quantity-container">
-            <select>
-              <option selected value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-            </select>
-          </div>
-
-          <div class="product-spacer"></div>
-
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
-
-          <button class="add-to-cart-button button-primary">
-            Add to Cart
-          </button>
-        </div>
-
-        <div class="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg">
-          </div>
-
-          <div class="product-name limit-text-to-2-lines">
-            Adults Plain Cotton T-Shirt - 2 Pack
-          </div>
-
-          <div class="product-rating-container">
-            <img class="product-rating-stars"
-              src="images/ratings/rating-45.png">
-            <div class="product-rating-count link-primary">
-              56
-            </div>
-          </div>
-
-          <div class="product-price">
-            $7.99
-          </div>
-
-          <div class="product-quantity-container">
-            <select>
-              <option selected value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-            </select>
-          </div>
-
-          <div class="product-spacer"></div>
-
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
-
-          <button class="add-to-cart-button button-primary">
-            Add to Cart
-          </button>
-        </div>
+      <div class="products-grid js-products-grid">
       </div>
     </div>
+    <script type="module" src="script/amazon.js"></script>
+
   </body>
 </html>
diff --git a/checkout.html b/checkout.html
index da3f2497b..593ad296e 100644
--- a/checkout.html
+++ b/checkout.html
@@ -29,8 +29,8 @@
         </div>
 
         <div class="checkout-header-middle-section">
-          Checkout (<a class="return-to-home-link"
-            href="amazon.html">3 items</a>)
+          Checkout (<a class="return-to-home-link js-return-to-home-link"
+            href="amazon.html"></a>)
         </div>
 
         <div class="checkout-header-right-section">
@@ -43,157 +43,7 @@
       <div class="page-title">Review your order</div>
 
       <div class="checkout-grid">
-        <div class="order-summary">
-          <div class="cart-item-container">
-            <div class="delivery-date">
-              Delivery date: Tuesday, June 21
-            </div>
-
-            <div class="cart-item-details-grid">
-              <img class="product-image"
-                src="images/products/athletic-cotton-socks-6-pairs.jpg">
-
-              <div class="cart-item-details">
-                <div class="product-name">
-                  Black and Gray Athletic Cotton Socks - 6 Pairs
-                </div>
-                <div class="product-price">
-                  $10.90
-                </div>
-                <div class="product-quantity">
-                  <span>
-                    Quantity: <span class="quantity-label">2</span>
-                  </span>
-                  <span class="update-quantity-link link-primary">
-                    Update
-                  </span>
-                  <span class="delete-quantity-link link-primary">
-                    Delete
-                  </span>
-                </div>
-              </div>
-
-              <div class="delivery-options">
-                <div class="delivery-options-title">
-                  Choose a delivery option:
-                </div>
-                <div class="delivery-option">
-                  <input type="radio" checked
-                    class="delivery-option-input"
-                    name="delivery-option-1">
-                  <div>
-                    <div class="delivery-option-date">
-                      Tuesday, June 21
-                    </div>
-                    <div class="delivery-option-price">
-                      FREE Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio"
-                    class="delivery-option-input"
-                    name="delivery-option-1">
-                  <div>
-                    <div class="delivery-option-date">
-                      Wednesday, June 15
-                    </div>
-                    <div class="delivery-option-price">
-                      $4.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio"
-                    class="delivery-option-input"
-                    name="delivery-option-1">
-                  <div>
-                    <div class="delivery-option-date">
-                      Monday, June 13
-                    </div>
-                    <div class="delivery-option-price">
-                      $9.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="cart-item-container">
-            <div class="delivery-date">
-              Delivery date: Wednesday, June 15
-            </div>
-
-            <div class="cart-item-details-grid">
-              <img class="product-image"
-                src="images/products/intermediate-composite-basketball.jpg">
-
-              <div class="cart-item-details">
-                <div class="product-name">
-                  Intermediate Size Basketball
-                </div>
-                <div class="product-price">
-                  $20.95
-                </div>
-                <div class="product-quantity">
-                  <span>
-                    Quantity: <span class="quantity-label">1</span>
-                  </span>
-                  <span class="update-quantity-link link-primary">
-                    Update
-                  </span>
-                  <span class="delete-quantity-link link-primary">
-                    Delete
-                  </span>
-                </div>
-              </div>
-
-              <div class="delivery-options">
-                <div class="delivery-options-title">
-                  Choose a delivery option:
-                </div>
-
-                <div class="delivery-option">
-                  <input type="radio" class="delivery-option-input"
-                    name="delivery-option-2">
-                  <div>
-                    <div class="delivery-option-date">
-                      Tuesday, June 21
-                    </div>
-                    <div class="delivery-option-price">
-                      FREE Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio" checked class="delivery-option-input"
-                    name="delivery-option-2">
-                  <div>
-                    <div class="delivery-option-date">
-                      Wednesday, June 15
-                    </div>
-                    <div class="delivery-option-price">
-                      $4.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio" class="delivery-option-input"
-                    name="delivery-option-2">
-                  <div>
-                    <div class="delivery-option-date">
-                      Monday, June 13
-                    </div>
-                    <div class="delivery-option-price">
-                      $9.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div class="order-summary js-order-summary">
 
         <div class="payment-summary">
           <div class="payment-summary-title">
@@ -231,5 +81,6 @@
         </div>
       </div>
     </div>
+    <script type="module" src="script\checkout.js"></script>
   </body>
 </html>
diff --git a/data/cart.js b/data/cart.js
new file mode 100644
index 000000000..db7c5b4ea
--- /dev/null
+++ b/data/cart.js
@@ -0,0 +1,72 @@
+export let cart = JSON.parse(localStorage.getItem('cart'));
+if(!cart){
+  cart = [{
+ productId:'e43638ce-6aa0-4b85-b27f-e1d07eb678c6',
+ quantity:2, 
+ deliveryOptionsId: '1',
+},{
+  productId:'19c6a64a-5463-4d45-9af8-e41140a4100c',
+ quantity:2, 
+ deliveryOptionsId: '2',
+
+}];
+};
+function saveToStorage(){
+  localStorage.setItem('cart',JSON.stringify(cart));
+};
+export function addToCart(productId){
+  let matchingItem;
+      cart.forEach((CartItem)=>{
+        if(productId === CartItem.productId){
+          matchingItem = CartItem;
+        }
+      });
+      const quantitySelector = document.querySelector(`.js-quantity-selector-${productId}`);
+      const quantity = Number(quantitySelector.value);
+      if(matchingItem){
+        matchingItem.quantity += quantity;
+      }else{
+        cart.push({
+          productId,
+          quantity: 1,
+          deliveryOptionsId: '3',
+        });
+      };
+      saveToStorage();
+};
+export function calculateCartQuantity(){
+  let cartQuantity = 0;
+      cart.forEach((CartItem)=>{
+        cartQuantity += CartItem.quantity;
+      });
+      return cartQuantity;
+    };
+export function updateCartQuantity(productId){
+let addedMessageTimeoutId;
+document.querySelector('.js-cart-quantity').innerHTML = calculateCartQuantity();
+const addedMessage = document.querySelector(`.js-added-to-cart-${productId}`);
+addedMessage.classList.add('added-to-cart-visible');
+if(addedMessageTimeoutId){clearTimeout(addedMessageTimeoutId);}
+const timeoutId = setTimeout(()=>{
+  addedMessage.classList.remove('added-to-cart-visible')
+},1500);
+addedMessageTimeoutId = timeoutId;
+};
+export function removeFromCart(productId){
+  const newCart = [];
+  cart.forEach((CartItem)=>{
+    if(CartItem.productId !== productId){
+      newCart.push(CartItem);
+    }
+  });
+  cart = newCart;
+  saveToStorage();
+};
+export function updateQuantity(productId,newQuantity){
+let matchingItem;
+cart.forEach((CartItem) => {
+  if(productId === CartItem.productId){
+    matchingItem = CartItem;}
+});
+matchingItem.quantity = newQuantity;
+saveToStorage();}
\ No newline at end of file
diff --git a/data/deliveryOptions.js b/data/deliveryOptions.js
new file mode 100644
index 000000000..0a3141044
--- /dev/null
+++ b/data/deliveryOptions.js
@@ -0,0 +1,15 @@
+export const deliveryOptions = [
+  {
+    id: '1',
+    deliveryDays: 7,
+    priceCents: 0,
+  },{
+    id: '2',
+    deliveryDays: 3,
+    priceCents: 499,
+  },{
+    id: '3',
+    deliveryDays: 1,
+    priceCents: 999,
+  }
+];
diff --git a/data/products.js b/data/products.js
index 61a7fdf7b..3d73af9d4 100644
--- a/data/products.js
+++ b/data/products.js
@@ -1,4 +1,4 @@
-const products = [
+export const products = [
   {
     id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
     image: "images/products/athletic-cotton-socks-6-pairs.jpg",
@@ -27,6 +27,19 @@ const products = [
       "sports",
       "basketballs"
     ]
+  },{
+    id: "14rvbae-wef23",
+    image: "images/products/box1_image.jpg",
+    name:"Home & care",
+    rating: {
+      stars: 3,
+      count:232,
+    },
+    priceCents:3999,
+    keywords:[
+      "home"
+      // "decoration"
+    ]
   },
   {
     id: "83d4ca15-0f35-48f5-b7a3-1ea210004f2e",
@@ -656,5 +669,75 @@ const products = [
       "apparel",
       "mens"
     ]
+  },{
+    id: "bc2847easd23",
+    image: "images/products/box2_image.jpg",
+    name: "Health & Presonal care",
+    rating: {
+      stars: 4.5,
+      count: 357
+    },
+    priceCents: 2100,
+    keywords: [
+      "clean",
+      "presonal care",
+      "mens"
+    ]
+  },{
+    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
+    image: "images/products/fit.jpg",
+    name: "For your Fitness needs",
+    rating: {
+      stars: 4.5,
+      count: 3157
+    },
+    priceCents: 22400,
+    keywords: [
+      "sweaters",
+      "hoodies",
+      "apparel",
+      "mens"
+    ]
+  },{
+    id: "adf343f-b7cf-57fde044a955",
+    image: "images/products/gitter.jpg",
+    name: "Creat with strip lights",
+    rating: {
+      stars: 4,
+      count: 3157
+    },
+    priceCents: 1500,
+    keywords: [
+      "light",
+      "rgb",
+      "gitter",
+    ]
+  },{
+    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
+    image: "images/products/phone.jpg",
+    name: "S22-Ultra SUMSANG",
+    rating: {
+      stars: 5,
+      count: 3157
+    },
+    priceCents: 52400,
+    keywords: [
+      "sumsang",
+      "phone",
+      "ultra",
+    ]
+  },{
+    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
+    image: "images/products/box3_image.jpg",
+    name: "Table & Chair",
+    rating: {
+      stars: 3,
+      count: 37
+    },
+    priceCents: 22400,
+    keywords: [
+      "table",
+      "chair",
+    ]
   }
 ];
\ No newline at end of file
diff --git a/images/photos/box1_image.jpg b/images/photos/box1_image.jpg
new file mode 100644
index 000000000..f4aa14e41
Binary files /dev/null and b/images/photos/box1_image.jpg differ
diff --git a/images/photos/box2_image.jpg b/images/photos/box2_image.jpg
new file mode 100644
index 000000000..d807dc459
Binary files /dev/null and b/images/photos/box2_image.jpg differ
diff --git a/images/photos/box3_image.jpg b/images/photos/box3_image.jpg
new file mode 100644
index 000000000..300f1f328
Binary files /dev/null and b/images/photos/box3_image.jpg differ
diff --git a/images/photos/box5_image.jpg b/images/photos/box5_image.jpg
new file mode 100644
index 000000000..4fe84c406
Binary files /dev/null and b/images/photos/box5_image.jpg differ
diff --git a/images/photos/box6_image.jpg b/images/photos/box6_image.jpg
new file mode 100644
index 000000000..ca7f184bc
Binary files /dev/null and b/images/photos/box6_image.jpg differ
diff --git a/images/photos/box8_image (1).jpg b/images/photos/box8_image (1).jpg
new file mode 100644
index 000000000..231274095
Binary files /dev/null and b/images/photos/box8_image (1).jpg differ
diff --git a/images/photos/electonics.jpg b/images/photos/electonics.jpg
new file mode 100644
index 000000000..f56bade87
Binary files /dev/null and b/images/photos/electonics.jpg differ
diff --git a/images/photos/fit.jpg b/images/photos/fit.jpg
new file mode 100644
index 000000000..a7b3d3e7e
Binary files /dev/null and b/images/photos/fit.jpg differ
diff --git a/images/photos/flag.jpeg b/images/photos/flag.jpeg
new file mode 100644
index 000000000..b7a83aadb
Binary files /dev/null and b/images/photos/flag.jpeg differ
diff --git a/images/photos/gitter.jpg b/images/photos/gitter.jpg
new file mode 100644
index 000000000..816b8c71f
Binary files /dev/null and b/images/photos/gitter.jpg differ
diff --git a/images/photos/hero.jpg b/images/photos/hero.jpg
new file mode 100644
index 000000000..7cdaba702
Binary files /dev/null and b/images/photos/hero.jpg differ
diff --git a/images/photos/phone.jpg b/images/photos/phone.jpg
new file mode 100644
index 000000000..90ee126d0
Binary files /dev/null and b/images/photos/phone.jpg differ
diff --git a/images/products/box1_image.jpg b/images/products/box1_image.jpg
new file mode 100644
index 000000000..f4aa14e41
Binary files /dev/null and b/images/products/box1_image.jpg differ
diff --git a/images/products/box2_image.jpg b/images/products/box2_image.jpg
new file mode 100644
index 000000000..d807dc459
Binary files /dev/null and b/images/products/box2_image.jpg differ
diff --git a/images/products/box3_image.jpg b/images/products/box3_image.jpg
new file mode 100644
index 000000000..300f1f328
Binary files /dev/null and b/images/products/box3_image.jpg differ
diff --git a/images/products/box5_image.jpg b/images/products/box5_image.jpg
new file mode 100644
index 000000000..4fe84c406
Binary files /dev/null and b/images/products/box5_image.jpg differ
diff --git a/images/products/box6_image.jpg b/images/products/box6_image.jpg
new file mode 100644
index 000000000..ca7f184bc
Binary files /dev/null and b/images/products/box6_image.jpg differ
diff --git a/images/products/box8_image (1).jpg b/images/products/box8_image (1).jpg
new file mode 100644
index 000000000..231274095
Binary files /dev/null and b/images/products/box8_image (1).jpg differ
diff --git a/images/products/electonics.jpg b/images/products/electonics.jpg
new file mode 100644
index 000000000..f56bade87
Binary files /dev/null and b/images/products/electonics.jpg differ
diff --git a/images/products/fit.jpg b/images/products/fit.jpg
new file mode 100644
index 000000000..a7b3d3e7e
Binary files /dev/null and b/images/products/fit.jpg differ
diff --git a/images/products/flag.jpeg b/images/products/flag.jpeg
new file mode 100644
index 000000000..b7a83aadb
Binary files /dev/null and b/images/products/flag.jpeg differ
diff --git a/images/products/gitter.jpg b/images/products/gitter.jpg
new file mode 100644
index 000000000..816b8c71f
Binary files /dev/null and b/images/products/gitter.jpg differ
diff --git a/images/products/phone.jpg b/images/products/phone.jpg
new file mode 100644
index 000000000..90ee126d0
Binary files /dev/null and b/images/products/phone.jpg differ
diff --git a/script/amazon.js b/script/amazon.js
new file mode 100644
index 000000000..4c72cbdc9
--- /dev/null
+++ b/script/amazon.js
@@ -0,0 +1,63 @@
+import {cart,addToCart,updateCartQuantity, calculateCartQuantity} from "../data/cart.js";
+import { products } from "../data/products.js";
+import { formatCurrency } from "./utils/money.js";
+let productsHTML = '';
+products.forEach((product) => {
+  productsHTML += `
+    <div class="product-container ">
+          <div class="product-image-container">
+            <img class="product-image"
+              src="${product.image}">
+          </div>
+          <div class="product-name limit-text-to-2-lines">
+           ${product.name}
+          </div>
+          <div class="product-rating-container">
+            <img class="product-rating-stars"
+              src="images/ratings/rating-${product.rating.stars * 10}.png">
+            <div class="product-rating-count link-primary">
+              ${
+                product.rating.count
+              }
+            </div>
+          </div>
+          <div class="product-price">
+            $${formatCurrency(product.priceCents)}
+          </div>
+          <div class="product-quantity-container">
+            <select class="js-quantity-selector-${product.id}">
+              <option selected value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+              <option value="7">7</option>
+              <option value="8">8</option>
+              <option value="9">9</option>
+              <option value="10">10</option>
+            </select>
+          </div>
+          <div class="product-spacer"></div>
+          <div class="added-to-cart js-added-to-cart-${product.id}">
+            <img src="images/icons/checkmark.png">
+            Added
+          </div>
+          <button class="add-to-cart-button button-primary js-add-to-cart" 
+          data-product-id="${product.id}">
+            Add to Cart
+          </button>
+        </div>
+  `;
+});
+document.querySelector('.js-products-grid').innerHTML = productsHTML;
+document.querySelectorAll('.js-add-to-cart').forEach((button)=>{
+    button.addEventListener('click',()=>{
+      const {productId} = button.dataset;
+      addToCart(productId);
+      updateCartQuantity(productId);      
+    });
+  });
+if (calculateCartQuantity() === 0 ) { 
+  document.querySelector('.js-cart-quantity').innerHTML = '';
+  } else { document.querySelector('.js-cart-quantity').innerHTML = calculateCartQuantity(); };
\ No newline at end of file
diff --git a/script/checkout.js b/script/checkout.js
new file mode 100644
index 000000000..ff8a09e88
--- /dev/null
+++ b/script/checkout.js
@@ -0,0 +1,125 @@
+import { cart,removeFromCart,
+  calculateCartQuantity,
+  updateQuantity} from "../data/cart.js";
+import { products } from "../data/products.js";
+import { formatCurrency } from "./utils/money.js";
+import dayjs from "https://unpkg.com/dayjs@1.11.10/esm/index.js";
+import {deliveryOptions} from '../data/deliveryOptions.js';
+let cartSummaryHtml = '';
+cart.forEach((cartItem)=>{
+  const productId = cartItem.productId;
+  let matchingProduct;
+  products.forEach((product)=>{
+    if(product.id === productId){
+      matchingProduct = product;
+    } 
+  });
+  const deliveryOptionId = cartItem.deliveryOptionId;
+  let deliveryOption = '';
+  deliveryOptions.forEach((option) => {
+    if(option.id === deliveryOptionId){
+      deliveryOption = option;
+    }
+  });
+  const dateString = dayjs().add(1,'days').format('dddd, MMMM D');
+  cartSummaryHtml += `
+    <div class="cart-item-container js-cart-item-container-${matchingProduct.id}">
+      <div class="delivery-date">
+        Delivery date: ${dateString}
+      </div>
+      <div class="cart-item-details-grid">
+        <img class="product-image"
+          src="${matchingProduct.image}">
+        <div class="cart-item-details">
+          <div class="product-name">
+            ${matchingProduct.name}
+          </div>
+          <div class="product-price">
+            $${formatCurrency(matchingProduct.priceCents)}
+          </div>
+          <div class="product-quantity">
+            <span>
+              Quantity: <span class="quantity-label js-quantity-label-${matchingProduct.id}">${cartItem.quantity}</span>
+            </span>
+            <span class="update-quantity-link js-update-link link-primary" data-product-id="${matchingProduct.id}">
+              Update
+            </span>
+            <input type = number ; class = "quantity-input js-quantity-input-${matchingProduct.id}"></input>
+            <span class = "save-quantity-link link-primary js-save-link" data-product-id="${matchingProduct.id}">save</span>
+            <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
+              Delete
+            </span>
+          </div>
+        </div>
+
+        <div class="delivery-options">
+          <div class="delivery-options-title">
+            Choose a delivery option:
+          </div>
+          ${deliveryOptionsHTML(matchingProduct,cartItem)}
+        </div>
+      </div>
+    </div>`
+});
+function deliveryOptionsHTML(matchingProduct,cartItem){
+  let html = '';
+  deliveryOptions.forEach((option) => {
+    const dateString = dayjs().add(option.deliveryDays,'days').format('dddd, MMMM D');
+    const priceString = option.priceCents === 0?'FREE':`$${formatCurrency(option.priceCents)} `;
+    const isChecked = option.id === cartItem.deliveryOptionsId;
+    html += `
+    <div class="delivery-option">
+      <input type="radio"
+      ${isChecked?'checked':''}
+        class="delivery-option-input"
+        name="delivery-option-${matchingProduct.id}">
+      <div>
+        <div class="delivery-option-date">
+         ${dateString}
+        </div>
+        <div class="delivery-option-price">
+        ${priceString} Shipping
+        </div>
+      </div>
+    </div>
+    `
+  });
+  return html;
+};
+document.querySelector('.js-order-summary').innerHTML = cartSummaryHtml;
+document.querySelectorAll('.js-delete-link').forEach((link)=>{
+  link.addEventListener('click',()=>{
+  const {productId} = link.dataset;
+  removeFromCart(productId);  
+  const container = document.querySelector(`.js-cart-item-container-${productId}`);
+  container.remove();
+  updateCartQuantity();
+  });
+});
+updateCartQuantity();
+function updateCartQuantity(){
+  const cartQuantity = calculateCartQuantity();
+document.querySelector('.js-return-to-home-link').innerHTML =`${cartQuantity} items`;
+};
+document.querySelectorAll('.js-update-link').forEach((link)=>{
+  link.addEventListener('click',()=>{
+  const {productId} = link.dataset;
+    document.querySelector(`.js-cart-item-container-${productId}`).classList.add('is-editing-quantity');
+    });
+  });
+  document.querySelectorAll('.js-save-link').forEach((link) => {
+    link.addEventListener('click',() => {
+      const {productId} = link.dataset;
+      const container = document.querySelector(`.js-cart-item-container-${productId}`);
+      container.classList.remove('is-editing-quantity');
+      const quantityInput = document.querySelector(`.js-quantity-input-${productId}`);
+      const newQuantity = Number(quantityInput.value);
+      if(newQuantity < 0 || newQuantity >= 1000){
+        alert('Quantity must be at least 0 and less than 1000');
+        return;
+      }
+      updateQuantity(productId,newQuantity);
+      const quantityLabel = document.querySelector(`.js-quantity-label-${productId}`);
+      quantityLabel.innerHTML = newQuantity;
+  });
+});
diff --git a/script/utils/money.js b/script/utils/money.js
new file mode 100644
index 000000000..f92724a60
--- /dev/null
+++ b/script/utils/money.js
@@ -0,0 +1,3 @@
+export function formatCurrency(priceCents){
+   return (priceCents / 100).toFixed(2);
+}
\ No newline at end of file
diff --git a/styles/pages/amazon.css b/styles/pages/amazon.css
index f6d386c45..35233ec10 100644
--- a/styles/pages/amazon.css
+++ b/styles/pages/amazon.css
@@ -98,6 +98,8 @@
 .product-name {
   height: 40px;
   margin-bottom: 5px;
+  font-weight: 600;
+  font-size: 15px;
 }
 
 .product-rating-container {
@@ -143,6 +145,9 @@
      opacity and make it visible. */
   opacity: 0;
 }
+.added-to-cart-visible{
+  opacity: 1;
+}
 
 .added-to-cart img {
   height: 20px;
diff --git a/styles/pages/checkout/checkout.css b/styles/pages/checkout/checkout.css
index 764bfa58d..da762de16 100644
--- a/styles/pages/checkout/checkout.css
+++ b/styles/pages/checkout/checkout.css
@@ -209,3 +209,21 @@
   margin-top: 11px;
   margin-bottom: 15px;
 }
+.quantity-input{
+  width: 30px;
+  height: 20px;
+  display: none;
+}
+.save-quantity-link{
+  display: none;
+}
+.is-editing-quantity .quantity-input,
+.is-editing-quantity .save-quantity-link{
+  display: initial;
+}
+.is-editing-quantity .quantity-lable{
+  display: none;
+}
+.is-editing-quantity .update-quantity-link{
+  display: none;
+}
\ No newline at end of file
