Index: triMatch/Controllers/CreateController.cs
===================================================================
--- NutriMatch/Controllers/CreateController.cs	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ 	(revision )
@@ -1,11 +1,0 @@
-using Microsoft.AspNetCore.Mvc;
-namespace MyApp.Namespace
-{
-    public class Create : Controller
-    {
-        public ActionResult Index()
-        {
-            return View();
-        }
-    }
-}
Index: NutriMatch/Controllers/RecipesController.cs
===================================================================
--- NutriMatch/Controllers/RecipesController.cs	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Controllers/RecipesController.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -128,4 +128,13 @@
             return _context.Recipes.Any(e => e.Id == id);
         }
+        public async Task<ActionResult<List<Ingredient>>> getSuggestions([FromQuery] String query)
+        {
+            List<Ingredient> suggestions = await _context.Ingredients
+            .Where(i => EF.Functions.ILike(i.Name, $"%{query}%"))
+            .OrderBy(i => i.Name)
+            .Take(5)
+            .ToListAsync();   
+            return suggestions;
+        }
     }
 }
Index: NutriMatch/Data/AppDbContext.cs
===================================================================
--- NutriMatch/Data/AppDbContext.cs	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Data/AppDbContext.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -1,5 +1,4 @@
 using Microsoft.EntityFrameworkCore;
 using NutriMatch.Models;
-
 namespace NutriMatch.Data
 {
@@ -7,9 +6,31 @@
     {
         public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
-
         public DbSet<Recipe> Recipes { get; set; }
+        public DbSet<RecipeIngredients> RecipeIngredients { get; set; }
         public DbSet<Ingredient> Ingredients { 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/20250610143316_AddRecipeIngredients.Designer.cs
===================================================================
--- NutriMatch/Migrations/20250610143316_AddRecipeIngredients.Designer.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/Migrations/20250610143316_AddRecipeIngredients.Designer.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,69 @@
+// <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("20250610143316_AddRecipeIngredients")]
+    partial class AddRecipeIngredients
+    {
+        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.Recipe", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<string>("Instructions")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<float>("Rating")
+                        .HasColumnType("real");
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.ToTable("Recipes");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredients", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Quantity")
+                        .HasColumnType("real");
+                    b.Property<int?>("RecipeId")
+                        .HasColumnType("integer");
+                    b.Property<string>("Unit")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("RecipeId");
+                    b.ToTable("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredients", b =>
+                {
+                    b.HasOne("NutriMatch.Models.Recipe", null)
+                        .WithMany("Ingredients")
+                        .HasForeignKey("RecipeId");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
+                {
+                    b.Navigation("Ingredients");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
Index: NutriMatch/Migrations/20250610143316_AddRecipeIngredients.cs
===================================================================
--- NutriMatch/Migrations/20250610143316_AddRecipeIngredients.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/Migrations/20250610143316_AddRecipeIngredients.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,64 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+#nullable disable
+namespace NutriMatch.Migrations
+{
+    public partial class AddRecipeIngredients : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "RecipeIngredients",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    Unit = table.Column<string>(type: "text", nullable: false),
+                    Quantity = table.Column<float>(type: "real", nullable: false),
+                    RecipeId = table.Column<int>(type: "integer", nullable: true)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_RecipeIngredients", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_RecipeIngredients_Recipes_RecipeId",
+                        column: x => x.RecipeId,
+                        principalTable: "Recipes",
+                        principalColumn: "Id");
+                });
+            migrationBuilder.CreateIndex(
+                name: "IX_RecipeIngredients_RecipeId",
+                table: "RecipeIngredients",
+                column: "RecipeId");
+        }
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "RecipeIngredients");
+            migrationBuilder.CreateTable(
+                name: "Ingredients",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    Name = table.Column<string>(type: "text", nullable: false),
+                    Quantity = table.Column<float>(type: "real", nullable: false),
+                    RecipeId = table.Column<int>(type: "integer", nullable: true),
+                    Unit = table.Column<string>(type: "text", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_Ingredients", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_Ingredients_Recipes_RecipeId",
+                        column: x => x.RecipeId,
+                        principalTable: "Recipes",
+                        principalColumn: "Id");
+                });
+            migrationBuilder.CreateIndex(
+                name: "IX_Ingredients_RecipeId",
+                table: "Ingredients",
+                column: "RecipeId");
+        }
+    }
+}
Index: NutriMatch/Migrations/20250610175720_AddIngredientTable.Designer.cs
===================================================================
--- NutriMatch/Migrations/20250610175720_AddIngredientTable.Designer.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/Migrations/20250610175720_AddIngredientTable.Designer.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,95 @@
+// <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("20250610175720_AddIngredientTable")]
+    partial class AddIngredientTable
+    {
+        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<string>("Instructions")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.Property<float>("Rating")
+                        .HasColumnType("real");
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.ToTable("Recipes");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredients", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Quantity")
+                        .HasColumnType("real");
+                    b.Property<int?>("RecipeId")
+                        .HasColumnType("integer");
+                    b.Property<string>("Unit")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("RecipeId");
+                    b.ToTable("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredients", b =>
+                {
+                    b.HasOne("NutriMatch.Models.Recipe", null)
+                        .WithMany("RecipeIngredients")
+                        .HasForeignKey("RecipeId");
+                });
+            modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
+                {
+                    b.Navigation("RecipeIngredients");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
Index: NutriMatch/Migrations/20250610175720_AddIngredientTable.cs
===================================================================
--- NutriMatch/Migrations/20250610175720_AddIngredientTable.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/Migrations/20250610175720_AddIngredientTable.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,17 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+#nullable disable
+namespace NutriMatch.Migrations
+{
+    public partial class AddIngredientTable : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+        }
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "food_macronutrients");
+        }
+    }
+}
Index: NutriMatch/Migrations/AppDbContextModelSnapshot.cs
===================================================================
--- NutriMatch/Migrations/AppDbContextModelSnapshot.cs	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Migrations/AppDbContextModelSnapshot.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -22,19 +22,25 @@
                     b.Property<int>("Id")
                         .ValueGeneratedOnAdd()
