diff --git "a/templates/menu.html" "b/templates/menu.html"
--- "a/templates/menu.html"
+++ "b/templates/menu.html"
@@ -8,7 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <!-- Preload Critical Resources -->
-    <link rel="preload" href="/static/placeholder.mp4" as="video">
+    <link rel="preload" href="/static/placeholder.mp4" as="video" fetchpriority="high">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
             <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" fetchpriority="high">
@@ -35,37 +35,49 @@
             margin: auto;
             display: flex;
             flex-direction: column;
-            transition: opacity 0.3s ease-in-out;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
-        .menu-card.visible {
-            opacity: 1;
-        }
         .menu-card.highlighted {
             border: 3px solid #0FAA39;
             box-shadow: 0 0 10px rgba(15, 170, 57, 0.5);
         }
-        .menu-video {
-            height: 200px;
+        .media-wrapper {
+            position: relative;
             width: 100%;
-            object-fit: contain;
+            height: 200px;
+            overflow: hidden;
             border-radius: 15px 15px 0 0;
-            opacity: 0;
-            transition: opacity 0.5s ease-in-out;
             background-color: #000;
+            transition: transform 0.3s ease;
         }
-        .menu-video.loaded {
-            opacity: 1;
+        .media-wrapper:hover, .media-wrapper.touched {
+            transform: scale(1.02);
         }
-        .menu-card img {
+        .menu-video {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
-            height: 200px;
+            height: 100%;
             object-fit: cover;
-            object-position: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .menu-video.active {
+            opacity: 1;
         }
-        .menu-card:hover .menu-video {
+        .menu-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
             opacity: 1;
-            transform: scale(1.05);
+            transition: opacity 0.3s ease;
+        }
+        .menu-image.hidden {
+            opacity: 0;
         }
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
@@ -120,19 +132,17 @@
             align-items: center;
             justify-content: center;
             padding: 0;
-            transition: background-color 0.3s ease, transform 0.1s ease;
+            transition: background-color 0.3s ease;
         }
         .btn-primary:hover {
             background-color: #0D9232;
             border-color: #0D9232;
-            transform: scale(1.05);
         }
         .btn-primary:active,
         .btn-primary:focus {
             background-color: #0B7A29;
             border-color: #0B7A29;
             box-shadow: none;
-            transform: scale(0.98);
         }
         .avatar-dropdown-container {
             position: absolute;
@@ -210,7 +220,7 @@
         }
         .search-bar-container input {
             width: 100%;
-            padding: 8px 100px 8px 40px;
+            padding: 8px 40px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
             border: none;
@@ -229,7 +239,6 @@
             left: 15px;
             font-size: 18px;
             color: #888;
-            cursor: pointer;
         }
         .mic-icon {
             position: absolute;
@@ -242,21 +251,6 @@
         .mic-icon.active {
             color: #007bff;
         }
-        #searchButton {
-            background-color: #0FAA39;
-            border-color: #0FAA39;
-            border-radius: 20px;
-            height: 30px;
-            line-height: 1;
-            position: absolute;
-            right: 40px;
-            padding: 5px 10px;
-            font-size: 14px;
-        }
-        #searchButton:hover {
-            background-color: #0D9232;
-            border-color: #0D9232;
-        }
         /* Addon Section */
         .addon-section {
             background-color: #fff;
@@ -264,10 +258,6 @@
             margin-bottom: 15px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             overflow: hidden;
-            transition: transform 0.2s ease;
-        }
-        .addon-section:hover {
-            transform: translateY(-2px);
         }
         .addon-section h6 {
             margin: 0;
@@ -325,7 +315,6 @@
             animation: checkmark 0.2s ease-in-out;
         }
         .addon-section .form-check-input:hover {
-            transform: scale(1.1);
             border-color: #0FAA39;
         }
         .addon-section .form-check-input:focus {
@@ -352,13 +341,11 @@
         }
         .addon-options {
             max-height: 500px;
-            opacity: 1;
             overflow: hidden;
-            transition: max-height 0.3s ease, opacity 0.3s ease;
+            transition: max-height 0.3s ease;
         }
         .addon-options.collapsed {
             max-height: 0;
-            opacity: 0;
         }
         .addon-loading {
             display: flex;
@@ -447,14 +434,10 @@
             background-color: #e9ecef;
             border: none;
             color: #333;
-            transition: background-color 0.2s ease, transform 0.1s ease;
+            transition: background-color 0.2s ease;
         }
         #softDrinkModal .quantity-controls .btn:hover {
             background-color: #d1d4d7;
-            transform: scale(1.1);
-        }
-        #softDrinkModal .quantity-controls .btn:active {
-            transform: scale(0.95);
         }
         #softDrinkModal .quantity-controls input {
             width: 50px;
