diff --git a/public/icons/Linux.png b/public/icons/Linux.png
new file mode 100644
index 00000000..2156d1d6
Binary files /dev/null and b/public/icons/Linux.png differ
diff --git a/public/icons/MAC.png b/public/icons/MAC.png
new file mode 100644
index 00000000..891ef1df
Binary files /dev/null and b/public/icons/MAC.png differ
diff --git a/public/icons/windows.png b/public/icons/windows.png
new file mode 100644
index 00000000..3fbf8bbc
Binary files /dev/null and b/public/icons/windows.png differ
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 61d349b4..ba3f1d83 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 ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
new file mode 100644
index 00000000..426f68b4
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
@@ -0,0 +1,33 @@
+import { Stack, YStack } from 'tamagui'
+import Icon from '../../../components/General/Icon'
+import { Text } from '@status-im/components'
+
+// make func component
+
+type OsCardProps = {
+  name: string
+  icon: string
+  isSelected?: boolean
+}
+const OsCard = ({ name, icon, isSelected }: OsCardProps) => {
+  return (
+    <YStack
+      style={{
+        backgroundColor: isSelected ? '#2A4AF50D' : 'none',
+        border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
+        borderRadius: '16px',
+        padding: '12px 16px',
+        width: '30%',
+      }}
+      space={'$12'}
+    >
+      <Stack>
+        <Text size={27} weight={'semibold'}>
+          {name}
+        </Text>
+      </Stack>
+      <Icon src={icon} width={100} height={100} />
+    </YStack>
+  )
+}
+export default OsCard
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
index 8f0dbc94..6b010e57 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
@@ -1,6 +1,7 @@
 import { XStack, Stack, YStack } from 'tamagui'
 import { InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
+import OsCard from './OsCard'
 
 const ValidatorSetupInstall = () => {
   return (
@@ -34,6 +35,7 @@ const ValidatorSetupInstall = () => {
                 borderRadius: '15px',
                 padding: '6px 12px',
               }}
+              space={'$3'}
             >
               <Text size={27}> Installing Geth</Text>
               <Text size={13}>
@@ -49,6 +51,12 @@ const ValidatorSetupInstall = () => {
                 are also provided in each section.
               </Text>
             </YStack>
+            {/* Cards */}
+            <XStack justifyContent={'space-between'} space={'$3'}>
+              <OsCard icon="/icons/MAC.png" name="Mac" isSelected={true}></OsCard>
+              <OsCard icon="/icons/Linux.png" name="Linux"></OsCard>
+              <OsCard icon="/icons/windows.png" name="Windows"></OsCard>
+            </XStack>
           </YStack>
         </Stack>
       </YStack>