diff --git a/src-ui/cypress/e2e/documents/document-detail.cy.ts b/src-ui/cypress/e2e/documents/document-detail.cy.ts
index cc269655a..a836ffa92 100644
--- a/src-ui/cypress/e2e/documents/document-detail.cy.ts
+++ b/src-ui/cypress/e2e/documents/document-detail.cy.ts
@@ -17,6 +17,32 @@ describe('document-detail', () => {
       req.reply({ result: 'OK' })
     }).as('saveDoc')
 
+    cy.fixture('documents/1/comments.json').then((commentsJson) => {
+      cy.intercept(
+        'GET',
+        'http://localhost:8000/api/documents/1/comments/',
+        (req) => {
+          req.reply(commentsJson.filter((c) => c.id != 10)) // 3
+        }
+      )
+
+      cy.intercept(
+        'DELETE',
+        'http://localhost:8000/api/documents/1/comments/?id=9',
+        (req) => {
+          req.reply(commentsJson.filter((c) => c.id != 9 && c.id != 10)) // 2
+        }
+      )
+
+      cy.intercept(
+        'POST',
+        'http://localhost:8000/api/documents/1/comments/',
+        (req) => {
+          req.reply(commentsJson) // 4
+        }
+      )
+    })
+
     cy.viewport(1024, 1024)
     cy.visit('/documents/1/')
   })
@@ -39,4 +65,30 @@ describe('document-detail', () => {
     cy.contains('button', 'Save').click().wait('@saveDoc').wait(2000) // navigates away after saving
     cy.contains('You have unsaved changes').should('not.exist')
   })
+
+  it('should show a list of comments', () => {
+    cy.wait(1000).get('a').contains('Comments').click().wait(1000)
+    cy.get('app-document-comments').find('.card').its('length').should('eq', 3)
+  })
+
+  it('should support comment deletion', () => {
+    cy.wait(1000).get('a').contains('Comments').click().wait(1000)
+    cy.get('app-document-comments')
+      .find('.card')
+      .first()
+      .find('button')
+      .click({ force: true })
+      .wait(500)
+    cy.get('app-document-comments').find('.card').its('length').should('eq', 2)
+  })
+
+  it('should support comment insertion', () => {
+    cy.wait(1000).get('a').contains('Comments').click().wait(1000)
+    cy.get('app-document-comments')
+      .find('form textarea')
+      .type('Testing new comment')
+      .wait(500)
+    cy.get('app-document-comments').find('form button').click().wait(1500)
+    cy.get('app-document-comments').find('.card').its('length').should('eq', 4)
+  })
 })
diff --git a/src-ui/cypress/fixtures/documents/1/comments.json b/src-ui/cypress/fixtures/documents/1/comments.json
new file mode 100644
index 000000000..73e932187
--- /dev/null
+++ b/src-ui/cypress/fixtures/documents/1/comments.json
@@ -0,0 +1,46 @@
+[
+    {
+        "id": 10,
+        "comment": "Testing new comment",
+        "created": "2022-08-08T04:24:55.176008Z",
+        "user": {
+            "id": 1,
+            "username": "user2",
+            "firstname": "",
+            "lastname": ""
+        }
+    },
+    {
+        "id": 9,
+        "comment": "Testing one more time",
+        "created": "2022-02-18T04:24:55.176008Z",
+        "user": {
+            "id": 2,
+            "username": "user1",
+            "firstname": "",
+            "lastname": ""
+        }
+    },
+    {
+        "id": 8,
+        "comment": "Another comment",
+        "created": "2021-11-08T04:24:47.925042Z",
+        "user": {
+            "id": 2,
+            "username": "user33",
+            "firstname": "",
+            "lastname": ""
+        }
+    },
+    {
+        "id": 7,
+        "comment": "Cupcake ipsum dolor sit amet cheesecake candy cookie tiramisu. Donut chocolate chupa chups macaroon brownie halvah pie cheesecake gummies. Sweet chocolate bar candy donut gummi bears bear claw liquorice bonbon shortbread.\n\nDonut chocolate bar candy wafer wafer tiramisu. Gummies chocolate cake muffin toffee carrot cake macaroon. Toffee toffee jelly beans danish lollipop cake.",
+        "created": "2021-02-08T02:37:49.724132Z",
+        "user": {
+            "id": 3,
+            "username": "admin",
+            "firstname": "",
+            "lastname": ""
+        }
+    }
+]
diff --git a/src-ui/src/app/components/document-comments/document-comments.component.html b/src-ui/src/app/components/document-comments/document-comments.component.html
index 7e4afa90a..9a2e7debb 100644
--- a/src-ui/src/app/components/document-comments/document-comments.component.html
+++ b/src-ui/src/app/components/document-comments/document-comments.component.html
@@ -17,11 +17,11 @@
         </div>
         <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
             <span>{{displayName(comment)}} - {{ comment.created | customDate}}</span>
-            <btn class="btn btn-link btn-sm p-0 fade" (click)="deleteComment(comment.id)">
+            <button type="button" class="btn btn-link btn-sm p-0 fade" (click)="deleteComment(comment.id)">
                 <svg width="13" height="13" fill="currentColor">
                     <use xlink:href="assets/bootstrap-icons.svg#trash" />
                 </svg>
-            </btn>
+            </button>
         </div>
     </div>
 </div>