diff --git a/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js b/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js
index f1328b9eb6a..69914cfa04a 100644
--- a/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js
+++ b/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js
@@ -1,9 +1,11 @@
-import GlimmerComponent from "@glimmer/component";
+import Component from "@glimmer/component";
 import { htmlSafe } from "@ember/template";
 import I18n from "I18n";
 import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import showModal from "discourse/lib/show-modal";
 
-export default class BootstrapModeNotice extends GlimmerComponent {
+export default class BootstrapModeNotice extends Component {
   @service siteSettings;
   @service site;
 
@@ -19,4 +21,9 @@ export default class BootstrapModeNotice extends GlimmerComponent {
 
     return htmlSafe(I18n.t(msg, { count: bootstrapModeMinUsers }));
   }
+
+  @action
+  inviteUsers() {
+    showModal("create-invite");
+  }
 }
diff --git a/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs b/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs
index cf23159b968..aa9fb8b0b4c 100644
--- a/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs
@@ -4,7 +4,7 @@
       {{this.message}}
     </div>
     <div class="col-button">
-      <div class="alert--button"><DButton @icon="user-plus" @href="/my/invited" @class="btn-primary bootstrap-invite-button" @label="bootstrap_invite_button_title" /></div>
+      <div class="alert--button"><DButton @icon="user-plus" @action={{this.inviteUsers}} @class="btn-primary bootstrap-invite-button" @label="bootstrap_invite_button_title" /></div>
       {{#if this.site.wizard_required}}
         <div class="alert--link"><a class="bootstrap-wizard-link" href="/wizard">{{i18n "bootstrap_wizard_link_title"}}</a></div>
       {{/if}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js b/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js
index 5f11ac4d47c..6bbd39f7014 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js
@@ -26,13 +26,8 @@ acceptance("Bootstrap Mode Notice", function (needs) {
     );
 
     await click(".bootstrap-invite-button");
-    assert.strictEqual(
-      currentURL(),
-      "/u/eviltrout/invited/pending",
-      "it transitions to the invite page"
-    );
+    assert.ok(exists(".create-invite-modal"), "opens create invite modal");
 
-    await visit("/");
     await click(".bootstrap-wizard-link");
     assert.strictEqual(
       currentURL(),