diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index 4b4ffde..1e94fd8 100644
--- a/src/components/MyJobs/MyJobTable.jsx
+++ b/src/components/MyJobs/MyJobTable.jsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import SelectBox from "../Helpers/SelectBox";
@@ -11,9 +11,13 @@ import EditJobPopOut from "../jobPopout/EditJobPopout";
 
 import DeleteIcon from "../../assets/images/icon-delete.svg";
 import EditIcon from "../../assets/images/icon-edit.svg";
+import { tableReload } from "../AddJob/settings";
+import CreditPopup from "../MyWallet/Popup/CreditPopup";
 import JobListPopout from "../jobPopout/JobListPopout";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
+  const dispatch = useDispatch();
+
   // Getting the categories
   const currentJobCart = MyJobList?.data?.categories;
   // DropDown Box
@@ -23,21 +27,44 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     Object.keys(filterCategories)[0]
   );
 
-  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+  const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
 
-  let [deleteJobPopout, setDeleteJobPopout] = useState({
+  const [deleteJobPopout, setDeleteJobPopout] = useState({
     show: false,
     data: {},
-  }); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
+  });
   const [editJob, setEditJob] = useState({ show: false, data: {} });
 
   const [myCountry, setCountries] = useState("");
+
   const {
     userDetails: { country },
   } = useSelector((state) => state?.userDetails);
 
   const userApi = useMemo(() => new usersService(), []);
 
