diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index dc826400..08c4359d 100644
--- a/src/pages/ListView/List.vue
+++ b/src/pages/ListView/List.vue
@@ -1,41 +1,80 @@
 <template>
-  <div class="px-8 pb-8 mt-2 text-sm">
-    <ListRow class="text-gray-700" :columnCount="columns.length">
-      <div
-        v-for="column in columns"
-        :key="column.label"
-        class="py-4"
-        :class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
-      >{{ column.label }}</div>
-    </ListRow>
-    <ListRow
-      class="cursor-pointer text-gray-900 hover:text-gray-600"
-      v-for="doc in data"
-      :key="doc.name"
-      @click.native="openForm(doc.name)"
-      :columnCount="columns.length"
-    >
-      <ListCell
-        v-for="column in columns"
-        :key="column.label"
-        :class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
-        :doc="doc"
-        :column="column"
-      ></ListCell>
-    </ListRow>
+  <div class="px-8 pb-8 mt-2 text-sm flex flex-col justify-between">
+    <div>
+      <ListRow class="text-gray-700" :columnCount="columns.length">
+        <div
+          v-for="column in columns"
+          :key="column.label"
+          class="py-4"
+          :class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
+        >{{ column.label }}</div>
+      </ListRow>
+      <ListRow
+        class="cursor-pointer text-gray-900 hover:text-gray-600"
+        v-for="doc in data"
+        :key="doc.name"
+        @click.native="openForm(doc.name)"
+        :columnCount="columns.length"
+      >
+        <ListCell
+          v-for="column in columns"
+          :key="column.label"
+          :class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
+          :doc="doc"
+          :column="column"
+        ></ListCell>
+      </ListRow>
+    </div>
+    <div class="flex items-center justify-center">
+      <Button :class="start == 0 && 'text-gray-600'" :disabled="start == 0" @click="prevPage">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 feather feather-chevron-left"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </Button>
+      <div class="mx-3">
+        <span class="font-medium">{{ start + data.length }}</span>
+        <span class="text-gray-600">of</span>
+        <span class="font-medium">{{ totalCount }}</span>
+      </div>
+      <Button :class="start + 10 >= totalCount && 'text-gray-600'" :disabled="start + 10 >= totalCount" @click="nextPage">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-4 h-4 feather feather-chevron-right"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </Button>
+    </div>
   </div>
 </template>
 <script>
 import frappe from 'frappejs';
 import ListRow from './ListRow';
 import ListCell from './ListCell';
+import Button from '@/components/Button';
 
 export default {
   name: 'List',
   props: ['listConfig', 'filters'],
   components: {
     ListRow,
-    ListCell
+    ListCell,
+    Button
   },
   watch: {
     listConfig(oldValue, newValue) {
@@ -46,7 +85,10 @@ export default {
   },
   data() {
     return {
-      data: []
+      data: [],
+      start: 0,
+      pageLength: 10,
+      totalCount: null
     };
   },
   computed: {
@@ -92,8 +134,22 @@ export default {
         fields: ['*'],
         filters,
         orderBy: 'creation',
-        limit: 13
+        start: this.start,
+        limit: this.pageLength
       });
+      let result = await frappe.db.getAll({
+        doctype: this.doctype,
+        fields: ['count(*) as count']
+      });
+      this.totalCount = result[0].count;
+    },
+    prevPage() {
+      this.start -= 10;
+      this.updateData();
+    },
+    nextPage() {
+      this.start += 10;
+      this.updateData();
     },
     getFilters() {
       let filters = {};
diff --git a/src/pages/ListView/ListView.vue b/src/pages/ListView/ListView.vue
index cebb1822..c2a5cf73 100644
--- a/src/pages/ListView/ListView.vue
+++ b/src/pages/ListView/ListView.vue
@@ -10,8 +10,8 @@
           <SearchBar class="ml-2" />
         </template>
       </PageHeader>
-      <div class="flex-1">
-        <List :listConfig="listConfig" :filters="filters" />
+      <div class="flex-1 flex">
+        <List :listConfig="listConfig" :filters="filters" class="flex-1" />
       </div>
     </div>
   </div>