diff --git a/changelog.md b/changelog.md
index 8dc39bde93..4f2b739193 100644
--- a/changelog.md
+++ b/changelog.md
@@ -7,6 +7,8 @@
 * [TabButton][VerticalTabButton]: decreased paddings, added gaps `3px` between internal items for all sizes according to design
 * [Tag]: changed layout - added gaps between internal items, changed padding
 * [Data Sources]: cursor-based pagination support. More details [here](http://uui.epam.com/documents?id=dataSources-lazy-dataSource&mode=doc&category=dataSources&theme=loveship#using_cursor-based_pagination)
+* [TimelineScale]: added bottom/top month text customisation.
+* [TimelineScale]: customisation of today line height was added.
 * [DataTable]: groups of columns.
 
 **What's Fixed**
diff --git a/epam-assets/theme/theme_eduverse_dark.scss b/epam-assets/theme/theme_eduverse_dark.scss
index 44d7fb280a..b36631aae0 100644
--- a/epam-assets/theme/theme_eduverse_dark.scss
+++ b/epam-assets/theme/theme_eduverse_dark.scss
@@ -9,6 +9,7 @@
 @mixin theme-eduverse_dark {
     --uui-font: 'Inter', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
+    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
 
     /* shadows */
     --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -175,6 +176,20 @@
         --uui-accordion-toggler-border: var(--uui-divider-light);
     }
 
+    .uui-accordion-toggler {
+        --uui-accordion-toggler-font: var(--font-museo-sans);
+        --uui-accordion-toggler-font-weight: 500;
+    }
+
+    /* Modals */
+
+    .uui-modal-title {
+        --uui-modals-title-font: var(--font-museo-sans);
+        --uui-modals-title-font-weight: 500;
+        --uui-modals-title-font-size: 28px;
+        --uui-modals-title-line-height: 36px;
+    }
+
     /* FileCard */
 
     .uui-file_card {
@@ -805,25 +820,44 @@
     /* Typography */
 
     .uui-typography {
-        .uui-highlight {
-            background-color: var(--uui-warning-20);
+        h1, h2, h3, h4, h5, h6 {
+            font-family: var(--font-museo-sans);
+            letter-spacing: unset;
         }
 
         h1 {
-            font-weight: 600;
+            font-size: 64px;
+            line-height: 72px;
+            font-weight: 700;
         }
 
         h2 {
+            font-size: 36px;
+            line-height: 42px;
             font-weight: 700;
         }
 
         h3 {
-            font-weight: 600;
+            font-size: 32px;
+            line-height: 36px;
+            font-weight: 700;
         }
 
-        .hero-header {
-            font-size: 72px;
-            line-height: 72px;
+        h4 {
+            font-size: 28px;
+            line-height: 36px;
+            font-weight: 500;
+        }
+
+        h5 {
+            font-size: 24px;
+            line-height: 32px;
+            font-weight: 700;
+        }
+
+        h6 {
+            font-size: 14px;
+            line-height: 24px;
             font-weight: 700;
         }
     }
diff --git a/epam-assets/theme/theme_eduverse_light.scss b/epam-assets/theme/theme_eduverse_light.scss
index c8ca402975..0b18583097 100644
--- a/epam-assets/theme/theme_eduverse_light.scss
+++ b/epam-assets/theme/theme_eduverse_light.scss
@@ -10,6 +10,7 @@
 @mixin theme-eduverse_light {
     --uui-font: 'Inter', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
+    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
 
     --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
     --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
@@ -175,6 +176,20 @@
         --uui-accordion-border-radius: 6px;
     }
 
+    .uui-accordion-toggler {
+        --uui-accordion-toggler-font: var(--font-museo-sans);
+        --uui-accordion-toggler-font-weight: 500;
+    }
+
+    /* Modals */
+
+    .uui-modal-title {
+        --uui-modals-title-font: var(--font-museo-sans);
+        --uui-modals-title-font-weight: 500;
+        --uui-modals-title-font-size: 28px;
+        --uui-modals-title-line-height: 36px;
+    }
+
     /* FileCard */
 
     .uui-file_card {
@@ -476,42 +491,45 @@
     /* Typography */
 
     .uui-typography {
-        h1 {
-            font-weight: 400;
+        h1, h2, h3, h4, h5, h6 {
+            font-family: var(--font-museo-sans);
+            letter-spacing: unset;
         }
 
-        h2, h3, h4, h5 {
-            font-weight: 600;
-        }
-
-        .promo-header:is(h1, h2, h3, h4, h5, h6) {
-            font-family: var(--uui-font);
-        }
-
-        h1.promo-header {
-            font-size: 72px;
-            font-weight: 400;
+        h1 {
+            font-size: 64px;
+            line-height: 72px;
+            font-weight: 700;
         }
 
-        h2.promo-header {
-            font-size: 44px;
-            font-weight: 600;
+        h2 {
+            font-size: 36px;
+            line-height: 42px;
+            font-weight: 700;
         }
 
-        h3.promo-header {
-            font-size: 36px;
+        h3 {
+            font-size: 32px;
+            line-height: 36px;
+            font-weight: 700;
         }
 
-        h4.promo-header {
-            font-size: 30px;
+        h4 {
+            font-size: 28px;
+            line-height: 36px;
+            font-weight: 500;
         }
 
-        h5.promo-header {
+        h5 {
             font-size: 24px;
+            line-height: 32px;
+            font-weight: 700;
         }
 
-        h6.promo-header {
-            font-size: 18px;
+        h6 {
+            font-size: 14px;
+            line-height: 24px;
+            font-weight: 700;
         }
     }
 }
diff --git a/next-demo/next-app/src/components/Modal.tsx b/next-demo/next-app/src/components/Modal.tsx
index fc998573ee..09fb72ed03 100644
--- a/next-demo/next-app/src/components/Modal.tsx
+++ b/next-demo/next-app/src/components/Modal.tsx
@@ -37,7 +37,7 @@ export const BasicModalExample = (modalProps: IModal<string | boolean>) => {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button
-                            color='gray50'
+                            color='gray'
                             fill='white'
                             caption='Cancel'
                             onClick={() => modalProps.abort()}
diff --git a/next-demo/next-pages/src/components/Modal.tsx b/next-demo/next-pages/src/components/Modal.tsx
index 91528cb789..10349a44ac 100644
--- a/next-demo/next-pages/src/components/Modal.tsx
+++ b/next-demo/next-pages/src/components/Modal.tsx
@@ -37,7 +37,7 @@ export function BasicModalExample(modalProps: IModal<string | boolean>) {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button
-                            color='gray50'
+                            color='gray'
                             fill='white'
                             caption='Cancel'
                             onClick={() => modalProps.abort()}
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png
index 06988b489a..bd9c979528 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png
index 20316a3158..332419fd6a 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png
index 9fa393d9d5..b998350c73 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png
index 3c2f76420b..ab0f696b16 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Electric-NotSkin.png
index 0891724ca1..70de85aceb 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Loveship-NotSkin.png
index 727e23ef12..ab877a5901 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-LoveshipDark-NotSkin.png
index be909d0f16..d2ce41bd76 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Promo-NotSkin.png
index 2175dc0cc3..54ab1e8a23 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-SizeVariants-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Electric-NotSkin.png
index 54590bc2f6..2b7fd74980 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Loveship-NotSkin.png
index 1620f1e57f..d56f26716c 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png
index 0d5eca2024..2517518799 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Promo-NotSkin.png
index 226040a5c1..98b5f57b2b 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States--PseudoStateHover-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Electric-NotSkin.png
index 73e6c21967..433e985bde 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Loveship-NotSkin.png
index bb8206f076..ea9f990158 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-LoveshipDark-NotSkin.png
index f3b5cecda3..41b4c5e41c 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Promo-NotSkin.png
index d8dfe06ebf..73bd2f71e9 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/TabButton-States-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png
index e2f1b456a1..ca31cf5d6c 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png
index 133005cc84..7ff4f834e6 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsCollapsed-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png
index 18030314f2..2428b4d983 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png
index a007a7a16c..6fecb4131f 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Accordion-AllVariantsExpanded-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseDark-NotSkin.png
index 7eb947ec66..2addcb785d 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseLight-NotSkin.png
index c167079376..47fdeb4c7e 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Electric-NotSkin.png
index 0e234e4e13..aa85a68752 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Loveship-NotSkin.png
index e2b3ce6fec..664a664ded 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-LoveshipDark-NotSkin.png
index ef90cee4f1..10782a15ec 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Promo-NotSkin.png
index de1380d5d5..09ab1c416c 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-SizeVariants-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseDark-NotSkin.png
index 38f16c382b..053520f43d 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseLight-NotSkin.png
index a22b792875..edfce9b617 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Electric-NotSkin.png
index 76dd0d47b1..a1daa91cb3 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Loveship-NotSkin.png
index 0c158eccb7..8658fb91df 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-LoveshipDark-NotSkin.png
index d73f70eb15..b0460f3e18 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Promo-NotSkin.png
index 181a97bbe1..cd8eb4580e 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/TabButton-States-Promo-NotSkin.png differ
diff --git a/uui-timeline/src/TimelineGrid.tsx b/uui-timeline/src/TimelineGrid.tsx
index 83a4c07979..7f3e8ae534 100644
--- a/uui-timeline/src/TimelineGrid.tsx
+++ b/uui-timeline/src/TimelineGrid.tsx
@@ -66,6 +66,7 @@ export interface TimelineGridProps extends TimelineCanvasProps {
      * Overrides today line color.
      */
     todayLineColor?: string;
+
     /**
      * Overrides weekend cell background color.
      */
diff --git a/uui-timeline/src/TimelineScale.tsx b/uui-timeline/src/TimelineScale.tsx
index 8f72040718..8a949836ff 100644
--- a/uui-timeline/src/TimelineScale.tsx
+++ b/uui-timeline/src/TimelineScale.tsx
@@ -11,6 +11,8 @@ import { TimelineCanvas, TimelineCanvasProps } from './TimelineCanvas';
 import { useTimelineTransform } from './useTimelineTransform';
 import { CanvasDrawPeriodPartProps, CanvasDrawPeriodProps, CanvasDrawScaleBottomBorderProps, TimelineScaleFonts,
     timelineScale, CanvasDrawTopDaysProps, CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps, CanvasDrawHeaderTodayProps,
+    CanvasDrawTopMonthProps,
+    CanvasDrawBottomMonthProps,
 } from './draw';
 
 /**
@@ -45,6 +47,10 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
      * Overrides bottom border line for current period (today, this week, etc).
      */
     todayLineColor?: string;
+    /**
+     * Overrides bottom border line width for current period (today, this week, etc).
+     */
+    todayLineHeight?: number;
     /**
      * Overrides period cell border color.
      */
@@ -66,6 +72,14 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
      * Overrides weekend/holiday cell background color.
      */
     weekendCellBackgroundColor?: string;
+    /**
+     * Overrides month text on the scale's top line. 
+     */
+    getTopMonth?(month: number): string;
+    /**
+     * Overrides month text on the scale's bottom line.
+     */
+    getBottomMonth?(month: number): string;
     /**
      * Overrides movement arrows icons.
      * @param direction - arrow direction.
@@ -105,7 +119,7 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
     /**
      * Overrides drawing months on the top of the scale.
      */
-    drawTopMonths?: (props: CanvasDrawPeriodPartProps) => void;
+    drawTopMonths?: (props: CanvasDrawTopMonthProps) => void;
     /**
      * Overrides drawing weeks on the scale.
      */
@@ -113,7 +127,7 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
     /**
      * Overrides drawing months on the bottom of the scale.
      */
-    drawBottomMonths?: (props: CanvasDrawPeriodWithTodayProps) => void;
+    drawBottomMonths?: (props: CanvasDrawBottomMonthProps) => void;
     /**
      * Overrides drawing years on the scale.
      */
@@ -143,12 +157,14 @@ export function TimelineScale({
     topDayTextColor = timelineScale.defaultColors.topDayTextColor,
     weekendTextColor = timelineScale.defaultColors.weekendTextColor,
     todayLineColor = timelineScale.defaultColors.todayLineColor,
+    todayLineHeight = timelineScale.defaultWidth.todayLineHeight,
     cellBorderColor = timelineScale.defaultColors.cellBorderColor,
     cellBorderWidth = timelineScale.defaultWidth.cellBorderWidth,
     cellBackgroundColor = timelineScale.defaultColors.cellBackgroundColor,
     evenPeriodCellBackgroundColor = timelineScale.defaultColors.evenPeriodCellBackgroundColor,
     weekendCellBackgroundColor = timelineScale.defaultColors.weekendCellBackgroundColor,
-
+    getTopMonth = timelineScale.getTopMonth,
+    getBottomMonth = timelineScale.getBottomMonth,
     drawPeriod = timelineScale.drawPeriod,
     drawMinutes = timelineScale.drawMinutes,
     drawRemainingHours = timelineScale.drawRemainingHours,
@@ -217,35 +233,36 @@ export function TimelineScale({
         };
 
         const withGridLinesProps = { ...commonProps, cellBorderColor, cellBorderWidth };
+        const todayProps = { todayLineColor, todayLineHeight, drawToday };
         drawPeriod({ ...timelineScale.getMinutesScaleRange(), draw: drawMinutes, ...withGridLinesProps });
         drawPeriod({ ...timelineScale.getRemainingHoursScaleRange(), draw: drawRemainingHours, ...commonProps });
         drawPeriod({ ...timelineScale.getHoursScaleRange(), draw: (...props) => drawHours(...props), ...commonProps });
         drawPeriod({
-            draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, todayLineColor, weekendCellBackgroundColor, drawToday }),
+            draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, weekendCellBackgroundColor, getTopMonth, ...todayProps }),
             ...timelineScale.getTopDaysScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawDays({ ...props, weekendTextColor, todayLineColor, weekendCellBackgroundColor, drawToday }),
+            draw: (props) => drawDays({ ...props, weekendTextColor, weekendCellBackgroundColor, ...todayProps }),
             ...timelineScale.getDaysScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor }),
+            draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor, getTopMonth }),
             ...timelineScale.getTopMonthsScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawWeeks({ ...props, todayLineColor, drawToday }),
+            draw: (props) => drawWeeks({ ...props, drawToday, ...todayProps }),
             ...timelineScale.getWeeksScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawBottomMonths({ ...props, todayLineColor, drawToday }),
+            draw: (props) => drawBottomMonths({ ...props, getBottomMonth, drawToday, ...todayProps }),
             ...timelineScale.getBottomMonthsScaleRange(),
             ...withGridLinesProps });
         drawPeriod({
-            draw: (props) => drawYears({ ...props, todayLineColor, drawToday, evenPeriodCellBackgroundColor }),
+            draw: (props) => drawYears({ ...props, drawToday, evenPeriodCellBackgroundColor, ...todayProps }),
             ...timelineScale.getYearsScaleRange(),
             ...withGridLinesProps,
         });
diff --git a/uui-timeline/src/draw/scale.ts b/uui-timeline/src/draw/scale.ts
index ce2b85c39c..a4f27e5828 100644
--- a/uui-timeline/src/draw/scale.ts
+++ b/uui-timeline/src/draw/scale.ts
@@ -14,6 +14,8 @@ import {
     CanvasScaleRange,
     CanvasDrawBottomGridLine,
     CanvasDrawWeekendHoursCell,
+    CanvasDrawBottomMonthProps,
+    CanvasDrawTopMonthProps,
 } from './types';
 
 const defaultFonts = {
@@ -36,6 +38,7 @@ const defaultColors = {
 
 const defaultWidth = {
     cellBorderWidth: 1,
+    todayLineHeight: 4,
 };
 
 const moveAmount = 0.7;
@@ -45,6 +48,8 @@ const isCurrentPeriod = (leftDate: Date, rightDate: Date) => new Date() >= leftD
 
 const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2 - 1;
 const getBottomCellY = (canvasHeight: number) => getCanvasVerticalCenter(canvasHeight);
+const getTopMonth = (month: number) => months[month]?.toUpperCase() ?? '';
+const getBottomMonth = (month: number) => months[month] ?? '';
 
 const drawScaleBottomBorder = ({
     context,
@@ -375,10 +380,16 @@ const drawHours = ({
         });
 };
 
-const drawToday = ({ context, scaleBar, todayLineColor = defaultColors.todayLineColor }: CanvasDrawHeaderTodayProps) => {
+const drawToday = ({
+    context,
+    scaleBar,
+    todayLineColor = defaultColors.todayLineColor,
+    canvasHeight,
+    todayLineHeight = defaultWidth.todayLineHeight,
+}: CanvasDrawHeaderTodayProps) => {
     if (isCurrentPeriod(scaleBar.leftDate, scaleBar.rightDate)) {
         context.fillStyle = todayLineColor;
-        context.fillRect(scaleBar.left + 1, 56, scaleBar.right - scaleBar.left, 4);
+        context.fillRect(scaleBar.left + 1, canvasHeight - todayLineHeight, scaleBar.right - scaleBar.left, todayLineHeight);
     }
 };
 
@@ -389,7 +400,9 @@ const drawTopDays = ({
     topDayTextColor = defaultColors.topDayTextColor,
     weekendTextColor = defaultColors.weekendTextColor,
     todayLineColor = defaultColors.todayLineColor,
+    todayLineHeight = defaultWidth.todayLineHeight,
     drawToday: customDrawToday,
+    getTopMonth: customGetMonth = getTopMonth,
     canvasHeight,
     cellBorderColor = defaultColors.cellBorderColor,
     cellBorderWidth = defaultWidth.cellBorderWidth,
@@ -398,7 +411,7 @@ const drawTopDays = ({
     ...restProps
 }: CanvasDrawTopDaysProps) => {
     timelineTransform.getVisibleDays().forEach((w) => {
-        const header = months[w.leftDate.getMonth()] + ' ' + w.leftDate.getDate().toString() + ', ' + w.leftDate.getFullYear();
+        const header = customGetMonth(w.leftDate.getMonth()) + ' ' + w.leftDate.getDate().toString() + ', ' + w.leftDate.getFullYear();
         const isHoliday = timelineTransform.isWeekend(w.leftDate) || timelineTransform.isHoliday(w.leftDate);
         const color = isHoliday ? weekendCellBackgroundColor : cellBackgroundColor;
         drawCellBackground({ context, scaleBar: w, canvasHeight, color });
@@ -408,7 +421,7 @@ const drawTopDays = ({
         drawPeriodText({
             context,
             timelineTransform,
-            text: header.toUpperCase(),
+            text: header,
             x: w.left,
             width: w.right - w.left,
             line: getTopLine(visibility),
@@ -416,7 +429,7 @@ const drawTopDays = ({
             textColor,
             ...restProps,
         });
-        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor });
+        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
         drawBorderForTopCell({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
     });
 };
@@ -428,6 +441,7 @@ const drawDays = ({
     periodTextColor = defaultColors.periodTextColor,
     weekendTextColor = defaultColors.weekendTextColor,
     todayLineColor = defaultColors.todayLineColor,
+    todayLineHeight = defaultWidth.todayLineHeight,
     drawToday: customDrawToday,
     canvasHeight,
     cellBorderColor = defaultColors.cellBorderColor,
@@ -442,7 +456,7 @@ const drawDays = ({
         const color = isHoliday ? weekendCellBackgroundColor : cellBackgroundColor;
         drawCellBackground({ context, scaleBar: w, canvasHeight, y: getCanvasVerticalCenter(canvasHeight), color });
 
-        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor });
+        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
         drawBottomGridLine({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
 
         const text = w.leftDate.getDate().toString();
@@ -472,8 +486,9 @@ const drawTopMonths = ({
     cellBorderWidth = defaultWidth.cellBorderWidth,
     cellBackgroundColor = defaultColors.cellBackgroundColor,
     evenPeriodCellBackgroundColor = defaultColors.evenPeriodCellBackgroundColor,
+    getTopMonth: customGetMonth = getTopMonth,
     ...restProps
-}: CanvasDrawPeriodPartProps) => {
+}: CanvasDrawTopMonthProps) => {
     timelineTransform.getVisibleMonths().forEach((w) => {
         const color = w.leftDate.getMonth() % 2 === 0
             ? cellBackgroundColor
@@ -482,12 +497,12 @@ const drawTopMonths = ({
         drawCellBackground({ context, scaleBar: w, canvasHeight, color });
         drawBorderForTopCell({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
 
-        const header = months[w.leftDate.getMonth()] + ' ' + w.leftDate.getFullYear();
+        const header = customGetMonth(w.leftDate.getMonth()) + ' ' + w.leftDate.getFullYear();
         const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate);
         drawPeriodText({
             context,
             timelineTransform,
-            text: header.toUpperCase(),
+            text: header,
             x: w.left,
             width: w.right - w.left,
             line: getTopLine(visibility),
@@ -504,6 +519,7 @@ const drawWeeks = ({
     visibility,
     periodTextColor = defaultColors.periodTextColor,
     todayLineColor = defaultColors.todayLineColor,
+    todayLineHeight = defaultWidth.todayLineHeight,
     drawToday: customDrawToday,
     canvasHeight,
     cellBorderColor = defaultColors.cellBorderColor,
@@ -517,7 +533,7 @@ const drawWeeks = ({
         const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate);
         drawCellBackground({ context, scaleBar: w, canvasHeight, y: getCanvasVerticalCenter(canvasHeight), color: cellBackgroundColor });
 
-        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor });
+        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
         drawBottomGridLine({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
         drawPeriodText({
             context,
@@ -540,15 +556,16 @@ const drawBottomMonths = ({
     canvasHeight,
     periodTextColor = defaultColors.periodTextColor,
     todayLineColor = defaultColors.todayLineColor,
+    todayLineHeight = defaultWidth.todayLineHeight,
     drawToday: customDrawToday,
     cellBorderColor = defaultColors.cellBorderColor,
     cellBorderWidth = defaultWidth.cellBorderWidth,
     cellBackgroundColor = defaultColors.cellBackgroundColor,
-
+    getBottomMonth: customGetMonth = getBottomMonth,
     ...restProps
-}: CanvasDrawPeriodWithTodayProps) => {
+}: CanvasDrawBottomMonthProps) => {
     timelineTransform.getVisibleMonths().forEach((w) => {
-        const text = months[w.leftDate.getMonth()].toString();
+        const text = customGetMonth(w.leftDate.getMonth()).toString();
         const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate);
         drawCellBackground({ context, scaleBar: w, canvasHeight, y: getCanvasVerticalCenter(canvasHeight), color: cellBackgroundColor });
 
@@ -563,7 +580,7 @@ const drawBottomMonths = ({
             textColor: periodTextColor,
             ...restProps,
         });
-        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor });
+        (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
         drawBottomGridLine({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
     });
 };
@@ -574,6 +591,7 @@ const drawYears = ({
     visibility,
     periodTextColor = defaultColors.periodTextColor,
     todayLineColor = defaultColors.todayLineColor,
+    todayLineHeight = defaultWidth.todayLineHeight,
     drawToday: customDrawToday,
     canvasHeight,
     cellBorderColor = defaultColors.cellBorderColor,
@@ -593,7 +611,7 @@ const drawYears = ({
             const y = canvasHeight;
             timelinePrimitives.drawHorizontalLine({ context, x1: w.left, x2: w.right + 1, y: y - 1, color: cellBorderColor, width: cellBorderWidth });
             drawCellBackground({ context, scaleBar: w, canvasHeight, height: canvasHeight, color: cellBackgroundColor });
-            (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor });
+            (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
             timelinePrimitives.drawVerticalLine({ context, x: w.left + 0.5, y2: y - 1, color: cellBorderColor, width: cellBorderWidth });
         } else {
             const color = w.leftDate.getFullYear() % 2 === 0
@@ -657,7 +675,8 @@ export const timelineScale = {
     getBottomMonthsScaleRange,
     getYearsScaleRange,
     drawHoursCells,
-
+    getTopMonth,
+    getBottomMonth,
     defaultFonts,
     defaultColors,
     defaultWidth,
diff --git a/uui-timeline/src/draw/types.ts b/uui-timeline/src/draw/types.ts
index bcf1a35e8b..04edfd7295 100644
--- a/uui-timeline/src/draw/types.ts
+++ b/uui-timeline/src/draw/types.ts
@@ -41,7 +41,9 @@ export interface CanvasDrawRectangleProps extends CanvasDrawLineProps {
 
 export interface CanvasDrawHeaderTodayProps extends CanvasDrawProps {
     scaleBar: ScaleBar;
+    canvasHeight?: number;
     todayLineColor?: string;
+    todayLineHeight?: number;
 }
 
 export interface CanvasDrawTimelineHeaderProps extends CanvasDrawProps {
@@ -120,9 +122,18 @@ export interface CanvasDrawPeriodPartProps extends CanvasDrawTimelineHeaderProps
 
 export interface CanvasDrawPeriodWithTodayProps extends CanvasDrawPeriodPartProps {
     todayLineColor?: string;
+    todayLineHeight: number;
     drawToday?: (props: CanvasDrawHeaderTodayProps) => void;
 }
 
+export interface CanvasDrawBottomMonthProps extends CanvasDrawPeriodWithTodayProps {
+    getBottomMonth?: (month: number) => string;
+}
+
+export interface CanvasDrawTopMonthProps extends CanvasDrawPeriodPartProps {
+    getTopMonth?: (month: number) => string;
+}
+
 export interface CanvasDrawDaysProps extends CanvasDrawPeriodPartProps, CanvasDrawPeriodWithTodayProps {
     weekendTextColor?: string;
     weekendCellBackgroundColor?: string;
@@ -130,6 +141,7 @@ export interface CanvasDrawDaysProps extends CanvasDrawPeriodPartProps, CanvasDr
 
 export interface CanvasDrawTopDaysProps extends CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps {
     topDayTextColor?: string;
+    getTopMonth?: (month: number) => string;
 }
 
 export interface CanvasScaleRange {
diff --git a/uui/components/buttons/TabButton.module.scss b/uui/components/buttons/TabButton.module.scss
index d1517d2d00..7e9f2e78a6 100644
--- a/uui/components/buttons/TabButton.module.scss
+++ b/uui/components/buttons/TabButton.module.scss
@@ -99,4 +99,18 @@
             border-radius: 50%;
         }
     }
+
+    &:not(:global(.uui-vertical-tab-button)) {
+        :global(.uui-caption) {
+            padding-bottom: calc(var(--uui-tab_btn-vertical-caption-padding) - var(--uui-tab-line-width));
+        }
+
+        :global(.uui-count_indicator) {
+            margin-bottom: calc(var(--uui-tab_btn-vertical-caption-padding) - var(--uui-tab-line-width));
+        }
+
+        :global(.uui-icon) {
+            margin-bottom: calc(0px - var(--uui-tab-line-width));
+        }
+    }
 }
diff --git a/uui/components/overlays/Modals.module.scss b/uui/components/overlays/Modals.module.scss
index c2d30594fc..5b90e53b4d 100644
--- a/uui/components/overlays/Modals.module.scss
+++ b/uui/components/overlays/Modals.module.scss
@@ -3,6 +3,12 @@
 .root {
     --uui-modals-shadow: var(--uui-shadow-level-3);
     --uui-modals-bg: var(--uui-surface-main);
+    --uui-modals-title: var(--uui-text-primary);
+
+    --uui-modals-title-font: var(--uui-font);
+    --uui-modals-title-font-weight: 600;
+    --uui-modals-title-font-size: 18px;
+    --uui-modals-title-line-height: 24px;
 
     --uui-modals-border-radius: calc(var(--uui-border-radius) * 2);
 }
@@ -63,5 +69,14 @@
 .modal-header {
     border-top-left-radius: var(--uui-modals-border-radius);
     border-top-right-radius: var(--uui-modals-border-radius);
-}
 
+    :global(.uui-modal-title) {
+        font-family: var(--uui-modals-title-font);
+        font-size: var(--uui-modals-title-font-size);
+        line-height: var(--uui-modals-title-line-height);
+        font-weight: var(--uui-modals-title-font-weight);
+        color: var(--uui-modals-title);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
diff --git a/uui/components/overlays/Modals.tsx b/uui/components/overlays/Modals.tsx
index 4935ade958..ff48927c76 100644
--- a/uui/components/overlays/Modals.tsx
+++ b/uui/components/overlays/Modals.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
+import cx from 'classnames';
 import {
     withMods, ModalFooterCoreProps, ModalWindowProps as uuiModalWindowProps, ModalBlockerProps, ModalHeaderCoreProps, isMobile,
 } from '@epam/uui-core';
 import { ModalBlocker as uuiModalBlocker, ModalWindow as uuiModalWindow } from '@epam/uui-components';
 import { FlexRow, FlexSpacer, RowMods, FlexCell, FlexRowProps } from '../layout';
 import { IconButton } from '../buttons';
-import { Text } from '../typography';
 import { settings } from '../../settings';
 
 import { ReactComponent as CrossIcon } from '@epam/assets/icons/navigation-close-outline.svg';
@@ -61,16 +61,17 @@ export class ModalHeader extends React.Component<ModalHeaderProps> {
         return (
             <FlexRow
                 padding={ this.props.padding || '24' }
-                vPadding="12"
+                size={ null }
+                vPadding="36"
                 borderBottom={ this.props.borderBottom }
                 cx={ [css.root, css.modalHeader, this.props.cx] }
                 columnGap="12"
                 rawProps={ this.props.rawProps }
             >
                 {this.props.title && (
-                    <Text size="48" fontSize="18" fontWeight="600">
+                    <div className={ cx('uui-modal-title', 'uui-typography') }>
                         {this.props.title}
-                    </Text>
+                    </div>
                 )}
                 {this.props.children}
                 {this.props.onClose && <FlexSpacer />}
diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
index 148c97501d..4193b3c5f1 100644
--- a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
+++ b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`ConfirmationModal should be rendered correctly 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-12 borderBottom root modalHeader container align-items-center"
+      className="uui-flex-row root padding-24 vPadding-36 borderBottom root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
@@ -36,12 +36,7 @@ exports[`ConfirmationModal should be rendered correctly 1`] = `
       }
     >
       <div
-        className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-        style={
-          Object {
-            "--uui-text-font-size": "18px",
-          }
-        }
+        className="uui-modal-title uui-typography"
       >
         Test
       </div>
@@ -209,7 +204,7 @@ exports[`ConfirmationModal should be rendered correctly without body 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-12 borderBottom root modalHeader container align-items-center"
+      className="uui-flex-row root padding-24 vPadding-36 borderBottom root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
@@ -218,12 +213,7 @@ exports[`ConfirmationModal should be rendered correctly without body 1`] = `
       }
     >
       <div
-        className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-        style={
-          Object {
-            "--uui-text-font-size": "18px",
-          }
-        }
+        className="uui-modal-title uui-typography"
       >
         Test
       </div>
diff --git a/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap
index 0274d640d2..73f3566d4b 100644
--- a/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap
+++ b/uui/components/overlays/__tests__/__snapshots__/Modals.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`Modals should be rendered correctly with many props 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-6 vPadding-12 borderBottom root modalHeader container align-items-center"
+      className="uui-flex-row root padding-6 vPadding-36 borderBottom root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
@@ -36,12 +36,7 @@ exports[`Modals should be rendered correctly with many props 1`] = `
       }
     >
       <div
-        className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-        style={
-          Object {
-            "--uui-text-font-size": "18px",
-          }
-        }
+        className="uui-modal-title uui-typography"
       >
         Test header
       </div>
@@ -119,7 +114,7 @@ exports[`Modals should be rendered correctly with minimum props 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-12 root modalHeader container align-items-center"
+      className="uui-flex-row root padding-24 vPadding-36 root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
index 3b108e7a24..8ee84aa865 100644
--- a/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
@@ -155,12 +155,11 @@ exports[`PickerList should open body 1`] = `
         style="width: 600px; height: 700px; max-height: 80dvh;"
       >
         <div
-          class="uui-flex-row root uui-size-36 padding-24 vPadding-12 root modalHeader container align-items-center"
+          class="uui-flex-row root padding-24 vPadding-36 root modalHeader container align-items-center"
           style="column-gap: 12px;"
         >
           <div
-            class="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-            style="--uui-text-font-size: 18px;"
+            class="uui-modal-title uui-typography"
           >
             Please select 
           </div>
diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
index f2738d2c83..48864f7289 100644
--- a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-12 root modalHeader container align-items-center"
+      className="uui-flex-row root padding-24 vPadding-36 root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
@@ -36,12 +36,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
       }
     >
       <div
-        className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-        style={
-          Object {
-            "--uui-text-font-size": "18px",
-          }
-        }
+        className="uui-modal-title uui-typography"
       >
         Please select
       </div>
@@ -474,7 +469,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-12 root modalHeader container align-items-center"
+      className="uui-flex-row root padding-24 vPadding-36 root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
@@ -483,12 +478,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
       }
     >
       <div
-        className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-        style={
-          Object {
-            "--uui-text-font-size": "18px",
-          }
-        }
+        className="uui-modal-title uui-typography"
       >
         Please select
       </div>
@@ -1896,12 +1886,11 @@ exports[`PickerModal should open body 1`] = `
         style="width: 600px; height: 700px; max-height: 80dvh;"
       >
         <div
-          class="uui-flex-row root uui-size-36 padding-24 vPadding-12 root modalHeader container align-items-center"
+          class="uui-flex-row root padding-24 vPadding-36 root modalHeader container align-items-center"
           style="column-gap: 12px;"
         >
           <div
-            class="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-            style="--uui-text-font-size: 18px;"
+            class="uui-modal-title uui-typography"
           >
             Please select
           </div>
diff --git a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
index 1e660cb716..2c50219546 100644
--- a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
+++ b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
     }
   >
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-12 root modalHeader container align-items-center"
+      className="uui-flex-row root padding-24 vPadding-36 root modalHeader container align-items-center"
       style={
         Object {
           "columnGap": "12px",
@@ -36,12 +36,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
       }
     >
       <div
-        className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography container"
-        style={
-          Object {
-            "--uui-text-font-size": "18px",
-          }
-        }
+        className="uui-modal-title uui-typography"
       >
         Configure columns
       </div>