diff --git a/_config.yml b/_config.yml
index 8f192fabcd..36c760bf14 100644
--- a/_config.yml
+++ b/_config.yml
@@ -49,6 +49,8 @@ jekyll-archives:
     
 # Pagination 
 paginate: 6
+paginate_trail: 2
+paginate_show_first_and_last: true
 paginate_path: /page:num/
     
 # Other
diff --git a/_includes/pagination.html b/_includes/pagination.html
index 5cf9c93e10..a1d429621f 100644
--- a/_includes/pagination.html
+++ b/_includes/pagination.html
@@ -1,25 +1,38 @@
 {% if paginator.total_pages > 1 %}
-<div class="pagination">
+<nav aria-label="Page navigation example">
+<ul class="pagination justify-content-center flex-wrap">
+
   {% if paginator.previous_page %}
-    <a class="ml-1 mr-1" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
-  {% else %}
-    <span>&laquo; Prev</span>
+    {% if site.paginate_show_first_and_last %}
+      <li class="page-item"><a class="page-link" href="{{ site.baseurl | replace: '//', '/' }}/" title="First page">&laquo;</a></li>
+    {% endif %}
+    <li class="page-item"><a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" title="Previous page">&lt;</a></li>
   {% endif %}
 
-  {% for page in (1..paginator.total_pages) %}
-    {% if page == paginator.page %}
-      <span class="ml-1 mr-1">{{ page }}</span>
+  {% assign page_start = paginator.page | minus: site.paginate_trail %}
+  {% assign page_end = paginator.page | plus: site.paginate_trail %}
+
+  {% for page in (page_start..page_end) %}
+    {% if page < 1 %}
+      <!-- Do nothing -->
+    {% elsif page > paginator.total_pages %}
+      <!-- Do nothing -->
+    {% elsif page == paginator.page %}
+      <li class="page-item active"><a class="page-link">{{ page }} <span class="sr-only">(current)</span></a></li>
     {% elsif page == 1 %}
-      <a class="ml-1 mr-1" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
+      <li class="page-item"><a class="page-link" href="{{ site.baseurl | replace: '//', '/' }}/">{{ page }}</a></li>
     {% else %}
-      <a class="ml-1 mr-1" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
+      <li class="page-item"><a class="page-link" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
     {% endif %}
   {% endfor %}
 
   {% if paginator.next_page %}
-    <a class="ml-1 mr-1" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
-  {% else %}
-    <span>Next &raquo;</span>
+    <li class="page-item"><a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" title="Next page">&gt;</a></li>
+    {% if site.paginate_show_first_and_last %}
+      <li class="page-item"><a class="page-link" href="{{ site.baseurl | replace: '//', '/' }}/page{{ paginator.total_pages }}" title="Last page">&raquo;</a></li>
+    {% endif %}
   {% endif %}
-</div>
+
+</ul>
+</nav>
 {% endif %}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index a7e8b9b25a..9d64937652 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -13,3 +13,37 @@
 	"syntax",
     "starsnonscss"
 ;
+
+/* pagination */
+
+$paginateColor: #00ab6b;
+
+.pagination > li > a
+{
+    background-color: white;
+    color: $paginateColor;
+}
+
+.pagination > li > a:focus,
+.pagination > li > a:hover,
+.pagination > li > span:focus,
+.pagination > li > span:hover
+{
+    color: #5a5a5a;
+    background-color: #eee;
+    border-color: #ddd;
+}
+
+.pagination > .active > a
+{
+    color: white;
+    background-color: $paginateColor !important;
+    border: solid 1px $paginateColor !important;
+}
+
+.pagination > .active > a:hover
+{
+    background-color: $paginateColor !important;
+    border: solid 1px $paginateColor;
+}
+/* pagination end */
\ No newline at end of file
diff --git a/assets/css/screen.css b/assets/css/screen.css
index b306d2cf27..6c99e1cf13 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -754,10 +754,6 @@ span.navigation {
     text-align: center;
 }
 
-.pagination {
-    display: block;
-}
-
 iframe {
     max-width: 100%;
 }