diff --git a/src/app/pages/family/family.page.html b/src/app/pages/family/family.page.html
index 6d10a81..ad8d368 100644
--- a/src/app/pages/family/family.page.html
+++ b/src/app/pages/family/family.page.html
@@ -97,7 +97,7 @@
 
         <ion-segment class="common_segment" [(ngModel)]="tabs">
           <ion-segment-button value="members">
-            <ion-label>Members ({{total_family}})</ion-label>
+            <ion-label>Family ({{total_family}})</ion-label>
           </ion-segment-button>
           <ion-segment-button value="lesson">
             <ion-label>Tasks ({{family_active}})</ion-label>
diff --git a/src/app/pages/invite/invite.page.html b/src/app/pages/invite/invite.page.html
index bd70af0..306fa43 100644
--- a/src/app/pages/invite/invite.page.html
+++ b/src/app/pages/invite/invite.page.html
@@ -10,58 +10,77 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-  <div class="inv-head">Invite Friends</div>
+  <div class="boxed_contents">
+    <div class="inv-head">Invite Friends</div>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button style="background-color: #fcf7ee; color: white; font-size: 14px; font-weight: bolder;" (click)="setTabMode(100);">Invite with Email</ion-button>
+        <ion-button style="background-color: #ebe4ee; color: white; font-size: 14px; font-weight: bolder;" (click)="setTabMode(200);">Import from Contacts</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
 
-  <ion-accordion-group>
-    <ion-accordion value="first">
-      <ion-item class="arcord_head" slot="header" color="secondary" style="margin-bottom: 1px;">
-        <ion-label>Invite with Email</ion-label>
-      </ion-item>
+    <div *ngIf="tabMode == 100 " class="lesson">
       <div class="ion-padding" slot="content" style="background-color: white; padding: 5px">
-        <div style="margin-top: 10px; background-color: aliceblue; border-radius: 10px; padding: 5px">
+        <div style="margin-top: 10px; background-color: #f7f8fa; border-radius: 10px; padding: 5px">
+
+
           <ion-item lines="none">
-            <ion-icon slot="start" name="mail-outline"></ion-icon>
-            <ion-input type="email" placeholder="Email"  maxlength="55"  [(ngModel)]='email'></ion-input>
+            <ion-grid style="margin: 0px;">
+              <ion-row  style="margin: 0px;">
+                <ion-col  style="margin: 0px;"><ion-input style="background-color: white; " type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input></ion-col>
+                <ion-col  style="margin: 0px;"><ion-input style="background-color: white; "  type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input></ion-col>
+              </ion-row>
+            </ion-grid>
           </ion-item>
 
           <ion-item lines="none">
-            <ion-icon slot="start" name="text-outline"></ion-icon>
-            <ion-input type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input>
+            <!--            <ion-icon slot="start" name="mail-outline"></ion-icon>-->
+            <ion-input style="background-color: white; "  type="email" placeholder="Email"  maxlength="55"  [(ngModel)]='email'></ion-input>
           </ion-item>
 
-          <ion-item lines="none">
-            <ion-icon slot="start" name="text-outline"></ion-icon>
-            <ion-input type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input>
-          </ion-item>
-
-          <div lines="none" style="text-align: right">
+          <ion-item lines="none" style="text-align: right; width: 100%;">
+            <!--            <ion-icon slot="start" name="mail-outline"></ion-icon>-->
             <ion-button
-                    style="padding: 3px; height: 45px"
+                    style="padding: 3px; height: 45px; min-width: 150px;"
                     shape="round"
                     expand="block"
                     (click)="sendRefer()">
               Send Invite
             </ion-button>
-          </div>
+          </ion-item>
 
-<!--          <ion-grid>-->
-<!--            <ion-row>-->
-<!--              <ion-col>-->
-<!--              </ion-col>-->
-<!--              <ion-col>-->
-<!--                <ion-button expand="block" (click)="sendRefer()">-->
-<!--                  Send-->
-<!--                </ion-button>-->
-<!--              </ion-col>-->
-<!--            </ion-row>-->
-<!--          </ion-grid>-->
+          <!--            <ion-icon slot="start" name="text-outline"></ion-icon>-->
+
+<!--          <ion-item lines="none">-->
+<!--            <ion-icon slot="start" name="text-outline"></ion-icon>-->
+<!--           -->
+<!--          </ion-item>-->
+
+<!--          <div lines="none" style="text-align: right">-->
+<!--            <ion-button-->
+<!--                    style="padding: 3px; height: 45px"-->
+<!--                    shape="round"-->
+<!--                    expand="block"-->
+<!--                    (click)="sendRefer()">-->
+<!--              Send Invite-->
+<!--            </ion-button>-->
+<!--          </div>-->
+
+          <!--          <ion-grid>-->
+          <!--            <ion-row>-->
+          <!--              <ion-col>-->
+          <!--              </ion-col>-->
+          <!--              <ion-col>-->
+          <!--                <ion-button expand="block" (click)="sendRefer()">-->
+          <!--                  Send-->
+          <!--                </ion-button>-->
+          <!--              </ion-col>-->
+          <!--            </ion-row>-->
+          <!--          </ion-grid>-->
         </div>
       </div>
