diff --git a/src/components/Cards/AvailableJobsCard.jsx b/src/components/Cards/AvailableJobsCard.jsx
index d5cc2d9..7ffd7ed 100644
--- a/src/components/Cards/AvailableJobsCard.jsx
+++ b/src/components/Cards/AvailableJobsCard.jsx
@@ -9,13 +9,13 @@ export default function AvailableJobsCard({
   className,
   datas,
   hidden = false,
-  contentDisplay
+  contentDisplay,
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
   const [imageUrl, setImageUrl] = useState("");
 
-  let thePrice = PriceFormatter(  
+  let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
     datas?.currency
@@ -27,121 +27,136 @@ export default function AvailableJobsCard({
   }, []);
   return (
     <>
-    {contentDisplay == 'grid' ?
-      <div
-        className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-          className || ""
-        }`}
-      >
-        <div className="flex flex-col justify-between w-full h-full">
-          <Link to="/shop-details" className="mb-2.5">
+      {contentDisplay == "grid" ? (
+        <div
+          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+            className || ""
+          }`}
+        >
+          <div
+            onClick={() => {
+              setMarketPopUp({ show: true, data: datas });
+            }}
+            className="flex flex-col justify-between w-full h-full"
+          >
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               {datas.title}
             </h1>
-          </Link>
 
-          <div className="card-two-info flex justify-between items-center">
-            <div className="owned-by flex space-x-2 items-center">
-              <div>
-                <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                <p className="text-base   text-dark-gray dark:text-white">
-                  {datas.offer_added}
-                </p>
-              </div>
-            </div>
-            <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-            <div className="created-by flex space-x-2 items-center flex-row-reverse">
-              <div>
-                <p className="text-thin-light-gray text-sm leading-3 text-right">
-                  Expires
-                </p>
-                <p className="text-base text-dark-gray dark:text-white text-right">
-                  {datas.expire}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="thumbnail-area w-full">
-            <div
-              className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
-              style={{
-                backgroundImage: `url('${imageUrl}')`,
-              }}
-            >
-              <div className="flex justify-center">{datas.description}</div>
-            </div>
-          </div>
-          <div className="details-area">
-            <div className="product-two-options flex justify-between mb-5 relative">
-              {/*      <div className="status">*/}
-              {/*          {datas.isActive && (*/}
-              {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-              {/*  Active*/}
-              {/*</span>*/}
-              {/*          )}*/}
-              {/*      </div>*/}
-
-              {/*<div className=" review flex space-x-2">*/}
-              {/*    <button*/}
-              {/*        onClick={favoriteHandler}*/}
-              {/*        type="button"*/}
-              {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-              {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-              {/*        }`}*/}
-              {/*    >*/}
-              {/*        <Icons name="star" />*/}
-              {/*    </button>*/}
-              {/*</div>*/}
-            </div>
-
-            <div className="flex justify-between">
-              <div className="flex items-center space-x-2">
+            <div className="card-two-info flex justify-between items-center">
+              <div className="owned-by flex space-x-2 items-center">
                 <div>
-                  <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                    {/* {thePrice} | {datas.timeline_days} day(s) */}
-                    {thePrice}
+                  <p className="text-thin-light-gray text-sm leading-3">
+                    Added
                   </p>
-                  <p className="text-sm text-lighter-gray">
-                    ( {datas.offer_code}) |
-                    <span className="italic ml-1">
-                      {datas.timeline_days} day(s)
-                    </span>
+                  <p className="text-base   text-dark-gray dark:text-white">
+                    {datas.offer_added}
                   </p>
                 </div>
               </div>
-              <div>
-                <button
-                  type="button"
-                  className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                  onClick={() => {
-                    setMarketPopUp({ show: true, data: datas });
-                  }}
-                >
-                  View
-                </button>
+              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+              <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3 text-right">
+                    Expires
+                  </p>
+                  <p className="text-base text-dark-gray dark:text-white text-right">
+                    {datas.expire}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="thumbnail-area w-full">
+              <div
+                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
+                style={{
+                  backgroundImage: `url('${imageUrl}')`,
+                }}
+              >
+                <div className="flex justify-center">{datas.description}</div>
+              </div>
+            </div>
+            <div className="details-area">
+              <div className="product-two-options flex justify-between mb-5 relative">
+                {/*      <div className="status">*/}
+                {/*          {datas.isActive && (*/}
+                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+                {/*  Active*/}
+                {/*</span>*/}
+                {/*          )}*/}
+                {/*      </div>*/}
+
+                {/*<div className=" review flex space-x-2">*/}
+                {/*    <button*/}
+                {/*        onClick={favoriteHandler}*/}
+                {/*        type="button"*/}
+                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+                {/*        }`}*/}
+                {/*    >*/}
+                {/*        <Icons name="star" />*/}
+                {/*    </button>*/}
+                {/*</div>*/}
+              </div>
+
+              <div className="flex justify-between">
+                <div className="flex items-center space-x-2">
+                  <div>
+                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                      {/* {thePrice} | {datas.timeline_days} day(s) */}
+                      {thePrice}
+                    </p>
+                    <p className="text-sm text-lighter-gray">
+                      ( {datas.offer_code}) |
+                      <span className="italic ml-1">
+                        {datas.timeline_days} day(s)
+                      </span>
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <button
+                    type="button"
+                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                    onClick={() => {
+                      setMarketPopUp({ show: true, data: datas });
+                    }}
+                  >
+                    View
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    :
-      <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
-        <div className="flex gap-5 items-center w-full">
-          <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
-            <img src={dataImage2} alt="data" className="w-full h-full" />
-          </div>
-          <div className="flex flex-col flex-[0.9]">
-            <Link to="/shop-details" className="">
-              <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+      ) : (
+        <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+          <div className="flex gap-5 items-center w-full">
+            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+              <img src={dataImage2} alt="data" className="w-full h-full" />
+            </div>
+            <div className="flex flex-col flex-[0.9]">
+              <h1
+                onClick={() => {
+                  setMarketPopUp({ show: true, data: datas });
+                }}
+                className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
+              >
                 {datas?.title}
               </h1>
-            </Link>
 
-            <div className="my-2">
-              <p className="text-dark-gray dark:text-white">{datas?.description}</p>
-            </div>
+              <div
+                onClick={() => {
+                  setMarketPopUp({ show: true, data: datas });
+                }}
+                className="my-2"
+              >
+                <p className="text-dark-gray dark:text-white">
+                  {datas?.description}
+                </p>
+              </div>
 
-            {/* <div className="card-two-info flex gap-2 items-center">
+              {/* <div className="card-two-info flex gap-2 items-center">
               <div className="owned-by flex space-x-2 items-center">
                 <div>
                   <p className="text-thin-light-gray text-sm leading-3">Added</p>
@@ -162,40 +177,37 @@ export default function AvailableJobsCard({
                 </div>
               </div>
             </div> */}
-            <div className="block sm:flex flex-wrap gap-4">
-              <p className="text-sm text-thin-light-gray flex flext-start gap-1">
-                Price: <span className="text-purple">{thePrice}</span>
-              </p>
-              <p className="text-sm text-thin-light-gray">
-                Duration:{" "}
-                <span className="text-purple italic">
-                  {" "}
-                  {datas?.timeline_days} day(s)
-                </span>
-              </p>
-              <p className="text-sm text-thin-light-gray">
-                Code:{" "}
-                <span className="text-purple">
-                  {" "}
-                  {datas?.offer_code}
-                </span>
-              </p>
+              <div className="block sm:flex flex-wrap gap-4">
+                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
+                  Price: <span className="text-purple">{thePrice}</span>
+                </p>
+                <p className="text-sm text-thin-light-gray">
+                  Duration:{" "}
+                  <span className="text-purple italic">
+                    {" "}
+                    {datas?.timeline_days} day(s)
+                  </span>
+                </p>
+                <p className="text-sm text-thin-light-gray">
+                  Code:{" "}
+                  <span className="text-purple"> {datas?.offer_code}</span>
+                </p>
+              </div>
             </div>
           </div>
+          <div className="">
+            <button
+              type="button"
+              className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              onClick={() => {
+                setMarketPopUp({ show: true, data: datas });
+              }}
+            >
+              View
+            </button>
+          </div>
         </div>
-        <div className="">
-          <button
-            type="button"
-            className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-            onClick={() => {
-              setMarketPopUp({ show: true, data: datas });
-            }}
-          >
-            View
-          </button>
-        </div>
-      </div>
-    }
+      )}
       {marketPopUp.show && (
         <MarketPopUp
           details={datas}
diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
index 12a3d39..2efad21 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
@@ -2,11 +2,13 @@ import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { handlePagingFunc, PaginatedList } from "../../Pagination";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import SuggestTask from "../../FamilyPopup/SuggestTask";
 
 const FamilyWaitlist = ({ familyData, className, loader }) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
-
+  const [popUp, setPopUp] = useState({ show: false, data: {} });
+  
   const [currentPage, setCurrentPage] = useState(0);
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
@@ -18,6 +20,10 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
 
   const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
+  };
+
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
@@ -75,7 +81,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
                         </td>
                         <td className="text-right py-4 px-2">
                           <button
-                            type="button"
+                            onClick={() => setPopUp({ show: true, data: value })}
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
                             View
@@ -100,6 +106,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
           )}
         </>
       )}
