diff --git a/src/components/forms/controls/DatePicker/DatePicker.module.scss b/src/components/forms/controls/DatePicker/DatePicker.module.scss
index 6a457eb..643269b 100644
--- a/src/components/forms/controls/DatePicker/DatePicker.module.scss
+++ b/src/components/forms/controls/DatePicker/DatePicker.module.scss
@@ -85,7 +85,7 @@ $navigation-distance: 1rem;
 }
 
 :global(.react-datepicker__day-names) {
-  border-bottom: 0.1rem solid bk.$color-blackberry-300;
+  border-bottom: 0.1rem solid bk.$theme-date-picker-rule-default;
 }
 
 :global(.react-datepicker__day-name),
@@ -111,8 +111,16 @@ $navigation-distance: 1rem;
 
 :global(.react-datepicker__day--selected),
 :global(.react-datepicker__day--keyboard-selected) {
-  background: bk.$color-blueberry-500; // TODO use proper variable
-  border-radius: 50%;
+  background: bk.$theme-date-picker-background-selected;
+  border-radius: bk.$border-radius-circle;
+  color: bk.$theme-date-picker-text-selected;
+}
+
+:global(.react-datepicker__day--selected:not([aria-disabled=true]):hover),
+:global(.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover) {
+  background: bk.$theme-date-picker-background-hover;
+  border-radius: bk.$border-radius-circle;
+  color: bk.$theme-date-picker-text-hover;
 }
 
 :global(.react-datepicker__day:not(&--selected):hover) {
diff --git a/src/styling/variables.scss b/src/styling/variables.scss
index 9459566..822e324 100644
--- a/src/styling/variables.scss
+++ b/src/styling/variables.scss
@@ -414,6 +414,11 @@ $light-spinner-track: $color-neutral-50 !default;
 $light-spinner-fill: $color-blueberry-600 !default;
 $light-date-picker-text-default: $color-neutral-900 !default;
 $light-date-picker-text-disabled: $color-neutral-500 !default;
+$light-date-picker-background-selected: $color-blueberry-600 !default;
+$light-date-picker-text-selected: $color-neutral-0 !default;
+$light-date-picker-background-hover: $color-blueberry-700 !default;
+$light-date-picker-text-hover: $color-neutral-0 !default;
+$light-date-picker-rule-default: $color-blackberry-20 !default;
 $light-scroll-bar-thumb-default: $color-neutral-90 !default;
 $light-scroll-bar-slider-default: $color-neutral-50 !default;
 $light-tooltip-action-icon-background-hover: $color-neutral-40 !default;
@@ -650,6 +655,11 @@ $dark-spinner-track: $color-neutral-600 !default;
 $dark-spinner-fill: $color-blueberry-600 !default;
 $dark-date-picker-text-default: $color-neutral-10 !default;
 $dark-date-picker-text-disabled: $color-neutral-300 !default;
+$dark-date-picker-background-selected: $color-blueberry-500 !default;
+$dark-date-picker-text-hover: $color-neutral-10 !default;
+$dark-date-picker-background-hover: $color-blueberry-600 !default;
+$dark-date-picker-text-selected: $color-neutral-10 !default;
+$dark-date-picker-rule-default: $color-blackberry-300 !default;
 $dark-scroll-bar-thumb-default: $color-blackberry-200 !default;
 $dark-scroll-bar-slider-default: $color-blackberry-800 !default;
 $dark-tooltip-action-icon-background-hover: $color-blackberry-200 !default;
@@ -886,6 +896,11 @@ $theme-spinner-track: #{ld($light-spinner-track, $dark-spinner-track)} !default;
 $theme-spinner-fill: #{ld($light-spinner-fill, $dark-spinner-fill)} !default;
 $theme-date-picker-text-default: #{ld($light-date-picker-text-default, $dark-date-picker-text-default)} !default;
 $theme-date-picker-text-disabled: #{ld($light-date-picker-text-disabled, $dark-date-picker-text-disabled)} !default;
+$theme-date-picker-background-selected: #{ld($light-date-picker-background-selected, $dark-date-picker-background-selected)} !default;
+$theme-date-picker-text-selected: #{ld($light-date-picker-text-selected, $dark-date-picker-text-selected)} !default;
+$theme-date-picker-background-hover: #{ld($light-date-picker-background-selected, $dark-date-picker-background-selected)} !default;
+$theme-date-picker-text-hover: #{ld($light-date-picker-text-selected, $dark-date-picker-text-selected)} !default;
+$theme-date-picker-rule-default: #{ld($light-date-picker-rule-default, $dark-date-picker-rule-default)} !default;
 $theme-scroll-bar-thumb-default: #{ld($light-scroll-bar-thumb-default, $dark-scroll-bar-thumb-default)} !default;
 $theme-scroll-bar-slider-default: #{ld($light-scroll-bar-slider-default, $dark-scroll-bar-slider-default)} !default;
 $theme-tooltip-action-icon-background-hover: #{ld($light-tooltip-action-icon-background-hover, $dark-tooltip-action-icon-background-hover)} !default;