diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index 140eb671..33086107 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/src/components/Project/Infrastructure/WorkItem.jsx
@@ -6,27 +6,29 @@ import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
 
 import ConfirmModal from "../../common/ConfirmModal";
-import ProjectRepository from '../../../repositories/ProjectRepository'
-import {useProjectDetails} from '../../../hooks/useProjects'
+import ProjectRepository from "../../../repositories/ProjectRepository";
+import { useProjectDetails } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
-import {cacheData, getCachedData} from "../../../slices/apiDataManager";
-import {useDispatch} from "react-redux";
-import {refreshData} from "../../../slices/localVariablesSlice";
+import { cacheData, getCachedData } from "../../../slices/apiDataManager";
+import { useDispatch } from "react-redux";
+import { refreshData } from "../../../slices/localVariablesSlice";
 
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
   const [itemName, setItemName] = useState("");
   const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [ showModal, setShowModal ] = useState( false );
+  const [showModal, setShowModal] = useState(false);
   const [showModal2, setShowModal2] = useState(false);
   const ManageTasks = useHasUserPermission(MANAGE_TASK);
-  const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA );
-  const [ loadingDelete, setLoadingDelete ] = useState( false )
+  const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
+  const [loadingDelete, setLoadingDelete] = useState(false);
   const project = getCachedData("projectInfo");
- const dispatch = useDispatch()
-  
-  const {projects_Details} = useProjectDetails(projectId || project?.projectId)
+  const dispatch = useDispatch();
+
+  const { projects_Details } = useProjectDetails(
+    projectId || project?.projectId
+  );
 
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
@@ -55,24 +57,20 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
       document.querySelectorAll('[data-bs-toggle="tooltip"]')
     );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-  }, [] );
-  
-
+  }, []);
 
   const showModal1 = () => setShowModal(true);
-  const closeModal1 = () => setShowModal( false );
+  const closeModal1 = () => setShowModal(false);
   const showModalDelete = () => setShowModal2(true);
-  const closeModalDelete = () => setShowModal2( false );
-  
+  const closeModalDelete = () => setShowModal2(false);
 
-  const handleSubmit = async() => {
+  const handleSubmit = async () => {
     setLoadingDelete(true);
-    try
-    {
-    
+    try {
       const updatedProject = { ...projects_Details };
-      const response = await ProjectRepository.deleteProjectTask( workItem.workItemId );
-      debugger
+      const response = await ProjectRepository.deleteProjectTask(
+        workItem.workItemId
+      );
       const newProject = {
         ...updatedProject,
         buildings: updatedProject.buildings.map((building) =>
@@ -102,28 +100,26 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
             : building
         ),
       };
-     
+
       cacheData("projectInfo", {
         projectId: newProject.id,
         data: newProject,
       });
-    
-      dispatch( refreshData( true ) );
-      closeModalDelete()
-      setLoadingDelete(false)
-      showToast("Activity Deleted Successfully","success")     
-    } catch ( error )
-    {
-      setLoadingDelete( false )
-      closeModalDelete()
+
+      dispatch(refreshData(true));
+      closeModalDelete();
+      setLoadingDelete(false);
+      showToast("Activity Deleted Successfully", "success");
+    } catch (error) {
+      setLoadingDelete(false);
+      closeModalDelete();
       const message =
-      error.response?.data?.message ||
-      error.message ||
-      "An unexpected error occurred";
-      showToast( message, "error" );
-     
+        error.response?.data?.message ||
+        error.message ||
+        "An unexpected error occurred";
+      showToast(message, "error");
     }
-      };
+  };
   return (
     <>
       {isModalOpen && (
@@ -138,32 +134,45 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </div>
       )}
 
-      {showModal && <div
-        className={`modal fade ${showModal ? "show" : ""}`}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: showModal ? "block" : "none" }}
-        aria-hidden={!showModal}
-      >
-        <EditActivityModal
-          workItem={workItem}
-          workArea={forWorkArea}
-          building={forBuilding}
-          floor={forFloor}
-          onClose={closeModal1}
-        />
-      </div>}
-      
-      
-      {showModal2 && <div
-        className={`modal fade  ${showModal2 ? "show" : ""}`}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: showModal2 ? "block" : "none" }}
-        aria-hidden='false'
-      >
-        <ConfirmModal type={"delete"} header={"Delete Activity"} message={"Are you sure you want delete?"} onSubmit={ handleSubmit} onClose={closeModalDelete} loading={loadingDelete}/>
-      </div> }
+      {showModal && (
+        <div
+          className={`modal fade ${showModal ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{ display: showModal ? "block" : "none" }}
+          aria-hidden={!showModal}
+        >
+          <EditActivityModal
+            workItem={workItem}
+            workArea={forWorkArea}
+            building={forBuilding}
+            floor={forFloor}
+            onClose={closeModal1}
+          />
+        </div>
+      )}
+
+      {showModal2 && (
+        <div
+          className={`modal fade  ${showModal2 ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: showModal2 ? "block" : "none",
+            backgroundColor: showModal2 ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
+        >
+          <ConfirmModal
+            type={"delete"}
+            header={"Delete Activity"}
+            message={"Are you sure you want delete?"}
+            onSubmit={handleSubmit}
+            onClose={closeModalDelete}
+            loading={loadingDelete}
+          />
+        </div>
+      )}
 
       <tr>
         <td className="text-start table-cell-small">
@@ -177,23 +186,30 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </td>
         {/* for mobile view */}
         <td className="text-center d-sm-none d-sm-table-cell">
-        {hasWorkItem
-    ? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
-    : "NA"}/{" "}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.completedWork ??
+              workItem?.completedWork ??
+              "NA"
+            : "NA"}
+          /{" "}
           {hasWorkItem
             ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
             : "NA"}
         </td>
         {/* for greather than mobile view ************* */}
         <td className="text-center d-none d-md-table-cell">
-        {hasWorkItem
-    ? NewWorkItem?.workItem?.plannedWork ?? workItem?.plannedWork ?? "NA"
-    : "NA"}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.plannedWork ??
+              workItem?.plannedWork ??
+              "NA"
+            : "NA"}
         </td>
         <td className="text-center d-none d-md-table-cell">
-        {hasWorkItem
-    ? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
-    : "NA"}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.completedWork ??
+              workItem?.completedWork ??
+              "NA"
+            : "NA"}
         </td>
         <td className="text-center" style={{ width: "15%" }}>
           <div className="progress p-0">
@@ -234,7 +250,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 </span>
               </button>
             )}
-            { ManageInfra && (
+            {ManageInfra && (
               <>
                 <button
                   aria-label="Modify"