diff --git a/src/Routers.jsx b/src/Routers.jsx
index 9670cec..a5f7f93 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -36,6 +36,7 @@ import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
 import AddJobPage from "./views/AddJobPage";
 import MyPendingJobsPage from "./views/MyPendingJobsPage";
+import ManageActiveJobs from "./views/ManageActiveJobs";
 
 export default function Routers() {
   return (
@@ -83,6 +84,7 @@ export default function Routers() {
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route
             exact
             path="/my-collection/collection-item"
diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
new file mode 100644
index 0000000..fffb912
--- /dev/null
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
+import { useLocation, useNavigate } from "react-router-dom";
+
+function ActiveJobs() {
+  let { userDetails } = useSelector((state) => state.userDetails);
+  let navigate = useNavigate()
+  let {state} = useLocation()
+
+  let [details, setDetails] = useState({})
+
+  // console.log(state, userDetails);
+
+  useEffect(()=>{
+    if(!state){
+      navigate('/my-active-jobs', {replace: true})
+    }
+    setDetails(state)
+  },[])
+  return (
+    <Layout>
+      {/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}
+
+        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
+          <div className="w-full lg:w-3/4">
+            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              {/* back btn and title */}
+              <div className="w-full flex justify-start space-x-3 items-center">
+                <button
+                  type="button"
+                  className="text-[#374557] border border-sky-blue p-1 rounded-full"
+                  onClick={() => navigate('/my-active-jobs', {replace: true})}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="35"
+                    height="35"
+                    viewBox="0 0 24 24"
+                    fill="skyblue"
+                  >
+                    <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                  </svg>
+                </button>
+                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+                  {details.title && details.title}
+                </h1>
+              </div>
+              {/* END of back btn and title */}
+
+              <div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
+                <div className="my-2 lg:my-0">
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.contract && details.contract}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Description: </span>
+                    {details.description && details.description}
+                  </p>
+                  <p className="text-base text-sky-blue">Delivery Detail</p>
+                </div>
+                <div className="">
+                  <p className="text-base text-sky-blue">
+                    {userDetails.firstname && userDetails.firstname}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Due: </span>
+                    {details.delivery_date &&
+                      details.delivery_date.split(" ")[0]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.delivery_date &&
+                      details.delivery_date.split(" ")[1]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.timeline_days && details.timeline_days} day(s)
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+              <div className="">
+                <p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
+                <textarea
+                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  rows="10"
+                  style={{ resize: "none" }}
+                />
+              </div>
+
+              {/* Buttons Sections */}
+              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
+                <div className="w-full sm:w-3/4 mb-5 sm:mb-0">
+                  <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-1/4 flex justify-between items-center space-x-2">
+                  <button
+                      type="button"
+                      className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
+                  >
+                      <span className="text-white">Clear</span>
+                  </button>
+                  <button
+                      type="button"
+                      className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
+                  >
+                      <span className="text-white">Send</span>
+                  </button>
+                </div>
+              </div>
+              {/* end of Buttons Sections  */}
+            </div>
+          </div>
+
+          {/* ACTION SECTION */}
+          <div className="w-full lg:w-1/4 h-full">
+            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
+
+              <p className="my-3 py-1 text-base">
+                Waiting for the completion message from the client before you can approve.
+              </p>
+            </div>
+
+            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+              <div className="">
+                <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
+                <textarea
+                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  rows="10"
+                  style={{ resize: "none" }}
+                />
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      {/* </div> */}
+    </Layout>
+  );
+}
+
+export default ActiveJobs;
diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx
index f918103..9832220 100644
--- a/src/components/MyActiveJobs/MyActiveJobTable.jsx
+++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx
@@ -1,112 +1,134 @@
 import React, { useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
-import SelectBox from "../Helpers/SelectBox";
-import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
 
-import PaginatedList from "../Pagination/PaginatedList";
+import { useNavigate } from "react-router-dom";
+
 import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
-export default function MyActiveJobTable({MyJobList, className }) {
-    const filterCategories = ["All Categories", "Explore", "Featured"];
-    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+export default function MyActiveJobTable({ MyJobList, className }) {
+  const navigate = useNavigate()
 
-    let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+  const filterCategories = ["All Categories", "Explore", "Featured"];
+  const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
-  
-    const handlePagination = (e) => {
-        handlePagingFunc(e,setCurrentPage)
-    }
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentActiveJobList = MyJobList?.result_list?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
-    return (
-        <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
-                className || ""
-            }`}
-        >
-            {MyJobList && MyJobList?.result_list &&
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                    <tbody>
-                    {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-                    {/*    <td className="py-4">All Product</td>*/}
-                    {/*    <td className="py-4 text-right">.</td>*/}
-                    {/*</tr>*/}
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
 
-                    {
-                        <>
-                            {MyJobList && MyJobList?.result_list &&
-                                MyJobList.result_list.length > 0 &&
-                                currentActiveJobList.map((value, index) => (
-                                    <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                                            <td className=" py-4">
-                                                <div className="flex space-x-2 items-center">
-                                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                                        <img
-                                                            src={dataImage2}
-                                                            alt="data"
-                                                            className="w-full h-full"
-                                                        />
-                                                    </div>
-                                                    <div className="flex flex-col">
-                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                                            {value.title}
-                                                        </h1>
-                                                        <div>
-                                                            {value.description}
-                                                        </div>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Price: <span className="text-purple">{value.price*0.01}</span>
-                                                        </span>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
-                                                        </span>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Due Date:   <span className="text-purple"> {value.delivery_date}</span>
-                                                        </span>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Confirmation:   <span className="text-purple"> {value.contract}</span>
-                                                        </span>
+  return (
+    <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      {MyJobList && MyJobList?.result_list && (
+        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+            <tbody>
+              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+              {/*    <td className="py-4">All Product</td>*/}
+              {/*    <td className="py-4 text-right">.</td>*/}
+              {/*</tr>*/}
 
-                                                    </div>
-                                                </div>
-                                            </td>
+              {
+                <>
+                  {MyJobList &&
+                    MyJobList?.result_list &&
+                    MyJobList.result_list.length > 0 &&
+                    currentActiveJobList.map((value, index) => (
+                      <tr
+                        key={index}
+                        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                      >
+                        <td className=" py-4">
+                          <div className="flex space-x-2 items-center">
+                            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                              <img
+                                src={dataImage2}
+                                alt="data"
+                                className="w-full h-full"
+                              />
+                            </div>
+                            <div className="flex flex-col">
+                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                {value.title}
+                              </h1>
+                              <div>{value.description}</div>
+                              <span className="text-sm text-thin-light-gray">
+                                Price:{" "}
+                                <span className="text-purple">
+                                  {value.price * 0.01}
+                                </span>
+                              </span>
+                              <span className="text-sm text-thin-light-gray">
+                                Duration:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.timeline_days} day(s)
+                                </span>
+                              </span>
+                              <span className="text-sm text-thin-light-gray">
+                                Expire:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.expire}
+                                </span>
+                              </span>
+                              <span className="text-sm text-thin-light-gray">
+                                Send to:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.job_to}
+                                </span>
+                              </span>
+                            </div>
+                          </div>
+                        </td>
 
-
-                                            <td className="text-right py-4 px-2">
-                                                <button
-                                                    type="button"
-                                                    onClick={()=>{alert("Go to the full active job page");}}
-                                                    className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                                >
-                                                    Manage
-                                                </button>
-                                            </td>
-                                        </tr>
-                                ))}
-
-
-                        </>
-                    }
-                    </tbody>
-                </table>
-                {/* PAGINATION BUTTON */}
-                <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
-                {/* END OF PAGINATION BUTTON */}
-            </div>
+                        <td className="text-right py-4 px-2">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              navigate('/manage-active-job', {state:value});
+                            }}
+                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            View
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                </>
+              }
+            </tbody>
+          </table>
+          {/* PAGINATION BUTTON */}
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+              MyJobList?.result_list.length
+                ? true
+                : false
             }
-
-            {/* Active Job Popout */}
-            {jobPopout.show &&
-                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
-            }
-            {/* End of Active Job Popout */}
+            data={MyJobList?.result_list}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+          />
+          {/* END OF PAGINATION BUTTON */}
         </div>
-    );
+      )}
+    </div>
+  );
 }
diff --git a/src/components/MyPendingJobs/MyPendingJobTable.jsx b/src/components/MyPendingJobs/MyPendingJobTable.jsx
index 361d748..b63e091 100644
--- a/src/components/MyPendingJobs/MyPendingJobTable.jsx
+++ b/src/components/MyPendingJobs/MyPendingJobTable.jsx
@@ -4,7 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
 import dataImage3 from "../../assets/images/data-table-user-3.png";
 import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
-import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
+import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
@@ -104,7 +104,7 @@ export default function MyPendingJobTable({MyJobList, className }) {
 
             {/* Active Job Popout */}
             {jobPopout.show &&
-                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
+                <PendingJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
             }
             {/* End of Active Job Popout */}
         </div>
diff --git a/src/components/jobPopout/ActiveJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx
similarity index 98%
rename from src/components/jobPopout/ActiveJobsPopout.jsx
rename to src/components/jobPopout/PendingJobsPopout.jsx
index 01c041d..ad9eb2a 100644
--- a/src/components/jobPopout/ActiveJobsPopout.jsx
+++ b/src/components/jobPopout/PendingJobsPopout.jsx
@@ -3,7 +3,7 @@ import Detail from './popoutcomponent/Detail'
 import ModalCom from '../Helpers/ModalCom'
 
 
-function ActiveJobsPopout({details, onClose, situation}) {
+function PendingJobsPopout({details, onClose, situation}) {
   return (
     <ModalCom action={onClose} situation={situation}>
     <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -139,4 +139,4 @@ function ActiveJobsPopout({details, onClose, situation}) {
     )
 }
 
-export default ActiveJobsPopout
\ No newline at end of file
+export default PendingJobsPopout
\ No newline at end of file
diff --git a/src/views/ManageActiveJobs.jsx b/src/views/ManageActiveJobs.jsx
new file mode 100644
index 0000000..a3021db
--- /dev/null
+++ b/src/views/ManageActiveJobs.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
+
+function ManageActiveJobs() {
+  return (
+    <ActiveJobs />
+  )
+}
+
+export default ManageActiveJobs
\ No newline at end of file