diff --git a/src/app/components/family-connect/family-connect.component.html b/src/app/components/family-connect/family-connect.component.html
index 311bfd6..a66e260 100644
--- a/src/app/components/family-connect/family-connect.component.html
+++ b/src/app/components/family-connect/family-connect.component.html
@@ -67,7 +67,9 @@
           </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 style="text-align: left;"><ion-icon size="large"  color="danger" name="close-circle-outline" (click)="cancelInvite()"></ion-icon>
+<!--            <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"  (click)="sendInvite()">Send Invite</ion-button></ion-col>
         </ion-row>
diff --git a/src/app/components/family-connect/family-connect.component.ts b/src/app/components/family-connect/family-connect.component.ts
index 40aed9f..4ad79b3 100644
--- a/src/app/components/family-connect/family-connect.component.ts
+++ b/src/app/components/family-connect/family-connect.component.ts
@@ -31,6 +31,7 @@ connectStart : number = 0;
     this.show_invite = false;
     this.session_image_server = this.sessionDataProviderService.session_image_server;
     this.curr_session = this.sessionDataProviderService.session;
+    this.select_activity = 'chat';
 
     addEventListener('app-family-invite', (data:any) => {
       console.log("CALL DATA ", data);
@@ -41,7 +42,8 @@ connectStart : number = 0;
 
     addEventListener('app-family-invite-accepted', (data:any) => {
       console.log("ACCEPT CALL DATA ", data); //connectData
-      this.router.navigate(['familyconnectaction'], { state: data.connectData });
+      console.log("ACCEPT CALL DATA ACCEPTED",  data.detail.data.message.connectData); //connectData
+      this.router.navigate(['familyconnectaction'], { state: data.detail.data.message.connectData });
       this.initialInviteState();
     });
   }
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.html b/src/app/pages/familyconnectaction/familyconnectaction.page.html
index 1fd10ed..4dcccfd 100644
--- a/src/app/pages/familyconnectaction/familyconnectaction.page.html
+++ b/src/app/pages/familyconnectaction/familyconnectaction.page.html
@@ -15,38 +15,36 @@
 <!--    <div style="width: 100%; text-align: left;">-->
 <!--       Chat-->
 <!--    </div>-->
-    <ion-list style="border-radius: 10px; background-color: aliceblue; padding: 1px; margin-top: 10px">
-      <ion-list-header>
-        <ion-label>Chat</ion-label>
-      </ion-list-header>
-      <ion-item style="padding: 5px;">
-        <ion-textarea
-                [(ngModel)]="chat_message"
-                (ionChange)="testEntry()"
-                style="width: 100%; border-radius: 10px; padding: 5px; background-color: white;"
-                placeholder="Enter message"></ion-textarea>
-      </ion-item>
-<!--      <ion-item style="text-align: right; padding: 1px 1px 1px 0px; background-color: transparent;">-->
-
-<!--      </ion-item>-->
-    </ion-list>
-
-    <div style="width: 100%; text-align: right; background-color: transparent;">
-      <ion-button size="small" color="secondary" fill="solid" (click)="sendMessage()">Send</ion-button>
-    </div>
-<!--    <ion-card style="border-radius: 10px; background-color: aliceblue; padding: 1px;">-->
-<!--      <ion-card-header>-->
-<!--        <ion-card-subtitle>Chat</ion-card-subtitle>-->
-<!--      </ion-card-header>-->
-<!--      <ion-card-content style="margin: 1px;">-->
-<!--        <ion-textarea  style="width: 100%; border-radius: 10px; padding: 5px; background-color: whitesmoke;" placeholder="Enter message"></ion-textarea>-->
-<!--        <div style="text-align: right; padding: 1px 10px 1px 0px;">-->
-<!--          &lt;!&ndash;        <ion-button fill="clear">Action 1</ion-button>&ndash;&gt;-->
-<!--          <ion-button size="small" color="secondary" fill="solid">Send</ion-button>-->
-<!--        </div>-->
-<!--      </ion-card-content>-->
-<!--    </ion-card>-->
+<!--      style="border-radius: 10px; background-color: aliceblue; padding: 1px; margin-top: 10px"-->
+      <div class="connect-card" style="margin: 10px 5px 5px 5px;">
+          <div>
+              <div style="font-weight: bolder; font-size: 18px; padding-left: 10px;">
+                  <ion-label>Chat</ion-label>
+              </div>
+              <div style="padding: 5px;">
+                  <ion-textarea
+                          [(ngModel)]="chat_message"
+                          (ionChange)="testEntry()"
+                          style="width: 100%; border-radius: 10px; padding: 5px; background-color: white;"
+                          placeholder="Enter message"></ion-textarea>
+              </div>
+          </div>
+          <div style="width: 100%; text-align: right;
+           padding: 5px 10px 10px 0px;
+           background-color: transparent;">
+              <ion-button size="small" color="secondary" fill="solid" (click)="sendMessage()">Send</ion-button>
+          </div>
+      </div>
 
 
+
+      <div>
+         <div *ngFor="let item of charMessageHx;" style="margin: 2px;">
+           <div class="{{item.how}}">
+             <div> {{item.name}} -  {{item.when}}</div>
+             <div>  {{item.message}}</div>
+           </div>
+         </div>
+      </div>
   </div>
 </ion-content>
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.scss b/src/app/pages/familyconnectaction/familyconnectaction.page.scss
index e69de29..0fefb79 100644
--- a/src/app/pages/familyconnectaction/familyconnectaction.page.scss
+++ b/src/app/pages/familyconnectaction/familyconnectaction.page.scss
@@ -0,0 +1,22 @@
+.REC{
+  padding: 2px;
+  background-color: aliceblue;
+  border-radius: 10px;
+  margin-right: 50px;
+  margin-left: 5px;
+  margin-top: 5px;
+}
+.SND{
+  padding: 2px;
+  background-color: lightyellow;
+  border-radius: 10px;
+  margin-left: 50px;
+  margin-right: 5px;
+  margin-top: 5px;
+}
+.connect-card{
+  margin: 0px;
+  border-radius: 10px;
+  background: rgb(240,248,255);
+  background: linear-gradient(90deg, rgba(240,248,255,1) 0%, rgba(255,240,248,1) 35%, rgba(255,240,248,1) 100%);
+}
\ No newline at end of file
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.ts b/src/app/pages/familyconnectaction/familyconnectaction.page.ts
index 1372df4..ea0318c 100644
--- a/src/app/pages/familyconnectaction/familyconnectaction.page.ts
+++ b/src/app/pages/familyconnectaction/familyconnectaction.page.ts
@@ -27,11 +27,12 @@ export class FamilyconnectactionPage implements OnInit {
       console.log("ACCEPT CALL DATA MESSAGE ", data); //connectData
       let newMsg = {
         message :  data.detail.data.message.chat_message,
-        name : 'notset',
-        when : '10-10-000'
+        name : data.detail.data.message.connectData.from.firstname,
+        when : '10-10-000',
+        how: 'REC'
       }
       this.charMessageHx.push( newMsg );
-      debugger;
+      //debugger;
     });
   }
 
@@ -42,7 +43,15 @@ export class FamilyconnectactionPage implements OnInit {
   }
   sendMessage(){
     if (this.chat_message !=''){
+      let newMsg = {
+        message : this.chat_message,
+        name : this.sessionDataProviderService.firstname,
+        when : '10-10-000',
+        how: 'SND'
+      }
+      this.charMessageHx.push( newMsg );
       this.socketToolsService.familyConnectMessage(this.connnectionData,  this.chat_message );
+      this.chat_message = '';
     }
   }
   testEntry(){