diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index d99263ca39..bf5b855824 100644
--- a/src/components/Card/README.md
+++ b/src/components/Card/README.md
@@ -26,11 +26,11 @@ This parameter is used to specify the theme style of the card. It determines the
 
 By specifying different theme values, you can customize the visual appearance of the `Card` component to match the desired style and purpose.
 
-- `normal` - represents the normal/default theme of the card.
-- `info` - represents the theme for displaying informational content.
-- `success` - represents the theme for displaying positive/affirmative content.
-- `warning` - represents the theme for displaying warning or cautionary content.
-- `danger` - represents the theme for displaying content related to danger or critical situations.
+- `normal`: represents the normal/default theme of the card.
+- `info`: represents the theme for displaying informational content.
+- `success`: represents the theme for displaying positive/affirmative content.
+- `warning`: represents the theme for displaying warning or cautionary content.
+- `danger`: represents the theme for displaying content related to danger or critical situations.
 
 <!--LANDING_BLOCK
 <ExampleBlock
@@ -65,9 +65,9 @@ LANDING_BLOCK-->
 
 This parameter is used to define the type of the `Card` component. It allows you to customize the appearance and behavior of the card.
 
-- `container` - represents a card that acts as a container for other elements. It provides a structured layout for content.
-- `action` - represents a card with an interactive element, such as a button, that triggers an action when clicked.
-- `selection` - represents a card that can be selected or clicked to perform a specific action.
+- `container`: represents a card that acts as a container for other elements. It provides a structured layout for content.
+- `action`: represents a card with an interactive element, such as a button, that triggers an action when clicked.
+- `selection`: represents a card that can be selected or clicked to perform a specific action.
 
 <!--LANDING_BLOCK
 <ExampleBlock
diff --git a/src/components/Card/__stories__/Card.stories.scss b/src/components/Card/__stories__/Card.stories.scss
deleted file mode 100644
index 1b0bc42afb..0000000000
--- a/src/components/Card/__stories__/Card.stories.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.card-stories {
-    width: 120px;
-    height: 120px;
-}
-
-.card-content-stories {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-}
diff --git a/src/components/Card/__stories__/Card.stories.tsx b/src/components/Card/__stories__/Card.stories.tsx
index d940aff30d..e458c9dbb9 100644
--- a/src/components/Card/__stories__/Card.stories.tsx
+++ b/src/components/Card/__stories__/Card.stories.tsx
@@ -1,25 +1,139 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Card} from '../Card';
-import type {CardProps} from '../Card';
-
-import {CardShowcase} from './CardShowcase';
-
-import './Card.stories.scss';
 
 export default {
     title: 'Components/Data Display/Card',
     component: Card,
 } as Meta;
 
-const DefaultTemplate: StoryFn<CardProps> = (args) => (
-    <Card {...args} className="card-stories">
-        <div className="card-content-stories">card&lsquo;s content</div>
-    </Card>
-);
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+    args: {
+        children: 'Content',
+        style: {
+            width: 120,
+            height: 120,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    },
+};
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args} size="m">
+                Size m
+            </Card>
+            <Card {...args} size="l">
+                Size l
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const Theme: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args} view="outlined" theme="normal">
+                Normal
+            </Card>
+            <Card {...args} view="outlined" theme="info">
+                Info
+            </Card>
+            <Card {...args} view="outlined" theme="success">
+                Success
+            </Card>
+            <Card {...args} view="outlined" theme="warning">
+                Warning
+            </Card>
+            <Card {...args} view="outlined" theme="danger">
+                Danger
+            </Card>
+            <Card {...args} view="filled" theme="normal">
+                Normal
+            </Card>
+            <Card {...args} view="filled" theme="info">
+                Info
+            </Card>
+            <Card {...args} view="filled" theme="success">
+                Success
+            </Card>
+            <Card {...args} view="filled" theme="warning">
+                Warning
+            </Card>
+            <Card {...args} view="filled" theme="danger">
+                Danger
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const View: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args} view="clear">
+                Clear
+            </Card>
+            <Card {...args} view="outlined">
+                Outlined
+            </Card>
+            <Card {...args} view="filled">
+                Filled
+            </Card>
+            <Card {...args} view="raised">
+                Raised
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const ActionType: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args}>Default</Card>
+            <Card {...args} disabled>
+                Disabled
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        type: 'action',
+    },
+    name: 'Action Type',
+};
 
