diff --git "a/templates/menu.html" "b/templates/menu.html"
--- "a/templates/menu.html"
+++ "b/templates/menu.html"
@@ -39,7 +39,6 @@
             transition: opacity 0.3s ease-in-out;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
-      
         .menu-card.visible {
             opacity: 1;
         }
@@ -60,12 +59,11 @@
             opacity: 1;
         }
         .menu-card img {
-            width: 100%;              /* Ensure image takes up full width */
-            height: 200px;            /* Set fixed height */
-            object-fit: cover;        /* Ensure the image fills the container without distortion */
-            object-position: center;  /* Center the image within the container */
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            object-position: center;
         }
-
         .menu-card:hover .menu-video {
             opacity: 1;
             transform: scale(1.05);
@@ -506,26 +504,23 @@
         #filter-form {
             display: flex;
             flex-direction: column;
-            align-items: flex-start; /* Align to the left */
-            justify-content: flex-start; /* Align to the top */
+            align-items: flex-start;
+            justify-content: flex-start;
             margin-bottom: 20px;
-            margin-left: 10px; /* Added 10px gap to the left */
+            margin-left: 10px;
         }
-        
         .form-label {
             font-size: 1.2rem;
             font-weight: 600;
             color: #333;
             margin-bottom: 10px;
         }
-        
         .toggle-container {
             display: flex;
             align-items: center;
             gap: 10px;
             margin: 8px 0;
         }
-        
         .custom-toggle {
             appearance: none;
             width: 48px;
@@ -536,11 +531,9 @@
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
-        
         .custom-toggle:checked {
-            background: linear-gradient(45deg, #32CD32, #3CB371); /* Changed to green color when checked */
+            background: linear-gradient(45deg, #32CD32, #3CB371);
         }
-        
         .custom-toggle::before {
             content: '';
             position: absolute;
@@ -553,17 +546,14 @@
             transition: transform 0.3s ease;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
-        
         .custom-toggle:checked::before {
-            transform: translateX(24px); /* Moves the toggle to the right */
+            transform: translateX(24px);
         }
-        
         .toggle-container label {
             font-size: 1rem;
             color: #333;
             cursor: pointer;
         }
-
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -1088,7 +1078,7 @@
                 font-size: 0.9rem;
             }
         }
-         .chat-container {
+        .chat-container {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
@@ -1174,8 +1164,8 @@
         }
         .ingredients-list, .menu-items-list, .customization-ingredients-list {
             display: flex;
-            flex-wrap: nowrap;  /* Ensure items stay in a single row */
-            overflow-x: auto;  /* Allow horizontal scrolling */
+            flex-wrap: nowrap;
+            overflow-x: auto;
             padding: 10px;
             margin: 10px 0;
             background-color: #f5f7fa;
@@ -1184,8 +1174,8 @@
             scroll-behavior: smooth;
         }
         .ingredient-item, .menu-item {
-            flex: 0 0 auto;  /* Ensure items don't stretch */
-            width: 200px;  /* Set a fixed width for each item */
+            flex: 0 0 auto;
+            width: 200px;
             background-color: #ffffff;
             border: 1px solid #e0e0e0;
             border-radius: 10px;
@@ -1351,11 +1341,11 @@
                 padding: 8px 15px;
             }
             .ingredients-list, .menu-items-list, .customization-ingredients-list {
-                flex-direction: row;  /* Keep the items in a row on mobile */
+                flex-direction: row;
                 gap: 10px;
             }
             .ingredient-item, .menu-item {
-                 flex: 0 0 150px;  /* Adjust the item width to fit smaller screens */
+                flex: 0 0 150px;
             }
             .ingredient-item img, .menu-item img {
                 height: 100px;
@@ -1402,6 +1392,112 @@
                 height: 110px;
             }
         }
+        /* Mic Modal Styling */
+        #micModal .modal-dialog {
+            max-width: 300px;
+            margin: 1.75rem auto;
+        }
+        #micModal .modal-content {
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            background-color: #fff;
+            text-align: center;
+        }
+        #micModal .modal-header {
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
+            padding: 12px 15px;
+            border-bottom: none;
+        }
+        #micModal .modal-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: #fff;
+            margin: 0 auto;
+        }
+        #micModal .modal-body {
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px;
+            min-height: 200px;
+        }
+        #micModal .modal-body i#mic-icon-animation {
+            font-size: 2.5rem;
+            color: #007bff;
+            animation: pulse 2s infinite;
+        }
+        #micModal .modal-body p#mic-status {
+            font-size: 1.1rem;
+            color: #333;
+            margin: 0;
+            transition: opacity 0.3s ease;
+        }
+        #micModal .modal-body #mic-item-image {
+            max-height: 100px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            transition: opacity 0.3s ease;
+        }
+        #micModal .modal-body #mic-item-name {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: #333333;
+            margin-bottom: 10px;
+            transition: opacity 0.3s ease;
+        }
+        #micModal .modal-body #mic-item-details.show {
+            animation: fadeIn 0.3s ease;
+        }
+        #micModal .modal-footer {
+            padding: 15px;
+            border-top: none;
+            justify-content: center;
+        }
+        #micModal .modal-footer .btn-secondary {
+            background-color: #6c757d;
+            border-color: #6c757d;
+            padding: 10px 20px;
+            font-size: 1rem;
+            border-radius: 8px;
+        }
+        #micModal .modal-footer .btn-secondary:hover {
+            background-color: #5a6268;
+            border-color: #5a6268;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+        @media (max-width: 576px) {
+            #micModal .modal-dialog {
+                max-width: 90%;
+            }
+            #micModal .modal-body i {
+                font-size: 2rem;
+            }
+            #micModal .modal-body p {
+                font-size: 1rem;
+            }
+            #micModal .modal-body img {
+                max-height: 80px;
+                margin-bottom: 8px;
+            }
+            #micModal .modal-body h5 {
+                font-size: 1rem;
+                margin-bottom: 8px;
+            }
+            #micModal .modal-footer .btn-secondary {
+                padding: 8px 15px;
+                font-size: 0.9rem;
+            }
+        }
     </style>
 </head>
 <body>
@@ -1424,7 +1520,7 @@
         </div>
     </div>
 
-   <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
+    <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
             <!-- Veg Only Toggle -->
@@ -1444,20 +1540,19 @@
         </div>
     </form>
 
-
     <div class="container mt-4">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
-                  <div class="chat-container">
-                      <div class="chat-header">🍳 Chef Bot</div>
-                      <div class="chat-messages" id="chatMessages">
-                          <!-- Initial message will be set by JavaScript based on session -->
-                      </div>
-                      <div class="chat-input">
-                          <input type="text" id="userInput" placeholder="Type your name or message...">
-                          <button onclick="sendMessage()">Send</button>
-                      </div>
-                  </div>
+                <div class="chat-container">
+                    <div class="chat-header">🍳 Chef Bot</div>
+                    <div class="chat-messages" id="chatMessages">
+                        <!-- Initial message will be set by JavaScript based on session -->
+                    </div>
+                    <div class="chat-input">
+                        <input type="text" id="userInput" placeholder="Type your name or message...">
+                        <button onclick="sendMessage()">Send</button>
+                    </div>
+                </div>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
@@ -1599,1197 +1694,748 @@
                     </div>
                     <div class="quantity-controls">
                         <button type="button" class="btn" id="soft-drink-decrease" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-</button>
-                        <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly aria-label="Selected quantity">
+                        <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly>
                         <button type="button" class="btn" id="soft-drink-increase" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+</button>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <div class="quantity-controls-footer">
-                        <button type="button" class="btn" id="soft-drink-decrease-footer" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-1</button>
-                        <button type="button" class="btn" id="soft-drink-increase-footer" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+1</button>
+                        <button type="button" class="btn" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-</button>
+                        <button type="button" class="btn" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+</button>
+                    </div>
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal for Microphone Input -->
+    <div class="modal fade" id="micModal" tabindex="-1" aria-labelledby="micModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="micModalLabel">Speak Now</h5>
+                </div>
+                <div class="modal-body">
+                    <i class="bi bi-mic" id="mic-icon-animation"></i>
+                    <p id="mic-status" class="mt-3">Say the name of a menu item...</p>
+                    <div id="mic-item-details" style="display: none;">
+                        <img id="mic-item-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Spoken Item Image">
+                        <h5 id="mic-item-name" class="fw-bold text-center"></h5>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" aria-label="Add soft drink to cart">Add to Cart</button>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" id="stopMicBtn" onclick="stopSpeechRecognition()">Stop</button>
                 </div>
             </div>
         </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Bootstrap JS and Popper.js -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
     <script>
