diff --git a/frappe-ui b/frappe-ui
index 6b19f5b4..38eb500c 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 6b19f5b4a15153073074bc563823d822028cc9ee
+Subproject commit 38eb500cb47d6cfc7124817e9c2acdcd560045f1
diff --git a/frontend/src/components/ListRowItem.vue b/frontend/src/components/ListRowItem.vue
deleted file mode 100644
index 6a430e0a..00000000
--- a/frontend/src/components/ListRowItem.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <Tooltip
-    :text="tooltipText"
-    class="flex items-center space-x-2"
-    :class="align == 'text-right' ? 'justify-end' : ''"
-  >
-    <slot name="prefix"></slot>
-    <slot>
-      <div class="text-base truncate">
-        {{ label }}
-      </div>
-    </slot>
-  </Tooltip>
-</template>
-<script setup>
-import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
-  htmlToText,
-  formatNumberIntoCurrency,
-} from '@/utils'
-import { Tooltip } from 'frappe-ui'
-import { computed } from 'vue'
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'text',
-  },
-  align: {
-    type: String,
-    default: 'left',
-  },
-  value: {
-    type: [String, Number, Object],
-    default: '',
-  },
-})
-
-const tooltipText = computed(() => {
-  if (props.type === 'html') return ''
-  if (props.type === 'pretty_date') {
-    return dateFormat(props.value, dateTooltipFormat)
-  }
-  return props.value?.toString()
-})
-
-const label = computed(() => {
-  if (props.type === 'pretty_date') {
-    return timeAgo(props.value)
-  }
-  if (props.type === 'html') {
-    return htmlToText(props.value?.toString())
-  }
-  if (props.type === 'currency') {
-    return formatNumberIntoCurrency(props.value)
-  }
-  return props.value?.toString()
-})
-</script>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
deleted file mode 100644
index 4ece62e0..00000000
--- a/frontend/src/components/ListView.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template>
-  <div id="content" class="flex flex-col w-full overflow-x-auto flex-1">
-    <div class="flex flex-col overflow-y-hidden w-max min-w-full">
-      <div
-        id="list-header"
-        class="flex space-x-4 items-center mx-5 mb-2 p-2 rounded bg-gray-100"
-      >
-        <Checkbox
-          class="duration-300 cursor-pointer"
-          :modelValue="allRowsSelected"
-          @click.stop="toggleAllRows"
-        />
-        <div
-          v-for="column in columns"
-          :key="column"
-          class="text-base text-gray-600"
-          :class="[column.size, column.align]"
-        >
-          {{ column.label }}
-        </div>
-      </div>
-      <div id="list-rows" class="h-full overflow-y-auto">
-        <router-link
-          v-for="(row, i) in rows"
-          :key="row[rowKey]"
-          :to="$router.currentRoute.value.path + '/' + row[rowKey]"
-          class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
-        >
-          <div
-            class="flex space-x-4 items-center px-2 py-2.5 rounded"
-            :class="
-              selections.has(row[rowKey])
-                ? 'bg-gray-100 hover:bg-gray-200'
-                : 'hover:bg-gray-50'
-            "
-          >
-            <Checkbox
-              :modelValue="selections.has(row[rowKey])"
-              @click.stop="toggleRow(row[rowKey])"
-              class="duration-300 cursor-pointer"
-            />
-            <div
-              v-for="column in columns"
-              :key="column.key"
-              :class="[column.size, column.align]"
-            >
-              <ListRowItem
-                :value="getValue(row[column.key]).label"
-                :type="column.type"
-                :align="column.align"
-              >
-                <template #prefix>
-                  <div v-if="column.type === 'indicator'">
-                    <IndicatorIcon :class="getValue(row[column.key]).color" />
-                  </div>
-                  <div v-else-if="column.type === 'avatar'">
-                    <Avatar
-                      v-if="getValue(row[column.key]).label"
-                      class="flex items-center"
-                      :image="getValue(row[column.key]).image"
-                      :label="getValue(row[column.key]).image_label"
-                      size="sm"
-                    />
-                  </div>
-                  <div v-else-if="column.type === 'logo'">
-                    <Avatar
-                      v-if="getValue(row[column.key]).label"
-                      class="flex items-center"
-                      :image="getValue(row[column.key]).logo"
-                      :label="getValue(row[column.key]).image_label"
-                      size="sm"
-                    />
-                  </div>
-                  <div v-else-if="column.type === 'icon'">
-                    <FeatherIcon
-                      :name="getValue(row[column.key]).icon"
-                      class="h-3 w-3"
-                    />
-                  </div>
-                  <div v-else-if="column.type === 'phone'">
-                    <PhoneIcon class="h-4 w-4" />
-                  </div>
-                </template>
-                <div v-if="column.type === 'badge'">
-                  <Badge
-                    :variant="'subtle'"
-                    :theme="row[column.key].color"
-                    size="md"
-                    :label="row[column.key].label"
-                  />
-                </div>
-              </ListRowItem>
-            </div>
-          </div>
-          <div
-            v-if="i < rows.length - 1"
-            class="mx-2 h-px border-t border-gray-200"
-          />
-        </router-link>
-      </div>
-      <transition
-        enter-active-class="duration-300 ease-out"
-        enter-from-class="transform opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="transform opacity-0"
-      >
-        <div
-          v-if="selections.size"
-          class="fixed inset-x-0 bottom-6 mx-auto w-max text-base"
-        >
-          <div
-            class="w-[596px] flex items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
-          >
-            <div
-              class="flex flex-1 items-center space-x-3 border-r border-gray-300 text-gray-900"
-            >
-              <Checkbox
-                :modelValue="true"
-                :disabled="true"
-                class="text-gray-900"
-              />
-              <div>{{ selectedText }}</div>
-            </div>
-            <div class="flex items-center space-x-1">
-              <Button
-                class="text-gray-700"
-                :disabled="allRowsSelected"
-                :class="allRowsSelected ? 'cursor-not-allowed' : ''"
-                variant="ghost"
-                @click="toggleAllRows(true)"
-              >
-                Select all
-              </Button>
-              <Button icon="x" variant="ghost" @click="toggleAllRows(false)" />
-            </div>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-<script setup>
-import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import ListRowItem from '@/components/ListRowItem.vue'
-import { Checkbox, Avatar, Badge, FeatherIcon } from 'frappe-ui'
-import { reactive, computed } from 'vue'
-
-const props = defineProps({
-  list: {
-    type: Object,
-    required: true,
-  },
-  columns: {
-    type: Array,
-    default: [],
-  },
-  rows: {
-    type: Array,
-    default: [],
-  },
-  rowKey: {
-    type: String,
-    required: true,
-  },
-})
-
-function getValue(value) {
-  if (value && typeof value === 'object') {
-    value.label = value.full_name || value.label
-    value.image = value.image || value.user_image || value.logo
-    value.image_label = value.image_label || value.label
-    return value
-  }
-  return { label: value }
-}
-
-let selections = reactive(new Set())
-let selectedText = computed(() => {
-  let title =
-    selections.size === 1 ? props.list.singular_label : props.list.plural_label
-  return `${selections.size} ${title} selected`
-})
-
-const allRowsSelected = computed(() => {
-  if (!props.rows.length) return false
-  return selections.size === props.rows.length
-})
-
-function toggleRow(row) {
-  if (!selections.delete(row)) {
-    selections.add(row)
-  }
-}
-
-function toggleAllRows(select) {
-  if (!select || allRowsSelected.value) {
-    selections.clear()
-    return
-  }
-  props.rows.forEach((row) => selections.add(row[props.rowKey]))
-}
-</script>