diff --git a/src/components/common/FilterIcon.jsx b/src/components/common/FilterIcon.jsx
index 7f448f4e..1ac8d892 100644
--- a/src/components/common/FilterIcon.jsx
+++ b/src/components/common/FilterIcon.jsx
@@ -1,90 +1,98 @@
 import React, { useState, useEffect } from "react";
 
-const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities }) => {
-  // State for filters, now managed within FilterIcon
-  const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding);
-  const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors);
-  const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities);
+const FilterIcon = ({
+  taskListData,
+  onApplyFilters,
+  currentSelectedBuilding,
+  currentSelectedFloors,
+  currentSelectedActivities,
+}) => {
+  const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding || "");
+  const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors || []);
+  const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities || []);
 
-  // Update internal state when props change (e.g., project selection in DailyTask clears filters)
   useEffect(() => {
-    setSelectedBuilding(currentSelectedBuilding);
-    setSelectedFloors(currentSelectedFloors);
-    setSelectedActivities(currentSelectedActivities);
+    setSelectedBuilding(currentSelectedBuilding || "");
+    setSelectedFloors(currentSelectedFloors || []);
+    setSelectedActivities(currentSelectedActivities || []);
   }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
 
-  // Helper to get unique values for filters based on current selections
-  const getUniqueFilterValues = (key) => {
+  const getUniqueFilterValues = (key, overrideBuilding, overrideFloors) => {
     if (!taskListData) return [];
-    let relevantTasks = taskListData;
 
-    // Filter tasks based on selected building for floors and activities
-    if (selectedBuilding) {
-      relevantTasks = relevantTasks.filter(task =>
-        task?.workItem?.workArea?.floor?.building?.name === selectedBuilding
+    let filteredTasks = [...taskListData];
+
+    if (overrideBuilding) {
+      filteredTasks = filteredTasks.filter(
+        (task) =>
+          task?.workItem?.workArea?.floor?.building?.name === overrideBuilding
       );
     }
 
-    // Filter tasks based on selected floors for activities
-    if (selectedFloors.length > 0) {
-      relevantTasks = relevantTasks.filter(task =>
-        selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
+    if (overrideFloors?.length > 0) {
+      filteredTasks = filteredTasks.filter((task) =>
+        overrideFloors.includes(task?.workItem?.workArea?.floor?.floorName)
       );
     }
 
-    const values = relevantTasks.map(task => {
-      if (key === 'building') return task?.workItem?.workArea?.floor?.building?.name;
-      if (key === 'floor') return task?.workItem?.workArea?.floor?.floorName;
-      if (key === 'activity') return task?.workItem?.activityMaster?.activityName;
+    const values = filteredTasks.map((task) => {
+      if (key === "building") return task?.workItem?.workArea?.floor?.building?.name;
+      if (key === "floor") return task?.workItem?.workArea?.floor?.floorName;
+      if (key === "activity") return task?.workItem?.activityMaster?.activityName;
       return null;
-    }).filter(Boolean); // Remove null or undefined values
-    return [...new Set(values)].sort(); // Sort for consistent order
+    });
+
+    return [...new Set(values.filter(Boolean))].sort();
   };
 
-  const uniqueBuildings = getUniqueFilterValues('building');
-  const uniqueFloors = getUniqueFilterValues('floor');
-  const uniqueActivities = getUniqueFilterValues('activity');
+  const uniqueBuildings = getUniqueFilterValues("building");
+  const uniqueFloors = getUniqueFilterValues("floor", selectedBuilding);
+  const uniqueActivities = getUniqueFilterValues("activity", selectedBuilding, selectedFloors);
 
-  // Handle filter selection with dependency logic
   const handleFilterChange = (filterType, value) => {
-    let newSelectedBuilding = selectedBuilding;
-    let newSelectedFloors = [...selectedFloors];
-    let newSelectedActivities = [...selectedActivities];
+    let updatedBuilding = selectedBuilding;
+    let updatedFloors = [...selectedFloors];
+    let updatedActivities = [...selectedActivities];
 
-    if (filterType === 'building') {
-      if (selectedBuilding !== value) {
-        newSelectedFloors = [];
-        newSelectedActivities = [];
+    if (filterType === "building") {
+      updatedBuilding = value;
+      updatedFloors = [];
+      updatedActivities = [];
+    } else if (filterType === "floor") {
+      if (updatedFloors.includes(value)) {
+        updatedFloors = updatedFloors.filter((floor) => floor !== value);
+      } else {
+        updatedFloors.push(value);
       }
-      newSelectedBuilding = value;
-    } else if (filterType === 'floor') {
-      newSelectedFloors = selectedFloors.includes(value) ? selectedFloors.filter(item => item !== value) : [...selectedFloors, value];
-      if (!newSelectedFloors.includes(value) && selectedFloors.includes(value)) {
-        newSelectedActivities = [];
+
+      const validActivities = getUniqueFilterValues("activity", updatedBuilding, updatedFloors);
+      updatedActivities = updatedActivities.filter((act) => validActivities.includes(act));
+    } else if (filterType === "activity") {
+      if (updatedActivities.includes(value)) {
+        updatedActivities = updatedActivities.filter((act) => act !== value);
+      } else {
+        updatedActivities.push(value);
       }
-    } else if (filterType === 'activity') {
-      newSelectedActivities = selectedActivities.includes(value) ? selectedActivities.filter(item => item !== value) : [...selectedActivities, value];
     }
 
-    setSelectedBuilding(newSelectedBuilding);
-    setSelectedFloors(newSelectedFloors);
-    setSelectedActivities(newSelectedActivities);
+    setSelectedBuilding(updatedBuilding);
+    setSelectedFloors(updatedFloors);
+    setSelectedActivities(updatedActivities);
 
-    // Communicate the updated filter states back to the parent
     onApplyFilters({
-      selectedBuilding: newSelectedBuilding,
-      selectedFloors: newSelectedFloors,
-      selectedActivities: newSelectedActivities,
+      selectedBuilding: updatedBuilding,
+      selectedFloors: updatedFloors,
+      selectedActivities: updatedActivities,
     });
   };
 
   const clearAllFilters = () => {
-    setSelectedBuilding('');
+    setSelectedBuilding("");
     setSelectedFloors([]);
     setSelectedActivities([]);
-    // Communicate cleared filters back to the parent
+
     onApplyFilters({
-      selectedBuilding: '',
+      selectedBuilding: "",
       selectedFloors: [],
       selectedActivities: [],
     });
@@ -98,20 +106,19 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
         data-bs-toggle="dropdown"
         aria-expanded="false"
       >
-        <i className="fa-solid fa-filter bx-sm "></i>
-        
+        <i
+          className="fa-solid fa-filter bx-sm"
+          style={{ color: selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0 ? "#7161EF" : "gray" }}
+        ></i>
+
       </a>
       <ul
         className="dropdown-menu p-2"
         aria-labelledby="filterDropdown"
-        style={{
-          minWidth: "360px",
-          fontSize: "13px",
-        }}
-        // Prevent dropdown from closing when clicking inside it
+        style={{ minWidth: "360px", fontSize: "13px" }}
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Building Filter - Now a Dropdown */}
+        {/* Building */}
         <li>
           <div className="fw-bold text-dark mb-1">Building</div>
           <div className="row">
@@ -122,33 +129,26 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
                 onChange={(e) => handleFilterChange("building", e.target.value)}
               >
                 <option value="">Select Building</option>
-                {uniqueBuildings.length > 0 ? (
-                  uniqueBuildings.map((building, idx) => (
-                    <option key={`building-option-${idx}`} value={building}>
-                      {building}
-                    </option>
-                  ))
-                ) : (
-                  <option value="" disabled>No buildings available</option>
-                )}
+                {uniqueBuildings.map((building, idx) => (
+                  <option key={idx} value={building}>
+                    {building}
+                  </option>
+                ))}
               </select>
             </div>
           </div>
         </li>
 
-        {/* Floor Filter - Visible only if a building is selected */}
+        {/* Floor */}
         {selectedBuilding && (
           <>
+            <li><hr className="my-1" /></li>
             <li>
-              <hr className="my-1" />
-            </li>
-
-            <li>
-              <div className="fw-bold text-dark mb-1">Floor</div>
+              <div className="fw-bold text-dark mb-1">Floors</div>
               <div className="row">
                 {uniqueFloors.length > 0 ? (
                   uniqueFloors.map((floor, idx) => (
-                    <div className="col-6" key={`floor-${idx}`}>
+                    <div className="col-6" key={idx}>
                       <div className="form-check mb-1">
                         <input
                           className="form-check-input"
@@ -157,36 +157,30 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
                           checked={selectedFloors.includes(floor)}
                           onChange={() => handleFilterChange("floor", floor)}
                         />
-                        <label
-                          className="form-check-label"
-                          htmlFor={`floor-${floor}`}
-                        >
+                        <label className="form-check-label" htmlFor={`floor-${floor}`}>
                           {floor}
                         </label>
                       </div>
                     </div>
                   ))
                 ) : (
-                  <div className="col-12 text-muted">No floors for selected building.</div>
+                  <div className="col-12 text-muted">No floors found.</div>
                 )}
               </div>
             </li>
           </>
         )}
 
-        {/* Activity Filter - Visible only if a floor is selected */}
+        {/* Activity */}
         {selectedFloors.length > 0 && (
           <>
+            <li><hr className="my-1" /></li>
             <li>
-              <hr className="my-1" />
-            </li>
-
-            <li>
-              <div className="fw-bold text-dark mb-1">Activity</div>
+              <div className="fw-bold text-dark mb-1">Activities</div>
               <div className="row">
                 {uniqueActivities.length > 0 ? (
                   uniqueActivities.map((activity, idx) => (
-                    <div className="col-6" key={`activity-${idx}`}>
+                    <div className="col-6" key={idx}>
                       <div className="form-check mb-1">
                         <input
                           className="form-check-input"
@@ -195,43 +189,60 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
                           checked={selectedActivities.includes(activity)}
                           onChange={() => handleFilterChange("activity", activity)}
                         />
-                        <label
-                          className="form-check-label"
-                          htmlFor={`activity-${activity}`}
-                        >
+                        <label className="form-check-label" htmlFor={`activity-${activity}`}>
                           {activity}
                         </label>
                       </div>
                     </div>
                   ))
                 ) : (
-                  <div className="col-12 text-muted">No activities for selected floor(s).</div>
+                  <div className="col-12 text-muted">No activities found.</div>
                 )}
               </div>
             </li>
           </>
         )}
 
-        {/* Clear Filters */}
-        {(selectedBuilding ||
-          selectedFloors.length > 0 ||
-          selectedActivities.length > 0) && (
-            <>
-              <li>
-                <hr className="my-1" />
-              </li>
-              <li>
-                <button
-                  type="button"
-                  className="dropdown-item text-danger px-2 py-1"
-                  style={{ fontSize: "13px" }}
-                  onClick={clearAllFilters}
-                >
-                  Clear All Filters
-                </button>
-              </li>
-            </>
-          )}
+        {/* Action Buttons */}
+        <li><hr className="my-1" /></li>
+        {(selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0) && (
+          <li className="d-flex justify-content-end gap-2 px-2">
+            <button
+              type="button"
+              className="btn btn-sm"
+              style={{
+                backgroundColor: "#7161EF",
+                color: "white",
+                fontSize: "13px",
+                padding: "4px 16px",
+                borderRadius: "8px",
+                boxShadow: "0 1px 4px rgba(0,0,0,0.1)"
+              }}
+              onClick={clearAllFilters}
+            >
+              Clear
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm"
+              style={{
+                backgroundColor: "#7161EF",
+                color: "white",
+                fontSize: "13px",
+                padding: "4px 16px",
+                borderRadius: "8px",
+                boxShadow: "0 1px 4px rgba(0,0,0,0.1)"
+              }}
+              onClick={() => {
+                document.getElementById("filterDropdown").click();
+              }}
+            >
+              Apply
+            </button>
+          </li>
+        )}
+
+
       </ul>
     </div>
   );
diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx
index 41e7ff9e..a194a41b 100644
--- a/src/pages/Activities/DailyTask.jsx
+++ b/src/pages/Activities/DailyTask.jsx
@@ -26,20 +26,17 @@ const DailyTask = () => {
   const [initialized, setInitialized] = useState(false);
   const dispatch = useDispatch();
 
-  // State for filters (moved to FilterIcon, but we need to receive them here)
   const [filters, setFilters] = useState({
     selectedBuilding: "",
     selectedFloors: [],
     selectedActivities: [],
   });
 
-  // Sync projectId (either from URL or pick first accessible one)
   useEffect(() => {
     if (!project_loading && projects.length > 0 && !initialized) {
       if (projectIdFromUrl) {
         dispatch(setProjectId(projectIdFromUrl));
       } else if (selectedProject === 1 || selectedProject === undefined) {
-        // If no project from URL or default/undefined, pick the first project
         dispatch(setProjectId(projects[0].id));
       }
       setInitialized(true);
@@ -57,7 +54,7 @@ const DailyTask = () => {
 
   const {
     TaskList,
-    loading: task_loading, // This `loading` state indicates if task data is being fetched
+    loading: task_loading, 
     error: task_error,
     refetch,
   } = useTaskList(
@@ -66,13 +63,11 @@ const DailyTask = () => {
     initialized ? dateRange.endDate : null
   );
 
-  const [TaskLists, setTaskLists] = useState([]); // This state holds the *filtered* tasks for display
+  const [TaskLists, setTaskLists] = useState([]); 
   const [dates, setDates] = useState([]);
   const popoverRefs = useRef([]);
 
-  // Effect to apply filters to TaskList (from useTaskList) and update TaskLists (filtered display)
   useEffect(() => {
-    // Only filter if TaskList is available (not null or undefined)
     if (TaskList) {
       let filteredTasks = TaskList;
 
@@ -101,8 +96,6 @@ const DailyTask = () => {
       }
       setTaskLists(filteredTasks);
     } else {
-      // If TaskList is null (e.g., during initial load or project change before data arrives),
-      // ensure TaskLists is also empty to avoid displaying stale data.
       setTaskLists([]);
     }
   }, [
@@ -137,52 +130,22 @@ const DailyTask = () => {
   };
 
   useEffect(() => {
-    // Ensure Bootstrap's Popover is initialized correctly
     popoverRefs.current.forEach((el) => {
-      if (
-        el &&
-        window.bootstrap &&
-        typeof window.bootstrap.Popover === "function"
-      ) {
-        // Dispose existing popovers to prevent duplicates if component re-renders
-        const existingPopover = window.bootstrap.Popover.getInstance(el);
-        if (existingPopover) {
-          existingPopover.dispose();
-        }
-        new window.bootstrap.Popover(el, {
+      if (el) {
+        new bootstrap.Popover(el, {
           trigger: "focus",
           placement: "left",
           html: true,
-          content: el.getAttribute("data-bs-content"),
+          content: el.getAttribute("data-bs-content"), 
         });
       }
     });
-
-    // Cleanup function for popovers when component unmounts or dependencies change
-    return () => {
-      popoverRefs.current.forEach((el) => {
-        if (
-          el &&
-          window.bootstrap &&
-          typeof window.bootstrap.Popover === "function"
-        ) {
-          const existingPopover = window.bootstrap.Popover.getInstance(el);
-          if (existingPopover) {
-            existingPopover.dispose();
-          }
-        }
-      });
-      popoverRefs.current = []; // Clear the refs array
-    };
-  }, [dates, TaskLists]); // Re-initialize popovers when tasks or dates change
-
-  // Handler for project selection
+  },[dates, TaskLists]);
+ 
   const handleProjectChange = (e) => {
     const newProjectId = e.target.value;
     dispatch(setProjectId(newProjectId));
-    // --- IMPORTANT: Clear old data immediately to show loading state ---
-    setTaskLists([]); // This makes the table empty, allowing the spinner to show
-    // Reset filters when project changes (communicate to FilterIcon to clear)
+    setTaskLists([]); 
     setFilters({
       selectedBuilding: "",
       selectedFloors: [],
@@ -192,7 +155,6 @@ const DailyTask = () => {
 
   return (
     <>
-      {/* Report Task Modal */}
       <div
         className={`modal fade ${isModalOpen ? "show d-block" : ""}`}
         tabIndex="-1"
@@ -206,10 +168,8 @@ const DailyTask = () => {
           refetch={refetch}
         />
         {isModalOpen && <div className="modal-backdrop fade show"></div>}{" "}
-        {/* Add backdrop */}
       </div>
 
-      {/* Report Task Comments Modal */}
       <div
         className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`}
         tabIndex="-1"
@@ -222,7 +182,6 @@ const DailyTask = () => {
           closeModal={closeCommentModal}
         />
         {isModalOpenComment && <div className="modal-backdrop fade show"></div>}{" "}
-        {/* Add backdrop */}
       </div>
 
       <div className="container-xxl flex-grow-1 container-p-y">
@@ -242,15 +201,12 @@ const DailyTask = () => {
                   DateDifference="6"
                   dateFormat="DD-MM-YYYY"
                 />
-                {/* FilterIcon component now manages its own filter states and logic */}
                 <FilterIcon
-                  taskListData={TaskList} // Pass the raw TaskList to FilterIcon
-                  onApplyFilters={setFilters} // Callback to receive the filtered states from FilterIcon
+                  taskListData={TaskList} 
+                  onApplyFilters={setFilters}
                   currentSelectedBuilding={filters.selectedBuilding}
                   currentSelectedFloors={filters.selectedFloors}
                   currentSelectedActivities={filters.selectedActivities}
-                  // You can pass the project_loading state here if you want to disable filter during project load
-                  // isProjectLoading={project_loading}
                 />
               </div>
               <div className="col-md-4 col-12 text-center mb-2 mb-md-0">
@@ -261,7 +217,7 @@ const DailyTask = () => {
                   value={selectedProject || ""}
                   onChange={handleProjectChange}
                   aria-label="Select Project"
-                  disabled={project_loading} // Disable dropdown while projects are loading
+                  disabled={project_loading}
                 >
                   {project_loading && (
                     <option value="" disabled>
@@ -296,7 +252,6 @@ const DailyTask = () => {
                     <tr>
                       <td colSpan={6} className="text-center">
                         {" "}
-                        {/* ColSpan set to 6 based on your table headers */}
                         <div className="mt-10 mb-10 pt-5  pb-10">
                           <div
                             className="spinner-border text-primary"
@@ -309,7 +264,6 @@ const DailyTask = () => {
                       </td>
                     </tr>
                   )}
-                  {/* --- "No Reports Found" message only if not loading and no tasks --- */}
                   {!task_loading &&
                     !project_loading &&
                     TaskLists.length === 0 && (
@@ -317,20 +271,17 @@ const DailyTask = () => {
                         <td colSpan={6} className="text-center">
                           <div className="mt-10 mb-10 pt-10 pb-10">
                             {" "}
-                            {/* ColSpan set to 6 */}
                             <p>No Reports Found</p>
                           </div>
                         </td>
                       </tr>
                     )}
-                  {/* --- Render tasks when not loading and tasks exist --- */}
                   {!task_loading &&
                     TaskLists.length > 0 &&
                     dates.map((date, i) => {
                       const tasksForDate = TaskLists.filter((task) =>
                         task.assignmentDate.includes(date)
                       );
-                      // Only render the date header if there are tasks for that date after filtering
                       if (tasksForDate.length === 0) return null;
 
                       return (
@@ -338,14 +289,13 @@ const DailyTask = () => {
                           <tr className="table-row-header">
                             <td colSpan={6} className="text-start">
                               {" "}
-                              {/* ColSpan set to 6 */}
                               <strong>
                                 {moment(date).format("DD-MM-YYYY")}
                               </strong>
                             </td>
                           </tr>
                           {tasksForDate.map((task, index) => {
-                            const refIndex = `${i}-${index}`;
+                            const refIndex = index * 10 + i;
                             return (
                               <React.Fragment key={refIndex}>
                                 <tr>