diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index b188318c4b493d359fe362b919cb4e21ecae5c4b..6ffad6e3f40c7b650078cd4e1aa4ab4b596b7686 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -14,8 +14,8 @@
   <div class="button-bar" fxLayoutAlign="center center">
     <div *ngIf="comments && comments.length > 0">
       <mat-chip-list>
-        <mat-chip class="comment-counter" *ngIf="(!filteredComments) || (comments.length === filteredComments.length)">{{comments.length}}</mat-chip>
-        <mat-chip class="comment-counter" *ngIf="(filteredComments) && (comments.length > filteredComments.length)">{{filteredComments.length}}</mat-chip>
+        <mat-chip class="counter" *ngIf="comments && !hideCommentsList">{{comments.length}}</mat-chip>
+        <mat-chip class="counter counter-filtered" *ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</mat-chip>
       </mat-chip-list>
     </div>
 
@@ -67,7 +67,7 @@
         <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort)">
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort); filterComments('')">
         <mat-icon>close</mat-icon>
       </button>
     </div>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 1c6e49a66c0a04a07699ef1430450ff385109a92..648f96db10f704d0e5042f0e5df4de3987b8bbb7 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -80,8 +80,15 @@ h4  {
   color: var(--yellow);
 }
 
-.comment-counter {
+.counter {
   font-size: 18pt;
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.counter-filtered {
+  background-color: var(--secondary);
+  color: var(--on-secondary);
 }
 
 .up {
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 4ff0c457992334f5dbbc2eb8f9b11d81190df5eb..daa3e2fe4fbb57292bef9a2748a0a0e4f757e044 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -182,6 +182,10 @@ export class CommentListComponent implements OnInit {
 
   filterComments(type: string): void {
     this.currentFilter = type;
+    if (type === '') {
+      this.filteredComments = this.comments;
+      return;
+    }
     this.filteredComments = this.comments.filter(c => {
       switch (type) {
         case this.correct: