diff --git a/app/assets/javascripts/app/pages/post-viewer.js b/app/assets/javascripts/app/pages/post-viewer.js
index 832f95cc6..d1213e3c7 100644
--- a/app/assets/javascripts/app/pages/post-viewer.js
+++ b/app/assets/javascripts/app/pages/post-viewer.js
@@ -50,29 +50,20 @@ app.pages.PostViewer = app.views.Base.extend({
   },
 
   bindNavHooks : function() {
-    /* navagation hooks */
-    var nextPostLocation = this.model.get("next_post");
-    var previousPostLocation = this.model.get("previous_post");
-
-
+    var model = this.model;
     $(document).keydown(function(evt){
-      /* prevent nav from happening if the user is using the arrow
-       * keys to navigate through their comment text */
+      // prevent nav from happening if the user is using the arrow keys to navigate through their comment text
       if($(evt.target).is("textarea")) { return }
 
       switch(evt.keyCode) {
         case 37:
-          navigate(nextPostLocation); break;
+          app.router.navigate(model.get("next_post"), true); break;
         case 39:
-          navigate(previousPostLocation); break;
+          app.router.navigate(model.get("previous_post"), true); break;
         default:
           break;
       }
     })
-
-    function navigate(loc) {
-      loc ? window.location = loc : null
-    }
   },
 
   commentAnywhere : function(evt) {
diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js
index 812b1bbc7..fad9951ab 100644
--- a/app/assets/javascripts/app/router.js
+++ b/app/assets/javascripts/app/router.js
@@ -23,10 +23,23 @@ app.Router = Backbone.Router.extend({
 
     "posts/new" : "composer",
     "posts/:id": "singlePost",
+    "posts/:id/next": "siblingPost",
+    "posts/:id/previous": "siblingPost",
+
     "p/:id": "singlePost",
     "framer": "framer"
   },
 
+  siblingPost : function(){ //next or previous
+    var post = new app.models.Post();
+    post.bind("change", setPreloadAttributesAndNavigate)
+    post.fetch({url : window.location})
+
+    function setPreloadAttributesAndNavigate(){
+      window.preloads.post = post.attributes
+      app.router.navigate(post.url(), true)
+    }
+  },
 
   newProfile : function(personId) {
     this.renderPage(new app.pages.Profile({ personId : personId }));
diff --git a/app/assets/javascripts/app/views/post-viewer/nav.js b/app/assets/javascripts/app/views/post-viewer/nav.js
index 1fa714fa6..575a42493 100644
--- a/app/assets/javascripts/app/views/post-viewer/nav.js
+++ b/app/assets/javascripts/app/views/post-viewer/nav.js
@@ -1,16 +1,3 @@
 app.views.PostViewerNav = app.views.Base.extend({
-  templateName: "post-viewer/nav",
-
-  postRenderTemplate : function() {
-    var mappings = {"#forward" : "next_post",
-                    "#back" : "previous_post"};
-
-    _.each(mappings, function(attribute, selector){
-      this.setArrow(this.$(selector), this.model.get(attribute))
-    }, this);
-  },
-
-  setArrow : function(arrow, loc) {
-    loc ? arrow.attr('href', loc) : arrow.remove()
-  }
+  templateName: "post-viewer/nav"
 });
\ No newline at end of file
diff --git a/app/assets/templates/post-viewer/nav.jst.hbs b/app/assets/templates/post-viewer/nav.jst.hbs
index 81924ce37..56771c791 100644
--- a/app/assets/templates/post-viewer/nav.jst.hbs
+++ b/app/assets/templates/post-viewer/nav.jst.hbs
@@ -1,10 +1,10 @@
-<a href="#" class="nav-arrow left" id="forward">
+<a href="{{next_post}}" class="nav-arrow left" id="forward" rel="backbone">
   <div class="nav-arrow-inner">
     <img src="{{imageUrl "arrow-left.png"}}" />
   </div>
 </a>
 
-<a href="#" class="nav-arrow right" id="back">
+<a href="{{previous_post}}" class="nav-arrow right" id="back" rel="backbone">
   <div class="nav-arrow-inner">
     <img src="{{imageUrl "arrow-right.png"}}" />
   </div>