Index: NutriMatch/Controllers/HomeController.cs
===================================================================
--- NutriMatch/Controllers/HomeController.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Controllers/HomeController.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -3,8 +3,10 @@
 using NutriMatch.Data;
 using NutriMatch.Models;
+
 namespace MyApp.Namespace
 {
     public class Home : Controller
     {
+
         private readonly AppDbContext _context;
         public Home(AppDbContext context)
@@ -12,9 +14,16 @@
             _context = context;
         }
+
         public async Task<IActionResult> Index()
-        {
-            List<Recipe> recipes = await _context.Recipes.Take(6).ToListAsync();
-            return View(recipes);
+        {   
+            var model = new HomeViewModel
+            {
+                Recipes = await _context.Recipes.Take(6).ToListAsync(),
+                Restaurants = await _context.Restaurants.ToListAsync()                
+            };
+            return View(model);
         }
+
+
     }
 }
Index: NutriMatch/Controllers/RecipesController.cs
===================================================================
--- NutriMatch/Controllers/RecipesController.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Controllers/RecipesController.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -11,17 +11,56 @@
 using Microsoft.Identity.Client;
 using Microsoft.CodeAnalysis.CSharp.Syntax;
+using System.Runtime.Intrinsics.X86;
+
+
+
 namespace NutriMatch.Controllers
 {
+
+
     public class RecipesController : Controller
     {
+
+            float ConvertType(float number, string unit){
+                float result;
+                switch (unit.ToLower())
+                {
+                    case "g":
+                    case "ml":
+                        result = number / 100;
+                        break;
+                    case "oz":
+                        result = (float)(number * 28.3495 / 100);
+                        break;
+                    case "tbsp":
+                        result = (float)(number * 15 / 100); 
+                        break;
+                    case "tsp":
+                        result = (float)(number * 5 / 100); 
+                        break;
+                    case "cup":
+                        result = (float)(number * 240 / 100); 
+                        break;
+                    default:
+                        return 0;
+                }
+
+            return result;
+}
+
         private readonly AppDbContext _context;
+
         public RecipesController(AppDbContext context)
         {
             _context = context;
         }
+
+        
         public async Task<IActionResult> Index()
         {
             return View(await _context.Recipes.ToListAsync());
         }
+
+        
         public async Task<IActionResult> Details(int? id)
         {
@@ -30,4 +69,5 @@
                 return NotFound();
             }
+
             var recipe = await _context.Recipes.Include(r => r.RecipeIngredients).ThenInclude(ri => ri.Ingredient)
                 .FirstOrDefaultAsync(m => m.Id == id);
@@ -36,30 +76,25 @@
                 return NotFound();
             }
-            return PartialView("RecipeDetailsPartial", recipe);
-        }
+
+            return PartialView("_RecipeDetailsPartial", recipe);
+        }
+
+        
         public IActionResult Create()
         {
             return View();
         }
+
+       
         [HttpPost]
         [ValidateAntiForgeryToken]
-        public async Task<IActionResult> Create([Bind("Id,Title,Instructions")] Recipe recipe)
-        {
-            float ConvertType(float number, string unit)
-            {
-                switch (unit.ToLower())
-                {
-                    case "g":
-                        return number / 100; 
-                    case "ml":
-                        return number / 100; 
-                    case "oz":
-                        return (float)(number * 28.3495 / 100); 
-                    default:
-                        return 0;
-                }
-            }
+        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)
@@ -68,12 +103,17 @@
                     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 {
+                }
+                else
+                {
                     Console.WriteLine("No file uploaded or file is empty.");
                 }
+
                 _context.Add(recipe);
                 await _context.SaveChangesAsync();
@@ -84,4 +124,7 @@
                 float totalCarbs = 0;
                 float totalFat = 0;
+
+
+
                 foreach (var i in ingredients)
                 {
@@ -93,5 +136,9 @@
                         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;
@@ -99,11 +146,19 @@
                     totalFat += ConvertType(tempIngredient.Fat, i.Unit) * i.Quantity;
                 }
-                recipe.Calories = totalCalories;
-                recipe.Protein = totalProtein;
-                recipe.Carbs = totalCarbs;
-                recipe.Fat = totalFat;
+
+                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);
+
+
+
                 _context.Update(recipe);
+
+
                 await _context.SaveChangesAsync();
                 return RedirectToAction(nameof(Index));
+
+
             }
             else
@@ -117,8 +172,12 @@
                     }
                 }
+
+
                 Console.WriteLine("Model state is invalid. Please check the input data.");
             }
             return View(recipe);
         }
+
+        
         public async Task<IActionResult> Edit(int? id)
         {
@@ -127,4 +186,5 @@
                 return NotFound();
             }
+
             var recipe = await _context.Recipes
         .Include(r => r.RecipeIngredients)
@@ -137,85 +197,94 @@
             return View(recipe);
         }
-        [HttpPost]
-        [ValidateAntiForgeryToken]
-        public async Task<IActionResult> Edit(int id, [Bind("Id,Title,Instructions")] Recipe recipe)
-        {
-            if (id != recipe.Id)
-            {
-                return NotFound();
-            }
-            float ConvertType(float number, string unit)
-            {
-                switch (unit.ToLower())
-                {
-                    case "g":
-                        return number / 100; 
-                    case "ml":
-                        return number / 100; 
-                    case "oz":
-                        return (float)(number * 28.3495 / 100); 
-                    default:
-                        return 0;
-                }
-            }
-            if (ModelState.IsValid)
-            {
-                var file = Request.Form.Files.GetFile("RecipeImage");
-                if (file != null && file.Length > 0)
-                {
-                    var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images");
-                    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 {
-                    Console.WriteLine("No file uploaded or file is empty.");
-                }
-                string selectedIngredients = Request.Form["Ingredients"];
-                List<SelectedIngredient> ingredients = JsonSerializer.Deserialize<List<SelectedIngredient>>(selectedIngredients);
-                float totalCalories = 0;
-                float totalProtein = 0;
-                float totalCarbs = 0;
-                float totalFat = 0;
-                foreach (var i in ingredients)
-                {
-                    _context.RecipeIngredients.Add(new RecipeIngredient
-                    {
-                        RecipeId = recipe.Id,
-                        IngredientId = i.Id,
-                        Unit = i.Unit,
-                        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;
-                }
-                recipe.Calories = totalCalories;
-                recipe.Protein = totalProtein;
-                recipe.Carbs = totalCarbs;
-                recipe.Fat = totalFat;
-                _context.Update(recipe);
-                await _context.SaveChangesAsync();
-                return RedirectToAction(nameof(Index));
-            }
-            else
-            {
-                foreach (var key in ModelState.Keys)
-                {
-                    var errors = ModelState[key].Errors;
-                    foreach (var error in errors)
-                    {
-                        Console.WriteLine($"Key: {key} - Error: {error.ErrorMessage}");
-                    }
-                }
-                Console.WriteLine("Model state is invalid. Please check the input data.");
-            }
-            return View(recipe);
-        }
+
+        
+[HttpPost]
+[ValidateAntiForgeryToken]
+public async Task<IActionResult> Edit([Bind("Id,Title,Instructions")] Recipe recipe)
+{
+
+
+    if (ModelState.IsValid)
+    {
+        var file = Request.Form.Files.GetFile("RecipeImage");
+        if (file != null && file.Length > 0)
+        {
+            var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images");
+            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)
+            {
+                recipe.ImageUrl = existing;
+            }
+        }
+
+        await _context.RecipeIngredients.Where(ri => ri.RecipeId == recipe.Id).ExecuteDeleteAsync();
+
+        string selectedIngredients = Request.Form["Ingredients"];
+        List<SelectedIngredient> ingredients = JsonSerializer.Deserialize<List<SelectedIngredient>>(selectedIngredients);
+        float totalCalories = 0;
+        float totalProtein = 0;
+        float totalCarbs = 0;
+        float totalFat = 0;
+
+        foreach (var i in ingredients)
+        {
+            _context.RecipeIngredients.Add(new RecipeIngredient
+            {
+                RecipeId = recipe.Id,
+                IngredientId = i.Id,
+                Unit = i.Unit,
+                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;
+        }
+
+        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);
+
+        _context.Update(recipe);
+
+        await _context.SaveChangesAsync();
+        return RedirectToAction(nameof(Index));
+    }
+    else
+    {
+        foreach (var key in ModelState.Keys)
+        {
+            var errors = ModelState[key].Errors;
+            foreach (var error in errors)
+            {
+                Console.WriteLine($"Key: {key} - Error: {error.ErrorMessage}");
+            }
+        }
+
+        Console.WriteLine("Model state is invalid. Please check the input data.");
+    }
+
+    return View(recipe);
+}
+
+
+        
         public async Task<IActionResult> Delete(int? id)
         {
@@ -224,5 +293,6 @@
                 return NotFound();
             }
-            var recipe = await _context.Recipes
+
+            var recipe = await _context.Recipes.Include(r => r.RecipeIngredients)
                 .FirstOrDefaultAsync(m => m.Id == id);
             if (recipe == null)
@@ -230,6 +300,9 @@
                 return NotFound();
             }
-            return View(recipe);
-        }
+
+            return PartialView("_RecipeDeletePartial",recipe);
+        }
+
+        
         [HttpPost, ActionName("Delete")]
         [ValidateAntiForgeryToken]
@@ -241,11 +314,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)
         {
@@ -254,43 +331,15 @@
             .OrderBy(i => i.Name)
             .Take(5)
-            .ToListAsync();   
+            .ToListAsync();
+
             return suggestions;
         }
-        public async Task<ActionResult<List<RestaurantMeal>>> Filter()
-        {
-            string minCalories = Request.Form["MinCalories"];
-            var maxCalories = Request.Form["MaxCalories"];
-            var minProtein = Request.Form["MinProtein"];
-            var maxProtein = Request.Form["MaxProtein"];
-            var minFats = Request.Form["MinFats"];
-            var maxFats = Request.Form["MaxFats"];
-            var minCarbs = Request.Form["MinCarbs"];
-            var maxCarbs = Request.Form["MaxCarbs"];
-            var filteredRecipes = _context.Recipes
-            .Where(r =>
-            (r.Calories >= int.Parse(minCalories)) &&
-            (r.Calories <= int.Parse(maxCalories)) &&
-            (r.Protein >= int.Parse(minProtein)) &&
-            (r.Protein <= int.Parse(maxProtein)) &&
-            (r.Fat >= int.Parse(minFats)) &&
-            (r.Fat <= int.Parse(maxFats)) &&
-            (r.Carbs >= int.Parse(minCarbs)) &&
-            (r.Carbs <= int.Parse(maxCarbs))
-            )
-            .ToList();
-            var filteredRecipes2 = _context.RestaurantMeals
-            .Where(r =>
-            (r.Calories >= int.Parse(minCalories)) &&
-            (r.Calories <= int.Parse(maxCalories)) &&
-            (r.Protein >= int.Parse(minProtein)) &&
-            (r.Protein <= int.Parse(maxProtein)) &&
-            (r.Fat >= int.Parse(minFats)) &&
-            (r.Fat <= int.Parse(maxFats)) &&
-            (r.Carbs >= int.Parse(minCarbs)) &&
-            (r.Carbs <= int.Parse(maxCarbs))
-            )
-            .ToList();
-            return filteredRecipes2;
-        }
+
+        
+        
+
+      
+       
+
     } 
 }
Index: NutriMatch/Controllers/RestaurantsController.cs
===================================================================
--- NutriMatch/Controllers/RestaurantsController.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Controllers/RestaurantsController.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,72 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
+using Microsoft.EntityFrameworkCore;
+using NutriMatch.Data;
+
+namespace NutriMatch.Controllers
+{
+
+    public class RestaurantsController : Controller
+    {
+        private readonly AppDbContext _context;
+
+
+        public RestaurantsController(AppDbContext context)
+        {
+
+            _context = context;
+        }
+
+
+        public async Task<IActionResult> Index()
+        {
+            var restaurants = await _context.Restaurants.ToListAsync();
+            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)
+        {
+            if (id == null)
+            {
+                return NotFound();
+            }
+
+            var restaurant = await _context.Restaurants.Include(r => r.RestaurantMeals)
+                .FirstOrDefaultAsync(m => m.Id == id);
+            if (restaurant == null)
+            {
+                return NotFound();
+            }
+
+
+
+            var filteredMeals = restaurant.RestaurantMeals
+        .Where(r =>
+            (minCalories == null || r.Calories >= minCalories) &&
+            (maxCalories == null || r.Calories <= maxCalories) &&
+            (minProtein == null || r.Protein >= minProtein) &&
+            
+            (maxProtein == null || r.Protein <= maxProtein) &&
+            (minFat == null || r.Fat >= minFat) &&
+            (maxFat == null || r.Fat <= maxFat) &&
+            (minCarbs == null || r.Carbs >= minCarbs) &&
+            (maxCarbs == null || r.Carbs <= maxCarbs)
+        )
+        .ToList();
+
+            Console.WriteLine($"Total meals for restaurant {id}: {filteredMeals.Count}");
+
+
+            return PartialView("_RestaurantMealsPartial", filteredMeals);
+        }
+
+        
+        
+    }
+}
Index: NutriMatch/Data/AppDbContext.cs
===================================================================
--- NutriMatch/Data/AppDbContext.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Data/AppDbContext.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -1,4 +1,5 @@
 using Microsoft.EntityFrameworkCore;
 using NutriMatch.Models;
+
 namespace NutriMatch.Data
 {
@@ -6,33 +7,15 @@
     {
         public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
+
         public DbSet<Recipe> Recipes { get; set; }
         public DbSet<RecipeIngredient> RecipeIngredients { get; set; }
+
         public DbSet<Ingredient> Ingredients { get; set; }
+        
         public DbSet<RestaurantMeal> RestaurantMeals { get; set; }
+        
         public DbSet<Restaurant> Restaurants { get; set; }
-        protected override void OnModelCreating(ModelBuilder modelBuilder)
-        {
-            base.OnModelCreating(modelBuilder);
-            modelBuilder.Entity<Ingredient>()
-                .ToTable("food_macronutrients");
-            modelBuilder.Entity<Ingredient>()
-                .Property(e => e.Id)
-                .HasColumnName("id");
-            modelBuilder.Entity<Ingredient>()
-                .Property(e => e.Name)
-                .HasColumnName("food_name");
-            modelBuilder.Entity<Ingredient>()
-                .Property(e => e.Calories)
-                .HasColumnName("energy_kcal");
-            modelBuilder.Entity<Ingredient>()
-                .Property(e => e.Protein)
-                .HasColumnName("protein_g");
-            modelBuilder.Entity<Ingredient>()
-                .Property(e => e.Fat)
-                .HasColumnName("total_fat_g");
-            modelBuilder.Entity<Ingredient>()
-                .Property(e => e.Carbs)
-                .HasColumnName("carbohydrates_g");
-        }
+
+       
     }
 }
