diff --git a/src/app/components/family-connect/family-connect.component.html b/src/app/components/family-connect/family-connect.component.html
index f8a0341..00c123f 100644
--- a/src/app/components/family-connect/family-connect.component.html
+++ b/src/app/components/family-connect/family-connect.component.html
@@ -33,33 +33,60 @@
   </div>
 
   <div *ngIf="connectStart== 100" >
-    <div
-            *ngFor="let item of familyData; let i = index"
-            class="bg_white {{ item.short_style }}  {{ item.card_type }} "
-            (click)="onDetails(item)"
-    >
-      <div class="list">
-        <div *ngIf="item.banner_location === 'URL'">
-          <!-- code to render a large video block-->
-          <div
-                  class="bg_image back_image banner_image"
-                  [style.backgroundImage]="'url(' + item.banner + ')'"
-          ></div>
-        </div>
-        <div *ngIf="item.banner_location === 'LOCAL'">
-          <div
-                  class="bg_image back_image banner_image"
-                  [style.backgroundImage]="'url(assets/images/' + item.banner + ')'"
-          ></div>
-        </div>
 
-        <div class="detail">
-          <ion-label class="name">{{ item.firstname }} {{ item.lastname }}</ion-label>
-<!--          <ion-label class="bg_text ovf" style="background-color: white">-->
-<!--            {{ item.last_login }}</ion-label>-->
+    <ion-list [inset]="true">
+      <ion-list-header>
+
+        <ion-label>
+          <ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" style="font-size: 22px;"></ion-icon>
+          Select to Invite</ion-label>
+      </ion-list-header>
+      <ion-item [button]="true" detail="false"  *ngFor="let item of familyData; let i = index"  (click)="startInvite(item)">
+<!--        <div class="unread-indicator-wrapper" slot="start">-->
+<!--          <div class="unread-indicator">ss</div>-->
+<!--        </div>-->
+        <ion-avatar aria-hidden="true" slot="start">
+          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+        <ion-label>
+          <strong>{{ item.firstname }} {{ item.lastname }}</strong>
+<!--          <ion-text>Never Gonna Give You Up</ion-text>-->
+          <br />
+          <ion-note color="medium" class="ion-text-wrap">
+           Last seen :  {{ item.last_login }}
+          </ion-note>
+        </ion-label>
+        <div class="metadata-end-wrapper" slot="end">
+<!--          <ion-note color="medium">06:11</ion-note>-->
+          <ion-icon color="medium" name="chevron-forward"></ion-icon>
         </div>
-      </div>
-      <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
+      </ion-item>
+    </ion-list>
+  </div>
+
+  <div *ngIf="connectStart == 200" >
+    <div style="background-color: aliceblue; border-radius: 10px; box-shadow: 3px 3px #d3d3d3; padding: 0px; min-height: 100px;">
+
+      <ion-grid>
+        <ion-row>
+          <ion-col><span style="font-weight: bolder; font-size: 18px;">Invite :</span> <span style="font-size: 16px; font-weight: bolder; color: #1e2023; ">{{currentInvite.firstname}} {{currentInvite.lastname}}</span></ion-col>
+        </ion-row>
+
+<!--        <ion-row>-->
+<!--          <ion-col>2</ion-col>-->
+<!--          <ion-col>3</ion-col>-->
+<!--        </ion-row>-->
+        <ion-row>
+          <ion-col>Let's :</ion-col>
+          <ion-col>Chat</ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col style="text-align: center;"> <ion-button shape="round" size="small" color="danger" (click)="cancelInvite()">Cancel</ion-button> </ion-col>
+          <ion-col></ion-col>
+          <ion-col style="text-align: center;"> <ion-button shape="round" size="small" color="primary" >Send Invite</ion-button></ion-col>
+        </ion-row>
+      </ion-grid>
+
     </div>
 
-  </div>
\ No newline at end of file
+  </div>
diff --git a/src/app/components/family-connect/family-connect.component.ts b/src/app/components/family-connect/family-connect.component.ts
index 1cc7136..8dd4590 100644
--- a/src/app/components/family-connect/family-connect.component.ts
+++ b/src/app/components/family-connect/family-connect.component.ts
@@ -18,7 +18,7 @@ connectStart : number = 0;
       private wrenchService: WrenchService
   ) {
     this.show_connect= true;
-    this.show_invite = true;
+    this.show_invite = false;
   }
 
   ngOnInit() {
@@ -30,6 +30,15 @@ connectStart : number = 0;
     this.connectStart = 100;
   }
 
+  currentInvite: any;
+  startInvite(item){
+    this.currentInvite = item;
+    this.connectStart = 200;
+  }
+  cancelInvite(){
+    this.connectStart = 0;
+  }
+
   reqData: {
     action:number,
     member_id: number,