diff --git a/src/app/components/add-family/add-family.component.html b/src/app/components/add-family/add-family.component.html
index 215451b..cef14d1 100644
--- a/src/app/components/add-family/add-family.component.html
+++ b/src/app/components/add-family/add-family.component.html
@@ -1,50 +1,77 @@
 <div>
-  <ion-button size="small" shape="round" (click)="addStart()">Add Family</ion-button>
-</div>
+  <div>
+    <ion-button size="small" shape="round" (click)="addStart()">Add Family</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" [(ngModel)]='firstname' ></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-input type="text"  maxlength="15" placeholder="lastname" [(ngModel)]='lastname' ></ion-input>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-label>Age</ion-label>
+      </ion-item>
+
+      <ion-item lines="none">
+        <ion-input type="text"  maxlength="14" placeholder="Online Name" [(ngModel)]='online_name' ></ion-input>
+      </ion-item>
+      <div style="text-align: right;">
+        {{profileMessage}}
+        <ion-button shape="round" size="small" (click)="sendUpdateProfile()">Add</ion-button>
+      </div>
+    </div>
 
 
-<div *ngIf="isModalOpenBackdrop==true">
-  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
-  <ion-modal class="common_modal" [isOpen]="isModalOpen">
 
-    <ng-template>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Add Family</ion-title>
-          <ion-buttons slot="end">
-            <ion-button (click)="setCloseModal()">Close</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-card-content>
+  </div>
 
-          <ion-item lines="none">
-            <ion-input type="text"  maxlength="15" placeholder="Firstname" [(ngModel)]='firstname' ></ion-input>
-          </ion-item>
+<!--  <div *ngIf="isModalOpenBackdrop==true">-->
+<!--    &lt;!&ndash;  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>&ndash;&gt;-->
+<!--    &lt;!&ndash;  <ion-modal class="common_modal" [isOpen]="isModalOpen">&ndash;&gt;-->
 
-          <ion-item lines="none">
-            <ion-input type="text"  maxlength="15" placeholder="lastname" [(ngModel)]='lastname' ></ion-input>
-          </ion-item>
+<!--    <ng-template>-->
+<!--      <ion-header>-->
+<!--        <ion-toolbar>-->
+<!--          <ion-title>Add Family</ion-title>-->
+<!--          <ion-buttons slot="end">-->
+<!--            <ion-button (click)="setCloseModal()">Close</ion-button>-->
+<!--          </ion-buttons>-->
+<!--        </ion-toolbar>-->
+<!--      </ion-header>-->
+<!--      <ion-content class="ion-padding">-->
+<!--        <ion-card-content>-->
 
-          <ion-item lines="none">
-            <ion-input type="text"  maxlength="35" placeholder="Email" [(ngModel)]='email' ></ion-input>
-          </ion-item>
+<!--          <ion-item lines="none">-->
+<!--            <ion-input type="text"  maxlength="15" placeholder="Firstname" [(ngModel)]='firstname' ></ion-input>-->
+<!--          </ion-item>-->
 
-          <ion-item lines="none">
-            <ion-input type="text"  maxlength="14" placeholder="Online Name" [(ngModel)]='online_name' ></ion-input>
-          </ion-item>
-          <div style="text-align: right;">
-            {{profileMessage}}
-            <ion-button shape="round" size="small" (click)="sendUpdateProfile()">Update</ion-button>
-          </div>
-        </ion-card-content>
-      </ion-content>
-      <ion-footer>
-        <ion-toolbar>
-          <ion-button  (click)="setCloseModal()">Close</ion-button>
-        </ion-toolbar>
-      </ion-footer>
-    </ng-template>
-  </ion-modal>
-</div>
\ No newline at end of file
+<!--          <ion-item lines="none">-->
+<!--            <ion-input type="text"  maxlength="15" placeholder="lastname" [(ngModel)]='lastname' ></ion-input>-->
+<!--          </ion-item>-->
+
+<!--          <ion-item lines="none">-->
+<!--            <ion-input type="text"  maxlength="35" placeholder="Email" [(ngModel)]='email' ></ion-input>-->
+<!--          </ion-item>-->
+
+<!--          <ion-item lines="none">-->
+<!--            <ion-input type="text"  maxlength="14" placeholder="Online Name" [(ngModel)]='online_name' ></ion-input>-->
+<!--          </ion-item>-->
+<!--          <div style="text-align: right;">-->
+<!--            {{profileMessage}}-->
+<!--            <ion-button shape="round" size="small" (click)="sendUpdateProfile()">Update</ion-button>-->
+<!--          </div>-->
+<!--        </ion-card-content>-->
+<!--      </ion-content>-->
+<!--      <ion-footer>-->
+<!--        <ion-toolbar>-->
+<!--          <ion-button  (click)="setCloseModal()">Close</ion-button>-->
+<!--        </ion-toolbar>-->
+<!--      </ion-footer>-->
+<!--    </ng-template>-->
+<!--    &lt;!&ndash;  </ion-modal>&ndash;&gt;-->
+<!--  </div>-->
+<!--</div>-->