diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts
new file mode 100644
index 00000000..19a7795f
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import OSCard from './OSCard'
+import { MAC } from '../../../../constants'
+
+const meta = {
+  title: 'ValidatorOnboarding/OSCard',
+  component: OSCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof OSCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    icon: '/icons/apple-logo.svg',
+    name: MAC,
+    isSelected: true,
+  },
+}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
new file mode 100644
index 00000000..ac73df7f
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCard.tsx
@@ -0,0 +1,37 @@
+import { Stack, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+
+import Icon from '../../../../components/General/Icon'
+
+type OSCardProps = {
+  name: string
+  icon: string
+  onClick?: () => void
+  isSelected?: boolean
+}
+
+const OSCard = ({ name, icon, onClick, 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: '32%',
+        cursor: 'pointer',
+      }}
+      space={'$8'}
+      onPress={onClick}
+    >
+      <Stack>
+        <Text size={19} weight={'semibold'}>
+          {name}
+        </Text>
+      </Stack>
+      <Icon src={icon} width={42} height={52} />
+    </YStack>
+  )
+}
+
+export default OSCard