diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css
index 046fc817..d1676b63 100644
--- a/src/components/PageWrappers/layout.css
+++ b/src/components/PageWrappers/layout.css
@@ -40,7 +40,7 @@
 
 /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
 .layout-right {
-    flex: 0 0 44.6%;
+    flex: 0 0 45%;
     max-width: 45%;
     z-index: 0;
 }
diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
index 39175d93..4b51b17f 100644
--- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -1,18 +1,13 @@
-import { Button, Shadow } from '@status-im/components'
-import { Stack } from 'tamagui'
+import { Button } from '@status-im/components'
+import { Stack, YStack } from 'tamagui'
+import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper'
 
 const Activation = () => {
   return (
     <>
-      <Shadow
-        variant="$1"
-        style={{
-          borderRadius: '16px',
-          border: 'none',
-          backgroundColor: '#fff',
-          padding: '16px 32px',
-        }}
-      ></Shadow>
+      <ValidatorBoxWrapper>
+        <YStack></YStack>
+      </ValidatorBoxWrapper>
       <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
         <Button>Continue</Button>
       </Stack>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index fe88cae0..902c379e 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -1,18 +1,13 @@
-import { Button, Shadow } from '@status-im/components'
-import { Stack } from 'tamagui'
+import { Button } from '@status-im/components'
+import { Stack, YStack } from 'tamagui'
+import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper'
 
 const KeyGeneration = () => {
   return (
     <>
-      <Shadow
-        variant="$1"
-        style={{
-          borderRadius: '16px',
-          border: 'none',
-          backgroundColor: '#fff',
-          padding: '16px 32px',
-        }}
-      ></Shadow>
+      <ValidatorBoxWrapper>
+        <YStack space={'$2'}></YStack>
+      </ValidatorBoxWrapper>
       <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
         <Button>Continue</Button>
       </Stack>
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
index 3e1bd83b..131e5bd6 100644
--- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -1,22 +1,14 @@
 import { Stack, Text as TextTam, XStack, YStack } from 'tamagui'
-import { Button, Shadow, Text } from '@status-im/components'
+import { Button, Text } from '@status-im/components'
 import { Link } from 'react-router-dom'
 import OverviewCard from './OverviewCard'
 import { ArrowRightIcon } from '@status-im/icons'
+import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper'
 
 const Overview = () => {
   return (
     <>
-      <Shadow
-        variant="$2"
-        style={{
-          borderRadius: '16px',
-          border: 'none',
-          flexDirection: 'row',
-          backgroundColor: '#fff',
-          zIndex: 999,
-        }}
-      >
+      <ValidatorBoxWrapper>
         <YStack className="layout-left" space={'$5'} style={{ padding: '16px 32px' }}>
           <TextTam fontSize={27} fontWeight={'600'} style={{ marginBottom: '5px' }}>
             Overview
@@ -60,7 +52,7 @@ const Overview = () => {
             />
           </div>
         </section>
-      </Shadow>
+      </ValidatorBoxWrapper>
       <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
         <Button>Continue</Button>
       </Stack>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
index 167c62b8..9c2ebdc1 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
@@ -1,18 +1,13 @@
-import { Button, Shadow } from '@status-im/components'
-import { Stack } from 'tamagui'
+import { Button } from '@status-im/components'
+import { Stack, YStack } from 'tamagui'
+import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper'
 
 const ValidatorSetup = () => {
   return (
     <>
-      <Shadow
-        variant="$1"
-        style={{
-          borderRadius: '16px',
-          border: 'none',
-          backgroundColor: '#fff',
-          padding: '16px 32px',
-        }}
-      ></Shadow>
+      <ValidatorBoxWrapper>
+        <YStack></YStack>
+      </ValidatorBoxWrapper>
       <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
         <Button>Continue</Button>
       </Stack>