diff --git a/packages/functional-tests/pages/resetPassword.ts b/packages/functional-tests/pages/resetPassword.ts
index efeaf65cbc7..55efe9077dd 100644
--- a/packages/functional-tests/pages/resetPassword.ts
+++ b/packages/functional-tests/pages/resetPassword.ts
@@ -71,13 +71,17 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   get newPasswordHeading() {
-    return this.page.getByRole('heading', { name: 'Create new password' });
+    return this.page.getByRole('heading', { name: 'Create a new password' });
   }
 
   get newPasswordTextbox() {
     return this.page.getByRole('textbox', { name: 'New password' });
   }
 
+  get newPasswordInput() {
+    return this.page.getByTestId('new-password-input-container');
+  }
+
   get reenterPasswordTextbox() {
     return this.page.getByRole('textbox', { name: 'Re-enter password' });
   }
@@ -110,6 +114,18 @@ export class ResetPasswordPage extends BaseLayout {
     });
   }
 
+  get dataLossWarning() {
+    return this.page.getByText(
+      'Resetting your password may delete your encrypted browser data.'
+    );
+  }
+
+  get resetPasswordWithRecoveryKey() {
+    return this.page.getByRole('link', {
+      name: 'Reset your password with your recovery key.',
+    });
+  }
+
   get forgotKeyLink() {
     return this.page.getByRole('link', {
       name: 'Don’t have an account recovery key?',
@@ -138,12 +154,15 @@ export class ResetPasswordPage extends BaseLayout {
     await this.beginResetButton.click();
   }
 
-  async fillOutNewPasswordForm(password: string) {
+  async fillOutNewPasswordForm(password: string, submit = true) {
     await expect(this.newPasswordHeading).toBeVisible();
 
     await this.newPasswordTextbox.fill(password);
     await this.reenterPasswordTextbox.fill(password);
-    await this.resetPasswordButton.click();
+
+    if (submit) {
+      await this.resetPasswordButton.click();
+    }
   }
 
   async fillOutRecoveryKeyForm(key: string) {
diff --git a/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPassword.spec.ts b/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPassword.spec.ts
index 2a5dafe1363..bfe39fecbbf 100644
--- a/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPassword.spec.ts
+++ b/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPassword.spec.ts
@@ -83,10 +83,13 @@ test.describe('severity-1 #smoke', () => {
 
       await resetPassword.fillOutResetPasswordCodeForm(code);
 
-      await resetPassword.fillOutNewPasswordForm(passwordValue);
+      await resetPassword.fillOutNewPasswordForm(passwordValue, false);
 
       await expect(page.getByText(error)).toBeVisible();
-      await expect(resetPassword.newPasswordTextbox).toBeFocused();
+      await expect(resetPassword.resetPasswordButton).toBeDisabled();
+      await expect(resetPassword.newPasswordInput).toHaveClass(
+        /border-red-700/
+      );
     });
   }
 
diff --git a/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPasswordRecoveryKey.spec.ts b/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPasswordRecoveryKey.spec.ts
index 3dc824615f5..b0a7a6b08fd 100644
--- a/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPasswordRecoveryKey.spec.ts
+++ b/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/resetPasswordRecoveryKey.spec.ts
@@ -133,6 +133,7 @@ test.describe('severity-1 #smoke', () => {
 
       await resetPassword.fillOutResetPasswordCodeForm(code);
       await resetPassword.forgotKeyLink.click();
+      await expect(resetPassword.dataLossWarning).toBeVisible();
       await resetPassword.fillOutNewPasswordForm(newPassword);
 
       await expect(
diff --git a/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/syncV3ResetPassword.spec.ts b/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/syncV3ResetPassword.spec.ts
index 53a08f3db78..f6c37ec99e7 100644
--- a/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/syncV3ResetPassword.spec.ts
+++ b/packages/functional-tests/tests/resetPassword/resetPasswordWithCode/syncV3ResetPassword.spec.ts
@@ -31,6 +31,8 @@ test.describe('severity-1 #smoke', () => {
       );
 
       await resetPassword.fillOutResetPasswordCodeForm(code);
+
+      await expect(resetPassword.dataLossWarning).toBeVisible();
       await resetPassword.fillOutNewPasswordForm(newPassword);
 
       await expect(page).toHaveURL(/reset_password_verified/);
diff --git a/packages/functional-tests/tests/resetPassword/resetPasswordWithLink/resetPassword.spec.ts b/packages/functional-tests/tests/resetPassword/resetPasswordWithLink/resetPassword.spec.ts
index 3a8c048839c..508f5ccb3c5 100644
--- a/packages/functional-tests/tests/resetPassword/resetPasswordWithLink/resetPassword.spec.ts
+++ b/packages/functional-tests/tests/resetPassword/resetPasswordWithLink/resetPassword.spec.ts
@@ -136,7 +136,10 @@ test.describe('severity-1 #smoke', () => {
         await diffResetPasswordReact.fillOutNewPasswordForm(passwordValue);
 
         await expect(diffPage.getByText(error)).toBeVisible();
-        await expect(diffResetPasswordReact.newPasswordTextbox).toBeFocused();
+        await expect(diffResetPasswordReact.resetPasswordButton).toBeDisabled();
+        await expect(diffResetPasswordReact.newPasswordTextbox).toHaveClass(
+          'error'
+        );
       });
     }
 
diff --git a/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/en.ftl b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/en.ftl
new file mode 100644
index 00000000000..c4ef2332f84
--- /dev/null
+++ b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/en.ftl
@@ -0,0 +1,20 @@
+## FormPasswordInlineCriteria
+
+form-password-with-inline-criteria-signup-new-password-label =
+  .label = Password
+form-password-with-inline-criteria-signup-confirm-password-label =
+  .label = Repeat password
+form-password-with-inline-criteria-signup-submit-button = Create account
+
+form-password-with-inline-criteria-reset-new-password =
+  .label = New password
+form-password-with-inline-criteria-confirm-password =
+  .label = Re-enter password
+form-password-with-inline-criteria-reset-submit-button = Reset password
+
+form-password-with-inline-criteria-match-error = Passwords do not match
+form-password-with-inline-criteria-sr-too-short-message = Password must contain at least 8 characters.
+form-password-with-inline-criteria-sr-not-email-message = Password must not contain your email address.
+form-password-with-inline-criteria-sr-not-common-message = Password must not be a commonly used password.
+form-password-with-inline-criteria-sr-requirements-met = The entered password respects all password requirements.
+form-password-with-inline-criteria-sr-passwords-match = Entered passwords match.
diff --git a/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.stories.tsx b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.stories.tsx
new file mode 100644
index 00000000000..fb487f5fd7f
--- /dev/null
+++ b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.stories.tsx
@@ -0,0 +1,32 @@
+/* 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 { Subject } from './mocks';
+import AppLayout from '../AppLayout';
+import FormPasswordInline from '.';
+import { Meta } from '@storybook/react';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+
+export default {
+  title: 'Components/FormPasswordWithInlineCriteria',
+  component: FormPasswordInline,
+  decorators: [withLocalization],
+} as Meta;
+
+export const ResetPassword = () => (
+  <AppLayout>
+    <div className="max-w-lg mx-auto">
+      <Subject passwordFormType="reset" />
+    </div>
+  </AppLayout>
+);
+
+export const Signup = () => (
+  <AppLayout>
+    <div className="max-w-lg mx-auto">
+      <Subject passwordFormType="signup" />
+    </div>
+  </AppLayout>
+);
diff --git a/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.test.tsx b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.test.tsx
new file mode 100644
index 00000000000..050bba4c152
--- /dev/null
+++ b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.test.tsx
@@ -0,0 +1,81 @@
+/* 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 { screen, fireEvent, waitFor, within } from '@testing-library/react';
+import { UserEvent, userEvent } from '@testing-library/user-event';
+import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
+import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';
+import { FluentBundle } from '@fluent/bundle';
+import { Subject } from './mocks';
+
+describe('FormPasswordWithInlineCriteria component', () => {
+  let bundle: FluentBundle;
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+  beforeAll(async () => {
+    bundle = await getFtlBundle('settings');
+  });
+  it('renders as expected for the reset form type', async () => {
+    renderWithLocalizationProvider(<Subject passwordFormType="reset" />);
+    testAllL10n(screen, bundle);
+
+    await waitFor(() => {
+      screen.getByLabelText('New password');
+    });
+    screen.getByLabelText('Re-enter password');
+    screen.getByRole('button', { name: 'Reset password' });
+  });
+
+  it('renders as expected for the signup form type', async () => {
+    renderWithLocalizationProvider(<Subject passwordFormType="signup" />);
+
+    await waitFor(() => {
+      screen.getByLabelText('Password');
+    });
+    screen.getByLabelText('Repeat password');
+    screen.getByRole('button', { name: 'Create account' });
+  });
+
+  it('displays the Password Strength Criteria when the new password field is in focus', async () => {
+    renderWithLocalizationProvider(<Subject passwordFormType="reset" />);
+    const newPasswordField = screen.getByLabelText('New password');
+
+    fireEvent.focus(newPasswordField);
+
+    await waitFor(() => screen.getByText('At least 8 characters'));
+    await waitFor(() => screen.getByText('Not your email address'));
+    await waitFor(() => screen.getByText('Not a commonly used password'));
+  });
+
+  // TODO in FXA-7482, review our password requirements and best way to display them
+  it('disallows space-only passwords', async () => {
+    renderWithLocalizationProvider(<Subject passwordFormType="signup" />);
+    const passwordField = screen.getByLabelText('Password');
+    await user.type(passwordField, '        ');
+
+    expect(screen.getAllByLabelText('passed')).toHaveLength(2);
+    expect(screen.getAllByLabelText('failed')).toHaveLength(1);
+    const passwordMinCharRequirement = screen.getByTestId(
+      'password-min-char-req'
+    );
+    expect(passwordMinCharRequirement.querySelector('svg')).toHaveTextContent(
+      'icon-x.svg'
+    );
+  });
+
+  it('disallows common passwords', async () => {
+    renderWithLocalizationProvider(<Subject passwordFormType="signup" />);
+    const passwordField = screen.getByLabelText('Password');
+    await user.type(passwordField, 'mozilla accounts');
+    expect(screen.getAllByLabelText('passed')).toHaveLength(2);
+    expect(screen.getAllByLabelText('failed')).toHaveLength(1);
+    expect(
+      screen.getByTestId('password-not-common-req').querySelector('svg')
+    ).toHaveTextContent('icon-x.svg');
+  });
+});
diff --git a/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.tsx b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.tsx
new file mode 100644
index 00000000000..6d57f2eda5e
--- /dev/null
+++ b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.tsx
@@ -0,0 +1,326 @@
+/* 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, { useCallback, useState } from 'react';
+import { UseFormMethods } from 'react-hook-form';
+import InputPassword from '../InputPassword';
+import PasswordValidator from '../../lib/password-validator';
+import { FtlMsg } from 'fxa-react/lib/utils';
+import { useFtlMsgResolver } from '../../models';
+import PasswordStrengthInline from '../PasswordStrengthInline';
+
+export type PasswordFormType = 'signup' | 'reset';
+
+export type FormPasswordWithInlineCriteriaProps = {
+  passwordFormType: PasswordFormType;
+  formState: UseFormMethods['formState'];
+  errors: UseFormMethods['errors'];
+  onSubmit: () => void;
+  trigger: UseFormMethods['trigger'];
+  register: UseFormMethods['register'];
+  getValues: UseFormMethods['getValues'];
+  email: string;
+  onFocusMetricsEvent?: () => void;
+  loading: boolean;
+  children?: React.ReactNode;
+  disableButtonUntilValid?: boolean;
+};
+
+const getTemplateValues = (passwordFormType: PasswordFormType) => {
+  let templateValues = {
+    passwordFtlId: '',
+    passwordLabel: '',
+    confirmPasswordFtlId: '',
+    confirmPasswordLabel: '',
+    buttonFtlId: '',
+    buttonText: '',
+  };
+  switch (passwordFormType) {
+    case 'signup':
+      templateValues.passwordFtlId =
+        'form-password-with-inline-criteria-signup-new-password-label';
+      templateValues.passwordLabel = 'Password';
+      templateValues.confirmPasswordFtlId =
+        'form-password-with-inline-criteria-signup-confirm-password-label';
+      templateValues.confirmPasswordLabel = 'Repeat password';
+      templateValues.buttonFtlId =
+        'form-password-with-inline-criteria-signup-submit-button';
+      templateValues.buttonText = 'Create account';
+      break;
+    case 'reset':
+      templateValues.passwordFtlId =
+        'form-password-with-inline-criteria-reset-new-password';
+      templateValues.passwordLabel = 'New password';
+      templateValues.confirmPasswordFtlId =
+        'form-password-with-inline-criteria-confirm-password';
+      templateValues.confirmPasswordLabel = 'Re-enter password';
+      templateValues.buttonFtlId =
+        'form-password-with-inline-criteria-reset-submit-button';
+      templateValues.buttonText = 'Reset password';
+      break;
+  }
+  return templateValues;
+};
+
+export const FormPasswordWithInlineCriteria = ({
+  passwordFormType,
+  formState,
+  errors,
+  onSubmit,
+  email,
+  trigger,
+  register,
+  getValues,
+  onFocusMetricsEvent,
+  loading,
+  children,
+  disableButtonUntilValid = true,
+}: FormPasswordWithInlineCriteriaProps) => {
+  const passwordValidator = new PasswordValidator(email);
+  const [passwordMatchErrorText, setPasswordMatchErrorText] =
+    useState<string>('');
+  const [hasNewPwdFocused, setHasNewPwdFocused] = useState<boolean>(false);
+  const [srOnlyPwdFeedbackMessage, setSROnlyPwdFeedbackMessage] =
+    useState<string>();
+  const [srOnlyConfirmPwdFeedbackMessage, setSROnlyConfirmPwdFeedbackMessage] =
+    useState<string>();
+
+  const ftlMsgResolver = useFtlMsgResolver();
+  const localizedPasswordMatchError = ftlMsgResolver.getMsg(
+    'form-password-with-inline-criteria-match-error',
+    'Passwords do not match'
+  );
+
+  const templateValues = getTemplateValues(passwordFormType);
+
+  const onNewPwdFocus = () => {
+    setSROnlyPwdFeedbackMessage('');
+    setSROnlyConfirmPwdFeedbackMessage('');
+    setPasswordMatchErrorText('');
+    if (!hasNewPwdFocused) {
+      if (onFocusMetricsEvent) {
+        onFocusMetricsEvent();
+      }
+      setHasNewPwdFocused(true);
+    }
+  };
+
+  const onNewPwdBlur = () => {
+    // do not hide the password strength info if there are errors in the new password
+    if (!errors.newPassword) {
+      // Without balloons, this created a jumpy ux.
+      // hideNewPwdCriteria();
+      const srOnlyPasswordMeetsRequirements = ftlMsgResolver.getMsg(
+        'form-password-with-inline-criteria-sr-requirements-met',
+        'The entered password respects all password requirements.'
+      );
+      setSROnlyPwdFeedbackMessage(srOnlyPasswordMeetsRequirements);
+    } else {
+      // if there are errors on blur, announce a screen-reader only message
+      // visual feedback is provided by the password strength ballon
+      if (errors.newPassword?.types?.length) {
+        const srOnlyTooShortMessage = ftlMsgResolver.getMsg(
+          'form-password-with-inline-criteria-sr-too-short-message',
+          'Password must contain at least 8 characters.'
+        );
+        setSROnlyPwdFeedbackMessage(srOnlyTooShortMessage);
+      } else if (errors.newPassword?.types?.notEmail) {
+        const srOnlyNotEmailMessage = ftlMsgResolver.getMsg(
+          'form-password-with-inline-criteria-sr-not-email-message',
+          'Password must not contain your email address.'
+        );
+        setSROnlyPwdFeedbackMessage(srOnlyNotEmailMessage);
+      } else if (errors.newPassword?.types?.uncommon) {
+        const srOnlyNotCommonMessage = ftlMsgResolver.getMsg(
+          'form-password-with-inline-criteria-sr-not-common-message',
+          'Password must not be a commonly used password.'
+        );
+        setSROnlyPwdFeedbackMessage(srOnlyNotCommonMessage);
+      }
+    }
+    if (
+      !errors.newPassword &&
+      getValues('confirmPassword') !== '' &&
+      getValues('confirmPassword') !== getValues('newPassword')
+    ) {
+      setPasswordMatchErrorText(localizedPasswordMatchError);
+    }
+
+    if (!formState.isValid) {
+      trigger('confirmPassword');
+    }
+  };
+
+  const onFocusConfirmPassword = useCallback(() => {
+    setPasswordMatchErrorText('');
+    setSROnlyPwdFeedbackMessage('');
+    setSROnlyConfirmPwdFeedbackMessage('');
+  }, []);
+
+  const onBlurConfirmPassword = useCallback(() => {
+    if (getValues('confirmPassword') !== getValues('newPassword')) {
+      setPasswordMatchErrorText(localizedPasswordMatchError);
+    } else {
+      const srOnlyPasswordsMatch = ftlMsgResolver.getMsg(
+        'form-password-with-inline-criteria-sr-passwords-match',
+        'Entered passwords match.'
+      );
+      setSROnlyConfirmPwdFeedbackMessage(srOnlyPasswordsMatch);
+    }
+
+    if (!formState.isValid) {
+      trigger('newPassword');
+    }
+  }, [
+    formState,
+    ftlMsgResolver,
+    getValues,
+    localizedPasswordMatchError,
+    setPasswordMatchErrorText,
+    trigger,
+  ]);
+
+  const onChangePassword = (inputName: string) => {
+    const newPassword = getValues('newPassword');
+    const confirmPassword = getValues('confirmPassword');
+    if (inputName === 'newPassword') {
+      trigger('newPassword');
+    }
+
+    if (!errors.newPassword) {
+      setSROnlyPwdFeedbackMessage('');
+    }
+
+    if (confirmPassword !== newPassword && confirmPassword !== '') {
+      setPasswordMatchErrorText(localizedPasswordMatchError);
+    } else {
+      setPasswordMatchErrorText('');
+    }
+
+    trigger('confirmPassword');
+  };
+
+  return (
+    <>
+      <form {...{ onSubmit }} className="flex flex-col">
+        {/* Hidden email field is to help password managers
+           correctly associate the email and password. Without this,
+           password managers may try to use another field as username */}
+        <input
+          type="email"
+          value={email}
+          className="hidden"
+          autoComplete="username"
+          readOnly
+        />
+        <div>
+          <PasswordStrengthInline
+            {...{
+              isPasswordEmpty: (getValues('newPassword')?.length || 0) === 0,
+              isConfirmedPasswordEmpty:
+                (getValues('confirmPassword')?.length || 0) === 0,
+              isTooShort: errors.newPassword?.types?.length,
+              isSameAsEmail: errors.newPassword?.types?.notEmail,
+              isCommon: errors.newPassword?.types?.uncommon,
+              isUnconfirmed:
+                getValues('confirmPassword') !== getValues('newPassword'),
+            }}
+          />
+          <span
+            id="password-requirements"
+            aria-live="polite"
+            className="text-xs"
+          >
+            <span className="sr-only">{srOnlyPwdFeedbackMessage}</span>
+          </span>
+        </div>
+
+        <div className="relative mb-4" aria-atomic="true">
+          <FtlMsg id={templateValues.passwordFtlId} attrs={{ label: true }}>
+            <InputPassword
+              name="newPassword"
+              label={templateValues.passwordLabel}
+              onFocusCb={onNewPwdFocus}
+              onBlurCb={onNewPwdBlur}
+              onChange={() => onChangePassword('newPassword')}
+              hasErrors={
+                formState.dirtyFields.newPassword ? errors.newPassword : false
+              }
+              inputRef={register({
+                required: true,
+                validate: {
+                  length: (value: string) =>
+                    value.length > 7 && value.trim() !== '',
+                  notEmail: (value: string) => {
+                    return !passwordValidator.isSameAsEmail(
+                      value.toLowerCase()
+                    );
+                  },
+                  uncommon: async (value: string) => {
+                    // @ts-ignore
+                    const list = await import('fxa-common-password-list');
+                    const input = value.toLowerCase();
+                    return (
+                      !list.test(input) && !passwordValidator.isBanned(input)
+                    );
+                  },
+                },
+              })}
+              prefixDataTestId="new-password"
+              aria-describedby="password-requirements"
+            />
+          </FtlMsg>
+        </div>
+
+        <div className=" relative mb-4">
+          <FtlMsg
+            id={templateValues.confirmPasswordFtlId}
+            attrs={{ label: true }}
+          >
+            <InputPassword
+              name="confirmPassword"
+              label={templateValues.confirmPasswordLabel}
+              className="text-start"
+              onFocusCb={onFocusConfirmPassword}
+              onBlurCb={onBlurConfirmPassword}
+              onChange={() => onChangePassword('confirmPassword')}
+              hasErrors={errors.confirmPassword && passwordMatchErrorText}
+              inputRef={register({
+                required: true,
+                validate: (value: string) => value === getValues().newPassword,
+              })}
+              anchorPosition="end"
+              tooltipPosition="bottom"
+              prefixDataTestId="verify-password"
+              aria-describedby="repeat-password-information"
+            />
+          </FtlMsg>
+
+          <span
+            id="repeat-password-information"
+            aria-live="polite"
+            className="text-xs"
+          >
+            <span className="sr-only">{srOnlyConfirmPwdFeedbackMessage}</span>
+          </span>
+        </div>
+
+        {children}
+        <FtlMsg id={templateValues.buttonFtlId}>
+          <button
+            type="submit"
+            className="cta-primary cta-xl"
+            disabled={
+              loading || (disableButtonUntilValid && !formState.isValid)
+            }
+          >
+            {templateValues.buttonText}
+          </button>
+        </FtlMsg>
+      </form>
+    </>
+  );
+};
+
+export default FormPasswordWithInlineCriteria;
diff --git a/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/invalid.svg b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/invalid.svg
new file mode 100644
index 00000000000..d63bd229946
--- /dev/null
+++ b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/invalid.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.75 10C17.75 14.411 14.161 18 9.75 18C5.339 18 1.75 14.411 1.75 10C1.75 5.589 5.339 2 9.75 2C14.161 2 17.75 5.589 17.75 10ZM0.25 10C0.25 15.247 4.503 19.5 9.75 19.5C14.997 19.5 19.25 15.247 19.25 10C19.25 4.753 14.997 0.5 9.75 0.5C4.503 0.5 0.25 4.753 0.25 10ZM10.5 14.7L10.2 15H9.3L9 14.7V13.8L9.3 13.5H10.2L10.5 13.8V14.7ZM9.75 5C9.55109 5 9.36032 5.07902 9.21967 5.21967C9.07902 5.36032 9 5.55109 9 5.75V11.25C9 11.4489 9.07902 11.6397 9.21967 11.7803C9.36032 11.921 9.55109 12 9.75 12C9.94891 12 10.1397 11.921 10.2803 11.7803C10.421 11.6397 10.5 11.4489 10.5 11.25V5.75C10.5 5.55109 10.421 5.36032 10.2803 5.21967C10.1397 5.07902 9.94891 5 9.75 5Z" fill="#C50042"/></svg>
diff --git a/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/mocks.tsx b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/mocks.tsx
new file mode 100644
index 00000000000..6fb08391161
--- /dev/null
+++ b/packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/mocks.tsx
@@ -0,0 +1,51 @@
+/* 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 { useForm } from 'react-hook-form';
+import FormPasswordWithInlineCriteria, { PasswordFormType } from '.';
+import { MOCK_ACCOUNT } from '../../models/mocks';
+
+type SubjectProps = {
+  passwordFormType: PasswordFormType;
+};
+
+export const Subject = ({ passwordFormType }: SubjectProps) => {
+  type FormData = {
+    oldPassword?: string;
+    newPassword: string;
+    confirmPassword: string;
+  };
+  const onFormSubmit = () => {
+    // this alert is for Storybook
+    alert('Form submitted! (onFormSubmit called)');
+  };
+
+  const { handleSubmit, register, getValues, errors, formState, trigger } =
+    useForm<FormData>({
+      mode: 'onTouched',
+      criteriaMode: 'all',
+      defaultValues: {
+        newPassword: '',
+        confirmPassword: '',
+      },
+    });
+
+  return (
+    <FormPasswordWithInlineCriteria
+      {...{
+        formState,
+        errors,
+        trigger,
+        register,
+        getValues,
+        passwordFormType,
+      }}
+      onSubmit={handleSubmit(onFormSubmit)}
+      email={MOCK_ACCOUNT.primaryEmail.email}
+      loading={false}
+      onFocusMetricsEvent={() => {}}
+    />
+  );
+};
diff --git a/packages/fxa-settings/src/components/InputPassword/index.test.tsx b/packages/fxa-settings/src/components/InputPassword/index.test.tsx
index 8092c997ce5..74dc51dbc8f 100644
--- a/packages/fxa-settings/src/components/InputPassword/index.test.tsx
+++ b/packages/fxa-settings/src/components/InputPassword/index.test.tsx
@@ -36,6 +36,14 @@ it('can have a default value', () => {
 it('can be toggled', () => {
   renderWithLocalizationProvider(<InputPassword {...{ label }} />);
   expect(screen.getByTestId('input-field')).toHaveAttribute('type', 'password');
+  expect(screen.getByTestId('visibility-toggle')).toHaveAttribute(
+    'aria-pressed',
+    'false'
+  );
   fireEvent.click(screen.getByTestId('visibility-toggle'));
   expect(screen.getByTestId('input-field')).toHaveAttribute('type', 'text');
+  expect(screen.getByTestId('visibility-toggle')).toHaveAttribute(
+    'aria-pressed',
+    'true'
+  );
 });
diff --git a/packages/fxa-settings/src/components/InputPassword/index.tsx b/packages/fxa-settings/src/components/InputPassword/index.tsx
index 28e3115f443..aec18719a21 100644
--- a/packages/fxa-settings/src/components/InputPassword/index.tsx
+++ b/packages/fxa-settings/src/components/InputPassword/index.tsx
@@ -107,6 +107,7 @@ export const InputPassword = ({
                 'Your password is currently hidden.'
               )
         }
+        aria-pressed={visible ? 'true' : 'false'}
       >
         {visible ? (
           <ClosedEye
diff --git a/packages/fxa-settings/src/components/PasswordStrengthInline/en.ftl b/packages/fxa-settings/src/components/PasswordStrengthInline/en.ftl
new file mode 100644
index 00000000000..fd4770b40e1
--- /dev/null
+++ b/packages/fxa-settings/src/components/PasswordStrengthInline/en.ftl
@@ -0,0 +1,6 @@
+## PasswordStrengthBalloon component
+
+password-strength-inline-min-length = At least 8 characters
+password-strength-inline-not-email = Not your email address
+password-strength-inline-not-common = Not a commonly used password
+password-strength-inline-confirmed-must-match = Confirmation matches the new password
diff --git a/packages/fxa-settings/src/components/PasswordStrengthInline/icon-check.svg b/packages/fxa-settings/src/components/PasswordStrengthInline/icon-check.svg
new file mode 100644
index 00000000000..5d03ba20ac0
--- /dev/null
+++ b/packages/fxa-settings/src/components/PasswordStrengthInline/icon-check.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99992 12C3.73472 12 3.48041 11.8946 3.29292 11.707L0.292919 8.70701C0.110761 8.51841 0.00996641 8.26581 0.0122448 8.00361C0.0145233 7.74141 0.119692 7.4906 0.3051 7.30519C0.490508 7.11978 0.741321 7.01461 1.00352 7.01234C1.26571 7.01006 1.51832 7.11085 1.70692 7.29301L3.86392 9.45001L10.1799 0.42701C10.333 0.212456 10.5646 0.0670121 10.8243 0.0223066C11.0841 -0.0223988 11.351 0.037249 11.567 0.188279C11.783 0.33931 11.9306 0.569509 11.9778 0.828819C12.025 1.08813 11.9679 1.35558 11.8189 1.57301L4.81892 11.573C4.73561 11.6934 4.62687 11.7941 4.50039 11.8679C4.3739 11.9417 4.23275 11.9868 4.08692 12C4.05794 12.0015 4.0289 12.0015 3.99992 12Z" fill="#00A49A"/>
+</svg>
diff --git a/packages/fxa-settings/src/components/PasswordStrengthInline/icon-x.svg b/packages/fxa-settings/src/components/PasswordStrengthInline/icon-x.svg
new file mode 100644
index 00000000000..ac744d133e2
--- /dev/null
+++ b/packages/fxa-settings/src/components/PasswordStrengthInline/icon-x.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.10795 6.27594L11.8169 1.56694C11.9262 1.44811 11.9854 1.29167 11.982 1.13028C11.9787 0.968887 11.9131 0.815022 11.7991 0.700812C11.685 0.586602 11.5312 0.520876 11.3698 0.517359C11.2084 0.513842 11.0519 0.572805 10.9329 0.681936L6.24395 5.37094H5.75595L1.06695 0.682936C1.00884 0.624892 0.939864 0.578861 0.863965 0.547473C0.788066 0.516085 0.706728 0.499954 0.624594 0.5C0.542461 0.500047 0.461141 0.51627 0.385277 0.547744C0.309414 0.579218 0.240492 0.625326 0.182448 0.683436C0.124403 0.741546 0.0783731 0.81052 0.0469849 0.886419C0.0155967 0.962318 -0.000534611 1.04366 -0.000488181 1.12579C-0.000394413 1.29167 0.0655896 1.45071 0.182948 1.56794L4.86995 6.25394V6.74494L0.182948 11.4319C0.0736821 11.5508 0.014542 11.7072 0.0178768 11.8686C0.0212117 12.03 0.0867633 12.1839 0.200844 12.2981C0.314925 12.4123 0.468716 12.478 0.630104 12.4815C0.791491 12.485 0.947999 12.4261 1.06695 12.3169L5.75395 7.62994H6.24495L10.9319 12.3169C11.0495 12.434 11.2086 12.4997 11.3744 12.4997C11.5403 12.4997 11.6994 12.434 11.8169 12.3169C11.9343 12.1996 12.0001 12.0404 12.0001 11.8744C12.0001 11.7085 11.9343 11.5493 11.8169 11.4319L7.10795 6.72294V6.27594Z" fill="#C50042"/>
+</svg>
diff --git a/packages/fxa-settings/src/components/PasswordStrengthInline/index.stories.tsx b/packages/fxa-settings/src/components/PasswordStrengthInline/index.stories.tsx
new file mode 100644
index 00000000000..42e0496807c
--- /dev/null
+++ b/packages/fxa-settings/src/components/PasswordStrengthInline/index.stories.tsx
@@ -0,0 +1,152 @@
+/* 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 AppLayout from '../AppLayout';
+import { Meta } from '@storybook/react';
+import PasswordStrengthInline, { PasswordStrengthInlineProps } from '.';
+import InputPassword from '../InputPassword';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+
+export default {
+  title: 'Components/PasswordStrengthInline',
+  component: PasswordStrengthInline,
+  decorators: [withLocalization],
+} as Meta;
+
+const storyWithProps = (
+  props: PasswordStrengthInlineProps,
+  passwordExample: string,
+  confirmPasswordExample: string
+) => {
+  const story = () => (
+    <AppLayout>
+      <div className="relative">
+        <InputPassword
+          label="Password (example only, disabled for storybook)"
+          defaultValue={passwordExample}
+          className="text-start"
+          disabled
+        />
+        <br />
+        <InputPassword
+          label="Confirm Password (example only, disabled for storybook)"
+          defaultValue={confirmPasswordExample}
+          className="text-start"
+          disabled
+        />
+        <br />
+
+        <PasswordStrengthInline {...props} />
+      </div>
+    </AppLayout>
+  );
+  return story;
+};
+
+export const BeforePasswordInput = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: true,
+      isConfirmedPasswordEmpty: true,
+      isTooShort: false,
+      isSameAsEmail: false,
+      isCommon: false,
+      isUnconfirmed: true,
+    },
+  },
+  '',
+  ''
+);
+
+export const isTooShort = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: false,
+      isConfirmedPasswordEmpty: true,
+      isTooShort: true,
+      isSameAsEmail: false,
+      isCommon: false,
+      isUnconfirmed: true,
+    },
+  },
+  'fg5hs34',
+  ''
+);
+
+export const isSameAsEmail = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: false,
+      isConfirmedPasswordEmpty: true,
+      isTooShort: false,
+      isSameAsEmail: true,
+      isCommon: false,
+      isUnconfirmed: true,
+    },
+  },
+  'test@example.com',
+  ''
+);
+
+export const isCommon = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: false,
+      isConfirmedPasswordEmpty: true,
+      isTooShort: false,
+      isSameAsEmail: false,
+      isCommon: true,
+      isUnconfirmed: true,
+    },
+  },
+  '123456789',
+  ''
+);
+
+export const beforeConfirmedInput = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: false,
+      isConfirmedPasswordEmpty: true,
+      isTooShort: false,
+      isSameAsEmail: false,
+      isCommon: false,
+      isUnconfirmed: true,
+    },
+  },
+  '123456789',
+  ''
+);
+
+export const afterConfirmedInputDoesNotMatch = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: false,
+      isConfirmedPasswordEmpty: false,
+      isTooShort: false,
+      isSameAsEmail: false,
+      isCommon: false,
+      isUnconfirmed: true,
+    },
+  },
+  '123456789',
+  '12345678'
+);
+
+export const afterConfirmedInputMatches = storyWithProps(
+  {
+    ...{
+      isPasswordEmpty: false,
+      isConfirmedPasswordEmpty: false,
+      confirmPassword: '1324abcde',
+      isTooShort: false,
+      isSameAsEmail: false,
+      isCommon: false,
+      isUnconfirmed: false,
+    },
+  },
+  '123456789',
+  '123456789'
+);
diff --git a/packages/fxa-settings/src/components/PasswordStrengthInline/index.test.tsx b/packages/fxa-settings/src/components/PasswordStrengthInline/index.test.tsx
new file mode 100644
index 00000000000..6cb85f6695a
--- /dev/null
+++ b/packages/fxa-settings/src/components/PasswordStrengthInline/index.test.tsx
@@ -0,0 +1,147 @@
+/* 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 { screen, within } from '@testing-library/react';
+import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
+import PasswordStrengthInline from '.';
+// import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';
+// import { FluentBundle } from '@fluent/bundle';
+
+describe('PasswordStrengthInline component', () => {
+  // TODO: enable l10n tests when FXA-6461 is resolved (handle embedded tags)
+  // let bundle: FluentBundle;
+  // beforeAll(async () => {
+  //   bundle = await getFtlBundle('settings');
+  // });
+
+  it('renders password requirements as expected', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={true}
+        isConfirmedPasswordEmpty={true}
+        isTooShort={true}
+        isSameAsEmail={false}
+        isCommon={false}
+        isUnconfirmed={false}
+      />
+    );
+    // testAllL10n(screen, bundle);
+
+    screen.getByText('At least 8 characters');
+    screen.getByText('Not your email address');
+    screen.getByText('Not a commonly used password');
+    screen.getByText('Confirmation matches the new password');
+  });
+
+  it('displays checkmark icon when password requirements are respected', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={false}
+        isConfirmedPasswordEmpty={false}
+        isTooShort={false}
+        isSameAsEmail={false}
+        isCommon={false}
+        isUnconfirmed={false}
+      />
+    );
+
+    const checkmarks = screen.queryAllByText('icon-check.svg');
+    expect(checkmarks).toHaveLength(4);
+
+    const warnings = screen.queryAllByText('icon-x.svg');
+    expect(warnings).toHaveLength(0);
+  });
+
+  it('displays x icon when password is too short', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={false}
+        isConfirmedPasswordEmpty={false}
+        isTooShort={true}
+        isSameAsEmail={false}
+        isCommon={false}
+        isUnconfirmed={false}
+      />
+    );
+
+    const container = screen.getByTestId('password-min-char-req');
+    expect(container.getElementsByTagName('svg').item(0)).toHaveTextContent(
+      'icon-x.svg'
+    );
+  });
+
+  it('displays x icon when password is the same as email', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={false}
+        isConfirmedPasswordEmpty={false}
+        isTooShort={false}
+        isSameAsEmail={true}
+        isCommon={false}
+        isUnconfirmed={false}
+      />
+    );
+
+    const container = screen.getByTestId('password-not-email-req');
+    expect(container.getElementsByTagName('svg').item(0)).toHaveTextContent(
+      'icon-x.svg'
+    );
+  });
+
+  it('displays x icon when password is common', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={false}
+        isConfirmedPasswordEmpty={false}
+        isTooShort={false}
+        isSameAsEmail={false}
+        isCommon={true}
+        isUnconfirmed={false}
+      />
+    );
+
+    const container = screen.getByTestId('password-not-common-req');
+    expect(container.getElementsByTagName('svg').item(0)).toHaveTextContent(
+      'icon-x.svg'
+    );
+  });
+
+  it('displays dot icon when confirmed password is empty', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={false}
+        isConfirmedPasswordEmpty={false}
+        isTooShort={false}
+        isSameAsEmail={false}
+        isCommon={false}
+        isUnconfirmed={true}
+      />
+    );
+
+    const container = screen.getByTestId('passwords-match');
+    expect(container.getElementsByTagName('svg').item(0)).toHaveTextContent(
+      'icon-x.svg'
+    );
+  });
+
+  it('displays x icon when password do not match', () => {
+    renderWithLocalizationProvider(
+      <PasswordStrengthInline
+        isPasswordEmpty={false}
+        isConfirmedPasswordEmpty={false}
+        isTooShort={false}
+        isSameAsEmail={false}
+        isCommon={false}
+        isUnconfirmed={true}
+      />
+    );
+
+    const container = screen.getByTestId('passwords-match');
+    expect(container.getElementsByTagName('svg').item(0)).toHaveTextContent(
+      'icon-x.svg'
+    );
+  });
+
+});
diff --git a/packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx b/packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx
new file mode 100644
index 00000000000..8fc95607731
--- /dev/null
+++ b/packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx
@@ -0,0 +1,121 @@
+/* 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 { ReactComponent as PassedIcon } from './icon-check.svg';
+import { ReactComponent as Failed } from './icon-x.svg';
+import { FtlMsg } from 'fxa-react/lib/utils';
+
+export type PasswordStrengthInlineProps = {
+  isPasswordEmpty: boolean;
+  isConfirmedPasswordEmpty: boolean;
+  isTooShort: boolean;
+  isSameAsEmail: boolean;
+  isCommon: boolean;
+  isUnconfirmed: boolean | undefined;
+};
+
+const ValidationIcon = ({ hasError }: { hasError: boolean }) => {
+  return hasError ? (
+    <Failed role="img" className="inline-block" aria-label="failed" />
+  ) : (
+    <PassedIcon role="img" className="inline-block" aria-label="passed" />
+  );
+};
+
+export const PasswordStrengthInline = ({
+  isPasswordEmpty,
+  isConfirmedPasswordEmpty,
+  isTooShort,
+  isSameAsEmail,
+  isCommon,
+  isUnconfirmed,
+}: PasswordStrengthInlineProps) => {
+  return (
+    <div
+      className="leading-5 text-sm"
+      id="password-strength-inline"
+      aria-live="polite"
+    >
+      <p className="mb-2 text-left">
+        Pick a strong password you haven’t used on other sites. Ensure it meets
+        the security requirements:
+      </p>
+      <ul className="mt-2 mb-2">
+        <li data-testid="password-min-char-req" className="flex ">
+          <span className="w-7 h-7 text-center">
+            {isPasswordEmpty && '•'}
+            {!isPasswordEmpty && <ValidationIcon hasError={isTooShort} />}
+          </span>
+          <FtlMsg id="password-strength-inline-min-length">
+            <span
+              className={`ps-2 ${
+                !isPasswordEmpty && isTooShort ? 'text-red-700' : ''
+              }`}
+            >
+              At least 8 characters
+            </span>
+          </FtlMsg>
+        </li>
+        <li data-testid="password-not-email-req" className="flex ">
+          <span className="w-7 h-7 text-center">
+            {isPasswordEmpty && '•'}
+            {!isPasswordEmpty && (
+              <ValidationIcon hasError={!isTooShort && isSameAsEmail} />
+            )}
+          </span>
+          <FtlMsg id="password-strength-inline-not-email">
+            <span
+              className={`ps-2  ${
+                !isPasswordEmpty && !isTooShort && isSameAsEmail
+                  ? 'text-red-700'
+                  : ''
+              }`}
+            >
+              Not your email address
+            </span>
+          </FtlMsg>
+        </li>
+        <li data-testid="password-not-common-req" className="flex ">
+          <span className="w-7 h-7 text-center">
+            {isPasswordEmpty && '•'}
+            {!isPasswordEmpty && <ValidationIcon hasError={isCommon} />}
+          </span>
+          <FtlMsg id="password-strength-inline-not-common">
+            <span
+              className={`ps-2 ${
+                !isPasswordEmpty && isCommon ? 'text-red-700' : ''
+              }`}
+            >
+              Not a commonly used password
+            </span>
+          </FtlMsg>
+        </li>
+        {isUnconfirmed !== undefined && (
+          <li data-testid="passwords-match" className="flex ">
+            <span className="w-7 h-7 text-center">
+              {(isPasswordEmpty || isConfirmedPasswordEmpty) && '•'}
+              {!(isPasswordEmpty || isConfirmedPasswordEmpty) && (
+                <ValidationIcon hasError={isUnconfirmed} />
+              )}
+            </span>
+            <FtlMsg id="password-strength-inline-confirmed-must-match">
+              <span
+                className={`ps-2 ${
+                  !isPasswordEmpty && !isConfirmedPasswordEmpty && isUnconfirmed
+                    ? 'text-red-700'
+                    : ''
+                }`}
+              >
+                Confirmation matches the new password
+              </span>
+            </FtlMsg>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default PasswordStrengthInline;
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/container.tsx b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/container.tsx
index b91fe109b09..3b6efc9bcc0 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/container.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/container.tsx
@@ -55,6 +55,8 @@ const CompleteResetPasswordContainer = ({
     emailToHashWith,
     kB,
     recoveryKeyId,
+    recoveryKeyExists,
+    estimatedSyncDeviceCount,
   } = location.state as CompleteResetPasswordLocationState;
 
   const hasConfirmedRecoveryKey = !!(
@@ -181,6 +183,7 @@ const CompleteResetPasswordContainer = ({
   if (!(hasConfirmedRecoveryKey || isResetWithoutRecoveryKey)) {
     navigate('/reset_password', { replace: true });
   }
+
   return (
     <CompleteResetPassword
       {...{
@@ -188,6 +191,8 @@ const CompleteResetPasswordContainer = ({
         errorMessage,
         submitNewPassword,
         hasConfirmedRecoveryKey,
+        recoveryKeyExists,
+        estimatedSyncDeviceCount,
       }}
       locationState={location.state as CompleteResetPasswordLocationState}
     />
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/en.ftl b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/en.ftl
index ddded7e0f89..6bf25a63a2c 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/en.ftl
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/en.ftl
@@ -1,15 +1,19 @@
 ## CompleteResetPassword component
 ## User followed a password reset link and is now prompted to create a new password
 
-complete-reset-pw-header = Create new password
-complete-reset-password-warning-message-2 = <span>Remember:</span> When you reset your password, you reset your account. You may lose some of your personal information (including history, bookmarks, and passwords). That’s because we encrypt your data with your password to protect your privacy. You’ll still keep any subscriptions you may have and { -product-pocket } data will not be affected.
+complete-reset-pw-header-v2 = Create a new password
 # A new password was successfully set for the user's account
 # Displayed in an alert bar
 complete-reset-password-success-alert = Password set
 # An error occurred while attempting to set a new password (password reset flow)
 # Displayed in an alert bar
 complete-reset-password-error-alert = Sorry, there was a problem setting your password
-complete-reset-password-recovery-key-error-v2 = Sorry, there was a problem checking if you have an account recovery key.
-complete-reset-password-recovery-key-link = Reset your password with your account recovery key.
 
-account-restored-success-message = You have successfully restored your account using your account recovery key. Create a new password to secure your data, and store it in a safe location.
+password-reset-data-may-not-be-recovered = Resetting your password may delete your encrypted browser data.
+password-reset-could-not-determine-account-recovery-key = Have an account recovery key?
+password-reset-use-account-recovery-key = Reset your password with your recovery key.
+password-reset-previously-signed-in-device = Have a device where you previously signed in?
+password-reset-data-may-be-saved-locally = Your browser data may be locally saved on that device. Sign in there with your new password to restore and sync.
+password-reset-no-old-device = Have a new device but don’t have your old one?
+password-reset-encrypted-data-cannot-be-recovered = We’re sorry, but your encrypted browser data on Firefox servers can’t be recovered.
+password-reset-learn-about-restoring-account-data = Learn more about restoring account data.
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-bang.svg b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-bang.svg
new file mode 100644
index 00000000000..6edc4b55fbe
--- /dev/null
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-bang.svg
@@ -0,0 +1,7 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="line">
+<path id="Oval" fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" stroke="#E22850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Path" d="M11 7V12" stroke="#E22850" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Oval_2" fill-rule="evenodd" clip-rule="evenodd" d="M11 14C10.4477 14 10 14.4477 10 15C10 15.5523 10.4477 16 11 16C11.5523 16 12 15.5523 12 15C12 14.4477 11.5523 14 11 14Z" fill="#E22850"/>
+</g>
+</svg>
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-non-sync-device.svg b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-non-sync-device.svg
new file mode 100644
index 00000000000..872db1bcb09
--- /dev/null
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-non-sync-device.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="16 - Non-Sync / device / non-synce device-16">
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M2.1406 3.26192C2.04987 3.49028 2 3.73932 2 4V10C2 11.1046 2.89543 12 4 12H7.25V13.25H4.5C4.08579 13.25 3.75 13.5858 3.75 14C3.75 14.4142 4.08579 14.75 4.5 14.75H8H11.5C11.9142 14.75 12.25 14.4142 12.25 14C12.25 13.5858 11.9142 13.25 11.5 13.25H8.75V12H10.8787L9.37868 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4.62132L2.1406 3.26192ZM12.5 9.37868V4C12.5 3.72386 12.2761 3.5 12 3.5H6.62132L5.12132 2H12C13.1046 2 14 2.89543 14 4V10C14 10.2607 13.9501 10.5097 13.8594 10.7381L12.5 9.37868Z" fill="#15141A"/>
+<path id="Vector 470" d="M3 2L13 12" stroke="#15141A" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-sync-device.svg b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-sync-device.svg
new file mode 100644
index 00000000000..dd766800c52
--- /dev/null
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-sync-device.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id=" 16 - Sync / device / synce device-16">
+<path id="Vector 474" d="M5.5 6.5L7.5 8.5L11 5" stroke="#15141A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M4 3.5H12C12.2761 3.5 12.5 3.72386 12.5 4V10C12.5 10.2761 12.2761 10.5 12 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4C3.5 3.72386 3.72386 3.5 4 3.5ZM2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V10C14 11.1046 13.1046 12 12 12H8.75V13.25H11.5C11.9142 13.25 12.25 13.5858 12.25 14C12.25 14.4142 11.9142 14.75 11.5 14.75H8H4.5C4.08579 14.75 3.75 14.4142 3.75 14C3.75 13.5858 4.08579 13.25 4.5 13.25H7.25V12H4C2.89543 12 2 11.1046 2 10V4Z" fill="#15141A"/>
+</g>
+</svg>
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-warn.svg b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-warn.svg
new file mode 100644
index 00000000000..8cbd1b4b347
--- /dev/null
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/icon-warn.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="16 - Default / alerts, notifications, help / warning-fill-16">
+<path id="Shape" d="M14.8751 12.037L9.37807 2.037C8.99707 1.346 8.31107 1 7.62507 1C6.93907 1 6.25307 1.346 5.87307 2.037L0.376067 12.037C-0.357933 13.37 0.607067 15 2.12807 15H13.1231C14.6431 15 15.6081 13.37 14.8751 12.037ZM8.25007 11.75L8.00007 12H7.25007L7.00007 11.75V11L7.25007 10.75H8.00007L8.25007 11V11.75ZM8.25007 9.062C8.25007 9.22776 8.18422 9.38673 8.06701 9.50394C7.9498 9.62115 7.79083 9.687 7.62507 9.687C7.45931 9.687 7.30034 9.62115 7.18313 9.50394C7.06592 9.38673 7.00007 9.22776 7.00007 9.062V5.625C7.00007 5.45924 7.06592 5.30027 7.18313 5.18306C7.30034 5.06585 7.45931 5 7.62507 5C7.79083 5 7.9498 5.06585 8.06701 5.18306C8.18422 5.30027 8.25007 5.45924 8.25007 5.625V9.062Z" fill="#FFA436"/>
+</g>
+</svg>
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.stories.tsx b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.stories.tsx
index 241d285e477..c4637692b31 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.stories.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.stories.tsx
@@ -14,10 +14,35 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
-export const DefaultNoRecoveryKey = () => <Subject recoveryKeyExists={false} />;
 
-export const WithConfirmedRecoveryKey = () => (
-  <Subject recoveryKeyExists={true} hasConfirmedRecoveryKey />
+export const NoSync = () => (
+  <Subject recoveryKeyExists={true} estimatedSyncDeviceCount={0} />
 );
 
-export const UnknownRecoveryKeyStatus = () => <Subject />;
+export const SyncAndNoRecoveryKey = () => (
+  <Subject recoveryKeyExists={false} estimatedSyncDeviceCount={2} />
+);
+
+export const SyncAndUnconfirmedRecoveryKey = () => (
+  <Subject
+    estimatedSyncDeviceCount={2}
+    recoveryKeyExists={true}
+    hasConfirmedRecoveryKey={false}
+  />
+);
+
+export const SyncAndConfirmedRecoveryKey = () => (
+  <Subject
+    estimatedSyncDeviceCount={2}
+    recoveryKeyExists={true}
+    hasConfirmedRecoveryKey={true}
+  />
+);
+
+export const SyncAndUnableToDetermineRecoveryKey = () => (
+  <Subject
+    estimatedSyncDeviceCount={undefined}
+    recoveryKeyExists={undefined}
+    hasConfirmedRecoveryKey={false}
+  />
+);
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx
index 1802bb13349..04ebe667f6f 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx
@@ -33,27 +33,26 @@ describe('CompleteResetPassword page', () => {
   });
 
   describe('default reset without recovery key', () => {
-    it('renders as expected', async () => {
-      renderWithLocalizationProvider(<Subject />);
+    it('renders as expected for account with sync', async () => {
+      renderWithLocalizationProvider(
+        <Subject recoveryKeyExists={false} estimatedSyncDeviceCount={2} />
+      );
 
       await waitFor(() =>
         expect(
           screen.getByRole('heading', {
-            name: 'Create new password',
+            name: 'Create a new password',
           })
         ).toBeVisible()
       );
+
+      // Warning message about data loss should should be displayed
       expect(
         screen.getByText(
-          'When you reset your password, you reset your account. You may lose some of your personal information (including history, bookmarks, and passwords). That’s because we encrypt your data with your password to protect your privacy. You’ll still keep any subscriptions you may have and Pocket data will not be affected.'
+          'Resetting your password may delete your encrypted browser data.'
         )
       ).toBeVisible();
-      // no recovery key specific messaging
-      expect(
-        screen.queryByText(
-          'You have successfully restored your account using your account recovery key. Create a new password to secure your data, and store it in a safe location.'
-        )
-      ).not.toBeInTheDocument();
+
       const inputs = screen.getAllByRole('textbox');
       expect(inputs).toHaveLength(2);
       expect(screen.getByLabelText('New password')).toBeVisible();
@@ -70,8 +69,36 @@ describe('CompleteResetPassword page', () => {
       );
     });
 
+    it('renders as expected for account without sync', async () => {
+      renderWithLocalizationProvider(
+        <Subject recoveryKeyExists={false} estimatedSyncDeviceCount={0} />
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole('heading', {
+            name: 'Create a new password',
+          })
+        ).toBeVisible()
+      );
+
+      // Warning messages about data loss should not be displayed.
+      expect(
+        screen.queryByText(
+          'Resetting your password may delete your encrypted browser data.'
+        )
+      ).not.toBeInTheDocument();
+
+      // Warning message about using recovery ke should not be displayed
+      expect(
+        screen.queryByText('Reset your password with your recovery key.')
+      ).not.toBeInTheDocument();
+    });
+
     it('sends the expected metrics on render', () => {
-      renderWithLocalizationProvider(<Subject />);
+      renderWithLocalizationProvider(
+        <Subject recoveryKeyExists={false} estimatedSyncDeviceCount={2} />
+      );
       expect(GleanMetrics.passwordReset.createNewView).toHaveBeenCalledTimes(1);
     });
   });
@@ -83,22 +110,23 @@ describe('CompleteResetPassword page', () => {
       await waitFor(() =>
         expect(
           screen.getByRole('heading', {
-            name: 'Create new password',
+            name: 'Create a new password',
           })
         ).toBeVisible()
       );
-      // recovery key specific messaging
-      expect(
-        screen.getByText(
-          'You have successfully restored your account using your account recovery key. Create a new password to secure your data, and store it in a safe location.'
-        )
-      ).toBeVisible();
-      // no warning
+
+      // Warning messages about data loss should not be displayed.
       expect(
         screen.queryByText(
-          'When you reset your password, you reset your account. You may lose some of your personal information (including history, bookmarks, and passwords). That’s because we encrypt your data with your password to protect your privacy. You’ll still keep any subscriptions you may have and Pocket data will not be affected.'
+          'Resetting your password may delete your encrypted browser data.'
         )
       ).not.toBeInTheDocument();
+
+      // Warning message about using recovery key should not be displayed
+      expect(
+        screen.queryByText('Reset your password with your recovery key.')
+      ).not.toBeInTheDocument();
+
       const inputs = screen.getAllByRole('textbox');
       expect(inputs).toHaveLength(2);
       expect(screen.getByLabelText('New password')).toBeVisible();
@@ -123,6 +151,70 @@ describe('CompleteResetPassword page', () => {
     });
   });
 
+  describe('reset with unconfimred account recovery key', () => {
+    it('renders as expected', async () => {
+      renderWithLocalizationProvider(
+        <Subject
+          hasConfirmedRecoveryKey={false}
+          recoveryKeyExists={true}
+          estimatedSyncDeviceCount={2}
+        />
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole('heading', {
+            name: 'Create a new password',
+          })
+        ).toBeVisible()
+      );
+
+      // Warning messages about data loss should not be displayed.
+      expect(
+        screen.queryByText(
+          'Resetting your password may delete your encrypted browser data.'
+        )
+      ).toBeInTheDocument();
+
+      // Warning message about using recovery key should be displayed
+      expect(
+        screen.queryByText('Reset your password with your recovery key.')
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('reset with issue determining if recovery key exists', () => {
+    it('renders as expected', async () => {
+      renderWithLocalizationProvider(
+        <Subject
+          hasConfirmedRecoveryKey={false}
+          recoveryKeyExists={undefined}
+          estimatedSyncDeviceCount={2}
+        />
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole('heading', {
+            name: 'Create a new password',
+          })
+        ).toBeVisible()
+      );
+
+      // Warning messages about data loss should not be displayed.
+      expect(
+        screen.queryByText(
+          'Resetting your password may delete your encrypted browser data.'
+        )
+      ).not.toBeInTheDocument();
+
+      // Warning message about using recovery key should be displayed
+      expect(
+        screen.getByText('Reset your password with your recovery key.')
+      ).toBeVisible();
+    });
+  });
+
   it('handles submit with valid password', async () => {
     const user = userEvent.setup();
     renderWithLocalizationProvider(
@@ -151,7 +243,7 @@ describe('CompleteResetPassword page', () => {
     await waitFor(() =>
       expect(
         screen.getByRole('heading', {
-          name: 'Create new password',
+          name: 'Create a new password',
         })
       ).toBeVisible()
     );
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx
index 9cd16f2226d..0bd00a9641c 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx
@@ -8,10 +8,12 @@ import GleanMetrics from '../../../lib/glean';
 
 import AppLayout from '../../../components/AppLayout';
 import Banner, { BannerType } from '../../../components/Banner';
-import CardHeader from '../../../components/CardHeader';
-import FormPasswordWithBalloons from '../../../components/FormPasswordWithBalloons';
+import FormPasswordWithInlineCriteria from '../../../components/FormPasswordWithInlineCriteria';
 import LinkRememberPassword from '../../../components/LinkRememberPassword';
-import WarningMessage from '../../../components/WarningMessage';
+import { ReactComponent as BangIcon } from './icon-bang.svg';
+import { ReactComponent as WarnIcon } from './icon-warn.svg';
+import { ReactComponent as IconNonSyncDevice } from './icon-non-sync-device.svg';
+import { ReactComponent as IconSyncDevice } from './icon-sync-device.svg';
 
 import {
   CompleteResetPasswordFormData,
@@ -26,6 +28,8 @@ const CompleteResetPassword = ({
   hasConfirmedRecoveryKey,
   locationState,
   submitNewPassword,
+  estimatedSyncDeviceCount,
+  recoveryKeyExists,
 }: CompleteResetPasswordProps) => {
   const location = useLocation();
 
@@ -36,6 +40,8 @@ const CompleteResetPassword = ({
   }, [hasConfirmedRecoveryKey]);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const hasSyncDevices =
+    estimatedSyncDeviceCount !== undefined && estimatedSyncDeviceCount > 0;
 
   const { handleSubmit, register, getValues, errors, formState, trigger } =
     useForm<CompleteResetPasswordFormData>({
@@ -55,67 +61,117 @@ const CompleteResetPassword = ({
 
   return (
     <AppLayout>
-      <CardHeader
-        headingText="Create new password"
-        headingTextFtlId="complete-reset-pw-header"
-      />
-
-      {!hasConfirmedRecoveryKey &&
-        locationState.recoveryKeyExists === undefined && (
-          <Banner type={BannerType.error}>
-            <>
-              <FtlMsg id="complete-reset-password-recovery-key-error-v2">
-                <p>
-                  Sorry, there was a problem checking if you have an account
-                  recovery key.
-                </p>
-              </FtlMsg>
-              <FtlMsg id="complete-reset-password-recovery-key-link">
-                <Link
-                  to={`/account_recovery_confirm_key${location.search}`}
-                  state={locationState}
-                  className="link-white underline-offset-4"
-                  onClick={() =>
-                    GleanMetrics.passwordReset.createNewRecoveryKeyMessageClick()
-                  }
-                >
-                  Reset your password with your account recovery key.
-                </Link>
-              </FtlMsg>
-            </>
-          </Banner>
-        )}
+      <p className="text-start text-grey-400 text-sm">
+        <FtlMsg id="password-reset-flow-heading">Reset your password</FtlMsg>
+      </p>
 
+      {/*
+        In the event of serious error. A bright red banner will be displayed indicating
+        the problem.
+      */}
       {errorMessage && <Banner type={BannerType.error}>{errorMessage}</Banner>}
 
-      {hasConfirmedRecoveryKey ? (
-        <FtlMsg id="account-restored-success-message">
-          <p className="text-sm mb-4">
-            You have successfully restored your account using your account
-            recovery key. Create a new password to secure your data, and store
-            it in a safe location.
-          </p>
-        </FtlMsg>
-      ) : (
-        <WarningMessage
-          warningMessageFtlId="complete-reset-password-warning-message-2"
-          warningType="Remember:"
+      {/*
+        Inline message to help the user understand the status and ramifications
+        of their password reset. ie Will their data persist, or is an way to
+        recover it.
+      */}
+      {hasConfirmedRecoveryKey === false && recoveryKeyExists === undefined && (
+        <div
+          className={`bg-red-100 rounded-lg text-sm mt-6 text-left rtl:text-right p-3`}
+          data-testid="warning-message-container"
         >
-          When you reset your password, you reset your account. You may lose
-          some of your personal information (including history, bookmarks, and
-          passwords). That’s because we encrypt your data with your password to
-          protect your privacy. You’ll still keep any subscriptions you may have
-          and Pocket data will not be affected.
-        </WarningMessage>
+          <div className="flex">
+            <BangIcon role="img" className="flex-initial me-2 mt-1" />
+            <div className="flex-1 text-xs">
+              <FtlMsg id="password-reset-could-not-determine-account-recovery-key">
+                Have an account recovery key?
+              </FtlMsg>{' '}
+              <br />
+              <Link
+                to={`/account_recovery_confirm_key${location.search}`}
+                state={locationState}
+                className="link-blue"
+                onClick={() =>
+                  GleanMetrics.passwordReset.createNewRecoveryKeyMessageClick()
+                }
+              >
+                <FtlMsg id="password-reset-use-account-recovery-key">
+                  Reset your password with your recovery key.
+                </FtlMsg>
+              </Link>{' '}
+            </div>
+          </div>
+        </div>
       )}
 
-      {/* Hidden email field is to allow Fx password manager
-          to correctly save the updated password. Without it,
-          the password manager tries to save the old password
-          as the username. */}
+      {hasConfirmedRecoveryKey === false &&
+        recoveryKeyExists !== undefined &&
+        hasSyncDevices && (
+          <div
+            className={`bg-orange-50 rounded-lg text-sm mt-6 text-left rtl:text-right p-4 border-transparent`}
+            data-testid="warning-message-container"
+          >
+            <div className="flex font-semibold">
+              <WarnIcon role="img" className="flex-initial me-2 mt-1" />
+              <h1 className="flex-1">
+                <FtlMsg id="password-reset-data-may-not-be-recovered">
+                  Resetting your password may delete your encrypted browser
+                  data.
+                </FtlMsg>
+              </h1>
+            </div>
+            <div className="ps-4">
+              <p className="font-semibold pt-4">
+                <IconSyncDevice role="img" className="inline-block mr-2" />
+                <FtlMsg id="password-reset-previously-signed-in-device">
+                  Have a device where you previously signed in?
+                </FtlMsg>
+              </p>
+              <p className="ps-6 text-xs">
+                <FtlMsg id="password-reset-data-maybe-saved-locally">
+                  Your browser data may be locally saved on that device. Sign in
+                  there with your new password to restore and sync.
+                </FtlMsg>
+              </p>
+              <p className="font-semibold pt-4">
+                <IconNonSyncDevice role="img" className="inline-block mr-2" />
+                <FtlMsg id="password-reset-no-old-device">
+                  Have a new device but don’t have your old one?
+                </FtlMsg>
+              </p>
+              <p className="ps-6 text-xs">
+                <FtlMsg id="password-reset-encrypted-data-cannot-be-recovered">
+                  We’re sorry, but your encrypted browser data on Firefox
+                  servers can’t be recovered.
+                </FtlMsg>
+              </p>
+              <p className="ps-6 text-xs mt-4">
+                <a
+                  href="https://support.mozilla.org/en-US/kb/how-reset-your-password-without-account-recovery-keys-access-data"
+                  className="link-blue"
+                >
+                  <FtlMsg id="password-reset-learn-about-restoring-account-data">
+                    Learn more about restoring account data.
+                  </FtlMsg>
+                </a>
+              </p>
+            </div>
+          </div>
+        )}
+      {/*
+        Hidden email field is to allow Fx password manager
+        to correctly save the updated password. Without it,
+        the password manager tries to save the old password
+        as the username.
+      */}
       <input type="email" value={email} className="hidden" readOnly />
-      <section className="text-start mt-4">
-        <FormPasswordWithBalloons
+
+      <h1 className="font-semibold text-xl text-start mt-6">
+        <FtlMsg id="complete-reset-pw-header-v2">Create a new password</FtlMsg>
+      </h1>
+      <section className="text-start mt-2">
+        <FormPasswordWithInlineCriteria
           {...{
             email,
             errors,
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/interfaces.ts b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/interfaces.ts
index e7363898e98..d1e499c17fd 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/interfaces.ts
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/interfaces.ts
@@ -41,6 +41,8 @@ export interface CompleteResetPasswordProps {
   locationState: CompleteResetPasswordLocationState;
   submitNewPassword: (newPassword: string) => Promise<void>;
   hasConfirmedRecoveryKey?: boolean;
+  estimatedSyncDeviceCount?: number | undefined;
+  recoveryKeyExists?: boolean | undefined;
 }
 
 export type AccountResetData = {
diff --git a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/mocks.tsx b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/mocks.tsx
index 00769cf1824..a6575696e93 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/mocks.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/mocks.tsx
@@ -16,10 +16,10 @@ const mockSubmitNewPassword = (newPassword: string) => Promise.resolve();
 export const Subject = ({
   submitNewPassword = mockSubmitNewPassword,
   hasConfirmedRecoveryKey = false,
-  recoveryKeyExists = undefined,
+  recoveryKeyExists,
   testErrorMessage = '',
+  estimatedSyncDeviceCount,
 }: Partial<CompleteResetPasswordProps> & {
-  recoveryKeyExists?: boolean | undefined;
   testErrorMessage?: string;
 }) => {
   const email = MOCK_EMAIL;
@@ -42,6 +42,8 @@ export const Subject = ({
           setErrorMessage,
           submitNewPassword,
           hasConfirmedRecoveryKey,
+          recoveryKeyExists,
+          estimatedSyncDeviceCount,
         }}
       />
     </LocationProvider>