-                        .HasColumnType("integer");
+                        .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");
-                    b.Property<float>("Quantity")
-                        .HasColumnType("real");
-                    b.Property<int?>("RecipeId")
-                        .HasColumnType("integer");
-                    b.Property<string>("Unit")
-                        .IsRequired()
-                        .HasColumnType("text");
+                        .HasColumnType("text")
+                        .HasColumnName("food_name");
+                    b.Property<float>("Protein")
+                        .HasColumnType("real")
+                        .HasColumnName("protein_g");
                     b.HasKey("Id");
-                    b.HasIndex("RecipeId");
-                    b.ToTable("Ingredients");
+                    b.ToTable("food_macronutrients", (string)null);
                 });
             modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
@@ -55,13 +61,30 @@
                     b.ToTable("Recipes");
                 });
-            modelBuilder.Entity("NutriMatch.Models.Ingredient", b =>
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredients", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+                    b.Property<float>("Quantity")
+                        .HasColumnType("real");
+                    b.Property<int?>("RecipeId")
+                        .HasColumnType("integer");
+                    b.Property<string>("Unit")
+                        .IsRequired()
+                        .HasColumnType("text");
+                    b.HasKey("Id");
+                    b.HasIndex("RecipeId");
+                    b.ToTable("RecipeIngredients");
+                });
+            modelBuilder.Entity("NutriMatch.Models.RecipeIngredients", b =>
                 {
                     b.HasOne("NutriMatch.Models.Recipe", null)
-                        .WithMany("Ingredients")
+                        .WithMany("RecipeIngredients")
                         .HasForeignKey("RecipeId");
                 });
             modelBuilder.Entity("NutriMatch.Models.Recipe", b =>
                 {
-                    b.Navigation("Ingredients");
+                    b.Navigation("RecipeIngredients");
                 });
 #pragma warning restore 612, 618
Index: NutriMatch/Models/Ingredient.cs
===================================================================
--- NutriMatch/Models/Ingredient.cs	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Models/Ingredient.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -13,13 +13,10 @@
         [Key]
         public int Id { get; set; }
+        public String Name { get; set; }
+        public float Calories { get; set; }
+        public float Protein { get; set; }
+        public float Carbs { get; set; }
+        public float Fat { get; set; }
 
-        public String Name { get; set; }
-
-        public String Unit { get; set; }
-
-        public float Quantity { get; set; }
-
-        [NotMapped]
-        public NutritionInfo NutritionInfo { get; set; } 
     }
 }
Index: NutriMatch/Models/Recipe.cs
===================================================================
--- NutriMatch/Models/Recipe.cs	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Models/Recipe.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -16,5 +16,5 @@
         public float Rating { get; set; }
         [ValidateNever]
-        public virtual List<Ingredient> Ingredients { get; set; }   
+        public virtual List<RecipeIngredients> RecipeIngredients { get; set; }   
         
     }
Index: NutriMatch/Models/RecipeIngredients.cs
===================================================================
--- NutriMatch/Models/RecipeIngredients.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/Models/RecipeIngredients.cs	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace NutriMatch.Models
+{
+    public class RecipeIngredients
+    {
+        [Key]
+        public int Id { get; set; }
+
+        public String Unit { get; set; }
+
+        public float Quantity { get; set; }
+
+        [NotMapped]
+        public NutritionInfo NutritionInfo { get; set; } 
+    }
+}
Index: triMatch/Views/Create/Index.cshtml
===================================================================
--- NutriMatch/Views/Create/Index.cshtml	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ 	(revision )
@@ -1,9 +1,0 @@
-<div class="text-center">
-    <p>Create new recipe</p>    
-    @using (Html.BeginForm("CreateRecipe", "Create")) {
-        <div>
-            <label>Name:</label>
-            <input type="text" name="Name" required />
-        </div>
-    }
-</div>
Index: NutriMatch/Views/Recipes/Create.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Create.cshtml	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Views/Recipes/Create.cshtml	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -1,17 +1,14 @@
 @model NutriMatch.Models.Recipe
