diff --git a/angular.json b/angular.json
index dd47c6e5c..b74013d06 100644
--- a/angular.json
+++ b/angular.json
@@ -32,6 +32,7 @@
               }
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               {
                 "input": "src/theme/variables.scss",
                 "inject": true
@@ -99,7 +100,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "styles": [],
+            "styles": [ "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"],
             "scripts": [],
             "assets": [
               {
diff --git a/package-lock.json b/package-lock.json
index 3ee0e6dba..47db26207 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -773,6 +773,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/material-moment-adapter": {
+      "version": "12.0.5",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.0.5.tgz",
+      "integrity": "sha512-m09k/hCwyZxUEyg3NwSHbe0JNekSPjW86o9C6nRQkYqeAq/AUVy266U8CY3vyM8LDNsc16lsYsueLdZ421Th9A==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.2.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.2.tgz",
@@ -19084,7 +19092,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 8df7c75a6..f9e985206 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@angular/forms": "~11.2.2",
     "@angular/localize": "^11.2.2",
     "@angular/material": "^11.2.13",
+    "@angular/material-moment-adapter": "^12.0.5",
     "@angular/platform-browser": "~11.2.2",
     "@angular/platform-browser-dynamic": "~11.2.2",
     "@angular/router": "~11.2.2",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 25ff2e4e9..448d710e0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -30,8 +30,7 @@ import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform
 import { MessagesPage } from './pages/chat/messages/messages.page';
 import { WebsocketService } from './services/websocket.service'
 import { ChatService } from './services/chat.service';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-
+import {MatDatepickerModule} from '@angular/material/datepicker';
 // import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
 
 
@@ -49,8 +48,9 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
     IonicStorageModule.forRoot(),
     AppRoutingModule, 
     HttpClientModule, 
-    NgbModule, 
+    // NgbModule, 
     NoopAnimationsModule,
+    MatDatepickerModule
     ],
   providers: [
     StatusBar,
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index fcd5db9c4..73529fa67 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -283,7 +283,7 @@ export class AgendaPage implements OnInit {
     this.rangeStartDate = ev.startTime;
     this.rangeEndDate = ev.endTime;
 
-    //this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
   }
 
   // for calendar
diff --git a/src/app/pages/agenda/new-event/new-event.module.ts b/src/app/pages/agenda/new-event/new-event.module.ts
index ca58ef372..f83298b68 100644
--- a/src/app/pages/agenda/new-event/new-event.module.ts
+++ b/src/app/pages/agenda/new-event/new-event.module.ts
@@ -16,7 +16,7 @@ import { NgbDate, NgbModule } from '@ng-bootstrap/ng-bootstrap';
     FormsModule,
     IonicModule,
     NewEventPageRoutingModule,
-    NgbModule,
+    // NgbModule,
   ],
   declarations: [NewEventPage]
 })
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.ts b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.ts
index f3bef7308..a7aec3fe0 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.ts
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.ts
@@ -442,51 +442,4 @@ export class ExpedientePrPage implements OnInit {
     return await popover.present();
   }
 
-
-
-  async badRequest(message?: string, callback?) {
-    const enterAnimation = (baseEl: any) => {
-      const backdropAnimation = this.animationController.create()
-        .addElement(baseEl.querySelector('ion-backdrop')!)
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-      const wrapperAnimation = this.animationController.create()
-        .addElement(baseEl.querySelector('.modal-wrapper')!)
-        .keyframes([
-          { offset: 0, opacity: '1', right: '-100%' },
-          { offset: 1, opacity: '1', right: '0px' }
-        ]);
-
-      return this.animationController.create()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
-
-    const leaveAnimation = (baseEl: any) => {
-      return enterAnimation(baseEl).direction('reverse');
-    }
- 
-
-    const modal = await this.modalController.create({
-      enterAnimation,
-      leaveAnimation,
-      component: BadRequestPage,
-       componentProps: {
-        message: message || 'Processo efetuado' ,
-      },
-      cssClass: 'notification-modal'
-    });
-
-    modal.present()
-    
-    setTimeout(()=>{
-      modal.dismiss()
-    },1000)
-  }
-  
-  
-
-
 }
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 e947f2181..89c5a6bd2 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.ts
+++ b/src/app/pages/gabinete-digital/pedidos/pedido/pedido.page.ts
@@ -171,7 +171,6 @@ export class PedidoPage implements OnInit {
     this.modalController.dismiss();
   }
 
