diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
index a08c9a581..9c291e3ce 100644
--- a/desk/src/components/ListViewBuilder.vue
+++ b/desk/src/components/ListViewBuilder.vue
@@ -29,7 +29,7 @@
       :rows="rows"
       row-key="name"
       :options="{
-        selectable: true,
+        selectable: props.options.selectable ?? true ,
         showTooltip: true,
         resizeColumn: false,
         onRowClick: (row: Object) => emit('rowClick', row['name']),
@@ -61,6 +61,9 @@
             <div v-else-if="column.type === 'Datetime'">
               {{ dayjs.tz(item).fromNow() }}
             </div>
+            <div v-else-if="column.type === 'status'">
+              <Badge v-bind="handleStatusColor(item)" />
+            </div>
             <div v-else class="truncate">
               {{ item }}
             </div>
@@ -109,13 +112,16 @@ import {
   ListRow,
   ListHeader,
   ListHeaderItem,
+  Badge,
 } from "frappe-ui";
+
 import { Filter, SortBy, QuickFilters } from "@/components/view-controls";
 import { dayjs } from "@/dayjs";
 import FadedScrollableDiv from "./FadedScrollableDiv.vue";
 import Reload from "./view-controls/Reload.vue";
 import { useScreenSize } from "@/composables/screen";
 import EmptyState from "./EmptyState.vue";
+import { BadgeStatus } from "@/types";
 
 interface P {
   options: {
@@ -126,6 +132,9 @@ interface P {
       icon?: HTMLElement | string;
       title: string;
     };
+    hideViewControls?: boolean;
+    selectable?: boolean;
+    statusMap?: Record<string, BadgeStatus>;
   };
 }
 
@@ -134,7 +143,15 @@ interface E {
   (event: "rowClick", row: any): void;
 }
 
-const props = defineProps<P>();
+const props = withDefaults(defineProps<P>(), {
+  options: () => {
+    return {
+      doctype: "",
+      hideViewControls: false,
+      selectable: true,
+    };
+  },
+});
 
 const emit = defineEmits<E>();
 const { isMobileView } = useScreenSize();
@@ -190,10 +207,21 @@ function handleColumnConfig(column) {
   return column;
 }
 
