diff --git a/.env b/.env
index 286b0ab..3532055 100644
--- a/.env
+++ b/.env
@@ -114,4 +114,7 @@ REACT_APP_SHOW_NEW_FAMILY_DASH=1
 REACT_APP_SHOW_ACCOUNT_DASH=1
 
 # Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
\ No newline at end of file
+REACT_APP_SHOW_SLIDER_BANNERS=0
+
+# FOR MEDIA LINK
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
\ No newline at end of file
diff --git a/.env.development b/.env.development
index 52ab627..18cf90f 100644
--- a/.env.development
+++ b/.env.development
@@ -82,4 +82,7 @@ REACT_APP_SHOW_NEW_FAMILY_DASH=1
 REACT_APP_SHOW_ACCOUNT_DASH=1
 
 # Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
\ No newline at end of file
+REACT_APP_SHOW_SLIDER_BANNERS=0
+
+# FOR MEDIA LINK
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 5d5a2cc..22e5082 100644
--- a/.env.production
+++ b/.env.production
@@ -88,4 +88,7 @@ REACT_APP_SHOW_NEW_FAMILY_DASH=1
 REACT_APP_SHOW_ACCOUNT_DASH=1
 
 # Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
\ No newline at end of file
+REACT_APP_SHOW_SLIDER_BANNERS=0
+
+# FOR MEDIA LINK
+REACT_APP_MEDIA_LINK='https://media.wrenchboard.com '
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 29ecd64..0d945e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react-toastify": "^9.0.1",
         "redux": "^4.2.0",
         "slick-carousel": "^1.8.1",
+        "socket.io-client": "^4.4.1",
         "web-vitals": "^1.0.1",
         "yup": "^1.1.1"
       }
@@ -3717,6 +3718,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -7078,6 +7084,46 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
+      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
+      "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -16099,6 +16145,32 @@
         "jquery": ">=1.8.0"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
