diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
index a78e79a37b..607a5733a5 100644
--- a/frontend/assets/scss/abstract/variables/_variables.scss
+++ b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -157,6 +157,9 @@ $swift-linear-duration: 0.15s !default;
 $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
 
+// topbar
+$topbarHeight: 56px;
+
 // sidebar
 $sidebarPanelWidth: 280px;
 $sidebarMenuWidth: 70px;
diff --git a/frontend/components/base/BaseButton.vue b/frontend/components/base/BaseButton.vue
index 5e33ea540c..cacccfebdd 100644
--- a/frontend/components/base/BaseButton.vue
+++ b/frontend/components/base/BaseButton.vue
@@ -92,12 +92,12 @@ export default {
 // buttons
 %button {
   position: relative;
-  min-width: auto;
   display: flex;
-  position: relative;
+  align-items: center;
+  gap: $base-space;
+  min-width: auto;
   overflow: hidden;
   user-select: none;
-  cursor: pointer;
   outline: 0;
   background: none;
   border: 0;
@@ -108,13 +108,12 @@ export default {
   font-weight: 500;
   text-align: center;
   text-decoration: none;
-  vertical-align: middle;
   white-space: nowrap;
-  align-items: center;
   @include font-size(14px);
   line-height: 14px;
   padding: 12px 24px;
   transition: all 0.4s $cb-normal;
+  cursor: pointer;
   &:focus {
     outline: 0;
   }
@@ -129,19 +128,11 @@ export default {
 }
 .button {
   @extend %button;
-  :deep(.svg-icon) {
-    margin-right: $base-space * 2;
-    margin-left: -$base-space * 2;
-  }
 }
 .small {
   @include font-size(13px);
   line-height: 13px;
   padding: 9px 18px;
-  :deep(.svg-icon) {
-    margin-right: $base-space;
-    margin-left: -$base-space;
-  }
 }
 .primary {
   background-color: $primary-color;
@@ -177,6 +168,14 @@ export default {
       background: $black-4;
     }
   }
+  &.link {
+    background: none;
+    color: $primary-color;
+    &:hover {
+      text-decoration: underline;
+      background: none;
+    }
+  }
 }
 
 .secondary {
diff --git a/frontend/components/base/BaseModal.vue b/frontend/components/base/BaseModal.vue
index 7b75b61a0c..adea6bba1d 100644
--- a/frontend/components/base/BaseModal.vue
+++ b/frontend/components/base/BaseModal.vue
@@ -16,23 +16,25 @@
   -->
 
 <template>
-  <div v-if="modalVisible" v-click-outside="onClickOutside" class="modal-mask">
-    <transition name="fade" appear>
+  <transition name="fade" v-if="modalVisible" appear>
+    <div v-click-outside="onClickOutside" class="modal-mask">
       <div class="modal-wrapper" :class="modalPosition">
         <div :class="['modal-container', modalClass]">
-          <p v-if="!modalCustom" class="modal__title">
-            <span
-              class="state"
-              :class="modalClass === 'modal-info' ? 'succeeded' : 'failed'"
-            />
+          <p v-if="modalTitle" class="modal__title">
+            <svgicon
+              v-if="modalIcon"
+              width="24"
+              height="24"
+              :name="modalIcon"
+              color="#000000"
+            ></svgicon>
             {{ modalTitle }}
           </p>
-          <div v-if="!modalCustom" />
           <slot />
         </div>
       </div>
-    </transition>
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -51,14 +53,13 @@ export default {
       type: Boolean,
       default: true,
     },
-    modalCustom: {
-      type: Boolean,
-      default: false,
-    },
     modalClass: {
       type: String,
       default: "modal-info",
     },
+    modalIcon: {
+      type: String,
+    },
     modalTitle: {
       type: String,
       default: undefined,
@@ -73,7 +74,7 @@ export default {
     },
     modalPosition: {
       type: String,
-      default: "modal-bottom",
+      default: "modal-center",
     },
   },
   data: () => ({}),
@@ -117,27 +118,37 @@ export default {
 }
 
 .modal-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-  &.modal-bottom {
-    vertical-align: bottom;
-    padding-bottom: 3em;
-    padding-left: 30%;
+  display: flex;
+  height: 100vh;
+  &.modal-bottom-right {
+    align-items: flex-end;
+    padding-bottom: 3.5em;
+    .modal-container {
+      margin-right: 1.5em;
+    }
+  }
+  &.modal-top-right {
+    align-items: flex-start;
+    padding-top: 10em;
+    .modal-container {
+      margin-right: 6em;
+    }
   }
   &.modal-center {
-    vertical-align: middle;
+    align-items: center;
   }
 }
 
 .modal-container {
+  position: relative;
   max-width: 460px;
   margin: 0px auto;
   padding: $base-space * 4;
   background-color: palette(white);
+  color: $black-87;
   border-radius: $border-radius;
   box-shadow: $shadow;
   transition: $swift-ease-in-out;
-  position: relative;
   text-align: left;
   pointer-events: all;
 }
@@ -145,10 +156,6 @@ export default {
   box-shadow: $shadow;
   border-radius: $border-radius;
   max-width: 520px;
-  :deep(.modal__title) {
-    font-weight: normal;
-    @include font-size(16px);
-  }
   :deep(.modal__text) {
     margin-bottom: 2em;
   }
@@ -173,36 +180,12 @@ export default {
   }
 }
 :deep(.modal__title) {
+  display: flex;
+  align-items: center;
+  gap: $base-space;
   @include font-size(16px);
-  color: $black-54;
   font-weight: 600;
   margin-top: 0;
-  margin-right: 2em;
-}
-
-.modal__message {
-  margin-bottom: 1em;
-  display: block;
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-  .modal-text {
-    margin-top: 0;
-    margin-bottom: 0.3em;
-    font-weight: 600;
-    &--info {
-      margin-top: 0;
-      margin-bottom: 0.3em;
-      display: block;
-      font-weight: lighter;
-    }
-  }
-  .failed {
-    color: $error;
-    font-weight: lighter;
-    margin-bottom: 0;
-    margin-top: 0;
-  }
 }
 
 .modal-enter {
@@ -213,17 +196,6 @@ export default {
   opacity: 0;
 }
 
-// .modal-close {
-//   border: 0;
-//   background: palette(white);
-//   color: $black-54;
-//   position: absolute;
-//   top: 0.5em;
-//   right: 0.5em;
-//   outline: none;
-//   cursor: pointer;
-// }
-
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
   transform: scale(0.9);
diff --git a/frontend/components/base/BasePagination.vue b/frontend/components/base/BasePagination.vue
index e1e9803646..d7e9062ca2 100644
--- a/frontend/components/base/BasePagination.vue
+++ b/frontend/components/base/BasePagination.vue
@@ -95,7 +95,7 @@
             : paginationSize * currentPage
         }}
       </strong>
-      of {{ paginableTotalItems | formatNumber }}
+      of {{ paginableTotalItems | formatNumber }} records
     </div>
   </div>
 </template>
diff --git a/frontend/components/base/BaseTopbarBrand.vue b/frontend/components/base/BaseTopbarBrand.vue
index f275b3bc15..b85de6da9f 100644
--- a/frontend/components/base/BaseTopbarBrand.vue
+++ b/frontend/components/base/BaseTopbarBrand.vue
@@ -33,7 +33,7 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
-  min-height: 56px;
+  min-height: $topbarHeight;
   position: relative;
   background: palette(grey, 100);
   color: palette(white);
diff --git a/frontend/components/base/table/BaseTableInfo.vue b/frontend/components/base/table/BaseTableInfo.vue
index fc715b8fc0..515f125647 100644
--- a/frontend/components/base/table/BaseTableInfo.vue
+++ b/frontend/components/base/table/BaseTableInfo.vue
@@ -161,12 +161,11 @@
                   :modal-custom="true"
                   :prevent-body-scroll="true"
                   modal-class="modal-secondary"
+                  :modal-title="deleteModalContent.title"
                   :modal-visible="visibleModalId === item.id"
-                  modal-position="modal-center"
                   @close-modal="$emit('close-modal')"
                 >
                   <div>
-                    <p class="modal__title">{{ deleteModalContent.title }}</p>
                     <p v-html="deleteModalContent.text"></p>
                     <div class="modal-buttons">
                       <base-button
diff --git a/frontend/components/commons/header/dataset-options/DatasetOptionHelpInfo.vue b/frontend/components/commons/header/dataset-options/DatasetOptionHelpInfo.vue
new file mode 100644
index 0000000000..c4ea3e3940
--- /dev/null
+++ b/frontend/components/commons/header/dataset-options/DatasetOptionHelpInfo.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <base-button
+      title="Info"
+      class="dataset-option__button"
+      :class="buttonClass"
+      @click="showHelpInfo()"
+    >
+      <svgicon name="support" width="18" height="18" />Help</base-button
+    >
+    <component
+      :visible="visible"
+      @on-close="close()"
+      :is="currentTaskHelpInfo"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    task: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  computed: {
+    currentTaskHelpInfo() {
+      return `${this.task}HelpInfo`;
+    },
+    buttonClass() {
+      return this.visible ? "--active" : null;
+    },
+  },
+  methods: {
+    showHelpInfo() {
+      this.visible = !this.visible;
+    },
+    close() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-option {
+  &__button {
+    padding: 0;
+    color: $primary-color;
+    &:hover,
+    &.--active {
+      color: darken($primary-color, 10%);
+    }
+  }
+}
+</style>
diff --git a/frontend/components/commons/header/dataset-options/DatasetOptions.vue b/frontend/components/commons/header/dataset-options/DatasetOptions.vue
new file mode 100644
index 0000000000..bf10103317
--- /dev/null
+++ b/frontend/components/commons/header/dataset-options/DatasetOptions.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="dataset-options">
+    <dataset-option-help-info
+      class="dataset-options__item"
+      v-if="availableHelpInfo"
+      :task="task"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    availableHelpInfo() {
+      return this.dataset.results.records.some((record) => record.explanation);
+    },
+    task() {
+      return this.dataset.task;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-options {
+  display: flex;
+  align-items: center;
+  gap: $base-space;
+  margin-left: auto;
+  &__item {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue
index 4e886687fc..14689f8c83 100644
--- a/frontend/components/commons/header/filters/FiltersList.vue
+++ b/frontend/components/commons/header/filters/FiltersList.vue
@@ -264,7 +264,7 @@ export default {
     },
     selectGroup(group) {
       if (this.initialVisibleGroup === group) {
-        this.initialVisibleGroup =  null;
+        this.initialVisibleGroup = null;
       } else {
         this.initialVisibleGroup = group;
       }
diff --git a/frontend/components/commons/header/filters/RecordsCounter.vue b/frontend/components/commons/header/filters/RecordsCounter.vue
deleted file mode 100644
index dc950d0f6b..0000000000
--- a/frontend/components/commons/header/filters/RecordsCounter.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <p class="records-counter" v-if="total > 0">
-    Records ({{ total | formatNumber }})
-  </p>
-</template>
-
-<script>
-export default {
-  props: {
-    total: {
-      type: Number,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.records-counter {
-  color: $black-54;
-  margin-left: auto;
-  margin-right: 0;
-  display: block;
-  text-align: right;
-  @include font-size(13px);
-}
-</style>
diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
index d850b28101..d0fd94f95e 100644
--- a/frontend/components/commons/results/ResultsList.vue
+++ b/frontend/components/commons/results/ResultsList.vue
@@ -72,7 +72,6 @@
     </div>
     <lazy-base-modal
       modal-class="modal-secondary"
-      modal-position="modal-center"
       :modal-custom="true"
       :prevent-body-scroll="true"
       :modal-visible="selectedRecord !== undefined"
diff --git a/frontend/components/commons/sidebar/SidebarButton.vue b/frontend/components/commons/sidebar/SidebarButton.vue
index ce6d17cd0f..19456a14af 100644
--- a/frontend/components/commons/sidebar/SidebarButton.vue
+++ b/frontend/components/commons/sidebar/SidebarButton.vue
@@ -1,9 +1,9 @@
 <template>
   <a
     class="sidebar-button"
-    :class="[type.toLowerCase(), activeView.includes(id) ? 'active' : '']"
+    :class="sidebarButtonClass"
     href="#"
-    :data-title="!activeView.includes(id) ? tooltip : null"
+    :data-title="tooltip"
     @click="$emit('button-action', id)"
   >
     <svgicon :name="icon"></svgicon>
@@ -25,7 +25,6 @@ export default {
     },
     tooltip: {
       type: String,
-      required: true,
     },
     id: {
       type: String,
@@ -35,27 +34,32 @@ export default {
       type: String,
       required: true,
     },
-    type: {
+    buttonType: {
       type: String,
-      required: true,
       validator: (value) => {
         return ["Mode", "Metrics", "Refresh"].includes(value);
       },
     },
   },
+  computed: {
+    isActive() {
+      return this.activeView.includes(this.id);
+    },
+    sidebarButtonClass() {
+      return [this.buttonTypeClass, this.buttonStateClass];
+    },
+    buttonTypeClass() {
+      return this.buttonType?.toLowerCase();
+    },
+    buttonStateClass() {
+      return this.isActive ? "active" : null;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .sidebar-button {
-  &__icon-help {
-    left: 5px;
-    width: 11px !important;
-    margin-right: 0;
-    stroke-width: 2;
-    position: absolute;
-    left: 0.8em;
-  }
   &.mode {
     &:hover {
       .svg-icon {
diff --git a/frontend/components/commons/sidebar/SidebarMenu.vue b/frontend/components/commons/sidebar/SidebarMenu.vue
index 0cb7fc8ec2..377c82fcbb 100644
--- a/frontend/components/commons/sidebar/SidebarMenu.vue
+++ b/frontend/components/commons/sidebar/SidebarMenu.vue
@@ -17,23 +17,21 @@
 
 <template>
   <div class="sidebar">
-    <span v-for="group in sidebarGroups" :key="group">
-      <div class="sidebar__info">
-        <p>{{ group }}</p>
-        <sidebar-button
-          v-for="button in filteredSidebarItems.filter(
-            (button) => button.group === group
-          )"
-          :id="button.id"
-          :key="button.id"
-          :active-view="[viewMode, currentMetric]"
-          :icon="button.icon"
-          :tooltip="button.tooltip"
-          :type="group"
-          @button-action="action(button.action, button.id)"
-        />
-      </div>
-    </span>
+    <div v-for="group in sidebarGroups" :key="group" class="sidebar__info">
+      <p>{{ group }}</p>
+      <sidebar-button
+        v-for="{ id, icon, tooltip, action } in filteredSidebarItemsByGroup(
+          group
+        )"
+        :id="id"
+        :key="id"
+        :active-view="[viewMode, currentMetric]"
+        :icon="icon"
+        :tooltip="tooltip"
+        :button-type="group"
+        @button-action="onAction(action, id)"
+      />
+    </div>
     <slot />
   </div>
 </template>
@@ -82,7 +80,12 @@ export default {
     },
   },
   methods: {
-    action(action, id) {
+    filteredSidebarItemsByGroup(group) {
+      return this.filteredSidebarItems.filter(
+        (button) => button.group === group
+      );
+    },
+    onAction(action, id) {
       this.$emit(action, id);
     },
   },
@@ -92,10 +95,13 @@ export default {
 <style lang="scss" scoped>
 $sidebar-button-size: 45px;
 .sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
   top: 0;
   width: $sidebar-button-size;
   min-width: $sidebar-button-size;
-  min-height: 100vh;
+  min-height: calc(100vh - $topbarHeight);
   min-width: $sidebarMenuWidth;
   background: palette(grey, 700);
   box-shadow: none;
@@ -118,7 +124,6 @@ $sidebar-button-size: 45px;
   }
   &__info {
     position: relative;
-    margin-bottom: 2em;
   }
 }
 a[data-title]:not(.active) {
diff --git a/frontend/components/commons/sidebar/TaskSidebar.vue b/frontend/components/commons/sidebar/TaskSidebar.vue
index 040e1faa37..34684afe58 100644
--- a/frontend/components/commons/sidebar/TaskSidebar.vue
+++ b/frontend/components/commons/sidebar/TaskSidebar.vue
@@ -25,6 +25,7 @@
       @refresh="onRefresh"
       @show-metrics="onShowSidebarInfo"
       @change-view-mode="onChangeViewMode"
+      @set-sidebar-items="onSetSidebarItems"
     />
   </div>
 </template>
@@ -43,29 +44,30 @@ export default {
     },
   },
   data: () => ({
+    sidebarItems: [],
     currentMetric: undefined,
   }),
   computed: {
-    currentTaskSidebar() {
-      return this.currentTask + "Sidebar";
-    },
     currentTask() {
       return this.dataset.task;
     },
+    currentTaskSidebar() {
+      return `${this.currentTask}Sidebar`;
+    },
     metricsByViewMode() {
       return this.sidebarItems.find(
         (item) => item.id === this.dataset.viewSettings.viewMode
       ).relatedMetrics;
     },
-    sidebarItems() {
-      return this.$refs.menu.sidebarItems;
-    },
   },
   methods: {
     ...mapActions({
       changeViewMode: "entities/datasets/changeViewMode",
       refresh: "entities/datasets/refresh",
     }),
+    onSetSidebarItems(items) {
+      this.sidebarItems = items;
+    },
     onRefresh() {
       this.refresh({
         dataset: this.dataset,
diff --git a/frontend/components/text-classifier/header/ExplainHelpInfo.vue b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
deleted file mode 100644
index 2a47e093f3..0000000000
--- a/frontend/components/text-classifier/header/ExplainHelpInfo.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
-  - 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 class="help">
-    <base-button
-      class="help__button secondary light small"
-      @click="showHelpPanel = true"
-    >
-      <svgicon name="support" width="22" height="22"></svgicon>
-      Help
-    </base-button>
-    <lazy-base-modal
-      modal-class="modal-secondary"
-      modal-position="modal-center"
-      :modal-custom="true"
-      :prevent-body-scroll="true"
-      :modal-visible="showHelpPanel"
-      @close-modal="closeModal"
-    >
-      <div v-if="showHelpPanel" class="help__panel">
-        <p class="help__panel__title">
-          This dataset contains token attributions. What do highlight colors
-          mean?
-        </p>
-        <p>
-          Argilla enables you to register token attributions as part of the
-          dataset records. For getting token attributions, you can use methods
-          such as Integrated Gradients or SHAP. These methods try to provide a
-          mechanism to interpret model predictions.
-        </p>
-        <p>The attributions work as follows:</p>
-        <p>
-          [0,1] <strong>Positive attributions</strong> (in blue) reflect those
-          tokens that are making the model predict the specific predicted label.
-        </p>
-        <p>
-          [-1, 0] <strong>Negative attributions</strong> (in red) reflect those
-          tokens that can influence the model to predict a label other than the
-          specific predicted label.
-        </p>
-      </div>
-      <base-button class="primary" @click="closeModal"> Close </base-button>
-    </lazy-base-modal>
-  </div>
-</template>
-
-<script>
-import "assets/icons/support";
-export default {
-  data: () => ({
-    showHelpPanel: false,
-  }),
-  methods: {
-    closeModal() {
-      this.showHelpPanel = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.help {
-  clear: both;
-  margin-top: 0em;
-  margin-bottom: 1em;
-  padding-left: 4em;
-  @extend %collapsable-if-metrics !optional;
-  &__panel {
-    color: $black-54;
-    border-radius: 1px;
-    position: relative;
-    margin-bottom: $base-space * 4;
-    .atom {
-      @include font-size(16px);
-      display: inline-block;
-    }
-    &__title {
-      @include font-size(16px);
-      color: $black-54;
-      font-weight: 600;
-      margin-top: 0;
-    }
-    ul,
-    p {
-      @include font-size(13px);
-    }
-    ul {
-      padding-left: 1.5em;
-      margin-bottom: 1.5em;
-    }
-    &__button {
-      position: absolute;
-      right: 1em;
-      top: 1em;
-      cursor: pointer;
-      &:after {
-        content: "\2715";
-        font-weight: bold;
-        color: palette(brown);
-        font-size: 14px;
-      }
-    }
-  }
-  &__button {
-    display: flex;
-    margin-right: 0;
-    margin-left: auto;
-    background: palette(grey, 700) !important;
-    &:hover {
-      background: darken(palette(grey, 700), 2%) !important;
-    }
-    .svg-icon {
-      margin-right: 0.3em;
-      fill: $black-54;
-    }
-  }
-}
-</style>
diff --git a/frontend/components/text-classifier/header/TextClassificationHeader.vue b/frontend/components/text-classifier/header/TextClassificationHeader.vue
index b850518dc8..5031dbc274 100644
--- a/frontend/components/text-classifier/header/TextClassificationHeader.vue
+++ b/frontend/components/text-classifier/header/TextClassificationHeader.vue
@@ -21,12 +21,8 @@
       v-if="!dataset.viewSettings.visibleRulesList"
       :dataset="dataset"
     >
-      <records-counter :total="dataset.results.total"></records-counter>
+      <dataset-options :dataset="dataset" />
     </filters-area>
-    <explain-help-info
-      v-if="isExplainedRecord && !isRuleListView"
-      :dataset="dataset"
-    />
     <global-actions :dataset="dataset">
       <validate-discard-action
         :dataset="dataset"
@@ -56,9 +52,6 @@ export default {
     },
   },
   computed: {
-    isExplainedRecord() {
-      return this.dataset.results.records.some((record) => record.explanation);
-    },
     isMultiLabel() {
       return this.dataset.isMultiLabel;
     },
diff --git a/frontend/components/text-classifier/header/TextClassificationHelpInfo.vue b/frontend/components/text-classifier/header/TextClassificationHelpInfo.vue
new file mode 100644
index 0000000000..e764fb194a
--- /dev/null
+++ b/frontend/components/text-classifier/header/TextClassificationHelpInfo.vue
@@ -0,0 +1,87 @@
+<!--
+  - 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>
+  <lazy-base-modal
+    modal-class="modal-secondary"
+    modal-position="modal-top-right"
+    modal-title="Highlight colors in token attributions"
+    :modal-custom="true"
+    :modal-visible="visible"
+    @close-modal="closeModal"
+  >
+    <div class="help-info__content">
+      <p>
+        Argilla enables you to register token attributions as part of the
+        dataset records. For getting token attributions, you can use methods
+        such as Integrated Gradients or SHAP. These methods try to provide a
+        mechanism to interpret model predictions.
+      </p>
+      <p>The attributions work as follows:</p>
+      <p>
+        [0,1] <strong>Positive attributions</strong> (in blue) reflect those
+        tokens that are making the model predict the specific predicted label.
+      </p>
+      <p>
+        [-1, 0] <strong>Negative attributions</strong> (in red) reflect those
+        tokens that can influence the model to predict a label other than the
+        specific predicted label.
+      </p>
+    </div>
+    <div class="modal-buttons">
+      <base-button
+        class="primary link"
+        href="https://docs.argilla.io/en/latest/tutorials/notebooks/monitoring-textclassification-shaptransformersinterpret-explainability.html"
+        target="_blank"
+        >More in docs</base-button
+      >
+      <base-button class="primary" @click="closeModal">Ok, got it!</base-button>
+    </div>
+  </lazy-base-modal>
+</template>
+
+<script>
+import "assets/icons/support";
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    closeModal() {
+      this.$emit("on-close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.help-info {
+  &__content {
+    margin-bottom: 2em;
+    @include font-size(13px);
+  }
+  &__title {
+    margin-bottom: 1em;
+    @include font-size(14px);
+    font-weight: 600;
+    color: $black-87;
+  }
+}
+</style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
index 1eb5a08432..2b6d9d9e4c 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
@@ -95,6 +95,9 @@ export default {
       ],
     };
   },
+  beforeMount() {
+    this.$emit("set-sidebar-items", this.sidebarItems);
+  },
   methods: {
     onChangeViewMode(value) {
       this.$emit("change-view-mode", value);
diff --git a/frontend/components/text2text/header/Text2TextHeader.vue b/frontend/components/text2text/header/Text2TextHeader.vue
index 2aefca7c96..747f702066 100644
--- a/frontend/components/text2text/header/Text2TextHeader.vue
+++ b/frontend/components/text2text/header/Text2TextHeader.vue
@@ -17,9 +17,7 @@
 
 <template>
   <div class="header__filters">
-    <filters-area :dataset="dataset">
-      <records-counter :total="dataset.results.total"></records-counter>
-    </filters-area>
+    <filters-area :dataset="dataset" />
     <global-actions :dataset="dataset">
       <validate-discard-action
         :dataset="dataset"
diff --git a/frontend/components/text2text/sidebar/Text2TextSidebar.vue b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
index edbe36fd94..2440207540 100644
--- a/frontend/components/text2text/sidebar/Text2TextSidebar.vue
+++ b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
@@ -80,6 +80,9 @@ export default {
       ],
     };
   },
+  beforeMount() {
+    this.$emit("set-sidebar-items", this.sidebarItems);
+  },
   methods: {
     onChangeViewMode(value) {
       this.$emit("change-view-mode", value);
diff --git a/frontend/components/token-classifier/header/TokenClassificationHeader.vue b/frontend/components/token-classifier/header/TokenClassificationHeader.vue
index 1f8eb71395..0be3f573b9 100644
--- a/frontend/components/token-classifier/header/TokenClassificationHeader.vue
+++ b/frontend/components/token-classifier/header/TokenClassificationHeader.vue
@@ -17,9 +17,7 @@
 
 <template>
   <div class="header__filters">
-    <filters-area :dataset="dataset">
-      <records-counter :total="dataset.results.total"></records-counter>
-    </filters-area>
+    <filters-area :dataset="dataset" />
     <entities-header :dataset="dataset" />
     <global-actions :dataset="dataset">
       <validate-discard-action
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
index edbe36fd94..2440207540 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
@@ -80,6 +80,9 @@ export default {
       ],
     };
   },
+  beforeMount() {
+    this.$emit("set-sidebar-items", this.sidebarItems);
+  },
   methods: {
     onChangeViewMode(value) {
       this.$emit("change-view-mode", value);
diff --git a/frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap b/frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap
index 465c1b700c..c383bcbcbe 100644
--- a/frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap
+++ b/frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap
@@ -17,9 +17,8 @@ exports[`BaseTableInfo renders properly 1`] = `
           <div class="table-info__item">
             <!----> <span class="table-info__item__col"><span class="text"><span>recognai</span></span></span>
             <div class="table-info__actions"></div>
-            <base-modal modal-custom="true" prevent-body-scroll="true" modal-class="modal-secondary" modal-visible="true" modal-position="modal-center">
+            <base-modal modal-custom="true" prevent-body-scroll="true" modal-class="modal-secondary" modal-title="Delete confirmation" modal-visible="true">
               <div>
-                <p class="modal__title">Delete confirmation</p>
                 <p>You are about to delete: <strong>undefined</strong>. This action cannot be undone</p>
                 <div class="modal-buttons">
                   <base-button class="primary outline">
@@ -37,9 +36,8 @@ exports[`BaseTableInfo renders properly 1`] = `
           <div class="table-info__item">
             <!----> <span class="table-info__item__col"><span class="text"><span>recognai</span></span></span>
             <div class="table-info__actions"></div>
-            <base-modal modal-custom="true" prevent-body-scroll="true" modal-class="modal-secondary" modal-visible="true" modal-position="modal-center">
+            <base-modal modal-custom="true" prevent-body-scroll="true" modal-class="modal-secondary" modal-title="Delete confirmation" modal-visible="true">
               <div>
-                <p class="modal__title">Delete confirmation</p>
                 <p>You are about to delete: <strong>undefined</strong>. This action cannot be undone</p>
                 <div class="modal-buttons">
                   <base-button class="primary outline">
diff --git a/frontend/specs/components/filters/RecordsCounter.spec.js b/frontend/specs/components/filters/RecordsCounter.spec.js
deleted file mode 100644
index ab18e3bb2c..0000000000
--- a/frontend/specs/components/filters/RecordsCounter.spec.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { mount } from "@vue/test-utils";
-import RecordsCounter from "@/components/commons/header/filters/RecordsCounter";
-
-function mountRecordsCounter() {
-  return mount(RecordsCounter, {
-    propsData: {
-      dataset: {
-        task: "TextClassification",
-        results: {
-          total: 400,
-        },
-        query: {
-          annotated_as: undefined,
-          annotated_by: undefined,
-          from: undefined,
-          limit: undefined,
-          metadata: {},
-          predicted: undefined,
-          predicted_as: ["Alta"],
-          predicted_by: undefined,
-          score: undefined,
-          status: undefined,
-          text: "de",
-        },
-      },
-      showWhenFiltered: true,
-      excludedFilter: ["text"],
-    },
-  });
-}
-
-describe("RecordsCounter", () => {
-  let spy = jest.spyOn(console, "error");
-  afterEach(() => spy.mockReset());
-
-  test("renders properly", () => {
-    const wrapper = mountRecordsCounter();
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/frontend/specs/components/filters/__snapshots__/RecordsCounter.spec.js.snap b/frontend/specs/components/filters/__snapshots__/RecordsCounter.spec.js.snap
deleted file mode 100644
index 59ef58bf3b..0000000000
--- a/frontend/specs/components/filters/__snapshots__/RecordsCounter.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RecordsCounter renders properly 1`] = ``;
diff --git a/frontend/specs/components/text-classification/header/TextClassificationHelpInfo.spec.js b/frontend/specs/components/text-classification/header/TextClassificationHelpInfo.spec.js
new file mode 100644
index 0000000000..a762d507d3
--- /dev/null
+++ b/frontend/specs/components/text-classification/header/TextClassificationHelpInfo.spec.js
@@ -0,0 +1,24 @@
+import { shallowMount } from "@vue/test-utils";
+import ComponentTextClassifierHelpInfo from "@/components/text-classifier/header/TextClassificationHelpInfo";
+
+const props = {
+  visible: true,
+};
+
+let wrapper = null;
+beforeEach(() => {
+  wrapper = shallowMount(ComponentTextClassifierHelpInfo, {
+    propsData: props,
+  });
+});
+afterEach(() => {
+  wrapper.destroy();
+});
+describe("TextClassificationHelpInfo", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/frontend/specs/components/text-classification/header/__snapshots__/TextClassificationHelpInfo.spec.js.snap b/frontend/specs/components/text-classification/header/__snapshots__/TextClassificationHelpInfo.spec.js.snap
new file mode 100644
index 0000000000..7cb94ee4f7
--- /dev/null
+++ b/frontend/specs/components/text-classification/header/__snapshots__/TextClassificationHelpInfo.spec.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextClassificationHelpInfo renders properly 1`] = `
+<lazy-base-modal modal-class="modal-secondary" modal-position="modal-top-right" modal-title="Highlight colors in token attributions" modal-custom="true" modal-visible="true">
+  <div class="help-info__content">
+    <p>
+      Argilla enables you to register token attributions as part of the
+      dataset records. For getting token attributions, you can use methods
+      such as Integrated Gradients or SHAP. These methods try to provide a
+      mechanism to interpret model predictions.
+    </p>
+    <p>The attributions work as follows:</p>
+    <p>
+      [0,1] <strong>Positive attributions</strong> (in blue) reflect those
+      tokens that are making the model predict the specific predicted label.
+    </p>
+    <p>
+      [-1, 0] <strong>Negative attributions</strong> (in red) reflect those
+      tokens that can influence the model to predict a label other than the
+      specific predicted label.
+    </p>
+  </div>
+  <div class="modal-buttons">
+    <base-button href="https://docs.argilla.io/en/latest/tutorials/notebooks/monitoring-textclassification-shaptransformersinterpret-explainability.html" target="_blank" class="primary link">More in docs</base-button>
+    <base-button class="primary">Ok, got it!</base-button>
+  </div>
+</lazy-base-modal>
+`;