diff --git a/src/components/OffersInterest/ManageInterestOffer.jsx b/src/components/OffersInterest/ManageInterestOffer.jsx
index 523dff8..5f4f243 100644
--- a/src/components/OffersInterest/ManageInterestOffer.jsx
+++ b/src/components/OffersInterest/ManageInterestOffer.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import { useNavigate } from "react-router-dom";
@@ -11,6 +11,8 @@ import OthersInterestedTable from "./OthersInterestedTable";
 export default function ManageInterestOffer(props) {
     const navigate = useNavigate()
 
+    let [tab, setTab] = useState("info"); //message STATE FOR SWITCHING BETWEEN TABS
+
     const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
@@ -25,17 +27,21 @@ export default function ManageInterestOffer(props) {
     const filterHandler = (value) => {
         setValue(value);
     };
+
+    useEffect(()=>{
+        // run API to get message to replace message array above, add reload variable as dependence array
+    },[])
     return (
         <Layout>
             <CommonHead
                 commonHeadData={props.commonHeadData}
             />
             <div className="notification-page w-full mb-10">
-                <div className="notification-wrapper w-full">
+                <div className="notification-wrapper w-full mb-4">
                     {/* heading */}
-                    <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                    <div className="sm:flex justify-between items-center mb-3">
+                        <div className="mb-3 sm:mb-0">
+                            <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                                 <span className={`${selectTab === "today" ? "block" : "hidden"}`}>Manage Offer Interest</span>
                             </h1>
                         </div>
@@ -43,33 +49,10 @@ export default function ManageInterestOffer(props) {
                     </div>
 
                     {/* manage offer section */}
-                    <div className="w-full mb-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow">
-                        {/* <div className="w-full flex justify-start space-x-3 items-center">
-                            <button
-                            type="button"
-                            className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-                            onClick={() =>
-                                navigate(props.offerDetails.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-sm lg:text-xl font-bold text-sky-blue dark:text-white tracking-wide">
-                            {props.offerDetails?.offer_code && props.offerDetails.offer_code}
-                            </h1>
-                        </div> */}
-
-                        <div className="my-2 w-full md:grid gap-5 grid-cols-3">
+                    <div className="w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+                        <div className="my-2 w-full sm:grid gap-5 grid-cols-4">
                             {/* Detail section */}
-                            <div className="w-full mb-5 lg:mb-0 col-span-2">
+                            <div className="w-full mb-5 lg:mb-0 col-span-3">
                                 <div className="w-full flex justify-start space-x-3 items-center">
                                     <button
                                     type="button"
@@ -92,114 +75,147 @@ export default function ManageInterestOffer(props) {
                                     {props.offerDetails?.offer_code && props.offerDetails.offer_code}
                                     </h1>
                                 </div>
-                                <h1 className="my-5 text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide border">
+                                <h1 className="my-3 text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide border">
                                 {props.offerDetails?.title}
                                 </h1>
-                                <div className="flex items-center">
-                                    <div className="w-3/4">
-                                        <div className="my-5 flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy name</span>
-                                        </div>
-                                        <div className="my-5 flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy Date</span>
-                                        </div>
-                                        <div className="my-5 flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
-                                        </div>
-                                        <div className="my-5 flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
-                                        </div>
-                                        <div className="my-5 flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
-                                        </div>
-                                        <div className="my-5 flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
-                                        </div>
-                                        <div className="flex items-center gap-1">
-                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
-                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
-                                        </div>
-                                    </div>
 
-                                    <div className="w-1/4 flex flex-col justify-center items-center gap-10">
+                                <div className="w-full">
+                                    {/* switch button */}
+                                    <div className="my-1 flex items-center border-b border-slate-300">
                                         <button
-                                            type="button"
-                                            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                        name="info"
+                                        onClick={(e) => setTab(e.target.name)}
+                                        className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
+                                            tab == "info" ? "border-sky-blue" : "border-slate-300"
+                                        } tracking-wide transition duration-200`}
                                         >
-                                            <span className="text-white">Accept</span>
+                                        Info
                                         </button>
                                         <button
-                                            type="button"
-                                            className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                                        name="message"
+                                        onClick={(e) => setTab(e.target.name)}
+                                        className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
+                                            tab == "message" ? "border-sky-blue" : "border-slate-300"
+                                        }  tracking-wide transition duration-200`}
                                         >
-                                            <span className="text-gradient">Reject</span>
+                                        Messages ({messageList.data.length})
                                         </button>
                                     </div>
+                                    {/* END OF switch button */}
+
+                                    {/* info tab */}
+                                    {tab == 'info' ?
+                                    <div className="info-details w-full border-t">
+                                        <div className="my-3 flex items-center gap-1">
+                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
+                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                        </div>
+                                        <div className="my-3 flex items-center gap-1">
+                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
+                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                        </div>
+                                        <div className="my-3 flex items-center gap-1">
+                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
+                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_completed ? props.offerDetails?.client_jobs_completed :0}</span>
+                                        </div>
+                                        <div className="my-0 md:my-3 block md:flex items-center gap-10">
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_active ? props.offerDetails?.client_jobs_active:0}</span>
+                                            </div>
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_missed ? props.offerDetails?.client_jobs_missed:0}</span>
+                                            </div>
+                                        </div>
+                                        <div className="block md:flex items-center gap-10">
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_percent_completion ? props.offerDetails?.client_percent_completion:0}</span>
+                                            </div>
+                                            <div className="flex items-center gap-1">
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_offers_pending ? props.offerDetails?.client_offers_pending:0}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    :
+                                    <div className="message-details w-full border-t">
+                                        <div className="my-0 w-full flex items-center gap-5">
+                                            <div className="w-3/4">
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
+                                                <textarea rows={2} autoFocus={true} className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" />
+                                            </div>
+                                            <div className="w-1/4 flex flex-col justify-center items-center">
+                                                <button
+                                                    type="button"
+                                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                >
+                                                    <span className="text-white">Send</span>
+                                                </button>
+                                            </div>
+                                        </div>
+                                        {/* message list */}
+                                        <div className="min-h-[100px] max-h-[200px] overflow-y-auto">
+                                        {currentMessageList.map((item, index)=>(
+                                            <div key={index} className="my-2 w-full flex items-center gap-1">
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
+                                            </div>
+                                        ))}
+                                        </div>
+
+                                        {/* PAGINATION BUTTON */}
+                                        <PaginatedList
+                                            onClick={handlePagination}
+                                            prev={currentPage == 0 ? true : false}
+                                            next={
+                                                currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                                                messageList?.data?.length
+                                                    ? true
+                                                    : false
+                                            }
+                                            data={messageList?.data}
+                                            start={indexOfFirstItem}
+                                            stop={indexOfLastItem}
+                                        />
+                                        {/* END OF PAGINATION BUTTON */}
+                                    </div>
+                                    }
                                 </div>
                             </div>
                             {/* END OF Detail section */}
 