+  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
+  const [walletItem, setWalletItem] = useState(null);
+
+  /**
+   * Opens the credit popup.
+   * @param {Object} value - The value object.
+   */
+  const openPopUp = (value) => {
+    setCreditPopup({
+      show: true,
+      data: { ...value },
+    });
+  };
+
+  /**
+   * Closes the credit popup and dispatches a table reload action.
+   */
+  const closePopUp = () => {
+    setCreditPopup({ show: false, data: {} });
+    dispatch(tableReload({ type: "WALLETTABLE" }));
+  };
+
   // Get Country Api
   const getCountryList = useCallback(async () => {
     try {
@@ -98,6 +125,121 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     }
   };
 
+  const { MyJobListHeader, MyJobListTable } = myJobTableFeatures(
+    filterCategories,
+    selectedCategory,
+    handleSetCategory,
+    setDeleteJobPopout,
+    setEditJob,
+    setJobPopout,
+    MyJobList,
+    filteredCurrentJobList,
+    handlePagination,
+    currentPage,
+    currentJobList,
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  return (
+    <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+        className || ""
+      }`}
+    >
+      <MyJobListHeader />
+      {MyJobList?.loading ? (
+        <LoadingSpinner size="16" color="sky-blue" />
+      ) : (
+        <MyJobListTable />
+      )}
+
+      {/* Job List Popout */}
+      {jobPopout.show && (
+        <JobListPopout
+          details={jobPopout.data}
+          onClose={() => {
+            setJobPopout({ show: false, data: {} });
+          }}
+          setWalletItem={setWalletItem}
+          openWallet={openPopUp}
+          situation={jobPopout.show}
+        />
+      )}
+      {/* End of Job List Popout */}
+
+      {/* Delete Job Popout */}
+      {deleteJobPopout.show && (
+        <DeleteJobPopout
+          details={deleteJobPopout.data}
+          onClose={() => {
+            setDeleteJobPopout({ show: false, data: {} });
+          }}
+          reloadJobList={reloadJobList}
+          situation={deleteJobPopout.show}
+        />
+      )}
+      {/* END of Delete Job Popout */}
+
+      {editJob.show && (
+        <EditJobPopOut
+          details={editJob.data}
+          onClose={() => {
+            setEditJob({
+              show: false,
+              data: {},
+            });
+          }}
+          situation={editJob.show}
+          country={myCountry}
+          categories={currentJobCart}
+        />
+      )}
+
+      {creditPopup.show && (
+        <CreditPopup
+          details={creditPopup.data}
+          walletItem={walletItem}
+          onClose={closePopUp}
+          situation={openPopUp}
+        />
+      )}
+    </div>
+  );
+}
+
+function myJobTableFeatures(
+  filterCategories,
+  selectedCategory,
+  handleSetCategory,
+  setDeleteJobPopout,
+  setEditJob,
+  setJobPopout,
+  MyJobList,
+  filteredCurrentJobList,
+  handlePagination,
+  currentPage,
+  currentJobList,
+  indexOfFirstItem,
+  indexOfLastItem
+) {
+  // List of job table features
+  const MyJobListHeader = () => (
+    <div className="header w-full flex justify-between items-center mb-5">
+      <div className="flex space-x-2 items-center">
+        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+          {filterCategories[selectedCategory]} Jobs
+        </h1>
+      </div>
+      <SelectBox
+        action={handleSetCategory}
+        datas={Object.values(filterCategories)}
+        className="Update-table-dropdown"
+        contentBodyClasses="w-auto min-w-max"
+      />
+    </div>
+  );
+
   const JobListItem = ({ value, index, image_server }) => {
     let thePrice = PriceFormatter(
       value?.price * 0.01,
@@ -187,7 +329,10 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           <button
             type="button"
             onClick={() => {
-              setJobPopout({ show: true, data: { thePrice, ...value } });
+              setJobPopout({
+                show: true,
+                data: { thePrice, ...value },
+              });
             }}
             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
@@ -198,32 +343,32 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     );
   };
 
+  const NoJobsRow = ({ text }) => (
+    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+      <td className="p-2">{text}</td>
+    </tr>
+  );
+
   const MyJobListTable = () => (
     <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
       <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <tbody>
           <>
-            {MyJobList &&
-            MyJobList?.data?.result_list &&
-            MyJobList.data?.result_list.length > 0 ? (
-              filteredCurrentJobList?.length ? (
+            {MyJobList?.data?.result_list?.length > 0 ? (
+              filteredCurrentJobList.length > 0 ? (
                 filteredCurrentJobList.map((value, index) => (
                   <JobListItem
-                    index={index}
                     key={index}
+                    index={index}
                     value={value}
-                    image_server={MyJobList?.data.session_image_server}
+                    image_server={MyJobList.data.session_image_server}
                   />
                 ))
               ) : (
-                <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                  <td className="p-2">No Jobs Available In This Category!</td>
-                </tr>
+                <NoJobsRow text="No Jobs Available In This Category!" />
               )
             ) : (
-              <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                <td className="p-2">No Jobs Available!</td>
-              </tr>
+              <NoJobsRow text="No Jobs Available!" />
             )}
           </>
         </tbody>
@@ -246,71 +391,5 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       {/* END OF PAGINATION BUTTON */}
     </div>
   );
-
-  return (
-    <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
-        className || ""
-      }`}
-    >
-      <div className="header w-full flex justify-between items-center mb-5">
-        <div className="flex space-x-2 items-center">
-          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-            {filterCategories[selectedCategory]} Jobs
-          </h1>
-        </div>
-        <SelectBox
-          action={handleSetCategory}
-          datas={Object.values(filterCategories)}
-          className="Update-table-dropdown"
-          contentBodyClasses="w-auto min-w-max"
-        />
-      </div>
-      {MyJobList?.loading ? (
-        <LoadingSpinner size="16" color="sky-blue" />
-      ) : (
-        <MyJobListTable />
-      )}
-
-      {/* Job List Popout */}
-      {jobPopout.show && (
-        <JobListPopout
-          details={jobPopout.data}
-          onClose={() => {
-            setJobPopout({ show: false, data: {} });
-          }}
-          situation={jobPopout.show}
-        />
-      )}
-      {/* End of Job List Popout */}
-
-      {/* Delete Job Popout */}
-      {deleteJobPopout.show && (
-        <DeleteJobPopout
-          details={deleteJobPopout.data}
-          onClose={() => {
-            setDeleteJobPopout({ show: false, data: {} });
-          }}
-          reloadJobList={reloadJobList}
-          situation={deleteJobPopout.show}
-        />
-      )}
-      {/* END of Delete Job Popout */}
-
-      {editJob.show && (
-        <EditJobPopOut
-          details={editJob.data}
-          onClose={() => {
-            setEditJob({
-              show: false,
-              data: {},
-            });
-          }}
-          situation={editJob.show}
-          country={myCountry}
-          categories={currentJobCart}
-        />
-      )}
-    </div>
-  );
+  return { MyJobListHeader, MyJobListTable };
 }
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index 717af4e..47b6549 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/src/components/MyWallet/Popup/CreditPopup.jsx
@@ -79,7 +79,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
                 <ConfirmAddFund
                   confirmCredit={confirmCredit}
                   setConfirmCredit={setConfirmCredit}
