diff --git a/api/resources/translations/messages-en.properties b/api/resources/translations/messages-en.properties
index b82e85d6016..420ad01c5a8 100644
--- a/api/resources/translations/messages-en.properties
+++ b/api/resources/translations/messages-en.properties
@@ -1272,7 +1272,7 @@ tasks.group.leave = Are you sure you want to leave this page? You will no longer
 tasks.group.completed = All household tasks completed
 tasks.group.title = Other household tasks
 tasks.sidebar.filter.title = Filter
-tasks.sidebar.filter.reset = Clear all filters
+tasks.sidebar.filter.reset = Reset
 tasks.sidebar.filter.submit = Apply
 tasks.sidebar.filter.overdue = Due date
 tasks.sidebar.filter.overdue.overdue = Overdue
diff --git a/tests/page-objects/default/tasks/tasks.wdio.page.js b/tests/page-objects/default/tasks/tasks.wdio.page.js
index 5ee830e0064..78b5a471c6a 100644
--- a/tests/page-objects/default/tasks/tasks.wdio.page.js
+++ b/tests/page-objects/default/tasks/tasks.wdio.page.js
@@ -140,8 +140,9 @@ const filterByOverdue = async (overdueOption) => {
     await sidebarFilterSelectors.overdueAccordionBody().waitForDisplayed();
   }
 
-  const option = sidebarFilterSelectors.overdueAccordionBody().$(`a*=${overdueOption}`);
-  await option.click();
+  const option = sidebarFilterSelectors.overdueAccordionBody().$(`label*=${overdueOption}`);
+  const radio = await option.$('input[type="radio"]');
+  await radio.click();
 };
 
 const filterByTaskType = async (taskType) => {
diff --git a/webapp/src/css/sidebar-filter.less b/webapp/src/css/sidebar-filter.less
index a54ab99a4c4..2371e527f80 100644
--- a/webapp/src/css/sidebar-filter.less
+++ b/webapp/src/css/sidebar-filter.less
@@ -216,6 +216,7 @@
         display: block;
         font-size: @font-medium;
         color: @text-normal-color;
+        font-weight: normal;
 
         &:not(:first-child) {
           margin-top: 10px;
diff --git a/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.html b/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.html
index 4421e8a8eb1..059eb22ed28 100644
--- a/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.html
+++ b/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.html
@@ -4,9 +4,17 @@
       *ngFor="let status of statuses"
       [class.selected]="filter?.selected.has(status)"
       [class.disabled]="disabled">
-      <a role="menuitem" tabindex="-1" [attr.data-value]="status" (click)="!disabled && filter?.toggle(status)">
+      <label>
+        <input
+          type="radio"
+          name="overdue-filter"
+          [value]="status"
+          [checked]="filter?.selected.has(status)"
+          [disabled]="disabled"
+          (change)="toggle(status)"
+        />
         {{ 'tasks.sidebar.filter.overdue.' + status | translate }}
-      </a>
+      </label>
     </li>
   </ul>
-</div>
+</div>
\ No newline at end of file
diff --git a/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.ts b/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.ts
index 8627749bd1b..98ef7fcc76b 100644
--- a/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.ts
+++ b/webapp/src/ts/components/filters/overdue-filter/overdue-filter.component.ts
@@ -38,10 +38,19 @@ export class OverdueFilterComponent {
     if (this.disabled) {
       return;
     }
-
     this.filter.clear();
   }
 
+  toggle(status: string) {
+    if (this.filter.selected.has(status)) {
+      this.filter.clear();
+    } else {
+      this.filter.clear();
+      this.filter.selected.add(status);
+      this.filter.apply();
+    }
+  }
+
   countSelected() {
     return this.filter?.countSelected();
   }
diff --git a/webapp/src/ts/modules/tasks/tasks-sidebar-filter.component.html b/webapp/src/ts/modules/tasks/tasks-sidebar-filter.component.html
index b2ca6519201..476ad1270f3 100644
--- a/webapp/src/ts/modules/tasks/tasks-sidebar-filter.component.html
+++ b/webapp/src/ts/modules/tasks/tasks-sidebar-filter.component.html
@@ -79,6 +79,13 @@
         </mat-expansion-panel>
       </mat-accordion>
     </div>
+
+    <div class="sidebar-footer">
+      <button type="button" class="btn btn-primary" (click)="toggleSidebarFilter()">
+        {{ 'tasks.sidebar.filter.submit' | translate }}
+      </button>
+    </div>
+
   </div>
 </section>
 
@@ -88,4 +95,4 @@
     <span>{{ numSelected | translate }}</span>
     <span class="fa fa-times" (click)="clearFilters(filters); $event.stopPropagation();"></span>
   </div>
-</ng-template>
+</ng-template>
\ No newline at end of file