diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index 73f143d4a..3046e9671 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -762,7 +762,7 @@ export class AgendaPage implements OnInit {
 
   async cloneAllmobileComponent(){
     
-    this.mobileComponent= {
+    this.mobileComponent = {
       showAddNewEvent: false,
       showEditEvent: false,
       showEventDitails: false,
diff --git a/src/app/pages/chat/chat.module.ts b/src/app/pages/chat/chat.module.ts
index 70faea048..340239ee6 100644
--- a/src/app/pages/chat/chat.module.ts
+++ b/src/app/pages/chat/chat.module.ts
@@ -14,6 +14,7 @@ import { MessagesPage } from 'src/app/shared/chat/messages/messages.page';
 import { EmptyChatPage } from 'src/app/shared/chat/empty-chat/empty-chat.page';
 import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.page';
 import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
+import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-contacts/group-contacts.page';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
     ContactsPage,
     GroupMessagesPage,
     NewGroupPage,
+    GroupContactsPage,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   entryComponents: [
@@ -37,6 +39,7 @@ import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
     ContactsPage, 
     GroupMessagesPage,
     NewGroupPage,
+    GroupContactsPage,
   ]
 })
 export class ChatPageModule {}
diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index d70bfca1b..9538e432b 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -93,7 +93,8 @@
         <app-empty-chat class="d-flex height-100" *ngIf="showEmptyComponent"></app-empty-chat>
         <app-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
         <app-contacts *ngIf="showContacts" class="d-flex height-100"></app-contacts>
-        <app-new-group *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
+        <app-new-group (closeAllDesktopComponent)="openGroupContactsPage()" *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
+        <app-group-contacts [roomId]="roomId" class="d-flex height-100 flex-column" *ngIf="showGroupContacts"></app-group-contacts>
         <app-group-messages *ngIf="showGroupMessages" class="d-flex height-100 flex-column" [roomId]="roomId" #messagecontainer></app-group-messages>
       </div>
   </div>
diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts
index 38ff6c12b..059c39639 100644
--- a/src/app/pages/chat/chat.page.ts
+++ b/src/app/pages/chat/chat.page.ts
@@ -62,6 +62,7 @@ export class ChatPage implements OnInit {
   showContacts=false;
   showNewGroup=false;
   showGroupMessages=false;
+  showGroupContacts=false;
 
   @Output() getRoomInfo;
 
@@ -106,6 +107,16 @@ export class ChatPage implements OnInit {
     this.showNewGroup=false;
     this.showGroupMessages=false;
     this.showEmptyComponent=false;
+    console.log('All components closed!');
+  }
+  openGroupContactsPage(){
+    this.closeAllDesktopComponents();
+    if(window.innerWidth <= 1024){
+
+    }
+    else{
+      this.showGroupContacts = true;
+    }
   }
   openMessagesPage(rid) {
     if( window.innerWidth <= 1024){
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
index f63a629a8..e9c4d1253 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
@@ -1,7 +1,7 @@
 <ion-header  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
+    <div class="main-header width-100">
+      <div class="title-content width-100">
         <div class="back-icon">
           <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
         </div>
@@ -41,7 +41,7 @@
       </ion-list>
     </div>
 
-    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">
         <ion-label>{{header}}</ion-label>
@@ -49,8 +49,8 @@
 
       <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
-         <p>{{user.name}}</p>
-        <ion-icon name="ellipse"></ion-icon>
+        <ion-label>{{user.name}}</ion-label>
+        <div class="icon"><ion-icon name="ellipse"></ion-icon></div>
       </div>
       
     </ion-virtual-scroll>
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
index 829026a52..876e8cf68 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -3,11 +3,8 @@
     --opacity: 1;
  
    .main-header{
-     width: 100%; /* 400px */
      height: 100%;
      font-family: Roboto;
-     border-top-left-radius: 25px;
-     border-top-right-radius: 25px;
      background-color: #fff;
      overflow:hidden;
      padding: 30px 20px 0px 20px;
@@ -26,7 +23,6 @@
        padding-left: 20px;
      }
        .title-content{
-         width: 360px;
          margin: 0px auto;
          overflow: auto;
          padding: 0 !important;
@@ -62,28 +58,28 @@
      border-radius: 5px;
    }
    .search ion-searchbar{
-     /* border: 1px solid green; */
      width: 100%;
      margin: 0 !important;
      padding: 0 !important;
      --border-radius: 5px;
      --box-shadow: none;
-     overflow: auto;
+     overflow: hidden;
      --icon-color:#0d89d1;
    }
- 
  }
+
  ion-content{
    --background:transparent;
  }
+
  .main-content{
    width: 100%;
    height: 100%;
    font-family: Roboto;
    margin: 0 auto;
    background-color: #fff;
-   overflow:auto;
    padding: 0 0 0 0;
+   overflow:auto;
 
     .members-label{
       margin: 10px 20px 10px 20px !important;
@@ -111,8 +107,6 @@
        display: flex;
        margin: 10px 20px 10px 20px !important;
        overflow: auto;
-       align-items: center;
- 
      }
  
      .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
@@ -121,20 +115,16 @@
          float: left;
      }
  
-     .item-checkbox p, .members-checkbox p{
-         display: block;
-         margin: 0 !important;
-         width: 330px;
+     .item-checkbox ion-label, .members-checkbox p{
          padding-left: 10px;
          font-size: 15px;
          color: #0d89d1;
          float: left;
+         flex-grow: 1;
      }
-     .item-checkbox ion-icon, .members-checkbox ion-icon{
+     .icon, .members-checkbox ion-icon{
        font-size: 10px;
-       float: left;
        color:#99e47b;
-       margin-left: 10px;
      }
    }
  
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts-routing.module.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts-routing.module.ts
new file mode 100644
index 000000000..c998741ed
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupContactsPageRoutingModule {}
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.module.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts.module.ts
new file mode 100644
index 000000000..2946bd28c
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.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 { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GroupContactsPageRoutingModule
+  ],
+  declarations: [GroupContactsPage]
+})
+export class GroupContactsPageModule {}
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.html b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.html
new file mode 100644
index 000000000..7cca9b8cf
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.html
@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>group-contacts</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.scss b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.spec.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.spec.ts
new file mode 100644
index 000000000..5d3e2033f
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+describe('GroupContactsPage', () => {
+  let component: GroupContactsPage;
+  let fixture: ComponentFixture<GroupContactsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.ts
new file mode 100644
index 000000000..7cb431b9a
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-group-contacts',
+  templateUrl: './group-contacts.page.html',
+  styleUrls: ['./group-contacts.page.scss'],
+})
+export class GroupContactsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/chat/new-group/new-group-routing.module.ts b/src/app/shared/chat/new-group/new-group-routing.module.ts
index 42b9b7e24..8d2201158 100644
--- a/src/app/shared/chat/new-group/new-group-routing.module.ts
+++ b/src/app/shared/chat/new-group/new-group-routing.module.ts
@@ -1,25 +1,29 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { NewGroupPage } from './new-group.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: NewGroupPage
-  },
-  {
-    path: 'contacts',
-    loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
-  },
-  {
-    path: 'group-chat',
-    loadChildren: () => import('./group-chat/group-chat.module').then( m => m.GroupChatPageModule)
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewGroupPage } from './new-group.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewGroupPage
+  },
+  {
+    path: 'contacts',
+    loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
+  },
+  {
+    path: 'group-chat',
+    loadChildren: () => import('./group-chat/group-chat.module').then( m => m.GroupChatPageModule)
+  },
  {
+    path: 'group-contacts',
+    loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
   }
-];
 
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class NewGroupPageRoutingModule {}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewGroupPageRoutingModule {}
diff --git a/src/app/shared/chat/new-group/new-group.page.html b/src/app/shared/chat/new-group/new-group.page.html
index fcc87ac41..b2e9d9d23 100644
--- a/src/app/shared/chat/new-group/new-group.page.html
+++ b/src/app/shared/chat/new-group/new-group.page.html
@@ -5,7 +5,7 @@
         <div class="middle">
           <ion-label class="title">Novo Grupo</ion-label>
         </div>
