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 6937a624c..1cf1d6382 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
@@ -1,13 +1,14 @@
 <section *ngIf="appStateService.activeFile" [class.fullscreen]="fullScreen">
     <div class="page-header">
         <div class="flex-1">
-            <div
-                [matTooltip]="(canNotSwitchToRedactedView ? 'file-preview.cannot-show-redacted-view' : 'file-preview.show-redacted-view') | translate"
-                class="fit-content"
-            >
-                <mat-slide-toggle [(ngModel)]="redactedView" [disabled]="canNotSwitchToRedactedView" color="primary" labelPosition="after">
-                    {{ 'file-preview.view-toggle' | translate }}
-                </mat-slide-toggle>
+            <div class="red-input-group slider-row">
+                <mat-button-toggle-group [value]="viewMode" (change)="switchView($event)" appearance="legacy">
+                    <mat-button-toggle [value]="'STANDARD'"> {{ 'file-preview.standard' | translate }}</mat-button-toggle>
+                    <mat-button-toggle [value]="'DELTA'" [disabled]="canNotSwitchToRedactedView"> {{ 'file-preview.delta' | translate }}</mat-button-toggle>
+                    <mat-button-toggle [value]="'REDACTED'" [disabled]="canNotSwitchToRedactedView">
+                        {{ 'file-preview.redacted' | translate }}</mat-button-toggle
+                    >
+                </mat-button-toggle-group>
             </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 0315b628d..6304b06e5 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
@@ -29,6 +29,8 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { FileManagementControllerService, StatusControllerService } from '@redaction/red-ui-http';
 import { PdfViewerDataService } from '../service/pdf-viewer-data.service';
 import { download } from '../../../utils/file-download-utils';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { ViewMode } from '../model/view-mode';
 
 const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F', 'Escape'];
 
@@ -39,9 +41,10 @@ const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F',
 })
 export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     private projectId: string;
-    private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED';
     private _instance: WebViewerInstance;
     private _dialogRef: MatDialogRef<any>;
+
+    public viewMode: ViewMode = 'STANDARD';
     public fullScreen = false;
     public editingReviewer = false;
     public reviewerForm: FormGroup;
@@ -96,16 +99,10 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         });
     }
 
-    get redactedView() {
-        return this._activeViewer === 'REDACTED';
-    }
-
-    set redactedView(value: boolean) {
-        this._activeViewer = value ? 'REDACTED' : 'ANNOTATED';
-
+    updateViewMode() {
         const allAnnotations = this._instance.annotManager.getAnnotationsList();
         const redactions = allAnnotations.filter((a) => a.getCustomData('redaction'));
-        if (this._activeViewer === 'ANNOTATED') {
+        if (this.viewMode === 'STANDARD') {
             redactions.forEach((redaction) => {
                 redaction['StrokeColor'] = redaction.getCustomData('annotationColor');
             });
@@ -121,7 +118,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     }
 
     private _updateCanPerformActions() {
-        this.canPerformAnnotationActions = this.permissionsService.canPerformAnnotationActions() && this._activeViewer === 'ANNOTATED';
+        this.canPerformAnnotationActions = this.permissionsService.canPerformAnnotationActions() && this.viewMode === 'STANDARD';
     }
 
     get activeViewer() {
@@ -497,7 +494,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         this._fileDownloadService.loadActiveFileManualAnnotations().subscribe((manualRedactions) => {
             this.fileData.manualRedactions = manualRedactions;
             this._rebuildFilters();
-            this._annotationDrawService.drawAnnotations(this._instance, this.annotations, this.redactedView);
+            this._annotationDrawService.drawAnnotations(this._instance, this.annotations, this.viewMode);
         });
     }
 
@@ -509,7 +506,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         this._fileDownloadService.loadActiveFileManualAnnotations().subscribe((manualRedactions) => {
             this.fileData.manualRedactions = manualRedactions;
             this._rebuildFilters();
-            if (!this.redactedView) {
+            if (this.viewMode === 'STANDARD') {
                 currentPageAnnotationIds.forEach((id) => {
                     this._findAndDeleteAnnotation(id);
                 });
@@ -628,4 +625,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
     }
 
     // <!-- End Dev Mode Features-->
+    switchView($event: MatButtonToggleChange) {
+        this.viewMode = $event.value;
+        this.updateViewMode();
+    }
 }
diff --git a/apps/red-ui/src/app/screens/file/model/view-mode.ts b/apps/red-ui/src/app/screens/file/model/view-mode.ts
new file mode 100644
index 000000000..e4f649334
--- /dev/null
+++ b/apps/red-ui/src/app/screens/file/model/view-mode.ts
@@ -0,0 +1 @@
+export type ViewMode = 'STANDARD' | 'DELTA' | 'REDACTED';
diff --git a/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts b/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
index bd5b46592..47e209b23 100644
--- a/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
+++ b/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
@@ -5,6 +5,7 @@ import { hexToRgb } from '../../../utils/functions';
 import { AppStateService } from '../../../state/app-state.service';
 import { AnnotationWrapper } from '../model/annotation.wrapper';
 import { UserPreferenceService } from '../../../common/service/user-preference.service';
+import { ViewMode } from '../model/view-mode';
 
 @Injectable({
     providedIn: 'root'
@@ -16,10 +17,10 @@ export class AnnotationDrawService {
         private readonly _userPreferenceService: UserPreferenceService
     ) {}
 
-    public drawAnnotations(activeViewer: WebViewerInstance, annotationWrappers: AnnotationWrapper[], redactedOnly: boolean = false) {
+    public drawAnnotations(activeViewer: WebViewerInstance, annotationWrappers: AnnotationWrapper[], viewMode: ViewMode = 'STANDARD') {
         const annotations = [];
         annotationWrappers.forEach((annotation) => {
-            if (redactedOnly) {
+            if (viewMode === 'REDACTED') {
                 if (annotation.isRedacted) {
                     const pdfViewerAnnotation = this.computeAnnotation(activeViewer, annotation);
                     annotations.push(pdfViewerAnnotation);
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 76786fb8f..7b388e193 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -276,6 +276,9 @@
         }
     },
     "file-preview": {
+        "delta": "Delta",
+        "redacted": "Preview",
+        "standard": "Standard",
         "no-annotations-for-page": "There are no redactions, hints or requests on this page.",
         "show-redacted-view": "Show Redacted Preview",
         "cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",