diff --git a/public/images/common/recovery-plus.svg b/public/images/common/recovery-plus.svg
new file mode 100644
index 0000000000..351202af8e
--- /dev/null
+++ b/public/images/common/recovery-plus.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
index 79709c965d..dbb1b792c1 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
@@ -1,8 +1,12 @@
+import { Divider, CardActions, Button, Typography } from '@mui/material'
+import { useForm, FormProvider } from 'react-hook-form'
import type { ReactElement } from 'react'
import TxCard from '../../common/TxCard'
import type { EnableRecoveryFlowProps } from '.'
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+
export function EnableRecoveryFlowSettings({
params,
onSubmit,
@@ -10,5 +14,55 @@ export function EnableRecoveryFlowSettings({
params: EnableRecoveryFlowProps
onSubmit: (formData: EnableRecoveryFlowProps) => void
}): ReactElement {
- return EnableRecoveryFlowSettings
+ const formMethods = useForm({
+ defaultValues: params,
+ mode: 'onChange',
+ })
+
+ return (
+ <>
+
+
+
+ >
+ )
}
diff --git a/src/components/tx-flow/flows/EnableRecovery/index.tsx b/src/components/tx-flow/flows/EnableRecovery/index.tsx
index 2784c3441a..5c0065b630 100644
--- a/src/components/tx-flow/flows/EnableRecovery/index.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/index.tsx
@@ -1,7 +1,7 @@
import type { ReactElement } from 'react'
import TxLayout from '@/components/tx-flow/common/TxLayout'
-import CodeIcon from '@/public/images/apps/code-icon.svg'
+import RecoveryPlus from '@/public/images/common/recovery-plus.svg'
import useTxStepper from '../../useTxStepper'
import { EnableRecoveryFlowReview } from './EnableRecoveryFlowReview'
import { EnableRecoveryFlowSettings } from './EnableRecoveryFlowSettings'
@@ -38,10 +38,10 @@ export function EnableRecoveryFlow(): ReactElement {
const subtitle = isIntro
? 'How does recovery work?'
: isSettings
- ? 'Set up account settings'
+ ? 'Set up account recovery settings'
: 'Set up account recovery'
- const icon = isIntro ? undefined : CodeIcon
+ const icon = isIntro ? undefined : RecoveryPlus
return (