src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -19,6 +19,7 @@ import {
   ProfileInfo,
   FamilyPending,
 } from "./Tabs";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function FamilyManageTabs({
   className,
@@ -118,9 +119,7 @@ export default function FamilyManageTabs({
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
-    { id: 3, name: "Pending" },
-    { id: 4, name: "Account" },
-    { id: 5, name: "Profile" },
+    { id: 3, name: "Pending" }
   ];
 
   const [tab, setTab] = useState(tabs[0].name);
@@ -201,6 +200,20 @@ export default function FamilyManageTabs({
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
               />
+              <div className="mt-4 flex justify-center items-center gap-2">
+                <button
+                  onClick={() => tabHandler('Account')} 
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
+                  <img src={localImgLoad('images/icons/account.svg')} className="w-[70px] h-[70px]" alt='Settings-Icon' />
+                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                </button>
+                <button
+                  onClick={() => tabHandler('Profile')} 
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
+                  <img src={localImgLoad('images/icons/profile.svg')} className="w-[70px] h-[70px]" alt='Settings-Icon' />
+                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                </button>
+              </div>
             </div>
             <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">