Index: NutriMatch/Migrations/20250627150936_AddRestaurantDesc.Designer.cs
===================================================================
--- NutriMatch/Migrations/20250627150936_AddRestaurantDesc.Designer.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Migrations/20250627150936_AddRestaurantDesc.Designer.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,174 @@
+// <auto-generated />
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using NutriMatch.Data;
+#nullable disable
+namespace NutriMatch.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20250627150936_AddRestaurantDesc")]
+    partial class AddRestaurantDesc
+    {
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.5")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+            modelBuilder.Entity("NutriMatch.Models.Ingredient", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasColumnName("id");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Calories")
+                        .HasColumnType("real")
+                        .HasColumnName("energy_kcal");
+                    b.Property<float>("Carbs")
+                        .HasColumnType("real")
+                        .HasColumnName("carbohydrates_g");
+                    b.Property<float>("Fat")
+                        .HasColumnType("real")
+                        .HasColumnName("total_fat_g");
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("food_name");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real")
+                        .HasColumnName("protein_g");
+                    b.HasKey("Id");
+                    b.ToTable("food_macronutrients", (string)null);
+                });
+            modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Calories")
+                        .HasColumnType("real");
+                    b.Property<float>("Carbs")
+                        .HasColumnType("real");
+                    b.Property<float>("Fat")
+                        .HasColumnType("real");
+                    b.Property<string>("ImageUrl")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.PrimitiveCollection<string[]>("Instructions")
+                        .HasColumnType("text[]");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real");
+                    b.Property<float>("Rating")
+                        .HasColumnType("real");
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.ToTable("Recipes");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredient", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<int>("IngredientId")
+                        .HasColumnType("integer");
+                    b.Property<float>("Quantity")
+                        .HasColumnType("real");
+                    b.Property<int>("RecipeId")
+                        .HasColumnType("integer");
+                    b.Property<string>("Unit")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("IngredientId");
+                    b.HasIndex("RecipeId");
+                    b.ToTable("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Restaurant", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<string>("Description")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<string>("ImageUrl")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.ToTable("Restaurants");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RestaurantMeal", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Calories")
+                        .HasColumnType("real");
+                    b.Property<float>("Carbs")
+                        .HasColumnType("real");
+                    b.Property<float>("Fat")
+                        .HasColumnType("real");
+                    b.Property<string>("ItemDescription")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<string>("ItemName")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real");
+                    b.Property<int?>("RestaurantId")
+                        .HasColumnType("integer");
+                    b.Property<string>("RestaurantName")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("RestaurantId");
+                    b.ToTable("RestaurantMeals");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredient", b =>
+                {
+                    b.HasOne("NutriMatch.Models.Ingredient", "Ingredient")
+                        .WithMany()
+                        .HasForeignKey("IngredientId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                    b.HasOne("NutriMatch.Models.Recipe", null)
+                        .WithMany("RecipeIngredients")
+                        .HasForeignKey("RecipeId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                    b.Navigation("Ingredient");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RestaurantMeal", b =>
+                {
+                    b.HasOne("NutriMatch.Models.Restaurant", "Restaurant")
+                        .WithMany("RestaurantMeals")
+                        .HasForeignKey("RestaurantId");
+                    b.Navigation("Restaurant");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
+                {
+                    b.Navigation("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Restaurant", b =>
+                {
+                    b.Navigation("RestaurantMeals");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
Index: NutriMatch/Migrations/20250627150936_AddRestaurantDesc.cs
===================================================================
--- NutriMatch/Migrations/20250627150936_AddRestaurantDesc.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Migrations/20250627150936_AddRestaurantDesc.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,23 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+#nullable disable
+namespace NutriMatch.Migrations
+{
+    public partial class AddRestaurantDesc : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "Description",
+                table: "Restaurants",
+                type: "text",
+                nullable: false,
+                defaultValue: "");
+        }
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "Description",
+                table: "Restaurants");
+        }
+    }
+}
Index: NutriMatch/Migrations/20250708184458_ChangeIngredientsTable.Designer.cs
===================================================================
--- NutriMatch/Migrations/20250708184458_ChangeIngredientsTable.Designer.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Migrations/20250708184458_ChangeIngredientsTable.Designer.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,168 @@
+// <auto-generated />
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using NutriMatch.Data;
+#nullable disable
+namespace NutriMatch.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20250708184458_ChangeIngredientsTable")]
+    partial class ChangeIngredientsTable
+    {
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.5")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+            modelBuilder.Entity("NutriMatch.Models.Ingredient", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Calories")
+                        .HasColumnType("real");
+                    b.Property<float>("Carbs")
+                        .HasColumnType("real");
+                    b.Property<float>("Fat")
+                        .HasColumnType("real");
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real");
+                    b.HasKey("Id");
+                    b.ToTable("Ingredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Calories")
+                        .HasColumnType("real");
+                    b.Property<float>("Carbs")
+                        .HasColumnType("real");
+                    b.Property<float>("Fat")
+                        .HasColumnType("real");
+                    b.Property<string>("ImageUrl")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.PrimitiveCollection<string[]>("Instructions")
+                        .HasColumnType("text[]");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real");
+                    b.Property<float>("Rating")
+                        .HasColumnType("real");
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.ToTable("Recipes");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredient", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<int>("IngredientId")
+                        .HasColumnType("integer");
+                    b.Property<float>("Quantity")
+                        .HasColumnType("real");
+                    b.Property<int>("RecipeId")
+                        .HasColumnType("integer");
+                    b.Property<string>("Unit")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("IngredientId");
+                    b.HasIndex("RecipeId");
+                    b.ToTable("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Restaurant", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<string>("Description")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<string>("ImageUrl")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.ToTable("Restaurants");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RestaurantMeal", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Calories")
+                        .HasColumnType("real");
+                    b.Property<float>("Carbs")
+                        .HasColumnType("real");
+                    b.Property<float>("Fat")
+                        .HasColumnType("real");
+                    b.Property<string>("ItemDescription")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<string>("ItemName")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real");
+                    b.Property<int?>("RestaurantId")
+                        .HasColumnType("integer");
+                    b.Property<string>("RestaurantName")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("RestaurantId");
+                    b.ToTable("RestaurantMeals");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredient", b =>
+                {
+                    b.HasOne("NutriMatch.Models.Ingredient", "Ingredient")
+                        .WithMany()
+                        .HasForeignKey("IngredientId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                    b.HasOne("NutriMatch.Models.Recipe", null)
+                        .WithMany("RecipeIngredients")
+                        .HasForeignKey("RecipeId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                    b.Navigation("Ingredient");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RestaurantMeal", b =>
+                {
+                    b.HasOne("NutriMatch.Models.Restaurant", "Restaurant")
+                        .WithMany("RestaurantMeals")
+                        .HasForeignKey("RestaurantId");
+                    b.Navigation("Restaurant");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
+                {
+                    b.Navigation("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Restaurant", b =>
+                {
+                    b.Navigation("RestaurantMeals");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
Index: NutriMatch/Migrations/20250708184458_ChangeIngredientsTable.cs
===================================================================
--- NutriMatch/Migrations/20250708184458_ChangeIngredientsTable.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Migrations/20250708184458_ChangeIngredientsTable.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,14 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+#nullable disable
+namespace NutriMatch.Migrations
+{
+    public partial class ChangeIngredientsTable : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+        }
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+        }
+    }
+}
Index: NutriMatch/Migrations/AppDbContextModelSnapshot.cs
===================================================================
--- NutriMatch/Migrations/AppDbContextModelSnapshot.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Migrations/AppDbContextModelSnapshot.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -22,25 +22,19 @@
                     b.Property<int>("Id")
                         .ValueGeneratedOnAdd()
-                        .HasColumnType("integer")
-                        .HasColumnName("id");
+                        .HasColumnType("integer");
                     NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
                     b.Property<float>("Calories")
-                        .HasColumnType("real")
-                        .HasColumnName("energy_kcal");
+                        .HasColumnType("real");
                     b.Property<float>("Carbs")
-                        .HasColumnType("real")
-                        .HasColumnName("carbohydrates_g");
+                        .HasColumnType("real");
                     b.Property<float>("Fat")
-                        .HasColumnType("real")
-                        .HasColumnName("total_fat_g");
+                        .HasColumnType("real");
                     b.Property<string>("Name")
                         .IsRequired()
-                        .HasColumnType("text")
-                        .HasColumnName("food_name");
+                        .HasColumnType("text");
                     b.Property<float>("Protein")
-                        .HasColumnType("real")
-                        .HasColumnName("protein_g");
+                        .HasColumnType("real");
                     b.HasKey("Id");
-                    b.ToTable("food_macronutrients", (string)null);
+                    b.ToTable("Ingredients");
                 });
             modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
@@ -97,4 +91,7 @@
                         .HasColumnType("integer");
                     NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<string>("Description")
+                        .IsRequired()
+                        .HasColumnType("text");
                     b.Property<string>("ImageUrl")
                         .IsRequired()
Index: NutriMatch/Models/HomeViewModel.cs
===================================================================
--- NutriMatch/Models/HomeViewModel.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Models/HomeViewModel.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,10 @@
+using NutriMatch.Models;
+
+namespace NutriMatch.Models
+{
+    public class HomeViewModel
+    {
+        public List<Recipe> Recipes { get; set; }
+        public List<Restaurant> Restaurants { get; set; }
+    }
+}
Index: triMatch/Models/NutritionInfo.cs
===================================================================
--- NutriMatch/Models/NutritionInfo.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,23 +1,0 @@
-using System;
-using System.Collections.Generic;
-using System.ComponentModel;
-using System.ComponentModel.DataAnnotations;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.EntityFrameworkCore;
-
-namespace NutriMatch.Models
-{
-    [Keyless]
-    public class NutritionInfo
-    {
-
-        public float Calories { get; set; }
-        public float Protein { get; set; }
-        public float Carbs { get; set; }
-        public float Fat { get; set; }
-        public float Sugar { get; set; }
-
-
-    }
-}
Index: NutriMatch/Models/RecipeIngredients.cs
===================================================================
--- NutriMatch/Models/RecipeIngredients.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Models/RecipeIngredients.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -23,6 +23,4 @@
         public float Quantity { get; set; }
 
-        [NotMapped]
-        public NutritionInfo NutritionInfo { get; set; } 
     }
 }
Index: NutriMatch/Models/Restaurant.cs
===================================================================
--- NutriMatch/Models/Restaurant.cs	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Models/Restaurant.cs	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -12,4 +12,6 @@
         public String ImageUrl { get; set; }
 
+        public String Description {get; set; }
+
         virtual public List<RestaurantMeal> RestaurantMeals { get; set; }
     }
Index: NutriMatch/Views/Home/Index.cshtml
===================================================================
--- NutriMatch/Views/Home/Index.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Views/Home/Index.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -1,12 +1,10 @@
-@model List<NutriMatch.Models.Recipe>
+@model NutriMatch.Models.HomeViewModel
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NutriMatch - Your Recipe Journey</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">
-    <link href="~/css/landing-page.css" rel="stylesheet">
+    <link href="~/css/HomeIndex.css" rel="stylesheet">
 </head>
 <body>
@@ -65,6 +63,6 @@
             <div class="row align-items-center">
                 <div class="col-lg-6">
-                    <div class="phone-mockup">
-                        <div class="phone-screen">
+                    <div class="sample-recipe">
+                        <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" 
@@ -102,5 +100,5 @@
             <p class="section-subtitle">Discover the most popular recipes shared by our community</p>
             <div class="row">
-                @foreach (var recipe in Model){ 
+                @foreach (var recipe in Model.Recipes){ 
                     <div class="col-md-6 col-lg-4">
                         <div class="recipe-card">
@@ -110,5 +108,4 @@
                             <img src="@recipe.ImageUrl" class="recipe-image">
                             <div class="recipe-content">
-                                <div class="chef-badge">User recipe</div>
                                 <h3 class="recipe-title">@recipe.Title</h3>
                                 <div class="recipe-meta">
@@ -116,9 +113,25 @@
                                         <i class="fas fa-star"></i> 4.8
                                     </span>
-                                    <span><i class="far fa-clock"></i> 25 min</span>
                                     <span><i class="fas fa-user"></i> Chef Mario</span>
                                 </div>
                                 <div class="calories-info">
-                                    <span class="calories"><i class="fas fa-fire"></i> @recipe.Calories</span>
+                                    <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>
@@ -158,84 +171,25 @@
         </div>
         <div class="container">
-            <div class="restaurants-container">
-                <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;">
-                        <img src="~/images/mc.png" style="width: 70px;">
+            <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;">
+                            <img src="@restaurant.ImageUrl" style="width: 70px;">
+                        </div>
+                        <div class="restaurant-name">@restaurant.Name</div>
+                        <div class="restaurant-items">@restaurant.Description</div>
+                        <div class="restaurant-rating">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star-half-alt"></i>
+                            <i class="far fa-star"></i>
+                            4.2
+                        </div>
                     </div>
-                    <div class="restaurant-name">McDonald's</div>
-                    <div class="restaurant-items">Fast Food • Burgers</div>
-                    <div class="restaurant-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star-half-alt"></i>
-                        <i class="far fa-star"></i>
-                        4.2
-                    </div>
-                </div>
-                <div class="restaurant-card">
-                    <div class="restaurant-logo" style="background: display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; font-weight: bold;">
-                        <img src="~/images/kfc.png" style="width: 70px;">
-                    </div>
-                    <div class="restaurant-name">KFC</div>
-                    <div class="restaurant-items">Fried Chicken • Fast Food</div>
-                    <div class="restaurant-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="far fa-star"></i>
-                        4.1
-                    </div>
-                </div>
-                <div class="restaurant-card">
-                    <div class="restaurant-logo" style="background: display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white; font-weight: bold;">
-                        <img src="~/images/bk.png" style="width: 70px;">
-                    </div>
-                    <div class="restaurant-name">Burger King</div>
-                    <div class="restaurant-items">Burgers • Fast Food</div>
-                    <div class="restaurant-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="far fa-star"></i>
-                        4.0
-                    </div>
-                </div>
-                <div class="restaurant-card">
-                    <div class="restaurant-logo" style="background: display: flex; align-items: center; justify-content: center; font-size: 1rem; color: white; font-weight: bold;">
-                        <img src="~/images/sub.png" style="width: 70px;">
-                    </div>
-                    <div class="restaurant-name">Subway</div>
-                    <div class="restaurant-items">Sandwiches • Healthy</div>
-                    <div class="restaurant-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star-half-alt"></i>
-                        4.3
-                    </div>
-                </div>
-                <div class="restaurant-card">
-                    <div class="restaurant-logo" style="background: display: flex; align-items: center; justify-content: center; font-size: 1rem; color: white; font-weight: bold;">
-                        <img src="~/images/taco.png" style="width: 70px;">
-                    </div>
-                    <div class="restaurant-name">Taco Bell</div>
-                    <div class="restaurant-items">Mexican • Tacos</div>
-                    <div class="restaurant-rating">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="far fa-star"></i>
-                        3.9
-                    </div>
-                </div>
+                }
             </div>
         </div>
-    </section>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    </section>    
 </body>
    
Index: NutriMatch/Views/Recipes/Create.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Create.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Views/Recipes/Create.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -6,340 +6,8 @@
 <html>
 <head>
-    <meta name="viewport" content="width=device-width" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Create Recipe - NutriMatch</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #fafbfc;
-            color: #1a1a1a;
-            line-height: 1.6;
-        }
-        .main-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        .page-header {
-            margin-bottom: 2.5rem;
-        }
-        .page-title {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: #1a1a1a;
-            margin-bottom: 0.5rem;
-            letter-spacing: -0.02em;
-        }
-        .page-subtitle {
-            font-size: 1.125rem;
-            color: #6b7280;
-            font-weight: 400;
-        }
-        .form-card {
-            background: white;
-            border-radius: 16px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-            border: 1px solid #e5e7eb;
-            overflow: hidden;
-        }
-        .form-content {
-            padding: 2.5rem;
-        }
-        .form-group {
-            margin-bottom: 2rem;
-        }
-        .form-group:last-child {
-            margin-bottom: 0;
-        }
-        .label {
-            display: block;
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: #374151;
-            margin-bottom: 0.5rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .input {
-            width: 100%;
-            padding: 0.875rem 1rem;
-            border: 1px solid #d1d5db;
-            border-radius: 8px;
-            font-size: 1rem;
-            background: white;
-            transition: all 0.2s ease;
-            font-family: inherit;
-        }
-        .input:focus {
-            outline: none;
-            border-color: #10b981;
-            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
-        }
-        .input::placeholder {
-            color: #9ca3af;
-        }
-        .textarea {
-            min-height: 120px;
-            resize: vertical;
-            font-family: inherit;
-        }
-        .flex-row {
-            display: flex;
-            gap: 1rem;
-            align-items: flex-end;
-        }
-        .flex-1 { flex: 1; }
-        .flex-2 { flex: 2; }
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.875rem 1.5rem;
-            border-radius: 8px;
-            font-size: 0.875rem;
-            font-weight: 600;
-            text-decoration: none;
-            border: none;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-family: inherit;
-            white-space: nowrap;
-        }
-        .btn-primary {
-            background: #10b981;
-            color: white;
-        }
-        .btn-primary:hover {
-            background: #059669;
-            transform: translateY(-1px);
-        }
-        .btn-secondary {
-            background: #f3f4f6;
-            color: #6b7280;
-            border: 1px solid #d1d5db;
-        }
-        .btn-secondary:hover {
-            background: #e5e7eb;
-            color: #374151;
-        }
-        .btn-large {
-            padding: 1rem 2rem;
-            font-size: 1rem;
-        }
-        .items-container {
-            margin-top: 1rem;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            background: #f9fafb;
-            min-height: 120px;
-        }
-        .items-empty {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 120px;
-            color: #9ca3af;
-            font-size: 0.875rem;
-        }
-        .item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.875rem 1rem;
-            background: white;
-            border-bottom: 1px solid #e5e7eb;
-            transition: background-color 0.2s ease;
-        }
-        .item:last-child {
-            border-bottom: none;
-        }
-        .item:hover {
-            background: #f9fafb;
-        }
-        .item-content {
-            flex: 1;
-            font-size: 0.875rem;
-            color: #374151;
-        }
-        .item-remove {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #fef2f2;
-            border: 1px solid #fecaca;
-            color: #dc2626;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-size: 0.75rem;
-        }
-        .item-remove:hover {
-            background: #fee2e2;
-            transform: scale(1.05);
-        }
-        .search-container {
-            position: relative;
-        }
-        .dropdown {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background: white;
-            border: 1px solid #d1d5db;
-            border-top: none;
-            border-radius: 0 0 8px 8px;
-            max-height: 200px;
-            overflow-y: auto;
-            z-index: 100;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            display: none;
-        }
-        .dropdown.show {
-            display: block;
-        }
-        .dropdown-item {
-            padding: 0.75rem 1rem;
-            cursor: pointer;
-            border-bottom: 1px solid #f3f4f6;
-            font-size: 0.875rem;
-            color: #374151;
-            transition: background-color 0.2s ease;
-        }
-        .dropdown-item:hover {
-            background: #f9fafb;
-        }
-        .dropdown-item:last-child {
-            border-bottom: none;
-        }
-        .file-upload-area {
-            border: 2px dashed #d1d5db;
-            border-radius: 8px;
-            padding: 2rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            background: #fafbfc;
-            position: relative;
-        }
-        .file-upload-area:hover {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-        .file-upload-area.dragover {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-        .file-upload-icon {
-            width: 48px;
-            height: 48px;
-            margin: 0 auto 1rem;
-            background: #f3f4f6;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            color: #6b7280;
-        }
-        .file-upload-text {
-            font-size: 0.875rem;
-            color: #6b7280;
-            margin-bottom: 0.5rem;
-        }
-        .file-upload-hint {
-            font-size: 0.75rem;
-            color: #9ca3af;
-        }
-        .file-input {
-            position: absolute;
-            inset: 0;
-            opacity: 0;
-            cursor: pointer;
-        }
-        .form-actions {
-            margin-top: 2.5rem;
-            padding-top: 2rem;
-            border-top: 1px solid #e5e7eb;
-            display: flex;
-            gap: 1rem;
-            justify-content: flex-end;
-        }
-        .back-link {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: #6b7280;
-            text-decoration: none;
-            font-size: 0.875rem;
-            font-weight: 500;
-            transition: color 0.2s ease;
-            margin-top: 1rem;
-        }
-        .back-link:hover {
-            color: #10b981;
-        }
-        .validation-error {
-            color: #dc2626;
-            font-size: 0.75rem;
-            margin-top: 0.25rem;
-        }
-        @@media (max-width: 768px) {
-            .main-container {
-                padding: 1rem;
-            }
-            .form-content {
-                padding: 1.5rem;
-            }
-            .page-title {
-                font-size: 2rem;
-            }
-            .flex-row {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .form-actions {
-                flex-direction: column-reverse;
-            }
-            .btn {
-                width: 100%;
-                justify-content: center;
-            }
-        }
-        .item {
-            animation: slideIn 0.3s ease;
-        }
-        @@keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .dropdown::-webkit-scrollbar {
-            width: 4px;
-        }
-        .dropdown::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        .dropdown::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 2px;
-        }
-        .btn:focus,
-        .input:focus {
-            outline: 2px solid #10b981;
-            outline-offset: 2px;
-        }
-    </style>
+    <link href="~/css/RecipeCreate.css" rel="stylesheet" />
 </head>
 <body>
@@ -361,19 +29,4 @@
                                required />
                         <div class="validation-error" id="titleValidation"></div>
-                    </div>
-                    <div class="form-group">
-                        <label class="label">Instructions</label>
-                        <div class="flex-row">
-                            <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
-                            </button>
-                        </div>
-                        <div class="items-container" id="instructionsList">
-                            <div class="items-empty">No instructions added yet</div>
-                        </div>
-                        <input type="hidden" id="selectedInstructions" name="Instructions" />
                     </div>
                     <div class="form-group">
@@ -412,4 +65,19 @@
                     </div>
                     <div class="form-group">
+                        <label class="label">Instructions</label>
+                        <div class="flex-row">
+                            <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
+                            </button>
+                        </div>
+                        <div class="items-container" id="instructionsList">
+                            <div class="items-empty">No instructions added yet</div>
+                        </div>
+                        <input type="hidden" id="selectedInstructions" name="Instructions" />
+                    </div>
+                    <div class="form-group">
                     <label class="form-label">Recipe Photo</label>
                         <div class="file-upload-area" id="fileUploadArea">
@@ -422,7 +90,4 @@
                     </div>
                     <div class="form-actions">
-                        <button type="button" class="btn btn-secondary">
-                            Save as Draft
-                        </button>
                         <button type="submit" class="btn btn-primary btn-large">
                             Create Recipe
@@ -436,146 +101,5 @@
         </a>
     </div>
-    <script>
-document.addEventListener('DOMContentLoaded', function() {
-    const aiPictureButton = document.querySelector('.btn-secondary');
-    const titleInput = document.getElementById('Title');
-    const imagePreview = document.getElementById('imagePreview');
-    const fileInput = document.getElementById('RecipeImage');
-    aiPictureButton.textContent = 'Generate AI Picture';
-    aiPictureButton.innerHTML = '🎨 Generate AI Picture';
-    aiPictureButton.addEventListener('click', async function() {
-        const recipeTitle = titleInput.value.trim();
-        if (!recipeTitle) {
-            alert('Please enter a recipe title first!');
-            titleInput.focus();
-            return;
-        }
-        const originalText = aiPictureButton.innerHTML;
-        aiPictureButton.innerHTML = '⏳ Generating...';
-        aiPictureButton.disabled = true;
-        try {
-            await generateAIPicture(recipeTitle);
-        } catch (error) {
-            console.error('Error generating AI picture:', error);
-            alert('Failed to generate AI picture. Please try again.');
-        } finally {
-            aiPictureButton.innerHTML = originalText;
-            aiPictureButton.disabled = false;
-        }
-    });
-    async function generateAIPicture(recipeTitle) {
-        try {
-            const prompt = `A delicious ${recipeTitle} food photography, professional lighting, appetizing, high quality, detailed`;
-            const pollinationsUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=800&height=600&seed=${Math.floor(Math.random() * 1000000)}`;
-            imagePreview.innerHTML = `
-                <div style="text-align: center; padding: 2rem;">
-                    <div style="width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #10b981; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem;"></div>
-                    <p style="color: #6b7280;">Generating AI picture...</p>
-                </div>
-            `;
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = function() {
-                imagePreview.innerHTML = `
-                    <img src="${pollinationsUrl}" alt="AI generated ${recipeTitle}" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <p style="margin-top: 0.5rem; color: #10b981; font-weight: 500;">✓ AI picture generated successfully</p>
-                    <button type="button" onclick="useAIImage('${pollinationsUrl}')" style="margin-top: 0.5rem; padding: 0.5rem 1rem; background: #10b981; color: white; border: none; border-radius: 5px; cursor: pointer;">Use This Image</button>
-                `;
-            };
-            img.onerror = function() {
-                tryAlternativeImageGeneration(recipeTitle);
-            };
-            img.src = pollinationsUrl;
-        } catch (error) {
-            console.error('Error in generateAIPicture:', error);
-            tryAlternativeImageGeneration(recipeTitle);
-        }
-    }
-    async function tryAlternativeImageGeneration(recipeTitle) {
-        try {
-            const foodKeywords = ['food', 'meal', 'dish', 'cooking', 'kitchen', 'restaurant'];
-            const randomKeyword = foodKeywords[Math.floor(Math.random() * foodKeywords.length)];
-            const picsumUrl = `https://picsum.photos/800/600?random=${Date.now()}`;
-            imagePreview.innerHTML = `
-                <img src="${picsumUrl}" alt="Generated image for ${recipeTitle}" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                <p style="margin-top: 0.5rem; color: #10b981; font-weight: 500;">✓ Image generated successfully</p>
-                <button type="button" onclick="useAIImage('${picsumUrl}')" style="margin-top: 0.5rem; padding: 0.5rem 1rem; background: #10b981; color: white; border: none; border-radius: 5px; cursor: pointer;">Use This Image</button>
-            `;
-        } catch (error) {
-            imagePreview.innerHTML = `
-                <div style="text-align: center; padding: 2rem; color: #dc2626;">
-                    <p>❌ Failed to generate image</p>
-                    <p style="font-size: 0.875rem; margin-top: 0.5rem;">Please try uploading an image manually</p>
-                </div>
-            `;
-        }
-    }
-    window.useAIImage = async function(imageUrl) {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-            const file = new File([blob], `ai-generated-${Date.now()}.jpg`, { type: 'image/jpeg' });
-            const dt = new DataTransfer();
-            dt.items.add(file);
-            fileInput.files = dt.files;
-            imagePreview.innerHTML = `
-                <img src="${imageUrl}" alt="Selected AI generated image" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                <p style="margin-top: 0.5rem; color: #10b981; font-weight: 500;">✓ AI image selected for upload</p>
-            `;
-            console.log('AI image set successfully');
-        } catch (error) {
-            console.error('Error setting AI image:', error);
-            alert('Error setting the AI image. Please try again.');
-        }
-    };
-});
-const style = document.createElement('style');
-style.textContent = `
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-`;
-document.head.appendChild(style);
-    </script>
-    <script>
-        const fileUploadArea = document.getElementById('fileUploadArea');
-        const fileInput = document.getElementById('RecipeImage');
-        const imagePreview = document.getElementById('imagePreview');
-        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]);
-            }
-        });
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files && e.target.files[0]) {
-                handleFileSelect(e.target.files[0]);
-            }
-        });
-        function handleFileSelect(file) {
-            if (file.type.startsWith('image/')) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.innerHTML = `
-                        <img src="${e.target.result}" alt="Recipe preview" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                        <p style="margin-top: 0.5rem; color: #4CAF50; font-weight: 500;">✓ Image uploaded successfully</p>
-                    `;
-                };
-                reader.readAsDataURL(file);
-            }
-        }
-    </script>
 </body>
 </html>
