diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
index 25f9628..3344c48 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -56,7 +56,7 @@ export default function AssignMediaTask({
         amount: "",
         job_description: "",
         timeline_days: "",
-        media_uid: activeMedia.uid,
+        media_uid: activeMedia?.uid,
         family_uid: family_uid,
         media_type: "COMMON"
     };
@@ -89,7 +89,7 @@ export default function AssignMediaTask({
                                 className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
-                                    <div className="p-4 w-full min-h-[400px] max-h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                    <div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                                         {commonMedia?.data?.length ? (
                                         commonMedia?.data?.map((item, index) => (
                                             <div
@@ -140,12 +140,12 @@ export default function AssignMediaTask({
                                                     </Suspense>
                                                 </div>
                                             </div>
-                                            <div className="grid grid-cols-2 gap-3">
+                                            <div className="grid grid-cols-3 gap-3">
                                                 {/* Price */}
                                                 <div className="field w-full">
                                                     <label htmlFor="price" className="job-label flex gap-1">
                                                         Price
-                                                        <span className='text-red-500 text-[10px]'>{props.errors.amount && props.touched.amount && props.errors.amount}</span>
+                                                        <span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
                                                     </label>
                                                     <InputCom
                                                     fieldClass="px-6 text-right"
@@ -168,7 +168,7 @@ export default function AssignMediaTask({
                                                     className="job-label flex gap-1"
                                                     >
                                                     Currency
-                                                    {props.errors.currency && props.touched.currency && <span className="text-[10px] text-red-500">{props.errors.currency}</span>}
+                                                    {props.errors.currency && props.touched.currency && <span className="text-base text-red-500">*</span>}
                                                     </label>
                                                     <select
                                                     id="currency"
@@ -184,7 +184,7 @@ export default function AssignMediaTask({
                                                     ) : walletDetails.data.length ? (
                                                         <>
                                                         <option className="text-slate-500 text-[13.975px]" value="">
-                                                            Currency
+                                                            Select
                                                         </option>
                                                         {walletDetails.data?.map((item, index) => (
                                                             <option
@@ -203,48 +203,48 @@ export default function AssignMediaTask({
                                                     )}
                                                     </select>
                                                 </div>
-                                            </div>
-
-                                            {/* Duration */}
-                                            <div className="field w-full">
-                                                <label
-                                                htmlFor="timeline_days"
-                                                className="job-label flex gap-1"
-                                                >
-                                                Timeline
-                                                {props.errors.timeline_days && props.touched.timeline_days && <span className="text-[12px] text-red-500">{props.errors.timeline_days}</span>}
-                                                </label>
-                                                <select
-                                                id="timeline_days"
-                                                name="timeline_days"
-                                                value={props.values.timeline_days}
-                                                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                                                onChange={props.handleChange}
-                                                >
-                                                {publicArray.length && (
-                                                    <>
-                                                    <option className="text-slate-500 text-[13.975px]" value="">
-                                                        Duration
-                                                    </option>
-                                                    {publicArray.map(({ name, duration }, idx) => (
-                                                        <option
-                                                        key={idx}
-                                                        className="text-slate-500 text-[13.975px]"
-                                                        value={duration}
-                                                        >
-                                                        {name}
+                                            
+                                                {/* Duration */}
+                                                <div className="field w-full">
+                                                    <label
+                                                    htmlFor="timeline_days"
+                                                    className="job-label flex gap-1"
+                                                    >
+                                                    Timeline
+                                                    {props.errors.timeline_days && props.touched.timeline_days && <span className="text-base text-red-500">*</span>}
+                                                    </label>
+                                                    <select
+                                                    id="timeline_days"
+                                                    name="timeline_days"
+                                                    value={props.values.timeline_days}
+                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                                    onChange={props.handleChange}
+                                                    >
+                                                    {publicArray.length && (
+                                                        <>
+                                                        <option className="text-slate-500 text-[13.975px]" value="">
+                                                            Duration
                                                         </option>
-                                                    ))}
-                                                    </>
-                                                )}
-                                                </select>
+                                                        {publicArray.map(({ name, duration }, idx) => (
+                                                            <option
+                                                            key={idx}
+                                                            className="text-slate-500 text-[13.975px]"
+                                                            value={duration}
+                                                            >
+                                                            {name}
+                                                            </option>
+                                                        ))}
+                                                        </>
+                                                    )}
+                                                    </select>
+                                                </div>
                                             </div>
                                             
                                             {/* Delivery Detail */}
                                             <div className="my-3">
                                             <label className="w-full job-label flex gap-1">
                                                 Delivery Detail
-                                                {props.errors.job_description && props.touched.job_description && <span className="text-[12px] text-red-500">{props.errors.job_description}</span>}
+                                                {props.errors.job_description && props.touched.job_description && <span className="text-base text-red-500">*</span>}
                                             </label>
                                             <textarea
                                                 className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
index 64ed777..2b8dcca 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
@@ -36,7 +36,7 @@ export default function AssignPrevNewTask({
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >
-                  <div className="p-4 pt-0">
+                  <div className="px-4">
                     <div className="mb-2 w-full flex items-center gap-4">
                       <div className="flex items-center gap-2 text-sky-blue text-base">
                         <input
@@ -96,7 +96,7 @@ export default function AssignPrevNewTask({
                       </div>
                     )}
                     {taskType == "new" && (
-                      <div className="p-4 w-full h-full">
+                      <div className="px-4 w-full">
                         <NewTasks
                           formState={formState}
                           setFormState={setFormState}
@@ -109,9 +109,9 @@ export default function AssignPrevNewTask({
                   {taskType == "select" && (
                     <>
                       {jobList?.data?.length > 0 ? (
-                        <div className="p-4 pt-0 h-full">
+                        <div className="px-4">
                           <div className="w-full">
-                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2 max-h-[50px] overflow-y-auto">
                               {activeTask?.data?.title}
                             </p>
                             {/* <div className="my-3">
@@ -124,7 +124,7 @@ export default function AssignPrevNewTask({
                               <label className="job-label">
                                 Description
                               </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                              <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
                                 {activeTask?.data?.description}
                               </p>
                             </div>
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index 2718651..013b3f0 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -261,7 +261,13 @@ const AssignTaskPopout = ({
 
     apiCall.parentAssignMediaTask(reqData).then(res => {  // API CALL TO ASSIGN MEDIA TASK
       if(res.status != 200 || res.data.internal_return < 0){
-        setRequestStatus({ loading: false, status: false, message: "Failed to Assign Task" });
+        let error = errorMsg[res?.data?.error_msg] || ''
+
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: error? error : "failed to assign task",
+        });
         return setTimeout(()=>{
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 3000)
diff --git a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
index a5e88c5..21a1746 100644
--- a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
@@ -74,21 +74,6 @@ export default function NewTasks({ formState, setFormState }) {
           </div>
 
           {/* Description  */}
-          {/* <div className="field w-full mb-[5px]">
-            <label htmlFor="description" className="job-label">Description</label>
-            <InputCom
-              fieldClass="px-6"
-              // label="Description"
-              // labelClass="tracking-wide"
-              inputBg="bg-slate-100"
-              type="text"
-              name="description"
-              value={formState.description}
-              inputHandler={handleInputChange}
-              //   blurHandler={props.handleBlur}
-              //   error={props.errors.description && props.touched.description && props.errors.description}
-            />
-          </div> */}
           <div className="field flex flex-col sm:flex-row w-full gap-2">
             <div className="w-full">
               <label
@@ -100,7 +85,7 @@ export default function NewTasks({ formState, setFormState }) {
               <textarea
                 id="description"
                 rows="5"
-                className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+                className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[80px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
                 style={{ resize: "none" }}
                 name="description"
                 value={formState.description}
@@ -136,66 +121,68 @@ export default function NewTasks({ formState, setFormState }) {
 
         {/* inputs starts here */}
         <div className="w-full flex flex-col gap-2">
-          {/* Currency */}
-          <div className="field w-full">
-            <label
-              htmlFor="country"
-              className="job-label"
-            >
-              Currency
-              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
-            </label>
-            <select
-              id="country"
-              name="country"
-              value={formState.country}
-              className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-              onChange={handleInputChange}
-              // onBlur={props.handleBlur}
-            >
-              {walletDetails?.loading ? (
-                <option className="text-slate-500 text-[13.975px]" value="">
-                  Loading...
-                </option>
-              ) : walletDetails.data.length ? (
-                <>
-                  <option className="text-slate-500 text-[13.975px]" value="">
-                    Currency
-                  </option>
-                  {walletDetails.data?.map((item, index) => (
-                    <option
-                      key={index}
-                      className="text-slate-500 text-lg"
-                      value={item?.country}
-                    >
-                      {item?.code}
-                    </option>
-                  ))}
-                </>
-              ) : (
-                <option className="text-slate-500 text-lg" value="">
-                  No Options Found! Try Again
-                </option>
-              )}
-            </select>
-          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {/* Price */}
+            <div className="field w-full">
+              <label htmlFor="price" className="job-label">Reward</label>
+              <InputCom
+                fieldClass="px-6 text-right"
+                // label="Price"
+                // labelClass="tracking-wide"
+                inputBg="bg-slate-100"
+                type="number"
+                name="price"
+                placeholder="0"
+                value={formState.price}
+                inputHandler={handleInputChange}
+                // blurHandler={props.handleBlur}
+                // error={props.errors.price && props.touched.price && props.errors.price}
+              />
+            </div>
 
-          {/* Price */}
-          <div className="field w-full">
-            <label htmlFor="price" className="job-label">Price</label>
-            <InputCom
-              fieldClass="px-6 text-right"
-              // label="Price"
-              // labelClass="tracking-wide"
-              inputBg="bg-slate-100"
-              type="number"
-              name="price"
-              placeholder="0"
-              value={formState.price}
-              inputHandler={handleInputChange}
-              // blurHandler={props.handleBlur}
-              // error={props.errors.price && props.touched.price && props.errors.price}
-            />
+            {/* Currency */}
+            <div className="field w-full">
+              <label
+                htmlFor="country"
+                className="job-label"
+              >
+                Currency
+                {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+              </label>
+              <select
+                id="country"
+                name="country"
+                value={formState.country}
+                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                onChange={handleInputChange}
+                // onBlur={props.handleBlur}
+              >
+                {walletDetails?.loading ? (
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Loading...
+                  </option>
+                ) : walletDetails.data.length ? (
+                  <>
+                    <option className="text-slate-500 text-[13.975px]" value="">
+                      Select
+                    </option>
+                    {walletDetails.data?.map((item, index) => (
+                      <option
+                        key={index}
+                        className="text-slate-500 text-lg"
+                        value={item?.country}
+                      >
+                        {item?.code}
+                      </option>
+                    ))}
+                  </>
+                ) : (
+                  <option className="text-slate-500 text-lg" value="">
+                    No Options Found! Try Again
+                  </option>
+                )}
+              </select>
+            </div>
           </div>
 
           {/* Duration */}
diff --git a/src/components/MyActiveJobs/ActiveJobsMedia.jsx b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
index d978ef2..679af8d 100644
--- a/src/components/MyActiveJobs/ActiveJobsMedia.jsx
+++ b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
@@ -271,43 +271,47 @@ function ActiveJobsMedia(props) {
   },[props.details.contract, props.details.contract_uid])
 
   return (
-    <MediaLayout>
-        <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
-            {/* job title */}
-            <div className="w-full">
-            <div className="w-full flex justify-start space-x-3 items-start">
-                <button
-                type="button"
-                className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-                onClick={() => {
-                    if (props.details.pathname == "/manage-family") {
-                    navigate(
-                        props.details.pathname,
-                        { state: { ...props.details.accountDetails } },
-                        { replace: true }
-                    );
-                    } else {
-                    navigate(props.details.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-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
-                {props.details?.title && props.details.title}
-                </h1>
+    <MediaLayout
+        backpath={props.details.pathname}
+        title={props.details?.title && props.details.title}
+        state={props.details.accountDetails}
+    >
+        {/* job title */}
+            <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
+                <div className="w-full">
+                    <div className="w-full flex justify-start space-x-3 items-start">
+                        <button
+                        type="button"
+                        className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+                        onClick={() => {
+                            if (props.details.pathname == "/manage-family") {
+                            navigate(
+                                props.details.pathname,
+                                { state: { ...props.details.accountDetails } },
+                                { replace: true }
+                            );
+                            } else {
+                            navigate(props.details.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-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
+                        {props.details?.title && props.details.title}
+                        </h1>
+                    </div>
+                </div>
             </div>
-            </div>
-            {/* end of job title */}
-        </div>
+        {/* end of job title */}
 
         <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">
@@ -402,7 +406,7 @@ function ActiveJobsMedia(props) {
                 {/* TEXTAREA SECTION */}
                 <div className="w-full mb-3">
                     <div className="w-full">
-                        <div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3">
+                        <div className="pl-7 flex items-center gap-3">
                             <button
                                 name="message"
                                 onClick={(e) => setTab(e.target.name)}
@@ -428,7 +432,7 @@ function ActiveJobsMedia(props) {
                         </div>
                         {tab == "message" ? (
                         <textarea
-                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
+                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-[#4687ba] outline-none"
                             // rows="10"
                             style={{ resize: "none" }}
                             name="message"
@@ -437,8 +441,8 @@ function ActiveJobsMedia(props) {
                             autoFocus
                         />
                         ) : (
-                        <div className="p-4 w-full h-[150px] text-base text-slate-600 border border-slate-300">
-                            <div className="files">
+                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border border-[#4687ba]">
+                            <div className="files flex">
                             <label
                                 htmlFor="file"
                                 className="custom-btn btn-gradient text-base text-white"
diff --git a/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx b/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
index 6435881..563365f 100644
--- a/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
@@ -3,22 +3,20 @@ import React from 'react'
 function CurrentJobAction() {
   return (
     <div className='job-action  dark:bg-black'>
-      <p className="my-3 py-1 text-base active-owner">
-          <table className="w-full text-sm text-left text-gray-500 ">
-              <tbody>
-              <tr>
-                  <td>
-                      <div className="flex space-x-2 items-center w-full task_action_panel">
+      <table className="w-full my-3 py-1  text-sm text-left text-gray-500">
+          <tbody>
+          <tr>
+              <td>
+                  <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <div>
-                                  Waiting for the completion message from the client before you can approve.
-                              </div>
-                      </div>
-                  </td>
-              </tr>
-              </tbody>
-          </table>
-      </p>
+                          <div>
+                              Waiting for the completion message from the client before you can approve.
+                          </div>
+                  </div>
+              </td>
+          </tr>
+          </tbody>
+      </table>
     </div>
   )
 }
diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx
index 5432e35..f9f58e6 100644
--- a/src/components/Partials/Layout.jsx
+++ b/src/components/Partials/Layout.jsx
@@ -77,11 +77,10 @@ export default function Layout({ children }) {
               <div className="flex-[80%] w-full">
                 {children && children}
               </div>
-              {userDetails.account_type == 'FULL' &&
+
               <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
                 <RightSideBar myJobList={userJobList} />
               </div>
-              }
             </div>
           </div>
         </div>
@@ -113,14 +112,14 @@ export default function Layout({ children }) {
                   Are you sure you want to Logout of your WrenchBoard account?
                 </p>
               </div>
-              <div className="modal-footer-wrapper flex justify-center items-center gap-5">
-                <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
-                  {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
-                </button>
-                <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
-                  <span className="text-gradient">Not Now</span>
-                </button>
-              </div>
+            </div>
+            <div className="modal-footer-wrapper flex justify-center items-center gap-5">
+              <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
+              </button>
+              <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                <span className="text-gradient">Not Now</span>
+              </button>
             </div>
           </div>
         </ModalCom>
diff --git a/src/components/Partials/MediaHeader.jsx b/src/components/Partials/MediaHeader.jsx
new file mode 100644
index 0000000..b3ac67f
--- /dev/null
+++ b/src/components/Partials/MediaHeader.jsx
@@ -0,0 +1,621 @@
+import React, { useContext } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import bank1 from "../../assets/images/bank-1.png";
+import bank2 from "../../assets/images/bank-2.png";
+import bank3 from "../../assets/images/bank-3.png";
+import bank4 from "../../assets/images/bank-4.png";
+import profileImg from "../../assets/images/profile.jpg";
+import useToggle from "../../hooks/useToggle";
+import DarkModeContext from "../Contexts/DarkModeContext";
+import Icons from "../Helpers/Icons";
+import ModalCom from "../Helpers/ModalCom";
+import WalletHeader from "../MyWallet/WalletHeader";
+
+import { useSelector } from "react-redux";
+import Flag from "../../assets/images/united-states.svg";
+import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
+// import { updateWalletDetails } from "../../store/walletDetails";
+import TimeDifference from "../Helpers/TimeDifference";
+
+const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
+
+export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpath, state, title }) {
+
+  const darkMode = useContext(DarkModeContext);
+
+  const navigate = useNavigate()
+
+  const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
+
+  const [balanceDropdown, setbalanceValue] = useToggle(false);
+  const [notificationDropdown, setNotificationValue] = useToggle(false);
+  const [userProfileDropdown, setProfileDropdown] = useToggle(false);
+  const [moneyPopup, setPopup] = useToggle(false);
+
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
+  const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+  const image = localStorage.getItem("session_token")
+    ? userDetails.account_type === "FAMILY"
+      ? `${userDetails.session_image_server}${localStorage.getItem(
+          "session_token"
+        )}/family/${sessionStorage.getItem("family_uid")}`
+      : `${userDetails.session_image_server}${localStorage.getItem(
+          "session_token"
+        )}/profile/${userDetails.uid}`
+    : "";
+
+  // 9308RDR122
+
+  const handlerBalance = () => {
+    setbalanceValue.toggle();
+    if (notificationDropdown) {
+      setNotificationValue.toggle();
+    }
+    if (userProfileDropdown) {
+      setProfileDropdown.toggle();
+    }
+  };
+  const handlerNotification = () => {
+    setNotificationValue.toggle();
+    if (balanceDropdown) {
+      setbalanceValue.toggle();
+    }
+    if (userProfileDropdown) {
+      setProfileDropdown.toggle();
+    }
+  };
+  const handlerProfile = () => {
+    setProfileDropdown.toggle();
+    if (balanceDropdown) {
+      setbalanceValue.toggle();
+    }
+    if (notificationDropdown) {
+      setNotificationValue.toggle();
+    }
+  };
+  const clickAwayhandler = () => {
+    if (balanceDropdown) {
+      setbalanceValue.toggle();
+    }
+    if (notificationDropdown) {
+      setNotificationValue.toggle();
+    }
+    if (userProfileDropdown) {
+      setProfileDropdown.toggle();
+    }
+  };
+  const addMoneyHandler = () => {
+    setPopup.toggle();
+    setbalanceValue.set(false);
+  };
+
+  // getting the location of head
+  let { pathname } = useLocation();
+
+  const handleWalletBtn = () => {
+    if (pathname === "/my-wallet") {
+      setbalanceValue.set(false);
+    } else return balanceDropdown;
+  };
+
+  // User Profile
+  let { firstname, lastname, email, profile_pic_url } = userDetails;
+  let userEmail = email?.split("@")[0];
+  const userProfileImage = image || DEFAULT_PROFILE_IMAGE;
+
+  return (
+    <>
+      <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
+        <div className="flex justify-between items-center w-full">
+          <button
+            className="xl:hidden block mr-10"
+            type="button"
+            onClick={sidebarHandler}
+          >
+            <svg
+              width="25"
+              height="19"
+              viewBox="0 0 25 19"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M24.3544 8.45953L16.9855 0.271831C16.8283 0.0982522 16.6089 0 16.3763 0H11.4637C11.1411 0 10.848 0.189955 10.7153 0.484712C10.5843 0.781107 10.6384 1.12663 10.8545 1.36571L17.7306 9.00647L10.8545 16.6456C10.6384 16.8863 10.5827 17.2318 10.7153 17.5266C10.848 17.823 11.1411 18.0129 11.4637 18.0129H16.3763C16.6089 18.0129 16.8283 17.913 16.9855 17.7427L24.3544 9.55505C24.6344 9.24391 24.6344 8.76903 24.3544 8.45953Z"
+                fill="url(#paint0_linear_700_68145)"
+              />
+              <path
+                d="M13.7104 8.45953L6.34147 0.271831C6.18427 0.0982522 5.96484 0 5.73231 0H0.819691C0.497095 0 0.203976 0.189955 0.071335 0.484712C-0.0596682 0.781107 -0.00562942 1.12663 0.210526 1.36571L7.08656 9.00647L0.210526 16.6456C-0.00562942 16.8863 -0.0613058 17.2318 0.071335 17.5266C0.203976 17.823 0.497095 18.0129 0.819691 18.0129H5.73231C5.96484 18.0129 6.18427 17.913 6.34147 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
+                fill="url(#paint1_linear_700_68145)"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear_700_68145"
+                  x1="10.644"
+                  y1="0"
+                  x2="28.9548"
+                  y2="13.8495"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#F539F8" />
+                  <stop offset="0.416763" stopColor="#C342F9" />
+                  <stop offset="1" stopColor="#5356FB" />
+                </linearGradient>
+                <linearGradient
+                  id="paint1_linear_700_68145"
+                  x1="0"
+                  y1="0"
+                  x2="18.3108"
+                  y2="13.8495"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#F539F8" />
+                  <stop offset="0.416763" stopColor="#C342F9" />
+                  <stop offset="1" stopColor="#5356FB" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </button>
+
+          <div className="search-bar xl:hidden justify-center items-center w-[376px]">
+            {/* Home */}
+            <HomeButton />
+          </div>
+
+          {/* Back BTN AND TITLE */}
+          {/* <div className="pl-4 w-full flex justify-start gap-3 items-center">
+            <button
+            type="button"
+            className="min-w-[35px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+            onClick={() => {
+                if (backpath == "/manage-family") {
+                navigate(backpath,
+                    { state: { ...state} },
+                    { replace: true }
+                );
+                } else {
+                navigate(backpath, { replace: true });
+                }
+            }}
+            >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="25"
+                height="25"
+                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>
+
+            <div className="">
+                {darkMode.theme === "light" ? (
+                    <img className="w-28 h-auto" src={siteLogo} alt="nft" />
+                ) : (
+                    <img className="w-28 h-auto" src={siteLogo} alt="nft" />
+                )}
+            </div>
+
+            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
+            {title && title}
+            </h1>
+          </div> */}
+          
+
+          {/* user info */}
+          <div className="user-info flex items-center justify-end w-full xl:space-x-7 space-x-2 z-10 ">
+            {/* dark mode */}
+            {/* <button
+              onClick={darkMode.handleThemeSwitch}
+              type="button"
+              className="xl:w-[176px] w-[52px] h-[52px] dark:bg-white bg-dark-gray border border-pink rounded-full flex justify-center items-center"
+            >
+              <div className="flex space-x-2.5 items-center">
+                <span className="dark:text-dark-gray text-white">
+                  <svg
+                    width="27"
+                    height="27"
+                    viewBox="0 0 27 27"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="fill-current"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M18.3065 16.3771C18.1572 16.6304 17.986 16.8743 17.7937 17.1062C17.7118 17.2044 17.7247 17.3515 17.8228 17.4339C17.9208 17.5163 18.0665 17.5028 18.1484 17.4046C18.3569 17.1532 18.5419 16.8897 18.7043 16.6155C18.7695 16.5051 18.7334 16.3622 18.6238 16.2966C18.5142 16.2304 18.3722 16.2668 18.3065 16.3771ZM18.9591 14.722C18.8948 15.0116 18.8078 15.2975 18.6982 15.5759C18.6511 15.6955 18.7093 15.831 18.8282 15.878C18.9466 15.9255 19.0812 15.8668 19.1283 15.7477C19.2472 15.446 19.3411 15.1368 19.4104 14.8231C19.4382 14.6978 19.3596 14.5735 19.2347 14.5456C19.1103 14.5176 18.9864 14.5968 18.9591 14.722ZM19.0673 12.944C19.0955 13.2411 19.1006 13.5395 19.0825 13.8375C19.0747 13.9655 19.1718 14.0763 19.2994 14.0837C19.4266 14.0917 19.5362 13.9939 19.5441 13.8659C19.564 13.5437 19.5584 13.2206 19.5274 12.8994C19.5154 12.7713 19.4021 12.6777 19.2754 12.6899C19.1482 12.702 19.0548 12.816 19.0673 12.944ZM18.6229 11.2201C18.7422 11.4948 18.8388 11.7769 18.9128 12.0641C18.9447 12.1884 19.071 12.2629 19.1949 12.2308C19.3184 12.1987 19.3924 12.0716 19.3605 11.9473C19.2805 11.6363 19.1755 11.3304 19.0465 11.0334C18.9951 10.9156 18.8587 10.8616 18.7417 10.9133C18.6247 10.9649 18.5715 11.1023 18.6229 11.2201ZM17.6651 9.72283C17.8653 9.94816 18.0448 10.1856 18.2034 10.4333C18.2723 10.5413 18.4157 10.5725 18.523 10.5026C18.6303 10.4333 18.6612 10.2889 18.5919 10.1809C18.4208 9.91324 18.2265 9.65578 18.0092 9.4123C17.9241 9.31639 17.7779 9.30848 17.6827 9.39414C17.5879 9.4798 17.58 9.62738 17.6651 9.72283Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M13.4409 5.61267C9.08757 5.61267 5.55359 9.14665 5.55359 13.5C5.55359 17.8533 9.08757 21.3873 13.4409 21.3873C17.7942 21.3873 21.3282 17.8533 21.3282 13.5C21.3282 9.14665 17.7942 5.61267 13.4409 5.61267ZM13.9049 6.5559C17.5298 6.79484 20.4003 9.81475 20.4003 13.5C20.4003 17.1852 17.5298 20.2051 13.9049 20.4441V6.5559Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M12.1116 1.32213V3.46343C12.1116 4.19318 12.7072 4.78556 13.4409 4.78556C14.1746 4.78556 14.7702 4.19318 14.7702 3.46343V1.32213C14.7702 0.592374 14.1746 0 13.4409 0C12.7072 0 12.1116 0.592374 12.1116 1.32213Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M21.0877 4.01472L19.5511 5.5513C19.0274 6.07499 19.0274 6.92528 19.5511 7.44898C20.0748 7.97267 20.9251 7.97267 21.4488 7.44898L22.9854 5.9124C23.509 5.38871 23.509 4.53841 22.9854 4.01472C22.4617 3.49102 21.6114 3.49102 21.0877 4.01472Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M25.6581 12.3649H23.4849C22.7443 12.3649 22.1431 12.9661 22.1431 13.7068C22.1431 14.4474 22.7443 15.0486 23.4849 15.0486H25.6581C26.3988 15.0486 27 14.4474 27 13.7068C27 12.9661 26.3988 12.3649 25.6581 12.3649Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M22.9854 21.5012L21.4488 19.9646C20.9251 19.4409 20.0748 19.4409 19.5511 19.9646C19.0274 20.4883 19.0274 21.3386 19.5511 21.8623L21.0877 23.3989C21.6114 23.9226 22.4617 23.9226 22.9854 23.3989C23.509 22.8752 23.509 22.0249 22.9854 21.5012Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M14.7702 25.6778V23.5365C14.7702 22.8068 14.1746 22.2144 13.4409 22.2144C12.7072 22.2144 12.1116 22.8068 12.1116 23.5365V25.6778C12.1116 26.4076 12.7072 27 13.4409 27C14.1746 27 14.7702 26.4076 14.7702 25.6778Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M5.78958 23.0647L7.29553 21.5372C7.80878 21.0166 7.80878 20.1714 7.29553 19.6508C6.78228 19.1302 5.94893 19.1302 5.43568 19.6508L3.92974 21.1783C3.41649 21.6989 3.41649 22.5441 3.92974 23.0647C4.44299 23.5853 5.27633 23.5853 5.78958 23.0647Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M1.32213 14.8293H3.46343C4.19318 14.8293 4.78556 14.2337 4.78556 13.5C4.78556 12.7663 4.19318 12.1707 3.46343 12.1707H1.32213C0.592374 12.1707 0 12.7663 0 13.5C0 14.2337 0.592374 14.8293 1.32213 14.8293Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M3.92974 5.82165L5.43568 7.34911C5.94893 7.86969 6.78228 7.86969 7.29553 7.34911C7.80878 6.82853 7.80878 5.98328 7.29553 5.46269L5.78958 3.93524C5.27633 3.41465 4.44299 3.41465 3.92974 3.93524C3.41649 4.45582 3.41649 5.30107 3.92974 5.82165Z"
+                    />
+                  </svg>
+                </span>
+                <span className="dark:text-dark-gray font-medium text-white xl:block hidden">
+                  {darkMode.theme === "light" ? "Dark" : "Light"} Mode
+                </span>
+              </div>
+            </button> */}
+            {/* balance */}
+
+            {/* My Page Button */}
+            {/* {userDetails.account_type === "FULL" ? <PageButton /> : null} */}
+
+            {/*<div className="lg:hidden block"></div>*/}
+            <WalletHeader
+              myWalletList={walletDetails.data}
+              handlerBalance={handlerBalance}
+              balanceDropdown={balanceDropdown}
+              addMoneyHandler={addMoneyHandler}
+              setBalanceDropdown={setbalanceValue}
+            />
+            {/* notification */}
+            <div className="user-notification lg:block hidden relative">
+              <div
+                onClick={() => handlerNotification()}
+                className="lg:w-[48px] lg:h-[48px] w-[38px] h-[38px] bg-white   flex justify-center items-center rounded-full overflow-hidden relative"
+              >
+                <Icons name="notification" />
+                <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
+                  {notifications?.loading ? "●" : notifications?.data?.length}
+                </span>
+              </div>
+              <div
+                className={`notification-dropdown z-30 w-96 bg-white dark:bg-dark-white   absolute -right-12 rounded-lg cursor-pointer ${
+                  notificationDropdown ? "active" : ""
+                }`}
+              >
+                <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
+                  <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+                    Recent Notifications
+                  </h3>
+                </div>
+
+                <div className="content px-7 pb-7">
+                  <ul>
+                    {notifications?.data?.length &&
+                      notifications?.data?.map((item, idx) => {
+                        if (idx < 5) {
+                          return (
+                            <li
+                              className={`content-item ${
+                                idx == 4
+                                  ? "py-5 "
+                                  : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                              }`}
+                              key={idx}
+                            >
+                              <div className="notifications flex space-x-4 items-center">
+                                <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
+                                  <img
+                                    src={require(`../../assets/images/notifications/${item?.icon}`)}
+                                    alt="icon"
+                                    className="w-full h-full"
+                                  />
+                                </div>
+                                <div className="name">
+                                  <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
+                                    {item?.title}
+                                    {/* <span className="ml-1 font-bold">
+                                successfully done
+                              </span> */}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    <TimeDifference
+                                      time={item?.date}
+                                      key={item?.uid}
+                                    />
+                                  </p>
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        }
+                      })}
+                  </ul>
+
+                  <div className="add-money-btn flex justify-center items-center">
+                    <Link
+                      to="/notification"
+                      className="text-purple text-sm font-medium"
+                      onClick={handlerNotification}
+                    >
+                      See all Notification
+                    </Link>
+                    {/* <button className="text-purple text-sm font-medium" onClick={()=>{
+                      handlerNotification()
+                      navigate('/notification', {replace: true})
+                    }}>See all Notification</button> */}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="lg:hidden block">
+              <Link
+                to="/notification"
+                className="lg:w-[48px] lg:h-[48px] w-[38px] h-[38px] bg-white   flex justify-center items-center rounded-full overflow-hidden relative"
+              >
+                <Icons name="notification" />
+                <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white">
+                  10
+                </span>
+              </Link>
+            </div>
+            {/* profile */}
+            <div className="user-profile relative">
+              <div
+                onClick={() => handlerProfile()}
+                className="hidden lg:flex items-center space-x-3.5"
+              >
+                {/* profile-image */}
+                <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
+                  <img
+                    src={userProfileImage}
+                    alt="profile"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="lg:block hidden">
+                  <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
+                    {firstname}
+                  </h1>
+                  {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    <p className="text-sm text-thin-light-gray">@{userEmail}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="for-mobile-profile lg:hidden block">
+                <div
+                  // to="/profile"
+                  onClick={() => handlerProfile()}
+                  className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
+                >
+                  <img
+                    src={profileImg}
+                    alt="profile"
+                    className="w-full h-full object-cover object-center"
+                  />
+                </div>
+              </div>
+
+              <div
+                className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white   absolute lg:right-16 -right-[16px]  rounded-lg ${
+                  userProfileDropdown ? "active" : ""
+                }`}
+              >
+                <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
+                  <img src={siteLogo} alt="Logo" className="w-[150px]" />
+                </div>
+                <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
+                  <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+                    {`${firstname} ${lastname}`}
+                  </h3>
+                </div>
+                <div className="content">
+                  <ul className="px-7">
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/settings" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Profile
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
+                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                      <Link to={ account_type == "FULL" ? "/my-wallet" : "/family-wallet"} className="notifications">
+                        <div className="name">
+                          <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                            My Wallet
+                          </p>
+                        </div>
+                      </Link>
+                    </li>
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/yourpage" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Page
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <>
+                        <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="text-sm py-2 px-4 text-dark-gray dark:text-white font-medium">
+                                My Statements
+                              </p>
+                            </div>
+                          </Link>
+                        </li>
+                      </>
+                    )}
+                  </ul>
+                  <hr />
+                  <ul className="px-7">
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <>
+                        <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <div className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                <p>Language</p>
+                                <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm">
+                                  <p className="text-[10px]">English </p>
+                                  <img
+                                    className="w-[10px] h-[10px]"
+                                    src={Flag}
+                                    alt="U.S.A Flag"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </Link>
+                          {/* langauge list items*/}
+                          <div className="inner-list-items absolute rounded-lg">
+                            <ul className="p-3">
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      <img
+                                        className="w-[15px] h-[15px]"
+                                        src={Flag}
+                                        alt="U.S.A Flag"
+                                      />
+                                      <p className="text-sm">English </p>
+                                    </div>
+                                  </div>
+                                </Link>
+                              </li>
+                            </ul>
+                          </div>
+                          {/* end Language list items*/}
+                        </li>
+                        <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                Account Settings
+                              </p>
+                            </div>
+                          </Link>
+                        </li>
+                      </>
+                    )}
+
+                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
+                      <div className="name" onClick={logoutModalHandler}>
+                        <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                          {process.env.REACT_APP_LOGOUT_TEXT}
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                  <hr className="mb-3" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {balanceDropdown || notificationDropdown || userProfileDropdown ? (
+        <div
+          onClick={clickAwayhandler}
+          className="w-full h-screen fixed left-0"
+          style={{ zIndex: "-1" }}
+        ></div>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}
+
+const PageButton = () => {
+  return (
+    <Link
+      to="/yourpage"
+      className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="lg:block hidden w-[25px]">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+            <path
+              fillRule="evenodd"
+              d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+              fill="#ffffff"
+              className="color000000 svgShape"
+            ></path>
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+        <span className="lg:block hidden">
+          {/* <Icons name="deep-plus" /> */}
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+const HomeButton = () => {
+  return (
+    <Link
+      to="/"
+      className="flex user-balance cursor-pointer w-[110px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-7 h-7 stroke-white fill-white"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">Home</p>
+        <span className=""></span>
+      </div>
+    </Link>
+  );
+};
diff --git a/src/components/Partials/MediaLayout.jsx b/src/components/Partials/MediaLayout.jsx
index c821553..f76d824 100644
--- a/src/components/Partials/MediaLayout.jsx
+++ b/src/components/Partials/MediaLayout.jsx
@@ -4,12 +4,13 @@ import { useNavigate } from "react-router-dom";
 import useToggle from "../../hooks/useToggle";
 import { drawerToggle } from "../../store/drawer";
 import ModalCom from "../Helpers/ModalCom";
-import Header from "./Header";
+// import Header from "./Header";
 import MobileSidebar from "./MobileSideBar";
 import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
+import MediaHeader from "./MediaHeader";
 
-export default function MediaLayout({ children }) {
+export default function MediaLayout({backpath, title, state, children }) {
     const { drawer } = useSelector((state) => state.drawer);
     const { userJobList } = useSelector((state) => state.userJobList);
     const dispatch = useDispatch();
@@ -68,7 +69,7 @@ export default function MediaLayout({ children }) {
                     <div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px]  h-full`}>
                         {/* header */}
                         <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
-                            <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
+                            <MediaHeader backpath={backpath} title={title} state={state} 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">
@@ -109,14 +110,14 @@ export default function MediaLayout({ children }) {
                                     Are you sure you want to Logout of your WrenchBoard account?
                                 </p>
                             </div>
-                            <div className="modal-footer-wrapper flex justify-center items-center gap-5">
-                                <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
-                                    {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
-                                </button>
-                                <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
-                                    <span className="text-gradient">Not Now</span>
-                                </button>
-                            </div>
+                        </div>
+                        <div className="modal-footer-wrapper flex justify-center items-center gap-5">
+                            <button onClick={logOut} type="button" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                                {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
+                            </button>
+                            <button onClick={logoutModalHandler} type="button" className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full">
+                                <span className="text-gradient">Not Now</span>
+                            </button>
                         </div>
                     </div>
                 </ModalCom>