diff --git a/frontend/assets/scss/abstract.scss b/frontend/assets/scss/abstract.scss
index a249302240..90037445e9 100644
--- a/frontend/assets/scss/abstract.scss
+++ b/frontend/assets/scss/abstract.scss
@@ -16,10 +16,10 @@
  */
 
 // abstract
-@import 'abstract/fonts/fonts';
 @import 'abstract/functions/functions';
 @import 'abstract/variables/variables';
 @import 'abstract/mixins/mixins';
 @import 'abstract/mixins/media-queries';
 @import 'abstract/mixins/grid-mixins';
 @import 'abstract/placeholders/placeholders';
+@import 'abstract/placeholders/tooltip';
diff --git a/frontend/assets/scss/abstract/fonts/fonts.scss b/frontend/assets/scss/abstract/fonts/fonts.scss
deleted file mode 100644
index 305239b981..0000000000
--- a/frontend/assets/scss/abstract/fonts/fonts.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@font-face {
-    font-family: 'Futura Medium';
-    font-style: normal;
-    font-weight: normal;
-    font-display: auto;
-    src: local('Futura'), url('/fonts/futura-medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Futura Medium Condensed';
-    font-style: normal;
-    font-weight: normal;
-    font-display: auto;
-    src: local('Futura Medium Condensed'), url('/fonts/futura-medium-condensed.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Futura Bold';
-    font-style: normal;
-    font-weight: normal;
-    font-display: auto;
-    src: local('Futura Bold'), url('/fonts/futura-bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Futura Light';
-    font-style: normal;
-    font-weight: normal;
-    font-display: auto;
-    src: local('Futura Light'), url('/fonts/futura-light.woff2') format('woff2');
-}
\ No newline at end of file
diff --git a/frontend/assets/scss/abstract/functions/_functions.scss b/frontend/assets/scss/abstract/functions/_functions.scss
index f2302d86e3..c493625c0d 100644
--- a/frontend/assets/scss/abstract/functions/_functions.scss
+++ b/frontend/assets/scss/abstract/functions/_functions.scss
@@ -37,10 +37,10 @@
 // http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
 
 @function palette($palette, $tone: 'base') {
-    @if map-has-key($palettes-neutral, $palette) {
-      @return map-get(map-get($palettes-neutral, $palette), $tone);
+    @if map-has-key($palettes, $palette) {
+      @return map-get(map-get($palettes, $palette), $tone);
     }
 
-    @warn "Unknown `#{$palette}` in $palettes-neutral.";
+    @warn "Unknown `#{$palette}` in $palettes.";
     @return null;
 }
diff --git a/frontend/assets/scss/abstract/placeholders/_placeholders.scss b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
index 56f6d0407e..60b15fbfa3 100644
--- a/frontend/assets/scss/abstract/placeholders/_placeholders.scss
+++ b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
@@ -35,12 +35,12 @@
     background: linear-gradient( to bottom, $primary-color 0%, $primary-lighten-color 100%);
 }
 
-// Linear gradient using $secondary-color
+// Linear gradient using palette(blue, 300)
 %secondary-color-gradient {
-    background: $secondary-color;
-    background: -moz-linear-gradient( top, $secondary-color 0%, $secondary-darken-color 55%, $secondary-color 100%);
-    background: -webkit-linear-gradient( top, $secondary-color 0%, $secondary-darken-color 55%, $secondary-color 100%);
-    background: linear-gradient( to bottom, $secondary-color 0%, $secondary-darken-color 55%, $secondary-color 100%);
+    background: palette(blue, 300);
+    background: -moz-linear-gradient( top, palette(blue, 300) 0%, $secondary-darken-color 55%, palette(blue, 300) 100%);
+    background: -webkit-linear-gradient( top, palette(blue, 300) 0%, $secondary-darken-color 55%, palette(blue, 300) 100%);
+    background: linear-gradient( to bottom, palette(blue, 300) 0%, $secondary-darken-color 55%, palette(blue, 300) 100%);
 }
 
 // Align center block element
@@ -92,47 +92,6 @@
   }
 }
 
-// buttons
-%button {
-  position: relative;
-  min-width: $button-width;
-  min-height: $button-height;
-  padding: 0 1.2em 0 1.2em;
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  user-select: none;
-  cursor: pointer;
-  outline: 0;
-  background: none;
-  border: 0;
-  border-radius: $button-radius;
-  font-family: $sff;
-  @include font-size(13px);
-  font-style: inherit;
-  font-variant: inherit;
-  letter-spacing: inherit;
-  font-weight: 500;
-  line-height: $button-height;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  margin-bottom: 10px;
-  transition: all 0.4s $cb-fast;
-  &:focus {
-    outline: 0;
-  }
-  &::-moz-focus-inner {
-      border: 0;
-  }
-  &[disabled] {
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-  }
-}
-
 %clear {
   @include font-size(13px);
   background: none;
@@ -149,78 +108,6 @@
       background: none;
   }
 }
