diff --git a/src/app/components/family-connect/family-connect.component.html b/src/app/components/family-connect/family-connect.component.html
index b162f5a..23b879c 100644
--- a/src/app/components/family-connect/family-connect.component.html
+++ b/src/app/components/family-connect/family-connect.component.html
@@ -63,67 +63,26 @@
 
     </ion-list>
 
-<!--    <div>-->
-<!--      <ion-label>-->
-<!--        <ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" size="large" style="font-size: 22px; margin: 5px 5px 0px 0px; color: red;"></ion-icon>-->
-<!--        <span style="font-size: 18px; font-weight: bolder; color: darkblue;">Select to Invite</span></ion-label>-->
-<!--    </div>-->
-<!--    -->
-<!--    <ion-list [inset]="true" style="padding: 0px; margin: 0px 0px 10px 0px;">-->
-<!--      <ion-list-header>-->
 
-
-<!--      </ion-list-header>-->
-<!--      <ion-item [button]="true" detail="false"  *ngFor="let item of familyData; let i = index"  (click)="startInvite(item)">-->
-<!--&lt;!&ndash;        <div class="unread-indicator-wrapper" slot="start">&ndash;&gt;-->
-<!--&lt;!&ndash;          <div class="unread-indicator">ss</div>&ndash;&gt;-->
-<!--&lt;!&ndash;        </div>&ndash;&gt;-->
-<!--        <ion-avatar aria-hidden="true" slot="start">-->
-<!--          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />-->
-<!--        </ion-avatar>-->
-<!--        <ion-label>-->
-<!--          <strong style="font-size: 14px;">{{ item.firstname }} {{ item.lastname }}</strong>-->
-<!--&lt;!&ndash;          <ion-text>Never Gonna Give You Up</ion-text>&ndash;&gt;-->
-<!--          <br />-->
-<!--          <ion-note color="medium" class="ion-text-wrap" style="font-size: 10px;">-->
-<!--           Last seen :  {{ item.last_login | date }}-->
-<!--          </ion-note>-->
-<!--        </ion-label>-->
-<!--        <div class="metadata-end-wrapper" slot="end">-->
-<!--&lt;!&ndash;          <ion-note color="medium">06:11</ion-note>&ndash;&gt;-->
-<!--          <ion-icon color="medium" name="chevron-forward"></ion-icon>-->
-<!--        </div>-->
-<!--      </ion-item>-->
-<!--    </ion-list>-->
-
-<!--    <ion-list>-->
-<!--      <ion-item *ngFor="let item of items; let index">-->
-<!--        <ion-avatar slot="start">-->
-<!--          <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />-->
-<!--        </ion-avatar>-->
-<!--        <ion-label>{{ item }}</ion-label>-->
-<!--      </ion-item>-->
-<!--    </ion-list>-->
-<!--    <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">-->
-<!--      <ion-infinite-scroll-content></ion-infinite-scroll-content>-->
-<!--    </ion-infinite-scroll>-->
   </div>
 
   <div *ngIf="connectStart == 200" >
-    <div style="background-color: aliceblue; border-radius: 10px; box-shadow: 3px 3px #d3d3d3; padding: 0px; min-height: 100px;">
+    <div class="connect-card" style="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-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-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-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>
diff --git a/src/app/components/family-connect/family-connect.component.ts b/src/app/components/family-connect/family-connect.component.ts
index b38b0e4..088133f 100644
--- a/src/app/components/family-connect/family-connect.component.ts
+++ b/src/app/components/family-connect/family-connect.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+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";
@@ -10,6 +10,7 @@ import  {SocketToolsService} from  "../../services/socket-tools.service";
 export class FamilyConnectComponent implements OnInit {
 show_invite:boolean = false;
 show_connect: boolean = false;
+@ViewChild('select_activity') select_activity;
 
 connectStart : number = 0;
   fromData:string = '';