diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
index 0a0caf116..ed7fccafb 100644
--- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
+++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
@@ -23,7 +23,7 @@
       </div>
 
       <div class="post-item overflow-y-auto">
-        <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <div (click)="openPreview(publication)" *ngIf="publication.FileBase64.length > 30" class="post-img">
           <img src="{{publication.FileBase64}}" alt="image" >
         </div>
         <div *ngIf="publication.FileBase64.length < 30" class="post-img">
diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
index 7806b556e..7fb0feba0 100644
--- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
+++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
@@ -8,6 +8,7 @@ import { ImageModalPage } from '../../gallery/image-modal/image-modal.page';
 import { NewPublicationPage } from '../../new-publication/new-publication.page';
 import { Location } from '@angular/common';
 import { ThemeService } from 'src/app/services/theme.service'
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 
 @Component({
@@ -122,7 +123,7 @@ export class PublicationDetailPage implements OnInit {
     }  finally {
       loader.remove()
     }
-    
+
 
   }
 
@@ -146,13 +147,17 @@ export class PublicationDetailPage implements OnInit {
     });
   }
 
-  openPreview(imageUrl:string){
-    this.modalController.create({
-      component: ImageModalPage,
+  async openPreview(item) {
+    const modal = await this.modalController.create({
+      component:  ViewMediaPage,
+      cssClass: 'modal modal-desktop',
       componentProps: {
-        imageUrl:imageUrl,
+        image: item.FileBase64,
+        username: item.Title,
+        _updatedAt: item.DatePublication
       }
-    }).then(modal => modal.present());
+    });
+    modal.present();
   }
 
 
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html
index cdfff5aa2..a4da7ec2c 100644
--- a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html
@@ -25,8 +25,8 @@
       </ion-refresher-content>
     </ion-refresher>
     <div class="post-item px-20">
-      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
-        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
+      <div (click)="openPreview(publication)" *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <img src="{{publication.FileBase64}}" alt="image" tappable>
       </div>
       <div *ngIf="publication.FileBase64.length < 30" class="post-img">
         <img src="/assets/icon/icon-no-image.svg" alt="image">
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts
index 0dc8d3c09..2890a9b3e 100644
--- a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts
@@ -8,6 +8,7 @@ import { ToastService } from 'src/app/services/toast.service';
 import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
 import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { ThemeService } from 'src/app/services/theme.service'
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 @Component({
   selector: 'app-publication-detail-shared',
@@ -32,7 +33,7 @@ export class PublicationDetailPage implements OnInit {
     private toastService: ToastService,
     public ThemeService: ThemeService
     ) {
-      
+
       /* this.folderId = this.navParams.get('folderIdId'); */
       this.publication = {
         DateIndex: null,
@@ -50,7 +51,7 @@ export class PublicationDetailPage implements OnInit {
 
   ngOnInit() {
     console.log(this.folderId);
-    
+
     /* console.log(this.publication.FileBase64); */
     this.getPublicationDetail();
   }
@@ -133,22 +134,26 @@ export class PublicationDetailPage implements OnInit {
 
   }
 
-  openPreview(imageUrl:string){
-    this.modalController.create({
-      component: ImageModalPage,
-      componentProps: {
-        imageUrl:imageUrl,
-      }
-    }).then(modal => modal.present());
-  }
-
   async goBack(){
 
     this.goBackToViewPublications.emit();
   }
 
+  async openPreview(item) {
+    const modal = await this.modalController.create({
+      component:  ViewMediaPage,
+      cssClass: 'modal modal-desktop',
+      componentProps: {
+        image: item.FileBase64,
+        username: item.Title,
+        _updatedAt: item.DatePublication
+      }
+    });
+    modal.present();
+  }
+
+
 
-