diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Default-light-chromium-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Default-light-chromium-linux.png
new file mode 100644
index 000000000..c64610d16
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Default-light-chromium-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Default-light-webkit-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Default-light-webkit-linux.png
new file mode 100644
index 000000000..339e22f50
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Default-light-webkit-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Sizes-light-chromium-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Sizes-light-chromium-linux.png
new file mode 100644
index 000000000..f0f0b5c59
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Sizes-light-chromium-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Sizes-light-webkit-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Sizes-light-webkit-linux.png
new file mode 100644
index 000000000..1a2c9c5d6
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Sizes-light-webkit-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Themes-light-chromium-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Themes-light-chromium-linux.png
new file mode 100644
index 000000000..7dada3a3f
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Themes-light-chromium-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Themes-light-webkit-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Themes-light-webkit-linux.png
new file mode 100644
index 000000000..1f059e9fa
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-Themes-light-webkit-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutIcon-light-chromium-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutIcon-light-chromium-linux.png
new file mode 100644
index 000000000..1abee755e
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutIcon-light-chromium-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutIcon-light-webkit-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutIcon-light-webkit-linux.png
new file mode 100644
index 000000000..930487871
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutIcon-light-webkit-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutText-light-chromium-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutText-light-chromium-linux.png
new file mode 100644
index 000000000..3b013db82
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutText-light-chromium-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutText-light-webkit-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutText-light-webkit-linux.png
new file mode 100644
index 000000000..d269a317c
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutText-light-webkit-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutTitle-light-chromium-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutTitle-light-chromium-linux.png
new file mode 100644
index 000000000..ec6bee2f5
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutTitle-light-chromium-linux.png differ
diff --git a/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutTitle-light-webkit-linux.png b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutTitle-light-webkit-linux.png
new file mode 100644
index 000000000..64ad4a207
Binary files /dev/null and b/src/components/ContentList/__snapshots__/ContentList.visual.test.tsx-snapshots/ContentList-render-stories-WithoutTitle-light-webkit-linux.png differ
diff --git a/src/components/ContentList/__stories__/ContentList.mdx b/src/components/ContentList/__stories__/ContentList.mdx
index 0ea6881df..a91980b3a 100644
--- a/src/components/ContentList/__stories__/ContentList.mdx
+++ b/src/components/ContentList/__stories__/ContentList.mdx
@@ -12,10 +12,13 @@ For a detailed usage guide of the ContentList component, see [ContentList Usage]
 
 ## Parameters
 