-
 @{
     Layout = null;
 }
-
 <!DOCTYPE html>
-
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
+    <link href="~/css/recipe-search.css" rel="stylesheet" />
     <title>Create</title>
 </head>
 <body>
-
 <h4>Recipe</h4>
 <hr />
@@ -31,19 +28,35 @@
             </div>
             <div class="form-group">
-                <label asp-for="Rating" class="control-label"></label>
-                <input asp-for="Rating" class="form-control" />
-                <span asp-validation-for="Rating" class="text-danger"></span>
-            </div>
+                <label class="form-label">Search Ingredients</label>
+                <div class="search-container">
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <input type="text" class="search-input form-control" placeholder="Type to search ingredients..." id="ingredientSearch" style="flex: 2;">
+                        <select class="form-control" id="ingredientUnit" style="flex: 1;">
+                            <option value="">Select Unit</option>
+                            <option value="g">Grams (g)</option>
+                            <option value="ml">Milliliters (ml)</option>
+                            <option value="oz">Ounce</option>
+                            <option value="tbsp">Tablespoon</option>
+                        </select>
+                        <input type="number" class="form-control" placeholder="Quantity" id="ingredientQuantity" style="flex: 1;" step="0.01" min="0">
+                        <button type="button" class="btn btn-primary" id="addIngredientButton">Add</button>
+                    </div>
+                    <div class="dropdown" id="ingredientDropdown"></div>
+                </div>
+                <div class="ingredients-list" id="ingredientsList">
+                    <small class="text-muted">Selected ingredients will appear here</small>
+                </div>
+                <input type="hidden" id="selectedIngredients" name="Ingredients" />
+             </div>
             <div class="form-group">
                 <input type="submit" value="Create" class="btn btn-primary" />
             </div>
-        </form>
+         </form>
     </div>
 </div>
-
 <div>
     <a asp-action="Index">Back to List</a>
 </div>
-
+<script src="~/js/recipe-search.js"></script>
 </body>
 </html>
Index: NutriMatch/Views/Shared/_Layout.cshtml
===================================================================
--- NutriMatch/Views/Shared/_Layout.cshtml	(revision 1ca842b6aaa3634469b43407137ae225dbb00ff6)
+++ NutriMatch/Views/Shared/_Layout.cshtml	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -23,5 +23,5 @@
             </div>
             <div class="container-fluid">
-               <a asp-controller="Create" asp-action="Index">Create</a>
+               <a asp-controller="RecipesController" asp-action="Index">Create a Recipe</a>
             </div>
         </nav>
Index: NutriMatch/wwwroot/css/recipe-search.css
===================================================================
--- NutriMatch/wwwroot/css/recipe-search.css	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/wwwroot/css/recipe-search.css	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,118 @@
+.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%;
+}
+
+.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;
+    }
+}
Index: NutriMatch/wwwroot/js/recipe-search.js
===================================================================
--- NutriMatch/wwwroot/js/recipe-search.js	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
+++ NutriMatch/wwwroot/js/recipe-search.js	(revision 867577b51ddb532b3d78531bc962de86019d1d97)
@@ -0,0 +1,228 @@
+
+let selectedIngredients = [];
+let searchTimeout;
+let currentFocus = -1;
+let selectedIngredient = null;
+const ingredientSearch = document.getElementById('ingredientSearch');
+const ingredientDropdown = document.getElementById('ingredientDropdown');
+const ingredientsList = document.getElementById('ingredientsList');
+const hiddenInput = document.getElementById('selectedIngredients');
+const addButton = document.getElementById('addIngredientButton');
+const qtyInput = document.getElementById('ingredientQuantity');
+const unitSelect = document.getElementById('ingredientUnit');
+document.addEventListener('DOMContentLoaded', function() {
+    initializeSearchFunctionality();
+});
+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);
+        }
+    });
+}
+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 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 updateIngredientsInput() {
+    if (hiddenInput) {
+        hiddenInput.value = JSON.stringify(selectedIngredients);
+    }
+}
+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, '\\$&');
+}
+window.RecipeSearch = {
+    addIngredient: addIngredient,
+    removeIngredient: removeIngredient,
+    getSelectedIngredients: () => [...selectedIngredients],
+    clearIngredients: () => {
+        selectedIngredients = [];
+        updateIngredientsDisplay();
+        updateIngredientsInput();
+    }
+};