-        let isProcessingRequest = false;
-        let currentSoftDrinkButton = null;
-        let baseItemPrice = 0;
+        // Menu items array for client-side filtering
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
                     {
                         name: "{{ item.Name | default('Unnamed Item') }}",
-                        section: "{{ item.Section__c | default(section) }}"
+                        section: "{{ item.Section__c | default(section) }}",
+                        price: "{{ item.Price__c | default('0.00') }}",
+                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}",
+                        image2: "{{ item.Image2__c | default(item.Image1__c) }}",
+                        description: "{{ item.Description__c | default('No description') }}",
+                        category: "{{ selected_category }}"
                     },
                 {% endfor %}
             {% endfor %}
         ];
-        const ingredientsList = [
-            "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
-            "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
-            "Chili Sauce", "Coconut Milk", "Coriander Powder", "Cornflour", "Cream", "Cumin Powder",
-            "Cumin Seeds", "Curd (Yogurt)", "Curry Leaves", "Fish (e.g., King Fish or Salmon)",
-            "Fresh Coriander Leaves", "Garam Masala", "Garlic", "Ghee (Clarified Butter)", "Ginger",
-            "Ginger-Garlic Paste", "Goat Meat (Mutton)", "Green Chilies", "Honey",
-            "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree", "Mint Leaves",
-            "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mixed Vegetables (Carrot, Peas, Potato)",
-            "Mustard Seeds", "Mutton (Goat Meat)", "Oil", "Oil (for frying)", "Onion",
-            "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
-            "Rice Flour", "Saffron", "Salt", "Soy Sauce", "Spring Onion", "Tamarind (for sourness)",
-            "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
-            "Whole Wheat Flour", "Yogurt (Curd)"
-        ];
-        function addToCartLocalStorage(payload) {
-            let cart = JSON.parse(localStorage.getItem('cart')) || [];
-            const existingItem = cart.find(item => 
-                item.itemName === payload.itemName && 
-                item.instructions === payload.instructions && 
-                JSON.stringify(item.addons) === JSON.stringify(payload.addons)
-            );
-            if (existingItem) {
-                existingItem.quantity = payload.quantity;
-            } else {
-                cart.push(payload);
-            }
-            localStorage.setItem('cart', JSON.stringify(cart));
-            return cart;
-        }
-        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
-            let cart = JSON.parse(localStorage.getItem('cart')) || [];
-            const itemIndex = cart.findIndex(item => 
-                item.itemName === itemName && 
-                item.instructions === instructions && 
-                JSON.stringify(item.addons) === JSON.stringify(addons)
-            );
-            if (itemIndex !== -1) {
-                if (quantityToRemove >= cart[itemIndex].quantity) {
-                    cart.splice(itemIndex, 1);
-                } else {
-                    cart[itemIndex].quantity -= quantityToRemove;
-                }
-            }
-            localStorage.setItem('cart', JSON.stringify(cart));
-            return cart;
-        }
-        function getCartLocalStorage() {
-            return JSON.parse(localStorage.getItem('cart')) || [];
-        }
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
-        function updateModalPrice() {
-            const selectedAddOns = Array.from(
-                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-            ).map(addon => parseFloat(addon.getAttribute('data-price')) || 0);
-            const totalAddOnPrice = selectedAddOns.reduce((sum, price) => sum + price, 0);
-            const totalPrice = baseItemPrice + totalAddOnPrice;
-            document.getElementById('modal-price').innerText = `$${totalPrice.toFixed(2)}`;
-        }
-        function updateSoftDrinkQuantity(delta) {
-            const quantityInput = document.getElementById('soft-drink-quantity');
-            let currentQuantity = parseInt(quantityInput.value) || 1;
-            currentQuantity = Math.max(1, currentQuantity + delta);
-            quantityInput.value = currentQuantity;
-        }
-        function showSoftDrinkModal(button) {
-            currentSoftDrinkButton = button;
-            const buttonContainer = button.closest('.button-container');
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = buttonContainer.getAttribute('data-item-price');
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            
-            document.getElementById('soft-drink-name').textContent = itemName;
-            document.getElementById('soft-drink-price').textContent = `${itemPrice}`;
-            document.getElementById('soft-drink-quantity').value = '1';
-            document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
-            
-            const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
-            modal.show();
-        }
-        function addSoftDrinkToCart() {
-            if (!currentSoftDrinkButton) return;
-            
-            const buttonContainer = currentSoftDrinkButton.closest('.button-container');
-            const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
-            
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = buttonContainer.getAttribute('data-item-section');
-            const selectedCategory = buttonContainer.getAttribute('data-item-category');
-            
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: [],
-                instructions: '',
-                quantity: quantity
-            };
-            
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                modal.hide();
-            });
-        }
-        function updateCartUI(cart) {
-            if (!Array.isArray(cart)) {
-                console.error('Invalid cart data:', cart);
-                return;
-            }
-            let totalQuantity = 0;
-            cart.forEach(item => {
-                totalQuantity += item.quantity;
-            });
-            const cartItemCount = document.getElementById('cart-item-count');
-            if (cartItemCount) {
-                cartItemCount.innerText = totalQuantity;
-                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
-            }
-        }
-
-
-        window.most_common_addons = {{ most_common_addons | tojson }};
-        console.log("Most common add-ons: ", window.most_common_addons);
-        function showItemDetails(name, price, image, description, section, selectedCategory) {
-            document.getElementById('modal-name').innerText = name;
-            baseItemPrice = parseFloat(price) || 0;
-            document.getElementById('modal-price').innerText = `$${baseItemPrice.toFixed(2)}`;
-            const modalImg = document.getElementById('modal-img');
-            modalImg.src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('addons-list').innerHTML = '';
-            document.getElementById('addons-list').classList.add('addon-loading');
-            document.getElementById('modal-instructions').value = '';
-            const modalSectionEl = document.getElementById('modal-section');
-            modalSectionEl.setAttribute('data-section', section);
-            modalSectionEl.setAttribute('data-category', selectedCategory);
-            document.getElementById('quantityInput').value = 1;
-            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
-                .then(response => response.json())
-                .then(data => {
-                    const addonsList = document.getElementById('addons-list');
-                    addonsList.classList.remove('addon-loading');
-                    addonsList.innerHTML = '';
-                    if (!data.success || !data.addons || data.addons.length === 0) {
-                        addonsList.innerHTML = '<p>No customization options available.</p>';
-                        return;
-                    }
-                    data.addons.forEach(addon => {
-                        const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section');
-                        const title = document.createElement('h6');
-                        title.innerText = addon.name;
-                        sectionDiv.appendChild(title);
-                        const optionsContainer = document.createElement('div');
-                        optionsContainer.classList.add('addon-options');
-                        addon.options.forEach((option, index) => {
-                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                            const listItem = document.createElement('div');
-                            listItem.classList.add('form-check');
-                            listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                       data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}"
-                                       aria-label="Select ${option} for ${addon.name}">
-                                <label class="form-check-label" for="${optionId}">
-                                    ${option} ${addon.extra_charge ? `<span class="extra-charge">($${addon.extra_charge_amount.toFixed(2)})</span>` : ''}
-                                </label>
-                            `;
-                            optionsContainer.appendChild(listItem);
-                        });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
-                    const addonSections = addonsList.querySelectorAll('.addon-section');
-                    addonSections.forEach(section => {
-                        const title = section.querySelector('h6');
-                        const options = section.querySelector('.addon-options');
-                        title.addEventListener('click', () => {
-                            section.classList.toggle('collapsed');
-                            options.classList.toggle('collapsed');
-                        });
-                    });
-                    document.querySelectorAll('.addon-option').forEach(checkbox => {
-                        checkbox.addEventListener('change', updateModalPrice);
-                    });
-                    document.querySelectorAll('.addon-option').forEach(checkbox => {
-                        checkbox.addEventListener('change', function () {
-                            const groupName = this.getAttribute('data-group');
-                            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
-                            if (!isMultiSelectGroup && this.checked) {
-                                document.querySelectorAll(`.addon-option[data-group="${groupName}"]`).forEach(otherCheckbox => {
-                                    if (otherCheckbox !== this) {
-                                        otherCheckbox.checked = false;
-                                    }
-                                });
-                            }
-                        });
-                    });
-                    // Pre-select the highest-count spice level
-                    if (window.most_common_addons && window.most_common_addons.length > 0) {
-                        const checkboxes = document.querySelectorAll('.addon-option');
-                        const categorySelection = {
-                            "Select Spice Level": null,
-                            "Choose Spice Level": null,
-                            "Raita/Sides": [],
-                        };
-                        // First pass: Find and select the highest-count spice level
-                        for (let spice of window.most_common_addons) {
-                            const isSpiceLevel = ["Mild", "Medium", "Spicy", "Extra Spicy"].includes(spice); // Define valid spice levels
-                            if (isSpiceLevel) {
-                                checkboxes.forEach(checkbox => {
-                                    const checkboxName = checkbox.getAttribute('data-name').trim();
-                                    const checkboxGroup = checkbox.getAttribute('data-group');
-                                    if ((checkboxGroup === "Select Spice Level" || checkboxGroup === "Choose Spice Level") &&
-                                        checkboxName === spice && categorySelection[checkboxGroup] === null) {
-                                        console.log(`Pre-selecting highest-count spice level: ${checkboxName}`);
-                                        checkbox.checked = true;
-                                        categorySelection[checkboxGroup] = checkboxName;
-                                    }
-                                });
-                                if (categorySelection["Select Spice Level"] || categorySelection["Choose Spice Level"]) break; // Stop after selecting the first spice
-                            }
+
+        // Lazy load videos
+        document.addEventListener('DOMContentLoaded', function () {
+            const videos = document.querySelectorAll('.menu-video');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const video = entry.target;
+                        const src = video.getAttribute('data-src');
+                        if (src) {
+                            video.src = src;
+                            video.classList.add('loaded');
                         }
-                        // Second pass: Select other non-spice add-ons (e.g., Raita/Sides)
-                        checkboxes.forEach(checkbox => {
-                            const checkboxName = checkbox.getAttribute('data-name').trim();
-                            const checkboxGroup = checkbox.getAttribute('data-group');
-                            if (checkboxGroup === "Raita/Sides" && window.most_common_addons.includes(checkboxName)) {
-                                console.log(`Pre-selecting add-on: ${checkboxName}`);
-                                checkbox.checked = true;
-                                categorySelection["Raita/Sides"].push(checkboxName);
-                            }
-                        });
+                        observer.unobserve(video);
                     }
-                })
-                .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').classList.remove('addon-loading');
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
-        }
-        function addToCartFromModal() {
-            if (isProcessingRequest) return;
-            isProcessingRequest = true;
-            const modalSectionEl = document.getElementById('modal-section');
-            const section = modalSectionEl.getAttribute('data-section');
-            const selectedCategory = modalSectionEl.getAttribute('data-category');
-            const itemName = document.getElementById('modal-name').innerText;
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0;
-            const itemImage = document.getElementById('modal-img').src;
-            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-            const instructions = document.getElementById('modal-instructions').value;
-            const selectedAddOns = Array.from(
-                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-            ).map(addon => ({
-                name: addon.getAttribute('data-name'),
-                price: parseFloat(addon.getAttribute('data-price')) || 0
-            }));
-            if (!itemName || isNaN(itemPrice) || !section || !itemImage || quantity < 1) {
-                console.error('Invalid cart item data:', { itemName, itemPrice, section, itemImage, quantity });
-                alert('Invalid item data. Please try again.');
-                isProcessingRequest = false;
-                return;
-            }
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: selectedAddOns,
-                instructions: instructions,
-                quantity: quantity
-            };
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                    modal.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                    modal.hide();
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                modal.hide();
-            })
-            .finally(() => {
-                isProcessingRequest = false;
+            }, { threshold: 0.1 });
+
+            videos.forEach(video => {
+                observer.observe(video);
             });
-        }
-        function handleToggle(source) {
-            const form = document.getElementById("filter-form");
-            const veg = document.getElementById("veg-toggle");
-            const custom = document.getElementById("category-CustomizedDish");
-            if (source === 'veg') {
-                if (veg.checked) {
-                    custom.checked = false;
-                }
-            } else if (source === 'custom') {
-                if (custom.checked) {
-                    veg.checked = false;
-                }
-            }
-            if (!custom.checked && !veg.checked) {
-                custom.checked = false;
-            }
-            form.submit();
-        }
-        
 
+            // Search functionality
+            const searchBar = document.getElementById('searchBar');
+            searchBar.addEventListener('input', function () {
+                const searchTerm = this.value.toLowerCase();
+                const menuCards = document.querySelectorAll('.menu-card');
+                menuCards.forEach(card => {
+                    const itemName = card.getAttribute('data-item-name').toLowerCase();
+                    const itemSection = card.getAttribute('data-item-section').toLowerCase();
+                    if (itemName.includes(searchTerm) || itemSection.includes(searchTerm)) {
+                        card.style.display = '';
+                        card.classList.add('visible');
+                    } else {
+                        card.style.display = 'none';
+                        card.classList.remove('visible');
+                    }
+                });
+            });
 
-            document.addEventListener('DOMContentLoaded', function () {
-            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            // Toggle details
+            document.querySelectorAll('.toggle-details').forEach(link => {
+                link.addEventListener('click', function () {
+                    const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
+                    const details = document.getElementById(`details-${itemName}`);
+                    if (details.classList.contains('show')) {
+                        details.classList.remove('show');
+                        this.textContent = 'Show Details';
+                    } else {
+                        details.classList.add('show');
+                        this.textContent = 'Hide Details';
+                    }
+                });
+            });
+
+            // Avatar dropdown toggle
+            const avatarIcon = document.querySelector('.avatar-icon');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
-                event.stopPropagation();
+            avatarIcon.addEventListener('click', function () {
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
+
+            // Close dropdown when clicking outside
             document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
+                if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
                     dropdownMenu.style.display = 'none';
                 }
             });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
-                });
+
+            // Show item details in modal
+            window.showItemDetails = function (name, price, image, description, section, category) {
+                document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+                document.getElementById('modal-name').textContent = name;
+                document.getElementById('modal-price').textContent = `$${price}`;
+                document.getElementById('modal-description').textContent = description;
+                document.getElementById('modal-section').dataset.section = section;
+                document.getElementById('modal-section').dataset.category = category;
+                document.getElementById('quantityInput').value = 1;
+
+                const addonsList = document.getElementById('addons-list');
+                addonsList.classList.add('addon-loading');
+                addonsList.innerHTML = '';
+
+                fetch(`/get_addons?name=${encodeURIComponent(name)}&section=${encodeURIComponent(section)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        addonsList.classList.remove('addon-loading');
+                        if (data.addons && data.addons.length > 0) {
+                            data.addons.forEach(addon => {
+                                const addonSection = document.createElement('div');
+                                addonSection.className = 'addon-section';
+                                addonSection.innerHTML = `
+                                    <h6>${addon.name}</h6>
+                                    <div class="addon-options">
+                                        ${addon.options.map(option => `
+                                            <div class="form-check">
+                                                <label class="form-check-label">
+                                                    ${option.name} ${option.extra_charge ? `<span class="extra-charge">+$${option.extra_charge.toFixed(2)}</span>` : ''}
+                                                </label>
+                                                <input type="${addon.type === 'single' ? 'radio' : 'checkbox'}" 
+                                                       name="${addon.name}" 
+                                                       value="${option.name}" 
+                                                       class="form-check-input" 
+                                                       data-extra-charge="${option.extra_charge || 0}">
+                                            </div>
+                                        `).join('')}
+                                    </div>
+                                `;
+                                addonsList.appendChild(addonSection);
+
+                                const header = addonSection.querySelector('h6');
+                                const options = addonSection.querySelector('.addon-options');
+                                header.addEventListener('click', () => {
+                                    options.classList.toggle('collapsed');
+                                    addonSection.classList.toggle('collapsed');
+                                });
+                            });
+                        } else {
+                            addonsList.innerHTML = '<p>No addons available.</p>';
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching addons:', error);
+                        addonsList.classList.remove('addon-loading');
+                        addonsList.innerHTML = '<p>Error loading addons.</p>';
+                    });
+            };
+
+            // Quantity controls for item modal
+            document.getElementById('increaseQuantity').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('quantityInput').value);
+                document.getElementById('quantityInput').value = quantity + 1;
             });
-            const searchBar = document.getElementById('searchBar');
-            searchBar.addEventListener('click', function () {
-                window.location.href = '/search';
+
+            document.getElementById('decreaseQuantity').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('quantityInput').value);
+                if (quantity > 1) {
+                    document.getElementById('quantityInput').value = quantity - 1;
+                }
             });
-            const selectedItem = localStorage.getItem('selectedItem');
-            if (selectedItem) {
-                try {
-                    const { name, section } = JSON.parse(selectedItem);
-                    const menuCards = document.querySelectorAll('.menu-card');
-                    let targetCard = null;
-                    let buttonContainer = null;
-                    menuCards.forEach(card => {
-                        const itemName = card.getAttribute('data-item-name');
-                        const itemSection = card.getAttribute('data-item-section');
-                        if (itemName === name && itemSection === section) {
-                            targetCard = card;
-                            buttonContainer = card.querySelector('.button-container');
-                            card.classList.add('highlighted');
-                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            const toggleLink = card.querySelector('.toggle-details');
-                            if (toggleLink) {
-                                toggleLink.click();
-                            }
+
+            // Add to cart from item modal
+            window.addToCartFromModal = function () {
+                const name = document.getElementById('modal-name').textContent;
+                const price = parseFloat(document.getElementById('modal-price').textContent.replace('$', ''));
+                const quantity = parseInt(document.getElementById('quantityInput').value);
+                const section = document.getElementById('modal-section').dataset.section;
+                const category = document.getElementById('modal-section').dataset.category;
+                const instructions = document.getElementById('modal-instructions').value;
+
+                const addons = [];
+                document.querySelectorAll('#addons-list .form-check-input:checked').forEach(input => {
+                    addons.push({
+                        name: input.name,
+                        value: input.value,
+                        extra_charge: parseFloat(input.dataset.extraCharge || 0)
+                    });
+                });
+
+                const cartItem = {
+                    name,
+                    price,
+                    quantity,
+                    section,
+                    category,
+                    addons,
+                    instructions
+                };
+
+                fetch('/add_to_cart', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(cartItem)
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            updateCartItemCount(data.cart_item_count);
+                            const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                            modal.hide();
+                        } else {
+                            alert('Error adding item to cart: ' + data.message);
                         }
+                    })
+                    .catch(error => {
+                        console.error('Error adding to cart:', error);
+                        alert('Error adding item to cart.');
                     });
-                    if (buttonContainer) {
-                        if (section === 'Soft Drinks') {
-                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+            };
+
+            // Show soft drink modal
+            window.showSoftDrinkModal = function (button) {
+                const buttonContainer = button.closest('.button-container');
+                const name = buttonContainer.getAttribute('data-item-name');
+                const price = buttonContainer.getAttribute('data-item-price');
+                const image = buttonContainer.getAttribute('data-item-image');
+
+                document.getElementById('soft-drink-name').textContent = name;
+                document.getElementById('soft-drink-price').textContent = price;
+                document.getElementById('soft-drink-image').src = image || '/static/placeholder.jpg';
+                document.getElementById('soft-drink-quantity').value = 1;
+
+                const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
+                modal.show();
+            };
+
+            // Update soft drink quantity
+            window.updateSoftDrinkQuantity = function (delta) {
+                let quantity = parseInt(document.getElementById('soft-drink-quantity').value);
+                quantity = Math.max(1, quantity + delta);
+                document.getElementById('soft-drink-quantity').value = quantity;
+            };
+
+            // Add soft drink to cart
+            window.addSoftDrinkToCart = function () {
+                const name = document.getElementById('soft-drink-name').textContent;
+                const price = parseFloat(document.getElementById('soft-drink-price').textContent);
+                const quantity = parseInt(document.getElementById('soft-drink-quantity').value);
+                const section = 'Soft Drinks';
+                const category = document.querySelector('.button-container[data-item-name="' + name + '"]').getAttribute('data-item-category');
+
+                const cartItem = {
+                    name,
+                    price,
+                    quantity,
+                    section,
+                    category,
+                    addons: [],
+                    instructions: ''
+                };
+
+                fetch('/add_to_cart', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(cartItem)
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            updateCartItemCount(data.cart_item_count);
+                            const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                            modal.hide();
                         } else {
-                            const name = buttonContainer.getAttribute('data-item-name');
-                            const price = buttonContainer.getAttribute('data-item-price');
-                            const image = buttonContainer.getAttribute('data-item-image2');
-                            const description = buttonContainer.getAttribute('data-item-description');
-                            const category = buttonContainer.getAttribute('data-item-category');
-                            showItemDetails(name, price, image, description, section, category);
-                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                            modal.show();
+                            alert('Error adding item to cart: ' + data.message);
                         }
-                    }
-                } catch (err) {
-                    console.error('Error parsing selected item:', err);
+                    })
+                    .catch(error => {
+                        console.error('Error adding to cart:', error);
+                        alert('Error adding item to cart.');
+                    });
+            };
+
+            // Update cart item count
+            function updateCartItemCount(count) {
+                const badge = document.getElementById('cart-item-count');
+                if (count > 0) {
+                    badge.textContent = count;
+                    badge.style.display = 'inline-flex';
+                } else {
+                    badge.style.display = 'none';
                 }
-                localStorage.removeItem('selectedItem');
             }
-            const menuCards = document.querySelectorAll('.menu-card');
-            const menuVideos = document.querySelectorAll('.menu-video');
-            const cardObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                        observer.unobserve(entry.target);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.1
-            });
-            const videoObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const video = entry.target;
-                        const src = video.getAttribute('data-src');
-                        if (src && !video.querySelector('source[src="' + src + '"]')) {
-                            const nextSibling = video.nextElementSibling;
-                            if (nextSibling && nextSibling.tagName === 'SOURCE') {
-                                nextSibling.src = src;
-                            } else {
-                                const source = video.querySelector('source');
-                                if (source) {
-                                    source.src = src;
-                                }
-                            }
-                            video.load();
-                        }
-                        video.classList.add('loaded');
-                        observer.unobserve(video);
+
+            // Handle filter toggle
+            window.handleToggle = function (type) {
+                const vegToggle = document.getElementById('veg-toggle');
+                const customToggle = document.getElementById('category-CustomizedDish');
+                let url = '/menu?';
+
+                if (type === 'veg' && vegToggle.checked) {
+                    url += 'category=Veg';
+                    customToggle.checked = false;
+                } else if (type === 'custom' && customToggle.checked) {
+                    url += 'category=Customized+Dish';
+                    vegToggle.checked = false;
+                } else {
+                    url = '/menu';
+                }
+
+                window.location.href = url;
+            };
+
+            // Microphone Functionality
+            let recognition = null;
+            let matchedItem = null;
+
+            function stopSpeechRecognition() {
+                if (recognition) {
+                    recognition.stop();
+                    document.getElementById('micIcon').classList.remove('active');
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    if (micModal) {
+                        micModal.hide();
+                        resetMicModal();
                     }
-                });
-            }, {
-                root: null,
-                rootMargin: '200px',
-                threshold: 0.01
-            });
-            menuCards.forEach(card => cardObserver.observe(card));
-            menuVideos.forEach(video => videoObserver.observe(video));
-            const toggleLinks = document.querySelectorAll('.toggle-details');
-            toggleLinks.forEach(link => {
-                link.addEventListener('click', function () {
-                    const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
-                    const detailsDiv = document.getElementById(`details-${itemName}`);
-                    const isCurrentlyShown = detailsDiv.classList.contains('show');
-                    document.querySelectorAll('.item-details.show').forEach(otherDetails => {
-                        if (otherDetails !== detailsDiv) {
-                            otherDetails.classList.remove('show');
-                            const otherLink = document.querySelector(`.toggle-details[data-item-name="${otherDetails.id.replace('details-', '').replace(/-/g, ' ')}"]`);
-                            if (otherLink) {
-                                otherLink.innerText = 'Show Details';
-                            }
+                }
+            }
+
+            function resetMicModal() {
+                document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
+                document.getElementById('mic-status').style.display = 'block';
+                document.getElementById('mic-item-details').style.display = 'none';
+                document.getElementById('mic-item-image').src = '';
+                document.getElementById('mic-item-name').textContent = '';
+            }
+
+            // Add Microphone Functionality
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (SpeechRecognition) {
+                recognition = new SpeechRecognition();
+                recognition.continuous = false;
+                recognition.interimResults = false;
+                recognition.lang = 'en-US';
+
+                recognition.onstart = function () {
+                    document.getElementById('micIcon').classList.add('active');
+                    document.getElementById('mic-status').textContent = 'Listening...';
+                    document.getElementById('mic-item-details').style.display = 'none';
+                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                    micModal.show();
+                };
+
+                recognition.onresult = function (event) {
+                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
+                    document.getElementById('searchBar').value = transcript;
+                    const menuCards = document.querySelectorAll('.menu-card');
+                    let matchedCard = null;
+                    matchedItem = null;
+
+                    menuCards.forEach(card => {
+                        const itemName = card.getAttribute('data-item-name').toLowerCase();
+                        const itemSection = card.getAttribute('data-item-section');
+                        if (itemName.includes(transcript) || transcript.includes(itemName)) {
+                            matchedItem = menuItems.find(item =>
+                                item.name.toLowerCase() === card.getAttribute('data-item-name').toLowerCase() &&
+                                item.section === itemSection
+                            );
+                            matchedCard = card;
                         }
                     });
-                    if (!isCurrentlyShown) {
-                        detailsDiv.classList.add('show');
-                        this.innerText = 'Hide Details';
-                    } else {
-                        detailsDiv.classList.remove('show');
-                        this.innerText = 'Show Details';
-                    }
-                });
-            });
-            const descriptionTextarea = document.getElementById('custom-dish-description');
-            const descriptionSuggestions = document.getElementById('descriptionSuggestions');
-            if (descriptionTextarea && descriptionSuggestions) {
-                let usedIngredients = new Set();
-                function updateUsedIngredients() {
-                    const inputText = descriptionTextarea.value.trim();
-                    usedIngredients.clear();
-                    if (inputText) {
-                        const words = inputText.split(/,\s*/).map(word => word.trim());
-                        words.forEach(word => {
-                            if (word && ingredientsList.includes(word)) {
-                                usedIngredients.add(word);
-                            }
-                        });
-                    }
-                }
-                descriptionTextarea.addEventListener('input', function () {
-                    const inputText = this.value.trim();
-                    const words = inputText.split(/,\s*/);
-                    const lastWord = words[words.length - 1].trim().toLowerCase();
-                    descriptionSuggestions.innerHTML = '';
-                    descriptionSuggestions.style.display = 'none';
-                    updateUsedIngredients();
-                    if (lastWord) {
-                        const filteredIngredients = ingredientsList.filter(ingredient =>
-                            ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
-                        );
-                        if (filteredIngredients.length > 0) {
-                            filteredIngredients.forEach(ingredient => {
-                                const suggestionDiv = document.createElement('div');
-                                suggestionDiv.classList.add('suggestion-item');
-                                suggestionDiv.innerText = ingredient;
-                                suggestionDiv.addEventListener('click', function () {
-                                    const currentValue = descriptionTextarea.value;
-                                    const lastCommaIndex = currentValue.lastIndexOf(',');
-                                    const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
-                                    descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
-                                    descriptionSuggestions.style.display = 'none';
-                                    descriptionTextarea.focus();
-                                    updateUsedIngredients();
-                                });
-                                descriptionSuggestions.appendChild(suggestionDiv);
-                            });
-                            descriptionSuggestions.style.display = 'block';
+
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    if (matchedItem && matchedCard) {
+                        document.getElementById('mic-status').style.display = 'none';
+                        const micItemDetails = document.getElementById('mic-item-details');
+                        const micItemImage = document.getElementById('mic-item-image');
+                        const micItemName = document.getElementById('mic-item-name');
+                        micItemImage.src = matchedCard.querySelector('.button-container').getAttribute('data-item-image') || '/static/placeholder.jpg';
+                        micItemName.textContent = matchedItem.name;
+                        micItemDetails.style.display = 'block';
+                        matchedCard.classList.add('highlighted');
+                        matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                        const toggleLink = matchedCard.querySelector('.toggle-details');
+                        if (toggleLink) {
+                            toggleLink.click();
+                        }
+
+                        const buttonContainer = matchedCard.querySelector('.button-container');
+                        if (buttonContainer) {
+                            const section = buttonContainer.getAttribute('data-item-section');
+                            setTimeout(() => {
+                                micModal.hide();
+                                if (section === 'Soft Drinks') {
+                                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                } else {
+                                    const name = buttonContainer.getAttribute('data-item-name');
+                                    const price = buttonContainer.getAttribute('data-item-price');
+                                    const image = buttonContainer.getAttribute('data-item-image2');
+                                    const description = buttonContainer.getAttribute('data-item-description');
+                                    const category = buttonContainer.getAttribute('data-item-category');
+                                    showItemDetails(name, price, image, description, section, category);
+                                    const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                    itemModal.show();
+                                }
+                                resetMicModal();
+                            }, 1500);
                         }
-                    }
-                });
-                document.addEventListener('click', function (event) {
-                    if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
-                        descriptionSuggestions.style.display = 'none';
-                    }
-                });
-            }
-            fetch('/cart/get')
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to fetch cart:', data.error);
-                        const cart = getCartLocalStorage();
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error fetching cart:', err);
-                    const cart = getCartLocalStorage();
-                    updateCartUI(cart);
-                });
-            const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
-            preloadedVideos.forEach(link => {
-                const video = document.createElement('video');
-                video.src = link.href;
-                video.preload = 'auto';
-            });
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
-            decreaseBtn.addEventListener('click', function () {
-                let quantity = parseInt(quantityInput.value) || 1;
-                quantity = Math.max(1, quantity - 1);
-                quantityInput.value = quantity;
-            });
-            increaseBtn.addEventListener('click', function () {
-                let quantity = parseInt(quantityInput.value) || 1;
-                quantity += 1;
-                quantityInput.value = quantity;
-            });
-        });
-        let currentStep = 'greeting';  // other possible values: 'food_type', 'select_ingredients', 'menu_display', 'customization', 'post_cart'
-    let conversation = [];
-    let selectedIngredients = [];
-    let selectedMenuItem = null;
-    let cart = [];
-    // Get the user name passed from Flask (via Jinja)
-    const userName = "{{ user_name }}";  // Jinja syntax to inject user_name from Flask session
-    window.onload = function() {
-        if (userName) {
-            // If user_name exists, greet the user directly and proceed to food preference
-            conversation.push({ role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` });
-            displayConversation();  // Display the current conversation
-            displayOptions([
-                { text: 'Vegetarian', class: 'green' },
-                { text: 'Non-Vegetarian', class: 'red' }
-            ]);
-        } else {
-            // Ask for the name if it's not found
-            conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" });
-            displayConversation();  // Display the conversation
-        }
-    };
-    // Function to add messages to the chat
-    function addMessage(role, message) {
-        const chatMessages = document.getElementById('chatMessages');
-        if (!chatMessages) {
-            console.error('Chat messages container not found!');
-            return;
-        }
-        const messageDiv = document.createElement('div');
-        messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
-        messageDiv.textContent = message;
-        chatMessages.appendChild(messageDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    }
-    // Function to display all conversation messages
-    function displayConversation() {
-        const chatMessages = document.getElementById('chatMessages');
-        chatMessages.innerHTML = '';  // Clear previous messages
-        conversation.forEach(msg => {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = msg.role === 'bot' ? 'bot-message' : 'user-message';
-            messageDiv.textContent = msg.message;
-            chatMessages.appendChild(messageDiv);
-        });
-        chatMessages.scrollTop = chatMessages.scrollHeight;  // Scroll to bottom
-    }
-    // Function to handle user input
-    function sendMessage() {
-        const userInput = document.getElementById('userInput').value.trim();
-        if (userInput) {
-            addMessage('user', userInput);
-            conversation.push({ role: 'user', message: userInput });
-            document.getElementById('userInput').value = '';  // Clear input field
-            setTimeout(() => handleResponse(userInput), 500);
-        } else {
-            console.warn('Empty message!');
-        }
-    }
-        function handleResponse(userInput) {
-            const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
-            let botResponse = '';
-            let options = [];
-            // If user has already selected food type, proceed without repeating the question
-            if (lastMessage.includes('non-vegetarian')) {
-                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-                console.log("Food preference selected: Non-Vegetarian");
-                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
-                fetchIngredients('non-vegetarian');
-                return;
-            } else if (lastMessage.includes('vegetarian')) {
-                conversation.push({ role: 'user', message: 'Vegetarian' });
-                console.log("Food preference selected: Vegetarian");
-                botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
-                fetchIngredients('vegetarian');
-                return;
-            } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) {
-                conversation.push({ role: 'user', message: lastMessage });
-                console.log(`Non-veg option selected: ${lastMessage}`);
-                botResponse = `Great! Here are some ${lastMessage} ingredients available:`;
-                fetchIngredients(lastMessage.toLowerCase());
-                return;
-            } else if (lastMessage.includes('yes') && selectedMenuItem) {
-                botResponse = 'Here are some ingredients to customize your dish:';
-                handleYesResponse();
-                return;
-            } else if (lastMessage.includes('no') && selectedMenuItem) {
-                // Submit the dish without customization
-                submitCustomizationIngredients();
-                return;
-            } else if (lastMessage.includes('yes') && currentStep === 'post_cart') {
-                // After user says 'yes', ask again for food preference (veg or non-veg)
-                botResponse = `Let's get started again! What type of food would you prefer this time?`;
-                options = [
-                    { text: 'Vegetarian', class: 'green' },
-                    { text: 'Non-Vegetarian', class: 'red' }
-                ];
-                currentStep = 'food_type';
-                addMessage('bot', botResponse);
-                displayOptions(options);
-                return;
-            } else if (lastMessage.includes('non-vegetarian') && currentStep === 'food_type') {
-                // Handle non-vegetarian selection
-                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-                console.log("Food preference selected: Non-Vegetarian");
-                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
-                fetchIngredients('non-vegetarian');
-                return;
-            } else if (lastMessage.includes('vegetarian') && currentStep === 'food_type') {
-                // Handle vegetarian selection
-                conversation.push({ role: 'user', message: 'Vegetarian' });
-                console.log("Food preference selected: Vegetarian");
-                botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
-                fetchIngredients('vegetarian');
-                return;
-            } else if (lastMessage.includes('no') && currentStep === 'post_cart') {
-                addMessage('bot', 'Awesome! 🧾 Here’s your final cart:');
-                displayCart();  // Optional: show final cart again
-                addMessage('bot', 'Thank you for your order! 👨‍🍳🍲');
-                currentStep = 'end';
-                return;
-            }
-            addMessage('bot', botResponse);
-            if (options.length > 0) {
-                displayOptions(options);
-            }
-            displayCart();
-        }
-        function handleYesResponse() {
-            if (!selectedMenuItem) {
-                addMessage('bot', 'No dish selected. Please choose a dish first.');
-                return;
-            }
-            const botResponse = `Here is your selected dish: ${selectedMenuItem.name}`;
-            addMessage('bot', botResponse);
-            // Display selected menu item
-            const chatMessages = document.getElementById('chatMessages');
-            const menuItemDiv = document.createElement('div');
-            menuItemDiv.className = 'menu-item';
-            const img = document.createElement('img');
-            img.src = selectedMenuItem.image_url || 'https://via.placeholder.com/120';
-            img.alt = selectedMenuItem.name;
-            const name = document.createElement('div');
-            name.textContent = selectedMenuItem.name;
-            menuItemDiv.appendChild(img);
-            menuItemDiv.appendChild(name);
-            chatMessages.appendChild(menuItemDiv);
-            // Fetch ingredients for customization
-            fetchIngredientsForCustomization('both');
-        }
-        function fetchIngredientsForCustomization(foodPreference) {
-            fetch('/get_ingredients', { // Reuse existing endpoint
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ dietary_preference: foodPreference })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
                     } else {
-                        const ingredients = data.ingredients || [];
-                        addMessage('bot', 'Please select ingredients to customize:');
-                        displayCustomizationIngredients(ingredients);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-                });
-        }
-        function displayCustomizationIngredients(ingredients) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for customization ingredients!');
-                return;
-            }
-            let ingredientsList = document.querySelector('.customization-ingredients-list');
-            if (!ingredientsList) {
-                ingredientsList = document.createElement('div');
-                ingredientsList.className = 'customization-ingredients-list';
-                chatMessages.appendChild(ingredientsList);
-            } else {
-                ingredientsList.innerHTML = '';
-            }
-            ingredients.forEach(ingredient => {
-                const item = document.createElement('div');
-                item.className = 'ingredient-item';
-                const img = document.createElement('img');
-                img.src = ingredient.image_url || 'https://via.placeholder.com/120';
-                img.alt = ingredient.name;
-                const name = document.createElement('div');
-                name.textContent = ingredient.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add';
-                button.onclick = () => {
-                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                        selectedIngredients.push({ name: ingredient.name, image_url: ingredient.image_url });
-                        displaySelectedCustomizationIngredients();
+                        document.getElementById('mic-status').textContent = 'No matching item found. Try again...';
+                        setTimeout(() => {
+                            micModal.hide();
+                            resetMicModal();
+                            alert('No matching menu item found for: ' + transcript);
+                        }, 1500);
                     }
                 };
-                item.appendChild(img);
-                item.appendChild(name);
-                item.appendChild(button);
-                ingredientsList.appendChild(item);
-            });
-            displaySelectedCustomizationIngredients();
-        }
-        function displaySelectedCustomizationIngredients() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for selected customization ingredients!');
-                return;
-            }
-            let selectedArea = document.querySelector('.selected-customization-ingredients');
-            if (!selectedArea) {
-                selectedArea = document.createElement('div');
-                selectedArea.className = 'selected-customization-ingredients';
-                chatMessages.appendChild(selectedArea);
-            } else {
-                selectedArea.innerHTML = '';
-            }
-            const selectedIngredientsText = selectedIngredients.length > 0
-                ? `${selectedMenuItem.name} with ${selectedIngredients.map(ingredient => ingredient.name).join(', ')}`
-                : selectedMenuItem.name;
-            const ingredientsDiv = document.createElement('div');
-            ingredientsDiv.textContent = selectedIngredientsText;
-            selectedArea.appendChild(ingredientsDiv);
-            selectedIngredients.forEach(ingredient => {
-                const div = document.createElement('div');
-                div.textContent = ingredient.name;
-                const removeButton = document.createElement('button');
-                removeButton.textContent = 'X';
-                removeButton.style.marginLeft = '5px';
-                removeButton.style.padding = '2px 5px';
-                removeButton.style.backgroundColor = '#dc3545';
-                removeButton.style.color = '#ffffff';
-                removeButton.style.border = 'none';
-                removeButton.style.borderRadius = '4px';
-                removeButton.style.cursor = 'pointer';
-                removeButton.onclick = () => {
-                    selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
-                    displaySelectedCustomizationIngredients();
+
+                recognition.onerror = function (event) {
+                    console.error('Speech recognition error:', event.error);
+                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                    document.getElementById('micIcon').classList.remove('active');
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    setTimeout(() => {
+                        micModal.hide();
+                        resetMicModal();
+                        alert('Speech recognition failed: ' + event.error);
+                    }, 1500);
+                };
+
+                recognition.onend = function () {
+                    document.getElementById('micIcon').classList.remove('active');
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    if (micModal && !matchedItem) {
+                        micModal.hide();
+                        resetMicModal();
+                    }
                 };
-                div.appendChild(removeButton);
-                selectedArea.appendChild(div);
+            }
+
+            document.getElementById('micIcon').addEventListener('click', function () {
+                if (!recognition) {
+                    alert('Speech recognition is not supported in this browser.');
+                    return;
+                }
+                if (this.classList.contains('active')) {
+                    stopSpeechRecognition();
+                } else {
+                    resetMicModal();
+                    this.classList.add('active');
+                    recognition.start();
+                }
             });
-            if (!document.querySelector('.submit-customization-button')) {
-                const textarea = document.createElement('textarea');
-                textarea.placeholder = 'Enter any special instructions...';
-                selectedArea.appendChild(textarea);
-                const submitButton = document.createElement('button');
-                submitButton.className = 'submit-customization-button';
-                submitButton.textContent = 'Submit Customization';
-                submitButton.onclick = submitCustomizationIngredients;
-                selectedArea.appendChild(submitButton);
-            }
-        }
-        function submitCustomizationIngredients() {
-            if (!selectedMenuItem) {
-                addMessage('bot', 'No dish selected. Please choose a dish first.');
-                return;
-            }
-        
-            const textarea = document.querySelector('.selected-customization-ingredients textarea');
-            const instructions = textarea ? textarea.value.trim() : '';
-        
-            fetch('/submit_customization_ingredients', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    menu_item: selectedMenuItem,
-                    ingredients: selectedIngredients,
-                    instructions: instructions
-                })
-            })
+
+            // Initialize cart item count
+            fetch('/get_cart_item_count')
                 .then(response => response.json())
                 .then(data => {
-                    if (data.success) {
-                        addToCart({ ...selectedMenuItem, instructions, ingredients: selectedIngredients });
-                        currentStep = 'post_cart';
-                        addMessage('bot', 'Customization submitted successfully! Item added to cart.');
-        
-                        // Redirect to the cart page
-                        window.location.href = '/cart/cart';  // This will redirect the user to the cart page
-                    } else {
-                        addMessage('bot', `Error: ${data.error}`);
-                    }
+                    updateCartItemCount(data.cart_item_count);
                 })
                 .catch(error => {
-                    addMessage('bot', `Error submitting customization: ${error.message}`);
+                    console.error('Error fetching cart item count:', error);
                 });
