diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d8dfbf5..e63d009 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -294,6 +294,11 @@ const routes: Routes = [
     path: 'playgrdview',
     loadChildren: () => import('./pages/playgrdview/playgrdview.module').then(m => m.PlaygrdviewPageModule)
   },
+  {
+    path: 'familyconnectaction',
+    loadChildren: () => import('./pages/familyconnectaction/familyconnectaction.module').then(m => m.FamilyconnectactionPageModule)
+  },
+
 
 
 
diff --git a/src/app/components/family-connect/family-connect.component.html b/src/app/components/family-connect/family-connect.component.html
index b0f5d59..311bfd6 100644
--- a/src/app/components/family-connect/family-connect.component.html
+++ b/src/app/components/family-connect/family-connect.component.html
@@ -3,7 +3,7 @@
       <ion-card-subtitle><div>You have an invitation waiting</div></ion-card-subtitle>
     </ion-card-header>
     <ion-card-content>
-      <ion-item lines="none" style="background-color: transparent; border-radius: 10px;" (click)="acceptConnect(fromData)">
+      <ion-item lines="none" style="background-color: transparent; border-radius: 10px;" (click)="acceptConnect(fromMessage)">
         <ion-icon name="megaphone-outline" slot="start" color="danger"></ion-icon>
         <ion-label>{{fromData.firstname}} is waiting...</ion-label>
         <ion-icon name="chevron-forward-outline" slot="end" color="secondary"></ion-icon>
diff --git a/src/app/components/family-connect/family-connect.component.ts b/src/app/components/family-connect/family-connect.component.ts
index ca04099..1547944 100644
--- a/src/app/components/family-connect/family-connect.component.ts
+++ b/src/app/components/family-connect/family-connect.component.ts
@@ -2,6 +2,8 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {WrenchService} from "../../services/wrench.service";
 import {SessionDataProviderService} from "../../store/session-data-provider.service";
 import  {SocketToolsService} from  "../../services/socket-tools.service";
+import {Router} from "@angular/router";
+import {NavController} from "@ionic/angular";
 @Component({
   selector: 'app-family-connect',
   templateUrl: './family-connect.component.html',
@@ -15,12 +17,15 @@ call_active:boolean= false;
 
 connectStart : number = 0;
   fromData:string = '';
+  fromMessage:any;
   session_image_server: string = "";
   curr_session: string = "";
   constructor(
       public sessionDataProviderService: SessionDataProviderService,
       private wrenchService: WrenchService,
-      public socketToolsService:SocketToolsService
+      public socketToolsService:SocketToolsService,
+      private router: Router,
+      private navctr: NavController
   ) {
     this.show_connect= true;
     this.show_invite = false;
@@ -30,9 +35,18 @@ connectStart : number = 0;
     addEventListener('app-family-invite', (data:any) => {
      // debugger;
       console.log("CALL DATA ", data);
-      this.fromData  = data.detail.data.message.from ;
+      this.fromMessage = data.detail.data.message;
+      this.fromData  = this.fromMessage.from; // small subset of from data
       this.startInviteEvent();
     });
+
+    addEventListener('app-family-invite-accepted', (data:any) => {
+      // debugger;
+      console.log("ACCEPT CALL DATA ", data); //connectData
+      this.router.navigate(['familyconnectaction']);
+    });
+
+
   }
 
   startInviteEvent(){
@@ -47,8 +61,13 @@ connectStart : number = 0;
   }
 
   acceptConnect(currentConnectData){
-    console.log(currentConnectData);
-    alert(100000);
+    console.log("ABOUT TO GO TO ROOM - ", currentConnectData);
+    // connect to the room
+    this.socketToolsService.joinSocketRoom( currentConnectData.target_room); // join the room
+    // let us tell the invitee to join us in the room
+    this.socketToolsService.familyInviteConnect( currentConnectData );
+    // let's go to the page
+    this.router.navigate(['familyconnectaction']);
   }
   ngOnInit() {
     this.getFamilyList();
@@ -100,4 +119,5 @@ connectStart : number = 0;
           }
     );
   }
+
 }
