diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html
index 6e4e0934e..a3ec257fe 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expediente-pr/expediente-pr.page.html
@@ -1,42 +1,7 @@
 <ion-header class="ion-no-border">
-  <app-header></app-header>
+  <app-header > </app-header>
 </ion-header>
 
-<ion-menu autoHide="false" side="end" content-id="main-content">
-  <ion-header>
-    <ion-toolbar translucent>
-      <ion-title>Menu</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content>
-    <ion-list>
-      <ion-item (click)="openExpedientActionsModal('0', fulltask)">
-        <ion-icon name="documents" slot="start"></ion-icon>
-        <ion-label>Efectuar Despacho</ion-label>
-      </ion-item>
-      <ion-item (click)="openExpedientActionsModal('1', fulltask)">
-        <ion-icon name="arrow-undo" slot="start"></ion-icon>
-        <ion-label>Pedido de Parecer</ion-label>
-      </ion-item>
-      <ion-item (click)="openExpedientActionsModal('2', fulltask)">
-        <ion-icon name="arrow-redo" slot="start"></ion-icon>
-        <ion-label>Pedido de Deferimento</ion-label>
-      </ion-item>
-      <ion-item (click)="openBookMeetingModal(fulltask)">
-        <ion-icon name="calendar" slot="start"></ion-icon>
-        <ion-label>Marcar reunião</ion-label>
-      </ion-item>
-      <ion-item (click)="discartExpedient()">
-        <ion-icon name="trash" slot="start"></ion-icon>
-        <ion-label>Descartar</ion-label>
-      </ion-item>
-      <ion-item hidden disabled>
-        <ion-icon name="paper-plane" slot="start"></ion-icon>
-        <ion-label>Enviar para pendentes</ion-label>
-      </ion-item>
-    </ion-list>
-  </ion-content>
-</ion-menu>
 <div class="ion-page d-none" id="main-content">
   <ion-menu-button></ion-menu-button>
 </div>
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.module.ts b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.module.ts
index e06195279..2d090c8db 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.module.ts
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { ExpedientesPrPageRoutingModule } from './expedientes-pr-routing.module';
 
 import { ExpedientesPrPage } from './expedientes-pr.page';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    ExpedientesPrPageRoutingModule
+    ExpedientesPrPageRoutingModule,
+    SharedModule
   ],
   declarations: [ExpedientesPrPage]
 })
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html
index a61069f8d..e98ef53f4 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html
@@ -1,9 +1,80 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>expedientes-pr</ion-title>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <app-header > </app-header>
 </ion-header>
 
+<ion-header class="ion-no-border header-2">
+  <div class="title">
+    <div class="thetitle"><ion-label >Expediente</ion-label></div>
+    <div class="theicon">
+      <button class="btn-no-color" (click)="doRefresh()">
+        <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
+      </button>
+    </div>
+  </div>
+</ion-header>
 <ion-content>
 
+  <div class="main-content">
+          
+    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+    
+    <div class="width-100" *ngIf="taskslist">
+      <ion-list>
+        <ion-item 
+            class="expediente ion-no-padding cursor-pointer"  
+            *ngFor = "let task of taskslist"
+            (click)="goToExpediente(task.SerialNumber)"
+            >
+              <div class="item width-100">
+                <div class="exp-top-detail">
+                  <div class="exp-date">
+                    <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                  </div>
+                  <div class="exp-remetente">
+                    <ion-label>{{task.Remetente}}</ion-label>
+                  </div>
+                  <div class="exp-icon">
+                    <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                    <label></label>
+                  </div>
+                </div>
+                <div class="exp-bottom-detail">
+                  <ion-label>{{ task.Folio }}</ion-label>
+                </div>
+              </div>
+            </ion-item>
+      </ion-list>
+    </div>
+    <div *ngIf="!taskslist">
+    
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="end">
+            <ion-skeleton-text animated></ion-skeleton-text>
+          </ion-thumbnail>
+          <ion-label>
+            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="end">
+            <ion-skeleton-text animated></ion-skeleton-text>
+          </ion-thumbnail>
+          <ion-label>
+            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+  </div>
+
 </ion-content>
