diff --git a/public/js/search.js b/public/js/search.js
index a77c961..3994754 100644
--- a/public/js/search.js
+++ b/public/js/search.js
@@ -11,52 +11,39 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     async function search(query) {
-
         try {
-            // const response = await fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?c=${query}`);
-
             const response = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`);
             const data = await response.json();
-            const limit = 3;
+            const limit = 3; // Limit the number of displayed meals to 3
             const meals = data.meals.slice(0, limit);
-
-            console.log(meals);
+    
             searchResults.innerHTML = '';
             if (data.meals === null) {
                 searchResults.innerHTML = '<p>No results found.</p>';
                 return;
             }
-
-            // meals.forEach(meal => {
-            // const resultItem = document.createElement('div');
-            // resultItem.className = 'result-item'; // Add this line to set the class
-            // resultItem.innerHTML = `<p>${meal.strMeal}</p><img src="${meal.strMealThumb}" alt="${meal.strMeal}" class="meal-image">`;
-            // searchResults.appendChild(resultItem);
-            // });
-
+    
             meals.forEach(meal => {
-                const resultItem = document.createElement('a')
+                const resultItem = document.createElement('a');
                 resultItem.setAttribute('data-food-id', meal.idMeal);
                 resultItem.href = `/templates/dish.html?id=${meal.idMeal}`;
-                // resultItem.href = '/templates/dish?id=' + meal.idMeal;
                 resultItem.className = 'result-item';
-                // Create a separate div for the image
+    
                 const imageContainer = document.createElement('div');
                 imageContainer.className = 'image-container';
                 imageContainer.innerHTML = `
                     <img src="${meal.strMealThumb}" alt="${meal.strMeal}" class="meal-image">
-                    <p class="meal-name"> ${meal.strMeal} </p>
-                    `;
-                const mealName = document.createElement('p');
-                // mealName.textContent = meal.strMeal;
+                    <p class="meal-name">${meal.strMeal}</p>
+                `; // Meal name is placed below the image
+    
                 resultItem.appendChild(imageContainer);
-                resultItem.appendChild(mealName);
                 searchResults.appendChild(resultItem);
             });
         } catch (error) {
             console.log('An error occurred while fetching data:', error);
         }
     }
+    
 
     searchInput.addEventListener('keydown', function (event) {
         if (event.keyCode === 13) {
diff --git a/public/styles/help.css b/public/styles/help.css
index 65d16c0..4473a19 100644
--- a/public/styles/help.css
+++ b/public/styles/help.css
@@ -55,6 +55,13 @@ body {
     color: #facc22;
 }
 
+.meal-name {
+    font-size: 1rem;
+    text-align: center;
+    margin-top: 0.5rem;
+}
+
+
 .button {
     background-color:#facc22; /* Green */
     border: none;