diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx
index 2393e31..60f42ad 100644
--- a/src/components/MyTasks/MyJobTable.jsx
+++ b/src/components/MyTasks/MyJobTable.jsx
@@ -68,7 +68,7 @@ export default function MyJobTable({ className }) {
                 >
                   <div className=" py-4">
                     <div className="flex space-x-2 items-center">
-                      <div className="w-full min-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                      <div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                         <img
                           src={dataImage1}
                           alt="data"
diff --git a/src/components/MyTasks/MyOffersTable.jsx b/src/components/MyTasks/MyOffersTable.jsx
index 4500689..550814c 100644
--- a/src/components/MyTasks/MyOffersTable.jsx
+++ b/src/components/MyTasks/MyOffersTable.jsx
@@ -117,7 +117,7 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                                         MyActiveOffersList?.result_list?.length > 0 &&
                                         MyActiveOffersList.result_list.map((value, index) => (
 
-                                            <div className="item" id={index}>
+                                            <div className="item" key={index}>
                                                 <div className="offer-slide-item" >
                                                     {/* title */}
                                                     <div className="flex justify-center">
diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx
index c1e010b..78f699f 100644
--- a/src/components/jobPopout/OfferJobPopout.jsx
+++ b/src/components/jobPopout/OfferJobPopout.jsx
@@ -1,9 +1,59 @@
-import React from 'react'
+import React, {useState} from 'react'
 import Detail from './popoutcomponent/Detail'
 import ModalCom from '../Helpers/ModalCom'
+import { useNavigate } from 'react-router-dom'
 
+import usersService from '../../services/UsersService'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
 
 function OfferJobPopout({details, onClose, situation}) {
+  const apiUrl = new usersService()
+  const navigate = useNavigate()
+
+  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
+
+  //FUNCTION TO HANDLE AN OFFER
+  const handleOffer = ({target:{name}}) => {
+    const reqData = {
+      // offer_result: 100,
+      offer_code: details.contract,
+      contract: details.contract
+    }
+
+    //logic to determine the button pressed and set reqDate accordingly
+    if(name == 'accept'){
+      setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'})
+      reqData.offer_result = 100
+    }
+    if(name == 'reject'){
+      setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
+      reqData.offer_result = 333
+    }
+    if(name == 'cancel'){
+      setRequestStatus({loading: true, status: false, message: '', trigger: 'cancel'})
+      reqData.offer_result = 222
+    }
+
+    // API CALL
+    apiUrl.offersResponse(reqData).then(response => {
+      if(response.status != 200 || response.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
+      setTimeout(()=>{
+        onClose()
+        setRequestStatus({loading: false, status: false, message: '', trigger: ''})
+      },2000)
+    }).catch(error => {
+      setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: '', trigger: ''})
+      },5000)
+    })
+  }
+
   return (
     <ModalCom action={onClose} situation={situation}>
     <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -89,24 +139,65 @@ function OfferJobPopout({details, onClose, situation}) {
           {/* ACTION SECTION */}
           <div className='p-4 w-full md:w-1/4 h-full'>
             <div className='my-3 md:flex md:justify-center'>
-              <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Accept Offer</button>
+              {requestStatus.loading && requestStatus.trigger == 'offer' ?
+                <LoadingSpinner size={8} color='sky-blue' />
+              :
+                <button 
+                  name='accept' 
+                  onClick={handleOffer} 
+                  disabled={requestStatus.loading}
+                  className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>
+                    Accept Offer
+                </button>
+              }
             </div>
   
             <div className='mt-10 md:mt-20 md:flex md:justify-center'>
-              <button className='px-2 py-1 text-sm text-white bg-red-500 hover:opacity-90 rounded-md'>Reject Offer</button>
+              {requestStatus.loading && requestStatus.trigger == 'reject' ?
+                <LoadingSpinner size={8} color='sky-blue' />
+              :
+                <button 
+                  name='reject' 
+                  onClick={handleOffer}
+                  disabled={requestStatus.loading}
+                  className='px-2 py-1 text-sm text-white bg-red-500 hover:opacity-90 rounded-md'>
+                    Reject Offer
+                </button>
+              }
             </div>
+
+            {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+            {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>
 
         {/* close button */} 
         <div className="p-6 flex justify-end">
-          <button
-            onClick={onClose}
-            type="button"
-            className="border border-red-500 text-18 tracking-wide px-2 py-2 rounded-full"
-          >
-            <span className="text-red-500">Cancel</span>
-          </button>
+          {requestStatus.loading && requestStatus.trigger == 'cancel' ?
+            <LoadingSpinner size={8} color='sky-blue' />
+            :
+            <button
+              onClick={handleOffer}
+              disabled={requestStatus.loading}
+              type="button"
+              name='cancel'
+              className="border border-red-500 text-red-500 text-18 tracking-wide px-2 py-2 rounded-full"
+            >
+              Cancel
+            </button>
+          }
         </div>
         {/* end of close button */}
     </div>
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index 8408d2d..370da93 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -532,6 +532,18 @@ class usersService {
     return this.postAuxEnd("/verifysignuplink", reqData);
   }
 
+  // END POINT FOR OFFER RESPONSE (i.e TO ACCEPT, REJECT, CANCEL, ETC OFFER)
+  offersResponse(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 15012,
+      ...reqData,
+    };
+    return this.postAuxEnd("/offersresponse", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)