diff --git a/src/pages/ManageValidator/LeftManage/LeftManage.tsx b/src/pages/ManageValidator/LeftManage/LeftManage.tsx
index b3373462..c2f80e89 100644
--- a/src/pages/ManageValidator/LeftManage/LeftManage.tsx
+++ b/src/pages/ManageValidator/LeftManage/LeftManage.tsx
@@ -1,17 +1,15 @@
 import { useState } from 'react'
-import { Stack, YStack } from 'tamagui'
+import { Stack } from 'tamagui'
 import { InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 
 import Header from './Header'
-import ValidatorInfo from './ValidatorInfo'
-import DepositStatus from './DepositStatus'
-import ValidatorBalance from './ValidatorBalance'
 import ValidatorDataCards from './ValidatorDataCards'
 import ValidatorSettingsCards from './ValidatorSettingsCards'
 import ValidatorGraffiti from './ValidatorGraffiti'
 import ValidatorDataTabs from './ManageValidatorTable/ValidatorDataTabs'
 import Footer from './Footer'
+import ValidatorBlueSection from './ValidatorBlueSection'
 
 const LeftManage = () => {
   const [isVisibleWarning, setIsVisibleWarning] = useState(true)
@@ -25,11 +23,7 @@ const LeftManage = () => {
       style={{ borderRight: '1px solid #DCE0E5' }}
     >
       <Header />
-      <YStack backgroundColor="#F4F6FE" space={'$3'}>
-        <ValidatorInfo />
-        <DepositStatus />
-        <ValidatorBalance />
-      </YStack>
+      <ValidatorBlueSection />
       <ValidatorDataCards />
       <ValidatorSettingsCards />
       <ValidatorGraffiti />
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection.stories.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection.stories.tsx
new file mode 100644
index 00000000..df647075
--- /dev/null
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ValidatorBlueSection from './ValidatorBlueSection'
+
+const meta = {
+  title: 'ManageValidator/ValidatorBlueSection',
+  component: ValidatorBlueSection,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ValidatorBlueSection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection.tsx
new file mode 100644
index 00000000..4199c3af
--- /dev/null
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection.tsx
@@ -0,0 +1,17 @@
+import { YStack } from 'tamagui'
+
+import ValidatorInfo from './ValidatorInfo'
+import DepositStatus from './DepositStatus'
+import ValidatorBalance from './ValidatorBalance'
+
+const ValidatorBlueSection = () => {
+  return (
+    <YStack backgroundColor="#F4F6FE" space={'$3'}>
+      <ValidatorInfo />
+      <DepositStatus />
+      <ValidatorBalance />
+    </YStack>
+  )
+}
+
+export default ValidatorBlueSection