diff --git a/src/app/pages/familyconnectaction/familyconnectaction-routing.module.ts b/src/app/pages/familyconnectaction/familyconnectaction-routing.module.ts
new file mode 100644
index 0000000..9caf814
--- /dev/null
+++ b/src/app/pages/familyconnectaction/familyconnectaction-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FamilyconnectactionPage } from './familyconnectaction.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FamilyconnectactionPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FamilyconnectactionPageRoutingModule {}
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.module.ts b/src/app/pages/familyconnectaction/familyconnectaction.module.ts
new file mode 100644
index 0000000..69ce7be
--- /dev/null
+++ b/src/app/pages/familyconnectaction/familyconnectaction.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FamilyconnectactionPageRoutingModule } from './familyconnectaction-routing.module';
+
+import { FamilyconnectactionPage } from './familyconnectaction.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FamilyconnectactionPageRoutingModule
+  ],
+  declarations: [FamilyconnectactionPage]
+})
+export class FamilyconnectactionPageModule {}
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.html b/src/app/pages/familyconnectaction/familyconnectaction.page.html
new file mode 100644
index 0000000..04209f3
--- /dev/null
+++ b/src/app/pages/familyconnectaction/familyconnectaction.page.html
@@ -0,0 +1,14 @@
+<ion-header mode="ios" class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Connected</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.scss b/src/app/pages/familyconnectaction/familyconnectaction.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.spec.ts b/src/app/pages/familyconnectaction/familyconnectaction.page.spec.ts
new file mode 100644
index 0000000..bf19672
--- /dev/null
+++ b/src/app/pages/familyconnectaction/familyconnectaction.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FamilyconnectactionPage } from './familyconnectaction.page';
+
+describe('FamilyconnectactionPage', () => {
+  let component: FamilyconnectactionPage;
+  let fixture: ComponentFixture<FamilyconnectactionPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FamilyconnectactionPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FamilyconnectactionPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/familyconnectaction/familyconnectaction.page.ts b/src/app/pages/familyconnectaction/familyconnectaction.page.ts
new file mode 100644
index 0000000..f182f08
--- /dev/null
+++ b/src/app/pages/familyconnectaction/familyconnectaction.page.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import {NavController} from "@ionic/angular";
+import {SessionDataProviderService} from "../../store/session-data-provider.service";
+import {WrenchService} from "../../services/wrench.service";
+
+@Component({
+  selector: 'app-familyconnectaction',
+  templateUrl: './familyconnectaction.page.html',
+  styleUrls: ['./familyconnectaction.page.scss'],
+})
+export class FamilyconnectactionPage implements OnInit {
+
+  constructor(
+      public sessionDataProviderService: SessionDataProviderService,
+      private wrenchService: WrenchService,
+      private navctr: NavController
+  ) { }
+
+  ngOnInit() {
+  }
+  onBack() {
+    this.navctr.back();
+  }
+}
diff --git a/src/app/services/socket-tools.service.ts b/src/app/services/socket-tools.service.ts
index 5615c33..244e19d 100644
--- a/src/app/services/socket-tools.service.ts
+++ b/src/app/services/socket-tools.service.ts
@@ -26,13 +26,13 @@ export class SocketToolsService {
 
   public familyInviteConnect(item){
     console.log(item);
+    debugger;
     const msgPart = {
       type: 'FAMILY_INVITE_CONNECT',
-      target_room: this.sessionDataProviderService.session+'-'+item.uid,
-      from: item
+      connectData: item
     };
     let Vv  =  this.sessionDataProviderService.getFamilyRoom()+"-"+item.uid;
-    this.emmitSocketEvent("send_message",msgPart, Vv);
+    this.emmitSocketEvent("send_message",msgPart, item.target_room);
   }
 
 
@@ -76,6 +76,14 @@ export class SocketToolsService {
               }});
             dispatchEvent(event);
             break;
+          case 'FAMILY_INVITE_CONNECT':
+            console.log("app-family-invite accepted****");
+            const event_accept = new CustomEvent("app-family-invite-accepted",  {detail: {
+                title: 'Invite Call Accepted',
+                data
+              }});
+            dispatchEvent(event_accept);
+            break;
         }
       }
       else{