diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.stories.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.stories.tsx
new file mode 100644
index 00000000..4afa231a
--- /dev/null
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorBalance.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ValidatorBalance from './ValidatorBalance'
+
+const meta = {
+  title: 'Manage Validator/ValidatorBalance',
+  component: ValidatorBalance,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ValidatorBalance>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.stories.tsx b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.stories.tsx
new file mode 100644
index 00000000..02a1f029
--- /dev/null
+++ b/src/pages/ManageValidator/LeftManage/ValidatorBlueSection/ValidatorInfo.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ValidatorInfo from './ValidatorInfo'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+const meta = {
+  title: 'Manage Validator/ValidatorInfo',
+  component: ValidatorInfo,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [withRouter],
+} satisfies Meta<typeof ValidatorInfo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}