diff --git a/web/settings/danger-zone-panel.react.js b/web/settings/danger-zone-panel.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/danger-zone-panel.react.js
@@ -0,0 +1,22 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './danger-zone.css';
+import DangerZone from './danger-zone.react.js';
+import PanelHeader from '../components/panel-header.react.js';
+import Panel, { type PanelData } from '../components/panel.react.js';
+
+const panelData: $ReadOnlyArray<PanelData> = [
+  {
+    header: <PanelHeader headerLabel="Danger zone" />,
+    body: <DangerZone />,
+    classNameOveride: css.container,
+  },
+];
+
+function DangerZonePanel(): React.Node {
+  return <Panel panelItems={panelData} />;
+}
+
+export default DangerZonePanel;
diff --git a/web/settings/danger-zone.css b/web/settings/danger-zone.css
--- a/web/settings/danger-zone.css
+++ b/web/settings/danger-zone.css
@@ -1,33 +1,24 @@
 .container {
   flex: 1;
-  background-color: var(--frame-background-primary-default);
 }
 
 .contentContainer {
-  padding: 40px;
-  width: 343px;
-}
-
-.header {
-  color: var(--text-background-primary-default);
-  font-weight: var(--semi-bold);
-  line-height: var(--line-height-display);
-  padding-bottom: 40px;
+  padding: 16px;
 }
 
 .subheading {
-  color: var(--text-background-secondary-default);
-  font-size: var(--xl-font-20);
+  color: var(--text-background-primary-default);
+  font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
-  padding-bottom: 40px;
+  margin-bottom: 16px;
 }
 
 .button {
-  width: 100%;
+  width: 192px;
 }
 
 .explanation {
-  padding-top: 8px;
+  margin-top: 16px;
   color: var(--text-background-tertiary-default);
 }
diff --git a/web/settings/danger-zone.react.js b/web/settings/danger-zone.react.js
--- a/web/settings/danger-zone.react.js
+++ b/web/settings/danger-zone.react.js
@@ -16,22 +16,19 @@
   );
 
   return (
-    <div className={css.container}>
-      <div className={css.contentContainer}>
-        <h4 className={css.header}>Danger Zone</h4>
-        <h5 className={css.subheading}>Delete Account</h5>
-        <Button
-          onClick={onDeleteAccountClick}
-          variant="filled"
-          buttonColor={buttonThemes.danger}
-          className={css.button}
-        >
-          Delete Account
-        </Button>
-        <p className={css.explanation}>
-          Your account will be permanently deleted. There is no way to reverse
-          this.
-        </p>
+    <div className={css.contentContainer}>
+      <h5 className={css.subheading}>Delete account</h5>
+      <Button
+        onClick={onDeleteAccountClick}
+        variant="filled"
+        buttonColor={buttonThemes.danger}
+        className={css.button}
+      >
+        Delete account
+      </Button>
+      <div className={css.explanation}>
+        <p>Your account will be permanently deleted.</p>
+        <p>There is no way to reverse this.</p>
       </div>
     </div>
   );