diff --git a/project/main/templates/main/components/pagination.html b/project/main/templates/main/components/pagination.html
new file mode 100644
index 0000000..35a1178
--- /dev/null
+++ b/project/main/templates/main/components/pagination.html
@@ -0,0 +1,53 @@
+{% macro pagination(page) %}
+    {% macro render_link(title, page_number) %}
+        <a
+            class="page-link"
+            href="#"
+            hx-get="{{ url("filter-list-filter") }}"
+            hx-trigger="click"
+            hx-target="#filter-list-container"
+            hx-include="[name='zip'],[name='area'],[name='county']"
+            hx-vals='{"page": "{{ page_number }}"}'
+        >
+            {{ title }}
+        </a>
+    {% endmacro %}
+
+    {% if page.has_other_pages() %}
+        <nav aria-label="Page navigation example">
+            <ul class="pagination">
+                {% if page.has_previous() %}
+                    <li class="page-item">
+                        {{ render_link(title="Previous", page_number=page.number - 1) }}
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#">Previous</a>
+                    </li>
+                {% endif %}
+
+                {% for p in page.paginator.get_elided_page_range(page.number, on_each_side=2, on_ends=3) %}
+                    {% if p != page.paginator.ELLIPSIS %}
+                        <li class="page-item {% if page.number == p %}active{% endif %}">
+                            {{ render_link(title=p, page_number=p) }}
+                        </li>
+                    {% else %}
+                        <li class="page-item">
+                            <span class="page-link border-top-0 border-bottom-0">{{ page.paginator.ELLIPSIS }}</span>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+
+                {% if page.has_next() %}
+                    <li class="page-item">
+                        {{ render_link(title="Next", page_number=page.number + 1) }}
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#">Next</a>
+                    </li>
+                {% endif %}
+            </ul>
+        </nav>
+    {% endif %}
+{% endmacro %}
diff --git a/project/main/templates/main/filter_list_content.html b/project/main/templates/main/filter_list_content.html
index 558657f..902a890 100644
--- a/project/main/templates/main/filter_list_content.html
+++ b/project/main/templates/main/filter_list_content.html
@@ -1,3 +1,5 @@
+{% from "main/components/pagination.html" import pagination %}
+
 <table class="table">
     <thead>
     <tr>
@@ -8,7 +10,7 @@
     </tr>
     </thead>
     <tbody>
-    {% for area in areas %}
+    {% for area in page.object_list %}
         <tr>
             <td>{{ area.post_office.zip }}</td>
             <td>{{ area.post_office.name }}</td>
@@ -20,34 +22,4 @@
 </table>
 
 
-{% if pagination.page_count > 1 %}
-    <nav aria-label="Page navigation example">
-        <ul class="pagination">
-            {% if pagination.prev_page != None %}
-                <li class="page-item">
-                    <a class="page-link" href="#">Previous</a>
-                </li>
-            {% else %}
-                <li class="page-item disabled">
-                    <a class="page-link" href="#">Previous</a>
-                </li>
-            {% endif %}
-        
-            {% for p in range(1, pagination.page_count) %}
-                <li class="page-item {% if pagination.page == p %}active{% endif %}">
-                    <a class="page-link" href="#">{{ p }}</a>
-                </li>
-            {% endfor %}
-
-            {% if pagination.prev_page != None %}
-                <li class="page-item">
-                    <a class="page-link" href="#">Next</a>
-                </li>
-            {% else %}
-                <li class="page-item disabled">
-                    <a class="page-link" href="#">Next</a>
-                </li>
-            {% endif %}
-        </ul>
-    </nav>
-{% endif %}
\ No newline at end of file
+{{ pagination(page) }}
diff --git a/project/main/views/filter_list.py b/project/main/views/filter_list.py
index 9bffa95..42c79c8 100644
--- a/project/main/views/filter_list.py
+++ b/project/main/views/filter_list.py
@@ -1,7 +1,7 @@
-from dataclasses import dataclass
-from typing import Any, Tuple
+from typing import Any
 
-from django.db.models import Model, Q, QuerySet
+from django.core.paginator import Page, Paginator
+from django.db.models import Q, QuerySet
 
 from project.main.models import Area, County
 from project.main.views.demo_view_base import DemoViewBase
@@ -13,34 +13,16 @@ def get_all_counties() -> QuerySet[County]:
     return County.objects.all()
 
 
-@dataclass
-class Pagination:
-    page: int
-    page_size: int
-    page_count: int
-    prev_page: int
-    next_page: int
-
-
 class FilterListViewBase(DemoViewBase):
-    def paginate(self, qs: QuerySet[Area]) -> Tuple[QuerySet[Area], Pagination]:
+    def paginate(self, qs: QuerySet[Area]) -> Page:
         page = int(self.request.GET.get("page", 1))
         page_size = int(self.request.GET.get("page_size", PAGE_SIZE))
 
-        start_offs = (page - 1) * page_size
-        end_offs = start_offs + page_size
-
-        page_count = int(qs.count() / page_size)
-
-        pagination = Pagination(
-            page=page,
-            page_size=page_size,
-            page_count=page_count,
-            prev_page=page - 1 if page > 1 else None,
-            next_page=page + 1 if page < page_count else None,
+        paginator = Paginator(
+            object_list=qs,
+            per_page=page_size,
         )
-
-        return qs[start_offs:end_offs], pagination
+        return paginator.get_page(page)
 
 
 class FilterListView(FilterListViewBase):
@@ -51,14 +33,13 @@ class FilterListView(FilterListViewBase):
     def get_context_data(self, **kwargs) -> dict[str, Any]:
         context_data = super().get_context_data(**kwargs)
 
-        qs, pagination = self.paginate(
+        page = self.paginate(
             qs=Area.objects.select_related("county", "post_office").all(),
         )
         context_data.update(
             {
-                "areas": qs,
+                "page": page,
                 "counties": get_all_counties(),
-                "pagination": pagination,
             }
         )
         return context_data
@@ -82,15 +63,14 @@ class FilterListFilterView(FilterListViewBase):
         if county:
             q &= Q(county_id=county)
 
-        qs, pagination = self.paginate(
+        page = self.paginate(
             qs=Area.objects.select_related("county", "post_office").filter(q),
         )
 
         context_data.update(
             {
-                "areas": qs,
+                "page": page,
                 "counties": get_all_counties(),
-                "pagination": pagination,
             }
         )
         return context_data