+const statusMap: Record<string, BadgeStatus> = props.options
+  .statusMap as Record<string, BadgeStatus>;
+function handleStatusColor(status: "Published" | "Draft"): BadgeStatus {
+  if (!statusMap)
+    return {
+      label: status,
+      theme: "gray",
+    };
+  return statusMap[status];
+}
+
 const filterableFields = createResource({
   url: "helpdesk.api.doc.get_filterable_fields",
   cache: ["DocField", props.options.doctype],
-  auto: true,
+  auto: !props.options.hideViewControls,
   params: {
     doctype: props.options.doctype,
     append_assign: true,
@@ -212,7 +240,7 @@ const filterableFields = createResource({
 
 const sortableFields = createResource({
   url: "helpdesk.api.doc.sort_options",
-  auto: true,
+  auto: !props.options.hideViewControls,
   params: {
     doctype: props.options.doctype,
   },
@@ -220,7 +248,7 @@ const sortableFields = createResource({
 
 const quickFilters = createResource({
   url: "helpdesk.api.doc.get_quick_filters",
-  auto: true,
+  auto: !props.options.hideViewControls,
   params: {
     doctype: props.options.doctype,
   },
@@ -232,7 +260,12 @@ const quickFilters = createResource({
 });
 
 const showViewControls = computed(() => {
-  return filterableFields.data && sortableFields.data && quickFilters.data;
+  return (
+    !props.options.hideViewControls &&
+    filterableFields.data &&
+    sortableFields.data &&
+    quickFilters.data
+  );
 });
 
 const listViewData = reactive({
diff --git a/desk/src/components/desk/global/NewContactDialog.vue b/desk/src/components/desk/global/NewContactDialog.vue
index cc6619524..5cdf1ffed 100644
--- a/desk/src/components/desk/global/NewContactDialog.vue
+++ b/desk/src/components/desk/global/NewContactDialog.vue
@@ -51,6 +51,7 @@ import {
   ErrorMessage,
   createResource,
   Autocomplete,
+  createListResource,
 } from "frappe-ui";
 import zod from "zod";
 
@@ -141,20 +142,17 @@ const open = computed({
   },
 });
 
-const customerResource = createResource({
-  url: "helpdesk.extends.client.get_list",
-  params: {
-    doctype: "HD Customer",
-    fields: ["name", "customer_name"],
-  },
+const customerResource = createListResource({
+  doctype: "HD Customer",
+  fields: ["name"],
+  cache: "customers",
   transform: (data) => {
-    let allData = data.map((option) => {
+    return data.map((option) => {
       return {
         label: option.name,
-        value: option.customer_name,
+        value: option.name,
       };
     });
-    return allData;
   },
   auto: true,
 });
diff --git a/desk/src/components/index.ts b/desk/src/components/index.ts
index edc4b21a5..339ab9153 100644
--- a/desk/src/components/index.ts
+++ b/desk/src/components/index.ts
@@ -1,7 +1,6 @@
 export { default as AttachmentItem } from "./AttachmentItem.vue";
 export { default as CommandPalette } from "./command-palette/CP.vue";
 export { default as HCard } from "./HCard.vue";
-export { default as ListView } from "./list-view/LV.vue";
 export { default as NestedPopover } from "./NestedPopover.vue";
 export { default as Notifications } from "./notifications/Notifications.vue";
 export { default as PageTitle } from "./PageTitle.vue";
diff --git a/desk/src/components/list-view/LV.vue b/desk/src/components/list-view/LV.vue
deleted file mode 100644
index fba5e59b2..000000000
--- a/desk/src/components/list-view/LV.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="mt-2 flex w-full grow flex-col overflow-hidden overflow-x-auto">
-    <div
-      class="flex h-full w-max min-w-full flex-col overflow-y-hidden text-gray-900"
-    >
-      <LVEmpty v-if="!resource.data?.length" :message="emptyMsg" />
-      <LVHeader v-else />
-      <div
-        ref="body"
-        class="grow divide-y overflow-y-auto"
-        @scroll="() => handleScroll()"
-      >
-        <LVLoading v-if="resource.loading" />
-        <LVRow
-          v-for="row in resource.data"
-          v-else
-          :id="id"
-          :key="row.name"
-          :checkbox="checkbox"
-          :columns="columns"
-          :data="row"
-          :doctype="doctype"
-          :filter="filter"
-          :to="row.onClick"
-        >
-          <template v-for="(_, n) in $slots" #[n]="d">
-            <slot :name="n" v-bind="d" />
-          </template>
-        </LVRow>
-      </div>
-    </div>
-    <LVSelectionBar :data="resource.data || []">
-      <template #actions="d">
-        <slot name="actions" v-bind="d" />
-      </template>
-    </LVSelectionBar>
-  </div>
-  <LVNavigation :resource="resource" />
-</template>
-
-<script setup lang="ts">
-import { computed, provide, ref } from "vue";
-import { useRoute } from "vue-router";
-import { useDebounceFn } from "@vueuse/core";
-import { plural as pluralize } from "pluralize";
-import { Column, Resource } from "@/types";
-import {
-  CheckboxKey,
-  ColumnsKey,
-  DocTypeKey,
-  FilterKey,
-  IdKey,
-  PluralKey,
-  ResourceKey,
-  SingluarKey,
-} from "./symbols";
-import LVEmpty from "./LVEmpty.vue";
-import LVHeader from "./LVHeader.vue";
-import LVLoading from "./LVLoading.vue";
-import LVNavigation from "./LVNavigation.vue";
-import LVRow from "./LVRow.vue";
-import LVSelectionBar from "./LVSelectionBar.vue";
-
-interface P {
-  columns: Column[];
-  doctype: string;
-  resource: Resource<Array<Record<string, unknown>>>;
-  checkbox?: boolean;
-  filter?: boolean;
-}
-
-const props = withDefaults(defineProps<P>(), {
-  checkbox: false,
-  filter: false,
-});
-
-const route = useRoute();
-const body = ref<HTMLElement | null>(null);
-const singular = computed(() => {
-  return props.doctype.replace("HD ", "").toLowerCase().trim();
-});
-const plural = computed(() => {
-  return pluralize(singular.value);
-});
-const emptyMsg = computed(() => {
-  return `No ${plural.value} found`;
-});
-const id = computed(() => {
-  return route.path + "_" + props.doctype;
-});
-const handleScroll = useDebounceFn(() => {
-  if (!props.resource.hasNextPage) return;
-  const bodyHeight = body.value.scrollHeight;
-  const bodyTop = body.value.scrollTop;
-  const containerHeight = body.value.clientHeight;
-  const scrollPercentage = (bodyTop / (bodyHeight - containerHeight)) * 100;
-  if (scrollPercentage >= 90) props.resource.next();
-}, 500);
-
-provide(CheckboxKey, props.checkbox);
-provide(ColumnsKey, props.columns);
-provide(DocTypeKey, props.doctype);
-provide(FilterKey, props.filter);
-provide(IdKey, id.value);
-provide(PluralKey, plural);
-provide(ResourceKey, props.resource);
-provide(SingluarKey, singular);
-</script>
diff --git a/desk/src/components/list-view/LVEmpty.vue b/desk/src/components/list-view/LVEmpty.vue
deleted file mode 100644
index 82ec350ed..000000000
--- a/desk/src/components/list-view/LVEmpty.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div
-    class="flex h-full w-full items-center justify-center text-base text-gray-700"
-  >
-    <EmptyMessage :message="message" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import EmptyMessage from "../EmptyMessage.vue";
-
-interface P {
-  message: string;
-}
-
-defineProps<P>();
-</script>
diff --git a/desk/src/components/list-view/LVHeader.vue b/desk/src/components/list-view/LVHeader.vue
deleted file mode 100644
index 00ad57645..000000000
--- a/desk/src/components/list-view/LVHeader.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="mx-5 rounded bg-gray-100 px-2.5 py-2 text-sm text-gray-600">
-    <div class="flex w-full items-center gap-2">
-      <FormControl
-        v-if="checkbox"
-        type="checkbox"
-        :model-value="resource.data?.length === selection.storage.size"
-        @update:model-value="toggle()"
-      />
-      <div v-for="c in columns" :key="c.key">
-        <div v-if="!hiddenColumns.has(c.key)" :class="[c.width]">
-          <span :class="[c.align]">
-            {{ c.label }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { useColumns } from "@/composables/columns";
-import { selection } from "./selection";
-import { CheckboxKey, ColumnsKey, DocTypeKey, ResourceKey } from "./symbols";
-
-const checkbox = inject(CheckboxKey);
-const columns = inject(ColumnsKey);
-const doctype = inject(DocTypeKey);
-const resource = inject(ResourceKey);
-const { storage: hiddenColumns } = useColumns(doctype);
-
-function toggle() {
-  if (selection.storage.size === resource.data.length) {
-    selection.storage.clear();
-    return;
-  }
-  resource.data.forEach((d) => selection.storage.add(d.name));
-}
-</script>
diff --git a/desk/src/components/list-view/LVLoading.vue b/desk/src/components/list-view/LVLoading.vue
deleted file mode 100644
index eb8c23fea..000000000
--- a/desk/src/components/list-view/LVLoading.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="animate-pulse divide-y overflow-y-auto px-2.5">
-    <div
-      v-for="i in 20"
-      :key="i"
-      class="flex h-10 w-full items-center space-x-2 px-5"
-    >
-      <div v-if="checkbox" class="h-3.5 w-3.5 rounded-sm bg-gray-200" />
-      <div
-        v-for="c in columns"
-        :key="c.key"
-        class="flex items-center space-x-2"
-      >
-        <div v-if="!hiddenColumns.has(c.key)" :class="[c.width]">
-          <div class="h-4 rounded-sm bg-gray-200" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { useColumns } from "@/composables/columns";
-import { CheckboxKey, ColumnsKey, IdKey } from "./symbols";
-
-const checkbox = inject(CheckboxKey);
-const columns = inject(ColumnsKey);
-const id = inject(IdKey);
-const { storage: hiddenColumns } = useColumns(id);
-</script>
diff --git a/desk/src/components/list-view/LVNavigation.vue b/desk/src/components/list-view/LVNavigation.vue
deleted file mode 100644
index 9ef6ed398..000000000
--- a/desk/src/components/list-view/LVNavigation.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="flex items-center justify-between border-t px-5 py-2">
-    <TabButtons
-      :buttons="pageLengthOptions.map((o) => ({ label: o }))"
-      :model-value="resource.pageLength"
-      @update:model-value="
-        (val) => {
-          resource.update({
-            pageLength: val,
-          });
-          resource.reload();
-        }
-      "
-    />
-    <span class="flex items-center">
-      <LucideLoader2
-        v-if="resource.list.loading"
-        class="mr-2 inline h-4 w-4 animate-spin"
-      />
-      <span v-if="resource.data?.length" class="space-x-1 text-base">
-        <span class="text-gray-900">{{ resource.data?.length }}</span>
-        <span class="text-gray-700">of</span>
-        <span class="text-gray-900">{{ resource.totalCount }}</span>
-      </span>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { TabButtons } from "frappe-ui";
-import { ResourceKey } from "./symbols";
-
-const pageLengthOptions = [20, 50, 500] as const;
-const resource = inject(ResourceKey);
-</script>
diff --git a/desk/src/components/list-view/LVRow.vue b/desk/src/components/list-view/LVRow.vue
deleted file mode 100644
index d0217c44c..000000000
--- a/desk/src/components/list-view/LVRow.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div
-    class="group mx-5 flex h-10 items-center gap-2 whitespace-nowrap px-2.5 text-base"
-    :class="{
-      'bg-blue-100': selection.storage.has(data.name),
-      'hover:bg-blue-200': selection.storage.has(data.name),
-      'hover:bg-gray-100': !selection.storage.has(data.name),
-      'cursor-pointer': !!data.onClick,
-      ...data.class,
-    }"
-  >
-    <FormControl
-      v-if="checkbox"
-      type="checkbox"
-      :model-value="selection.storage.has(data.name)"
-      @update:model-value="selection.toggle(data.name)"
-    />
-    <component
-      :is="isFunction(data.onClick) ? 'span' : RouterLink"
-      as="template"
-      :to="data.onClick"
-      class="flex w-full items-center gap-2"
-      @click="
-        (event) => {
-          if (isFunction(data.onClick)) {
-            event.preventDefault();
-            data.onClick();
-          }
-        }
-      "
-    >
-      <div
-        v-for="c in columns"
-        :key="c.key"
-        :class="{
-          'text-gray-800': data[c.key],
-          'text-gray-300': !data[c.key],
-        }"
-      >
-        <div v-if="!hiddenColumns.has(c.key)" :class="[c.width]">
-          <div
-            class="w-max max-w-full truncate"
-            :class="[c.align, c.text]"
-            @click="(event) => filterFunc(event, c)"
-          >
-            <slot :name="c.key" :data="data">
-              {{ data[c.key] || "⸺" }}
-            </slot>
-          </div>
-        </div>
-      </div>
-    </component>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { RouterLink } from "vue-router";
-import { FormControl } from "frappe-ui";
-import { isFunction } from "lodash";
-import { Column } from "@/types";
-import { getAssign } from "@/utils";
-import { useFieldsStore } from "@/stores/fields";
-import { useColumns } from "@/composables/columns";
-import { useFilter } from "@/composables/filter";
-import { selection } from "./selection";
-import { CheckboxKey, ColumnsKey, DocTypeKey } from "./symbols";
-
-interface I {
-  name: string;
-  class?: Record<string, string>;
-  onClick?: () => void;
-  [key: string]: unknown;
-}
-
-interface P {
-  data: I;
-}
-
-const checkbox = inject(CheckboxKey);
-const columns = inject(ColumnsKey);
-const doctype = inject(DocTypeKey);
-const props = defineProps<P>();
-const { storage: hiddenColumns } = useColumns(doctype);
-const fieldsStore = useFieldsStore();
-const filter = useFilter(doctype);
-
-async function filterFunc(event: InputEvent, c: Column) {
-  if (!doctype) return;
-  await fieldsStore.fetch(doctype);
-  fieldsStore
-    .get(doctype)
-    .filter((field) => ["Link", "Select"].includes(field.fieldtype))
-    .filter((field) => field.fieldname === c.key)
-    .map((field) => {
-      let val = props.data[c.key] as string;
-      if (field.fieldname === "_assign") {
-        val = getAssign(val);
-      }
-      return {
-        fieldname: field.fieldname,
-        label: field.label,
-        operator: "is",
-        value: val,
-      };
-    })
-    .filter((field) => field.value)
-    .forEach((field) => {
-      event.preventDefault();
-      event.stopPropagation();
-      filter.add(field);
-      filter.apply();
-    });
-}
-</script>
diff --git a/desk/src/components/list-view/LVSelectionBar.vue b/desk/src/components/list-view/LVSelectionBar.vue
deleted file mode 100644
index 6145c14c0..000000000
--- a/desk/src/components/list-view/LVSelectionBar.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <transition
-    enter-active-class="duration-300 ease-out"
-    enter-from-class="transform opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="transform opacity-0"
-  >
-    <div
-      v-if="selection.storage.size"
-      class="fixed inset-x-0 bottom-6 mx-auto flex w-max items-center gap-1 rounded bg-white p-1 text-base shadow"
-    >
-      <div class="inline-block w-64 pl-2 align-middle text-gray-900">
-        {{ selection.storage.size }}
-        {{ selection.storage.size < 2 ? singular : plural }} selected
-      </div>
-      <span class="space-x-2">
-        <slot name="actions" :selection="selection.storage" />
-      </span>
-      <div class="text-gray-300">&#x007C;</div>
-      <Button
-        :disabled="resource.data?.length === selection.storage.size"
-        label="Select all"
-        variant="ghost"
-        @click="toggle()"
-      />
-    </div>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { PluralKey, ResourceKey, SingluarKey } from "./symbols";
-import { selection } from "./selection";
-
-const resource = inject(ResourceKey);
-const singular = inject(SingluarKey);
-const plural = inject(PluralKey);
-
-function toggle() {
-  if (selection.storage.size === resource.data?.length) {
-    selection.storage.clear();
-    return;
-  }
-  resource.data.forEach((d) => selection.storage.add(d.name));
-}
-</script>
diff --git a/desk/src/components/list-view/selection.ts b/desk/src/components/list-view/selection.ts
deleted file mode 100644
index fc77c7e5c..000000000
--- a/desk/src/components/list-view/selection.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { reactive } from "vue";
-import { Action, Key } from "./types";
-
-export const selection = reactive({
-  storage: new Set<Key>(),
-  actions: new Set<Action>(),
-  toggle: (key: Key) => {
-    if (!selection.storage.delete(key)) {
-      selection.storage.add(key);
-    }
-  },
-  reset: () => {
-    selection.storage.clear();
-    selection.actions.clear();
-  },
-});
diff --git a/desk/src/components/list-view/symbols.ts b/desk/src/components/list-view/symbols.ts
deleted file mode 100644
index b3f6d269e..000000000
--- a/desk/src/components/list-view/symbols.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { InjectionKey, Ref } from "vue";
-import { Resource, Column } from "@/types";
-
-type I = {
-  name: string;
-  [key: string]: unknown;
-};
-type R = Resource<Array<I>>;
-export const CheckboxKey: InjectionKey<boolean> = Symbol("Checkbox");
-export const ColumnsKey: InjectionKey<Array<Column>> = Symbol("Columns");
-export const DocTypeKey: InjectionKey<string> = Symbol("DocType");
-export const FilterKey: InjectionKey<boolean> = Symbol("Filter");
-export const IdKey: InjectionKey<string> = Symbol("Id");
-export const PluralKey: InjectionKey<Ref<string>> = Symbol("Plural");
-export const ResourceKey: InjectionKey<R> = Symbol("Resource");
-export const SingluarKey: InjectionKey<Ref<string>> = Symbol("Singular");
diff --git a/desk/src/components/list-view/types.ts b/desk/src/components/list-view/types.ts
deleted file mode 100644
index 4f67ee37f..000000000
--- a/desk/src/components/list-view/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type Selection = Set<string>;
-export type Key = string;
-export type Action = {
-  label: string;
-  onClick: (key: Key[]) => void;
-};
diff --git a/desk/src/components/notifications/Notifications.vue b/desk/src/components/notifications/Notifications.vue
index 1b8fcf3b4..4356fdb33 100644
--- a/desk/src/components/notifications/Notifications.vue
+++ b/desk/src/components/notifications/Notifications.vue
@@ -48,13 +48,11 @@
           }
         "
       >
-        <UserAvatar v-bind="n.user_from" />
+        <UserAvatar :name="n.user_from" />
         <span>
           <div class="mb-2 leading-5">
             <span class="space-x-1 text-gray-700">
-              <span class="font-medium text-gray-900">{{
-                n.user_from.name
-              }}</span>
+              <span class="font-medium text-gray-900">{{ n.user_from }}</span>
               <span v-if="n.notification_type === 'Mention'"
                 >mentioned you in ticket</span
               >
diff --git a/desk/src/composables/listManager.ts b/desk/src/composables/listManager.ts
deleted file mode 100644
index c40ce2f1c..000000000
--- a/desk/src/composables/listManager.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ref, watch } from "vue";
-import { createListResource, createResource } from "frappe-ui";
-
-const GET_LIST_METHOD = "helpdesk.extends.client.get_list";
-const GET_LIST_META_METHOD = "helpdesk.extends.client.get_list_meta";
-
-type ListOptions = {
-  doctype: string;
-  fields?: Array<string>;
-  filters?: object;
-  orderBy?: string;
-  pageLength?: number;
-  start?: number;
-  cache?: boolean | string | Array<string>;
-  auto?: boolean;
-  transform?: any;
-};
-
-type MetaData = {
-  total_count: number;
-  total_pages: number;
-  current_page: number;
-  start_from: number;
-  end_at: number;
-  has_next_page: boolean;
-  has_previous_page: boolean;
-};
-
-export function createListManager(options: ListOptions) {
-  const doctype = options.doctype;
-  const fields = options.fields;
-  const filters = options.filters;
-  const orderBy = options.orderBy;
-  const pageLength = options.pageLength;
-  const start = options.start;
-  const cache = options.cache;
-  const auto = options.auto;
-  const transform = options.transform;
-
-  const list = createListResource({
-    type: "list",
-    url: GET_LIST_METHOD,
-    realtime: true,
-    doctype,
-    fields,
-    orderBy,
-    filters,
-    pageLength,
-    start,
-    cache,
-    auto,
-    transform,
-    onSuccess() {
-      meta.submit({
-        doctype,
-        filters: list.filters,
-        limit: list.pageLength,
-        order_by: list.orderBy,
-        start: list.start,
-      });
-    },
-  });
-
-  Object.assign(list, {
-    totalCount: ref(0),
-    totalPages: ref(0),
-    currentPage: ref(0),
-    hasNextPage: ref(false),
-    hasPreviousPage: ref(false),
-    startFrom: ref(0),
-    endAt: ref(0),
-  });
-
-  const meta = createResource({
-    url: GET_LIST_META_METHOD,
-    onSuccess: (data: MetaData) => {
-      list.totalCount = data.total_count;
-      list.totalPages = data.total_pages;
-      list.currentPage = data.current_page;
-      list.hasNextPage = data.has_next_page;
-      list.hasPreviousPage = data.has_previous_page;
-      list.startFrom = data.start_from;
-      list.endAt = data.end_at;
-    },
-  });
-
-  watch(
-    () => list.list.loading,
-    () => {
-      list.hasPreviousPage = false;
-      list.hasNextPage = false;
-    }
-  );
-
-  return list;
-}
diff --git a/desk/src/pages/CLayout.vue b/desk/src/pages/CLayout.vue
deleted file mode 100644
index 986e94309..000000000
--- a/desk/src/pages/CLayout.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="bg-gray-200">
-    <div class="container mx-auto flex h-screen w-screen flex-col">
-      <CLayoutNav class="mb-2.5" />
-      <RouterView class="grow overflow-hidden rounded-t bg-white" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import CLayoutNav from "./c-layout/CLayoutNav.vue";
-</script>
diff --git a/desk/src/pages/KnowledgeBasePublic.vue b/desk/src/pages/KnowledgeBasePublic.vue
deleted file mode 100644
index 01882415c..000000000
--- a/desk/src/pages/KnowledgeBasePublic.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <span>
-    <header class="bg-gray-100">
-      <div class="container m-auto">
-        <div class="flex justify-between py-2">
-          <div class="flex items-center gap-2">
-            <RouterLink :to="{ name: CUSTOMER_PORTAL_LANDING }">
-              <BrandLogo class="flex" />
-            </RouterLink>
-            <span class="text-gray-600">/</span>
-            <span class="font-medium text-gray-900">Knowledge Base</span>
-          </div>
-          <Button
-            label="Search"
-            theme="gray"
-            variant="outline"
-            @click="showSearch = !showSearch"
-          >
-            <template #prefix>
-              <Icon icon="lucide:search" />
-            </template>
-            <template #suffix>
-              <span class="flex items-center gap-1">
-                <Icon icon="lucide:command" class="h-3 w-3" />
-                K
-              </span>
-            </template>
-          </Button>
-        </div>
-      </div>
-    </header>
-    <RouterView :key="$route.fullPath" class="m-auto" />
-    <KnowledgeBasePublicSearch v-model="showSearch" />
-  </span>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
-import { Button } from "frappe-ui";
-import { Icon } from "@iconify/vue";
-import { CUSTOMER_PORTAL_LANDING } from "@/router";
-import { useKeymapStore } from "@/stores/keymap";
-import BrandLogo from "@/components/BrandLogo.vue";
-import KnowledgeBasePublicSearch from "./knowledge-base/KnowledgeBasePublicSearch.vue";
-
-const keymapStore = useKeymapStore();
-const showSearch = ref(false);
-const mapping = ["meta", "k"];
-onMounted(() =>
-  keymapStore.add(mapping, () => (showSearch.value = !showSearch.value))
-);
-onUnmounted(() => keymapStore.remove(mapping));
-</script>
diff --git a/desk/src/pages/KnowledgeBasePublicCategory.vue b/desk/src/pages/KnowledgeBasePublicCategory.vue
deleted file mode 100644
index ea3cccb7c..000000000
--- a/desk/src/pages/KnowledgeBasePublicCategory.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="container my-8">
-    <div class="mb-8 flex items-center gap-2">
-      <RouterLink :to="{ name: KB_PUBLIC }">
-        <Icon icon="lucide:home" class="h-4 w-4" />
-      </RouterLink>
-      <Icon icon="lucide:chevron-right" class="h-4 w-4 text-gray-600" />
-      <div class="text-base font-medium text-gray-900">
-        {{ category.doc?.category_name }}
-      </div>
-    </div>
-    <ul class="space-y-2">
-      <li
-        v-for="article in articles.data"
-        :key="article.name"
-        class="w-max cursor-pointer border-b border-b-transparent pb-1 text-base text-gray-800 hover:border-b-gray-700"
-        @click="toArticle(article.name)"
-      >
-        {{ article.title }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { createDocumentResource, createListResource } from "frappe-ui";
-import { Icon } from "@iconify/vue";
-import { KB_PUBLIC, KB_PUBLIC_ARTICLE } from "@/router";
-
-interface P {
-  categoryId: string;
-}
-
-const props = defineProps<P>();
-const router = useRouter();
-
-const category = createDocumentResource({
-  doctype: "HD Article Category",
-  name: props.categoryId,
-  auto: true,
-});
-
-const articles = createListResource({
-  doctype: "HD Article",
-  fields: ["name", "title"],
-  filters: {
-    category: props.categoryId,
-    status: "Published",
-  },
-  auto: true,
-});
-
-function toArticle(articleId: string) {
-  router.push({
-    name: KB_PUBLIC_ARTICLE,
-    params: {
-      articleId,
-    },
-  });
-}
-</script>
diff --git a/desk/src/pages/KnowledgeBasePublicHome.vue b/desk/src/pages/KnowledgeBasePublicHome.vue
deleted file mode 100644
index 30ca9958f..000000000
--- a/desk/src/pages/KnowledgeBasePublicHome.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="container my-8 grid grid-cols-3 gap-4">
-    <div v-for="category in data.data" :key="category.name" class="space-y-4">
-      <div class="flex items-center gap-2 text-gray-800">
-        <component :is="getIcon(category.icon)" class="h-4 w-4" />
-        <div class="text-lg font-medium">
-          {{ category.category_name }}
-        </div>
-      </div>
-      <div class="ml-6 space-y-2 text-base text-gray-700">
-        <div
-          v-for="subCategory in category.sub_categories"
-          :key="subCategory.name"
-          class="w-max cursor-pointer border-b border-b-transparent pb-1 hover:border-b-gray-700"
-          @click="toCategory(subCategory.name)"
-        >
-          {{ subCategory.category_name }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { createResource } from "frappe-ui";
-import { KB_PUBLIC_CATEGORY } from "@/router";
-import { getIcon } from "./knowledge-base/util";
-
-const router = useRouter();
-const data = createResource({
-  url: "helpdesk.helpdesk.doctype.hd_article_category.api.get_list_public",
-  auto: true,
-});
-
-function toCategory(categoryId: string) {
-  router.push({
-    name: KB_PUBLIC_CATEGORY,
-    params: {
-      categoryId,
-    },
-  });
-}
-</script>
diff --git a/desk/src/pages/MobileNotifications.vue b/desk/src/pages/MobileNotifications.vue
index bc6d78b8c..e3680d6b8 100644
--- a/desk/src/pages/MobileNotifications.vue
+++ b/desk/src/pages/MobileNotifications.vue
@@ -32,13 +32,11 @@
         }
       "
     >
-      <UserAvatar v-bind="n.user_from" />
+      <UserAvatar :name="n.user_from" />
       <div>
         <div class="mb-2 leading-5">
           <span class="space-x-1 text-gray-700">
-            <span class="font-medium text-gray-900">{{
-              n.user_from.name
-            }}</span>
+            <span class="font-medium text-gray-900">{{ n.user_from }}</span>
             <span v-if="n.notification_type === 'Mention'"
               >mentioned you in ticket</span
             >
diff --git a/desk/src/pages/TicketsCustomer.vue b/desk/src/pages/TicketsCustomer.vue
deleted file mode 100644
index c3c9b127d..000000000
--- a/desk/src/pages/TicketsCustomer.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <LayoutHeader>
-      <template #left-header>
-        <Breadcrumbs :items="breadcrumbs" />
-      </template>
-      <template #right-header>
-        <RouterLink :to="{ name: 'TicketNew' }">
-          <Button label="New Ticket" theme="gray" variant="solid">
-            <template #prefix>
-              <LucidePlus class="h-4 w-4" />
-            </template>
-          </Button>
-        </RouterLink>
-      </template>
-    </LayoutHeader>
-    <ListView
-      :columns="columns"
-      :resource="tickets"
-      class="mt-2.5"
-      doctype="HD Ticket"
-    >
-      <template #status="{ data }">
-        <Badge
-          :label="transformStatus(data.status)"
-          :theme="ticketStatusStore.colorMap[data.status]"
-          variant="outline"
-        />
-      </template>
-      <template #response_by="{ data }">
-        <span v-if="data.response_by">
-          <Badge
-            v-if="
-              data.first_responded_on &&
-              dayjs(data.first_responded_on).isBefore(data.response_by)
-            "
-            label="Fulfilled"
-            theme="green"
-            variant="outline"
-          />
-          <Badge
-            v-else-if="dayjs(data.first_responded_on).isAfter(data.response_by)"
-            label="Failed"
-            theme="red"
-            variant="outline"
-          />
-          <Tooltip v-else :text="dayjs(data.response_by).long()">
-            {{ dayjs.tz(data.response_by).fromNow() }}
-          </Tooltip>
-        </span>
-      </template>
-      <template #resolution_by="{ data }">
-        <span v-if="data.resolution_by">
-          <Badge
-            v-if="
-              data.resolution_date &&
-              dayjs(data.resolution_date).isBefore(data.resolution_by)
-            "
-            label="Fulfilled"
-            theme="green"
-            variant="outline"
-          />
-          <Badge
-            v-else-if="dayjs(data.resolution_date).isAfter(data.resolution_by)"
-            label="Failed"
-            theme="red"
-            variant="outline"
-          />
-          <Tooltip v-else :text="dayjs(data.resolution_by).long()">
-            {{ dayjs.tz(data.resolution_by).fromNow() }}
-          </Tooltip>
-        </span>
-      </template>
-      <template #creation="{ data }">
-        {{ dayjs.tz(data.creation).fromNow() }}
-      </template>
-    </ListView>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { Dropdown, Tooltip, Breadcrumbs } from "frappe-ui";
-import { dayjs } from "@/dayjs";
-import { useConfigStore } from "@/stores/config";
-import { useTicketStatusStore } from "@/stores/ticketStatus";
-import { createListManager } from "@/composables/listManager";
-import { CUSTOMER_PORTAL_TICKET } from "@/router";
-import { ListView } from "@/components";
-import { ViewControls, LayoutHeader } from "@/components";
-const configStore = useConfigStore();
-const ticketStatusStore = useTicketStatusStore();
-const columns = [
-  {
-    label: "ID",
-    key: "name",
-    width: "w-12",
-  },
-  {
-    label: "Subject",
-    key: "subject",
-    width: "w-96",
-  },
-  {
-    label: "Status",
-    key: "status",
-    width: "w-32",
-  },
-  {
-    label: "Priority",
-    key: "priority",
-    width: "w-32",
-  },
-  {
-    label: "First Response",
-    key: "response_by",
-    width: "w-32",
-  },
-  {
-    label: "Resolution",
-    key: "resolution_by",
-    width: "w-32",
-  },
-  {
-    label: "Created",
-    key: "creation",
-    width: "w-32",
-  },
-];
-
-const tickets = createListManager({
-  doctype: "HD Ticket",
-  pageLength: 20,
-  fields: [
-    "name",
-    "creation",
-    "subject",
-    "status",
-    "priority",
-    "response_by",
-    "resolution_by",
-    "first_responded_on",
-    "resolution_date",
-  ],
-  auto: true,
-  transform: (data) => {
-    for (const d of data) {
-      d.onClick = {
-        name: CUSTOMER_PORTAL_TICKET,
-        params: {
-          ticketId: d.name,
-        },
-      };
-    }
-  },
-});
-
-const breadcrumbs = [{ label: "Tickets", route: { name: "TicketsCustomer" } }];
-
-const ACTIVE_TICKET_TYPES = ["Open", "Replied"];
-const dropdownTitle = ref("All tickets");
-const dropdownOptions = [
-  {
-    label: "All tickets",
-    onClick() {
-      filter("All tickets", { status: undefined });
-    },
-  },
-  {
-    label: "Open tickets",
-    onClick() {
-      filter("Open tickets", { status: ["in", ACTIVE_TICKET_TYPES] });
-    },
-  },
-  {
-    label: "Closed tickets",
-    onClick() {
-      filter("Closed tickets", { status: ["not in", ACTIVE_TICKET_TYPES] });
-    },
-  },
-];
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function filter(title: string, filters: Record<string, any>) {
-  tickets.update({
-    ...tickets,
-    filters: {
-      ...tickets.filters,
-      ...filters,
-    },
-  });
-  tickets.reload();
-  dropdownTitle.value = title;
-}
-
-function transformStatus(status: string) {
-  switch (status) {
-    case "Replied":
-      return "Awaiting reply";
-    default:
-      return status;
-  }
-}
-</script>
diff --git a/desk/src/pages/c-layout/CLayoutNav.vue b/desk/src/pages/c-layout/CLayoutNav.vue
deleted file mode 100644
index 68f5145f6..000000000
--- a/desk/src/pages/c-layout/CLayoutNav.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div
-    class="flex items-center justify-between rounded-b bg-white px-5 py-2.5 text-base"
-  >
-    <Dropdown :options="options">
-      <template #default="{ open }">
-        <div class="flex cursor-pointer items-center gap-1">
-          <UserAvatar
-            :name="authStore.userName"
-            :image="authStore.userImage"
-            expand
-            strong
-          />
-          <div class="text-gray-700">
-            <Icon v-if="open" icon="lucide:chevron-up" />
-            <Icon v-else icon="lucide:chevron-down" />
-          </div>
-        </div>
-      </template>
-    </Dropdown>
-    <BrandLogo />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { Dropdown } from "frappe-ui";
-import { Icon } from "@iconify/vue";
-import { useAuthStore } from "@/stores/auth";
-import { UserAvatar } from "@/components";
-import BrandLogo from "@/components/BrandLogo.vue";
-
-const router = useRouter();
-const authStore = useAuthStore();
-const options = [
-  {
-    label: "Knowledge Base",
-    icon: "book-open",
-    onClick: () => {
-      const path = router.resolve({ name: "KBHome" });
-      window.open(path.href, "_blank");
-    },
-  },
-  {
-    label: "My Account",
-    icon: "user",
-    onClick: () => {
-      const protocol = window.location.protocol;
-      const domain = window.location.hostname;
-      const path = protocol + "//" + domain + "/me";
-      window.open(path, "_blank");
-    },
-  },
-  {
-    label: "Log out",
-    icon: "log-out",
-    onClick: () => authStore.logout(),
-  },
-];
-</script>
diff --git a/desk/src/pages/desk/escalation/EscalationRuleList.vue b/desk/src/pages/desk/escalation/EscalationRuleList.vue
deleted file mode 100644
index f696339d3..000000000
--- a/desk/src/pages/desk/escalation/EscalationRuleList.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <PageTitle title="Escalation Rules">
-      <template #right>
-        <Button
-          label="New rule"
-          theme="gray"
-          variant="solid"
-          @click="openDialog(null)"
-        >
-          <template #prefix>
-            <LucidePlus class="h-4 w-4" />
-          </template>
-        </Button>
-      </template>
-    </PageTitle>
-    <ListView
-      :columns="columns"
-      :resource="rules"
-      class="mt-2.5"
-      doctype="HD Escalation Rule"
-    >
-      <template #is_enabled="{ data }">
-        <Badge :theme="data.is_enabled ? 'green' : 'red'" variant="subtle">
-          {{ data.is_enabled ? "Enabled" : "Disabled" }}
-        </Badge>
-      </template>
-    </ListView>
-    <EscalationRuleDialog
-      v-if="showDialog"
-      v-model="showDialog"
-      :name="selectedRule"
-    />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import { usePageMeta, Badge } from "frappe-ui";
-import { socket } from "@/socket";
-import { createListManager } from "@/composables/listManager";
-import { ListView } from "@/components";
-import PageTitle from "@/components/PageTitle.vue";
-import EscalationRuleDialog from "./EscalationRuleDialog.vue";
-
-const showDialog = ref(false);
-const selectedRule = ref(null);
-const emptyMessage = "No Escalation Rules Found";
-const columns = [
-  {
-    label: "Priority",
-    key: "priority",
-    width: "w-64",
-  },
-  {
-    label: "Team",
-    key: "team",
-    width: "w-64",
-  },
-  {
-    label: "Ticket type",
-    key: "ticket_type",
-    width: "w-64",
-  },
-  {
-    label: "Status",
-    key: "is_enabled",
-    width: "w-20",
-  },
-];
-
-const rules = createListManager({
-  doctype: "HD Escalation Rule",
-  fields: ["name", "priority", "team", "ticket_type", "is_enabled"],
-  auto: true,
-  transform: (data) => {
-    for (const d of data) {
-      d.onClick = () => openDialog(d.name);
-    }
-    return data;
-  },
-});
-
-usePageMeta(() => {
-  return {
-    title: "Escalation rules",
-  };
-});
-
-function openDialog(rule: string | null) {
-  selectedRule.value = rule;
-  showDialog.value = true;
-}
-
-socket.on("helpdesk:new-escalation-rule", () => rules.reload());
-socket.on("helpdesk:delete-escalation-rule", () => rules.reload());
-</script>
diff --git a/desk/src/pages/desk/escalation/EscalationRules.vue b/desk/src/pages/desk/escalation/EscalationRules.vue
new file mode 100644
index 000000000..bc4622975
--- /dev/null
+++ b/desk/src/pages/desk/escalation/EscalationRules.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="flex flex-col">
+    <PageTitle title="Escalation Rules">
+      <template #right>
+        <Button
+          label="New rule"
+          theme="gray"
+          variant="solid"
+          @click="openDialog(null)"
+        >
+          <template #prefix>
+            <LucidePlus class="h-4 w-4" />
+          </template>
+        </Button>
+      </template>
+    </PageTitle>
+    <div class="my-2" />
+    <ListViewBuilder
+      :options="{
+        doctype: 'HD Escalation Rule',
+        hideViewControls: true,
+        selectable: false,
+      }"
+      @row-click="openDialog"
+    />
+    <EscalationRuleDialog
+      v-if="showDialog"
+      v-model="showDialog"
+      :name="selectedRule"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { usePageMeta } from "frappe-ui";
+import PageTitle from "@/components/PageTitle.vue";
+import EscalationRuleDialog from "./EscalationRuleDialog.vue";
+import ListViewBuilder from "@/components/ListViewBuilder.vue";
+
+const showDialog = ref(false);
+const selectedRule = ref(null);
+
+usePageMeta(() => {
+  return {
+    title: "Escalation rules",
+  };
+});
+
+function openDialog(rule: string | null) {
+  selectedRule.value = rule;
+  showDialog.value = true;
+}
+</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue
index ae6401ccc..025a2140c 100644
--- a/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue
+++ b/desk/src/pages/knowledge-base/KnowledgeBaseCategory.vue
@@ -44,8 +44,7 @@
       >
         <template #bottom>
           <div class="text-base text-gray-600">
-            {{ c.count_article ? c.count_article : "No" }}
-            {{ c.count_article > 1 ? "articles" : "article" }}
+            {{ c.article_count + " articles" }}
           </div>
         </template>
       </HCard>
@@ -131,7 +130,6 @@ import {
 import { isEmpty } from "lodash";
 import { AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY } from "@/router";
 import { createToast } from "@/utils";
-import { createListManager } from "@/composables/listManager";
 import { useError } from "@/composables/error";
 import { HCard } from "@/components";
 import KnowledgeBaseCategoryHeader from "./KnowledgeBaseCategoryHeader.vue";
@@ -208,9 +206,9 @@ const newSubCategory = createResource({
   onError: useError({ title: "Error creating sub category" }),
 });
 
-const subCategories = createListManager({
-  doctype: "HD Article Category",
-  filters: {
+const subCategories = createResource({
+  url: "helpdesk.helpdesk.doctype.hd_article_category.api.get_subcategories",
+  params: {
     parent_category: categoryId.value,
   },
   auto: true,
diff --git a/desk/src/pages/knowledge-base/KnowledgeBasePublicSearch.vue b/desk/src/pages/knowledge-base/KnowledgeBasePublicSearch.vue
deleted file mode 100644
index 8e56fcee9..000000000
--- a/desk/src/pages/knowledge-base/KnowledgeBasePublicSearch.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <Dialog
-    :options="{ size: 'xl', position: 'top' }"
-    :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', !modelValue)"
-    @after-leave="articles.data = null"
-  >
-    <template #body>
-      <div>
-        <Combobox nullable @update:model-value="onSelection">
-          <div class="relative">
-            <div class="pl-4.5 absolute inset-y-0 left-0 flex items-center">
-              <Icon icon="lucide:search" class="h-4 w-4" />
-            </div>
-            <ComboboxInput
-              placeholder="Search"
-              class="pl-11.5 pr-4.5 w-full border-none bg-transparent py-3 text-base text-gray-800 placeholder:text-gray-500 focus:ring-0"
-              autocomplete="off"
-              @input="onInput"
-            />
-          </div>
-          <ComboboxOptions
-            class="max-h-96 overflow-auto border-t border-gray-100 text-base"
-            :class="{
-              'py-2.5': !!articles.data,
-            }"
-            static
-            hold
-          >
-            <ComboboxOption
-              v-for="article in articles.data"
-              :key="article.name"
-              v-slot="{ active }"
-              :value="article"
-              class="px-2.5"
-            >
-              <div
-                class="flex w-full min-w-0 items-center gap-1 rounded p-2 text-base font-medium text-gray-800"
-                :class="{ 'bg-gray-200': active }"
-              >
-                <span
-                  class="overflow-hidden text-ellipsis whitespace-nowrap text-gray-700"
-                >
-                  {{ article.category_name }}
-                </span>
-                <span class="text-gray-700"> / </span>
-                <span class="overflow-hidden text-ellipsis whitespace-nowrap">
-                  {{ article.title }}
-                </span>
-              </div>
-            </ComboboxOption>
-          </ComboboxOptions>
-        </Combobox>
-      </div>
-    </template>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { toRef } from "vue";
-import { createListResource, Dialog } from "frappe-ui";
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOptions,
-  ComboboxOption,
-} from "@headlessui/vue";
-import { Icon } from "@iconify/vue";
-import { useRouter } from "vue-router";
-import { KB_PUBLIC_ARTICLE } from "@/router";
-
-interface P {
-  modelValue: boolean;
-}
-
-interface E {
-  (event: "update:modelValue", value: boolean): void;
-}
-
-const props = defineProps<P>();
-const emit = defineEmits<E>();
-const router = useRouter();
-const modelValue = toRef(props, "modelValue");
-const articles = createListResource({
-  doctype: "HD Article",
-  fields: ["name", "title", "category.category_name"],
-  filters: {
-    status: "Published",
-  },
-  pageLength: 99999,
-  debounce: 500,
-  auto: false,
-  transform: (data) => {
-    for (const d of data) {
-      d.route = {
-        name: KB_PUBLIC_ARTICLE,
-        params: {
-          articleId: d.name,
-        },
-      };
-    }
-    return data;
-  },
-});
-
-function onInput(e) {
-  articles.update({
-    filters: {
-      title: ["like", `%${e.target.value}%`],
-    },
-  });
-  articles.reload();
-}
-
-function onSelection(val) {
-  if (val) {
-    emit("update:modelValue", !modelValue.value);
-    router.push(val.route);
-  }
-}
-</script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
index 706403726..34f900972 100644
--- a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
+++ b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
@@ -29,27 +29,11 @@
         </div>
       </template>
     </KnowledgeBaseCategoryHeader>
-    <ListView :columns="columns" :resource="articles" doctype="HD Article">
-      <template #title="{ data }">
-        <div class="flex items-center gap-2">
-          <div><IconFile class="h-4 w-4" /></div>
-          <div class="truncate">
-            {{ data.title }}
-          </div>
-        </div>
-      </template>
-      <template #status="{ data }">
-        <Badge
-          :theme="data.status === 'Published' ? 'green' : 'orange'"
-          variant="subtle"
-        >
-          {{ data.status }}
-        </Badge>
-      </template>
-      <template #emptyMessage>
-        <EmptyMessage message="This sub category is empty" />
-      </template>
-    </ListView>
+    <ListViewBuilder
+      :options="options"
+      @row-click="handleClick"
+      @empty-state-action="toNewArticle"
+    />
     <Dialog v-model="showEdit" :options="{ title: 'Edit' }">
       <template #body-content>
         <form @submit.prevent="saveSubCategory">
@@ -80,26 +64,24 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, h } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
 import {
   createDocumentResource,
   debounce,
-  Badge,
   Button,
   Dialog,
   FormControl,
+  Avatar,
 } from "frappe-ui";
 import { AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE } from "@/router";
-import { createListManager } from "@/composables/listManager";
 import { useError } from "@/composables/error";
-import { ListView } from "@/components";
 import KnowledgeBaseCategoryHeader from "./KnowledgeBaseCategoryHeader.vue";
-import EmptyMessage from "@/components/EmptyMessage.vue";
 import IconEdit from "~icons/lucide/edit-3";
-import IconFile from "~icons/lucide/file-text";
 import IconPlus from "~icons/lucide/plus";
-
+import ListViewBuilder from "@/components/ListViewBuilder.vue";
+const { getUser } = useUserStore();
 const props = defineProps({
   subCategoryId: {
     type: String,
@@ -132,41 +114,53 @@ const saveSubCategory = debounce(
   500
 );
 
-const articles = createListManager({
+const options = {
   doctype: "HD Article",
-  filters: {
-    category: props.subCategoryId,
+  defaultFilters: {
+    category: ["=", props.subCategoryId],
+    status: ["!=", "Archived"],
   },
-  auto: true,
-  transform: (data) => {
-    for (const d of data) {
-      d.onClick = {
-        name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
-        params: {
-          articleId: d.name,
-        },
-        query: {
-          category: route.params.categoryId,
-          subCategory: route.params.subCategoryId,
-        },
-      };
-    }
-    return data;
+  columnConfig: {
+    author: {
+      prefix: ({ row }) => {
+        return h(Avatar, {
+          shape: "circle",
+          image: getUser(row.author)?.user_image,
+          label: row.author,
+          size: "sm",
+        });
+      },
+    },
   },
-});
-
-const columns = [
-  {
-    label: "Title",
-    key: "title",
-    width: "w-96",
+  statusMap: {
+    Published: {
+      label: "Published",
+      theme: "green",
+    },
+    Draft: {
+      label: "Draft",
+      theme: "gray",
+    },
   },
-  {
-    label: "Status",
-    key: "status",
-    width: "w-40",
+  emptyState: {
+    title: "No Articles Found",
   },
-];
+  hideViewControls: true,
+  selectable: false,
+};
+
+function handleClick(id: string) {
+  router.push({
+    name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
+    params: {
+      articleId: id,
+    },
+    query: {
+      category: route.params.categoryId,
+      subCategory: route.params.subCategoryId,
+    },
+  });
+}
 
 function toNewArticle() {
   router.push({
diff --git a/desk/src/router/index.ts b/desk/src/router/index.ts
index 71b2e39d7..ce0eb1e87 100644
--- a/desk/src/router/index.ts
+++ b/desk/src/router/index.ts
@@ -206,12 +206,6 @@ const routes = [
         name: "CannedResponses",
         component: () => import("@/pages/CannedResponses.vue"),
       },
-      {
-        path: "escalation-rules",
-        name: AGENT_PORTAL_ESCALATION_RULE_LIST,
-        component: () =>
-          import("@/pages/desk/escalation/EscalationRuleList.vue"),
-      },
     ],
   },
   // Additonal routes
diff --git a/desk/src/stores/notification.ts b/desk/src/stores/notification.ts
index 6f99bd46e..165d8f3b8 100644
--- a/desk/src/stores/notification.ts
+++ b/desk/src/stores/notification.ts
@@ -1,15 +1,14 @@
 import { computed, ref } from "vue";
 import { defineStore } from "pinia";
-import { createResource } from "frappe-ui";
+import { createResource, createListResource } from "frappe-ui";
 import { useAuthStore } from "@/stores/auth";
 import { useError } from "@/composables/error";
-import { createListManager } from "@/composables/listManager";
 import { Notification, Resource } from "@/types";
 
 export const useNotificationStore = defineStore("notification", () => {
   const authStore = useAuthStore();
   const visible = ref(false);
-  const resource: Resource<Array<Notification>> = createListManager({
+  const resource: Resource<Array<Notification>> = createListResource({
     doctype: "HD Notification",
     cache: "Notifications",
     filters: {
diff --git a/desk/src/types.ts b/desk/src/types.ts
index 6afe1353a..79e031d72 100644
--- a/desk/src/types.ts
+++ b/desk/src/types.ts
@@ -247,4 +247,10 @@ export interface Category {
   children?: (Article | SubCategory)[];
 }
 
+// Badge
+export interface BadgeStatus {
+  label: string;
+  theme: string;
+}
+
 export type FeedbackAction = 0 | 1 | 2; // 0: neutral, 1: like, 2: dislike
diff --git a/desk/tsconfig.json b/desk/tsconfig.json
index 193b9ffb6..97555f9ee 100644
--- a/desk/tsconfig.json
+++ b/desk/tsconfig.json
@@ -13,6 +13,6 @@
 			"vite/client"
 		],
 	},
-	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
+	"include": ["src","src/*","src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx","src/**/*.vue"],
 	"exclude": ["node_modules"]
 }
diff --git a/helpdesk/extends/client.py b/helpdesk/extends/client.py
deleted file mode 100644
index f2839e771..000000000
--- a/helpdesk/extends/client.py
+++ /dev/null
@@ -1,182 +0,0 @@
-# Copyright (c) 2022, Frappe Technologies Pvt. Ltd. and Contributors
-# MIT License. See license.txt
-
-import importlib
-import math
-
-import frappe
-from frappe import _
-from frappe.model.base_document import get_controller
-from frappe.query_builder.functions import Count
-from frappe.utils import get_user_info_for_avatar
-from frappe.utils.caching import redis_cache
-
-from helpdesk.utils import check_permissions
-
-from .doc import apply_sort
-
-
-@frappe.whitelist()
-def get_list(
-    doctype=None,
-    fields=None,
-    filters=None,
-    order_by=None,
-    start=0,
-    limit=None,
-    group_by=None,
-    parent=None,
-    debug=False,
-):
-    check_allowed(doctype)
-    check_permissions(doctype, parent)
-
-    query = frappe.qb.get_query(
-        table=doctype,
-        fields=fields,
-        filters=filters,
-        offset=start,
-        limit=limit,
-        group_by=group_by,
-        order_by=order_by,
-    )
-
-    query = apply_custom_filters(doctype, query)
-    query = apply_hook(doctype, query)
-    query = apply_sort(doctype, order_by, query)
-
-    if not fields:
-        query = apply_custom_select(doctype, query)
-
-    res = query.run(as_dict=True, debug=debug)
-    res = transform_avatar(doctype, res)
-    res = transform_assign(res)
-    return res
-
-
-@frappe.whitelist()
-def get_list_meta(
-    doctype=None,
-    filters=None,
-    order_by=None,
-    start: int | None = 0,
-    limit=None,
-    group_by=None,
-    parent=None,
-    debug=False,
-):
-    check_allowed(doctype)
-    check_permissions(doctype, parent)
-
-    query = frappe.qb.get_query(
-        table=doctype,
-        filters=filters,
-        group_by=group_by,
-        fields=["name"],
-    )
-
-    query = apply_custom_filters(doctype, query)
-    query = apply_hook(doctype, query)
-    query = apply_sort(doctype, order_by, query)
-
-    total_count = Count("*").as_("total_count")
-    query = query.select(total_count)
-
-    res = query.run(as_dict=True, debug=debug)
-    total_count = res.pop().total_count
-    total_pages = math.ceil(total_count / limit) if limit else 1
-    current_page = start // limit + 1 if start and limit else 1
-    has_next_page = current_page < total_pages
-    has_previous_page = current_page > 1
-    start_from = start + 1
-    end_at = start + limit
-
-    if end_at > total_count:
-        end_at = total_count
-
-    return {
-        "total_count": total_count,
-        "total_pages": total_pages,
-        "current_page": current_page,
-        "has_next_page": has_next_page,
-        "has_previous_page": has_previous_page,
-        "start_from": start_from,
-        "end_at": end_at,
-    }
-
-
-def apply_custom_filters(doctype: str, query):
-    """
-    Apply custom filters to query
-    """
-    controller = get_controller(doctype)
-
-    if hasattr(controller, "get_list_filters"):
-        return_value = controller.get_list_filters(query)
-        if return_value is not None:
-            query = return_value
-
-    return query
-
-
-def apply_custom_select(doctype: str, query):
-    """
-    Apply custom select logic to query
-    """
-    controller = get_controller(doctype)
-
-    if hasattr(controller, "get_list_select"):
-        return_value = controller.get_list_select(query)
-        if return_value is not None:
-            query = return_value
-
-    return query
-
-
-def apply_hook(doctype: str, query):
-    """
-    Apply hooks to query
-    """
-    try:
-        _module_path = "helpdesk.helpdesk.hooks." + doctype.lower()
-        # nosemgrep
-        _module = importlib.import_module(_module_path)
-        _class = getattr(_module, doctype)
-        _function = getattr(_class, "get_list_filters")
-        return _function(query)
-    except Exception:
-        return query
-
-
-def transform_avatar(doctype: str, r):
-    m = frappe.get_meta(doctype)
-    f = [i for i in m.fields if i.fieldtype == "Link" and i.options == "User"]
-    for i in f:
-        for j in r:
-            if j.get(i.fieldname):
-                j[i.fieldname] = get_user_info_for_avatar(j[i.fieldname])
-    return r
-
-
-def transform_assign(r):
-    for row in r:
-        if assign := row.get("_assign"):
-            j = frappe.parse_json(assign)
-            if len(j) < 1:
-                continue
-            row["assignee"] = get_user_info_for_avatar(j.pop())
-    return r
-
-
-@redis_cache()
-def check_allowed(doctype: str):
-    """
-    Allow only `Helpdesk` doctypes. This is to prevent users from accessing
-    other doctypes.
-
-    :param doctype: Doctype name
-    """
-    allowed = ["Contact"]
-    if not (doctype in allowed or frappe.get_meta(doctype).module == "Helpdesk"):
-        text = _("You are not allowed to access {0}").format(doctype)
-        frappe.throw(text, frappe.PermissionError)
diff --git a/helpdesk/extends/doc.py b/helpdesk/extends/doc.py
deleted file mode 100644
index 76895ccb4..000000000
--- a/helpdesk/extends/doc.py
+++ /dev/null
@@ -1,40 +0,0 @@
-from types import FunctionType
-
-import frappe
-from frappe.model.document import get_controller
-from frappe.query_builder import Order, Query
-
-SORT_OPTIONS_METHOD = "sort_options"
-DEFAULT_SORT_FIELD = "modified"
-DEFAULT_SORT_DIRECTION = Order.desc
-
-
-@frappe.whitelist()
-def sort_options(doctype: str):
-    c = get_controller(doctype)
-
-    if not hasattr(c, SORT_OPTIONS_METHOD):
-        return []
-
-    return c.sort_options().keys()
-
-
-def apply_sort(doctype: str, order_by: str, query: Query):
-    controller = get_controller(doctype)
-    fallback = query.orderby(DEFAULT_SORT_FIELD, order=DEFAULT_SORT_DIRECTION)
-
-    if not hasattr(controller, SORT_OPTIONS_METHOD):
-        return fallback
-
-    action = controller.sort_options().get(order_by)
-
-    if isinstance(action, FunctionType):
-        return action(query)
-
-    if isinstance(action, (list, tuple)):
-        return query.orderby(action[0], order=action[1])
-
-    if isinstance(action, str):
-        return query.orderby(action, order=DEFAULT_SORT_DIRECTION)
-
-    return fallback
diff --git a/helpdesk/helpdesk/doctype/hd_article/hd_article.py b/helpdesk/helpdesk/doctype/hd_article/hd_article.py
index 8969e767c..9b2c63aef 100644
--- a/helpdesk/helpdesk/doctype/hd_article/hd_article.py
+++ b/helpdesk/helpdesk/doctype/hd_article/hd_article.py
@@ -52,6 +52,45 @@ def before_save(self):
                 )
             )
 
+    @staticmethod
+    def default_list_data():
+        columns = [
+            {
+                "label": "Title",
+                "type": "Data",
+                "key": "title",
+                "width": "17rem",
+            },
+            {
+                "label": "Status",
+                "type": "status",
+                "key": "status",
+                "width": "10rem",
+            },
+            {
+                "label": "Author",
+                "type": "Data",
+                "key": "author",
+                "width": "17rem",
+            },
+            {
+                "label": "Last Modified",
+                "type": "Datetime",
+                "key": "modified",
+                "width": "8rem",
+            },
+        ]
+        rows = [
+            "name",
+            "title",
+            "category",
+            "status",
+            "author",
+            "published_on",
+            "modified",
+        ]
+        return {"columns": columns, "rows": rows}
+
     @frappe.whitelist()
     def set_feedback(self, value):
         # 0 empty, 1 like, 2 dislike
diff --git a/helpdesk/helpdesk/doctype/hd_article_category/api.py b/helpdesk/helpdesk/doctype/hd_article_category/api.py
index 44c265d5c..4f5839a11 100644
--- a/helpdesk/helpdesk/doctype/hd_article_category/api.py
+++ b/helpdesk/helpdesk/doctype/hd_article_category/api.py
@@ -2,21 +2,14 @@
 
 
 @frappe.whitelist()
-def get_list_public():
-    fields = ["name", "category_name", "icon"]
-    categories = frappe.get_list(
-        "HD Article Category", fields=fields, filters={"parent_category": ""}
+def get_subcategories(parent_category):
+    sub_categories = frappe.get_all(
+        "HD Article Category",
+        filters={"parent_category": parent_category},
+        fields=["name", "category_name", "icon", "description"],
     )
-    res = []
-
-    for category in categories:
-        sub_categories = frappe.get_list(
-            "HD Article Category",
-            filters={"parent_category": category.name},
-            fields=fields,
+    for sub_category in sub_categories:
+        sub_category["article_count"] = frappe.db.count(
+            "HD Article", {"category": sub_category["name"]}
         )
-        category.sub_categories = sub_categories
-        if len(sub_categories):
-            res.append(category)
-
-    return res
+    return sub_categories
diff --git a/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py b/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py
index 7266fda7b..f24f8f4ce 100644
--- a/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py
+++ b/helpdesk/helpdesk/doctype/hd_article_category/hd_article_category.py
@@ -6,24 +6,9 @@
 # from frappe import _
 from frappe.model.document import Document
 from frappe.utils import cint
-from pypika.functions import Count
-from pypika.queries import Query
 
 
 class HDArticleCategory(Document):
-    @staticmethod
-    def get_list_select(query: Query):
-        QBCategory = frappe.qb.DocType("HD Article Category")
-        QBArticle = frappe.qb.DocType("HD Article")
-        count_article = (
-            frappe.qb.from_(QBArticle)
-            .select(Count("*"))
-            .as_("count_article")
-            .where(QBArticle.category == QBCategory.name)
-        )
-        query = query.select(QBCategory.star).select(count_article)
-        return query
-
     def before_save(self):
         if self.idx == -1 and self.status == "Published":
             # index is only set if its not set already, this allows defining
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
index cf90d4cb3..ed5a5b977 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
@@ -32,46 +32,6 @@
 
 
 class HDTicket(Document):
-    @staticmethod
-    def get_list_select(query: Query):
-        QBTicket = frappe.qb.DocType("HD Ticket")
-        QBComment = frappe.qb.DocType("HD Ticket Comment")
-        QBCommunication = frappe.qb.DocType("Communication")
-
-        count_comment = (
-            frappe.qb.from_(QBComment)
-            .select(Count("*"))
-            .as_("count_comment")
-            .where(QBComment.reference_ticket == QBTicket.name)
-        )
-
-        count_msg_incoming = (
-            frappe.qb.from_(QBCommunication)
-            .select(Count("*"))
-            .as_("count_msg_incoming")
-            .where(QBCommunication.reference_doctype == "HD Ticket")
-            .where(QBCommunication.reference_name == QBTicket.name)
-            .where(QBCommunication.sent_or_received == "Received")
-        )
-
-        count_msg_outgoing = (
-            frappe.qb.from_(QBCommunication)
-            .select(Count("*"))
-            .as_("count_msg_outgoing")
-            .where(QBCommunication.reference_doctype == "HD Ticket")
-            .where(QBCommunication.reference_name == QBTicket.name)
-            .where(QBCommunication.sent_or_received == "Sent")
-        )
-
-        query = (
-            query.select(QBTicket.star)
-            .select(count_comment)
-            .select(count_msg_incoming)
-            .select(count_msg_outgoing)
-        )
-
-        return query
-
     @staticmethod
     def get_list_filters(query: Query):
         _is_agent = is_agent()