diff --git a/ayanova/src/views/ay-history.vue b/ayanova/src/views/ay-history.vue
index d6ef3895..a5af2da0 100644
--- a/ayanova/src/views/ay-history.vue
+++ b/ayanova/src/views/ay-history.vue
@@ -3,14 +3,21 @@
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-col rows="12">
       <v-timeline :dense="$vuetify.breakpoint.smAndDown">
-        <v-timeline-item v-for="i in obj" :key="i.index" large>
+        <v-timeline-item
+          v-for="i in obj"
+          :key="i.index"
+          large
+          :color="getIconColorForEvent(i.event)"
+          :icon="getIconForEvent(i.event)"
+          fill-dot
+        >
           <template v-slot:opposite>
             <span>{{ i.date }}</span>
           </template>
           <v-card class="elevation-2">
             <v-card-title class="headline">{{ i.name }}</v-card-title>
             <v-card-text>
-              {{ i.event }}
+              {{ getEventName(i.event) }}
               {{ i.textra }}
             </v-card-text>
           </v-card>
@@ -37,6 +44,7 @@ export default {
         vm.readOnly = true;
         window.$gz.eventBus.$on("menu-click", clickHandler);
         generateMenu(vm, false);
+
         vm.getDataFromApi();
       })
       .catch(err => {
@@ -59,6 +67,25 @@ export default {
     };
   },
   methods: {
+    getEventName(event) {
+      return this.eventTypes[event].name;
+    },
+    getIconForEvent(event) {
+      return this.eventTypes[event].icon;
+    },
+    getIconColorForEvent(event) {
+      switch (event) {
+        case 0:
+        case 5:
+          return "red";
+        case 1:
+        case 4:
+        case 10:
+          return "green";
+        default:
+          return "primary";
+      }
+    },
     getDataFromApi() {
       let vm = this;
       if (vm.formState.loading) {