diff --git a/components/Inputs/Date/DatePicker.vue b/components/Inputs/Date/DatePicker.vue
index 4fb3762be..b6033ae9b 100644
--- a/components/Inputs/Date/DatePicker.vue
+++ b/components/Inputs/Date/DatePicker.vue
@@ -4,6 +4,9 @@
  */
 <template>
     <div class="date-picker">
+        <slot name="header">
+            <DatePickerHeader :header="header" />
+        </slot>
         <DatePickerNavigationHeader
             :header="calendarHeader"
             @changeCalendarType="onChangeCalendarType"
@@ -26,6 +29,7 @@
 </template>
 
 <script>
+import DatePickerHeader from '~/components/Inputs/Date/DatePickerHeader';
 import DatePickerNavigationHeader from '~/components/Inputs/Date/DatePickerNavigationHeader';
 import DatePickerCalendarContent from '~/components/Inputs/Date/DatePickerCalendarContent';
 import {
@@ -38,12 +42,15 @@ import {
     getYearsWithinRange,
     getHeaderForCalendarDaysType,
     getHeaderForCalendarYearsType,
+    zeroPad,
+    CALENDAR_MONTHS,
 } from '~/model/calendar/calendar';
 import { CalendarType } from '~/model/calendar/CalendarType';
 
 export default {
     name: 'DatePicker',
     components: {
+        DatePickerHeader,
         DatePickerNavigationHeader,
         DatePickerCalendarContent,
     },
@@ -52,22 +59,50 @@ export default {
             type: Date,
             default: null,
         },
+        calendarDate: {
+            type: Date,
+            default() {
+                return new Date();
+            },
+        },
     },
     data() {
-        const currentDate = new Date();
-        const year = currentDate.getFullYear();
-        const month = currentDate.getMonth() + 1;
+        const today = new Date();
+        const year = this.calendarDate.getFullYear();
+        const month = this.calendarDate.getMonth() + 1;
 
         return {
             years: getYearsWithinRange([], year),
-            currentYear: year,
-            currentMonth: month,
+            currentYear: today.getFullYear(),
+            currentMonth: today.getMonth() + 1,
             month,
             year,
             selectedCalendarType: CalendarType.DAY,
             calendarHeader: getHeaderForCalendarDaysType(month, year),
         };
     },
+    computed: {
+        header() {
+            if (!this.value) return 'Pick a date';
+
+            const day = this.value.getDate();
+            const month = this.value.getMonth();
+            const year = this.value.getFullYear();
+
+            switch (this.selectedCalendarType) {
+            case CalendarType.DAY:
+                return `${day}.${zeroPad(month, 2)}.${year}`;
+            case CalendarType.MONTH: {
+                const monthDesc = Object.values(CALENDAR_MONTHS)[month];
+                return `${monthDesc} ${year}`;
+            }
+            case CalendarType.YEAR:
+                return year;
+            default:
+                return '';
+            }
+        },
+    },
     methods: {
         onDateChange(value) {
             this.$emit('input', value);
diff --git a/components/Inputs/Date/DatePickerHeader.vue b/components/Inputs/Date/DatePickerHeader.vue
new file mode 100644
index 000000000..b9e4ff875
--- /dev/null
+++ b/components/Inputs/Date/DatePickerHeader.vue
@@ -0,0 +1,36 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+/*
+* Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+* See LICENSE for license details.
+*/
+<template>
+    <div class="header">
+        <span v-text="header" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DatePickerHeader',
+    props: {
+        header: {
+            type: [String, Number],
+            required: true,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .header {
+        @include setFont(medium, small, regular, $graphite);
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 32px;
+    }
+</style>
diff --git a/components/Inputs/Date/DatePickerNavigationHeader.vue b/components/Inputs/Date/DatePickerNavigationHeader.vue
index 06f5e8ca5..128e29f54 100644
--- a/components/Inputs/Date/DatePickerNavigationHeader.vue
+++ b/components/Inputs/Date/DatePickerNavigationHeader.vue
@@ -4,24 +4,26 @@
  */
 <template>
     <div class="date-picker-header">
-        <Button
-            slot="previous"
-            icon="arrow-single trans-quarter"
-            fab
-            color="transparent"
-            ripple-color="rgba(235, 235, 236, 1)"
-            @click.native="onPrevious" />
+        <slot name="previous">
+            <Button
+                icon="arrow-single trans-quarter"
+                fab
+                color="transparent"
+                ripple-color="rgba(235, 235, 236, 1)"
+                @click.native="onPrevious" />
+        </slot>
         <span
             class="header"
             @click="onClick"
             v-text="header" />
-        <Button
-            slot="next"
-            icon="arrow-single trans-three-fourth"
-            fab
-            color="transparent"
-            ripple-color="rgba(235, 235, 236, 1)"
-            @click.native="onNext" />
+        <slot name="next">
+            <Button
+                icon="arrow-single trans-three-fourth"
+                fab
+                color="transparent"
+                ripple-color="rgba(235, 235, 236, 1)"
+                @click.native="onNext" />
+        </slot>
     </div>
 </template>
 
diff --git a/components/Inputs/Date/DateRangePicker.vue b/components/Inputs/Date/DateRangePicker.vue
index 47058aef7..ddbd03dd6 100644
--- a/components/Inputs/Date/DateRangePicker.vue
+++ b/components/Inputs/Date/DateRangePicker.vue
@@ -4,79 +4,73 @@
  */
 <template>
     <div class="date-range-picker">
-        <div class="date-picker">
+        <div class="date-range-picker__left">
             <DatePickerNavigationHeader
                 :header="getDisplayingMonthAndYear(
                     lowerBoundMonth, lowerBoundYear
-                )"
-                @previousDate="onPreviousDate"
-                @nextDate="onNextDate" />
-            <!--            <DatePickerContentHeader :headers="weekDays" />-->
-            <!--            <DatePickerMonthDays-->
-            <!--                :dates="lowerBoundCalendarDates"-->
-            <!--                :selected-dates="parsedRange"-->
-            <!--                @select="onSelectRange" />-->
-            <DatePickerCalendarContent
-                :date="value.from"
-                :month="month"
-                :current-month="currentMonth"
-                :year="year"
-                :years="years"
-                :current-year="currentYear"
-                :calendar-type="selectedCalendarType"
-                @input="onDateChange"
-                @month="onMonthChange"
-                @year="onYearChange"
-                @calendarType="onCalendarTypeChange"
-                @calendarHeader="onCalendarHeaderChange" />
+                )">
+                <Button
+                    slot="previous"
+                    icon="arrow-dart trans-quarter"
+                    fab
+                    color="transparent"
+                    ripple-color="rgba(235, 235, 236, 1)"
+                    @click.native="previousMonth" />
+                <div
+                    slot="next"
+                    class="expander" />
+            </DatePickerNavigationHeader>
+            <DatePickerContentHeader :headers="weekDays" />
+            <DatePickerMonthDays
+                :dates="lowerBoundCalendarDates"
+                :selected-dates="parsedRange"
+                @select="onSelectRange" />
         </div>
-        <div class="vertical-divider" />
-        <div class="date-picker">
+        <div class="date-range-picker__right">
             <DatePickerNavigationHeader
                 :header="getDisplayingMonthAndYear(
                     upperBoundMonth, upperBoundYear
-                )"
-                @previousDate="onPreviousDate"
-                @nextDate="onNextDate" />
-            <!--            <DatePickerContentHeader :headers="weekDays" />-->
-            <!--            <DatePickerMonthDays-->
-            <!--                :dates="upperBoundCalendarDates"-->
-            <!--                :selected-dates="parsedRange"-->
-            <!--                @select="onSelectRange" />-->
-            <DatePickerCalendarContent
-                :date="value.to"
-                :month="month"
-                :current-month="currentMonth"
-                :year="year"
-                :years="years"
-                :current-year="currentYear"
-                :calendar-type="selectedCalendarType"
-                @input="onDateChange"
-                @month="onMonthChange"
-                @year="onYearChange"
-                @calendarType="onCalendarTypeChange"
-                @calendarHeader="onCalendarHeaderChange" />
+                )">
+                <div
+                    slot="previous"
+                    class="expander" />
+                <Button
+                    slot="next"
+                    icon="arrow-dart trans-three-fourth"
+                    fab
+                    color="transparent"
+                    ripple-color="rgba(235, 235, 236, 1)"
+                    @click.native="nextMonth" />
+            </DatePickerNavigationHeader>
+            <DatePickerContentHeader :headers="weekDays" />
+            <DatePickerMonthDays
+                :dates="upperBoundCalendarDates"
+                :selected-dates="parsedRange"
+                @select="onSelectRange" />
         </div>
     </div>
 </template>
 
 <script>
-import DatePickerCalendarContent from '~/components/Inputs/Date/DatePickerCalendarContent';
+
+import Button from '~/components/Buttons/Button';
+import DatePickerMonthDays from '~/components/Inputs/Date/DatePickerMonthDays';
+import DatePickerContentHeader from '~/components/Inputs/Date/DatePickerContentHeader';
 import DatePickerNavigationHeader from '~/components/Inputs/Date/DatePickerNavigationHeader';
 import calendar, {
     getNextMonth,
     getPreviousMonth,
-    getYearsWithinRange,
-    getHeaderForCalendarDaysType,
-    getHeaderForCalendarYearsType,
+    WEEK_DAYS,
+    CALENDAR_MONTHS,
 } from '~/model/calendar/calendar';
-import { CalendarType } from '~/model/calendar/CalendarType';
 
 export default {
     name: 'DateRangePicker',
     components: {
+        Button,
+        DatePickerMonthDays,
+        DatePickerContentHeader,
         DatePickerNavigationHeader,
-        DatePickerCalendarContent,
     },
     props: {
         value: {
@@ -91,20 +85,16 @@ export default {
         const year = today.getFullYear();
 
         return {
-            years: getYearsWithinRange([], year),
-            currentYear: year,
-            currentMonth: month,
-            month,
-            year,
-            selectedCalendarType: CalendarType.DAY,
-            calendarHeader: getHeaderForCalendarDaysType(month, year),
-            // lowerBoundMonth: month,
-            // lowerBoundYear: year,
-            // upperBoundMonth: month === 12 ? 1 : month + 1,
-            // upperBoundYear: month === 12 ? year + 1 : year,
+            lowerBoundMonth: month,
+            lowerBoundYear: year,
+            upperBoundMonth: month === 12 ? 1 : month + 1,
+            upperBoundYear: month === 12 ? year + 1 : year,
         };
     },
     computed: {
+        weekDays() {
+            return Object.values(WEEK_DAYS);
+        },
         lowerBoundCalendarDates() {
             return calendar(this.lowerBoundMonth, this.lowerBoundYear);
         },
@@ -122,42 +112,13 @@ export default {
         },
     },
     methods: {
-        onDateChange(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);
-
-            if (from) {
-                if (+from > +dateToInsert) {
-                    this.$emit('input', { from: dateToInsert, to });
-                    return;
-                }
-            } else {
-                this.$emit('input', { from: dateToInsert, to });
-                return;
-            }
-
-            this.$emit('input', { from, to: dateToInsert });
-        },
-        onMonthChange(month) {
-            this.month = month;
+        getDisplayingMonthAndYear(month, year) {
+            return `${this.getDisplayingMonth(month)} ${year}`;
         },
-        onYearChange(year) {
-            this.year = year;
+        getDisplayingMonth(month) {
+            return Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
         },
-        onCalendarTypeChange(type) {
-            this.selectedCalendarType = type;
-        },
-        onCalendarHeaderChange(header) {
-            this.calendarHeader = header;
-        },
-        onPreviousDate() {
+        previousMonth() {
             const { month, year } = getPreviousMonth(this.lowerBoundMonth, this.lowerBoundYear);
 
             this.lowerBoundMonth = month;
@@ -169,7 +130,7 @@ export default {
                 ? this.upperBoundYear - 1
                 : this.upperBoundYear;
         },
-        onNextDate() {
+        nextMonth() {
             const { month, year } = getNextMonth(this.upperBoundMonth, this.upperBoundYear);
 
             this.upperBoundMonth = month;
@@ -181,22 +142,28 @@ export default {
                 ? this.lowerBoundYear + 1
                 : this.lowerBoundYear;
         },
-        onChangeCalendarType() {
-            switch (this.selectedCalendarType) {
-            case CalendarType.DAY:
-                this.selectedCalendarType = CalendarType.MONTH;
-                this.calendarHeader = this.year;
-                break;
-            case CalendarType.MONTH:
-                this.selectedCalendarType = CalendarType.YEAR;
-                this.calendarHeader = getHeaderForCalendarYearsType(this.years);
-                break;
-            case CalendarType.YEAR:
-                this.selectedCalendarType = CalendarType.DAY;
-                this.calendarHeader = getHeaderForCalendarDaysType(this.month, this.year);
-                break;
-            default: break;
+        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);
+
+            if (from) {
+                if (+from > +dateToInsert) {
+                    this.$emit('input', { from: dateToInsert, to });
+                    return;
+                }
+            } else {
+                this.$emit('input', { from: dateToInsert, to });
+                return;
             }
+
+            this.$emit('input', { from, to: dateToInsert });
         },
     },
 };
@@ -204,17 +171,18 @@ export default {
 
 <style lang="scss" scoped>
     .date-range-picker {
-        display: grid;
-        grid-template-columns: 256px 1px 256px;
-        grid-auto-flow: column;
+        display: flex;
+
+        &__left {
+            margin-right: 8px;
+        }
 
-        .date-picker {
-            padding: 16px;
+        &__right {
+            margin-left: 8px;
         }
 
-        .vertical-divider {
-            height: 100%;
-            background-color: $lightGrey;
+        .expander {
+            flex-basis: 32px;
         }
     }
 </style>
diff --git a/model/calendar/calendar.js b/model/calendar/calendar.js
index c0c5c3184..d228d7ece 100644
--- a/model/calendar/calendar.js
+++ b/model/calendar/calendar.js
@@ -31,7 +31,7 @@ export const CALENDAR_MONTHS = {
     December: 'Dec',
 };
 
-export const CALENDAR_WEEKS = 6;
+export const CALENDAR_WEEKS = 5;
 
 // Pads a string value with leading zeroes(0) until length is reached
 // For example: zeroPad(5, 2) => "05"
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index e079a6032..8c15835fa 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -3,24 +3,16 @@
  * See LICENSE for license details.
  */
 <template>
-    <PageWrapper>
-        <DatePicker v-model="date" />
-        <DateRangePicker v-model="rangeDate" />
-    </PageWrapper>
+    <PageWrapper />
 </template>
 
 <script>
-
 import PageWrapper from '~/components/Layout/PageWrapper';
-import DatePicker from '~/components/Inputs/Date/DatePicker';
-import DateRangePicker from '~/components/Inputs/Date/DateRangePicker';
 
 export default {
     name: 'Settings',
     components: {
         PageWrapper,
-        DatePicker,
-        DateRangePicker,
     },
     data() {
         return {