diff --git a/src/components/CombiningComponents/CombiningFilterComponents.jsx b/src/components/CombiningComponents/CombiningFilterComponents.jsx
index b5be437..9c0e14f 100644
--- a/src/components/CombiningComponents/CombiningFilterComponents.jsx
+++ b/src/components/CombiningComponents/CombiningFilterComponents.jsx
@@ -8,16 +8,16 @@ function CombiningFilterComponents() {
   const [data, setData] = useState(filterData);
 
   return (
-    <div className="App px-7">
+    <div className="App bg-gray-200  px-7 bg-gray-200 ">
       <div>
         {" "}
         <JobsFinder setData={setData} />
       </div>
       <div className="flex px-6 small:flex-col-reverse ">
-        <Filter />
+        <Filter setData={setData} filterData={filterData} />
         {/* here we check if result exists if yes pass it to card else pass the
         data instead */}
-        {data && <FilterResults setData={setData} data={data} />}
+        <FilterResults setData={setData} data={data} />
       </div>
     </div>
   );
diff --git a/src/components/FilterResults/FilterResults.jsx b/src/components/FilterResults/FilterResults.jsx
index e3ae586..569a8ff 100644
--- a/src/components/FilterResults/FilterResults.jsx
+++ b/src/components/FilterResults/FilterResults.jsx
@@ -1,41 +1,29 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBookmark } from "@fortawesome/free-regular-svg-icons";
 import FilterButton from "./FilterButton";
