diff --git a/resources/views/listing/partials/pagination.blade.php b/resources/views/listing/partials/pagination.blade.php
index 3d31af5b7..5ec782e01 100644
--- a/resources/views/listing/partials/pagination.blade.php
+++ b/resources/views/listing/partials/pagination.blade.php
@@ -2,55 +2,55 @@
     <template v-slot="{ currentRefinement, nbPages, pages, isFirstPage, isLastPage, refine, createURL }">
         <ul v-show="nbPages > 1" class="flex flex-wrap w-full pb-0.5 mt-5 gap-1 sm:gap-2 justify-center" data-testid="pagination">
             <li v-if="!isFirstPage">
-                <button
-                    href="createURL(currentRefinement - 1)"
+                <a
+                    v-bind:href="createURL(currentRefinement - 1)"
                     v-on:click.exact.left.prevent="refine(currentRefinement - 1)"
                     aria-label="@lang('Previous Page')"
                     class="flex justify-center items-center rounded-sm border hover:border-emphasis max-sm:size-9 sm:pl-2 sm:pr-3 sm:h-full"
                 >
                     <x-heroicon-o-chevron-left class="shrink-0 stroke-2 size-4" />
                     <span class="max-sm:hidden">@lang('Prev')</span>
-                </button>
+                </a>
             </li>
             <li v-if="!isFirstPage && currentRefinement !== 1 && nbPages !== 3">
-                <button
-                    href="createURL(0)"
+                <a
+                    v-bind:href="createURL(0)"
                     v-on:click.exact.left.prevent="refine(0)"
                     aria-label="@lang('First Page')"
                     class="flex justify-center items-center size-9 rounded-sm border hover:border-emphasis sm:size-10"
                 >
                     1
-                </button>
+                </a>
             </li>
             <li v-if="!isFirstPage && currentRefinement !== 1 && currentRefinement !== 2" class="flex items-center text-muted max-sm:text-xs">
                 ...
             </li>
             <li v-for="page in pages" :key="page">
-                <button
+                <a
                     v-bind:href="createURL(page)"
                     v-bind:class="{ 'ring-1 bg-primary/10 ring-primary border-primary font-semibold hover:border-primary': page === currentRefinement }"
                     v-on:click.exact.left.prevent="refine(page)"
                     v-bind:aria-label="`{{ __('Page') }} ${page + 1}`"
-                    class="size-9 sm:size-10 rounded-sm border hover:border-emphasis"
+                    class="flex items-center justify-center size-9 sm:size-10 rounded-sm border hover:border-emphasis"
                 >
                     @{{ page + 1 }}
-                </button>
+                </a>
             </li>
             <li v-if="!isLastPage && currentRefinement !== nbPages - 2 && currentRefinement !== nbPages - 3" class="flex items-center text-muted max-sm:text-xs">
                 ...
             </li>
             <li v-if="!isLastPage && currentRefinement !== nbPages - 2 && nbPages !== 3">
-                <button
-                    v-bind:href="createURL(nbPages)"
-                    v-on:click.exact.left.prevent="refine(nbPages)"
+                <a
+                    v-bind:href="createURL(nbPages - 1)"
+                    v-on:click.exact.left.prevent="refine(nbPages - 1)"
                     aria-label="@lang('Last Page')"
                     class="flex justify-center items-center size-9 sm:size-10 rounded-sm border hover:border-emphasis"
                 >
                     @{{ nbPages }}
-                </button>
+                </a>
             </li>
             <li v-if="!isLastPage">
-                <button
+                <a
                     v-bind:href="createURL(currentRefinement + 1)"
                     v-on:click.exact.left.prevent="refine(currentRefinement + 1)"
                     aria-label="@lang('Next Page')"
@@ -58,7 +58,7 @@ class="flex justify-center items-center rounded-sm border hover:border-emphasis
                 >
                     <span class="max-sm:hidden">@lang('Next')</span>
                     <x-heroicon-o-chevron-right class="shrink-0 stroke-2 size-4 mt-0.5" />
-                </button>
+                </a>
             </li>
         </ul>
     </template>
diff --git a/tests/playwright/category.spec.js b/tests/playwright/category.spec.js
index fdb6ca261..a87eb193b 100644
--- a/tests/playwright/category.spec.js
+++ b/tests/playwright/category.spec.js
@@ -15,7 +15,7 @@ test('category pagination', BasePage.tags, async ({ page }) => {
     await page.goto(process.env.CATEGORY_URL_SIMPLE)
     await expect(page.getByTestId('listing-item')).toHaveCount(12)
     const firstProductPage1 = await page.getByTestId('listing-item').first().textContent()
-    await page.getByTestId('pagination').getByRole('button', { name: '2' }).click()
+    await page.getByTestId('pagination').getByRole('link', { name: '2' }).click()
     await page.waitForLoadState('networkidle')
     const firstProductPage2 = await page.getByTestId('listing-item').first().textContent()
     expect(firstProductPage1).not.toBe(firstProductPage2)