diff --git a/styles/components/_audit_log.scss b/styles/components/_audit_log.scss
index 2cea4260..624714a1 100644
--- a/styles/components/_audit_log.scss
+++ b/styles/components/_audit_log.scss
@@ -22,13 +22,14 @@
 }
 
 .pagination {
-  width: 800px;
+  width: 80%;
   display: flex;
   flex-direction: row;
-  align-content: space-between;
   margin: auto;
 }
 
 .page {
   margin: auto;
+  flex-grow: 1;
+  max-width: 8%;
 }
diff --git a/templates/components/pagination.html b/templates/components/pagination.html
index 9f45c44e..ebca6b3a 100644
--- a/templates/components/pagination.html
+++ b/templates/components/pagination.html
@@ -1,11 +1,17 @@
-{% macro Page(pagination, route, i, label=None) -%}
+{% macro Page(pagination, route, i, label=None, disabled=False) -%}
   {% set label = label or i %}
 
-  {% if i == pagination.page %}
-    <button class="usa-button usa-button-primary">{{ label }}</button>
+  {% set button_class = "page usa-button " %}
+
+  {% if disabled %}
+    {% set button_class = button_class + "usa-button-disabled" %}
+  {% elif i == pagination.page %}
+    {% set button_class = button_class + "usa-button-primary" %}
   {% else %}
-    <a class="usa-button usa-button-secondary page" href="{{ url_for(route, page=i, perPage=pagination.per_page) }}">{{ label }}</a>
-  {% endif%}
+    {% set button_class = button_class + "usa-button-secondary" %}
+  {% endif %}
+
+    <a class="{{ button_class }}" href="{{ url_for(route, page=i, perPage=pagination.per_page) }}">{{ label }}</a>
 {%- endmacro %}
 
 {% macro Pagination(pagination, route) -%}
@@ -23,23 +29,30 @@
 
     {% if pagination.page == 1 %}
       {% set max_page = [pagination.pages, 5] | min %}
-
+      {{ Page(pagination, route, 1, label="first", disabled=True) }}
+      {{ Page(pagination, route, pagination.page - 1, label="prev", disabled=True) }}
       {% for i in range(1, max_page + 1) %}
         {{ Page(pagination, route, i) }}
       {% endfor %}
-      {{ last }}
+      {{ Page(pagination, route, pagination.page + 1, label="next") }}
+      {{ Page(pagination, route, pagination.pages, label="last") }}
     {% elif pagination.page == pagination.pages %}
-      {{ first }}
+      {{ Page(pagination, route, 1, label="first") }}
+      {{ Page(pagination, route, pagination.page - 1, label="prev") }}
       {% for i in range(pagination.pages - 4, pagination.pages + 1) %}
         {{ Page(pagination, route, i) }}
       {% endfor %}
+      {{ Page(pagination, route, pagination.page + 1, label="next", disabled=True) }}
+      {{ Page(pagination, route, pagination.pages, label="last", disabled=True) }}
     {% else %}
       {% set window = pagination | pageWindow %}
-      {{ first }}
+      {{ Page(pagination, route, 1, label="first", disabled=True) }}
+      {{ Page(pagination, route, pagination.page - 1, label="prev", disabled=True) }}
       {% for i in range(window.0, window.1 + 1) %}
         {{ Page(pagination, route, i) }}
       {% endfor %}
-      {{ last }}
+      {{ Page(pagination, route, pagination.page + 1, label="next") }}
+      {{ Page(pagination, route, pagination.pages, label="last") }}
     {% endif %}
   </div>
 {%- endmacro %}