-<script src="~/js/recipe-search.js"></script>
+<script src="~/js/RecipeCreate.js"></script>
Index: triMatch/Views/Recipes/Details.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Details.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,62 +1,0 @@
-@model NutriMatch.Models.Recipe
-
-@{
-    Layout = null;
-}
-
-<!DOCTYPE html>
-
-<html>
-<head>
-    <meta name="viewport" content="width=device-width" />
-    <title>Details</title>
-</head>
-<body>
-
-<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>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.ImageUrl)
-        </dt>
-        <dd>
-            <img src="@Model.ImageUrl" width="200" height="200" />
-        </dd>
-        <dt>
-            <ul>
-            @foreach (var ingredient in Model.RecipeIngredients){
-                <li>
-                    @Html.DisplayFor(modelItem => ingredient.Ingredient.Name) 
-                    @Html.DisplayFor(modelItem => ingredient.Quantity) 
-                    @Html.DisplayFor(modelItem => ingredient.Unit)
-                </li>
-            }
-            </ul>
-        </dt>
-    </dl>
-</div>
-<div>
-    <a asp-action="Edit" asp-route-id="@Model?.Id">Edit</a> |
-    <a asp-action="Index">Back to List</a>
-</div>
-</body>
-</html>
Index: NutriMatch/Views/Recipes/Edit.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Edit.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Views/Recipes/Edit.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -9,343 +9,10 @@
     <meta name="viewport" content="width=device-width" />
     <title>Edit Recipe - NutriMatch</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #fafbfc;
-            color: #1a1a1a;
-            line-height: 1.6;
-        }
-        .main-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        .page-header {
-            margin-bottom: 2.5rem;
-        }
-        .page-title {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: #1a1a1a;
-            margin-bottom: 0.5rem;
-            letter-spacing: -0.02em;
-        }
-        .page-subtitle {
-            font-size: 1.125rem;
-            color: #6b7280;
-            font-weight: 400;
-        }
-        .form-card {
-            background: white;
-            border-radius: 16px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-            border: 1px solid #e5e7eb;
-            overflow: hidden;
-        }
-        .form-content {
-            padding: 2.5rem;
-        }
-        .form-group {
-            margin-bottom: 2rem;
-        }
-        .form-group:last-child {
-            margin-bottom: 0;
-        }
-        .label {
-            display: block;
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: #374151;
-            margin-bottom: 0.5rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .input {
-            width: 100%;
-            padding: 0.875rem 1rem;
-            border: 1px solid #d1d5db;
-            border-radius: 8px;
-            font-size: 1rem;
-            background: white;
-            transition: all 0.2s ease;
-            font-family: inherit;
-        }
-        .input:focus {
-            outline: none;
-            border-color: #10b981;
-            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
-        }
-        .input::placeholder {
-            color: #9ca3af;
-        }
-        .textarea {
-            min-height: 120px;
-            resize: vertical;
-            font-family: inherit;
-        }
-        .flex-row {
-            display: flex;
-            gap: 1rem;
-            align-items: flex-end;
-        }
-        .flex-1 { flex: 1; }
-        .flex-2 { flex: 2; }
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.875rem 1.5rem;
-            border-radius: 8px;
-            font-size: 0.875rem;
-            font-weight: 600;
-            text-decoration: none;
-            border: none;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-family: inherit;
-            white-space: nowrap;
-        }
-        .btn-primary {
-            background: #10b981;
-            color: white;
-        }
-        .btn-primary:hover {
-            background: #059669;
-            transform: translateY(-1px);
-        }
-        .btn-secondary {
-            background: #f3f4f6;
-            color: #6b7280;
-            border: 1px solid #d1d5db;
-        }
-        .btn-secondary:hover {
-            background: #e5e7eb;
-            color: #374151;
-        }
-        .btn-large {
-            padding: 1rem 2rem;
-            font-size: 1rem;
-        }
-        .items-container {
-            margin-top: 1rem;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            background: #f9fafb;
-            min-height: 120px;
-        }
-        .items-empty {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 120px;
-            color: #9ca3af;
-            font-size: 0.875rem;
-        }
-        .item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.875rem 1rem;
-            background: white;
-            border-bottom: 1px solid #e5e7eb;
-            transition: background-color 0.2s ease;
-        }
-        .item:last-child {
-            border-bottom: none;
-        }
-        .item:hover {
-            background: #f9fafb;
-        }
-        .item-content {
-            flex: 1;
-            font-size: 0.875rem;
-            color: #374151;
-        }
-        .item-remove {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #fef2f2;
-            border: 1px solid #fecaca;
-            color: #dc2626;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-size: 0.75rem;
-        }
-        .item-remove:hover {
-            background: #fee2e2;
-            transform: scale(1.05);
-        }
-        .search-container {
-            position: relative;
-        }
-        .dropdown {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background: white;
-            border: 1px solid #d1d5db;
-            border-top: none;
-            border-radius: 0 0 8px 8px;
-            max-height: 200px;
-            overflow-y: auto;
-            z-index: 100;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            display: none;
-        }
-        .dropdown.show {
-            display: block;
-        }
-        .dropdown-item {
-            padding: 0.75rem 1rem;
-            cursor: pointer;
-            border-bottom: 1px solid #f3f4f6;
-            font-size: 0.875rem;
-            color: #374151;
-            transition: background-color 0.2s ease;
-        }
-        .dropdown-item:hover {
-            background: #f9fafb;
-        }
-        .dropdown-item:last-child {
-            border-bottom: none;
-        }
-        .file-upload-area {
-            border: 2px dashed #d1d5db;
-            border-radius: 8px;
-            padding: 2rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            background: #fafbfc;
-            position: relative;
-        }
-        .file-upload-area:hover {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-        .file-upload-area.dragover {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-        .file-upload-icon {
-            width: 48px;
-            height: 48px;
-            margin: 0 auto 1rem;
-            background: #f3f4f6;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            color: #6b7280;
-        }
-        .file-upload-text {
-            font-size: 0.875rem;
-            color: #6b7280;
-            margin-bottom: 0.5rem;
-        }
-        .file-upload-hint {
-            font-size: 0.75rem;
-            color: #9ca3af;
-        }
-        .file-input {
-            position: absolute;
-            inset: 0;
-            opacity: 0;
-            cursor: pointer;
-        }
-        .form-actions {
-            margin-top: 2.5rem;
-            padding-top: 2rem;
-            border-top: 1px solid #e5e7eb;
-            display: flex;
-            gap: 1rem;
-            justify-content: flex-end;
-        }
-        .back-link {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: #6b7280;
-            text-decoration: none;
-            font-size: 0.875rem;
-            font-weight: 500;
-            transition: color 0.2s ease;
-            margin-top: 1rem;
-        }
-        .back-link:hover {
-            color: #10b981;
-        }
-        .validation-error {
-            color: #dc2626;
-            font-size: 0.75rem;
-            margin-top: 0.25rem;
-        }
-        @@media (max-width: 768px) {
-            .main-container {
-                padding: 1rem;
-            }
-            .form-content {
-                padding: 1.5rem;
-            }
-            .page-title {
-                font-size: 2rem;
-            }
-            .flex-row {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .form-actions {
-                flex-direction: column-reverse;
-            }
-            .btn {
-                width: 100%;
-                justify-content: center;
-            }
-        }
-        .item {
-            animation: slideIn 0.3s ease;
-        }
-        @@keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .dropdown::-webkit-scrollbar {
-            width: 4px;
-        }
-        .dropdown::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        .dropdown::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 2px;
-        }
-        .btn:focus,
-        .input:focus {
-            outline: 2px solid #10b981;
-            outline-offset: 2px;
-        }
-    </style>
+    <link href="~/css/RecipeCreate.css" rel="stylesheet" />
 </head>
 <body>
     <div class="main-container">
         <div class="page-header">
-            <h1 class="page-title">Create Recipe</h1>
+            <h1 class="page-title">Edit Recipe</h1>
             <p class="page-subtitle">Share your culinary creation with the community</p>
         </div>
@@ -363,20 +30,4 @@
                                required />
                         <div class="validation-error" id="titleValidation"></div>
-                    </div>
-                    <div class="form-group">
-                        <label class="label">Instructions</label>
-                        <div class="flex-row">
-                            <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
-                            </button>
-                        </div>
-                        <div class="items-container" id="instructionsList">
-                            <div class="items-empty">
-                            </div>
-                        </div>
-                        <input type="hidden" id="selectedInstructions"  name="Instructions" />
                     </div>
                     <div class="form-group">
@@ -415,4 +66,20 @@
                     </div>
                     <div class="form-group">
+                        <label class="label">Instructions</label>
+                        <div class="flex-row">
+                            <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
+                            </button>
+                        </div>
+                        <div class="items-container" id="instructionsList">
+                            <div class="items-empty">
+                            </div>
+                        </div>
+                        <input type="hidden" id="selectedInstructions"  name="Instructions" />
+                    </div>
+                    <div class="form-group">
                     <label class="form-label">Recipe Photo</label>
                         <div class="file-upload-area" id="fileUploadArea">
@@ -421,4 +88,5 @@
                             <p>PNG, JPG, GIF up to 10MB</p>
                             <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;">
@@ -427,9 +95,6 @@
                     </div>
                     <div class="form-actions">
-                        <button type="button" class="btn btn-secondary">
-                            Save as Draft
-                        </button>
                         <button type="submit" class="btn btn-primary btn-large">
-                            Create Recipe
+                            Save Changes
                         </button>
                     </div>
@@ -441,147 +106,4 @@
         </a>
     </div>
-    <script>
-document.addEventListener('DOMContentLoaded', function() {
-    const aiPictureButton = document.querySelector('.btn-secondary');
-    const titleInput = document.getElementById('Title');
-    const imagePreview = document.getElementById('imagePreview');
-    const fileInput = document.getElementById('RecipeImage');
-    aiPictureButton.textContent = 'Generate AI Picture';
-    aiPictureButton.innerHTML = '🎨 Generate AI Picture';
-    aiPictureButton.addEventListener('click', async function() {
-        const recipeTitle = titleInput.value.trim();
-        if (!recipeTitle) {
-            alert('Please enter a recipe title first!');
-            titleInput.focus();
-            return;
-        }
-        const originalText = aiPictureButton.innerHTML;
-        aiPictureButton.innerHTML = '⏳ Generating...';
-        aiPictureButton.disabled = true;
-        try {
-            await generateAIPicture(recipeTitle);
-        } catch (error) {
-            console.error('Error generating AI picture:', error);
-            alert('Failed to generate AI picture. Please try again.');
-        } finally {
-            aiPictureButton.innerHTML = originalText;
-            aiPictureButton.disabled = false;
-        }
-    });
-    async function generateAIPicture(recipeTitle) {
-        try {
-            const prompt = `A delicious ${recipeTitle} food photography, professional lighting, appetizing, high quality, detailed`;
-            const pollinationsUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=800&height=600&seed=${Math.floor(Math.random() * 1000000)}`;
-            imagePreview.innerHTML = `
-                <div style="text-align: center; padding: 2rem;">
-                    <div style="width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #10b981; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem;"></div>
-                    <p style="color: #6b7280;">Generating AI picture...</p>
-                </div>
-            `;
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = function() {
-                imagePreview.innerHTML = `
-                    <img src="${pollinationsUrl}" alt="AI generated ${recipeTitle}" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <p style="margin-top: 0.5rem; color: #10b981; font-weight: 500;">✓ AI picture generated successfully</p>
-                    <button type="button" onclick="useAIImage('${pollinationsUrl}')" style="margin-top: 0.5rem; padding: 0.5rem 1rem; background: #10b981; color: white; border: none; border-radius: 5px; cursor: pointer;">Use This Image</button>
-                `;
-            };
-            img.onerror = function() {
-                tryAlternativeImageGeneration(recipeTitle);
-            };
-            img.src = pollinationsUrl;
-        } catch (error) {
-            console.error('Error in generateAIPicture:', error);
-            tryAlternativeImageGeneration(recipeTitle);
-        }
-    }
-    async function tryAlternativeImageGeneration(recipeTitle) {
-        try {
-            const foodKeywords = ['food', 'meal', 'dish', 'cooking', 'kitchen', 'restaurant'];
-            const randomKeyword = foodKeywords[Math.floor(Math.random() * foodKeywords.length)];
-            const picsumUrl = `https://picsum.photos/800/600?random=${Date.now()}`;
-            imagePreview.innerHTML = `
-                <img src="${picsumUrl}" alt="Generated image for ${recipeTitle}" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                <p style="margin-top: 0.5rem; color: #10b981; font-weight: 500;">✓ Image generated successfully</p>
-                <button type="button" onclick="useAIImage('${picsumUrl}')" style="margin-top: 0.5rem; padding: 0.5rem 1rem; background: #10b981; color: white; border: none; border-radius: 5px; cursor: pointer;">Use This Image</button>
-            `;
-        } catch (error) {
-            imagePreview.innerHTML = `
-                <div style="text-align: center; padding: 2rem; color: #dc2626;">
-                    <p>❌ Failed to generate image</p>
-                    <p style="font-size: 0.875rem; margin-top: 0.5rem;">Please try uploading an image manually</p>
-                </div>
-            `;
-        }
-    }
-    window.useAIImage = async function(imageUrl) {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-            const file = new File([blob], `ai-generated-${Date.now()}.jpg`, { type: 'image/jpeg' });
-            const dt = new DataTransfer();
-            dt.items.add(file);
-            fileInput.files = dt.files;
-            imagePreview.innerHTML = `
-                <img src="${imageUrl}" alt="Selected AI generated image" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                <p style="margin-top: 0.5rem; color: #10b981; font-weight: 500;">✓ AI image selected for upload</p>
-            `;
-            console.log('AI image set successfully');
-            console.log('AI image file:', file);
-        } catch (error) {
-            console.error('Error setting AI image:', error);
-            alert('Error setting the AI image. Please try again.');
-        }
-    };
-});
-const style = document.createElement('style');
-style.textContent = `
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-`;
-document.head.appendChild(style);
-    </script>
-    <script>
-        const fileUploadArea = document.getElementById('fileUploadArea');
-        const fileInput = document.getElementById('RecipeImage');
-        const imagePreview = document.getElementById('imagePreview');
-        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]);
-            }
-        });
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files && e.target.files[0]) {
-                handleFileSelect(e.target.files[0]);
-            }
-        });
-        function handleFileSelect(file) {
-            if (file.type.startsWith('image/')) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.innerHTML = `
-                        <img src="${e.target.result}" alt="Recipe preview" style="max-width: 300px; max-height: 200px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                        <p style="margin-top: 0.5rem; color: #4CAF50; font-weight: 500;">✓ Image uploaded successfully</p>
-                    `;
-                };
-                reader.readAsDataURL(file);
-            }
-        }
-        console.log();
-    </script>
 </body>
 </html>