-import { filterData } from "../../data/filterData";
 
 function FilterResults({ setData, data }) {
-  console.log(data);
-  console.log(setData);
-
-  //  console.log(newArray)
-
   const handleChange = (props) => {
     const newArray = data?.map((key) => ({
       ...key,
       date: new Date(key.postingDate),
     }));
-    // console.log(props)
     if (props === "newest") {
       const sortingDataByNewest = newArray.sort((a, b) => b.date - a.date);
-      // console.log('newest newArray', sortingDataByNewest)
       setData(sortingDataByNewest);
     } else {
       const sortingDataByOldest = newArray.sort((a, b) => a.date - b.date);
-      // console.log('oldest data', sortingDataByOldest)
       setData(sortingDataByOldest);
     }
   };
 
   return (
-    <div className="bg-gray-500/5">
+    <div className="bg-gray-100 w-full ml-5">
       <div className="flex justify-between">
         <h2 className="ml-5 mt-5 text-lg">
           {" "}
           Total{" "}
-          <span className="text-accent font-semibold">
-            {" "}
-            {filterData.length}{" "}
-          </span>
+          <span className="text-accent mr-1 font-semibold">{data?.length}</span>
           Results
         </h2>
         <FilterButton handleChange={handleChange} />
@@ -59,7 +47,7 @@ function FilterResults({ setData, data }) {
                   {job.jobModel}
                 </h2>
                 <h2 className="order-6  font-semibold md:font-semibold md:mt-3 md:order-4 ">
-                  {job.salary}
+                  ${job.minSalary} - ${job.maxSalary}
                 </h2>
                 <FontAwesomeIcon
                   className="order-3 md:mt-3 md:order-5"
diff --git a/src/components/FilterResults/__tests__/FilterResults.test.jsx b/src/components/FilterResults/__tests__/FilterResults.test.jsx
index 9851f20..58e2e38 100644
--- a/src/components/FilterResults/__tests__/FilterResults.test.jsx
+++ b/src/components/FilterResults/__tests__/FilterResults.test.jsx
@@ -2,7 +2,7 @@ import renderer from "react-test-renderer";
 import FilterResults from "../FilterResults";
 import { filterData } from "../../../data/filterData";
 
-it("renders Company Showcase Component correctly", () => {
+it("renders FilterResults Component correctly", () => {
   const tree = renderer
     .create(<FilterResults filterData={filterData} />)
     .toJSON();
diff --git a/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap b/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap
index 38dc3b9..1a359c1 100644
--- a/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap
+++ b/src/components/FilterResults/__tests__/__snapshots__/FilterResults.test.jsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders Company Showcase Component correctly 1`] = `
+exports[`renders FilterResults Component correctly 1`] = `
 <div
-  className="bg-gray-500/5"
+  className="bg-gray-100 w-full ml-5"
 >
   <div
     className="flex justify-between"
@@ -14,12 +14,8 @@ exports[`renders Company Showcase Component correctly 1`] = `
       Total
        
       <span
-        className="text-accent font-semibold"
-      >
-         
-        7
-         
-      </span>
+        className="text-accent mr-1 font-semibold"
+      />
       Results
     </h2>
     <div
diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx
index bb69d67..12d7b4f 100644
--- a/src/components/filter/Filter.jsx
+++ b/src/components/filter/Filter.jsx
@@ -1,10 +1,17 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+const Filter = ({ setData, filterData }) => {
+  // obtaining min and max values for salary range from filterData.js to be set as initial states //
+  const minSalaryArray = filterData.map((item) => item.minSalary);
+  const minSalaryValue = Math.min(...minSalaryArray);
+
+  const maximumSalaryArray = filterData.map((item) => item.maxSalary);
+  const maxSalaryValue = Math.max(...maximumSalaryArray);
 
-const Filter = () => {
   const [filter, setFilter] = useState({
     salary: {
-      min: "",
-      max: "",
+      min: `${minSalaryValue}`,
+      max: `${maxSalaryValue}`,
     },
 
     location: "",
@@ -32,14 +39,36 @@ const Filter = () => {
         },
       });
     }
-    console.log(filter);
   };
 
+  useEffect(() => {
+    setData(
+      filterData.filter((item) => {
+        if (
+          item.minSalary >= filter.salary.min &&
+          item.minSalary <= filter.salary.max
+        ) {
+          return item;
+        }
+        return null;
+      })
+    );
+  }, [filter.salary]);
+
   const locationHandler = (e) => {
     setFilter({
       ...filter,
       location: e.target.value,
     });
+
+    setData(
+      filterData.filter((item) => {
+        if (item.location === e.target.value) {
+          return item;
+        }
+        return null;
+      })
+    );
   };
 
   const employmentTypeHandler = (e) => {
@@ -86,10 +115,9 @@ const Filter = () => {
 
   return (
     <div className="flex ">
-      <div className=" w-screen bg-gray-100 h-screen p-5 flex flex-col items-center">
+      <div className="bg-gray-200 h-screen p-5 flex flex-col items-center">
         <h2 className="text-secondary font-bold text-3xl">Filter</h2>
 
-        <hr className="w-full" />
         {/* SALARY */}
         <div className="salary pl-3">
           <div className="flex space-between pt-3 pb-3 text-center">
@@ -145,6 +173,7 @@ const Filter = () => {
                     fillRule="nonzero"
                   />
                 </svg>
+                {/* <form onSubmit={handleChangeLocation}> */}
                 <select
                   className="border border-gray-300 rounded-md text-gray-600 h-10 pl-5 pr-10 bg-white hover:border-gray-400 focus:outline-none appearance-none w-56 "
                   value={filter.location}
@@ -158,6 +187,7 @@ const Filter = () => {
                   <option>Lebanon</option>
                   <option>Kuwait</option>
                 </select>
+                {/* </form> */}
               </div>
             </div>
           </div>
@@ -313,7 +343,6 @@ const Filter = () => {
           </div>
         </div>
       </div>
-      <div className="w-full" />
     </div>
   );
 };
diff --git a/src/data/filterData.js b/src/data/filterData.js
index 1e25a5d..651a2ca 100644
--- a/src/data/filterData.js
+++ b/src/data/filterData.js
@@ -3,77 +3,78 @@ export const filterData = [
     src: "/assets/filterResults/Murex.png",
     position: "DevOps Engineer",
     jobModel: "Remote",
-    salary: "$5000-$1000",
+    minSalary: "1000",
+    maxSalary: "5000",
     employer: "Murex",
     jobType: "Full Time",
     payFreq: "Monthly",
     postingDate: "07/12/2022",
+    location: "Iraq",
     id: "1",
   },
   {
     src: "/assets/filterResults/Murex.png",
     position: "DevOps Engineer",
     jobModel: "Remote",
-    salary: "$4000-$6000",
+    minSalary: "4000",
+    maxSalary: "6000",
     employer: "Murex",
     jobType: "Internship",
     payFreq: "Monthly",
     postingDate: "06/26/2022",
+    location: "Lebanon",
     id: "2",
   },
   {
     src: "/assets/filterResults/EAB.png",
     position: "Associate Data Scientist",
     jobModel: "Remote",
-    salary: "$2500-$4500",
+    minSalary: "2500",
+    maxSalary: "4500",
     employer: "EAB",
     jobType: "Part Time",
     payFreq: "Monthly",
     postingDate: "06/19/2022",
+    location: "Iraq",
     id: "3",
   },
   {
     src: "/assets/filterResults/EAB.png",
     position: "Data Analyst",
     jobModel: "Remote",
-    salary: "$6500-$8000",
+    minSalary: "6500",
+    maxSalary: "8000",
     employer: "EAB",
     jobType: "Full Time",
     payFreq: "Monthly",
     postingDate: "06/19/2022",
+    location: "Syria",
     id: "4",
   },
   {
     src: "/assets/filterResults/EAB.png",
     position: "Network Engineer",
     jobModel: "Remote",
-    salary: "$5000-$8000",
+    minSalary: "5000",
+    maxSalary: "8000",
     employer: "EAB",
     jobType: "Full Time",
     payFreq: "Monthly",
     postingDate: "06/19/2022",
+    location: "Yemen",
     id: "5",
   },
-  {
-    src: "/assets/filterResults/EAB.png",
-    position: "Junior Netwoek Engineer",
-    jobModel: "Remote",
-    salary: "$-$",
-    employer: "EAB",
-    jobType: "Full Time",
-    payFreq: "Monthly",
-    postingDate: "06/05/2021",
-    id: "6",
-  },
   {
     src: "/assets/filterResults/EAB.png",
     position: "Creative Project Manager",
     jobModel: "Remote",
-    salary: "$5000-$6000",
+    minSalary: "5000",
+    maxSalary: "6000",
     employer: "EAB",
     jobType: "Full Time",
     payFreq: "Monthly",
     postingDate: "01/01/2022",
-    id: "7",
+    location: "Lebanon",
+    id: "6",
   },
 ];