+      {popUp.show && <SuggestTask details={popUp.data} onClose={() => {setPopUp({ show: false, data: {} })}} situation={popUp.show} />}
     </div>
   );
 };
diff --git a/src/components/FamilyPopup/SuggestTask.jsx b/src/components/FamilyPopup/SuggestTask.jsx
index 8113c58..524df04 100644
--- a/src/components/FamilyPopup/SuggestTask.jsx
+++ b/src/components/FamilyPopup/SuggestTask.jsx
@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from "react";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
 import ModalCom from "../Helpers/ModalCom";
 import { Form, Formik } from "formik";
 import InputCom from "../Helpers/Inputs/InputCom";
@@ -6,6 +7,7 @@ import usersService from "../../services/UsersService";
 
 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
 const SuggestTask = ({ details, onClose, situation }) => {
+  const { pathname, state } = useLocation();
   const [submitTask, setSubmitTask] = useState({
     loading: false,
     msg: "",
@@ -16,16 +18,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
   const initialValues = {
     title: details?.title || "",
     description: details?.description || "",
-    banner: details?.banner
+    banner: details?.banner,
   };
 
   const apiCall = new usersService();
 
   const handleSubmit = async (values) => {
-    if(!values.title && !values.description) return;
+    if (!values.title && !values.description) return;
     try {
       setSubmitTask({ loading: true });
-      const reqData = { ...values, };
+      const reqData = { ...values };
       const res = await apiCall.sendFamilySuggestedTasks(reqData);
       if (res.internal_return < 0) {
         setSubmitTask({ loading: false, msg: res.status, state: "bad" });
@@ -40,12 +42,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
       throw new Error("Error Occurred", error);
     }
   };
+
+  // console.log("state >-->>", state);
   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-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-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
-            Suggest to Parent
+            {pathname === "/manage-family"
+              ? `${state?.firstname}'s Suggested Task`
+              : "Suggest to Parent"}
           </h1>
           <button
             type="button"
@@ -93,10 +99,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
                     {/* Title */}
                     <div className="field w-full mb-[15px]">
                       <InputCom
-                        fieldClass="px-6"
+                        fieldClass={
+                          pathname === "/manage-family" ? "px-2" : "px-6"
+                        }
                         label="Title"
                         labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
+                        inputBg={
+                          pathname === "/manage-family"
+                            ? "bg-white"
+                            : "bg-slate-100"
+                        }
                         inputClass="disabled:cursor-default"
                         type="text"
                         name="title"
@@ -129,7 +141,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
                       <textarea
                         id="description"
                         rows="5"
-                        className={`input-field px-3 pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+                        className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
+                          pathname === "/manage-family"
+                            ? "px-2"
+                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
+                        }`}
                         style={{ resize: "none" }}
                         name="description"
                         value={props.values.description}
@@ -148,21 +164,21 @@ const SuggestTask = ({ details, onClose, situation }) => {
                     >
                       <span className="text-gradient"> Cancel</span>
                     </button>
-
-                    <button
-                      type="submit"
-                      disabled={props.isSubmitting}
-                      className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-                    >
-                      {submitTask.loading
-                        ? "Submitting Task"
-                        : submitTask.state == "success"
-                        ? "Task Submitted"
-                        : submitTask.state == "bad"
-                        ? "An Error Occurred"
-                        : "Send to Parents"}
-                    </button>
-                    {/* )} */}
+                    {pathname !== "/manage-family" && (
+                      <button
+                        type="submit"
+                        disabled={props.isSubmitting}
+                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+                      >
+                        {submitTask.loading
+                          ? "Submitting Task"
+                          : submitTask.state == "success"
+                          ? "Task Submitted"
+                          : submitTask.state == "bad"
+                          ? "An Error Occurred"
+                          : "Send to Parents"}
+                      </button>
+                    )}
                   </div>
                 </div>
               </Form>
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 24146ef..77ed8e1 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -76,7 +76,7 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border 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 ${inputClass}`}
+        className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${inputClass ? inputClass : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"}`}
       >
         <input
           placeholder={placeholder}
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index 90eb038..8f138ce 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react";
 import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
-import ListView from '../../assets/images/list-view.png'
-import GridView from '../../assets/images/grid-view.svg'
+import ListView from "../../assets/images/list-view.png";
+import GridView from "../../assets/images/grid-view.svg";
 import SelectBox from "../Helpers/SelectBox";
 
 export default function MainSection({
@@ -17,7 +17,7 @@ export default function MainSection({
   );
   const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
 
-  let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE
+  let [contentDisplay, setContentDisplay] = useState("grid"); // STATE TO HOLD LIST VIEW STYLE
 
   // Convert to array in order to map
   const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
@@ -29,8 +29,8 @@ export default function MainSection({
     setTab(value);
   };
 
-   // Handles the category selection on mobile view
-   const handleSetCategory = (value) => {
+  // Handles the category selection on mobile view
+  const handleSetCategory = (value) => {
     for (let i in marketCategories) {
       if (marketCategories[i] == value) {
         setTab(i);
@@ -57,7 +57,7 @@ export default function MainSection({
             <div className="hidden lg:flex md:space-x-8 space-x-2">
               {mappedArray.map(({ key, value }) => (
                 <span
-                key={key}
+                  key={key}
                   onClick={() => tabHandler(key)}
                   className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
                     tab === key
@@ -76,30 +76,43 @@ export default function MainSection({
                 datas={Object.values(marketCategories)}
                 className="Update-table-dropdown"
                 contentBodyClasses="w-auto min-w-max"
-                position='left'
+                position="left"
               />
             </div>
           </div>
           {/* contentDisplay toggler */}
           <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
-              <img 
-                title={contentDisplay=='grid'? 'list view' : 'grid view'}
-                onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
-                src={contentDisplay=='grid'? ListView : GridView}
-                className="w-full h-full cursor-pointer" alt="view" 
-              />
+            <img
+              title={contentDisplay == "grid" ? "list view" : "grid view"}
+              onClick={() =>
+                setContentDisplay((prev) => (prev == "grid" ? "list" : "grid"))
+              }
+              src={contentDisplay == "grid" ? ListView : GridView}
+              className="w-full h-full cursor-pointer"
+              alt="view"
+            />
           </div>
           {/* end of contentDisplay toggler */}
         </div>
         <div className="filter-navigate-content w-full min-h-screen">
-          <div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}>
+          <div
+            className={
+              contentDisplay == "grid"
+                ? "grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]"
+                : "w-full"
+            }
+          >
             <DataIteration
               datas={products}
               startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
               {({ datas }) => (
-                <AvailableJobsCard contentDisplay={contentDisplay} key={datas.id} datas={datas} />
+                <AvailableJobsCard
+                  contentDisplay={contentDisplay}
+                  key={datas.id}
+                  datas={datas}
+                />
               )}
             </DataIteration>
           </div>