diff --git a/src/components/Helpers/PriceFormatter.jsx b/src/components/Helpers/PriceFormatter.jsx
index de417a3..9a1802e 100644
--- a/src/components/Helpers/PriceFormatter.jsx
+++ b/src/components/Helpers/PriceFormatter.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 // export const PriceFormatter = (price, currency, currencyName) => {
 //   const supportedCurrencies = ["USD", "EUR", "GBP"];
@@ -17,32 +17,35 @@ import React from 'react'
 //   return `${formatter.format(price)} ${displayCurrencyName}`;
 // };
 
-
-export const PriceFormatter = (price='00', currency='', currencyName='') => {
+export const PriceFormatter = (
+  price = "00",
+  currency = "",
+  currencyName = ""
+) => {
   // Convert the number to a string
-let numStr = String(price);
+  let numStr = String(price);
 
-// Split the string into integer and decimal parts
-let parts = numStr.split('.');
-let integerPart = parts[0];
-let decimalPart = parts[1] || '';
+  // Split the string into integer and decimal parts
+  let parts = numStr.split(".");
+  let integerPart = parts[0] || "";
+  let decimalPart = parts[1] || "";
 
-// Add thousands separators to the integer part
-// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-let formattedInteger = integerPart;
+  // Add thousands separators to the integer part
+  // let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  let formattedInteger = integerPart;
 
-// Truncate or pad the decimal part to two decimal points
-let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+  // Truncate or pad the decimal part to two decimal points
+  let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
 
-// Combine the formatted integer and decimal parts
-// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+  // Combine the formatted integer and decimal parts
+  // let formattedNumber = formattedInteger + '.' + formattedDecimal;
 
-// return formattedNumber;
+  // return formattedNumber;
   return (
-    <span className='text-sm flex items-center'>
-      <sup>{currency || currencyName || ''}</sup>
-      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
-      <sup>{formattedDecimal}</sup>
+    <span className="text-sm flex items-center">
+      <sup>{currency || currencyName || ""}</sup>
+      <span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
+      <sup>{formattedDecimal || ""}</sup>
     </span>
-  )
-}
+  );
+};
diff --git a/src/components/MyTasks/MyOffersTable.jsx b/src/components/MyTasks/MyOffersTable.jsx
index 1c34560..6a2f673 100644
--- a/src/components/MyTasks/MyOffersTable.jsx
+++ b/src/components/MyTasks/MyOffersTable.jsx
@@ -143,7 +143,10 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
                             <button
                               type="button"
                               onClick={() => {
-                                setOfferPopout({ show: true, data: value });
+                                setOfferPopout({
+                                  show: true,
+                                  data: {...value, thePrice },
+                                });
                               }}
                               className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
                             >
diff --git a/src/components/Resources/index.jsx b/src/components/Resources/index.jsx
index db44893..7c84f03 100644
--- a/src/components/Resources/index.jsx
+++ b/src/components/Resources/index.jsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 // import profileBanner from "../../assets/images/profile-cover.png";
 // import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
 // import marketPlace from "../../data/marketplace_data.json";