-                  walletItem={walletItem}
+                  walletItem={walletItem || details}
                   onClose={onClose}
                 />
               ) : confirmCredit?.show?.acceptConfirm?.state ? (
diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 301b725..f805719 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -6,7 +6,6 @@ import usersService from "../../services/UsersService";
 import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
 
@@ -23,7 +22,13 @@ const validationSchema = Yup.object().shape({
   group: Yup.string(),
 });
 
-function JobListPopout({ details, onClose, situation }) {
+function JobListPopout({
+  details,
+  onClose,
+  situation,
+  openWallet,
+  setWalletItem,
+}) {
   const [selectedTab, setSelectedTab] = useState("public");
   const tabs = ["public", "individual", "group"];
 
@@ -65,6 +70,12 @@ function JobListPopout({ details, onClose, situation }) {
 
   const taskWalletSelector = getWalletDetail(details?.currency);
 
+  const openCreditPopup = () => {
+    onClose();
+    setWalletItem(taskWalletSelector);
+    openWallet();
+  };
+
   // member listing
   const memberList = useCallback(async () => {
     setLoader({ member: true, jobFields: false });
@@ -138,6 +149,7 @@ function JobListPopout({ details, onClose, situation }) {
       job_uid,
       job_description: textArea,
     };
+
     let reqData;
 
     // for family input
@@ -238,7 +250,147 @@ function JobListPopout({ details, onClose, situation }) {
       });
   }, []);
 
-  console.log("wallet >> ", walletDetails, details, taskWalletSelector);
+  const DetailsSection = ({ label, value }) => (
+    <div className="my-3 md:flex">
+      <Detail label={label} value={value} />
+    </div>
+  );
+
+  const DetailsComponent = () => {
+    const detailsArray = [
+      { label: "Description", value: details.description },
+      { label: "Price", value: details.thePrice },
+      { label: "Timeline", value: `${details.timeline_days} day(s)` },
+      { label: "Created", value: new Date(details?.created).toDateString() },
+    ];
+
+    return (
+      <div className="px-4 pb-3 w-full md:border-r-2">
+        {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
+
+        {/* INPUT SECTION */}
+        {detailsArray.map((detail, index) => (
+          <DetailsSection
+            key={index}
+            label={detail.label}
+            value={detail.value}
+          />
+        ))}
+
+        <div className="">
+          <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+            Delivery Detail
+          </label>
+          <textarea
+            className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+            rows="7"
+            style={{ resize: "none" }}
+            value={textArea}
+            onChange={handleInputChange}
+          />
+          <p>{errMsg.deliveryDetail}</p>
+        </div>
+      </div>
+    );
+  };
+
+  const FormSection = ({
+    selectedTab,
+    initialValues,
+    validationSchema,
+    jobFieldHandler,
+    loader,
+    errorHandler,
+    errMsg,
+  }) => {
+    const renderForm = (props) => {
+      // Render the appropriate form based on the selected tab
+      switch (selectedTab) {
+        case "family":
+          return (
+            <JobFieldInput
+              label="Assign to family"
+              select={true}
+              inputName="family"
+              value={props?.values.family}
+              data={familyList}
+              btnText="Assign to family"
+              optionText="Select Family"
+              loader={loader?.jobFields?.family}
+              errorHandler={errorHandler}
+              parentClass="w-full flex flex-col gap-4"
+            />
+          );
+        case "public":
+          return (
+            <JobFieldInput
+              label="Offer this job to public"
+              select={true}
+              inputName="public"
+              value={props?.values.public}
+              data={publicArray}
+              btnText="Show Task to Public"
+              optionText="Select Duration"
+              loader={loader?.jobFields?.public}
+              errorHandler={errorHandler}
+              parentClass="w-full flex flex-col gap-4"
+            />
+          );
+        case "individual":
+          return (
+            <JobFieldInput
+              label="Offer this job to individual"
+              input={true}
+              inputName="individual"
+              value={props?.values.individual}
+              placeholder="Enter email of individual"
+              inputHandler={props?.handleChange}
+              btnText="Send Offer to Individual"
+              loader={loader?.jobFields?.individual}
+              errorHandler={errorHandler}
+              parentClass="w-full flex flex-col gap-4"
+            />
+          );
+        case "group":
+          return (
+            <JobFieldInput
+              label="Offer this job to your Group"
+              select={true}
+              inputName="group"
+              value={props?.values.group}
+              btnText="Send Order to Group"
+              optionText="Select Group"
+              loader={loader?.jobFields?.group}
+              errorHandler={errorHandler}
+              data={groupList}
+              parentClass="w-full flex flex-col gap-4"
+            />
+          );
+        default:
+          return null;
+      }
+    };
+
+    return (
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={jobFieldHandler}
+      >
+        {(props) => (
+          <Form className="">
+            {renderForm(props)}
+            <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+              {props?.values[selectedTab] === "" && (
+                <span>{errMsg?.jobFields[selectedTab]}</span>
+              )}
+            </p>{" "}
+          </Form>
+        )}
+      </Formik>
+    );
+  };
+
   return (
     <ModalCom action={onClose} situation={situation} className="">
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -272,47 +424,9 @@ function JobListPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
+        
         <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="px-4 pb-3 w-full md:border-r-2">
-            {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
-
-            {/* INPUT SECTION */}
-            <div className="my-3 md:flex">
-              <Detail label="Description" value={details.description} />
-            </div>
-
-            <div className="my-3 md:flex">
-              <Detail label="Price" value={details.thePrice} />
-            </div>
-
-            <div className="my-3 md:flex">
-              <Detail
-                label="Timeline"
-                value={`${details.timeline_days} day(s)`}
-              />
-            </div>
-
-            <div className="my-3 md:flex">
-              <Detail
-                label="Created"
-                value={new Date(details?.created).toDateString()}
-              />
-            </div>
-
-            <div className="">
-              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
-                Delivery Detail
-              </label>
-              <textarea
-                className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                rows="7"
-                style={{ resize: "none" }}
-                value={textArea}
-                onChange={handleInputChange}
-              />
-              <p>{errMsg.deliveryDetail}</p>
-            </div>
-          </div>
+          <DetailsComponent />
 
           <>
             {/* ACTION SECTION */}
@@ -324,165 +438,25 @@ function JobListPopout({ details, onClose, situation }) {
                 <div className="flex flex-col grow">
                   <div className="grid grid-cols-3 mt-4">
                     {tabs.map((item) => (
-                      <button
-                        // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
-                        className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
-                          selectedTab == item
-                            ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
-                            : "bg-white text-[#000]"
-                        }`}
-                        value={item}
-                        name={item}
-                        onClick={() => setSelectedTab(item)}
-                      >
-                        <div
-                          className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
-                            selectedTab == item
-                              ? "border-white bg-emerald-500"
-                              : "border-red-50 dark:border-[#D85A5A] bg-white"
-                          }`}
-                        ></div>
-                        {item[0].toUpperCase() + item.slice(1)}
-                      </button>
+                      <TabButton
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
+                      />
                     ))}
                   </div>
                   <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
-                    {selectedTab == "family" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.family}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="hidden">
-                              {/* Assign to Family */}
-                              <JobFieldInput
-                                label="Assign to family"
-                                select={true}
-                                inputName="family"
-                                value={props?.values.family}
-                                data={familyList}
-                                btnText="Assign to family"
-                                optionText="Select Family"
-                                loader={loader?.jobFields?.family}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values?.family === "" && (
-                                  <span>{errMsg?.jobFields?.family}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                    <FormSection
+                      selectedTab={selectedTab}
+                      initialValues={initialValues}
+                      validationSchema={validationSchema.fields[selectedTab]}
+                      jobFieldHandler={jobFieldHandler}
+                      loader={loader}
+                      errorHandler={errorHandler}
+                      errMsg={errMsg}
+                    />
 
-                    {selectedTab == "public" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.public}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to public input */}
-                              <JobFieldInput
-                                label="Offer this job to public"
-                                select={true}
-                                inputName="public"
-                                value={props?.values.public}
-                                data={publicArray}
-                                btnText="Show Task to Public"
-                                optionText="Select Duration"
-                                loader={loader?.jobFields?.public}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.public === "" && (
-                                  <span>{errMsg?.jobFields?.public}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
-
-                    {selectedTab == "individual" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.individual}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to individual input */}
-                              <JobFieldInput
-                                label="Offer this job to individual"
-                                input={true}
-                                inputName="individual"
-                                value={props?.values.individual}
-                                placeholder="Enter email of individual"
-                                inputHandler={props?.handleChange}
-                                btnText="Send Offer to Individual"
-                                loader={loader?.jobFields?.individual}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.individual === "" && (
-                                  <span>{errMsg?.jobFields?.individual}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
-
-                    {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
-                    {selectedTab == "group" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.group}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to your group input */}
-                              <JobFieldInput
-                                label="Offer this job to your Group"
-                                select={true}
-                                inputName="group"
-                                value={props?.values.group}
-                                btnText="Send Order to Group"
-                                optionText="Select Group"
-                                loader={loader?.jobFields?.group}
-                                errorHandler={errorHandler}
-                                data={groupList}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.group === "" && (
-                                  <span>{errMsg?.jobFields?.group}</span>
-                                )}
-                              </p>
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
                     <p
                       className={`text-center w-full text-lg ${
                         requestStatus.status
@@ -496,7 +470,10 @@ function JobListPopout({ details, onClose, situation }) {
                 </div>
               </div>
             ) : (
-              <ZeroBalanceChecker {...taskWalletSelector} />
+              <ZeroBalanceChecker
+                {...taskWalletSelector}
+                openCreditPopup={openCreditPopup}
+              />
             )}
 
             {/* END OF ACTION SECTION */}
@@ -653,18 +630,43 @@ const publicArray = [
   { duration: 28, name: "4 weeks" },
 ];
 
-const ZeroBalanceChecker = ({ amount, code, country }) => {
-  let thePrice = PriceFormatter(amount * 0.01, code, country);
-
+const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
   return (
     <div className="px-4 pb-3 w-full flex flex-col gap-5 items-center">
       <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
-        Wallet Balance:{` ${code} ${amount}`}
+        Wallet Balance:{` ${code} ${(+amount * 0.01).toFixed(2)}`}
       </h1>
-      <p className="font-semibold text-center text-red-500 text-lg">You do not have sufficient balance to assign this task</p>
-      <button className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">
+      <p className="font-semibold text-center text-red-500 text-lg">
+        You do not have sufficient balance to assign this task
+      </p>
+      <button
+        onClick={openCreditPopup}
+        className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+      >
         Add Credit to Wallet
       </button>
     </div>
   );
 };
+
+const TabButton = ({ item, selectedTab, setSelectedTab }) => (
+  <button
+    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
+      selectedTab === item
+        ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
+        : "bg-white text-[#000]"
+    }`}
+    value={item}
+    name={item}
+    onClick={() => setSelectedTab(item)}
+  >
+    <div
+      className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
+        selectedTab === item
+          ? "border-white bg-emerald-500"
+          : "border-red-50 dark:border-[#D85A5A] bg-white"
+      }`}
+    ></div>
+    {item[0].toUpperCase() + item.slice(1)}
+  </button>
+);