diff --git a/src/app/modals/group-icons/group-icons.page.html b/src/app/modals/group-icons/group-icons.page.html
index 31bb317ae..63c1b2846 100644
--- a/src/app/modals/group-icons/group-icons.page.html
+++ b/src/app/modals/group-icons/group-icons.page.html
@@ -1,31 +1,38 @@
-<ion-card >
-  <ion-card-content > 
-   <ion-row>
-      <ion-col size="3" class="ion-text-center">
-        <ion-button (click)="removerIcone()" fill="clear" color="light">
-          <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
-          <ion-icon class="redla" name="trash-outline"></ion-icon>
-        </ion-button>
-      </ion-col>
-      <ion-col size="3" class="ion-text-center">
-        <ion-button (click)="openGaleria()" fill="clear" color="light">
-          <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
-          <ion-icon class="redla" name="flower-outline"></ion-icon>
-        </ion-button>
-      </ion-col>
-      <ion-col size="3" class="ion-text-center">
-        <ion-button (click)="OpenCamera()" fill="clear" color="light">
-         
-          <ion-icon  class="redla" name="camera-outline"></ion-icon>
-        
-        </ion-button>
-      </ion-col>
-      <ion-col size="3" class="ion-text-center">
-        <ion-button (click)="pesquizarWeb()" fill="clear" color="light">
-          <ion-icon class="redla" name="search-outline"></ion-icon>
-        
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-card-content>
-</ion-card>
+
+  <ion-card class="cardconteudo" (click)= "dismiss()" >
+    <ion-card-header>
+    </ion-card-header>
+    <ion-card-content > 
+     <ion-row>
+        <ion-col size="3" class="ion-text-center">
+          <ion-button (click)="removerIcone()" fill="clear" color="light">
+            <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
+            <ion-icon class="redla" name="trash-outline"></ion-icon>
+          </ion-button>
+        </ion-col>
+        <ion-col size="3" class="ion-text-center">
+          <ion-button (click)="openGaleria()" fill="clear" color="light">
+            <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
+            <ion-icon class="redla" name="flower-outline"></ion-icon>
+          </ion-button>
+        </ion-col>
+        <ion-col size="3" class="ion-text-center">
+          <ion-button (click)="OpenCamera()" fill="clear" color="light">
+           
+            <ion-icon  class="redla" name="camera-outline"></ion-icon>
+          
+          </ion-button>
+        </ion-col>
+        <ion-col size="3" class="ion-text-center">
+          <ion-button (click)="pesquizarWeb()" fill="clear" color="light">
+            <ion-icon class="redla" name="search-outline"></ion-icon>
+          
+
+          </ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+
+
+
diff --git a/src/app/modals/group-icons/group-icons.page.scss b/src/app/modals/group-icons/group-icons.page.scss
index e69de29bb..1ba6d40db 100644
--- a/src/app/modals/group-icons/group-icons.page.scss
+++ b/src/app/modals/group-icons/group-icons.page.scss
@@ -0,0 +1,63 @@
+// .animated{
+//   animation: duration 5s;
+//   animation-fill-mode: both;
+// }
+
+// @keyframes bounceInUp{
+//     0%{
+//         opacity:0;
+//         transform: translateY(300px);
+        
+//     }
+//     60%{
+//         opacity:0;
+//         transform: translateY(-30px);
+//     }
+//     80%{
+//         opacity:0;
+//         transform: translateY(10px);
+//     }
+//     100%{
+//         opacity:0;
+//         transform: translateY(0);
+//     }
+// }
+// .bounceInUp{
+//     animation-name: bounceInUp;
+// }
+
+// @keyframes bounceInUp{
+//     from{down:0px}
+//     30% {top: 100px !important;} /* ignored */
+//     from{down:200px}
+// }
+    
+
+.rollover  {
+    position: relative;
+    animation: mymove 5s infinite;
+  }
+  
+  @keyframes mymove {
+    from   {bottom: 0px; }
+    to {bottom: 100px;}
+  }
+ 
+  @media only screen and (min-height: 600px) and (min-width: 768px)
+{
+  .custom-modal {
+    .modal-wrapper {
+        
+      position: absolute !important;
+      height: 500px !important;
+      top: calc(100% - (500px));
+
+    }
+  }
+}
+
+.redla{
+
+    color: rgb(255, 38, 0);
+    // background-color: rgb(255, 72, 0);
+}
\ No newline at end of file
diff --git a/src/app/modals/preview-camera/preview-camera.module.ts b/src/app/modals/preview-camera/preview-camera.module.ts
index a6d48e287..53fa3c78d 100644
--- a/src/app/modals/preview-camera/preview-camera.module.ts
+++ b/src/app/modals/preview-camera/preview-camera.module.ts
@@ -8,6 +8,7 @@ import { PreviewCameraPageRoutingModule } from './preview-camera-routing.module'
 
 import { PreviewCameraPage } from './preview-camera.page';
 import { ImageCropperModule } from 'ngx-image-cropper';
