diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 53837034c..40e29011a 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -222,6 +222,10 @@
     padding: 0;
   }
 
+  :where(.list-unindented) {
+    padding-inline-start: 1.25em;
+  }
+
   /* Accessibility */
   .visually-hidden,
   .for-screen-reader {
diff --git a/app/javascript/controllers/dispatch_event_controller.js b/app/javascript/controllers/dispatch_event_controller.js
new file mode 100644
index 000000000..781b3c9ab
--- /dev/null
+++ b/app/javascript/controllers/dispatch_event_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { name: String }
+
+  dispatch() {
+    document.dispatchEvent(new CustomEvent(this.nameValue, { bubbles: true }))
+  }
+}
diff --git a/app/views/account/settings/_cancellation.html.erb b/app/views/account/settings/_cancellation.html.erb
index 9b80ed064..a457bd00b 100644
--- a/app/views/account/settings/_cancellation.html.erb
+++ b/app/views/account/settings/_cancellation.html.erb
@@ -9,18 +9,36 @@
       <button type="button" class="btn btn--negative" data-action="dialog#open">Delete account</button>
 
       <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog" style="--panel-size: 48ch;">
-        <h2 class="margin-none txt-large txt-negative">Delete your account?</h2>
-        <ul class="txt-align-start">
-          <li>All users, including you, will lose access</li>
-          <% if Current.account.try(:active_subscription) %>
-            <li>Your subscription will be canceled</li>
-          <% end %>
-          <li>After 30 days, your data will be permanently deleted</li>
-        </ul>
+        <h2 class="margin-none txt-large txt-negative">Delete account</h2>
+        <div class="txt-align-start">
+          <h3 class="margin-block-start margin-block-end-half txt-normal">What happens next:</h3>
 
-        <div class="flex gap justify-center">
-          <button type="button" class="btn" data-action="dialog#close">Cancel</button>
-          <%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", form: { data: { action: "submit->dialog#close", turbo: false } } %>
+          <ul class="list-unindented margin-block-start-half margin-block-end">
+            <li>Your <strong><%= Current.account.name %></strong> account will be closed immediately.</li>
+            <li>All users, including you, will lose access.</li>
+            <% if Current.account.try(:active_subscription) %>
+              <li>Your subscription will be canceled.</li>
+            <% end %>
+            <li>All your data will be permanently deleted within 30&nbsp;days.</li>
+          </ul>
+
+          <h3 class="margin-block-end-half txt-normal">Remember to export your data</h3>
+
+          <p class="margin-block-start-half margin-block-end-double">
+            <button type="button" class="btn btn--plain txt-link" data-controller="dispatch-event" data-dispatch-event-name-value="open-export" data-action="click->dialog#close click->dispatch-event#dispatch">Export your data</button> before you go. You won’t be able to do it after you delete your account.
+          </p>
+        </div>
+
+        <div data-controller="toggle-enable">
+          <label class="flex gap justify-start txt-align-start margin-block-end-double">
+            <input type="checkbox" class="checkbox" data-action="change->toggle-enable#toggle">
+            I’ve read the above and want to continue
+          </label>
+
+          <div class="flex gap justify-center margin-block-start">
+            <button type="button" class="btn" autofocus data-action="dialog#close">Not now</button>
+            <%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", disabled: true, form: { data: { action: "submit->dialog#close", turbo: false } }, data: { toggle_enable_target: "element" } %>
+          </div>
         </div>
       </dialog>
     </div>
diff --git a/app/views/account/settings/_export.html.erb b/app/views/account/settings/_export.html.erb
index 3608e764f..932b6a490 100644
--- a/app/views/account/settings/_export.html.erb
+++ b/app/views/account/settings/_export.html.erb
@@ -4,7 +4,7 @@
     <div>Download a complete archive of all account data.</div>
   </header>
 
-  <div data-controller="dialog" data-dialog-modal-value="true" data-action="keydown.esc->dialog#close">
+  <div data-controller="dialog" data-dialog-modal-value="true" data-action="keydown.esc->dialog#close open-export@document->dialog#open">
     <button type="button" class="btn" data-action="dialog#open">Begin export...</button>
 
     <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog" style="--panel-size: 48ch;">