.

src/Routers.jsx

@@ -89,7 +89,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
-          <Route exact path="/add-job" element={<AddJobPage />} />
+          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
           <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />

src/components/AddJob/AddJob.jsx

@@ -127,7 +127,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCountry();
   }, []);
 
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -237,7 +236,9 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.description && props.touched.description}
+                      errorBorder={
+                        props.errors.description && props.touched.description
+                      }
                     />
                   </div>
 
@@ -276,7 +277,10 @@ function AddJob({ popUpHandler, categories }) {
                         aria-labelledby="checked-group"
                       >
                         {Object.entries(categories).map(([key, value]) => (
-                          <label key={key} className="flex gap-1 w-full items-center">
+                          <label
+                            key={key}
+                            className="flex gap-1 w-full items-center"
+                          >
                             <Field
                               type="checkbox"
                               name="category"
@@ -354,8 +358,8 @@ function AddJob({ popUpHandler, categories }) {
 
                 <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    <Link
-                      to="/myjobs"
+                    <button
+                      type="button"
                       className="text-18 text-light-red tracking-wide "
                     >
                       <span
@@ -365,7 +369,7 @@ function AddJob({ popUpHandler, categories }) {
                         {" "}
                         Cancel
                       </span>
-                    </Link>
+                    </button>
 
                     {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />

src/components/MyJobs/MyJobTable.jsx

@@ -186,9 +186,9 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       <div className="header w-full flex justify-between items-center mb-5">
         <div className="flex space-x-2 items-center">
           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-            All Jobs
+            {filterCategories[selectedCategory]} Jobs
           </h1>
-        </div>
+        </div>  
         <SelectBox
           action={handleSetCategory}
           datas={Object.values(filterCategories)}

src/components/MyJobs/index.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useLocation } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
@@ -7,13 +7,26 @@ import AddJobPage from "../../views/AddJobPage";
 
 export default function MyJobs(props) {
   let { state } = useLocation();
-  const [popUp, setPopUp] = useState(state?.popup ? true : false);
+  const navigate = useNavigate();
+  const [popUp, setPopUp] = useState(false);
+
+  console.log(state)
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
+
+    if (state?.popup) navigate("/", { replace: true });
   };
 
   const categoryOptions = props.MyJobList?.data?.categories;
 
+  useEffect(() => {
+    if (!state?.popup) {
+      setPopUp(false);
+    } else {
+      setPopUp(true);
+    }
+  }, [state?.popup]);
+
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />

src/components/Partials/MobileSideBar.jsx

@@ -228,7 +228,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      state={true}
                     />
                   </ul>
                 </div>
@@ -302,12 +302,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, popup }) => {
   return (
     <li className="item group">
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Partials/Sidebar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function Sidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -131,27 +136,25 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-            <div
-              className={`menu-item transition-all duration-300 ease-in-out ${
-                sidebar ? "my-5" : ""
-              }`}
-            >
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">
-                  Family
-                </h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <ListItem
-                    title="Family Corner"
-                    route="/acc-family"
-                    iconName="people-two"
-                    sidebar={sidebar}
-                  />
-                </ul>
-              </div>
+          <div
+            className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "my-5" : ""
+            }`}
+          >
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">Family</h1>
             </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <ListItem
+                  title="Family Corner"
+                  route="/acc-family"
+                  iconName="people-two"
+                  sidebar={sidebar}
+                />
+              </ul>
+            </div>
+          </div>
         )}
         {userDetails?.account_type !== "FAMILY" && (
           <>
@@ -252,7 +255,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      popup={true}
                     />
                   </ul>
                 </div>
@@ -326,12 +329,12 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, iconName, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
   return (
     <li className={`item group`}>
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Settings/Tabs/PrivacyPolicyTab.jsx

@@ -1,210 +0,0 @@
-import React from "react";
-
-export default function PrivacyPolicyTab() {
-  return (
-    <div className="terms-conditon-tab w-full">
-      <div className="terms-condition-wrappr w-full">
-        <div className="mb-6">
-          <h1 className="text-3xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Privacy Policy
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            Wrenchboard issues this policy to inform users about the information
-            we collect, the use and disclosures in the course of interactions
-            with the WrenchBoard services by customers. We value the privacy of
-            our customers and such strive to employ best industry standards and
-            practices to protect their privacy. By signing up for this services,
-            using our products or technologies offered through the WrenchBoard
-            website, you expressly agree to the terms of this Privacy Policy.
-          </p>
-        </div>
-        <hr />
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Collection of Information
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            When you sign up for WrenchBoard platform as a user, freelancer,
-            worker or client, you inadvertently provide certain personal
-            information such as name and email address. This information may be
-            used to identify or contact you as part of the service we provide.
-            Below is information we may collect from registered users of the
-            service.
-          </p>
-          <ul className="flex flex-col rounded-[0.25rem]">
-            {[
-              "We collect financial information which include bank account numbers, debit/credit account.",
-              "We collect financial information which include bank account numbers, debit/credit account.",
-              "We collect personal information (names email addresses) from you and your friends when you use our referral program. We may also receive information about you from third party sites during promotions and campaigns.",
-            ].map((item, idx) => (
-              <li
-                className="border-opacity-10 block relative px-[1.25rem] py-[0.75rem] first:rounded-tl first:rounded-tr text-[#505056]"
-                key={idx}
-              >
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-        <hr />
-
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Use of Personal Information
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            The information we collect about you is mainly utilized to provide a
-            secure, efficient and smooth user experience as you interact with
-            the site. We may also utilize the information to contact you to
-            resolve issues with your account or resolve disputes between
-            freelancers and clients. We also use your personal information in
-            the following ways.
-          </p>
-          <ul className="flex flex-col rounded-[0.25rem]">
-            {[
-              "To comply with the regulatory requirement, whenever the need arises.",
-              "To improve business relationship between Wrenchboard and users.",
-              "To manage and protect our IT infrastructure.",
-              "To contact you as the need arises as part of the services we offer to users.",
-              "To provide some indication on the promotional offers and advertisement we direct to you.",
-              "To protect you and your information. We regularly send you notification based on activities as you use the service.",
-            ].map((item, idx) => (
-              <li
-                className="border-opacity-10 block relative px-[1.25rem] py-[0.75rem] first:rounded-tl first:rounded-tr text-[#505056]"
-                key={idx}
-              >
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-        <hr />
-
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            How We Share Your Personal Information:
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            When you sign up to the Service as a freelancer and create a
-            profile, we will share your limited personal information with
-            clients or project owners for whom you may perform a task or do work
-            for based on expression of interest. Such information will include
-            name, profile information with experience and your ranking based on
-            previous performance. This information will be available to the
-            public.
-            <br />
-            When you register as a client or project owner and post a job in the
-            market place or offer jobs to preselected freelancers or workers on
-            this service, information about you, your business will be shared.
-            This information will be based on the information provided in your
-            profile. <br />
-            In order to deliver a quality service on WrenchBoard, we require the
-            services of third parties and agents such as PayPal, Quickteller
-            Service or banks to facilitate and process transactions. <br />
-            We may also share your personal information when and if compelled or
-            mandated by government agencies, or court injunctions or regulatory
-            requirement. In order to settle disputes or claims, we may also be
-            compelled to share your information in order to deliver services to
-            you. <br />
-            Finally, we may share your information with companies that we plan
-            to to merge with or to be acquired by. We will take necessary
-            measure to ensure that all such new affiliations and corporate
-            entities comply with the Privacy Policies hereby stated failing
-            which you will be notified duly.
-          </p>
-        </div>
-        <hr />
-
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            How We Use Cookies and Related Technologies:
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            When you access the service or website, www.wrenchboard.com , we
-            store small files called Cookies in your browser. Cookies and
-            related technologies like beacons and tags are used to identify
-            customers uniquely. With Cookies, we can track and trend the pages
-            of interest within the website. Hence, these technologies help us
-            focus only relevant promotions or advertisement to each customer.
-            Through this technologies, we are able to improve the service based
-            on the feedback from the interaction with users. We also rely on
-            these technologies to mitigate fraudulent attempts on your
-            WrenchBoard account. You may elect to disable cookies to prevent
-            installation of cookies from the website to your browser. However,
-            your functional experience with the service or website may be
-            impacted. Note that you automatically disconnect from cookies when
-            you close your browser session or log out of the service.
-          </p>
-        </div>
-        <hr />
-
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Measures We Take to Secure Your Information
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            Your data and privacy are important to us as such we take extreme
-            care on how we protect your information. We use a combination of
-            industry standard encryption technologies to protect your
-            information. Your password is not visible to our technical support
-            team or any one in WrenchBoard. Our IT infrastructures are located
-            in hosting facilities with strict access controls, and security
-            protocols with only pre checked and authorized persons have access.
-          </p>
-        </div>
-        <hr />
-
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Updating Your Information or Opting Out
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            Users of this service may update the information posted in profiles
-            or their accounts at any time. The accuracy of information posted on
-            the profiles and accounts is entirely the responsibility of users.
-            You may also decide to opt out the service or close your account at
-            any time. We may also deactivate your account if you violate the
-            terms of use of the website. Whilst we will endeavor to delete your
-            core information in such instances, we will retain minimal records
-            for reasons including disputes, claims or administrative purposes.
-            Also, note that it may not be possible to delete any information you
-            had shared with other users on the website previously.
-          </p>
-        </div>
-        <hr />
-
-        <div className="my-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Deactivate/Delete your account
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            If you no longer wish to use our Services, you can deactivate your
-            Services account. If you want to deactivate your account, that
-            setting is available to you in your account settings. Otherwise,
-            please get in touch with our support. While we close any associated
-            process, you will not be able to access your account. Note that this
-            process cannot be reversed since we will remove your data. If you
-            want to use our services in the future, it will be a new account
-            altogether.
-          </p>
-        </div>
-        <hr />
-
-        <div className="mt-8">
-          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            Changes To the Policy
-          </h1>
-          <p className="text-base text-thin-light-gray leading-[28px] ">
-            We reserve the rights to update and make changes to this Privacy
-            policy at anytime. Changes will become effective once posted.
-            However, we will notify you by email or when you log on to the
-            service or website about any changes that fundamentally affect how
-            we manage your personal information. Contacting Us: You may contact
-            us about this policy through our email address anytime :
-            support@wrenchboard.com
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/Settings/Tabs/index.jsx

@@ -1,19 +0,0 @@
-import ChangePasswordTab from "./ChangePasswordTab";
-import FaqTab from "./FaqTab";
-import LoginActivityTab from "./LoginActivityTab";
-import NotificationSettingTab from "./NotificationSettingTab";
-import PaymentMathodsTab from "./PaymentMathodsTab";
-import PersonalInfoTab from "./PersonalInfoTab";
-import PrivacyPolicyTab from "./PrivacyPolicyTab";
-import TermsConditionTab from "./TermsConditionTab";
-
-export {
-  ChangePasswordTab,
-  FaqTab,
-  LoginActivityTab,
-  NotificationSettingTab,
-  PaymentMathodsTab,
-  PersonalInfoTab,
-  PrivacyPolicyTab,
-  TermsConditionTab,
-};

src/components/Settings/index.jsx

@@ -1,20 +1,56 @@
 import React, { useRef, useState } from "react";
 import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
+
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
-import {
-  ChangePasswordTab,
-  FaqTab,
-  LoginActivityTab,
-  NotificationSettingTab,
-  PaymentMathodsTab,
-  PersonalInfoTab,
-  PrivacyPolicyTab,
-  TermsConditionTab,
-} from "./Tabs";
+import ChangePasswordTab from "./Tabs/ChangePasswordTab";
+import FaqTab from "./Tabs/FaqTab";
+import LoginActivityTab from "./Tabs/LoginActivityTab";
+import NotificationSettingTab from "./Tabs/NotificationSettingTab";
+import PaymentMathodsTab from "./Tabs/PaymentMathodsTab";
+import PersonalInfoTab from "./Tabs/PersonalInfoTab";
+import TermsConditionTab from "./Tabs/TermsConditionTab";
 
-export default function Settings({ faq }) {
+export default function Settings({faq}) {
+  const tabs = [
+    {
+      id: 1,
+      name: "personal",
+    },
+    {
+      id: 2,
+      name: "payment",
+    },
+    {
+      id: 3,
+      name: "notification",
+    },
+    {
+      id: 4,
+      name: "login_activity",
+    },
+    {
+      id: 5,
+      name: "password",
+    },
+    {
+      id: 6,
+      name: "faq",
+    },
+    {
+      id: 7,
+      name: "privacy",
+    },
+    {
+      id: 8,
+      name: "terms",
+    },
+  ];
+  const [tab, setTab] = useState(tabs[0].name);
+  const tabHandler = (value) => {
+    setTab(value);
+  };
   const [profileImg, setProfileImg] = useState(profile);
   const [coverImg, setCoverImg] = useState(cover);
 
@@ -47,62 +83,6 @@ export default function Settings({ faq }) {
     }
   };
 
-  // Tabs Handling
-  const tabs = [
-    {
-      id: 1,
-      name: "personal",
-      title: "Edit Profile",
-      iconName: "people-hover",
-    },
-    {
-      id: 2,
-      name: "payment",
-      title: "Payment Method",
-      iconName: "bank-card",
-    },
-    {
-      id: 3,
-      name: "notification",
-      title: "Notification Setting",
-      iconName: "notification-setting",
-    },
-    {
-      id: 4,
-      name: "login_activity",
-      title: "Login Activity",
-      iconName: "login-activity",
-    },
-    {
-      id: 5,
-      name: "password",
-      title: "Change Password",
-      iconName: "password-hover",
-    },
-    {
-      id: 6,
-      name: "faq",
-      title: "FAQ",
-      iconName: "block-question",
-    },
-    {
-      id: 7,
-      name: "privacy",
-      title: "Privacy Policy",
-      iconName: "page-right",
-    },
-    {
-      id: 8,
-      name: "terms",
-      title: "Terms and Conditions",
-      iconName: "page-right",
-    },
-  ];
-  const [tab, setTab] = useState(tabs[0].name);
-  const tabHandler = (value) => {
-    setTab(value);
-  };
-
   return (
     <>
       <Layout>
@@ -117,28 +97,136 @@ export default function Settings({ faq }) {
             <div className="content-container w-full pt-10 rounded-2xl bg-white dark:bg-dark-white  ">
               <div className="content-heading w-full mb-8 lg:px-10 px-4">
                 <h1 className="text-xl font-bold text-dark-gray dark:text-white antialiased">
-                  Personal Information
+                  Parsonal Informaiton
                 </h1>
               </div>
               <div className="content-body w-full lg:flex lg:px-10 px-4">
                 <div className="content-tab-items lg:w-[230px] w-full mr-2">
                   <ul className="overflow-hidden mb-10 lg:mb-0">
-                    {tabs.map(({ name, id, title, iconName }) => (
-                      <li
-                        onClick={() => tabHandler(name)}
-                        key={id}
+                    <li
+                      onClick={() => tabHandler("personal")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "personal"
+                          ? "text-purple"
+                          : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="people-hover" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">Edit Profile</p>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => tabHandler("payment")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "payment"
+                          ? "text-purple"
+                          : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="bank-card" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">Payment Method</p>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => tabHandler("notification")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "notification"
+                          ? "text-purple"
+                          : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="notification-setting" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">
+                          Notifiction Setting
+                        </p>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => tabHandler("login_activity")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "login_activity"
+                          ? "text-purple"
+                          : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="login-activity" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">Login Activity</p>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => tabHandler("password")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "password"
+                          ? "text-purple"
+                          : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="password-hover" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">Change Password</p>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => tabHandler("faq")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "faq" ? "text-purple" : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="block-question" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">FAQ</p>
+                      </div>
+                    </li>
+                    <li
+                        onClick={() => tabHandler("terms")}
                         className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
-                          tab === name ? "text-purple" : " text-thin-light-gray"
+                            tab === "privacy"
+                                ? "text-purple"
+                                : " text-thin-light-gray"
                         }`}
-                      >
-                        <div>
-                          <Icons name={iconName} />
-                        </div>
-                        <div>
-                          <p className="text-18 tracking-wide">{title}</p>
-                        </div>
-                      </li>
-                    ))}
+                    >
+                      <div>
+                        <Icons name="page-right" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">
+                          Privacy Policy
+                        </p>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => tabHandler("terms")}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === "terms"
+                          ? "text-purple"
+                          : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name="page-right" />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">
+                          Terms and Conditions
+                        </p>
+                      </div>
+                    </li>
                   </ul>
                 </div>
                 <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
@@ -170,7 +258,6 @@ export default function Settings({ faq }) {
                   {tab === "login_activity" && <LoginActivityTab />}
                   {tab === "password" && <ChangePasswordTab />}
                   {tab === "faq" && <FaqTab datas={faq} />}
-                  {tab === "privacy" && <PrivacyPolicyTab />}
                   {tab === "terms" && <TermsConditionTab />}
                 </div>
               </div>