diff --git a/src/app/pages/chat/chat.module.ts b/src/app/pages/chat/chat.module.ts
index 066c25c5f..70faea048 100644
--- a/src/app/pages/chat/chat.module.ts
+++ b/src/app/pages/chat/chat.module.ts
@@ -13,6 +13,7 @@ import { GroupMessagesPage } from 'src/app/shared/chat/group-messages/group-mess
 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';
 
 @NgModule({
   imports: [
@@ -28,8 +29,14 @@ import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.pag
     MessagesPage,
     ContactsPage,
     GroupMessagesPage,
+    NewGroupPage,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  entryComponents: [MessagesPage,ContactsPage, GroupMessagesPage]
+  entryComponents: [
+    MessagesPage,
+    ContactsPage, 
+    GroupMessagesPage,
+    NewGroupPage,
+  ]
 })
 export class ChatPageModule {}
diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index ca88f46e6..d70bfca1b 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -17,7 +17,7 @@
               <ion-label class="title">Chat</ion-label>
             </div>
             <div class="div-icon">
-              <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
+              <ion-icon slot="end" (click)="openNewGroupPage()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
               <ion-icon slot="end" (click)="openContactsPage()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
             </div>
           </div>
@@ -93,6 +93,7 @@
         <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-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 a222e14b0..38ff6c12b 100644
--- a/src/app/pages/chat/chat.page.ts
+++ b/src/app/pages/chat/chat.page.ts
@@ -60,6 +60,7 @@ export class ChatPage implements OnInit {
   showEmptyComponent=true;
   showMessages=false;
   showContacts=false;
+  showNewGroup=false;
   showGroupMessages=false;
 
   @Output() getRoomInfo;
@@ -102,6 +103,7 @@ export class ChatPage implements OnInit {
   closeAllDesktopComponents() {
     this.showMessages=false;
     this.showContacts=false;
+    this.showNewGroup=false;
     this.showGroupMessages=false;
     this.showEmptyComponent=false;
   }
@@ -128,6 +130,15 @@ export class ChatPage implements OnInit {
       this.showContacts=true;
     }
   }
+  openNewGroupPage() {
+    if( window.innerWidth <= 1024){
+      this.newGroup();
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showNewGroup=true;
+    }
+  }
   openGroupMessagesPage(rid) {
     if( window.innerWidth <= 1024){
       this.openGroupMessagesModal(rid);
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 b53fdda69..fcc87ac41 100644
--- a/src/app/shared/chat/new-group/new-group.page.html
+++ b/src/app/shared/chat/new-group/new-group.page.html
@@ -2,9 +2,6 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
-        <div class="left">
-          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
-        </div>
         <div class="middle">
           <ion-label class="title">Novo Grupo</ion-label>
         </div>
@@ -15,11 +12,11 @@
 </ion-header>
 
 <ion-content>
-  <div class="main-content">
+  <div class="main-content width-100">
     <div class="item-container">
       <ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
     </div>
-    <div *ngIf="false" class="item-container-no-border">
+    <div *ngIf="true" class="item-container-no-border">
       <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
     </div>
diff --git a/src/app/shared/chat/new-group/new-group.page.scss b/src/app/shared/chat/new-group/new-group.page.scss
index 428f62e08..025d3aedd 100644
--- a/src/app/shared/chat/new-group/new-group.page.scss
+++ b/src/app/shared/chat/new-group/new-group.page.scss
@@ -47,7 +47,7 @@ ion-content{
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
+      //width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -63,7 +63,7 @@ ion-content{
         padding: 0!important;
         float: left;
         width: 221px;
-        margin: 2.5px 0 0 5px;
+        //margin: 2.5px 0 0 5px;
       }
       .right{
         padding: 0!important;
@@ -101,7 +101,7 @@ ion-content{
     padding: 15px 20px 0 20px;
 
     .item-container{
-        width: 360px;
+        //width: 360px;
         margin: 15px auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -110,7 +110,7 @@ ion-content{
 
       .item-container-no-border{
         display: flex;
-        width: 360px;
+        //width: 360px;
         margin: 25px auto;
         border-radius: 5px;
         align-items: center;
@@ -124,15 +124,16 @@ ion-content{
   }
 
   .container-div{
+    width: 100%;
     margin-bottom: 15px;
     overflow: auto;
 
     .ion-item-class-2{
-        width: 360px;
+        width: 100%;
         margin: 0px auto;
 
         .ion-icon-class{
-            width: 45px;
+            width: 5%;
             height: 45px;
             float: left;
             padding: 10px;
@@ -140,12 +141,13 @@ ion-content{
           }
       }
       .ion-input-class{
-        width: 315px;
+        width: 93%;
         height: 45px;
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
         padding-right: 10px;
+        margin-left: 2%;
         float: left;
       }
   }
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 6774503b1..21872959a 100644
--- a/src/app/shared/chat/new-group/new-group.page.ts
+++ b/src/app/shared/chat/new-group/new-group.page.ts
@@ -1,5 +1,5 @@
 import { analyzeAndValidateNgModules } from '@angular/compiler';
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular';
 import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
 import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
@@ -15,17 +15,19 @@ export class NewGroupPage implements OnInit {
   displayDuration: any;
   showDuration: boolean;
   selectedDuration = ['','',''];
-  groupName:string;
+  //groupName:string;
+
+  @Input() groupName:string;
 
   constructor(
     private pickerController: PickerController,
     private popoverController: PopoverController,
     private modalController: ModalController,
-    private navParams: NavParams,
+    //private navParams: NavParams,
   ) 
   { 
     this.isGroupCreated = false;
-    this.groupName = this.navParams.get('name');
+    //this.groupName = this.navParams.get('name');
   }
 
   ngOnInit() {