Index: NutriMatch/Areas/Identity/Pages/Account/Login.cshtml.cs
===================================================================
--- NutriMatch/Areas/Identity/Pages/Account/Login.cshtml.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Areas/Identity/Pages/Account/Login.cshtml.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,16 +1,9 @@
 
 #nullable disable
-using System;
-using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Identity;
-using Microsoft.AspNetCore.Identity.UI.Services;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
-using Microsoft.Extensions.Logging;
 using NutriMatch.Models;
 namespace NutriMatch.Areas.Identity.Pages.Account
Index: NutriMatch/Areas/Identity/Pages/Account/Logout.cshtml.cs
===================================================================
--- NutriMatch/Areas/Identity/Pages/Account/Logout.cshtml.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Areas/Identity/Pages/Account/Logout.cshtml.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,11 +1,7 @@
 
 #nullable disable
-using System;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
-using Microsoft.Extensions.Logging;
 using NutriMatch.Models;
 namespace NutriMatch.Areas.Identity.Pages.Account
Index: NutriMatch/Areas/Identity/Pages/Account/Manage/Index.cshtml.cs
===================================================================
--- NutriMatch/Areas/Identity/Pages/Account/Manage/Index.cshtml.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Areas/Identity/Pages/Account/Manage/Index.cshtml.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -3,6 +3,4 @@
 using System;
 using System.ComponentModel.DataAnnotations;
-using System.Text.Encodings.Web;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
Index: NutriMatch/Areas/Identity/Pages/Account/MyAccount.cshtml.cs
===================================================================
--- NutriMatch/Areas/Identity/Pages/Account/MyAccount.cshtml.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Areas/Identity/Pages/Account/MyAccount.cshtml.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,15 +1,9 @@
 
 #nullable disable
-using System;
 using System.ComponentModel.DataAnnotations;
-using System.IO;
-using System.Linq;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
-using Microsoft.Extensions.Logging;
 using NutriMatch.Models;
 namespace NutriMatch.Areas.Identity.Pages.Account
@@ -141,14 +135,14 @@
                 await _signInManager.RefreshSignInAsync(user);
                 StatusMessage = "Your profile has been updated successfully.";
-                _logger.LogInformation("User {UserId} updated profile. New Email: {Email}, New UserName: {UserName}", 
+                _logger.LogInformation("User {UserId} updated profile. New Email: {Email}, New UserName: {UserName}",
                     user.Id, user.Email, user.UserName);
-                    if (!updateResult.Succeeded)
-                    {
-                        foreach (var error in updateResult.Errors)
-                        {
-                            _logger.LogError("Update failed: {Error}", error.Description);
-                            ModelState.AddModelError(string.Empty, error.Description);
-                        }
-                    }
+                if (!updateResult.Succeeded)
+                {
+                    foreach (var error in updateResult.Errors)
+                    {
+                        _logger.LogError("Update failed: {Error}", error.Description);
+                        ModelState.AddModelError(string.Empty, error.Description);
+                    }
+                }
             }
             else
@@ -196,6 +190,6 @@
                 UserName = user.UserName
             };
-            ProfilePictureUrl = !string.IsNullOrEmpty(user.ProfilePictureUrl) 
-                ? user.ProfilePictureUrl 
+            ProfilePictureUrl = !string.IsNullOrEmpty(user.ProfilePictureUrl)
+                ? user.ProfilePictureUrl
                 : GetProfilePictureUrl(user.Id);
         }
Index: NutriMatch/Areas/Identity/Pages/Account/Register.cshtml.cs
===================================================================
--- NutriMatch/Areas/Identity/Pages/Account/Register.cshtml.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Areas/Identity/Pages/Account/Register.cshtml.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
-using System.Linq;
 using System.Text;
 using System.Text.Encodings.Web;
-using System.Threading;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authentication;
-using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Identity.UI.Services;
@@ -14,5 +8,4 @@
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.AspNetCore.WebUtilities;
-using Microsoft.Extensions.Logging;
 using NutriMatch.Models;
 
@@ -85,5 +78,5 @@
             returnUrl ??= Url.Content("~/");
             ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();
-            
+
             if (ModelState.IsValid)
             {
Index: NutriMatch/Controllers/AdminController.cs
===================================================================
--- NutriMatch/Controllers/AdminController.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Controllers/AdminController.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -5,4 +5,5 @@
 using Microsoft.EntityFrameworkCore;
 using System.Text.Json;
+
 [Authorize(Roles = "Admin")]
 public class AdminController : Controller
@@ -10,4 +11,5 @@
     private readonly AppDbContext _context;
     private readonly ILogger<AdminController> _logger;
+
     public AdminController(AppDbContext context, ILogger<AdminController> logger)
     {
@@ -15,4 +17,5 @@
         _logger = logger;
     }
+
     public async Task<IActionResult> Index()
     {
@@ -21,6 +24,8 @@
             .Include(r => r.User)
             .ToListAsync();
+
         return View(pendingRecipes);
     }
+
     [HttpPost]
     [ValidateAntiForgeryToken]
@@ -33,14 +38,20 @@
                 return Json(new { success = false, message = "Recipe ID is required." });
             }
+
             int recipeId = recipeIdProp.GetInt32();
+
+
             var recipe = await _context.Recipes
                 .Include(r => r.RecipeIngredients)
                 .ThenInclude(ri => ri.Ingredient)
                 .FirstOrDefaultAsync(r => r.Id == recipeId);
+
             if (recipe == null)
             {
                 return Json(new { success = false, message = "Recipe not found." });
             }
+
             recipe.RecipeStatus = "Accepted";
+
             if (recipe.HasPendingIngredients == true)
             {
@@ -48,11 +59,15 @@
                     .Where(ri => ri.Ingredient.Status == "Pending")
                     .Select(ri => ri.Ingredient);
+
                 foreach (var ingredient in pendingIngredients)
                 {
-                    ingredient.Status = null; 
+                    ingredient.Status = null;
                 }
-                recipe.HasPendingIngredients = false; 
-            }
+
+                recipe.HasPendingIngredients = false;
+            }
+
             await _context.SaveChangesAsync();
+
             return Json(new { message = "Recipe approved successfully.", success = true });
         }
@@ -63,4 +78,5 @@
         }
     }
+
     [HttpPost]
     [ValidateAntiForgeryToken]
@@ -73,7 +89,9 @@
                 return Json(new { success = false, message = "Recipe ID is required." });
             }
+
             int recipeId = recipeIdProp.GetInt32();
             string reason = request.TryGetProperty("reason", out var reasonProp) ? reasonProp.GetString() : "No reason provided.";
             string notes = request.TryGetProperty("notes", out var notesProp) ? notesProp.GetString() : "No notes provided.";
+
             var recipe = await _context.Recipes.FindAsync(recipeId);
             if (recipe == null)
@@ -81,8 +99,11 @@
                 return Json(new { success = false, message = "Recipe not found." });
             }
+
             recipe.RecipeStatus = "Declined";
             recipe.DeclineReason = reason ?? string.Empty;
             recipe.AdminComment = notes ?? string.Empty;
+
             await _context.SaveChangesAsync();
+
             return Json(new { message = "Recipe declined successfully.", success = true });
         }
@@ -93,4 +114,5 @@
         }
     }
+
     [HttpPost]
     [ValidateAntiForgeryToken]
@@ -103,11 +125,14 @@
                 return Json(new { success = false, message = "Recipe IDs are required." });
             }
+
             List<int> recipeIds = recipeIdsProp.EnumerateArray()
                 .Select(x => x.GetInt32())
                 .ToList();
+
             if (!recipeIds.Any())
             {
                 return Json(new { success = false, message = "No recipe IDs provided." });
             }
+
             var recipes = await _context.Recipes
                 .Include(r => r.RecipeIngredients)
@@ -115,12 +140,15 @@
                 .Where(r => recipeIds.Contains(r.Id))
                 .ToListAsync();
+
             if (!recipes.Any())
             {
                 return Json(new { success = false, message = "No recipes found." });
             }
+
             int approvedCount = 0;
             foreach (var recipe in recipes)
             {
                 recipe.RecipeStatus = "Accepted";
+
                 if (recipe.HasPendingIngredients == true)
                 {
@@ -128,17 +156,23 @@
                         .Where(ri => ri.Ingredient.Status == "Pending")
                         .Select(ri => ri.Ingredient);
+
                     foreach (var ingredient in pendingIngredients)
                     {
-                        ingredient.Status = null; 
+                        ingredient.Status = null;
                     }
-                    recipe.HasPendingIngredients = false; 
+
+                    recipe.HasPendingIngredients = false;
                 }
+
                 approvedCount++;
             }
+
             await _context.SaveChangesAsync();
-            return Json(new { 
-                message = $"{approvedCount} recipe(s) approved successfully.", 
-                success = true, 
-                approvedCount = approvedCount 
+
+            return Json(new
+            {
+                message = $"{approvedCount} recipe(s) approved successfully.",
+                success = true,
+                approvedCount = approvedCount
             });
         }
@@ -149,4 +183,5 @@
         }
     }
+
     public async Task<IActionResult> DeclineReasonModel(int? id)
     {
@@ -157,4 +192,5 @@
                 return NotFound();
             }
+
             var recipe = await _context.Recipes
                 .Include(r => r.User)
@@ -162,8 +198,10 @@
                 .ThenInclude(ri => ri.Ingredient)
                 .FirstOrDefaultAsync(m => m.Id == id);
+
             if (recipe == null)
             {
                 return NotFound();
             }
+
             return PartialView("_RecipeDeclineAdminPartial", recipe);
         }
@@ -174,4 +212,5 @@
         }
     }
+
     [HttpGet]
     public async Task<IActionResult> GetIngredientReview(int id)
@@ -182,8 +221,10 @@
                 .Where(i => i.Id == id && i.Status == "Pending")
                 .FirstOrDefaultAsync();
+
             if (ingredient == null)
             {
                 return NotFound("Ingredient not found or not pending review.");
             }
+
             return PartialView("_IngredientReviewPartial", ingredient);
         }
Index: NutriMatch/Controllers/HomeController.cs
===================================================================
--- NutriMatch/Controllers/HomeController.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Controllers/HomeController.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -13,5 +13,5 @@
         private readonly AppDbContext _context;
         private readonly UserManager<User> _userManager;
-        public Home(AppDbContext context,UserManager<User> userManager)
+        public Home(AppDbContext context, UserManager<User> userManager)
         {
             _context = context;
@@ -20,53 +20,64 @@
 
         public async Task<IActionResult> Index()
-{   
-    var recipes = await _context.Recipes.Where(r => r.RecipeStatus == "Accepted").Include(r => r.User).Include(r => r.Ratings).Take(6).ToListAsync();
-    foreach (var recipe in recipes)
-    {
-        recipe.Rating = recipe.Ratings.Any() ? recipe.Ratings.Average(r => r.Rating) : 0;
-    }
-    var model = new HomeViewModel
-    {
-        Recipes = recipes,
-        Restaurants = await _context.Restaurants.ToListAsync()                
-    };
+        {
+            var recipes = await _context.Recipes
+                            .Where(r => r.RecipeStatus == "Accepted")
+                            .Include(r => r.User)
+                            .Include(r => r.Ratings)
+                            .Select(r => new
+                            {
+                                Recipe = r,
+                                AverageRating = r.Ratings.Any() ? r.Ratings.Average(rating => rating.Rating) : 0
+                            })
+                            .OrderByDescending(x => x.AverageRating)
+                            .Take(6)
+                            .Select(x => x.Recipe)
+                            .ToListAsync(); foreach (var recipe in recipes)
+            {
+                recipe.Rating = recipe.Ratings.Any() ? recipe.Ratings.Average(r => r.Rating) : 0;
+            }
+            var model = new HomeViewModel
+            {
+                Recipes = recipes,
+                Restaurants = await _context.Restaurants.ToListAsync()
+            };
 
-    var userId = User.FindFirstValue(ClaimTypes.NameIdentifier); 
-    var userRecipes = _context.Recipes.Where(r => r.UserId == userId).Include(r => r.User).Include(r => r.Ratings).ToList();
-    var recipeIds = userRecipes.Select(r => r.Id).ToList();
-    var ratings = _context.RecipeRatings.Where(r => recipeIds.Contains(r.RecipeId)).GroupBy(r => r.RecipeId);
+            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
+            var userRecipes = _context.Recipes.Where(r => r.UserId == userId).Include(r => r.User).Include(r => r.Ratings).ToList();
+            var recipeIds = userRecipes.Select(r => r.Id).ToList();
+            var ratings = _context.RecipeRatings.Where(r => recipeIds.Contains(r.RecipeId)).GroupBy(r => r.RecipeId);
 
-    foreach (var recipe in userRecipes)
-    {
-        recipe.Rating = recipe.Ratings.Any() ? recipe.Ratings.Average(r => r.Rating) : 0;
-    }
+            foreach (var recipe in userRecipes)
+            {
+                recipe.Rating = recipe.Ratings.Any() ? recipe.Ratings.Average(r => r.Rating) : 0;
+            }
 
-    double averageRating = 0;
-    foreach (var groop in ratings)
-    {
-        averageRating += groop.Average(r => r.Rating);
-    }    
+            double averageRating = 0;
+            foreach (var groop in ratings)
+            {
+                averageRating += groop.Average(r => r.Rating);
+            }
 
-    if (ratings.Count() > 0)
-    {
-        ViewBag.AverageRating = Math.Round(averageRating / ratings.Count(), 1);
-    }
-    else
-    {
-        ViewBag.AverageRating = 0; 
-    }
+            if (ratings.Count() > 0)
+            {
+                ViewBag.AverageRating = Math.Round(averageRating / ratings.Count(), 1);
+            }
+            else
+            {
+                ViewBag.AverageRating = 0;
+            }
 
-    ViewBag.UserRecipesCount = userRecipes.Count;
+            ViewBag.UserRecipesCount = userRecipes.Count;
 
 
-    if (User.Identity.IsAuthenticated && !string.IsNullOrEmpty(userId))
-    {
- 
-        var currentUser = await _userManager.GetUserAsync(User);
-        ViewBag.UserPicture = currentUser?.ProfilePictureUrl; 
-    }
+            if (User.Identity.IsAuthenticated && !string.IsNullOrEmpty(userId))
+            {
 
-    return View(model);
-}
+                var currentUser = await _userManager.GetUserAsync(User);
+                ViewBag.UserPicture = currentUser?.ProfilePictureUrl;
+            }
+
+            return View(model);
+        }
 
 
Index: NutriMatch/Controllers/MealPlanController.cs
===================================================================
--- NutriMatch/Controllers/MealPlanController.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Controllers/MealPlanController.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -5,4 +5,5 @@
 using NutriMatch.Services;
 using System.ComponentModel.DataAnnotations;
+
 namespace NutriMatch.Controllers
 {
@@ -12,4 +13,5 @@
         private readonly IMealPlanService _mealPlanService;
         private readonly UserManager<User> _userManager;
+
         public MealPlanController(IMealPlanService mealPlanService, UserManager<User> userManager)
         {
@@ -17,8 +19,10 @@
             _userManager = userManager;
         }
+
         public IActionResult Create()
         {
             return View();
         }
+
         [HttpPost]
         [ValidateAntiForgeryToken]
@@ -29,4 +33,5 @@
                 return View(model);
             }
+
             var user = await _userManager.GetUserAsync(User);
             if (user == null)
@@ -34,5 +39,7 @@
                 return RedirectToAction("Login", "Account");
             }
+
             var result = await _mealPlanService.GenerateWeeklyMealPlanAsync(user.Id, model);
+
             if (result.Success)
             {
@@ -46,4 +53,5 @@
             }
         }
+
         [HttpGet]
         public async Task<IActionResult> Details(int id)
@@ -54,4 +62,5 @@
                 return RedirectToAction("Login", "Account");
             }
+
             var mealPlan = await _mealPlanService.GetMealPlanByIdAsync(id, user.Id);
             if (mealPlan == null)
@@ -60,6 +69,8 @@
                 return RedirectToAction("Index");
             }
+
             return View(mealPlan);
         }
+
         [HttpGet]
         public async Task<IActionResult> Index()
@@ -70,7 +81,9 @@
                 return RedirectToAction("Login", "Account");
             }
+
             var mealPlans = await _mealPlanService.GetUserMealPlansAsync(user.Id);
             return View(mealPlans);
         }
+
         [HttpPost]
         [ValidateAntiForgeryToken]
@@ -82,5 +95,7 @@
                 return RedirectToAction("Login", "Account");
             }
+
             var result = await _mealPlanService.DeleteMealPlanAsync(id, user.Id);
+
             if (result)
             {
@@ -91,6 +106,8 @@
                 TempData["Error"] = "Failed to delete meal plan. It may not exist or you don't have permission to delete it.";
             }
+
             return RedirectToAction("Index");
         }
+
         [HttpPost]
         [ValidateAntiForgeryToken]
@@ -101,4 +118,5 @@
                 return BadRequest(ModelState);
             }
+
             var user = await _userManager.GetUserAsync(User);
             if (user == null)
@@ -106,5 +124,7 @@
                 return Unauthorized();
             }
+
             var result = await _mealPlanService.GenerateWeeklyMealPlanAsync(user.Id, request);
+
             if (result.Success)
             {
@@ -116,4 +136,5 @@
             }
         }
+
         [HttpGet]
         public async Task<IActionResult> GetMealPlanJson(int id)
@@ -124,4 +145,5 @@
                 return Unauthorized();
             }
+
             var mealPlan = await _mealPlanService.GetMealPlanByIdAsync(id, user.Id);
             if (mealPlan == null)
@@ -129,6 +151,8 @@
                 return NotFound("Meal plan not found");
             }
+
             return Json(mealPlan);
         }
+
         [HttpPost]
         public async Task<IActionResult> GenerateFromApi([FromBody] MealPlanRequest request)
@@ -139,9 +163,11 @@
                 return Unauthorized("User not found");
             }
+
             var result = await _mealPlanService.GenerateWeeklyMealPlanAsync(user.Id, request);
+
             if (result.Success)
             {
-                return Ok(new 
-                { 
+                return Ok(new
+                {
                     success = true,
                     message = "Weekly meal plan generated successfully!",
Index: NutriMatch/Controllers/RecipesController.cs
===================================================================
--- NutriMatch/Controllers/RecipesController.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Controllers/RecipesController.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,20 +1,16 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.Mvc.Rendering;
 using Microsoft.EntityFrameworkCore;
 using NutriMatch.Data;
 using NutriMatch.Models;
 using System.Text.Json;
-using Microsoft.Identity.Client;
-using Microsoft.CodeAnalysis.CSharp.Syntax;
-using System.Runtime.Intrinsics.X86;
 using Microsoft.AspNetCore.Authorization;
 using System.Security.Claims;
 using Microsoft.AspNet.Identity;
+
+
+
 namespace NutriMatch.Controllers
 {
+
     public class MealKeywords
     {
@@ -23,6 +19,12 @@
         public List<string> Snack { get; set; }
     }
+
+
     public class RecipesController : Controller
     {
+
+
+
+
         private MealKeywords LoadKeywordsFromJson()
         {
@@ -37,4 +39,5 @@
                 };
             }
+
             var jsonString = System.IO.File.ReadAllText(filePath);
             var options = new JsonSerializerOptions
@@ -42,4 +45,5 @@
                 PropertyNameCaseInsensitive = true
             };
+
             return JsonSerializer.Deserialize<MealKeywords>(jsonString, options) ?? new MealKeywords
             {
@@ -49,8 +53,11 @@
             };
         }
+
         public List<string> GenerateRecipeTags(Recipe recipe, List<SelectedIngredient> ingredients)
         {
             var keywords = LoadKeywordsFromJson();
+
             var tags = new HashSet<string>();
+
             string NormalizeWord(string word)
             {
@@ -64,4 +71,5 @@
                 return word;
             }
+
             int CountKeywordMatches(IEnumerable<string> words, HashSet<string> keywords, bool isTitle = false)
             {
@@ -75,4 +83,5 @@
                 return count;
             }
+
             bool ContainsKeyword(IEnumerable<string> words, HashSet<string> keywords)
             {
@@ -83,9 +92,12 @@
                 );
             }
+
             var breakfastKeywords = new HashSet<string>(keywords.Breakfast ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
             var mainKeywords = new HashSet<string>(keywords.Main ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
             var snackKeywords = new HashSet<string>(keywords.Snack ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
+
             var titleWords = recipe.Title.ToLower()
                 .Split(new char[] { ' ', '-', '_', ',', '.', '(', ')' }, StringSplitOptions.RemoveEmptyEntries);
+
             var ingredientWords = new HashSet<string>();
             foreach (var ing in ingredients)
@@ -95,17 +107,24 @@
                 foreach (var w in words) ingredientWords.Add(w);
             }
+
             var allWords = titleWords.Concat(ingredientWords).ToList();
+
             int breakfastScore = CountKeywordMatches(titleWords, breakfastKeywords, true) +
                                  CountKeywordMatches(ingredientWords, breakfastKeywords, false);
+
             int mainScore = CountKeywordMatches(titleWords, mainKeywords, true) +
                             CountKeywordMatches(ingredientWords, mainKeywords, false);
+
             int snackScore = CountKeywordMatches(titleWords, snackKeywords, true) +
                              CountKeywordMatches(ingredientWords, snackKeywords, false);
+
             int lunchScore = mainScore;
             int dinnerScore = mainScore;
+
             float calories = Math.Max(recipe.Calories, 1);
             float proteinRatio = (recipe.Protein * 4) / calories * 100;
             float carbRatio = (recipe.Carbs * 4) / calories * 100;
             float fatRatio = (recipe.Fat * 9) / calories * 100;
+
             if (calories < 150)
             {
@@ -143,4 +162,6 @@
                 snackScore -= 4;
             }
+
+
             if (proteinRatio > 30)
             {
@@ -161,4 +182,6 @@
                 lunchScore -= 1;
             }
+
+
             if (carbRatio > 60)
             {
@@ -172,4 +195,6 @@
                 lunchScore += 1;
             }
+
+
             if (fatRatio > 40)
             {
@@ -178,4 +203,6 @@
                 breakfastScore -= 1;
             }
+
+
             var results = new List<(string tag, int score)>
         {
@@ -185,5 +212,7 @@
             ("snack", snackScore)
         }.OrderByDescending(x => x.score).ToList();
+
             tags.Add(results[0].tag);
+
             for (int i = 1; i < results.Count; i++)
             {
@@ -191,6 +220,9 @@
                     tags.Add(results[i].tag);
             }
+
             return tags.ToList();
         }
+
+
         float ConvertType(float number, string unit)
         {
@@ -217,8 +249,11 @@
                     return 0;
             }
+
             return result;
         }
+
         private readonly AppDbContext _context;
         private readonly ILogger<RecipesController> _logger;
+
         public RecipesController(AppDbContext context, ILogger<RecipesController> logger)
         {
@@ -226,16 +261,28 @@
             _logger = logger;
         }
-        public async Task<IActionResult> Index()
+
+
+        public async Task<IActionResult> Index(int page = 1, int pageSize = 6)
         {
             var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
+
+            var totalRecipes = await _context.Recipes
+                .Where(r => r.RecipeStatus == "Accepted")
+                .CountAsync();
+
             var recipes = await _context.Recipes
                 .Where(r => r.RecipeStatus == "Accepted")
                 .Include(r => r.User)
                 .Include(r => r.Ratings)
+                .OrderByDescending(r => r.CreatedAt)
+                .Skip((page - 1) * pageSize)
+                .Take(pageSize)
                 .ToListAsync();
+
             foreach (var recipe in recipes)
             {
                 recipe.Rating = recipe.Ratings.Any() ? recipe.Ratings.Average(r => r.Rating) : 0;
             }
+
             List<int> favoriteRecipeIds = new List<int>();
             if (!string.IsNullOrEmpty(userId))
@@ -246,8 +293,41 @@
                     .ToListAsync();
             }
+
+            if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
+            {
+                var response = new
+                {
+                    recipes = recipes.Select(recipe => new
+                    {
+                        Id = recipe.Id,
+                        Title = recipe.Title,
+                        ImageUrl = recipe.ImageUrl,
+                        Rating = recipe.Rating,
+                        UserName = recipe.User.UserName,
+                        CreatedAt = recipe.CreatedAt.ToString("MMM dd, yyyy"),
+                        Calories = recipe.Calories,
+                        Protein = recipe.Protein,
+                        Carbs = recipe.Carbs,
+                        Fat = recipe.Fat,
+                        IsOwner = recipe.User.Id == userId,
+                        IsFavorited = favoriteRecipeIds.Contains(recipe.Id)
+                    }),
+                    hasMorePages = (page * pageSize) < totalRecipes,
+                    currentPage = page,
+                    totalRecipes = totalRecipes
+                };
+
+                return Json(response);
+            }
+
             ViewBag.FavoriteRecipeIds = favoriteRecipeIds;
             ViewBag.userId = userId;
+            ViewBag.HasMorePages = (page * pageSize) < totalRecipes;
+            ViewBag.CurrentPage = page;
+            ViewBag.TotalRecipes = totalRecipes;
+
             return View(recipes);
         }
+
         [Route("Recipes/Details/{id}")]
         public async Task<IActionResult> Details(int? id, bool isOwner = false, String recipeDetailsDisplayContorol = "")
@@ -257,12 +337,17 @@
                 return NotFound();
             }
+
+
             var recipe = await _context.Recipes.Include(r => r.User)
             .Include(r => r.RecipeIngredients)
             .ThenInclude(ri => ri.Ingredient)
             .FirstOrDefaultAsync(m => m.Id == id);
+
+
             if (recipe == null)
             {
                 return NotFound();
             }
+
             if (recipeDetailsDisplayContorol == "Declined")
             {
@@ -273,6 +358,8 @@
                 var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
                 bool actualIsOwner = !string.IsNullOrEmpty(userId) && recipe.UserId == userId;
+
                 var (averageRating, totalRatings, userRating, hasUserRated) =
                     await GetRatingDataAsync(id.Value, userId);
+
                 bool isFavorited = false;
                 if (!string.IsNullOrEmpty(userId))
@@ -281,4 +368,5 @@
                         .AnyAsync(fr => fr.UserId == userId && fr.RecipeId == id.Value);
                 }
+
                 if (recipeDetailsDisplayContorol == "Buttons")
                 {
@@ -289,5 +377,6 @@
                     ViewBag.InIndex = true;
                 }
-                    ViewBag.IsOwner = actualIsOwner;
+
+                ViewBag.IsOwner = actualIsOwner;
                 ViewBag.AverageRating = averageRating;
                 ViewBag.TotalRatings = totalRatings;
@@ -295,7 +384,9 @@
                 ViewBag.HasUserRated = hasUserRated;
                 ViewBag.IsFavorited = isFavorited;
+
                 return PartialView("_RecipeDetailsPartial", recipe);
             }
         }
+
         [Authorize]
         public IActionResult Create()
@@ -303,10 +394,16 @@
             return View();
         }
+
+
         [HttpPost]
         [ValidateAntiForgeryToken]
         public async Task<IActionResult> Create([Bind("Title,Instructions")] Recipe recipe)
         {
+
+
+
             if (ModelState.IsValid)
             {
+
                 var file = Request.Form.Files.GetFile("RecipeImage");
                 if (file != null && file.Length > 0)
@@ -315,8 +412,10 @@
                     var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
                     var filePath = Path.Combine(uploadsFolder, uniqueFileName);
+
                     using (var stream = new FileStream(filePath, FileMode.Create))
                     {
                         await file.CopyToAsync(stream);
                     }
+
                     recipe.ImageUrl = "/images/" + uniqueFileName;
                 }
@@ -325,4 +424,5 @@
                     Console.WriteLine("No file uploaded or file is empty.");
                 }
+
                 recipe.UserId = User.FindFirstValue(ClaimTypes.NameIdentifier);
                 recipe.Type = new List<string> { " " };
@@ -335,4 +435,6 @@
                 float totalCarbs = 0;
                 float totalFat = 0;
+
+
                 bool hasPendingIngredients = false;
                 foreach (var i in ingredients)
@@ -345,9 +447,14 @@
                         Quantity = i.Quantity
                     });
+
                     Ingredient tempIngredient = _context.Ingredients.Find(i.Id);
+
+
+
                     totalCalories += ConvertType(tempIngredient.Calories, i.Unit) * i.Quantity;
                     totalProtein += ConvertType(tempIngredient.Protein, i.Unit) * i.Quantity;
                     totalCarbs += ConvertType(tempIngredient.Carbs, i.Unit) * i.Quantity;
                     totalFat += ConvertType(tempIngredient.Fat, i.Unit) * i.Quantity;
+
                     if (tempIngredient.Status == "Pending")
                     {
@@ -355,15 +462,25 @@
                     }
                 }
+
                 recipe.Calories = MathF.Round(totalCalories, MidpointRounding.AwayFromZero);
                 recipe.Protein = MathF.Round(totalProtein, MidpointRounding.AwayFromZero);
                 recipe.Carbs = MathF.Round(totalCarbs, MidpointRounding.AwayFromZero);
                 recipe.Fat = MathF.Round(totalFat, MidpointRounding.AwayFromZero);
-                if (hasPendingIngredients){
+
+                if (hasPendingIngredients)
+                {
                     recipe.HasPendingIngredients = true;
                 }
+
                 recipe.Type = GenerateRecipeTags(recipe, ingredients);
+
                 _context.Update(recipe);
+
+
                 await _context.SaveChangesAsync();
                 return RedirectToAction(nameof(Index));
+
+
+
             }
             else
@@ -377,11 +494,15 @@
                     }
                 }
+
+
                 Console.WriteLine("Model state is invalid. Please check the input data.");
             }
             return View(recipe);
         }
+
         [HttpGet]
         public async Task<IActionResult> Edit(int? id, bool requiresChange = false)
         {
+
             if (requiresChange)
             {
@@ -392,8 +513,12 @@
                 ViewBag.RequireChange = false;
             }
+
             if (id == null)
             {
                 return NotFound();
             }
+
+
+
             var recipe = await _context.Recipes
         .Include(r => r.RecipeIngredients)
@@ -404,14 +529,20 @@
                 return NotFound();
             }
+
             if (recipe.UserId != User.FindFirstValue(System.Security.Claims.ClaimTypes.NameIdentifier))
             {
                 return Forbid();
             }
+
             return View(recipe);
         }
+
+
         [HttpPost]
         [ValidateAntiForgeryToken]
         public async Task<IActionResult> Edit([Bind("Id,Title,Instructions")] Recipe recipe)
         {
+
+
             if (ModelState.IsValid)
             {
@@ -422,12 +553,15 @@
                     var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
                     var filePath = Path.Combine(uploadsFolder, uniqueFileName);
+
                     using (var stream = new FileStream(filePath, FileMode.Create))
                     {
                         await file.CopyToAsync(stream);
                     }
+
                     recipe.ImageUrl = "/images/" + uniqueFileName;
                 }
                 else
                 {
+
                     var existing = Request.Form["ExistingImageUrl"].ToString();
                     if (existing != null)
@@ -436,5 +570,7 @@
                     }
                 }
+
                 await _context.RecipeIngredients.Where(ri => ri.RecipeId == recipe.Id).ExecuteDeleteAsync();
+
                 string selectedIngredients = Request.Form["Ingredients"];
                 List<SelectedIngredient> ingredients = JsonSerializer.Deserialize<List<SelectedIngredient>>(selectedIngredients);
@@ -443,4 +579,5 @@
                 float totalCarbs = 0;
                 float totalFat = 0;
+
                 foreach (var i in ingredients)
                 {
@@ -452,5 +589,7 @@
                         Quantity = i.Quantity
                     });
+
                     Ingredient tempIngredient = _context.Ingredients.Find(i.Id);
+
                     totalCalories += ConvertType(tempIngredient.Calories, i.Unit) * i.Quantity;
                     totalProtein += ConvertType(tempIngredient.Protein, i.Unit) * i.Quantity;
@@ -458,4 +597,5 @@
                     totalFat += ConvertType(tempIngredient.Fat, i.Unit) * i.Quantity;
                 }
+
                 recipe.Calories = MathF.Round(totalCalories, MidpointRounding.AwayFromZero);
                 recipe.Protein = MathF.Round(totalProtein, MidpointRounding.AwayFromZero);
@@ -463,6 +603,9 @@
                 recipe.Fat = MathF.Round(totalFat, MidpointRounding.AwayFromZero);
                 recipe.UserId = User.FindFirstValue(ClaimTypes.NameIdentifier);
+
                 recipe.Type = GenerateRecipeTags(recipe, ingredients);
+
                 _context.Update(recipe);
+
                 await _context.SaveChangesAsync();
                 return RedirectToAction(nameof(MyRecipes));
@@ -478,8 +621,13 @@
                     }
                 }
+
                 Console.WriteLine("Model state is invalid. Please check the input data.");
             }
+
             return View(recipe);
         }
+
+
+
         public async Task<IActionResult> Delete(int? id)
         {
@@ -488,4 +636,5 @@
                 return NotFound();
             }
+
             var recipe = await _context.Recipes.Include(r => r.RecipeIngredients)
                 .FirstOrDefaultAsync(m => m.Id == id);
@@ -494,6 +643,9 @@
                 return NotFound();
             }
+
             return PartialView("_RecipeDeletePartial", recipe);
         }
+
+
         [HttpPost, ActionName("Delete")]
         [ValidateAntiForgeryToken]
@@ -505,11 +657,15 @@
                 _context.Recipes.Remove(recipe);
             }
+
             await _context.SaveChangesAsync();
             return RedirectToAction(nameof(Index));
         }
+
         private bool RecipeExists(int id)
         {
             return _context.Recipes.Any(e => e.Id == id);
         }
+
+
         public async Task<ActionResult<List<Ingredient>>> getSuggestions([FromQuery] String query)
         {
@@ -519,8 +675,12 @@
             .Take(5)
             .ToListAsync();
+
             return suggestions;
         }
+
+
         public ActionResult MyRecipes()
         {
+
             var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
             var userRecipes = _context.Recipes.Where(r => r.UserId == userId).Include(r => r.User).Include(r => r.Ratings).ToList();
@@ -531,9 +691,12 @@
                 recipe.Rating = recipe.Ratings.Any() ? recipe.Ratings.Average(r => r.Rating) : 0;
             }
+
             double averageRating = 0;
             foreach (var groop in ratings)
             {
                 averageRating += groop.Average(r => r.Rating);
-            }
+
+            }
+
             if (ratings.Count() > 0)
             {
@@ -544,19 +707,27 @@
                 ViewBag.AverageRating = 0;
             }
+
+
+
             return View(userRecipes);
         }
+
         [HttpPost]
         [Authorize]
         public async Task<IActionResult> Rate([FromBody] JsonElement body)
         {
+
             int recipeId = body.GetProperty("recipeId").GetInt32();
             double rating = body.GetProperty("rating").GetDouble();
+
             try
             {
                 var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
+
                 if (string.IsNullOrEmpty(userId))
                 {
                     return Json(new { success = false, message = "User not authenticated" });
                 }
+
                 if (rating < 1 || rating > 5)
                 {
@@ -565,4 +736,5 @@
                     return Json(new { success = false, message = "Rating must be between 1 and 5" });
                 }
+
                 var recipe = await _context.Recipes.FindAsync(recipeId);
                 if (recipe == null)
@@ -570,6 +742,8 @@
                     return Json(new { success = false, message = "Recipe not found" });
                 }
+
                 var existingRating = await _context.RecipeRatings
                     .FirstOrDefaultAsync(r => r.UserId == userId && r.RecipeId == recipeId);
+
                 if (existingRating != null)
                 {
@@ -587,11 +761,15 @@
                     _context.RecipeRatings.Add(newRating);
                 }
+
                 await _context.SaveChangesAsync();
+
                 var ratings = await _context.RecipeRatings
                     .Where(r => r.RecipeId == recipeId)
                     .Select(r => r.Rating)
                     .ToListAsync();
+
                 var averageRating = ratings.Any() ? Math.Round(ratings.Average(), 1) : 0;
                 var totalRatings = ratings.Count;
+
                 return Json(new
                 {
@@ -607,4 +785,5 @@
             }
         }
+
         [HttpPost]
         [Authorize]
@@ -612,26 +791,34 @@
         public async Task<IActionResult> RemoveRating([FromBody] JsonElement body)
         {
+
             int recipeId = body.GetProperty("recipeId").GetInt32();
             try
             {
                 var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
+
                 if (string.IsNullOrEmpty(userId))
                 {
                     return Json(new { success = false, message = "User not authenticated" });
                 }
+
                 var existingRating = await _context.RecipeRatings
                     .FirstOrDefaultAsync(r => r.UserId == userId && r.RecipeId == recipeId);
+
                 if (existingRating == null)
                 {
                     return Json(new { success = false, message = "No rating found to remove" });
                 }
+
                 _context.RecipeRatings.Remove(existingRating);
                 await _context.SaveChangesAsync();
+
                 var ratings = await _context.RecipeRatings
                     .Where(r => r.RecipeId == recipeId)
                     .Select(r => r.Rating)
                     .ToListAsync();
+
                 var averageRating = ratings.Any() ? Math.Round(ratings.Average(), 1) : 0;
                 var totalRatings = ratings.Count;
+
                 return Json(new
                 {
@@ -644,7 +831,10 @@
             catch (Exception ex)
             {
+
+
                 return Json(new { success = false, message = "An error occurred while removing your rating" });
             }
         }
+
         private async Task<(double averageRating, int totalRatings, double userRating, bool hasUserRated)>
             GetRatingDataAsync(int recipeId, string userId = null)
@@ -654,8 +844,11 @@
                 .Select(r => new { r.Rating, r.UserId })
                 .ToListAsync();
+
             var averageRating = ratings.Any() ? Math.Round(ratings.Average(r => r.Rating), 1) : 0;
             var totalRatings = ratings.Count;
+
             double userRating = 0;
             bool hasUserRated = false;
+
             if (!string.IsNullOrEmpty(userId))
             {
@@ -667,6 +860,8 @@
                 }
             }
+
             return (averageRating, totalRatings, userRating, hasUserRated);
         }
+
         [HttpPost]
         [ValidateAntiForgeryToken]
@@ -680,5 +875,7 @@
                     return Json(new { success = false, message = "User not authenticated" });
                 }
+
                 int recipeId = request.GetProperty("recipeId").GetInt32();
+
                 var recipe = await _context.Recipes.FindAsync(recipeId);
                 if (recipe == null)
@@ -686,7 +883,10 @@
                     return Json(new { success = false, message = "Recipe not found" });
                 }
+
                 var existingFavorite = await _context.FavoriteRecipes
                     .FirstOrDefaultAsync(fr => fr.UserId == userId && fr.RecipeId == recipeId);
+
                 bool isFavorited;
+
                 if (existingFavorite != null)
                 {
@@ -704,5 +904,7 @@
                     isFavorited = true;
                 }
+
                 await _context.SaveChangesAsync();
+
                 return Json(new
                 {
@@ -721,7 +923,11 @@
             }
         }
+
+
+
         [HttpPost]
         public async Task<IActionResult> AddIngredient([FromBody] JsonElement request)
         {
+
             String Name = request.GetProperty("Name").GetString();
             float Calories = request.GetProperty("Calories").GetSingle();
@@ -734,20 +940,25 @@
                 return BadRequest("Anti-forgery token missing.");
             }
+
             if (!ModelState.IsValid)
             {
                 return BadRequest(ModelState);
             }
+
             if (string.IsNullOrWhiteSpace(Name))
             {
                 return BadRequest("Ingredient name is required.");
             }
+
             try
             {
                 var existingIngredient = await _context.Ingredients
                     .FirstOrDefaultAsync(i => i.Name.ToLower() == Name.ToLower());
+
                 if (existingIngredient != null)
                 {
                     return BadRequest("An ingredient with this name already exists.");
                 }
+
                 var ingredient = new Ingredient
                 {
@@ -759,6 +970,8 @@
                     Status = "Pending"
                 };
+
                 _context.Ingredients.Add(ingredient);
                 await _context.SaveChangesAsync();
+
                 return Json(new
                 {
@@ -777,4 +990,12 @@
             }
         }
+
+
+
+
+
     }
-} 
+
+
+}
+
Index: NutriMatch/Controllers/RestaurantsController.cs
===================================================================
--- NutriMatch/Controllers/RestaurantsController.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Controllers/RestaurantsController.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -10,13 +10,20 @@
 using System.Text.Json;
 using NutriMatch.Models;
+
 namespace NutriMatch.Controllers
 {
+
     public class RestaurantsController : Controller
     {
         private readonly AppDbContext _context;
+
+
         public RestaurantsController(AppDbContext context)
         {
+
             _context = context;
         }
+
+
         public async Task<IActionResult> Index()
         {
@@ -24,5 +31,7 @@
             return View(restaurants);
         }
-        public async Task<IActionResult> GetRestaurantMeals(int? id,int? minCalories, int? maxCalories, int? minProtein, int? maxProtein, int? minCarbs, int? maxCarbs, int? minFat, int? maxFat)
+
+
+        public async Task<IActionResult> GetRestaurantMeals(int? id, int? minCalories, int? maxCalories, int? minProtein, int? maxProtein, int? minCarbs, int? maxCarbs, int? minFat, int? maxFat)
         {
             if (id == null)
@@ -30,4 +39,5 @@
                 return NotFound();
             }
+
             var restaurant = await _context.Restaurants.Include(r => r.RestaurantMeals)
                 .FirstOrDefaultAsync(m => m.Id == id);
@@ -36,4 +46,7 @@
                 return NotFound();
             }
+
+
+
             var filteredMeals = restaurant.RestaurantMeals
         .Where(r =>
@@ -41,4 +54,5 @@
             (maxCalories == null || r.Calories <= maxCalories) &&
             (minProtein == null || r.Protein >= minProtein) &&
+
             (maxProtein == null || r.Protein <= maxProtein) &&
             (minFat == null || r.Fat >= minFat) &&
@@ -48,10 +62,15 @@
         )
         .ToList();
+
             Console.WriteLine($"Total meals for restaurant {id}: {filteredMeals.Count}");
+
+
             return PartialView("_RestaurantMealsPartial", filteredMeals);
         }
+
         public async Task ClassifyAllRestaurantMeals()
         {
             var meals = await GetUnclassifiedMealsFromDatabase();
+
             foreach (var meal in meals)
             {
@@ -60,4 +79,5 @@
             }
         }
+
         private MealKeywords LoadKeywordsFromJson()
         {
@@ -65,11 +85,12 @@
             if (!System.IO.File.Exists(filePath))
             {
-                return new MealKeywords 
-                { 
-                    Breakfast = new List<string>(), 
-                    Main = new List<string>(), 
-                    Snack = new List<string>() 
+                return new MealKeywords
+                {
+                    Breakfast = new List<string>(),
+                    Main = new List<string>(),
+                    Snack = new List<string>()
                 };
             }
+
             var jsonString = System.IO.File.ReadAllText(filePath);
             var options = new JsonSerializerOptions
@@ -77,72 +98,89 @@
                 PropertyNameCaseInsensitive = true
             };
-            return JsonSerializer.Deserialize<MealKeywords>(jsonString, options) ?? new MealKeywords 
-            { 
-                Breakfast = new List<string>(), 
-                Main = new List<string>(), 
-                Snack = new List<string>() 
+
+            return JsonSerializer.Deserialize<MealKeywords>(jsonString, options) ?? new MealKeywords
+            {
+                Breakfast = new List<string>(),
+                Main = new List<string>(),
+                Snack = new List<string>()
             };
         }
-    public List<string> GenerateMealTypes(RestaurantMeal meal)
-    {
-        if (meal.Calories == 0 || 
-            (!string.IsNullOrEmpty(meal.ItemDescription) && 
-             (meal.ItemDescription.ToLower().Contains("wine") || 
-              meal.ItemDescription.ToLower().Contains("beer") || 
-              meal.ItemDescription.ToLower().Contains("spirits") ||   
-              meal.ItemDescription.ToLower().Contains("beverages")
-              )))
-        {
-            return new List<string> { "drink" };
-        }
-        var keywords = LoadKeywordsFromJson();
-        var tags = new HashSet<string>();
-        string NormalizeWord(string word)
-        {
-            word = word.ToLower().Trim();
-            if (word.EndsWith("ies") && word.Length > 4)
-                return word.Substring(0, word.Length - 3) + "y";
-            if (word.EndsWith("es") && word.Length > 3)
-                return word.Substring(0, word.Length - 2);
-            if (word.EndsWith("s") && word.Length > 3 && !word.EndsWith("ss"))
-                return word.Substring(0, word.Length - 1);
-            return word;
-        }
-        int CountKeywordMatches(IEnumerable<string> words, HashSet<string> keywords, bool isTitle = false)
-        {
-            int count = 0;
-            foreach (var word in words)
-            {
-                bool matches = keywords.Contains(word) || keywords.Contains(NormalizeWord(word));
-                if (matches)
-                    count += isTitle ? 3 : 1;
-            }
-            return count;
-        }
-        var breakfastKeywords = new HashSet<string>(keywords.Breakfast ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
-        var mainKeywords = new HashSet<string>(keywords.Main ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
-        var snackKeywords = new HashSet<string>(keywords.Snack ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
-        var titleWords = meal.ItemName.ToLower()
-            .Split(new char[] { ' ', '-', '_', ',', '.', '(', ')' }, StringSplitOptions.RemoveEmptyEntries);
-        var descriptionWords = new HashSet<string>();
-        if (!string.IsNullOrEmpty(meal.ItemDescription))
-        {
-            var words = meal.ItemDescription.ToLower()
-                .Split(new char[] { ' ', '-', '_', ',', '.', '(', ')', ';', ':' }, StringSplitOptions.RemoveEmptyEntries);
-            foreach (var w in words) descriptionWords.Add(w);
-        }
-        var allWords = titleWords.Concat(descriptionWords).ToList();
-        int breakfastScore = CountKeywordMatches(titleWords, breakfastKeywords, true) +
-                            CountKeywordMatches(descriptionWords, breakfastKeywords, false);
-        int mainScore = CountKeywordMatches(titleWords, mainKeywords, true) +
-                        CountKeywordMatches(descriptionWords, mainKeywords, false);
-        int snackScore = CountKeywordMatches(titleWords, snackKeywords, true) +
-                        CountKeywordMatches(descriptionWords, snackKeywords, false);
-        int lunchScore = mainScore;
-        int dinnerScore = mainScore;
+
+        public List<string> GenerateMealTypes(RestaurantMeal meal)
+        {
+
+            if (meal.Calories == 0 ||
+                (!string.IsNullOrEmpty(meal.ItemDescription) &&
+                 (meal.ItemDescription.ToLower().Contains("wine") ||
+                  meal.ItemDescription.ToLower().Contains("beer") ||
+                  meal.ItemDescription.ToLower().Contains("spirits") ||
+                  meal.ItemDescription.ToLower().Contains("beverages")
+                  )))
+            {
+                return new List<string> { "drink" };
+            }
+
+            var keywords = LoadKeywordsFromJson();
+
+            var tags = new HashSet<string>();
+
+            string NormalizeWord(string word)
+            {
+                word = word.ToLower().Trim();
+                if (word.EndsWith("ies") && word.Length > 4)
+                    return word.Substring(0, word.Length - 3) + "y";
+                if (word.EndsWith("es") && word.Length > 3)
+                    return word.Substring(0, word.Length - 2);
+                if (word.EndsWith("s") && word.Length > 3 && !word.EndsWith("ss"))
+                    return word.Substring(0, word.Length - 1);
+                return word;
+            }
+
+            int CountKeywordMatches(IEnumerable<string> words, HashSet<string> keywords, bool isTitle = false)
+            {
+                int count = 0;
+                foreach (var word in words)
+                {
+                    bool matches = keywords.Contains(word) || keywords.Contains(NormalizeWord(word));
+                    if (matches)
+                        count += isTitle ? 3 : 1;
+                }
+                return count;
+            }
+
+            var breakfastKeywords = new HashSet<string>(keywords.Breakfast ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
+            var mainKeywords = new HashSet<string>(keywords.Main ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
+            var snackKeywords = new HashSet<string>(keywords.Snack ?? new List<string>(), StringComparer.OrdinalIgnoreCase);
+
+            var titleWords = meal.ItemName.ToLower()
+                .Split(new char[] { ' ', '-', '_', ',', '.', '(', ')' }, StringSplitOptions.RemoveEmptyEntries);
+
+            var descriptionWords = new HashSet<string>();
+            if (!string.IsNullOrEmpty(meal.ItemDescription))
+            {
+                var words = meal.ItemDescription.ToLower()
+                    .Split(new char[] { ' ', '-', '_', ',', '.', '(', ')', ';', ':' }, StringSplitOptions.RemoveEmptyEntries);
+                foreach (var w in words) descriptionWords.Add(w);
+            }
+
+            var allWords = titleWords.Concat(descriptionWords).ToList();
+
+            int breakfastScore = CountKeywordMatches(titleWords, breakfastKeywords, true) +
+                                CountKeywordMatches(descriptionWords, breakfastKeywords, false);
+
+            int mainScore = CountKeywordMatches(titleWords, mainKeywords, true) +
+                            CountKeywordMatches(descriptionWords, mainKeywords, false);
+
+            int snackScore = CountKeywordMatches(titleWords, snackKeywords, true) +
+                            CountKeywordMatches(descriptionWords, snackKeywords, false);
+
+            int lunchScore = mainScore;
+            int dinnerScore = mainScore;
+
             float calories = meal.Calories;
             float proteinRatio = (meal.Protein * 4) / calories * 100;
             float carbRatio = (meal.Carbs * 4) / calories * 100;
             float fatRatio = (meal.Fat * 9) / calories * 100;
+
             if (calories < 250)
             {
@@ -165,4 +203,6 @@
                 snackScore -= 2;
             }
+
+
             if (proteinRatio >= 25)
             {
@@ -175,4 +215,5 @@
                 snackScore += 1;
             }
+
             if (fatRatio > 30)
             {
@@ -180,29 +221,37 @@
                 snackScore += 1;
             }
-        var results = new List<(string tag, int score)>
-        {
-            ("breakfast", breakfastScore),
-            ("lunch", lunchScore),
-            ("dinner", dinnerScore),
-            ("snack", snackScore)
-        }.OrderByDescending(x => x.score).ToList();
-        tags.Add(results[0].tag);
-        for (int i = 1; i < results.Count; i++)
-        {
-            if (results[i].score > 0 && results[i].score >= results[0].score * 0.6)
-                tags.Add(results[i].tag);
-        }
-        return tags.ToList();
-    }
-    private async Task<List<RestaurantMeal>> GetUnclassifiedMealsFromDatabase()
-    {
-        return await _context.RestaurantMeals.ToListAsync();
-    }
-    private async Task UpdateMealTypesInDatabase(int mealId, List<string> mealTypes)
-    {
-        var meal = await _context.RestaurantMeals.FindAsync(mealId);
-        meal.Type = mealTypes;
-        await _context.SaveChangesAsync();
-    }
+
+            var results = new List<(string tag, int score)>
+            {
+                ("breakfast", breakfastScore),
+                ("lunch", lunchScore),
+                ("dinner", dinnerScore),
+                ("snack", snackScore)
+            }.OrderByDescending(x => x.score).ToList();
+
+            tags.Add(results[0].tag);
+
+            for (int i = 1; i < results.Count; i++)
+            {
+                if (results[i].score > 0 && results[i].score >= results[0].score * 0.6)
+                    tags.Add(results[i].tag);
+            }
+
+            return tags.ToList();
+        }
+
+        private async Task<List<RestaurantMeal>> GetUnclassifiedMealsFromDatabase()
+        {
+            return await _context.RestaurantMeals.ToListAsync();
+        }
+
+        private async Task UpdateMealTypesInDatabase(int mealId, List<string> mealTypes)
+        {
+            var meal = await _context.RestaurantMeals.FindAsync(mealId);
+            meal.Type = mealTypes;
+            await _context.SaveChangesAsync();
+
+        }
+
     }
 }
Index: NutriMatch/Models/MealSlot.cs
===================================================================
--- NutriMatch/Models/MealSlot.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Models/MealSlot.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,3 +1,4 @@
 using System.ComponentModel.DataAnnotations;
+
 namespace NutriMatch.Models
 {
Index: NutriMatch/Models/Recipe.cs
===================================================================
--- NutriMatch/Models/Recipe.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Models/Recipe.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,3 +1,3 @@
-using System;   
+using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
@@ -7,4 +7,5 @@
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;
+
 namespace NutriMatch.Models
 {
@@ -17,5 +18,5 @@
         [ValidateNever]
         [NotMapped]
-        public double Rating { get; set; } 
+        public double Rating { get; set; }
         [ValidateNever]
         public virtual List<RecipeIngredient> RecipeIngredients { get; set; }
@@ -34,5 +35,7 @@
         public String AdminComment { get; set; } = String.Empty;
         public String DeclineReason { get; set; } = String.Empty;
+
         public bool? HasPendingIngredients { get; set; }
+
         [ValidateNever]
         public String UserId { get; set; }
Index: triMatch/ScaffoldingReadMe.txt
===================================================================
--- NutriMatch/ScaffoldingReadMe.txt	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ 	(revision )
@@ -1,2 +1,0 @@
-Support for ASP.NET Core Identity was added to your project.
-For setup and configuration information, see https://go.microsoft.com/fwlink/?linkid=2116645.
Index: NutriMatch/Services/IMealPlanService.cs
===================================================================
--- NutriMatch/Services/IMealPlanService.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Services/IMealPlanService.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -6,5 +6,4 @@
     {
         Task<MealPlanResult> GenerateWeeklyMealPlanAsync(string userId, MealPlanRequest request);
-        Task<List<Recipe>> GetSuitableRecipesAsync(string mealType, DailyMacros targetMacros, List<string> dietaryRestrictions);
         Task<List<RestaurantMeal>> GetSuitableRestaurantMealsAsync(string mealType, DailyMacros targetMacros);
         Task<WeeklyMealPlan> GetMealPlanByIdAsync(int id, string userId);
Index: NutriMatch/Services/MealPlanService.cs
===================================================================
--- NutriMatch/Services/MealPlanService.cs	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Services/MealPlanService.cs	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,7 +1,5 @@
-using System.ComponentModel.DataAnnotations;
 using Microsoft.EntityFrameworkCore;
 using NutriMatch.Data;
 using NutriMatch.Models;
-using NutriMatch.Services;
 namespace NutriMatch.Services
 {
@@ -64,5 +62,5 @@
                             else
                             {
-                                var recipe = await SelectRecipeAsync(mealType, targetMacros, request.DietaryRestrictions);
+                                var recipe = await SelectRecipeAsync(mealType, targetMacros);
                                 mealSlot.Recipe = recipe;
                                 mealSlot.IsRestaurantMeal = false;
@@ -71,5 +69,5 @@
                         else
                         {
-                            var recipe = await SelectRecipeAsync(mealType, targetMacros, request.DietaryRestrictions);
+                            var recipe = await SelectRecipeAsync(mealType, targetMacros);
                             if (recipe != null)
                             {
@@ -95,5 +93,5 @@
                             MealType = "snack"
                         };
-                        var snackRecipe = await SelectRecipeAsync("snack", snackMacros, request.DietaryRestrictions);
+                        var snackRecipe = await SelectRecipeAsync("snack", snackMacros);
                         if (snackRecipe != null)
                         {
@@ -171,5 +169,5 @@
             };
         }
-        private async Task<Recipe> SelectRecipeAsync(string mealType, DailyMacros targetMacros, List<string> dietaryRestrictions)
+        private async Task<Recipe> SelectRecipeAsync(string mealType, DailyMacros targetMacros)
         {
             var query = _context.Recipes
@@ -178,9 +176,5 @@
             if (!string.IsNullOrEmpty(mealType))
             {
-                query = query.Where(r => r.Type.Contains(mealType) || r.Type.Count == 0);
-            }
-            foreach (var restriction in dietaryRestrictions)
-            {
-                query = query.Where(r => !r.Type.Contains(restriction));
+                query = query.Where(r => r.Type.Contains(mealType));
             }
             var recipes = await query.ToListAsync();
@@ -189,5 +183,4 @@
                 recipes = await _context.Recipes
                     .Where(r => r.RecipeStatus == "Accepted")
-                    .Take(50)
                     .ToListAsync();
             }
@@ -209,7 +202,7 @@
             if (!string.IsNullOrEmpty(mealType))
             {
-                query = query.Where(rm => rm.Type.Contains(mealType) || rm.Type.Count == 0);
-            }
-            var restaurantMeals = await query.Take(50).ToListAsync();
+                query = query.Where(rm => rm.Type.Contains(mealType));
+            }
+            var restaurantMeals = await query.ToListAsync();
             if (!restaurantMeals.Any()) return null;
             var scoredMeals = restaurantMeals.Select(meal => new
@@ -241,5 +234,5 @@
         private float CalculateRemainingCalories(List<MealSlot> dayMeals, float targetCalories)
         {
-            var totalCalories = dayMeals.Sum(ms => 
+            var totalCalories = dayMeals.Sum(ms =>
                 ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Calories ?? 0) : (ms.Recipe?.Calories ?? 0));
             return Math.Max(0, targetCalories - totalCalories);
@@ -262,19 +255,4 @@
             return dailyTotals;
         }
-        public async Task<List<Recipe>> GetSuitableRecipesAsync(string mealType, DailyMacros targetMacros, List<string> dietaryRestrictions)
-        {
-            var query = _context.Recipes
-                .Include(r => r.RecipeIngredients)
-                .Where(r => r.RecipeStatus == "Accepted");
-            if (!string.IsNullOrEmpty(mealType))
-            {
-                query = query.Where(r => r.Type.Contains(mealType));
-            }
-            foreach (var restriction in dietaryRestrictions)
-            {
-                query = query.Where(r => !r.Type.Contains(restriction));
-            }
-            return await query.ToListAsync();
-        }
         public async Task<List<RestaurantMeal>> GetSuitableRestaurantMealsAsync(string mealType, DailyMacros targetMacros)
         {
@@ -288,4 +266,5 @@
         public async Task<WeeklyMealPlan> GetMealPlanByIdAsync(int id, string userId)
         {
+#pragma warning disable CS8603
             return await _context.WeeklyMealPlans
                 .Include(wmp => wmp.MealSlots)
Index: NutriMatch/Views/Admin/Index.cshtml
===================================================================
--- NutriMatch/Views/Admin/Index.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Admin/Index.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -9,229 +9,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="~/css/RecipeIndex.css" rel="stylesheet">
+    <link href="~/css/AdminIndex.css" rel="stylesheet">
     <title>NutriMatch - Admin Panel</title>
-    <style>
-        .admin-header {
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-            border-radius: 12px;
-            padding: 2rem;
-            border: 1px solid #e2e8f0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        }
-        .admin-title {
-            font-size: 2rem;
-            font-weight: 700;
-            color: #1f2937;
-            margin: 0;
-        }
-        .admin-subtitle {
-            font-size: 1.1rem;
-            margin: 0;
-            margin-top: 0.5rem;
-        }
-        .admin-stats .badge {
-            padding: 0.5rem 1rem;
-            font-weight: 600;
-        }
-        .bulk-actions-section {
-            background: #fff;
-            border: 2px dashed #d1d5db;
-            border-radius: 8px;
-            padding: 1.5rem;
-            transition: all 0.3s ease;
-            display: none; 
-        }
-        .bulk-actions-section.show {
-            display: block;
-            animation: slideDown 0.3s ease;
-        }
-        .bulk-actions-section:hover {
-            border-color: var(--nutri-green);
-            background: #f0fdf4;
-        }
-        .admin-recipe-card {
-            position: relative;
-            border: 2px solid #e5e7eb;
-            transition: all 0.3s ease;
-        }
-        .admin-recipe-card:hover {
-            border-color: var(--nutri-green);
-            transform: translateY(-2px);
-        }
-        .admin-recipe-card.selected {
-            border-color: #3b82f6;
-            background: #eff6ff;
-        }
-        .recipe-select {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            z-index: 10;
-        }
-        .recipe-checkbox {
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            accent-color: #3b82f6;
-        }
-        .recipe-status-badge {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            z-index: 10;
-        }
-        .recipe-status-badge .badge {
-            font-size: 0.75rem;
-            padding: 0.25rem 0.5rem;
-        }
-        .admin-actions-buttons {
-            border-top: 1px solid #e5e7eb;
-            padding-top: 1rem;
-        }
-        .admin-actions-buttons .btn {
-            font-size: 0.875rem;
-            padding: 0.375rem 0.75rem;
-            font-weight: 500;
-        }
-        .decline-reason-section {
-            background: #fef2f2;
-            border: 1px solid #fecaca;
-            border-radius: 6px;
-            padding: 1rem;
-            animation: slideDown 0.3s ease;
-        }
-        @@keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .empty-state {
-            background: #f9fafb;
-            border: 2px dashed #d1d5db;
-            border-radius: 12px;
-            margin: 2rem 0;
-        }
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            z-index: 9999;
-            color: white;
-        }
-        .loading-overlay .spinner-border {
-            width: 3rem;
-            height: 3rem;
-        }
-        .recipe-image {
-            cursor: pointer;
-            transition: opacity 0.3s ease;
-        }
-        .recipe-image:hover {
-            opacity: 0.9;
-        }
-        .recipe-title {
-            cursor: pointer;
-            transition: color 0.3s ease;
-        }
-        .recipe-title:hover {
-            color: var(--nutri-green);
-        }
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-        .btn-success:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3);
-        }
-        .btn-danger:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
-        }
-        @@media (max-width: 768px) {
-            .admin-header {
-                text-align: center;
-                padding: 1.5rem;
-            }
-            .admin-title {
-                font-size: 1.5rem;
-            }
-            .bulk-actions-section {
-                padding: 1rem;
-            }
-            .admin-actions-buttons {
-                display: flex;
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-            .admin-actions-buttons .btn {
-                width: 100%;
-            }
-        }
-        .recipe-card.removing {
-            animation: fadeOut 0.5s ease forwards;
-        }
-        @@keyframes fadeOut {
-            from {
-                opacity: 1;
-                transform: scale(1);
-            }
-            to {
-                opacity: 0;
-                transform: scale(0.9);
-            }
-        }
-        .recipe-card.approved {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-        .recipe-card.declined {
-            border-color: #ef4444;
-            background: #fef2f2;
-        }
-        .form-select-sm, .form-control-sm {
-            font-size: 0.875rem;
-        }
-        .decline-reason-section .form-label {
-            color: #991b1b;
-            margin-bottom: 0.5rem;
-        }
-        .search-container {
-            background: white;
-            border-radius: 8px;
-            padding: 1.5rem;
-            border: 1px solid #e5e7eb;
-            margin-bottom: 2rem;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-        .admin-recipe-card .recipe-meta {
-            margin-bottom: 1rem;
-        }
-        .admin-recipe-card .recipe-meta span {
-            font-size: 0.875rem;
-            color: #6b7280;
-            margin-right: 1rem;
-        }
-        .toast-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 10000;
-        }
-        .toast {
-            margin-bottom: 1rem;
-        }
-    </style>
 </head>
 <body>
@@ -260,5 +37,6 @@
             <div class="row align-items-center">
                 <div class="col-md-8">
-                    <input type="text" class="form-control search-input" placeholder="Search pending recipes..." id="searchInput">
+                    <input type="text" class="form-control search-input" placeholder="Search pending recipes..."
+                        id="searchInput">
                 </div>
                 <div class="col-md-4">
@@ -298,7 +76,8 @@
         </div>
         <div class="recipe-grid" id="recipeGrid">
-            @foreach(var recipe in Model)
+            @foreach (var recipe in Model)
             {
-                <div class="recipe-card admin-recipe-card" data-recipe-id="@recipe.Id" data-calories="@recipe.Calories" data-protein="@recipe.Protein" data-carbs="@recipe.Carbs" data-fat="@recipe.Fat">
+                <div class="recipe-card admin-recipe-card" data-recipe-id="@recipe.Id" data-calories="@recipe.Calories"
+                    data-protein="@recipe.Protein" data-carbs="@recipe.Carbs" data-fat="@recipe.Fat">
                     <div class="recipe-select">
                         <input type="checkbox" class="recipe-checkbox" data-recipe-id="@recipe.Id">
@@ -309,13 +88,17 @@
                         </span>
                     </div>
-                    <img src="@recipe.ImageUrl" alt="@recipe.Title" class="recipe-image" onclick="showRecipeDetails(@recipe.Id, true,'Buttons')">
+                    <img src="@recipe.ImageUrl" alt="@recipe.Title" class="recipe-image"
+                        onclick="showRecipeDetails(@recipe.Id, true,'Buttons')">
                     <div class="recipe-content">
-                        <h3 class="recipe-title" onclick="showRecipeDetails(@recipe.Id, true)">@recipe.Title</h3>
+                        <h3 class="recipe-title" onclick="showRecipeDetails(@recipe.Id, true, 'Buttons')">
+                            @(recipe.Title.Length > 30
+                                                    ? recipe.Title.Substring(0, 30) + "…"
+                                                    : recipe.Title)</h3>
                         <div class="recipe-meta">
                             <span>
                                 <i class="fas fa-user"></i>
-                                @(recipe.User.UserName.Length > 23 
-                                    ? recipe.User.UserName.Substring(0, 23) + "…" 
-                                    : recipe.User.UserName)
+                                @(recipe.User.UserName.Length > 23
+                                                            ? recipe.User.UserName.Substring(0, 23) + "…"
+                                                            : recipe.User.UserName)
                             </span>
                             <span><i class="fas fa-calendar"></i>@recipe.CreatedAt.ToString("MMM dd, yyyy")</span>
@@ -343,5 +126,5 @@
             }
         </div>
-        @if(!Model.Any())
+        @if (!Model.Any())
         {
             <div class="empty-state text-center py-5">
@@ -364,6 +147,7 @@
     <div id="toast-container" class="toast-container"></div>
     <div id="declineModalContainer"></div>
-        <div class="modal fade" id="ingredientReviewModal" tabindex="-1" aria-labelledby="ingredientReviewModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+    <div class="modal fade" id="ingredientReviewModal" tabindex="-1" aria-labelledby="ingredientReviewModalLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
@@ -381,565 +165,11 @@
                 </div>
                 <div class="modal-footer">
-                    <button onclick="showRecipeModal()" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button onclick="showRecipeModal()" type="button" class="btn btn-secondary"
+                        data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
     </div>
-    <script src="~/js/RecipeIndex.js"></script>
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        initializeAdminPanel();
-    });
-    function initializeAdminPanel() {
-        setupBulkActions();
-        setupSearchFunctionality();
-        setupSortingFunctionality();
-        updateDisplayCount();
-    }
-    function setupBulkActions() {
-        const selectAllCheckbox = document.getElementById('selectAll');
-        const recipeCheckboxes = document.querySelectorAll('.recipe-checkbox');
-        const bulkApproveBtn = document.getElementById('bulkApprove');
-        selectAllCheckbox.addEventListener('change', function() {
-            recipeCheckboxes.forEach(checkbox => {
-                checkbox.checked = this.checked;
-                toggleRecipeSelection(checkbox);
-            });
-            updateBulkActionButtons();
-        });
-        recipeCheckboxes.forEach(checkbox => {
-            checkbox.addEventListener('change', function() {
-                toggleRecipeSelection(this);
-                updateBulkActionButtons();
-                updateSelectAllState();
-            });
-        });
-        bulkApproveBtn.addEventListener('click', handleBulkApprove);
-    }
-    function toggleRecipeSelection(checkbox) {
-        const recipeCard = checkbox.closest('.recipe-card');
-        if (checkbox.checked) {
-            recipeCard.classList.add('selected');
-        } else {
-            recipeCard.classList.remove('selected');
-        }
-    }
-    function updateBulkActionButtons() {
-        const selectedCheckboxes = document.querySelectorAll('.recipe-checkbox:checked');
-        const bulkApproveBtn = document.getElementById('bulkApprove');
-        const bulkActionsSection = document.getElementById('bulkActionsSection');
-        const hasSelections = selectedCheckboxes.length > 0;
-        bulkApproveBtn.disabled = !hasSelections;
-        if (hasSelections) {
-            bulkActionsSection.classList.add('show');
-        } else {
-            bulkActionsSection.classList.remove('show');
-        }
-    }
-    function updateSelectAllState() {
-        const selectAllCheckbox = document.getElementById('selectAll');
-        const recipeCheckboxes = document.querySelectorAll('.recipe-checkbox');
-        const checkedBoxes = document.querySelectorAll('.recipe-checkbox:checked');
-        if (checkedBoxes.length === 0) {
-            selectAllCheckbox.indeterminate = false;
-            selectAllCheckbox.checked = false;
-        } else if (checkedBoxes.length === recipeCheckboxes.length) {
-            selectAllCheckbox.indeterminate = false;
-            selectAllCheckbox.checked = true;
-        } else {
-            selectAllCheckbox.indeterminate = true;
-        }
-    }
-    function approveRecipe(recipeId) {
-        showLoadingOverlay();
-        const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
-        fetch('/Admin/ApproveRecipe', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'RequestVerificationToken': token
-            },
-            body: JSON.stringify({ recipeId: recipeId })
-        })
-        .then(response => response.json())
-        .then(data => {
-            hideLoadingOverlay();
-            if (data.success) {
-                showSuccess('Recipe approved successfully!');
-                removeRecipeCard(recipeId);
-                hideRecipeDetails();
-            } else {
-                showError(data.message || 'Failed to approve recipe');
-            }
-        })
-        .catch(error => {
-            hideLoadingOverlay();
-            console.error('Error:', error);
-            showError('An error occurred while approving the recipe');
-        });
-    }
-    function declineRecipe(recipeId) {
-    fetch(`/Admin/DeclineReasonModel/${recipeId}`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Failed to load decline modal');
-            }
-            return response.text();
-        })
-        .then(html => {
-            const modalContainer = document.getElementById('declineModalContainer');
-            modalContainer.innerHTML = html;
-            const scripts = modalContainer.querySelectorAll('script');
-            scripts.forEach(script => {
-                const newScript = document.createElement('script');
-                if (script.src) {
-                    newScript.src = script.src;
-                } else {
-                    newScript.textContent = script.textContent;
-                }
-                document.body.appendChild(newScript);
-                document.body.removeChild(newScript);
-            });
-             hideRecipeDetails();
-            const modalElement = modalContainer.querySelector('#recipeDeclineModal');
-            if (modalElement) {
-                const modal = new bootstrap.Modal(modalElement);
-                modal.show();
-            }
-        })
-        .catch(error => {
-            console.error('Error loading decline modal:', error);
-            showError('Failed to load decline modal');
-        });
-    }
-    function cancelDecline(recipeId) {
-        const declineSection = document.getElementById(`declineReason_${recipeId}`);
-        const recipeCard = declineSection.closest('.recipe-card');
-        declineSection.style.display = 'none';
-        const actionButtons = recipeCard.querySelectorAll('.admin-actions-buttons .btn');
-        actionButtons.forEach(btn => {
-            btn.style.display = '';
-        });
-        document.getElementById(`declineSelect_${recipeId}`).value = '';
-        document.getElementById(`declineNotes_${recipeId}`).value = '';
-    }
-    function confirmDecline(recipeId) {
-        const reason = document.getElementById(`declineSelect_${recipeId}`).value;
-        const notes = document.getElementById(`declineNotes_${recipeId}`).value;
-        if (!reason) {
-            showError('Please select a reason for declining the recipe');
-            return;
-        }
-        showLoadingOverlay();
-        const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
-        fetch('/Admin/DeclineRecipe', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'RequestVerificationToken': token
-            },
-            body: JSON.stringify({
-                recipeId: recipeId,
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            hideLoadingOverlay();
-            if (data.success) {
-                showSuccess('Recipe declined successfully!');
-                removeRecipeCard(recipeId);
-            } else {
-                showError(data.message || 'Failed to decline recipe');
-            }
-        })
-        .catch(error => {
-            hideLoadingOverlay();
-            console.error('Error:', error);
-            showError('An error occurred while declining the recipe');
-        });
-    }
-    function handleBulkApprove() {
-        const selectedRecipes = getSelectedRecipeIds();
-        if (selectedRecipes.length === 0) {
-            showError('No recipes selected');
-            return;
-        }
-        showLoadingOverlay();
-        const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
-        fetch('/Admin/BulkApproveRecipes', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'RequestVerificationToken': token
-            },
-            body: JSON.stringify({ recipeIds: selectedRecipes })
-        })
-        .then(response => response.json())
-        .then(data => {
-            hideLoadingOverlay();
-            if (data.success) {
-                showSuccess(`${data.approvedCount} recipe(s) approved successfully!`);
-                selectedRecipes.forEach(recipeId => removeRecipeCard(recipeId));
-            } else {
-                showError(data.message || 'Failed to approve recipes');
-            }
-        })
-        .catch(error => {
-            hideLoadingOverlay();
-            console.error('Error:', error);
-            showError('An error occurred during bulk approval');
-        });
-    }
-    function getSelectedRecipeIds() {
-        const selectedCheckboxes = document.querySelectorAll('.recipe-checkbox:checked');
-        return Array.from(selectedCheckboxes).map(checkbox => parseInt(checkbox.dataset.recipeId));
-    }
-    function setupSearchFunctionality() {
-        const searchInput = document.getElementById('searchInput');
-        let searchTimeout;
-        searchInput.addEventListener('input', function() {
-            clearTimeout(searchTimeout);
-            searchTimeout = setTimeout(() => {
-                filterRecipes();
-            }, 300);
-        });
-    }
-    function filterRecipes() {
-        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-        const recipeCards = document.querySelectorAll('.recipe-card');
-        let visibleCount = 0;
-        recipeCards.forEach(card => {
-            const title = card.querySelector('.recipe-title').textContent.toLowerCase();
-            const author = card.querySelector('.recipe-meta span').textContent.toLowerCase();
-            const isVisible = title.includes(searchTerm) || author.includes(searchTerm);
-            card.style.display = isVisible ? 'block' : 'none';
-            if (isVisible) visibleCount++;
-        });
-        updateDisplayCount(visibleCount);
-    }
-    function setupSortingFunctionality() {
-        const sortFilter = document.getElementById('sortFilter');
-        sortFilter.addEventListener('change', function() {
-            sortRecipes(this.value);
-        });
-    }
-    function sortRecipes(sortBy) {
-        const recipeGrid = document.getElementById('recipeGrid');
-        const recipeCards = Array.from(recipeGrid.querySelectorAll('.recipe-card'));
-        recipeCards.sort((a, b) => {
-            switch (sortBy) {
-                case 'newest':
-                    return parseInt(b.dataset.recipeId) - parseInt(a.dataset.recipeId);
-                case 'oldest':
-                    return parseInt(a.dataset.recipeId) - parseInt(b.dataset.recipeId);
-                case 'author':
-                    const authorA = a.querySelector('.recipe-meta span').textContent.toLowerCase();
-                    const authorB = b.querySelector('.recipe-meta span').textContent.toLowerCase();
-                    return authorA.localeCompare(authorB);
-                case 'calories':
-                    return parseInt(a.dataset.calories) - parseInt(b.dataset.calories);
-                default:
-                    return 0;
-            }
-        });
-        recipeCards.forEach(card => recipeGrid.appendChild(card));
-    }
-    function showRecipeDetails(recipeId, isAdmin = false, recipeControl = '') {
-        currentRecipeId = recipeId; 
-        const params = new URLSearchParams({
-            isOwner: true,
-            recipeDetailsDisplayContorol: recipeControl
-        });
-        fetch(`/Recipes/Details/${recipeId}?${params}`)
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                return response.text();
-            })
-             .then(html => {
-        const modalContainer = document.getElementById('modalWindow');
-        modalContainer.innerHTML = html;
-        const existingScripts = document.querySelectorAll('script[data-recipe-modal]');
-        existingScripts.forEach(script => script.remove());
-        const scripts = modalContainer.querySelectorAll("script");
-        scripts.forEach(script => {
-            const newScript = document.createElement("script");
-            newScript.setAttribute('data-recipe-modal', 'true');
-            if (script.src) {
-                newScript.src = script.src;
-            } else {
-                newScript.textContent = `
-                    (function() {
-                        ${script.textContent}
-                    })();
-                `;
-            }
-            document.body.appendChild(newScript);
-            document.body.removeChild(newScript);
-        });
-                const modalElement = modalContainer.querySelector('.modal');
-                if (modalElement) {
-                    const modal = new bootstrap.Modal(modalElement);
-                    modal.show();
-                    modalElement.addEventListener('hidden.bs.modal', function () {
-                        modalContainer.innerHTML = '';
-                        if (typeof clickedCard !== 'undefined') {
-                            clickedCard.classList.remove('loading');
-                        }
-                    }); 
-                    modalElement.addEventListener('shown.bs.modal', function () {
-                        if (typeof clickedCard !== 'undefined') {
-                            clickedCard.classList.remove('loading');
-                        }
-                    });
-                } else {    
-                    if (typeof clickedCard !== 'undefined') {
-                        clickedCard.classList.remove('loading');
-                    }
-                }
-            })
-            .catch(err => {
-                console.error("Failed to fetch recipe details", err);
-                showError("Failed to load recipe details. Please try again.");
-                if (typeof clickedCard !== 'undefined') {
-                    clickedCard.classList.remove('loading');
-                }
-            });
-    }
-    function removeRecipeCard(recipeId) {
-        const recipeCard = document.querySelector(`[data-recipe-id="${recipeId}"]`);
-        if (recipeCard) {
-            recipeCard.classList.add('removing');
-            setTimeout(() => {
-                recipeCard.remove();
-                updateDisplayCount();
-                updateBulkActionButtons();
-                updateSelectAllState();
-                if (document.querySelectorAll('.recipe-card').length === 0) {
-                    location.reload();
-                }
-            }, 500);
-        }
-    }
-    function updateDisplayCount(count = null) {
-        const displayCountElement = document.getElementById('displayCount');
-        if (count === null) {
-            count = document.querySelectorAll('.recipe-card:not([style*="display: none"])').length;
-        }
-        displayCountElement.textContent = count;
-    }
-    function showLoadingOverlay() {
-        document.getElementById('loadingOverlay').style.display = 'flex';
-    }
-    function hideLoadingOverlay() {
-        document.getElementById('loadingOverlay').style.display = 'none';
-    }
-    function createToast(message, type = 'info') {
-        const toastContainer = document.getElementById('toast-container') || createToastContainer();
-        const toastId = 'toast-' + Date.now();
-        const toast = document.createElement('div');
-        toast.id = toastId;
-        toast.className = `toast align-items-center text-white bg-${type} border-0`;
-        toast.setAttribute('role', 'alert');
-        toast.setAttribute('aria-live', 'assertive');
-        toast.setAttribute('aria-atomic', 'true');
-        const iconMap = {
-            'success': 'fas fa-check-circle',
-            'danger': 'fas fa-exclamation-circle',
-            'warning': 'fas fa-exclamation-triangle',
-            'info': 'fas fa-info-circle'
-        };
-        toast.innerHTML = `
-            <div class="d-flex">
-                <div class="toast-body">
-                    <i class="${iconMap[type] || iconMap.info} me-2"></i>
-                    ${message}
-                </div>
-                <button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="removeToast('${toastId}')"></button>
-            </div>
-        `;
-        toastContainer.appendChild(toast);
-        toast.style.display = 'block';
-        setTimeout(() => {
-            toast.classList.add('show');
-        }, 100);
-        setTimeout(() => {
-            removeToast(toastId);
-        }, 5000);
-    }
-    function removeToast(toastId) {
-        const toast = document.getElementById(toastId);
-        if (toast) {
-            toast.classList.remove('show');
-            setTimeout(() => {
-                if (toast.parentNode) {
-                    toast.remove();
-                }
-            }, 300);
-        }
-    }
-    function createToastContainer() {
-        const container = document.createElement('div');
-        container.id = 'toast-container';
-        container.className = 'toast-container position-fixed top-0 end-0 p-3';
-        container.style.zIndex = '10000';
-        document.body.appendChild(container);
-        return container;
-    }
-    function showSuccess(message) {
-        createToast(message, 'success');
-    }
-    function showError(message) {
-        createToast(message, 'danger');
-    }
-    function showWarning(message) {
-        createToast(message, 'warning');
-    }
-    function showInfo(message) {
-        createToast(message, 'info');
-    }
-    function refreshPendingRecipes() {
-        showLoadingOverlay();
-        location.reload();
-    }
-    document.addEventListener('keydown', function(e) {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'a' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
-            e.preventDefault();
-            const selectAllCheckbox = document.getElementById('selectAll');
-            if (selectAllCheckbox) {
-                selectAllCheckbox.checked = !selectAllCheckbox.checked;
-                selectAllCheckbox.dispatchEvent(new Event('change'));
-            }
-        }
-        if (e.key === 'Escape') {
-            closeModal();
-        }
-        if (e.key === 'F5' || ((e.ctrlKey || e.metaKey) && e.key === 'r')) {
-            e.preventDefault();
-            refreshPendingRecipes();
-        }
-    });
-    let autoRefreshInterval;
-    function startAutoRefresh(intervalMinutes = 5) {
-        if (autoRefreshInterval) {
-            clearInterval(autoRefreshInterval);
-        }
-        autoRefreshInterval = setInterval(() => {
-            if (document.visibilityState === 'visible') {
-                showInfo('Checking for new submissions...');
-                setTimeout(() => {
-                    refreshPendingRecipes();
-                }, 1000);
-            }
-        }, intervalMinutes * 60 * 1000);
-    }
-    function stopAutoRefresh() {
-        if (autoRefreshInterval) {
-            clearInterval(autoRefreshInterval);
-            autoRefreshInterval = null;
-        }
-    }
-    document.addEventListener('visibilitychange', function() {
-        if (document.visibilityState === 'visible') {
-            const lastRefresh = localStorage.getItem('lastAdminRefresh');
-            const now = Date.now();
-            if (!lastRefresh || (now - parseInt(lastRefresh)) > 2 * 60 * 1000) {
-                showInfo('Checking for updates...');
-                setTimeout(() => {
-                    refreshPendingRecipes();
-                }, 1000);
-            }
-        }
-    });
-    window.addEventListener('beforeunload', function() {
-        localStorage.setItem('lastAdminRefresh', Date.now().toString());
-    });
-    window.addEventListener('online', function() {
-        showSuccess('Connection restored. Refreshing data...');
-        setTimeout(() => {
-            refreshPendingRecipes();
-        }, 1000);
-    });
-    window.addEventListener('offline', function() {
-        showWarning('Connection lost. Some features may not work properly.');
-    });
-    console.log('Admin Panel initialized successfully');
-    function hideRecipeDetails(){
-        const modalWindow = document.getElementById('modalWindow');
-            const recipeDetailsModal = modalWindow?.querySelector('.modal');
-            if (recipeDetailsModal) {
-                const modalInstance = bootstrap.Modal.getInstance(recipeDetailsModal);
-                if (modalInstance) {
-                    modalInstance.hide();
-                }
-            }
-    }
-let currentRecipeId = null;
-window.viewIngredientReview = async function(ingredientId) {
-    console.log('Global viewIngredientReview called with ID:', ingredientId);
-    const recipeModal = document.getElementById('recipeModal');
-    if (recipeModal) {
-        const recipeModalInstance = bootstrap.Modal.getInstance(recipeModal);
-        if (recipeModalInstance) {
-            recipeModalInstance.hide();
-        }
-    }
-    setTimeout(async () => {
-        const modal = document.getElementById('ingredientReviewModal');
-        const content = document.getElementById('ingredientReviewContent');
-        if (!modal || !content) {
-            console.error('Modal or content container not found');
-            alert('Modal components not found');
-            return;
-        }
-        try {
-            content.innerHTML = `
-                <div class="text-center p-4">
-                    <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Loading ingredient details...</p>
-                </div>
-            `;
-            const bootstrapModal = new bootstrap.Modal(modal);
-            bootstrapModal.show();
-            const response = await fetch(`/Admin/GetIngredientReview/${ingredientId}`, {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            });
-            if (response.ok) {
-                const html = await response.text();
-                content.innerHTML = html;
-            } else {
-                content.innerHTML = `
-                    <div class="alert alert-danger">
-                        <h6>Error ${response.status}</h6>
-                        <p>Failed to load ingredient details.</p>
-                    </div>
-                `;
-            }
-        } catch (error) {
-            console.error('Error:', error);
-            content.innerHTML = `
-                <div class="alert alert-danger">
-                    <h6>Connection Error</h6>
-                    <p>${error.message}</p>
-                </div>
-            `;
-        }
-    }, 300);
-};
-function showRecipeModal(){
-    if (currentRecipeId) {
-        showRecipeDetails(currentRecipeId, true, 'Buttons');
-    } else {
-        console.error('No recipe ID stored - cannot restore recipe modal');
-    }
-}
-    </script>
+    <script src="~/js/AdminIndex.js"></script>
 </body>
 </html>
Index: NutriMatch/Views/Admin/_IngredientReviewPartial.cshtml
===================================================================
--- NutriMatch/Views/Admin/_IngredientReviewPartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Admin/_IngredientReviewPartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -18,5 +18,5 @@
         <div class="nutrition-item">
             <div class="nutrition-label">
-                <i class="fas fa-drumstick-bite text-success"></i>
+                <i class="fas fa-drumstick-bite" style="color: #8b5cf6;"></i>
                 <span>Protein</span>
             </div>
@@ -26,6 +26,6 @@
         <div class="nutrition-item">
             <div class="nutrition-label">
-                <i class="fas fa-bread-slice text-warning"></i>
-                <span>Carbohydrates</span>
+                <i class="fas fa-bread-slice" style="color: #f59e0b;"></i>
+                <span>Carbs</span>
             </div>
             <div class="nutrition-value">@Model.Carbs g</div>
@@ -34,6 +34,6 @@
         <div class="nutrition-item">
             <div class="nutrition-label">
-                <i class="fas fa-cheese text-info"></i>
-                <span>Fat</span>
+                <i class="fas fa-tint me-1" style="color: #e5eb4dfa;"></i>
+                <span>Fats</span>
             </div>
             <div class="nutrition-value">@Model.Fat g</div>
@@ -41,72 +41,71 @@
     </div>
 
-    
 
-   
+
+
 </div>
 
 <style>
-.ingredient-review-container {
-    padding: 20px;
-}
+    .ingredient-review-container {
+        padding: 20px;
+    }
 
-.ingredient-name {
-    color: #2c3e50;
-    font-weight: 600;
-    margin-bottom: 5px;
-}
+    .ingredient-name {
+        color: #2c3e50;
+        font-weight: 600;
+        margin-bottom: 5px;
+    }
 
-.nutrition-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-    margin: 20px 0;
-}
+    .nutrition-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+        margin: 20px 0;
+    }
 
-.nutrition-item {
-    background-color: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 8px;
-    padding: 15px;
-    text-align: center;
-}
+    .nutrition-item {
+        background-color: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        padding: 15px;
+        text-align: center;
+    }
 
-.nutrition-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 8px;
-    font-size: 14px;
-    color: #6c757d;
-    font-weight: 500;
-}
+    .nutrition-label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #6c757d;
+        font-weight: 500;
+    }
 
-.nutrition-label i {
-    margin-right: 6px;
-}
+    .nutrition-label i {
+        margin-right: 6px;
+    }
 
-.nutrition-value {
-    font-size: 18px;
-    font-weight: 600;
-    color: #2c3e50;
-}
+    .nutrition-value {
+        font-size: 18px;
+        font-weight: 600;
+        color: #2c3e50;
+    }
 
-.submission-info {
-    background-color: #f1f3f4;
-    border-radius: 6px;
-    padding: 10px;
-    border-left: 4px solid #007bff;
-}
+    .submission-info {
+        background-color: #f1f3f4;
+        border-radius: 6px;
+        padding: 10px;
+        border-left: 4px solid #007bff;
+    }
 
-.action-buttons {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-}
+    .action-buttons {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+    }
 
-.action-buttons .btn {
-    min-width: 120px;
-    font-weight: 500;
-}
+    .action-buttons .btn {
+        min-width: 120px;
+        font-weight: 500;
+    }
 </style>
-
Index: NutriMatch/Views/Admin/_RecipeDeclineAdminPartial.cshtml
===================================================================
--- NutriMatch/Views/Admin/_RecipeDeclineAdminPartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Admin/_RecipeDeclineAdminPartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,4 +1,5 @@
 @model NutriMatch.Models.Recipe
-<div class="modal fade" id="recipeDeclineModal" tabindex="-1" aria-labelledby="recipeDeclineModalLabel" aria-hidden="true">
+<div class="modal fade" id="recipeDeclineModal" tabindex="-1" aria-labelledby="recipeDeclineModalLabel"
+    aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -8,5 +9,6 @@
                     Decline Recipe
                 </h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"></button>
             </div>
             <div class="modal-body">
@@ -58,8 +60,5 @@
                             Additional Notes <span class="text-muted">(Optional)</span>
                         </label>
-                        <textarea 
-                            class="form-control" 
-                            id="declineNotes" 
-                            rows="4" 
+                        <textarea class="form-control" id="declineNotes" rows="4"
                             placeholder="Provide additional details about why this recipe is being declined. This information will help the user understand the decision and improve future submissions."
                             maxlength="500"></textarea>
@@ -71,5 +70,6 @@
                         <i class="fas fa-info-circle me-2"></i>
                         <div>
-                            <strong>Note:</strong> Once declined, the recipe will be removed from the pending list and the user will be notified of the decision.
+                            <strong>Note:</strong> Once declined, the recipe will be removed from the pending list and
+                            the user will be notified of the decision.
                         </div>
                     </div>
@@ -125,8 +125,8 @@
 </style>
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         initializeDeclineModal();
     });
-    document.getElementById('recipeDeclineModal').addEventListener('shown.bs.modal', function() {
+    document.getElementById('recipeDeclineModal').addEventListener('shown.bs.modal', function () {
         initializeDeclineModal();
     });
@@ -142,5 +142,5 @@
         const newDeclineReasonSelect = declineReasonSelect.cloneNode(true);
         declineReasonSelect.parentNode.replaceChild(newDeclineReasonSelect, declineReasonSelect);
-        newDeclineReasonSelect.addEventListener('change', function() {
+        newDeclineReasonSelect.addEventListener('change', function () {
             const confirmBtn = document.getElementById('confirmDeclineBtn');
             if (confirmBtn) {
@@ -152,5 +152,5 @@
             }
         });
-        newDeclineReasonSelect.addEventListener('input', function() {
+        newDeclineReasonSelect.addEventListener('input', function () {
             const confirmBtn = document.getElementById('confirmDeclineBtn');
             if (confirmBtn) {
@@ -159,5 +159,5 @@
         });
         if (declineNotesTextarea && notesCounter) {
-            declineNotesTextarea.addEventListener('input', function() {
+            declineNotesTextarea.addEventListener('input', function () {
                 const currentLength = this.value.length;
                 notesCounter.textContent = currentLength;
@@ -171,5 +171,5 @@
             });
         }
-        confirmDeclineBtn.addEventListener('click', function() {
+        confirmDeclineBtn.addEventListener('click', function () {
             const recipeId = document.getElementById('declineRecipeId').value;
             const reasonSelect = document.getElementById('declineReason');
@@ -202,41 +202,41 @@
             })
         })
-        .then(response => {
-            console.log('Response status:', response.status);
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const contentType = response.headers.get('content-type');
-            if (!contentType || !contentType.includes('application/json')) {
-                return response.text().then(text => {
-                    console.error('Non-JSON response:', text);
-                    throw new Error('Server returned non-JSON response');
-                });
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (data && data.success) {
-                const modal = bootstrap.Modal.getInstance(document.getElementById('recipeDeclineModal'));
-                modal.hide();
-                showSuccess('Recipe declined successfully!');
-                removeRecipeCard(recipeId);
-            } else {
-                const errorMessage = data && data.message ? data.message : 'Failed to decline recipe';
+            .then(response => {
+                console.log('Response status:', response.status);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const contentType = response.headers.get('content-type');
+                if (!contentType || !contentType.includes('application/json')) {
+                    return response.text().then(text => {
+                        console.error('Non-JSON response:', text);
+                        throw new Error('Server returned non-JSON response');
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data && data.success) {
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('recipeDeclineModal'));
+                    modal.hide();
+                    showSuccess('Recipe declined successfully!');
+                    removeRecipeCard(recipeId);
+                } else {
+                    const errorMessage = data && data.message ? data.message : 'Failed to decline recipe';
+                    showError(errorMessage);
+                    resetDeclineButton();
+                }
+            })
+            .catch(error => {
+                console.error('Error details:', error);
+                let errorMessage = 'An error occurred while declining the recipe';
+                if (error.message.includes('HTTP error! status: 500')) {
+                    errorMessage = 'Server error occurred. Please check the server logs and try again.';
+                } else if (error.message.includes('non-JSON response')) {
+                    errorMessage = 'Server returned an unexpected response format.';
+                }
                 showError(errorMessage);
                 resetDeclineButton();
-            }
-        })
-        .catch(error => {
-            console.error('Error details:', error);
-            let errorMessage = 'An error occurred while declining the recipe';
-            if (error.message.includes('HTTP error! status: 500')) {
-                errorMessage = 'Server error occurred. Please check the server logs and try again.';
-            } else if (error.message.includes('non-JSON response')) {
-                errorMessage = 'Server returned an unexpected response format.';
-            }
-            showError(errorMessage);
-            resetDeclineButton();
-        });
+            });
     }
     function resetDeclineButton() {
@@ -249,5 +249,5 @@
         }
     }
-    document.getElementById('recipeDeclineModal').addEventListener('hidden.bs.modal', function() {
+    document.getElementById('recipeDeclineModal').addEventListener('hidden.bs.modal', function () {
         const form = document.getElementById('declineForm');
         if (form) {
Index: NutriMatch/Views/Home/Index.cshtml
===================================================================
--- NutriMatch/Views/Home/Index.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Home/Index.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -9,10 +9,13 @@
 </head>
 <body>
-    @if (!User.Identity.IsAuthenticated){
+    @if (!User.Identity.IsAuthenticated)
+    {
         <section class="signup-section" style="margin-top: 200px;">
             <div class="floating-elements">
                 <i class="fas fa-leaf floating-leaf" style="top: 10%; left: 15%; font-size: 2rem;"></i>
-                <i class="fas fa-seedling floating-leaf" style="top: 60%; right: 20%; font-size: 1.5rem; animation-delay: -2s;"></i>
-                <i class="fas fa-leaf floating-leaf" style="top: 30%; right: 10%; font-size: 2.5rem; animation-delay: -4s;"></i>
+                <i class="fas fa-seedling floating-leaf"
+                    style="top: 60%; right: 20%; font-size: 1.5rem; animation-delay: -2s;"></i>
+                <i class="fas fa-leaf floating-leaf"
+                    style="top: 30%; right: 10%; font-size: 2.5rem; animation-delay: -4s;"></i>
             </div>
             <div class="container">
@@ -22,5 +25,5 @@
                         <h2 class="signup-subtitle">Optimize Your Nutrition</h2>
                         <p class="signup-description">
-                            Join our macro-focused recipe platform designed for goal-oriented eating. <br/>
+                            Join our macro-focused recipe platform designed for goal-oriented eating. <br />
                             As a member, you can
                             create and manage your own recipes,
@@ -32,14 +35,18 @@
                             Sign up
                         </button>
-                        <p class="mt-3 text-muted">Already have an account? <a href="#" style="color: var(--primary-green); text-decoration: none;">Log in</a></p>
+                        <p class="mt-3 text-muted">Already have an account? <a href="#"
+                                style="color: var(--primary-green); text-decoration: none;">Log in</a></p>
                     </div>
                     <div class="col-lg-4 text-center">
                         <div class="position-relative">
-                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
-                                alt="Delicious Food Bowl" class="img-fluid rounded-circle" style="width: 300px; height: 300px; object-fit: cover; box-shadow: 0 20px 40px rgba(0,0,0,0.2);">
-                            <div class="position-absolute" style="top: 20px; right: 20px; background: white; border-radius: 50px; padding: 8px 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
+                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
+                                alt="Delicious Food Bowl" class="img-fluid rounded-circle"
+                                style="width: 300px; height: 300px; object-fit: cover; box-shadow: 0 20px 40px rgba(0,0,0,0.2);">
+                            <div class="position-absolute"
+                                style="top: 20px; right: 20px; background: white; border-radius: 50px; padding: 8px 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
                                 <div class="d-flex align-items-center gap-2">
-                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80" 
-                                        alt="Chef" class="rounded-circle" style="width: 30px; height: 30px; object-fit: cover;">
+                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80"
+                                        alt="Chef" class="rounded-circle"
+                                        style="width: 30px; height: 30px; object-fit: cover;">
                                     <div>
                                         <small class="fw-bold text-dark d-block">Chef John</small>
@@ -53,5 +60,5 @@
                                     </div>
                                 </div>
-                                <small class="text-muted d-block mt-1">  </small>
+                                <small class="text-muted d-block mt-1"> </small>
                             </div>
                         </div>
@@ -61,79 +68,96 @@
         </section>
     }
-    else{
-       <section class="welcome-back-section" style="margin-top: 100px; margin-bottom: 100px; position: relative;">
-    <div class="floating-elements">
-        <i class="fas fa-leaf floating-leaf" style="position: absolute; top: 15%; left: 8%; font-size: 1.5rem; color: rgba(76, 175, 80, 0.1); animation: float 8s ease-in-out infinite;"></i>
-        <i class="fas fa-seedling floating-leaf" style="position: absolute; top: 70%; right: 12%; font-size: 1.2rem; color: rgba(76, 175, 80, 0.08); animation: float 10s ease-in-out infinite; animation-delay: -3s;"></i>
-        <i class="fas fa-apple-alt floating-leaf" style="position: absolute; bottom: 20%; left: 15%; font-size: 1.3rem; color: rgba(76, 175, 80, 0.06); animation: float 12s ease-in-out infinite; animation-delay: -6s;"></i>
-    </div>
-    <div class="container">
-        <div class="row align-items-center">
-            <div class="col-lg-8">
-                <div class="welcome-content">
-                    <h1 class="welcome-title" style="color: #2c3e50; font-size: 2.8rem; font-weight: 700; margin-bottom: 16px; line-height: 1.2;">
-                        Welcome back, 
-                        <br>
-                        <span style="color: #4CAF50;">@User.Identity.Name</span>! 
-                        <span style="font-size: 2rem;">👋</span>
-                    </h1>
-                    <p class="welcome-subtitle" style="color: #64748b; font-size: 1.2rem; font-weight: 400; margin-bottom: 32px; max-width: 600px; line-height: 1.6;">
-                        Your personalized nutrition journey continues. Ready to discover delicious, macro-friendly recipes that align with your goals?
-                    </p>
-                    <div class="welcome-actions" style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-                        <a href="/Recipes" class="btn btn-outline" style="background: transparent; color: #4CAF50; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: all 0.2s ease; border: 1px solid #4CAF50; display: inline-flex; align-items: center;">
-                            <i class="fas fa-search" style="margin-right: 8px; font-size: 0.9rem;"></i>
-                            Browse Recipes
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-4">
-                <div class="user-summary-card" style="background: white; border-radius: 16px; padding: 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); position: relative;">
-                     <div class="user-avatar" style="width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; font-weight: 700; overflow: hidden; position: relative;">
-                        @if (!string.IsNullOrEmpty(ViewBag.UserPicture as string))
-                        {
-                            <img src="@ViewBag.UserPicture" 
-                                alt="@(ViewBag.UserName ?? User.Identity.Name)" 
-                                style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" />
-                        }
-                        else
-                        {
-                            <div style="background: linear-gradient(135deg, #4CAF50, #45a049); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
-                                @if (!string.IsNullOrEmpty(User.Identity.Name))
+    else
+    {
+        <section class="welcome-back-section" style="margin-top: 100px; margin-bottom: 100px; position: relative;">
+            <div class="floating-elements">
+                <i class="fas fa-leaf floating-leaf"
+                    style="position: absolute; top: 15%; left: 8%; font-size: 1.5rem; color: rgba(76, 175, 80, 0.1); animation: float 8s ease-in-out infinite;"></i>
+                <i class="fas fa-seedling floating-leaf"
+                    style="position: absolute; top: 70%; right: 12%; font-size: 1.2rem; color: rgba(76, 175, 80, 0.08); animation: float 10s ease-in-out infinite; animation-delay: -3s;"></i>
+                <i class="fas fa-apple-alt floating-leaf"
+                    style="position: absolute; bottom: 20%; left: 15%; font-size: 1.3rem; color: rgba(76, 175, 80, 0.06); animation: float 12s ease-in-out infinite; animation-delay: -6s;"></i>
+            </div>
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-lg-8">
+                        <div class="welcome-content">
+                            <h1 class="welcome-title"
+                                style="color: #2c3e50; font-size: 2.8rem; font-weight: 700; margin-bottom: 16px; line-height: 1.2;">
+                                Welcome back,
+                                <br>
+                                <span style="color: #4CAF50;">@User.Identity.Name</span>!
+                                <span style="font-size: 2rem;">👋</span>
+                            </h1>
+                            <p class="welcome-subtitle"
+                                style="color: #64748b; font-size: 1.2rem; font-weight: 400; margin-bottom: 32px; max-width: 600px; line-height: 1.6;">
+                                Your personalized nutrition journey continues. Ready to discover delicious, macro-friendly
+                                recipes that align with your goals?
+                            </p>
+                            <div class="welcome-actions"
+                                style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+                                <a href="/Recipes" class="btn btn-outline"
+                                    style="background: transparent; color: #4CAF50; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: all 0.2s ease; border: 1px solid #4CAF50; display: inline-flex; align-items: center;">
+                                    <i class="fas fa-search" style="margin-right: 8px; font-size: 0.9rem;"></i>
+                                    Browse Recipes
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4">
+                        <div class="user-summary-card"
+                            style="background: white; border-radius: 16px; padding: 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); position: relative;">
+                            <div class="user-avatar"
+                                style="width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; font-weight: 700; overflow: hidden; position: relative;">
+                                @if (!string.IsNullOrEmpty(ViewBag.UserPicture as string))
                                 {
-                                    @User.Identity.Name.Substring(0, 1).ToUpper()
+                                    <img src="@ViewBag.UserPicture" alt="@(ViewBag.UserName ?? User.Identity.Name)"
+                                        style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" />
                                 }
                                 else
                                 {
-                                    <i class="fas fa-user"></i>
+                                    <div
+                                        style="background: linear-gradient(135deg, #4CAF50, #45a049); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
+                                        @if (!string.IsNullOrEmpty(User.Identity.Name))
+                                        {
+                                            @User.Identity.Name.Substring(0, 1).ToUpper()
+                                        }
+                                        else
+                                        {
+                                            <i class="fas fa-user"></i>
+                                        }
+                                    </div>
                                 }
                             </div>
-                        }
-                    </div>
-                    <div class="text-center mb-24">
-                        <h3 style="color: #2c3e50; font-size: 1.3rem; font-weight: 600; margin-bottom: 4px;">@User.Identity.Name</h3>
-                    </div>
-                    <div class="stats-grid" style="display: flex; justify-content: center; gap: 3rem; text-align: center;">
-                        <div class="stat-item">
-                            <div style="color: #4CAF50; font-size: 1.6rem; font-weight: 700; margin-bottom: 4px;">@ViewBag.UserRecipesCount</div>
-                            <div style="color: #64748b; font-size: 0.8rem; font-weight: 500;">Recipes</div>
-                        </div>
-                        <div class="stat-item">
-                            <div style="color: #ff9500; font-size: 1.6rem; font-weight: 700; margin-bottom: 4px;">@ViewBag.AverageRating</div>
-                            <div style="color: #64748b; font-size: 0.8rem; font-weight: 500;">Rating</div>
-                        </div>
-                    </div>
-                    <div class="quick-action" style="margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.06);">
-                        <a href="Recipes/MyRecipes" style="display: flex; align-items: center; justify-content: between; color: #4CAF50; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.2s ease;">
-                            <span>View My Recipes</span>
-                            <i class="fas fa-arrow-right" style="margin-left: auto; font-size: 0.8rem;"></i>
-                        </a>
+                            <div class="text-center mb-24">
+                                <h3 style="color: #2c3e50; font-size: 1.3rem; font-weight: 600; margin-bottom: 4px;">
+                                    @User.Identity.Name</h3>
+                            </div>
+                            <div class="stats-grid"
+                                style="display: flex; justify-content: center; gap: 3rem; text-align: center;">
+                                <div class="stat-item">
+                                    <div style="color: #4CAF50; font-size: 1.6rem; font-weight: 700; margin-bottom: 4px;">
+                                        @ViewBag.UserRecipesCount</div>
+                                    <div style="color: #64748b; font-size: 0.8rem; font-weight: 500;">Recipes</div>
+                                </div>
+                                <div class="stat-item">
+                                    <div style="color: #ff9500; font-size: 1.6rem; font-weight: 700; margin-bottom: 4px;">
+                                        @ViewBag.AverageRating</div>
+                                    <div style="color: #64748b; font-size: 0.8rem; font-weight: 500;">Rating</div>
+                                </div>
+                            </div>
+                            <div class="quick-action"
+                                style="margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.06);">
+                                <a href="Recipes/MyRecipes"
+                                    style="display: flex; align-items: center; justify-content: between; color: #4CAF50; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.2s ease;">
+                                    <span>View My Recipes</span>
+                                    <i class="fas fa-arrow-right" style="margin-left: auto; font-size: 0.8rem;"></i>
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-</section>
+        </section>
     }
     <section class="share-recipe-section">
@@ -144,6 +168,7 @@
                         <div class="sample-screen">
                             <div class="text-center mb-3">
-                                <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" 
-                                     alt="Recipe" class="img-fluid rounded" style="width: 100%; height: 150px; object-fit: cover;">
+                                <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80"
+                                    alt="Recipe" class="img-fluid rounded"
+                                    style="width: 100%; height: 150px; object-fit: cover;">
                             </div>
                             <h6 class="fw-bold mb-2">Protein pancakes</h6>
@@ -164,5 +189,7 @@
                     <h2 class="share-title">Share Your Recipes</h2>
                     <p class="share-description">
-                        Have a recipe that fits your nutrition goals? Share it with the community and help others discover meals that balance flavor and function. Whether it’s high-protein, low-carb, or macro-balanced — your creations make a difference.
+                        Have a recipe that fits your nutrition goals? Share it with the community and help others
+                        discover meals that balance flavor and function. Whether it’s high-protein, low-carb, or
+                        macro-balanced — your creations make a difference.
                     </p>
                     <a href="/Recipes/Create" class="btn btn-create-recipe">
@@ -178,10 +205,13 @@
             <p class="section-subtitle">Discover the most popular recipes shared by our community</p>
             <div class="row">
-                @foreach (var recipe in Model.Recipes){ 
+                @foreach (var recipe in Model.Recipes)
+                {
                     <div class="col-md-6 col-lg-4">
                         <div class="recipe-card">
                             <img src="@recipe.ImageUrl" class="recipe-image">
                             <div class="recipe-content">
-                                <h3 class="recipe-title">@recipe.Title</h3>
+                                <h3 class="recipe-title">@(recipe.Title.Length > 30
+                                                                    ? recipe.Title.Substring(0, 30) + "…"
+                                                                    : recipe.Title)</h3>
                                 <div class="recipe-meta">
                                     <span class="rating">
@@ -190,7 +220,7 @@
                                     <span>
                                         <i class="fas fa-user"></i>
-                                        @(recipe.User.UserName.Length > 23 
-                                            ? recipe.User.UserName.Substring(0, 23) + "…" 
-                                            : recipe.User.UserName)
+                                        @(recipe.User.UserName.Length > 23
+                                                                            ? recipe.User.UserName.Substring(0, 23) + "…"
+                                                                            : recipe.User.UserName)
                                     </span>
                                     <span><i class="fas fa-calendar"> </i> @recipe.CreatedAt.ToString("MMM dd, yyyy")</span>
@@ -252,8 +282,11 @@
         </div>
         <div class="container">
-            <div class="restaurants-container" onclick="window.location.href='@Url.Action("Index", "Restaurants")'" style="cursor: pointer;">
-                @foreach(var restaurant in Model.Restaurants){
+            <div class="restaurants-container" onclick="window.location.href='@Url.Action("Index", "Restaurants")'"
+                style="cursor: pointer;">
+                @foreach (var restaurant in Model.Restaurants)
+                {
                     <div class="restaurant-card">
-                        <div class="restaurant-logo" style="background: display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; font-weight: bold;">
+                        <div class="restaurant-logo"
+                            style="background: display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; font-weight: bold;">
                             <img src="@restaurant.ImageUrl" style="width: 70px;">
                         </div>
@@ -264,5 +297,4 @@
             </div>
         </div>
-    </section>    
+    </section>
 </body>
-   
Index: NutriMatch/Views/MealPlan/Create.cshtml
===================================================================
--- NutriMatch/Views/MealPlan/Create.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/MealPlan/Create.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -5,262 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Create Meal Plan</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <style>
-        body {
-            background: #c3d5c4;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-        }
-        .container {
-            margin: 0 auto;
-            padding: 40px 20px;
-        }
-        .header-section {
-            text-align: center;
-            margin-bottom: 40px;
-            color: #2c5530;
-        }
-        .header-section h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-        }
-        .header-section p {
-            font-size: 1.1rem;
-            color: #6b7280;
-            margin: 0;
-        }
-        .main-card {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 24px;
-            padding: 40px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .section-title {
-            display: flex;
-            align-items: center;
-            font-size: 1.3rem;
-            font-weight: 600;
-            color: #2c5530;
-            margin-bottom: 20px;
-            padding-bottom: 12px;
-            border-bottom: 2px solid #e5e7eb;
-        }
-        .section-title i {
-            color: #4ade80;
-            margin-right: 12px;
-            font-size: 1.1rem;
-        }
-        .form-group {
-            margin-bottom: 24px;
-        }
-        .form-label {
-            font-weight: 600;
-            color: #374151;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            font-size: 0.95rem;
-        }
-        .form-label i {
-            margin-right: 8px;
-            width: 16px;
-            text-align: center;
-        }
-        .form-control {
-            border: 2px solid #e5e7eb;
-            border-radius: 12px;
-            padding: 14px 16px;
-            font-size: 0.95rem;
-            transition: all 0.2s ease;
-            background: white;
-        }
-        .form-control:focus {
-            border-color: #4ade80;
-            box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
-        }
-        .macro-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .macro-item {
-            background: #f8fafc;
-            border: 2px solid #e5e7eb;
-            border-radius: 16px;
-            padding: 20px;
-            transition: all 0.2s ease;
-        }
-        .macro-item:hover {
-            border-color: #4ade80;
-            background: #f0fdf4;
-        }
-        .macro-item .form-control {
-            border: 1px solid #d1d5db;
-            margin-top: 8px;
-        }
-        .help-text {
-            font-size: 0.8rem;
-            color: #6b7280;
-            margin-top: 4px;
-        }
-        .submit-section {
-            text-align: center;
-            margin-top: 40px;
-            padding-top: 30px;
-            border-top: 2px solid #e5e7eb;
-        }
-        .btn-create {
-            background: #4ade80;
-            color: white;
-            border: none;
-            border-radius: 16px;
-            padding: 16px 40px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
-        }
-        .btn-create:hover {
-            background: #22c55e;
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(74, 222, 128, 0.4);
-            color: white;
-        }
-        .btn-create:disabled {
-            background: #9ca3af;
-            transform: none;
-            box-shadow: none;
-        }
-        .success-message {
-            background: #d1f2d9;
-            color: #0d5016;
-            padding: 16px 20px;
-            border-radius: 12px;
-            border: 1px solid #7dd87f;
-            margin-bottom: 24px;
-            display: flex;
-            align-items: center;
-        }
-        .success-message i {
-            margin-right: 12px;
-            color: #16a34a;
-        }
-        .error-message {
-            background: #fed7d7;
-            color: #9b2c2c;
-            padding: 16px 20px;
-            border-radius: 12px;
-            border: 1px solid #feb2b2;
-            margin-bottom: 24px;
-        }
-        .error-message i {
-            margin-right: 12px;
-        }
-        .error-message ul {
-            margin: 8px 0 0 0;
-            padding-left: 20px;
-        }
-        .icon-fire { color: #ef4444; }
-        .icon-protein { color: #8b5cf6; }
-        .icon-carbs { color: #f59e0b; }
-        .icon-fat { color: #06b6d4; }
-        .icon-restaurant { color: #ec4899; }
-        @@media (max-width: 768px) {
-            .container {
-                padding: 20px 16px;
-            }
-            .main-card {
-                padding: 24px;
-                border-radius: 20px;
-            }
-            .macro-grid {
-                grid-template-columns: 1fr;
-                gap: 16px;
-            }
-            .header-section h1 {
-                font-size: 2rem;
-            }
-        }
-        .modal {
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.modal-content {
-    background-color: white;
-    border-radius: 8px;
-    padding: 0;
-    width: 90%;
-    max-width: 500px;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-.modal-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.modal-header h3 {
-    margin: 0;
-    color: #333;
-}
-.close {
-    font-size: 24px;
-    font-weight: bold;
-    color: #999;
-    cursor: pointer;
-    transition: color 0.2s;
-}
-.close:hover {
-    color: #333;
-}
-.modal-body {
-    padding: 1.5rem;
-}
-.btn-secondary {
-    background-color: #6c757d;
-    color: white;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-right: 0.5rem;
-    transition: background-color 0.2s;
-}
-.btn-secondary:hover {
-    background-color: #5a6268;
-}
-.add-ingredient-option {
-    padding: 12px;
-    cursor: pointer;
-    border-bottom: 1px solid #eee;
-    color: #007bff;
-    font-weight: 500;
-    transition: background-color 0.2s;
-}
-.add-ingredient-option:hover {
-    background-color: #f8f9fa;
-}
-.add-ingredient-option:last-child {
-    border-bottom: none;
-}
-    </style>
+    <link href="~/css/MealPlanCreate.css" rel="stylesheet">
 </head>
 <body>
@@ -303,6 +47,6 @@
                             Daily Calories
                         </label>
-                        <input type="number" class="form-control" id="DailyCalories" name="DailyCalories"
-                               min="1200" max="5000" value="@(Model?.DailyCalories ?? 2000)" required>
+                        <input type="number" class="form-control" id="DailyCalories" name="DailyCalories" min="1200"
+                            max="5000" value="@(Model?.DailyCalories ?? 2000)" required>
                         <div class="help-text">1200 - 5000 calories</div>
                     </div>
@@ -312,6 +56,6 @@
                             Daily Protein (g)
                         </label>
-                        <input type="number" class="form-control" id="DailyProtein" name="DailyProtein"
-                               min="50" max="300" value="@(Model?.DailyProtein ?? 150)" required>
+                        <input type="number" class="form-control" id="DailyProtein" name="DailyProtein" min="50"
+                            max="300" value="@(Model?.DailyProtein ?? 150)" required>
                         <div class="help-text">50 - 300 grams</div>
                     </div>
@@ -321,6 +65,6 @@
                             Daily Carbs (g)
                         </label>
-                        <input type="number" class="form-control" id="DailyCarbs" name="DailyCarbs"
-                               min="100" max="600" value="@(Model?.DailyCarbs ?? 200)" required>
+                        <input type="number" class="form-control" id="DailyCarbs" name="DailyCarbs" min="100" max="600"
+                            value="@(Model?.DailyCarbs ?? 200)" required>
                         <div class="help-text">100 - 600 grams</div>
                     </div>
@@ -330,6 +74,6 @@
                             Daily Fat (g)
                         </label>
-                        <input type="number" class="form-control" id="DailyFat" name="DailyFat"
-                               min="30" max="200" value="@(Model?.DailyFat ?? 78)" required>
+                        <input type="number" class="form-control" id="DailyFat" name="DailyFat" min="30" max="200"
+                            value="@(Model?.DailyFat ?? 78)" required>
                         <div class="help-text">30 - 200 grams</div>
                     </div>
@@ -341,5 +85,5 @@
                     </label>
                     <input type="number" class="form-control" id="RestaurantMealsPerWeek" name="RestaurantMealsPerWeek"
-                           min="0" max="21" value="@(Model?.RestaurantMealsPerWeek ?? 3)" required>
+                        min="0" max="21" value="@(Model?.RestaurantMealsPerWeek ?? 3)" required>
                     <div class="help-text">0 - 21 meals per week</div>
                 </div>
@@ -355,7 +99,6 @@
         </div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
     <script>
-        document.getElementById('DailyCalories').addEventListener('input', function() {
+        document.getElementById('DailyCalories').addEventListener('input', function () {
             const calories = parseFloat(this.value);
             if (calories && calories >= 1200) {
@@ -368,5 +111,5 @@
             }
         });
-        document.getElementById('mealPlanForm').addEventListener('submit', function() {
+        document.getElementById('mealPlanForm').addEventListener('submit', function () {
             const submitBtn = this.querySelector('button[type="submit"]');
             const btnText = submitBtn.querySelector('.btn-text');
Index: NutriMatch/Views/MealPlan/Details.cshtml
===================================================================
--- NutriMatch/Views/MealPlan/Details.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/MealPlan/Details.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -4,559 +4,161 @@
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
-<style>
-   :root {
-    --primary-green: #2ECC71;
-    --dark-green: #27AE60;
-    --light-green: #58D68D;
-    --light-green-gray: #bbcabe;
-    --dark-gray: #2C3E50;
-    --light-gray: #ECF0F1;
-    --nutri-light-gray: #f3f4f6;
-    --nutri-green-dark: #22c55e;
-    --danger-red: #dc2626;
-    --danger-red-hover: #b91c1c;
-}
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-green-gray) 100%);
-    min-height: 100vh;
-}
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 40px 20px;
-    }
-    .header-section {
-        text-align: center;
-        margin-bottom: 30px;
-        color: #2c5530;
-    }
-    .header-section h1 {
-        margin-top: 3rem;
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 8px;
-    }
-    .header-section p {
-        font-size: 1.1rem;
-        color: #6b7280;
-        margin-bottom: 8px;
-    }
-    .generated-date {
-        color: #9ca3af;
-        font-size: 0.9rem;
-        margin-bottom: 0;
-    }
-    .navigation-bar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 30px;
-        gap: 16px;
-    }
-    .nav-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        background: rgba(255, 255, 255, 0.95);
-        color: #374151;
-        text-decoration: none;
-        border: none;
-        padding: 12px 20px;
-        border-radius: 12px;
-        font-weight: 600;
-        font-size: 0.95rem;
-        transition: all 0.2s ease;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        cursor: pointer;
-    }
-    .nav-btn:hover {
-        background: white;
-        color: #374151;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-    .nav-btn.delete {
-        background: var(--danger-red);
-        color: white;
-    }
-    .nav-btn.delete:hover {
-        background: var(--danger-red-hover);
-        color: white;
-    }
-    .days-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-        gap: 24px;
-        margin-bottom: 40px;
-    }
-    .day-card {
-        background: rgba(255, 255, 255, 0.95);
-        border-radius: 20px;
-        padding: 24px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        transition: all 0.2s ease;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    .day-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-    }
-    .day-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20px;
-        padding-bottom: 16px;
-        border-bottom: 2px solid #f1f5f9;
-    }
-    .day-name {
-        font-size: 1.4rem;
-        font-weight: 700;
-        color: #2c5530;
-    }
-    .day-calories {
-        background: #4ade80;
-        color: white;
-        padding: 6px 14px;
-        border-radius: 20px;
-        font-size: 0.85rem;
-        font-weight: 600;
-    }
-    .meals-container {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-    }
-    .meal-card {
-        background: #f8fafc;
-        border-radius: 12px;
-        padding: 16px;
-        border-left: 4px solid #4ade80;
-        transition: all 0.2s ease;
-        position: relative;
-    }
-    .meal-card.breakfast {
-        background: #fef3c7;
-        border-left-color: #f59e0b;
-    }
-    .meal-card.lunch {
-        background: #dbeafe;
-        border-left-color: #3b82f6;
-    }
-    .meal-card.dinner {
-        background: #fce7f3;
-        border-left-color: #ec4899;
-    }
-    .meal-card.snack {
-        background: #ede9fe;
-        border-left-color: #8b5cf6;
-    }
-    .meal-card:hover {
-        transform: translateX(2px);
-    }
-    .meal-card.clickable {
-        cursor: pointer;
-    }
-    .meal-card.clickable:hover {
-        transform: translateX(4px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-    .meal-card.loading {
-        opacity: 0.6;
-        pointer-events: none;
-    }
-    .meal-card.loading::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 20px;
-        height: 20px;
-        margin: -10px 0 0 -10px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #4ade80;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-    }
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-    .meal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-    }
-    .meal-type {
-        font-weight: 700;
-        font-size: 0.8rem;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-    .meal-type.breakfast { color: #d97706; }
-    .meal-type.lunch { color: #2563eb; }
-    .meal-type.dinner { color: #db2777; }
-    .meal-type.snack { color: #7c3aed; }
-    .restaurant-badge {
-        background: #ef4444;
-        color: white;
-        padding: 3px 8px;
-        border-radius: 12px;
-        font-size: 0.7rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.3px;
-    }
-    .recipe-badge {
-        background: #4ade80;
-        color: white;
-        padding: 3px 8px;
-        border-radius: 12px;
-        font-size: 0.7rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.3px;
-    }
-    .meal-name {
-        font-size: 1.05rem;
-        font-weight: 600;
-        color: #374151;
-        margin-bottom: 4px;
-        line-height: 1.3;
-    }
-    .meal-restaurant {
-        font-size: 0.85rem;
-        color: #6b7280;
-        font-style: italic;
-        margin-bottom: 8px;
-    }
-    .meal-macros {
-        display: flex;
-        gap: 8px;
-        flex-wrap: wrap;
-    }
-    .macro-badge {
-        background: rgba(255, 255, 255, 0.8);
-        padding: 4px 10px;
-        border-radius: 16px;
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: #374151;
-        border: 1px solid rgba(255, 255, 255, 0.5);
-    }
-    .empty-day {
-        text-align: center;
-        color: #9ca3af;
-        font-style: italic;
-        padding: 20px;
-        background: #f8fafc;
-        border-radius: 12px;
-    }
-    .summary-card {
-        background: rgba(255, 255, 255, 0.95);
-        border-radius: 20px;
-        padding: 32px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    .summary-header {
-        text-align: center;
-        margin-bottom: 24px;
-    }
-    .summary-header h2 {
-        color: #2c5530;
-        font-size: 1.8rem;
-        font-weight: 700;
-        margin-bottom: 8px;
-    }
-    .summary-header p {
-        color: #6b7280;
-        margin: 0;
-    }
-    .summary-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 16px;
-    }
-    .summary-item {
-        background: #f0fdf4;
-        border: 2px solid #bbf7d0;
-        border-radius: 16px;
-        padding: 20px;
-        text-align: center;
-        transition: all 0.2s ease;
-    }
-    .summary-item:hover {
-        background: #dcfce7;
-        border-color: #4ade80;
-    }
-    .summary-label {
-        font-size: 0.8rem;
-        color: #6b7280;
-        margin-bottom: 8px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        font-weight: 600;
-    }
-    .summary-value {
-        font-size: 1.6rem;
-        font-weight: 700;
-        color: #16a34a;
-        line-height: 1;
-    }
-    .modal {
-        display: none;
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        background-color: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(4px);
-    }
-    .modal-content {
-        background-color: #fefefe;
-        margin: 15% auto;
-        padding: 30px;
-        border: none;
-        border-radius: 20px;
-        width: 90%;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-    }
-    .delete-modal-content {
-        max-width: 450px;
-        text-align: center;
-    }
-    .modal-header {
-        color: var(--danger-red);
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin-bottom: 16px;
-        display: flex;
-        justify-content: center;
-    }
-    .modal-body {
-        color: #374151;
-        font-size: 1rem;
-        line-height: 1.5;
-        margin-bottom: 24px;
-    }
-    .modal-buttons {
-        display: flex;
-        gap: 12px;
-        justify-content: center;
-    }
-    .modal-btn {
-        padding: 10px 24px;
-        border: none;
-        border-radius: 8px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        font-size: 0.9rem;
-    }
-    .modal-btn.confirm {
-        background: var(--danger-red);
-        color: white;
-    }
-    .modal-btn.confirm:hover {
-        background: var(--danger-red-hover);
-    }
-    .modal-btn.cancel {
-        background: #f3f4f6;
-        color: #374151;
-    }
-    .modal-btn.cancel:hover {
-        background: #e5e7eb;
-    }
-    @@media (max-width: 768px) {
-        .container {
-            padding: 20px 16px;
-        }
-        .days-container {
-            grid-template-columns: 1fr;
-            gap: 20px;
-        }
-        .navigation-bar {
-            flex-direction: column;
-            align-items: stretch;
-        }
-        .header-section h1 {
-            font-size: 2rem;
-        }
-        .summary-grid {
-            grid-template-columns: repeat(2, 1fr);
-        }
-        .meal-macros {
-            justify-content: center;
-        }
-        .day-card, .summary-card {
-            padding: 20px;
-        }
-        .modal-content {
-            margin: 30% auto;
-            padding: 24px;
-        }
-        .modal-buttons {
-            flex-direction: column;
-        }
-    }
-   @@keyframes fadeInUp {
-        from {
-            opacity: 0;
-            transform: translateY(20px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-    .day-card {
-        animation: fadeInUp 0.5s ease forwards;
-    }
-</style>
-<div class="container">
-    <div class="header-section">
-        <h1>Your Weekly Meal Plan</h1>
-        <p>Perfectly balanced nutrition for every day of the week</p>
-        <div class="generated-date">
-            Generated on @Model.GeneratedAt.ToString("MMMM dd, yyyy 'at' h:mm tt")
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create Meal Plan</title>
+    <link href="~/css/MealPlanDetails.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <div class="header-section">
+            <h1>Your Weekly Meal Plan</h1>
+            <p>Perfectly balanced nutrition for every day of the week</p>
+            <div class="generated-date">
+                Generated on @Model.GeneratedAt.ToString("MMMM dd, yyyy 'at' h:mm tt")
+            </div>
+        </div>
+        <div class="navigation-bar">
+            <a href="@Url.Action("Index", "MealPlan")" class="nav-btn">
+                <i class="fas fa-arrow-left"></i>
+                Back to My Plans
+            </a>
+            <button class="nav-btn delete" onclick="showDeleteModal()">
+                <i class="fas fa-trash-alt"></i>
+                Delete Plan
+            </button>
+        </div>
+        <div class="days-container">
+            @{
+                var days = new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" };
+                var dayMeals = Model.MealSlots.GroupBy(ms => ms.Day).ToDictionary(g => g.Key, g => g.ToList());
+            }
+            @foreach (var day in days)
+            {
+                var meals = dayMeals.ContainsKey(day) ? dayMeals[day] : new List<NutriMatch.Models.MealSlot>();
+                var dailyCalories = meals.Sum(m => m.IsRestaurantMeal ? (m.RestaurantMeal?.Calories ?? 0) :
+                (m.Recipe?.Calories
+                ?? 0));
+                <div class="day-card">
+                    <div class="day-header">
+                        <div class="day-name">@day</div>
+                        <div class="day-calories">@((int)dailyCalories) cal</div>
+                    </div>
+                    @if (meals.Any())
+                    {
+                        <div class="meals-container">
+                            @foreach (var meal in meals.OrderBy(m => GetMealOrder(m.MealType)))
+                            {
+                                @if (meal.IsRestaurantMeal && meal.RestaurantMeal != null)
+                                {
+                                    <div class="meal-card @meal.MealType">
+                                        <div class="meal-header">
+                                            <span class="meal-type @meal.MealType">@meal.MealType</span>
+                                            <span class="restaurant-badge">Restaurant</span>
+                                        </div>
+                                        <div class="meal-name">@meal.RestaurantMeal.ItemName</div>
+                                        <div class="meal-restaurant">@meal.RestaurantMeal.RestaurantName</div>
+                                        <div class="meal-macros">
+                                            <span class="macro-badge">@((int)meal.RestaurantMeal.Calories) cal</span>
+                                            <span class="macro-badge">@((int)meal.RestaurantMeal.Protein)g protein</span>
+                                            <span class="macro-badge">@((int)meal.RestaurantMeal.Carbs)g carbs</span>
+                                            <span class="macro-badge">@((int)meal.RestaurantMeal.Fat)g fat</span>
+                                        </div>
+                                    </div>
+                                }
+                                else if (meal.Recipe != null)
+                                {
+                                    <div class="meal-card @meal.MealType clickable"
+                                        onclick="handleMealCardClick(event, @meal.Recipe.Id)">
+                                        <div class="meal-header">
+                                            <span class="meal-type @meal.MealType">@meal.MealType</span>
+                                            <span class="recipe-badge">Recipe</span>
+                                        </div>
+                                        <div class="meal-name">@meal.Recipe.Title</div>
+                                        <div class="meal-macros">
+                                            <span class="macro-badge">@((int)meal.Recipe.Calories) cal</span>
+                                            <span class="macro-badge">@((int)meal.Recipe.Protein)g protein</span>
+                                            <span class="macro-badge">@((int)meal.Recipe.Carbs)g carbs</span>
+                                            <span class="macro-badge">@((int)meal.Recipe.Fat)g fat</span>
+                                        </div>
+                                    </div>
+                                }
+                            }
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="empty-day">No meals planned for this day</div>
+                    }
+                </div>
+            }
+        </div>
+        <div class="summary-card">
+            <div class="summary-header">
+                <h2>Weekly Overview</h2>
+                <p>Your nutritional breakdown for the entire week</p>
+            </div>
+            @{
+                var totalCalories = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Calories ?? 0) :
+                (ms.Recipe?.Calories ?? 0));
+                var totalProtein = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Protein ?? 0) :
+                (ms.Recipe?.Protein ?? 0));
+                var totalCarbs = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Carbs ?? 0) :
+                (ms.Recipe?.Carbs ?? 0));
+                var totalFat = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Fat ?? 0) :
+                (ms.Recipe?.Fat
+                ?? 0));
+                var restaurantMeals = Model.MealSlots.Count(ms => ms.IsRestaurantMeal);
+            }
+            <div class="summary-grid">
+                <div class="summary-item">
+                    <div class="summary-label">Total Calories</div>
+                    <div class="summary-value">@((int)totalCalories)</div>
+                </div>
+                <div class="summary-item">
+                    <div class="summary-label">Total Protein</div>
+                    <div class="summary-value">@((int)totalProtein)g</div>
+                </div>
+                <div class="summary-item">
+                    <div class="summary-label">Total Carbs</div>
+                    <div class="summary-value">@((int)totalCarbs)g</div>
+                </div>
+                <div class="summary-item">
+                    <div class="summary-label">Total Fat</div>
+                    <div class="summary-value">@((int)totalFat)g</div>
+                </div>
+                <div class="summary-item">
+                    <div class="summary-label">Restaurant Meals</div>
+                    <div class="summary-value">@restaurantMeals</div>
+                </div>
+                <div class="summary-item">
+                    <div class="summary-label">Home Cooked</div>
+                    <div class="summary-value">@(Model.MealSlots.Count - restaurantMeals)</div>
+                </div>
+            </div>
         </div>
     </div>
-    <div class="navigation-bar">
-        <a href="@Url.Action("Index", "MealPlan")" class="nav-btn">
-            <i class="fas fa-arrow-left"></i>
-            Back to My Plans
-        </a>
-        <button class="nav-btn delete" onclick="showDeleteModal()">
-            <i class="fas fa-trash-alt"></i>
-            Delete Plan
-        </button>
+    <div id="modalWindow"></div>
+    <div id="deleteModal" class="modal">
+        <div class="delete-modal-content modal-content">
+            <div class="modal-header">
+                <i class="fas fa-exclamation-triangle"></i>
+                Delete Meal Plan
+            </div>
+            <div class="modal-body">
+                Are you sure you want to delete this meal plan? This action cannot be undone and all meal data will be
+                permanently removed.
+            </div>
+            <div class="modal-buttons">
+                <button class="modal-btn cancel" onclick="hideDeleteModal()">Cancel</button>
+                <button class="modal-btn confirm" onclick="confirmDelete()">Delete Plan</button>
+            </div>
+        </div>
     </div>
-    <div class="days-container">
-        @{
-            var days = new[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" };
-            var dayMeals = Model.MealSlots.GroupBy(ms => ms.Day).ToDictionary(g => g.Key, g => g.ToList());
-        }
-        @foreach (var day in days)
-        {
-            var meals = dayMeals.ContainsKey(day) ? dayMeals[day] : new List<NutriMatch.Models.MealSlot>();
-            var dailyCalories = meals.Sum(m => m.IsRestaurantMeal ? (m.RestaurantMeal?.Calories ?? 0) : (m.Recipe?.Calories ?? 0));
-            <div class="day-card">
-                <div class="day-header">
-                    <div class="day-name">@day</div>
-                    <div class="day-calories">@((int)dailyCalories) cal</div>
-                </div>
-                @if (meals.Any())
-                {
-                    <div class="meals-container">
-                        @foreach (var meal in meals.OrderBy(m => GetMealOrder(m.MealType)))
-                        {
-                            @if (meal.IsRestaurantMeal && meal.RestaurantMeal != null)
-                            {
-                                <div class="meal-card @meal.MealType">
-                                    <div class="meal-header">
-                                        <span class="meal-type @meal.MealType">@meal.MealType</span>
-                                        <span class="restaurant-badge">Restaurant</span>
-                                    </div>
-                                    <div class="meal-name">@meal.RestaurantMeal.ItemName</div>
-                                    <div class="meal-restaurant">@meal.RestaurantMeal.RestaurantName</div>
-                                    <div class="meal-macros">
-                                        <span class="macro-badge">@((int)meal.RestaurantMeal.Calories) cal</span>
-                                        <span class="macro-badge">@((int)meal.RestaurantMeal.Protein)g protein</span>
-                                        <span class="macro-badge">@((int)meal.RestaurantMeal.Carbs)g carbs</span>
-                                        <span class="macro-badge">@((int)meal.RestaurantMeal.Fat)g fat</span>
-                                    </div>
-                                </div>
-                            }
-                            else if (meal.Recipe != null)
-                            {
-                                <div class="meal-card @meal.MealType clickable" onclick="handleMealCardClick(event, @meal.Recipe.Id)">
-                                    <div class="meal-header">
-                                        <span class="meal-type @meal.MealType">@meal.MealType</span>
-                                        <span class="recipe-badge">Recipe</span>
-                                    </div>
-                                    <div class="meal-name">@meal.Recipe.Title</div>
-                                    <div class="meal-macros">
-                                        <span class="macro-badge">@((int)meal.Recipe.Calories) cal</span>
-                                        <span class="macro-badge">@((int)meal.Recipe.Protein)g protein</span>
-                                        <span class="macro-badge">@((int)meal.Recipe.Carbs)g carbs</span>
-                                        <span class="macro-badge">@((int)meal.Recipe.Fat)g fat</span>
-                                    </div>
-                                </div>
-                            }
-                        }
-                    </div>
-                }
-                else
-                {
-                    <div class="empty-day">No meals planned for this day</div>
-                }
-            </div>
-        }
-    </div>
-    <div class="summary-card">
-        <div class="summary-header">
-            <h2>Weekly Overview</h2>
-            <p>Your nutritional breakdown for the entire week</p>
-        </div>
-        @{
-            var totalCalories = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Calories ?? 0) : (ms.Recipe?.Calories ?? 0));
-            var totalProtein = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Protein ?? 0) : (ms.Recipe?.Protein ?? 0));
-            var totalCarbs = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Carbs ?? 0) : (ms.Recipe?.Carbs ?? 0));
-            var totalFat = Model.MealSlots.Sum(ms => ms.IsRestaurantMeal ? (ms.RestaurantMeal?.Fat ?? 0) : (ms.Recipe?.Fat ?? 0));
-            var restaurantMeals = Model.MealSlots.Count(ms => ms.IsRestaurantMeal);
-        }
-        <div class="summary-grid">
-            <div class="summary-item">
-                <div class="summary-label">Total Calories</div>
-                <div class="summary-value">@((int)totalCalories)</div>
-            </div>
-            <div class="summary-item">
-                <div class="summary-label">Total Protein</div>
-                <div class="summary-value">@((int)totalProtein)g</div>
-            </div>
-            <div class="summary-item">
-                <div class="summary-label">Total Carbs</div>
-                <div class="summary-value">@((int)totalCarbs)g</div>
-            </div>
-            <div class="summary-item">
-                <div class="summary-label">Total Fat</div>
-                <div class="summary-value">@((int)totalFat)g</div>
-            </div>
-            <div class="summary-item">
-                <div class="summary-label">Restaurant Meals</div>
-                <div class="summary-value">@restaurantMeals</div>
-            </div>
-            <div class="summary-item">
-                <div class="summary-label">Home Cooked</div>
-                <div class="summary-value">@(Model.MealSlots.Count - restaurantMeals)</div>
-            </div>
-        </div>
-    </div>
-</div>
-<div id="modalWindow"></div>
-<div id="deleteModal" class="modal">
-    <div class="delete-modal-content modal-content">
-        <div class="modal-header">
-            <i class="fas fa-exclamation-triangle"></i>
-            Delete Meal Plan
-        </div>
-        <div class="modal-body">
-            Are you sure you want to delete this meal plan? This action cannot be undone and all meal data will be permanently removed.
-        </div>
-        <div class="modal-buttons">
-            <button class="modal-btn cancel" onclick="hideDeleteModal()">Cancel</button>
-            <button class="modal-btn confirm" onclick="confirmDelete()">Delete Plan</button>
-        </div>
-    </div>
-</div>
-<form id="deleteForm" method="post" action="@Url.Action("Delete", "MealPlan")" style="display: none;">
-    @Html.AntiForgeryToken()
-    <input type="hidden" name="id" value="@Model.Id" />
-</form>
+    <form id="deleteForm" method="post" action="@Url.Action("Delete", "MealPlan")" style="display: none;">
+        @Html.AntiForgeryToken()
+        <input type="hidden" name="id" value="@Model.Id" />
+    </form>
+</body>
 <script>
     function showRecipeDetailsFromMealPlan(recipeId) {
@@ -591,9 +193,9 @@
                         modalContainer.innerHTML = '';
                         clickedCard.classList.remove('loading');
-                    }); 
+                    });
                     modalElement.addEventListener('shown.bs.modal', function () {
                         clickedCard.classList.remove('loading');
                     });
-                } else {    
+                } else {
                     clickedCard.classList.remove('loading');
                 }
@@ -621,5 +223,5 @@
         document.getElementById('deleteForm').submit();
     }
-    window.onclick = function(event) {
+    window.onclick = function (event) {
         const modal = document.getElementById('deleteModal');
         if (event.target === modal) {
@@ -627,10 +229,10 @@
         }
     }
-    document.addEventListener('keydown', function(event) {
+    document.addEventListener('keydown', function (event) {
         if (event.key === 'Escape') {
             hideDeleteModal();
         }
     });
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const cards = document.querySelectorAll('.day-card');
         cards.forEach((card, index) => {
Index: NutriMatch/Views/MealPlan/Index.cshtml
===================================================================
--- NutriMatch/Views/MealPlan/Index.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/MealPlan/Index.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -9,327 +9,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@ViewData["Title"]</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <style>
-    :root {
-    --primary-green: #2ECC71;
-    --dark-green: #27AE60;
-    --light-green: #58D68D;
-    --light-green-gray: #bbcabe;
-    --dark-gray: #2C3E50;
-    --light-gray: #ECF0F1;
-    --nutri-light-gray: #f3f4f6;
-    --nutri-green-dark: #22c55e;
-}
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-green-gray) 100%);
-    min-height: 100vh;
-}
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 40px 20px;
-        }
-        .header-section {
-            margin-top: 3rem;
-            text-align: center;
-            margin-bottom: 40px;
-            color: #2c5530;
-        }
-        .header-section h1 {
-            font-size: 2.8rem;
-            font-weight: 700;
-            margin-bottom: 12px;
-        }
-        .header-section p {
-            font-size: 1.1rem;
-            color: #6b7280;
-            margin: 0;
-        }
-        .alert-message {
-            padding: 16px 20px;
-            border-radius: 12px;
-            margin-bottom: 30px;
-            display: flex;
-            align-items: center;
-            font-weight: 500;
-        }
-        .alert-message i {
-            margin-right: 12px;
-        }
-        .alert-success {
-            background: rgba(209, 250, 229, 0.9);
-            color: #065f46;
-            border: 1px solid #6ee7b7;
-        }
-        .alert-error {
-            background: rgba(254, 226, 226, 0.9);
-            color: #991b1b;
-            border: 1px solid #fca5a5;
-        }
-        .plans-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-            gap: 24px;
-        }
-        .plan-card {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            overflow: hidden;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            height: 100%;
-        }
-        .plan-card:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-        }
-        .plan-card-header {
-            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
-            color: white;
-            padding: 20px;
-            position: relative;
-            overflow: hidden;
-        }
-        .plan-card-header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.5s ease;
-        }
-        .plan-card:hover .plan-card-header::before {
-            left: 100%;
-        }
-        .plan-title {
-            font-size: 1.2rem;
-            font-weight: 700;
-            margin-bottom: 4px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .plan-date {
-            font-size: 0.85rem;
-            opacity: 0.9;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .plan-card-body {
-            padding: 20px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-        .plan-stats {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 12px;
-            margin-bottom: 16px;
-        }
-        .stat-box {
-            background: #f8fafc;
-            border: 1px solid #e2e8f0;
-            border-radius: 12px;
-            padding: 12px;
-            text-align: center;
-            transition: all 0.2s ease;
-        }
-        .stat-box:hover {
-            background: #f0fdf4;
-            border-color: #4ade80;
-        }
-        .stat-number {
-            font-size: 1.4rem;
-            font-weight: 700;
-            color: #16a34a;
-            display: block;
-            line-height: 1;
-        }
-        .stat-label {
-            font-size: 0.75rem;
-            color: #6b7280;
-            text-transform: uppercase;
-            font-weight: 600;
-            letter-spacing: 0.5px;
-            margin-top: 4px;
-        }
-        .meal-preview {
-            background: #f8fafc;
-            border-radius: 12px;
-            padding: 14px;
-            margin-bottom: 16px;
-            flex: 1;
-        }
-        .meal-preview h6 {
-            color: #374151;
-            font-weight: 600;
-            margin-bottom: 8px;
-            font-size: 0.85rem;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .meal-list {
-            font-size: 0.8rem;
-            color: #6b7280;
-            line-height: 1.4;
-        }
-        .meal-list div {
-            margin-bottom: 2px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-        .view-plan-btn {
-            background: #4ade80;
-            color: white;
-            text-decoration: none;
-            border: none;
-            padding: 12px 16px;
-            border-radius: 12px;
-            font-weight: 600;
-            text-align: center;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-size: 0.9rem;
-        }
-        .view-plan-btn:hover {
-            background: #22c55e;
-            color: white;
-            text-decoration: none;
-        }
-        .create-new-card {
-            background: rgba(255, 255, 255, 0.7);
-            border: 3px dashed #4ade80;
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-height: 300px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            text-decoration: none;
-            color: #16a34a;
-        }
-        .create-new-card:hover {
-            background: rgba(255, 255, 255, 0.9);
-            border-color: #22c55e;
-            color: #15803d;
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-        }
-        .create-new-content {
-            text-align: center;
-            padding: 20px;
-        }
-        .create-new-content i {
-            font-size: 3.5rem;
-            margin-bottom: 16px;
-            display: block;
-            color: #4ade80;
-        }
-        .create-new-content h4 {
-            font-weight: 700;
-            margin-bottom: 8px;
-            font-size: 1.2rem;
-        }
-        .create-new-content p {
-            margin: 0;
-            font-size: 0.9rem;
-            color: #6b7280;
-        }
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: #374151;
-        }
-        .empty-state i {
-            font-size: 4rem;
-            margin-bottom: 24px;
-            color: #9ca3af;
-        }
-        .empty-state h3 {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 12px;
-            color: #2c5530;
-        }
-        .empty-state p {
-            font-size: 1rem;
-            margin-bottom: 30px;
-            color: #6b7280;
-            max-width: 500px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        .btn-create-first {
-            background: rgba(255, 255, 255, 0.9);
-            color: #16a34a;
-            border: 2px solid #4ade80;
-            padding: 16px 32px;
-            border-radius: 16px;
-            font-size: 1rem;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .btn-create-first:hover {
-            background: #4ade80;
-            color: white;
-            border-color: #22c55e;
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);
-        }
-        @@media (max-width: 768px) {
-            .container {
-                padding: 20px 16px;
-            }
-            .plans-grid {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-            .header-section h1 {
-                font-size: 2.2rem;
-            }
-            .plan-card-header, .plan-card-body {
-                padding: 16px;
-            }
-            .empty-state {
-                padding: 40px 16px;
-            }
-        }
-        @@keyframes slideInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .plan-card {
-            animation: slideInUp 0.6s ease forwards;
-            opacity: 0;
-        }
-        .create-new-card {
-            animation: slideInUp 0.6s ease forwards;
-            opacity: 0;
-        }
-    </style>
+    <link href="~/css/MealPlanIndex.css" rel="stylesheet">
 </head>
 <body>
@@ -361,5 +40,6 @@
                 <i class="fas fa-utensils"></i>
                 <h3>No Meal Plans Yet</h3>
-                <p>You haven't created any meal plans yet. Start by creating your first personalized weekly meal plan tailored to your nutrition goals!</p>
+                <p>You haven't created any meal plans yet. Start by creating your first personalized weekly meal plan
+                    tailored to your nutrition goals!</p>
                 <a href="@Url.Action("Create", "MealPlan")" class="btn-create-first">
                     <i class="fas fa-plus"></i>
@@ -380,5 +60,6 @@
                 @foreach (var mealPlan in Model.OrderByDescending(m => m.GeneratedAt))
                 {
-                    <div class="plan-card" onclick="location.href='@Url.Action("Details", "MealPlan", new { id = mealPlan.Id })'">
+                    <div class="plan-card"
+                        onclick="location.href='@Url.Action("Details", "MealPlan", new { id = mealPlan.Id })'">
                         <div class="plan-card-header">
                             <div class="plan-title">
@@ -412,7 +93,6 @@
         }
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             const cards = document.querySelectorAll('.plan-card, .create-new-card');
             cards.forEach((card, index) => {
Index: NutriMatch/Views/Recipes/Create.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Create.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/Create.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -23,10 +23,6 @@
                     <div class="form-group">
                         <label for="Title" class="label">Recipe Title</label>
-                        <input type="text" 
-                               name="Title" 
-                               id="Title" 
-                               class="input" 
-                               placeholder="Enter your recipe name..."
-                               required />
+                        <input type="text" name="Title" id="Title" class="input" placeholder="Enter your recipe name..."
+                            required />
                         <div class="validation-error" id="titleValidation"></div>
                     </div>
@@ -35,7 +31,5 @@
                         <div class="search-container">
                             <div class="flex-row">
-                                <input type="text" 
-                                    class="input flex-2" 
-                                    placeholder="Search ingredients..." 
+                                <input type="text" class="input flex-2" placeholder="Search ingredients..."
                                     id="ingredientSearch">
                                 <select class="input flex-1" id="ingredientUnit">
@@ -48,16 +42,13 @@
                                     <option value="cup">Cup</option>
                                 </select>
-                                <input type="number" 
-                                    class="input flex-1" 
-                                    placeholder="Amount" 
-                                    id="ingredientQuantity" 
-                                    step="0.01" 
-                                    min="0">
+                                <input type="number" class="input flex-1" placeholder="Amount" id="ingredientQuantity"
+                                    step="0.01" min="0">
                                 <button type="button" class="btn btn-primary" id="addIngredientButton">
                                     Add
                                 </button>
-                                <button type="button" class="btn btn-secondary add-new-ingredient-btn" id="addNewIngredientBtn" style="display: none;">
-                                        + Create New Ingredient
-                                 </button>
+                                <button type="button" class="btn btn-secondary add-new-ingredient-btn"
+                                    id="addNewIngredientBtn" style="display: none;">
+                                    + Create New Ingredient
+                                </button>
                             </div>
                             <div class="dropdown" id="ingredientDropdown"></div>
@@ -71,7 +62,6 @@
                         <label class="label">Instructions</label>
                         <div class="flex-row">
-                            <textarea class="input textarea flex-1" 
-                                      placeholder="Add a cooking step..." 
-                                      id="instructionInput"></textarea>
+                            <textarea class="input textarea flex-1" placeholder="Add a cooking step..."
+                                id="instructionInput"></textarea>
                             <button type="button" class="btn btn-primary" id="addInstructionButton">
                                 Add Step
@@ -89,5 +79,6 @@
                             <p><strong>Click to upload</strong> or drag and drop</p>
                             <p>PNG, JPG, GIF up to 10MB</p>
-                            <input  type="file" id="RecipeImage" name="RecipeImage" accept="image/*" style="display: none;" required/>
+                            <input type="file" id="RecipeImage" name="RecipeImage" accept="image/*"
+                                style="display: none;" required />
                         </div>
                         <div id="imagePreview" style="margin-top: 1rem; text-align: center;"></div>
Index: NutriMatch/Views/Recipes/Delete.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Delete.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/Delete.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -8,41 +8,44 @@
 
 <html>
+
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>Delete</title>
 </head>
+
 <body>
 
-<h3>Are you sure you want to delete this?</h3>
-<div>
-    <h4>Recipe</h4>
-    <hr />
-    <dl class="row">
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.Title)
-        </dt>
-        <dd class = "col-sm-10">
-            @Html.DisplayFor(model => model.Title)
-        </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.Instructions)
-        </dt>
-        <dd class = "col-sm-10">
-            @Html.DisplayFor(model => model.Instructions)
-        </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.Rating)
-        </dt>
-        <dd class = "col-sm-10">
-            @Html.DisplayFor(model => model.Rating)
-        </dd>
-    </dl>
-    
-    <form asp-action="Delete">
-        <input type="hidden" asp-for="Id" />
-        <input type="submit" value="Delete" class="btn btn-danger" /> |
-        <a asp-action="Index">Back to List</a>
-    </form>
-</div>
+    <h3>Are you sure you want to delete this?</h3>
+    <div>
+        <h4>Recipe</h4>
+        <hr />
+        <dl class="row">
+            <dt class="col-sm-2">
+                @Html.DisplayNameFor(model => model.Title)
+            </dt>
+            <dd class="col-sm-10">
+                @Html.DisplayFor(model => model.Title)
+            </dd>
+            <dt class="col-sm-2">
+                @Html.DisplayNameFor(model => model.Instructions)
+            </dt>
+            <dd class="col-sm-10">
+                @Html.DisplayFor(model => model.Instructions)
+            </dd>
+            <dt class="col-sm-2">
+                @Html.DisplayNameFor(model => model.Rating)
+            </dt>
+            <dd class="col-sm-10">
+                @Html.DisplayFor(model => model.Rating)
+            </dd>
+        </dl>
+
+        <form asp-action="Delete">
+            <input type="hidden" asp-for="Id" />
+            <input type="submit" value="Delete" class="btn btn-danger" /> |
+            <a asp-action="Index">Back to List</a>
+        </form>
+    </div>
 </body>
+
 </html>
Index: NutriMatch/Views/Recipes/Edit.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Edit.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/Edit.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -22,11 +22,6 @@
                     <div class="form-group">
                         <label for="Title" class="label">Recipe Title</label>
-                        <input type="text" 
-                               name="Title" 
-                               id="Title" 
-                               class="input" 
-                               placeholder="Enter your recipe name..."
-                               value="@Model.Title"
-                               required />
+                        <input type="text" name="Title" id="Title" class="input" placeholder="Enter your recipe name..."
+                            value="@Model.Title" required />
                         <div class="validation-error" id="titleValidation"></div>
                     </div>
@@ -35,8 +30,6 @@
                         <div class="search-container">
                             <div class="flex-row">
-                                <input type="text" 
-                                       class="input flex-2" 
-                                       placeholder="Search ingredients..." 
-                                       id="ingredientSearch">
+                                <input type="text" class="input flex-2" placeholder="Search ingredients..."
+                                    id="ingredientSearch">
                                 <select class="input flex-1" id="ingredientUnit">
                                     <option value="">Unit</option>
@@ -48,10 +41,6 @@
                                     <option value="cup">Cup</option>
                                 </select>
-                                <input type="number" 
-                                       class="input flex-1" 
-                                       placeholder="Amount" 
-                                       id="ingredientQuantity" 
-                                       step="0.01" 
-                                       min="0">
+                                <input type="number" class="input flex-1" placeholder="Amount" id="ingredientQuantity"
+                                    step="0.01" min="0">
                                 <button type="button" class="btn btn-primary" id="addIngredientButton">
                                     Add
@@ -68,7 +57,6 @@
                         <label class="label">Instructions</label>
                         <div class="flex-row">
-                            <textarea class="input textarea flex-1" 
-                                      placeholder="Add a cooking step..." 
-                                      id="instructionInput"></textarea>
+                            <textarea class="input textarea flex-1" placeholder="Add a cooking step..."
+                                id="instructionInput"></textarea>
                             <button type="button" class="btn btn-primary" id="addInstructionButton">
                                 Add Step
@@ -79,17 +67,19 @@
                             </div>
                         </div>
-                        <input type="hidden" id="selectedInstructions"  name="Instructions" />
+                        <input type="hidden" id="selectedInstructions" name="Instructions" />
                     </div>
                     <div class="form-group">
-                    <label class="form-label">Recipe Photo</label>
+                        <label class="form-label">Recipe Photo</label>
                         <div class="file-upload-area" id="fileUploadArea">
                             <div class="file-upload-icon">📷</div>
                             <p><strong>Click to upload</strong> or drag and drop</p>
                             <p>PNG, JPG, GIF up to 10MB</p>
-                            <input  type="file" id="RecipeImage" name="RecipeImage" accept="image/*" style="display: none;">
+                            <input type="file" id="RecipeImage" name="RecipeImage" accept="image/*"
+                                style="display: none;">
                             <input type="hidden" name="ExistingImageUrl" value="@Model.ImageUrl" />
                         </div>
                         <div id="imagePreview" style="margin-top: 1rem; text-align: center;">
-                        <img src="@Model.ImageUrl" alt="Recipe preview" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+                            <img src="@Model.ImageUrl" alt="Recipe preview"
+                                style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                         </div>
                     </div>
@@ -102,8 +92,8 @@
             </div>
         </div>
-        @if(!@ViewBag.RequireChange)
+        @if (!@ViewBag.RequireChange)
         {
-           <a href="/Recipes" class="back-link">
-            ← Back to Recipes
+            <a href="/Recipes" class="back-link">
+                ← Back to Recipes
             </a>
         }
@@ -121,5 +111,5 @@
     const requireChange = @((ViewBag.RequireChange ?? false).ToString().ToLower());
     document.addEventListener("DOMContentLoaded", () => {
-        if (!requireChange) return; 
+        if (!requireChange) return;
         const form = document.querySelector("form");
         let changed = false;
Index: NutriMatch/Views/Recipes/Index.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Index.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/Index.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -17,5 +17,6 @@
             <div class="row align-items-center">
                 <div class="col-md-12">
-                    <input type="text" class="form-control search-input" placeholder="Search recipes..." id="searchInput">
+                    <input type="text" class="form-control search-input" placeholder="Search recipes..."
+                        id="searchInput">
                 </div>
             </div>
@@ -25,5 +26,6 @@
                 <i class="fas fa-sliders-h me-2" style="color: var(--nutri-green);"></i>
                 Filter by Macronutrients
-                <button class="btn btn-outline-secondary btn-sm ms-3" onclick="resetFilters()"><i class="fas fa-undo me-1"></i>Reset Filters</button>
+                <button class="btn btn-outline-secondary btn-sm ms-3" onclick="resetFilters()"><i
+                        class="fas fa-undo me-1"></i>Reset Filters</button>
             </h4>
             <div class="row">
@@ -36,6 +38,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="caloriesFill"></div>
-                            <input type="range" class="range-input" min="0" max="2000" value="0" id="caloriesMin" oninput="updateSlider('calories')">
-                            <input type="range" class="range-input" min="0" max="2000" value="2000" id="caloriesMax" oninput="updateSlider('calories')">
+                            <input type="range" class="range-input" min="0" max="2000" value="0" id="caloriesMin"
+                                oninput="updateSlider('calories')">
+                            <input type="range" class="range-input" min="0" max="2000" value="2000" id="caloriesMax"
+                                oninput="updateSlider('calories')">
                         </div>
                     </div>
@@ -49,6 +53,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="proteinFill"></div>
-                            <input type="range" class="range-input" min="0" max="150" value="0" id="proteinMin" oninput="updateSlider('protein')">
-                            <input type="range" class="range-input" min="0" max="150" value="150" id="proteinMax" oninput="updateSlider('protein')">
+                            <input type="range" class="range-input" min="0" max="150" value="0" id="proteinMin"
+                                oninput="updateSlider('protein')">
+                            <input type="range" class="range-input" min="0" max="150" value="150" id="proteinMax"
+                                oninput="updateSlider('protein')">
                         </div>
                     </div>
@@ -62,6 +68,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="carbsFill"></div>
-                            <input type="range" class="range-input" min="0" max="150" value="0" id="carbsMin" oninput="updateSlider('carbs')">
-                            <input type="range" class="range-input" min="0" max="150" value="150" id="carbsMax" oninput="updateSlider('carbs')">
+                            <input type="range" class="range-input" min="0" max="150" value="0" id="carbsMin"
+                                oninput="updateSlider('carbs')">
+                            <input type="range" class="range-input" min="0" max="150" value="150" id="carbsMax"
+                                oninput="updateSlider('carbs')">
                         </div>
                     </div>
@@ -75,6 +83,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="fatsFill"></div>
-                            <input type="range" class="range-input" min="0" max="150" value="0" id="fatsMin" oninput="updateSlider('fats')">
-                            <input type="range" class="range-input" min="0" max="150" value="150" id="fatsMax" oninput="updateSlider('fats')">
+                            <input type="range" class="range-input" min="0" max="150" value="0" id="fatsMin"
+                                oninput="updateSlider('fats')">
+                            <input type="range" class="range-input" min="0" max="150" value="150" id="fatsMax"
+                                oninput="updateSlider('fats')">
                         </div>
                     </div>
@@ -84,24 +94,33 @@
         <div class=" d-flex justify-content-between align-items-center mb-4">
             <div class="results-count">
-            <i class="fas fa-utensils me-2"></i>Showing <strong> recipes</strong> matching your criteria
+                <i class="fas fa-utensils me-2"></i>Showing <strong id="visibleCount">@Model.Count</strong> of <strong
+                    id="totalCount">@ViewBag.TotalRecipes</strong> recipes
             </div>
             <div class="col-md-4">
-                    <button class="btn btn-outline-success w-100" id="favoritesToggle" onclick="toggleFavoritesFilter()">
-                        <i class="fas fa-heart me-2"></i>Show Favorites Only
-                    </button>
+                <button class="btn btn-outline-success w-100" id="favoritesToggle" onclick="toggleFavoritesFilter()">
+                    <i class="fas fa-heart me-2"></i>Show Favorites Only
+                </button>
             </div>
         </div>
         <div class="recipe-grid" id="recipeGrid">
-            @foreach(var recipe in Model)
+            @foreach (var recipe in Model)
             {
-                var isFavorited = ViewBag.FavoriteRecipeIds != null && ((List<int>)ViewBag.FavoriteRecipeIds).Contains(recipe.Id);
-                <div class="recipe-card" onclick="showRecipeDetails(@recipe.Id,false)" data-calories="@recipe.Calories" data-protein="@recipe.Protein" data-carbs="@recipe.Carbs" data-fat="@recipe.Fat">
-                @if(recipe.User.Id != ViewBag.userId){
-                    <button class="favorite-btn" onclick="event.stopPropagation(); toggleFavoriteFromIndex(this, @recipe.Id)" data-recipe-id="@recipe.Id" data-favorited="@isFavorited.ToString().ToLower()">
-                        <i class="@(isFavorited ? "fas" : "far") fa-heart"></i>
-                    </button>}
+                var isFavorited = ViewBag.FavoriteRecipeIds != null &&
+                ((List<int>)ViewBag.FavoriteRecipeIds).Contains(recipe.Id);
+                <div class="recipe-card" onclick="showRecipeDetails(@recipe.Id,false)" data-calories="@recipe.Calories"
+                    data-protein="@recipe.Protein" data-carbs="@recipe.Carbs" data-fat="@recipe.Fat">
+                    @if (recipe.User.Id != ViewBag.userId)
+                    {
+                        <button class="favorite-btn"
+                            onclick="event.stopPropagation(); toggleFavoriteFromIndex(this, @recipe.Id)"
+                            data-recipe-id="@recipe.Id" data-favorited="@isFavorited.ToString().ToLower()">
+                            <i class="@(isFavorited ? "fas" : "far") fa-heart"></i>
+                        </button>
+                    }
                     <img src="@recipe.ImageUrl" alt="@recipe.Title" class="recipe-image">
                     <div class="recipe-content">
-                        <h3 class="recipe-title">@recipe.Title</h3>
+                        <h3 class="recipe-title">@(recipe.Title.Length > 30
+                                                    ? recipe.Title.Substring(0, 30) + "…"
+                                                    : recipe.Title)</h3>
                         <div class="recipe-meta">
                             <span class="rating">
@@ -110,7 +129,7 @@
                             <span>
                                 <i class="fas fa-user"></i>
-                                @(recipe.User.UserName.Length > 23 
-                                    ? recipe.User.UserName.Substring(0, 23) + "…" 
-                                    : recipe.User.UserName)
+                                @(recipe.User.UserName.Length > 23
+                                                            ? recipe.User.UserName.Substring(0, 23) + "…"
+                                                            : recipe.User.UserName)
                             </span>
                             <span><i class="fas fa-calendar"> </i> @recipe.CreatedAt.ToString("MMM dd, yyyy")</span>
@@ -138,6 +157,25 @@
             }
         </div>
+        <div id="loadingSpinner" class="text-center mt-4" style="display: none;">
+            <div class="spinner-border text-success" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2">Loading more recipes...</p>
+        </div>
+        <div id="endOfResults" class="text-center mt-4" style="display: none;">
+            <p class="text-muted">
+                <i class="fas fa-check-circle me-2"></i>
+                You've reached the end of all recipes!
+            </p>
+        </div>
     </div>
     <div id="modalWindow"></div>
+    <script>
+        window.recipeData = {
+            currentPage: @ViewBag.CurrentPage,
+            hasMorePages: @ViewBag.HasMorePages.ToString().ToLower(),
+            totalRecipes: @ViewBag.TotalRecipes
+        };
+    </script>
     <script src="~/js/RecipeIndex.js"></script>
 </body>
Index: NutriMatch/Views/Recipes/MyRecipes.cshtml
===================================================================
--- NutriMatch/Views/Recipes/MyRecipes.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/MyRecipes.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -4,504 +4,103 @@
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
-<style>
-    :root {
-    --primary-green: #2ECC71;
-    --dark-green: #27AE60;
-    --light-green: #58D68D;
-    --light-green-gray: #bbcabe;
-    --dark-gray: #2C3E50;
-    --light-gray: #ECF0F1;
-    --nutri-light-gray: #f3f4f6;
-    --nutri-green-dark: #22c55e;
-}
-    body {
-         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-green-gray) 100%);
-        margin: 0;
-        padding: 0;
-        min-height: 100vh;
-    }
-    .container {
-        margin: 0 auto;
-        padding: 40px 20px;
-    }
-    .header-section {
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 20px;
-        padding: 40px;
-        margin-bottom: 30px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-        backdrop-filter: blur(10px);
-        text-align: center;
-    }
-    .header-section h1 {
-        color: #2c3e50;
-        font-size: 2.5rem;
-        font-weight: 600;
-        margin: 0 0 15px 0;
-    }
-    .header-section p {
-        color: #7f8c8d;
-        font-size: 1.1rem;
-        margin: 0 0 30px 0;
-        line-height: 1.6;
-    }
-    .create-recipe-btn {
-        background: #52c96b;
-        color: white;
-        padding: 15px 30px;
-        border: none;
-        border-radius: 25px;
-        font-size: 1.1rem;
-        font-weight: 600;
-        text-decoration: none;
-        display: inline-block;
-        transition: all 0.3s ease;
-        box-shadow: 0 5px 15px rgba(82, 201, 107, 0.3);
-    }
-    .create-recipe-btn:hover {
-        background: #47b35f;
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(82, 201, 107, 0.4);
-        color: white;
-        text-decoration: none;
-    }
-    .stats-section {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 20px;
-        margin-bottom: 30px;
-    }
-    .stat-card {
-        background: rgba(255, 255, 255, 0.8);
-        border-radius: 15px;
-        padding: 25px;
-        text-align: center;
-        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
-        backdrop-filter: blur(5px);
-    }
-    .stat-number {
-        font-size: 2rem;
-        font-weight: 700;
-        color: #52c96b;
-        margin-bottom: 5px;
-    }
-    .stat-label {
-        color: #7f8c8d;
-        font-size: 0.9rem;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-   .recipe-grid {
-    display: grid;
-    gap: 1.5rem;
-    margin-top: 2rem;
-    justify-items: center;
-    grid-template-columns: 1fr; 
-}
-@@media (min-width: 768px) {
-    .recipe-grid {
-        grid-template-columns: repeat(2, 1fr); 
-    }
-}
-@@media (min-width: 992px) {
-    .recipe-grid {
-        grid-template-columns: repeat(3, 1fr); 
-    }
-}
-.recipe-card {
-    width: 100%;
-    max-width: 417.953px;
-    height: 380px;
-    background: white;
-    border-radius: 20px;
-    overflow: hidden;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    position: relative !important;
-    cursor: pointer;
-    flex-shrink: 0;
-    box-sizing: border-box;
-}
-.recipe-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
-}
-.recipe-card.loading {
-    pointer-events: none;
-}
-.recipe-card.loading * {
-    transition: none !important;
-    animation: none !important;
-}
-.recipe-image {
-    width: 100% !important;
-    height: 200px !important;
-    object-fit: cover;
-    background: linear-gradient(45deg, var(--nutri-green), var(--nutri-green-dark));
-    position: relative;
-    display: block !important;
-    flex-shrink: 0;
-    box-sizing: border-box;
-}
-.favorite-btn {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    background: rgba(255, 255, 255, 0.9);
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    z-index: 10;
-    backdrop-filter: blur(10px);
-}
-.favorite-btn:hover {
-    background: rgba(255, 255, 255, 1);
-    transform: scale(1.1);
-}
-.favorite-btn i {
-    font-size: 18px;
-    color: #ef4444;
-    transition: all 0.3s ease;
-}
-.favorite-btn:hover i {
-    color: #dc2626;
-}
-.favorite-btn.active i {
-    color: #ef4444;
-    font-weight: 900;
-}
-.badge {
-    position: absolute;
-    top: 5px;
-    right: 7px;
-    padding: 6px 12px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    z-index: 15;
-}
-.recipe-content {
-    padding: 1.5rem !important;
-    height: calc(100% - 200px) !important;
-    display: flex !important;
-    flex-direction: column !important;
-    box-sizing: border-box;
-    position: relative;
-    flex-shrink: 0;
-}
-.recipe-title {
-    font-size: 1.3rem !important;
-    font-weight: 700 !important;
-    color: #1f2937 !important;
-    margin-bottom: 0.5rem !important;
-    line-height: 1.3 !important;
-    transition: none !important;
-    animation: none !important;
-}
-.recipe-card .recipe-title,
-.recipe-card:hover .recipe-title,
-.recipe-card:active .recipe-title,
-.recipe-card:focus .recipe-title,
-.recipe-card.loading .recipe-title {
-    font-size: 1.3rem !important;
-    font-weight: 700 !important;
-    color: #1f2937 !important;
-    margin-bottom: 0.5rem !important;
-    line-height: 1.3 !important;
-    transition: none !important;
-    animation: none !important;
-}
-.recipe-meta {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-    color: var(--nutri-gray);
-    flex-wrap: wrap;
-}
-.recipe-meta .rating {
-    color: #fbbf24;
-    font-weight: 600;
-}
-.recipe-meta i {
-    margin-right: 4px;
-}
-.recipe-macros {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.5rem;
-    margin-top: 1px;
-    padding-top: 0.7rem;
-    border-top: 1px solid #eee;
-}
-.macro-item {
-    text-align: center;
-    padding: 0.5rem;
-    background: var(--nutri-light-gray);
-    border-radius: 10px;
-}
-.macro-value {
-    font-weight: 700;
-    color: var(--nutri-green-dark);
-    font-size: 1rem;
-    line-height: 1.2;
-}
-.macro-label {
-    font-size: 0.8rem;
-    color: var(--nutri-gray);
-    text-transform: uppercase;
-    font-weight: 600;
-    line-height: 1;
-}
-    .empty-state {
-        text-align: center;
-        padding: 60px 20px;
-        background: rgba(255, 255, 255, 0.8);
-        border-radius: 20px;
-        backdrop-filter: blur(10px);
-    }
-    .empty-icon {
-        font-size: 4rem;
-        color: #bdc3c7;
-        margin-bottom: 20px;
-    }
-    .empty-title {
-        font-size: 1.5rem;
-        color: #7f8c8d;
-        margin-bottom: 10px;
-    }
-    .empty-text {
-        color: #95a5a6;
-        margin-bottom: 30px;
-    }
-    .nutrition-tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 15px;
-    }
-    .nutrition-tag {
-        background: rgba(82, 201, 107, 0.1);
-        color: #52c96b;
-        padding: 4px 12px;
-        border-radius: 12px;
-        font-size: 0.8rem;
-        font-weight: 500;
-    }
-    #modalWindow {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-    pointer-events: none;
-}
-#modalWindow .modal {
-    pointer-events: all;
-}
-.recipe-card h3.recipe-title {
-    font-size: 1.3rem !important;
-    font-weight: 700 !important;
-    color: #1f2937 !important;
-    margin-bottom: 0.5rem !important;
-    line-height: 1.3 !important;
-}
-</style>
+<link href="~/css/MyRecipes.css" rel="stylesheet">
 <body>
-<div class="container mt-5">
-    <div class="header-section">
-        <h1>My Recipes</h1>
-        <p>Manage and showcase your culinary creations. Share your favorite dishes with the NutriMatch community.</p>
-        <a href="/Recipes/Create" class="create-recipe-btn">+ Create New Recipe</a>
-    </div>
-    <div class="stats-section">
-        <div class="stat-card">
-            <div class="stat-number">@Model.Count</div>
-            <div class="stat-label">Total Recipes</div>
+    <div class="container mt-5">
+        <div class="header-section">
+            <h1>My Recipes</h1>
+            <p>Manage and showcase your culinary creations. Share your favorite dishes with the NutriMatch community.
+            </p>
+            <a href="/Recipes/Create" class="create-recipe-btn">+ Create New Recipe</a>
         </div>
-        <div class="stat-card">
-            <div class="stat-number">@ViewBag.AverageRating</div>
-            <div class="stat-label">Avg Rating</div>
+        <div class="stats-section">
+            <div class="stat-card">
+                <div class="stat-number">@Model.Count</div>
+                <div class="stat-label">Total Recipes</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number">@ViewBag.AverageRating</div>
+                <div class="stat-label">Avg Rating</div>
+            </div>
         </div>
-    </div>
-    @if (Model != null && Model.Any())
-    {
-        <div class="recipe-grid" id="recipeGrid">
-            @foreach (var recipe in Model)
-            {
-                <div class="recipe-card" onclick="showRecipeDetails(@recipe.Id,true,'@recipe.RecipeStatus')" data-calories="@recipe.Calories" data-protein="@recipe.Protein" data-carbs="@recipe.Carbs" data-fat="@recipe.Fat">
-                    <img src="@recipe.ImageUrl" alt="@recipe.Title" class="recipe-image">
-                    <div class="badge">
-                        @if(recipe.RecipeStatus == "Pending")
-                        {
-                            <span class="badge bg-warning">
-                                <i class="fas fa-clock me-1"></i>Pending
-                            </span>
-                        }
-                        else if (recipe.RecipeStatus == "Accepted")
-                        {
-                            <span class="badge bg-success">
-                                <i class="fas fa-check me-1"></i>Accepted
-                            </span>
-                        }
-                        else if (recipe.RecipeStatus == "Declined")
-                        {
-                            <span class="badge bg-danger">
-                                <i class="fas fa-times me-1"></i>Declined
-                            </span>
-                        }
-                    </div>
-                    <div class="recipe-content">
-                        <h3 class="recipe-title">@recipe.Title</h3>
-                        <div class="recipe-meta">
-                            <span class="rating">
-                                <i class="fas fa-star"></i> @recipe.Rating
-                            </span>
-                            <span>
-                                <i class="fas fa-user"></i>
-                                @(recipe.User.UserName.Length > 23 
-                                    ? recipe.User.UserName.Substring(0, 23) + "…" 
-                                    : recipe.User.UserName)
-                            </span>
+        @if (Model != null && Model.Any())
+        {
+            <div class="recipe-grid" id="recipeGrid">
+                @foreach (var recipe in Model)
+                {
+                    <div class="recipe-card" onclick="showRecipeDetails(@recipe.Id,true,'@recipe.RecipeStatus')"
+                        data-calories="@recipe.Calories" data-protein="@recipe.Protein" data-carbs="@recipe.Carbs"
+                        data-fat="@recipe.Fat">
+                        <img src="@recipe.ImageUrl" alt="@recipe.Title" class="recipe-image">
+                        <div class="badge">
+                            @if (recipe.RecipeStatus == "Pending")
+                            {
+                                <span class="badge bg-warning">
+                                    <i class="fas fa-clock me-1"></i>Pending
+                                </span>
+                            }
+                            else if (recipe.RecipeStatus == "Accepted")
+                            {
+                                <span class="badge bg-success">
+                                    <i class="fas fa-check me-1"></i>Accepted
+                                </span>
+                            }
+                            else if (recipe.RecipeStatus == "Declined")
+                            {
+                                <span class="badge bg-danger">
+                                    <i class="fas fa-times me-1"></i>Declined
+                                </span>
+                            }
                         </div>
-                        <div class="recipe-macros">
-                            <div class="macro-item">
-                                <div class="macro-value">@recipe.Calories</div>
-                                <div class="macro-label">Cal</div>
+                        <div class="recipe-content">
+                            <h3 class="recipe-title">@(recipe.Title.Length > 30
+                                                        ? recipe.Title.Substring(0, 30) + "…"
+                                                        : recipe.Title)</h3>
+                            <div class="recipe-meta">
+                                <span class="rating">
+                                    <i class="fas fa-star"></i> @recipe.Rating
+                                </span>
+                                <span>
+                                    <i class="fas fa-user"></i>
+                                    @(recipe.User.UserName.Length > 23
+                                                                ? recipe.User.UserName.Substring(0, 23) + "…"
+                                                                : recipe.User.UserName)
+                                </span>
                             </div>
-                            <div class="macro-item">
-                                <div class="macro-value">@recipe.Protein</div>
-                                <div class="macro-label">Protein</div>
-                            </div>
-                            <div class="macro-item">
-                                <div class="macro-value">@recipe.Carbs</div>
-                                <div class="macro-label">Carbs</div>
-                            </div>
-                            <div class="macro-item">
-                                <div class="macro-value">@recipe.Fat</div>
-                                <div class="macro-label">Fats</div>
+                            <div class="recipe-macros">
+                                <div class="macro-item">
+                                    <div class="macro-value">@recipe.Calories</div>
+                                    <div class="macro-label">Cal</div>
+                                </div>
+                                <div class="macro-item">
+                                    <div class="macro-value">@recipe.Protein</div>
+                                    <div class="macro-label">Protein</div>
+                                </div>
+                                <div class="macro-item">
+                                    <div class="macro-value">@recipe.Carbs</div>
+                                    <div class="macro-label">Carbs</div>
+                                </div>
+                                <div class="macro-item">
+                                    <div class="macro-value">@recipe.Fat</div>
+                                    <div class="macro-label">Fats</div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            }
-        </div>
-    }
-    else
-    {
-        <div class="empty-state">
-            <div class="empty-icon">👨‍🍳</div>
-            <h3 class="empty-title">No Recipes Yet</h3>
-            <p class="empty-text">Start creating your first recipe and share your culinary masterpieces with the community!</p>
-            <a href="/Recipes/Create" class="create-recipe-btn">Create Your First Recipe</a>
-        </div>
-    }
-</div>
+                }
+            </div>
+        }
+        else
+        {
+            <div class="empty-state">
+                <div class="empty-icon">👨‍🍳</div>
+                <h3 class="empty-title">No Recipes Yet</h3>
+                <p class="empty-text">Start creating your first recipe and share your culinary masterpieces with the
+                    community!</p>
+                <a href="/Recipes/Create" class="create-recipe-btn">Create Your First Recipe</a>
+            </div>
+        }
+    </div>
     <div id="modalWindow"></div>
     <div id="modalWindowDelete"></div>
-<script>
-    function showRecipeDetails(recipeId,isOwner,recipeStatus) {
-    const clickedCard = event.currentTarget;
-    clickedCard.classList.add('loading');
-    const params = new URLSearchParams({
-    isOwner: isOwner,
-    recipeDetailsDisplayContorol: recipeStatus
-});
-    fetch(`/Recipes/Details/${recipeId}?${params}`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            return response.text();
-        })
-        .then(html => {
-            const modalContainer = document.getElementById('modalWindow');
-            modalContainer.innerHTML = html;
-            const scripts = modalContainer.querySelectorAll("script");
-                scripts.forEach(script => {
-                    const newScript = document.createElement("script");
-                    if (script.src) {
-                        newScript.src = script.src;
-                    } else {
-                        newScript.textContent = script.textContent;
-                    }
-                    document.body.appendChild(newScript);
-                    document.body.removeChild(newScript);
-                });
-            const modalElement = modalContainer.querySelector('.modal');
-            if (modalElement) {
-                const modal = new bootstrap.Modal(modalElement);
-                modal.show();
-                modalElement.addEventListener('hidden.bs.modal', function () {
-                    modalContainer.innerHTML = '';
-                    clickedCard.classList.remove('loading');
-                }); 
-                modalElement.addEventListener('shown.bs.modal', function () {
-                    clickedCard.classList.remove('loading');
-                });
-            } else {    
-                clickedCard.classList.remove('loading');
-            }
-        })
-        .catch(err => {
-            console.error("Failed to fetch recipe details", err);
-            alert("Failed to load recipe details. Please try again.");
-            clickedCard.classList.remove('loading');
-        });
-}
-function openDeleteModal(recipeId) {
-    const deleteButton = event.target.closest('button');
-    deleteButton.classList.add('loading');
-    const recipeModalContainer = document.getElementById('modalWindow');
-    const recipeModalElement = recipeModalContainer.querySelector('.modal');
-    const savedRecipeHtml = recipeModalContainer.innerHTML;
-    let recipeModalWasOpen = false;
-    if (recipeModalElement && recipeModalElement.classList.contains('show')) {
-        const recipeModalInstance = bootstrap.Modal.getInstance(recipeModalElement);
-        if (recipeModalInstance) {
-            recipeModalInstance.hide();
-            recipeModalWasOpen = true;
-        }
-    }
-    fetch(`/Recipes/Delete/${recipeId}`)
-        .then(response => response.text())
-        .then(html => {
-            const deleteModalContainer = document.getElementById('modalWindowDelete');
-            deleteModalContainer.innerHTML = html;
-            const deleteModalElement = deleteModalContainer.querySelector('.modal');
-            if (deleteModalElement) {
-                const deleteModal = new bootstrap.Modal(deleteModalElement);
-                deleteModal.show();
-                deleteModalElement.addEventListener('hidden.bs.modal', function () {
-                    deleteButton.classList.remove('loading');
-                    deleteModalContainer.innerHTML = '';
-                    if (recipeModalWasOpen && savedRecipeHtml.trim() !== '') {
-                        recipeModalContainer.innerHTML = savedRecipeHtml;
-                        const restoredModal = recipeModalContainer.querySelector('.modal');
-                        if (restoredModal) {
-                            const restoredInstance = new bootstrap.Modal(restoredModal);
-                            restoredInstance.show();
-                        }
-                    }
-                });
-                deleteModalElement.addEventListener('shown.bs.modal', function () {
-                    deleteButton.classList.remove('loading');
-                });
-            } else {
-                deleteButton.classList.remove('loading');
-            }
-        })
-        .catch(error => {
-            console.error('Error loading delete modal:', error);
-            deleteButton.classList.remove('loading');
-            location.href = `/Recipes/Delete/${recipeId}`;
-        });
-}
-</script>
+    <script src="~/js/MyRecipes.js"></script>
 </body>
Index: NutriMatch/Views/Recipes/_AddIngredientModal.cshtml
===================================================================
--- NutriMatch/Views/Recipes/_AddIngredientModal.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/_AddIngredientModal.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,3 +1,2 @@
-
 <div id="addIngredientModal" class="modal" style="display: none;">
     <div class="modal-content">
@@ -11,22 +10,32 @@
                 <div class="form-group">
                     <label for="newIngredientName" class="label">Ingredient Name</label>
-                    <input type="text" id="newIngredientName" name="Name" class="input" placeholder="Enter ingredient name..." required>
+                    <input type="text" id="newIngredientName" name="Name" class="input"
+                        placeholder="Enter ingredient name..." required>
                 </div>
+
                 <div class="form-group">
                     <label for="newIngredientCalories" class="label">Calories (per 100g)</label>
-                    <input type="number" id="newIngredientCalories" name="Calories" class="input" step="0.01" min="0" placeholder="0" required>
+                    <input type="number" id="newIngredientCalories" name="Calories" class="input" step="0.01" min="0"
+                        placeholder="0" required>
                 </div>
+
                 <div class="form-group">
                     <label for="newIngredientProtein" class="label">Protein (per 100g)</label>
-                    <input type="number" id="newIngredientProtein" name="Protein" class="input" step="0.01" min="0" placeholder="0" required>
+                    <input type="number" id="newIngredientProtein" name="Protein" class="input" step="0.01" min="0"
+                        placeholder="0" required>
                 </div>
+
                 <div class="form-group">
                     <label for="newIngredientCarbs" class="label">Carbohydrates (per 100g)</label>
-                    <input type="number" id="newIngredientCarbs" name="Carbs" class="input" step="0.01" min="0" placeholder="0" required>
+                    <input type="number" id="newIngredientCarbs" name="Carbs" class="input" step="0.01" min="0"
+                        placeholder="0" required>
                 </div>
+
                 <div class="form-group">
                     <label for="newIngredientFat" class="label">Fat (per 100g)</label>
-                    <input type="number" id="newIngredientFat" name="Fat" class="input" step="0.01" min="0" placeholder="0" required>
+                    <input type="number" id="newIngredientFat" name="Fat" class="input" step="0.01" min="0"
+                        placeholder="0" required>
                 </div>
+
                 <div class="form-actions">
                     <button type="button" id="cancelAddIngredient" class="btn btn-secondary">Cancel</button>
Index: NutriMatch/Views/Recipes/_RecipeDeclinePartial.cshtml
===================================================================
--- NutriMatch/Views/Recipes/_RecipeDeclinePartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/_RecipeDeclinePartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,429 +1,4 @@
 @model NutriMatch.Models.Recipe
-<style>
-.recipe-hero {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 30px;
-}
-.recipe-image-container {
-    position: relative;
-    flex: 1;
-    max-width: 300px;
-}
-.recipe-image-details {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-.recipe-info {
-    flex: 2;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-.chef-badge {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 10px;
-    font-size: 14px;
-    color: #6b7280;
-}
-.chef-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-.recipe-title-details {
-    font-size: 24px;
-    font-weight: 700;
-    color: #1f2937;
-    margin: 0 0 15px 0;
-    line-height: 1.3;
-}
-.nutrition-card {
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-    border-radius: 12px;
-    padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-.section-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #374151;
-    margin-bottom: 15px;
-}
-.nutrition-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-}
-.nutrition-item {
-    text-align: center;
-    padding: 12px 8px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-    transition: transform 0.2s ease;
-}
-.nutrition-item:hover {
-    transform: translateY(-2px);
-}
-.nutrition-icon {
-    margin-bottom: 5px;
-}
-.nutrition-value {
-    font-size: 18px;
-    font-weight: 700;
-    color: #1f2937;
-    margin-bottom: 2px;
-}
-.nutrition-label {
-    font-size: 12px;
-    color: #6b7280;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-.ingredients-list, .instructions-list {
-    background: white;
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-.ingredient-item {
-    padding: 10px 0;
-    border-bottom: 1px solid #f1f5f9;
-    font-size: 14px;
-    color: #374151;
-}
-.ingredient-item:last-child {
-    border-bottom: none;
-}
-.ingredient-bullet {
-    color: #10b981;
-    font-weight: bold;
-    font-size: 16px;
-}
-.instruction-item {
-    display: flex;
-    align-items: flex-start;
-    background-color: #f8f9fa;
-    padding: 15px;
-    margin: 10px 0;
-    border-radius: 10px;
-    border-left: 4px solid #ef4444;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-.instruction-number {
-    background-color: #ef4444;
-    color: white;
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    font-weight: bold;
-    margin-right: 15px;
-    flex-shrink: 0;
-    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
-}
-.instruction-text {
-    flex: 1;
-    line-height: 1.6;
-    color: #374151;
-    font-size: 14px;
-}
-.decline-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 12px;
-    backdrop-filter: blur(2px);
-}
-.decline-badge {
-    background: linear-gradient(135deg, #ef4444, #dc2626);
-    color: white;
-    padding: 10px 20px;
-    border-radius: 25px;
-    font-weight: bold;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-.decline-status {
-    margin: 15px 0;
-    padding: 15px;
-    background: linear-gradient(135deg, #fef2f2, #fee2e2);
-    border: 1px solid #fecaca;
-    border-radius: 10px;
-}
-.status-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 6px 0;
-    font-size: 14px;
-    color: #374151;
-}
-.status-item i {
-    width: 16px;
-    text-align: center;
-}
-.feedback-section {
-    margin: 25px 0;
-}
-.feedback-card {
-    background: white;
-    border: 1px solid #e2e8f0;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-.feedback-header {
-    background: linear-gradient(135deg, #1e293b, #334155);
-    color: white;
-    padding: 18px 24px;
-}
-.feedback-header h4 {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 17px;
-    font-weight: 600;
-}
-.feedback-content {
-    padding: 24px;
-}
-.admin-comment {
-    font-size: 15px;
-    line-height: 1.7;
-    color: #374151;
-    background: #fef9f9;
-    padding: 20px;
-    border-radius: 10px;
-    border-left: 4px solid #ef4444;
-    position: relative;
-}
-.admin-comment::before {
-    content: '"';
-    font-size: 40px;
-    color: #ef4444;
-    position: absolute;
-    top: 10px;
-    left: 15px;
-    opacity: 0.3;
-    font-family: serif;
-}
-.no-comment {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: #6b7280;
-    font-style: italic;
-    padding: 20px;
-    background: #f8fafc;
-    border-radius: 8px;
-    border: 2px dashed #d1d5db;
-}
-.recipe-actions {
-    padding-top: 20px;
-    border-top: 2px solid #e5e7eb;
-}
-.action-btn {
-    background: white;
-    border: 2px solid #e5e7eb;
-    border-radius: 10px;
-    padding: 14px 24px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    color: #374151;
-    font-weight: 600;
-    text-decoration: none;
-    font-size: 14px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-.edit-btn:hover {
-    border-color: #3b82f6;
-    background: linear-gradient(135deg, #3b82f6, #2563eb);
-    color: white;
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
-}
-.resubmit-btn:hover:not(.disabled) {
-    border-color: #10b981;
-    background: linear-gradient(135deg, #10b981, #059669);
-    color: white;
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
-}
-.resubmit-btn.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    border-color: #d1d5db;
-    color: #9ca3af;
-    background: #f9fafb;
-}
-.resubmit-btn.disabled:hover {
-    transform: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-.resubmit-hint {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    color: #6b7280;
-    margin-top: 12px;
-    font-style: italic;
-    padding: 10px 15px;
-    background: #fffbeb;
-    border-radius: 8px;
-    border-left: 3px solid #f59e0b;
-}
-.decline-toast {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    background: linear-gradient(135deg, #10b981, #059669);
-    color: white;
-    padding: 16px 24px;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 500;
-    z-index: 9999;
-    transform: translateX(100%);
-    transition: transform 0.3s ease;
-    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
-    max-width: 350px;
-}
-.decline-toast.show {
-    transform: translateX(0);
-}
-.decline-toast.error {
-    background: linear-gradient(135deg, #ef4444, #dc2626);
-    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
-}
-.fa-spinner {
-    animation: spin 1s linear infinite;
-}
-@@keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-.modal-content {
-    border: none;
-    border-radius: 15px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
-}
-.modal-header {
-    background: linear-gradient(135deg, #fee2e2, #fecaca);
-    border-radius: 15px 15px 0 0;
-    padding: 20px 30px;
-}
-.modal-title {
-    font-weight: 700;
-    font-size: 20px;
-}
-.modal-body {
-    padding: 30px;
-    max-height: 80vh;
-    overflow-y: auto;
-}
-.modal-body::-webkit-scrollbar {
-    width: 6px;
-}
-.modal-body::-webkit-scrollbar-track {
-    background: #f1f5f9;
-    border-radius: 3px;
-}
-.modal-body::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 3px;
-}
-.modal-body::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8;
-}
-@@media (max-width: 768px) {
-    .recipe-hero {
-        flex-direction: column;
-        gap: 15px;
-    }
-    .recipe-image-container {
-        max-width: 100%;
-    }
-    .recipe-actions .d-flex {
-        flex-direction: column;
-        gap: 15px !important;
-    }
-    .action-btn {
-        justify-content: center;
-        width: 100%;
-        padding: 16px 20px;
-    }
-    .nutrition-grid {
-        grid-template-columns: 1fr;
-        gap: 10px;
-    }
-    .modal-body {
-        padding: 20px;
-    }
-    .feedback-content {
-        padding: 20px;
-    }
-    .admin-comment {
-        padding: 16px;
-    }
-    .decline-toast {
-        right: 10px;
-        left: 10px;
-        max-width: none;
-        transform: translateY(-100%);
-    }
-    .decline-toast.show {
-        transform: translateY(0);
-    }
-}
-@@media (max-width: 576px) {
-    .recipe-title-details {
-        font-size: 20px;
-    }
-    .modal-dialog {
-        margin: 10px;
-    }
-    .instruction-item {
-        padding: 12px;
-    }
-    .instruction-number {
-        width: 24px;
-        height: 24px;
-        font-size: 12px;
-        margin-right: 12px;
-    }
-}
-</style>
+<link href="~/css/_RecipeDeclinePartial.css" rel="stylesheet" />
 @{
     bool canResubmit = ViewBag.CanResubmit ?? false;
@@ -431,5 +6,6 @@
     DateTime? declineDate = ViewBag.DeclineDate;
 }
-<div class="modal fade" id="recipeDeclineModal" tabindex="-1" aria-labelledby="recipeDeclineModalLabel" aria-hidden="true">
+<div class="modal fade" id="recipeDeclineModal" tabindex="-1" aria-labelledby="recipeDeclineModalLabel"
+    aria-hidden="true">
     @Html.AntiForgeryToken()
     <div class="modal-dialog modal-xl">
@@ -476,7 +52,6 @@
                         <div class="recipe-actions">
                             <div class="d-flex gap-3 align-items-center">
-                                <button onclick="location.href='/Recipes/Edit/@Model.Id?requiresChange=true'" 
-                                        class="action-btn edit-btn" 
-                                        title="Edit Recipe">
+                                <button onclick="location.href='/Recipes/Edit/@Model.Id?requiresChange=true'"
+                                    class="action-btn edit-btn" title="Edit Recipe">
                                     <i class="fas fa-edit"></i>
                                     <span>Edit and Resubmit Recipe</span>
@@ -512,5 +87,6 @@
                                 <div class="no-comment">
                                     <i class="fas fa-info-circle"></i>
-                                    No specific feedback was provided. Please review your recipe for compliance with our guidelines.
+                                    No specific feedback was provided. Please review your recipe for compliance with our
+                                    guidelines.
                                 </div>
                             }
@@ -569,5 +145,6 @@
                                     <div class="ingredient-item">
                                         <span class="ingredient-bullet">•</span>
-                                        <span>@Model.RecipeIngredients[i].Ingredient.Name, @Model.RecipeIngredients[i].Quantity @Model.RecipeIngredients[i].Unit</span>
+                                        <span>@Model.RecipeIngredients[i].Ingredient.Name, @Model.RecipeIngredients[i].Quantity
+                                            @Model.RecipeIngredients[i].Unit</span>
                                     </div>
                                 }
@@ -580,7 +157,9 @@
                             </h4>
                             @{
-                                var instructions = System.Text.Json.JsonSerializer.Deserialize<List<string>>(Model.Instructions[0]);
-                            }
-                            @for(var i = 0; i < instructions.Count; i++){
+                                var instructions =
+                                System.Text.Json.JsonSerializer.Deserialize<List<string>>(Model.Instructions[0]);
+                            }
+                            @for (var i = 0; i < instructions.Count; i++)
+                            {
                                 <div class="instruction-item">
                                     <span class="instruction-number">@(i + 1)</span>
@@ -595,286 +174,92 @@
     </div>
 </div>
-<style>
-.decline-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 12px;
-}
-.decline-badge {
-    background: #ef4444;
-    color: white;
-    padding: 8px 16px;
-    border-radius: 20px;
-    font-weight: bold;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-.decline-status {
-    margin: 15px 0;
-    padding: 12px;
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    border-radius: 8px;
-}
-.status-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 4px 0;
-    font-size: 14px;
-    color: #374151;
-}
-.feedback-section {
-    margin: 20px 0;
-}
-.feedback-card {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 12px;
-    overflow: hidden;
-}
-.feedback-header {
-    background: #1e293b;
-    color: white;
-    padding: 15px 20px;
-}
-.feedback-header h4 {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 16px;
-}
-.feedback-content {
-    padding: 20px;
-}
-.admin-comment {
-    font-size: 15px;
-    line-height: 1.6;
-    color: #374151;
-    background: white;
-    padding: 16px;
-    border-radius: 8px;
-    border-left: 4px solid #ef4444;
-}
-.no-comment {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: #6b7280;
-    font-style: italic;
-}
-.recipe-actions {
-    padding-top: 15px;
-    border-top: 1px solid #e5e7eb;
-}
-.action-btn {
-    background: none;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 12px 20px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    color: #374151;
-    font-weight: 500;
-    text-decoration: none;
-}
-.edit-btn:hover {
-    border-color: #3b82f6;
-    background-color: #3b82f6;
-    color: white;
-    transform: translateY(-2px);
-}
-.resubmit-btn:hover:not(.disabled) {
-    border-color: #10b981;
-    background-color: #10b981;
-    color: white;
-    transform: translateY(-2px);
-}
-.resubmit-btn.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border-color: #d1d5db;
-    color: #9ca3af;
-}
-.resubmit-hint {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    color: #6b7280;
-    margin-top: 8px;
-    font-style: italic;
-}
-.ingredient-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 8px 0;
-    border-bottom: 1px solid #f3f4f6;
-}
-.ingredient-bullet {
-    color: #10b981;
-    font-weight: bold;
-    margin-top: 2px;
-}
-.instruction-item {
-    display: flex;
-    align-items: flex-start;
-    background-color: #f8f9fa;
-    padding: 12px;
-    margin: 8px 0;
-    border-radius: 8px;
-    border-left: 4px solid #ef4444;
-}
-.instruction-number {
-    background-color: #ef4444;
-    color: white;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    font-weight: bold;
-    margin-right: 12px;
-    flex-shrink: 0;
-}
-.instruction-text {
-    flex: 1;
-    line-height: 1.5;
-}
-.decline-toast {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    background: #10b981;
-    color: white;
-    padding: 12px 20px;
-    border-radius: 8px;
-    font-size: 14px;
-    z-index: 9999;
-    transform: translateX(100%);
-    transition: transform 0.3s ease;
-}
-.decline-toast.show {
-    transform: translateX(0);
-}
-.decline-toast.error {
-    background: #ef4444;
-}
-@@media (max-width: 768px) {
-    .recipe-actions .d-flex {
-        flex-direction: column;
-        gap: 12px !important;
+<script>
+    document.getElementById('recipeDeclineModal').addEventListener('shown.bs.modal', function () {
+        this.querySelector('.modal-body').scrollTop = 0;
+    });
+    let isResubmitInProgress = false;
+    function resubmitRecipe(recipeId) {
+        if (isResubmitInProgress) return;
+        const resubmitBtn = document.querySelector('.resubmit-btn');
+        if (resubmitBtn.classList.contains('disabled')) {
+            showDeclineToast('Please edit your recipe first before resubmitting', 'error');
+            return;
+        }
+        if (!confirm('Are you sure you want to resubmit this recipe for review?')) {
+            return;
+        }
+        isResubmitInProgress = true;
+        resubmitBtn.classList.add('disabled');
+        const originalText = resubmitBtn.innerHTML;
+        resubmitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Submitting...</span>';
+        fetch('/Recipes/Resubmit', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
+            },
+            body: JSON.stringify({
+                recipeId: recipeId
+            })
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    showDeclineToast('Recipe resubmitted successfully! It will be reviewed again.', 'success');
+                    setTimeout(() => {
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('recipeDeclineModal'));
+                        if (modal) modal.hide();
+                        if (data.redirectUrl) {
+                            window.location.href = data.redirectUrl;
+                        } else {
+                            setTimeout(() => window.location.reload(), 1000);
+                        }
+                    }, 1500);
+                } else {
+                    showDeclineToast(data.message || 'Failed to resubmit recipe', 'error');
+                    resubmitBtn.classList.remove('disabled');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showDeclineToast('An error occurred while resubmitting the recipe', 'error');
+                resubmitBtn.classList.remove('disabled');
+            })
+            .finally(() => {
+                isResubmitInProgress = false;
+                resubmitBtn.innerHTML = originalText;
+            });
     }
-    .action-btn {
-        justify-content: center;
-        width: 100%;
+    function showDeclineToast(message, type = 'success') {
+        const existingToast = document.querySelector('.decline-toast');
+        if (existingToast) {
+            existingToast.remove();
+        }
+        const toast = document.createElement('div');
+        toast.className = `decline-toast ${type}`;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.classList.add('show'), 100);
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => toast.remove(), 300);
+        }, 4000);
     }
-}
-</style>
-<script>
-document.getElementById('recipeDeclineModal').addEventListener('shown.bs.modal', function () {
-    this.querySelector('.modal-body').scrollTop = 0;
-});
-let isResubmitInProgress = false;
-function resubmitRecipe(recipeId) {
-    if (isResubmitInProgress) return;
-    const resubmitBtn = document.querySelector('.resubmit-btn');
-    if (resubmitBtn.classList.contains('disabled')) {
-        showDeclineToast('Please edit your recipe first before resubmitting', 'error');
-        return;
-    }
-    if (!confirm('Are you sure you want to resubmit this recipe for review?')) {
-        return;
-    }
-    isResubmitInProgress = true;
-    resubmitBtn.classList.add('disabled');
-    const originalText = resubmitBtn.innerHTML;
-    resubmitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Submitting...</span>';
-    fetch('/Recipes/Resubmit', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
-        },
-        body: JSON.stringify({
-            recipeId: recipeId
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            showDeclineToast('Recipe resubmitted successfully! It will be reviewed again.', 'success');
-            setTimeout(() => {
-                const modal = bootstrap.Modal.getInstance(document.getElementById('recipeDeclineModal'));
-                if (modal) modal.hide();
-                if (data.redirectUrl) {
-                    window.location.href = data.redirectUrl;
-                } else {
-                    setTimeout(() => window.location.reload(), 1000);
+    document.addEventListener('DOMContentLoaded', function () {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get('edited') === 'true') {
+            const resubmitBtn = document.querySelector('.resubmit-btn');
+            if (resubmitBtn) {
+                resubmitBtn.classList.remove('disabled');
+                resubmitBtn.removeAttribute('disabled');
+                resubmitBtn.title = 'Resubmit for Review';
+                const hint = document.querySelector('.resubmit-hint');
+                if (hint) {
+                    hint.style.display = 'none';
                 }
-            }, 1500);
-        } else {
-            showDeclineToast(data.message || 'Failed to resubmit recipe', 'error');
-            resubmitBtn.classList.remove('disabled');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        showDeclineToast('An error occurred while resubmitting the recipe', 'error');
-        resubmitBtn.classList.remove('disabled');
-    })
-    .finally(() => {
-        isResubmitInProgress = false;
-        resubmitBtn.innerHTML = originalText;
+                showDeclineToast('Recipe updated! You can now resubmit it for review.', 'success');
+            }
+        }
     });
-}
-function showDeclineToast(message, type = 'success') {
-    const existingToast = document.querySelector('.decline-toast');
-    if (existingToast) {
-        existingToast.remove();
-    }
-    const toast = document.createElement('div');
-    toast.className = `decline-toast ${type}`;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-    setTimeout(() => toast.classList.add('show'), 100);
-    setTimeout(() => {
-        toast.classList.remove('show');
-        setTimeout(() => toast.remove(), 300);
-    }, 4000);
-}
-document.addEventListener('DOMContentLoaded', function() {
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.get('edited') === 'true') {
-        const resubmitBtn = document.querySelector('.resubmit-btn');
-        if (resubmitBtn) {
-            resubmitBtn.classList.remove('disabled');
-            resubmitBtn.removeAttribute('disabled');
-            resubmitBtn.title = 'Resubmit for Review';
-            const hint = document.querySelector('.resubmit-hint');
-            if (hint) {
-                hint.style.display = 'none';
-            }
-            showDeclineToast('Recipe updated! You can now resubmit it for review.', 'success');
-        }
-    }
-});
-document.addEventListener
+    document.addEventListener
 </script>
Index: NutriMatch/Views/Recipes/_RecipeDeletePartial.cshtml
===================================================================
--- NutriMatch/Views/Recipes/_RecipeDeletePartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/_RecipeDeletePartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,5 +1,8 @@
 @model NutriMatch.Models.Recipe
+
 <link href="~/css/_RecipeDeletePartial.css" rel="stylesheet" />
-<div class="modal fade delete-modal" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
+
+<div class="modal fade delete-modal" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
+    aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -15,4 +18,5 @@
                     <p>This action cannot be undone. The recipe will be permanently removed from your collection.</p>
                 </div>
+
                 <div class="recipe-preview-card">
                     <div class="recipe-preview-header">
@@ -27,4 +31,5 @@
                         </div>
                     </div>
+
                     <div class="recipe-details-grid">
                         <div class="detail-item">
@@ -54,4 +59,5 @@
                     </div>
                 </div>
+
                 <div class="delete-actions">
                     <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">
@@ -69,9 +75,10 @@
     </div>
 </div>
+
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
         if (confirmDeleteBtn) {
-            confirmDeleteBtn.addEventListener('click', function() {
+            confirmDeleteBtn.addEventListener('click', function () {
                 this.classList.add('loading');
                 this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Deleting...';
@@ -79,7 +86,8 @@
             });
         }
+
         const deleteModal = document.getElementById('deleteConfirmModal');
         if (deleteModal) {
-            deleteModal.addEventListener('hidden.bs.modal', function() {
+            deleteModal.addEventListener('hidden.bs.modal', function () {
                 const confirmBtn = document.getElementById('confirmDeleteBtn');
                 if (confirmBtn) {
Index: NutriMatch/Views/Recipes/_RecipeDetailsPartial.cshtml
===================================================================
--- NutriMatch/Views/Recipes/_RecipeDetailsPartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Recipes/_RecipeDetailsPartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -52,5 +52,6 @@
                                         </div>
                                         <span class="rating-value">(@averageRating.ToString("0.0"))</span>
-                                        <span class="rating-count">@totalRatings review@(totalRatings != 1 ? "s" : "")</span>
+                                        <span class="rating-count">@totalRatings review@(totalRatings != 1 ? "s" :
+                                                                                        "")</span>
                                     </div>
                                 </div>
@@ -58,53 +59,63 @@
                         </div>
                         <div class="recipe-actions">
-                            @if(AddAdminButtons){
-                                    <div class="admin-actions">
-                                        <button onclick="approveRecipe(@Model.Id)" class="admin-btn approve-btn subtle" title="Approve Recipe">
-                                            <i></i>
-                                            <span>Approve</span>
+                            @if (AddAdminButtons)
+                            {
+                                <div class="admin-actions">
+                                    <button onclick="approveRecipe(@Model.Id)" class="admin-btn approve-btn subtle"
+                                        title="Approve Recipe">
+                                        <i></i>
+                                        <span>Approve</span>
+                                    </button>
+                                    <button onclick="declineRecipe(@Model.Id)" class="admin-btn decline-btn subtle"
+                                        title="Decline Recipe">
+                                        <i></i>
+                                        <span>Decline</span>
+                                    </button>
+                                </div>
+                            }
+                            else
+                            {
+                                @if (isOwner)
+                                {
+                                    if (!InIndex)
+                                    {
+                                        <div class="d-flex gap-2">
+                                            <button onclick="location.href='/Recipes/Edit/@Model.Id'" class="action-btn edit-btn"
+                                                title="Edit Recipe">
+                                                <i class="fas fa-edit"></i>
+                                            </button>
+                                            <button onclick="openDeleteModal('@Model.Id')" class="action-btn delete-btn"
+                                                title="Delete Recipe">
+                                                <i class="fas fa-trash"></i>
+                                            </button>
+                                        </div>
+                                    }
+                                }
+                                else
+                                {
+                                    <div class="rate-recipe">
+                                        <span class="rate-label">@(hasUserRated ? "Your rating:" : "Rate this recipe:")</span>
+                                        <div class="rating-input" id="userRatingStars">
+                                            @for (int i = 1; i <= 5; i++)
+                                            {
+                                                <i class="@(i <= userRating ? "fas" : "far") fa-star rating-star" data-rating="@i"
+                                                    onclick="rateRecipe(@i, @Model.Id)"></i>
+                                            }
+                                        </div>
+                                        @if (hasUserRated)
+                                        {
+                                            <button class="remove-rating-btn" onclick="removeRating(@Model.Id)"
+                                                title="Remove your rating">
+                                                <i class="fas fa-times"></i> Remove
+                                            </button>
+                                        }
+                                    </div>
+                                    <div>
+                                        <button class="action-btn favorite-btn-details @(isFavorited ? "favorited" : "")"
+                                            onclick="toggleFavorite(@Model.Id)"
+                                            title="@(isFavorited ? "Remove from Favorites" : "Add to Favorites")">
+                                            <i class="far fa-heart"></i>
                                         </button>
-                                        <button onclick="declineRecipe(@Model.Id)" class="admin-btn decline-btn subtle" title="Decline Recipe">
-                                            <i></i>
-                                            <span>Decline</span>
-                                        </button>
-                                    </div>
-                            }
-                            else{
-                                @if(isOwner){
-                                    if(!InIndex){
-                                    <div class="d-flex gap-2">
-                                        <button onclick="location.href='/Recipes/Edit/@Model.Id'" class="action-btn edit-btn" title="Edit Recipe">
-                                            <i class="fas fa-edit"></i>
-                                        </button>
-                                        <button onclick="openDeleteModal('@Model.Id')" class="action-btn delete-btn" title="Delete Recipe">
-                                            <i class="fas fa-trash"></i>
-                                        </button>
-                                    </div>
-                                    }
-                                } else {
-                                            <div class="rate-recipe">
-                                                <span class="rate-label">@(hasUserRated ? "Your rating:" : "Rate this recipe:")</span>
-                                                <div class="rating-input" id="userRatingStars">
-                                                    @for (int i = 1; i <= 5; i++)
-                                                    {
-                                                        <i class="@(i <= userRating ? "fas" : "far") fa-star rating-star" 
-                                                        data-rating="@i" 
-                                                        onclick="rateRecipe(@i, @Model.Id)"></i>
-                                                    }
-                                                </div>
-                                                @if (hasUserRated)
-                                                {
-                                                    <button class="remove-rating-btn" onclick="removeRating(@Model.Id)" title="Remove your rating">
-                                                        <i class="fas fa-times"></i> Remove
-                                                    </button>
-                                                }
-                                            </div>
-                                            <div> 
-                                                    <button class="action-btn favorite-btn-details @(isFavorited ? "favorited" : "")" 
-                                                            onclick="toggleFavorite(@Model.Id)" 
-                                                            title="@(isFavorited ? "Remove from Favorites" : "Add to Favorites")">
-                                                    <i class="far fa-heart"></i>
-                                                    </button>
-                                            </div>
+                                    </div>
                                 }
                             }
@@ -152,5 +163,5 @@
                     </div>
                     <div class="col-md-8">
-                       <div class="ingredients-list">
+                        <div class="ingredients-list">
                             <h4 class="section-title">
                                 <i class="fas fa-list-ul"></i>
@@ -161,12 +172,15 @@
                                 @for (int i = 0; i < Model.RecipeIngredients.Count; i++)
                                 {
-                                    <div class="ingredient-item" style="display: flex; align-items: center; justify-content: space-between;">
+                                    <div class="ingredient-item"
+                                        style="display: flex; align-items: center; justify-content: space-between;">
                                         <div style="display: flex; align-items: center; flex: 1;">
-                                            <input type="checkbox" class="ingredient-checkbox" id="ingredient@(i + 1)"> 
+                                            <input type="checkbox" class="ingredient-checkbox" id="ingredient@(i + 1)">
                                             <label for="ingredient@(i + 1)" style="margin-left: 8px;">
-                                                @Model.RecipeIngredients[i].Ingredient.Name, @Model.RecipeIngredients[i].Quantity @Model.RecipeIngredients[i].Unit
+                                                @Model.RecipeIngredients[i].Ingredient.Name,
+                                                @Model.RecipeIngredients[i].Quantity @Model.RecipeIngredients[i].Unit
                                                 @if (Model.RecipeIngredients[i].Ingredient.Status == "Pending")
                                                 {
-                                                    <span class="pending-badge" style="background-color: #ffc107; color: #212529; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 8px;">
+                                                    <span class="pending-badge"
+                                                        style="background-color: #ffc107; color: #212529; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 8px;">
                                                         <i class="fas fa-clock"></i> Pending Review
                                                     </span>
@@ -176,6 +190,7 @@
                                         @if (Model.RecipeIngredients[i].Ingredient.Status == "Pending")
                                         {
-                                            <button onclick="viewIngredientReview(@Model.RecipeIngredients[i].Ingredient.Id)" type="button" class="btn btn-sm btn-outline-primary view-ingredient-btn" 
-                                                    style="margin-left: 10px;">
+                                            <button onclick="viewIngredientReview(@Model.RecipeIngredients[i].Ingredient.Id)"
+                                                type="button" class="btn btn-sm btn-outline-success view-ingredient-btn"
+                                                style="margin-left: 10px;" id="view-ingr-btn">
                                                 <i class="fas fa-eye"></i> View
                                             </button>
@@ -191,13 +206,19 @@
                             </h4>
                             @{
-                                var instructions = System.Text.Json.JsonSerializer.Deserialize<List<string>>(Model.Instructions[0]);
+                                var instructions =
+                                System.Text.Json.JsonSerializer.Deserialize<List<string>>(Model.Instructions[0]);
                             }
-                            @for(var i = 0; i < instructions.Count; i++){
-                                <div class="instruction-item" style="display: flex; flex-wrap: wrap; align-items: flex-start; background-color: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #10b981;">
-                                    <span class="instruction-number" style="background-color: #10b981; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">@(i + 1)</span>
-                                    <span class="instruction-text" style="flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;">
+                            @for (var i = 0; i < instructions.Count; i++)
+                            {
+                                <div class="instruction-item"
+                                    style="display: flex; flex-wrap: wrap; align-items: flex-start; background-color: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #10b981;">
+                                    <span class="instruction-number"
+                                        style="background-color: #10b981; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">@(i
+                                                                            + 1)</span>
+                                <span class="instruction-text"
+                                    style="flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;">
                                     @instructions[i]</span>
-                                </div>
-                            }
+                            </div>
+                                                        }
                         </div>
                     </div>
@@ -207,602 +228,253 @@
     </div>
 </div>
-<style>
-.recipe-rating-section {
-    margin: 15px 0;
-}
-.current-rating {
-    margin-bottom: 10px;
-}
-.rating-display {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 5px;
-}
-.rating-stars {
-    display: flex;
-    gap: 2px;
-}
-.rating-stars i {
-    font-size: 18px;
-    color: #ddd;
-    transition: color 0.2s ease;
-}
-.rating-stars i.filled {
-    color: #fbbf24;
-}
-.rating-value {
-    font-size: 14px;
-    font-weight: 600;
-    color: #374151;
-}
-.rating-count {
-    font-size: 12px;
-    color: #6b7280;
-}
-.recipe-actions {
-    padding-top: 10px;
-    border-top: 1px solid #e5e7eb;
-    display: flex;
-    justify-content: space-between;
-}
-.rate-recipe {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-.rate-label {
-    font-size: 14px;
-    font-weight: 500;
-    color: #374151;
-}
-.rating-input {
-    display: flex;
-    gap: 3px;
-}
-.rating-star {
-    font-size: 20px;
-    color: #ddd;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-.rating-star:hover {
-    color: #fbbf24;
-    transform: scale(1.1);
-}
-.rating-star.active {
-    color: #fbbf24;
-}
-.remove-rating-btn {
-    background: none;
-    border: none;
-    color: #ef4444;
-    font-size: 12px;
-    cursor: pointer;
-    padding: 5px 0;
-    transition: color 0.2s ease;
-}
-.remove-rating-btn:hover {
-    color: #dc2626;
-    text-decoration: underline;
-}
-.favorite-btn-details {
-    background: none;
-    border: 2px solid #e5e7eb;
-    border-radius: 50%;
-    width: 45px;
-    height: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    color: #6b7280;
-}
-.favorite-btn-details:hover {
-    border-color: #ef4444;
-    color: #ef4444;
-    transform: scale(1.05);
-}
-.favorite-btn-details.favorited {
-    background-color: #ef4444;
-    border-color: #ef4444;
-    color: white;
-}
-.favorite-btn-details.favorited:hover {
-    background-color: #dc2626;
-    border-color: #dc2626;
-}
-.favorite-btn-details i {
-    font-size: 18px;
-    transition: transform 0.2s ease;
-}
-.favorite-btn-details:hover i {
-    transform: scale(1.1);
-}
-.rating-toast {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    background: #10b981;
-    color: white;
-    padding: 12px 20px;
-    border-radius: 8px;
-    font-size: 14px;
-    z-index: 9999;
-    transform: translateX(100%);
-    transition: transform 0.3s ease;
-}
-.rating-toast.show {
-    transform: translateX(0);
-}
-.rating-toast.error {
-    background: #ef4444;
-}
-@@media (max-width: 768px) {
-    .rating-display {
-        flex-wrap: wrap;
-        gap: 5px;
-    }
-    .rate-recipe {
-        align-items: flex-start;
-    }
-}
-.admin-actions {
-    display: flex;
-    gap: 12px;
-    flex-direction: column;
-}
-.admin-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 120px;
-}
-.approve-btn {
-    background: linear-gradient(135deg, #10b981, #059669);
-    color: white;
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
-}
-.approve-btn:hover {
-    background: linear-gradient(135deg, #059669, #047857);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
-}
-.approve-btn:active {
-    transform: translateY(0);
-}
-.decline-btn {
-    background: linear-gradient(135deg, #ef4444, #dc2626);
-    color: white;
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-.decline-btn:hover {
-    background: linear-gradient(135deg, #dc2626, #b91c1c);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
-}
-.decline-btn:active {
-    transform: translateY(0);
-}
-.admin-btn i {
-    font-size: 16px;
-}
-.admin-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none !important;
-}
-.admin-btn.loading {
-    position: relative;
-    color: transparent;
-}
-.admin-btn.loading::after {
-    content: '';
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    border: 2px solid transparent;
-    border-top: 2px solid currentColor;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-}
-@@keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
-}
-@@media (min-width: 768px) {
-    .admin-actions {
-        flex-direction: row;
-    }
-}
-.admin-actions {
-    display: flex;
-    gap: 12px;
-    margin-top: 16px;
-    justify-content: flex-start;
-    align-items: center;
-}
-.admin-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 18px;
-    border: none;
-    border-radius: 25px;
-    font-family: inherit;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-decoration: none;
-    outline: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-.admin-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-.admin-btn:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-.admin-btn i {
-    font-size: 14px;
-    line-height: 1;
-}
-.admin-btn span {
-    line-height: 1;
-}
-.approve-btn {
-    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-    color: white;
-}
-.approve-btn:hover {
-    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
-}
-.approve-btn:focus {
-    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
-}
-.decline-btn {
-    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
-    color: white;
-}
-.decline-btn:hover {
-    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
-}
-.decline-btn:focus {
-    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);
-}
-.admin-btn.subtle {
-    background: #f8f9fa;
-    color: #6c757d;
-    border: 1px solid #e9ecef;
-}
-.admin-btn.subtle:hover {
-    background: #e9ecef;
-    color: #495057;
-    border-color: #dee2e6;
-}
-.approve-btn.subtle {
-    color: #28a745;
-    border-color: #28a745;
-}
-.approve-btn.subtle:hover {
-    background: #28a745;
-    color: white;
-}
-.decline-btn.subtle {
-    color: #dc3545;
-    border-color: #dc3545;
-}
-.decline-btn.subtle:hover {
-    background: #dc3545;
-    color: white;
-}
-@@media (max-width: 768px) {
-    .admin-actions {
-        flex-direction: column;
-        gap: 8px;
-        width: 100%;
-    }
-    .admin-btn {
-        width: 100%;
-        justify-content: center;
-        padding: 12px 18px;
-    }
-}
-.admin-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-}
-.admin-btn.loading {
-    position: relative;
-    color: transparent;
-}
-.admin-btn.loading::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -8px;
-    margin-left: -8px;
-    width: 16px;
-    height: 16px;
-    border: 2px solid #ffffff;
-    border-radius: 50%;
-    border-top-color: transparent;
-    animation: spin 1s linear infinite;
-}
-@@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-</style>
 <script>
-document.querySelectorAll('.ingredient-checkbox').forEach(checkbox => {
-    checkbox.addEventListener('change', function() {
-        const label = this.nextElementSibling;
-        if (this.checked) {
-            label.style.textDecoration = 'line-through';
-            label.style.opacity = '0.6';
+    document.querySelectorAll('.ingredient-checkbox').forEach(checkbox => {
+        checkbox.addEventListener('change', function () {
+            const label = this.nextElementSibling;
+            if (this.checked) {
+                label.style.textDecoration = 'line-through';
+                label.style.opacity = '0.6';
+            } else {
+                label.style.textDecoration = 'none';
+                label.style.opacity = '1';
+            }
+        });
+    });
+    document.getElementById('recipeModal').addEventListener('shown.bs.modal', function () {
+        this.querySelector('.modal-body').scrollTop = 0;
+    });
+    let isRatingInProgress = false;
+    function rateRecipe(rating, recipeId) {
+        if (isRatingInProgress) return;
+        console.log(rating)
+        isRatingInProgress = true;
+        updateUserRatingDisplay(rating);
+        fetch('/Recipes/Rate', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
+            },
+            body: JSON.stringify({
+                recipeId: recipeId,
+                rating: rating
+            })
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    updateAverageRatingDisplay(data.averageRating, data.totalRatings);
+                    showRemoveRatingButton();
+                    document.querySelector('.rate-label').textContent = 'Your rating:';
+                    showToast('Rating submitted successfully!', 'success');
+                } else {
+                    showToast(data.message || 'Failed to submit rating', 'error');
+                    revertUserRatingDisplay();
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showToast('An error occurred while submitting your rating', 'error');
+                revertUserRatingDisplay();
+            })
+            .finally(() => {
+                isRatingInProgress = false;
+            });
+    }
+    function removeRating(recipeId) {
+        if (isRatingInProgress) return;
+        isRatingInProgress = true;
+        fetch('/Recipes/RemoveRating', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
+            },
+            body: JSON.stringify({
+                recipeId: recipeId
+            })
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    updateAverageRatingDisplay(data.averageRating, data.totalRatings);
+                    clearUserRatingDisplay();
+                    hideRemoveRatingButton();
+                    document.querySelector('.rate-label').textContent = 'Rate this recipe:';
+                    showToast('Rating removed successfully!', 'success');
+                } else {
+                    showToast(data.message || 'Failed to remove rating', 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showToast('An error occurred while removing your rating', 'error');
+            })
+            .finally(() => {
+                isRatingInProgress = false;
+            });
+    }
+    let isFavoriteInProgress = false;
+    function toggleFavorite(recipeId) {
+        if (isFavoriteInProgress) return;
+        isFavoriteInProgress = true;
+        const favoriteBtn = document.querySelector('.favorite-btn-details');
+        const wasFavorited = favoriteBtn.classList.contains('favorited');
+        if (wasFavorited) {
+            favoriteBtn.classList.remove('favorited');
+            favoriteBtn.title = 'Add to Favorites';
         } else {
-            label.style.textDecoration = 'none';
-            label.style.opacity = '1';
-        }
-    });
-});
-document.getElementById('recipeModal').addEventListener('shown.bs.modal', function () {
-    this.querySelector('.modal-body').scrollTop = 0;
-});
-let isRatingInProgress = false;
-function rateRecipe(rating, recipeId) {
-    if (isRatingInProgress) return;
-    console.log(rating)
-    isRatingInProgress = true;
-    updateUserRatingDisplay(rating);
-    fetch('/Recipes/Rate', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
-        },
-        body: JSON.stringify({
-            recipeId: recipeId,
-            rating: rating
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            updateAverageRatingDisplay(data.averageRating, data.totalRatings);
-            showRemoveRatingButton();
-            document.querySelector('.rate-label').textContent = 'Your rating:';
-            showToast('Rating submitted successfully!', 'success');
-        } else {
-            showToast(data.message || 'Failed to submit rating', 'error');
-            revertUserRatingDisplay();
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        showToast('An error occurred while submitting your rating', 'error');
-        revertUserRatingDisplay();
-    })
-    .finally(() => {
-        isRatingInProgress = false;
-    });
-}
-function removeRating(recipeId) {
-    if (isRatingInProgress) return;
-    isRatingInProgress = true;
-    fetch('/Recipes/RemoveRating', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
-        },
-        body: JSON.stringify({
-            recipeId: recipeId
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            updateAverageRatingDisplay(data.averageRating, data.totalRatings);
-            clearUserRatingDisplay();
-            hideRemoveRatingButton();
-            document.querySelector('.rate-label').textContent = 'Rate this recipe:';
-            showToast('Rating removed successfully!', 'success');
-        } else {
-            showToast(data.message || 'Failed to remove rating', 'error');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        showToast('An error occurred while removing your rating', 'error');
-    })
-    .finally(() => {
-        isRatingInProgress = false;
-    });
-}
-let isFavoriteInProgress = false;
-function toggleFavorite(recipeId) {
-    if (isFavoriteInProgress) return;
-    isFavoriteInProgress = true;
-    const favoriteBtn = document.querySelector('.favorite-btn-details');
-    const wasFavorited = favoriteBtn.classList.contains('favorited');
-    if (wasFavorited) {
-        favoriteBtn.classList.remove('favorited');
-        favoriteBtn.title = 'Add to Favorites';
-    } else {
-        favoriteBtn.classList.add('favorited');
-        favoriteBtn.title = 'Remove from Favorites';
-    }
-    fetch('/Recipes/ToggleFavorite', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
-        },
-        body: JSON.stringify({
-            recipeId: recipeId
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            if (data.isFavorited) {
-                favoriteBtn.classList.add('favorited');
-                favoriteBtn.title = 'Remove from Favorites';
-                showToast('Added to favorites!', 'success');
-            } else {
-                favoriteBtn.classList.remove('favorited');
-                favoriteBtn.title = 'Add to Favorites';
-                showToast('Removed from favorites!', 'success');
-            }
-        } else {
-            if (wasFavorited) {
-                favoriteBtn.classList.add('favorited');
-                favoriteBtn.title = 'Remove from Favorites';
-            } else {
-                favoriteBtn.classList.remove('favorited');
-                favoriteBtn.title = 'Add to Favorites';
-            }
-            showToast(data.message || 'Failed to update favorites', 'error');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        if (wasFavorited) {
             favoriteBtn.classList.add('favorited');
             favoriteBtn.title = 'Remove from Favorites';
-        } else {
-            favoriteBtn.classList.remove('favorited');
-            favoriteBtn.title = 'Add to Favorites';
         }
-        showToast('An error occurred while updating favorites', 'error');
-    })
-    .finally(() => {
-        isFavoriteInProgress = false;
-    });
-}
-function updateUserRatingDisplay(rating) {
-    const stars = document.querySelectorAll('#userRatingStars .rating-star');
-    stars.forEach((star, index) => {
-        if (index < rating) {
-            star.classList.remove('far');
-            star.classList.add('fas', 'active');
-        } else {
+        fetch('/Recipes/ToggleFavorite', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value
+            },
+            body: JSON.stringify({
+                recipeId: recipeId
+            })
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    if (data.isFavorited) {
+                        favoriteBtn.classList.add('favorited');
+                        favoriteBtn.title = 'Remove from Favorites';
+                        showToast('Added to favorites!', 'success');
+                    } else {
+                        favoriteBtn.classList.remove('favorited');
+                        favoriteBtn.title = 'Add to Favorites';
+                        showToast('Removed from favorites!', 'success');
+                    }
+                } else {
+                    if (wasFavorited) {
+                        favoriteBtn.classList.add('favorited');
+                        favoriteBtn.title = 'Remove from Favorites';
+                    } else {
+                        favoriteBtn.classList.remove('favorited');
+                        favoriteBtn.title = 'Add to Favorites';
+                    }
+                    showToast(data.message || 'Failed to update favorites', 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                if (wasFavorited) {
+                    favoriteBtn.classList.add('favorited');
+                    favoriteBtn.title = 'Remove from Favorites';
+                } else {
+                    favoriteBtn.classList.remove('favorited');
+                    favoriteBtn.title = 'Add to Favorites';
+                }
+                showToast('An error occurred while updating favorites', 'error');
+            })
+            .finally(() => {
+                isFavoriteInProgress = false;
+            });
+    }
+    function updateUserRatingDisplay(rating) {
+        const stars = document.querySelectorAll('#userRatingStars .rating-star');
+        stars.forEach((star, index) => {
+            if (index < rating) {
+                star.classList.remove('far');
+                star.classList.add('fas', 'active');
+            } else {
+                star.classList.remove('fas', 'active');
+                star.classList.add('far');
+            }
+        });
+    }
+    function clearUserRatingDisplay() {
+        const stars = document.querySelectorAll('#userRatingStars .rating-star');
+        stars.forEach(star => {
             star.classList.remove('fas', 'active');
             star.classList.add('far');
+        });
+    }
+    function revertUserRatingDisplay() {
+        const userRating = @userRating;
+        if (userRating > 0) {
+            updateUserRatingDisplay(userRating);
+        } else {
+            clearUserRatingDisplay();
         }
-    });
-}
-function clearUserRatingDisplay() {
-    const stars = document.querySelectorAll('#userRatingStars .rating-star');
-    stars.forEach(star => {
-        star.classList.remove('fas', 'active');
-        star.classList.add('far');
-    });
-}
-function revertUserRatingDisplay() {
-    const userRating = @userRating;
-    if (userRating > 0) {
-        updateUserRatingDisplay(userRating);
-    } else {
-        clearUserRatingDisplay();
-    }
-}
-function updateAverageRatingDisplay(averageRating, totalRatings) {
-    const displayStars = document.querySelectorAll('#displayStars i');
-    displayStars.forEach((star, index) => {
-        const starValue = index + 1;
-        star.className = '';
-        if (starValue <= Math.floor(averageRating)) {
-            star.className = 'fas fa-star filled';
-        } else if (starValue <= averageRating) {
-            star.className = 'fas fa-star-half-alt filled';
-        } else {
-            star.className = 'far fa-star';
+    }
+    function updateAverageRatingDisplay(averageRating, totalRatings) {
+        const displayStars = document.querySelectorAll('#displayStars i');
+        displayStars.forEach((star, index) => {
+            const starValue = index + 1;
+            star.className = '';
+            if (starValue <= Math.floor(averageRating)) {
+                star.className = 'fas fa-star filled';
+            } else if (starValue <= averageRating) {
+                star.className = 'fas fa-star-half-alt filled';
+            } else {
+                star.className = 'far fa-star';
+            }
+        });
+        document.querySelector('.rating-value').textContent = `(${averageRating.toFixed(1)})`;
+        document.querySelector('.rating-count').textContent = `${totalRatings} review${totalRatings !== 1 ? 's' : ''}`;
+    }
+    function showRemoveRatingButton() {
+        let removeBtn = document.querySelector('.remove-rating-btn');
+        if (!removeBtn) {
+            removeBtn = document.createElement('button');
+            removeBtn.className = 'remove-rating-btn';
+            removeBtn.innerHTML = '<i class="fas fa-times"></i> Remove';
+            removeBtn.title = 'Remove your rating';
+            removeBtn.onclick = () => removeRating(@Model.Id);
+            document.querySelector('.rate-recipe').appendChild(removeBtn);
         }
-    });
-    document.querySelector('.rating-value').textContent = `(${averageRating.toFixed(1)})`;
-    document.querySelector('.rating-count').textContent = `${totalRatings} review${totalRatings !== 1 ? 's' : ''}`;
-}
-function showRemoveRatingButton() {
-    let removeBtn = document.querySelector('.remove-rating-btn');
-    if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.className = 'remove-rating-btn';
-        removeBtn.innerHTML = '<i class="fas fa-times"></i> Remove';
-        removeBtn.title = 'Remove your rating';
-        removeBtn.onclick = () => removeRating(@Model.Id);
-        document.querySelector('.rate-recipe').appendChild(removeBtn);
-    }
-    removeBtn.style.display = 'block';
-}
-function hideRemoveRatingButton() {
-    const removeBtn = document.querySelector('.remove-rating-btn');
-    if (removeBtn) {
-        removeBtn.style.display = 'none';
-    }
-}
-function showToast(message, type = 'success') {
-    const existingToast = document.querySelector('.rating-toast');
-    if (existingToast) {
-        existingToast.remove();
-    }
-    const toast = document.createElement('div');
-    toast.className = `rating-toast ${type}`;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-    setTimeout(() => toast.classList.add('show'), 100);
-    setTimeout(() => {
-        toast.classList.remove('show');
-        setTimeout(() => toast.remove(), 300);
-    }, 3000);
-}
-document.addEventListener('DOMContentLoaded', function() {
-    const userRatingStars = document.querySelectorAll('#userRatingStars .rating-star');
-    userRatingStars.forEach((star, index) => {
-        star.addEventListener('mouseenter', function() {
-            if (isRatingInProgress) return;
-            userRatingStars.forEach((s, i) => {
-                if (i <= index) {
-                    s.style.color = '#fbbf24';
-                } else {
-                    s.style.color = '#ddd';
-                }
+        removeBtn.style.display = 'block';
+    }
+    function hideRemoveRatingButton() {
+        const removeBtn = document.querySelector('.remove-rating-btn');
+        if (removeBtn) {
+            removeBtn.style.display = 'none';
+        }
+    }
+    function showToast(message, type = 'success') {
+        const existingToast = document.querySelector('.rating-toast');
+        if (existingToast) {
+            existingToast.remove();
+        }
+        const toast = document.createElement('div');
+        toast.className = `rating-toast ${type}`;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.classList.add('show'), 100);
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+        const userRatingStars = document.querySelectorAll('#userRatingStars .rating-star');
+        userRatingStars.forEach((star, index) => {
+            star.addEventListener('mouseenter', function () {
+                if (isRatingInProgress) return;
+                userRatingStars.forEach((s, i) => {
+                    if (i <= index) {
+                        s.style.color = '#fbbf24';
+                    } else {
+                        s.style.color = '#ddd';
+                    }
+                });
             });
-        });
-        star.addEventListener('mouseleave', function() {
-            if (isRatingInProgress) return;
-            const userRating = @userRating;
-            userRatingStars.forEach((s, i) => {
-                if (i < userRating) {
-                    s.style.color = '#fbbf24';
-                } else {
-                    s.style.color = '#ddd';
-                }
+            star.addEventListener('mouseleave', function () {
+                if (isRatingInProgress) return;
+                const userRating = @userRating;
+                userRatingStars.forEach((s, i) => {
+                    if (i < userRating) {
+                        s.style.color = '#fbbf24';
+                    } else {
+                        s.style.color = '#ddd';
+                    }
+                });
             });
         });
     });
-});
 </script>
Index: NutriMatch/Views/Restaurants/Index.cshtml
===================================================================
--- NutriMatch/Views/Restaurants/Index.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Restaurants/Index.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -21,5 +21,6 @@
                 <i class="fas fa-sliders-h me-2" style="color: var(--nutri-green);"></i>
                 Filter by Macronutrients
-                <button class="btn btn-outline-secondary btn-sm ms-3" onclick="resetFilters()"><i class="fas fa-undo me-1"></i>Reset Filters</button>
+                <button class="btn btn-outline-secondary btn-sm ms-3" onclick="resetFilters()"><i
+                        class="fas fa-undo me-1"></i>Reset Filters</button>
             </h4>
             <div class="row">
@@ -32,6 +33,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="caloriesFill"></div>
-                            <input type="range" class="range-input" min="0" max="2000" value="0" id="caloriesMin" oninput="updateSlider('calories')">
-                            <input type="range" class="range-input" min="0" max="2000" value="2000" id="caloriesMax" oninput="updateSlider('calories')">
+                            <input type="range" class="range-input" min="0" max="2000" value="0" id="caloriesMin"
+                                oninput="updateSlider('calories')">
+                            <input type="range" class="range-input" min="0" max="2000" value="2000" id="caloriesMax"
+                                oninput="updateSlider('calories')">
                         </div>
                     </div>
@@ -45,6 +48,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="proteinFill"></div>
-                            <input type="range" class="range-input" min="0" max="150" value="0" id="proteinMin" oninput="updateSlider('protein')">
-                            <input type="range" class="range-input" min="0" max="150" value="150" id="proteinMax" oninput="updateSlider('protein')">
+                            <input type="range" class="range-input" min="0" max="150" value="0" id="proteinMin"
+                                oninput="updateSlider('protein')">
+                            <input type="range" class="range-input" min="0" max="150" value="150" id="proteinMax"
+                                oninput="updateSlider('protein')">
                         </div>
                     </div>
@@ -58,6 +63,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="carbsFill"></div>
-                            <input type="range" class="range-input" min="0" max="150" value="0" id="carbsMin" oninput="updateSlider('carbs')">
-                            <input type="range" class="range-input" min="0" max="150" value="150" id="carbsMax" oninput="updateSlider('carbs')">
+                            <input type="range" class="range-input" min="0" max="150" value="0" id="carbsMin"
+                                oninput="updateSlider('carbs')">
+                            <input type="range" class="range-input" min="0" max="150" value="150" id="carbsMax"
+                                oninput="updateSlider('carbs')">
                         </div>
                     </div>
@@ -71,6 +78,8 @@
                         <div class="range-slider">
                             <div class="range-fill" id="fatsFill"></div>
-                            <input type="range" class="range-input" min="0" max="150" value="0" id="fatsMin" oninput="updateSlider('fats')">
-                            <input type="range" class="range-input" min="0" max="150" value="150" id="fatsMax" oninput="updateSlider('fats')">
+                            <input type="range" class="range-input" min="0" max="150" value="0" id="fatsMin"
+                                oninput="updateSlider('fats')">
+                            <input type="range" class="range-input" min="0" max="150" value="150" id="fatsMax"
+                                oninput="updateSlider('fats')">
                         </div>
                     </div>
@@ -79,14 +88,15 @@
         </div>
         <div class="row" id="restaurantsGrid">
-            @foreach(var r in Model){
+            @foreach (var r in Model)
+            {
                 <div class="col-md-6 col-lg-4 mb-2">
-                        <div class="restaurant-card" onclick="openMenu(@r.Id)">
-                            <div class="restaurant-info">
-                                <img style="width: 200px;" src="@r.ImageUrl">
-                            </div>
-                            <div class="restaurant-name">@r.Name</div>
-                            <div class="restaurant-items">@r.Description</div>
+                    <div class="restaurant-card" onclick="openMenu(@r.Id)">
+                        <div class="restaurant-info">
+                            <img style="width: 200px;" src="@r.ImageUrl">
                         </div>
+                        <div class="restaurant-name">@r.Name</div>
+                        <div class="restaurant-items">@r.Description</div>
                     </div>
+                </div>
             }
         </div>
@@ -109,5 +119,5 @@
         </div>
     </div>
-   <script src="~/js/RestaurantIndex.js"></script>
+    <script src="~/js/RestaurantIndex.js"></script>
 </body>
 </html>
Index: NutriMatch/Views/Restaurants/_RestaurantMealsPartial.cshtml
===================================================================
--- NutriMatch/Views/Restaurants/_RestaurantMealsPartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Restaurants/_RestaurantMealsPartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,5 +1,6 @@
 @model List<NutriMatch.Models.RestaurantMeal>
 
-@if (Model.Count == 0){
+@if (Model.Count == 0)
+{
     <div class="no-items-message">
         <i class="fas fa-filter fa-2x mb-3"></i>
@@ -7,5 +8,7 @@
         <p>Try adjusting your macro filters to see more menu items</p>
     </div>
-} else {
+}
+else
+{
     @foreach (var meal in Model)
     {
Index: NutriMatch/Views/Shared/Error.cshtml
===================================================================
--- NutriMatch/Views/Shared/Error.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Shared/Error.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -16,10 +16,12 @@
 <h3>Development Mode</h3>
 <p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that
+    occurred.
 </p>
 <p>
     <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
     It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    For local debugging, enable the <strong>Development</strong> environment by setting the
+    <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
     and restarting the app.
 </p>
Index: NutriMatch/Views/Shared/_Layout.cshtml
===================================================================
--- NutriMatch/Views/Shared/_Layout.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Shared/_Layout.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -8,5 +8,5 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="~/css/_Layout.css"  />
+    <link rel="stylesheet" href="~/css/_Layout.css" />
 </head>
 @{
@@ -28,29 +28,39 @@
                     <ul class="navbar-nav ms-auto">
                         <li class="nav-item">
-                            <a class="nav-link @(currentController == "Home" && currentAction == "Index" ? "active-glow" : "")" href="/Home">Home</a>
+                            <a class="nav-link @(currentController == "Home" && currentAction == "Index" ? "active-glow" : "")"
+                                href="/Home">Home</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link @(currentController == "Recipes" && currentAction == "Index" ? "active-glow" : "")" href="/Recipes" >Recipes</a>
+                            <a class="nav-link @(currentController == "Recipes" && currentAction == "Index" ? "active-glow" : "")"
+                                href="/Recipes">Recipes</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link @(currentController == "Restaurants" && currentAction == "Index" ? "active-glow" : "") " href="/Restaurants">Restaurants</a>
+                            <a class="nav-link @(currentController == "Restaurants" && currentAction == "Index" ? "active-glow" : "") "
+                                href="/Restaurants">Restaurants</a>
                         </li>
-                        @if(User.Identity.IsAuthenticated){
+                        @if (User.Identity.IsAuthenticated)
+                        {
                             <li class="nav-item">
-                                <a class="nav-link @(currentController == "Recipes" && currentAction == "MyRecipes" ? "active-glow" : "")" href="/Recipes/MyRecipes">My Recipes</a>
+                                <a class="nav-link @(currentController == "Recipes" && currentAction == "MyRecipes" ? "active-glow" : "")"
+                                    href="/Recipes/MyRecipes">My Recipes</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link @(currentController == "MealPlan" && currentAction == "Index" ? "active-glow" : "") " href="/MealPlan">Meal Plans</a>
+                                <a class="nav-link @(currentController == "MealPlan" && currentAction == "Index" ? "active-glow" : "") "
+                                    href="/MealPlan">Meal Plans</a>
                             </li>
-                             <a class="nav-link @(currentPage == "/Account/MyAccount" ? "active-glow" : "")"
+                            <a class="nav-link @(currentPage == "/Account/MyAccount" ? "active-glow" : "")"
                                 href="/Identity/Account/MyAccount">
                                 My Account
                             </a>
-                            @if (User.IsInRole("Admin")){
+                            @if (User.IsInRole("Admin"))
+                            {
                                 <li class="nav-item">
-                                <a class="nav-link @(currentController == "Admin" && currentAction == "Index" ? "active-glow" : "")" href="/Admin">Admin Panel</a>
+                                    <a class="nav-link @(currentController == "Admin" && currentAction == "Index" ? "active-glow" : "")"
+                                        href="/Admin">Admin Panel</a>
                                 </li>
                             }
-                        } else {
+                        }
+                        else
+                        {
                             <partial name="_LoginPartial" />
                         }
Index: NutriMatch/Views/Shared/_LoginPartial.cshtml
===================================================================
--- NutriMatch/Views/Shared/_LoginPartial.cshtml	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/Views/Shared/_LoginPartial.cshtml	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -6,20 +6,22 @@
 
 <ul class="navbar-nav">
-@if (SignInManager.IsSignedIn(User))
-{
-    <li class="nav-item">
-        <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
-    </li>
-    <li class="nav-item">
-        <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
-            <button id="logout" type="submit" class="nav-link btn btn-link text-dark border-0">Logout</button>
-        </form>
-    </li>
-}
-else
-{
-    <li class="nav-item">
-        <a class="nav-link text-dark" id="register" asp-area="Identity" asp-page="/Account/Register">Sign Up</a>
-    </li>
-}
+    @if (SignInManager.IsSignedIn(User))
+    {
+        <li class="nav-item">
+            <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index"
+                title="Manage">Hello @UserManager.GetUserName(User)!</a>
+        </li>
+        <li class="nav-item">
+            <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout"
+                asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
+                <button id="logout" type="submit" class="nav-link btn btn-link text-dark border-0">Logout</button>
+            </form>
+        </li>
+    }
+    else
+    {
+        <li class="nav-item">
+            <a class="nav-link text-dark" id="register" asp-area="Identity" asp-page="/Account/Register">Sign Up</a>
+        </li>
+    }
 </ul>
Index: NutriMatch/wwwroot/css/AdminIndex.css
===================================================================
--- NutriMatch/wwwroot/css/AdminIndex.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/css/AdminIndex.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,257 @@
+.admin-header {
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    border-radius: 12px;
+    padding: 2rem;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.admin-subtitle {
+    font-size: 1.1rem;
+    margin: 0;
+    margin-top: 0.5rem;
+}
+
+.admin-stats .badge {
+    padding: 0.5rem 1rem;
+    font-weight: 600;
+}
+
+.bulk-actions-section {
+    background: #fff;
+    border: 2px dashed #d1d5db;
+    border-radius: 8px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    display: none;
+}
+
+.bulk-actions-section.show {
+    display: block;
+    animation: slideDown 0.3s ease;
+}
+
+.bulk-actions-section:hover {
+    border-color: var(--nutri-green);
+    background: #f0fdf4;
+}
+
+.admin-recipe-card {
+    position: relative;
+    border: 2px solid #e5e7eb;
+    transition: all 0.3s ease;
+}
+
+.admin-recipe-card:hover {
+    border-color: var(--nutri-green);
+    transform: translateY(-2px);
+}
+
+.admin-recipe-card.selected {
+    border-color: #3b82f6;
+    background: #eff6ff;
+}
+
+.recipe-select {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 10;
+}
+
+.recipe-checkbox {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    accent-color: #3b82f6;
+}
+
+.recipe-status-badge {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+}
+
+.recipe-status-badge .badge {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+}
+
+.admin-actions-buttons {
+    border-top: 1px solid #e5e7eb;
+    padding-top: 1rem;
+}
+
+.admin-actions-buttons .btn {
+    font-size: 0.875rem;
+    padding: 0.375rem 0.75rem;
+    font-weight: 500;
+}
+
+.decline-reason-section {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    padding: 1rem;
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.empty-state {
+    background: #f9fafb;
+    border: 2px dashed #d1d5db;
+    border-radius: 12px;
+    margin: 2rem 0;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    color: white;
+}
+
+.loading-overlay .spinner-border {
+    width: 3rem;
+    height: 3rem;
+}
+
+.recipe-image {
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+}
+
+.recipe-image:hover {
+    opacity: 0.9;
+}
+
+.recipe-title {
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.recipe-title:hover {
+    color: var(--nutri-green);
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-success:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3);
+}
+
+.btn-danger:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
+}
+
+@media (max-width: 768px) {
+    .admin-header {
+        text-align: center;
+        padding: 1.5rem;
+    }
+
+    .bulk-actions-section {
+        padding: 1rem;
+    }
+
+    .admin-actions-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .admin-actions-buttons .btn {
+        width: 100%;
+    }
+}
+
+.recipe-card.removing {
+    animation: fadeOut 0.5s ease forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+}
+
+.recipe-card.approved {
+    border-color: #10b981;
+    background: #f0fdf4;
+}
+
+.recipe-card.declined {
+    border-color: #ef4444;
+    background: #fef2f2;
+}
+
+.form-select-sm,
+.form-control-sm {
+    font-size: 0.875rem;
+}
+
+.decline-reason-section .form-label {
+    color: #991b1b;
+    margin-bottom: 0.5rem;
+}
+
+.search-container {
+    background: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    border: 1px solid #e5e7eb;
+    margin-bottom: 2rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.admin-recipe-card .recipe-meta {
+    margin-bottom: 1rem;
+}
+
+.admin-recipe-card .recipe-meta span {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin-right: 1rem;
+}
+
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
+}
+
+.toast {
+    margin-bottom: 1rem;
+}
Index: NutriMatch/wwwroot/css/MealPlanCreate.css
===================================================================
--- NutriMatch/wwwroot/css/MealPlanCreate.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/css/MealPlanCreate.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,313 @@
+
+body {
+    background: #c3d5c4;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+
+.container {
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.header-section {
+    text-align: center;
+    margin-bottom: 40px;
+    color: #2c5530;
+}
+
+.header-section h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+.header-section p {
+    font-size: 1.1rem;
+    color: #6b7280;
+    margin: 0;
+}
+
+.main-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 24px;
+    padding: 40px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.section-title {
+    display: flex;
+    align-items: center;
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #2c5530;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #e5e7eb;
+}
+
+.section-title i {
+    color: #4ade80;
+    margin-right: 12px;
+    font-size: 1.1rem;
+}
+
+.form-group {
+    margin-bottom: 24px;
+}
+
+.form-label {
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    font-size: 0.95rem;
+}
+
+.form-label i {
+    margin-right: 8px;
+    width: 16px;
+    text-align: center;
+}
+
+.form-control {
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 14px 16px;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    background: white;
+}
+
+.form-control:focus {
+    border-color: #4ade80;
+    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
+}
+
+.macro-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.macro-item {
+    background: #f8fafc;
+    border: 2px solid #e5e7eb;
+    border-radius: 16px;
+    padding: 20px;
+    transition: all 0.2s ease;
+}
+
+.macro-item:hover {
+    border-color: #4ade80;
+    background: #f0fdf4;
+}
+
+.macro-item .form-control {
+    border: 1px solid #d1d5db;
+    margin-top: 8px;
+}
+
+.help-text {
+    font-size: 0.8rem;
+    color: #6b7280;
+    margin-top: 4px;
+}
+
+.submit-section {
+    text-align: center;
+    margin-top: 40px;
+    padding-top: 30px;
+    border-top: 2px solid #e5e7eb;
+}
+
+.btn-create {
+    background: #4ade80;
+    color: white;
+    border: none;
+    border-radius: 16px;
+    padding: 16px 40px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
+}
+
+.btn-create:hover {
+    background: #22c55e;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.4);
+    color: white;
+}
+
+.btn-create:disabled {
+    background: #9ca3af;
+    transform: none;
+    box-shadow: none;
+}
+
+.success-message {
+    background: #d1f2d9;
+    color: #0d5016;
+    padding: 16px 20px;
+    border-radius: 12px;
+    border: 1px solid #7dd87f;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+}
+
+.success-message i {
+    margin-right: 12px;
+    color: #16a34a;
+}
+
+.error-message {
+    background: #fed7d7;
+    color: #9b2c2c;
+    padding: 16px 20px;
+    border-radius: 12px;
+    border: 1px solid #feb2b2;
+    margin-bottom: 24px;
+}
+
+.error-message i {
+    margin-right: 12px;
+}
+
+.error-message ul {
+    margin: 8px 0 0 0;
+    padding-left: 20px;
+}
+
+.icon-fire {
+    color: #ef4444;
+}
+
+.icon-protein {
+    color: #8b5cf6;
+}
+
+.icon-carbs {
+    color: #f59e0b;
+}
+
+.icon-fat {
+    color: #06b6d4;
+}
+
+.icon-restaurant {
+    color: #ec4899;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px 16px;
+    }
+
+    .main-card {
+        padding: 24px;
+        border-radius: 20px;
+    }
+
+    .macro-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .header-section h1 {
+        font-size: 2rem;
+    }
+}
+
+
+.modal {
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background-color: white;
+    border-radius: 8px;
+    padding: 0;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    margin: 0;
+    color: #333;
+}
+
+.close {
+    font-size: 24px;
+    font-weight: bold;
+    color: #999;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.close:hover {
+    color: #333;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.btn-secondary {
+    background-color: #6c757d;
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 0.5rem;
+    transition: background-color 0.2s;
+}
+
+.btn-secondary:hover {
+    background-color: #5a6268;
+}
+
+.add-ingredient-option {
+    padding: 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #eee;
+    color: #007bff;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.add-ingredient-option:hover {
+    background-color: #f8f9fa;
+}
+
+.add-ingredient-option:last-child {
+    border-bottom: none;
+}
Index: NutriMatch/wwwroot/css/MealPlanDetails.css
===================================================================
--- NutriMatch/wwwroot/css/MealPlanDetails.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/css/MealPlanDetails.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,483 @@
+:root {
+--primary-green: #2ECC71;
+--dark-green: #27AE60;
+--light-green: #58D68D;
+--light-green-gray: #bbcabe;
+--dark-gray: #2C3E50;
+--light-gray: #ECF0F1;
+--nutri-light-gray: #f3f4f6;
+--nutri-green-dark: #22c55e;
+--danger-red: #dc2626;
+--danger-red-hover: #b91c1c;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-green-gray) 100%);
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.header-section {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #2c5530;
+}
+
+.header-section h1 {
+    margin-top: 3rem;
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.header-section p {
+    font-size: 1.1rem;
+    color: #6b7280;
+    margin-bottom: 8px;
+}
+
+.generated-date {
+    color: #9ca3af;
+    font-size: 0.9rem;
+    margin-bottom: 0;
+}
+
+.navigation-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    gap: 16px;
+}
+
+.nav-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.95);
+    color: #374151;
+    text-decoration: none;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+}
+
+.nav-btn:hover {
+    background: white;
+    color: #374151;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.nav-btn.delete {
+    background: var(--danger-red);
+    color: white;
+}
+
+.nav-btn.delete:hover {
+    background: var(--danger-red-hover);
+    color: white;
+}
+
+.days-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 24px;
+    margin-bottom: 40px;
+}
+
+.day-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 24px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.day-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+}
+
+.day-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid #f1f5f9;
+}
+
+.day-name {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: #2c5530;
+}
+
+.day-calories {
+    background: #4ade80;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.meals-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.meal-card {
+    background: #f8fafc;
+    border-radius: 12px;
+    padding: 16px;
+    border-left: 4px solid #4ade80;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.meal-card.breakfast {
+    background: #fef3c7;
+    border-left-color: #f59e0b;
+}
+
+.meal-card.lunch {
+    background: #dbeafe;
+    border-left-color: #3b82f6;
+}
+
+.meal-card.dinner {
+    background: #fce7f3;
+    border-left-color: #ec4899;
+}
+
+.meal-card.snack {
+    background: #ede9fe;
+    border-left-color: #8b5cf6;
+}
+
+.meal-card:hover {
+    transform: translateX(2px);
+}
+
+.meal-card.clickable {
+    cursor: pointer;
+}
+
+.meal-card.clickable:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.meal-card.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.meal-card.loading::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #4ade80;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.meal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.meal-type {
+    font-weight: 700;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.meal-type.breakfast { color: #d97706; }
+.meal-type.lunch { color: #2563eb; }
+.meal-type.dinner { color: #db2777; }
+.meal-type.snack { color: #7c3aed; }
+
+.restaurant-badge {
+    background: #ef4444;
+    color: white;
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.recipe-badge {
+    background: #4ade80;
+    color: white;
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.meal-name {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 4px;
+    line-height: 1.3;
+}
+
+.meal-restaurant {
+    font-size: 0.85rem;
+    color: #6b7280;
+    font-style: italic;
+    margin-bottom: 8px;
+}
+
+.meal-macros {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.macro-badge {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 4px 10px;
+    border-radius: 16px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #374151;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.empty-day {
+    text-align: center;
+    color: #9ca3af;
+    font-style: italic;
+    padding: 20px;
+    background: #f8fafc;
+    border-radius: 12px;
+}
+
+.summary-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 32px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.summary-header {
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.summary-header h2 {
+    color: #2c5530;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.summary-header p {
+    color: #6b7280;
+    margin: 0;
+}
+
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 16px;
+}
+
+.summary-item {
+    background: #f0fdf4;
+    border: 2px solid #bbf7d0;
+    border-radius: 16px;
+    padding: 20px;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.summary-item:hover {
+    background: #dcfce7;
+    border-color: #4ade80;
+}
+
+.summary-label {
+    font-size: 0.8rem;
+    color: #6b7280;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+.summary-value {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #16a34a;
+    line-height: 1;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 30px;
+    border: none;
+    border-radius: 20px;
+    width: 90%;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.delete-modal-content {
+    max-width: 450px;
+    text-align: center;
+}
+
+.modal-header {
+    color: var(--danger-red);
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: center;
+}
+
+.modal-body {
+    color: #374151;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 24px;
+}
+
+.modal-buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+}
+
+.modal-btn {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.9rem;
+}
+
+.modal-btn.confirm {
+    background: var(--danger-red);
+    color: white;
+}
+
+.modal-btn.confirm:hover {
+    background: var(--danger-red-hover);
+}
+
+.modal-btn.cancel {
+    background: #f3f4f6;
+    color: #374151;
+}
+
+.modal-btn.cancel:hover {
+    background: #e5e7eb;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px 16px;
+    }
+
+    .days-container {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .navigation-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .header-section h1 {
+        font-size: 2rem;
+    }
+    
+    .summary-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .meal-macros {
+        justify-content: center;
+    }
+
+    .day-card, .summary-card {
+        padding: 20px;
+    }
+
+    .modal-content {
+        margin: 30% auto;
+        padding: 24px;
+    }
+
+    .modal-buttons {
+        flex-direction: column;
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.day-card {
+    animation: fadeInUp 0.5s ease forwards;
+}
Index: NutriMatch/wwwroot/css/MealPlanIndex.css
===================================================================
--- NutriMatch/wwwroot/css/MealPlanIndex.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/css/MealPlanIndex.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,370 @@
+:root {
+    --primary-green: #2ECC71;
+    --dark-green: #27AE60;
+    --light-green: #58D68D;
+    --light-green-gray: #bbcabe;
+    --dark-gray: #2C3E50;
+    --light-gray: #ECF0F1;
+    --nutri-light-gray: #f3f4f6;
+    --nutri-green-dark: #22c55e;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-green-gray) 100%);
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.header-section {
+    margin-top: 3rem;
+    text-align: center;
+    margin-bottom: 40px;
+    color: #2c5530;
+}
+
+.header-section h1 {
+    font-size: 2.8rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
+.header-section p {
+    font-size: 1.1rem;
+    color: #6b7280;
+    margin: 0;
+}
+
+.alert-message {
+    padding: 16px 20px;
+    border-radius: 12px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+}
+
+.alert-message i {
+    margin-right: 12px;
+}
+
+.alert-success {
+    background: rgba(209, 250, 229, 0.9);
+    color: #065f46;
+    border: 1px solid #6ee7b7;
+}
+
+.alert-error {
+    background: rgba(254, 226, 226, 0.9);
+    color: #991b1b;
+    border: 1px solid #fca5a5;
+}
+
+.plans-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 24px;
+}
+
+.plan-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    height: 100%;
+}
+
+.plan-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.plan-card-header {
+    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
+    color: white;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.plan-card-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
+}
+
+.plan-card:hover .plan-card-header::before {
+    left: 100%;
+}
+
+.plan-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.plan-date {
+    font-size: 0.85rem;
+    opacity: 0.9;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.plan-card-body {
+    padding: 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.plan-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.stat-box {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 12px;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.stat-box:hover {
+    background: #f0fdf4;
+    border-color: #4ade80;
+}
+
+.stat-number {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: #16a34a;
+    display: block;
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: 0.75rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin-top: 4px;
+}
+
+.meal-preview {
+    background: #f8fafc;
+    border-radius: 12px;
+    padding: 14px;
+    margin-bottom: 16px;
+    flex: 1;
+}
+
+.meal-preview h6 {
+    color: #374151;
+    font-weight: 600;
+    margin-bottom: 8px;
+    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.meal-list {
+    font-size: 0.8rem;
+    color: #6b7280;
+    line-height: 1.4;
+}
+
+.meal-list div {
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.view-plan-btn {
+    background: #4ade80;
+    color: white;
+    text-decoration: none;
+    border: none;
+    padding: 12px 16px;
+    border-radius: 12px;
+    font-weight: 600;
+    text-align: center;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 0.9rem;
+}
+
+.view-plan-btn:hover {
+    background: #22c55e;
+    color: white;
+    text-decoration: none;
+}
+
+.create-new-card {
+    background: rgba(255, 255, 255, 0.7);
+    border: 3px dashed #4ade80;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    text-decoration: none;
+    color: #16a34a;
+}
+
+.create-new-card:hover {
+    background: rgba(255, 255, 255, 0.9);
+    border-color: #22c55e;
+    color: #15803d;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.create-new-content {
+    text-align: center;
+    padding: 20px;
+}
+
+.create-new-content i {
+    font-size: 3.5rem;
+    margin-bottom: 16px;
+    display: block;
+    color: #4ade80;
+}
+
+.create-new-content h4 {
+    font-weight: 700;
+    margin-bottom: 8px;
+    font-size: 1.2rem;
+}
+
+.create-new-content p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #6b7280;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: #374151;
+}
+
+.empty-state i {
+    font-size: 4rem;
+    margin-bottom: 24px;
+    color: #9ca3af;
+}
+
+.empty-state h3 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #2c5530;
+}
+
+.empty-state p {
+    font-size: 1rem;
+    margin-bottom: 30px;
+    color: #6b7280;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.btn-create-first {
+    background: rgba(255, 255, 255, 0.9);
+    color: #16a34a;
+    border: 2px solid #4ade80;
+    padding: 16px 32px;
+    border-radius: 16px;
+    font-size: 1rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.btn-create-first:hover {
+    background: #4ade80;
+    color: white;
+    border-color: #22c55e;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px 16px;
+    }
+
+    .plans-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .header-section h1 {
+        font-size: 2.2rem;
+    }
+
+    .plan-card-header,
+    .plan-card-body {
+        padding: 16px;
+    }
+
+    .empty-state {
+        padding: 40px 16px;
+    }
+}
+
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.plan-card {
+    animation: slideInUp 0.6s ease forwards;
+    opacity: 0;
+}
+
+.create-new-card {
+    animation: slideInUp 0.6s ease forwards;
+    opacity: 0;
+}
Index: NutriMatch/wwwroot/css/MyRecipes.css
===================================================================
--- NutriMatch/wwwroot/css/MyRecipes.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/css/MyRecipes.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,364 @@
+
+    :root {
+    --primary-green: #2ECC71;
+    --dark-green: #27AE60;
+    --light-green: #58D68D;
+    --light-green-gray: #bbcabe;
+    --dark-gray: #2C3E50;
+    --light-gray: #ECF0F1;
+    --nutri-light-gray: #f3f4f6;
+    --nutri-green-dark: #22c55e;
+    }
+
+    body {
+         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-green-gray) 100%);
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+    }
+
+    .container {
+        margin: 0 auto;
+        padding: 40px 20px;
+    }
+
+    .header-section {
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 20px;
+        padding: 40px;
+        margin-bottom: 30px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+        text-align: center;
+    }
+
+    .header-section h1 {
+        color: #2c3e50;
+        font-size: 2.5rem;
+        font-weight: 600;
+        margin: 0 0 15px 0;
+    }
+
+    .header-section p {
+        color: #7f8c8d;
+        font-size: 1.1rem;
+        margin: 0 0 30px 0;
+        line-height: 1.6;
+    }
+
+    .create-recipe-btn {
+        background: #52c96b;
+        color: white;
+        padding: 15px 30px;
+        border: none;
+        border-radius: 25px;
+        font-size: 1.1rem;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 15px rgba(82, 201, 107, 0.3);
+    }
+
+    .create-recipe-btn:hover {
+        background: #47b35f;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(82, 201, 107, 0.4);
+        color: white;
+        text-decoration: none;
+    }
+
+    .stats-section {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    .stat-card {
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 15px;
+        padding: 25px;
+        text-align: center;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+        backdrop-filter: blur(5px);
+    }
+
+    .stat-number {
+        font-size: 2rem;
+        font-weight: 700;
+        color: #52c96b;
+        margin-bottom: 5px;
+    }
+
+    .stat-label {
+        color: #7f8c8d;
+        font-size: 0.9rem;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+   .recipe-grid {
+    display: grid;
+    gap: 1.5rem;
+    margin-top: 2rem;
+    justify-items: center;
+    grid-template-columns: 1fr; 
+}
+
+
+@media (min-width: 768px) {
+    .recipe-grid {
+        grid-template-columns: repeat(2, 1fr); 
+    }
+}
+
+@media (min-width: 992px) {
+    .recipe-grid {
+        grid-template-columns: repeat(3, 1fr); 
+    }
+}
+
+.recipe-card {
+    width: 100%;
+    max-width: 417.953px;
+    height: 380px;
+    background: white;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative !important;
+    cursor: pointer;
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+
+.recipe-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+
+.recipe-card.loading {
+    pointer-events: none;
+}
+
+.recipe-card.loading * {
+    transition: none !important;
+    animation: none !important;
+}
+
+.recipe-image {
+    width: 100% !important;
+    height: 200px !important;
+    object-fit: cover;
+    background: linear-gradient(45deg, var(--nutri-green), var(--nutri-green-dark));
+    position: relative;
+    display: block !important;
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+
+.favorite-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 10;
+    backdrop-filter: blur(10px);
+}
+
+.favorite-btn:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+}
+
+.favorite-btn i {
+    font-size: 18px;
+    color: #ef4444;
+    transition: all 0.3s ease;
+}
+
+.favorite-btn:hover i {
+    color: #dc2626;
+}
+
+.favorite-btn.active i {
+    color: #ef4444;
+    font-weight: 900;
+}
+
+.badge {
+    position: absolute;
+    top: 5px;
+    right: 7px;
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    z-index: 15;
+}
+
+.recipe-content {
+    padding: 1.5rem !important;
+    height: calc(100% - 200px) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    box-sizing: border-box;
+    position: relative;
+    flex-shrink: 0;
+    
+}
+
+.recipe-title {
+    font-size: 1.3rem !important;
+    font-weight: 700 !important;
+    color: #1f2937 !important;
+    margin-bottom: 0.5rem !important;
+    line-height: 1.3 !important;
+    transition: none !important;
+    animation: none !important;
+}
+
+
+.recipe-card .recipe-title,
+.recipe-card:hover .recipe-title,
+.recipe-card:active .recipe-title,
+.recipe-card:focus .recipe-title,
+.recipe-card.loading .recipe-title {
+    font-size: 1.3rem !important;
+    font-weight: 700 !important;
+    color: #1f2937 !important;
+    margin-bottom: 0.5rem !important;
+    line-height: 1.3 !important;
+    transition: none !important;
+    animation: none !important;
+}
+
+.recipe-meta {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    color: var(--nutri-gray);
+    flex-wrap: wrap;
+}
+
+.recipe-meta .rating {
+    color: #fbbf24;
+    font-weight: 600;
+}
+
+.recipe-meta i {
+    margin-right: 4px;
+}
+
+.recipe-macros {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+    margin-top: 1px;
+    padding-top: 0.7rem;
+    border-top: 1px solid #eee;
+}
+
+.macro-item {
+    text-align: center;
+    padding: 0.5rem;
+    background: var(--nutri-light-gray);
+    border-radius: 10px;
+}
+
+.macro-value {
+    font-weight: 700;
+    color: var(--nutri-green-dark);
+    font-size: 1rem;
+    line-height: 1.2;
+}
+
+.macro-label {
+    font-size: 0.8rem;
+    color: var(--nutri-gray);
+    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 1;
+}
+
+    .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 20px;
+        backdrop-filter: blur(10px);
+    }
+
+    .empty-icon {
+        font-size: 4rem;
+        color: #bdc3c7;
+        margin-bottom: 20px;
+    }
+
+    .empty-title {
+        font-size: 1.5rem;
+        color: #7f8c8d;
+        margin-bottom: 10px;
+    }
+
+    .empty-text {
+        color: #95a5a6;
+        margin-bottom: 30px;
+    }
+
+    .nutrition-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 15px;
+    }
+
+    .nutrition-tag {
+        background: rgba(82, 201, 107, 0.1);
+        color: #52c96b;
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 0.8rem;
+        font-weight: 500;
+    }
+
+
+
+    #modalWindow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    pointer-events: none;
+}
+
+#modalWindow .modal {
+    pointer-events: all;
+}
+
+
+
+
+.recipe-card h3.recipe-title {
+    font-size: 1.3rem !important;
+    font-weight: 700 !important;
+    color: #1f2937 !important;
+    margin-bottom: 0.5rem !important;
+    line-height: 1.3 !important;
+}
+
+
Index: NutriMatch/wwwroot/css/_RecipeDeclinePartial.css
===================================================================
--- NutriMatch/wwwroot/css/_RecipeDeclinePartial.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/css/_RecipeDeclinePartial.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,717 @@
+    .recipe-hero {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    .recipe-image-container {
+        position: relative;
+        flex: 1;
+        max-width: 300px;
+    }
+
+    .recipe-image-details {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .recipe-info {
+        flex: 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .chef-badge {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #6b7280;
+    }
+
+    .chef-avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
+    .recipe-title-details {
+        font-size: 24px;
+        font-weight: 700;
+        color: #1f2937;
+        margin: 0 0 15px 0;
+        line-height: 1.3;
+    }
+
+    .nutrition-card {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .section-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #374151;
+        margin-bottom: 15px;
+    }
+
+    .nutrition-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+    }
+
+    .nutrition-item {
+        text-align: center;
+        padding: 12px 8px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+        transition: transform 0.2s ease;
+    }
+
+    .nutrition-item:hover {
+        transform: translateY(-2px);
+    }
+
+    .nutrition-icon {
+        margin-bottom: 5px;
+    }
+
+    .nutrition-value {
+        font-size: 18px;
+        font-weight: 700;
+        color: #1f2937;
+        margin-bottom: 2px;
+    }
+
+    .nutrition-label {
+        font-size: 12px;
+        color: #6b7280;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .ingredients-list,
+    .instructions-list {
+        background: white;
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .ingredient-item {
+        padding: 10px 0;
+        border-bottom: 1px solid #f1f5f9;
+        font-size: 14px;
+        color: #374151;
+    }
+
+    .ingredient-item:last-child {
+        border-bottom: none;
+    }
+
+    .ingredient-bullet {
+        color: #10b981;
+        font-weight: bold;
+        font-size: 16px;
+    }
+
+    .instruction-item {
+        display: flex;
+        align-items: flex-start;
+        background-color: #f8f9fa;
+        padding: 15px;
+        margin: 10px 0;
+        border-radius: 10px;
+        border-left: 4px solid #ef4444;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .instruction-number {
+        background-color: #ef4444;
+        color: white;
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        font-weight: bold;
+        margin-right: 15px;
+        flex-shrink: 0;
+        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
+    }
+
+    .instruction-text {
+        flex: 1;
+        line-height: 1.6;
+        color: #374151;
+        font-size: 14px;
+    }
+
+    .decline-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+        backdrop-filter: blur(2px);
+    }
+
+    .decline-badge {
+        background: linear-gradient(135deg, #ef4444, #dc2626);
+        color: white;
+        padding: 10px 20px;
+        border-radius: 25px;
+        font-weight: bold;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+    .decline-status {
+        margin: 15px 0;
+        padding: 15px;
+        background: linear-gradient(135deg, #fef2f2, #fee2e2);
+        border: 1px solid #fecaca;
+        border-radius: 10px;
+    }
+
+    .status-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin: 6px 0;
+        font-size: 14px;
+        color: #374151;
+    }
+
+    .status-item i {
+        width: 16px;
+        text-align: center;
+    }
+
+    .feedback-section {
+        margin: 25px 0;
+    }
+
+    .feedback-card {
+        background: white;
+        border: 1px solid #e2e8f0;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .feedback-header {
+        background: linear-gradient(135deg, #1e293b, #334155);
+        color: white;
+        padding: 18px 24px;
+    }
+
+    .feedback-header h4 {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 17px;
+        font-weight: 600;
+    }
+
+    .feedback-content {
+        padding: 24px;
+    }
+
+    .admin-comment {
+        font-size: 15px;
+        line-height: 1.7;
+        color: #374151;
+        background: #fef9f9;
+        padding: 20px;
+        border-radius: 10px;
+        border-left: 4px solid #ef4444;
+        position: relative;
+    }
+
+    .admin-comment::before {
+        content: '"';
+        font-size: 40px;
+        color: #ef4444;
+        position: absolute;
+        top: 10px;
+        left: 15px;
+        opacity: 0.3;
+        font-family: serif;
+    }
+
+    .no-comment {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: #6b7280;
+        font-style: italic;
+        padding: 20px;
+        background: #f8fafc;
+        border-radius: 8px;
+        border: 2px dashed #d1d5db;
+    }
+
+    .recipe-actions {
+        padding-top: 20px;
+        border-top: 2px solid #e5e7eb;
+    }
+
+    .action-btn {
+        background: white;
+        border: 2px solid #e5e7eb;
+        border-radius: 10px;
+        padding: 14px 24px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        color: #374151;
+        font-weight: 600;
+        text-decoration: none;
+        font-size: 14px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .edit-btn:hover {
+        border-color: #3b82f6;
+        background: linear-gradient(135deg, #3b82f6, #2563eb);
+        color: white;
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
+    }
+
+    .resubmit-btn:hover:not(.disabled) {
+        border-color: #10b981;
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
+    }
+
+    .resubmit-btn.disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        border-color: #d1d5db;
+        color: #9ca3af;
+        background: #f9fafb;
+    }
+
+    .resubmit-btn.disabled:hover {
+        transform: none;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .resubmit-hint {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: #6b7280;
+        margin-top: 12px;
+        font-style: italic;
+        padding: 10px 15px;
+        background: #fffbeb;
+        border-radius: 8px;
+        border-left: 3px solid #f59e0b;
+    }
+
+    .decline-toast {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        padding: 16px 24px;
+        border-radius: 10px;
+        font-size: 14px;
+        font-weight: 500;
+        z-index: 9999;
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
+        max-width: 350px;
+    }
+
+    .decline-toast.show {
+        transform: translateX(0);
+    }
+
+    .decline-toast.error {
+        background: linear-gradient(135deg, #ef4444, #dc2626);
+        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
+    }
+
+    .fa-spinner {
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .modal-content {
+        border: none;
+        border-radius: 15px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    }
+
+    .modal-header {
+        background: linear-gradient(135deg, #fee2e2, #fecaca);
+        border-radius: 15px 15px 0 0;
+        padding: 20px 30px;
+    }
+
+    .modal-title {
+        font-weight: 700;
+        font-size: 20px;
+    }
+
+    .modal-body {
+        padding: 30px;
+        max-height: 80vh;
+        overflow-y: auto;
+    }
+
+    .modal-body::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .modal-body::-webkit-scrollbar-track {
+        background: #f1f5f9;
+        border-radius: 3px;
+    }
+
+    .modal-body::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 3px;
+    }
+
+    .modal-body::-webkit-scrollbar-thumb:hover {
+        background: #94a3b8;
+    }
+
+    @media (max-width: 768px) {
+        .recipe-hero {
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .recipe-image-container {
+            max-width: 100%;
+        }
+
+        .recipe-actions .d-flex {
+            flex-direction: column;
+            gap: 15px !important;
+        }
+
+        .action-btn {
+            justify-content: center;
+            width: 100%;
+            padding: 16px 20px;
+        }
+
+        .nutrition-grid {
+            grid-template-columns: 1fr;
+            gap: 10px;
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .feedback-content {
+            padding: 20px;
+        }
+
+        .admin-comment {
+            padding: 16px;
+        }
+
+        .decline-toast {
+            right: 10px;
+            left: 10px;
+            max-width: none;
+            transform: translateY(-100%);
+        }
+
+        .decline-toast.show {
+            transform: translateY(0);
+        }
+    }
+
+    @media (max-width: 576px) {
+        .recipe-title-details {
+            font-size: 20px;
+        }
+
+        .modal-dialog {
+            margin: 10px;
+        }
+
+        .instruction-item {
+            padding: 12px;
+        }
+
+        .instruction-number {
+            width: 24px;
+            height: 24px;
+            font-size: 12px;
+            margin-right: 12px;
+        }
+    }
+
+    .decline-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+    }
+
+    .decline-badge {
+        background: #ef4444;
+        color: white;
+        padding: 8px 16px;
+        border-radius: 20px;
+        font-weight: bold;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+    }
+
+    .decline-status {
+        margin: 15px 0;
+        padding: 12px;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 8px;
+    }
+
+    .status-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 4px 0;
+        font-size: 14px;
+        color: #374151;
+    }
+
+    .feedback-section {
+        margin: 20px 0;
+    }
+
+    .feedback-card {
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    .feedback-header {
+        background: #1e293b;
+        color: white;
+        padding: 15px 20px;
+    }
+
+    .feedback-header h4 {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 16px;
+    }
+
+    .feedback-content {
+        padding: 20px;
+    }
+
+    .admin-comment {
+        font-size: 15px;
+        line-height: 1.6;
+        color: #374151;
+        background: white;
+        padding: 16px;
+        border-radius: 8px;
+        border-left: 4px solid #ef4444;
+    }
+
+    .no-comment {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #6b7280;
+        font-style: italic;
+    }
+
+    .recipe-actions {
+        padding-top: 15px;
+        border-top: 1px solid #e5e7eb;
+    }
+
+    .action-btn {
+        background: none;
+        border: 2px solid #e5e7eb;
+        border-radius: 8px;
+        padding: 12px 20px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        color: #374151;
+        font-weight: 500;
+        text-decoration: none;
+    }
+
+    .edit-btn:hover {
+        border-color: #3b82f6;
+        background-color: #3b82f6;
+        color: white;
+        transform: translateY(-2px);
+    }
+
+    .resubmit-btn:hover:not(.disabled) {
+        border-color: #10b981;
+        background-color: #10b981;
+        color: white;
+        transform: translateY(-2px);
+    }
+
+    .resubmit-btn.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        border-color: #d1d5db;
+        color: #9ca3af;
+    }
+
+    .resubmit-hint {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px;
+        color: #6b7280;
+        margin-top: 8px;
+        font-style: italic;
+    }
+
+    .ingredient-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 8px 0;
+        border-bottom: 1px solid #f3f4f6;
+    }
+
+    .ingredient-bullet {
+        color: #10b981;
+        font-weight: bold;
+        margin-top: 2px;
+    }
+
+    .instruction-item {
+        display: flex;
+        align-items: flex-start;
+        background-color: #f8f9fa;
+        padding: 12px;
+        margin: 8px 0;
+        border-radius: 8px;
+        border-left: 4px solid #ef4444;
+    }
+
+    .instruction-number {
+        background-color: #ef4444;
+        color: white;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: bold;
+        margin-right: 12px;
+        flex-shrink: 0;
+    }
+
+    .instruction-text {
+        flex: 1;
+        line-height: 1.5;
+    }
+
+    .decline-toast {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: #10b981;
+        color: white;
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-size: 14px;
+        z-index: 9999;
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+    }
+
+    .decline-toast.show {
+        transform: translateX(0);
+    }
+
+    .decline-toast.error {
+        background: #ef4444;
+    }
+
+    @media (max-width: 768px) {
+        .recipe-actions .d-flex {
+            flex-direction: column;
+            gap: 12px !important;
+        }
+
+        .action-btn {
+            justify-content: center;
+            width: 100%;
+        }
+    }
Index: NutriMatch/wwwroot/css/_RecipeDetailsPartial.css
===================================================================
--- NutriMatch/wwwroot/css/_RecipeDetailsPartial.css	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/wwwroot/css/_RecipeDetailsPartial.css	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -4,4 +4,8 @@
         --nutri-light: #E8F5E8;
         --nutri-dark: #2E7D32;
+    }
+
+    #view-ingr-btn:hover {
+     color: white;
     }
 
@@ -308,4 +312,426 @@
     }
 
+    .recipe-rating-section {
+    margin: 15px 0;
+}
+
+.current-rating {
+    margin-bottom: 10px;
+}
+
+.rating-display {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 5px;
+}
+
+.rating-stars {
+    display: flex;
+    gap: 2px;
+}
+
+.rating-stars i {
+    font-size: 18px;
+    color: #ddd;
+    transition: color 0.2s ease;
+}
+
+.rating-stars i.filled {
+    color: #fbbf24;
+}
+
+.rating-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+}
+
+.rating-count {
+    font-size: 12px;
+    color: #6b7280;
+}
+
+.recipe-actions {
+    padding-top: 10px;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: space-between;
+}
+
+.rate-recipe {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.rate-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+}
+
+.rating-input {
+    display: flex;
+    gap: 3px;
+}
+
+.rating-star {
+    font-size: 20px;
+    color: #ddd;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.rating-star:hover {
+    color: #fbbf24;
+    transform: scale(1.1);
+}
+
+.rating-star.active {
+    color: #fbbf24;
+}
+
+.remove-rating-btn {
+    background: none;
+    border: none;
+    color: #ef4444;
+    font-size: 12px;
+    cursor: pointer;
+    padding: 5px 0;
+    transition: color 0.2s ease;
+}
+
+.remove-rating-btn:hover {
+    color: #dc2626;
+    text-decoration: underline;
+}
+
+.favorite-btn-details {
+    background: none;
+    border: 2px solid #e5e7eb;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #6b7280;
+}
+
+.favorite-btn-details:hover {
+    border-color: #ef4444;
+    color: #ef4444;
+    transform: scale(1.05);
+}
+
+.favorite-btn-details.favorited {
+    background-color: #ef4444;
+    border-color: #ef4444;
+    color: white;
+}
+
+.favorite-btn-details.favorited:hover {
+    background-color: #dc2626;
+    border-color: #dc2626;
+}
+
+.favorite-btn-details i {
+    font-size: 18px;
+    transition: transform 0.2s ease;
+}
+
+.favorite-btn-details:hover i {
+    transform: scale(1.1);
+}
+
+.rating-toast {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: #10b981;
+    color: white;
+    padding: 12px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    z-index: 9999;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+}
+
+.rating-toast.show {
+    transform: translateX(0);
+}
+
+.rating-toast.error {
+    background: #ef4444;
+}
+
+@media (max-width: 768px) {
+    .rating-display {
+        flex-wrap: wrap;
+        gap: 5px;
+    }
+    
+    .rate-recipe {
+        align-items: flex-start;
+    }
+}
+
+
+
+
+.admin-actions {
+    display: flex;
+    gap: 12px;
+    flex-direction: column;
+}
+
+.admin-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    min-width: 120px;
+}
+
+.approve-btn {
+    background: linear-gradient(135deg, #10b981, #059669);
+    color: white;
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.approve-btn:hover {
+    background: linear-gradient(135deg, #059669, #047857);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+}
+
+.approve-btn:active {
+    transform: translateY(0);
+}
+
+.decline-btn {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+    color: white;
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+.decline-btn:hover {
+    background: linear-gradient(135deg, #dc2626, #b91c1c);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
+}
+
+.decline-btn:active {
+    transform: translateY(0);
+}
+
+.admin-btn i {
+    font-size: 16px;
+}
+
+.admin-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.admin-btn.loading {
+    position: relative;
+    color: transparent;
+}
+
+.admin-btn.loading::after {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+}
+
+@keyframes spin {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+@media (min-width: 768px) {
+    .admin-actions {
+        flex-direction: row;
+    }
+}
+
+
+
+.admin-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 16px;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.admin-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 18px;
+    border: none;
+    border-radius: 25px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    outline: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.admin-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.admin-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.admin-btn i {
+    font-size: 14px;
+    line-height: 1;
+}
+
+.admin-btn span {
+    line-height: 1;
+}
+
+.approve-btn {
+    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    color: white;
+}
+
+.approve-btn:hover {
+    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
+}
+
+.approve-btn:focus {
+    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
+}
+
+.decline-btn {
+    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+    color: white;
+}
+
+.decline-btn:hover {
+    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
+}
+
+.decline-btn:focus {
+    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);
+}
+
+.admin-btn.subtle {
+    background: #f8f9fa;
+    color: #6c757d;
+    border: 1px solid #e9ecef;
+}
+
+.admin-btn.subtle:hover {
+    background: #e9ecef;
+    color: #495057;
+    border-color: #dee2e6;
+}
+
+.approve-btn.subtle {
+    color: #28a745;
+    border-color: #28a745;
+}
+
+.approve-btn.subtle:hover {
+    background: #28a745;
+    color: white;
+}
+
+.decline-btn.subtle {
+    color: #dc3545;
+    border-color: #dc3545;
+}
+
+.decline-btn.subtle:hover {
+    background: #dc3545;
+    color: white;
+}
+
+@media (max-width: 768px) {
+    .admin-actions {
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+    }
+    
+    .admin-btn {
+        width: 100%;
+        justify-content: center;
+        padding: 12px 18px;
+    }
+}
+
+.admin-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.admin-btn.loading {
+    position: relative;
+    color: transparent;
+}
+
+.admin-btn.loading::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -8px;
+    margin-left: -8px;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+
+
+
     
     
Index: NutriMatch/wwwroot/js/AdminIndex.js
===================================================================
--- NutriMatch/wwwroot/js/AdminIndex.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/js/AdminIndex.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,564 @@
+document.addEventListener("DOMContentLoaded", function () {
+  setupBulkActions();
+  setupSearchFunctionality();
+  setupSortingFunctionality();
+  updateDisplayCount();
+});
+
+function setupBulkActions() {
+  const selectAllCheckbox = document.getElementById("selectAll");
+  const recipeCheckboxes = document.querySelectorAll(".recipe-checkbox");
+  const bulkApproveBtn = document.getElementById("bulkApprove");
+
+  selectAllCheckbox.addEventListener("change", function () {
+    recipeCheckboxes.forEach((checkbox) => {
+      checkbox.checked = this.checked;
+      toggleRecipeSelection(checkbox);
+    });
+    updateBulkActionButtons();
+  });
+
+  recipeCheckboxes.forEach((checkbox) => {
+    checkbox.addEventListener("change", function () {
+      toggleRecipeSelection(this);
+      updateBulkActionButtons();
+      updateSelectAllState();
+    });
+  });
+
+  bulkApproveBtn.addEventListener("click", handleBulkApprove);
+}
+
+function toggleRecipeSelection(checkbox) {
+  const recipeCard = checkbox.closest(".recipe-card");
+  if (checkbox.checked) {
+    recipeCard.classList.add("selected");
+  } else {
+    recipeCard.classList.remove("selected");
+  }
+}
+
+function updateBulkActionButtons() {
+  const selectedCheckboxes = document.querySelectorAll(
+    ".recipe-checkbox:checked"
+  );
+  const bulkApproveBtn = document.getElementById("bulkApprove");
+  const bulkActionsSection = document.getElementById("bulkActionsSection");
+
+  const hasSelections = selectedCheckboxes.length > 0;
+  bulkApproveBtn.disabled = !hasSelections;
+
+  if (hasSelections) {
+    bulkActionsSection.classList.add("show");
+  } else {
+    bulkActionsSection.classList.remove("show");
+  }
+}
+
+function updateSelectAllState() {
+  const selectAllCheckbox = document.getElementById("selectAll");
+  const recipeCheckboxes = document.querySelectorAll(".recipe-checkbox");
+  const checkedBoxes = document.querySelectorAll(".recipe-checkbox:checked");
+
+  if (checkedBoxes.length === 0) {
+    selectAllCheckbox.indeterminate = false;
+    selectAllCheckbox.checked = false;
+  } else if (checkedBoxes.length === recipeCheckboxes.length) {
+    selectAllCheckbox.indeterminate = false;
+    selectAllCheckbox.checked = true;
+  } else {
+    selectAllCheckbox.indeterminate = true;
+  }
+}
+
+function approveRecipe(recipeId) {
+  showLoadingOverlay();
+
+  const token = document.querySelector(
+    'input[name="__RequestVerificationToken"]'
+  ).value;
+
+  fetch("/Admin/ApproveRecipe", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      RequestVerificationToken: token,
+    },
+    body: JSON.stringify({ recipeId: recipeId }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      hideLoadingOverlay();
+      if (data.success) {
+        showSuccess("Recipe approved successfully!");
+        removeRecipeCard(recipeId);
+        hideRecipeDetails();
+      } else {
+        showError(data.message || "Failed to approve recipe");
+      }
+    })
+    .catch((error) => {
+      hideLoadingOverlay();
+      console.error("Error:", error);
+      showError("An error occurred while approving the recipe");
+    });
+}
+
+function declineRecipe(recipeId) {
+  fetch(`/Admin/DeclineReasonModel/${recipeId}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to load decline modal");
+      }
+      return response.text();
+    })
+    .then((html) => {
+      const modalContainer = document.getElementById("declineModalContainer");
+      modalContainer.innerHTML = html;
+
+      const scripts = modalContainer.querySelectorAll("script");
+      scripts.forEach((script) => {
+        const newScript = document.createElement("script");
+        if (script.src) {
+          newScript.src = script.src;
+        } else {
+          newScript.textContent = script.textContent;
+        }
+        document.body.appendChild(newScript);
+        document.body.removeChild(newScript);
+      });
+
+      hideRecipeDetails();
+
+      const modalElement = modalContainer.querySelector("#recipeDeclineModal");
+      if (modalElement) {
+        const modal = new bootstrap.Modal(modalElement);
+        modal.show();
+      }
+    })
+    .catch((error) => {
+      console.error("Error loading decline modal:", error);
+      showError("Failed to load decline modal");
+    });
+}
+
+function cancelDecline(recipeId) {
+  const declineSection = document.getElementById(`declineReason_${recipeId}`);
+  const recipeCard = declineSection.closest(".recipe-card");
+
+  declineSection.style.display = "none";
+
+  const actionButtons = recipeCard.querySelectorAll(
+    ".admin-actions-buttons .btn"
+  );
+  actionButtons.forEach((btn) => {
+    btn.style.display = "";
+  });
+
+  document.getElementById(`declineSelect_${recipeId}`).value = "";
+  document.getElementById(`declineNotes_${recipeId}`).value = "";
+}
+
+function handleBulkApprove() {
+  const selectedRecipes = getSelectedRecipeIds();
+
+  if (selectedRecipes.length === 0) {
+    showError("No recipes selected");
+    return;
+  }
+
+  showLoadingOverlay();
+
+  const token = document.querySelector(
+    'input[name="__RequestVerificationToken"]'
+  ).value;
+
+  fetch("/Admin/BulkApproveRecipes", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      RequestVerificationToken: token,
+    },
+    body: JSON.stringify({ recipeIds: selectedRecipes }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      hideLoadingOverlay();
+
+      if (data.success) {
+        showSuccess(`${data.approvedCount} recipe(s) approved successfully!`);
+        selectedRecipes.forEach((recipeId) => removeRecipeCard(recipeId));
+      } else {
+        showError(data.message || "Failed to approve recipes");
+      }
+    })
+    .catch((error) => {
+      hideLoadingOverlay();
+      console.error("Error:", error);
+      showError("An error occurred during bulk approval");
+    });
+}
+
+function getSelectedRecipeIds() {
+  const selectedCheckboxes = document.querySelectorAll(
+    ".recipe-checkbox:checked"
+  );
+  return Array.from(selectedCheckboxes).map((checkbox) =>
+    parseInt(checkbox.dataset.recipeId)
+  );
+}
+
+function setupSearchFunctionality() {
+  const searchInput = document.getElementById("searchInput");
+  let searchTimeout;
+
+  searchInput.addEventListener("input", function () {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      filterRecipes();
+    }, 300);
+  });
+}
+
+function filterRecipes() {
+  const searchTerm = document.getElementById("searchInput").value.toLowerCase();
+  const recipeCards = document.querySelectorAll(".recipe-card");
+  let visibleCount = 0;
+
+  recipeCards.forEach((card) => {
+    const title = card.querySelector(".recipe-title").textContent.toLowerCase();
+    const author = card
+      .querySelector(".recipe-meta span")
+      .textContent.toLowerCase();
+
+    const isVisible = title.includes(searchTerm) || author.includes(searchTerm);
+    card.style.display = isVisible ? "block" : "none";
+
+    if (isVisible) visibleCount++;
+  });
+
+  updateDisplayCount(visibleCount);
+}
+
+function setupSortingFunctionality() {
+  const sortFilter = document.getElementById("sortFilter");
+  sortFilter.addEventListener("change", function () {
+    sortRecipes(this.value);
+  });
+}
+
+function sortRecipes(sortBy) {
+  const recipeGrid = document.getElementById("recipeGrid");
+  const recipeCards = Array.from(recipeGrid.querySelectorAll(".recipe-card"));
+
+  recipeCards.sort((a, b) => {
+    switch (sortBy) {
+      case "newest":
+        return parseInt(b.dataset.recipeId) - parseInt(a.dataset.recipeId);
+      case "oldest":
+        return parseInt(a.dataset.recipeId) - parseInt(b.dataset.recipeId);
+      case "author":
+        const authorA = a
+          .querySelector(".recipe-meta span")
+          .textContent.toLowerCase();
+        const authorB = b
+          .querySelector(".recipe-meta span")
+          .textContent.toLowerCase();
+        return authorA.localeCompare(authorB);
+      case "calories":
+        return parseInt(a.dataset.calories) - parseInt(b.dataset.calories);
+      default:
+        return 0;
+    }
+  });
+
+  recipeCards.forEach((card) => recipeGrid.appendChild(card));
+}
+
+function showRecipeDetails(recipeId, isAdmin = false, recipeControl = "") {
+  currentRecipeId = recipeId;
+  const params = new URLSearchParams({
+    isOwner: true,
+    recipeDetailsDisplayContorol: recipeControl,
+  });
+
+  fetch(`/Recipes/Details/${recipeId}?${params}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.text();
+    })
+    .then((html) => {
+      const modalContainer = document.getElementById("modalWindow");
+      modalContainer.innerHTML = html;
+
+      const existingScripts = document.querySelectorAll(
+        "script[data-recipe-modal]"
+      );
+      existingScripts.forEach((script) => script.remove());
+
+      const scripts = modalContainer.querySelectorAll("script");
+      scripts.forEach((script) => {
+        const newScript = document.createElement("script");
+        newScript.setAttribute("data-recipe-modal", "true");
+
+        if (script.src) {
+          newScript.src = script.src;
+        } else {
+          newScript.textContent = `
+            (function() {
+                ${script.textContent}
+            })();
+        `;
+        }
+        document.body.appendChild(newScript);
+        document.body.removeChild(newScript);
+      });
+
+      const modalElement = modalContainer.querySelector(".modal");
+      if (modalElement) {
+        const modal = new bootstrap.Modal(modalElement);
+        modal.show();
+
+        modalElement.addEventListener("hidden.bs.modal", function () {
+          modalContainer.innerHTML = "";
+          if (typeof clickedCard !== "undefined") {
+            clickedCard.classList.remove("loading");
+          }
+        });
+
+        modalElement.addEventListener("shown.bs.modal", function () {
+          if (typeof clickedCard !== "undefined") {
+            clickedCard.classList.remove("loading");
+          }
+        });
+      } else {
+        if (typeof clickedCard !== "undefined") {
+          clickedCard.classList.remove("loading");
+        }
+      }
+    })
+    .catch((err) => {
+      console.error("Failed to fetch recipe details", err);
+      showError("Failed to load recipe details. Please try again.");
+      if (typeof clickedCard !== "undefined") {
+        clickedCard.classList.remove("loading");
+      }
+    });
+}
+
+function removeRecipeCard(recipeId) {
+  const recipeCard = document.querySelector(`[data-recipe-id="${recipeId}"]`);
+  if (recipeCard) {
+    recipeCard.classList.add("removing");
+    setTimeout(() => {
+      recipeCard.remove();
+      updateDisplayCount();
+      updateBulkActionButtons();
+      updateSelectAllState();
+
+      if (document.querySelectorAll(".recipe-card").length === 0) {
+        location.reload();
+      }
+    }, 500);
+  }
+}
+
+function updateDisplayCount(count = null) {
+  const displayCountElement = document.getElementById("displayCount");
+  if (count === null) {
+    count = document.querySelectorAll(
+      '.recipe-card:not([style*="display: none"])'
+    ).length;
+  }
+  displayCountElement.textContent = count;
+}
+
+function showLoadingOverlay() {
+  document.getElementById("loadingOverlay").style.display = "flex";
+}
+
+function hideLoadingOverlay() {
+  document.getElementById("loadingOverlay").style.display = "none";
+}
+
+function createToast(message, type = "info") {
+  const toastContainer =
+    document.getElementById("toast-container") || createToastContainer();
+
+  const toastId = "toast-" + Date.now();
+  const toast = document.createElement("div");
+  toast.id = toastId;
+  toast.className = `toast align-items-center text-white bg-${type} border-0`;
+  toast.setAttribute("role", "alert");
+  toast.setAttribute("aria-live", "assertive");
+  toast.setAttribute("aria-atomic", "true");
+
+  const iconMap = {
+    success: "fas fa-check-circle",
+    danger: "fas fa-exclamation-circle",
+    warning: "fas fa-exclamation-triangle",
+    info: "fas fa-info-circle",
+  };
+
+  toast.innerHTML = `
+    <div class="d-flex">
+        <div class="toast-body">
+            <i class="${iconMap[type] || iconMap.info} me-2"></i>
+            ${message}
+        </div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="removeToast('${toastId}')"></button>
+    </div>
+`;
+
+  toastContainer.appendChild(toast);
+
+  toast.style.display = "block";
+  setTimeout(() => {
+    toast.classList.add("show");
+  }, 100);
+
+  setTimeout(() => {
+    removeToast(toastId);
+  }, 5000);
+}
+
+function removeToast(toastId) {
+  const toast = document.getElementById(toastId);
+  if (toast) {
+    toast.classList.remove("show");
+    setTimeout(() => {
+      if (toast.parentNode) {
+        toast.remove();
+      }
+    }, 300);
+  }
+}
+
+function createToastContainer() {
+  const container = document.createElement("div");
+  container.id = "toast-container";
+  container.className = "toast-container position-fixed top-0 end-0 p-3";
+  container.style.zIndex = "10000";
+  document.body.appendChild(container);
+  return container;
+}
+
+function showSuccess(message) {
+  createToast(message, "success");
+}
+
+function showError(message) {
+  createToast(message, "danger");
+}
+
+function showWarning(message) {
+  createToast(message, "warning");
+}
+
+function showInfo(message) {
+  createToast(message, "info");
+}
+
+function refreshPendingRecipes() {
+  showLoadingOverlay();
+  location.reload();
+}
+
+document.addEventListener("keydown", function (e) {
+  if (e.key === "Escape") {
+    closeModal();
+  }
+});
+
+console.log("Admin Panel initialized successfully");
+
+function hideRecipeDetails() {
+  const modalWindow = document.getElementById("modalWindow");
+  const recipeDetailsModal = modalWindow?.querySelector(".modal");
+  if (recipeDetailsModal) {
+    const modalInstance = bootstrap.Modal.getInstance(recipeDetailsModal);
+    if (modalInstance) {
+      modalInstance.hide();
+    }
+  }
+}
+
+let currentRecipeId = null;
+
+window.viewIngredientReview = async function (ingredientId) {
+  console.log("Global viewIngredientReview called with ID:", ingredientId);
+
+  const recipeModal = document.getElementById("recipeModal");
+  if (recipeModal) {
+    const recipeModalInstance = bootstrap.Modal.getInstance(recipeModal);
+    if (recipeModalInstance) {
+      recipeModalInstance.hide();
+    }
+  }
+
+  setTimeout(async () => {
+    const modal = document.getElementById("ingredientReviewModal");
+    const content = document.getElementById("ingredientReviewContent");
+
+    if (!modal || !content) {
+      console.error("Modal or content container not found");
+      alert("Modal components not found");
+      return;
+    }
+
+    try {
+      content.innerHTML = `
+        <div class="text-center p-4">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2">Loading ingredient details...</p>
+        </div>
+    `;
+
+      const bootstrapModal = new bootstrap.Modal(modal);
+      bootstrapModal.show();
+
+      const response = await fetch(
+        `/Admin/GetIngredientReview/${ingredientId}`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Requested-With": "XMLHttpRequest",
+          },
+        }
+      );
+
+      if (response.ok) {
+        const html = await response.text();
+        content.innerHTML = html;
+      } else {
+        content.innerHTML = `
+            <div class="alert alert-danger">
+                <h6>Error ${response.status}</h6>
+                <p>Failed to load ingredient details.</p>
+            </div>
+        `;
+      }
+    } catch (error) {
+      console.error("Error:", error);
+      content.innerHTML = `
+        <div class="alert alert-danger">
+            <h6>Connection Error</h6>
+            <p>${error.message}</p>
+        </div>
+    `;
+    }
+  }, 300);
+};
+
+function showRecipeModal() {
+  if (currentRecipeId) {
+    showRecipeDetails(currentRecipeId, true, "Buttons");
+  } else {
+    console.error("No recipe ID stored - cannot restore recipe modal");
+  }
+}
Index: NutriMatch/wwwroot/js/MyRecipes.js
===================================================================
--- NutriMatch/wwwroot/js/MyRecipes.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
+++ NutriMatch/wwwroot/js/MyRecipes.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -0,0 +1,111 @@
+function showRecipeDetails(recipeId, isOwner, recipeStatus) {
+  const clickedCard = event.currentTarget;
+  clickedCard.classList.add("loading");
+
+  const params = new URLSearchParams({
+    isOwner: isOwner,
+    recipeDetailsDisplayContorol: recipeStatus,
+  });
+
+  fetch(`/Recipes/Details/${recipeId}?${params}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.text();
+    })
+    .then((html) => {
+      const modalContainer = document.getElementById("modalWindow");
+      modalContainer.innerHTML = html;
+
+      const scripts = modalContainer.querySelectorAll("script");
+      scripts.forEach((script) => {
+        const newScript = document.createElement("script");
+        if (script.src) {
+          newScript.src = script.src;
+        } else {
+          newScript.textContent = script.textContent;
+        }
+        document.body.appendChild(newScript);
+        document.body.removeChild(newScript);
+      });
+
+      const modalElement = modalContainer.querySelector(".modal");
+      if (modalElement) {
+        const modal = new bootstrap.Modal(modalElement);
+        modal.show();
+
+        modalElement.addEventListener("hidden.bs.modal", function () {
+          modalContainer.innerHTML = "";
+          clickedCard.classList.remove("loading");
+        });
+
+        modalElement.addEventListener("shown.bs.modal", function () {
+          clickedCard.classList.remove("loading");
+        });
+      } else {
+        clickedCard.classList.remove("loading");
+      }
+    })
+    .catch((err) => {
+      console.error("Failed to fetch recipe details", err);
+      alert("Failed to load recipe details. Please try again.");
+      clickedCard.classList.remove("loading");
+    });
+}
+
+function openDeleteModal(recipeId) {
+  const deleteButton = event.target.closest("button");
+  deleteButton.classList.add("loading");
+
+  const recipeModalContainer = document.getElementById("modalWindow");
+  const recipeModalElement = recipeModalContainer.querySelector(".modal");
+  const savedRecipeHtml = recipeModalContainer.innerHTML;
+
+  let recipeModalWasOpen = false;
+  if (recipeModalElement && recipeModalElement.classList.contains("show")) {
+    const recipeModalInstance = bootstrap.Modal.getInstance(recipeModalElement);
+    if (recipeModalInstance) {
+      recipeModalInstance.hide();
+      recipeModalWasOpen = true;
+    }
+  }
+
+  fetch(`/Recipes/Delete/${recipeId}`)
+    .then((response) => response.text())
+    .then((html) => {
+      const deleteModalContainer = document.getElementById("modalWindowDelete");
+      deleteModalContainer.innerHTML = html;
+
+      const deleteModalElement = deleteModalContainer.querySelector(".modal");
+      if (deleteModalElement) {
+        const deleteModal = new bootstrap.Modal(deleteModalElement);
+        deleteModal.show();
+
+        deleteModalElement.addEventListener("hidden.bs.modal", function () {
+          deleteButton.classList.remove("loading");
+          deleteModalContainer.innerHTML = "";
+
+          if (recipeModalWasOpen && savedRecipeHtml.trim() !== "") {
+            recipeModalContainer.innerHTML = savedRecipeHtml;
+            const restoredModal = recipeModalContainer.querySelector(".modal");
+            if (restoredModal) {
+              const restoredInstance = new bootstrap.Modal(restoredModal);
+              restoredInstance.show();
+            }
+          }
+        });
+
+        deleteModalElement.addEventListener("shown.bs.modal", function () {
+          deleteButton.classList.remove("loading");
+        });
+      } else {
+        deleteButton.classList.remove("loading");
+      }
+    })
+    .catch((error) => {
+      console.error("Error loading delete modal:", error);
+      deleteButton.classList.remove("loading");
+      location.href = `/Recipes/Delete/${recipeId}`;
+    });
+}
Index: NutriMatch/wwwroot/js/RecipeCreate.js
===================================================================
--- NutriMatch/wwwroot/js/RecipeCreate.js	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/wwwroot/js/RecipeCreate.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,3 +1,2 @@
-
 let selectedIngredients = [];
 let selectedInstructions = [];
@@ -5,522 +4,663 @@
 let currentFocus = -1;
 let selectedIngredient = null;
-const ingredientSearch = document.getElementById('ingredientSearch');
-const ingredientDropdown = document.getElementById('ingredientDropdown');
-const ingredientsList = document.getElementById('ingredientsList');
-const hiddenIngredientsInput = document.getElementById('selectedIngredients');
-const addButton = document.getElementById('addIngredientButton');
-const qtyInput = document.getElementById('ingredientQuantity');
-const unitSelect = document.getElementById('ingredientUnit');
-const instructionInput = document.getElementById('instructionInput');
-const addInstructionButton = document.getElementById('addInstructionButton');
-const instructionsList = document.getElementById('instructionsList');
-const hiddenInstructionsInput = document.getElementById('selectedInstructions');
-const fileUploadArea = document.getElementById('fileUploadArea');
-const fileInput = document.getElementById('RecipeImage');
-const imagePreview = document.getElementById('imagePreview');
-const addNewIngredientBtn = document.getElementById('addNewIngredientBtn');
-const addIngredientModal = document.getElementById('addIngredientModal');
-const addIngredientForm = document.getElementById('addIngredientForm');
-const closeModal = document.getElementById('closeModal');
-const cancelAddIngredient = document.getElementById('cancelAddIngredient');
-let lastSearchQuery = '';
-document.addEventListener('DOMContentLoaded', function() {
-     initializeSearchFunctionality();
-    initializeInstructionsFunctionality();
-    initializeFileUpload();
-    initializeModalFunctionality();
+
+const ingredientSearch = document.getElementById("ingredientSearch");
+const ingredientDropdown = document.getElementById("ingredientDropdown");
+const ingredientsList = document.getElementById("ingredientsList");
+const hiddenIngredientsInput = document.getElementById("selectedIngredients");
+const addButton = document.getElementById("addIngredientButton");
+const qtyInput = document.getElementById("ingredientQuantity");
+const unitSelect = document.getElementById("ingredientUnit");
+
+const instructionInput = document.getElementById("instructionInput");
+const addInstructionButton = document.getElementById("addInstructionButton");
+const instructionsList = document.getElementById("instructionsList");
+const hiddenInstructionsInput = document.getElementById("selectedInstructions");
+
+const fileUploadArea = document.getElementById("fileUploadArea");
+const fileInput = document.getElementById("RecipeImage");
+const imagePreview = document.getElementById("imagePreview");
+
+const addNewIngredientBtn = document.getElementById("addNewIngredientBtn");
+const addIngredientModal = document.getElementById("addIngredientModal");
+const addIngredientForm = document.getElementById("addIngredientForm");
+const closeModal = document.getElementById("closeModal");
+const cancelAddIngredient = document.getElementById("cancelAddIngredient");
+let lastSearchQuery = "";
+
+document.addEventListener("DOMContentLoaded", function () {
+  initializeSearchFunctionality();
+  initializeInstructionsFunctionality();
+  initializeFileUpload();
+  initializeModalFunctionality();
 });
-function initializeFileUpload(){
-    if(fileUploadArea)
-    {
-        fileUploadArea.addEventListener('click', () => fileInput.click());
-        fileUploadArea.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            fileUploadArea.classList.add('dragover');
-        });
-        fileUploadArea.addEventListener('dragleave', () => {
-            fileUploadArea.classList.remove('dragover');
-        });
-        fileUploadArea.addEventListener('drop', (e) => {
-            e.preventDefault();
-            fileUploadArea.classList.remove('dragover');
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                handleFileSelect(files[0]);
-                setFileToInput(files[0]);
-            }
-        });
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files && e.target.files[0]) {
-                handleFileSelect(e.target.files[0]);
-            }
-        });
-    }
-}
+
+function initializeFileUpload() {
+  if (fileUploadArea) {
+    fileUploadArea.addEventListener("click", () => fileInput.click());
+
+    fileUploadArea.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      fileUploadArea.classList.add("dragover");
+    });
+
+    fileUploadArea.addEventListener("dragleave", () => {
+      fileUploadArea.classList.remove("dragover");
+    });
+
+    fileUploadArea.addEventListener("drop", (e) => {
+      e.preventDefault();
+      fileUploadArea.classList.remove("dragover");
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        handleFileSelect(files[0]);
+        setFileToInput(files[0]);
+      }
+    });
+
+    fileInput.addEventListener("change", (e) => {
+      if (e.target.files && e.target.files[0]) {
+        handleFileSelect(e.target.files[0]);
+      }
+    });
+  }
+}
+
 function setFileToInput(file) {
-    const dataTransfer = new DataTransfer();
-    dataTransfer.items.add(file);
-    fileInput.files = dataTransfer.files;
-}
+  const dataTransfer = new DataTransfer();
+  dataTransfer.items.add(file);
+
+  fileInput.files = dataTransfer.files;
+}
+
 function initializeSearchFunctionality() {
-    if (addButton) {
-        addButton.addEventListener('click', function() {
-            if (selectedIngredient && qtyInput && unitSelect) {
-                const qty = parseFloat(qtyInput.value);
-                const unit = unitSelect.value;
-                if (qty > 0 && unit && selectedIngredient.name) {
-                    addIngredient(selectedIngredient, qty, unit);
-                } else {
-                    alert('Please enter a valid quantity and select a unit.');
-                }
-            } else {
-                alert('Please search and select an ingredient first.');
-            }
-        });
-    }
-    if (ingredientSearch) {
-        ingredientSearch.addEventListener('input', function() {
-        const query = this.value.trim();
-        currentFocus = -1;
-        selectedIngredient = null; 
-        if (query === '') {
-            hideDropdown(ingredientDropdown);
-            if (addNewIngredientBtn) {
-                addNewIngredientBtn.style.display = 'none';
-            }
-            return;
+  if (addButton) {
+    addButton.addEventListener("click", function () {
+      if (selectedIngredient && qtyInput && unitSelect) {
+        const qty = parseFloat(qtyInput.value);
+        const unit = unitSelect.value;
+
+        if (qty > 0 && unit && selectedIngredient.name) {
+          addIngredient(selectedIngredient, qty, unit);
+        } else {
+          alert("Please enter a valid quantity and select a unit.");
         }
-        clearTimeout(searchTimeout);
-        searchTimeout = setTimeout(() => {
-            searchIngredients(query);
-        }, 300);
-    });
-        ingredientSearch.addEventListener('keydown', function(e) {
-            handleKeyNavigation(e, ingredientDropdown);
-        });
-        ingredientSearch.addEventListener('focus', function() {
-            if (this.value.trim() !== '') {
-                searchIngredients(this.value.trim());
-            }
-        });
-    }
-    document.addEventListener('click', function(e) {
-        if (!e.target.closest('.search-container')) {
-            hideDropdown(ingredientDropdown);
-        }
-    });
-}
-function initializeInstructionsFunctionality() {
-    if (addInstructionButton) {
-        addInstructionButton.addEventListener('click', function() {
-            addInstruction();
-        });
-    }
-    if (instructionInput) {
-        instructionInput.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                addInstruction();
-            }
-        });
-    }
-}
-async function searchIngredients(query) {
-    if (!ingredientDropdown) return;
-    try {
-        ingredientDropdown.innerHTML = '<div class="loading">Loading...</div>';
-        showDropdown(ingredientDropdown);
-        const response = await fetch(`/Recipes/getSuggestions?query=${encodeURIComponent(query)}`, {
-            method: 'GET',
-        });
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const suggestions = await response.json();
-        displaySuggestions(suggestions, query);
-    } catch (error) {
-        console.error('Error fetching suggestions:', error);
-        ingredientDropdown.innerHTML = '<div class="no-results">Error loading suggestions. Please try again.</div>';
-        showDropdown(ingredientDropdown);
-    }
-}
-function displaySuggestions(suggestions, query) {
-    if (!ingredientDropdown) return;
-    lastSearchQuery = query;
-    ingredientDropdown.innerHTML = '';
-    if (!suggestions || suggestions.length === 0) {
-        ingredientDropdown.innerHTML = '<div class="no-results">No results found</div>';
-        showDropdown(ingredientDropdown);
+      } else {
+        alert("Please search and select an ingredient first.");
+      }
+    });
+  }
+
+  if (ingredientSearch) {
+    ingredientSearch.addEventListener("input", function () {
+      const query = this.value.trim();
+      currentFocus = -1;
+      selectedIngredient = null;
+
+      if (query === "") {
+        hideDropdown(ingredientDropdown);
         if (addNewIngredientBtn) {
-            addNewIngredientBtn.style.display = 'block';
-            console.log('Showing button for query:', query);
+          addNewIngredientBtn.style.display = "none";
         }
         return;
-    }
+      }
+
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => {
+        searchIngredients(query);
+      }, 300);
+    });
+
+    ingredientSearch.addEventListener("keydown", function (e) {
+      handleKeyNavigation(e, ingredientDropdown);
+    });
+
+    ingredientSearch.addEventListener("focus", function () {
+      if (this.value.trim() !== "") {
+        searchIngredients(this.value.trim());
+      }
+    });
+  }
+
+  document.addEventListener("click", function (e) {
+    if (!e.target.closest(".search-container")) {
+      hideDropdown(ingredientDropdown);
+    }
+  });
+}
+
+function initializeInstructionsFunctionality() {
+  if (addInstructionButton) {
+    addInstructionButton.addEventListener("click", function () {
+      addInstruction();
+    });
+  }
+
+  if (instructionInput) {
+    instructionInput.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addInstruction();
+      }
+    });
+  }
+}
+
+async function searchIngredients(query) {
+  if (!ingredientDropdown) return;
+
+  try {
+    ingredientDropdown.innerHTML = '<div class="loading">Loading...</div>';
+    showDropdown(ingredientDropdown);
+
+    const response = await fetch(
+      `/Recipes/getSuggestions?query=${encodeURIComponent(query)}`,
+      {
+        method: "GET",
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const suggestions = await response.json();
+    displaySuggestions(suggestions, query);
+  } catch (error) {
+    console.error("Error fetching suggestions:", error);
+    ingredientDropdown.innerHTML =
+      '<div class="no-results">Error loading suggestions. Please try again.</div>';
+    showDropdown(ingredientDropdown);
+  }
+}
+
+function displaySuggestions(suggestions, query) {
+  if (!ingredientDropdown) return;
+
+  lastSearchQuery = query;
+  ingredientDropdown.innerHTML = "";
+
+  if (!suggestions || suggestions.length === 0) {
+    ingredientDropdown.innerHTML =
+      '<div class="no-results">No results found</div>';
+    showDropdown(ingredientDropdown);
+
     if (addNewIngredientBtn) {
-        addNewIngredientBtn.style.display = 'none';
-    }
-    suggestions.forEach((suggestion, index) => {
-        const item = document.createElement('div');
-        item.className = 'dropdown-item';
-        item.setAttribute('data-index', index);
-        const name = suggestion.name;
-        const id = suggestion.id;
-        const regex = new RegExp(`(${query})`, 'gi');
-        const highlightedText = name.replace(regex, '<strong>$1</strong>');
-        item.innerHTML = highlightedText;
-        item.addEventListener('click', function() {
-            selectedIngredient = {
-                id: id,
-                name: name
-            };
-            ingredientSearch.value = name;
-            hideDropdown(ingredientDropdown);
-        });
-        ingredientDropdown.appendChild(item);
-    });
-    showDropdown(ingredientDropdown);
-}
+      addNewIngredientBtn.style.display = "block";
+      console.log("Showing button for query:", query);
+    }
+    return;
+  }
+
+  if (addNewIngredientBtn) {
+    addNewIngredientBtn.style.display = "none";
+  }
+
+  suggestions.forEach((suggestion, index) => {
+    const item = document.createElement("div");
+    item.className = "dropdown-item";
+    item.setAttribute("data-index", index);
+
+    const name = suggestion.name;
+    const id = suggestion.id;
+
+    const regex = new RegExp(`(${query})`, "gi");
+    const highlightedText = name.replace(regex, "<strong>$1</strong>");
+    item.innerHTML = highlightedText;
+
+    item.addEventListener("click", function () {
+      selectedIngredient = {
+        id: id,
+        name: name,
+      };
+      ingredientSearch.value = name;
+      hideDropdown(ingredientDropdown);
+    });
+
+    ingredientDropdown.appendChild(item);
+  });
+
+  showDropdown(ingredientDropdown);
+}
+
 function handleKeyNavigation(e, dropdownElement) {
-    if (!dropdownElement) return;
-    const items = dropdownElement.querySelectorAll('.dropdown-item:not(.no-results):not(.loading)');
-    switch(e.key) {
-        case 'ArrowDown':
-            e.preventDefault();
-            currentFocus++;
-            if (currentFocus >= items.length) currentFocus = 0;
-            setActive(items);
-            break;
-        case 'ArrowUp':
-            e.preventDefault();
-            currentFocus--;
-            if (currentFocus < 0) currentFocus = items.length - 1;
-            setActive(items);
-            break;
-        case 'Enter':
-            e.preventDefault();
-            if (currentFocus > -1 && items[currentFocus]) {
-                items[currentFocus].click();
-            }
-            break;
-        case 'Escape':
-            hideDropdown(dropdownElement);
-            e.target.blur();
-            break;
-    }
-}
+  if (!dropdownElement) return;
+
+  const items = dropdownElement.querySelectorAll(
+    ".dropdown-item:not(.no-results):not(.loading)"
+  );
+
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      currentFocus++;
+      if (currentFocus >= items.length) currentFocus = 0;
+      setActive(items);
+      break;
+
+    case "ArrowUp":
+      e.preventDefault();
+      currentFocus--;
+      if (currentFocus < 0) currentFocus = items.length - 1;
+      setActive(items);
+      break;
+
+    case "Enter":
+      e.preventDefault();
+      if (currentFocus > -1 && items[currentFocus]) {
+        items[currentFocus].click();
+      }
+      break;
+
+    case "Escape":
+      hideDropdown(dropdownElement);
+      e.target.blur();
+      break;
+  }
+}
+
 function setActive(items) {
-    items.forEach(item => item.classList.remove('highlighted'));
-    if (currentFocus >= 0 && currentFocus < items.length) {
-        items[currentFocus].classList.add('highlighted');
-        items[currentFocus].scrollIntoView({ block: 'nearest' });
-    }
-}
+  items.forEach((item) => item.classList.remove("highlighted"));
+
+  if (currentFocus >= 0 && currentFocus < items.length) {
+    items[currentFocus].classList.add("highlighted");
+    items[currentFocus].scrollIntoView({ block: "nearest" });
+  }
+}
+
 function addIngredient(ingredient, quantity, unit) {
-    if (!ingredient || !ingredient.name) {
-        console.error('Invalid ingredient data');
-        return;
-    }
-    const existingIngredient = selectedIngredients.find(item => item.Id === ingredient.id);
-    if (existingIngredient) {
-        alert('This ingredient is already added to the recipe.');
-        return;
-    }
-    const newIngredient = {
-        Id: ingredient.id,
-        Name: ingredient.name,
-        Quantity: quantity,
-        Unit: unit
-    };
-    selectedIngredients.push(newIngredient);
-    updateIngredientsDisplay();
-    updateIngredientsInput();
-    if (ingredientSearch) ingredientSearch.value = '';
-    if (qtyInput) qtyInput.value = '';
-    if (unitSelect) unitSelect.value = '';
-    selectedIngredient = null;
-    hideDropdown(ingredientDropdown);
-    currentFocus = -1;
-}
+  if (!ingredient || !ingredient.name) {
+    console.error("Invalid ingredient data");
+    return;
+  }
+
+  const existingIngredient = selectedIngredients.find(
+    (item) => item.Id === ingredient.id
+  );
+
+  if (existingIngredient) {
+    alert("This ingredient is already added to the recipe.");
+    return;
+  }
+
+  const newIngredient = {
+    Id: ingredient.id,
+    Name: ingredient.name,
+    Quantity: quantity,
+    Unit: unit,
+  };
+
+  selectedIngredients.push(newIngredient);
+  updateIngredientsDisplay();
+  updateIngredientsInput();
+
+  if (ingredientSearch) ingredientSearch.value = "";
+  if (qtyInput) qtyInput.value = "";
+  if (unitSelect) unitSelect.value = "";
+
+  selectedIngredient = null;
+  hideDropdown(ingredientDropdown);
+  currentFocus = -1;
+}
+
 function removeIngredient(ingredientName) {
-    selectedIngredients = selectedIngredients.filter(item => item.Name !== ingredientName);
-    updateIngredientsDisplay();
-    updateIngredientsInput();
-}
+  selectedIngredients = selectedIngredients.filter(
+    (item) => item.Name !== ingredientName
+  );
+  updateIngredientsDisplay();
+  updateIngredientsInput();
+}
+
 function addInstruction() {
-    if (!instructionInput) return;
-    const instruction = instructionInput.value.trim();
-    if (instruction === '') {
-        alert('Please enter an instruction.');
-        return;
-    }
-    if (selectedInstructions.includes(instruction)) {
-        alert('This instruction is already added.');
-        return;
-    }
-    selectedInstructions.push(instruction);
-    updateInstructionsDisplay();
-    updateInstructionsInput();
-    instructionInput.value = '';
-}
+  if (!instructionInput) return;
+
+  const instruction = instructionInput.value.trim();
+
+  if (instruction === "") {
+    alert("Please enter an instruction.");
+    return;
+  }
+
+  if (selectedInstructions.includes(instruction)) {
+    alert("This instruction is already added.");
+    return;
+  }
+
+  selectedInstructions.push(instruction);
+  updateInstructionsDisplay();
+  updateInstructionsInput();
+
+  instructionInput.value = "";
+}
+
 function removeInstruction(instructionIndex) {
-    selectedInstructions.splice(instructionIndex, 1);
-    updateInstructionsDisplay();
-    updateInstructionsInput();
-}
+  selectedInstructions.splice(instructionIndex, 1);
+  updateInstructionsDisplay();
+  updateInstructionsInput();
+}
+
 function updateIngredientsDisplay() {
-    if (!ingredientsList) return;
-    if (selectedIngredients.length === 0) {
-        ingredientsList.innerHTML = '<small class="text-muted">Selected ingredients will appear here</small>';
-    } else {
-        ingredientsList.innerHTML = selectedIngredients.map(ingredient => 
-            `<span class="ingredient-tag">
+  if (!ingredientsList) return;
+
+  if (selectedIngredients.length === 0) {
+    ingredientsList.innerHTML =
+      '<small class="text-muted">Selected ingredients will appear here</small>';
+  } else {
+    ingredientsList.innerHTML = selectedIngredients
+      .map(
+        (ingredient) =>
+          `<span class="ingredient-tag">
                 ${ingredient.Quantity} ${ingredient.Unit} of ${ingredient.Name}
                 <span class="remove" onclick="removeIngredient('${ingredient.Name}')" 
                     title="Remove ingredient">&times;</span>
             </span>`
-        ).join('');
-    }
-}
+      )
+      .join("");
+  }
+}
+
 function updateInstructionsDisplay() {
-    if (!instructionsList) return;
-    if (selectedInstructions.length === 0) {
-        instructionsList.innerHTML = '<small class="text-muted">Added instructions will appear here</small>';
-    } else {
-        instructionsList.innerHTML = selectedInstructions.map((instruction, index) => 
-            `<div class="instruction-item">
+  if (!instructionsList) return;
+
+  if (selectedInstructions.length === 0) {
+    instructionsList.innerHTML =
+      '<small class="text-muted">Added instructions will appear here</small>';
+  } else {
+    instructionsList.innerHTML = selectedInstructions
+      .map(
+        (instruction, index) =>
+          `<div class="instruction-item">
                 <span class="instruction-number">${index + 1}</span>
                 <span class="instruction-text">${instruction}</span>
                 <span class="remove" onclick="removeInstruction(${index})" style="font-size: 18px;" title="Remove instruction">&times;</span>
             </div>`
-        ).join('');
-    }
-}
+      )
+      .join("");
+  }
+}
+
 function updateIngredientsInput() {
-    if (hiddenIngredientsInput) {
-        hiddenIngredientsInput.value = JSON.stringify(selectedIngredients);
-    }
-}
+  if (hiddenIngredientsInput) {
+    hiddenIngredientsInput.value = JSON.stringify(selectedIngredients);
+  }
+}
+
 function updateInstructionsInput() {
-    if (hiddenInstructionsInput) {
-        hiddenInstructionsInput.value = JSON.stringify(selectedInstructions);
-    }
-}
+  if (hiddenInstructionsInput) {
+    hiddenInstructionsInput.value = JSON.stringify(selectedInstructions);
+  }
+}
+
 function showDropdown(dropdownElement) {
-    if (dropdownElement) {
-        dropdownElement.style.display = 'block';
-    }
-}
+  if (dropdownElement) {
+    dropdownElement.style.display = "block";
+  }
+}
+
 function hideDropdown(dropdownElement) {
-    if (dropdownElement) {
-        dropdownElement.style.display = 'none';
-    }
-    if (addNewIngredientBtn) {
-        addNewIngredientBtn.style.display = 'none';
-    }
-    currentFocus = -1;
-}
+  if (dropdownElement) {
+    dropdownElement.style.display = "none";
+  }
+  if (addNewIngredientBtn) {
+    addNewIngredientBtn.style.display = "none";
+  }
+  currentFocus = -1;
+}
+
 function handleFileSelect(file) {
-    if (file.type.startsWith('image/')) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            imagePreview.innerHTML = `
+  if (file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      imagePreview.innerHTML = `
                 <img id="image-preview" src="${e.target.result}" alt="Recipe preview">
                 <p style="margin-top: 0.5rem; color: #4CAF50; font-weight: 500;">✓ Image uploaded successfully</p>
             `;
-        };
-        reader.readAsDataURL(file);
-    }
-}
+    };
+    reader.readAsDataURL(file);
+  }
+}
+
 function validateInstructions() {
-    const instructionsContainer = document.getElementById('instructionsList');
-    const instructionsInput = document.getElementById('selectedInstructions');
-    const hasInstructions = instructionsInput.value && 
-                           instructionsInput.value !== '[]' && 
-                           instructionsInput.value.trim() !== '';
-    if (!hasInstructions) {
-        instructionsContainer.innerHTML = '<div class="items-empty error">Please add at least one instruction step</div>';
-        alert('Please fill in the instructions');
-        return false;
-    }
-    return true;
-}
-document.querySelector('form').addEventListener('submit', function(e) {
-    if (!validateInstructions()) {
-        e.preventDefault();
-        return false;
-    }
+  const instructionsContainer = document.getElementById("instructionsList");
+  const instructionsInput = document.getElementById("selectedInstructions");
+  const hasInstructions =
+    instructionsInput.value &&
+    instructionsInput.value !== "[]" &&
+    instructionsInput.value.trim() !== "";
+
+  if (!hasInstructions) {
+    instructionsContainer.innerHTML =
+      '<div class="items-empty error">Please add at least one instruction step</div>';
+    alert("Please fill in the instructions");
+    return false;
+  }
+  return true;
+}
+
+document.querySelector("form").addEventListener("submit", function (e) {
+  if (!validateInstructions()) {
+    e.preventDefault();
+    return false;
+  }
 });
+
 function initializeModalFunctionality() {
-    console.log('Initializing modal functionality');
-    const addNewIngredientBtn = document.getElementById('addNewIngredientBtn');
-    const addIngredientModal = document.getElementById('addIngredientModal');
-    const addIngredientForm = document.getElementById('addIngredientForm');
-    const closeModal = document.getElementById('closeModal');
-    const cancelAddIngredient = document.getElementById('cancelAddIngredient');
-    if (addNewIngredientBtn) {
-    addNewIngredientBtn.addEventListener('click', function(e) {
-        e.preventDefault();
-        const qty = qtyInput ? parseFloat(qtyInput.value) : 0;
-        const unit = unitSelect ? unitSelect.value : '';
-        if (!qty || qty <= 0 || !unit) {
-            showValidationMessage('Please enter a valid quantity and select a unit before adding a new ingredient.');
-            return;
-        }
-        showAddIngredientModal(lastSearchQuery);
-    });
-}
-    if (closeModal) {
-        closeModal.addEventListener('click', hideAddIngredientModal);
-    }
-    if (cancelAddIngredient) {
-        cancelAddIngredient.addEventListener('click', function(e) {
-            e.preventDefault();
-            hideAddIngredientModal();
-        });
-    }
-    if (addIngredientModal) {
-        addIngredientModal.addEventListener('click', function(e) {
-            if (e.target === addIngredientModal) {
-                hideAddIngredientModal();
-            }
-        });
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape' && addIngredientModal.style.display === 'flex') {
-                hideAddIngredientModal();
-            }
-        });
-    }
-    if (addIngredientForm) {
-        addIngredientForm.addEventListener('submit', handleAddNewIngredient);
-    }
-}
-function showAddIngredientModal(ingredientName = '') {
-    console.log('showAddIngredientModal called with:', ingredientName);
-    const addIngredientModal = document.getElementById('addIngredientModal');
-    if (addIngredientModal) {
-        const nameInput = document.getElementById('newIngredientName');
-        if (nameInput) {
-            nameInput.value = ingredientName;
-        }
-        addIngredientModal.style.display = 'flex';
-        addIngredientModal.classList.add('show');
-        setTimeout(() => {
-            if (nameInput) {
-                nameInput.focus();
-                nameInput.select();
-            }
-        }, 100);
-        hideDropdown(ingredientDropdown);
-        console.log('Modal should be visible now');
-    } else {
-        console.log('Modal element not found!');
-    }
-}
+  console.log("Initializing modal functionality");
+
+  const addNewIngredientBtn = document.getElementById("addNewIngredientBtn");
+  const addIngredientModal = document.getElementById("addIngredientModal");
+  const addIngredientForm = document.getElementById("addIngredientForm");
+  const closeModal = document.getElementById("closeModal");
+  const cancelAddIngredient = document.getElementById("cancelAddIngredient");
+
+  if (addNewIngredientBtn) {
+    addNewIngredientBtn.addEventListener("click", function (e) {
+      e.preventDefault();
+
+      const qty = qtyInput ? parseFloat(qtyInput.value) : 0;
+      const unit = unitSelect ? unitSelect.value : "";
+
+      if (!qty || qty <= 0 || !unit) {
+        showValidationMessage(
+          "Please enter a valid quantity and select a unit before adding a new ingredient."
+        );
+        return;
+      }
+
+      showAddIngredientModal(lastSearchQuery);
+    });
+  }
+
+  if (closeModal) {
+    closeModal.addEventListener("click", hideAddIngredientModal);
+  }
+
+  if (cancelAddIngredient) {
+    cancelAddIngredient.addEventListener("click", function (e) {
+      e.preventDefault();
+      hideAddIngredientModal();
+    });
+  }
+
+  if (addIngredientModal) {
+    addIngredientModal.addEventListener("click", function (e) {
+      if (e.target === addIngredientModal) {
+        hideAddIngredientModal();
+      }
+    });
+
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && addIngredientModal.style.display === "flex") {
+        hideAddIngredientModal();
+      }
+    });
+  }
+
+  if (addIngredientForm) {
+    addIngredientForm.addEventListener("submit", handleAddNewIngredient);
+  }
+}
+
+function showAddIngredientModal(ingredientName = "") {
+  const addIngredientModal = document.getElementById("addIngredientModal");
+
+  if (addIngredientModal) {
+    const nameInput = document.getElementById("newIngredientName");
+    if (nameInput) {
+      nameInput.value = ingredientName;
+    }
+
+    addIngredientModal.style.display = "flex";
+    addIngredientModal.classList.add("show");
+
+    setTimeout(() => {
+      if (nameInput) {
+        nameInput.focus();
+        nameInput.select();
+      }
+    }, 100);
+
+    hideDropdown(ingredientDropdown);
+  }
+}
+
 function hideAddIngredientModal() {
-    const addIngredientModal = document.getElementById('addIngredientModal');
-    if (addIngredientModal) {
-        addIngredientModal.classList.remove('show');
-        setTimeout(() => {
-            addIngredientModal.style.display = 'none';
-        }, 300);
-        const form = document.getElementById('addIngredientForm');
-        if (form) {
-            form.reset();
-            const submitBtn = form.querySelector('button[type="submit"]');
-            if (submitBtn) {
-                submitBtn.disabled = false;
-                submitBtn.classList.remove('loading');
-            }
-        }
-    }
-}
+  const addIngredientModal = document.getElementById("addIngredientModal");
+
+  if (addIngredientModal) {
+    addIngredientModal.classList.remove("show");
+
+    setTimeout(() => {
+      addIngredientModal.style.display = "none";
+    }, 300);
+
+    const form = document.getElementById("addIngredientForm");
+    if (form) {
+      form.reset();
+      const submitBtn = form.querySelector('button[type="submit"]');
+      if (submitBtn) {
+        submitBtn.disabled = false;
+        submitBtn.classList.remove("loading");
+      }
+    }
+  }
+}
+
 async function handleAddNewIngredient(e) {
-    e.preventDefault();
-    const form = e.target;
-    const submitBtn = form.querySelector('button[type="submit"]');
+  e.preventDefault();
+
+  const form = e.target;
+  const submitBtn = form.querySelector('button[type="submit"]');
+
+  if (submitBtn) {
+    submitBtn.disabled = true;
+    submitBtn.classList.add("loading");
+  }
+
+  if (!document.getElementById("newIngredientName").value.trim()) {
+    alert("Please enter an ingredient name");
     if (submitBtn) {
-        submitBtn.disabled = true;
-        submitBtn.classList.add('loading');
-    }
-    if (!document.getElementById('newIngredientName').value.trim()) {
-        alert('Please enter an ingredient name');
-        if (submitBtn) {
-            submitBtn.disabled = false;
-            submitBtn.classList.remove('loading');
-        }
-        return;
-    }
-    try {
-        let token = document.querySelector('input[name="__RequestVerificationToken"]');
-        if (!token) {
-            token = document.querySelector('input[name="RequestVerificationToken"]');
-        }
-        if (!token) {
-            token = form.querySelector('input[name="__RequestVerificationToken"]');
-        }
-        const tokenValue = token ? token.value : '';
-        const response = await fetch('/Recipes/AddIngredient', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'RequestVerificationToken': tokenValue
-            },
-            body: JSON.stringify({
-                Name: document.getElementById('newIngredientName').value.trim(),
-                Calories: parseFloat(document.getElementById('newIngredientCalories').value) || 0.0,
-                Protein: parseFloat(document.getElementById('newIngredientProtein').value) || 0.0,
-                Carbs: parseFloat(document.getElementById('newIngredientCarbs').value) || 0.0,
-                Fat: parseFloat(document.getElementById('newIngredientFat').value) || 0.0
-            })
-        });
-        if (!response.ok) {
-            const errorText = await response.text();
-            console.error('Server response:', errorText);
-            throw new Error(errorText || `HTTP error! status: ${response.status}`);
-        }
-        const newIngredient = await response.json();
-        selectedIngredient = {
-            id: newIngredient.id,
-            name: newIngredient.name
-        };
-        const ingredientSearch = document.getElementById('ingredientSearch');
-        if (ingredientSearch) {
-            ingredientSearch.value = newIngredient.name;
-        }
-        hideAddIngredientModal();
-        const qtyInput = document.getElementById('ingredientQuantity');
-        const unitSelect = document.getElementById('ingredientUnit');
-        if (qtyInput && unitSelect && qtyInput.value && unitSelect.value) {
-            const qty = parseFloat(qtyInput.value);
-            const unit = unitSelect.value;
-            if (qty > 0) {
-                addIngredient(selectedIngredient, qty, unit);
-            }
-        }
-        showSuccessMessage('Ingredient added successfully!');
-        hideDropdown(ingredientDropdown);
-    } catch (error) {
-        console.error('Error adding ingredient:', error);
-        let errorMessage = 'Error adding ingredient. Please try again.';
-        if (error.message.includes('already exists')) {
-            errorMessage = 'An ingredient with this name already exists.';
-        } else if (error.message.includes('required')) {
-            errorMessage = 'Please fill in all required fields.';
-        } else if (error.message.includes('Anti-forgery')) {
-            errorMessage = 'Security validation failed. Please refresh the page and try again.';
-        }
-        alert(errorMessage);
-    } finally {
-        if (submitBtn) {
-            submitBtn.disabled = false;
-            submitBtn.classList.remove('loading');
-        }
-    }
-}
+      submitBtn.disabled = false;
+      submitBtn.classList.remove("loading");
+    }
+    return;
+  }
+
+  try {
+    let token = document.querySelector(
+      'input[name="__RequestVerificationToken"]'
+    );
+    if (!token) {
+      token = document.querySelector('input[name="RequestVerificationToken"]');
+    }
+    if (!token) {
+      token = form.querySelector('input[name="__RequestVerificationToken"]');
+    }
+
+    const tokenValue = token ? token.value : "";
+
+    const response = await fetch("/Recipes/AddIngredient", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Requested-With": "XMLHttpRequest",
+        RequestVerificationToken: tokenValue,
+      },
+      body: JSON.stringify({
+        Name: document.getElementById("newIngredientName").value.trim(),
+        Calories:
+          parseFloat(document.getElementById("newIngredientCalories").value) ||
+          0.0,
+        Protein:
+          parseFloat(document.getElementById("newIngredientProtein").value) ||
+          0.0,
+        Carbs:
+          parseFloat(document.getElementById("newIngredientCarbs").value) ||
+          0.0,
+        Fat:
+          parseFloat(document.getElementById("newIngredientFat").value) || 0.0,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("Server response:", errorText);
+      throw new Error(errorText || `HTTP error! status: ${response.status}`);
+    }
+
+    const newIngredient = await response.json();
+
+    selectedIngredient = {
+      id: newIngredient.id,
+      name: newIngredient.name,
+    };
+
+    const ingredientSearch = document.getElementById("ingredientSearch");
+    if (ingredientSearch) {
+      ingredientSearch.value = newIngredient.name;
+    }
+
+    hideAddIngredientModal();
+
+    const qtyInput = document.getElementById("ingredientQuantity");
+    const unitSelect = document.getElementById("ingredientUnit");
+
+    if (qtyInput && unitSelect && qtyInput.value && unitSelect.value) {
+      const qty = parseFloat(qtyInput.value);
+      const unit = unitSelect.value;
+
+      if (qty > 0) {
+        addIngredient(selectedIngredient, qty, unit);
+      }
+    }
+
+    showSuccessMessage("Ingredient added successfully!");
+
+    hideDropdown(ingredientDropdown);
+  } catch (error) {
+    console.error("Error adding ingredient:", error);
+
+    let errorMessage = "Error adding ingredient. Please try again.";
+    if (error.message.includes("already exists")) {
+      errorMessage = "An ingredient with this name already exists.";
+    } else if (error.message.includes("required")) {
+      errorMessage = "Please fill in all required fields.";
+    } else if (error.message.includes("Anti-forgery")) {
+      errorMessage =
+        "Security validation failed. Please refresh the page and try again.";
+    }
+
+    alert(errorMessage);
+  } finally {
+    if (submitBtn) {
+      submitBtn.disabled = false;
+      submitBtn.classList.remove("loading");
+    }
+  }
+}
+
 function showSuccessMessage(message) {
-    const successMsg = document.createElement('div');
-    successMsg.style.cssText = `
+  const successMsg = document.createElement("div");
+  successMsg.style.cssText = `
         position: fixed;
         top: 20px;
@@ -535,19 +675,22 @@
         animation: slideInRight 0.3s ease;
     `;
-    successMsg.textContent = message;
-    document.body.appendChild(successMsg);
+  successMsg.textContent = message;
+
+  document.body.appendChild(successMsg);
+
+  setTimeout(() => {
+    successMsg.style.animation = "slideOutRight 0.3s ease forwards";
     setTimeout(() => {
-        successMsg.style.animation = 'slideOutRight 0.3s ease forwards';
-        setTimeout(() => {
-            if (successMsg.parentNode) {
-                successMsg.parentNode.removeChild(successMsg);
-            }
-        }, 300);
-    }, 3000);
-}
-if (!document.getElementById('success-message-styles')) {
-    const style = document.createElement('style');
-    style.id = 'success-message-styles';
-    style.textContent = `
+      if (successMsg.parentNode) {
+        successMsg.parentNode.removeChild(successMsg);
+      }
+    }, 300);
+  }, 3000);
+}
+
+if (!document.getElementById("success-message-styles")) {
+  const style = document.createElement("style");
+  style.id = "success-message-styles";
+  style.textContent = `
         @keyframes slideInRight {
             from {
@@ -560,4 +703,5 @@
             }
         }
+        
         @keyframes slideOutRight {
             from {
@@ -571,14 +715,16 @@
         }
     `;
-    document.head.appendChild(style);
-}
+  document.head.appendChild(style);
+}
+
 function showValidationMessage(message) {
-    const existingMsg = document.getElementById('validation-message');
-    if (existingMsg) {
-        existingMsg.remove();
-    }
-    const validationMsg = document.createElement('div');
-    validationMsg.id = 'validation-message';
-    validationMsg.style.cssText = `
+  const existingMsg = document.getElementById("validation-message");
+  if (existingMsg) {
+    existingMsg.remove();
+  }
+
+  const validationMsg = document.createElement("div");
+  validationMsg.id = "validation-message";
+  validationMsg.style.cssText = `
         position: fixed;
         top: 20px;
@@ -594,13 +740,15 @@
         max-width: 300px;
     `;
-    validationMsg.textContent = message;
-    document.body.appendChild(validationMsg);
+  validationMsg.textContent = message;
+
+  document.body.appendChild(validationMsg);
+
+  setTimeout(() => {
+    validationMsg.style.animation = "slideOutRight 0.3s ease forwards";
     setTimeout(() => {
-        validationMsg.style.animation = 'slideOutRight 0.3s ease forwards';
-        setTimeout(() => {
-            if (validationMsg.parentNode) {
-                validationMsg.parentNode.removeChild(validationMsg);
-            }
-        }, 300);
-    }, 4000);
-}
+      if (validationMsg.parentNode) {
+        validationMsg.parentNode.removeChild(validationMsg);
+      }
+    }, 300);
+  }, 4000);
+}
Index: NutriMatch/wwwroot/js/RecipeIndex.js
===================================================================
--- NutriMatch/wwwroot/js/RecipeIndex.js	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/wwwroot/js/RecipeIndex.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,241 +1,452 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('searchInput');
-    searchInput.addEventListener('input', function() {
-        filterRecipes();
+let currentPage = window.recipeData?.currentPage || 1;
+let hasMorePages = window.recipeData?.hasMorePages || false;
+let isLoading = false;
+let showingFavoritesOnly = false;
+let allLoadedRecipes = [];
+
+document.addEventListener("DOMContentLoaded", function () {
+  const searchInput = document.getElementById("searchInput");
+
+  searchInput.addEventListener("input", function () {
+    filterRecipes();
+  });
+
+  searchInput.addEventListener("keypress", function (e) {
+    if (e.key === "Enter") {
+      filterRecipes();
+    }
+  });
+
+  initializeInfiniteScroll();
+
+  filterRecipes();
+});
+
+function initializeInfiniteScroll() {
+  window.addEventListener("scroll", function () {
+    if (isLoading || !hasMorePages) return;
+
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    if (scrollTop + windowHeight >= documentHeight - 600) {
+      loadMoreRecipes();
+    }
+  });
+}
+
+async function loadMoreRecipes() {
+  if (isLoading || !hasMorePages) return;
+
+  isLoading = true;
+  const loadingSpinner = document.getElementById("loadingSpinner");
+  loadingSpinner.style.display = "block";
+
+  try {
+    const response = await fetch(
+      `/Recipes/Index?page=${currentPage + 1}&pageSize=6`,
+      {
+        method: "GET",
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+
+    if (data.recipes && data.recipes.length > 0) {
+      appendRecipesToGrid(data.recipes);
+      currentPage = data.currentPage;
+      hasMorePages = data.hasMorePages;
+
+      document.getElementById("totalCount").textContent = data.totalRecipes;
+
+      if (!hasMorePages) {
+        document.getElementById("endOfResults").style.display = "block";
+      }
+    }
+  } catch (error) {
+    console.error("Error loading more recipes:", error);
+    showToast("Failed to load more recipes", "error");
+  } finally {
+    isLoading = false;
+    loadingSpinner.style.display = "none";
+  }
+}
+
+function appendRecipesToGrid(recipes) {
+  const recipeGrid = document.getElementById("recipeGrid");
+
+  recipes.forEach((recipe) => {
+    allLoadedRecipes.push(recipe);
+
+    const recipeCard = createRecipeCard(recipe);
+    recipeGrid.appendChild(recipeCard);
+  });
+
+  filterRecipes();
+}
+
+function createRecipeCard(recipe) {
+  const card = document.createElement("div");
+  card.className = "recipe-card";
+  card.setAttribute("data-calories", recipe.calories);
+  card.setAttribute("data-protein", recipe.protein);
+  card.setAttribute("data-carbs", recipe.carbs);
+  card.setAttribute("data-fat", recipe.fat);
+  card.onclick = () => showRecipeDetails(recipe.id, false);
+
+  const truncatedTitle =
+    recipe.title.length > 30
+      ? recipe.title.substring(0, 30) + "…"
+      : recipe.title;
+
+  const truncatedUserName =
+    recipe.userName.length > 23
+      ? recipe.userName.substring(0, 23) + "…"
+      : recipe.userName;
+
+  card.innerHTML = `
+        ${
+          !recipe.isOwner
+            ? `
+            <button class="favorite-btn"
+                onclick="event.stopPropagation(); toggleFavoriteFromIndex(this, ${
+                  recipe.id
+                })"
+                data-recipe-id="${recipe.id}" data-favorited="${
+                recipe.isFavorited
+              }">
+                <i class="${recipe.isFavorited ? "fas" : "far"} fa-heart"></i>
+            </button>
+        `
+            : ""
+        }
+        <img src="${recipe.imageUrl}" alt="${
+    recipe.title
+  }" class="recipe-image">
+        <div class="recipe-content">
+            <h3 class="recipe-title">${truncatedTitle}</h3>
+            <div class="recipe-meta">
+                <span class="rating">
+                    <i class="fas fa-star"></i> ${recipe.rating}
+                </span>
+                <span>
+                    <i class="fas fa-user"></i>
+                    ${truncatedUserName}
+                </span>
+                <span><i class="fas fa-calendar"> </i> ${
+                  recipe.createdAt
+                }</span>
+            </div>
+            <div class="recipe-macros">
+                <div class="macro-item">
+                    <div class="macro-value">${recipe.calories}</div>
+                    <div class="macro-label">Cal</div>
+                </div>
+                <div class="macro-item">
+                    <div class="macro-value">${recipe.protein}</div>
+                    <div class="macro-label">Protein</div>
+                </div>
+                <div class="macro-item">
+                    <div class="macro-value">${recipe.carbs}</div>
+                    <div class="macro-label">Carbs</div>
+                </div>
+                <div class="macro-item">
+                    <div class="macro-value">${recipe.fat}</div>
+                    <div class="macro-label">Fats</div>
+                </div>
+            </div>
+        </div>
+    `;
+
+  return card;
+}
+
+function showRecipeDetails(recipeId) {
+  const clickedCard = event.currentTarget;
+  clickedCard.classList.add("loading");
+
+  const params = new URLSearchParams({
+    isOwner: false,
+    recipeDetailsDisplayContorol: "Index",
+  });
+
+  fetch(`/Recipes/Details/${recipeId}?${params}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.text();
+    })
+    .then((html) => {
+      const modalContainer = document.getElementById("modalWindow");
+      modalContainer.innerHTML = html;
+
+      const scripts = modalContainer.querySelectorAll("script");
+      scripts.forEach((script) => {
+        const newScript = document.createElement("script");
+        if (script.src) {
+          newScript.src = script.src;
+        } else {
+          newScript.textContent = script.textContent;
+        }
+        document.body.appendChild(newScript);
+        document.body.removeChild(newScript);
+      });
+
+      const modalElement = modalContainer.querySelector(".modal");
+      if (modalElement) {
+        const modal = new bootstrap.Modal(modalElement);
+        modal.show();
+
+        modalElement.addEventListener("hidden.bs.modal", function () {
+          modalContainer.innerHTML = "";
+          clickedCard.classList.remove("loading");
+        });
+
+        modalElement.addEventListener("shown.bs.modal", function () {
+          clickedCard.classList.remove("loading");
+        });
+      } else {
+        clickedCard.classList.remove("loading");
+      }
+    })
+    .catch((err) => {
+      console.error("Failed to fetch recipe details", err);
+      alert("Failed to load recipe details. Please try again.");
+      clickedCard.classList.remove("loading");
     });
-    searchInput.addEventListener('keypress', function(e) {
-        if (e.key === 'Enter') {
-           filterRecipes();
-        }
+}
+
+function updateSlider(type) {
+  const minSlider = document.getElementById(type + "Min");
+  const maxSlider = document.getElementById(type + "Max");
+  const valueDisplay = document.getElementById(type + "Value");
+  const fill = document.getElementById(type + "Fill");
+
+  let minVal = parseInt(minSlider.value);
+  let maxVal = parseInt(maxSlider.value);
+
+  if (minVal > maxVal) {
+    if (event.target === minSlider) {
+      maxSlider.value = minVal;
+      maxVal = minVal;
+    } else {
+      minSlider.value = maxVal;
+      minVal = maxVal;
+    }
+  }
+
+  valueDisplay.textContent = minVal + " - " + maxVal;
+
+  const min = parseInt(minSlider.min);
+  const max = parseInt(minSlider.max);
+  const range = max - min;
+
+  const leftPercent = ((minVal - min) / range) * 100;
+  const rightPercent = ((maxVal - min) / range) * 100;
+
+  fill.style.left = leftPercent + "%";
+  fill.style.width = rightPercent - leftPercent + "%";
+
+  filterRecipes();
+}
+
+function filterRecipes() {
+  const calories = {
+    min: parseInt(document.getElementById("caloriesMin").value),
+    max: parseInt(document.getElementById("caloriesMax").value),
+  };
+  const protein = {
+    min: parseInt(document.getElementById("proteinMin").value),
+    max: parseInt(document.getElementById("proteinMax").value),
+  };
+  const carbs = {
+    min: parseInt(document.getElementById("carbsMin").value),
+    max: parseInt(document.getElementById("carbsMax").value),
+  };
+  const fats = {
+    min: parseInt(document.getElementById("fatsMin").value),
+    max: parseInt(document.getElementById("fatsMax").value),
+  };
+
+  const searchTerm = document.getElementById("searchInput").value.toLowerCase();
+
+  const recipeCards = document.querySelectorAll(".recipe-card");
+  let visibleCount = 0;
+
+  recipeCards.forEach((card) => {
+    const title = card.querySelector(".recipe-title").textContent.toLowerCase();
+
+    const recipeCalories = parseInt(card.dataset.calories) || 0;
+    const recipeProtein = parseInt(card.dataset.protein) || 0;
+    const recipeCarbs = parseInt(card.dataset.carbs) || 0;
+    const recipeFats = parseInt(card.dataset.fat) || 0;
+
+    const favoriteButton = card.querySelector(".favorite-btn");
+    const isFavorited = favoriteButton
+      ? favoriteButton.getAttribute("data-favorited") === "true"
+      : false;
+
+    const matchesSearch = searchTerm === "" || title.includes(searchTerm);
+
+    const matchesMacros =
+      recipeCalories >= calories.min &&
+      recipeCalories <= calories.max &&
+      recipeProtein >= protein.min &&
+      recipeProtein <= protein.max &&
+      recipeCarbs >= carbs.min &&
+      recipeCarbs <= carbs.max &&
+      recipeFats >= fats.min &&
+      recipeFats <= fats.max;
+
+    const matchesFavorites = !showingFavoritesOnly || isFavorited;
+
+    if (matchesSearch && matchesMacros && matchesFavorites) {
+      card.style.display = "block";
+      visibleCount++;
+    } else {
+      card.style.display = "none";
+    }
+  });
+
+  document.getElementById("visibleCount").textContent = visibleCount;
+}
+
+function resetFilters() {
+  document.getElementById("caloriesMin").value = 0;
+  document.getElementById("caloriesMax").value = 2000;
+  document.getElementById("proteinMin").value = 0;
+  document.getElementById("proteinMax").value = 150;
+  document.getElementById("carbsMin").value = 0;
+  document.getElementById("carbsMax").value = 150;
+  document.getElementById("fatsMin").value = 0;
+  document.getElementById("fatsMax").value = 150;
+  document.getElementById("searchInput").value = "";
+
+  if (showingFavoritesOnly) {
+    toggleFavoritesFilter();
+  }
+
+  updateSlider("calories");
+  updateSlider("protein");
+  updateSlider("carbs");
+  updateSlider("fats");
+
+  filterRecipes();
+}
+
+function openDeleteModal(recipeId, isOwner) {
+  const deleteButton = event.target.closest("button");
+  deleteButton.classList.add("loading");
+
+  const recipeModalContainer = document.getElementById("modalWindow");
+  const recipeModalElement = recipeModalContainer.querySelector(".modal");
+  const savedRecipeHtml = recipeModalContainer.innerHTML;
+
+  let recipeModalWasOpen = false;
+  if (recipeModalElement && recipeModalElement.classList.contains("show")) {
+    const recipeModalInstance = bootstrap.Modal.getInstance(recipeModalElement);
+    if (recipeModalInstance) {
+      recipeModalInstance.hide();
+      recipeModalWasOpen = true;
+    }
+  }
+
+  fetch(`/Recipes/Details/${recipeId}/${isOwner}`)
+    .then((response) => response.text())
+    .then((html) => {
+      const deleteModalContainer = document.getElementById("modalWindowDelete");
+      deleteModalContainer.innerHTML = html;
+
+      const deleteModalElement = deleteModalContainer.querySelector(".modal");
+      if (deleteModalElement) {
+        const deleteModal = new bootstrap.Modal(deleteModalElement);
+        deleteModal.show();
+
+        deleteModalElement.addEventListener("hidden.bs.modal", function () {
+          deleteButton.classList.remove("loading");
+          deleteModalContainer.innerHTML = "";
+
+          if (recipeModalWasOpen && savedRecipeHtml.trim() !== "") {
+            recipeModalContainer.innerHTML = savedRecipeHtml;
+            const restoredModal = recipeModalContainer.querySelector(".modal");
+            if (restoredModal) {
+              const restoredInstance = new bootstrap.Modal(restoredModal);
+              restoredInstance.show();
+            }
+          }
+        });
+
+        deleteModalElement.addEventListener("shown.bs.modal", function () {
+          deleteButton.classList.remove("loading");
+        });
+      } else {
+        deleteButton.classList.remove("loading");
+      }
+    })
+    .catch((error) => {
+      console.error("Error loading delete modal:", error);
+      deleteButton.classList.remove("loading");
+      location.href = `/Recipes/Delete/${recipeId}`;
     });
-    filterRecipes();
-});
-function showRecipeDetails(recipeId) {
-    const clickedCard = event.currentTarget;
-    clickedCard.classList.add('loading');
-    const params = new URLSearchParams({
-    isOwner: false,
-    recipeDetailsDisplayContorol: "Index"
-});
-    fetch(`/Recipes/Details/${recipeId}?${params}`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            return response.text();
-        })
-        .then(html => {
-            const modalContainer = document.getElementById('modalWindow');
-            modalContainer.innerHTML = html;
-            const scripts = modalContainer.querySelectorAll("script");
-            scripts.forEach(script => {
-                const newScript = document.createElement("script");
-                if (script.src) {
-                    newScript.src = script.src;
-                } else {
-                    newScript.textContent = script.textContent;
-                }
-                document.body.appendChild(newScript);
-                document.body.removeChild(newScript);
-            });
-            const modalElement = modalContainer.querySelector('.modal');
-            if (modalElement) {
-                const modal = new bootstrap.Modal(modalElement);
-                modal.show();
-                modalElement.addEventListener('hidden.bs.modal', function () {
-                    modalContainer.innerHTML = '';
-                    clickedCard.classList.remove('loading');
-                }); 
-                modalElement.addEventListener('shown.bs.modal', function () {
-                    clickedCard.classList.remove('loading');
-                });
-            } else {    
-                clickedCard.classList.remove('loading');
-            }
-        })
-        .catch(err => {
-            console.error("Failed to fetch recipe details", err);
-            alert("Failed to load recipe details. Please try again.");
-            clickedCard.classList.remove('loading');
-        });
-}
-function updateSlider(type) {
-    const minSlider = document.getElementById(type + 'Min');
-    const maxSlider = document.getElementById(type + 'Max');
-    const valueDisplay = document.getElementById(type + 'Value');
-    const fill = document.getElementById(type + 'Fill');
-    let minVal = parseInt(minSlider.value);
-    let maxVal = parseInt(maxSlider.value);
-    if (minVal > maxVal) {
-        if (event.target === minSlider) {
-            maxSlider.value = minVal;
-            maxVal = minVal;
-        } else {
-            minSlider.value = maxVal;
-            minVal = maxVal;
-        }
-    }
-    valueDisplay.textContent = minVal + ' - ' + maxVal;
-    const min = parseInt(minSlider.min);
-    const max = parseInt(minSlider.max);
-    const range = max - min;
-    const leftPercent = ((minVal - min) / range) * 100;
-    const rightPercent = ((maxVal - min) / range) * 100;
-    fill.style.left = leftPercent + '%';
-    fill.style.width = (rightPercent - leftPercent) + '%';
-    filterRecipes();
-}
-function filterRecipes() {
-    const calories = {
-        min: parseInt(document.getElementById('caloriesMin').value),
-        max: parseInt(document.getElementById('caloriesMax').value)
-    };
-    const protein = {
-        min: parseInt(document.getElementById('proteinMin').value),
-        max: parseInt(document.getElementById('proteinMax').value)
-    };
-    const carbs = {
-        min: parseInt(document.getElementById('carbsMin').value),
-        max: parseInt(document.getElementById('carbsMax').value)
-    };
-    const fats = {
-        min: parseInt(document.getElementById('fatsMin').value),
-        max: parseInt(document.getElementById('fatsMax').value)
-    };
-    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-    const recipeCards = document.querySelectorAll('.recipe-card');
-    let visibleCount = 0;
-    recipeCards.forEach(card => {
-        const title = card.querySelector('.recipe-title').textContent.toLowerCase();
-        const recipeCalories = parseInt(card.dataset.calories) || 0;
-        const recipeProtein = parseInt(card.dataset.protein) || 0;
-        const recipeCarbs = parseInt(card.dataset.carbs) || 0;
-        const recipeFats = parseInt(card.dataset.fat) || 0;
-        const favoriteButton = card.querySelector('.favorite-btn');
-        const isFavorited = favoriteButton ? favoriteButton.getAttribute('data-favorited') === 'true' : false;
-        const matchesSearch = searchTerm === '' || title.includes(searchTerm);
-        const matchesMacros = 
-            recipeCalories >= calories.min && recipeCalories <= calories.max &&
-            recipeProtein >= protein.min && recipeProtein <= protein.max &&
-            recipeCarbs >= carbs.min && recipeCarbs <= carbs.max &&
-            recipeFats >= fats.min && recipeFats <= fats.max;
-        const matchesFavorites = !showingFavoritesOnly || (isFavorited );
-        if (matchesSearch && matchesMacros && matchesFavorites) {
-            card.style.display = 'block';
-            visibleCount++;
-        } else {
-            card.style.display = 'none';
-        }
+}
+
+async function toggleFavoriteFromIndex(button, recipeId) {
+  try {
+    const token = document.querySelector(
+      'input[name="__RequestVerificationToken"]'
+    )?.value;
+
+    const response = await fetch("/Recipes/ToggleFavorite", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        RequestVerificationToken: token,
+      },
+      body: JSON.stringify({ recipeId: recipeId }),
     });
-    const resultsCount = document.querySelector('.results-count');
-    resultsCount.innerHTML = `<i class="fas fa-utensils me-2"></i>Showing <strong>${visibleCount} recipes</strong> matching your criteria`;
-}
-function resetFilters() {
-    document.getElementById('caloriesMin').value = 0;
-    document.getElementById('caloriesMax').value = 2000;
-    document.getElementById('proteinMin').value = 0;
-    document.getElementById('proteinMax').value = 150;
-    document.getElementById('carbsMin').value = 0;
-    document.getElementById('carbsMax').value = 150;
-    document.getElementById('fatsMin').value = 0;
-    document.getElementById('fatsMax').value = 150;
-    document.getElementById('searchInput').value = '';
-    if (showingFavoritesOnly) {
-        toggleFavoritesFilter();
-    }
-    updateSlider('calories');
-    updateSlider('protein');
-    updateSlider('carbs');
-    updateSlider('fats');
-    filterRecipes();
-}
-function openDeleteModal(recipeId,isOwner) {
-    const deleteButton = event.target.closest('button');
-    deleteButton.classList.add('loading');
-    const recipeModalContainer = document.getElementById('modalWindow');
-    const recipeModalElement = recipeModalContainer.querySelector('.modal');
-    const savedRecipeHtml = recipeModalContainer.innerHTML;
-    let recipeModalWasOpen = false;
-    if (recipeModalElement && recipeModalElement.classList.contains('show')) {
-        const recipeModalInstance = bootstrap.Modal.getInstance(recipeModalElement);
-        if (recipeModalInstance) {
-            recipeModalInstance.hide();
-            recipeModalWasOpen = true;
-        }
-    }
-    fetch(`/Recipes/Details/${recipeId}/${isOwner}`)
-        .then(response => response.text())
-        .then(html => {
-            const deleteModalContainer = document.getElementById('modalWindowDelete');
-            deleteModalContainer.innerHTML = html;
-            const deleteModalElement = deleteModalContainer.querySelector('.modal');
-            if (deleteModalElement) {
-                const deleteModal = new bootstrap.Modal(deleteModalElement);
-                deleteModal.show();
-                deleteModalElement.addEventListener('hidden.bs.modal', function () {
-                    deleteButton.classList.remove('loading');
-                    deleteModalContainer.innerHTML = '';
-                    if (recipeModalWasOpen && savedRecipeHtml.trim() !== '') {
-                        recipeModalContainer.innerHTML = savedRecipeHtml;
-                        const restoredModal = recipeModalContainer.querySelector('.modal');
-                        if (restoredModal) {
-                            const restoredInstance = new bootstrap.Modal(restoredModal);
-                            restoredInstance.show();
-                        }
-                    }
-                });
-                deleteModalElement.addEventListener('shown.bs.modal', function () {
-                    deleteButton.classList.remove('loading');
-                });
-            } else {
-                deleteButton.classList.remove('loading');
-            }
-        })
-        .catch(error => {
-            console.error('Error loading delete modal:', error);
-            deleteButton.classList.remove('loading');
-            location.href = `/Recipes/Delete/${recipeId}`;
-        });
-}
-async function toggleFavoriteFromIndex(button, recipeId) {
-    try {
-        const token = document.querySelector('input[name="__RequestVerificationToken"]')?.value;
-        const response = await fetch('/Recipes/ToggleFavorite', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'RequestVerificationToken': token
-            },
-            body: JSON.stringify({ recipeId: recipeId })
-        });
-        const result = await response.json();
-        if (result.success) {
-            const heartIcon = button.querySelector('i');
-            const isFavorited = result.isFavorited;
-            if (isFavorited) {
-                heartIcon.classList.remove('far');
-                heartIcon.classList.add('fas');
-                button.setAttribute('data-favorited', 'true');
-            } else {
-                heartIcon.classList.remove('fas');
-                heartIcon.classList.add('far');
-                button.setAttribute('data-favorited', 'false');
-            }
-            if (showingFavoritesOnly) {
-                setTimeout(() => filterRecipes(), 100);
-            }
-            showToast(result.message, 'success');
-        } else {
-            showToast(result.message || 'Failed to update favorite', 'error');
-        }
-    } catch (error) {
-        console.error('Error toggling favorite:', error);
-        showToast('An error occurred while updating favorites', 'error');
-    }
-}
-function showToast(message, type = 'info') {
-    const toast = document.createElement('div');
-    toast.className = `toast toast-${type}`;
-    toast.style.cssText = `
+
+    const result = await response.json();
+
+    if (result.success) {
+      const heartIcon = button.querySelector("i");
+      const isFavorited = result.isFavorited;
+
+      if (isFavorited) {
+        heartIcon.classList.remove("far");
+        heartIcon.classList.add("fas");
+        button.setAttribute("data-favorited", "true");
+      } else {
+        heartIcon.classList.remove("fas");
+        heartIcon.classList.add("far");
+        button.setAttribute("data-favorited", "false");
+      }
+
+      if (showingFavoritesOnly) {
+        setTimeout(() => filterRecipes(), 100);
+      }
+
+      showToast(result.message, "success");
+    } else {
+      showToast(result.message || "Failed to update favorite", "error");
+    }
+  } catch (error) {
+    console.error("Error toggling favorite:", error);
+    showToast("An error occurred while updating favorites", "error");
+  }
+}
+
+function showToast(message, type = "info") {
+  const toast = document.createElement("div");
+  toast.className = `toast toast-${type}`;
+  toast.style.cssText = `
         position: fixed;
         top: 20px;
@@ -249,29 +460,36 @@
         transition: opacity 0.3s ease;
     `;
-    const colors = {
-        success: '#10b981',
-        error: '#ef4444',
-        info: '#3b82f6'
-    };
-    toast.style.backgroundColor = colors[type] || colors.info;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-    setTimeout(() => toast.style.opacity = '1', 100);
-    setTimeout(() => {
-        toast.style.opacity = '0';
-        setTimeout(() => document.body.removeChild(toast), 300);
-    }, 3000);
-}
-let showingFavoritesOnly = false;
+
+  const colors = {
+    success: "#10b981",
+    error: "#ef4444",
+    info: "#3b82f6",
+  };
+  toast.style.backgroundColor = colors[type] || colors.info;
+
+  toast.textContent = message;
+  document.body.appendChild(toast);
+
+  setTimeout(() => (toast.style.opacity = "1"), 100);
+
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    setTimeout(() => document.body.removeChild(toast), 300);
+  }, 3000);
+}
+
 function toggleFavoritesFilter() {
-    const button = document.getElementById('favoritesToggle');
-    showingFavoritesOnly = !showingFavoritesOnly;
-    if (showingFavoritesOnly) {
-        button.innerHTML = '<i class="fas fa-heart me-2"></i>Show All Recipes';
-        button.className = 'btn btn-success w-100';
-    } else {
-        button.innerHTML = '<i class="fas fa-heart me-2"></i>Show Favorites Only';
-        button.className = 'btn btn-outline-success w-100';
-    }
-    filterRecipes();
-}
+  const button = document.getElementById("favoritesToggle");
+
+  showingFavoritesOnly = !showingFavoritesOnly;
+
+  if (showingFavoritesOnly) {
+    button.innerHTML = '<i class="fas fa-heart me-2"></i>Show All Recipes';
+    button.className = "btn btn-success w-100";
+  } else {
+    button.innerHTML = '<i class="fas fa-heart me-2"></i>Show Favorites Only';
+    button.className = "btn btn-outline-success w-100";
+  }
+
+  filterRecipes();
+}
Index: NutriMatch/wwwroot/js/RestaurantIndex.js
===================================================================
--- NutriMatch/wwwroot/js/RestaurantIndex.js	(revision 770ffeaff8f68701ab1f80ba9cdb2d9ced9b33c4)
+++ NutriMatch/wwwroot/js/RestaurantIndex.js	(revision dbc791c2887a973c5681b5b5b3b220d4b07aa94d)
@@ -1,94 +1,123 @@
 let currentFilters = {
-    calories: { min: 0, max: 2000 },
-    protein: { min: 0, max: 150 },
-    carbs: { min: 0, max: 150 },
-    fats: { min: 0, max: 150 }
+  calories: { min: 0, max: 2000 },
+  protein: { min: 0, max: 150 },
+  carbs: { min: 0, max: 150 },
+  fats: { min: 0, max: 150 },
 };
 
-document.addEventListener('DOMContentLoaded', function() {
-    initializeFilters();
-    updateFilterValues();
+document.addEventListener("DOMContentLoaded", function () {
+  initializeFilters();
+  updateFilterValues();
 });
 
 function itemMatchesFilters(item) {
-    return item.calories >= currentFilters.calories.min && 
-            item.calories <= currentFilters.calories.max &&
-            item.protein >= currentFilters.protein.min && 
-            item.protein <= currentFilters.protein.max &&
-            item.carbs >= currentFilters.carbs.min && 
-            item.carbs <= currentFilters.carbs.max &&
-            item.fats >= currentFilters.fats.min && 
-            item.fats <= currentFilters.fats.max;
+  return (
+    item.calories >= currentFilters.calories.min &&
+    item.calories <= currentFilters.calories.max &&
+    item.protein >= currentFilters.protein.min &&
+    item.protein <= currentFilters.protein.max &&
+    item.carbs >= currentFilters.carbs.min &&
+    item.carbs <= currentFilters.carbs.max &&
+    item.fats >= currentFilters.fats.min &&
+    item.fats <= currentFilters.fats.max
+  );
 }
 
 function areFiltersDefault() {
-    return currentFilters.calories.min === 0 && currentFilters.calories.max === 2000 &&
-            currentFilters.protein.min === 0 && currentFilters.protein.max === 150 &&
-            currentFilters.carbs.min === 0 && currentFilters.carbs.max === 150 &&
-            currentFilters.fats.min === 0 && currentFilters.fats.max === 150;
+  return (
+    currentFilters.calories.min === 0 &&
+    currentFilters.calories.max === 2000 &&
+    currentFilters.protein.min === 0 &&
+    currentFilters.protein.max === 150 &&
+    currentFilters.carbs.min === 0 &&
+    currentFilters.carbs.max === 150 &&
+    currentFilters.fats.min === 0 &&
+    currentFilters.fats.max === 150
+  );
 }
 
 function updateFilterValues() {
-    document.getElementById('caloriesValue').textContent = `${currentFilters.calories.min} - ${currentFilters.calories.max}`;
-    document.getElementById('proteinValue').textContent = `${currentFilters.protein.min} - ${currentFilters.protein.max}`;
-    document.getElementById('carbsValue').textContent = `${currentFilters.carbs.min} - ${currentFilters.carbs.max}`;
-    document.getElementById('fatsValue').textContent = `${currentFilters.fats.min} - ${currentFilters.fats.max}`;
+  document.getElementById(
+    "caloriesValue"
+  ).textContent = `${currentFilters.calories.min} - ${currentFilters.calories.max}`;
+  document.getElementById(
+    "proteinValue"
+  ).textContent = `${currentFilters.protein.min} - ${currentFilters.protein.max}`;
+  document.getElementById(
+    "carbsValue"
+  ).textContent = `${currentFilters.carbs.min} - ${currentFilters.carbs.max}`;
+  document.getElementById(
+    "fatsValue"
+  ).textContent = `${currentFilters.fats.min} - ${currentFilters.fats.max}`;
 }
 
 function applyFilters() {
-    currentFilters.calories.min = parseInt(document.getElementById('caloriesMin').value);
-    currentFilters.calories.max = parseInt(document.getElementById('caloriesMax').value);
-    currentFilters.protein.min = parseInt(document.getElementById('proteinMin').value);
-    currentFilters.protein.max = parseInt(document.getElementById('proteinMax').value);
-    currentFilters.carbs.min = parseInt(document.getElementById('carbsMin').value);
-    currentFilters.carbs.max = parseInt(document.getElementById('carbsMax').value);
-    currentFilters.fats.min = parseInt(document.getElementById('fatsMin').value);
-    currentFilters.fats.max = parseInt(document.getElementById('fatsMax').value);
-
-    updateFilterValues();
+  currentFilters.calories.min = parseInt(
+    document.getElementById("caloriesMin").value
+  );
+  currentFilters.calories.max = parseInt(
+    document.getElementById("caloriesMax").value
+  );
+  currentFilters.protein.min = parseInt(
+    document.getElementById("proteinMin").value
+  );
+  currentFilters.protein.max = parseInt(
+    document.getElementById("proteinMax").value
+  );
+  currentFilters.carbs.min = parseInt(
+    document.getElementById("carbsMin").value
+  );
+  currentFilters.carbs.max = parseInt(
+    document.getElementById("carbsMax").value
+  );
+  currentFilters.fats.min = parseInt(document.getElementById("fatsMin").value);
+  currentFilters.fats.max = parseInt(document.getElementById("fatsMax").value);
+
+  updateFilterValues();
 }
 
 function openMenu(restaurantId) {
-    const f = {
-        minCalories: currentFilters.calories.min,
-        maxCalories: currentFilters.calories.max,
-        minProtein: currentFilters.protein.min,
-        maxProtein: currentFilters.protein.max,
-        minCarbs: currentFilters.carbs.min,
-        maxCarbs: currentFilters.carbs.max,
-        minFats: currentFilters.fats.min,
-        maxFats: currentFilters.fats.max
-    };
-
-    const query = new URLSearchParams(f).toString();
-
-    const menuContainer = document.getElementById('menuItems');
-    menuContainer.innerHTML = '<div class="text-center p-4"><i class="fas fa-spinner fa-spin"></i> Loading menu...</div>';
-
-    const filterInfo = document.getElementById('filterInfo');
-    if (!areFiltersDefault()) {
-        filterInfo.style.display = 'block';
-    } else {
-        filterInfo.style.display = 'none';
-    }
-
-    const modal = new bootstrap.Modal(document.getElementById('menuModal'));
-    modal.show();
-
-    fetch(`/Restaurants/GetRestaurantMeals/${restaurantId}?${query}`)
-    .then(response => {
-        console.log('Response status:', response.status);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.text();
+  const f = {
+    minCalories: currentFilters.calories.min,
+    maxCalories: currentFilters.calories.max,
+    minProtein: currentFilters.protein.min,
+    maxProtein: currentFilters.protein.max,
+    minCarbs: currentFilters.carbs.min,
+    maxCarbs: currentFilters.carbs.max,
+    minFats: currentFilters.fats.min,
+    maxFats: currentFilters.fats.max,
+  };
+
+  const query = new URLSearchParams(f).toString();
+
+  const menuContainer = document.getElementById("menuItems");
+  menuContainer.innerHTML =
+    '<div class="text-center p-4"><i class="fas fa-spinner fa-spin"></i> Loading menu...</div>';
+
+  const filterInfo = document.getElementById("filterInfo");
+  if (!areFiltersDefault()) {
+    filterInfo.style.display = "block";
+  } else {
+    filterInfo.style.display = "none";
+  }
+
+  const modal = new bootstrap.Modal(document.getElementById("menuModal"));
+  modal.show();
+
+  fetch(`/Restaurants/GetRestaurantMeals/${restaurantId}?${query}`)
+    .then((response) => {
+      console.log("Response status:", response.status);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.text();
     })
-    .then(html => {
-        console.log('Received HTML length:', html.length);
-        menuContainer.innerHTML = html;
+    .then((html) => {
+      console.log("Received HTML length:", html.length);
+      menuContainer.innerHTML = html;
     })
-    .catch(err => {
-        console.error("Failed to fetch menu details:", err);
-        menuContainer.innerHTML = `
+    .catch((err) => {
+      console.error("Failed to fetch menu details:", err);
+      menuContainer.innerHTML = `
             <div class="alert alert-danger" role="alert">
                 <i class="fas fa-exclamation-triangle me-2"></i>
@@ -101,94 +130,99 @@
 
 function toggleItemDetails(headerElement) {
-    const menuItem = headerElement.closest('.menu-item');
-    const details = menuItem.querySelector('.menu-item-details');
-    const chevron = headerElement.querySelector('.chevron-icon');
-
-    const isShown = details.classList.contains('show');
-
-    details.classList.toggle('show', !isShown);
-    chevron.classList.toggle('fa-chevron-up', !isShown);
-    chevron.classList.toggle('fa-chevron-down', isShown);
-}
-
+  const menuItem = headerElement.closest(".menu-item");
+  const details = menuItem.querySelector(".menu-item-details");
+  const chevron = headerElement.querySelector(".chevron-icon");
+
+  const isShown = details.classList.contains("show");
+
+  details.classList.toggle("show", !isShown);
+  chevron.classList.toggle("fa-chevron-up", !isShown);
+  chevron.classList.toggle("fa-chevron-down", isShown);
+}
 
 function initializeFilters() {
-    const sliders = ['caloriesMin', 'caloriesMax', 'proteinMin', 'proteinMax', 'carbsMin', 'carbsMax', 'fatsMin', 'fatsMax'];
-
-    sliders.forEach(sliderId => {
-        document.getElementById(sliderId).addEventListener('input', function() {
-            const type = sliderId.replace('Min', '').replace('Max', '');
-            const isMin = sliderId.includes('Min');
-            
-            const minSlider = document.getElementById(type + 'Min');
-            const maxSlider = document.getElementById(type + 'Max');
-            
-            if (isMin && parseInt(minSlider.value) > parseInt(maxSlider.value)) {
-                maxSlider.value = minSlider.value;
-            } else if (!isMin && parseInt(maxSlider.value) < parseInt(minSlider.value)) {
-                minSlider.value = maxSlider.value;
-            }
-            
-            currentFilters[type].min = parseInt(minSlider.value);
-            currentFilters[type].max = parseInt(maxSlider.value);
-            
-            updateFilterValues();
-        });
+  const sliders = [
+    "caloriesMin",
+    "caloriesMax",
+    "proteinMin",
+    "proteinMax",
+    "carbsMin",
+    "carbsMax",
+    "fatsMin",
+    "fatsMax",
+  ];
+
+  sliders.forEach((sliderId) => {
+    document.getElementById(sliderId).addEventListener("input", function () {
+      const type = sliderId.replace("Min", "").replace("Max", "");
+      const isMin = sliderId.includes("Min");
+
+      const minSlider = document.getElementById(type + "Min");
+      const maxSlider = document.getElementById(type + "Max");
+
+      if (isMin && parseInt(minSlider.value) > parseInt(maxSlider.value)) {
+        maxSlider.value = minSlider.value;
+      } else if (
+        !isMin &&
+        parseInt(maxSlider.value) < parseInt(minSlider.value)
+      ) {
+        minSlider.value = maxSlider.value;
+      }
+
+      currentFilters[type].min = parseInt(minSlider.value);
+      currentFilters[type].max = parseInt(maxSlider.value);
+
+      updateFilterValues();
     });
-}
-
-
+  });
+}
 
 function updateSlider(type) {
-    const minSlider = document.getElementById(type + 'Min');
-    const maxSlider = document.getElementById(type + 'Max');
-    const valueDisplay = document.getElementById(type + 'Value');
-    const fill = document.getElementById(type + 'Fill');
-
-    let minVal = parseInt(minSlider.value);
-    let maxVal = parseInt(maxSlider.value);
-
-    if (minVal > maxVal) {
-        if (event.target === minSlider) {
-            maxSlider.value = minVal;
-            maxVal = minVal;
-        } else {
-            minSlider.value = maxVal;
-            minVal = maxVal;
-        }
+  const minSlider = document.getElementById(type + "Min");
+  const maxSlider = document.getElementById(type + "Max");
+  const valueDisplay = document.getElementById(type + "Value");
+  const fill = document.getElementById(type + "Fill");
+
+  let minVal = parseInt(minSlider.value);
+  let maxVal = parseInt(maxSlider.value);
+
+  if (minVal > maxVal) {
+    if (event.target === minSlider) {
+      maxSlider.value = minVal;
+      maxVal = minVal;
+    } else {
+      minSlider.value = maxVal;
+      minVal = maxVal;
     }
-
-    valueDisplay.textContent = minVal + ' - ' + maxVal;
-
-    const min = parseInt(minSlider.min);
-    const max = parseInt(minSlider.max);
-    const range = max - min;
-
-    const leftPercent = ((minVal - min) / range) * 100;
-    const rightPercent = ((maxVal - min) / range) * 100;
-
-    fill.style.left = leftPercent + '%';
-    fill.style.width = (rightPercent - leftPercent) + '%';
-
-    applyFilters();
-}
-
+  }
+
+  valueDisplay.textContent = minVal + " - " + maxVal;
+
+  const min = parseInt(minSlider.min);
+  const max = parseInt(minSlider.max);
+  const range = max - min;
+
+  const leftPercent = ((minVal - min) / range) * 100;
+  const rightPercent = ((maxVal - min) / range) * 100;
+
+  fill.style.left = leftPercent + "%";
+  fill.style.width = rightPercent - leftPercent + "%";
+
+  applyFilters();
+}
 
 function resetFilters() {
-    document.getElementById('caloriesMin').value = 0;
-    document.getElementById('caloriesMax').value = 2000;
-    document.getElementById('proteinMin').value = 0;
-    document.getElementById('proteinMax').value = 150;
-    document.getElementById('carbsMin').value = 0;
-    document.getElementById('carbsMax').value = 150;
-    document.getElementById('fatsMin').value = 0;
-    document.getElementById('fatsMax').value = 150;
-    
-    updateSlider('calories');
-    updateSlider('protein');
-    updateSlider('carbs');
-    updateSlider('fats');
-
-}
-
-
+  document.getElementById("caloriesMin").value = 0;
+  document.getElementById("caloriesMax").value = 2000;
+  document.getElementById("proteinMin").value = 0;
+  document.getElementById("proteinMax").value = 150;
+  document.getElementById("carbsMin").value = 0;
+  document.getElementById("carbsMax").value = 150;
+  document.getElementById("fatsMin").value = 0;
+  document.getElementById("fatsMax").value = 150;
+
+  updateSlider("calories");
+  updateSlider("protein");
+  updateSlider("carbs");
+  updateSlider("fats");
+}