@@ -592,3 +114,3 @@
    @Html.Raw(JsonSerializer.Serialize(Model.RecipeIngredients))
 </script>
-<script src="~/js/recipe-search-edit.js"></script>
+<script src="~/js/RecipeEdit.js"></script>
Index: NutriMatch/Views/Recipes/Index.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Index.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Views/Recipes/Index.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -1,3 +1,3 @@
-@model IEnumerable<NutriMatch.Models.Recipe>
+@model List<NutriMatch.Models.Recipe>
 @{
     Layout = "_Layout";
@@ -8,304 +8,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="~/css/RecipeIndex.css" rel="stylesheet">
     <title>NutriMatch - Recipes</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 {
-            --nutri-green: #4ade80;
-            --nutri-green-dark: #22c55e;
-            --nutri-gray: #6b7280;
-            --nutri-light-gray: #f3f4f6;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-            min-height: 100vh;
-        }
-        .navbar-brand {
-            font-weight: bold;
-            color: var(--nutri-green-dark) !important;
-            font-size: 1.8rem;
-        }
-        .search-container {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-            padding: 2rem;
-            margin: 2rem 0;
-            margin-top: 10rem;
-        }
-        .search-input {
-            border: 2px solid #e5e7eb;
-            border-radius: 50px;
-            padding: 1rem 1.5rem;
-            font-size: 1.1rem;
-            transition: all 0.3s ease;
-        }
-        .search-input:focus {
-            border-color: var(--nutri-green);
-            box-shadow: 0 0 0 0.2rem rgba(74, 222, 128, 0.25);
-        }
-        .search-btn {
-            background: var(--nutri-green);
-            border: none;
-            border-radius: 50px;
-            padding: 1rem 2rem;
-            color: white;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-        .search-btn:hover {
-            background: var(--nutri-green-dark);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);
-        }
-        .filter-section {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-            padding: 2rem;
-            margin-bottom: 2rem;
-        }
-        .slider-container {
-            margin: 1.5rem 0;
-        }
-        .slider-label {
-            font-weight: 600;
-            color: #374151;
-            margin-bottom: 1rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .range-slider {
-            position: relative;
-            height: 6px;
-            background: #e5e7eb;
-            border-radius: 3px;
-            margin: 1rem 0;
-        }
-        .range-input {
-            position: absolute;
-            width: 100%;
-            height: 6px;
-            top: 0;
-            background: none;
-            pointer-events: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-        }
-        .range-input::-webkit-slider-thumb {
-            height: 20px;
-            width: 20px;
-            border-radius: 50%;
-            background: var(--nutri-green);
-            cursor: pointer;
-            border: 2px solid white;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-            -webkit-appearance: none;
-            pointer-events: all;
-            position: relative;
-            z-index: 2;
-        }
-        .range-input::-moz-range-thumb {
-            height: 20px;
-            width: 20px;
-            border-radius: 50%;
-            background: var(--nutri-green);
-            cursor: pointer;
-            border: 2px solid white;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-            pointer-events: all;
-            position: relative;
-            z-index: 2;
-        }
-        .range-fill {
-            position: absolute;
-            height: 6px;
-            background: var(--nutri-green);
-            border-radius: 3px;
-            top: 0;
-        }
-        .recipe-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-            gap: 2rem;
-            margin-top: 2rem;
-            justify-items: center;
-        }
-        .recipe-card {
-            width: 350px !important;
-            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;
-            cursor: pointer;
-            min-height: 400px !important;
-            max-width: 350px !important;
-            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;
-        }
-        .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: auto;
-        }
-        .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;
-        }
-        .results-count {
-            margin: 1rem 0;
-            font-size: 1.1rem;
-            color: var(--nutri-gray);
-            font-weight: 600;
-        }
-        #modalWindow {
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 9999;
-            pointer-events: none;
-        }
-        #modalWindow .modal {
-            pointer-events: all;
-        }
-        .recipe-card * {
-            box-sizing: border-box;
-        }
-        .recipe-card[style*="none"] {
-            display: none !important;
-        }
-        .recipe-card[style*="block"] {
-            display: block !important;
-        }
-        .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>
 </head>
 <body>
@@ -327,4 +29,5 @@
                 <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>
             </h4>
             <div class="row">
@@ -333,10 +36,10 @@
                         <div class="slider-label">
                             <span><i class="fas fa-fire me-1" style="color: #ef4444;"></i>Calories</span>
-                            <span class="filter-values" id="caloriesValue">0 - 1000</span>
+                            <span class="filter-values" id="caloriesValue">0 - 2000</span>
                         </div>
                         <div class="range-slider">
                             <div class="range-fill" id="caloriesFill"></div>
-                            <input type="range" class="range-input" min="0" max="1000" value="0" id="caloriesMin" oninput="updateSlider('calories')">
-                            <input type="range" class="range-input" min="0" max="1000" value="1000" 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>
@@ -346,10 +49,10 @@
                         <div class="slider-label">
                             <span><i class="fas fa-drumstick-bite me-1" style="color: #8b5cf6;"></i>Protein (g)</span>
-                            <span class="filter-values" id="proteinValue">0 - 100</span>
+                            <span class="filter-values" id="proteinValue">0 - 150</span>
                         </div>
                         <div class="range-slider">
                             <div class="range-fill" id="proteinFill"></div>
-                            <input type="range" class="range-input" min="0" max="100" value="0" id="proteinMin" oninput="updateSlider('protein')">
-                            <input type="range" class="range-input" min="0" max="100" value="100" 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>
@@ -371,11 +74,11 @@
                     <div class="slider-container">
                         <div class="slider-label">
-                            <span><i class="fas fa-tint me-1" style="color: #06b6d4;"></i>Fats (g)</span>
-                            <span class="filter-values" id="fatsValue">0 - 100</span>
+                            <span><i class="fas fa-tint me-1" style="color: #e5eb4dfa;"></i>Fats (g)</span>
+                            <span class="filter-values" id="fatsValue">0 - 150</span>
                         </div>
                         <div class="range-slider">
                             <div class="range-fill" id="fatsFill"></div>
-                            <input type="range" class="range-input" min="0" max="100" value="0" id="fatsMin" oninput="updateSlider('fats')">
-                            <input type="range" class="range-input" min="0" max="100" value="100" 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>
@@ -384,5 +87,5 @@
         </div>
         <div class="results-count">
-            <i class="fas fa-utensils me-2"></i>Showing <strong>24 recipes</strong> matching your criteria
+            <i class="fas fa-utensils me-2"></i>Showing <strong> recipes</strong> matching your criteria
         </div>
         <div class="recipe-grid" id="recipeGrid">
@@ -400,5 +103,4 @@
                                 <i class="fas fa-star"></i> 4.8
                             </span>
-                            <span><i class="far fa-clock"></i> 25 min</span>
                             <span><i class="fas fa-user"></i> Chef Mario</span>
                         </div>
@@ -427,178 +129,6 @@
     </div>
     <div id="modalWindow"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
-    <script>
-        function showRecipeDetails(recipeId) {
-            const clickedCard = event.currentTarget;
-            clickedCard.classList.add('loading');
-            const titleElement = clickedCard.querySelector('.recipe-title');
-            const originalStyles = {
-                fontSize: '1.3rem',
-                fontWeight: '700',
-                color: '#1f2937',
-                marginBottom: '0.5rem',
-                lineHeight: '1.3'
-            };
-            Object.assign(titleElement.style, originalStyles);
-            fetch(`/Recipes/Details/${recipeId}`)
-                .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 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');
-                            titleElement.style.cssText = '';
-                        });
-                        modalElement.addEventListener('shown.bs.modal', function () {
-                            clickedCard.classList.remove('loading');
-                            Object.assign(titleElement.style, originalStyles);
-                        });
-                    } else {
-                        clickedCard.classList.remove('loading');
-                        titleElement.style.cssText = '';
-                    }
-                })
-                .catch(err => {
-                    console.error("Failed to fetch recipe details", err);
-                    alert("Failed to load recipe details. Please try again.");
-                    clickedCard.classList.remove('loading');
-                    titleElement.style.cssText = '';
-                });
-        }
-        function toggleFavorite(button) {
-            const icon = button.querySelector('i');
-            if (icon.classList.contains('far')) {
-                icon.classList.remove('far');
-                icon.classList.add('fas');
-                button.classList.add('active');
-            } else {
-                icon.classList.remove('fas');
-                icon.classList.add('far');
-                button.classList.remove('active');
-            }
-        }
-        document.addEventListener('DOMContentLoaded', function() {
-            updateSlider('calories');
-            updateSlider('protein');
-            updateSlider('carbs');
-            updateSlider('fats');
-        });
-        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 searchRecipes() {
-            const searchTerm = document.getElementById('searchInput').value;
-            console.log('Searching for:', searchTerm);
-            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 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;
-                if (matchesSearch && matchesMacros) {
-                    card.style.display = 'block';
-                    visibleCount++;
-                } else {
-                    card.style.display = 'none';
-                }
-            });
-            const resultsCount = document.querySelector('.results-count');
-            resultsCount.innerHTML = `<i class="fas fa-utensils me-2"></i>Showing <strong>${visibleCount} recipes</strong> matching your criteria`;
-        }
-        document.addEventListener('DOMContentLoaded', function() {
-            const searchInput = document.getElementById('searchInput');
-            searchInput.addEventListener('input', function() {
-                filterRecipes();
-            });
-            searchInput.addEventListener('keypress', function(e) {
-                if (e.key === 'Enter') {
-                    searchRecipes();
-                }
-            });
-            const filterSection = document.querySelector('.filter-section h4');
-            const resetBtn = document.createElement('button');
-            resetBtn.className = 'btn btn-outline-secondary btn-sm ms-3';
-            resetBtn.innerHTML = '<i class="fas fa-undo me-1"></i>Reset Filters';
-            resetBtn.onclick = resetFilters;
-            filterSection.appendChild(resetBtn);
-        });
-        function resetFilters() {
-            document.getElementById('caloriesMin').value = 0;
-            document.getElementById('caloriesMax').value = 1000;
-            document.getElementById('proteinMin').value = 0;
-            document.getElementById('proteinMax').value = 100;
-            document.getElementById('carbsMin').value = 0;
-            document.getElementById('carbsMax').value = 150;
-            document.getElementById('fatsMin').value = 0;
-            document.getElementById('fatsMax').value = 100;
-            document.getElementById('searchInput').value = '';
-            updateSlider('calories');
-            updateSlider('protein');
-            updateSlider('carbs');
-            updateSlider('fats');
-            filterRecipes();
-        }
-    </script>
+    <div id="modalWindowDelete"></div>
+    <script src="~/js/RecipeIndex.js"></script>
 </body>
 </html>
