diff --git a/package.json b/package.json
index 7c38516..27e1628 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/tasks",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "description": "Basic tasks package",
   "main": "src/bulma/pages/tasks/Index.vue",
   "scripts": {
diff --git a/src/bulma/modules/task.js b/src/bulma/modules/task.js
new file mode 100644
index 0000000..67469ea
--- /dev/null
+++ b/src/bulma/modules/task.js
@@ -0,0 +1,14 @@
+const cssClass = (statuses, { status }) => {
+    switch (status) {
+        case parseInt(statuses.Finished):
+            return 'is-success';
+        case parseInt(statuses.Progress):
+            return 'is-warning';
+        case parseInt(statuses.New):
+            return 'is-info';
+        default:
+            return '';
+    }
+};
+
+export default cssClass;
diff --git a/src/bulma/pages/tasks/Index.vue b/src/bulma/pages/tasks/Index.vue
index a1b8a8c..302e497 100644
--- a/src/bulma/pages/tasks/Index.vue
+++ b/src/bulma/pages/tasks/Index.vue
@@ -44,6 +44,13 @@
                     </template>
                 </dropdown>
             </template>
+            <template #status="{ column, row }">
+                <span 
+                    class="tag is-table-tag "
+                    :class="cssClass(column.enum, row)">
+                    {{ column.enum._get(row.status) }}
+                </span>
+            </template>
             <template #reminder="{ row }">
                 <dropdown :triggers="['click']"
                     :auto-hide="false"
@@ -95,13 +102,6 @@
                     :user="row.allocatedTo"
                     v-else/>
             </template>
-            <template #completed="{ row }">
-                <div class="is-flex is-justify-content-center">
-                    <vue-switch class="is-medium"
-                        v-model="row.completed"
-                        @update:model-value="update(row.id, 'completed', row.completed)"/>
-                </div>
-            </template>
             <template #createdBy="{ row: { createdBy } }">
                 <avatar class="is-24x24"
                     :user="createdBy"/>
@@ -131,6 +131,7 @@ import { Dropdown } from 'v-tooltip';
 import { clickOutside } from '@enso-ui/directives';
 import Filters from './components/Filters.vue';
 import Flags from './components/Flags.vue';
+import cssClass from '../../modules/task';
 
 library.add(faClock, faInfoCircle, faCog);
 
@@ -159,7 +160,7 @@ export default {
         ready: false,
         filters: {
             tasks: {
-                completed: false,
+                status: 1,
                 flag: null,
                 allocated_to: null,
             },
@@ -205,6 +206,9 @@ export default {
                 }
             });
         },
+        cssClass(columnEnum, row) {
+            return cssClass(columnEnum, row);
+        }
     },
 };
 </script>
