diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
index 3114ce6fa7..524cfc462d 100644
--- a/frontend/assets/scss/abstract/variables/_variables.scss
+++ b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -152,4 +152,9 @@ $swift-ease-in-out-timing-function: cubic-bezier(0.35,
 $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
 $swift-linear-duration: 0.15s !default;
 $swift-linear-timing-function: linear !default;
-$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
\ No newline at end of file
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
+
+// sidebar
+$sidebarPanelWidth: 280px;
+$sidebarMenuWidth: 70px;
+$sidebarWidth: $sidebarPanelWidth + $sidebarMenuWidth;
diff --git a/frontend/components/commons/TaskSearch.vue b/frontend/components/commons/TaskSearch.vue
index ebf654fa7e..d4f150810a 100644
--- a/frontend/components/commons/TaskSearch.vue
+++ b/frontend/components/commons/TaskSearch.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div class="app__content">
-    <div :class="['grid', annotationEnabled ? 'grid--editable' : '']">
+    <div class="grid">
       <Results :dataset="dataset" />
     </div>
   </div>
@@ -34,9 +34,6 @@ export default {
     },
   },
   computed: {
-    annotationEnabled() {
-      return this.dataset.viewSettings.viewMode === "annotate";
-    },
     workspace() {
       return currentWorkspace(this.$route);
     },
diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
index 44b73eeec4..4ad9f9007c 100644
--- a/frontend/components/commons/header/filters/FiltersArea.vue
+++ b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -121,17 +121,11 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   margin-left: 0;
-  padding-right: calc(4em + 45px);
-  &--intro {
-    padding-top: 2em;
-    margin-bottom: 1.5em;
-    &:after {
-      border-bottom: 1px solid $line-light-color;
-      content: "";
-      margin-bottom: 1.5em;
-      position: absolute;
-      left: 0;
-      right: 0;
+  padding-right: calc($sidebarMenuWidth + 15px);
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc($sidebarWidth + 25px);
+      transition: padding 0.1s ease-in-out;
     }
   }
 }
diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue
index 6d5804d11e..1b34e29ac4 100644
--- a/frontend/components/commons/header/global-actions/GlobalActions.vue
+++ b/frontend/components/commons/header/global-actions/GlobalActions.vue
@@ -45,17 +45,16 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4em;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   .--metrics & {
     @include media(">desktop") {
-      padding-right: calc(294px + 100px);
+      padding-right: calc($sidebarWidth + 25px);
       transition: padding 0.1s ease-in-out;
     }
   }
   @include media(">desktop") {
     transition: padding 0.1s ease-in-out;
     width: 100%;
-    padding-right: 100px;
   }
 }
 .global-actions {
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index 347ca6eefd..6f24681fc0 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -92,8 +92,8 @@ $buttonSize: 34px;
   }
   &__content {
     position: absolute;
-    top: 3.8em;
-    right: -1em;
+    top: 3.5em;
+    right: -0.5em;
     padding-top: 1.5em;
     background: $lighter-color;
     border-radius: 5px;
@@ -104,9 +104,9 @@ $buttonSize: 34px;
     min-width: 300px;
     &:after {
       position: absolute;
-      top: -12px;
-      right: 1.3em;
-      @include triangle(top, 12px, 12px, white);
+      top: -10px;
+      right: 1em;
+      @include triangle(top, 10px, 10px, white);
     }
     a {
       text-decoration: none;
diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
index 0ac1e166fa..d33b7dd179 100644
--- a/frontend/components/commons/results/ResultsList.vue
+++ b/frontend/components/commons/results/ResultsList.vue
@@ -172,19 +172,18 @@ export default {
   position: relative;
   margin-bottom: 0;
   list-style: none;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   z-index: 0;
   .--metrics & {
     @include media(">desktop") {
       width: 100%;
-      padding-right: calc(294px + 100px);
+      padding-right: calc($sidebarWidth + 25px);
       transition: padding 0.1s ease-in-out;
     }
   }
   @include media(">desktop") {
     transition: padding 0.1s ease-in-out;
     width: 100%;
-    padding-right: 100px;
   }
   .results-scroll {
     height: 100vh !important;
diff --git a/frontend/components/commons/sidebar/SidebarButton.vue b/frontend/components/commons/sidebar/SidebarButton.vue
index 9f9a8fcd6e..367ebe27cb 100644
--- a/frontend/components/commons/sidebar/SidebarButton.vue
+++ b/frontend/components/commons/sidebar/SidebarButton.vue
@@ -1,16 +1,17 @@
 <template>
   <a
     class="sidebar-button"
+    :class="[type.toLowerCase(), activeView.includes(id) ? 'active' : '']"
     href="#"
-    :data-title="tooltip"
+    :data-title="!activeView.includes(id) ? tooltip : null"
     @click="$emit('button-action', id)"
   >
-    <svgicon
+    <!-- <svgicon
       v-if="type !== 'Refresh'"
-      v-show="activeView === id"
+      v-show="activeView.includes(id)"
       class="sidebar-button__icon-help"
       :name="type === 'Mode' ? 'check3' : 'double-chev'"
-    ></svgicon>
+    ></svgicon> -->
     <svgicon :name="icon"></svgicon>
   </a>
 </template>
@@ -22,13 +23,11 @@ import "assets/icons/annotate-view";
 import "assets/icons/labelling-rules-view";
 import "assets/icons/progress";
 import "assets/icons/metrics";
-import "assets/icons/double-chev";
-import "assets/icons/check3";
 export default {
   props: {
     activeView: {
-      type: String,
-      default: undefined,
+      type: Array,
+      default: () => [],
     },
     tooltip: {
       type: String,
@@ -64,6 +63,27 @@ $color: #333346;
     position: absolute;
     left: 0.8em;
   }
+  &.active {
+    &.mode {
+      .svg-icon {
+        background: palette(grey, smooth);
+        border-radius: $border-radius;
+      }
+    }
+    &.metrics {
+      position: relative;
+      &:before {
+        content: "";
+        height: 38px;
+        width: 2px;
+        background: $color;
+        border-radius: 2px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+  }
 }
 .svg-icon {
   display: block;
@@ -71,7 +91,9 @@ $color: #333346;
   margin: auto;
   width: 24px;
   height: 24px;
-  margin-bottom: 1.5em;
   fill: $color;
+  padding: 0.5em;
+  box-sizing: content-box;
+  margin-bottom: 0.5em;
 }
 </style>
diff --git a/frontend/components/commons/sidebar/SidebarMenu.vue b/frontend/components/commons/sidebar/SidebarMenu.vue
index bbb85da56d..82e56d28f8 100644
--- a/frontend/components/commons/sidebar/SidebarMenu.vue
+++ b/frontend/components/commons/sidebar/SidebarMenu.vue
@@ -17,18 +17,20 @@
 
 <template>
   <div class="sidebar">
-    <span v-for="group in sidebarButtonGroups" :key="group.name">
+    <span v-for="group in sidebarGroups" :key="group">
       <div class="sidebar__info">
-        <p>{{ group.name }}</p>
+        <p>{{ group }}</p>
         <sidebar-button
-          v-for="button in group.elements"
+          v-for="button in filteredSidebarItems.filter(
+            (button) => button.group === group
+          )"
           :id="button.id"
           :key="button.id"
-          :active-view="group.isActive"
+          :active-view="[viewMode, currentMetric]"
           :icon="button.icon"
           :tooltip="button.tooltip"
-          :type="group.name"
-          @button-action="group.action"
+          :type="group"
+          @button-action="action(button.action, button.id)"
         />
       </div>
     </span>
@@ -44,78 +46,29 @@ export default {
       requried: false,
       default: undefined,
     },
-  },
-  data: () => {
-    return {
-      currentViewMode: "explore",
-      width: window.innerWidth,
-      visibleSidebarInfo: undefined,
-    };
+    sidebarItems: {
+      type: Array,
+    },
+    currentMetric: {
+      type: String,
+    },
   },
   computed: {
-    sidebarButtonGroups() {
-      // TODO: sidebar must be customized for task view
-      var groups = [];
-      if (this.isDatasetView) {
-        const modeGroup = {
-          name: "Mode",
-          action: this.onChangeViewMode,
-          isActive: this.currentViewMode,
-          elements: [
-            {
-              id: "explore",
-              tooltip: "Explore",
-              icon: "explore-view",
-            },
-            {
-              id: "annotate",
-              tooltip: "Annotate",
-              icon: "annotate-view",
-            },
-          ],
-        };
-
-        if (this.showLabellingRules) {
-          modeGroup.elements.push({
-            id: "labelling-rules",
-            tooltip: "Define rules",
-            icon: "labelling-rules-view",
-          });
-        }
-        groups.push(modeGroup);
-
-        const metrics = {
-          name: "Metrics",
-          condition: this.isDatasetView,
-          action: this.onShowMetric,
-          isActive: this.visibleSidebarInfo,
-          elements: [
-            {
-              id: "progress",
-              tooltip: "Progress",
-              icon: "progress",
-            },
-            {
-              id: "stats",
-              tooltip: "Stats",
-              icon: "metrics",
-            },
-          ],
-        };
-        groups.push(metrics);
-      }
-      const refresh = {
-        name: "Refresh",
-        action: this.onRefresh,
-        elements: [
-          {
-            id: "refresh",
-            tooltip: "Refresh",
-            icon: "refresh",
-          },
-        ],
-      };
-      groups.push(refresh);
+    filteredSidebarItems() {
+      return this.sidebarItems.filter(
+        (item) =>
+          item.group !== "Metrics" || this.metricsByViewMode.includes(item.id)
+      );
+    },
+    metricsByViewMode() {
+      return this.sidebarItems.find(
+        (item) => item.id === this.dataset.viewSettings.viewMode
+      ).relatedMetrics;
+    },
+    sidebarGroups() {
+      const groups = [
+        ...new Set(this.sidebarItems.map((button) => button.group)),
+      ];
       return groups;
     },
     viewMode() {
@@ -127,37 +80,10 @@ export default {
     isDatasetView() {
       return this.dataset !== undefined;
     },
-    showLabellingRules() {
-      return this.isDatasetView && this.dataset.task === "TextClassification";
-    },
-  },
-  watch: {
-    viewMode(newValue) {
-      this.currentViewMode = newValue;
-    },
-  },
-  updated() {
-    window.onresize = () => {
-      this.width = window.innerWidth;
-    };
-  },
-  mounted() {
-    this.currentViewMode = this.viewMode;
   },
   methods: {
-    onShowMetric(info) {
-      this.$emit("showMetric", info);
-      if (this.visibleSidebarInfo !== info) {
-        this.visibleSidebarInfo = info;
-      } else {
-        this.visibleSidebarInfo = undefined;
-      }
-    },
-    onChangeViewMode(id) {
-      this.$emit("changeViewMode", id);
-    },
-    onRefresh() {
-      this.$emit("refresh");
+    action(action, id) {
+      this.$emit(action, id);
     },
   },
 };
@@ -170,28 +96,32 @@ $color: #333346;
   position: fixed;
   top: 56px;
   right: 0;
-  background: $bg;
   width: $sidebar-button-size;
   min-width: $sidebar-button-size;
   min-height: 100vh;
-  min-width: 90px;
+  min-width: $sidebarMenuWidth;
   border-left: 1px solid palette(grey, smooth);
-  z-index: 2;
+  z-index: 1;
+  .--metrics & {
+    border-color: transparent;
+  }
   p {
     text-align: center;
     font-weight: 600;
     @include font-size(12px);
     color: $color;
+    margin-bottom: 0.5em;
   }
   a {
     position: relative;
     display: block;
     outline: none;
+    z-index: 3;
   }
   &__info {
     position: relative;
     z-index: 1;
-    margin-bottom: 5em;
+    margin-bottom: 2em;
   }
 }
 a[data-title]:not(.active) {
diff --git a/frontend/components/commons/sidebar/SidebarPanel.vue b/frontend/components/commons/sidebar/SidebarPanel.vue
index 61a2958021..5a8fabdc10 100644
--- a/frontend/components/commons/sidebar/SidebarPanel.vue
+++ b/frontend/components/commons/sidebar/SidebarPanel.vue
@@ -16,18 +16,21 @@
   -->
 
 <template>
-  <aside
-    :style="{ top: topPosition }"
-    :class="['sidebar', annotationEnabled ? 'annotation' : 'explore']"
-  >
+  <aside class="sidebar">
     <div class="sidebar__wrapper">
       <div class="sidebar__content">
+        <svgicon
+          @click="closePanel"
+          class="sidebar__panel__button"
+          name="chev-right"
+        ></svgicon>
         <slot></slot>
       </div>
     </div>
   </aside>
 </template>
 <script>
+import "assets/icons/chev-right";
 export default {
   props: {
     dataset: {
@@ -35,41 +38,52 @@ export default {
       required: true,
     },
   },
-  computed: {
-    annotationEnabled() {
-      return this.dataset.viewSettings.viewMode === "annotate";
-    },
-    topPosition() {
-      return this.annotationEnabled
-        ? `${this.dataset.viewSettings.headerHeight - 63}px`
-        : `${this.dataset.viewSettings.headerHeight}px`;
+  methods: {
+    closePanel() {
+      this.$emit("close-panel");
     },
   },
 };
 </script>
 <style lang="scss" scoped>
+$topbarHeight: 56px;
+$sidebarMenuWidth: 70px;
 .sidebar {
   top: 0;
-  min-height: 300px;
-  border-radius: $border-radius;
-  width: 280px;
+  min-height: calc(100vh - $topbarHeight);
+  width: $sidebarPanelWidth;
   position: absolute;
-  right: 100px;
-  background: white;
+  right: $sidebarMenuWidth;
+  background: $bg;
   padding: 1em 1.5em;
-  overflow: auto;
   transition: top 0.2s ease-in-out;
   border: 1px solid palette(grey, smooth);
-  box-shadow: 0 1px 9px 0 palette(grey, smooth);
-  border-radius: 3px;
-  z-index: 1;
+  box-shadow: -4px 15px 16px -1px #c7c7c7;
   @include media(">desktop") {
     border-radius: 1px;
     border: none;
-    box-shadow: none;
     margin-left: 1em;
     display: block !important;
-    right: 100px;
+    right: $sidebarMenuWidth;
+  }
+  &__panel {
+    &__button {
+      position: absolute;
+      left: 1.5em;
+      top: 2em;
+      pointer-events: all;
+      cursor: pointer;
+      z-index: 2;
+      border-radius: 3px;
+      padding: 5px;
+      background: palette(grey, smooth);
+      box-sizing: content-box;
+      max-width: 8px;
+      max-height: 8px;
+      &:hover {
+        background: darken(palette(grey, smooth), 5%);
+      }
+    }
   }
   &__content {
     border-radius: 2px;
@@ -78,5 +92,11 @@ export default {
       padding-top: 0;
     }
   }
+  ::v-deep {
+    .sidebar__title {
+      margin-bottom: 2em;
+      margin-left: 1.5em;
+    }
+  }
 }
 </style>
diff --git a/frontend/components/commons/sidebar/SidebarProgress.vue b/frontend/components/commons/sidebar/SidebarProgress.vue
index 7b44a1ed16..148077d2f5 100644
--- a/frontend/components/commons/sidebar/SidebarProgress.vue
+++ b/frontend/components/commons/sidebar/SidebarProgress.vue
@@ -135,7 +135,7 @@ label {
   }
 }
 .scroll {
-  max-height: calc(100vh - 480px);
+  max-height: calc(100vh - 300px);
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
diff --git a/frontend/components/commons/sidebar/TaskSidebar.vue b/frontend/components/commons/sidebar/TaskSidebar.vue
index e2a370555f..36b569600b 100644
--- a/frontend/components/commons/sidebar/TaskSidebar.vue
+++ b/frontend/components/commons/sidebar/TaskSidebar.vue
@@ -1,22 +1,27 @@
 <template>
-  <div>
-    <SidebarMenu
+  <div class="sidebar__container">
+    <component
+      ref="menu"
+      v-if="dataset"
+      :is="currentTaskSidebar"
       :dataset="dataset"
+      :current-metric="currentMetric"
       @refresh="onRefresh"
-      @showMetric="onShowSidebarInfo"
-      @changeViewMode="onChangeViewMode"
+      @show-metrics="onShowSidebarInfo"
+      @change-view-mode="onChangeViewMode"
     />
-    <!-- TODO: Use media queries -->
     <SidebarPanel
-      v-if="sidebarVisible"
+      v-if="currentMetric"
       :dataset="dataset"
       :class="dataset.task"
+      @close-panel="onClosePanel"
     >
-      <div v-show="sidebarInfoType === 'progress'">
-        <component :is="currentTaskProgress" :dataset="dataset" />
-      </div>
-      <div v-show="sidebarInfoType === 'stats'">
-        <component :is="currentTaskStats" :dataset="dataset" />
+      <div
+        v-for="metric in metricsByViewMode"
+        :key="metric"
+        v-show="currentMetric === metric"
+      >
+        <component :is="componentName(metric)" :dataset="dataset" />
       </div>
     </SidebarPanel>
   </div>
@@ -36,26 +41,24 @@ export default {
     },
   },
   data: () => ({
-    sidebarInfoType: "progress",
-    sidebarVisible: false,
-    width: window.innerWidth,
+    currentMetric: undefined,
   }),
   computed: {
+    currentTaskSidebar() {
+      return this.currentTask + "Sidebar";
+    },
     currentTask() {
       return this.dataset.task;
     },
-    currentTaskProgress() {
-      return this.currentTask + "Progress";
+    metricsByViewMode() {
+      return this.sidebarItems.find(
+        (item) => item.id === this.dataset.viewSettings.viewMode
+      ).relatedMetrics;
     },
-    currentTaskStats() {
-      return this.currentTask + "Stats";
+    sidebarItems() {
+      return this.$refs.menu.sidebarItems;
     },
   },
-  updated() {
-    window.onresize = () => {
-      this.width = window.innerWidth;
-    };
-  },
   methods: {
     ...mapActions({
       changeViewMode: "entities/datasets/changeViewMode",
@@ -71,21 +74,44 @@ export default {
         dataset: this.dataset,
         value: value,
       });
+      this.currentMetric = this.metricsByViewMode.includes(this.currentMetric)
+        ? this.currentMetric
+        : this.onShowSidebarInfo(false);
     },
     onShowSidebarInfo(info) {
-      if (this.sidebarInfoType !== info) {
-        this.sidebarVisible = true;
+      if (this.currentMetric !== info) {
+        this.currentMetric = info;
       } else {
-        this.sidebarVisible = !this.sidebarVisible;
+        this.currentMetric = undefined;
       }
-      this.sidebarInfoType = info;
       DatasetViewSettings.update({
         where: this.dataset.name,
         data: {
-          visibleMetrics: this.sidebarVisible,
+          visibleMetrics: this.currentMetric,
         },
       });
     },
+    onClosePanel() {
+      this.currentMetric = undefined;
+      DatasetViewSettings.update({
+        where: this.dataset.name,
+        data: {
+          visibleMetrics: false,
+        },
+      });
+    },
+    componentName(metric) {
+      return `${this.currentTask}${this.$options.filters.capitalize(metric)}`;
+    },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.sidebar {
+  &__container {
+    position: relative;
+    z-index: 1;
+  }
+}
+</style>
diff --git a/frontend/components/core/ReButton.vue b/frontend/components/core/ReButton.vue
index 47d237ea8c..a4fd81b1d5 100644
--- a/frontend/components/core/ReButton.vue
+++ b/frontend/components/core/ReButton.vue
@@ -201,11 +201,17 @@ export default {
     border: 1px solid $primary-color;
     color: $primary-color;
     text-transform: none;
+    .svg-icon {
+      fill: $primary-color;
+    }
     &:hover,
     &:focus {
       background: transparent;
       border-color: darken($primary-color, 10%);
       color: darken($primary-color, 10%);
+      .svg-icon {
+        fill: darken($primary-color, 10%);
+      }
     }
     &[disabled] {
       background-color: transparent;
diff --git a/frontend/components/core/RePagination.vue b/frontend/components/core/RePagination.vue
index 51728e6e8c..930241ed16 100644
--- a/frontend/components/core/RePagination.vue
+++ b/frontend/components/core/RePagination.vue
@@ -218,21 +218,22 @@ $pagination-size: 30px;
   margin: auto;
   font-weight: 600;
   &__container {
-    padding-left: 4em;
     position: fixed;
     bottom: 0;
     left: 0;
-    right: 0;
+    right: $sidebarMenuWidth;
     display: flex;
     align-items: center;
     background: palette(grey, light);
     border-top: 1px solid palette(grey, smooth);
-    padding-right: calc(4em + 45px);
     min-height: 63px;
     z-index: 99;
-    @include media(">desktop") {
-      width: 100%;
-      padding-right: 100px;
+    padding-right: 1em;
+    .--metrics & {
+      @include media(">desktop") {
+        padding-right: calc(294px + 10px);
+        transition: padding 0.1s ease-in-out;
+      }
     }
   }
   &__arrow {
diff --git a/frontend/components/core/ReProgress.vue b/frontend/components/core/ReProgress.vue
index ff1d1aaed1..8fa2ddc4e3 100644
--- a/frontend/components/core/ReProgress.vue
+++ b/frontend/components/core/ReProgress.vue
@@ -17,13 +17,19 @@
 
 <template>
   <transition name="re-progress" appear>
-    <div class="re-progress">
-      <div class="re-progress-track" :style="styles"></div>
-      <div
-        v-if="multiple && progressSecondary"
-        class="re-progress-track--secondary"
-        :style="stylesSecondary"
-      />
+    <div class="re-progress__container">
+      <p v-if="tooltip" class="re-progress__tooltip" :style="tooltipStyles">
+        <span class="triangle" :style="tooltipTriangleStyles"></span
+        >{{ tooltip }}
+      </p>
+      <div class="re-progress" :style="backgroundStyles">
+        <div class="re-progress-track" :style="styles"></div>
+        <div
+          v-if="multiple && progressSecondary"
+          class="re-progress-track--secondary"
+          :style="stylesSecondary"
+        />
+      </div>
     </div>
   </transition>
 </template>
@@ -43,11 +49,35 @@ export default {
       default: false,
       type: Boolean,
     },
+    color: {
+      type: String,
+    },
+    tooltip: {
+      default: undefined,
+      type: String,
+    },
   },
   computed: {
     styles() {
       return {
         width: `${this.progress}%`,
+        backgroundColor: this.color,
+      };
+    },
+    backgroundStyles() {
+      return {
+        backgroundColor: this.color,
+      };
+    },
+    tooltipStyles() {
+      return {
+        left: this.progress > 80 ? `80%` : `${this.progress}%`,
+        backgroundColor: this.color,
+      };
+    },
+    tooltipTriangleStyles() {
+      return {
+        borderRightColor: this.color,
       };
     },
     stylesSecondary() {
@@ -65,12 +95,56 @@ export default {
   height: 22px;
   position: relative;
   overflow: hidden;
-  background: palette(grey, light);
+  background: #a1a2cc;
   border-top-left-radius: 0;
   border-top-right-radius: 10px;
   border-top-left-radius: 0;
   border-bottom-right-radius: 10px;
   margin: 0 0 1.5em 0;
+  &:before {
+    content: "";
+    position: absolute;
+    background: white;
+    opacity: 0.7;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+  &__container {
+    position: relative;
+    &:hover {
+      .re-progress__tooltip {
+        clip-path: none;
+        opacity: 1;
+        transition: opacity 0.5s ease-in-out 0.3s;
+      }
+    }
+  }
+  &__tooltip {
+    padding: 0.5em 1em;
+    top: -5px;
+    transform: none;
+    background: $secondary-color;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    @include font-size(14px);
+    font-weight: 600;
+    position: absolute;
+    margin: 0 0 0 6px;
+    z-index: 1;
+    clip-path: circle(0);
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out 0.3s;
+    border-color: lime !important;
+    .triangle {
+      @include triangle(left, 6px, 6px, $secondary-color);
+      position: absolute;
+      left: -6px;
+      top: calc(50% - 6px);
+    }
+  }
   &--minimal {
     @extend .re-progress;
     height: 2px;
diff --git a/frontend/components/core/ReTopbarBrand.vue b/frontend/components/core/ReTopbarBrand.vue
index 85545e7935..248c6a9357 100644
--- a/frontend/components/core/ReTopbarBrand.vue
+++ b/frontend/components/core/ReTopbarBrand.vue
@@ -55,7 +55,7 @@ export default {
   color: $lighter-color;
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: 2em;
+  padding-right: 1.2em;
   padding-left: 4em;
   a {
     text-decoration: none;
diff --git a/frontend/components/text-classifier/header/ExplainHelpInfo.vue b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
index dc0083871c..324f752e91 100644
--- a/frontend/components/text-classifier/header/ExplainHelpInfo.vue
+++ b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
@@ -69,17 +69,16 @@ export default {
   margin-top: 0em;
   margin-bottom: 1em;
   padding-left: 4em;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   .--metrics & {
     @include media(">desktop") {
       transition: padding 0.1s ease-in-out;
-      padding-right: calc(294px + 100px);
+      padding-right: calc($sidebarWidth + 25px);
     }
   }
   @include media(">desktop") {
     transition: padding 0.1s ease-in-out;
     width: 100%;
-    padding-right: 100px;
   }
   &__panel {
     border: 1px solid #f48e5f57;
diff --git a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue b/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
index 31f89e7a64..b3f8ad4142 100644
--- a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
+++ b/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
@@ -13,11 +13,7 @@
         </rule-labels-definition>
       </div>
       <div class="rule__metrics">
-        <rules-metrics
-          title="Rule Metrics"
-          metrics-type="all"
-          :dataset="dataset"
-        >
+        <rules-metrics title="Rule Metrics" :dataset="dataset">
           <template #button-bottom>
             <re-button
               class="rule__button button-quaternary--outline"
diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
index d0c8c9519f..55e2497367 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
@@ -2,27 +2,14 @@
   <div v-if="isVisible" class="rules-management">
     <ReLoading v-if="$fetchState.pending" />
     <div v-else-if="!$fetchState.error">
-      <rules-metrics
-        title="Overall Metrics"
-        :dataset="dataset"
-        metrics-type="overall"
-      >
-        <template #button-top>
-          <re-button
-            class="rules-management__close button-quaternary--outline"
-            @click="hideList"
-          >
-            <svgicon
-              name="chev-left"
-              color="white"
-              width="12"
-              height="12"
-            ></svgicon
-            >Back to query view</re-button
-          >
-        </template>
-      </rules-metrics>
       <div class="rules-management__container">
+        <re-button
+          class="rules-management__close button-tertiary--outline"
+          @click="hideList"
+        >
+          <svgicon name="chev-left" width="12" height="12"></svgicon>Back to
+          query view</re-button
+        >
         <p class="rules-management__title">
           Rules
           <span v-if="formattedRules.length"
@@ -245,14 +232,16 @@ export default {
 .rules-management {
   padding-left: 4em;
   padding-top: 2em;
+  margin-bottom: 2em;
   overflow: auto;
   height: 100vh;
   &__container {
-    padding: 20px;
+    padding: 20px 20px 50px 20px;
     background: rgba($lighter-color, 0.4);
     border: 1px solid $lighter-color;
     width: 100%;
     border-radius: $border-radius;
+    position: relative;
   }
   &__title {
     color: $font-secondary-dark;
@@ -284,25 +273,8 @@ export default {
   }
   &__close {
     position: absolute;
-    right: 30px;
-    top: 30px;
-  }
-}
-.rule-metrics {
-  &__container {
-    width: 100%;
-    margin-left: 0 !important;
-    margin-bottom: 20px;
-    min-height: 180px;
-    &::v-deep {
-      .rule-metrics {
-        display: flex;
-        &__item {
-          width: 100%;
-          margin-top: 1em;
-        }
-      }
-    }
+    right: 1.5em;
+    top: 1.5em;
   }
 }
 </style>
diff --git a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
index 785074bc89..8064d11d3a 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
@@ -1,28 +1,27 @@
 <template>
   <div class="rule-metrics__container">
     <p class="rule-metrics__title">{{ title }}</p>
-    <slot name="button-top" />
     <div class="rule-metrics">
       <template>
         <div
-          :class="[metricsType, 'rule-metrics__item']"
+          class="rule-metrics__item"
           v-for="metric in metrics"
           :key="metric.name"
         >
           <p class="metric__title" :data-title="metricsTitle(metric)">
             {{ metric.name }}
           </p>
-          <p class="metric__rule" v-if="!onlyOveralMetrics">
+          <p class="metric__rule">
             <transition name="fade" mode="out-in" appear>
               <strong :key="metric.rule.value">{{ metric.rule.value }}</strong>
             </transition>
           </p>
-          <span class="metric__overall">
-            <template v-if="!onlyOveralMetrics">{{
-              metric.overall.description
-            }}</template>
+          <span class="metric__records" v-if="metric.records">
             <transition name="fade" mode="out-in" appear>
-              <span v-html="metric.overall.value" :key="metric.overall.value" />
+              <span
+                v-html="`${metric.records.value}/${metric.records.total}`"
+                :key="metric.records.value"
+              />
             </transition>
           </span>
         </div>
@@ -41,19 +40,10 @@ export default {
       type: TextClassificationDataset,
       required: true,
     },
-
     title: {
       type: String,
       required: true,
     },
-
-    metricsType: {
-      type: String,
-      default: "all",
-      validator: (value) => {
-        return ["all", "overall"].includes(value);
-      },
-    },
   },
   data: () => {
     return {
@@ -75,10 +65,6 @@ export default {
     ruleMetrics() {
       return this.dataset.getCurrentLabelingRuleMetrics() || {};
     },
-
-    onlyOveralMetrics() {
-      return this.metricsType === "overall";
-    },
     query() {
       return this.dataset.query.text;
     },
@@ -94,48 +80,41 @@ export default {
       return [
         {
           name: "Coverage",
-          overall: {
-            description: "Total:",
-            tooltip: "Percentage of records labeled by any rule",
-            value: `${this.formatNumber(
-              this.metricsTotal.coverage
-            )} <span class="records-number">(${this.$options.filters.formatNumber(
-              Math.round(
-                this.metricsTotal.coverage * this.dataset.globalResults.total
-              ) || 0
-            )} records)</span>`,
-          },
           rule: {
             value: this.formatNumber(this.ruleMetrics.coverage),
             tooltip: "Percentage of records labeled by the rule",
           },
-        },
-        {
-          name: "Annotated coverage",
-          overall: {
-            description: "Total:",
-            tooltip: "Percentage of annotated records labeled by any rule",
-            value: `${this.formatNumber(
-              this.metricsTotal.coverage_annotated
-            )} <span class="records-number">(${this.$options.filters.formatNumber(
+          records: {
+            value: this.$options.filters.formatNumber(
               Math.round(
-                this.metricsTotal.coverage_annotated *
-                  this.metricsTotal.annotated_records
+                this.ruleMetrics.coverage * this.dataset.globalResults.total
               ) || 0
-            )} records)</span>`,
+            ),
+            total: this.$options.filters.formatNumber(
+              this.dataset.globalResults.total || 0
+            ),
           },
+        },
+        {
+          name: "Annotated coverage",
           rule: {
             value: this.formatNumber(this.ruleMetrics.coverage_annotated),
             tooltip: "Percentage of annotated records labeled by the rule",
           },
+          records: {
+            value: this.$options.filters.formatNumber(
+              Math.round(
+                this.ruleMetrics.coverage_annotated *
+                  this.ruleMetrics.annotated_records
+              ) || 0
+            ),
+            total: this.$options.filters.formatNumber(
+              this.ruleMetrics.annotated_records || 0
+            ),
+          },
         },
         {
           name: "Precision",
-          overall: {
-            description: "Avg:",
-            tooltip: "Average percentage of correct labels given by the rules",
-            value: this.formatNumber(this.metricsTotal.precisionAverage),
-          },
           rule: {
             value: this.formatNumber(this.ruleMetrics.precision),
             tooltip: "Percentage of correct labels given by the rule",
@@ -143,14 +122,6 @@ export default {
         },
         {
           name: "Correct/incorrect",
-          overall: {
-            description: "Total:",
-            tooltip:
-              "Total number of labels the rules predicted correctly/incorrectly (if annotations are available)",
-            value: isNaN(this.metricsTotal.totalCorrects)
-              ? "-/-"
-              : `${this.metricsTotal.totalCorrects}/${this.metricsTotal.totalIncorrects}`,
-          },
           rule: {
             value:
               this.ruleMetrics.correct !== undefined
@@ -165,11 +136,8 @@ export default {
   },
   methods: {
     metricsTitle(metric) {
-      return this.onlyOveralMetrics
-        ? metric.overall.tooltip
-        : metric.rule.tooltip;
+      return metric.rule.tooltip;
     },
-
     formatNumber(value) {
       return isNaN(value) ? "-" : this.$options.filters.percent(value);
     },
@@ -178,20 +146,6 @@ export default {
         return this.metricsByRules[key][type] || 0;
       });
     },
-    getTotal(type) {
-      return this.getValuesByMetricType(type).reduce(
-        (accumulator, currentValue) => accumulator + currentValue,
-        0
-      );
-    },
-    getAverage(type) {
-      const filteredValues = Object.keys(this.metricsByRules)
-        .filter((key) => this.metricsByRules[key].coverage_annotated > 0)
-        .map((k) => {
-          return this.metricsByRules[k][type];
-        });
-      return this.getTotal(type) / filteredValues.length;
-    },
   },
 };
 </script>
@@ -219,27 +173,17 @@ $color: #333346;
   }
   &__item {
     min-height: 82px;
-    &.all {
-      .metric {
-        &__rule {
-          @include font-size(20px);
-          font-weight: 600;
-          margin-top: 0.2em;
-          margin-bottom: 0.2em;
-        }
-        &__overall {
-          span {
-            font-weight: 800;
-          }
-        }
-      }
-    }
-    &.overall {
-      span {
-        display: block;
+    .metric {
+      &__rule {
         @include font-size(20px);
-        font-weight: 800;
+        font-weight: 600;
         margin-top: 0.2em;
+        margin-bottom: 0.2em;
+      }
+      &__records {
+        span {
+          font-weight: 400;
+        }
       }
     }
   }
diff --git a/frontend/components/text-classifier/results/TextClassificationResultsList.vue b/frontend/components/text-classifier/results/TextClassificationResultsList.vue
index 2f80cde2d4..749e565804 100644
--- a/frontend/components/text-classifier/results/TextClassificationResultsList.vue
+++ b/frontend/components/text-classifier/results/TextClassificationResultsList.vue
@@ -63,18 +63,17 @@ export default {
 </script>
 <style lang="scss" scoped>
 .content {
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   .--metrics & {
     @include media(">desktop") {
       width: 100%;
-      padding-right: calc(294px + 100px);
+      padding-right: calc($sidebarWidth + 25px);
       transition: padding 0.1s ease-in-out;
     }
   }
   @include media(">desktop") {
     transition: padding 0.1s ease-in-out;
     width: 100%;
-    padding-right: 100px;
   }
 }
 </style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
new file mode 100644
index 0000000000..64f6bbe5b3
--- /dev/null
+++ b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
@@ -0,0 +1,234 @@
+<!--
+  - coding=utf-8
+  - Copyright 2021-present, the Recognai S.L. team.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div>
+    <p class="sidebar__title">Overall rule metrics</p>
+    <div class="progress__info">
+      <p class="progress__info__text">Coverage</p>
+      <span class="progress__info__percent">{{
+        coverage.percent | percent
+      }}</span>
+    </div>
+    <ReProgress
+      re-mode="determinate"
+      color="#4C4EA3"
+      :progress="coverage.percent * 100"
+      :tooltip="`${coverage.records}/${totalRecords}`"
+    ></ReProgress>
+    <div class="progress__info">
+      <p class="progress__info__text">Annotated Coverage</p>
+      <span class="progress__info__percent">{{
+        annotatedCoverage.percent | percent
+      }}</span>
+    </div>
+    <ReProgress
+      re-mode="determinate"
+      color="#A1A2CC"
+      :progress="annotatedCoverage.percent * 100"
+      :tooltip="`${annotatedCoverage.records}/${metricsTotal.annotated_records}`"
+    ></ReProgress>
+    <div class="progress__info">
+      <p class="progress__info__text">Precision average</p>
+      <transition name="fade" mode="out-in" appear
+        ><span :key="precision" class="progress__info__percent">{{
+          precision | percent
+        }}</span></transition
+      >
+    </div>
+    <div class="progress__info">
+      <p class="progress__info__text">Correct/Incorrect</p>
+      <transition name="fade" mode="out-in" appear
+        ><span :key="correctAndIncorrect" class="progress__info__percent">{{
+          correctAndIncorrect
+        }}</span></transition
+      >
+    </div>
+    <span class="space"></span>
+    <div class="progress__info">
+      <p class="progress__info__text">Total rules</p>
+      <transition name="fade" mode="out-in" appear
+        ><span :key="dataset.rules.length" class="progress__info__percent">{{
+          dataset.rules.length
+        }}</span></transition
+      >
+    </div>
+    <template v-if="labels.length">
+      <div class="scroll">
+        <div v-for="label in labels" :key="label.index">
+          <div class="info">
+            <label>{{ label.label }}</label>
+            <transition name="fade" mode="out-in" appear
+              ><span class="records-number">{{
+                label.counter | formatNumber
+              }}</span></transition
+            >
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  // TODO clean and typify
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => {
+    return {};
+  },
+  computed: {
+    ruleMetrics() {
+      return this.dataset.getCurrentLabelingRuleMetrics() || {};
+    },
+    metricsTotal() {
+      return this.dataset.labelingRulesOveralMetrics || {};
+    },
+    labels() {
+      const labelsInRules =
+        this.dataset.rules.flatMap((rule) => rule.labels) || [];
+      const availableLabels = this.dataset._labels.map((label) => {
+        return {
+          label: label,
+          counter: labelsInRules.filter((l) => l === label).length || 0,
+        };
+      });
+      return (
+        availableLabels.sort((a, b) => (a.counter > b.counter ? -1 : 1)) || []
+      );
+    },
+    coverage() {
+      return {
+        percent: this.metricsTotal.coverage,
+        records: this.$options.filters.formatNumber(
+          Math.round(
+            this.metricsTotal.coverage * this.dataset.globalResults.total
+          ) || 0
+        ),
+      };
+    },
+    annotatedCoverage() {
+      return {
+        percent: this.metricsTotal.coverage_annotated,
+        records: this.$options.filters.formatNumber(
+          Math.round(
+            this.metricsTotal.coverage_annotated *
+              this.metricsTotal.annotated_records
+          ) || 0
+        ),
+      };
+    },
+    precision() {
+      return this.metricsTotal.precisionAverage;
+    },
+    correctAndIncorrect() {
+      return isNaN(this.metricsTotal.totalCorrects)
+        ? "-/-"
+        : `${this.metricsTotal.totalCorrects}/${this.metricsTotal.totalIncorrects}`;
+    },
+    totalRecords() {
+      return this.$options.filters.formatNumber(
+        this.dataset.globalResults.total
+      );
+    },
+  },
+  methods: {
+    formatNumber(value) {
+      return isNaN(value) ? "-" : this.$options.filters.percent(value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sidebar {
+  &__title {
+    color: $font-secondary-dark;
+    margin-top: 0.5em;
+    @include font-size(20px);
+    font-weight: 700;
+  }
+}
+label {
+  display: block;
+  width: calc(100% - 40px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.labels {
+  margin-top: 3em;
+  strong {
+    margin-bottom: 1em;
+    display: block;
+  }
+}
+.info {
+  position: relative;
+  display: flex;
+  margin-bottom: 0.7em;
+  color: $font-secondary-dark;
+}
+.scroll {
+  max-height: calc(100vh - 400px);
+  padding-right: 1em;
+  margin-right: -1em;
+  overflow: auto;
+}
+.records-number {
+  margin-right: 0;
+  margin-left: auto;
+}
+.space {
+  margin-bottom: 2em;
+  display: block;
+}
+.progress {
+  float: right;
+  line-height: 0.8em;
+  font-weight: bold;
+  &__info {
+    display: flex;
+    @include font-size(15px);
+    align-items: center;
+    color: $font-secondary-dark;
+    font-weight: 600;
+    margin-bottom: 0.5em;
+    margin-top: 1em;
+    &__text {
+      margin: 0;
+    }
+    &__percent {
+      margin-top: 0;
+      margin-right: 0;
+      margin-left: auto;
+    }
+  }
+  &__numbers {
+    color: $font-secondary-dark;
+    margin-bottom: 1.5em;
+    @include font-size(18px);
+    span {
+      @include font-size(40px);
+      font-weight: 700;
+    }
+  }
+}
+</style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
new file mode 100644
index 0000000000..521d866650
--- /dev/null
+++ b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
@@ -0,0 +1,109 @@
+<!--
+  - coding=utf-8
+  - Copyright 2021-present, the Recognai S.L. team.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div>
+    <SidebarMenu
+      :current-metric="currentMetric"
+      :dataset="dataset"
+      :sidebar-items="sidebarItems"
+      @refresh="$emit('refresh')"
+      @show-metrics="onShowMetrics"
+      @change-view-mode="onChangeViewMode"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+    currentMetric: {
+      type: String,
+    },
+  },
+  data: () => {
+    return {
+      sidebarItems: [
+        {
+          id: "explore",
+          tooltip: "Explore",
+          icon: "explore-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["progress", "stats"],
+        },
+        {
+          id: "annotate",
+          tooltip: "Annotate",
+          icon: "annotate-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["progress", "stats"],
+        },
+        {
+          id: "labelling-rules",
+          tooltip: "Define rules",
+          icon: "labelling-rules-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["stats", "rules"],
+        },
+        {
+          id: "progress",
+          tooltip: "Progress",
+          icon: "progress",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "rules",
+          tooltip: "Overall rule metrics",
+          icon: "progress",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "stats",
+          tooltip: "Stats",
+          icon: "metrics",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "refresh",
+          tooltip: "Refresh",
+          icon: "refresh",
+          group: "Refresh",
+          action: "refresh",
+        },
+      ],
+    };
+  },
+  methods: {
+    onChangeViewMode(value) {
+      this.$emit("change-view-mode", value);
+    },
+    onShowMetrics(info) {
+      this.$emit("show-metrics", info);
+    },
+  },
+};
+</script>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
index b367e6d452..400c9965a1 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
@@ -105,7 +105,7 @@ label {
   color: $font-secondary-dark;
 }
 .scroll {
-  max-height: calc(100vh - 400px);
+  max-height: calc(100vh - 200px);
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
diff --git a/frontend/components/text2text/sidebar/Text2TextSidebar.vue b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
new file mode 100644
index 0000000000..12a5a88a30
--- /dev/null
+++ b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
@@ -0,0 +1,94 @@
+<!--
+  - coding=utf-8
+  - Copyright 2021-present, the Recognai S.L. team.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div>
+    <SidebarMenu
+      :current-metric="currentMetric"
+      :dataset="dataset"
+      :sidebar-items="sidebarItems"
+      @refresh="$emit('refresh')"
+      @show-metrics="onShowMetrics"
+      @change-view-mode="onChangeViewMode"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+    currentMetric: {
+      type: String,
+    },
+  },
+  data: () => {
+    return {
+      sidebarItems: [
+        {
+          id: "explore",
+          tooltip: "Explore",
+          icon: "explore-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["progress", "stats"],
+        },
+        {
+          id: "annotate",
+          tooltip: "Annotate",
+          icon: "annotate-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["progress", "stats"],
+        },
+        {
+          id: "progress",
+          tooltip: "Progress",
+          icon: "progress",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "stats",
+          tooltip: "Stats",
+          icon: "metrics",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "refresh",
+          tooltip: "Refresh",
+          icon: "refresh",
+          group: "Refresh",
+          action: "refresh",
+        },
+      ],
+    };
+  },
+  methods: {
+    onChangeViewMode(value) {
+      this.$emit("change-view-mode", value);
+    },
+    onShowMetrics(info) {
+      this.$emit("show-metrics", info);
+    },
+  },
+};
+</script>
diff --git a/frontend/components/text2text/sidebar/Text2TextStats.vue b/frontend/components/text2text/sidebar/Text2TextStats.vue
index b367e6d452..400c9965a1 100644
--- a/frontend/components/text2text/sidebar/Text2TextStats.vue
+++ b/frontend/components/text2text/sidebar/Text2TextStats.vue
@@ -105,7 +105,7 @@ label {
   color: $font-secondary-dark;
 }
 .scroll {
-  max-height: calc(100vh - 400px);
+  max-height: calc(100vh - 200px);
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
index 44b023cad9..d53310341d 100755
--- a/frontend/components/token-classifier/results/EntitiesHeader.vue
+++ b/frontend/components/token-classifier/results/EntitiesHeader.vue
@@ -114,7 +114,13 @@ export default {
   padding-top: 0;
   padding-bottom: 0.7em;
   margin-left: 0;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc($sidebarWidth + 25px);
+      transition: padding 0.1s ease-in-out;
+    }
+  }
 }
 .entities {
   &__container {
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
new file mode 100644
index 0000000000..12a5a88a30
--- /dev/null
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
@@ -0,0 +1,94 @@
+<!--
+  - coding=utf-8
+  - Copyright 2021-present, the Recognai S.L. team.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div>
+    <SidebarMenu
+      :current-metric="currentMetric"
+      :dataset="dataset"
+      :sidebar-items="sidebarItems"
+      @refresh="$emit('refresh')"
+      @show-metrics="onShowMetrics"
+      @change-view-mode="onChangeViewMode"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+    currentMetric: {
+      type: String,
+    },
+  },
+  data: () => {
+    return {
+      sidebarItems: [
+        {
+          id: "explore",
+          tooltip: "Explore",
+          icon: "explore-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["progress", "stats"],
+        },
+        {
+          id: "annotate",
+          tooltip: "Annotate",
+          icon: "annotate-view",
+          group: "Mode",
+          action: "change-view-mode",
+          relatedMetrics: ["progress", "stats"],
+        },
+        {
+          id: "progress",
+          tooltip: "Progress",
+          icon: "progress",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "stats",
+          tooltip: "Stats",
+          icon: "metrics",
+          action: "show-metrics",
+          group: "Metrics",
+        },
+        {
+          id: "refresh",
+          tooltip: "Refresh",
+          icon: "refresh",
+          group: "Refresh",
+          action: "refresh",
+        },
+      ],
+    };
+  },
+  methods: {
+    onChangeViewMode(value) {
+      this.$emit("change-view-mode", value);
+    },
+    onShowMetrics(info) {
+      this.$emit("show-metrics", info);
+    },
+  },
+};
+</script>
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
index 11f05872fe..42bc288495 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
@@ -185,7 +185,7 @@ export default {
     font-weight: 600;
   }
   .scroll {
-    max-height: calc(100vh - 500px);
+    max-height: calc(100vh - 250px);
     padding-right: 1em;
     margin-right: -1em;
     overflow: auto;
diff --git a/frontend/pages/datasets/index.vue b/frontend/pages/datasets/index.vue
index 999b759933..5cdf5a7892 100644
--- a/frontend/pages/datasets/index.vue
+++ b/frontend/pages/datasets/index.vue
@@ -57,7 +57,7 @@
           </div>
         </div>
       </div>
-      <sidebar-menu @refresh="$fetch" />
+      <sidebar-menu @refresh="$fetch" :sidebar-items="sidebarItems" />
     </div>
   </div>
 </template>
@@ -123,6 +123,17 @@ export default {
       }
       return [];
     },
+    sidebarItems() {
+      return [
+        {
+          id: "refresh",
+          tooltip: "Refresh",
+          icon: "refresh",
+          group: "Refresh",
+          action: "refresh",
+        },
+      ];
+    },
     datasets() {
       return ObservationDataset.all().map((dataset) => {
         return {
@@ -251,7 +262,7 @@ export default {
   @extend %container;
   padding-top: 0.2em;
   padding-bottom: 0;
-  padding-right: calc(4em + 45px);
+  padding-right: calc($sidebarMenuWidth + 15px);
   &--intro {
     padding-top: 2em;
     margin-bottom: 1.5em;
diff --git a/frontend/plugins/filters.js b/frontend/plugins/filters.js
index 4b831236b3..9e2693f952 100644
--- a/frontend/plugins/filters.js
+++ b/frontend/plugins/filters.js
@@ -20,3 +20,10 @@ Vue.filter("percent", function (value) {
   });
   return formatter.format(value);
 });
+
+Vue.filter("capitalize", function (value) {
+  const capitalize = ([firstLetter, ...restOfWord]) =>
+    firstLetter.toUpperCase() + restOfWord.join("");
+
+  return capitalize(value);
+});
diff --git a/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap b/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap
index e3a210148f..40f227780a 100644
--- a/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap
+++ b/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap
@@ -1,26 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TaskSidebar Show sidebar panel 1`] = `
-<div>
-  <div class="sidebar"><span><div class="sidebar__info"><p>Mode</p> <sidebar-button id="explore" icon="explore-view" tooltip="Explore" type="Mode"></sidebar-button><sidebar-button id="annotate" icon="annotate-view" tooltip="Annotate" type="Mode"></sidebar-button><sidebar-button id="labelling-rules" icon="labelling-rules-view" tooltip="Define rules" type="Mode"></sidebar-button></div></span><span><div class="sidebar__info"><p>Metrics</p> <sidebar-button id="progress" icon="progress" tooltip="Progress" type="Metrics"></sidebar-button><sidebar-button id="stats" icon="metrics" tooltip="Stats" type="Metrics"></sidebar-button></div></span><span><div class="sidebar__info"><p>Refresh</p> <sidebar-button id="refresh" icon="refresh" tooltip="Refresh" type="Refresh"></sidebar-button></div></span> </div>
-  <aside class="sidebar explore TextClassification">
-    <div class="sidebar__wrapper">
-      <div class="sidebar__content">
-        <div>
-          <textclassificationprogress dataset="[object Object]"></textclassificationprogress>
-        </div>
-        <div style="display: none;">
-          <textclassificationstats dataset="[object Object]"></textclassificationstats>
-        </div>
-      </div>
-    </div>
-  </aside>
+<div class="sidebar__container">
+  <textclassificationsidebar dataset="[object Object]"></textclassificationsidebar>
+  <!---->
 </div>
 `;
 
 exports[`TaskSidebar renders properly 1`] = `
-<div>
-  <div class="sidebar"><span><div class="sidebar__info"><p>Mode</p> <sidebar-button id="explore" active-view="explore" icon="explore-view" tooltip="Explore" type="Mode"></sidebar-button><sidebar-button id="annotate" active-view="explore" icon="annotate-view" tooltip="Annotate" type="Mode"></sidebar-button><sidebar-button id="labelling-rules" active-view="explore" icon="labelling-rules-view" tooltip="Define rules" type="Mode"></sidebar-button></div></span><span><div class="sidebar__info"><p>Metrics</p> <sidebar-button id="progress" icon="progress" tooltip="Progress" type="Metrics"></sidebar-button><sidebar-button id="stats" icon="metrics" tooltip="Stats" type="Metrics"></sidebar-button></div></span><span><div class="sidebar__info"><p>Refresh</p> <sidebar-button id="refresh" icon="refresh" tooltip="Refresh" type="Refresh"></sidebar-button></div></span> </div>
+<div class="sidebar__container">
+  <textclassificationsidebar dataset="[object Object]"></textclassificationsidebar>
   <!---->
 </div>
 `;