diff --git a/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.html b/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.html
index 0d581e3f4..88ce83a56 100644
--- a/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.html
+++ b/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.html
@@ -31,37 +31,37 @@
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <div >
         <ion-list>
-          <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
+          <div
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of despachoList; let i = index"
             (click)="goToDespachoPr(task.SerialNumber)"
           >
             <!--  [routerLink]="['/home/gabinete-digital/expediente',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 class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
-                <div class="exp-remetente">
-                  <ion-label>{{task.Senders}}</ion-label>
-                </div>
-                <div class="exp-workflow">
-                  <span class="label">{{task.activityInstanceName}}</span>
-                </div>
-                <div class="exp-icon d-flex align-center">
+                <div class="exp-icon">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label>{{task.DocumentsQty}}</label>
-
-                  <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                    <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  </ion-menu-button> -->
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
               </div>
             </div>
-          </ion-item>
+          </div>
         </ion-list>
   
       </div>
diff --git a/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss b/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss
index 5423337ad..229635992 100644
--- a/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss
+++ b/src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.scss
@@ -133,7 +133,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -141,47 +146,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/pages/gabinete-digital/despachos/despachos.page.html b/src/app/pages/gabinete-digital/despachos/despachos.page.html
index 62d18d4a7..ac64cd09f 100644
--- a/src/app/pages/gabinete-digital/despachos/despachos.page.html
+++ b/src/app/pages/gabinete-digital/despachos/despachos.page.html
@@ -31,37 +31,37 @@
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <div class="height-100">
         <ion-list>
-          <ion-item 
-              class="expediente ion-no-padding cursor-pointer"  
-              *ngFor = "let task of despachoList; let i = index"
-              (click)="GoToDespacho(task.SerialNumber)"
-              >
-              <!--  [routerLink]="['/home/gabinete-digital/expediente',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.Senders}}</ion-label>
-                    </div>
-                    <div class="exp-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
-                    </div>
-                    <div class="exp-icon d-flex align-center">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      <label>{{task.DocumentsQty}}</label>
-
-                      <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                        <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      </ion-menu-button> -->
-                    </div>
-                  </div>
-                  <div class="exp-bottom-detail">
-                    <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
+          <div
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+            *ngFor = "let task of despachoList; let i = index"
+            (click)="GoToDespacho(task.SerialNumber)"
+          >
+            <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+            <div class="item width-100">
+              <div class="exp-top-detail">
+                <div class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
-              </ion-item>
+                <div class="exp-icon">
+                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+                </div>
+              </div>
+              <div class="exp-bottom-detail">
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
+            </div>
+          </div>
         </ion-list>
 
       </div>
diff --git a/src/app/pages/gabinete-digital/despachos/despachos.page.scss b/src/app/pages/gabinete-digital/despachos/despachos.page.scss
index 79f014ac7..f7540efa2 100644
--- a/src/app/pages/gabinete-digital/despachos/despachos.page.scss
+++ b/src/app/pages/gabinete-digital/despachos/despachos.page.scss
@@ -114,7 +114,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -122,47 +127,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
@@ -181,24 +227,11 @@ ion-item{
   margin: 2.5px 0 2.5px 71px;
   float: left;
 }