diff --git a/src/bulma/pages/tasks/Show.vue b/src/bulma/pages/tasks/Show.vue
new file mode 100644
index 0000000..c870c04
--- /dev/null
+++ b/src/bulma/pages/tasks/Show.vue
@@ -0,0 +1,172 @@
+<template>
+    <div v-if="task" class="containter m-auto">
+        <div class="columns mx-0 box">
+            <div class="column is-two-third-tablet px-5">
+                <div class="columns">
+                    <div class="column is-three-quarters is-size-7 pl-5">
+                        Updated {{ task.updatedAt }} | Created by
+                        <a>
+                            <strong>{{ task.createdBy.person.name }}
+                            </strong>
+                        </a>
+                    </div>
+                    <div class="column pt-0">
+                        <fa 
+                            :class="{ 'has-text-grey': !task.muted }" @click="notification"
+                            class="bell is-clickable is-pulled-right is-flex fa-2xl" icon="bell" />
+                    </div>
+                </div>
+                <div class="column">
+                    <h4 class="title is-4">
+                        {{ task.name }}
+                    </h4>
+                </div>
+                <div class="column">
+                    <div class="columns">
+                        <div class="column is-one-fifth">
+                            <div class="mt-3">Status</div>
+                            <div class="mt-4">From - To</div>
+                            <div class="mt-3">Flag</div>
+                            <div class="mt-3">Allocated To</div>
+                        </div>
+                        <div class="column is-two-fifth">
+                            <div class="mt-3">
+                                <span v-for="(status, id) in enums.statuses._all()">
+                                    <span class="tag is-table-tag"  :class="cssClass(enums.statuses, task)"
+                                        v-if="task.status == id">
+                                        {{ status }}
+                                    </span>
+                                </span>
+                            </div>
+                            <div class="mt-3">
+                                {{ task.from }} - {{ task.to }}
+                            </div>
+                            <div class="mt-3">
+                                <span v-for="(flag, id) in enums.flags._all()" class="icon"
+                                    :class="`has-text-${flag.toLowerCase()}`">
+                                    <fa v-if="id == task.flag" icon="flag" />
+                                </span>
+                            </div>
+                            <div class="mt-3">
+                                <figure class="is-flex is-align-items-center avatar">
+                                    <p class="image is-32x32 mr-2">
+                                        <img class="is-rounded" alt="avatar"
+                                            :src="route('core.avatars.show', task.allocatedTo.avatar.id)">
+                                    </p>
+                                    {{ task.allocatedTo.person.name }}
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                    <Divider />
+                    <div class="mt-5">
+                        <div>
+                            <strong>{{ i18n('Description') }}</strong>
+                        </div>
+                        <div class="my-4">
+                            {{ task.description }}
+                        </div>
+                    </div>
+                    <Divider />
+                    <div class="mt-5">
+                        <div>
+                            <strong>{{ i18n('Checklist') }} ({{ task.completedTaskChecklistItems }})</strong>
+                        </div>
+                        <div>
+                            <checklist-items :id="taskId" :taskChecklistItems="taskChecklistItems" @update="fetch();"
+                                type="task" ref="checklists" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column pt-0 is-one-third">
+                <comments 
+                    :id="taskId" 
+                    type="task" r
+                    ef="comments" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCloudDownloadAlt, faBell } from '@fortawesome/free-solid-svg-icons';
+import { hljs } from '@enso-ui/directives';
+import { mapState } from "vuex";
+import ChecklistItems from './components/checklists/ChecklistItems.vue';
+import cssClass from '../../modules/task';
+import Divider from '@enso-ui/divider';
+import Comments from './components/comments/Comments.vue';
+
+
+library.add(faCloudDownloadAlt, faBell);
+
+export default {
+    name: 'Show',
+
+    directives: { hljs },
+
+    components: {
+        Fa,
+        ChecklistItems,
+        Divider,
+        Comments
+    },
+
+    inject: ['errorHandler', 'http', 'i18n', 'route', 'toastr', 'routerErrorHandler'],
+
+    data: () => ({
+        task: null,
+        taskChecklistItems: [],
+
+    }),
+    computed: {
+        ...mapState(['meta', 'enums']),
+        taskId() {
+            return Number.parseInt(this.$route.params.task, 10);
+        },
+    },
+
+    created() {
+        this.fetch();
+    },
+
+    methods: {
+        fetch() {
+            this.http.get(this.route('tasks.show', this.$route.params.task))
+                .then(({ data }) => {
+                    this.task = data.task;
+                    this.taskChecklistItems = data.task.taskChecklistItems;
+                }).catch(this.errorHandler);
+        },
+        cssClass(columnEnum, row) {
+            return cssClass(columnEnum, row);
+        },
+        notification() {
+            this.http.patch(this.route('tasks.update', { 'task': this.task }),
+                { muted: !this.task.muted })
+                .then(({ data: { message } }) => {
+                    this.toastr.success(message);
+                    this.fetch()
+                }).catch(error => {
+                    if (error.response && error.response.status === 422) {
+                        this.toastr.warning(this.i18n(error.response.data.message));
+                    } else {
+                        this.errorHandler(error);
+                    }
+                });
+        }
+    },
+};
+</script>
+
+<style src="highlight.js/styles/atom-one-light.css">
+</style>
+
+<style lang="scss">
+.wrapper {
+    padding: 1.2em;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index b569642..0a3379c 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="columns is-centered is-multiline">
-        <div class="column is-narrow">
-            <enso-select-filter class="box raises-on-hover allocation-filter"
+        <div class="column is-narrow is-one-fifth">
+            <enso-select-filter class="box raises-on-hover"
                 v-model="filters.tasks.allocated_to"
                 source="administration.users.options"
                 label="person.name"
@@ -14,11 +14,12 @@
                 :options="flagOptions"
                 :name="i18n('Importance')"/>
         </div>
-        <div class="column is-narrow">
-            <boolean-filter class="box raises-on-hover"
-                v-model="filters.tasks.completed"
-                icons
-                :name="i18n('Completed')"/>
+        <div class="column is-narrow is-2">
+            <enso-select-filter
+                class="box raises-on-hover"
+                v-model="filters.tasks.status"
+                :options="enums.statuses._select()" 
+                :name="i18n('Status')"/>
         </div>
         <div class="column is-narrow">
             <enso-filter class="box raises-on-hover"
@@ -27,8 +28,10 @@
                 :options="overdueOptions"
                 :name="i18n('Overdue')"/>
         </div>
+    </div>
+    <div class="columns is-centered">
         <div class="column is-narrow">
-            <enso-date-filter class="box raises-on-hover"
+            <enso-date-filter class="box raises-on-hover" 
                 v-model:filter="params.dateFilter"
                 v-model:interval="intervals.tasks.reminder"/>
         </div>
@@ -42,6 +45,7 @@ import {
 } from '@enso-ui/filters/bulma';
 import { faFlag, faExclamation } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
+import { EnsoSelect } from '@enso-ui/select/bulma';
 
 library.add(faFlag, faExclamation);
 
@@ -49,7 +53,7 @@ export default {
     name: 'Filters',
 
     components: {
-        BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter,
+        BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter, EnsoSelect
     },
 
     inject: ['i18n'],
@@ -91,7 +95,4 @@ export default {
 </script>
 
 <style lang="scss">
-.allocation-filter {
-    width: 250px;
-}
 </style>
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
new file mode 100644
index 0000000..b2ed851
--- /dev/null
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
@@ -0,0 +1,174 @@
+<template>
+    <div 
+        @mouseover="display = true" 
+        @mouseleave="display = false">
+        <label class="checkbox" v-show="!editForm">
+            <input class="form-check-input mr-1" 
+                @change="updateStatus($event)" 
+                :checked="checklist.isCompleted"
+                type="checkbox" 
+                :value="isCompleted">
+        </label>
+        <span 
+            v-show="!editForm" 
+            class="checklistName" 
+            @click="edit(checklist);
+            editForm = true" 
+            :style="{ textDecoration: checklist.isCompleted ? 'line-through' : '' }">
+            {{ checklist.name }}
+        </span>
+        <div v-show="editForm" class="mt-3">
+            <input 
+                class="textarea" 
+                v-model="updateChecklist.name" 
+                rows="2" 
+                placeholder="Add new to-do">
+            <div class="mt-3">
+                <button class="button is-rounded 
+                    is-small is-bold mr-1 action" 
+                    @click="editForm = false">
+                    <span>
+                        {{ i18n('Cancel') }}
+                    </span>
+                    <span class="icon is-small">
+                        <fa icon="ban"/>
+                    </span>
+                </button>
+                <button 
+                    class="button is-rounded is-bold 
+                    is-small is-success action" 
+                    @click="update">
+                    <span>
+                        {{ i18n('Update') }}
+                    </span>
+                    <span class="icon">
+                        <fa icon="check"/>
+                    </span>
+                </button>
+            </div>
+        </div>
+        <span>
+            <button 
+                @click="empty(checklist)" 
+                class="ml-2 mt-1 delete is-small" 
+                v-show="display && !editForm"></button>
+        </span>
+    </div>
+
+</template>
+
+<script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { 
+    faCheck, faPencilAlt, faTimes, faGripLines 
+} from '@fortawesome/free-solid-svg-icons';
+import { mapState } from "vuex";
+
+library.add([
+    faCheck, faTimes, faPencilAlt, faGripLines
+]);
+
+export default {
+    name: 'Checklist Item',
+
+    components: { Fa },
+
+    inject: ['canAccess', 'http', 'i18n', 'route', 'toastr', 'errorHandler'],
+
+    emits: ['change-status'],
+
+    props: {
+        checklist: {
+            type: Object,
+            required: true,
+        },
+        createForm: {
+            type: Boolean,
+        },
+    },
+
+    watch: {
+        createForm() {
+            if (this.editForm) {
+                this.editForm = !this.createForm
+            }
+        },
+    },
+
+    data: () => ({
+        controls: false,
+        display: false,
+        editForm: false,
+        isCompleted: false,
+        updateChecklist: {
+            name: '',
+            task_id: '',
+            is_completed: false
+        },
+    }),
+    computed: {
+        ...mapState(['meta']),
+        collapsed() {
+            return !!this.checklist.isCompleted;
+        }
+    },
+    methods: {
+        updateStatus(e) {
+            const payload = {
+                name: this.checklist.name,
+                task_id: this.checklist.taskId,
+                order_index: this.checklist.orderIndex,
+                is_completed: e.target.checked
+            };
+
+            this.http.patch(this.route('tasks.checklistItems.update',
+                { 'checklistItem': this.checklist }), payload)
+                .then(({ data: { message } }) => {
+                    this.toastr.success(message);
+                    this.$parent.fetch()
+                }).catch(error => {
+                    if (error.response && error.response.status === 422) {
+                        this.toastr.warning(this.i18n(error.response.data.message));
+                    } else {
+                        this.errorHandler(error);
+                    }
+                });
+        },
+        empty(checklist) {
+            this.http.delete(this.route('tasks.checklistItems.destroy',
+                { 'checklistItem': checklist })).then(({ data }) => {
+                    this.toastr.success(data.message);
+                    this.$parent.fetch()
+                }).catch(this.errorHandler)
+        },
+        edit(checklist) {
+            this.$emit('change-status');
+            this.updateChecklist.name = checklist.name
+            this.updateChecklist.task_id = checklist.taskId
+            this.updateChecklist.is_completed = checklist.isCompleted
+        },
+        update() {
+            this.http.patch(this.route('tasks.checklistItems.update',
+                { 'checklistItem': this.checklist }),
+                this.updateChecklist)
+                .then(({ data: { message } }) => {
+                    this.editForm = false
+                    this.toastr.success(message);
+                    this.$parent.fetch()
+                }).catch(error => {
+                    if (error.response && error.response.status === 422) {
+                        this.toastr.warning(this.i18n(error.response.data.message));
+                    } else {
+                        this.errorHandler(error);
+                    }
+                });
+        },
+    }
+};
+</script>
+<style lang="scss">
+.delete:hover {
+    background: #cd4400;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
new file mode 100644
index 0000000..0c67e6a
--- /dev/null
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="checklists-wrapper">
+        <div class="is-multiline mt-3">
+            <div class="mt-2" 
+                v-for="checklist in filteredChecklists" 
+                :key="checklist.id">
+                <checklist-item 
+                    :id="id"
+                    @change-status="createForm = false" :checklist="checklist"
+                    :create-form="createForm" 
+                    ref="checklist"/>
+            </div>
+        </div>
+        <div v-show="createForm" class="mt-3">
+            <input 
+                class="textarea" 
+                v-model="checklist.name" 
+                rows="2" 
+                placeholder="Add new to-do">
+            <div class="mt-3">
+                <button
+                    class="button is-rounded
+                    is-small is-bold mr-1 action" 
+                    @click="createForm = false">
+                    <span>
+                        {{ i18n('Cancel') }}
+                    </span>
+                    <span class="icon is-small">
+                        <fa icon="ban"/>
+                    </span>
+                </button>
+                <button 
+                    class="button is-rounded
+                    is-small is-bold is-success action" 
+                    @click="create">
+                    <span>
+                        {{ i18n('Save') }}
+                    </span>
+                    <span class="icon">
+                        <fa icon="check"/>
+                    </span>
+                </button>
+            </div>
+        </div>
+        <div id="add-item" 
+            class="mt-5 is-size-6 is-align-items-center
+            is-clickable" 
+            @click="createForm = true;">
+            <span class="icon is-small">
+                <fa icon="plus"/>
+            </span>
+            Add an Item
+        </div>
+    </div>
+</template>
+
+<script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlus, faSync, faCheck } from '@fortawesome/free-solid-svg-icons';
+import ChecklistItem from './ChecklistItem.vue';
+
+library.add(faPlus, faSync, faCheck);
+
+export default {
+    name: 'Checklists Items',
+    components: {
+        Fa, ChecklistItem
+    },
+    inject: [
+        'canAccess', 'errorHandler', 'i18n', 'http', 'route',
+        'routerErrorHandler', 'toastr',
+    ],
+
+    props: {
+        id: {
+            type: Number,
+            required: true,
+        },
+        taskChecklistItems: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    emits: ['update'],
+
+    data: () => ({
+        loading: false,
+        path: null,
+        createForm: false,
+        checklist: {
+            name: '',
+            is_completed: false
+        },
+        checklistsValues: [],
+    }),
+
+    computed: {
+        filteredChecklists() {
+            return this.checklistsValues;
+        },
+        count() {
+            return this.checklistsValues.length;
+        },
+    },
+
+    watch: {
+        taskChecklistItems() {
+            this.checklistsValues = this.taskChecklistItems;
+        },
+    },
+
+    created() {
+        this.fetch()
+    },
+
+    methods: {
+        fetch() {
+            this.checklistsValues = this.taskChecklistItems
+            this.$emit('update');
+        },
+        create() {
+            this.http.post(this.route('tasks.checklistItems.store'),
+                { task_id: this.id, ...this.checklist })
+                .then(({ data: { message } }) => {
+                    this.fetch()
+                    this.checklist.name = ''
+                    this.createForm = false
+                    this.toastr.success(message)
+                })
+                .catch(this.errorHandler);
+        }
+    },
+};
+</script>
+<style>
+#add-item {
+    color: #d8d8d8;
+}
+
+#add-item:hover {
+    color: black;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/comments/Comment.vue b/src/bulma/pages/tasks/components/comments/Comment.vue
new file mode 100644
index 0000000..4bbcc9e
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Comment.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="box has-background-light p-3 raises-on-hover">
+        <article class="media"
+            @mouseover="controls = true"
+            @mouseleave="controls = !confirmation ? false : controls">
+            <figure class="media-left">
+                <p class="image is-32x32">
+                    <img class="is-rounded"
+                        alt="avatar"
+                        :src="route('core.avatars.show', comment.owner.avatar.id)">
+                </p>
+            </figure>
+            <div class="media-content">
+                <div class="mb-2"
+                    v-if="!isNew">
+                    <a>
+                        <strong>{{ comment.owner.person.name }}</strong>
+                    </a>
+                    <span class="has-text-muted ml-1"
+                        v-tooltip="dateFormat(commentedAt)"
+                        v-if="humanReadableDates">
+                        {{ timeFromNow(commentedAt) }} {{ i18n('ago') }}
+                    </span>
+                    <span class="has-text-muted ml-1"
+                        v-tooltip="`${timeFromNow(commentedAt)} ${i18n('ago')}`"
+                        v-else>
+                        {{ dateFormat(commentedAt) }}
+                    </span>
+                    <span v-if="comment.createdAt !== comment.updatedAt">
+                        &bull; {{ i18n('edited') }}
+                    </span>
+                    <div class="is-pulled-right is-flex"
+                        v-if="!isNew && !isEditing && controls">
+                        <a class="button is-naked is-small mr-1"
+                            @click="originalBody = comment.body;"
+                            v-if="comment.isEditable">
+                            <span class="icon is-small">
+                                <fa icon="pencil-alt"/>
+                            </span>
+                        </a>
+                        <confirmation placement="bottom-end"
+                            @confirm="$emit('delete')"
+                            @show="confirmation = true"
+                            @hide="confirmation = controls = false"
+                            v-if="comment.isDeletable">
+                            <a class="button is-naked is-small"
+                                @click="confirmation = true">
+                                <span class="icon is-small">
+                                    <fa icon="trash-alt"/>
+                                </span>
+                            </a>
+                        </confirmation>
+                    </div>
+                </div>
+                <div class="comment-body"
+                    v-html="comment.body"
+                    v-if="!isEditing && !isNew"/>
+                <div v-else>
+                    <inputor v-bind="$attrs"
+                         :comment="comment"/>
+                    <div class="mt-2 has-text-right">
+                        <a class="button is-rounded is-bold mr-1 is-small action"
+                            @click="isNew ? $emit('cancel-add') : cancelAdd()">
+                            <span>
+                                {{ i18n('Cancel') }}
+                            </span>
+                            <span class="icon is-small">
+                                <fa icon="ban"/>
+                            </span>
+                        </a>
+                        <a v-tooltip.right="{
+                                content: i18n('Shift + Enter to post'),
+                                delay: 800
+                            }"
+                            class="button is-rounded is-bold is-success is-small action"
+                            @click="isNew ? $emit('save') : update()">
+                            <span v-if="isNew">
+                                {{ i18n('Post') }}
+                            </span>
+                            <span v-else>
+                                {{ i18n('Update') }}
+                            </span>
+                            <span class="icon is-small">
+                                <fa icon="check"/>
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </article>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+    faPencilAlt, faTrashAlt, faCheck, faBan,
+} from '@fortawesome/free-solid-svg-icons';
+import Confirmation from '@enso-ui/confirmation/bulma';
+import format from '@enso-ui/ui/src/modules/plugins/date-fns/format';
+import formatDistance from '@enso-ui/ui/src/modules/plugins/date-fns/formatDistance';
+import Inputor from './Inputor.vue';
+
+library.add(faPencilAlt, faTrashAlt, faCheck, faBan);
+
+export default {
+    name: 'Comment',
+
+    components: { Fa, Inputor, Confirmation },
+
+    inject: ['i18n', 'route'],
+
+    props: {
+        comment: {
+            type: Object,
+            required: true,
+        },
+        humanReadableDates: {
+            type: Boolean,
+            default: true,
+        },
+        index: {
+            type: Number,
+            default: null,
+        },
+        isNew: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    emits: ['cancel-add', 'cancel-edit', 'delete', 'save'],
+
+    data: () => ({
+        controls: false,
+        confirmation: false,
+        originalBody: null,
+    }),
+
+    computed: {
+        ...mapState(['meta', 'user']),
+        isEditing() {
+            return this.originalBody !== null;
+        },
+        commentedAt() {
+            return this.comment.updatedAt || this.comment.createdAt;
+        },
+    },
+
+    methods: {
+        cancelAdd() {
+            this.comment.body = this.originalBody;
+            this.controls = false;
+            this.originalBody = null;
+            this.$emit('cancel-edit');
+        },
+        update() {
+            if (!this.comment.body.trim()) {
+                return;
+            }
+
+            this.controls = false;
+
+            if (this.comment.body === this.originalBody) {
+                this.originalBody = null;
+                return;
+            }
+
+            this.$emit('save');
+
+            this.originalBody = null;
+        },
+        timeFromNow(date) {
+            return formatDistance(date);
+        },
+        dateFormat(date) {
+            return format(date, `${this.meta.dateFormat} H:i`);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+    .media {
+        border-radius: inherit;
+        .comment-body {
+            word-break: break-all;
+        }
+
+        .media-content {
+            overflow: unset;
+        }
+    }
+</style>
diff --git a/src/bulma/pages/tasks/components/comments/Comments.vue b/src/bulma/pages/tasks/components/comments/Comments.vue
new file mode 100644
index 0000000..9363d5c
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Comments.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="comments-wrapper">
+        <div class="field is-grouped">
+            <slot name="controls"
+                  :create="create"
+                  :internal-query="internalQuery"
+                  :fetch="fetch">
+                <p class="control">
+                    <a class="button is-rounded is-small is-bold is-info"
+                       @click="create()">
+                        <span v-if="!compact">
+                            {{ i18n('Add') }}
+                        </span>
+                        <span class="icon">
+                            <fa icon="plus"/>
+                        </span>
+                    </a>
+                </p>
+                <p class="control has-icons-left has-icons-right is-expanded">
+                    <input v-model="internalQuery"
+                           class="input is-rounded is-small is-expanded"
+                           type="text"
+                           :placeholder="i18n('Filter')">
+                    <span class="icon is-small is-left">
+                        <fa icon="search"/>
+                    </span>
+                    <span v-if="internalQuery"
+                          class="icon is-small is-right clear-button"
+                          @click="internalQuery = ''">
+                        <a class="delete is-small"/>
+                    </span>
+                </p>
+                <p class="control">
+                    <a class="button is-rounded is-small is-bold ml-2"
+                       @click="fetch()">
+                        <span v-if="!compact">
+                            {{ i18n('Reload') }}
+                        </span>
+                        <span class="icon">
+                            <fa icon="sync"/>
+                        </span>
+                    </a>
+                </p>
+            </slot>
+        </div>
+        <div class="comments p-1">
+            <comment v-if="comment"
+                     :id="id"
+                     is-new
+                     :comment="comment"
+                     :index="-1"
+                     @cancel-add="comment = null"
+                     @save="add"/>
+            <comment v-for="(filteredComment, index) in filteredComments"
+                     :key="filteredComment.id"
+                     :comment="filteredComment"
+                     :index="index"
+                     :human-readable-dates="humanReadableDates"
+                     @save="update(filteredComment)"
+                     @delete="destroy(index)"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlus, faSync, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { mapState } from 'vuex';
+import Comment from './Comment.vue';
+
+library.add(faPlus, faSync, faSearch);
+
+export default {
+    name: 'Comments',
+
+    components: { Fa, Comment },
+
+    inject: ['errorHandler', 'http', 'i18n', 'route'],
+
+    props: {
+        id: {
+            type: [String, Number],
+            required: true,
+        },
+        query: {
+            type: String,
+            default: null,
+        },
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    emits: ['update'],
+
+    data: v => ({
+        comments: [],
+        comment: null,
+        loading: false,
+        internalQuery: '',
+        path: v.$route.path,
+        diffForHumansDate: null,
+    }),
+
+    computed: {
+        ...mapState(['user']),
+        filteredComments() {
+            const query = this.internalQuery.toLowerCase();
+
+            return query
+                ? this.comments.filter(({ body, owner }) => body.toLowerCase().indexOf(query) > -1
+                    || owner.person.name.toLowerCase().indexOf(query) > -1)
+                : this.comments;
+        },
+        count() {
+            return this.filteredComments.length;
+        },
+        params() {
+            return {
+                task_id: this.id,
+            };
+        },
+    },
+
+    watch: {
+        query() {
+            this.internalQuery = this.query;
+        },
+    },
+
+    created() {
+        this.fetch();
+    },
+
+    methods: {
+        fetch() {
+            this.loading = true;
+
+            this.http.get(
+                this.route('tasks.comments.index', this.id),
+                { params: this.params },
+            ).then(({ data }) => {
+                this.comments = data.data;
+                this.humanReadableDates = data.humanReadableDates;
+                this.loading = false;
+                this.$emit('update');
+            }).catch(this.errorHandler);
+        },
+
+        factory() {
+            return {
+                body: '',
+                owner: this.user,
+            };
+        },
+        create() {
+            if (this.comment) {
+                return;
+            }
+
+            this.comment = this.factory();
+        },
+        add() {
+            if (!this.comment.body.trim()) {
+                return;
+            }
+
+            this.loading = true;
+
+            this.http.post(
+                this.route('tasks.comments.store', this.id),
+                this.postParams(),
+            ).then(({ data }) => {
+                this.comments.unshift(data);
+                this.comment = null;
+                this.$emit('update');
+                this.loading = false;
+            }).catch(this.errorHandler);
+        },
+        postParams() {
+            return {
+                body: this.comment.body,
+                path: this.path,
+                ...this.params,
+            };
+        },
+        update(comment) {
+            comment.path = this.path;
+            this.loading = true;
+
+            this.http.patch(
+                this.route('tasks.comments.update', comment.id),
+                comment,
+            ).then(({ data }) => {
+                Object.assign(comment, data);
+                this.loading = false;
+            }).catch(this.errorHandler);
+        },
+        destroy(index) {
+            this.loading = true;
+
+            this.http.delete(this.route('tasks.comments.destroy', this.comments[index].id))
+                .then(() => {
+                    this.comments.splice(index, 1);
+                    this.$emit('update');
+                    this.loading = false;
+                }).catch(this.errorHandler);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.comments-wrapper .comments {
+    max-height: 500px;
+    overflow-y: auto;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/comments/Inputor.vue b/src/bulma/pages/tasks/components/comments/Inputor.vue
new file mode 100644
index 0000000..a42146b
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Inputor.vue
@@ -0,0 +1,243 @@
+<template>
+    <fade>
+        <div class="atwho-wrapper"
+            @keyup="filter"
+            @keydown.up="onUp"
+            @keydown.down="onDown"
+            @keydown.enter="onEnter">
+            <div v-show="items.length"
+                v-click-outside="hide"
+                class="atwho dropdown-menu">
+                <div class="dropdown-content">
+                    <a v-for="(item, index) in items"
+                        :key="index"
+                        :class="['dropdown-item', { 'is-active': index === position}]"
+                        @mousemove="position = index"
+                        @click="selectItem">
+                        <article class="media">
+                            <div class="media-left">
+                                <figure class="image is-24x24">
+                                    <img class="is-rounded"
+                                        :src="'/api/core/avatars/' + item.avatar.id">
+                                </figure>
+                            </div>
+                            <div class="media-content">
+                                <div class="content"
+                                    v-html="highlight(item.person.name)"/>
+                            </div>
+                        </article>
+                    </a>
+                </div>
+            </div>
+            <div class="field">
+                <p class="control">
+                    <textarea v-model="comment.body"
+                        v-focus
+                        class="textarea vue-comment"
+                        :placeholder="i18n('Type a new comment')"
+                        @keyup.shift.enter="$emit('save')"/>
+                </p>
+            </div>
+        </div>
+    </fade>
+</template>
+
+<script>
+import { Fade } from '@enso-ui/transitions';
+import { mapState } from 'vuex';
+import debounce from 'lodash/debounce';
+import getCaretCoordinates from 'textarea-caret';
+import { focus, clickOutside } from '@enso-ui/directives';
+
+export default {
+    name: 'Inputor',
+
+    directives: { focus, clickOutside },
+
+    components: { Fade },
+
+    inject: ['errorHandler', 'http', 'i18n', 'route'],
+
+    props: {
+        comment: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    emits: ['save'],
+
+    data: () => ({
+        items: [],
+        position: null,
+        query: null,
+    }),
+
+    computed: {
+        ...mapState(['user']),
+        hasText() {
+            return this.comment.body.trim();
+        },
+        atwhoContainer() {
+            return this.$el.querySelector('.atwho');
+        },
+        textarea() {
+            return this.$el.querySelector('textarea');
+        },
+    },
+
+    watch: {
+        query() {
+            if (this.query !== null) {
+                this.fetch();
+            }
+        },
+    },
+
+    created() {
+        this.fetch = debounce(this.fetch, 200);
+    },
+
+    methods: {
+        fetch() {
+            this.http.get(this.route('core.comments.users'), {
+                params: { query: this.query, paginate: 6 },
+            }).then(({ data }) => {
+                this.items = data
+                    .filter(({ id }) => id !== this.user.id);
+
+                if (this.items.length) {
+                    this.position = 0;
+                }
+            }).catch(this.errorHandler);
+        },
+        filter(event) {
+            const arg = this.comment.body
+                .substr(0, this.textarea.selectionEnd)
+                .split(' ')
+                .pop();
+
+            const showAtwho = arg[0] === '@'
+                && (this.comment.body.length === this.textarea.selectionEnd
+                    || this.comment.body[this.textarea.selectionEnd] === ' ');
+
+            if (!showAtwho) {
+                this.hide();
+            }
+
+            if (showAtwho) {
+                this.query = arg.substring(1);
+                this.atwho(event);
+            }
+        },
+        atwho(event) {
+            const caret = getCaretCoordinates(event.target, event.target.selectionEnd);
+            this.atwhoContainer.style.top = `${caret.top + 25}px`;
+            this.atwhoContainer.style.left = `${caret.left - 15}px`;
+        },
+        onUp(event) {
+            if (this.position > 0) {
+                this.position--;
+                event.preventDefault();
+            }
+        },
+        onDown(event) {
+            if (this.position < this.items.length - 1) {
+                this.position++;
+                event.preventDefault();
+            }
+        },
+        onEnter(event) {
+            if (this.position !== null) {
+                this.selectItem();
+                event.preventDefault();
+            }
+        },
+        selectItem() {
+            const { search, replace } = this.transform();
+
+            this.comment.body = this.comment.body.replace(search, replace);
+
+            this.tagUser();
+            this.hide();
+
+            this.$nextTick(() => {
+                this.textarea.selectionEnd = replace.length;
+            });
+        },
+        hide() {
+            this.items = [];
+            this.position = null;
+            this.query = null;
+        },
+        transform() {
+            const item = this.items[this.position];
+            const cursorPosition = this.textarea.selectionEnd;
+            let search = this.comment.body.substr(0, cursorPosition);
+            const atPosition = search.lastIndexOf('@');
+
+            if (this.comment.body[search.length] === ' ') {
+                search += ' ';
+            }
+
+            let replace = search.substr(0, atPosition + 1) + item.person.name;
+            replace += ' ';
+
+            return { search, replace };
+        },
+        highlight(item) {
+            return item
+                .replace(new RegExp(`(${this.query})`, 'gi'), '<b>$1</b>');
+        },
+        tagUser() {
+            const user = this.items[this.position];
+
+            this.comment.taggedUsers.push({
+                id: user.id,
+                name: user.person.name,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+    .atwho-wrapper {
+        position: relative;
+
+        .dropdown-menu {
+            display: unset;
+            top: unset;
+            left: unset;
+            min-width: unset;
+            padding-top: unset;
+
+            .dropdown-content {
+                width: fit-content;
+                padding: 0.25rem 0;
+
+                a.dropdown-item {
+                    padding: .1rem 0.5rem;
+                }
+
+                .media {
+                    border-top: none;
+                    padding-top: 0;
+
+                    .media-left {
+                        margin-right: 0.5rem;
+                    }
+                }
+            }
+        }
+
+        textarea.vue-comment {
+            resize: none;
+            word-wrap: break-word;
+
+            &:not([rows]) {
+                min-height: 90px;
+            }
+        }
+    }
+</style>
diff --git a/src/bulma/routes/tasks/show.js b/src/bulma/routes/tasks/show.js
new file mode 100644
index 0000000..b9301d5
--- /dev/null
+++ b/src/bulma/routes/tasks/show.js
@@ -0,0 +1,11 @@
+const TaskShow = () => import('../../../../src/bulma/pages/tasks/Show.vue');
+
+export default {
+    name: 'tasks.show',
+    path: ':task',
+    component: TaskShow,
+    meta: {
+        breadcrumb: 'show',
+        title: 'Show Task',
+    },
+};