Index: NutriMatch/Controllers/HomeController.cs
===================================================================
--- NutriMatch/Controllers/HomeController.cs	(revision cb1d033d349ea5fc9a7753731c5747e40f380bc6)
+++ NutriMatch/Controllers/HomeController.cs	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
@@ -1,10 +1,19 @@
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using NutriMatch.Data;
+using NutriMatch.Models;
 namespace MyApp.Namespace
 {
     public class Home : Controller
     {
-        public ActionResult Index()
+        private readonly AppDbContext _context;
+        public Home(AppDbContext context)
         {
-            return View();
+            _context = context;
+        }
+        public async Task<IActionResult> Index()
+        {
+            List<Recipe> recipes = await _context.Recipes.Take(6).ToListAsync();
+            return View(recipes);
         }
     }
Index: NutriMatch/Views/Home/Index.cshtml
===================================================================
--- NutriMatch/Views/Home/Index.cshtml	(revision cb1d033d349ea5fc9a7753731c5747e40f380bc6)
+++ NutriMatch/Views/Home/Index.cshtml	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
@@ -1,50 +1,241 @@
-﻿
-@{
-    ViewData["Title"] = "Home Page";
-}
-<html>
-<div class="text-center">
-        <form id="filterForm">
-         <div class="row">
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Calories (Min)</label>
-                <input name="MinCalories" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Calories (Max)</label>
-                <input name="MaxCalories" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Protein (Min)</label>
-                <input name="MinProtein" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Protein (Max)</label>
-                <input name="MaxProtein" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Fats (Min)</label>
-                <input name="MinFats" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Fats (Max)</label>
-                <input name="MaxFats" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Carbs (Min)</label>
-                <input name="MinCarbs" class="form-control" type="number" />
-            </div>
-            <div class="col-md-6 mb-3">
-                <label class="form-label">Carbs (Max)</label>
-                <input name="MaxCarbs" class="form-control" type="number" />
-            </div>
-            <div class="col-12 text-end">
-                <button type="button" class="btn btn-primary" id="submitFilter">Search Recipes</button>
-            </div>
-        </form>
-    </div>
-</div>
-<div id="resultsContainer" class="mt-4"></div>
-</div>
-<script src="~/js/filter.js"></script>
-</html>
+﻿@model List<NutriMatch.Models.Recipe>
+<!DOCTYPE html>
+<html lang="en">
+<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">
+</head>
+<body>
+    <section class="signup-section" style="margin-top: 200px;">
+        <div class="floating-elements">
+            <i class="fas fa-leaf floating-leaf" style="top: 10%; left: 15%; font-size: 2rem;"></i>
+            <i class="fas fa-seedling floating-leaf" style="top: 60%; right: 20%; font-size: 1.5rem; animation-delay: -2s;"></i>
+            <i class="fas fa-leaf floating-leaf" style="top: 30%; right: 10%; font-size: 2.5rem; animation-delay: -4s;"></i>
+        </div>
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="daily-dish col-lg-6">
+                    <h1 class="signup-title">Create your account</h1>
+                    <h2 class="signup-subtitle">Optimize Your Nutrition</h2>
+                    <p class="signup-description">
+                        Join our macro-focused recipe platform designed for goal-oriented eating. <br/>
+                        As a member, you can
+                        create and manage your own recipes,
+                        rate and review meals from the community,
+                        save your favorite dishes for quick access and
+                        filter recipes by macronutrient profiles that align with your dietary needs
+                    </p>
+                    <button class="btn btn-primary-custom">
+                        Sign up
+                    </button>
+                    <p class="mt-3 text-muted">Already have an account? <a href="#" style="color: var(--primary-green); text-decoration: none;">Log in</a></p>
+                </div>
+                <div class="col-lg-4 text-center">
+                    <div class="position-relative">
+                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
+                             alt="Delicious Food Bowl" class="img-fluid rounded-circle" style="width: 300px; height: 300px; object-fit: cover; box-shadow: 0 20px 40px rgba(0,0,0,0.2);">
+                        <div class="position-absolute" style="top: 20px; right: 20px; background: white; border-radius: 50px; padding: 8px 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
+                            <div class="d-flex align-items-center gap-2">
+                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80" 
+                                     alt="Chef" class="rounded-circle" style="width: 30px; height: 30px; object-fit: cover;">
+                                <div>
+                                    <small class="fw-bold text-dark d-block">Chef Milan</small>
+                                    <div class="text-warning" style="font-size: 12px;">
+                                        <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"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <small class="text-muted d-block mt-1">  </small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="share-recipe-section">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6">
+                    <div class="phone-mockup">
+                        <div class="phone-screen">
+                            <div class="text-center mb-3">
+                                <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" 
+                                     alt="Recipe" class="img-fluid rounded" style="width: 100%; height: 150px; object-fit: cover;">
+                            </div>
+                            <h6 class="fw-bold mb-2">Protein pancakes</h6>
+                            <div class="d-flex justify-content-between align-items-center mb-2">
+                                <small class="text-muted">By Kire the chef</small>
+                                <div class="text-warning" style="font-size: 12px;">
+                                    <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"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <h2 class="share-title">Share Your Recipes</h2>
+                    <p class="share-description">
+                        Have a recipe that fits your nutrition goals? Share it with the community and help others discover meals that balance flavor and function. Whether it’s high-protein, low-carb, or macro-balanced — your creations make a difference.
+                    </p>
+                    <button class="btn btn-create-recipe">
+                        Create New Recipe
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="trending-section">
+        <div class="container">
+            <h2 class="section-title">Trending Foods</h2>
+            <p class="section-subtitle">Discover the most popular recipes shared by our community</p>
+            <div class="row">
+                @foreach (var recipe in Model){ 
+                    <div class="col-md-6 col-lg-4">
+                        <div class="recipe-card">
+                            <button class="favorite-btn">
+                                <i class="far fa-heart"></i>
+                            </button>
+                            <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">
+                                    <span class="rating">
+                                        <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>
+                            </div>
+                            <div class="nutrition-overlay">
+                                <div class="nutrition-content">
+                                    <h4>Nutrition Facts</h4>
+                                    <div class="nutrition-grid">
+                                        <div class="nutrition-item">
+                                            <span class="nutrition-label">Calories</span>
+                                            <span class="nutrition-value">@recipe.Calories</span>
+                                        </div>
+                                        <div class="nutrition-item">
+                                            <span class="nutrition-label">Protein</span>
+                                            <span class="nutrition-value">@recipe.Protein</span>
+                                        </div>
+                                        <div class="nutrition-item">
+                                            <span class="nutrition-label">Carbs</span>
+                                            <span class="nutrition-value">@recipe.Carbs</span>
+                                        </div>
+                                        <div class="nutrition-item">
+                                            <span class="nutrition-label">Fats</span>
+                                            <span class="nutrition-value">@recipe.Fat</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </section>
+    <section class="restaurants-section">
+        <div class="container">
+            <h2 class="section-title">Popular Restaurants</h2>
+            <p class="section-subtitle">Explore the most popular restaurants with delicious options</p>
+        </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>
+                    <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>
+</body>
+   
Index: NutriMatch/Views/Recipes/Index.cshtml
===================================================================
--- NutriMatch/Views/Recipes/Index.cshtml	(revision cb1d033d349ea5fc9a7753731c5747e40f380bc6)
+++ NutriMatch/Views/Recipes/Index.cshtml	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
@@ -1,55 +1,701 @@
 @model IEnumerable<NutriMatch.Models.Recipe>
-
 @{
-    Layout = null;
+    Layout = "_Layout";
 }
-
 <!DOCTYPE html>
-
-<html>
+<html lang="en">
 <head>
-    <meta name="viewport" content="width=device-width" />
-    <title>Index</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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(300px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        .recipe-card {
+            background: white;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .recipe-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .recipe-image {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            background: linear-gradient(45deg, var(--nutri-green), var(--nutri-green-dark));
+        }
+        .recipe-content {
+            padding: 1.5rem;
+        }
+        .recipe-title {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: #1f2937;
+            margin-bottom: 0.5rem;
+        }
+        .recipe-description {
+            color: var(--nutri-gray);
+            margin-bottom: 1rem;
+            font-size: 0.95rem;
+        }
+        .recipe-macros {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        .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;
+        }
+        .macro-label {
+            font-size: 0.8rem;
+            color: var(--nutri-gray);
+            text-transform: uppercase;
+            font-weight: 600;
+        }
+        .recipe-rating {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        .stars {
+            color: #fbbf24;
+        }
+        .rating-text {
+            color: var(--nutri-gray);
+            font-size: 0.9rem;
+        }
+        .view-recipe-btn {
+            width: 100%;
+            background: var(--nutri-green);
+            border: none;
+            color: white;
+            padding: 0.8rem;
+            border-radius: 12px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        .view-recipe-btn:hover {
+            background: var(--nutri-green-dark);
+            color: white;
+        }
+        .chef-badge {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(255,255,255,0.95);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: var(--nutri-green-dark);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .filter-values {
+            font-size: 0.9rem;
+            color: var(--nutri-green-dark);
+            font-weight: 600;
+        }
+        .results-count {
+            color: var(--nutri-gray);
+            font-size: 1.1rem;
+            margin-bottom: 1rem;
+        }
+    </style>
 </head>
 <body>
-<p>
-    <a asp-action="Create">Create New</a>
-</p>
-<table class="table">
-    <thead>
-        <tr>
-            <th>
-                @Html.DisplayNameFor(model => model.Title)
-            </th>
-            <th>
-                @Html.DisplayNameFor(model => model.Instructions)
-            </th>
-            <th>
-                @Html.DisplayNameFor(model => model.Rating)
-            </th>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-@foreach (var item in Model) {
-        <tr>
-            <td>
-                @Html.DisplayFor(modelItem => item.Title)
-            </td>
-            <td>
-                @Html.DisplayFor(modelItem => item.Instructions)
-            </td>
-            <td>
-                @Html.DisplayFor(modelItem => item.Rating)
-            </td>
-            <td>
-                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
-                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
-                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
-            </td>
-        </tr>
-}
-    </tbody>
-</table>
+    <div class="container mt-4">
+        <div class="search-container">
+            <div class="row align-items-center">
+                <div class="col-md-10">
+                    <input type="text" class="form-control search-input" placeholder="Search recipes    " id="searchInput">
+                </div>
+                <div class="col-md-2">
+                    <button class="btn search-btn w-100" onclick="searchRecipes()">
+                        <i class="fas fa-search me-2"></i>Search
+                    </button>
+                </div>
+            </div>
+        </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
+            </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 - 1000</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')">
+                        </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 - 100</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')">
+                        </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: #06b6d4;"></i>Fats (g)</span>
+                            <span class="filter-values" id="fatsValue">0 - 100</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')">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="results-count">
+            <i class="fas fa-utensils me-2"></i>Showing <strong>24 recipes</strong> matching your criteria
+        </div>
+        <div class="recipe-grid" id="recipeGrid">
+            <div class="recipe-card">
+                <div class="chef-badge">Chef Milan</div>
+                <div class="recipe-image" style="background: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22><rect fill=%22%2322c55e%22 width=%22300%22 height=%22200%22/><circle fill=%22%23ffffff%22 cx=%22150%22 cy=%22100%22 r=%2230%22 opacity=%220.3%22/></svg>') center/cover;"></div>
+                <div class="recipe-content">
+                    <h5 class="recipe-title">Mediterranean Buddha Bowl</h5>
+                    <p class="recipe-description">A colorful mix of quinoa, roasted vegetables, and tahini dressing</p>
+                    <div class="recipe-macros">
+                        <div class="macro-item">
+                            <div class="macro-value">420</div>
+                            <div class="macro-label">Cal</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">18g</div>
+                            <div class="macro-label">Protein</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">52g</div>
+                            <div class="macro-label">Carbs</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">14g</div>
+                            <div class="macro-label">Fats</div>
+                        </div>
+                    </div>
+                    <div class="recipe-rating">
+                        <div class="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="fas fa-star"></i>
+                        </div>
+                        <span class="rating-text">(4.9) • 127 reviews</span>
+                    </div>
+                    <button class="btn view-recipe-btn">View Recipe</button>
+                </div>
+            </div>
+            <div class="recipe-card">
+                <div class="chef-badge">Chef Sarah</div>
+                <div class="recipe-image" style="background: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22><rect fill=%22%23f59e0b%22 width=%22300%22 height=%22200%22/><circle fill=%22%23ffffff%22 cx=%22150%22 cy=%22100%22 r=%2225%22 opacity=%220.4%22/></svg>') center/cover;"></div>
+                <div class="recipe-content">
+                    <h5 class="recipe-title">Grilled Chicken & Avocado Salad</h5>
+                    <p class="recipe-description">High-protein salad with mixed greens and lime vinaigrette</p>
+                    <div class="recipe-macros">
+                        <div class="macro-item">
+                            <div class="macro-value">380</div>
+                            <div class="macro-label">Cal</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">35g</div>
+                            <div class="macro-label">Protein</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">12g</div>
+                            <div class="macro-label">Carbs</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">22g</div>
+                            <div class="macro-label">Fats</div>
+                        </div>
+                    </div>
+                    <div class="recipe-rating">
+                        <div class="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>
+                        </div>
+                        <span class="rating-text">(4.7) • 89 reviews</span>
+                    </div>
+                    <button class="btn view-recipe-btn">View Recipe</button>
+                </div>
+            </div>
+            <div class="recipe-card">
+                <div class="chef-badge">Chef Marco</div>
+                <div class="recipe-image" style="background: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22><rect fill=%22%238b5cf6%22 width=%22300%22 height=%22200%22/><circle fill=%22%23ffffff%22 cx=%22150%22 cy=%22100%22 r=%2235%22 opacity=%220.3%22/></svg>') center/cover;"></div>
+                <div class="recipe-content">
+                    <h5 class="recipe-title">Salmon Teriyaki Bowl</h5>
+                    <p class="recipe-description">Glazed salmon with brown rice and steamed vegetables</p>
+                    <div class="recipe-macros">
+                        <div class="macro-item">
+                            <div class="macro-value">520</div>
+                            <div class="macro-label">Cal</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">28g</div>
+                            <div class="macro-label">Protein</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">45g</div>
+                            <div class="macro-label">Carbs</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">24g</div>
+                            <div class="macro-label">Fats</div>
+                        </div>
+                    </div>
+                    <div class="recipe-rating">
+                        <div class="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="fas fa-star"></i>
+                        </div>
+                        <span class="rating-text">(4.8) • 156 reviews</span>
+                    </div>
+                    <button class="btn view-recipe-btn">View Recipe</button>
+                </div>
+            </div>
+            <div class="recipe-card">
+                <div class="chef-badge">Chef Lisa</div>
+                <div class="recipe-image" style="background: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22><rect fill=%22%2306b6d4%22 width=%22300%22 height=%22200%22/><circle fill=%22%23ffffff%22 cx=%22150%22 cy=%22100%22 r=%2228%22 opacity=%220.4%22/></svg>') center/cover;"></div>
+                <div class="recipe-content">
+                    <h5 class="recipe-title">Veggie Protein Smoothie Bowl</h5>
+                    <p class="recipe-description">Spinach, banana and protein powder topped with berries</p>
+                    <div class="recipe-macros">
+                        <div class="macro-item">
+                            <div class="macro-value">290</div>
+                            <div class="macro-label">Cal</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">25g</div>
+                            <div class="macro-label">Protein</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">38g</div>
+                            <div class="macro-label">Carbs</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">8g</div>
+                            <div class="macro-label">Fats</div>
+                        </div>
+                    </div>
+                    <div class="recipe-rating">
+                        <div class="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>
+                        </div>
+                        <span class="rating-text">(4.6) • 73 reviews</span>
+                    </div>
+                    <button class="btn view-recipe-btn">View Recipe</button>
+                </div>
+            </div>
+            <div class="recipe-card">
+                <div class="chef-badge">Chef Tony</div>
+                <div class="recipe-image" style="background: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22><rect fill=%22%23ef4444%22 width=%22300%22 height=%22200%22/><circle fill=%22%23ffffff%22 cx=%22150%22 cy=%22100%22 r=%2232%22 opacity=%220.3%22/></svg>') center/cover;"></div>
+                <div class="recipe-content">
+                    <h5 class="recipe-title">Turkey & Sweet Potato Hash</h5>
+                    <p class="recipe-description">Lean ground turkey with roasted sweet potatoes and herbs</p>
+                    <div class="recipe-macros">
+                        <div class="macro-item">
+                            <div class="macro-value">450</div>
+                            <div class="macro-label">Cal</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">32g</div>
+                            <div class="macro-label">Protein</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">35g</div>
+                            <div class="macro-label">Carbs</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">18g</div>
+                            <div class="macro-label">Fats</div>
+                        </div>
+                    </div>
+                    <div class="recipe-rating">
+                        <div class="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="fas fa-star"></i>
+                        </div>
+                        <span class="rating-text">(4.9) • 201 reviews</span>
+                    </div>
+                    <button class="btn view-recipe-btn">View Recipe</button>
+                </div>
+            </div>
+            <div class="recipe-card">
+                <div class="chef-badge">Chef Elena</div>
+                <div class="recipe-image" style="background: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22><rect fill=%22%2322c55e%22 width=%22300%22 height=%22200%22/><circle fill=%22%23ffffff%22 cx=%22150%22 cy=%22100%22 r=%2240%22 opacity=%220.2%22/></svg>') center/cover;"></div>
+                <div class="recipe-content">
+                    <h5 class="recipe-title">Quinoa Stuffed Bell Peppers</h5>
+                    <p class="recipe-description">Colorful bell peppers stuffed with quinoa and black beans</p>
+                    <div class="recipe-macros">
+                        <div class="macro-item">
+                            <div class="macro-value">320</div>
+                            <div class="macro-label">Cal</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">14g</div>
+                            <div class="macro-label">Protein</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">58g</div>
+                            <div class="macro-label">Carbs</div>
+                        </div>
+                        <div class="macro-item">
+                            <div class="macro-value">6g</div>
+                            <div class="macro-label">Fats</div>
+                        </div>
+                    </div>
+                    <div class="recipe-rating">
+                        <div class="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>
+                        </div>
+                        <span class="rating-text">(4.5) • 94 reviews</span>
+                    </div>
+                    <button class="btn view-recipe-btn">View Recipe</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
-</html>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script>
+        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 description = card.querySelector('.recipe-description').textContent.toLowerCase();
+                const macroValues = card.querySelectorAll('.macro-value');
+                const recipeCalories = parseInt(macroValues[0].textContent);
+                const recipeProtein = parseInt(macroValues[1].textContent);
+                const recipeCarbs = parseInt(macroValues[2].textContent);
+                const recipeFats = parseInt(macroValues[3].textContent);
+                const matchesSearch = searchTerm === '' || 
+                    title.includes(searchTerm) || 
+                    description.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();
+                }
+            });
+        });
+        document.addEventListener('DOMContentLoaded', function() {
+            const viewRecipeButtons = document.querySelectorAll('.view-recipe-btn');
+            viewRecipeButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const recipeCard = this.closest('.recipe-card');
+                    const recipeTitle = recipeCard.querySelector('.recipe-title').textContent;
+                    alert(`Opening recipe: ${recipeTitle}`);
+                });
+            });
+        });
+        function searchRecipes() {
+            const searchTerm = document.getElementById('searchInput').value.trim();
+            if (searchTerm) {
+                console.log('Searching for:', searchTerm);
+                filterRecipes();
+                if (history.pushState) {
+                    const newUrl = new URL(window.location);
+                    newUrl.searchParams.set('search', searchTerm);
+                    history.pushState({}, '', newUrl);
+                }
+            } else {
+                filterRecipes();
+            }
+        }
+        function animateCards() {
+            const visibleCards = document.querySelectorAll('.recipe-card[style*="block"], .recipe-card:not([style*="none"])');
+            visibleCards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                setTimeout(() => {
+                    card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 50);
+            });
+        }
+        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();
+        }
+        document.addEventListener('DOMContentLoaded', function() {
+            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);
+        });
+        </script>
Index: NutriMatch/Views/Shared/_Layout.cshtml
===================================================================
--- NutriMatch/Views/Shared/_Layout.cshtml	(revision cb1d033d349ea5fc9a7753731c5747e40f380bc6)
+++ NutriMatch/Views/Shared/_Layout.cshtml	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
@@ -9,21 +9,33 @@
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/NutriMatch.styles.css" asp-append-version="true" />
-</head>
+    <link rel="stylesheet" href="~/css/_Layout.css"  />
 <body>
     <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
