diff --git a/css/style.css b/css/style.css
index 30d6e01..1cdf277 100644
--- a/css/style.css
+++ b/css/style.css
@@ -64,4 +64,4 @@ h1,
 h2,
 .calculate-total {
   text-align: center;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 752a993..94b29f1 100644
--- a/index.html
+++ b/index.html
@@ -1,59 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="stylesheet" href="./css/style.css" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Root Cart</title>
-  </head>
-  <body>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
     <h1>Root Cart</h1>
+    
+    <!-- Cart Table -->
     <table id="cart">
-      <thead>
-        <tr>
-          <th>Product Name</th>
-          <th>Unit Price</th>
-          <th>Quantity</th>
-          <th>Subtotal</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="product">
-          <td class="name">
-            <span>Root Rubber Duck</span>
-          </td>
-          <td class="price">$<span>25.00</span></td>
-          <td class="quantity">
-            <input type="number" value="0" min="0" placeholder="Quantity" />
-          </td>
-          <td class="subtotal">$<span>0</span></td>
-          <td class="action">
-            <button class="btn btn-remove">Remove</button>
-          </td>
-        </tr>
-        <!-- Iteration 2: Add more products here -->
-      </tbody>
-      <tfoot>
-        <!-- <tr class="create-product">
-          <td>
-            <input type="text" placeholder="Product Name" />
-          </td>
-          <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
-          </td>
-          <td></td>
-          <td></td>
-          <td>
-            <button id="create" class="btn">Create Product</button>
-          </td>
-        </tr> -->
-      </tfoot>
+        <thead>
+            <tr>
+                <th>Product Name</th>
+                <th>Unit Price</th>
+                <th>Quantity</th>
+                <th>Subtotal</th>
+                <th>Action</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="product">
+                <td class="name">
+                    <span>Root Rubber Duck</span>
+                </td>
+                <td class="price">$<span>25.00</span></td>
+                <td class="quantity">
+                    <input type="number" value="0" min="0" placeholder="Quantity" />
+                </td>
+                <td class="subtotal">$<span>0</span></td>
+                <td class="action">
+                    <button class="btn btn-remove">Remove</button>
+                </td>
+            </tr>
+
+            <tr class="product">
+                <td class="name">
+                    <span>Root T-shirt</span>
+                </td>
+                <td class="price">$<span>15.00</span></td>
+                <td class="quantity">
+                    <input type="number" value="0" min="0" placeholder="Quantity" />
+                </td>
+                <td class="subtotal">$<span>0</span></td>
+                <td class="action">
+                    <button class="btn btn-remove">Remove</button>
+                </td>
+            </tr>
+          </tbody>
     </table>
     <p class="calculate-total">
-      <button id="calculate" class="btn btn-success">Calculate Prices</button>
+    <button id="calculate" class="btn btn-success">Calculate Prices</button>
+    <h2>Total: $<span id="total">0</span></h2>
     </p>
-    <h2 id="total-value">Total: $<span>0</span></h2>
-    <script type="text/javascript" src="./js/index.js"></script>
-  </body>
-</html>
+    
+    <!-- Form to Add New Products -->
+    <h2>Add a new product</h2>
+    <form id="add-product-form">
+        <label for="product-name">Product Name:</label>
+        <input type="text" id="product-name" required placeholder="Enter product name" />
+
+        <label for="product-price">Unit Price:</label>
+        <input type="number" id="product-price" required placeholder="Enter unit price" min="0.01" step="0.01" />
+
+        <button type="submit">Add Product</button>
+    </form>
+
+    
+
+    <script src="js/index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 75405d6..265a80a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,41 +2,81 @@
 
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
+  const price = product.querySelector('.price span').innerText;
+  const quantity = product.querySelector('.quantity input').value;
+  const subtotal = parseFloat(price) * parseInt(quantity);
+  
+  const subtotalElement = product.querySelector('.subtotal span');
+  subtotalElement.innerText = subtotal.toFixed(2);
+
+  return subtotal;
 
-  //... your code goes here
 }
 
 function calculateAll() {
-  // code in the following two lines is added just for testing purposes.
-  // it runs when only iteration 1 is completed. at later point, it can be removed.
-  const singleProduct = document.querySelector('.product');
-  updateSubtotal(singleProduct);
-  // end of test
+  const products = document.getElementsByClassName('product');
+  let total = 0;
 
-  // ITERATION 2
-  //... your code goes here
+  for (let product of products) {
+      total += updateSubtotal(product);
+  }
 
-  // ITERATION 3
-  //... your code goes here
+  document.getElementById('total').innerText = total.toFixed(2);
 }
 
 // ITERATION 4
 
 function removeProduct(event) {
-  const target = event.currentTarget;
-  console.log('The target in remove is:', target);
-  //... your code goes here
+  const productRow = event.currentTarget.parentNode.parentNode;
+  productRow.remove();
+  calculateAll(); // Update total after removing a product
 }
 
 // ITERATION 5
 
 function createProduct() {
-  //... your code goes here
+  event.preventDefault();
+  
+  const nameInput = document.getElementById('product-name');
+  const priceInput = document.getElementById('product-price');
+  
+  const productName = nameInput.value;
+  const productPrice = parseFloat(priceInput.value).toFixed(2);
+  
+  const tableBody = document.querySelector('#cart tbody');
+  
+  const newRow = document.createElement('tr');
+  newRow.classList.add('product');
+  
+  newRow.innerHTML = `
+      <td class="name"><span>${productName}</span></td>
+      <td class="price">$<span>${productPrice}</span></td>
+      <td class="quantity"><input type="number" value="0" min="0" placeholder="Quantity" /></td>
+      <td class="subtotal">$<span>0</span></td>
+      <td class="action"><button class="btn btn-remove">Remove</button></td>
+  `;
+  
+  // Add the new product row to the cart
+  tableBody.appendChild(newRow);
+
+  // Add event listener for the new remove button
+  newRow.querySelector('.btn-remove').addEventListener('click', removeProduct);
+
+  // Clear input fields after adding
+  nameInput.value = '';
+  priceInput.value = '';
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
-});
+  const removeButtons = document.querySelectorAll('.btn-remove');
+  removeButtons.forEach(button => {
+      button.addEventListener('click', removeProduct);
+  });
+
+  // Event listener for adding new products
+  const addProductForm = document.getElementById('add-product-form');
+  addProductForm.addEventListener('submit', addProduct);
+});
\ No newline at end of file

Product Name	Unit Price	Quantity	Subtotal	Action
- Root Rubber Duck -	$25.00	- -	$0	- -
Product Name	Unit Price	Quantity	Subtotal	Action
+ Root Rubber Duck +	$25.00	+ +	$0	+ +
+ Root T-shirt +	$15.00	+ +	$0	+ +