diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx
new file mode 100644
index 0000000..b0d4b0e
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AddFamily = () => {
+  return (
+    <div>Add Family</div>
+  )
+}
+
+export default AddFamily
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx
new file mode 100644
index 0000000..28b28ce
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FamilyBanner = () => {
+  return (
+    <div>Family Banner</div>
+  )
+}
+
+export default FamilyBanner
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx
new file mode 100644
index 0000000..3eeff60
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Relatives = () => {
+  return (
+    <div>Relatives</div>
+  )
+}
+
+export default Relatives
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/index.js b/src/components/FamilyAcc/FamilySettings/Tabs/index.js
new file mode 100644
index 0000000..0b784c3
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/Tabs/index.js
@@ -0,0 +1,5 @@
+import AddFamily from "./AddFamily";
+import FamilyBanner from "./FamilyBanner";
+import Relatives from "./Relatives";
+
+export {AddFamily, FamilyBanner, Relatives}
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
index e0cc8cf..d00cf1b 100644
--- a/src/components/FamilyAcc/FamilySettings/index.jsx
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
+import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
   const tabs = [
@@ -40,12 +41,12 @@ const FamilySettings = () => {
   }, [tab]);
 
   const tabComponents = {
-    add_family: "Add Family",
-    relatives: "Relatives",
-    family_banner: "Family Banner",
+    add_family: <AddFamily />,
+    relatives: <Relatives />,
+    family_banner: <FamilyBanner />,
   };
 
-  const defaultTabComponent = Array(tabComponents)[0];
+  const defaultTabComponent = Array(tabComponents)[0].add_family;
 
   const selectedComponent = tabComponents[tab] || defaultTabComponent;
 
@@ -86,7 +87,7 @@ const FamilySettings = () => {
                   ))}
                 </ul>
               </div>
-              <div class="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+              <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
               <div className="flex-1">
                 <div className="tab-item">{selectedComponent}</div>
               </div>
diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index 0d30343..e251974 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -149,7 +149,7 @@ export default function FamilyTable({
               className="w-[0.7rem]"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
                 // fill=""
                 className="color000000 svgShape fill-[#fff]"