diff --git a/src/components/Directory/EmployeeList.jsx b/src/components/Directory/EmployeeList.jsx
index fb644374..f2d4f7c1 100644
--- a/src/components/Directory/EmployeeList.jsx
+++ b/src/components/Directory/EmployeeList.jsx
@@ -1,25 +1,24 @@
-import React,{useState,useEffect} from 'react'
-import {useSortableData} from '../../hooks/useSortableData';
-const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) =>
-{
+import React, { useState, useEffect } from "react";
+import { useSortableData } from "../../hooks/useSortableData";
+import Avatar from "../common/Avatar";
+const EmployeeList = ({ employees, onChange, bucket }) => {
   const [employeefiltered, setEmployeeFilter] = useState([]);
   const [employeeStatusList, setEmployeeStatusList] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
-  // Populate filtered list on load
   useEffect(() => {
     setEmployeeFilter(employees?.filter((emp) => emp.email != null) || []);
   }, [employees]);
 
   // Initialize checked employees based on assignedEmployee prop
   useEffect(() => {
-    if (Array.isArray(assignedEmployee)) {
-      const initialStatus = assignedEmployee.map((id) => ({
+    if (Array.isArray(bucket?.employeeIds)) {
+      const initialStatus = bucket?.employeeIds?.map((id) => ({
         employeeId: id,
         isActive: true,
       }));
       setEmployeeStatusList(initialStatus);
     }
-  }, [assignedEmployee]);
+  }, [bucket]);
 
   // Send updated list to parent
   useEffect(() => {
@@ -66,7 +65,8 @@ const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) =>
   };
 
   const filteredEmployees = sortedEmployees?.filter((employee) => {
-    const fullName = `${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
+    const fullName =
+      `${employee?.firstName} ${employee?.lastName}`?.toLowerCase();
     return fullName.includes(searchTerm.toLowerCase());
   });
   return (
@@ -121,18 +121,25 @@ const EmployeeList = ( {employees, onChange, assignedEmployee = []} ) =>
               filteredEmployees?.map((employee) => (
                 <tr key={employee.id}>
                   <td>
-                    <div className="d-flex align-items-start text-start">
+                    <div className="d-flex align-items-center text-start">
                       <input
                         className="form-check-input me-3 mt-1"
                         type="checkbox"
                         checked={isChecked(employee.id)}
                         onChange={() => handleCheckboxChange(employee.id)}
+                        disabled={bucket.createdBy.id === employee.id}
                       />
-                      <div>
-                        <p className="fw-normal mb-0">
-                          {`${employee.firstName} ${employee.lastName}`}
-                        </p>
-                      </div>
+
+                      <Avatar
+                        size="xs"
+                        classAvatar="m-0"
+                        firstName={employee.firstName}
+                        lastName={employee.lastName}
+                      />
+                      <span
+                        className="text-truncate mx-0"
+                        style={{ maxWidth: "150px" }}
+                      >{`${employee.firstName} ${employee.lastName}`}</span>
                     </div>
                   </td>
                   <td className="text-start">