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 ace9916fc..0a525c6f4 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
@@ -163,13 +163,13 @@ export class FilePreviewScreenComponent implements OnInit {
         return Object.keys(this.displayedAnnotations).map((key) => Number(key));
     }
 
-    public handleAnnotationSelected(annotation: Annotations.Annotation) {
-        this.selectedAnnotation = new AnnotationWrapper(annotation);
+    public handleAnnotationSelected(annotation: AnnotationWrapper) {
+        this.selectedAnnotation = annotation;
         this.scrollToSelectedAnnotation();
         this._changeDetectorRef.detectChanges();
     }
 
-    public selectAnnotation(annotation: Annotations.Annotation) {
+    public selectAnnotation(annotation: AnnotationWrapper) {
         this._viewerComponent.selectAnnotation(annotation);
     }
 
@@ -354,21 +354,17 @@ export class FilePreviewScreenComponent implements OnInit {
             if (pageIdx !== -1) {
                 // Displayed page has annotations
                 this.selectAnnotation(
-                    this.displayedAnnotations[this.activeViewerPage].annotations[0].annotation
+                    this.displayedAnnotations[this.activeViewerPage].annotations[0]
                 );
             } else {
                 // Displayed page doesn't have annotations
                 if ($event.key === 'ArrowDown') {
                     const nextPage = this._nextPageWithAnnotations();
-                    this.selectAnnotation(
-                        this.displayedAnnotations[nextPage].annotations[0].annotation
-                    );
+                    this.selectAnnotation(this.displayedAnnotations[nextPage].annotations[0]);
                 } else {
                     const prevPage = this._prevPageWithAnnotations();
                     const prevPageAnnotations = this.displayedAnnotations[prevPage].annotations;
-                    this.selectAnnotation(
-                        prevPageAnnotations[prevPageAnnotations.length - 1].annotation
-                    );
+                    this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
                 }
             }
         } else {
@@ -380,26 +376,24 @@ export class FilePreviewScreenComponent implements OnInit {
             if ($event.key === 'ArrowDown') {
                 if (idx + 1 !== annotationsOnPage.length) {
                     // If not last item in page
-                    this.selectAnnotation(annotationsOnPage[idx + 1].annotation);
+                    this.selectAnnotation(annotationsOnPage[idx + 1]);
                 } else if (pageIdx + 1 < this.displayedPages.length) {
                     // If not last page
                     const nextPageAnnotations = this.displayedAnnotations[
                         this.displayedPages[pageIdx + 1]
                     ].annotations;
-                    this.selectAnnotation(nextPageAnnotations[0].annotation);
+                    this.selectAnnotation(nextPageAnnotations[0]);
                 }
             } else {
                 if (idx !== 0) {
                     // If not first item in page
-                    this.selectAnnotation(annotationsOnPage[idx - 1].annotation);
+                    this.selectAnnotation(annotationsOnPage[idx - 1]);
                 } else if (pageIdx) {
                     // If not first page
                     const prevPageAnnotations = this.displayedAnnotations[
                         this.displayedPages[pageIdx - 1]
                     ].annotations;
-                    this.selectAnnotation(
-                        prevPageAnnotations[prevPageAnnotations.length - 1].annotation
-                    );
+                    this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
                 }
             }
         }
@@ -471,10 +465,10 @@ export class FilePreviewScreenComponent implements OnInit {
         this.viewReady = true;
     }
 
-    handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
+    handleAnnotationsAdded(annotations: AnnotationWrapper[]) {
         // replacing array causes UI flicker
         this.annotations.splice(0, this.annotations.length);
-        this.annotations.push(...AnnotationUtils.filterAndConvertAnnotations(annotations));
+        this.annotations.push(...annotations);
         this.filters = this._filtersService.getFilters(
             this.appStateService.dictionaryData,
             this.annotations
@@ -489,7 +483,7 @@ export class FilePreviewScreenComponent implements OnInit {
     }
 
     private _getColor(manualRedactionEntry: ManualRedactionEntry) {
-        let color = this.appStateService.isActiveProjectOwner
+        const color = this.appStateService.isActiveProjectOwner
             ? this.appStateService.getDictionaryColor('request')
             : this.appStateService.getDictionaryColor(manualRedactionEntry.type);
         const rgbColor = hexToRgb(color);
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
index 1c212ec9f..b9d56c40f 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@@ -20,6 +20,8 @@ import { Subject } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { ManualRedactionEntryWrapper } from '../model/manual-redaction-entry.wrapper';
 import { AppStateService } from '../../../state/app-state.service';
+import { AnnotationWrapper } from '../model/annotation.wrapper';
+import { AnnotationUtils } from '../../../utils/annotation-utils';
 
 export interface ViewerState {
     displayMode?: any;
@@ -44,8 +46,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
     @Input() fileStatus: FileStatus;
 
     @Output() fileReady = new EventEmitter();
-    @Output() annotationsAdded = new EventEmitter<Annotations.Annotation[]>();
-    @Output() annotationSelected = new EventEmitter<Annotations.Annotation>();
+    @Output() annotationsAdded = new EventEmitter<AnnotationWrapper[]>();
+    @Output() annotationSelected = new EventEmitter<AnnotationWrapper>();
     @Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntryWrapper>();
     @Output() pageChanged = new EventEmitter<number>();
     @Output() keyUp = new EventEmitter<KeyboardEvent>();
@@ -69,10 +71,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
         this._restoreViewerState = this._restoreViewerState.bind(this);
         // always publish all existing annotations this way everything gets drawn always
         this._annotationEventDebouncer.pipe(throttleTime(300)).subscribe((value) => {
-            this.annotationsAdded.emit(this.instance.annotManager.getAnnotationsList());
+            this.annotationsAdded.emit(
+                AnnotationUtils.filterAndConvertAnnotations(
+                    this.instance.annotManager.getAnnotationsList()
+                )
+            );
             // nasty double-emit fix, the annotationList is not updated when the event is fired
             setTimeout(
-                () => this.annotationsAdded.emit(this.instance.annotManager.getAnnotationsList()),
+                () =>
+                    this.annotationsAdded.emit(
+                        AnnotationUtils.filterAndConvertAnnotations(
+                            this.instance.annotManager.getAnnotationsList()
+                        )
+                    ),
                 200
             );
         });
@@ -112,7 +123,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
                 if (action === 'deselected') {
                     this.annotationSelected.emit(null);
                 } else {
-                    this.annotationSelected.emit(annotationList[0]);
+                    this.annotationSelected.emit(new AnnotationWrapper(annotationList[0]));
                 }
             });
 
@@ -243,10 +254,10 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
         this.instance.setToolbarGroup('toolbarGroup-View');
     }
 
-    public selectAnnotation(annotation: Annotations.Annotation) {
+    public selectAnnotation(annotation: AnnotationWrapper) {
         this.instance.annotManager.deselectAllAnnotations();
-        this.instance.annotManager.selectAnnotation(annotation);
-        this.navigateToPage(annotation.getPageNumber());
+        this.instance.annotManager.selectAnnotation(annotation.annotation);
+        this.navigateToPage(annotation.pageNumber);
     }
 
     public navigateToPage(pageNumber: number) {