diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
index c3ff61ba8..e80bedc1d 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
@@ -40,17 +40,8 @@
             </div>
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>From</span>
-              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #createdFromFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="createdDateFrom = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="createdDateFromPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+                maxlength="10" [(ngModel)]="createdDateFrom">
             </div>
 
           </div>
@@ -66,20 +57,16 @@
             </div>
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>To</span>
-              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #createdToFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="createdDateTo = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="createdDateToPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+                maxlength="10" [(ngModel)]="createdDateTo">
             </div>
 
           </div>
+
+          <div class="list-group-item d-flex p-2" role="menuitem">
+            <ngb-datepicker #dp (dateSelect)="onCreatedChange()" class="w-100 border-0" [displayMonths]="1" [dayTemplate]="t" [(ngModel)]="createdDate" />
+          </div>
+
         </div>
       </div>
       <div class="col">
@@ -117,16 +104,7 @@
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>From</span>
               <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #addedFromFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="addedDateFrom = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="addedDateFromPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
+                maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker">
             </div>
 
           </div>
@@ -143,21 +121,29 @@
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>To</span>
               <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #addedToFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="addedDateTo = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="addedDateToPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
+                maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker">
             </div>
 
           </div>
         </div>
+
+        <div class="list-group-item d-flex p-2" role="menuitem">
+          <ngb-datepicker #dp (dateSelect)="onAddedChange()" class="w-100 border-0" [displayMonths]="1" [dayTemplate]="t" [(ngModel)]="addedDate" />
+        </div>
       </div>
     </div>
   </div>
 </div>
+
+<ng-template #t let-date let-focused="focused">
+  <span
+    class="day text-center px-2 d-inline-block"
+    [class.focused]="focused"
+    [class.bg-dark]="isRange(date)"
+    [class.text-primary.bg-light]="isHovered(date) || isInside(date)"
+    (mouseenter)="hoveredDate = date"
+    (mouseleave)="hoveredDate = null"
+  >
+    {{ date.day }}
+  </span>
+</ng-template>
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
index ebd34b29a..ba4180ba2 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
@@ -2,7 +2,7 @@
   white-space: nowrap;
 
   @media(min-width: 768px) {
-    --bs-dropdown-min-width: 40rem;
+    --bs-dropdown-min-width: 38rem;
   }
 
   @media screen and (max-width: 767px) {
@@ -47,3 +47,8 @@
     border-radius: 0.15rem;
   }
 }
+
+::ng-deep .ngb-dp-day, .day {
+  height: 2.3rem !important;
+  width: 2.3rem !important;
+}
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
index e7d506d18..25fbeee83 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
@@ -9,6 +9,7 @@ import {
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
+  NgbDate,
   NgbDateAdapter,
   NgbDatepickerModule,
   NgbDropdownModule,
@@ -57,7 +58,10 @@ export enum RelativeDate {
 export class DatesDropdownComponent implements OnInit, OnDestroy {
   public popperOptions = popperOptionsReenablePreventOverflow
 
-  constructor(settings: SettingsService) {
+  constructor(
+    settings: SettingsService,
+    private isoDateAdapter: NgbDateAdapter<string>
+  ) {
     this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }
 
@@ -96,6 +100,10 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
   @Input()
   createdDateFrom: string
 
+  createdDate: string
+  addedDate: string
+  hoveredDate: NgbDate
+
   @Output()
   createdDateFromChange = new EventEmitter<string>()
 
@@ -186,6 +194,52 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
+  isHovered(date: NgbDate) {
+    const createdDateFromNgbDate = this.createdDateFrom
+      ? NgbDate.from({
+          year: new Date(this.createdDateFrom).getFullYear(),
+          month: new Date(this.createdDateFrom).getMonth() + 1,
+          day: new Date(this.createdDateFrom).getDate(),
+        })
+      : null
+    return (
+      this.createdDateFrom &&
+      !this.createdDateTo &&
+      this.hoveredDate &&
+      date.after(createdDateFromNgbDate) &&
+      date.before(this.hoveredDate)
+    )
+  }
+
+  isInside(date: NgbDate) {
+    const createdDateFromNgbDate = this.createdDateFrom
+      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateFrom))
+      : null
+    const createdDateToNgbDate = this.createdDateTo
+      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateTo))
+      : null
+    return (
+      this.createdDateTo &&
+      date.after(createdDateFromNgbDate) &&
+      date.before(createdDateToNgbDate)
+    )
+  }
+
+  isRange(date: NgbDate) {
+    const createdDateFromNgbDate = this.createdDateFrom
+      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateFrom))
+      : null
+    const createdDateToNgbDate = this.createdDateTo
+      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateTo))
+      : null
+    return (
+      date.equals(createdDateFromNgbDate) ||
+      (this.createdDateTo && date.equals(createdDateToNgbDate)) ||
+      this.isInside(date) ||
+      this.isHovered(date)
+    )
+  }
+
   onChange() {
     this.createdDateToChange.emit(this.createdDateTo)
     this.createdDateFromChange.emit(this.createdDateFrom)
@@ -203,6 +257,50 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     })
   }
 
+  onCreatedChange() {
+    const createdNgbDate = NgbDate.from(
+      this.isoDateAdapter.fromModel(this.createdDate)
+    )
+
+    if (!this.createdDateFrom && !this.createdDateTo) {
+      this.createdDateFrom = this.isoDateAdapter.toModel(createdNgbDate)
+    } else if (
+      this.createdDateFrom &&
+      !this.createdDateTo &&
+      createdNgbDate.after(
+        NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateFrom))
+      )
+    ) {
+      this.createdDateTo = this.isoDateAdapter.toModel(createdNgbDate)
+    } else {
+      this.createdDateTo = null
+      this.createdDateFrom = this.isoDateAdapter.toModel(createdNgbDate)
+    }
+    this.onChangeDebounce()
+  }
+
+  onAddedChange() {
+    const addedNgbDate = NgbDate.from(
+      this.isoDateAdapter.fromModel(this.createdDate)
+    )
+
+    if (!this.addedDateFrom && !this.addedDateTo) {
+      this.addedDateFrom = this.isoDateAdapter.toModel(addedNgbDate)
+    } else if (
+      this.addedDateFrom &&
+      !this.addedDateTo &&
+      addedNgbDate.after(
+        NgbDate.from(this.isoDateAdapter.fromModel(this.addedDateFrom))
+      )
+    ) {
+      this.addedDateTo = this.isoDateAdapter.toModel(addedNgbDate)
+    } else {
+      this.addedDateTo = null
+      this.addedDateFrom = this.isoDateAdapter.toModel(addedNgbDate)
+    }
+    this.onChangeDebounce()
+  }
+
   onChangeDebounce() {
     this.createdRelativeDate = null
     this.addedRelativeDate = null