diff --git a/TODO.md b/TODO.md
index 9347d69d57ec8d42d9336924b3277ae8bb43418a..69ea5e8a0c1b274e53a38f12edcf2244aec870f8 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,8 +1,5 @@
 # TODO
 
-- Format der Feature Suche
-- Feature Count als Computed, oder direct in API
-- Format der vollen Suche
-- Ergebnis als Component?
 - Bilder Anzeige
+- Features in Brief Ansicht
 - Kommentare und Code Cleanup zum Schluss
diff --git a/lib.js b/lib.js
index d84ab283bf1738da7c3b38b93ac3643ae7340bde..21a11a4fc3bbe5cc903a96472ceebfa1f561237a 100755
--- a/lib.js
+++ b/lib.js
@@ -127,6 +127,18 @@ function getXMLasJSON (filepath) {
   return data
 }
 
+function countReferences (features) {
+  /*
+   * Count the references in a feature
+   */
+  var count = 0
+  for (idx = 0; idx < features.length; idx++) {
+    count = count + features[idx]._attributes.ref.trim().split(" ").length
+  }
+
+  return count
+}
+
 module.exports = {
   getXMLasJSON: function (filepath) {
     /*
@@ -171,10 +183,12 @@ module.exports = {
     if (typeof query.subtype == "undefined"){ query.subtype = '.*' }
 
     var res = searchInFeatures(features, query)
+    var count = countReferences(res)
 
     if(res.length > 0) {
       result = {
         collection: letterJS.TEI.teiHeader.fileDesc.titleStmt.collection._text,
+        count: count,
         name: transformFilename(file),
         link: '/letters/' + file.slice(0, -4),
         url: '/api/letters/' + transformFilename(file, true),
diff --git a/src/components/Feature.vue b/src/components/Feature.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dc3b7d1b99241bf2d4481697c10615e3e8514aa8
--- /dev/null
+++ b/src/components/Feature.vue
@@ -0,0 +1,21 @@
+<template>
+<ul>
+  <li v-for="child in root">
+    <feature v-if="child.children" :root="child"/>
+    <span v-else>{{child}}</span>
+  </li>
+</ul>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: null
+    }
+  },
+  props: {
+    root: null
+  }
+}
+</script>
diff --git a/src/components/Features.vue b/src/components/Features.vue
index 9a73127365525e747b6bb6745eae62eed6fd4db4..f017e33f9be8501da9154de1d2c6c01912f4bd78 100644
--- a/src/components/Features.vue
+++ b/src/components/Features.vue
@@ -53,7 +53,7 @@
     <v-flex xs12 v-if="results">
       <v-card color="blue-grey lighten-1" class="white--text">
         <v-card-text>
-          Results: {{results.length}} letter(s)
+          Results: {{results.length}} letter(s) - {{countedHits}} hit(s)
         </v-card-text>
       </v-card>
     </v-flex>
@@ -61,16 +61,21 @@
     <v-flex xs12 v-if="results">
       <v-card v-for="letter in results" v-bind:key="letter.url">
         <v-card-title primary-title>
-          <div class="title"> {{letter.name}} - {{letter.collection}} </div>
+          <div class="title">
+            {{letter.name}} - {{letter.collection}}
+          <v-chip color="indigo" text-color="white">
+            <v-avatar class="indigo darken-4">{{letter.count}}</v-avatar>
+            Hits
+          </v-chip>
+          </div>
         </v-card-title>
         <v-card-text>
-          <p>Count: 12</p>
-          <ul>
-            <li v-for="hit in letter.results">{{hit}}</li>
+          <ul style="list-style-type:none;">
+            <li v-for="hit in letter.results">{{hit._text}} <v-chip label>{{(hit._attributes)}}</v-chip></li>
           </ul>
         </v-card-text>
         <v-card-actions>
-          <v-btn :href="letter.url" flat>View</v-btn>
+          <v-btn :href="letter.link" flat>View</v-btn>
         </v-card-actions>
       </v-card>
     </v-flex>
@@ -117,6 +122,15 @@ export default {
     }
 
   },
+  computed: {
+    countedHits: function () {
+      var hits = 0
+      for (var value of this.results) {
+        hits = hits + value.count
+      }
+      return hits
+    }
+  },
   created () {
     this.$http.get('http://localhost:3000/api/letters').then(function (data) {
       for (var value of data.body) {
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 542cde9483a95c7a17cc5d1a78a89cc30949e280..278cf622e3aff0a711105a6a80bbea751ca00535 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -47,7 +47,7 @@
     <v-flex xs12 v-if="results">
       <v-card color="blue-grey lighten-1" class="white--text">
         <v-card-text>
-          Results: {{results.length}}
+          Results: {{results.length}} letter(s)
         </v-card-text>
       </v-card>
     </v-flex>
@@ -58,19 +58,18 @@
           <div class="title"> {{letter.name}} - {{letter.collection}} </div>
         </v-card-title>
         <v-card-text>
-          <ul>
-            <li v-for="hit in letter.results">{{hit}}</li>
+          <ul style="list-style-type:none;">
+            <li v-for="hit in letter.results">{{getValue(hit)}} <v-chip label>{{getKey(hit)}}</v-chip></li>
           </ul>
         </v-card-text>
         <v-card-actions>
-          <v-btn :href="letter.url" flat>View</v-btn>
+          <v-btn :href="letter.link" flat>View</v-btn>
         </v-card-actions>
       </v-card>
     </v-flex>
 
   </v-layout>
  </v-container>
-
 </template>
 
 <script>
@@ -137,6 +136,16 @@ export default {
     clear () {
       this.invalid = false
       this.search = ''
+    },
+    getValue (obj) {
+      var key = Object.keys(obj)[0]
+      return obj[key].substr(0, 25)
+    },
+    getKey (obj) {
+      var key = Object.keys(obj)[0]
+      key = key.replace('teiHeader.xenoData.', '')
+      // key = key.replace(/.[0-9]._text/, '')
+      return key.substr(0, 50)
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 985316baa67a89a55c1a914fca5ce2d385fd36ab..85c5335d09bf3d2740b1c4533ad3c70e774be3a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,11 +5,13 @@ import Vuetify from 'vuetify'
 import VueResource from 'vue-resource'
 import App from './App'
 import router from './router'
+import Feature from './components/Feature'
 import '../node_modules/vuetify/dist/vuetify.min.css'
 
 Vue.config.productionTip = false
 Vue.use(Vuetify)
 Vue.use(VueResource)
+Vue.component('feature', Feature)
 
 /* eslint-disable no-new */
 new Vue({