diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index d6ec363..2d9e075 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -96,3 +96,35 @@ ul.breadcrumb li+li:before {
 ul.breadcrumb li.active a {
   color: inherit;
 }
+
+/* Pagination */
+.pagination {
+  list-style: none;
+  text-align: center;
+}
+
+.page-item {
+  display: inline;
+}
+
+.page-link {
+  padding: 8px 16px;
+  border-radius: 5px;
+  color: lightgray;
+}
+
+.page-item.active .page-link {
+  background-color: #163b64;
+  color: inherit;
+}
+
+.page-item.active .page-link:hover {
+  background-color: #2b72c0;
+  color: white;
+}
+
+.page-link:hover {
+  background-color: #444;
+  color: white;
+  text-decoration: none;
+}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 010fad5..7aead0a 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -8,7 +8,7 @@
 <h1>{{ .Title | markdownify }}</h1>
 {{ end }}
 
-{{ range .Pages }}
+{{ range .Paginator.Pages }}
 <div class="post">
     <h2 class="post-title">
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
@@ -53,4 +53,8 @@
 </div>
 {{ end }}
 
+<div class="pagination">
+    {{ template "_internal/pagination.html" . }}
+</div>
+
 {{ end }}