diff --git a/components/Event.vue b/components/Event.vue
index 8140fcda..76a47f6f 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -1,19 +1,19 @@
-<template lang="pug" functional>
+<template lang="pug">
   v-card.h-event.event
-    nuxt-link(:to='`/event/${props.event.id}`')
-      v-img.img(:src="`/media/thumb/${props.event.image_path || 'logo.png' }`")
-      v-icon.float-right.mr-1(v-if='props.event.parentId' color='success') mdi-repeat
-      .title.p-name {{props.event.title}}
+    nuxt-link(:to='`/event/${event.id}`')
+      v-img.img(:src="`/media/thumb/${event.image_path || 'logo.png' }`")
+      v-icon.float-right.mr-1(v-if='event.parentId' color='success') mdi-repeat
+      .title.p-name {{event.title}}
 
     v-card-text.body.pt-0.pb-0
-      time.dt-start.subtitle-1(:datetime='props.event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-calendar</v-icon> {{ props.event|when }}
-      .d-none.dt-end {{props.event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
-      a.place.d-block.p-location.pl-0(text color='primary' @click="listeners['placeclick'](props.event.place.id)") <v-icon>mdi-map-marker</v-icon> {{props.event.place.name}}
+      time.dt-start.subtitle-1(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-calendar</v-icon> {{ event|when }}
+      .d-none.dt-end {{event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
+      a.place.d-block.p-location.pl-0(text color='primary' @click="$emit('placeclick', event.place.id)") <v-icon>mdi-map-marker</v-icon> {{event.place.name}}
 
     v-card-actions.actions.justify-space-between
       .tags
-        v-chip.ml-1.px-2(v-for='tag in props.event.tags' small
-          :key='tag' outlined color='primary' @click="listeners['tagclick'](tag)") {{tag}}
+        v-chip.ml-1.px-2(v-for='tag in event.tags' small
+          :key='tag' outlined color='primary' @click="$emit('tagclick', tag)") {{tag}}
 
       v-menu(offset-y)
         template(v-slot:activator="{on}")
@@ -21,25 +21,27 @@
             v-icon mdi-dots-vertical
         v-list(dense)
           v-list-item-group
-            v-list-item(v-clipboard:success="() => parent.$root.$message('common.copied', { color: 'success' })"
-                  v-clipboard:copy='`${parent.settings.baseurl}/event/${props.event.id}`')
+            v-list-item(v-clipboard:success="() => $root.$message('common.copied', { color: 'success' })"
+                  v-clipboard:copy='`${settings.baseurl}/event/${event.id}`')
               v-list-item-icon
                 v-icon mdi-content-copy
               v-list-item-content
-                v-list-item-title {{parent.$t('common.copy_link')}}
-            v-list-item(:href='`/api/event/${props.event.id}.ics`')
+                v-list-item-title {{$t('common.copy_link')}}
+            v-list-item(:href='`/api/event/${event.id}.ics`')
               v-list-item-icon
                 v-icon mdi-calendar-export
               v-list-item-content
-                v-list-item-title {{parent.$t('common.add_to_calendar')}}
+                v-list-item-title {{$t('common.add_to_calendar')}}
 
 </template>
 <script>
+import { mapState } from 'vuex'
 
 export default {
   props: {
     event: { type: Object, default: () => ({}) }
-  }
+  },
+  computed: mapState(['settings'])
 }
 </script>
 <style lang="less">
@@ -70,20 +72,6 @@ export default {
     flex: 1 1 auto;
   }
 
-  // .actions {
-  //   justify-content: flex-end;
-  //   overflow: hidden;
-  //   align-content: flex-end;
-  //   text-align: right;
-  //   .tags {
-  //     order: 0;
-  //     flex-grow: 1;
-  //     align-self:center;
-  //     max-height: 1.6em;
-  //     overflow: hidden;
-  //   }
-  // }
-
   .img {
     width: 100%;
     max-height: 250px;