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,17 +1,22 @@
 .container {
+  flex: 1;
+  background-color: var(--panel-background-primary-default);
+}
+
+.contentContainer {
   padding: 40px;
   width: 343px;
 }
 
 .header {
-  color: var(--fg);
+  color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
   padding-bottom: 40px;
 }
 
 .subheading {
-  color: var(--danger-zone-subheading-color);
+  color: var(--text-background-secondary-default);
   font-size: var(--xl-font-20);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
@@ -24,5 +29,5 @@
 
 .explanation {
   padding-top: 8px;
-  color: var(--danger-zone-explanation-color);
+  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
@@ -17,20 +17,22 @@
 
   return (
     <div className={css.container}>
-      <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}>
+        <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>
     </div>
   );
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -176,8 +176,6 @@
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
-  --danger-zone-subheading-color: var(--shades-white-60);
-  --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
@@ -269,6 +267,7 @@
 
   /* Text */
   --text-background-primary-default: var(--shades-white-100);
+  --text-background-secondary-default: var(--shades-white-60);
   --text-background-tertiary-default: var(--shades-black-60);
 
   /* Button */
@@ -291,6 +290,7 @@
 
   /* Text */
   --text-background-primary-default: var(--shades-black-100);
+  --text-background-secondary-default: var(--shades-black-70);
   --text-background-tertiary-default: var(--shades-black-60);
 
   /* Button */