diff --git a/packages/web/src/components/change-password/ChangePassword.tsx b/packages/web/src/components/change-password/ChangePassword.tsx
index 36e06a620ea..a8ebea3996f 100644
--- a/packages/web/src/components/change-password/ChangePassword.tsx
+++ b/packages/web/src/components/change-password/ChangePassword.tsx
@@ -91,8 +91,7 @@ export const ChangePassword = ({
         return (
           <EnterPassword
             continueLabel={messages.changePassword}
-            continueIcon={<IconLock />}
-            isMobile={true}
+            continueIcon={IconLock}
             onSubmit={onNewPasswordSubmitted}
           />
         )
diff --git a/packages/web/src/components/password-reset/PasswordResetModal.module.css b/packages/web/src/components/password-reset/PasswordResetModal.module.css
index b3be4d4215b..e5c8d35413e 100644
--- a/packages/web/src/components/password-reset/PasswordResetModal.module.css
+++ b/packages/web/src/components/password-reset/PasswordResetModal.module.css
@@ -7,10 +7,6 @@
   width: 100%;
 }
 
-.content {
-  padding: 16px;
-}
-
 .modalTitle {
   color: var(--neutral-light-4);
   font-size: var(--font-l);
@@ -18,10 +14,3 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-
-.helpText {
-  font-size: var(--font-m);
-  line-height: 20px;
-  margin: 0 auto 20px;
-  text-align: center;
-}
diff --git a/packages/web/src/components/password-reset/PasswordResetModal.tsx b/packages/web/src/components/password-reset/PasswordResetModal.tsx
index e2af279ee21..be495a4ed00 100644
--- a/packages/web/src/components/password-reset/PasswordResetModal.tsx
+++ b/packages/web/src/components/password-reset/PasswordResetModal.tsx
@@ -1,17 +1,16 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Status, accountSelectors } from '@audius/common'
+import { Flex, Text } from '@audius/harmony'
 import { Modal } from '@audius/stems'
-import { connect } from 'react-redux'
-import { Dispatch } from 'redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import EnterPassword from 'components/sign-on/EnterPassword'
-import { AppState } from 'store/types'
-import { isMobile } from 'utils/clientUtil'
 
 import styles from './PasswordResetModal.module.css'
 import { changePassword } from './store/actions'
 import { getStatus } from './store/selectors'
+
 const { getNeedsAccountRecovery } = accountSelectors
 
 const RESET_REQUIRED_KEY = 'password-reset-required'
@@ -23,17 +22,17 @@ const messages = {
     'Create a password that is secure and easy to remember. Write it down or use a password manager.'
 }
 
-type PasswordResetModalProps = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>
-
-const PasswordResetModal = ({
-  isMobile,
-  needsAccountRecovery,
-  status,
-  onChangePassword
-}: PasswordResetModalProps) => {
+export const PasswordResetModal = () => {
+  const dispatch = useDispatch()
+  const needsAccountRecovery = useSelector(getNeedsAccountRecovery)
   const [showModal, setShowModal] = useState(needsAccountRecovery)
   const [isLoading, setIsLoading] = useState(false)
+  const status = useSelector(getStatus)
+
+  const onChangePassword = (email: string, password: string) => {
+    dispatch(changePassword(email, password))
+  }
+
   // When the component mounts, show the modal if the reset key exists
   useEffect(() => {
     const resetRequiredEmail = window.localStorage.getItem(RESET_REQUIRED_KEY)
@@ -87,32 +86,16 @@ const PasswordResetModal = ({
       headerContainerClassName={styles.modalHeader}
       titleClassName={styles.modalTitle}
     >
-      <div className={styles.content}>
-        <div className={styles.helpText}>{messages.helpText}</div>
+      <Flex direction='column' gap='xl' p='l'>
+        <Text variant='body' strength='weak' css={{ textAlign: 'center' }}>
+          {messages.helpText}
+        </Text>
         <EnterPassword
           continueLabel={messages.continueLabel}
           onSubmit={onSubmit}
-          isMobile={isMobile}
           isLoading={isLoading}
         />
-      </div>
+      </Flex>
     </Modal>
   )
 }
-
-function mapStateToProps(state: AppState) {
-  return {
-    needsAccountRecovery: getNeedsAccountRecovery(state),
-    isMobile: isMobile(),
-    status: getStatus(state)
-  }
-}
-
-function mapDispatchToProps(dispatch: Dispatch) {
-  return {
-    onChangePassword: (email: string, password: string) =>
-      dispatch(changePassword(email, password))
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(PasswordResetModal)
diff --git a/packages/web/src/components/sign-on/EnterPassword.module.css b/packages/web/src/components/sign-on/EnterPassword.module.css
deleted file mode 100644
index 993606553d3..00000000000
--- a/packages/web/src/components/sign-on/EnterPassword.module.css
+++ /dev/null
@@ -1,137 +0,0 @@
-.container {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-
-/* Password Input */
-.passwordContainer {
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 162px;
-  margin-bottom: 16px;
-}
-
-.passwordInput {
-  text-align: center;
-  height: 66px;
-  width: 354px;
-}
-
-.passwordInput > input {
-  height: 100% !important;
-  width: 100% !important;
-  font-size: 20px !important;
-  color: var(--neutral);
-  border: 1px solid var(--neutral-light-8);
-  border-radius: 4px;
-}
-
-.passwordInput :global(.placeholder) {
-  top: 37% !important;
-  left: 19px !important;
-  font-weight: var(--font-demi-bold) !important;
-}
-
-.passwordInput :global(.placeholder.focus) {
-  font-weight: var(--font-demi-bold) !important;
-  transform: translate(0px, -12px) !important;
-}
-
-.passwordInput.placeholder > input {
-  color: var(--neutral-light-4);
-}
-
-.inputError > input {
-  margin-bottom: 13px;
-}
-
-/* Password Requirement Icons */
-.pwdCheckContainer {
-  width: 354px;
-  margin-bottom: 24px;
-}
-
-.statusContainer {
-  margin: 8px 0px;
-}
-
-/* Continue Button */
-.continueButton .continueButtonText {
-  font-weight: var(--font-bold);
-  font-size: var(--font-l);
-}
-
-/* Mobile Password Input */
-.isMobile .passwordContainer {
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: auto;
-  margin-bottom: 0;
-}
-
-.isMobile .form {
-  width: 100%;
-}
-
-.isMobile .passwordInput {
-  text-align: center;
-  height: 48px;
-  width: 100% !important;
-  max-width: 354px !important;
-  margin-bottom: 16px;
-}
-
-.isMobile .passwordInput > input {
-  height: 100% !important;
-  width: 100% !important;
-  font-size: 16px !important;
-  color: var(--neutral);
-  border: 1px solid var(--neutral-light-8);
-  border-radius: 4px;
-}
-
-.isMobile input::-webkit-input-placeholder {
-  line-height: normal !important;
-}
-
-.isMobile .passwordInput.placeholder > input {
-  color: var(--neutral-light-4);
-}
-
-.isMobile .termsAndPrivacy {
-  margin: 0px 0px 16px;
-  font-size: var(--font-xs);
-  max-width: 355px;
-}
-
-/* Mobile Password Requirement Icons */
-.isMobile .pwdCheckContainer {
-  width: 100% !important;
-  max-width: 354px !important;
-  margin-bottom: 16px;
-}
-
-.isMobile .continueButton {
-  width: 100%;
-}
-
-.spinner {
-  display: block;
-  height: 18px;
-  width: 18px;
-  margin: 3px;
-}
-
-.spinner g path {
-  stroke: var(--white) !important;
-}
diff --git a/packages/web/src/components/sign-on/EnterPassword.tsx b/packages/web/src/components/sign-on/EnterPassword.tsx
index 971c29303fa..47738faca69 100644
--- a/packages/web/src/components/sign-on/EnterPassword.tsx
+++ b/packages/web/src/components/sign-on/EnterPassword.tsx
@@ -1,278 +1,86 @@
-import { useCallback, useState } from 'react'
+import {
+  Button,
+  ButtonType,
+  Flex,
+  IconArrowRight,
+  IconComponent,
+  useTheme
+} from '@audius/harmony'
+import { Form, Formik } from 'formik'
+import { toFormikValidationSchema } from 'zod-formik-adapter'
 
-import { Button, ButtonType, IconArrow } from '@audius/stems'
-import cn from 'classnames'
-
-import Input from 'components/data-entry/Input'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
-import { StatusMessage } from 'components/status-message/StatusMessage'
-import { commonPasswordCheck } from 'utils/commonPasswordCheck'
-
-import styles from './EnterPassword.module.css'
+import { EnterPasswordSection } from 'pages/sign-up-page/components/EnterPasswordSection'
+import { passwordSchema } from 'pages/sign-up-page/utils/passwordSchema'
 
-const MIN_PASSWORD_LEN = 8
-
-const messages = {
-  checks: [
-    'Must contain numbers',
-    'Length must be at least 8 characters',
-    'Passwords match',
-    'Hard to guess'
-  ],
-  commonPwd: 'Please choose a less common password'
+const initialValues = {
+  password: '',
+  confirmPassword: ''
 }
 
-enum CheckState {
-  ERROR = 'error',
-  DEFAULT = 'default',
-  VALID = 'success'
-}
-
-const getNumberRequirement = (password: string) => {
-  if (password.length === 0) return CheckState.DEFAULT
-  if (!/\d/.test(password)) return CheckState.ERROR
-  return CheckState.VALID
-}
-
-const getLenRequirement = (password: string) => {
-  if (password.length === 0) return CheckState.DEFAULT
-  if (password.length < MIN_PASSWORD_LEN) return CheckState.ERROR
-  return CheckState.VALID
-}
-
-const getMatchRequirement = (
-  password: string,
-  passwordConfirmation: string
-) => {
-  if (password.length === 0) return CheckState.DEFAULT
-  if (password !== passwordConfirmation) return CheckState.ERROR
-  return CheckState.VALID
-}
-
-const getCommonPasswordCheck = async (password: string) => {
-  if (password.length < MIN_PASSWORD_LEN) return CheckState.DEFAULT
-  if (await commonPasswordCheck(password)) return CheckState.ERROR
-  return CheckState.VALID
-}
+const passwordFormikSchma = toFormikValidationSchema(passwordSchema)
 
 type EnterPasswordProps = {
   continueLabel: string
-  continueIcon?: JSX.Element
-  isMobile: boolean
+  continueIcon?: IconComponent
   onSubmit: (password: string) => void
   isLoading?: boolean
 }
 
-type Requirements = {
-  number: CheckState
-  length: CheckState
-  match: CheckState
-  common: CheckState
-  [key: string]: CheckState
-}
-
 const EnterPassword = ({
   continueLabel,
   continueIcon,
-  isMobile,
-  onSubmit,
-  isLoading
+  isLoading,
+  onSubmit
 }: EnterPasswordProps) => {
-  const [password, setPassword] = useState('')
-  const [passwordConfirmation, setPasswordConfirmation] = useState('')
-  const [requirements, setRequirements] = useState<Requirements>({
-    number: CheckState.DEFAULT,
-    length: CheckState.DEFAULT,
-    match: CheckState.DEFAULT,
-    common: CheckState.DEFAULT
-  })
-
-  const onPasswordBlur = useCallback(async () => {
-    const commonCheck = await getCommonPasswordCheck(password)
-
-    // When the password blurs, check if the number and length req are met
-    if (password) {
-      setRequirements((requirements) => ({
-        ...requirements,
-        number: getNumberRequirement(password),
-        length: getLenRequirement(password),
-        common: commonCheck,
-        match:
-          passwordConfirmation === ''
-            ? CheckState.DEFAULT
-            : getMatchRequirement(password, passwordConfirmation)
-      }))
-    }
-  }, [password, passwordConfirmation])
-
-  const onPasswordConfirmationBlur = useCallback(() => {
-    // When the password blurs, check if the number and length req are met
-    if (password && passwordConfirmation) {
-      setRequirements((requirements) => ({
-        ...requirements,
-        match: getMatchRequirement(password, passwordConfirmation)
-      }))
-    }
-  }, [password, passwordConfirmation])
-
-  const onPasswordChange = (password: string) => {
-    setPassword(password)
-    validatePassword()
-  }
-
-  const validatePassword = useCallback(async () => {
-    const number =
-      requirements.number === CheckState.DEFAULT
-        ? getNumberRequirement(password) === CheckState.VALID
-          ? CheckState.VALID
-          : CheckState.DEFAULT
-        : getNumberRequirement(password)
-    const length =
-      requirements.length === CheckState.DEFAULT
-        ? getLenRequirement(password) === CheckState.VALID
-          ? CheckState.VALID
-          : CheckState.DEFAULT
-        : getLenRequirement(password)
-    const common =
-      requirements.common === CheckState.DEFAULT
-        ? (await getCommonPasswordCheck(password)) === CheckState.VALID
-          ? CheckState.VALID
-          : CheckState.DEFAULT
-        : await getCommonPasswordCheck(password)
-    setRequirements({
-      ...requirements,
-      number,
-      length,
-      common,
-      match:
-        passwordConfirmation === ''
-          ? CheckState.DEFAULT
-          : getMatchRequirement(password, passwordConfirmation)
-    })
-  }, [password, passwordConfirmation, requirements])
-
-  const onPasswordConfirmationChange = (passwordConfirmation: string) => {
-    if (requirements.match !== CheckState.DEFAULT) {
-      setRequirements({
-        ...requirements,
-        match:
-          passwordConfirmation === ''
-            ? CheckState.DEFAULT
-            : getMatchRequirement(password, passwordConfirmation)
-      })
-    } else if (password.length <= passwordConfirmation.length) {
-      setRequirements({
-        ...requirements,
-        match: getMatchRequirement(password, passwordConfirmation)
-      })
-    }
-    setPasswordConfirmation(passwordConfirmation)
-  }
-
-  const fulfillsRequirements = () =>
-    Object.keys(requirements).every(
-      (req) => requirements[req] === CheckState.VALID
-    )
-
-  const onClickSubmit = () => {
-    if (fulfillsRequirements()) {
-      onSubmit(password)
-    }
-  }
-
-  const onConfirmKeyDown = (e: KeyboardEvent) => {
-    if (e.keyCode === 13 /** enter */) {
-      onClickSubmit()
-    }
-  }
-
-  const pwdChecks = [
-    { status: requirements.number, label: messages.checks[0] },
-    { status: requirements.length, label: messages.checks[1] },
-    { status: requirements.common, label: messages.checks[3] },
-    { status: requirements.match, label: messages.checks[2] }
-  ]
-  const isValid = Object.keys(requirements).every(
-    (req) => requirements[req] === CheckState.VALID
-  )
-  const hasError = Object.keys(requirements).some(
-    (req) => requirements[req] === CheckState.ERROR
-  )
+  const Icon = continueIcon ?? IconArrowRight
+  const { color } = useTheme()
 
   return (
-    <div className={cn(styles.container, { [styles.isMobile]: isMobile })}>
-      <form
-        className={styles.form}
-        method='post'
-        onSubmit={(e) => {
-          e.preventDefault()
-        }}
-        autoComplete='off'
-      >
-        <div className={styles.passwordContainer}>
-          <Input
-            placeholder='Password'
-            size='medium'
-            type='password'
-            name='password'
-            id='password'
-            autoComplete='new-password'
-            value={password}
-            variant={isMobile ? 'normal' : 'elevatedPlaceholder'}
-            onChange={onPasswordChange}
-            className={cn(styles.passwordInput, {
-              [styles.placeholder]: password === ''
-            })}
-            error={hasError}
-            onBlur={onPasswordBlur}
-          />
-          <Input
-            placeholder='Confirm Password'
-            size='medium'
-            type='password'
-            name='confirmPassword'
-            id='confirm-password'
-            autoComplete='new-password'
-            value={passwordConfirmation}
-            variant={isMobile ? 'normal' : 'elevatedPlaceholder'}
-            onChange={onPasswordConfirmationChange}
-            onKeyDown={onConfirmKeyDown}
-            className={cn(styles.passwordInput, {
-              [styles.placeholder]: passwordConfirmation === ''
-            })}
-            error={hasError}
-            onBlur={onPasswordConfirmationBlur}
-          />
-        </div>
-      </form>
-      <div className={styles.pwdCheckContainer}>
-        {pwdChecks.map((check, i) => (
-          <StatusMessage
-            key={i}
-            containerClassName={styles.statusContainer}
-            status={check.status}
-            label={check.label}
-          />
-        ))}
-      </div>
-      <Button
-        text={continueLabel}
-        name='continue'
-        rightIcon={
-          isLoading ? (
-            <LoadingSpinner className={styles.spinner} />
-          ) : (
-            continueIcon || <IconArrow />
-          )
-        }
-        type={
-          isValid && !isLoading ? ButtonType.PRIMARY_ALT : ButtonType.DISABLED
-        }
-        onClick={onClickSubmit}
-        className={styles.continueButton}
-        textClassName={styles.continueButtonText}
-      />
-    </div>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={({ password }) => {
+        onSubmit(password)
+      }}
+      validationSchema={passwordFormikSchma}
+    >
+      {({ isValid }) => (
+        <Flex
+          as={Form}
+          direction='column'
+          gap='xl'
+          pb='m'
+          ph='xl'
+          h='100%'
+          w='100%'
+          justifyContent='space-between'
+        >
+          <EnterPasswordSection />
+          <Flex justifyContent='center'>
+            <Button
+              name='continue'
+              type='submit'
+              iconRight={isLoading ? undefined : Icon}
+              disabled={!isValid || isLoading}
+              variant={ButtonType.PRIMARY}
+            >
+              <>
+                {continueLabel}
+                {isLoading ? (
+                  <LoadingSpinner
+                    css={{
+                      height: 20,
+                      width: 20,
+                      '&& g path': { stroke: color.special.white }
+                    }}
+                  />
+                ) : null}
+              </>
+            </Button>
+          </Flex>
+        </Flex>
+      )}
+    </Formik>
   )
 }
 
diff --git a/packages/web/src/pages/modals/Modals.tsx b/packages/web/src/pages/modals/Modals.tsx
index 89d4b52a2fa..e9c723cb675 100644
--- a/packages/web/src/pages/modals/Modals.tsx
+++ b/packages/web/src/pages/modals/Modals.tsx
@@ -22,7 +22,7 @@ import FirstUploadModal from 'components/first-upload-modal/FirstUploadModal'
 import { InboxUnavailableModal } from 'components/inbox-unavailable-modal/InboxUnavailableModal'
 import { LeavingAudiusModal } from 'components/leaving-audius-modal/LeavingAudiusModal'
 import { LockedContentModal } from 'components/locked-content-modal/LockedContentModal'
-import PasswordResetModal from 'components/password-reset/PasswordResetModal'
+import { PasswordResetModal } from 'components/password-reset/PasswordResetModal'
 import { PremiumContentPurchaseModal } from 'components/premium-content-purchase-modal/PremiumContentPurchaseModal'
 import ShareSoundToTikTokModal from 'components/share-sound-to-tiktok-modal/ShareSoundToTikTokModal'
 import { TipAudioModal } from 'components/tipping/tip-audio/TipAudioModal'
diff --git a/packages/web/src/pages/sign-in-page/SignInPage.tsx b/packages/web/src/pages/sign-in-page/SignInPage.tsx
index a685cb4bd18..d64703b6bf1 100644
--- a/packages/web/src/pages/sign-in-page/SignInPage.tsx
+++ b/packages/web/src/pages/sign-in-page/SignInPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 
 import {
   Flex,
@@ -21,6 +21,7 @@ import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordFiel
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
 import PreloadImage from 'components/preload-image/PreloadImage'
 import { useMedia } from 'hooks/useMedia'
+import { ForgotPasswordHelper } from 'pages/sign-on/components/desktop/ForgotPasswordHelper'
 import { Heading } from 'pages/sign-up-page/components/layout'
 import { useSelector } from 'utils/reducer'
 import { SIGN_UP_PAGE } from 'utils/route'
@@ -53,6 +54,7 @@ const initialValues = {
 export const SignInPage = () => {
   const dispatch = useDispatch()
   const { isMobile } = useMedia()
+  const [showForgotPassword, setShowForgotPassword] = useState(false)
 
   const signInStatus = useSelector(getStatus)
 
@@ -116,6 +118,9 @@ export const SignInPage = () => {
                 variant='visible'
                 textVariant='body'
                 css={{ textAlign: isMobile ? 'center' : undefined }}
+                onClick={() => {
+                  setShowForgotPassword(true)
+                }}
               >
                 {messages.forgotPassword}
               </TextLink>
@@ -128,6 +133,10 @@ export const SignInPage = () => {
           ) : null}
         </Flex>
       </Formik>
+      <ForgotPasswordHelper
+        isOpen={showForgotPassword}
+        onClose={() => setShowForgotPassword(false)}
+      />
     </>
   )
 }
diff --git a/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.module.css b/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.module.css
index 49eda36a9b9..44e93f92afd 100644
--- a/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.module.css
+++ b/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.module.css
@@ -1,57 +1,3 @@
-.questionButtonIcon {
-  margin-right: 10px;
-}
-
-.modalWidth {
+.modal {
   width: 510px;
 }
-
-.modalBody {
-  margin: 24px;
-}
-
-.restoreAccessText {
-  text-align: center;
-  font-size: var(--font-m);
-  line-height: 24px;
-  font-weight: var(--font-demi-bold);
-  margin-bottom: 24px;
-}
-
-.emailContainer {
-  display: flex;
-  flex-direction: row;
-  padding: 12px 24px;
-  border: 1px solid #dad9e0;
-  box-sizing: border-box;
-  border-radius: 8px;
-  font-size: 16px;
-  line-height: 20px;
-  column-gap: 12px;
-}
-
-.emailSubheadings {
-  display: flex;
-  flex-direction: column;
-  width: 64px;
-  color: var(--neutral-light-4);
-  font-weight: var(--font-bold);
-  row-gap: 12px;
-}
-
-.emailText {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  color: var(--neutral);
-  font-weight: var(--font-demi-bold);
-  row-gap: 12px;
-}
-
-.emailBody {
-  cursor: pointer;
-}
-
-.emailBody:hover {
-  color: var(--secondary);
-}
diff --git a/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.tsx b/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.tsx
index ad1e524c745..b925942f342 100644
--- a/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.tsx
+++ b/packages/web/src/pages/sign-on/components/desktop/ForgotPasswordHelper.tsx
@@ -1,4 +1,6 @@
+import { Flex, Text, useTheme } from '@audius/harmony'
 import { Modal } from '@audius/stems'
+import { CSSObject } from '@emotion/styled'
 
 import IconQuestionMark from 'assets/img/iconQuestionMark.svg'
 import Toast from 'components/toast/Toast'
@@ -29,12 +31,14 @@ export const ForgotPasswordHelper = ({
   isOpen,
   onClose
 }: ForgotPasswordHelperProps) => {
+  const { color } = useTheme()
+
   const renderTitle = () => {
     return (
-      <>
-        <IconQuestionMark className={styles.questionButtonIcon} />
-        <div className={styles.headerText}>{messages.forgotPassword}</div>
-      </>
+      <Flex gap='s' alignItems='center'>
+        <IconQuestionMark />
+        <Text>{messages.forgotPassword}</Text>
+      </Flex>
     )
   }
 
@@ -46,6 +50,13 @@ export const ForgotPasswordHelper = ({
     copyToClipboard(messages.subject)
   }
 
+  const linkCss: CSSObject = {
+    cursor: 'pointer',
+    ':hover': {
+      color: color.secondary.secondary
+    }
+  }
+
   return (
     <Modal
       isOpen={isOpen}
@@ -55,16 +66,23 @@ export const ForgotPasswordHelper = ({
       title={renderTitle()}
       allowScroll={false}
       dismissOnClickOutside={true}
-      bodyClassName={styles.modalWidth}
+      bodyClassName={styles.modal}
     >
-      <div className={styles.modalBody}>
-        <div className={styles.restoreAccessText}>{messages.restoreAccess}</div>
-        <div className={styles.emailContainer}>
-          <div className={styles.emailSubheadings}>
-            <div>{messages.fromHeader}</div>
-            <div>{messages.subjectHeader}</div>
-          </div>
-          <div className={styles.emailText}>
+      <Flex direction='column' gap='xl' m='xl'>
+        <Text variant='body' strength='strong' css={{ textAlign: 'center' }}>
+          {messages.restoreAccess}
+        </Text>
+        <Flex gap='m' pv='m' ph='xl' border='strong' borderRadius='m'>
+          <Flex
+            w={64}
+            direction='column'
+            gap='m'
+            css={{ color: color.neutral.n400 }}
+          >
+            <Text variant='title'>{messages.fromHeader}</Text>
+            <Text variant='title'>{messages.subjectHeader}</Text>
+          </Flex>
+          <Flex direction='column' gap='m' flex='1'>
             <Toast
               text={messages.copied}
               fillParent={false}
@@ -73,9 +91,14 @@ export const ForgotPasswordHelper = ({
               requireAccount={false}
               delay={TOOLTIP_DELAY}
             >
-              <div onClick={onCopyFrom} className={styles.emailBody}>
+              <Text
+                variant='title'
+                strength='weak'
+                onClick={onCopyFrom}
+                css={linkCss}
+              >
                 {messages.from}
-              </div>
+              </Text>
             </Toast>
             <Toast
               text={messages.copied}
@@ -85,13 +108,18 @@ export const ForgotPasswordHelper = ({
               requireAccount={false}
               delay={TOOLTIP_DELAY}
             >
-              <div onClick={onCopySubject} className={styles.emailBody}>
+              <Text
+                variant='title'
+                strength='weak'
+                onClick={onCopySubject}
+                css={linkCss}
+              >
                 {messages.subject}
-              </div>
+              </Text>
             </Toast>
-          </div>
-        </div>
-      </div>
+          </Flex>
+        </Flex>
+      </Flex>
     </Modal>
   )
 }
diff --git a/packages/web/src/pages/sign-up-page/components/EnterPasswordSection.tsx b/packages/web/src/pages/sign-up-page/components/EnterPasswordSection.tsx
new file mode 100644
index 00000000000..d489912c560
--- /dev/null
+++ b/packages/web/src/pages/sign-up-page/components/EnterPasswordSection.tsx
@@ -0,0 +1,23 @@
+import { Flex } from '@audius/harmony'
+
+import { PasswordField } from 'components/form-fields/PasswordField'
+
+import { CompletionChecklist } from './CompletionChecklist'
+
+const messages = {
+  passwordLabel: 'Password',
+  confirmPasswordLabel: 'Confirm Password'
+}
+
+export const EnterPasswordSection = () => {
+  return (
+    <Flex direction='column' gap='l'>
+      <PasswordField name='password' label={messages.passwordLabel} />
+      <PasswordField
+        name='confirmPassword'
+        label={messages.confirmPasswordLabel}
+      />
+      <CompletionChecklist />
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
index 149fa841183..242cae392cf 100644
--- a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
@@ -7,12 +7,11 @@ import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { setValueField } from 'common/store/pages/signon/actions'
 import { getEmailField } from 'common/store/pages/signon/selectors'
-import { PasswordField } from 'components/form-fields/PasswordField'
 import { useMedia } from 'hooks/useMedia'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 import { SIGN_UP_HANDLE_PAGE } from 'utils/route'
 
-import { CompletionChecklist } from '../components/CompletionChecklist'
+import { EnterPasswordSection } from '../components/EnterPasswordSection'
 import { SignUpAgreementText } from '../components/SignUpPolicyText'
 import { Heading, Page, PageFooter, ReadOnlyField } from '../components/layout'
 import { passwordSchema } from '../utils/passwordSchema'
@@ -21,9 +20,7 @@ const messages = {
   createYourPassword: 'Create Your Password',
   description:
     'Create a password that’s secure and easy to remember! We can’t reset your password, so write it down or use a password manager.',
-  yourEmail: 'Your Email',
-  passwordLabel: 'Password',
-  confirmPasswordLabel: 'Confirm Password'
+  yourEmail: 'Your Email'
 }
 
 const initialValues = {
@@ -70,12 +67,7 @@ export const CreatePasswordPage = () => {
               label={messages.yourEmail}
               value={emailField.value}
             />
-            <PasswordField name='password' label={messages.passwordLabel} />
-            <PasswordField
-              name='confirmPassword'
-              label={messages.confirmPasswordLabel}
-            />
-            <CompletionChecklist />
+            <EnterPasswordSection />
           </Flex>
           <PageFooter
             shadow='flat'