diff --git a/app/templates/admin/customers.html b/app/templates/admin/customers.html
index fb2d5bbc..55da8ff0 100644
--- a/app/templates/admin/customers.html
+++ b/app/templates/admin/customers.html
@@ -3,6 +3,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/pagination.html' import pagination_full %}
 
 {% block title %}Customers{% endblock %}
 
@@ -235,55 +236,7 @@
     </div>
 
     <!-- Numbered Pagination -->
-    <div x-show="total > limit" class="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t dark:border-gray-700">
-        <span class="text-sm text-gray-600 dark:text-gray-400">
-            Showing <span x-text="skip + 1"></span>-<span x-text="Math.min(skip + limit, total)"></span> of <span x-text="total"></span> customers
-        </span>
-        <div class="flex items-center gap-1">
-            <button
-                @click="page = 1; loadCustomers()"
-                :disabled="page <= 1"
-                class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                title="First page"
-            >
-                <span x-html="$icon('chevron-double-left', 'w-4 h-4')"></span>
-            </button>
-            <button
-                @click="page--; loadCustomers()"
-                :disabled="page <= 1"
-                class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                title="Previous page"
-            >
-                <span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
-            </button>
-            <template x-for="p in getPageNumbers()" :key="p">
-                <button
-                    @click="goToPage(p)"
-                    class="px-3 py-1 text-sm font-medium rounded-md border transition-colors"
-                    :class="p === page
-                        ? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
-                        : 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
-                    x-text="p"
-                ></button>
-            </template>
-            <button
-                @click="page++; loadCustomers()"
-                :disabled="page >= totalPages"
-                class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                title="Next page"
-            >
-                <span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
-            </button>
-            <button
-                @click="page = totalPages; loadCustomers()"
-                :disabled="page >= totalPages"
-                class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                title="Last page"
-            >
-                <span x-html="$icon('chevron-double-right', 'w-4 h-4')"></span>
-            </button>
-        </div>
-    </div>
+    {{ pagination_full(load_fn="loadCustomers()", item_label="customers") }}
 </div>
 {% endblock %}
 
diff --git a/app/templates/shared/macros/pagination.html b/app/templates/shared/macros/pagination.html
index 2a44ae4d..4b415ca7 100644
--- a/app/templates/shared/macros/pagination.html
+++ b/app/templates/shared/macros/pagination.html
@@ -93,6 +93,86 @@
     {{ pagination_simple() }}
 #}
 
+{#
+  Pagination Full Macro (First/Prev/Numbers/Next/Last)
+  =====================================================
+  A full pagination component with first, previous, page numbers, next, and last buttons.
+
+  Usage:
+    {% from 'shared/macros/pagination.html' import pagination_full %}
+    {{ pagination_full() }}
+
+  Required Alpine.js data properties:
+    - page: Current page number
+    - total: Total number of items
+    - limit: Items per page
+    - skip: Current skip value (page - 1) * limit
+    - totalPages: Computed total pages (Math.ceil(total / limit))
+
+  Required Alpine.js methods:
+    - getPageNumbers(): Returns array of page numbers to display
+    - goToPage(pageNum): Go to specific page
+    - loadData(): Function to reload data (called internally as loadFn parameter)
+#}
+
+{% macro pagination_full(show_condition="total > limit", load_fn="loadData()", item_label="items") %}
+<div x-show="{{ show_condition }}" class="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t dark:border-gray-700">
+    <span class="text-sm text-gray-600 dark:text-gray-400">
+        Showing <span x-text="skip + 1"></span>-<span x-text="Math.min(skip + limit, total)"></span> of <span x-text="total"></span> {{ item_label }}
+    </span>
+    <div class="flex items-center gap-1">
+        {# First Page #}
+        <button
+            @click="page = 1; {{ load_fn }}"
+            :disabled="page <= 1"
+            class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="First page"
+        >
+            <span x-html="$icon('chevron-double-left', 'w-4 h-4')"></span>
+        </button>
+        {# Previous Page #}
+        <button
+            @click="page--; {{ load_fn }}"
+            :disabled="page <= 1"
+            class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Previous page"
+        >
+            <span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
+        </button>
+        {# Page Numbers #}
+        <template x-for="p in getPageNumbers()" :key="p">
+            <button
+                @click="goToPage(p)"
+                class="px-3 py-1 text-sm font-medium rounded-md border transition-colors"
+                :class="p === page
+                    ? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
+                    : 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
+                x-text="p"
+            ></button>
+        </template>
+        {# Next Page #}
+        <button
+            @click="page++; {{ load_fn }}"
+            :disabled="page >= totalPages"
+            class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Next page"
+        >
+            <span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
+        </button>
+        {# Last Page #}
+        <button
+            @click="page = totalPages; {{ load_fn }}"
+            :disabled="page >= totalPages"
+            class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Last page"
+        >
+            <span x-html="$icon('chevron-double-right', 'w-4 h-4')"></span>
+        </button>
+    </div>
+</div>
+{% endmacro %}
+
+
 {% macro pagination_simple(show_condition="true") %}
 <div x-show="{{ show_condition }}" class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800">
     <div class="flex items-center">