diff --git a/src/components/Cards/OfferCard.jsx b/src/components/Cards/OfferCard.jsx
index 019cd3f..da469ae 100644
--- a/src/components/Cards/OfferCard.jsx
+++ b/src/components/Cards/OfferCard.jsx
@@ -46,15 +46,15 @@ export default function OfferCard({
           </h1>
 
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex flex-col justify-between items-center border-r-2">
+            <div className="grid grid-cols-1 gap-2">
+              {/* <div className="flex flex-col justify-between items-center border-r-2">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Task Code
                 </p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   {datas.contract}
                 </p>
-              </div>
+              </div> */}
               <div className="flex flex-col justify-between items-center">
                 <p className="text-sm text-red-500 tracking-wide">Expires</p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
diff --git a/src/components/MyActiveJobs/ActiveJobsMedia.jsx b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
index a40f143..d4818e0 100644
--- a/src/components/MyActiveJobs/ActiveJobsMedia.jsx
+++ b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
@@ -350,7 +350,7 @@ function ActiveJobsMedia(props) {
                 </div>
 
                 {/* job details */}
-                <div className="w-full md:w-[200px]">
+                <div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
                     {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                     {passDue ? (
                         <div className="my-1">
diff --git a/src/components/MyTasks/MyOffersFamilyTable.jsx b/src/components/MyTasks/MyOffersFamilyTable.jsx
index c8d4211..d0631b5 100644
--- a/src/components/MyTasks/MyOffersFamilyTable.jsx
+++ b/src/components/MyTasks/MyOffersFamilyTable.jsx
@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
             </div>
           </div>
           {/* trending products */}
-          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
+          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
             <SliderCom selector={trendingSlider} settings={settings}>
               {familyOffers &&
                 familyOffers.length > 0 &&
diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx
index f9f58e6..80c2b29 100644
--- a/src/components/Partials/Layout.jsx
+++ b/src/components/Partials/Layout.jsx
@@ -54,8 +54,8 @@ export default function Layout({ children }) {
 
   return (
     <>
-      <div className="nft-main-wrapper-layout w-full mx-auto">
-        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+      <div className="nft-main-wrapper-layout container mx-auto">
+        <div className={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
           {/* sidebar */}
           <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
             <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
@@ -73,7 +73,7 @@ export default function Layout({ children }) {
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+            <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
               <div className="flex-[80%] w-full">
                 {children && children}
               </div>
diff --git a/src/components/Partials/MediaLayout.jsx b/src/components/Partials/MediaLayout.jsx
index 8869d76..f7d0cfe 100644
--- a/src/components/Partials/MediaLayout.jsx
+++ b/src/components/Partials/MediaLayout.jsx
@@ -53,7 +53,7 @@ export default function MediaLayout({backpath, title, children }) {
 
     return (
         <>
-            <div className="nft-main-wrapper-layout media">
+            <div className="nft-main-wrapper-layout media container mx-auto">
                 <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
                     {/* sidebar */}
                     {/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
@@ -72,7 +72,7 @@ export default function MediaLayout({backpath, title, children }) {
                             <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
-                        <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+                        <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
                             <div className="nft-main-container_media flex-[100%] w-full">
                                 {children && children}
                             </div>
diff --git a/src/components/familyResources/FamGames.jsx b/src/components/familyResources/FamGames.jsx
index e56d6f7..50e6209 100644
--- a/src/components/familyResources/FamGames.jsx
+++ b/src/components/familyResources/FamGames.jsx
@@ -247,101 +247,101 @@ export default function FamGames() {
         <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             
-            <div className="mb-4 w-full h-screen max-h-[600px]">
-              <Suspense fallback={<Fallback />}>
-                <Iframe 
-                  src={process.env.REACT_APP_FAM_GAME_LINK}
-                  title='Games'
-                />
-              </Suspense>
+              <div className="mb-4 w-full h-screen max-h-[650px]">
+                <Suspense fallback={<Fallback />}>
+                  <Iframe 
+                    src={process.env.REACT_APP_FAM_GAME_LINK}
+                    title='Games'
+                  />
+                </Suspense>
+              </div>
+
+              <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
+                  <div className="w-full flex flex-col justify-between">
+                      <div className="w-full h-30">
+                        <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
+                          {/* <p className="w-full text-base text-right text-sky-blue">
+                          {props?.details && props.details.job_to}
+                          </p>
+                          <div className="text-base tracking-wide">
+                              <p className="font-semibold text-black dark:text-white tracking-wider">
+                                  Description:{" "}
+                              </p>
+                              <p className="p-2 ml-8 border-b border-sky-blue">
+                                  {props?.details && props.details.description}
+                              </p>
+                          </div>
+                          <div className="mt-6 w-full lg:flex gap-8">
+                              <div className="w-full text-base tracking-wide">
+                                  <p className="font-semibold text-black dark:text-white tracking-wider">
+                                      Delivery Detail:{" "}
+                                  </p>
+                                  <p className="p-2 ml-8">
+                                      {props?.details && props.details.job_description}
+                                  </p>
+                              </div>
+                              <div className="my-2 lg:my-0">
+                                  <IndexJobActions details={props.details} />
+                              </div>
+                          </div> */}
+                      </div>
+                  </div>
+
+                  {/* job details */}
+                  <div className="w-full md:w-[200px] h-20">
+                      {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
+                      {/* {passDue ? (
+                          <div className="my-1">
+                              <p className="text-base text-slate-700">
+                                  <span className="font-semibold">Due: </span>
+                                  {props?.details && props.details.delivery_date.split(" ")[0]}
+                              </p>
+                              {props?.delivery_date && (
+                                  <p className="py-2 text-base text-slate-700">
+                                  {props.details.delivery_date.split(" ")[1]}
+                                  </p>
+                              )}
+                          </div>
+                      ) : (
+                          <div className="my-1 flex items-start gap-3">
+                              <p className="font-semibold">Due: </p>
+                              <div className="flex flex-col justify-between">
+                                  <p className="text-base text-slate-700 tracking-wide">
+                                  <CountDown
+                                      lastDate={props?.details && props.details.delivery_date}
+                                  />
+                                  </p>
+                                  <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
+                                  <span>Hrs</span>
+                                  <span>Min</span>
+                                  <span>Sec</span>
+                                  </div>
+                              </div>
+                          </div>
+                      )} */}
+
+                      {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Reward:{" "}
+                          </span>
+                          <span className="">{thePrice}</span>
+                      </div>
+
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Duration:{" "}
+                          </span>
+                          <span className="">
+                          {props.details?.timeline_days && props.details.timeline_days}{" "}
+                          day(s)
+                          </span>
+                      </div> */}
+                  </div>
+                  {/* end of job details */}
+              </div>
             </div>
 
-            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
-                <div className="w-full flex flex-col justify-between">
-                    <div className="w-full h-30">
-                      <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
-                        {/* <p className="w-full text-base text-right text-sky-blue">
-                        {props?.details && props.details.job_to}
-                        </p>
-                        <div className="text-base tracking-wide">
-                            <p className="font-semibold text-black dark:text-white tracking-wider">
-                                Description:{" "}
-                            </p>
-                            <p className="p-2 ml-8 border-b border-sky-blue">
-                                {props?.details && props.details.description}
-                            </p>
-                        </div>
-                        <div className="mt-6 w-full lg:flex gap-8">
-                            <div className="w-full text-base tracking-wide">
-                                <p className="font-semibold text-black dark:text-white tracking-wider">
-                                    Delivery Detail:{" "}
-                                </p>
-                                <p className="p-2 ml-8">
-                                    {props?.details && props.details.job_description}
-                                </p>
-                            </div>
-                            <div className="my-2 lg:my-0">
-                                <IndexJobActions details={props.details} />
-                            </div>
-                        </div> */}
-                    </div>
-                </div>
-
-                {/* job details */}
-                <div className="w-full md:w-[200px] h-20">
-                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
-                    {/* {passDue ? (
-                        <div className="my-1">
-                            <p className="text-base text-slate-700">
-                                <span className="font-semibold">Due: </span>
-                                {props?.details && props.details.delivery_date.split(" ")[0]}
-                            </p>
-                            {props?.delivery_date && (
-                                <p className="py-2 text-base text-slate-700">
-                                {props.details.delivery_date.split(" ")[1]}
-                                </p>
-                            )}
-                        </div>
-                    ) : (
-                        <div className="my-1 flex items-start gap-3">
-                            <p className="font-semibold">Due: </p>
-                            <div className="flex flex-col justify-between">
-                                <p className="text-base text-slate-700 tracking-wide">
-                                <CountDown
-                                    lastDate={props?.details && props.details.delivery_date}
-                                />
-                                </p>
-                                <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
-                                <span>Hrs</span>
-                                <span>Min</span>
-                                <span>Sec</span>
-                                </div>
-                            </div>
-                        </div>
-                    )} */}
-
-                    {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Reward:{" "}
-                        </span>
-                        <span className="">{thePrice}</span>
-                    </div>
-
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Duration:{" "}
-                        </span>
-                        <span className="">
-                        {props.details?.timeline_days && props.details.timeline_days}{" "}
-                        day(s)
-                        </span>
-                    </div> */}
-                </div>
-                {/* end of job details */}
-            </div>
-            </div>
-
-            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+            <div className="w-full lg:w-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
                 {/* TEXTAREA SECTION */}
                 <div className="w-full mb-3 hidden">
                     <div className="w-full">