diff --git a/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts b/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts
index e3f90e0c1b..c6505f8450 100644
--- a/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts
+++ b/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts
@@ -1,14 +1,15 @@
 import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
-class ModalFooterOKClick extends EventEmitter {
-  command (this: NightwatchBrowser): NightwatchBrowser {
-    this.api.waitForElementVisible('#modal-footer-cancel').perform((client, done) => {
-      this.api.execute(function () {
-        const elem = document.querySelector('#modal-footer-cancel') as HTMLElement
+class ModalFooterCancelClick extends EventEmitter {
+  command (this: NightwatchBrowser, id?: string): NightwatchBrowser {
+    const clientId = id ? `*[data-id="${id}-modal-footer-cancel-react"]` : '#modal-footer-cancel'
+    this.api.waitForElementVisible(clientId).perform((client, done) => {
+      this.api.execute(function (clientId) {
+        const elem = document.querySelector(clientId) as HTMLElement
 
         elem.click()
-      }, [], () => {
+      }, [clientId], () => {
         done()
         this.emit('complete')
       })
@@ -17,4 +18,4 @@ class ModalFooterOKClick extends EventEmitter {
   }
 }
 
-module.exports = ModalFooterOKClick
+module.exports = ModalFooterCancelClick
diff --git a/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts b/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts
index bea13a01b2..2e656f287c 100644
--- a/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts
+++ b/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts
@@ -2,13 +2,14 @@ import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
 class ModalFooterOKClick extends EventEmitter {
-  command (this: NightwatchBrowser): NightwatchBrowser {
-    this.api.waitForElementVisible('#modal-footer-ok').perform((client, done) => {
-      this.api.execute(function () {
-        const elem = document.querySelector('#modal-footer-ok') as HTMLElement
+  command (this: NightwatchBrowser, id?: string): NightwatchBrowser {
+    const clientId = id ? `*[data-id="${id}-modal-footer-ok-react"]` : '#modal-footer-ok'
+    this.api.waitForElementVisible(clientId).perform((client, done) => {
+      this.api.execute(function (clientId) {
+        const elem = document.querySelector(clientId) as HTMLElement
 
         elem.click()
-      }, [], () => {
+      }, [clientId], () => {
         done()
         this.emit('complete')
       })
diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 09dea17652..05eeb378af 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -81,7 +81,7 @@ module.exports = {
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
       .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Enter the ID of the Gist or URL you would like to load.')
       .waitForElementVisible('*[data-id="modalDialogCustomPromp"]')
-      .modalFooterCancelClick()
+      .modalFooterCancelClick('gisthandler')
   },
 
   'Display Error Message For Invalid Gist ID': function (browser: NightwatchBrowser) {
@@ -91,10 +91,10 @@ module.exports = {
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
       .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.invalidGistId)
-      .modalFooterOKClick()
+      .modalFooterOKClick('gisthandler')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
       .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Not Found')
-      .modalFooterOKClick()
+      .modalFooterOKClick('gisthandler')
   },
 
   'Display Error Message For Missing Gist Token When Publishing': function (browser: NightwatchBrowser) {
diff --git a/apps/remix-ide-e2e/src/types/index.d.ts b/apps/remix-ide-e2e/src/types/index.d.ts
index 373139fbf4..1ddb10aa10 100644
--- a/apps/remix-ide-e2e/src/types/index.d.ts
+++ b/apps/remix-ide-e2e/src/types/index.d.ts
@@ -18,7 +18,7 @@ declare module 'nightwatch' {
         goToVMTraceStep(step: number, incr?: number): NightwatchBrowser,
         checkVariableDebug(id: string, debugValue: NightwatchCheckVariableDebugValue): NightwatchBrowser,
         addAtAddressInstance(address: string, isValidFormat: boolean, isValidChecksum: boolean): NightwatchBrowser,
-        modalFooterOKClick(): NightwatchBrowser,
+        modalFooterOKClick(id?: string): NightwatchBrowser,
         clickInstance(index: number): NightwatchBrowser,
         journalLastChildIncludes(val: string): NightwatchBrowser,
         executeScript(script: string): NightwatchBrowser,
@@ -32,7 +32,7 @@ declare module 'nightwatch' {
         scrollToLine(line: number): NightwatchBrowser,
         waitForElementContainsText(id: string, value: string, timeout?: number): NightwatchBrowser,
         getModalBody(callback: (value: string, cb: VoidFunction) => void): NightwatchBrowser,
-        modalFooterCancelClick(): NightwatchBrowser,
+        modalFooterCancelClick(id?: string): NightwatchBrowser,
         selectContract(contractName: string): NightwatchBrowser,
         createContract(inputParams: string): NightwatchBrowser,
         getAddressAtPosition(index: number, cb: (pos: string) => void): NightwatchBrowser,
diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 7ce3043fc8..22cc43679b 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -283,7 +283,7 @@ class AppComponent {
     await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler'])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
-    
+
     self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
       await self.appManager.registerContextMenuItems()
     })
diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 19f88b5a93..92b693757d 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -37,7 +37,7 @@ export class GistHandler extends Plugin {
                 setTimeout(() => resolve(value), 0)
               },
               cancelFn: () => {
-                setTimeout(() => reject("Canceled"), 0)
+                setTimeout(() => reject(new Error('Canceled')), 0)
               }
             }
             this.call('modal', 'modal', modalContent)
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index f9fca87398..41b2afb4d1 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -86,38 +86,38 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon &&
-            <span className="modal-close" onClick={() => handleHide()}>
-              <i title="Close" className="fas fa-times" aria-hidden="true"></i>
-            </span>
+              <span className="modal-close" onClick={() => handleHide()}>
+                <i title="Close" className="fas fa-times" aria-hidden="true"></i>
+              </span>
             }
           </div>
           <div className="modal-body text-break remixModalBody" data-id={`${props.id}ModalDialogModalBody-react`}>
-            { props.children ? props.children : props.message }
+            {props.children ? props.children : props.message}
           </div>
           <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
-            { <span
-                data-id={`${props.id}-modal-footer-ok-react`}
-                className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
-                onClick={() => {
-                  if (props.okFn) props.okFn()
-                  handleHide()
-                }}
-              >
-                { props.okLabel ? props.okLabel : 'OK' }
-              </span>
+            {<span
+              data-id={`${props.id}-modal-footer-ok-react`}
+              className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
+              onClick={() => {
+                if (props.okFn) props.okFn()
+                handleHide()
+              }}
+            >
+              {props.okLabel ? props.okLabel : 'OK'}
+            </span>
             }
-            { <span
-                data-id={`${props.id}-modal-footer-cancel-react`}
-                className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
-                data-dismiss="modal"
-                onClick={() => {
-                  if (props.cancelFn) props.cancelFn()
-                  handleHide()
-                }}
-              >
-                { props.cancelLabel ? props.cancelLabel : 'Cancel' }
-              </span>
+            {<span
+              data-id={`${props.id}-modal-footer-cancel-react`}
+              className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
+              data-dismiss="modal"
+              onClick={() => {
+                if (props.cancelFn) props.cancelFn()
+                handleHide()
+              }}
+            >
+              {props.cancelLabel ? props.cancelLabel : 'Cancel'}
+            </span>
             }
           </div>
         </div>