@@ -480,16 +463,11 @@
             font-size: 1.1rem;
             font-weight: 600;
             border-radius: 8px;
-            transition: background-color 0.2s ease, transform 0.1s ease;
+            transition: background-color 0.2s ease;
             width: auto;
         }
         #softDrinkModal .modal-footer .btn-primary:hover {
             background-color: #0D9232;
-            transform: scale(1.05);
-        }
-        #softDrinkModal .modal-footer .btn-primary:active {
-            background-color: #0B7A29;
-            transform: scale(0.98);
         }
         #softDrinkModal .modal-footer .quantity-controls-footer {
             display: flex;
@@ -506,14 +484,10 @@
             background-color: #e9ecef;
             border: none;
             color: #333;
-            transition: background-color 0.2s ease, transform 0.1s ease;
+            transition: background-color 0.2s ease;
         }
         #softDrinkModal .modal-footer .quantity-controls-footer .btn:hover {
             background-color: #d1d4d7;
-            transform: scale(1.1);
-        }
-        #softDrinkModal .modal-footer .quantity-controls-footer .btn:active {
-            transform: scale(0.95);
         }
         /* Filter Form Styling */
         #filter-form {
@@ -569,6 +543,75 @@
             color: #333;
             cursor: pointer;
         }
+        /* Microphone 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;
+        }
+        #micModal .modal-body #mic-item-image {
+            max-height: 150px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        }
+        #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 checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -585,6 +628,11 @@
             from { opacity: 0; transform: translateY(-20px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
         .modal-header {
             padding: 10px 15px;
         }
@@ -845,7 +893,7 @@
                 transform: translateY(-50%);
             }
             .search-bar-container input {
-                padding: 6px 90px 6px 35px;
+                padding: 6px 35px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
@@ -857,11 +905,6 @@
                 right: 12px;
                 font-size: 16px;
             }
-            #searchButton {
-                padding: 4px 8px;
-                font-size: 12px;
-                right: 35px;
-            }
             .avatar-dropdown-container {
                 right: 10px;
             }
@@ -1097,426 +1140,28 @@
             .toggle-container label {
                 font-size: 0.9rem;
             }
-        }
-        .chat-container {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Segoe UI', Arial, sans-serif;
-            background-color: #f4f7fa;
-            overflow-x: hidden;
-            line-height: 1.5;
-        }
-        .chat-container {
-            width: 100%;
-            max-width: 800px;
-            height: 100vh;
-            margin: 0 auto;
-            background-color: #ffffff;
-            border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        .chat-header {
-            background-color: #0078d4;
-            color: #ffffff;
-            padding: 12px;
-            text-align: center;
-            font-size: 18px;
-            font-weight: 600;
-            flex-shrink: 0;
-        }
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 15px;
-            scroll-behavior: smooth;
-        }
-        .bot-message, .user-message {
-            padding: 10px 15px;
-            margin: 8px 0;
-            border-radius: 12px;
-            max-width: 80%;
-            font-size: 14px;
-            line-height: 1.4;
-        }
-        .bot-message {
-            background-color: #e8f0fe;
-            color: #333;
-        }
-        .user-message {
-            background-color: #0078d4;
-            color: #ffffff;
-            margin-left: auto;
-        }
-        .chat-input {
-            display: flex;
-            padding: 10px;
-            border-top: 1px solid #e0e0e0;
-            background-color: #f9f9f9;
-            flex-shrink: 0;
-        }
-        .chat-input input {
-            flex: 1;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 8px;
-            font-size: 14px;
-            outline: none;
-        }
-        .chat-input button {
-            padding: 10px 20px;
-            margin-left: 10px;
-            background-color: #0078d4;
-            color: #ffffff;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background-color 0.2s;
-        }
-        .chat-input button:hover {
-            background-color: #005ea2;
-        }
-        .ingredients-list, .menu-items-list, .customization-ingredients-list {
-            display: flex;
-            flex-wrap: nowrap;
-            overflow-x: auto;
-            padding: 10px;
-            margin: 10px 0;
-            background-color: #f5f7fa;
-            border-radius: 10px;
-            gap: 15px;
-            scroll-behavior: smooth;
-        }
-        .ingredient-item, .menu-item {
-            flex: 0 0 auto;
-            width: 200px;
-            background-color: #ffffff;
-            border: 1px solid #e0e0e0;
-            border-radius: 10px;
-            padding: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-            transition: transform 0.2s;
-            text-align: center;
-        }
-        .ingredient-item:hover, .menu-item:hover {
-            transform: translateY(-2px);
-        }
-        .ingredient-item img, .menu-item img {
-            width: 100%;
-            height: 120px;
-            object-fit: cover;
-            border-radius: 8px;
-            margin-bottom: 8px;
-        }
-        .ingredient-item div, .menu-item div {
-            font-size: 14px;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 5px;
-        }
-        .ingredient-item button, .menu-item button {
-            padding: 8px;
-            background-color: #28a745;
-            color: #ffffff;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 12px;
-            width: 100%;
-        }
-        .ingredient-item button:hover, .menu-item button:hover {
-            background-color: #218838;
-        }
-        .selected-ingredients, .selected-customization-ingredients {
-            background-color: #f1f8ff;
-            padding: 15px;
-            border: 1px solid #b3d7ff;
-            border-radius: 10px;
-            margin: 10px 0;
-            font-size: 14px;
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-        .selected-ingredients div, .selected-customization-ingredients div {
-            background-color: #d6e9ff;
-            padding: 5px 10px;
-            border-radius: 6px;
-            font-size: 13px;
-        }
-        .customization-input {
-            margin: 10px 0;
-        }
-        .customization-input textarea, .selected-customization-ingredients textarea {
-            width: 100%;
-            padding: 8px;
-            border: 1px solid #b3d7ff;
-            border-radius: 6px;
-            font-size: 14px;
-            outline: none;
-            margin-bottom: 10px;
-        }
-        .customization-input button, .submit-button, .submit-customization-button, .submit-cart-button {
-            padding: 10px 20px;
-            background-color: #0078d4;
-            color: #ffffff;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background-color 0.2s;
-        }
-        .customization-input button:hover, .submit-button:hover, .submit-customization-button:hover, .submit-cart-button:hover {
-            background-color: #005ea2;
-        }
-        .option-button {
-            padding: 10px 20px;
-            color: #ffffff;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
-            margin: 5px;
-            transition: background-color 0.2s;
-        }
-        .option-button.green {
-            background-color: #28a745;
-        }
-        .option-button.green:hover {
-            background-color: #218838;
-        }
-        .option-button.red {
-            background-color: #dc3545;
-        }
-        .option-button.red:hover {
-            background-color: #c82333;
-        }
-        .cart-items {
-            background-color: #f1f8ff;
-            padding: 15px;
-            border: 1px solid #b3d7ff;
-            border-radius: 10px;
-            margin: 10px 0;
-            font-size: 14px;
-        }
-        .cart-item {
-            display: flex;
-            align-items: center;
-            background-color: #d6e9ff;
-            padding: 5px 10px;
-            border-radius: 6px;
-            font-size: 13px;
-            margin: 5px 0;
-        }
-        .cart-item img {
-            width: 30px;
-            height: 30px;
-            object-fit: cover;
-            border-radius: 6px;
-            margin-right: 8px;
-        }
-        .cart-item .remove-button {
-            padding: 5px 10px;
-            margin-left: 8px;
-            background-color: #dc3545;
-            color: #ffffff;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 12px;
-        }
-        .cart-item .remove-button:hover {
-            background-color: #c82333;
-        }
-        /* 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;
-            }
-        }
-        /* Responsive Design */
-        @media (max-width: 480px) {
-            .chat-container {
-                border-radius: 0;
-                box-shadow: none;
-            }
-            .chat-header {
-                font-size: 16px;
-                padding: 10px;
-            }
-            .chat-messages {
-                padding: 10px;
-            }
-            .bot-message, .user-message {
-                font-size: 13px;
-                padding: 8px 12px;
-                margin: 5px 0;
-            }
-            .chat-input input {
-                font-size: 13px;
-                padding: 8px;
-            }
-            .chat-input button {
-                font-size: 13px;
-                padding: 8px 15px;
-            }
-            .ingredients-list, .menu-items-list, .customization-ingredients-list {
-                flex-direction: row;
-                gap: 10px;
-            }
-            .ingredient-item, .menu-item {
-                flex: 0 0 150px;
-            }
-            .ingredient-item img, .menu-item img {
-                height: 100px;
-            }
-            .ingredient-item div, .menu-item div {
-                font-size: 13px;
-            }
-            .ingredient-item button, .menu-item button {
-                font-size: 11px;
-                padding: 6px;
-            }
-            .option-button {
-                font-size: 13px;
-                padding: 8px 15px;
-            }
-            .selected-ingredients, .selected-customization-ingredients, .cart-items {
-                padding: 10px;
-                gap: 8px;
-            }
-            .cart-item {
-                font-size: 12px;
-                padding: 4px 8px;
-            }
-            .cart-item img {
-                width: 25px;
-                height: 25px;
-            }
-        }
-        @media (min-width: 481px) and (max-width: 768px) {
-            .chat-container {
-                max-width: 600px;
-            }
-            .chat-header {
-                font-size: 17px;
-                padding: 11px;
-            }
-            .chat-messages {
-                padding: 12px;
-            }
-            .ingredient-item, .menu-item {
-                flex: 0 0 180px;
-            }
-            .ingredient-item img, .menu-item img {
-                height: 110px;
-            }
+            /* Mobile-Specific Microphone Modal Styles */
+            #micModal .modal-dialog {
+                max-width: 90%;
+            }
+            #micModal .modal-body i {
+                font-size: 2rem;
+            }
+            #micModal .modal-body p {
+                font-size: 1rem;
+            }
+            #micModal .modal-body #mic-item-image {
+                max-height: 120px;
+                margin-bottom: 8px;
+            }
+            #micModal .modal-body #mic-item-name {
+                font-size: 1rem;
+                margin-bottom: 8px;
+            }
+            #micModal .modal-footer .btn-secondary {
+                padding: 8px 15px;
+                font-size: 0.9rem;
+            }
         }
     </style>
 </head>
