diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.js b/EnvelopeGenerator.Web/wwwroot/js/app.js
index 7fd7d9b1..5f55c732 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/app.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/app.js
@@ -14,7 +14,6 @@ class App {
         this.container = container ?? `#${this.constructor.name.toLowerCase()}`;
         this.envelopeKey = envelopeKey
 
-        this.UI = new UI()
         this.Network = new Network()
 
         this.Instance = null
@@ -48,8 +47,8 @@ class App {
         const arrayBuffer = this.documentBytes
 
         // Load PSPDFKit
-        this.Instance = await this.UI.loadPSPDFKit(arrayBuffer, this.container, this.licenseKey, this.locale)
-        this.UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))
+        this.Instance = await UI.loadPSPDFKit(arrayBuffer, this.container, this.licenseKey, this.locale)
+        UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))
 
         this.Instance.addEventListener(
             'annotations.load',
diff --git a/EnvelopeGenerator.Web/wwwroot/js/ui.js b/EnvelopeGenerator.Web/wwwroot/js/ui.js
index bf5ce19e..47095eff 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/ui.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/ui.js
@@ -1,5 +1,5 @@
 class UI {
-  allowedToolbarItems = [
+  static allowedToolbarItems = [
     'sidebar-thumbnails',
     'sidebar-document-ouline',
     'sidebar-bookmarks',
@@ -14,7 +14,7 @@
 
   // Load the PSPDFKit UI by setting a target element as the container to render in
   // and a arraybuffer which represents the document that should be displayed.
-  loadPSPDFKit(arrayBuffer, container, licenseKey, locale) {
+  static loadPSPDFKit(arrayBuffer, container, licenseKey, locale) {
     return PSPDFKit.load({
       locale: locale,
       licenseKey: licenseKey,
@@ -45,30 +45,30 @@
     })
   }
 
-  configurePSPDFKit(instance, handler) {
+  static configurePSPDFKit(instance, handler) {
     const toolbarItems = this.getToolbarItems(instance, handler)
     instance.setToolbarItems(toolbarItems)
   }
 
-  annotationRenderer(data) {
+  static annotationRenderer(data) {
     // leave everything as is
     return null
   }
 
-  getToolbarItems(instance, handler) {
+  static getToolbarItems(instance, handler) {
     const customItems = this.getCustomItems(handler)
     const defaultItems = this.getDefaultItems(instance.toolbarItems)
     return defaultItems.concat(customItems)
   }
 
-  createElementFromHTML(html) {
+  static createElementFromHTML(html) {
     const el = document.createElement('div')
     el.innerHTML = html.trim()
 
     return el.firstChild
   }
 
-  getCustomItems = function (callback) {
+  static getCustomItems = function (callback) {
     return []
     return [
       {
@@ -108,11 +108,11 @@
     ]
   }
 
-  getDefaultItems(items) {
+  static getDefaultItems(items) {
     return items.filter((item) => this.allowedToolbarItems.includes(item.type))
   }
 
-  getPresets() {
+  static getPresets() {
     const annotationPresets = PSPDFKit.defaultAnnotationPresets
     annotationPresets.ink = {
       lineWidth: 10,