diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index dd34724a6..9840deb58 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -67,7 +67,7 @@ import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
 import { ColorSliderModule } from 'ngx-color/slider'
 import { ColorComponent } from './components/common/input/color/color.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DocumentCommentComponent } from './components/document-comment/document-comment.component';
+import { DocumentCommentsComponent } from './components/document-comments/document-comments.component'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
 
 import localeBe from '@angular/common/locales/be'
@@ -174,7 +174,7 @@ function initializeApp(settings: SettingsService) {
     DateComponent,
     ColorComponent,
     DocumentAsnComponent,
-    DocumentCommentComponent,
+    DocumentCommentsComponent,
     TasksComponent,
   ],
   imports: [
diff --git a/src-ui/src/app/components/document-comment/document-comment.component.ts b/src-ui/src/app/components/document-comment/document-comment.component.ts
deleted file mode 100644
index 57b052d84..000000000
--- a/src-ui/src/app/components/document-comment/document-comment.component.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DocumentDetailComponent } from 'src/app/components/document-detail/document-detail.component';
-import { DocumentCommentService } from 'src/app/services/rest/document-comment.service';
-import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment';
-
-import { take } from 'rxjs/operators';
-import { FormControl, FormGroup } from '@angular/forms';
-
-@Component({
-  selector: 'app-document-comment',
-  templateUrl: './document-comment.component.html',
-  styleUrls: ['./document-comment.component.scss']
-})
-export class DocumentCommentComponent implements OnInit {
-
-  comments:PaperlessDocumentComment[];
-  networkActive = false;
-  documentId: number;
-  commentForm: FormGroup = new FormGroup({
-    newcomment: new FormControl('')
-  })
-
-  constructor(
-    private documentDetailComponent: DocumentDetailComponent,
-    private documentCommentService: DocumentCommentService,
-  ) { }
-
-  byId(index, item: PaperlessDocumentComment) {
-    return item.id;
-  }
-
-  async ngOnInit(): Promise<any> {
-    try {
-      this.documentId = this.documentDetailComponent.documentId;
-      this.comments= await this.documentCommentService.getComments(this.documentId).pipe(take(1)).toPromise();
-    } catch(err){
-      this.comments = [];
-    }
-  }
-
-  addComment(){
-    this.networkActive = true
-    this.documentCommentService.addComment(this.documentId, this.commentForm.get("newcomment").value).subscribe(result => {
-      this.comments = result;
-      this.commentForm.get("newcomment").reset();
-      this.networkActive = false;
-    }, error => {
-      this.networkActive = false;
-    });
-  }
-
-  deleteComment(event){
-    let parent = event.target.parentElement.closest('div[comment-id]');
-    if(parent){
-      this.documentCommentService.deleteComment(this.documentId, parseInt(parent.getAttribute("comment-id"))).subscribe(result => {
-        this.comments = result;
-        this.networkActive = false;
-      }, error => {
-        this.networkActive = false;
-      });
-    }
-  }
-}
\ No newline at end of file
diff --git a/src-ui/src/app/components/document-comment/document-comment.component.html b/src-ui/src/app/components/document-comments/document-comments.component.html
similarity index 71%
rename from src-ui/src/app/components/document-comment/document-comment.component.html
rename to src-ui/src/app/components/document-comments/document-comments.component.html
index 6a36f999f..bdad4da4d 100644
--- a/src-ui/src/app/components/document-comment/document-comment.component.html
+++ b/src-ui/src/app/components/document-comments/document-comments.component.html
@@ -1,16 +1,16 @@
 <div *ngIf="comments">
     <form [formGroup]='commentForm'>
         <div class="form-group">
-            <textarea class="form-control" id="newcomment" rows="5" formControlName='newcomment'></textarea>
+            <textarea class="form-control" rows="5" formControlName='newcomment'></textarea>
         </div>
-        <button type="button" class="btn btn-primary" i18n [disabled]="networkActive" (click)="addComment()">add comment</button>&nbsp;
+        <button type="button" class="btn btn-primary" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
     </form>
     <hr>
-    <div *ngFor="let comment of comments; trackBy: byId" [disableRipple]="true" class="card border-bg-primary bg-primary mb-3 comment-card" [attr.comment-id]="comment.id">
+    <div *ngFor="let comment of comments; trackBy: commentId" class="card border-bg-primary bg-primary mb-3 comment-card" [attr.comment-id]="comment.id">
         <div class="d-flex card-header comment-card-header text-white justify-content-between">
             <span>{{comment?.user?.firstname}} {{comment?.user?.lastname}} ({{comment?.user?.username}}) - {{ comment?.created | customDate}}</span>
             <span>
