diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
index 2da4583a7..06d7ec7bb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
@@ -1,6 +1,8 @@
 .details {
     display: flex;
     position: relative;
+    font-size: 11px;
+    line-height: 14px;
 }
 
 .active-icon-marker-container {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 1f651a5ae..fbc7b496a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
@@ -1,20 +1,35 @@
-<div class="content-container">
-    <div class="dialog references-dialog">
-        <div class="references-header flex">
-            <div class="small-label">X REFERENCES</div>
-            <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
-        </div>
-        <div class="annotations-container flex">
-            <div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
-                <div class="annotation-card-container">
-                    <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
+<ng-container *ngIf="annotationReferences">
+    <div class="content-container">
+        <div class="dialog references-dialog">
+            <div class="references-header flex">
+                <div class="small-label">
+                    {{ annotationReferences.length }} {{ annotationReferences.length === 1 ? 'REFERENCE' : 'REFERENCES' }}
                 </div>
+                <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
             </div>
-            <div class="annotation-container" *ngFor="let reference of annotationReferences">
-                <div class="annotation-card-container">
-                    <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
+            <div class="annotations-container flex">
+                <div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
+                    <div class="annotation-card-container flex">
+                        <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
+                        <redaction-annotation-references-page-indicator
+                            [number]="annotation.pageNumber"
+                        ></redaction-annotation-references-page-indicator>
+                    </div>
+                </div>
+                <div
+                    class="annotation-container"
+                    *ngFor="let reference of annotationReferences"
+                    (click)="referenceClicked.emit(reference)"
+                    [style.cursor]="'pointer'"
+                >
+                    <div class="annotation-card-container flex">
+                        <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
+                        <redaction-annotation-references-page-indicator
+                            [number]="reference.pageNumber"
+                        ></redaction-annotation-references-page-indicator>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index bca793333..6fc20e682 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -8,7 +8,7 @@
     top: 165px;
 
     .references-header {
-        padding: 13px 13px 0 13px;
+        padding: 8px 8px 8px 13px;
         align-items: center;
         justify-content: space-between;
     }
@@ -18,10 +18,12 @@
 
         .annotation-container {
             width: 100%;
-            border: 1px solid rgba(226, 228, 233, 0.9);
+            border-top: 1px solid rgba(226, 228, 233, 0.9);
 
             .annotation-card-container {
                 padding: 11px 16px 16px 10px;
+                justify-content: space-between;
+                align-items: flex-start;
             }
         }
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 2918d5afb..f0a8ac168 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { File } from '@red/domain';
@@ -10,11 +10,13 @@ import { FileDataModel } from '@models/file/file-data.model';
     templateUrl: './annotation-references-dialog.component.html',
     styleUrls: ['./annotation-references-dialog.component.scss'],
 })
-export class AnnotationReferencesDialogComponent implements OnInit {
+export class AnnotationReferencesDialogComponent implements OnInit, OnChanges {
     @Input()
     annotation: AnnotationWrapper;
     @Input()
     file: File;
+    @Output()
+    readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
     fileData: FileDataModel;
     annotationReferences: AnnotationWrapper[];
 
@@ -24,11 +26,19 @@ export class AnnotationReferencesDialogComponent implements OnInit {
     ) {}
 
     async ngOnInit(): Promise<void> {
+        await this.setReferences();
+    }
+
+    async ngOnChanges(changes: SimpleChanges): Promise<void> {
+        await this.setReferences();
+    }
+
+    async setReferences(): Promise<void> {
         await this._loadFileData(this.file);
         this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
     }
 
-    private async _loadFileData(file: File): Promise<void | boolean> {
+    private async _loadFileData(file: File): Promise<void> {
         const fileData = await this._fileDownloadService.loadDataFor(file, this.fileData).toPromise();
 
         if (file.isPending) {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html
new file mode 100644
index 000000000..0b5e6e40b
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.html
@@ -0,0 +1,6 @@
+<div class="page-number-wrapper">
+    <mat-icon [svgIcon]="'red:page'"></mat-icon>
+    <div class="text">
+        {{ number }}
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss
new file mode 100644
index 000000000..d8ac8ff76
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.scss
@@ -0,0 +1,23 @@
+.page-number-wrapper {
+    position: relative;
+    height: 30px;
+
+    mat-icon {
+        width: 27px;
+        height: 100%;
+    }
+
+    .text {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 11px;
+        line-height: 11px;
+        position: absolute;
+        background: transparent;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
new file mode 100644
index 000000000..42761871a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'redaction-annotation-references-page-indicator',
+    templateUrl: './annotation-references-page-indicator.component.html',
+    styleUrls: ['./annotation-references-page-indicator.component.scss'],
+})
+export class AnnotationReferencesPageIndicatorComponent {
+    @Input() number;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index ecbdb645e..ed812c15b 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -48,4 +48,5 @@
     *ngIf="annotationReferencesService.annotation$ | async as annotation"
     [annotation]="annotation"
     [file]="file"
+    (referenceClicked)="annotationClicked($event, null)"
 ></redaction-annotation-references-dialog>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 4671bf016..16ad21f1e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -36,14 +36,14 @@ export class AnnotationsListComponent implements OnChanges {
     }
 
     annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {
-        if (($event.target as IqserEventTarget).localName === 'input') {
+        if (($event?.target as IqserEventTarget)?.localName === 'input') {
             return;
         }
         this.pagesPanelActive.emit(false);
         if (this.isSelected(annotation.annotationId)) {
             this.deselectAnnotations.emit([annotation]);
         } else {
-            if (this.canMultiSelect && ($event.ctrlKey || $event.metaKey) && this.selectedAnnotations.length > 0) {
+            if (this.canMultiSelect && ($event?.ctrlKey || $event?.metaKey) && this.selectedAnnotations.length > 0) {
                 this.multiSelectService.activate();
             }
             this.selectAnnotations.emit([annotation]);
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
index dea30eb79..ee9ce8bf2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
@@ -22,6 +22,7 @@ import { UserManagementComponent } from './components/user-management/user-manag
 import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
 import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
 import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
+import { AnnotationReferencesPageIndicatorComponent } from './components/annotation-references-page-indicator/annotation-references-page-indicator.component';
 
 const routes: Routes = [
     {
@@ -50,6 +51,7 @@ const routes: Routes = [
         AcceptRecommendationDialogComponent,
         AnnotationReferencesDialogComponent,
         AnnotationCardComponent,
+        AnnotationReferencesPageIndicatorComponent,
     ],
     imports: [
         RouterModule.forChild(routes),