diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
index 837b29c3e..4affe848f 100644
--- a/desk/src/components/ListViewBuilder.vue
+++ b/desk/src/components/ListViewBuilder.vue
@@ -19,7 +19,7 @@
   <!-- List View -->
   <slot v-bind="{ list }">
     <ListView
-      class="px-5 flex-1"
+      class="flex-1"
       :columns="list.data?.columns"
       :rows="list.data?.data"
       row-key="email"
@@ -28,23 +28,46 @@
         showTooltip: true,
         resizeColumn: false,
         onRowClick: () => {},
-        emptyState: {
-          title: 'No Data',
-          description: 'No data available',
-          button: {
-            label: 'New Record',
-            variant: 'solid',
-            onClick: () => emit('emptyStateAction'),
-          },
-        },
+        emptyState: props.options?.emptyState || defaultEmptyState,
       }"
-    />
+    >
+      <ListHeader class="sm:mx-5 mx-3">
+        <ListHeaderItem
+          v-for="column in columns"
+          :key="column.key"
+          :item="column"
+          @columnWidthUpdated="(width) => console.log(width)"
+        />
+      </ListHeader>
+      <ListRows class="sm:mx-5 mx-3">
+        <ListRow
+          v-for="row in rows"
+          :key="row.name"
+          v-slot="{ idx, column, item }"
+          :row="row"
+          class="truncate text-base"
+        >
+          <ListRowItem :item="item" :row="row" :column="column">
+            <div v-if="idx === 0">
+              {{ item }}
+            </div>
+            <div
+              v-else-if="column.type === 'Datetime'"
+              @click="console.log('Datetime clicked')"
+            >
+              {{ dayjs.tz(item).fromNow() }}
+            </div>
+            <div v-else>
+              {{ item }}
+            </div>
+          </ListRowItem>
+        </ListRow>
+      </ListRows>
+    </ListView>
   </slot>
 
   <!-- List Footer -->
   <div class="p-20 border-t sm:px-5 px-3 py-2">
-    <!-- filter not on first field/ datetime -->
-    <!-- options mei route or click ka option -->
     <ListFooter
       :options="{
         rowCount: list?.data?.row_count,
@@ -64,14 +87,32 @@
 
 <script setup lang="ts">
 import { reactive, provide, computed } from "vue";
-import { createResource, ListView, ListFooter } from "frappe-ui";
+import {
+  createResource,
+  ListView,
+  ListFooter,
+  ListRowItem,
+  ListRows,
+  ListRow,
+  ListHeader,
+  ListHeaderItem,
+} from "frappe-ui";
 import { Filter, SortBy, QuickFilters } from "@/components/view-controls";
-
+import { dayjs } from "@/dayjs";
 interface P {
   options: {
     doctype: string;
     default_filters?: Record<string, any>;
     column_config?: Record<string, any>;
+    emptyState?: {
+      title: string;
+      description?: string;
+      button?: {
+        label: string;
+        variant: string;
+        onClick: () => void;
+      };
+    };
   };
 }
 
@@ -83,6 +124,11 @@ const props = defineProps<P>();
 
 const emit = defineEmits<E>();
 
+const defaultEmptyState = {
+  title: "No Data",
+  description: "No data available",
+};
+
 const defaultParams = reactive({
   doctype: props.options.doctype,
   filters: props.options.default_filters || {},
@@ -107,6 +153,9 @@ const list = createResource({
   },
 });
 
+const rows = computed(() => [] || list.data?.data);
+const columns = computed(() => list.data?.columns);
+
 function handleFetchFromField(column) {
   if (!column.hasOwnProperty("key")) return column;
   const regex = /([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)/;
@@ -222,5 +271,3 @@ function handlePageLength(count: number, loadMore: boolean = false) {
   list.reload();
 }
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/desk/src/components/index.ts b/desk/src/components/index.ts
index 3b4a5986d..edc4b21a5 100644
--- a/desk/src/components/index.ts
+++ b/desk/src/components/index.ts
@@ -30,3 +30,4 @@ export { default as CannedResponseSelectorModal } from "./CannedResponseSelector
 export { default as FadedScrollableDiv } from "./FadedScrollableDiv.vue";
 export { default as AutocompleteNew } from "./frappe-ui/Autocomplete.vue";
 export { default as Link } from "./frappe-ui/Link.vue";
+export { default as ListViewBuilder } from "./ListViewBuilder.vue";
diff --git a/desk/src/pages/desk/agent/Agents.vue b/desk/src/pages/desk/agent/Agents.vue
index c6c97ab4f..9499ad13e 100644
--- a/desk/src/pages/desk/agent/Agents.vue
+++ b/desk/src/pages/desk/agent/Agents.vue
@@ -33,16 +33,16 @@
 import { computed, ref, h } from "vue";
 import { usePageMeta, Avatar } from "frappe-ui";
 import AddNewAgentsDialog from "@/components/desk/global/AddNewAgentsDialog.vue";
-import { LayoutHeader } from "@/components";
-
-import ListViewBuilder from "../../../components/ListViewBuilder.vue";
+import { LayoutHeader, ListViewBuilder } from "@/components";
 
 const isDialogVisible = ref(false);
 
+// filter not on first field/ datetime
+// options mei route or click ka option
 const options = computed(() => {
   return {
     doctype: "HD Agent",
-    default_filters: { is_active: ["=", "1"] },
+    default_filters: { is_active: ["=", 1] },
     column_config: {
       agent_name: {
         prefix: ({ row }) => {
@@ -55,6 +55,15 @@ const options = computed(() => {
         },
       },
     },
+    emptyState: {
+      title: "No Data",
+      description: "No data available",
+      button: {
+        label: "New Agent",
+        variant: "solid",
+        onClick: () => (isDialogVisible.value = true),
+      },
+    },
   };
 });
 
diff --git a/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py b/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py
index dc295b6cf..17575f5be 100644
--- a/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py
+++ b/helpdesk/helpdesk/doctype/hd_agent/hd_agent.py
@@ -26,16 +26,19 @@ def default_list_data():
                 "label": "Agent Name",
                 "key": "agent_name",
                 "width": "30rem",
+                "type": "Data",
             },
             {
                 "label": "Email",
                 "key": "email",
                 "width": "30rem",
+                "type": "Data",
             },
             {
                 "label": "Created On",
                 "key": "creation",
                 "width": "20rem",
+                "type": "Datetime",
             },
         ]
         rows = [