diff --git a/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx b/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
index 9081c8b..5c954d5 100644
--- a/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
@@ -4,15 +4,15 @@ function CurrentJobAction() {
   return (
     <div className='job-action  dark:bg-black'>
       <p className="my-3 py-1 text-base active-owner">
-          <table className="w-full text-sm text-left text-gray-500">
+          <table className="w-full text-sm text-left text-gray-500 ">
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <h1 className="text-xl text-dark-gray dark:text-white">
+                              <div>
                                   Waiting for the completion message from the client before you can approve.
-                              </h1>
+                              </div>
                               {/*<div className="flex flex-col flex-[0.9]">  </div>*/}
                       </div>
                   </td>
diff --git a/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx b/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
index d68c1c6..78a8759 100644
--- a/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
@@ -62,14 +62,14 @@ function CurrentTaskAction({jobDetails}) {
   return (
     <div className='job-action  dark:bg-black'>
 
-          <table className="w-full text-sm text-left text-gray-500 active-worker">
+          <table className="w-full text-sm text-left text-gray-500 active-worker ">
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
-                          <h1 className="text-xl text-dark-gray dark:text-white">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
+                          <div>
                               I completed this task and ready for review and acceptance.
-                          </h1>
+                          </div>
                           {/*<div className="flex flex-col flex-[0.9]">*/}
 
                           {/*</div>*/}
diff --git a/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx b/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
index f943d7c..c6829d0 100644
--- a/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
@@ -107,11 +107,11 @@ function PastDueJobAction({jobDetails}) {
             <tbody>
             <tr>
                 <td>
-                    <div className="flex space-x-2 items-center w-full">
+                    <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                            <h1 className="text-xl text-dark-gray dark:text-white">
+                            <div className="text-xl dark:text-red-700">
                                 Time allocated has passed
-                            </h1>
+                            </div>
                             {/*<div className="flex flex-col flex-[0.9]">  </div>*/}
                     </div>
                 </td>
diff --git a/src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx b/src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx
index d742b73..5bd83f3 100644
--- a/src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx
@@ -8,11 +8,11 @@ function PastDueTaskAction() {
             <tbody>
             <tr>
                 <td>
-                    <div className="flex space-x-2 items-center w-full">
+                    <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                            <h1 className="text-xl text-dark-gray dark:text-white">
+                            <div>
                                 You have missed the allocated time
-                            </h1>
+                            </div>
                             {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                     </div>
                 </td>
diff --git a/src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx b/src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx
index f12fe39..6f808ff 100644
--- a/src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx
@@ -96,11 +96,11 @@ function ReviewJobAction({jobDetails}) {
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <h1 className="text-xl text-dark-gray dark:text-white">
+                              <div>
                                   This Job is Ready for your review
-                              </h1>
+                              </div>
                               {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                       </div>
                   </td>
diff --git a/src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx b/src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx
index 9163dcd..0e90332 100644
--- a/src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 function ReviewTaskAction() {
   return (
-    <div className='job-action  dark:bg-black'>
+    <div className='job-action  dark:bg-black task_action_panel'>
       <p className="my-3 py-1 text-base text-dark-gray dark:text-white">
         Waiting for the completion message from the client before you can approve. Worker True & Review Job
       </p>
diff --git a/src/index.css b/src/index.css
index 0bc0a72..273b8f0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,6 +32,12 @@
 .referral{
   margin-bottom: 20px
 }
+.task_action_panel{
+  font-family: sans; color: white;
+  font-weight: bolder;
+  font-size: 14px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+}
 .heroSilderTitle{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;
@@ -42,7 +48,7 @@
   min-width: 280px !important;
 }
 .job-action{
-  background-color: aliceblue;
+  background-color: #4687ba;
   height: 100px;
   border-radius: 15px;
   padding: 5px;
@@ -59,6 +65,7 @@
   color: black;
   font-weight: bold;
   border-radius: 9px;
+  font-size: 14px;
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
 .siderCardDescription{