diff --git a/src/apps/officer-web/Screens/Dashboard/Layout/Header/JobsIndicator.tsx b/src/apps/officer-web/Screens/Dashboard/Layout/Header/JobsIndicator.tsx
index 181d2090..22072fef 100644
--- a/src/apps/officer-web/Screens/Dashboard/Layout/Header/JobsIndicator.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Layout/Header/JobsIndicator.tsx
@@ -25,7 +25,7 @@ export const JobsIndicator = () => {
       <Link
         to={counts.runningJobId ? `/jobs/${counts.runningJobId}` : '/jobs'}
         title={counts.running ? 'Running job' : 'Nothing running'}
-        className={`${pill} ${counts.running ? 'bg-blue-500/30 text-white hover:bg-blue-500/45' : 'bg-white/10 text-white/50 hover:bg-white/20'}`}
+        className={`${pill} text-white ${counts.running ? 'bg-blue-500/60 hover:bg-blue-500/75' : 'bg-black/25 hover:bg-black/35'}`}
       >
         <Loader2 className={`h-3.5 w-3.5 ${counts.running ? 'animate-spin' : ''}`} />
         {counts.running}
@@ -33,7 +33,7 @@ export const JobsIndicator = () => {
       <Link
         to="/jobs"
         title="Queued jobs"
-        className={`${pill} ${counts.queued ? 'bg-amber-500/30 text-white hover:bg-amber-500/45' : 'bg-white/10 text-white/50 hover:bg-white/20'}`}
+        className={`${pill} text-white ${counts.queued ? 'bg-amber-500/70 hover:bg-amber-500/85' : 'bg-black/25 hover:bg-black/35'}`}
       >
         <ListOrdered className="h-3.5 w-3.5" />
         {counts.queued}