diff --git a/src/App.vue b/src/App.vue
index 876150f9629ce4fee839d0280e088a23c91f040b..dab6c19cb4b1e71dcaed143cb3600f008e123add 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@ export default {
   name: 'app',
   data: function() {
     return {
-      article_id: window.location.href.split("/").pop()
+      article_id: parseInt(window.location.href.split("/").pop())
     }
   },
   components: {
diff --git a/src/assets/logo.png b/src/assets/logo.png
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..cbd792d33ad73ea3d7910170fd83ecc41e412964 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/Definition.vue b/src/components/Definition.vue
index 1c52e4991356b50646366a745b21acd15c9127e5..600f882d08d0e6ea5746043f04c336cc5c3ce25a 100644
--- a/src/components/Definition.vue
+++ b/src/components/Definition.vue
@@ -9,6 +9,7 @@
 <script>
 import DefElement from './DefElement.vue'
 import Example from './Example.vue'
+import SubArticle from './SubArticle.vue'
 
 var Definition = {
   name: 'Definition',
@@ -18,7 +19,8 @@ var Definition = {
   components: {
     DefElement,
     Definition,
-    Example
+    Example,
+    SubArticle
   },
   computed: {
     template_name_added: function(){
@@ -28,7 +30,8 @@ var Definition = {
               'template': {
                 'explanation': 'DefElement',
                 'definition': 'Definition',
-                'example': 'Example'
+                'example': 'Example',
+                'sub_article': 'SubArticle'
               }[element.type] || 'li',
               'element': element
           }
diff --git a/src/components/SubArticle.vue b/src/components/SubArticle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ab57eb8029d254204c6c2ee872995d7c095344b
--- /dev/null
+++ b/src/components/SubArticle.vue
@@ -0,0 +1,59 @@
+<template>
+  <li class="sub_article">
+    <span class="sub_article_header"><a :href="body.article_id">{{article.lemmas[0]['word']}}</a></span>
+    <ul>
+      <DefElement :body="body.intro" />
+      <Definition :body="article.definitions[0]" />
+    </ul>
+  </li>
+</template>
+
+<script>
+import axios from "axios";
+import DefElement from './DefElement.vue'
+
+export default {
+  name: 'SubArticle',
+  props: {
+    body: Object
+  },
+  data: function(){
+    return {
+      article: {
+        lemmas: [{word: ''}],
+        definitions: [{
+          elements: []
+        }]
+      }
+    }
+  },
+  components: {DefElement},
+  mounted: function(){
+    var self = this;
+    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.body.article_id)
+      .then(response => self.article = response.data._source)
+  },
+  beforeCreate: function () {
+    this.$options.components.Definition = require('./Definition.vue').default
+  }
+}
+
+</script>
+<style scoped>
+.sub_article_header {
+  font-weight: bold;
+}
+
+li.sub_article {
+  padding-top: 8px;
+}
+
+li.sub_article ul {
+  padding-top: 0px;
+}
+
+li.sub_article ul li {
+  list-style: none;
+}
+
+</style>