diff --git a/src/components/Project/AssignTask.jsx b/src/components/Project/AssignTask.jsx
index 0d922c29..91ec4f9c 100644
--- a/src/components/Project/AssignTask.jsx
+++ b/src/components/Project/AssignTask.jsx
@@ -48,6 +48,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   const infoRef = useRef(null);
   const infoRef1 = useRef(null);
 
+  // State for search term
+  const [searchTerm, setSearchTerm] = useState("");
+
   useEffect(() => {
     if (typeof bootstrap !== "undefined") {
       if (infoRef.current) {
@@ -83,7 +86,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   const { loading } = useMaster();
   const { data: jobRoleData } = useMaster();
 
-  const [selectedRole, setSelectedRole] = useState("all");
+  // Changed to an array to hold multiple selected roles
+  const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
   const {
     handleSubmit,
@@ -121,20 +125,79 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
-
-    return () => setSelectedRole("all");
+    // Initial state should reflect "All Roles" selected
+    setSelectedRoles(["all"]);
   }, [dispatch]);
 
-  const handleRoleChange = (event) => {
-    setSelectedRole(event.target.value);
+  // Modified handleRoleChange to handle multiple selections
+  const handleRoleChange = (event, roleId) => {
+    // If 'all' is selected, clear other selections
+    if (roleId === "all") {
+      setSelectedRoles(["all"]);
+    } else {
+      setSelectedRoles((prevSelectedRoles) => {
+        // If "all" was previously selected, remove it
+        const newRoles = prevSelectedRoles.filter((role) => role !== "all");
+        if (newRoles.includes(roleId)) {
+          // If role is already selected, unselect it
+          return newRoles.filter((id) => id !== roleId);
+        } else {
+          // If role is not selected, add it
+          return [...newRoles, roleId];
+        }
+      });
+    }
   };
 
-  const filteredEmployees =
-    selectedRole === "all"
-      ? employees
-      : employees?.filter(
-          (emp) => String(emp.jobRoleId || "") === selectedRole
-        );
+  useEffect(() => {
+    // Update displayedSelection based on selectedRoles
+    if (selectedRoles.includes("all")) {
+      setDisplayedSelection("All Roles");
+    } else if (selectedRoles.length > 0) {
+      const selectedRoleNames = selectedRoles.map(roleId => {
+        const role = jobRoleData?.find(r => String(r.id) === roleId);
+        return role ? role.name : '';
+      }).filter(Boolean); // Filter out empty strings for roles not found
+      setDisplayedSelection(selectedRoleNames.join(', '));
+    } else {
+      setDisplayedSelection("Select Roles");
+    }
+  }, [selectedRoles, jobRoleData]);
+
+
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  // Filter employees first by role, then by search term AND job role name
+  const filteredEmployees = employees?.filter((emp) => {
+    const matchesRole =
+      selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
+    // Convert both first and last names and job role name to lowercase for case-insensitive matching
+    const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
+
+    const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
+
+    const searchLower = searchTerm.toLowerCase();
+    // Check if the full name OR job role name includes the search term
+    const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
+    return matchesRole && matchesSearch;
+  });
+
+  // Determine unique job role IDs from the filtered employees (for dropdown options)
+  const uniqueJobRoleIdsInFilteredEmployees = new Set(
+    employees?.map(emp => emp.jobRoleId).filter(Boolean)
+  );
+
+  // Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
+  const jobRolesForDropdown = jobRoleData?.filter(role =>
+    uniqueJobRoleIdsInFilteredEmployees.has(role.id)
+  );
+
+  // Calculate the count of selected roles for display
+  const selectedRolesCount = selectedRoles.includes("all")
+    ? 0 // "All Roles" doesn't contribute to a specific count
+    : selectedRoles.length;
 
   const onSubmit = (data) => {
     const selectedEmployeeIds = data.selectedEmployees;
@@ -159,6 +222,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     reset();
     onClose();
   };
+
   return (
     <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
       <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
@@ -192,125 +256,207 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                   <div className="form-text text-start">
                     <div className="d-flex align-items-center form-text fs-7">
                       <span className="text-dark">Select Team</span>
-                      <div className="me-2">{displayedSelection}</div>
-                      <a
-                        className="dropdown-toggle hide-arrow cursor-pointer"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        <i className="bx bx-filter bx-lg text-primary"></i>
-                      </a>
+                      <div className="dropdown position-relative d-inline-block">
+                        <a
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                            ? "text-secondary"
+                            : "text-primary"
+                            }`}
+                          data-bs-toggle="dropdown"
+                          role="button"
+                          aria-expanded="false"
+                        >
+                          <i className="bx bx-slider-alt ms-2"></i>
+                        </a>
 
-                      {/* --- Scrollbar applied here --- */}
+                        {/* Badge */}
+                        {selectedRolesCount > 0 && (
+                          <span
+                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
+                            style={{
+                              fontSize: "0.65rem",
+                              minWidth: "18px",
+                              height: "18px",
+                              padding: "0",
+                              lineHeight: "18px",
+                              textAlign: "center",
+                              zIndex: 10,
+                            }}
+                          >
+                            {selectedRolesCount}
+                          </span>
+                        )}
+
+                        {/* Dropdown Menu */}
+                        <ul
+                          className="dropdown-menu p-2 text-capitalize "
+                        >
+                          <li key="all">
+                            <div className="form-check dropdown-item py-0">
+                              <input
+                                className="form-check-input"
+                                type="checkbox"
+                                id="checkboxAllRoles"
+                                value="all"
+                                checked={selectedRoles.includes("all")}
+                                onChange={(e) => handleRoleChange(e, e.target.value)}
+                              />
+                              <label className="form-check-label ms-2" htmlFor="checkboxAllRoles">
+                                All Roles
+                              </label>
+                            </div>
+                          </li>
+
+                          {jobRolesForDropdown?.map((role) => (
+                            <li key={role.id}>
+                              <div className="form-check dropdown-item py-0">
+                                <input
+                                  className="form-check-input"
+                                  type="checkbox"
+                                  id={`checkboxRole-${role.id}`}
+                                  value={role.id}
+                                  checked={selectedRoles.includes(String(role.id))}
+                                  onChange={(e) => handleRoleChange(e, e.target.value)}
+                                />
+                                <label className="form-check-label ms-2" htmlFor={`checkboxRole-${role.id}`}>
+                                  {role.name}
+                                </label>
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
                       <ul
                         className="dropdown-menu p-2 text-capitalize"
-                        style={{ maxHeight: "250px", overflowY: "auto" }} // Added styles
+                        style={{ maxHeight: "300px", overflowY: "auto" }}
                       >
                         <li key="all">
-                          <button
-                            type="button"
-                            className="dropdown-item py-1"
-                            onClick={() =>
-                              handleRoleChange({
-                                target: { value: "all" },
-                              })
-                            }
-                          >
-                            All Roles
-                          </button>
-                        </li>
-                        {jobRoleData?.map((user) => (
-                          <li key={user.id}>
-                            <button
-                              type="button"
-                              className="dropdown-item py-1"
-                              value={user.id}
-                              onClick={handleRoleChange}
+                          <div className="form-check dropdown-item py-0">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id="checkboxAllRoles"
+                              value="all"
+                              checked={selectedRoles.includes("all")}
+                              onChange={(e) =>
+                                handleRoleChange(e, e.target.value)
+                              }
+                            />
+                            <label
+                              className="form-check-label ms-2"
+                              htmlFor="checkboxAllRoles"
                             >
-                              {user.name}
-                            </button>
+                              All Roles
+                            </label>
+                          </div>
+                        </li>
+                        {jobRolesForDropdown?.map((role) => (
+                          <li key={role.id}>
+                            <div className="form-check dropdown-item py-0">
+                              <input
+                                className="form-check-input"
+                                type="checkbox"
+                                id={`checkboxRole-${role.id}`}
+                                value={role.id}
+                                checked={selectedRoles.includes(String(role.id))}
+                                onChange={(e) =>
+                                  handleRoleChange(e, e.target.value)
+                                }
+                              />
+                              <label
+                                className="form-check-label ms-2"
+                                htmlFor={`checkboxRole-${role.id}`}
+                              >
+                                {role.name}
+                              </label>
+                            </div>
                           </li>
                         ))}
                       </ul>
+                      <input
+                        type="text"
+                        className="form-control form-control-sm ms-auto mb-2 mt-2"
+                        placeholder="Search employees or roles..."
+                        value={searchTerm}
+                        onChange={handleSearchChange}
+                        style={{ maxWidth: '200px' }}
+                      />
                     </div>
                   </div>
                 </div>
               </div>
+              <div
+                className="col-12 mt-2"
+                style={{ maxHeight: "280px", overflowY: "auto", overflowX: "hidden" }}
+              >
+                {selectedRoles?.length > 0 && (
+                  <div className="row">
+                    {employeeLoading ? (
+                      <div className="col-12">
+                        <p className="text-center">Loading employees...</p>
+                      </div>
+                    ) : filteredEmployees?.length > 0 ? (
+                      filteredEmployees.map((emp) => {
+                        const jobRole = jobRoleData?.find(
+                          (role) => role?.id === emp?.jobRoleId
+                        );
 
-              <div className="row">
-                <div
-                  className="col-12 mt-2"
-                  style={{ maxHeight: "200px", overflowY: "auto" }}
-                >
-                  {selectedRole !== "" && (
-                    <div className="row">
-                      {employeeLoading ? (
-                        <div className="col-12">
-                          <p className="text-center">Loading employees...</p>
-                        </div>
-                      ) : filteredEmployees?.length > 0 ? (
-                        filteredEmployees.map((emp) => {
-                          const jobRole = jobRoleData?.find(
-                            (role) => role?.id === emp?.jobRoleId
-                          );
-
-                          return (
-                            <div
-                              key={emp.id}
-                              className="col-6 col-md-4 col-lg-3 mb-3"
-                            >
-                              <div className="form-check d-flex align-items-start">
-                                <Controller
-                                  name="selectedEmployees"
-                                  control={control}
-                                  render={({ field }) => (
-                                    <input
-                                      {...field}
-                                      className="form-check-input me-1 mt-1"
-                                      type="checkbox"
-                                      id={`employee-${emp?.id}`}
-                                      value={emp.id}
-                                      checked={field.value?.includes(emp.id)}
-                                      onChange={(e) => {
-                                        handleCheckboxChange(e, emp);
-                                      }}
-                                    />
+                        return (
+                          <div
+                            key={emp.id}
+                            className="col-6 col-md-4 col-lg-3 mb-3"
+                          >
+                            <div className="form-check d-flex align-items-start">
+                              <Controller
+                                name="selectedEmployees"
+                                control={control}
+                                render={({ field }) => (
+                                  <input
+                                    {...field}
+                                    className="form-check-input me-1 mt-1"
+                                    type="checkbox"
+                                    id={`employee-${emp?.id}`}
+                                    value={emp.id}
+                                    checked={field.value?.includes(emp.id)}
+                                    onChange={(e) => {
+                                      handleCheckboxChange(e, emp);
+                                    }}
+                                  />
+                                )}
+                              />
+                              <div className="flex-grow-1">
+                                <p
+                                  className="mb-0"
+                                  style={{ fontSize: "13px" }}
+                                >
+                                  {emp.firstName} {emp.lastName}
+                                </p>
+                                <small
+                                  className="text-muted"
+                                  style={{ fontSize: "11px" }}
+                                >
+                                  {loading ? (
+                                    <span className="placeholder-glow">
+                                      <span className="placeholder col-6"></span>
+                                    </span>
+                                  ) : (
+                                    jobRole?.name || "Unknown Role"
                                   )}
-                                />
-                                <div className="flex-grow-1">
-                                  <p
-                                    className="mb-0"
-                                    style={{ fontSize: "13px" }}
-                                  >
-                                    {emp.firstName} {emp.lastName}
-                                  </p>
-                                  <small
-                                    className="text-muted"
-                                    style={{ fontSize: "11px" }}
-                                  >
-                                    {loading ? (
-                                      <span className="placeholder-glow">
-                                        <span className="placeholder col-6"></span>
-                                      </span>
-                                    ) : (
-                                      jobRole?.name || "Unknown Role"
-                                    )}
-                                  </small>
-                                </div>
+                                </small>
                               </div>
                             </div>
-                          );
-                        })
-                      ) : (
-                        <div className="col-12">
-                          <p className="text-center">
-                            No employees found for the selected role.
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
+                          </div>
+                        );
+                      })
+                    ) : (
+                      <div className="col-12">
+                        <p className="text-center">
+                          No employees found for the selected role(s).
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
 
               <div
@@ -403,7 +549,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           className="bi bi-info-circle"
                           viewBox="0 0 16 16"
                         >
-                          <path d="M8 15A7 7 S1 8 1a7 7 0 0 1 0-14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                           <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
                         </svg>
                       </div>
@@ -439,11 +585,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           id="defaultFormControlInput"
                           aria-describedby="defaultFormControlHelp"
                         />
-                        <span style={{ paddingLeft: "6px" }}>
-                          {
-                            assignData?.workItem?.workItem?.activityMaster
+                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
+                          <u>  {
+                            assignData?.workItem?.activityMaster
                               ?.unitOfMeasurement
-                          }
+                          }</u>
                         </span>
                         <div
                           style={{
@@ -491,7 +637,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                     className="position-absolute bg-white border p-2 rounded shadow"
                     style={{ zIndex: 10, marginLeft: "10px" }}
                   >
-                    {/* Add your help content here */}
                     <p className="mb-0">
                       Enter the target value for today's task.
                     </p>
@@ -501,7 +646,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
               <label
                 className="form-text fs-7 m-1 text-lg text-dark"
-                htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
+                htmlFor="descriptionTextarea"
               >
                 Description
               </label>
@@ -512,7 +657,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                   <textarea
                     {...field}
                     className="form-control"
-                    id="descriptionTextarea" // Changed id for better accessibility
+                    id="descriptionTextarea"
                     rows="2"
                   />
                 )}
@@ -522,7 +667,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               )}
             </div>
 
-            {/* Submit and Cancel buttons */}
             <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
               <button
                 type="submit"
@@ -548,5 +692,4 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     </div>
   );
 };
-
 export default AssignTask;
\ No newline at end of file