-.div-logo img {
+.div-logo img{
   width: 100%;
 }
 .div-profile{
   font-size: 45px;
   float: right;
   margin-right: 10px;
-}
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
-    float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html b/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
index 318a5d37f..15c513f23 100644
--- a/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
+++ b/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
@@ -35,8 +35,8 @@
         <ion-list >
           <!-- *ngFor = "let task of parecerList; let i = index"
           (click)="viewExpedientDetail(task.SerialNumber)" -->
-          <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
+          <div
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of diplomasList"
             (click)="goToDiploma(task.SerialNumber)"
           >
@@ -44,25 +44,29 @@
             <!--  [routerLink]="['/home/gabinete-digital/expediente',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-workflow">
-                  <span class="label">{{task.activityInstanceName}}</span>
+                <div class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
                 <div class="exp-icon">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label></label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
               </div>
             </div>
-          </ion-item>
+          </div>
         </ion-list>
       </div>
     </div>
diff --git a/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss b/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
index db8b8f501..c140a006a 100644
--- a/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
@@ -123,52 +123,101 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .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{
-  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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss b/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss
index 027b0d08d..504ce1e1a 100644
--- a/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss
+++ b/src/app/pages/gabinete-digital/diplomas/diplomas.page.scss
@@ -113,7 +113,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -121,47 +126,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.html b/src/app/pages/gabinete-digital/expediente/expediente.page.html
index e4db12aed..52cb939c9 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.html
@@ -1,85 +1,97 @@
 <ion-header class="ion-no-border">
   <app-header></app-header>
 </ion-header>
+
+
+<ion-header class="ion-no-border header-2">
+  <div class="header-content">
+    <div class="header-icon-left">
+      <button class="btn-no-color cursor-pointer" (click)="goBack()">
+        <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+      </button>
+    </div>
+    <div class="header-title">
+      <label>Expediente</label>
+    </div>
+    <div class="btn-refresh">
+      <button class="btn-no-color" (click)="doRefresh($event)">
+        <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
+      </button>
+    </div>
+  </div>
+</ion-header>
+
 <ion-content>
   <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
      <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content d-flex height-100" [ngSwitch]="segment">
-    <div class="content d-flex flex-column width-100">
-      <div class="header-content">
-        <div class="header-icon-left">
-          <button class="btn-no-color cursor-pointer" (click)="goBack()">
-            <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-          </button>
-        </div>
-        <div class="header-title">
-          <label>Expediente</label>
-        </div>
-        <div class="btn-refresh">
-          <button class="btn-no-color" (click)="doRefresh($event)">
-            <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
-          </button>
-        </div>
-    </div>
+  <div class="main-content d-flex height-100" >
+    <div class="content d-flex flex-column width-100 overflow-y-auto px-20">
 
-    <div class="width-100 overflow-y-auto height-100" *ngIf="taskslist">
 
-      <ion-list>
-        <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
-        <div
-            class="expediente cursor-pointer"
+      <div class="width-100 flex-grow-1 " *ngIf="taskslist">
+        <ion-list>
+          <div
+          class="expediente ion-no-padding ion-no-margin cursor-pointer" 
             *ngFor = "let task of taskslist"
             (click)="goToExpediente(task.SerialNumber)"
-            >
-              <div class="item width-100">
-                <div class="exp-top-detail width-100">
-                  <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 class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-        </div>
-      </ion-list>
-    </div>
-    <div *ngIf="skeletonLoader && taskslist.length == 0">
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+          </div>
+        </ion-list>
+      </div>
 
-      <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 *ngIf="skeletonLoader && taskslist.length == 0">
+
+        <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>
   </div>
 </ion-content>
-
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.scss b/src/app/pages/gabinete-digital/expediente/expediente.page.scss
index e015a7eb4..ffae6157b 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.scss
@@ -3,12 +3,19 @@
   background-color: #fff !important;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
+  padding-top: 5px !important;
 }
-.content{
+
+.header-2 {
+  border-top-right-radius: 24px;
+  border-top-left-radius: 24px;
+}
+
+ion-content, .header-2{
   padding: 30px 20px 0 20px !important;
-  margin: 0;
-  float: left;
+  background-color: white;
 }
+
 .header-content{
   margin: 0 !important;
   overflow: auto;
@@ -100,10 +107,15 @@ ion-item{
     padding-right: 18px;
 }
 
+
 /* New CSS */
 .expediente{
-  padding-top: 10px;
-  border-bottom: 1px solid #ebebeb;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -111,46 +123,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
-.exp-top-detail{
-  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: fit-content;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
+.exp-top-detail{
+  width: 100%;
   float: left;
   font-family: Roboto;
-  font-size: 16px;
+  font-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
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 5529b92c6..5a52282c3 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
@@ -28,29 +28,36 @@
     <div class="width-100" >
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <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
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+          *ngFor = "let task of taskslist"
+          (click)="goToExpediente(task.SerialNumber)"
+        >
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-        </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
     </div>
     
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 56977da40..7d537c102 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
@@ -110,10 +110,14 @@ ion-item{
     font-size: 12px;
     padding-right: 18px;
 }
-
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -121,47 +125,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index dc561b98c..74785d8cc 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -8,7 +8,7 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="main-content d-flex height-100">
+  <div class="main-content d-flex height-100 ">
 
       <!-- Aside left -->
       <div class="aside-wrapper d-flex flex-column justify-center width-md-40 flex-grow-1 ">
diff --git a/src/app/pages/gabinete-digital/pedidos/pedidos.page.html b/src/app/pages/gabinete-digital/pedidos/pedidos.page.html
index 9b43aad9d..c103a5ff6 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedidos.page.html
+++ b/src/app/pages/gabinete-digital/pedidos/pedidos.page.html
@@ -42,68 +42,75 @@
         <ion-list *ngSwitchCase="'parecer'">
           <!-- *ngFor = "let task of parecerList; let i = index"
           (click)="viewExpedientDetail(task.SerialNumber)" -->
-          <ion-item 
-              class="expediente ion-no-padding"  
-              *ngFor = "let task of parecerList"
-              (click)="goToPedido(task.SerialNumber)"
-              >
-              <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
-              <!--  [routerLink]="['/home/gabinete-digital/expediente',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-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
-                    </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 
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+            *ngFor = "let task of parecerList"
+            (click)="goToPedido(task.SerialNumber)"
+          >
+            <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
+            <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+            <div class="item width-100">
+              <div class="exp-top-detail">
+                <div class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
-              </ion-item>
+                <div class="exp-icon">
+                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+                </div>
+              </div>
+              <div class="exp-bottom-detail">
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
+            </div>
+          </div>
         </ion-list>
   
       </div>
       <div *ngIf="deferimentoList">
         <ion-list *ngSwitchCase="'deferimento'">
-          <ion-item 
-              class="expediente ion-no-padding"  
-              *ngFor = "let task of deferimentoList"
-              (click)="goToPedido(task.SerialNumber)"
-              >
-              <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
-              <!--  [routerLink]="['/home/gabinete-digital/expediente',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-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
-                    </div>
-                    <div class="exp-icon">
-                      <ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
-                        <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      </ion-menu-button> 
-                    </div>
-                  </div>
-                  <div class="exp-bottom-detail">
-                    <ion-label>{{ task.Folio }}</ion-label>
-                  </div>
+          <div
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+            *ngFor = "let task of deferimentoList"
+            (click)="goToPedido(task.SerialNumber)"
+          >
+            <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
+            <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+            <div class="item width-100">
+              <div class="exp-top-detail">
+                <div class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
-              </ion-item>
+                <div class="exp-icon">
+                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+                </div>
+              </div>
+              <div class="exp-bottom-detail">
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
+            </div>
+          </div>
         </ion-list>
       </div>
     </div>
diff --git a/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss b/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss
index bbfaf0b48..fda425ff4 100644
--- a/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss
+++ b/src/app/pages/gabinete-digital/pedidos/pedidos.page.scss
@@ -50,14 +50,12 @@ ion-item{
   --background: none;
 }
 .item {
-    //border-radius: 15px;
-    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    /* 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: hidden;
+    overflow: auto;
   }
 .div-content-expediente{
   width: 100%;
@@ -98,7 +96,6 @@ ion-item{
     margin: 0;
   }
   .span-left{
-      /* border: 1px solid red; */
       float: left;
       font-size: 12px;
       padding-left: 18px;
@@ -113,7 +110,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -121,47 +123,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/pages/gabinete-digital/pendentes/pendentes.page.html b/src/app/pages/gabinete-digital/pendentes/pendentes.page.html
index 3a62297f8..f5c0b2670 100644
--- a/src/app/pages/gabinete-digital/pendentes/pendentes.page.html
+++ b/src/app/pages/gabinete-digital/pendentes/pendentes.page.html
@@ -34,35 +34,35 @@
       <div >
         <ion-list>
           <div
-              class="expediente ion-no-padding ion-no-margin cursor-pointer"
-              *ngFor = "let task of pendentesList"
-              (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName)"
-              >
-              <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-                <div class="item width-100">
-                  <div class="exp-top-detail">
-                    <div class="subject">
-                      <ion-label>{{ task.Folio }}</ion-label>
-                    </div>
-                    <div class="exp-icon">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                      <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
-                    </div>
-                  </div>
-                  <div class="exp-bottom-detail">
-                    <div class="exp-remetente">
-                      <ion-label>{{task.Senders}}</ion-label>
-                    </div>
-                  </div>
-                  <div class="exp-middle-detail">
-                    <div class="exp-workflow">
-                      <span class="label">{{task.activityInstanceName}}</span>
-                    </div>
-                    <div class="exp-date">
-                      <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
-                    </div>
-                  </div>
+            class="expediente ion-no-padding ion-no-margin cursor-pointer"
+            *ngFor = "let task of pendentesList"
+            (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName)"
+          >
+            <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+            <div class="item width-100">
+              <div class="exp-top-detail">
+                <div class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
+                <div class="exp-icon">
+                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+                </div>
+              </div>
+              <div class="exp-bottom-detail">
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+              </div>
+            </div>
           </div>
         </ion-list>
       </div>
diff --git a/src/app/pages/gabinete-digital/pendentes/pendentes.page.ts b/src/app/pages/gabinete-digital/pendentes/pendentes.page.ts
index 7a97a305c..d60bf49e3 100644
--- a/src/app/pages/gabinete-digital/pendentes/pendentes.page.ts
+++ b/src/app/pages/gabinete-digital/pendentes/pendentes.page.ts
@@ -31,7 +31,7 @@ export class PendentesPage implements OnInit {
     private alertService: AlertService,
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    ){
+    ) {
       this.profile = 'mdgpr';
     }
 
diff --git a/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.html b/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.html
index e91bb1251..c17b1eb16 100644
--- a/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.html
+++ b/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.html
@@ -29,37 +29,37 @@
     <div *ngIf="despachoList.length >= 1"  class=" height-100">
       
       <ion-list>
-        <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
-            *ngFor = "let task of despachoList; let i = index"
-            (click)="goToDespacho(task.SerialNumber)"
-            >
-            <!--  [routerLink]="['/home/gabinete-digital/expediente',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.Senders}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </div>
-                  <div class="exp-icon d-flex align-center">
-                    <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label>{{task.DocumentsQty}}</label>
-  
-                    <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    </ion-menu-button> -->
-                  </div>
-                </div>
-                <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
-                </div>
+        <div 
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"    
+          *ngFor = "let task of despachoList; let i = index"
+          (click)="goToDespacho(task.SerialNumber)"
+        >
+          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-            </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
     </div>
     <div *ngIf="skeletonLoader && despachoList.length == 0">
diff --git a/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss b/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss
index a329d16cc..7b166bc33 100644
--- a/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss
+++ b/src/app/shared/gabinete-digital/despachos-pr/despachos-pr.page.scss
@@ -117,7 +117,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -125,47 +130,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/shared/gabinete-digital/despachos/despachos.page.html b/src/app/shared/gabinete-digital/despachos/despachos.page.html
index baa641108..85e4a3fc3 100644
--- a/src/app/shared/gabinete-digital/despachos/despachos.page.html
+++ b/src/app/shared/gabinete-digital/despachos/despachos.page.html
@@ -25,37 +25,37 @@
     
     <div  *ngIf="despachoList.length >= 0">
       <ion-list part="divo">
-        <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
-            *ngFor = "let task of despachoList; let i = index"
-            (click)="goToDespacho(task.SerialNumber)"
-            >
-            <!--  [routerLink]="['/home/gabinete-digital/expediente',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.Senders}}</ion-label>
-                  </div>
-                  <div class="exp-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </div>
-                  <div class="exp-icon d-flex align-center">
-                    <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    <label>{{task.DocumentsQty}}</label>
-
-                    <!-- <ion-menu-button (click)="docIndex(i)" style="width: 35px; height: 41px;" autoHide="false">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    </ion-menu-button> -->
-                  </div>
-                </div>
-                <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
-                </div>
+        <div
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+          *ngFor = "let task of despachoList; let i = index"
+          (click)="goToDespacho(task.SerialNumber)"
+        >
+          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-            </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
     </div>
 
diff --git a/src/app/shared/gabinete-digital/despachos/despachos.page.scss b/src/app/shared/gabinete-digital/despachos/despachos.page.scss
index 60368b686..233a9605f 100644
--- a/src/app/shared/gabinete-digital/despachos/despachos.page.scss
+++ b/src/app/shared/gabinete-digital/despachos/despachos.page.scss
@@ -98,10 +98,14 @@ ion-item{
     font-size: 12px;
     padding-right: 18px;
 }
-
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -109,47 +113,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
@@ -175,17 +220,4 @@ ion-item{
   font-size: 45px;
   float: right;
   margin-right: 10px;
-}
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
-    float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
 }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
index 36766092e..280d62cdf 100644
--- a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
+++ b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html
@@ -28,34 +28,38 @@
       <ion-list >
         <!-- *ngFor = "let task of parecerList; let i = index"
         (click)="viewExpedientDetail(task.SerialNumber)" -->
-        <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
-            *ngFor = "let task of diplomasList"
-            (click)="goToDiploma(task.SerialNumber)"
-            >
-            <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
-            <!--  [routerLink]="['/home/gabinete-digital/expediente',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-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </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 
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+          *ngFor = "let task of diplomasList"
+          (click)="goToDiploma(task.SerialNumber)"
+        >
+          <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
+          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-            </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
     </div>
 
diff --git a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
index f91d1eccc..d9c23a826 100644
--- a/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
+++ b/src/app/shared/gabinete-digital/diplomas-assinar/diplomas-assinar.page.scss
@@ -107,54 +107,104 @@ ion-item{
     padding-right: 18px;
 }
 
+
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .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{
-  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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/shared/gabinete-digital/diplomas/diplomas.page.html b/src/app/shared/gabinete-digital/diplomas/diplomas.page.html
index 2ff8ee31e..85c347038 100644
--- a/src/app/shared/gabinete-digital/diplomas/diplomas.page.html
+++ b/src/app/shared/gabinete-digital/diplomas/diplomas.page.html
@@ -26,28 +26,32 @@
     <div *ngIf="diplomasList.length >= 1">
       <ion-list *ngSwitchCase="'validar'">
         <ion-item 
-          class="expediente ion-no-padding cursor-pointer"  
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"   
           *ngFor = "let task of diplomasList"
           (click)="goToDiploma(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-workflow">
-                  <span class="label">{{task.activityInstanceName}}</span>
+                <div class="subject">
+                  <ion-label>{{ task.Folio }}</ion-label>
                 </div>
                 <div class="exp-icon">
                   <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label></label>
+                  <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
                 </div>
               </div>
               <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Senders}}</ion-label>
+                </div>
+              </div>
+              <div class="exp-middle-detail">
+                <div class="exp-workflow">
+                  <span class="label">{{task.activityInstanceName}}</span>
+                </div>
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
               </div>
             </div>
         </ion-item>
@@ -56,32 +60,36 @@
     </div>
     <div *ngIf="diplomasList.length >= 1">
       <ion-list *ngSwitchCase="'assinados'">
-        <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
-            *ngFor = "let task of diplomasList"
-            (click)="goToDiploma(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-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </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 
+          class="expediente ion-no-padding ion-no-margin cursor-pointer" 
+          *ngFor = "let task of diplomasList"
+          (click)="goToDiploma(task.SerialNumber)"
+          >
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-        </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
     </div>
 
diff --git a/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss b/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss
index e624d0744..cec62ca66 100644
--- a/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss
+++ b/src/app/shared/gabinete-digital/diplomas/diplomas.page.scss
@@ -98,9 +98,15 @@ ion-item{
     padding-right: 18px;
 }
 
+
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +114,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
index 1a223424a..c797e2124 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
@@ -28,44 +28,44 @@
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
   <!-- </div> --> 
     <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
-      <ion-item 
-        class="item ion-no-padding width-100 cursor-pointer" 
+      <div 
+        class="expediente ion-no-padding ion-no-margin cursor-pointer"  
         *ngFor="let event of eventsMDGPRList"
         (click)="goToEventDetail(event)"
-        >
+      >
         <!-- (click)="openApproveModal(event)" -->
         <div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
-            <div class="approve-event-time">
-                <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
-                <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
-              </div>
-              <div class="approve-event-detail">
-                <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
-                <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
-                <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
-              </div>
+          <div class="approve-event-time">
+            <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
+            <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
+          </div>
+          <div class="approve-event-detail">
+            <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+            <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+            <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+          </div>
         </div>
-      </ion-item>
+      </div>
     </ion-list>
     <ion-list class="width-100" *ngSwitchCase="'PR'">
       <div class="width-100" *ngIf="eventsPRList">
-        <ion-item
-            class=" ion-no-padding width-100 cursor-pointer"
-            *ngFor="let event of eventsPRList"
-            (click)="goToEventDetail(event)"
-            >
-            <div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
-                <div class="approve-event-time">
-                  <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
-                  <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
-                </div>
-                <div class="approve-event-detail">
-                  <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
-                  <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
-                  <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
-                </div>
-              </div>
-        </ion-item>
+        <div
+          class="expediente ion-no-padding ion-no-margin cursor-pointer" 
+          *ngFor="let event of eventsPRList"
+          (click)="goToEventDetail(event)"
+        >
+          <div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
+            <div class="approve-event-time">
+              <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
+              <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
+            </div>
+            <div class="approve-event-detail">
+              <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+              <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+              <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+            </div>
+          </div>
+        </div>
       </div>
     </ion-list>
   </div>
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
index 90987de4b..7f76e1e38 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
@@ -96,4 +96,128 @@
       padding: 0;
     }
 }
-  
\ No newline at end of file
+
+
+/* New CSS */
+.expediente{
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
+}
+.exp-list-item{
+  //width: 368px;
+  overflow: auto;
+  /* border-bottom: 1px solid gray; */
+  margin: 10px auto;
+}
+
+.exp-top-detail{
+  width: 100%;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
+}
+.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/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html
index fd4f7402d..435ceca7c 100644
--- a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html
+++ b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.html
@@ -13,29 +13,36 @@
   <div class="width-100 overflow-y-auto height-100" >
     <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-list *ngIf="taskslist.length >= 1">
-      <ion-item 
-        class="expediente ion-no-padding cursor-pointer"  
+      <div
+        class="expediente ion-no-padding ion-no-margin 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 class="subject">
+              <ion-label>{{ task.Folio }}</ion-label>
             </div>
             <div class="exp-icon">
               <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-              <label></label>
+              <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
             </div>
           </div>
           <div class="exp-bottom-detail">
-            <ion-label>{{ task.Folio }}</ion-label>
+            <div class="exp-remetente">
+              <ion-label>{{task.Senders}}</ion-label>
+            </div>
+          </div>
+          <div class="exp-middle-detail">
+            <div class="exp-workflow">
+              <span class="label">{{task.activityInstanceName}}</span>
+            </div>
+            <div class="exp-date">
+              <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+            </div>
           </div>
         </div>
-      </ion-item>
+      </div>
     </ion-list>
 
     <div *ngIf="skeletonLoader && taskslist.length == 0">
diff --git a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
index cbf52c39c..4f2f62165 100644
--- a/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
+++ b/src/app/shared/gabinete-digital/expedientes-pr/expedientes-pr.page.scss
@@ -100,7 +100,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +113,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.html b/src/app/shared/gabinete-digital/expedients/expedients.page.html
index 2568f63b1..b5cd61ff5 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.html
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.html
@@ -22,29 +22,36 @@
     <div >
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <ion-list *ngIf="taskslist.length >= 1">
-        <ion-item 
-          class="expediente ion-no-padding cursor-pointer"  
+        <div 
+          class="expediente ion-no-padding ion-no-margin 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 class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
               <div class="exp-icon">
                 <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                <label></label>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
               </div>
             </div>
             <div class="exp-bottom-detail">
-              <ion-label>{{ task.Folio }}</ion-label>
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
             </div>
           </div>
-        </ion-item>
+        </div>
       </ion-list>
     </div>
 
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.scss b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
index cbf52c39c..4f2f62165 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.scss
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
@@ -100,7 +100,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +113,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
diff --git a/src/app/shared/gabinete-digital/pedidos/pedidos.page.html b/src/app/shared/gabinete-digital/pedidos/pedidos.page.html
index abd38bcd6..593dbc17a 100644
--- a/src/app/shared/gabinete-digital/pedidos/pedidos.page.html
+++ b/src/app/shared/gabinete-digital/pedidos/pedidos.page.html
@@ -34,68 +34,75 @@
       <ion-list *ngSwitchCase="'parecer'">
         <!-- *ngFor = "let task of parecerList; let i = index"
         (click)="viewExpedientDetail(task.SerialNumber)" -->
-        <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
-            *ngFor = "let task of parecerList"
-            (click)="goToPedido(task.SerialNumber)"
-            >
-            <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
-            <!--  [routerLink]="['/home/gabinete-digital/expediente',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-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </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 
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+          *ngFor = "let task of parecerList"
+          (click)="goToPedido(task.SerialNumber)"
+        >
+          <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
+          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-            </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
 
     </div>
     <div *ngIf="deferimentoList.length >= 1">
       <ion-list *ngSwitchCase="'deferimento'">
-        <ion-item 
-            class="expediente ion-no-padding cursor-pointer"  
-            *ngFor = "let task of deferimentoList"
-            (click)="goToPedido(task.SerialNumber)"
-            >
-            <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
-            <!--  [routerLink]="['/home/gabinete-digital/expediente',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-workflow">
-                    <span class="label">{{task.activityInstanceName}}</span>
-                  </div>
-                  <div class="exp-icon">
-                    <ion-menu-button style="width: 35px; height: 41px;" autoHide="false">
-                      <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                    </ion-menu-button> 
-                  </div>
-                </div>
-                <div class="exp-bottom-detail">
-                  <ion-label>{{ task.Folio }}</ion-label>
-                </div>
+        <div
+          class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+          *ngFor = "let task of deferimentoList"
+          (click)="goToPedido(task.SerialNumber)"
+        >
+          <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
+          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+          <div class="item width-100">
+            <div class="exp-top-detail">
+              <div class="subject">
+                <ion-label>{{ task.Folio }}</ion-label>
               </div>
-            </ion-item>
+              <div class="exp-icon">
+                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+              </div>
+            </div>
+            <div class="exp-bottom-detail">
+              <div class="exp-remetente">
+                <ion-label>{{task.Senders}}</ion-label>
+              </div>
+            </div>
+            <div class="exp-middle-detail">
+              <div class="exp-workflow">
+                <span class="label">{{task.activityInstanceName}}</span>
+              </div>
+              <div class="exp-date">
+                <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+              </div>
+            </div>
+          </div>
+        </div>
       </ion-list>
     </div>
 
diff --git a/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss b/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss
index 58e3a261d..5f7b728e6 100644
--- a/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss
+++ b/src/app/shared/gabinete-digital/pedidos/pedidos.page.scss
@@ -97,10 +97,14 @@ ion-item{
     font-size: 12px;
     padding-right: 18px;
 }
-
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,47 +112,88 @@ ion-item{
   /* 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-size: 12pt;
   font-weight: 700;
   color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
+  width: 100%;
+  overflow: auto;
+
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
+    float: right;
+  }
+}
+.exp-bottom-detail{
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;
@@ -174,17 +219,4 @@ ion-item{
   font-size: 45px;
   float: right;
   margin-right: 10px;
-}
-.exp-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
-    float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
 }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/pendentes/pendentes.page.html b/src/app/shared/gabinete-digital/pendentes/pendentes.page.html
index 895343eb9..701575c67 100644
--- a/src/app/shared/gabinete-digital/pendentes/pendentes.page.html
+++ b/src/app/shared/gabinete-digital/pendentes/pendentes.page.html
@@ -21,33 +21,37 @@
   <div  class="width-100 overflow-y-auto height-100">
     <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-list  *ngIf="pendentesList.length >= 1">
-      <ion-item
+      <div
         class="expediente ion-no-padding cursor-pointer"
         *ngFor = "let task of pendentesList"
         (click)="viewTaskDetails(task.SerialNumber, task.WorkflowName, task)"
-        >
+      >
         <!--  [routerLink]="['/home/gabinete-digital/expediente',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.Senders}}</ion-label>
-              </div>
-              <div class="exp-workflow">
-                <span class="label">{{task.activityInstanceName}}</span>
-              </div>
-              <div class="exp-icon">
-                <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
-              </div>
-            </div>
-            <div class="exp-bottom-detail">
+        <div class="item width-100">
+          <div class="exp-top-detail">
+            <div class="subject">
               <ion-label>{{ task.Folio }}</ion-label>
             </div>
+            <div class="exp-icon">
+              <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+              <label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
+            </div>
+          </div>
+          <div class="exp-bottom-detail">
+            <div class="exp-remetente">
+              <ion-label>{{task.Senders}}</ion-label>
+            </div>
+          </div>
+          <div class="exp-middle-detail">
+            <div class="exp-workflow">
+              <span class="label">{{task.activityInstanceName}}</span>
+            </div>
+            <div class="exp-date">
+              <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+            </div>
+          </div>
         </div>
-      </ion-item>
+      </div>
     </ion-list>
     
     <div 
diff --git a/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss b/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss
index b56456084..7f5b9496b 100644
--- a/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss
+++ b/src/app/shared/gabinete-digital/pendentes/pendentes.page.scss
@@ -100,7 +100,12 @@ ion-item{
 
 /* New CSS */
 .expediente{
-  padding-top: 10px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+  border:1px solid #e9e9e9 !important;
+  background-color: var(--white);
+  margin-bottom: 10px !important;
+  padding: 15px;
 }
 .exp-list-item{
   //width: 368px;
@@ -108,61 +113,88 @@ ion-item{
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
 }
+
 .exp-top-detail{
+  width: 100%;
+  float: left;
+  font-family: Roboto;
+  font-size: 12pt;
+  font-weight: 700;
+  color: #0d89d1;
+  padding-left: 3px;
+
+  .subject{
+    width: 84%;
+    float: left;
+  }
+
+  .exp-icon{
+    width: fit-content;
+    float: right;
+   /* font-size: 13px; */
+    margin: 0 !important;
+    padding: 0 !important;
+
+    ion-icon{
+      font-size: 12pt;
+      color: #42b9fe;
+      float: left;
+    }
+    label{
+      font-size: 10pt;
+    }
+  }
+}
+.exp-middle-detail, .exp-bottom-detail{
+  margin-bottom: 5px;
+
+}
+.exp-middle-detail{
+  font-size: 12pt;
   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-workflow{
-  float: left;
-  margin-left: 15px;
-
-  .label{
-    border-radius: 20px;
-    background: #ffb703;
-    font-size: 12px;
+  .exp-workflow{
+    float: left;
+    margin: 0 !important;
+  
+    .label{
+      border-radius: 15px;
+      background: #ffb703;
+      /* font-size: 12px; */
+      float: right;
+      padding: 2.5px 13.5px 2.5px 13.5px;
+      color: #fff;
+  }
+  }
+  .exp-date{
+    width: auto;
+    font-family: Roboto;
+    font-size: 10pt;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #797979;
     float: right;
-    padding: 2.5px 13.5px 2.5px 13.5px;
-    color: #fff;
-}
-}
-.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;
+  font-size: 8pt;
+  width: 100%;
+  overflow: auto;
+  padding-left: 3px;
+
+  .exp-remetente{
+    //width: 200px;
+    font-family: Roboto;
+   /*  font-size: 13px; */
+    font-weight: normal;
+    color: #000000;
+    float: left;
+    /* border: 1px solid red; */
+  }
 }
 .div-top-header{
   width: 400px;