diff --git a/src/App.vue b/src/App.vue
index 4327fb14e00a70f793984818d8bd7a72547aa28a..49fc419e5c1eda11265ba26af64742987b741ab3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,8 +26,8 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+  margin-left: 600px;
 }
 </style>
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 0d4ee4058b6c5a13e2db84550b2cce0196a7c17f..acb939b21f0c7ffac61e8d026c341a9bfd56d33e 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="hello">
     <h1>{{ article_header }}</h1>
+    <div class="">
+      <h3>Etymologi</h3>
+        <ul>
+          <DefElement v-for="(item, index) in article.etymology" :key="index" :element='item' v-if="item.content" />
+        </ul>
 
+    </div>
+    <div class="">
+      <h3>Definisjoner</h3>
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import DefElement from './DefElement.vue'
+
 export default {
   name: 'Article',
   props: {
@@ -33,6 +44,9 @@ export default {
       )
       return lemmas.join(', ')
     }
+  },
+  components: {
+    DefElement
   }
 }
 </script>
@@ -42,14 +56,6 @@ export default {
 h3 {
   margin: 40px 0 0;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
 a {
   color: #42b983;
 }
diff --git a/src/components/DefElement.vue b/src/components/DefElement.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6bd09d8726a6be68af982c76b758b0f22261fe3
--- /dev/null
+++ b/src/components/DefElement.vue
@@ -0,0 +1,16 @@
+<template>
+  <li>
+    <div :class="element.type">
+      {{ element.content }}
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'DefElement',
+  props: {
+    element: Object
+  }
+}
+</script>