diff --git a/website/client/components/chat/chatCard.vue b/website/client/components/chat/chatCard.vue
index f588ac8a5f..df3d902097 100644
--- a/website/client/components/chat/chatCard.vue
+++ b/website/client/components/chat/chatCard.vue
@@ -18,11 +18,9 @@ div
         .svg-icon(v-html="icons.like")
         span(v-if='!msg.likes[user._id]') {{ $t('like') }}
         span(v-if='msg.likes[user._id]') {{ $t('liked') }}
-      // @TODO make copyAsTodo work in Tavern, guilds, party (inbox can be done later)
-        span.action(v-if='!inbox', @click='copyAsTodo(msg)')
-          .svg-icon(v-html="icons.copy")
-          | {{$t('copyAsTodo')}}
-          // @TODO make copyAsTodo work in the inbox
+      span.action(v-if='!inbox', @click='copyAsTodo(msg)')
+        .svg-icon(v-html="icons.copy")
+        | {{$t('copyAsTodo')}}
       span.action(v-if='!inbox && user.flags.communityGuidelinesAccepted && msg.uuid !== "system"', @click='report(msg)')
         .svg-icon(v-html="icons.report")
         | {{$t('report')}}
@@ -140,7 +138,6 @@ export default {
   mixins: [styleHelper],
   data () {
     return {
-      copyingMessage: {},
       icons: Object.freeze({
         like: likeIcon,
         copy: copyIcon,
@@ -241,9 +238,7 @@ export default {
       this.$emit('messaged-liked', message);
     },
     copyAsTodo (message) {
-      // @TODO: Move to Habitica Event
-      this.copyingMessage = message;
-      this.$root.$emit('bv::show::modal', 'copyAsTodo');
+      this.$root.$emit('habitica::copy-as-todo', message);
     },
     async report () {
       this.$root.$emit('habitica::report-chat', {
diff --git a/website/client/components/chat/copyAsTodoModal.vue b/website/client/components/chat/copyAsTodoModal.vue
index 9aff58475f..a3e7649f4b 100644
--- a/website/client/components/chat/copyAsTodoModal.vue
+++ b/website/client/components/chat/copyAsTodoModal.vue
@@ -1,64 +1,66 @@
 <template lang="pug">
   b-modal#copyAsTodo(:title="$t('copyMessageAsToDo')", :hide-footer="true", size='md')
     .form-group
-      input.form-control(type='text', v-model='text')
+      input.form-control(type='text', v-model='task.text')
     .form-group
-      textarea.form-control(rows='5', v-model='notes' focus-element='true')
-
+      textarea.form-control(rows='5', v-model='task.notes' focus-element='true')
     hr
-
-    // @TODO: Implement when tasks are done
-    //div.task-column.preview
-      div(v-init='popoverOpen = false', class='task todo uncompleted color-neutral', popover-trigger='mouseenter', data-popover-html="{{popoverOpen ? '' : notes | markdown}}", popover-placement="top")
-        .task-meta-controls
-          span(v-if='!obj._locked')
-            span.task-notes(v-show='notes', @click='popoverOpen = !popoverOpen', popover-trigger='click', data-popover-html="{{notes | markdown}}", popover-placement="top")
-              span.glyphicon.glyphicon-comment
-              | &nbsp;
-
-        div.task-text
-          div(v-markdown='text', target='_blank')
-
+    task(v-if='task._id', :isUser="isUser", :task="task")
     .modal-footer
       button.btn.btn-secondary(@click='close()') {{ $t('close') }}
       button.btn.btn-primary(@click='saveTodo()') {{ $t('submit') }}
 </template>
 
 <script>
+import { mapActions } from 'client/libs/store';
 import markdownDirective from 'client/directives/markdown';
+import notificationsMixin from 'client/mixins/notifications';
+import Task from 'client/components/tasks/task';
+
+import taskDefaults from 'common/script/libs/taskDefaults';
+
+const baseUrl = 'https://habitica.com';
 
 export default {
   directives: {
     markdown: markdownDirective,
   },
+  components: {
+    Task,
+  },
+  mixins: [notificationsMixin],
   props: ['copyingMessage', 'groupName', 'groupId'],
   data () {
     return {
-      text: '',
-      notes: '',
+      isUser: true,
+      task: {},
     };
   },
-  watch: {
-    copyingMessage () {
-      this.text = this.copyingMessage.text;
-      let baseUrl = 'https://habitica.com';
-      this.notes = `[${this.copyingMessage.user}](${baseUrl}/static/home/#?memberId=${this.copyingMessage.uuid}) wrote in [${this.groupName}](${baseUrl}/groups/guild/${this.groupId})`;
-    },
+  mounted () {
+    this.$root.$on('habitica::copy-as-todo', message => {
+      const notes = `[${message.user}](${baseUrl}/static/home/#?memberId=${message.uuid}) wrote in [${this.groupName}](${baseUrl}/groups/guild/${this.groupId})`;
+      const newTask = {
+        text: message.text,
+        type: 'todo',
+        notes,
+      };
+      this.task = taskDefaults(newTask);
+      this.$root.$emit('bv::show::modal', 'copyAsTodo');
+    });
+  },
+  destroyed () {
+    this.$root.$off('habitica::copy-as-todo');
   },
   methods: {
+    ...mapActions({
+      createTask: 'tasks:create',
+    }),
     close () {
       this.$root.$emit('bv::hide::modal', 'copyAsTodo');
     },
     saveTodo () {
-      // let newTask = {
-      //   text: this.text,
-      //   type: 'todo',
-      //   notes: this.notes,
-      // };
-
-      //  @TODO: Add after tasks: User.addTask({body:newTask});
-      // @TODO: Notification.text(window.env.t('messageAddedAsToDo'));
-
+      this.createTask(this.task);
+      this.text(this.$t('messageAddedAsToDo'));
       this.$root.$emit('bv::hide::modal', 'copyAsTodo');
     },
   },