diff --git a/ui/components/component-library/sensitive-text/README.md b/ui/components/component-library/sensitive-text/README.md
deleted file mode 100644
index 875ed8d7d308..000000000000
--- a/ui/components/component-library/sensitive-text/README.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# SensitiveText
-
-SensitiveText is a component that extends the Text component to handle sensitive information. It provides the ability to hide or show the text content, replacing it with asterisks when hidden.
-
-## Props
-
-This component extends all props from the [Text](../text/README.md) component and adds the following:
-
-### `isHidden`
-
-Boolean to determine whether the text should be hidden or visible.
-
-| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
-| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
-| boolean                                             | No                                                      | false                                                  |
-
-### `length`
-
-Determines the length of the hidden text (number of asterisks). Can be a predefined SensitiveTextLength or a custom string number.
-
-| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
-| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
-| [SensitiveTextLengthType](./sensitive-text.types.ts#L14) \| [CustomLength](./sensitive-text.types.ts#L19) | No   | SensitiveTextLength.Short                              |
-
-### `children`
-
-The text content to be displayed or hidden.
-
-| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
-| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
-| React.ReactNode                                     | No                                                      | ''                                                     |
-
-## Usage
-```jsx
-import { SensitiveText } from '../sensitive-text';
-import { SensitiveTextLength } from './sensitive-text.types';
-<SensitiveText
-isHidden={true}
-length={SensitiveTextLength.Medium}
->
-Sensitive Information
-</SensitiveText>
-<SensitiveText
-isHidden={true}
-length="15"
->
-Custom Length Hidden Text
-</SensitiveText>
-```
-
-This will render a Text component with asterisks instead of the actual text when `isHidden` is true, and the original text when `isHidden` is false. The number of asterisks is determined by the `length` prop.
-
-## Behavior
-
-- When `isHidden` is `true`, the component will display asterisks instead of the actual text.
-- The number of asterisks displayed is determined by the `length` prop.
-- If an invalid `length` is provided, the component will fall back to `SensitiveTextLength.Short` and log a warning.
-- Custom length values can be provided as strings, e.g., "15".
-- The component forwards refs to the underlying Text component.
-- Additional props are passed through to the Text component.
-
-## SensitiveTextLength Options
-
-The following predefined length options are available:
-
-- `SensitiveTextLength.Short`: '6'
-- `SensitiveTextLength.Medium`: '9'
-- `SensitiveTextLength.Long`: '12'
-- `SensitiveTextLength.ExtraLong`: '20'
-
-You can import these options from `./sensitive-text.types`.
\ No newline at end of file
diff --git a/ui/components/component-library/sensitive-text/README.mdx b/ui/components/component-library/sensitive-text/README.mdx
new file mode 100644
index 000000000000..9e950381e6f3
--- /dev/null
+++ b/ui/components/component-library/sensitive-text/README.mdx
@@ -0,0 +1,81 @@
+import { Controls, Canvas } from '@storybook/blocks';
+
+import * as SensitiveTextStories from './sensitive-text.stories';
+
+# SensitiveText
+
+SensitiveText is a component that extends the Text component to handle sensitive information. It provides the ability to hide or show the text content, replacing it with dots when hidden.
+
+<Canvas of={SensitiveTextStories.DefaultStory} />
+
+## Props
+
+The `SensitiveText` component extends the `Text` component. See the `Text` component for an extended list of props.
+
+<Controls of={SensitiveTextStories.DefaultStory} />
+
+### Children
+
+The text content to be displayed or hidden.
+
+<Canvas of={SensitiveTextStories.Children} />
+
+```jsx
+import { SensitiveText } from '../../component-library';
+
+<SensitiveText>
+  Sensitive Information
+</SensitiveText>
+```
+
+
+### IsHidden
+
+Use the `isHidden` prop to determine whether the text should be hidden or visible. When `isHidden` is `true`, the component will display dots instead of the actual text.
+
+<Canvas of={SensitiveTextStories.IsHidden} />
+
+```jsx
+import { SensitiveText } from '../../component-library';
+
+<SensitiveText isHidden>
+  Sensitive Information
+</SensitiveText>
+```
+
+### Length
+
+Use the `length` prop to determine the length of the hidden text (number of dots). Can be a predefined `SensitiveTextLength` or a custom string number.
+
+The following predefined length options are available:
+
+- `SensitiveTextLength.Short`: `6`
+- `SensitiveTextLength.Medium`: `9`
+- `SensitiveTextLength.Long`: `12`
+- `SensitiveTextLength.ExtraLong`: `20`
+
+- The number of dots displayed is determined by the `length` prop.
+- If an invalid `length` is provided, the component will fall back to `SensitiveTextLength.Short` and log a warning.
+- Custom length values can be provided as strings, e.g. `15`.
+
+<Canvas of={SensitiveTextStories.Length} />
+
+```jsx
+import { SensitiveText, SensitiveTextLength } from '../../component-library';
+
+<SensitiveText length={SensitiveTextLength.Short}>
+  Length "short" (6 characters)
+</SensitiveText>
+<SensitiveText length={SensitiveTextLength.Medium}>
+  Length "medium" (9 characters)
+</SensitiveText>
+<SensitiveText length={SensitiveTextLength.Long}>
+  Length "long" (12 characters)
+</SensitiveText>
+<SensitiveText length={SensitiveTextLength.ExtraLong}>
+  Length "extra long" (20 characters)
+</SensitiveText>
+<SensitiveText length="15">
+  Length "15" (15 characters)
+</SensitiveText>
+```
diff --git a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx
index cd843d5a7a78..142def9118b5 100644
--- a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx
+++ b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx
@@ -1,16 +1,22 @@
-import { StoryFn, Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { SensitiveText } from '.';
 import { SensitiveTextLength } from './sensitive-text.types';
+import README from './README.mdx';
 import { Box } from '../box';
 import {
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
 
-export default {
+const meta: Meta<typeof SensitiveText> = {
   title: 'Components/ComponentLibrary/SensitiveText',
   component: SensitiveText,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
   args: {
     children: 'Sensitive information',
     isHidden: false,
@@ -18,22 +24,35 @@ export default {
   },
 } as Meta<typeof SensitiveText>;
 
-const Template: StoryFn<typeof SensitiveText> = (args) => {
-  return <SensitiveText {...args} />;
-};
+export default meta;
+type Story = StoryObj<typeof SensitiveText>;
 
-export const DefaultStory = Template.bind({});
+export const DefaultStory: Story = {};
 DefaultStory.storyName = 'Default';
 
-export const HiddenText: StoryFn<typeof SensitiveText> = (args) => {
-  return <SensitiveText {...args} />;
+export const Children: Story = {
+  args: {
+    children: 'Sensitive information',
+  },
+  render: (args) => (
+    <SensitiveText {...args} />
+  ),
 };
-HiddenText.args = {
-  isHidden: true,
+
+export const IsHidden: Story = {
+  args: {
+    isHidden: true,
+  },
+  render: (args) => (
+    <SensitiveText {...args} />
+  ),
 };
 
-export const LengthVariants: StoryFn<typeof SensitiveText> = (args) => {
-  return (
+export const Length: Story = {
+  args: {
+    isHidden: true,
+  },
+  render: (args) => (
     <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
       <SensitiveText {...args} length={SensitiveTextLength.Short}>
         Length "short" (6 characters)
@@ -47,9 +66,9 @@ export const LengthVariants: StoryFn<typeof SensitiveText> = (args) => {
       <SensitiveText {...args} length={SensitiveTextLength.ExtraLong}>
         Length "extra long" (20 characters)
       </SensitiveText>
+      <SensitiveText {...args} length="15">
+        Length "15" (15 characters)
+      </SensitiveText>
     </Box>
-  );
-};
-LengthVariants.args = {
-  isHidden: true,
+  ),
 };