diff --git a/front/src/components/activity/Like.vue b/front/src/components/activity/Like.vue
new file mode 100644
index 000000000..ffb831278
--- /dev/null
+++ b/front/src/components/activity/Like.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="event">
+   <div class="label">
+     <i class="pink heart icon"></i>
+   </div>
+   <div class="content">
+     <div class="summary">
+       <slot name="user"></slot>
+       favorited a track
+       <slot name="date"></slot>
+     </div>
+     <div class="extra text">
+       <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link>
+        <template v-if="event.object.album">from album {{ event.object.album }}, by <em>{{ event.object.artist }}</em>
+        </template>
+        <template v-else>, by <em>{{ event.object.artist }}</em>
+        </template>
+
+      </div>
+   </div>
+ </div>
+
+</template>
+
+<script>
+
+export default {
+  props: ['event']
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>
diff --git a/front/src/components/activity/Listen.vue b/front/src/components/activity/Listen.vue
new file mode 100644
index 000000000..7c8ee8a69
--- /dev/null
+++ b/front/src/components/activity/Listen.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="event">
+   <div class="label">
+     <i class="orange sound icon"></i>
+   </div>
+   <div class="content">
+     <div class="summary">
+       <slot name="user"></slot>
+       listened to a track
+       <slot name="date"></slot>
+     </div>
+     <div class="extra text">
+       <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link>
+        <template v-if="event.object.album">from album {{ event.object.album }}, by <em>{{ event.object.artist }}</em>
+        </template>
+        <template v-else>, by <em>{{ event.object.artist }}</em>
+        </template>
+
+      </div>
+   </div>
+ </div>
+
+</template>
+
+<script>
+
+export default {
+  props: ['event']
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>