diff --git a/src/components/Letter.vue b/src/components/Letter.vue
index 9b50fde814923b7ba680c960709b0cf1704e8ac5..eb840f135592843f0c5cfa0d3b88ce9b8a05808e 100644
--- a/src/components/Letter.vue
+++ b/src/components/Letter.vue
@@ -2,7 +2,15 @@
 <v-container grid-list-md>
   <v-layout row wrap>
     <v-flex xs12>
-      <h3>{{underscore(lettername)}}</h3>
+      <h3>
+        <v-btn :to="letters[0].link" flat icon>
+          <v-icon>keyboard_arrow_left</v-icon>
+        </v-btn>
+        {{underscore(lettername)}}
+        <v-btn :to="letters[1].link" flat icon>
+          <v-icon>keyboard_arrow_right</v-icon>
+        </v-btn>
+      </h3>
     </v-flex>
   </v-layout>
 
@@ -111,13 +119,24 @@ export default {
       return str.replace('_', ' ')
     },
     breadcrumbs (doc, docs) {
+      // Create a list of precursor/predecessor elements for showing links to them
       let idx = docs.findIndex(function (elem) {
-        return elem.title === doc
+        return elem.name.replace(' ', '_') === doc
       })
-      let start = idx - 2
-      let end = idx + 3
-      this.letters = docs.slice(start, end)
-      console.log(this.letters)
+
+      // If its the first element we push the last one, negative indexing would be nice
+      if (idx === 0) {
+        this.letters.push(docs[docs.length - 1])
+      } else {
+        this.letters.push(docs[idx - 1])
+      }
+      // this.letters.push(docs[idx])
+      // If its the last element we push the first one, negative indexing would be nice
+      if (idx === docs.length - 1) {
+        this.letters.push(docs[0])
+      } else {
+        this.letters.push(docs[idx + 1])
+      }
     },
     load (name) {
       // Clear variables for idempotence
@@ -146,14 +165,16 @@ export default {
 
         // Do this last for progress bar
         this.letter = doc.TEI
+
+        // Load breadcrumbs
+        this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
+          this.breadcrumbs(name, data.body)
+        })
       })
     }
   },
   created () {
     this.load(this.$route.params.letter)
-    this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
-      this.breadcrumbs(this.$route.params.letter, data.body)
-    })
   }
 }
 </script>