diff --git a/frappe-ui b/frappe-ui
index c92596203..9310cdb05 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit c92596203011e52c650602bc4d4f10c4163defc0
+Subproject commit 9310cdb056948121dced70995775d61e9170b112
diff --git a/frontend/package.json b/frontend/package.json
index 1df665b1f..12550e735 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,7 @@
 		"dom-to-image": "^2.6.0",
 		"echarts": "^5.4.0",
 		"feather-icons": "^4.28.0",
-		"frappe-ui": "0.1.5",
+		"frappe-ui": "0.1.35",
 		"grid-layout-plus": "^1.0.2",
 		"lucide-vue-next": "^0.300.0",
 		"pinia": "^2.0.30",
diff --git a/frontend/src/dashboard/useDashboard.js b/frontend/src/dashboard/useDashboard.js
index 1782421e4..b64e3c1a3 100644
--- a/frontend/src/dashboard/useDashboard.js
+++ b/frontend/src/dashboard/useDashboard.js
@@ -1,5 +1,4 @@
 import useQuery from '@/query/resources/useQuery'
-import { useQueryResource } from '@/query/useQueryResource'
 import sessionStore from '@/stores/sessionStore'
 import { areDeeplyEqual, safeJSONParse } from '@/utils'
 import { createToast } from '@/utils/toasts'
@@ -45,9 +44,7 @@ export default function useDashboard(name) {
 		state.itemLayouts = state.doc.items.map(makeLayoutObject)
 		state.isOwner = state.doc.owner == session.user.user_id
 		state.canShare = state.isOwner || session.user.is_admin
-		resource.is_private.fetch().then((res) => {
-			state.isPrivate = res.message
-		})
+		resource.is_private.fetch().then((res) => (state.isPrivate = res))
 		state.loading = false
 	}
 	reload()
@@ -186,13 +183,11 @@ export default function useDashboard(name) {
 			throw new Error(`Query not found for item ${itemId}`)
 		}
 		const filters = await getChartFilters(itemId)
-		return resource.fetch_chart_data
-			.submit({
-				item_id: itemId,
-				query_name: queryName,
-				filters,
-			})
-			.then((res) => res.message)
+		return resource.fetch_chart_data.submit({
+			item_id: itemId,
+			query_name: queryName,
+			filters,
+		})
 	}
 
 	function refreshFilter(filter_id) {
diff --git a/frontend/src/datasource/DataSource.vue b/frontend/src/datasource/DataSource.vue
index 11e233769..7697bfcba 100644
--- a/frontend/src/datasource/DataSource.vue
+++ b/frontend/src/datasource/DataSource.vue
@@ -9,18 +9,17 @@
 		/>
 	</header>
 
-	<ListView
-		:columns="[
-			{ label: 'Table', name: 'label' },
-			{ label: 'Status', name: 'status' },
-		]"
-		:rows="dataSource.tableList.filter((table) => !table.is_query_based)"
-	>
-		<template #actions>
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl placeholder="Search by Title" v-model="searchQuery" :debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
 			<Button
 				variant="outline"
 				iconLeft="link-2"
-				@click="$router.push(`/data-source/${dataSource.doc.name}/relationships`)"
+				@click="router.push(`/data-source/${dataSource.doc.name}/relationships`)"
 			>
 				Manage Relationships
 			</Button>
@@ -29,31 +28,30 @@
 				:button="{ icon: 'more-horizontal', variant: 'outline' }"
 				:options="dropdownActions"
 			/>
