diff --git a/src/app/components/family-connect/family-connect.component.html b/src/app/components/family-connect/family-connect.component.html
index 717ac3d..a33494a 100644
--- a/src/app/components/family-connect/family-connect.component.html
+++ b/src/app/components/family-connect/family-connect.component.html
@@ -14,6 +14,10 @@
   <div *ngIf="show_connect==true && connectStart==0;">
     <div class="bg_white connect-card"  (click)="startfamilyConnect()">
       <div class="list">
+        <ion-avatar aria-hidden="true" slot="start">
+                      <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+
+        </ion-avatar>
         <div class="detail">
           <ion-label class="name">Family Connect</ion-label>
           <ion-label class="bg_text ovf" style="background-color: white">
@@ -34,7 +38,9 @@
       <div style="padding: 5px;">
         <ion-item *ngFor="let item of familyData; let i = index"  (click)="startInvite(item)" style="background-color: transparent;">
           <ion-avatar aria-hidden="true" slot="start">
-            <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+<!--            <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />-->
+            <img alt="{{ item.firstname }} {{ item.lastname }}" src="{{session_image_server}}{{curr_session}}/family/{{item.uid}}}" />
+<!--            <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/family/'+item.uid+'?'')'"></div>-->
           </ion-avatar>
           <ion-label>{{ item.firstname }} {{ item.lastname }}</ion-label>
           <div class="metadata-end-wrapper" slot="end">
@@ -46,14 +52,14 @@
   </div>
   <div *ngIf="connectStart == 200" >
     <div class="connect-card" style="border-radius: 10px; box-shadow: 3px 3px #d3d3d3; padding: 0px; min-height: 100px;">
-      <ion-grid>
+      <ion-grid *ngIf="call_active==false;">
         <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-col><span style="font-weight: bolder; font-size: 16px;">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 size="auto" style="font-weight: bolder; padding-top: 14px;">Let's :</ion-col>
           <ion-col>
-            <ion-select aria-label="Select Activity" [(ngModel)]="select_activity" value="chat" style="width: 100%; background-color: white; border-radius: 10px;">
+            <ion-select aria-label="Select Activity" [(ngModel)]="select_activity" value="chat" style="width: 100%; background-color: white; border-radius: 10px; color: #1f1f3b; ">
               <ion-select-option value="chat">Chat</ion-select-option>
               <ion-select-option value="maths-games"> do Number Games</ion-select-option>
               <ion-select-option value="science-knowledge"> do Science Knowledge</ion-select-option>
@@ -66,5 +72,30 @@
           <ion-col style="text-align: center;"> <ion-button shape="round" size="small" color="primary"  (click)="sendInvite()">Send Invite</ion-button></ion-col>
         </ion-row>
       </ion-grid>
+
+      <ion-grid *ngIf="call_active==true;">
+        <ion-row>
+          <ion-col><span style="font-weight: bolder; font-size: 16px;">Contacting : </span> <span style="font-size: 16px; font-weight: bolder; color: #1e2023; ">{{currentInvite.firstname}} {{currentInvite.lastname}}</span></ion-col>
+        </ion-row>
+<!--        <ion-row>-->
+<!--          <ion-col size="auto" style="font-weight: bolder; padding-top: 14px;">Let's :</ion-col>-->
+<!--          <ion-col>-->
+<!--            <ion-select aria-label="Select Activity" [(ngModel)]="select_activity" value="chat" style="width: 100%; background-color: white; border-radius: 10px; color: #1f1f3b; ">-->
+<!--              <ion-select-option value="chat">Chat</ion-select-option>-->
+<!--              <ion-select-option value="maths-games"> do Number Games</ion-select-option>-->
+<!--              <ion-select-option value="science-knowledge"> do Science Knowledge</ion-select-option>-->
+<!--            </ion-select>-->
+<!--          </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;">
+          Please wait...
+<!--            <ion-button shape="round" size="small" color="primary"  (click)="sendInvite()" >Send Invite</ion-button>-->
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
     </div>
   </div>
diff --git a/src/app/components/family-connect/family-connect.component.ts b/src/app/components/family-connect/family-connect.component.ts
index c6151e7..aedc92b 100644
--- a/src/app/components/family-connect/family-connect.component.ts
+++ b/src/app/components/family-connect/family-connect.component.ts
@@ -10,11 +10,13 @@ import  {SocketToolsService} from  "../../services/socket-tools.service";
 export class FamilyConnectComponent implements OnInit {
 show_invite:boolean = false;
 show_connect: boolean = false;
+call_active:boolean= false;
 @ViewChild('select_activity') select_activity;
 
 connectStart : number = 0;
   fromData:string = '';
-
+  session_image_server: string = "";
+  curr_session: string = "";
   constructor(
       public sessionDataProviderService: SessionDataProviderService,
       private wrenchService: WrenchService,
@@ -22,6 +24,9 @@ connectStart : number = 0;
   ) {
     this.show_connect= true;
     this.show_invite = false;
+    this.session_image_server = this.sessionDataProviderService.session_image_server;
+    this.curr_session = this.sessionDataProviderService.session;
+
     addEventListener('app-family-invite', (data:any) => {
      // debugger;
       console.log("CALL DATA ", data);
@@ -33,9 +38,11 @@ connectStart : number = 0;
   startInviteEvent(){
     this.show_invite = true;
     this.show_connect= false;
+    //this.call_active=true;
     setTimeout(()=>{
       this.show_invite = false;
       this.show_connect= true;
+      //this.call_active = false;
     }, 10000);
   }
   ngOnInit() {
@@ -56,6 +63,10 @@ connectStart : number = 0;
   sendInvite(){
     console.log(this.select_activity);
     this.socketToolsService.familyInvite(this.currentInvite);
+    this.call_active = true;
+    setTimeout(()=>{
+      this.call_active = false;
+    }, 10000);
   }
   cancelInvite(){
     this.connectStart = 0;
diff --git a/src/app/services/socket-tools.service.ts b/src/app/services/socket-tools.service.ts
index 4ece924..9ac6ddc 100644
--- a/src/app/services/socket-tools.service.ts
+++ b/src/app/services/socket-tools.service.ts
@@ -41,32 +41,14 @@ export class SocketToolsService {
   }
   private monitorConnection(): Observable<boolean> {
     console.log("*********************  MONITORING-SOCKETS      *******");
-
     this.connectionSubject = new BehaviorSubject<boolean>(false);
-
     this.socket.on('receive_message', (data) => {
-      console.log(data);
-    //  debugger;
-
+      // console.log(data);
       const messageType = data?.message?.type;
       if (messageType!=undefined || messageType != ''){
         console.log("************* MESSAGE RECIEVED ****  ", messageType);
         switch(messageType){
           case 'FAMILY_INVITE':
-            // const event = new CustomEvent('NOTIFICATION_ADD', {
-            //   detail: {
-            //     title: 'Error!',
-            //     message: 'There was a problem creating your account.'
-            //   }
-            // });
-            // const event2 = new CustomEvent('app-family-invite', {
-            //   detail: {
-            //     title: 'Start Invite Call',
-            //     message: data
-            //   }
-            // });
-            // dispatchEvent(event2);
-
             console.log("app-family-invite****");
             const event = new CustomEvent("app-family-invite",  {detail: {
                 title: 'Start Invite Call',
@@ -81,7 +63,6 @@ export class SocketToolsService {
         const event = new Event("app-taskactivities-refresh");
         dispatchEvent(event);
       }
-
     });
 
     this.socket.on('received_refreshmarket_jobs', (data) => {