diff --git a/src/App.js b/src/App.js
index 380a57f..5218828 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,7 +13,7 @@ import { Container, Row, Column } from './skeleton';
 import { Post, Posts } from './Article';
 import { Footer } from './Footer';
 import { Header } from './Header';
-import { NavList, TagNav, HistoryNav } from './Nav';
+import { NavList, TagNav } from './Nav';
 import { NotFound } from './NotFound';
 
 
@@ -51,9 +51,6 @@ class App extends Component {
               </Column>
             </Row>
 
-            { /* Display HistoryNav if this is a series of articles */ }
-            <Route exact path="/" component={HistoryNav} />
-            <Route exact path="/page/:page" component={HistoryNav} />
           </Container>
 
           <Footer />
diff --git a/src/Article.js b/src/Article.js
index a1ffac6..308328a 100644
--- a/src/Article.js
+++ b/src/Article.js
@@ -4,7 +4,7 @@ import Markdown from 'react-markdown';
 import { Link } from 'react-router-dom';
 import slugify from 'slugify';
 
-import { ListLink } from './Nav';
+import { ListLink, HistoryNav } from './Nav';
 import { NotFound } from './NotFound';
 
 
@@ -149,36 +149,79 @@ class Posts extends Component {
 
     // Number of Articles per page
     // TODO: Pull this from a configuration somehow
-    this.per_page = 4;
+    this.perPage = 4;
 
     this.params = props.match.params;
     this.state = {
       posts: null,
+      prevHref: null,
+      nextHref: null,
     }
   }
 
+  update() {
+    this.fetchPosts();
+  }
+
   fetchPosts() {
     // Fetch posts from JSON blob
     fetch('/site.json')
       .then((resp) => resp.json())
       .then((blob) => {
         let offset = 0;
-        if (this.params.page) {
-          offset = this.params.page * this.per_page;
+        let page = parseInt(this.params.page, 10);
+        if (!page) {
+          page = 0;
         }
-        let posts = blob.posts.slice(offset, offset + this.per_page);
+
+        offset = page * this.perPage;
+        let posts = blob.posts.slice(offset, offset + this.perPage);
+
+        // Check to see if we have more posts after these
+        let nextOffset = (page + 1) * this.perPage;
+        let nextPosts = blob.posts.slice(nextOffset,
+          nextOffset + this.perPage);
+        let hasMore = nextPosts.length > 0;
+        this.updateHistoryNav(page, hasMore);
 
         this.setState({posts: posts});
       });
   }
 
+  updateHistoryNav(page, hasMore) {
+    console.log("page" ,page);
+    console.log("more?", hasMore);
+    // Update prev state
+    let prev = null;
+    if (page === 1) {
+      prev = "/";
+    } else if (page > 1) {
+      prev = "/page/" + (page - 1);
+    } else {
+      prev = null;
+    }
+
+    // Update next state
+    let next = null;
+    if (hasMore) {
+      next = "/page/" + (page + 1);
+    } else {
+      next = null;
+    }
+
+    this.setState({
+      nextHref: next,
+      prevHref: prev,
+    })
+  }
+
   componentDidMount() {
-    this.fetchPosts();
+    this.update();
   }
 
   componentWillReceiveProps(props) {
     this.params = props.match.params;
-    this.fetchPosts();
+    this.update();
   }
 
   render() {
@@ -197,7 +240,10 @@ class Posts extends Component {
       }
 
       return (
-        <div>{ jawn }</div>
+        <div>
+          { jawn }
+          <HistoryNav prev={this.state.prevHref} next={this.state.nextHref} />
+        </div>
       )
     } else {
       return <p></p>
diff --git a/src/Nav.js b/src/Nav.js
index c21585a..cdd4eee 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -71,39 +71,34 @@ class TagNav extends Component {
   }
 }
 
-class HistoryNav extends Component {
-  render() {
-    let page = 0;
-    if (this.props.match.params.page) {
-      page = parseInt(this.props.match.params.page, 10);
-    }
+const HistoryNav = (props) => {
+  let left = "";
+  let right = "";
 
-    let left = "";
-    if (page !== 0) {
-      let last_href = "/page/" + (page - 1);
-      if (page === 1) {
-        last_href = "/";
-      }
-
-      left = (
-        <Link to={last_href}>
-          <Icon name="arrow-left" />
-          <span> newer posts</span>
-        </Link>
-      )
-    }
-
-    let next_href = "/page/" + (page + 1);
-    return (
-      <Row>
-        { left }
-        <Link className="u-pull-right" to={next_href}>
-          <span>older posts </span>
-          <Icon name="arrow-right" />
-        </Link>
-      </Row>
+  if (props.prev) {
+    left = (
+      <Link to={props.prev}>
+        <Icon name="arrow-left" />
+        <span> newer posts</span>
+      </Link>
     );
   }
+
+  if (props.next) {
+    right = (
+      <Link className="u-pull-right" to={props.next}>
+        <span>older posts </span>
+        <Icon name="arrow-right" />
+      </Link>
+    );
+  }
+
+  return (
+    <Row>
+      { left }
+      { right }
+    </Row>
+  )
 }
 
 export { ListLink, NavList, TagNav, HistoryNav };