diff --git a/src/app/components/add-relatives/add-relatives.component.html b/src/app/components/add-relatives/add-relatives.component.html
new file mode 100644
index 0000000..65573db
--- /dev/null
+++ b/src/app/components/add-relatives/add-relatives.component.html
@@ -0,0 +1,118 @@
+<div>
+  <div *ngIf="isModalOpenBackdrop==false">
+    <ion-button size="small" shape="round" (click)="addStart()">Invite</ion-button>
+  </div>
+  <div *ngIf="isModalOpenBackdrop==true">
+    <div style="background-color: aliceblue; border-radius: 10px; padding: 10px; margin-top: 10px;">
+      <ion-item lines="none">
+        <ion-input type="text"
+                   maxlength="15"
+                   placeholder="Firstname"
+                   style="background-color: aliceblue; border-radius: 10px; padding-left: 1px;"
+                   (ionChange)="verifyEntry()"
+                   [(ngModel)]='firstname' ></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-input type="text"
+                   maxlength="15"
+                   placeholder="lastname"
+                   style="background-color: aliceblue; border-radius: 10px; padding-left: 1px;"
+                   (ionChange)="verifyEntry()"
+                   [(ngModel)]='lastname' ></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-input type="text"
+                   maxlength="15"
+                   placeholder="Email"
+                   style="background-color: aliceblue; border-radius: 10px; padding-left: 1px;"
+                   (ionChange)="verifyEntry()"
+                   [(ngModel)]='email' ></ion-input>
+      </ion-item>
+<!--      <ion-item lines="none">-->
+<!--        <ion-label>Birthday(Year/Month)</ion-label>-->
+<!--      </ion-item>-->
+
+<!--      <ion-item lines="none">-->
+
+
+
+<!--        <ion-grid>-->
+<!--          <ion-row style="margin: 0px; padding: 0px;">-->
+<!--            <ion-col style="margin: 0px; padding: 4px;">-->
+<!--              <div style="width: 100%; background-color: #8b198e;">-->
+<!--                <div style="width: 30%; float: left;">-->
+
+<!--                  Year-->
+<!--                </div>-->
+
+<!--                <div style="width: 70%; float: right;">-->
+
+<!--                  <ion-select aria-label="Year"-->
+<!--                              (ionChange)="verifyEntry()"-->
+<!--                              [(ngModel)]='year'-->
+<!--                              style="background-color: aliceblue; border-radius: 10px; font-size: 12px; width:100%;">-->
+<!--                    <ion-select-option  *ngFor="let item1 of regYear"  value="{{item1}}">{{item1}}</ion-select-option>-->
+<!--                  </ion-select>-->
+
+<!--                </div>-->
+
+<!--              </div>-->
+
+<!--            </ion-col>-->
+<!--          </ion-row>-->
+
+<!--          <ion-row style="margin: 0px; padding: 0px;">-->
+<!--            <ion-col style="margin: 0px; padding: 4px; ">-->
+<!--              <div style="width: 100%; background-color: #8b198e;">-->
+<!--                <div style="width: 30%; float: left;">-->
+<!--                  Month-->
+<!--                </div>-->
+
+<!--                <div style="width: 70%; float: right;">-->
+<!--                  <ion-select aria-label="Month"-->
+<!--                              (ionChange)="verifyEntry()"-->
+<!--                              [(ngModel)]='month'-->
+<!--                              expand="block"-->
+<!--                              style="background-color: aliceblue; border-radius: 10px; width: 100%; font-size: 12px;">-->
+<!--                    <ion-select-option *ngFor="let item of regMonth;" value="{{item[0]}}">{{item[1]}}</ion-select-option>-->
+<!--                  </ion-select>-->
+
+<!--                </div>-->
+
+<!--              </div>-->
+
+<!--            </ion-col>-->
+<!--          </ion-row>-->
+
+
+<!--        </ion-grid>-->
+
+
+<!--      </ion-item>-->
+      <ion-grid>
+        <ion-row>
+          <ion-col style="text-align: left">
+            <ion-button (click)="setCloseModal()" size="small" shape="round" color="danger">
+              Close
+            </ion-button>
+
+          </ion-col>
+          <ion-col>
+            <div style="text-align: right;">
+              {{addFamilyResult}}
+              <ion-button shape="round"
+                          [disabled]="isDisabled"
+                          size="small"
+                          (click)="inviteFamily()">Send Invite</ion-button>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
+    </div>
+
+
+
+  </div>
\ No newline at end of file
diff --git a/src/app/components/add-relatives/add-relatives.component.scss b/src/app/components/add-relatives/add-relatives.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/add-relatives/add-relatives.component.spec.ts b/src/app/components/add-relatives/add-relatives.component.spec.ts
new file mode 100644
index 0000000..99e385e
--- /dev/null
+++ b/src/app/components/add-relatives/add-relatives.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AddRelativesComponent } from './add-relatives.component';
+
+describe('AddRelativesComponent', () => {
+  let component: AddRelativesComponent;
+  let fixture: ComponentFixture<AddRelativesComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddRelativesComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddRelativesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/add-relatives/add-relatives.component.ts b/src/app/components/add-relatives/add-relatives.component.ts
new file mode 100644
index 0000000..bdb9291
--- /dev/null
+++ b/src/app/components/add-relatives/add-relatives.component.ts
@@ -0,0 +1,122 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {SessionDataProviderService} from "../../store/session-data-provider.service";
+import {WrenchService} from "../../services/wrench.service";
+import {LoadingController} from "@ionic/angular";
+
+@Component({
+  selector: 'app-add-relatives',
+  templateUrl: './add-relatives.component.html',
+  styleUrls: ['./add-relatives.component.scss'],
+})
+export class AddRelativesComponent implements OnInit {
+  isModalOpen:boolean = false;
+  isModalOpenBackdrop:boolean = false;
+
+  @ViewChild('firstname') firstname;
+  @ViewChild('lastname') lastname;
+  @ViewChild('email') email;
+
+  @ViewChild('month') month;
+  @ViewChild('year') year;
+  addFamilyResult:string='';
+
+
+  constructor(
+      public sessionDataProviderService: SessionDataProviderService,
+      private wrenchService: WrenchService,
+      private loadingCtrl: LoadingController
+  ) { }
+
+  regMonth:any;
+  regYear:any;
+  ngOnInit() {
+    this.regMonth=this.sessionDataProviderService.getMonths();
+    this.regYear = this.sessionDataProviderService.getChildAddYears();
+    //debugger;
+  }
+
+
+  addStart(){
+    this.isModalOpen = true;
+    this.isModalOpenBackdrop= true;
+  }
+
+  setCloseModal(){
+    this.firstname='';
+    this.lastname='';
+    this.isModalOpen = false;
+    this.isModalOpenBackdrop= false;
+    dispatchEvent(new Event("family_refresh_list"));
+
+  }
+
+  isDisabled:boolean= true;
+  verifyEntry(){
+    this.isDisabled= true;
+    if ( this.firstname.length> 1 && this.lastname.length> 1 && this.month> 0 && this.year> 0  ){
+      this.isDisabled= false;
+    }
+  }
+  /*
+    'member_id' => int 1
+    'sessionid' => string '9C780E24425EBE70E1AE3D385193E6FF0DF839A5CA62CD6A6DCE9A5065530968' (length=64)
+    'uid' => string '3119b744-42ad-4834-bb83-b737588754ca' (length=36)
+    'firstname' => string 'First406' (length=8)
+    'lastname' => string 'Last151' (length=7)
+    'year' => int 2002
+    'month' => int 8
+    'action' => int 22015
+   */
+  reqData: {
+    action:number,
+    member_id: number,
+    uid: string,
+    sessionid: string,
+    firstname:string,
+    lastname: string,
+    month: number,
+    year: number
+  };
+
+  createFamilyResult:any;
+
+  async inviteFamily(){
+    const loading = await this.loadingCtrl.create({
+      message: 'Sending Invite...',
+      duration: 5000,
+    });
+
+    this.reqData={
+      action:22015,
+      member_id: this.sessionDataProviderService.member_id,
+      uid: this.sessionDataProviderService.member_uid,
+      sessionid: this.sessionDataProviderService.session ,
+      firstname: this.firstname,
+      lastname: this.lastname,
+      month: this.month,
+      year: this.year
+    }
+    loading.present();
+return;
+    this.wrenchService.familyAdd(this.reqData).subscribe(
+        createFamilyResult => {
+          loading.dismiss();
+          this.createFamilyResult = createFamilyResult;
+          console.log("this.wrenchService.createFamilyResult RETURN DATA->", this.createFamilyResult);
+          if (this.createFamilyResult.internal_return> 0){
+            this.firstname='';
+            this.lastname='';
+
+            this.createFamilyResult =  "Family Added";
+            setTimeout(()=>{
+              this.createFamilyResult="";
+              this.setCloseModal();
+            },3000);
+          }
+        }
+    );
+  }
+
+
+
+}
diff --git a/src/app/pages/familysettings/familysettings.module.ts b/src/app/pages/familysettings/familysettings.module.ts
index f5ca706..63e6b05 100644
--- a/src/app/pages/familysettings/familysettings.module.ts
+++ b/src/app/pages/familysettings/familysettings.module.ts
@@ -8,6 +8,7 @@ import { FamilysettingsPageRoutingModule } from './familysettings-routing.module
 
 import { FamilysettingsPage } from './familysettings.page';
 import {AddFamilyComponent} from "../../components/add-family/add-family.component";
+import {AddRelativesComponent} from "../../components/add-relatives/add-relatives.component";
 
 @NgModule({
   imports: [
@@ -16,6 +17,6 @@ import {AddFamilyComponent} from "../../components/add-family/add-family.compone
     IonicModule,
     FamilysettingsPageRoutingModule
   ],
-  declarations: [FamilysettingsPage,AddFamilyComponent]
+  declarations: [FamilysettingsPage,AddFamilyComponent,AddRelativesComponent]
 })
 export class FamilysettingsPageModule {}
diff --git a/src/app/pages/familysettings/familysettings.page.html b/src/app/pages/familysettings/familysettings.page.html
index 1ca8f24..1e45fff 100644
--- a/src/app/pages/familysettings/familysettings.page.html
+++ b/src/app/pages/familysettings/familysettings.page.html
@@ -32,9 +32,7 @@
                     <ion-label>Parents & Community</ion-label>
                 </ion-item>
                 <div class="ion-padding" slot="content">
-
-Dev Goes here 
-
+                   <app-add-relatives></app-add-relatives>
                 </div>
             </ion-accordion>
             <ion-accordion value="third">