diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index c300d7a..d375553 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -120,10 +120,48 @@ const headerAndAccessors = [
     {
         Header: "Status",
         accessor: "status",
+        Cell: (original) => {
+            const statusValue = original.value;
+            let formattedStatus;
+            switch (statusValue) {
+                case "InProgress":
+                    formattedStatus = "In Progress";
+                    break;
+                case "notStarted":
+                    formattedStatus = "Not Started";
+                    break;
+                case "done":
+                    formattedStatus = "Done";
+                    break;
+                default:
+                    formattedStatus = statusValue;
+            }
+            return <span>{formattedStatus}</span>;
+        } 
     },
     {
         Header: "Priority",
         accessor: "priority",
+        Cell: (original) => {
+            const prioirtyValue = original.value;
+            let color;
+            switch (prioirtyValue) {
+              case "HIGH":
+                color = "red";
+                break;
+              case "MEDIUM":
+                color = "orange";
+                break;
+              case "LOW":
+                color = "green";
+                break;
+              default:
+                color = "black";
+            }
+       
+            return <span style={{ color }}>{prioirtyValue}</span>;
+          }
+    
     },
     {
         Header: "Is Locked",
diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx
index ac28d5d..f8d3ccd 100644
--- a/frontend/react-app/src/pages/TeamTasks.jsx
+++ b/frontend/react-app/src/pages/TeamTasks.jsx
@@ -143,11 +143,49 @@ function TeamTasks(){
     {
       Header: "Priority",
       accessor: "priority",
+      Cell: (original) => {
+        const prioirtyValue = original.value;
+        let color;
+        switch (prioirtyValue) {
+          case "HIGH":
+            color = "red";
+            break;
+          case "MEDIUM":
+            color = "orange";
+            break;
+          case "LOW":
+            color = "green";
+            break;
+          default:
+            color = "black";
+        }
+   
+        return <span style={{ color }}>{prioirtyValue}</span>;
+      }
+
     },
     {
-        Header: "Status",
-        accessor: "status",
-    },
+      Header: "Status",
+      accessor: "status",
+      Cell: (original) => {
+          const statusValue = original.value;
+          let formattedStatus;
+          switch (statusValue) {
+              case "InProgress":
+                  formattedStatus = "In Progress";
+                  break;
+              case "notStarted":
+                  formattedStatus = "Not Started";
+                  break;
+              case "done":
+                  formattedStatus = "Done";
+                  break;
+              default:
+                  formattedStatus = statusValue;
+          }
+          return <span>{formattedStatus}</span>;
+      } 
+  },
     {
       Header: "Is Locked",
       accessor: "isLocked",