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 f521c4176..cd041f368 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -57,7 +57,7 @@
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
+      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -66,7 +66,9 @@
           <ion-label>{{msg.msg}}</ion-label>
           <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 (click)="openPreview(msg)">
+                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
+              </div>
               <div>
                 <div>
                   <div class="file">
diff --git a/src/app/pages/chat/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts
index e571c6e4e..6a0063bdd 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.ts
+++ b/src/app/pages/chat/group-messages/group-messages.page.ts
@@ -21,6 +21,7 @@ import { EventPerson } from 'src/app/models/eventperson.model';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
 import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 @Component({
   selector: 'app-group-messages',
@@ -29,7 +30,7 @@ import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.
 })
 export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
-  
+
 
   showLoader: boolean;
   isGroupCreated:boolean;
@@ -593,7 +594,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   };
   zoomActive = false;
 zoomScale = 1;
- 
+
 sliderZoomOpts = {
   allowSlidePrev: false,
   allowSlideNext: false,
@@ -601,40 +602,40 @@ sliderZoomOpts = {
     maxRatio: 5
   },
   on: {
-    zoomChange: (scale, imageEl, slideEl) => {        
+    zoomChange: (scale, imageEl, slideEl) => {
       this.zoomActive = true;
       this.zoomScale = scale/5;
-      this.changeDetectorRef.detectChanges();         
+      this.changeDetectorRef.detectChanges();
     }
   }
 }
- 
+
 async touchEnd(zoomslides: IonSlides, card) {
   // Zoom back to normal
   const slider = await zoomslides.getSwiper();
   const zoom = slider.zoom;
   zoom.out();
- 
+
   // Card back to normal
   card.el.style['z-index'] = 9;
- 
+
   this.zoomActive = false;
   this.changeDetectorRef.detectChanges();
 }
- 
+
 touchStart(card) {
   // Make card appear above backdrop
   card.el.style['z-index'] = 11;
 }
 
-  async openPreview(img) {
+  async openPreview(msg) {
     const modal = await this.modalController.create({
-      component:  PreviewCameraPage,
-      cssClass: 'transparent-modal',
+      component:  ViewMediaPage,
+      cssClass: 'modal modal-desktop',
       componentProps: {
-        image: img.attachments[0].image_url,
-        username: img.u.name,
-        _updatedAt: img._updatedAt
+        image: msg.attachments[0].image_url,
+        username: msg.u.name,
+        _updatedAt: msg._updatedAt,
       }
     });
     modal.present();
diff --git a/src/app/shared/chat/group-messages/group-messages.page.html b/src/app/shared/chat/group-messages/group-messages.page.html
index 0ebc7fdbb..6d04f1ced 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.html
+++ b/src/app/shared/chat/group-messages/group-messages.page.html
@@ -44,7 +44,7 @@
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
 
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" (click)="openPreview(msg)">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
       <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" >
         <div class="message-item-options d-flex justify-content-end">
           <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
@@ -60,7 +60,9 @@
           <ion-label>{{msg.msg}}</ion-label>
           <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 (click)="openPreview(msg)">
+                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              </div>
               <div>
                 <div>
                   <div class="file">
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 cf0ac3345..7c07a530d 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.ts
+++ b/src/app/shared/chat/group-messages/group-messages.page.ts
@@ -20,6 +20,7 @@ import { FileService } from 'src/app/services/functions/file.service';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
 import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 /*
 import * as pdfjsLib from 'pdfjs-dist';
@@ -769,7 +770,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     }
   }
 
-  
+
   sliderOpts = {
     zoom: false,
     slidesPerView: 1.5,
@@ -778,7 +779,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   };
   zoomActive = false;
 zoomScale = 1;
- 
+
 sliderZoomOpts = {
   allowSlidePrev: false,
   allowSlideNext: false,
@@ -786,44 +787,44 @@ sliderZoomOpts = {
     maxRatio: 5
   },
   on: {
-    zoomChange: (scale, imageEl, slideEl) => {        
+    zoomChange: (scale, imageEl, slideEl) => {
       this.zoomActive = true;
       this.zoomScale = scale/5;
-      this.changeDetectorRef.detectChanges();         
+      this.changeDetectorRef.detectChanges();
     }
   }
 }
- 
+
 async touchEnd(zoomslides: IonSlides, card) {
   // Zoom back to normal
   const slider = await zoomslides.getSwiper();
   const zoom = slider.zoom;
   zoom.out();
- 
+
   // Card back to normal
   card.el.style['z-index'] = 9;
- 
+
   this.zoomActive = false;
   this.changeDetectorRef.detectChanges();
 }
- 
+
 touchStart(card) {
   // Make card appear above backdrop
   card.el.style['z-index'] = 11;
 }
 
-  async openPreview(img) {
-    const modal = await this.modalController.create({
-      component:  PreviewCameraPage,
-      cssClass: 'transparent-modal',
-      componentProps: {
-        image: img.attachments[0].image_url,
-        username: img.u.username,
-        _updatedAt: img._updatedAt
-      }
-    });
-    modal.present();
-  }
+async openPreview(msg) {
+  const modal = await this.modalController.create({
+    component:  ViewMediaPage,
+    cssClass: 'modal modal-desktop',
+    componentProps: {
+      image: msg.attachments[0].image_url,
+      username: msg.u.name,
+      _updatedAt: msg._updatedAt,
+    }
+  });
+  modal.present();
+}
 
 }