diff --git a/src/components/BalancedMasonry/BalancedMasonry.tsx b/src/components/BalancedMasonry/BalancedMasonry.tsx
index 17121f3ba..caab82de4 100644
--- a/src/components/BalancedMasonry/BalancedMasonry.tsx
+++ b/src/components/BalancedMasonry/BalancedMasonry.tsx
@@ -3,14 +3,14 @@ import React, {ReactNode, useCallback, useContext, useEffect, useRef, useState}
 import _ from 'lodash';
 
 import {SSRContext} from '../../context/ssrContext';
-import {WithChildren} from '../../models';
-import {block} from '../../utils';
+import {QAProps, WithChildren} from '../../models';
+import {block, getQaAttrubutes} from '../../utils';
 
 import './BalancedMasonry.scss';
 
 const b = block('BalancedMasonry');
 
-export interface BalancedMasonryProps {
+export interface BalancedMasonryProps extends QAProps {
     className: string;
     columnClassName: string;
     children: ReactNode[];
@@ -20,7 +20,8 @@ export interface BalancedMasonryProps {
 }
 
 const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
-    const {className, columnClassName, children = [], breakpointCols} = props;
+    const {className, columnClassName, children = [], breakpointCols, qa} = props;
+    const qaAttributes = getQaAttrubutes(qa, 'column');
     const {isServer} = useContext(SSRContext);
     const getCurrentColumnsCount = useCallback(() => {
         const breakpoints = Object.entries(breakpointCols).sort(
@@ -121,7 +122,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
     }, [balanceColumns, children]);
 
     return (
-        <div className={b(null, className)}>
+        <div className={b(null, className)} data-qa={qa}>
             <div className={b('hidden-container')} style={{width: `${100 / columnCount}%`}}>
                 <div ref={containerRef} className={b('hidden-list')}>
                     {children}
@@ -133,6 +134,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
                     key={index}
                     className={columnClassName}
                     style={{width: `${100 / columnCount}%`}}
+                    data-qa={qaAttributes.column}
                 >
                     {columnElements}
                 </div>
diff --git a/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx b/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx
new file mode 100644
index 000000000..ecc2eb002
--- /dev/null
+++ b/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+
+import {render, screen, waitFor} from '@testing-library/react';
+import {omit} from 'lodash';
+
+import {testCustomClassName} from '../../../../test-utils/shared/common';
+import {CardBase} from '../../../components';
+import {getQaAttrubutes} from '../../../utils';
+import BalancedMasonry, {BalancedMasonryProps} from '../BalancedMasonry';
+
+const balancedMasonry = {
+    className: 'my-class',
+    columnClassName: 'my-column-class',
+    breakpointCols: {
+        1440: 3,
+        1441: 2,
+    },
+    qa: 'balanced-mansory-component',
+    children: [
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    ],
+};
+
+const {children: childrenToRender} = balancedMasonry;
+const balancedMasonryChildren = childrenToRender.map((child, index) => (
+    <CardBase key={index} className="balanced-masonry-stories__card-base">
+        <CardBase.Content>{child}</CardBase.Content>
+    </CardBase>
+));
+
+const qaAttributes = getQaAttrubutes(balancedMasonry.qa, 'column');
+
+describe('BalancedMasonry', () => {
+    test('render BalancedMasonry by default', async () => {
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        const component = screen.getByTestId(balancedMasonry.qa);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+
+    test('add className to container', () => {
+        testCustomClassName<BalancedMasonryProps>({
+            component: BalancedMasonry,
+            props: {...omit(balancedMasonry, 'children'), children: balancedMasonryChildren},
+        });
+    });
+
+    test('add className to column', async () => {
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        await waitFor(() => {
+            expect(screen.getAllByTestId(qaAttributes.column)[0]).toBeInTheDocument();
+        });
+
+        const components = screen.queryAllByTestId(qaAttributes.column);
+        expect(components[0]).toHaveClass(balancedMasonry.columnClassName);
+    });
+
+    test('render width 1440px', async () => {
+        const width = 1440;
+        Object.defineProperty(document.body, 'clientWidth', {
+            writable: true,
+            configurable: true,
+            value: width,
+        });
+
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        await waitFor(() => {
+            expect(screen.getAllByTestId(qaAttributes.column)[0]).toBeInTheDocument();
+        });
+
+        const components = screen.queryAllByTestId(qaAttributes.column);
+        expect(components.length).toEqual(balancedMasonry.breakpointCols[width]);
+    });
+
+    test('render width 1441px', async () => {
+        const width = 1441;
+        Object.defineProperty(document.body, 'clientWidth', {
+            writable: true,
+            configurable: true,
+            value: width,
+        });
+
+        render(
+            <BalancedMasonry {...omit(balancedMasonry, 'children')}>
+                {balancedMasonryChildren}
+            </BalancedMasonry>,
+        );
+        await waitFor(() => {
+            expect(screen.getAllByTestId(qaAttributes.column)[0]).toBeInTheDocument();
+        });
+
+        const components = screen.queryAllByTestId(qaAttributes.column);
+        expect(components.length).toEqual(balancedMasonry.breakpointCols[width]);
+    });
+});
diff --git a/test-utils/shared/common.tsx b/test-utils/shared/common.tsx
index 0d5028851..59e95d348 100644
--- a/test-utils/shared/common.tsx
+++ b/test-utils/shared/common.tsx
@@ -21,7 +21,7 @@ export const testCustomClassName = <T,>({
     }
 
     const className = 'custom-class-name';
-    render(<Component className={className} {...props} />);
+    render(<Component {...props} className={className} />);
     const anchor = screen.getByTestId(options?.qaId || props.qa);
     expect(anchor).toHaveClass(className);
 };