-const ShowcaseTemplate: StoryFn<CardProps> = () => <CardShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const SelectionType: Story = {
+    render: (args) => (
+        <Showcase>
+            <Card {...args}>Default</Card>
+            <Card {...args} selected>
+                Selected
+            </Card>
+            <Card {...args} disabled>
+                Disabled
+            </Card>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+        type: 'selection',
+    },
+    name: 'Selection Type',
+};
diff --git a/src/components/Card/__stories__/CardShowcase.scss b/src/components/Card/__stories__/CardShowcase.scss
deleted file mode 100644
index 09482de811..0000000000
--- a/src/components/Card/__stories__/CardShowcase.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.cards-showcase-stories {
-    & .card-showcase-stories:not(:first-child) {
-        margin-top: 12px;
-    }
-}
-
-.card-showcase-stories {
-    width: 100px;
-    height: 100px;
-}
-
-.card-content-showcase-stories {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
diff --git a/src/components/Card/__stories__/CardShowcase.tsx b/src/components/Card/__stories__/CardShowcase.tsx
deleted file mode 100644
index 285cf7611f..0000000000
--- a/src/components/Card/__stories__/CardShowcase.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React from 'react';
-
-import {Card} from '../../../components/Card/Card';
-import type {CardTheme, CardView} from '../../../components/Card/Card';
-import {Showcase} from '../../../demo/Showcase';
-import {ShowcaseItem} from '../../../demo/ShowcaseItem';
-
-import './CardShowcase.scss';
-
-const containerViews: CardView[] = ['outlined', 'filled'];
-const themes: CardTheme[] = ['normal', 'info', 'success', 'warning', 'danger'];
-
-export function CardShowcase() {
-    return (
-        <Showcase title="Card" className="cards-showcase-stories">
-            <ShowcaseItem title="size">
-                <Card size="m" view="raised" type="container" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        size: m
-                        <br />
-                        type: container
-                        <br />
-                        view: raised
-                    </div>
-                </Card>
-                <Card size="l" view="raised" type="container" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        size: l
-                        <br />
-                        type: container
-                        <br />
-                        view: raised
-                    </div>
-                </Card>
-            </ShowcaseItem>
-            <ShowcaseItem title="type">
-                <Card view="outlined" type="selection" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">selection</div>
-                </Card>
-                <Card
-                    view="outlined"
-                    type="action"
-                    className="card-showcase-stories"
-                    onClick={() => alert(':wave: hey')}
-                >
-                    <div className="card-content-showcase-stories">action with onClick</div>
-                </Card>
-                <Card view="outlined" type="container" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">container</div>
-                </Card>
-            </ShowcaseItem>
-            <ShowcaseItem title="view">
-                <Card view="outlined" type="selection" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: selection
-                        <br />
-                        view: outlined
-                    </div>
-                </Card>
-                <Card view="clear" type="selection" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: selection
-                        <br />
-                        view: clear
-                    </div>
-                </Card>
-                <Card view="outlined" type="container" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: container
-                        <br />
-                        view: outlined
-                    </div>
-                </Card>
-                <Card view="filled" type="container" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: container
-                        <br />
-                        view: filled
-                    </div>
-                </Card>
-                <Card view="raised" type="container" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: container
-                        <br />
-                        view: raised
-                    </div>
-                </Card>
-            </ShowcaseItem>
-            <ShowcaseItem title="theme">
-                {containerViews.map((view) =>
-                    themes.map((theme) => (
-                        <Card
-                            key={theme}
-                            view={view}
-                            type="container"
-                            className="card-showcase-stories"
-                            theme={theme}
-                        >
-                            <div className="card-content-showcase-stories">
-                                type: container
-                                <br />
-                                view: {view}
-                                <br />
-                                theme: {theme}
-                            </div>
-                        </Card>
-                    )),
-                )}
-            </ShowcaseItem>
-            <ShowcaseItem title="selected">
-                <Card selected={true} type="selection" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: selection
-                        <br />
-                        selected: true
-                    </div>
-                </Card>
-                <Card selected={false} type="selection" className="card-showcase-stories">
-                    <div className="card-content-showcase-stories">
-                        type: selection
-                        <br />
-                        selected: false
-                    </div>
-                </Card>
-            </ShowcaseItem>
-            <ShowcaseItem title="disabled">
-                <Card
-                    disabled={true}
-                    type="selection"
-                    className="card-showcase-stories"
-                    onClick={() => alert(':wave: hey')}
-                >
-                    <div className="card-content-showcase-stories">
-                        type: selection
-                        <br />
-                        disabled: true
-                    </div>
-                </Card>
-                <Card
-                    disabled={false}
-                    type="selection"
-                    className="card-showcase-stories"
-                    onClick={() => alert(':wave: hey')}
-                >
-                    <div className="card-content-showcase-stories">
-                        type: selection
-                        <br />
-                        disabled: false
-                    </div>
-                </Card>
-                <Card
-                    disabled={true}
-                    type="action"
-                    className="card-showcase-stories"
-                    onClick={() => alert(':wave: hey')}
-                >
-                    <div className="card-content-showcase-stories">
-                        type: action
-                        <br />
-                        disabled: true
-                    </div>
-                </Card>
-                <Card
-                    disabled={false}
-                    type="action"
-                    className="card-showcase-stories"
-                    onClick={() => alert(':wave: hey')}
-                >
-                    <div className="card-content-showcase-stories">
-                        type: action
-                        <br />
-                        disabled: false
-                    </div>
-                </Card>
-            </ShowcaseItem>
-        </Showcase>
-    );
-}
diff --git a/src/components/Card/__stories__/Docs.mdx b/src/components/Card/__stories__/Docs.mdx
new file mode 100644
index 0000000000..0720508220
--- /dev/null
+++ b/src/components/Card/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Card.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Icon/__stories__/Docs.mdx b/src/components/Icon/__stories__/Docs.mdx
new file mode 100644
index 0000000000..01484f2491
--- /dev/null
+++ b/src/components/Icon/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Icon.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Icon/__stories__/Icon.stories.tsx b/src/components/Icon/__stories__/Icon.stories.tsx
index f5b388954b..a8505a7f40 100644
--- a/src/components/Icon/__stories__/Icon.stories.tsx
+++ b/src/components/Icon/__stories__/Icon.stories.tsx
@@ -1,18 +1,40 @@
 import React from 'react';
 
-import {Gear} from '@gravity-ui/icons';
-import type {Meta, StoryFn} from '@storybook/react';
+import {Envelope, Gear, Rocket} from '@gravity-ui/icons';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Icon} from '../Icon';
-import type {IconProps} from '../Icon';
+
+const icons = [Gear, Envelope, Rocket].reduce((acc, fn) => {
+    acc[fn.name] = fn;
+    return acc;
+}, {} as {[key: string]: React.FunctionComponent});
 
 export default {
     title: 'Components/Data Display/Icon',
     component: Icon,
+    argTypes: {
+        data: {
+            options: Object.keys(icons),
+            mapping: icons,
+        },
+    },
+    args: {
+        data: 'Gear',
+    },
 } as Meta;
 