@@ -1535,15 +1180,15 @@
         </div>
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
-            <i class="bi bi-search search-icon" id="searchIcon" style="cursor: pointer;"></i>
+            <i class="bi bi-search search-icon"></i>
             <i class="bi bi-mic mic-icon" id="micIcon"></i>
-            <button type="button" id="searchButton" class="btn btn-primary">Search</button>
         </div>
     </div>
 
     <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 -->
             <input type="checkbox" id="veg-toggle" name="veg"
                    {% if selected_category == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
@@ -1551,6 +1196,7 @@
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
+            <!-- Customized Dish Toggle -->
             <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
                    {% if selected_category == "Customized Dish" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('custom')"
@@ -1562,91 +1208,100 @@
     <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 -->
+                <h3>Create Your Custom Dish</h3>
+                <form method="POST" action="/customdish/generate_custom_dish">
+                    <div class="mb-3">
+                        <label for="custom-dish-name" class="form-label">Dish Name</label>
+                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
                     </div>
-                    <div class="chat-input">
-                        <input type="text" id="userInput" placeholder="Type your name or message...">
-                        <button onclick="sendMessage()">Send</button>
+                    <div class="mb-3 position-relative">
+                        <label for="custom-dish-description" class="form-label">Dish Description</label>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+                        <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
-                </div>
+                    <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
+                </form>
             </div>
         {% else %}
-            {% for section, items in ordered_menu.items() %}
-                <h3>{{ section }}</h3>
-                <div class="row">
-                    {% for item in items %}
-                        <div class="col-md-6 mb-4">
-                            <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
-                                <video 
-                                    class="card-img-top menu-video" 
-                                    muted 
-                                    loop 
-                                    preload="auto" 
-                                    data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" 
-                                    poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
-                                    width="350" 
-                                    height="200" 
-                                    onmouseover="this.play()" 
-                                    onmouseout="this.pause(); this.currentTime = 0;" 
-                                    onerror="this.poster='/static/placeholder.jpg';">
-                                    <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
-                                    Your browser does not support the video tag.
-                                </video>
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
-                                            <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-items-center justify-content-center">
-                                            <div class="button-container" 
-                                                 data-item-name="{{ item.Name | default('Unnamed Item') }}" 
-                                                 data-item-price="{{ item.Price__c | default('0.00') }}" 
-                                                 data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
-                                                 data-item-section="{{ item.Section__c | default(section) }}" 
-                                                 data-item-category="{{ selected_category }}"
-                                                 data-item-description="{{ item.Description__c | default('No description') }}"
-                                                 data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
-                                                {% if item.Section__c == 'Soft Drinks' %}
-                                                    <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
-                                                {% else %}
-                                                    <button class="btn btn-primary" 
-                                                            data-bs-toggle="modal" 
-                                                            data-bs-target="#itemModal" 
-                                                            onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
-                                                        ADD
-                                                    </button>
-                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
-                                                        <span class="customisable-text">Customisable</span>
+            {% if ordered_menu.items()|length == 0 %}
+                <p>No menu items available for this category.</p>
+            {% else %}
+                {% for section, items in ordered_menu.items() %}
+                    <h3>{{ section }}</h3>
+                    <div class="row">
+                        {% for item in items %}
+                            <div class="col-md-6 mb-4">
+                                <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
+                                    <div class="media-wrapper">
+                                        <img 
+                                            class="menu-image" 
+                                            src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
+                                            alt="{{ item.Name | default('Unnamed Item') }}" 
+                                            loading="lazy">
+                                        <video 
+                                            class="menu-video" 
+                                            muted 
+                                            loop 
+                                            preload="auto" 
+                                            width="350" 
+                                            height="200" 
+                                            loading="lazy"
+                                            onerror="this.classList.remove('active'); this.previousElementSibling.classList.remove('hidden');">
+                                            <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
+                                            Your browser does not support the video tag.
+                                        </video>
+                                    </div>
+                                    <div class="addbutton">
+                                        <div class="card-body d-flex align-items-center justify-content-between">
+                                            <div>
+                                                <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                                                <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
+                                            </div>
+                                            <div class="d-flex flex-column align-items-center justify-content-center">
+                                                <div class="button-container" 
+                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}" 
+                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
+                                                     data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
+                                                     data-item-section="{{ item.Section__c | default(section) }}" 
+                                                     data-item-category="{{ selected_category }}"
+                                                     data-item-description="{{ item.Description__c | default('No description') }}"
+                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
+                                                    {% if item.Section__c == 'Soft Drinks' %}
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
+                                                    {% else %}
+                                                        <button class="btn btn-primary" 
+                                                                data-bs-toggle="modal" 
+                                                                data-bs-target="#itemModal" 
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                            ADD
+                                                        </button>
+                                                        {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
+                                                            <span class="customisable-text">Customisable</span>
+                                                        {% endif %}
                                                     {% endif %}
-                                                {% endif %}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
+                                    {% if item.Section__c != 'Soft Drinks' %}
+                                        <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                            <h6>Description</h6>
+                                            <p>{{ item.Description__c | default('No description available') }}</p>
+                                            <h6>Ingredients</h6>
+                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
+                                            <h6>Nutritional Info</h6>
+                                            <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
+                                            <h6>Allergens</h6>
+                                            <p>{{ item.Allergens__c | default('None listed') }}</p>
+                                        </div>
+                                    {% endif %}
                                 </div>
-                                {% if item.Section__c != 'Soft Drinks' %}
-                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
-                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
-                                        <h6>Description</h6>
-                                        <p>{{ item.Description__c | default('No description available') }}</p>
-                                        <h6>Ingredients</h6>
-                                        <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
-                                        <h6>Nutritional Info</h6>
-                                        <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
-                                        <h6>Allergens</h6>
-                                        <p>{{ item.Allergens__c | default('None listed') }}</p>
-                                    </div>
-                                {% endif %}
                             </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            {% else %}
-                <p>No menu items available for this category. Please try a different filter or contact support.</p>
-            {% endfor %}
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            {% endif %}
         {% endif %}
     </div>
 
@@ -1669,7 +1324,7 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;" loading="lazy">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
@@ -1704,29 +1359,29 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="soft-drink-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Soft Drink Image">
+                    <img id="soft-drink-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Soft Drink Image" loading="lazy">
                     <div class="text-center mb-3">
                         <h5 id="soft-drink-name"></h5>
                         <p id="soft-drink-price"></p>
                     </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>
+                        <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly aria-label="Selected quantity">
                         <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" 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>
+                        <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>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" aria-label="Add soft drink to cart">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Modal for Microphone Input -->
+    <!-- Microphone Modal -->
     <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">
@@ -1737,7 +1392,7 @@
                     <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">
+                        <img id="mic-item-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Spoken Item Image" loading="lazy">
                         <h5 id="mic-item-name" class="fw-bold text-center"></h5>
                     </div>
                 </div>
@@ -1748,727 +1403,668 @@
         </div>
     </div>
 
-    <!-- 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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // Menu items array for client-side filtering
+        let isProcessingRequest = false;
+        let currentSoftDrinkButton = null;
+        let baseItemPrice = 0;
+        let recognition = null;
         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) }}",