-
   async openOptions(taskAction?: any) {
     const popover = await this.popoverController.create({
       component: RequestOptionsPage,
@@ -187,7 +186,6 @@ export class PedidoPage implements OnInit {
     return await popover.present();
   }
 
-
   async repreciar(note:string, documents:any) {
     let body = { 
       "serialNumber": this.serialnumber, 
@@ -207,7 +205,6 @@ export class PedidoPage implements OnInit {
       this.toastService.badRequest()
     }
 
-
   }
   
   async arquivar(note:string, documents:any) {
@@ -229,8 +226,6 @@ export class PedidoPage implements OnInit {
       this.toastService.badRequest()
     }
 
-
-
   }
 
   sendExpedienteToPending(){
@@ -420,49 +415,4 @@ export class PedidoPage implements OnInit {
 
   }
   
-
-
-  async badRequest(message?: string, callback?) {
-    const enterAnimation = (baseEl: any) => {
-      const backdropAnimation = this.animationController.create()
-        .addElement(baseEl.querySelector('ion-backdrop')!)
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-      const wrapperAnimation = this.animationController.create()
-        .addElement(baseEl.querySelector('.modal-wrapper')!)
-        .keyframes([
-          { offset: 0, opacity: '1', right: '-100%' },
-          { offset: 1, opacity: '1', right: '0px' }
-        ]);
-
-      return this.animationController.create()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
-
-    const leaveAnimation = (baseEl: any) => {
-      return enterAnimation(baseEl).direction('reverse');
-    }
- 
-
-    const modal = await this.modalController.create({
-      enterAnimation,
-      leaveAnimation,
-      component: BadRequestPage,
-       componentProps: {
-        message: message || 'Processo efetuado' ,
-      },
-      cssClass: 'notification-modal'
-    });
-
-    modal.present()
-    
-    setTimeout(()=>{
-      modal.dismiss()
-    },1000)
-  }
-  
-
 }
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 ba28aebfa..1593adaa3 100644
--- a/src/app/shared/agenda/new-event/new-event.module.ts
+++ b/src/app/shared/agenda/new-event/new-event.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgControl } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -8,13 +8,24 @@ import { NewEventPageRoutingModule } from './new-event-routing.module';
 
 import { NewEventPage } from './new-event.page';
 import { NgbModule  } from '@ng-bootstrap/ng-bootstrap';
+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";
+
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     NewEventPageRoutingModule,
-    NgbModule, //
+    NgbModule,
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    
   ],
   declarations: [NewEventPage],
   exports: [NewEventPage]
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 0bfdb186d..68a15843a 100644
--- a/src/app/shared/agenda/new-event/new-event.page.html
+++ b/src/app/shared/agenda/new-event/new-event.page.html
@@ -13,20 +13,22 @@
 <ion-content>
   <div class="main-content">
 
-    <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"/>
+    <!-- <mat-form-field appearance="fill">
+      <mat-label>Choose a date</mat-label>
+      <input matInput [matDatepicker]="picker2">
+      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+      <mat-datepicker #picker2></mat-datepicker>
+    </mat-form-field> -->
+
+    
+    <!-- <mat-form-field appearance="fill">
+      <mat-label>Angular forms</mat-label>
+      <input matInput [matDatepicker]="picker1" [formControl]="date">
+      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+      <mat-datepicker #picker1></mat-datepicker>
+    </mat-form-field> -->
+
 
     <div class="ion-item-container">
       <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
@@ -91,6 +93,7 @@
         </div>
         <div class="ion-input-class flex-grow-1">
           <ion-datetime 
+            class="d-md-none"
             placeholder="Início"
             [(ngModel)]="postEvent.StartDate"
             displayFormat="D MMM YYYY H:mm"
@@ -100,6 +103,18 @@
             max="2022" 
           >
           </ion-datetime>
+
+          <input 
+            class="d-none d-md-block 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>
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 b92bbb3f5..b1c89ccf9 100644
--- a/src/app/shared/agenda/new-event/new-event.page.ts
+++ b/src/app/shared/agenda/new-event/new-event.page.ts
@@ -16,11 +16,46 @@ 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 * as _moment from 'moment';
+import * as _rollupMoment from 'moment';
+import {FormControl} from '@angular/forms';
+
+
+const moment = _rollupMoment || _moment;
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'LL',
+  },
+  display: {
+    dateInput: 'LL',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
 @Component({
   selector: 'app-new-event',
   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: MAT_DATE_FORMATS, useValue: MY_FORMATS},
+  ]
 })
+
+
 export class NewEventPage implements OnInit {
 
 
@@ -49,6 +84,9 @@ export class NewEventPage implements OnInit {
 
   loggeduser: User;
 
+  date = new FormControl(moment());
+  // serializedDate = new FormControl((new Date()).toISOString());
+
   constructor(
     private modalController: ModalController,
     private eventService: EventsService, 
diff --git a/src/app/shared/popover/request-options/request-options.page.ts b/src/app/shared/popover/request-options/request-options.page.ts
index f071413ce..22fa70a3e 100644
--- a/src/app/shared/popover/request-options/request-options.page.ts
+++ b/src/app/shared/popover/request-options/request-options.page.ts
@@ -9,9 +9,6 @@ import { BookMeetingModalPage } from 'src/app/pages/gabinete-digital/expediente/
 import { ExpedientTaskModalPage } from 'src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page';
 import { ProcessesService } from 'src/app/services/processes.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';
-
 
 @Component({
   selector: 'app-request-options',
@@ -45,7 +42,6 @@ export class RequestOptionsPage implements OnInit {
       }
     });
 
-    
 
     this.showEnviarPendentes = this.navParams.get('showEnviarPendentes');
 
@@ -243,7 +239,7 @@ export class RequestOptionsPage implements OnInit {
   }
 
   async openDarParecer(task: any) {
-    console.log(task);
+    // console.log(task);
     
     let classs;
     if( window.innerWidth <= 800){
@@ -265,7 +261,7 @@ export class RequestOptionsPage implements OnInit {
   }
 
   async openDelegarModal(task: any) {
-    console.log(task);
+    // console.log(task);
     
     let classs;
     if( window.innerWidth <= 800){
diff --git a/src/global.scss b/src/global.scss
index 4220f3260..759ad62ff 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -579,7 +579,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 .calendar-component {
     td {
-        padding: 8px !important;
+        padding: 7px !important;
         div {
             padding-left: 0px;
         }
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 06085d0ce..a9d800520 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -1,3 +1,38 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$app-primary: mat-palette($mat-indigo);
+$app-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$app-warn: mat-palette($mat-red);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$app-theme: mat-light-theme((
+  color: (
+    primary: $app-primary,
+    accent: $app-accent,
+    warn: $app-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($app-theme);
+
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/