diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 2021a5b..e5b8a31 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -411,6 +411,53 @@ li.disabled > .page-link:hover {
 
 
 
+/* Previous and next page */
+.prevnext {
+  display: flex;
+  margin: 20px 0;
+}
+
+.prevnext > * {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  background-color: #222;
+  padding: 8px 16px;
+}
+
+.prevnext > a:hover {
+  background-color: #333;
+  text-decoration: none;
+}
+
+.prevnext > .prev {
+  text-align: left;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.prevnext > .next {
+  text-align: right;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.prevnext .prev-caption,
+.prevnext .next-caption {
+  opacity: 65%;
+}
+
+.prevnext .prev-post,
+.prevnext .next-post {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+
 /* Print compatibility */
 @media print {
   .top,
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7b5486c..7231977 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -52,6 +52,36 @@
 </div>
 {{ end }}
 
+{{ if or .NextInSection .PrevInSection }}
+<div class="prevnext">
+    {{ with .NextInSection }}
+    <a class="prev" href="{{ .Permalink }}">
+        <div class="prev-caption">
+            &larr; Newer
+        </div>
+        <div class="prev-post">
+            {{ .Title }}
+        </div>
+    </a>
+    {{ else }}
+    <div class="prev"></div>
+    {{ end }}
+
+    {{ with .PrevInSection }}
+    <a class="next" href="{{ .Permalink }}">
+        <div class="next-caption">
+            Older &rarr;
+        </div>
+        <div class="next-post">
+            {{ .Title }}
+        </div>
+    </a>
+    {{ else }}
+    <div class="next"></div>
+    {{ end }}
+</div>
+{{ end }}
+
 {{ if .Params.comments }}
 {{ partial "comments.html" . }}
 {{ end }}