-                        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 }}"
+                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}"
                     },
                 {% endfor %}
             {% endfor %}
         ];
-
-        // Lazy load videos and initialize menu cards
-        document.addEventListener('DOMContentLoaded', function () {
-            // Ensure menu cards are visible on load
-            document.querySelectorAll('.menu-card').forEach(card => {
-                card.classList.add('visible');
+        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();
             });
-
-            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');
+        }
+        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;
+                                    }
+                                });
+                            }
+                        });
+                    });
+                    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": [],
+                        };
+                        for (let spice of window.most_common_addons) {
+                            const isSpiceLevel = ["Mild", "Medium", "Spicy", "Extra Spicy"].includes(spice);
+                            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;
+                            }
                         }
-                        observer.unobserve(video);
+                        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);
+                            }
+                        });
                     }
+                })
+                .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>';
                 });
-            }, { threshold: 0.1 });
-
-            videos.forEach(video => {
-                observer.observe(video);
+        }
+        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;
             });
-
-            // Search functionality
-            const searchBar = document.getElementById('searchBar');
-            const searchIcon = document.getElementById('searchIcon');
-            const searchButton = document.getElementById('searchButton');
-
-            function performSearch() {
-                const searchTerm = searchBar.value.toLowerCase();
-                const menuCards = document.querySelectorAll('.menu-card');
-                if (menuCards.length === 0) {
-                    console.warn('No menu cards found. Check if menu items are loaded.');
-                    return;
+        }
+        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;
                 }