-		</template>
-
-		<template #list-row="{ row: table }">
-			<ListRow
-				as="router-link"
-				:row="table"
-				:to="{
+		</div>
+		<ListView
+			:columns="tableListColumns"
+			:rows="filteredTableList"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (table) => ({
 					name: 'DataSourceTable',
 					params: { name: dataSource.doc.name, table: table.name },
-				}"
-			>
-				<ListRowItem> {{ table.label }} </ListRowItem>
-				<ListRowItem class="space-x-2">
-					<IndicatorIcon :class="table.hidden ? 'text-gray-500' : 'text-green-500'" />
-					<span> {{ table.hidden ? 'Disabled' : 'Enabled' }} </span>
-				</ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No tables.</div>
-			<div class="mt-1 text-base text-gray-600">No tables to display.</div>
-			<Button class="mt-4" label="Sync Tables" variant="solid" @click="syncTables" />
-		</template>
-	</ListView>
+				}),
+				emptyState: {
+					title: 'No tables.',
+					description: 'No tables to display.',
+					button: {
+						label: 'Sync Tables',
+						variant: 'solid',
+						onClick: syncTables,
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<Dialog
 		v-model="showDeleteDialog"
@@ -80,9 +78,9 @@
 
 <script setup lang="jsx">
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import ListView from '@/components/ListView.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
-import { ListRow, ListRowItem } from 'frappe-ui'
+import { ListView } from 'frappe-ui'
+import { SearchIcon } from 'lucide-vue-next'
 import { computed, inject, provide, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import useDataSource from './useDataSource'
@@ -100,15 +98,13 @@ provide('dataSource', dataSource)
 dataSource.fetchTables()
 
 const searchQuery = ref('')
-const filteredList = computed(() => {
-	if (!searchQuery.value) {
-		return dataSource.tableList.filter((table) => !table.is_query_based)
-	}
-	return dataSource.tableList.filter(
-		(table) =>
-			!table.is_query_based &&
-			table.label.toLowerCase().includes(searchQuery.value.toLowerCase())
-	)
+const filteredTableList = computed(() => {
+	const tableList = dataSource.tableList.filter((t) => !t.is_query_based)
+	if (!tableList.length) return []
+	if (!searchQuery.value) return tableList
+	return tableList.filter((table) => {
+		return table.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+	})
 })
 
 const showDeleteDialog = ref(false)
@@ -140,4 +136,17 @@ watchEffect(() => {
 		document.title = `${title} - Frappe Insights`
 	}
 })
+
+const tableListColumns = [
+	{ label: 'Table', key: 'label' },
+	{
+		label: 'Status',
+		key: 'status',
+		getLabel: ({ row }) => (row.hidden ? 'Disabled' : 'Enabled'),
+		prefix: ({ row }) => {
+			const color = row.hidden ? 'text-gray-500' : 'text-green-500'
+			return <IndicatorIcon class={color} />
+		},
+	},
+]
 </script>
diff --git a/frontend/src/datasource/DataSourceList.vue b/frontend/src/datasource/DataSourceList.vue
index 1878594ba..cb20639f5 100644
--- a/frontend/src/datasource/DataSourceList.vue
+++ b/frontend/src/datasource/DataSourceList.vue
@@ -9,49 +9,38 @@
 			</Button>
 		</div>
 	</header>
-	<ListView
-		:columns="[
-			{ label: 'Title', name: 'title' },
-			{ label: 'Status', name: 'status' },
-			{ label: 'Database Type', name: 'database_type' },
-			{ label: 'Created', name: 'created_from_now' },
-		]"
-		:rows="sources.list"
-	>
-		<template #list-row="{ row: dataSource }">
-			<ListRow
-				as="router-link"
-				:row="dataSource"
-				:to="{
+
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl placeholder="Search by Title" v-model="searchQuery" :debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
+		</div>
+		<ListView
+			:columns="dataSourceListColumns"
+			:rows="filteredSourceList"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (dataSource) => ({
 					name: 'DataSource',
 					params: { name: dataSource.name },
-				}"
-			>
-				<ListRowItem> {{ dataSource.title }} </ListRowItem>
-				<ListRowItem class="space-x-2">
-					<IndicatorIcon
-						:class="
-							dataSource.status == 'Inactive' ? 'text-gray-500' : 'text-green-500'
-						"
-					/>
-					<span> {{ dataSource.status }} </span>
-				</ListRowItem>
-				<ListRowItem> {{ dataSource.database_type }} </ListRowItem>
-				<ListRowItem> {{ dataSource.created_from_now }} </ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No data sources.</div>
-			<div class="mt-1 text-base text-gray-600">No data sources to display.</div>
-			<Button
-				class="mt-4"
-				label="New Data Source"
-				variant="solid"
-				@click="new_dialog = true"
-			/>
-		</template>
-	</ListView>
+				}),
+				emptyState: {
+					title: 'No Data Sources.',
+					description: 'No data sources to display.',
+					button: {
+						label: 'New Data Source',
+						variant: 'solid',
+						onClick: () => (new_dialog = true),
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<NewDialogWithTypes
 		v-model:show="new_dialog"
@@ -66,7 +55,6 @@
 
 <script setup lang="jsx">
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import ListView from '@/components/ListView.vue'
 import NewDialogWithTypes from '@/components/NewDialogWithTypes.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
 import ConnectMariaDBDialog from '@/datasource/ConnectMariaDBDialog.vue'
@@ -74,9 +62,9 @@ import ConnectPostgreDBDialog from '@/datasource/ConnectPostgreDBDialog.vue'
 import UploadCSVFileDialog from '@/datasource/UploadCSVFileDialog.vue'
 import useDataSourceStore from '@/stores/dataSourceStore'
 import { updateDocumentTitle } from '@/utils'
-import { ListRow, ListRowItem } from 'frappe-ui'
-import { PlusIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { ListView } from 'frappe-ui'
+import { PlusIcon, SearchIcon } from 'lucide-vue-next'
+import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const new_dialog = ref(false)
@@ -87,11 +75,15 @@ if (route.hash == '#new') {
 }
 
 const sources = useDataSourceStore()
-
-const StatusCell = (props) => (
-	<Badge theme={props.row.status == 'Inactive' ? 'orange' : 'green'}>{props.row.status}</Badge>
-)
-const columns = []
+const searchQuery = ref('')
+const filteredSourceList = computed(() => {
+	if (searchQuery.value) {
+		return sources.list.filter((source) => {
+			return source.title.toLowerCase().includes(searchQuery.value.toLowerCase())
+		})
+	}
+	return sources.list
+})
 
 const router = useRouter()
 const showConnectMariaDBDialog = ref(false)
@@ -127,6 +119,20 @@ const databaseTypes = ref([
 	},
 ])
 
+const dataSourceListColumns = [
+	{ label: 'Title', key: 'title' },
+	{
+		label: 'Status',
+		key: 'status',
+		prefix: ({ row }) => {
+			const color = row.status == 'Inactive' ? 'text-gray-500' : 'text-green-500'
+			return <IndicatorIcon class={color} />
+		},
+	},
+	{ label: 'Database Type', key: 'database_type' },
+	{ label: 'Created', key: 'created_from_now' },
+]
+
 const pageMeta = ref({ title: 'Data Sources' })
 updateDocumentTitle(pageMeta)
 </script>
diff --git a/frontend/src/datasource/useDataSource.ts b/frontend/src/datasource/useDataSource.ts
index e57c6441e..109f47371 100644
--- a/frontend/src/datasource/useDataSource.ts
+++ b/frontend/src/datasource/useDataSource.ts
@@ -24,8 +24,8 @@ function useDataSource(name: string) {
 	async function fetchTables() {
 		const promises = [resource.get_tables.submit(), resource.get_queries.submit()]
 		const responses = await Promise.all(promises)
-		tableList.value = responses[0].message
-		queryList.value = responses[1].message
+		tableList.value = responses[0]
+		queryList.value = responses[1]
 		dropdownOptions.value = makeDropdownOptions()
 		groupedTableOptions.value = makeGroupedTableOptions()
 		return tableList.value
diff --git a/frontend/src/datasource/useDataSourceTable.ts b/frontend/src/datasource/useDataSourceTable.ts
index bdf67ca51..fb7500ebf 100644
--- a/frontend/src/datasource/useDataSourceTable.ts
+++ b/frontend/src/datasource/useDataSourceTable.ts
@@ -44,7 +44,7 @@ async function useDataSourceTable(params: GetTableParams) {
 	const table: DataSourceTable = reactive({
 		doc,
 		columns,
-		rows: computed(() => resource.getPreview.data?.message),
+		rows: computed(() => resource.getPreview.data),
 		loading: resource.loading,
 		syncing: resource.syncTable.loading,
 		sync: () => resource.syncTable.submit(),
diff --git a/frontend/src/notebook/Notebook.vue b/frontend/src/notebook/Notebook.vue
index db5edcd12..34601b554 100644
--- a/frontend/src/notebook/Notebook.vue
+++ b/frontend/src/notebook/Notebook.vue
@@ -1,11 +1,10 @@
 <script setup lang="jsx">
-import ListView from '@/components/ListView.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
 import useNotebook from '@/notebook/useNotebook'
 import useNotebooks from '@/notebook/useNotebooks'
 import { updateDocumentTitle } from '@/utils'
-import { ListRow, ListRowItem } from 'frappe-ui'
-import { PlusIcon } from 'lucide-vue-next'
+import { ListView } from 'frappe-ui'
+import { PlusIcon, SearchIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -13,6 +12,7 @@ const props = defineProps({ notebook: String })
 const router = useRouter()
 const notebook = useNotebook(props.notebook)
 notebook.reload()
+const searchQuery = ref('')
 
 async function createNotebookPage() {
 	const page_name = await notebook.createPage(props.notebook)
@@ -54,15 +54,14 @@ updateDocumentTitle(pageMeta)
 			</Button>
 		</div>
 	</header>
-	<ListView
-		:columns="[
-			{ label: 'Title', name: 'title' },
-			{ label: 'Created', name: 'created_from_now' },
-			{ label: 'Modified', name: 'modified_from_now' },
-		]"
-		:rows="notebook.pages"
-	>
-		<template #actions>
+
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl placeholder="Search by Title" v-model="searchQuery" :debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
 			<Dropdown
 				placement="left"
 				:button="{ icon: 'more-horizontal', variant: 'ghost' }"
@@ -74,37 +73,34 @@ updateDocumentTitle(pageMeta)
 					},
 				]"
 			/>
-		</template>
-
-		<template #list-row="{ row: page }">
-			<ListRow
-				as="router-link"
-				:row="page"
-				:to="{
+		</div>
+		<ListView
+			:columns="[
+				{ label: 'Title', key: 'title' },
+				{ label: 'Created', key: 'created_from_now' },
+				{ label: 'Modified', key: 'modified_from_now' },
+			]"
+			:rows="notebook.pages"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (page) => ({
 					name: 'NotebookPage',
 					params: { notebook: notebook.doc.name, name: page.name },
-				}"
-			>
-				<ListRowItem>
-					<FeatherIcon name="file-text" class="h-4 w-4 text-gray-600" />
-					<span class="ml-3">{{ page.title }}</span>
-				</ListRowItem>
-				<ListRowItem> {{ page.created_from_now }} </ListRowItem>
-				<ListRowItem> {{ page.modified_from_now }} </ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No pages.</div>
-			<div class="mt-1 text-base text-gray-600">No pages to display.</div>
-			<Button
-				class="mt-4"
-				label="New Page"
-				variant="solid"
-				@click="() => createNotebookPage()"
-			/>
-		</template>
-	</ListView>
+				}),
+				emptyState: {
+					title: 'No pages.',
+					description: 'No pages to display.',
+					button: {
+						label: 'New Page',
+						variant: 'solid',
+						onClick: () => createNotebookPage(),
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<Dialog
 		:options="{
diff --git a/frontend/src/notebook/NotebookList.vue b/frontend/src/notebook/NotebookList.vue
index edd301a67..d71db68f2 100644
--- a/frontend/src/notebook/NotebookList.vue
+++ b/frontend/src/notebook/NotebookList.vue
@@ -1,16 +1,16 @@
 <script setup lang="jsx">
-import ListView from '@/components/ListView.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
 import useNotebooks from '@/notebook/useNotebooks'
 import { updateDocumentTitle } from '@/utils'
-import { ListRow, ListRowItem } from 'frappe-ui'
-import { PlusIcon } from 'lucide-vue-next'
+import { ListView } from 'frappe-ui'
+import { PlusIcon, SearchIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const notebooks = useNotebooks()
 notebooks.reload()
+const searchQuery = ref('')
 
 const TitleWithIcon = (props) => (
 	<div class="flex items-center">
@@ -54,43 +54,42 @@ updateDocumentTitle(pageMeta)
 			</Button>
 		</div>
 	</header>
-	<ListView
-		:columns="[
-			{ label: 'Title', key: 'title' },
-			{ label: 'Created', key: 'created_from_now' },
-			{ label: 'Modified', key: 'modified_from_now' },
-		]"
-		:rows="notebooks.list"
-	>
-		<template #list-row="{ row: notebook }">
-			<ListRow
-				as="router-link"
-				:row="notebook"
-				:to="{
+
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl placeholder="Search by Title" v-model="searchQuery" :debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
+		</div>
+		<ListView
+			:columns="[
+				{ label: 'Title', key: 'title' },
+				{ label: 'Created', key: 'created_from_now' },
+				{ label: 'Modified', key: 'modified_from_now' },
+			]"
+			:rows="notebooks.list"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (notebook) => ({
 					name: 'Notebook',
 					params: { notebook: notebook.name },
-				}"
-			>
-				<ListRowItem>
-					<FeatherIcon name="file-text" class="h-4 w-4 text-gray-600" />
-					<span class="ml-3">{{ notebook.title }}</span>
-				</ListRowItem>
-				<ListRowItem> {{ notebook.created_from_now }} </ListRowItem>
-				<ListRowItem> {{ notebook.modified_from_now }} </ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No notebooks.</div>
-			<div class="mt-1 text-base text-gray-600">No notebooks to display.</div>
-			<Button
-				class="mt-4"
-				label="New Notebook"
-				variant="solid"
-				@click="new_notebook_dialog = true"
-			/>
-		</template>
-	</ListView>
+				}),
+				emptyState: {
+					title: 'No notebooks.',
+					description: 'No notebooks to display.',
+					button: {
+						label: 'New Notebook',
+						variant: 'solid',
+						onClick: () => (new_notebook_dialog = true),
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<Dialog :options="{ title: 'New Notebook' }" v-model="new_notebook_dialog">
 		<template #body-content>
diff --git a/frontend/src/query/QueryList.vue b/frontend/src/query/QueryList.vue
index 83449dc18..7adab0d23 100644
--- a/frontend/src/query/QueryList.vue
+++ b/frontend/src/query/QueryList.vue
@@ -1,7 +1,5 @@
 <script setup lang="jsx">
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import ListFilter from '@/components/ListFilter/ListFilter.vue'
-import ListView from '@/components/ListView.vue'
 import NewDialogWithTypes from '@/components/NewDialogWithTypes.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
 import useNotebooks from '@/notebook/useNotebooks'
@@ -10,13 +8,14 @@ import sessionStore from '@/stores/sessionStore'
 import { isEmptyObj, updateDocumentTitle } from '@/utils'
 import { getIcon } from '@/widgets/widgets'
 import { useStorage } from '@vueuse/core'
-import { ListRow, ListRowItem } from 'frappe-ui'
+import { Avatar, ListFilter, ListView } from 'frappe-ui'
 import {
 	AlignStartVertical,
 	ComponentIcon,
 	FileTerminal,
 	GanttChartSquare,
 	PlusIcon,
+	SearchIcon,
 	Square,
 } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
@@ -121,6 +120,66 @@ function getQueryTypeIcon(query) {
 	if (query.is_script_query) return FileTerminal
 	return Square
 }
+
+const queryListColumns = [
+	{
+		label: 'Title',
+		key: 'title',
+		width: 2,
+		prefix: ({ row }) => {
+			if (!row.is_stored) return null
+			return <ComponentIcon class="h-4 w-4 text-gray-600" fill="currentColor" />
+		},
+	},
+	{
+		label: 'Execution Status',
+		key: 'status',
+		width: 1,
+		getLabel: ({ row }) => row.status.replace('Execution', ''),
+		prefix: ({ row }) => {
+			let color = 'text-gray-500'
+			if (row.status === 'Pending Execution') color = 'text-yellow-500'
+			if (row.status === 'Execution Successful') color = 'text-green-500'
+			if (row.status === 'Execution Failed') color = 'text-red-500'
+			return <IndicatorIcon class={color} />
+		},
+	},
+	{
+		label: 'Chart Type',
+		key: 'chart_type',
+		width: 1,
+		prefix: ({ row }) => {
+			if (!row.chart_type) return null
+			const Icon = getIcon(row.chart_type)
+			return <Icon class="h-4 w-4 text-gray-700" />
+		},
+	},
+	{
+		label: 'Data Source',
+		key: 'data_source',
+		width: 1,
+		getLabel: ({ row }) => row.data_source_title || row.data_source,
+	},
+	{
+		label: 'ID',
+		key: 'name',
+		width: 1,
+	},
+	{
+		label: 'Created By',
+		key: 'owner_name',
+		width: 1,
+		prefix: ({ row }) => {
+			return <Avatar image={row.owner_image} label={row.owner_name} size="md" />
+		},
+	},
+	{
+		label: 'Created',
+		key: 'created_from_now',
+		width: 1,
+		align: 'right',
+	},
+]
 </script>
 
 <template>
@@ -135,75 +194,40 @@ function getQueryTypeIcon(query) {
 		</div>
 	</header>
 
-	<ListView
-		:columns="[
-			{ label: 'Title', name: 'title', class: 'flex-[3]' },
-			{ label: 'Execution Status', name: 'status', class: 'flex-[2]' },
-			{ label: 'Chart Type', name: 'chart_type', class: 'flex-1' },
-			{ label: 'Data Source', name: 'data_source', class: 'flex-1' },
-			{ label: 'ID', name: 'name', class: 'flex-1' },
-			{ label: 'Created By', name: 'owner_name', class: 'flex-1' },
-			{ label: 'Created', name: 'created_from_now', class: 'flex-1 text-right' },
-		]"
-		:rows="queries"
-	>
-		<template #actions>
-			<ListFilter v-model="filters" :docfields="queryStore.getFilterableFields()" />
-		</template>
-		<template #list-row="{ row: query }">
-			<ListRow
-				as="router-link"
-				:row="query"
-				:to="{ name: 'Query', params: { name: query.name } }"
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl
+				placeholder="Search by Title"
+				:modelValue="filters.title?.[1]"
+				@update:modelValue="filters.title = ['like', $event]"
+				:debounce="300"
 			>
-				<ListRowItem class="flex-[3]">
-					<ComponentIcon
-						v-if="query.is_stored"
-						class="h-4 w-4 text-gray-600"
-						fill="currentColor"
-					/>
-					<span> {{ query.title }} </span>
-				</ListRowItem>
-				<ListRowItem class="flex-[2] space-x-2">
-					<IndicatorIcon
-						:class="
-							{
-								'Pending Execution': 'text-yellow-500',
-								'Execution Successful': 'text-green-500',
-								'Execution Failed': 'text-red-500',
-							}[query.status] || 'text-gray-500'
-						"
-					/>
-					<span> {{ query.status.replace('Execution', '') }} </span>
-				</ListRowItem>
-				<ListRowItem class="flex-1 space-x-2">
-					<component
-						v-if="query.chart_type"
-						:is="getIcon(query.chart_type)"
-						class="h-4 w-4 text-gray-700"
-					/>
-					<span> {{ query.chart_type }} </span>
-				</ListRowItem>
-				<ListRowItem class="flex-1">
-					{{ query.data_source_title || query.data_source }}
-				</ListRowItem>
-				<ListRowItem class="flex-1"> {{ query.name }} </ListRowItem>
-				<ListRowItem class="flex-1 space-x-2">
-					<Avatar :image="query.owner_image" :label="query.owner_name" size="md" />
-					<span> {{ query.owner_name }} </span>
-				</ListRowItem>
-				<ListRowItem class="flex-1 justify-end">
-					{{ query.created_from_now }}
-				</ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No Query Created.</div>
-			<div class="mt-1 text-base text-gray-600">Create a new query to get started.</div>
-			<Button class="mt-3" label="New Query" variant="solid" @click="new_dialog = true" />
-		</template>
-	</ListView>
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
+			<ListFilter v-model="filters" :docfields="queryStore.getFilterableFields()" />
+		</div>
+		<ListView
+			:columns="queryListColumns"
+			:rows="queries"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (query) => ({ name: 'Query', params: { name: query.name } }),
+				emptyState: {
+					title: 'No Query Created.',
+					description: 'Create a new query to get started.',
+					button: {
+						label: 'New Query',
+						variant: 'solid',
+						onClick: () => (new_dialog = true),
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<NewDialogWithTypes
 		v-model:show="new_dialog"
diff --git a/frontend/src/query/resources/useQuery.js b/frontend/src/query/resources/useQuery.js
index 9ac375c29..8e0b7d63e 100644
--- a/frontend/src/query/resources/useQuery.js
+++ b/frontend/src/query/resources/useQuery.js
@@ -104,7 +104,7 @@ export default function useQuery(name) {
 		state.duplicating = true
 		await queue(() => resource.duplicate.submit())
 		state.duplicating = false
-		return resource.duplicate.data.message
+		return resource.duplicate.data
 	}
 
 	state.delete = async () => {
diff --git a/frontend/src/utils/query/columns.js b/frontend/src/utils/query/columns.js
index b1c084d26..98fc188de 100644
--- a/frontend/src/utils/query/columns.js
+++ b/frontend/src/utils/query/columns.js
@@ -33,7 +33,7 @@ export function useQueryColumns(query) {
 	watch(tables, fetchColumns, { immediate: true })
 
 	const options = computed(() =>
-		query.fetchColumns.data?.message.map((c) => {
+		query.fetchColumns.data?.map((c) => {
 			return {
 				...c,
 				value: c.column, // calc value key for autocomplete options
diff --git a/frontend/src/utils/query/tables.js b/frontend/src/utils/query/tables.js
index a8fc59964..7683c8c0a 100644
--- a/frontend/src/utils/query/tables.js
+++ b/frontend/src/utils/query/tables.js
@@ -14,8 +14,8 @@ export function useQueryTables(query) {
 		})
 	)
 	const sourceTables = computed(() =>
-		query.fetchTables.data?.message
-			.filter((t) => t.table != query.doc.name)
+		query.fetchTables.data
+			?.filter((t) => t.table != query.doc.name)
 			.map((table) => ({
 				...table,
 				value: table.table,
diff --git a/frontend/src/utils/useTeams.js b/frontend/src/utils/useTeams.js
index 79cdfc9fb..30429f4ab 100644
--- a/frontend/src/utils/useTeams.js
+++ b/frontend/src/utils/useTeams.js
@@ -37,8 +37,8 @@ export function useTeam(teamname) {
 		},
 	})
 	team.get_members_and_resources.fetch()
-	team.members = computed(() => team.get_members_and_resources.data?.message.members)
-	team.resources = computed(() => team.get_members_and_resources.data?.message.resources)
+	team.members = computed(() => team.get_members_and_resources.data?.members)
+	team.resources = computed(() => team.get_members_and_resources.data?.resources)
 
 	team.searchMembers = debounce((query) => {
 		if (!query && query !== '') {
@@ -46,7 +46,7 @@ export function useTeam(teamname) {
 			return
 		}
 		return team.search_team_members.submit({ query }).then((data) => {
-			team.memberOptions = data.message || []
+			team.memberOptions = data || []
 		})
 	}, 500)
 	team.searchMembers('')
@@ -89,7 +89,7 @@ export function useTeam(teamname) {
 			return
 		}
 		return team.search_team_resources.submit({ resource_type, query }).then((data) => {
-			team.resourceOptions = data.message || []
+			team.resourceOptions = data || []
 		})
 	}, 500)