diff --git a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
index 1271a1391..1e528adff 100644
--- a/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
+++ b/resources/assets/js/components/menu/CustomSidebarMenuItem.vue
@@ -26,7 +26,7 @@
                 @click.native="clickEvent"
             >
                 <custom-sidebar-menu-icon
-                    v-if="item.icon && !isMobileItem"
+                    v-if="item.icon && !isMobileItem && item.specialType !='header'"
                     :icon="item.icon"
                     v-bind:style="setIconColor"
                 />
@@ -38,8 +38,7 @@
                                 isMobileItem
                         "
                     >
-                    
-                        <span class="vsm--title">
+                        <span :class="item.specialType != 'header'?'vsm--title': 'vsm--header vsm--title--header'">
                             <template v-if="itemTaskList">
                                 <custom-tooltip
                                     :data="item"
@@ -57,6 +56,11 @@
                         </span>
                     </template>
                 </transition>
+                <custom-sidebar-menu-icon
+                    v-if="item.icon && !isMobileItem && item.specialType =='header'"
+                    :icon="item.icon"
+                    v-bind:style="setIconColor"
+                />
                 <template
                     v-if="
                         (isCollapsed && !isFirstLevel) ||
@@ -568,3 +572,20 @@ export default {
     inject: ["emitActiveShow", "emitItemClick", "emitItemUpdate"],
 };
 </script>
+<style scoped>
+.vsm--header.vsm--title--header{
+    display: initial;
+    white-space: nowrap;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vsm--header.vsm--title--header + .vsm--icon{
+    float: none;
+    line-height: 30px;
+    margin-right: 10px;
+    margin-left: 0px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 455195399..399572480 100755
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -109,7 +109,8 @@ export default {
                 CASES_SELFSERVICE: "unassigned",
                 CONSOLIDATED_CASES: "batch-routing",
                 CASES_TO_REASSIGN: "task-reassignments",
-                CASES_FOLDERS: "my-documents"
+                CASES_FOLDERS: "my-documents",
+                TASK_METRICS:"task-metrics"
             },
             defaultOption: window.config.defaultOption || '',
             pageData: {},
@@ -294,16 +295,15 @@ export default {
                         props: {
                             isCollapsed: this.collapsed? true: false,
                             item: {
-                                header: data[i].header,
+                                href: "/task-metrics/" + data[i].id,
+                                icon: "fas fa-chart-pie",
+                                id: "TASK_METRICS",
+                                page: "task-metrics",
                                 title: data[i].title,
-                                hiddenOnCollapse: data[i].hiddenOnCollapse,
-                                icon: 'pie-chart-fill',
-                                onClick: function (item) {
-                                  that.onUpdatePage("task-metrics");
-                                }
+                                specialType: "header"
                             }
                         }
-                    }
+                    };
                 }
                 if (data[i].customCasesList)  {
                     data[i]["child"] = this.sortCustomCasesList(