-                            {/* message section */}
+                            {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
-                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
-                                <div className="my-4 w-full">
-                                     <textarea rows={5} className="p-4 text-base font-bold text-dark-gray dark:text-white tracking-wide w-full resize-none rounded-md outline-none" />
-                                     <div className="w-full flex justify-end items-center">
-                                        <button
-                                            type="button"
-                                            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                        >
-                                            <span className="text-white">Send</span>
-                                        </button>
-                                     </div>
+                                <div className="w-full h-full flex flex-col justify-center items-center gap-10">
+                                    <button
+                                        type="button"
+                                        className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                    >
+                                        <span className="text-white">Accept</span>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                                    >
+                                        <span className="text-gradient">Reject</span>
+                                    </button>
                                 </div>
-                                {/* message list */}
-                                {currentMessageList.map((item, index)=>(
-                                    <div key={index} className="my-3 w-full">
-                                        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
-                                        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
-                                    </div>
-                                ))}
-
-                                {/* PAGINATION BUTTON */}
-                                <PaginatedList
-                                    onClick={handlePagination}
-                                    prev={currentPage == 0 ? true : false}
-                                    next={
-                                        currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                                        messageList?.data?.length
-                                            ? true
-                                            : false
-                                    }
-                                    data={messageList?.data}
-                                    start={indexOfFirstItem}
-                                    stop={indexOfLastItem}
-                                />
-                                {/* END OF PAGINATION BUTTON */}
                             </div>
-                            {/* END of message section */}
+                            {/* END of BUTTON section */}
                         </div>
                     </div>
                     {/* END OF manage offer section */}
                 </div>
 
                 <div className="w-full overflow-x-auto">
-                    <div className="notification-page w-full mb-10">
-                        <div className="notification-wrapper w-full">
-                            {/* heading */}
-                            <div className="sm:flex justify-between items-center mb-6">
-                                <div className="mb-5 sm:mb-0">
-                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
-                                        <span className={`${selectTab === "today" ? "block" : "hidden"}`}>Others interested in this Task</span>
-                                    </h1>
-                                </div>
-                            </div>
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-3">
+                        <div className="mb-3 sm:mb-0">
+                            <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+                                <span className={`${selectTab === "today" ? "block" : "hidden"}`}>Others interested in this Task</span>
+                            </h1>
                         </div>
                     </div>
                     <OthersInterestedTable othersInterestedList={props.othersInterestedList} />
diff --git a/src/components/OffersInterest/OthersInterestedTable.jsx b/src/components/OffersInterest/OthersInterestedTable.jsx
index 7f2d704..dd9933f 100644
--- a/src/components/OffersInterest/OthersInterestedTable.jsx
+++ b/src/components/OffersInterest/OthersInterestedTable.jsx
@@ -32,7 +32,7 @@ export default function OthersInterestTable({othersInterestedList, className}) {
 
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
                 className || ""
             }`}
         >
diff --git a/src/views/ManageInterestOfferPage.jsx b/src/views/ManageInterestOfferPage.jsx
index 8c84578..4cd986c 100644
--- a/src/views/ManageInterestOfferPage.jsx
+++ b/src/views/ManageInterestOfferPage.jsx
@@ -9,7 +9,7 @@ export default function MyReviewDueJobsPage() {
     let navigate = useNavigate()
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-    let { othersInterestedTable } = useSelector((state) => state.tableReload);
+    let { othersInterestedTable } = useSelector((state) => state.tableReload); // FOR OTHERS INTERESTED TABLE RELOAD
 
     const apiCall = new usersService();
     const [othersInterestedList, setOthersInterestedList] = useState({loading: true, data: []})