diff --git a/resources/assets/js/components/utils/BreadCrumb.vue b/resources/assets/js/components/utils/BreadCrumb.vue
index 8a921c945..f92c129ea 100644
--- a/resources/assets/js/components/utils/BreadCrumb.vue
+++ b/resources/assets/js/components/utils/BreadCrumb.vue
@@ -6,13 +6,15 @@
         :key="item.label"
         :class="item.classObject"
       >
-        <span v-if="item.data.color">
-          <div
-            class="vp-color-breadcrumb"
-            :style="{ backgroundColor: item.data.color }"
-          ></div
-        ></span>
-        <span>{{ item.label }}</span>
+        <span @click="item.onClick">
+          <span v-if="item.color">
+            <div
+              class="vp-color-breadcrumb"
+              :style="{ backgroundColor: item.color }"
+            ></div
+          ></span>
+          <span>{{ item.label }}</span>
+        </span>
       </li>
       <div
         v-for="item in settings"
@@ -47,19 +49,11 @@ export default {
     formatOptions(data) {
       let options = data;
       for (let i = 0; i <= options.length - 1; i++) {
-        if (i === options.length - 1) {
-          options[i].classObject = {
-            "vp-breadcrumb-item": true,
-            active: true,
-            "vp-inline-block": true,
-          };
-        } else {
-          options[i].classObject = {
-            "vp-breadcrumb-item": true,
-            active: false,
-            "vp-inline-block": true,
-          };
-        }
+        options[i].classObject = {
+          "vp-breadcrumb-item": true,
+          active: false,
+          "vp-inline-block": true,
+        };
       }
       return options;
     },
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index e8c3a6f2d..89cd28a9f 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -4,7 +4,7 @@ export default {
   data() {
     let that = this;
     return {
-      typeView: this.settings.view && this.settings.view.typeView
+      typeView: this.settings && this.settings.view && this.settings.view.typeView
         ? this.settings.view.typeView
         : "GRID",
       random: 1,
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
index 718a99382..f0a90e1bd 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -6,7 +6,7 @@
       </h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <ProcessPopover
@@ -28,7 +28,9 @@
             @select="changeOption"
           ></multiselect>
         </div>
-        <label class="vp-inline-block vp-padding-l20">{{ $t("ID_TOP10") }}</label>
+        <label class="vp-inline-block vp-padding-l20">{{
+          $t("ID_TOP10")
+        }}</label>
         <div class="vp-inline-block">
           <b-form-checkbox
             v-model="top"
@@ -104,7 +106,7 @@ export default {
     BreadCrumb,
     ProcessPopover,
   },
-  props: ["data", "breadCrumbs"],
+  props: ["data"],
   data() {
     let that = this;
     return {
@@ -289,7 +291,7 @@ export default {
           .then((response) => {
             that.totalCases = response.data;
             that.formatTotalCases(response.data);
-          })  
+          })
           .catch((e) => {
             console.error(err);
           });
@@ -429,6 +431,20 @@ export default {
       });
       eventBus.$emit("home::sidebar::click-item", taskList);
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      return res;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
index 103973bb6..ccb120931 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
-      <h6 class="v-search-title">{{$t("ID_DRILL_DOWN_RISK_MATRIX")}}</h6>
+      <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}</h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <div class="vp-width-p30 vp-inline-block">
@@ -36,9 +36,7 @@
           ></b-form-datepicker>
         </div>
         <div class="vp-inline-block">
-          <label class="form-label">{{
-            $t("ID_TOP")
-          }}</label>
+          <label class="form-label">{{ $t("ID_TOP") }}</label>
         </div>
         <div class="vp-inline-block">
           <multiselect
@@ -298,7 +296,7 @@ export default {
           this.$refs["LevelThreeChart"].updateOptions({
             yaxis: {
               max: 0,
-              tickAmount: 7
+              tickAmount: 7,
             },
             title: {
               text: "Days before being Overdue",
@@ -309,7 +307,7 @@ export default {
           this.$refs["LevelThreeChart"].updateOptions({
             yaxis: {
               max: 0,
-              tickAmount: 7
+              tickAmount: 7,
             },
             title: {
               text: "Days before being At-Risk",
@@ -421,6 +419,27 @@ export default {
         });
       });
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      if (this.data[2]) {
+        res.push({
+          label: this.data[2]["name"],
+          onClick() {},
+          color: null,
+        });
+      }
+      return res;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
index 07b232139..2608c77e9 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
@@ -6,7 +6,7 @@
       </h6>
       <div>
         <BreadCrumb
-          :options="breadCrumbs.data"
+          :options="dataBreadcrumbs()"
           :settings="settingsBreadcrumbs"
         />
         <div class="vp-width-p30 vp-inline-block">
@@ -94,7 +94,7 @@ export default {
     Multiselect,
     BreadCrumb,
   },
-  props: ["data", "breadCrumbs"],
+  props: ["data"],
   data() {
     let that = this;
     return {
@@ -155,12 +155,12 @@ export default {
     this.changeOption();
   },
   watch: {
-    dateFrom () {
+    dateFrom() {
       this.validateDateTo();
     },
-    dateTo () {
+    dateTo() {
       this.validateDateTo();
-    }
+    },
   },
   computed: {},
   updated() {},
@@ -282,7 +282,7 @@ export default {
      * Validate range date
      */
     validateDateTo() {
-      if (this.dateFrom !== '' && this.dateTo !== '') {
+      if (this.dateFrom !== "" && this.dateTo !== "") {
         if (this.dateFrom > this.dateTo) {
           this.stateDateTo = false;
         } else {
@@ -290,6 +290,27 @@ export default {
         }
       }
     },
+    /**
+     * Return the breadcrumbs
+     */
+    dataBreadcrumbs() {
+      let res = [];
+      if (this.data[1]) {
+        res.push({
+          label: this.data[1]["name"],
+          onClick() {},
+          color: this.data[1]["color"],
+        });
+      }
+      if (this.data[2]) {
+        res.push({
+          label: this.data[2]["name"],
+          onClick() {},
+          color: null,
+        });
+      }
+      return res;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
index b8b667bbb..a54815c40 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -2,7 +2,7 @@
   <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
     <div class="p-1 v-flex">
       <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NUMBER_TASKS") }}</h6>
-      <BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
+      <BreadCrumb :options="dataBreadcrumbs" :settings="settingsBreadcrumbs" />
       <apexchart
         v-show="typeView === 'donut'"
         ref="apexchart1"
@@ -52,7 +52,7 @@ export default {
   name: "VueChartLvZero",
   mixins: [],
   components: { BreadCrumb },
-  props: ["breadCrumbs"],
+  props: [],
   data() {
     let that = this;
     return {
@@ -68,6 +68,57 @@ export default {
           onClick() {},
         },
       ],
+      dataBreadcrumbs: [
+        {
+          label: that.$i18n.t("ID_INBOX"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_INBOX"),
+              name: that.$i18n.t("ID_INBOX"),
+              level: 1,
+              color: "#179a6e",
+            });
+          },
+          color: "#179a6e",
+        },
+        {
+          label: this.$i18n.t("ID_DRAFT"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_DRAFT"),
+              name: that.$i18n.t("ID_DRAFT"),
+              level: 1,
+              color: "#feb019",
+            });
+          },
+          color: "#feb019",
+        },
+        {
+          label: this.$i18n.t("ID_PAUSED"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_PAUSED"),
+              name: that.$i18n.t("ID_PAUSED"),
+              level: 1,
+              color: "#008ffb",
+            });
+          },
+          color: "#008ffb",
+        },
+        {
+          label: this.$i18n.t("ID_UNASSIGNED"),
+          onClick() {
+            that.$emit("updateDataLevel", {
+              id: that.$i18n.t("ID_UNASSIGNED"),
+              name: that.$i18n.t("ID_UNASSIGNED"),
+              level: 1,
+              color: "#8f99a0",
+            });
+          },
+
+          color: "#8f99a0",
+        },
+      ],
       optionsDonut: {
         labels: [
           this.$i18n.t("ID_INBOX"),
@@ -78,20 +129,10 @@ export default {
         chart: {
           id: "apexchart1",
           type: "donut",
-          events: {
-            legendClick: function (chartContext, seriesIndex, config) {
-              that.currentSelection = that.data[seriesIndex];
-              that.$emit("updateDataLevel", {
-                id: that.currentSelection["List Name"],
-                name: that.currentSelection["List Name"],
-                level: 1,
-                color: that.formatColor(that.currentSelection["Color"]),
-                data: that.currentSelection,
-              });
-            },
-          },
+          events: {},
         },
         legend: {
+          show: false,
           position: "top",
           offsetY: 0,
         },
@@ -127,6 +168,7 @@ export default {
           },
         },
         legend: {
+          show: false,
           position: "top",
           offsetY: 0,
         },
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
index 49b110241..d474a5572 100644
--- a/resources/assets/js/home/TaskMetrics/VueCharts.vue
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -3,27 +3,23 @@
     <vue-chart-lv-zero
       v-show="level === 0"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-one
       :key="key1"
       v-show="level === 1"
       :data="levels"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-two
       :key="key2"
       v-show="level === 2"
       :data="levels"
       @updateDataLevel="updateDataLevel"
-      :breadCrumbs="dataBreadCrumbs()"
     />
     <vue-chart-lv-three
       :key="key3"
       v-show="level === 3"
       :data="levels"
-      :breadCrumbs="dataBreadCrumbs()"
     />
   </div>
 </template>