diff --git a/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs b/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs
index 44b2d9a282b..72ef5c73a83 100644
--- a/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs
+++ b/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs
@@ -37,13 +37,17 @@
         {{/each}}
       </ul>
     </div>
-    <DButton @action={{this.add}} @label="admin.badges.new" />
+    <DButton
+      @action={{this.add}}
+      class="badge-groupings__add-grouping"
+      @label="admin.badges.new"
+    />
   </:body>
   <:footer>
     <DButton
       @action={{this.saveAll}}
       @label="admin.badges.save"
-      class="btn-primary"
+      class="btn-primary badge-groupings__save"
       @disabled={{this.submitDisabled}}
     />
     <DButton
diff --git a/app/assets/javascripts/admin/addon/routes/admin-badges.js b/app/assets/javascripts/admin/addon/routes/admin-badges.js
index 80b3ead0c05..47260f5ade7 100644
--- a/app/assets/javascripts/admin/addon/routes/admin-badges.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-badges.js
@@ -29,6 +29,11 @@ export default class AdminBadgesRoute extends DiscourseRoute {
     });
   }
 
+  @action
+  updateGroupings(groupings) {
+    this.controllerFor("admin-badges").set("badgeGroupings", groupings);
+  }
+
   setupController(controller, model) {
     const json = this._json;
     const badgeTriggers = [];
diff --git a/app/assets/javascripts/admin/addon/routes/admin-badges/show.js b/app/assets/javascripts/admin/addon/routes/admin-badges/show.js
index 621e64035a3..16bf32a980d 100644
--- a/app/assets/javascripts/admin/addon/routes/admin-badges/show.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-badges/show.js
@@ -1,4 +1,4 @@
-import { action, get } from "@ember/object";
+import { get } from "@ember/object";
 import Route from "@ember/routing/route";
 import { service } from "@ember/service";
 import Badge from "discourse/models/badge";
@@ -28,9 +28,4 @@ export default class AdminBadgesShowRoute extends Route {
 
     controller.setup();
   }
-
-  @action
-  updateGroupings(groupings) {
-    this.controllerFor("admin-badges").set("badgeGroupings", groupings);
-  }
 }
diff --git a/app/assets/javascripts/admin/addon/templates/admin-badges.hbs b/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
index 6999356594a..ad0ac9aa9f5 100644
--- a/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
+++ b/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
@@ -14,7 +14,7 @@
         @action={{route-action "editGroupings"}}
         @translatedLabel="Group settings"
         @icon="cog"
-        @class="btn-default"
+        @class="btn-default edit-groupings-btn"
       />
 
       <LinkTo @route="adminBadges.show" @model="new" class="btn btn-primary">
diff --git a/spec/system/admin_badges_grouping_modal_spec.rb b/spec/system/admin_badges_grouping_modal_spec.rb
new file mode 100644
index 00000000000..85b9a582f31
--- /dev/null
+++ b/spec/system/admin_badges_grouping_modal_spec.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+describe "Admin Badges Grouping Modal", type: :system do
+  before { SiteSetting.enable_badges = true }
+
+  fab!(:current_user) { Fabricate(:admin) }
+
+  let(:badges_page) { PageObjects::Pages::AdminBadges.new }
+  let(:badges_groupings_page) { PageObjects::Pages::AdminBadgesGroupings.new }
+
+  before { sign_in(current_user) }
+
+  context "when adding a new grouping" do
+    it "saves it" do
+      badges_page.visit_page(Badge::Autobiographer).edit_groupings
+      badges_groupings_page.add_grouping("a new grouping")
+
+      try_until_success { BadgeGrouping.exists?(name: "a new grouping") }
+    end
+  end
+end
diff --git a/spec/system/page_objects/admin_badges.rb b/spec/system/page_objects/admin_badges.rb
index 5848e8ac661..32bf9c942f0 100644
--- a/spec/system/page_objects/admin_badges.rb
+++ b/spec/system/page_objects/admin_badges.rb
@@ -56,6 +56,11 @@ module PageObjects
         self
       end
 
+      def edit_groupings
+        page.find(".edit-groupings-btn").click
+        self
+      end
+
       def form
         @form ||= PageObjects::Components::FormKit.new("form")
       end
diff --git a/spec/system/page_objects/admin_badges_groupings.rb b/spec/system/page_objects/admin_badges_groupings.rb
new file mode 100644
index 00000000000..03d9f13287c
--- /dev/null
+++ b/spec/system/page_objects/admin_badges_groupings.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class AdminBadgesGroupings < PageObjects::Pages::Base
+      def add_grouping(name)
+        within(modal) do
+          find(".badge-groupings__add-grouping").click
+          find(".badge-grouping-name-input").fill_in(with: name)
+        end
+
+        save
+
+        self
+      end
+
+      def save
+        page.find(".badge-groupings__save").click
+        expect(self).to be_closed
+        self
+      end
+
+      def modal
+        page.find(".badge-groupings-modal")
+      end
+
+      def closed?
+        page.has_no_css?(".badge-groupings-modal")
+      end
+    end
+  end
+end