diff --git a/console/package.json b/console/package.json
index 63a6f5d79..9f511b832 100644
--- a/console/package.json
+++ b/console/package.json
@@ -67,10 +67,10 @@
     "@uppy/status-bar": "^3.1.2",
     "@uppy/vue": "^1.0.2",
     "@uppy/xhr-upload": "^3.2.0",
-    "@vueuse/components": "^9.6.0",
-    "@vueuse/core": "^9.6.0",
-    "@vueuse/router": "^9.6.0",
-    "@vueuse/shared": "^9.6.0",
+    "@vueuse/components": "^10.2.0",
+    "@vueuse/core": "^10.2.0",
+    "@vueuse/router": "^10.2.0",
+    "@vueuse/shared": "^10.2.0",
     "axios": "^0.27.2",
     "codemirror": "^6.0.1",
     "colorjs.io": "^0.4.3",
diff --git a/console/packages/components/src/components/pagination/Pagination.vue b/console/packages/components/src/components/pagination/Pagination.vue
index 5d615aa98..ce7b9c016 100644
--- a/console/packages/components/src/components/pagination/Pagination.vue
+++ b/console/packages/components/src/components/pagination/Pagination.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
+import { computed } from "vue";
 import { IconArrowLeft, IconArrowRight } from "../../icons/icons";