-        }
-        function fetchIngredients(foodPreference) {
-            fetch('/get_ingredients', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ dietary_preference: foodPreference })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
+        });
+
+        // Chatbot functionality for Customized Dish
+        {% if selected_category == "Customized Dish" %}
+            const chatMessages = document.getElementById('chatMessages');
+            let conversationState = "{{ session.get('conversation_state', 'greeting') }}";
+            let userName = "{{ session.get('user_name', '') }}";
+            const storedIngredients = JSON.parse('{{ session.get("selected_ingredients", []) | tojson | safe }}');
+            const storedCustomizationIngredients = JSON.parse('{{ session.get("selected_customization_ingredients", []) | tojson | safe }}');
+            let selectedIngredients = [...storedIngredients];
+            let selectedCustomizationIngredients = [...storedCustomizationIngredients];
+            let customizationText = "{{ session.get('customization_text', '') }}";
+
+            function sendMessage() {
+                const userInput = document.getElementById('userInput').value.trim();
+                if (!userInput) return;
+
+                appendMessage('user', userInput);
+                document.getElementById('userInput').value = '';
+
+                if (conversationState === 'greeting') {
+                    userName = userInput;
+                    appendMessage('bot', `Nice to meet you, ${userName}! Let's create your custom dish. What's the base ingredient you'd like to start with?`);
+                    displayIngredients();
+                    conversationState = 'select_ingredients';
+                } else if (conversationState === 'select_ingredients') {
+                    appendMessage('bot', `Got it! Anything else you'd like to add to your dish?`);
+                    displayIngredients();
+                } else if (conversationState === 'customization') {
+                    customizationText = userInput;
+                    appendMessage('bot', `Thanks for the details! Here's what we have: ${customizationText}. Want to add any specific ingredients for this customization?`);
+                    displayCustomizationIngredients();
+                    conversationState = 'select_customization_ingredients';
+                } else if (conversationState === 'select_customization_ingredients') {
+                    appendMessage('bot', `Anything else to add for customization? Or type 'done' to proceed.`);
+                    displayCustomizationIngredients();
+                } else if (conversationState === 'confirm') {
+                    if (userInput.toLowerCase() === 'yes') {
+                        appendMessage('bot', `Awesome! Your custom dish has been added to the cart. Want to create another dish?`);
+                        submitCustomDish();
+                        conversationState = 'greeting';
+                        selectedIngredients = [];
+                        selectedCustomizationIngredients = [];
+                        customizationText = '';
                     } else {
-                        const ingredients = data.ingredients || [];
-                        addMessage('bot', 'Please select ingredients:');
-                        displayIngredientsList(ingredients);
-                        displaySelectedIngredients();
+                        appendMessage('bot', `No worries! Want to modify anything or start over? Type 'modify' or 'start over'.`);
+                        conversationState = 'modify';
                     }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-                });
