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 2391cbf..71d1ed3 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,9 +41,9 @@ 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];