diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx
index 55947684..41e7ff9e 100644
--- a/src/pages/Activities/DailyTask.jsx
+++ b/src/pages/Activities/DailyTask.jsx
@@ -14,7 +14,9 @@ import FilterIcon from "../../components/common/FilterIcon"; // Import the Filte
 const DailyTask = () => {
   const [searchParams] = useSearchParams();
   const projectIdFromUrl = searchParams.get("project");
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
   const {
     projects,
     loading: project_loading,
@@ -26,7 +28,7 @@ const DailyTask = () => {
 
   // State for filters (moved to FilterIcon, but we need to receive them here)
   const [filters, setFilters] = useState({
-    selectedBuilding: '',
+    selectedBuilding: "",
     selectedFloors: [],
     selectedActivities: [],
   });
@@ -42,7 +44,14 @@ const DailyTask = () => {
       }
       setInitialized(true);
     }
-  }, [project_loading, projects, projectIdFromUrl, selectedProject, initialized, dispatch]);
+  }, [
+    project_loading,
+    projects,
+    projectIdFromUrl,
+    selectedProject,
+    initialized,
+    dispatch,
+  ]);
 
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
 
@@ -68,29 +77,40 @@ const DailyTask = () => {
       let filteredTasks = TaskList;
 
       if (filters.selectedBuilding) {
-        filteredTasks = filteredTasks.filter(task =>
-          task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding
+        filteredTasks = filteredTasks.filter(
+          (task) =>
+            task?.workItem?.workArea?.floor?.building?.name ===
+            filters.selectedBuilding
         );
       }
 
       if (filters.selectedFloors.length > 0) {
-        filteredTasks = filteredTasks.filter(task =>
-          filters.selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
+        filteredTasks = filteredTasks.filter((task) =>
+          filters.selectedFloors.includes(
+            task?.workItem?.workArea?.floor?.floorName
+          )
         );
       }
 
       if (filters.selectedActivities.length > 0) {
-        filteredTasks = filteredTasks.filter(task =>
-          filters.selectedActivities.includes(task?.workItem?.activityMaster?.activityName)
+        filteredTasks = filteredTasks.filter((task) =>
+          filters.selectedActivities.includes(
+            task?.workItem?.activityMaster?.activityName
+          )
         );
       }
       setTaskLists(filteredTasks);
     } else {
-        // If TaskList is null (e.g., during initial load or project change before data arrives),
-        // ensure TaskLists is also empty to avoid displaying stale data.
-        setTaskLists([]);
+      // If TaskList is null (e.g., during initial load or project change before data arrives),
+      // ensure TaskLists is also empty to avoid displaying stale data.
+      setTaskLists([]);
     }
-  }, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]);
+  }, [
+    TaskList,
+    filters.selectedBuilding,
+    filters.selectedFloors,
+    filters.selectedActivities,
+  ]);
 
   useEffect(() => {
     const AssignmentDates = [
@@ -119,7 +139,11 @@ const DailyTask = () => {
   useEffect(() => {
     // Ensure Bootstrap's Popover is initialized correctly
     popoverRefs.current.forEach((el) => {
-      if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') {
+      if (
+        el &&
+        window.bootstrap &&
+        typeof window.bootstrap.Popover === "function"
+      ) {
         // Dispose existing popovers to prevent duplicates if component re-renders
         const existingPopover = window.bootstrap.Popover.getInstance(el);
         if (existingPopover) {
@@ -137,7 +161,11 @@ const DailyTask = () => {
     // Cleanup function for popovers when component unmounts or dependencies change
     return () => {
       popoverRefs.current.forEach((el) => {
-        if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') {
+        if (
+          el &&
+          window.bootstrap &&
+          typeof window.bootstrap.Popover === "function"
+        ) {
           const existingPopover = window.bootstrap.Popover.getInstance(el);
           if (existingPopover) {
             existingPopover.dispose();
@@ -155,14 +183,18 @@ const DailyTask = () => {
     // --- IMPORTANT: Clear old data immediately to show loading state ---
     setTaskLists([]); // This makes the table empty, allowing the spinner to show
     // Reset filters when project changes (communicate to FilterIcon to clear)
-    setFilters({ selectedBuilding: '', selectedFloors: [], selectedActivities: [] });
+    setFilters({
+      selectedBuilding: "",
+      selectedFloors: [],
+      selectedActivities: [],
+    });
   };
 
   return (
     <>
       {/* Report Task Modal */}
       <div
-        className={`modal fade ${isModalOpen ? "show d-block" : ""}`} 
+        className={`modal fade ${isModalOpen ? "show d-block" : ""}`}
         tabIndex="-1"
         role="dialog"
         style={{ display: isModalOpen ? "block" : "none" }}
@@ -173,7 +205,8 @@ const DailyTask = () => {
           closeModal={closeModal}
           refetch={refetch}
         />
-        {isModalOpen && <div className="modal-backdrop fade show"></div>} {/* Add backdrop */}
+        {isModalOpen && <div className="modal-backdrop fade show"></div>}{" "}
+        {/* Add backdrop */}
       </div>
 
       {/* Report Task Comments Modal */}
@@ -188,7 +221,8 @@ const DailyTask = () => {
           commentsData={comments}
           closeModal={closeCommentModal}
         />
-        {isModalOpenComment && <div className="modal-backdrop fade show"></div>} {/* Add backdrop */}
+        {isModalOpenComment && <div className="modal-backdrop fade show"></div>}{" "}
+        {/* Add backdrop */}
       </div>
 
       <div className="container-xxl flex-grow-1 container-p-y">
@@ -198,7 +232,7 @@ const DailyTask = () => {
             { label: "Daily Progress Report", link: null },
           ]}
         ></Breadcrumb>
-        <div className="card card-action mb-6">
+        <div className="card card-action mb-6 ">
           <div className="card-body p-1 p-sm-2">
             <div className="row d-flex justify-content-between align-items-center">
               <div className="col-md-6 d-flex gap-3 align-items-center col-12 text-start mb-2 mb-md-0">
@@ -258,94 +292,117 @@ const DailyTask = () => {
                 </thead>
                 <tbody className="table-border-bottom-0">
                   {/* --- Spinner when tasks are loading --- */}
-                  {task_loading && (
+                  {(task_loading || project_loading) && (
                     <tr>
-                      <td colSpan={6} className="text-center"> {/* ColSpan set to 6 based on your table headers */}
-                        <div className="spinner-border text-primary" role="status">
-                          <span className="visually-hidden">Loading...</span>
+                      <td colSpan={6} className="text-center">
+                        {" "}
+                        {/* ColSpan set to 6 based on your table headers */}
+                        <div className="mt-10 mb-10 pt-5  pb-10">
+                          <div
+                            className="spinner-border text-primary"
+                            role="status"
+                          >
+                            <span className="visually-hidden">Loading...</span>
+                          </div>
+                          <p className="mt-2">Loading Tasks...</p>
                         </div>
-                        <p className="mt-2">Loading Tasks...</p>
                       </td>
                     </tr>
                   )}
                   {/* --- "No Reports Found" message only if not loading and no tasks --- */}
-                  {!task_loading && TaskLists.length === 0 && (
-                    <tr>
-                      <td colSpan={6} className="text-center"> {/* ColSpan set to 6 */}
-                        <p>No Reports Found</p>
-                      </td>
-                    </tr>
-                  )}
+                  {!task_loading &&
+                    !project_loading &&
+                    TaskLists.length === 0 && (
+                      <tr>
+                        <td colSpan={6} className="text-center">
+                          <div className="mt-10 mb-10 pt-10 pb-10">
+                            {" "}
+                            {/* ColSpan set to 6 */}
+                            <p>No Reports Found</p>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
                   {/* --- Render tasks when not loading and tasks exist --- */}
-                  {!task_loading && TaskLists.length > 0 && dates.map((date, i) => {
-                    const tasksForDate = TaskLists.filter((task) =>
-                      task.assignmentDate.includes(date)
-                    );
-                    // Only render the date header if there are tasks for that date after filtering
-                    if (tasksForDate.length === 0) return null;
+                  {!task_loading &&
+                    TaskLists.length > 0 &&
+                    dates.map((date, i) => {
+                      const tasksForDate = TaskLists.filter((task) =>
+                        task.assignmentDate.includes(date)
+                      );
+                      // Only render the date header if there are tasks for that date after filtering
+                      if (tasksForDate.length === 0) return null;
 
-                    return (
-                      <React.Fragment key={i}>
-                        <tr className="table-row-header">
-                          <td colSpan={6} className="text-start"> {/* ColSpan set to 6 */}
-                            <strong>{moment(date).format("DD-MM-YYYY")}</strong>
-                          </td>
-                        </tr>
-                        {tasksForDate.map((task, index) => {
-                          const refIndex = `${i}-${index}`;
-                          return (
-                            <React.Fragment key={refIndex}>
-                              <tr>
-                                <td className="flex-wrap text-start">
-                                  <div>
-                                    {task.workItem.activityMaster
-                                      .activityName || "No Activity Name"}
-                                  </div>
-                                  <div>
-                                    <label className="col-form-label text-sm">
-                                      {" "}
-                                      {
-                                        task?.workItem?.workArea?.floor
-                                          ?.building?.name
-                                      }{" "}
-                                      <i
-                                        className="bx bx-chevron-right text-sm"
-                                        style={{ fontSize: ".75rem" }}
-                                      ></i>{" "}
-                                      {
-                                        task?.workItem?.workArea?.floor
-                                          ?.floorName
-                                      }{" "}
-                                      <i
-                                        className="bx bx-chevron-right text-sm"
-                                        style={{ fontSize: ".75rem" }}
-                                      >
+                      return (
+                        <React.Fragment key={i}>
+                          <tr className="table-row-header">
+                            <td colSpan={6} className="text-start">
+                              {" "}
+                              {/* ColSpan set to 6 */}
+                              <strong>
+                                {moment(date).format("DD-MM-YYYY")}
+                              </strong>
+                            </td>
+                          </tr>
+                          {tasksForDate.map((task, index) => {
+                            const refIndex = `${i}-${index}`;
+                            return (
+                              <React.Fragment key={refIndex}>
+                                <tr>
+                                  <td className="flex-wrap text-start">
+                                    <div>
+                                      {task.workItem.activityMaster
+                                        .activityName || "No Activity Name"}
+                                    </div>
+                                    <div>
+                                      <label className="col-form-label text-sm">
                                         {" "}
-                                      </i>
-                                      {task?.workItem?.workArea?.areaName}
-                                    </label>
-                                  </div>
-                                </td>
-                                <td>
-                                  {task.plannedTask || "NA"} /
-                                  {task.workItem.plannedWork -
-                                    task.workItem.completedWork}
-                                </td>
-                                <td>{task.completedTask}</td>
-                                <td>{moment(task.assignmentDate).format("DD-MM-YYYY")}</td>
-                                <td className="text-center">
-                                  <div
-                                    key={refIndex}
-                                    ref={(el) =>
-                                      (popoverRefs.current[refIndex] = el)
-                                    }
-                                    tabIndex="0"
-                                    className="d-flex align-items-center avatar-group justify-content-center"
-                                    data-bs-toggle="popover"
-                                    data-bs-trigger="focus"
-                                    data-bs-placement="left"
-                                    data-bs-html="true"
-                                    data-bs-content={`
+                                        {
+                                          task?.workItem?.workArea?.floor
+                                            ?.building?.name
+                                        }{" "}
+                                        <i
+                                          className="bx bx-chevron-right text-sm"
+                                          style={{ fontSize: ".75rem" }}
+                                        ></i>{" "}
+                                        {
+                                          task?.workItem?.workArea?.floor
+                                            ?.floorName
+                                        }{" "}
+                                        <i
+                                          className="bx bx-chevron-right text-sm"
+                                          style={{ fontSize: ".75rem" }}
+                                        >
+                                          {" "}
+                                        </i>
+                                        {task?.workItem?.workArea?.areaName}
+                                      </label>
+                                    </div>
+                                  </td>
+                                  <td>
+                                    {task.plannedTask || "NA"} /
+                                    {task.workItem.plannedWork -
+                                      task.workItem.completedWork}
+                                  </td>
+                                  <td>{task.completedTask}</td>
+                                  <td>
+                                    {moment(task.assignmentDate).format(
+                                      "DD-MM-YYYY"
+                                    )}
+                                  </td>
+                                  <td className="text-center">
+                                    <div
+                                      key={refIndex}
+                                      ref={(el) =>
+                                        (popoverRefs.current[refIndex] = el)
+                                      }
+                                      tabIndex="0"
+                                      className="d-flex align-items-center avatar-group justify-content-center"
+                                      data-bs-toggle="popover"
+                                      data-bs-trigger="focus"
+                                      data-bs-placement="left"
+                                      data-bs-html="true"
+                                      data-bs-content={`
                                       <div class="border border-secondary rounded custom-popover p-2 px-3">
                                         ${task.teamMembers
                                           .map(
@@ -353,84 +410,93 @@ const DailyTask = () => {
                                             <div class="d-flex align-items-center gap-2 mb-2">
                                               <div class="avatar avatar-xs">
                                                 <span class="avatar-initial rounded-circle bg-label-primary">
-                                                  ${member?.firstName?.charAt(0) || ""
-                                                  }${member?.lastName?.charAt(0) || ""
-                                                  }
+                                                  ${
+                                                    member?.firstName?.charAt(
+                                                      0
+                                                    ) || ""
+                                                  }${
+                                              member?.lastName?.charAt(0) || ""
+                                            }
                                                 </span>
                                               </div>
-                                              <span>${member.firstName} ${member.lastName
-                                              }</span>
+                                              <span>${member.firstName} ${
+                                              member.lastName
+                                            }</span>
                                             </div>
                                           `
                                           )
                                           .join("")}
                                       </div>
                                     `}
-                                  >
-                                    {task.teamMembers
-                                      .slice(0, 3)
-                                      .map((member) => (
+                                    >
+                                      {task.teamMembers
+                                        .slice(0, 3)
+                                        .map((member) => (
+                                          <div
+                                            key={member.id}
+                                            data-bs-toggle="tooltip"
+                                            data-bs-html="true"
+                                            data-popup="tooltip-custom"
+                                            data-bs-placement="top"
+                                            title={`${member.firstName} ${member.lastName}`}
+                                            className="avatar avatar-xs"
+                                          >
+                                            <span className="avatar-initial rounded-circle bg-label-primary">
+                                              {member?.firstName.slice(0, 1)}
+                                            </span>
+                                          </div>
+                                        ))}
+                                      {task.teamMembers.length > 3 && (
                                         <div
-                                          key={member.id}
-                                          data-bs-toggle="tooltip"
-                                          data-bs-html="true"
-                                          data-popup="tooltip-custom"
-                                          data-bs-placement="top"
-                                          title={`${member.firstName} ${member.lastName}`}
                                           className="avatar avatar-xs"
+                                          data-bs-toggle="tooltip"
+                                          data-bs-placement="bottom"
+                                          title={`${
+                                            task.teamMembers.length - 3
+                                          } more`}
                                         >
-                                          <span className="avatar-initial rounded-circle bg-label-primary">
-                                            {member?.firstName.slice(0, 1)}
+                                          <span className="avatar-initial rounded-circle bg-label-secondary pull-up">
+                                            +{task.teamMembers.length - 3}
                                           </span>
                                         </div>
-                                      ))}
-                                    {task.teamMembers.length > 3 && (
-                                      <div
-                                        className="avatar avatar-xs"
-                                        data-bs-toggle="tooltip"
-                                        data-bs-placement="bottom"
-                                        title={`${task.teamMembers.length - 3
-                                          } more`}
-                                      >
-                                        <span className="avatar-initial rounded-circle bg-label-secondary pull-up">
-                                          +{task.teamMembers.length - 3}
-                                        </span>
-                                      </div>
-                                    )}
-                                  </div>
-                                </td>
-                                <td className="text-center">
-                                  <div className="d-flex justify-content-center">
-                                    <button
-                                      type="button"
-                                      className={`btn btn-xs btn-primary ${task.reportedDate != null ? "d-none" : ""
+                                      )}
+                                    </div>
+                                  </td>
+                                  <td className="text-center">
+                                    <div className="d-flex justify-content-center">
+                                      <button
+                                        type="button"
+                                        className={`btn btn-xs btn-primary ${
+                                          task.reportedDate != null
+                                            ? "d-none"
+                                            : ""
                                         }`}
-                                      onClick={() => {
-                                        selectTask(task);
-                                        openModal();
-                                      }}
-                                    >
-                                      Report
-                                    </button>
-                                    <button
-                                      type="button"
-                                      className="btn btn-xs btn-primary ms-2"
-                                      onClick={() => {
-                                        setComment(task);
-                                        openComment();
-                                      }}
-                                    >
-                                      Comment
-                                    </button>
-                                  </div>
-                                </td>
-                              </tr>
-                            </React.Fragment>
-                          );
-                        })}
-                      </React.Fragment>
-                    );
-                  })}
+                                        onClick={() => {
+                                          selectTask(task);
+                                          openModal();
+                                        }}
+                                      >
+                                        Report
+                                      </button>
+                                      <button
+                                        type="button"
+                                        className="btn btn-xs btn-primary ms-2"
+                                        onClick={() => {
+                                          setComment(task);
+                                          openComment();
+                                        }}
+                                      >
+                                        Comment
+                                      </button>
+                                    </div>
+                                  </td>
+                                </tr>
+                              </React.Fragment>
+                            );
+                          })}
+                        </React.Fragment>
+                      );
+                    })}
                 </tbody>
               </table>
             </div>