diff --git a/Gemfile b/Gemfile
index b807382..67faed5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -16,5 +16,6 @@ group :jekyll_plugins do
     gem 'jekyll-seo-tag'
     gem 'jekyll-archives'
     gem 'kramdown'
+    gem "kramdown-parser-gfm"
     gem 'rouge'
 end
diff --git a/Gemfile.lock b/Gemfile.lock
index 8e570c7..1929ef7 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -44,6 +44,8 @@ GEM
       listen (~> 3.0)
     kramdown (2.3.0)
       rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
     liquid (4.0.3)
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -75,7 +77,8 @@ DEPENDENCIES
   jekyll-seo-tag
   jekyll-sitemap
   kramdown
+  kramdown-parser-gfm
   rouge
 
 BUNDLED WITH
-   2.0.1
+   2.1.4
diff --git a/_config.yml b/_config.yml
index 9ec0a18..648befb 100644
--- a/_config.yml
+++ b/_config.yml
@@ -36,7 +36,9 @@ jekyll-archives:
     category: '/category/:name/'
 
 # Pagination
-paginate: 20
+paginate: 9
+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 5cf9c93..a1d4296 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 983228b..c5b37bc 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -8,14 +8,43 @@
 	display:inline;
 }
 
-figcaption {
-  text-align: center;
-  font-size: smaller;
-  color: #757575;
-}
-
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
 	"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;
+    z-index: 0 !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 ae2001f..d5b832d 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -754,9 +754,11 @@ span.navigation {
     text-align: center;
 }
 
+/*
 .pagination {
     display: block;
 }
+*/
 
 iframe {
     max-width: 100%;