-const DefaultTemplate: StoryFn<IconProps> = (args) => <Icon {...args} />;
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-    data: Gear,
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {};
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Icon {...args} size={16} />
+            <Icon {...args} size={24} />
+            <Icon {...args} size={36} />
+        </Showcase>
+    ),
 };
diff --git a/src/components/Label/README.md b/src/components/Label/README.md
index 34b6913f5e..4c905de93d 100644
--- a/src/components/Label/README.md
+++ b/src/components/Label/README.md
@@ -188,7 +188,7 @@ LANDING_BLOCK-->
 
 `disabled` - no interactions allowed
 
-`interactive` - hoverable
+`interactive` - hoverable, automatically set to true, if `type` is `"copy"` or passed `onClick` property
 
 <!--LANDING_BLOCK
 
diff --git a/src/components/Label/__stories__/Label.new.stories.tsx b/src/components/Label/__stories__/Label.new.stories.tsx
deleted file mode 100644
index bd8f1b267a..0000000000
--- a/src/components/Label/__stories__/Label.new.stories.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-
-import type {Meta, StoryFn} from '@storybook/react';
-
-import {Label} from '../Label';
-
-export default {
-    title: 'Components/Data display/Label',
-    id: 'components/data display/Label',
-    args: {
-        children: 'Label',
-        theme: 'normal',
-        type: 'default',
-        size: 's',
-        disabled: false,
-        interactive: false,
-    },
-    argTypes: {
-        theme: {
-            options: ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'clear'],
-            control: {type: 'select'},
-        },
-        type: {
-            options: ['default', 'copy', 'close'],
-            control: {type: 'select'},
-        },
-        size: {
-            options: ['xs', 's', 'm'],
-            control: {type: 'radio'},
-        },
-        disabled: {
-            control: 'boolean',
-        },
-        interactive: {
-            control: 'boolean',
-        },
-        children: {
-            control: {type: 'text'},
-        },
-        value: {
-            options: [undefined, 'With value'],
-            control: {type: 'radio'},
-        },
-    },
-    parameters: {
-        order: -100,
-    },
-} as Meta;
-
-export const Playground: StoryFn = (args) => {
-    return <Label {...args} />;
-};
-Playground.storyName = 'Label';
diff --git a/src/components/Label/__stories__/Label.stories.scss b/src/components/Label/__stories__/Label.stories.scss
deleted file mode 100644
index 26aa9e5947..0000000000
--- a/src/components/Label/__stories__/Label.stories.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.label-stories {
-    display: flex;
-
-    .yc-label {
-        margin-left: 10px;
-    }
-}
diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
index b8ab127bdd..da7ca73507 100644
--- a/src/components/Label/__stories__/Label.stories.tsx
+++ b/src/components/Label/__stories__/Label.stories.tsx
@@ -1,177 +1,141 @@
 import React from 'react';
 
