diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 6b730127ff..d3f413b030 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -9,12 +9,19 @@ import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
-const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>()
+const {
+  nested = false,
+  parentId,
+  autoSave = true,
+  hookId = null,
+} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
 
 const emit = defineEmits(['update:filtersLength'])
 
 const meta = inject(MetaInj)
+
 const activeView = inject(ActiveViewInj)
+
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 // todo: replace with inject or get from state
@@ -76,7 +83,7 @@ const types = computed(() => {
 watch(
   () => (activeView?.value as any)?.id,
   (n, o) => {
-    if (n !== o) loadFilters()
+    if (n !== o) loadFilters(hookId as string)
   },
   { immediate: true },
 )
@@ -95,11 +102,11 @@ watch(
   },
 )
 
-const applyChanges = async () => {
-  await sync()
+const applyChanges = async (hookId?: string) => {
+  await sync(hookId)
   for (const nestedFilter of nestedFilters?.value || []) {
     if (nestedFilter.parentId) {
-      await nestedFilter.applyChanges(true)
+      await nestedFilter.applyChanges(hookId, true)
     }
   }
 }
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 444e22df2a..5e5d3a976e 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -16,15 +16,23 @@ export function useViewFilters(
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
-  const loadFilters = async () => {
-    if (parentId) {
-      filters.value = await $api.dbTableFilter.childrenRead(parentId)
+  const loadFilters = async (hookId?: string) => {
+    if (hookId) {
+      if (parentId) {
+        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+      } else {
+        filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
+      }
     } else {
-      filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+      if (parentId) {
+        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+      } else {
+        filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+      }
     }
   }
 
-  const sync = async (_nested = false) => {
+  const sync = async (hookId?: string, _nested = false) => {
     for (const [i, filter] of Object.entries(filters.value)) {
       if (filter.status === 'delete') {
         await $api.dbTableFilter.delete(filter.id as string)
@@ -34,10 +42,17 @@ export function useViewFilters(
           fk_parent_id: parentId,
         })
       } else if (filter.status === 'create') {
-        filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
-          ...filter,
-          fk_parent_id: parentId,
-        })) as any
+        if (hookId) {
+          filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
+            ...filter,
+            fk_parent_id: parentId,
+          })) as any
+        } else {
+          filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+            ...filter,
+            fk_parent_id: parentId,
+          })) as any
+        }
       }
     }
     reloadData?.()