diff --git a/.storybook/addons/yaml-addon/register.js b/.storybook/addons/yaml-addon/register.js
index 03188c701..f56759513 100644
--- a/.storybook/addons/yaml-addon/register.js
+++ b/.storybook/addons/yaml-addon/register.js
@@ -20,6 +20,7 @@ const YamlPanel = () => {
                 lineWidth: -1,
                 forceQuotes: true,
                 skipInvalid: true,
+                noRefs: true,
             }),
         [params],
     );
diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-chromium-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-chromium-linux.png
index 124acd50d..53fcc23a1 100644
Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-chromium-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-chromium-linux.png differ
diff --git a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-webkit-linux.png b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-webkit-linux.png
index f212cbb97..c0aec63f6 100644
Binary files a/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-webkit-linux.png and b/src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-webkit-linux.png differ
diff --git a/src/components/Button/__stories__/Button.stories.scss b/src/components/Button/__stories__/Button.stories.scss
new file mode 100644
index 000000000..3917a91aa
--- /dev/null
+++ b/src/components/Button/__stories__/Button.stories.scss
@@ -0,0 +1,12 @@
+@import '../../../../styles/variables.scss';
+
+.pc-Grid {
+    section {
+        border-radius: $indentXXS;
+    }
+
+    .col {
+        display: flex;
+        align-items: center;
+    }
+}
diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
index ea4f135ce..a7e4e176d 100644
--- a/src/components/Button/__stories__/Button.stories.tsx
+++ b/src/components/Button/__stories__/Button.stories.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-
 import {Meta, StoryFn} from '@storybook/react';
 
-import {Col, Row} from '../../../grid';
+import {Col, Grid, Row} from '../../../grid';
 import Button, {ButtonProps} from '../Button';
 
 import data from './data.json';
 
+import './Button.stories.scss';
+
 export default {
     component: Button,
     title: 'Components/Links and buttons/Button',
@@ -31,7 +31,7 @@ const SizesTemplate: StoryFn<ButtonProps> = (args) => (
     </Row>
 );
 const ThemesSizesTemplate: StoryFn<ButtonProps> = (args) => (
-    <React.Fragment>
+    <Grid>
         <Row>
             <Col />
             <Col>s</Col>
@@ -55,11 +55,11 @@ const ThemesSizesTemplate: StoryFn<ButtonProps> = (args) => (
         <SizesTemplate {...args} theme="flat-danger" />
         <SizesTemplate {...args} theme="flat-secondary" />
         <SizesTemplate {...args} theme="normal-contrast" />
-        <section style={{color: '#3a74ff'}}>
+        <section style={{color: '#fff', background: '#3a74ff'}}>
             <SizesTemplate {...args} theme="outlined-contrast" />
             <SizesTemplate {...args} theme="flat-contrast" />
         </section>
-    </React.Fragment>
+    </Grid>
 );
 
 const WidthTemplate: StoryFn<ButtonProps> = (args) => (
diff --git a/src/components/Title/__stories__/Title.stories.tsx b/src/components/Title/__stories__/Title.stories.tsx
index 99ac50504..d00d22f16 100644
--- a/src/components/Title/__stories__/Title.stories.tsx
+++ b/src/components/Title/__stories__/Title.stories.tsx
@@ -18,50 +18,19 @@ const SizesTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => {
 
     return (
         <div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.l,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.m,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.s,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.xs,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
+            {Object.entries(data.sizes).map(([size, props]) => (
+                <div key={size} style={{paddingBottom: '64px'}}>
+                    <Title
+                        {...args}
+                        title={
+                            {
+                                ...props,
+                                ...titleItemObjectProps,
+                            } as TitleItemProps
+                        }
+                    />
+                </div>
+            ))}
         </div>
     );
 };
diff --git a/src/components/Title/__stories__/data.json b/src/components/Title/__stories__/data.json
index 181dd2cb3..6f16ede75 100644
--- a/src/components/Title/__stories__/data.json
+++ b/src/components/Title/__stories__/data.json
@@ -25,21 +25,25 @@
     }
   },
   "sizes": {
-    "xs": {
-      "text": "Size XS",
-      "textSize": "xs"
-    },
-    "s": {
-      "text": "Size S",
-      "textSize": "s"
+    "l": {
+      "text": "Size L",
+      "textSize": "l"
     },
     "m": {
       "text": "Size M",
       "textSize": "m"
     },
-    "l": {
-      "text": "Size L",
-      "textSize": "l"
+    "sm": {
+      "text": "Size SM",
+      "textSize": "sm"
+    },
+    "s": {
+      "text": "Size S",
+      "textSize": "s"
+    },
+    "xs": {
+      "text": "Size XS",
+      "textSize": "xs"
     }
   }
 }