-            <div class="container-fluid">
-                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">NutriMatch</a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                        aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                 
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <div class="container">
+            <a class="navbar-brand" href="#">
+                <img src="~/images/NutriMatch.png" alt="NutriMatch Logo" class="logo" style="width: 150px;" />
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/Home">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/Recipes" >Recipes</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Restaurants</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">My Account</a>
+                    </li>
+                </ul>
             </div>
-            <div class="container-fluid">
-               <a asp-controller="Recipes" asp-action="Index">Create a Recipe</a>
-            </div>
-        </nav>
+        </div>
+    </nav>
     </header>
     <div class="container">
@@ -33,7 +45,48 @@
     </div>
 
-    <footer class="border-top footer text-muted">
+    <footer class="bg-dark text-light py-5">
         <div class="container">
-            &copy; 2025 - NutriMatch - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+            <div class="row">
+                <div class="col-md-4">
+                    <img src="~/images/NutriMatch.png" alt="NutriMatch Logo" class="logo" style="width: 150px;" />
+                    <p>Discover and share amazing recipes from home cooks and restaurants around the world.</p>
+                </div>
+                <div class="col-md-2">
+                    <h6>Quick Links</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="#" class="text-light text-decoration-none">Home</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">Recipes</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">Restaurants</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <h6>Account</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="#" class="text-light text-decoration-none">Sign Up</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">Log In</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">My Profile</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <h6>Support</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="#" class="text-light text-decoration-none">Help Center</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">Contact Us</a></li>
+                        <li><a href="#" class="text-light text-decoration-none">Privacy</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <h6>Follow Us</h6>
+                    <div class="d-flex gap-2">
+                        <a href="#" class="text-light"><i class="fab fa-facebook"></i></a>
+                        <a href="#" class="text-light"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-light"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+            </div>
+            <hr class="my-4">
+            <div class="text-center">
+                <p>&copy; 2025 NutriMatch. All rights reserved.</p>
+            </div>
         </div>
     </footer>
