diff --git a/src/pages/ValidatorOnboarding/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper.tsx
index 294f0fc4..b4e0bef1 100644
--- a/src/pages/ValidatorOnboarding/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper.tsx
@@ -1,10 +1,12 @@
-import { useState } from 'react'
 import { Stepper, Step } from 'react-form-stepper'
 import './FormStepper.css'
 
-const FormStepper = () => {
-  const [activeStep, setActiveStep] = useState<number>(0)
+type FormStepperProps = {
+  activeStep: number
+  changeActiveStep: (step: number) => void
+}
 
+const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
   return (
     <Stepper
       activeStep={activeStep}
@@ -16,31 +18,31 @@ const FormStepper = () => {
       <Step
         className="custom-step"
         label={'Overview'}
-        onClick={() => setActiveStep(0)}
+        onClick={() => changeActiveStep(0)}
         completed={activeStep >= 0}
       />
       <Step
         className="custom-step"
         label="Advicsories"
-        onClick={() => setActiveStep(1)}
+        onClick={() => changeActiveStep(1)}
         completed={activeStep > 0}
       />
       <Step
         label="Validator Setup"
         className="custom-step"
-        onClick={() => setActiveStep(2)}
+        onClick={() => changeActiveStep(2)}
         completed={activeStep > 1}
       />
       <Step
         label="Key Generation"
         className="custom-step"
-        onClick={() => setActiveStep(3)}
+        onClick={() => changeActiveStep(3)}
         completed={activeStep > 2}
       />
       <Step
         label="Activation"
         className="custom-step"
-        onClick={() => setActiveStep(4)}
+        onClick={() => changeActiveStep(4)}
         completed={activeStep > 3}
       />
     </Stepper>