+
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
index e69de29bb..56977da40 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
@@ -0,0 +1,190 @@
+@import '~src/function.scss';
+/* CONTENT */
+:host{
+    margin: 0;
+}
+
+.header-2 {
+    border-top-right-radius: 24px;
+    border-top-left-radius: 24px;
+}
+
+ion-content, .header-2, .main-content{
+    padding: 30px 20px 0 20px !important;
+    background-color: white;
+}
+.main-content {
+    padding-top: 0px !important;
+}
+  
+.title{
+    font-family: Roboto;
+    font-size: 25px;
+    color:#000;
+    overflow: auto;
+
+    .thetitle{
+      width: fit-content;
+      float: left;
+    }
+    .theicon{
+      width: fit-content;
+      float: right;
+    }
+  }
+.item-list-small{
+    font-size: 11px;
+    overflow: auto;
+  }
+  .ion-item-class{
+    padding: 0;
+  
+  }
+  .label-text{
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+//DIV
+ion-item{
+  --background: none;
+}
+.item {
+    //border-radius: 15px;
+    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    //Sborder: solid 1px #e9e9e9;
+    background-color: var(--white);
+    margin: 0 auto;
+    //padding: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
+.div-content-expediente{
+  width: 100%;
+  float: left;
+  border-left: 3px solid #dae3f3;
+  padding:5px 5px 15px 5px;
+  margin: 10px 0 10px 0;
+  background:  #dae3f3;
+  border-radius: 20px;
+}
+.div-content-pendentes{
+  width: 100%;
+  float: left;
+  border-left: 3px solid #d9d9d9;
+  padding: 5px;
+}
+  .div-content-expediente h3, .div-content-pendentes h3{
+    margin: 0;
+    padding: 0;
+    font-size: 14pt;
+    width: 100%;
+  }
+  .div-icon{
+    width: 10%;
+    font-size: 20px;
+    float: left;
+    color: #808080;
+  }
+  .div-icon ion-icon{
+    display: block;
+    margin: 0 auto;
+  
+  }
+  .div-content-expediente p, .div-content-pendentes p{
+    font-size: 14pt;
+    color: rgb(94, 92, 92);
+    padding: 0;
+    margin: 0;
+  }
+  .span-left{
+      /* border: 1px solid red; */
+      float: left;
+      font-size: 12px;
+      padding-left: 18px;
+  }
+  .span-right{
+    /* border: 1px solid blue; */
+    text-align: right;
+    float: right;
+    font-size: 12px;
+    padding-right: 18px;
+}
+
+/* New CSS */
+.expediente{
+  padding-top: 10px;
+}
+.exp-list-item{
+  //width: 368px;
+  overflow: auto;
+  /* border-bottom: 1px solid gray; */
+  margin: 10px auto;
+}
+.exp-top-detail{
+  width: 100%;
+  overflow: auto;
+}
+.exp-date{
+  width: auto;
+  font-family: Roboto;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #797979;
+  float: left;
+}
+.exp-remetente{
+  //width: 200px;
+  font-family: Roboto;
+  font-size: 13px;
+  font-weight: normal;
+  color: #000000;
+  float: left;
+  margin-left: 16px;
+
+}
+.exp-icon{
+  width: 45px;
+  float: right;
+  font-size: 13px;
+}
+.exp-icon ion-icon{
+  font-size: 25px;
+  color: #42b9fe;
+}
+.exp-bottom-detail{
+  float: left;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0d89d1;
+}
+.div-top-header{
+  width: 400px;
+  margin: 6px auto;
+  background-color: #0782c9;
+  overflow: auto;
+}
+.div-search{
+  font-size: 45px;
+  float: left;
+  margin: 0 0 0 10px
+}
+.div-logo{
+  background: transparent;
+  width: 150px;
+  margin: 2.5px 0 2.5px 71px;
+  float: left;
+}
+.div-logo img{
+  width: 100%;
+}
+.div-profile{
+  font-size: 45px;
+  float: right;
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.ts b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.ts
index 42244bea4..5641144bf 100644
--- a/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.ts
+++ b/src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.ts
@@ -1,4 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { CalendarComponent } from 'ionic2-calendar';
+
+import { DailyWorkTask } from '../../../models/dailyworktask.model';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { formatDate } from '@angular/common';
+import { LoadingService } from 'src/app/services/loading.service';
+import { ModalController, NavParams } from '@ionic/angular';
+import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
+import { AlertService } from 'src/app/services/alert.service';
+import { User } from 'src/app/models/user.model';
+import { AuthService } from 'src/app/services/auth.service';
 
 @Component({
   selector: 'app-expedientes-pr',
@@ -7,9 +19,129 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExpedientesPrPage implements OnInit {
 
-  constructor() { }
+  @ViewChild(CalendarComponent) myCal: CalendarComponent;
+
+  taskslist:DailyWorkTask[];
+  serialNumber:string;
+  showLoader:boolean;
+
+  loggeduser: User;
+  @Output() openExpedientDetail:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private processes:ProcessesService,
+    private modalController: ModalController,
+    private alertService: AlertService,
+    private authService: AuthService,
+    private router: Router, 
+    ) { 
+      this.loggeduser = authService.ValidatedUser;
+    }
 
   ngOnInit() {
+    this.LoadList();
+  }
+
+  notImplemented(){
+    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
+  }
+
+  openExpedientDetailPage(data){
+    console.log(data);
+    this.openExpedientDetail.emit(data);
+  }
+
+  LoadList(){
+    this.showLoader = true;
+    switch (this.loggeduser.Profile) {
+      case 'MDGPR':
+        this.processes.GetTasksList("Expediente do Presidente", false).subscribe(result => {
+          console.log(result);
+          this.taskslist = new Array();
+          let res = result.reverse().filter(data => data.workflowInstanceDataFields.Status == "Active");
+          res.forEach(element => {
+            let date = new Date(element.taskStartDate);
+            date.setMonth(date.getMonth() + 1);
+            let taskDate = date.getFullYear()+"-"+ date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+ ":"+date.getSeconds();
+            let task: DailyWorkTask = {
+              "SerialNumber": element.serialNumber,
+              "Folio": element.workflowInstanceDataFields.Subject,
+              "Senders": element.originator.email,
+              "CreateDate": taskDate,
+              "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
+              "Remetente": element.workflowInstanceDataFields.Remetente,
+              "DocumentsQty": 0,
+              "WorkflowName": element.workflowDisplayName,
+              "activityInstanceName": element.activityInstanceName,
+              }
+              this.taskslist.push(task);
+            });
+          console.log(this.taskslist);
+          this.showLoader = false;
+        });
+        
+        break;
+        case 'PR':
+          this.processes.GetTasksList("Expediente do Presidente", false).subscribe(result => {
+            console.log(result);
+            this.taskslist = new Array();
+            let res = result.reverse().filter(data => data.workflowInstanceDataFields.Status == "Active");
+            res.forEach(element => {
+              let date = new Date(element.taskStartDate);
+              date.setMonth(date.getMonth() + 1);
+              let taskDate = date.getFullYear()+"-"+ date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+ ":"+date.getSeconds();
+              let task: DailyWorkTask = {
+                "SerialNumber": element.serialNumber,
+                "Folio": element.workflowInstanceDataFields.Subject,
+                "Senders": element.originator.email,
+                "CreateDate": taskDate,
+                "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
+                "Remetente": element.workflowInstanceDataFields.Remetente,
+                "DocumentsQty": 0,
+                "WorkflowName": element.workflowDisplayName,
+                "activityInstanceName": element.activityInstanceName,
+                }
+                this.taskslist.push(task);
+              });
+            console.log(this.taskslist);
+            this.showLoader = false;
+          });
+        
+        break;
+    }
+  }
+
+  doRefresh() {
+    this.LoadList();
+    setTimeout(() => {
+    }, 2000);
+  }
+
+  goToExpediente(serialNumber:any){
+    let navigationExtras: NavigationExtras = {
+      queryParams: {
+        "serialNumber": serialNumber,
+        "profile": this.loggeduser.Profile
+      }
+    };
+    this.router.navigate(['/home/gabinete-digital/expedientes-pr/expediente-pr'], navigationExtras);
+  }
+
+  async viewExpedientDetail(serialNumber:any) {
+    const modal = await this.modalController.create({
+      component: ExpedienteDetailPage,
+      componentProps:{
+        enterAnimation: "",
+        serialNumber: serialNumber,
+        profile: this.loggeduser.Profile,
+      },
+      cssClass: 'modal modal-desktop',
+    });
+    await modal.present();
+    modal.onDidDismiss().then((res)=>{
+      console.log('refresh list');
+      this.LoadList();
+    });
   }
 
 }