+      "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -18111,6 +18183,14 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index 2bdb60d..32fe6e0 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -300,7 +300,7 @@ const AssignTaskPopout = ({
           ) : (
             <>
               <div
-                className={`job-action-modal-body w-full md:grid ${
+                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
                   taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                 }`}
               >
@@ -315,7 +315,7 @@ const AssignTaskPopout = ({
                         checked={taskType == "select"}
                         onChange={switchTaskType}
                       />
-                      <span>Select Task</span>
+                      <span className="text-lg tracking-wide font-semibold">Select Task</span>
                     </div>
                     <div className="flex items-center gap-2 text-sky-blue text-base">
                       <input
@@ -326,12 +326,12 @@ const AssignTaskPopout = ({
                         checked={taskType == "new"}
                         onChange={switchTaskType}
                       />
-                      <span>New Task</span>
+                      <span className="text-lg tracking-wide font-semibold">New Task</span>
                     </div>
                   </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-[380px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                       {familyTask?.data?.length ? (
                         familyTask?.data?.map((item, index) => (
                           <div
@@ -364,7 +364,7 @@ const AssignTaskPopout = ({
                     </div>
                   )}
                   {taskType == "new" && (
-                    <div className="p-4 w-full h-[400px]">
+                    <div className="p-4 w-full">
                       <NewTasks
                         formState={formState}
                         setFormState={setFormState}
@@ -382,17 +382,25 @@ const AssignTaskPopout = ({
                           <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
                             {activeTask?.data?.title}
                           </p>
-                          <div className="my-3">
+                          {/* <div className="my-3">
                             <Detail
                               label="Description"
                               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">
+                              {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">
-                                  Price
+                                  Reward
                                 </label>
                                 <p className="p-1 text-sm text-slate-900 dark:text-white">
                                   {PriceFormatter(
diff --git a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
index 50f160d..38651e9 100644
--- a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
@@ -49,11 +49,91 @@ export default function NewTasks({ formState, setFormState }) {
 
   return (
     <form className="w-full flex justify-between items-start">
-      <div className="flex flex-col gap-3 max-w-[77%]">
+      <div className="w-full block sm:grid grid-cols-3 gap-2">
+        
+        <div className="w-full flex flex-col gap-2 col-span-2">
+          {/* Title  */}
+          <div className="field w-full">
+            <label htmlFor="title" className="job-label">Title</label>
+            <InputCom
+              fieldClass="px-6"
+              // label="Title"
+              // labelClass="tracking-wide"
+              inputBg="bg-slate-100"
+              type="text"
+              name="title"
+              value={formState.title}
+              inputHandler={handleInputChange}
+              //   blurHandler={props.handleBlur}
+              //   error={props.errors.title && props.touched.title && props.errors.title}
+            />
+          </div>
+
+          {/* Description  */}
+          {/* <div className="field w-full mb-[5px]">
+            <label htmlFor="description" className="job-label">Description</label>
+            <InputCom
+              fieldClass="px-6"
+              // label="Description"
+              // labelClass="tracking-wide"
+              inputBg="bg-slate-100"
+              type="text"
+              name="description"
+              value={formState.description}
+              inputHandler={handleInputChange}
+              //   blurHandler={props.handleBlur}
+              //   error={props.errors.description && props.touched.description && props.errors.description}
+            />
+          </div> */}
+          <div className="field flex flex-col sm:flex-row w-full gap-2">
+            <div className="w-full">
+              <label
+                htmlFor="description"
+                className='job-label'
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                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]`}
+                style={{ resize: "none" }}
+                name="description"
+                value={formState.description}
+                onChange={handleInputChange}
+                // onBlur={props.handleBlur}
+              />
+            </div>
+          </div>
+
+          {/* Details */}
+          <div className="field flex flex-col sm:flex-row w-full gap-2">
+            <div className="w-full">
+              <label
+                htmlFor="Job Delivery Details"
+                className='job-label'
+              >
+                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]`}
+                style={{ resize: "none" }}
+                name="job_detail"
+                value={formState.job_detail}
+                onChange={handleInputChange}
+                // onBlur={props.handleBlur}
+              />
+            </div>
+          </div>
+        </div>
+
         {/* inputs starts here */}
-        <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
+        <div className="w-full flex flex-col gap-2">
           {/* Currency */}
-          <div className="field w-full mb-6 xl:mb-0">
+          <div className="field w-full">
             <label
               htmlFor="country"
               className="job-label"
@@ -65,7 +145,7 @@ export default function NewTasks({ formState, setFormState }) {
               id="country"
               name="country"
               value={formState.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`}
+              className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
               onChange={handleInputChange}
               // onBlur={props.handleBlur}
             >
@@ -115,7 +195,7 @@ export default function NewTasks({ formState, setFormState }) {
           </div>
 
           {/* Duration */}
-          <div className="field w-full mb-6 xl:mb-0">
+          <div className="field w-full">
             <label
               htmlFor="timeline_days"
               className="job-label"
@@ -127,7 +207,7 @@ export default function NewTasks({ formState, setFormState }) {
               id="timeline_days"
               name="timeline_days"
               value={formState.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`}
+              className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
               onChange={handleInputChange}
               // onBlur={props.handleBlur}
             >
@@ -138,6 +218,7 @@ export default function NewTasks({ formState, setFormState }) {
                   </option>
                   {publicArray.map(({ name, duration }, idx) => (
                     <option
+                      key={idx}
                       className="text-slate-500 text-[13.975px]"
                       value={duration}
                     >
@@ -148,74 +229,19 @@ export default function NewTasks({ formState, setFormState }) {
               )}
             </select>
           </div>
-        </div>
 
-        {/* Title  */}
-        <div className="field w-full mb-[5px]">
-          <label htmlFor="title" className="job-label">Title</label>
-          <InputCom
-            fieldClass="px-6"
-            // label="Title"
-            // labelClass="tracking-wide"
-            inputBg="bg-slate-100"
-            type="text"
-            name="title"
-            value={formState.title}
-            inputHandler={handleInputChange}
-            //   blurHandler={props.handleBlur}
-            //   error={props.errors.title && props.touched.title && props.errors.title}
-          />
-        </div>
-
-        {/* Description  */}
-        <div className="field w-full mb-[5px]">
-          <label htmlFor="description" className="job-label">Description</label>
-          <InputCom
-            fieldClass="px-6"
-            // label="Description"
-            // labelClass="tracking-wide"
-            inputBg="bg-slate-100"
-            type="text"
-            name="description"
-            value={formState.description}
-            inputHandler={handleInputChange}
-            //   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">
+          {/* Banner Image */}
           <div className="w-full">
-            <label
-              htmlFor="Job Delivery Details"
-              className='job-label'
-            >
-              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]`}
-              style={{ resize: "none" }}
-              name="job_detail"
-              value={formState.job_detail}
-              onChange={handleInputChange}
-              // onBlur={props.handleBlur}
-            />
+            <div className="h-32 w-full">
+              <img
+                src={selectImage}
+                alt="task_banner_img"
+                className="w-full h-full object-contain"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      {/* Banner Image */}
-      <div className="max-w-[20%] w-full">
-        <div className="h-32 w-full">
-          <img
-            src={selectImage}
-            alt="task_banner_img"
-            className="w-full h-full object-contain"
-          />
-        </div>
+
       </div>
     </form>
   );
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index c06e18e..17654fb 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -5,6 +5,7 @@ import AvailableJobsCard from "../Cards/AvailableJobsCard";
 import DataIteration from "../Helpers/DataIteration";
 import SelectBox from "../Helpers/SelectBox";
 import NewPaginatedList from "../Pagination/NewPaginatedList";
+import InfiniteScroll from "../infiniteScroll/InfiniteScroll";
 
 export default function MainSection({
   className,
@@ -158,6 +159,37 @@ export default function MainSection({
             )
           }
         </NewPaginatedList>
+        // <InfiniteScroll
+        // allData={products}
+        // addItemBy={3}
+        // intialItemsToShow={9}
+        // >
+        //   {
+        //     ({dataToShow})=>(
+        //       <div className="filter-navigate-content w-full min-h-[600px]">
+        //         <div
+        //           className={
+        //             contentDisplay == "grid"
+        //               ? "grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]"
+        //               : "w-full"
+        //           }
+        //         >
+        //         {
+        //           dataToShow.map((datum, index) => (
+        //             <div key={datum.job_uid+index}>
+        //               <AvailableJobsCard
+        //                 contentDisplay={contentDisplay}
+        //                 image_server={image_server}
+        //                 datas={datum}
+        //               />
+        //             </div>
+        //           ))
+        //         }
+        //         </div>
+        //       </div>
+        //     )
+        //   }
+        // </InfiniteScroll>
         :
         <div className="w-full h-[40rem] bg-white dark:bg-dark-white flex justify-center items-center">
           No Jobs Found!
diff --git a/src/components/infiniteScroll/InfiniteScroll.jsx b/src/components/infiniteScroll/InfiniteScroll.jsx
new file mode 100644
index 0000000..60a7749
--- /dev/null
+++ b/src/components/infiniteScroll/InfiniteScroll.jsx
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+export default function InfiniteScroll({
+    allData=data,
+    addItemBy=12,
+    intialItemsToShow=39,
+    children
+}) {
+
+    let [currentPage, setCurrentPage] = useState(intialItemsToShow)
+
+    let [loading, setLoading] = useState(false)
+
+    let dataToShow = allData.slice(0, currentPage)
+
+    // let [winScr, setWinScr] = useState(0)
+
+    const customScroll = ()=>{
+        let wi = window.innerHeight + window.scrollY
+        // let scrollContainer = document.querySelector('.scroll-container').scrollHeight
+        let scrollBody = document.body.offsetHeight
+        if(wi >= scrollBody && allData.length > currentPage){
+            setLoading(true)
+            setTimeout(()=>{
+                setCurrentPage(prev => prev+addItemBy)
+                setLoading(false)
+            },2000)
+        }
+        // else if(window.scrollY < winScr && currentPage > intialItemsToShow){
+        //         setCurrentPage(prev => prev-addItemBy)
+        //         window.scrollTo(0,wi)
+        //         setWinScr(window.scrollY)
+        // }
+        // else if(winScr == 0 && currentPage > intialItemsToShow){
+        //         setCurrentPage(prev => intialItemsToShow)
+        //         window.scrollTo(0,0)
+        //         setWinScr(window.scrollY)
+        // }
+    }
+    useEffect(()=>{
+        window.addEventListener('scroll', customScroll)
+        return () => {
+            window.removeEventListener('scroll', customScroll)
+        }
+    },[currentPage])
+
+  return (
+    <div className='w-full'>
+
+        {children({ dataToShow })}
+        
+        {loading && 
+        <div className='w-full my-2 p-2 flex justify-center items-center'>
+            <LoadingSpinner size='8' />
+        </div>
+        }
+    </div>
+  )
+}
+
+// let data = new Array(100).fill(0).map((_,i) => i )
diff --git a/src/components/jobPopout/FamilyOfferJobPopout.jsx b/src/components/jobPopout/FamilyOfferJobPopout.jsx
index 79612a1..8651be7 100644
--- a/src/components/jobPopout/FamilyOfferJobPopout.jsx
+++ b/src/components/jobPopout/FamilyOfferJobPopout.jsx
@@ -123,13 +123,13 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 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="modal-header-con">
+          <h1 className="modal-title">
             Start Task
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={onClose}
           >
             <svg
@@ -153,7 +153,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white rounded-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
             <div className="flex gap-2">
                 <div className="image-wrapper w-32">
@@ -261,12 +261,12 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
         </div>
 
         {/* close button */}
-        <div className="p-6 flex justify-end">
+        <div className="modal-footer-wrapper flex justify-end">
           <button
             onClick={onClose}
             disabled={requestStatus.loading}
             type="button"
-            className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
+            className="custom-btn border-gradient"
           >
             <span className="text-gradient">Cancel</span>
           </button>
diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx
index 4a63ca4..d45213d 100644
--- a/src/components/jobPopout/OfferJobPopout.jsx
+++ b/src/components/jobPopout/OfferJobPopout.jsx
@@ -103,13 +103,13 @@ function OfferJobPopout({ details, onClose, situation }) {
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 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="modal-header-con">
+          <h1 className="modal-title">
             Start Task
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={onClose}
           >
             <svg
@@ -133,7 +133,7 @@ function OfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white dark:bg-dark-white rounded-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
             <p className="text-lg my-5 font-semibold text-slate-900 dark:text-white tracking-wide">
               {details.title}
@@ -234,12 +234,12 @@ function OfferJobPopout({ details, onClose, situation }) {
         </div>
 
         {/* close button */}
-        <div className="p-6 flex justify-end">
+        <div className="modal-footer-wrapper flex justify-end">
           <button
             onClick={onClose}
             disabled={requestStatus.loading}
             type="button"
-            className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
+            className="custom-btn border-gradient"
           >
             <span className="text-gradient">Cancel</span>
           </button>