diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index 90665f1..9283789 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -11,6 +11,7 @@ type Props = {
         type: string;
         value: number;
     }[];
+    perPage: number;
 };
 
 // props
@@ -21,6 +22,9 @@ defineProps<Props>();
 
 const params: any = inject("params");
 
+const router = useRouter();
+const route = useRoute();
+
 const { isMobile } = useRatio();
 
 const { y } = useWindowScroll({ behavior: "smooth" });
@@ -28,9 +32,12 @@ const { y } = useWindowScroll({ behavior: "smooth" });
 // computed
 
 const page = computed({
-    get: () => (params?.page ? Number(params.page) : 1),
+    get: () => (route.query["page"] ? Number(route.query["page"]) : 1),
     set: (value: number) => {
         params.page = value;
+        router.push({
+            query: { ...route.query, page: value },
+        });
         y.value = 0;
     },
 });
@@ -40,24 +47,30 @@ const page = computed({
     <PaginationRoot
         :total="total"
         :sibling-count="isMobile ? 0 : 1"
-        :items-per-page="15"
+        :items-per-page="perPage"
+        show-edges
         v-model:page="page"
+        class="max-w-full"
     >
         <PaginationList
             v-slot="{ items }"
             class="flex items-center gap-2"
         >
             <PaginationFirst
-                class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                برو اول
+                <Icon
+                    name="bi:chevron-double-right"
+                    class="**:fill-back"
+                    size="18px"
+                />
             </PaginationFirst>
 
             <PaginationPrev
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
-                    name="ci:chevron-right"
+                    name="bi:chevron-right"
                     class="**:fill-back"
                     size="18px"
                 />
@@ -67,7 +80,7 @@ const page = computed({
                 <PaginationListItem
                     v-if="page.type === 'page'"
                     :key="index"
-                    class="w-9 h-9 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
+                    class="w-9 h-9 shrink-0 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
                     :value="page.value"
                 >
                     {{ page.value }}
@@ -83,19 +96,23 @@ const page = computed({
             </template>
 
             <PaginationNext
-                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
-                    name="ci:chevron-left"
+                    name="bi:chevron-left"
                     class="**:fill-back"
                     size="18px"
                 />
             </PaginationNext>
 
             <PaginationLast
-                class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                برو آخر
+                <Icon
+                    name="bi:chevron-double-left"
+                    class="**:fill-back"
+                    size="18px"
+                />
             </PaginationLast>
         </PaginationList>
     </PaginationRoot>