diff --git a/src/app/common/modals/comments-modal/comments-modal.component.html b/src/app/common/modals/comments-modal/comments-modal.component.html
index e69de29bb..bd302b689 100644
--- a/src/app/common/modals/comments-modal/comments-modal.component.html
+++ b/src/app/common/modals/comments-modal/comments-modal.component.html
@@ -0,0 +1,10 @@
+<div class="modal-comment">
+    <div class="modal-body">
+      <div *ngIf="commentType == 'image'">
+        <img class="image-comment" [src]="commentResourceUrl" />
+      </div>
+      <div *ngIf="commentType == 'pdf'">
+        <iframe class="pdf-comment" [src]="commentResourceUrl" type="application/pdf"></iframe>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.scss b/src/app/common/modals/comments-modal/comments-modal.component.scss
index e69de29bb..ea07f249e 100644
--- a/src/app/common/modals/comments-modal/comments-modal.component.scss
+++ b/src/app/common/modals/comments-modal/comments-modal.component.scss
@@ -0,0 +1,15 @@
+.modal-comment {
+    .image-comment {
+        width: 100%;
+        height: 100%;
+        align-content: center;
+        border-radius: 5px;
+        padding: 0;
+        border: none;
+    }
+    .pdf-comment {
+      width: 100%;
+      height: 80vh;
+      align-content: center;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.ts b/src/app/common/modals/comments-modal/comments-modal.component.ts
index 0bba1ae9e..07f855a35 100644
--- a/src/app/common/modals/comments-modal/comments-modal.component.ts
+++ b/src/app/common/modals/comments-modal/comments-modal.component.ts
@@ -1,10 +1,23 @@
-import { Component, Input, Inject } from '@angular/core';
+import { Component, OnInit, Input, Inject} from '@angular/core';
+import { alertService } from 'src/app/ajs-upgraded-providers';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'comments-modal',
   templateUrl: './comments-modal.component.html',
   styleUrls: ['./comments-modal.component.scss'],
 })
-export class CommentsModalComponent {
-  constructor() {}
+export class CommentsModalComponent implements OnInit {
+  @Input() commentResourceUrl: string;
+  @Input() commentType: string;
+
+  constructor(
+    @Inject(alertService) private alertService: any,
+    public dialogRef: MatDialogRef<CommentsModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  ngOnInit(): void {
+    console.log('comments-model ngOnInit()');
+  }
 }
\ No newline at end of file
diff --git a/src/app/common/modals/comments-modal/comments-modal.service.ts b/src/app/common/modals/comments-modal/comments-modal.service.ts
index e69de29bb..657a54bc6 100644
--- a/src/app/common/modals/comments-modal/comments-modal.service.ts
+++ b/src/app/common/modals/comments-modal/comments-modal.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { CommentsModalComponent } from './comments-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(commentResourceUrl: string, commentType: string) {
+    let dialogRef: MatDialogRef<CommentsModalComponent, any>;
+    dialogRef = this.dialog.open(CommentsModalComponent);
+    dialogRef.updateSize('100%', '100%');
+    dialogRef.componentInstance.commentResourceUrl = commentResourceUrl;
+    dialogRef.componentInstance.commentType = commentType;
+  }
+}
\ No newline at end of file