diff --git a/test/api/unit/models/group_tasks.test.js b/test/api/unit/models/group_tasks.test.js
index 848b4b0792..1c60fa947b 100644
--- a/test/api/unit/models/group_tasks.test.js
+++ b/test/api/unit/models/group_tasks.test.js
@@ -235,15 +235,16 @@ describe('Group Task Methods', () => {
         });
       });
 
-      it('removes an assigned task and unlinks assignees', async () => {
+      it('removes assigned tasks when master task is deleted', async () => {
         await guild.syncTask(task, leader);
         await guild.removeTask(task);
 
         const updatedLeader = await User.findOne({ _id: leader._id });
-        const updatedLeadersTasks = await Tasks.Task.find({ _id: { $in: updatedLeader.tasksOrder[`${taskType}s`] } });
+        const updatedLeadersTasks = await Tasks.Task.find({ userId: leader._id, type: taskType });
         const syncedTask = find(updatedLeadersTasks, findLinkedTask);
 
-        expect(syncedTask.group.broken).to.equal('TASK_DELETED');
+        expect(updatedLeader.tasksOrder[`${taskType}s`]).to.not.include(task._id);
+        expect(syncedTask).to.not.exist;
       });
 
       it('unlinks and deletes group tasks for a user when remove-all is specified', async () => {
diff --git a/test/api/v3/integration/groups/POST-group_remove_manager.test.js b/test/api/v3/integration/groups/POST-group_remove_manager.test.js
index e8cae4ab29..6c5d4cee9f 100644
--- a/test/api/v3/integration/groups/POST-group_remove_manager.test.js
+++ b/test/api/v3/integration/groups/POST-group_remove_manager.test.js
@@ -75,12 +75,7 @@ describe('POST /group/:groupId/remove-manager', () => {
     await nonLeader.post(`/tasks/${task._id}/assign/${nonManager._id}`);
     const memberTasks = await nonManager.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(nonManager.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await nonManager.post(`/tasks/${syncedTask._id}/score/up`);
 
     const updatedGroup = await leader.post(`/groups/${groupToUpdate._id}/remove-manager`, {
       managerId: nonLeader._id,
diff --git a/test/api/v3/integration/tasks/groups/DELETE-group_tasks_id.test.js b/test/api/v3/integration/tasks/groups/DELETE-group_tasks_id.test.js
index 59dba9f5ed..73828accdc 100644
--- a/test/api/v3/integration/tasks/groups/DELETE-group_tasks_id.test.js
+++ b/test/api/v3/integration/tasks/groups/DELETE-group_tasks_id.test.js
@@ -73,12 +73,7 @@ describe('Groups DELETE /tasks/:id', () => {
     });
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
 
     await user.sync();
     await member2.sync();
@@ -96,16 +91,16 @@ describe('Groups DELETE /tasks/:id', () => {
     expect(member2.notifications.length).to.equal(1);
   });
 
-  it('unlinks assigned user', async () => {
+  it('deletes task from assigned user', async () => {
     await user.del(`/tasks/${task._id}`);
 
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
 
-    expect(syncedTask.group.broken).to.equal('TASK_DELETED');
+    expect(syncedTask).to.not.exist;
   });
 
-  it('unlinks all assigned users', async () => {
+  it('deletes task from all assigned users', async () => {
     await user.del(`/tasks/${task._id}`);
 
     const memberTasks = await member.get('/tasks/user');
@@ -114,8 +109,8 @@ describe('Groups DELETE /tasks/:id', () => {
     const member2Tasks = await member2.get('/tasks/user');
     const member2SyncedTask = find(member2Tasks, findAssignedTask);
 
-    expect(syncedTask.group.broken).to.equal('TASK_DELETED');
-    expect(member2SyncedTask.group.broken).to.equal('TASK_DELETED');
+    expect(syncedTask).to.not.exist;
+    expect(member2SyncedTask).to.not.exist;
   });
 
   it('prevents a user from deleting a task they are assigned to', async () => {
@@ -130,22 +125,6 @@ describe('Groups DELETE /tasks/:id', () => {
       });
   });
 
-  it('allows a user to delete a broken task', async () => {
-    const memberTasks = await member.get('/tasks/user');
-    const syncedTask = find(memberTasks, findAssignedTask);
-
-    await user.del(`/tasks/${task._id}`);
-
-    await member.del(`/tasks/${syncedTask._id}`);
-
-    await expect(member.get(`/tasks/${syncedTask._id}`))
-      .to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: 'Task not found.',
-      });
-  });
-
   it('allows a user to delete a task after leaving a group', async () => {
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
diff --git a/test/api/v3/integration/tasks/groups/POST-group_tasks_id_approve_userId.test.js b/test/api/v3/integration/tasks/groups/POST-group_tasks_id_approve_userId.test.js
index 599086e463..1d23e5f85c 100644
--- a/test/api/v3/integration/tasks/groups/POST-group_tasks_id_approve_userId.test.js
+++ b/test/api/v3/integration/tasks/groups/POST-group_tasks_id_approve_userId.test.js
@@ -58,22 +58,14 @@ describe('POST /tasks/:id/approve/:userId', () => {
     let memberTasks = await member.get('/tasks/user');
     let syncedTask = find(memberTasks, findAssignedTask);
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await user.post(`/tasks/${task._id}/approve/${member._id}`);
 
     await member.sync();
 
-    expect(member.notifications.length).to.equal(3);
+    expect(member.notifications.length).to.equal(2);
     expect(member.notifications[1].type).to.equal('GROUP_TASK_APPROVED');
     expect(member.notifications[1].data.message).to.equal(t('yourTaskHasBeenApproved', { taskText: task.text }));
-    expect(member.notifications[2].type).to.equal('SCORED_TASK');
-    expect(member.notifications[2].data.message).to.equal(t('yourTaskHasBeenApproved', { taskText: task.text }));
 
     memberTasks = await member.get('/tasks/user');
     syncedTask = find(memberTasks, findAssignedTask);
@@ -93,21 +85,13 @@ describe('POST /tasks/:id/approve/:userId', () => {
     let memberTasks = await member.get('/tasks/user');
     let syncedTask = find(memberTasks, findAssignedTask);
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await member2.post(`/tasks/${task._id}/approve/${member._id}`);
     await member.sync();
 
-    expect(member.notifications.length).to.equal(3);
+    expect(member.notifications.length).to.equal(2);
     expect(member.notifications[1].type).to.equal('GROUP_TASK_APPROVED');
     expect(member.notifications[1].data.message).to.equal(t('yourTaskHasBeenApproved', { taskText: task.text }));
-    expect(member.notifications[2].type).to.equal('SCORED_TASK');
-    expect(member.notifications[2].data.message).to.equal(t('yourTaskHasBeenApproved', { taskText: task.text }));
 
     memberTasks = await member.get('/tasks/user');
     syncedTask = find(memberTasks, findAssignedTask);
@@ -125,12 +109,7 @@ describe('POST /tasks/:id/approve/:userId', () => {
     await member2.post(`/tasks/${task._id}/assign/${member._id}`);
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
 
     await user.sync();
     await member2.sync();
@@ -157,14 +136,9 @@ describe('POST /tasks/:id/approve/:userId', () => {
 
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await member2.post(`/tasks/${task._id}/approve/${member._id}`);
+
     await expect(user.post(`/tasks/${task._id}/approve/${member._id}`))
       .to.eventually.be.rejected.and.to.eql({
         code: 401,
@@ -197,13 +171,7 @@ describe('POST /tasks/:id/approve/:userId', () => {
 
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await user.post(`/tasks/${sharedCompletionTask._id}/approve/${member._id}`);
 
     const groupTasks = await user.get(`/tasks/group/${guild._id}?type=completedTodos`);
@@ -226,13 +194,7 @@ describe('POST /tasks/:id/approve/:userId', () => {
 
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await user.post(`/tasks/${sharedCompletionTask._id}/approve/${member._id}`);
 
     const member2Tasks = await member2.get('/tasks/user');
@@ -258,13 +220,7 @@ describe('POST /tasks/:id/approve/:userId', () => {
 
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await user.post(`/tasks/${sharedCompletionTask._id}/approve/${member._id}`);
 
     const groupTasks = await user.get(`/tasks/group/${guild._id}`);
@@ -287,21 +243,10 @@ describe('POST /tasks/:id/approve/:userId', () => {
 
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     const member2Tasks = await member2.get('/tasks/user');
     const member2SyncedTask = find(member2Tasks, findAssignedTask);
-    await expect(member2.post(`/tasks/${member2SyncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member2.post(`/tasks/${member2SyncedTask._id}/score/up`);
 
     await user.post(`/tasks/${sharedCompletionTask._id}/approve/${member._id}`);
     await user.post(`/tasks/${sharedCompletionTask._id}/approve/${member2._id}`);
diff --git a/test/api/v3/integration/tasks/groups/POST-group_tasks_id_needs-work_userId.test.js b/test/api/v3/integration/tasks/groups/POST-group_tasks_id_needs-work_userId.test.js
index 91026baeae..8472bc03aa 100644
--- a/test/api/v3/integration/tasks/groups/POST-group_tasks_id_needs-work_userId.test.js
+++ b/test/api/v3/integration/tasks/groups/POST-group_tasks_id_needs-work_userId.test.js
@@ -61,13 +61,7 @@ describe('POST /tasks/:id/needs-work/:userId', () => {
     let syncedTask = find(memberTasks, findAssignedTask);
 
     // score task to require approval
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await user.post(`/tasks/${task._id}/needs-work/${member._id}`);
 
     [memberTasks] = await Promise.all([member.get('/tasks/user'), member.sync()]);
@@ -114,12 +108,7 @@ describe('POST /tasks/:id/needs-work/:userId', () => {
     let syncedTask = find(memberTasks, findAssignedTask);
 
     // score task to require approval
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
 
     const initialNotifications = member.notifications.length;
 
@@ -172,13 +161,7 @@ describe('POST /tasks/:id/needs-work/:userId', () => {
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
-
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
     await member2.post(`/tasks/${task._id}/approve/${member._id}`);
     await expect(user.post(`/tasks/${task._id}/needs-work/${member._id}`))
       .to.eventually.be.rejected.and.to.eql({
diff --git a/test/api/v3/integration/tasks/groups/POST-group_tasks_id_score_direction.test.js b/test/api/v3/integration/tasks/groups/POST-group_tasks_id_score_direction.test.js
index 80710c701b..810ad517d1 100644
--- a/test/api/v3/integration/tasks/groups/POST-group_tasks_id_score_direction.test.js
+++ b/test/api/v3/integration/tasks/groups/POST-group_tasks_id_score_direction.test.js
@@ -44,12 +44,11 @@ describe('POST /tasks/:id/score/:direction', () => {
     const syncedTask = find(memberTasks, findAssignedTask);
     const direction = 'up';
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/${direction}`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    const response = await member.post(`/tasks/${syncedTask._id}/score/${direction}`);
+
+    expect(response.data.approvalRequested).to.equal(true);
+    expect(response.message).to.equal(t('taskApprovalHasBeenRequested'));
+
     const updatedTask = await member.get(`/tasks/${syncedTask._id}`);
 
     await user.sync();
@@ -76,12 +75,7 @@ describe('POST /tasks/:id/score/:direction', () => {
     const syncedTask = find(memberTasks, findAssignedTask);
     const direction = 'up';
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/${direction}`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member.post(`/tasks/${syncedTask._id}/score/${direction}`);
     const updatedTask = await member.get(`/tasks/${syncedTask._id}`);
     await user.sync();
     await member2.sync();
@@ -111,12 +105,7 @@ describe('POST /tasks/:id/score/:direction', () => {
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
 
     await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
       .to.eventually.be.rejected.and.eql({
@@ -130,12 +119,7 @@ describe('POST /tasks/:id/score/:direction', () => {
     const memberTasks = await member.get('/tasks/user');
     const syncedTask = find(memberTasks, findAssignedTask);
 
-    await expect(member.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    await member.post(`/tasks/${syncedTask._id}/score/up`);
 
     await user.post(`/tasks/${task._id}/approve/${member._id}`);
 
diff --git a/test/api/v3/integration/tasks/groups/PUT-group_task_id.test.js b/test/api/v3/integration/tasks/groups/PUT-group_task_id.test.js
index 45443d4f06..74c76475a2 100644
--- a/test/api/v3/integration/tasks/groups/PUT-group_task_id.test.js
+++ b/test/api/v3/integration/tasks/groups/PUT-group_task_id.test.js
@@ -71,12 +71,10 @@ describe('PUT /tasks/:id', () => {
     const syncedTask = find(memberTasks, memberTask => memberTask.group.taskId === habit._id);
 
     // score up to trigger approval
-    await expect(member2.post(`/tasks/${syncedTask._id}/score/up`))
-      .to.eventually.be.rejected.and.to.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('taskApprovalHasBeenRequested'),
-      });
+    const response = await member2.post(`/tasks/${syncedTask._id}/score/up`);
+
+    expect(response.data.approvalRequested).to.equal(true);
+    expect(response.message).to.equal(t('taskApprovalHasBeenRequested'));
   });
 
   it('member updates a group task value - not allowed', async () => {
diff --git a/website/client/config/storybook/config.js b/website/client/config/storybook/config.js
index 01bba95033..fb3957a25e 100644
--- a/website/client/config/storybook/config.js
+++ b/website/client/config/storybook/config.js
@@ -1,6 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { configure } from '@storybook/vue';
+import './margin.css';
 import '../../src/assets/scss/index.scss';
+import '../../src/assets/scss/spacing.scss';
 import '../../src/assets/css/sprites.css';
 
 import '../../src/assets/css/sprites/spritesmith-main-0.css';
diff --git a/website/client/config/storybook/margin.css b/website/client/config/storybook/margin.css
new file mode 100644
index 0000000000..eaad293c27
--- /dev/null
+++ b/website/client/config/storybook/margin.css
@@ -0,0 +1,13 @@
+.background {
+    background: teal;
+    display: inline-block;
+}
+
+.content {
+    color: white;
+    background: grey;
+}
+
+.inline-block {
+    display: inline-block;
+}
diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index 482e731700..a19e96acf4 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -52,9 +52,11 @@
     border-color: $purple-400;
   }
 
-  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
-    box-shadow: none;
-    border-color: $purple-400;
+  &:not(:disabled):not(.disabled) {
+    &:active:focus, &.active:focus {
+      box-shadow: none;
+      border-color: $purple-400;
+    }
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
diff --git a/website/client/src/assets/scss/dropdown.scss b/website/client/src/assets/scss/dropdown.scss
index 0acbce7864..4a078edd25 100644
--- a/website/client/src/assets/scss/dropdown.scss
+++ b/website/client/src/assets/scss/dropdown.scss
@@ -1,20 +1,27 @@
 .dropdown > .btn {
-  padding: 9px 15.5px;
+  padding: 0.25rem 0.75rem;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: normal;
   line-height: 1.43;
 }
 
+.dropdown-toggle:hover {
+  --caret-color: #{$purple-200};
+}
+
 .dropdown.show > .dropdown-toggle:not(.btn-success) {
   color: $purple-200;
-  border-color: $purple-500 !important;
+  border-color: $purple-400 !important;
   box-shadow: none;
+
+  &::after {
+    --caret-color: #{$purple-200};
+  }
 }
 
 .dropdown-toggle::after {
-  margin-left: 16px;
-  border-top: 6px solid;
+  border-top-color: var(--caret-color);
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   vertical-align: 0;
@@ -23,14 +30,18 @@
 .dropdown-menu {
   padding: 0px;
   border: none;
-  border-radius: 4px;
-  box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($white, 0.1);
+  border-radius: 2px;
+  box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
+
 }
 
+// shared dropdown-item styles
 .dropdown-item {
+  // header items & not selectList-items
   padding-left: 24px;
   padding-top: 8px;
   padding-bottom: 8px;
+
   font-size: 14px;
   line-height: 1.71;
   color: $gray-50;
@@ -42,8 +53,8 @@
   }
 
 
-  &:active, &:hover, &.active {
-    background-color: rgba(#d5c8ff, 0.32);
+  &:active, &:hover, &:focus, &.active {
+    background-color: rgba($purple-600, 0.32);
     color: $purple-200;
   }
 
@@ -86,16 +97,28 @@
 
   .dropdown-toggle {
     width: 100% !important;
+    height: 32px;
     text-align: left;
   }
 
   .dropdown-toggle::after {
     position: absolute;
-    right: 16px;
-    top: 17px;
+    right: 12px;
+    top: 14px;
   }
 
   .dropdown-menu.show {
     width: 100% !important;
   }
 }
+
+// selectList.vue items sizing
+.selectListItem .dropdown-item {
+  padding: 0.25rem 0.75rem;
+  height: 32px;
+
+  &:active, &:hover, &:focus, &.active {
+    background-color: rgba($purple-600, 0.25);
+    color: $purple-300;
+  }
+}
diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss
index edfb99245e..f4c2dc3ba1 100644
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -16,10 +16,10 @@ label small {
   }
 }
 
-// Inputs and texteares
+// Inputs and textareas
 
 input, textarea, input.form-control, textarea.form-control {
-  padding: 10px 16px;
+  padding: 10px 12px;
   border-radius: 2px;
   font-size: 14px;
   line-height: 1.43;
@@ -31,14 +31,14 @@ input, textarea, input.form-control, textarea.form-control {
   }
 
   &:active:not(:disabled), &:focus:not(:disabled) {
-    border-color: $purple-500;
+    border-color: $purple-400;
     outline: 0;
     box-shadow: none;
   }
 
   &:disabled {
     opacity: 0.64;
-    background: $gray-500;
+    background: $gray-700;
   }
 
   &.input-search {
@@ -68,11 +68,48 @@ input, textarea, input.form-control, textarea.form-control {
   }
 }
 
-.input-group {
-  .input-group-prepend , .input-group-append  {
+.input-group-outer {
+  display: flex;
+  flex-direction: row;
+
+  .input-group {
+    flex: 1;
+  }
+}
+
+/** Colored Input-Groups, ignoring checklist */
+.input-group:not(.checklist-group) {
+  border-radius: 2px;
+  border: solid 1px $gray-400;
+
+  &:hover {
+    border-color: $gray-300;
+  }
+
+  &:focus, &:active, &:focus-within {
+    border: solid 1px $purple-400;
+  }
+
+  .input-group-prepend , .input-group-append {
     background: $gray-600;
-    color: $gray-300;
-    border-radius: 2px;
+  }
+}
+
+/** Generic Input Group Styles */
+.input-group {
+  height: 2rem;
+
+  .input-group-prepend , .input-group-append  {
+    color: $gray-200;
+    border: 0;
+    height: 30px;
+    width: 2rem;
+    margin: 0;
+
+    &.grow {
+      width: initial;
+      min-width: 2rem;
+    }
 
     &.input-group-text {
       font-size: 14px;
@@ -83,28 +120,30 @@ input, textarea, input.form-control, textarea.form-control {
     }
 
     &.input-group-icon {
-      border: solid 1px $gray-400;
-      border-right: none;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
+      display: flex;
+      align-self: center;
+      align-items: center;
+      justify-items: center;
+      justify-content: center;
+    }
+
+    .svg-icon {
+      margin: 0 !important;
     }
 
     &.streak-addon .svg-icon {
       width: 11.6px;
       height: 7.1px;
-      margin: 15px 13.4px 15.9px 13px;
     }
 
     &.positive-addon .svg-icon {
       width: 10px;
       height: 10px;
-      margin: 14px 14px;
     }
 
     &.negative-addon .svg-icon {
       width: 10px;
       height: 2px;
-      margin: 18px 14px;
     }
   }
 
@@ -115,6 +154,19 @@ input, textarea, input.form-control, textarea.form-control {
   input:first-child {
     border-right: none !important;
   }
+
+  input {
+    height: 30px;
+    border: 0;
+    background: $white !important;
+  }
+}
+
+.input-group-spaced {
+  margin-left: 12px;
+  height: 2rem;
+  border-radius: 2px;
+  background-color: $gray-600;
 }
 
 .form-check {
@@ -200,9 +252,13 @@ $bg-disabled-control: #34303a;
     align-items: center;
   }
 
-  .destroy-icon {
-    width: 14px;
-    height: 16px;
+  .destroy-icon.svg-icon {
+    margin-top: 1px !important;
+
+    svg {
+      width: 14px;
+      height: 16px;
+    }
   }
 }
 
diff --git a/website/client/src/assets/scss/icon.scss b/website/client/src/assets/scss/icon.scss
index 5e5a9162b9..3d570b9ac0 100644
--- a/website/client/src/assets/scss/icon.scss
+++ b/website/client/src/assets/scss/icon.scss
@@ -1,14 +1,14 @@
 .svg-icon {
   display: block;
-  transition: none !important;
   fill: currentColor;
 
   svg {
     display: block;
-  }
+    transition: none;
 
-  * {
-    transition: none !important;
+    path {
+      transition: none;
+    }
   }
 
   &.color {
@@ -64,4 +64,4 @@
   &:hover svg path {
     stroke: $gray-100;
   }
-}
\ No newline at end of file
+}
diff --git a/website/client/src/assets/scss/index.scss b/website/client/src/assets/scss/index.scss
index 6842a80947..63dfcbc85f 100644
--- a/website/client/src/assets/scss/index.scss
+++ b/website/client/src/assets/scss/index.scss
@@ -37,3 +37,4 @@
 @import './tiers';
 @import './payments';
 @import './datepicker.scss';
+@import './spacing';
diff --git a/website/client/src/assets/scss/misc.scss b/website/client/src/assets/scss/misc.scss
index 164a05f0e7..410ddcd13a 100644
--- a/website/client/src/assets/scss/misc.scss
+++ b/website/client/src/assets/scss/misc.scss
@@ -14,4 +14,16 @@
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   border-bottom: 0;
-}
\ No newline at end of file
+}
+
+* {
+  transition: none;
+}
+
+.transition {
+  transition-duration: 0.15s;
+  transition-property: border-color, color;
+  transition-property: border-color, box-shadow, color;
+  transition-property: border-color, box-shadow, color;
+  transition-timing-function: ease-in;
+}
diff --git a/website/client/src/assets/scss/modal.scss b/website/client/src/assets/scss/modal.scss
index efaf47bb0c..ae4ce79d9d 100644
--- a/website/client/src/assets/scss/modal.scss
+++ b/website/client/src/assets/scss/modal.scss
@@ -13,6 +13,7 @@
 
 .modal {
   z-index: 1350;
+  padding-left: 0px !important;
 }
 
 .modal-dialog {
diff --git a/website/client/src/assets/scss/spacing.scss b/website/client/src/assets/scss/spacing.scss
new file mode 100644
index 0000000000..325c36003b
--- /dev/null
+++ b/website/client/src/assets/scss/spacing.scss
@@ -0,0 +1,59 @@
+.m-75 {
+  margin: 0.75rem; // 12px
+}
+
+.mx-75 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.my-75 {
+  margin-bottom: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.mb-75 {
+  margin-bottom: 0.75rem;
+}
+
+.ml-75 {
+  margin-left: 0.75rem;
+}
+
+.mr-75 {
+  margin-right: 0.75rem;
+}
+
+.mt-75 {
+  margin-top: 0.75rem;
+}
+
+.p-75 {
+  padding: 0.75rem;
+}
+
+.px-75 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-75 {
+  padding-bottom: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.pb-75 {
+  padding-bottom: 0.75rem;
+}
+
+.pl-75 {
+  padding-left: 0.75rem;
+}
+
+.pr-75 {
+  padding-right: 0.75rem;
+}
+
+.pt-75 {
+  padding-top: 0.75rem;
+}
diff --git a/website/client/src/assets/scss/task.scss b/website/client/src/assets/scss/task.scss
index d651a574e7..66f6f35bf7 100644
--- a/website/client/src/assets/scss/task.scss
+++ b/website/client/src/assets/scss/task.scss
@@ -3,7 +3,8 @@
     .habit-option-button {
       border: 2px solid $disabled-color;
     }
-    &:hover {
+    // TODO refactor to use more css-vars and less duplicate generated css code
+    &:hover, &:focus, &:active {
       .habit-option-button {
         border: 2px solid $active-color;
       }
@@ -28,7 +29,7 @@
     &-control {
       &-bg {
         background: $maroon-100 !important;
-        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($black, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $maroon-100 !important; }
@@ -40,6 +41,7 @@
 
     &-modal {
       &-bg { background: $maroon-100 !important; }
+      &-headings { color: $white; }
       &-icon { color: $maroon-100 !important; }
       &-text { color: $red-1 !important; }
       &-content {
@@ -58,7 +60,7 @@
     &-control {
       &-bg {
         background: $red-100 !important;
-        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($black, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $red-100 !important; }
@@ -70,8 +72,8 @@
 
     &-modal {
       &-bg { background: $red-100 !important; }
+      &-headings, &-text { color: $red-1 !important; }
       &-icon { color: $red-100 !important; }
-      &-text { color: $red-1 !important; }
       &-content {
         --svg-color: #{$red-100};
       }
@@ -89,7 +91,7 @@
     &-control {
       &-bg {
         background: $orange-100 !important;
-        .habit-control:hover { background: rgba($orange-1, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($orange-1, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $orange-100 !important; }
@@ -101,8 +103,8 @@
 
     &-modal {
       &-bg { background: $orange-100 !important; }
+      &-headings, &-text { color: $orange-1 !important; }
       &-icon { color: $orange-100 !important; }
-      &-text { color: $orange-1 !important; }
       &-content {
         --svg-color: #{$orange-100};
       }
@@ -120,7 +122,7 @@
     &-control {
       &-bg {
         background: $yellow-100 !important;
-        .habit-control:hover { background: rgba($yellow-1, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($yellow-1, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $yellow-100 !important; }
@@ -132,8 +134,8 @@
 
     &-modal {
       &-bg { background: $yellow-100 !important; }
+      &-headings, &-text { color: $yellow-1 !important; }
       &-icon { color: $yellow-100 !important; }
-      &-text { color: $yellow-1 !important; }
       @include modal-text-input($yellow-1);
       &-option-disabled:hover {
         .svg-icon { color: $yellow-100 !important; }
@@ -151,7 +153,7 @@
     &-control {
       &-bg {
         background: $green-100 !important;
-        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($black, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $green-100 !important; }
@@ -163,8 +165,8 @@
 
     &-modal {
       &-bg { background: $green-100 !important; }
+      &-headings, &-text { color: $green-1 !important; }
       &-icon { color: $green-10 !important; }
-      &-text { color: $green-1 !important; }
       &-content {
         --svg-color: #{$green-100};
       }
@@ -183,7 +185,7 @@
     &-control {
       &-bg {
         background: $teal-100 !important;
-        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($black, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $teal-100 !important; }
@@ -195,8 +197,8 @@
 
     &-modal {
       &-bg { background: $teal-100 !important; }
+      &-headings, &-text { color: $teal-1 !important; }
       &-icon { color: $teal-100 !important; }
-      &-text { color: $teal-1 !important; }
       &-content {
         --svg-color: #{$teal-100};
       }
@@ -214,7 +216,7 @@
     &-control {
       &-bg {
         background: $blue-100 !important;
-        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($black, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-bg-noninteractive { background: $blue-100 !important; }
@@ -226,8 +228,8 @@
 
     &-modal {
       &-bg { background: $blue-100 !important; }
+      &-headings, &-text { color: $blue-1 !important; }
       &-icon { color: $blue-100 !important; }
-      &-text { color: $blue-1 !important; }
       &-content {
         --svg-color: #{$blue-100};
       }
@@ -246,7 +248,7 @@
     &-control {
       &-bg {
         background: $purple-task !important;
-        .habit-control:hover { background: rgba($black, 0.5) !important; }
+        .habit-control:not(.task-not-scoreable):hover { background: rgba($black, 0.5) !important; }
         .daily-todo-control:hover { background: rgba($white, 0.75) !important; }
       }
       &-inner-habit { background: rgba($black, 0.25) !important; }
@@ -256,6 +258,7 @@
 
     &-modal {
       &-bg { background: $purple-300 !important; }
+      &-headings { color: $white; }
       &-icon { color: $purple-300 !important; }
       &-text { color: $black !important; }
       &-content {
diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
index a9caa6b285..267327b09b 100644
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -53,7 +53,7 @@ h1 {
 
 h2 {
   font-size: 20px;
-  line-height: 1.2;
+  line-height: 1.4;
   margin-bottom: 16px;
 }
 
@@ -73,3 +73,7 @@ h4 {
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: bold;
 }
+
+.opacity-75 {
+  opacity: 0.75;
+}
diff --git a/website/client/src/assets/svg/information.svg b/website/client/src/assets/svg/information.svg
index cb4a531a1e..c3d91e08ee 100644
--- a/website/client/src/assets/svg/information.svg
+++ b/website/client/src/assets/svg/information.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#A5A1AC" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 7h2v5H7V7zm0-3h2v2H7V4z"/>
+    <path fill="#878190" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 7h2v5H7V7zm0-3h2v2H7V4z"/>
 </svg>
diff --git a/website/client/src/components/achievements/newStuff.vue b/website/client/src/components/achievements/newStuff.vue
index e59592ee2a..53c427a383 100644
--- a/website/client/src/components/achievements/newStuff.vue
+++ b/website/client/src/components/achievements/newStuff.vue
@@ -13,20 +13,20 @@
         v-html="html"
       ></div>
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer d-flex align-items-center pb-0">
       <a
-        class="btn btn-info"
         href="http://habitica.fandom.com/wiki/Whats_New"
         target="_blank"
+        class="mr-auto"
       >{{ this.$t('newsArchive') }}</a>
       <button
-        class="btn btn-secondary"
+        class="btn btn-secondary ml-auto"
         @click="tellMeLater()"
       >
         {{ this.$t('tellMeLater') }}
       </button>
       <button
-        class="btn btn-warning"
+        class="btn btn-primary"
         @click="dismissAlert();"
       >
         {{ this.$t('dismissAlert') }}
diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 09b94f28e4..a57b80100d 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -179,7 +179,7 @@
             <div class="col-12 col-md-4">
               <button
                 v-if="user"
-                class="btn btn-contribute btn-flat"
+                class="btn btn-contribute btn-front btn-flat"
                 @click="donate()"
               >
                 <div
@@ -192,7 +192,7 @@
               </button>
               <div
                 v-else
-                class="btn btn-contribute btn-flat"
+                class="btn btn-contribute btn-front btn-flat"
               >
                 <a
                   href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
@@ -417,6 +417,7 @@
     background: #c3c0c7;
     box-shadow: none;
     border-radius: 4px;
+    font-family: Roboto Condensed,sans-serif;
 
     &:hover {
       background: #a5a1ac;
diff --git a/website/client/src/components/group-plans/taskInformation.vue b/website/client/src/components/group-plans/taskInformation.vue
index f874a79507..85af3d7a2f 100644
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -214,16 +214,13 @@ export default {
     if (this.$route.query.showGroupOverview) {
       this.$root.$emit('bv::show::modal', 'group-plan-overview');
     }
+
+    this.$root.$on('habitica:team-sync', () => {
+      this.loadTasks();
+    });
   },
   methods: {
     async load () {
-      this.tasksByType = {
-        habit: [],
-        daily: [],
-        todo: [],
-        reward: [],
-      };
-
       this.group = await this.$store.dispatch('guilds:getGroup', {
         groupId: this.searchId,
       });
@@ -231,6 +228,16 @@ export default {
       const members = await this.$store.dispatch('members:getGroupMembers', { groupId: this.searchId });
       this.group.members = members;
 
+      this.loadTasks();
+    },
+    async loadTasks () {
+      this.tasksByType = {
+        habit: [],
+        daily: [],
+        todo: [],
+        reward: [],
+      };
+
       const tasks = await this.$store.dispatch('tasks:getGroupTasks', {
         groupId: this.searchId,
       });
diff --git a/website/client/src/components/groups/communityGuidelines.vue b/website/client/src/components/groups/communityGuidelines.vue
index 9249c562a1..e120a75b51 100644
--- a/website/client/src/components/groups/communityGuidelines.vue
+++ b/website/client/src/components/groups/communityGuidelines.vue
@@ -11,7 +11,7 @@
     <div class="col-md-auto col-md-12 col-xl-4">
       <button
         v-once
-        class="btn btn-info btn-follow-guidelines"
+        class="btn btn-secondary btn-follow-guidelines"
         @click="acceptCommunityGuidelines()"
       >
         {{ $t('acceptCommunityGuidelines') }}
diff --git a/website/client/src/components/header/notifications/groupTaskApproval.vue b/website/client/src/components/header/notifications/groupTaskApproval.vue
index 7cd0bb92b8..9eee1e7644 100644
--- a/website/client/src/components/header/notifications/groupTaskApproval.vue
+++ b/website/client/src/components/header/notifications/groupTaskApproval.vue
@@ -1,6 +1,6 @@
 <template>
   <base-notification
-    :can-remove="canRemove"
+    :can-remove="false"
     :has-icon="false"
     :notification="notification"
     @click="action"
@@ -9,13 +9,13 @@
       <div v-html="notification.data.message"></div>
       <div class="notifications-buttons">
         <div
-          class="btn btn-small btn-success"
+          class="btn btn-small btn-success mr-2"
           @click.stop="approve()"
         >
           {{ $t('approve') }}
         </div>
         <div
-          class="btn btn-small btn-warning"
+          class="btn btn-small btn-secondary"
           @click.stop="needsWork()"
         >
           {{ $t('needsWork') }}
@@ -45,8 +45,7 @@ export default {
   },
   methods: {
     action () {
-      const groupId = this.notification.data.group.id;
-      this.$router.push({ name: 'groupPlanDetailTaskInformation', params: { groupId } });
+      this.$router.push({ name: 'groupPlanDetailTaskInformation', params: { groupId: this.notification.data.groupId } });
     },
     async approve () {
       // Redirect users to the group tasks page if the notification doesn't have data
diff --git a/website/client/src/components/header/notifications/groupTaskApproved.vue b/website/client/src/components/header/notifications/groupTaskApproved.vue
index 0788ef948e..ad6c93c0f5 100644
--- a/website/client/src/components/header/notifications/groupTaskApproved.vue
+++ b/website/client/src/components/header/notifications/groupTaskApproved.vue
@@ -1,31 +1,44 @@
 <template>
   <base-notification
-    :can-remove="canRemove"
+    :can-remove="false"
     :has-icon="false"
     :notification="notification"
     :read-after-click="true"
     @click="action"
   >
-    <div
-      slot="content"
-      class="notification-green"
-      v-html="notification.data.message"
-    ></div>
+    <div slot="content">
+      <div
+        class="notification-green"
+        v-html="notification.data.message"
+      ></div>
+      <div class="notifications-buttons">
+        <div
+          class="btn btn-small btn-primary"
+          @click.stop="action()"
+        >
+          {{ $t('claimRewards') }}
+        </div>
+      </div>
+    </div>
   </base-notification>
 </template>
 
 <script>
 import BaseNotification from './base';
+import scoreTask from '@/mixins/scoreTask';
+import sync from '@/mixins/sync';
 
 export default {
   components: {
     BaseNotification,
   },
   props: ['notification', 'canRemove'],
+  mixins: [scoreTask, sync],
   methods: {
-    action () {
-      const { groupId } = this.notification.data;
-      this.$router.push({ name: 'groupPlanDetailTaskInformation', params: { groupId } });
+    async action () {
+      const { task, direction } = this.notification.data;
+      await this.taskScore(task, direction);
+      this.sync();
     },
   },
 };
diff --git a/website/client/src/components/header/notificationsDropdown.vue b/website/client/src/components/header/notificationsDropdown.vue
index e98daeff4e..a8e600dfe8 100644
--- a/website/client/src/components/header/notificationsDropdown.vue
+++ b/website/client/src/components/header/notificationsDropdown.vue
@@ -191,7 +191,7 @@ export default {
       openStatus: undefined,
       actionableNotifications: [
         'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
-        'QUEST_INVITATION', 'GROUP_TASK_NEEDS_WORK',
+        'QUEST_INVITATION', 'GROUP_TASK_APPROVAL', 'GROUP_TASK_APPROVED',
       ],
       // A list of notifications handled by this component,
       // listed in the order they should appear in the notifications panel.
diff --git a/website/client/src/components/header/userDropdown.vue b/website/client/src/components/header/userDropdown.vue
index 093868c844..ecfbf2a4ad 100644
--- a/website/client/src/components/header/userDropdown.vue
+++ b/website/client/src/components/header/userDropdown.vue
@@ -24,14 +24,14 @@
       class="user-dropdown"
     >
       <a
-        class="dropdown-item edit-avatar dropdown-separated"
+        class="topbar-dropdown-item dropdown-item edit-avatar dropdown-separated"
         @click="showAvatar('body', 'size')"
       >
         <h3>{{ user.profile.name }}</h3>
         <span class="small-text">{{ $t('editAvatar') }}</span>
       </a>
       <a
-        class="nav-link dropdown-item
+        class="topbar-dropdown-item nav-link dropdown-item
          dropdown-separated d-flex justify-content-between align-items-center"
         @click.prevent="showPrivateMessages()"
       >
@@ -42,42 +42,42 @@
         />
       </a>
       <a
-        class="dropdown-item"
+        class="topbar-dropdown-item dropdown-item"
         @click="showAvatar('backgrounds', '2020')"
       >{{ $t('backgrounds') }}</a>
       <a
-        class="dropdown-item"
+        class="topbar-dropdown-item dropdown-item"
         @click="showProfile('stats')"
       >{{ $t('stats') }}</a>
       <a
-        class="dropdown-item"
+        class="topbar-dropdown-item dropdown-item"
         @click="showProfile('achievements')"
       >{{ $t('achievements') }}</a>
       <a
-        class="dropdown-item dropdown-separated"
+        class="topbar-dropdown-item dropdown-item dropdown-separated"
         @click="showProfile('profile')"
       >{{ $t('profile') }}</a>
       <router-link
-        class="dropdown-item"
+        class="topbar-dropdown-item dropdown-item"
         :to="{name: 'site'}"
       >
         {{ $t('settings') }}
       </router-link>
       <router-link
-        class="dropdown-item dropdown-separated"
+        class="topbar-dropdown-item dropdown-item dropdown-separated"
         :to="{name: 'subscription'}"
       >
         {{ $t('subscription') }}
       </router-link>
       <a
-        class="nav-link dropdown-item dropdown-separated"
+        class="topbar-dropdown-item nav-link dropdown-item dropdown-separated"
         @click.prevent="logout()"
       >{{ $t('logout') }}</a>
       <li
         v-if="!user.purchased.plan.customerId"
         @click="showBuyGemsModal()"
       >
-        <div class="dropdown-item text-center">
+        <div class="topbar-dropdown-item dropdown-item text-center">
           <h3 class="purple">
             {{ $t('needMoreGems') }}
           </h3>
diff --git a/website/client/src/components/inventory/item.vue b/website/client/src/components/inventory/item.vue
index cca274f0e1..a02bb16cec 100644
--- a/website/client/src/components/inventory/item.vue
+++ b/website/client/src/components/inventory/item.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="emptyItem">
     <div class="item-wrapper">
-      <div class="item item-empty">
+      <div class="item transition item-empty">
         <div class="item-content"></div>
       </div><span
         v-if="label"
@@ -15,7 +15,7 @@
       @click="click"
     >
       <div
-        class="item"
+        class="item transition"
         :class="{'item-active': active, 'highlight-border':highlightBorder }"
       >
         <slot
diff --git a/website/client/src/components/inventory/stable/foodItem.vue b/website/client/src/components/inventory/stable/foodItem.vue
index 6f6204ef3e..0f331a1456 100644
--- a/website/client/src/components/inventory/stable/foodItem.vue
+++ b/website/client/src/components/inventory/stable/foodItem.vue
@@ -6,7 +6,7 @@
       @click="click($event)"
     >
       <div
-        class="item"
+        class="item transition"
         :class="{'item-active': active }"
       >
         <countBadge
diff --git a/website/client/src/components/inventory/stable/mountItem.vue b/website/client/src/components/inventory/stable/mountItem.vue
index a12a931326..1f18e75406 100644
--- a/website/client/src/components/inventory/stable/mountItem.vue
+++ b/website/client/src/components/inventory/stable/mountItem.vue
@@ -6,7 +6,7 @@
       @click="click()"
     >
       <div
-        class="item pet-slot"
+        class="item pet-slot transition"
         :class="{'item-empty': !isOwned()}"
       >
         <slot
diff --git a/website/client/src/components/inventory/stable/petItem.vue b/website/client/src/components/inventory/stable/petItem.vue
index b1c99a394b..5bb55c9744 100644
--- a/website/client/src/components/inventory/stable/petItem.vue
+++ b/website/client/src/components/inventory/stable/petItem.vue
@@ -6,7 +6,7 @@
       @click="click()"
     >
       <div
-        class="item pet-slot"
+        class="item pet-slot transition"
         :class="{'item-empty': !isOwned(), 'highlight': highlightBorder}"
       >
         <slot
diff --git a/website/client/src/components/notifications.vue b/website/client/src/components/notifications.vue
index 54683f0eac..45e38d51f5 100644
--- a/website/client/src/components/notifications.vue
+++ b/website/client/src/components/notifications.vue
@@ -380,7 +380,7 @@ export default {
       'GUILD_PROMPT', 'REBIRTH_ENABLED', 'WON_CHALLENGE', 'STREAK_ACHIEVEMENT',
       'ULTIMATE_GEAR_ACHIEVEMENT', 'REBIRTH_ACHIEVEMENT', 'GUILD_JOINED_ACHIEVEMENT',
       'CHALLENGE_JOINED_ACHIEVEMENT', 'INVITED_FRIEND_ACHIEVEMENT', 'NEW_CONTRIBUTOR_LEVEL',
-      'CRON', 'SCORED_TASK', 'LOGIN_INCENTIVE', 'ACHIEVEMENT_ALL_YOUR_BASE', 'ACHIEVEMENT_BACK_TO_BASICS',
+      'CRON', 'LOGIN_INCENTIVE', 'ACHIEVEMENT_ALL_YOUR_BASE', 'ACHIEVEMENT_BACK_TO_BASICS',
       'GENERIC_ACHIEVEMENT', 'ACHIEVEMENT_PARTY_UP', 'ACHIEVEMENT_PARTY_ON', 'ACHIEVEMENT_BEAST_MASTER',
       'ACHIEVEMENT_MOUNT_MASTER', 'ACHIEVEMENT_TRIAD_BINGO', 'ACHIEVEMENT_DUST_DEVIL', 'ACHIEVEMENT_ARID_AUTHORITY',
       'ACHIEVEMENT_MONSTER_MAGUS', 'ACHIEVEMENT_UNDEAD_UNDERTAKER', 'ACHIEVEMENT_PRIMED_FOR_PAINTING',
@@ -729,7 +729,6 @@ export default {
       if (!after || after.length === 0 || !Array.isArray(after)) return;
 
       const notificationsToRead = [];
-      const scoreTaskNotification = [];
 
       after.forEach(notification => {
         // This notification type isn't implemented here
@@ -820,23 +819,6 @@ export default {
             // Not needed because it's shown already by the userHp and userMp watchers
             // Keeping an empty block so that it gets read
             break;
-          case 'SCORED_TASK':
-            // Search if it is a read notification
-            for (let i = 0; i < this.alreadyReadNotification.length; i += 1) {
-              if (this.alreadyReadNotification[i] === notification.id) {
-                markAsRead = false; // Do not let it be read again
-                break;
-              }
-            }
-
-            // Only process the notification if it is an unread notification
-            if (markAsRead) {
-              scoreTaskNotification.push(notification);
-
-              // Add to array of read notifications
-              this.alreadyReadNotification.push(notification.id);
-            }
-            break;
           case 'LOGIN_INCENTIVE':
             if (this.user.flags.tour.intro === this.TOUR_END && this.user.flags.welcomed) {
               this.notificationData = notification.data;
@@ -862,43 +844,12 @@ export default {
         if (markAsRead) notificationsToRead.push(notification.id);
       });
 
-      const userReadNotifsPromise = false;
-
       if (notificationsToRead.length > 0) {
         await axios.post('/api/v4/notifications/read', {
           notificationIds: notificationsToRead,
         });
       }
 
-      // @TODO this code is never run because userReadNotifsPromise is never true
-      if (userReadNotifsPromise) {
-        userReadNotifsPromise.then(() => {
-          // Only run this code for scoring approved tasks
-          if (scoreTaskNotification.length > 0) {
-            const approvedTasks = [];
-            for (let i = 0; i < scoreTaskNotification.length; i += 1) {
-              // Array with all approved tasks
-              const scoreData = scoreTaskNotification[i].data;
-              let direction = 'up';
-              if (scoreData.direction) direction = scoreData.direction;
-
-              approvedTasks.push({
-                params: {
-                  task: scoreData.scoreTask,
-                  direction,
-                },
-              });
-
-              // Show notification of task approved
-              this.markdown(scoreTaskNotification[i].data.message);
-            }
-
-            // Score approved tasks
-            // TODO: User.bulkScore(approvedTasks);
-          }
-        });
-      }
-
       this.debounceCheckUserAchievements();
     },
   },
diff --git a/website/client/src/components/payments/sendGemsModal.vue b/website/client/src/components/payments/sendGemsModal.vue
index 4347afe3cf..0ebd99f380 100644
--- a/website/client/src/components/payments/sendGemsModal.vue
+++ b/website/client/src/components/payments/sendGemsModal.vue
@@ -24,36 +24,38 @@
           {{ $t('gemsPopoverTitle') }}
         </h3>
         <div class="panel-body">
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group">
-                <input
-                  v-model="gift.gems.amount"
-                  class="form-control"
-                  type="number"
-                  placeholder="Number of Gems"
-                  min="0"
-                  :max="gift.gems.fromBalance ? userLoggedIn.balance * 4 : 9999"
-                >
-              </div>
+          <div class="d-flex mb-3">
+            <div class="form-group mb-0">
+              <input
+                v-model="gift.gems.amount"
+                class="form-control"
+                type="number"
+                placeholder="Number of Gems"
+                min="0"
+                :max="gift.gems.fromBalance ? userLoggedIn.balance * 4 : 9999"
+              >
             </div>
-            <div class="col-md-6">
-              <div class="btn-group">
-                <button
-                  class="btn btn-secondary"
-                  :class="{active: gift.gems.fromBalance}"
-                  @click="gift.gems.fromBalance = true"
-                >
-                  {{ $t('sendGiftFromBalance') }}
-                </button>
-                <button
-                  class="btn btn-secondary"
-                  :class="{active: !gift.gems.fromBalance}"
-                  @click="gift.gems.fromBalance = false"
-                >
-                  {{ $t('sendGiftPurchase') }}
-                </button>
-              </div>
+            <div class="btn-group ml-auto">
+              <button
+                class="btn"
+                :class="{
+                  'btn-primary': gift.gems.fromBalance,
+                  'btn-secondary': !gift.gems.fromBalance,
+                }"
+                @click="gift.gems.fromBalance = true"
+              >
+                {{ $t('sendGiftFromBalance') }}
+              </button>
+              <button
+                class="btn"
+                :class="{
+                  'btn-primary': !gift.gems.fromBalance,
+                  'btn-secondary': gift.gems.fromBalance,
+                }"
+                @click="gift.gems.fromBalance = false"
+              >
+                {{ $t('sendGiftPurchase') }}
+              </button>
             </div>
           </div>
           <div class="row">
@@ -77,7 +79,7 @@
         <div class="panel-body">
           <div class="row">
             <div class="col-md-12">
-              <div class="form-group">
+              <div class="form-group mb-0">
                 <!-- eslint-disable vue/no-use-v-if-with-v-for -->
                 <div
                   v-for="block in subscriptionBlocks"
diff --git a/website/client/src/components/settings/api.vue b/website/client/src/components/settings/api.vue
index e73d914cff..5f8fc47b64 100644
--- a/website/client/src/components/settings/api.vue
+++ b/website/client/src/components/settings/api.vue
@@ -79,19 +79,19 @@
               >
             </td>
             <td>
-              <a
-                class="btn btn-warning checklist-icons"
+              <div
+                class="btn btn-danger checklist-icons mr-2"
                 @click="deleteWebhook(webhook, index)"
               >
                 <span
                   class="glyphicon glyphicon-trash"
                   :tooltip="$t('delete')"
-                >Delete</span>
-              </a>
-              <a
-                class="btn btn-success checklist-icons"
+                > {{ $t('delete') }} </span>
+              </div>
+              <div
+                class="btn btn-primary checklist-icons"
                 @click="saveWebhook(webhook, index)"
-              >Update</a>
+              > {{ $t('subUpdateTitle') }} </div>
             </td>
           </tr>
           <tr>
diff --git a/website/client/src/components/snackbars/notification.vue b/website/client/src/components/snackbars/notification.vue
index 61f23c2ebe..cc6d05eec6 100644
--- a/website/client/src/components/snackbars/notification.vue
+++ b/website/client/src/components/snackbars/notification.vue
@@ -2,7 +2,7 @@
   <transition name="fade">
     <div
       v-if="show"
-      class="notification callout animated"
+      class="notification callout animated pt-0"
       :class="classes"
       @click="handleOnClick()"
     >
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index 696a8a2460..2a5f1546c0 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -128,7 +128,7 @@
     </div>
     <router-link
       v-if="$route.name === 'home'"
-      class="btn btn-primary login-button pull-right"
+      class="btn btn-primary btn-front login-button pull-right"
       to="/login"
     >
       {{ $t('login') }}
diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
index 0288f7fd63..9f62600332 100644
--- a/website/client/src/components/static/home.vue
+++ b/website/client/src/components/static/home.vue
@@ -304,7 +304,7 @@
         <div class="row">
           <div class="col-12 text-center">
             <button
-              class="btn btn-primary join-button"
+              class="btn btn-primary btn-front join-button"
               @click="playButtonClick()"
             >
               {{ $t('joinToday') }}
@@ -680,10 +680,13 @@
       padding-bottom: 5em;
     }
 
-    .join-button:hover {
+    .join-button {
       cursor: pointer;
-      background-color: #b288ff;
-      box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
+
+      &:hover {
+        background-color: #5d3b9c;
+        box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
+      }
     }
 
     .featured .row {
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index 922a33e840..878be4158c 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -67,7 +67,7 @@
     }
 
     .login-button:hover {
-      background-color: #b288ff;
+      background-color: #5d3b9c;
       box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12) !important;
     }
   }
diff --git a/website/client/src/components/tasks/approvalFooter.vue b/website/client/src/components/tasks/approvalFooter.vue
index 1585dd0f44..519adbffa5 100644
--- a/website/client/src/components/tasks/approvalFooter.vue
+++ b/website/client/src/components/tasks/approvalFooter.vue
@@ -2,7 +2,6 @@
   <div>
     <approval-modal :task="task" />
     <div
-      v-if="!approvalRequested && !multipleApprovalsRequested"
       class="claim-bottom-message d-flex align-items-center"
     >
       <div
@@ -10,7 +9,7 @@
         v-html="message"
       ></div>
       <div
-        v-if="!userIsAssigned"
+        v-if="!userIsAssigned && !task.completed"
         class="ml-auto mr-2"
       >
         <a
@@ -19,7 +18,7 @@
         >{{ $t('claim') }}</a>
       </div>
       <div
-        v-if="userIsAssigned"
+        v-if="userIsAssigned && !approvalRequested && !task.completed"
         class="ml-auto mr-2"
       >
         <a
@@ -44,6 +43,16 @@
     >
       <a @click="showRequests()">{{ $t('viewRequests') }}</a>
     </div>
+    <div
+      v-if="userIsAssigned && task.group.approval.approved
+        && !task.completed && task.type !== 'habit'"
+      class="claim-bottom-message d-flex align-items-center justify-content-around"
+    >
+      <a
+        class="approve-color"
+        @click="$emit('claimRewards')"
+      >{{ $t('claimRewards') }}</a>
+    </div>
   </div>
 </template>
 
@@ -176,6 +185,8 @@ export default {
       });
       this.task.group.assignedUsers.splice(0, 1);
       this.task.approvals.splice(0, 1);
+
+      this.sync();
     },
     needsWork () {
       if (!window.confirm(this.$t('confirmNeedsWork'))) return;
@@ -185,6 +196,8 @@ export default {
         userId: userIdNeedsMoreWork,
       });
       this.task.approvals.splice(0, 1);
+
+      this.sync();
     },
     showRequests () {
       this.$root.$emit('bv::show::modal', 'approval-modal');
diff --git a/website/client/src/components/tasks/approvalHeader.vue b/website/client/src/components/tasks/approvalHeader.vue
index 5bad31c698..68f2d906dc 100644
--- a/website/client/src/components/tasks/approvalHeader.vue
+++ b/website/client/src/components/tasks/approvalHeader.vue
@@ -2,7 +2,8 @@
   <div
     v-if="message"
     class="claim-top-message d-flex align-content-center"
-    :class="{'approval-action': userIsAdmin, 'approval-pending': !userIsAdmin}"
+    :class="{ 'approval-action': userIsAdmin || task.group.approval.approved,
+      'approval-pending': !userIsAdmin && !task.group.approval.approved }"
   >
     <div
       class="m-auto"
@@ -47,14 +48,19 @@ export default {
 
       if (approvalsLength === 1 && !userIsRequesting) {
         return this.$t('userRequestsApproval', { userName: approvals[0].userId.profile.name });
-      } if (approvalsLength > 1 && !userIsRequesting) {
+      }
+      if (approvalsLength > 1 && !userIsRequesting) {
         return this.$t('userCountRequestsApproval', { userCount: approvalsLength });
-      } if (
-        (approvalsLength === 1 && userIsRequesting)
+      }
+      if ((approvalsLength === 1 && userIsRequesting)
         || (this.task.group.approval
-          && this.task.group.approval.requested && !this.task.group.approval.approved)) {
+          && this.task.group.approval.requested
+          && !this.task.group.approval.approved)) {
         return this.$t('youAreRequestingApproval');
       }
+      if (this.task.group.approval.approved && !this.task.completed) {
+        return this.$t('thisTaskApproved');
+      }
       return null;
     },
     userIsAdmin () {
diff --git a/website/client/src/components/tasks/column.vue b/website/client/src/components/tasks/column.vue
index 9a98b5fa31..0342a12de6 100644
--- a/website/client/src/components/tasks/column.vue
+++ b/website/client/src/components/tasks/column.vue
@@ -201,6 +201,7 @@
     border-color: transparent;
     transition: background 0.15s ease-in;
     resize: none;
+    overflow: hidden;
 
     &:hover {
       background-color: rgba($black, 0.1);
diff --git a/website/client/src/components/tasks/modal-controls/checklist.vue b/website/client/src/components/tasks/modal-controls/checklist.vue
index a24d6d3ae8..79a6a83415 100644
--- a/website/client/src/components/tasks/modal-controls/checklist.vue
+++ b/website/client/src/components/tasks/modal-controls/checklist.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="checklist-component">
-    <label
-      v-once
-      class="mb-1"
-    >{{ $t('checklist') }}</label>
-    <br>
+    <lockable-label
+      :locked="disabled || disableItems"
+      :text="$t('checklist')"
+    />
     <draggable
       v-model="checklist"
       :options="{
@@ -20,7 +19,7 @@
         class="inline-edit-input-group checklist-group input-group"
       >
         <span
-          v-if="!disabled"
+          v-if="!disabled && !disableDrag"
           class="grippy"
           v-html="icons.grip"
         >
@@ -29,19 +28,19 @@
         <checkbox
           :id="`checklist-${item.id}`"
           :checked.sync="item.completed"
-          :disabled="disabled"
+          :disabled="disabled || disableItems"
           class="input-group-prepend"
-          :class="{'cursor-auto': disabled}"
+          :class="{'cursor-auto': disabled || disableItems}"
         />
 
         <input
           v-model="item.text"
           class="inline-edit-input checklist-item form-control"
           type="text"
-          :disabled="disabled"
+          :disabled="disabled || disableItems"
         >
         <span
-          v-if="!disabled"
+          v-if="!disabled && !disableItems"
           class="input-group-append"
           @click="removeChecklistItem($index)"
         >
@@ -55,8 +54,9 @@
       </div>
     </draggable>
     <div
-      v-if="!disabled"
+      v-if="!disabled && !disableItems"
       class="inline-edit-input-group checklist-group input-group new-checklist"
+      :class="{'top-border': items.length === 0}"
     >
       <span
         v-once
@@ -88,17 +88,25 @@ import deleteIcon from '@/assets/svg/delete.svg';
 import chevronIcon from '@/assets/svg/chevron.svg';
 import gripIcon from '@/assets/svg/grip.svg';
 import checkbox from '@/components/ui/checkbox';
+import lockableLabel from './lockableLabel';
 
 export default {
   name: 'Checklist',
   components: {
-    draggable,
     checkbox,
+    draggable,
+    lockableLabel,
   },
   props: {
     disabled: {
       type: Boolean,
     },
+    disableDrag: {
+      type: Boolean,
+    },
+    disableItems: {
+      type: Boolean,
+    },
     items: {
       type: Array,
     },
@@ -158,12 +166,20 @@ export default {
 
   .checklist-component {
 
+    .top-border {
+      border-top: 1px solid $gray-500;
+    }
+
+    .lock-icon {
+      color: $gray-200;
+    }
+
     .checklist-group {
       height: 2rem;
-      border-top: 1px solid $gray-500;
+      border-bottom: 1px solid $gray-500;
 
-      &.new-checklist {
-        border-bottom: 1px solid $gray-500;
+      &:first-of-type {
+        border-top: 1px solid $gray-500;
       }
 
       .inline-edit-input  {
@@ -172,7 +188,7 @@ export default {
 
       .input-group-prepend {
         margin-left: 0.375rem;
-        margin-top: 0.475rem;
+        margin-top: 0.375rem;
         margin-right: 0;
         padding: 0;
         &:not(.new-icon) {
@@ -183,6 +199,8 @@ export default {
           margin-left: 0.688rem;
           margin-top: 0.625rem;
           margin-bottom: 0.625rem;
+          height: 10px;
+          width: 13px;
         }
       }
 
@@ -267,14 +285,5 @@ export default {
         }
       }
     }
-
-    label {
-      height: 1.5rem;
-      font-size: 14px;
-      font-weight: bold;
-      line-height: 1.71;
-      letter-spacing: normal;
-      color: $gray-50;
-    }
   }
 </style>
diff --git a/website/client/src/components/tasks/modal-controls/lockableLabel.vue b/website/client/src/components/tasks/modal-controls/lockableLabel.vue
new file mode 100644
index 0000000000..482c86fc48
--- /dev/null
+++ b/website/client/src/components/tasks/modal-controls/lockableLabel.vue
@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="d-flex"
+    :class="[{ 'opacity-75': locked }, classOverride]"
+  >
+    <span
+      v-once
+      class="svg-icon lock-icon icon-10 mr-1"
+      :class="classOverride ? classOverride : 'gray-200'"
+      v-html="icons.lock"
+      v-if="locked"
+    >
+    </span>
+    <label
+      v-once
+      class="mb-1"
+      v-html="text"
+    ></label>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  label {
+    height: 1.5rem;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1.71;
+    letter-spacing: normal;
+  }
+
+  .gray-200 {
+    color: $gray-200;
+  }
+
+  .lock-icon {
+    margin-top: 5px;
+  }
+</style>
+
+<script>
+import lockIcon from '@/assets/svg/lock.svg';
+
+export default {
+  props: {
+    classOverride: {
+      type: String,
+    },
+    locked: {
+      type: Boolean,
+    },
+    text: {
+      type: String,
+    },
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        lock: lockIcon,
+      }),
+    };
+  },
+};
+</script>
diff --git a/website/client/src/components/tasks/modal-controls/multiList.vue b/website/client/src/components/tasks/modal-controls/multiList.vue
new file mode 100644
index 0000000000..0fdb7dfeca
--- /dev/null
+++ b/website/client/src/components/tasks/modal-controls/multiList.vue
@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="multi-list"
+    :class="{ 'break': maxItems === 0 }"
+  >
+    <template v-if="items.length === 0">
+      <div class="items-none">{{ emptyMessage }}</div>
+    </template>
+    <template v-else>
+      <div
+        :key="item.id"
+        :title="item.name"
+        class="multi-item mr-1 d-inline-flex align-items-center"
+        :class="{'margin-adjust': maxItems !== 0, 'pill-invert': pillInvert}"
+        v-for="item in truncatedSelectedItems"
+
+        @click.stop="removeItem($event, item)"
+      >
+        <div
+          class="multi-label my-auto ml-75 mr-2"
+          v-markdown="item.name"
+        ></div>
+        <div
+          class="remove ml-auto mr-75"
+          v-html="icons.remove"
+        ></div>
+      </div>
+      <div
+        class="items-more ml-75"
+        v-if="remainingSelectedItems.length > 0"
+      >
+        +{{remainingSelectedItems.length}}
+      </div>
+    </template>
+  </div>
+</template>
+
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .multi-list {
+    p {
+      display: inline;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    .multi-item {
+      &:hover {
+        .remove svg path {
+          stroke: $maroon-50;
+        }
+      }
+
+      .remove {
+        svg {
+          width: 0.5rem;
+          height: 0.5rem;
+
+          path {
+            stroke: $gray-200;
+          }
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .margin-adjust {
+    margin-top: -1px;
+  }
+
+  .multi-list {
+    width: 100%;
+
+    &.break {
+      display: flex;
+      flex-wrap: wrap;
+
+      .multi-item {
+        margin-bottom: 0.375rem;
+      }
+    }
+  }
+
+  .multi-item {
+    display: inline-block;
+    height: 1.5rem;
+    border-radius: 100px;
+    background-color: $gray-600;
+
+    cursor: pointer;
+
+    &.pill-invert {
+      background-color: $white;
+      border: solid 1px $gray-400;
+    }
+
+    .multi-label {
+      height: 1rem;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: normal;
+      color: $gray-100;
+    }
+
+    .remove {
+      display: inline-block;
+      object-fit: contain;
+      margin-top: -0.125rem;
+    }
+  }
+
+  .items-more {
+    color: $gray-100;
+    font-size: 12px;
+    display: inline-block;
+    height: 1rem;
+    font-weight: bold;
+    line-height: 1.33;
+    letter-spacing: normal;
+  }
+</style>
+
+<script>
+import removeIcon from '@/assets/svg/remove.svg';
+import markdownDirective from '@/directives/markdown';
+
+export default {
+  directives: {
+    markdown: markdownDirective,
+  },
+  components: {},
+  data () {
+    return {
+      icons: Object.freeze({
+        remove: removeIcon,
+      }),
+    };
+  },
+  computed: {
+    truncatedSelectedItems () {
+      if (this.maxItems <= 0) {
+        return this.items;
+      }
+
+      return this.items.slice(0, this.maxItems);
+    },
+    remainingSelectedItems () {
+      if (this.maxItems <= 0) {
+        return [];
+      }
+
+      return this.items.slice(this.maxItems);
+    },
+  },
+  props: {
+    addNew: {
+      type: Boolean,
+      default: false,
+    },
+    emptyMessage: {
+      type: String,
+    },
+    maxItems: {
+      type: Number,
+      default: 3,
+    },
+    pillInvert: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+    },
+  },
+  methods: {
+    removeItem ($event, item) {
+      this.$emit('remove-item', item.id);
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
new file mode 100644
index 0000000000..81fb61f59a
--- /dev/null
+++ b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <select-list :items="items"
+                 :key-prop="'icon'"
+                 class="difficulty-select"
+                 :class="{disabled: disabled}"
+                 :disabled="disabled"
+                 :value="selected"
+                 @select="$emit('select', $event.value)">
+      <template v-slot:item="{ item, button }">
+        <div v-if="item" class="difficulty-item" :class="{ 'isButton': button }">
+          <span class="label">{{ item.label }}</span>
+
+          <div class="svg-icon" >
+            <span v-for="n in item.stars"
+                  v-html="icons.difficultyTrivial"
+            :key="n">
+
+            </span>
+          </div>
+        </div>
+      </template>
+    </select-list>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .difficulty-item {
+    display: flex;
+    align-items: center;
+
+    div.svg-icon {
+      ::v-deep svg {
+        fill: $gray-200;
+      }
+    }
+
+    &:hover, &.isButton {
+      div.svg-icon {
+        ::v-deep svg {
+          fill: var(--svg-color);
+        }
+      }
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  div.svg-icon {
+    flex-grow: 0;
+    width: 80px;
+    display: flex;
+    justify-content: flex-end;
+    margin-left: 0.375rem;
+
+    span {
+      display: inline;
+    }
+
+    ::v-deep svg {
+      margin-left: 0.125rem;
+      width: 0.625rem;
+      height: 0.625rem;
+      object-fit: contain;
+
+      fill: $gray-200;
+    }
+  }
+</style>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .difficulty-select {
+
+    &.disabled {
+      .btn-secondary:disabled, .btn-secondary.disabled, .dropdown >
+      .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .dropdown >
+      .btn-secondary.dropdown-toggle:not(.btn-success).disabled, .show >
+      .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .show >
+      .btn-secondary.dropdown-toggle:not(.btn-success).disabled {
+        background: $gray-700;
+      }
+    }
+    // restyle the selected item
+    .dropdown-toggle {
+
+      &.disabled {
+        box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+
+        &::after {
+          color: $gray-300;
+          border-top-color: $gray-300;
+        }
+
+        .label {
+          color: $gray-200;
+        }
+      }
+
+      .label {
+        flex: 0;
+      }
+
+      div.svg-icon {
+        justify-content: flex-start;
+      }
+    }
+
+    // highlight the svg icons,
+    // when focusing with keyboard (it is outside of the template item
+    .dropdown-item:focus .difficulty-item {
+      div.svg-icon {
+        svg {
+          fill: var(--svg-color);
+        }
+      }
+    }
+  }
+</style>
+
+<script>
+import difficultyNormalIcon from '@/assets/svg/difficulty-normal.svg';
+import difficultyTrivialIcon from '@/assets/svg/difficulty-trivial.svg';
+import difficultyMediumIcon from '@/assets/svg/difficulty-medium.svg';
+import difficultyHardIcon from '@/assets/svg/difficulty-hard.svg';
+import selectList from '@/components/ui/selectList';
+
+
+export default {
+  components: {
+    selectList,
+  },
+  data () {
+    const items = [
+      {
+        value: 0.1,
+        label: this.$t('trivial'),
+        stars: 1,
+      },
+      {
+        value: 1,
+        label: this.$t('easy'),
+        stars: 2,
+      },
+      {
+        value: 1.5,
+        label: this.$t('medium'),
+        stars: 3,
+      },
+      {
+        value: 2,
+        label: this.$t('hard'),
+        stars: 4,
+      },
+    ];
+
+    return {
+      items,
+      icons: Object.freeze({
+        difficultyNormal: difficultyNormalIcon,
+        difficultyTrivial: difficultyTrivialIcon,
+        difficultyMedium: difficultyMediumIcon,
+        difficultyHard: difficultyHardIcon,
+      }),
+      selected: items.find(i => i.value === this.value),
+    };
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+    },
+    value: {
+      type: Number,
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.stories.js b/website/client/src/components/tasks/modal-controls/selectMulti.stories.js
new file mode 100644
index 0000000000..96f0d60364
--- /dev/null
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.stories.js
@@ -0,0 +1,133 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs, number } from '@storybook/addon-knobs';
+
+import MultiList from './multiList';
+import SelectMulti from './selectMulti';
+import getStore from '@/store';
+
+const stories = storiesOf('Multiple Select List', module);
+
+stories.addDecorator(withKnobs);
+
+// Needed for SelectTag
+const store = getStore();
+store.state.user.data = {
+  tags: [],
+};
+
+const exampleTagList = [
+  1, 2, 3,
+];
+
+const allTags = [
+  {
+    id: 1,
+    name: 'Small Tag',
+  },
+  {
+    id: 2,
+    name: 'This is a long tag',
+  },
+  {
+    id: 3,
+    name: 'This is a long tag',
+  },
+  {
+    id: 12,
+    name: 'This is a different tag',
+  },
+  {
+    id: 9001,
+    name: 'OVER 9000',
+  },
+  {
+    id: 4,
+    name: 'Four',
+  },
+  {
+    id: 5,
+    name: 'Five :tada:',
+    challenge: true,
+  },
+  {
+    id: 6,
+    name: 'Six',
+  },
+  {
+    id: 7,
+    name: 'Seven **Markdown**',
+  },
+];
+
+stories
+  .add('tag-list', () => ({
+    components: { MultiList },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <MultiList :max-items="maxTags" :items="tagList"></MultiList>
+      </div>
+    `,
+    props: {
+      tagList: {
+        default: allTags,
+      },
+      maxTags: {
+        default: number('Max-Tags', 3),
+      },
+    },
+  }))
+  .add('select-tag', () => ({
+    components: { SelectMulti },
+    template: `
+        <div style="position: absolute; margin: 20px">
+          <SelectMulti :selectedItems="tagList"
+                       :add-new="true"
+                       :all-items="allTags"
+                       style="width: 400px"
+                       @changed="tagList = $event"
+                       @addNew="added = $event">
+
+          </SelectMulti>
+
+          <br/>
+          <br/>
+
+          Added event: {{ added }}
+        </div>
+    `,
+    store,
+    data () {
+      return {
+        tagList: exampleTagList,
+        added: '',
+      };
+    },
+    props: {
+      allTags: {
+        default: allTags,
+      },
+    },
+  }))
+  .add('longer select-tag', () => ({
+    components: { SelectMulti },
+    template: `
+        <div style="position: absolute; margin: 20px">
+            <SelectMulti :selectedItems="tagList"
+                         :all-items="allTags"
+                         style="width: 400px"
+                         @changed="tagList = $event"></SelectMulti>
+        </div>
+    `,
+    store,
+    data () {
+      return {
+        tagList: [],
+      };
+    },
+    props: {
+      allTags: {
+        default: allTags,
+      },
+    },
+  }));
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
new file mode 100644
index 0000000000..767b23b8a5
--- /dev/null
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.vue
@@ -0,0 +1,294 @@
+multi<template>
+  <div>
+    <b-dropdown
+      class="inline-dropdown select-multi"
+      @show="wasOpened()"
+      @hide="hideCallback($event)"
+      @toggle="openOrClose($event)"
+      :toggle-class="isOpened ? 'active' : null"
+      ref="dropdown"
+    >
+      <b-dropdown-header>
+        <div class="mb-2">
+          <b-form-input type="text"
+                        :placeholder="searchPlaceholder"
+                        v-model="search"
+                        @keyup.enter="handleSubmit"
+          />
+        </div>
+
+        <multi-list v-if="selectedItems.length > 0"
+                    :add-new="addNew"
+                    :pill-invert="pillInvert"
+                    :items="selectedItemsAsObjects"
+                    @remove-item="removeItem($event)"
+                    :max-items="0" />
+
+      </b-dropdown-header>
+      <template v-slot:button-content>
+        <multi-list :items="selectedItemsAsObjects"
+                    :add-new="addNew"
+                    :pill-invert="pillInvert"
+                    :empty-message="emptyMessage"
+                    @remove-item="removeItem($event)"/>
+      </template>
+      <div
+        v-if="addNew || availableToSelect.length > 0"
+        :class="{
+          'item-group': true,
+          'add-new': availableToSelect.length === 0 && search !== '',
+          'scroll': availableToSelect.length > 5
+        }"
+      >
+        <b-dropdown-item-button
+          v-for="item in availableToSelect"
+          :key="item.id"
+          @click.prevent.stop="selectItem(item)"
+          class="ignore-hide multi-item"
+          :class="{ 'none': item.id === 'none', selectListItem: true }"
+        >
+          <div class="label" v-markdown="item.name"></div>
+          <div class="challenge" v-if="item.challenge">{{$t('challenge')}}</div>
+        </b-dropdown-item-button>
+
+        <div v-if="addNew" class="hint">
+          {{$t('pressEnterToAddTag', { tagName: search })}}
+        </div>
+      </div>
+    </b-dropdown>
+
+  </div>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  $itemHeight: 2rem;
+
+  .select-multi {
+    .dropdown-toggle {
+      padding-left: 0.75rem;
+    }
+
+    .dropdown-header {
+      background-color: $gray-700;
+      padding-bottom: 0;
+      min-height: 3rem;
+    }
+
+    .dropdown-item, .dropdown-header {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+    }
+
+    .none {
+      cursor: default;
+      pointer-events: none;
+    }
+
+    .multi-item button {
+      height: $itemHeight;
+      display: flex;
+
+      .label {
+        height: 1.5rem;
+        font-size: 14px;
+        line-height: 1.71;
+        flex: 1;
+      }
+
+      .challenge {
+        height: 1rem;
+        font-size: 12px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.33;
+        letter-spacing: normal;
+        text-align: right;
+        color: $gray-100;
+        align-self: center;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        margin-right: 0.25rem;
+      }
+
+      &:hover {
+        .challenge {
+          color: $purple-300;
+        }
+      }
+    }
+
+    .item-group {
+      max-height: #{5*$itemHeight};
+
+      &.add-new {
+        height: 30px;
+
+        .hint {
+          display: block;
+        }
+      }
+      &.scroll {
+        overflow-y: scroll;
+      }
+    }
+
+    .hint {
+      display: none;
+      height: 2rem;
+      font-size: 12px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 1.33;
+      letter-spacing: normal;
+      color: $gray-100;
+
+      margin-left: 0.75rem;
+      margin-top: 0.5rem;
+    }
+  }
+
+</style>
+
+<script>
+import Vue from 'vue';
+import MultiList from '@/components/tasks/modal-controls/multiList';
+import markdownDirective from '@/directives/markdown';
+
+export default {
+  directives: {
+    markdown: markdownDirective,
+  },
+  components: {
+    MultiList,
+  },
+  data () {
+    return {
+      preventHide: true,
+      isOpened: false,
+      selected: this.selectedItems,
+      search: '',
+    };
+  },
+  created () {
+    document.addEventListener('keyup', this.handleEsc);
+  },
+  beforeDestroy () {
+    document.removeEventListener('keyup', this.handleEsc);
+  },
+  methods: {
+    closeSelectPopup () {
+      this.preventHide = false;
+      this.isOpened = false;
+      Vue.nextTick(() => {
+        this.$refs.dropdown.hide();
+      });
+    },
+    openOrClose ($event) {
+      if (this.isOpened) {
+        this.closeSelectPopup();
+        $event.preventDefault();
+      }
+    },
+    closeIfOpen () {
+      this.closeSelectPopup();
+    },
+    selectItem (item) {
+      this.selectedItems.push(item.id);
+      this.$emit('toggle', item.id);
+    },
+    removeItem ($event) {
+      const foundIndex = this.selectedItems.findIndex(t => t === $event);
+
+      this.selectedItems.splice(foundIndex, 1);
+
+      this.$emit('toggle', $event);
+    },
+    hideCallback ($event) {
+      if (this.preventHide) {
+        $event.preventDefault();
+        return;
+      }
+
+      this.isOpened = false;
+    },
+    wasOpened () {
+      this.isOpened = true;
+      this.preventHide = true;
+    },
+    handleEsc (e) {
+      if (e.keyCode === 27) {
+        this.closeSelectPopup();
+      }
+    },
+    handleSubmit () {
+      if (!this.addNew) return;
+      const { search } = this;
+      this.$emit('addNew', search);
+
+      this.search = '';
+    },
+  },
+  computed: {
+    selectedItemsIdList () {
+      return this.selectedItems
+        ? this.selectedItems.map(t => t)
+        : [];
+    },
+    allItemsMap () {
+      const obj = {};
+      this.allItems.forEach(t => {
+        obj[t.id] = t;
+      });
+      return obj;
+    },
+    selectedItemsAsObjects () {
+      return this.selectedItems.map(t => this.allItemsMap[t]);
+    },
+    availableToSelect () {
+      const availableItems = this.allItems.filter(t => !this.selectedItemsIdList.includes(t.id));
+
+      const searchString = this.search.toLowerCase();
+
+      const filteredItems = availableItems.filter(i => i.name.toLowerCase().includes(searchString));
+
+      return filteredItems;
+    },
+  },
+  props: {
+    addNew: {
+      type: Boolean,
+      default: false,
+    },
+    allItems: {
+      type: Array,
+    },
+    emptyMessage: {
+      type: String,
+    },
+    pillInvert: {
+      type: Boolean,
+      default: false,
+    },
+    searchPlaceholder: {
+      type: String,
+    },
+    selectedItems: {
+      type: Array,
+    },
+  },
+  watch: {
+    selected () {
+      this.$emit('changed', this.selected);
+    },
+  },
+  mounted () {
+    this.$refs.dropdown.clickOutHandler = () => {
+      this.closeSelectPopup();
+    };
+  },
+};
+</script>
diff --git a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
new file mode 100644
index 0000000000..f3e80d64a3
--- /dev/null
+++ b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <select-list :items="items"
+                 :value="selected"
+                 class="array-select"
+                 :class="{disabled: disabled}"
+                 :disabled="disabled"
+                 @select="selectItem($event)">
+      <template v-slot:item="{ item }">
+        <span class="label">{{ $t(item) }}</span>
+      </template>
+    </select-list>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .array-select.disabled {
+    .btn-secondary:disabled, .btn-secondary.disabled, .dropdown >
+    .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .dropdown >
+    .btn-secondary.dropdown-toggle:not(.btn-success).disabled, .show >
+    .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .show >
+    .btn-secondary.dropdown-toggle:not(.btn-success).disabled {
+      background: $gray-700;
+    }
+
+    .dropdown-toggle::after {
+      color: $gray-300;
+      border-top-color: $gray-300;
+    }
+
+    .label {
+      color: $gray-200;
+    }
+  }
+
+  .array-select .disabled, .array-select .disabled:hover {
+    box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+  }
+</style>
+
+<script>
+import selectList from '@/components/ui/selectList';
+
+export default {
+  components: {
+    selectList,
+  },
+  data () {
+    return {
+      selected: this.items.find(i => i === this.value),
+    };
+  },
+  methods: {
+    selectItem (item) {
+      this.selected = item;
+      this.$emit('select', item);
+    },
+  },
+  props: {
+    items: {
+      type: Array,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    value: [String, Number, Object],
+  },
+};
+</script>
diff --git a/website/client/src/components/tasks/tagsPopup.vue b/website/client/src/components/tasks/tagsPopup.vue
deleted file mode 100644
index fd813687c8..0000000000
--- a/website/client/src/components/tasks/tagsPopup.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <div class="tags-popup">
-    <!-- eslint-disable vue/no-use-v-if-with-v-for -->
-    <div
-      v-for="tagsType in tagsByType"
-      v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'"
-      :key="tagsType.key"
-      class="tags-category d-flex"
-    >
-      <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-      <div class="tags-header">
-        <strong v-once>{{ $t(tagsType.key) }}</strong>
-      </div>
-      <div class="tags-list container">
-        <div class="row">
-          <div
-            v-for="(tag) in tagsType.tags"
-            :key="tag.id"
-            class="col-4"
-          >
-            <div class="custom-control custom-checkbox">
-              <input
-                :id="`tag-${tag.id}`"
-                v-model="selectedTags"
-                class="custom-control-input"
-                type="checkbox"
-                :value="tag.id"
-              >
-              <label
-                v-markdown="tag.name"
-                class="custom-control-label"
-                :title="tag.name"
-                :for="`tag-${tag.id}`"
-              ></label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="tags-footer">
-      <span
-        class="clear-tags"
-        @click="clearTags()"
-      >{{ $t("clearTags") }}</span>
-      <span
-        class="close-tags"
-        @click="close()"
-      >{{ $t("close") }}</span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .tags-popup {
-    padding-left: 24px;
-    padding-right: 24px;
-    width: 593px;
-    z-index: 9999;
-    background: $white;
-    border-radius: 2px;
-    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
-    font-size: 14px;
-    line-height: 1.43;
-    text-overflow: ellipsis;
-
-    .tags-category {
-      border-bottom: 1px solid $gray-600;
-      padding-bottom: 24px;
-      padding-top: 24px;
-    }
-
-    .tags-header {
-       flex-basis: 96px;
-       flex-shrink: 0;
-
-      a {
-        font-size: 12px;
-        line-height: 1.33;
-        color: $blue-10;
-        margin-top: 4px;
-
-        &:focus, &:hover, &:active {
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .tags-list {
-      .custom-control-label {
-        color: $gray-50 !important;
-        font-weight: normal;
-      }
-    }
-
-    .tags-footer {
-      border-top: 1px solid $gray-600;
-
-      display: flex;
-      justify-content: center;
-
-      .close-tags {
-        color: $blue-10;
-        margin: 1.1em 0;
-        margin-left: 2em;
-        font-size: 14px;
-
-        &:hover {
-          text-decoration: underline;
-          cursor: pointer;
-        }
-      }
-
-      .clear-tags {
-        cursor: pointer;
-        margin: 1.1em 0;
-        color: $red-50;
-        font-size: 14px;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-</style>
-
-<script>
-import markdownDirective from '@/directives/markdown';
-
-export default {
-  directives: {
-    markdown: markdownDirective,
-  },
-  props: ['tags', 'value'],
-  data () {
-    return {
-      selectedTags: [],
-    };
-  },
-  computed: {
-    tagsByType () {
-      const tagsByType = {
-        challenges: {
-          key: 'challenges',
-          tags: [],
-        },
-        groups: {
-          key: 'groups',
-          tags: [],
-        },
-        user: {
-          key: 'tags',
-          tags: [],
-        },
-      };
-      this.$props.tags.forEach(t => {
-        if (t.group) {
-          tagsByType.groups.tags.push(t);
-        } else if (t.challenge) {
-          tagsByType.challenges.tags.push(t);
-        } else {
-          tagsByType.user.tags.push(t);
-        }
-      });
-      return tagsByType;
-    },
-  },
-  watch: {
-    selectedTags () {
-      this.$emit('input', this.selectedTags);
-    },
-  },
-  mounted () {
-    this.selectedTags = this.value;
-  },
-  methods: {
-    clearTags () {
-      this.selectedTags = [];
-    },
-    close () {
-      this.$emit('close');
-    },
-  },
-};
-</script>
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index 7e64c3972f..a86c4e0753 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="task-wrapper">
     <div
-      class="task"
-      :class="[{'groupTask': task.group.id}, `type_${task.type}`]"
+      class="task transition"
+      :class="[{
+        'groupTask': task.group.id,
+        'task-not-editable': !teamManagerAccess},
+        `type_${task.type}`
+      ]"
       @click="castEnd($event, task)"
     >
       <approval-header
@@ -12,12 +16,13 @@
       />
       <div
         class="d-flex"
-        :class="{'task-not-scoreable': isUser !== true}"
+        :class="{'task-not-scoreable': isUser !== true || task.group.approval.requested
+          && !(task.group.approval.approved && task.type === 'habit')}"
       >
         <!-- Habits left side control-->
         <div
           v-if="task.type === 'habit'"
-          class="left-control d-flex align-items-center justify-content-center"
+          class="left-control d-flex justify-content-center pt-3"
           :class="[{
             'control-bottom-box': task.group.id,
             'control-top-box': approvalsClass
@@ -28,8 +33,11 @@
             :class="[{
               'habit-control-positive-enabled': task.up && isUser,
               'habit-control-positive-disabled': !task.up && isUser,
+              'task-not-scoreable': isUser !== true
+                || (task.group.approval.requested && !task.group.approval.approved),
             }, controlClass.up.inner]"
-            @click="(isUser && task.up) ? score('up') : null"
+            @click="(isUser && task.up && (!task.group.approval.requested
+              || task.group.approval.approved)) ? score('up') : null"
           >
             <div
               v-if="!isUser"
@@ -55,7 +63,8 @@
           <div
             class="task-control daily-todo-control"
             :class="controlClass.inner"
-            @click="isUser ? score(task.completed ? 'down' : 'up') : null"
+            @click="isUser && !task.group.approval.requested
+              ? score(task.completed ? 'down' : 'up' ) : null"
           >
             <div
               v-if="!isUser"
@@ -66,7 +75,10 @@
             <div
               v-else
               class="svg-icon check"
-              :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}"
+              :class="{
+                'display-check-icon': task.completed || task.group.approval.requested,
+                [controlClass.checkbox]: true,
+              }"
               v-html="icons.check"
             ></div>
           </div>
@@ -74,7 +86,7 @@
         <!-- Task title, description and icons-->
         <div
           class="task-content"
-          :class="contentClass"
+          :class="[{'cursor-auto': !teamManagerAccess}, contentClass]"
         >
           <div
             class="task-clickable-area"
@@ -85,7 +97,7 @@
               <h3
                 v-markdown="task.text"
                 class="task-title"
-                :class="{ 'has-notes': task.notes }"
+                :class="{ 'has-notes': task.notes || (!isUser && task.group.managerNotes)}"
               ></h3>
               <menu-dropdown
                 v-if="!isRunningYesterdailies && showOptions"
@@ -157,7 +169,7 @@
               </menu-dropdown>
             </div>
             <div
-              v-markdown="task.notes"
+              v-markdown="displayNotes"
               class="task-notes small-text"
               :class="{'has-checklist': task.notes && hasChecklist}"
             ></div>
@@ -171,13 +183,13 @@
               <div
                 v-b-tooltip.hover.right="$t(`${task.collapseChecklist
                   ? 'expand': 'collapse'}Checklist`)"
-                class="collapse-checklist d-flex align-items-center expand-toggle"
+                class="collapse-checklist mb-2 d-flex align-items-center expand-toggle"
                 :class="{open: !task.collapseChecklist}"
                 @click="collapseChecklist(task)"
               >
-                <div
-                  class="svg-icon"
-                  v-html="icons.checklist"
+                <div v-once
+                     class="svg-icon"
+                     v-html="icons.checklist"
                 ></div>
                 <span>{{ checklistProgress }}</span>
               </div>
@@ -302,7 +314,7 @@
         <!-- Habits right side control-->
         <div
           v-if="task.type === 'habit'"
-          class="right-control d-flex align-items-center justify-content-center"
+          class="right-control d-flex justify-content-center pt-3"
           :class="[{
             'control-bottom-box': task.group.id,
             'control-top-box': approvalsClass}, controlClass.down.bg]"
@@ -312,8 +324,11 @@
             :class="[{
               'habit-control-negative-enabled': task.down && isUser,
               'habit-control-negative-disabled': !task.down && isUser,
+              'task-not-scoreable': isUser !== true
+                || (task.group.approval.requested && !task.group.approval.approved),
             }, controlClass.down.inner]"
-            @click="(isUser && task.down) ? score('down') : null"
+            @click="(isUser && task.down && (!task.group.approval.requested
+              || task.group.approval.approved)) ? score('down') : null"
           >
             <div
               v-if="!isUser"
@@ -348,6 +363,7 @@
         v-if="task.group.id"
         :task="task"
         :group="group"
+        @claimRewards="score('up')"
       />
     </div>
   </div>
@@ -368,7 +384,7 @@
   }
 
   .cursor-auto {
-    cursor: auto;
+    cursor: auto !important;
   }
 
   .task {
@@ -378,7 +394,7 @@
     border-radius: 2px;
     position: relative;
 
-    &:hover {
+    &:hover:not(.task-not-editable) {
       box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
       z-index: 11;
     }
@@ -393,8 +409,7 @@
   }
 
   .task.groupTask {
-
-    &:hover {
+    &:hover:not(.task-not-editable) {
       border: $purple-400 solid 1px;
       border-radius: 3px;
       margin: -1px; // to counter the border width
@@ -551,7 +566,6 @@
     line-height: 1.2;
     text-align: center;
     color: $gray-200;
-    margin-bottom: 9px;
 
     &.open {
     }
@@ -795,13 +809,9 @@
 
 <script>
 import moment from 'moment';
-import axios from 'axios';
-import Vue from 'vue';
 import { v4 as uuid } from 'uuid';
 import isEmpty from 'lodash/isEmpty';
 import { mapState, mapGetters, mapActions } from '@/libs/store';
-import scoreTask from '@/../../common/script/ops/scoreTask';
-import * as Analytics from '@/libs/analytics';
 
 import positiveIcon from '@/assets/svg/positive.svg';
 import negativeIcon from '@/assets/svg/negative.svg';
@@ -820,7 +830,7 @@ import checklistIcon from '@/assets/svg/checklist.svg';
 import lockIcon from '@/assets/svg/lock.svg';
 import menuIcon from '@/assets/svg/menu.svg';
 import markdownDirective from '@/directives/markdown';
-import notifications from '@/mixins/notifications';
+import scoreTask from '@/mixins/scoreTask';
 import approvalHeader from './approvalHeader';
 import approvalFooter from './approvalFooter';
 import MenuDropdown from '../ui/customMenuDropdown';
@@ -834,7 +844,7 @@ export default {
   directives: {
     markdown: markdownDirective,
   },
-  mixins: [notifications],
+  mixins: [scoreTask],
   props: ['task', 'isUser', 'group', 'challenge', 'dueDate'], // @TODO: maybe we should store the group on state?
   data () {
     return {
@@ -918,6 +928,7 @@ export default {
       return classes;
     },
     showStreak () {
+      if (!this.task.userId) return false;
       if (this.task.streak !== undefined) return true;
       if (this.task.type === 'habit' && (this.task.up || this.task.down)) return true;
       return false;
@@ -948,7 +959,7 @@ export default {
 
       return this.task.challenge.shortName ? this.task.challenge.shortName.toString() : '';
     },
-    isChallangeTask () {
+    isChallengeTask () {
       return !isEmpty(this.task.challenge);
     },
     isGroupTask () {
@@ -957,7 +968,7 @@ export default {
     taskCategory () {
       let taskCategory = 'default';
       if (this.isGroupTask) taskCategory = 'group';
-      else if (this.isChallangeTask) taskCategory = 'challenge';
+      else if (this.isChallengeTask) taskCategory = 'challenge';
       return taskCategory;
     },
     showDelete () {
@@ -969,6 +980,14 @@ export default {
     showOptions () {
       return this.showEdit || this.showDelete || this.isUser;
     },
+    teamManagerAccess () {
+      if (!this.isGroupTask || !this.group) return true;
+      return (this.group.leader._id === this.user._id || this.group.managers[this.user._id]);
+    },
+    displayNotes () {
+      if (this.isGroupTask && !this.isUser) return this.task.group.managerNotes;
+      return this.task.notes;
+    },
   },
   methods: {
     ...mapActions({
@@ -1021,125 +1040,8 @@ export default {
     castEnd (e, task) {
       setTimeout(() => this.$root.$emit('castEnd', task, 'task', e), 0);
     },
-    async score (direction) {
-      if (this.castingSpell) return;
-
-      // TODO move to an action
-      const Content = this.$store.state.content;
-      const { user } = this;
-      const { task } = this;
-
-      if (task.group.approval.required) {
-        task.group.approval.requested = true;
-        const groupResponse = await axios.get(`/api/v4/groups/${task.group.id}`);
-        const managers = Object.keys(groupResponse.data.data.managers);
-        managers.push(groupResponse.data.data.leader._id);
-        if (managers.indexOf(user._id) !== -1) {
-          task.group.approval.approved = true;
-        }
-      }
-
-      try {
-        scoreTask({ task, user, direction });
-      } catch (err) {
-        this.text(err.message);
-        return;
-      }
-
-      switch (this.task.type) { // eslint-disable-line default-case
-        case 'habit':
-          this.$root.$emit('playSound', direction === 'up' ? 'Plus_Habit' : 'Minus_Habit');
-          break;
-        case 'todo':
-          this.$root.$emit('playSound', 'Todo');
-          break;
-        case 'daily':
-          this.$root.$emit('playSound', 'Daily');
-          break;
-        case 'reward':
-          this.$root.$emit('playSound', 'Reward');
-          break;
-      }
-
-
-      Analytics.updateUser();
-      const response = await axios.post(`/api/v4/tasks/${task._id}/score/${direction}`);
-      // used to notify drops, critical hits and other bonuses
-      const tmp = response.data.data._tmp || {};
-      const { crit } = tmp;
-      const { drop } = tmp;
-      const { firstDrops } = tmp;
-      const { quest } = tmp;
-
-      if (crit) {
-        const critBonus = crit * 100 - 100;
-        this.crit(critBonus);
-      }
-
-      if (quest && user.party.quest && user.party.quest.key) {
-        const userQuest = Content.quests[user.party.quest.key];
-        if (quest.progressDelta && userQuest.boss) {
-          this.damage(quest.progressDelta.toFixed(1));
-        } else if (quest.collection && userQuest.collect) {
-          user.party.quest.progress.collectedItems += 1;
-          this.quest('questCollection', quest.collection);
-        }
-      }
-
-      if (firstDrops) {
-        if (!user.items.eggs[firstDrops.egg]) Vue.set(user.items.eggs, firstDrops.egg, 0);
-        if (!user.items.hatchingPotions[firstDrops.hatchingPotion]) {
-          Vue.set(user.items.hatchingPotions, firstDrops.hatchingPotion, 0);
-        }
-        user.items.eggs[firstDrops.egg] += 1;
-        user.items.hatchingPotions[firstDrops.hatchingPotion] += 1;
-      }
-
-      if (drop) {
-        let dropText;
-        let dropNotes;
-        let type;
-
-        this.$root.$emit('playSound', 'Item_Drop');
-
-        // Note: For Mystery Item gear, drop.type will be 'head', 'armor', etc
-        // so we use drop.notificationType below.
-
-        if (drop.type !== 'gear' && drop.type !== 'Quest' && drop.notificationType !== 'Mystery') {
-          if (drop.type === 'Food') {
-            type = 'food';
-          } else if (drop.type === 'HatchingPotion') {
-            type = 'hatchingPotions';
-          } else {
-            type = `${drop.type.toLowerCase()}s`;
-          }
-
-          if (!user.items[type][drop.key]) {
-            Vue.set(user.items[type], drop.key, 0);
-          }
-          user.items[type][drop.key] += 1;
-        }
-
-        if (drop.type === 'HatchingPotion') {
-          dropText = Content.hatchingPotions[drop.key].text();
-          dropNotes = Content.hatchingPotions[drop.key].notes();
-          this.drop(this.$t('messageDropPotion', { dropText, dropNotes }), drop);
-        } else if (drop.type === 'Egg') {
-          dropText = Content.eggs[drop.key].text();
-          dropNotes = Content.eggs[drop.key].notes();
-          this.drop(this.$t('messageDropEgg', { dropText, dropNotes }), drop);
-        } else if (drop.type === 'Food') {
-          dropText = Content.food[drop.key].textA();
-          dropNotes = Content.food[drop.key].notes();
-          this.drop(this.$t('messageDropFood', { dropText, dropNotes }), drop);
-        } else if (drop.type === 'Quest') {
-          // TODO $rootScope.selectedQuest = Content.quests[drop.key];
-          // $rootScope.openModal('questDrop', {controller:'PartyCtrl', size:'sm'});
-        } else {
-          // Keep support for another type of drops that might be added
-          this.drop(drop.dialog);
-        }
-      }
+    score (direction) {
+      this.taskScore(this.task, direction);
     },
     handleBrokenTask (task) {
       if (this.$store.state.isRunningYesterdailies) return;
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index cfe25f2949..aa84dcdf75 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -7,30 +7,32 @@
     @hidden="onClose()"
     @show="handleOpen()"
     @shown="focusInput()"
+    :hide-footer="true"
   >
     <div
       v-if="task"
       slot="modal-header"
       class="task-modal-header p-4"
       :class="cssClass('bg')"
-      @click="handleClick($event)"
     >
       <div class="d-flex align-items-center mb-3">
         <h2
           class="my-auto"
-          :class="cssClassHeadings"
+          :class="cssClass('headings')"
         >
           {{ title }}
         </h2>
         <div class="ml-auto d-flex align-items-center">
-          <span
+          <button
             class="cancel-task-btn mr-3"
-            :class="cssClassHeadings"
+            :class="cssClass('headings')"
             @click="cancel()"
-          >{{ $t('cancel') }}</span>
-          <div
+            type="button"
+          >{{ $t('cancel') }}</button>
+          <button
             class="btn btn-secondary d-flex align-items-center justify-content-center"
             :class="{disabled: !canSave}"
+            type="button"
             @click="submit()"
           >
             <div
@@ -45,14 +47,15 @@
             >
               {{ $t('create') }}
             </div>
-          </div>
+          </button>
         </div>
       </div>
       <div class="form-group">
-        <label
-          :class="cssClassHeadings"
-          class="mb-1"
-        >{{ `${$t('text')}*` }}</label>
+        <lockable-label
+          :classOverride="cssClass('headings')"
+          :locked="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+          :text="`${$t('text')}*`"
+        />
         <input
           ref="inputToFocus"
           v-model="task.text"
@@ -65,18 +68,21 @@
           :placeholder="$t('addATitle')"
         >
       </div>
-      <div class="form-group mb-0">
+      <div
+        class="form-group mb-0"
+        v-if="isUserTask || isChallengeTask || isOriginalChallengeTask"
+      >
         <label
           class="d-flex align-items-center justify-content-between mb-1"
         >
           <span
-            :class="cssClassHeadings"
+            :class="cssClass('headings')"
           >{{ $t('notes') }}</span>
           <small>
             <a
               target="_blank"
               href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet"
-              :class="cssClassHeadings"
+              :class="cssClass('headings')"
             >{{ $t('markdownHelpLink') }}</a>
           </small>
         </label>
@@ -87,22 +93,57 @@
           :placeholder="$t('addNotes')"
         ></textarea>
       </div>
+      <div
+        class="form-group mb-0 mt-3"
+        v-if="showManagerNotes"
+      >
+        <lockable-label
+          :classOverride="cssClass('headings')"
+          :locked="groupAccessRequiredAndOnPersonalPage"
+          :text="$t('managerNotes')"
+        />
+        <textarea
+          v-model="managerNotes"
+          class="form-control input-notes"
+          :class="cssClass('input')"
+          :placeholder="$t('addNotes')"
+          :disabled="groupAccessRequiredAndOnPersonalPage"
+        ></textarea>
+      </div>
+      <div
+        v-if="task.group && task.group.assignedDate && !task.group.assigningUsername"
+        class="mt-3 mb-n2"
+        :class="cssClass('headings')"
+        v-html="$t('assignedDateOnly', {
+          date: formattedDate(task.group.assignedDate),
+        })"
+      >
+      </div>
+      <div
+        v-if="task.group && task.group.assignedDate && task.group.assigningUsername"
+        class="mt-3 mb-n2"
+        :class="cssClass('headings')"
+        v-html="$t('assignedDateAndUser', {
+          username: task.group.assigningUsername,
+          date: formattedDate(task.group.assignedDate),
+        })"
+      >
+      </div>
     </div>
     <div
-      class="task-modal-content"
-      @click="handleClick($event)"
+      class="task-modal-content px-4"
+      :class="cssClass('content')"
     >
       <form
         v-if="task"
         @submit.stop.prevent="submit()"
-        @click="handleClick($event)"
       >
         <div
           v-if="task.type === 'reward'"
-          class="option mt-0"
+          class="option mt-3"
         >
           <div class="form-group">
-            <label v-once>{{ $t('cost') }}</label>
+            <label v-once class="mb-1">{{ $t('cost') }}</label>
             <div class="input-group">
               <div class="input-group-prepend input-group-icon align-items-center">
                 <div
@@ -124,18 +165,23 @@
         </div>
         <div
           v-if="checklistEnabled"
-          class="option mt-0"
+          class="option mt-3"
         >
-          <checklist :items.sync="task.checklist" />
+          <checklist :items.sync="task.checklist"
+                     :disableItems="groupAccessRequiredAndOnPersonalPage"
+                     :disableDrag="groupAccessRequiredAndOnPersonalPage"
+          />
         </div>
         <div
           v-if="task.type === 'habit'"
-          class="d-flex justify-content-center"
+          class="d-flex justify-content-center mt-3"
         >
-          <div
+          <button
+            type="button"
             class="habit-option-container no-transition
               d-flex flex-column justify-content-center align-items-center"
             :class="!task.up ? cssClass('habit-control-disabled') : ''"
+            :disabled="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
             @click="toggleUpDirection()"
           >
             <div
@@ -155,11 +201,13 @@
             >
               {{ $t('positive') }}
             </div>
-          </div>
-          <div
+          </button>
+          <button
+            type="button"
             class="habit-option-container no-transition
               d-flex flex-column justify-content-center align-items-center"
             :class="!task.down ? cssClass('habit-control-disabled') : ''"
+            :disabled="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
             @click="toggleDownDirection()"
           >
             <div
@@ -179,405 +227,251 @@
             >
               {{ $t('negative') }}
             </div>
-          </div>
+          </button>
         </div>
         <template v-if="task.type !== 'reward'">
-          <label v-once>
-            <span class="float-left">{{ $t('difficulty') }}</span>
+          <div class="d-flex mt-3">
+            <lockable-label
+              :locked="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+              :text="$t('difficulty')"
+            />
             <div
               v-b-tooltip.hover.righttop="$t('difficultyHelp')"
-              class="svg-icon info-icon"
+              class="svg-icon info-icon mb-auto ml-1"
               v-html="icons.information"
             ></div>
-          </label>
-          <div class="d-flex justify-content-center difficulty-options">
-            <div
-              class="option-item"
-              :class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')"
-              @click="setDifficulty(0.1)"
-            >
-              <div
-                class="option-item-box"
-                :class="task.priority === 0.1 ? cssClass('bg') : ''"
-              >
-                <div
-                  class="svg-icon difficulty-trivial-icon"
-                  v-html="icons.difficultyTrivial"
-                ></div>
-              </div>
-              <div
-                class="option-item-label"
-                :class="task.priority === 0.1 ? cssClass('text') : ''"
-              >
-                {{ $t('trivial') }}
-              </div>
-            </div>
-            <div
-              class="option-item"
-              :class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')"
-              @click="setDifficulty(1)"
-            >
-              <div
-                class="option-item-box"
-                :class="task.priority === 1 ? cssClass('bg') : ''"
-              >
-                <div
-                  class="svg-icon difficulty-normal-icon"
-                  v-html="icons.difficultyNormal"
-                ></div>
-              </div>
-              <div
-                class="option-item-label"
-                :class="task.priority === 1 ? cssClass('text') : ''"
-              >
-                {{ $t('easy') }}
-              </div>
-            </div>
-            <div
-              class="option-item"
-              :class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')"
-              @click="setDifficulty(1.5)"
-            >
-              <div
-                class="option-item-box"
-                :class="task.priority === 1.5 ? cssClass('bg') : ''"
-              >
-                <div
-                  class="svg-icon difficulty-medium-icon"
-                  v-html="icons.difficultyMedium"
-                ></div>
-              </div>
-              <div
-                class="option-item-label"
-                :class="task.priority === 1.5 ? cssClass('text') : ''"
-              >
-                {{ $t('medium') }}
-              </div>
-            </div>
-            <div
-              class="option-item"
-              :class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')"
-              @click="setDifficulty(2)"
-            >
-              <div
-                class="option-item-box"
-                :class="task.priority === 2 ? cssClass('bg') : ''"
-              >
-                <div
-                  class="svg-icon difficulty-hard-icon"
-                  v-html="icons.difficultyHard"
-                ></div>
-              </div>
-              <div
-                class="option-item-label"
-                :class="task.priority === 2 ? cssClass('text') : ''"
-              >
-                {{ $t('hard') }}
-              </div>
-            </div>
           </div>
+          <select-difficulty
+            :value="task.priority"
+            @select="setDifficulty($event)"
+            :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+          />
+
         </template>
         <div
-          v-if="task.type === 'todo'"
-          class="option"
+          v-if="task.type === 'todo' && (task.date
+            || !(groupAccessRequiredAndOnPersonalPage || challengeAccessRequired))"
+          class="option mt-3"
         >
           <div class="form-group">
-            <label v-once>{{ $t('dueDate') }}</label>
+            <lockable-label
+              :locked="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+              :text="$t('dueDate')"
+            />
             <datepicker
               v-model="task.date"
               :calendar-icon="icons.calendar"
-              :clear-button="true"
+              :clear-button="!challengeAccessRequired && !groupAccessRequiredAndOnPersonalPage"
               :clear-button-text="$t('clear')"
-              :today-button="!challengeAccessRequired"
-              :today-button-text="$t('today')"
-              :disabled-picker="challengeAccessRequired"
+              :today-button="false"
+              :disabled-picker="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :class="{disabled: challengeAccessRequired || groupAccessRequiredAndOnPersonalPage}"
               :highlighted="calendarHighlights"
             />
           </div>
         </div>
         <div
           v-if="task.type === 'daily'"
-          class="option"
+          class="option mt-3"
         >
           <div class="form-group">
-            <label v-once>{{ $t('startDate') }}</label>
+            <lockable-label
+              :locked="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :text="$t('startDate')"
+            />
             <datepicker
               v-model="task.startDate"
               :calendar-icon="icons.calendar"
               :clear-button="false"
-              :today-button="!challengeAccessRequired"
-              :today-button-text="$t('today')"
-              :disabled-picker="challengeAccessRequired"
+              :today-button="false"
+              :disabled-picker="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :class="{disabled: challengeAccessRequired || groupAccessRequiredAndOnPersonalPage}"
               :highlighted="calendarHighlights"
             />
           </div>
         </div>
         <div
           v-if="task.type === 'daily'"
-          class="option"
+          class="option mt-3"
         >
           <div class="form-group">
-            <label v-once>{{ $t('repeats') }}</label>
-            <b-dropdown
-              class="inline-dropdown"
-              :text="$t(task.frequency)"
-            >
-              <b-dropdown-item
-                v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']"
-                :key="frequency"
-                :disabled="challengeAccessRequired"
-                :class="{active: task.frequency === frequency}"
-                @click="task.frequency = frequency"
-              >
-                {{ $t(frequency) }}
-              </b-dropdown-item>
-            </b-dropdown>
+            <lockable-label
+              :locked="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :text="$t('repeats')"
+            />
+            <select-translated-array
+              :disabled="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :items="['daily', 'weekly', 'monthly', 'yearly']"
+              :value="task.frequency"
+              @select="task.frequency = $event"
+            />
           </div>
+        </div>
+        <div
+          v-if="task.type === 'daily'"
+          class="option mt-3"
+        >
           <div class="form-group">
-            <label v-once>{{ $t('repeatEvery') }}</label>
-            <div class="input-group">
-              <input
-                v-model="task.everyX"
-                class="form-control"
-                type="number"
-                min="0"
-                max="9999"
-                required="required"
-                :disabled="challengeAccessRequired"
-              >
-              <div class="input-group-append input-group-text">
+            <lockable-label
+              :locked="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :text="$t('repeatEvery')"
+            />
+            <div
+              class="input-group-outer"
+              :class="{
+                disabled: challengeAccessRequired || groupAccessRequiredAndOnPersonalPage
+              }"
+            >
+              <div class="input-group">
+                <input
+                  v-model="task.everyX"
+                  class="form-control"
+                  type="number"
+                  min="0"
+                  max="9999"
+                  required="required"
+                  :disabled="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+                >
+
+              </div>
+              <div class="input-group-spaced input-group-text">
                 {{ repeatSuffix }}
               </div>
             </div>
           </div>
-          <template v-if="task.frequency === 'weekly'">
-            <div class="form-group">
-              <label
-                v-once
-                class="d-block"
-              >{{ $t('repeatOn') }}</label>
-              <div
+        </div>
+        <div
+          v-if="task.type === 'daily' && task.frequency === 'weekly'"
+          class="option mt-3"
+        >
+          <div class="form-group">
+            <lockable-label
+              :locked="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :text="$t('repeatOn')"
+            />
+            <div class="toggle-group">
+              <toggle-checkbox
                 v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']"
+                :tab-index="dayNumber"
                 :key="dayNumber"
-                class="form-check-inline weekday-check mr-0"
+                :checked.sync="task.repeat[day]"
+                :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+                :text="weekdaysMin(dayNumber)"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="task.type === 'daily' && task.frequency === 'monthly'"
+          class="option mt-3"
+        >
+          <label
+            v-once
+            class="d-block mb-1"
+          >{{ $t('repeatOn') }}</label>
+          <div class="form-radio">
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                id="repeat-dayOfMonth"
+                v-model="repeatsOn"
+                class="custom-control-input"
+                type="radio"
+                value="dayOfMonth"
+                name="repeatsOn"
               >
-                <div class="custom-control custom-checkbox custom-control-inline">
-                  <input
-                    :id="`weekday-${dayNumber}`"
-                    v-model="task.repeat[day]"
-                    class="custom-control-input"
-                    type="checkbox"
-                    :disabled="challengeAccessRequired"
-                  >
-                  <label
-                    v-once
-                    class="custom-control-label"
-                    :for="`weekday-${dayNumber}`"
-                  >{{ weekdaysMin(dayNumber) }}</label>
-                </div>
-              </div>
+              <label
+                class="custom-control-label"
+                for="repeat-dayOfMonth"
+              >{{ $t('dayOfMonth') }}</label>
             </div>
-          </template>
-          <template v-if="task.frequency === 'monthly'">
-            <label
-              v-once
-              class="d-block"
-            >{{ $t('repeatOn') }}</label>
-            <div class="form-radio">
-              <div class="custom-control custom-radio custom-control-inline">
-                <input
-                  id="repeat-dayOfMonth"
-                  v-model="repeatsOn"
-                  class="custom-control-input"
-                  type="radio"
-                  value="dayOfMonth"
-                  name="repeatsOn"
-                >
-                <label
-                  class="custom-control-label"
-                  for="repeat-dayOfMonth"
-                >{{ $t('dayOfMonth') }}</label>
-              </div>
-              <div class="custom-control custom-radio custom-control-inline">
-                <input
-                  id="repeat-dayOfWeek"
-                  v-model="repeatsOn"
-                  class="custom-control-input"
-                  type="radio"
-                  value="dayOfWeek"
-                  name="repeatsOn"
-                >
-                <label
-                  class="custom-control-label"
-                  for="repeat-dayOfWeek"
-                >{{ $t('dayOfWeek') }}</label>
-              </div>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                id="repeat-dayOfWeek"
+                v-model="repeatsOn"
+                class="custom-control-input"
+                type="radio"
+                value="dayOfWeek"
+                name="repeatsOn"
+              >
+              <label
+                class="custom-control-label"
+                for="repeat-dayOfWeek"
+              >{{ $t('dayOfWeek') }}</label>
             </div>
-          </template>
+          </div>
         </div>
         <div
           v-if="isUserTask"
-          class="tags-select option"
+          class="tags-select option mt-3"
         >
           <div class="tags-inline form-group row">
             <label
               v-once
-              class="col-12"
+              class="col-12 mb-1"
             >{{ $t('tags') }}</label>
             <div class="col-12">
-              <div
-                class="category-wrap"
-                :class="{ active: showTagsSelect }"
-                @click="toggleTagSelect()"
-              >
-                <span
-                  v-if="task.tags && task.tags.length === 0"
-                  class="category-select"
-                >
-                  <div class="tags-none">{{ $t('none') }}</div>
-                  <div class="dropdown-toggle"></div>
-                </span>
-                <span
-                  v-else
-                  class="category-select"
-                >
-                  <div
-                    v-for="tagName in truncatedSelectedTags"
-                    :key="tagName"
-                    v-markdown="tagName"
-                    class="category-label"
-                    :title="tagName"
-                  ></div>
-                  <div
-                    v-if="remainingSelectedTags.length > 0"
-                    class="tags-more"
-                  >+{{ $t('more', { count: remainingSelectedTags.length }) }}</div>
-                  <div class="dropdown-toggle"></div>
-                </span>
-              </div>
+              <select-multi :selected-items="task.tags"
+                            :all-items="user.tags"
+                            :add-new="true"
+                            :empty-message="$t('addTags')"
+                            :search-placeholder="$t('enterTag')"
+                            @changed="task.tags = $event"
+                            @addNew="addTag"
+                            ref="selectTag" />
             </div>
           </div>
-          <tags-popup
-            v-if="showTagsSelect"
-            ref="popup"
-            v-model="task.tags"
-            :tags="user.tags"
-            @close="closeTagsPopup()"
-          />
         </div>
         <div
           v-if="task.type === 'habit'"
-          class="option"
+          class="option mt-3"
         >
           <div class="form-group">
-            <label v-once>{{ $t('resetStreak') }}</label>
-            <b-dropdown
-              class="inline-dropdown"
-              :text="$t(task.frequency)"
-              :disabled="challengeAccessRequired"
-            >
-              <b-dropdown-item
-                v-for="frequency in ['daily', 'weekly', 'monthly']"
-                :key="frequency"
-                :class="{active: task.frequency === frequency}"
-                @click="task.frequency = frequency"
-              >
-                {{ $t(frequency) }}
-              </b-dropdown-item>
-            </b-dropdown>
+            <lockable-label
+              :locked="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :text="$t('resetStreak')"
+            />
+            <select-translated-array
+              :disabled="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
+              :items="['daily', 'weekly', 'monthly']"
+              :value="task.frequency"
+              @select="task.frequency = $event"
+            />
           </div>
         </div>
         <div
           v-if="groupId"
-          class="option group-options"
+          class="option group-options mt-3"
         >
           <div
             v-if="task.type === 'todo'"
             class="form-group"
           >
-            <label v-once>{{ $t('sharedCompletion') }}</label>
-            <b-dropdown
-              class="inline-dropdown"
-              :text="$t(sharedCompletion)"
-            >
-              <b-dropdown-item
-                v-for="completionOption in [
-                  'recurringCompletion', 'singleCompletion', 'allAssignedCompletion']"
-                :key="completionOption"
-                :class="{active: sharedCompletion === completionOption}"
-                @click="sharedCompletion = completionOption"
-              >
-                {{ $t(completionOption) }}
-              </b-dropdown-item>
-            </b-dropdown>
+            <label v-once class="mb-1">{{ $t('sharedCompletion') }}</label>
+            <select-translated-array
+              :items="['recurringCompletion', 'singleCompletion', 'allAssignedCompletion']"
+              :value="sharedCompletion"
+              @select="sharedCompletion = $event"
+            />
           </div>
-          <div class="form-group row">
+          <div class="form-group row mt-3 mb-3">
             <label
               v-once
-              class="col-12"
+              class="col-12 mb-1"
             >{{ $t('assignedTo') }}</label>
-            <div class="col-12 mt-2">
-              <div
-                class="category-wrap"
-                @click="showAssignedSelect = !showAssignedSelect"
-              >
-                <span
-                  v-if="assignedMembers && assignedMembers.length === 0"
-                  class="category-select"
-                >{{ $t('none') }}</span>
-                <span
-                  v-else
-                  class="category-select"
-                >
-                  <span
-                    v-for="memberId in assignedMembers"
-                    :key="memberId"
-                    class="mr-1"
-                  >{{ memberNamesById[memberId] }}</span>
-                </span>
-              </div>
-              <div
-                v-if="showAssignedSelect"
-                class="category-box"
-              >
-                <div class="container">
-                  <div class="row">
-                    <div
-                      v-for="member in members"
-                      :key="member._id"
-                      class="form-check col-6"
-                    >
-                      <div class="custom-control custom-checkbox">
-                        <input
-                          :id="`assigned-${member._id}`"
-                          v-model="assignedMembers"
-                          class="custom-control-input"
-                          type="checkbox"
-                          :value="member._id"
-                          @change="toggleAssignment(member._id)"
-                        >
-                        <label
-                          v-once
-                          class="custom-control-label"
-                          :for="`assigned-${member._id}`"
-                        >{{ member.profile.name }}</label>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <button
-                      class="btn btn-primary"
-                      @click.stop.prevent="showAssignedSelect = !showAssignedSelect"
-                    >
-                      {{ $t('close') }}
-                    </button>
-                  </div>
-                </div>
-              </div>
+            <div class="col-12">
+              <select-multi
+                :all-items="membersNameAndId"
+                :empty-message="$t('unassigned')"
+                :pill-invert="true"
+                :search-placeholder="$t('chooseTeamMember')"
+                :selected-items="assignedMembers"
+                @toggle="toggleAssignment($event)"
+                ref="assignMembers"
+              />
             </div>
           </div>
-          <div class="form-group">
-            <label v-once>{{ $t('approvalRequired') }}</label>
+          <div class="form-group flex-group mt-3 mb-4">
+            <label v-once class="mb-0 flex">{{ $t('approvalRequired') }}</label>
             <toggle-switch
               class="d-inline-block"
               :checked="requiresApproval"
@@ -587,7 +481,7 @@
         </div>
         <div
           v-if="advancedSettingsAvailable"
-          class="advanced-settings"
+          class="advanced-settings mt-3"
         >
           <div
             class="advanced-settings-toggle d-flex justify-content-between align-items-center"
@@ -598,7 +492,7 @@
               <div
                 class="svg-icon"
                 :class="{'toggle-open': showAdvancedOptions}"
-                v-html="icons.down"
+                v-html="icons.chevron"
               ></div>
             </div>
           </div>
@@ -606,17 +500,18 @@
             id="advancedOptionsCollapse"
             v-model="showAdvancedOptions"
           >
-            <div class="advanced-settings-body">
+            <div>
               <div
                 v-if="task.type === 'daily' && isUserTask && purpose === 'edit'"
-                class="option"
+                class="option mt-3"
               >
                 <div class="form-group">
-                  <label v-once>{{ $t('restoreStreak') }}</label>
+                  <label v-once class="mb-1">{{ $t('restoreStreak') }}</label>
                   <div class="input-group">
                     <div class="input-group-prepend streak-addon input-group-icon">
                       <div
                         class="svg-icon"
+                        v-once
                         v-html="icons.streak"
                       ></div>
                     </div>
@@ -633,19 +528,21 @@
               <div
                 v-if="task.type === 'habit'
                   && isUserTask && purpose === 'edit' && (task.up || task.down)"
-                class="option"
+                class="option mt-3"
               >
                 <div class="form-group">
-                  <label v-once>{{ $t('restoreStreak') }}</label>
-                  <div class="row">
+                  <label v-once class="mb-1">{{ $t('restoreStreak') }}</label>
+                  <div class="row streak-inputs" :class="{'both': task.up && task.down}">
                     <div
                       v-if="task.up"
-                      class="col-6"
+                      class="positive"
+                      :class="{'col-6': task.down, 'col-12': !task.down}"
                     >
                       <div class="input-group">
                         <div class="input-group-prepend positive-addon input-group-icon">
                           <div
                             class="svg-icon"
+                            v-once
                             v-html="icons.positive"
                           ></div>
                         </div>
@@ -660,12 +557,14 @@
                     </div>
                     <div
                       v-if="task.down"
-                      class="col-6"
+                      class="negative"
+                      :class="{'col-6': task.up, 'col-12': !task.up}"
                     >
                       <div class="input-group">
                         <div class="input-group-prepend negative-addon input-group-icon">
                           <div
                             class="svg-icon"
+                            v-once
                             v-html="icons.negative"
                           ></div>
                         </div>
@@ -681,53 +580,52 @@
                   </div>
                 </div>
               </div>
-              <!--.option(v-if="isUserTask && task.type !== 'reward'").form-group
-  label(v-once)
-    span.float-left {{ $t('attributeAllocation') }}
-    .svg-icon.info-icon(v-html="ic
-    ons.information", v-b-tooltip.hover.righttop.html="$t('attributeAllocationHelp')")
-  .attributes
-    .custom-control.custom-radio.custom-
-    control-inline(v-for="attr in ATTRIBUTES", :key="attr")
-      input.custom-control-input(:id="`attribute-${a
-      ttr}`", type="radio", :value="attr", v-model="task.attribute", :disabled="us
-      er.preferences.allocationMode !== 'taskbased'")
-              label.custom-control-label.attr-
-              description(:for="`attribute-${attr}`", v-once, v-b-pop
-              over.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}-->
             </div>
           </b-collapse>
         </div>
         <div
-          v-if="purpose !== 'create' && !challengeAccessRequired"
-          class="delete-task-btn d-flex justify-content-center align-items-middle"
-          @click="destroy()"
+          v-if="purpose !== 'create'
+            && !challengeAccessRequired
+            && !groupAccessRequiredAndOnPersonalPage"
+          class="d-flex justify-content-center mt-4 mb-4"
+        >
+          <button
+            class="delete-task-btn d-flex"
+            type="button"
+            @click="destroy()"
+          >
+            <div
+              class="svg-icon"
+              v-once
+              v-html="icons.destroy"
+            ></div>
+            <span class="delete-text mt-1">
+              {{ $t('deleteTaskType', { type: $t(task.type) }) }}
+            </span>
+          </button>
+        </div>
+        <div
+          v-if="purpose === 'create'"
+          slot="modal-footer"
+          class="task-modal-footer d-flex justify-content-center align-items-center mt-4 mb-4"
+        >
+          <button
+            class="btn btn-primary btn-footer
+            d-flex align-items-center justify-content-center"
+            :class="{disabled: !canSave}"
+            @click="submit()"
+            type="button"
+          >
+            {{ $t('create') }}
+          </button>
+        </div>
+        <div
+          v-else
+          class="task-modal-footer mt-4"
         >
-          <div
-            class="svg-icon d-inline-b mt-1 mb-1"
-            v-html="icons.destroy"
-          ></div>
-          <span class="delete-text mt-1 mb-1">
-            {{ $t('deleteTaskType', { type: $t(task.type) }) }}
-          </span>
         </div>
       </form>
     </div>
-    <div
-      slot="modal-footer"
-      class="task-modal-footer d-flex justify-content-center align-items-center"
-      @click="handleClick($event)"
-    >
-      <div
-        v-if="purpose === 'create'"
-        class="btn btn-primary btn-footer
-          d-flex align-items-center justify-content-center mt-2 mb-2"
-        :class="{disabled: !canSave}"
-        @click="submit()"
-      >
-        {{ $t('create') }}
-      </div>
-    </div>
   </b-modal>
 </template>
 
@@ -739,28 +637,35 @@
       max-width: 448px;
     }
 
+    .form-group {
+      margin-bottom: 0;
+    }
+
+    .modal-header {
+      .form-group {
+        margin-bottom: 1rem;
+      }
+    }
+
+    .habit-option-container {
+      &, &:focus, &:active, &:hover {
+        outline: 0;
+        border: 0;
+        background: none;
+      }
+    }
+
     .no-transition {
       transition: none;
     }
 
-    .form-control:not(.input-title):not(.input-notes):not(.checklist-item) {
-      height: 40px !important; // until the new changes of teams-2020 are applied
-    }
-
-    // until the new changes of teams-2020 are applied
-    .vdp-datepicker {
-      .input-group-append {
-        height: 40px !important;
-      }
-    }
-
     input, textarea {
       &:not(:host-context(.tags-popup)) {
         border: none;
       }
       transition-property: border-color, box-shadow, color, background;
       background-color: rgba(255, 255, 255, 0.5);
-      &:focus, &:active, &:hover {
+      &:focus:not(:disabled), &:active:not(:disabled), &:hover:not(:disabled) {
         background-color: rgba(255, 255, 255, 0.75);
       }
     }
@@ -768,12 +673,13 @@
     .modal-content {
       border-radius: 8px;
       border: none;
+      box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
     }
 
     .modal-body {
       // the body has a margin/padding that can't be found
       // if found please remove that padding and this style
-      margin-bottom: -1rem;
+      // margin-bottom: -2rem;
     }
 
     .modal-header, .modal-body, .modal-footer {
@@ -781,9 +687,8 @@
       border: none;
     }
 
-    .task-modal-content, .task-modal-header {
-      padding-left: 23px;
-      padding-right: 23px;
+    .cursor-auto {
+      cursor: auto;
     }
 
     .cursor-auto {
@@ -795,63 +700,21 @@
       width: 100%;
       border-top-left-radius: 8px;
       border-top-right-radius: 8px;
-      padding-top: 16px;
-      padding-bottom: 24px;
 
       h2 {
         color: $white;
       }
     }
 
-    .task-modal-content {
-      padding-top: 24px;
-
-      input {
-        background: $white;
-        border: 1px solid $gray-400;
-        color: $gray-200 !important;
-
-        &:focus {
-          color: $gray-50 !important;
-        }
-      }
-    }
-
     .info-icon {
       float: left;
       height: 16px;
       width: 16px;
-      margin-left: 8px;
       margin-top: 2px;
-    }
-
-    .difficulty-trivial-icon {
-      width: 16px;
-      height: 16px;
-      color: $gray-300;
-    }
-
-    .difficulty-normal-icon {
-      width: 36px;
-      height: 16px;
-      color: $gray-300;
-    }
-
-    .difficulty-medium-icon {
-      width: 36px;
-      height: 32px;
-      color: $gray-300;
-    }
-
-    .difficulty-hard-icon {
-      width: 36px;
-      height: 36px;
-      color: $gray-300;
+      color: $gray-200;
     }
 
     .option {
-      margin-bottom: 12px;
-      margin-top: 12px;
       position: relative;
 
       .custom-control-label p {
@@ -859,10 +722,6 @@
       }
     }
 
-    .difficulty-options .option-item-selected .svg-icon {
-      color: $white !important;
-    }
-
     .option-item {
       margin-right: 48px;
       cursor: pointer;
@@ -907,95 +766,55 @@
       }
     }
 
-    .tags-select {
-      position: relative;
-
-      .tags-inline {
-        .category-wrap {
-          cursor: inherit;
-          position: relative;
-          border: 1px solid transparent;
-          border-radius: 2px;
-          display: inline-block;
-
-          &.active {
-            border-color: $purple-500;
-
-            .category-select {
-              box-shadow: none;
-            }
-          }
-
-          .category-select {
-            align-items: center;
-            display: flex;
-            padding: .6em;
-            padding-right: 2.8em;
-            width: 100%;
-
-            .tags-none {
-              margin: .26em 0 .26em .6em;
-
-              & + .dropdown-toggle {
-                right: 1.3em;
-              }
-            }
-
-            .tags-more {
-              color: $gray-300;
-              flex: 0 1 auto;
-              font-size: 12px;
-              text-align: left;
-              position: relative;
-              left: .5em;
-              width: 100%;
-            }
-
-            .dropdown-toggle {
-              position: absolute;
-              right: 1em;
-              top: .8em;
-            }
-
-            .category-label {
-              min-width: 68px;
-              padding: .5em 1em;
-              width: 68px;
-
-              // Applies to v-markdown generated p tag.
-              p {
-                margin-bottom: 0px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                word-wrap: break-word;
-              }
-            }
-          }
-        }
+    .vdp-datepicker.disabled, .input-group-outer.disabled {
+      .input-group:hover {
+        border-color: $gray-400;
       }
 
-      .tags-popup {
-        position: absolute;
-        top: 100%;
+      .input-group .form-control {
+        background-color: $gray-700;
+        border-color: $gray-500;
+        color: $gray-200;
+      }
+
+      svg path {
+        opacity: 0.75;
+        fill: $gray-200;
+      }
+    }
+
+    .vdp-datepicker {
+      .input-group-append {
+        width: auto;
+        min-width: 2rem;
       }
     }
 
     .delete-task-btn, .cancel-task-btn {
+      border: 0;
+      background: none;
+      padding-right: 0;
+      color: inherit;
       cursor: pointer;
-      &:hover, &:focus, &:active {
+
+      &:hover, &:active, &:focus {
+        border: none !important;
+        background: none !important;
+        outline: none !important;
+
         text-decoration: underline;
       }
     }
+
     .delete-task-btn {
-      margin-top: 32px;
-      margin-bottom: 8px;
       height: 1.5rem;
       align-items: center;
+
       &:hover, &:focus, &:active {
         text-decoration: underline;
         text-decoration-color: $maroon-50;
       }
+
       .delete-text {
         font-size: 14px;
         font-weight: normal;
@@ -1006,26 +825,33 @@
         color: $maroon-50;
         height: 1.5rem;
       }
+
       .svg-icon {
         svg {
           height: 1rem;
           width: 1rem;
           object-fit: contain;
+          display: inline;
         }
+
         margin-right: 0.5rem;
         color: $maroon-50;
+        display: inline;
       }
     }
 
     .task-modal-footer {
       margin: 0;
-      padding: 16px 24px;
       width: 100%;
 
       .cancel-task-btn {
         margin-right: 16px;
         color: $blue-10;
       }
+
+      .btn-footer {
+        height: 2rem;
+      }
     }
 
     .weekday-check {
@@ -1034,29 +860,48 @@
     }
 
     .advanced-settings {
-      background: $gray-700;
-      margin-left: -23px;
-      margin-right: -23px;
-      padding: 16px 24px;
-      margin-bottom: -8px;
+      min-height: 3rem;
+      background-color: $gray-700;
+      margin-left: -1.5rem;
+      margin-right: -1.5rem;
+
+      padding: 0.75rem 1.5rem;
+
+      .form-group:last-of-type {
+        margin-bottom: 0.75rem;
+      }
 
       &-toggle {
         cursor: pointer;
       }
 
-      &-body {
-        margin-top: 17px;
-      }
-
       h3 {
+        height: 1.5rem;
+        // Condensed is the default for h3
+        font-family: Roboto;
+        font-size: 14px;
+        font-weight: bold;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.71;
+        letter-spacing: normal;
         color: $gray-10;
-        margin-bottom: 0px;
+        margin: 0;
       }
 
       .attributes .custom-control {
         margin-right: 40px;
       }
 
+      .toggle-up .svg-icon {
+        width: 1rem;
+      }
+
+      .toggle-up svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
       .toggle-open {
         transform: rotate(180deg);
       }
@@ -1064,6 +909,18 @@
       .attr-description {
         border-bottom: 1px dashed;
       }
+
+      label {
+        height: 1.5rem;
+        letter-spacing: normal;
+        color: $gray-50;
+      }
+    }
+
+    .form-radio {
+      .custom-control {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -1072,44 +929,58 @@
       margin-right: 12px !important;
     }
   }
+
+  .streak-addon path {
+    fill: $gray-200;
+  }
 </style>
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
   .gold {
-    width: 24px;
-    margin: 0 7px;
+    width: 1rem;
+    height: 1rem;
   }
 
   .habit-option {
     &-container {
       min-width: 3rem;
-      cursor: pointer;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
       &:first-of-type {
         margin-right: 2rem;
       }
     }
+
     &-button {
       width: 2.5rem;
       height: 2.5rem;
       border-radius: 50%;
     }
+
     &-icon {
       width: 10px;
       height: 10px;
       color: $white;
+
       &.disabled {
         color: $gray-200;
       }
+
       &.negative {
         margin-top: 0.5rem;
       }
     }
+
     &-label {
       font-size: 12px;
       font-weight: bold;
       text-align: center;
+
       &.disabled {
         color: $gray-100;
         font-weight: normal;
@@ -1121,54 +992,92 @@
     padding: 0.25rem 0.75rem;
     line-height: 1.71;
   }
+
   .input-title {
     height: 2rem;
   }
+
   .input-notes {
     height: 3.5rem;
   }
+
   label {
     font-size: 14px;
     font-weight: bold;
     line-height: 1.71;
   }
+
   .flex-group {
     display: flex;
+
     .flex {
       flex: 1;
     }
   }
+
+  .streak-inputs.both {
+    .positive {
+      padding-right: 6px;
+    }
+
+    .negative {
+      padding-left: 6px;
+    }
+  }
+
+  .input-group-text {
+    font-size: 14px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.71;
+    letter-spacing: normal;
+    text-align: center;
+    color: $gray-50;
+    border: 0;
+  }
+
+  .disabled .input-group-text {
+    color: $gray-200;
+  }
+
 </style>
 
 <script>
+import axios from 'axios';
 import clone from 'lodash/clone';
 import Datepicker from 'vuejs-datepicker';
 import moment from 'moment';
 import toggleSwitch from '@/components/ui/toggleSwitch';
+import toggleCheckbox from '@/components/ui/toggleCheckbox';
 import markdownDirective from '@/directives/markdown';
 import { mapGetters, mapActions, mapState } from '@/libs/store';
-import TagsPopup from './tagsPopup';
 import checklist from './modal-controls/checklist';
+import SelectMulti from './modal-controls/selectMulti';
+import selectDifficulty from '@/components/tasks/modal-controls/selectDifficulty';
+import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
 
 import informationIcon from '@/assets/svg/information.svg';
-import difficultyTrivialIcon from '@/assets/svg/difficulty-trivial.svg';
-import difficultyMediumIcon from '@/assets/svg/difficulty-medium.svg';
-import difficultyHardIcon from '@/assets/svg/difficulty-hard.svg';
-import difficultyNormalIcon from '@/assets/svg/difficulty-normal.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
 import negativeIcon from '@/assets/svg/negative.svg';
 import streakIcon from '@/assets/svg/streak.svg';
 import deleteIcon from '@/assets/svg/delete.svg';
 import goldIcon from '@/assets/svg/gold.svg';
-import downIcon from '@/assets/svg/down.svg';
+import chevronIcon from '@/assets/svg/chevron.svg';
 import calendarIcon from '@/assets/svg/calendar.svg';
+import gripIcon from '@/assets/svg/grip.svg';
 
 export default {
   components: {
-    TagsPopup,
+    SelectMulti,
     Datepicker,
     toggleSwitch,
     checklist,
+    selectDifficulty,
+    selectTranslatedArray,
+    toggleCheckbox,
+    lockableLabel,
   },
   directives: {
     markdown: markdownDirective,
@@ -1177,29 +1086,27 @@ export default {
   props: ['task', 'purpose', 'challengeId', 'groupId'],
   data () {
     return {
-      maxTags: 3,
-      showTagsSelect: false,
       showAssignedSelect: false,
       newChecklistItem: null,
       icons: Object.freeze({
         information: informationIcon,
-        difficultyNormal: difficultyNormalIcon,
-        difficultyTrivial: difficultyTrivialIcon,
-        difficultyMedium: difficultyMediumIcon,
-        difficultyHard: difficultyHardIcon,
         negative: negativeIcon,
         positive: positiveIcon,
         destroy: deleteIcon,
         gold: goldIcon,
-        down: downIcon,
+        chevron: chevronIcon,
         streak: streakIcon,
         calendar: calendarIcon,
+        grip: gripIcon,
       }),
       requiresApproval: false, // We can't set task.group fields so we use this field to toggle
       sharedCompletion: 'singleCompletion',
+      managerNotes: '',
       members: [],
+      membersNameAndId: [],
       memberNamesById: {},
       assignedMembers: [],
+      managers: [],
       showAdvancedOptions: false,
       attributesStrings: {
         str: 'strength',
@@ -1213,7 +1120,6 @@ export default {
   computed: {
     ...mapGetters({
       getTaskClasses: 'tasks:getTaskClasses',
-      getTagsFor: 'tasks:getTagsFor',
       canDeleteTask: 'tasks:canDelete',
     }),
     ...mapState({
@@ -1227,7 +1133,18 @@ export default {
         || this.task.type === 'todo'
         || this.purpose === 'create'
         || !this.isUserTask
-      ) return false;
+        || this.groupAccessRequiredAndOnPersonalPage
+      ) {
+        return false;
+      }
+
+      if (this.task.type === 'habit'
+        && !this.task.up
+        && !this.task.down
+      ) {
+        return false;
+      }
+
       return true;
     },
     groupAccessRequiredAndOnPersonalPage () {
@@ -1235,7 +1152,15 @@ export default {
       return false;
     },
     checklistEnabled () {
-      return ['daily', 'todo'].indexOf(this.task.type) > -1 && !this.isOriginalChallengeTask;
+      return ['daily', 'todo'].indexOf(this.task.type) > -1
+        && !this.isOriginalChallengeTask
+        && (!this.groupAccessRequiredAndOnPersonalPage || this.checklist.length > 0);
+    },
+    showManagerNotes () {
+      return Boolean(this.task.group && this.task.group.managerNotes)
+        || (
+          !this.groupAccessRequiredAndOnPersonalPage && this.managers.indexOf(this.user._id) !== -1
+        );
     },
     isChallengeTask () {
       return Boolean(this.task.challenge && this.task.challenge.id);
@@ -1267,14 +1192,17 @@ export default {
     repeatSuffix () {
       const { task } = this;
 
+      // once changed it is a string
+      const everyXValue = +task.everyX;
+
       if (task.frequency === 'daily') {
-        return task.everyX === 1 ? this.$t('day') : this.$t('days');
+        return everyXValue === 1 ? this.$t('day') : this.$t('days');
       } if (task.frequency === 'weekly') {
-        return task.everyX === 1 ? this.$t('week') : this.$t('weeks');
+        return everyXValue === 1 ? this.$t('week') : this.$t('weeks');
       } if (task.frequency === 'monthly') {
-        return task.everyX === 1 ? this.$t('month') : this.$t('months');
+        return everyXValue === 1 ? this.$t('month') : this.$t('months');
       } if (task.frequency === 'yearly') {
-        return task.everyX === 1 ? this.$t('year') : this.$t('years');
+        return everyXValue === 1 ? this.$t('year') : this.$t('years');
       }
       return null;
     },
@@ -1295,17 +1223,6 @@ export default {
     selectedTags () {
       return this.getTagsFor(this.task);
     },
-    truncatedSelectedTags () {
-      return this.selectedTags.slice(0, this.maxTags);
-    },
-    remainingSelectedTags () {
-      return this.selectedTags.slice(this.maxTags);
-    },
-    cssClassHeadings () {
-      const textClass = this.cssClass('text');
-      if (textClass.indexOf('purple') !== -1 || textClass.indexOf('worst') !== -1) return null;
-      return textClass;
-    },
   },
   watch: {
     task () {
@@ -1318,18 +1235,25 @@ export default {
       this.calculateMonthlyRepeatDays();
     },
   },
-  mounted () {
+  async mounted () {
     this.showAdvancedOptions = !this.user.preferences.advancedCollapsed;
-  },
-  created () {
-    document.addEventListener('keyup', this.handleEsc);
-  },
-  beforeDestroy () {
-    document.removeEventListener('keyup', this.handleEsc);
+    if (this.groupId) {
+      const groupResponse = await axios.get(`/api/v4/groups/${this.groupId}`);
+      this.managers = Object.keys(groupResponse.data.data.managers);
+      this.managers.push(groupResponse.data.data.leader._id);
+    }
   },
   methods: {
-    ...mapActions({ saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create' }),
+    ...mapActions({
+      saveTask: 'tasks:save',
+      destroyTask: 'tasks:destroy',
+      createTask: 'tasks:create',
+      createTag: 'tags:createTag',
+    }),
     async syncTask () {
+      if (this.task && this.task.group && this.task.group.managerNotes) {
+        this.managerNotes = this.task.group.managerNotes;
+      }
       if (this.groupId && this.task.group && this.task.group.approval) {
         this.requiresApproval = this.task.group.approval.required;
       }
@@ -1340,7 +1264,12 @@ export default {
           includeAllPublicFields: true,
         });
         this.members = members;
+        this.membersNameAndId = [];
         this.members.forEach(member => {
+          this.membersNameAndId.push({
+            id: member._id,
+            name: member.auth.local.username,
+          });
           this.memberNamesById[member._id] = member.profile.name;
         });
         this.assignedMembers = [];
@@ -1366,9 +1295,6 @@ export default {
 
       return this.getTaskClasses(this.task, `${this.purpose === 'edit' ? 'edit' : 'create'}-modal-${suffix}`);
     },
-    closeTagsPopup () {
-      this.showTagsSelect = false;
-    },
     setDifficulty (level) {
       if (this.challengeAccessRequired) return;
       this.task.priority = level;
@@ -1381,12 +1307,12 @@ export default {
       if (this.challengeAccessRequired) return;
       this.task.down = !this.task.down;
     },
-    toggleTagSelect () {
-      this.showTagsSelect = !this.showTagsSelect;
-    },
     weekdaysMin (dayNumber) {
       return moment.weekdaysMin(dayNumber);
     },
+    formattedDate (date) {
+      return moment(date).format('MM/DD/YYYY');
+    },
     calculateMonthlyRepeatDays (newRepeatsOn) {
       if (!this.task) return;
       const { task } = this;
@@ -1420,6 +1346,8 @@ export default {
         this.task.group.approval.required = this.requiresApproval;
         this.task.sharedCompletion = this.sharedCompletion;
         this.task.group.sharedCompletion = this.sharedCompletion;
+        this.task.managerNotes = this.managerNotes;
+        this.task.group.managerNotes = this.managerNotes;
       }
 
       if (this.task.type === 'reward' && this.task.value === '') {
@@ -1451,7 +1379,7 @@ export default {
           this.createTask(this.task);
         }
       } else {
-        this.saveTask(this.task);
+        await this.saveTask(this.task);
         this.$emit('taskEdited', this.task);
       }
       this.$root.$emit('bv::hide::modal', 'task-modal');
@@ -1467,7 +1395,7 @@ export default {
       this.$root.$emit('bv::hide::modal', 'task-modal');
     },
     onClose () {
-      this.showTagsSelect = false;
+      if (this.task.group && this.task.group.managerNotes) this.managerNotes = null;
       this.newChecklistItem = '';
       this.$emit('cancel');
     },
@@ -1477,41 +1405,31 @@ export default {
       this.requiresApproval = truthy;
     },
     async toggleAssignment (memberId) {
-      const assignedIndex = this.assignedMembers.indexOf(memberId);
-
-      if (assignedIndex === -1) {
-        if (this.purpose === 'create') {
-          return;
-        }
-
-        await this.$store.dispatch('tasks:unassignTask', {
-          taskId: this.task._id,
-          userId: memberId,
-        });
-        return;
-      }
-
       if (this.purpose === 'create') {
         return;
       }
 
-      await this.$store.dispatch('tasks:assignTask', {
-        taskId: this.task._id,
-        userId: memberId,
-      });
+      const assignedIndex = this.assignedMembers.indexOf(memberId);
+
+      if (assignedIndex === -1) {
+        await this.$store.dispatch('tasks:unassignTask', {
+          taskId: this.task._id,
+          userId: memberId,
+        });
+      } else {
+        await this.$store.dispatch('tasks:assignTask', {
+          taskId: this.task._id,
+          userId: memberId,
+        });
+      }
     },
     focusInput () {
       this.$refs.inputToFocus.focus();
     },
-    handleEsc (e) {
-      if (e.keyCode === 27 && this.showTagsSelect) {
-        this.closeTagsPopup();
-      }
-    },
-    handleClick (e) {
-      if (this.$refs.popup && !this.$refs.popup.$el.parentNode.contains(e.target)) {
-        this.closeTagsPopup();
-      }
+    async addTag (name) {
+      const tagResult = await this.createTag({ name });
+
+      this.task.tags.push(tagResult.id);
     },
   },
 };
diff --git a/website/client/src/components/ui/checkbox.stories.js b/website/client/src/components/ui/checkbox.stories.js
new file mode 100644
index 0000000000..5f4d9dca60
--- /dev/null
+++ b/website/client/src/components/ui/checkbox.stories.js
@@ -0,0 +1,70 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Checkbox from './checkbox';
+import ToggleCheckbox from './toggleCheckbox';
+
+const stories = storiesOf('Checkbox', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('checkbox', () => ({
+    components: {
+      Checkbox,
+    },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <Checkbox text="My Checkbox" id="someId"></Checkbox> <br/>
+        <Checkbox text="My Checked Checkbox" id="someOtherId" :checked.sync="checked"></Checkbox>
+      </div>
+    `,
+    data () {
+      return {
+        checked: true,
+      };
+    },
+  }))
+  .add('Toggle Checkbox Group', () => ({
+    components: {
+      ToggleCheckbox,
+    },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        {{ checked }}
+        <div class="toggle-group" style="width: 300px">
+        <ToggleCheckbox text="Su"></ToggleCheckbox>
+        <ToggleCheckbox text="Mo"
+                        :checked.sync="checked"></ToggleCheckbox>
+        <ToggleCheckbox text="Tu"></ToggleCheckbox>
+        <ToggleCheckbox text="We"
+                        :checked.sync="checked"></ToggleCheckbox>
+        <ToggleCheckbox text="Th"></ToggleCheckbox>
+        <ToggleCheckbox text="Fr"
+                        :checked.sync="checked"></ToggleCheckbox>
+        <ToggleCheckbox text="Sa"
+                        :checked.sync="checked"
+                        :disabled="true"></ToggleCheckbox>
+        </div>
+
+        <br/>
+        <br/>
+        Disabled:
+        <div class="toggle-group" style="width: 300px">
+          <ToggleCheckbox text="Su" :disabled="true"></ToggleCheckbox>
+          <ToggleCheckbox text="Mo" :disabled="true"></ToggleCheckbox>
+          <ToggleCheckbox text="Tu" :disabled="true"></ToggleCheckbox>
+          <ToggleCheckbox text="We" :disabled="true"></ToggleCheckbox>
+          <ToggleCheckbox text="Th" :disabled="true"></ToggleCheckbox>
+          <ToggleCheckbox text="Fr" :disabled="true"></ToggleCheckbox>
+          <ToggleCheckbox text="Sa" :disabled="true"></ToggleCheckbox>
+        </div>
+      </div>
+    `,
+    data () {
+      return {
+        checked: true,
+      };
+    },
+  }));
diff --git a/website/client/src/components/ui/checkbox.vue b/website/client/src/components/ui/checkbox.vue
index 0e29dca37a..ce8490116a 100644
--- a/website/client/src/components/ui/checkbox.vue
+++ b/website/client/src/components/ui/checkbox.vue
@@ -6,18 +6,24 @@
         v-model="isChecked"
         class="custom-control-input"
         type="checkbox"
+        :disabled="disabled"
       >
       <label
-        v-once
         class="custom-control-label"
+        :class="{disabled: disabled}"
         :for="id"
+        :disabled="disabled"
       >{{ text }}</label>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  label {
+  .custom-control.custom-checkbox {
+    margin-bottom: 0 !important;
+  }
+
+  label:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
 </style>
@@ -26,6 +32,7 @@
 export default {
   props: {
     checked: Boolean,
+    disabled: Boolean,
     id: String,
     text: String,
   },
@@ -35,6 +42,9 @@ export default {
     };
   },
   watch: {
+    checked (after) {
+      this.isChecked = after;
+    },
     isChecked (after) {
       this.$emit('update:checked', after);
     },
diff --git a/website/client/src/components/ui/input-group.stories.js b/website/client/src/components/ui/input-group.stories.js
new file mode 100644
index 0000000000..0ff37aff63
--- /dev/null
+++ b/website/client/src/components/ui/input-group.stories.js
@@ -0,0 +1,71 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { number, text, withKnobs } from '@storybook/addon-knobs';
+
+import positiveIcon from '@/assets/svg/positive.svg';
+
+const stories = storiesOf('Input-Group', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('states', () => ({
+    components: { },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <div class="input-group">
+          <div class="input-group-prepend positive-addon input-group-icon">
+            <div
+              class="svg-icon"
+              v-html="icon"
+            >
+            </div>
+          </div>
+          <input
+            v-model="number"
+            class="form-control"
+            type="number"
+            min="0"
+            required="required"
+            ref="input"
+          >
+        </div>
+        <br />
+        <button class="btn btn-dark" @click="$refs.input.focus()">Focus ^</button>
+
+        <br />
+        <br />
+        <div class="input-group">
+
+          <input
+            v-model="number"
+            class="form-control"
+            type="number"
+            min="0"
+            required="required"
+          >
+          <div class="input-group-append positive-addon input-group-icon">
+            <div
+              class="svg-icon"
+              v-html="icon"
+            >
+            </div>
+          </div>
+        </div>
+
+      </div>
+    `,
+    data () {
+      return {
+        icon: positiveIcon,
+      };
+    },
+    props: {
+      text: {
+        default: text('Input Text', 'example text'),
+      },
+      number: {
+        default: number('Input Number', 0),
+      },
+    },
+  }));
diff --git a/website/client/src/components/ui/margin.stories.js b/website/client/src/components/ui/margin.stories.js
new file mode 100644
index 0000000000..28896489a8
--- /dev/null
+++ b/website/client/src/components/ui/margin.stories.js
@@ -0,0 +1,45 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+
+const stories = storiesOf('Margins', module);
+
+const margins = [
+  'mr-1 ml-1 my-1',
+  'mx-2 ml-3 my-2',
+  'mx-2 ml-1 my-1',
+  'ml-1 mr-4',
+  'ml-2 mr-2 my-1',
+  'ml-75 my-3 mr-2',
+];
+
+stories
+  .add('overview', () => ({
+    components: { },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <span class="background inline-block">
+            <span class="content mx-1 my-1 inline-block">
+                <span class="text mx-1 my-1 inline-block">
+                The margin between gray and teal is the margin content.
+                    </span>
+            </span>
+        </span>  
+          
+          <br />
+          <br />
+          
+        <span v-for="m in margins" 
+              class="background mx-1 my-1 inline-block">
+            <span class="content  inline-block" :class="m">
+                <span class="mx-1 my-1 inline-block">{{m}}</span>
+            </span>
+        </span>
+      </div>
+    `,
+
+    data () {
+      return {
+        margins,
+      };
+    },
+  }));
diff --git a/website/client/src/components/ui/selectList.stories.js b/website/client/src/components/ui/selectList.stories.js
new file mode 100644
index 0000000000..ec1a0ade61
--- /dev/null
+++ b/website/client/src/components/ui/selectList.stories.js
@@ -0,0 +1,110 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import SelectList from './selectList.vue';
+import SelectDifficulty from '../tasks/modal-controls/selectDifficulty';
+import SelectTranslatedArray from '../tasks/modal-controls/selectTranslatedArray';
+
+const stories = storiesOf('Select List', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('states', () => ({
+    components: { SelectList },
+    template: `
+      <div class="m-xl">
+        Hover / Click on:
+        <select-list class="mb-4"
+                     :items="items"
+                     :key-prop="'key'"
+                     :value="selected"
+                     @select="selected = $event">
+          <template v-slot:item="{ item }">
+            <div v-if="item">
+              Template: {{ item?.key }} - {{ item?.value.text }}
+            </div>
+            <div v-else>
+              Nothing selected
+            </div>
+          </template>
+        </select-list>
+
+        Disabled:
+        <select-list :disabled="true"
+                     :value="selected"
+                     :items="items"
+                     :key-prop="'key'"
+                     class="mb-4">
+          <template v-slot:item="{ item }">
+            Template: {{ item?.key }} - {{ item?.value.text }}
+          </template>
+        </select-list>
+
+        <br/>
+        Selected: {{ selected }} <br/>
+
+      </div>
+    `,
+    data () {
+      return {
+        selected: null,
+        items: [
+          {
+            key: 1,
+            value: {
+              text: 'First',
+            },
+          },
+          {
+            key: 2,
+            value: {
+              text: 'Second',
+            },
+          },
+        ],
+      };
+    },
+  }))
+  .add('difficulty', () => ({
+    components: { SelectDifficulty },
+    template: `
+      <div class="m-xl">
+        <select-difficulty
+          :value="selected"
+          @select="selected = $event"
+        >
+
+        </select-difficulty>
+
+        Selected: {{ selected }}
+      </div>
+    `,
+    data () {
+      return {
+        selected: 2,
+      };
+    },
+  }))
+  .add('translated array', () => ({
+    components: { SelectTranslatedArray },
+    template: `
+      <div class="m-xl">
+        <select-translated-array
+          :items="['daily', 'weekly', 'monthly']"
+          :value="selected"
+          @select="selected = $event"
+        >
+
+        </select-translated-array>
+
+        Selected: {{ selected }}
+      </div>
+    `,
+    data () {
+      return {
+        selected: 'weekly',
+      };
+    },
+  }));
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
new file mode 100644
index 0000000000..4c7d938876
--- /dev/null
+++ b/website/client/src/components/ui/selectList.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <b-dropdown
+      class="inline-dropdown"
+      @show="isOpened = true"
+      @hide="isOpened = false"
+      :toggle-class="isOpened ? 'active' : null"
+      :disabled="disabled"
+    >
+      <template v-slot:button-content>
+        <slot name="item" v-bind:item="selected" v-bind:button="true">
+          <!-- Fallback content -->
+          {{ value }}
+        </slot>
+      </template>
+      <b-dropdown-item
+        v-for="item in items"
+        :key="keyProp ? item[keyProp] : item"
+        :disabled="typeof item[disabledProp] === 'undefined' ? false : item[disabledProp]"
+        :class="{active: item === selected, selectListItem: true}"
+        @click="selectItem(item)"
+      >
+        <slot name="item" v-bind:item="item" v-bind:button="false">
+          <!-- Fallback content -->
+          {{ item }}
+        </slot>
+      </b-dropdown-item>
+    </b-dropdown>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+</style>
+
+<script>
+export default {
+  data () {
+    return {
+      isOpened: false,
+      selected: this.value,
+    };
+  },
+  props: {
+    items: {
+      type: Array,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    value: [String, Number, Object],
+    keyProp: {
+      type: String,
+    },
+    disabledProp: {
+      type: String,
+    },
+  },
+  methods: {
+    selectItem (item) {
+      this.selected = item;
+      this.$emit('select', item);
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/ui/toggleCheckbox.vue b/website/client/src/components/ui/toggleCheckbox.vue
new file mode 100644
index 0000000000..992b0eb551
--- /dev/null
+++ b/website/client/src/components/ui/toggleCheckbox.vue
@@ -0,0 +1,116 @@
+<template>
+  <button class="toggle-checkbox"
+    :class="{checked: isChecked}"
+    @click="isChecked = !isChecked"
+    type="button"
+    :disabled="disabled">
+    {{ text }}
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    checked: Boolean,
+    disabled: Boolean,
+    text: String,
+  },
+  data () {
+    return {
+      isChecked: this.checked,
+    };
+  },
+  watch: {
+    checked (after) {
+      this.isChecked = after;
+    },
+    isChecked (after) {
+      this.$emit('update:checked', after);
+    },
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .toggle-checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 2rem;
+    border: solid 1px $gray-400;
+    background-color: $white;
+
+    cursor: pointer;
+
+    > * {
+      line-height: 1.71;
+      margin-top: 0.25rem;
+      margin-bottom: 0.25rem;
+    }
+
+    &:disabled, &.disabled {
+      cursor: default;
+      opacity: 0.75;
+    }
+
+    &.checked {
+      border-color: $purple-100;
+      background-color: $purple-300;
+      color: $white;
+
+      &:active {
+        outline: 0;
+      }
+    }
+
+    &:not(.disabled):not(:disabled) {
+      &:not(.checked) {
+        &:hover {
+          border-color: $gray-300;
+          background-color: $white;
+          color: $purple-300;
+        }
+
+        &:focus, &:active {
+          border-color: $purple-400;
+          background-color: $white;
+          color: $gray-50;
+
+          outline: 0;
+        }
+      }
+
+      &:focus, &:active {
+        outline: 1px solid $purple-400;
+      }
+    }
+
+    &:not(:first-of-type) {
+      border-left: none !important;
+    }
+
+    &:first-of-type {
+      border-bottom-left-radius: 2px;
+      border-top-left-radius: 2px;
+    }
+    &:last-of-type {
+      border-bottom-right-radius: 2px;
+      border-top-right-radius: 2px;
+    }
+  }
+</style>
+
+<style lang="scss">
+  .toggle-group {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    .toggle-checkbox {
+      flex: 1;
+    }
+  }
+</style>
diff --git a/website/client/src/components/ui/toggleSwitch.vue b/website/client/src/components/ui/toggleSwitch.vue
index d51ff321fd..dce32fcc4b 100644
--- a/website/client/src/components/ui/toggleSwitch.vue
+++ b/website/client/src/components/ui/toggleSwitch.vue
@@ -25,7 +25,13 @@
           :for="toggleId"
         >
           <span class="toggle-switch-inner"></span>
-          <span class="toggle-switch-switch"></span>
+          <span
+            class="toggle-switch-switch"
+            tabindex="0"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @keyup.space="handleSpace"
+          ></span>
         </label>
       </div>
     </div>
@@ -89,18 +95,18 @@
   .toggle-switch-inner:before {
     content: "";
     padding-left: 10px;
-    background-color: $purple-400;
+    background-color: $green-50;
   }
 
   .toggle-switch-inner:after {
     content: "";
     padding-right: 10px;
-    background-color: $gray-200;
+    background-color: $gray-300;
     text-align: right;
   }
 
   .toggle-switch-switch {
-    box-shadow: 0 1px 2px 0 rgba($black, 0.32);
+    box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
     display: block;
     width: 20px;
     margin: -2px;
@@ -113,6 +119,11 @@
     right: 22px;
     border-radius: 100px;
     transition: all 0.3s ease-in 0s;
+
+    &:focus {
+      border: 1px solid $purple-400;
+      outline: none;
+    }
   }
 
   .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
@@ -151,6 +162,7 @@ export default {
       toggleId: this.generateId(),
       // The container requires a unique id to link it to the pop-over
       containerId: this.generateId(),
+      focused: false,
     };
   },
   computed: {
@@ -159,9 +171,20 @@ export default {
     },
   },
   methods: {
+    handleBlur () {
+      this.focused = false;
+    },
     handleChange ({ target: { checked } }) {
       this.$emit('change', checked);
     },
+    handleFocus () {
+      this.focused = true;
+    },
+    handleSpace () {
+      if (this.focused) {
+        document.getElementById(this.toggleId).click();
+      }
+    },
     generateId () {
       return `id-${Math.random().toString(36).substr(2, 16)}`;
     },
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index e95073b41e..c19758e8ce 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -9,12 +9,7 @@
     class="profile"
   >
     <div class="header">
-      <span
-        class="close-icon svg-icon inline icon-10"
-        @click="close()"
-        v-html="icons.close"
-      ></span>
-      <div class="profile-actions">
+      <div class="profile-actions d-flex">
         <router-link
           :to="{ path: '/private-messages', query: { uuid: user._id } }"
           replace
@@ -23,9 +18,9 @@
             v-b-tooltip.hover.left="$t('sendMessage')"
             class="btn btn-secondary message-icon"
           >
-            <div
-              class="svg-icon message-icon"
-              v-html="icons.message"
+            <div class="svg-icon message-icon"
+                 v-html="icons.message"
+                 v-once
             ></div>
           </button>
         </router-link>
@@ -42,7 +37,7 @@
         <button
           v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
           v-b-tooltip.hover.right="$t('blockWarning')"
-          class="btn btn-secondary block-icon"
+          class="btn btn-secondary block-icon d-flex justify-content-center align-items-center"
           @click="blockUser()"
         >
           <div
@@ -65,7 +60,7 @@
         <button
           v-if="userLoggedIn.contributor.admin"
           v-b-tooltip.hover.right="'Admin - Toggle Tools'"
-          class="btn btn-secondary positive-icon"
+          class="btn btn-secondary positive-icon d-flex justify-content-center align-items-center"
           @click="toggleAdminTools()"
         >
           <div
@@ -292,13 +287,13 @@
         </div>
         <div class="col-12 text-center">
           <button
-            class="btn btn-primary"
+            class="btn btn-primary mr-2"
             @click="save()"
           >
             {{ $t("save") }}
           </button>
           <button
-            class="btn btn-warning"
+            class="btn btn-secondary"
             @click="editing = false"
           >
             {{ $t("cancel") }}
@@ -329,7 +324,7 @@
             >
               <div
                 :id="achievKey + '-achievement'"
-                class="box achievement-container d-flex align-items-center justify-content-center"
+                class="box achievement-container"
                 :class="{'achievement-unearned': !achievement.earned}"
               >
                 <b-popover
@@ -437,6 +432,10 @@
       }
     }
 
+    .standard-page {
+      padding-bottom: 0rem;
+    }
+
     .modal-content {
       background: #f9f9f9;
     }
@@ -570,8 +569,8 @@
 
     .achievement-wrapper {
       width: 94px;
-      min-width: 94px !important;
       max-width: 94px;
+      min-width: 94px;
       margin-right: 12px;
       margin-left: 12px;
       padding: 0px;
@@ -580,6 +579,7 @@
     .box {
       margin: 0 auto;
       margin-bottom: 1em;
+      padding-top: 1.2em;
       background: $white;
     }
 
@@ -730,7 +730,6 @@ import lock from '@/assets/svg/lock.svg';
 import challenge from '@/assets/svg/challenge.svg';
 import member from '@/assets/svg/member-icon.svg';
 import staff from '@/assets/svg/tier-staff.svg';
-import svgClose from '@/assets/svg/close.svg';
 import error404 from '../404';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -758,7 +757,6 @@ export default {
         lock,
         member,
         staff,
-        close: svgClose,
       }),
       adminToolsLoaded: false,
       userIdToMessage: '',
@@ -1022,9 +1020,6 @@ export default {
       const status = this.achievementsCategories[categoryKey].open;
       this.achievementsCategories[categoryKey].open = !status;
     },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'profile');
-    },
   },
 };
 </script>
diff --git a/website/client/src/mixins/scoreTask.js b/website/client/src/mixins/scoreTask.js
new file mode 100644
index 0000000000..f19a8f1892
--- /dev/null
+++ b/website/client/src/mixins/scoreTask.js
@@ -0,0 +1,136 @@
+import axios from 'axios';
+import Vue from 'vue';
+
+import * as Analytics from '@/libs/analytics';
+import notifications from './notifications';
+import scoreTask from '@/../../common/script/ops/scoreTask';
+import { mapState } from '@/libs/store';
+
+export default {
+  mixins: [notifications],
+  computed: {
+    ...mapState({
+      castingSpell: 'spellOptions.castingSpell',
+      user: 'user.data',
+    }),
+  },
+  methods: {
+    async taskScore (task, direction) {
+      if (this.castingSpell) return;
+      const { user } = this;
+
+      const Content = this.$store.state.content;
+
+      if (task.group.approval.required && !task.group.approval.approved) {
+        task.group.approval.requested = true;
+        const groupResponse = await axios.get(`/api/v4/groups/${task.group.id}`);
+        const managers = Object.keys(groupResponse.data.data.managers);
+        managers.push(groupResponse.data.data.leader._id);
+        if (managers.indexOf(user._id) !== -1) {
+          task.group.approval.approved = true;
+        }
+      }
+
+      try {
+        scoreTask({ task, user, direction });
+      } catch (err) {
+        this.text(err.message);
+        return;
+      }
+
+      switch (task.type) { // eslint-disable-line default-case
+        case 'habit':
+          this.$root.$emit('playSound', direction === 'up' ? 'Plus_Habit' : 'Minus_Habit');
+          break;
+        case 'todo':
+          this.$root.$emit('playSound', 'Todo');
+          break;
+        case 'daily':
+          this.$root.$emit('playSound', 'Daily');
+          break;
+        case 'reward':
+          this.$root.$emit('playSound', 'Reward');
+          break;
+      }
+
+      Analytics.updateUser();
+      const response = await axios.post(`/api/v4/tasks/${task._id}/score/${direction}`);
+      // used to notify drops, critical hits and other bonuses
+      const tmp = response.data.data._tmp || {};
+      const { crit } = tmp;
+      const { drop } = tmp;
+      const { firstDrops } = tmp;
+      const { quest } = tmp;
+
+      if (crit) {
+        const critBonus = crit * 100 - 100;
+        this.crit(critBonus);
+      }
+
+      if (quest && user.party.quest && user.party.quest.key) {
+        const userQuest = Content.quests[user.party.quest.key];
+        if (quest.progressDelta && userQuest.boss) {
+          this.damage(quest.progressDelta.toFixed(1));
+        } else if (quest.collection && userQuest.collect) {
+          user.party.quest.progress.collectedItems += 1;
+          this.quest('questCollection', quest.collection);
+        }
+      }
+
+      if (firstDrops) {
+        if (!user.items.eggs[firstDrops.egg]) Vue.set(user.items.eggs, firstDrops.egg, 0);
+        if (!user.items.hatchingPotions[firstDrops.hatchingPotion]) {
+          Vue.set(user.items.hatchingPotions, firstDrops.hatchingPotion, 0);
+        }
+        user.items.eggs[firstDrops.egg] += 1;
+        user.items.hatchingPotions[firstDrops.hatchingPotion] += 1;
+      }
+
+      if (drop) {
+        let dropText;
+        let dropNotes;
+        let type;
+
+        this.$root.$emit('playSound', 'Item_Drop');
+
+        // Note: For Mystery Item gear, drop.type will be 'head', 'armor', etc
+        // so we use drop.notificationType below.
+
+        if (drop.type !== 'gear' && drop.type !== 'Quest' && drop.notificationType !== 'Mystery') {
+          if (drop.type === 'Food') {
+            type = 'food';
+          } else if (drop.type === 'HatchingPotion') {
+            type = 'hatchingPotions';
+          } else {
+            type = `${drop.type.toLowerCase()}s`;
+          }
+
+          if (!user.items[type][drop.key]) {
+            Vue.set(user.items[type], drop.key, 0);
+          }
+          user.items[type][drop.key] += 1;
+        }
+
+        if (drop.type === 'HatchingPotion') {
+          dropText = Content.hatchingPotions[drop.key].text();
+          dropNotes = Content.hatchingPotions[drop.key].notes();
+          this.drop(this.$t('messageDropPotion', { dropText, dropNotes }), drop);
+        } else if (drop.type === 'Egg') {
+          dropText = Content.eggs[drop.key].text();
+          dropNotes = Content.eggs[drop.key].notes();
+          this.drop(this.$t('messageDropEgg', { dropText, dropNotes }), drop);
+        } else if (drop.type === 'Food') {
+          dropText = Content.food[drop.key].textA();
+          dropNotes = Content.food[drop.key].notes();
+          this.drop(this.$t('messageDropFood', { dropText, dropNotes }), drop);
+        } else if (drop.type === 'Quest') {
+          // TODO $rootScope.selectedQuest = Content.quests[drop.key];
+          // $rootScope.openModal('questDrop', {controller:'PartyCtrl', size:'sm'});
+        } else {
+          // Keep support for another type of drops that might be added
+          this.drop(drop.dialog);
+        }
+      }
+    },
+  },
+};
diff --git a/website/client/src/mixins/sync.js b/website/client/src/mixins/sync.js
index d1e574670e..7f374103e4 100644
--- a/website/client/src/mixins/sync.js
+++ b/website/client/src/mixins/sync.js
@@ -4,6 +4,9 @@ export default {
   methods: {
     async sync () {
       this.$root.$emit(EVENTS.RESYNC_REQUESTED);
+      if (this.$route.fullPath.indexOf('task-information') !== -1) {
+        this.$root.$emit('habitica:team-sync');
+      }
       await Promise.all([
         this.$store.dispatch('user:fetch', { forceLoad: true }),
         this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true }),
diff --git a/website/client/src/store/actions/tags.js b/website/client/src/store/actions/tags.js
index 1e17e06391..4ec43c5a3c 100644
--- a/website/client/src/store/actions/tags.js
+++ b/website/client/src/store/actions/tags.js
@@ -9,9 +9,13 @@ export async function getTags () {
 export async function createTag (store, payload) {
   const url = 'api/v4/tags';
   const response = await axios.post(url, {
-    tagDetails: payload.tagDetails,
+    name: payload.name,
   });
-  return response.data.data;
+
+  const tag = response.data.data;
+
+  store.state.user.data.tags.push(tag);
+  return tag;
 }
 
 export async function getTag (store, payload) {
diff --git a/website/client/src/store/getters/tasks.js b/website/client/src/store/getters/tasks.js
index 6b9a24e4fb..b460b61500 100644
--- a/website/client/src/store/getters/tasks.js
+++ b/website/client/src/store/getters/tasks.js
@@ -13,6 +13,15 @@ export function getTagsFor (store) {
     .map(tag => tag.name);
 }
 
+export function getTagsByIdList (store) {
+  return function tagsByIdListFunc (taskIdArray) {
+    return (taskIdArray || []).length > 0
+      ? store.state.user.data.tags
+        .filter(tag => taskIdArray.indexOf(tag.id) !== -1)
+      : [];
+  };
+}
+
 function getTaskColor (task) {
   if (task.type === 'reward' || task.byHabitica) return 'purple';
 
@@ -110,7 +119,9 @@ export function canEdit (store) {
 
 function _nonInteractive (task) {
   return (task.group && task.group.id && !task.userId)
-    || (task.challenge && task.challenge.id && !task.userId);
+    || (task.challenge && task.challenge.id && !task.userId)
+    || (task.group && task.group.approval && task.group.approval.requested
+      && task.type !== 'habit');
 }
 
 export function getTaskClasses (store) {
@@ -132,6 +143,8 @@ export function getTaskClasses (store) {
         return `task-${color}-modal-content`;
       case 'create-modal-content':
         return 'task-purple-modal-content';
+      case 'edit-modal-headings':
+        return `task-${color}-modal-headings`;
       case 'edit-modal-text':
         return `task-${color}-modal-text`;
       case 'edit-modal-icon':
@@ -144,6 +157,8 @@ export function getTaskClasses (store) {
         return `task-${color}-modal-habit-control-disabled`;
       case 'create-modal-bg':
         return 'task-purple-modal-bg';
+      case 'create-modal-headings':
+        return 'task-purple-modal-headings';
       case 'create-modal-text':
         return 'task-purple-modal-text';
       case 'create-modal-input':
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index dc61024741..0afcf126df 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -261,12 +261,14 @@
   "onlyCreatorOrAdminCanDeleteChat": "Not authorized to delete this message!",
   "onlyGroupLeaderCanEditTasks": "Not authorized to manage tasks!",
   "onlyGroupTasksCanBeAssigned": "Only group tasks can be assigned",
-  "assignedTo": "Assigned To",
+  "assignedTo": "Assign To",
   "assignedToUser": "Assigned to <strong><%= userName %></strong>",
   "assignedToMembers": "Assigned to <strong><%= userCount %> members</strong>",
   "assignedToYouAndMembers": "Assigned to you and <strong><%= userCount %> members</strong>",
-  "youAreAssigned": "You are assigned to this task",
+  "youAreAssigned": "Assigned to you",
   "taskIsUnassigned": "This task is unassigned",
+  "unassigned": "Unassigned",
+  "chooseTeamMember": "Choose a team member",
   "confirmClaim": "Are you sure you want to claim this task?",
   "confirmUnClaim": "Are you sure you want to unclaim this task?",
   "confirmApproval": "Are you sure you want to approve this task?",
@@ -293,6 +295,7 @@
   "onlyGroupLeaderCanManageSubscription": "Only the group leader can manage the group's subscription",
   "youHaveBeenAssignedTask": "<%= managerName %> has assigned you the task <span class=\"notification-bold\"><%= taskText %></span>.",
   "yourTaskHasBeenApproved": "Your task <span class=\"notification-green notification-bold\"><%= taskText %></span> has been approved.",
+  "thisTaskApproved": "This task was approved",
   "taskClaimed": "<%= userName %> has claimed the task <span class=\"notification-bold\"><%= taskText %></span>.",
   "taskNeedsWork": "<span class=\"notification-bold\"><%= managerName %></span> marked <span class=\"notification-bold\"><%= taskText %></span> as needing additional work.",
   "userHasRequestedTaskApproval": "<span class=\"notification-bold\"><%= user %></span> requests approval for <span class=\"notification-bold\"><%= taskName %></span>",
@@ -498,5 +501,9 @@
   "singleCompletion": "Single - Completes when any assigned user finishes",
   "allAssignedCompletion": "All - Completes when all assigned users finish",
   "suggestedGroup": "Suggested because you’re new to Habitica.",
-  "groupActivityNotificationTitle": "<%= user %> posted in <%= group %>"
+  "groupActivityNotificationTitle": "<%= user %> posted in <%= group %>",
+  "managerNotes": "Manager's Notes",
+  "assignedDateOnly": "Assigned on <strong><%= date %></strong>",
+  "assignedDateAndUser": "Assigned by <strong>@<%= username %></strong> on <strong><%= date %></strong>",
+  "claimRewards": "Claim Rewards"
 }
diff --git a/website/common/locales/en/tasks.json b/website/common/locales/en/tasks.json
index b511cf5a44..b2bd6b26cd 100644
--- a/website/common/locales/en/tasks.json
+++ b/website/common/locales/en/tasks.json
@@ -211,5 +211,8 @@
   "repeatDayError": "Please ensure that you have at least one day of the week selected.",
   "searchTasks": "Search titles and descriptions...",
   "sessionOutdated": "Your session is outdated. Please refresh or sync.",
-  "errorTemporaryItem": "This item is temporary and cannot be pinned."
+  "errorTemporaryItem": "This item is temporary and cannot be pinned.",
+  "addTags": "Add tags...",
+  "enterTag": "Enter a tag",
+  "pressEnterToAddTag": "Press Enter to add tag: '<%= tagName %>'"
 }
diff --git a/website/common/script/ops/scoreTask.js b/website/common/script/ops/scoreTask.js
index 4bd3be7cae..26bc03dc04 100644
--- a/website/common/script/ops/scoreTask.js
+++ b/website/common/script/ops/scoreTask.js
@@ -235,7 +235,7 @@ export default function scoreTask (options = {}, req = {}, analytics) {
 
   if (
     task.group && task.group.approval && task.group.approval.required
-    && !task.group.approval.approved
+    && !task.group.approval.approved && !(task.type === 'todo' && cron)
   ) return 0;
 
   // This is for setting one-time temporary flags,
diff --git a/website/server/controllers/api-v3/tasks.js b/website/server/controllers/api-v3/tasks.js
index 96f71b6f2d..159cabadac 100644
--- a/website/server/controllers/api-v3/tasks.js
+++ b/website/server/controllers/api-v3/tasks.js
@@ -658,7 +658,7 @@ api.updateTask = {
     if (!challenge && task.userId && task.challenge && task.challenge.id) {
       sanitizedObj = Tasks.Task.sanitizeUserChallengeTask(updatedTaskObj);
     } else if (!group && task.userId && task.group && task.group.id) {
-      sanitizedObj = Tasks.Task.sanitizeUserChallengeTask(updatedTaskObj);
+      sanitizedObj = Tasks.Task.sanitizeUserGroupTask(updatedTaskObj);
     } else {
       sanitizedObj = Tasks.Task.sanitize(updatedTaskObj);
     }
@@ -677,6 +677,9 @@ api.updateTask = {
     if (sanitizedObj.sharedCompletion) {
       task.group.sharedCompletion = sanitizedObj.sharedCompletion;
     }
+    if (sanitizedObj.managerNotes) {
+      task.group.managerNotes = sanitizedObj.managerNotes;
+    }
 
     setNextDue(task, user);
     const savedTask = await task.save();
@@ -719,6 +722,8 @@ api.updateTask = {
  *
  * @apiSuccess {Object} data The user stats
  * @apiSuccess {Object} data._tmp If an item was dropped it'll be returned in te _tmp object
+ * @apiSuccess (202) {Boolean} data.approvalRequested Approval was requested for team task
+ * @apiSuccess (202) {String} message Acknowledgment of team task approval request
  * @apiSuccess {Number} data.delta The delta
  *
  * @apiSuccessExample {json} Example result:
@@ -811,7 +816,22 @@ api.scoreTask = {
         managerPromises.push(task.save());
         await Promise.all(managerPromises);
 
-        throw new NotAuthorized(res.t('taskApprovalHasBeenRequested'));
+        res.respond(
+          202,
+          { approvalRequested: true },
+          res.t('taskApprovalHasBeenRequested'),
+        );
+        return;
+      }
+    }
+
+    if (task.group.approval.required && task.group.approval.approved) {
+      const notificationIndex = user.notifications.findIndex(notification => notification
+         && notification.data && notification.data.task
+         && notification.data.task._id === task._id && notification.type === 'GROUP_TASK_APPROVED');
+
+      if (notificationIndex !== -1) {
+        user.notifications.splice(notificationIndex, 1);
       }
     }
 
diff --git a/website/server/controllers/api-v3/tasks/groups.js b/website/server/controllers/api-v3/tasks/groups.js
index 0adfac076c..4a3112f94b 100644
--- a/website/server/controllers/api-v3/tasks/groups.js
+++ b/website/server/controllers/api-v3/tasks/groups.js
@@ -237,7 +237,7 @@ api.assignTask = {
       });
     }
 
-    promises.push(group.syncTask(task, assignedUser));
+    promises.push(group.syncTask(task, assignedUser, user));
     promises.push(group.save());
     await Promise.all(promises);
 
@@ -362,7 +362,7 @@ api.approveTask = {
     const firstNotificationIndex = firstManagerNotifications.findIndex(notification => notification && notification.data && notification.data.taskId === task._id && notification.type === 'GROUP_TASK_APPROVAL');
     let direction = 'up';
     if (firstManagerNotifications[firstNotificationIndex]) {
-      direction = firstManagerNotifications[firstNotificationIndex].direction;
+      direction = firstManagerNotifications[firstNotificationIndex].direction || direction;
     }
 
     // Remove old notifications
@@ -380,11 +380,7 @@ api.approveTask = {
     assignedUser.addNotification('GROUP_TASK_APPROVED', {
       message: res.t('yourTaskHasBeenApproved', { taskText: task.text }),
       groupId: group._id,
-    });
-
-    assignedUser.addNotification('SCORED_TASK', {
-      message: res.t('yourTaskHasBeenApproved', { taskText: task.text }),
-      scoreTask: task,
+      task,
       direction,
     });
 
diff --git a/website/server/libs/taskManager.js b/website/server/libs/taskManager.js
index 1cac7b2b58..3807872d62 100644
--- a/website/server/libs/taskManager.js
+++ b/website/server/libs/taskManager.js
@@ -100,6 +100,7 @@ export async function createTasks (req, res, options = {}) {
         newTask.group.approval.required = true;
       }
       newTask.group.sharedCompletion = taskData.sharedCompletion || SHARED_COMPLETION.default;
+      newTask.group.managerNotes = taskData.managerNotes || '';
     } else {
       newTask.userId = user._id;
 
diff --git a/website/server/models/group.js b/website/server/models/group.js
index 996be822a0..8223df0743 100644
--- a/website/server/models/group.js
+++ b/website/server/models/group.js
@@ -1472,6 +1472,7 @@ schema.methods.updateTask = async function updateTask (taskToSync, options = {})
   updateCmd.$set['group.approval.required'] = taskToSync.group.approval.required;
   updateCmd.$set['group.assignedUsers'] = taskToSync.group.assignedUsers;
   updateCmd.$set['group.sharedCompletion'] = taskToSync.group.sharedCompletion;
+  updateCmd.$set['group.managerNotes'] = taskToSync.group.managerNotes;
 
   const taskSchema = Tasks[taskToSync.type];
 
@@ -1492,26 +1493,8 @@ schema.methods.updateTask = async function updateTask (taskToSync, options = {})
     updateCmd.$pull = { checklist: { linkId: { $in: [options.removedCheckListItemId] } } };
   }
 
-  if (options.updateCheckListItems && options.updateCheckListItems.length > 0) {
-    const checkListIdsToRemove = [];
-    const checkListItemsToAdd = [];
-
-    options.updateCheckListItems.forEach(updateCheckListItem => {
-      checkListIdsToRemove.push(updateCheckListItem.id);
-      const newCheckList = { completed: false };
-      newCheckList.linkId = updateCheckListItem.id;
-      newCheckList.text = updateCheckListItem.text;
-      checkListItemsToAdd.push(newCheckList);
-    });
-
-    updateCmd.$pull = { checklist: { linkId: { $in: checkListIdsToRemove } } };
-    await taskSchema.update(updateQuery, updateCmd, { multi: true }).exec();
-
-    delete updateCmd.$pull;
-    updateCmd.$push = { checklist: { $each: checkListItemsToAdd } };
-    await taskSchema.update(updateQuery, updateCmd, { multi: true }).exec();
-
-    return;
+  if (options.updateCheckListItems) {
+    updateCmd.$set.checklist = taskToSync.checklist;
   }
 
   // Updating instead of loading and saving for performances,
@@ -1519,7 +1502,7 @@ schema.methods.updateTask = async function updateTask (taskToSync, options = {})
   await taskSchema.update(updateQuery, updateCmd, { multi: true }).exec();
 };
 
-schema.methods.syncTask = async function groupSyncTask (taskToSync, user) {
+schema.methods.syncTask = async function groupSyncTask (taskToSync, user, assigningUser) {
   const group = this;
   const toSave = [];
 
@@ -1570,6 +1553,10 @@ schema.methods.syncTask = async function groupSyncTask (taskToSync, user) {
   matchingTask.group.approval.required = taskToSync.group.approval.required;
   matchingTask.group.assignedUsers = taskToSync.group.assignedUsers;
   matchingTask.group.sharedCompletion = taskToSync.group.sharedCompletion;
+  matchingTask.group.managerNotes = taskToSync.group.managerNotes;
+  if (assigningUser && user._id !== assigningUser._id) {
+    matchingTask.group.assigningUsername = assigningUser.auth.local.username;
+  }
 
   //  sync checklist
   if (taskToSync.checklist) {
@@ -1632,15 +1619,48 @@ schema.methods.unlinkTask = async function groupUnlinkTask (
 
 schema.methods.removeTask = async function groupRemoveTask (task) {
   const group = this;
+  const removalPromises = [];
 
-  // Set the task as broken
-  await Tasks.Task.update({
+  // Delete individual task copies and related notifications
+  const userTasks = await Tasks.Task.find({
     userId: { $exists: true },
     'group.id': group.id,
     'group.taskId': task._id,
-  }, {
-    $set: { 'group.broken': 'TASK_DELETED' },
-  }, { multi: true }).exec();
+  }, { userId: 1, _id: 1 }).exec();
+
+  userTasks.forEach(async userTask => {
+    const assignedUser = await User.findOne({ _id: userTask.userId }, 'notifications tasksOrder').exec();
+
+    let notificationIndex = assignedUser.notifications.findIndex(notification => notification
+      && notification.type === 'GROUP_TASK_ASSIGNED'
+      && notification.data && notification.data.taskId === task._id);
+
+    if (notificationIndex !== -1) {
+      assignedUser.notifications.splice(notificationIndex, 1);
+    }
+
+    notificationIndex = assignedUser.notifications.findIndex(notification => notification
+      && notification.type === 'GROUP_TASK_NEEDS_WORK'
+      && notification.data && notification.data.task
+      && notification.data.task.id === userTask._id);
+
+    if (notificationIndex !== -1) {
+      assignedUser.notifications.splice(notificationIndex, 1);
+    }
+
+    notificationIndex = assignedUser.notifications.findIndex(notification => notification
+      && notification.type === 'GROUP_TASK_APPROVED'
+      && notification.data && notification.data.task
+      && notification.data.task._id === userTask._id);
+
+    if (notificationIndex !== -1) {
+      assignedUser.notifications.splice(notificationIndex, 1);
+    }
+
+    await Tasks.Task.remove({ _id: userTask._id });
+    removeFromArray(assignedUser.tasksOrder[`${task.type}s`], userTask._id);
+    removalPromises.push(assignedUser.save());
+  });
 
   // Get Managers
   const managerIds = Object.keys(group.managers);
@@ -1648,14 +1668,15 @@ schema.methods.removeTask = async function groupRemoveTask (task) {
   const managers = await User.find({ _id: managerIds }, 'notifications').exec(); // Use this method so we can get access to notifications
 
   // Remove old notifications
-  const removalPromises = [];
   managers.forEach(manager => {
-    const notificationIndex = manager.notifications.findIndex(notification => notification && notification.data && notification.data.groupTaskId === task._id && notification.type === 'GROUP_TASK_APPROVAL');
+    const notificationIndex = manager.notifications.findIndex(notification => notification
+      && notification.data && notification.data.groupTaskId === task._id
+      && notification.type === 'GROUP_TASK_APPROVAL');
 
     if (notificationIndex !== -1) {
       manager.notifications.splice(notificationIndex, 1);
-      removalPromises.push(manager.save());
     }
+    removalPromises.push(manager.save());
   });
 
   removeFromArray(group.tasksOrder[`${task.type}s`], task._id);
diff --git a/website/server/models/task.js b/website/server/models/task.js
index 1cee740503..b83ab726c7 100644
--- a/website/server/models/task.js
+++ b/website/server/models/task.js
@@ -128,16 +128,17 @@ export const TaskSchema = new Schema({
   },
 
   group: {
-    id: { $type: String, ref: 'Group', validate: [v => validator.isUUID(v), 'Invalid uuid for task group.'] },
+    id: { $type: String, ref: 'Group', validate: [v => validator.isUUID(v), 'Invalid uuid for group task.'] },
     broken: { $type: String, enum: ['GROUP_DELETED', 'TASK_DELETED', 'UNSUBSCRIBED'] },
-    assignedUsers: [{ $type: String, ref: 'User', validate: [v => validator.isUUID(v), 'Invalid uuid for task group user.'] }],
+    assignedUsers: [{ $type: String, ref: 'User', validate: [v => validator.isUUID(v), 'Invalid uuid for group assigned user.'] }],
     assignedDate: { $type: Date },
-    taskId: { $type: String, ref: 'Task', validate: [v => validator.isUUID(v), 'Invalid uuid for task group task.'] },
+    assigningUsername: { $type: String },
+    taskId: { $type: String, ref: 'Task', validate: [v => validator.isUUID(v), 'Invalid uuid for group task.'] },
     approval: {
       required: { $type: Boolean, default: false },
       approved: { $type: Boolean, default: false },
       dateApproved: { $type: Date },
-      approvingUser: { $type: String, ref: 'User', validate: [v => validator.isUUID(v), 'Invalid uuid task group approvingUser.'] },
+      approvingUser: { $type: String, ref: 'User', validate: [v => validator.isUUID(v), 'Invalid uuid for group approving user.'] },
       requested: { $type: Boolean, default: false },
       requestedDate: { $type: Date },
     },
@@ -146,6 +147,7 @@ export const TaskSchema = new Schema({
       enum: _.values(SHARED_COMPLETION),
       default: SHARED_COMPLETION.single,
     },
+    managerNotes: { $type: String },
   },
 
   reminders: [reminderSchema],
@@ -220,6 +222,16 @@ TaskSchema.statics.sanitizeUserChallengeTask = function sanitizeUserChallengeTas
   ]);
 };
 
+TaskSchema.statics.sanitizeUserGroupTask = function sanitizeUserGroupTask (taskObj) {
+  const initialSanitization = this.sanitize(taskObj);
+
+  return _.pick(initialSanitization, [
+    'streak', 'attribute', 'reminders',
+    'tags', 'notes', 'collapseChecklist',
+    'alias', 'yesterDaily', 'counterDown', 'counterUp',
+  ]);
+};
+
 // Sanitize checklist objects (disallowing id)
 TaskSchema.statics.sanitizeChecklist = function sanitizeChecklist (checklistObj) {
   delete checklistObj.id;