diff --git a/frontend/components/core/BaseSlider.vue b/frontend/components/core/BaseSlider.vue
new file mode 100644
index 0000000000..920f95c437
--- /dev/null
+++ b/frontend/components/core/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: auto;
+  margin-left: 0;
+  color: $font-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, 800);
+      transition: all 0.2s ease-in-out;
+    }
+    &.disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+</style>
diff --git a/frontend/components/text2text/results/Text2TextList.vue b/frontend/components/text2text/results/Text2TextList.vue
index 576fa35241..335b0fe580 100644
--- a/frontend/components/text2text/results/Text2TextList.vue
+++ b/frontend/components/text2text/results/Text2TextList.vue
@@ -58,11 +58,7 @@
           </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">
@@ -99,35 +95,13 @@
                 <div v-if="showScore" class="content__score">
                   Score: {{ sentence.score | percent }}
                 </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="8"
-                      height="8"
-                      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="8"
-                      height="8"
-                      color="#4C4EA3"
-                    />
-                  </a>
-                </div>
+                <base-slider
+                  v-if="sentences.length"
+                  :slides-origin="sentences"
+                  :item-number="itemNumber"
+                  slides-name="predictions"
+                  @go-to="showItemNumber"
+                />
               </template>
               <div v-if="annotationEnabled" class="content__actions-buttons">
                 <base-button
@@ -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);
     },
@@ -477,40 +451,6 @@ export default {
       }
     }
   }
-  &__nav-buttons {
-    @include font-size(13px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 33%;
-    margin-right: auto;
-    margin-left: 0;
-    color: $font-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, 800);
-        transition: all 0.2s ease-in-out;
-      }
-      &.disabled {
-        opacity: 0;
-        pointer-events: none;
-      }
-    }
-  }
 }
 .button {
   display: block;
diff --git a/frontend/specs/components/core/BaseSlider.spec.js b/frontend/specs/components/core/BaseSlider.spec.js
new file mode 100644
index 0000000000..6490569457
--- /dev/null
+++ b/frontend/specs/components/core/BaseSlider.spec.js
@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import BaseSlider from "@/components/core/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>
+`;