+import { GroupIconsPage } from '../group-icons/group-icons.page';
 
 @NgModule({
   imports: [
@@ -17,6 +18,8 @@ import { ImageCropperModule } from 'ngx-image-cropper';
     ImageCropperModule,
     PreviewCameraPageRoutingModule
   ],
-  declarations: [PreviewCameraPage]
+  declarations: [PreviewCameraPage],
+ 
+  
 })
 export class PreviewCameraPageModule {}
diff --git a/src/app/modals/preview-camera/preview-camera.page.html b/src/app/modals/preview-camera/preview-camera.page.html
index 8d7b26f6c..54bd15ae6 100644
--- a/src/app/modals/preview-camera/preview-camera.page.html
+++ b/src/app/modals/preview-camera/preview-camera.page.html
@@ -1,13 +1,15 @@
-<ion-card >
+
+
+<ion-card class="cardconteudo" >
 
 <ion-card-content >
   <ion-card-header >
-    <ion-toolbar>
-     
-        {{username}}   <span>{{_updatedAt}}</span> 
+   
+   
+     <ion-text color="light" size="6">{{username}}   <span>{{_updatedAt | date}}</span><div class="right" (click)="getIconGallery()"><ion-icon name="pencil-outline" ></ion-icon></div></ion-text>   
+    
       
-      
-    </ion-toolbar>
+   
   </ion-card-header>
   
     <img src="{{image}}" />
@@ -23,7 +25,7 @@
   
 ></image-cropper> -->
 
-<ion-footer>
+<ion-footer color="light">
   <ion-row>
     <ion-col size="3" class="ion-text-center">
       <ion-button (click)="zoom(false)" fill="clear" color="light">
@@ -32,9 +34,10 @@
       </ion-button>
     </ion-col>
     <ion-col size="3" class="ion-text-center">
-      <ion-button (click)="zoom(false)" fill="clear" color="light">
-        <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
-        <ion-icon class="redla" name="call-outline"></ion-icon>
+      
+        <ion-button (click)="zoom(false)" fill="clear" color="light">
+          <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
+          <ion-icon class="redla" name="flower-outline"></ion-icon>
       </ion-button>
     </ion-col>
     <ion-col size="3" class="ion-text-center">
@@ -52,4 +55,4 @@
     </ion-col>
   </ion-row>
 </ion-footer>
-</ion-card>
\ No newline at end of file
+</ion-card>
diff --git a/src/app/modals/preview-camera/preview-camera.page.scss b/src/app/modals/preview-camera/preview-camera.page.scss
index bdd1a9c16..00ca80045 100644
--- a/src/app/modals/preview-camera/preview-camera.page.scss
+++ b/src/app/modals/preview-camera/preview-camera.page.scss
@@ -1,10 +1,3 @@
-
-
-ion-content {
-    --background:black;
-    --color: red;
-}
- 
 ion-footer {
     margin-bottom: 10px;
 }
