diff --git a/website/client/components/task.vue b/website/client/components/task.vue
new file mode 100644
index 0000000000..0f5ca1451e
--- /dev/null
+++ b/website/client/components/task.vue
@@ -0,0 +1,35 @@
+<template lang="pug">
+li
+  ul
+    li 
+      strong {{task.text}}
+    li(v-if="task.type === 'habit'") up: {{task.up}}, down: {{task.down}}
+    li value: {{task.value}}
+    template(v-if="task.type === 'daily' || task.type === 'todo'")
+      li completed: {{task.completed}}
+      li
+        span checklist
+        ul 
+          li(v-for="checklist in task.checklist") {{checklist.text}}
+    template(v-if="task.type === 'daily'") 
+      li streak: {{task.streak}}
+      li repeat: {{task.repeat}}
+    li(v-if="task.type === 'todo'") due date: {{task.date}}
+    li attribute {{task.attribute}}
+    li difficulty {{task.priority}}
+    li tags {{taskTags}}
+</template>
+
+<script>
+export default {
+  props: ['task'],
+  computed: {
+    taskTags () {
+      let taskTags = this.task.tags;
+      return this.$store.state.user.tags
+        .filter(tag => taskTags.indexOf(tag.id) !== -1)
+        .map(tag => tag.name);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/website/client/components/userTasks.vue b/website/client/components/userTasks.vue
index 7474def469..2b8bb58745 100644
--- a/website/client/components/userTasks.vue
+++ b/website/client/components/userTasks.vue
@@ -1,18 +1,19 @@
 <template lang="pug">
 .row
-  .sixteen.wide.column
-      p You have {{tasksCount}} tasks!
   .four.wide.column(v-for="taskType in tasksTypes")
-    h3 {{taskType}}s ()
+    h3 {{taskType}}s
     ul
-      li(v-for="task in tasks", v-if="task.type === taskType", :key="task.id")
-        span {{task.text}}
+      task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
 </template>
 
 <script>
+import Task from './task';
 import { mapState } from '../store';
 
 export default {
+  components: {
+    Task,
+  },
   data () {
     return {
       tasksTypes: ['habit', 'daily', 'todo', 'reward'],
@@ -20,9 +21,6 @@ export default {
   },
   computed: {
     ...mapState(['tasks']),
-    ...mapState({
-      tasksCount: (state) => state.tasks.length,
-    }),
   },
 };
 </script>
\ No newline at end of file