diff --git a/src/App.jsx b/src/App.jsx
index 48c1135..f3171bf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,6 +8,8 @@ import { teamMembers } from "./data/teamData";
 import WyChooseUs from "./components/whyChooseUs/WhyChooseUs";
 import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent";
 import { showCaseData } from "./data/showCaseData";
+import FilterResults from "./components/FilterResults/FilterResults";
+import {filterData} from "./data/filterData"
 import "./App.css";
 import JobsShowcase from "./components/JobsShowcase/JobsShowcase";
 import { showcaseData } from "./data";
@@ -96,6 +98,7 @@ function App() {
   const { t } = useTranslation();
   return (
     <div>
+      <FilterResults filterData={filterData}/>
       <RoadMaps />
       <Hero />
       <AboutHero />
diff --git a/src/components/FilterResults/FilterButton.jsx b/src/components/FilterResults/FilterButton.jsx
index 6e3597e..c3d0969 100644
--- a/src/components/FilterResults/FilterButton.jsx
+++ b/src/components/FilterResults/FilterButton.jsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 
-function FilterButton() {
+function FilterButton({ handleChange }) {
   return (
     <Menu
       as="div"
@@ -34,6 +34,7 @@ function FilterButton() {
                 <div
                   data-testid="language-button-option"
                   aria-hidden="true"
+                  onClick={(e) => handleChange("newest", e)}
                   className={`${
                     active
                       ? "bg-white text-secondary rounded"
@@ -49,6 +50,7 @@ function FilterButton() {
                 <div
                   data-testid="language-button-option"
                   aria-hidden="true"
+                  onClick={(e) => handleChange("oldest", e)}
                   className={`${
                     active
                       ? "bg-white text-secondary rounded"
diff --git a/src/components/FilterResults/FilterResults.jsx b/src/components/FilterResults/FilterResults.jsx
index 510834c..9474d1c 100644
--- a/src/components/FilterResults/FilterResults.jsx
+++ b/src/components/FilterResults/FilterResults.jsx
@@ -1,9 +1,31 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBookmark } from "@fortawesome/free-regular-svg-icons";
+import { useState } from "react";
 import FilterButton from "./FilterButton";
 
 function FilterResults({ filterData }) {
-  const jobCard = filterData.map((job) => {
+  const [data, setData] = useState(filterData);
+  const newArray = filterData.map((key) => ({
+    ...key,
+    date: new Date(key.postingDate),
+  }));
+
+  //  console.log(newArray)
+
+  const handleChange = (props) => {
+    // console.log(props)
+    if (props === "newest") {
+      const sortingDataByNewest = newArray.sort((a, b) => b.date - a.date);
+      // console.log('newest data', sortingDataByNewest)
+      setData(sortingDataByNewest);
+    } else {
+      const sortingDataByOldest = newArray.sort((a, b) => a.date - b.date);
+      // console.log('oldest data', sortingDataByOldest)
+      setData(sortingDataByOldest);
+    }
+  };
+
+  const jobCard = data.map((job) => {
     return (
       <div
         key={job.id}
@@ -52,7 +74,7 @@ function FilterResults({ filterData }) {
           </span>
           Results
         </h2>
-        <FilterButton />
+        <FilterButton handleChange={handleChange} />
       </div>
       {jobCard}
     </div>