diff --git a/src/components/General/Deposit.tsx b/src/components/General/Deposit.tsx
index 40bcd730..25a5b092 100644
--- a/src/components/General/Deposit.tsx
+++ b/src/components/General/Deposit.tsx
@@ -12,7 +12,7 @@ import { RootState } from '../../redux/store'
 import { DEPOSIT_SUBTITLE } from '../../constants'
 import { getDepositTitle } from '../../utilities'
 import styles from './deposit.module.css'
-import ValidatorBalanceInfoBox from '../../pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox'
+import ValidatorBalanceInfoBox from './ValidatorBalanceInfoBox'
 
 const Deposit = () => {
   const [validatorCount, setValidatorCount] = useState(2)
diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.stories.ts b/src/components/General/ValidatorBalanceInfoBox.stories.ts
similarity index 100%
rename from src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.stories.ts
rename to src/components/General/ValidatorBalanceInfoBox.stories.ts
diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx b/src/components/General/ValidatorBalanceInfoBox.tsx
similarity index 95%
rename from src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx
rename to src/components/General/ValidatorBalanceInfoBox.tsx
index c8668e8e..7a2361c7 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx
+++ b/src/components/General/ValidatorBalanceInfoBox.tsx
@@ -3,7 +3,7 @@ import { PlaceholderIcon } from '@status-im/icons'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../redux/store'
 
 const ValidatorBalanceInfoBox = () => {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
diff --git a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx
index 76d7310a..4273bf79 100644
--- a/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx
+++ b/src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx
@@ -10,7 +10,7 @@ import ChainParity from '../../../../../components/General/ChainParity'
 import ValidatorRequest from '../../../../../components/General/ValidatorRequest/ValidatorRequest'
 import { getDepositTitle } from '../../../../../utilities'
 import DepositValidator from './DepositValidator'
-import ValidatorBalanceInfoBox from '../../../../ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox'
+import ValidatorBalanceInfoBox from '../../../../../components/General/ValidatorBalanceInfoBox'
 
 const DepositPanel = () => {
   const { isWalletConnected, isTransactionConfirmation, isChainParity } =
diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
new file mode 100644
index 00000000..40bcd730
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
@@ -0,0 +1,76 @@
+import { DividerLine, Text } from '@status-im/components'
+import { YStack } from 'tamagui'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import ValidatorRequest from './ValidatorRequest/ValidatorRequest'
+import ConnectWallet from './ConnectWallet'
+import ConnectedWallet from './ConnectedWallet'
+import ChainParity from './ChainParity'
+import ValidatorsMenuWithPrice from './ValidatorsMenuWithPrice'
+import { RootState } from '../../redux/store'
+import { DEPOSIT_SUBTITLE } from '../../constants'
+import { getDepositTitle } from '../../utilities'
+import styles from './deposit.module.css'
+import ValidatorBalanceInfoBox from '../../pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox'
+
+const Deposit = () => {
+  const [validatorCount, setValidatorCount] = useState(2)
+  const { isWalletConnected, isTransactionConfirmation, isChainParity } =
+    useSelector((state: RootState) => state.deposit)
+
+  const changeValidatorCountHandler = (value: string) => {
+    const numberValue = Number(value)
+    if (!isNaN(numberValue)) {
+      setValidatorCount(numberValue)
+    }
+  }
+
+  return (
+    <YStack space={'$3'} className={styles['deposit-container']}>
+      <Text size={19} weight={'semibold'}>
+        {getDepositTitle({ isChainParity, isTransactionConfirmation })}
+      </Text>
+      {isChainParity ? (
+        <ChainParity />
+      ) : (
+        <YStack space={'$3'} style={{ width: '100%' }}>
+          {isTransactionConfirmation ? (
+            <Text size={15} weight="regular" color={'#647084'}>
+              {DEPOSIT_SUBTITLE}
+            </Text>
+          ) : (
+            <ValidatorsMenuWithPrice
+              validatorCount={validatorCount}
+              changeValidatorCountHandler={changeValidatorCountHandler}
+              label={DEPOSIT_SUBTITLE}
+            />
+          )}
+          {isTransactionConfirmation && <ConnectedWallet />}
+          <DividerLine
+            style={{ marginTop: isTransactionConfirmation ? '0px' : '15px' }}
+          />
+          {Array.from({ length: validatorCount }).map((_, index) => (
+            <ValidatorRequest
+              key={index}
+              name={(index + 1).toString()}
+              isTransactionConfirmation={isTransactionConfirmation}
+              isWithDivider={true}
+            />
+          ))}
+          <ValidatorBalanceInfoBox />
+          {!isTransactionConfirmation && (
+            <YStack space={'$3'} style={{ width: '100%' }}>
+              <Text size={19} weight={'semibold'}>
+                Connect Wallet
+              </Text>
+              {isWalletConnected ? <ConnectedWallet /> : <ConnectWallet />}
+            </YStack>
+          )}
+        </YStack>
+      )}
+    </YStack>
+  )
+}
+
+export default Deposit