diff --git a/passbook/admin/templates/administration/application/list.html b/passbook/admin/templates/administration/application/list.html
index dca760042..3ee400409 100644
--- a/passbook/admin/templates/administration/application/list.html
+++ b/passbook/admin/templates/administration/application/list.html
@@ -62,7 +62,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/certificatekeypair/list.html b/passbook/admin/templates/administration/certificatekeypair/list.html
index d009495dc..782ecbc95 100644
--- a/passbook/admin/templates/administration/certificatekeypair/list.html
+++ b/passbook/admin/templates/administration/certificatekeypair/list.html
@@ -64,7 +64,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/flow/list.html b/passbook/admin/templates/administration/flow/list.html
index 9d8891a1d..1f6ca4ae4 100644
--- a/passbook/admin/templates/administration/flow/list.html
+++ b/passbook/admin/templates/administration/flow/list.html
@@ -69,7 +69,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/group/list.html b/passbook/admin/templates/administration/group/list.html
index 44a498c74..69c046863 100644
--- a/passbook/admin/templates/administration/group/list.html
+++ b/passbook/admin/templates/administration/group/list.html
@@ -61,7 +61,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/outpost/list.html b/passbook/admin/templates/administration/outpost/list.html
index 35034c710..4392687db 100644
--- a/passbook/admin/templates/administration/outpost/list.html
+++ b/passbook/admin/templates/administration/outpost/list.html
@@ -83,7 +83,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/policy/list.html b/passbook/admin/templates/administration/policy/list.html
index 98fc3f4cf..552c1a543 100644
--- a/passbook/admin/templates/administration/policy/list.html
+++ b/passbook/admin/templates/administration/policy/list.html
@@ -78,7 +78,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/policy_binding/list.html b/passbook/admin/templates/administration/policy_binding/list.html
index 6b133599a..0e852e6bf 100644
--- a/passbook/admin/templates/administration/policy_binding/list.html
+++ b/passbook/admin/templates/administration/policy_binding/list.html
@@ -75,7 +75,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/property_mapping/list.html b/passbook/admin/templates/administration/property_mapping/list.html
index 0e3ea5314..2684d813d 100644
--- a/passbook/admin/templates/administration/property_mapping/list.html
+++ b/passbook/admin/templates/administration/property_mapping/list.html
@@ -72,7 +72,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/provider/list.html b/passbook/admin/templates/administration/provider/list.html
index 95cc490e4..9bb347b69 100644
--- a/passbook/admin/templates/administration/provider/list.html
+++ b/passbook/admin/templates/administration/provider/list.html
@@ -91,7 +91,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/source/list.html b/passbook/admin/templates/administration/source/list.html
index 7ce88965a..c88e29d31 100644
--- a/passbook/admin/templates/administration/source/list.html
+++ b/passbook/admin/templates/administration/source/list.html
@@ -85,7 +85,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/stage/list.html b/passbook/admin/templates/administration/stage/list.html
index 8f92ebdcc..a5420899a 100644
--- a/passbook/admin/templates/administration/stage/list.html
+++ b/passbook/admin/templates/administration/stage/list.html
@@ -81,7 +81,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/stage_binding/list.html b/passbook/admin/templates/administration/stage_binding/list.html
index da1e0db3d..2f2c058e0 100644
--- a/passbook/admin/templates/administration/stage_binding/list.html
+++ b/passbook/admin/templates/administration/stage_binding/list.html
@@ -81,7 +81,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/stage_invitation/list.html b/passbook/admin/templates/administration/stage_invitation/list.html
index e341cae82..fc5bb541d 100644
--- a/passbook/admin/templates/administration/stage_invitation/list.html
+++ b/passbook/admin/templates/administration/stage_invitation/list.html
@@ -54,7 +54,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/stage_prompt/list.html b/passbook/admin/templates/administration/stage_prompt/list.html
index 7b9503944..8855b4ee3 100644
--- a/passbook/admin/templates/administration/stage_prompt/list.html
+++ b/passbook/admin/templates/administration/stage_prompt/list.html
@@ -80,7 +80,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/token/list.html b/passbook/admin/templates/administration/token/list.html
index c73489774..52eaf9687 100644
--- a/passbook/admin/templates/administration/token/list.html
+++ b/passbook/admin/templates/administration/token/list.html
@@ -65,7 +65,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/admin/templates/administration/user/list.html b/passbook/admin/templates/administration/user/list.html
index 78a6e9dc0..aa9f81678 100644
--- a/passbook/admin/templates/administration/user/list.html
+++ b/passbook/admin/templates/administration/user/list.html
@@ -61,7 +61,7 @@
                 {% endfor %}
             </tbody>
         </table>
-        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+        <div class="pf-c-pagination pf-m-bottom">
             {% include 'partials/pagination.html' %}
         </div>
         {% else %}
