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 9b243d907..538f79fe8 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
@@ -26,7 +26,15 @@
           i18n-placeholder
           (change)="onSetCreatedRelativeDate($event)">
           <ng-template ng-option-tmp let-item="item">
-            <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+            <div class="d-flex">{{ item.name }}
+              <span class="ms-auto text-muted small">
+                @if (item.dateEnd) {
+                  {{ item.date | customDate:'MMM d' }} &ndash; {{ item.dateEnd | customDate:'mediumDate' }}
+                } @else {
+                  {{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
+                }
+              </span>
+            </div>
           </ng-template>
           </ng-select>
         </div>
@@ -102,7 +110,15 @@
             i18n-placeholder
             (change)="onSetAddedRelativeDate($event)">
             <ng-template ng-option-tmp let-item="item">
-              <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+              <div class="d-flex">{{ item.name }}
+                <span class="ms-auto text-muted small">
+                  @if (item.dateEnd) {
+                    {{ item.date | customDate:'MMM d' }} &ndash; {{ item.dateEnd | customDate:'mediumDate' }}
+                  } @else {
+                    {{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
+                  }
+                </span>
+              </div>
             </ng-template>
           </ng-select>
         </div>
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 fa9bd622b..e5d64ddc6 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
@@ -118,22 +118,42 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     {
       id: RelativeDate.PREVIOUS_WEEK,
       name: $localize`Previous week`,
-      date: null,
+      date: new Date(
+        new Date().getFullYear(),
+        new Date().getMonth(),
+        new Date().getDate() - new Date().getDay() - 6
+      ),
+      dateEnd: new Date(
+        new Date().getFullYear(),
+        new Date().getMonth(),
+        new Date().getDate() - new Date().getDay()
+      ),
     },
     {
       id: RelativeDate.PREVIOUS_MONTH,
       name: $localize`Previous month`,
-      date: null,
+      date: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
+      dateEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 0),
     },
     {
       id: RelativeDate.PREVIOUS_QUARTER,
       name: $localize`Previous quarter`,
-      date: null,
+      date: new Date(
+        new Date().getFullYear(),
+        Math.floor(new Date().getMonth() / 3) * 3 - 3,
+        1
+      ),
+      dateEnd: new Date(
+        new Date().getFullYear(),
+        Math.floor(new Date().getMonth() / 3) * 3,
+        0
+      ),
     },
     {
       id: RelativeDate.PREVIOUS_YEAR,
       name: $localize`Previous year`,
-      date: null,
+      date: new Date('1/1/' + (new Date().getFullYear() - 1)),
+      dateEnd: new Date('12/31/' + (new Date().getFullYear() - 1)),
     },
   ]