diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html
index 96ce89d22..17c4a7915 100644
--- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html
+++ b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html
@@ -81,12 +81,14 @@ <h2 class="filter-dialog-title" mat-dialog-title>{{ data.title }}</h2>
       <mat-label>Dates</mat-label>
       <mat-date-range-input>
         <input
+          [errorStateMatcher]="dateMatcher"
           matStartDate
           placeholder="mm/dd/yyyy"
           [(ngModel)]="range.start"
           #startDate="ngModel"
           (dateChange)="startDateChanged($event)" />
         <input
+          [errorStateMatcher]="dateMatcher"
           matEndDate
           placeholder="mm/dd/yyyy"
           [(ngModel)]="range.end"
@@ -94,10 +96,7 @@ <h2 class="filter-dialog-title" mat-dialog-title>{{ data.title }}</h2>
           (dateChange)="endDateChanged($event)" />
       </mat-date-range-input>
       <mat-error
-        *ngIf="
-          (startDate.invalid && (startDate.dirty || startDate.touched)) ||
-          (endDate.invalid && (endDate.dirty || endDate.touched))
-        "
+        *ngIf="startDate.invalid || endDate.invalid"
         role="alert"
         aria-live="assertive">
         <span>Please, select the correct date range in mm/dd/yyyy format.</span>
diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts
index 3ac37973c..26bce3260 100644
--- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts
+++ b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts
@@ -36,7 +36,9 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
+  FormGroupDirective,
   FormsModule,
+  NgForm,
   NgModel,
   ReactiveFormsModule,
 } from '@angular/forms';
@@ -52,7 +54,7 @@ import {
   MatDatepickerInputEvent,
   MatDatepickerModule,
 } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
+import { ErrorStateMatcher, MatNativeDateModule } from '@angular/material/core';
 import {
   FilterName,
   DateRange as LocalDateRange,
@@ -64,6 +66,22 @@ import {
 } from '../../../../model/testrun-status';
 import { DeviceValidators } from '../../../devices/components/device-form/device.validators';
 
+class DateErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(
+    control: FormControl | null,
+    form: FormGroupDirective | NgForm | null
+  ): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(
+      control &&
+      control.errors &&
+      control.errors['matDatepickerParse'].text.trim().length > 0 &&
+      control.invalid &&
+      (control.touched || isSubmitted)
+    );
+  }
+}
+
 interface DialogData {
   trigger: ElementRef;
   filter: string;
@@ -244,6 +262,8 @@ export class FilterDialogComponent
     this.dialogRef.close();
   }
 
+  dateMatcher = new DateErrorStateMatcher();
+
   startDateChanged(event: MatDatepickerInputEvent<Date>) {
     const date = event.value;
     if (date && date.getFullYear() > this.today.getFullYear()) {
diff --git a/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts b/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts
index dae20b609..c261a8347 100644
--- a/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts
+++ b/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts
@@ -14,7 +14,6 @@ export interface OpenFilterEvent {
 
 @Component({
   selector: 'app-filter-header',
-
   imports: [
     MatIconModule,
     MatButtonModule,