-    </ion-accordion>
-    <ion-accordion value="second">
-      <ion-item class="arcord_head" slot="header" color="secondary" style="margin-bottom: 1px;">
-        <ion-label>Invite from Contacts</ion-label>
-      </ion-item>
+    </div>
+    <div *ngIf="tabMode == 200 " class="lesson">
       <div class="ion-padding" slot="content" style="background-color: white; padding: 5px">
         <div style="margin-top: 10px; background-color: aliceblue; min-height: 150px; border-radius: 10px;">
           <ion-grid>
@@ -70,15 +89,15 @@
                 <ion-searchbar animated="true" placeholder="Search Contacts"  style="margin: 0px;"></ion-searchbar>
               </ion-col>
             </ion-row>
-          <ion-row>
-            <ion-col>
+            <ion-row>
+              <ion-col>
 
-            </ion-col>
-          </ion-row>
+              </ion-col>
+            </ion-row>
           </ion-grid>
 
 
-      </div>
+        </div>
         <div  style="padding: 0px  10px 0px 10px;">
           <ion-button (click)="refreshContacts()"
                       shape="round"
@@ -88,8 +107,136 @@
 
 
       </div>
-    </ion-accordion>
-  </ion-accordion-group>
+    </div>
+
+<!--    <ion-accordion-group>-->
+<!--      <ion-accordion value="first">-->
+<!--        <ion-item class="arcord_head" slot="header" color="secondary" style="margin-bottom: 1px;">-->
+<!--          <ion-label>Invite with Email</ion-label>-->
+<!--        </ion-item>-->
+
+<!--        <div class="ion-padding" slot="content" style="background-color: white; padding: 5px">-->
+<!--          <div style="margin-top: 10px; background-color: aliceblue; border-radius: 10px; padding: 5px">-->
+<!--            <ion-item lines="none">-->
+<!--              <ion-icon slot="start" name="mail-outline"></ion-icon>-->
+<!--              <ion-input type="email" placeholder="Email"  maxlength="55"  [(ngModel)]='email'></ion-input>-->
+<!--            </ion-item>-->
+
+<!--            <ion-item lines="none">-->
+<!--              <ion-icon slot="start" name="text-outline"></ion-icon>-->
+<!--              <ion-input type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input>-->
+<!--            </ion-item>-->
+
+<!--            <ion-item lines="none">-->
+<!--              <ion-icon slot="start" name="text-outline"></ion-icon>-->
+<!--              <ion-input type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input>-->
+<!--            </ion-item>-->
+
+<!--            <div lines="none" style="text-align: right">-->
+<!--              <ion-button-->
+<!--                      style="padding: 3px; height: 45px"-->
+<!--                      shape="round"-->
+<!--                      expand="block"-->
+<!--                      (click)="sendRefer()">-->
+<!--                Send Invite-->
+<!--              </ion-button>-->
+<!--            </div>-->
+
+<!--            &lt;!&ndash;          <ion-grid>&ndash;&gt;-->
+<!--            &lt;!&ndash;            <ion-row>&ndash;&gt;-->
+<!--            &lt;!&ndash;              <ion-col>&ndash;&gt;-->
+<!--            &lt;!&ndash;              </ion-col>&ndash;&gt;-->
+<!--            &lt;!&ndash;              <ion-col>&ndash;&gt;-->
+<!--            &lt;!&ndash;                <ion-button expand="block" (click)="sendRefer()">&ndash;&gt;-->
+<!--            &lt;!&ndash;                  Send&ndash;&gt;-->
+<!--            &lt;!&ndash;                </ion-button>&ndash;&gt;-->
+<!--            &lt;!&ndash;              </ion-col>&ndash;&gt;-->
+<!--            &lt;!&ndash;            </ion-row>&ndash;&gt;-->
+<!--            &lt;!&ndash;          </ion-grid>&ndash;&gt;-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--      </ion-accordion>-->
+<!--      <ion-accordion value="second">-->
+<!--        <ion-item class="arcord_head" slot="header" color="secondary" style="margin-bottom: 1px;">-->
+<!--          <ion-label>Invite from Contacts</ion-label>-->
+<!--        </ion-item>-->
+<!--        <div class="ion-padding" slot="content" style="background-color: white; padding: 5px">-->
+<!--          <div style="margin-top: 10px; background-color: aliceblue; min-height: 150px; border-radius: 10px;">-->
+<!--            <ion-grid>-->
+<!--              <ion-row style="padding: 0px; margin: 0px;">-->
+<!--                <ion-col style="padding: 0px; margin: 0px;">-->
+<!--                  <ion-searchbar animated="true" placeholder="Search Contacts"  style="margin: 0px;"></ion-searchbar>-->
+<!--                </ion-col>-->
+<!--              </ion-row>-->
+<!--              <ion-row>-->
+<!--                <ion-col>-->
+
+<!--                </ion-col>-->
+<!--              </ion-row>-->
+<!--            </ion-grid>-->
+
+
+<!--          </div>-->
+<!--          <div  style="padding: 0px  10px 0px 10px;">-->
+<!--            <ion-button (click)="refreshContacts()"-->
+<!--                        shape="round"-->
+<!--                        expand="block"-->
+<!--                        size="small">Refresh Contacts</ion-button>-->
+<!--          </div>-->
+
+
+<!--        </div>-->
+<!--      </ion-accordion>-->
+<!--    </ion-accordion-group>-->
+
+    <div class="inv-head">Recent Invitations</div>
+    <div class="lesson" style="background-color: aliceblue; padding: 5px;">
+
+
+
+      <div class="video" *ngFor="let item of referData;" >
+        <!--        <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">-->
+        <div class="left">
+          <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/invite-friend.svg)'"></div>
+<!--          <ion-icon name="chatbox-ellipses-outline" style="width: 25px; height: auto;"></ion-icon>-->
+
+          <div class="text">
+            <div class="bold_text" >{{item.firstname}} {{item.lastname}} </div>
+            <div class="msg_text"> {{item.email}}</div>
+            <ion-label class="due_date">{{item.added_date}}</ion-label>
+            <div class="msg_text"> <ion-label class="invite"> {{item.status}}</ion-label></div>
+          </div>
+        </div>
+        <div class="right">
+          <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
+        </div>
+      </div>
+
+
+
+
+<!--      <div class="chat" *ngFor="let item of referData">-->
+<!--        <div class="flex">-->
+<!--          <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/invite-friend.svg)'"></div>-->
+<!--          <div style="margin-left: 10px;">-->
+<!--            <ion-label class="bold_text"> {{item.firstname}} {{item.lastname}} </ion-label>-->
+<!--            <div style="display: flex;">-->
+<!--              <ion-label class="grey_text"> {{item.email}} </ion-label>-->
+<!--            </div>-->
+<!--            <ion-label>{{item.added_date}}</ion-label>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="column">-->
+<!--          <ion-label class="invite"> {{item.status}}</ion-label>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      -->
+    </div>
+
+  </div>
+
+
 
 
 <!--  <ion-segment [(ngModel)]="tabs">-->
