diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
new file mode 100644
index 00000000..ba7ef61e
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
@@ -0,0 +1,27 @@
+import { Separator, Stack, XStack, YStack } from 'tamagui'
+import SetupRow from './SetupRow'
+import WithdrawalAddress from './WithdrawalAddress'
+import { Text } from '@status-im/components'
+import { ArrowLeftIcon } from '@status-im/icons'
+import { Link } from 'react-router-dom'
+
+const ClientSetup = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ Edit Validators
+
+
+
+
+
+ )
+}
+export default ClientSetup
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
new file mode 100644
index 00000000..f2f89663
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
@@ -0,0 +1,41 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import { Input as StatusInput, Text } from '@status-im/components'
+import { AddIcon } from '@status-im/icons'
+
+type SetupRowProps = {
+ title: string
+}
+const SetupRow = ({ title }: SetupRowProps) => {
+ return (
+
+
+ {title}
+
+
+
+
+ How many Validators would you like to run?
+
+ } />
+
+
+
+ ETH
+
+
+ 64
+
+
+
+
+ USD
+
+
+ $4,273 USD
+
+
+
+
+ )
+}
+export default SetupRow
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
new file mode 100644
index 00000000..ca1e7430
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
@@ -0,0 +1,33 @@
+import { Stack, YStack } from 'tamagui'
+import { InformationBox, Input as StatusInput, Text } from '@status-im/components'
+import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
+type WithdrawalAddressProps = {
+ title: string
+}
+const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
+ return (
+
+
+ {title}
+
+
+
+ Ethereum Address
+
+
+ }
+ />
+
+ }
+ />
+
+
+ )
+}
+export default WithdrawalAddress
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index 97e07ef6..cb74d96b 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -32,26 +32,34 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
data-step="Advicsories"
/>
changeActiveStep(2)}
completed={activeStep > 1}
+ data-subtitle="Execution & Consensus"
+ data-step="Advicsories"
+ />
+ changeActiveStep(3)}
+ completed={activeStep > 2}
data-subtitle="Clients, Nodes & Validators"
data-step="Validator Setup"
/>
changeActiveStep(3)}
- completed={activeStep > 2}
+ onClick={() => changeActiveStep(4)}
+ completed={activeStep > 3}
data-subtitle="Secure your Keypairs"
data-step="Key Generation"
/>
changeActiveStep(4)}
- completed={activeStep > 3}
+ onClick={() => changeActiveStep(5)}
+ completed={activeStep > 4}
data-subtitle="Complete Setup"
data-step="Activation"
/>
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 9c7f1eca..295b278b 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -11,6 +11,7 @@ import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
import { Button } from '@status-im/components'
import { useNavigate } from 'react-router-dom'
import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
+import ClientSetup from './ClientSetup/ClientSetup'
const ValidatorOnboarding = () => {
const [activeStep, setActiveStep] = useState(0)
@@ -51,9 +52,10 @@ const ValidatorOnboarding = () => {
{activeStep === 0 && }
{activeStep === 1 && }
- {activeStep === 2 && }
- {activeStep === 3 && }
- {activeStep === 4 && }
+ {activeStep === 2 && }
+ {activeStep === 3 && }
+ {activeStep === 4 && }
+ {activeStep === 5 && }