diff --git a/gui/app/components/document/page-heading.js b/gui/app/components/document/page-heading.js
index 455105f6..176e817f 100644
--- a/gui/app/components/document/page-heading.js
+++ b/gui/app/components/document/page-heading.js
@@ -132,6 +132,10 @@ export default Component.extend(Notifier, ModalMixin, {
 			this.modalClose('#delete-page-modal-' + this.get('page.id'));
 		},
 
+		onShowPublishModal() {
+			this.modalOpen('#publish-page-modal-' + this.get('page.id'), {"show": true}, '#block-title-' + this.get('page.id'));
+		},
+
 		onSavePageAsBlock() {
 			let page = this.get('page');
 			let titleElem = '#block-title-' + page.get('id');
diff --git a/gui/app/templates/components/document/page-heading.hbs b/gui/app/templates/components/document/page-heading.hbs
index 4f89b342..ff45d6a1 100644
--- a/gui/app/templates/components/document/page-heading.hbs
+++ b/gui/app/templates/components/document/page-heading.hbs
@@ -35,7 +35,7 @@
 								<a class="item" href="#" id={{concat "move-page-button-" page.id}} {{action "onShowMoveModal"}}>Move</a>
 							{{/if}}
 							{{#if permissions.documentTemplate}}
-								<a class="item" href="#" id={{concat "publish-page-button-" page.id}} data-toggle="modal" data-target={{concat "#publish-page-modal-" page.id}} data-backdrop="static">Publish</a>
+								<a class="item" href="#" id={{concat "publish-page-button-" page.id}} {{action "onShowPublishModal"}}>Publish</a>
 							{{/if}}
 							{{#if permissions.documentDelete}}
 								<div class="divider"></div>