-                <a class="text-white" (click)="deleteComment($event)">
+                <a class="text-white" (click)="deleteComment(comment.id)">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                         <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                         <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
@@ -22,4 +22,4 @@
             {{comment.comment}}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src-ui/src/app/components/document-comment/document-comment.component.scss b/src-ui/src/app/components/document-comments/document-comments.component.scss
similarity index 99%
rename from src-ui/src/app/components/document-comment/document-comment.component.scss
rename to src-ui/src/app/components/document-comments/document-comments.component.scss
index 778556485..a5ff6f86e 100644
--- a/src-ui/src/app/components/document-comment/document-comment.component.scss
+++ b/src-ui/src/app/components/document-comments/document-comments.component.scss
@@ -19,4 +19,4 @@
 
 .comment-card-header a:hover svg {
     fill: var(--primary);
-} 
\ No newline at end of file
+}
diff --git a/src-ui/src/app/components/document-comments/document-comments.component.ts b/src-ui/src/app/components/document-comments/document-comments.component.ts
new file mode 100644
index 000000000..421811d4f
--- /dev/null
+++ b/src-ui/src/app/components/document-comments/document-comments.component.ts
@@ -0,0 +1,73 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { DocumentCommentsService } from 'src/app/services/rest/document-comments.service'
+import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
+import { FormControl, FormGroup } from '@angular/forms'
+import { first } from 'rxjs/operators'
+import { ToastService } from 'src/app/services/toast.service'
+
+@Component({
+  selector: 'app-document-comments',
+  templateUrl: './document-comments.component.html',
+  styleUrls: ['./document-comments.component.scss'],
+})
+export class DocumentCommentsComponent implements OnInit {
+  commentForm: FormGroup = new FormGroup({
+    newcomment: new FormControl(''),
+  })
+
+  networkActive = false
+  comments: PaperlessDocumentComment[] = []
+
+  @Input()
+  documentId: number
+
+  constructor(
+    private commentsService: DocumentCommentsService,
+    private toastService: ToastService
+  ) {}
+
+  ngOnInit(): void {
+    this.commentsService
+      .getComments(this.documentId)
+      .pipe(first())
+      .subscribe((comments) => (this.comments = comments))
+  }
+
+  commentId(index, comment: PaperlessDocumentComment) {
+    return comment.id
+  }
+
+  addComment() {
+    this.networkActive = true
+    this.commentsService
+      .addComment(this.documentId, this.commentForm.get('newcomment').value)
+      .subscribe({
+        next: (result) => {
+          this.comments = result
+          this.commentForm.get('newcomment').reset()
+          this.networkActive = false
+        },
+        error: (e) => {
+          this.networkActive = false
+          this.toastService.showError(
+            $localize`Error saving comment: ${e.toString()}`
+          )
+        },
+      })
+  }
+
+  deleteComment(commentId: number) {
+    this.commentsService.deleteComment(this.documentId, commentId).subscribe({
+      next: (result) => {
+        this.comments = result
+        this.networkActive = false
+      },
+      error: (e) => {
+        this.networkActive = false
+        this.toastService.showError(
+          $localize`Error deleting comment: ${e.toString()}`
+        )
+      },
+    })
+  }
+}
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 211f93d50..8e7176655 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -172,7 +172,7 @@
                 <li [ngbNavItem]="5" *ngIf="commentsEnabled">
                     <a ngbNavLink i18n>Comments</a>
                     <ng-template ngbNavContent>
-                        <app-document-comment #commentComponent></app-document-comment>
+                        <app-document-comments [documentId]="documentId"></app-document-comments>
                     </ng-template>
 
                 </li>
diff --git a/src-ui/src/app/services/rest/document-comment.service.ts b/src-ui/src/app/services/rest/document-comments.service.ts
similarity index 82%
rename from src-ui/src/app/services/rest/document-comment.service.ts
rename to src-ui/src/app/services/rest/document-comments.service.ts
index 2dfbb3185..b105a90d1 100644
--- a/src-ui/src/app/services/rest/document-comment.service.ts
+++ b/src-ui/src/app/services/rest/document-comments.service.ts
@@ -7,14 +7,14 @@ import { Observable } from 'rxjs'
 @Injectable({
   providedIn: 'root',
 })
-export class DocumentCommentService extends AbstractPaperlessService<PaperlessDocumentComment> {
+export class DocumentCommentsService extends AbstractPaperlessService<PaperlessDocumentComment> {
   constructor(http: HttpClient) {
     super(http, 'documents')
   }
 
-  getComments(id: number): Observable<PaperlessDocumentComment[]> {
+  getComments(documentId: number): Observable<PaperlessDocumentComment[]> {
     return this.http.get<PaperlessDocumentComment[]>(
-      this.getResourceUrl(id, 'comments')
+      this.getResourceUrl(documentId, 'comments')
     )
   }