diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 933e03a636..87d9420912 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -4,7 +4,7 @@ import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import { useNuxtApp } from '#app'
-import { inject, useViewFilters } from '#imports'
+import { inject, useViewFilters, watchEffect } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
@@ -12,6 +12,8 @@ import MdiAddIcon from '~icons/mdi/plus'
 
 const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
 
+const emit = defineEmits(['update:filters-length'])
+
 const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
@@ -83,6 +85,13 @@ const logicalOps = [
   { value: 'and', text: 'AND' },
   { value: 'or', text: 'OR' },
 ]
+
+watch(
+  () => filters?.value?.length,
+  (length) => {
+    emit('update:filters-length', length ?? 0)
+  },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index b12acdebdb..198ccbf7e8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -9,7 +9,7 @@ const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
 // todo: emit from child
-const filters = []
+const filtersLength = ref(0)
 
 // todo: implement
 const applyChanges = () => {}
@@ -17,7 +17,7 @@ const applyChanges = () => {}
 
 <template>
   <a-dropdown :trigger="['click']">
-    <v-badge :value="filters.length" color="primary" dot overlap>
+    <div :class="{ 'nc-badge': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
@@ -26,9 +26,9 @@ const applyChanges = () => {}
           <MdiMenuDownIcon class="text-grey" />
         </div>
       </a-button>
-    </v-badge>
+    </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter />
+      <SmartsheetToolbarColumnFilter @update:filters-length="filtersLength = $event" />
     </template>
   </a-dropdown>
 </template>