diff --git a/e2e/cypress/e2e/events/event_template.cy.ts b/e2e/cypress/e2e/events/event_template.cy.ts
index 9f776a746..82fab1035 100644
--- a/e2e/cypress/e2e/events/event_template.cy.ts
+++ b/e2e/cypress/e2e/events/event_template.cy.ts
@@ -1,10 +1,12 @@
 import {setup, login, waitForPageLoad, Modal, SubNavBar} from '../../support/common';
+import {UiFrameworkModal} from '../../support/common/ui/ui-framework-modal';
 import {EventEditor} from '../../support/planning';
 
 describe('Planning.Events: event templates', () => {
     const editor = new EventEditor();
     const subnav = new SubNavBar();
     const modal = new Modal();
+    const uiFrameworkModal = new UiFrameworkModal();
 
     const event = {
         'dates.start.date': '12/12/2045',
@@ -54,13 +56,13 @@ describe('Planning.Events: event templates', () => {
         editor.actionMenu
             .getAction('Save event as a template')
             .click();
-        modal.waitTillOpen(30000);
-        modal.element
+        uiFrameworkModal.waitTillOpen(30000);
+        uiFrameworkModal.element
             .find('textarea')
             .type('Example');
-        modal.getFooterButton('Submit')
+        uiFrameworkModal.getFooterButton('Submit')
             .click();
-        modal.waitTillClosed(30000);
+        uiFrameworkModal.waitTillClosed(30000);
 
         // Wait for the Editor to re-render
         // otherwise the close button may re-render during attempts to click it
diff --git a/e2e/cypress/support/common/ui/ui-framework-modal.ts b/e2e/cypress/support/common/ui/ui-framework-modal.ts
new file mode 100644
index 000000000..1ae3a962c
--- /dev/null
+++ b/e2e/cypress/support/common/ui/ui-framework-modal.ts
@@ -0,0 +1,33 @@
+import {Popup} from './popup';
+
+export class UiFrameworkModal extends Popup {
+    /**
+     * Creates an instance of the Modal wrapper
+     * @param {string} selector - The CSS selector to find the modal
+     */
+    constructor(selector = '.p-dialog') {
+        super(selector);
+    }
+
+    get footer() {
+        return this.element.find('.p-dialog-footer');
+    }
+
+    /**
+     * Returns the dom node for a specific button in the footer
+     * @param {string} label - The label on the button
+     * @param {number} timeout - The ms timeout when getting the button
+     * @returns {Cypress.Chainable<JQuery<HTMLElement>>}
+     */
+    getFooterButton(label, timeout = 3000, shouldExist = true) {
+        return this.element.find('.p-dialog-footer')
+            .contains(label, {timeout: timeout})
+            .should('exist');
+    }
+
+    shouldContainTitle(title: string) {
+        return this.element.find('.p-dialog-header')
+            .should('exist')
+            .contains(title);
+    }
+}