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/views/MyPastDueJobsPage.jsx b/src/views/MyPastDueJobsPage.jsx
new file mode 100644
index 0000000..d603a17
--- /dev/null
+++ b/src/views/MyPastDueJobsPage.jsx
@@ -0,0 +1,35 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+//import MyJobs from "../components/MyJobs";
+import MyActiveJobs from "../components/MyActiveJobs";
+
+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.getMyActiveJobList();
+            setMyJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyJobList();
+    }, []);
+
+    // debugger;
+    return (
+        <>
+            <MyActiveJobs
+                MyJobList={MyJobList}
+                commonHeadData={commonHeadData}
+            />
+        </>
+    );
+}