@@ -19,4 +12,17 @@ ion-slides {
     // background-color: rgb(255, 72, 0);
 }
 
+.cardconteudo {
+    background: rgba(255,255,255,0.5);
+}
 
+.whiter{
+    color: white;
+   
+}
+.right{
+float: right;
+}
+.center{
+    clear: both;
+    }
\ No newline at end of file
diff --git a/src/app/modals/preview-camera/preview-camera.page.ts b/src/app/modals/preview-camera/preview-camera.page.ts
index 5df309f34..bfd05c403 100644
--- a/src/app/modals/preview-camera/preview-camera.page.ts
+++ b/src/app/modals/preview-camera/preview-camera.page.ts
@@ -66,7 +66,18 @@ close(){
 //   });
 //   modal.present();
 //   }
+
+async getIconGallery(){
+
+    const modal = await this.modalController.create({
+      component: GroupIconsPage ,
+      animated: true,
+      cssClass: 'transparentblack-modal',
+            });
+    modal.present();
+  }
 }
 
 
 
+
diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index e878bab26..d9da4bea1 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -97,8 +97,6 @@
                       <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
                       <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group._id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
                       <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group._id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
-
-
                     </div>
                     <div
                      (click)="openGroupMessagesPage(group._id)" class="item-content flex-grow-1 cursor-pointer">
@@ -125,7 +123,7 @@
                     </div>
                   </div>
               </ion-item-sliding>
-              am i here?!
+            
           </ion-list>
         </div>
        <!--  <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->
diff --git a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
index 0b571f4f3..00bbea785 100644
--- a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
+++ b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
@@ -29,9 +29,6 @@
       </ion-refresher-content>
     </ion-refresher>
 
-
-
-
   <div class="main-content">
     <div *ngIf="members">
       <ion-label class="members-label">Contactos selecção:</ion-label>
diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html
index 9ab909161..fe648ee08 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -67,10 +67,7 @@
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
               <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
-
-              
               <div>
-               
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
@@ -157,5 +154,5 @@
       </button>
     </div>
   </div>
-  in group!
+
 </ion-footer>
diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html
index c58a2984a..99a543a95 100644
--- a/src/app/pages/chat/messages/messages.page.html
+++ b/src/app/pages/chat/messages/messages.page.html
@@ -138,7 +138,7 @@
   <button (click)="stopRecording()">Stop Recording</button> -->
   <div class="container width-100 d-flex">
     <div>
-      aqui
+    
       <button class="btn-no-color" (click)="openChatOptions()">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
@@ -164,5 +164,5 @@
       </button>
     </div>
   </div>
-  in message!
+
 </ion-footer>
diff --git a/src/global.scss b/src/global.scss
index 55bce7560..23b37489d 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -747,6 +747,9 @@ app-header-no-search  .ion-toolbar{
 
     --title-text-color: rgb(0, 0, 0);
     --subtitle-text-color: #000
+  
+  
+      
     }
 
 
@@ -1300,8 +1303,6 @@ ngx-mat-datetime-content{
 }
 
 
-
-
 @keyframes ldio-rpinwye8j0b {
     0% { transform: rotate(0deg) }
     50% { transform: rotate(180deg) }
@@ -1332,4 +1333,26 @@ ngx-mat-datetime-content{
     backface-visibility: hidden;
     transform-origin: 0 0; /* see note above */
   }
-  .ldio-rpinwye8j0b div { box-sizing: content-box; }
\ No newline at end of file
+  .ldio-rpinwye8j0b div { box-sizing: content-box; }
+
+  .transparent-modal {
+    --background: #0000005c;
+
+    ion-content {
+        --background:transparent;
+      
+    }
+}
+
+ ion-modal::part(content){
+     backdrop-filter: blur(12px);
+ }
+
+ .transparentblack-modal{
+    --background: #000000e7;
+
+    ion-content {
+        --background:transparent;
+      
+    }
+ }
\ No newline at end of file