diff --git a/README.md b/README.md
index c43fda0..07bc452 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,6 @@ Place `index.js` in the `${DIRECTUS_PROJECT_ROOT_FOLDER}/extensions/layout/board
 ## Usage
 - You must set a field interface to *dropdown* to choose as a Group By option.
 
-## Current limitation
-- No paging feature! I highly prioritize to add it.
-- Many group derives too heavy API & SQL request.
-
 # License
 
 This repository is licensed under the GPLv3 License. See the LICENSE file for details.
diff --git a/src/board.vue b/src/board.vue
index 0ddd004..a6d332a 100644
--- a/src/board.vue
+++ b/src/board.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="boards-layout">
-    <lane-component
+    <paginate-group
       v-for="choice in choices"
       :key="choice.text"
       :field="field"
@@ -14,15 +14,20 @@
 </template>
 
 <script lang="ts">
-import {
-  useCollection,
-} from "@directus/extensions-sdk";
+import { useCollection } from "@directus/extensions-sdk";
 import { Field, Filter } from "@directus/shared/types";
-import { computed, defineComponent, PropType, toRefs } from "vue";
-import LaneComponent from "./components/lane.vue";
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  PropType,
+  ref,
+  toRefs,
+} from "vue";
+import paginateGroup from "./components/paginateGroup.vue";
 import { LayoutOptions } from "./types";
 export default defineComponent({
-  components: { LaneComponent },
+  components: { paginateGroup },
   inheritAttrs: false,
   props: {
     layoutOptions: { type: Object as PropType<LayoutOptions> },
@@ -40,14 +45,13 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const {
-      collection: collectionKey,
-      layoutOptions,
-    } = toRefs(props);
+    const { collection: collectionKey, layoutOptions } = toRefs(props);
     const collection = useCollection(collectionKey);
 
     const field = computed<Field | undefined>(() =>
-      collection.fields.value.find((f) => f.field == layoutOptions.value?.groupByField)
+      collection.fields.value.find(
+        (f) => f.field == layoutOptions.value?.groupByField
+      )
     );
     const choices = computed<{ text: string }[]>(
       () => field.value?.meta?.options?.choices || []
diff --git a/src/components/lane.vue b/src/components/lane.vue
deleted file mode 100644
index d6483d3..0000000
--- a/src/components/lane.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<template>
-  <v-card class="swimlane" style="max-height: none">
-    <v-card-title class="header">
-      <component
-        :is="`display-${field?.meta?.display}`"
-        v-bind="field?.meta?.display_options"
-        :type="field?.type"
-        :value="fieldValue"
-      />
-    </v-card-title>
-    <v-card-text class="main">
-      <draggable
-        :list="items"
-        item-key="id"
-        :data-group="fieldValue"
-        style="height: 100%"
-        group="kanban"
-        @end="handleDragEnd"
-      >
-        <template #item="{ element }">
-          <v-card
-            class="drag-handle card"
-            :data-item-id="element.id"
-            @click="() => handleCardClick(element)"
-          >
-            <div class="card-header">
-              <div class="card-icon" v-if="layoutOptions?.iconTemplate">
-                <render-template
-                  class="card-icon-inner"
-                  :template="layoutOptions.iconTemplate"
-                  :collection="collection"
-                  :item="element"
-                />
-              </div>
-
-              <render-template
-                class="card-title"
-                v-if="layoutOptions?.headerTemplate"
-                :template="layoutOptions.headerTemplate"
-                :collection="collection"
-                :item="element"
-              /><span v-else class="card-title muted">--</span>
-            </div>
-            <v-card-text v-if="layoutOptions?.cardContentTemplate">
-              <render-template
-                :template="layoutOptions.cardContentTemplate"
-                :collection="collection"
-                :item="element"
-              />
-            </v-card-text>
-          </v-card>
-        </template>
-      </draggable>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { useApi, useCollection, useItems } from "@directus/extensions-sdk";
-import Draggable from "vuedraggable";
-import { Field, Filter, Item, LogicalFilterAND } from "@directus/shared/types";
-import { computed, defineComponent, PropType, ref, toRefs } from "vue";
-import { LayoutOptions } from "../types";
-import { useRouter } from "vue-router";
-export default defineComponent({
-  components: { Draggable },
-  inheritAttrs: false,
-  props: {
-    collection: { type: String, required: true },
-    field: { type: Object as PropType<Field> },
-    fieldValue: { type: String },
-    layoutOptions: { type: Object as PropType<LayoutOptions> },
-    filter: {
-      type: Object as PropType<Filter | null>,
-      default: null,
-    },
-    search: {
-      type: String as PropType<string | null>,
-      default: null,
-    },
-  },
-  setup(props) {
-    const {
-      collection: collectionKey,
-      fieldValue,
-      field,
-      filter: originFilter,
-      search,
-      layoutOptions,
-    } = toRefs(props);
-    const collection = useCollection(collectionKey);
-
-    const filter = computed<LogicalFilterAND>(() => ({
-      _and: [
-        { [field.value!.field]: { _eq: fieldValue.value } },
-        originFilter.value || {},
-      ],
-    }));
-    const fields = computed<string[]>(() =>
-      collection.fields.value.map((f) => f.field)
-    );
-
-    const sort = computed(() => layoutOptions.value?.sort);
-
-    const { items } = useItems(collectionKey, {
-      limit: ref(25),
-      sort,
-      search,
-      page: ref(1),
-      filter,
-      fields,
-    });
-
-    interface EndEvent extends CustomEvent {
-      oldIndex: number;
-      newIndex: number;
-      from: HTMLElement;
-      to: HTMLElement;
-      item: HTMLElement;
-    }
-
-    const api = useApi();
-    const router = useRouter();
-    function handleDragEnd(event: EndEvent) {
-      const id = event.item.dataset["itemId"];
-      const newValue = event.to.dataset["group"];
-      const diff = { id, [field.value!.field]: newValue };
-      api.patch(`items/${collectionKey.value}`, [diff]);
-    }
-
-    function handleCardClick(item: Item) {
-      const { id } = item;
-
-      router.push(`/content/${collectionKey.value}/${encodeURIComponent(id)}`);
-    }
-
-    return { items, handleDragEnd, handleCardClick };
-  },
-});
-</script>
-
-<style scoped>
-.swimlane {
-  background-color: var(--background-subdued);
-  border-radius: var(--border-radius);
-  flex: 0 0 320px;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: stretch;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-}
-.header > .item-count {
-  color: var(--foreground-subdued);
-  font-size: 0.95rem;
-}
-
-.main {
-  flex-grow: 1;
-}
-.v-card.card {
-  background-color: var(--background-page);
-}
-
-.card-header {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  margin-top: 4px;
-  padding: 16px;
-  gap: 16px;
-  font-weight: 700;
-}
-
-.card-header > .card-title {
-  white-space: inherit;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-.card-header > .card-title.muted {
-  color: var(--foreground-subdued);
-}
-
-.card-icon {
-  width: 48px;
-  height: 48px;
-  background-color: var(--background-subdued);
-  border-radius: var(--border-radius);
-  font-size: 32px;
-  flex: 0 0 48px;
-  display: flex;
-  justify-content: stretch;
-  align-items: stretch;
-}
-
-.card-icon > .card-icon-inner {
-  padding: 0;
-  flex-grow: 1;
-  text-align: center;
-}
-</style>
diff --git a/src/components/paginateGroup.vue b/src/components/paginateGroup.vue
new file mode 100644
index 0000000..22b5fc3
--- /dev/null
+++ b/src/components/paginateGroup.vue
@@ -0,0 +1,116 @@
+<template>
+  <section>
+    <header>
+      <component
+        :is="`display-${field?.meta?.display}`"
+        v-bind="field?.meta?.display_options"
+        :type="field?.type"
+        :value="fieldValue"
+      />
+    </header>
+    <main class="paginate-units">
+      <paginate-unit
+        v-for="page in pages"
+        :key="page"
+        :page="page"
+        :collection-key="collectionKey"
+        :field="field"
+        :field-value="fieldValue"
+        :layout-options="layoutOptions"
+        :filter="filter"
+        :search="search"
+        @hasNextPage="hundleHasNextPage"
+      />
+    </main>
+  </section>
+</template>
+
+<script lang="ts">
+import { Field, Filter, LogicalFilterAND } from "@directus/shared/types";
+import { computed, defineComponent, PropType, ref, toRefs, watch } from "vue";
+import { LayoutOptions } from "../types";
+import PaginateUnit from "./paginateUnit.vue";
+export default defineComponent({
+  components: { PaginateUnit },
+  inheritAttrs: false,
+  props: {
+    collection: { type: String, required: true },
+    field: { type: Object as PropType<Field> },
+    fieldValue: { type: String },
+    layoutOptions: { type: Object as PropType<LayoutOptions> },
+    filter: {
+      type: Object as PropType<Filter | null>,
+      default: null,
+    },
+    search: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+  },
+  setup(props) {
+    const {
+      fieldValue,
+      field,
+      filter: originFilter,
+      collection: collectionKey,
+      search,
+      layoutOptions,
+    } = toRefs(props);
+    const pages = ref([1])
+
+    const filter = computed<LogicalFilterAND>(() => ({
+      _and: [
+        { [field.value!.field]: { _eq: fieldValue.value } },
+        originFilter.value || {},
+      ],
+    }));
+
+    const sort = computed(() => layoutOptions.value?.sort);
+
+    watch([filter, sort, search], (after, before) => {
+      if (JSON.stringify(after) != JSON.stringify(before)) {
+        pages.value = [1];
+      }
+    });
+
+    function hundleHasNextPage(page: number) {
+      pages.value = [...new Set([...pages.value, page])];
+    }
+
+    return { pages, collectionKey, hundleHasNextPage };
+  },
+});
+</script>
+
+<style scoped>
+section {
+  background-color: var(--background-subdued);
+  border-radius: var(--border-radius);
+  flex: 0 0 320px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+}
+
+header {
+  padding: 16px 16px 0 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.paginate-units {
+  padding: 16px;
+  flex-grow: 1;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.paginate-units > * {
+  flex: 0 0 auto;
+}
+
+.paginate-units > *:last-child {
+  flex-grow: 1;
+}
+
+</style>
diff --git a/src/components/paginateUnit.vue b/src/components/paginateUnit.vue
new file mode 100644
index 0000000..27d63d8
--- /dev/null
+++ b/src/components/paginateUnit.vue
@@ -0,0 +1,251 @@
+<template>
+  <draggable
+    class="paginate-unit"
+    :list="items"
+    item-key="id"
+    :data-group="fieldValue"
+    group="items"
+    @end="handleDragEnd"
+  >
+    <template #item="{ element }">
+      <section
+        class="card drag-handle"
+        :data-item-id="element.id"
+        @click="() => handleCardClick(element)"
+      >
+        <header>
+          <div class="card-icon" v-if="layoutOptions?.iconTemplate">
+            <render-template
+              class="card-icon-inner"
+              :template="layoutOptions.iconTemplate"
+              :collection="collectionKey"
+              :item="element"
+            />
+          </div>
+
+          <render-template
+            class="card-title"
+            v-if="layoutOptions?.headerTemplate"
+            :template="layoutOptions.headerTemplate"
+            :collection="collectionKey"
+            :item="element"
+          />
+          <span v-else class="card-title muted">--</span>
+        </header>
+        <main v-if="layoutOptions?.cardContentTemplate">
+          <render-template
+            :template="layoutOptions.cardContentTemplate"
+            :collection="collectionKey"
+            :item="element"
+          />
+        </main>
+      </section>
+    </template>
+    <template #footer>
+      <paginate-unit-load-observer
+        :collection="fieldValue"
+        v-model:is-in-viewport="isInViewPort"
+      />
+    </template>
+  </draggable>
+</template>
+
+<script lang="ts">
+import { useApi, useCollection, useItems } from "@directus/extensions-sdk";
+import Draggable from "vuedraggable";
+import { Field, Filter, Item, LogicalFilterAND } from "@directus/shared/types";
+import {
+  computed,
+  defineComponent,
+  PropType,
+  Ref,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+import { LayoutOptions } from "../types";
+import { useRouter } from "vue-router";
+import PaginateUnitLoadObserver from "./paginateUnitLoadObserver.vue";
+
+export default defineComponent({
+  components: { Draggable, PaginateUnitLoadObserver },
+  inheritAttrs: false,
+  props: {
+    collectionKey: { type: String, required: true },
+    field: { type: Object as PropType<Field> },
+    fieldValue: { type: String },
+    page: { type: Number, required: true },
+    layoutOptions: { type: Object as PropType<LayoutOptions> },
+    filter: {
+      type: Object as PropType<Filter | null>,
+      default: null,
+    },
+    search: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+  },
+  emits: ["hasNextPage"],
+  setup(props, { emit }) {
+    const {
+      fieldValue,
+      field,
+      filter: originFilter,
+      search,
+      layoutOptions,
+      page,
+    } = toRefs(props);
+    const isInViewPort = ref(false);
+    const collectionKey: Ref<string | null> = ref(null);
+    
+    watch(isInViewPort, () => {
+      collectionKey.value = props.collectionKey;
+    });
+
+    const collection = useCollection(collectionKey);
+
+    const filter = computed<LogicalFilterAND>(() => ({
+      _and: [
+        { [field.value!.field]: { _eq: fieldValue.value } },
+        originFilter.value || {},
+      ],
+    }));
+
+    const fields = computed<string[]>(() =>
+      collection.fields.value.map((f) => f.field)
+    );
+
+    const sort = computed(() => layoutOptions.value?.sort);
+
+    const { items, totalPages, loading, error } = useItems(collectionKey, {
+      limit: ref(25),
+      sort,
+      search,
+      page,
+      filter,
+      fields,
+    });
+
+    watch(
+      [items, page, totalPages],
+      () => {
+        if (page.value >= totalPages.value) {
+          return;
+        }
+
+        emit("hasNextPage", page.value + 1);
+      },
+      { deep: true, immediate: true }
+    );
+
+    interface EndEvent extends CustomEvent {
+      oldIndex: number;
+      newIndex: number;
+      from: HTMLElement;
+      to: HTMLElement;
+      item: HTMLElement;
+    }
+
+    const api = useApi();
+    const router = useRouter();
+
+    function handleDragEnd(event: EndEvent) {
+      const id = event.item.dataset["itemId"];
+      const newValue = event.to.dataset["group"];
+      const diff = { id, [field.value!.field]: newValue };
+      api.patch(`items/${collectionKey.value}`, [diff]);
+    }
+
+    function handleCardClick(item: Item) {
+      const { id } = item;
+      router.push(`/content/${collectionKey.value}/${encodeURIComponent(id)}`);
+    }
+
+    return {
+      items,
+      handleDragEnd,
+      handleCardClick,
+      isInViewPort,
+      page,
+    };
+  },
+});
+</script>
+
+<style scoped>
+
+.paginate-unit {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: stretch;
+}
+
+.paginate-unit > *:last-child {
+  flex-grow: 1;
+}
+
+.card {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  border-radius: 16px;
+  box-shadow: 0px 1px 4px 0px rgba(var(--card-shadow-color), 0.05);
+  background-color: var(--background-page);
+}
+
+.card > * {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.card > *:first-child {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  padding-top: 16px;
+}
+
+.card > *:last-child {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+  padding-bottom: 16px;
+}
+
+header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 16px;
+  font-weight: 700;
+}
+
+header > .card-title {
+  white-space: inherit;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+header > .card-title.muted {
+  color: var(--foreground-subdued);
+}
+
+.card-icon {
+  width: 48px;
+  height: 48px;
+  background-color: var(--background-subdued);
+  border-radius: var(--border-radius);
+  font-size: 32px;
+  flex: 0 0 48px;
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+}
+
+.card-icon > .card-icon-inner {
+  padding: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+</style>
diff --git a/src/components/paginateUnitLoadObserver.vue b/src/components/paginateUnitLoadObserver.vue
new file mode 100644
index 0000000..124d0f6
--- /dev/null
+++ b/src/components/paginateUnitLoadObserver.vue
@@ -0,0 +1,43 @@
+<template>
+  <div ref="loader"></div>
+</template>
+
+<script lang="ts">
+import { useSync } from "@directus/extensions-sdk";
+import { defineComponent, onMounted, onUnmounted, ref, toRefs } from "vue";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    isInViewport: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const isInViewport = useSync(props, "isInViewport", emit);
+    const loader = ref(document.createElement("div"));
+    const intersectionObserver = ref(
+      new IntersectionObserver(handleObserve, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0,
+      })
+    );
+
+    function handleObserve(entries: IntersectionObserverEntry[]): void {
+      isInViewport.value = entries[0].intersectionRatio > 0;
+    }
+
+    onMounted(() => {
+      intersectionObserver.value!.observe(loader.value);
+    });
+
+    onUnmounted(() => {
+      intersectionObserver.value?.disconnect();
+    });
+
+    return { loader };
+  },
+});
+</script>