-import LoadingSpinner from "../../components/Spinners/LoadingSpinner"
+import LoadingSpinner from "../../components/Spinners/LoadingSpinner";
 import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import {
@@ -35,6 +35,8 @@ export default function Resources(props) {
     setTab(value);
   };
 
+  console.log("first")
+
   // Category Components
   const tabComponents = {
     onsale: <OnSaleTab products={onSaleProducts} />,
@@ -105,38 +107,35 @@ export default function Resources(props) {
     <>
       <Layout>
         <div className="nft-authprofile-wrapper w-full">
-          {__resources.length == 0 ||
-          Object.keys(__resources).length == 0 ? (
+          {__resources.length == 0 || Object.keys(__resources).length == 0 ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size={16} color="sky-blue" />
             </div>
           ) : (
-          <div className="main-wrapper w-full">
-            <div className="content-wrapper-profile-only w-full mb-6">
-              <div className="auth-tab-content relative mb-10">
-                <div className="lg:flex justify-between">
-                  <div className="tab-items">
-                    <ul className="lg:flex lg:space-x-14 space-x-8">
+            <div className="main-wrapper w-full">
+              <div className="content-wrapper-profile-only w-full mb-6">
+                <div className="auth-tab-content relative mb-10">
+                  <div className="lg:flex justify-between">
+                    <div className="tab-items">
                       <TabList tabCategories={tab_categories} />
-                    </ul>
-                  </div>
-                  <div style={{ transform: "translateY(-22px)" }}>
-                    <Link
-                      to="/upload-product"
-                      className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                    >
-                      Upload Product
-                    </Link>
+                    </div>
+                    <div style={{ transform: "translateY(-22px)" }}>
+                      <Link
+                        to="/upload-product"
+                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+                      >
+                        Upload Product
+                      </Link>
+                    </div>
                   </div>
+                  <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>
-                <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
+              </div>
+
+              <div className="tab-cotainer w-full mb-10">
+                {selectedTabComponent}
               </div>
             </div>
-
-            <div className="tab-cotainer w-full mb-10">
-              {selectedTabComponent}
-            </div>
-          </div>
           )}
         </div>
       </Layout>
diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx
index 6dc6bb1..149cecf 100644
--- a/src/components/jobPopout/OfferJobPopout.jsx
+++ b/src/components/jobPopout/OfferJobPopout.jsx
@@ -1,64 +1,108 @@
-import React, {useState} from 'react'
-import Detail from './popoutcomponent/Detail'
-import ModalCom from '../Helpers/ModalCom'
-import { useNavigate } from 'react-router-dom'
+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'
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import { tableReload } from '../../store/TableReloads'
-import { useDispatch } from 'react-redux'
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
 
-function OfferJobPopout({details, onClose, situation}) {
-  const apiUrl = new usersService()
-  const navigate = useNavigate()
-  const dispatch = useDispatch()
+function OfferJobPopout({ details, onClose, situation }) {
+  const apiUrl = new usersService();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
 
-  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+    trigger: "",
+  });
 
   //FUNCTION TO HANDLE AN OFFER
-  const handleOffer = ({target:{name}}) => {
+  const handleOffer = ({ target: { name } }) => {
     const reqData = {
       // offer_result: 100,
       offer_code: details.contract,
-      contract: 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 == "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 == "reject") {
+      setRequestStatus({
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "reject",
+      });
+      reqData.offer_result = 333;
     }
 
     // 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()
-        dispatch(tableReload({type:'MYTASKTABLE'}))
-        navigate('/mytask', {replace:true})
-        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)
-    })
-  }
+    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();
+          dispatch(tableReload({ type: "MYTASKTABLE" }));
+          navigate("/mytask", { replace: true });
+          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">
+      <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">
         <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">
             Start Task
@@ -89,117 +133,123 @@ function OfferJobPopout({details, onClose, situation}) {
             </svg>
           </button>
         </div>
-        <div className='md:flex bg-white rounded-lg shadow-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 tracking-wide'>{details.title}</p>
-  
+        <div className="md:flex bg-white rounded-lg shadow-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 tracking-wide">
+              {details.title}
+            </p>
+
             {/* INPUT SECTION */}
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Date' 
-                  value={details.offer_added || 'default'}
-              />
+            <div className="my-2 md:flex">
+              <Detail label="Date" value={details.offer_added || "default"} />
             </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Description' 
-                  value={details.description} 
-              />
+
+            <div className="my-2 md:flex">
+              <Detail label="Description" value={details.description} />
             </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Offer Expire' 
-                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
-              />
-            </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Price' 
-                  value={`${details.price*0.01} ${details.currency}`} 
-              />
-            </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Duration' 
-                  value={`${details.timeline_days} day(s)`} 
+
+            <div className="my-2 md:flex">
+              <Detail
+                label="Offer Expire"
+                value={
+                  details.expire &&
+                  `${details.expire.split(" ")[0]} ${
+                    details.expire.split(" ")[1].split(".")[0]
+                  }`
+                }
               />
             </div>
 
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Detail' 
-                  value={details.job_description || details.description} 
+            <div className="my-2 md:flex">
+              <Detail
+                label="Price"
+                value={details.thePrice}
               />
             </div>
-  
-          </div>
-  
-          {/* ACTION SECTION */}
-          <div className='p-4 w-full md:w-1/4 h-full'>
-            <div className='my-3 md:flex md:justify-center'>
-              {requestStatus.loading && requestStatus.trigger == 'offer' ?
-                <LoadingSpinner size={8} color='sky-blue' />
-              :
-                <button 
-                  name='accept' 
-                  onClick={handleOffer} 
-                  disabled={requestStatus.loading}
-                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
-                    Accept Offer
-                </button>
-              }
+
+            <div className="my-2 md:flex">
+              <Detail
+                label="Duration"
+                value={`${details.timeline_days} day(s)`}
+              />
             </div>
-  
-            <div className='mt-10 md:mt-20 md:flex md:justify-center'>
-              {requestStatus.loading && requestStatus.trigger == 'reject' ?
-                <LoadingSpinner size={8} color='sky-blue' />
-              :
-                <button 
-                  name='reject' 
+
+            <div className="my-2 md:flex">
+              <Detail
+                label="Detail"
+                value={details.job_description || details.description}
+              />
+            </div>
+          </div>
+
+          {/* ACTION SECTION */}
+          <div className="p-4 w-full md:w-1/4 h-full">
+            <div className="my-3 md:flex md:justify-center">
+              {requestStatus.loading && requestStatus.trigger == "offer" ? (
+                <LoadingSpinner size={8} color="sky-blue" />
+              ) : (
+                <button
+                  name="accept"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
-                    Reject Offer
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  Accept Offer
                 </button>
-              }
+              )}
+            </div>
+
+            <div className="mt-10 md:mt-20 md:flex md:justify-center">
+              {requestStatus.loading && requestStatus.trigger == "reject" ? (
+                <LoadingSpinner size={8} color="sky-blue" />
+              ) : (
+                <button
+                  name="reject"
+                  onClick={handleOffer}
+                  disabled={requestStatus.loading}
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  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>
-                      )
-                )}
+            {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 */} 
+        {/* close button */}
         <div className="p-6 flex justify-end">
           <button
-              onClick={onClose}
-              disabled={requestStatus.loading}
-              type="button"
-              className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
+            onClick={onClose}
+            disabled={requestStatus.loading}
+            type="button"
+            className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
+          >
+            <span className="text-gradient">Cancel</span>
+          </button>
         </div>
         {/* end of close button */}
-    </div>
-  </ModalCom>
-    )
+      </div>
+    </ModalCom>
+  );
 }
 
-export default OfferJobPopout
\ No newline at end of file
+export default OfferJobPopout;