diff --git a/src/components/Project/Teams.jsx b/src/components/Project/Teams.jsx
index fcac139e..afde352a 100644
--- a/src/components/Project/Teams.jsx
+++ b/src/components/Project/Teams.jsx
@@ -37,6 +37,7 @@ const Teams = () => {
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+  const handleToggleActive = e => setActiveEmployee(e.target.checked);
 
   const [selectedService, setSelectedService] = useState("");
 
@@ -262,22 +263,10 @@ const Teams = () => {
         <div className="card-body">
           <div className="row d-flex justify-content-between mb-4">
             <div className="col-md-6 col-12 d-flex align-items-center">
-              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
-                <input
-                  type="search"
-                  className="form-control form-control-sm me-4"
-                  placeholder="Search by Name or Role"
-                  aria-controls="DataTables_Table_0"
-                  value={searchTerm}
-                  onChange={handleSearch}
-                />
-              </div>
-               {/* Services-Dropdown */}
-
-             <div
-                  className="dataTables_length text-start py-1 px-0 col-md-4 col-12"
-                  id="DataTables_Table_0_length"
-                >
+              <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
+                {servicesLoading ? (
+                  <span>Loading...</span>
+                ) : assignedServices?.length > 1 ? (
                   <label>
                     <select
                       name="DataTables_Table_0_length"
@@ -288,38 +277,58 @@ const Teams = () => {
                       onChange={handleServiceChange}
                       style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
                     >
-                      {servicesLoading && <option>Loading...</option>}
-                      {assignedServices?.map((service) => (
+                      {assignedServices.map((service) => (
                         <option key={service.id} value={service.id}>
                           {service.name}
                         </option>
                       ))}
                     </select>
                   </label>
-                </div>
-            </div>
-            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
-              <div
-                className="dataTables_length text-start py-2 px-2"
-                id="DataTables_Table_0_length"
-              >
-                <label>
-                  <select
-                    name="DataTables_Table_0_length"
-                    aria-controls="DataTables_Table_0"
-                    className="form-select form-select-sm"
-                    onChange={handleFilterEmployee}
-                    // value={false}
-                    aria-label=""
-                    defaultValue="true"
+                ) : (
+                  <div
+                    style={{
+                      fontSize: "0.875rem",
+                      height: "32px",
+                      width: "190px",
+                      border: "1px solid #ced4da",
+                      borderRadius: "0.25rem",
+                      padding: "4px 8px",
+                      display: "flex",
+                      alignItems: "center",          
+                    }}
                   >
-                    <option value="true">Active Employee</option>
-                    <option value="false">In-Active Employee</option>
-                  </select>
-                </label>
+                    {assignedServices?.length === 1
+                      ? assignedServices[0].name
+                      : "No service available"}
+                  </div>
+                )}
               </div>
 
-             
+              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Search by Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+              </div>
+
+            </div>
+            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
+              <div className="form-check form-switch me-4 mt-2">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={activeEmployee}
+                  onChange={handleToggleActive}
+                  id="activeEmployeeSwitch"
+                />
+                <label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
+                  {activeEmployee ? "Active Employees" : "Inactive Employees"}
+                </label>
+              </div>
 
               <button
                 type="button"