diff --git a/src/app/comment.service.ts b/src/app/comment.service.ts
index 48f7d8e356f0ed53a2acf75b366ba4aa43e6a9cd..7acaa5a05df7ffe7ee042c2b7d925174e32cd90d 100644
--- a/src/app/comment.service.ts
+++ b/src/app/comment.service.ts
@@ -18,6 +18,11 @@ export class CommentService {
     return this.http.post<Comment>(this.commentsUrl, comment, httpOptions);
   }
 
+  deleteComment(comment: Comment): Observable<Comment> {
+    const url = `${this.commentsUrl}/${comment.id}`;
+    return this.http.delete<Comment>(url, httpOptions);
+  }
+
   getComments(roomId: string): Observable<Comment[]> {
     const url = `${this.commentsUrl}/?roomId=${roomId}`;
     return this.http.get<Comment[]>(url);
diff --git a/src/app/comment/comment.component.html b/src/app/comment/comment.component.html
index 1e55f3fb4cbe7f6f44f05831d523ca7f7374d5b8..10008393cbbd2bff03c4c81f61e828af5b9ab103 100644
--- a/src/app/comment/comment.component.html
+++ b/src/app/comment/comment.component.html
@@ -3,14 +3,20 @@
     <li *ngFor="let comment of comments">
       <mat-card>
         <mat-card-content>
-          <h3>{{comment.subject}}</h3><br>
+          <div class="comment-body">
+            <h3>{{comment.subject}}</h3><br>
 
-         {{comment.body}}
+            {{comment.body}}
+
+            <div class="trash-icon">
+              <i class="material-icons" (click)="delete(comment)">delete</i>
+            </div>
+          </div>
         </mat-card-content>
         <mat-card-footer>
           <div class="date">
-           <i> {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
-         </div>
+           <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
+          </div>
          </mat-card-footer>
       </mat-card><br>
     </li>
diff --git a/src/app/comment/comment.component.scss b/src/app/comment/comment.component.scss
index 59e5556d17aa9142670dfd8172269a5994027d6b..f02c662dfdacc9fd2779410ef288341d02c07410 100644
--- a/src/app/comment/comment.component.scss
+++ b/src/app/comment/comment.component.scss
@@ -1,3 +1,9 @@
+.trash-icon {
+  position: absolute;
+  top: 50%;
+  left: 98%;
+}
+
 .date {
   text-align: right;
   font-size: 80%;
diff --git a/src/app/comment/comment.component.ts b/src/app/comment/comment.component.ts
index f8ab68b39e9407832a0d3643ddac9859c0b5a96a..a68751c8f422c9bc862cea360e83d609b4928618 100644
--- a/src/app/comment/comment.component.ts
+++ b/src/app/comment/comment.component.ts
@@ -31,8 +31,7 @@ export class CommentComponent implements OnInit {
     this.roomService.getRoom(id).subscribe(
       params => {
         this.getComments(params['id'], params['name']);
-      }
-    );
+      });
   }
 
   getComments(roomId: string, roomName: string): void {
@@ -41,6 +40,13 @@ export class CommentComponent implements OnInit {
     this.notification.show(`All comments of room "${roomName}" loaded!`);
   }
 
+  delete(comment: Comment): void {
+    this.comments = this.comments.filter(c => c !== comment);
+    this.commentService.deleteComment(comment).subscribe(room => {
+      this.notification.show(`Comment '${comment.subject}' successfully deleted.`);
+    });
+  }
+
   goBack(): void {
     this.location.back();
   }