diff --git a/app/controllers/crate/settings.js b/app/controllers/crate/settings.js
index f421e246d0f..1fd26ab7200 100644
--- a/app/controllers/crate/settings.js
+++ b/app/controllers/crate/settings.js
@@ -1,5 +1,7 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 import { task } from 'ember-concurrency';
 
@@ -8,6 +10,12 @@ export default class CrateSettingsController extends Controller {
 
   crate = null;
   username = '';
+  @tracked addOwnerVisible = false;
+
+  @action showAddOwnerForm() {
+    this.addOwnerVisible = true;
+    this.username = '';
+  }
 
   addOwnerTask = task(async () => {
     const username = this.username;
@@ -20,6 +28,7 @@ export default class CrateSettingsController extends Controller {
       } else {
         this.notifications.success(`An invite has been sent to ${username}`);
       }
+      this.addOwnerVisible = false;
     } catch (error) {
       let detail = error.errors?.[0]?.detail;
       if (detail && !detail.startsWith('{')) {
diff --git a/app/styles/crate/settings.module.css b/app/styles/crate/settings.module.css
index 6ace00a8453..699bbff540d 100644
--- a/app/styles/crate/settings.module.css
+++ b/app/styles/crate/settings.module.css
@@ -1,3 +1,9 @@
+.owners-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .email-form {
     display: flex;
     justify-content: space-between;
@@ -8,6 +14,7 @@
     background-color: light-dark(white, #141413);
     border-radius: var(--space-3xs);
     box-shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
+    margin-bottom: var(--space-s);
 }
 
 .email-input-label {
diff --git a/app/templates/crate/settings.hbs b/app/templates/crate/settings.hbs
index 4d3b5a9cefa..29eaa2cacd6 100644
--- a/app/templates/crate/settings.hbs
+++ b/app/templates/crate/settings.hbs
@@ -2,17 +2,22 @@
 
 <CrateHeader @crate={{this.crate}} />
 
-<h2>Add Owner</h2>
-
-<form local-class="email-form" {{on "submit" (prevent-default (perform this.addOwnerTask))}}>
-  <label local-class="email-input-label" for='new-owner-username'>
-    Username
-  </label>
-  <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" local-class="email-input" name="username" />
-  <button type="submit" disabled={{not this.username}} class="button button--small" data-test-save-button>Save</button>
-</form>
+<div local-class="owners-header">
+  <h2>Owners</h2>
+  {{#unless this.addOwnerVisible}}
+    <button type="button" class="button button--small" data-test-add-owner-button {{on "click" this.showAddOwnerForm}}>Add Owner</button>
+  {{/unless}}
+</div>
 
-<h2>Owners</h2>
+{{#if this.addOwnerVisible}}
+  <form local-class="email-form" {{on "submit" (prevent-default (perform this.addOwnerTask))}}>
+    <label local-class="email-input-label" for='new-owner-username'>
+      Username
+    </label>
+    <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" local-class="email-input" name="username" />
+    <button type="submit" disabled={{not this.username}} class="button button--small" data-test-save-button>Save</button>
+  </form>
+{{/if}}
 
 <div local-class='list' data-test-owners>
   {{#each this.crate.owner_team as |team|}}
diff --git a/e2e/acceptance/settings/add-owner.spec.ts b/e2e/acceptance/settings/add-owner.spec.ts
index 43f53cbdf0f..fb975266dc3 100644
--- a/e2e/acceptance/settings/add-owner.spec.ts
+++ b/e2e/acceptance/settings/add-owner.spec.ts
@@ -19,12 +19,14 @@ test.describe('Acceptance | Settings | Add Owner', { tag: '@acceptance' }, () =>
 
   test('attempting to add owner without username', async ({ page }) => {
     await page.goto('/crates/nanomsg/settings');
+    await page.click('[data-test-add-owner-button]');
     await page.fill('input[name="username"]', '');
     await expect(page.locator('[data-test-save-button]')).toBeDisabled();
   });
 
   test('attempting to add non-existent owner', async ({ page }) => {
     await page.goto('/crates/nanomsg/settings');
+    await page.click('[data-test-add-owner-button]');
     await page.fill('input[name="username"]', 'spookyghostboo');
     await page.click('[data-test-save-button]');
 
@@ -39,6 +41,7 @@ test.describe('Acceptance | Settings | Add Owner', { tag: '@acceptance' }, () =>
     msw.db.user.create({ name: 'iain8' });
 
     await page.goto('/crates/nanomsg/settings');
+    await page.click('[data-test-add-owner-button]');
     await page.fill('input[name="username"]', 'iain8');
     await page.click('[data-test-save-button]');
 
@@ -54,6 +57,7 @@ test.describe('Acceptance | Settings | Add Owner', { tag: '@acceptance' }, () =>
     msw.db.team.create({ org: 'rust-lang', name: 'crates-io' });
 
     await page.goto('/crates/nanomsg/settings');
+    await page.click('[data-test-add-owner-button]');
     await page.fill('input[name="username"]', 'github:rust-lang:crates-io');
     await page.click('[data-test-save-button]');
 
diff --git a/tests/acceptance/settings/add-owner-test.js b/tests/acceptance/settings/add-owner-test.js
index d1cc9051707..b7810aa0770 100644
--- a/tests/acceptance/settings/add-owner-test.js
+++ b/tests/acceptance/settings/add-owner-test.js
@@ -30,6 +30,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) {
     prepare(this);
 
     await visit('/crates/nanomsg/settings');
+    await click('[data-test-add-owner-button]');
     await fillIn('input[name="username"]', '');
     assert.dom('[data-test-save-button]').isDisabled();
   });
@@ -38,6 +39,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) {
     prepare(this);
 
     await visit('/crates/nanomsg/settings');
+    await click('[data-test-add-owner-button]');
     await fillIn('input[name="username"]', 'spookyghostboo');
     await click('[data-test-save-button]');
 
@@ -54,6 +56,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) {
     this.db.user.create({ name: 'iain8' });
 
     await visit('/crates/nanomsg/settings');
+    await click('[data-test-add-owner-button]');
     await fillIn('input[name="username"]', 'iain8');
     await click('[data-test-save-button]');
 
@@ -69,6 +72,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) {
     this.db.team.create({ org: 'rust-lang', name: 'crates-io' });
 
     await visit('/crates/nanomsg/settings');
+    await click('[data-test-add-owner-button]');
     await fillIn('input[name="username"]', 'github:rust-lang:crates-io');
     await click('[data-test-save-button]');
 
diff --git a/tests/routes/crate/settings-test.js b/tests/routes/crate/settings-test.js
index 4147d45db9f..77e6e7d52df 100644
--- a/tests/routes/crate/settings-test.js
+++ b/tests/routes/crate/settings-test.js
@@ -46,8 +46,7 @@ module('Route | crate.settings', hooks => {
 
     await visit(`/crates/${crate.name}/settings`);
     assert.strictEqual(currentURL(), `/crates/${crate.name}/settings`);
-    // This is the Add Owner button.
-    assert.dom('[data-test-save-button]').exists();
+    assert.dom('[data-test-add-owner-button]').exists();
     assert.dom('[data-test-owners]').exists();
     assert.dom(`[data-test-owner-user="${user.login}"]`).exists();
     assert.dom('[data-test-remove-owner-button]').exists();