-                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');
-                    }
-                });
             }
-
-            searchBar.addEventListener('input', performSearch);
-            searchIcon.addEventListener('click', performSearch);
-            searchButton.addEventListener('click', performSearch);
-
-            // 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');
+            if (!custom.checked && !veg.checked) {
+                custom.checked = false;
+            }
+            form.submit();
+        }
+        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();
+                }
+            }
+        }
+        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 = '';
+        }
+        document.addEventListener('DOMContentLoaded', function () {
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarIcon.addEventListener('click', function () {
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
-
-            // Close dropdown when clicking outside
             document.addEventListener('click', function (event) {
-                if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
+                if (!avatarContainer.contains(event.target)) {
                     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)}§ion=${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 dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    dropdownMenu.style.display = 'none';
+                });
             });
-
-            document.getElementById('decreaseQuantity').addEventListener('click', function () {
-                let quantity = parseInt(document.getElementById('quantityInput').value);
-                if (quantity > 1) {
-                    document.getElementById('quantityInput').value = quantity - 1;
-                }
+            const searchBar = document.getElementById('searchBar');
+            searchBar.addEventListener('click', function () {
+                window.location.href = '/search';
             });
-
-            // 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 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();
+                            }
+                        }
                     });
-                });
-
-                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();
+                    if (buttonContainer) {
+                        if (section === 'Soft Drinks') {
+                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
                         } else {
-                            alert('Error adding item to cart: ' + data.message);
+                            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('item                            itemModal'));
+                            modal.show();
                         }
-                    })
-                    .catch(error => {
-                        console.error('Error adding to cart:', error);
-                        alert('Error adding item to cart.');
-                    });
-            };
+                    }
+                    localStorage.removeItem('selectedItem');
+                } catch (e) {
+                    console.error('Error parsing selectedItem:', e);
+                    localStorage.removeItem('selectedItem');
+                }
+            }
 
-            // 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');
+            // Image-to-Video hover/touch functionality
+            const mediaWrappers = document.querySelectorAll('.media-wrapper');
+            mediaWrappers.forEach(wrapper => {
+                const video = wrapper.querySelector('.menu-video');
+                const image = wrapper.querySelector('.menu-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;
+                // Hover events for desktop
+                wrapper.addEventListener('mouseenter', () => {
+                    image.classList.add('hidden');
+                    video.classList.add('active');
+                    video.play().catch(err => console.error('Video play error:', err));
+                });
 
-                const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
-                modal.show();
-            };
+                wrapper.addEventListener('mouseleave', () => {
+                    video.classList.remove('active');
+                    image.classList.remove('hidden');
+                    video.pause();
+                    video.currentTime = 0;
+                });
 
-            // 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;
-            };
+                // Touch events for mobile
+                wrapper.addEventListener('touchstart', (e) => {
+                    e.preventDefault();
+                    wrapper.classList.add('touched');
+                    image.classList.add('hidden');
+                    video.classList.add('active');
+                    video.play().catch(err => console.error('Video play error:', err));
+                });
 
-            // 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');
+                wrapper.addEventListener('touchend', () => {
+                    wrapper.classList.remove('touched');
+                    video.classList.remove('active');
+                    image.classList.remove('hidden');
+                    video.pause();
+                    video.currentTime = 0;
+                });
+            });
 
