diff --git a/epam-assets/theme/theme_6px.scss b/epam-assets/theme/theme_6px.scss
index ad65b234d4..35d2cb251a 100644
--- a/epam-assets/theme/theme_6px.scss
+++ b/epam-assets/theme/theme_6px.scss
@@ -1,4 +1,5 @@
 @mixin uui-6px-grid {
+    --uui-grid-unit: 6px;
     --uui-focus-outline-width: 2px;
     --uui-focus-outline-offset: 2px;
     --uui-focus-radius: 2px;
diff --git a/epam-assets/theme/theme_vanilla_thunder.scss b/epam-assets/theme/theme_vanilla_thunder.scss
index 12d370a09f..2420097a44 100644
--- a/epam-assets/theme/theme_vanilla_thunder.scss
+++ b/epam-assets/theme/theme_vanilla_thunder.scss
@@ -326,6 +326,7 @@
 
     .uui-main_menu {
         --uui-main_menu-text: var(--chromatic-500);
+        --uui-main_menu-text-hover: var(--chromatic-500);
         --uui-main_menu-text-active: var(--uui-info-50);
         --uui-main_menu-bg: var(--uui-info-5);
         --uui-main_menu-hover: var(--uui-neutral-0);
diff --git a/uui-components/src/inputs/DatePicker/Calendar.tsx b/uui-components/src/inputs/DatePicker/Calendar.tsx
index 7d606a9048..5239745f87 100644
--- a/uui-components/src/inputs/DatePicker/Calendar.tsx
+++ b/uui-components/src/inputs/DatePicker/Calendar.tsx
@@ -95,7 +95,7 @@ export function Calendar<TSelection>(props: CalendarProps<TSelection>) {
             return (
                 <div
                     className={ uuiDaySelection.dayCell }
-                    tabIndex={ 0 }
+                    tabIndex={ -1 }
                     key={ `day-${props.month.valueOf()}-${index}` }
                 />
             );
diff --git a/uui-components/src/inputs/DatePicker/MonthSelection.module.scss b/uui-components/src/inputs/DatePicker/MonthSelection.module.scss
index fc2ed24b37..f45ad1fe46 100644
--- a/uui-components/src/inputs/DatePicker/MonthSelection.module.scss
+++ b/uui-components/src/inputs/DatePicker/MonthSelection.module.scss
@@ -1,12 +1,12 @@
 .container {
-    &:global(.uui-monthselection-container) {
-        :global(.uui-monthselection-content) {
+    &:global(.uui-month_selection-container) {
+        :global(.uui-month_selection-content) {
             display: flex;
             flex-direction: column;
             font-size: 14px;
         }
 
-        :global(.uui-monthselection-month-container) {
+        :global(.uui-month_selection-month-container) {
             display: flex;
             flex-direction: column;
 
@@ -15,7 +15,7 @@
             }
         }
 
-        :global(.uui-monthselection-month) {
+        :global(.uui-month_selection-month) {
             display: flex;
             justify-content: center;
             align-items: center;
diff --git a/uui-components/src/inputs/DatePicker/MonthSelection.tsx b/uui-components/src/inputs/DatePicker/MonthSelection.tsx
index 55e88f124d..08d1fc912d 100644
--- a/uui-components/src/inputs/DatePicker/MonthSelection.tsx
+++ b/uui-components/src/inputs/DatePicker/MonthSelection.tsx
@@ -7,12 +7,12 @@ import css from './MonthSelection.module.scss';
 const MONTH_ROW_LENGTH = 3;
 
 export const uuiMonthSelection = {
-    container: 'uui-monthselection-container',
-    content: 'uui-monthselection-content',
-    monthContainer: 'uui-monthselection-month-container',
-    monthsRow: 'uui-monthselection-months-row',
-    month: 'uui-monthselection-month',
-    currentMonth: 'uui-monthselection-current-month',
+    container: 'uui-month_selection-container',
+    content: 'uui-month_selection-content',
+    monthContainer: 'uui-month_selection-month-container',
+    monthsRow: 'uui-month_selection-months-row',
+    month: 'uui-month_selection-month',
+    currentMonth: 'uui-month_selection-current-month',
 } as const;
 
 interface MonthSelectionProps extends IEditable<Dayjs>, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IHasForwardedRef<HTMLDivElement> {
diff --git a/uui-components/src/inputs/DatePicker/YearSelection.module.scss b/uui-components/src/inputs/DatePicker/YearSelection.module.scss
index d94d324256..94073e2c44 100644
--- a/uui-components/src/inputs/DatePicker/YearSelection.module.scss
+++ b/uui-components/src/inputs/DatePicker/YearSelection.module.scss
@@ -1,12 +1,12 @@
 .container {
-    &:global(.uui-yearselection-container) {
-        :global(.uui-yearselection-content) {
+    &:global(.uui-year_selection-container) {
+        :global(.uui-year_selection-content) {
             display: flex;
             flex-direction: column;
             font-size: 14px;
         }
 
-        :global(.uui-yearselection-year-container) {
+        :global(.uui-year_selection-years-container) {
             display: flex;
             flex-direction: column;
 
@@ -15,7 +15,7 @@
             }
         }
 
-        :global(.uui-yearselection-year) {
+        :global(.uui-year_selection-year) {
             display: flex;
             justify-content: center;
             align-items: center;
diff --git a/uui-components/src/inputs/DatePicker/YearSelection.tsx b/uui-components/src/inputs/DatePicker/YearSelection.tsx
index aedd946a6a..778c2773ef 100644
--- a/uui-components/src/inputs/DatePicker/YearSelection.tsx
+++ b/uui-components/src/inputs/DatePicker/YearSelection.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
 import { Dayjs } from '../../helpers/dayJsHelper';
-import {
-    IEditable, IHasCX, arrayToMatrix, cx, IHasRawProps, IHasForwardedRef,
-} from '@epam/uui-core';
+import { IEditable, IHasCX, arrayToMatrix, cx, IHasRawProps, IHasForwardedRef } from '@epam/uui-core';
 import css from './YearSelection.module.scss';
 
 const MONTH_ROW_LENGTH = 4;
 
 export const uuiYearSelection = {
-    container: 'uui-yearselection-container',
-    content: 'uui-yearselection-content',
-    yearContainer: 'uui-yearselection-year-container',
-    yearRow: 'uui-yearselection-year-row',
-    year: 'uui-yearselection-year',
-    currentYear: 'uui-yearselection-current-year',
+    container: 'uui-year_selection-container',
+    content: 'uui-year_selection-content',
+    yearsContainer: 'uui-year_selection-years-container',
+    yearsRow: 'uui-year_selection-years-row',
+    year: 'uui-year_selection-year',
+    currentYear: 'uui-year_selection-current-year',
 } as const;
 
 export interface YearSelectionProps extends IEditable<Dayjs>, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IHasForwardedRef<HTMLDivElement> {
@@ -28,10 +26,10 @@ export function YearSelection(props: YearSelectionProps) {
     return (
         <div className={ cx(css.container, uuiYearSelection.container, props.cx) } { ...props.rawProps }>
             <div className={ uuiYearSelection.content }>
-                <div className={ uuiYearSelection.yearContainer }>
-                    {arrayToMatrix(getYears(props.value.year()), MONTH_ROW_LENGTH).map((yearRow, index) => (
-                        <div key={ index } className={ uuiYearSelection.yearRow }>
-                            {yearRow.map((year) => (
+                <div className={ uuiYearSelection.yearsContainer }>
+                    {arrayToMatrix(getYears(props.value.year()), MONTH_ROW_LENGTH).map((yearsRow, index) => (
+                        <div key={ index } className={ uuiYearSelection.yearsRow }>
+                            {yearsRow.map((year) => (
                                 <div
                                     key={ year }
                                     className={ cx(year === props.selectedDate.year() && uuiYearSelection.currentYear, uuiYearSelection.year) }
diff --git a/uui/components/datePickers/Calendar.module.scss b/uui/components/datePickers/Calendar.module.scss
index 84337b21d7..50f3bb8920 100644
--- a/uui/components/datePickers/Calendar.module.scss
+++ b/uui/components/datePickers/Calendar.module.scss
@@ -17,6 +17,16 @@
     --uui-calendar-selected_day-font: var(--uui-font);
     --uui-calendar-selected_day-font-weight: 600;
 
+    --uui-calendar-day-size: var(--uui-size);
+    --uui-calendar-day-wrapper-height: calc(var(--uui-size) - var(--uui-grid-unit));
+    --uui-calendar-day-border-width: var(--uui-border-width);
+    --uui-calendar-day-border-radius: 50%;
+    --uui-calendar-day-font-size: var(--uui-font-size);
+    --uui-calendar-day-line-height: calc(var(--uui-calendar-day-size) - var(--uui-calendar-day-border-width) * 2);
+    --uui-calendar-weekday-font-size: 12px;
+    --uui-calendar-weekday-line-height: 24px;
+    --uui-calendar-dot-size: 4px;
+
     :global(.uui-calendar-content) {
         font-family: var(--uui-calendar-font);
         font-weight: var(--uui-calendar-font-weight, normal);
@@ -26,9 +36,9 @@
         font-family: var(--uui-calendar-weekday-font);
         font-weight: var(--uui-calendar-weekday-font-weight, normal);
         color: var(--uui-calendar-weekday-caption);
-        width: 34px;
-        font-size: 12px;
-        line-height: 24px;
+        width: var(--uui-calendar-day-size);
+        font-size: var(--uui-calendar-weekday-font-size);
+        line-height: var(--uui-calendar-weekday-line-height);
         text-align: center;
     }
 
@@ -36,8 +46,8 @@
         color: var(--uui-calendar-day-text);
         text-align: center;
         padding: 0;
-        height: 36px;
-        width: 36px;
+        height: var(--uui-calendar-day-size);
+        width: var(--uui-calendar-day-size);
         display: flex;
         position: relative;
 
@@ -47,23 +57,24 @@
     }
 
     :global(.uui-calendar-day-wrapper) {
-        height: 30px;
-        width: 30px;
-        font-size: 14px;
-        line-height: 30px;
+        height: var(--uui-calendar-day-wrapper-height);
+        width: var(--uui-calendar-day-size);
+        font-size: var(--uui-calendar-day-font-size);
+        line-height: var(--uui-calendar-day-line-height);
         margin: auto;
         cursor: default;
     }
 
     :global(.uui-calendar-day) {
-        border-radius: 50%;
-        height: 36px;
-        width: 36px;
+        border-radius: var(--uui-calendar-day-border-radius);
+        height: var(--uui-calendar-day-size);
+        width: var(--uui-calendar-day-size);
         position: absolute;
         left: 0;
         top: 0;
-        line-height: 34px;
-        border: 1px solid transparent;
+        font-size: var(--uui-calendar-day-font-size);
+        line-height: var(--uui-calendar-day-line-height);
+        border: var(--uui-calendar-day-border-width) solid transparent;
         box-sizing: border-box;
     }
 
@@ -73,14 +84,14 @@
                 cursor: pointer;
 
                 :global(.uui-calendar-day) {
-                    border: 1px solid var(--uui-calendar-selected_range);
+                    border: var(--uui-calendar-day-border-width) solid var(--uui-calendar-selected_range);
                     background-color: var(--uui-calendar-selected_day-hover);
                     z-index: 1;
                 }
 
                 &:global(.uui-calendar-selected-day) {
                     :global(.uui-calendar-day) {
-                        border: 1px solid var(--uui-calendar-selected_range-hover);
+                        border: var(--uui-calendar-day-border-width) solid var(--uui-calendar-selected_range-hover);
                         background-color: var(--uui-calendar-selected_range-hover);
                     }
                 }
@@ -97,12 +108,12 @@
             :global(.uui-calendar-day)::after {
                 position: absolute;
                 content: '';
-                height: 4px;
-                width: 4px;
-                border-radius: 50%;
+                height: var(--uui-calendar-dot-size);
+                width: var(--uui-calendar-dot-size);
+                border-radius: var(--uui-calendar-day-border-radius);
                 background-color: var(--uui-calendar-selected_range);
-                bottom: 3px;
-                left: calc(50% - 2px);
+                bottom: calc(var(--uui-grid-unit) / 2);
+                left: calc(50% - var(--uui-calendar-dot-size) / 2);
             }
         }
     }
@@ -114,7 +125,7 @@
                 color: var(--uui-calendar-selected_day-text);
 
                 &::after {
-                    background-color: var(--uui-calendar-selected_day);
+                    background-color: var(--uui-calendar-selected_day-text);
                 }
             }
         }
diff --git a/uui/components/datePickers/Calendar.tsx b/uui/components/datePickers/Calendar.tsx
index 8a565b5f18..d8df6b650a 100644
--- a/uui/components/datePickers/Calendar.tsx
+++ b/uui/components/datePickers/Calendar.tsx
@@ -2,9 +2,10 @@ import css from './Calendar.module.scss';
 import { CalendarProps, Calendar as uuiCalendar } from '@epam/uui-components';
 import { withMods } from '@epam/uui-core';
 import { Dayjs } from '../../helpers/dayJsHelper';
+import { settings } from '../../settings';
 
 export function applyDateSelectionMods() {
-    return [css.root];
+    return [css.root, `uui-size-${settings.sizes.defaults.datePicker}`];
 }
 
 export const Calendar = withMods<CalendarProps<Dayjs>, CalendarProps<Dayjs>>(uuiCalendar, applyDateSelectionMods);
diff --git a/uui/components/datePickers/CalendarPresets.module.scss b/uui/components/datePickers/CalendarPresets.module.scss
index e878247272..9843aecc80 100644
--- a/uui/components/datePickers/CalendarPresets.module.scss
+++ b/uui/components/datePickers/CalendarPresets.module.scss
@@ -1,26 +1,39 @@
 @use  '../../assets/styles/index' as *;
 
 .root {
+    --uui-calendar-presets-header: var(--uui-text-primary);
+    --uui-calendar-presets-item: var(--uui-link);
+
+    --uui-calendar-presets-container-padding: 24px 24px 12px;
+    --uui-calendar-presets-header-font-size: 14px;
+    --uui-calendar-presets-header-line-height: 24px;
+    --uui-calendar-presets-header-font-weight: 600;
+    --uui-calendar-presets-header-padding-bottom: 12px;
+    --uui-calendar-presets-item-font-size: 12px;
+    --uui-calendar-presets-item-line-height: 18px;
+    --uui-calendar-presets-item-font-weight: 600;
+    --uui-calendar-presets-item-padding-bottom: 6px;
+
     &:global(.uui-presets-container) {
-        padding: 24px 24px 12px;
+        padding: var(--uui-calendar-presets-container-padding);
     }
 
     :global(.uui-presets-header) {
+        color: var(--uui-calendar-presets-header);
         font-family: var(--uui-font);
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 24px;
-        padding-bottom: 12px;
-        color: var(--uui-text-primary);
+        font-weight: var(--uui-calendar-presets-header-font-weight);
+        font-size: var(--uui-calendar-presets-header-font-size);
+        line-height: var(--uui-calendar-presets-header-line-height);
+        padding-bottom: var(--uui-calendar-presets-header-padding-bottom);
     }
 
     :global(.uui-presets-item) {
+        color: var(--uui-calendar-presets-item);
         font-family: var(--uui-font);
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 18px;
-        color: var(--uui-link);
-        padding-bottom: 6px;
+        font-weight: var(--uui-calendar-presets-item-font-weight);
+        font-size: var(--uui-calendar-presets-item-font-size);
+        line-height: var(--uui-calendar-presets-item-line-height);
+        padding-bottom: var(--uui-calendar-presets-item-padding-bottom);
 
         &:hover {
             color: var(--uui-link-hover);
diff --git a/uui/components/datePickers/DatePickerBody.module.scss b/uui/components/datePickers/DatePickerBody.module.scss
index 9f267d6b9d..647277e4d5 100644
--- a/uui/components/datePickers/DatePickerBody.module.scss
+++ b/uui/components/datePickers/DatePickerBody.module.scss
@@ -9,31 +9,40 @@
 
     --uui-dtp_body-content-font: var(--uui-font);
     --uui-dtp_body-content-font-weight: 400;
+
+    --uui-dtp_body-min-height: 282px;
+    --uui-dtp_body-padding: 12px;
+
+    --uui-dtp-cell-height: var(--uui-size);
+    --uui-dtp-cell-hover-height: calc(var(--uui-dtp-cell-height) - var(--uui-dtp-cell-border-width) * 2);
+    --uui-dtp-cell-border-width: var(--uui-border-width);
+    --uui-dtp-cell-border-radius: calc(var(--uui-dtp-cell-height) / 2);
+
+    --uui-dtp-month-width: 72px;
+    --uui-dtp-month-hover-width: calc(var(--uui-dtp-month-width) - var(--uui-dtp-cell-border-width) * 2);
+    --uui-dtp-month-margin: 6px;
+
+    --uui-dtp-year-width: 63px;
+    --uui-dtp-year-hover-width: calc(var(--uui-dtp-year-width) - var(--uui-dtp-cell-border-width) * 2);
+    --uui-dtp-year-margin: 6px 0;
 }
 
-:global(.uui-datepickerBody-wrapper) {
-    min-height: 300px;
-    padding: 0 18px 12px;
+:global(.uui-datepicker-body-wrapper) {
+    min-height: var(--uui-dtp_body-min-height);
+    padding: var(--uui-dtp_body-padding);
 
     // DatePickerBase style
     :global(.uui-datepicker-container) {
         background-color: var(--uui-dtp_body-title-bg);
     }
 
-    // Header styles
-    :global(.uui-datepickerheader-header) {
-        padding-top: 18px;
-        padding-bottom: 6px;
-    }
-
     // Month and Year selection styles
-    :global(.uui-monthselection-content), :global(.uui-yearselection-content) {
+    :global(.uui-month_selection-content), :global(.uui-year_selection-content) {
         font-family: var(--uui-dtp_body-content-font);
         font-weight: var(--uui-dtp_body-content-font-weight, normal);
     }
 
-    :global(.uui-monthselection-month-container) {
-        margin: 0 0 12px;
+    :global(.uui-month_selection-month-container) {
         display: flex;
         flex-direction: column;
 
@@ -42,64 +51,62 @@
         }
     }
 
-    :global(.uui-yearselection-year-container) {
+    :global(.uui-year_selection-years-container) {
         display: flex;
         flex-direction: column;
-        margin: 0 0 12px;
 
         & > * {
             display: flex;
         }
     }
 
-    :global(.uui-yearselection-year-row) {
+    :global(.uui-year_selection-years-row) {
         display: flex;
         justify-content: space-between;
-        width: 252px;
     }
 
-    :global(.uui-monthselection-month) {
-        width: 72px;
-        height: 36px;
-        border-radius: 20px;
-        margin: 6px;
+    :global(.uui-month_selection-month) {
+        width: var(--uui-dtp-month-width);
+        height: var(--uui-dtp-cell-height);
+        border-radius: var(--uui-dtp-cell-border-radius);
+        margin: var(--uui-dtp-month-margin);
         color: var(--uui-dtp_body-text);
 
         &:hover {
-            width: 70px;
-            height: 34px;
-            border: 1px solid var(--uui-dtp_body-item-border-hover);
+            width: var(--uui-dtp-month-hover-width);
+            height: var(--uui-dtp-cell-hover-height);
+            border: var(--uui-dtp-cell-border-width) solid var(--uui-dtp_body-item-border-hover);
             cursor: pointer;
         }
     }
 
-    :global(.uui-yearselection-year) {
-        width: 63px;
-        height: 36px;
+    :global(.uui-year_selection-year) {
+        width: var(--uui-dtp-year-width);
+        height: var(--uui-dtp-cell-height);
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: 20px;
-        margin: 6px 0;
+        border-radius: var(--uui-dtp-cell-border-radius);
+        margin: var(--uui-dtp-year-margin);
         color: var(--uui-dtp_body-text);
 
         &:hover {
-            width: 61px;
-            height: 34px;
-            border: 1px solid var(--uui-dtp_body-item-border-hover);
+            width: var(--uui-dtp-year-hover-width);
+            height: var(--uui-dtp-cell-hover-height);
+            border: var(--uui-dtp-cell-border-width) solid var(--uui-dtp_body-item-border-hover);
             cursor: pointer;
         }
     }
 
-    :global(.uui-monthselection-current-month) {
-        &:global(.uui-monthselection-month) {
+    :global(.uui-month_selection-current-month) {
+        &:global(.uui-month_selection-month) {
             background-color: var(--uui-dtp_body-item-bg-selected);
             color: var(--uui-dtp_body-text-selected);
         }
     }
 
-    :global(.uui-yearselection-current-year) {
-        &:global(.uui-yearselection-year) {
+    :global(.uui-year_selection-current-year) {
+        &:global(.uui-year_selection-year) {
             background-color: var(--uui-dtp_body-item-bg-selected);
             color: var(--uui-dtp_body-text-selected);
         }
diff --git a/uui/components/datePickers/DatePickerBody.tsx b/uui/components/datePickers/DatePickerBody.tsx
index c28b228616..fbf0eff705 100644
--- a/uui/components/datePickers/DatePickerBody.tsx
+++ b/uui/components/datePickers/DatePickerBody.tsx
@@ -6,12 +6,13 @@ import {
 import { MonthSelection, YearSelection } from '@epam/uui-components';
 import { DatePickerHeader } from './DatePickerHeader';
 import { Calendar } from './Calendar';
-import css from './DatePickerBody.module.scss';
 import { CommonDatePickerBodyProps, ViewType } from './types';
 import {
     getNewMonth, uuiDatePickerBodyBase, valueFormat,
 } from './helpers';
 import { Dayjs, uuiDayjs } from '../../helpers/dayJsHelper';
+import { settings } from '../../settings';
+import css from './DatePickerBody.module.scss';
 
 export interface DatePickerBodyProps extends CommonDatePickerBodyProps, IControlled<string | null> {
     /**
@@ -21,7 +22,7 @@ export interface DatePickerBodyProps extends CommonDatePickerBodyProps, IControl
 }
 
 export const uuiDatePickerBody = {
-    wrapper: 'uui-datepickerBody-wrapper',
+    wrapper: 'uui-datepicker-body-wrapper',
     separator: 'uui-datepickerBody-separator',
 } as const;
 
@@ -132,7 +133,7 @@ function StatelessDatePickerBodyComp({
     return (
         <div
             ref={ ref }
-            className={ cx(uuiDatePickerBodyBase.container, classes) }
+            className={ cx(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes) }
             { ...rawProps }
         >
             <div className={ cx(css.root, uuiDatePickerBody.wrapper) }>
diff --git a/uui/components/datePickers/DatePickerHeader.module.scss b/uui/components/datePickers/DatePickerHeader.module.scss
index db9ddc74f5..c00570b71d 100644
--- a/uui/components/datePickers/DatePickerHeader.module.scss
+++ b/uui/components/datePickers/DatePickerHeader.module.scss
@@ -1,24 +1,27 @@
-.container {
-    &:global(.uui-datepickerheader-container) {
-        :global(.uui-datepickerheader-header) {
+.root {
+    --uui-dtp_header-padding-bottom: 6px;
+
+    &:global(.uui-datepicker-header-container) {
+        :global(.uui-datepicker-header-nav) {
             display: flex;
             justify-content: space-between;
+            padding-bottom: var(--uui-dtp_header-padding-bottom);
         }
 
-        :global(.uui-datepickerheader-nav-title) {
+        :global(.uui-datepicker-header-nav-title) {
             display: flex;
             align-items: center;
         }
     }
 }
 
-*[dir='rtl'] .container :global(.uui-datepickerheader-nav-icon-left), .container[dir='rtl'] :global(.uui-datepickerheader-nav-icon-left) {
+*[dir='rtl'] .container :global(.uui-datepicker-header-nav-icon-left), .container[dir='rtl'] :global(.uui-datepicker-header-nav-icon-left) {
     svg {
         transform: rotate(180deg);
     }
 }
 
-*[dir='rtl'] .container :global(.uui-datepickerheader-nav-icon-right), .container[dir='rtl'] :global(.uui-datepickerheader-nav-icon-right) {
+*[dir='rtl'] .container :global(.uui-datepicker-header-nav-icon-right), .container[dir='rtl'] :global(.uui-datepicker-header-nav-icon-right) {
     svg {
         transform: rotate(180deg);
     }
diff --git a/uui/components/datePickers/DatePickerHeader.tsx b/uui/components/datePickers/DatePickerHeader.tsx
index d87f547054..cb75f7c4e2 100644
--- a/uui/components/datePickers/DatePickerHeader.tsx
+++ b/uui/components/datePickers/DatePickerHeader.tsx
@@ -12,11 +12,11 @@ import {
 } from './helpers';
 
 export const uuiHeader = {
-    container: 'uui-datepickerheader-container',
-    header: 'uui-datepickerheader-header',
-    navTitle: 'uui-datepickerheader-nav-title',
-    navIconRight: 'uui-datepickerheader-nav-icon-right',
-    navIconLeft: 'uui-datepickerheader-nav-icon-left',
+    container: 'uui-datepicker-header-container',
+    headerNav: 'uui-datepicker-header-nav',
+    navTitle: 'uui-datepicker-header-nav-title',
+    navIconRight: 'uui-datepicker-header-nav-icon-right',
+    navIconLeft: 'uui-datepicker-header-nav-icon-left',
 };
 
 interface DatePickerHeaderValue {
@@ -123,8 +123,8 @@ export function DatePickerHeader({
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
 
     return (
-        <div className={ cx(css.container, uuiHeader.container, cx) }>
-            <header className={ uuiHeader.header }>
+        <div className={ cx(css.root, uuiHeader.container, cx) }>
+            <header className={ uuiHeader.headerNav }>
                 <Button
                     icon={ navIconLeft || LeftArrowIcon }
                     color="secondary"
diff --git a/uui/components/datePickers/RangeDatePicker.module.scss b/uui/components/datePickers/RangeDatePicker.module.scss
index d7a5464bcf..458878dd7b 100644
--- a/uui/components/datePickers/RangeDatePicker.module.scss
+++ b/uui/components/datePickers/RangeDatePicker.module.scss
@@ -1,92 +1,3 @@
-@use  '../../assets/styles/index' as *;
-
 .dropdown-container {
     align-items: normal;
 }
-
-.date-input {
-    min-width: 0;
-    padding: 0 5px;
-
-    &:global(.uui-input-box) {
-        border-width: 0;
-        height: calc(var(--uui-size) - 2px);
-    }
-}
-
-.date-input-group {
-    display: flex;
-    min-width: 0;
-    background-color: var(--uui-control-bg);
-    border: 1px solid var(--uui-control-border);
-    border-radius: var(--uui-border-radius);
-
-    > :first-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    > :last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .separator {
-        display: flex;
-        flex-shrink: 0;
-        background: var(--uui-control-border);
-        width: 1px;
-    }
-
-    &:hover {
-        border-color: var(--uui-control-border-hover);
-
-        .separator {
-            background: var(--uui-control-border-hover);
-        }
-
-        &:global(.uui-disabled), &:global(.uui-readonly) {
-            border-color: var(--uui-control-border);
-
-            .separator {
-                background: var(--uui-control-border);
-            }
-        }
-    }
-
-    &:global(.uui-focus) {
-        border-color: var(--uui-control-border);
-
-        .separator {
-            background: var(--uui-control-border-focus);
-        }
-
-        .date-input {
-            &:hover {
-                outline: 1px solid var(--uui-control-border-hover);
-            }
-
-            &:global(.uui-focus) {
-                outline: 1px solid var(--uui-control-border-focus);
-            }
-        }
-    }
-
-    &:global(.uui-readonly) {
-        @include readonly-input();
-
-        .date-input {
-            &:global(.uui-focus) {
-                box-shadow: none;
-            }
-        }
-    }
-
-    &:global(.uui-invalid) {
-        border-color: var(--uui-error-50);
-
-        .separator {
-            background: var(--uui-error-50);
-        }
-    }
-}
diff --git a/uui/components/datePickers/RangeDatePicker.tsx b/uui/components/datePickers/RangeDatePicker.tsx
index 066c99080f..a6341674d7 100644
--- a/uui/components/datePickers/RangeDatePicker.tsx
+++ b/uui/components/datePickers/RangeDatePicker.tsx
@@ -1,18 +1,14 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
-import {
-    DropdownBodyProps, isFocusReceiverInsideFocusLock, useUuiContext,
-} from '@epam/uui-core';
+import { DropdownBodyProps, isFocusReceiverInsideFocusLock, useUuiContext } from '@epam/uui-core';
 import { Dropdown } from '@epam/uui-components';
 import { DropdownContainer } from '../overlays';
 import { FlexRow } from '../layout';
 import { RangeDatePickerBody } from './RangeDatePickerBody';
-import css from './RangeDatePicker.module.scss';
-import {
-    RangeDatePickerBodyValue, RangeDatePickerInputType, RangeDatePickerProps, RangeDatePickerValue,
-} from './types';
+import { RangeDatePickerBodyValue, RangeDatePickerInputType, RangeDatePickerProps, RangeDatePickerValue } from './types';
 import { defaultFormat, defaultRangeValue } from './helpers';
 import { RangeDatePickerInput } from './RangeDatePickerInput';
+import css from './RangeDatePicker.module.scss';
 
 const modifiers = [{
     name: 'offset',
diff --git a/uui/components/datePickers/RangeDatePickerBody.module.scss b/uui/components/datePickers/RangeDatePickerBody.module.scss
index 6fe7871829..2e878e4b8e 100644
--- a/uui/components/datePickers/RangeDatePickerBody.module.scss
+++ b/uui/components/datePickers/RangeDatePickerBody.module.scss
@@ -1,8 +1,15 @@
 @use  '../../assets/styles/index' as *;
 
 .root {
-    --uui-rdtp_date-bg-selected: var(--uui-info-10);
-    --uui-rdtp_blocker-bg: color-mix(in srgb, var(--uui-surface-higher) 80%, transparent);
+    --uui-rdtp-date-bg-selected: var(--uui-info-10);
+    --uui-rdtp-blocker-bg: color-mix(in srgb, var(--uui-surface-higher) 80%, transparent);
+
+    --uui-rdtp-separator-width: 1px;
+    --uui-rdtp-calendar-day-top: -3px;
+    --uui-rdtp-gradient-size: 6px;
+    --uui-rdtp-day-width: 40px;
+    --uui-rdtp-selected-day-radius: 50%;
+    --uui-rdtp-margin-right: 10px;
 
     :global(.uui-calendar-days) > div:last-child {
         :global(.uui-calendar-day-cell):last-child > :global(.uui-range-datepicker-in-range) {
@@ -11,20 +18,20 @@
                     position: relative;
 
                     :global(.uui-calendar-day) {
-                        top: -3px;
+                        top: var(--uui-rdtp-calendar-day-top);
                     }
 
                     &::after {
                         background: linear-gradient(320deg, var(--uui-surface-main) 3px, transparent 0), linear-gradient(-135deg, var(--uui-surface-main) 3px, transparent 0);
                         background-position: left-bottom;
                         background-repeat: repeat-y;
-                        background-size: 6px 6px;
+                        background-size: var(--uui-rdtp-gradient-size) var(--uui-rdtp-gradient-size);
                         content: ' ';
                         display: block;
                         position: absolute;
                         bottom: 0;
                         right: 0;
-                        width: 6px;
+                        width: var(--uui-rdtp-gradient-size);
                         height: 100%;
                     }
                 }
@@ -40,20 +47,20 @@
                     position: relative;
 
                     :global(.uui-calendar-day) {
-                        top: -3px;
+                        top: var(--uui-rdtp-calendar-day-top);
                     }
 
                     &::after {
                         background: linear-gradient(45deg, var(--uui-surface-main) 3px, transparent 0), linear-gradient(135deg, var(--uui-surface-main) 3px, transparent 0);
                         background-position: left-bottom;
                         background-repeat: repeat-y;
-                        background-size: 6px 6px;
+                        background-size: var(--uui-rdtp-gradient-size) var(--uui-rdtp-gradient-size);
                         content: ' ';
                         display: block;
                         position: absolute;
                         bottom: 0;
                         left: 0;
-                        width: 6px;
+                        width: var(--uui-rdtp-gradient-size);
                         height: 100%;
                     }
                 }
@@ -63,44 +70,44 @@
 
     :global(.uui-range-datepicker-in-range) {
         &:global(.uui-calendar-day-wrapper) {
-            background-color: var(--uui-rdtp_date-bg-selected);
+            background-color: var(--uui-rdtp-date-bg-selected);
             border-radius: 0;
-            width: 40px;
+            width: var(--uui-rdtp-day-width);
         }
     }
 
     :global(.uui-range-datepicker-first-day-in-range-wrapper) {
         &:global(.uui-calendar-selected-day) {
-            border-top-left-radius: 50%;
-            border-bottom-left-radius: 50%;
+            border-top-left-radius: var(--uui-rdtp-selected-day-radius);
+            border-bottom-left-radius: var(--uui-rdtp-selected-day-radius);
         }
     }
 
     :global(.uui-range-datepicker-last-day-in-range-wrapper) {
         &:global(.uui-calendar-selected-day) {
-            border-top-right-radius: 50%;
-            border-bottom-right-radius: 50%;
-            margin-right: 10px;
+            border-top-right-radius: var(--uui-rdtp-selected-day-radius);
+            border-bottom-right-radius: var(--uui-rdtp-selected-day-radius);
+            margin-right: var(--uui-rdtp-margin-right);
         }
     }
 
     :global(.uui-range-datepicker-separator) {
         display: flex;
         flex: 0 0 auto;
-        border-left: 1px solid var(--uui-control-border);
+        border-left: var(--uui-rdtp-separator-width) solid var(--uui-control-border);
     }
 }
 
 .container {
     &.day-selection {
         .from-picker {
-            :global(.uui-datepickerheader-nav-icon-right) {
+            :global(.uui-datepicker-header-nav-icon-right) {
                 visibility: hidden;
             }
         }
 
         .to-picker {
-            :global(.uui-datepickerheader-nav-icon-left) {
+            :global(.uui-datepicker-header-nav-icon-left) {
                 visibility: hidden;
             }
         }
@@ -112,7 +119,7 @@
     }
 
     .blocker {
-        background-color: var(--uui-rdtp_blocker-bg);
+        background-color: var(--uui-rdtp-blocker-bg);
         position: absolute;
         left: 0;
         right: 0;
diff --git a/uui/components/datePickers/RangeDatePickerInput.module.scss b/uui/components/datePickers/RangeDatePickerInput.module.scss
new file mode 100644
index 0000000000..a5ccf6c204
--- /dev/null
+++ b/uui/components/datePickers/RangeDatePickerInput.module.scss
@@ -0,0 +1,99 @@
+@use  '../../assets/styles/index' as *;
+
+.date-input {
+    min-width: 0;
+    padding: var(--uui-rdtp-date_input-padding);
+
+    &:global(.uui-input-box) {
+        border-width: 0;
+        height: var(--uui-rdtp-date_input-height);
+    }
+}
+
+.root {
+    --uui-rdtp-bg: var(--uui-control-bg);
+    --uui-rdtp-border: var(--uui-control-border);
+    --uui-rdtp-border-hover: var(--uui-control-border-hover);
+    --uui-rdtp-border-active: var(--uui-control-border-focus);
+    --uui-rdtp-border-error: var(--uui-error-50);
+
+    --uui-rdtp-border-radius: var(--uui-border-radius);
+    --uui-rdtp-border-width: var(--uui-border-width);
+    --uui-rdtp-date_input-height: calc(var(--uui-size) - var(--uui-border-width) * 2);
+    --uui-rdtp-date_input-padding: 0 5px;
+    //
+    display: flex;
+    min-width: 0;
+    background-color: var(--uui-rdtp-bg);
+    border: var(--uui-rdtp-border-width) solid var(--uui-rdtp-border);
+    border-radius: var(--uui-rdtp-border-radius);
+
+    > :first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    > :last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .separator {
+        display: flex;
+        flex-shrink: 0;
+        background: var(--uui-rdtp-border);
+        width: var(--uui-rdtp-border-width);
+    }
+
+    &:hover {
+        border-color: var(--uui-rdtp-border-hover);
+
+        .separator {
+            background: var(--uui-rdtp-border-hover);
+        }
+
+        &:global(.uui-disabled), &:global(.uui-readonly) {
+            border-color: var(--uui-rdtp-border);
+
+            .separator {
+                background: var(--uui-rdtp-border);
+            }
+        }
+    }
+
+    &:global(.uui-focus) {
+        border-color: var(--uui-rdtp-border);
+
+        .separator {
+            background: var(--uui-rdtp-border-active);
+        }
+
+        .date-input {
+            &:hover {
+                outline: var(--uui-rdtp-border-width) solid var(--uui-rdtp-border-hover);
+            }
+
+            &:global(.uui-focus) {
+                outline: var(--uui-rdtp-border-width) solid var(--uui-rdtp-border-active);
+            }
+        }
+    }
+
+    &:global(.uui-readonly) {
+        @include readonly-input();
+
+        .date-input {
+            &:global(.uui-focus) {
+                box-shadow: none;
+            }
+        }
+    }
+
+    &:global(.uui-invalid) {
+        border-color: var(--uui-rdtp-border-error);
+
+        .separator {
+            background: var(--uui-rdtp-border-error);
+        }
+    }
+}
diff --git a/uui/components/datePickers/RangeDatePickerInput.tsx b/uui/components/datePickers/RangeDatePickerInput.tsx
index 02f5229c5b..f3c6828333 100644
--- a/uui/components/datePickers/RangeDatePickerInput.tsx
+++ b/uui/components/datePickers/RangeDatePickerInput.tsx
@@ -1,21 +1,13 @@
-import React, {
-    forwardRef, useEffect, useState,
-} from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
+import { IEditable, cx, uuiMod, IHasCX, IClickable, IHasRawProps } from '@epam/uui-core';
+import { RangeDatePickerInputType, RangeDatePickerProps, RangeDatePickerValue } from './types';
+import { defaultRangeValue, isValidRange, toCustomDateRangeFormat, toValueDateRangeFormat } from './helpers';
 import { uuiDayjs } from '../../helpers/dayJsHelper';
-import {
-    IEditable, cx, uuiMod, IHasCX, IClickable, IHasRawProps,
-} from '@epam/uui-core';
 import { TextInput, TextInputProps } from '../inputs';
-import {
-    RangeDatePickerInputType, RangeDatePickerProps, RangeDatePickerValue,
-} from './types';
 import { systemIcons } from '../../icons/icons';
 import { i18n } from '../../i18n';
-import css from './RangeDatePicker.module.scss';
-import {
-    defaultRangeValue, isValidRange, toCustomDateRangeFormat, toValueDateRangeFormat,
-} from './helpers';
 import { settings } from '../../settings';
+import css from './RangeDatePickerInput.module.scss';
 
 /**
  * Represents RangeDatePickerInputProps
@@ -123,9 +115,10 @@ export const RangeDatePickerInput = forwardRef<HTMLDivElement, RangeDatePickerIn
         <div
             ref={ ref }
             className={ cx(
-                classes,
-                css.dateInputGroup,
+                `uui-size-${size || settings.sizes.defaults.rangeDatePicker}`,
                 'uui-range-date-picker',
+                classes,
+                css.root,
                 isDisabled && uuiMod.disabled,
                 isReadonly && uuiMod.readonly,
                 isInvalid && uuiMod.invalid,
diff --git a/uui/components/datePickers/__tests__/__snapshots__/DatePickerBody.test.tsx.snap b/uui/components/datePickers/__tests__/__snapshots__/DatePickerBody.test.tsx.snap
index 91b3ea58f2..26b93d78eb 100644
--- a/uui/components/datePickers/__tests__/__snapshots__/DatePickerBody.test.tsx.snap
+++ b/uui/components/datePickers/__tests__/__snapshots__/DatePickerBody.test.tsx.snap
@@ -5,17 +5,17 @@ exports[`DataPicker should be rendered correctly 1`] = `
   className="uui-datepicker-container"
 >
   <div
-    className="root uui-datepickerBody-wrapper"
+    className="root uui-datepicker-body-wrapper"
   >
     <div
-      className="container uui-datepickerheader-container"
+      className="container uui-datepicker-header-container"
     >
       <header
-        className="uui-datepickerheader-header"
+        className="uui-datepicker-header-nav"
       >
         <button
           aria-disabled={false}
-          className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-left"
+          className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepicker-header-nav-icon-left"
           onClick={[Function]}
           tabIndex={0}
           type="button"
@@ -30,7 +30,7 @@ exports[`DataPicker should be rendered correctly 1`] = `
           </div>
         </button>
         <button
-          className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepickerheader-nav-title"
+          className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepicker-header-nav-title"
           onClick={[Function]}
           tabIndex={0}
           type="button"
@@ -43,7 +43,7 @@ exports[`DataPicker should be rendered correctly 1`] = `
         </button>
         <button
           aria-disabled={false}
-          className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-right"
+          className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepicker-header-nav-icon-right"
           onClick={[Function]}
           tabIndex={0}
           type="button"
diff --git a/uui/components/datePickers/__tests__/__snapshots__/RangeDatePickerBody.test.tsx.snap b/uui/components/datePickers/__tests__/__snapshots__/RangeDatePickerBody.test.tsx.snap
index 00e806e838..7c1dc5b21d 100644
--- a/uui/components/datePickers/__tests__/__snapshots__/RangeDatePickerBody.test.tsx.snap
+++ b/uui/components/datePickers/__tests__/__snapshots__/RangeDatePickerBody.test.tsx.snap
@@ -48,17 +48,17 @@ exports[`RangeDatePickerBody should be rendered correctly 1`] = `
             className="uui-datepicker-container fromPicker"
           >
             <div
-              className="root uui-datepickerBody-wrapper"
+              className="root uui-datepicker-body-wrapper"
             >
               <div
-                className="container uui-datepickerheader-container"
+                className="container uui-datepicker-header-container"
               >
                 <header
-                  className="uui-datepickerheader-header"
+                  className="uui-datepicker-header-nav"
                 >
                   <button
                     aria-disabled={false}
-                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-left"
+                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepicker-header-nav-icon-left"
                     onClick={[Function]}
                     tabIndex={0}
                     type="button"
@@ -73,7 +73,7 @@ exports[`RangeDatePickerBody should be rendered correctly 1`] = `
                     </div>
                   </button>
                   <button
-                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepickerheader-nav-title"
+                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepicker-header-nav-title"
                     onClick={[Function]}
                     tabIndex={0}
                     type="button"
@@ -86,7 +86,7 @@ exports[`RangeDatePickerBody should be rendered correctly 1`] = `
                   </button>
                   <button
                     aria-disabled={false}
-                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-right"
+                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepicker-header-nav-icon-right"
                     onClick={[Function]}
                     tabIndex={0}
                     type="button"
@@ -643,17 +643,17 @@ exports[`RangeDatePickerBody should be rendered correctly 1`] = `
             className="uui-datepicker-container toPicker"
           >
             <div
-              className="root uui-datepickerBody-wrapper"
+              className="root uui-datepicker-body-wrapper"
             >
               <div
-                className="container uui-datepickerheader-container"
+                className="container uui-datepicker-header-container"
               >
                 <header
-                  className="uui-datepickerheader-header"
+                  className="uui-datepicker-header-nav"
                 >
                   <button
                     aria-disabled={false}
-                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-left"
+                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepicker-header-nav-icon-left"
                     onClick={[Function]}
                     tabIndex={0}
                     type="button"
@@ -668,7 +668,7 @@ exports[`RangeDatePickerBody should be rendered correctly 1`] = `
                     </div>
                   </button>
                   <button
-                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepickerheader-nav-title"
+                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepicker-header-nav-title"
                     onClick={[Function]}
                     tabIndex={0}
                     type="button"
@@ -681,7 +681,7 @@ exports[`RangeDatePickerBody should be rendered correctly 1`] = `
                   </button>
                   <button
                     aria-disabled={false}
-                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-right"
+                    className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepicker-header-nav-icon-right"
                     onClick={[Function]}
                     tabIndex={0}
                     type="button"