diff --git a/src/app/modals/group-icons/group-icons.page.html b/src/app/modals/group-icons/group-icons.page.html
index 31bb317ae..2163b47e2 100644
--- a/src/app/modals/group-icons/group-icons.page.html
+++ b/src/app/modals/group-icons/group-icons.page.html
@@ -1,31 +1,35 @@
-<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-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..6b0dbae93 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">
@@ -52,4 +54,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..e1271ec90 100644
--- a/src/app/modals/preview-camera/preview-camera.page.scss
+++ b/src/app/modals/preview-camera/preview-camera.page.scss
@@ -1,9 +1,6 @@
 
 
-ion-content {
-    --background:black;
-    --color: red;
-}
+
  
 ion-footer {
     margin-bottom: 10px;
@@ -19,4 +16,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..c7a8e2f12 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -125,7 +125,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-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html
index 9ab909161..b44a81c22 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -157,5 +157,5 @@
       </button>
     </div>
   </div>
-  in group!
+
 </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