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/modals/create-process/create-process.page.html b/src/app/modals/create-process/create-process.page.html
index c5472c9d1..b3ce63c3f 100644
--- a/src/app/modals/create-process/create-process.page.html
+++ b/src/app/modals/create-process/create-process.page.html
@@ -29,14 +29,14 @@
             </div>
             <div class="ion-input-class">
 
-              <ion-select class="d-block" 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" placeholder="Sample Type" required>
+              <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
@@ -51,8 +51,7 @@
                     Encontro
                   </mat-option>
                 </mat-select>
-              </mat-form-field> -->
-
+              </mat-form-field>
 
             </div>
           </div>
@@ -63,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 1546c27c7..2aed50f40 100644
--- a/src/app/modals/create-process/create-process.page.ts
+++ b/src/app/modals/create-process/create-process.page.ts
@@ -15,11 +15,30 @@ 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[] = [
@@ -58,6 +77,9 @@ export class CreateProcessPage implements OnInit {
 
   loggeduser: User;
 
+  toppings = new FormControl();
+
+  toppingList: string[] = ['Economia', 'Saúde', 'Educação', 'Finanças', 'Agricultura'];
 
   constructor(
     private modalController: ModalController,
@@ -91,7 +113,6 @@ export class CreateProcessPage implements OnInit {
         DeadlineType: '',
         SubjectTypes: this.selectedTypes,
         NumberPDPP: this.task.workflowInstanceDataFields.DispatchNumber,
-
       };
       
       this.postData.DispatchFolder = this.dispatchFolder;
@@ -117,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){
@@ -129,7 +149,7 @@ export class CreateProcessPage implements OnInit {
     }
   }
 
-  close(){
+  close() {
     //this.router.navigate(['/home/gabinete-digital/expediente']);
     this.modalController.dismiss(null);
   }
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 66a6e0db4..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
@@ -15,9 +15,11 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
 
 import { MatNativeDateModule } from '@angular/material/core';
 import {
+  NgxMatDateFormats,
   NgxMatDatetimePickerModule,
   NgxMatNativeDateModule,
-  NgxMatTimepickerModule
+  NgxMatTimepickerModule,
+  NGX_MAT_DATE_FORMATS
 } from '@angular-material-components/datetime-picker';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -28,6 +30,17 @@ 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,
@@ -51,6 +64,7 @@ import { MatInputModule } from '@angular/material/input';
     ReactiveFormsModule
   ],
   providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
     { provide: MAT_DATE_LOCALE, useValue: 'pt' },
   ],
   declarations: [
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 ba0ac9f1f..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,14 +28,21 @@
               <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" placeholder="Sample Type" required>
+              <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">
@@ -62,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 a1f65ca3c..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,
@@ -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/shared/agenda/new-event/new-event.module.ts b/src/app/shared/agenda/new-event/new-event.module.ts
index 7e8799db7..c35cd2c00 100644
--- a/src/app/shared/agenda/new-event/new-event.module.ts
+++ b/src/app/shared/agenda/new-event/new-event.module.ts
@@ -50,7 +50,7 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
 
     NgxMatMomentModule,
     // BrowserAnimationsModule,
-    // BrowserModule,
+    // MatRadioModule,
     MatSelectModule,
     //MatRadioModule,
     //MatCheckboxModule,
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 384d75d50..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
@@ -11,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',
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 2ccb95bf0..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;
@@ -897,7 +912,7 @@ background: rgb(92, 92, 92);
 .date-hour-picker {
     margin-top: -6px;
 
-    label#mat-form-field-label-7{
+    label#mat-form-field-label-7 {
       // display: none;
     }