diff --git a/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue b/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
index 6d45de2fd3..8866abeb83 100644
--- a/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
+++ b/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
@@ -19,7 +19,6 @@
     </FilterableTable>
     <Pagination
       ref="paginator"
-      :key="dataPagination.page"
       :class="{
         'tw-opacity-50':showPlaceholder,
         'tw-pt-3':true
@@ -27,6 +26,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
@@ -112,6 +112,7 @@ const hookData = async () => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
   await hookData();
 };
 
diff --git a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
index cc6adace3e..ce222a3a22 100644
--- a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
+++ b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
@@ -36,6 +36,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
@@ -122,6 +123,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index cf4f8d60ce..9688d3cb8f 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -18,6 +18,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
@@ -95,6 +96,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index 600fa61b88..e0d967300c 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -17,6 +17,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
@@ -97,6 +98,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index d98f2d38d3..49cf2e0232 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -36,7 +36,6 @@
     </FilterableTable>
     <Pagination
       ref="paginator"
-      :key="dataPagination.page"
       :class="{
         'tw-opacity-50':showPlaceholder,
         'tw-pt-3':true
@@ -44,6 +43,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
@@ -145,6 +145,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/system/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
index 6b7f5b050b..40a00fad6a 100644
--- a/resources/jscomposition/system/table/Pagination.vue
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -127,7 +127,7 @@
   </div>
 </template>
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { t } from "i18next";
 import { Dropdown } from "../../base/form";
 
@@ -144,6 +144,10 @@ const props = defineProps({
     type: Number,
     default: () => (0),
   },
+  perPage: {
+    type: Number,
+    default: () => (15),
+  },
   options: {
     type: Array,
     default: () => [],
@@ -159,7 +163,7 @@ const totalModelLabel = computed(() => {
   return `${t("{{count}} Items", { count: props.total })}`;
 });
 
-const pageModel = ref(props.page);
+const pageModel = ref(props.page || 1);
 const optionsPerPage = [
   {
     value: 15,
@@ -177,10 +181,12 @@ const optionsPerPage = [
 
 const optionsModel = ref(props.options.length ? props.options : optionsPerPage);
 
-const selectedOption = ref({
-  value: 15,
-  label: "15 items",
-});
+const resolveOption = (value) => {
+  const matched = optionsModel.value.find((option) => option.value === value);
+  return matched || { value, label: `${value} ${t("Per page")}` };
+};
+
+const selectedOption = ref(resolveOption(props.perPage || 15));
 
 const first = () => {
   if (pageModel.value > 1) {
@@ -226,6 +232,24 @@ const setPerPage = (value) => {
 defineExpose({
   setPerPage,
 });
+
+watch(
+  () => props.page,
+  (value) => {
+    if (value && value !== pageModel.value) {
+      pageModel.value = value;
+    }
+  }
+);
+
+watch(
+  () => props.perPage,
+  (value) => {
+    if (value && value !== selectedOption.value?.value) {
+      selectedOption.value = resolveOption(value);
+    }
+  }
+);
 </script>
 <style scoped>
 /* Chrome, Safari, Edge, Opera */