-        }
-        function fetchMenuItems(params) {
-            fetch('/get_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(params)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
-                    } else {
-                        const menuItems = data.menu_items || [];
-                        addMessage('bot', 'Here are some dishes based on your selection:');
-                        displayMenuItems(menuItems);
+                } else if (conversationState === 'modify') {
+                    if (userInput.toLowerCase() === 'modify') {
+                        appendMessage('bot', `Let's modify your dish. What's the base ingredient you'd like to start with?`);
+                        displayIngredients();
+                        conversationState = 'select_ingredients';
+                    } else if (userInput.toLowerCase() === 'start over') {
+                        appendMessage('bot', `Starting fresh! What's your name?`);
+                        conversationState = 'greeting';
+                        selectedIngredients = [];
+                        selectedCustomizationIngredients = [];
+                        customizationText = '';
                     }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-                });
-        }
-        function displayIngredientsList(ingredients) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for ingredients!');
-                return;
+                }
+
+                updateSession();
+            }
+
+            function appendMessage(sender, message) {
+                const messageElement = document.createElement('div');
+                messageElement.className = sender === 'bot' ? 'bot-message' : 'user-message';
+                messageElement.textContent = message;
+                chatMessages.appendChild(messageElement);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
             }
-            let ingredientsList = document.querySelector('.ingredients-list');
-            if (!ingredientsList) {
-                ingredientsList = document.createElement('div');
+
+            function displayIngredients() {
+                const ingredients = [
+                    { name: 'Chicken', image: '/static/chicken.jpg' },
+                    { name: 'Beef', image: '/static/beef.jpg' },
+                    { name: 'Rice', image: '/static/rice.jpg' },
+                    { name: 'Vegetables', image: '/static/vegetables.jpg' }
+                ];
+
+                const ingredientsList = document.createElement('div');
                 ingredientsList.className = 'ingredients-list';
+                ingredients.forEach(ingredient => {
+                    const ingredientItem = document.createElement('div');
+                    ingredientItem.className = 'ingredient-item';
+                    ingredientItem.innerHTML = `
+                        <img src="${ingredient.image}" alt="${ingredient.name}">
+                        <div>${ingredient.name}</div>
+                        <button onclick="selectIngredient('${ingredient.name}')">Add</button>
+                    `;
+                    ingredientsList.appendChild(ingredientItem);
+                });
                 chatMessages.appendChild(ingredientsList);
-            } else {
-                ingredientsList.innerHTML = '';
-            }
-            ingredients.forEach(ingredient => {
-                const item = document.createElement('div');
-                item.className = 'ingredient-item';
-                const img = document.createElement('img');
-                img.src = ingredient.image_url || 'https://via.placeholder.com/120';
-                img.alt = ingredient.name;
-                const name = document.createElement('div');
-                name.textContent = ingredient.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add';
-                button.onclick = () => {
-                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                        selectedIngredients.push(ingredient);
-                        displaySelectedIngredients();
-                    }
-                };
-                item.appendChild(img);
-                item.appendChild(name);
-                item.appendChild(button);
-                ingredientsList.appendChild(item);
-            });
-        }
-        function displayMenuItems(menuItems) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for menu items!');
-                return;
-            }
-            let menuItemsList = document.querySelector('.menu-items-list');
-            if (!menuItemsList) {
-                menuItemsList = document.createElement('div');
-                menuItemsList.className = 'menu-items-list';
-                chatMessages.appendChild(menuItemsList);
-            } else {
-                menuItemsList.innerHTML = '';
-            }
-            menuItems.forEach(item => {
-                const menuItem = document.createElement('div');
-                menuItem.className = 'menu-item';
-                const img = document.createElement('img');
-                img.src = item.image_url || 'https://via.placeholder.com/120';
-                img.alt = item.name;
-                const name = document.createElement('div');
-                name.textContent = item.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add to Cart';
-                button.onclick = () => {
-                    selectedMenuItem = item;
-                    addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
-                    const options = [
-                        { text: 'Yes', class: 'green' },
-                        { text: 'No', class: 'red' }
-                    ];
-                    displayOptions(options);
-                };
-                menuItem.appendChild(img);
-                menuItem.appendChild(name);
-                menuItem.appendChild(button);
-                menuItemsList.appendChild(menuItem);
-            });
-        }
-        function displaySelectedIngredients() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for selected ingredients!');
-                return;
-            }
-            let selectedArea = document.querySelector('.selected-ingredients');
-            if (!selectedArea) {
-                selectedArea = document.createElement('div');
-                selectedArea.className = 'selected-ingredients';
-                chatMessages.appendChild(selectedArea);
-            } else {
-                selectedArea.innerHTML = '';
-            }
-            selectedIngredients.forEach(ingredient => {
-                const div = document.createElement('div');
-                div.textContent = ingredient.name;
-                const removeButton = document.createElement('button');
-                removeButton.textContent = 'X';
-                removeButton.style.marginLeft = '5px';
-                removeButton.style.padding = '2px 5px';
-                removeButton.style.backgroundColor = '#dc3545';
-                removeButton.style.color = '#ffffff';
-                removeButton.style.border = 'none';
-                removeButton.style.borderRadius = '4px';
-                removeButton.style.cursor = 'pointer';
-                removeButton.onclick = () => {
-                    selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                displaySelectedIngredients();
+            }
+
+            function selectIngredient(ingredient) {
+                if (!selectedIngredients.includes(ingredient)) {
+                    selectedIngredients.push(ingredient);
+                    appendMessage('bot', `Added ${ingredient} to your dish. Anything else?`);
                     displaySelectedIngredients();
-                };
-                div.appendChild(removeButton);
-                selectedArea.appendChild(div);
-            });
-            if (selectedIngredients.length > 0) {
-                let submitButton = document.querySelector('.submit-button');
-                if (!submitButton) {
-                    submitButton = document.createElement('button');
-                    submitButton.className = 'submit-button';
-                    submitButton.textContent = 'Submit Ingredients';
-                    submitButton.onclick = submitIngredients;
-                    chatMessages.appendChild(submitButton);
+                    updateSession();
                 }
             }
-        }
-        function submitIngredients() {
-            if (selectedIngredients.length === 0) {
-                addMessage('bot', 'No ingredients selected. Please choose some ingredients.');
-                return;
-            }
-            const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
-            fetchMenuItems({ ingredient_names: ingredientNames });
-        }
-        function addToCart(item) {
-            cart.push(item);
-            console.log('Cart:', cart);
-            displayCart();
-        }
-        function displayCart() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for cart!');
-                return;
-            }
-            let cartArea = document.querySelector('.cart-items');
-            if (!cartArea) {
-                cartArea = document.createElement('div');
-                cartArea.className = 'cart-items';
-                chatMessages.appendChild(cartArea);
-            } else {
-                cartArea.innerHTML = '';
-            }
-            if (cart.length > 0) {
-                const label = document.createElement('div');
-                label.textContent = 'Cart:';
-                cartArea.appendChild(label);
-                cart.forEach((item, index) => {
-                    const itemDiv = document.createElement('div');
-                    itemDiv.className = 'cart-item';
-                    const img = document.createElement('img');
-                    img.src = item.image_url || 'https://via.placeholder.com/30';
-                    img.alt = item.name;
-                    const name = document.createElement('div');
-                    const text = item.instructions
-                        ? `${item.name} (${item.instructions})`
-                        : item.name;
-                    name.textContent = item.ingredients.length > 0
-                        ? `${text} with ${item.ingredients.map(i => i.name).join(', ')}`
-                        : text;
-                    const removeButton = document.createElement('button');
-                    removeButton.className = 'remove-button';
-                    removeButton.textContent = 'X';
-                    removeButton.onclick = () => {
-                        cart.splice(index, 1);
-                        displayCart();
-                    };
-                    itemDiv.appendChild(img);
-                    itemDiv.appendChild(name);
-                    itemDiv.appendChild(removeButton);
-                    cartArea.appendChild(itemDiv);
-                });
-                let submitCartButton = document.querySelector('.submit-cart-button');
-                if (!submitCartButton) {
-                    submitCartButton = document.createElement('button');
-                    submitCartButton.className = 'submit-cart-button';
-                    submitCartButton.textContent = 'Submit Cart';
-                    submitCartButton.onclick = submitCart;
-                    cartArea.appendChild(submitCartButton);
+
+            function displaySelectedIngredients() {
+                const existingSelected = chatMessages.querySelector('.selected-ingredients');
+                if (existingSelected) existingSelected.remove();
+
+                if (selectedIngredients.length > 0) {
+                    const selectedContainer = document.createElement('div');
+                    selectedContainer.className = 'selected-ingredients';
+                    selectedContainer.innerHTML = '<strong>Selected Ingredients:</strong>';
+                    selectedIngredients.forEach(ingredient => {
+                        const ingredientDiv = document.createElement('div');
+                        ingredientDiv.textContent = ingredient;
+                        selectedContainer.appendChild(ingredientDiv);
+                    });
+                    chatMessages.appendChild(selectedContainer);
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
                 }
             }
-        }
-        function submitCart() {
-            if (cart.length === 0) {
-                addMessage('bot', 'Your cart is empty!');
-                return;
-            }
-            fetch('/submit_customization_ingredients', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ items: cart })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        addMessage('bot', 'Cart submitted successfully!');
-                        cart = [];
-                        displayCart();
-                    } else {
-                        addMessage('bot', `Error submitting cart: ${data.error}`);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error submitting cart: ${error.message}`);
+
+            function displayCustomizationIngredients() {
+                const ingredients = [
+                    { name: 'Spicy Sauce', image: '/static/spicy_sauce.jpg' },
+                    { name: 'Cheese', image: '/static/cheese.jpg' },
+                    { name: 'Herbs', image: '/static/herbs.jpg' }
+                ];
+
+                const ingredientsList = document.createElement('div');
+                ingredientsList.className = 'customization-ingredients-list';
+                ingredients.forEach(ingredient => {
+                    const ingredientItem = document.createElement('div');
+                    ingredientItem.className = 'ingredient-item';
+                    ingredientItem.innerHTML = `
+                        <img src="${ingredient.image}" alt="${ingredient.name}">
+                        <div>${ingredient.name}</div>
+                        <button onclick="selectCustomizationIngredient('${ingredient.name}')">Add</button>
+                    `;
+                    ingredientsList.appendChild(ingredientItem);
                 });
-        }
-        function displayOptions(options) {
-          const chatMessages = document.getElementById('chatMessages');
-          if (!chatMessages) {
-              console.error('Chat messages container not found for options!');
-              return;
-          }
-          console.log('Displaying options:', options);
-          options.forEach(opt => {
-              const button = document.createElement('button');
-              button.textContent = opt.text;
-              button.className = `option-button ${opt.class}`;
-              button.onclick = () => {
-                  addMessage('user', opt.text);
-                  conversation.push({ role: 'user', message: opt.text });
-                  console.log(`User selected option: ${opt.text}`);
-                  setTimeout(() => handleResponse(opt.text), 500);
-              };
-              chatMessages.appendChild(button);
-          });
-          chatMessages.appendChild(document.createElement('br'));
-          chatMessages.scrollTop = chatMessages.scrollHeight;
-          console.log('Options displayed');
-      }
-
-        document.getElementById('userInput').addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                sendMessage();
+                chatMessages.appendChild(ingredientsList);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+
+                displaySelectedCustomizationIngredients();
             }
-        });
-        console.log('Script loaded successfully');
-    </script>
-</body>
-</html>
 
+            function selectCustomizationIngredient(ingredient) {
+                if (!selectedCustomizationIngredients.includes(ingredient)) {
+                    selectedCustomizationIngredients.push(ingredient);
+                    appendMessage('bot', `Added ${ingredient} to your customization. Anything else?`);
+                    displaySelectedCustomizationIngredients();
+                    updateSession();
+                }
+            }
 
+            function displaySelectedCustomizationIngredients() {
+                const existingSelected = chatMessages.querySelector('.selected-customization-ingredients');
+                if (existingSelected) existingSelected.remove();
 
+                if (selectedCustomizationIngredients.length > 0) {
+                    const selectedContainer = document.createElement('div');
+                    selectedContainer.className = 'selected-customization-ingredients';
+                    selectedContainer.innerHTML = '<strong>Selected Customization Ingredients:</strong>';
+                    selectedCustomizationIngredients.forEach(ingredient => {
+                        const ingredientDiv = document.createElement('div');
+                        ingredientDiv.textContent = ingredient;
+                        selectedContainer.appendChild(ingredientDiv);
+                    });
+                    chatMessages.appendChild(selectedContainer);
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }
+            }
 
+            function updateSession() {
+                fetch('/update_session', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        conversation_state: conversationState,
+                        user_name: userName,
+                        selected_ingredients: selectedIngredients,
+                        selected_customization_ingredients: selectedCustomizationIngredients,
+                        customization_text: customizationText
+                    })
+                })
+                    .catch(error => console.error('Error updating session:', error));
+            }
 
+            function submitCustomDish() {
+                const customDish = {
+                    name: `Custom Dish by ${userName}`,
+                    price: 10.00,
+                    quantity: 1,
+                    section: 'Customized Dish',
+                    category: 'Customized Dish',
+                    addons: selectedCustomizationIngredients.map(ingredient => ({
+                        name: 'Customization',
+                        value: ingredient,
+                        extra_charge: 0
+                    })),
+                    instructions: customizationText
+                };
 
+                fetch('/add_to_cart', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(customDish)
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            updateCartItemCount(data.cart_item_count);
+                        } else {
+                            alert('Error adding custom dish to cart: ' + data.message);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error adding custom dish to cart:', error);
+                        alert('Error adding custom dish to cart.');
+                    });
+            }
 
+            // Initialize chat based on session state
+            if (conversationState === 'greeting') {
+                appendMessage('bot', `Hello! I'm your Chef Bot. What's your name?`);
+            } else if (conversationState === 'select_ingredients') {
+                appendMessage('bot', `Welcome back, ${userName}! What's the base ingredient you'd like to start with?`);
+                displayIngredients();
+            } else if (conversationState === 'customization') {
+                appendMessage('bot', `Great! How would you like to customize your dish?`);
+            } else if (conversationState === 'select_customization_ingredients') {
+                appendMessage('bot', `What ingredients would you like to add for customization?`);
+                displayCustomizationIngredients();
+            } else if (conversationState === 'confirm') {
+                appendMessage('bot', `Your dish is ready! Ingredients: ${selectedIngredients.join(', ')}. Customization: ${customizationText}. Confirm? (Type 'yes' or 'no')`);
+            } else if (conversationState === 'modify') {
+                appendMessage('bot', `Want to modify your dish or start over? Type 'modify' or 'start over'.`);
+            }
+        {% endif %}
+    </script>
+</body>
+</html>
\ No newline at end of file