diff --git a/src/Routers.jsx b/src/Routers.jsx
index 65bf038..9828d1b 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -40,6 +40,7 @@ import ManageActiveJobs from "./views/ManageActiveJobs";
 import FamilyManagePage from "./views/FamilyManagePage";
 import MyCouponPage from "./views/MyCouponPage";
 import AuthRedirect from "./views/AuthRedirect";
+import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
 
 export default function Routers() {
   return (
@@ -86,6 +87,7 @@ export default function Routers() {
           <Route exact path="/myjobs" element={<MyJobsPage />} />
           <Route exact path="/add-job" element={<AddJobPage />} />
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
+          <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
diff --git a/src/assets/images/banner-coupons.jpg b/src/assets/images/banner-coupons.jpg
new file mode 100644
index 0000000..8ead515
Binary files /dev/null and b/src/assets/images/banner-coupons.jpg differ
diff --git a/src/assets/images/banner-job-due.jpg b/src/assets/images/banner-job-due.jpg
new file mode 100644
index 0000000..1bedc79
Binary files /dev/null and b/src/assets/images/banner-job-due.jpg differ
diff --git a/src/assets/images/banner-task-due.jpg b/src/assets/images/banner-task-due.jpg
new file mode 100644
index 0000000..1bedc79
Binary files /dev/null and b/src/assets/images/banner-task-due.jpg differ
diff --git a/src/components/Cards/HomeBannerOffersCard.jsx b/src/components/Cards/HomeBannerOffersCard.jsx
index ed25bd6..02e58ef 100644
--- a/src/components/Cards/HomeBannerOffersCard.jsx
+++ b/src/components/Cards/HomeBannerOffersCard.jsx
@@ -32,7 +32,7 @@ export default function HomeBannerOffersCard(props) {
                        {props.itemData.description}
                     </div>
                     <div className="siderCardButton">
-                        [BUTTON HERE]
+                     [   {props.itemData.button_text}  ]
                     </div>
                 </div>
 
diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index b46ad91..7cb2cca 100644
--- a/src/components/MyActiveJobs/ActiveJobs.jsx
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -4,14 +4,17 @@ import Layout from "../Partials/Layout";
 import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import CountDown from "../Helpers/CountDown";
 
 import usersService from "../../services/UsersService";
 
 function ActiveJobs(props) {
   const ApiCall = new usersService()
+  let navigate = useNavigate()
 
   let { userDetails } = useSelector((state) => state.userDetails);
-  let navigate = useNavigate()
+
+  let [passDue, setPassDue] = useState(new Date() > new Date(props.details?.delivery_date)) // STATE TO KNOW IF TASK IS PASSED DUE TIME
 
   let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent
 
@@ -145,10 +148,33 @@ function ActiveJobs(props) {
    }
  }
 
+
+  // FUNCTION TO CHECK IF TASK PASS DUE IS REACHED
+  let isPassedDue = () => {
+    // console.log('TESTING',new Date() > new Date(props.details?.delivery_date) )
+    if(new Date() > new Date(props.details?.delivery_date)){
+      setPassDue(true)
+    }else{
+      setPassDue(false)
+    }
+  }
+
+
+  useEffect(()=>{
+    if(!passDue){
+      let passDueInterval = setInterval(()=>{
+        isPassedDue()
+      },1000)
+      return ()=>{
+        clearInterval(passDueInterval)
+      }
+    }
+  },[passDue])
+
   return (
     <Layout>
 
-        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start space-y-4 md:space-x-4 md:space-y-0">
+        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
             {/* job title */}
             <div className="w-full md:w-8/12">
               <div className="w-full flex justify-start space-x-3 items-start">
@@ -172,20 +198,14 @@ function ActiveJobs(props) {
                 </h1>
               </div>
 
-              <div className="w-full my-4">
-                <div className="pb-2 w-full flex items-center">
-                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
-                    {props.details?.contract && props.details.contract}
-                  </p>
-                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
+              <div className="w-full my-2">
+                  <p className="w-full text-base text-right text-sky-blue">
                     {userDetails.firstname && userDetails.firstname}
                   </p>
+                <div className="text-base text-slate-700 dark:text-black tracking-wide">
+                    <p className="font-semibold text-black">Description: </p>
+                    <p className="p-2 border border-sky-blue">{props.details?.description && props.details.description}</p>
                 </div>
-                
-                <p className="text-base text-slate-700 dark:text-black">
-                  <span className="font-semibold">Description: </span>
-                  {props.details?.description && props.details.description}
-                </p>
               </div>
             </div>
             {/* end of job title */}
@@ -193,7 +213,9 @@ function ActiveJobs(props) {
             {/* job details */}
             <div className="w-full md:w-4/12">
               <p className="text-base text-sky-blue">Delivery Detail</p>
-              <div className="mt-2">
+              {passDue ? 
+              (
+                <div className="my-1">
                   <p className="text-base text-slate-700 dark:text-black">
                     <span className="font-semibold">Due: </span>
                     {props.details?.delivery_date &&
@@ -203,9 +225,33 @@ function ActiveJobs(props) {
                     {props.details?.delivery_date &&
                       props.details.delivery_date.split(" ")[1]}
                   </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    {props.details?.timeline_days && props.details.timeline_days} day(s)
-                  </p>
+                </div>
+              )
+              :
+              (
+                <div className="my-1 flex items-start gap-3">
+                  <p className="font-semibold">Due: </p>
+                  <div className="flex flex-col justify-between">
+                    <p className="text-base text-slate-700 dark:text-black tracking-wide">
+                      <CountDown lastDate={props.details.delivery_date} />
+                    </p>
+                    <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
+                      <span>Hrs</span>
+                      <span>Min</span>
+                      <span>Sec</span>
+                    </div>
+                  </div>
+                </div>
+              )
+              }
+
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">Duration: </span>
+                <span className="">{props.details?.timeline_days && props.details.timeline_days} day(s)</span>
+              </div>
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">No: </span>
+                <span className="">{props.details?.contract && props.details.contract}</span>
               </div>
             </div>
             {/* end of job details */}
@@ -293,24 +339,6 @@ function ActiveJobs(props) {
 
                 {/* Buttons Sections */}
                 <div className="py-2 sm:flex sm:justify-end sm:items-center">
-                  {/* <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
-                    {tab == 'files' && 
-                      (
-                        <button
-                          onClick={()=>{console.log('working')}}
-                          type="button"
-                          className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                          </svg>
-
-                          <span className="text-white">Upload Files</span>
-                        </button>
-                      )
-                    }
-                  </div> */}
-
                   <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
                     <button
                         type="button"
diff --git a/src/components/MyActiveJobs/MyPastDueJobs.jsx b/src/components/MyActiveJobs/MyPastDueJobs.jsx
new file mode 100644
index 0000000..0390f10
--- /dev/null
+++ b/src/components/MyActiveJobs/MyPastDueJobs.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MyActiveJobTable from "./MyActiveJobTable";
+
+export default function MyPastDueJobs(props) {
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    console.log("AMEYE LOC1", props.MyJobList);
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <div className="notification-page w-full mb-10">
+                <div className="notification-wrapper w-full">
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                 Pass Due Job(s)
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+                            <div
+                                onClick={() => filterHandler("today")}
+                                className="relative"
+                            ></div>
+                        </div>
+                    </div>
+                    <MyActiveJobTable MyJobList={props.MyJobList} />
+                </div>
+            </div>
+        </Layout>
+    );
+}
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index 86eb0de..37cf02d 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -219,6 +219,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
+      job_mode: "ACTIVE",
       limit: 30,
       offset: 0,
       action: 13008,
@@ -244,6 +245,7 @@ class usersService {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
+      job_mode: "ACTIVE",
       page: 0,
       offset: 0,
       limit: 100,
@@ -251,6 +253,18 @@ class usersService {
     return this.postAuxEnd("/jobmanageractive", postData);
   }
 
+  getMyPastDueJobList() {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      job_mode: "PASTDUE",
+      page: 0,
+      offset: 0,
+      limit: 100,
+    };
+    return this.postAuxEnd("/jobmanageractive", postData);
+  }
   getMyPendingJobList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
diff --git a/src/views/MyPastDueJobsPage.jsx b/src/views/MyPastDueJobsPage.jsx
new file mode 100644
index 0000000..b50c9ce
--- /dev/null
+++ b/src/views/MyPastDueJobsPage.jsx
@@ -0,0 +1,36 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+//import MyJobs from "../components/MyJobs";
+//import MyActiveJobs from "../components/MyActiveJobs";
+import MyPastDueJobs from "../components/MyActiveJobs/MyPastDueJobs";
+
+export default function MyPastDueJobsPage() {
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    }
+    const [MyJobList, setMyJobList] = useState([]);
+    const api = new usersService();
+//TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
+    const getMyJobList = async () => {
+        try {
+            const res = await api.getMyPastDueJobList();
+            setMyJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyJobList();
+    }, []);
+
+    // debugger;
+    return (
+        <>
+            <MyPastDueJobs
+                MyJobList={MyJobList}
+                commonHeadData={commonHeadData}
+            />
+        </>
+    );
+}