@@ -139,24 +286,7 @@
 <!--    </ion-card>-->
 <!--  </div>-->
 <!--  <div *ngIf="tabs =='history'" class="history">-->
-  <div class="inv-head">Recent Invitations</div>
-    <div class="history" style="background-color: aliceblue; padding: 5px;">
-    <div class="chat" *ngFor="let item of referData">
-      <div class="flex">
-        <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/invite-friend.svg)'"></div>
-        <div style="margin-left: 10px;">
-          <ion-label class="bold_text"> {{item.firstname}} {{item.lastname}} </ion-label>
-          <div style="display: flex;">
-            <ion-label class="grey_text"> {{item.email}} </ion-label>
-          </div>
-          <ion-label>{{item.added_date}}</ion-label>
-        </div>
-      </div>
-      <div class="column">
-        <ion-label class="invite"> {{item.status}}</ion-label>
-      </div>
-    </div>
-  </div>
+
 
 
 
diff --git a/src/app/pages/invite/invite.page.ts b/src/app/pages/invite/invite.page.ts
index 63d19e1..b3b8438 100644
--- a/src/app/pages/invite/invite.page.ts
+++ b/src/app/pages/invite/invite.page.ts
@@ -144,4 +144,10 @@ export class InvitePage implements OnInit {
     });
     this.contactsDataService.refeshContacts();
   }
+  tabMode:number =  0;
+  setTabMode(tMode){
+    if (this.tabMode  == tMode) tMode=0; // turn to zero
+
+    this.tabMode = tMode;
+  }
 }
diff --git a/src/app/pages/jobmessage/jobmessage.page.html b/src/app/pages/jobmessage/jobmessage.page.html
index 285eb28..feb0832 100644
--- a/src/app/pages/jobmessage/jobmessage.page.html
+++ b/src/app/pages/jobmessage/jobmessage.page.html
@@ -30,8 +30,8 @@
           <div class="text">
                 <div class="bold_text" [innerHTML]="item.msg"></div>
                 <div class="msg_text">From : {{item.msg_from}}</div>
+                <ion-label class="due_date">Received : {{item.msg_date}}</ion-label>
                 <div class="msg_text">Replied : {{item?.reply}}</div>
-                <ion-label class="due_date">Replied : {{item.msg_date}}</ion-label>
           </div>
         </div>
         <div class="right">
@@ -39,17 +39,6 @@
         </div>
       </div>
 
-
-<!--      <div *ngFor="let item of messageResult;" class ="msg-list" >-->
-<!--        <div>{{item.msg_from}} - -->
-<!--          <span class="mdate"> {{item.msg_date}}</span>-->
-<!--        </div>-->
-<!--        <div style="padding: 10px">{{item.msg}}</div>-->
-<!--        <div style="text-align: right;">-->
-<!--          <ion-icon name="return-down-forward-outline"></ion-icon>-->
-<!--        </div>-->
-<!--      </div>-->
-
     </div>