diff --git a/frontend/assets/scss/abstract/placeholders/_placeholders.scss b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
index ca347a9fbc..04338a05ce 100644
--- a/frontend/assets/scss/abstract/placeholders/_placeholders.scss
+++ b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
@@ -81,6 +81,16 @@
     margin: 0 auto;
     padding: 4em;
 }
+%collapsable-if-metrics {
+  padding-right: calc($sidebarMenuWidth + 15px);
+  transition: padding 0.25s linear 0.2s;
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc($sidebarWidth + 25px);
+      transition: padding 0.25s linear;
+    }
+  }
+}
 
 // buttons
 %button {
@@ -202,12 +212,12 @@
       width: auto;
       height: auto;
       opacity: 1;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.1s ease 0.2s;
       z-index: 2;
     }
     &:before {
       opacity: 1;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.1s ease 0.2s;
     }
   }
 }
\ No newline at end of file
diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
index 4ad9f9007c..e75a926a0a 100644
--- a/frontend/components/commons/header/filters/FiltersArea.vue
+++ b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -121,13 +121,7 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   margin-left: 0;
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 
 .filters {
diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue
index 1b34e29ac4..b64347b9ad 100644
--- a/frontend/components/commons/header/global-actions/GlobalActions.vue
+++ b/frontend/components/commons/header/global-actions/GlobalActions.vue
@@ -45,17 +45,7 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4em;
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 .global-actions {
   display: flex;
diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
index d33b7dd179..d19b32586d 100644
--- a/frontend/components/commons/results/ResultsList.vue
+++ b/frontend/components/commons/results/ResultsList.vue
@@ -167,24 +167,12 @@ export default {
 <style lang="scss" scoped>
 .content {
   $this: &;
-  padding: 0;
   width: 100%;
   position: relative;
   margin-bottom: 0;
   list-style: none;
-  padding-right: calc($sidebarMenuWidth + 15px);
   z-index: 0;
-  .--metrics & {
-    @include media(">desktop") {
-      width: 100%;
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-  }
+  @extend %collapsable-if-metrics !optional;
   .results-scroll {
     height: 100vh !important;
     overflow: auto;
diff --git a/frontend/components/commons/sidebar/SidebarButton.vue b/frontend/components/commons/sidebar/SidebarButton.vue
index 367ebe27cb..f742290a32 100644
--- a/frontend/components/commons/sidebar/SidebarButton.vue
+++ b/frontend/components/commons/sidebar/SidebarButton.vue
@@ -6,12 +6,6 @@
     :data-title="!activeView.includes(id) ? tooltip : null"
     @click="$emit('button-action', id)"
   >
-    <!-- <svgicon
-      v-if="type !== 'Refresh'"
-      v-show="activeView.includes(id)"
-      class="sidebar-button__icon-help"
-      :name="type === 'Mode' ? 'check3' : 'double-chev'"
-    ></svgicon> -->
     <svgicon :name="icon"></svgicon>
   </a>
 </template>
@@ -63,6 +57,14 @@ $color: #333346;
     position: absolute;
     left: 0.8em;
   }
+  &.mode {
+    &:hover {
+      .svg-icon {
+        background: palette(grey, smooth);
+        border-radius: $border-radius;
+      }
+    }
+  }
   &.active {
     &.mode {
       .svg-icon {
@@ -72,15 +74,19 @@ $color: #333346;
     }
     &.metrics {
       position: relative;
-      &:before {
+      .svg-icon {
+        animation: move-horizontal 0.2s ease-in-out 0.2s;
+        animation-fill-mode: backwards;
+      }
+      &.active:before {
         content: "";
         height: 38px;
         width: 2px;
-        background: $color;
         border-radius: 2px;
         position: absolute;
         left: 0;
         top: 0;
+        background: $color;
       }
     }
   }
@@ -96,4 +102,13 @@ $color: #333346;
   box-sizing: content-box;
   margin-bottom: 0.5em;
 }
+
+@keyframes move-horizontal {
+  0% {
+    transform: translateX(0.3em);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>
diff --git a/frontend/components/commons/sidebar/SidebarMenu.vue b/frontend/components/commons/sidebar/SidebarMenu.vue
index 82e56d28f8..84aef34e5b 100644
--- a/frontend/components/commons/sidebar/SidebarMenu.vue
+++ b/frontend/components/commons/sidebar/SidebarMenu.vue
@@ -93,17 +93,19 @@ export default {
 $sidebar-button-size: 45px;
 $color: #333346;
 .sidebar {
-  position: fixed;
-  top: 56px;
-  right: 0;
+  top: 0;
   width: $sidebar-button-size;
   min-width: $sidebar-button-size;
   min-height: 100vh;
   min-width: $sidebarMenuWidth;
-  border-left: 1px solid palette(grey, smooth);
+  background: $bg;
+  box-shadow: none;
+  pointer-events: all;
   z-index: 1;
+  transition: box-shadow 0.2s ease-in-out 0.4s;
   .--metrics & {
-    border-color: transparent;
+    box-shadow: inset 1px 1px 5px -2px #c7c7c7;
+    transition: box-shadow 0.2s ease-in-out;
   }
   p {
     text-align: center;
diff --git a/frontend/components/commons/sidebar/SidebarPanel.vue b/frontend/components/commons/sidebar/SidebarPanel.vue
index 5a8fabdc10..aa97f4c057 100644
--- a/frontend/components/commons/sidebar/SidebarPanel.vue
+++ b/frontend/components/commons/sidebar/SidebarPanel.vue
@@ -19,11 +19,14 @@
   <aside class="sidebar">
     <div class="sidebar__wrapper">
       <div class="sidebar__content">
-        <svgicon
-          @click="closePanel"
-          class="sidebar__panel__button"
-          name="chev-right"
-        ></svgicon>
+        <a
+          href="#"
+          @click.prevent="closePanel"
+          :class="{ 'zoom-out': animated }"
+          @animationend="animated = false"
+          class="sidebar__close-button"
+          ><svgicon name="chev-right" width="6" height="8"></svgicon
+        ></a>
         <slot></slot>
       </div>
     </div>
@@ -32,6 +35,11 @@
 <script>
 import "assets/icons/chev-right";
 export default {
+  data: () => {
+    return {
+      animated: false,
+    };
+  },
   props: {
     dataset: {
       type: Object,
@@ -41,6 +49,7 @@ export default {
   methods: {
     closePanel() {
       this.$emit("close-panel");
+      this.animated = true;
     },
   },
 };
@@ -49,41 +58,68 @@ export default {
 $topbarHeight: 56px;
 $sidebarMenuWidth: 70px;
 .sidebar {
-  top: 0;
+  $this: &;
   min-height: calc(100vh - $topbarHeight);
   width: $sidebarPanelWidth;
-  position: absolute;
-  right: $sidebarMenuWidth;
+  position: relative;
+  top: 0;
+  right: -$sidebarPanelWidth + 1px;
   background: $bg;
   padding: 1em 1.5em;
-  transition: top 0.2s ease-in-out;
-  border: 1px solid palette(grey, smooth);
-  box-shadow: -4px 15px 16px -1px #c7c7c7;
+  transition: right 0.25s linear 0.2s;
+  z-index: -1;
+  border-left: 1px solid palette(grey, smooth);
+  &:hover {
+    #{$this}__close-button:not(.zoom-out) {
+      opacity: 1;
+      transform: scale(1);
+      transition: transform 0.15s ease-in-out;
+    }
+  }
+  &__close-button {
+    position: absolute;
+    left: -2.5em;
+    top: 1px;
+    border-radius: 3px;
+    background: palette(grey, smooth);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    transform: scale(0);
+    overflow: hidden;
+    opacity: 0;
+    outline: 0;
+    &.zoom-out {
+      opacity: 1;
+      animation: zoom-out 0.3s ease-out forwards;
+    }
+    .svg-icon {
+      color: $secondary-color;
+    }
+  }
+  &__content {
+    display: block;
+    position: relative;
+    opacity: 0;
+    transition: opacity 0.1s ease-out 0.6s;
+    z-index: 0;
+  }
+  &.visible {
+    overflow: visible;
+    right: 0;
+    transition: right 0.25s linear;
+    .sidebar__content {
+      transition: opacity 0.1s ease-in-out 0.2s;
+      opacity: 1;
+    }
+  }
   @include media(">desktop") {
     border-radius: 1px;
-    border: none;
     margin-left: 1em;
     display: block !important;
-    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%);
-      }
-    }
+    right: -$sidebarPanelWidth + 1px;
   }
   &__content {
     border-radius: 2px;
@@ -95,8 +131,28 @@ $sidebarMenuWidth: 70px;
   ::v-deep {
     .sidebar__title {
       margin-bottom: 2em;
-      margin-left: 1.5em;
+      color: $font-secondary-dark;
+      margin-top: 0.2em;
+      @include font-size(20px);
+      font-weight: 700;
+    }
+    .sidebar__subtitle {
+      @include font-size(15px);
+      color: $font-secondary-dark;
+      font-weight: 600;
     }
   }
 }
+
+@keyframes zoom-out {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
 </style>
diff --git a/frontend/components/commons/sidebar/SidebarProgress.vue b/frontend/components/commons/sidebar/SidebarProgress.vue
index 148077d2f5..5677b26347 100644
--- a/frontend/components/commons/sidebar/SidebarProgress.vue
+++ b/frontend/components/commons/sidebar/SidebarProgress.vue
@@ -95,14 +95,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.sidebar {
-  &__title {
-    color: $font-secondary-dark;
-    margin-top: 0.5em;
-    @include font-size(20px);
-    font-weight: 700;
-  }
-}
 label {
   margin-top: 1.2em;
   margin-bottom: 0.5em;
diff --git a/frontend/components/commons/sidebar/StatsSelector.vue b/frontend/components/commons/sidebar/StatsSelector.vue
index 52e9b6f005..1dadd9bd7e 100644
--- a/frontend/components/commons/sidebar/StatsSelector.vue
+++ b/frontend/components/commons/sidebar/StatsSelector.vue
@@ -24,7 +24,7 @@
     >
       {{ selectedOption.name }}
     </p>
-    <p v-else>{{ selectedOption.name }}</p>
+    <p class="sidebar__subtitle" v-else>{{ selectedOption.name }}</p>
     <transition name="fade">
       <ul
         v-if="showOptionsSelector"
diff --git a/frontend/components/commons/sidebar/TaskSidebar.vue b/frontend/components/commons/sidebar/TaskSidebar.vue
index 36b569600b..5534c75f0c 100644
--- a/frontend/components/commons/sidebar/TaskSidebar.vue
+++ b/frontend/components/commons/sidebar/TaskSidebar.vue
@@ -1,8 +1,24 @@
 <template>
-  <div class="sidebar__container">
+  <div class="sidebar__container" v-if="dataset">
+    <SidebarPanel
+      :class="[currentTask, currentMetric ? 'visible' : '']"
+      :dataset="dataset"
+      @close-panel="onClosePanel"
+    >
+      <transition name="fade" appear duration="500">
+        <span v-if="currentMetric">
+          <div
+            v-for="metric in metricsByViewMode"
+            :key="metric"
+            v-if="currentMetric === metric"
+          >
+            <component :is="componentName(metric)" :dataset="dataset" />
+          </div>
+        </span>
+      </transition>
+    </SidebarPanel>
     <component
       ref="menu"
-      v-if="dataset"
       :is="currentTaskSidebar"
       :dataset="dataset"
       :current-metric="currentMetric"
@@ -10,20 +26,6 @@
       @show-metrics="onShowSidebarInfo"
       @change-view-mode="onChangeViewMode"
     />
-    <SidebarPanel
-      v-if="currentMetric"
-      :dataset="dataset"
-      :class="dataset.task"
-      @close-panel="onClosePanel"
-    >
-      <div
-        v-for="metric in metricsByViewMode"
-        :key="metric"
-        v-show="currentMetric === metric"
-      >
-        <component :is="componentName(metric)" :dataset="dataset" />
-      </div>
-    </SidebarPanel>
   </div>
 </template>
 
@@ -110,8 +112,14 @@ export default {
 <style lang="scss" scoped>
 .sidebar {
   &__container {
-    position: relative;
     z-index: 1;
+    position: fixed;
+    display: flex;
+    right: 0;
+    pointer-events: none;
+    .--metrics & {
+      pointer-events: all;
+    }
   }
 }
 </style>
diff --git a/frontend/components/core/RePagination.vue b/frontend/components/core/RePagination.vue
index 930241ed16..0ecedd370b 100644
--- a/frontend/components/core/RePagination.vue
+++ b/frontend/components/core/RePagination.vue
@@ -229,6 +229,7 @@ $pagination-size: 30px;
     min-height: 63px;
     z-index: 99;
     padding-right: 1em;
+    padding-left: 4em;
     .--metrics & {
       @include media(">desktop") {
         padding-right: calc(294px + 10px);
diff --git a/frontend/components/core/ReProgress.vue b/frontend/components/core/ReProgress.vue
index 8fa2ddc4e3..2c199cd650 100644
--- a/frontend/components/core/ReProgress.vue
+++ b/frontend/components/core/ReProgress.vue
@@ -163,13 +163,11 @@ export default {
   top: 0;
   bottom: 0;
   left: 0;
-  transition: $swift-ease-out;
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
   background: $secondary-color;
-  transition: $swift-ease-out;
+  transition: all 2s ease-in-out;
   max-width: 100%;
-  transition-duration: 2s;
   &:last-of-type {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
diff --git a/frontend/components/text-classifier/header/ExplainHelpInfo.vue b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
index 324f752e91..01ba82a669 100644
--- a/frontend/components/text-classifier/header/ExplainHelpInfo.vue
+++ b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
@@ -69,17 +69,7 @@ export default {
   margin-top: 0em;
   margin-bottom: 1em;
   padding-left: 4em;
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      transition: padding 0.1s ease-in-out;
-      padding-right: calc($sidebarWidth + 25px);
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-  }
+  @extend %collapsable-if-metrics !optional;
   &__panel {
     border: 1px solid #f48e5f57;
     padding: 3em 2em 0.5em 2em;
diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
index 082c1e0afc..1a90016179 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
@@ -106,21 +106,22 @@ export default {
           field: "correct",
           class: "text",
           tooltip:
-            "Number of labels the rule predicted correctly (if annotations are available)",
+            "Number of labels the rule predicted correctly with respect to the annotations",
         },
         {
           name: "Incorrect",
           field: "incorrect",
           class: "text",
           tooltip:
-            "Number of labels the rule predicted incorrectly (if annotations are available)",
+            "Number of labels the rule predicted incorrectly with respect to the annotations",
         },
         {
           name: "Precision",
           field: "precision",
           class: "text",
           type: "percentage",
-          tooltip: "Percentage of correct labels given by the rule",
+          tooltip:
+            "Percentage of correct labels given by the rule with respect to the annotations",
         },
         {
           name: "Created at",
diff --git a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
index 8064d11d3a..d9c303d659 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
@@ -117,7 +117,8 @@ export default {
           name: "Precision",
           rule: {
             value: this.formatNumber(this.ruleMetrics.precision),
-            tooltip: "Percentage of correct labels given by the rule",
+            tooltip:
+              "Percentage of correct labels given by the rule with respect to the annotations",
           },
         },
         {
@@ -128,7 +129,7 @@ export default {
                 ? `${this.ruleMetrics.correct}/${this.ruleMetrics.incorrect}`
                 : "-/-",
             tooltip:
-              "Number of labels the rule predicted correctly/incorrectly (if annotations are available)",
+              "Number of labels the rule predicted correctly/incorrectly with respect to the annotations",
           },
         },
       ];
diff --git a/frontend/components/text-classifier/results/TextClassificationResultsList.vue b/frontend/components/text-classifier/results/TextClassificationResultsList.vue
index 749e565804..538930d382 100644
--- a/frontend/components/text-classifier/results/TextClassificationResultsList.vue
+++ b/frontend/components/text-classifier/results/TextClassificationResultsList.vue
@@ -63,17 +63,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .content {
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      width: 100%;
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
-  @include media(">desktop") {
-    transition: padding 0.1s ease-in-out;
-    width: 100%;
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 </style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
index 64f6bbe5b3..5925be4472 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
@@ -19,9 +19,11 @@
   <div>
     <p class="sidebar__title">Overall rule metrics</p>
     <div class="progress__info">
-      <p class="progress__info__text">Coverage</p>
+      <p class="progress__info__text" :data-title="tooltip.coverage">
+        Coverage
+      </p>
       <span class="progress__info__percent">{{
-        coverage.percent | percent
+        coverage.percent || 0 | percent
       }}</span>
     </div>
     <ReProgress
@@ -31,9 +33,11 @@
       :tooltip="`${coverage.records}/${totalRecords}`"
     ></ReProgress>
     <div class="progress__info">
-      <p class="progress__info__text">Annotated Coverage</p>
+      <p class="progress__info__text" :data-title="tooltip.annotatedCoverage">
+        Annotated Coverage
+      </p>
       <span class="progress__info__percent">{{
-        annotatedCoverage.percent | percent
+        annotatedCoverage.percent || 0 | percent
       }}</span>
     </div>
     <ReProgress
@@ -43,15 +47,19 @@
       :tooltip="`${annotatedCoverage.records}/${metricsTotal.annotated_records}`"
     ></ReProgress>
     <div class="progress__info">
-      <p class="progress__info__text">Precision average</p>
+      <p class="progress__info__text" :data-title="tooltip.precision">
+        Precision average
+      </p>
       <transition name="fade" mode="out-in" appear
         ><span :key="precision" class="progress__info__percent">{{
-          precision | percent
+          precision || 0 | percent
         }}</span></transition
       >
     </div>
     <div class="progress__info">
-      <p class="progress__info__text">Correct/Incorrect</p>
+      <p class="progress__info__text" :data-title="tooltip.correctAndIncorrect">
+        Correct/Incorrect
+      </p>
       <transition name="fade" mode="out-in" appear
         ><span :key="correctAndIncorrect" class="progress__info__percent">{{
           correctAndIncorrect
@@ -97,6 +105,16 @@ export default {
     return {};
   },
   computed: {
+    tooltip() {
+      return {
+        coverage: "Percentage of records labeled by all rules",
+        annotatedCoverage:
+          "Percentage of annotated records labeled by all rules",
+        precision: "Percentage of correct labels given by all rules",
+        correctAndIncorrect:
+          "Number of labels the rule predicted correctly/incorrectly with respect to the annotations",
+      };
+    },
     ruleMetrics() {
       return this.dataset.getCurrentLabelingRuleMetrics() || {};
     },
@@ -159,14 +177,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.sidebar {
-  &__title {
-    color: $font-secondary-dark;
-    margin-top: 0.5em;
-    @include font-size(20px);
-    font-weight: 700;
-  }
-}
+$color: #333346;
 label {
   display: block;
   width: calc(100% - 40px);
@@ -231,4 +242,30 @@ label {
     }
   }
 }
+p[data-title] {
+  position: relative;
+  @extend %hastooltip;
+  &:after {
+    padding: 0.5em 1em;
+    bottom: 100%;
+    right: 50%;
+    transform: translateX(50%);
+    background: $color;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    @include font-size(14px);
+    font-weight: 600;
+    margin-bottom: 0.5em;
+    min-width: 220px;
+    white-space: break-spaces;
+  }
+  &:before {
+    right: calc(50% - 7px);
+    top: -0.5em;
+    border-top: 7px solid $color;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+  }
+}
 </style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
index 521d866650..af039b0124 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
@@ -16,16 +16,14 @@
   -->
 
 <template>
-  <div>
-    <SidebarMenu
-      :current-metric="currentMetric"
-      :dataset="dataset"
-      :sidebar-items="sidebarItems"
-      @refresh="$emit('refresh')"
-      @show-metrics="onShowMetrics"
-      @change-view-mode="onChangeViewMode"
-    />
-  </div>
+  <SidebarMenu
+    :current-metric="currentMetric"
+    :dataset="dataset"
+    :sidebar-items="sidebarItems"
+    @refresh="$emit('refresh')"
+    @show-metrics="onShowMetrics"
+    @change-view-mode="onChangeViewMode"
+  />
 </template>
 
 <script>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
index 400c9965a1..fe2b06cafa 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
@@ -77,14 +77,6 @@ export default {
 };
 </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);
diff --git a/frontend/components/text2text/sidebar/Text2TextSidebar.vue b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
index 12a5a88a30..0d5b674f1c 100644
--- a/frontend/components/text2text/sidebar/Text2TextSidebar.vue
+++ b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
@@ -16,16 +16,14 @@
   -->
 
 <template>
-  <div>
-    <SidebarMenu
-      :current-metric="currentMetric"
-      :dataset="dataset"
-      :sidebar-items="sidebarItems"
-      @refresh="$emit('refresh')"
-      @show-metrics="onShowMetrics"
-      @change-view-mode="onChangeViewMode"
-    />
-  </div>
+  <SidebarMenu
+    :current-metric="currentMetric"
+    :dataset="dataset"
+    :sidebar-items="sidebarItems"
+    @refresh="$emit('refresh')"
+    @show-metrics="onShowMetrics"
+    @change-view-mode="onChangeViewMode"
+  />
 </template>
 
 <script>
diff --git a/frontend/components/text2text/sidebar/Text2TextStats.vue b/frontend/components/text2text/sidebar/Text2TextStats.vue
index 400c9965a1..fe2b06cafa 100644
--- a/frontend/components/text2text/sidebar/Text2TextStats.vue
+++ b/frontend/components/text2text/sidebar/Text2TextStats.vue
@@ -77,14 +77,6 @@ export default {
 };
 </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);
diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
index cdf3a7a901..33b6ea213c 100755
--- a/frontend/components/token-classifier/results/EntitiesHeader.vue
+++ b/frontend/components/token-classifier/results/EntitiesHeader.vue
@@ -118,13 +118,7 @@ export default {
   padding-top: 0;
   padding-bottom: 0.7em;
   margin-left: 0;
-  padding-right: calc($sidebarMenuWidth + 15px);
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.1s ease-in-out;
-    }
-  }
+  @extend %collapsable-if-metrics !optional;
 }
 .entities {
   &__wrapper {
diff --git a/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue b/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
index 310c352217..6740ba427d 100644
--- a/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
+++ b/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
@@ -24,7 +24,7 @@
     >
       <label>{{ item[0] }}</label>
       <span class="records-number">
-        <strong>{{ item[1] | formatNumber }}</strong>
+        {{ item[1] | formatNumber }}
       </span>
     </div>
     <a
@@ -78,6 +78,6 @@ export default {
 .records-number {
   margin-right: 0;
   margin-left: auto;
-  font-weight: bold;
+  padding-left: 0.5em;
 }
 </style>
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
index 12a5a88a30..0d5b674f1c 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
@@ -16,16 +16,14 @@
   -->
 
 <template>
-  <div>
-    <SidebarMenu
-      :current-metric="currentMetric"
-      :dataset="dataset"
-      :sidebar-items="sidebarItems"
-      @refresh="$emit('refresh')"
-      @show-metrics="onShowMetrics"
-      @change-view-mode="onChangeViewMode"
-    />
-  </div>
+  <SidebarMenu
+    :current-metric="currentMetric"
+    :dataset="dataset"
+    :sidebar-items="sidebarItems"
+    @refresh="$emit('refresh')"
+    @show-metrics="onShowMetrics"
+    @change-view-mode="onChangeViewMode"
+  />
 </template>
 
 <script>
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
index 70a2cb8180..bc504b6854 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
@@ -148,14 +148,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.sidebar {
-  &__title {
-    color: $font-secondary-dark;
-    margin-top: 0.5em;
-    @include font-size(20px);
-    font-weight: 700;
-  }
-}
 .sidebar {
   &__tabs {
     display: flex;
@@ -165,18 +157,22 @@ export default {
       display: inline-block;
     }
     a {
+      font-family: $sff;
       width: 100%;
-      border: 1px solid palette(grey, smooth);
-      border-radius: 2px;
+      border-radius: $radius;
       text-align: center;
       color: $font-secondary;
       text-decoration: none;
       margin: 0 5px;
       outline: none;
       @include font-size(13px);
-      padding: 0.3em;
+      padding: 0.5em;
       &.active {
-        background: palette(grey, light);
+        color: $primary-color;
+        background: palette(grey, smooth);
+      }
+      &:hover {
+        background: palette(grey, smooth);
       }
     }
   }
diff --git a/frontend/pages/datasets/index.vue b/frontend/pages/datasets/index.vue
index 9177b14c20..73b070e06e 100644
--- a/frontend/pages/datasets/index.vue
+++ b/frontend/pages/datasets/index.vue
@@ -59,7 +59,11 @@
           </div>
         </div>
       </div>
-      <sidebar-menu @refresh="$fetch" :sidebar-items="sidebarItems" />
+      <sidebar-menu
+        class="home__sidebar"
+        @refresh="$fetch"
+        :sidebar-items="sidebarItems"
+      />
     </div>
   </div>
 </template>
@@ -352,4 +356,13 @@ export default {
   margin-bottom: 2em;
   @include font-size(18px);
 }
+
+.home {
+  &__sidebar.sidebar {
+    position: fixed;
+    top: 56px;
+    right: 0;
+    border-left: 1px solid palette(grey, smooth);
+  }
+}
 </style>
diff --git a/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap b/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap
index 40f227780a..14bd225e09 100644
--- a/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap
+++ b/frontend/specs/components/__snapshots__/TaskSidebar.spec.js.snap
@@ -2,14 +2,34 @@
 
 exports[`TaskSidebar Show sidebar panel 1`] = `
 <div class="sidebar__container">
+  <aside class="sidebar TextClassification">
+    <div class="sidebar__wrapper">
+      <div class="sidebar__content"><a href="#" class="sidebar__close-button"><svg version="1.1" viewBox="0 0 6 9" class="svg-icon svg-fill" style="width: 6px; height: 8px;">
+            <path pid="0" d="M2.885 4.276L0 1.475 1.518 0l2.885 2.802L5.92 4.276 4.403 5.751 1.518 8.553 0 7.078z" _fill="#0508D9" fill-rule="evenodd"></path>
+          </svg></a>
+        <transition-stub name="fade" appear="true" duration="500">
+          <!---->
+        </transition-stub>
+      </div>
+    </div>
+  </aside>
   <textclassificationsidebar dataset="[object Object]"></textclassificationsidebar>
-  <!---->
 </div>
 `;
 
 exports[`TaskSidebar renders properly 1`] = `
 <div class="sidebar__container">
+  <aside class="sidebar TextClassification">
+    <div class="sidebar__wrapper">
+      <div class="sidebar__content"><a href="#" class="sidebar__close-button"><svg version="1.1" viewBox="0 0 6 9" class="svg-icon svg-fill" style="width: 6px; height: 8px;">
+            <path pid="0" d="M2.885 4.276L0 1.475 1.518 0l2.885 2.802L5.92 4.276 4.403 5.751 1.518 8.553 0 7.078z" _fill="#0508D9" fill-rule="evenodd"></path>
+          </svg></a>
+        <transition-stub name="fade" appear="true" duration="500">
+          <!---->
+        </transition-stub>
+      </div>
+    </div>
+  </aside>
   <textclassificationsidebar dataset="[object Object]"></textclassificationsidebar>
-  <!---->
 </div>
 `;