-                const cartItem = {
-                    name,
-                    price,
-                    quantity,
-                    section,
-                    category,
-                    addons: [],
-                    instructions: ''
-                };
+            // IntersectionObserver for lazy-loaded videos
+            const videoObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const video = entry.target;
+                        video.load();
+                        observer.unobserve(video);
+                    }
+                });
+            }, { threshold: 0.2 });
 
-                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 {
-                            alert('Error adding item to cart: ' + data.message);
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error adding to cart:', error);
-                        alert('Error adding item to cart.');
-                    });
-            };
+            document.querySelectorAll('.menu-video').forEach(video => {
+                videoObserver.observe(video);
+            });
 
-            // 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';
-                }
-            }
+            // Toggle item details
+            document.querySelectorAll('.toggle-details').forEach(toggle => {
+                toggle.addEventListener('click', function () {
+                    const details = document.getElementById(`details-${this.getAttribute('data-item-name').replace(/\s+/g, '-')}`);
+                    if (details) {
+                        details.classList.toggle('show');
+                        this.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
+                    }
+                });
+            });
 
-            // Handle filter toggle
-            window.handleToggle = function (type) {
-                const vegToggle = document.getElementById('veg-toggle');
-                const customToggle = document.getElementById('category-CustomizedDish');
-                let url = '/menu?';
+            document.getElementById('increaseQuantity').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+                document.getElementById('quantityInput').value = quantity + 1;
+                updateModalPrice();
+            });
 
-                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';
+            document.getElementById('decreaseQuantity').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+                if (quantity > 1) {
+                    document.getElementById('quantityInput').value = quantity - 1;
+                    updateModalPrice();
                 }
+            });
 
-                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();
+            // Initialize cart UI
+            fetch('/cart')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success && data.cart) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.warn('No cart data found, checking localStorage');
+                        const localCart = getCartLocalStorage();
+                        updateCartUI(localCart);
                     }
-                }
-            }
+                })
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
+                    const localCart = getCartLocalStorage();
+                    updateCartUI(localCart);
+                });
 
-            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 = '';
-            }
+            // Microphone functionality
+            const micIcon = document.getElementById('micIcon');
+            micIcon.addEventListener('click', function () {
+                if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+                    alert('Sorry, your browser does not support speech recognition.');
+                    return;
+                }
 
-            // Add Microphone Functionality
-            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            if (SpeechRecognition) {
-                recognition = new SpeechRecognition();
-                recognition.continuous = false;
-                recognition.interimResults = false;
+                recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
                 recognition.lang = 'en-US';
+                recognition.interimResults = true;
+                recognition.maxAlternatives = 1;
 
-                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();
-                };
+                const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                micModal.show();
+                micIcon.classList.add('active');
+
+                recognition.start();
 
                 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;
+                    const transcript = event.results[0][0].transcript.toLowerCase().trim();
+                    document.getElementById('mic-status').textContent = `Heard: "${transcript}"`;
 
-                    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;
-                        }
-                    });
+                    const matchedItem = menuItems.find(item =>
+                        item.name.toLowerCase().includes(transcript) ||
+                        transcript.includes(item.name.toLowerCase())
+                    );
 
