diff --git a/src/pages/ValidatorOnboarding/Activation.tsx b/src/pages/ValidatorOnboarding/Activation.tsx
new file mode 100644
index 00000000..39175d93
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation.tsx
@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const Activation = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default Activation
diff --git a/src/pages/ValidatorOnboarding/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories.tsx
new file mode 100644
index 00000000..43d86f2b
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advicsories.tsx
@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const Advicsories = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default Advicsories
diff --git a/src/pages/ValidatorOnboarding/FormStepper.stories.tsx b/src/pages/ValidatorOnboarding/FormStepper.stories.ts
similarity index 100%
rename from src/pages/ValidatorOnboarding/FormStepper.stories.tsx
rename to src/pages/ValidatorOnboarding/FormStepper.stories.ts
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts
new file mode 100644
index 00000000..44da7606
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import KeyGeneration from './KeyGeneration'
+
+const meta = {
+  title: 'ValidatorOnboarding/KeyGeneration',
+  component: KeyGeneration,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof KeyGeneration>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {},
+}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration.tsx
new file mode 100644
index 00000000..fe88cae0
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration.tsx
@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const KeyGeneration = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default KeyGeneration
diff --git a/src/pages/ValidatorOnboarding/Overview.stories.ts b/src/pages/ValidatorOnboarding/Overview.stories.ts
new file mode 100644
index 00000000..5ce2f43c
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import Overview from './Overview'
+
+const meta = {
+  title: 'ValidatorOnboarding/Overview',
+  component: Overview,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  decorators: [withRouter],
+} satisfies Meta<typeof Overview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {},
+}
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 9b1c3e60..f603b414 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -4,6 +4,10 @@ import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradie
 import Titles from '../../components/General/Titles'
 import { useState } from 'react'
 import Overview from './Overview'
+import KeyGeneration from './KeyGeneration'
+import Advicsories from './Advicsories'
+import ValidatorSetup from './ValidatorSetup'
+import Activation from './Activation'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -30,6 +34,10 @@ const ValidatorOnboarding = () => {
         />
         <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
         {activeStep === 0 && <Overview />}
+        {activeStep === 1 && <Advicsories />}
+        {activeStep === 2 && <ValidatorSetup />}
+        {activeStep === 3 && <KeyGeneration />}
+        {activeStep === 4 && <Activation />}
       </YStack>
     </PageWrapperGradient>
   )
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup.tsx
new file mode 100644
index 00000000..167c62b8
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup.tsx
@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const ValidatorSetup = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default ValidatorSetup