-import { ref, watch } from "vue";
-import { useOffsetPagination } from "@vueuse/core";
 
 const props = withDefaults(
   defineProps<{
@@ -22,71 +21,69 @@ const props = withDefaults(
   }
 );
 
-const page = ref(props.page);
-const size = ref(props.size);
-const total = ref(props.total);
-
-watch([() => props.page, () => props.size, () => props.total], () => {
-  page.value = props.page;
-  size.value = props.size;
-  total.value = props.total;
-});
-
 const emit = defineEmits<{
   (event: "update:page", page: number): void;
   (event: "update:size", size: number): void;
   (event: "change", value: { page: number; size: number }): void;
 }>();
 
-const onPageChange = ({
-  currentPage,
-  currentPageSize,
-}: {
-  currentPage: number;
-  currentPageSize: number;
-}) => {
-  emit("update:page", currentPage);
-  emit("update:size", currentPageSize);
-  emit("change", {
-    page: currentPage,
-    size: currentPageSize,
-  });
+const totalPages = computed(() => Math.ceil(props.total / props.size));
+
+const hasNext = computed(() => props.page < totalPages.value);
+
+const hasPrevious = computed(() => props.page > 1);
+
+const onPageChange = (event: Event) => {
+  const target = event.target as HTMLSelectElement;
+  const page = Number(target.value);
+  emit("update:page", page);
+  emit("change", { page, size: props.size });
 };
 
-const {
-  currentPage,
-  currentPageSize,
-  pageCount,
-  isFirstPage,
-  isLastPage,
-  prev,
-  next,
-} = useOffsetPagination({
-  total: total,
-  page: page,
-  pageSize: size,
-  onPageChange: onPageChange,
-  onPageSizeChange: onPageChange,
-});
+const onSizeChange = (event: Event) => {
+  const target = event.target as HTMLSelectElement;
+  const size = Number(target.value);
+  emit("update:size", size);
+
+  // reset page to 1
+  emit("update:page", 1);
+  emit("change", { page: 1, size });
+};
+
+const previous = () => {
+  if (hasPrevious.value) {
+    const page = props.page - 1;
+    emit("update:page", page);
+    emit("change", { page: page, size: props.size });
+  }
+};
+
+const next = () => {
+  if (hasNext.value) {
+    const page = props.page + 1;
+    emit("update:page", page);
+    emit("change", { page: page, size: props.size });
+  }
+};
 </script>
 <template>
   <div class="bg-white flex items-center justify-between">
     <div class="flex-1 flex justify-between sm:!hidden items-center">
-      <span
+      <button
         class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer"
-        @click="prev"
+        :disabled="!hasPrevious"
+        @click="previous"
       >
         <IconArrowLeft />
-      </span>
-      <span class="text-sm text-gray-500">
-        {{ currentPage }} / {{ pageCount }}
-      </span>
-      <span
+      </button>
+      <span class="text-sm text-gray-500"> {{ page }} / {{ totalPages }} </span>
+      <button
         class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer"
+        :disabled="!hasNext"
         @click="next"
       >
         <IconArrowRight />
-      </span>
+      </button>
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center items-center gap-2">
       <nav
@@ -95,14 +92,14 @@ const {
       >
         <button
           class="relative h-8 outline-none inline-flex items-center px-2 py-1.5 rounded-l-base border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer disabled:cursor-not-allowed"
-          :disabled="isFirstPage"
-          @click="prev"
+          :disabled="!hasPrevious"
+          @click="previous"
         >
           <IconArrowLeft />
         </button>
         <button
           class="relative h-8 outline-none inline-flex items-center px-2 py-1.5 rounded-r-base border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer disabled:cursor-not-allowed"
-          :disabled="isLastPage"
+          :disabled="!hasNext"
           @click="next"
         >
           <IconArrowRight />
@@ -110,21 +107,23 @@ const {
       </nav>
       <div class="inline-flex items-center gap-2">
         <select
-          v-model="currentPage"
-          :disabled="pageCount === 0"
+          :value="page"
+          :disabled="totalPages === 0"
           class="h-8 border outline-none rounded-base px-2 text-gray-800 text-sm border-gray-300"
+          @change="onPageChange"
         >
-          <option v-if="pageCount === 0" :value="0">0 / 0</option>
-          <option v-for="i in pageCount" :key="i" :value="i">
-            {{ i }} / {{ pageCount }}
+          <option v-if="totalPages === 0" :value="0">0 / 0</option>
+          <option v-for="i in totalPages" :key="i" :value="i">
+            {{ i }} / {{ totalPages }}
           </option>
         </select>
         <span class="text-sm text-gray-500">{{ pageLabel }}</span>
       </div>
       <div class="inline-flex items-center gap-2">
         <select
-          v-model="currentPageSize"
+          :value="size"
           class="h-8 border outline-none rounded-base px-2 text-gray-800 text-sm border-gray-300"
+          @change="onSizeChange"
         >
           <option
             v-for="(sizeOption, index) in sizeOptions"
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index 7d8bedc0a..cbac8808e 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -104,17 +108,17 @@ importers:
         specifier: ^3.2.0
         version: 3.2.0(@uppy/core@3.2.0)
       '@vueuse/components':
-        specifier: ^9.6.0
-        version: 9.6.0(vue@3.2.45)
+        specifier: ^10.2.0
+        version: 10.2.0(vue@3.2.45)
       '@vueuse/core':
-        specifier: ^9.6.0
-        version: 9.6.0(vue@3.2.45)
+        specifier: ^10.2.0
+        version: 10.2.0(vue@3.2.45)
       '@vueuse/router':
-        specifier: ^9.6.0
-        version: 9.6.0(vue-router@4.1.6)(vue@3.2.45)
+        specifier: ^10.2.0
+        version: 10.2.0(vue-router@4.1.6)(vue@3.2.45)
       '@vueuse/shared':
-        specifier: ^9.6.0
-        version: 9.6.0(vue@3.2.45)
+        specifier: ^10.2.0
+        version: 10.2.0(vue@3.2.45)
       axios:
         specifier: ^0.27.2
         version: 0.27.2
@@ -2781,6 +2785,11 @@ packages:
     resolution: {integrity: sha512-+lhQggrLvlQ/O5OmIYAc9gadcYXMoaDi0Doef+X/f6TLZFr9PTMjOpBWmpwNNHi026e54jckntUn6GzqDtIN4w==}
     engines: {node: '>= 16'}
 
+  /@intlify/shared@9.3.0-beta.24:
+    resolution: {integrity: sha512-AKxJ8s7eKIQWkNaf4wyyoLRwf4puCuQgjSChlDJm5JBEt6T8HGgnYTJLRXu6LD/JACn3Qwu6hM/XRX1c9yvjmQ==}
+    engines: {node: '>= 16'}
+    dev: true
+
   /@intlify/unplugin-vue-i18n@0.9.3(rollup@2.79.1)(vue-i18n@9.3.0-beta.19):
     resolution: {integrity: sha512-23DMh2r0qA7UZfaQhF09ZHhifgTyKcbmVsCo+qHvu9q1EU8OF18VlhxMHMksDR5NBDvRXj3Lmu8lT84XDrUlSw==}
     engines: {node: '>= 14.16'}
@@ -2797,7 +2806,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': 5.5.0(vue-i18n@9.3.0-beta.19)
-      '@intlify/shared': 9.3.0-beta.19
+      '@intlify/shared': 9.3.0-beta.24
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
       '@vue/compiler-sfc': 3.2.47
       debug: 4.3.4(supports-color@8.1.1)
@@ -3998,8 +4007,8 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: false
 
-  /@types/web-bluetooth@0.0.16:
-    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+  /@types/web-bluetooth@0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: false
 
   /@types/yauzl@2.10.0:
@@ -4616,50 +4625,50 @@ packages:
       - typescript
     dev: true
 
-  /@vueuse/components@9.6.0(vue@3.2.45):
-    resolution: {integrity: sha512-Jqv1g68PtBC8Nnp8u2rpf6qku8cslr381fvlY1uUZa75zI2imxPLglhOWA/dBtMjla4L3nmaf9S7PAzXJnwH9w==}
+  /@vueuse/components@10.2.0(vue@3.2.45):
+    resolution: {integrity: sha512-fpGtxx8G3BCJUoTd6d4xI7qELvm4nwVKLZYgIVdv7weqprKWwK5IO+t3LULovPuS7W2guVZgpyMy9NkD4qa2Bw==}
     dependencies:
-      '@vueuse/core': 9.6.0(vue@3.2.45)
-      '@vueuse/shared': 9.6.0(vue@3.2.45)
-      vue-demi: 0.13.11(vue@3.2.45)
+      '@vueuse/core': 10.2.0(vue@3.2.45)
+      '@vueuse/shared': 10.2.0(vue@3.2.45)
+      vue-demi: 0.14.5(vue@3.2.45)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/core@9.6.0(vue@3.2.45):
-    resolution: {integrity: sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==}
+  /@vueuse/core@10.2.0(vue@3.2.45):
+    resolution: {integrity: sha512-aHBnoCteIS3hFu7ZZkVB93SanVDY6t4TIb7XDLxJT/HQdAZz+2RdIEJ8rj5LUoEJr7Damb5+sJmtpCwGez5ozQ==}
     dependencies:
-      '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 9.6.0
-      '@vueuse/shared': 9.6.0(vue@3.2.45)
-      vue-demi: 0.13.11(vue@3.2.45)
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.2.0
+      '@vueuse/shared': 10.2.0(vue@3.2.45)
+      vue-demi: 0.14.5(vue@3.2.45)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/metadata@9.6.0:
-    resolution: {integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==}
+  /@vueuse/metadata@10.2.0:
+    resolution: {integrity: sha512-IR7Mkq6QSgZ38q/2ZzOt+Zz1OpcEsnwE64WBumDQ+RGKrosFCtUA2zgRrOqDEzPBXrVB+4HhFkwDjQMu0fDBKw==}
     dev: false
 
-  /@vueuse/router@9.6.0(vue-router@4.1.6)(vue@3.2.45):
-    resolution: {integrity: sha512-3TIZPX5smlimSNlTm+K3ESRTkA2VBHnwMintNrw4Z+WK5bh1UAh7lcBQluiGg3LJjkrMXYfuO7IPdU+a8NRnFA==}
+  /@vueuse/router@10.2.0(vue-router@4.1.6)(vue@3.2.45):
+    resolution: {integrity: sha512-vks2xHCZWeKaFWfgfmrzi6kJ0cTHvRCHzPUzmjvfbmzDrB2YOS1ymCPjfu1LH3E82H+RyebaSRhTeoDc3AsEFw==}
     peerDependencies:
       vue-router: '>=4.0.0-rc.1'
     dependencies:
-      '@vueuse/shared': 9.6.0(vue@3.2.45)
-      vue-demi: 0.13.11(vue@3.2.45)
+      '@vueuse/shared': 10.2.0(vue@3.2.45)
+      vue-demi: 0.14.5(vue@3.2.45)
       vue-router: 4.1.6(vue@3.2.45)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@9.6.0(vue@3.2.45):
-    resolution: {integrity: sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==}
+  /@vueuse/shared@10.2.0(vue@3.2.45):
+    resolution: {integrity: sha512-dIeA8+g9Av3H5iF4NXR/sft4V6vys76CpZ6hxwj8eMXybXk2WRl3scSsOVi+kQ9SX38COR7AH7WwY83UcuxbSg==}
     dependencies:
-      vue-demi: 0.13.11(vue@3.2.45)
+      vue-demi: 0.14.5(vue@3.2.45)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -11288,6 +11297,21 @@ packages:
       vue: 3.2.45
     dev: false
 
+  /vue-demi@0.14.5(vue@3.2.45):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.45
+    dev: false
+
   /vue-eslint-parser@9.3.0(eslint@8.43.0):
     resolution: {integrity: sha512-48IxT9d0+wArT1+3wNIy0tascRoywqSUe2E1YalIC1L8jsUGe5aJQItWfRok7DVFGz3UYvzEI7n5wiTXsCMAcQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
index fa2dfcdc3..697e9f1e5 100644
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@@ -34,6 +34,7 @@ import { usePermission } from "@/utils/permission";
 import { postLabels } from "@/constants/labels";
 import { useMutation, useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
+import { useRouteQuery } from "@vueuse/router";
 import UserFilterDropdown from "@/components/filter/UserFilterDropdown.vue";
 import CategoryFilterDropdown from "@/components/filter/CategoryFilterDropdown.vue";
 import TagFilterDropdown from "@/components/filter/TagFilterDropdown.vue";
@@ -47,13 +48,24 @@ const checkedAll = ref(false);
 const selectedPostNames = ref<string[]>([]);
 
 // Filters
-const selectedVisible = ref();
-const selectedPublishStatus = ref();
-const selectedSort = ref();
-const selectedCategory = ref();
-const selectedTag = ref();
-const selectedContributor = ref();
-const keyword = ref("");
+const page = useRouteQuery<number>("page", 1, {
+  transform: Number,
+});
+const size = useRouteQuery<number>("size", 20, {
+  transform: Number,
+});
+const selectedVisible = useRouteQuery<
+  "PUBLIC" | "INTERNAL" | "PRIVATE" | undefined
+>("visible");
+const selectedPublishStatus = useRouteQuery<string | undefined>("status");
+const selectedSort = useRouteQuery<string | undefined>("sort");
+const selectedCategory = useRouteQuery<string | undefined>("category");
+const selectedTag = useRouteQuery<string | undefined>("tag");
+const selectedContributor = useRouteQuery<string | undefined>("contributor");
+const keyword = useRouteQuery<string>("keyword", "");
+const total = ref(0);
+const hasPrevious = ref(false);
+const hasNext = ref(false);
 
 watch(
   () => [
@@ -90,12 +102,6 @@ const hasFilters = computed(() => {
   );
 });
 
-const page = ref(1);
-const size = ref(20);
-const total = ref(0);
-const hasPrevious = ref(false);
-const hasNext = ref(false);
-
 const {
   data: posts,
   isLoading,
@@ -143,7 +149,7 @@ const {
       page: page.value,
       size: size.value,
       visible: selectedVisible.value,
-      sort: [selectedSort.value?.sort].filter(Boolean) as string[],
+      sort: [selectedSort.value].filter(Boolean) as string[],
       keyword: keyword.value,
       category: categories,
       tag: tags,