diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 72b1c0788..53a51feca 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -81,29 +81,14 @@
           <div *ngFor="let item of quickNavigation | sortBy:'asc':'number'"
                class="page-navigation"
                [id]="'quick-nav-page-'+item.pageNumber"
-               [ngClass]="{ active: item.pageNumber === activeViewerPage }"
+               [ngClass]="{ active: item.pageNumber === activeViewerPage, hidden: !showQuickNavigationItem(item) }"
                (click)="selectPage(item.pageNumber)"
           >
             <div class="page-number subtitle">{{ item.pageNumber }}</div>
-            <div *ngIf="item.hints" class="page-stats subtitle">
-              <div class="oval darkgray-white x-small">H</div>
-              {{item.hints}}
-            </div>
-            <div *ngIf="item.redactions" class="page-stats subtitle">
-              <div class="square darkgray-white x-small">R</div>
-              {{item.redactions}}
-            </div>
-            <div *ngIf="item.comments" class="page-stats subtitle">
-              <div class="oval darkgray-white x-small">C</div>
-              {{item.comments}}
-            </div>
-            <div *ngIf="item.requests" class="page-stats subtitle">
-              <div class="oval red-white x-small">S</div>
-              {{item.requests}}
-            </div>
-            <div *ngIf="item.ignore" class="page-stats subtitle">
-              <div class="oval lightgray-white x-small">I</div>
-              {{item.ignore}}
+            <div *ngFor="let key of filterKeys"
+                 [ngClass]="{ hidden: !showAnnotations(item, key)}" class="page-stats subtitle">
+              <div [class]="filters[key].class + ' x-small'">{{ filters[key].symbol }}</div>
+              {{item[key]}}
             </div>
           </div>
         </div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index 2bc6c905b..6aeb277a1 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -24,6 +24,15 @@ import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog
 import { AnnotationFilters } from '../../../utils/types';
 import { FiltersService } from '../service/filters.service';
 
+class QuickNavigationItem {
+  pageNumber: number;
+  hints: number;
+  redactions: number;
+  comments: number;
+  suggestions: number;
+  ignored: number;
+}
+
 @Component({
   selector: 'redaction-file-preview-screen',
   templateUrl: './file-preview-screen.component.html',
@@ -47,14 +56,7 @@ export class FilePreviewScreenComponent implements OnInit {
   public fileId: string;
   public annotations: Annotations.Annotation[] = [];
   public selectedAnnotation: Annotations.Annotation;
-  public quickNavigation: {
-    pageNumber: number,
-    hints: number,
-    redactions: number,
-    comments: number;
-    suggestions: number,
-    ignore: number;
-  }[] = [];
+  public quickNavigation: QuickNavigationItem[] = [];
 
   public filters: AnnotationFilters;
 
@@ -154,14 +156,14 @@ export class FilePreviewScreenComponent implements OnInit {
         const pageNumber = annotation.getPageNumber();
         let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
         if (!el) {
-          el = { pageNumber, redactions: 0, hints: 0, ignore: 0, comments: 0, suggestions: 0 };
+          el = { pageNumber, redactions: 0, hints: 0, ignored: 0, comments: 0, suggestions: 0 };
           this.quickNavigation.push(el);
         }
         if (annotation.Id.startsWith('hint:')) {
           el.hints++;
         }
         if (annotation.Id.startsWith('ignore:')) {
-          el.ignore++;
+          el.ignored++;
         }
         if (annotation.Id.startsWith('redaction:')) {
           el.redactions++;
@@ -171,6 +173,16 @@ export class FilePreviewScreenComponent implements OnInit {
     this.annotations = AnnotationUtils.sortAnnotations(this.annotations);
   }
 
+  public showQuickNavigationItem(item: QuickNavigationItem): boolean {
+    let showItem = false;
+    Object.keys(this.filters).map((key) => {
+      if (this.showAnnotations(item, key)) {
+        showItem = true;
+      }
+    })
+    return showItem;
+  }
+
   public handleAnnotationSelected(annotation: Annotations.Annotation) {
     this.selectedAnnotation = annotation;
     this.selectTab('ANNOTATIONS');
@@ -336,4 +348,8 @@ export class FilePreviewScreenComponent implements OnInit {
     });
     return activeFilters;
   }
+
+  public showAnnotations(item: QuickNavigationItem, type: string): boolean {
+    return item[type] && (!this.hasActiveFilters || (this.hasActiveFilters && this.filters[type]?.value));
+  }
 }
diff --git a/apps/red-ui/src/app/screens/file/service/filters.service.ts b/apps/red-ui/src/app/screens/file/service/filters.service.ts
index 0d1bb937a..cc5a7bf90 100644
--- a/apps/red-ui/src/app/screens/file/service/filters.service.ts
+++ b/apps/red-ui/src/app/screens/file/service/filters.service.ts
@@ -9,10 +9,10 @@ export class FiltersService {
   }
 
   private _filters: AnnotationFilters = {
-    hint: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' },
-    redaction: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' },
-    comment: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' },
-    suggestion: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' },
+    hints: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' },
+    redactions: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' },
+    comments: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' },
+    suggestions: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' },
     ignored: { label: 'file-preview.filter-menu.ignored.label', value: false, class: 'oval lightgray-white', symbol: 'I' },
   }
 
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
index 87f4277b4..013149c7d 100644
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -5,6 +5,11 @@
   font-weight: 400 !important;
   border-radius: 25px !important;
 
+  .mat-button-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
   .dropdown-icon {
     width: 16px;
   }