diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index 7ffac96..8888c3e 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -16,7 +16,7 @@ import localImgLoad from "../../lib/localImgLoad";
  */
 export default function FamilyTable({
   className,
-  familyList = [],
+  familyList,
   loader,
   popUpHandler,
   imageServer,
@@ -184,7 +184,7 @@ export default function FamilyTable({
           </div>
         ) : (
           <>
-            {familyList?. > 0 ? (
+            {familyList?.length > 0 ? (
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
                 <thead className="sticky top-0">
                   <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
diff --git a/src/components/JobGroups/MemberList.jsx b/src/components/JobGroups/MemberList.jsx
index ffa9fbb..c88fdf0 100644
--- a/src/components/JobGroups/MemberList.jsx
+++ b/src/components/JobGroups/MemberList.jsx
@@ -208,7 +208,6 @@ export default function MemberList({
                       labelClass="tracking-wider"
                       fieldClass="sm:px-6 px-2"
                       value={fields.firstname}
-                      inputClass="xl:w-[16rem] 2xl:w-full"
                       inputHandler={handleFieldsChange}
                       placeholder="First Name"
                       // label="Firstname"
@@ -230,12 +229,13 @@ export default function MemberList({
                       // iconName="message"
                     />
                   </div>
-                  <div className="input-item w-full sm:w-[150%]">
+                  <div className="input-item w-full">
                     <InputCom
                       labelClass="tracking-wider"
                       fieldClass="sm:px-6 px-2"
                       value={fields.email}
                       inputHandler={handleFieldsChange}
+                      inputClass="xl:w-[16rem] 2xl:w-full"
                       placeholder="Email"
                       // label="Email"
                       name="email"
diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx
index 19716af..26bcc35 100644
--- a/src/components/Partials/Sidebar.jsx
+++ b/src/components/Partials/Sidebar.jsx
@@ -8,36 +8,96 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
+export default function Sidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   const darkMode = useContext(DarkModeContext);
-  const { userDetails } = useSelector((state) => state.userDetails);
-  const { jobLists } = useSelector((state) => state.jobLists);
+
+  let { userDetails } = useSelector((state) => state.userDetails);
+  //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
+  let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
-  const noOfJobs = marketData?.length || 0;
+  let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
   useEffect(() => {
     const title = document.querySelectorAll(".menu-setting-items .heading");
-    title.forEach((elm) => {
-      sidebar ? elm.classList.add("active") : elm.classList.remove("active");
-    });
-  }, [sidebar, jobLists]);
-
+    if (sidebar) {
+      title.forEach((elm) => {
+        elm.classList.add("active");
+      });
+    } else {
+      title.forEach((elm) => {
+        elm.classList.remove("active");
+      });
+    }
+  }, [jobLists]);
   return (
     <div className="w-full h-full">
+      {/* logo-area */}
       <div
         className={`w-full flex items-center transition-all duration-300 ease-in-out ${
-          sidebar ? "justify-start gap-3 mb-14" : "justify-center"
+          sidebar ? "justify-start gap-3  mb-14" : "justify-center"
         }`}
       >
         <div className={`sidebar-logo ${sidebar ? "enter" : ""}`}>
-          <img src={darkMode.theme === "light" ? logo : logo3} alt="logo" />
+          {darkMode.theme === "light" ? (
+            <img src={logo} alt="nft" />
+          ) : (
+            <img src={logo3} alt="nft" />
+          )}
         </div>
+
         <span onClick={action}>
-          <SidebarToggleIcon />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="19"
+            viewBox="0 0 25 19"
+            fill="none"
+          >
+            <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_159_67708)"
+            />
+            <path
+              d="M13.7104 8.45953L6.34148 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.34148 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
+              fill="url(#paint1_linear_159_67708)"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_159_67708"
+                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_159_67708"
+                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>
         </span>
       </div>
-
+      {/* menu and settings item */}
       <div className="menu-setting-items mb-11">
+        {/* menus item */}
         <div
           className={`menu-item transition-all duration-300 ease-in-out ${
             sidebar ? "mb-5" : "mb-2"
@@ -48,10 +108,9 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
+              {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title={
-                  userDetails?.account_type === "FULL" ? "Dashboard" : "Home"
-                }
+                title={userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"
@@ -65,6 +124,7 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
                   iconName="new-market"
                 />
               )}
+
               <ListItem
                 title="My Task(s)"
                 route="/mytask"
@@ -75,6 +135,7 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
           </div>
         </div>
 
+        {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
           <div
             className={`menu-item transition-all duration-300 ease-in-out ${
@@ -96,7 +157,6 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
             </div>
           </div>
         )}
-
         {userDetails?.account_type !== "FAMILY" && (
           <>
             {!userDetails?.post_jobs ? (
@@ -112,12 +172,28 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
                 </div>
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
-                    <ListItem
-                      title="Enable Job Post"
-                      route="/start-job"
-                      sidebar={sidebar}
-                      iconName="people-two"
-                    />
+                    <li className="item group">
+                      <NavLink
+                        to="/start-job"
+                        className={`nav-item flex items-center ${
+                          ((navData) => (navData.isActive ? "active" : ""),
+                          sidebar
+                            ? "justify-start space-x-3.5"
+                            : "justify-center")
+                        }`}
+                      >
+                        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                          <Icons name="people-two" />
+                        </span>
+                        <span
+                          className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                            sidebar ? "active flex-1" : "w-0"
+                          }`}
+                        >
+                          Enable Job Post
+                        </span>
+                      </NavLink>
+                    </li>
                   </ul>
                 </div>
               </div>
@@ -135,7 +211,11 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
                     {[
-                      { name: "List", path: "/myjobs", iconName: "job-list" },
+                      {
+                        name: "List",
+                        path: "/myjobs",
+                        iconName: "job-list",
+                      },
                       {
                         name: "Waiting",
                         path: "/pend-interest",
@@ -181,7 +261,7 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      popup
+                      popup={true}
                     />
                   </ul>
                 </div>
@@ -190,42 +270,51 @@ const Sidebar = ({ sidebar, action, logoutModalHandler, myJobList }) => {
           </>
         )}
       </div>
-
-      <div className="flex justify-center">
+      {/* signout area */}
+      {sidebar ? (
         <button
           onClick={logoutModalHandler}
           type="button"
-          className={`signout-btn flex items-center space-x-1 p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full ${
-            sidebar ? "" : "justify-center w-full"
-          }`}
+          className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
         >
           <span className="">
             <Icons name="new-logout" />
           </span>
-          {sidebar && (
-            <span className="signout-btn-content text-white text-xl font-bold">
-              {process.env.REACT_APP_LOGOUT_TEXT}
-            </span>
-          )}
+          <span
+            className={`signout-btn-content text-white text-xl font-bold ${
+              sidebar ? "active" : ""
+            }`}
+          >
+            {process.env.REACT_APP_LOGOUT_TEXT}
+          </span>
         </button>
-      </div>
+      ) : (
+        <button
+          onClick={logoutModalHandler}
+          type="button"
+          className="signout-btn w-full flex items-center justify-center"
+        >
+          <span className="p-[1px] w-[40px] h-[40px] border border-purple rounded-full">
+            <Icons name="new-logout" />
+          </span>
+        </button>
+      )}
     </div>
   );
-};
-
-export default Sidebar;
+}
 
 const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
   return (
-    <li className="item group">
+    <li className={`item group`}>
       <NavLink
         to={route}
         state={popup ? { popup: true } : { popup: false }}
-        className={`nav-item flex items-center ${
-          sidebar ? "justify-start space-x-3.5" : "justify-center"
-        } ${(navData) => (navData.isActive ? "active" : "")}`}
+        className={`nav-item flex items-center  ${
+          ((navData) => (navData.isActive ? "active" : ""),
+          sidebar ? "justify-start space-x-3.5" : "justify-center")
+        }`}
       >
-        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
           <Icons name={iconName} />
         </span>
         <span
@@ -233,7 +322,7 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
             sidebar ? "active flex-1" : "w-0"
           }`}
         >
-          {title}
+          {title && title}
           {bubble && (
             <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
               {bubble}
@@ -244,48 +333,3 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
     </li>
   );
 };
-
-const SidebarToggleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="25"
-    height="19"
-    viewBox="0 0 25 19"
-    fill="none"
-  >
-    <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_159_67708)"
-    />
-    <path
-      d="M13.7104 8.45953L6.34148 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.34148 17.7427L13.7104 9.55505C13.9904 9.24391 13.9904 8.76903 13.7104 8.45953Z"
-      fill="url(#paint1_linear_159_67708)"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear_159_67708"
-        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_159_67708"
-        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>
-);