diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index a976a6879..c06f17bc5 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -45,7 +45,7 @@
             <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
 
-          <div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="openDespachosPage()">
+          <div [class.active]="selectedElement == 'Dispatches'" class="exp-card d-flex flex-column justify-center" (click)="openDespachosPage(); selectedElement='Dispatches'">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-despachos-presidente.svg"></ion-icon>
             </div>
@@ -53,7 +53,7 @@
             <p class="text-center exp-card-content">{{count_desp_dailywork}}<span class="title1">Documentos</span> </p>
           </div>
 
-          <div [class.active]="selectedElement == 'RequestsForOpinion'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('parecer')">
+          <div [class.active]="selectedElement == 'RequestsForOpinion'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('parecer'); selectedElement='RequestsForOpinion'">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-parecer.svg"></ion-icon>
             </div>
@@ -61,7 +61,7 @@
             <p class="text-center exp-card-content">{{count_par_dailywork}} <span class="title1">Documentos</span></p>
           </div>
 
-          <div [class.active]="selectedElement == 'RequestForApproval'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('deferimento')">
+          <div [class.active]="selectedElement == 'RequestForApproval'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('deferimento'); selectedElement = 'RequestForApproval'">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
             </div>
@@ -69,13 +69,7 @@
             <p class="text-center exp-card-content">{{count_def_dailywork}} <span class="title1">Documentos</span></p>
           </div>
 
-          <div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex d-none flex-column justify-center" (click)="notImplemented()">
-            <div class="d-flex justify-center">
-              <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
-            </div>
-            <p class="text-center exp-card-title ">Expediente Presidente</p>
-            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
-          </div>
+
 
           <div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex d-none flex-column justify-center" (click)="notImplemented()">
             <div class="d-flex justify-center">
@@ -85,28 +79,21 @@
             <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
           </div>
 
-          <div [class.active]="selectedElement == '£££££££'" class="exp-card-long justify-center width-100" (click)="notImplemented()">
-            <div class="center-div">
-              <div class="exp-card-icon">
-                <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
-              </div>
-              <div class="exp-card-text">
-                <p class="exp-card-title ">Expediente Presidente</p>
-                <p class="exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
-              </div>
+          <div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
             </div>
+            <p class="text-center exp-card-title ">Expediente Presidente</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
 
-          <div [class.active]="selectedElement == '£££££££'" class="exp-card-long width-100" (click)="notImplemented()">
-            <div class="center-div">
-              <div class="exp-card-icon">
-                <ion-icon  src="assets/images/icons-despachos-presidente.svg"></ion-icon>
-              </div>
-              <div class="exp-card-text">
-                <p class="text-center exp-card-title">Despacho do Presidente da República</p>
-                <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
-              </div>
+
+          <div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
             </div>