Index: triMatch/Views/Recipes/RecipeDetailsPartial.cshtml
===================================================================
--- NutriMatch/Views/Recipes/RecipeDetailsPartial.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,419 +1,0 @@
-@model NutriMatch.Models.Recipe
-<div class="modal fade" id="recipeModal" tabindex="-1" aria-labelledby="recipeModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl">
-        <div class="modal-content">
-            <div class="modal-header border-0">
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="recipe-hero">
-                    <div class="recipe-image-container">
-                        <img src="@Model.ImageUrl" alt="@Model.Title" class="recipe-image">
-                    </div>
-                    <div class="recipe-info">
-                        <div>
-                            <div class="chef-badge">
-                                <img src="#" class="chef-avatar">
-                                Chef Milan
-                                <span class="rating-stars">
-                                    @for (int i = 1; i <= 5; i++)
-                                    {
-                                        if (i <= Model.Rating)
-                                        {
-                                            <i class="fas fa-star"></i>
-                                        }
-                                        else
-                                        {
-                                            <i class="far fa-star"></i>
-                                        }
-                                    }
-                                </span>
-                            </div>
-                            <h2 class="recipe-title">@Model.Title</h2>
-                        </div>
-                        <div class="recipe-stats">
-                            <div class="stat-item">
-                                <span class="stat-value">20</span>
-                                <span class="stat-label">mins</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-value">@Model.Calories</span>
-                                <span class="stat-label">calories</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-4">
-                        <div class="nutrition-card">
-                            <h4 class="section-title">
-                                <i class="fas fa-chart-pie"></i>
-                                Nutrition Facts
-                            </h4>
-                            <div class="nutrition-grid">
-                                <div class="nutrition-item">
-                                    <div class="nutrition-value">@Model.Calories</div>
-                                    <div class="nutrition-label">Calories</div>
-                                </div>
-                                <div class="nutrition-item">
-                                    <div class="nutrition-value">@Model.Protein</div>
-                                    <div class="nutrition-label">Protein</div>
-                                </div>
-                                <div class="nutrition-item">
-                                    <div class="nutrition-value">@Model.Carbs</div>
-                                    <div class="nutrition-label">Carbs</div>
-                                </div>
-                                <div class="nutrition-item">
-                                    <div class="nutrition-value">@Model.Fat</div>
-                                    <div class="nutrition-label">Fat</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-8">
-                        <div class="ingredients-list">
-                            <h4 class="section-title">
-                                <i class="fas fa-list-ul"></i>
-                                Ingredients
-                            </h4>
-                            @if (Model.RecipeIngredients != null && Model.RecipeIngredients.Any())
-                            {
-                                @for (int i = 0; i < Model.RecipeIngredients.Count; i++)
-                                {
-                                    <div class="ingredient-item">
-                                        <input type="checkbox" class="ingredient-checkbox" id="ingredient@(i + 1)"> 
-                                        <label for="ingredient@(i + 1)">@Model.RecipeIngredients[i].Ingredient.Name, @Model.RecipeIngredients[i].Quantity @Model.RecipeIngredients[i].Unit </label>
-                                    </div>
-                                }
-                            }
-                        </div>
-                        <div class="instructions-list">
-                            <h4 class="section-title">
-                                <i class="fas fa-clipboard-list"></i>
-                                Instructions
-                            </h4>
-                            <p>@Model.Instructions</p>
-                        </div>
-                        <div class="action-buttons">
-                                <button type="submit" class="btn btn-nutri">
-                                    <i class="fas fa-heart me-2"></i>
-                                    Save Recipe
-                                </button>
-                                <button type="submit" class="btn btn-outline-nutri">
-                                    <i class="fas fa-calendar-plus me-2"></i>
-                                    Add to Meal Plan
-                                </button>
-                                <button type="submit" class="btn btn-outline-nutri">
-                                    <i class="fas fa-shopping-cart me-2"></i>
-                                    Add to Shopping List
-                                </button>
-                            <button type="button" class="btn btn-outline-nutri" onclick="shareRecipe(@Model.Id)">
-                                <i class="fas fa-share-alt me-2"></i>
-                                Share Recipe
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<style>
-    :root {
-        --nutri-primary: #4CAF50;
-        --nutri-secondary: #45A049;
-        --nutri-light: #E8F5E8;
-        --nutri-dark: #2E7D32;
-    }
-    .modal-xl {
-        max-width: 1200px;
-    }
-    .recipe-hero {
-        display: flex;
-        gap: 2rem;
-        background: white;
-        border-radius: 15px;
-        overflow: hidden;
-        margin-bottom: 2rem;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-        min-height: 300px;
-    }
-    .recipe-image-container {
-        flex: 0 0 40%;
-        position: relative;
-        overflow: hidden;
-        border-radius: 15px 0 0 15px;
-    }
-    .recipe-image {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        transition: transform 0.3s ease;
-    }
-    .recipe-image:hover {
-        transform: scale(1.05);
-    }
-    .recipe-info {
-        flex: 1;
-        padding: 2rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-    .chef-badge {
-        display: inline-flex;
-        align-items: center;
-        background: var(--nutri-primary);
-        color: white;
-        padding: 0.5rem 1rem;
-        border-radius: 25px;
-        font-size: 0.9rem;
-        margin-bottom: 1rem;
-        font-weight: 500;
-    }
-    .chef-avatar {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        margin-right: 0.5rem;
-        border: 2px solid white;
-    }
-    .rating-stars {
-        color: #FFD700;
-        margin-left: 0.5rem;
-    }
-    @@media (max-width: 768px) {
-        .recipe-hero {
-            flex-direction: column;
-        }
-        .recipe-image-container {
-            flex: none;
-            height: 250px;
-            border-radius: 15px 15px 0 0;
-        }
-        .recipe-stats {
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-        .stat-item {
-            min-width: calc(50% - 0.5rem);
-        }
-    }
-    .recipe-stats {
-        display: flex;
-        gap: 1.5rem;
-        margin-top: 1.5rem;
-    }
-    .stat-item {
-        text-align: center;
-        background: var(--nutri-light);
-        padding: 1rem;
-        border-radius: 10px;
-        flex: 1;
-        min-width: 80px;
-    }
-    .stat-value {
-        font-size: 1.5rem;
-        font-weight: bold;
-        display: block;
-        color: var(--nutri-dark);
-    }
-    .stat-label {
-        font-size: 0.9rem;
-        color: #666;
-        margin-top: 0.25rem;
-    }
-    .recipe-title {
-        color: var(--nutri-dark);
-        font-size: 2rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-        line-height: 1.2;
-    }
-    .recipe-description {
-        color: #666;
-        font-size: 1.1rem;
-        line-height: 1.5;
-        margin-bottom: 1.5rem;
-    }
-    .nutrition-card {
-        background: var(--nutri-light);
-        border-radius: 15px;
-        padding: 1.5rem;
-        margin-bottom: 1.5rem;
-    }
-    .nutrition-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-        gap: 1rem;
-    }
-    .nutrition-item {
-        text-align: center;
-        background: white;
-        padding: 1rem;
-        border-radius: 10px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-    .nutrition-value {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: var(--nutri-dark);
-    }
-    .nutrition-label {
-        font-size: 0.9rem;
-        color: #666;
-        margin-top: 0.25rem;
-    }
-    .ingredients-list {
-        background: white;
-        border-radius: 15px;
-        padding: 1.5rem;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-    }
-    .ingredient-item {
-        display: flex;
-        align-items: center;
-        padding: 0.75rem 0;
-        border-bottom: 1px solid #f0f0f0;
-    }
-    .ingredient-item:last-child {
-        border-bottom: none;
-    }
-    .ingredient-checkbox {
-        margin-right: 1rem;
-        transform: scale(1.2);
-        accent-color: var(--nutri-primary);
-    }
-    .instructions-list {
-        background: white;
-        border-radius: 15px;
-        padding: 1.5rem;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-    }
-    .instruction-step {
-        display: flex;
-        margin-bottom: 1.5rem;
-        padding-bottom: 1.5rem;
-        border-bottom: 1px solid #f0f0f0;
-    }
-    .instruction-step:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-        padding-bottom: 0;
-    }
-    .step-number {
-        background: var(--nutri-primary);
-        color: white;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: bold;
-        margin-right: 1rem;
-        flex-shrink: 0;
-    }
-    .step-content {
-        flex: 1;
-        padding-top: 0.5rem;
-    }
-    .action-buttons {
-        display: flex;
-        gap: 1rem;
-        margin-top: 2rem;
-    }
-    .btn-nutri {
-        background: var(--nutri-primary);
-        border: none;
-        color: white;
-        padding: 0.75rem 1.5rem;
-        border-radius: 25px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-    }
-    .btn-nutri:hover {
-        background: var(--nutri-secondary);
-        color: white;
-        transform: translateY(-2px);
-    }
-    .btn-outline-nutri {
-        border: 2px solid var(--nutri-primary);
-        color: var(--nutri-primary);
-        background: transparent;
-        padding: 0.75rem 1.5rem;
-        border-radius: 25px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-    }
-    .btn-outline-nutri:hover {
-        background: var(--nutri-primary);
-        color: white;
-        transform: translateY(-2px);
-    }
-    .difficulty-badge {
-        display: inline-block;
-        padding: 0.25rem 0.75rem;
-        border-radius: 15px;
-        font-size: 0.8rem;
-        font-weight: 500;
-    }
-    .difficulty-easy {
-        background: #E8F5E9;
-        color: #2E7D32;
-    }
-    .difficulty-medium {
-        background: #FFF3E0;
-        color: #F57C00;
-    }
-    .difficulty-hard {
-        background: #FFEBEE;
-        color: #C62828;
-    }
-    .section-title {
-        color: var(--nutri-dark);
-        font-weight: 600;
-        margin-bottom: 1rem;
-        display: flex;
-        align-items: center;
-    }
-    .section-title i {
-        margin-right: 0.5rem;
-        color: var(--nutri-primary);
-    }
-    .tags-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        margin-top: 1rem;
-    }
-    .recipe-tag {
-        background: var(--nutri-light);
-        color: var(--nutri-dark);
-        padding: 0.25rem 0.75rem;
-        border-radius: 15px;
-        font-size: 0.85rem;
-        font-weight: 500;
-    }
-</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';
-            } else {
-                label.style.textDecoration = 'none';
-                label.style.opacity = '1';
-            }
-        });
-    });
-    document.getElementById('recipeModal').addEventListener('shown.bs.modal', function () {
-        this.querySelector('.modal-body').scrollTop = 0;
-    });
-    function shareRecipe(recipeId) {
-        console.log('Sharing recipe with ID:', recipeId);
-    }
-</script>
Index: NutriMatch/Views/Recipes/_RecipeDeletePartial.cshtml
===================================================================
--- NutriMatch/Views/Recipes/_RecipeDeletePartial.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Views/Recipes/_RecipeDeletePartial.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,93 @@
+@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-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="deleteConfirmModalLabel">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    Delete Recipe
+                </h5>
+            </div>
+            <div class="modal-body">
+                <div class="delete-warning">
+                    <h4>Are you sure you want to delete this recipe?</h4>
+                    <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">
+                        <img src="@Model.ImageUrl" alt="@Model.Title" class="recipe-preview-image">
+                        <div class="recipe-preview-info">
+                            <h5>@Model.Title</h5>
+                            <div class="recipe-meta">
+                                <span><i class="fas fa-star"></i> @Model.Rating</span>
+                                <span><i class="far fa-clock"></i> 25 min</span>
+                                <span><i class="fas fa-user"></i> Chef Milan</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="recipe-details-grid">
+                        <div class="detail-item">
+                            <span class="detail-label">Calories:</span>
+                            <span class="detail-value">@Model.Calories</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Protein:</span>
+                            <span class="detail-value">@Model.Protein g</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Carbs:</span>
+                            <span class="detail-value">@Model.Carbs g</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Fat:</span>
+                            <span class="detail-value">@Model.Fat g</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Rating:</span>
+                            <span class="detail-value">@Model.Rating</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="detail-label">Ingredients:</span>
+                            <span class="detail-value">@(Model.RecipeIngredients?.Count ?? 0) items</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="delete-actions">
+                    <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Cancel
+                    </button>
+                    <form asp-action="Delete" method="post" style="display: inline;">
+                        <input type="hidden" asp-for="Id" />
+                        <button type="submit" class="btn btn-delete-confirm" id="confirmDeleteBtn">
+                            <i class="fas fa-trash me-2"></i>Delete Recipe
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+        if (confirmDeleteBtn) {
+            confirmDeleteBtn.addEventListener('click', function() {
+                this.classList.add('loading');
+                this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Deleting...';
+                this.disabled = true;
+            });
+        }
+        const deleteModal = document.getElementById('deleteConfirmModal');
+        if (deleteModal) {
+            deleteModal.addEventListener('hidden.bs.modal', function() {
+                const confirmBtn = document.getElementById('confirmDeleteBtn');
+                if (confirmBtn) {
+                    confirmBtn.classList.remove('loading');
+                    confirmBtn.innerHTML = '<i class="fas fa-trash me-2"></i>Delete Recipe';
+                    confirmBtn.disabled = false;
+                }
+            });
+        }
+    });
+</script>
Index: NutriMatch/Views/Recipes/_RecipeDetailsPartial.cshtml
===================================================================
--- NutriMatch/Views/Recipes/_RecipeDetailsPartial.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Views/Recipes/_RecipeDetailsPartial.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,140 @@
+@model NutriMatch.Models.Recipe
+<link href="~/css/_RecipeDetailsPartial.css" rel="stylesheet" />
+<div class="modal fade" id="recipeModal" tabindex="-1" aria-labelledby="recipeModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+        <div class="modal-content">
+            <div class="modal-header border-0">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="recipe-hero">
+                    <div class="recipe-image-container">
+                        <img src="@Model.ImageUrl" alt="@Model.Title" class="recipe-image-details" style="width: 100%;">
+                    </div>
+                    <div class="recipe-info">
+                            <div>
+                                <div class="chef-badge">
+                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80" class="chef-avatar">
+                                    Chef Milan
+                                </div>
+                                <h2 class="recipe-title-details">@Model.Title</h2>
+                                <div class="recipe-rating">
+                                    <span class="rating-label">Rating:</span>
+                                    <span class="rating-stars">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="far fa-star"></i>
+                                    </span>
+                                    <span class="rating-value">(4.2)</span>
+                                </div>
+                            </div>
+                            <div class="recipe-actions">
+                                <button onclick="location.href='/Recipes/Edit/@Model.Id'" class="action-btn edit-btn"  title="Edit Recipe">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="action-btn favorite-btn-details" title="Add to Favorites">
+                                    <i class="fas fa-heart"></i>
+                                </button>
+                                <button onclick="openDeleteModal('@Model.Id')" class="action-btn delete-btn" title="Delete Recipe">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="nutrition-card">
+                            <h4 class="section-title">
+                                <i class="fas fa-chart-pie"></i>
+                                Nutrition Facts
+                            </h4>
+                            <div class="nutrition-grid">
+                                <div class="nutrition-item">
+                                    <div class="nutrition-icon">
+                                        <i class="fas fa-fire me-1" style="color: #ef4444;"></i>
+                                    </div>
+                                    <div class="nutrition-value">@Model.Calories</div>
+                                    <div class="nutrition-label">Calories</div>
+                                </div>
+                                <div class="nutrition-item">
+                                    <div class="nutrition-icon">
+                                        <i class="fas fa-drumstick-bite me-1" style="color: #8b5cf6;"></i>
+                                    </div>
+                                    <div class="nutrition-value">@Model.Protein</div>
+                                    <div class="nutrition-label">Protein</div>
+                                </div>
+                                <div class="nutrition-item">
+                                    <div class="nutrition-icon">
+                                        <i class="fas fa-bread-slice me-1" style="color: #f59e0b;"></i>
+                                    </div>
+                                    <div class="nutrition-value">@Model.Carbs</div>
+                                    <div class="nutrition-label">Carbs</div>
+                                </div>
+                                <div class="nutrition-item">
+                                    <div class="nutrition-icon">
+                                        <i class="fas fa-tint me-1" style="color: #e5eb4dfa;"></i>
+                                    </div>
+                                    <div class="nutrition-value">@Model.Fat</div>
+                                    <div class="nutrition-label">Fat</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                        <div class="col-md-8">
+                        <div class="ingredients-list">
+                            <h4 class="section-title">
+                                <i class="fas fa-list-ul"></i>
+                                Ingredients
+                            </h4>
+                            @if (Model.RecipeIngredients != null && Model.RecipeIngredients.Any())
+                            {
+                                @for (int i = 0; i < Model.RecipeIngredients.Count; i++)
+                                {
+                                    <div class="ingredient-item">
+                                        <input type="checkbox" class="ingredient-checkbox" id="ingredient@(i + 1)"> 
+                                        <label for="ingredient@(i + 1)">@Model.RecipeIngredients[i].Ingredient.Name, @Model.RecipeIngredients[i].Quantity @Model.RecipeIngredients[i].Unit </label>
+                                    </div>
+                                }
+                            }
+                        </div>
+                        <div class="instructions-list">
+                            <h4 class="section-title">
+                                <i class="fas fa-clipboard-list"></i>
+                                Instructions
+                            </h4>
+                            @{
+                                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;">
+                                    @instructions[i]</span>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<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';
+            } else {
+                label.style.textDecoration = 'none';
+                label.style.opacity = '1';
+            }
+        });
+    });
+    document.getElementById('recipeModal').addEventListener('shown.bs.modal', function () {
+        this.querySelector('.modal-body').scrollTop = 0;
+    });
+</script>
Index: NutriMatch/Views/Restaurants/Index.cshtml
===================================================================
--- NutriMatch/Views/Restaurants/Index.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Views/Restaurants/Index.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,121 @@
+@model List<NutriMatch.Models.Restaurant>
+@{
+    Layout = "_Layout";
+}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NutriMatch - Restaurants</title>
+    <link href="~/css/RestaurantIndex.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <div class="page-header">
+            <h1 class="display-5 fw-bold mb-3">Find Your Perfect Restaurant</h1>
+            <p class="lead text-muted">Discover restaurants with detailed nutritional information for every dish</p>
+        </div>
+        <div class="filter-section">
+            <h4 class="mb-4" style="color: #1f2937; font-weight: 700;">
+                <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>
+            </h4>
+            <div class="row">
+                <div class="col-md-6 col-lg-3">
+                    <div class="slider-container">
+                        <div class="slider-label">
+                            <span><i class="fas fa-fire me-1" style="color: #ef4444;"></i>Calories</span>
+                            <span class="filter-values" id="caloriesValue">0 - 2000</span>
+                        </div>
+                        <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')">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-3">
+                    <div class="slider-container">
+                        <div class="slider-label">
+                            <span><i class="fas fa-drumstick-bite me-1" style="color: #8b5cf6;"></i>Protein (g)</span>
+                            <span class="filter-values" id="proteinValue">0 - 150</span>
+                        </div>
+                        <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')">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-3">
+                    <div class="slider-container">
+                        <div class="slider-label">
+                            <span><i class="fas fa-bread-slice me-1" style="color: #f59e0b;"></i>Carbs (g)</span>
+                            <span class="filter-values" id="carbsValue">0 - 150</span>
+                        </div>
+                        <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')">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-lg-3">
+                    <div class="slider-container">
+                        <div class="slider-label">
+                            <span><i class="fas fa-tint me-1" style="color: #e5eb4dfa;"></i>Fats (g)</span>
+                            <span class="filter-values" id="fatsValue">0 - 150</span>
+                        </div>
+                        <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')">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row" id="restaurantsGrid">
+            @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-rating">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star-half-alt"></i>
+                                <i class="far fa-star"></i>
+                                4.2
+                            </div>
+                        </div>
+                    </div>
+            }
+        </div>
+    </div>
+    <div class="modal fade" id="menuModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="modalRestaurantName"></h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="filterInfo" class="filter-info" style="display: none;">
+                        <small><i class="fas fa-info-circle me-1"></i>Showing items matching your macro filters</small>
+                    </div>
+                    <div id="menuItems">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+   <script src="~/js/RestaurantIndex.js"></script>
+</body>
+</html>
Index: NutriMatch/Views/Restaurants/_RestaurantMealsPartial.cshtml
===================================================================
--- NutriMatch/Views/Restaurants/_RestaurantMealsPartial.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/Views/Restaurants/_RestaurantMealsPartial.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,47 @@
+@model List<NutriMatch.Models.RestaurantMeal>
+
+@if (Model.Count == 0){
+    <div class="no-items-message">
+        <i class="fas fa-filter fa-2x mb-3"></i>
+        <h5>No items match your filters</h5>
+        <p>Try adjusting your macro filters to see more menu items</p>
+    </div>
+} else {
+    @foreach (var meal in Model)
+    {
+        <div class="col-md-5">
+            <div class="menu-item">
+                <div class="menu-item-header" onclick="toggleItemDetails(this)">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <h6 class="mb-1 fs-6">@meal.ItemName</h6>
+                        </div>
+                        <div class="text-end">
+                            <small class="text-muted">
+                                <i class="fas fa-chevron-down chevron-icon"></i>
+                            </small>
+                        </div>
+                    </div>
+                </div>
+                <div class="collapse menu-item-details">
+                    <p class="mb-2 small">@meal.ItemDescription</p>
+                    <div class="macros">
+                        <span class="macro-badge calories">
+                            <i class="fas fa-fire me-1"></i>@meal.Calories cal
+                        </span>
+                        <span class="macro-badge protein">
+                            <i class="fas fa-dumbbell me-1"></i>@meal.Protein g protein
+                        </span>
+                        <span class="macro-badge carbs">
+                            <i class="fas fa-bread-slice me-1"></i>@meal.Carbs g carbs
+                        </span>
+                        <span class="macro-badge fats">
+                            <i class="fas fa-seedling me-1"></i>@meal.Fat g fats
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+
+}
Index: NutriMatch/Views/Shared/_Layout.cshtml
===================================================================
--- NutriMatch/Views/Shared/_Layout.cshtml	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/Views/Shared/_Layout.cshtml	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -7,8 +7,11 @@
     <script type="importmap"></script>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
-    <link rel="stylesheet" href="~/NutriMatch.styles.css" asp-append-version="true" />
+    <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"  />
 </head>
+@{
+    var currentController = ViewContext.RouteData.Values["controller"]?.ToString();
+    var currentAction = ViewContext.RouteData.Values["action"]?.ToString();
+}
 <body>
     <header>
@@ -24,19 +27,18 @@
                     <ul class="navbar-nav ms-auto">
                         <li class="nav-item">
-                            <a class="nav-link" 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" 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" href="/Recipes/Create">Add Recipe</a>
+                            <a class="nav-link @(currentController == "Recipes" && currentAction == "Create" ? "active-glow" : "")" href="/Recipes/Create">Add Recipe</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="#">Restaurants</a>
+                            <a class="nav-link @(currentController == "Restaurants" && currentAction == "Index" ? "active-glow" : "") " href="/Restaurants">Restaurants</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="#">My Account</a>
                         </li>
-                       
                     </ul>
                 </div>
@@ -49,6 +51,5 @@
         </main>
     </div>
-
-    <footer class="bg-dark text-light py-5">
+    <footer class="text-light py-5">
         <div class="container">
             <div class="row">
@@ -96,8 +97,5 @@
         </div>
     </footer>
-    <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="~/js/site.js" asp-append-version="true"></script>
-    @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
Index: NutriMatch/wwwroot/css/HomeIndex.css
===================================================================
--- NutriMatch/wwwroot/css/HomeIndex.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/css/HomeIndex.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,459 @@
+: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;
+}
+
+
+
+.signup-section {
+    padding: 6rem 0;
+    background: linear-gradient(135deg, rgba(255, 235, 238, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
+    border-radius: 50px;
+    margin-bottom: 4rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.signup-title {
+    font-size: 3.5rem;
+    font-weight: bold;
+    color: var(--dark-gray);
+    margin-bottom: 1rem;
+}
+
+.signup-subtitle {
+    font-size: 1.5rem;
+    color: var(--primary-green);
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.signup-description {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+}
+
+.btn-primary-custom {
+    background: linear-gradient(45deg, var(--primary-green), var(--dark-green));
+    border: none;
+    padding: 15px 30px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border-radius: 25px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
+    color: white;
+}
+
+.btn-primary-custom:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
+    background: linear-gradient(45deg, var(--dark-green), var(--primary-green));
+    color: white;
+}
+
+.floating-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.floating-leaf {
+    position: absolute;
+    color: var(--light-green);
+    opacity: 0.3;
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-20px) rotate(10deg); }
+}
+
+
+.share-recipe-section {
+    padding: 6rem 0;
+    background: white;
+    margin-bottom: 4rem;
+    border-radius: 50px;
+}
+
+.share-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--dark-gray);
+    margin-bottom: 1rem;
+}
+
+.share-description {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+}
+
+.sample-recipe {
+    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
+    border-radius: 30px;
+    padding: 2rem;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    position: relative;
+    max-width: 300px;
+    margin: 0 auto;
+}
+
+.sample-screen {
+    background: white;
+    border-radius: 20px;
+    padding: 1.5rem;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.btn-create-recipe {
+    background: var(--primary-green);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 20px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-create-recipe:hover {
+    background: var(--dark-green);
+    transform: translateY(-2px);
+    color: white;
+}
+
+
+trending-section {
+    border-radius: 50px;
+    padding: 4rem 0;
+    background: linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
+}
+
+.section-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--dark-gray);
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.section-subtitle {
+    text-align: center;
+    color: #666;
+    margin-bottom: 3rem;
+    font-size: 1.1rem;
+}
+
+.recipe-card {
+    background: white;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    margin-bottom: 2rem;
+    position: relative;
+    width: 100%;
+    max-width: 417.953px;
+    height: 380px;
+}
+
+.recipe-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+}
+
+.recipe-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 15px 15px 0 0;
+}
+
+.recipe-content {
+    padding: 1.5rem;
+    position: relative;
+    z-index: 1;
+}
+
+.recipe-title {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: var(--dark-gray);
+    margin-bottom: 0.5rem;
+}
+
+.recipe-meta {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.rating {
+    color: #FFD700;
+}
+
+.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;
+}
+
+.chef-badge {
+    background: var(--primary-green);
+    color: white;
+    padding: 0.3rem 0.8rem;
+    border-radius: 15px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    display: inline-block;
+    margin-bottom: 0.5rem;
+}
+
+
+.calories-info {
+    margin-top: 0.5rem;
+    padding-top: 0.9rem;
+    border-top: 1px solid #eee;
+}
+
+.calories {
+    color: #ff6b35;
+    font-weight: 600;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.calories i {
+    font-size: 0.8rem;
+}
+
+
+.nutrition-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(10px);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    border-radius: 15px;
+}
+
+.recipe-card:hover .nutrition-overlay {
+    opacity: 1;
+    visibility: visible;
+}
+
+.nutrition-content {
+    text-align: center;
+    padding: 2rem 1.5rem;
+}
+
+.nutrition-content h4 {
+    color: var(--dark-gray);
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 1.5rem;
+}
+
+.nutrition-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    max-width: 200px;
+    margin: 0 auto;
+}
+
+.nutrition-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.nutrition-label {
+    font-size: 0.8rem;
+    color: #666;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.nutrition-value {
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: var(--primary-green);
+}
+.recipe-card:hover .recipe-content {
+    transform: translateZ(0);
+}
+
+
+.restaurants-section {
+    padding: 4rem 0;
+    background: white;
+}
+
+.restaurants-container {
+    position: relative;
+    height: 300px;
+    overflow: hidden;
+}
+
+.restaurant-card {
+    position: absolute;
+    background: white;
+    border-radius: 20px;
+    padding: 1.5rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    min-width: 200px;
+    text-align: center;
+    cursor: pointer;
+    animation: floatAround 20s infinite linear;
+}
+
+.restaurant-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+}
+
+.restaurant-logo {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin: 0 auto 1rem;
+    background-size: cover;
+    background-position: center;
+    border: 3px solid #f8f9fa;
+}
+
+.restaurant-name {
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: var(--dark-gray);
+    margin-bottom: 0.5rem;
+}
+
+.restaurant-items {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 1rem;
+}
+
+.restaurant-rating {
+    color: #FFD700;
+    font-size: 0.9rem;
+}
+
+@keyframes floatAround {
+    0% { transform: translateX(-100px) translateY(0px); }
+    25% { transform: translateX(20vw) translateY(-20px); }
+    50% { transform: translateX(50vw) translateY(10px); }
+    75% { transform: translateX(80vw) translateY(-15px); }
+    100% { transform: translateX(100vw) translateY(0px); }
+}
+
+
+.restaurant-card:nth-child(1) { animation-delay: 0s; top: 20px; }
+.restaurant-card:nth-child(2) { animation-delay: -4s; top: 20px; }
+.restaurant-card:nth-child(3) { animation-delay: -8s; top: 20px; }
+.restaurant-card:nth-child(4) { animation-delay: -12s; top: 20px; }
+.restaurant-card:nth-child(5) { animation-delay: -16s; top: 20px; }
+
+.daily-dish {
+    margin-left: 100px;
+}
+
+
+
+.recipe-macros {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.5rem;
+}
+
+.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;
+}
Index: NutriMatch/wwwroot/css/RecipeCreate.css
===================================================================
--- NutriMatch/wwwroot/css/RecipeCreate.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/css/RecipeCreate.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,455 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #fafbfc;
+    color: #1a1a1a;
+    line-height: 1.6;
+}
+
+.main-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.page-header {
+    margin-bottom: 2.5rem;
+}
+
+.page-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #1a1a1a;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
+}
+
+.page-subtitle {
+    font-size: 1.125rem;
+    color: #6b7280;
+    font-weight: 400;
+}
+
+.form-card {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e5e7eb;
+    overflow: hidden;
+}
+
+.highlighted {
+    background: #bcbcbd;
+    
+}
+
+.form-content {
+    padding: 2.5rem;
+}
+
+.form-group {
+    margin-bottom: 2rem;
+}
+
+.form-group:last-child {
+    margin-bottom: 0;
+}
+
+.label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.input {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    font-size: 1rem;
+    background: white;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.input:focus {
+    outline: none;
+    border-color: #10b981;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+.input::placeholder {
+    color: #9ca3af;
+}
+
+.textarea {
+    min-height: 120px;
+    resize: vertical;
+    font-family: inherit;
+}
+
+.flex-row {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-end;
+}
+
+.flex-1 { flex: 1; }
+.flex-2 { flex: 2; }
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.875rem 1.5rem;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    white-space: nowrap;
+}
+
+.btn-primary {
+    background: #10b981;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #059669;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: #f3f4f6;
+    color: #6b7280;
+    border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover {
+    background: #e5e7eb;
+    color: #374151;
+}
+
+.btn-large {
+    padding: 1rem 2rem;
+    font-size: 1rem;
+}
+
+.items-container {
+    margin-top: 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #f9fafb;
+    min-height: 120px;
+    
+}
+
+
+.items-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+    color: #9ca3af;
+    font-size: 0.875rem;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem 1rem;
+    background: white;
+    border-bottom: 1px solid #e5e7eb;
+    transition: background-color 0.2s ease;
+}
+
+.item:last-child {
+    border-bottom: none;
+}
+
+.item:hover {
+    background: #f9fafb;
+}
+
+.item-content {
+    flex: 1;
+    font-size: 0.875rem;
+    color: #374151;
+}
+
+.item-remove {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #dc2626;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.75rem;
+}
+
+.item-remove:hover {
+    background: #fee2e2;
+    transform: scale(1.05);
+}
+
+.search-container {
+    position: relative;
+}
+
+.dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #d1d5db;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 100;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: none;
+}
+
+.dropdown.show {
+    display: block;
+}
+
+.dropdown-item {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    border-bottom: 1px solid #f3f4f6;
+    font-size: 0.875rem;
+    color: #374151;
+    transition: background-color 0.2s ease;
+}
+
+.dropdown-item:hover {
+    background: #f9fafb;
+}
+
+.dropdown-item:last-child {
+    border-bottom: none;
+}
+
+.file-upload-area {
+    border: 2px dashed #d1d5db;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: #fafbfc;
+    position: relative;
+}
+
+.file-upload-area:hover {
+    border-color: #10b981;
+    background: #f0fdf4;
+}
+
+.file-upload-area.dragover {
+    border-color: #10b981;
+    background: #f0fdf4;
+}
+
+.file-upload-icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 1rem;
+    background: #f3f4f6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: #6b7280;
+}
+
+.file-upload-text {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin-bottom: 0.5rem;
+}
+
+.file-upload-hint {
+    font-size: 0.75rem;
+    color: #9ca3af;
+}
+
+.file-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.form-actions {
+    margin-top: 2.5rem;
+    padding-top: 2rem;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+}
+
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #6b7280;
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: color 0.2s ease;
+    margin-top: 1rem;
+}
+
+.back-link:hover {
+    color: #10b981;
+}
+
+.validation-error {
+    color: #dc2626;
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+}
+
+@media (max-width: 768px) {
+    .main-container {
+        padding: 1rem;
+    }
+
+    .form-content {
+        padding: 1.5rem;
+    }
+
+    .page-title {
+        font-size: 2rem;
+    }
+
+    .flex-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .form-actions {
+        flex-direction: column-reverse;
+    }
+
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+.item {
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.dropdown::-webkit-scrollbar {
+    width: 4px;
+}
+
+.dropdown::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.dropdown::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+}
+
+.btn:focus,
+.input:focus {
+    outline: 2px solid #10b981;
+    outline-offset: 2px;
+}
+
+.ingredient-tag {
+    display: inline-block;
+     background-color: #e3f2fd; 
+     padding: 5px 10px;
+     margin: 2px;
+    border-radius: 15px; 
+    font-size: 14px;
+}
+
+.instruction-item{
+    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;
+}
+
+.instruction-number{
+    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
+}
+
+
+.instruction-text{
+    flex: 1; 
+    min-width: 0; 
+    word-wrap: break-word; 
+    overflow-wrap: break-word; 
+    line-height: 1.4;
+}
+
+.remove {
+    cursor: pointer; 
+    margin-left: 8px; 
+    color: #dc3545;
+    font-weight: bold;
+}
+
+#image-preview {
+    max-width: 300px; 
+    max-height: 200px; 
+    border-radius: 10px; 
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
Index: NutriMatch/wwwroot/css/RecipeIndex.css
===================================================================
--- NutriMatch/wwwroot/css/RecipeIndex.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/css/RecipeIndex.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,353 @@
+:root {
+            --nutri-green: #4ade80;
+            --nutri-green-dark: #22c55e;
+            --nutri-gray: #6b7280;
+            --nutri-light-gray: #f3f4f6;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-gray) 100%); 
+    padding-top: 5%;
+}
+
+.search-container {
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+    padding: 2rem;
+    margin: 2rem 0;
+    
+}
+
+.search-input {
+    border: 2px solid #e5e7eb;
+    border-radius: 50px;
+    padding: 1rem 1.5rem;
+    font-size: 1.1rem;
+    transition: all 0.3s ease;
+}
+
+.search-input:focus {
+    border-color: var(--nutri-green);
+    box-shadow: 0 0 0 0.2rem rgba(74, 222, 128, 0.25);
+}
+
+.search-btn {
+    background: var(--nutri-green);
+    border: none;
+    border-radius: 50px;
+    padding: 1rem 2rem;
+    color: white;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.search-btn:hover {
+    background: var(--nutri-green-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);
+}
+
+.filter-section {
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+    padding: 2rem;
+    margin-bottom: 2rem;
+}
+
+.slider-container {
+    margin: 1.5rem 0;
+}
+
+.slider-label {
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.range-slider {
+    position: relative;
+    height: 6px;
+    background: #e5e7eb;
+    border-radius: 3px;
+    margin: 1rem 0;
+}
+
+.range-input {
+    position: absolute;
+    width: 100%;
+    height: 6px;
+    top: 0;
+    background: none;
+    pointer-events: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+.range-input::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: var(--nutri-green);
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    -webkit-appearance: none;
+    pointer-events: all;
+    position: relative;
+    z-index: 2;
+}
+
+.range-input::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: var(--nutri-green) !important;
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    pointer-events: all;
+    position: relative;
+    z-index: 2;
+}
+
+.range-fill {
+    position: absolute;
+    height: 6px;
+    background: var(--nutri-green) !important;
+    border-radius: 3px;
+    top: 0;
+    width: 100%;
+}
+
+.recipe-grid {
+    display: grid;
+    gap: 1rem;
+    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;
+    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;
+}
+
+.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;
+}
+
+.results-count {
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    color: var(--nutri-gray);
+    font-weight: 600;
+}
+
+
+#modalWindow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    pointer-events: none;
+}
+
+#modalWindow .modal {
+    pointer-events: all;
+}
+
+.recipe-card * {
+    box-sizing: border-box;
+}
+
+
+.recipe-card[style*="none"] {
+    display: none !important;
+}
+
+.recipe-card[style*="block"] {
+    display: block !important;
+}
+
+
+.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/RestaurantIndex.css
===================================================================
--- NutriMatch/wwwroot/css/RestaurantIndex.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/css/RestaurantIndex.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,228 @@
+    :root {
+            --nutri-green: #4ade80;
+            --nutri-dark-green: #22c55e;
+            --nutri-light-blue: #e0f2fe;
+            --nutri-gray: #64748b;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-gray) 100%);
+            padding-top: 5%;
+        }
+    
+        .page-header {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            margin: 2rem 0;
+            padding: 2rem;
+        }
+        
+        .restaurant-card {
+            background: white;
+            border-radius: 20px;
+            padding: 1.5rem;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+            min-width: 200px;
+            text-align: center;
+            cursor: pointer;
+            height: 100%;
+        }
+        
+        .restaurant-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
+        }
+        
+        .restaurant-info {
+            padding: 1.5rem;
+            height: 70%;
+        }
+        
+        .modal-content {
+            border-radius: 20px;
+            border: none;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        }
+        
+        .modal-header {
+            background: linear-gradient(135deg, var(--nutri-green), var(--nutri-dark-green));
+            color: white;
+            border-radius: 20px 20px 0 0;
+            border: none;
+        }
+        
+        .menu-item {
+            background: #f8fafc;
+            border-radius: 8px;
+            margin-bottom: 0.75rem;
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+            
+            
+        }
+
+        #menuItems{
+            display: flex;
+            flex-wrap: wrap;
+            
+            justify-content: space-around;
+            
+        }
+        
+        .menu-item:hover {
+            border-color: var(--nutri-green);
+            transform: translateX(3px);
+        }
+        
+        .menu-item-header {
+            padding: 0.75rem;
+            cursor: pointer;
+        }
+        
+        .menu-item-details {
+            background: white;
+            border-radius: 0 0 8px 8px;
+            padding: 0.75rem;
+            border-top: 1px solid #e2e8f0;
+        }
+        
+        .macro-badge {
+            background: var(--nutri-light-blue);
+            color: var(--nutri-gray);
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            margin: 0.25rem;
+            display: inline-block;
+        }
+        
+        .macro-badge.calories { background: #fee2e2; color: #dc2626; }
+        .macro-badge.protein { background: #ddd6fe; color: #7c3aed; }
+        .macro-badge.carbs { background: #fed7aa; color: #ea580c; }
+        .macro-badge.fats { background: #bfdbfe; color: #2563eb; }
+        
+        .cuisine-tag {
+            background: var(--nutri-green);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+          
+       .filter-section {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .filter-info {
+            background: #e0f2fe;
+            border-radius: 8px;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            border-left: 4px solid var(--nutri-green);
+        }
+
+        .slider-container {
+            margin: 1.5rem 0;
+        }
+
+        .slider-label {
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .range-slider {
+            position: relative;
+            height: 6px;
+            background: #e5e7eb;
+            border-radius: 3px;
+            margin: 1rem 0;
+        }
+
+        .range-input {
+            position: absolute;
+            width: 100%;
+            height: 6px;
+            top: 0;
+            background: none;
+            pointer-events: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+        }
+
+        .range-input::-webkit-slider-thumb {
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background: var(--nutri-green);
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+            -webkit-appearance: none;
+            pointer-events: all;
+            position: relative;
+            z-index: 2;
+        }
+
+        .range-input::-moz-range-thumb {
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background: var(--nutri-green) !important;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+            pointer-events: all;
+            position: relative;
+            z-index: 2;
+        }
+
+        .range-fill {
+            position: absolute;
+            height: 6px;
+            background: var(--nutri-green) !important;
+            border-radius: 3px;
+            top: 0;
+            width: 100%;
+        }
+        
+        .no-items-message {
+            text-align: center;
+            padding: 2rem;
+            color: var(--nutri-gray);
+        }
+        
+
+        .restaurant-name {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #2C3E50;
+            margin-bottom: 0.5rem;
+        }
+        
+        .restaurant-items {
+            font-size: 0.9rem;
+            color: #666;
+            margin-bottom: 1rem;
+        }
+        
+        .restaurant-rating {
+            color: #FFD700;
+            font-size: 0.9rem;
+        }
+
+        #restaurantsGrid {
+            justify-content: center;
+        }
Index: NutriMatch/wwwroot/css/_Layout.css
===================================================================
--- NutriMatch/wwwroot/css/_Layout.css	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ NutriMatch/wwwroot/css/_Layout.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -5,5 +5,5 @@
             --accent-pink: #2c3534;
             --light-pink: #bbcabe;
-            --dark-gray: #2C3E50;
+            --dark-gray: #11ff00;
             --light-gray: #ECF0F1;
         }
@@ -17,73 +17,78 @@
         }
 
-        .navbar-brand {
-            font-size: 2rem;
-            font-weight: bold;
-            color: var(--primary-green) !important;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
+.navbar-brand {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--primary-green) !important;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
 
-        .logo-text {
-            background: linear-gradient(45deg, var(--primary-green), var(--dark-green));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
+.logo-text {
+    background: linear-gradient(45deg, var(--primary-green), var(--dark-green));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
 
-        .nav-link{
-            color: black  !important;
-            font-size: 18px  !important;
-            margin-left: 15px;
-        }
+.nav-link{
+    color: black  !important;
+    font-size: 18px  !important;
+    margin-left: 15px;
+}
 
- footer {
-            background: var(--dark-gray) !important;
-            color: white;
-            padding: 4rem 0 2rem;
-            
-        }
+footer {
+    background: lightslategray !important;
+    color: white;
+    padding: 4rem 0 2rem;
+}
 
-        footer h5, footer h6 {
-            margin-bottom: 1rem;
-        }
+footer h5, footer h6 {
+    margin-bottom: 1rem;
+}
 
-        footer ul {
-            list-style: none;
-            padding: 0;
-        }
+footer ul {
+    list-style: none;
+    padding: 0;
+}
 
-        footer ul li {
-            margin-bottom: 0.5rem;
-        }
+footer ul li {
+    margin-bottom: 0.5rem;
+}
 
-        footer a {
-            color: #bbb;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
+footer a {
+    color: #bbb;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
 
-        footer a:hover {
-            color: var(--primary-green);
-        }
+footer a:hover {
+    color: var(--primary-green);
+}
 
-        @media (max-width: 768px) {
-            .signup-title {
-                font-size: 2.5rem;
-            }
-            
-            .share-title {
-                font-size: 2rem;
-            }
+@media (max-width: 768px) {
+    .signup-title {
+        font-size: 2.5rem;
+    }
+    
+    .share-title {
+        font-size: 2rem;
+    }
 
-            .restaurant-card {
-                min-width: 150px;
-                padding: 1rem;
-            }
+    .restaurant-card {
+        min-width: 150px;
+        padding: 1rem;
+    }
 
-            .restaurant-logo {
-                width: 60px;
-                height: 60px;
-            }
-        }
+    .restaurant-logo {
+        width: 60px;
+        height: 60px;
+    }
+}
+
+.active-glow{
+    color: #2ECC71 !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease-in-out;
+}
Index: NutriMatch/wwwroot/css/_RecipeDeletePartial.css
===================================================================
--- NutriMatch/wwwroot/css/_RecipeDeletePartial.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/css/_RecipeDeletePartial.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,258 @@
+
+.delete-modal .modal-content {
+    border-radius: 16px;
+    border: none;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+    z-index: 1060; 
+}
+.delete-modal {
+    z-index: 1055; 
+}
+.delete-modal .modal-backdrop {
+    z-index: 1050; 
+}
+.delete-modal .modal-header {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+    border: none;
+    padding: 1.5rem 2rem;
+    position: relative;
+}
+.delete-modal .modal-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="20" cy="80" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+    pointer-events: none;
+}
+.delete-modal .modal-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 0;
+    position: relative;
+    z-index: 1;
+}
+.delete-modal .modal-title i {
+    font-size: 1.75rem;
+    animation: pulse 2s infinite;
+}
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+.delete-modal .btn-close {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+    opacity: 0.8;
+    transition: all 0.2s ease;
+}
+.delete-modal .btn-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+    opacity: 1;
+    transform: scale(1.1);
+}
+.delete-modal .modal-body {
+    padding: 2rem;
+    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
+}
+.delete-warning {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+.delete-warning h4 {
+    color: #1f2937;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+}
+.delete-warning p {
+    color: #6b7280;
+    font-size: 1rem;
+    line-height: 1.6;
+    margin: 0;
+}
+.recipe-preview-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
+    margin-bottom: 1.5rem;
+    transition: all 0.3s ease;
+}
+.recipe-preview-card:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transform: translateY(-2px);
+}
+.recipe-preview-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+.recipe-preview-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    object-fit: cover;
+    border: 2px solid #e5e7eb;
+}
+.recipe-preview-info h5 {
+    color: #1f2937;
+    font-weight: 600;
+    margin: 0 0 0.25rem 0;
+    font-size: 1.1rem;
+}
+.recipe-preview-info .recipe-meta {
+    display: flex;
+    gap: 1rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+.recipe-preview-info .recipe-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+.recipe-details-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+.detail-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #f3f4f6;
+}
+.detail-item:last-child {
+    border-bottom: none;
+}
+.detail-label {
+    font-weight: 500;
+    color: #374151;
+    font-size: 0.875rem;
+}
+.detail-value {
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+.delete-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    padding-top: 1rem;
+}
+.btn-delete-confirm {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+    border: none;
+    padding: 0.75rem 2rem;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.btn-delete-confirm::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;
+}
+.btn-delete-confirm:hover::before {
+    left: 100%;
+}
+.btn-delete-confirm:hover {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+}
+.btn-delete-confirm:active {
+    transform: translateY(0);
+}
+.btn-cancel {
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid #d1d5db;
+    padding: 0.75rem 2rem;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+.btn-cancel:hover {
+    background: #e5e7eb;
+    color: #1f2937;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.btn-cancel:active {
+    transform: translateY(0);
+}
+.btn-delete-confirm.loading {
+    pointer-events: none;
+    opacity: 0.7;
+}
+.btn-delete-confirm.loading::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid transparent;
+    border-top: 2px solid white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+@media (max-width: 768px) {
+    .delete-modal .modal-dialog {
+        margin: 1rem;
+    }
+    .recipe-details-grid {
+        grid-template-columns: 1fr;
+    }
+    .delete-actions {
+        flex-direction: column;
+    }
+    .btn-delete-confirm,
+    .btn-cancel {
+        width: 100%;
+    }
+}
+.delete-modal.fade .modal-dialog {
+    transition: transform 0.3s ease-out;
+    transform: translate(0, -50px);
+}
+.delete-modal.show .modal-dialog {
+    transform: none;
+}
+.delete-modal .modal-backdrop {
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.4);
+}
Index: NutriMatch/wwwroot/css/_RecipeDetailsPartial.css
===================================================================
--- NutriMatch/wwwroot/css/_RecipeDetailsPartial.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/css/_RecipeDetailsPartial.css	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,308 @@
+    :root {
+        --nutri-primary: #4CAF50;
+        --nutri-secondary: #45A049;
+        --nutri-light: #E8F5E8;
+        --nutri-dark: #2E7D32;
+    }
+
+    .modal-xl {
+        max-width: 1200px;
+    }
+
+    .recipe-hero {
+        display: flex;
+        gap: 2rem;
+        background: white;
+        border-radius: 15px;
+        overflow: hidden;
+        margin-bottom: 2rem;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        min-height: 300px;
+    }
+
+    .recipe-image-container {
+        flex: 0 0 40%;
+        position: relative;
+        overflow: hidden;
+        border-radius: 15px 0 0 15px;
+    }
+
+    .recipe-image-details {
+        width: 100%;
+        height: 100%;
+        max-height: 22rem;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+    }
+
+    .recipe-image:hover {
+        transform: scale(1.05);
+    }
+
+    .recipe-info {
+        flex: 1;
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+
+    .chef-badge {
+        display: inline-flex;
+        align-items: center;
+        background: var(--nutri-primary);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 25px;
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+        font-weight: 500;
+    }
+
+    .chef-avatar {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        margin-right: 0.5rem;
+        border: 2px solid white;
+    }
+
+    .favorite-btn-details {
+        background: #e91e63;
+        color: white;
+    }
+
+    .favorite-btn-details:hover {
+        background: #c2185b;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(233, 30, 99, 0.3);
+    }
+
+    .favorite-btn-details.favorited {
+        background: #8e24aa;
+    }
+
+    .favorite-btn-details.favorited:hover {
+        background: #7b1fa2;
+    }
+
+    .recipe-rating {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+    }
+
+    .rating-label {
+        font-size: 1rem;
+        color: var(--nutri-dark);
+        font-weight: 500;
+    }
+
+    .rating-stars {
+        color: #FFD700;
+    }
+
+    .rating-value {
+        font-size: 1rem;
+        color: #666;
+        font-weight: 500;
+    }
+
+    @media (max-width: 768px) {
+        .recipe-hero {
+            flex-direction: column;
+        }
+        
+        .recipe-image-container {
+            flex: none;
+            height: 250px;
+            border-radius: 15px 15px 0 0;
+        }
+        
+        .recipe-stats {
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        
+        .stat-item {
+            min-width: calc(50% - 0.5rem);
+        }
+    }
+
+    .recipe-stats {
+        display: flex;
+        gap: 1.5rem;
+        margin-top: 1.5rem;
+    }
+
+    .stat-item {
+        text-align: center;
+        background: var(--nutri-light);
+        padding: 1rem;
+        border-radius: 10px;
+        flex: 1;
+        min-width: 80px;
+    }
+
+    .stat-value {
+        font-size: 1.5rem;
+        font-weight: bold;
+        display: block;
+        color: var(--nutri-dark);
+    }
+
+    .stat-label {
+        font-size: 0.9rem;
+        color: #666;
+        margin-top: 0.25rem;
+    }
+
+    .recipe-title-details {
+        color: var(--nutri-dark);
+        font-size: 2rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+        line-height: 1.2;
+    }
+
+    .nutrition-card {
+        background: var(--nutri-light);
+        border-radius: 15px;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .nutrition-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 1rem;
+    }
+
+    .nutrition-item {
+        text-align: center;
+        background: white;
+        padding: 1rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+
+    .nutrition-value {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--nutri-dark);
+    }
+
+    .nutrition-label {
+        font-size: 0.9rem;
+        color: #666;
+        margin-top: 0.25rem;
+    }
+
+    .ingredients-list {
+        background: white;
+        border-radius: 15px;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+       
+    }
+    
+
+    .ingredient-item {
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid #f0f0f0;
+    }
+
+    .ingredient-item:last-child {
+        border-bottom: none;
+    }
+
+    .ingredient-checkbox {
+        margin-right: 1rem;
+        transform: scale(1.2);
+        accent-color: var(--nutri-primary);
+    }
+
+    .instructions-list {
+        background: white;
+        border-radius: 15px;
+        padding: 1.5rem;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+
+    .section-title {
+        color: var(--nutri-dark);
+        font-weight: 600;
+        margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+    }
+
+    .section-title i {
+        margin-right: 0.5rem;
+        color: var(--nutri-primary);
+    }
+
+    .tags-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-top: 1rem;
+    }
+
+    .recipe-actions-stats {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 1.5rem;
+    }
+
+    .recipe-actions {
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .action-btn {
+        width: 40px;
+        height: 40px;
+        border: none;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        font-size: 1rem;
+    }
+
+    .edit-btn {
+        background: #3b82f6;
+        color: white;
+    }
+
+    .edit-btn:hover {
+        background: #2563eb;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+    }
+
+    .delete-btn {
+        background: #ef4444;
+        color: white;
+    }
+
+    .delete-btn:hover {
+        background: #dc2626;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
+    }
+
+    .modal-body{
+        margin-top: -20px;
+    }
+
+    
+    
Index: triMatch/wwwroot/css/landing-page.css
===================================================================
--- NutriMatch/wwwroot/css/landing-page.css	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,427 +1,0 @@
-  :root {
-            --primary-green: #2ECC71;
-            --dark-green: #27AE60;
-            --light-green: #58D68D;
-            --accent-pink: #2c3534;
-            --light-pink: #bbcabe;
-            --dark-gray: #2C3E50;
-            --light-gray: #ECF0F1;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, var(--light-pink) 0%, white 50%, var(--light-gray) 100%);
-            min-height: 100vh;
-        }
-
-
-        
-        .signup-section {
-            padding: 6rem 0;
-            background: linear-gradient(135deg, rgba(255, 235, 238, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
-            border-radius: 50px;
-            margin-bottom: 4rem;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .signup-title {
-            font-size: 3.5rem;
-            font-weight: bold;
-            color: var(--dark-gray);
-            margin-bottom: 1rem;
-        }
-
-        .signup-subtitle {
-            font-size: 1.5rem;
-            color: var(--primary-green);
-            font-weight: 600;
-            margin-bottom: 1rem;
-        }
-
-        .signup-description {
-            font-size: 1.1rem;
-            color: #666;
-            margin-bottom: 2rem;
-            line-height: 1.6;
-        }
-
-        .btn-primary-custom {
-            background: linear-gradient(45deg, var(--primary-green), var(--dark-green));
-            border: none;
-            padding: 15px 30px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            border-radius: 25px;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
-            color: white;
-        }
-
-        .btn-primary-custom:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
-            background: linear-gradient(45deg, var(--dark-green), var(--primary-green));
-            color: white;
-        }
-
-        .floating-elements {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            pointer-events: none;
-        }
-
-        .floating-leaf {
-            position: absolute;
-            color: var(--light-green);
-            opacity: 0.3;
-            animation: float 6s ease-in-out infinite;
-        }
-
-        @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(10deg); }
-        }
-
-        
-        .share-recipe-section {
-            padding: 6rem 0;
-            background: white;
-            margin-bottom: 4rem;
-            border-radius: 50px;
-        }
-
-        .share-title {
-            font-size: 2.5rem;
-            font-weight: bold;
-            color: var(--dark-gray);
-            margin-bottom: 1rem;
-        }
-
-        .share-description {
-            font-size: 1.1rem;
-            color: #666;
-            margin-bottom: 2rem;
-            line-height: 1.6;
-        }
-
-        .phone-mockup {
-            background: linear-gradient(145deg, #f8f9fa, #e9ecef);
-            border-radius: 30px;
-            padding: 2rem;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            position: relative;
-            max-width: 300px;
-            margin: 0 auto;
-        }
-
-        .phone-screen {
-            background: white;
-            border-radius: 20px;
-            padding: 1.5rem;
-            box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
-        }
-
-        .btn-create-recipe {
-            background: var(--primary-green);
-            color: white;
-            border: none;
-            padding: 12px 25px;
-            border-radius: 20px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-
-        .btn-create-recipe:hover {
-            background: var(--dark-green);
-            transform: translateY(-2px);
-            color: white;
-        }
-
-        
-        trending-section {
-    border-radius: 50px;
-    padding: 4rem 0;
-    background: linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
-}
-
-.section-title {
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: var(--dark-gray);
-    margin-bottom: 1rem;
-    text-align: center;
-}
-
-.section-subtitle {
-    text-align: center;
-    color: #666;
-    margin-bottom: 3rem;
-    font-size: 1.1rem;
-}
-
-.recipe-card {
-    background: white;
-    border-radius: 15px;
-    overflow: hidden;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
-    margin-bottom: 2rem;
-    position: relative;
-}
-
-.recipe-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
-}
-
-.recipe-image {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-    border-radius: 15px 15px 0 0;
-}
-
-.recipe-content {
-    padding: 1.5rem;
-    position: relative;
-    z-index: 1;
-}
-
-.recipe-title {
-    font-size: 1.3rem;
-    font-weight: bold;
-    color: var(--dark-gray);
-    margin-bottom: 0.5rem;
-}
-
-.recipe-meta {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
-    color: #666;
-    font-size: 0.9rem;
-}
-
-.rating {
-    color: #FFD700;
-}
-
-.favorite-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: white;
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
-    color: #ccc;
-    z-index: 3;
-}
-
-.favorite-btn:hover {
-    color: #e74c3c;
-    transform: scale(1.1);
-}
-
-.favorite-btn.active {
-    color: #e74c3c;
-}
-
-.chef-badge {
-    background: var(--primary-green);
-    color: white;
-    padding: 0.3rem 0.8rem;
-    border-radius: 15px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    display: inline-block;
-    margin-bottom: 0.5rem;
-}
-
-.user-badge {
-    background: var(--accent-pink);
-    color: white;
-    padding: 0.3rem 0.8rem;
-    border-radius: 15px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    display: inline-block;
-    margin-bottom: 0.5rem;
-}
-
-
-.calories-info {
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid #eee;
-}
-
-.calories {
-    color: #ff6b35;
-    font-weight: 600;
-    font-size: 0.9rem;
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-}
-
-.calories i {
-    font-size: 0.8rem;
-}
-
-
-.nutrition-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(10px);
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-    border-radius: 15px;
-}
-
-.recipe-card:hover .nutrition-overlay {
-    opacity: 1;
-    visibility: visible;
-}
-
-.nutrition-content {
-    text-align: center;
-    padding: 2rem 1.5rem;
-}
-
-.nutrition-content h4 {
-    color: var(--dark-gray);
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-bottom: 1.5rem;
-}
-
-.nutrition-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    max-width: 200px;
-    margin: 0 auto;
-}
-
-.nutrition-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.3rem;
-}
-
-.nutrition-label {
-    font-size: 0.8rem;
-    color: #666;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.nutrition-value {
-    font-size: 1.1rem;
-    font-weight: bold;
-    color: var(--primary-green);
-}
-
-
-.recipe-card:hover .recipe-content {
-    transform: translateZ(0);
-}
-
-        
-        .restaurants-section {
-            padding: 4rem 0;
-            background: white;
-        }
-
-        .restaurants-container {
-            position: relative;
-            height: 300px;
-            overflow: hidden;
-        }
-
-        .restaurant-card {
-            position: absolute;
-            background: white;
-            border-radius: 20px;
-            padding: 1.5rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
-            min-width: 200px;
-            text-align: center;
-            cursor: pointer;
-            animation: floatAround 20s infinite linear;
-        }
-
-        .restaurant-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
-        }
-
-        .restaurant-logo {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            margin: 0 auto 1rem;
-            background-size: cover;
-            background-position: center;
-            border: 3px solid #f8f9fa;
-        }
-
-        .restaurant-name {
-            font-size: 1.1rem;
-            font-weight: bold;
-            color: var(--dark-gray);
-            margin-bottom: 0.5rem;
-        }
-
-        .restaurant-items {
-            font-size: 0.9rem;
-            color: #666;
-            margin-bottom: 1rem;
-        }
-
-        .restaurant-rating {
-            color: #FFD700;
-            font-size: 0.9rem;
-        }
-
-        @keyframes floatAround {
-            0% { transform: translateX(-100px) translateY(0px); }
-            25% { transform: translateX(20vw) translateY(-20px); }
-            50% { transform: translateX(50vw) translateY(10px); }
-            75% { transform: translateX(80vw) translateY(-15px); }
-            100% { transform: translateX(100vw) translateY(0px); }
-        }
-
-        
-        .restaurant-card:nth-child(1) { animation-delay: 0s; top: 20px; }
-        .restaurant-card:nth-child(2) { animation-delay: -4s; top: 20px; }
-        .restaurant-card:nth-child(3) { animation-delay: -8s; top: 20px; }
-        .restaurant-card:nth-child(4) { animation-delay: -12s; top: 20px; }
-        .restaurant-card:nth-child(5) { animation-delay: -16s; top: 20px; }
-
-        .daily-dish {
-            margin-left: 100px;
-        }
Index: triMatch/wwwroot/css/recipe-search.css
===================================================================
--- NutriMatch/wwwroot/css/recipe-search.css	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,211 +1,0 @@
-.search-container {
-    position: relative;
-    width: 100%;
-}
-
-.search-input {
-    width: 100%;
-    padding: 8px 12px;
-    font-size: 14px;
-    border: 1px solid #ced4da;
-    border-radius: 0.375rem;
-    outline: none;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.search-input:focus {
-    border-color: #86b7fe;
-    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: white;
-    border: 1px solid #ced4da;
-    border-top: none;
-    border-radius: 0 0 0.375rem 0.375rem;
-    max-height: 200px;
-    overflow-y: auto;
-    z-index: 1000;
-    display: none;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-}
-
-.dropdown-item {
-    padding: 8px 12px;
-    cursor: pointer;
-    border-bottom: 1px solid #f8f9fa;
-    transition: background-color 0.15s ease-in-out;
-}
-
-.dropdown-item:last-child {
-    border-bottom: none;
-}
-
-.dropdown-item:hover,
-.dropdown-item.highlighted {
-    background-color: #f8f9fa;
-}
-
-.dropdown-item.selected {
-    background-color: #0d6efd;
-    color: white;
-}
-
-.no-results {
-    padding: 8px 12px;
-    color: #6c757d;
-    font-style: italic;
-}
-
-.loading {
-    padding: 8px 12px;
-    color: #6c757d;
-}
-
-.ingredients-list {
-    margin-top: 10px;
-    padding: 10px;
-    background-color: #f8f9fa;
-    border-radius: 0.375rem;
-    min-height: 50px;
-}
-
-.ingredient-tag {
-    display: inline-block;
-    background-color: #0d6efd;
-    color: white;
-    padding: 4px 8px;
-    margin: 2px;
-    border-radius: 12px;
-    font-size: 12px;
-}
-
-.ingredient-tag .remove {
-    margin-left: 5px;
-    cursor: pointer;
-    font-weight: bold;
-}
-
-.ingredient-tag .remove:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-}
-
-
-.instructions-container {
-    margin-bottom: 15px;
-}
-
-.instructions-list {
-    margin-top: 10px;
-    padding: 10px;
-    background-color: #f8f9fa;
-    border-radius: 0.375rem;
-    min-height: 50px;
-}
-
-.instruction-item {
-    display: flex;
-    align-items: flex-start;
-    background-color: #ffffff;
-    padding: 12px;
-    margin: 8px 0;
-    border-radius: 8px;
-    border-left: 4px solid #0d6efd;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    transition: box-shadow 0.15s ease-in-out;
-}
-
-.instruction-item:hover {
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-.instruction-number {
-    background-color: #0d6efd;
-    color: white;
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: bold;
-    margin-right: 12px;
-    flex-shrink: 0;
-}
-
-.instruction-text {
-    flex: 1;
-    line-height: 1.5;
-    color: #333;
-    font-size: 14px;
-}
-
-.instruction-item .remove {
-    cursor: pointer;
-    margin-left: 12px;
-    color: #dc3545;
-    font-weight: bold;
-    font-size: 20px;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: background-color 0.15s ease-in-out;
-}
-
-.instruction-item .remove:hover {
-    background-color: rgba(220, 53, 69, 0.1);
-}
-
-.form-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-
-@media (max-width: 768px) {
-    .form-container {
-        padding: 10px;
-    }
-    
-    .ingredient-tag {
-        font-size: 11px;
-        padding: 3px 6px;
-    }
-    
-    .dropdown {
-        max-height: 150px;
-    }
-    
-    .instruction-item {
-        padding: 10px;
-        margin: 6px 0;
-    }
-    
-    .instruction-number {
-        width: 24px;
-        height: 24px;
-        font-size: 12px;
-        margin-right: 10px;
-    }
-    
-    .instruction-text {
-        font-size: 13px;
-    }
-    
-    .instruction-item .remove {
-        font-size: 18px;
-        width: 20px;
-        height: 20px;
-        margin-left: 8px;
-    }
-}
Index: triMatch/wwwroot/css/site.css
===================================================================
--- NutriMatch/wwwroot/css/site.css	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,31 +1,0 @@
-html {
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-html {
-  position: relative;
-  min-height: 100%;
-}
-
-body {
-  margin-bottom: 60px;
-}
-
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
-  color: var(--bs-secondary-color);
-  text-align: end;
-}
-
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
-  text-align: start;
-}
Index: NutriMatch/wwwroot/js/RecipeCreate.js
===================================================================
--- NutriMatch/wwwroot/js/RecipeCreate.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/js/RecipeCreate.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,385 @@
+
+let selectedIngredients = [];
+let selectedInstructions = [];
+let searchTimeout;
+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');
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializeSearchFunctionality();
+    initializeInstructionsFunctionality();
+    initializeFileUpload();
+});
+
+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;
+}
+
+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);
+                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;
+
+    ingredientDropdown.innerHTML = '';
+    
+    if (!suggestions || suggestions.length === 0) {
+        ingredientDropdown.innerHTML = '<div class="no-results">No results found</div>';
+        showDropdown(ingredientDropdown);
+        return;
+    }
+
+    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;
+    }
+}
+
+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' });
+    }
+}
+
+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;
+}
+
+function removeIngredient(ingredientName) {
+    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 = '';
+}
+
+function removeInstruction(instructionIndex) {
+    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">
+                ${ingredient.Quantity} ${ingredient.Unit} of ${ingredient.Name}
+                <span class="remove" onclick="removeIngredient('${ingredient.Name}')" 
+                    title="Remove ingredient">&times;</span>
+            </span>`
+        ).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">
+                <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('');
+    }
+}
+
+function updateIngredientsInput() {
+    if (hiddenIngredientsInput) {
+        hiddenIngredientsInput.value = JSON.stringify(selectedIngredients);
+    }
+}
+
+
+function updateInstructionsInput() {
+    if (hiddenInstructionsInput) {
+        hiddenInstructionsInput.value = JSON.stringify(selectedInstructions);
+    }
+}
+
+function showDropdown(dropdownElement) {
+    if (dropdownElement) {
+        dropdownElement.style.display = 'block';
+    }
+}
+
+function hideDropdown(dropdownElement) {
+    if (dropdownElement) {
+        dropdownElement.style.display = 'none';
+    }
+    currentFocus = -1;
+}
+
+function handleFileSelect(file) {
+    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);
+    }
+}    
Index: NutriMatch/wwwroot/js/RecipeEdit.js
===================================================================
--- NutriMatch/wwwroot/js/RecipeEdit.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/js/RecipeEdit.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,423 @@
+let selectedIngredients = [];
+let selectedInstructions = [];
+let searchTimeout;
+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');
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializeSearchFunctionality();
+    initializeInstructionsFunctionality();
+    initializeInstructionsAndIngredients();
+    
+    updateIngredientsDisplay();
+    updateIngredientsInput();
+    updateInstructionsDisplay();
+    updateInstructionsInput(); 
+});
+
+function initializeInstructionsAndIngredients(){
+    var existingInstructions = JSON.parse((document.getElementById('selectedInstructionsScript').innerText))[0];
+    existingInstructions = JSON.parse(existingInstructions);
+    
+    var existingIngredients = JSON.parse((document.getElementById('selectedIngredientsScript').innerText));
+    console.log(existingIngredients)
+
+    existingIngredients.forEach(element => {
+        selectedIngredients.push({
+            Id: element.IngredientId,
+            Name: element.Ingredient.Name,
+            Quantity: element.Quantity,
+            Unit: element.Unit
+        })
+    }); 
+
+    existingInstructions.forEach(element => {
+        selectedInstructions.push(element);
+    });
+}
+
+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);
+                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',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        });
+
+        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;
+
+    ingredientDropdown.innerHTML = '';
+    
+    if (!suggestions || suggestions.length === 0) {
+        ingredientDropdown.innerHTML = '<div class="no-results">No results found</div>';
+        showDropdown(ingredientDropdown);
+        return;
+    }
+
+    suggestions.forEach((suggestion, index) => {
+        const item = document.createElement('div');
+        item.className = 'dropdown-item';
+        item.setAttribute('data-index', index);
+        
+        const name = typeof suggestion === 'string' ? suggestion : suggestion.name;
+        const id = typeof suggestion === 'object' ? suggestion.id : null;
+        
+        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;
+    }
+}
+
+
+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' });
+    }
+}
+
+
+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;
+}
+
+
+function removeIngredient(ingredientName) {
+    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 = '';
+}
+
+function removeInstruction(instructionIndex) {
+    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">
+                ${ingredient.Quantity} ${ingredient.Unit} of ${ingredient.Name}
+                <span class="remove" onclick="removeIngredient('${ingredient.Name}')" title="Remove ingredient">&times;</span>
+            </span>`
+        ).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">
+                <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('');
+    }
+}
+
+function updateIngredientsInput() {
+    if (hiddenIngredientsInput) {
+        hiddenIngredientsInput.value = JSON.stringify(selectedIngredients);
+        console.log('Updated hidden ingredients input:', hiddenIngredientsInput.value);
+    }
+}
+
+function updateInstructionsInput() {
+    if (hiddenInstructionsInput) {
+        hiddenInstructionsInput.value = JSON.stringify(selectedInstructions);
+        console.log('Updated hidden instructions input:', hiddenInstructionsInput.value);
+    }
+}
+
+function showDropdown(dropdownElement) {
+    if (dropdownElement) {
+        dropdownElement.style.display = 'block';
+    }
+}
+
+function hideDropdown(dropdownElement) {
+    if (dropdownElement) {
+        dropdownElement.style.display = 'none';
+    }
+    currentFocus = -1;
+}
+
+
+
+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 handleFileSelect(file) {
+    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);
+    }
+}
+
+function setFileToInput(file) {
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    
+    fileInput.files = dataTransfer.files;
+}
+
Index: NutriMatch/wwwroot/js/RecipeIndex.js
===================================================================
--- NutriMatch/wwwroot/js/RecipeIndex.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/js/RecipeIndex.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,238 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('searchInput');
+    
+    
+    searchInput.addEventListener('input', function() {
+        filterRecipes();
+    });
+    
+    
+    searchInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+           filterRecipes();
+        }
+    });
+
+    filterRecipes();
+});
+
+function showRecipeDetails(recipeId) {
+
+    const clickedCard = event.currentTarget;
+    clickedCard.classList.add('loading');
+    
+    fetch(`/Recipes/Details/${recipeId}`)
+        .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 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 toggleFavorite(button) {
+    const icon = button.querySelector('i');
+    if (icon.classList.contains('far')) {
+        icon.classList.remove('far');
+        icon.classList.add('fas');
+        button.classList.add('active');
+    } else {
+        icon.classList.remove('fas');
+        icon.classList.add('far');
+        button.classList.remove('active');
+    }
+}
+
+
+
+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 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;
+        
+        if (matchesSearch && matchesMacros) {
+            card.style.display = 'block';
+            visibleCount++;
+        } else {
+            card.style.display = 'none';
+        }
+    });
+    
+    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 = '';
+    
+    updateSlider('calories');
+    updateSlider('protein');
+    updateSlider('carbs');
+    updateSlider('fats');
+
+    filterRecipes();
+}
+
+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/RestaurantIndex.js
===================================================================
--- NutriMatch/wwwroot/js/RestaurantIndex.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
+++ NutriMatch/wwwroot/js/RestaurantIndex.js	(revision a8860663d8380fb13055bfa6006477787df4824f)
@@ -0,0 +1,194 @@
+let currentFilters = {
+    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();
+});
+
+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;
+}
+
+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;
+}
+
+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}`;
+}
+
+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();
+}
+
+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();
+    })
+    .then(html => {
+        console.log('Received HTML length:', html.length);
+        menuContainer.innerHTML = html;
+    })
+    .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>
+                Failed to load menu details. Please try again.
+                <br><small>Error: ${err.message}</small>
+            </div>
+        `;
+    });
+}
+
+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);
+}
+
+
+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();
+        });
+    });
+}
+
+
+
+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) + '%';
+
+    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');
+
+}
+
+
Index: triMatch/wwwroot/js/filter.js
===================================================================
--- NutriMatch/wwwroot/js/filter.js	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,21 +1,0 @@
-
-document.getElementById("submitFilter").addEventListener("click", async function () {
-const form = document.getElementById("filterForm");
-const data = new FormData(form);
-
-const response = await fetch("/Recipes/Filter", {
-    method: "POST",
-    body: data,
-    headers: {
-        "X-Requested-With": "XMLHttpRequest"
-    }
-});
-
-if (response.ok) {
-    const html = await response.text();
-    document.getElementById("resultsContainer").innerHTML = html;
-    console.log(html);
-} else {
-    alert("Something went wrong while fetching recipes.");
-}
-});
Index: triMatch/wwwroot/js/recipe-search-edit.js
===================================================================
--- NutriMatch/wwwroot/js/recipe-search-edit.js	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,303 +1,0 @@
-
-let selectedIngredients = [];
-let selectedInstructions = [];
-let searchTimeout;
-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');
-document.addEventListener('DOMContentLoaded', function() {
-    initializeSearchFunctionality();
-    initializeInstructionsFunctionality();
-    var strr = JSON.parse((document.getElementById('selectedInstructionsScript').innerText))[0];
-    strr = JSON.parse(strr);
-    var strr2 = JSON.parse((document.getElementById('selectedIngredientsScript').innerText));
-    console.log(strr2)
-    strr2.forEach(element => {
-        selectedIngredients.push({
-            Id: element.IngredientId,
-            Name: element.Ingredient.Name,
-            Quantity: element.Quantity,
-            Unit: element.Unit
-        })
-    });
-    updateIngredientsDisplay();
-    updateIngredientsInput();
-    strr.forEach(element => {
-        selectedInstructions.push(element);
-    });
-    updateInstructionsDisplay()
-    updateInstructionsInput()
-});
-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);
-                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',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        });
-        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;
-    ingredientDropdown.innerHTML = '';
-    if (!suggestions || suggestions.length === 0) {
-        ingredientDropdown.innerHTML = '<div class="no-results">No results found</div>';
-        showDropdown(ingredientDropdown);
-        return;
-    }
-    suggestions.forEach((suggestion, index) => {
-        const item = document.createElement('div');
-        item.className = 'dropdown-item';
-        item.setAttribute('data-index', index);
-        const name = typeof suggestion === 'string' ? suggestion : suggestion.name;
-        const id = typeof suggestion === 'object' ? suggestion.id : null;
-        const regex = new RegExp(`(${escapeRegExp(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;
-    }
-}
-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' });
-    }
-}
-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;
-}
-function removeIngredient(ingredientName) {
-    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 = '';
-}
-function removeInstruction(instructionIndex) {
-    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" style="display: inline-block; background-color: #e3f2fd; padding: 5px 10px; margin: 2px; border-radius: 15px; font-size: 14px;">
-                ${escapeHtml(ingredient.Quantity)} ${escapeHtml(ingredient.Unit)} of ${escapeHtml(ingredient.Name)}
-                <span class="remove" onclick="removeIngredient('${escapeHtml(ingredient.Name)}')" 
-                      style="cursor: pointer; margin-left: 8px; color: #dc3545; font-weight: bold;" 
-                      title="Remove ingredient">&times;</span>
-            </span>`
-        ).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" 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;">${index + 1}</span>
-                <span class="instruction-text" style="flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;">
-${escapeHtml(instruction)}</span>
-                <span class="remove" onclick="removeInstruction(${index})" 
-                      style="cursor: pointer; margin-left: 10px; color: #dc3545; font-weight: bold; font-size: 18px;" 
-                      title="Remove instruction">&times;</span>
-            </div>`
-        ).join('');
-    }
-}
-function updateIngredientsInput() {
-    if (hiddenIngredientsInput) {
-        hiddenIngredientsInput.value = JSON.stringify(selectedIngredients);
-        console.log('Updated hidden ingredients input:', hiddenIngredientsInput.value);
-    }
-}
-function updateInstructionsInput() {
-    if (hiddenInstructionsInput) {
-        hiddenInstructionsInput.value = JSON.stringify(selectedInstructions);
-        console.log('Updated hidden instructions input:', hiddenInstructionsInput.value);
-    }
-}
-function showDropdown(dropdownElement) {
-    if (dropdownElement) {
-        dropdownElement.style.display = 'block';
-    }
-}
-function hideDropdown(dropdownElement) {
-    if (dropdownElement) {
-        dropdownElement.style.display = 'none';
-    }
-    currentFocus = -1;
-}
-function escapeHtml(text) {
-    if (text === null || text === undefined) return '';
-    const div = document.createElement('div');
-    div.textContent = text.toString();
-    return div.innerHTML;
-}
-function escapeRegExp(string) {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
Index: triMatch/wwwroot/js/recipe-search.js
===================================================================
--- NutriMatch/wwwroot/js/recipe-search.js	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,284 +1,0 @@
-
-let selectedIngredients = [];
-let selectedInstructions = [];
-let searchTimeout;
-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');
-document.addEventListener('DOMContentLoaded', function() {
-    initializeSearchFunctionality();
-    initializeInstructionsFunctionality();
-});
-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);
-                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',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        });
-        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;
-    ingredientDropdown.innerHTML = '';
-    if (!suggestions || suggestions.length === 0) {
-        ingredientDropdown.innerHTML = '<div class="no-results">No results found</div>';
-        showDropdown(ingredientDropdown);
-        return;
-    }
-    suggestions.forEach((suggestion, index) => {
-        const item = document.createElement('div');
-        item.className = 'dropdown-item';
-        item.setAttribute('data-index', index);
-        const name = typeof suggestion === 'string' ? suggestion : suggestion.name;
-        const id = typeof suggestion === 'object' ? suggestion.id : null;
-        const regex = new RegExp(`(${escapeRegExp(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;
-    }
-}
-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' });
-    }
-}
-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;
-}
-function removeIngredient(ingredientName) {
-    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 = '';
-}
-function removeInstruction(instructionIndex) {
-    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" style="display: inline-block; background-color: #e3f2fd; padding: 5px 10px; margin: 2px; border-radius: 15px; font-size: 14px;">
-                ${escapeHtml(ingredient.Quantity)} ${escapeHtml(ingredient.Unit)} of ${escapeHtml(ingredient.Name)}
-                <span class="remove" onclick="removeIngredient('${escapeHtml(ingredient.Name)}')" 
-                      style="cursor: pointer; margin-left: 8px; color: #dc3545; font-weight: bold;" 
-                      title="Remove ingredient">&times;</span>
-            </span>`
-        ).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" 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;">${index + 1}</span>
-                <span class="instruction-text" style="flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;">
-${escapeHtml(instruction)}</span>
-                <span class="remove" onclick="removeInstruction(${index})" 
-                      style="cursor: pointer; margin-left: 10px; color: #dc3545; font-weight: bold; font-size: 18px;" 
-                      title="Remove instruction">&times;</span>
-            </div>`
-        ).join('');
-    }
-}
-function updateIngredientsInput() {
-    if (hiddenIngredientsInput) {
-        hiddenIngredientsInput.value = JSON.stringify(selectedIngredients);
-        console.log('Updated hidden ingredients input:', hiddenIngredientsInput.value);
-    }
-}
-function updateInstructionsInput() {
-    if (hiddenInstructionsInput) {
-        hiddenInstructionsInput.value = JSON.stringify(selectedInstructions);
-        console.log('Updated hidden instructions input:', hiddenInstructionsInput.value);
-    }
-}
-function showDropdown(dropdownElement) {
-    if (dropdownElement) {
-        dropdownElement.style.display = 'block';
-    }
-}
-function hideDropdown(dropdownElement) {
-    if (dropdownElement) {
-        dropdownElement.style.display = 'none';
-    }
-    currentFocus = -1;
-}
-function escapeHtml(text) {
-    if (text === null || text === undefined) return '';
-    const div = document.createElement('div');
-    div.textContent = text.toString();
-    return div.innerHTML;
-}
-function escapeRegExp(string) {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
Index: triMatch/wwwroot/js/site.js
===================================================================
--- NutriMatch/wwwroot/js/site.js	(revision f2b09ee1157f2f5e93f0bcfb42b366cbb520fdee)
+++ 	(revision )
@@ -1,1 +1,0 @@
-// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification