diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
index 1f9e474f3..e17b8acad 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
@@ -3,43 +3,20 @@
  * See LICENSE for license details.
  */
 <template>
-    <div>
-        <template v-if="isCalendarDayType">
-            <DatePickerContentHeader :headers="weekDays" />
-            <DatePickerDays
-                :dates="calendarDates"
-                :selected-dates="parsedDate"
-                @select="onDaySelect" />
-        </template>
-        <template v-if="isCalendarMonthType">
-            <DatePickerContentHeader :headers="['Months']" />
-            <DatePickerMonths
-                :months="months"
-                :selected-month="parsedSelectedMonth"
-                :current-month="parsedCurrentMonth"
-                @select="onMonthSelect" />
-        </template>
-        <template v-if="isCalendarYearType">
-            <DatePickerContentHeader :headers="['Years']" />
-            <DatePickerYears
-                :years="years"
-                :selected-year="parsedSelectedYear"
-                :current-year="currentYear"
-                @select="onYearSelect" />
-        </template>
-    </div>
+    <Component
+        :is="nodesComponent.component"
+        v-bind="nodesComponent.props"
+        v-on="nodesComponent.listeners" />
 </template>
 
 <script>
 import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
-import DatePickerDays from '@Core/components/Inputs/DatePicker/DatePickerDays';
+import DatePickerMonth from '@Core/components/Inputs/DatePicker/DatePickerMonth';
 import DatePickerMonths from '@Core/components/Inputs/DatePicker/DatePickerMonths';
 import DatePickerYears from '@Core/components/Inputs/DatePicker/DatePickerYears';
-import calendar, {
-    CALENDAR_MONTHS,
+import {
     getHeaderForCalendarDaysType,
     getMonthIndex,
-    WEEK_DAYS,
 } from '@Core/models/calendar/calendar';
 import {
     CALENDAR_TYPE,
@@ -48,13 +25,17 @@ import {
 export default {
     name: 'DatePickerCalendar',
     components: {
-        DatePickerDays,
+        DatePickerMonth,
         DatePickerContentHeader,
         DatePickerMonths,
         DatePickerYears,
     },
     props: {
-        date: {
+        value: {
+            type: Date,
+            default: null,
+        },
+        rangeValue: {
             type: Date,
             default: null,
         },
@@ -66,83 +47,56 @@ export default {
             type: Array,
             required: true,
         },
-        currentYear: {
-            type: Number,
-            required: true,
-        },
         month: {
             type: Number,
             required: true,
         },
-        currentMonth: {
-            type: Number,
-            required: true,
-        },
         calendarType: {
             type: String,
             required: true,
         },
     },
-    data() {
-        return {
-            months: Object.values(CALENDAR_MONTHS),
-        };
-    },
     computed: {
-        parsedDate() {
-            if (this.date) {
-                return [
-                    new Date(this.date),
-                ];
-            }
-
-            return [];
-        },
-        parsedCurrentMonth() {
-            if (this.year === this.currentYear) {
-                return Object.values(CALENDAR_MONTHS)[this.currentMonth];
+        nodesComponent() {
+            switch (this.calendarType) {
+            case CALENDAR_TYPE.DAY:
+                return {
+                    component: DatePickerMonth,
+                    props: {
+                        value: this.value,
+                        rangeValue: this.rangeValue,
+                        month: this.month,
+                        year: this.year,
+                    },
+                    listeners: {
+                        select: this.onDaySelect,
+                    },
+                };
+            case CALENDAR_TYPE.MONTH:
+                return {
+                    component: DatePickerMonths,
+                    props: {
+                        value: this.value,
+                        rangeValue: this.rangeValue,
+                        year: this.year,
+                    },
+                    listeners: {
+                        select: this.onMonthSelect,
+                    },
+                };
+            default: return {
+                component: DatePickerYears,
+                props: {
+                    value: this.value,
+                    rangeValue: this.rangeValue,
+                    nodes: this.years,
+                    year: this.year,
+                },
+                listeners: {
+                    select: this.onYearSelect,
+                },
+            };
             }
-
-            return '';
-        },
-        parsedSelectedMonth() {
-            if (this.parsedDate.length) {
-                const [
-                    date,
-                ] = this.parsedDate;
-
-                if (date.getFullYear() === this.year) {
-                    return this.months[date.getMonth()];
-                }
-            }
-
-            return '';
-        },
-        parsedSelectedYear() {
-            if (this.parsedDate.length) {
-                const [
-                    date,
-                ] = this.parsedDate;
-
-                return date.getFullYear();
-            }
-
-            return null;
-        },
-        weekDays() {
-            return Object.values(WEEK_DAYS);
-        },
-        calendarDates() {
-            return calendar(this.month, this.year);
-        },
-        isCalendarDayType() {
-            return this.calendarType === CALENDAR_TYPE.DAY;
-        },
-        isCalendarMonthType() {
-            return this.calendarType === CALENDAR_TYPE.MONTH;
-        },
-        isCalendarYearType() {
-            return this.calendarType === CALENDAR_TYPE.YEAR;
         },
     },
     methods: {
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue
index 5b9f9a0cf..2ea2a6a22 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue
@@ -4,19 +4,20 @@
  */
 <template>
     <div class="date-picker">
-        <DatePickerHeader :header="header" />
+        <slot name="header">
+            <DatePickerHeader :header="header" />
+        </slot>
         <DatePickerNavigationHeader
             :header="calendarHeader"
             @changeCalendarType="onChangeCalendarType"
             @previousDate="onPreviousDate"
             @nextDate="onNextDate" />
         <DatePickerCalendar
-            :date="value"
+            :value="value"
+            :range-value="rangeValue"
             :month="month"
-            :current-month="currentMonth"
             :year="year"
             :years="years"
-            :current-year="currentYear"
             :calendar-type="selectedCalendarType"
             @input="onDateChange"
             @month="onMonthChange"
@@ -59,16 +60,19 @@ export default {
             type: Date,
             default: null,
         },
+        rangeValue: {
+            type: Date,
+            default: null,
+        },
     },
     data() {
-        const today = this.value || new Date();
+        const now = new Date();
+        const today = this.value || now;
         const year = today.getFullYear();
         const month = today.getMonth() + 1;
 
         return {
             years: getYearsWithinRange([], year),
-            currentYear: today.getFullYear(),
-            currentMonth: today.getMonth() + 1,
             month,
             year,
             selectedCalendarType: CALENDAR_TYPE.DAY,
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue
deleted file mode 100644
index d35dca073..000000000
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
- * See LICENSE for license details.
- */
-<template>
-    <div class="month">
-        <DatePickerNode
-            v-for="date in dates"
-            :key="`${date.year}|${date.month}|${date.day}`"
-            :selected="isSelectedDate(date)"
-            :disabled="date.disabled"
-            :current="isToday(date)"
-            :title="date.day"
-            @click.native="onSelectDate(date)" />
-    </div>
-</template>
-
-<script>
-import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
-import {
-    isSameDay,
-} from '@Core/models/calendar/calendar';
-
-export default {
-    name: 'DatePickerDays',
-    components: {
-        DatePickerNode,
-    },
-    props: {
-        dates: {
-            type: Array,
-            required: true,
-        },
-        selectedDates: {
-            type: Array,
-            default: () => [],
-        },
-    },
-    data() {
-        return {
-            currentDate: new Date(),
-        };
-    },
-    methods: {
-        onSelectDate(date) {
-            this.$emit('select', {
-                ...date,
-            });
-        },
-        isSelectedDate(date) {
-            const {
-                length,
-            } = this.selectedDates;
-            const parsedDate = new Date(date.year, date.month - 1, date.day);
-
-            if (!length || date.disabled) return null;
-            const {
-                0: firstDate,
-            } = this.selectedDates;
-
-            if (length === 1) {
-                return isSameDay(parsedDate, firstDate);
-            }
-
-            const {
-                [length - 1]: lastDate,
-            } = this.selectedDates;
-
-            return +parsedDate >= firstDate && +parsedDate <= lastDate;
-        },
-        isToday(date) {
-            const parsedDate = new Date(date.year, date.month - 1, date.day);
-
-            return isSameDay(parsedDate, this.currentDate);
-        },
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-    .month {
-        display: grid;
-        grid-template-columns: repeat(7, 32px);
-        grid-template-rows: repeat(6, 32px);
-        justify-items: center;
-        align-items: center;
-    }
-</style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
new file mode 100644
index 000000000..1fa9cde6f
--- /dev/null
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
@@ -0,0 +1,117 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+<template>
+    <div class="date-picker-month">
+        <DatePickerContentHeader :headers="weekDays" />
+        <div class="date-picker-month__nodes">
+            <DatePickerNode
+                v-for="date in nodes"
+                :key="`${date.year}|${date.month}|${date.day}`"
+                :selected="isSelectedDate(date)"
+                :disabled="date.disabled"
+                :within-range="isWithinRange(date)"
+                :current="isCurrentDate(date)"
+                :title="date.day"
+                @click.native="onSelectDate(date)" />
+        </div>
+    </div>
+</template>
+
+<script>
+import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
+import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
+import calendar, {
+    getParsedDate,
+    isEqual,
+    WEEK_DAYS,
+} from '@Core/models/calendar/calendar';
+import {
+    isWithinInterval,
+} from 'date-fns';
+
+export default {
+    name: 'DatePickerMonth',
+    components: {
+        DatePickerNode,
+        DatePickerContentHeader,
+    },
+    props: {
+        value: {
+            type: Date,
+            default: null,
+        },
+        rangeValue: {
+            type: Date,
+            default: null,
+        },
+        month: {
+            type: Number,
+            required: true,
+        },
+        year: {
+            type: Number,
+            required: true,
+        },
+    },
+    computed: {
+        nodes() {
+            return calendar(this.month, this.year);
+        },
+        parsedValue() {
+            return getParsedDate(this.value);
+        },
+        parsedRangeValue() {
+            return getParsedDate(this.rangeValue);
+        },
+        today() {
+            return getParsedDate(new Date());
+        },
+        weekDays() {
+            return Object.values(WEEK_DAYS);
+        },
+    },
+    methods: {
+        onSelectDate(date) {
+            this.$emit('select', date);
+        },
+        isSelectedDate(date) {
+            if (!this.parsedValue) {
+                return false;
+            }
+
+            return isEqual(this.parsedValue, date)
+                || (this.parsedRangeValue && isEqual(this.parsedRangeValue, date));
+        },
+        isCurrentDate(date) {
+            return isEqual(this.today, date);
+        },
+        isWithinRange(date) {
+            if (!(this.parsedRangeValue && this.parsedValue)) {
+                return false;
+            }
+
+            return isWithinInterval(new Date(date.year, date.month - 1, date.day), {
+                start: this.value,
+                end: this.rangeValue,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .date-picker-month {
+        display: flex;
+        flex-direction: column;
+
+        &__nodes {
+            display: grid;
+            grid-template-columns: repeat(7, 32px);
+            grid-template-rows: repeat(6, 32px);
+            justify-items: center;
+            align-items: center;
+        }
+    }
+</style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
index 98835bd0e..ef2f9a395 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
@@ -3,59 +3,133 @@
  * See LICENSE for license details.
  */
 <template>
-    <div class="months">
-        <DatePickerNode
-            v-for="month in months"
-            :key="month"
-            :selected="isSelectedMonth(month)"
-            :current="isCurrentMonth(month)"
-            :title="month"
-            @click.native="onClick(month)" />
+    <div class="date-picker-months">
+        <DatePickerContentHeader :headers="['Months']" />
+        <div class="date-picker-months__nodes">
+            <DatePickerNode
+                v-for="(month, index) in months"
+                :key="month"
+                :selected="isSelectedMonth(month)"
+                :current="isCurrentDate(month)"
+                :within-range="isWithinRange(month, index)"
+                :title="month"
+                @click.native="onClick(month)" />
+        </div>
     </div>
 </template>
 
 <script>
+import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
 import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
+import {
+    CALENDAR_MONTHS,
+    getParsedDate,
+} from '@Core/models/calendar/calendar';
 
 export default {
     name: 'DatePickerMonths',
     components: {
+        DatePickerContentHeader,
         DatePickerNode,
     },
     props: {
-        months: {
-            type: Array,
-            required: true,
+        value: {
+            type: Date,
+            default: null,
         },
-        selectedMonth: {
-            type: String,
-            default: '',
+        rangeValue: {
+            type: Date,
+            default: null,
         },
-        currentMonth: {
-            type: String,
+        year: {
+            type: Number,
             required: true,
         },
     },
+    computed: {
+        today() {
+            return new Date();
+        },
+        parsedValue() {
+            return getParsedDate(this.value);
+        },
+        parsedRangeValue() {
+            return getParsedDate(this.rangeValue);
+        },
+        currentMonth() {
+            return this.today.toLocaleString('default', {
+                month: 'short',
+            });
+        },
+        parsedYear() {
+            if (this.value) {
+                return this.value.getFullYear();
+            }
+
+            return null;
+        },
+        months() {
+            return Object.values(CALENDAR_MONTHS);
+        },
+        parsedMonth() {
+            if (!this.value || this.year !== this.parsedYear) {
+                return '';
+            }
+
+            return this.value.toLocaleString('default', {
+                month: 'short',
+            });
+        },
+        parsedRangeMonth() {
+            if (!this.rangeValue) {
+                return '';
+            }
+
+            return this.rangeValue.toLocaleString('default', {
+                month: 'short',
+            });
+        },
+    },
     methods: {
         onClick(month) {
             this.$emit('select', month);
         },
         isSelectedMonth(month) {
-            return this.selectedMonth === month;
+            if (this.rangeValue) {
+                return (this.year === this.parsedRangeValue.year && this.parsedRangeMonth === month)
+                    || (this.year === this.parsedValue.year && this.parsedMonth === month);
+            }
+
+            return this.parsedMonth === month;
         },
-        isCurrentMonth(month) {
+        isCurrentDate(month) {
             return this.currentMonth === month;
         },
+        isWithinRange(month, index) {
+            if (!(this.parsedRangeValue && this.parsedValue)) {
+                return false;
+            }
+
+            return (this.year < this.parsedRangeValue.year
+                || (this.year === this.parsedRangeValue.year && this.parsedRangeValue.month >= index + 1))
+                && (this.year > this.parsedValue.year
+                || (this.year === this.parsedValue.year && this.parsedValue.month <= index + 1));
+        },
     },
 };
 </script>
 
 <style lang="scss" scoped>
-    .months {
-        display: grid;
-        grid-template-columns: repeat(3, 75px);
-        grid-auto-rows: 40px;
-        align-items: center;
-        justify-items: center;
+    .date-picker-months {
+        display: flex;
+        flex-direction: column;
+
+        &__nodes {
+            display: grid;
+            grid-template-columns: repeat(3, 75px);
+            grid-auto-rows: 40px;
+            align-items: center;
+            justify-items: center;
+        }
     }
 </style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
index 59eff2667..525b9df47 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
@@ -97,9 +97,10 @@ export default {
             color: $GRAPHITE_DARK;
             font: $FONT_MEDIUM_14_20;
             cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
             &:hover {
-                box-shadow: $ELEVATOR_2_DP;
+                box-shadow: $ELEVATOR_HOVER_FOCUS;
             }
         }
     }
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
index cb554c1b4..07074a15f 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
@@ -3,59 +3,101 @@
  * See LICENSE for license details.
  */
 <template>
-    <div class="years">
-        <DatePickerNode
-            v-for="year in years"
-            :key="year"
-            :selected="isSelectedYear(year)"
-            :current="isCurrentYear(year)"
-            :title="year"
-            @click.native="onClick(year)" />
+    <div class="date-picker-years">
+        <DatePickerContentHeader :headers="['Years']" />
+        <div class="date-picker-years__nodes">
+            <DatePickerNode
+                v-for="year in nodes"
+                :key="year"
+                :selected="isSelectedYear(year)"
+                :current="isCurrentDate(year)"
+                :within-range="isWithinRange(year)"
+                :title="year"
+                @click.native="onClick(year)" />
+        </div>
     </div>
 </template>
 
 <script>
+import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
 import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
 
 export default {
     name: 'DatePickerYears',
     components: {
+        DatePickerContentHeader,
         DatePickerNode,
     },
     props: {
-        years: {
-            type: Array,
-            required: true,
+        value: {
+            type: Date,
+            default: null,
         },
-        selectedYear: {
-            type: Number,
+        rangeValue: {
+            type: Date,
             default: null,
         },
-        currentYear: {
+        nodes: {
+            type: Array,
+            required: true,
+        },
+        year: {
             type: Number,
             required: true,
         },
     },
+    computed: {
+        currentYear() {
+            return new Date().getFullYear();
+        },
+        parsedYear() {
+            if (this.value) {
+                return this.value.getFullYear();
+            }
+
+            return null;
+        },
+        parsedRangeYear() {
+            if (this.rangeValue) {
+                return this.rangeValue.getFullYear();
+            }
+
+            return null;
+        },
+    },
     methods: {
         onClick(year) {
             this.$emit('select', year);
         },
         isSelectedYear(year) {
-            return this.selectedYear === year;
+            return this.parsedYear === year || this.parsedRangeYear === year;
         },
-        isCurrentYear(year) {
+        isCurrentDate(year) {
             return this.currentYear === year;
         },
+        isWithinRange(year) {
+            if (!(this.rangeValue && this.value)) {
+                return false;
+            }
+
+            return this.parsedRangeYear >= year
+                && this.parsedYear <= year;
+        },
     },
 };
 </script>
 
 <style lang="scss" scoped>
-    .years {
-        display: grid;
-        grid-template-columns: repeat(5, 45px);
-        grid-auto-rows: 40px;
-        align-items: center;
-        justify-items: center;
+    .date-picker-years {
+        display: flex;
+        flex-direction: column;
+
+        &__nodes {
+            display: grid;
+            grid-template-columns: repeat(5, 45px);
+            grid-auto-rows: 40px;
+            align-items: center;
+            justify-items: center;
+        }
     }
 </style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index 9aaba8cd3..ec2bfd46e 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -4,75 +4,23 @@
  */
 <template>
     <div class="date-range-picker">
-        <div class="date-range-picker__left">
-            <DatePickerInputHeader
-                v-if="inputHeader"
-                header="From"
-                :value="headerFromValue"
-                @input="onFromHeaderValueChange" />
-            <DatePickerHeader
-                v-else
-                :header="fromHeader" />
-            <DatePickerNavigationHeader
-                :header="getDisplayingMonthAndYear(
-                    lowerBoundMonth, lowerBoundYear
-                )">
-                <template #previous>
-                    <Fab
-                        :theme="secondaryTheme"
-                        @click.native="previousMonth">
-                        <template #icon="{ color }">
-                            <IconArrowSingle
-                                :fill-color="color"
-                                :state="leftArrow" />
-                        </template>
-                    </Fab>
-                </template>
-                <template #next>
-                    <div class="expander" />
-                </template>
-            </DatePickerNavigationHeader>
-            <DatePickerContentHeader :headers="weekDays" />
-            <DatePickerDays
-                :dates="lowerBoundCalendarDates"
-                :selected-dates="parsedRange"
-                @select="onSelectRange" />
-        </div>
+        <DatePickerContent
+            :value="value.from"
+            :range-value="value.to"
+            @input="onSelectRange">
+            <template #header>
+                <DatePickerHeader :header="fromHeader" />
+            </template>
+        </DatePickerContent>
         <Divider vertical />
-        <div class="date-range-picker__right">
-            <DatePickerInputHeader
-                v-if="inputHeader"
-                header="To"
-                :value="headerToValue"
-                @input="onToHeaderValueChange" />
-            <DatePickerHeader
-                v-else
-                :header="toHeader" />
-            <DatePickerNavigationHeader
-                :header="getDisplayingMonthAndYear(
-                    upperBoundMonth, upperBoundYear
-                )">
-                <template #previous>
-                    <div class="expander" />
-                </template>
-                <template #next>
-                    <Fab
-                        :theme="secondaryTheme"
-                        @click.native="nextMonth">
-                        <template #icon="{ color }">
-                            <IconArrowSingle
-                                :fill-color="color"
-                                :state="rightArrow" />
-                        </template>
-                    </Fab>
-                </template>
-            </DatePickerNavigationHeader>
-            <DatePickerContentHeader :headers="weekDays" />
-            <DatePickerDays
-                :dates="upperBoundCalendarDates"
-                :selected-dates="parsedRange"
-                @select="onSelectRange" />
-        </div>
+        <DatePickerContent
+            :value="value.from"
+            :range-value="value.to"
+            @input="onSelectRange">
+            <template #header>
+                <DatePickerHeader :header="toHeader" />
+            </template>
+        </DatePickerContent>
     </div>
 </template>
 
@@ -80,10 +28,11 @@
 import Fab from '@Core/components/Buttons/Fab';
 import Divider from '@Core/components/Dividers/Divider';
 import IconArrowSingle from '@Core/components/Icons/Arrows/IconArrowSingle';
+import DatePickerContent from '@Core/components/Inputs/DatePicker/DatePickerContent';
 import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
-import DatePickerDays from '@Core/components/Inputs/DatePicker/DatePickerDays';
 import DatePickerHeader from '@Core/components/Inputs/DatePicker/DatePickerHeader';
 import DatePickerInputHeader from '@Core/components/Inputs/DatePicker/DatePickerInputHeader';
+import DatePickerMonth from '@Core/components/Inputs/DatePicker/DatePickerMonth';
 import DatePickerNavigationHeader from '@Core/components/Inputs/DatePicker/DatePickerNavigationHeader';
 import {
     ARROW,
@@ -105,8 +54,9 @@ import {
 export default {
     name: 'DateRangePickerContent',
     components: {
+        DatePickerContent,
         Fab,
-        DatePickerDays,
+        DatePickerMonth,
         DatePickerContentHeader,
         DatePickerNavigationHeader,
         IconArrowSingle,
@@ -155,21 +105,6 @@ export default {
         weekDays() {
             return Object.values(WEEK_DAYS);
         },
-        lowerBoundCalendarDates() {
-            return calendar(this.lowerBoundMonth, this.lowerBoundYear);
-        },
-        upperBoundCalendarDates() {
-            return calendar(this.upperBoundMonth, this.upperBoundYear);
-        },
-        parsedRange() {
-            return Object.keys(this.value).reduce((previous, current) => {
-                if (this.value[current]) {
-                    previous.push(new Date(this.value[current]));
-                }
-
-                return previous;
-            }, []);
-        },
         fromHeader() {
             if (this.value.from) {
                 return `From ${formatDate(this.value.from, this.format)}`;
@@ -186,77 +121,32 @@ export default {
         },
     },
     methods: {
-        onFromHeaderValueChange(value) {
-            this.headerFromValue = value;
-        },
-        onToHeaderValueChange(value) {
-            this.headerToValue = value;
-        },
-        getDisplayingMonthAndYear(month, year) {
-            return `${this.getDisplayingMonth(month)} ${year}`;
-        },
-        getDisplayingMonth(month) {
-            return Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
-        },
-        previousMonth() {
-            const {
-                month: previousMonth, year: previousYear,
-            } = getPreviousMonth(this.lowerBoundMonth, this.lowerBoundYear);
-
-            this.lowerBoundMonth = previousMonth;
-            this.lowerBoundYear = previousYear;
-            this.upperBoundMonth = this.upperBoundMonth > 1
-                ? this.upperBoundMonth - 1
-                : 12;
-            this.upperBoundYear = this.upperBoundMonth === 12
-                ? this.upperBoundYear - 1
-                : this.upperBoundYear;
-        },
-        nextMonth() {
-            const {
-                month: nextMonth, year: nextYear,
-            } = getNextMonth(this.upperBoundMonth, this.upperBoundYear);
-
-            this.upperBoundMonth = nextMonth;
-            this.upperBoundYear = nextYear;
-            this.lowerBoundMonth = this.lowerBoundMonth < 12
-                ? this.lowerBoundMonth + 1
-                : 1;
-            this.lowerBoundYear = this.lowerBoundMonth === 1
-                ? this.lowerBoundYear + 1
-                : this.lowerBoundYear;
-        },
         onSelectRange(date) {
-            const to = this.value.to
-                ? new Date(this.value.to)
-                : null;
-
-            const from = this.value.from
-                ? new Date(this.value.from)
-                : null;
-
-            const dateToInsert = new Date(date.year, date.month - 1, date.day);
+            const {
+                from, to,
+            } = this.value;
 
-            if (from) {
-                if (+from > +dateToInsert) {
-                    this.$emit('input', {
-                        from: dateToInsert,
-                        to,
-                    });
-                    return;
-                }
-            } else {
+            if (from && to) {
+                this.$emit('input', {
+                    from: date,
+                    to: null,
+                });
+            } else if (from && date < from) {
+                this.$emit('input', {
+                    from: date,
+                    to: null,
+                });
+            } else if (from === null) {
                 this.$emit('input', {
-                    from: dateToInsert,
+                    from: date,
                     to,
                 });
-                return;
+            } else {
+                this.$emit('input', {
+                    from,
+                    to: date,
+                });
             }
-
-            this.$emit('input', {
-                from,
-                to: dateToInsert,
-            });
         },
     },
 };
@@ -267,10 +157,6 @@ export default {
         display: grid;
         grid-auto-flow: column;
 
-        &__left, &__right {
-            padding: 16px;
-        }
-
         .interactive-header {
             margin-bottom: 8px;
         }
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
index 7e8de86e6..1c500683e 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
@@ -5,7 +5,9 @@
 <template>
     <span
         :class="classes"
-        v-text="title" />
+        v-text="title"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave" />
 </template>
 
 <script>
@@ -20,6 +22,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        withinRange: {
+            type: Boolean,
+            default: false,
+        },
         current: {
             type: Boolean,
             default: false,
@@ -32,23 +38,38 @@ export default {
             required: true,
         },
     },
+    data() {
+        return {
+            isHovered: false,
+        };
+    },
     computed: {
         classes() {
             return [
-                'node',
+                'date-picker-node',
                 {
-                    'node--selected': this.selected,
-                    'node--disabled': this.disabled,
-                    'node--current': this.current,
+                    'date-picker-node--selected': this.selected,
+                    'date-picker-node--within-range': this.withinRange && !this.selected,
+                    'date-picker-node--disabled': this.disabled,
+                    'date-picker-node--current': this.current,
+                    'date-picker-node--hovered': this.isHovered,
                 },
             ];
         },
     },
+    methods: {
+        onMouseEnter() {
+            this.isHovered = true;
+        },
+        onMouseLeave() {
+            this.isHovered = false;
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-    .node {
+    .date-picker-node {
         position: relative;
         display: flex;
         justify-content: center;
@@ -58,6 +79,21 @@ export default {
         font: $FONT_MEDIUM_12_16;
         cursor: pointer;
 
+        &::before {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            box-shadow: $ELEVATOR_HOVER_FOCUS;
+            opacity: 0;
+            content: "";
+            transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+        }
+
+        &--within-range {
+            background-color: $GREEN_LIGHT;
+        }
+
         &:not(&--selected):not(&--disabled) {
             color: $GRAPHITE_DARK;
         }
@@ -86,8 +122,14 @@ export default {
             }
         }
 
+        &--hovered::before {
+            opacity: 1;
+        }
+
         &--disabled {
             color: $GRAPHITE_LIGHT;
+            pointer-events: none;
+            cursor: not-allowed;
         }
     }
 </style>
diff --git a/modules/@ergonode/core/src/models/calendar/calendar.js b/modules/@ergonode/core/src/models/calendar/calendar.js
index b16976d80..acb444600 100644
--- a/modules/@ergonode/core/src/models/calendar/calendar.js
+++ b/modules/@ergonode/core/src/models/calendar/calendar.js
@@ -69,6 +69,24 @@ export const isDate = (date) => {
     return isDateObject && isValidDate;
 };
 
+export const getParsedDate = (date) => {
+    if (!date) return null;
+
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+
+    return {
+        day,
+        month,
+        year,
+    };
+};
+
+export const isEqual = (date, withDate) => date.day === withDate.day
+        && date.month === withDate.month
+        && date.year === withDate.year;
+
 export const getMonthIndex = (monthDesc) => {
     const monthDescriptions = Object.values(CALENDAR_MONTHS);