diff --git a/changelog.md b/changelog.md
index d5a11b9028..c489411ef6 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,10 @@
 # 5.*.* - **.**.2024
 
+**What's New**
+* [Alert]: Added support for size theming
+
+# 5.*.* - **.**.2024
+
 **What's New**
 * [FlexRow][Breaking Change]: Only for `@epam/loveship` package. Now spacing default value works based on `columnGap` props. It shouldn't affect general cases, but previous spacing implementation require additional hack when it was needed to add negative margin value for container to remove corner paddings in multiline case. Now this hack should be removed, since `columnGap` implementation doesn't produce such bug for multiline.
 * [useTableState][Breaking Change]: columns prop is removed, since it's not needed now. Just remove it from `useTableState` provided props.
diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss
index 68d983a429..ba6a694d0a 100644
--- a/epam-assets/theme/variables/6px_grid.scss
+++ b/epam-assets/theme/variables/6px_grid.scss
@@ -313,4 +313,15 @@
             --uui-vertical-padding: 3px;
         }
     }
+
+    .uui-alert {
+        &.uui-size-36 {
+            --uui-alert-indicator-border-width: 3px;
+            --uui-alert-gap-h: 12px;
+            --uui-alert-gap-v: 3px;
+            --uui-alert-padding-h: 9px;
+            --uui-alert-padding-v: 3px;
+            --uui-alert-caption-gap-h: 9px;
+        }
+    }
 }
diff --git a/uui/components/overlays/Alert.module.scss b/uui/components/overlays/Alert.module.scss
index 04312e5fbf..bcd07d710b 100644
--- a/uui/components/overlays/Alert.module.scss
+++ b/uui/components/overlays/Alert.module.scss
@@ -5,79 +5,99 @@
     --uui-alert-bg: var(--uui-color-10);
     --uui-alert-border: var(--uui-color-50);
     --uui-alert-icon: var(--uui-color-50);
-    --uui-alert-border-radius: var(--uui-border-radius);
-    //
-    background-color: var(--uui-alert-bg);
-    border-left: 6px solid var(--uui-alert-border);
 
-    :global(.uui-text) {
-        color: var(--uui-alert-text);
-    }
+    //--uui-alert-font: var(--uui-font);
+    //--uui-alert-font-weight: var(--uui-font-weight, 400);
 
-    .icon-wrapper {
-        :global(.uui-icon) {
-            fill: var(--uui-alert-icon);
-        }
-    }
-}
+    --uui-alert-min-height: var(--uui-size);
+    --uui-alert-min-width: 170px; // TODO: need clarify
+    --uui-alert-border-radius: var(--uui-border-radius);
+    --uui-alert-border-width: 0px;
+    --uui-alert-indicator-border-width: 6px;
+    --uui-alert-gap-h: 12px;
+    --uui-alert-gap-v: 0px;
+    --uui-alert-padding-h: 18px;
+    --uui-alert-padding-v: 9px;
+    --uui-alert-caption-gap-h: 12px;
+    --uui-alert-icon-size: var(--uui-icon-size);
+    //--uui-alert-line-height: var(--uui-line-height);
+    //--uui-alert-font-size: var(--uui-font-size);
 
-.alert-wrapper {
+    //
     box-sizing: border-box;
     display: flex;
     align-items: center;
     overflow: hidden;
-    min-width: 170px;
     border-radius: var(--uui-alert-border-radius);
-}
+    background-color: var(--uui-alert-bg);
+    border-width: var(--uui-alert-border-width);
+    border-inline-start: var(--uui-alert-indicator-border-width) solid var(--uui-alert-border);
+    padding-inline-start: calc(var(--uui-alert-padding-h) - var(--uui-alert-indicator-border-width));
+    padding-inline-end: var(--uui-alert-padding-h);
+    padding-top: var(--uui-alert-padding-v);
+    padding-bottom: var(--uui-alert-padding-v);
+    min-height: var(--uui-alert-min-height);
+    min-width: var(--uui-alert-min-width);
 
-.size-48 {
-    padding: 9px 18px 9px 12px;
-    min-height: 48px;
+    .main-path {
+        width: 100%;
+        display: flex;
+        column-gap: var(--uui-alert-gap-h);
+    }
 
-    @include scalable-icon-size(48);
-}
+    .content-wrapper {
+        display: flex;
+        column-gap: var(--uui-alert-caption-gap-h);
+        width: 100%;
+    }
 
-.size-36 {
-    padding: 3px 9px;
-    min-height: 36px;
-    border-left-width: 3px;
+    .content {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        column-gap: var(--uui-alert-gap-h);
+        row-gap: var(--uui-alert-gap-v);
+        width: 100%;
+        //font-family: var(--uui-alert-font);
+        //font-weight: var(--uui-alert-font-weight);
+        //line-height: var(--uui-alert-line-height);
+        //font-size: var(--uui-alert-font-size);
+    }
 
-    @include scalable-icon-size(36);
-}
+    .action-wrapper {
+        display: flex;
+        align-items: center;
+        column-gap: var(--uui-alert-gap-h);
+    }
 
-.icon-wrapper {
-    height: 100%;
-    margin-inline-end: 12px;
-}
+    :global(.uui-text) {
+        color: var(--uui-alert-text);
+    }
 
-.action-wrapper {
-    display: flex;
-    align-items: center;
-}
+    svg {
+        height: var(--uui-alert-icon-size);
+        width: inherit;
+    }
 
-.action-icon {
-    min-height: 30px;
-}
+    .icon-wrapper {
+        height: 100%;
 
-.action-link:not(:last-child) {
-    margin-inline-end: 12px;
-}
+        :global(.uui-icon) {
+            fill: var(--uui-alert-icon);
+        }
+    }
 
-.close-icon {
-    margin-inline-start: 17px;
-    min-height: 30px;
-    min-width: fit-content;
-    align-self: flex-start;
-}
+    .icon {
+        min-height: calc(var(--uui-alert-min-height) - (2 * var(--uui-alert-padding-v)) - (2 * var(--uui-alert-border-width)));
+    }
 
-.main-path {
-    width: 100%;
-    display: flex;
+    .close-icon {
+        min-height: calc(var(--uui-alert-min-height) - (2 * var(--uui-alert-padding-v)) - (2 * var(--uui-alert-border-width)));
+        min-width: fit-content;
+        align-self: flex-start;
+    }
 }
 
-.content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-}
+
+
diff --git a/uui/components/overlays/Alert.tsx b/uui/components/overlays/Alert.tsx
index 58e0c3dce9..11fe0e09b8 100644
--- a/uui/components/overlays/Alert.tsx
+++ b/uui/components/overlays/Alert.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IHasChildren, IHasCX, Icon, IHasRawProps } from '@epam/uui-core';
 import { IconContainer } from '@epam/uui-components';
-import { IconButton, LinkButton } from '../buttons';
+import { IconButton, LinkButton, LinkButtonProps } from '../buttons';
 import { ReactComponent as SuccessIcon } from '@epam/assets/icons/notification-check-fill.svg';
 import { ReactComponent as WarningIcon } from '@epam/assets/icons/notification-warning-fill.svg';
 import { ReactComponent as ErrorIcon } from '@epam/assets/icons/notification-error-fill.svg';
 import { ReactComponent as HintIcon } from '@epam/assets/icons/notification-info-fill.svg';
 import { ReactComponent as CrossIcon } from '@epam/assets/icons/navigation-close-outline.svg';
+import { settings } from '../../settings';
+
 import css from './Alert.module.scss';
 
 interface AlertNotificationAction {
@@ -51,29 +53,30 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) =
             cx(
                 'uui-alert',
                 css.root,
-                css.alertWrapper,
                 props.color && `uui-color-${props.color}`,
                 props.cx,
-                (props.size === '36' ? css.size36 : css.size48),
+                `uui-size-${props.size || settings.sizes.defaults.alert}`,
             )
         }
         { ...props.rawProps }
     >
         <div className={ css.mainPath }>
-            {props.icon && (
-                <div className={ css.iconWrapper }>
-                    <IconContainer icon={ props.icon } cx={ css.actionIcon } />
-                </div>
-            )}
-            <div className={ css.content }>
-                {props.children}
-                {props.actions && (
-                    <div className={ css.actionWrapper }>
-                        {props.actions.map((action) => (
-                            <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ props?.size === '36' ? '24' : '30' } />
-                        ))}
+            <div className={ css.contentWrapper }>
+                {props.icon && (
+                    <div className={ css.iconWrapper }>
+                        <IconContainer icon={ props.icon } cx={ css.icon } />
                     </div>
                 )}
+                <div className={ css.content }>
+                    {props.children}
+                    {props.actions && (
+                        <div className={ css.actionWrapper }>
+                            {props.actions.map((action) => (
+                                <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ settings.sizes.alert.action[props.size || settings.sizes.defaults.alert] as LinkButtonProps['size'] } />
+                            ))}
+                        </div>
+                    )}
+                </div>
             </div>
             {props.onClose && <IconButton icon={ CrossIcon } color="neutral" onClick={ props.onClose } cx={ css.closeIcon } />}
         </div>
diff --git a/uui/settings.ts b/uui/settings.ts
index c54a314bf3..49522d3566 100644
--- a/uui/settings.ts
+++ b/uui/settings.ts
@@ -3,6 +3,7 @@ import type { Settings } from './settings.types';
 export const settings: Settings = {
     sizes: {
         defaults: {
+            alert: '48',
             badge: '36',
             button: '36',
             checkbox: '18',
@@ -23,6 +24,12 @@ export const settings: Settings = {
             paginator: '30',
             rating: '18',
         },
+        alert: {
+            action: {
+                36: '24',
+                48: '30',
+            },
+        },
         tag: {
             countIndicator: {
                 18: '12',
diff --git a/uui/settings.types.ts b/uui/settings.types.ts
index 431213abec..469b262327 100644
--- a/uui/settings.types.ts
+++ b/uui/settings.types.ts
@@ -1,4 +1,5 @@
 interface DefaultSizes {
+    alert: string;
     badge: string;
     button: string;
     checkbox: string;
@@ -35,6 +36,10 @@ interface UppercaseTextSize {
     uppercase: string;
 }
 
+interface AlertSizes {
+    action: Sizes;
+}
+
 interface TagSizes {
     countIndicator: Sizes;
 }
@@ -235,6 +240,7 @@ interface ModalSizes {
 
 interface SizesSettings {
     defaults: DefaultSizes;
+    alert: AlertSizes;
     tag: TagSizes;
     pickerInput: PickerInputSizes;
     rowAddons: RowAddonsSizes;