diff --git a/css/style.css b/css/style.css
index 89b6cb5..2d39d8b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -147,7 +147,7 @@ main::after{
         font-size: 30px !important;
     }
     .mx{
-       max-width: 300px !important; 
+       max-width: 400px !important; 
     }
 }
 
diff --git a/index.html b/index.html
index 3314dec..cece988 100644
--- a/index.html
+++ b/index.html
@@ -80,7 +80,7 @@ <h1 style="font-size: 80px; font-weight: 800;">Shop With Us</h1>
             </div>
         </div>  
     </main>
-    
+  
 
     <section id="products">
         <div class="container">
@@ -90,8 +90,22 @@ <h2>Our Products</h2>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nostrum natus excepturi fuga ullam accusantium vel
                 ut eveniet aut consequatur laboriosam ipsam.</p>
             </div>
-            <div class="row mt-5 gy-5">
-                <div class="col-md-6 col-lg-3 box" >
+            <div class="row gy-4 mt-5 justify-content-center">
+                <div class="col-md-3">
+                    <label class="fw-bold d-block text-center" for="">Search with product</label>
+                    <input type="text" style="border: 2px solid rgb(44, 44, 44);" class=" w-100 mt-2 px-2 py-1" name="" id="Pname" placeholder="Enter a product name">
+                </div>
+                <div class="col-md-3">
+                    <label  class="fw-bold d-block text-center" for="">Search with Catagory</label>
+                    <input type="text" style="border: 2px solid rgb(44, 44, 44);" class=" w-100  mt-2 px-2 py-1" name="" id="Pcatagory" placeholder="Enter a product catagory">
+                </div>
+                <div class="col-md-3">
+                    <label class="fw-bold d-block text-center" for="">Search with budget</label>
+                    <input type="number" style="border: 2px solid rgb(44, 44, 44);"  class=" w-100  mt-2 px-2 py-1" name="" id="budget" placeholder="Enter your budget">
+                </div>
+            </div>
+            <div class="row mt-3 gy-5 justify-content-center" id="productsContainer">
+                <!-- <div class="col-md-6 col-lg-3 box" >
                     <div class="text-center rounded">
                         <div class="image overflow-hidden position-relative">
                             <img src="images/watch1.png" loading="lazy" class="img-fluid  bg-secondary bg-opacity-10 rounded-top" alt="Golden Watch">
@@ -258,7 +272,7 @@ <h5 class="">Blue T-Shirt</h5>
                             </div>
                         </div>
                     </div>
-                </div>
+                </div> -->
                 
             </div>
         </div>
@@ -297,7 +311,7 @@ <h2>Featured Products</h2>
             <div class="bg-white p-5 ">
                 <div class="row justify-content-between align-items-center gy-5">
                     <div class="col-lg-6">
-                        <img src="images/model1.jpg" loading="lazy" class="h-100 img-fluid bg-secondary bg-opacity-10 rounded" alt="watch">
+                        <img src="images/model1.jpg" loading="lazy" class=" h-100 img-fluid w-100 bg-secondary bg-opacity-10 rounded" alt="watch">
                     </div>
                     <div class="col-lg-5">
                         <h2 class="fw-bold pb-4">About This Product</h2>
@@ -328,7 +342,7 @@ <h3 class="fw-bold">Price:</h3>
                             style="color: var(--primary); border-color: var(--primary);">LEARN MORE</button>
                     </div>
                     <div class="col-lg-6 orderfirst order-lg-last">
-                        <img src="images/model4.jpg" loading="lazy" class=" img-fluid bg-secondary bg-opacity-10 rounded" alt="watch">
+                        <img src="images/model4.jpg" loading="lazy" class=" img-fluid w-100  bg-secondary bg-opacity-10 rounded" alt="watch">
                     </div>
             
                 </div>
@@ -347,10 +361,10 @@ <h2 style="font-weight: 800; font-size: 40px;">Trusted Merchant</h2>
                     <img src="images/meeting.jpg" loading="lazy" class="img-fluid" alt="people">
                 </div>
                 <div class="col-lg-3">
-                    <div class="heading">
+                    <div class="heading text-center text-lg-start">
                         <h6>MERCHANT COMPANY</h6>
                         <h2>About Us</h2>
-                        <p class="pb-4 m-0 mx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui fuga ipsa, repellat blanditiis nihil, consectetur.
+                        <p class="pb-4 m-auto mx m-lg-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui fuga ipsa, repellat blanditiis nihil, consectetur.
                         Consequuntur eum inventore, rem maxime, nisi excepturi ipsam libero ratione adipisci alias eius vero vel!</p>
                         <button class="btn btn3 fw-bold rounded-0 border-2 px-4 mt-2"
                             style="color: var(--primary); border-color: var(--primary);">LEARN MORE</button>
@@ -600,7 +614,7 @@ <h4 class="">Attractive Blog Title</h4>
                 </div>
                 <div class="col-md-5 col-lg-4 flex-grow-1  my-5">
                     <div>
-                        <img src="images/model2.jpg" loading="lazy" class="img-fluid" alt="">
+                        <img src="images/model2.jpg" loading="lazy" class="img-fluid w-100" alt="">
                         <div class="border p-3 px-4 bg-white">
                             <h4 class="">Attractive Blog Title</h4>
                             <span style="font-size: 14px;" class="opacity-50">Ham Brook</span>
