diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx
index 1b7bfcb0..be557dd4 100644
--- a/src/components/Project/AssignRole.jsx
+++ b/src/components/Project/AssignRole.jsx
@@ -34,18 +34,24 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   const [selectedRole, setSelectedRole] = useState("all");
   const [selectedEmployees, setSelectedEmployees] = useState([]);
 
-
-const { handleSubmit, control, setValue, watch, formState: { errors },reset } = useForm({
-  defaultValues: {
-    selectedEmployees: [],
-    description:""
-  },
-  resolver: (data) => {
-    const validation = schema.safeParse(data);
-    if (validation.success) return { values: data, errors: {} };
-    return { values: {}, errors: validation.error.formErrors.fieldErrors };
-  },
-});
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm({
+    defaultValues: {
+      selectedEmployees: [],
+      description: "",
+    },
+    resolver: (data) => {
+      const validation = schema.safeParse(data);
+      if (validation.success) return { values: data, errors: {} };
+      return { values: {}, errors: validation.error.formErrors.fieldErrors };
+    },
+  });
 
   const handleRoleChange = (event) => {
     setSelectedRole(event.plannedTask.value);
@@ -78,62 +84,51 @@ const { handleSubmit, control, setValue, watch, formState: { errors },reset } =
     });
   };
 
