diff --git a/src/app/common/modals/comments-modal/comments-modal.coffee b/src/app/common/modals/comments-modal/comments-modal.coffee
deleted file mode 100644
index 59874c47e..000000000
--- a/src/app/common/modals/comments-modal/comments-modal.coffee
+++ /dev/null
@@ -1,32 +0,0 @@
-angular.module("doubtfire.common.modals.comments-modal", [])
-#
-# Modal to contain an image used in user comments.
-#
-.factory("CommentsModal", ($modal) ->
-  CommentsModal = {}
-  CommentsModal.show = (commentResourceUrl, commentType) ->
-    $modal.open
-      templateUrl: 'common/modals/comments-modal/comments-modal.tpl.html'
-      controller: 'CommentsModalCtrl'
-      size: 'lg'
-      resolve:
-        commentResourceUrl: -> commentResourceUrl
-        commentType: -> commentType
-  CommentsModal
-)
-.controller("CommentsModalCtrl", ($scope, $modalInstance, $sce, commentResourceUrl, commentType, alertService, fileDownloaderService) ->
-  # $scope.commentResourceUrl = $sce.trustAsResourceUrl(commentResourceUrl)
-  $scope.commentType = commentType
-  $scope.close = ->
-    fileDownloaderService.releaseBlob($scope.rawResourceUrl)
-    $modalInstance.dismiss()
-
-  fileDownloaderService.downloadBlob(
-    commentResourceUrl,
-    (url, response) ->
-      $scope.rawResourceUrl = url
-      $scope.commentResourceUrl = $sce.trustAsResourceUrl(url)
-    (error) ->
-      alertService.error( "Error downloading comment: #{error}")
-  )
-)
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.html b/src/app/common/modals/comments-modal/comments-modal.component.html
new file mode 100644
index 000000000..707bcff36
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.html
@@ -0,0 +1,7 @@
+<div class="p-6">
+  @if (taskComment.commentType === 'image') {
+    <img class="w-full h-full p-0 rounded border-none" [src]="commentResourceUrl" />
+  } @else if (taskComment.commentType === 'pdf') {
+    <f-pdf-viewer class="w-full h-[85vh] block" [pdfUrl]="commentResourceUrl"> </f-pdf-viewer>
+  }
+</div>
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.scss b/src/app/common/modals/comments-modal/comments-modal.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/common/modals/comments-modal/comments-modal.component.ts b/src/app/common/modals/comments-modal/comments-modal.component.ts
new file mode 100644
index 000000000..221c7b236
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+
+export interface CommentsModalData {
+  comment: TaskComment;
+  commentResourceUrl: string;
+}
+
+@Component({
+  selector: 'comments-modal',
+  templateUrl: './comments-modal.component.html',
+  styleUrls: ['./comments-modal.component.scss'],
+})
+export class CommentsModalComponent implements OnInit {
+  @Input() taskComment: TaskComment;
+  @Input() commentResourceUrl: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: CommentsModalData) {}
+
+  ngOnInit(): void {
+    this.taskComment = this.data.comment;
+    this.commentResourceUrl = this.data.commentResourceUrl;
+  }
+}
diff --git a/src/app/common/modals/comments-modal/comments-modal.scss b/src/app/common/modals/comments-modal/comments-modal.scss
deleted file mode 100644
index 22ccacf4f..000000000
--- a/src/app/common/modals/comments-modal/comments-modal.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.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.service.ts b/src/app/common/modals/comments-modal/comments-modal.service.ts
new file mode 100644
index 000000000..353c9c6c3
--- /dev/null
+++ b/src/app/common/modals/comments-modal/comments-modal.service.ts
@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {TaskComment} from 'src/app/api/models/doubtfire-model';
+import {CommentsModalComponent, CommentsModalData} from './comments-modal.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsModalService {
+  constructor(public dialog: MatDialog) {}
+
+  public show(commentResourceUrl: string, comment: TaskComment) {
+    this.dialog.open<CommentsModalComponent, CommentsModalData>(CommentsModalComponent, {
+      data: {commentResourceUrl, comment},
+      width: '100%',
+      maxWidth: '900px',
+      panelClass: 'overflow-y-auto',
+    });
+  }
+}
diff --git a/src/app/common/modals/comments-modal/comments-modal.tpl.html b/src/app/common/modals/comments-modal/comments-modal.tpl.html
deleted file mode 100644
index 59985945f..000000000
--- a/src/app/common/modals/comments-modal/comments-modal.tpl.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="modal-comment">
-  <div class="modal-body">
-    <div ng-if="commentType == 'image'">
-      <img class="image-comment" ng-src="{{commentResourceUrl}}" />
-    </div>
-    <div ng-if="commentType == 'pdf'">
-      <iframe class="pdf-comment" ng-src="{{commentResourceUrl}}" type="application/pdf" />
-    </div>
-  </div>
-</div>
diff --git a/src/app/common/modals/modals.coffee b/src/app/common/modals/modals.coffee
index 16d2be1ec..003a52262 100644
--- a/src/app/common/modals/modals.coffee
+++ b/src/app/common/modals/modals.coffee
@@ -1,5 +1,4 @@
 angular.module("doubtfire.common.modals", [
   'doubtfire.common.modals.csv-result-modal'
   'doubtfire.common.modals.confirmation-modal'
-  'doubtfire.common.modals.comments-modal'
 ])
diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index 69acaf196..0844278ef 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -229,6 +229,7 @@ import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
 import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {GradeService} from './common/services/grade.service';
+import {CommentsModalComponent} from './common/modals/comments-modal/comments-modal.component';
 
 // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036
 const MY_DATE_FORMAT = {
@@ -343,6 +344,7 @@ const MY_DATE_FORMAT = {
     FUsersComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    CommentsModalComponent,
   ],
   // Services we provide
   providers: [
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index 304e0bf74..f0c750313 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -119,7 +119,6 @@ import 'build/src/app/units/states/analytics/analytics.js';
 import 'build/src/app/common/filters/filters.js';
 import 'build/src/app/common/content-editable/content-editable.js';
 import 'build/src/app/common/modals/confirmation-modal/confirmation-modal.js';
-import 'build/src/app/common/modals/comments-modal/comments-modal.js';
 import 'build/src/app/common/modals/csv-result-modal/csv-result-modal.js';
 import 'build/src/app/common/modals/modals.js';
 import 'build/src/app/common/grade-icon/grade-icon.js';
@@ -219,11 +218,12 @@ import {FUnitTaskListComponent} from './units/states/tasks/viewer/directives/f-u
 import {FTaskDetailsViewComponent} from './units/states/tasks/viewer/directives/f-task-details-view/f-task-details-view.component';
 import {FTaskSheetViewComponent} from './units/states/tasks/viewer/directives/f-task-sheet-view/f-task-sheet-view.component';
 import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-viewer.component';
-
 import {FUnitsComponent} from './admin/states/f-units/f-units.component';
 import {MarkedPipe} from './common/pipes/marked.pipe';
 import {AlertService} from './common/services/alert.service';
 import {GradeService} from './common/services/grade.service';
+import {CommentsModalService} from './common/modals/comments-modal/comments-modal.service';
+
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
   'doubtfire.sessions',
@@ -301,6 +301,7 @@ DoubtfireAngularJSModule.factory(
   downgradeInjectable(EditProfileDialogService),
 );
 DoubtfireAngularJSModule.factory('CreateNewUnitModal', downgradeInjectable(CreateNewUnitModal));
+DoubtfireAngularJSModule.factory('CommentsModal', downgradeInjectable(CommentsModalService));
 
 // directive -> component
 DoubtfireAngularJSModule.directive(
diff --git a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
index c2b6e6761..37631facd 100644
--- a/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
+++ b/src/app/tasks/task-comments-viewer/pdf-image-comment/pdf-image-comment.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, Inject, OnDestroy } from '@angular/core';
-import { commentsModal } from 'src/app/ajs-upgraded-providers';
-import { Project, TaskComment, Task } from 'src/app/api/models/doubtfire-model';
-import { FileDownloaderService } from 'src/app/common/file-downloader/file-downloader.service';
-import { AlertService } from 'src/app/common/services/alert.service';
+import {Component, OnInit, Input, Inject, OnDestroy} from '@angular/core';
+import {commentsModal} from 'src/app/ajs-upgraded-providers';
+import {Project, TaskComment, Task} from 'src/app/api/models/doubtfire-model';
+import {FileDownloaderService} from 'src/app/common/file-downloader/file-downloader.service';
+import {CommentsModalService} from 'src/app/common/modals/comments-modal/comments-modal.service';
+import {AlertService} from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'pdf-image-comment',
@@ -18,7 +19,7 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
 
   constructor(
     private alerts: AlertService,
-    @Inject(commentsModal) private commentsModalRef: any,
+    @Inject(commentsModal) private commentsModalRef: CommentsModalService,
     private fileDownloaderService: FileDownloaderService,
   ) {}
 
@@ -48,7 +49,7 @@ export class PdfImageCommentComponent implements OnInit, OnDestroy {
 
   public openCommentsModal() {
     if (this.resourceUrl) {
-      this.commentsModalRef.show(this.resourceUrl, this.comment.commentType);
+      this.commentsModalRef.show(this.resourceUrl, this.comment);
     } else {
       this.downloadCommentResource(this.openCommentsModal.bind(this));
     }