diff --git a/src/components/Task/CardTask.tsx b/src/components/Task/CardTask.tsx
index 3aa2854..a70215e 100644
--- a/src/components/Task/CardTask.tsx
+++ b/src/components/Task/CardTask.tsx
@@ -284,8 +284,20 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
                                             startIcon={<AccessTime />}
                                             variant="contained"
                                             component="span"
+                                            style={{
+                                                backgroundColor: 
+                                                taskData.status === "Completed" 
+                                                ? "green" 
+                                                : taskData.status === "Canceled" 
+                                                ? "red" 
+                                                : "initial",
+                                                color: "white",
+                                                fontWeight: "bold",
+                                                borderRadius: "12px",
+                                                padding: "6px 16px",
+                                            }}
                                         >
-                                            End Date: {taskData.endDate}
+                                            {taskData.status === "Completed" || taskData.status === "Canceled" ? "Ended" : `End Date: ${taskData.endDate}`}
                                         </Button>
                                     </Box>
                                 </CardContent>