+            <p class="text-center exp-card-title ">Despacho do Presidente da República</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
           </div>
 
           <div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index a1f5a7748..47d34a555 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -106,9 +106,10 @@ ion-content{
       padding: 30px 5px 30px 5px;
       border-radius: 15px;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+      background: white;
       //border: solid 1px #e9e9e9;
       /* --background-color: #ffffff !important; */
-      background-color: #ffffff !important;
+      // background-color: #ffffff !important;
       float: left;
       //border: 1px solid red;
       //justify-content: center;
@@ -117,7 +118,7 @@ ion-content{
       width: 360px;
       margin: 7px 20px;
       border-radius: 15px;
-      background-color: #ffffff !important;
+      // background-color: #ffffff !important;
       padding: 7px;
       border: blue !important;
 
@@ -295,7 +296,7 @@ ion-content{
     width: 100%;
     padding: 10px 17px 10px 17px;
     height: unset !important;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
 
     .exp-card-title{
       flex: 1;
@@ -314,15 +315,6 @@ ion-content{
       margin-top: 0px !important;
     }
   }
-  .exp-card:visited{
-    background: blue;
-  }
-  .exp-card:hover{
-    background: blue;
-  }
-}
-.btn-refresh:visited{
-  background: blue !important;
 }
 @media only screen and (min-width: 1024px){
   .content{
@@ -347,6 +339,9 @@ ion-content{
 
 
 .active {
-  border:  1px solid green;
+  background: #42b9fe !important;
   box-sizing: border-box;
+  .exp-card-title {
+    color: white !important;
+  }
 }
\ No newline at end of file
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
index e52bc1165..8afcba99f 100644
--- a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
@@ -239,7 +239,7 @@ export class GroupContactsPage implements OnInit {
           name:this.groupName,
           duration:'',
         },
-        cssClass: 'new-group',
+        cssClass: 'new-group modal-desktop',
         backdropDismiss: false,
       });
       await modal.present();
@@ -299,7 +299,7 @@ export class GroupContactsPage implements OnInit {
     this.close();
     const modal = await this.modalController.create({
       component: NewGroupPage,
-      cssClass: 'new-group',
+      cssClass: 'new-group modal-desktop',
       backdropDismiss: false,
     });
     await modal.present();
diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts
index 2bbbf2b45..f94dbc9ee 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.ts
+++ b/src/app/shared/chat/group-messages/group-messages.page.ts
@@ -240,7 +240,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   async openOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: ChatPopoverPage,
-      cssClass: 'chat-popover',
+      cssClass: 'chat-popover modal-desktop',
       event: ev,
       componentProps: {
         room: this.room,
diff --git a/src/app/shared/header/header.page.html b/src/app/shared/header/header.page.html
index fb2f7f637..04190fa46 100644
--- a/src/app/shared/header/header.page.html
+++ b/src/app/shared/header/header.page.html
@@ -58,10 +58,10 @@
 
       <div class="d-flex">
         <div class="mr-10 d-flex align-center">
-          <button (click)="openSearch()" *ngIf="!showSearch" class="btn-no-color" (click)="showSearch=true">
+          <button (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="btn-no-color">
             <ion-icon class="font-45"   src='assets/images/icons-search.svg'></ion-icon>
           </button>
-          <button class="btn-no-color" (click)="closeSearch()" *ngIf="showSearch" (click)="showSearch=false">
+          <button class="btn-no-color" (click)="closeSearch();showSearch=false" *ngIf="showSearch" >
             <ion-icon class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
           </button>
           
diff --git a/src/app/shared/header/header.page.ts b/src/app/shared/header/header.page.ts
index ec9bfcfeb..60ccc7caa 100644
--- a/src/app/shared/header/header.page.ts
+++ b/src/app/shared/header/header.page.ts
@@ -13,7 +13,7 @@ export class HeaderPage implements OnInit {
 
   profile: string = 'mdgpr';
   searchSubject: string = '';
-  showSearch:false;
+  showSearch=false;
 
   constructor(
     private router: Router,private modalController: ModalController,
@@ -41,9 +41,16 @@ export class HeaderPage implements OnInit {
 
   async openSearch() {
 
+    let classs;
+    if(window.innerWidth < 1366) {
+      classs = 'modal modal-width-100 modal-padding-top'
+    } else {
+      classs = 'modal modal-width-100 modal-padding-top modal-desktop-shadow modal-desktop-remove-background'
+    }
+
     const modal = await this.modalController.create({
       component: SearchPage,
-      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
+      cssClass: classs,
       componentProps: {
       }
     });
diff --git a/src/global.scss b/src/global.scss
index 16592f13a..097dc0d75 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -371,26 +371,66 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     }
 }
 
-.modal-width-100-width-background {
+.modal-width-100-width-background, .modal-desktop {
+    .modal-wrapper{
+        width: 100%  !important;
+        height: 99%  !important;
+        top: 2%;
+        position: relative;
+    }
+}
+
+.modal-padding-top{
+    .modal-wrapper{
+        height: 99%;
+        top: 2%;
+        position: relative;
+    }
+}
+
+.modal-top-100-width-background, .modal-desktop {
     .modal-wrapper{
         width: 100%;
         height: 99%;
-        top: 1%;
-        position: relative
+        top: 2%;
+        position: relative;
+    }
+}
+@media only screen and (min-width: 1366px) {
+    .modal-desktop-shadow{
+        .ion-page{
+            box-shadow: 0 0 15px 0 rgb(0 0 0 / 49%);
+        }
+    }
+
+    .modal-desktop-remove-background{
+        padding-top: 0px;
+        top: 85px;
+        ion-backdrop{
+            display: none;
+            transform: none !important;
+        }
+        .modal-wrapper{
+            transform: none !important;
+              box-shadow: none !important;
+              height: 100% !important;
+              top: unset !important;
+              .ion-page {
+                transform: none !important;
+                -webkit-transform: none !important;
+                -moz-transform: none !important;
+                -ms-transform: none !important;
+                -o-transform: none !important;
+}
+          }
     }
 }
 
 
-.search-desktop-modal{
-    .modal-wrapper{
-        position: absolute;
-        right: 0px;
-        height: 100%;
-        width: 400px;
-    } 
+.modal-desktop-shadow{
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.49);
 }
 
-
 .footer-container{
     padding: 10px 20px;
 }
@@ -418,6 +458,14 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     }
 }
 
+.modal-width-100{
+    .modal-wrapper{
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
 @media only screen and (min-width: 1365px) {
 
   .search-modal{
@@ -434,25 +482,6 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 
 
-@media only screen and (min-width: 1366px) {
-    .search-modal-to-desktop{
-        padding-top: 0px;
-        top: 75px;
-        .modal-wrapper{
-            transform: none !important;
-              width: 100%;
-              height: 100%;
-              box-shadow: none !important;
-              .ion-page {
-                transform: none !important;
-              }
-          }
-    }
-
-}
-
-
-
 @media only screen and (min-width: 1024px) {
 
     .timeline-mobile{