diff --git a/web/src/api/legacy.ts b/web/src/api/legacy.ts
index 76808ada8..7e8504907 100644
--- a/web/src/api/legacy.ts
+++ b/web/src/api/legacy.ts
@@ -72,9 +72,6 @@ export class AdminURLManager {
         return `/administration/users/${rest}`;
     }
 
-    static groups(rest: string): string {
-        return `/administration/groups/${rest}`;
-    }
 }
 
 export class UserURLManager {
diff --git a/web/src/pages/groups/GroupListPage.ts b/web/src/pages/groups/GroupListPage.ts
index c5183ba8e..d505e11a3 100644
--- a/web/src/pages/groups/GroupListPage.ts
+++ b/web/src/pages/groups/GroupListPage.ts
@@ -10,7 +10,6 @@ import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { CoreApi, Group } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { AdminURLManager } from "../../api/legacy";
 import "../../elements/forms/ModalForm";
 import "./GroupForm";
 
@@ -88,12 +87,19 @@ export class GroupListPage extends TablePage<Group> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${AdminURLManager.groups("create/")}>
-            <ak-spinner-button slot="trigger" class="pf-m-primary">
+        <ak-forms-modal>
+            <span slot="submit">
                 ${gettext("Create")}
-            </ak-spinner-button>
-            <div slot="modal"></div>
-        </ak-modal-button>
+            </span>
+            <span slot="header">
+                ${gettext("Create Group")}
+            </span>
+            <ak-group-form slot="form">
+            </ak-group-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Create")}
+            </button>
+        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }