diff --git a/.env b/.env
index 949303d..fcdc42c 100644
--- a/.env
+++ b/.env
@@ -118,4 +118,10 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
\ No newline at end of file
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
\ No newline at end of file
diff --git a/.env.development b/.env.development
index 3e1b1be..5f2d549 100644
--- a/.env.development
+++ b/.env.development
@@ -86,4 +86,10 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
\ No newline at end of file
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 615202b..cfa2c24 100644
--- a/.env.production
+++ b/.env.production
@@ -92,4 +92,10 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
\ No newline at end of file
+REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
+
+# FOR FAMILY GAME LINK
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
\ No newline at end of file
diff --git a/src/Routers.jsx b/src/Routers.jsx
index f1b658b..e8466e5 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -66,6 +66,7 @@ import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
 import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
 import FamilyWalletPage from "./views/FamilyWalletPage";
 import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
+import FamGamesPage from "./views/FamGamesPage";
 
 export default function Routers() {
   return (
@@ -144,6 +145,7 @@ export default function Routers() {
           <Route exact path="/ai-question" element={<FamAIQuestionPage />} />
           <Route exact path="/myfiles" element={<FamMyFilesPage />} />
           <Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
+          <Route exact path="/fam-games" element={<FamGamesPage />} />
           <Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
           <Route
             exact
diff --git a/src/assets/images/wrenchboard-logo-text_new.png b/src/assets/images/wrenchboard-logo-text_new.png
new file mode 100644
index 0000000..e741433
Binary files /dev/null and b/src/assets/images/wrenchboard-logo-text_new.png differ
diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index 0547169..4715387 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -72,49 +72,74 @@ function AddJob({ popUpHandler, categories }) {
     }
   };
 
+  // For form initial values
+  const initialValues = {
+    // initial values for formik
+    country: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
   return (
-    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
-      <Formik
-        initialValues={IV}
+    <Formik
+        initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
         {(props) => {
           return (
-            <Form>
-              <div className="flex flex-col-reverse sm:flex-row">
-                <div className="fields w-full">
-                  {/* inputs starts here */}
-                  <div className="xl:flex xl:space-x-7 mb-[5px]">
-                    <div className="field w-full mb-6 xl:mb-0">
-                      <label
-                        htmlFor="country"
-                        className="job-label job-label-flex"
-                      >
-                        <span>Currency</span>
-                        {props.errors.country && props.touched.country && (
-                          <span className="text-[12px] text-red-500">
-                            {props.errors.country}
-                          </span>
-                        )}
-                      </label>
-                      <select
-                        id="country"
-                        name="country"
-                        value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      >
-                        {walletDetails?.loading ? (
-                          <option className="text-slate-500 text-lg" value="">
-                            Loading...
-                          </option>
-                        ) : walletDetails.data.length ? (
-                          <>
+            <Form className='contents'>
+              <div className="add-job p-5 w-full h-full rounded-md flex flex-col justify-between overflow-y-auto">
+                <div className="flex flex-col-reverse sm:flex-row">
+                  <div className="fields w-full">
+                    {/* inputs starts here */}
+                    <div className="xl:flex xl:space-x-7 mb-[5px]">
+                      <div className="field w-full mb-[5px] xl:mb-0">
+                        <label
+                          htmlFor="country"
+                          className="job-label job-label-flex"
+                        >
+                          <span>Currency</span>
+                          {props.errors.country && props.touched.country && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.country}
+                            </span>
+                          )}
+                        </label>
+                        <select
+                          id="country"
+                          name="country"
+                          value={props.values.country}
+                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                          disabled={walletDetails.data.length == 1}
+                        >
+                          {walletDetails?.loading ? (
                             <option className="text-slate-500 text-lg" value="">
-                              Select a currency
+                              Loading...
                             </option>
+                          ) : walletDetails.data.length > 1 ? (
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select a currency
+                              </option>
+                              {walletDetails.data?.map((item, index) => (
+                                <option
+                                  key={index}
+                                  className="text-slate-500 text-lg"
+                                  value={item?.country}
+                                >
+                                  {item?.description}
+                                </option>
+                              ))}
+                            </>
+                          ) : walletDetails.data.length == 1 ?
+                          <>
                             {walletDetails.data?.map((item, index) => (
                               <option
                                 key={index}
@@ -125,238 +150,274 @@ function AddJob({ popUpHandler, categories }) {
                               </option>
                             ))}
                           </>
-                        ) : (
-                          <option className="text-slate-500 text-lg" value="">
-                            No Options Found! Try Again
-                          </option>
-                        )}
-                      </select>
+                          :(
+                            <option className="text-slate-500 text-lg" value="">
+                              No Options Found! Try Again
+                            </option>
+                          )}
+                        </select>
+                      </div>
+
+                      {/* Price */}
+                      <div className="field w-full mb-[5px] xl:mb-0">
+                        <InputCom
+                          fieldClass="px-6 text-right flex"
+                          label="Price"
+                          labelClass=""
+                          type="number"
+                          name="price"
+                          placeholder="0"
+                          value={props.values.price}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                          error={
+                            props.errors.price &&
+                            props.touched.price &&
+                            props.errors.price
+                          }
+                        />
+                      </div>
+
+                      {/* Timeline */}
+                      <div className="field w-full mb-[5px] xl:mb-0">
+                        <label
+                            className="job-label job-label-flex"
+                            htmlFor="timeline_days"
+                          >
+                            Timeline
+                            <span className="text-green-700 text-[12px] tracking-wide">
+                              - Duration
+                            </span>
+                          </label>
+
+                        <Field
+                          component="select"
+                          name="timeline_days"
+                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
+                            props.errors.timeline_days &&
+                            props.touched.timeline_days
+                              ? "border-[#ff0a0a63] shadow-red-500 animate-shake"
+                              : "dark:border-[#5e6278]"
+                          }`}
+                          value={props.values.timeline_days}
+                        >
+                          <option value="" className='text-slate-500 text-lg'>Select Duration</option>
+                          {publicArray.map(({ name, duration }, idx) => (
+                            <option
+                              key={idx}
+                              className="text-slate-500 text-lg"
+                              value={duration}
+                            >
+                              {name}
+                            </option>
+                          ))}
+                        </Field>
+                      </div>
                     </div>
 
-                    {/* Price */}
-                    <div className="field w-full">
+                    {/* Title  */}
+                    <div className="field w-full mb-[5px]">
                       <InputCom
-                        fieldClass="px-6 text-right flex"
-                        label="Price"
+                        fieldClass="px-6"
+                        label="Title"
                         labelClass=""
-                        type="number"
-                        name="price"
-                        placeholder="0"
-                        value={props.values.price}
+                        type="text"
+                        name="title"
+                        value={props.values.title}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
                         error={
-                          props.errors.price &&
-                          props.touched.price &&
-                          props.errors.price
+                          props.errors.title &&
+                          props.touched.title &&
+                          props.errors.title
                         }
                       />
                     </div>
-                  </div>
 
-                  {/* Title  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Title"
-                      labelClass=""
-                      type="text"
-                      name="title"
-                      value={props.values.title}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={
-                        props.errors.title &&
-                        props.touched.title &&
-                        props.errors.title
-                      }
-                    />
-                  </div>
-
-                  {/* Description  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Description"
-                      labelClass=""
-                      type="text"
-                      name="description"
-                      value={props.values.description}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={
-                        props.errors.description &&
-                        props.touched.description &&
-                        props.errors.description
-                      }
-                    />
-                  </div>
-
-                  {/* Details */}
-                  <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                    <div className="sm:w-[60%] w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className="job-label job-label-flex"
-                      >
-                        Job Delivery Details
-                        {props.errors.job_detail &&
-                          props.touched.job_detail && (
-                            <span className="text-[12px] text-red-500">
-                              {props.errors.job_detail}
-                            </span>
-                          )}
-                      </label>
-                      <textarea
-                        id="Job Delivery Details"
-                        rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
-                        style={{ resize: "none" }}
-                        name="job_detail"
-                        value={props.values.job_detail}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
+                    {/* Description  */}
+                    <div className="field w-full mb-[5px]">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Description"
+                        labelClass=""
+                        type="text"
+                        name="description"
+                        value={props.values.description}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                        error={
+                          props.errors.description &&
+                          props.touched.description &&
+                          props.errors.description
+                        }
                       />
                     </div>
 
-                    <div className="sm:w-[35%] w-full">
-                      <label
-                        htmlFor="Job Categories"
-                        className='job-label'
-                        id="checked-group"
-                      >
-                        Categories
-                      </label>
-                      <div
-                        className="sm:flex-col flex flex-wrap px-3 mt-3"
-                        role="group"
-                        aria-labelledby="checked-group"
-                      >
-                        {categories ? (
-                          <>
-                            {Object?.entries(categories).map(([key, value]) => (
-                              <label
-                                key={key}
-                                className="flex gap-1 w-full items-center"
-                              >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
-                            ))}
-                          </>
-                        ) : (
-                          <label className="flex gap-1 w-full items-center">
-                            <Field type="checkbox" name="category" />
-                            <span className="text-[13.975px]">null</span>
-                          </label>
-                        )}
-                        <span className="h-5 text-sm italic text-[#cf3917]">
-                          {props.errors.category &&
-                            props.touched.category &&
-                            "please select a category"}
-                        </span>
+                    {/* Details */}
+                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                      <div className="sm:w-[60%] w-full">
+                        <label
+                          htmlFor="Job Delivery Details"
+                          className="job-label job-label-flex"
+                        >
+                          Job Delivery Details
+                          {props.errors.job_detail &&
+                            props.touched.job_detail && (
+                              <span className="text-[12px] text-red-500">
+                                {props.errors.job_detail}
+                              </span>
+                            )}
+                        </label>
+                        <textarea
+                          id="Job Delivery Details"
+                          rows="5"
+                          className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
+                          style={{ resize: "none" }}
+                          name="job_detail"
+                          value={props.values.job_detail}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                        />
+                      </div>
+
+                      <div className="sm:w-[35%] w-full">
+                        <label
+                          htmlFor="Job Categories"
+                          className='job-label'
+                          id="checked-group"
+                        >
+                          Categories
+                        </label>
+                        <div
+                          className="sm:flex-col flex flex-wrap px-3 mt-3"
+                          role="group"
+                          aria-labelledby="checked-group"
+                        >
+                          {categories ? (
+                            <>
+                              {Object?.entries(categories).map(([key, value]) => (
+                                <label
+                                  key={key}
+                                  className="flex gap-1 w-full items-center"
+                                >
+                                  <Field
+                                    type="checkbox"
+                                    name="category"
+                                    value={key}
+                                  />
+                                  <span className="text-[13.975px]">{value}</span>
+                                </label>
+                              ))}
+                            </>
+                          ) : (
+                            <label className="flex gap-1 w-full items-center">
+                              <Field type="checkbox" name="category" />
+                              <span className="text-[13.975px]">null</span>
+                            </label>
+                          )}
+                          <span className="h-5 text-sm italic text-[#cf3917]">
+                            {props.errors.category &&
+                              props.touched.category &&
+                              "please select a category"}
+                          </span>
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="field w-full mb-[5px]">
-                    <div className={`flex items-center justify-between mb-2.5`}>
-                      <label
-                        className="job-label"
-                        htmlFor="timeline_days"
-                      >
-                        Timeline
-                        <span className="text-green-700 text-sm tracking-wide">
-                          - Expected duration of this task
-                        </span>
-                      </label>
-                    </div>
-
-                    <Field
-                      component="select"
-                      name="timeline_days"
-                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
-                        props.errors.timeline_days &&
-                        props.touched.timeline_days
-                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                      }`}
-                      value={props.values.timeline_days}
-                    >
-                      <option value="">Select Duration</option>
-                      {publicArray.map(({ name, duration }, idx) => (
-                        <option
-                          key={idx}
-                          className="text-slate-500 text-lg"
-                          value={duration}
+                    {/* <div className="field w-full mb-[5px]">
+                      <div className={`flex items-center justify-between mb-2.5`}>
+                        <label
+                          className="job-label"
+                          htmlFor="timeline_days"
                         >
-                          {name}
-                        </option>
-                      ))}
-                    </Field>
-                  </div>
-                  {/* inputs ends here */}
-                </div>
-              </div>
+                          Timeline
+                          <span className="text-green-700 text-sm tracking-wide">
+                            - Expected duration of this task
+                          </span>
+                        </label>
+                      </div>
 
-              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-              <div className="content-footer w-full">
-                {/* error or success display */}
-                {requestStatus.message != "" &&
-                  (!requestStatus.status ? (
-                    <div
-                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                    >
-                      {requestStatus.message}
-                    </div>
-                  ) : (
-                    requestStatus.status && (
+                      <Field
+                        component="select"
+                        name="timeline_days"
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
+                          props.errors.timeline_days &&
+                          props.touched.timeline_days
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
+                        value={props.values.timeline_days}
+                      >
+                        <option value="">Select Duration</option>
+                        {publicArray.map(({ name, duration }, idx) => (
+                          <option
+                            key={idx}
+                            className="text-slate-500 text-lg"
+                            value={duration}
+                          >
+                            {name}
+                          </option>
+                        ))}
+                      </Field>
+                    </div> */}
+                    {/* inputs ends here */}
+                  </div>
+                </div>
+
+                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                <div className="content-footer w-full">
+                  {/* error or success display */}
+                  {requestStatus.message != "" &&
+                    (!requestStatus.status ? (
                       <div
-                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                       >
                         {requestStatus.message}
                       </div>
-                    )
-                  ))}
-                {/* End of error or success display */}
-
-                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                  <div className="flex items-center space-x-4 mr-9">
-                    <button
-                      type="button"
-                      className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
-                    >
-                      <span
-                        className="px-2"
-                        onClick={popUpHandler}
-                      >
-                        {" "}
-                        Cancel
-                      </span>
-                    </button>
-
-                    {requestStatus?.loading ? (
-                      <LoadingSpinner size="8" color="sky-blue" />
                     ) : (
-                      <button
-                        type="submit"
-                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                      >
-                        Add Job
-                      </button>
-                    )}
-                  </div>
+                      requestStatus.status && (
+                        <div
+                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      )
+                    ))}
+                  {/* End of error or success display */}
+
+                </div>
+              </div>
+              <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+                  <button
+                    type="button"
+                    className="custom-btn border border-light-red text-light-red"
+                  >
+                    <span
+                      className="px-2"
+                      onClick={popUpHandler}
+                    >
+                      {" "}
+                      Cancel
+                    </span>
+                  </button>
+
+                  {requestStatus?.loading ? (
+                    <LoadingSpinner size="8" color="sky-blue" />
+                  ) : (
+                    <button
+                      type="submit"
+                      className="custom-btn btn-gradient text-white"
+                    >
+                      Add Job
+                    </button>
+                  )}
                 </div>
               </div>
             </Form>
           );
         }}
       </Formik>
-    </div>
   );
 }
 
diff --git a/src/components/AuthPages/AuthLayout2.jsx b/src/components/AuthPages/AuthLayout2.jsx
index 55a13d9..2edb006 100644
--- a/src/components/AuthPages/AuthLayout2.jsx
+++ b/src/components/AuthPages/AuthLayout2.jsx
@@ -18,14 +18,14 @@ export default function LoginLayout({ slogan, children }) {
         backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
+      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
         {/* <div 
-            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
         </div> */}
-        <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
-          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 rounded-[0.475rem]">
+        <div className="p-5 sm:p-7 flex place-content-center xl:col-start-2">
+          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}
             </div>
diff --git a/src/components/AuthPages/Login/index2.jsx b/src/components/AuthPages/Login/index2.jsx
index d2535fe..08cb933 100644
--- a/src/components/AuthPages/Login/index2.jsx
+++ b/src/components/AuthPages/Login/index2.jsx
@@ -4,7 +4,7 @@ import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text_new.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
diff --git a/src/components/AuthPages/SignUp/index2.jsx b/src/components/AuthPages/SignUp/index2.jsx
index acdbbee..22a63c5 100644
--- a/src/components/AuthPages/SignUp/index2.jsx
+++ b/src/components/AuthPages/SignUp/index2.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text_new.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
@@ -180,11 +180,11 @@ export default function SignUp() {
                 </span>
               </div>
               <div className="w-full flex items-center gap-2">
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                <div className="border-b border-[#eff2f5] w-[48%]"></div>
+                <span className="text-[#b5b5c3] font-medium text-[0.7rem]">
                   OR
                 </span>
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                <div className="border-b border-[#eff2f5] w-[48%]"></div>
               </div>
               <div className="input-area">
                 <SelectOption
@@ -413,7 +413,7 @@ const SelectOption = ({
           disabled={disable}
           name={name}
           id={name}
-          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          className="px-6 input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-dark-gray bg-[#f5f8fa] dark:bg-[#FAFAFA] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
diff --git a/src/components/Cards/OfferCard.jsx b/src/components/Cards/OfferCard.jsx
index 019cd3f..da469ae 100644
--- a/src/components/Cards/OfferCard.jsx
+++ b/src/components/Cards/OfferCard.jsx
@@ -46,15 +46,15 @@ export default function OfferCard({
           </h1>
 
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex flex-col justify-between items-center border-r-2">
+            <div className="grid grid-cols-1 gap-2">
+              {/* <div className="flex flex-col justify-between items-center border-r-2">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Task Code
                 </p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   {datas.contract}
                 </p>
-              </div>
+              </div> */}
               <div className="flex flex-col justify-between items-center">
                 <p className="text-sm text-red-500 tracking-wide">Expires</p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx
index 71eeb89..837fd8e 100644
--- a/src/components/Dashboards/AccountDashboard.jsx
+++ b/src/components/Dashboards/AccountDashboard.jsx
@@ -108,8 +108,8 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
       key={key}
       className="flex flex-col bg-white shadow-md h-full rounded-xl dark:border-[#5356fb29] dark:bg-dark-white"
     >
-      <div className="w-full flex justify-between border-b border-slate-300 p-2">
-        <div className="h-[130px] flex justify-between items-center">
+      <div className="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
+        <div className="min-h-[150px] sm:min-h-[130px] flex justify-between items-center">
           <div className="px-2 flex flex-col gap-2 dark:text-white">
             <Link to={link_path} className="text-lg font-bold">
               {title}
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
index 1741542..52c5f1f 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -85,13 +85,13 @@ export default function AssignMediaTask({
               >
                 {(props) => {
                   return (
-                        <Form>
+                        <Form className='contents'>
                             <>
                                 <div
-                                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
+                                className={`job-action-modal-body w-full h-full overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
-                                    <div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                    <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                                         {commonMedia?.data?.length ? (
                                         commonMedia?.data?.map((item, index) => (
                                             <div
@@ -124,7 +124,7 @@ export default function AssignMediaTask({
                                 {/*Right Hand Side for details && Task Type === select */}
                                     <>
                                     {commonMedia?.data?.length > 0 ? (
-                                        <div className="p-4 py-0 h-full">
+                                        <div className="p-4 py-0 h-auto">
                                         <div className="w-full">
                                             <div className="mb-3 w-full">
                                             <label className="job-label">
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
index 2b8dcca..1bdefdd 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
@@ -3,6 +3,7 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
 import { NewTasks } from './forms'
 import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
+import AttachFile from '../../attachmentCom/AttachFile';
 
 export default function AssignPrevNewTask({
     jobList,
@@ -32,7 +33,7 @@ export default function AssignPrevNewTask({
             ) : (
               <>
                 <div
-                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
+                  className={`job-action-modal-body w-full h-full overflow-y-auto md:grid ${
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >
@@ -63,7 +64,7 @@ export default function AssignPrevNewTask({
                     </div>
                     {/* Task Type === select */}
                     {taskType == "select" && (
-                      <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                      <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                         {jobList?.data?.length ? (
                           jobList?.data?.map((item, index) => (
                             <div
@@ -120,68 +121,67 @@ export default function AssignPrevNewTask({
                                 value={activeTask?.data?.description}
                               />
                             </div> */}
-                            <div className="my-3 w-full">
-                              <label className="job-label">
-                                Description
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
-                                {activeTask?.data?.description}
-                              </p>
-                            </div>
-                            <div className="grid grid-cols-2">
-                              <div className="w-full">
-                                <div className="my-3 w-full flex items-center gap-1">
-                                  <label className="job-label">
-                                    Reward
-                                  </label>
-                                  <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                    {PriceFormatter(
-                                      activeTask?.data?.price * 0.01,
-                                      activeTask?.data?.currency,
-                                      activeTask?.data?.curreny_code
-                                    )}
-                                  </p>
-                                </div>
+                            <div className='flex flex-col gap-2'>
+                              <div className="my-1 w-full">
+                                <label className="job-label">
+                                  Description
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
+                                  {activeTask?.data?.description}
+                                </p>
+                              </div>
+                              <div className="w-full grid grid-cols-2">
+                                <div className="w-full">
+                                  <div className="w-full flex items-center gap-1">
+                                    <label className="job-label">
+                                      Reward
+                                    </label>
+                                    <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                      {PriceFormatter(
+                                        activeTask?.data?.price * 0.01,
+                                        activeTask?.data?.currency,
+                                        activeTask?.data?.curreny_code
+                                      )}
+                                    </p>
+                                  </div>
 
-                                <div className="my-3 w-full flex items-center gap-1">
-                                  <label className="job-label">
-                                    Timeline
-                                  </label>
-                                  <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                  <div className="w-full flex items-center gap-1">
+                                    <label className="job-label">
+                                      Timeline
+                                    </label>
+                                    <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                  </div>
+                                </div>
+                                <div className="w-full flex items-center justify-center">
+                                  <div className="mb-1 w-24 max-h-24 rounded-2xl flex items-center justify-center">
+                                      <img 
+                                        className="w-full h-auto"
+                                        loading="lazy"
+                                        src={imageSrc} 
+                                        alt='job image' 
+                                      />
+                                  </div>
                                 </div>
                               </div>
-                              <div className="w-full flex items-center justify-center">
-                                <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
-                                    <img 
-                                      className="w-full h-auto"
-                                      loading="lazy"
-                                      src={imageSrc} 
-                                      alt='job image' 
-                                    />
-                                </div>
+                              
+                              {/* ATTACHMENT SECTION*/}
+                              <div className="w-full max-h-28">
+                                  <AttachFile data={activeTask.data} />
                               </div>
-                            </div>
-                            
-                            {/* Dummy, no value found for created! thus commented*/}
-                            {/* <div className="my-3 sm:flex items-center">
-                              <Detail
-                                label="Created"
-                                value={`Dummy, no value found for created!`}
-                              />
-                            </div> */}
 
-                            <div className="my-3">
-                              <label className="w-full job-label">
-                                Delivery Detail
-                              </label>
-                              <textarea
-                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                                rows="5"
-                                style={{ resize: "none" }}
-                                value={activeTask?.data?.job_detail}
-                                readOnly
-                                // onChange={handleInputChange}
-                              />
+                              <div className="my-3">
+                                <label className="w-full job-label">
+                                  Delivery Detail
+                                </label>
+                                <textarea
+                                  className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                                  rows="5"
+                                  style={{ resize: "none" }}
+                                  value={activeTask?.data?.job_detail}
+                                  readOnly
+                                  // onChange={handleInputChange}
+                                />
+                              </div>
                             </div>
                           </div>
                         </div>
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index ecc489b..f4e3f4e 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -311,7 +311,7 @@ const AssignTaskPopout = ({
   return (
     <>
       <ModalCom action={action} situation={situation}>
-        <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-container">
           <div className="modal-header-con">
             <h1 className="modal-title">
               {details ? (
@@ -364,7 +364,7 @@ const AssignTaskPopout = ({
               </svg>
             </button>
           </div>
-          <div className="modal-body">
+          <div className="modal-body-wrapper p-[0!important]">
             <div className="px-4 py-2 w-full flex items-center gap-4">
               <button
                 name='task'
@@ -383,7 +383,7 @@ const AssignTaskPopout = ({
               Media
               </button>
             </div>
-            <div className="">
+            <div className="contents">
               {assignType == 'task' ?
                 <AssignPrevNewTask 
                   jobList={jobList}
diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
index 16478c4..8de17c0 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
@@ -93,9 +93,9 @@ const FamilyWaitlist = memo(
                                 </div>
                               </div>
                               <div className="px-2 flex flex-col items-center justify-center">
-                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                {/* <p className="text-sm font-bold text-dark-gray dark:text-white">
                                   {addedDate}
-                                </p>
+                                </p> */}
                                 <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
                                   {value.status_text}
                                 </p>
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 3d851e7..13f48cb 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -95,8 +95,7 @@ export default function InputCom({
           value={value}
           onChange={inputHandler}
           className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
-            inputBg ? inputBg : "bg-[#FAFAFA] dark:bg-[#11131F] dark:text-white tracking-wide"
-          } focus:ring-0 focus:outline-none ${fieldClass}`}
+            inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}
           id={name}
           name={name}
diff --git a/src/components/Helpers/ModalCom.jsx b/src/components/Helpers/ModalCom.jsx
index eee01f3..7a429eb 100644
--- a/src/components/Helpers/ModalCom.jsx
+++ b/src/components/Helpers/ModalCom.jsx
@@ -14,9 +14,9 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
     <div className="modal-com">
       <div
         onClick={action || isOpen}
-        className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
+        className="fixed top-0 left-0 bottom-0 w-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
+      <div className={`fixed h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>
diff --git a/src/components/History/RewardsTable.jsx b/src/components/History/RewardsTable.jsx
index c67901d..16bc7b3 100644
--- a/src/components/History/RewardsTable.jsx
+++ b/src/components/History/RewardsTable.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, {memo, useCallback, useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'
 
 import usersService from '../../services/UsersService';
@@ -9,8 +9,8 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';
 
 import { AmountTo2DP } from '../Helpers/PriceFormatter';
 
-function RewardsTable() {
 
+export const RewardsTable = memo(() => {
     const apiCall = new usersService()
 
     let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
@@ -30,7 +30,7 @@ function RewardsTable() {
 
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getFamilyRewardHistory = ()=>{
+    const getFamilyRewardHistory = useCallback(()=>{
         apiCall.getFamilyRewardHx().then((res)=>{
             if(res.data.internal_return < 0){ // success but no data
                 setFamilyRewardHistory(prev => ({...prev, loading: false}))
@@ -40,7 +40,7 @@ function RewardsTable() {
         }).catch((error)=>{
             setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
         })
-    }
+    },[])
 
     useEffect(()=>{
         getFamilyRewardHistory()
@@ -99,5 +99,5 @@ function RewardsTable() {
     </div>
   )
 }
-
+)
 export default RewardsTable
\ No newline at end of file
diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index b1c446a..48c8336 100644
--- a/src/components/History/index.jsx
+++ b/src/components/History/index.jsx
@@ -13,11 +13,15 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import RewardsTable from "./RewardsTable";
 import JobsCompleted from "./JobsCompleted";
 
+import TabButton from "../customTabs/TabButton";
+
 export default function History() {
 
     const apiCall = new usersService()
 
     let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
+    const [selectedTab, setSelectedTab] = useState("purchases");
+    const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
 
     let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
         loading: true,
@@ -222,7 +226,18 @@ export default function History() {
             {/* <TopHxBox className="mb-11" /> */}
             <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                 {/* switch button */}
-                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
+                <div className="grid grid-cols-4 mt-4">
+                {tabs.map((item) => (
+                    <TabButton 
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
+                    />
+                ))}
+                </div>
+                {/* switch button */}
+                {/* <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                     <button
                     name="purchases"
                     onClick={(e) => setTab(e.target.name)}
@@ -259,12 +274,12 @@ export default function History() {
                     >
                     Jobs Completed
                     </button>
-                </div>
+                </div> */}
                 {/* END OF switch button */}
-                <div className="history-tables w-full">
+                <div className="history-tables w-full bg-red-50 overflow-x-auto">
                     {/* PURCHASE SECTION */}
-                    {tab == 'purchases' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'purchases' &&
+                        <div className="wallet w-full">
                             {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
                             {purchaseHistory.loading ? 
                             <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
@@ -276,8 +291,8 @@ export default function History() {
                     {/* END OF PURCHASE SECTION */}
                     
                     {/* RECENT ACTIVITY SECTION */}
-                    {tab == 'recent' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'recent activity' &&
+                        <div className="wallet w-full">
                             {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             {paymentHistory.loading ? 
@@ -290,16 +305,16 @@ export default function History() {
                     {/* END OF RECENT ACTIVITY SECTION */}
 
                     {/* REWARD SECTION */}
-                    {tab == 'reward' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'rewards' &&
+                        <div className="wallet w-full">
                             <RewardsTable />
                         </div>
                     }
                     {/* END OF REWARD SECTION */}
 
                     {/* JOBS COMPLETED SECTION */}
-                    {tab == 'jobs_completed' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'jobs completed' &&
+                        <div className="wallet w-full">
                             <JobsCompleted />
                         </div>
                     }
diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx
index 41d0ecb..46e1e6b 100644
--- a/src/components/Home/index.jsx
+++ b/src/components/Home/index.jsx
@@ -67,7 +67,7 @@ export default function Home(props) {
 
   return (
     <Layout>
-      <div className="home-page-wrapper">
+      <div className="w-full">
         {userDetails && userDetails?.account_type == "FAMILY" ? (
           <FamilyDash
             account={userDetails}
diff --git a/src/components/Iframe/Iframe.jsx b/src/components/Iframe/Iframe.jsx
new file mode 100644
index 0000000..1b362b8
--- /dev/null
+++ b/src/components/Iframe/Iframe.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Iframe({src, title}) {
+  return (
+    <iframe 
+        src={src}
+        title={title}
+        className='w-full h-full' 
+    >
+    </iframe>
+  )
+}
diff --git a/src/components/JobGroups/AddGroup.jsx b/src/components/JobGroups/AddGroup.jsx
index bd96fe0..c6f5379 100644
--- a/src/components/JobGroups/AddGroup.jsx
+++ b/src/components/JobGroups/AddGroup.jsx
@@ -88,7 +88,7 @@ export default function AddGroup({ action, situation, setUpdateList }) {
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             Add Group
@@ -135,28 +135,6 @@ export default function AddGroup({ action, situation, setUpdateList }) {
               />
             </div>
           </div>
-          <div className="w-full flex justify-between items-center gap-4">
-            <button
-              onClick={action}
-              type="button"
-              className="w-[152px] h-[46px] flex justify-center items-center rounded-full text-base text-light-red tracking-wide border border-light-red"
-            >
-              <span className="">
-                Cancel
-              </span>
-            </button>
-            {requestStatus.loading ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => addGroup()}
-                type="button"
-                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-              >
-                Add Group
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -177,6 +155,29 @@ export default function AddGroup({ action, situation, setUpdateList }) {
             ))}
           {/* End of error or success display */}
         </div>
+
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn text-light-red border border-light-red"
+            >
+              <span className="">
+                Cancel
+              </span>
+            </button>
+            {requestStatus.loading ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => addGroup()}
+                type="button"
+                className="custom-btn btn-gradient text-white"
+              >
+                Add Group
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   );
diff --git a/src/components/JobGroups/DeleteGroup.jsx b/src/components/JobGroups/DeleteGroup.jsx
index c07064b..8112b15 100644
--- a/src/components/JobGroups/DeleteGroup.jsx
+++ b/src/components/JobGroups/DeleteGroup.jsx
@@ -20,14 +20,14 @@ export default function DeleteGroup({action, situation, details}) {
         action={action}
         situation={situation}
     >
-      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
             Delete Group
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={action}
           >
             <svg
@@ -76,26 +76,6 @@ export default function DeleteGroup({action, situation, details}) {
               Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={action}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteGroup()}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -116,6 +96,26 @@ export default function DeleteGroup({action, situation, details}) {
             ))}
           {/* End of error or success display */}
         </div>
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteGroup()}
+                type="button"
+                className="custom-btn primary-gradient text-white"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   )
diff --git a/src/components/JobGroups/DeleteMember.jsx b/src/components/JobGroups/DeleteMember.jsx
index cff7288..f99ea25 100644
--- a/src/components/JobGroups/DeleteMember.jsx
+++ b/src/components/JobGroups/DeleteMember.jsx
@@ -20,7 +20,7 @@ export default function DeleteMember({action, situation, details}) {
         action={action}
         situation={situation}
     >
-      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             Remove Member
@@ -76,26 +76,6 @@ export default function DeleteMember({action, situation, details}) {
               Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={action}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteMember()}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Remove
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -115,7 +95,27 @@ export default function DeleteMember({action, situation, details}) {
               )
             ))}
           {/* End of error or success display */}
-        </div>
+        </div>          
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteMember()}
+                type="button"
+                className="custom-btn primary-gradient text-white"
+              >
+                Remove
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   )
diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index 21f8126..b7ba2d1 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -256,14 +256,16 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </p>
                 <hr />
                 <button
-                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
+                  className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                   name="market-interest"
                   onClick={ManageInterest}
                 >
                   {" "}
-                  <span>Send</span>
-                  <span>Interest</span>
-                  <span>Request</span>
+                  <div className="w-full flex flex-col justify-between gap-2">
+                    <span>Send</span>
+                    <span>Interest</span>
+                    <span>Request</span>
+                  </div>
                 </button>
                 <>
                   {manageInt.loading ? (
diff --git a/src/components/MyActiveJobs/ActiveJobMessage.jsx b/src/components/MyActiveJobs/ActiveJobMessage.jsx
index 7c681f9..7d27384 100644
--- a/src/components/MyActiveJobs/ActiveJobMessage.jsx
+++ b/src/components/MyActiveJobs/ActiveJobMessage.jsx
@@ -20,7 +20,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
 
   return (
     <div className='flex flex-col justify-between'>
-    <div className="w-full h-full min-h-[400px] max-h-[400px] overflow-y-auto">
+    <div className="w-full h-full min-h-[250px] max-h-[300px] overflow-y-auto">
         <table className="wallet-activity w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>
diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index 1ee51a0..cb97ba4 100644
--- a/src/components/MyActiveJobs/ActiveJobs.jsx
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -12,6 +12,8 @@ import IndexJobActions from "./JobActions/IndexJobActions";
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
+import TabButton from "../customTabs/TabButton";
+import AttachFile from "../attachmentCom/AttachFile";
 
 function ActiveJobs(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -29,7 +31,9 @@ function ActiveJobs(props) {
 
   const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  const [tab, setTab] = useState("message");
+  // const [tab, setTab] = useState("message");
+  const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
+  const [selectedTab, setSelectedTab] = useState(tabs[0]);
 
   const [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -93,9 +97,9 @@ function ActiveJobs(props) {
 
   // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
   const handleClearAll = ({ target: { name } }) => {
-    if (tab == "message") {
+    if (selectedTab == "Send Message") {
       setMessageToSend("");
-    } else if (tab == "files") {
+    } else if (selectedTab == "Send Files") {
       setFilesToSend([]);
     } else {
       return;
@@ -269,9 +273,9 @@ function ActiveJobs(props) {
 
   return (
     <Layout>
-      <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
+      <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-8">
         {/* job title */}
-        <div className="w-full md:w-8/12">
+        <div className="w-full">
           <div className="w-full flex justify-start space-x-3 items-start">
             <button
               type="button"
@@ -320,7 +324,7 @@ function ActiveJobs(props) {
         {/* end of job title */}
 
         {/* job details */}
-        <div className="w-full md:w-4/12">
+        <div className="min-w-[150px]">
           <p className="text-base text-sky-blue">Delivery Detail</p>
           {passDue ? (
             <div className="my-1">
@@ -394,78 +398,119 @@ function ActiveJobs(props) {
 
           {/* TEXTAREA SECTION */}
           <div className="mt-5">
-            <div className="">
-              <div
-                className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
-                // className='ml-7 flex justify-start items-center gap-3'
-              >
-                <button
-                  name="message"
-                  onClick={(e) => setTab(e.target.name)}
-                  className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "message"
-                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                      : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                >
-                  Send Message
-                </button>
-                <button
-                  name="files"
-                  onClick={(e) => setTab(e.target.name)}
-                  className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "files"
-                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                      : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                >
-                  Send Files
-                </button>
-              </div>
-              {tab == "message" ? (
-                <textarea
-                  className="p-4 w-full h-[200px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
-                  // rows="10"
-                  style={{ resize: "none" }}
-                  name="message"
-                  onChange={handleMessageChange}
-                  value={messageToSend}
-                  autoFocus
-                />
-              ) : (
-                <div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
-                  <div className="files">
-                    <label
-                      htmlFor="file"
-                      className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
-                    >
-                      Select Files to Upload
-                    </label>
-                    <input
-                      type="file"
-                      id="file"
-                      accept="image/*"
-                      style={{ display: "none" }}
-                      onChange={handleFileChange}
+            <div className="w-full">
+                {/* switch button */}
+                <div className="grid grid-cols-2">
+                {tabs.map((item) => (
+                    <TabButton 
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
                     />
-                  </div>
-                  <div className="selected_file my-2">
-                    {filesToSend.length > 0 &&
-                      filesToSend.map((item, index) => (
-                        <p key={index} className="flex items-center space-x-2">
-                          <span>{item.name}</span>
-                          <button
-                            name="remove"
-                            onClick={() => handleRemoveImage(item)}
-                            className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
-                          >
-                            x
-                          </button>
-                        </p>
-                      ))}
-                  </div>
+                ))}
+                </div>
+                {/* switch button */}
+                <div className="w-full bg-red-50 overflow-x-auto">
+                  {selectedTab == "Send Message" ? (
+                    <div className="p-2 w-full">
+                      <textarea
+                          className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
+                          // rows="10"
+                          style={{ resize: "none" }}
+                          name="message"
+                          onChange={handleMessageChange}
+                          value={messageToSend}
+                          autoFocus
+                      />
+                    </div>
+                  ) : (
+                  <div className="p-2 w-full">
+                    <div className="p-4 mb-2 h-[150px] text-base text-slate-600">
+                        <div className="files flex">
+                        <label
+                            htmlFor="file"
+                            className="custom-btn btn-gradient text-base text-white"
+                        >
+                            Select Files to Upload
+                        </label>
+                        <input
+                            type="file"
+                            id="file"
+                            accept="image/*"
+                            style={{ display: "none" }}
+                            onChange={handleFileChange}
+                        />
+                        </div>
+                        <div className="selected_file my-2 overflow-y-auto">
+                        {filesToSend.length > 0 &&
+                            filesToSend.map((item, index) => (
+                            <p key={index} className="flex items-center space-x-2">
+                                <span>{item.name}</span>
+                                <button
+                                name="remove"
+                                onClick={() => handleRemoveImage(item)}
+                                className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
+                                >
+                                x
+                                </button>
+                            </p>
+                            ))}
+                        </div>
+                    </div>
+                  </div>
+                  )}
+                  {/* Buttons Sections */}
+                  <div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
+                      <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
+                          <button
+                              type="button"
+                              onClick={handleClearAll}
+                              className="custom-btn border-gradient"
+                          >
+                              <span className="text-gradient">Clear</span>
+                          </button>
+                          {selectedTab == "Send Files" ? (
+                              <button
+                              onClick={sendFile}
+                              type="button"
+                              className="custom-btn btn-gradient text-white"
+                              >
+                              {requestStatus.loading ? (
+                                  <LoadingSpinner size="6" color="sky-blue" />
+                              ) : (
+                                  <>
+                                  <svg
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 24 24"
+                                      width="20"
+                                      height="20"
+                                      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>
+                          ) : (
+                              <button
+                              onClick={sendTaskMessage}
+                              type="button"
+                              className="custom-btn btn-gradient text-white"
+                              >
+                              {requestStatus.loading ? (
+                                  <LoadingSpinner size="6" color="sky-blue" />
+                              ) : (
+                                  <span className="text-white">Send</span>
+                              )}
+                              </button>
+                          )}
+                      </div>
+                  </div>
+                  {/* end of Buttons Sections  */}
                 </div>
-              )}
             </div>
 
             {/* ERROR DISPLAY AND SUBMIT BUTTON */}
@@ -489,63 +534,19 @@ function ActiveJobs(props) {
                 ))}
             </div>
             {/* End of error or success display */}
-
-            {/* Buttons Sections */}
-            <div className="py-2 sm:flex sm:justify-end sm:items-center">
-              <div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
-                <button
-                  type="button"
-                  onClick={handleClearAll}
-                  className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
-                >
-                  <span className="text-gradient">Clear</span>
-                </button>
-                {tab == "files" ? (
-                  <button
-                    onClick={sendFile}
-                    type="button"
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
-                  >
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="6" color="sky-blue" />
-                    ) : (
-                      <>
-                        <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>
-                ) : (
-                  <button
-                    onClick={sendTaskMessage}
-                    type="button"
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
-                  >
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="6" color="sky-blue" />
-                    ) : (
-                      <span className="text-white">Send</span>
-                    )}
-                  </button>
-                )}
-              </div>
-            </div>
-            {/* end of Buttons Sections  */}
           </div>
           {/* END OF TEXTAREA */}
         </div>
 
         {/* MESSAGE SECTION */}
         <div className="w-full lg:w-1/2">
+          <div className="mb-4">
+            <AttachFile
+              data={props.details}
+              showOnData={true}
+              fontSize={'text-lg'}
+            />
+          </div>
           <div className="flex justify-between items-center gap-5">
             <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
               <span>Message</span>
diff --git a/src/components/MyActiveJobs/ActiveJobsMedia.jsx b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
index 3e545eb..b2f12b5 100644
--- a/src/components/MyActiveJobs/ActiveJobsMedia.jsx
+++ b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
@@ -15,6 +15,7 @@ const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
+import TabButton from "../customTabs/TabButton";
 
 function ActiveJobsMedia(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -32,7 +33,9 @@ function ActiveJobsMedia(props) {
 
   const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  const [tab, setTab] = useState("message");
+  // const [tab, setTab] = useState("message");
+  const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
+  const [selectedTab, setSelectedTab] = useState(tabs[0]);
 
   const [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -96,9 +99,9 @@ function ActiveJobsMedia(props) {
 
   // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
   const handleClearAll = ({ target: { name } }) => {
-    if (tab == "message") {
+    if (selectedTab == "Send Message") {
       setMessageToSend("");
-    } else if (tab == "files") {
+    } else if (selectedTab == "Send Files") {
       setFilesToSend([]);
     } else {
       return;
@@ -273,317 +276,290 @@ function ActiveJobsMedia(props) {
   return (
     <MediaLayout
         backpath={props.details.pathname}
-        title={props.details?.title && props.details.title}
-        state={props.details.accountDetails}
+        title={props.details?.title ? props.details.title : ''}
     >
-        {/* job title */}
-            {/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
-                <div className="w-full">
-                    <div className="w-full flex justify-start space-x-3 items-start">
-                        <button
-                        type="button"
-                        className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-                        onClick={() => {
-                            if (props.details.pathname == "/manage-family") {
-                            navigate(
-                                props.details.pathname,
-                                { state: { ...props.details.accountDetails } },
-                                { replace: true }
-                            );
-                            } else {
-                            navigate(props.details.pathname, { 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-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
-                        {props.details?.title && props.details.title}
-                        </h1>
-                    </div>
-                </div>
-            </div> */}
-        {/* end of job title */}
-
-        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
-            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
-            
+      <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+          <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             <div className="mb-4 w-full h-auto">
                 <VideoElement videoId={props?.details?.media_uid} />
             </div>
 
-            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
+            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md xl:flex xl:justify-between gap-4">
                 <div className="w-full flex flex-col justify-between">
-                    <div className="w-full">
-                        <p className="w-full text-base text-right text-sky-blue">
-                        {props?.details && props.details.job_to}
-                        </p>
-                        <div className="text-base tracking-wide">
-                            <p className="font-semibold text-black dark:text-white tracking-wider">
-                                Description:{" "}
-                            </p>
-                            <p className="p-2 ml-8 border-b border-sky-blue">
-                                {props?.details && props.details.description}
-                            </p>
-                        </div>
-                        <div className="mt-6 w-full lg:flex gap-8">
-                            <div className="w-full text-base tracking-wide">
-                                <p className="font-semibold text-black dark:text-white tracking-wider">
-                                    Delivery Detail:{" "}
-                                </p>
-                                <p className="p-2 ml-8">
-                                    {props?.details && props.details.job_description}
-                                </p>
-                            </div>
-                            <div className="my-2 lg:my-0">
-                                <IndexJobActions details={props.details} />
-                            </div>
-                        </div>
-                    </div>
+                  {/* <p className="w-full text-base text-right text-sky-blue">
+                  {props?.details && props.details.job_to}
+                  </p> */}
+                  <div className="text-base tracking-wide">
+                      <p className="font-semibold text-black dark:text-white tracking-wider">
+                          Description:{" "}
+                      </p>
+                      <p className="p-2 ml-8 border-b border-sky-blue">
+                          {props?.details && props.details.description}
+                      </p>
+                  </div>
+                  <div className="mt-6 w-full">
+                      <div className="w-full text-base tracking-wide">
+                          <p className="font-semibold text-black dark:text-white tracking-wider">
+                              Delivery Detail:{" "}
+                          </p>
+                          <p className="p-2 ml-8">
+                              {props?.details && props.details.job_description}
+                          </p>
+                      </div>
+                      {/* <div className="my-2 xl:my-0">
+                          <IndexJobActions details={props.details} />
+                      </div> */}
+                  </div>
                 </div>
 
-                {/* job details */}
-                <div className="w-full md:w-[200px]">
-                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
-                    {passDue ? (
-                        <div className="my-1">
-                            <p className="text-base text-slate-700">
-                                <span className="font-semibold">Due: </span>
-                                {props?.details && props.details.delivery_date.split(" ")[0]}
-                            </p>
-                            {props?.delivery_date && (
-                                <p className="py-2 text-base text-slate-700">
-                                {props.details.delivery_date.split(" ")[1]}
-                                </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 tracking-wide">
-                                <CountDown
-                                    lastDate={props?.details && props.details.delivery_date}
-                                />
-                                </p>
-                                <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
-                                <span>Hrs</span>
-                                <span>Min</span>
-                                <span>Sec</span>
-                                </div>
-                            </div>
-                        </div>
-                    )}
+                <div className="flex justify-between items-center gap-1 xl:min-w-[350px]">
+                  <div className="h-[150px] xl:h-full w-[150px] xl:min-w-[150px]">
+                      <IndexJobActions details={props.details} />
+                  </div>
+                  {/* job details */}
+                  <div className="min-w-[170px] flex flex-col justify-center gap-2">
+                      {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
+                      {passDue ? (
+                          <div className="my-1">
+                              <p className="text-base text-slate-700">
+                                  <span className="font-semibold">Due: </span>
+                                  {props?.details && props.details.delivery_date.split(" ")[0]}
+                              </p>
+                              {props?.delivery_date && (
+                                  <p className="py-2 text-base text-slate-700">
+                                  {props.details.delivery_date.split(" ")[1]}
+                                  </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 tracking-wide">
+                                  <CountDown
+                                      lastDate={props?.details && props.details.delivery_date}
+                                  />
+                                  </p>
+                                  <div className="text-base text-slate-700 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 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Reward:{" "}
-                        </span>
-                        <span className="">{thePrice}</span>
-                    </div>
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Reward:{" "}
+                          </span>
+                          <span className="">{thePrice}</span>
+                      </div>
 
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        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 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        No:{" "}
-                        </span>
-                        <span className="">
-                        {props.details?.contract && props.details.contract}
-                        </span>
-                    </div> */}
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Duration:{" "}
+                          </span>
+                          <span className="">
+                          {props.details?.timeline_days && props.details.timeline_days}{" "}
+                          day(s)
+                          </span>
+                      </div>
+                  </div>
+                  {/* end of job details */}
                 </div>
-                {/* end of job details */}
-            </div>
             </div>
+          </div>
 
-            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
-                {/* TEXTAREA SECTION */}
-                <div className="w-full mb-3">
-                    <div className="w-full">
-                        <div className="pl-7 flex items-center gap-3">
-                            <button
+          <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+              {/* TEXTAREA SECTION */}
+              <div className="w-full mb-3">
+                  <div className="w-full">
+                      {/* <div className="pl-7 flex items-center gap-3">
+                          <button
+                              name="message"
+                              onClick={(e) => setTab(e.target.name)}
+                              className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                              tab == "message"
+                                  ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                  : "bg-white text-[#000] border-t-[2px]"
+                              }`}
+                          >
+                              Send Message
+                          </button>
+                          <button
+                              name="files"
+                              onClick={(e) => setTab(e.target.name)}
+                              className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                              tab == "files"
+                                  ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                  : "bg-white text-[#000] border-t-[2px]"
+                              }`}
+                          >
+                              Send Files
+                          </button>
+                      </div> */}
+                      {/* switch button */}
+                      <div className="grid grid-cols-2">
+                      {tabs.map((item) => (
+                          <TabButton 
+                              key={item}
+                              item={item}
+                              selectedTab={selectedTab}
+                              setSelectedTab={setSelectedTab}
+                          />
+                      ))}
+                      </div>
+                      {/* switch button */}
+                      <div className="w-full bg-red-50 overflow-x-auto">
+                        {selectedTab == "Send Message" ? (
+                          <div className="p-2 w-full">
+                            <textarea
+                                className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
+                                // rows="10"
+                                style={{ resize: "none" }}
                                 name="message"
-                                onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
-                                tab == "message"
-                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                                    : "bg-white text-[#000] border-t-[2px]"
-                                }`}
-                            >
-                                Send Message
-                            </button>
-                            <button
-                                name="files"
-                                onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
-                                tab == "files"
-                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                                    : "bg-white text-[#000] border-t-[2px]"
-                                }`}
-                            >
-                                Send Files
-                            </button>
-                        </div>
-                        {tab == "message" ? (
-                        <textarea
-                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
-                            // rows="10"
-                            style={{ resize: "none" }}
-                            name="message"
-                            onChange={handleMessageChange}
-                            value={messageToSend}
-                            autoFocus
-                        />
-                        ) : (
-                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
-                            <div className="files flex">
-                            <label
-                                htmlFor="file"
-                                className="custom-btn btn-gradient text-base text-white"
-                            >
-                                Select Files to Upload
-                            </label>
-                            <input
-                                type="file"
-                                id="file"
-                                accept="image/*"
-                                style={{ display: "none" }}
-                                onChange={handleFileChange}
+                                onChange={handleMessageChange}
+                                value={messageToSend}
+                                autoFocus
                             />
-                            </div>
-                            <div className="selected_file my-2 overflow-y-auto">
-                            {filesToSend.length > 0 &&
-                                filesToSend.map((item, index) => (
-                                <p key={index} className="flex items-center space-x-2">
-                                    <span>{item.name}</span>
-                                    <button
-                                    name="remove"
-                                    onClick={() => handleRemoveImage(item)}
-                                    className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
-                                    >
-                                    x
-                                    </button>
-                                </p>
-                                ))}
-                            </div>
+                          </div>
+                        ) : (
+                        <div className="p-2 w-full">
+                          <div className="p-4 mb-2 h-[150px] text-base text-slate-600">
+                              <div className="files flex">
+                              <label
+                                  htmlFor="file"
+                                  className="custom-btn btn-gradient text-base text-white"
+                              >
+                                  Select Files to Upload
+                              </label>
+                              <input
+                                  type="file"
+                                  id="file"
+                                  accept="image/*"
+                                  style={{ display: "none" }}
+                                  onChange={handleFileChange}
+                              />
+                              </div>
+                              <div className="selected_file my-2 overflow-y-auto">
+                              {filesToSend.length > 0 &&
+                                  filesToSend.map((item, index) => (
+                                  <p key={index} className="flex items-center space-x-2">
+                                      <span>{item.name}</span>
+                                      <button
+                                      name="remove"
+                                      onClick={() => handleRemoveImage(item)}
+                                      className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
+                                      >
+                                      x
+                                      </button>
+                                  </p>
+                                  ))}
+                              </div>
+                          </div>
                         </div>
                         )}
-                    </div>
-
-                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                    <div className="w-full">
-                        {/* error or success display */}
-                        {requestStatus.message != "" &&
-                        (!requestStatus.status ? (
-                            <div
-                            className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                            >
-                            {requestStatus.message}
-                            </div>
-                        ) : (
-                            requestStatus.status && (
-                            <div
-                                className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                            >
-                                {requestStatus.message}
-                            </div>
-                            )
-                        ))}
-                    </div>
-                    {/* End of error or success display */}
-
-                    {/* Buttons Sections */}
-                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
-                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
-                            <button
-                                type="button"
-                                onClick={handleClearAll}
-                                className="custom-btn border-gradient"
-                            >
-                                <span className="text-gradient">Clear</span>
-                            </button>
-                            {tab == "files" ? (
+                        {/* Buttons Sections */}
+                        <div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
+                            <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
                                 <button
-                                onClick={sendFile}
-                                type="button"
-                                className="custom-btn btn-gradient text-white"
+                                    type="button"
+                                    onClick={handleClearAll}
+                                    className="custom-btn border-gradient"
                                 >
-                                {requestStatus.loading ? (
-                                    <LoadingSpinner size="6" color="sky-blue" />
-                                ) : (
-                                    <>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 24 24"
-                                        width="20"
-                                        height="20"
-                                        fill="white"
+                                    <span className="text-gradient">Clear</span>
+                                </button>
+                                {selectedTab == "Send Files" ? (
+                                    <button
+                                    onClick={sendFile}
+                                    type="button"
+                                    className="custom-btn btn-gradient text-white"
                                     >
-                                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
-                                    </svg>
+                                    {requestStatus.loading ? (
+                                        <LoadingSpinner size="6" color="sky-blue" />
+                                    ) : (
+                                        <>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 24 24"
+                                            width="20"
+                                            height="20"
+                                            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>
-                            ) : (
-                                <button
-                                onClick={sendTaskMessage}
-                                type="button"
-                                className="custom-btn btn-gradient text-white"
-                                >
-                                {requestStatus.loading ? (
-                                    <LoadingSpinner size="6" color="sky-blue" />
+                                        <span className="text-white">Upload Files</span>
+                                        </>
+                                    )}
+                                    </button>
                                 ) : (
-                                    <span className="text-white">Send</span>
+                                    <button
+                                    onClick={sendTaskMessage}
+                                    type="button"
+                                    className="custom-btn btn-gradient text-white"
+                                    >
+                                    {requestStatus.loading ? (
+                                        <LoadingSpinner size="6" color="sky-blue" />
+                                    ) : (
+                                        <span className="text-white">Send</span>
+                                    )}
+                                    </button>
                                 )}
-                                </button>
-                            )}
+                            </div>
                         </div>
-                    </div>
-                    {/* end of Buttons Sections  */}
-                </div>
-                {/* END OF TEXTAREA */}
+                        {/* end of Buttons Sections  */}
+                      </div>
+                  </div>
 
-                {/* MESSAGE SECTION */}
-                <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
-                    <div className="flex justify-between items-center gap-5">
-                        <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
-                        <span>Message</span>
-                        <button
-                        type="button"
-                        onClick={popUpHandler}
-                        className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
-                        >
-                        View all
-                        </button>
-                        </p>
-                    </div>
-                    {props.activeJobMesList.loading ? (
-                        <LoadingSpinner size="16" color="sky-blue" />
-                    ) : (
-                        <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
-                    )}
-                </div>
-                {/* END OF MESSAGE */}
-            </div>
-        </div>
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="w-full">
+                      {/* error or success display */}
+                      {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
+                          <div
+                          className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                          {requestStatus.message}
+                          </div>
+                      ) : (
+                          requestStatus.status && (
+                          <div
+                              className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                              {requestStatus.message}
+                          </div>
+                          )
+                      ))}
+                  </div>
+                  {/* End of error or success display */}
+              </div>
+              {/* END OF TEXTAREA */}
+
+              {/* MESSAGE SECTION */}
+              <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
+                  <div className="flex justify-between items-center gap-5">
+                      <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
+                      <span>Message</span>
+                      <button
+                      type="button"
+                      onClick={popUpHandler}
+                      className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
+                      >
+                      View all
+                      </button>
+                      </p>
+                  </div>
+                  {props.activeJobMesList.loading ? (
+                      <LoadingSpinner size="16" color="sky-blue" />
+                  ) : (
+                      <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
+                  )}
+              </div>
+              {/* END OF MESSAGE */}
+          </div>
+      </div>
 
       {/* POPOUT SECTION */}
       {popUp && (
diff --git a/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx b/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
index 924831f..7877744 100644
--- a/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
@@ -60,12 +60,12 @@ function CurrentTaskAction({jobDetails}) {
     }
 
   return (
-    <div className='dark:bg-black'>
+    <div className='h-full dark:bg-black'>
 
-          <div className="w-full text-sm text-left text-gray-500">
+          <div className="h-full w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
-            <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
+            <div className="h-full flex justify-center items-center">
+                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>
diff --git a/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx b/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
index 9ef169e..0d22c4f 100644
--- a/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
                         <button 
                             type="button" 
                             onClick={popUpHandler} 
-                            className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            className="custom-btn btn-gradient text-base text-white"
                         >
                             Cancel or Extend Timeline
                         </button>
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {
 
         {popUp && (
             <ModalCom action={popUpHandler} situation={popUp}>
-                <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-                    <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-                        <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                <div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+                    <div className="modal-header-con">
+                        <h1 className="modal-title">
                         Past Due Task
                         </h1>
                         <button
                         type="button"
-                        className="text-[#374557] dark:text-red-500"
+                        className="modal-close-btn"
                         onClick={popUpHandler}
                         >
                           <svg
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
                             </svg>
                         </button>
                     </div>
-                    <div className="job-action-modal-body w-full px-10 py-8 gap-4">
+                    <div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
                         <div className="w-full flex flex-col items-center">
                             <div className="mb-5 flex justify-center items-center gap-2">
                                 <input 
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
                                     onChange={()=>{setChecked(prev => !prev)}} 
                                     className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
                                 />
-                                <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>I am ready to cancel this task</p>
+                                <p className='job-label'>I am ready to cancel this task</p>
                             </div>
 
-                            <div className="mb-5 flex justify-center items-center">
+                            <div className="mb-5 w-full flex justify-end items-center">
                                 {reqStatus.loading && action=='cancel'?
                                     <LoadingSpinner color='sky-blue' size='10' />
                                 :
-                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
+                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
                                         <span className='text-gradient'>Cancel this task</span>
                                     </button>
                                 }
                             </div>
 
                             {/* EXTEND TIMELINE SECTION */}
-                            <div className='w-full my-3 py-3 border-y flex flex-col items-center'>
+                            <div className='w-full my-3 py-3 border-t flex flex-col items-center'>
                                 <div className='mb-5 flex items-center gap-2'>
-                                    <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>Extend the timeline by:</p>
+                                    <p className='job-label'>Extend the timeline by:</p>
                                     <select 
                                         onChange={({target})=>{setExtendedTime(target.value)}}
-                                        className='text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0'
+                                        className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
                                     >
                                         <option className='text-slate-500 text-lg' value=''>select</option>
                                         <option className='text-slate-500 text-lg' value='2'>1 days</option>
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
                                 {reqStatus.loading && action=='extend' ?
                                     <LoadingSpinner color='sky-blue' size='10' />
                                 :
-                                <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                                    Extend Timeline
-                                </button>
+                                <div className='w-full flex justify-end items-center'>
+                                    <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
+                                        Extend Timeline
+                                    </button>
+                                </div>
 }                               
                             </div>
 
                             {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
-                            <div className="w-full">
+                            <div className="w-full absolute left-0 bottom-0 text-center">
                             {reqStatus.message != "" &&
                                 (!reqStatus.status ? (
                                 <div
-                                    className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                    className={`relative p-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                 >
                                     {reqStatus.message}
                                 </div>
                                 ) : (
                                 reqStatus.status && (
                                     <div
-                                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                    className={`relative p-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                     >
                                     {reqStatus.message}
                                     </div>
@@ -232,17 +234,17 @@ function PastDueJobAction({jobDetails}) {
                             {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
                         </div>
                         
-                        {/* cancel btn */}
-                        <div className='flex justify-end items-center'>
-                            <button onClick={popUpHandler} type="button" 
-                                // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
-                                className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
-                            >
-                                Cancel
-                                {/* <span className='text-gradient'>Cancel</span> */}
-                            </button>
-                        </div>
                     </div> 
+                    {/* cancel btn */}
+                    <div className='modal-footer-wrapper flex justify-center items-center'>
+                        <button onClick={popUpHandler} type="button" 
+                            // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                            className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
+                        >
+                            Cancel
+                            {/* <span className='text-gradient'>Cancel</span> */}
+                        </button>
+                    </div>
                 </div>
             </ModalCom>
         )}
diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index 1e94fd8..fd44f72 100644
--- a/src/components/MyJobs/MyJobTable.jsx
+++ b/src/components/MyJobs/MyJobTable.jsx
@@ -7,13 +7,14 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
-import EditJobPopOut from "../jobPopout/EditJobPopout";
+// 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";
+import EditJobPopoutNew from "../jobPopout/EditJobPopoutNew";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const dispatch = useDispatch();
@@ -182,7 +183,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       {/* END of Delete Job Popout */}
 
       {editJob.show && (
-        <EditJobPopOut
+        <EditJobPopoutNew
           details={editJob.data}
           onClose={() => {
             setEditJob({
diff --git a/src/components/MyTasks/MyOffersFamilyTable.jsx b/src/components/MyTasks/MyOffersFamilyTable.jsx
index c8d4211..d0631b5 100644
--- a/src/components/MyTasks/MyOffersFamilyTable.jsx
+++ b/src/components/MyTasks/MyOffersFamilyTable.jsx
@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
             </div>
           </div>
           {/* trending products */}
-          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
+          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
             <SliderCom selector={trendingSlider} settings={settings}>
               {familyOffers &&
                 familyOffers.length > 0 &&
diff --git a/src/components/MyWallet/Popup/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx
index b981dcd..489f6f2 100644
--- a/src/components/MyWallet/Popup/AddFundDollars.jsx
+++ b/src/components/MyWallet/Popup/AddFundDollars.jsx
@@ -260,13 +260,13 @@ function AddFundDollars(props) {
         {/* switch button */}
         <div className="flex">
           <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+            <h1 className="job-label my-1">
               {countryWallet == "US" && "Payment Method"}
             </h1>
             <div className="my-1 flex items-center gap-2">
               <label
                 htmlFor="previous"
-                className="cursor-pointer flex items-center gap-1"
+                className="flex items-center gap-1"
               >
                 <input
                   type="radio"
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
               </label>
               <label
                 htmlFor="new"
-                className={`cursor-pointer flex items-center gap-1 ${
+                className={`flex items-center gap-1 ${
                   payListCards.data.length >= MaxNoOfCards
                     ? "pointer-events-none"
                     : ""
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
                               {/* Inputs */}
                               {/* Name */}
                               <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
-                                <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                <label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
                                   Name:
                                 </label>
                                 <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
                                         className={`flex items-center justify-between mb-2.5`}
                                       >
                                         <label
-                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                           htmlFor="expiration"
                                         >
                                           Exp Month{" "}
diff --git a/src/components/MyWallet/Popup/AddFundPop.jsx b/src/components/MyWallet/Popup/AddFundPop.jsx
index 5b41611..30d20dc 100644
--- a/src/components/MyWallet/Popup/AddFundPop.jsx
+++ b/src/components/MyWallet/Popup/AddFundPop.jsx
@@ -131,7 +131,7 @@ function AddFundPop({
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              <h1 className="job-label my-1">
                 Amount({currency})
               </h1>
               <div className="field w-full max-w-[250px]">
diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
index 64f92c8..8dcb17c 100644
--- a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
+++ b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
@@ -9,7 +9,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
   return (
     <div className="logout-modal-body w-full">
-      <div className="content-wrapper w-full h-[32rem]">
+      <div className="content-wrapper w-full h-[32rem] flex flex-col justify-center">
         <div className="w-full mb-10">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <div className="px-4 md:p-8 py-4 add-fund-info">
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                     </svg>
                   </div>
 
-                  <div className="flex items-center">
+                  <div className="w-full flex justify-center items-center">
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                       {isSuccess
                         ? "Credit was Successful!"
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
                   {data?.internal_return >= 0 &&
                     data?.result !== "Charge failed" && (
-                      <>
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <div className="w-full max-w-[300px] mx-auto">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                             Amount({data?.currency || ""})
                           </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {`${data?.symbol || ""} ${
-                              Number(data?.amount * 0.01).toLocaleString() || ""
+                              Number(data?.amount * 0.01).toFixed(2) || ""
                             }`}
                           </span>
                         </div>
                         
                         {data?.curr_balance &&
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                             Wallet Balance
                           </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                            {data?.curr_balance * 0.01}
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                            {(data?.curr_balance * 0.01).toFixed(2)}
                           </span>
                         </div>
                         }
 
                         {isSuccess && (
-                          <div className="flex items-center gap-8">
-                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <div className="flex gap-8 my-2">
+                            <h1 className="w-full job-label">
                               Confirmation Number
                             </h1>
-                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                               {data?.confirmation}
                             </span>
                           </div>
                         )}
-                      </>
-                    )}
+                      </div>
+                    )
+                  }
                 </div>
               </div>
             </div>
diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
index 37f414a..031fcd0 100644
--- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
   return (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+        <h1 className="text-base">
           {description} Card
         </h1>
-        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+        <p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
           Bank **************{digits}
         </p>
       </div>
@@ -46,14 +46,14 @@ function ThePaymentText({ value, type }) {
  */
 function AmountSection({ currency, amount, country }) {
   const formattedAmount = (+amount * 0.01)?.toFixed(2);
-  const gapClassName = country === "US" ? "gap-14" : "gap-4";
 
   return (
-    <div className={`flex items-center ${gapClassName}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
+      <h1 className="min-w-[150px] job-label">
         Amount({currency})
       </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
       </span>
     </div>
@@ -66,14 +66,13 @@ function AmountSection({ currency, amount, country }) {
  */
 function TransactionFeeSection({ currency, fee, country }) {
   const formattedFee = (+fee).toFixed(2);
-  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
 
   return (
-    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8 border-b border-gray-600`}>
+      <h1 className="min-w-[150px] job-label">
         Transaction Fee
       </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedFee}
       </span>
     </div>
@@ -89,14 +88,12 @@ function TotalSection({ currency, amount, fee, country }) {
   const total = Number(amount) + Number(fee);
   const formattedTotal = (total * 0.01)?.toFixed(2);
 
-  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
-
   return (
-    <div className={`flex items-center ${gap}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      <h1 className="min-w-[150px] job-label">
         Total
       </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}
       </span>
     </div>
@@ -384,7 +381,7 @@ function ConfirmAddFund({
                       <div className="flex items-center gap-8">
                         <label
                           htmlFor="payment"
-                          className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                          className="min-w-[150px] job-label"
                         >
                           Payment Method
                         </label>
@@ -397,17 +394,14 @@ function ConfirmAddFund({
                       </div>
                     )}
                     <div
-                      className={`${
-                        __confirmCountry === "US"
-                          ? "gap-[3.7rem]"
-                          : "gap-[1.81rem]"
-                      } flex items-center`}
+                      className={`gap-8 flex items-center`}
                     >
-                      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <h1 className="min-w-[150px] job-label">
                         Reference No
                       </h1>
-                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                        {__confirmData?.credit_reference}
+                      <span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                        {/* Displays only half of the string */}
+                        {__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
                       </span>
                     </div>
                   </div>
diff --git a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
index 08f9f5b..b68567b 100644
--- a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
+++ b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
@@ -58,13 +58,12 @@ function ConfirmNairaWithdraw({
       .sendMoney(reqData)
       .then((res) => {
         if (res.data.internal_return < 0) {
-          // if (res.data?.status_message?.toLowerCase().includes("limit")) {
-          //   setRequestStatus({
-          //     message: ,
-          //     loading: false,
-          //     status: false,
-          //   });
-          // }
+          setRequestStatus({
+            message: 'Unable to complete, try again',
+            loading: false,
+            status: false,
+          });
+
           return setTimeout(() => {
             setRequestStatus({
               message: "",
@@ -79,19 +78,19 @@ function ConfirmNairaWithdraw({
           }, 5000);
         }
 
+        setRequestStatus({
+          message: "Withdrawal sucessful",
+          loading: false,
+          status: true,
+        });
+        setShowCompleteNairaWithdraw({
+          show: true,
+          load: false,
+          state: res.data,
+        });
         setTimeout(() => {
-          setRequestStatus({
-            message: "",
-            loading: false,
-            status: false,
-          });
-          setShowCompleteNairaWithdraw({
-            show: true,
-            load: false,
-            state: res.data,
-          });
+          dispatch(tableReload({ type: "WALLETTABLE" }));
         }, 5000);
-        dispatch(tableReload({ type: "WALLETTABLE" }));
         return;
       })
       .catch((error) => {
@@ -105,7 +104,7 @@ function ConfirmNairaWithdraw({
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="modal-header-con">
             <h2 className="modal-title">
@@ -381,23 +380,23 @@ function ConfirmNairaWithdraw({
           {!completeNairaWithdraw.load && (
             <>
               <p
-                className={`text-base ${
-                  requestStatus.status ? "text-green-500" : "text-red-500"
-                } px-4 md:px-8 py-4 h-5`}
+                className={`text-lg text-center font-bold ${
+                  requestStatus.status ? "text-emerald-600" : "text-red-500"
+                } px-4 md:px-8 py-4`}
               >
                 {requestStatus.message && requestStatus.message}
               </p>
               <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
                 <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
-                  {!completeNairaWithdraw.show && (
-                    <button
-                      type="button"
-                      onClick={action}
-                      className="custom-btn bg-[#f5a430] text-black text-base"
-                    >
-                      Cancel
-                    </button>
-                  )}
+
+                  <button
+                    type="button"
+                    onClick={action}
+                    className="custom-btn bg-[#f5a430] text-black text-base"
+                  >
+                    Cancel
+                  </button>
+
 
                   <button
                     onClick={
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index c7a596f..45244e4 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/src/components/MyWallet/Popup/CreditPopup.jsx
@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundPop from "./AddFundPop";
 import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
+import CustomTimer from "../../countdown/CustomTimer";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
   const [input, setInput] = useState("");
@@ -33,9 +34,8 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     <ModalCom
       action={onClose}
       situation={situation}
-      className="assign-task-popup"
     >
-      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             {confirmCredit?.show?.acceptConfirm?.loader
@@ -71,7 +71,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
         <div className="w-full">
           {confirmCredit?.show?.acceptConfirm?.loader ? (
             <div className="h-[32rem] flex items-center justify-center">
-              <LoadingSpinner size="12" color="sky-blue" />
+              <div className="h-[32rem] flex flex-col items-center justify-center gap-4">
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
+                <LoadingSpinner size="6" color="sky-blue" height='h-20' />
+                {/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
+                <CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
+              </div>
             </div>
           ) : (
             <>
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx
index 4ce4067..32d6dbc 100644
--- a/src/components/MyWallet/Popup/NairaWithdraw.jsx
+++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx
@@ -290,7 +290,7 @@ function NairaWithdraw({
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="modal-header-con">
             <h1 className="modal-title">
@@ -330,13 +330,13 @@ function NairaWithdraw({
                   <Form className="transfer-fund-info">
                     <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
                       {/* Amount Form */}
-                      <div className="flex flex-col">
+                      <div className="flex flex-col gap-2">
                         <div className="field w-full">
                           <InputCom
                             fieldClass="px-4 text-end"
-                            parentClass="flex items-center gap-1 justify-between"
-                            labelClass="flex-[0.4] mb-0"
-                            inputClass="flex-[0.6] max-w-[12rem]"
+                            parentClass="flex items-center gap-1"
+                            labelClass="flex-[0.2] mb-0"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                             label="Amount:"
                             type="number"
                             name="amount"
@@ -352,10 +352,10 @@ function NairaWithdraw({
 
                         <div className="field w-full">
                           <InputCom
-                            fieldClass="px-4 transfer-field"
-                            parentClass="flex items-center gap-1 justify-between"
+                            fieldClass="px-4"
+                            parentClass="flex items-center gap-1"
                             labelClass="flex-[0.2] mb-0"
-                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                             label="Fee:"
                             type="text"
                             name="fee"
@@ -371,10 +371,10 @@ function NairaWithdraw({
 
                         <div className="field w-full">
                           <InputCom
-                            fieldClass="px-4 transfer-field"
-                            parentClass="flex items-center gap-1 justify-between"
+                            fieldClass="px-4"
+                            parentClass="flex items-center gap-1"
                             labelClass="flex-[0.2] mb-0"
-                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                             label="Total:"
                             type="text"
                             name="total"
@@ -414,7 +414,7 @@ function NairaWithdraw({
                           <label
                             onClick={() => setTab("previous")}
                             htmlFor="previous"
-                            className="cursor-pointer flex items-center gap-1"
+                            className="cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white"
                           >
                             <input
                               type="radio"
@@ -431,7 +431,7 @@ function NairaWithdraw({
                           <label
                             onClick={() => setTab("new")}
                             htmlFor="new"
-                            className={`cursor-pointer flex items-center gap-1 ${
+                            className={`cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white ${
                               recipients.data.length >= MaxNoOfBanks
                                 ? "pointer-events-none"
                                 : ""
@@ -545,7 +545,7 @@ function NairaWithdraw({
                               <LoadingSpinner size="10" color="sky-blue" />
                             </div>
                           ) : recipients.data.length < MaxNoOfBanks ? (
-                            <div className="w-full mt-3 rounded-md bg-slate-100">
+                            <div className="w-full mt-3 rounded-md bg-slate-100 dark:bg-dark-white">
                               <div className="relative fields w-full flex flex-col p-4">
                                 <div className="flex flex-[2] min-h-[52px]">
                                   {/* country */}
@@ -557,7 +557,7 @@ function NairaWithdraw({
                                       Country{" "}
                                       <span className="text-red-500">*</span>
                                     </label>
-                                    <div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
+                                    <div className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
                                       <span className="text-slate-500 text-lg italic">
                                         {wallet.walletCountry[0]?.country}
                                       </span>
@@ -619,7 +619,7 @@ function NairaWithdraw({
                                       <span className="text-red-500">*</span>
                                     </label>
                                     <select
-                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
+                                      className="w-full text-base p-2 bg-white dark:bg-[#11131F] text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
                                       name="newAccount.bank"
                                       value={props.values.newAccount?.bank}
                                       onChange={props.handleChange}
@@ -698,7 +698,7 @@ function NairaWithdraw({
                                       Type <span className="text-red-500">*</span>
                                     </label>
                                     <select
-                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
+                                      className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
                                       name="newAccount.accountType"
                                       value={props.values.newAccount?.accountType}
                                       onChange={props.handleChange}
diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx
index 93de4b7..b2f86ea 100644
--- a/src/components/MyWallet/WalletAction.jsx
+++ b/src/components/MyWallet/WalletAction.jsx
@@ -16,21 +16,21 @@ function WalletAction({ walletItem, payment, openPopUp }) {
 
   return (
     <div className="counters w-full flex justify-between gap-2">
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-start items-center">
         <button
           onClick={() => {
             setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
           }}
           className={`${
             walletItem.code != "NAIRA" && "invisible"
-          } custom-btn btn-gradient text-white`}
+          } logout-btn btn-gradient text-white`}
         >
           Spend
         </button>
       </div>
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-end items-center">
         <button
-          className="custom-btn btn-gradient text-white"
+          className="logout-btn btn-gradient text-white"
           onClick={() => {
             openPopUp({
               payment: payment,
@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
             });
           }}
         >
-          <span className="">Add Credit</span>
+          Add Credit
         </button>
       </div>
 
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index cd6f636..15efc15 100644
--- a/src/components/MyWallet/WalletBox.jsx
+++ b/src/components/MyWallet/WalletBox.jsx
@@ -15,14 +15,14 @@ export default function WalletBox({ wallet, payment, countries }) {
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
-        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
+        <div className="balance-inquery w-auto grid md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size="16" color="sky-blue" />
             </div>
           ) : (
             data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+              <div key={item.wallet_uid} className="w-full md:max-w-[450px] h-full mb-10 lg:mb-0">
                 <WalletItemCard walletItem={item} payment={payment} countries={countries} />
               </div>
             ))
diff --git a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
index 9c847f7..c1fa34d 100644
--- a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+++ b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
@@ -24,7 +24,7 @@ function RecentActivityTable({ payment }) {
           <thead className="border-b-2">
             <tr className="text-slate-600">
               <th className="p-2">Date</th>
-              <th className="p-4">Trx.</th>
+              <th className="p-2">Trx.</th>
               <th className="p-2">Amnt./Fee</th>
               <th className="p-2">Status</th>
             </tr>
diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx
index 4b3ce3f..99c29ed 100644
--- a/src/components/MyWallet/WalletItemCard.jsx
+++ b/src/components/MyWallet/WalletItemCard.jsx
@@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
@@ -81,12 +81,12 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
               walletItem.escrow * 0.01,
               walletItem.code,
               undefined,
-              "text-[2rem]"
+              "text-[1.5rem]"
             )}
           </span>
         </p>
 
-        <div className="my-2 w-full h-[1px] bg-white"></div>
+        <div className="w-full h-[1px] bg-white"></div>
 
         <WalletAction
           walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx
index f9f58e6..1c08db1 100644
--- a/src/components/Partials/Layout.jsx
+++ b/src/components/Partials/Layout.jsx
@@ -31,54 +31,34 @@ export default function Layout({ children }) {
     navigate("/login", { replace: true });
   };
 
-  //---------------------------------------
-  /* LET U DEAL WITH JOB LIST - we need to centralize this list  */
-  // const {jobListTable} = useSelector((state) => state.tableReload)
-  // const [myJobList, setMyJobList] = useState({loading: true, data:[]});
-  // const api = new usersService();
-
-  // const getMyJobList = async () => {
-  //   setMyJobList({loading: true, data:[]})
-  //   try {
-  //     const res = await api.getMyJobList();
-  //     setMyJobList({loading: false, data:res.data})
-  //     // setMyJobList(res.data);
-  //   } catch (error) {
-  //     setMyJobList({loading: false, data:[]})
-  //     console.log("Error getting mode");
-  //   }
-  // };
-  // useEffect(() => {
-  //   getMyJobList();
-  // }, [jobListTable]);
-
   return (
     <>
-      <div className="nft-main-wrapper-layout w-full mx-auto">
-        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+      <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
+        <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
           {/* sidebar */}
-          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
+          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-screen overflow-y-scroll overflow-style-none sticky left-0 top-0 pt-[30px]`}>
             <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
           </div>
           {MobileSideBar && (
             <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>
           )}
-          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
+          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] 2xl:pl-20 pl-10 pr-6 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
             <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />
           </div>
           {/* end sidebar */}
-          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
+          {/* FORMER CLASS NAME `w-full nft-header-container-wrapper ${drawer ? "2xl:ml-[335px] xl:ml-[280px]" : "xl:ml-[70px]"} h-full` */}
+          <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
             {/* header */}
             <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
-              <div className="flex-[80%] w-full">
+            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
+              <div className="flex-[80%] 2xl:flex-[85%] w-full">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
+              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>
@@ -87,7 +67,7 @@ export default function Layout({ children }) {
       </div>
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
-          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="modal-header-con">
               <h1 className="modal-title">
                 Confirm
diff --git a/src/components/Partials/MediaHeader.jsx b/src/components/Partials/MediaHeader.jsx
index a167768..612b775 100644
--- a/src/components/Partials/MediaHeader.jsx
+++ b/src/components/Partials/MediaHeader.jsx
@@ -19,7 +19,7 @@ import TimeDifference from "../Helpers/TimeDifference";
 
 const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
 
-export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, state, title }) {
+export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, title }) {
 
   const darkMode = useContext(DarkModeContext);
 
@@ -172,7 +172,6 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
             onClick={() => {
                 if (backpath == "/manage-family") {
                 navigate(backpath,
-                    { state: { ...state} },
                     { replace: true }
                 );
                 } else {
diff --git a/src/components/Partials/MediaLayout.jsx b/src/components/Partials/MediaLayout.jsx
index f76d824..fdf806a 100644
--- a/src/components/Partials/MediaLayout.jsx
+++ b/src/components/Partials/MediaLayout.jsx
@@ -10,7 +10,7 @@ import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
 import MediaHeader from "./MediaHeader";
 
-export default function MediaLayout({backpath, title, state, children }) {
+export default function MediaLayout({backpath, title, children }) {
     const { drawer } = useSelector((state) => state.drawer);
     const { userJobList } = useSelector((state) => state.userJobList);
     const dispatch = useDispatch();
@@ -53,32 +53,18 @@ export default function MediaLayout({backpath, title, state, children }) {
 
     return (
         <>
-            <div className="nft-main-wrapper-layout media">
-                <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
-                    {/* sidebar */}
-                    {/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
-                    {/*    <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />*/}
-                    {/*</div>*/}
-                    {/*{MobileSideBar && (*/}
-                    {/*    <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>*/}
-                    {/*)}*/}
-                    {/*<div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>*/}
-                    {/*    <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />*/}
-                    {/*</div>*/}
-                    {/* end sidebar */}
-                    <div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px]  h-full`}>
+            <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
+                <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
+                    <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
                         {/* header */}
-                        <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
-                            <MediaHeader backpath={backpath} title={title} state={state} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
+                        <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0">
+                            <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
-                        <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+                        <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
                             <div className="nft-main-container_media flex-[100%] w-full">
                                 {children && children}
                             </div>
-                            {/*<div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">*/}
-                            {/*    <RightSideBar myJobList={userJobList} />*/}
-                            {/*</div>*/}
                         </div>
                     </div>
                 </div>
diff --git a/src/components/Partials/RightSideBar.jsx b/src/components/Partials/RightSideBar.jsx
index 576fbf2..268b10b 100644
--- a/src/components/Partials/RightSideBar.jsx
+++ b/src/components/Partials/RightSideBar.jsx
@@ -40,7 +40,7 @@ export default function RightSideBar({ myJobList }) {
   return (
     <>
       <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
-        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-6 2xl:border-none border ">
+        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 w-full 2xl:mb-6 2xl:border-none border ">
           {/* heading */}
           <div className="heading flex justify-between items-center mb-3.5">
             <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
@@ -280,7 +280,7 @@ export default function RightSideBar({ myJobList }) {
         {/*JOB LINKS*/}
         {userDetails?.account_type !== "FAMILY" &&
           myJobList?.data?.result_list?.length > 0 && (
-            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
+            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 w-full 2xl:mb-10 2xl:border-none border ">
               {/* heading */}
               <div className="px-8 heading flex justify-between items-center mb-3.5">
                 <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx
index ee7c23b..2c250dc 100644
--- a/src/components/Partials/Sidebar.jsx
+++ b/src/components/Partials/Sidebar.jsx
@@ -275,7 +275,7 @@ export default function Sidebar({
         <button
           onClick={logoutModalHandler}
           type="button"
-          className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
+          className="signout-btn flex items-center space-x-1  p-2.5 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
         >
           <span className="">
             <Icons name="new-logout" />
diff --git a/src/components/attachmentCom/AttachFile.jsx b/src/components/attachmentCom/AttachFile.jsx
new file mode 100644
index 0000000..60e7725
--- /dev/null
+++ b/src/components/attachmentCom/AttachFile.jsx
@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from 'react'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import axios from 'axios'
+
+import usersService from '../../services/UsersService'
+
+export default function AttachFile({data='', fontSize='text-sm', showOnData=false}) {
+
+    const apiCall = new usersService()
+
+    let [uploadedList, setUploadedList] = useState({loading: true, data:{}})
+    let [reloadList, setReloadList] = useState(false) // Triggers list of upload reload
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
+
+    const inputFile = useRef()
+
+    const upload = (event) => {
+        let inputs = {
+            file: event.target.files[0],
+            job_uid: data?.job_uid,
+            uid: localStorage.getItem("uid"),
+            // member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+          };
+        setRequestStatus({loading: true, status:false, message:''})
+        if(!inputs.file){
+            setRequestStatus({loading: false, status:false, message:'Please select a file'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        }
+        const formData = new FormData()
+        for (let input in inputs) {
+            formData.append(input, inputs[input]);
+        }
+
+        axios.post(`${process.env.REACT_APP_MEDIA_LINK}/upload/task`,formData).then(res => {
+            if(res.data.internal_return < 0){
+                inputFile.current.value = null
+                setRequestStatus({loading: false, status:false, message:'upload failed'})
+                setTimeout(()=>{
+                    setRequestStatus({loading: false, status:false, message:''})
+                }, 3000)
+                return 
+            }
+            setRequestStatus({loading: false, status:true, message:'uploaded'})
+            inputFile.current.value = null
+            setReloadList(prev => !prev) // Triggers list of upload reload
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+        }).catch(err => {
+            inputFile.current.value = null
+            setRequestStatus({loading: false, status:false, message:'upload failed'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        })
+    }
+
+    useEffect(()=>{
+        apiCall.jobManagerFiles({job_uid:data?.job_uid || data?.origin_job_uid}).then(res => {
+            setUploadedList({loading: false, data:res.data})
+        }).catch(err => {
+            console.log(err)
+            setUploadedList({loading: false, data:{}})
+        })
+    },[data, reloadList])
+
+    return (
+        <>
+        {!showOnData ?
+            <div className='w-full h-full flex flex-col justify-center items-center'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files {
+                            requestStatus.loading ? 
+                                <LoadingSpinner size='6' /> 
+                                : 
+                                <span className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</span>
+                            } 
+                        </div>
+                        <label htmlFor='file' className={`text-black bg-[#f8ffd4] cursor-pointer text-[12px] py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add Files</label>
+                    </div>
+                    <div className='w-full p-2 rounded-2xl bg-slate-100'>
+                        <div className='text-[12px] w-full h-20 overflow-y-auto flex flex-col gap-2'>
+                            {uploadedList.loading ?
+                            <div className='w-full h-full justify-center items-center'>
+                                <LoadingSpinner size='6' height='h-full' />
+                            </div>
+                            :
+                            Object.keys(uploadedList.data).length > 0 ?
+                            uploadedList.data.result_list.length > 0 ? 
+                                uploadedList.data.result_list.map((item, index) => {
+                                    let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                    return(
+                                        <div key={item.file_uid} className={`my-[6px] flex justify-start gap-2 ${fontSize}`}>
+                                            <span>{index + 1}:</span>
+                                            <a 
+                                                target='_blank' 
+                                                alt='download-link' 
+                                                className='' 
+                                                href={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
+                                            >
+                                                {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                            </a>
+                                        </div>
+                                    )
+                                })
+                                : 
+                                <p className='text-sm'>No Uploaded files yet</p>
+                            :
+                            <></>
+                            }
+                        </div>
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
+                </div>
+            </div>
+        :showOnData && uploadedList?.data?.result_list?.length > 0 ?
+            <div className='w-full h-full flex flex-col justify-center items-center'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files
+                        </div>
+                    </div>
+                    <div className='w-full p-2 rounded-2xl bg-slate-100'>
+                        <div className='text-[12px] w-full p-2 h-20 overflow-y-auto flex flex-col gap-2'>
+                            {uploadedList.data.result_list.map((item, index) => {
+                                let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                return(
+                                    <div key={item.file_uid} className={`my-[6px] flex justify-start gap-2 ${fontSize}`}>
+                                        <span>{index + 1}:</span>
+                                        <a 
+                                            target='_blank' 
+                                            alt='download-link'
+                                            className='' 
+                                            href={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
+                                        >
+                                            {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                        </a>
+                                    </div>
+                                )
+                            })
+                            }
+                        </div>
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
+                </div>
+            </div>
+        :
+            <></>
+        }
+        </>
+    )
+}
diff --git a/src/components/countdown/CustomTimer.jsx b/src/components/countdown/CustomTimer.jsx
new file mode 100644
index 0000000..a0a5bf3
--- /dev/null
+++ b/src/components/countdown/CustomTimer.jsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+
+export default function CustomTimer({className='text-emerald-500'}) {
+
+    const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
+
+    useEffect(()=>{
+        const timer = setInterval(()=>{
+            if(time > 0 ){
+                setTime(prev => prev - 1)
+            }
+        },1000)
+        return ()=>{
+            clearInterval(timer)
+        }
+    },[time])
+
+    let minutes = time == 0 ? 0 : Math.floor(time/60)
+    let seconds = time == 0 ? 0 :time - (minutes * 60)
+
+  return (
+    <p className={`w-full text-base text-emerald-500 ${className}`}>
+        {`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
+    </p>
+  )
+}
diff --git a/src/components/customTabs/TabButton.jsx b/src/components/customTabs/TabButton.jsx
new file mode 100644
index 0000000..611cf72
--- /dev/null
+++ b/src/components/customTabs/TabButton.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
+  return (
+    <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>
+  )
+}
+
diff --git a/src/components/familyResources/FamGames.jsx b/src/components/familyResources/FamGames.jsx
index 6e23e26..50e6209 100644
--- a/src/components/familyResources/FamGames.jsx
+++ b/src/components/familyResources/FamGames.jsx
@@ -1,10 +1,529 @@
-import React from 'react'
+import React, { lazy, Suspense, useRef, useState } from 'react'
 import Layout from '../Partials/Layout'
+import MediaLayout from '../Partials/MediaLayout'
+import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
+import ActiveJobMessageMedia from '../MyActiveJobs/ActiveJobMessageMedia'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import usersService from '../../services/UsersService'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { useReactToPrint } from 'react-to-print'
+
+const Iframe = lazy(() => import("../Iframe/Iframe"));
 
 export default function FamGames() {
+
+  const ApiCall = new usersService();
+  const navigate = useNavigate();
+
+  const { userDetails } = useSelector((state) => state.userDetails);
+
+  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
+
+  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
+
+  const [tab, setTab] = useState("message");
+
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
+
+  // let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL
+
+  const printRef = useRef();
+  // to handle printing
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+  });
+
+  // FUNCTION TO HANDLE POPOUT
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
+  };
+
+  // FUNCTION TO HANDLE MESSAGE CHANGE
+  const handleMessageChange = ({ target: { value } }) => {
+    setMessageToSend(value);
+  };
+
+  // FUNCTION TO HANDLE FILE UPlOAD CHANGE
+  const handleFileChange = ({ target: { files } }) => {
+    setRequestStatus({ loading: false, status: false, message: "" }); // State to determine error state
+
+    if (!files[0]) {
+      // IF NO FILE SELECTED RETURN
+      return;
+    }
+    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "File must be <= 1mb",
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `Total number of attachment is ${Number(
+          process.env.REACT_APP_TOTAL_NUM_FILE
+        )}`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    // INCLUDE FILE IF NO ERROR
+    setFilesToSend((prev) => [...prev, files[0]]);
+  };
+
+  // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
+  const handleClearAll = ({ target: { name } }) => {
+    if (tab == "message") {
+      setMessageToSend("");
+    } else if (tab == "files") {
+      setFilesToSend([]);
+    } else {
+      return;
+    }
+  };
+
+  // FUNCTION TO REMOVE AND IMAGE
+  const handleRemoveImage = (imageToDelete) => {
+    setFilesToSend((prev) =>
+      prev.filter((item) => item.name != imageToDelete.name)
+    );
+  };
+
+  // FUNCTION TO SEND TASK MESSAGE
+  const sendTaskMessage = () => {
+    let reqData = {
+      message: messageToSend,
+      msg_type: "TEXT",
+      contract: props.details.contract,
+    };
+    if (!reqData.message) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Message is empty",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+    setRequestStatus({ loading: true, status: false, message: "" });
+    ApiCall.sendTaskMessage(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Message could not be sent, try again later",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Message Sent Successfully",
+        });
+        // function to trigger socket to emit 'send_message'
+        sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
+        
+        props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+        setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Opps! something went wrong",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
+
+  // FUNCTION TO SEND FILES
+  const sendFile = async () => {
+    setRequestStatus({ loading: true, status: false, message: "" });
+
+    if (!filesToSend.length) {
+      // checks if file to send is empty
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "No File(s) selected",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    for (let i = 0; i <= filesToSend.length - 1; i++) {
+      // Loops through files to send array and trigger upload API call
+
+      const fileToBase64 = async () => {
+        // Converts file data to base64 string
+        try {
+          const base64String = await convertFileToBase64(filesToSend[i]);
+          return base64String;
+        } catch (error) {
+          return false;
+        }
+      };
+
+      // if(await !fileToBase64()){
+      //   return
+      // }
+
+      let reqData = {
+        file_name: filesToSend[i].name,
+        file_size: filesToSend[i].size,
+        file_type: "image/png",
+        file_data: await fileToBase64(),
+        msg_type: "FILE",
+        contract: props.details.contract,
+      };
+
+      ApiCall.sendFiles(reqData)
+        .then((res) => {
+          // if(res.status != 200 || res.data.internal_return < 0){
+          //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
+          //   return
+          // }
+          // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+          // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+          // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+        })
+        .catch((error) => {
+          // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+        })
+        .finally(() => {
+          if (i == filesToSend.length - 1) {
+            setRequestStatus({
+              loading: false,
+              status: true,
+              message: "File(s) Uploaded Successfully",
+            });
+            setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+            props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+            setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          }
+        });
+    }
+  };
+
+
   return (
-    <Layout>
-        <div>Family Games Page</div>
-    </Layout>
+    <MediaLayout
+      backpath={'/'}
+      title={'Games'}
+    >
+        {/* <div className='mb-4'>
+          <CustomBreadcrumb 
+            title='Games and Interest' 
+            breadcrumb = {
+              [
+                { link: "/", title: "Home" },
+                  { link: "/work-in-progress", title: "Games and Interest", active: true},
+              ]
+            }
+          />
+        </div> */}
+        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
+            
+              <div className="mb-4 w-full h-screen max-h-[650px]">
+                <Suspense fallback={<Fallback />}>
+                  <Iframe 
+                    src={process.env.REACT_APP_FAM_GAME_LINK}
+                    title='Games'
+                  />
+                </Suspense>
+              </div>
+
+              <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
+                  <div className="w-full flex flex-col justify-between">
+                      <div className="w-full h-30">
+                        <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
+                          {/* <p className="w-full text-base text-right text-sky-blue">
+                          {props?.details && props.details.job_to}
+                          </p>
+                          <div className="text-base tracking-wide">
+                              <p className="font-semibold text-black dark:text-white tracking-wider">
+                                  Description:{" "}
+                              </p>
+                              <p className="p-2 ml-8 border-b border-sky-blue">
+                                  {props?.details && props.details.description}
+                              </p>
+                          </div>
+                          <div className="mt-6 w-full lg:flex gap-8">
+                              <div className="w-full text-base tracking-wide">
+                                  <p className="font-semibold text-black dark:text-white tracking-wider">
+                                      Delivery Detail:{" "}
+                                  </p>
+                                  <p className="p-2 ml-8">
+                                      {props?.details && props.details.job_description}
+                                  </p>
+                              </div>
+                              <div className="my-2 lg:my-0">
+                                  <IndexJobActions details={props.details} />
+                              </div>
+                          </div> */}
+                      </div>
+                  </div>
+
+                  {/* job details */}
+                  <div className="w-full md:w-[200px] h-20">
+                      {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
+                      {/* {passDue ? (
+                          <div className="my-1">
+                              <p className="text-base text-slate-700">
+                                  <span className="font-semibold">Due: </span>
+                                  {props?.details && props.details.delivery_date.split(" ")[0]}
+                              </p>
+                              {props?.delivery_date && (
+                                  <p className="py-2 text-base text-slate-700">
+                                  {props.details.delivery_date.split(" ")[1]}
+                                  </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 tracking-wide">
+                                  <CountDown
+                                      lastDate={props?.details && props.details.delivery_date}
+                                  />
+                                  </p>
+                                  <div className="text-base text-slate-700 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 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Reward:{" "}
+                          </span>
+                          <span className="">{thePrice}</span>
+                      </div>
+
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Duration:{" "}
+                          </span>
+                          <span className="">
+                          {props.details?.timeline_days && props.details.timeline_days}{" "}
+                          day(s)
+                          </span>
+                      </div> */}
+                  </div>
+                  {/* end of job details */}
+              </div>
+            </div>
+
+            <div className="w-full lg:w-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+                {/* TEXTAREA SECTION */}
+                <div className="w-full mb-3 hidden">
+                    <div className="w-full">
+                        <div className="pl-7 flex items-center gap-3">
+                            <button
+                                name="message"
+                                onClick={(e) => setTab(e.target.name)}
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                                tab == "message"
+                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                    : "bg-white text-[#000] border-t-[2px]"
+                                }`}
+                            >
+                                Send Message
+                            </button>
+                            <button
+                                name="files"
+                                onClick={(e) => setTab(e.target.name)}
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                                tab == "files"
+                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                    : "bg-white text-[#000] border-t-[2px]"
+                                }`}
+                            >
+                                Send Files
+                            </button>
+                        </div>
+                        {tab == "message" ? (
+                        <textarea
+                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
+                            // rows="10"
+                            style={{ resize: "none" }}
+                            name="message"
+                            onChange={handleMessageChange}
+                            value={messageToSend}
+                            autoFocus
+                        />
+                        ) : (
+                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
+                            <div className="files flex">
+                            <label
+                                htmlFor="file"
+                                className="custom-btn btn-gradient text-base text-white"
+                            >
+                                Select Files to Upload
+                            </label>
+                            <input
+                                type="file"
+                                id="file"
+                                accept="image/*"
+                                style={{ display: "none" }}
+                                onChange={handleFileChange}
+                            />
+                            </div>
+                            <div className="selected_file my-2 overflow-y-auto">
+                            {filesToSend.length > 0 &&
+                                filesToSend.map((item, index) => (
+                                <p key={index} className="flex items-center space-x-2">
+                                    <span>{item.name}</span>
+                                    <button
+                                    name="remove"
+                                    onClick={() => handleRemoveImage(item)}
+                                    className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
+                                    >
+                                    x
+                                    </button>
+                                </p>
+                                ))}
+                            </div>
+                        </div>
+                        )}
+                    </div>
+
+                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                    <div className="w-full">
+                        {/* error or success display */}
+                        {requestStatus.message != "" &&
+                        (!requestStatus.status ? (
+                            <div
+                            className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                            >
+                            {requestStatus.message}
+                            </div>
+                        ) : (
+                            requestStatus.status && (
+                            <div
+                                className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                            >
+                                {requestStatus.message}
+                            </div>
+                            )
+                        ))}
+                    </div>
+                    {/* End of error or success display */}
+
+                    {/* Buttons Sections */}
+                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
+                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
+                            <button
+                                type="button"
+                                onClick={handleClearAll}
+                                className="custom-btn border-gradient"
+                            >
+                                <span className="text-gradient">Clear</span>
+                            </button>
+                            {tab == "files" ? (
+                                <button
+                                onClick={sendFile}
+                                type="button"
+                                className="custom-btn btn-gradient text-white"
+                                >
+                                {requestStatus.loading ? (
+                                    <LoadingSpinner size="6" color="sky-blue" />
+                                ) : (
+                                    <>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 24 24"
+                                        width="20"
+                                        height="20"
+                                        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>
+                            ) : (
+                                <button
+                                onClick={sendTaskMessage}
+                                type="button"
+                                className="custom-btn btn-gradient text-white"
+                                >
+                                {requestStatus.loading ? (
+                                    <LoadingSpinner size="6" color="sky-blue" />
+                                ) : (
+                                    <span className="text-white">Send</span>
+                                )}
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                    {/* end of Buttons Sections  */}
+                </div>
+                {/* END OF TEXTAREA */}
+
+                {/* MESSAGE SECTION */}
+                <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md h-[400px]">
+                  <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
+                    {/* <div className="flex justify-between items-center gap-5">
+                        <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
+                        <span>Message</span>
+                        <button
+                        type="button"
+                        onClick={popUpHandler}
+                        className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
+                        >
+                        View all
+                        </button>
+                        </p>
+                    </div>
+                    {props.activeJobMesList.loading ? (
+                        <LoadingSpinner size="16" color="sky-blue" />
+                    ) : (
+                        <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
+                    )} */}
+                </div>
+                {/* END OF MESSAGE */}
+            </div>
+        </div>
+    </MediaLayout>
   )
 }
+
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen max-h-[600px]' />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx
index f4c8a54..3777f05 100644
--- a/src/components/jobPopout/DeleteJobPopout.jsx
+++ b/src/components/jobPopout/DeleteJobPopout.jsx
@@ -125,27 +125,6 @@ function DeleteJobPopout({ details, onClose, situation }) {
               <span className="job-label">Duration: </span>{details.timeline_days} day(s)
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={onClose}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteJob(details)}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
-
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
             (!requestStatus.status ? (
@@ -165,6 +144,28 @@ function DeleteJobPopout({ details, onClose, situation }) {
             ))}
           {/* End of error or success display */}
         </div>
+        <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
+            <button
+              onClick={onClose}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteJob(details)}
+                type="button"
+                className="custom-btn text-white primary-gradient"
+              >
+                Confirm Delete
+              </button>
+            )}
+            </div>
+        </div>
       </div>
     </ModalCom>
   );
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index fbccea9..4433c1b 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -211,302 +211,302 @@ const EditJobPopOut = ({
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="modal-header-con">
-          <h1 className="modal-title">
-            Edit Job
-          </h1>
-          <button
-            type="button"
-            className="modal-close-btn"
-            onClick={onClose}
-          >
-            <svg
-              width="36"
-              height="36"
-              viewBox="0 0 36 36"
-              fill="none"
-              className="fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
-                fill=""
-                fillOpacity="0.6"
-              />
-              <path
-                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
-                fill="#"
-                fillOpacity="0.6"
-              />
-            </svg>
-          </button>
-        </div>
-        <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
             onSubmit={handleEditJob}
           >
             {(props) => (
-              <Form className="w-full">
-                <div className="flex flex-col-reverse sm:flex-row">
-                  <div className="fields w-full">
-                    <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
-                      <div className="field w-full mb-6 xl:mb-0">
-                        <InputCom
-                          fieldClass="px-6 cursor-default"
-                          label="Currency"
-                          labelClass="tracking-wide"
-                          inputBg="bg-slate-100"
-                          inputClass="input-curve lg border border-light-purple"
-                          type="text"
-                          name="country"
-                          value={props.values.country}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                          disable={true}
+              <Form className="">
+                <div className="modal-container">
+                  <div className="modal-header-con">
+                    <h1 className="modal-title">
+                      Edit Job
+                    </h1>
+                    <button
+                      type="button"
+                      className="modal-close-btn"
+                      onClick={onClose}
+                    >
+                      <svg
+                        width="36"
+                        height="36"
+                        viewBox="0 0 36 36"
+                        fill="none"
+                        className="fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                          fill=""
+                          fillOpacity="0.6"
                         />
-                      </div>
-
-                      {/* Price */}
-                      <div className="field w-full">
-                        <InputCom
-                          fieldClass="px-6 text-right"
-                          label="Price"
-                          labelClass="tracking-wide"
-                          inputBg="bg-slate-100"
-                          inputClass="input-curve lg border border-light-purple"
-                          type="number"
-                          name="price"
-                          value={props.values.price}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                          errorBorder={
-                            props.errors.price && props.touched.price
-                          }
+                        <path
+                          d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                          fill="#"
+                          fillOpacity="0.6"
                         />
-                      </div>
-                    </div>
-                    {/* Title  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Title"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-light-purple"
-                        type="text"
-                        name="title"
-                        value={props.values.title}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        errorBorder={props.errors.title && props.touched.title}
-                      />
-                    </div>
-
-                    {/* Description  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Description"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-light-purple"
-                        type="text"
-                        name="description"
-                        value={props.values.description}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        errorBorder={
-                          props.errors.description && props.touched.description
-                        }
-                      />
-                    </div>
-
-                    {/* Details */}
-                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                      <div className="sm:w-[60%] w-full">
-                        <label
-                          htmlFor="job-label"
-                          className='job-label'
-                        >
-                          Job Delivery Details
-                        </label>
-                        <textarea
-                          id="Job Delivery Details"
-                          rows="5"
-                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
-                            props.errors.job_detail && props.touched.job_detail
-                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                          } rounded-[10px]`}
-                          style={{ resize: "none" }}
-                          name="job_detail"
-                          value={props.values.job_detail}
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                        />
-                      </div>
-
-                      <div className="sm:w-[35%] w-full">
-                        <div
-                          htmlFor="Job Categories"
-                          className='job-label'
-                          id="checked-group"
-                        >
-                          Categories
-                        </div>
-                        <div
-                          className="sm:flex-col flex flex-wrap px-3 mt-3"
-                          role="group"
-                          aria-labelledby="checked-group"
-                        >
-                          {categories &&
-                            Object.entries(categories)?.map(([key, value]) => (
-                              <label
-                                key={key}
-                                className="flex gap-1 w-full items-center dark:text-white"
-                              >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
-                            ))}
-                          <span className="h-5 text-sm italic text-[#cf3917]">
-                            {props.errors.category &&
-                              props.touched.category &&
-                              "please select a category"}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="w-full flex items-center gap-2 mb-2">
-                      {/* FOR TASK IMAGE */}
-                      <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                        <input
-                          id="task_image"
-                          className="hidden"
-                          type="file"
-                          accept="image/*"
-                          onChange={taskImgChangeHandler}
-                        />
-                        {taskImage ? (
-                          <div className="w-full absolute -top-5">
-                            <img
-                              src={taskImage}
-                              className="max-h-[150px] min-h-[150px] w-full object-cover"
-                              alt="uploaded task"
+                      </svg>
+                    </button>
+                  </div>
+                  <div className="modal-body-wrapper">
+                    <div className="flex flex-col-reverse sm:flex-row">
+                      <div className="fields w-full">
+                        <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
+                          <div className="field w-full mb-6 xl:mb-0">
+                            <InputCom
+                              fieldClass="px-6 cursor-default"
+                              label="Currency"
+                              labelClass="tracking-wide"
+                              inputBg="bg-slate-100"
+                              inputClass="input-curve lg border border-light-purple"
+                              type="text"
+                              name="country"
+                              value={props.values.country}
+                              inputHandler={props.handleChange}
+                              blurHandler={props.handleBlur}
+                              disable={true}
                             />
-                            <span
-                              onClick={() => setTaskImage("")}
-                              className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                          </div>
+
+                          {/* Price */}
+                          <div className="field w-full">
+                            <InputCom
+                              fieldClass="px-6 text-right"
+                              label="Price"
+                              labelClass="tracking-wide"
+                              inputBg="bg-slate-100"
+                              inputClass="input-curve lg border border-light-purple"
+                              type="number"
+                              name="price"
+                              value={props.values.price}
+                              inputHandler={props.handleChange}
+                              blurHandler={props.handleBlur}
+                              errorBorder={
+                                props.errors.price && props.touched.price
+                              }
+                            />
+                          </div>
+                        </div>
+                        {/* Title  */}
+                        <div className="field w-full mb-[0.5rem]">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Title"
+                            labelClass="tracking-wide"
+                            inputBg="bg-slate-100"
+                            inputClass=" input-curve lg border border-light-purple"
+                            type="text"
+                            name="title"
+                            value={props.values.title}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                            errorBorder={props.errors.title && props.touched.title}
+                          />
+                        </div>
+
+                        {/* Description  */}
+                        <div className="field w-full mb-[0.5rem]">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Description"
+                            labelClass="tracking-wide"
+                            inputBg="bg-slate-100"
+                            inputClass=" input-curve lg border border-light-purple"
+                            type="text"
+                            name="description"
+                            value={props.values.description}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                            errorBorder={
+                              props.errors.description && props.touched.description
+                            }
+                          />
+                        </div>
+
+                        {/* Details */}
+                        <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                          <div className="sm:w-[60%] w-full">
+                            <label
+                              htmlFor="job-label"
+                              className='job-label'
                             >
-                              Remove Image
-                            </span>
+                              Job Delivery Details
+                            </label>
+                            <textarea
+                              id="Job Delivery Details"
+                              rows="5"
+                              className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                                props.errors.job_detail && props.touched.job_detail
+                                  ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                  : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                              } rounded-[10px]`}
+                              style={{ resize: "none" }}
+                              name="job_detail"
+                              value={props.values.job_detail}
+                              onChange={props.handleChange}
+                              onBlur={props.handleBlur}
+                            />
+                          </div>
+
+                          <div className="sm:w-[35%] w-full">
+                            <div
+                              htmlFor="Job Categories"
+                              className='job-label'
+                              id="checked-group"
+                            >
+                              Categories
+                            </div>
+                            <div
+                              className="sm:flex-col flex flex-wrap px-3 mt-3"
+                              role="group"
+                              aria-labelledby="checked-group"
+                            >
+                              {categories &&
+                                Object.entries(categories)?.map(([key, value]) => (
+                                  <label
+                                    key={key}
+                                    className="flex gap-1 w-full items-center dark:text-white"
+                                  >
+                                    <Field
+                                      type="checkbox"
+                                      name="category"
+                                      value={key}
+                                    />
+                                    <span className="text-[13.975px]">{value}</span>
+                                  </label>
+                                ))}
+                              <span className="h-5 text-sm italic text-[#cf3917]">
+                                {props.errors.category &&
+                                  props.touched.category &&
+                                  "please select a category"}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="w-full flex items-center gap-2 mb-2">
+                          {/* FOR TASK IMAGE */}
+                          <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
+                            <input
+                              id="task_image"
+                              className="hidden"
+                              type="file"
+                              accept="image/*"
+                              onChange={taskImgChangeHandler}
+                            />
+                            {taskImage ? (
+                              <div className="w-full absolute -top-5">
+                                <img
+                                  src={taskImage}
+                                  className="max-h-[150px] min-h-[150px] w-full object-cover"
+                                  alt="uploaded task"
+                                />
+                                <span
+                                  onClick={() => setTaskImage("")}
+                                  className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                                >
+                                  Remove Image
+                                </span>
+                              </div>
+                            ) : (
+                              <label
+                                className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                                htmlFor="task_image"
+                              >
+                                Select Task Image
+                              </label>
+                            )}
+                          </div>
+                          {/* END OF TASK IMAGE */}
+
+                          <div className="field w-1/2">
+                            <div className={`flex items-center justify-between`}>
+                              <label
+                                className="job-label flex flex-col"
+                                htmlFor="timeline_days"
+                              >
+                                Timeline -
+                                <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                                  Expected duration of this task
+                                </span>
+                              </label>
+                            </div>
+
+                            <Field
+                              component="select"
+                              name="timeline_days"
+                              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                                props.errors.timeline_days &&
+                                props.touched.timeline_days
+                                  ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                  : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                              }`}
+                              value={props.values.timeline_days}
+                            >
+                              <option value="">Select Duration</option>
+                              {publicArray.map(({ name, duration }, idx) => (
+                                <option
+                                  key={duration}
+                                  className="text-slate-500 text-lg"
+                                  value={duration}
+                                >
+                                  {name}
+                                </option>
+                              ))}
+                            </Field>
+                          </div>
+                        </div>
+                        {/* inputs ends here */}
+                      </div>
+                    </div>
+                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                    <div className="content-footer w-full">
+                      {/* error or success display */}
+                      {requestStatus.message != "" &&
+                        (!requestStatus.status ? (
+                          <div
+                            className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
                           </div>
                         ) : (
-                          <label
-                            className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
-                            htmlFor="task_image"
+                          requestStatus.status && (
+                            <div
+                              className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                            >
+                              {requestStatus.message}
+                            </div>
+                          )
+                        ))}
+                      {/* End of error or success display */}
+
+                      {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
+                      <div className="w-full">
+                        {uploadStatus.message && !uploadStatus.loading && (
+                          <p
+                            className={`text-center ${
+                              uploadStatus.status
+                                ? "text-green-500"
+                                : "text-red-500"
+                            }`}
                           >
-                            Select Task Image
-                          </label>
+                            {uploadStatus.message}
+                          </p>
+                        )}
+                        {uploadStatus.loading && (
+                          <p className="text-center">{uploadStatus.message}</p>
                         )}
                       </div>
-                      {/* END OF TASK IMAGE */}
 
-                      <div className="field w-1/2">
-                        <div className={`flex items-center justify-between`}>
-                          <label
-                            className="job-label flex flex-col"
-                            htmlFor="timeline_days"
-                          >
-                            Timeline -
-                            <span className="w-full text-center text-green-700 text-sm tracking-wide">
-                              Expected duration of this task
-                            </span>
-                          </label>
-                        </div>
-
-                        <Field
-                          component="select"
-                          name="timeline_days"
-                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
-                            props.errors.timeline_days &&
-                            props.touched.timeline_days
-                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                          }`}
-                          value={props.values.timeline_days}
-                        >
-                          <option value="">Select Duration</option>
-                          {publicArray.map(({ name, duration }, idx) => (
-                            <option
-                              key={duration}
-                              className="text-slate-500 text-lg"
-                              value={duration}
-                            >
-                              {name}
-                            </option>
-                          ))}
-                        </Field>
-                      </div>
                     </div>
-                    {/* inputs ends here */}
                   </div>
-                </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer w-full">
-                  {/* error or success display */}
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
-                        <div
-                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                        >
-                          {requestStatus.message}
-                        </div>
-                      )
-                    ))}
-                  {/* End of error or success display */}
-
-                  {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                  <div className="w-full">
-                    {uploadStatus.message && !uploadStatus.loading && (
-                      <p
-                        className={`text-center ${
-                          uploadStatus.status
-                            ? "text-green-500"
-                            : "text-red-500"
-                        }`}
-                      >
-                        {uploadStatus.message}
-                      </p>
-                    )}
-                    {uploadStatus.loading && (
-                      <p className="text-center">{uploadStatus.message}</p>
-                    )}
-                  </div>
-
-                  <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                    <div className="flex items-center space-x-4 mr-2 mt-2">
+                  <div className="modal-footer-wrapper justify-end">
                       {requestStatus.loading ? (
                         <LoadingSpinner size="6" color="sky-blue" />
                       ) : (
                         <button
                           type="submit"
-                          className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+                          className="custom-btn btn-gradient text-white"
                           disabled={
                             requestStatus.loading || uploadStatus.loading
                           }
@@ -514,14 +514,11 @@ const EditJobPopOut = ({
                           Save
                         </button>
                       )}
-                    </div>
                   </div>
                 </div>
               </Form>
             )}
           </Formik>
-        </div>
-      </div>
     </ModalCom>
   );
 };
diff --git a/src/components/jobPopout/EditJobPopoutNew.jsx b/src/components/jobPopout/EditJobPopoutNew.jsx
new file mode 100644
index 0000000..a90b6cb
--- /dev/null
+++ b/src/components/jobPopout/EditJobPopoutNew.jsx
@@ -0,0 +1,541 @@
+import { Field, Form, Formik } from "formik";
+import React, { useCallback, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom";
+import ModalCom from "../Helpers/ModalCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { apiConst } from "../../lib/apiConst";
+import AttachFile from "../attachmentCom/AttachFile";
+
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Country is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(149, "Maximum 149 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(299, "Maximum 299 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(1440, "Maximum 1440 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
+});
+
+const EditJobPopoutNew = ({
+  details,
+  onClose,
+  situation,
+  country,
+  categories,
+}) => {
+  const dispatch = useDispatch();
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const { walletDetails } = useSelector((state) => state.walletDetails);
+
+  const uploadedImage = `${
+    userDetails.session_image_server
+  }${localStorage.getItem("session_token")}/job/${details?.job_uid}`;
+
+  const [taskImage, setTaskImage] = useState(uploadedImage);
+
+  let [uploadStatus, setUploadStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // Holds state when submit button is pressed
+
+  let initialValues = {
+    // initial values for formik
+    country: details.currency,
+    price: details?.price * 0.01,
+    title: details?.title,
+    description: details?.description,
+    job_detail: details?.job_detail,
+    timeline_days: details?.timeline_days,
+    category: details?.category,
+  };
+
+  const jobApi = useMemo(() => new usersService(), []);
+  const navigate = useNavigate();
+
+  const handleEditJob = useCallback(
+    async (values) => {
+      let reqData = {
+        country: values?.country,
+        price: Number(values.price) * 100,
+        title: values?.title,
+        description: values?.description,
+        job_detail: values?.job_detail,
+        timeline_days: values?.timeline_days,
+        category: values.category?.join("@"),
+        job_id: details.job_id,
+        job_uid: details.job_uid,
+      };
+      setRequestStatus({ loading: true, message: "" });
+
+      try {
+        let res = await jobApi.jobManagerUpdateJob(reqData);
+        let { data } = await res;
+        if (data?.internal_return < 0) return;
+        setRequestStatus({ loading: false, message: null });
+        setTimeout(() => {
+          dispatch(tableReload({ type: "JOBTABLE" }));
+          navigate("/myjobs", { replace: true });
+          onClose();
+        }, 1000);
+      } catch (error) {
+        setRequestStatus({ loading: false, message: error });
+        throw new Error(error);
+      }
+    },
+    [jobApi, navigate, onClose, details]
+  );
+
+  const taskImgChangeHandler = (e) => {
+    setUploadStatus({ loading: false, status: false, message: "" });
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"]; // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0]; //UPLOADED FILE
+
+    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
+    if (!acceptedFormat.includes(fileFormat)) {
+      //CHECKING FOR CORRECT UPLOAD FORMAT
+      const msg = `Please select ${acceptedFormat
+        .slice(0, -1)
+        .join(", ")} or ${acceptedFormat.slice(-1)}`;
+      setUploadStatus({ loading: false, status: false, message: msg });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (uploadedFile.size > 5 * 1048576) {
+      // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({
+        loading: false,
+        status: false,
+        message: "File must not exceed 5MB",
+      });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        let base64Img = imgReader.result.split(",")[1];
+        let reqData = {
+          // PAYLOAD FOR API CALL
+          job_uid: details?.job_uid,
+          file_name: uploadedFile?.name.slice(0, 19),
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: base64Img,
+          msg_type: "FILE",
+          action: apiConst.WRENCHBOARD_PICTURE_JOB,
+        };
+        setUploadStatus({
+          loading: true,
+          status: false,
+          message: "Loading...",
+        });
+        jobApi
+          .sendFiles(reqData)
+          .then((res) => {
+            if (res.status != 200 || res.data.internal_return < 0) {
+              return setUploadStatus({
+                loading: false,
+                status: false,
+                message: "Something went wrong, try again",
+              });
+            }
+            setUploadStatus({
+              loading: false,
+              status: true,
+              message: "Uploaded successfully",
+            });
+            setTaskImage(event.target.result);
+            setTimeout(() => {
+              dispatch(tableReload({ type: "JOBTABLE" }));
+              navigate("/myjobs", { replace: true });
+              onClose();
+            }, 1000);
+          })
+          .catch((error) => {
+            setUploadStatus({
+              loading: false,
+              status: false,
+              message: "Network error, try again",
+            });
+          })
+          .finally(() => {
+            setTimeout(() => {
+              setUploadStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          });
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  return (
+    <ModalCom action={onClose} situation={situation}>
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleEditJob}
+          >
+            {(props) => (
+              <Form className="">
+                <div className="modal-container">
+                    <div className="modal-header-con">
+                        <h1 className="modal-title">
+                            Edit Job
+                        </h1>
+                        <button
+                            type="button"
+                            className="modal-close-btn"
+                            onClick={onClose}
+                        >
+                            <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 36 36"
+                            fill="none"
+                            className="fill-current"
+                            xmlns="http://www.w3.org/2000/svg"
+                            >
+                            <path
+                                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                                fill=""
+                                fillOpacity="0.6"
+                            />
+                            <path
+                                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                                fill="#"
+                                fillOpacity="0.6"
+                            />
+                            </svg>
+                        </button>
+                    </div>
+                    <div className="modal-body-wrapper">
+                        <div className="flex flex-col-reverse sm:flex-row">
+                            <div className="fields w-full">
+                            <div className="sm:flex sm:space-x-7 mb-[0.5rem]">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
+                                <InputCom
+                                    fieldClass="px-6 cursor-default"
+                                    label="Currency"
+                                    labelClass="tracking-wide"
+                                    inputBg="bg-slate-100"
+                                    inputClass="input-curve lg border border-light-purple"
+                                    type="text"
+                                    name="country"
+                                    value={props.values.country}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    disable={true}
+                                />
+                                </div>
+
+                                {/* Price */}
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
+                                <InputCom
+                                    fieldClass="px-6 text-right"
+                                    label="Price"
+                                    labelClass="tracking-wide"
+                                    inputBg="bg-slate-100"
+                                    inputClass="input-curve lg border border-light-purple"
+                                    type="number"
+                                    name="price"
+                                    value={props.values.price}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    errorBorder={
+                                    props.errors.price && props.touched.price
+                                    }
+                                />
+                                </div>
+
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
+                                <label
+                                    className="job-label"
+                                    htmlFor="timeline_days"
+                                >
+                                    Timeline -
+                                    {/* <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                                    Expected duration of this task
+                                    </span> */}
+                                </label>
+                                <Field
+                                    component="select"
+                                    name="timeline_days"
+                                    className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
+                                    props.errors.timeline_days &&
+                                    props.touched.timeline_days
+                                        ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                        : "dark:border-[#5e6278]"
+                                    }`}
+                                    value={props.values.timeline_days}
+                                >
+                                    <option value="" className='text-slate-500 text-lg'>Select Duration</option>
+                                    {publicArray.map(({ name, duration }, idx) => (
+                                    <option
+                                        key={duration}
+                                        className="text-slate-500 text-lg"
+                                        value={duration}
+                                    >
+                                        {name}
+                                    </option>
+                                    ))}
+                                </Field>
+                                </div>
+                            </div>
+
+                            {/* Title  */}
+                            <div className="field w-full mb-[0.5rem]">
+                                <InputCom
+                                fieldClass="px-6"
+                                label="Title"
+                                labelClass="tracking-wide"
+                                inputBg="bg-slate-100"
+                                inputClass=" input-curve lg border border-light-purple"
+                                type="text"
+                                name="title"
+                                value={props.values.title}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
+                                errorBorder={props.errors.title && props.touched.title}
+                                />
+                            </div>
+
+                            {/* Description  */}
+                            <div className="field w-full mb-[0.5rem]">
+                                <InputCom
+                                fieldClass="px-6"
+                                label="Description"
+                                labelClass="tracking-wide"
+                                inputBg="bg-slate-100"
+                                inputClass=" input-curve lg border border-light-purple"
+                                type="text"
+                                name="description"
+                                value={props.values.description}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
+                                errorBorder={
+                                    props.errors.description && props.touched.description
+                                }
+                                />
+                            </div>
+
+                            {/* Details */}
+                            <div className="field flex flex-col sm:flex-row w-full mb-[2px] gap-2">
+                                <div className="sm:w-[60%] w-full">
+                                <label
+                                    htmlFor="job-label"
+                                    className='job-label'
+                                >
+                                    Job Delivery Details
+                                </label>
+                                <textarea
+                                    id="Job Delivery Details"
+                                    rows="5"
+                                    className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                                    props.errors.job_detail && props.touched.job_detail
+                                        ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                        : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                                    } rounded-[10px]`}
+                                    style={{ resize: "none" }}
+                                    name="job_detail"
+                                    value={props.values.job_detail}
+                                    onChange={props.handleChange}
+                                    onBlur={props.handleBlur}
+                                />
+                                </div>
+
+                                <div className="sm:w-[35%] w-full">
+                                <div
+                                    htmlFor="Job Categories"
+                                    className='job-label'
+                                    id="checked-group"
+                                >
+                                    Categories
+                                </div>
+                                <div
+                                    className="sm:flex-col flex flex-wrap px-3 mt-3"
+                                    role="group"
+                                    aria-labelledby="checked-group"
+                                >
+                                    {categories &&
+                                    Object.entries(categories)?.map(([key, value]) => (
+                                        <label
+                                        key={key}
+                                        className="flex gap-1 w-full items-center dark:text-white"
+                                        >
+                                        <Field
+                                            type="checkbox"
+                                            name="category"
+                                            value={key}
+                                        />
+                                        <span className="text-[13.975px]">{value}</span>
+                                        </label>
+                                    ))}
+                                    <span className="h-5 text-sm italic text-[#cf3917]">
+                                    {props.errors.category &&
+                                        props.touched.category &&
+                                        "please select a category"}
+                                    </span>
+                                </div>
+                                </div>
+                            </div>
+                            <div className="w-full flex items-center justify-center gap-2 mb-2">
+                                {/* FOR TASK IMAGE */}
+                                <div className="w-1/3 relative flex flex-col max-h-[130px] min-h-[130px]">
+                                <div className="w-full flex gap-2">
+                                    <label
+                                        className={`w-full job-label cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
+                                        htmlFor="task_image"
+                                        >
+                                        Banner
+                                    </label>
+                                    {uploadStatus.loading ? 
+                                        <LoadingSpinner size='6' /> 
+                                        : 
+                                        <span className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</span>
+                                    } 
+                                </div>
+                                <input
+                                    id="task_image"
+                                    className="hidden"
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={taskImgChangeHandler}
+                                />
+                                {taskImage ? (
+                                    <div className="w-full relative h-full">
+                                    <img
+                                        src={taskImage}
+                                        className="h-32 w-full object-cover"
+                                        alt="uploaded task"
+                                    />
+                                    <div className="absolute inset-0 flex flex-col justify-center items-center">
+                                        <span
+                                        onClick={() => setTaskImage("")}
+                                        className="p-2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                                        >
+                                        Remove Image
+                                        </span>
+                                    </div>
+                                    </div>
+                                ) : (
+                                    <div className="absolute inset-0 flex flex-col justify-center items-center">
+                                    <label
+                                        className="p-2 bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                                        htmlFor="task_image"
+                                    >
+                                        Select Task Image
+                                    </label>
+                                    </div>
+                                )}
+                                </div>
+                                {/* END OF TASK IMAGE */}
+
+                                <div className="field w-2/3">
+                                    <AttachFile data={details} />
+                                </div>
+
+                            </div>
+                            {/* inputs ends here */}
+                            </div>
+                        </div>
+                        {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                        <div className="content-footer w-full">
+                            {/* error or success display */}
+                            {requestStatus.message != "" &&
+                            (!requestStatus.status ? (
+                                <div
+                                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                >
+                                {requestStatus.message}
+                                </div>
+                            ) : (
+                                requestStatus.status && (
+                                <div
+                                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                >
+                                    {requestStatus.message}
+                                </div>
+                                )
+                            ))}
+                            {/* End of error or success display */}
+                        </div>
+                    </div>
+                    <div className="modal-footer-wrapper justify-end">
+                        {requestStatus.loading ? (
+                        <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                        <button
+                            type="submit"
+                            className="custom-btn btn-gradient text-white"
+                            disabled={
+                            requestStatus.loading || uploadStatus.loading
+                            }
+                        >
+                            Save
+                        </button>
+                        )}
+                    </div>
+                </div>
+              </Form>
+            )}
+          </Formik>
+    </ModalCom>
+  );
+};
+
+export default EditJobPopoutNew;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];
diff --git a/src/components/jobPopout/FamilyOfferJobPopout.jsx b/src/components/jobPopout/FamilyOfferJobPopout.jsx
index ff3b60f..9245485 100644
--- a/src/components/jobPopout/FamilyOfferJobPopout.jsx
+++ b/src/components/jobPopout/FamilyOfferJobPopout.jsx
@@ -11,6 +11,7 @@ import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
 
 import { SocketValues } from "../Contexts/SocketIOContext";
+import AttachFile from "../attachmentCom/AttachFile";
 
 const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
 const ImageElement = lazy(() => import("../ImageCon/ImageElement"));
@@ -206,11 +207,11 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/5 h-full flex flex-col justify-between">
+          <div className="p-4 w-full md:w-2/5 h-full flex flex-col gap-4 justify-between">
             { details.job_type == 'TASK' ?
               <div className="image-wrapper w-full h-40 flex justify-center items-center">
                 <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
-                  <ImageElement src={details?.image} alt='banner' className='w-auto h-full' />
+                  <ImageElement src={details?.image} alt='banner' className='w-full h-auto' />
                 </Suspense>
               </div>
               :
@@ -222,15 +223,26 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                 </div>
               </div>
             }
+            <div className="w-full">
+              <AttachFile data={details} showOnData={true} />
+            </div>
             <div className="my-3 md:flex md:justify-center">
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
               ) : (
-                <button
+                // <button
+                //   name="accept"
+                //   onClick={handleOffer}
+                //   disabled={requestStatus.loading}
+                //   className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
+                // >
+                //   I am ready to start
+                // </button>
+                <button 
                   name="accept"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
+                  className="btn-gradient text-white px-2 py-2 w-40 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                 >
                   I am ready to start
                 </button>
diff --git a/src/components/jobPopout/popoutcomponent/Detail.jsx b/src/components/jobPopout/popoutcomponent/Detail.jsx
index 21a1b92..ee95a11 100644
--- a/src/components/jobPopout/popoutcomponent/Detail.jsx
+++ b/src/components/jobPopout/popoutcomponent/Detail.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 function Detail({label, value, bg,}) {
   return (
     <>
-        <label className='job-label w-full md:w-1/4'>{label}</label>
+        <label className='job-label w-full md:w-[150px]'>{label}</label>
         <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white ${bg ? bg : null}`}>{value}</p>
     </>
   )
diff --git a/src/index.css b/src/index.css
index 1bb90c9..1340b35 100644
--- a/src/index.css
+++ b/src/index.css
@@ -160,8 +160,12 @@
     @apply flex items-center gap-2
   }
 
-  /* STYLES FOR MODAL */
-  /* Modal Header */
+  /* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL/ADD JOB MODAL FOR SAMPLE USAGE'*/
+  .modal-container {
+    @apply w-11/12 md:w-[700px] mx-auto h-auto max-h-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
+  }
+
+  /* Modal Header section*/
   .modal-header-con{
     @apply w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29]  border-light-purple
   }
@@ -172,9 +176,14 @@
     @apply text-[#000] dark:text-red-500
   }
 
+  /* Modal Body section */
+  .modal-body-wrapper {
+    @apply w-full h-full overflow-y-auto flex flex-col items-center px-10 p-2
+  }
+
   /* modal footer */
   .modal-footer-wrapper{
-    @apply py-2 px-4 border-t-2 flex justify-between items-center
+    @apply p-4 border-t-2 flex justify-between items-center w-full
   }
   /* END OF STYLES FOR MODAL BOX */
 
@@ -183,7 +192,7 @@
     @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
   }
   .logout-btn {
-    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
+    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
   }
 }
 
@@ -1103,6 +1112,6 @@ TODO: Responsive ===========================
   margin: 0;
 }
 
-.assign-task-popup {
+/* .assign-task-popup {
   top: 75px;
-}
+} */
diff --git a/src/lib/apiConst.js b/src/lib/apiConst.js
index 9512810..ff715ef 100644
--- a/src/lib/apiConst.js
+++ b/src/lib/apiConst.js
@@ -44,6 +44,7 @@ export const apiConst = {
     WRENCH_FILE_FAMILY:     400,
     WRENCH_FILE_FAMILYBANNER:    410,
     WRENCH_FILE_JOB :    500,
+    JOB_MANAGER_FILES: 13012,
     WRENCHBOARD_BKO_START: 10000,
     WRENCHBOARD_BKO_LOGIN: 10010,
     WRENCHBOARD_BKO_CREATEUSER: 10015,
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index f59e05e..82421ea 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -1356,6 +1356,18 @@ class usersService {
     return this.postAuxEnd("/assignmediatask", postData);
   }
 
+  // API FUNCTION FOR LISTING JOB MANAGER FILES (TASK FILE UPLAOD)
+  jobManagerFiles(reqData) {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.JOB_MANAGER_FILES,
+      ...reqData
+    };
+    return this.postAuxEnd("/jobmanagerfiles", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)
diff --git a/src/views/AddJobPage.jsx b/src/views/AddJobPage.jsx
index 54e615b..cbe0f77 100644
--- a/src/views/AddJobPage.jsx
+++ b/src/views/AddJobPage.jsx
@@ -5,7 +5,7 @@ import ModalCom from "../components/Helpers/ModalCom";
 function AddJobPage({ action, situation, categories }) {
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+      <div className="modal-container">
         <div className="modal-header-con">
           <h1 className="modal-title">
             New Job
diff --git a/src/views/FamGamesPage.jsx b/src/views/FamGamesPage.jsx
index d98fe65..661e277 100644
--- a/src/views/FamGamesPage.jsx
+++ b/src/views/FamGamesPage.jsx
@@ -1,9 +1,24 @@
-import React from 'react'
-import FamGames from '../components/familyResources/FamGames'
+import React, { lazy, Suspense } from 'react'
+import LoadingSpinner from '../components/Spinners/LoadingSpinner';
+// import FamGames from '../components/familyResources/FamGames'
+
+const FamGames = lazy(() => import("../components/familyResources/FamGames"));
+
 export default function FamGamesPage() {
   return (
     <>
-        <FamGames />
+      <Suspense fallback={<Fallback />}>
+          <FamGames />
+      </Suspense>
     </>
   )
 }
+
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen' />
+    </div>
+  )
+}
\ No newline at end of file