-import {Check, Gear} from '@gravity-ui/icons';
-import type {Meta, StoryFn} from '@storybook/react';
+import {Check} from '@gravity-ui/icons';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Icon as IconComponent} from '../../Icon';
 import {Link} from '../../Link';
-import {cn} from '../../utils/cn';
 import {Label} from '../Label';
-import type {LabelProps} from '../Label';
 
 import {LabelShowcase} from './LabelShowcase';
 
-import './Label.stories.scss';
-
-const b = cn('label-stories');
-
-const icons = {
-    '-': undefined,
-    TickIcon: <IconComponent size={12} data={Check} />,
-    GearIcon: <IconComponent size={12} data={Gear} />,
-};
+const iconSizeMap = {xs: 12, s: 14, m: 16} as const;
 
 export default {
     title: 'Components/Data Display/Label',
     component: Label,
-    args: {
-        children: '',
-    },
-    argTypes: {
-        icon: {
-            control: {type: 'select'},
-            mapping: icons,
-            options: Object.keys(icons),
-        },
-        children: {
-            control: {type: 'text'},
-        },
-        copyText: {
-            control: {type: 'text'},
-            defaultValue: '',
-        },
-    },
 } as Meta;
 
-const Template: StoryFn<LabelProps> = (args) => <Label {...args} />;
+type Story = StoryObj<typeof Label>;
 
-export const Default = Template.bind({});
+export const Default: Story = {
+    args: {
+        children: 'Content',
+    },
+};
 
-Default.args = {
-    children: 'Default',
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Label {...args} size="xs">
+                Size xs
+            </Label>
+            <Label {...args} size="s">
+                Size s
+            </Label>
+            <Label {...args} size="m">
+                Size m
+            </Label>
+        </Showcase>
+    ),
 };
 
