diff --git a/extensions/package-manager/js/src/admin/components/AuthMethodModal.tsx b/extensions/package-manager/js/src/admin/components/AuthMethodModal.tsx
index c228002ac..8102f2d25 100644
--- a/extensions/package-manager/js/src/admin/components/AuthMethodModal.tsx
+++ b/extensions/package-manager/js/src/admin/components/AuthMethodModal.tsx
@@ -5,6 +5,7 @@ import Select from 'flarum/common/components/Select';
 import Stream from 'flarum/common/utils/Stream';
 import Button from 'flarum/common/components/Button';
 import extractText from 'flarum/common/utils/extractText';
+import Form from 'flarum/common/components/Form';
 
 export interface IAuthMethodModalAttrs extends IInternalModalAttrs {
   onsubmit: (type: string, host: string, token: string) => void;
@@ -45,38 +46,40 @@ export default class AuthMethodModal<CustomAttrs extends IAuthMethodModalAttrs =
 
     return (
       <div className="Modal-body">
-        <div className="Form-group">
-          <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.type_label')}</label>
-          <Select options={types} value={this.type()} onchange={this.type} />
-        </div>
-        <div className="Form-group">
-          <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_label')}</label>
-          <input
-            className="FormControl"
-            bidi={this.host}
-            placeholder={app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_placeholder')}
-          />
-        </div>
-        <div className="Form-group">
-          <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.token_label')}</label>
-          <textarea
-            className="FormControl"
-            oninput={(e: InputEvent) => this.token((e.target as HTMLTextAreaElement).value)}
-            rows="6"
-            placeholder={
-              this.token().startsWith('unchanged:')
-                ? extractText(app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.unchanged_token_placeholder'))
-                : ''
-            }
-          >
-            {this.token().startsWith('unchanged:') ? '' : this.token()}
-          </textarea>
-        </div>
-        <div className="Form-group">
-          <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
-            {app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.submit_button')}
-          </Button>
-        </div>
+        <Form>
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.type_label')}</label>
+            <Select options={types} value={this.type()} onchange={this.type} />
+          </div>
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_label')}</label>
+            <input
+              className="FormControl"
+              bidi={this.host}
+              placeholder={app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_placeholder')}
+            />
+          </div>
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.token_label')}</label>
+            <textarea
+              className="FormControl"
+              oninput={(e: InputEvent) => this.token((e.target as HTMLTextAreaElement).value)}
+              rows="6"
+              placeholder={
+                this.token().startsWith('unchanged:')
+                  ? extractText(app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.unchanged_token_placeholder'))
+                  : ''
+              }
+            >
+              {this.token().startsWith('unchanged:') ? '' : this.token()}
+            </textarea>
+          </div>
+          <div className="Form-group">
+            <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
+              {app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.submit_button')}
+            </Button>
+          </div>
+        </Form>
       </div>
     );
   }
diff --git a/extensions/package-manager/js/src/admin/components/RepositoryModal.tsx b/extensions/package-manager/js/src/admin/components/RepositoryModal.tsx
index a03c58382..31fef19c1 100644
--- a/extensions/package-manager/js/src/admin/components/RepositoryModal.tsx
+++ b/extensions/package-manager/js/src/admin/components/RepositoryModal.tsx
@@ -5,6 +5,7 @@ import Select from 'flarum/common/components/Select';
 import Stream from 'flarum/common/utils/Stream';
 import Button from 'flarum/common/components/Button';
 import { type Repository } from './ConfigureComposer';
+import Form from 'flarum/common/components/Form';
 
 export interface IRepositoryModalAttrs extends IInternalModalAttrs {
   onsubmit: (repository: Repository, key: string) => void;
@@ -41,31 +42,33 @@ export default class RepositoryModal<CustomAttrs extends IRepositoryModalAttrs =
 
     return (
       <div className="Modal-body">
-        <div className="Form-group">
-          <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.name_label')}</label>
-          <input className="FormControl" bidi={this.name} />
-        </div>
-        <div className="Form-group">
-          <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.type_label')}</label>
-          <Select
-            options={types}
-            value={this.repository().type}
-            onchange={(value: 'composer' | 'vcs' | 'path') => this.repository({ ...this.repository(), type: value })}
-          />
-        </div>
-        <div className="Form-group">
-          <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.url')}</label>
-          <input
-            className="FormControl"
-            onchange={(e: Event) => this.repository({ ...this.repository(), url: (e.target as HTMLInputElement).value })}
-            value={this.repository().url}
-          />
-        </div>
-        <div className="Form-group">
-          <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
-            {app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.submit_button')}
-          </Button>
-        </div>
+        <Form>
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.name_label')}</label>
+            <input className="FormControl" bidi={this.name} />
+          </div>
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.type_label')}</label>
+            <Select
+              options={types}
+              value={this.repository().type}
+              onchange={(value: 'composer' | 'vcs' | 'path') => this.repository({ ...this.repository(), type: value })}
+            />
+          </div>
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.url')}</label>
+            <input
+              className="FormControl"
+              onchange={(e: Event) => this.repository({ ...this.repository(), url: (e.target as HTMLInputElement).value })}
+              value={this.repository().url}
+            />
+          </div>
+          <div className="Form-group">
+            <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
+              {app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.submit_button')}
+            </Button>
+          </div>
+        </Form>
       </div>
     );
   }