diff --git a/passbook/audit/templates/audit/list.html b/passbook/audit/templates/audit/list.html
index b42c93cd3..214ab744e 100644
--- a/passbook/audit/templates/audit/list.html
+++ b/passbook/audit/templates/audit/list.html
@@ -77,7 +77,7 @@
                     {% endfor %}
                 </tbody>
             </table>
-            <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
+            <div class="pf-c-pagination pf-m-bottom">
                 {% include 'partials/pagination.html' %}
             </div>
         </div>
diff --git a/passbook/core/templates/partials/pagination.html b/passbook/core/templates/partials/pagination.html
index c026e558c..fa4568f7f 100644
--- a/passbook/core/templates/partials/pagination.html
+++ b/passbook/core/templates/partials/pagination.html
@@ -1,43 +1,42 @@
 {% load i18n %}
+{% load passbook_utils %}
 
-<div class="pf-c-toolbar__item pf-m-pagination">
-    <div class="pf-c-pagination">
-        <div class="pf-c-pagination__total-items">
-            <b>{{ page_obj.start_index }} - {{ page_obj.end_index }}</b>of
-            <b>{{ page_obj.count }}</b>
-        </div>
-        {% with param=get_param|default:'page' %}
-        <nav class="pf-c-pagination__nav" aria-label="Pagination">
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to first page" href="?{{ param }}=1">
-                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-            </a>
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to previous page"
-                {% if page_obj.has_previous %}
-                href="?{{ param }}={{ page_obj.previous_page_number }}"
-                {% else %}
-                disabled
-                {% endif %}>
-                <i class="fas fa-angle-left" aria-hidden="true"></i>
-            </a>
-            <div class="pf-c-pagination__nav-page-select">
-                <span>
-                    {% blocktrans with current=page_obj.number total=page_obj.paginator.num_pages %}
-                    {{ current }} of {{ total }}
-                    {% endblocktrans %}
-                </span>
+<div class="pf-c-toolbar__item pf-m-pagination ">
+    <div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
+        <div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
+            <div class="pf-c-options-menu">
+                <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+                    <span class="pf-c-options-menu__toggle-text">
+                        {% blocktrans with start_index=page_obj.start_index end_index=page_obj.end_index total_items=paginator.count %}
+                            {{ start_index }} - {{ end_index }} of {{ total_items }}
+                        {% endblocktrans %}
+                    </span>
+                </div>
             </div>
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page"
-                {% if page_obj.has_next %}
-                href="?{{ param }}={{ page_obj.next_page_number }}"
-                {% else %}
-                disabled
-                {% endif %}>
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-            </a>
-            <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page" href="?{{ param }}={{ page_obj.num_pages }}">
-                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-            </a>
-        </nav>
-        {% endwith %}
+            <nav class="pf-c-pagination__nav" aria-label="Pagination">
+                <div class="pf-c-pagination__nav-control pf-m-prev">
+                    <a class="pf-c-button pf-m-plain"
+                        {% if page_obj.has_previous %}
+                        href="?{% query_transform page=page_obj.previous_page_number %}"
+                        {% else %}
+                        disabled
+                        {% endif %}
+                        aria-label="{% trans 'Go to previous page' %}">
+                        <i class="fas fa-angle-left" aria-hidden="true"></i>
+                    </a>
+                </div>
+                <div class="pf-c-pagination__nav-control pf-m-next">
+                    <a class="pf-c-button pf-m-plain"
+                        {% if page_obj.has_next %}
+                        href="?{% query_transform page=page_obj.next_page_number %}"
+                        {% else %}
+                        disabled
+                        {% endif %}
+                        aria-label="{% trans 'Go to next page' %}">
+                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                    </a>
+                </div>
+            </nav>
+        </div>
     </div>
 </div>
diff --git a/passbook/lib/templatetags/passbook_utils.py b/passbook/lib/templatetags/passbook_utils.py
index 7a59262cf..3cda3388a 100644
--- a/passbook/lib/templatetags/passbook_utils.py
+++ b/passbook/lib/templatetags/passbook_utils.py
@@ -4,6 +4,7 @@ from urllib.parse import urlencode
 
 from django import template
 from django.db.models import Model
+from django.http.request import HttpRequest
 from django.template import Context
 from django.utils.html import escape, mark_safe
 from structlog import get_logger
@@ -115,3 +116,15 @@ def debug(obj) -> str:
 def doc(obj) -> str:
     """Return docstring of object"""
     return mark_safe(obj.__doc__.replace("\n", "<br>"))
+
+
+@register.simple_tag(takes_context=True)
+def query_transform(context: Context, **kwargs) -> str:
+    """Append objects to the current querystring"""
+    if "request" not in context:
+        return ""
+    request: HttpRequest = context["request"]
+    updated = request.GET.copy()
+    for key, value in kwargs.items():
+        updated[key] = value
+    return updated.urlencode()