diff --git a/website/client/assets/scss/pin.scss b/website/client/assets/scss/pin.scss
new file mode 100644
index 0000000000..556f8f6a13
--- /dev/null
+++ b/website/client/assets/scss/pin.scss
@@ -0,0 +1,31 @@
+.badge-svg {
+    left: calc((100% - 18px) / 2);
+    cursor: pointer;
+    color: $gray-400;
+    background: $white;
+    padding: 4.5px 6px;
+
+    &.item-selected-badge {
+      background: $purple-300;
+      color: $white;
+    }
+  }
+
+  span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
+    color: #a5a1ac;
+  }
+
+  span.badge.badge-pill.badge-item.badge-svg.hide {
+    display: none;
+  }
+
+  .item:hover {
+    span.badge.badge-pill.badge-item.badge-svg.hide {
+      display: block;
+    }
+  }
+
+  .icon-12 {
+    width: 12px;
+    height: 12px;
+  }
\ No newline at end of file
diff --git a/website/client/components/shops/market/index.vue b/website/client/components/shops/market/index.vue
index 06f4a7157f..7859c87451 100644
--- a/website/client/components/shops/market/index.vue
+++ b/website/client/components/shops/market/index.vue
@@ -234,6 +234,7 @@
 <style lang="scss">
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/variables.scss';
+  @import '~client/assets/scss/pin.scss';
 
   .market .drawer-slider {
     min-height: 60px;
@@ -247,37 +248,7 @@
     height: 38px; // button + margin + padding
   }
 
-  .badge-svg {
-    left: calc((100% - 18px) / 2);
-    cursor: pointer;
-    color: $gray-400;
-    background: $white;
-    padding: 4.5px 6px;
-
-    &.item-selected-badge {
-      background: $purple-300;
-      color: $white;
-    }
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
-    color: #a5a1ac;
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg.hide {
-    display: none;
-  }
-
-  .item:hover {
-    span.badge.badge-pill.badge-item.badge-svg.hide {
-      display: block;
-    }
-  }
-
-  .icon-12 {
-    width: 12px;
-    height: 12px;
-  }
+  
   .icon-48 {
     width: 48px;
     height: 48px;
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index eac8c6bb83..5444a1d200 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -69,38 +69,8 @@
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/pin.scss';
 
-  .badge-svg {
-    left: calc((100% - 18px) / 2);
-    cursor: pointer;
-    color: $gray-400;
-    background: $white;
-    padding: 4.5px 6px;
-
-    &.item-selected-badge {
-      background: $purple-300;
-      color: $white;
-    }
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
-    color: #a5a1ac;
-  }
-
-  span.badge.badge-pill.badge-item.badge-svg.hide {
-    display: none;
-  }
-
-  .item:hover {
-    span.badge.badge-pill.badge-item.badge-svg.hide {
-      display: block;
-    }
-  }
-
-  .icon-12 {
-    width: 12px;
-    height: 12px;
-  }
 
   .tasks-column {
     min-height: 556px;
@@ -110,6 +80,7 @@
     margin-top: 16px;
   }
 
+
   .reward-items {
     display: flex;
     flex-wrap: wrap;
@@ -271,6 +242,7 @@ import { mapState, mapActions } from 'client/libs/store';
 import shopItem from '../shops/shopItem';
 import BuyQuestModal from 'client/components/shops/quests/buyQuestModal.vue';
 
+import notifications from 'client/mixins/notifications';
 import { shouldDo } from 'common/script/cron';
 import inAppRewards from 'common/script/libs/inAppRewards';
 import spells from 'common/script/content/spells';
@@ -283,7 +255,7 @@ import todoIcon from 'assets/svg/todo.svg';
 import rewardIcon from 'assets/svg/reward.svg';
 
 export default {
-  mixins: [buyMixin],
+  mixins: [buyMixin, notifications],
   components: {
     Task,
     BuyQuestModal,
@@ -630,10 +602,10 @@ export default {
     togglePinned (item) {
       try {
         if (!this.$store.dispatch('user:togglePinnedItem', {type: item.pinType, path: item.path})) {
-          this.$parent.$parent.text(this.$t('unpinnedItem', {item: item.text}));
+          this.text(this.$t('unpinnedItem', {item: item.text}));
         }
       } catch (e) {
-        this.$parent.$parent.text(e.message);
+        this.error(e.message);
       }
     },
   },