diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
index 373bbf0a8..440d7efcb 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
@@ -1,5 +1,5 @@
 <div class="content-container">
-    <div class="viewer" id="viewer"></div>
+    <div #viewer class="viewer" id="viewer"></div>
 
     <div *ngIf="changed && currentUser.isAdmin" class="changes-box">
         <iqser-icon-button
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
index 473b6ad96..dd54f8d7d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
 import { HttpClient } from '@angular/common/http';
 import { FormBuilder, FormGroup } from '@angular/forms';
@@ -51,7 +51,7 @@ interface WatermarkForm {
     templateUrl: './watermark-screen.component.html',
     styleUrls: ['./watermark-screen.component.scss'],
 })
-export class WatermarkScreenComponent {
+export class WatermarkScreenComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
     readonly currentUser = getCurrentUser<User>();
     readonly form = this._getForm();
@@ -62,6 +62,7 @@ export class WatermarkScreenComponent {
         { value: 'courier', display: 'Courier' },
     ];
     readonly orientationOptions = ['DIAGONAL', 'HORIZONTAL', 'VERTICAL'];
+    @ViewChild('viewer', { static: true }) viewer: ElementRef<HTMLDivElement>;
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly #watermarkId = Number(getParam(WATERMARK_ID));
     private _instance: WebViewerInstance;
@@ -102,6 +103,10 @@ export class WatermarkScreenComponent {
         return this.form.valid;
     }
 
+    async ngOnInit() {
+        await this._loadViewer();
+    }
+
     @Debounce()
     async configChanged() {
         await this._drawWatermark();
@@ -144,7 +149,6 @@ export class WatermarkScreenComponent {
     private async _initForm(watermark: Partial<IWatermark>) {
         this._watermark = { ...watermark, dossierTemplateId: this.#dossierTemplateId };
         this.form.patchValue({ ...watermark });
-        await this._loadViewer();
     }
 
     private async _loadViewer() {
@@ -161,7 +165,7 @@ export class WatermarkScreenComponent {
                 isReadOnly: true,
                 backendType: 'ems',
             },
-            document.getElementById('viewer'),
+            this.viewer.nativeElement,
         );
 
         this._instance.UI.setTheme(this._userPreferenceService.getTheme());