diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/components/status-bar/status-bar.component.html
index 3e36c7142..20c45cc8a 100644
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.html
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.html
@@ -1,6 +1,6 @@
-<div class="rectangle-container">
+<div class="rectangle-container" [ngClass]="{ small: small }">
   <div *ngFor="let rect of config" [className]="'section-wrapper flex-' + rect.length">
-    <div *ngIf="rect.title" class="subtitle">{{ rect.title }}</div>
     <div [className]="'rectangle ' + rect.color "></div>
+    <div *ngIf="rect.title" class="subtitle">{{ rect.title }}</div>
   </div>
 </div>
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
index bf1cd8db1..983674178 100644
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
@@ -5,8 +5,16 @@
   display: flex;
   width: 100%;
 
-  .subtitle {
-    margin-bottom: 8px;
+  &.small {
+    .rectangle {
+      width: 12px;
+    }
+
+    .section-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
   }
 
   .section-wrapper:first-child {
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts
index 12f646bf2..a6a23e4b1 100644
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts
@@ -14,6 +14,9 @@ export class StatusBarComponent implements OnInit {
     title?: string,
   }[] = [];
 
+  @Input()
+  public small = false;
+
   constructor() {
   }
 
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 89c25f203..b6ddefadb 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
@@ -29,26 +29,41 @@
     </div>
 
     <div class="right-fixed-container">
-      <div class="actions-row">
-        <div>Edit</div>
-        <div>Delete</div>
-        <div>View</div>
-      </div>
 
-      <div class="tabs">
-        <div class="tabs-title-row flex-row">
-          <div class="tab"
-               [ngClass]="{ active: selectedTab === 'ANNOTATIONS'}"
-               (click)="selectTab('ANNOTATIONS')">
-            Annotations
-          </div>
-          <div class="tab"
-               [ngClass]="{ active: selectedTab === 'INFO'}"
-               (click)="selectTab('INFO')">
-            Info
+      <!-- Quick navigation tab-->
+      <div class="vertical" (click)="selectTab('NAVIGATION')" [ngClass]="{ active: navigationTab}">
+        <div class="tab-title" [ngClass]="navigationTab ? 'heading' : 'subheading'">
+          Quick Navigation
+        </div>
+
+        <div *ngIf="navigationTab" class="tab-content">
+          <div *ngFor="let item of quickNavigation | sortBy:'asc':'number'"
+               class="page-navigation"
+               [ngClass]="{ active: item.pageNumber === selectedPageNumber }"
+               (click)="selectPage(item.pageNumber)"
+          >
+            <div class="page-number">Page {{ item.pageNumber }}</div>
+            <div class="stats-subtitle subtitle mt-5">
+              <div *ngIf="item.redactions">
+                <mat-icon svgIcon="red:files"></mat-icon>
+                {{item.redactions}}
+              </div>
+              <div *ngIf="item.hints">
+                <mat-icon svgIcon="red:files"></mat-icon>
+                {{item.hints}}
+              </div>
+            </div>
           </div>
         </div>
-        <div class="tab-content" #annotationsContainer *ngIf="selectedTab === 'ANNOTATIONS'">
+      </div>
+
+      <!-- Annotations tab-->
+      <div (click)="selectTab('ANNOTATIONS')" class="vertical" [ngClass]="{ active: annotationsTab }">
+        <div class="tab-title" [ngClass]="annotationsTab ? 'heading' : 'subheading'">
+          Annotations
+        </div>
+
+        <div *ngIf="annotationsTab" class="tab-content" #annotationsContainer>
           <div *ngFor="let annotation of annotations"
                class="annotation" [id]="'ann-' + annotation.Id"
                (click)="selectAnnotation(annotation)"
@@ -59,19 +74,26 @@
             <div>{{annotation.getStatus()}}</div>
           </div>
         </div>
-        <div class="tab-content" *ngIf="selectedTab === 'INFO'">
-          <redaction-status-bar
-            [config]="[{ length: 1, color: 'grey', title: 'Unassigned'}]"
-          ></redaction-status-bar>
+      </div>
 
-          <div class="subtitle stats-subtitle mt-20">
+      <!-- Info tab-->
+      <div class="vertical" (click)="selectTab('INFO')" [ngClass]="{ active: infoTab}">
+        <div class="tab-title" [ngClass]="infoTab ? 'heading' : 'subheading'">
+          Info
+        </div>
+
+        <div *ngIf="infoTab" class="tab-content info-container">
+          <redaction-status-bar [small]="true"
+                                [config]="[{ length: 1, title: 'Unassigned', color: 'grey'}]"></redaction-status-bar>
+
+          <div class="subtitle stats-subtitle mt-5">
             <div>645</div>
             <div>9</div>
           </div>
 
           <div class="flex-row mt-20">
-            <redaction-initials-avatar size="large"></redaction-initials-avatar>
-            <a class="assign-reviewer">+ Assign Reviewer</a>
+            <redaction-initials-avatar size="large" color="red-white"></redaction-initials-avatar>
+            <a class="assign-reviewer">Assign Reviewer</a>
           </div>
 
           <div class="subheading mt-20">
@@ -97,7 +119,6 @@
         </div>
       </div>
     </div>
-
   </div>
   <button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
     <mat-icon svgIcon="red:info"></mat-icon>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 8b1faef8f..8df97f57d 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -14,56 +14,64 @@ redaction-pdf-viewer {
 .right-fixed-container {
   padding: 0;
   width: calc(#{$right-container-width} - 1px);
+  display: flex;
 
-  .tabs-title-row {
-    border-bottom: 1px solid rgba(226,228,233,0.9);
-    box-sizing: border-box;
-    height: 45px;
+  .vertical {
+    height: 100%;
+    border-right: 1px solid $separator;
 
-    .tab {
-      font-size: 13px;
-      font-weight: 600;
-      line-height: 18px;
-      padding: 12px;
-      cursor: pointer;
-      border-bottom: 3px solid transparent;
+    &.active {
+      width: calc(#{$right-container-width} - 80px);
+      padding-top: 0;
 
-      &:first-child {
-        margin-left: 2px;
+      .tab-title {
+        height: 70px;
+        display: flex;
+        border-bottom: 1px solid $separator;
+        align-items: center;
+        padding: 0 25px;
       }
 
-      &.active {
-        color: $red-1;
-        border-bottom: 3px solid $red-1;
+      .tab-content {
+        overflow-y: scroll;
+        overflow-x: hidden;
+        height: calc(100vh - 110px - 73px);
+        box-sizing: border-box;
+
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none;  /* IE 10+ */
+        &::-webkit-scrollbar {
+          width: 0;
+          background: transparent; /* Chrome/Safari/Webkit */
+        }
+      }
+
+      .info-container {
+        padding: 15px;
       }
     }
-  }
 
-  .actions-row {
-    margin: $right-container-padding $right-container-padding 0;
-  }
+    &:not(.active) {
+      width: 40px;
+      padding-top: 15px;
+      cursor: pointer;
 
-  .tab-content {
-    padding: $right-container-padding;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: calc(100vh - 110px - 40px - 45px - 3*#{$right-container-padding});
-  }
-
-  .stats-subtitle {
-    font-size: 13px;
-    line-height: 16px;
+      .tab-title {
+        transform: translateX(27px) rotate(90deg);
+        transform-origin: 0 0;
+        position: absolute;
+      }
+    }
   }
 
   .assign-reviewer {
     font-size: 13px;
     line-height: 16px;
-
     margin-left: 12px;
   }
 
   .annotation {
-    border: 1px solid $grey-2;
+    border-bottom: 1px solid $separator;
     padding: 14px;
     font-size: 12px;
     cursor: pointer;
@@ -72,4 +80,25 @@ redaction-pdf-viewer {
       border-left: 2px solid $red-1;
     }
   }
+
+  .page-navigation {
+    cursor: pointer;
+    border-bottom: 1px solid $separator;
+    padding: 14px;
+    border-left: 4px solid transparent;
+
+    &:hover {
+      background-color: #F4F5F7;
+    }
+
+    .page-number {
+      font-size: 13px;
+      line-height: 18px;
+      font-weight: 600;
+    }
+
+    &.active {
+      border-left: 4px solid $red-1;
+    }
+  }
 }
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 9b6ba2e0d..e02930c71 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
@@ -22,6 +22,7 @@ export class FilePreviewScreenComponent implements OnInit {
   private _readyViewers: string[] = [];
   private _clickedAnnotationInSidebar = false;
   private projectId: string;
+  private _selectedTab: 'NAVIGATION' | 'ANNOTATIONS' | 'INFO' = 'NAVIGATION';
 
   @ViewChild(PdfViewerComponent)
   private _viewerComponent: PdfViewerComponent;
@@ -31,8 +32,9 @@ export class FilePreviewScreenComponent implements OnInit {
 
   public fileId: string;
   public annotations: Annotations.Annotation[] = [];
-  public selectedTab: 'ANNOTATIONS' | 'INFO' = 'ANNOTATIONS';
   public selectedAnnotation: Annotations.Annotation;
+  public selectedPageNumber: number;
+  public quickNavigation: { pageNumber: number, redactions: number, hints: number }[] = [];
 
   constructor(
     public readonly appStateService: AppStateService,
@@ -53,11 +55,11 @@ export class FilePreviewScreenComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     this._viewerSyncService.activateViewer('ANNOTATED');
   }
 
-  showDetailsDialog($event: MouseEvent) {
+  public showDetailsDialog($event: MouseEvent) {
     $event.stopPropagation();
     this._dialog.open(FileDetailsDialogComponent, {
       width: '600px',
@@ -66,32 +68,41 @@ export class FilePreviewScreenComponent implements OnInit {
     });
   }
 
-  fileReady(viewer: string) {
+  public fileReady(viewer: string) {
     this._readyViewers.push(viewer);
     this._changeDetectorRef.detectChanges();
   }
 
-  get viewReady() {
+  public get viewReady() {
     return this._readyViewers.length >= 2;
   }
 
-  get activeViewer() {
+  public get activeViewer() {
     return this._viewerSyncService.activeViewer;
   }
 
-  activateViewer(value: string) {
+  public activateViewer(value: string) {
     this._viewerSyncService.activateViewer(value);
   }
 
-  selectTab(value: 'ANNOTATIONS' | 'INFO') {
-    this.selectedTab = value;
+  public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') {
+    this._selectedTab = value;
   }
 
-  handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
+  public handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
     this._changeDetectorRef.detectChanges();
     for (const annotation of annotations) {
       if (annotation.Id.indexOf(':') >= 0) {
         this.annotations.push(annotation);
+        const pageNumber = annotation.getPageNumber();
+        console.log({pageNumber})
+        let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
+        if (!el) {
+          el = { pageNumber, redactions: 0, hints: 0 }
+          this.quickNavigation.push(el);
+        }
+        if (annotation.Id.startsWith('hint:')) { el.hints++; }
+        if (annotation.Id.startsWith('redaction:')) { el.redactions++; }
       }
     }
     this.annotations = AnnotationUtils.sortAnnotations(this.annotations);
@@ -129,4 +140,21 @@ export class FilePreviewScreenComponent implements OnInit {
       this._annotationsContainer.nativeElement.scroll({ top: scrollTop + top - headerHeight, behavior: 'smooth' });
     }
   }
+
+  public get navigationTab() {
+    return this._selectedTab === 'NAVIGATION';
+  }
+
+  public get annotationsTab() {
+    return this._selectedTab === 'ANNOTATIONS';
+  }
+
+  public get infoTab() {
+    return this._selectedTab === 'INFO';
+  }
+
+  public selectPage(pageNumber: number) {
+    this.selectedPageNumber = pageNumber;
+    this._viewerComponent.navigateToPage(pageNumber);
+  }
 }
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 39ae8678a..c1140d588 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
@@ -94,7 +94,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       }));
 
-      instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
+      instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
       instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
     });
   }
@@ -162,5 +162,9 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
       0,
       annotation.getY() - 100);
   }
+
+  public navigateToPage(pageNumber: number) {
+    this.wvInstance.docViewer.displayPageLocation(pageNumber, 0, 0);
+  }
 }
 
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index 3c707e309..064f81453 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -2,12 +2,6 @@
 
 .stats-subtitle {
   margin-top: 6px;
-
-  mat-icon {
-    width: 12px;
-    height: 12px;
-    margin-right: 4px;
-  }
 }
 
 .stats-bar {
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 8502d10e5..aa5127646 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -29,10 +29,6 @@
         </div>
       </div>
 
-      <div class="table-header">
-        <redaction-status-bar [config]="[{ length: 2, color: 'yellow', title: 'text 1'}, { length: 1, color: 'green', title: 'text 2'}]"></redaction-status-bar>
-      </div>
-
       <div class="table-col-names">
         <div class="flex-3 subtitle min-width" translate="project-overview.table-col-names.name.label"></div>
         <div class="flex-2 subtitle min-width" translate="project-overview.table-col-names.added-on.label"></div>
@@ -120,7 +116,7 @@
 
       <div class="project-team mt-20">
         <div class="subheading" translate="project-overview.project-details.project-team.label"></div>
-        <div class="flex mt-20">
+        <div class="flex mt-20 members-container">
           <div *ngFor="let username of ['S H', 'D O', 'E G', 'D V', 'J A', 'T H', 'P B']" class="member">
             <redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
           </div>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
index c626ee8f2..b80225463 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@@ -29,9 +29,7 @@
     line-height: 18px;
   }
 
-  .project-team {
-    .member:not(:last-child) {
-      margin-right: 5px;
-    }
+  .members-container {
+    gap: 5px;
   }
 }
diff --git a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
index 6c1299786..bafe332a3 100644
--- a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
@@ -1,6 +1,6 @@
 <section class="red-upload-overlay mat-elevation-z4">
   <div class="red-upload-header" (click)="collapsed = !collapsed">
-    <div class="text">
+    <div class="title">
       {{ 'upload-status.dialog.title.label' | translate: {p1: uploadService.files.length} }}
     </div>
     <div class="collapse-icon" *ngIf="!collapsed">
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index f49c98a69..9d836670f 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -10,11 +10,11 @@
   border-radius: 12px;
   font-size: 10px;
   border: 1px solid #E2E4E9;
-  font-family: Inter, sans-serif;
   letter-spacing: 0;
   line-height: 12px;
   text-align: center;
-
+  text-transform: uppercase;
+  font-family: Inter, sans-serif;
 
   &.large {
     height: 32px;
@@ -50,7 +50,11 @@
     align-items: center;
   }
 
-  > div:not(:last-child) {
-    margin-right: 12px;
+  gap: 12px;
+
+  mat-icon {
+    width: 10px;
+    height: 10px;
+    margin-right: 4px;
   }
 }
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index c3b586e7b..200d1424c 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -6,7 +6,7 @@ html, body {
   padding: 0;
   height: 100vh;
   font-family: 'Inter', sans-serif;
-  color: $grey-1;
+  color: $accent;
 }
 
 .page-header {
@@ -142,8 +142,6 @@ html, body {
     .app-name {
       margin-left: 16px;
       height: 20px;
-      color: #283241;
-      font-family: Inter, sans-serif;
       font-size: 16px;
       font-weight: 600;
       letter-spacing: 0;
@@ -158,7 +156,7 @@ html, body {
 
   .breadcrumb {
     text-decoration: none;
-    color: $grey-1;
+    color: $accent;
     font-size: 13px;
     line-height: 18px;
     font-weight: 600;
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index b0c767868..818888e5e 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -47,11 +47,6 @@
     @include line-clamp(1);
   }
 
-  .table-item-title--large {
-    font-size: 16px;
-    line-height: 20px;
-  }
-
   .on-hover-wrapper {
     width: 0;
     height: 0;
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index 69bb40bbf..ecee20c9b 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -24,14 +24,17 @@ a {
 }
 
 .heading-l {
-  color: #283241;
-  font-family: Inter, sans-serif;
   font-size: 18px;
-  font-weight: bold;
-  letter-spacing: 0;
+  font-weight: 600;
   line-height: 22px;
 }
 
+.heading {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
 .subheading {
   text-transform: uppercase;
   opacity: 0.7;
diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss
index b7e8da0e5..67531990d 100644
--- a/apps/red-ui/src/assets/styles/red-variables.scss
+++ b/apps/red-ui/src/assets/styles/red-variables.scss
@@ -16,6 +16,8 @@ $red-1: #F65757;
 $yellow-1: #FFB83B;
 $green-1: #46CE7D;
 
+$separator: rgba(226,228,233,0.9);
+
 $right-container-inside-width: 340px;
 $right-container-padding: 16px;
 $right-container-width: calc(#{$right-container-inside-width} + 2*#{$right-container-padding} + 1px);