diff --git a/Tithe-Vue/src/components/Forms/AddPersonInFamilyForm.vue b/Tithe-Vue/src/components/Forms/AddPersonInFamilyForm.vue
new file mode 100644
index 0000000..92c2b41
--- /dev/null
+++ b/Tithe-Vue/src/components/Forms/AddPersonInFamilyForm.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from "vue";
+
+import { mdiClose, mdiPlus } from "@mdi/js";
+
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import PersonForm from "@/components/Forms/PersonForm.vue";
+
+const persons = ref([]);
+
+const addInput = () => {
+  persons.value.push({});
+};
+
+const removeInput = (counter) => {
+  persons.value.splice(counter, 1);
+};
+</script>
+
+<template>
+  <div v-for="(person, index) in persons" :key="index">
+    <FormField>
+      <div class="flex justify-between">
+        <span>Person {{ index + 1 }}</span>
+        <BaseButton
+          color="danger"
+          :icon="mdiClose"
+          :outline="true"
+          :rounded-full="false"
+          @click="removeInput(index)"
+        />
+      </div>
+    </FormField>
+    <!-- <FormField>
+      <FormControl
+        v-model="persons[index]"
+        type="text"
+        :borderless="false"
+        placeholder="Shalom House"
+      />
+    </FormField> -->
+    <PersonForm v-model="persons[index]" />
+    <span></span>
+  </div>
+  <FormField class="text-center">
+    <BaseButton
+      color="contrast"
+      label="Add Family Member"
+      :icon="mdiPlus"
+      :small="true"
+      :outline="true"
+      :rounded-full="true"
+      @click="addInput"
+    />
+  </FormField>
+</template>
diff --git a/Tithe-Vue/src/components/Forms/PersonForm.vue b/Tithe-Vue/src/components/Forms/PersonForm.vue
new file mode 100644
index 0000000..2c483f4
--- /dev/null
+++ b/Tithe-Vue/src/components/Forms/PersonForm.vue
@@ -0,0 +1,180 @@
+<script setup>
+import { computed, ref, watch, watchEffect } from "vue";
+
+import { mdiAccount } from "@mdi/js";
+
+import FormField from "@/components/FormField.vue";
+import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
+import FormControl from "@/components/FormControl.vue";
+import ForaneSingleSelectBox from "@/components/SearchBoxes/ForaneSingleSelectBox.vue";
+import ParishByForaneSingleSelectBox from "@/components/SearchBoxes/ParishByForaneSingleSelectBox.vue";
+import FamilyByParishSingleSelectBox from "@/components/SearchBoxes/FamilyByParishSingleSelectBox.vue";
+import RelationSingleSelectBox from "@/components/SearchBoxes/RelationSingleSelectBox.vue";
+
+const props = defineProps({
+  // Since this form is being used in both family and person page
+  isFamilyRequired: Boolean,
+  modelValue: {
+    type: Object,
+    default: (props) =>
+      props.isFamilyRequired
+        ? {
+            personName: "",
+            baptismName: "",
+            gender: "",
+            dob: "",
+            phone: "",
+            familyId: "",
+            relationId: "",
+            educationIds: [],
+            occupationIds: [],
+          }
+        : {
+            personName: "",
+            baptismName: "",
+            gender: "",
+            dob: "",
+            phone: "",
+            relationId: "",
+            educationIds: [],
+            occupationIds: [],
+          },
+  },
+});
+
+const emits = defineEmits(["update:modelValue", "changeInPersonForm"]);
+
+// const createPersonForm = props.isFamilyRequired
+//   ? reactive({
+//       personName: "",
+//       baptismName: "",
+//       gender: "",
+//       dob: "",
+//       phone: "",
+//       familyId: "",
+//       relationId: "",
+//       educationIds: [],
+//       occupationIds: [],
+//     })
+//   : reactive({
+//       personName: "",
+//       baptismName: "",
+//       gender: "",
+//       dob: "",
+//       phone: "",
+//       relationId: "",
+//       educationIds: [],
+//       occupationIds: [],
+//     });
+
+const createPersonForm = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+const formForane = ref();
+const formParish = ref();
+const formFamily = ref();
+
+const changeInFormForane = (entity) => {
+  formForane.value = entity;
+};
+
+const changeInFormParish = (entity) => {
+  formParish.value = entity;
+};
+
+const changeInFormFamily = (entity) => {
+  formFamily.value = entity;
+};
+
+const changeInFormRelation = (entity) => {
+  createPersonForm.value.relationId = entity.id;
+};
+
+watch(formFamily, (value) => {
+  createPersonForm.value.familyId = value.id;
+});
+
+watchEffect(() => {
+  //   emits("changeInPersonForm", createPersonForm);
+  emits("update:modelValue", createPersonForm);
+});
+</script>
+
+<template>
+  <FormField label="Person Name">
+    <FormControl
+      v-model="createPersonForm.personName"
+      type="text"
+      :icon="mdiAccount"
+      placeholder="Mathew"
+    />
+  </FormField>
+  <FormField label="Baptism Name">
+    <FormControl
+      v-model="createPersonForm.baptismName"
+      type="text"
+      placeholder="Matt"
+    />
+  </FormField>
+  <FormField label="Gender">
+    <FormCheckRadioGroup
+      v-model="createPersonForm.gender"
+      name="sample-radio"
+      type="radio"
+      :options="{ M: 'Male', F: 'Female' }"
+    />
+  </FormField>
+  <FormField label="Date of Birth">
+    <FormControl
+      v-model="createPersonForm.dob"
+      type="text"
+      placeholder="YYYY-MM-DD"
+    />
+  </FormField>
+  <FormField label="Phone">
+    <FormControl
+      v-model="createPersonForm.phone"
+      type="tel"
+      placeholder="04792662745"
+    />
+  </FormField>
+  <ForaneSingleSelectBox
+    v-if="props.isFamilyRequired"
+    heading="Forane"
+    class="multipleSelectAddressBox"
+    @change-in-forane="changeInFormForane"
+  />
+  <ParishByForaneSingleSelectBox
+    v-if="props.isFamilyRequired"
+    heading="Parish"
+    :selected-forane="formForane"
+    class="multipleSelectAddressBox"
+    @change-in-parish="changeInFormParish"
+  />
+  <FamilyByParishSingleSelectBox
+    v-if="props.isFamilyRequired"
+    heading="Family"
+    :selected-parish="formParish"
+    class="multipleSelectAddressBox"
+    @change-in-family="changeInFormFamily"
+  />
+  <RelationSingleSelectBox
+    heading="Relation"
+    class="multipleSelectAddressBox"
+    @change-in-relation="changeInFormRelation"
+  />
+</template>
+
+<style scoped>
+.multipleSelectAddressBox :deep(.multiselect-theme) {
+  --ms-bg: #1e293b;
+  --ms-dropdown-bg: #1e293b;
+  --ms-dropdown-border-color: #1e293b;
+
+  --ms-py: 0.757rem;
+}
+</style>
diff --git a/Tithe-Vue/src/components/SearchBoxes/FamilyByParishSingleSelectBox.vue b/Tithe-Vue/src/components/SearchBoxes/FamilyByParishSingleSelectBox.vue
new file mode 100644
index 0000000..b608281
--- /dev/null
+++ b/Tithe-Vue/src/components/SearchBoxes/FamilyByParishSingleSelectBox.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { computed, watchEffect } from "vue";
+import gql from "graphql-tag";
+import { useLazyQuery } from "@vue/apollo-composable";
+
+import FormField from "@/components/FormField.vue";
+import SingleSelectBox from "@/components/SearchBoxes/SingleSelectBox.vue";
+
+import { familyAllFamilyListQuery } from "@/externalized-data/graphqlQueries";
+
+const props = defineProps({
+  heading: {
+    type: String,
+    default: "Select Family",
+  },
+  selectedParish: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emits = defineEmits(["changeInFamily"]);
+
+const ACTIVE_FAMILY_BY_PARISH_LIST_QUERY = gql`
+  ${familyAllFamilyListQuery}
+`;
+
+const {
+  result: activeFamilyList,
+  load: activeFamilyListLoad,
+  refetch: activeFamilyListRefetch,
+} = useLazyQuery(ACTIVE_FAMILY_BY_PARISH_LIST_QUERY, () => ({
+  parishId: props.selectedParish?.id,
+}));
+
+const loadFamilies = computed((query, setOptions) => {
+  return (
+    activeFamilyList.value?.getAllFamiliesByParish?.map((entity) => {
+      return {
+        id: entity.familyId,
+        label: entity.familyName,
+        value: {
+          id: entity.familyId,
+          label: entity.familyName,
+        },
+      };
+    }) ?? []
+  );
+});
+
+watchEffect(() => {
+  console.log(props.selectedParish);
+  activeFamilyListLoad();
+});
+
+const changeInFamily = (entity) => {
+  emits("changeInFamily", entity);
+};
+</script>
+
+<template>
+  <FormField :label="props.heading">
+    <SingleSelectBox
+      :options="loadFamilies"
+      :can-deselect="false"
+      :can-clear="false"
+      :searchable="true"
+      :meta-label-enabled="false"
+      @value-change="changeInFamily"
+    />
+  </FormField>
+</template>
diff --git a/Tithe-Vue/src/components/SearchBoxes/RelationSingleSelectBox.vue b/Tithe-Vue/src/components/SearchBoxes/RelationSingleSelectBox.vue
new file mode 100644
index 0000000..073ef78
--- /dev/null
+++ b/Tithe-Vue/src/components/SearchBoxes/RelationSingleSelectBox.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { computed, ref } from "vue";
+import gql from "graphql-tag";
+import { useLazyQuery } from "@vue/apollo-composable";
+
+import FormField from "@/components/FormField.vue";
+import SingleSelectBox from "@/components/SearchBoxes/SingleSelectBox.vue";
+
+import { personAllRelationListQuery } from "@/externalized-data/graphqlQueries";
+
+const props = defineProps({
+  heading: {
+    type: String,
+    default: "Select Relation",
+  },
+});
+
+const emits = defineEmits(["changeInRelation"]);
+
+const RELATION_LIST_QUERY = gql`
+  ${personAllRelationListQuery}
+`;
+
+const {
+  result: formRelationList,
+  load: formRelationListLoad,
+  refetch: formRelationListRefetch,
+} = useLazyQuery(RELATION_LIST_QUERY);
+formRelationListLoad();
+
+const loadRelations = computed((query, setOptions) => {
+  return (
+    formRelationList.value?.getAllRelations?.map((entity) => {
+      return {
+        id: entity.relationId,
+        label: entity.relationName,
+        value: {
+          id: entity.relationId,
+          label: entity.relationName,
+        },
+      };
+    }) ?? []
+  );
+});
+
+const changeInRelation = (entity) => {
+  emits("changeInRelation", entity);
+};
+</script>
+
+<template>
+  <FormField :label="props.heading">
+    <SingleSelectBox
+      :options="loadRelations"
+      :can-deselect="false"
+      :can-clear="false"
+      :searchable="true"
+      :meta-label-enabled="false"
+      @value-change="changeInRelation"
+    />
+  </FormField>
+</template>
diff --git a/Tithe-Vue/src/views/FamilyView.vue b/Tithe-Vue/src/views/FamilyView.vue
index 5253c16..47ff334 100644
--- a/Tithe-Vue/src/views/FamilyView.vue
+++ b/Tithe-Vue/src/views/FamilyView.vue
@@ -16,9 +16,11 @@ import {
   mdiTableLarge,
 } from "@mdi/js";
 
-import SearchBox from "@/components/SearchBox.vue";
+import AddPersonInFamilyForm from "@/components/Forms/AddPersonInFamilyForm.vue";
 import ForaneSingleSelectBox from "@/components/SearchBoxes/ForaneSingleSelectBox.vue";
 import ParishByForaneSingleSelectBox from "@/components/SearchBoxes/ParishByForaneSingleSelectBox.vue";
+import FamilyByParishSingleSelectBox from "@/components/SearchBoxes/FamilyByParishSingleSelectBox.vue";
+import KoottaymaByParishSingleSelectBox from "@/components/SearchBoxes/KoottaymaByParishSingleSelectBox.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionMain from "@/components/SectionMain.vue";
 import FormField from "@/components/FormField.vue";
@@ -37,11 +39,7 @@ import RemoveEntityDisclosure from "@/components/RemoveEntityDisclosure.vue";
 
 import TableTabs from "@/components/TableTabs.vue";
 import {
-  familyAllForaneListQuery,
-  familyAllParishListQuery,
-  familyAllFamilyListQuery,
   familyPageActiveEnityCountQuery,
-  familyAllKoottaymaListQuery,
   familyPageActivePersonTableQuery,
 } from "@/externalized-data/graphqlQueries";
 import {
@@ -81,69 +79,16 @@ const forane = ref();
 const parish = ref();
 const family = ref();
 
-const ACTIVE_FORANE_LIST_QUERY = gql`
-  ${familyAllForaneListQuery}
-`;
-
-const {
-  result: activeForaneList,
-  load: activeForaneListLoad,
-  refetch: activeForaneListRefetch,
-} = useLazyQuery(ACTIVE_FORANE_LIST_QUERY);
-activeForaneListLoad();
-const loadForanes = (query, setOptions) => {
-  setOptions(
-    activeForaneList.value?.getAllForanes?.map((entity) => {
-      return {
-        id: entity.foraneId,
-        label: entity.foraneName,
-      };
-    }) ?? []
-  );
+const changeInForane = (entity) => {
+  forane.value = entity;
 };
 
-const ACTIVE_PARISH_BY_FORANE_LIST_QUERY = gql`
-  ${familyAllParishListQuery}
-`;
-
-const {
-  result: activeParishList,
-  load: activeParishListLoad,
-  refetch: activeParishListRefetch,
-} = useLazyQuery(ACTIVE_PARISH_BY_FORANE_LIST_QUERY, () => ({
-  foraneId: forane.value.id,
-}));
-const loadParishesByForane = (query, setOptions) => {
-  setOptions(
-    activeParishList.value?.getAllParishesByForane?.map((entity) => {
-      return {
-        id: entity.parishId,
-        label: entity.parishName,
-      };
-    }) ?? []
-  );
+const changeInParish = (entity) => {
+  parish.value = entity;
 };
 
-const ACTIVE_FAMILY_BY_PARISH_LIST_QUERY = gql`
-  ${familyAllFamilyListQuery}
-`;
-
-const {
-  result: activeFamilyList,
-  load: activeFamilyListLoad,
-  refetch: activeFamilyListRefetch,
-} = useLazyQuery(ACTIVE_FAMILY_BY_PARISH_LIST_QUERY, () => ({
-  parishId: parish.value.id,
-}));
-const loadFamiliesByParish = (query, setOptions) => {
-  setOptions(
-    activeFamilyList.value?.getAllFamiliesByParish?.map((entity) => {
-      return {
-        id: entity.familyId,
-        label: entity.familyName,
-      };
-    }) ?? []
-  );
+const changeInFamily = (entity) => {
+  family.value = entity;
 };
 
 // Entity Count in Family Page
@@ -165,14 +110,6 @@ const activePersonCount = computed(
   () => activeEntityByFamilyCount.value?.getPersonCountByFamily ?? 0
 );
 
-watch(forane, () => {
-  activeParishListLoad();
-});
-
-watch(parish, () => {
-  activeFamilyListLoad();
-});
-
 watch(family, () => {
   activeEntityByFamilyCountEnabled.value = true;
 });
@@ -197,56 +134,20 @@ const formForane = ref();
 // Form Parish Search Box
 const formParish = ref();
 
-const {
-  result: activeFormParishList,
-  load: activeFormParishListLoad,
-  refetch: activeFormParishListRefetch,
-} = useLazyQuery(ACTIVE_PARISH_BY_FORANE_LIST_QUERY, () => ({
-  foraneId: formForane.value.id,
-}));
-const loadFormParishesByForane = (query, setOptions) => {
-  setOptions(
-    activeFormParishList.value?.getAllParishesByForane?.map((entity) => {
-      return {
-        id: entity.parishId,
-        label: entity.parishName,
-      };
-    }) ?? []
-  );
-};
-
 // Form Koottayma Search Box
 const formKoottayma = ref();
 
-const ACTIVE_KOOTTAYMA_BY_PARISH_LIST_QUERY = gql`
-  ${familyAllKoottaymaListQuery}
-`;
-
-const {
-  result: activeFormKoottaymaList,
-  load: activeFormKoottaymaListLoad,
-  refetch: activeFormKoottaymaListRefetch,
-} = useLazyQuery(ACTIVE_KOOTTAYMA_BY_PARISH_LIST_QUERY, () => ({
-  parishId: formParish.value.id,
-}));
-const loadFormKoottaymasByParish = (query, setOptions) => {
-  setOptions(
-    activeFormKoottaymaList.value?.getAllKoottaymasByParish?.map((entity) => {
-      return {
-        id: entity.koottaymaId,
-        label: entity.koottaymaName,
-      };
-    }) ?? []
-  );
+const changeInFormForane = (entity) => {
+  formForane.value = entity;
 };
 
-watch(formForane, () => {
-  activeFormParishListLoad();
-});
+const changeInFormParish = (entity) => {
+  formParish.value = entity;
+};
 
-watch(formParish, () => {
-  activeFormKoottaymaListLoad();
-});
+const changeInFormKoottayma = (entity) => {
+  formKoottayma.value = entity;
+};
 
 watch(formKoottayma, (value) => {
   createFamilyForm.koottaymaId = value.id;
@@ -404,32 +305,22 @@ const getActivePersonRows = computed(() => {
     <SectionMain>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
         <div class="flex-col justify-between">
-          <FormField label="Select Forane">
-            <SearchBox
-              v-model="forane"
-              :load-options="loadForanes"
-              :create-option="false"
-              :reload-method="activeForaneListRefetch"
-              bg-color="#0f172a"
-            />
-          </FormField>
-          <FormField v-if="forane" label="Select Parish">
-            <SearchBox
-              v-model="parish"
-              :load-options="loadParishesByForane"
-              :create-option="false"
-              :reload-method="activeParishListRefetch"
-              bg-color="#0f172a"
-            />
-          </FormField>
-          <FormField v-if="parish" label="Select Family">
-            <SearchBox
-              v-model="family"
-              :load-options="loadFamiliesByParish"
-              :create-option="false"
-              :reload-method="activeFamilyListRefetch"
-              bg-color="#0f172a"
+          <ForaneSingleSelectBox @change-in-forane="changeInForane" />
+          <span v-if="forane">
+            <ParishByForaneSingleSelectBox
+              :selected-forane="forane"
+              @change-in-parish="changeInParish"
             />
+            <span></span>
+          </span>
+
+          <FormField>
+            <span v-if="parish">
+              <FamilyByParishSingleSelectBox
+                :selected-parish="parish"
+                @change-in-family="changeInFamily"
+              />
+            </span>
           </FormField>
         </div>
         <div class="flex flex justify-between">
@@ -451,6 +342,7 @@ const getActivePersonRows = computed(() => {
                       v-model="createFamilyForm.familyName"
                       type="text"
                       :icon="mdiAccountMultiple"
+                      :borderless="true"
                       placeholder="Shalom House"
                     />
                   </FormField>
@@ -460,37 +352,29 @@ const getActivePersonRows = computed(() => {
                       v-model="createFamilyForm.address.buildingName"
                     />
                   </FormField> -->
-                  <FormField label="Forane">
-                    <SearchBox
-                      v-model="formForane"
-                      :load-options="loadForanes"
-                      :create-option="false"
-                      :reload-method="activeForaneListRefetch"
-                      bg-color="#1e293b"
-                    />
-                  </FormField>
-                  <FormField label="Parish">
-                    <SearchBox
-                      v-model="formParish"
-                      :load-options="loadFormParishesByForane"
-                      :create-option="false"
-                      :reload-method="activeFormParishListRefetch"
-                      bg-color="#1e293b"
-                    />
-                  </FormField>
-                  <FormField label="Koottayma">
-                    <SearchBox
-                      v-model="formKoottayma"
-                      :load-options="loadFormKoottaymasByParish"
-                      :create-option="false"
-                      :reload-method="activeFormKoottaymaListRefetch"
-                      bg-color="#1e293b"
-                    />
-                  </FormField>
+                  <ForaneSingleSelectBox
+                    heading="Forane"
+                    class="multipleSelectAddressBox"
+                    @change-in-forane="changeInFormForane"
+                  />
+                  <ParishByForaneSingleSelectBox
+                    heading="Parish"
+                    :selected-forane="formForane"
+                    class="multipleSelectAddressBox"
+                    @change-in-parish="changeInFormParish"
+                  />
+
+                  <KoottaymaByParishSingleSelectBox
+                    heading="Koottayma"
+                    :selected-parish="formParish"
+                    class="multipleSelectAddressBox"
+                    @change-in-koottayma="changeInFormKoottayma"
+                  />
                   <FormField label="Phone">
                     <FormControl
                       v-model="createFamilyForm.phone"
                       type="tel"
+                      :borderless="true"
                       placeholder="04792662745"
                     />
                   </FormField>
@@ -498,9 +382,10 @@ const getActivePersonRows = computed(() => {
                     ref="addressFormComponent"
                     @address-form-change="changeInAddressFormData"
                   />
+                  <AddPersonInFamilyForm />
                   <BaseButton
                     class="baseButtonStyle"
-                    color="info"
+                    color="success"
                     label="Submit"
                     @click="submitCreateFamilyForm"
                   />
@@ -619,4 +504,12 @@ const getActivePersonRows = computed(() => {
 .baseButtonStyle {
   width: 100%;
 }
+
+.multipleSelectAddressBox :deep(.multiselect-theme) {
+  --ms-bg: #1e293b;
+  --ms-dropdown-bg: #1e293b;
+  --ms-dropdown-border-color: #1e293b;
+
+  --ms-py: 0.757rem;
+}
 </style>
diff --git a/Tithe-Vue/src/views/KoottaymaView.vue b/Tithe-Vue/src/views/KoottaymaView.vue
index 8bb89aa..5962586 100644
--- a/Tithe-Vue/src/views/KoottaymaView.vue
+++ b/Tithe-Vue/src/views/KoottaymaView.vue
@@ -20,7 +20,6 @@ import {
 import ForaneSingleSelectBox from "@/components/SearchBoxes/ForaneSingleSelectBox.vue";
 import ParishByForaneSingleSelectBox from "@/components/SearchBoxes/ParishByForaneSingleSelectBox.vue";
 import KoottaymaByParishSingleSelectBox from "@/components/SearchBoxes/KoottaymaByParishSingleSelectBox.vue";
-import SearchBox from "@/components/SearchBox.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionMain from "@/components/SectionMain.vue";
 import FormField from "@/components/FormField.vue";
@@ -38,9 +37,6 @@ import RemoveEntityDisclosure from "@/components/RemoveEntityDisclosure.vue";
 
 import TableTabs from "@/components/TableTabs.vue";
 import {
-  koottaymaAllForaneListQuery,
-  koottaymaAllParishListQuery,
-  koottaymaAllKoottaymaListQuery,
   koottaymaPageActiveEnityCountQuery,
   koottaymaPageActiveFamilyTableQuery,
   koottaymaPageActivePersonTableQuery,
@@ -336,6 +332,7 @@ const getActivePersonRows = computed(() => {
                       v-model="createKoottaymaForm.koottaymaName"
                       type="text"
                       :icon="mdiHandsPray"
+                      :borderless="true"
                       placeholder="St. George Koottayma"
                     />
                   </FormField>
@@ -355,7 +352,7 @@ const getActivePersonRows = computed(() => {
 
                   <BaseButton
                     class="baseButtonStyle"
-                    color="info"
+                    color="success"
                     label="Submit"
                     @click="submitCreateKoottaymaForm"
                   />
diff --git a/Tithe-Vue/src/views/PersonView.vue b/Tithe-Vue/src/views/PersonView.vue
index 629e5a6..35749ad 100644
--- a/Tithe-Vue/src/views/PersonView.vue
+++ b/Tithe-Vue/src/views/PersonView.vue
@@ -569,7 +569,7 @@ onMounted(() => {
 
                   <BaseButton
                     class="baseButtonStyle"
-                    color="info"
+                    color="success"
                     label="Submit"
                     @click="submitCreatePersonForm"
                   />