diff --git a/opentech/static_src/src/sass/public/abstracts/_functions.scss b/opentech/static_src/src/sass/public/abstracts/_functions.scss
index 49dfac6dbb4db0af2eaf41485bcba1c99406eece..1afcd2425721c7c0bc266e41362155fd2768c336 100755
--- a/opentech/static_src/src/sass/public/abstracts/_functions.scss
+++ b/opentech/static_src/src/sass/public/abstracts/_functions.scss
@@ -7,3 +7,30 @@
 @function rem($px, $context: $base-font-size) {
     @return #{strip-unit($px / strip-unit($context))}rem;
 }
+
+// Returns the opposite direction of each direction in a list
+// @param {List} $directions - List of initial directions
+// @return {List} - List of opposite directions
+@function opposite-direction($directions) {
+    $opposite-directions: ();
+    $direction-map: (
+        'top':    'bottom',
+        'right':  'left',
+        'bottom': 'top',
+        'left':   'right',
+        'center': 'center',
+        'ltr':    'rtl',
+        'rtl':    'ltr'
+    );
+
+    @each $direction in $directions {
+        $direction: to-lower-case($direction);
+
+        @if map-has-key($direction-map, $direction) {
+            $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
+        } @else {
+            @warn 'No opposite direction can be found for `#{$direction}`. Direction omitted.';
+        }
+    }
+    @return $opposite-directions;
+}
diff --git a/opentech/static_src/src/sass/public/abstracts/_mixins.scss b/opentech/static_src/src/sass/public/abstracts/_mixins.scss
index 5bba895b01cec9fa36b440f9a38922b6f9253f10..73145a79ce56e52066acd96b2f78e6573e22b0ff 100755
--- a/opentech/static_src/src/sass/public/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/public/abstracts/_mixins.scss
@@ -153,3 +153,28 @@
         fill: $color;
     }
 }
+
+// Triangle mixin
+// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
+// @param {Color} $color [currentcolor] - Triangle color
+// @param {Length} $size [1em] - Triangle size
+@mixin triangle($direction, $color: currentcolor, $size: 1em) {
+    @if not index(top right bottom left, $direction) {
+        @error 'Direction must be either `top`, `right`, `bottom` or `left`.';
+    }
+
+    width: 0;
+    height: 0;
+    content: '';
+    border-#{opposite-direction($direction)}: ($size * 1.5) solid $color;
+
+    $perpendicular-borders: $size solid transparent;
+
+    @if $direction == top or $direction == bottom {
+        border-right:  $perpendicular-borders;
+        border-left:   $perpendicular-borders;
+    } @else if $direction == right or $direction == left {
+        border-top:    $perpendicular-borders;
+        border-bottom: $perpendicular-borders;
+    }
+}
diff --git a/opentech/static_src/src/sass/public/components/_pagination.scss b/opentech/static_src/src/sass/public/components/_pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4b661189e6aafa26ee40dfbb76441303579172a7
--- /dev/null
+++ b/opentech/static_src/src/sass/public/components/_pagination.scss
@@ -0,0 +1,47 @@
+.pagination {
+    @extend %h6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px;
+
+    .cardinality {
+        margin: 0 10px;
+    }
+
+    .previous,
+    .next {
+        a {
+            position: relative;
+            display: block;
+            width: 55px;
+            height: 55px;
+            font-size: 0;
+            color: $color--white;
+            background: $color--white;
+            border: 1px solid $color--mid-grey;
+
+            &::after {
+                position: absolute;
+                top: 18.5px;
+                left: 22.5px;
+            }
+        }
+    }
+
+    .previous {
+        a {
+            &::after {
+                @include triangle(left, $color--primary, 7px);
+            }
+        }
+    }
+
+    .next {
+        a {
+            &::after {
+                @include triangle(right, $color--primary, 7px);
+            }
+        }
+    }
+}
diff --git a/opentech/static_src/src/sass/public/main.scss b/opentech/static_src/src/sass/public/main.scss
index 9f5b54ddbe7bb997ca33c8f15cabc126c3c29a52..7f09236fa417640878b5a4f94aaac4377369554e 100755
--- a/opentech/static_src/src/sass/public/main.scss
+++ b/opentech/static_src/src/sass/public/main.scss
@@ -30,6 +30,7 @@
 @import 'components/media-box';
 @import 'components/messages';
 @import 'components/nav';
+@import 'components/pagination';
 @import 'components/responsive-object';
 @import 'components/rich-text';
 @import 'components/section';
diff --git a/opentech/templates/includes/pagination.html b/opentech/templates/includes/pagination.html
index baeb81b79af34ee8df47a9f4323d3ef4ddd2a56a..3fe0bf2820865c9d4bee7072f29c7d0e9d3cd73c 100644
--- a/opentech/templates/includes/pagination.html
+++ b/opentech/templates/includes/pagination.html
@@ -2,15 +2,15 @@
 <nav role="navigation" aria-label="Pagination">
     <ul class="pagination">
         {% if paginator_page.has_previous %}
-            <li><a href="?page={{ paginator_page.previous_page_number }}{% if search_query %}&amp;query={{ search_query|urlencode }}{% endif %}{% if extra_url_params %}&amp;{{ extra_url_params }}{% endif %}" class="previous">previous</a></li>
+            <li class="previous"><a href="?page={{ paginator_page.previous_page_number }}{% if search_query %}&amp;query={{ search_query|urlencode }}{% endif %}{% if extra_url_params %}&amp;{{ extra_url_params }}{% endif %}">previous</a></li>
         {% endif %}
 
-        <li class="current">
+        <li class="cardinality">
             {{ paginator_page.number }}/{{ paginator_page.paginator.num_pages }}
         </li>
 
         {% if paginator_page.has_next %}
-            <li><a href="?page={{ paginator_page.next_page_number }}{% if search_query %}&amp;query={{ search_query|urlencode }}{% endif %}{% if extra_url_params %}&amp;{{ extra_url_params }}{% endif %}" class="next">next</a></li>
+            <li class="next"><a href="?page={{ paginator_page.next_page_number }}{% if search_query %}&amp;query={{ search_query|urlencode }}{% endif %}{% if extra_url_params %}&amp;{{ extra_url_params }}{% endif %}">next</a></li>
         {% endif %}
     </ul>
 </nav>{% endif %}