diff --git a/src/components/content/ContentArea/ContentArea.stories.mdx b/src/components/content/ContentArea/ContentArea.stories.mdx
deleted file mode 100644
index 0909aec1..00000000
--- a/src/components/content/ContentArea/ContentArea.stories.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Theme } from '../../../../.storybook/components'
-
-import { ContentArea } from './ContentArea'
-
-<Meta title="Components/Content/ContentArea" component={ContentArea} />
-
-# ContentArea
-
-This component makes sure that there is enough space between multiple sections and actions on a page.
-
-export const Template = ({ children }) => <ContentArea>{children}</ContentArea>
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      children: 'Multiple blocks',
-    }}
-    argTypes={{
-      children: {
-        options: ['Multiple blocks', 'One block'],
-        mapping: {
-          'Multiple blocks': (
-            <>
-              <div className="bg-neutral-200">Block A</div>
-              <div className="bg-neutral-100">Block B</div>
-              <div className="bg-neutral-200">Block C</div>
-            </>
-          ),
-          'One block': <div className="bg-neutral-200">Block A</div>,
-        },
-        control: { type: 'select' },
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-
-
-<Theme component="content" items={['area']} />
diff --git a/src/components/content/ContentArea/ContentArea.stories.tsx b/src/components/content/ContentArea/ContentArea.stories.tsx
new file mode 100644
index 00000000..16ccefba
--- /dev/null
+++ b/src/components/content/ContentArea/ContentArea.stories.tsx
@@ -0,0 +1,55 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../../.storybook/components'
+import { ContentArea } from './ContentArea'
+
+const meta = {
+  component: ContentArea,
+  args: {
+    children: 'Multiple blocks',
+  },
+  argTypes: {
+    children: {
+      options: ['Multiple blocks', 'One block'],
+      mapping: {
+        'Multiple blocks': (
+          <>
+            <div className="bg-neutral-200">Block A</div>
+            <div className="bg-neutral-100">Block B</div>
+            <div className="bg-neutral-200">Block C</div>
+          </>
+        ),
+        'One block': <div className="bg-neutral-200">Block A</div>,
+      },
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme component="content" items={['area']} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof ContentArea>
+
+export default meta
+
+type Story = StoryObj<typeof ContentArea>
+
+export const Default: Story = {}
diff --git a/src/components/content/ContentArea/ContentArea.tsx b/src/components/content/ContentArea/ContentArea.tsx
index ae4adae3..20237498 100644
--- a/src/components/content/ContentArea/ContentArea.tsx
+++ b/src/components/content/ContentArea/ContentArea.tsx
@@ -7,6 +7,9 @@ export type ContentAreaProps = ClassNameProps & {
   children?: ReactNode
 }
 
+/**
+ * This component makes sure that there is enough space between multiple sections and actions on a page.
+ */
 export function ContentArea({ className, children }: ContentAreaProps) {
   const { content } = useTheme()
   return (
diff --git a/src/components/content/ContentMessage/ContentMessage.stories.mdx b/src/components/content/ContentMessage/ContentMessage.stories.mdx
deleted file mode 100644
index 99b7e0ac..00000000
--- a/src/components/content/ContentMessage/ContentMessage.stories.mdx
+++ /dev/null
@@ -1,128 +0,0 @@
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
-import IconError from '@aboutbits/react-material-icons/dist/IconError'
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Theme } from '../../../../.storybook/components'
-import { Tone } from '../../types'
-import { ContentMessage } from './ContentMessage'
-import { ContentMessageContainer } from './ContentMessageContainer'
-import { ContentMessageIcon } from './ContentMessageIcon'
-import { ContentMessageTitle } from './ContentMessageTitle'
-import { ContentMessageText } from './ContentMessageText'
-
-<Meta
-  title="Components/Content/ContentMessage"
-  component={ContentMessage}
-  subcomponents={{
-    ContentMessageContainer,
-    ContentMessageIcon,
-    ContentMessageTitle,
-    ContentMessageText,
-  }}
-/>
-
-# ContentMessage
-
-This component renders a message with icon in the given tone.
-It can be used to create a warning or error message inside a section.
-
-### Subcomponents
-
-It is composed of the following components, which can also be used separately for custom purposes:
-
-- ContentMessageContainer
-- ContentMessageIcon
-- ContentMessageTitle
-- ContentMessageText
-
-export const Template = (args) => <ContentMessage {...args} />
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      title: 'No items',
-      text: 'No data available for this view',
-      icon: 'Info',
-    }}
-    argTypes={{
-      icon: {
-        options: ['None', 'Info', 'Warning', 'Error'],
-        mapping: {
-          None: undefined,
-          Info: IconInfo,
-          Warning: IconWarning,
-          Error: IconError,
-        },
-        control: { type: 'select' },
-      },
-      tone: {
-        options: Object.values(Tone),
-        control: { type: 'select' },
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-
-
-<Theme component="content" items={['message']} />
-
-## Tone
-
-<Canvas>
-  <Story name="Primary">
-    <ContentMessage
-      tone={Tone.Primary}
-      icon={IconInfo}
-      title="Primary"
-      text="Text"
-    />
-  </Story>
-  <Story name="Neutral">
-    <ContentMessage
-      tone={Tone.Neutral}
-      icon={IconInfo}
-      title="Neutral"
-      text="Text"
-    />
-  </Story>
-  <Story name="Warning">
-    <ContentMessage
-      tone={Tone.Warning}
-      icon={IconInfo}
-      title="Warning"
-      text="Text"
-    />
-  </Story>
-  <Story name="Critical">
-    <ContentMessage
-      tone={Tone.Critical}
-      icon={IconInfo}
-      title="Critical"
-      text="Text"
-    />
-  </Story>
-  <Story name="Success">
-    <ContentMessage
-      tone={Tone.Success}
-      icon={IconInfo}
-      title="Success"
-      text="Text"
-    />
-  </Story>
-  <Story name="Informative">
-    <ContentMessage
-      tone={Tone.Informative}
-      icon={IconInfo}
-      title="Informative"
-      text="Text"
-    />
-  </Story>
-</Canvas>
diff --git a/src/components/content/ContentMessage/ContentMessage.stories.tsx b/src/components/content/ContentMessage/ContentMessage.stories.tsx
new file mode 100644
index 00000000..56e602b7
--- /dev/null
+++ b/src/components/content/ContentMessage/ContentMessage.stories.tsx
@@ -0,0 +1,82 @@
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconError from '@aboutbits/react-material-icons/dist/IconError'
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../../.storybook/components'
+import { Tone } from '../../types'
+import { ContentMessage } from './ContentMessage'
+
+const meta = {
+  component: ContentMessage,
+  args: {
+    title: 'No items',
+    text: 'No data available for this view',
+    icon: IconInfo,
+  },
+  argTypes: {
+    icon: {
+      options: ['None', 'Info', 'Warning', 'Error'],
+      mapping: {
+        None: undefined,
+        Info: IconInfo,
+        Warning: IconWarning,
+        Error: IconError,
+      },
+      control: { type: 'select' },
+    },
+    tone: {
+      options: Object.values(Tone),
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Subheading>Subcomponents</Subheading>
+          It is composed of the following components, which can also be used
+          separately for custom purposes:
+          <ul>
+            <li>ContentMessageContainer</li>
+            <li>ContentMessageIcon</li>
+            <li>ContentMessageTitle</li>
+            <li>ContentMessageText</li>
+          </ul>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme component="content" items={['message']} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof ContentMessage>
+
+export default meta
+
+type Story = StoryObj<typeof ContentMessage>
+
+export const Default: Story = {}
+
+export const Tones: Story = {
+  render: (args) => (
+    <div className="flex flex-row gap-2">
+      <ContentMessage {...args} tone={Tone.Primary} title="Primary" />
+      <ContentMessage {...args} tone={Tone.Informative} title="Informative" />
+      <ContentMessage {...args} tone={Tone.Success} title="Success" />
+      <ContentMessage {...args} tone={Tone.Warning} title="Warning" />
+      <ContentMessage {...args} tone={Tone.Critical} title="Critical" />
+    </div>
+  ),
+}
diff --git a/src/components/content/ContentMessage/ContentMessage.tsx b/src/components/content/ContentMessage/ContentMessage.tsx
index dbe23098..1569838d 100644
--- a/src/components/content/ContentMessage/ContentMessage.tsx
+++ b/src/components/content/ContentMessage/ContentMessage.tsx
@@ -16,6 +16,11 @@ export type ContentMessageProps = ClassNameProps &
     iconProps?: Partial<ContentMessageIconProps>
   }
 
+/**
+ *
+ * This component renders a message with icon in the given tone. It can
+ * be used to create a warning or error message inside a section.
+ */
 export function ContentMessage({
   className,
   icon,
diff --git a/src/components/content/DescriptionItem/DescriptionItem.stories.mdx b/src/components/content/DescriptionItem/DescriptionItem.stories.mdx
deleted file mode 100644
index 54881f89..00000000
--- a/src/components/content/DescriptionItem/DescriptionItem.stories.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Theme } from '../../../../.storybook/components'
-import { Section, SectionContainer, SectionContent } from '../../section'
-import { DescriptionItem } from './DescriptionItem'
-import { DescriptionItemContainer } from './DescriptionItemContainer'
-import { DescriptionItemTitle } from './DescriptionItemTitle'
-import { DescriptionItemContent } from './DescriptionItemContent'
-
-<Meta
-  title="Components/Content/DescriptionItem"
-  component={DescriptionItem}
-  subcomponents={{
-    DescriptionItemContainer,
-    DescriptionItemTitle,
-    DescriptionItemContent,
-  }}
-/>
-
-# DescriptionItem
-
-The DescriptionItem displays read only information with HTML description list element (`dl`) tag.
-
-The `contentProps.alignVertical` option is useful to align the content to the input field when the component is placed inside a form.
-
-### Subcomponents
-
-It is composed of the following components, which can also be used separately for custom purposes:
-
-- DescriptionItemContainer
-- DescriptionItemTitle
-- DescriptionItemContent
-
-export const Template = ({ title, content, hideIfEmpty }) => (
-  <DescriptionItem title={title} content={content} hideIfEmpty={hideIfEmpty} />
-)
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{ title: 'Name', content: 'John Doe', hideIfEmpty: false }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-
-
-<Theme
-  component="content"
-  items={['descriptionItem', 'descriptionItemTitle']}
-/>
-
-## Example: Usage of `hideIfEmpty`
-
-<Canvas>
-  <Story
-    name="Hide if empty"
-    args={{ title: 'Name', content: null, hideIfEmpty: true }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Example: Usage within Section
-
-<Canvas>
-  <Story name="Usage within Section">
-    <Section>
-      <SectionContainer>
-        <SectionContent>
-          <DescriptionItem content="Name" title="John Doe" />
-        </SectionContent>
-      </SectionContainer>
-    </Section>
-  </Story>
-</Canvas>
diff --git a/src/components/content/DescriptionItem/DescriptionItem.stories.tsx b/src/components/content/DescriptionItem/DescriptionItem.stories.tsx
new file mode 100644
index 00000000..cf32ef6b
--- /dev/null
+++ b/src/components/content/DescriptionItem/DescriptionItem.stories.tsx
@@ -0,0 +1,71 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../../.storybook/components'
+import { Section, SectionContainer, SectionContent } from '../../section'
+import { DescriptionItem } from './DescriptionItem'
+
+const meta = {
+  component: DescriptionItem,
+  args: {
+    title: 'Name',
+    content: 'John Doe',
+    hideIfEmpty: false,
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Subheading>Subcomponents</Subheading>
+          It is composed of the following components, which can also be used
+          separately for custom purposes:
+          <ul>
+            <li>DescriptionItemContainer</li>
+            <li>DescriptionItemTitle</li>
+            <li>DescriptionItemContent</li>
+          </ul>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme
+            component="content"
+            items={['descriptionItem', 'descriptionItemTitle']}
+          />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof DescriptionItem>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const HideIfEmpty: Story = {
+  args: {
+    hideIfEmpty: true,
+    content: null,
+  },
+}
+
+export const UsageWithSection: Story = {
+  render: (args) => (
+    <Section>
+      <SectionContainer>
+        <SectionContent>
+          <DescriptionItem {...args} />
+        </SectionContent>
+      </SectionContainer>
+    </Section>
+  ),
+}
diff --git a/src/components/content/DescriptionItem/DescriptionItem.tsx b/src/components/content/DescriptionItem/DescriptionItem.tsx
index c03a12b3..063db19a 100644
--- a/src/components/content/DescriptionItem/DescriptionItem.tsx
+++ b/src/components/content/DescriptionItem/DescriptionItem.tsx
@@ -39,6 +39,10 @@ export type DescriptionItemProps = ClassNameProps & {
       }
   )
 
+/**
+ * The DescriptionItem displays read only information with HTML description list element (`dl`) tag.
+ * The `contentProps.alignVertical` option is useful to align the content to the input field when the component is placed inside a form.
+ */
 export function DescriptionItem({
   title,
   className,
diff --git a/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx b/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx
deleted file mode 100644
index b89250f9..00000000
--- a/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Theme } from '../../../../.storybook/components'
-import { LoadingDescriptionItem } from './LoadingDescriptionItem'
-
-<Meta
-  title="Components/Content/LoadingDescriptionItem"
-  component={LoadingDescriptionItem}
-/>
-
-# LoadingDescriptionItem
-
-This component is used to show a loading [DescriptionItem](/docs/components-content-descriptionitem--docs).
-
-export const Template = ({ ...args }) => <LoadingDescriptionItem {...args} />
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-
-
-<Theme component="content" items={['loadingDescriptionItem']} />
diff --git a/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.tsx b/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.tsx
new file mode 100644
index 00000000..8931c991
--- /dev/null
+++ b/src/components/content/DescriptionItem/LoadingDescriptionItem.stories.tsx
@@ -0,0 +1,35 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../../.storybook/components'
+import { LoadingDescriptionItem } from './LoadingDescriptionItem'
+
+const meta = {
+  component: LoadingDescriptionItem,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme component="content" items={['loadingDescriptionItem']} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof LoadingDescriptionItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/components/content/DescriptionItem/LoadingDescriptionItem.tsx b/src/components/content/DescriptionItem/LoadingDescriptionItem.tsx
index b847bdee..ce106c61 100644
--- a/src/components/content/DescriptionItem/LoadingDescriptionItem.tsx
+++ b/src/components/content/DescriptionItem/LoadingDescriptionItem.tsx
@@ -4,6 +4,9 @@ import { useTheme } from '../../../framework'
 import { LoadingBar } from '../../loading'
 import { DescriptionItem as DescriptionItem } from './DescriptionItem'
 
+/**
+ * This component is used to show a loading [DescriptionItem](/docs/components-content-descriptionitem--docs).
+ */
 export function LoadingDescriptionItem({
   className,
 }: {