diff --git a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html
index 108fc0698..7d8b886ff 100644
--- a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html
@@ -9,7 +9,7 @@
 <div class="container">
   <mat-card class="tasks-card">
     <mat-card-content>
-      <div class="card-heading">{{ 'labels.heading.Pending Tasks' | translate }}</div>
+      <div class="card-heading pending-tasks-heading">{{ 'labels.heading.Pending Tasks' | translate }}</div>
       <mat-divider></mat-divider>
       <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
         <a
diff --git a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.scss b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.scss
index 66c6e2fec..c431bdde6 100644
--- a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.scss
+++ b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.scss
@@ -13,6 +13,11 @@
   margin-bottom: 16px;
 }
 
+:host-context(.dark-theme) .pending-tasks-heading {
+  color: #fff;
+  text-shadow: 0 1px 4px rgb(0 0 0 / 70%);
+}
+
 mat-divider {
   margin-bottom: 16px;
 }