diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
index 59398b35..a28e608a 100644
--- a/settings/src/components/backup-codes.js
+++ b/settings/src/components/backup-codes.js
@@ -123,6 +123,13 @@ function Setup( { setRegenerating } ) {
 				</p>
 
 				<p>Please print the codes and keep them in a safe place.</p>
+
+				<Notice status="warning" isDismissible={ false }>
+					<Icon icon={ warning } className="wporg-2fa__print-codes-warning" />
+					Without access to the one-time password app or a backup code, you will lose
+					access to your account. Once you navigate away from this page, you will not be
+					be able to view these codes again.
+				</Notice>
 			</div>
 
 			{ error ? (
@@ -140,13 +147,6 @@ function Setup( { setRegenerating } ) {
 						<DownloadButton codes={ backupCodes } />
 					</ButtonGroup>
 
-					<Notice status="warning" isDismissible={ false }>
-						<Icon icon={ warning } className="wporg-2fa__print-codes-warning" />
-						Without access to the one-time password app or a backup code, you will lose
-						access to your account. Once you navigate away from this page, you will not
-						be able to view these codes again.
-					</Notice>
-
 					<CheckboxControl
 						label="I have printed or saved these codes"
 						checked={ hasPrinted }
diff --git a/settings/src/components/backup-codes.scss b/settings/src/components/backup-codes.scss
index eafb311e..f07fcbe4 100644
--- a/settings/src/components/backup-codes.scss
+++ b/settings/src/components/backup-codes.scss
@@ -5,6 +5,7 @@
 
 	.wporg-2fa__backup-codes-list {
 		background-color: $gray-300;
+		margin-top: 24px;
 		padding: 15px 20px;
 
 		ol {