diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx
index be557dd4..46de8044 100644
--- a/src/components/Project/AssignRole.jsx
+++ b/src/components/Project/AssignRole.jsx
@@ -53,16 +53,21 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     },
   });
 
-  const handleRoleChange = (event) => {
-    setSelectedRole(event.plannedTask.value);
+  const handleRoleChange = ( event ) =>
+  {
+    reset()
+    setSelectedEmployees( [] )
+    setSelectedRole(event.target.value);
   };
 
   const filteredEmployees =
     selectedRole === "all"
       ? employees
-      : employees.filter((emp) => emp.JobRoleId.toString() === selectedRole);
+      : employees.filter((emp) =>
+        String(emp.jobRoleId || "") === selectedRole
+    );
+    
 
-  // not need currently for this fun
   const handleEmployeeSelection = (employeeId, field) => {
     setSelectedEmployees((prevSelected) => {
       let updatedSelection;
@@ -97,8 +102,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
       showToast( "Task Successfully Assigend", "success" );
       setSelectedEmployees([])
       reset();
-    closeModal()
-
+      onClose(); 
     } catch (error) {
       showToast("something wrong", "error");
     }
@@ -109,7 +113,18 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   }, [dispatch]);
 
   return (
-    <>
+      <div
+      className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
+      role="document"
+    >
+      <div className="modal-content">
+        <div className="modal-body p-sm-4 p-0">
+          <button
+            type="button"
+            className="btn-close"
+            onClick={onClose}
+            aria-label="Close"
+          ></button>
       <div className="container my-1">
         <div className="mb-">
           <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
@@ -161,16 +176,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
             <div className="divider text-start">
               <div className="divider-text">Employee</div>
             </div>
-
+            {( filteredEmployees?.length === 0 && employees ) && <div>No employees found</div>}
+           
             <div className="row">
               <div className="col-12 col-md-8 h-sm-25 overflow-auto">
               {selectedRole !== "" && (
               <div className="row mb-2">
                 <div className="col-sm-12">
-                  <div className="row">
-                    {filteredEmployees.map((emp) => {
+                      <div className="row">
+                    {filteredEmployees?.map((emp) => {
                       const jobRole = jobRoleData?.find(
-                        (role) => role.id === emp.jobRoleId
+                        (role) => role?.id === emp?.jobRoleId
                       );
 
                       return (
@@ -188,9 +204,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                     {...field}
                                     className="form-check-input mx-2"
                                     type="checkbox"
-                                    id={`employee-${emp.id}`}
+                                    id={`employee-${emp?.id}`}
                                     value={emp.id}
-                                    checked={field.value.includes(emp.id)} // Ensure the checkbox reflects the current form state
+                                    checked={field.value.includes(emp.id)} 
                                     onChange={() => {
                                       handleEmployeeSelection(emp.id, field);
                                     }}
@@ -326,15 +342,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                 className="btn btn-sm btn-label-secondary"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-                onClick={closeModal}
+                onClick={onClose}
               >
                 Cancel
               </button>
             </div>
           </form>
         </div>
-      </div>
-    </>
+            </div>
+          </div>
+        </div>
+        </div>
   );
 };
 export default AssignRoleModel;
diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index ae279024..ab85c28d 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/src/components/Project/Infrastructure/WorkItem.jsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
-import GlobalModel from "../../common/GlobalModel";
 
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
@@ -22,7 +21,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
   useEffect(() => {
     setNewWorkItem(workItem);
-  }, [workItem]); // This hook will run whenever the workItem prop changes
+  }, [workItem]);
 
   let assigndata = {
     building: forBuilding,
@@ -33,22 +32,24 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
   const hasWorkItem = NewWorkItem && NewWorkItem;
   useEffect(() => {
-    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    const tooltipTriggerList = Array.from(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
-  
 
   return (
     <>
-      <GlobalModel
-        isOpen={isModalOpen}
-        closeModal={closeModal}
-        dialogClass="modal-dialog-centered"
-        role="document"
-        size="lg"
+      <div
+        className={`modal fade ${isModalOpen ? "show" : ""}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: isModalOpen ? "block" : "none" }}
+        aria-hidden={!isModalOpen}
       >
         <AssignRoleModel assignData={assigndata} onClose={closeModal} />
-      </GlobalModel>
+      </div>
+
       <tr>
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
@@ -75,7 +76,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         <td className="text-center d-none d-md-table-cell">
           {NewWorkItem?.workItem?.completedWork}
         </td>
-        {/* ************************************************ */}
         <td className="text-center" style={{ width: "15%" }}>
           <div className="progress p-0">
             <div
@@ -99,7 +99,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
             ></div>
           </div>
         </td>
-        {/* for greather than mobile view */}
         <td className="d-none d-md-table-cell">
           <div className="dropdown">
             {!projectId && (
@@ -134,14 +133,16 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               type="button"
               className="btn p-0 dropdown-toggle hide-arrow"
             >
-              <i className="bx bx-trash me-1 text-danger"    data-bs-toggle="tooltip"
+              <i
+                className="bx bx-trash me-1 text-danger"
+                data-bs-toggle="tooltip"
                 data-bs-placement="top"
                 title="Delete Activity"
-                data-bs-original-title="Delete Activity"></i>
+                data-bs-original-title="Delete Activity"
+              ></i>
             </button>
           </div>
         </td>
-        {/* for mobile view */}
         <td className="text-end d-sm-none d-sm-table-cell">
           <div className="d-flex align-items-center justify-content-center ">
             <a
@@ -159,14 +160,19 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               </a>
               <a className="dropdown-item">
                 {" "}
-                <i className="bx bx-trash me-1 text-danger" ></i>Delete
+                <i className="bx bx-trash me-1 text-danger"></i>Delete
               </a>
-              {!projectId && ( <a className="dropdown-item"  data-bs-toggle="modal"
-                data-bs-target="#project-modal"
-                onClick={openModal}>
-                {" "}
-                <i className="bx bx-task me-1 text-info" ></i>Assign
-              </a> )}
+              {!projectId && (
+                <a
+                  className="dropdown-item"
+                  data-bs-toggle="modal"
+                  data-bs-target="#project-modal"
+                  onClick={openModal}
+                >
+                  {" "}
+                  <i className="bx bx-task me-1 text-info"></i>Assign
+                </a>
+              )}
             </div>
           </div>
         </td>