Index: triMatch/Views/Shared/_Layout.cshtml.css
===================================================================
--- NutriMatch/Views/Shared/_Layout.cshtml.css	(revision cb1d033d349ea5fc9a7753731c5747e40f380bc6)
+++ 	(revision )
@@ -1,47 +1,0 @@
-﻿
-
-a.navbar-brand {
-  white-space: normal;
-  text-align: center;
-  word-break: break-all;
-}
-
-a {
-  color: #0077cc;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.border-top {
-  border-top: 1px solid #e5e5e5;
-}
-.border-bottom {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.box-shadow {
-  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}
-
-button.accept-policy {
-  font-size: 1rem;
-  line-height: inherit;
-}
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  white-space: nowrap;
-  line-height: 60px;
-}
Index: NutriMatch/wwwroot/css/_Layout.css
===================================================================
--- NutriMatch/wwwroot/css/_Layout.css	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
+++ NutriMatch/wwwroot/css/_Layout.css	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
@@ -0,0 +1,89 @@
+﻿:root {
+            
+            --dark-green: #27AE60;
+            --light-green: #58D68D;
+            --accent-pink: #2c3534;
+            --light-pink: #bbcabe;
+            --dark-gray: #2C3E50;
+            --light-gray: #ECF0F1;
+        }
+
+
+.navbar {
+            background: white !important;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            padding:  0px;
+            height: 80px;
+        }
+
+        .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;
+        }
+
+        .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 h5, footer h6 {
+            margin-bottom: 1rem;
+        }
+
+        footer ul {
+            list-style: none;
+            padding: 0;
+        }
+
+        footer ul li {
+            margin-bottom: 0.5rem;
+        }
+
+        footer a {
+            color: #bbb;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        footer a:hover {
+            color: var(--primary-green);
+        }
+
+        @media (max-width: 768px) {
+            .signup-title {
+                font-size: 2.5rem;
+            }
+            
+            .share-title {
+                font-size: 2rem;
+            }
+
+            .restaurant-card {
+                min-width: 150px;
+                padding: 1rem;
+            }
+
+            .restaurant-logo {
+                width: 60px;
+                height: 60px;
+            }
+        }
Index: NutriMatch/wwwroot/css/landing-page.css
===================================================================
--- NutriMatch/wwwroot/css/landing-page.css	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
+++ NutriMatch/wwwroot/css/landing-page.css	(revision 1bb908bf54f2e3398c19e1688d4a2bca1fec96b6)
@@ -0,0 +1,427 @@
+  :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;
+        }