@@ -624,7 +638,7 @@ <h2>Get In Touch</h2>
             </div>
             <div class="row my-5">
                 <div class="col-lg-4 px-0">
-                    <img src="images/model1.jpg" loading="lazy" class="img-fluid h-100" alt="">
+                    <img src="images/model1.jpg" loading="lazy" class="img-fluid w-100 h-100" alt="">
                 </div>
                      <div class="col-lg-8 p-5 bg-secondary bg-opacity-10 ">
                         <div class="row gy-3 align-items-center">
@@ -736,6 +750,6 @@ <h4 class="fw-bold">Have a Question?</h4>
 
     <script src="js/bootstrap.bundle.min.js"></script>
     <script src="js/countDown.js"></script>
-    <script src="js/script.js"></script>
+    <script src="js/search.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/search.js b/js/search.js
new file mode 100644
index 0000000..dda8c51
--- /dev/null
+++ b/js/search.js
@@ -0,0 +1,121 @@
+const Pname = document.getElementById("Pname")
+const catagory = document.getElementById("Pcatagory")
+const budget = document.getElementById("budget")
+const productsContainer = document.getElementById("productsContainer")
+let prodcuts = [
+    {
+        id: 0,
+        name: "Golden Watch",
+        image: "images/watch1.png",
+        price: "$200.00", 
+        catagory: "Accessories"
+
+    },
+    {
+        id: 1,
+        name: "Silver Watch",
+        image: "images/watch2.png",
+        price: "$100.00", 
+        catagory: "Accessories"
+
+    },
+    {
+        id: 2,
+        name: "Brown Shoes",
+        image: "images/shoes.png",
+        price: "$80.00", 
+        catagory: "Fashion"
+
+    },
+    {
+        id: 3,
+        name: "Grey Hoodie",
+        image: "images/hoodie1.png",
+        price: "$100.00", 
+        catagory: "Fashion"
+
+    },
+    {
+        id: 4,
+        name: "Black Sunglasses",
+        image: "images/sunglasses2.png",
+        price: "$700.00", 
+        catagory: "Accessories"
+
+    },
+    {
+        id: 5,
+        name: "White Cap",
+        image: "images/cap1.png",
+        price: "$30.00", 
+        catagory: "Sport"
+
+    },
+    {
+        id: 6,
+        name: "Football Shoes",
+        image: "images/football1.png",
+        price: "$100.00", 
+        catagory: "Sport"
+
+    },
+    {
+        id: 7,
+        name: "Blue T-Shirt",
+        image: "images/shirt1.png",
+        price: "$60.00", 
+        catagory: "Fashion"
+
+    },
+
+]
+let productsToDraw = [...prodcuts]
+
+Pname.addEventListener("keyup", filterInput)
+catagory.addEventListener("keyup", filterInput)
+budget.addEventListener("keyup", filterInput)
+
+function filterInput() {
+    console.log(Pname.value)
+    productsToDraw = prodcuts.filter((product) => product.name.toLowerCase().includes(Pname.value.toLowerCase().trim()))
+    productsToDraw = productsToDraw.filter((product) => product.catagory.toLowerCase().includes(catagory.value.toLowerCase().trim()))
+    if (budget.value) {
+        productsToDraw = productsToDraw.filter((product) => {
+            let price = +product.price.replace("$", "")
+            console.log(price)
+            return price <= budget.value
+        })
+    }
+    renderProducts()
+}
+
+function renderProducts() {
+    
+    productsContainer.textContent = ""
+    for (let i = 0; i < productsToDraw.length; i++){
+        productsContainer.innerHTML += `
+        <div class="col-md-6 col-lg-3 box"  >
+        <div class="text-center rounded" >
+            <div class="image overflow-hidden position-relative">
+                <img src="${productsToDraw[i].image}" loading="lazy" class="img-fluid  bg-secondary bg-opacity-10 rounded-top" alt="Golden Watch">
+            </div>
+            <div class="px-4 py-4 border">
+                <h5 class="">${productsToDraw[i].name}</h5>
+                <p class="opacity-75 mb-1 fw-bold">${productsToDraw[i].price}</p>
+                <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
+                <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
+                <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
+                <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
+                <i class="fas fa-star" style="color: rgb(255, 192, 34);"></i>
+                <p class="opacity-75">Catagory: ${productsToDraw[i].catagory}</p>
+                <div class="d-flex justify-content-between align-items-center">
+                    <button class="btn rounded-0 fw-bold btn3 bg-white" style="transition: .3s; color: var(--primary); border: 2px solid var(--primary); ">Add to cart</button>
+                    <i class="fas fa-heart fa-2x text-secondary" style="cursor: pointer;"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+        `
+    }
+}
+window.onload = renderProducts
\ No newline at end of file
diff --git a/register.html b/register.html
index 34b48ed..cec8522 100644
--- a/register.html
+++ b/register.html
@@ -51,6 +51,6 @@ <h6 class="pt-3 text-center fw-bold">Already have an account? <a href="login.htm
         </form>
     </div>
     <script src="js/register.js"></script>
-
+<i class="bi bi-airplane-engines"></i>
 </body>
 </html>
\ No newline at end of file