diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1377554
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.swp
diff --git a/layouts/index.html b/layouts/index.html
index 360647b..17de6dc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,11 +1,12 @@
 {{ partial "header.html" . }}
 <div class="article-list">
-  {{ range $index, $page := .Site.Pages }}
+  {{ range $index, $page := .Paginator.Pages }}
   {{ if ne $index 0 }}
   <hr/>
   {{ end }}
   {{ .Render "li" }}
   {{ end }}
 </div>
+{{ partial "pagination.html" .Paginator }}
 {{ partial "footer.html" . }}
 
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..0eb437e
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,9 @@
+<nav class="pagination" role="navigation">
+{{if .HasPrev}}
+  <a class="newer-posts" href="{{ .Prev.URL }}">&laquo; Newer Posts</a>
+{{end}}
+  <span class="page-number">Page {{ .PageNumber }} of {{.TotalPages}}</span>
+{{if .HasNext}}
+  <a class="older-posts" href="{{ .Next.URL }}">Older Posts &raquo;</a>
+{{end}}
+</nav>
diff --git a/static/css/main.css b/static/css/main.css
index f470408..b5fdc48 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -216,6 +216,47 @@ a.btn-back {
     color: rgba(255, 255, 255, 1.0);
 }
 
+/* Pagination */
+
+.pagination
+{
+	width: 720px;
+	text-align: center;
+}
+
+.older-posts,.newer-posts
+{
+	display: inline!important;
+	border: 1px solid #ddd;
+	border-radius: 15px;
+	text-decoration: none;
+	transition: border .3s ease;
+	padding: 5px 14px;
+}
+
+.page-number
+{
+	display: inline-block;
+	min-width: 100px;
+	padding: 2px 0;
+}
+
+.newer-posts
+{
+	float: left;
+}
+
+.older-posts
+{
+    float: right;
+}
+
+.older-posts:hover,.newer-posts:hover
+{
+	color: #889093;
+	border-color: #98a0a4;
+}
+
 /* Override some of Bootstrap's styles */
 
 pre {