diff --git a/index.css b/index.css
index 597993c..268f08c 100644
--- a/index.css
+++ b/index.css
@@ -11,7 +11,7 @@ body {
 }
 
 header {
-    background-color: #007bff;
+    background-color: hsl(210, 38%, 67%);
     color: #fff;
     text-align: center;
     padding: 1rem 0;
diff --git a/index.html b/index.html
index b277f54..566e6b9 100644
--- a/index.html
+++ b/index.html
@@ -13,31 +13,31 @@ <h1>🍝 Welcome to CodeCuisine 🥖</h1>
     </header>
     <main>
         <section id="menu">
-            <!-- Menu items will be dynamically generated here -->
+    
             <h2>Starters</h2>
             <ul>
-               <li onclick="addToOrder('Garlic Bread', 30)">Garlic Bread</li>
-               <li onclick="addToOrder('Bruschetta', 30)">Bruschetta</li>
+               <li onclick="addToOrder('Garlic Bread')">Garlic Bread</li>
+               <li onclick="addToOrder('Bruschetta')">Bruschetta</li>
             </ul>
              
             <h2>Main Courses</h2>
             <ul>
-               <li onclick="addToOrder('Margherita Pizza', 80)">Margherita Pizza</li>
-               <li onclick="addToOrder('Spaghetti Carbonara', 90)">Spaghetti Carabona</li>
+               <li onclick="addToOrder('Margherita Pizza')">Margherita Pizza</li>
+               <li onclick="addToOrder('Spaghetti Carbonara')">Spaghetti Carabona</li>
             </ul>
 
             <h2>Desserts</h2>
             <ul>
-               <li onclick="addToOrder('Tiramisu', 40)">Tiramasu</li>
-               <li onclick="addToOrder('Cheesecake', 50)">Cheescake</li>
+               <li onclick="addToOrder('Tiramisu')">Tiramasu</li>
+               <li onclick="addToOrder('Cheesecake')">Cheescake</li>
             </ul>
         </section>
         <section id="order">
             <h2>Your Order</h2>
             <ul id="order-items">
-                <!-- Order items will be displayed here -->
+            
             </ul>
-            <p>Total: R<span id="order-total">0.00</span></p>
+            <p><span id="order-total">0.00</span></p>
         </section>
     </main>
     <footer>
diff --git a/index.js b/index.js
index 9dc986d..45c1f91 100644
--- a/index.js
+++ b/index.js
@@ -1,118 +1,59 @@
-// Sample menu data (Consider fetching this data from a server in a real-world scenario)
 const menu = {
     Starters: ["Garlic Bread", "Bruschetta"],
     MainCourses: ["Margherita Pizza", "Spaghetti Carbonara"],
     Desserts: ["Tiramisu", "Cheesecake"]
 };
-
-//function to display menu items by category
 function displayMenuItems(menu) {
-    // Get the menu container element from the HTML
-    const menuContainer = document.querySelector('.menu');
-
-    // Loop through each category and its items in the menu object
-    for (const category in menu) {
-        // Create an element to represent the category
-        const categoryElement = document.createElement('h2');
-        // Set the text content of the category element to the category name
-        categoryElement.textContent = category;
-        // Append the category element to the menu container
-        menuContainer.appendChild(categoryElement);
-
-        // Create an element to represent a list of items
-        const itemList = document.createElement('ul');
-
-        // Loop through the items in the category and create list items
-        menu[category].forEach(item => {
-            // Create a list item element
-            const listItem = document.createElement('li');
-            // Set the text content of the list item element to the item name
+    const menuContainer = document.getElementById("menu");
+    menuContainer.innerHTML = "";
+    
+    for (const [category, items] of Object.entries(menu)) {
+            const categoryElement = document.createElement("h2");
+            categoryElement.textContent = category;
+            menuContainer.appendChild(categoryElement);
+            const listElement = document.createElement("ul");
+
+        items.forEach(item => {
+            const listItem = document.createElement("li");
             listItem.textContent = item;
 
-            // Attach a click event listener to the list item to add it to the order
             listItem.addEventListener('click', () => {
-                addToOrder(item, getPrice(item));
+                addToOrder(item);
             });
 
-            // Append the list item to the list of items
-            itemList.appendChild(listItem);
+            listElement.appendChild(listItem);
         });
+            menuContainer.appendChild(listElement);
+        }
+};
+function addToOrder(itemName) {
+    console.log(`${itemName} added to the order.`);
 
-        // Append the list of items to the menu container
-        menuContainer.appendChild(itemList);
-    }
-}
-
-// Function to get the price of an item (for simplicity, hardcoded here)
-function getPrice(item) {
-    const prices = {
-        "Garlic Bread": 25,
-        "Bruschetta": 30,
-        "Margherita Pizza": 80,
-        "Spaghetti Carbonara": 90,
-        "Tiramisu": 40,
-        "Cheesecake": 50
-    };
-    return prices[item];
-}
-
-// Function to add an item to the order and update the total
-function addToOrder(item, price) {
-    const orderList = document.getElementById('order-list');
-    const totalAmount = document.getElementById('total-amount');
-
-    // Add item to order list
-    const listItem = document.createElement('li');
-    listItem.textContent = `${item} - R${price.toFixed(2)}`;
-    orderList.appendChild(listItem);
-
-    // Update total
-    total += price;
-    totalAmount.textContent = total.toFixed(2);
-}
-
-// Initialize menu display
-displayMenuItems(menu);
-
-let total = 0;
-
-            
-
-
-function addToOrder(itemName, itemPrice) {
-    // Get the order items list and the order total element from the HTML
-    const orderItemsList = document.getElementById('orderItems'); // Assuming an element with ID 'orderItems'
-    const orderTotalElement = document.getElementById('orderTotal'); // Assuming an element with ID 'orderTotal'
-
-    // Create a list item for the order
-    const listItem = document.createElement('li');
+    const orderItemsList = document.getElementById("order-items");
+    const orderTotalElement = document.getElementById("order-total");
 
-    // Set the text content of the list item to the item name
-    listItem.textContent = `${itemName} - $${itemPrice.toFixed(2)}`;
+    const listItem = document.createElement("li");
+    listItem.textContent = itemName;
 
-    // Append the list item to the order items list
     orderItemsList.appendChild(listItem);
 
-    // Calculate and update the total price
-    let currentTotal = parseFloat(orderTotalElement.textContent.replace('Total: $', ''));
+    const itemPrices = {
+        "Garlic Bread": 50,
+        "Bruschetta": 30,
+        "Margherita Pizza": 100,
+        "Spaghetti Carbonara": 80,
+        "Tiramisu": 55,
+        "Cheesecake": 45
+    };
+    const itemPrice = itemPrices[itemName] || 0;
+
+    let currentTotal = parseFloat(orderTotalElement.textContent.replace('Total: R', '')) || 0;
     currentTotal += itemPrice;
 
-    // Update the text content of the order total element with the new total
-    orderTotalElement.textContent = `Total: $${currentTotal.toFixed(2)}`;
+    orderTotalElement.textContent = `Total: R${currentTotal.toFixed(2)}`;
 }
+function initMenuSystem(menu) {
 
-// Function to display menu items and initialize event listeners
-function displayMenuItems(menu) {
-    const menuElement = document.getElementById('menu'); // Assuming an element with ID 'menu'
-
-    menu.forEach(item => {
-        const menuItem = document.createElement('div');
-        menuItem.textContent = `${item.name} - $${item.price.toFixed(2)}`;
-
-        // Add an event listener to add the item to the order when clicked
-        menuItem.addEventListener('click', () => addToOrder(item.name, item.price));
-
-        // Append the menu item to the menu element
-        menuElement.appendChild(menuItem);
-    });
-}
\ No newline at end of file
+    displayMenuItems(menu);
+}
+initMenuSystem(menu);
\ No newline at end of file