-
-// tooltip
-%tooltip {
-  box-shadow: $shadow-100;
-  padding: 0.2em;
-  color: $font-dark-color;
-  background: $lighter-color;
-  font-family: $ff;
-  @include font-size(13px);
-  border: 1px solid $line-light-color;
-  position: absolute;
-  margin: auto;
-  transform: translateX(50%);
-  max-width: 266px;
-  overflow-wrap: break-word;
-  pointer-events: none;
-  z-index: 2;
-  white-space: nowrap;
-}
-%tooltip--top {
-  &:after {
-    top: -35px;
-    right: 50%;
-    left: auto;
-  }
-}
-%tooltip--left {
-  &:after {
-    right: calc(100% + 5px);
-    top: auto;
-    transform: none !important;
-  }
-}
-%activetooltip {
-  &:after {
-    content: attr(data-title);
-    @extend %tooltip;
-  }
-}
-%hastooltip {
-  &:after {
-    content: attr(data-title);
-    @extend %tooltip;
-    opacity: 0;
-    z-index: -1;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-  &:before {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-  &:hover{
-    &:after {
-      width: auto;
-      height: auto;
-      opacity: 1;
-      transition: opacity 0.1s ease 0.2s;
-      z-index: 2;
-    }
-    &:before {
-      opacity: 1;
-      transition: opacity 0.1s ease 0.2s;
-    }
-  }
-}
 %hide-scrollbar {
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none;  /* IE and Edge */
diff --git a/frontend/assets/scss/abstract/placeholders/_tooltip.scss b/frontend/assets/scss/abstract/placeholders/_tooltip.scss
new file mode 100644
index 0000000000..700ef08576
--- /dev/null
+++ b/frontend/assets/scss/abstract/placeholders/_tooltip.scss
@@ -0,0 +1,105 @@
+// tooltip
+$tooltip-bg: palette(grey, 100);
+$tooltip-color: palette(white);
+$tooltip-font-size: 14px;
+$tooltip-triangle-size: 7px;
+$tooltip-border-radius: $border-radius-s;
+
+%tooltip {
+  position: absolute;
+  margin: auto;
+  max-width: 266px;
+  overflow-wrap: break-word;
+  pointer-events: none;
+  z-index: 2;
+  white-space: nowrap;
+  padding: $base-space $base-space*2;
+  transform: none;
+  background: $tooltip-bg;
+  color: $tooltip-color;
+  border-radius: $tooltip-border-radius;
+  @include font-size($tooltip-font-size);
+  font-family: $ff;
+  font-weight: 600;
+}
+%has-tooltip--left {
+  @extend %has-tooltip;
+  &:after {
+    top: 50%;
+    transform: translateY(-50%);
+    right: calc(100% + 10px);
+  }
+  &:before {
+    right: calc(100% + $tooltip-triangle-size/2);
+    top: 50%;
+    transform: translateY(-50%);
+    @include triangle(right, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg);
+  }
+}
+%has-tooltip--bottom {
+  @extend %has-tooltip;
+  &:after {
+    top: calc(100% + 20px);
+    right: 50%;
+    transform: translateX(50%);
+  }
+  &:before {
+    right: calc(50% - $tooltip-triangle-size/2);
+    top: $tooltip-triangle-size*2;
+    @include triangle(top, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg);
+  }
+}
+%has-tooltip--top {
+  @extend %has-tooltip;
+  &:after {
+    bottom: calc(100% + 10px);
+    right: 50%;
+    transform: translateX(50%);
+  }
+  &:before {
+    right: calc(50% - $tooltip-triangle-size);
+    top: -10px;
+    @include triangle(bottom, $tooltip-triangle-size, $tooltip-triangle-size, $tooltip-bg);
+  }
+}
+%tooltip-large-text {
+  &:after {
+    min-width: 216px;
+    white-space: break-spaces;
+    text-align: left;
+    line-height: 1.4em;
+  }
+}
+%has-tooltip {
+  &:after {
+    content: attr(data-title);
+    @extend %tooltip;
+    opacity: 0;
+    z-index: -1;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:hover{
+    &:after {
+      width: auto;
+      height: auto;
+      opacity: 1;
+      transition: opacity 0.1s ease 0.2s;
+      z-index: 2;
+    }
+    &:before {
+      opacity: 1;
+      transition: opacity 0.1s ease 0.2s;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss
index edb7b93895..834d447e7d 100644
--- a/frontend/assets/scss/abstract/variables/_variables.scss
+++ b/frontend/assets/scss/abstract/variables/_variables.scss
@@ -15,70 +15,80 @@
  * limitations under the License.
  */
 
+
 // Color map
 //-----------
-$palettes-neutral: ( white: ( base: #ffffff, ), black: ( base: #000000, ), grey: ( highlighted: #eff0f2, verylight: #d8d8d8, lines: #ebebeb, bg:#f5f5f5, light: #F2F3F7, smooth: #E9EAED, base: #9b9b9b, medium: #686a6d, dark: #4a4a4a, ), red: ( base: #ff1e5e, light: #ef6b7a, dark: #a70f3a, ), blue: ( verylight: #f5fcff, light: #F4F8FF, smooth: #E9F1FD, base: #6cc6f1, 200: #009fda, 300: #334e70, 400: #00224c, ), pink: ( base: #f2067a), yellow: ( base: #fff8a2, light: #949494, dark: #1d1d1d, ), orange: ( base: #F48E5F, light: #FFB593 ), green: ( base: #60A018, border: #8acbcd, extra-light: #fafcfc, light: #f5f9f9, highlight: #60a019, highlight-light: #f2fad5, medium: #64b09f, dark: #234240, ), purple: ( verylight: #F0E7FF, light: #9f7ae2, base: #6a29e2, medium: #49008c, normal: #8777d9, standard: #6c658f, dark: #1d1d1d, disabled: #a956f5, 100: #bab2e5, 200: #5e51a5, 300: #4a407f, ), garnet: ( base: #7c3c4e, ), lile: ( dark: #8777d9, base: #e8cfea, ), );
-$transparent: rgba(palette(white), 0);
+$palettes: (
+  white: (
+    base: #ffffff,
+  ),
+  black: (
+    base: #000000,
+  ),
+  grey: (
+    100: #333346,
+    200: #4a4a4a,
+    300: #686a6d,
+    600: #E9EAED,
+    700: #F2F3F7,
+    800: #f5f5f5,
+    900: #fcfcfc,
+  ),
+  blue: (
+    100: #545D84,
+    200: #4C4EA3,
+    300: #353664,
+    500: #0508D9,
+    600: #B6B9FF,
+    700: #d6d6ff,
+  ),
+  purple: (
+    base: #a1a2cc,
+  ),
+  pink: (
+    base: #f2067a,
+  ),
+  yellow: (
+    base: #fff8a2,
+    light: #949494,
+    dark: #1d1d1d,
+  ),
+  orange: (
+    base: #bb720a,
+  ),
+  green: (
+    base: #60a018,
+  ),
+);
+
 // Colours
 //-----------
-$primary-color: #0D26C5;
+$primary-color: palette(blue, 500);
 $primary-lighten-color: lighten($primary-color, 10%);
 $primary-darken-color: darken($primary-color, 10%);
-$secondary-color: #4C4EA3;
-$secondary-lighter-color: palette(purple, verylight);
-$secondary-lighten-color: lighten($secondary-color, 10%);
-$secondary-darken-color: darken($secondary-color, 10%);
-$tertiary-color: palette(green);
-$tertiary-lighten-color: lighten($tertiary-color, 44%);
-$tertiary-darken-color: darken($tertiary-color, 10%);
-$lighter-color: palette(white);
-$neutral-color: palette(grey, medium);
-$darker-color: palette(grey, dark);
+$secondary-color: palette(grey, 700);
+$secondary-lighten-color: lighten(palette(grey, 700), 5%);
+$secondary-darken-color: darken(palette(grey, 700), 5%);
 $highlight: palette(pink);
+$bg: palette(grey, 700);
+
 // States
 //-----------
-$error: palette(red);
+$error: palette(pink);
 $warning: palette(orange);
 $success: palette(green);
-$info: palette(grey, smooth);
-$callout: #f1f0f0;
-$bg: palette(grey, light);
+$info: palette(grey, 600);
 
-// Lines
-//-----------
-$line-medium-color: palette(grey, medium);
-$line-smooth-color: palette(grey, smooth);
-$line-light-color: palette(grey, light);
-$line-lighter-color: palette(grey, lighter);
-// Metrics
-//-----------
-$precision: #e5cdee;
-$recall: #c0d2e0;
-$f1: #89c4f1;
 // Fonts
 //-----------
-$ff: 'Source Sans Pro',
-'Helvetica',
-'Arial',
-sans-serif;
-$sff: 'Outfit',
-'Helvetica',
-'Arial',
-sans-serif;
-$tff: 'Bitter',
-'Helvetica',
-'Arial',
-sans-serif;
-$ff-semibold: 700;
-$ff-bold: 900;
-$ff-light: 300;
-$ff-thin: 100;
+$ff: "Source Sans Pro", "Helvetica", "Arial", sans-serif;
+$sff: "Outfit", "Helvetica", "Arial", sans-serif;
 $base-font-size: 14px;
 $base-line-height: 1.4em;
-$font-dark-color: palette(grey, dark);
-$font-medium-color: palette(grey, medium);
-$font-secondary: #4C4EA3;
-$font-secondary-dark: #353664;
+$font-dark: palette(grey, 100);
+$font-medium: palette(grey, 300);
+$font-secondary-medium-dark: palette(blue, 300);
+$font-secondary-medium: palette(blue, 200);
 
 // Easing
 //-----------
@@ -89,68 +99,53 @@ $font-secondary-dark: #353664;
 // $cb-fast -> ease-in
 // $cb-normal -> ease-in forzado
 // $cb-slow -> ease-out
-$cb-fast: cubic-bezier(0,
-0,
-0.24,
-0.9);
-$cb-normal: cubic-bezier(0.02,
-0.42,
-0.01,
-0.51);
-$cb-slow: cubic-bezier(0.59,
-0,
-0.68,
-0.69);
+
+$cb-fast: cubic-bezier(0, 0, 0.24, 0.9);
+$cb-normal: cubic-bezier(0.02, 0.42, 0.01, 0.51);
+$cb-slow: cubic-bezier(0.59, 0, 0.68, 0.69);
+
 // Grid
 //-----------
 $maxwidth: 980px;
-// Utilities
+
+// Spaces
 //-----------
+$base-space: 8px;
+$base-space-between-records: $base-space;
+
+// Border radius
+//---------------
+$border-radius-s: 5px;
 $border-radius: 5px;
 $border-radius-m: 10px;
-$radius: 0.5em;
+
 // Shadows
 //-----------
-$shadow: 0 8px 20px 0 rgba(93,105,151,0.30);
-$shadow-light: 0 1px 4px 1px rgba(222,
-222,
-222,
-0.5);
+$shadow: 0 8px 20px 0 rgba(93, 105, 151, 0.3);
 $shadow-100: 1px 2px 3px 0px rgba(0, 0, 0, 0.15);
 $shadow-200: 1px 2px 5px 2px rgba(0, 0, 0, 0.15);
+$shadow-300: 0 1px 2px 0 rgba(185, 185, 185, 0.5);
+
 // Input size
 //-----------
 $input-size: 40px;
+
 // Buttons
 //-----------
-$button-width: 62px;
 $button-height: 30px;
-$button-radius: 3px;
-$button-fab-size: 56px;
-$button-fab-size-mini: 40px;
-$button-fab-space: 24px;
-$button-dense-height: 32px;
-$button-icon-size: 40px;
+$button-radius: 6px;
+
 // Transitions
 //-----------
 $swift-ease-out-duration: 0.3s !default;
-$swift-ease-out-timing-function: cubic-bezier(0.25,
-0.8,
-0.25,
-1) !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
 $swift-ease-in-duration: 0.3s !default;
-$swift-ease-in-timing-function: cubic-bezier(0.55,
-0,
-0.55,
-0.2) !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
 $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
 $swift-ease-in-out-duration: 0.5s !default;
-$swift-ease-in-out-timing-function: cubic-bezier(0.35,
-0,
-0.25,
-1) !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration;
 $swift-linear-duration: 0.15s !default;
 $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
diff --git a/frontend/assets/scss/base/base.scss b/frontend/assets/scss/base/base.scss
index 6275bab4f4..1a7a793bac 100644
--- a/frontend/assets/scss/base/base.scss
+++ b/frontend/assets/scss/base/base.scss
@@ -38,7 +38,7 @@ body {
     -ms-text-size-adjust: 100%;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    color: $font-dark-color;
+    color: palette(grey, 200);
     font-family: $ff;
     font-size: $base-font-size;
     line-height: $base-line-height;
@@ -53,7 +53,7 @@ body {
 
 a,
 button {
-    color: $font-dark-color;
+    color: $font-dark;
 }
 
 audio,
diff --git a/frontend/components/core/ReActionTooltip.vue b/frontend/components/base/BaseActionTooltip.vue
similarity index 90%
rename from frontend/components/core/ReActionTooltip.vue
rename to frontend/components/base/BaseActionTooltip.vue
index 8403cfaa1d..76cfb5d158 100644
--- a/frontend/components/core/ReActionTooltip.vue
+++ b/frontend/components/base/BaseActionTooltip.vue
@@ -34,10 +34,10 @@ export default {
 <style scoped lang="scss">
 .tooltip {
   position: absolute;
-  background: palette(grey, dark);
+  background: $font-dark;
   display: inline-block;
-  border-radius: 3px;
-  color: $lighter-color;
+  border-radius: $border-radius-s;
+  color: palette(white);
   @include font-size(12px);
   box-shadow: 0 1px 4px 1px rgba(222, 222, 222, 0.5);
   padding: 0.1em 0.5em;
@@ -47,7 +47,7 @@ export default {
   &__container {
     position: relative;
     &.active {
-      ::v-deep svg {
+      :deep(svg) {
         fill: $primary-color !important;
         .breadcrumbs &,
         .code & {
diff --git a/frontend/components/core/ReBreadcrumbs.vue b/frontend/components/base/BaseBreadcrumbs.vue
similarity index 92%
rename from frontend/components/core/ReBreadcrumbs.vue
rename to frontend/components/base/BaseBreadcrumbs.vue
index ed05cd7197..040b907aa1 100644
--- a/frontend/components/core/ReBreadcrumbs.vue
+++ b/frontend/components/base/BaseBreadcrumbs.vue
@@ -19,12 +19,12 @@
   <div class="breadcrumbs">
     <ul>
       <li v-for="breadcrumb in filteredBreadcrumbs" :key="breadcrumb.name">
-        <NuxtLink
+        <nuxt-link
           class="breadcrumbs__item"
           v-if="breadcrumb.link"
           :to="breadcrumb.link"
           >{{ breadcrumb.name }}
-        </NuxtLink>
+        </nuxt-link>
         <span
           class="breadcrumbs__item --action"
           v-else
@@ -33,7 +33,7 @@
         >
       </li>
     </ul>
-    <re-action-tooltip tooltip="Copied">
+    <base-action-tooltip tooltip="Copied">
       <a
         v-if="copyButton"
         class="breadcrumbs__copy"
@@ -46,7 +46,7 @@
       >
         <svgicon name="copy" width="16" height="16" />
       </a>
-    </re-action-tooltip>
+    </base-action-tooltip>
   </div>
 </template>
 
@@ -102,15 +102,15 @@ export default {
   &__copy {
     &:hover {
       .svg-icon {
-        fill: darken($lighter-color, 10%);
+        fill: darken(palette(white), 10%);
       }
     }
     .svg-icon {
-      fill: $lighter-color;
+      fill: palette(white);
     }
   }
   &__item {
-    color: $lighter-color;
+    color: palette(white);
     text-decoration: none;
     outline: none;
     &.--action {
diff --git a/frontend/components/base/BaseButton.vue b/frontend/components/base/BaseButton.vue
new file mode 100644
index 0000000000..a626a674f2
--- /dev/null
+++ b/frontend/components/base/BaseButton.vue
@@ -0,0 +1,252 @@
+<!--
+  - 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>
+  <a
+    v-if="href"
+    :class="buttonClasses"
+    :href="href"
+    :loading="loading"
+    :disabled="disabled"
+    :target="target"
+    :rel="newRel"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </a>
+
+  <nuxt-link
+    v-else-if="to"
+    :class="buttonClasses"
+    :to="to"
+    :loading="loading"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </nuxt-link>
+
+  <button
+    v-else
+    :class="buttonClasses"
+    tabindex="0"
+    :loading="loading"
+    :type="type"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: "ReButton",
+  props: {
+    href: String,
+    target: String,
+    rel: String,
+    type: {
+      type: String,
+      default: "button",
+    },
+    loading: Boolean,
+    disabled: Boolean,
+    centered: Boolean,
+    to: String,
+  },
+  computed: {
+    newRel() {
+      if (this.target === "_blank") {
+        return this.rel || "noopener";
+      }
+
+      return this.rel;
+    },
+    buttonClasses() {
+      return {
+        button: true,
+        loading: this.loading,
+        centered: this.centered,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// buttons
+%button {
+  position: relative;
+  min-width: auto;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  cursor: pointer;
+  outline: 0;
+  background: none;
+  border: 0;
+  border-radius: $button-radius;
+  font-family: $sff;
+  font-style: inherit;
+  font-variant: inherit;
+  letter-spacing: inherit;
+  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;
+  &:focus {
+    outline: 0;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+.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;
+  color: palette(white);
+  .svg-icon {
+    fill: palette(white);
+  }
+  &:hover,
+  &:active,
+  &.active {
+    background-color: $primary-darken-color;
+  }
+  &.outline {
+    background: none;
+    border: 1px solid $primary-color;
+    color: $primary-color;
+    .svg-icon {
+      fill: $primary-color;
+    }
+    &:hover,
+    &:active,
+    &.active {
+      color: $primary-darken-color;
+      border-color: $primary-darken-color;
+    }
+  }
+  &.clear {
+    background: transparent;
+    color: $font-dark;
+    &:hover,
+    &:active,
+    &.active {
+      background: palette(grey, 700);
+    }
+  }
+}
+
+.secondary {
+  background-color: palette(grey, 700);
+  color: palette(blue, 200);
+  .svg-icon {
+    fill: palette(blue, 200);
+  }
+  &:hover,
+  &:active,
+  &.active {
+    background-color: $secondary-darken-color;
+  }
+  &.outline {
+    background: none;
+    border: 1px solid palette(grey, 600);
+  }
+  &.clear {
+    background: transparent;
+    &:hover,
+    &:active,
+    &.active {
+      background: palette(grey, 700);
+    }
+  }
+}
+
+.tertiary {
+  background-color: none;
+  color: $font-medium;
+  .svg-icon {
+    fill: $font-medium;
+  }
+  &:hover,
+  &:active,
+  &.active {
+    background-color: $font-dark;
+  }
+  &.outline {
+    background: none;
+    border: 1px solid $font-medium;
+    &:hover,
+    &:active,
+    &.active {
+      border-color: $font-dark;
+      color: $font-dark;
+    }
+  }
+}
+.quaternary {
+  background-color: palette(white);
+  color: $font-medium;
+  .svg-icon {
+    fill: $font-medium;
+  }
+  &:hover,
+  &:active,
+  &.active {
+    background-color: $font-dark;
+  }
+  &.outline {
+    background: none;
+    border: 1px solid palette(white);
+    color: palette(white);
+  }
+}
+.link {
+  padding: 0;
+  color: $primary-color;
+  font-weight: 400;
+}
+</style>
diff --git a/frontend/components/core/ReCheckbox.vue b/frontend/components/base/BaseCheckbox.vue
similarity index 93%
rename from frontend/components/core/ReCheckbox.vue
rename to frontend/components/base/BaseCheckbox.vue
index 1d8d3153c4..b32b10a2ba 100644
--- a/frontend/components/core/ReCheckbox.vue
+++ b/frontend/components/base/BaseCheckbox.vue
@@ -104,11 +104,10 @@ export default {
 <style lang="scss" scoped>
 $checkbox-size: 20px;
 $checkbox-touch-size: 20px;
-$checkbox-color: $line-smooth-color;
+$checkbox-color: palette(grey, 600);
 $checkbox-color-dark: $primary-color;
 .re-checkbox {
   width: auto;
-  margin: 16px 8px 16px 0;
   display: inline-flex;
   position: relative;
   border-radius: 1px;
@@ -134,7 +133,7 @@ $checkbox-color-dark: $primary-color;
     margin-right: 0;
     margin-left: auto;
     .svg-icon {
-      fill: $lighter-color;
+      fill: palette(white);
       transform: scale(0);
       transition: all 0.2s ease-in-out;
       display: block;
@@ -151,7 +150,7 @@ $checkbox-color-dark: $primary-color;
   }
   .checkbox-label {
     line-height: $checkbox-size;
-    margin-right: 0.5em;
+    margin-right: $base-space;
     word-break: break-word;
     hyphens: auto;
   }
@@ -170,16 +169,6 @@ $checkbox-color-dark: $primary-color;
   }
 }
 
-.checkbox-label {
-  .dropdown--filter & {
-    height: auto;
-    white-space: normal;
-    text-transform: none;
-    word-break: break-word;
-    hyphens: auto;
-  }
-}
-
 .re-checkbox.checked {
   .checkbox-container {
     background: $primary-color;
diff --git a/frontend/components/core/ReCode.vue b/frontend/components/base/BaseCode.vue
similarity index 90%
rename from frontend/components/core/ReCode.vue
rename to frontend/components/base/BaseCode.vue
index 9f82a1b76e..648ae9c5b1 100644
--- a/frontend/components/core/ReCode.vue
+++ b/frontend/components/base/BaseCode.vue
@@ -3,11 +3,11 @@
     <pre>
       <code v-highlight class="python">{{code}}</code>
     </pre>
-    <re-action-tooltip class="code__button" tooltip="Copied">
+    <base-action-tooltip class="code__button" tooltip="Copied">
       <a class="breadcrumbs__copy" href="#" @click.prevent="copy(code)">
         <svgicon name="copy" width="16" height="16" />
       </a>
-    </re-action-tooltip>
+    </base-action-tooltip>
   </div>
 </template>
 
@@ -36,7 +36,7 @@ export default {
     bottom: 4em;
     right: 1em;
     svg {
-      fill: $lighter-color;
+      fill: palette(white);
     }
   }
 }
@@ -51,7 +51,7 @@ export default {
   font-weight: 600;
   @include font-size(12px);
 }
-::v-deep {
+:deep() {
   .hljs-keyword,
   .hljs-selector-tag,
   .hljs-literal,
diff --git a/frontend/components/core/reInputContainer/ReInput.vue b/frontend/components/base/BaseInputContainer/BaseInput.vue
similarity index 96%
rename from frontend/components/core/reInputContainer/ReInput.vue
rename to frontend/components/base/BaseInputContainer/BaseInput.vue
index a82cd3311f..4951b31d94 100644
--- a/frontend/components/core/reInputContainer/ReInput.vue
+++ b/frontend/components/base/BaseInputContainer/BaseInput.vue
@@ -36,7 +36,7 @@
 
 <script>
 import common from "./common";
-import getClosestVueParent from "~/components/core/utils/getClosestVueParent";
+import getClosestVueParent from "~/components/base/utils/getClosestVueParent";
 
 export default {
   mixins: [common],
diff --git a/frontend/components/core/reInputContainer/ReInputContainer.vue b/frontend/components/base/BaseInputContainer/BaseInputContainer.vue
similarity index 89%
rename from frontend/components/core/reInputContainer/ReInputContainer.vue
rename to frontend/components/base/BaseInputContainer/BaseInputContainer.vue
index 945affd596..c28c2d0803 100644
--- a/frontend/components/core/reInputContainer/ReInputContainer.vue
+++ b/frontend/components/base/BaseInputContainer/BaseInputContainer.vue
@@ -22,20 +22,11 @@
     <span v-if="enableCounter" class="re-count"
       >{{ inputLength }} / {{ counterLength }}</span
     >
-
-    <button
-      v-if="reClearable && hasValue"
-      tabindex="-1"
-      class="button-icon"
-      @click="clearInput"
-    >
-      <re-icon>clear</re-icon>
-    </button>
   </div>
 </template>
 
 <script>
-import isArray from "~/components/core/utils/isArray";
+import isArray from "~/components/base/utils/isArray";
 
 export default {
   props: {
@@ -111,7 +102,7 @@ export default {
 
 <style lang="scss" scoped>
 input:-webkit-autofill {
-  box-shadow: 0 0 0px 1000px $lighter-color inset;
+  box-shadow: 0 0 0px 1000px palette(white) inset;
 }
 
 .re-input-container {
@@ -126,10 +117,10 @@ input:-webkit-autofill {
     background: none;
     transition: $swift-ease-out;
     transition-property: font-size;
-    color: $font-secondary;
+    color: $font-secondary-medium;
     line-height: normal;
     @include input-placeholder {
-      color: $font-secondary;
+      color: $font-secondary-medium;
       font-family: $sff;
       font-weight: 500;
     }
diff --git a/frontend/components/base/BaseInputContainer/Readme.md b/frontend/components/base/BaseInputContainer/Readme.md
new file mode 100644
index 0000000000..93110b1992
--- /dev/null
+++ b/frontend/components/base/BaseInputContainer/Readme.md
@@ -0,0 +1,14 @@
+```
+        <base-input-container class='re-input-invalid'>
+          <label>Email</label>
+          <base-input required></base-input>
+          <span class="re-error">error text</span>
+        </base-input-container>
+```
+```
+    <base-input-container>
+        <label>New Password</label>
+        <base-input required name="password" type="password"></base-input>
+        <span class="re-error">error</span>
+    </base-input-container>
+```
diff --git a/frontend/components/core/reInputContainer/common.js b/frontend/components/base/BaseInputContainer/common.js
similarity index 100%
rename from frontend/components/core/reInputContainer/common.js
rename to frontend/components/base/BaseInputContainer/common.js
diff --git a/frontend/components/core/ReLoading.vue b/frontend/components/base/BaseLoading.vue
similarity index 98%
rename from frontend/components/core/ReLoading.vue
rename to frontend/components/base/BaseLoading.vue
index 608b4a60f3..220755d049 100644
--- a/frontend/components/core/ReLoading.vue
+++ b/frontend/components/base/BaseLoading.vue
@@ -86,12 +86,6 @@ export default {
   right: 0;
   left: 0;
   z-index: 9999;
-  .icon {
-    display: block;
-    margin: auto;
-    z-index: 1;
-    fill: $secondary-lighter-color !important;
-  }
 }
 
 .loading--content {
@@ -104,9 +98,6 @@ export default {
   &.spinner:after {
     background-color: #9ce4e1;
   }
-  .icon {
-    fill: $secondary-color;
-  }
 }
 
 @keyframes sk-bounce {
diff --git a/frontend/components/core/ReModal.vue b/frontend/components/base/BaseModal.vue
similarity index 93%
rename from frontend/components/core/ReModal.vue
rename to frontend/components/base/BaseModal.vue
index 94647e0c7c..34d05879e5 100644
--- a/frontend/components/core/ReModal.vue
+++ b/frontend/components/base/BaseModal.vue
@@ -133,7 +133,7 @@ export default {
   max-width: 460px;
   margin: 0px auto;
   padding: 1.5em;
-  background-color: $lighter-color;
+  background-color: palette(white);
   border-radius: $border-radius;
   box-shadow: $shadow;
   transition: $swift-ease-in-out;
@@ -145,11 +145,11 @@ export default {
   box-shadow: $shadow;
   border-radius: $border-radius;
   max-width: 520px;
-  ::v-deep .modal__title {
+  :deep(.modal__title) {
     font-weight: normal;
     @include font-size(16px);
   }
-  ::v-deep .modal__text {
+  :deep(.modal__text) {
     margin-bottom: 2em;
   }
 }
@@ -157,24 +157,24 @@ export default {
   box-shadow: $shadow;
   border-radius: $border-radius;
   max-width: 400px;
-  ::v-deep .modal__text {
+  :deep(.modal__text) {
     margin-bottom: 2em;
   }
 }
 
-::v-deep .modal-buttons {
+:deep(.modal-buttons) {
   display: flex;
-  .re-button {
+  .button {
     width: 100%;
-    margin-bottom: 0;
+    justify-content: center;
     &:last-child {
-      margin-left: 1em;
+      margin-left: $base-space * 2;
     }
   }
 }
-::v-deep .modal__title {
+:deep(.modal__title) {
   @include font-size(14px);
-  color: $font-dark-color;
+  color: $font-dark;
   font-weight: 600;
   margin-top: 0;
   margin-right: 2em;
@@ -215,8 +215,8 @@ export default {
 
 // .modal-close {
 //   border: 0;
-//   background: $lighter-color;
-//   color: $font-medium-color;
+//   background: palette(white);
+//   color: $font-medium;
 //   position: absolute;
 //   top: 0.5em;
 //   right: 0.5em;
diff --git a/frontend/components/core/RePagination.vue b/frontend/components/base/BasePagination.vue
similarity index 94%
rename from frontend/components/core/RePagination.vue
rename to frontend/components/base/BasePagination.vue
index 7e4026ae99..6104d0ea37 100644
--- a/frontend/components/core/RePagination.vue
+++ b/frontend/components/base/BasePagination.vue
@@ -224,8 +224,8 @@ $pagination-size: 30px;
     right: $sidebarMenuWidth;
     display: flex;
     align-items: center;
-    background: palette(grey, light);
-    border-top: 1px solid palette(grey, smooth);
+    background: palette(grey, 700);
+    border-top: 1px solid palette(grey, 600);
     min-height: 63px;
     z-index: 99;
     padding-right: 56px;
@@ -239,7 +239,7 @@ $pagination-size: 30px;
   }
   &__arrow {
     transition: all 0.3s ease-in-out;
-    color: $font-secondary;
+    color: $font-secondary-medium;
     background: transparent;
     text-decoration: none;
     display: flex;
@@ -255,7 +255,7 @@ $pagination-size: 30px;
     }
     &:hover {
       transition: all 0.3s ease-in-out;
-      background: palette(grey, smooth);
+      background: palette(grey, 600);
     }
     &--next {
       margin-left: 1em;
@@ -282,7 +282,7 @@ $pagination-size: 30px;
     @include font-size(14px);
     #{$self}__number {
       transition: all 0.3s ease-in-out;
-      color: $font-secondary;
+      color: $font-secondary-medium;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -295,13 +295,13 @@ $pagination-size: 30px;
       padding: 5px;
       &:hover {
         transition: all 0.3s ease-in-out;
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
       }
       &.is-current {
         pointer-events: none;
-        color: $font-secondary-dark;
+        color: $font-secondary-medium-dark;
         font-weight: 700;
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
       }
     }
   }
@@ -313,19 +313,19 @@ $pagination-size: 30px;
     &__content {
       position: relative;
       & > a {
-        color: $secondary-color;
-        border: 1px solid palette(grey, smooth);
+        color: palette(blue, 300);
+        border: 1px solid palette(grey, 600);
       }
     }
     &__title {
       display: block;
       margin-bottom: 0.5em;
-      color: $font-secondary-dark;
+      color: $font-secondary-medium-dark;
       margin-right: 1em;
     }
     ul {
       list-style: none;
-      background: $lighter-color;
+      background: palette(white);
       padding: 0;
       display: block;
       position: absolute;
@@ -346,7 +346,7 @@ $pagination-size: 30px;
       }
       a {
         display: block;
-        color: $font-secondary-dark;
+        color: $font-secondary-medium-dark;
         border-radius: 1px;
         margin: 2px;
         &:hover {
@@ -358,7 +358,7 @@ $pagination-size: 30px;
       display: block;
       outline: none;
       text-decoration: none;
-      background: $lighter-color;
+      background: palette(white);
       padding: 0.5em 1em;
       border-radius: $border-radius;
       .svg-icon {
@@ -371,7 +371,7 @@ $pagination-size: 30px;
   &__info {
     margin-left: auto;
     margin-right: 0;
-    color: $font-secondary-dark;
+    color: $font-secondary-medium-dark;
   }
 }
 </style>
diff --git a/frontend/components/core/ReProgress.vue b/frontend/components/base/BaseProgress.vue
similarity index 95%
rename from frontend/components/core/ReProgress.vue
rename to frontend/components/base/BaseProgress.vue
index 8af41825aa..bb5b7bc83b 100644
--- a/frontend/components/core/ReProgress.vue
+++ b/frontend/components/base/BaseProgress.vue
@@ -125,10 +125,10 @@ export default {
     padding: 0.5em 1em;
     top: -5px;
     transform: none;
-    background: $secondary-color;
+    background: palette(blue, 200);
     color: white;
     border: none;
-    border-radius: 3px;
+    border-radius: $border-radius-s;
     @include font-size(14px);
     font-weight: 600;
     position: absolute;
@@ -139,7 +139,7 @@ export default {
     transition: opacity 0.5s linear 0.3s;
     border-color: lime !important;
     .triangle {
-      @include triangle(left, 6px, 6px, $secondary-color);
+      @include triangle(left, 6px, 6px, palette(blue, 200));
       position: absolute;
       left: -6px;
       top: calc(50% - 6px);
@@ -149,7 +149,7 @@ export default {
     @extend .re-progress;
     height: 2px;
     .re-progress-track {
-      background: $line-medium-color;
+      background: palette(grey, 300);
     }
   }
   &--multiple {
@@ -165,7 +165,7 @@ export default {
   left: 0;
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
-  background: $secondary-color;
+  background: palette(blue, 200);
   transition: width 1s linear, left 1s linear;
   &:last-of-type {
     border-bottom-left-radius: 0;
diff --git a/frontend/components/core/ReRange.vue b/frontend/components/base/BaseRange.vue
similarity index 98%
rename from frontend/components/core/ReRange.vue
rename to frontend/components/base/BaseRange.vue
index 20dcee11b1..c9701c800c 100644
--- a/frontend/components/core/ReRange.vue
+++ b/frontend/components/base/BaseRange.vue
@@ -1163,7 +1163,7 @@ export default {
   padding: 0 !important;
   &.vue-slider-disabled {
     .vue-slider-dot {
-      background: $line-light-color;
+      background: palette(grey, 700);
       border: 0;
       box-shadow: none;
     }
@@ -1187,8 +1187,8 @@ export default {
   position: relative;
   display: block;
   border-radius: 15px;
-  background-color: $line-smooth-color;
-  border-radius: 3px;
+  background-color: palette(grey, 600);
+  border-radius: $border-radius-s;
 }
 
 .vue-slider-component .vue-slider::after {
@@ -1247,7 +1247,7 @@ export default {
 .vue-slider-component .vue-slider-dot {
   position: absolute;
   border-radius: 50%;
-  border: 1px solid $secondary-color;
+  border: 1px solid palette(blue, 300);
   background-color: #fff;
   transition: all 0s;
   will-change: transform;
@@ -1310,8 +1310,8 @@ export default {
 
 .vue-slider-component .vue-slider-piecewise-item {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  width: $base-space;
+  height: $base-space;
 }
 
 .vue-slider-component .vue-slider-piecewise-dot {
@@ -1371,37 +1371,37 @@ export default {
 
 .vue-slider {
   .filter & {
-    background: $line-smooth-color;
-    border-radius: 3px;
+    background: palette(grey, 600);
+    border-radius: $border-radius-s;
     margin-top: -12px;
   }
 }
 
 .vue-slider-dot {
   .filter & {
-    border: 1px solid $secondary-color;
+    border: 1px solid palette(blue, 300);
     &:before {
       content: "";
       @include absoluteCenter;
       height: 7px;
       width: 7px;
-      border-left: 1px solid $secondary-color;
-      border-right: 1px solid $secondary-color;
+      border-left: 1px solid palette(blue, 300);
+      border-right: 1px solid palette(blue, 300);
     }
     &:after {
       content: "";
       @include absoluteCenter;
       height: 7px;
       width: 1px;
-      background: $secondary-color;
+      background: palette(blue, 300);
     }
   }
 }
 
 .vue-slider-process {
   .filter & {
-    background: $secondary-color;
-    border-radius: 3px;
+    background: palette(blue, 300);
+    border-radius: $border-radius-s;
   }
 }
 </style>
diff --git a/frontend/components/core/ReSearchBar.vue b/frontend/components/base/BaseSearchBar.vue
similarity index 90%
rename from frontend/components/core/ReSearchBar.vue
rename to frontend/components/base/BaseSearchBar.vue
index 94e533424e..ffd007071d 100644
--- a/frontend/components/core/ReSearchBar.vue
+++ b/frontend/components/base/BaseSearchBar.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <ReInputContainer class="searchbar">
+  <base-input-container class="searchbar">
     <svgicon v-if="!filter" name="search" width="20" height="40" />
     <svgicon
       v-else
@@ -26,8 +26,8 @@
       height="14"
       @click="filter = undefined"
     />
-    <ReInput v-model="filter" :placeholder="placeholder" />
-  </ReInputContainer>
+    <base-input v-model="filter" :placeholder="placeholder" />
+  </base-input-container>
 </template>
 <script>
 import "assets/icons/search";
@@ -65,7 +65,7 @@ export default {
   border-radius: $border-radius;
   @include font-size(14px);
   .svg-icon {
-    fill: $font-secondary;
+    fill: $font-secondary-medium;
     margin: auto 1em auto 1em;
   }
   &__button {
diff --git a/frontend/components/base/BaseSlider.vue b/frontend/components/base/BaseSlider.vue
new file mode 100644
index 0000000000..3c5dfbafd6
--- /dev/null
+++ b/frontend/components/base/BaseSlider.vue
@@ -0,0 +1,100 @@
+<!--
+  - 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="slides-nav">
+    <a
+      :class="itemNumber <= 0 ? 'disabled' : null"
+      href="#"
+      @click.prevent="prev(itemNumber)"
+    >
+      <svgicon name="chevron-left" width="8" height="8" color="#4C4EA3" />
+    </a>
+    {{ itemNumber + 1 }} of {{ slidesOrigin.length }} {{ slidesName }}
+    <a
+      :class="slidesOrigin.length <= itemNumber + 1 ? 'disabled' : null"
+      href="#"
+      @click.prevent="next(itemNumber)"
+    >
+      <svgicon name="chevron-right" width="8" height="8" color="#4C4EA3" />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    itemNumber: {
+      type: Number,
+      required: true,
+    },
+    slidesName: {
+      type: String,
+      required: true,
+    },
+    slidesOrigin: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    prev(number) {
+      this.$emit("go-to", --number);
+    },
+    next(number) {
+      this.$emit("go-to", ++number);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.slides-nav {
+  @include font-size(13px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 33%;
+  margin-right: 33%;
+  margin-left: auto;
+  color: $font-medium;
+  a {
+    height: 20px;
+    width: 20px;
+    line-height: 19px;
+    text-align: center;
+    border-radius: $border-radius-s;
+    text-align: center;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+    display: inline-block;
+    text-decoration: none;
+    outline: none;
+    @include font-size(13px);
+    background: transparent;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: palette(grey, 800);
+      transition: all 0.2s ease-in-out;
+    }
+    &.disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+</style>
diff --git a/frontend/components/core/ReSwitch.vue b/frontend/components/base/BaseSwitch.vue
similarity index 96%
rename from frontend/components/core/ReSwitch.vue
rename to frontend/components/base/BaseSwitch.vue
index cfcbdb32b6..75881e69a2 100644
--- a/frontend/components/core/ReSwitch.vue
+++ b/frontend/components/base/BaseSwitch.vue
@@ -129,13 +129,13 @@ $switch-ripple-size: 44px;
       display: none;
     }
     .re-switch-thumb {
-      background-color: $lighter-color !important;
+      background-color: palette(white) !important;
     }
   }
   &.disable-action {
     opacity: 0.5;
     .re-switch-thumb {
-      background-color: $lighter-color !important;
+      background-color: palette(white) !important;
       transform: translate3d(-1px, -50%, 0px) !important;
     }
     &:active {
@@ -151,7 +151,7 @@ $switch-ripple-size: 44px;
     position: relative;
     border-radius: $switch-height;
     transition: $swift-ease-out;
-    background-color: palette(grey, smooth);
+    background-color: palette(grey, 600);
     .re-switch-thumb {
       box-shadow: $shadow;
       width: $switch-thumb-size;
diff --git a/frontend/components/core/ReTabs.vue b/frontend/components/base/BaseTabs.vue
similarity index 98%
rename from frontend/components/core/ReTabs.vue
rename to frontend/components/base/BaseTabs.vue
index 21f90a937d..7693bdba06 100644
--- a/frontend/components/core/ReTabs.vue
+++ b/frontend/components/base/BaseTabs.vue
@@ -97,7 +97,6 @@ export default {
 }
 
 .button-bordered {
-  @extend %button;
   text-transform: none;
   color: $primary-color;
   border: 1px solid $primary-color;
@@ -134,7 +133,7 @@ export default {
     background: $primary-color;
     transition: $swift-ease-in-out;
     .svg-icon {
-      fill: $lighter-color;
+      fill: palette(white);
     }
   }
 }
diff --git a/frontend/components/core/ReTag.vue b/frontend/components/base/BaseTag.vue
similarity index 87%
rename from frontend/components/core/ReTag.vue
rename to frontend/components/base/BaseTag.vue
index 17236d5b59..a6cd5ed4d2 100644
--- a/frontend/components/core/ReTag.vue
+++ b/frontend/components/base/BaseTag.vue
@@ -17,12 +17,12 @@ export default {
   text-align: left;
   border: none;
   display: inline-block;
-  border-radius: 8px;
+  border-radius: $border-radius-m;
   padding: 0.3em 1em;
   margin: 3.5px;
   max-width: 175px;
   vertical-align: top;
-  background: palette(grey, bg);
+  background: palette(grey, 800);
   word-break: break-word;
   hyphens: auto;
   @include media(">desktopLarge") {
diff --git a/frontend/components/core/ReToast/Toast.vue b/frontend/components/base/BaseToast/Toast.vue
similarity index 98%
rename from frontend/components/core/ReToast/Toast.vue
rename to frontend/components/base/BaseToast/Toast.vue
index f4f188ef21..a1036c578e 100644
--- a/frontend/components/core/ReToast/Toast.vue
+++ b/frontend/components/base/BaseToast/Toast.vue
@@ -284,15 +284,15 @@ $toast-colors: map-merge(
   box-shadow: $shadow;
   border-radius: 0.25em;
   pointer-events: auto;
-  color: $darker-color;
-  background: $lighter-color !important;
+  color: $font-dark;
+  background: palette(white) !important;
   min-height: 3em;
   .toast-text {
     margin: 0;
     padding: 1.5em;
   }
   &__button {
-    color: $secondary-color;
+    color: palette(blue, 300);
     margin: 0 3em;
     cursor: pointer;
   }
@@ -301,7 +301,7 @@ $toast-colors: map-merge(
     cursor: pointer;
     &:after {
       content: "\2573";
-      color: $darker-color;
+      color: $font-dark;
       font-size: 10px;
     }
   }
diff --git a/frontend/components/core/ReToast/api.js b/frontend/components/base/BaseToast/api.js
similarity index 100%
rename from frontend/components/core/ReToast/api.js
rename to frontend/components/base/BaseToast/api.js
diff --git a/frontend/components/core/ReToast/bus.js b/frontend/components/base/BaseToast/bus.js
similarity index 100%
rename from frontend/components/core/ReToast/bus.js
rename to frontend/components/base/BaseToast/bus.js
diff --git a/frontend/components/core/ReToast/helpers.js b/frontend/components/base/BaseToast/helpers.js
similarity index 100%
rename from frontend/components/core/ReToast/helpers.js
rename to frontend/components/base/BaseToast/helpers.js
diff --git a/frontend/components/core/ReToast/index.js b/frontend/components/base/BaseToast/index.js
similarity index 100%
rename from frontend/components/core/ReToast/index.js
rename to frontend/components/base/BaseToast/index.js
diff --git a/frontend/components/core/ReToast/positions.js b/frontend/components/base/BaseToast/positions.js
similarity index 100%
rename from frontend/components/core/ReToast/positions.js
rename to frontend/components/base/BaseToast/positions.js
diff --git a/frontend/components/core/ReToast/timer.js b/frontend/components/base/BaseToast/timer.js
similarity index 100%
rename from frontend/components/core/ReToast/timer.js
rename to frontend/components/base/BaseToast/timer.js
diff --git a/frontend/components/core/ReTopbarBrand.vue b/frontend/components/base/BaseTopbarBrand.vue
similarity index 87%
rename from frontend/components/core/ReTopbarBrand.vue
rename to frontend/components/base/BaseTopbarBrand.vue
index 248c6a9357..1a32f82bc6 100644
--- a/frontend/components/core/ReTopbarBrand.vue
+++ b/frontend/components/base/BaseTopbarBrand.vue
@@ -17,12 +17,12 @@
 
 <template>
   <div class="topbar">
-    <RubrixIsotipo v-if="!title" />
-    <NuxtLink v-else :to="{ name: 'datasets' }">
+    <rubrix-isotipo v-if="!title" />
+    <nuxt-link v-else :to="{ name: 'datasets' }">
       <p class="title">
         {{ title }}
       </p>
-    </NuxtLink>
+    </nuxt-link>
     <slot />
   </div>
 </template>
@@ -51,8 +51,8 @@ export default {
   min-height: 56px;
   position: relative;
   background: $primary-color;
-  border-bottom: 1px solid $line-light-color;
-  color: $lighter-color;
+  border-bottom: 1px solid palette(grey, 700);
+  color: palette(white);
   padding-top: 0;
   padding-bottom: 0;
   padding-right: 1.2em;
@@ -61,7 +61,7 @@ export default {
     text-decoration: none;
   }
   .title {
-    color: $lighter-color;
+    color: palette(white);
     @include font-size(18px);
     font-weight: 900;
     font-family: $ff;
diff --git a/frontend/components/core/format/ReDate.vue b/frontend/components/base/format/BaseDate.vue
similarity index 100%
rename from frontend/components/core/format/ReDate.vue
rename to frontend/components/base/format/BaseDate.vue
diff --git a/frontend/components/core/logos/Rubrix.vue b/frontend/components/base/logos/Rubrix.vue
similarity index 100%
rename from frontend/components/core/logos/Rubrix.vue
rename to frontend/components/base/logos/Rubrix.vue
diff --git a/frontend/components/core/logos/RubrixIsotipo.vue b/frontend/components/base/logos/RubrixIsotipo.vue
similarity index 100%
rename from frontend/components/core/logos/RubrixIsotipo.vue
rename to frontend/components/base/logos/RubrixIsotipo.vue
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/base/table/BaseTableInfo.vue
similarity index 87%
rename from frontend/components/core/table/ReTableInfo.vue
rename to frontend/components/base/table/BaseTableInfo.vue
index 1739588de6..62a0d08a97 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/base/table/BaseTableInfo.vue
@@ -46,7 +46,7 @@
           </div>
         </slot>
       </div>
-      <ResultsEmpty
+      <results-empty
         v-if="!data.length"
         :title="noDataInfo.title"
         :message="noDataInfo.message"
@@ -65,7 +65,7 @@
               :key="String(item.id)"
             >
               <div class="table-info__item">
-                <re-checkbox
+                <base-checkbox
                   v-if="globalActions"
                   v-model="item.selectedRecord"
                   class="list__item__checkbox"
@@ -85,21 +85,21 @@
                       >{{ itemValue(item, column) }}
                     </a>
                     <span v-else-if="column.type === 'link'">
-                      <NuxtLink v-if="item.link" :to="item.link"
+                      <nuxt-link v-if="item.link" :to="item.link"
                         >{{ itemValue(item, column) }}
-                      </NuxtLink>
+                      </nuxt-link>
                       <span v-else>{{ itemValue(item, column) }}</span>
-                      <re-action-tooltip tooltip="Copied">
-                        <ReButton
+                      <base-action-tooltip tooltip="Copied">
+                        <base-button
                           title="Copy to clipboard"
                           class="table-info__actions__button button-icon"
                           @click.prevent="onActionClicked('copy-name', item)"
                         >
                           <svgicon name="copy" width="16" height="16" />
-                        </ReButton>
-                      </re-action-tooltip>
+                        </base-button>
+                      </base-action-tooltip>
                     </span>
-                    <ReDate
+                    <base-date
                       v-else-if="column.type === 'date'"
                       :date="itemValue(item, column)"
                     />
@@ -144,12 +144,12 @@
                   </span>
                 </span>
                 <div v-if="visibleActions" class="table-info__actions">
-                  <re-action-tooltip
+                  <base-action-tooltip
                     v-for="action in filterActions"
                     :key="action.index"
                     :tooltip="action.tooltip"
                   >
-                    <ReButton
+                    <base-button
                       :title="action.title"
                       class="table-info__actions__button button-icon"
                       @click="onActionClicked(action.name, item)"
@@ -160,10 +160,10 @@
                         width="16"
                         height="16"
                       />
-                    </ReButton>
-                  </re-action-tooltip>
+                    </base-button>
+                  </base-action-tooltip>
                 </div>
-                <ReModal
+                <base-modal
                   :modal-custom="true"
                   :prevent-body-scroll="true"
                   modal-class="modal-secondary"
@@ -175,27 +175,27 @@
                     <p class="modal__title">{{ deleteModalContent.title }}</p>
                     <p v-html="deleteModalContent.text"></p>
                     <div class="modal-buttons">
-                      <ReButton
-                        class="button-tertiary--small button-tertiary--outline"
+                      <base-button
+                        class="primary outline"
                         @click="$emit('close-modal')"
                       >
                         Cancel
-                      </ReButton>
-                      <ReButton
-                        class="button-secondary--small"
+                      </base-button>
+                      <base-button
+                        class="primary"
                         @click="onActionClicked('confirm-delete', item)"
                       >
                         Yes, delete
-                      </ReButton>
+                      </base-button>
                     </div>
                   </div>
-                </ReModal>
+                </base-modal>
               </div>
             </li>
           </ul>
         </div>
       </template>
-      <ResultsEmpty v-else :title="emptySearchInfo.title" />
+      <results-empty v-else :title="emptySearchInfo.title" />
     </div>
   </transition>
 </template>
@@ -426,7 +426,7 @@ export default {
   list-style: none;
   margin-bottom: 5em;
   ul {
-    background: $lighter-color;
+    background: palette(white);
     list-style: none;
     padding: 0;
     margin: 0;
@@ -438,7 +438,7 @@ export default {
     }
   }
   &__header {
-    background: $lighter-color;
+    background: palette(white);
     min-height: 50px;
     position: relative;
     margin-top: 1em;
@@ -461,14 +461,14 @@ export default {
       display: flex;
       align-items: center;
     }
-    button:not(.re-button) {
+    button:not(.button) {
       cursor: pointer;
       border: 0;
       outline: none;
       background: transparent;
       padding-left: 0;
       padding-right: 0;
-      color: $font-secondary;
+      color: $font-secondary-medium;
       @include font-size(14px);
       font-family: $sff;
       text-align: left;
@@ -497,7 +497,7 @@ export default {
     padding: 2em 5em 2em 2em;
     display: flex;
     width: 100%;
-    border-bottom: 1px solid $line-light-color;
+    border-bottom: 1px solid palette(grey, 700);
     align-items: flex-start;
     text-decoration: none;
     outline: none;
@@ -515,18 +515,18 @@ export default {
       }
     }
     .svg-icon {
-      margin-right: 8px;
-      fill: $font-medium-color;
+      margin-right: $base-space;
+      fill: $font-medium;
       &:hover {
-        fill: darken($font-medium-color, 10%);
+        fill: darken($font-medium, 10%);
       }
     }
   }
   &__tag {
-    background: palette(grey, dark);
+    background: $font-dark;
     display: inline-block;
-    border-radius: 3px;
-    color: $lighter-color;
+    border-radius: $border-radius-s;
+    color: palette(white);
     @include font-size(12px);
     box-shadow: 0 1px 4px 1px rgba(222, 222, 222, 0.5);
     padding: 0.1em 0.5em;
@@ -543,8 +543,9 @@ export default {
       position: relative;
       margin-left: 2em;
       padding: 0 !important;
+      display: inline-block;
       .svg-icon {
-        margin-right: 0;
+        margin: 0;
       }
       & + #{$this} {
         margin-left: auto;
@@ -557,9 +558,12 @@ export default {
     hyphens: auto;
     word-break: break-word;
     .button-icon {
-      margin-left: 5px;
-      padding: 0;
-      margin-bottom: 2px;
+      padding: $base-space;
+      margin-left: $base-space;
+      display: inline-block;
+      .svg-icon {
+        margin: 0;
+      }
     }
     a {
       text-decoration: none;
@@ -570,7 +574,7 @@ export default {
   }
   &__group {
     padding-bottom: 2em;
-    border-bottom: 1px solid $line-smooth-color;
+    border-bottom: 1px solid palette(grey, 600);
     display: block;
     &__title {
       margin: 3em 0 0 0;
@@ -581,9 +585,9 @@ export default {
     }
   }
   .model {
-    color: $font-dark-color;
-    border: 1px solid $line-smooth-color;
-    border-radius: 3px;
+    color: $font-dark;
+    border: 1px solid palette(grey, 600);
+    border-radius: $border-radius-s;
     padding: 0.1em 2em;
     display: inline-block;
     max-width: 280px;
@@ -601,10 +605,10 @@ export default {
     }
   }
   .text {
-    color: $font-medium-color;
+    color: $font-medium;
     p {
       display: inline-block;
-      background: palette(grey, bg);
+      background: palette(grey, 800);
       padding: 0.5em;
       border-radius: 10px;
       margin-right: 0.5em;
@@ -617,7 +621,7 @@ export default {
     }
   }
   .dataSource {
-    color: $font-medium-color;
+    color: $font-medium;
     font-weight: 600;
     white-space: nowrap;
   }
@@ -631,41 +635,15 @@ export default {
       display: inline-block;
       padding: 0.2em 0.5em;
       margin-top: 1em;
-      background: lighten($secondary-color, 44%);
+      background: lighten(palette(blue, 300), 44%);
       margin-right: 3px;
       border-radius: 2px;
     }
   }
 }
-.--show-tooltip {
-  @extend %activetooltip;
-  @extend %tooltip--left;
-}
-$color: #333346;
 button[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;
-  }
+  @extend %has-tooltip--top;
+  @extend %tooltip-large-text;
 }
 </style>
diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/base/table/TableFiltrableColumn.vue
similarity index 77%
rename from frontend/components/core/table/TableFiltrableColumn.vue
rename to frontend/components/base/table/TableFiltrableColumn.vue
index 4a5c12c9a0..258b36f4cb 100644
--- a/frontend/components/core/table/TableFiltrableColumn.vue
+++ b/frontend/components/base/table/TableFiltrableColumn.vue
@@ -9,34 +9,15 @@
       {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">
-      <input
-        v-model="searchText"
-        class="filter-options"
-        type="text"
-        autofocus
-        placeholder="Search"
+      <select-options-search v-model="searchText" />
+      <select-options
+        ref="options"
+        type="multiple"
+        v-model="selectedOptions"
+        :options="filterOptions(this.options, searchText)"
+        :option-name="optionName"
+        :option-counter="optionCounter"
       />
-      <ul>
-        <li
-          v-for="option in filterOptions(this.options, searchText)"
-          :key="option.index"
-        >
-          <ReCheckbox
-            :id="option"
-            v-model="selectedOptions"
-            class="re-checkbox--dark"
-            :value="option"
-          >
-            {{ isObject(option) ? `${option.key}: ${option.value}` : option }}
-            ({{ tableItemsCounter(option) | formatNumber }})
-          </ReCheckbox>
-        </li>
-        <li
-          v-if="!Object.entries(filterOptions(this.options, searchText)).length"
-        >
-          0 results
-        </li>
-      </ul>
     </div>
   </div>
 </template>
@@ -154,6 +135,12 @@ export default {
         ).length;
       }
     },
+    optionName(option) {
+      return this.isObject(option) ? `${option.key}: ${option.value}` : option;
+    },
+    optionCounter(option) {
+      return this.tableItemsCounter(option);
+    },
   },
 };
 </script>
@@ -171,31 +158,6 @@ export default {
   min-width: 270px;
   border-radius: $border-radius;
   box-shadow: $shadow;
-  ul {
-    list-style: none;
-    max-height: 220px;
-    overflow-y: auto;
-    margin: 0 -1em;
-    padding: 0 1em 1em;
-    @extend %hide-scrollbar;
-  }
-  li {
-    padding: 0.4em 0;
-  }
-  .re-checkbox {
-    margin: 0;
-    width: 100% !important;
-    cursor: default;
-  }
-  ::v-deep .checkbox-label {
-    line-height: 13px;
-  }
-}
-.highlight-text {
-  display: inline-block;
-  // font-weight: 600;
-  background: #ffbf00;
-  line-height: 16px;
 }
 
 .filter {
@@ -209,8 +171,7 @@ export default {
     & > * {
       display: block !important;
       width: 100%;
-      margin-right: 0.5em;
-      min-height: 38px;
+      margin-right: $base-space;
       &:last-child {
         margin-right: 0;
       }
@@ -230,14 +191,14 @@ button {
   background: transparent;
   padding-left: 0;
   padding-right: 0;
-  color: $font-secondary;
+  color: $font-secondary-medium;
   display: flex;
   align-items: center;
   @include font-size(14px);
   font-family: $sff;
   @include media("<=desktop") {
     display: block;
-    ::v-deep svg {
+    :deep(svg) {
       display: block;
       margin-right: 0 !important;
     }
@@ -250,14 +211,14 @@ button {
     margin: 0 -1em;
     border-radius: $border-radius;
     color: $primary-color;
-    ::v-deep svg {
+    :deep(svg) {
       & > * {
         fill: $primary-color !important;
       }
     }
   }
   .svg-icon {
-    margin-right: 8px;
+    margin-right: $base-space;
   }
 }
 </style>
diff --git a/frontend/components/core/utils/animationEndEventName.js b/frontend/components/base/utils/animationEndEventName.js
similarity index 100%
rename from frontend/components/core/utils/animationEndEventName.js
rename to frontend/components/base/utils/animationEndEventName.js
diff --git a/frontend/components/core/utils/autocomplete-common.js b/frontend/components/base/utils/autocomplete-common.js
similarity index 100%
rename from frontend/components/core/utils/autocomplete-common.js
rename to frontend/components/base/utils/autocomplete-common.js
diff --git a/frontend/components/core/utils/debounce.js b/frontend/components/base/utils/debounce.js
similarity index 100%
rename from frontend/components/core/utils/debounce.js
rename to frontend/components/base/utils/debounce.js
diff --git a/frontend/components/core/utils/getClosestVueParent.js b/frontend/components/base/utils/getClosestVueParent.js
similarity index 100%
rename from frontend/components/core/utils/getClosestVueParent.js
rename to frontend/components/base/utils/getClosestVueParent.js
diff --git a/frontend/components/core/utils/getImageLightness.js b/frontend/components/base/utils/getImageLightness.js
similarity index 100%
rename from frontend/components/core/utils/getImageLightness.js
rename to frontend/components/base/utils/getImageLightness.js
diff --git a/frontend/components/core/utils/getInViewPosition.js b/frontend/components/base/utils/getInViewPosition.js
similarity index 100%
rename from frontend/components/core/utils/getInViewPosition.js
rename to frontend/components/base/utils/getInViewPosition.js
diff --git a/frontend/components/core/utils/isArray.js b/frontend/components/base/utils/isArray.js
similarity index 100%
rename from frontend/components/core/utils/isArray.js
rename to frontend/components/base/utils/isArray.js
diff --git a/frontend/components/core/utils/setId.js b/frontend/components/base/utils/setId.js
similarity index 100%
rename from frontend/components/core/utils/setId.js
rename to frontend/components/base/utils/setId.js
diff --git a/frontend/components/core/utils/throttle.js b/frontend/components/base/utils/throttle.js
similarity index 100%
rename from frontend/components/core/utils/throttle.js
rename to frontend/components/base/utils/throttle.js
diff --git a/frontend/components/core/utils/transitionEndEventName.js b/frontend/components/base/utils/transitionEndEventName.js
similarity index 100%
rename from frontend/components/core/utils/transitionEndEventName.js
rename to frontend/components/base/utils/transitionEndEventName.js
diff --git a/frontend/components/core/utils/uniqueId.js b/frontend/components/base/utils/uniqueId.js
similarity index 100%
rename from frontend/components/core/utils/uniqueId.js
rename to frontend/components/base/utils/uniqueId.js
diff --git a/frontend/components/commons/Error.vue b/frontend/components/commons/Error.vue
index 7c54e79993..7a67c7d252 100644
--- a/frontend/components/commons/Error.vue
+++ b/frontend/components/commons/Error.vue
@@ -24,10 +24,10 @@
         following error: <strong>{{ error.message }}</strong>
       </p>
     </div>
-    <NuxtLink v-if="link" class="re-button" :to="link">
-      <svgicon name="chevron-left" width="8" height="8" color="#4A4A4A" />
+    <base-button v-if="link" class="tertiary outline" :to="link">
+      <svgicon name="chevron-left" width="14" height="14" color="#4A4A4A" />
       Back
-    </NuxtLink>
+    </base-button>
   </div>
 </template>
 
@@ -61,9 +61,9 @@ export default {
   $this: &;
   position: relative;
   max-width: 700px;
-  border: 1px solid $line-smooth-color;
-  color: $neutral-color;
-  border-radius: 3px;
+  border: 1px solid palette(grey, 600);
+  color: palette(grey, 300);
+  border-radius: $border-radius-s;
   padding: 1.2em 5em 1.2em 1.2em;
   @include font-size(14px);
   line-height: 1.5em;
@@ -95,7 +95,7 @@ export default {
   }
   &--warning {
     margin-top: 5em;
-    background: $lighter-color;
+    background: palette(white);
     border: 1px solid $error;
     max-width: calc(100% - 320px);
     #{$this}__title {
@@ -106,30 +106,7 @@ export default {
     }
   }
 }
-
-.re-button {
-  display: inline-block;
-  min-height: 30px;
-  line-height: 30px;
-  min-width: auto;
-  background: transparent;
-  text-align: center;
-  border: 1px solid $font-medium-color;
-  padding: 0 1em 0 1.5em;
-  position: relative;
-  font-weight: 600;
-  color: $font-medium-color;
-  border-radius: 3px;
-  margin-bottom: 20vh;
-  text-transform: none;
-  text-decoration: none;
-  &:hover {
-    color: darken($font-medium-color, 10%);
-  }
-  .svg-icon {
-    position: absolute;
-    left: 8px;
-    top: 12px;
-  }
+.button {
+  display: inline-flex !important;
 }
 </style>
diff --git a/frontend/components/commons/LoadingSkeleton.vue b/frontend/components/commons/LoadingSkeleton.vue
index 8925eb9aa8..b1265a17e9 100644
--- a/frontend/components/commons/LoadingSkeleton.vue
+++ b/frontend/components/commons/LoadingSkeleton.vue
@@ -50,7 +50,7 @@ export default {
 <style lang="scss" scoped>
 .loading-skeleton {
   $this: &;
-  background: $lighter-color !important;
+  background: palette(white) !important;
   pointer-events: none;
   position: relative;
   min-height: 100vh;
@@ -59,7 +59,7 @@ export default {
     top: 0;
     height: 2px;
     display: block;
-    background: lighten($secondary-color, 40%);
+    background: lighten(palette(blue, 300), 40%);
     animation: width 1s ease 0.5s infinite;
   }
 }
diff --git a/frontend/components/commons/TaskSearch.vue b/frontend/components/commons/TaskSearch.vue
index d4f150810a..8ed4706e27 100644
--- a/frontend/components/commons/TaskSearch.vue
+++ b/frontend/components/commons/TaskSearch.vue
@@ -18,7 +18,7 @@
 <template>
   <div class="app__content">
     <div class="grid">
-      <Results :dataset="dataset" />
+      <results :dataset="dataset" />
     </div>
   </div>
 </template>
@@ -61,7 +61,7 @@ export default {
     padding-top: 2em;
     margin-bottom: 1.5em;
     &:after {
-      border-bottom: 1px solid $line-light-color;
+      border-bottom: 1px solid palette(grey, 700);
       content: "";
       margin-bottom: 1.5em;
       position: absolute;
diff --git a/frontend/components/commons/datasets-list/DatasetsEmpty.vue b/frontend/components/commons/datasets-list/DatasetsEmpty.vue
index ed7760cb21..b6da32a966 100644
--- a/frontend/components/commons/datasets-list/DatasetsEmpty.vue
+++ b/frontend/components/commons/datasets-list/DatasetsEmpty.vue
@@ -13,7 +13,7 @@
       <a href="https://docs.rubrix.ml/" target="_blank">see the docs</a> for
       more information.
     </p>
-    <re-code :code="generateCodeSnippet()"></re-code>
+    <base-code :code="generateCodeSnippet()"></base-code>
   </div>
 </template>
 
@@ -44,7 +44,7 @@ rb.log(
   text-align: center;
   margin: auto;
   margin-top: 12%;
-  color: palette(grey, medium);
+  color: $font-medium;
   max-width: 610px;
   line-height: 20px;
   &__icon {
diff --git a/frontend/components/commons/header/appHeader.vue b/frontend/components/commons/header/appHeader.vue
index f2f170ba8b..ac922a1f00 100644
--- a/frontend/components/commons/header/appHeader.vue
+++ b/frontend/components/commons/header/appHeader.vue
@@ -21,14 +21,14 @@
     ref="header"
     :class="['header', sticky && dataset ? 'sticky' : null]"
   >
-    <ReTopbarBrand>
-      <ReBreadcrumbs
+    <base-topbar-brand>
+      <base-breadcrumbs
         :breadcrumbs="breadcrumbs"
         :copy-button="copyButton"
         @breadcrumb-action="$emit('breadcrumb-action', $event)"
       />
       <user />
-    </ReTopbarBrand>
+    </base-topbar-brand>
     <slot />
     <component v-if="dataset" :is="currentTaskHeader" :dataset="dataset" />
   </section>
@@ -116,7 +116,7 @@ export default {
   position: sticky;
   background: $bg;
   z-index: 3;
-  ::v-deep .header__filters {
+  :deep(.header__filters) {
     position: relative;
   }
   &:not(.sticky) {
diff --git a/frontend/components/commons/header/filters/FilterDropdown.vue b/frontend/components/commons/header/filters/FilterDropdown.vue
index a8e40f92a8..3be6400052 100644
--- a/frontend/components/commons/header/filters/FilterDropdown.vue
+++ b/frontend/components/commons/header/filters/FilterDropdown.vue
@@ -19,16 +19,14 @@
   <div
     ref="dropdownMenu"
     v-click-outside="onClickOutside"
-    class="dropdown"
-    :class="visible ? 'dropdown--open' : ''"
+    :class="[
+      'dropdown',
+      colorType === 'grey' ? '--grey' : '',
+      visible ? 'dropdown--open' : '',
+    ]"
   >
     <div class="dropdown__header" @click="onClick">
       <slot name="dropdown-header" />
-      <span
-        :class="visible ? 'dropdown__check--open' : ''"
-        class="dropdown__check"
-        aria-hidden="true"
-      />
     </div>
     <div v-show="visible" class="dropdown__content" :style="positionStyle">
       <slot name="dropdown-content" />
@@ -53,6 +51,10 @@ export default {
       default: false,
       type: Boolean,
     },
+    colorType: {
+      default: "white",
+      type: String,
+    },
   },
   computed: {
     positionStyle() {
@@ -75,7 +77,7 @@ export default {
       if (document.querySelector(this.scrollContainerName)) {
         this.position = this.$refs.dropdownMenu.getBoundingClientRect();
         this.dropdownContentPosition = {
-          top: this.position.top - this.dropdownHeight - 20,
+          top: this.position.top - this.dropdownHeight - 40,
           left: this.$refs.dropdownMenu.offsetLeft,
         };
       }
@@ -120,7 +122,7 @@ export default {
     height: 100%;
     width: auto;
     height: 45px;
-    border: 1px solid $line-smooth-color;
+    border: 1px solid palette(grey, 600);
     display: flex;
     align-items: center;
     padding: 0 20px;
@@ -128,12 +130,12 @@ export default {
     border-radius: $border-radius;
     &:after {
       content: "";
-      border-color: $darker-color;
+      border-color: $font-dark;
       border-style: solid;
       border-width: 1px 1px 0 0;
       display: inline-block;
-      height: 8px;
-      width: 8px;
+      height: $base-space;
+      width: $base-space;
       -webkit-transform: rotate(133deg);
       transform: rotate(133deg);
       -webkit-transition: all 1.5s ease;
@@ -145,7 +147,7 @@ export default {
     &:hover,
     &:focus {
       border-color: $primary-color;
-      background: $lighter-color;
+      background: palette(white);
       transition: all 0.3s ease;
       &:after {
         border-color: $primary-color;
@@ -174,93 +176,32 @@ export default {
       }
     }
   }
-  &__check {
-    display: none;
-  }
   &__content {
     position: absolute;
     top: calc(100% + 10px);
     left: 0;
     margin-top: 0;
     box-shadow: $shadow;
-    background: $lighter-color;
-    border: 1px solid $primary-color;
-    padding: 10px 20px 10px 20px;
+    padding: 10px 20px 20px 20px;
     z-index: 3;
     transform: translate(0);
     right: auto;
-    .filter-options {
-      border: none;
-      outline: none;
-      height: 40px;
-    }
-    ul {
-      max-height: 188px;
-      overflow-y: auto;
-      margin: 0 -1em 0 -1em;
-      padding: 0 1em 1em 1em;
-      @extend %hide-scrollbar;
-    }
-    li {
-      padding: 0.4em 0;
-      list-style: none;
-    }
+    box-shadow: $shadow;
+    border-radius: $border-radius;
+    background: palette(white);
   }
   &--open {
     pointer-events: all;
-    .dropdown__content {
-      width: 270px;
-    }
-  }
-  input {
-    left: 0;
-    height: 40px;
-    width: 100%;
-    outline: none;
-    z-index: 1;
-    border: 0;
-  }
-  .clean-search {
-    z-index: 1;
-    display: block;
-    position: absolute;
-    right: 1em;
-    top: 1em;
-    cursor: pointer;
-  }
-}
-.dropdown--filter {
-  &.highlighted {
-    .dropdown__header {
-      border: 1px solid $primary-color;
-    }
-  }
-  &.dropdown--open {
-    .placeholder {
-      display: block;
-    }
-    .dropdown__header {
-      border: 1px solid palette(grey, light);
-      background: palette(grey, light);
-      &:after {
-        visibility: hidden;
-      }
-      .tag-icon {
-        display: none;
+    &.--grey {
+      .dropdown__content,
+      .dropdown__header {
+        background: palette(grey, 700);
+        border-color: palette(grey, 700);
       }
     }
     .dropdown__content {
-      border: 1px solid palette(grey, light);
-      background: palette(grey, light);
-    }
-    .filter-options {
-      background: palette(grey, light);
+      width: 270px;
     }
   }
-  .re-checkbox {
-    margin: 0;
-    width: 100% !important;
-    cursor: default;
-  }
 }
 </style>
diff --git a/frontend/components/commons/header/filters/FilterScore.vue b/frontend/components/commons/header/filters/FilterScore.vue
index 50a839ff69..437aa2eaa4 100644
--- a/frontend/components/commons/header/filters/FilterScore.vue
+++ b/frontend/components/commons/header/filters/FilterScore.vue
@@ -26,66 +26,51 @@
       height="14"
       @click="onRemovescoreRange()"
     />
-    <div class="filter__row__content">
-      <p class="filter__label">{{ filter.name }}:</p>
-      <div
-        class="filter__item filter__item--score"
-        :class="{
-          'filter__item--open': scoreExpanded,
-          highlighted: filter.selected,
-        }"
-        @click="expandScore"
-      >
-        <div class="score-content">
-          <vega-lite
-            class="score"
-            :data="options"
-            :autosize="autosize"
-            :config="config"
-            :mark="mark"
-            :encoding="encoding"
-          />
-        </div>
-      </div>
-      <div
-        v-if="scoreExpanded"
-        v-click-outside="onClose"
-        class="filter__item filter__item--score"
-        :class="{ expanded: scoreExpanded }"
-      >
-        <div class="score-content">
-          <p class="range__panel">
+    <p class="filter__label">{{ filter.name }}:</p>
+    <filter-dropdown
+      color-type="grey"
+      :class="{ highlighted: visible || filter.selected }"
+      :visible="visible"
+      @visibility="onVisibility"
+    >
+      <span slot="dropdown-header">
+        <vega-lite
+          class="score"
+          :data="options"
+          :autosize="autosize"
+          :config="config"
+          :mark="mark"
+          :encoding="encoding"
+        />
+      </span>
+      <div slot="dropdown-content" v-if="visible">
+        <div class="score">
+          <p class="score__panel">
             {{ min | percent(0, 2) }} to {{ max | percent(0, 2) }}
           </p>
           <vega-lite
-            class="score"
             :data="options"
             :autosize="autosize"
             :config="config"
             :mark="mark"
             :encoding="encoding"
           />
-          <div class="range__container">
-            <ReRange
-              v-if="scoreExpanded"
-              ref="slider"
-              v-bind="rangeOptions"
-              v-model="scoreRanges"
-            ></ReRange>
-          </div>
+          <base-range
+            ref="slider"
+            v-bind="rangeOptions"
+            v-model="scoreRanges"
+          ></base-range>
         </div>
         <div class="filter__buttons">
-          <ReButton
-            class="button-tertiary--small button-tertiary--outline"
-            @click="onClose()"
-            >Cancel</ReButton
+          <base-button class="primary outline" @click="onClose()"
+            >Cancel</base-button
           >
-          <ReButton class="button-primary--small" @click="onApplyscoreRange"
-            >Apply</ReButton
+          <base-button class="primary" @click="onApplyscoreRange"
+            >Apply</base-button
           >
         </div>
       </div>
-    </div>
+    </filter-dropdown>
   </div>
 </template>
 
@@ -98,7 +83,7 @@ export default {
     },
   },
   data: () => ({
-    scoreExpanded: false,
+    visible: false,
     rangeOptions: {
       height: 4,
       dotSize: 20,
@@ -153,9 +138,6 @@ export default {
       });
       return test;
     },
-    visible() {
-      return this.scoreExpanded;
-    },
     min() {
       return this.scoreRanges[0] * 0.01;
     },
@@ -173,137 +155,27 @@ export default {
     this.scoreRanges = [from, to];
   },
   methods: {
-    expandScore() {
-      this.scoreExpanded = true;
+    onVisibility(value) {
+      this.visible = value;
     },
     onApplyscoreRange() {
       this.$emit("apply", this.filter, {
         from: this.min,
         to: this.max,
       });
-      this.scoreExpanded = false;
+      this.visible = false;
     },
     onRemovescoreRange() {
       this.$emit("apply", this.filter, undefined);
-      this.scoreExpanded = false;
+      this.visible = false;
     },
     onClose() {
-      this.scoreExpanded = false;
+      this.visible = false;
     },
   },
 };
 </script>
 <style lang="scss" scoped>
-.filter__item--score {
-  position: relative;
-  text-align: left;
-  transition: border 0.2s ease;
-  background: $lighter-color;
-  width: auto;
-  height: 45px;
-  align-items: center;
-  padding: 0 1em;
-  transition: all 0.2s ease;
-  border-radius: $border-radius;
-  &:not(.expanded) {
-    border: 1px solid $line-smooth-color;
-  }
-  &:not(.expanded):hover,
-  &:not(.expanded):focus {
-    border: 1px solid $primary-color;
-    transition: border 0.2s ease, background 0.2s ease;
-  }
-  &:after {
-    content: "";
-    border-color: $line-medium-color;
-    border-style: solid;
-    border-width: 1px 1px 0 0;
-    display: inline-block;
-    height: 8px;
-    width: 8px;
-    transform: translateY(-50%) rotate(133deg);
-    transition: all 1.5s ease;
-    position: absolute;
-    right: 1.5em;
-    top: 50%;
-    pointer-events: none;
-  }
-  .filter__buttons,
-  .button-clear {
-    display: none;
-  }
-  .score-content {
-    width: 100%;
-    text-align: center;
-  }
-  .range__container {
-    margin-top: 2px;
-    padding: 0;
-  }
-  .range {
-    @include font-size(14px);
-    text-align: center;
-    display: none;
-    &__panel {
-      display: inline-block;
-      border: 1px solid $line-smooth-color;
-      padding: 0.5em 1em;
-    }
-  }
-  ::v-deep svg {
-    margin-top: 5px;
-    height: 30px !important;
-    max-width: 90%;
-  }
-  &.highlighted {
-    border: 1px solid $primary-color;
-  }
-  &.expanded {
-    position: absolute;
-    top: calc(100% + 10px);
-    right: 0;
-    background: $bg;
-    padding: 20px 20px 10px 20px;
-    width: 270px;
-    overflow: visible;
-    border-radius: $border-radius;
-    z-index: 4;
-    box-shadow: $shadow;
-    min-height: 270px;
-    pointer-events: all;
-    &:after {
-      content: none;
-    }
-    .score {
-      ::v-deep svg {
-        max-width: 100%;
-        height: 100px !important;
-      }
-    }
-    .filter__buttons {
-      margin-top: 2em;
-      display: flex;
-      & > * {
-        display: block;
-        width: 100%;
-        margin-right: 0.5em;
-        min-height: 38px;
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-    .range {
-      display: block;
-    }
-    .range__container {
-      pointer-events: visible;
-    }
-    .label-default {
-      display: block;
-    }
-  }
-}
 .filter {
   &__remove-button {
     position: relative;
@@ -311,10 +183,16 @@ export default {
     cursor: pointer;
     flex-shrink: 0;
   }
-  &__item {
-    &--open {
-      background: $bg;
-      border-color: $bg !important;
+  &__buttons {
+    margin-top: 1em;
+    text-align: right;
+    display: flex;
+    & > * {
+      width: 100%;
+      justify-content: center;
+      &:last-child {
+        margin-left: $base-space;
+      }
     }
   }
   &__row {
@@ -323,20 +201,32 @@ export default {
     &:not(.selected) {
       margin-left: 2em;
     }
-    &__content {
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      .filter__item--score:not(.expanded) {
-        margin-left: auto;
-        width: 270px;
+    .dropdown {
+      margin-right: 0;
+      margin-left: auto;
+      width: 270px;
+      flex-shrink: 0;
+    }
+    :deep(.dropdown__header) {
+      svg {
+        margin-top: 5px;
+        height: 30px !important;
+        max-width: 90%;
       }
     }
   }
 }
 
-::v-deep .marks {
+.score {
+  text-align: center;
+  padding-bottom: $base-space * 2;
+  &__panel {
+    display: inline-block;
+    border: 1px solid palette(grey, 600);
+    padding: $base-space;
+  }
+}
+:deep(.marks) {
   .background {
     stroke: none !important;
   }
diff --git a/frontend/components/commons/header/filters/FilterUncoveredByRules.vue b/frontend/components/commons/header/filters/FilterUncoveredByRules.vue
index 9d85535fbf..5b068ea035 100644
--- a/frontend/components/commons/header/filters/FilterUncoveredByRules.vue
+++ b/frontend/components/commons/header/filters/FilterUncoveredByRules.vue
@@ -1,11 +1,11 @@
 <template>
-  <ReCheckbox
+  <base-checkbox
     @change="changeUncoveredByRules"
     class="re-checkbox--dark"
     :value="filter.selected"
   >
     Only records not covered by rules
-  </ReCheckbox>
+  </base-checkbox>
 </template>
 
 <script>
@@ -34,8 +34,8 @@ export default {
 .re-checkbox {
   flex-direction: row-reverse;
   margin-left: 2em;
-  ::v-deep .checkbox-label {
-    margin-left: 1em;
+  :deep(.checkbox-label) {
+    margin-left: $base-space * 2;
   }
 }
 </style>
diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
index f50598e159..82d871d809 100644
--- a/frontend/components/commons/header/filters/FiltersArea.vue
+++ b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -16,27 +16,25 @@
   -->
 
 <template>
-  <div class="filters__area">
-    <div class="filters__content">
-      <div class="container">
-        <div class="filters__row">
-          <div class="filters__block">
-            <SearchBar
-              class="filters__searchbar"
-              :dataset="dataset"
-              @submit="onTextQuerySearch"
-            />
-            <FiltersList
-              :dataset="dataset"
-              @applyFilter="onApplyFilter"
-              @applyMetaFilter="onApplyMetaFilter"
-              @applySortBy="onApplySortBy"
-              @removeAllMetadataFilters="onRemoveAllMetadataFilters"
-              @removeFiltersByGroup="onRemoveFiltersByGroup"
-            ></FiltersList>
-          </div>
-          <slot />
+  <div class="filters__content">
+    <div class="container">
+      <div class="filters__row">
+        <div class="filters__block">
+          <search-bar
+            class="filters__searchbar"
+            :dataset="dataset"
+            @submit="onTextQuerySearch"
+          />
+          <filters-list
+            :dataset="dataset"
+            @applyFilter="onApplyFilter"
+            @applyMetaFilter="onApplyMetaFilter"
+            @applySortBy="onApplySortBy"
+            @removeAllMetadataFilters="onRemoveAllMetadataFilters"
+            @removeFiltersByGroup="onRemoveFiltersByGroup"
+          ></filters-list>
         </div>
+        <slot />
       </div>
     </div>
   </div>
@@ -124,19 +122,12 @@ export default {
 }
 
 .filters {
-  &__area {
-    display: flex;
-    align-items: center;
-    top: -1em;
-    left: 0;
-    right: 0;
-  }
   &__row {
     display: flex;
     align-items: center;
   }
   &__content {
-    padding: 32px 0;
+    padding: $base-space * 4 0;
     position: relative;
     width: 100%;
   }
@@ -146,27 +137,10 @@ export default {
     width: calc(100% - 300px);
   }
   &__searchbar {
-    margin-right: 10px;
+    margin-right: $base-space;
     width: 100%;
     @include media(">desktop") {
-      margin-right: 15px;
-    }
-    &.--extended {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-  &--disabled {
-    ::v-deep * {
-      pointer-events: none !important;
-      cursor: pointer;
-    }
-    ::v-deep .filters__searchbar {
-      opacity: 0.4;
-    }
-    ::v-deep .filters--sort {
-      align-items: center;
-      opacity: 0.4;
+      margin-right: $base-space * 2;
     }
   }
 }
diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue
index 468548c43e..33726fb6cf 100644
--- a/frontend/components/commons/header/filters/FiltersList.vue
+++ b/frontend/components/commons/header/filters/FiltersList.vue
@@ -80,14 +80,13 @@
               @sortBy="onSortBy"
             />
           </div>
-          <a
+          <base-button
             v-if="
               initialVisibleGroup !== 'Sort' && itemsAppliedOnGroup(group) > 1
             "
-            class="filters__list__button"
-            href="#"
-            @click.prevent="removeFiltersByGroup(group)"
-            >Remove all filters</a
+            class="filters__list__button link"
+            @click="removeFiltersByGroup(group)"
+            >Remove all filters</base-button
           >
         </div>
       </div>
@@ -234,6 +233,7 @@ export default {
         id: "uncovered_by_rules",
         key: "uncovered_by_rules",
         group: "Annotations",
+        name: "Uncovered by rules",
         options: [true, false],
         selected:
           this.dataset.query.uncovered_by_rules &&
@@ -303,7 +303,7 @@ $number-size: 18px;
       position: absolute;
       top: calc(100% + 10px);
       box-shadow: $shadow;
-      background: $lighter-color;
+      background: palette(white);
       padding: 20px 20px 10px 20px;
       border-radius: $border-radius;
       z-index: 2;
@@ -319,22 +319,8 @@ $number-size: 18px;
       position: relative;
       flex-shrink: 0;
     }
-    &__sort {
-      svg {
-        margin-right: 0.3em;
-      }
-    }
     &__button {
-      color: $font-secondary;
-      @include font-size(13px);
-      text-decoration: none;
-      display: block;
-      font-weight: 600;
-      background: palette(white);
-      position: relative;
-      margin-left: 2em;
-      margin-bottom: 1em;
-      padding-top: 2em;
+      margin: 2em auto 1em 2em;
     }
     p {
       cursor: pointer;
@@ -343,25 +329,25 @@ $number-size: 18px;
       margin-top: 0;
       padding: 0.8em;
       border-radius: $border-radius;
-      margin-right: 10px;
-      color: $font-secondary;
+      margin-right: $base-space;
+      color: $font-secondary-medium;
       @include font-size(15px);
       font-family: $sff;
       white-space: nowrap;
       @include media(">desktop") {
         padding: 0.8em 1em;
-        margin-right: 15px;
+        margin-right: $base-space * 2;
       }
       &:hover {
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
       }
       &.active {
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
         color: $primary-color;
       }
     }
   }
-  ::v-deep .filters--scrollable {
+  :deep(.filters--scrollable) {
     max-height: 312px;
     overflow: auto;
     @extend %hide-scrollbar;
diff --git a/frontend/components/commons/header/filters/FiltersListEmpty.vue b/frontend/components/commons/header/filters/FiltersListEmpty.vue
index 40cdf923cf..7b1f30d15b 100644
--- a/frontend/components/commons/header/filters/FiltersListEmpty.vue
+++ b/frontend/components/commons/header/filters/FiltersListEmpty.vue
@@ -89,7 +89,7 @@ export default {
     height: 100%;
     width: auto;
     height: 45px;
-    border: 1px solid $line-smooth-color;
+    border: 1px solid palette(grey, 600);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -106,8 +106,8 @@ export default {
       border-style: solid;
       border-width: 1px 1px 0 0;
       display: inline-block;
-      height: 8px;
-      width: 8px;
+      height: $base-space;
+      width: $base-space;
       -webkit-transform: rotate(133deg);
       transform: rotate(133deg);
       -webkit-transition: all 1.5s ease;
@@ -123,8 +123,8 @@ export default {
     border-style: solid;
     border-width: 1px 1px 0 0;
     display: inline-block;
-    height: 8px;
-    width: 8px;
+    height: $base-space;
+    width: $base-space;
     -webkit-transform: rotate(133deg);
     transform: rotate(133deg);
     -webkit-transition: all 1.5s ease;
diff --git a/frontend/components/commons/header/filters/RecordsCounter.vue b/frontend/components/commons/header/filters/RecordsCounter.vue
index d98b146e90..3fdc3a7f7a 100644
--- a/frontend/components/commons/header/filters/RecordsCounter.vue
+++ b/frontend/components/commons/header/filters/RecordsCounter.vue
@@ -17,7 +17,7 @@ export default {
 
 <style lang="scss" scoped>
 .records-counter {
-  color: palette(grey, medium);
+  color: $font-medium;
   margin-left: auto;
   margin-right: 0;
   display: block;
diff --git a/frontend/components/commons/header/filters/SearchBar.vue b/frontend/components/commons/header/filters/SearchBar.vue
index 5fb90b293b..c4a67cc043 100644
--- a/frontend/components/commons/header/filters/SearchBar.vue
+++ b/frontend/components/commons/header/filters/SearchBar.vue
@@ -18,7 +18,7 @@
 <template>
   <form @submit.prevent="submit(query)">
     <div :class="['searchbar__container', { active: query }]">
-      <ReInputContainer class="searchbar">
+      <base-input-container class="searchbar">
         <svgicon
           v-if="!query && !dataset.query.text"
           name="search"
@@ -33,13 +33,13 @@
           height="20"
           @click="removeFilter()"
         />
-        <ReInput
+        <base-input
           ref="input"
           v-model="query"
           class="searchbar__input"
           placeholder="Introduce a query"
         />
-      </ReInputContainer>
+      </base-input-container>
     </div>
   </form>
 </template>
@@ -88,18 +88,17 @@ export default {
 
 <style lang="scss" scoped>
 .searchbar {
-  background: $lighter-color;
+  background: palette(white);
   width: 285px;
   min-height: 43px;
   border: none;
-  padding: 0 0.5em;
   display: flex;
   align-items: center;
   transition: all 0.2s ease;
   margin-right: 0;
   margin-left: auto;
   pointer-events: all;
-  border-radius: 3px;
+  border-radius: $border-radius-s;
   min-width: 100%;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13);
   &__container {
@@ -111,12 +110,12 @@ export default {
   &__button {
     cursor: pointer;
     padding: 5px;
-    border-radius: 3px;
-    background: $lighter-color;
+    border-radius: $border-radius-s;
+    background: palette(white);
     transition: background 0.2s ease-in-out;
     &:hover {
       transition: background 0.2s ease-in-out;
-      background: palette(grey, bg);
+      background: palette(grey, 800);
     }
   }
   .svg-icon {
diff --git a/frontend/components/commons/header/filters/SelectFilter.vue b/frontend/components/commons/header/filters/SelectFilter.vue
index 043284d91b..7d0c67ea38 100644
--- a/frontend/components/commons/header/filters/SelectFilter.vue
+++ b/frontend/components/commons/header/filters/SelectFilter.vue
@@ -27,9 +27,9 @@
       @click="onRemove()"
     />
     <p class="filter__label" :title="filter.name">{{ filter.name }}:</p>
-    <FilterDropdown
+    <filter-dropdown
+      color-type="grey"
       :class="{ highlighted: visible || appliedFilters.length }"
-      class="dropdown--filter"
       :visible="visible"
       @visibility="onVisibility"
     >
@@ -49,51 +49,24 @@
         </span>
       </span>
       <div slot="dropdown-content" v-if="visible">
-        <input
-          v-model="searchText"
-          class="filter-options"
-          type="text"
-          autofocus
-          :placeholder="placeholder"
+        <select-options-search v-model="searchText" />
+        <select-options
+          ref="options"
+          type="multiple"
+          v-model="selectedOptions"
+          :options="filterOptions(filter.options, searchText)"
+          :option-name="optionName"
+          :option-counter="optionCounter"
+          :option-value="optionName"
         />
-        <ul>
-          <li
-            v-for="[option, counter] in filterOptions(
-              filter.options,
-              searchText
-            )"
-            :key="option"
-          >
-            <ReCheckbox
-              :id="option"
-              v-model="selectedOptions"
-              class="re-checkbox--dark"
-              :value="option"
-            >
-              {{ option }} ({{ counter | formatNumber }})
-            </ReCheckbox>
-          </li>
-          <li
-            v-if="
-              !Object.entries(filterOptions(filter.options, searchText)).length
-            "
-          >
-            0 results
-          </li>
-        </ul>
         <div class="filter__buttons">
-          <ReButton
-            class="button-tertiary--small button-tertiary--outline"
-            @click="onCancel"
-          >
+          <base-button class="primary outline" @click="onCancel">
             Cancel
-          </ReButton>
-          <ReButton class="button-primary--small" @click="onApply">
-            Filter
-          </ReButton>
+          </base-button>
+          <base-button class="primary" @click="onApply"> Filter </base-button>
         </div>
       </div>
-    </FilterDropdown>
+    </filter-dropdown>
   </div>
 </template>
 
@@ -168,18 +141,17 @@ export default {
       );
       return filtered;
     },
+    optionName(option) {
+      return option[0];
+    },
+    optionCounter(option) {
+      return option[1];
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.highlight-text {
-  display: inline-block;
-  // font-weight: 600;
-  background: #ffbf00;
-  line-height: 16px;
-}
-
 .filter {
   &__row {
     display: flex;
@@ -206,12 +178,10 @@ export default {
     text-align: right;
     display: flex;
     & > * {
-      display: block !important;
       width: 100%;
-      margin-right: 0.5em;
-      min-height: 38px;
+      justify-content: center;
       &:last-child {
-        margin-right: 0;
+        margin-left: $base-space;
       }
     }
   }
@@ -222,91 +192,4 @@ export default {
     flex-shrink: 0;
   }
 }
-
-.dropdown {
-  &__placeholder {
-    display: none;
-    .dropdown--open & {
-      display: block;
-    }
-  }
-  &__selectables {
-    vertical-align: middle;
-    .dropdown--open & {
-      visibility: hidden;
-    }
-    & + .dropdown__selectables {
-      &:before {
-        content: ",  ";
-        margin-right: 2px;
-      }
-      &:after {
-        content: "...";
-        margin-left: -2px;
-      }
-    }
-  }
-}
-.filter-options {
-  &__back {
-    color: $primary-color;
-    margin-top: 1em;
-    display: flex;
-    align-items: center;
-    &__chev {
-      cursor: pointer;
-      margin-right: 1em;
-      padding: 0.5em;
-      &:after {
-        content: "";
-        border-color: $primary-color;
-        border-style: solid;
-        border-width: 1px 1px 0 0;
-        display: inline-block;
-        height: 8px;
-        width: 8px;
-        transform: rotate(-135deg);
-        transition: all 1.5s ease;
-        margin-bottom: 2px;
-        margin-left: auto;
-        margin-right: 0;
-      }
-    }
-  }
-  &__button {
-    display: flex;
-    cursor: pointer;
-    min-width: 135px;
-    transition: min-width 0.2s ease;
-    &.active {
-      min-width: 270px;
-      transition: min-width 0.2s ease;
-    }
-    &.hidden {
-      opacity: 0;
-    }
-  }
-  &__chev {
-    padding-left: 2em;
-    margin-right: 0;
-    margin-left: auto;
-    background: none;
-    border: none;
-    outline: none;
-    &:after {
-      content: "";
-      border-color: #4a4a4a;
-      border-style: solid;
-      border-width: 1px 1px 0 0;
-      display: inline-block;
-      height: 8px;
-      width: 8px;
-      transform: rotate(43deg);
-      transition: all 1.5s ease;
-      margin-bottom: 2px;
-      margin-left: auto;
-      margin-right: 0;
-    }
-  }
-}
 </style>
diff --git a/frontend/components/commons/header/filters/SelectOptions.vue b/frontend/components/commons/header/filters/SelectOptions.vue
new file mode 100644
index 0000000000..bbd7408502
--- /dev/null
+++ b/frontend/components/commons/header/filters/SelectOptions.vue
@@ -0,0 +1,133 @@
+<!--
+  - 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>
+  <ul v-if="type === 'multiple'">
+    <li v-for="(option, index) in options" :key="index">
+      <base-checkbox
+        :id="optionValue(option)"
+        v-model="selectedOptions"
+        class="re-checkbox--dark"
+        :value="optionValue(option)"
+      >
+        {{ optionName(option) }}
+        <template v-if="optionCounter(option) !== undefined"
+          >({{ optionCounter(option) | formatNumber }})</template
+        >
+      </base-checkbox>
+    </li>
+    <li v-if="!Object.entries(options).length">0 results</li>
+  </ul>
+  <ul v-else-if="type === 'single'" class="--single">
+    <li v-for="option in options" :key="optionName(option)">
+      <a href="#" @click.prevent="select(option)">
+        {{ optionName(option) }}
+      </a>
+    </li>
+    <li v-if="!options.length">0 results</li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    optionName: {
+      type: Function,
+      default: (option) => option,
+    },
+    optionValue: {
+      type: Function,
+      default: (option) => option,
+    },
+    optionCounter: {
+      type: Function,
+      default: () => undefined,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: "multiple",
+      validator: function (value) {
+        return ["multiple", "single"].includes(value);
+      },
+    },
+  },
+  computed: {
+    selectedOptions: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+  methods: {
+    select(option) {
+      this.$emit("selected", option);
+    },
+    optionIsAString(option) {
+      return typeof option === "string";
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.re-checkbox {
+  margin: 0;
+  width: 100% !important;
+  cursor: default;
+}
+.checkbox-label {
+  height: auto;
+  white-space: normal;
+  text-transform: none;
+  word-break: break-word;
+  hyphens: auto;
+}
+ul {
+  max-height: 188px;
+  overflow-y: auto;
+  margin: 0 -1em 0 -1em;
+  padding: 0 1em 1em 1em;
+  @extend %hide-scrollbar;
+  &.--single {
+    padding-bottom: 0;
+    margin-bottom: -0.5em;
+  }
+}
+li {
+  padding: 0.4em 0;
+  list-style: none;
+}
+a {
+  text-decoration: none;
+  max-width: 250px;
+  display: block;
+  word-break: break-word;
+  hyphens: auto;
+}
+</style>
diff --git a/frontend/components/commons/header/filters/SelectOptionsSearch.vue b/frontend/components/commons/header/filters/SelectOptionsSearch.vue
new file mode 100644
index 0000000000..85ce1d38f1
--- /dev/null
+++ b/frontend/components/commons/header/filters/SelectOptionsSearch.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="options-search">
+    <input
+      v-model="searchText"
+      class="options-search__input"
+      type="text"
+      autofocus
+      :placeholder="placeholder"
+    />
+    <a href="#" class="options-search__clear" @click.prevent="clear">
+      <svgicon
+        v-if="allowClear && searchText !== ''"
+        name="close"
+        width="10"
+        height="10"
+        color="#9b9b9b"
+      ></svgicon>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: "Search...",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    allowClear: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    searchText: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+  methods: {
+    clear() {
+      this.$emit("clear");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.options-search {
+  &__input {
+    border: none;
+    outline: none;
+    height: 40px;
+    background: transparent;
+    width: calc(100% - 20px);
+  }
+  &__clear {
+    outline: none;
+  }
+}
+</style>
diff --git a/frontend/components/commons/header/filters/SortFilter.vue b/frontend/components/commons/header/filters/SortFilter.vue
index c6049d9da3..e1d2c3b0de 100644
--- a/frontend/components/commons/header/filters/SortFilter.vue
+++ b/frontend/components/commons/header/filters/SortFilter.vue
@@ -27,7 +27,7 @@
       @click="removeField()"
     />
     <FilterDropdown
-      class="dropdown--filter"
+      color-type="grey"
       :class="{ highlighted: visible }"
       :visible="visible"
       @visibility="onVisibility"
@@ -37,20 +37,14 @@
         <span v-else>Sort by</span>
       </span>
       <div slot="dropdown-content">
-        <input
-          v-model="searchText"
-          class="filter-options"
-          type="text"
-          autofocus
-          placeholder="Search..."
+        <select-options-search v-model="searchText" />
+        <select-options
+          ref="options"
+          type="single"
+          :option-name="optionName"
+          :options="filteredSortOptions"
+          @selected="addField"
         />
-        <ul>
-          <li v-for="option in filteredSortOptions" :key="option.text">
-            <a href="#" @click.prevent="addField(option)">
-              {{ option.name }}
-            </a>
-          </li>
-        </ul>
       </div>
     </FilterDropdown>
     <p
@@ -87,17 +81,13 @@ export default {
     visible: false,
     defaultSortedBy: undefined,
     defaultSortedByDir: "asc",
-    searchText: undefined,
+    searchText: "",
   }),
   computed: {
     filteredSortOptions() {
-      if (this.searchText === undefined) {
-        return this.sortOptions;
-      }
-      let filtered = this.sortOptions.filter((opt) =>
+      return this.sortOptions.filter((opt) =>
         opt.name.toLowerCase().match(this.searchText.toLowerCase())
       );
-      return filtered;
     },
   },
   mounted() {
@@ -129,6 +119,9 @@ export default {
       this.defaultSortedBy = currentSort;
       this.$emit("addSortField", currentSort, this.defaultSortedByDir);
     },
+    optionName(option) {
+      return option.name;
+    },
   },
 };
 </script>
@@ -148,7 +141,7 @@ export default {
     padding: 0.5em;
     @include font-size(20px);
     margin: 0 0 0 0.5em;
-    background: palette(grey, light);
+    background: palette(grey, 700);
     border-radius: $border-radius;
     min-width: 50px;
     min-height: 45px;
@@ -161,13 +154,6 @@ export default {
   .dropdown {
     width: 100%;
     max-width: 270px;
-    a {
-      text-decoration: none;
-      max-width: 250px;
-      display: block;
-      word-break: break-word;
-      hyphens: auto;
-    }
   }
 }
 </style>
diff --git a/frontend/components/commons/header/filters/SortList.vue b/frontend/components/commons/header/filters/SortList.vue
index f1debfd7cc..fe9f2d1cc4 100644
--- a/frontend/components/commons/header/filters/SortList.vue
+++ b/frontend/components/commons/header/filters/SortList.vue
@@ -28,20 +28,15 @@
         @addSortField="onAddSortField(index, ...arguments)"
       />
     </div>
-    <a
+    <base-button
       v-if="selectedFields.length === numberOfSortFields"
-      class="sort__add-button"
-      href="#"
+      class="sort__add-button link"
       @click="addNewField"
-      >+ Add another field</a
+      >+ Add another field</base-button
     >
     <div class="sort__buttons" v-if="sort.length || selectedFields.length">
-      <re-button
-        class="button-tertiary--small button-tertiary--outline"
-        @click="cancel"
-        >Cancel</re-button
-      >
-      <re-button class="button-primary--small" @click="apply">Sort</re-button>
+      <base-button class="primary outline" @click="cancel">Cancel</base-button>
+      <base-button class="primary" @click="apply">Sort</base-button>
     </div>
   </div>
 </template>
@@ -127,23 +122,17 @@ export default {
   &__buttons {
     display: flex;
     margin-top: 1.5em;
+    margin-bottom: 10px;
     & > * {
       display: block;
       width: 100%;
-      margin-right: 0.5em;
-      min-height: 38px;
       &:last-child {
-        margin-right: 0;
+        margin-left: $base-space;
       }
     }
   }
   &__add-button {
-    @include font-size(13px);
     margin-top: 1em;
-    color: $primary-color;
-    outline: none;
-    text-decoration: none;
-    display: block;
   }
 }
 </style>
diff --git a/frontend/components/commons/header/global-actions/CreateNewAction.vue b/frontend/components/commons/header/global-actions/CreateNewAction.vue
index f4f298758e..577957abe9 100644
--- a/frontend/components/commons/header/global-actions/CreateNewAction.vue
+++ b/frontend/components/commons/header/global-actions/CreateNewAction.vue
@@ -17,11 +17,11 @@
 
 <template>
   <div class="new-label__container">
-    <reButton
+    <base-button
       v-if="!showLabelCreation"
-      class="new-label__main-button button-secondary"
+      class="new-label__main-button primary small"
       @click="openLabelCreation()"
-      >{{ text }}</reButton
+      >{{ text }}</base-button
     >
     <div v-else class="new-label">
       <input
@@ -34,11 +34,11 @@
         @keyup.enter="createNewLabel(label)"
       />
       <svgicon class="new-label__close" name="close" @click="reset()" />
-      <reButton
-        class="new-label__button button-primary--small"
+      <base-button
+        class="new-label__button primary small"
         :disabled="!label"
         @click="createNewLabel(label)"
-        >Create</reButton
+        >Create</base-button
       >
     </div>
   </div>
@@ -82,12 +82,12 @@ export default {
 <style lang="scss" scoped>
 .new-label {
   width: 180px;
-  border-radius: 3px;
-  border: 2px solid $primary-color;
-  padding: 1em;
+  border-radius: $border-radius;
+  box-shadow: $shadow;
+  padding: $base-space * 2;
   position: absolute;
   top: -1em;
-  background: $lighter-color;
+  background: palette(white);
   text-align: left;
   &__close {
     position: absolute;
@@ -96,7 +96,7 @@ export default {
     cursor: pointer;
     height: 12px;
     width: 12px;
-    stroke: $font-secondary;
+    stroke: $font-secondary-medium;
     stroke-width: 1;
   }
   &__input {
diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue
index ff12176148..73f384647c 100644
--- a/frontend/components/commons/header/global-actions/GlobalActions.vue
+++ b/frontend/components/commons/header/global-actions/GlobalActions.vue
@@ -52,14 +52,11 @@ export default {
   align-items: center;
   width: 100%;
   text-align: left;
-  padding: 1em 1.4em;
-  background: $lighter-color;
+  padding: 1em $base-space * 2;
+  background: palette(white);
   border-radius: $border-radius-m;
   position: relative;
-  box-shadow: 0 1px 2px 0 rgba(185, 185, 185, 0.5);
-  margin-bottom: 16px;
-  &--exploration {
-    position: relative;
-  }
+  box-shadow: $shadow-300;
+  margin-bottom: $base-space * 2;
 }
 </style>
diff --git a/frontend/components/commons/header/global-actions/ValidateDiscardAction.vue b/frontend/components/commons/header/global-actions/ValidateDiscardAction.vue
index 34d40b8b03..19e7c263d7 100644
--- a/frontend/components/commons/header/global-actions/ValidateDiscardAction.vue
+++ b/frontend/components/commons/header/global-actions/ValidateDiscardAction.vue
@@ -22,20 +22,22 @@
       selectedRecords.length ? '' : 'validate-discard-actions--disabled',
     ]"
   >
-    <ReCheckbox
+    <base-checkbox
       v-model="allSelected"
       :disabled="!visibleRecords.length"
       class="list__item__checkbox"
-    ></ReCheckbox>
+    ></base-checkbox>
     <slot name="first" :selectedRecords="selectedRecords" />
-    <ReButton
+    <base-button
       :disabled="!allowValidation"
-      class="validate-discard-actions__button"
+      class="secondary outline small validate-discard-actions__button"
       @click="onValidate"
-      >Validate</ReButton
+      >Validate</base-button
     >
-    <ReButton class="validate-discard-actions__button" @click="onDiscard"
-      >Discard</ReButton
+    <base-button
+      class="secondary outline small validate-discard-actions__button"
+      @click="onDiscard"
+      >Discard</base-button
     >
     <slot name="last" :selectedRecords="selectedRecords" />
     <p v-if="selectedRecords.length" class="validate-discard-actions__text">
@@ -118,46 +120,24 @@ export default {
     position: relative;
     left: 0;
     top: 0;
-    margin: 0 8px 0 0;
-  }
-  &__export {
-    margin: auto 0 auto auto;
+    margin: 0 $base-space 0 0;
   }
   &__select {
     margin-left: 0.8em;
-    ::v-deep .dropdown__header {
+    :deep(.dropdown__header) {
       max-height: 33px;
-      background: $lighter-color;
-      border-width: 1px;
-      color: $font-secondary;
+      color: $font-secondary-medium;
       font-family: $sff;
       font-weight: 500;
       min-width: 170px;
-    }
-    ::v-deep .dropdown__content {
-      box-shadow: $shadow;
-      border-radius: $border-radius;
-      border: none;
+      @include font-size(13px);
     }
   }
   &__button {
-    border-radius: $border-radius;
-    height: 33px;
-    border: none;
-    min-width: 80px;
-    margin-left: 1em;
-    margin-right: 1em;
-    outline: none;
-    font-weight: 500;
-    color: $font-secondary;
-    background: $lighter-color;
-    border: 1px solid $line-smooth-color;
+    margin-left: $base-space;
+    margin-right: $base-space;
+    color: $font-secondary-medium;
     cursor: pointer;
-    &[disabled] {
-      opacity: 0.5;
-      pointer-events: none;
-      cursor: pointer;
-    }
     &:hover {
       border-color: $primary-color;
     }
@@ -166,8 +146,8 @@ export default {
     }
   }
   &__text {
-    margin: 0;
-    color: palette(grey, medium);
+    margin: 0 $base-space;
+    color: $font-medium;
     span {
       font-weight: bold;
       color: $primary-color;
diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
index db7eb8b982..7b3ed8f613 100644
--- a/frontend/components/commons/header/user/user.vue
+++ b/frontend/components/commons/header/user/user.vue
@@ -80,7 +80,7 @@ $buttonSize: 34px;
   z-index: 3;
   &__button {
     @extend %circle;
-    background: $lighter-color;
+    background: palette(white);
     transform: scale3d(1, 1, 1) translateZ(0);
     transition: all 0.2s ease-in-out;
     color: $primary-color;
@@ -95,11 +95,11 @@ $buttonSize: 34px;
     top: 3.5em;
     right: -0.5em;
     padding-top: 1.5em;
-    background: $lighter-color;
-    border-radius: 5px;
+    background: palette(white);
+    border-radius: $border-radius;
     @include font-size(14px);
     font-weight: 400;
-    color: palette(grey, medium);
+    color: $font-medium;
     box-shadow: $shadow;
     min-width: 300px;
     &:after {
@@ -113,7 +113,7 @@ $buttonSize: 34px;
     }
   }
   &__name {
-    color: palette(grey, dark);
+    color: $font-dark;
     @include font-size(16px);
     margin: 0 1.5em 0.3em 1.5em;
     font-weight: 600;
@@ -124,12 +124,12 @@ $buttonSize: 34px;
   &__link {
     display: flex;
     align-items: center;
-    color: palette(grey, medium);
+    color: $font-medium;
     margin: 0.5em 1.5em 1.5em 1.5em;
     &:hover {
-      color: darken(palette(grey, medium), 10%);
+      color: darken($font-medium, 10%);
       .svg-icon {
-        fill: darken(palette(grey, medium), 10%);
+        fill: darken($font-medium, 10%);
       }
     }
     .svg-icon {
@@ -141,13 +141,13 @@ $buttonSize: 34px;
   display: block;
   @include font-size(11px);
   font-weight: 400;
-  color: palette(grey, dark);
+  color: $font-dark;
   line-height: 1em;
   margin-top: 1.5em;
   padding: 1em;
-  background: #fcfcfc;
+  background: palette(grey, 800);
   text-align: right;
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
 }
 </style>
diff --git a/frontend/components/commons/results/Metadata.vue b/frontend/components/commons/results/Metadata.vue
index 9c9359b746..fdfcfb67f6 100644
--- a/frontend/components/commons/results/Metadata.vue
+++ b/frontend/components/commons/results/Metadata.vue
@@ -20,7 +20,7 @@
     <div class="metadata__container">
       <div v-for="(item, index) in formatSortedMetadataItems" :key="index">
         <div class="metadata__blocks">
-          <ReCheckbox
+          <base-checkbox
             :id="item[0]"
             v-model="selectedMetadata"
             class="re-checkbox--dark"
@@ -32,20 +32,17 @@
                 {{ item[1] }}
               </div>
             </div>
-          </ReCheckbox>
+          </base-checkbox>
         </div>
       </div>
     </div>
     <div class="metadata__buttons">
-      <ReButton
-        class="button-tertiary--small button-tertiary--outline"
-        @click="$emit('cancel')"
-      >
+      <base-button class="primary outline" @click="$emit('cancel')">
         Cancel
-      </ReButton>
-      <ReButton class="button-primary--small" @click="applySelectedFilters()">
+      </base-button>
+      <base-button class="primary" @click="applySelectedFilters()">
         Filter
-      </ReButton>
+      </base-button>
     </div>
   </div>
 </template>
@@ -162,21 +159,21 @@ export default {
       align-items: center;
       margin-right: 0;
     }
-    ::v-deep .checkbox-label {
+    :deep(.checkbox-label) {
       height: auto !important;
     }
   }
   &__block {
     padding: 1em 0;
     margin-right: 0.5em;
-    color: $font-dark-color;
+    color: $font-dark;
     font-weight: 600;
     &__item {
       min-width: 200px;
       max-width: 300px;
       text-align: left;
       white-space: pre-line;
-      color: palette(grey, medium);
+      color: $font-medium;
       font-weight: normal;
       line-height: 1em;
       word-break: break-word;
@@ -196,14 +193,11 @@ export default {
     text-align: right;
     margin-top: 2em;
     display: flex;
-    .re-button {
-      margin-right: 0.5em;
-      margin-bottom: 0;
-      display: inline-block;
+    .button {
       width: 100%;
-      min-height: 38px;
-      &:last-child() {
-        margin-right: 0;
+      justify-content: center;
+      &:last-of-type {
+        margin-left: $base-space;
       }
     }
   }
diff --git a/frontend/components/commons/results/PaginationEndAlert.vue b/frontend/components/commons/results/PaginationEndAlert.vue
index aa4e0ce55b..a14fc30b1c 100644
--- a/frontend/components/commons/results/PaginationEndAlert.vue
+++ b/frontend/components/commons/results/PaginationEndAlert.vue
@@ -25,7 +25,7 @@ export default {
   padding: 3em 3em 0 3em;
   display: flex;
   align-items: center;
-  color: palette(grey, medium);
+  color: $font-medium;
   .svg-icon {
     margin-right: 2em;
   }
diff --git a/frontend/components/commons/results/RecordExtraActions.vue b/frontend/components/commons/results/RecordExtraActions.vue
index 43e53f9aac..c2dde40928 100644
--- a/frontend/components/commons/results/RecordExtraActions.vue
+++ b/frontend/components/commons/results/RecordExtraActions.vue
@@ -24,11 +24,11 @@
       <div v-if="hasMetadata" @click="showMetadata()">
         <span>View metadata</span>
       </div>
-      <re-action-tooltip tooltip="Copied">
+      <base-action-tooltip tooltip="Copied">
         <div @click="$copyToClipboard(record.clipboardText)">
           <span>Copy text</span>
         </div>
-      </re-action-tooltip>
+      </base-action-tooltip>
       <div
         v-if="allowChangeStatus"
         :class="record.status === 'Discarded' ? 'disabled' : null"
@@ -124,6 +124,7 @@ export default {
     right: 0.9em;
   }
 }
+
 .extra-actions {
   position: relative;
   &__button {
@@ -147,7 +148,7 @@ export default {
     }
     div {
       padding: 0.5em;
-      color: $font-secondary-dark;
+      color: $font-secondary-medium-dark;
       cursor: pointer;
       display: block;
       background: white;
@@ -162,7 +163,7 @@ export default {
       }
       &:hover {
         transition: background 0.3s ease-in-out;
-        background: palette(grey, bg);
+        background: palette(grey, 800);
       }
     }
   }
diff --git a/frontend/components/commons/results/ResultsEmpty.vue b/frontend/components/commons/results/ResultsEmpty.vue
index c2061064c4..845b51598f 100644
--- a/frontend/components/commons/results/ResultsEmpty.vue
+++ b/frontend/components/commons/results/ResultsEmpty.vue
@@ -64,7 +64,7 @@ export default {
   &__title {
     @include font-size(30px);
     font-weight: 400;
-    color: palette(grey, medium);
+    color: $font-medium;
   }
   &__message {
     max-width: 600px;
diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
index a637d09bad..81f0634269 100644
--- a/frontend/components/commons/results/ResultsList.vue
+++ b/frontend/components/commons/results/ResultsList.vue
@@ -69,13 +69,13 @@
           </template>
         </DynamicScroller>
       </div>
-      <RePagination
+      <base-pagination
         :total-items="dataset.results.total"
         :pagination-settings="dataset.viewSettings.pagination"
         @changePage="onPagination"
       />
     </div>
-    <LazyReModal
+    <lazy-base-modal
       modal-class="modal-secondary"
       modal-position="modal-center"
       :modal-custom="true"
@@ -83,7 +83,7 @@
       :modal-visible="selectedRecord !== undefined"
       @close-modal="onCloseMetadata"
     >
-      <Metadata
+      <metadata
         v-if="selectedRecord"
         :applied-filters="dataset.query.metadata"
         :metadata-items="selectedRecord.metadata"
@@ -91,7 +91,7 @@
         @metafilterApply="onApplyMetadataFilter"
         @cancel="onCloseMetadata"
       />
-    </LazyReModal>
+    </lazy-base-modal>
   </span>
 </template>
 <script>
diff --git a/frontend/components/commons/results/ResultsLoading.vue b/frontend/components/commons/results/ResultsLoading.vue
index cc14907b50..3425c5d74a 100644
--- a/frontend/components/commons/results/ResultsLoading.vue
+++ b/frontend/components/commons/results/ResultsLoading.vue
@@ -51,8 +51,8 @@ export default {
   display: block;
   width: 100%;
   background: white;
-  border: 1px solid palette(grey, smooth);
-  margin-bottom: 8px;
+  border: 1px solid palette(grey, 600);
+  margin-bottom: $base-space-between-records;
   border-radius: $border-radius-m;
 }
 @keyframes load {
diff --git a/frontend/components/commons/results/ResultsRecord.vue b/frontend/components/commons/results/ResultsRecord.vue
index 05b80a17db..420171af26 100644
--- a/frontend/components/commons/results/ResultsRecord.vue
+++ b/frontend/components/commons/results/ResultsRecord.vue
@@ -23,14 +23,14 @@
         item.status === 'Discarded' ? 'discarded' : null,
       ]"
     >
-      <ReCheckbox
+      <base-checkbox
         v-if="annotationEnabled"
         class="list__checkbox"
         :value="item.selected"
         @change="onCheckboxChanged($event, item.id)"
-      ></ReCheckbox>
+      ></base-checkbox>
       <slot :record="item" />
-      <RecordExtraActions
+      <record-extra-actions
         :key="item.id"
         :allow-change-status="annotationEnabled"
         :record="item"
@@ -111,25 +111,22 @@ export default {
 .list {
   &__checkbox.re-checkbox {
     position: absolute;
-    left: 1.4em;
-    top: 0.2em;
+    left: $base-space * 2;
+    top: $base-space * 2;
+    margin: 0;
     width: auto;
   }
   &__item {
     position: relative;
-    background: $lighter-color;
+    background: palette(white);
     border-radius: $border-radius-m;
     display: inline-block;
     width: 100%;
-    transition: 0.3s ease-in-out;
-    border: 1px solid palette(grey, smooth);
-    margin-bottom: 8px;
-    &__asterisk {
-      @include font-size(24px);
-      color: $secondary-color;
-    }
+    border: 1px solid palette(grey, 600);
+    margin-bottom: $base-space-between-records;
     &--annotation-mode {
       @extend .list__item !optional;
+      padding-left: $base-space;
       &.discarded {
         opacity: 0.5;
         transition: 0.3s ease-in-out;
@@ -139,12 +136,6 @@ export default {
         }
       }
     }
-    &__checkbox.re-checkbox {
-      position: absolute;
-      left: 1.2em;
-      top: 1.2em;
-      width: auto;
-    }
   }
 }
 .list-enter-active,
diff --git a/frontend/components/commons/results/StatusTag.vue b/frontend/components/commons/results/StatusTag.vue
index 96df415242..7a9d888a83 100644
--- a/frontend/components/commons/results/StatusTag.vue
+++ b/frontend/components/commons/results/StatusTag.vue
@@ -38,7 +38,7 @@ export default {
   right: 3.6em;
   display: flex;
   align-items: center;
-  background: $secondary-color;
+  background: palette(blue, 200);
   color: palette(white);
   border-radius: 50px;
   padding: 0.7em 1em;
diff --git a/frontend/components/commons/sidebar/SidebarButton.vue b/frontend/components/commons/sidebar/SidebarButton.vue
index e87100f9a4..ce6d17cd0f 100644
--- a/frontend/components/commons/sidebar/SidebarButton.vue
+++ b/frontend/components/commons/sidebar/SidebarButton.vue
@@ -47,7 +47,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$color: #333346;
 .sidebar-button {
   &__icon-help {
     left: 5px;
@@ -60,7 +59,7 @@ $color: #333346;
   &.mode {
     &:hover {
       .svg-icon {
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
         border-radius: $border-radius;
       }
     }
@@ -68,7 +67,7 @@ $color: #333346;
   &.active {
     &.mode {
       .svg-icon {
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
         border-radius: $border-radius;
       }
     }
@@ -86,7 +85,7 @@ $color: #333346;
         position: absolute;
         left: 0;
         top: 0;
-        background: $color;
+        background: palette(grey, 100);
       }
     }
   }
@@ -97,7 +96,7 @@ $color: #333346;
   margin: auto;
   width: 28px;
   height: 28px;
-  fill: $color;
+  fill: palette(grey, 100);
   padding: 0.5em;
   box-sizing: content-box;
   margin-bottom: 0.5em;
diff --git a/frontend/components/commons/sidebar/SidebarMenu.vue b/frontend/components/commons/sidebar/SidebarMenu.vue
index 84aef34e5b..e4865f5282 100644
--- a/frontend/components/commons/sidebar/SidebarMenu.vue
+++ b/frontend/components/commons/sidebar/SidebarMenu.vue
@@ -91,7 +91,6 @@ export default {
 
 <style lang="scss" scoped>
 $sidebar-button-size: 45px;
-$color: #333346;
 .sidebar {
   top: 0;
   width: $sidebar-button-size;
@@ -111,7 +110,7 @@ $color: #333346;
     text-align: center;
     font-weight: 600;
     @include font-size(12px);
-    color: $color;
+    color: $font-dark;
     margin-bottom: 0.5em;
   }
   a {
@@ -127,25 +126,6 @@ $color: #333346;
   }
 }
 a[data-title]:not(.active) {
-  @extend %hastooltip;
-  &:after {
-    padding: 0.5em 1em;
-    top: 0;
-    right: calc(100% + 10px);
-    transform: none;
-    background: $color;
-    color: white;
-    border: none;
-    border-radius: 3px;
-    @include font-size(14px);
-    font-weight: 600;
-  }
-  &:before {
-    right: calc(100% + 3px);
-    top: 0.65em;
-    border-top: 7px solid transparent;
-    border-bottom: 7px solid transparent;
-    border-left: 7px solid $color;
-  }
+  @extend %has-tooltip--left;
 }
 </style>
diff --git a/frontend/components/commons/sidebar/SidebarPanel.vue b/frontend/components/commons/sidebar/SidebarPanel.vue
index c1a66340d3..ccd2907b44 100644
--- a/frontend/components/commons/sidebar/SidebarPanel.vue
+++ b/frontend/components/commons/sidebar/SidebarPanel.vue
@@ -55,11 +55,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$topbarHeight: 56px;
-$sidebarMenuWidth: 70px;
 .sidebar {
   $this: &;
-  min-height: calc(100vh - $topbarHeight);
   width: $sidebarPanelWidth;
   position: relative;
   top: 0;
@@ -68,7 +65,7 @@ $sidebarMenuWidth: 70px;
   padding: 1em 1.5em;
   transition: right 0.25s linear 0.2s;
   z-index: -1;
-  border-left: 1px solid palette(grey, smooth);
+  border-left: 1px solid palette(grey, 600);
   &:hover {
     #{$this}__close-button:not(.zoom-out) {
       opacity: 1;
@@ -80,8 +77,8 @@ $sidebarMenuWidth: 70px;
     position: absolute;
     left: -2.5em;
     top: 1px;
-    border-radius: 3px;
-    background: palette(grey, smooth);
+    border-radius: $border-radius-s;
+    background: palette(grey, 600);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -96,7 +93,7 @@ $sidebarMenuWidth: 70px;
       animation: zoom-out 0.3s ease-out forwards;
     }
     .svg-icon {
-      color: $secondary-color;
+      color: palette(blue, 300);
     }
   }
   &__content {
@@ -116,30 +113,61 @@ $sidebarMenuWidth: 70px;
     }
   }
   @include media(">desktop") {
-    border-radius: 1px;
     margin-left: 1em;
     display: block !important;
     right: -$sidebarPanelWidth + 1px;
   }
   &__content {
-    border-radius: 2px;
+    color: $font-secondary-medium-dark;
     @include font-size(13px);
     &:first-child {
       padding-top: 0;
     }
   }
-  ::v-deep {
-    .sidebar__title {
-      margin-bottom: 2em;
-      color: $font-secondary-dark;
-      margin-top: 0.2em;
+  :deep() {
+    .metrics__title {
+      margin-top: 0;
+      margin-bottom: $base-space * 4;
       @include font-size(20px);
       font-weight: 700;
     }
-    .sidebar__subtitle {
+    .metrics__info {
+      margin-top: 0;
+      margin-bottom: $base-space * 2;
       @include font-size(15px);
-      color: $font-secondary-dark;
       font-weight: 600;
+      display: flex;
+      &__name {
+        margin: 0;
+      }
+      &__counter {
+        margin: 0 0 0 auto;
+      }
+      & + .re-progress__container {
+        margin-top: -$base-space;
+      }
+    }
+    .metrics__list {
+      list-style: none;
+      padding-left: 0;
+      margin-bottom: $base-space * 3;
+      li {
+        display: flex;
+        align-items: center;
+        margin-bottom: $base-space;
+      }
+      &__name {
+        display: block;
+        width: calc(100% - 40px);
+        hyphens: auto;
+        word-break: break-word;
+        @include font-size(13px);
+      }
+      &__counter {
+        margin-right: 0;
+        margin-left: auto;
+        @include font-size(14px);
+      }
     }
   }
 }
diff --git a/frontend/components/commons/sidebar/SidebarProgress.vue b/frontend/components/commons/sidebar/SidebarProgress.vue
index a6ad19284d..216635ff26 100644
--- a/frontend/components/commons/sidebar/SidebarProgress.vue
+++ b/frontend/components/commons/sidebar/SidebarProgress.vue
@@ -17,39 +17,39 @@
 
 <template>
   <div v-if="annotationsProgress">
-    <p class="sidebar__title">Progress</p>
-    <div class="progress__info">
-      <p class="progress__info__text">Total</p>
-      <span class="progress__info__percent">{{ progress | percent }}</span>
+    <p class="metrics__title">Progress</p>
+    <div class="metrics__info">
+      <p class="metrics__info__name">Total</p>
+      <span class="metrics__info__counter">{{ progress | percent }}</span>
     </div>
-    <div class="progress__numbers">
+    <div class="metrics__numbers">
       <span>{{ totalAnnotated | formatNumber }}</span
       >/{{ total | formatNumber }}
     </div>
-    <ReProgress
+    <base-progress
       re-mode="determinate"
       :multiple="true"
       :progress="(totalValidated * 100) / total"
       :progress-secondary="(totalDiscarded * 100) / total"
-    ></ReProgress>
+    ></base-progress>
     <div class="scroll">
-      <div>
-        <div class="info">
+      <ul class="metrics__list">
+        <li>
           <span class="color-bullet validated"></span>
-          <label>Validated</label>
-          <span class="records-number">
+          <label class="metrics__list__name">Validated</label>
+          <span class="metrics__list__counter">
             {{ totalValidated | formatNumber }}
           </span>
-        </div>
-        <div class="info">
+        </li>
+        <li>
           <span class="color-bullet discarded"></span>
-          <label>Discarded</label>
-          <span class="records-number">
+          <label class="metrics__list__name">Discarded</label>
+          <span class="metrics__list__counter">
             {{ totalDiscarded | formatNumber }}
           </span>
-        </div>
-        <slot></slot>
-      </div>
+        </li>
+      </ul>
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -95,37 +95,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-label {
-  margin-top: 1.2em;
-  margin-bottom: 0.5em;
-  display: block;
-  width: calc(100% - 40px);
-  hyphens: auto;
-  word-break: break-word;
-}
-.total {
-  font-weight: 600;
-  max-width: 100%;
-  width: 100%;
-  margin-bottom: 1em;
-}
-.subtitle {
-  display: inline-block;
-  margin-top: 3em;
-  margin-bottom: 0.5em;
-}
-.info {
-  position: relative;
-  display: flex;
-  margin-bottom: 0.7em;
-  color: $font-secondary-dark;
-  label {
-    margin: 0; // for tagger
-    &[class^="color_"] {
-      padding: 0.3em;
-    }
-  }
-}
 .scroll {
   max-height: calc(100vh - 300px);
   padding-right: 1em;
@@ -133,66 +102,11 @@ label {
   overflow: auto;
   @extend %hide-scrollbar;
 }
-.records-number {
-  margin-right: 0;
-  margin-left: auto;
-}
-.progress__block {
-  margin-bottom: 2.5em;
-  position: relative;
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-  &.loading-skeleton {
-    opacity: 0;
-  }
-  .re-progress {
-    margin-bottom: 0.5em;
-  }
-  p {
-    @include font-size(18px);
-    margin-top: 0;
-    font-weight: 600;
-    &:not(.button) {
-      pointer-events: none;
-    }
-  }
-  .button-icon {
-    color: $primary-color;
-    padding: 0;
-    display: flex;
-    margin-left: auto;
-    margin-right: 0;
-    margin-top: 2em;
-    .svg-icon {
-      fill: $primary-color;
-      margin-left: 1em;
-    }
-  }
-}
-.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: 1.5em;
-    &__text {
-      margin: 0;
-    }
-    &__percent {
-      margin-top: 0;
-      margin-right: 0;
-      margin-left: auto;
-    }
-  }
+.metrics {
   &__numbers {
-    color: $font-secondary-dark;
-    margin-bottom: 1.5em;
+    color: $font-secondary-medium-dark;
+    margin-bottom: $base-space * 3;
+    margin-top: $base-space * 3;
     @include font-size(18px);
     span {
       @include font-size(40px);
diff --git a/frontend/components/commons/sidebar/StatsSelector.vue b/frontend/components/commons/sidebar/StatsSelector.vue
index 1dadd9bd7e..1c67fe8508 100644
--- a/frontend/components/commons/sidebar/StatsSelector.vue
+++ b/frontend/components/commons/sidebar/StatsSelector.vue
@@ -24,7 +24,7 @@
     >
       {{ selectedOption.name }}
     </p>
-    <p class="sidebar__subtitle" v-else>{{ selectedOption.name }}</p>
+    <p class="metrics__info" v-else>{{ selectedOption.name }}</p>
     <transition name="fade">
       <ul
         v-if="showOptionsSelector"
@@ -83,21 +83,21 @@ export default {
   margin-bottom: 2em;
   &__header {
     cursor: pointer;
-    border: 1px solid palette(grey, smooth);
+    border: 1px solid palette(grey, 600);
     border-radius: $border-radius;
     padding: 0.5em 1em;
-    color: $font-secondary-dark;
+    color: $font-secondary-medium-dark;
     @include font-size(13px);
     display: flex;
     align-items: center;
     &:after {
       content: "";
-      border-color: palette(grey, dark);
+      border-color: $font-dark;
       border-style: solid;
       border-width: 1px 1px 0 0;
       display: inline-block;
-      height: 8px;
-      width: 8px;
+      height: $base-space;
+      width: $base-space;
       transform: rotate(133deg);
       transition: all 1.5s ease;
       margin-bottom: 2px;
@@ -108,7 +108,7 @@ export default {
     display: block;
     padding: 1em;
     background: white;
-    border: 1px solid palette(grey, smooth);
+    border: 1px solid palette(grey, 600);
     list-style: none;
     position: absolute;
     top: 100%;
diff --git a/frontend/components/commons/sidebar/TaskSidebar.vue b/frontend/components/commons/sidebar/TaskSidebar.vue
index 5534c75f0c..040e1faa37 100644
--- a/frontend/components/commons/sidebar/TaskSidebar.vue
+++ b/frontend/components/commons/sidebar/TaskSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sidebar__container" v-if="dataset">
-    <SidebarPanel
+    <sidebar-panel
       :class="[currentTask, currentMetric ? 'visible' : '']"
       :dataset="dataset"
       @close-panel="onClosePanel"
@@ -16,7 +16,7 @@
           </div>
         </span>
       </transition>
-    </SidebarPanel>
+    </sidebar-panel>
     <component
       ref="menu"
       :is="currentTaskSidebar"
diff --git a/frontend/components/core/ReButton.vue b/frontend/components/core/ReButton.vue
deleted file mode 100644
index a1bde4c3ed..0000000000
--- a/frontend/components/core/ReButton.vue
+++ /dev/null
@@ -1,380 +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>
-  <a
-    v-if="href"
-    class="re-button"
-    :class="{ loading: loading, centered: centered }"
-    :href="href"
-    :loading="loading"
-    :disabled="disabled"
-    :target="target"
-    :rel="newRel"
-    @click="$emit('click', $event)"
-  >
-    <!-- <re-spinner v-if="loading"></re-spinner> -->
-    <slot />
-  </a>
-
-  <button
-    v-else
-    class="re-button"
-    :class="{ loading: loading, centered: centered }"
-    tabindex="0"
-    :loading="loading"
-    :type="type"
-    :disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <!-- <re-spinner v-if="loading"></re-spinner> -->
-    <slot />
-  </button>
-</template>
-
-<script>
-// import reSpinner from '@recognai/re-commons/src/components/elements/core/reSpinner/reSpinner';
-
-export default {
-  name: "ReButton",
-  props: {
-    href: String,
-    target: String,
-    rel: String,
-    type: {
-      type: String,
-      default: "button",
-    },
-    loading: Boolean,
-    disabled: Boolean,
-    centered: Boolean,
-  },
-  computed: {
-    newRel() {
-      if (this.target === "_blank") {
-        return this.rel || "noopener";
-      }
-
-      return this.rel;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.button-primary {
-  @extend %button;
-  background-color: $primary-color;
-  color: $lighter-color;
-  display: flex;
-  .svg-icon {
-    margin: auto 0.5em auto -0.3em;
-    fill: $lighter-color;
-  }
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    background-color: $primary-darken-color;
-  }
-  &[disabled] {
-    background-color: $primary-lighten-color;
-    box-shadow: none;
-  }
-  &--main {
-    @extend .button-primary;
-    box-shadow: $shadow;
-    min-height: 46px;
-    line-height: 46px;
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      background-color: $primary-color;
-    }
-  }
-  &--small {
-    @extend .button-primary;
-    text-transform: none;
-    min-height: 30px;
-    line-height: 30px;
-    min-width: auto;
-  }
-  &--outline {
-    @extend .button-primary;
-    background: transparent;
-    border: 1px solid $primary-color;
-    color: $primary-color;
-    text-transform: none;
-    display: flex;
-    &:hover,
-    &:focus {
-      background: transparent;
-      border-color: darken($primary-color, 10%);
-      color: darken($primary-color, 10%);
-    }
-    &[disabled] {
-      background-color: transparent;
-      opacity: 0.6;
-    }
-  }
-}
-
-.button-secondary {
-  @extend %button;
-  background: $primary-color;
-  color: $lighter-color;
-  .svg-icon {
-    margin: auto 0.5em auto -0.3em;
-    fill: $secondary-color;
-  }
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    background-color: $primary-darken-color;
-  }
-  &[disabled] {
-    background-color: lighten($primary-color, 20%);
-  }
-  &--small {
-    @extend .button-secondary;
-    text-transform: none;
-    min-height: 30px;
-    line-height: 30px;
-    min-width: auto;
-  }
-  &--outline {
-    @extend .button-secondary;
-    background: transparent;
-    border: 1px solid $line-smooth-color;
-    color: $secondary-color;
-    text-transform: none;
-    display: flex;
-    &:hover,
-    &:focus {
-      background: transparent;
-      border-color: darken($line-smooth-color, 10%);
-      color: darken($secondary-color, 10%);
-    }
-    &[disabled] {
-      background-color: transparent;
-      opacity: 0.6;
-    }
-  }
-}
-
-.button-tertiary {
-  @extend %button;
-  background: $font-medium-color;
-  color: $lighter-color;
-  .svg-icon {
-    margin-right: 1em;
-    vertical-align: middle;
-    fill: $lighter-color;
-  }
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    background-color: darken($font-medium-color, 10%);
-  }
-  &[disabled] {
-    background-color: lighten($font-medium-color, 20%);
-  }
-  &--outline {
-    @extend .button-tertiary;
-    background: transparent;
-    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;
-      opacity: 0.6;
-    }
-  }
-  &--small {
-    @extend .button-tertiary;
-    text-transform: none;
-    min-height: 30px;
-    line-height: 30px;
-    min-width: auto;
-  }
-}
-
-.button-quaternary {
-  @extend %button;
-  background: $lighter-color;
-  color: palette(grey, dark);
-  border: 1px solid palette(grey, smooth);
-  box-shadow: inset 0 -2px 6px 0 rgba(223, 223, 223, 0.5);
-  .svg-icon {
-    margin: auto 1em auto auto;
-    vertical-align: middle;
-    fill: palette(grey, dark);
-  }
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    background-color: $lighter-color;
-    border: 1px solid darken(palette(grey, smooth), 10%);
-  }
-  &[disabled] {
-    background-color: $lighter-color;
-  }
-  &--small {
-    @extend .button-quaternary;
-    text-transform: none;
-    min-height: 30px;
-    line-height: 30px;
-    min-width: auto;
-  }
-  &--outline {
-    @extend .button-quaternary;
-    background: transparent;
-    border: 1px solid $lighter-color;
-    color: $lighter-color;
-    text-transform: none;
-    display: flex;
-    box-shadow: none;
-    &:hover,
-    &:focus {
-      background: transparent;
-      border-color: darken($lighter-color, 10%);
-      color: darken($lighter-color, 10%);
-    }
-    &[disabled] {
-      background-color: transparent;
-      opacity: 0.6;
-    }
-  }
-}
-
-.button-clear {
-  @extend %button;
-  @extend %clear;
-  border-radius: $border-radius;
-  padding: 0.5em;
-  transition: all 0.2s ease;
-  @include font-size(14px);
-  background: none;
-  &:hover {
-    transition: all 0.2s ease;
-    background: palette(grey, bg);
-  }
-  &--small {
-    @extend %button;
-    @include font-size(12px);
-    min-height: 26px;
-    line-height: 26px;
-    min-width: auto;
-    background: none;
-    text-transform: none;
-    color: $font-medium-color;
-  }
-  &[disabled] {
-    opacity: 0.4;
-  }
-}
-
-.button-icon {
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  padding: 15px;
-  outline: none;
-  .hide {
-    display: none;
-  }
-  .show {
-    display: block;
-  }
-}
-
-.re-button {
-  font-family: $sff;
-  .spinner {
-    position: absolute;
-    left: 1em;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-  }
-  &.loading {
-    padding-left: 3.6em;
-    .svg-icon {
-      display: none;
-    }
-  }
-}
-
-.external-link,
-.external-link a {
-  position: relative;
-  color: $primary-color;
-  display: inline-block;
-  margin-left: 1em;
-  height: 30px;
-  line-height: 30px;
-  &:after {
-    line-height: 1.4em;
-  }
-  &:hover,
-  &:focus {
-    transition: $swift-ease-in-out;
-    color: darken($primary-color, 5%);
-    .svg-icon {
-      fill: darken($primary-color, 5%);
-    }
-  }
-  .svg-icon {
-    margin-left: 0.5em;
-  }
-}
-.button-action {
-  position: relative;
-  color: $font-secondary;
-  display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  margin-bottom: 0;
-  text-transform: none;
-  &:hover,
-  &:focus {
-    transition: $swift-ease-in-out;
-    color: darken($primary-color, 5%);
-    .svg-icon {
-      fill: darken($primary-color, 5%);
-    }
-  }
-  .svg-icon {
-    margin-right: 0.5em;
-  }
-}
-</style>
diff --git a/frontend/components/core/ReShowMoreData.vue b/frontend/components/core/ReShowMoreData.vue
deleted file mode 100644
index 39ed098d81..0000000000
--- a/frontend/components/core/ReShowMoreData.vue
+++ /dev/null
@@ -1,73 +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 v-if="items && items < total" class="show-more-data">
-    <p>{{ items }} of {{ total }} records</p>
-    <ReProgress
-      class="re-progress--minimal"
-      re-mode="determinate"
-      :progress="shownRecordsProgress"
-    />
-    <ReButton class="button-tertiary--outline" @click="$emit('moredata')">
-      Next {{ moreDataSize }} records
-    </ReButton>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      default: undefined,
-      type: Number,
-    },
-    total: {
-      default: undefined,
-      type: Number,
-    },
-    moreDataSize: {
-      type: Number,
-      default: 5,
-    },
-  },
-  data: () => ({}),
-  computed: {
-    shownRecordsProgress() {
-      const progress = (100 * this.items) / this.total;
-      return progress;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.show-more-data {
-  padding-top: 1em;
-  text-align: center;
-  display: block;
-  margin-bottom: 2em;
-  @include font-size(13px);
-  .re-progress {
-    width: 300px;
-    margin: 1.5em auto;
-    background: $line-smooth-color;
-  }
-  .re-button {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/frontend/components/core/logos/JupyterLogo.vue b/frontend/components/core/logos/JupyterLogo.vue
deleted file mode 100644
index 1265d4dd4a..0000000000
--- a/frontend/components/core/logos/JupyterLogo.vue
+++ /dev/null
@@ -1,63 +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>
-  <svg
-    width="24px"
-    height="23px"
-    viewBox="0 0 24 23"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <g
-      id="Dashboard"
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g id="Group-16">
-        <path
-          id="Shape"
-          d="M16.8296164,1.267286 C16.8459556,1.53458853 16.78236,1.80070228 16.6469233,2.03172897 C16.5114866,2.26276013 16.3103494,2.44824201 16.0691242,2.56455533 C15.827899,2.68086417 15.5575127,2.72273535 15.292409,2.68483722 C15.0273053,2.64693461 14.7794836,2.53097882 14.580513,2.35173583 C14.3815429,2.17249731 14.2404318,1.93808303 14.1751561,1.67836012 C14.1098805,1.41863722 14.1233949,1.14535947 14.2139777,0.893345797 C14.3045605,0.641332123 14.4681116,0.421983694 14.6837953,0.263247703 C14.8994795,0.104511714 15.1575354,0.0135720944 15.4250838,0.00201353347 C15.6005012,-0.00763915332 15.7760974,0.0174806973 15.9417677,0.0759285629 C16.1074424,0.134376161 16.2599288,0.224999187 16.3904584,0.342585309 C16.5209835,0.460171877 16.6269821,0.602401619 16.7023493,0.761095602 C16.7777165,0.919789583 16.8209687,1.09181941 16.8296164,1.267286 Z"
-          fill="#767677"
-        />
-        <path
-          id="Shape"
-          d="M8.96200343,16.8507632 C5.38107634,16.8507632 2.23379247,15.5655962 0.606447355,13.6676861 C1.2378625,15.3750731 2.37717972,16.8480459 3.87104563,17.8883408 C5.36489813,18.9286447 7.14164145,19.4863015 8.96200343,19.4863015 C10.78241,19.4863015 12.5591087,18.9286447 14.0530014,17.8883408 C15.5468494,16.8480459 16.6861622,15.3750731 17.3176042,13.6676861 C15.694241,15.5655962 12.5588852,16.8507632 8.96200343,16.8507632 Z"
-          fill="#F37726"
-        />
-        <path
-          id="Shape"
-          d="M8.96200343,4.5092303 C12.5429751,4.5092303 15.6902635,5.79439724 17.3176042,7.69229395 C16.6861622,5.9849203 15.5468494,4.51194753 14.0530014,3.4716526 C12.5591087,2.43135767 10.78241,1.87367854 8.96200343,1.87367854 C7.14164145,1.87367854 5.36489813,2.43135767 3.87104563,3.4716526 C2.37717972,4.51194753 1.2378625,5.9849203 0.606447355,7.69229395 C2.23379247,5.79041973 5.36516628,4.5092303 8.96200343,4.5092303 Z"
-          fill="#F37726"
-        />
-        <path
-          id="Shape"
-          d="M4.03236745,20.5441243 C4.05337231,20.8808099 3.97367003,21.216128 3.80341891,21.5073538 C3.63316331,21.7985795 3.38006811,22.032529 3.076378,22.1793976 C2.7726879,22.3262663 2.43214989,22.3794041 2.09815468,22.3320404 C1.764155,22.2846722 1.45181715,22.1389521 1.20093416,21.9134403 C0.950050729,21.6879285 0.771980875,21.3928325 0.689410755,21.0657555 C0.606841039,20.7386741 0.623509609,20.3944222 0.737292908,20.0768465 C0.85107626,19.7592754 1.05682292,19.4827664 1.32831749,19.2825476 C1.59981653,19.0823279 1.92477071,18.9674633 2.26178257,18.9525884 C2.48255263,18.9407797 2.70348804,18.9725839 2.91196802,19.0461839 C3.12044352,19.1197845 3.31237882,19.2337381 3.47680221,19.3815359 C3.6412256,19.5293346 3.77492379,19.7080771 3.87024565,19.9075608 C3.96557199,20.1070399 4.02066282,20.3233498 4.03236745,20.5441243 Z"
-          fill="#9E9E9E"
-        />
-        <path
-          id="Shape"
-          d="M1.01340989,4.07669993 C0.820455634,4.08202713 0.630232013,4.03018533 0.466662225,3.92769501 C0.303094223,3.82520021 0.173481698,3.67662879 0.0941257693,3.50067059 C0.0147699306,3.32470794 -0.0107862853,3.12921075 0.020671046,2.93876368 C0.0521283765,2.7483166 0.139194609,2.57141989 0.270920583,2.4303262 C0.402646998,2.28923072 0.573152413,2.19023346 0.760993993,2.14578435 C0.948831105,2.10133529 1.14561987,2.11341903 1.32661475,2.1805158 C1.50760517,2.24761293 1.66471708,2.36672704 1.77818804,2.52287899 C1.89166346,2.67903183 1.95643442,2.86525112 1.9643537,3.05811599 C1.97189311,3.31890255 1.87626288,3.57214076 1.69822207,3.76284258 C1.52018128,3.95354887 1.27409813,4.06633158 1.01340989,4.07669993 Z"
-          fill="#616262"
-        />
-      </g>
-    </g>
-  </svg>
-</template>
diff --git a/frontend/components/core/reInputContainer/Readme.md b/frontend/components/core/reInputContainer/Readme.md
deleted file mode 100644
index 8b34372bfa..0000000000
--- a/frontend/components/core/reInputContainer/Readme.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```
-        <re-input-container class='re-input-invalid'>
-          <label>Email</label>
-          <re-input required></re-input>
-          <span class="re-error">error text</span>
-        </re-input-container>
-```
-```
-    <re-input-container>
-        <label>New Password</label>
-        <re-input required name="password" type="password"></re-input>
-        <span class="re-error">error</span>
-    </re-input-container>
-```
diff --git a/frontend/components/text-classifier/header/ExplainHelpInfo.vue b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
index e499e345dc..d65318a68c 100644
--- a/frontend/components/text-classifier/header/ExplainHelpInfo.vue
+++ b/frontend/components/text-classifier/header/ExplainHelpInfo.vue
@@ -72,7 +72,7 @@ export default {
     border: 1px solid #f48e5f57;
     padding: 3em 2em 0.5em 2em;
     background: #ffffff87;
-    color: palette(grey, medium);
+    color: $font-medium;
     border-radius: 1px;
     position: relative;
     .atom {
@@ -81,7 +81,7 @@ export default {
     }
     &__title {
       @include font-size(16px);
-      color: palette(grey, medium);
+      color: $font-medium;
       font-weight: 600;
       margin-top: 0;
     }
diff --git a/frontend/components/text-classifier/header/global-actions/AnnotationLabelSelector.vue b/frontend/components/text-classifier/header/global-actions/AnnotationLabelSelector.vue
index 01a25d6b3a..90540cbb44 100644
--- a/frontend/components/text-classifier/header/global-actions/AnnotationLabelSelector.vue
+++ b/frontend/components/text-classifier/header/global-actions/AnnotationLabelSelector.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div>
-    <FilterDropdown
+    <filter-dropdown
       class="selector"
       :visible="visible"
       @visibility="onVisibility"
@@ -26,81 +26,49 @@
         <span class="dropdown__text">Annotate as...</span>
       </template>
       <template #dropdown-content>
-        <input
+        <select-options-search
+          allow-clear
+          @clear="clearSearchText"
           v-model="searchText"
-          type="text"
-          autofocus
           placeholder="Search label..."
         />
-        <svgicon
-          v-if="searchText != undefined"
-          class="clean-search"
-          name="close"
-          width="10"
-          height="10"
-          color="#9b9b9b"
-          @click="cleanSearchText"
-        ></svgicon>
-        <ul v-if="multiLabel" class="selector__list">
-          <li
-            v-for="option in filterSearch(options, searchText)"
-            :key="option"
-            :title="option"
-            class="selector__option"
-          >
-            <ReCheckbox
-              :id="option"
-              v-model="selectedOptions"
-              class="re-checkbox--dark"
-              :value="option"
-            >
-              {{ option }}
-            </ReCheckbox>
-          </li>
-        </ul>
-        <ul v-else class="selector__list">
-          <li
-            v-for="option in filterSearch(options, searchText)"
-            :key="option.index"
-            class="selector__option"
-            @click="selected([option])"
-          >
-            <span :data-title="option">
-              {{ option | truncate(30) }}
-            </span>
-          </li>
-        </ul>
+        <select-options
+          v-if="multiLabel"
+          ref="options"
+          type="multiple"
+          v-model="selectedOptions"
+          :options="filterSearch(options, searchText)"
+        />
+        <select-options
+          v-else
+          ref="options"
+          type="single"
+          :options="filterSearch(options, searchText)"
+          @selected="selectedOption"
+        />
         <div
           v-if="multiLabel && filterSearch(options, searchText).length"
           class="selector__buttons"
         >
-          <ReButton
-            class="button-tertiary--small button-tertiary--outline"
+          <base-button
+            class="primary outline small"
             @click="onVisibility(false)"
           >
             Cancel
-          </ReButton>
-          <ReButton
-            class="button-primary--small"
-            @click="selected(selectedOptions)"
+          </base-button>
+          <base-button
+            class="primary small"
+            @click="selectedOption(selectedOptions)"
           >
             Annotate
-          </ReButton>
+          </base-button>
         </div>
       </template>
-    </FilterDropdown>
+    </filter-dropdown>
   </div>
 </template>
 <script>
 export default {
-  filters: {
-    truncate(string, value) {
-      if (string.length > value) {
-        return `${string.substring(0, value)}...`;
-      }
-      return string;
-    },
-  },
   props: {
     record: Object,
     options: Array,
@@ -117,13 +85,14 @@ export default {
       this.visible = value;
       this.searchText = undefined;
     },
-    selected(labels) {
-      this.$emit("selected", labels);
+    selectedOption(labels) {
+      const labelsFormat = typeof labels === "string" ? [labels] : labels;
+      this.$emit("selected", labelsFormat);
       this.visible = false;
       this.selectedOptions = [];
     },
 
-    cleanSearchText() {
+    clearSearchText() {
       this.searchText = undefined;
     },
     filterSearch(options, text) {
@@ -153,45 +122,16 @@ export default {
 </script>
 <style lang="scss" scoped>
 .selector {
-  &__option {
-    display: block;
-    padding: 0.5em 0;
-    text-align: left;
-    font-weight: 400;
-    word-break: break-word;
-    hyphens: auto;
-    .re-checkbox {
-      margin: 0;
-      display: flex;
-      ::v-deep label {
-        max-width: 140px;
-        display: block;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-    cursor: pointer;
-    &:hover {
-      color: $secondary-color;
-    }
-  }
   &__buttons {
     margin-top: 2em;
     display: flex;
     & > * {
-      display: block;
       width: 100%;
-      margin-right: 0.5em;
-      min-height: 38px;
       justify-content: center;
       &:last-child {
-        margin-right: 0;
+        margin-left: $base-space;
       }
     }
   }
-  ::v-deep .dropdown__content {
-    transform: translate 0;
-  }
 }
 </style>
diff --git a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue b/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
index b3f8ad4142..b6509945c8 100644
--- a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
+++ b/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
@@ -15,11 +15,11 @@
       <div class="rule__metrics">
         <rules-metrics title="Rule Metrics" :dataset="dataset">
           <template #button-bottom>
-            <re-button
-              class="rule__button button-quaternary--outline"
+            <base-button
+              class="rule__button quaternary outline"
               :disabled="isLoading"
               @click="showRulesList"
-              >Manage rules</re-button
+              >Manage rules</base-button
             >
           </template>
         </rules-metrics>
@@ -125,8 +125,8 @@ export default {
   }
   &__container {
     padding: 20px;
-    background: rgba($lighter-color, 0.4);
-    border: 1px solid $lighter-color;
+    background: rgba(palette(white), 0.4);
+    border: 1px solid palette(white);
     width: 100%;
     border-radius: $border-radius;
     &.active {
@@ -136,7 +136,6 @@ export default {
   &__button {
     float: left;
     align-self: flex-start;
-    margin-bottom: 0 !important;
     margin-top: auto;
     clear: both;
   }
@@ -145,7 +144,7 @@ export default {
     @include media(">desktopLarge") {
       min-width: 33%;
     }
-    &::v-deep {
+    &:deep() {
       .rule-metrics__container {
         flex-wrap: wrap;
         height: 100%;
diff --git a/frontend/components/text-classifier/labeling-rules/RuleEmptyQuery.vue b/frontend/components/text-classifier/labeling-rules/RuleEmptyQuery.vue
index 08ac5a15cf..870d0c022c 100644
--- a/frontend/components/text-classifier/labeling-rules/RuleEmptyQuery.vue
+++ b/frontend/components/text-classifier/labeling-rules/RuleEmptyQuery.vue
@@ -21,7 +21,7 @@
       <p class="rule__text">New query</p>
     </div>
     <div class="rule__labels" v-if="labels.length">
-      <ClassifierAnnotationButton
+      <classifier-annotation-button
         v-for="label in visibleLabels"
         :id="label.class"
         :key="`${label.class}`"
@@ -30,7 +30,7 @@
         :data-title="label.class"
         :value="label.class"
       >
-      </ClassifierAnnotationButton>
+      </classifier-annotation-button>
     </div>
     <div v-else class="empty-labels">
       <p>This doesn't have any labels yet.</p>
@@ -130,9 +130,6 @@ export default {
   }
 }
 .feedback-interactions {
-  .list__item--annotation-mode & {
-    padding-right: 200px;
-  }
   &__button {
     margin-top: auto;
     margin-bottom: 0 !important;
@@ -151,7 +148,7 @@ export default {
 }
 .empty-query {
   @include font-size(18px);
-  color: palette(grey, medium);
+  color: $font-medium;
   text-align: center;
   margin-bottom: 2em;
   margin-top: 0;
@@ -159,10 +156,10 @@ export default {
 .label-button {
   margin: 5px;
 }
-.label-button ::v-deep .button {
+.label-button :deep(.button) {
   justify-content: center;
 }
-.label-button:not(.active) ::v-deep .button {
+.label-button:not(.active) :deep(.button) {
   background: #e0e1ff !important;
 }
 .rule {
@@ -173,7 +170,7 @@ export default {
   }
   &__text {
     width: 100%;
-    color: palette(grey, medium);
+    color: $font-medium;
     @include font-size(18px);
     font-weight: 600;
     margin-top: 0;
diff --git a/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue b/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue
index 3b0e46e962..10ed15122d 100644
--- a/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue
+++ b/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue
@@ -26,8 +26,8 @@
           class="rule__records__info"
           v-if="areFiltersApplied.length"
           name="info"
-          width="12"
-          height="12"
+          width="18"
+          height="18"
         />
         <span
           class="rule__records__tooltip"
@@ -41,7 +41,7 @@
         :search-text="searchText"
         @input="onSearchLabel"
       />
-      <ClassifierAnnotationButton
+      <classifier-annotation-button
         v-for="label in visibleLabels"
         :id="label.class"
         :key="`${label.class}`"
@@ -52,21 +52,19 @@
         :data-title="label.class"
         :value="label.class"
       >
-      </ClassifierAnnotationButton>
+      </classifier-annotation-button>
 
-      <a
+      <base-button
         v-if="visibleLabels.length < filteredLabels.length"
-        href="#"
-        class="feedback-interactions__more"
-        @click.prevent="expandLabels"
-        >+{{ filteredLabels.length - visibleLabels.length }}</a
+        class="feedback-interactions__more primary clear"
+        @click="expandLabels"
+        >+{{ filteredLabels.length - visibleLabels.length }}</base-button
       >
-      <a
+      <base-button
         v-else-if="visibleLabels.length > maxVisibleLabels"
-        href="#"
-        class="feedback-interactions__more"
-        @click.prevent="collapseLabels"
-        >Show less</a
+        class="feedback-interactions__more primary clear"
+        @click="collapseLabels"
+        >Show less</base-button
       >
     </div>
     <div v-else class="empty-labels">
@@ -81,13 +79,13 @@
       </p>
     </div>
     <p class="rule__info" v-if="ruleInfo">{{ ruleInfo }}</p>
-    <re-button
+    <base-button
       v-else
       :disabled="!selectedLabelsVModel.length"
-      class="feedback-interactions__button button-primary"
+      class="feedback-interactions__button primary"
       @click="saveRule"
     >
-      Save rule</re-button
+      Save rule</base-button
     >
   </div>
 </template>
@@ -245,7 +243,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$color: #333346;
 %item {
   // width: calc(25% - 5px);
   min-width: 80px;
@@ -264,20 +261,8 @@ $color: #333346;
     padding-right: 200px;
   }
   &__more {
-    align-self: center;
     margin: 3.5px;
-    text-decoration: none;
-    font-weight: 500;
-    font-family: $sff;
-    outline: none;
-    padding: 0.5em;
-    border-radius: $border-radius;
-    transition: all 0.2s ease-in-out;
     display: inline-block;
-    &:hover {
-      transition: all 0.2s ease-in-out;
-      background: palette(grey, bg);
-    }
   }
   &__button {
     margin-top: auto;
@@ -298,10 +283,10 @@ $color: #333346;
 .label-button {
   margin: 5px;
 }
-.label-button ::v-deep .button {
+.label-button :deep(.button) {
   justify-content: center;
 }
-.label-button:not(.active) ::v-deep .button {
+.label-button:not(.active) :deep(.button) {
   background: #e0e1ff !important;
 }
 .rule {
@@ -309,24 +294,17 @@ $color: #333346;
     @include font-size(18px);
     width: 100%;
     height: 20px;
-    color: $font-secondary;
+    color: $font-secondary-medium;
     font-weight: 600;
     margin-top: 0;
     padding: 0;
   }
-  &__text {
-    width: 100%;
-    color: palette(grey, medium);
-    @include font-size(18px);
-    font-weight: 600;
-    margin-top: 0;
-  }
   &__info {
     margin-bottom: 0;
     margin-top: auto;
   }
   &__records {
-    color: palette(grey, dark);
+    color: $font-dark;
     margin-left: auto;
     margin-top: 0;
     white-space: nowrap;
@@ -342,9 +320,9 @@ $color: #333346;
       margin-left: 0.2em;
     }
     &__info {
-      min-width: 12px;
+      min-width: 18px;
       margin-left: 0.3em;
-      fill: $color;
+      fill: palette(grey, 100);
       cursor: pointer;
       &:hover {
         & + .rule__records__tooltip:after,
@@ -360,32 +338,9 @@ $color: #333346;
     }
     &__tooltip {
       position: absolute;
-      right: 6px;
-      @extend %hastooltip;
-      &:after {
-        padding: 0.5em 1em;
-        top: calc(100% + 20px);
-        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: 240px;
-        white-space: break-spaces;
-        text-align: left;
-        line-height: 1.4em;
-      }
-      &:before {
-        right: calc(50% - 7px);
-        top: 13px;
-        border-bottom: 7px solid $color;
-        border-right: 7px solid transparent;
-        border-left: 7px solid transparent;
-      }
+      right: 7px;
+      @extend %has-tooltip--bottom;
+      @extend %tooltip-large-text;
     }
   }
   &__labels {
diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
index 76370349b0..c86f337051 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
@@ -1,14 +1,14 @@
 <template>
   <div v-if="isVisible" class="rules-management">
-    <ReLoading v-if="$fetchState.pending" />
+    <base-loading v-if="$fetchState.pending" />
     <div v-else-if="!$fetchState.error">
       <div class="rules-management__container">
-        <re-button
-          class="rules-management__close button-tertiary--outline"
+        <base-button
+          class="rules-management__close primary outline small"
           @click="hideList"
         >
           <svgicon name="chevron-left" width="12" height="12"></svgicon>Back to
-          query view</re-button
+          query view</base-button
         >
         <p class="rules-management__title">
           Rules
@@ -16,12 +16,12 @@
             >({{ formattedRules.length }})</span
           >
         </p>
-        <ReSearchBar
+        <base-search-bar
           v-if="formattedRules.length"
           placeholder="Search rule by name"
           @input="onSearch"
         />
-        <ReTableInfo
+        <base-table-info
           class="rules-management__table"
           :data="formattedRules"
           :sorted-order="sortedOrder"
@@ -241,14 +241,14 @@ export default {
   @extend %hide-scrollbar;
   &__container {
     padding: 20px 20px 50px 20px;
-    background: rgba($lighter-color, 0.4);
-    border: 1px solid $lighter-color;
+    background: rgba(palette(white), 0.4);
+    border: 1px solid palette(white);
     width: 100%;
     border-radius: $border-radius;
     position: relative;
   }
   &__title {
-    color: $font-secondary-dark;
+    color: $font-secondary-medium-dark;
     @include font-size(22px);
     font-weight: 600;
     margin-top: 0;
@@ -259,7 +259,7 @@ export default {
   }
   &__table {
     margin-bottom: 2em !important;
-    ::v-deep {
+    :deep() {
       .table-info__item__col {
         width: 130px;
       }
diff --git a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
index d9c303d659..6a0862b18e 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
@@ -151,7 +151,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$color: #333346;
 .rule-metrics {
   &__container {
     position: relative;
@@ -160,14 +159,14 @@ $color: #333346;
     max-height: 410px;
     background: $primary-color;
     margin-left: 1em;
-    color: $lighter-color;
+    color: palette(white);
     border-radius: $border-radius;
     margin-bottom: 2em;
     padding: 30px;
   }
   &__title {
     padding-bottom: 0;
-    color: $lighter-color;
+    color: palette(white);
     @include font-size(22px);
     font-weight: bold;
     margin-top: 0;
@@ -199,38 +198,7 @@ $color: #333346;
 }
 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>
-
-<style lang="scss">
-.records-number {
-  @include font-size(16px);
-  font-weight: normal;
-  .all & {
-    display: none;
-  }
+  @extend %has-tooltip--top;
+  @extend %tooltip-large-text;
 }
 </style>
diff --git a/frontend/components/text-classifier/results/ClassifierAnnotationArea.vue b/frontend/components/text-classifier/results/ClassifierAnnotationArea.vue
index 189b7b7a5c..cd380ab624 100644
--- a/frontend/components/text-classifier/results/ClassifierAnnotationArea.vue
+++ b/frontend/components/text-classifier/results/ClassifierAnnotationArea.vue
@@ -22,10 +22,8 @@
       :searchText="searchText"
       @input="onSearchLabel"
     />
-    <div
-      :class="[UXtest === 'fixed' ? 'fixed' : null, 'feedback-interactions']"
-    >
-      <ClassifierAnnotationButton
+    <div class="feedback-interactions">
+      <classifier-annotation-button
         v-for="label in visibleLabels"
         :id="label.class"
         :key="`${label.class}`"
@@ -35,27 +33,24 @@
         :class="[
           'label-button',
           predictedAs.includes(label.class) ? 'predicted-label' : null,
-          UXtest === 'fixed' ? 'fixed' : null,
         ]"
         :data-title="label.class"
         :value="label.class"
         @change="updateLabels"
       >
-      </ClassifierAnnotationButton>
+      </classifier-annotation-button>
 
-      <a
+      <base-button
         v-if="visibleLabels.length < filteredLabels.length"
-        href="#"
-        class="feedback-interactions__more"
-        @click.prevent="expandLabels()"
-        >+{{ filteredLabels.length - visibleLabels.length }}</a
+        class="feedback-interactions__more primary clear"
+        @click="expandLabels()"
+        >+{{ filteredLabels.length - visibleLabels.length }}</base-button
       >
-      <a
+      <base-button
         v-else-if="visibleLabels.length > maxVisibleLabels"
-        href="#"
-        class="feedback-interactions__more"
-        @click.prevent="collapseLabels()"
-        >Show less</a
+        class="feedback-interactions__more primary clear"
+        @click="collapseLabels()"
+        >Show less</base-button
       >
     </div>
   </div>
@@ -199,9 +194,6 @@ export default {
     predictedAs() {
       return this.record.predicted_as;
     },
-    UXtest() {
-      return this.$route.query.UXtest;
-    },
   },
   mounted() {
     this.selectedLabels = this.appliedLabels;
@@ -242,40 +234,16 @@ export default {
 .feedback-interactions {
   margin: 0 auto 0 auto;
   padding-right: 0;
-  &:not(.fixed) {
-    @include media(">desktopLarge") {
-      max-width: calc(60% + 200px);
-      margin-left: 0;
-    }
-  }
-  .list__item--annotation-mode & {
-    padding-right: 200px;
+  @include media(">desktopLarge") {
+    max-width: calc(60% + 200px);
+    margin-left: 0;
   }
   &__more {
-    align-self: center;
     margin: 3.5px;
-    text-decoration: none;
-    font-weight: 500;
-    font-family: $sff;
-    outline: none;
-    padding: 0.5em;
-    border-radius: $border-radius;
-    transition: all 0.2s ease-in-out;
     display: inline-block;
-    &:hover {
-      transition: all 0.2s ease-in-out;
-      background: palette(grey, bg);
-    }
   }
 }
 .label-button {
   @extend %item;
-  &.fixed {
-    width: 24%;
-    ::v-deep .annotation-button-data__info {
-      margin-right: 0 !important;
-      margin-left: auto !important;
-    }
-  }
 }
 </style>
diff --git a/frontend/components/text-classifier/results/ClassifierAnnotationButton.vue b/frontend/components/text-classifier/results/ClassifierAnnotationButton.vue
index 8868d2e719..8151234e44 100644
--- a/frontend/components/text-classifier/results/ClassifierAnnotationButton.vue
+++ b/frontend/components/text-classifier/results/ClassifierAnnotationButton.vue
@@ -93,10 +93,9 @@ export default {
 
 <style lang="scss" scoped>
 $annotation-button-size: 20px;
-$annotation-button-touch-size: 48px;
 .re-annotation-button {
   width: auto;
-  margin: 16px 8px 16px 0;
+  margin: $base-space * 2 $base-space $base-space * 2 0;
   display: inline-flex;
   position: relative;
   .annotation-button-container {
@@ -104,7 +103,7 @@ $annotation-button-touch-size: 48px;
   }
   &.label-button {
     margin: 3.5px;
-    color: $font-secondary-dark;
+    color: $font-secondary-medium-dark;
     padding: 0;
     transition: all 0.3s ease;
     max-width: 238px;
@@ -112,7 +111,7 @@ $annotation-button-touch-size: 48px;
       outline: none;
       cursor: pointer;
       background: #f0f0fe;
-      border-radius: 8px;
+      border-radius: $base-space;
       height: 40px;
       line-height: 40px;
       padding-left: 0.5em;
@@ -122,7 +121,7 @@ $annotation-button-touch-size: 48px;
       font-family: $sff;
       font-weight: 500;
       overflow: hidden;
-      color: $font-secondary-dark;
+      color: $font-secondary-medium-dark;
       box-shadow: 0;
       transition: all 0.2s ease-in-out;
     }
@@ -136,7 +135,7 @@ $annotation-button-touch-size: 48px;
       box-shadow: none;
       .button {
         transition: all 0.2s ease-in-out;
-        background: $secondary-color;
+        background: palette(blue, 200);
         box-shadow: none;
       }
       &:hover {
@@ -151,10 +150,10 @@ $annotation-button-touch-size: 48px;
       }
       .annotation-button-data__text,
       .annotation-button-data__score {
-        color: $lighter-color;
+        color: palette(white);
       }
       .annotation-button-data__info {
-        color: $lighter-color;
+        color: palette(white);
       }
     }
     .annotation-button-data {
@@ -201,9 +200,9 @@ $annotation-button-touch-size: 48px;
     //   display: inline-block;
     // }
     .button {
-      background: $lighter-color !important;
-      color: $lighter-color;
-      border: 1px solid palette(grey, light);
+      background: palette(white) !important;
+      color: palette(white);
+      border: 1px solid palette(grey, 700);
     }
   }
   &:not(.disabled) {
@@ -214,7 +213,7 @@ $annotation-button-touch-size: 48px;
   }
   .annotation-button {
     height: $annotation-button-size;
-    padding-left: 8px;
+    padding-left: $base-space;
     line-height: $annotation-button-size;
   }
 }
diff --git a/frontend/components/text-classifier/results/ClassifierExplorationArea.vue b/frontend/components/text-classifier/results/ClassifierExplorationArea.vue
index 635c7fec2c..bfec865b77 100644
--- a/frontend/components/text-classifier/results/ClassifierExplorationArea.vue
+++ b/frontend/components/text-classifier/results/ClassifierExplorationArea.vue
@@ -31,19 +31,17 @@
         />
       </span>
 
-      <a
+      <base-button
         v-if="visibleLabels.length < filteredLabels.length"
-        href="#"
-        class="predictions__more"
-        @click.prevent="expandLabels()"
-        >+{{ filteredLabels.length - visibleLabels.length }}</a
+        class="predictions__more primary clear"
+        @click="expandLabels()"
+        >+{{ filteredLabels.length - visibleLabels.length }}</base-button
       >
-      <a
+      <base-button
         v-else-if="visibleLabels.length > maxVisibleLabels"
-        href="#"
-        class="predictions__more"
-        @click.prevent="collapseLabels()"
-        >Show less</a
+        class="predictions__more primary clear"
+        @click="collapseLabels()"
+        >Show less</base-button
       >
     </div>
   </div>
@@ -134,19 +132,8 @@ export default {
     margin-left: 0;
   }
   &__more {
-    align-self: center;
     margin: 3.5px;
-    text-decoration: none;
-    font-weight: 600;
-    outline: none;
-    padding: 0.5em;
-    border-radius: $border-radius;
-    transition: all 0.2s ease-in-out;
     display: inline-block;
-    &:hover {
-      transition: all 0.2s ease-in-out;
-      background: palette(grey, bg);
-    }
   }
 }
 </style>
diff --git a/frontend/components/text-classifier/results/LabelPill.vue b/frontend/components/text-classifier/results/LabelPill.vue
index d78b2b0d6b..9c31941ab1 100644
--- a/frontend/components/text-classifier/results/LabelPill.vue
+++ b/frontend/components/text-classifier/results/LabelPill.vue
@@ -64,8 +64,8 @@ export default {
   background: transparent;
   height: 40px;
   line-height: 40px;
-  color: $lighter-color;
-  border-radius: 8px;
+  color: palette(white);
+  border-radius: $border-radius-m;
   padding: 0.2em 0.5em;
   @include font-size(14px);
   border: 1px solid transparent;
@@ -75,8 +75,8 @@ export default {
 
 .pill {
   @extend %pill;
-  border: 1px solid palette(grey, smooth);
-  color: $font-medium-color;
+  border: 1px solid palette(grey, 600);
+  color: $font-medium;
   line-height: 1.4em;
   &__container {
     display: flex;
diff --git a/frontend/components/text-classifier/results/LabelSearch.vue b/frontend/components/text-classifier/results/LabelSearch.vue
index 28a724c480..3810c21fe1 100644
--- a/frontend/components/text-classifier/results/LabelSearch.vue
+++ b/frontend/components/text-classifier/results/LabelSearch.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <ReInputContainer class="searchbar">
+  <base-input-container class="searchbar">
     <svgicon v-if="!filter" name="search" width="20" height="40" />
     <svgicon
       v-else
@@ -26,8 +26,8 @@
       height="14"
       @click="filter = ''"
     />
-    <ReInput v-model="filter" placeholder="Search labels" />
-  </ReInputContainer>
+    <base-input v-model="filter" placeholder="Search labels" />
+  </base-input-container>
 </template>
 <script>
 import "assets/icons/search";
@@ -65,14 +65,14 @@ export default {
   font-weight: 600;
   @include font-size(14px);
   input {
-    color: $font-secondary-dark;
+    color: $font-secondary-medium-dark;
     font-weight: 600;
     @include input-placeholder {
-      color: $font-secondary-dark;
+      color: $font-secondary-medium-dark;
     }
   }
   .svg-icon {
-    fill: $font-secondary-dark;
+    fill: $font-secondary-medium-dark;
     margin: auto 1em auto auto;
   }
   &__button {
diff --git a/frontend/components/text-classifier/results/RecordExplain.vue b/frontend/components/text-classifier/results/RecordExplain.vue
index 1b4abdb449..dd98ba42c2 100644
--- a/frontend/components/text-classifier/results/RecordExplain.vue
+++ b/frontend/components/text-classifier/results/RecordExplain.vue
@@ -179,10 +179,10 @@ export default {
     overflow: hidden;
     pointer-events: none;
     font-weight: lighter;
-    border-radius: 3px;
+    border-radius: $border-radius-s;
     word-break: normal;
   }
-  ::v-deep .highlight-text {
+  :deep(.highlight-text) {
     line-height: 16px;
   }
 }
diff --git a/frontend/components/text-classifier/results/RecordInputs.vue b/frontend/components/text-classifier/results/RecordInputs.vue
index 39abba7136..6a500312aa 100644
--- a/frontend/components/text-classifier/results/RecordInputs.vue
+++ b/frontend/components/text-classifier/results/RecordInputs.vue
@@ -24,22 +24,21 @@
       <span v-for="(text, index) in data" :key="index" class="record">
         <span :class="['record__item', isHtml(text) ? 'record--email' : '']">
           <span class="record__key">{{ index }}:</span>
-          <LazyRecordExplain
+          <lazy-record-explain
             v-if="explanation"
             :record="record"
             :explain="explanation[index]"
           />
-          <LazyRecordString v-else :record="record" :text="text" />
+          <lazy-record-string v-else :record="record" :text="text" />
         </span>
       </span>
     </div>
-    <a
-      href="#"
-      v-if="scrollHeight >= visibleRecordHeight && !explanation"
-      class="record__button"
+    <base-button
+      v-if="scrollHeight >= visibleRecordHeight"
+      class="primary clear small record__show-more"
       @click.prevent="showFullRecord = !showFullRecord"
       >{{ !showFullRecord ? "Show full record" : "Show less" }}
-    </a>
+    </base-button>
   </div>
 </template>
 
@@ -90,9 +89,6 @@ export default {
 .record {
   white-space: pre-line;
   display: block;
-  .list__item--annotation-mode & {
-    padding-right: 200px;
-  }
   &__collapsed {
     .record__content {
       max-height: 174px;
@@ -114,27 +110,12 @@ export default {
     @include font-size(16px);
     line-height: 1.6em;
   }
-  &__button {
-    display: inline-block;
-    border-radius: $border-radius;
-    padding: 0.5em;
-    transition: all 0.2s ease;
-    @include font-size(14px);
-    font-weight: 400;
-    background: none;
+  &__show-more {
     margin-top: 1em;
-    font-weight: 600;
-    text-decoration: none;
-    line-height: 1;
-    outline: none;
-    &:hover {
-      transition: all 0.2s ease;
-      background: palette(grey, bg);
-    }
   }
   &--email {
     display: block;
-    ::v-deep table {
+    :deep(table) {
       width: calc(100% - 3em) !important;
       max-width: 700px !important;
       display: inline-block;
@@ -146,13 +127,13 @@ export default {
         max-width: 1140px !important;
       }
     }
-    ::v-deep img {
+    :deep(img) {
       display: none;
     }
-    ::v-deep pre {
+    :deep(pre) {
       white-space: pre-wrap !important;
     }
-    ::v-deep .record__content {
+    :deep(.record__content) {
       display: block;
       max-width: 748px !important;
       margin-left: 0 !important;
@@ -161,7 +142,7 @@ export default {
         max-width: 1140px !important;
       }
     }
-    ::v-deep div.WordSection1 {
+    :deep(div.WordSection1) {
       word-break: break-all !important;
       p {
         font-family: initial !important;
diff --git a/frontend/components/text-classifier/results/RecordTextClassification.vue b/frontend/components/text-classifier/results/RecordTextClassification.vue
index b6c2439866..35a86a10fa 100644
--- a/frontend/components/text-classifier/results/RecordTextClassification.vue
+++ b/frontend/components/text-classifier/results/RecordTextClassification.vue
@@ -17,24 +17,22 @@
 
 <template>
   <div class="record">
-    <!-- annotation labels and prediction status -->
     <div class="record--left">
-      <!-- record text -->
-      <RecordInputs :record="record" />
-      <ClassifierAnnotationArea
+      <record-inputs :record="record" />
+      <classifier-annotation-area
         v-if="annotationEnabled"
         :dataset="dataset"
         :record="record"
         @validate="validateLabels"
         @reset="resetLabels"
       />
-      <ClassifierExplorationArea v-else :dataset="dataset" :record="record" />
+      <classifier-exploration-area v-else :dataset="dataset" :record="record" />
       <div v-if="annotationEnabled" class="content__actions-buttons">
-        <re-button
+        <base-button
           v-if="allowValidate"
-          class="button-primary"
+          class="primary"
           @click="onValidate(record)"
-          >Validate</re-button
+          >Validate</base-button
         >
       </div>
     </div>
@@ -48,7 +46,7 @@
           height="40"
           :name="record.predicted === 'ko' ? 'no-matching' : 'matching'"
         ></svgicon>
-        <re-tag
+        <base-tag
           v-for="label in record.annotation.labels"
           :key="label.class"
           :name="label.class"
@@ -154,7 +152,7 @@ export default {
     width: 100%;
     padding: 50px 20px 50px 50px;
     .list__item--annotation-mode & {
-      padding-left: 65px;
+      padding-right: 240px;
     }
   }
   &__labels {
@@ -190,13 +188,10 @@ export default {
     margin-left: auto;
     display: flex;
     min-width: 20%;
-    .re-button {
-      min-height: 32px;
-      line-height: 32px;
-      display: block;
+    .button {
       margin: 1.5em auto 0 0;
-      & + .re-button {
-        margin-left: 1em;
+      & + .button {
+        margin-left: $base-space * 2;
       }
     }
   }
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationProgress.vue b/frontend/components/text-classifier/sidebar/TextClassificationProgress.vue
index 8dab529246..7b6430fbdc 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationProgress.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationProgress.vue
@@ -16,16 +16,18 @@
   -->
 
 <template>
-  <SidebarProgress :dataset="dataset">
-    <div v-if="annotationsProgress" class="labels">
-      <div v-for="(counter, label) in getInfo" :key="label">
-        <div v-if="counter > 0" class="info">
-          <label>{{ label }}</label>
-          <span class="records-number">{{ counter | formatNumber }}</span>
-        </div>
-      </div>
-    </div>
-  </SidebarProgress>
+  <sidebar-progress :dataset="dataset">
+    <ul v-if="annotationsProgress" class="metrics__list">
+      <li v-for="(counter, label) in getInfo" :key="label">
+        <template v-if="counter > 0">
+          <label class="metrics__list__name">{{ label }}</label>
+          <span class="metrics__list__counter">{{
+            counter | formatNumber
+          }}</span>
+        </template>
+      </li>
+    </ul>
+  </sidebar-progress>
 </template>
 
 <script>
@@ -47,19 +49,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.labels {
-  margin-top: 2em;
-}
-.info {
-  position: relative;
-  display: flex;
-  margin-bottom: 0.7em;
-  label {
-    margin: 0; // for tagger
-    &[class^="color_"] {
-      padding: 0.3em;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
index cad6d70bb8..9add5f258c 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
@@ -17,77 +17,73 @@
 
 <template>
   <div>
-    <p class="sidebar__title">Overall rule metrics</p>
-    <div class="progress__info">
-      <p class="progress__info__text" :data-title="tooltip.coverage">
-        Coverage
-      </p>
-      <span class="progress__info__percent">{{
+    <p class="metrics__title">Overall rule metrics</p>
+    <div class="metrics__info">
+      <p class="metrics__info__name" :data-title="tooltip.coverage">Coverage</p>
+      <span class="metrics__info__counter">{{
         coverage.percent || 0 | percent
       }}</span>
     </div>
-    <ReProgress
+    <base-progress
       re-mode="determinate"
       color="#4C4EA3"
       :progress="coverage.percent * 100"
       :tooltip="`${coverage.records}/${totalRecords}`"
-    ></ReProgress>
-    <div class="progress__info">
-      <p class="progress__info__text" :data-title="tooltip.annotatedCoverage">
+    ></base-progress>
+    <div class="metrics__info">
+      <p class="metrics__info__name" :data-title="tooltip.annotatedCoverage">
         Annotated Coverage
       </p>
-      <span class="progress__info__percent">{{
+      <span class="metrics__info__counter">{{
         annotatedCoverage.percent || 0 | percent
       }}</span>
     </div>
-    <ReProgress
+    <base-progress
       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" :data-title="tooltip.precision">
+    ></base-progress>
+    <div class="metrics__info">
+      <p class="metrics__info__name" :data-title="tooltip.precision">
         Precision average
       </p>
       <transition name="fade" mode="out-in" appear
-        ><span :key="precision" class="progress__info__percent">{{
+        ><span :key="precision" class="metrics__info__counter">{{
           precision || 0 | percent
         }}</span></transition
       >
     </div>
-    <div class="progress__info">
-      <p class="progress__info__text" :data-title="tooltip.correctAndIncorrect">
+    <div class="metrics__info">
+      <p class="metrics__info__name" :data-title="tooltip.correctAndIncorrect">
         Correct/Incorrect
       </p>
       <transition name="fade" mode="out-in" appear
-        ><span :key="correctAndIncorrect" class="progress__info__percent">{{
+        ><span :key="correctAndIncorrect" class="metrics__info__counter">{{
           correctAndIncorrect
         }}</span></transition
       >
     </div>
-    <span class="space"></span>
-    <div class="progress__info">
-      <p class="progress__info__text">Total rules</p>
+    <span class="separator"></span>
+    <div class="metrics__info">
+      <p class="metrics__info__name">Total rules</p>
       <transition name="fade" mode="out-in" appear
-        ><span :key="dataset.rules.length" class="progress__info__percent">{{
+        ><span :key="dataset.rules.length" class="metrics__info__counter">{{
           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>
+      <ul class="scroll metrics__list">
+        <li v-for="label in labels" :key="label.index">
+          <label class="metrics__list__name">{{ label.label }}</label>
+          <transition name="fade" mode="out-in" appear
+            ><span class="metrics__list__counter">{{
+              label.counter | formatNumber
+            }}</span></transition
+          >
+        </li>
+      </ul>
     </template>
   </div>
 </template>
@@ -177,26 +173,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$color: #333346;
-label {
-  display: block;
-  width: calc(100% - 40px);
-  hyphens: auto;
-  word-break: break-word;
-}
-.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;
@@ -204,69 +180,13 @@ label {
   overflow: auto;
   @extend %hide-scrollbar;
 }
-.records-number {
-  margin-right: 0;
-  margin-left: auto;
-}
-.space {
-  margin-bottom: 2em;
+.separator {
   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;
-    }
-  }
+  margin-bottom: $base-space * 4;
 }
 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;
-  }
+  @extend %has-tooltip--top;
+  @extend %tooltip-large-text;
 }
 </style>
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
index 4d9b935b5d..1eb5a08432 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <SidebarMenu
+  <sidebar-menu
     :current-metric="currentMetric"
     :dataset="dataset"
     :sidebar-items="sidebarItems"
diff --git a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
index c556a22e8b..493cfa4c47 100644
--- a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
+++ b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
@@ -17,21 +17,23 @@
 
 <template>
   <div>
-    <p class="sidebar__title">Stats</p>
-    <StatsSelector
+    <p class="metrics__title">Stats</p>
+    <stats-selector
       :selected-option="selectedOption"
       :options="options"
       @selectOption="onSelectOption"
     />
     <template v-if="selectedOption.id === 'keywords'">
-      <div class="scroll">
-        <div v-for="(counter, keyword) in getKeywords" :key="keyword">
-          <div v-if="counter > 0" class="info">
-            <label>{{ keyword }}</label>
-            <span class="records-number">{{ counter | formatNumber }}</span>
-          </div>
-        </div>
-      </div>
+      <ul class="scroll metrics__list">
+        <li v-for="(counter, keyword) in getKeywords" :key="keyword">
+          <template v-if="counter > 0">
+            <label class="metrics__list__name">{{ keyword }}</label>
+            <span class="metrics__list__counter">{{
+              counter | formatNumber
+            }}</span>
+          </template>
+        </li>
+      </ul>
     </template>
   </div>
 </template>
@@ -77,25 +79,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-label {
-  display: block;
-  width: calc(100% - 40px);
-  hyphens: auto;
-  word-break: break-word;
-}
-.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 - 200px);
   padding-right: 1em;
@@ -103,8 +86,4 @@ label {
   overflow: auto;
   @extend %hide-scrollbar;
 }
-.records-number {
-  margin-right: 0;
-  margin-left: auto;
-}
 </style>
diff --git a/frontend/components/text2text/results/RecordStringText2Text.vue b/frontend/components/text2text/results/RecordStringText2Text.vue
index 5514a441f1..8f46d0dded 100644
--- a/frontend/components/text2text/results/RecordStringText2Text.vue
+++ b/frontend/components/text2text/results/RecordStringText2Text.vue
@@ -22,13 +22,12 @@
   >
     <span class="record__content" v-html="$highlightKeywords(text, keywords)">
     </span>
-    <a
-      href="#"
+    <base-button
       v-if="scrollHeight >= visibleRecordHeight"
-      class="record__button"
+      class="primary clear small record__show-more"
       @click.prevent="showFullRecord = !showFullRecord"
       >{{ !showFullRecord ? "Show full record" : "Show less" }}
-    </a>
+    </base-button>
   </div>
 </template>
 <script>
@@ -86,26 +85,11 @@ export default {
     white-space: pre-line;
 
     display: block;
-    color: palette(grey, medium);
+    color: $font-medium;
     width: calc(100% - 200px);
   }
-  &__button {
-    display: inline-block;
-    border-radius: $border-radius;
-    padding: 0.5em;
-    transition: all 0.2s ease;
-    @include font-size(14px);
-    font-weight: 400;
-    background: none;
+  &__show-more {
     margin-top: 1em;
-    font-weight: 600;
-    text-decoration: none;
-    line-height: 1;
-    outline: none;
-    &:hover {
-      transition: all 0.2s ease;
-      background: palette(grey, bg);
-    }
   }
 }
 </style>
diff --git a/frontend/components/text2text/results/RecordText2Text.vue b/frontend/components/text2text/results/RecordText2Text.vue
index e6c3aa430c..307d47d2bc 100644
--- a/frontend/components/text2text/results/RecordText2Text.vue
+++ b/frontend/components/text2text/results/RecordText2Text.vue
@@ -17,21 +17,19 @@
 
 <template>
   <div class="record">
-    <div class="record--left record__item">
-      <record-string-text-2-text :record="record" />
-      <div>
-        <text-2-text-list
-          ref="list"
-          :dataset="dataset"
-          :record="record"
-          :predictions="predictionSentences"
-          :annotations="initialAnnotations"
-          :annotation-enabled="annotationEnabled"
-          @update-initial-record="initializeInitialRecord"
-          @reset-initial-record="onResetInitialRecord"
-          @annotate="onAnnotate"
-        />
-      </div>
+    <record-string-text-2-text :record="record" />
+    <div>
+      <text-2-text-list
+        ref="list"
+        :dataset="dataset"
+        :record="record"
+        :predictions="predictionSentences"
+        :annotations="initialAnnotations"
+        :annotation-enabled="annotationEnabled"
+        @update-initial-record="initializeInitialRecord"
+        @reset-initial-record="onResetInitialRecord"
+        @annotate="onAnnotate"
+      />
     </div>
   </div>
 </template>
@@ -131,24 +129,16 @@ export default {
 
 <style scoped lang="scss">
 .record {
-  display: flex;
-  &__item {
-    display: block;
-    @include font-size(16px);
-    line-height: 1.6em;
-    &:hover {
-      ::v-deep .button-primary--outline {
-        opacity: 1 !important;
-        pointer-events: all;
-        transition: opacity 0.5s ease-in-out 0.2s !important;
-      }
-    }
-  }
-  &--left {
-    width: 100%;
-    padding: 50px 50px 20px 50px;
-    .list__item--annotation-mode & {
-      padding-left: 65px;
+  display: block;
+  @include font-size(16px);
+  line-height: 1.6em;
+  width: 100%;
+  padding: 50px 200px 20px 50px;
+  &:hover {
+    :deep(.edit) {
+      opacity: 1 !important;
+      pointer-events: all;
+      transition: opacity 0.5s ease-in-out 0.2s !important;
     }
   }
 }
diff --git a/frontend/components/text2text/results/Text2TextContentEditable.vue b/frontend/components/text2text/results/Text2TextContentEditable.vue
index 0b131d337f..51c528a0e1 100644
--- a/frontend/components/text2text/results/Text2TextContentEditable.vue
+++ b/frontend/components/text2text/results/Text2TextContentEditable.vue
@@ -16,10 +16,10 @@
       v-if="editionMode && annotationEnabled && editableText"
       class="content__edit__buttons"
     >
-      <re-button class="button-primary" @click="annotate">Save</re-button>
-      <re-button class="button-primary--outline" @click="$emit('back')"
-        >Back</re-button
+      <base-button class="primary outline small" @click="$emit('back')"
+        >Back</base-button
       >
+      <base-button class="primary small" @click="annotate">Save</base-button>
     </div>
   </span>
 </template>
@@ -99,7 +99,7 @@ export default {
 $marginRight: 200px;
 [contenteditable="true"] {
   box-shadow: 0 1px 4px 1px rgba(222, 222, 222, 0.5);
-  border-radius: 3px 3px 3px 3px;
+  border-radius: $border-radius-s 3px 3px 3px;
   &:focus + span {
     display: block;
   }
@@ -135,11 +135,9 @@ $marginRight: 200px;
       margin: 2.5em 200px 0 auto;
       display: flex;
       justify-content: flex-start;
-      .re-button {
-        margin-bottom: 0;
+      .button {
         &:last-child {
-          transition: margin 0s ease;
-          margin-left: 6px;
+          margin-left: $base-space;
         }
       }
     }
diff --git a/frontend/components/text2text/results/Text2TextList.vue b/frontend/components/text2text/results/Text2TextList.vue
index fbf82715f6..c22a67ee0c 100644
--- a/frontend/components/text2text/results/Text2TextList.vue
+++ b/frontend/components/text2text/results/Text2TextList.vue
@@ -48,21 +48,17 @@
           />
           <div class="content__footer">
             <div class="content__actions-buttons">
-              <re-button
+              <base-button
                 v-if="visibleSentence && annotationEnabled"
-                class="button-primary"
+                class="primary"
                 @click="onAnnotate(visibleSentence)"
-                >Validate</re-button
+                >Validate</base-button
               >
             </div>
           </div>
         </div>
 
-        <span
-          v-for="(sentence, index) in sentences"
-          v-else
-          :key="sentence.text"
-        >
+        <span v-for="(sentence, index) in sentences" v-else :key="index">
           <div v-if="itemNumber === index" class="content__sentences">
             <div class="content__group">
               <p v-if="!editionMode" class="content__sentences__title">
@@ -71,9 +67,9 @@
                   >: {{ sentence.score | percent }}
                 </span>
               </p>
-              <re-button
+              <base-button
                 v-if="hasAnnotationAndPredictions && !editionMode"
-                class="button-clear"
+                class="primary clear small content__group__view-annotations"
                 @click="changeVisibleSentences"
                 >{{
                   sentencesOrigin === "Annotation"
@@ -83,7 +79,7 @@
                     : annotationEnabled
                     ? "Back to annotation"
                     : "View annotation"
-                }}</re-button
+                }}</base-button
               >
             </div>
             <text-2-text-content-editable
@@ -100,53 +96,31 @@
             <div v-if="!editionMode" class="content__footer">
               <template v-if="sentencesOrigin === 'Prediction'">
                 <div v-if="annotationEnabled" class="content__actions-buttons">
-                  <re-button
+                  <base-button
                     v-if="allowValidation"
-                    class="button-primary"
+                    class="primary small"
                     @click="onAnnotate(visibleSentence)"
-                    >Validate</re-button
+                    >Validate</base-button
                   >
-                  <re-button
+                  <base-button
                     v-if="sentences.length"
                     :class="[
                       'edit',
-                      allowValidation
-                        ? 'button-primary--outline'
-                        : 'button-primary',
+                      'primary',
+                      'small',
+                      { outline: allowValidation },
                     ]"
                     @click="edit"
-                    >Edit</re-button
+                    >Edit</base-button
                   >
                 </div>
-                <div v-if="sentences.length" class="content__nav-buttons">
-                  <a
-                    :class="itemNumber <= 0 ? 'disabled' : null"
-                    href="#"
-                    @click.prevent="showitemNumber(--itemNumber)"
-                  >
-                    <svgicon
-                      name="chevron-left"
-                      width="12"
-                      height="12"
-                      color="#4C4EA3"
-                    />
-                  </a>
-                  {{ itemNumber + 1 }} of {{ sentences.length }} predictions
-                  <a
-                    :class="
-                      sentences.length <= itemNumber + 1 ? 'disabled' : null
-                    "
-                    href="#"
-                    @click.prevent="showitemNumber(++itemNumber)"
-                  >
-                    <svgicon
-                      name="chevron-right"
-                      width="12"
-                      height="12"
-                      color="#4C4EA3"
-                    />
-                  </a>
-                </div>
+                <base-slider
+                  v-if="sentences.length"
+                  :slides-origin="sentences"
+                  :item-number="itemNumber"
+                  slides-name="predictions"
+                  @go-to="showItemNumber"
+                />
               </template>
             </div>
           </div>
@@ -315,7 +289,7 @@ export default {
     ...mapActions({
       updateRecords: "entities/datasets/updateDatasetRecords",
     }),
-    async showitemNumber(index) {
+    async showItemNumber(index) {
       this.itemNumber = index;
       await (this.visibleSentence = this.selectedSentence);
     },
@@ -399,21 +373,21 @@ export default {
   &--separator {
     padding-top: 1em;
     &:before {
+      width: 100%;
       content: "";
-      border-top: 1px solid palette(grey, light);
-      width: calc(100% - 200px);
+      border-top: 1px solid palette(grey, 700);
       position: absolute;
       top: 0;
     }
   }
   &--editable {
     width: 100%;
-    ::v-deep p {
+    :deep(p) {
       padding: 0.6em;
       margin: 0;
       outline: none;
     }
-    ::v-deep .re-button {
+    :deep(.button) {
       opacity: 1 !important;
     }
   }
@@ -435,8 +409,8 @@ export default {
     flex-direction: column;
     min-height: 140px;
     &__title {
-      @include font-size(14px);
-      color: palette(grey, medium);
+      @include font-size(13px);
+      color: $font-medium;
       margin: 0;
     }
   }
@@ -444,7 +418,7 @@ export default {
     @include font-size(15px);
     margin-right: 0;
     min-width: 33%;
-    color: palette(grey, medium);
+    color: $font-medium;
   }
   &__footer {
     padding-top: 2em;
@@ -454,11 +428,10 @@ export default {
     align-items: center;
   }
   &__group {
-    width: calc(100% - 200px);
     display: flex;
     align-items: center;
     margin-bottom: 0.5em;
-    .button-clear {
+    &__view-annotations {
       margin: auto 0 auto auto;
     }
   }
@@ -470,49 +443,10 @@ export default {
       opacity: 0;
       pointer-events: none;
     }
-    .re-button {
-      min-height: 32px;
-      line-height: 32px;
-      display: block;
-      margin-bottom: 0;
-      margin-right: 0;
+    .button {
       margin-left: auto;
-      & + .re-button {
-        margin-left: 6px;
-      }
-    }
-  }
-  &__nav-buttons {
-    @include font-size(14px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 33%;
-    margin-right: 33%;
-    margin-left: auto;
-    color: palette(grey, medium);
-    a {
-      height: 20px;
-      width: 20px;
-      line-height: 19px;
-      text-align: center;
-      border-radius: 3px;
-      text-align: center;
-      margin-left: 1.5em;
-      margin-right: 1.5em;
-      display: inline-block;
-      text-decoration: none;
-      outline: none;
-      @include font-size(13px);
-      background: transparent;
-      transition: all 0.2s ease-in-out;
-      &:hover {
-        background: palette(grey, bg);
-        transition: all 0.2s ease-in-out;
-      }
-      &.disabled {
-        opacity: 0;
-        pointer-events: none;
+      & + .button {
+        margin-left: $base-space;
       }
     }
   }
diff --git a/frontend/components/text2text/results/Text2TextResultsList.vue b/frontend/components/text2text/results/Text2TextResultsList.vue
index 9f3d0d6196..634677232c 100644
--- a/frontend/components/text2text/results/Text2TextResultsList.vue
+++ b/frontend/components/text2text/results/Text2TextResultsList.vue
@@ -22,7 +22,7 @@
     @closeMetadata="resetMetadataItem"
   >
     <template v-slot:record="{ record }">
-      <RecordText2Text
+      <record-text-2-text
         :dataset="dataset"
         :record="record"
         @onShowMetadata="onShowMetadata"
diff --git a/frontend/components/text2text/sidebar/Text2TextProgress.vue b/frontend/components/text2text/sidebar/Text2TextProgress.vue
index db834d5bce..0ecda8b82a 100644
--- a/frontend/components/text2text/sidebar/Text2TextProgress.vue
+++ b/frontend/components/text2text/sidebar/Text2TextProgress.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <SidebarProgress :dataset="dataset"> </SidebarProgress>
+  <sidebar-progress :dataset="dataset"> </sidebar-progress>
 </template>
 
 <script>
diff --git a/frontend/components/text2text/sidebar/Text2TextSidebar.vue b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
index 5bfbe39f58..edbe36fd94 100644
--- a/frontend/components/text2text/sidebar/Text2TextSidebar.vue
+++ b/frontend/components/text2text/sidebar/Text2TextSidebar.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <SidebarMenu
+  <sidebar-menu
     :current-metric="currentMetric"
     :dataset="dataset"
     :sidebar-items="sidebarItems"
diff --git a/frontend/components/text2text/sidebar/Text2TextStats.vue b/frontend/components/text2text/sidebar/Text2TextStats.vue
index 991cf79406..c1dc1d1dc3 100644
--- a/frontend/components/text2text/sidebar/Text2TextStats.vue
+++ b/frontend/components/text2text/sidebar/Text2TextStats.vue
@@ -17,21 +17,23 @@
 
 <template>
   <div>
-    <p class="sidebar__title">Stats</p>
-    <StatsSelector
+    <p class="metrics__title">Stats</p>
+    <stats-selector
       :selected-option="selectedOption"
       :options="options"
       @selectOption="onSelectOption"
     />
     <template v-if="selectedOption.id === 'keywords'">
-      <div class="scroll">
-        <div v-for="(counter, keyword) in getKeywords" :key="keyword">
-          <div v-if="counter > 0" class="info">
-            <label>{{ keyword }}</label>
-            <span class="records-number">{{ counter | formatNumber }}</span>
-          </div>
-        </div>
-      </div>
+      <ul class="scroll metrics__list">
+        <li v-for="(counter, keyword) in getKeywords" :key="keyword">
+          <template v-if="counter > 0" class="info">
+            <label class="metrics__list__name">{{ keyword }}</label>
+            <span class="metrics__list__counter">{{
+              counter | formatNumber
+            }}</span>
+          </template>
+        </li>
+      </ul>
     </template>
   </div>
 </template>
@@ -77,25 +79,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-label {
-  display: block;
-  width: calc(100% - 40px);
-  word-break: break-word;
-  hyphens: auto;
-}
-.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 - 200px);
   padding-right: 1em;
@@ -103,8 +86,4 @@ label {
   overflow: auto;
   @extend %hide-scrollbar;
 }
-.records-number {
-  margin-right: 0;
-  margin-left: auto;
-}
 </style>
diff --git a/frontend/components/token-classifier/commons/EntityLabel.vue b/frontend/components/token-classifier/commons/EntityLabel.vue
new file mode 100644
index 0000000000..0da3db3a86
--- /dev/null
+++ b/frontend/components/token-classifier/commons/EntityLabel.vue
@@ -0,0 +1,78 @@
+<!--
+  - 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>
+  <span :class="['entity-label', color, isPrediction ? '--prediction' : null]"
+    >{{ label }}
+    <span v-if="shortcut" class="shortcut">[{{ shortcut }}]</span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    shortcut: {
+      type: String,
+      default: undefined,
+    },
+    isPrediction: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.entity-label {
+  padding: 0.3em;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-height: 28px;
+  font-weight: 600;
+  color: palette(grey, 200);
+  .shortcut {
+    @include font-size(14px);
+    font-weight: lighter;
+    margin-left: $base-space * 2;
+  }
+}
+// ner colors
+
+$colors: 50;
+$hue: 360;
+@for $i from 1 through $colors {
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
+  .color_#{$i - 1} {
+    background: $rcolor;
+    &.--prediction {
+      background: none;
+      border-bottom: 5px solid $rcolor;
+      padding: 0.3em 0;
+    }
+  }
+}
+</style>
diff --git a/frontend/components/token-classifier/header/EntitiesHeader.vue b/frontend/components/token-classifier/header/EntitiesHeader.vue
new file mode 100755
index 0000000000..0068c06e7f
--- /dev/null
+++ b/frontend/components/token-classifier/header/EntitiesHeader.vue
@@ -0,0 +1,121 @@
+<!--
+  - 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="container">
+    <div class="entities__wrapper">
+      <div v-if="visibleEntities.length" class="entities__container">
+        <entity-label
+          v-for="(entity, index) in visibleEntities"
+          :label="entity.text"
+          :shortcut="entity.shortcut"
+          :key="index"
+          :color="`color_${entity.colorId % $entitiesMaxColors}`"
+        />
+        <base-button
+          v-if="!showEntitySelector && dataset.entities.length > entitiesNumber"
+          class="entities__container__button primary clear small"
+          @click="toggleEntitiesNumber"
+          >{{ `+ ${dataset.entities.length - entitiesNumber}` }}</base-button
+        >
+      </div>
+      <base-button
+        v-if="showEntitySelector && dataset.entities.length > entitiesNumber"
+        class="entities__container__button primary clear small fixed"
+        @click="toggleEntitiesNumber"
+        >{{ "Show less" }}</base-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+const MAX_ENTITIES_SHOWN = 10;
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    showEntitySelector: false,
+    entitiesNumber: MAX_ENTITIES_SHOWN,
+  }),
+  computed: {
+    visibleEntities() {
+      const characters = "1234567890".split("");
+      let entities = [...this.dataset.entities]
+        .sort((a, b) => a.text.localeCompare(b.text))
+        .map((ent, index) => ({
+          shortcut: characters[index],
+          ...ent,
+        }));
+
+      return this.showEntitySelector
+        ? entities
+        : entities.slice(0, this.entitiesNumber);
+    },
+  },
+  methods: {
+    toggleEntitiesNumber() {
+      this.showEntitySelector = !this.showEntitySelector;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  @extend %container;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: 0;
+  @extend %collapsable-if-metrics !optional;
+}
+.entities {
+  &__wrapper {
+    position: relative;
+  }
+  &__container {
+    padding: 0.4em 0.5em;
+    margin-bottom: $base-space * 2;
+    background: palette(white);
+    border-radius: $border-radius-m;
+    box-shadow: $shadow-300;
+    min-height: 48px;
+    max-height: 189px;
+    overflow: auto;
+    @extend %hide-scrollbar;
+    &__button {
+      margin-top: -1px;
+      margin-left: 0.3em;
+      display: inline-block;
+      &.fixed {
+        position: absolute;
+        right: $base-space;
+        bottom: $base-space;
+        background: rgba(255, 255, 255, 80%);
+      }
+    }
+  }
+}
+.entity-label {
+  margin: 4px;
+}
+</style>
diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
deleted file mode 100755
index df3443e8ae..0000000000
--- a/frontend/components/token-classifier/results/EntitiesHeader.vue
+++ /dev/null
@@ -1,219 +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="container">
-    <div class="entities__wrapper">
-      <div
-        v-if="visibleEntities.length"
-        :class="[
-          'entities__container',
-          activeEntity ? 'entities__container--multiple' : '',
-        ]"
-      >
-        <span
-          v-for="(entity, index) in visibleEntities"
-          :key="index"
-          class="entity"
-          :class="[
-            `color_${entity.colorId % $entitiesMaxColors}`,
-            activeEntity === entity.text ? 'active' : '',
-            annotationEnabled
-              ? 'non-selectable--show-sort-code'
-              : 'non-selectable',
-          ]"
-          @click="onActiveEntity(entity)"
-        >
-          {{ entity.text }}
-          <span v-if="entity.shortcut" class="shortcut"
-            >[{{ entity.shortcut }}]</span
-          >
-        </span>
-        <ReButton
-          v-if="!showEntitySelector && dataset.entities.length > entitiesNumber"
-          class="entities__container__button"
-          @click="toggleEntitiesNumber"
-          >{{ `+ ${dataset.entities.length - entitiesNumber}` }}</ReButton
-        >
-      </div>
-      <ReButton
-        v-if="showEntitySelector && dataset.entities.length > entitiesNumber"
-        class="entities__container__button fixed"
-        @click="toggleEntitiesNumber"
-        >{{ "Show less" }}</ReButton
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-import "assets/icons/check";
-import "assets/icons/close";
-const MAX_ENTITIES_SHOWN = 10;
-
-export default {
-  props: {
-    dataset: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: () => ({
-    activeEntity: undefined,
-    showEntitySelector: false,
-    entitiesNumber: MAX_ENTITIES_SHOWN,
-  }),
-  computed: {
-    visibleEntities() {
-      const characters = "1234567890".split("");
-      let entities = [...this.dataset.entities]
-        .sort((a, b) => a.text.localeCompare(b.text))
-        .map((ent, index) => ({
-          shortcut: characters[index],
-          ...ent,
-        }));
-
-      return this.showEntitySelector
-        ? entities
-        : entities.slice(0, this.entitiesNumber);
-    },
-    annotationEnabled() {
-      return this.dataset.viewSettings.viewMode === "annotate";
-    },
-  },
-  methods: {
-    toggleEntitiesNumber() {
-      this.showEntitySelector = !this.showEntitySelector;
-    },
-    onActiveEntity(entity) {
-      if (this.annotationEnabled) {
-        if (this.activeEntity === entity.text) {
-          this.activeEntity = undefined;
-        } else {
-          this.activeEntity = entity.text;
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.container {
-  @extend %container;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-left: 0;
-  @extend %collapsable-if-metrics !optional;
-}
-.entities {
-  &__wrapper {
-    position: relative;
-  }
-  &__container {
-    padding: 0.4em 0.5em;
-    margin-bottom: 16px;
-    background: palette(white);
-    border-radius: $border-radius-m;
-    box-shadow: 0 1px 2px 0 rgba(185, 185, 185, 0.5);
-    min-height: 48px;
-    max-height: 189px;
-    overflow: auto;
-    @extend %hide-scrollbar;
-    &__button {
-      margin-top: 0.3em;
-      margin-left: 0.3em;
-      padding: 0.5em;
-      transition: background 0.2s ease-in-out;
-      padding: 5px;
-      border-radius: $border-radius;
-      border: 0;
-      background: none;
-      cursor: pointer;
-      &:hover {
-        background: $bg !important;
-        transition: background 0.2s ease-in-out;
-      }
-      &.fixed {
-        position: absolute;
-        right: 8px;
-        bottom: 8px;
-        background: rgba(255, 255, 255, 80%);
-      }
-    }
-    &--multiple {
-      .entity:not(.active) {
-        // opacity: 0.7;
-      }
-    }
-  }
-}
-.entity {
-  padding: 0.3em;
-  margin: 4px;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  max-height: 28px;
-  border: 2px solid transparent;
-  transition: all 0.2s ease-in-out;
-  font-weight: 600;
-  // &:not(.active):hover {
-  //   filter: brightness(90%);
-  // }
-  &.non-selectable,
-  &.non-selectable--show-sort-code {
-    cursor: default;
-    pointer-events: none;
-  }
-  .shortcut {
-    @include font-size(14px);
-    font-weight: lighter;
-    margin-left: 1em;
-    .non-selectable & {
-      display: none;
-    }
-  }
-}
-// ner colors
-
-$colors: 50;
-$hue: 360;
-@for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
-  .color_#{$i - 1} {
-    background: $rcolor;
-    &.active,
-    &.entity:hover {
-      border: 2px solid darken($rcolor, 50%);
-    }
-  }
-  .entity.color_#{$i - 1} span {
-    background: $rcolor;
-  }
-  .entities__selector__option.color_#{$i - 1} span {
-    background: $rcolor;
-  }
-  .color_#{$i - 1} ::v-deep .highlight__tooltip {
-    background: $rcolor;
-  }
-  .color_#{$i - 1} ::v-deep .highlight__tooltip:after {
-    border-color: $rcolor transparent transparent transparent;
-  }
-}
-</style>
diff --git a/frontend/components/token-classifier/results/EntitiesSelector.vue b/frontend/components/token-classifier/results/EntitiesSelector.vue
index 6c4d61451d..acc24bc346 100644
--- a/frontend/components/token-classifier/results/EntitiesSelector.vue
+++ b/frontend/components/token-classifier/results/EntitiesSelector.vue
@@ -2,46 +2,49 @@
   <span class="entities__selector__container">
     <div class="entities__selector">
       <ul v-if="formattedEntities.length" class="entities__selector__options">
-        <li
-          class="entities__selector__option suggestion"
-          :class="[
-            `color_${suggestedEntity.colorId % $entitiesMaxColors}`,
-            activeEntity === -1 ? 'active' : null,
-          ]"
-          v-if="suggestedEntity"
-          @click="selectEntity(suggestedEntity)"
-        >
-          <span>{{ suggestedEntity.text }}</span>
-          <span class="entity__sort-code">[space]</span>
+        <li v-if="suggestedEntity" @click="selectEntity(suggestedEntity)">
+          <entity-label
+            :label="suggestedEntity.text"
+            shortcut="space"
+            :class="[
+              'entities__selector__option',
+              'suggestion',
+              activeEntity === -1 ? 'active' : null,
+            ]"
+            :color="`color_${suggestedEntity.colorId % $entitiesMaxColors}`"
+          />
         </li>
         <li
-          class="entities__selector__option suggestion"
-          :class="[
-            `color_${lastSelectedEntity.colorId % $entitiesMaxColors}`,
-            activeEntity === -1 ? 'active' : null,
-          ]"
           v-else-if="lastSelectedEntity.text"
           @click="selectEntity(lastSelectedEntity)"
         >
-          <span>{{ lastSelectedEntity.text }}</span>
-          <span class="entity__sort-code">[space]</span>
+          <entity-label
+            :label="lastSelectedEntity.text"
+            shortcut="space"
+            :class="[
+              'entities__selector__option',
+              'suggestion',
+              activeEntity === -1 ? 'active' : null,
+            ]"
+            :color="`color_${lastSelectedEntity.colorId % $entitiesMaxColors}`"
+          />
         </li>
         <li
           v-for="(entity, index) in formattedEntities"
           tabindex="0"
           :focused="activeEntity === index"
           :key="index"
-          class="entities__selector__option"
-          :class="[
-            `color_${entity.colorId % $entitiesMaxColors}`,
-            activeEntity === index ? 'active' : null,
-          ]"
           @click="selectEntity(entity)"
         >
-          <span>{{ entity.text }}</span>
-          <span class="entity__sort-code"
-            >[{{ activeEntity === index ? "enter" : entity.shortCut }}]</span
-          >
+          <entity-label
+            :label="entity.text"
+            :shortcut="activeEntity === index ? 'enter' : entity.shortCut"
+            :class="[
+              'entities__selector__option',
+              activeEntity === index ? 'active' : null,
+            ]"
+            :color="`color_${entity.colorId % $entitiesMaxColors}`"
+          />
         </li>
       </ul>
       <div v-else class="entities__selector--empty">
@@ -161,7 +164,7 @@ export default {
 .entities {
   &__selector {
     min-width: 220px;
-    background: palette(grey, smooth);
+    background: palette(grey, 600);
     font-weight: 600;
     padding: 0.8em;
     border-radius: $border-radius;
@@ -186,19 +189,12 @@ export default {
     }
     &__option {
       display: flex;
-      transition: all 0.2s ease;
-      padding: 0.5em;
-      position: relative;
-      cursor: pointer;
-      margin-top: 2px;
       margin-bottom: 2px;
       &.suggestion {
         margin-bottom: 0.5em;
       }
-      span {
-        cursor: pointer !important;
-        word-break: break-word;
-        hyphens: auto;
+      :deep(.shortcut) {
+        margin-left: auto;
       }
     }
     &--empty {
@@ -214,18 +210,4 @@ export default {
     }
   }
 }
-.entity {
-  &.non-selectable,
-  &.non-selectable--show-sort-code {
-    cursor: default;
-    pointer-events: none;
-  }
-  &__sort-code {
-    margin-left: auto;
-    margin-right: 0;
-    .non-selectable & {
-      display: none;
-    }
-  }
-}
 </style>
diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
index d6d9c4209e..e6f882b778 100755
--- a/frontend/components/token-classifier/results/EntityHighlight.vue
+++ b/frontend/components/token-classifier/results/EntityHighlight.vue
@@ -114,7 +114,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .whitespace {
+:deep(.whitespace) {
   background: palette(white);
   padding-bottom: 3px;
   border-bottom: 5px solid palette(white);
@@ -161,9 +161,9 @@ export default {
   position: absolute;
   top: -23px;
   right: -3px;
-  border-radius: 3px;
+  border-radius: $border-radius-s;
   min-width: 10px;
-  background: palette(grey, dark);
+  background: $font-dark;
   fill: palette(white);
   padding: 2px;
 }
diff --git a/frontend/components/token-classifier/results/RecordTokenClassification.vue b/frontend/components/token-classifier/results/RecordTokenClassification.vue
index 3dc45a2df1..14bd31245c 100755
--- a/frontend/components/token-classifier/results/RecordTokenClassification.vue
+++ b/frontend/components/token-classifier/results/RecordTokenClassification.vue
@@ -44,14 +44,14 @@
         class="content__actions-buttons"
         v-if="annotationEnabled && record.status !== 'Validated'"
       >
-        <re-button class="button-primary" @click="onValidate(record)">{{
+        <base-button class="primary" @click="onValidate(record)">{{
           record.status === "Edited" ? "Save" : "Validate"
-        }}</re-button>
-        <re-button
+        }}</base-button>
+        <base-button
           :disabled="!record.annotatedEntities.length"
-          class="button-primary--outline"
+          class="primary outline"
           @click="onClearAnnotations()"
-          >Clear annotations</re-button
+          >Clear annotations</base-button
         >
       </div>
     </div>
@@ -173,14 +173,11 @@ export default {
 
 <style lang="scss" scoped>
 .record {
-  padding: 56px 20px 50px 50px;
+  padding: 56px 200px 50px 50px;
   display: block;
   margin-bottom: 0;
   @include font-size(18px);
   line-height: 34px;
-  .list__item--annotation-mode & {
-    padding-left: 65px;
-  }
 }
 
 .content {
@@ -194,14 +191,10 @@ export default {
     margin-left: auto;
     display: flex;
     min-width: 20%;
-    .re-button {
-      min-width: 137px;
-      min-height: 34px;
-      line-height: 34px;
-      display: inline-block;
+    .button {
       margin: 1.5em 0 0 0;
-      & + .re-button {
-        margin-left: 1em;
+      & + .button {
+        margin-left: $base-space * 2;
       }
     }
   }
@@ -212,18 +205,18 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  ::v-deep {
+  :deep() {
     .span__text {
       color: transparent;
       & > * {
-        color: palette(grey, dark);
+        color: $font-dark;
       }
     }
     .highlight__content {
       color: transparent;
     }
   }
-  ::v-deep .highlight-text {
+  :deep(.highlight-text) {
     opacity: 1;
   }
 }
diff --git a/frontend/components/token-classifier/results/TextSpan.vue b/frontend/components/token-classifier/results/TextSpan.vue
index 060c537bef..4a7b81aabf 100755
--- a/frontend/components/token-classifier/results/TextSpan.vue
+++ b/frontend/components/token-classifier/results/TextSpan.vue
@@ -17,7 +17,7 @@
 
 <template>
   <span class="span__text">
-    <EntityHighlight
+    <entity-highlight
       v-if="token.entity"
       :class="[
         'color_' + (tag_color % this.$entitiesMaxColors),
@@ -190,15 +190,15 @@ export default {
 .selected {
   cursor: pointer;
   position: relative;
-  background: palette(grey, smooth);
-  .prediction ::v-deep .highlight__content {
-    background: palette(grey, smooth);
+  background: palette(grey, 600);
+  .prediction :deep(.highlight__content) {
+    background: palette(grey, 600);
   }
   .span__text {
-    background: palette(grey, smooth);
+    background: palette(grey, 600);
   }
   .span__whitespace {
-    background: palette(grey, smooth);
+    background: palette(grey, 600);
   }
 }
 .last-selected {
@@ -216,20 +216,20 @@ $hue: 360;
 @for $i from 1 through $colors {
   $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
-    &.annotation ::v-deep .highlight__content {
+    &.annotation :deep(.highlight__content) {
       background: $rcolor;
     }
-    &.prediction ::v-deep .highlight__content {
+    &.prediction :deep(.highlight__content) {
       padding-bottom: 3px;
       border-bottom: 5px solid $rcolor;
     }
-    & ::v-deep .highlight__tooltip {
+    & :deep(.highlight__tooltip) {
       background: $rcolor;
     }
-    &.annotation ::v-deep .highlight__tooltip:after {
+    &.annotation :deep(.highlight__tooltip:after) {
       border-color: $rcolor transparent transparent transparent;
     }
-    &.prediction ::v-deep .highlight__tooltip:after {
+    &.prediction :deep(.highlight__tooltip:after) {
       border-color: transparent transparent $rcolor transparent;
     }
     &.active,
@@ -240,11 +240,11 @@ $hue: 360;
   .tag.color_#{$i - 1} span {
     background: $rcolor;
   }
-  ::v-deep .entities__selector__option.color_#{$i - 1} {
+  :deep(.entities__selector__option.color_#{$i - 1}) {
     background: $rcolor;
     border: 2px solid $rcolor;
   }
-  ::v-deep .entities__selector__option.color_#{$i - 1} {
+  :deep(.entities__selector__option.color_#{$i - 1}) {
     &:active,
     &.active,
     &:hover {
diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
index 7606f4eab6..cb19f7c064 100755
--- a/frontend/components/token-classifier/results/TextSpanStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -17,7 +17,7 @@
 
 <template>
   <span class="span__text">
-    <EntityHighlight
+    <entity-highlight
       v-if="token.entity"
       :class="[
         'color_' + (tag_color % this.$entitiesMaxColors),
@@ -75,7 +75,7 @@ export default {
     top: 1em;
     min-width: 220px;
     z-index: 9;
-    background: palette(grey, smooth);
+    background: palette(grey, 600);
     font-weight: 600;
     padding: 0.8em;
     border-radius: 1px;
@@ -136,15 +136,15 @@ export default {
 .selected {
   cursor: pointer;
   position: relative;
-  background: palette(grey, smooth);
-  .prediction ::v-deep .highlight__content {
-    background: palette(grey, smooth);
+  background: palette(grey, 600);
+  .prediction :deep(.highlight__content) {
+    background: palette(grey, 600);
   }
   .span__text {
-    background: palette(grey, smooth);
+    background: palette(grey, 600);
   }
   .span__whitespace {
-    background: palette(grey, smooth);
+    background: palette(grey, 600);
   }
 }
 .last-selected {
@@ -179,10 +179,10 @@ $hue: 360;
 @for $i from 1 through $colors {
   $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
-    &.annotation ::v-deep .highlight__content {
+    &.annotation :deep(.highlight__content) {
       background: $rcolor;
     }
-    &.prediction ::v-deep .highlight__content {
+    &.prediction :deep(.highlight__content) {
       padding-bottom: 3px;
       border-bottom: 5px solid $rcolor;
       position: relative;
@@ -195,13 +195,13 @@ $hue: 360;
         right: 0;
       }
     }
-    &.annotation ::v-deep .highlight__tooltip:after {
+    &.annotation :deep(.highlight__tooltip:after) {
       border-color: $rcolor transparent transparent transparent;
     }
-    &.prediction ::v-deep .highlight__tooltip:after {
+    &.prediction :deep(.highlight__tooltip:after) {
       border-color: transparent transparent $rcolor transparent;
     }
-    &.excluded ::v-deep {
+    &.excluded :deep() {
       .highlight__content {
         &:after {
           content: none;
@@ -227,7 +227,7 @@ $hue: 360;
       border: 2px solid mix(black, $rcolor, 20%);
     }
   }
-  .color_#{$i - 1} ::v-deep .highlight__tooltip {
+  .color_#{$i - 1} :deep(.highlight__tooltip) {
     background: $rcolor;
   }
 }
diff --git a/frontend/components/token-classifier/results/TextSpans.vue b/frontend/components/token-classifier/results/TextSpans.vue
index cc40af888b..2110769dce 100755
--- a/frontend/components/token-classifier/results/TextSpans.vue
+++ b/frontend/components/token-classifier/results/TextSpans.vue
@@ -23,7 +23,7 @@
     @mouseup="reset($event)"
     v-click-outside="onReset"
   >
-    <TextSpan
+    <text-span
       v-for="(token, i) in textSpans"
       :key="i"
       :record="record"
@@ -265,7 +265,6 @@ export default {
 <style lang="scss" scoped>
 .content {
   &__input {
-    padding-right: 200px;
     ::selection {
       background: none !important;
     }
diff --git a/frontend/components/token-classifier/results/TextSpansStatic.vue b/frontend/components/token-classifier/results/TextSpansStatic.vue
index 11b563134a..570ea9c54d 100755
--- a/frontend/components/token-classifier/results/TextSpansStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpansStatic.vue
@@ -115,7 +115,6 @@ export default {
 <style lang="scss" scoped>
 .content {
   &__input {
-    padding-right: 200px;
     ::selection {
       background: none !important;
     }
diff --git a/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue b/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
index 6740ba427d..222bf03112 100644
--- a/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
+++ b/frontend/components/token-classifier/sidebar/SidebarCollapsableMentions.vue
@@ -16,25 +16,20 @@
   -->
 
 <template>
-  <div>
-    <div
-      v-for="(item, index) in sortedObject.slice(0, limit)"
-      :key="index"
-      class="info"
-    >
-      <label>{{ item[0] }}</label>
-      <span class="records-number">
+  <ul class="metrics__list">
+    <li v-for="(item, index) in sortedObject.slice(0, limit)" :key="index">
+      <label class="metrics__list__name">{{ item[0] }}</label>
+      <span class="metrics__list__counter">
         {{ item[1] | formatNumber }}
       </span>
-    </div>
-    <a
+    </li>
+    <base-button
       v-if="limit !== 0 && sortedObject.length > 3"
-      class="sidebar__view-more"
-      href="#"
-      @click.prevent="$emit('limit', k)"
-      >{{ limit === 3 ? `show more` : `show less` }}</a
+      class="link small"
+      @click="$emit('limit', k)"
+      >{{ limit === 3 ? `Show more` : `Show less` }}</base-button
     >
-  </div>
+  </ul>
 </template>
 <script>
 export default {
@@ -60,24 +55,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.sidebar {
-  &__view-more {
-    color: $font-secondary;
-    text-decoration: none;
-    outline: none;
-    margin-bottom: 1.5em;
-    display: inline-block;
-  }
-}
-.info {
-  color: $font-secondary-dark;
-  position: relative;
-  display: flex;
-  margin-bottom: 0.7em;
-}
-.records-number {
-  margin-right: 0;
-  margin-left: auto;
-  padding-left: 0.5em;
+.button {
+  margin-top: $base-space * 2;
 }
 </style>
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue b/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
index e7d6285e56..7740a8c2d2 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
@@ -16,25 +16,24 @@
   -->
 
 <template>
-  <SidebarProgress :dataset="dataset">
-    <div v-if="annotationsProgress" class="labels">
-      <div v-for="(counter, label) in getInfo" :key="label">
-        <div v-if="counter > 0" class="info">
-          <label
-            :class="[
-              `color_${
-                entities.filter((e) => e.text === label)[0].colorId %
-                $entitiesMaxColors
-              }`,
-              'entity',
-            ]"
-            >{{ label }}</label
-          >
-          <span class="records-number">{{ counter | formatNumber }}</span>
-        </div>
-      </div>
-    </div>
-  </SidebarProgress>
+  <sidebar-progress :dataset="dataset">
+    <ul v-if="annotationsProgress" class="metrics__list">
+      <li v-for="(counter, label) in getInfo" :key="label">
+        <template v-if="counter > 0">
+          <entity-label
+            :label="label"
+            :color="`color_${
+              entities.filter((e) => e.text === label)[0].colorId %
+              $entitiesMaxColors
+            }`"
+          />
+          <span class="metrics__list__counter">{{
+            counter | formatNumber
+          }}</span>
+        </template>
+      </li>
+    </ul>
+  </sidebar-progress>
 </template>
 
 <script>
@@ -59,30 +58,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.labels {
-  margin-top: 2em;
-}
-.info {
-  position: relative;
-  display: flex;
-  margin-bottom: 0.7em;
-  font-weight: 600;
-  label {
-    margin: 0;
-    word-break: break-word;
-    hyphens: auto;
-    &[class^="color_"] {
-      padding: 0.3em;
-    }
-  }
-}
-$colors: 50;
-$hue: 360;
-@for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
-  .color_#{$i - 1} {
-    background: $rcolor;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
index 5bfbe39f58..edbe36fd94 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationSidebar.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <SidebarMenu
+  <sidebar-menu
     :current-metric="currentMetric"
     :dataset="dataset"
     :sidebar-items="sidebarItems"
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
index 9c8bdb9305..f222ca73e0 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
@@ -17,8 +17,8 @@
 
 <template>
   <div>
-    <p class="sidebar__title">Stats</p>
-    <StatsSelector
+    <p class="metrics__title">Stats</p>
+    <stats-selector
       :selected-option="selectedOption"
       :options="options"
       @selectOption="onSelectOption"
@@ -51,18 +51,15 @@
           :key="key"
           :class="expandedMentionsGroup === key ? 'expanded' : ''"
         >
-          <span
-            :class="[
-              `color_${
-                entities.filter((e) => e.text === key)[0].colorId %
-                $entitiesMaxColors
-              }`,
-              'entity',
-              activeTab,
-            ]"
-            >{{ key }}</span
-          >
-          <SidebarCollapsableMentions
+          <entity-label
+            :is-prediction="activeTab === 'predicted_mentions'"
+            :label="key"
+            :color="`color_${
+              entities.filter((e) => e.text === key)[0].colorId %
+              $entitiesMaxColors
+            }`"
+          />
+          <sidebar-collapsable-mentions
             :limit="
               expandedMentionsGroup && expandedMentionsGroup !== key
                 ? 0
@@ -159,9 +156,9 @@ export default {
     a {
       font-family: $sff;
       width: 100%;
-      border-radius: $radius;
+      border-radius: $border-radius;
       text-align: center;
-      color: $font-secondary;
+      color: $font-secondary-medium;
       text-decoration: none;
       margin: 0 5px;
       outline: none;
@@ -169,20 +166,13 @@ export default {
       padding: 0.5em;
       &.active {
         color: $primary-color;
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
       }
       &:hover {
-        background: palette(grey, smooth);
+        background: palette(grey, 600);
       }
     }
   }
-  .entity {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    padding: 0.5em;
-    display: inline-flex;
-    font-weight: 600;
-  }
   .scroll {
     max-height: calc(100vh - 250px);
     padding-right: 1em;
@@ -191,17 +181,4 @@ export default {
     @extend %hide-scrollbar;
   }
 }
-$colors: 50;
-$hue: 360;
-@for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
-  .color_#{$i - 1} {
-    background: $rcolor;
-    &.predicted_mentions {
-      padding: 0.4em 0;
-      background: none;
-      border-bottom: 5px solid $rcolor;
-    }
-  }
-}
 </style>
diff --git a/frontend/layouts/error.vue b/frontend/layouts/error.vue
index 0afcfcd69a..0a682c8200 100644
--- a/frontend/layouts/error.vue
+++ b/frontend/layouts/error.vue
@@ -28,7 +28,7 @@
         <p class="error__subtitle">
           The page you’re looking for can’t be found.
         </p>
-        <NuxtLink to="/" class="error__link">Take me home</NuxtLink>
+        <nuxt-link to="/" class="error__link">Take me home</nuxt-link>
       </div>
     </div>
     <div class="error--bg">
@@ -118,7 +118,7 @@ export default {
   @extend %container;
 }
 .navbar {
-  border-bottom: 1px solid $line-light-color;
+  border-bottom: 1px solid palette(grey, 700);
   display: block;
   svg {
     max-width: 120px;
@@ -130,7 +130,7 @@ export default {
   position: relative;
   min-height: calc(100vh - 8em);
   background-size: 100%;
-  background: $lighter-color;
+  background: palette(white);
   &__content {
     max-width: 700px;
     margin: auto;
@@ -168,7 +168,7 @@ export default {
     font-weight: lighter;
     margin-top: 0 !important;
     margin-bottom: 1em;
-    color: $darker-color;
+    color: $font-dark;
     @include font-size(32px);
     line-height: 1.2em;
   }
@@ -196,7 +196,7 @@ export default {
       margin-left: 0.5em;
     }
   }
-  ::v-deep .footer {
+  :deep(.footer) {
     position: absolute;
     bottom: 0;
     left: 0;
diff --git a/frontend/pages/datasets/_workspace/_dataset/index.vue b/frontend/pages/datasets/_workspace/_dataset/index.vue
index 0ae6b49232..652f665ef1 100644
--- a/frontend/pages/datasets/_workspace/_dataset/index.vue
+++ b/frontend/pages/datasets/_workspace/_dataset/index.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <re-loading v-if="$fetchState.pending" />
+  <base-loading v-if="$fetchState.pending" />
   <div
     :class="[
       'app',
diff --git a/frontend/pages/datasets/index.vue b/frontend/pages/datasets/index.vue
index 19cc1b64c3..44ae43f55b 100644
--- a/frontend/pages/datasets/index.vue
+++ b/frontend/pages/datasets/index.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div>
-    <ReLoading v-if="$fetchState.pending" />
+    <base-loading v-if="$fetchState.pending" />
     <div v-else class="wrapper">
       <div class="main">
         <app-header
@@ -26,7 +26,7 @@
           :sticky="false"
           @breadcrumb-action="onBreadcrumbAction($event)"
         />
-        <Error
+        <error
           v-if="$fetchState.error"
           where="workspace datasets"
           :error="$fetchState.error"
@@ -34,10 +34,10 @@
         <datasets-empty v-else-if="!datasets.length" :workspace="workspace" />
         <div v-else class="container">
           <div class="interactions">
-            <ReSearchBar @input="onSearch" placeholder="Search datasets" />
+            <base-search-bar @input="onSearch" placeholder="Search datasets" />
           </div>
           <div>
-            <ReTableInfo
+            <base-table-info
               ref="table"
               :data="datasets"
               :sorted-order="sortedOrder"
@@ -323,7 +323,7 @@ export default {
     padding-top: 2em;
     margin-bottom: 1.5em;
     &:after {
-      border-bottom: 1px solid $line-light-color;
+      border-bottom: 1px solid palette(grey, 700);
       content: "";
       margin-bottom: 1.5em;
       position: absolute;
@@ -337,10 +337,6 @@ export default {
   display: flex;
   align-items: flex-end;
   margin: 2em 0 1em 0;
-  .re-button {
-    margin-left: auto;
-    margin-bottom: 0;
-  }
 }
 
 .title {
@@ -356,7 +352,7 @@ export default {
     position: fixed;
     top: 56px;
     right: 0;
-    border-left: 1px solid palette(grey, smooth);
+    border-left: 1px solid palette(grey, 600);
   }
 }
 </style>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 4ff397898f..6158ffda61 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -30,8 +30,8 @@
           placeholder="Password"
         />
       </div>
-      <ReButton type="submit" class="form__button button-primary"
-        >Enter</ReButton
+      <base-button type="submit" class="form__button primary"
+        >Enter</base-button
       >
       <p v-if="error">{{ error }}</p>
     </form>
@@ -79,7 +79,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  background: $line-light-color;
+  background: palette(grey, 700);
   display: flex;
   align-items: center;
   min-height: 100vh;
@@ -87,7 +87,7 @@ export default {
 
 .form {
   border-radius: $border-radius;
-  background: $lighter-color;
+  background: palette(white);
   margin: auto;
   display: inline-block;
   padding: 50px;
@@ -101,25 +101,24 @@ export default {
   &__title {
     text-align: center;
     @include font-size(26px);
-    font-family: "Futura Medium";
     line-height: 1.2em;
     margin: 0 auto 2em auto;
     color: #010250;
+    font-weight: 600;
+    letter-spacing: 0.03em;
   }
   &__button {
     margin: 2em auto 0 auto;
-    text-align: center !important;
-    display: block !important;
+    justify-content: center;
     width: 100%;
-    min-height: 36px !important;
   }
   &__input {
     position: relative;
     display: block;
     margin-bottom: 1em;
     input {
-      border: 1px solid palette(grey, smooth);
-      border-radius: $radius;
+      border: 1px solid palette(grey, 600);
+      border-radius: $border-radius;
       padding: 0 1em;
       outline: none;
       background: transparent;
@@ -129,6 +128,6 @@ export default {
   }
 }
 input:-webkit-autofill {
-  box-shadow: 0 0 0px 1000px $lighter-color inset;
+  box-shadow: 0 0 0px 1000px palette(white) inset;
 }
 </style>
diff --git a/frontend/plugins/toast.js b/frontend/plugins/toast.js
index 54beffd9cb..32f5ca2e95 100644
--- a/frontend/plugins/toast.js
+++ b/frontend/plugins/toast.js
@@ -16,6 +16,6 @@
  */
 
 import Vue from "vue";
-import VueToast from "@/components/core/ReToast";
+import VueToast from "@/components/base/BaseToast";
 
 Vue.use(VueToast);
diff --git a/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap b/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap
index cb558125d0..3b1e77db05 100644
--- a/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap
+++ b/frontend/specs/components/commons/results/__snapshots__/RecordExtraAtions.spec.js.snap
@@ -6,9 +6,9 @@ exports[`RecordExtraActions renders properly 1`] = `
     </svg></a>
   <div class="extra-actions__content">
     <div><span>View metadata</span></div>
-    <re-action-tooltip tooltip="Copied">
+    <base-action-tooltip tooltip="Copied">
       <div><span>Copy text</span></div>
-    </re-action-tooltip>
+    </base-action-tooltip>
     <div><span>Discard record</span></div>
   </div>
 </div>
diff --git a/frontend/specs/components/core/BaseSlider.spec.js b/frontend/specs/components/core/BaseSlider.spec.js
new file mode 100644
index 0000000000..e66c75ccf7
--- /dev/null
+++ b/frontend/specs/components/core/BaseSlider.spec.js
@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import BaseSlider from "@/components/base/BaseSlider";
+
+function mountBaseSlider() {
+  return mount(BaseSlider, {
+    propsData: {
+      slidesName: "sentences",
+      slidesOrigin: ["first sentence", "second sentence"],
+      itemNumber: 0,
+    },
+  });
+}
+
+describe("BaseSlider", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountBaseSlider();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/specs/components/core/__snapshots__/BaseSlider.spec.js.snap b/frontend/specs/components/core/__snapshots__/BaseSlider.spec.js.snap
new file mode 100644
index 0000000000..d09bf26c40
--- /dev/null
+++ b/frontend/specs/components/core/__snapshots__/BaseSlider.spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseSlider renders properly 1`] = `
+<div class="slides-nav"><a href="#" class="disabled"><svg version="1.1" viewBox="0 0 8 8" class="svg-icon svg-fill" style="width: 8px; height: 8px;"></svg></a>
+  1 of 2 sentences
+  <a href="#"><svg version="1.1" viewBox="0 0 8 8" class="svg-icon svg-fill" style="width: 8px; height: 8px;"></svg></a>
+</div>
+`;
diff --git a/frontend/specs/components/core/table/ReTableInfo.spec.js b/frontend/specs/components/core/table/BaseTableInfo.spec.js
similarity index 86%
rename from frontend/specs/components/core/table/ReTableInfo.spec.js
rename to frontend/specs/components/core/table/BaseTableInfo.spec.js
index 4443697de2..584e8be5cf 100644
--- a/frontend/specs/components/core/table/ReTableInfo.spec.js
+++ b/frontend/specs/components/core/table/BaseTableInfo.spec.js
@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import ReTableInfo from "@/components/core/table/ReTableInfo";
+import BaseTableInfo from "@/components/base/table/BaseTableInfo";
 
 const $route = {
   query: {},
 };
 
-function mountReTableInfo() {
-  return mount(ReTableInfo, {
+function mountBaseTableInfo() {
+  return mount(BaseTableInfo, {
     propsData: {
       actions: [],
       columns: [
@@ -54,12 +54,12 @@ function mountReTableInfo() {
   });
 }
 
-describe("ReTableInfo", () => {
+describe("BaseTableInfo", () => {
   let spy = jest.spyOn(console, "error");
   afterEach(() => spy.mockReset());
 
   test("renders properly", () => {
-    const wrapper = mountReTableInfo();
+    const wrapper = mountBaseTableInfo();
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
diff --git a/frontend/specs/components/core/table/TableFiltrableColumn.spec.js b/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
index 5648cd1cca..e41446f0d1 100644
--- a/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
+++ b/frontend/specs/components/core/table/TableFiltrableColumn.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import TableFiltrableColumn from "@/components/core/table/TableFiltrableColumn";
+import TableFiltrableColumn from "@/components/base/table/TableFiltrableColumn";
 
 function mountTableFiltrableColumn() {
   return mount(TableFiltrableColumn, {
diff --git a/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap b/frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap
similarity index 68%
rename from frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
rename to frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap
index e6e82b7dd0..465c1b700c 100644
--- a/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
+++ b/frontend/specs/components/core/table/__snapshots__/BaseTableInfo.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReTableInfo renders properly 1`] = `
+exports[`BaseTableInfo renders properly 1`] = `
 <transition-stub name="fade" appear="true" filterfromroute="owner">
   <div class="table-info">
     <div class="table-info__header">
@@ -17,40 +17,40 @@ exports[`ReTableInfo 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>
-            <remodal 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-visible="true" modal-position="modal-center">
               <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">
-                  <rebutton class="button-tertiary--small button-tertiary--outline">
+                  <base-button class="primary outline">
                     Cancel
-                  </rebutton>
-                  <rebutton class="button-secondary--small">
+                  </base-button>
+                  <base-button class="primary">
                     Yes, delete
-                  </rebutton>
+                  </base-button>
                 </div>
               </div>
-            </remodal>
+            </base-modal>
           </div>
         </li>
         <li>
           <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>
-            <remodal 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-visible="true" modal-position="modal-center">
               <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">
-                  <rebutton class="button-tertiary--small button-tertiary--outline">
+                  <base-button class="primary outline">
                     Cancel
-                  </rebutton>
-                  <rebutton class="button-secondary--small">
+                  </base-button>
+                  <base-button class="primary">
                     Yes, delete
-                  </rebutton>
+                  </base-button>
                 </div>
               </div>
-            </remodal>
+            </base-modal>
           </div>
         </li>
       </ul>
diff --git a/frontend/specs/components/filters/SelectOptions.spec.js b/frontend/specs/components/filters/SelectOptions.spec.js
new file mode 100644
index 0000000000..a63939aeee
--- /dev/null
+++ b/frontend/specs/components/filters/SelectOptions.spec.js
@@ -0,0 +1,20 @@
+import { mount } from "@vue/test-utils";
+import SelectOptions from "@/components/commons/header/filters/SelectOptions";
+
+function mountSelectOptions() {
+  return mount(SelectOptions, {
+    propsData: {
+      options: ["NEGATIVE", "POSITIVE", "OTHER"],
+    },
+  });
+}
+
+describe("SelectOptions", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountSelectOptions();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/specs/components/filters/SelectOptionsSearch.spec.js b/frontend/specs/components/filters/SelectOptionsSearch.spec.js
new file mode 100644
index 0000000000..ab8572d1a2
--- /dev/null
+++ b/frontend/specs/components/filters/SelectOptionsSearch.spec.js
@@ -0,0 +1,21 @@
+import { mount } from "@vue/test-utils";
+import SelectOptionsSearch from "@/components/commons/header/filters/SelectOptionsSearch";
+
+function mountSelectOptionsSearch() {
+  return mount(SelectOptionsSearch, {
+    propsData: {
+      value: ["NEGAT"],
+      allowClear: true,
+    },
+  });
+}
+
+describe("SelectOptionsSearch", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountSelectOptionsSearch();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/specs/components/filters/__snapshots__/FilterScore.spec.js.snap b/frontend/specs/components/filters/__snapshots__/FilterScore.spec.js.snap
index 6a20396ef0..1414b9f442 100644
--- a/frontend/specs/components/filters/__snapshots__/FilterScore.spec.js.snap
+++ b/frontend/specs/components/filters/__snapshots__/FilterScore.spec.js.snap
@@ -3,43 +3,19 @@
 exports[`FilterScore Expand filter 1`] = `
 <div class="filter__row">
   <!---->
-  <div class="filter__row__content">
-    <p class="filter__label">Score:</p>
-    <div class="filter__item filter__item--score filter__item--open">
-      <div class="score-content">
-        <vega-lite data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" autosize="[object Object]" config="[object Object]" mark="area" encoding="[object Object]" class="score"></vega-lite>
-      </div>
-    </div>
-    <div class="filter__item filter__item--score expanded">
-      <div class="score-content">
-        <p class="range__panel">
-          0 to 1
-        </p>
-        <vega-lite data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" autosize="[object Object]" config="[object Object]" mark="area" encoding="[object Object]" class="score"></vega-lite>
-        <div class="range__container">
-          <rerange height="4" dotsize="20" min="0" max="100" interval="1" show="true"></rerange>
-        </div>
-      </div>
-      <div class="filter__buttons">
-        <rebutton class="button-tertiary--small button-tertiary--outline">Cancel</rebutton>
-        <rebutton class="button-primary--small">Apply</rebutton>
-      </div>
-    </div>
-  </div>
+  <p class="filter__label">Score:</p>
+  <filter-dropdown color-type="grey" class=""><span slot="dropdown-header"><vega-lite data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" autosize="[object Object]" config="[object Object]" mark="area" encoding="[object Object]" class="score"></vega-lite></span>
+    <!---->
+  </filter-dropdown>
 </div>
 `;
 
 exports[`FilterScore renders properly 1`] = `
 <div class="filter__row">
   <!---->
-  <div class="filter__row__content">
-    <p class="filter__label">Score:</p>
-    <div class="filter__item filter__item--score">
-      <div class="score-content">
-        <vega-lite data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" autosize="[object Object]" config="[object Object]" mark="area" encoding="[object Object]" class="score"></vega-lite>
-      </div>
-    </div>
+  <p class="filter__label">Score:</p>
+  <filter-dropdown color-type="grey" class=""><span slot="dropdown-header"><vega-lite data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" autosize="[object Object]" config="[object Object]" mark="area" encoding="[object Object]" class="score"></vega-lite></span>
     <!---->
-  </div>
+  </filter-dropdown>
 </div>
 `;
diff --git a/frontend/specs/components/filters/__snapshots__/FilterUncoveredByRules.spec.js.snap b/frontend/specs/components/filters/__snapshots__/FilterUncoveredByRules.spec.js.snap
index 3711129adc..ac0d8a5e32 100644
--- a/frontend/specs/components/filters/__snapshots__/FilterUncoveredByRules.spec.js.snap
+++ b/frontend/specs/components/filters/__snapshots__/FilterUncoveredByRules.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FilterUncoveredByRules renders properly 1`] = `
-<recheckbox value="true" class="re-checkbox--dark">
+<base-checkbox value="true" class="re-checkbox--dark">
   Only records not covered by rules
-</recheckbox>
+</base-checkbox>
 `;
diff --git a/frontend/specs/components/filters/__snapshots__/SelectOptions.spec.js.snap b/frontend/specs/components/filters/__snapshots__/SelectOptions.spec.js.snap
new file mode 100644
index 0000000000..94aecb785f
--- /dev/null
+++ b/frontend/specs/components/filters/__snapshots__/SelectOptions.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectOptions renders properly 1`] = `
+<ul>
+  <li>
+    <base-checkbox id="NEGATIVE" value="NEGATIVE" class="re-checkbox--dark">
+      NEGATIVE
+      <!---->
+    </base-checkbox>
+  </li>
+  <li>
+    <base-checkbox id="POSITIVE" value="POSITIVE" class="re-checkbox--dark">
+      POSITIVE
+      <!---->
+    </base-checkbox>
+  </li>
+  <li>
+    <base-checkbox id="OTHER" value="OTHER" class="re-checkbox--dark">
+      OTHER
+      <!---->
+    </base-checkbox>
+  </li>
+  <!---->
+</ul>
+`;
diff --git a/frontend/specs/components/filters/__snapshots__/SelectOptionsSearch.spec.js.snap b/frontend/specs/components/filters/__snapshots__/SelectOptionsSearch.spec.js.snap
new file mode 100644
index 0000000000..ec3ce33aa5
--- /dev/null
+++ b/frontend/specs/components/filters/__snapshots__/SelectOptionsSearch.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectOptionsSearch renders properly 1`] = `<div class="options-search"><input type="text" autofocus="autofocus" placeholder="Search..." class="options-search__input"> <a href="#" class="options-search__clear"><svg version="1.1" viewBox="0 0 10 10" class="svg-icon svg-fill" style="width: 10px; height: 10px;"></svg></a></div>`;
diff --git a/frontend/specs/components/filters/__snapshots__/SortList.spec.js.snap b/frontend/specs/components/filters/__snapshots__/SortList.spec.js.snap
index 3fd140d4c6..34b47433bd 100644
--- a/frontend/specs/components/filters/__snapshots__/SortList.spec.js.snap
+++ b/frontend/specs/components/filters/__snapshots__/SortList.spec.js.snap
@@ -7,8 +7,8 @@ exports[`SortList renders properly 1`] = `
   </div>
   <!---->
   <div class="sort__buttons">
-    <re-button class="button-tertiary--small button-tertiary--outline">Cancel</re-button>
-    <re-button class="button-primary--small">Sort</re-button>
+    <base-button class="primary outline">Cancel</base-button>
+    <base-button class="primary">Sort</base-button>
   </div>
 </div>
 `;
diff --git a/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap b/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap
index 10d040aa36..ea55cb75d4 100644
--- a/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap
+++ b/frontend/specs/components/text-classification/results/__snapshots__/ClassifierAnnotationArea.spec.js.snap
@@ -4,8 +4,8 @@ exports[`ClassifierAnnotationArea renders properly 1`] = `
 <div class="annotation-area">
   <!---->
   <div class="feedback-interactions">
-    <classifierannotationbutton id="A" label="[object Object]" data-title="A" value="A" class="label-button"></classifierannotationbutton>
-    <classifierannotationbutton id="B" label="[object Object]" data-title="B" value="B" class="label-button"></classifierannotationbutton>
+    <classifier-annotation-button id="A" label="[object Object]" data-title="A" value="A" class="label-button"></classifier-annotation-button>
+    <classifier-annotation-button id="B" label="[object Object]" data-title="B" value="B" class="label-button"></classifier-annotation-button>
     <!---->
   </div>
 </div>
diff --git a/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap b/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap
index 2b60c6c38a..bb593d022e 100644
--- a/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap
+++ b/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap
@@ -3,15 +3,15 @@
 exports[`RecordTextClassification renders properly 1`] = `
 <div class="record">
   <div class="record--left">
-    <recordinputs record="[object Object]"></recordinputs>
-    <classifierexplorationarea dataset="[object Object]" record="[object Object]"></classifierexplorationarea>
+    <record-inputs record="[object Object]"></record-inputs>
+    <classifier-exploration-area dataset="[object Object]" record="[object Object]"></classifier-exploration-area>
     <!---->
   </div>
   <div class="record__labels"><svg version="1.1" viewBox="0 0 40 40" class="svg-icon svg-fill icon__predicted ok" style="width: 40px; height: 40px;">
       <path pid="0" d="M17.604 25.882l-5.786-5.785 1.929-1.929 3.857 3.857 7.713-7.713 1.929 1.928-9.642 9.642z" _fill="#000"></path>
       <path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M5 20c0-8.284 6.716-15 15-15 8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15zm15 12.273c-6.778 0-12.273-5.495-12.273-12.273S13.222 7.727 20 7.727 32.273 13.222 32.273 20 26.778 32.273 20 32.273z" _fill="#000"></path>
     </svg>
-    <re-tag name="Test"></re-tag>
+    <base-tag name="Test"></base-tag>
   </div>
 </div>
 `;
@@ -19,8 +19,8 @@ exports[`RecordTextClassification renders properly 1`] = `
 exports[`RecordTextClassification renders with empty prediction correctly 1`] = `
 <div class="record">
   <div class="record--left">
-    <recordinputs record="[object Object]"></recordinputs>
-    <classifierexplorationarea dataset="[object Object]" record="[object Object]"></classifierexplorationarea>
+    <record-inputs record="[object Object]"></record-inputs>
+    <classifier-exploration-area dataset="[object Object]" record="[object Object]"></classifier-exploration-area>
     <!---->
   </div>
   <div class="record__labels">
diff --git a/frontend/specs/components/token-classification/results/__snapshots__/EntitiesSelector.spec.js.snap b/frontend/specs/components/token-classification/results/__snapshots__/EntitiesSelector.spec.js.snap
index 959585bb8e..8927f486f1 100644
--- a/frontend/specs/components/token-classification/results/__snapshots__/EntitiesSelector.spec.js.snap
+++ b/frontend/specs/components/token-classification/results/__snapshots__/EntitiesSelector.spec.js.snap
@@ -1,10 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EntitiesSelector renders properly 1`] = `
-<span class="entities__selector__container"><div class="entities__selector"><ul class="entities__selector__options"><li class="entities__selector__option suggestion color_14 active"><span>Arreglo</span> <span class="entity__sort-code">[space]</span></li>
-<li tabindex="0" class="entities__selector__option color_14"><span>Arreglo</span> <span class="entity__sort-code">[1]</span></li>
-<li tabindex="0" class="entities__selector__option color_1"><span>CARDINAL</span> <span class="entity__sort-code">[2]</span></li>
-</ul>
-</div>
-</span>
-`;
+exports[`EntitiesSelector renders properly 1`] = `<span class="entities__selector__container"><div class="entities__selector"><ul class="entities__selector__options"><li><entity-label label="Arreglo" shortcut="space" color="color_14" class="entities__selector__option suggestion active"></entity-label></li> <li tabindex="0"><entity-label label="Arreglo" shortcut="1" color="color_14" class="entities__selector__option"></entity-label></li><li tabindex="0"><entity-label label="CARDINAL" shortcut="2" color="color_1" class="entities__selector__option"></entity-label></li></ul></div></span>`;