-- `size?: 's' | 'l'` — Component's size that defines font sizes ('l' by default)
+`size: 's' | 'm' | l'` — Component's size that defines font sizes ('l' by default)
 
 `list: Array` - An Array of items with icon
 - [`icon: string | ImageObjectProps | ReactNode` — Icon](?path=/docs/documentation-types--docs#imageobjectprops---image-property).
 - `title?: string` — Title (with YFM support).
 - `text?: string` — Text (with YFM support)
+
+`theme?: 'default' | 'dark' | 'light'` — Content theme
+
 </StoryTemplate>
diff --git a/src/components/ContentList/__stories__/ContentList.stories.tsx b/src/components/ContentList/__stories__/ContentList.stories.tsx
index c326de527..16b2f4803 100644
--- a/src/components/ContentList/__stories__/ContentList.stories.tsx
+++ b/src/components/ContentList/__stories__/ContentList.stories.tsx
@@ -1,47 +1,83 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
-import {ContentItemProps, ContentListProps} from '../../../models';
+import {blockTransform} from '../../../../.storybook/utils';
+import {ContentListProps, CustomBlock} from '../../../models';
 import ContentList from '../ContentList';
 
 import data from './data.json';
 
-const transformListItem = (item: ContentItemProps) => ({
-    ...item,
-    text: item?.text && yfmTransform(item.text),
-    title: item?.title && yfmTransform(item.title),
-});
+const BACKGROUND_COLOR = '#313538';
 
 export default {
-    args: {list: data.default.content.map(transformListItem), size: 'l'},
     component: ContentList,
     title: 'Components/ContentList',
 } as Meta;
 
 const DefaultTemplate: StoryFn<ContentListProps> = (args) => (
-    <div style={{paddingBottom: '16px'}}>
-        <ContentList {...args} />
+    <div
+        style={{
+            padding: '16px',
+            backgroundColor: args.theme === 'dark' ? BACKGROUND_COLOR : 'transparent',
+        }}
+    >
+        <ContentList {...(blockTransform(args as unknown as CustomBlock) as ContentListProps)} />
     </div>
 );
 
-const DifferentContentTempalte: StoryFn<ContentListProps> = (args) => (
-    <div style={{paddingBottom: '64px'}}>
-        <h3>Default</h3>
-        <DefaultTemplate {...args} />
-        <h3>Without text</h3>
-        <DefaultTemplate {...args} list={data.withoutText.content.map(transformListItem)} />
-        <h3>Without title</h3>
-        <DefaultTemplate {...args} list={data.withoutTitle.content.map(transformListItem)} />
+const VariousTemplate: StoryFn<Record<number, ContentListProps>> = (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+        {Object.values(args).map((item, index) => (
+            <div
+                key={index}
+                style={{
+                    padding: '8px',
+                    backgroundColor: item.theme === 'dark' ? BACKGROUND_COLOR : 'transparent',
+                }}
+            >
+                <ContentList
+                    {...(blockTransform(item as unknown as CustomBlock) as ContentListProps)}
+                />
+            </div>
+        ))}
     </div>
 );
 
-const DifferentSizeTemplate: StoryFn<ContentListProps> = (args) => (
-    <div>
-        <h1>Size L</h1>
-        <DifferentContentTempalte {...args} size="l" />
-        <h1>Size S</h1>
-        <DifferentContentTempalte {...args} size="s" />
-    </div>
-);
 export const Default = DefaultTemplate.bind({});
-export const Size = DifferentSizeTemplate.bind({});
+export const WithoutText = DefaultTemplate.bind({});
+export const WithoutTitle = DefaultTemplate.bind({});
+export const WithoutIcon = DefaultTemplate.bind({});
+export const Sizes = VariousTemplate.bind({});
+export const Themes = VariousTemplate.bind({});
+
+Default.args = data.default as ContentListProps;
+
+WithoutText.args = data.withoutText as ContentListProps;
+WithoutText.parameters = {
+    controls: {
+        include: Object.keys(data.withoutText),
+    },
+};
+WithoutTitle.args = data.withoutTitle as ContentListProps;
+WithoutTitle.parameters = {
+    controls: {
+        include: Object.keys(data.withoutTitle),
+    },
+};
+WithoutIcon.args = data.withoutIcon as ContentListProps;
+WithoutIcon.parameters = {
+    controls: {
+        include: Object.keys(data.withoutIcon),
+    },
+};
+Themes.args = data.themes as ContentListProps[];
+Themes.parameters = {
+    controls: {
+        include: Object.keys(data.themes),
+    },
+};
+Sizes.args = data.sizes as ContentListProps[];
+Sizes.parameters = {
+    controls: {
+        include: Object.keys(data.sizes),
+    },
+};
diff --git a/src/components/ContentList/__stories__/data.json b/src/components/ContentList/__stories__/data.json
index dfe0f67ad..4a908729c 100644
--- a/src/components/ContentList/__stories__/data.json
+++ b/src/components/ContentList/__stories__/data.json
@@ -1,11 +1,8 @@
 {
-  "centered": {
-    "content": {
-      "centered": true
-    }
-  },
   "default": {
-    "content": [
+    "size": "l",
+    "type": "content",
+    "list": [
       {
         "icon": {
           "light": "/story-assets/icon_1_light.svg",
@@ -33,7 +30,9 @@
     ]
   },
   "withoutText": {
-    "content": [
+    "size": "l",
+    "type": "content",
+    "list": [
       {
         "icon": {
           "light": "/story-assets/icon_3_light.svg",
@@ -58,7 +57,9 @@
     ]
   },
   "withoutTitle": {
-    "content": [
+    "size": "l",
+    "type": "content",
+    "list": [
       {
         "icon": {
           "light": "/story-assets/icon_2_light.svg",
@@ -81,5 +82,114 @@
         "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
       }
     ]
+  },
+  "sizes": [
+    {
+      "size": "s",
+      "type": "content",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Size S",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "m",
+      "type": "content",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Size M",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "l",
+      "type": "content",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Size L",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    }
+  ],
+  "themes": [
+    {
+      "size": "l",
+      "type": "content",
+      "theme": "default",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Lorem ipsum [quis nostrud](https://example.com)",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "l",
+      "type": "content",
+      "theme": "dark",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Lorem ipsum [quis nostrud](https://example.com)",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "l",
+      "type": "content",
+      "theme": "light",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Lorem ipsum [quis nostrud](https://example.com)",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    }
+  ],
+  "withoutIcon": {
+    "size": "l",
+    "type": "content",
+    "list": [
+      {
+        "title": "Lorem ipsum [quis nostrud](https://example.com)",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      {
+        "title": "Lorem ipsum [quis nostrud](https://example.com)",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      {
+        "title": "Lorem ipsum [quis nostrud](https://example.com)",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      }
+    ]
   }
 }
diff --git a/src/components/ContentList/__tests__/ContentList.visual.test.tsx b/src/components/ContentList/__tests__/ContentList.visual.test.tsx
new file mode 100644
index 000000000..a081d5378
--- /dev/null
+++ b/src/components/ContentList/__tests__/ContentList.visual.test.tsx
@@ -0,0 +1,41 @@
+import {test} from '../../../../playwright/core/index';
+
+import {Default, Sizes, Themes, WithoutIcon, WithoutText, WithoutTitle} from './helpers';
+
+test.describe('ContentList', () => {
+    test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Default />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithoutText>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithoutText />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithoutTitle>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithoutTitle />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithoutIcon>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithoutIcon />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <Sizes>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Sizes />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <Themes>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Themes />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+});
diff --git a/src/components/ContentList/__tests__/helpers.tsx b/src/components/ContentList/__tests__/helpers.tsx
new file mode 100644
index 000000000..4160e4de2
--- /dev/null
+++ b/src/components/ContentList/__tests__/helpers.tsx
@@ -0,0 +1,6 @@
+import {composeStories} from '@storybook/react';
+
+import * as ContentListStories from '../__stories__/ContentList.stories';
+
+export const {Default, WithoutText, WithoutTitle, WithoutIcon, Sizes, Themes} =
+    composeStories(ContentListStories);