diff --git a/package-lock.json b/package-lock.json
index 084044dda..31a13ae4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3393,6 +3393,14 @@
         }
       }
     },
+    "@ngx-translate/core": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",
+      "integrity": "sha512-+tzEp8wlqEnw0Gc7jtVRAJ6RteUjXw6JJR4O65KlnxOmJrCGPI0xjV/lKRnQeU0w4i96PQs/jtpL921Wrb7PWg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -19108,7 +19116,8 @@
         },
         "ssri": {
           "version": "6.0.1",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1"
diff --git a/package.json b/package.json
index e7e128530..d2dd5c70a 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@ionic/storage": "^2.3.1",
     "@logisticinfotech/ionic4-datepicker": "^1.4.4",
     "@ng-bootstrap/ng-bootstrap": "^9.1.2",
+    "@ngx-translate/core": "^13.0.0",
     "angular-calendar": "^0.28.22",
     "angular-tag-cloud-module": "^5.2.2",
     "bootstrap": "^4.5.0",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index bf502bfda..c4fa38263 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -116,10 +116,6 @@ const routes: Routes = [
     path: 'new-event',
     loadChildren: () => import('./shared/agenda/new-event/new-event.module').then( m => m.NewEventPageModule)
   },
-  {
-    path: 'edit-event',
-    loadChildren: () => import('./shared/agenda/edit-event/edit-event.module').then( m => m.EditEventPageModule)
-  },
   {
     path: 'event-list',
     loadChildren: () => import('./shared/agenda/event-list/event-list.module').then( m => m.EventListPageModule)
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5dab677c6..1c2f4d5fd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,11 +3,33 @@ import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
 /* import { SplashScreen } from '@ionic-native/splash-screen/ngx'; */
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import * as _moment from 'moment';
+import * as _rollupMoment from 'moment';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+const moment = _rollupMoment || _moment;
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
+
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss']
+  styleUrls: ['app.component.scss'],
+  providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+  ]
 })
 export class AppComponent {
   constructor(
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9a1edca10..d8d70e95d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,12 +32,17 @@ import { WebsocketService } from './services/websocket.service'
 import { ChatService } from './services/chat.service';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 // import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
+import {MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+import { NgxMatDateFormats, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+
 
 import {
   NgxMatDatetimePickerModule, 
   NgxMatNativeDateModule, 
   NgxMatTimepickerModule 
 } from '@angular-material-components/datetime-picker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
 
 
 @NgModule({
@@ -61,9 +66,12 @@ import {
     //
     NgxMatDatetimePickerModule,
     NgxMatTimepickerModule,
-    NgxMatNativeDateModule
+    NgxMatNativeDateModule,
+    MatSelectModule,
+    MatDialogModule
     ],
   providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
     StatusBar,
     //SplashScreen,
     HttpClientModule,
diff --git a/src/app/guards/index.guard.ts b/src/app/guards/index.guard.ts
index e7423abbf..e3ffa3eff 100644
--- a/src/app/guards/index.guard.ts
+++ b/src/app/guards/index.guard.ts
@@ -12,7 +12,7 @@ export class IndexGuard implements CanActivate {
     public storageService:StorageService, 
     private router:Router
     ){}
-  canActivate(): Promise<boolean>{
+  canActivate(): Promise<boolean> {
     return new Promise(resolve => {
       /* this.storageService.get(AuthConnstants.AUTH).then(res => {
         if(res){
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 31ae8f960..c3d154bc0 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -65,7 +65,7 @@ export class HomePage implements OnInit {
     private platform: Platform) {
 
     router.events.subscribe((val) => {
-      // document.querySelectorAll('ion-modal').forEach((e) => e.remove())
+      document.querySelectorAll('ion-modal').forEach((e) => e.remove())
     });
 
     {
diff --git a/src/app/modals/create-process/create-process.module.ts b/src/app/modals/create-process/create-process.module.ts
index 7a83ca089..ad164c3ee 100644
--- a/src/app/modals/create-process/create-process.module.ts
+++ b/src/app/modals/create-process/create-process.module.ts
@@ -7,10 +7,25 @@ import { IonicModule } from '@ionic/angular';
 import { CreateProcessPageRoutingModule } from './create-process-routing.module';
 
 import { CreateProcessPage } from './create-process.page';
-import { EmptyContainerPage } from 'src/app/shared/empty-container/empty-container.page';
 import { EmptyContainerPageModule } from 'src/app/shared/empty-container/empty-container.module';
 import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/attendee-modal.module';
 
+
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -18,7 +33,23 @@ import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/att
     IonicModule,
     CreateProcessPageRoutingModule,
     EmptyContainerPageModule,
-    AttendeeModalPageModule
+    AttendeeModalPageModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+
+  ],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [
     CreateProcessPage
diff --git a/src/app/modals/create-process/create-process.page.html b/src/app/modals/create-process/create-process.page.html
index ec66be23f..b3ce63c3f 100644
--- a/src/app/modals/create-process/create-process.page.html
+++ b/src/app/modals/create-process/create-process.page.html
@@ -28,12 +28,31 @@
               <ion-icon class="icon-time" slot="start" name="time-outline"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
+
+              <ion-select class="d-block d-md-none" placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
                 <ion-select-option value="99999861"><b>Normal</b> (4 dias para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999862"><b>Urgente</b> (2 dias para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999863"><b>Muito Urgente</b> (1 dia para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999864"><b>Urgentíssimo</b> (8 horas para a execução da tarefa)</ion-select-option>
               </ion-select>
+
+              <mat-form-field class="width-100 d-none d-md-block" placeholder="Sample Type" required>
+                <mat-select matInput [(value)]="postData.Priority" >
+                  <mat-option value="Reunião">
+                    Reunião
+                  </mat-option>
+                  <mat-option value="Viagem">
+                    Viagem
+                  </mat-option>
+                  <mat-option value="Conferência">
+                    Conferência
+                  </mat-option>
+                  <mat-option value="Encontro">
+                    Encontro
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+
             </div>
           </div>
         </div>
@@ -43,15 +62,14 @@
               <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-item class="ion-no-border ion-no-padding ion-no-margin">
-              <ion-label>Tipo de assunto</ion-label>
-              <ion-select
-              [(ngModel)]="selectedTypes"
-              (ngModelChange)="onSelectedTypesChanged($event)" 
-              multiple="true" interface="alert" Cancel-text="Cancelar" required>
-                <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
-              </ion-select>
-            </ion-item>
+
+              <mat-form-field appearance="fill" class="width-100">
+                <mat-label>Toppings</mat-label>
+                <mat-select [formControl]="toppings" multiple>
+                  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+                </mat-select>
+              </mat-form-field>
+
             </div>
           </div>
         </div>
diff --git a/src/app/modals/create-process/create-process.page.ts b/src/app/modals/create-process/create-process.page.ts
index b8a497039..2aed50f40 100644
--- a/src/app/modals/create-process/create-process.page.ts
+++ b/src/app/modals/create-process/create-process.page.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { AnimationController, ModalController, NavParams } from '@ionic/angular';
 import { Despacho } from 'src/app/models/despacho.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -8,24 +7,38 @@ import { Folder } from 'src/app/models/folder.model';
 import { AuthService } from 'src/app/services/auth.service';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { environment } from 'src/environments/environment';
-import { AttachmentsService } from 'src/app/services/attachments.service';
-import { AlertService } from 'src/app/services/alert.service';
-import { AddParticipantsModalPage } from 'src/app/pages/gabinete-digital/expediente/add-participants-modal/add-participants-modal.page';
-import { AddParticipantsCcModalPage } from 'src/app/pages/gabinete-digital/expediente/add-participants-cc-modal/add-participants-cc-modal.page';
 import { DiscartExpedientModalPage } from 'src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page';
 import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
 import { SearchDocument } from 'src/app/models/search-document';
 import { SearchPage } from 'src/app/pages/search/search.page';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { User } from 'src/app/models/user.model';
 import { AttendeesPageModal } from 'src/app/pages/events/attendees/attendees.page';
 import { ToastService } from 'src/app/services/toast.service';
+import { FormControl } from '@angular/forms';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
+
 
 @Component({
   selector: 'app-create-process',
   templateUrl: './create-process.page.html',
   styleUrls: ['./create-process.page.scss'],
+  providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+  ]
 })
 export class CreateProcessPage implements OnInit {
   modalTitle: string[] = [
@@ -63,14 +76,15 @@ export class CreateProcessPage implements OnInit {
   documents:SearchDocument[] = [];
 
   loggeduser: User;
-  
+
+  toppings = new FormControl();
+
+  toppingList: string[] = ['Economia', 'Saúde', 'Educação', 'Finanças', 'Agricultura'];
+
   constructor(
     private modalController: ModalController,
-    private router:Router,
     private processes:ProcessesService,
-    private attachmentsService: AttachmentsService,
     private navParams: NavParams,
-    private alertController: AlertService,
     private authService: AuthService,
     private userAuth: AuthService,
     private animationController: AnimationController,
@@ -99,7 +113,6 @@ export class CreateProcessPage implements OnInit {
         DeadlineType: '',
         SubjectTypes: this.selectedTypes,
         NumberPDPP: this.task.workflowInstanceDataFields.DispatchNumber,
-
       };
       
       this.postData.DispatchFolder = this.dispatchFolder;
@@ -125,7 +138,6 @@ export class CreateProcessPage implements OnInit {
     this.taskDate = new Date(this.task.taskStartDate);
   }
 
-
   onSelectedTypesChanged(ev:any){
     console.log(ev);
     if(ev.length > 1){
@@ -137,7 +149,7 @@ export class CreateProcessPage implements OnInit {
     }
   }
 
-  close(){
+  close() {
     //this.router.navigate(['/home/gabinete-digital/expediente']);
     this.modalController.dismiss(null);
   }
@@ -350,8 +362,7 @@ export class CreateProcessPage implements OnInit {
           "ReviewUserComment": '',
         },
         "AttachmentList" :null,
-      } 
-
+      }
     }
 
     try {
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.html b/src/app/pages/agenda/edit-event/edit-event.page.html
index 9d244ad5d..7019f2e57 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.html
+++ b/src/app/pages/agenda/edit-event/edit-event.page.html
@@ -28,11 +28,6 @@
                 <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
               </div>
             </div>
-            <!-- Error messages -->
-            <!-- <span class="error ion-padding" >
-              Campo obrigatório
-            </span> -->
-        
           </div>
         
           <div class="container-div width-100">
@@ -132,9 +127,6 @@
               </div>
             </div>
           </div>
-          
-  
-  
           <div class="container-div width-100">
             <div (click)="addParticipants()" class="ion-item-class-2 cursor-pointer">
               <div class="ion-icon-class">
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.ts b/src/app/pages/agenda/edit-event/edit-event.page.ts
index 66b4c70c9..3adad43d9 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.ts
+++ b/src/app/pages/agenda/edit-event/edit-event.page.ts
@@ -3,12 +3,9 @@ import { AlertController, AnimationController, ModalController, NavParams } from
 import { Attachment } from 'src/app/models/attachment.model';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
-import { AlertService } from 'src/app/services/alert.service';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { EventsService } from 'src/app/services/events.service';
 import { ToastService } from 'src/app/services/toast.service';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { Event } from '../../../models/event.model';
 import { AttendeesPageModal } from '../../events/attendees/attendees.page';
 import { SearchPage } from '../../search/search.page';
diff --git a/src/app/pages/agenda/new-event/new-event.page.ts b/src/app/pages/agenda/new-event/new-event.page.ts
index 996c8c96a..9af991193 100644
--- a/src/app/pages/agenda/new-event/new-event.page.ts
+++ b/src/app/pages/agenda/new-event/new-event.page.ts
@@ -9,8 +9,6 @@ import { AttachmentsService } from 'src/app/services/attachments.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { EventsService } from 'src/app/services/events.service';
 import { ToastService } from 'src/app/services/toast.service';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { Event } from '../../../models/event.model';
 import { AttendeesPageModal } from '../../events/attendees/attendees.page';
 import { SearchPage } from '../../search/search.page';
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.module.ts b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.module.ts
index 743fe38aa..9057bed99 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.module.ts
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.module.ts
@@ -11,6 +11,36 @@ import { EmptyContainerPageModule } from 'src/app/shared/empty-container/empty-c
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/attendee-modal.module';
 
+
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDateFormats,
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule,
+  NGX_MAT_DATE_FORMATS
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
+
 @NgModule({
   imports: [
     CommonModule,
@@ -23,10 +53,23 @@ import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/att
     AttendeeModalPageModule,
     EmptyContainerPageModule,
     BtnModalDismissPageModule,
-
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule
   ],
   declarations: [
     BookMeetingModalPage
-  ]
+  ],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
+  ],
 })
 export class BookMeetingModalPageModule {}
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
index d8b0aea57..23b750348 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
@@ -35,10 +35,28 @@
               <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select 
+                class="d-block d-md-none" 
+                [(ngModel)]="postData.CalendarName" 
+                placeholder="Selecione repetição" 
+                interface="action-sheet" 
+                Cancel-text="Cancelar" required>
                 <ion-select-option value="Oficial">Oficial</ion-select-option>
                 <ion-select-option value="Pessoal">Pessoal</ion-select-option>
               </ion-select>
+
+
+              <mat-form-field  class="d-none d-md-block width-100" placeholder="Selecione agenda">
+                <mat-select [(value)]="postData.CalendarName" >
+                  <mat-option value="Oficial">
+                    Oficial
+                  </mat-option>
+                  <mat-option value="Pessoal">
+                    Pessoal
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+
             </div>
           </div>
         </div>
@@ -50,6 +68,7 @@
           </div>
           <div class="ion-input-class">
             <ion-datetime 
+              class="d-block d-md-none"
               placeholder="Início"
               [(ngModel)]="postData.StartDate" 
               displayFormat="D MMM YYYY H:mm"
@@ -59,7 +78,25 @@
               max="2022" 
               value="2020-11-19T11:06Z">
             </ion-datetime>
-            <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+           
+            <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+              <input matInput [ngxMatDatetimePicker]="picker1" 
+                placeholder="Choose a date" 
+                [formControl]="dateControlStart"
+                [min]="minDate" [max]="maxDate" 
+                [disabled]="disabled"
+              >
+              <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+              <ngx-mat-datetime-picker #picker1 
+                [showSpinners]="showSpinners" 
+                [showSeconds]="showSeconds"
+                [stepHour]="stepHour" [stepMinute]="stepMinute" 
+                [stepSecond]="stepSecond"
+                [touchUi]="touchUi"
+                [color]="color">
+              </ngx-mat-datetime-picker>
+            </mat-form-field>
+
           </div>
         </div>
         </div>
@@ -71,6 +108,7 @@
             </div>
             <div class="ion-input-class">
               <ion-datetime 
+                class="d-block d-md-none"
                 placeholder="Fim"
                 [(ngModel)]="postData.EndDate" 
                 displayFormat="D MMM YYYY H:mm"
@@ -80,7 +118,24 @@
                 max="2022" 
                 value="2020-11-19T11:06Z">
               </ion-datetime>
-              <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+              
+              <mat-form-field class="date-hour-picker">
+                <input matInput [ngxMatDatetimePicker]="fim" 
+                  placeholder="Choose a date" 
+                  [formControl]="dateControlEnd"
+                  [min]="minDate" [max]="maxDate" 
+                  [disabled]="disabled"
+                >
+                <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
+                <ngx-mat-datetime-picker #fim 
+                  [showSpinners]="showSpinners" 
+                  [showSeconds]="showSeconds"
+                  [stepHour]="stepHour" [stepMinute]="stepMinute" 
+                  [stepSecond]="stepSecond"
+                  [touchUi]="touchUi"
+                  [color]="color">
+                </ngx-mat-datetime-picker>
+              </mat-form-field>
             </div>
           </div>
         </div>
@@ -91,13 +146,41 @@
               <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select 
+                class="d-block d-md-none"
+                [(ngModel)]="postData.IsRecurring" 
+                placeholder="Selecione repetição" 
+                value="false" 
+                interface="action-sheet" 
+                Cancel-text="Cancelar" 
+                required
+                
+              >
                 <ion-select-option value="false">Não se repete</ion-select-option>
                 <ion-select-option value="true">Repete</ion-select-option>
                 <!-- <ion-select-option value="true">Semanal</ion-select-option>
                 <ion-select-option value="true">Diário</ion-select-option>
                 <ion-select-option value="true">Anual</ion-select-option> -->
               </ion-select>
+
+
+              <mat-form-field  
+                class="width-100 d-none d-md-block"
+                placeholder="Selecione repetição" 
+                value="false" 
+                interface="action-sheet" 
+                required
+              >
+                <mat-select [(value)]="postData.IsRecurring">
+                  <mat-option value="false">
+                    Não se repete
+                  </mat-option>
+                  <mat-option value="true">
+                    Repete
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+
             </div>
           </div>
         </div>
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.ts b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.ts
index 63c551f92..773bce4c0 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.ts
@@ -1,8 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { AnimationController, ModalController, NavParams } from '@ionic/angular';
-import { AddParticipantsCcModalPage } from '../add-participants-cc-modal/add-participants-cc-modal.page';
-import { AddParticipantsModalPage } from '../add-participants-modal/add-participants-modal.page';
 import { Event } from 'src/app/models/event.model'
 import { EventBody } from 'src/app/models/eventbody.model';
 import { ProcessesService } from 'src/app/services/processes.service';
@@ -12,21 +10,74 @@ import { DiscartExpedientModalPage } from '../../discart-expedient-modal/discart
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { SearchDocument } from 'src/app/models/search-document';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { User } from 'src/app/models/user.model';
 import { AuthService } from 'src/app/services/auth.service';
 import { AttendeesPageModal } from 'src/app/pages/events/attendees/attendees.page';
 import { ToastService } from 'src/app/services/toast.service';
+import { FormControl } from '@angular/forms';
+import * as _moment from 'moment';
+import * as _rollupMoment from 'moment';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+
+const moment = _rollupMoment || _moment;
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
+
 
 @Component({
   selector: 'app-book-meeting-modal',
   templateUrl: './book-meeting-modal.page.html',
   styleUrls: ['./book-meeting-modal.page.scss'],
+  providers: [
+    // { provide: MAT_DATE_LOCALE, useValue: 'pt' },
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+  ]
 })
 
 export class BookMeetingModalPage implements OnInit {
   
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate: any;
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
+
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+
+  showLoader = false
+
+  get dateStart () {
+    return this.dateControlStart.value
+  }
+
+  get dateEnd () {
+    return this.dateControlEnd.value
+  }
+
+  @ViewChild('picker') picker: any;
+  @ViewChild('fim') fim: any;
+  @ViewChild('inicio') inicio: any;
+  @ViewChild('picker1') picker1: any;
+  
   task: any;
   
   taskParticipants: EventPerson[];
@@ -73,9 +124,6 @@ export class BookMeetingModalPage implements OnInit {
       /* Set + 30minutes to seleted datetime */
       let selectedEndDate = new Date();
      /*  this.postData.EndDate = new Date(selectedEndDate.setMinutes(new Date().getMinutes() + 30)); */
-      
-
-
     }
 
   ngOnInit() {
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts
index 08212fb16..abf872d74 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts
@@ -12,6 +12,35 @@ import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/att
 import { EmptyContainerPageModule } from 'src/app/shared/empty-container/empty-container.module';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
+
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDateFormats,
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule,
+  NGX_MAT_DATE_FORMATS
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
 @NgModule({
   imports: [
     CommonModule,
@@ -22,7 +51,21 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
     AttendeeModalPageModule,
     EmptyContainerPageModule,
     BtnModalDismissPageModule,
-    
+    // 
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule
+  ],
+  providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [
     ExpedientTaskModalPage
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
index 84f20c6f7..91cc3111e 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
@@ -28,12 +28,38 @@
               <ion-icon class="icon-time" slot="start" name="time-outline"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select 
+                placeholder="Prazo" 
+                [(ngModel)]="postData.Priority" 
+                interface="action-sheet" 
+                Cancel-text="Cancelar" 
+                required
+                class="d-md-none"
+                >
                 <ion-select-option value="99999861"><b>Normal</b> (4 dias para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999862"><b>Urgente</b> (2 dias para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999863"><b>Muito Urgente</b> (1 dia para a execução da tarefa)</ion-select-option>
                 <ion-select-option value="99999864"><b>Urgentíssimo</b> (8 horas para a execução da tarefa)</ion-select-option>
               </ion-select>
+
+              <mat-form-field class="width-100 d-none d-md-block" placeholder="Sample Type" required>
+                <!-- <input matInput type="text" > -->
+                <mat-select >
+                  <mat-option value="Reunião">
+                    Reunião
+                  </mat-option>
+                  <mat-option value="Viagem">
+                    Viagem
+                  </mat-option>
+                  <mat-option value="Conferência">
+                    Conferência
+                  </mat-option>
+                  <mat-option value="Encontro">
+                    Encontro
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+
             </div>
           </div>
         </div>
@@ -43,15 +69,25 @@
               <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
             </div>
             <div class="ion-input-class">
-              <ion-item class="ion-no-border ion-no-padding ion-no-margin">
-              <ion-label>Tipo de assunto</ion-label>
-              <ion-select
-              [(ngModel)]="selectedTypes"
-              (ngModelChange)="onSelectedTypesChanged($event)" 
-              multiple="true" interface="alert" Cancel-text="Cancelar" required>
-                <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
-              </ion-select>
-            </ion-item>
+              <ion-item 
+                class="ion-no-border ion-no-padding ion-no-margin d-md-none">
+                <ion-label>Tipo de assunto</ion-label>
+                <ion-select
+                [(ngModel)]="selectedTypes"
+                (ngModelChange)="onSelectedTypesChanged($event)" 
+                multiple="true" interface="alert" Cancel-text="Cancelar" required>
+                  <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              
+              <mat-form-field 
+                appearance="fill" 
+                class="width-100 d-none d-md-block">
+                <mat-label>Toppings</mat-label>
+                <mat-select [formControl]="toppings" multiple>
+                  <mat-option *ngFor="let type of subjectTypes" [value]="type.Code">{{type.Description}}</mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
           </div>
         </div>
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts
index 33cbe7ef5..04b74559d 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts
@@ -20,11 +20,30 @@ import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.p
 import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { ToastService } from 'src/app/services/toast.service';
 import { AttendeesPageModal } from 'src/app/pages/events/attendees/attendees.page';
+import { FormControl } from '@angular/forms';
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
+
 
 @Component({
   selector: 'app-expedient-task-modal',
   templateUrl: './expedient-task-modal.page.html',
   styleUrls: ['./expedient-task-modal.page.scss'],
+  providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+  ]
 })
 export class ExpedientTaskModalPage implements OnInit {
 
@@ -46,7 +65,7 @@ export class ExpedientTaskModalPage implements OnInit {
   loadedAttachments:any;
   documents:SearchDocument[] = [];
 
-  subjectTypes:any;
+  subjectTypes:any[] = [];
   selectedTypes: string[]=[];
 
   postData: Despacho;
@@ -66,6 +85,11 @@ export class ExpedientTaskModalPage implements OnInit {
   taskResult: any = {}
 
   loggeduser: User;
+  toppings = new FormControl();
+
+  get toppingsValues() {
+    return this.toppings.value;
+  }
 
   constructor(
     private modalController: ModalController,
@@ -129,7 +153,7 @@ export class ExpedientTaskModalPage implements OnInit {
     this.getSubjectType();
   }
 
-  onSelectedTypesChanged(ev:any){
+  onSelectedTypesChanged(ev:any) {
     console.log(ev);
     if(ev.length > 1){
       console.log(ev.filter(data => data != '99999850'));
@@ -190,6 +214,11 @@ export class ExpedientTaskModalPage implements OnInit {
       }
     });
     docs.Attachments = DocumentToSave;
+
+    if (window.innerWidth >= 800) {
+      this.selectedTypes = this.toppingsValues
+    }
+
     this.dispatchFolder.SubjectTypes = this.selectedTypes;
     
       switch (this.loggeduser.Profile) {
diff --git a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.ts b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.ts
index d94f49595..8102f6c3c 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.ts
+++ b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.ts
@@ -253,7 +253,7 @@ export class PedidoPage implements OnInit {
   async openExpedientActionsModal(taskAction: any, task: any) {
     
     let classs;
-    if( window.innerWidth <= 800){
+    if( window.innerWidth <= 800) {
       classs = 'modal modal-desktop'
     } else  {
       classs = 'modal modal-desktop showAsideOptions'
diff --git a/src/app/pages/publications/view-publications/view-publications.page.ts b/src/app/pages/publications/view-publications/view-publications.page.ts
index ca3ec6aee..192700c27 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.ts
+++ b/src/app/pages/publications/view-publications/view-publications.page.ts
@@ -28,7 +28,7 @@ export class ViewPublicationsPage implements OnInit {
     private activatedRoute: ActivatedRoute,
     private router: Router, 
     )
-    { 
+    {
       this.item = new PublicationFolder();
       this.activatedRoute.paramMap.subscribe(params => {
         console.log(params);
@@ -46,6 +46,7 @@ export class ViewPublicationsPage implements OnInit {
     this.getPublications();
     this.getPublicationDetail();
   }
+
   doRefresh(event) {
     this.getPublications();
 
@@ -55,18 +56,22 @@ export class ViewPublicationsPage implements OnInit {
       event.target.complete();
     }, 3000);
   }
-  close(){
+
+  close() {
     this.modalController.dismiss();
   }
-  goBack(){
+
+  goBack() {
     this.router.navigate(['/home/publications']);
   }
+
   getPublicationDetail(){
     this.publications.GetPublicationFolderById(this.folderId).subscribe(res=>{
       console.log(res);
       this.item = res;
     });
   }
+  
   getPublications(){
     this.showLoader = true;
     
diff --git a/src/app/services/search.service.ts b/src/app/services/search.service.ts
index 5f3194b90..13b6786cb 100644
--- a/src/app/services/search.service.ts
+++ b/src/app/services/search.service.ts
@@ -27,7 +27,7 @@ export class SearchService {
   }
 
 
-  basicSearch(subject:string, date:string, sender:string, organicEntity:string, docTypeId:string, applicationType:string): Observable<EventSearch>{
+  basicSearch(subject:string, date:string = null, sender:string = null, organicEntity:string = null, docTypeId:string = null, applicationType:string): Observable<EventSearch>{
     // Endpoint
     const geturl = environment.apiURL + 'search';
     // store params
diff --git a/src/app/shared/agenda/edit-event/edit-event.module.ts b/src/app/shared/agenda/edit-event/edit-event.module.ts
index bcd1dc3e4..ec8eff88b 100644
--- a/src/app/shared/agenda/edit-event/edit-event.module.ts
+++ b/src/app/shared/agenda/edit-event/edit-event.module.ts
@@ -1,19 +1,47 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-
 import { IonicModule } from '@ionic/angular';
-
 import { EditEventPageRoutingModule } from './edit-event-routing.module';
-
 import { EditEventPage } from './edit-event.page';
 
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    EditEventPageRoutingModule
+    EditEventPageRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+  ],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [EditEventPage],
   exports: [EditEventPage]
diff --git a/src/app/shared/agenda/edit-event/edit-event.page.html b/src/app/shared/agenda/edit-event/edit-event.page.html
index 279ba212d..7e61bcd30 100644
--- a/src/app/shared/agenda/edit-event/edit-event.page.html
+++ b/src/app/shared/agenda/edit-event/edit-event.page.html
@@ -6,6 +6,7 @@
           <ion-label class="title">Editar Evento</ion-label>
         </div>
       </div>
+      <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     </div>
   </ion-toolbar>
 </ion-header>
@@ -38,14 +39,18 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-select disabled  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100" placeholder="Selecione agenda">
+            <mat-select [(value)]="postEvent.CalendarName" >
+              <mat-option value="Oficial">
+                Oficial
+              </mat-option>
+              <mat-option value="Pessoal">
+                Pessoal
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -56,16 +61,25 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]"
-          selectedText="{{postEvent.Categories[0]}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="Reunião">Reunião</ion-select-option>
-            <ion-select-option value="Viagem">Viagem</ion-select-option>
-            <ion-select-option value="Conferência">Conferência</ion-select-option>
-            <ion-select-option value="Encontro">Encontro</ion-select-option>
-          </ion-select>
+
+          <mat-form-field class="width-100" placeholder="Sample Type" required>
+            <!-- <input matInput type="text" > -->
+            <mat-select matInput [(value)]="postEvent.Categories[0]" >
+              <mat-option value="Reunião">
+                Reunião
+              </mat-option>
+              <mat-option value="Viagem">
+                Viagem
+              </mat-option>
+              <mat-option value="Conferência">
+                Conferência
+              </mat-option>
+              <mat-option value="Encontro">
+                Encontro
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -76,38 +90,54 @@
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+
+          <mat-form-field class="date-hour-picker">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date" 
+              [formControl]="dateControlStart"
+              [min]="minDate" [max]="maxDate" 
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #picker1 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi"
+              [color]="color">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
     
     <div class="container-div">
-      <div class="ion-item-class-2 width-100 d-flex">
+      <div  class="ion-item-class-2 width-100 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+
+          <mat-form-field class="date-hour-picker">
+            <input matInput [ngxMatDatetimePicker]="fim" 
+              placeholder="Choose a date" 
+              [formControl]="dateControlEnd"
+              [min]="minDate" [max]="maxDate" 
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #fim 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi"
+              [color]="color">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -118,14 +148,18 @@
           <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
         </div>
         <div class="ion-input-class flex-grow-1">
-          <ion-select placeholder="Selecione repetição" 
-          [(ngModel)]="postEvent.IsRecurring"
-          selectedText="{{isRecurring}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
+
+          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
+            <mat-select [(ngModel)]="postEvent.IsRecurring">
+              <mat-option value="false">
+                Não se repete
+              </mat-option>
+              <mat-option value="true">
+                Repete
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
diff --git a/src/app/shared/agenda/edit-event/edit-event.page.ts b/src/app/shared/agenda/edit-event/edit-event.page.ts
index 61d2b9c57..bb5c06663 100644
--- a/src/app/shared/agenda/edit-event/edit-event.page.ts
+++ b/src/app/shared/agenda/edit-event/edit-event.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -9,6 +9,10 @@ import { removeDuplicate } from 'src/plugin/removeDuplicate.js'
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { Attachment } from 'src/app/models/attachment.model';
+import { ToastService } from 'src/app/services/toast.service';
+import { FormControl } from '@angular/forms';
+import * as moment from 'moment';
+
 @Component({
   selector: 'app-edit-event',
   templateUrl: './edit-event.page.html',
@@ -24,9 +28,21 @@ export class EditEventPage implements OnInit {
   eventBody: EventBody;
   segment:string = "true";
   eventAttendees: EventPerson[];
-  minDate: string;
+  // minDate: string;
   loadedEventAttachments: Attachment[];
 
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate: any;
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
+
   @Input() taskParticipants: EventPerson[];
   @Input() taskParticipantsCc: EventPerson[];
   @Input() profile:string;
@@ -41,15 +57,41 @@ export class EditEventPage implements OnInit {
   @Output() setIntervenientCC = new EventEmitter<any>();
   @Output() clearPostEvent = new EventEmitter<any>();
 
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+
+  showLoader = false
+
+  get dateStart () {
+    return this.dateControlStart.value
+  }
+
+  get dateEnd () {
+    return this.dateControlEnd.value
+  }
+
+  @ViewChild('picker') picker: any;
+  @ViewChild('fim') fim: any;
+  @ViewChild('inicio') inicio: any;
+  @ViewChild('picker1') picker1: any;
+
+  public options = [
+    { value: true, label: 'True' },
+    { value: false, label: 'False' }
+  ];
+
+  public listColors = ['primary', 'accent', 'warn'];
+  public stepHours = [1, 2, 3, 4, 5];
+  public stepMinutes = [1, 5, 10, 15, 20, 25];
+  public stepSeconds = [1, 5, 10, 15, 20, 25];
+
+
   constructor(
     private modalController: ModalController,
     private eventsService: EventsService,
     public alertController: AlertController,
     private attachmentsService: AttachmentsService,
-    
-  ) {
-  
-
+    private toastService: ToastService ) {
   }
 
   ngOnInit() {
@@ -94,11 +136,11 @@ export class EditEventPage implements OnInit {
 
     this.getAttachments(this.postEvent.EventId);
 
-
+    this.restoreDatepickerData()
    
   }
   
-  close(){
+  close() {
     this.closeComponent.emit();
     this.setIntervenient.emit([]);
     this.setIntervenientCC.emit([]);
@@ -107,25 +149,30 @@ export class EditEventPage implements OnInit {
     this.deleteTemporaryData();
   }
 
+  async save() {
 
-
-
-  async save(){
-
+    this.getDatepickerData()
     this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
 
+    this.showLoader = true
     await this.eventsService.editEvent(this.postEvent, 2, 3).subscribe(async () => {
+      this.showLoader = false
+     
       const alert = await this.alertController.create({
         cssClass: 'my-custom-class',
         header: 'Evento actualizado',
         buttons: ['OK']
       });
 
-      
+      this.toastService.successMessage()
       setTimeout(()=>{
         alert.dismiss();
       }, 1500);
 
+    },
+    error => {
+      this.showLoader = false
+      this.toastService.badRequest()
     });
 
     this.clearPostEvent.emit();
@@ -157,8 +204,25 @@ export class EditEventPage implements OnInit {
   }
 
 
-  saveTemporaryData(){
+  getDatepickerData() {
+    if (this.postEvent) {
+      this.postEvent.StartDate = this.dateStart
+      this.postEvent.EndDate = this.dateEnd
+    }
+  }
+
+  restoreDatepickerData() {
+    if (this.postEvent) {
+      this.dateControlStart = new FormControl(moment(this.postEvent.StartDate));
+      this.dateControlEnd = new FormControl(moment(this.postEvent.EndDate));
+    }
+
+  }
+
+  saveTemporaryData() {
     
+    this.getDatepickerData()
+
     window['temp.path:/home/agenda/edit-event.component.ts'] = {
       postEvent: this.postEvent,
       eventBody: this.eventBody,
@@ -166,8 +230,8 @@ export class EditEventPage implements OnInit {
     }
   }
 
-  restoreTemporaryData(): boolean{
-    
+  restoreTemporaryData(): boolean {
+   
     const restoredData =  window['temp.path:/home/agenda/edit-event.component.ts']
 
     if(JSON.stringify(restoredData) != "{}" && undefined != restoredData){
@@ -175,6 +239,8 @@ export class EditEventPage implements OnInit {
       this.eventBody = restoredData.eventBody
       this.segment = restoredData.segment
 
+      this.restoreDatepickerData()
+
       return true;  
     } else {
       return false;
diff --git a/src/app/shared/agenda/new-event/new-event.module.ts b/src/app/shared/agenda/new-event/new-event.module.ts
index a5c801bb3..c35cd2c00 100644
--- a/src/app/shared/agenda/new-event/new-event.module.ts
+++ b/src/app/shared/agenda/new-event/new-event.module.ts
@@ -12,7 +12,6 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 
 import { MatNativeDateModule } from '@angular/material/core';
-import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment-adapter";
 
 import {
   NgxMatDatetimePickerModule, 
@@ -20,12 +19,19 @@ import {
   NgxMatTimepickerModule 
 } from '@angular-material-components/datetime-picker';
 
-
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 
+import { 
+  MAT_MOMENT_DATE_FORMATS,
+  MomentDateAdapter,
+  MAT_MOMENT_DATE_ADAPTER_OPTIONS
+} from '@angular/material-moment-adapter';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+
+
 @NgModule({
   imports: [
     CommonModule,
@@ -44,7 +50,7 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
 
     NgxMatMomentModule,
     // BrowserAnimationsModule,
-    // BrowserModule,
+    // MatRadioModule,
     MatSelectModule,
     //MatRadioModule,
     //MatCheckboxModule,
@@ -52,6 +58,9 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
     ReactiveFormsModule
   ],
   declarations: [NewEventPage],
+  providers: [
+    { provide: MAT_DATE_LOCALE, useValue: 'pt' },
+  ],
   exports: [NewEventPage]
 })
 export class NewEventPageModule {}
diff --git a/src/app/shared/agenda/new-event/new-event.page.html b/src/app/shared/agenda/new-event/new-event.page.html
index 7e0449f6b..ee94ef140 100644
--- a/src/app/shared/agenda/new-event/new-event.page.html
+++ b/src/app/shared/agenda/new-event/new-event.page.html
@@ -6,6 +6,7 @@
           <ion-label class="title">Novo Evento</ion-label>
         </div>
       </div>
+      <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     </div>
   </ion-toolbar>
 </ion-header>
@@ -13,33 +14,6 @@
 <ion-content>
   <div class="main-content">
 
-    <!-- THIS -->
-    
-    <!-- <mat-form-field>
-      <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
-        [min]="minDate" [max]="maxDate" [disabled]="disabled">
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
-        [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi"
-        [color]="color" [enableMeridian]="enableMeridian">
-      </ngx-mat-datetime-picker>
-    </mat-form-field> -->
-   
-    <!-- <form class="form-inline">
-      <div class="form-group">
-        <div class="input-group">
-          <input class="form-control" placeholder="yyyy-mm-dd"
-                name="dp"  ngbDatepicker #d="ngbDatepicker">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-          </div>
-        </div>
-      </div>
-    </form> -->
-
-    <!-- 2. datepicker in the popup -->
-   <!--  <input type="text" ngbDatepicker #d="ngbDatepicker"/> -->
-
     <div class="ion-item-container">
       <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>
@@ -52,10 +26,6 @@
           <ion-input type="text" placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
         </div>
       </div>
-      <!-- Error messages -->
-      <!-- <span class="error ion-padding" >
-        Campo obrigatório
-      </span> -->
   
     </div>
     
@@ -64,15 +34,19 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-select  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
+        <div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top ">
+
+          <mat-form-field  class="width-100" color="ion-color-secondary"  placeholder="Selecione agenda">
+            <mat-select [(value)]="postEvent.CalendarName" >
+              <mat-option value="Oficial">
+                Oficial
+              </mat-option>
+              <mat-option value="Pessoal">
+                Pessoal
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -82,50 +56,54 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="Reunião">Reunião</ion-select-option>
-            <ion-select-option value="Viagem">Viagem</ion-select-option>
-            <ion-select-option value="Conferência">Conferência</ion-select-option>
-            <ion-select-option value="Encontro">Encontro</ion-select-option>
-          </ion-select>
+        <div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
+
+          <mat-form-field class="width-100" placeholder="Sample Type" required>
+            <!-- <input matInput type="text" > -->
+            <mat-select matInput [(value)]="postEvent.Categories[0]" >
+              <mat-option value="Reunião">
+                Reunião
+              </mat-option>
+              <mat-option value="Viagem">
+                Viagem
+              </mat-option>
+              <mat-option value="Conferência">
+                Conferência
+              </mat-option>
+              <mat-option value="Encontro">
+                Encontro
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
-  
     <div class="container-div">
       <div class="ion-item-class-2 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            class=""
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
+        <div  class="ion-input-class  flex-grow-1">
+
+          <mat-form-field class="date-hour-picker">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date" 
+              [formControl]="dateControlStart"
+              [min]="minDate" [max]="maxDate" 
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #picker1 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi"
+              [color]="color">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
 
-          <!-- <input 
-            class="d-none width-100"  
-            placeholder="Início" 
-            [matDatepicker]="picker" 
-            (focus)="picker.open()" 
-            (click)="picker.open()"
-            [(ngModel)]="postEvent.StartDate"
-          >
-          <mat-datepicker #picker></mat-datepicker> -->
-      
-      
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
         </div>
       </div>
     </div>
@@ -135,18 +113,26 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        <div (click)="openFim()" class="ion-input-class flex-grow-1">
+
+          <mat-form-field class="date-hour-picker">
+            <input matInput [ngxMatDatetimePicker]="fim" 
+              placeholder="Choose a date" 
+              [formControl]="dateControlEnd"
+              [min]="minDate" [max]="maxDate" 
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #fim 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi"
+              [color]="color">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
@@ -156,11 +142,19 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-select placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
+        <div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
+
+          <mat-form-field  class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
+            <mat-select [(value)]="postEvent.IsRecurring">
+              <mat-option value="false">
+                Não se repete
+              </mat-option>
+              <mat-option value="true">
+                Repete
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
         </div>
       </div>
     </div>
diff --git a/src/app/shared/agenda/new-event/new-event.page.scss b/src/app/shared/agenda/new-event/new-event.page.scss
index 29ce5055c..ff29b50a3 100644
--- a/src/app/shared/agenda/new-event/new-event.page.scss
+++ b/src/app/shared/agenda/new-event/new-event.page.scss
@@ -1,10 +1,12 @@
-ion-content{
+  ion-content{
     --background:transparent;
   }
+
   .header-toolbar{
    --background:transparent;
    --opacity: 1;
   }
+
   .main-header{
     width: 100%; /* 400px */
     height: 100%;
@@ -168,17 +170,14 @@ ion-content{
       .span-color{
         color:red;
       }
-  
   }
   
-  
-  .container-div{
-    ion-textarea{
+  .container-div {
+    ion-textarea {
       height: 81px;
     }
   }
   
-  
   .app-name{
     background: #42b9f2;
     border-radius: 18px;
@@ -210,4 +209,9 @@ ion-content{
     .close-button {
       display: block !important;
     }
-  }
\ No newline at end of file
+  }
+
+
+.materia-top {
+  padding-top: 7px;
+}
\ No newline at end of file
diff --git a/src/app/shared/agenda/new-event/new-event.page.ts b/src/app/shared/agenda/new-event/new-event.page.ts
index 4094b9d08..9bac41b00 100644
--- a/src/app/shared/agenda/new-event/new-event.page.ts
+++ b/src/app/shared/agenda/new-event/new-event.page.ts
@@ -9,27 +9,22 @@ import { removeDuplicate } from 'src/plugin/removeDuplicate.js'
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { SearchDocument } from "src/app/models/search-document";
 import {  EventAttachment } from 'src/app/models/attachment.model';
-import { BadRequestPage } from '../../popover/bad-request/bad-request.page';
-import { SuccessMessagePage} from '../../popover/success-message/success-message.page';
+
 import { ToastService } from 'src/app/services/toast.service';
 import { User } from 'src/app/models/user.model';
 import { AuthService } from 'src/app/services/auth.service';
 
-
-import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
-import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+import {DateAdapter} from '@angular/material/core';
 import * as _moment from 'moment';
 import * as _rollupMoment from 'moment';
-import {FormControl} from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
 import { ThemePalette } from '@angular/material/core';
 
-
 import { HttpClient } from '@angular/common/http';
 import {  NgZone, ViewChild } from '@angular/core';
 import {  FormGroup, Validators } from '@angular/forms';
-import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';
-
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
 
 const moment = _rollupMoment || _moment;
 
@@ -50,25 +45,13 @@ const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
   templateUrl: './new-event.page.html',
   styleUrls: ['./new-event.page.scss'],
   providers: [
-    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
-    // application's root module. We provide it at the component level here, due to limitations of
-    // our example generation script.
-    // {
-    //   provide: DateAdapter,
-    //   useClass: MomentDateAdapter,
-    //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
-    // },
-
     { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
-    // { provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
-    // { provide: LOCALE_ID, useValue: "en-GB" } 
   ]
 })
 
 
 export class NewEventPage implements OnInit {
 
-
   eventBody: EventBody;
   segment:string = "true";
 
@@ -81,11 +64,10 @@ export class NewEventPage implements OnInit {
   public minDate: any;
   public maxDate: any;
   public stepHour = 1;
-  public stepMinute = 1;
-  public stepSecond = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
   public color: ThemePalette = 'primary';
 
-  
   @Input() profile:string;
   @Input() selectedSegment: string;
   @Input() selectedDate: Date;
@@ -108,6 +90,34 @@ export class NewEventPage implements OnInit {
 
   loggeduser: User;
   @ViewChild('picker') picker: any;
+  @ViewChild('fim') fim: any;
+  @ViewChild('inicio') inicio: any;
+  @ViewChild('picker1') picker1: any;
+
+
+  public options = [
+    { value: true, label: 'True' },
+    { value: false, label: 'False' }
+  ];
+
+  public listColors = ['primary', 'accent', 'warn'];
+  public stepHours = [1, 2, 3, 4, 5];
+  public stepMinutes = [1, 5, 10, 15, 20, 25];
+  public stepSeconds = [1, 5, 10, 15, 20, 25];
+
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+
+  showLoader = false
+
+  get dateStart () {
+    return this.dateControlStart.value
+  }
+
+  get dateEnd () {
+    return this.dateControlEnd.value
+  }
+
 
   constructor(
     private modalController: ModalController,
@@ -118,10 +128,14 @@ export class NewEventPage implements OnInit {
     private userService: AuthService,
     private http: HttpClient, 
     private zone: NgZone,
-    private dateAdapter: DateAdapter<any>
+    private dateAdapter: DateAdapter<any>,
+    // private translate: TranslateService
   ) {
     this.dateAdapter.setLocale('pt');
     this.loggeduser = userService.ValidatedUser;
+
+    this.dateControlStart = new FormControl(moment(new Date()));
+    this.dateControlEnd = new FormControl(moment(new Date()));
   }
 
   ngOnInit() {
@@ -149,7 +163,7 @@ export class NewEventPage implements OnInit {
           Body: this.eventBody,
           Location: '',
           CalendarId: '',
-          CalendarName: '',
+          CalendarName: 'Oficial',
           StartDate: selectedStartdDate,
           EndDate: new Date(selectedEndDate),
           EventType: 'Reunião',
@@ -207,60 +221,24 @@ export class NewEventPage implements OnInit {
 
 
     this.date = new Date(2021,9,4,5,6,7);
+    this.getDatepickerData()
   }
 
-  
-  public formGroup = new FormGroup({
-    date: new FormControl(null, [Validators.required]),
-    date2: new FormControl(null, [Validators.required])
-  })
-  public dateControl = new FormControl(new Date(2021,9,4,5,6,7));
-  public dateControlMinMax = new FormControl(new Date());
-
-  public options = [
-    { value: true, label: 'True' },
-    { value: false, label: 'False' }
-  ];
-
-  public listColors = ['primary', 'accent', 'warn'];
-
-  public stepHours = [1, 2, 3, 4, 5];
-  public stepMinutes = [1, 5, 10, 15, 20, 25];
-  public stepSeconds = [1, 5, 10, 15, 20, 25];
-
-  toggleMinDate(evt: any) {
-    if (evt.checked) {
-      this._setMinDate();
-    } else {
-      this.minDate = null;
+  openInicio() {
+    let input: any = document.querySelector('#new-inicio')
+    if(input) {
+      console.log(input)
+      input.click()
     }
   }
 
-  toggleMaxDate(evt: any) {
-    if (evt.checked) {
-      this._setMaxDate();
-    } else {
-      this.maxDate = null;
+  openFim() {
+    let input: any = document.querySelector('#new-fim')
+    if(input) {
+      input.click()
     }
   }
 
-  closePicker() {
-    this.picker.cancel();
-  }
-
-  private _setMinDate() {
-    const now = new Date();
-    this.minDate = new Date();
-    this.minDate.setDate(now.getDate() - 1);
-  }
-
-
-  private _setMaxDate() {
-    const now = new Date();
-    this.maxDate = new Date();
-    this.maxDate.setDate(now.getDate() + 1);
-  }
-
   async getDoc(){
     const modal = await this.modalController.create({
       component: SearchPage,
@@ -290,8 +268,25 @@ export class NewEventPage implements OnInit {
     this.setIntervenientCC.emit([]);
   }
 
+  getDatepickerData() {
+    if (this.postEvent) {
+      this.postEvent.StartDate = this.dateStart
+      this.postEvent.EndDate = this.dateEnd
+    }
+  }
+
+  restoreDatepickerData() {
+    if (this.postEvent) {
+      this.dateControlStart = new FormControl(moment(this.postEvent.StartDate, "DD MM YYYY hh:mm"));
+      this.dateControlEnd = new FormControl(moment(this.postEvent.EndDate, "DD MM YYYY hh:mm"));
+    }
+
+  }
+
   async save(){
-    
+
+    this.getDatepickerData()
+
     this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
 
     if(this.documents.length >= 0) {
@@ -299,11 +294,16 @@ export class NewEventPage implements OnInit {
     }
 
     if(this.loggeduser.Profile == 'MDGPR') {
-      console.log('MD - Aqui');
-      console.log(this.postEvent);
+      // console.log('MD - Aqui');
+      // console.log(this.postEvent);
+
+      this.showLoader = true
+
       this.eventService.postEventMd(this.postEvent, this.postEvent.CalendarName).subscribe(
         async (id) => {
 
+          this.showLoader = false
+
           const eventId: any = id;
 
           const DocumentToSave: EventAttachment[] = this.documents.map((e) => {
@@ -339,8 +339,9 @@ export class NewEventPage implements OnInit {
 
         },
         error => {
+          this.showLoader = false
           this.toastService.badRequest('Evento não criado')
-        });
+      });
     }
     else if(this.loggeduser.Profile == 'PR') {
       console.log('PR - Aqui');
@@ -386,6 +387,7 @@ export class NewEventPage implements OnInit {
   }
 
   afterSave() {
+    this.getDatepickerData()
     this.deleteTemporaryData();
 
     this.onAddEvent.emit(this.postEvent);
@@ -423,6 +425,7 @@ export class NewEventPage implements OnInit {
   }
 
   saveTemporaryData() {
+    this.getDatepickerData()
     window['temp.path:/home/agenda/new-event.component.ts'] = {
       postEvent: this.postEvent,
       eventBody: this.eventBody,
@@ -431,6 +434,8 @@ export class NewEventPage implements OnInit {
   }
 
   restoreTemporaryData(): boolean {
+
+
     const restoredData =  window['temp.path:/home/agenda/new-event.component.ts']
 
     if(JSON.stringify(restoredData) != "{}" && undefined != restoredData) {
@@ -438,8 +443,11 @@ export class NewEventPage implements OnInit {
       this.eventBody = restoredData.eventBody
       this.segment = restoredData.segment
 
+      // restore dater for date and hours picker
+      this.restoreDatepickerData()
       return true;
     } else {
+
       return false;
     }
   }
@@ -448,4 +456,4 @@ export class NewEventPage implements OnInit {
     window['temp.path:/home/agenda/new-event.component.ts'] = {}
   }
 
-}
+}
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.module.ts b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.module.ts
index 4d3a8353c..9d84ebaf9 100644
--- a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.module.ts
+++ b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.module.ts
@@ -8,13 +8,39 @@ import { EditEventToApproveComponentRoutingModule } from './edit-event-routing.m
 import { EditEventToApproveComponent } from './edit-event.page';
 import { ComponentsModule } from 'src/app/components/components.module';
 
+
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     ComponentsModule,
-    EditEventToApproveComponentRoutingModule
+    EditEventToApproveComponentRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule
   ],
   declarations: [
     EditEventToApproveComponent
diff --git a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html
index 644544210..699f59c77 100644
--- a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html
+++ b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html
@@ -8,7 +8,7 @@
         <ion-header>
           <div class="title-content">
             <div class="middle">
-              <ion-label class="title">Editar Evento Por Aprovar QQ</ion-label>
+              <ion-label class="title">Editar evento por aprovar</ion-label>
             </div>
           </div>
         </ion-header>
@@ -40,14 +40,30 @@
                 <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
               </div>
               <div class="ion-input-class">
+                
                 <ion-select disabled  placeholder="Selecione agenda"
-                selectedText="{{eventProcess.workflowInstanceDataFields.Agenda}}" 
-                [(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda" 
-                interface="action-sheet" Cancel-text="Cancelar" 
-                required>
+                  class="d-block d-md-none"
+                  selectedText="{{eventProcess.workflowInstanceDataFields.Agenda}}" 
+                  [(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda" 
+                  interface="action-sheet" Cancel-text="Cancelar" 
+                  required
+                >
                   <ion-select-option value="Oficial">Oficial</ion-select-option>
                   <ion-select-option value="Pessoal">Pessoal</ion-select-option>
                 </ion-select>
+
+
+                <mat-form-field  class="d-none d-md-block width-100" placeholder="Selecione agenda">
+                  <mat-select [(value)]="eventProcess.workflowInstanceDataFields.Agenda" >
+                    <mat-option value="Oficial">
+                      Oficial
+                    </mat-option>
+                    <mat-option value="Pessoal">
+                      Pessoal
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
               </div>
             </div>
           </div>
@@ -79,8 +95,9 @@
               </div>
               <div class="ion-input-class width-100">
                 <ion-datetime 
+                  class="d-block d-md-none"
                   placeholder="Início"
-                  [(ngModel)]="eventProcess.workflowInstanceDataFields.StartDate"
+                  [(ngModel)]="dateControlEnd"
                   displayFormat="D MMM YYYY H:mm"
                   minuteValues="0,15,30,45"
                   monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
@@ -88,7 +105,24 @@
                   max="2022" 
                 >
                 </ion-datetime>
-                <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+
+                <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+                  <input matInput [ngxMatDatetimePicker]="picker1" 
+                    placeholder="Choose a date" 
+                    [formControl]="dateControlStart"
+                    [min]="minDate" [max]="maxDate" 
+                    [disabled]="disabled"
+                  >
+                  <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+                  <ngx-mat-datetime-picker #picker1 
+                    [showSpinners]="showSpinners" 
+                    [showSeconds]="showSeconds"
+                    [stepHour]="stepHour" [stepMinute]="stepMinute" 
+                    [stepSecond]="stepSecond"
+                    [touchUi]="touchUi"
+                    [color]="color">
+                  </ngx-mat-datetime-picker>
+                </mat-form-field>
               </div>
             </div>
           </div>
@@ -100,6 +134,7 @@
               </div>
               <div class="ion-input-class">
                 <ion-datetime 
+                  class="d-none d-md-none"
                   placeholder="Fim"
                   [(ngModel)]="eventProcess.workflowInstanceDataFields.EndDate"
                   displayFormat="D MMM YYYY H:mm"
@@ -109,7 +144,25 @@
                   max="2022" 
                 >
                 </ion-datetime>
-                <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+
+                <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+                  <input matInput [ngxMatDatetimePicker]="fim" 
+                    placeholder="Choose a date" 
+                    [formControl]="dateControlEnd"
+                    [min]="minDate" [max]="maxDate" 
+                    [disabled]="disabled"
+                  >
+                  <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
+                  <ngx-mat-datetime-picker #fim 
+                    [showSpinners]="showSpinners" 
+                    [showSeconds]="showSeconds"
+                    [stepHour]="stepHour" [stepMinute]="stepMinute" 
+                    [stepSecond]="stepSecond"
+                    [touchUi]="touchUi"
+                    [color]="color">
+                  </ngx-mat-datetime-picker>
+                </mat-form-field>
+
               </div>
             </div>
           </div>
diff --git a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.ts b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.ts
index 7d3af5bea..9df6c755f 100644
--- a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.ts
+++ b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { AlertController, AnimationController, ModalController, NavParams } from '@ionic/angular';
+import * as moment from 'moment';
 import { Attachment } from 'src/app/models/attachment.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { SearchDocument } from 'src/app/models/search-document';
@@ -9,9 +11,7 @@ import { AttachmentsService } from 'src/app/services/attachments.service';
 import { EventsService } from 'src/app/services/events.service';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { ToastService } from 'src/app/services/toast.service';
-import { Event, EventToApproveEdit } from '../../../models/event.model';
-import { BadRequestPage } from '../../popover/bad-request/bad-request.page';
-import { SuccessMessagePage} from '../../popover/success-message/success-message.page';
+import { Event } from '../../../models/event.model';
 
 @Component({
   selector: 'app-edit-event',
@@ -20,6 +20,36 @@ import { SuccessMessagePage} from '../../popover/success-message/success-message
 })
 export class EditEventToApproveComponent implements OnInit {
 
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate: any;
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
+
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+
+  showLoader = false
+
+  get dateStart () {
+    return this.dateControlStart.value
+  }
+
+  get dateEnd () {
+    return this.dateControlEnd.value
+  }
+
+  @ViewChild('picker') picker: any;
+  @ViewChild('fim') fim: any;
+  @ViewChild('inicio') inicio: any;
+  @ViewChild('picker1') picker1: any;
+  
   serialNumber: string
   loadedAttachments: Attachment[]= []
 
@@ -44,76 +74,6 @@ export class EditEventToApproveComponent implements OnInit {
     }
   }
 
-  // event ={
-  //   "serialNumber":"9073_118",
-  //   "originator":{
-  //     "email":"gilson.manuel@gabinetedigital.local",
-  //     "manager":"",
-  //     "displayName":"",
-  //     "fqn":"K2:GABINETEDIGITAL\\gilson.manuel",
-  //     "username":"GABINETEDIGITAL\\gilson.manuel"
-  //   },
-  //   "actions":null,
-  //   "workflowInstanceFolio":"Final do sprint",
-  //   "taskStartDate":"4/30/2021 9:06:48 AM",
-  //   "workflowID":4365,
-  //   "workflowInstanceID":9073,
-  //   "workflowName":"MDGPR\\Agenda Oficial MDGPR",
-  //   "workflowDisplayName":"Agenda Oficial MDGPR",
-  //   "formURL":"http://bpmdev.gabinetedigital.local/Runtime/Runtime/Form/Exchange+Calendar+Meeting+Approval/?SerialNo=9073_118",
-  //   "workflowInstanceDataFields": {
-  //     "Body":"Ser&aacute; fechado o sprint 1 - 26 Abr - 30 Abr",
-  //     "Location":"Equilibrium - Sala de reuniões",
-  //     "Subject":"Final do sprint",
-  //     "StartDate":"2021-04-30T15:00:00",
-  //     "EndDate":"2021-04-30T15:30:00",
-  //     "Participants":"gilson.manuel@gabinetedigital.local;tiago.kayaya@gabinetedigital.local;solange.vandunem@gabinetedigital.local",
-  //     "CC":"",
-  //     "ReviewUserComment":"teste",
-  //     "Role":0,
-  //     "MDName":"Paulo Pinto",
-  //     "MDEmail":"paulo.pinto@gabinetedigital.local",
-  //     "PREmail":"",
-  //     "OriginatorComments":"",
-  //     "Status":"Active",
-  //     "TimeZone":"W. Central Africa Standard Time",
-  //     "Agenda":"Oficial",
-  //     "EventType":"Reunião",
-  //     "EventID":"",
-  //     "IsRecurring":false,
-  //     "ParticipantsList":[
-  //       {
-  //         "$type":null,
-  //         "EmailAddress":"gilson.manuel@gabinetedigital.local",
-  //         "Name":"Gilson Manuel",
-  //         "IsRequired":true
-  //       },
-  //       {
-  //         "$type":null,
-  //         "EmailAddress":"tiago.kayaya@gabinetedigital.local",
-  //         "Name":"Tiago Kayaya",
-  //         "IsRequired":true
-  //       },
-  //       {
-  //         "$type":null,
-  //         "EmailAddress":"solange.vandunem@gabinetedigital.local",
-  //         "Name":"Solange Van-Dúnem",
-  //         "IsRequired":true
-  //       }
-  //     ],
-  //     "EventOrganizer":"{\"$type\":\"Gabinete.k2RESTidentifier_EventPerson, Gabinete, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"EmailAddress\":\"agenda.mdgpr@gabinetedigital.local\",\"Name\":\"Agenda do Ministro e Director do Gabinete do PR\",\"IsRequired\":true}",
-  //     "CreateEvent":"",
-  //     "IsAllDayEvent":false,
-  //     "SerializedItem":"{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData[], GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"$values\":[{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData, GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"Service\":\"gabinete-digital\",\"Object\":\"event-list\",\"idObject\":\"9073_118\"}]}",
-  //     "MDwxUserID":261,
-  //     "DeserializedItem":"{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData, GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"Service\":\"gabinete-digital\",\"Object\":\"event-list\",\"idObject\":\"9073_118\"}",
-  //     "Message":"Foi actualizado o",
-  //     "InstanceId":"R0RfR0FCSU5FVEVESUdJVEFMXGdpbHNvbi5tYW51ZWxfMjAyMS0wNC0zMCAwODowNDoyN1o=",
-  //     "For Each Result":"",
-  //     "For Each Index":0
-  //   }
-  // }
-
   show = false
 
   postEvent: Event;
@@ -146,20 +106,23 @@ export class EditEventToApproveComponent implements OnInit {
   ) {
 
     this.serialNumber = this.navParams.get('serialNumber');
-    // this.profile = this.navParams.get('profile');
 
     this.isEventEdited = false;
 
-
     this.getTask()
 
+    this.dateControlStart = new FormControl(moment(new Date()));
+    this.dateControlEnd = new FormControl(moment(new Date()));
+
   }
 
   async getTask() {
     console.log('this.eventProcess', this.eventProcess);
 
     const result = await this.processes.GetTask(this.serialNumber).subscribe( result =>{
-      this.eventProcess = result
+    this.eventProcess = result
+      
+    this.restoreDatepickerData()
   
       console.log(this.eventProcess.workflowInstanceDataFields.Subject)
       
@@ -170,22 +133,6 @@ export class EditEventToApproveComponent implements OnInit {
 
       this.InstanceId = this.eventProcess.workflowInstanceDataFields.InstanceId
       this.getAttachments()
-
-
-      // attendees
-      //this.eventProcess.workflowInstanceDataFields.ParticipantsList
-      // subject
-      //this.eventProcess.workflowInstanceDataFields.Subject |  this.eventProcess.workflowInstanceFolio
-      // location
-      //this.eventProcess.workflowInstanceDataFields.Location
-      // startDate
-      //this.eventProcess.taskStartDate
-      // endDate
-      //this.eventProcess.workflowInstanceDataFields.EndDate
-  
-      //  this.eventProcess.workflowInstanceDataFields.Agenda
-  
-      // eventProcess.workflowInstanceDataFields.IsRecurring
   
       if(this.eventProcess.workflowInstanceDataFields.IsRecurring == false) {
         this.isRecurring = "Não se repete";
@@ -202,18 +149,12 @@ export class EditEventToApproveComponent implements OnInit {
         }
       })
     })
+
+
   }
 
   ngOnInit() {
     
-    
-    window.onresize = (event) => {
-      // if not mobile remove all component
-      if( window.innerWidth >= 800){
-        this.modalController.dismiss();
-      }
-    };
-    
   }
   
   close() {
@@ -221,6 +162,8 @@ export class EditEventToApproveComponent implements OnInit {
   }
 
   save() {  
+    // set dates to eventProcess object
+    this.getDatepickerData()
 
     this.taskParticipantsCc.forEach(e=>{
       e.IsRequired = false
@@ -325,7 +268,7 @@ export class EditEventToApproveComponent implements OnInit {
     this.postEvent.Attendees = data;
   }
   
-  setIntervenientCC(data){
+  setIntervenientCC(data) {
     this.taskParticipantsCc = data;
   }
 
@@ -362,9 +305,7 @@ export class EditEventToApproveComponent implements OnInit {
 
   deleteAttachment(attachment: Attachment, index) {
 
-    console.log('index', index)
     this.loadedAttachments[index]['action'] = 'delete'
-
   }
 
   async getDoc() {
@@ -411,4 +352,18 @@ export class EditEventToApproveComponent implements OnInit {
     });
   }
 
+  restoreDatepickerData() {
+
+    this.dateControlStart = new FormControl(moment(new Date(this.eventProcess.workflowInstanceDataFields.StartDate)));
+    this.dateControlEnd = new FormControl(moment(new Date(this.eventProcess.workflowInstanceDataFields.EndDate)));
+    
+  }
+
+  getDatepickerData() {
+
+    this.eventProcess.workflowInstanceDataFields.StartDate = this.dateStart
+    this.eventProcess.workflowInstanceDataFields.EndDate = this.dateEnd
+  
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/shared/header/header.page.ts b/src/app/shared/header/header.page.ts
index d3eab0f65..33ccdb0d5 100644
--- a/src/app/shared/header/header.page.ts
+++ b/src/app/shared/header/header.page.ts
@@ -44,7 +44,7 @@ export class HeaderPage implements OnInit {
       classs = 'modal modal-width-100 modal-padding-top'
       showSearchInput = true
     } else {
-      classs = 'modal modal-width-100 modal-padding-top modal-desktop-shadow modal-desktop-remove-background'
+      classs = 'modal modal-desktop desktop-search'
       showSearchInput = false
     }
 
diff --git a/src/global.scss b/src/global.scss
index e573588a7..4e012ae94 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -363,6 +363,20 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 }
 
 
+.desktop-search {
+    padding-top: 0px !important;
+    margin-top: 80px !important;
+    position: relative !important;
+
+    ion-backdrop {
+        display: none !important;
+    }
+    // margin-top: 86px;
+    .model-wrapper {
+
+    }
+}
+
 .notification-modal {
     ion-backdrop {
         display: none;
@@ -401,23 +415,24 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 .modal-width-100-width-background, .modal-desktop {
     padding-top: 76px;
-    .modal-wrapper{
+    .modal-wrapper {
         width: 100%  !important;
         height: 99%  !important;
         position: relative;
     }
 }
 
-.modal-padding-top{
-    .modal-wrapper{
-        height: 99%;
-        top: 2%;
-        position: relative;
+.modal-padding-top {
+    margin-top: 87px;
+    .modal-wrapper {
+        // height: 99%;
+        // top: 2%;
+        // position: relative;
     }
 }
 
 .modal-top-100-width-background, .modal-desktop {
-    .modal-wrapper{
+    .modal-wrapper {
         width: 100%;
         height: 99%;
         position: relative;
@@ -874,4 +889,54 @@ background: rgb(92, 92, 92);
 
 .modal {
     display: flex !important;
-    }
\ No newline at end of file
+}
+
+// calendar
+.mat-calendar-body-selected {
+    background-color: #42b9fe !important;
+}
+
+// select background
+// .mat-primary .mat-option.mat-selected:not(.mat-option-disabled), .mat-option-ripple {
+//     background-color: #fafafa !important;
+// }
+
+.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: #42b9fe36 !important;
+}
+
+.mat-form-field-underline.ng-tns-c193-6.ng-star-inserted, .mat-form-field-underline {
+    display: none;
+}
+
+.date-hour-picker {
+    margin-top: -6px;
+
+    label#mat-form-field-label-7 {
+      // display: none;
+    }
+
+    .span.ng-tns-c193-4, .ng-star-inserted {
+      // display: none;
+    }
+  
+    .ng-star-inserted{
+      // display: none;
+      position: absolute;
+      width: 447px;
+      height: 43px;
+      opacity: 0;
+      button {
+        width: 100%;
+        height: 100%;
+      }
+    }
+}
+
+.mat-active span {
+    color: #0d89d1 !important;
+}
+
+// .ng-star-inserted {
+//     opacity: 0;
+// }
\ No newline at end of file