diff --git a/packages/functional-tests/pages/resetPassword.ts b/packages/functional-tests/pages/resetPassword.ts
index 3a45f6314f8..265d5a2f979 100644
--- a/packages/functional-tests/pages/resetPassword.ts
+++ b/packages/functional-tests/pages/resetPassword.ts
@@ -194,7 +194,7 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   async fillOutTotpForm(code: string) {
-    await this.page.getByLabel('Enter code').fill(code);
+    await this.page.getByLabel('Enter 6-digit code').fill(code);
     return this.page.getByRole('button', { name: 'Confirm' }).click();
   }
 
@@ -203,9 +203,7 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   async fillOurRecoveryCodeForm(code: string) {
-    await this.page
-      .getByLabel('Enter 10-digit backup authentication code')
-      .fill(code);
+    await this.page.getByLabel('Enter 10-character code').fill(code);
     return this.page.getByRole('button', { name: 'Confirm' }).click();
   }
 
diff --git a/packages/functional-tests/pages/signinRecoveryCode.ts b/packages/functional-tests/pages/signinRecoveryCode.ts
index 078acfeaaf7..b9c96fea702 100644
--- a/packages/functional-tests/pages/signinRecoveryCode.ts
+++ b/packages/functional-tests/pages/signinRecoveryCode.ts
@@ -10,7 +10,7 @@ export class SigninRecoveryCodePage extends BaseTokenCodePage {
   get codeInput() {
     this.checkPath();
     return this.page
-      .getByLabel('Enter 10-digit backup') // React
+      .getByLabel('Enter 10-character code') // React
       .or(this.page.getByPlaceholder('Enter 10-digit backup')); //Backbone
   }
 }
diff --git a/packages/functional-tests/pages/signinTotpCode.ts b/packages/functional-tests/pages/signinTotpCode.ts
index 39c9427ca1a..f8b697ab8e0 100644
--- a/packages/functional-tests/pages/signinTotpCode.ts
+++ b/packages/functional-tests/pages/signinTotpCode.ts
@@ -10,7 +10,7 @@ export class SigninTotpCodePage extends BaseTokenCodePage {
   get codeInput() {
     this.checkPath();
     return this.page
-      .getByLabel('Enter code') // React
+      .getByLabel('Enter 6-digit code') // React
       .or(this.page.getByPlaceholder('Enter 6-digit code')); //Backbone
   }
 
diff --git a/packages/fxa-settings/src/components/HeadingPrimary/index.stories.tsx b/packages/fxa-settings/src/components/HeadingPrimary/index.stories.tsx
new file mode 100644
index 00000000000..0979645aefe
--- /dev/null
+++ b/packages/fxa-settings/src/components/HeadingPrimary/index.stories.tsx
@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { HeadingPrimary } from '.';
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/HeadingPrimary',
+  component: HeadingPrimary,
+} as Meta;
+
+export const Default = <HeadingPrimary>Primary heading text</HeadingPrimary>;
diff --git a/packages/fxa-settings/src/components/HeadingPrimary/index.tsx b/packages/fxa-settings/src/components/HeadingPrimary/index.tsx
new file mode 100644
index 00000000000..be83ff4df88
--- /dev/null
+++ b/packages/fxa-settings/src/components/HeadingPrimary/index.tsx
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+
+export const HeadingPrimary = ({
+  children,
+  marginClass = 'mb-5',
+}: {
+  children: React.ReactNode;
+  marginClass?: string;
+}) => <h1 className={`${marginClass} text-grey-400 text-base`}>{children}</h1>;
diff --git a/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx b/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx
index 11c4c2a6742..620f343750f 100644
--- a/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx
+++ b/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx
@@ -8,6 +8,7 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 import { CreateRecoveryKeyHandler } from '../../pages/InlineRecoveryKeySetup/interfaces';
 import Banner from '../Banner';
 import { useFtlMsgResolver } from '../../models';