-const ThemeTemplate: StoryFn<LabelProps> = (args) => {
-    return (
-        <div className={b()}>
+export const Theme: Story = {
+    render: (args) => (
+        <Showcase>
             <Label {...args} theme="normal">
-                normal
+                Normal
             </Label>
             <Label {...args} theme="info">
-                info
+                Info
             </Label>
             <Label {...args} theme="success">
-                success
+                Success
             </Label>
             <Label {...args} theme="warning">
-                warning
+                Warning
             </Label>
             <Label {...args} theme="danger">
-                danger
+                Danger
             </Label>
             <Label {...args} theme="unknown">
-                unknown
+                Unknown
             </Label>
             <Label {...args} theme="clear">
-                clear
+                Clear
             </Label>
-        </div>
-    );
+        </Showcase>
+    ),
 };
 
-export const Theme = ThemeTemplate.bind({});
+export const Icon: Story = {
+    render: (args) => {
+        const size = args.size ?? 'xs';
+        const iconSize = iconSizeMap[size];
 
-const SizeTemplate: StoryFn<LabelProps> = (args) => {
-    return (
-        <div className={b()}>
-            <Label {...args} size="xs">
-                xs
-            </Label>
-            <Label {...args} size="s">
-                s
+        return (
+            <Showcase>
+                <Label {...args} icon={<IconComponent data={Check} size={iconSize} />}>
+                    {undefined}
+                </Label>
+                <Label {...args} icon={<IconComponent data={Check} size={iconSize} />} />
+            </Showcase>
+        );
+    },
+    args: {
+        ...Default.args,
+    },
+};
+
+export const Interactive: Story = {
+    render: (args) => (
+        <Showcase>
+            <Label {...args} interactive>
+                Interactive
             </Label>
-            <Label {...args} size="m">
-                m
+            <Label {...args} onClick={() => {}}>
+                With onClick
             </Label>
-        </div>
-    );
+        </Showcase>
+    ),
 };
 
-export const Size = SizeTemplate.bind({});
+export const Copy: Story = {
+    args: {
+        ...Default.args,
+        type: 'copy',
+        copyText: "I'm copied text",
+    },
+};
 
-const IconTemplate: StoryFn<LabelProps> = (args) => {
-    return <Label {...args} />;
+export const Close: Story = {
+    args: {
+        ...Default.args,
+        type: 'close',
+    },
 };
 
-export const Icon = IconTemplate.bind({});
+export const Value: Story = {
+    args: {
+        ...Default.args,
+        children: 'Key',
+        value: 'Value',
+    },
+};
 
-Icon.args = {
-    icon: 'TickIcon',
+export const LinkWrapper: Story = {
+    render: (args) => (
+        <Link href="https://gravity-ui.com/" target="_blank">
+            <Label {...args} />
+        </Link>
+    ),
+    args: {
+        ...Default.args,
+    },
 };
 
-export const Interactions: StoryFn<LabelProps> = (args) => (
-    <div style={{display: 'flex', flexFlow: 'column', gap: 10}}>
-        <div>
-            <Label {...args}>No interactions</Label>
-        </div>
-        <div>
-            <Label
-                {...args}
-                onClick={() => {
-                    console.log('click');
-                }}
-            >
-                Clickable
-            </Label>
-        </div>
-        <div>
-            <Label {...args} type={'copy'} copyText={'copyText'}>
-                Copy
-            </Label>
-        </div>
-        <div>
-            <Label
-                {...args}
-                type={'close'}
-                onClose={() => {
-                    console.log('close');
-                }}
-            >
-                Close
-            </Label>
-        </div>
-        <div>
-            <Link href={'https://ya.ru'} target={'_blank'}>
-                <Label {...args}>Link</Label>
-            </Link>
-        </div>
-        <div>
-            <Link href={'https://ya.ru'} target={'_blank'}>
-                <Label {...args} interactive>
-                    Link interactive
-                </Label>
-            </Link>
-        </div>
-        <div>
-            <Label
-                {...args}
-                type={'close'}
-                theme={'unknown'}
-                onClick={() => {
-                    console.log('click');
-                }}
-                onClose={() => {
-                    console.log('close');
-                }}
-            >
-                Click and Close
-            </Label>
-        </div>
-    </div>
-);
-
-const ShowcaseTemplate: StoryFn = () => <LabelShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
-Showcase.args = {
-    interactive: true,
+export const ShowcaseStory: Story = {
+    render: () => <LabelShowcase />,
+    name: 'Showcase',
 };
diff --git a/src/components/Label/__stories__/LabelShowcase.scss b/src/components/Label/__stories__/LabelShowcase.scss
index 7bb299d5dd..4389ce63d2 100644
--- a/src/components/Label/__stories__/LabelShowcase.scss
+++ b/src/components/Label/__stories__/LabelShowcase.scss
@@ -1,8 +1,15 @@
+@use '../../../../styles/mixins';
+
 .label-showcase {
     .grid {
         display: grid;
         gap: 30px;
     }
+
+    .header {
+        @include mixins.text-header-1;
+    }
+
     .section {
         display: grid;
         grid-template-columns: 1fr 1fr;
diff --git a/src/components/Label/__stories__/LabelShowcase.tsx b/src/components/Label/__stories__/LabelShowcase.tsx
index f8183f5fb1..847f7cdd11 100644
--- a/src/components/Label/__stories__/LabelShowcase.tsx
+++ b/src/components/Label/__stories__/LabelShowcase.tsx
@@ -78,11 +78,13 @@ export function LabelShowcase(args: LabelProps) {
             >
                 <div></div>
                 {themes.map((theme) => (
-                    <h1 key={`${theme}-header`}>{theme}</h1>
+                    <div key={`${theme}-header`} className="header">
+                        {theme}
+                    </div>
                 ))}
                 {sizes.map((size) => (
                     <React.Fragment key={size}>
-                        <h1>{size}</h1>
+                        <div className="header">{size}</div>
                         {themes.map((theme) => (
                             <div key={theme} className="section">
                                 {section({theme, size, ...args})}