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/views/MyPastDueJobsPage.jsx b/src/views/MyPastDueJobsPage.jsx
index d603a17..926228b 100644
--- a/src/views/MyPastDueJobsPage.jsx
+++ b/src/views/MyPastDueJobsPage.jsx
@@ -1,7 +1,8 @@
 import React, { useContext,useState, useEffect } from "react";
 import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
-import MyActiveJobs from "../components/MyActiveJobs";
+//import MyActiveJobs from "../components/MyActiveJobs";
+import MyPastDueJobs from "../components/MyActiveJobs/MyPastDueJobs";
 
 export default function MyPastDueJobsPage() {
     const commonHeadData =()=>{
@@ -26,7 +27,7 @@ export default function MyPastDueJobsPage() {
     // debugger;
     return (
         <>
-            <MyActiveJobs
+            <MyPastDueJobs
                 MyJobList={MyJobList}
                 commonHeadData={commonHeadData}
             />