diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index f0b92fca..a86ccda6 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -4,21 +4,16 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <SortBy doctype="CRM Call Log" />
-      <Filter doctype="CRM Call Log" />
-    </div>
-    <div class="flex items-center gap-2">
-      <ViewSettings doctype="CRM Call Log" v-model="callLogs" />
-    </div>
-  </div>
+  <ViewControls v-model="callLogs" doctype="CRM Call Log" />
   <CallLogsListView
     v-if="callLogs.data && rows.length"
     :rows="rows"
     :columns="callLogs.data.columns"
   />
-  <div v-else-if="callLogs.data" class="flex h-full items-center justify-center">
+  <div
+    v-else-if="callLogs.data"
+    class="flex h-full items-center justify-center"
+  >
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
     >
@@ -31,9 +26,7 @@
 <script setup>
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import SortBy from '@/components/SortBy.vue'
-import Filter from '@/components/Filter.vue'
-import ViewSettings from '@/components/ViewSettings.vue'
+import ViewControls from '@/components/ViewControls.vue'
 import CallLogsListView from '@/components/ListViews/CallLogsListView.vue'
 import {
   secondsToDuration,
@@ -43,36 +36,21 @@ import {
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
-import { createResource, Breadcrumbs } from 'frappe-ui'
-import { computed } from 'vue'
+import { Breadcrumbs } from 'frappe-ui'
+import { computed, ref } from 'vue'
 
 const { getUser } = usersStore()
 const { getContact } = contactsStore()
 
 const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
 
-function getParams() {
-  const filters = {}
-  const order_by = 'creation desc'
-
-  return {
-    doctype: 'CRM Call Log',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const callLogs = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
+const callLogs = ref({})
 
 const rows = computed(() => {
-  if (!callLogs.data?.data) return []
-  return callLogs.data.data.map((callLog) => {
+  if (!callLogs.value?.data?.data) return []
+  return callLogs.value?.data.data.map((callLog) => {
     let _rows = {}
-    callLogs.data.rows.forEach((row) => {
+    callLogs.value?.data.rows.forEach((row) => {
       _rows[row] = callLog[row]
 
       let incoming = callLog.type === 'Incoming'