diff --git a/services/web/app/views/mixins/_pagination.pug b/services/web/app/views/mixins/_pagination.pug
new file mode 100644
index 0000000000..4ac2d924e8
--- /dev/null
+++ b/services/web/app/views/mixins/_pagination.pug
@@ -0,0 +1,74 @@
+mixin paginate(pages, page_path, max_btns)
+	//- @param pages.current_page the current page viewed
+	//- @param pages.total_pages previously calculated,
+	//- based on total entries and entries per page
+	//- @param page_path the relative path, minus a trailing slash and page param
+	//- @param max_btns max number of buttons on either side of the current page
+	//- button and excludes first, prev, next, last
+
+	if pages && pages.current_page && pages.total_pages
+		- var max_btns = max_btns || 4
+		- var prev_page = Math.max(parseInt(pages.current_page, 10) - max_btns, 1)
+		- var next_page = parseInt(pages.current_page, 10) + 1
+		- var next_index = 0;
+		- var full_page_path = page_path + "/page/"
+
+		nav(role="navigation" aria-label="Pagination Navigation")
+			ul.pagination
+				if pages.current_page > 1
+					li
+						a(
+							aria-label="Go to first page"
+							href=page_path
+						) « First
+					li
+						a(
+							aria-label="Go to previous page"
+							href=full_page_path + (parseInt(pages.current_page, 10) - 1)
+							rel="prev"
+						) ‹ Prev
+
+				if pages.current_page - max_btns > 1
+					li
+						span …
+
+				while prev_page < pages.current_page
+					li
+						a(
+							aria-label="Go to page " + prev_page
+							href=full_page_path + prev_page
+						) #{prev_page}
+						- prev_page++
+
+				li(class="active")
+					span(
+						aria-label="Current Page, Page " + pages.current_page
+						aria-current="true"
+					) #{pages.current_page}
+
+				if pages.current_page < pages.total_pages
+					while next_page <= pages.total_pages && next_index < max_btns
+						li
+							a(
+								aria-label="Go to page " + next_page
+								href=full_page_path + next_page
+							) #{next_page}
+						- next_page++
+						- next_index++
+
+					if next_page <= pages.total_pages 
+						li
+							span …
+
+					li
+						a(
+							aria-label="Go to next page"
+							href=full_page_path + (parseInt(pages.current_page, 10) + 1)
+							rel="next"
+						) Next ›
+
+					li
+						a(
+							aria-label="Go to last page"
+							href=full_page_path + pages.total_pages
+						) Last »
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index e6a20c6ad8..7c22b1f01c 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -277,6 +277,21 @@
 @chat-new-message-textarea-bg     : @ol-blue-gray-1;
 @chat-new-message-textarea-color  : @ol-blue-gray-6;
 
+// Pagination
+@pagination-active-bg             : @ol-dark-green;
+@pagination-active-border         : @gray-lighter;
+@pagination-active-color          : #FFF;
+@pagination-bg                    : #FFF;
+@pagination-border                : @gray-lighter;
+@pagination-color                 : @ol-dark-green;
+@pagination-disabled-color        : @gray-dark;
+@pagination-disabled-bg           : @gray-lightest;
+@pagination-disabled-border       : @gray-lighter;
+@pagination-hover-color           : @ol-dark-green;
+@pagination-hover-bg              : @gray-lightest;
+@pagination-hover-border          : @gray-lighter;
+
+
 // PDF
 @pdf-top-offset                 : @toolbar-small-height;
 @pdf-bg                         : @ol-blue-gray-1;
diff --git a/services/web/public/stylesheets/ol-style.less b/services/web/public/stylesheets/ol-style.less
index 774e70a2ab..2be148a497 100644
--- a/services/web/public/stylesheets/ol-style.less
+++ b/services/web/public/stylesheets/ol-style.less
@@ -8,6 +8,7 @@
 @import "_ol_style_includes.less";
 @import "components/embed-responsive.less";
 @import "components/icons.less";
+@import "components/pagination.less";
 
 // Pages
 @import "app/about.less";