diff --git a/src/components/gallary/GalleryFilterPanel.jsx b/src/components/gallary/GalleryFilterPanel.jsx
index f6e1c6c2..e91ba9d1 100644
--- a/src/components/gallary/GalleryFilterPanel.jsx
+++ b/src/components/gallary/GalleryFilterPanel.jsx
@@ -7,13 +7,18 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultGalleryFilterValue, gallerySchema } from "./GallerySchema";
 import SelectMultiple from "../common/SelectMultiple";
+import { localToUtc } from "../../utils/appUtils";
 
-const GalleryFilterPanel = () => {
+const GalleryFilterPanel = ({ onApply }) => {
   const selectedProject = useSelectedProject();
   const [resetKey, setResetKey] = useState(0);
+
   const { data, isLoading, isError, error } =
     useImageGalleryFilter(selectedProject);
 
+  const closePanel = () => {
+    document.querySelector(".offcanvas.show .btn-close")?.click();
+  };
   const methods = useForm({
     resolver: zodResolver(gallerySchema),
     defaultValues: defaultGalleryFilterValue,
@@ -22,14 +27,25 @@ const GalleryFilterPanel = () => {
   const {
     handleSubmit,
     register,
-    setValue,
+    setValue,reset,
     formState: { errors },
   } = methods;
 
   const onSubmit = (formData) => {
-    console.log(formData);
+    onApply({
+      ...formData,
+      startDate: localToUtc(formData.startDate),
+      endDate: localToUtc(formData.endDate),
+    });
+    closePanel()
   };
 
+  const onClear=()=>{
+    reset(defaultGalleryFilterValue);
+     setResetKey((prev) => prev + 1);
+    closePanel()
+  }
+
   if (isLoading) return <div>Loading....</div>;
   if (isError) return <div>{error.message}</div>;
   return (
@@ -88,8 +104,6 @@ const GalleryFilterPanel = () => {
             <SelectMultiple
               name="activityIds"
               label="Select Activity:"
-
-              
               options={data?.activities}
               labelKey="name"
               valueKey="id"
@@ -114,7 +128,7 @@ const GalleryFilterPanel = () => {
             />
           </div>
           <div className="d-flex flex-row gap-3 justify-content-end">
-            <button className="btn btn-sm btn-label-secondary">Cancel</button>
+            <button className="btn btn-sm btn-label-secondary" onClick={onClear}>Cancel</button>
             <button type="submit" className="btn btn-sm btn-primary">
               Apply
             </button>
diff --git a/src/components/gallary/ImageGalleryListView.jsx b/src/components/gallary/ImageGalleryListView.jsx
index 32960681..945736e3 100644
--- a/src/components/gallary/ImageGalleryListView.jsx
+++ b/src/components/gallary/ImageGalleryListView.jsx
@@ -9,7 +9,7 @@ import Pagination from "../common/Pagination";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Loader from "../common/Loader";
 
-const ImageGalleryListView = () => {
+const ImageGalleryListView = ({filter}) => {
   const [hoveredImage, setHoveredImage] = useState(null);
   const selectedProject = useSelectedProject();
   const [currentPage, setCurrentPage] = useState(1);
@@ -19,7 +19,7 @@ const ImageGalleryListView = () => {
     selectedProject,
     currentPage,
     10,
-    {}
+    filter
   );
 
   const paginate = (page) => {
diff --git a/src/hooks/useImageGallery.js b/src/hooks/useImageGallery.js
index 85f2c41b..ac3cb852 100644
--- a/src/hooks/useImageGallery.js
+++ b/src/hooks/useImageGallery.js
@@ -6,23 +6,30 @@ import { ImageGalleryRepository } from "../repositories/ImageGalleryAPI";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 
 
-const PAGE_SIZE = 10;
+const cleanFilter = (filter) => {
+  const cleaned = { ...filter };
+
+  ["buildingIds", "floorIds", "workAreaIds", "activityIds","workCategoryIds","uploadedByIds","serviceIds"].forEach((key) => {
+    if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
+      delete cleaned[key];
+    }
+  });
+  return cleaned;
+};;
 
 const useImageGallery = (selectedProjectId,pageNumber, pageSize, filters) => {
-  const hasFilters = filters && Object.values(filters).some(
-    value => Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
-  );
-
+ 
   return useQuery({
-    queryKey: ["imageGallery", selectedProjectId, pageNumber, pageSize, hasFilters ? filters : null],
+    queryKey: ["imageGallery", selectedProjectId, pageNumber, pageSize,filters],
     enabled: !!selectedProjectId,
   
     queryFn: async () => {
+       const cleanedFilter =  cleanFilter(filters)
       const res = await ImageGalleryRepository.ImagesGet(
         selectedProjectId,
         pageNumber,
         pageSize,
-        hasFilters ? filters : undefined,
+        cleanedFilter
       );
       return res.data;
     },
diff --git a/src/pages/Gallary/ImageGallaryPage.jsx b/src/pages/Gallary/ImageGallaryPage.jsx
index a230a44b..b8d6383d 100644
--- a/src/pages/Gallary/ImageGallaryPage.jsx
+++ b/src/pages/Gallary/ImageGallaryPage.jsx
@@ -36,8 +36,10 @@ export const useGalleryContext = () => {
 };
 
 const ImageGalleryPage = () => {
+   const [filter,setFilter]  = useState()
   const selectedProjectId = useSelectedProject();
   const { projectNames } = useProjectName();
+  
 
   const [openGallery, setOpenGallery] = useState({ isOpen: false, data: null });
 
@@ -58,7 +60,7 @@ const ImageGalleryPage = () => {
 
    useEffect(()=>{
     setShowTrigger(true);
-    setOffcanvasContent("Gallery Filter",<GalleryFilterPanel/>);
+    setOffcanvasContent("Gallery Filter",<GalleryFilterPanel  onApply={setFilter}/>);
 
     return ()=>{
         setOffcanvasContent("",null)
@@ -102,7 +104,7 @@ const ImageGalleryPage = () => {
           </div>
           )}
 
-          <ImageGalleryListView />
+          <ImageGalleryListView filter={filter}/>
         </div>
 
         {openGallery?.isOpen && (