diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 60757240..1ccb7202 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -18,10 +18,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="['caller', 'receiver'].includes(column.key)">
               <Avatar
@@ -108,7 +111,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+])
 
 const pageLengthCount = defineModel()
 
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index 57d5b9c2..a221b94c 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -19,10 +19,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'full_name'">
               <Avatar
@@ -138,6 +141,7 @@ const emit = defineEmits([
   'updatePageCount',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 8b2d926f..22f1abd9 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -16,13 +16,21 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div v-if="column.key === '_assign'" class="flex items-center">
+        <div
+          v-if="column.key === '_assign'"
+          class="flex items-center"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <MultipleAvatar :avatars="item" size="sm" />
         </div>
-        <ListRowItem v-else :item="item">
+        <ListRowItem
+          v-else
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -164,7 +172,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 6a988060..3508540f 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -15,10 +15,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <!-- <template #prefix>
 
           </template> -->
@@ -130,6 +133,7 @@ const emit = defineEmits([
   'showEmailTemplate',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index d6dc29c9..d9ea3eec 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -16,13 +16,21 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div v-if="column.key === '_assign'" class="flex items-center">
+        <div
+          v-if="column.key === '_assign'"
+          class="flex items-center"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <MultipleAvatar :avatars="item" size="sm" />
         </div>
-        <ListRowItem v-else :item="item">
+        <ListRowItem
+          v-else
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -173,7 +181,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index d8e89442..863be606 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -18,10 +18,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'organization_name'">
               <Avatar
@@ -123,6 +126,7 @@ const emit = defineEmits([
   'updatePageCount',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index c94ccd41..57e42ce2 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -15,7 +15,7 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
         <Tooltip
@@ -30,7 +30,11 @@
             {{ dateFormat(item, 'D MMM, hh:mm a') }}
           </div>
         </Tooltip>
-        <ListRowItem v-else :item="item">
+        <ListRowItem
+          v-else
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <TaskStatusIcon :status="item" />
@@ -153,6 +157,7 @@ const emit = defineEmits([
   'showTask',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index a739a307..8185e67e 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -5,6 +5,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="callLogs"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -25,6 +26,7 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="callLogs.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="callLogs.data"
@@ -65,6 +67,7 @@ const callLogs = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!callLogs.value?.data?.data) return []
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 26201c9a..a8260c0a 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="contacts"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -30,6 +31,7 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="contacts.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="contacts.data"
@@ -89,6 +91,7 @@ const contacts = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!contacts.value?.data?.data) return []
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index d0d90a99..8f63f559 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="deals"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -30,6 +31,7 @@
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div
@@ -94,6 +96,7 @@ const deals = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 // Rows
 const rows = computed(() => {
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 019b517f..cbb77a25 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="emailTemplates"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -31,6 +32,7 @@
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showEmailTemplate="showEmailTemplate"
     @reload="emailTemplates.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="emailTemplates.data"
@@ -69,6 +71,7 @@ const emailTemplates = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!emailTemplates.value?.data?.data) return []
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 024fab16..b2777b25 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="leads"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -31,6 +32,7 @@
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
@@ -89,6 +91,7 @@ const leads = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 // Rows
 const rows = computed(() => {
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 4bcaf443..44fb483a 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -14,6 +14,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="organizations"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -34,6 +35,7 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="organizations.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="organizations.data"
@@ -95,6 +97,7 @@ const organizations = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!organizations.value?.data?.data) return []
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index bc3a601a..8c6cd405 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="tasks"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -31,6 +32,7 @@
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showTask="showTask"
     @reload="tasks.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="tasks.data" class="flex h-full items-center justify-center">
     <div
@@ -63,6 +65,7 @@ const tasks = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!tasks.value?.data?.data) return []