+  const onSubmit = async (data) => {
+    const formattedData = {
+      taskTeam: data.selectedEmployees,
+      plannedTask: parseInt(plannedTask, 10),
+      description: data.description,
+      assignmentDate: new Date().toISOString(),
+      workItemId: assignData?.workItem?.workItem.id,
+    };
+    try {
+      let response = await TasksRepository.assignTask(formattedData);
+      showToast( "Task Successfully Assigend", "success" );
+      setSelectedEmployees([])
+      reset();
+    closeModal()
 
-const onSubmit = async(data) => {
-  const formattedData = {
-    taskTeam: data.selectedEmployees, 
-    plannedTask: parseInt( plannedTask, 10 ),
-    description: data.description,
-    assignmentDate: new Date().toISOString(),
-    workItemId:assignData?.workItem?.workItem.id
+    } catch (error) {
+      showToast("something wrong", "error");
+    }
   };
-  try
-  {
-    let response = await TasksRepository.assignTask( formattedData );
-    showToast( "Task Successfully Assigend", "success" )
-    reset()
-    onClose()
-  } catch ( error )
-  {
-    showToast("something wrong","error")
-    
-  }
-
-};
-useEffect(()=>{
-  dispatch(changeMaster("Job Role"))
-  return ()=> setSelectedRole("all")
-},[dispatch])
-
+  useEffect(() => {
+    dispatch(changeMaster("Job Role"));
+    return () => setSelectedRole("all");
+  }, [dispatch]);
 
   return (
     <>
       <div className="container my-1">
-        <div className="mb-2">
-          <div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap">
+        <div className="mb-">
+          <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
             {[
               assignData?.building?.name,
               assignData?.floor?.floorName,
               assignData?.workArea?.areaName,
               assignData?.workItem?.workItem?.activityMaster?.activityName,
-            ].map((item, index, array) => (
-              <div
-                key={index}
-                className="col d-flex justify-content-center align-items-center"
-              >
-                <div className="bs-stepper-header p-1 text-center">
-                  <span className="fs-5">{item}</span>
-
-                  {/* Arrow between items */}
+            ]
+              .filter(Boolean)
+              .map((item, index, array) => (
+                <span key={index} className="d-flex align-items-center">
+                  {item}
                   {index < array.length - 1 && (
-                    <div className="line">
-                      <i className="icon-base bx bx-chevron-right scaleX-n1-rtl"></i>
-                    </div>
+                    <i className="bx bx-chevron-right mx-2"></i>
                   )}
-                </div>
-              </div>
-            ))}
-          </div>
+                </span>
+              ))}
+          </p>
 
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="row mb-1">
@@ -166,7 +161,10 @@ useEffect(()=>{
             <div className="divider text-start">
               <div className="divider-text">Employee</div>
             </div>
-            {selectedRole !== "" && (
+
+            <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">
@@ -178,7 +176,7 @@ useEffect(()=>{
                       return (
                         <div
                           key={emp.id}
-                          className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1"
+                            className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
                         >
                           <div className="form-check text-start p-0">
                             <div className="li-wrapper d-flex justify-content-start align-items-start">
@@ -200,10 +198,19 @@ useEffect(()=>{
                                 )}
                               />
                               <div className="list-content">
-                                <h6 className="mb-0">
+                                <p
+                                  className=" mb-0"
+                                  style={{
+                                    fontSize: "12px",
+                                    fontWeight: "bolder",
+                                  }}
+                                >
                                   {emp.firstName} {emp.lastName}
-                                </h6>
-                                <small className="text-muted">
+                                </p>
+                                <small
+                                  className="lead"
+                                  style={{ fontSize: "10px" }}
+                                >
                                   {loading && (
                                     <p
                                       className="skeleton para"
@@ -224,7 +231,9 @@ useEffect(()=>{
                 </div>
               </div>
             )}
-
+              </div>
+              <div className="col-12 col-md-4 h-25 overflow-auto" style={{maxHeight:"200px"}}>
+                
             {selectedEmployees.length > 0 && (
               <div className="mt-1">
                 <div className="text-start px-2">
@@ -233,7 +242,7 @@ useEffect(()=>{
                     return (
                       <span
                         key={empId}
-                        className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2"
+                        className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
                       >
                         {emp.firstName} {emp.lastName}
                         <p
@@ -256,6 +265,10 @@ useEffect(()=>{
                 </div>
               </div>
             )}
+              </div>
+            </div>
+         
+
 
             <div className="col-md text-start mx-0 px-0">
               <div className="form-check form-check-inline mt-4 px-1">
@@ -273,7 +286,7 @@ useEffect(()=>{
                 </label>
                 <input
                   type="text"
-                  className="form-control form-control-sm "
+                  className="form-control form-control-xs"
                   value={plannedTask}
                   onChange={(e) => setPlannedTask(e.target.value)}
                   id="defaultFormControlInput"
@@ -298,7 +311,7 @@ useEffect(()=>{
                   {...field}
                   className="form-control"
                   id="exampleFormControlTextarea1"
-                  rows="3"
+                  rows="2"
                 />
               )}
             />
diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index 956991da..ae279024 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/src/components/Project/Infrastructure/WorkItem.jsx
@@ -159,8 +159,14 @@ 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> )}
             </div>
           </div>
         </td>
diff --git a/src/components/common/GlobalModel.jsx b/src/components/common/GlobalModel.jsx
index d12aeb34..04d24d5a 100644
--- a/src/components/common/GlobalModel.jsx
+++ b/src/components/common/GlobalModel.jsx
@@ -45,7 +45,7 @@ const GlobalModel = ({
 
   return (
     <div
-      className={`modal fade ${modalType}`} 
+      className={`modal fade ${ modalType }`} 
       id="customModal"
       tabIndex="-1"
       aria-labelledby="exampleModalLabel"
@@ -53,9 +53,9 @@ const GlobalModel = ({
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass}`} role={role}>
+      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role}>
         <div className="modal-content">
-          <div className="modal-header">
+          <div className="modal-header p-0">
             {/* Close button inside the modal header */}
             <button
               type="button"
@@ -65,7 +65,7 @@ const GlobalModel = ({
               onClick={closeModal}  // Trigger the React closeModal function
             ></button>
           </div>
-          <div className="modal-body">
+          <div className="modal-body  p-sm-4 p-0">
             {children}  {/* Render children here, which can be the ReportTask component */}
           </div>
         </div>