+import { HeadingPrimary } from '../HeadingPrimary';
 
 export const InlineRecoveryKeySetupCreate = ({
   createRecoveryKeyHandler,
@@ -50,11 +51,9 @@ export const InlineRecoveryKeySetupCreate = ({
           content={{ localizedHeading: localizedErrorBannerMessage }}
         />
       )}
-      <h1 className="text-grey-400 mb-3 mt-5">
-        <FtlMsg id="inline-recovery-key-setup-create-header">
-          Secure your account
-        </FtlMsg>
-      </h1>
+      <FtlMsg id="inline-recovery-key-setup-create-header">
+        <HeadingPrimary>Secure your account</HeadingPrimary>
+      </FtlMsg>
 
       <RecoveryKeyImage className="my-6 mx-auto" />
 
diff --git a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
index 6feb6fa903a..90b398d765f 100644
--- a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
+++ b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
@@ -14,6 +14,7 @@ import { InlineRecoveryKeySetupProps } from './interfaces';
 import RecoveryKeySetupHint from '../../components/RecoveryKeySetupHint';
 import Banner from '../../components/Banner';
 import { useFtlMsgResolver } from '../../models';
+import { HeadingPrimary } from '../../components/HeadingPrimary';
 
 const viewName = 'inline-recovery-key-setup';
 
@@ -43,11 +44,9 @@ export const InlineRecoveryKeySetup = ({
       case 3:
         return (
           <>
-            <h1 className="text-grey-400">
-              <FtlMsg id="inline-recovery-key-setup-hint-header">
-                Security recommendation
-              </FtlMsg>
-            </h1>
+            <FtlMsg id="inline-recovery-key-setup-hint-header">
+              <HeadingPrimary>Security recommendation</HeadingPrimary>
+            </FtlMsg>
             <RecoveryKeySetupHint
               {...{ viewName }}
               navigateForward={() => {
@@ -69,11 +68,9 @@ export const InlineRecoveryKeySetup = ({
                 ),
               }}
             />
-            <h1 className="text-grey-400 mb-3 mt-5">
-              <FtlMsg id="inline-recovery-key-setup-download-header">
-                Secure your account
-              </FtlMsg>
-            </h1>
+            <FtlMsg id="inline-recovery-key-setup-download-header">
+              <HeadingPrimary>Secure your account</HeadingPrimary>
+            </FtlMsg>
             <RecoveryKeyImage className="my-6 mx-auto" />
 
             <h2 className="font-bold text-xl mb-5">
diff --git a/packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx
index f8cd7b950c8..6e037608de7 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx
@@ -22,6 +22,7 @@ import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 import { RecoveryKeyImage } from '../../../components/images';
 import { Constants } from '../../../lib/constants';
 import Banner from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 // TODO in FXA-7894 use sensitive data client to pass sensitive data
 // Depends on FXA-7400
@@ -138,23 +139,19 @@ const AccountRecoveryConfirmKey = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout cardClass="card-base">
       <FtlMsg id="password-reset-flow-heading">
-        <h1 className="text-start text-grey-400 text-sm">
-          Reset your password
-        </h1>
+        <HeadingPrimary>Reset your password</HeadingPrimary>
       </FtlMsg>
       {errorMessage && (
         <Banner type="error" content={{ localizedHeading: errorMessage }} />
       )}
       <RecoveryKeyImage className="mx-auto my-2" />
       <FtlMsg id="account-recovery-confirm-key-heading">
-        <h2 className="card-header text-start mb-2">
-          Enter your account recovery key
-        </h2>
+        <h2 className="card-header mb-2">Enter your account recovery key</h2>
       </FtlMsg>
       <FtlMsg id="account-recovery-confirm-key-instruction">
-        <p className="text-start text-sm">
+        <p className="text-sm">
           This key recovers your encrypted browsing data, such as passwords and
           bookmarks, from Firefox servers.
         </p>
@@ -190,7 +187,7 @@ const AccountRecoveryConfirmKey = ({
         </FtlMsg>
 
         {recoveryKeyHint && (
-          <div className="bg-grey-50 p-4 text-start text-sm rounded-md">
+          <div className="bg-grey-50 p-4 text-sm rounded-md">
             <FtlMsg id="account-recovery-confirm-key-hint">
               <p className="text-grey-500">Your storage hint is:</p>
             </FtlMsg>
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx
index 2ca0b1cd45d..fcf053e34e3 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx
@@ -18,6 +18,7 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 import ResetPasswordWarning from '../../../components/ResetPasswordWarning';
 import { Link, useLocation } from '@reach/router';
 import Banner from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 const CompleteResetPassword = ({
   email,
@@ -63,11 +64,9 @@ const CompleteResetPassword = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout cardClass="card-base">
       <FtlMsg id="password-reset-flow-heading">
-        <p className="text-start text-grey-400 text-sm mb-6">
-          Reset your password
-        </p>
+        <HeadingPrimary>Reset your password</HeadingPrimary>
       </FtlMsg>
 
       {/*
@@ -92,11 +91,9 @@ const CompleteResetPassword = ({
       <input type="email" value={email} className="hidden" readOnly />
 
       <FtlMsg id="complete-reset-pw-header-v2">
-        <h1 className="font-semibold text-xl text-start mt-6">
-          Create a new password
-        </h1>
+        <h1 className="font-semibold text-xl mt-6">Create a new password</h1>
       </FtlMsg>
-      <section className="text-start mt-2">
+      <section className="mt-2">
         <FormPasswordWithInlineCriteria
           {...{
             email,
diff --git a/packages/fxa-settings/src/pages/ResetPassword/ConfirmResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/ConfirmResetPassword/index.tsx
index b30fdb350e3..253eb882361 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/ConfirmResetPassword/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/ConfirmResetPassword/index.tsx
@@ -14,6 +14,7 @@ import { ResendStatus } from '../../../lib/types';
 import { EmailCodeImage } from '../../../components/images';
 import GleanMetrics from '../../../lib/glean';
 import Banner, { ResendCodeSuccessBanner } from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 const ConfirmResetPassword = ({
   clearBanners,
@@ -43,9 +44,9 @@ const ConfirmResetPassword = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout cardClass="card-base">
       <FtlMsg id="password-reset-flow-heading">
-        <p className="text-start text-grey-400 text-sm">Reset your password</p>
+        <HeadingPrimary marginClass="">Reset your password</HeadingPrimary>
       </FtlMsg>
       {resendStatus === ResendStatus.sent && !hasResendError && (
         <ResendCodeSuccessBanner />
@@ -61,16 +62,14 @@ const ConfirmResetPassword = ({
       )}
       <EmailCodeImage className="mx-auto" />
       <FtlMsg id="confirm-reset-password-with-code-heading">
-        <h2 className="card-header text-start my-4">Check your email</h2>
+        <h2 className="card-header my-4">Check your email</h2>
       </FtlMsg>
       <FtlMsg
         id="confirm-reset-password-with-code-instruction"
         vars={{ email }}
         elems={{ span: spanElement }}
       >
-        <p className="text-start">
-          We sent a confirmation code to {spanElement}.
-        </p>
+        <p>We sent a confirmation code to {spanElement}.</p>
       </FtlMsg>
       <FormVerifyTotp
         codeLength={8}
@@ -91,7 +90,7 @@ const ConfirmResetPassword = ({
         }}
       />
       <LinkRememberPassword {...{ email }} clickHandler={signinClickHandler} />
-      <div className="flex justify-between mt-4 text-sm">
+      <div className="flex justify-between mt-5 text-sm">
         <FtlMsg id="confirm-reset-password-otp-resend-code-button">
           <button type="button" className="link-blue" onClick={resendCode}>
             Resend code
diff --git a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/en.ftl b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/en.ftl
index 7ff9db547dd..a2d5aac15ef 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/en.ftl
+++ b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/en.ftl
@@ -1,9 +1,11 @@
 ## PasswordResetConfirmTotp Page
 
 confirm-totp-reset-password-header = Reset your password
-confirm-totp-reset-password-subheader = Enter your two-factor authentication security code (2FA)
-confirm-totp-reset-password-instruction = Check your authenticator app to reset your password.
+confirm-totp-reset-password-subheader-v2 = Enter two-step authentication code
+confirm-totp-reset-password-instruction-v2 = Check your <strong>authenticator app</strong> to reset your password.
 confirm-totp-reset-password-trouble-code = Trouble entering code?
 confirm-totp-reset-password-confirm-button = Confirm
-confirm-totp-reset-password-input-label = Enter code
-confirm-totp-reset-password-use-different-account = Use a different account
\ No newline at end of file
+confirm-totp-reset-password-input-label-v2 = Enter 6-digit code
+confirm-totp-reset-password-use-different-account = Use a different account
+confirm-recovery-code-reset-password-input-label = Enter 10-character code
+confirm-recovery-code-reset-password-trouble-code = Back
diff --git a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.test.tsx b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.test.tsx
index 77b7e7c6c59..7096232b077 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.test.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.test.tsx
@@ -30,14 +30,15 @@ describe('ConfirmTotpResetPassword', () => {
     ).toBeVisible();
 
     expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
-      'Enter your two-factor authentication security code (2FA)'
+      'Enter two-step authentication code'
     );
 
-    expect(screen.getByRole('textbox', { name: 'Enter code' })).toBeVisible();
-
     expect(
-      screen.getByText('Check your authenticator app to reset your password.')
+      screen.getByRole('textbox', { name: 'Enter 6-digit code' })
     ).toBeVisible();
+
+    screen.getByText('authenticator app', { exact: false });
+    screen.getByText('to reset your password', { exact: false });
     expect(screen.getByRole('button', { name: 'Confirm' })).toBeVisible();
     expect(screen.getByText('Trouble entering code?')).toBeVisible();
   });
@@ -47,7 +48,7 @@ describe('ConfirmTotpResetPassword', () => {
     renderWithLocalizationProvider(<Subject verifyCode={mockVerifyCode} />);
 
     await waitFor(() =>
-      screen.getByRole('textbox', { name: 'Enter code' }).click()
+      screen.getByRole('textbox', { name: 'Enter 6-digit code' }).click()
     );
     await waitFor(() => {
       user.paste('123456');
diff --git a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.tsx
index f53a295e082..a2e0233499d 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/index.tsx
@@ -11,6 +11,7 @@ import FormVerifyCode, {
   commonBackupCodeFormAttributes,
   FormAttributes,
 } from '../../../components/FormVerifyCode';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 export type ConfirmTotpResetPasswordProps = {
   verifyCode: (code: string) => Promise<void>;
@@ -29,8 +30,8 @@ const ConfirmTotpResetPassword = ({
   const [showRecoveryCode, setShowRecoveryCode] = useState<boolean>(false);
 
   const totpFormAttributes: FormAttributes = {
-    inputFtlId: 'confirm-totp-reset-password-input-label',
-    inputLabelText: 'Enter code',
+    inputFtlId: 'confirm-totp-reset-password-input-label-v2',
+    inputLabelText: 'Enter 6-digit code',
     pattern: '[0-9]{6}',
     maxLength: 6,
     submitButtonFtlId: 'confirm-totp-reset-password-confirm-button',
@@ -39,7 +40,7 @@ const ConfirmTotpResetPassword = ({
 
   const recoveryCodeFormAttributes: FormAttributes = {
     inputFtlId: 'confirm-recovery-code-reset-password-input-label',
-    inputLabelText: 'Enter 10-digit backup authentication code',
+    inputLabelText: 'Enter 10-character code',
     submitButtonFtlId: 'confirm-totp-reset-password-confirm-button',
     submitButtonText: 'Confirm',
     ...commonBackupCodeFormAttributes,
@@ -54,13 +55,11 @@ const ConfirmTotpResetPassword = ({
     <>
       {showRecoveryCode ? (
         <AppLayout cardClass="card-base">
-          <h1 className="text-grey-400 mb-6 text-start">
-            <FtlMsg id="confirm-totp-reset-password-header">
-              Reset your password
-            </FtlMsg>
-          </h1>
+          <FtlMsg id="confirm-totp-reset-password-header">
+            <HeadingPrimary>Reset your password</HeadingPrimary>
+          </FtlMsg>
 
-          <h2 className="font-bold text-xl text-start">
+          <h2 className="font-bold text-xl">
             <FtlMsg id="confirm-totp-reset-password-subheader">
               Enter your backup recovery code
             </FtlMsg>
@@ -68,7 +67,7 @@ const ConfirmTotpResetPassword = ({
 
           <div className="flex space-x-4">
             <img src={protectionShieldIcon} alt="" />
-            <p className="my-5 text-md text-start">
+            <p className="my-5 text-md">
               <FtlMsg id="confirm-totp-reset-password-instruction">
                 Check your download or saved backup recovery code.
               </FtlMsg>
@@ -103,25 +102,24 @@ const ConfirmTotpResetPassword = ({
         </AppLayout>
       ) : (
         <AppLayout cardClass="card-base">
-          <h1 className="text-grey-400 mb-6 text-start">
-            <FtlMsg id="confirm-totp-reset-password-header">
-              Reset your password
-            </FtlMsg>
-          </h1>
+          <FtlMsg id="confirm-totp-reset-password-header">
+            <HeadingPrimary>Reset your password</HeadingPrimary>
+          </FtlMsg>
 
-          <h2 className="font-bold text-xl text-start">
-            <FtlMsg id="confirm-totp-reset-password-subheader">
-              Enter your two-factor authentication security code (2FA)
+          <h2 className="font-bold text-xl">
+            <FtlMsg id="confirm-totp-reset-password-subheader-v2">
+              Enter two-step authentication code
             </FtlMsg>
           </h2>
 
           <div className="flex space-x-4">
             <img src={protectionShieldIcon} alt="" />
-            <p className="my-5 text-md text-start">
-              <FtlMsg id="confirm-totp-reset-password-instruction">
-                Check your authenticator app to reset your password.
-              </FtlMsg>
-            </p>
+            <FtlMsg id="confirm-totp-reset-password-instruction-v2">
+              <p className="my-5 text-md">
+                Check your <strong>authenticator app</strong> to reset your
+                password.
+              </p>
+            </FtlMsg>
           </div>
 
           <FormVerifyCode
diff --git a/packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx
index 555690a7d6e..c48f66a2d62 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx
@@ -99,7 +99,7 @@ const ResetPassword = ({
 
       <form
         noValidate
-        className="flex flex-col gap-4 mb-4"
+        className="flex flex-col gap-4 mb-5"
         onSubmit={handleSubmit(onSubmit)}
       >
         <FtlMsg id="password-reset-email-input" attrs={{ label: true }}>
diff --git a/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/en.ftl b/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/en.ftl
index 804a57d45b7..f75b0b3eaab 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/en.ftl
+++ b/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/en.ftl
@@ -3,15 +3,10 @@
 ## (provided to the user when they first set up two-step authentication)
 ## when they are unable to sign in with two-step authentication (e.g., Authy, Duo, etc.)
 
-# String within the <span> element appears on a separate line
-# If more appropriate in a locale, the string within the <span>, "to continue to account settings" can stand alone as "Continue to account settings"
-signin-recovery-code-heading-w-default-service = Enter backup authentication code <span>to continue to account settings</span>
-# String within the <span> element appears on a separate line
-# If more appropriate in a locale, the string within the <span>, "to continue to { $serviceName }" can stand alone as "Continue to { $serviceName }"
-# { $serviceName } represents a product name (e.g., Mozilla VPN) that will be passed in as a variable
-signin-recovery-code-heading-w-custom-service = Enter backup authentication code <span>to continue to { $serviceName }</span>
-signin-recovery-code-instruction = Please enter a backup authentication code that was provided to you during two step authentication setup.
-signin-recovery-code-input-label = Enter 10-digit backup authentication code
+signin-recovery-code-heading = Sign in
+signin-recovery-code-sub-heading = Enter backup authentication code
+signin-recovery-code-instruction-v2 = Enter one of the one-time use backup authentication codes you saved during two-step authentication setup.
+signin-recovery-code-input-label-v2 = Enter 10-character code
 # Form button to confirm if the backup authentication code entered by the user is valid
 signin-recovery-code-confirm-button = Confirm
 # Link to return to signin with two-step authentication code
diff --git a/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.test.tsx b/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.test.tsx
index 89e6f720d86..6d075fed0bb 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.test.tsx
@@ -51,16 +51,18 @@ describe('PageSigninRecoveryCode', () => {
       </LocationProvider>
     );
 
-    const headingEl = screen.getByRole('heading', { level: 1 });
-    expect(headingEl).toHaveTextContent(
-      'Enter backup authentication code to continue to account settings'
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Sign in'
+    );
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Enter backup authentication code'
     );
     screen.getByRole('img', { name: 'Document that contains hidden text.' });
     screen.getByText(
-      'Please enter a backup authentication code that was provided to you during two step authentication setup.'
+      'Enter one of the one-time use backup authentication codes you saved during two-step authentication setup.'
     );
     screen.getByRole('textbox', {
-      name: 'Enter 10-digit backup authentication code',
+      name: 'Enter 10-character code',
     });
 
     screen.getByRole('button', { name: 'Confirm' });
@@ -70,25 +72,6 @@ describe('PageSigninRecoveryCode', () => {
     });
   });
 
-  it('shows the relying party in the header when a service name is provided', () => {
-    const mockSubmitRecoveryCode = jest.fn();
-    renderWithLocalizationProvider(
-      <LocationProvider>
-        <SigninRecoveryCode
-          finishOAuthFlowHandler={mockFinishOAuthFlowHandler}
-          integration={mockIntegration}
-          signinState={mockSigninLocationState}
-          submitRecoveryCode={mockSubmitRecoveryCode}
-          serviceName={MozServices.MozillaVPN}
-        />
-      </LocationProvider>
-    );
-    const headingEl = screen.getByRole('heading', { level: 1 });
-    expect(headingEl).toHaveTextContent(
-      'Enter backup authentication code to continue to Mozilla VPN'
-    );
-  });
-
   describe('metrics', () => {
     it('emits a metrics event on render', () => {
       const mockSubmitRecoveryCode = jest.fn();
diff --git a/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.tsx b/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.tsx
index f0def550cc0..536497dc801 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.tsx
+++ b/packages/fxa-settings/src/pages/Signin/SigninRecoveryCode/index.tsx
@@ -7,7 +7,6 @@ import { Link, RouteComponentProps, useLocation } from '@reach/router';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import { isWebIntegration, useFtlMsgResolver } from '../../../models';
 import { BackupCodesImage } from '../../../components/images';
-import CardHeader from '../../../components/CardHeader';
 import LinkExternal from 'fxa-react/components/LinkExternal';
 import FormVerifyCode, {
   FormAttributes,
@@ -23,6 +22,7 @@ import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 import { useWebRedirect } from '../../../lib/hooks/useWebRedirect';
 import { isBase32Crockford } from '../../../lib/utilities';
 import Banner from '../../../components/Banner';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 export const viewName = 'signin-recovery-code';
 
@@ -56,8 +56,8 @@ const SigninRecoveryCode = ({
       : '';
 
   const formAttributes: FormAttributes = {
-    inputFtlId: 'signin-recovery-code-input-label',
-    inputLabelText: 'Enter 10-digit backup authentication code',
+    inputFtlId: 'signin-recovery-code-input-label-v2',
+    inputLabelText: 'Enter 10-character code',
     inputMode: InputModeEnum.text,
     pattern: '[a-zA-Z0-9]',
     maxLength: 10,
@@ -150,13 +150,10 @@ const SigninRecoveryCode = ({
   };
 
   return (
-    <AppLayout>
-      <CardHeader
-        headingWithDefaultServiceFtlId="signin-recovery-code-heading-w-default-service"
-        headingWithCustomServiceFtlId="signin-recovery-code-heading-w-custom-service"
-        headingText="Enter backup authentication code"
-        {...{ serviceName }}
-      />
+    <AppLayout cardClass="card-base">
+      <FtlMsg id="signin-recovery-code-heading">
+        <HeadingPrimary>Sign in</HeadingPrimary>
+      </FtlMsg>
 
       {bannerErrorMessage && (
         <Banner
@@ -164,14 +161,19 @@ const SigninRecoveryCode = ({
           content={{ localizedHeading: bannerErrorMessage }}
         />
       )}
+
       <div className="flex justify-center mx-auto">
         <BackupCodesImage className="w-3/5" />
       </div>
 
-      <FtlMsg id="signin-recovery-code-instruction">
-        <p className="m-5 text-sm">
-          Please enter a backup authentication code that was provided to you
-          during two step authentication setup.
+      <FtlMsg id="signin-recovery-code-sub-heading">
+        <h2 className="card-header">Enter backup authentication code</h2>
+      </FtlMsg>
+
+      <FtlMsg id="signin-recovery-code-instruction-v2">
+        <p className="mt-2 text-sm">
+          Enter one of the one-time use backup authentication codes you saved
+          during two-step authentication setup.
         </p>
       </FtlMsg>
 
@@ -186,7 +188,7 @@ const SigninRecoveryCode = ({
         }}
       />
 
-      <div className="mt-5 link-blue text-sm flex justify-between">
+      <div className="mt-10 link-blue text-sm flex justify-between">
         <FtlMsg id="signin-recovery-code-back-link">
           <Link
             to={`/signin_totp_code${location.search || ''}`}
diff --git a/packages/fxa-settings/src/pages/Signin/SigninTotpCode/en.ftl b/packages/fxa-settings/src/pages/Signin/SigninTotpCode/en.ftl
index 04297309763..3b703636f65 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninTotpCode/en.ftl
+++ b/packages/fxa-settings/src/pages/Signin/SigninTotpCode/en.ftl
@@ -2,13 +2,13 @@
 ## TOTP (time-based one-time password) is a form of two-factor authentication (2FA).
 ## Users that have set up two-factor authentication land on this page during sign-in.
 
-signin-totp-code-subheader = Enter your two-factor authentication security code (2FA)
-signin-totp-code-instruction-v3 = Check your authenticator app to confirm your sign-in.
-signin-totp-code-input-label-v3 = Enter code
+signin-totp-code-subheader-v2 = Enter two-step authentication code
+signin-totp-code-instruction-v4 = Check your <strong>authenticator app</strong> to confirm your sign-in.
+signin-totp-code-input-label-v4 = Enter 6-digit code
 
 # Form button to confirm if the authentication code entered by the user is valid
 signin-totp-code-confirm-button = Confirm
 signin-totp-code-other-account-link = Use a different account
 signin-totp-code-recovery-code-link = Trouble entering code?
 # Error displayed in a tooltip when the form is submitted without a code
-signin-totp-code-required-error = Authentication code required
\ No newline at end of file
+signin-totp-code-required-error = Authentication code required
diff --git a/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.test.tsx b/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.test.tsx
index 3a370b257a7..f7e306819b4 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.test.tsx
+++ b/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.test.tsx
@@ -79,10 +79,8 @@ describe('Sign in with TOTP code page', () => {
     // testAllL10n(screen, bundle);
 
     const headingEl = screen.getByRole('heading', { level: 2 });
-    expect(headingEl).toHaveTextContent(
-      'Enter your two-factor authentication security code (2FA)'
-    );
-    screen.getByLabelText('Enter code');
+    expect(headingEl).toHaveTextContent('Enter two-step authentication code');
+    screen.getByLabelText('Enter 6-digit code');
 
     screen.getByRole('button', { name: 'Confirm' });
     screen.getByRole('link', { name: 'Use a different account' });
@@ -98,9 +96,7 @@ describe('Sign in with TOTP code page', () => {
       />
     );
     const headingEl = screen.getByRole('heading', { level: 2 });
-    expect(headingEl).toHaveTextContent(
-      'Enter your two-factor authentication security code (2FA)'
-    );
+    expect(headingEl).toHaveTextContent('Enter two-step authentication code');
   });
 
   it('emits a metrics event on render', () => {
@@ -132,7 +128,7 @@ describe('Sign in with TOTP code page', () => {
         />
       );
 
-      fireEvent.input(screen.getByLabelText('Enter code'), {
+      fireEvent.input(screen.getByLabelText('Enter 6-digit code'), {
         target: { value: '123456' },
       });
       screen.getByRole('button', { name: 'Confirm' }).click();
diff --git a/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.tsx b/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.tsx
index 51d8ca2a869..70092acefd4 100644
--- a/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.tsx
+++ b/packages/fxa-settings/src/pages/Signin/SigninTotpCode/index.tsx
@@ -25,6 +25,7 @@ import {
 import protectionShieldIcon from '@fxa/shared/assets/images/protection-shield.svg';
 import Banner from '../../../components/Banner';
 import { SensitiveDataClientAuthKeys } from '../../../lib/sensitive-data-client';
+import { HeadingPrimary } from '../../../components/HeadingPrimary';
 
 // TODO: show a banner success message if a user is coming from reset password
 // in FXA-6491. This differs from content-server where currently, users only
@@ -74,8 +75,8 @@ export const SigninTotpCode = ({
   );
 
   const formAttributes: FormAttributes = {
-    inputFtlId: 'signin-totp-code-input-label-v3',
-    inputLabelText: 'Enter code',
+    inputFtlId: 'signin-totp-code-input-label-v4',
+    inputLabelText: 'Enter 6-digit code',
     pattern: '[0-9]{6}',
     maxLength: 6,
     submitButtonFtlId: 'signin-totp-code-confirm-button',
@@ -142,18 +143,20 @@ export const SigninTotpCode = ({
   };
 
   return (
-    <AppLayout>
-      <h2 className="font-bold text-xl text-left">
-        <FtlMsg id="signin-totp-code-subheader">
-          Enter your two-factor authentication security code (2FA)
-        </FtlMsg>
-      </h2>
+    <AppLayout cardClass="card-base">
+      <FtlMsg id="signin-totp-code-header">
+        <HeadingPrimary>Sign in</HeadingPrimary>
+      </FtlMsg>
+      <FtlMsg id="signin-totp-code-subheader-v2">
+        <h2 className="card-header">Enter two-step authentication code</h2>
+      </FtlMsg>
 
       <div className="flex space-x-4">
         <img src={protectionShieldIcon} alt="" />
-        <FtlMsg id="signin-totp-code-instruction-v3">
-          <p id="totp-code-instruction" className="my-5 text-md text-left">
-            Check your authenticator app to confirm your sign-in.
+        <FtlMsg id="signin-totp-code-instruction-v4">
+          <p className="my-5 text-md">
+            Check your <strong>authenticator app</strong> to confirm your
+            sign-in.
           </p>
         </FtlMsg>
       </div>
@@ -172,7 +175,7 @@ export const SigninTotpCode = ({
           setCodeErrorMessage,
         }}
       />
-      <div className="mt-5 link-blue text-sm flex justify-between">
+      <div className="mt-10 link-blue text-sm flex justify-between">
         <FtlMsg id="signin-totp-code-other-account-link">
           {/* TODO in FXA-8636 replace with Link component once index reactified */}
           <a