diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 32afdf260..1ce33d29d 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/apps/red-ui/src/app/app-routing.module.ts
@@ -15,6 +15,7 @@ import { DashboardGuard } from '@guards/dashboard-guard.service';
 import { TrashGuard } from '@guards/trash.guard';
 import { ARCHIVE_ROUTE, BreadcrumbTypes, DOSSIER_ID, DOSSIER_TEMPLATE_ID, DOSSIERS_ARCHIVE, DOSSIERS_ROUTE, FILE_ID } from '@red/domain';
 import { DossierFilesGuard } from '@guards/dossier-files-guard';
+import { WebViewerLoadedGuard } from './modules/pdf-viewer/services/webviewer-loaded.guard';
 
 const routes: Routes = [
     {
@@ -94,7 +95,7 @@ const routes: Routes = [
                             },
                             {
                                 path: `:${DOSSIER_ID}/file/:${FILE_ID}`,
-                                canActivate: [CompositeRouteGuard],
+                                canActivate: [CompositeRouteGuard, WebViewerLoadedGuard],
                                 data: {
                                     routeGuards: [DossierFilesGuard],
                                     breadcrumbs: [BreadcrumbTypes.dossierTemplate, BreadcrumbTypes.dossier, BreadcrumbTypes.file],
diff --git a/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts b/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
index 637a0d150..a65b8fd96 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
@@ -14,7 +14,6 @@ import { EntitiesService, shareLast, Toaster } from '@iqser/common-ui';
 import { RedactionLogService } from '@services/files/redaction-log.service';
 import { TextHighlightService } from '@services/files/text-highlight.service';
 import { ViewModeService } from './view-mode.service';
-import { Core } from '@pdftron/webviewer';
 import dayjs from 'dayjs';
 import { NGXLogger } from 'ngx-logger';
 import { MultiSelectService } from './multi-select.service';
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html
index 34025fc63..d62045d54 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html
+++ b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html
@@ -1 +1 @@
-<input #input (input)="upload($event.target['files'])" accept="application/pdf" type="file" />
+<input #input (input)="upload($event.target['files'])" accept="application/pdf" id="compareFileInput" type="file" />
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts
index ad92e70c7..99e3e961e 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts
@@ -20,7 +20,7 @@ import PDFDoc = Core.PDFNet.PDFDoc;
     styleUrls: ['./compare-file-input.component.scss'],
 })
 export class CompareFileInputComponent {
-    @ViewChild('input', { static: true }) readonly input: ElementRef;
+    @ViewChild('input', { static: true }) private readonly _input: ElementRef;
 
     constructor(
         private readonly _pdf: PdfViewer,
@@ -44,7 +44,7 @@ export class CompareFileInputComponent {
 
     upload(files: FileList) {
         const fileToCompare = files[0];
-        this.input.nativeElement.value = null;
+        this._input.nativeElement.value = null;
 
         if (!fileToCompare) {
             console.error('No file to compare!');
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
index 13cb7017f..0df39e49d 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
+++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
@@ -1,4 +1,4 @@
-<div #viewer></div>
+<div id="viewer"></div>
 
 <redaction-compare-file-input></redaction-compare-file-input>
 
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
index 219388ddf..a9e9f6442 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
@@ -1,32 +1,8 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { PdfViewer } from './services/pdf-viewer.service';
-import { REDAnnotationManager } from './services/annotation-manager.service';
-import { ViewerHeaderService } from './services/viewer-header.service';
-import { CompareFileInputComponent } from './components/compare-file-input/compare-file-input.component';
-import { REDDocumentViewer } from './services/document-viewer.service';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'redaction-pdf-viewer',
     templateUrl: './pdf-viewer.component.html',
     styleUrls: ['./pdf-viewer.component.scss'],
 })
-export class PdfViewerComponent implements OnInit {
-    @ViewChild('viewer', { static: true }) private readonly _viewer: ElementRef;
-    @ViewChild(CompareFileInputComponent) private readonly _compare: CompareFileInputComponent;
-
-    constructor(
-        private readonly _pdf: PdfViewer,
-        private readonly _annotationManager: REDAnnotationManager,
-        private readonly _documentViewer: REDDocumentViewer,
-        private readonly _viewerHeaderService: ViewerHeaderService,
-    ) {}
-
-    ngOnInit() {
-        const pdfInit = this._pdf.init(this._viewer.nativeElement as HTMLElement);
-        return pdfInit.then(instance => {
-            this._annotationManager.init(instance.Core.annotationManager);
-            this._documentViewer.init(instance.Core.documentViewer);
-            this._viewerHeaderService.init(this._compare.input);
-        });
-    }
-}
+export class PdfViewerComponent {}
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts
index 41d650636..73728338f 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts
@@ -11,6 +11,7 @@ import { PaginatorComponent } from './components/paginator/paginator.component';
 import { MatIconModule } from '@angular/material/icon';
 import { AnnotationDrawService } from './services/annotation-draw.service';
 import { REDDocumentViewer } from './services/document-viewer.service';
+import { WebViewerLoadedGuard } from './services/webviewer-loaded.guard';
 
 @NgModule({
     declarations: [PdfViewerComponent, CompareFileInputComponent, PaginatorComponent],
@@ -24,6 +25,7 @@ import { REDDocumentViewer } from './services/document-viewer.service';
         TooltipsService,
         ViewerHeaderService,
         AnnotationDrawService,
+        WebViewerLoadedGuard,
     ],
 })
 export class PdfViewerModule {}
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
index 5bed4881a..582eb9528 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
@@ -1,4 +1,4 @@
-import { ElementRef, Inject, Injectable, Injector } from '@angular/core';
+import { Inject, Injectable, Injector } from '@angular/core';
 import { IHeaderElement, RotationTypes } from '@red/domain';
 import { HeaderElements, HeaderElementType } from '../../file-preview/utils/constants';
 import { TranslateService } from '@ngx-translate/core';
@@ -145,7 +145,21 @@ export class ViewerHeaderService {
         };
     }
 
-    init(compareFileInput: ElementRef): void {
+    private get _compare(): IHeaderElement {
+        return {
+            type: 'actionButton',
+            element: HeaderElements.COMPARE_BUTTON,
+            dataElement: HeaderElements.COMPARE_BUTTON,
+            img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
+            title: 'Compare',
+            onClick: async () => {
+                document.getElementById('compareFileInput').click();
+                this.#docBeforeCompare = await this._documentViewer.blob();
+            },
+        };
+    }
+
+    init(): void {
         this.#buttons = new Map([
             [HeaderElements.SHAPE_TOOL_GROUP_BUTTON, this._rectangle],
             [HeaderElements.ROTATE_LEFT_BUTTON, this._rotateLeft],
@@ -153,7 +167,7 @@ export class ViewerHeaderService {
             [HeaderElements.APPLY_ROTATION, this._applyRotation],
             [HeaderElements.DISCARD_ROTATION, this._discardRotation],
             [HeaderElements.TOGGLE_TOOLTIPS, this._toggleTooltips],
-            [HeaderElements.COMPARE_BUTTON, this._compare(compareFileInput)],
+            [HeaderElements.COMPARE_BUTTON, this._compare],
             [HeaderElements.CLOSE_COMPARE_BUTTON, this._closeCompare],
         ]);
 
@@ -213,21 +227,6 @@ export class ViewerHeaderService {
         this._pdf.navigateTo(1);
     }
 
-    private _compare(compareFileInput: ElementRef): IHeaderElement {
-        return {
-            type: 'actionButton',
-            element: HeaderElements.COMPARE_BUTTON,
-            dataElement: HeaderElements.COMPARE_BUTTON,
-            img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
-            title: 'Compare',
-            onClick: async () => {
-                const element = compareFileInput.nativeElement as HTMLElement;
-                element.click();
-                this.#docBeforeCompare = await this._documentViewer.blob();
-            },
-        };
-    }
-
     private _pushGroup(items: IHeaderElement[], group: HeaderElementType[]): void {
         const enabledItems = group.filter(item => this._isEnabled(item));
         if (enabledItems.length) {
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts
new file mode 100644
index 000000000..f61551243
--- /dev/null
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { REDDocumentViewer } from './document-viewer.service';
+import { PdfViewer } from './pdf-viewer.service';
+import { REDAnnotationManager } from './annotation-manager.service';
+import { ViewerHeaderService } from './viewer-header.service';
+
+@Injectable()
+export class WebViewerLoadedGuard implements CanActivate {
+    constructor(
+        private readonly _documentViewer: REDDocumentViewer,
+        private readonly _pdf: PdfViewer,
+        private readonly _annotationManager: REDAnnotationManager,
+        private readonly _viewerHeaderService: ViewerHeaderService,
+    ) {}
+
+    async canActivate() {
+        if (this._pdf.instance) {
+            return true;
+        }
+
+        const instance = await this._pdf.init(document.getElementById('viewer'));
+
+        this._annotationManager.init(instance.Core.annotationManager);
+        this._documentViewer.init(instance.Core.documentViewer);
+        this._viewerHeaderService.init();
+
+        return true;
+    }
+}