diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
index e4dcd791..b1e04b09 100644
--- a/src/components/Dashboard/Tasks.jsx
+++ b/src/components/Dashboard/Tasks.jsx
@@ -16,49 +16,49 @@ const TasksCard = () => {
   } = useDashboardTasksCardData(projectId);
   if (isLoading) return <TasksSkeleton />;
   return (
-    <div className="card p-3 h-100 text-center d-flex justify-content-between">
-      <div className="d-flex justify-content-start align-items-center mb-3">
-        <h5 className="fw-bold mb-0 ms-2">
-          <i className="bx bx-task text-success"></i> Tasks
-        </h5>
+  <div className="card p-3 h-100 text-center d-flex flex-column justify-content-between">
+  {/* Header */}
+  <div className="d-flex justify-content-start align-items-center mb-3">
+    <h5 className="fw-bold mb-0 ms-2">
+      <i className="bx bx-task text-success"></i> Tasks
+    </h5>
+  </div>
+
+  {isError ? (
+    <div className="d-flex flex-column justify-content-center align-items-center p-3">
+      <i className="bx bx-error-circle bx-sm fs-2 mb-2"></i>
+      <small className="text-muted mb-2">
+        {error?.message || "Unable to load data at the moment."}
+      </small>
+      <span
+        className={`text-muted ${isFetching ? "cursor-wait" : "cursor-pointer"}`}
+        onClick={refetch}
+      >
+        <i className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}></i>
+        Retry
+      </span>
+    </div>
+  ) : (
+    <div className="d-flex justify-content-around align-items-start flex-wrap mt-n2">
+      {/* Total Tasks */}
+      <div className="text-center flex-fill p-2">
+        <h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}>
+          {tasksCardData?.totalTasks?.toLocaleString() ?? 0}
+        </h4>
+        <small className="text-muted d-block">Total</small>
       </div>
 
-      {isError ? (
-        <div className="d-flex flex-column justify-content-center align-items-center  p-1">
-          <i className="bx bx-error-circle bx-sm fs-2 "></i>
-
-          <small className="text-muted mb-2">
-            {error?.message || "Unable to load data at the moment."}
-          </small>
-          <span
-            className={`text-muted ${
-              isFetching ? "cursor-wait" : "cursor-pointer"
-            }`}
-            onClick={refetch}
-          >
-            <i
-              className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
-            ></i>{" "}
-            Retry
-          </span>
-        </div>
-      ) : (
-        <div className="d-flex justify-content-around align-items-start mt-n2">
-          <div>
-            <h4 className="mb-0 fw-bold">
-              {tasksCardData?.totalTasks?.toLocaleString() ?? 0}
-            </h4>
-            <small className="text-muted">Total</small>
-          </div>
-          <div>
-            <h4 className="mb-0 fw-bold">
-              {tasksCardData?.completedTasks?.toLocaleString() ?? 0}
-            </h4>
-            <small className="text-muted">Completed</small>
-          </div>
-        </div>
-      )}
+      {/* Completed Tasks */}
+      <div className="text-center flex-fill p-2">
+        <h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}>
+          {tasksCardData?.completedTasks?.toLocaleString() ?? 0}
+        </h4>
+        <small className="text-muted d-block">Completed</small>
+      </div>
     </div>
+  )}
+</div>
+
   );
 };