-                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                    if (matchedItem && matchedCard) {
+                    if (matchedItem && event.results[0].isFinal) {
                         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'));
+                        document.getElementById('mic-item-details').style.display = 'block';
+                        document.getElementById('mic-item-name').textContent = matchedItem.name;
+                        document.getElementById('mic-item-image').src = matchedItem.image || '/static/placeholder.jpg';
+                        document.getElementById('mic-item-details').classList.add('show');
+
+                        const menuCard = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"][data-item-section="${matchedItem.section}"]`);
+                        if (menuCard) {
+                            menuCard.classList.add('highlighted');
+                            menuCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                            const buttonContainer = menuCard.querySelector('.button-container');
+                            if (buttonContainer) {
+                                if (matchedItem.section === 'Soft Drinks') {
+                                    setTimeout(() => {
+                                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                        stopSpeechRecognition();
+                                    }, 1000);
                                 } 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();
+                                    setTimeout(() => {
+                                        showItemDetails(name, price, image, description, matchedItem.section, category);
+                                        const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                        itemModal.show();
+                                        stopSpeechRecognition();
+                                    }, 1000);
                                 }
-                                resetMicModal();
-                            }, 1500);
+                            }
                         }
-                    } else {
-                        document.getElementById('mic-status').textContent = 'No matching item found. Try again...';
-                        setTimeout(() => {
-                            micModal.hide();
-                            resetMicModal();
-                            alert('No matching menu item found for: ' + transcript);
-                        }, 1500);
                     }
                 };
 
-                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();
+                    if (micIcon.classList.contains('active')) {
+                        recognition.start();
                     }
                 };
-            }
 
-            document.getElementById('micIcon').addEventListener('click', function () {
-                if (!recognition) {
-                    alert('Speech recognition is not supported in this browser.');
-                    return;
-                }
-                if (this.classList.contains('active')) {
+                recognition.onerror = function (event) {
+                    console.error('Speech recognition error:', event.error);
+                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
                     stopSpeechRecognition();
-                } else {
-                    resetMicModal();
-                    this.classList.add('active');
-                    recognition.start();
-                }
+                };
             });
 
-            // Initialize cart item count
-            fetch('/get_cart_item_count')
-                .then(response => response.json())
-                .then(data => {
-                    updateCartItemCount(data.cart_item_count);
-                })
-                .catch(error => {
-                    console.error('Error fetching cart item count:', 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 {
-                        appendMessage('bot', `No worries! Want to modify anything or start over? Type 'modify' or 'start over'.`);
-                        conversationState = 'modify';
-                    }
-                } 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 = '';
-                    }
-                }
-
-                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;
-            }
-
-            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);
-                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();
-                    updateSession();
-                }
-            }
-
-            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);
+            // Autocomplete for custom dish description
+            const descriptionInput = document.getElementById('custom-dish-description');
+            const suggestionsContainer = document.getElementById('descriptionSuggestions');
+
+            if (descriptionInput && suggestionsContainer) {
+                descriptionInput.addEventListener('input', debounce(function () {
+                    const query = this.value.toLowerCase();
+                    suggestionsContainer.innerHTML = '';
+                    if (query.length < 2) return;
+
+                    const filteredIngredients = ingredientsList.filter(ingredient =>
+                        ingredient.toLowerCase().includes(query)
+                    );
+
+                    filteredIngredients.forEach(ingredient => {
+                        const suggestion = document.createElement('div');
+                        suggestion.classList.add('suggestion-item');
+                        suggestion.textContent = ingredient;
+                        suggestion.style.padding = '8px';
+                        suggestion.style.cursor = 'pointer';
+                        suggestion.style.backgroundColor = '#fff';
+                        suggestion.style.borderBottom = '1px solid #ddd';
+                        suggestion.addEventListener('click', () => {
+                            descriptionInput.value = ingredient;
+                            suggestionsContainer.innerHTML = '';
+                        });
+                        suggestionsContainer.appendChild(suggestion);
                     });
-                    chatMessages.appendChild(selectedContainer);
-                    chatMessages.scrollTop = chatMessages.scrollHeight;
-                }
-            }
-
-            function displayCustomizationIngredients() {
-                const ingredients = [
-                    { name: 'Spicy Sauce', image: '/static/spicy_sauce.jpg' },
-                    { name: 'Cheese', image: '/static/cheese.jpg' },
-                    { name: 'Herbs', image: '/static/herbs.jpg' }
-                ];
+                }, 300));
 
-                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);
+                document.addEventListener('click', function (event) {
+                    if (!suggestionsContainer.contains(event.target) && event.target !== descriptionInput) {
+                        suggestionsContainer.innerHTML = '';
+                    }
                 });
-                chatMessages.appendChild(ingredientsList);
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-
-                displaySelectedCustomizationIngredients();
             }
-
-            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