-        <app-btn-seguinte *ngIf="groupName" (click)="addContacts()"></app-btn-seguinte>
+        <app-btn-seguinte *ngIf="groupName" (click)="createGroup()"></app-btn-seguinte> <!-- addContacts -->
       </div>
     </div>
   </ion-toolbar>
diff --git a/src/app/shared/chat/new-group/new-group.page.ts b/src/app/shared/chat/new-group/new-group.page.ts
index 21872959a..335dc6253 100644
--- a/src/app/shared/chat/new-group/new-group.page.ts
+++ b/src/app/shared/chat/new-group/new-group.page.ts
@@ -1,6 +1,7 @@
 import { analyzeAndValidateNgModules } from '@angular/compiler';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular';
+import { ChatService } from 'src/app/services/chat.service';
 import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
 import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
 
@@ -18,11 +19,13 @@ export class NewGroupPage implements OnInit {
   //groupName:string;
 
   @Input() groupName:string;
+  @Output() closeAllDesktopComponent = new EventEmitter<any>();
 
   constructor(
     private pickerController: PickerController,
     private popoverController: PopoverController,
     private modalController: ModalController,
+    private chatService: ChatService,
     //private navParams: NavParams,
   ) 
   { 
@@ -37,7 +40,19 @@ export class NewGroupPage implements OnInit {
     this.showDuration = event.detail.checked;
   }
   close(){
-    this.modalController.dismiss();
+    //this.modalController.dismiss();
+    console.log('close');
+    this.closeAllDesktopComponent.emit();
+  }
+  
+  createGroup(){
+    let name = this.groupName.split(' ').join('-');
+    let body = { "name":name, }
+    this.chatService.addGroup(body).subscribe(res=>{
+      console.log('group created');
+      console.log(res['group']);
+      this.closeAllDesktopComponent.emit(res['group']._id);
+    });
   }
 
   async addContacts(){