diff --git a/.github/workflows/argilla-frontend.yml b/.github/workflows/argilla-frontend.yml
index 2392268cac..7b5e642e2c 100644
--- a/.github/workflows/argilla-frontend.yml
+++ b/.github/workflows/argilla-frontend.yml
@@ -10,12 +10,6 @@ on:
   pull_request:
     paths:
       - "argilla-frontend/**"
-    types:
-      - opened
-      - edited
-      - reopened
-      - synchronize
-      - ready_for_review
 
 jobs:
   build:
diff --git a/.github/workflows/argilla-server.yml b/.github/workflows/argilla-server.yml
index 3528ec7b7c..e0af03f1fa 100644
--- a/.github/workflows/argilla-server.yml
+++ b/.github/workflows/argilla-server.yml
@@ -14,8 +14,6 @@ on:
   push:
     paths:
       - argilla-server/**
-    tags:
-      - "*"
     branches:
       - main
       - develop
@@ -26,10 +24,6 @@ on:
     paths:
       - argilla-server/**
 
-  release:
-    types:
-      - published
-
 jobs:
   build:
     name: Build `argilla-server` package
diff --git a/.github/workflows/argilla-v1.yml b/.github/workflows/argilla-v1.yml
index 2870c3d149..c6db82e697 100644
--- a/.github/workflows/argilla-v1.yml
+++ b/.github/workflows/argilla-v1.yml
@@ -11,8 +11,6 @@ on:
   push:
     paths:
       - argilla-v1/**
-    tags:
-      - "*"
     branches:
       - main
       - develop
@@ -23,11 +21,6 @@ on:
     paths:
       - argilla-v1/**
 
-  release:
-    types:
-      - "published"
-      - "released"
-
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/argilla.docs.yml b/.github/workflows/argilla.docs.yml
index 22f3f09fb6..c171ab253f 100644
--- a/.github/workflows/argilla.docs.yml
+++ b/.github/workflows/argilla.docs.yml
@@ -14,8 +14,6 @@ on:
       # - "develop"
       - "feat/v2.0.0" # Fixing this branch until we merge everything into develop
       - "docs/**" # When we create a new branch only for docs
-    tags:
-      - "*"
 
 defaults:
   run:
@@ -54,8 +52,7 @@ jobs:
           git config --global user.email "${{ github.actor }}@users.noreply.github.com"
 
       - name: Print GitHub ref info
-        run:
-          echo "${{ github.ref }}"
+        run: echo "${{ github.ref }}"
           echo "${{ github.head_ref }}"
 
       - run: pdm run mike deploy dev --push
@@ -77,4 +74,4 @@ jobs:
       - run: pdm run mike deploy ${{ steps.extract_branch_name.outputs.branch_name }} --push
         if: startsWith(github.ref, 'refs/heads/docs') || startsWith(github.head_ref, 'docs/')
         env:
-          GH_ACCESS_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }}
\ No newline at end of file
+          GH_ACCESS_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }}
diff --git a/.github/workflows/argilla.yml b/.github/workflows/argilla.yml
index 7dd20e276b..5b0bfe4845 100644
--- a/.github/workflows/argilla.yml
+++ b/.github/workflows/argilla.yml
@@ -28,10 +28,6 @@ on:
       - argilla/**
       - "!argilla/docs/**"
 
-  release:
-    types:
-      - "published"
-
 defaults:
   run:
     working-directory: argilla
diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss
index 9ac97f250f..dabc04e0f8 100644
--- a/argilla-frontend/assets/scss/base/base.scss
+++ b/argilla-frontend/assets/scss/base/base.scss
@@ -280,7 +280,7 @@ a {
 }
 .--body3 {
   @include font-size(13px);
-  @include line-height(16px);
+  @include line-height(18px);
 }
 .--body4 {
   @include font-size(12px);
diff --git a/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue b/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue
index c799f34a7a..bdda84b146 100644
--- a/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue
+++ b/argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue
@@ -15,7 +15,12 @@
         borderColor: badgeBorderColor,
       }"
     >
-      <svgicon :name="icon" width="22" height="22" :color="iconColor" />
+      <svgicon
+        :name="icon"
+        :width="badgeSize"
+        :height="badgeSize"
+        :color="iconColor"
+      />
     </i>
   </BaseButton>
 </template>
@@ -49,6 +54,10 @@ export default {
     badgeBorderColor: {
       type: String,
     },
+    badgeSize: {
+      type: String,
+      default: "22",
+    },
   },
   methods: {
     onClickIcon() {
diff --git a/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue b/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
index 33b14f3f9c..22568e99f7 100644
--- a/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
+++ b/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
@@ -33,19 +33,6 @@
         >
       </li>
     </ul>
-    <base-action-tooltip :tooltip="$t('copied')">
-      <a
-        v-if="copyButton"
-        class="breadcrumbs__copy"
-        @click.prevent="
-          $copyToClipboard(
-            filteredBreadcrumbs[filteredBreadcrumbs.length - 1].name
-          )
-        "
-      >
-        <svgicon name="copy" width="16" height="16" />
-      </a>
-    </base-action-tooltip>
   </div>
 </template>
 
@@ -76,7 +63,6 @@ export default {
 
 <style lang="scss" scoped>
 .breadcrumbs {
-  margin-right: auto;
   margin-left: 1em;
   display: flex;
   align-items: center;
@@ -109,21 +95,6 @@ export default {
       }
     }
   }
-  &__copy {
-    user-select: none;
-    cursor: pointer;
-    @include media("<=tablet") {
-      display: none;
-    }
-    &:hover {
-      .svg-icon {
-        fill: darken(palette(white), 10%);
-      }
-    }
-    .svg-icon {
-      fill: palette(white);
-    }
-  }
   &__item {
     color: palette(white);
     text-decoration: none;
diff --git a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
new file mode 100644
index 0000000000..997a0390ca
--- /dev/null
+++ b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="panel" :class="isExpanded ? '--expanded' : '--collapsed'">
+    <BaseButton class="panel__header" @click="toggleExpand(isExpanded)">
+      <slot name="panelHeader" />
+      <svgicon
+        class="panel__header__icon"
+        :name="isExpanded ? 'chevron-down' : 'chevron-right'"
+        width="12"
+        height="12"
+      />
+    </BaseButton>
+
+    <div class="panel__content" v-if="isExpanded">
+      <slot name="panelContent" />
+    </div>
+  </div>
+</template>
+
+<script>
+import "assets/icons/chevron-right";
+import "assets/icons/chevron-down";
+export default {
+  props: {
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toggleExpand(value) {
+      this.$emit("toggle-expand", !value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.panel {
+  flex: 1;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-top: 1px solid $black-10;
+
+  &__header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $base-space $base-space * 2;
+    @include font-size(13px);
+    :deep(p) {
+      text-transform: uppercase;
+    }
+    &__icon {
+      padding: 0;
+      flex-shrink: 0;
+    }
+    &:hover {
+      :deep(p),
+      :deep(svg) {
+        color: darken(palette(grey, 300), 10%);
+      }
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+    padding: $base-space $base-space * 2;
+    overflow-y: auto;
+    @include font-size(13px);
+  }
+}
+</style>
diff --git a/argilla-frontend/components/base/base-progress/BaseCircleProgress.vue b/argilla-frontend/components/base/base-progress/BaseCircleProgress.vue
index 98542c28ed..c8c71f3547 100644
--- a/argilla-frontend/components/base/base-progress/BaseCircleProgress.vue
+++ b/argilla-frontend/components/base/base-progress/BaseCircleProgress.vue
@@ -1,78 +1,75 @@
 <template>
-  <div
-    class="circle-progress"
-    :style="{ width: `${size}px`, height: `${size}px` }"
-  >
-    <div class="circle-progress__circle">
-      <div
-        class="circle-progress__progress"
-        :style="{
-          'background-image': `conic-gradient(${progressColor} ${
-            value * 3.6
-          }deg,#fafafa 0deg)`,
-        }"
-      ></div>
-      <div class="circle-progress__value">{{ value }}</div>
-    </div>
-  </div>
+  <div class="donut-chart" :style="pieStyles"></div>
 </template>
 
 <script>
 export default {
   props: {
-    progressColor: {
-      type: String,
-      default: "#ff675f",
-    },
-    value: {
-      type: Number,
-      required: true,
-      validator: (value) => value >= 0 && value <= 100,
-    },
     size: {
       type: Number,
-      default: 28,
+      default: 60,
+    },
+    slices: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    pieStyles() {
+      let acum = 0;
+      const styles = this.slices.map(
+        (slice) => `${slice.color} 0 ${(acum += slice.percent)}%`
+      );
+
+      return {
+        background: `radial-gradient(#fafafa 40%, transparent 41%), conic-gradient( ${styles.join(
+          ","
+        )} )`,
+      };
+    },
+    sizeStyles() {
+      return `${this.size}px`;
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.circle-progress {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  &__circle {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-  }
-  &__progress {
+<style scoped lang="scss">
+@property --a {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 360deg;
+}
+.donut-chart {
+  position: relative;
+  width: v-bind(sizeStyles);
+  height: v-bind(sizeStyles);
+  border-radius: 50%;
+  overflow: hidden;
+  &:before {
+    --a: 360deg;
+    content: "";
     position: absolute;
+    width: 102%;
+    height: 102%;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    box-sizing: border-box;
-    transform-origin: center center;
+    right: 0;
+    bottom: 0;
+    background-image: conic-gradient(
+      transparent var(--a),
+      palette(grey, 800) 0deg
+    );
+    animation: progress 0.5s ease-in-out;
   }
-  &__value {
-    position: absolute;
-    height: calc(100% - 6px);
-    width: calc(100% - 6px);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    @include font-size(11px);
-    font-weight: 500;
-    color: $black-54;
-    background: palette(white);
-    border-radius: 50%;
+}
+
+@keyframes progress {
+  1% {
+    --a: 0deg;
+  }
+  100% {
+    --a: 360deg;
   }
 }
 </style>
diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
index 5e1ad6a6f2..0a23b48c8e 100644
--- a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
+++ b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
@@ -17,10 +17,7 @@
           @mouseenter="hoveredRange = range"
           @mouseleave="hoveredRange = null"
         >
-          <div
-            class="progress__bar"
-            :style="{ backgroundColor: range.color }"
-          ></div>
+          <div class="progress__bar" :style="{ background: range.color }"></div>
         </div>
       </div>
       <template v-if="showTooltip && !!hoveredRange">
diff --git a/argilla-frontend/components/base/base-progress/BaseProgress.vue b/argilla-frontend/components/base/base-progress/BaseProgress.vue
deleted file mode 100644
index 5ddb71f105..0000000000
--- a/argilla-frontend/components/base/base-progress/BaseProgress.vue
+++ /dev/null
@@ -1,236 +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>
-  <transition name="progress" :duration="3500" appear>
-    <div class="progress__container">
-      <p v-if="tooltip" class="progress__tooltip" :style="tooltipStyles">
-        <span class="triangle" :style="tooltipTriangleStyles"></span
-        >{{ tooltip }}
-      </p>
-      <div class="progress" :style="backgroundStyles">
-        <div class="progress-track" :style="styles"></div>
-        <template v-if="multiple">
-          <div class="progress-track--secondary" :style="stylesSecondary" />
-          <div class="progress-track--tertiary" :style="stylesTertiary" />
-        </template>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    progress: {
-      type: Number,
-      default: 0,
-    },
-    progressSecondary: {
-      type: Number,
-      default: 0,
-    },
-    progressTertiary: {
-      type: Number,
-      default: 0,
-    },
-    multiple: {
-      default: false,
-      type: Boolean,
-    },
-    progressBg: {
-      type: String,
-      default: "#4c4ea3",
-    },
-    color: {
-      type: String,
-      default: "#4c4ea3",
-    },
-    colorSecondary: {
-      type: String,
-      default: "#a1a2cc",
-    },
-    colorTertiary: {
-      type: String,
-      default: "#08a4bd",
-    },
-    tooltip: {
-      default: undefined,
-      type: String,
-    },
-  },
-  computed: {
-    styles() {
-      return {
-        width: `${this.progress}%`,
-        backgroundColor: this.color,
-      };
-    },
-    backgroundStyles() {
-      return {
-        width: "100%",
-        backgroundColor: this.progressBg,
-      };
-    },
-    tooltipStyles() {
-      return {
-        left: this.progress > 80 ? `70%` : `${this.progress}%`,
-        backgroundColor: this.color,
-      };
-    },
-    tooltipTriangleStyles() {
-      return {
-        borderRightColor: this.color,
-      };
-    },
-    stylesSecondary() {
-      return {
-        left: `${this.progress}%`,
-        width: `${this.progressSecondary}%`,
-        backgroundColor: this.colorSecondary,
-      };
-    },
-    stylesTertiary() {
-      return {
-        left: `${this.progress + this.progressSecondary}%`,
-        width: `${this.progressTertiary}%`,
-        backgroundColor: this.colorTertiary,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.progress {
-  height: 22px;
-  position: relative;
-  overflow: hidden;
-  background: #a1a2cc;
-  border-top-right-radius: 10px;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 10px;
-  margin: 0 0 1.5em 0;
-  &:before {
-    content: "";
-    position: absolute;
-    background: white;
-    opacity: 0.8;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-  }
-  &__container {
-    position: relative;
-    &:hover {
-      .progress__tooltip {
-        clip-path: none;
-        opacity: 1;
-        transition: opacity 0.5s linear 0.3s;
-      }
-    }
-  }
-  &__tooltip {
-    padding: 0.5em 1em;
-    top: -5px;
-    transform: none;
-    background: palette(purple, 200);
-    color: white;
-    border: none;
-    border-radius: $border-radius-s;
-    @include font-size(13px);
-    font-weight: 500;
-    position: absolute;
-    margin: 0 0 0 6px;
-    z-index: 1;
-    clip-path: circle(0);
-    opacity: 0;
-    transition: opacity 0.5s linear 0.3s;
-    border-color: lime !important;
-    .triangle {
-      @include triangle(left, 6px, 6px, palette(purple, 200));
-      position: absolute;
-      left: -6px;
-      top: calc(50% - 6px);
-    }
-  }
-  &--minimal {
-    @extend .progress;
-    height: 2px;
-    .progress-track {
-      background: palette(grey, 300);
-    }
-  }
-  &--multiple {
-    @extend .progress;
-    height: 20px;
-  }
-}
-
-.progress-track {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  background: palette(purple, 200);
-  transition: width 1s linear, left 1s linear;
-  &:last-of-type {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-  .progress-enter-active & {
-    animation: progress 1s 0.5s;
-    transform-origin: 0 50%;
-    animation-fill-mode: backwards;
-  }
-  &--secondary {
-    @extend .progress-track;
-    left: auto;
-    right: 0;
-    background: #a1a2cc;
-    transition: width 1s linear, left 1s linear;
-    border-radius: 0;
-    .progress-enter-active & {
-      animation: progress 1s 1.5s;
-      animation-fill-mode: backwards;
-    }
-  }
-  &--tertiary {
-    @extend .progress-track;
-    left: auto;
-    right: 0;
-    background: #08a4bd;
-    transition: width 1s linear, left 1s linear;
-    border-radius: 0;
-    .progress-enter-active & {
-      animation: progress 2s 2.5s;
-      animation-fill-mode: backwards;
-    }
-  }
-}
-@keyframes progress {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
-</style>
diff --git a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
new file mode 100644
index 0000000000..20de185e01
--- /dev/null
+++ b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="resizable" :class="resizing ? '--h-resizing' : null">
+    <div class="resizable__up">
+      <slot name="up" />
+    </div>
+
+    <div class="resizable__bar" ref="resizableBar">
+      <div class="resizable__bar__inner" />
+    </div>
+
+    <BaseCollapsablePanel
+      class="resizable__down"
+      :class="isExpanded ? '--expanded' : null"
+      :is-expanded="isExpanded"
+      @toggle-expand="toggleExpand"
+    >
+      <slot name="downHeader" slot="panelHeader" />
+      <slot name="downContent" slot="panelContent" />
+    </BaseCollapsablePanel>
+  </div>
+</template>
+
+<script>
+import { useResizable } from "./useResizable";
+import BaseButton from "../base-button/BaseButton.vue";
+
+const EVENT = {
+  MOUSE_EVENT: "mousemove",
+  MOUSE_UP: "mouseup",
+  MOUSE_DOWN: "mousedown",
+};
+
+export default {
+  components: { BaseButton },
+  props: {
+    id: {
+      type: String,
+      default: "h-rz",
+    },
+  },
+  data() {
+    return {
+      resizing: false,
+      isExpanded: false,
+      upSidePrevPosition: {
+        clientY: 0,
+        height: 0,
+      },
+      resizer: null,
+      upSide: null,
+      downSide: null,
+      expandedPanelMinHeight: 80,
+      collapsedPanelHeight: 50,
+    };
+  },
+  computed: {
+    parentHeight() {
+      return this.resizer.parentNode.getBoundingClientRect().height;
+    },
+  },
+  watch: {
+    async isExpanded() {
+      this.debounce.stop();
+      const savedPosition = this.getPosition();
+      if (this.isExpanded) {
+        if (this.resizing) {
+          this.upSide.style.height = savedPosition?.position;
+        }
+      } else {
+        this.upSide.style.height = "100%";
+      }
+
+      await this.debounce.wait();
+      this.$nextTick(() => {
+        this.setPosition({
+          isExpanded: this.isExpanded,
+          position: savedPosition?.position ?? this.upSide.style.height,
+        });
+      });
+    },
+  },
+  mounted() {
+    this.resizer = this.$refs.resizableBar;
+    this.upSide = this.resizer.previousElementSibling;
+    this.downSide = this.resizer.nextElementSibling;
+
+    this.limitElementHeight(this.upSide);
+
+    this.resizer.addEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
+
+    const savedPosition = this.getPosition();
+    this.isExpanded = savedPosition?.isExpanded ?? false;
+    this.upSide.style.height = savedPosition?.isExpanded
+      ? savedPosition?.position
+      : "100%";
+  },
+  destroyed() {
+    this.resizer.removeEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
+  },
+  methods: {
+    savePosition() {},
+    limitElementHeight(element) {
+      element.style["max-height"] = "100%";
+      element.style["min-height"] = "50%";
+    },
+    savePositionOnStartResizing(e) {
+      this.upSidePrevPosition = {
+        clientY: e.clientY,
+        height: this.upSide.getBoundingClientRect().height,
+      };
+    },
+    resize(e) {
+      e.preventDefault();
+      const dY = e.clientY - this.upSidePrevPosition.clientY;
+      const proportionalHeight = (this.upSidePrevPosition.height + dY) * 100;
+      const newHeight = proportionalHeight / this.parentHeight;
+      const collapsedHeight =
+        (this.collapsedPanelHeight * 100) / this.parentHeight;
+      this.upSide.style.height = `${newHeight}%`;
+      if (newHeight >= 100 - collapsedHeight) {
+        this.isExpanded = false;
+      } else {
+        this.isExpanded = true;
+      }
+    },
+    mouseMoveHandler(e) {
+      this.resize(e);
+    },
+    mouseUpHandler() {
+      this.$nextTick(() => {
+        this.setPosition({
+          isExpanded: this.isExpanded,
+          position: `${this.upSide.getBoundingClientRect().height}px`,
+        });
+      });
+
+      document.removeEventListener(EVENT.MOUSE_EVENT, this.mouseMoveHandler);
+      document.removeEventListener(EVENT.MOUSE_UP, this.mouseUpHandler);
+      this.resizing = false;
+    },
+    mouseDownHandler(e) {
+      this.savePositionOnStartResizing(e);
+
+      document.addEventListener(EVENT.MOUSE_EVENT, this.mouseMoveHandler);
+      document.addEventListener(EVENT.MOUSE_UP, this.mouseUpHandler);
+      this.resizing = true;
+    },
+    toggleExpand() {
+      this.isExpanded = !this.isExpanded;
+      if (this.isExpanded) {
+        const savedPosition = this.getPosition();
+        const useSavedPosition =
+          this.parentHeight - parseInt(savedPosition?.position) >
+          this.expandedPanelMinHeight;
+        this.upSide.style.height = useSavedPosition
+          ? savedPosition?.position
+          : "50%";
+      }
+    },
+  },
+  setup(props) {
+    return useResizable(props);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$resizabla-bar-color: #6794fe;
+$collapsed-panel-height: 50px;
+$resizable-bar-width: $base-space;
+.resizable {
+  $this: &;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  &.--h-resizing {
+    user-select: none;
+  }
+
+  &__up {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: $collapsed-panel-height;
+    transition: all 0.2s ease-in;
+    margin-bottom: calc(-#{$resizable-bar-width} / 2);
+    @include media("<desktop") {
+      height: auto !important;
+    }
+    .--h-resizing & {
+      transition: none;
+    }
+  }
+
+  &__down {
+    flex: 1;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: $collapsed-panel-height;
+    &.panel {
+      @include media(">=desktop") {
+        border: none;
+      }
+    }
+  }
+
+  &__bar {
+    height: $resizable-bar-width;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    cursor: row-resize;
+    @include media("<desktop") {
+      display: none;
+    }
+
+    &__inner {
+      width: 100%;
+      border-bottom: thick solid $black-10;
+      border-width: 1px;
+      transition: all 0.1s ease-in;
+    }
+
+    &:hover,
+    .--h-resizing & {
+      #{$this}__bar__inner {
+        transition: all 0.1s ease-in;
+        border: 2px solid $resizabla-bar-color;
+      }
+    }
+  }
+}
+</style>
diff --git a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
new file mode 100644
index 0000000000..203cdfca29
--- /dev/null
+++ b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="resizable" :class="resizing ? '--v-resizing' : ''">
+    <div class="resizable__left"><slot name="left" /></div>
+
+    <div class="resizable__bar" ref="resizableBar">
+      <div class="resizable__bar__inner" />
+    </div>
+
+    <div class="resizable__right"><slot name="right" /></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { useResizable } from "./useResizable";
+
+const EVENT = {
+  MOUSE_EVENT: "mousemove",
+  MOUSE_UP: "mouseup",
+  MOUSE_DOWN: "mousedown",
+};
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "v-rz",
+    },
+  },
+  data() {
+    return {
+      leftSidePrevPosition: {
+        clientX: 0,
+        width: 0,
+      },
+      resizer: null,
+      leftSide: null,
+      rightSide: null,
+      resizing: false,
+    };
+  },
+  mounted() {
+    this.resizer = this.$refs.resizableBar;
+    this.leftSide = this.resizer.previousElementSibling;
+    this.rightSide = this.resizer.nextElementSibling;
+
+    this.limitElementWidth(this.leftSide);
+    this.limitElementWidth(this.rightSide);
+
+    this.resizer.addEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
+
+    const savedPosition = this.getPosition();
+    if (savedPosition) {
+      this.leftSide.style.width = savedPosition;
+    }
+  },
+  destroyed() {
+    this.resizer.removeEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
+  },
+  methods: {
+    limitElementWidth(element) {
+      element.style["max-width"] = "65%";
+      element.style["min-width"] = "35%";
+    },
+    savePositionOnStartResizing(e) {
+      this.leftSidePrevPosition = {
+        clientX: e.clientX,
+        width: this.leftSide.getBoundingClientRect().width,
+      };
+    },
+    resize(e) {
+      e.preventDefault();
+      const dX = e.clientX - this.leftSidePrevPosition.clientX;
+      const proportionalWidth = (this.leftSidePrevPosition.width + dX) * 100;
+      const parentWidth = this.resizer.parentNode.getBoundingClientRect().width;
+
+      const newLeftWidth = proportionalWidth / parentWidth;
+
+      this.leftSide.style.width = `${newLeftWidth}%`;
+    },
+
+    mouseMoveHandler(e) {
+      this.resize(e);
+    },
+    mouseUpHandler() {
+      this.setPosition(`${this.leftSide.getBoundingClientRect().width}px`);
+
+      document.removeEventListener(EVENT.MOUSE_EVENT, this.mouseMoveHandler);
+      document.removeEventListener(EVENT.MOUSE_UP, this.mouseUpHandler);
+      this.resizing = false;
+    },
+    mouseDownHandler(e) {
+      this.savePositionOnStartResizing(e);
+
+      document.addEventListener(EVENT.MOUSE_EVENT, this.mouseMoveHandler);
+      document.addEventListener(EVENT.MOUSE_UP, this.mouseUpHandler);
+      this.resizing = true;
+    },
+  },
+  setup(props) {
+    return useResizable(props);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$resizabla-bar-color: #6794fe;
+$resizable-bar-width: $base-space;
+
+.resizable {
+  $this: &;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  &.--v-resizing {
+    user-select: none;
+  }
+
+  &__left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    margin-right: calc(-#{$resizable-bar-width} / 2);
+    @include media("<desktop") {
+      min-width: 100% !important;
+      height: auto !important;
+    }
+  }
+
+  &__right {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    margin-left: calc(-#{$resizable-bar-width} / 2);
+    @include media("<desktop") {
+      min-width: 100% !important;
+      height: auto !important;
+      margin-left: 0;
+    }
+  }
+
+  &__bar {
+    height: 100%;
+    width: $resizable-bar-width;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+    cursor: col-resize;
+    @include media("<desktop") {
+      display: none;
+    }
+
+    &__inner {
+      height: 100%;
+      border-left: 1px solid $black-10;
+      transition: all 0.1s ease-in;
+    }
+
+    &:hover,
+    .--v-resizing & {
+      #{$this}__bar__inner {
+        transition: all 0.1s ease-in;
+        border: 2px solid $resizabla-bar-color;
+      }
+    }
+  }
+}
+</style>
diff --git a/argilla-frontend/components/base/base-resizable/useResizable.ts b/argilla-frontend/components/base/base-resizable/useResizable.ts
new file mode 100644
index 0000000000..14d8bdf4f0
--- /dev/null
+++ b/argilla-frontend/components/base/base-resizable/useResizable.ts
@@ -0,0 +1,33 @@
+import { useDebounce, useLocalStorage } from "~/v1/infrastructure/services";
+
+export const useResizable = ({ id }: { id: string }) => {
+  const debounce = useDebounce(300);
+  const { get, set } = useLocalStorage();
+
+  const getPosition = () => {
+    const layout = get("layout");
+
+    if (!layout) return;
+
+    return layout[id];
+  };
+
+  const setPosition = async (position: unknown) => {
+    debounce.stop();
+
+    await debounce.wait();
+
+    const layout = get("layout");
+
+    set("layout", {
+      ...layout,
+      [id]: position,
+    });
+  };
+
+  return {
+    debounce,
+    getPosition,
+    setPosition,
+  };
+};
diff --git a/argilla-frontend/components/base/base-table/BaseTableInfo.vue b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
index 8f15583912..7cbffc70c0 100644
--- a/argilla-frontend/components/base/base-table/BaseTableInfo.vue
+++ b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
@@ -178,6 +178,11 @@ export default {
       hydrate: {},
     };
   },
+  watch: {
+    filteredResults() {
+      this.changeVisibility();
+    },
+  },
   computed: {
     tableIsEmpty() {
       return this.filteredResults && this.filteredResults.length === 0;
@@ -230,9 +235,6 @@ export default {
         this.$set(this.filters, column, values);
       });
   },
-  mounted() {
-    this.changeVisibility();
-  },
   methods: {
     itemValue(item, column) {
       if (column.subfield) {
@@ -273,10 +275,16 @@ export default {
       const observer = new IntersectionObserver(handleIntersection);
 
       this.data.forEach((item) => {
-        observer.observe(document.getElementById(item.id));
+        const element = document.getElementById(item.id);
+        if (!element) return;
+
+        observer.observe(element);
       });
     },
   },
+  mounted() {
+    this.changeVisibility();
+  },
 };
 </script>
 
diff --git a/argilla-frontend/components/base/base-tooltip/BaseTooltip.vue b/argilla-frontend/components/base/base-tooltip/BaseTooltip.vue
index 265da789dd..7a7252b326 100644
--- a/argilla-frontend/components/base/base-tooltip/BaseTooltip.vue
+++ b/argilla-frontend/components/base/base-tooltip/BaseTooltip.vue
@@ -91,7 +91,7 @@ export default {
           break;
         case "bottom":
           this.tooltipPosition = {
-            top: tooltipRect.top - tooltipRect.height + tooltipTextRect.height,
+            top: tooltipRect.top + tooltipRect.height,
             left:
               tooltipRect.left +
               tooltipRect.width / 2 -
diff --git a/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue b/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue
index 5e6305b040..cfb19812be 100644
--- a/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue
+++ b/argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue
@@ -162,44 +162,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  height: 100%;
-  gap: $base-space * 2;
-  padding: $base-space * 2;
-
-  @include media("<desktop") {
-    flex-flow: column;
-    overflow: auto;
-  }
-  &__records,
-  &__form {
-    @include media("<desktop") {
-      overflow: visible;
-      height: auto;
-      max-height: none !important;
-    }
-  }
-  &__records {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: $base-space;
-    height: 100%;
-    min-width: 0;
-  }
-  &__text {
-    color: $black-54;
-  }
-  &--empty {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/container/fields/Record.vue b/argilla-frontend/components/features/annotation/container/fields/Record.vue
index 04bb58e6f3..ec445bb619 100644
--- a/argilla-frontend/components/features/annotation/container/fields/Record.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/Record.vue
@@ -40,16 +40,35 @@ export default {
       type: Array,
     },
   },
-  computed: {
-    searchValue() {
-      return this.$route.query?._search ?? "";
-    },
-  },
   methods: {
     onSelectedRecord(isSelected) {
       this.$emit("on-select-record", isSelected, this.record);
     },
   },
+  computed: {
+    spanQuestionsAnswers() {
+      return this.record.questions
+        .filter((q) => q.isSpanType)
+        .map((q) => ({
+          id: q.id,
+          answer: q.answer.values,
+        }));
+    },
+  },
+  watch: {
+    spanQuestionsAnswers: {
+      deep: true,
+      handler() {
+        if (
+          this.record.questions
+            .filter((q) => q.isSpanType)
+            .some((q) => q.isModified)
+        ) {
+          this.onSelectedRecord(true);
+        }
+      },
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -59,7 +78,7 @@ export default {
   flex-direction: column;
   min-height: 0;
   background: palette(white);
-  border: 1px solid palette(grey, 600);
+  border: 1px solid $black-6;
   border-radius: $border-radius-m;
   &:has(.dropdown__content),
   &:has(.checkbox.checked) {
@@ -73,7 +92,7 @@ export default {
     min-width: 0;
     height: 100%;
     min-height: 0;
-    @include media("<=tablet") {
+    @include media("<desktop") {
       height: auto;
     }
   }
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue b/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
index 98ac0927ce..c70ab99893 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue
@@ -9,7 +9,7 @@
       <span class="text_field_component__title-content" v-text="title" />
       <BaseActionTooltip
         class="text_field_component__tooltip"
-        tooltip="Copied"
+        tooltip="$t('copied')"
         tooltip-position="left"
       >
         <BaseButton
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts
index e96ed2c7f5..fe72233094 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/highlighting.ts
@@ -91,6 +91,10 @@ export class Highlighting {
     return [...this.spanSelection.spans];
   }
 
+  get nodeSpans() {
+    return this.spans.filter((s) => s.node.id === this.nodeId);
+  }
+
   private get entitySpanContainer() {
     const { spanContainerId } = this.styles;
 
@@ -165,7 +169,7 @@ export class Highlighting {
   }
 
   private updateLineHeight() {
-    const maxOverlappedLevels = this.spans.reduce(
+    const maxOverlappedLevels = this.nodeSpans.reduce(
       (max, span) => Math.max(max, span.overlap.level),
       0
     );
@@ -335,11 +339,7 @@ export class Highlighting {
 
     this.updateLineHeight();
 
-    for (const span of this.spans) {
-      const { node } = span;
-
-      if (node.id !== this.nodeId) continue;
-
+    for (const span of this.nodeSpans) {
       const entityPosition = this.createPosition(span);
 
       const entityElement = this.EntityComponentConstructor(
@@ -414,11 +414,7 @@ export class Highlighting {
   private removeSpan(span: Span) {
     this.spanSelection.removeSpan(span);
 
-    const spans = this.spans;
-
-    this.removeAllHighlights();
-
-    this.loadHighlights(spans);
+    this.applyStyles();
   }
 
   public createRange({ from, to, node }: Span) {
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts
index 48aa08495b..c7df0bf405 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.test.ts
@@ -415,6 +415,38 @@ describe("Span Selection", () => {
 
         expect(spanSelection.spans).toHaveLength(0);
       });
+
+      test("should remove span and re calculate the overlapping", () => {
+        const spanSelection = new SpanSelection();
+        spanSelection.config.allowOverlap = true;
+
+        const textSelection1 = createTextSelection({
+          from: 10,
+          to: 17,
+          text: "rem Ips",
+          entity: "TOKEN",
+        });
+
+        const textSelection2 = createTextSelection({
+          from: 8,
+          to: 19,
+          text: "Lorem Ipsum",
+          entity: "TOKEN-2",
+        });
+
+        spanSelection.addSpan(textSelection1);
+        spanSelection.addSpan(textSelection2);
+
+        expect(spanSelection.spans[0].overlap.level).toBe(1);
+        expect(spanSelection.spans[1].overlap.level).toBe(2);
+
+        spanSelection.removeSpan(spanSelection.spans[0]);
+
+        expect(spanSelection.spans).toHaveLength(1);
+        expect(spanSelection.spans[0].from).toBe(textSelection2.from);
+        expect(spanSelection.spans[0].to).toBe(textSelection2.to);
+        expect(spanSelection.spans[0].overlap.level).toBe(1);
+      });
     });
 
     describe("should replace the entity for the span", () => {
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts
index d5cf1e127d..f0e3843145 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/span-selection.ts
@@ -123,14 +123,16 @@ export class SpanSelection {
 
     this.completeOutOfBoundaries(selected);
 
-    const overlaps = this.selections.filter((s) => {
-      return (
-        (selected.from <= s.from && selected.to >= s.to) ||
-        (selected.from >= s.from && selected.to <= s.to) ||
-        (selected.from < s.from && selected.to > s.from) ||
-        (selected.from < s.to && selected.to > s.to)
-      );
-    });
+    const overlaps = this.selections
+      .filter((s) => s.node.id === selected.node.id)
+      .filter((s) => {
+        return (
+          (selected.from <= s.from && selected.to >= s.to) ||
+          (selected.from >= s.from && selected.to <= s.to) ||
+          (selected.from < s.from && selected.to > s.from) ||
+          (selected.from < s.to && selected.to > s.to)
+        );
+      });
 
     const maxLevelInOverlaps =
       overlaps.reduce((acc, curr) => Math.max(acc, curr.overlap.level), 0) + 1;
@@ -165,6 +167,18 @@ export class SpanSelection {
   }
 
   removeSpan(span: Span) {
+    this.remove(span);
+
+    const nodeSpans = this.spans.filter((s) => s.node.id === span.node.id);
+
+    nodeSpans.forEach((span) => {
+      this.remove(span);
+    });
+
+    this.loadSpans(nodeSpans);
+  }
+
+  private remove(span: Span) {
     this.selections = this.selections.filter(
       (s) => this.createId(s) !== this.createId(span)
     );
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts b/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
index 0f63d89838..98f63a9308 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
@@ -134,11 +134,14 @@ export const useSpanAnnotationTextFieldViewModel = ({
   watch(
     () => highlighting.value.spans,
     (spans) => {
-      const response = convertSpansToResponse(spans);
+      const nodeSpans = spans.filter((s) => s.node.id === id);
 
-      spanQuestion.response({
-        value: response,
-      });
+      const response = convertSpansToResponse(nodeSpans);
+
+      spanQuestion.answer.response({ value: response });
+    },
+    {
+      deep: true,
     }
   );
 
diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
index 13e185013d..b95b815faa 100644
--- a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -1,123 +1,181 @@
 <template>
   <span>
     <LoadLine v-if="isSubmitting || isDraftSaving || isDiscarding" />
-    <div class="wrapper">
-      <section class="wrapper__records">
-        <DatasetFilters :recordCriteria="recordCriteria">
-          <ToggleAnnotationType
-            v-if="
-              records.hasRecordsToAnnotate && recordCriteria.committed.isPending
-            "
-            :recordCriteria="recordCriteria"
-        /></DatasetFilters>
-        <SimilarityRecordReference
-          v-show="recordCriteria.isFilteringBySimilarity"
-          v-if="!!records.reference"
-          :fields="records.reference.fields"
-          :recordCriteria="recordCriteria"
-          :availableVectors="datasetVectors"
-        />
-        <div class="wrapper__records__header">
-          <div class="wrapper__records__header--left">
-            <BaseCheckbox
-              :data-title="
-                !selectedRecords.length
-                  ? $t('bulkAnnotation.select_to_annotate')
-                  : null
-              "
-              v-if="records.hasRecordsToAnnotate"
-              :decoration-circle="true"
-              class="wrapper__records__header__checkbox"
-              :value="isSelectedAll"
-              @input="toggleAllRecords"
-            />
-            <span
-              class="wrapper__records__header__selection-text"
-              v-if="selectedRecords.length && !affectAllRecords"
-              v-text="
-                $tc('bulkAnnotation.recordsSelected', selectedRecords.length)
-              "
-            />
+    <VerticalResizable
+      class="wrapper"
+      :id="`${recordCriteria.datasetId}-r-v-rz`"
+    >
+      <template #left>
+        <HorizontalResizable
+          :id="`${recordCriteria.datasetId}-r-h-rz`"
+          class="wrapper__left"
+        >
+          <template #up>
+            <section class="wrapper__records">
+              <DatasetFilters :recordCriteria="recordCriteria">
+                <ToggleAnnotationType
+                  v-if="
+                    records.hasRecordsToAnnotate &&
+                    recordCriteria.committed.isPending
+                  "
+                  :recordCriteria="recordCriteria"
+              /></DatasetFilters>
+              <SimilarityRecordReference
+                v-show="recordCriteria.isFilteringBySimilarity"
+                v-if="!!records.reference"
+                :fields="records.reference.fields"
+                :recordCriteria="recordCriteria"
+                :availableVectors="datasetVectors"
+              />
+              <div class="wrapper__records__header">
+                <div class="wrapper__records__header--left">
+                  <BaseCheckbox
+                    :data-title="
+                      !selectedRecords.length
+                        ? $t('bulkAnnotation.select_to_annotate')
+                        : null
+                    "
+                    v-if="records.hasRecordsToAnnotate"
+                    :decoration-circle="true"
+                    class="wrapper__records__header__checkbox"
+                    :value="isSelectedAll"
+                    @input="toggleAllRecords"
+                  />
+                  <span
+                    class="wrapper__records__header__selection-text"
+                    v-if="selectedRecords.length && !affectAllRecords"
+                    v-text="
+                      $tc(
+                        'bulkAnnotation.recordsSelected',
+                        selectedRecords.length
+                      )
+                    "
+                  />
 
-            <div v-if="isAffectAllRecordsAllowed" class="bulk-by-criteria">
-              <BaseButton
-                v-if="!affectAllRecords"
-                class="bulk-by-criteria__button primary text small"
-                @on-click="affectAllRecords = true"
-                >{{
-                  $t("bulkAnnotation.selectAllResults", {
-                    total: records.total,
-                  })
-                }}</BaseButton
+                  <div
+                    v-if="isAffectAllRecordsAllowed"
+                    class="bulk-by-criteria"
+                  >
+                    <BaseButton
+                      v-if="!affectAllRecords"
+                      class="bulk-by-criteria__button primary text small"
+                      @on-click="affectAllRecords = true"
+                      >{{
+                        $t("bulkAnnotation.selectAllResults", {
+                          total: records.total,
+                        })
+                      }}</BaseButton
+                    >
+                    <template v-else>
+                      <span class="wrapper__records__header__selection-text">{{
+                        $t("bulkAnnotation.haveSelectedRecords", {
+                          total: records.total,
+                        })
+                      }}</span>
+                      <BaseButton
+                        class="bulk-by-criteria__button primary text small"
+                        @on-click="resetAffectAllRecords"
+                        >{{ $t("button.cancel") }}</BaseButton
+                      >
+                    </template>
+                  </div>
+                </div>
+                <RecordsViewConfig
+                  v-if="records.hasRecordsToAnnotate"
+                  v-model="recordHeight"
+                />
+                <PaginationFeedbackTask :recordCriteria="recordCriteria" />
+              </div>
+              <div
+                ref="bulkScrollableArea"
+                class="bulk__records snap"
+                v-if="records.hasRecordsToAnnotate"
               >
-              <template v-else>
-                <span class="wrapper__records__header__selection-text">{{
-                  $t("bulkAnnotation.haveSelectedRecords", {
-                    total: records.total,
-                  })
-                }}</span>
-                <BaseButton
-                  class="bulk-by-criteria__button primary text small"
-                  @on-click="resetAffectAllRecords"
-                  >{{ $t("button.cancel") }}</BaseButton
-                >
-              </template>
-            </div>
-          </div>
-          <RecordsViewConfig
-            v-if="records.hasRecordsToAnnotate"
-            v-model="recordHeight"
-          />
-          <PaginationFeedbackTask :recordCriteria="recordCriteria" />
-        </div>
-        <div
-          ref="bulkScrollableArea"
-          class="bulk__records snap"
-          v-if="records.hasRecordsToAnnotate"
+                <Record
+                  class="snap-child"
+                  :class="{
+                    'record__wrapper--fixed-height':
+                      recordHeight === 'fixedHeight',
+                  }"
+                  v-for="(record, i) in recordsOnPage"
+                  :key="`${recordCriteria.committed.page.client.page}_${record.id}_${i}`"
+                  :datasetVectors="datasetVectors"
+                  :recordCriteria="recordCriteria"
+                  :record="record"
+                  :selectedRecords="selectedRecords"
+                  @on-select-record="onSelectRecord"
+                />
+              </div>
+              <div v-else class="wrapper--empty">
+                <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
+              </div>
+            </section>
+          </template>
+          <template #downHeader>
+            <p v-text="$t('guidelines')" />
+          </template>
+          <template #downContent>
+            <AnnotationGuidelines />
+          </template>
+        </HorizontalResizable>
+      </template>
+      <template #right>
+        <HorizontalResizable
+          :id="`${recordCriteria.datasetId}-q-h-rz}`"
+          class="wrapper__right"
         >
-          <Record
-            class="snap-child"
-            :class="{
-              'record__wrapper--fixed-height': recordHeight === 'fixedHeight',
-            }"
-            v-for="(record, i) in recordsOnPage"
-            :key="`${recordCriteria.committed.page.client.page}_${record.id}_${i}`"
-            :datasetVectors="datasetVectors"
-            :recordCriteria="recordCriteria"
-            :record="record"
-            :selectedRecords="selectedRecords"
-            @on-select-record="onSelectRecord"
-          />
-        </div>
-        <div v-else class="wrapper--empty">
-          <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
-        </div>
-      </section>
-
-      <QuestionsForm
-        v-if="!!record"
-        :key="`${recordCriteria.committed.page.client.page}_${record.id}_questions`"
-        class="wrapper__form"
-        :class="statusClass"
-        :datasetId="recordCriteria.datasetId"
-        :record="record"
-        :is-bulk-mode="true"
-        :show-discard-button="recordsOnPage.some((r) => !r.isDiscarded)"
-        :is-submitting="isSubmitting"
-        :is-discarding="isDiscarding"
-        :is-draft-saving="isDraftSaving"
-        :is-submit-disabled="!hasSelectedAtLeastOneRecord"
-        :is-discard-disabled="!hasSelectedAtLeastOneRecord"
-        :is-draft-save-disabled="!hasSelectedAtLeastOneRecord"
-        :submit-tooltip="bulkActionsTooltip"
-        :discard-tooltip="bulkActionsTooltip"
-        :draft-saving-tooltip="bulkActionsTooltip"
-        :progress="progress"
-        @on-submit-responses="onClickSubmit"
-        @on-discard-responses="onClickDiscard"
-        @on-save-draft="onClickSaveDraft"
-      />
-    </div>
+          <template #up>
+            <QuestionsForm
+              v-if="!!record"
+              :key="`${recordCriteria.committed.page.client.page}_${record.id}_questions`"
+              class="wrapper__form"
+              :class="statusClass"
+              :datasetId="recordCriteria.datasetId"
+              :record="record"
+              :is-bulk-mode="true"
+              :show-discard-button="recordsOnPage.some((r) => !r.isDiscarded)"
+              :is-submitting="isSubmitting"
+              :is-discarding="isDiscarding"
+              :is-draft-saving="isDraftSaving"
+              :is-submit-disabled="!hasSelectedAtLeastOneRecord"
+              :is-discard-disabled="!hasSelectedAtLeastOneRecord"
+              :is-draft-save-disabled="!hasSelectedAtLeastOneRecord"
+              :submit-tooltip="bulkActionsTooltip"
+              :discard-tooltip="bulkActionsTooltip"
+              :draft-saving-tooltip="bulkActionsTooltip"
+              :progress="progress"
+              @on-submit-responses="onClickSubmit"
+              @on-discard-responses="onClickDiscard"
+              @on-save-draft="onClickSaveDraft"
+            />
+          </template>
+          <template #downHeader>
+            <p v-text="$t('metrics.progress')" />
+            <AnnotationProgress
+              class="annotation-progress"
+              :datasetId="recordCriteria.datasetId"
+              enableFetch
+            />
+          </template>
+          <template #downContent>
+            <AnnotationProgress :datasetId="recordCriteria.datasetId" />
+            <AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
+          </template>
+        </HorizontalResizable>
+      </template>
+      <BaseCollapsablePanel
+        class="--mobile"
+        :is-expanded="expandedGuidelines"
+        @toggle-expand="expandedGuidelines = !expandedGuidelines"
+      >
+        <template #panelHeader>
+          <p v-text="$t('guidelines')" />
+        </template>
+        <template #panelContent>
+          <AnnotationGuidelines />
+        </template>
+      </BaseCollapsablePanel>
+    </VerticalResizable>
     <BaseModal
       class="conformation-modal"
       :modal-custom="true"
@@ -177,6 +235,7 @@ export default {
       recordHeight: "defaultHeight",
       visibleConfirmationModal: false,
       allowedAction: null,
+      expandedGuidelines: false,
     };
   },
   computed: {
@@ -214,11 +273,19 @@ export default {
     shouldShowModalToConfirm() {
       return this.affectAllRecords && this.numberOfSelectedRecords > 100;
     },
+    spansQuestionsWithSelectedEntities() {
+      return this.record.questions
+        .filter((q) => q.isSpanType)
+        .filter((s) => s.answer.options.some((e) => e.isSelected));
+    },
   },
   methods: {
     onSelectRecord(isSelected, record) {
       if (isSelected) {
-        return this.selectedRecords.push(record);
+        if (!this.selectedRecords.some((r) => r.id === record.id))
+          return this.selectedRecords.push(record);
+
+        return;
       }
 
       this.selectedRecords = this.selectedRecords.filter(
@@ -313,6 +380,26 @@ export default {
     },
   },
   watch: {
+    spansQuestionsWithSelectedEntities: {
+      deep: true,
+      handler() {
+        const spanQuestions = this.recordsOnPage
+          .flatMap((r) => r.questions)
+          .filter((q) => q.isSpanType);
+
+        this.spansQuestionsWithSelectedEntities.forEach((q) => {
+          spanQuestions.forEach((question) => {
+            if (question.id === q.id) {
+              question.answer.options.forEach((option) => {
+                option.isSelected = q.answer.options.some(
+                  (o) => o.isSelected && o.id === option.id
+                );
+              });
+            }
+          });
+        });
+      },
+    },
     "recordCriteria.status"() {
       this.recordCriteria.page.focusMode();
     },
@@ -349,27 +436,36 @@ export default {
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  gap: $base-space * 2;
-  padding: $base-space * 2 $base-space * 2 0 $base-space * 2;
   @include media("<desktop") {
     flex-flow: column;
     overflow: auto;
   }
-  &__records,
-  &__form {
+  &__left,
+  &__right {
     @include media("<desktop") {
       overflow: visible;
       height: auto !important;
       max-height: none !important;
     }
   }
+  &__left {
+    @include media("<desktop") {
+      :deep(.resizable__down) {
+        display: none;
+      }
+    }
+  }
+  &__form {
+    padding: $base-space * 2;
+  }
   &__records {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: $base-space * 2;
+    gap: $base-space;
     height: 100%;
     min-width: 0;
+    padding: $base-space * 2 $base-space * 2 0 $base-space * 2;
     &__header {
       display: flex;
       justify-content: flex-end;
@@ -439,8 +535,17 @@ export default {
     }
   }
 }
-
+.annotation-progress {
+  .--expanded & {
+    display: none;
+  }
+}
 [data-title] {
   @include tooltip-mini("right", 12px);
 }
+.--mobile {
+  @include media(">=desktop") {
+    display: none;
+  }
+}
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
index 520fffc632..23f35a8954 100644
--- a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
@@ -1,51 +1,101 @@
 <template>
-  <div class="wrapper">
-    <section class="wrapper__records">
-      <DatasetFilters :recordCriteria="recordCriteria">
-        <ToggleAnnotationType
-          v-if="
-            records.hasRecordsToAnnotate && recordCriteria.committed.isPending
-          "
-          :recordCriteria="recordCriteria"
-      /></DatasetFilters>
-      <SimilarityRecordReference
-        v-show="recordCriteria.isFilteringBySimilarity"
-        v-if="!!records.reference"
-        :fields="records.reference.fields"
-        :recordCriteria="recordCriteria"
-        :availableVectors="datasetVectors"
-      />
-      <div class="wrapper__records__header">
-        <PaginationFeedbackTask :recordCriteria="recordCriteria" />
-      </div>
-      <Record
-        v-if="records.hasRecordsToAnnotate"
-        :datasetVectors="datasetVectors"
-        :recordCriteria="recordCriteria"
-        :record="record"
-      />
-      <div v-else class="wrapper--empty">
-        <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
-      </div>
-    </section>
+  <VerticalResizable class="wrapper" :id="`${recordCriteria.datasetId}-r-v-rz`">
+    <template #left>
+      <HorizontalResizable
+        :id="`${recordCriteria.datasetId}-r-h-rz`"
+        class="wrapper__left"
+      >
+        <template #up>
+          <section class="wrapper__records">
+            <DatasetFilters :recordCriteria="recordCriteria">
+              <ToggleAnnotationType
+                v-if="
+                  records.hasRecordsToAnnotate &&
+                  recordCriteria.committed.isPending
+                "
+                :recordCriteria="recordCriteria"
+            /></DatasetFilters>
+            <SimilarityRecordReference
+              v-show="recordCriteria.isFilteringBySimilarity"
+              v-if="!!records.reference"
+              :fields="records.reference.fields"
+              :recordCriteria="recordCriteria"
+              :availableVectors="datasetVectors"
+            />
+            <div class="wrapper__records__header">
+              <PaginationFeedbackTask :recordCriteria="recordCriteria" />
+            </div>
+            <Record
+              v-if="records.hasRecordsToAnnotate"
+              :datasetVectors="datasetVectors"
+              :recordCriteria="recordCriteria"
+              :record="record"
+            />
+            <div v-else class="wrapper--empty">
+              <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
+            </div>
+          </section>
+        </template>
 
-    <QuestionsForm
-      v-if="!!record"
-      :key="`${record.id}_questions`"
-      class="wrapper__form"
-      :class="statusClass"
-      :datasetId="recordCriteria.datasetId"
-      :record="record"
-      :show-discard-button="!record.isDiscarded"
-      :is-draft-saving="isDraftSaving"
-      :is-submitting="isSubmitting"
-      :is-discarding="isDiscarding"
-      :enableAutoSubmitWithKeyboard="true"
-      @on-submit-responses="onSubmit"
-      @on-discard-responses="onDiscard"
-      @on-save-draft="onSaveDraft"
-    />
-  </div>
+        <template #downHeader>
+          <p v-text="$t('guidelines')" />
+        </template>
+        <template #downContent>
+          <AnnotationGuidelines />
+        </template>
+      </HorizontalResizable>
+    </template>
+
+    <template #right>
+      <HorizontalResizable
+        :id="`${recordCriteria.datasetId}-q-h-rz}`"
+        class="wrapper__right"
+      >
+        <template #up>
+          <QuestionsForm
+            v-if="!!record"
+            :key="`${record.id}_questions`"
+            class="wrapper__form"
+            :class="statusClass"
+            :datasetId="recordCriteria.datasetId"
+            :record="record"
+            :show-discard-button="!record.isDiscarded"
+            :is-draft-saving="isDraftSaving"
+            :is-submitting="isSubmitting"
+            :is-discarding="isDiscarding"
+            :enableAutoSubmitWithKeyboard="true"
+            @on-submit-responses="onSubmit"
+            @on-discard-responses="onDiscard"
+            @on-save-draft="onSaveDraft"
+          />
+        </template>
+        <template #downHeader>
+          <p v-text="$t('metrics.progress')" />
+          <AnnotationProgress
+            class="annotation-progress"
+            :datasetId="recordCriteria.datasetId"
+            enableFetch
+          />
+        </template>
+        <template #downContent>
+          <AnnotationProgress :datasetId="recordCriteria.datasetId" />
+          <AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
+        </template>
+      </HorizontalResizable>
+    </template>
+    <BaseCollapsablePanel
+      class="--mobile"
+      :is-expanded="expandedGuidelines"
+      @toggle-expand="expandedGuidelines = !expandedGuidelines"
+    >
+      <template #panelHeader>
+        <p v-text="$t('guidelines')" />
+      </template>
+      <template #panelContent>
+        <AnnotationGuidelines />
+      </template>
+    </BaseCollapsablePanel>
+  </VerticalResizable>
 </template>
 <script>
 import { useFocusAnnotationViewModel } from "./useFocusAnnotationViewModel";
@@ -75,6 +125,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      expandedGuidelines: false,
+    };
+  },
   methods: {
     async onSubmit() {
       await this.submit(this.record);
@@ -102,20 +157,31 @@ export default {
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  gap: $base-space * 2;
-  padding: $base-space * 2;
+  &__inner {
+    display: flex;
+  }
   @include media("<desktop") {
     flex-flow: column;
     overflow: auto;
   }
-  &__records,
-  &__form {
+  &__left,
+  &__right {
     @include media("<desktop") {
       overflow: visible;
       height: auto !important;
       max-height: none !important;
     }
   }
+  &__left {
+    @include media("<desktop") {
+      :deep(.resizable__down) {
+        display: none;
+      }
+    }
+  }
+  &__form {
+    padding: $base-space * 2;
+  }
   &__records {
     flex: 1;
     display: flex;
@@ -123,10 +189,7 @@ export default {
     gap: $base-space;
     height: 100%;
     min-width: 0;
-    @include media("<desktop") {
-      flex: 0;
-      height: auto;
-    }
+    padding: $base-space * 2;
     &__header {
       display: flex;
       justify-content: flex-end;
@@ -145,4 +208,14 @@ export default {
     justify-content: center;
   }
 }
+.annotation-progress {
+  .--expanded & {
+    display: none;
+  }
+}
+.--mobile {
+  @include media(">=desktop") {
+    display: none;
+  }
+}
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
index 54ed5c3d59..e4ff96d646 100644
--- a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
@@ -7,20 +7,6 @@
     @click="focusOnFirstQuestionFromOutside"
   >
     <div class="questions-form__content">
-      <div class="questions-form__header">
-        <p class="questions-form__guidelines-link">
-          <NuxtLink
-            :to="{
-              name: 'dataset-id-settings',
-              params: { id: datasetId },
-            }"
-            target="_blank"
-            >{{ $t("annotationGuidelines") }}
-            <svgicon name="external-link" width="12" />
-          </NuxtLink>
-        </p>
-      </div>
-
       <QuestionsComponent
         :questions="record.questions"
         :autofocusPosition="autofocusPosition"
@@ -320,31 +306,12 @@ export default {
   flex-basis: clamp(33%, 520px, 40%);
   gap: $base-space;
   max-height: 100%;
-  min-width: 0;
+  min-width: 100%;
   justify-content: space-between;
   margin-bottom: auto;
   @include media("<desktop") {
     justify-content: flex-start;
   }
-  &__header {
-    display: flex;
-    justify-content: right;
-  }
-  &__guidelines-link {
-    margin: 0;
-    @include font-size(14px);
-    color: $black-37;
-    a {
-      color: $black-37;
-      outline: 0;
-      text-decoration: none;
-      &:hover,
-      &:focus {
-        color: $black-54;
-        transition: color 0.2s ease-in-out;
-      }
-    }
-  }
   &__content {
     position: relative;
     display: flex;
@@ -357,7 +324,7 @@ export default {
     border: 1px solid transparent;
     background: palette(white);
     .--pending & {
-      border-color: $black-10;
+      border-color: $black-6;
     }
     .--draft &,
     .--saving-draft & {
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
index 00ad453ff8..8913203318 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
@@ -58,7 +58,6 @@
           ref="span"
           :question="question"
           :isFocused="checkIfQuestionIsFocused(index)"
-          :is-bulk-mode="isBulkMode"
           :enableSpanQuestionShortcutsGlobal="enableSpanQuestionShortcutsGlobal"
           @on-focus="updateQuestionAutofocus(index)"
         />
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue b/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
index e84b775524..59176d591a 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue
@@ -6,7 +6,7 @@
       <span v-text="warningMessage" />
     </div>
     <EntityLabelSelectionComponent
-      v-if="!isBulkMode && supportedSpanAnnotation"
+      v-if="supportedSpanAnnotation"
       v-model="question.answer.options"
       :componentId="question.id"
       :maxOptionsToShowBeforeCollapse="this.question.settings.visible_options"
@@ -51,8 +51,6 @@ export default {
     warningMessage() {
       if (!this.supportedSpanAnnotation) {
         return this.$t("spanAnnotation.notSupported");
-      } else if (this.isBulkMode) {
-        return this.$t("spanAnnotation.bulkMode");
       }
     },
   },
diff --git a/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue b/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue
index 23049fc4c2..d127158082 100644
--- a/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue
+++ b/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue
@@ -1,18 +1,15 @@
 <template>
   <RenderMarkdownBaseComponent
-    class="--body1 description__text"
-    :markdown="guidelines"
+    class="--body3"
+    :markdown="guidelines || $t('noAnnotationGuidelines')"
   />
 </template>
 
 <script>
+import { useAnnotationGuidelinesViewModel } from "./useAnnotationGuidelinesViewModel";
 export default {
-  name: "SettingsInfo",
-  props: {
-    guidelines: {
-      type: String,
-      required: true,
-    },
+  setup() {
+    return useAnnotationGuidelinesViewModel();
   },
 };
 </script>
diff --git a/argilla-frontend/components/features/annotation/guidelines/useAnnotationGuidelinesViewModel.ts b/argilla-frontend/components/features/annotation/guidelines/useAnnotationGuidelinesViewModel.ts
new file mode 100644
index 0000000000..c56bb31351
--- /dev/null
+++ b/argilla-frontend/components/features/annotation/guidelines/useAnnotationGuidelinesViewModel.ts
@@ -0,0 +1,11 @@
+import { computed } from "vue-demi";
+import { useDataset } from "@/v1/infrastructure/storage/DatasetStorage";
+
+export const useAnnotationGuidelinesViewModel = () => {
+  const { state: dataset } = useDataset();
+  const guidelines = computed(() => dataset.guidelines);
+
+  return {
+    guidelines,
+  };
+};
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue b/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue
index cea83d52fb..737d909138 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue
@@ -6,6 +6,7 @@
     badge-vertical-position="top"
     badge-horizontal-position="right"
     badge-border-color="#212121"
+    badge-size="20"
     icon="settings"
   />
 </template>
@@ -24,15 +25,10 @@ export default {
 
 <style lang="scss" scoped>
 .button-settings {
-  margin-right: $base-space;
+  padding: $base-space;
+  overflow: visible;
   &[data-title] {
-    position: relative;
-    overflow: visible;
-    @extend %has-tooltip--bottom;
-    &:before,
-    &:after {
-      margin-top: calc($base-space/2);
-    }
+    @include tooltip-mini("bottom");
   }
 }
 </style>
diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
index 32fabd92b6..295e62a162 100644
--- a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
+++ b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
@@ -16,54 +16,16 @@
   -->
 
 <template>
-  <div v-if="datasetMetrics.hasMetrics">
-    <p class="metrics__title">Progress</p>
-    <div class="metrics__info">
-      <p class="metrics__info__name">Total</p>
-      <span class="metrics__info__counter">{{
-        datasetMetrics.progress | percent
-      }}</span>
-    </div>
-    <div class="metrics__numbers">
-      <span v-text="datasetMetrics.responded" />/{{ datasetMetrics.total }}
-    </div>
-    <BaseProgress
-      re-mode="determinate"
-      :multiple="true"
-      :progress="datasetMetrics.percentage.submitted"
-      :progress-secondary="datasetMetrics.percentage.discarded"
-      :progress-tertiary="datasetMetrics.percentage.draft"
-      :progress-bg="pendingColor"
-      :color="submittedColor"
-      :color-secondary="discardedColor"
-      :color-tertiary="draftColor"
-    >
-    </BaseProgress>
-    <div class="scroll">
-      <ul class="metrics__list">
-        <li
-          v-for="(status, index) in progressItems"
-          :key="index"
-          class="metrics__list__item"
-        >
-          <span
-            class="color-bullet"
-            :style="{ backgroundColor: status.color }"
-          ></span>
-          <label class="metrics__list__name" v-text="status.name" />
-          <span
-            class="metrics__list__counter"
-            v-text="getFormattedProgress(status.progress)"
-          />
-        </li>
-      </ul>
-      <slot></slot>
-    </div>
-  </div>
+  <BarProgress
+    v-if="datasetMetrics.hasMetrics"
+    :loading="false"
+    :progress-ranges="progressRanges"
+    :progress-completed="datasetMetrics.submitted + datasetMetrics.discarded"
+    :total="datasetMetrics.total"
+  />
 </template>
 
 <script>
-import { RecordStatus } from "~/v1/domain/entities/record/RecordStatus";
 import { useFeedbackTaskProgressViewModel } from "./useFeedbackTaskProgressViewModel";
 
 export default {
@@ -72,128 +34,31 @@ export default {
       type: String,
       required: true,
     },
+    enableFetch: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
-    progressItems() {
+    progressRanges() {
       return [
         {
-          name: RecordStatus.pending.name,
-          color: this.pendingColor,
-          progress: this.datasetMetrics.pending,
-        },
-        {
-          name: RecordStatus.draft.name,
-          color: this.draftColor,
-          progress: this.datasetMetrics.draft,
+          id: "completed",
+          name: "completed",
+          color: "linear-gradient(90deg, #6A6A6C 0%, #252626 100%)",
+          value: this.datasetMetrics.submitted + this.datasetMetrics.discarded,
         },
         {
-          name: RecordStatus.submitted.name,
-          color: this.submittedColor,
-          progress: this.datasetMetrics.submitted,
-        },
-        {
-          name: RecordStatus.discarded.name,
-          color: this.discardedColor,
-          progress: this.datasetMetrics.discarded,
+          id: "pending",
+          name: "progress",
+          color: "linear-gradient(white)",
+          value: this.datasetMetrics.pending + this.datasetMetrics.draft,
         },
       ];
     },
-    pendingColor() {
-      return RecordStatus.pending.color;
-    },
-    draftColor() {
-      return RecordStatus.draft.color;
-    },
-    submittedColor() {
-      return RecordStatus.submitted.color;
-    },
-    discardedColor() {
-      return RecordStatus.discarded.color;
-    },
-  },
-  methods: {
-    getFormattedProgress(progress) {
-      return progress && this.$options.filters.formatNumber(progress);
-    },
   },
   setup(props) {
     return useFeedbackTaskProgressViewModel(props);
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.scroll {
-  max-height: calc(100vh - 270px);
-  padding-right: 1em;
-  margin-right: -1em;
-  overflow: auto;
-  @extend %hide-scrollbar;
-}
-.metrics {
-  &__numbers {
-    margin-bottom: $base-space * 3;
-    margin-top: $base-space * 3;
-    @include font-size(18px);
-    span {
-      @include font-size(40px);
-      font-weight: 700;
-    }
-  }
-}
-.color-bullet {
-  height: $base-space;
-  width: $base-space;
-  border-radius: $border-radius-rounded;
-  display: inline-block;
-}
-:deep() {
-  .metrics__title {
-    margin-top: 0;
-    margin-bottom: $base-space * 4;
-    @include font-size(18px);
-    font-weight: 600;
-  }
-  .metrics__subtitle {
-    @include font-size(15px);
-    font-weight: 600;
-  }
-  .metrics__info {
-    margin-top: 0;
-    margin-bottom: $base-space;
-    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;
-    &__item {
-      display: flex;
-      align-items: center;
-      gap: $base-space;
-      margin-bottom: $base-space;
-      @include font-size(13px);
-    }
-    &__name {
-      text-transform: capitalize;
-      display: block;
-      width: calc(100% - 40px);
-      hyphens: auto;
-      word-break: break-word;
-    }
-    &__counter {
-      margin-right: 0;
-      margin-left: auto;
-    }
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue
new file mode 100644
index 0000000000..59718ea15b
--- /dev/null
+++ b/argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.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>
+  <div v-if="datasetMetrics.hasMetrics" class="metrics">
+    <BaseCircleProgress class="metrics__donut" :slices="progressItems" />
+    <ul class="metrics__list">
+      <li
+        v-for="(status, index) in progressItems"
+        :key="index"
+        class="metrics__list__item"
+      >
+        <span
+          class="color-bullet"
+          :style="{ backgroundColor: status.color }"
+        ></span>
+        <label class="metrics__list__name" v-text="status.name" />
+        <span
+          class="metrics__list__counter"
+          v-text="`(${getFormattedProgress(status.value)})`"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { RecordStatus } from "~/v1/domain/entities/record/RecordStatus";
+import { useFeedbackTaskProgressViewModel } from "./useFeedbackTaskProgressViewModel";
+
+export default {
+  props: {
+    datasetId: {
+      type: String,
+      required: true,
+    },
+    enableFetch: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    progressItems() {
+      return [
+        {
+          name: RecordStatus.submitted.name,
+          color: RecordStatus.submitted.color,
+          value: this.datasetMetrics.submitted,
+          percent: this.datasetMetrics.percentage.submitted,
+        },
+        {
+          name: RecordStatus.draft.name,
+          color: RecordStatus.draft.color,
+          value: this.datasetMetrics.draft,
+          percent: this.datasetMetrics.percentage.draft,
+        },
+        {
+          name: RecordStatus.discarded.name,
+          color: RecordStatus.discarded.color,
+          value: this.datasetMetrics.discarded,
+          percent: this.datasetMetrics.percentage.discarded,
+        },
+        {
+          name: RecordStatus.pending.name,
+          color: RecordStatus.pending.color,
+          value: this.datasetMetrics.pending,
+          percent: this.datasetMetrics.percentage.pending,
+        },
+      ];
+    },
+  },
+  methods: {
+    getFormattedProgress(progress) {
+      return progress && this.$options.filters.formatNumber(progress);
+    },
+  },
+  setup(props) {
+    return useFeedbackTaskProgressViewModel(props);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$bullet-size: 10px;
+.metrics {
+  display: flex;
+  align-items: center;
+  gap: $base-space * 4;
+  color: $black-54;
+  padding: $base-space * 3 0;
+  &__donut {
+    flex-shrink: 0;
+  }
+}
+.color-bullet {
+  height: $bullet-size;
+  width: $bullet-size;
+  border-radius: $border-radius-rounded;
+}
+
+.metrics__list {
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: $base-space * 2;
+  row-gap: $base-space;
+  list-style: none;
+  padding-left: 0;
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: $base-space;
+    @include font-size(13px);
+    min-width: 140px;
+  }
+  &__name {
+    text-transform: capitalize;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/annotation/progress/BarProgress.vue b/argilla-frontend/components/features/annotation/progress/BarProgress.vue
new file mode 100644
index 0000000000..b063a1ffd5
--- /dev/null
+++ b/argilla-frontend/components/features/annotation/progress/BarProgress.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="dataset-progress">
+    <BaseLinearProgress
+      class="dataset-progress__bar"
+      :progress-ranges="progressRanges"
+      :progress-max="total"
+    />
+    <span class="dataset-progress__data"
+      >{{ progressCompleted }} of {{ total }}</span
+    >
+    <span class="dataset-progress__percent">{{
+      progressCompletedPercent
+    }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      required: true,
+    },
+    progressCompleted: {
+      type: Number,
+      required: true,
+    },
+    progressRanges: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    progressCompletedPercent() {
+      return `${((this.progressCompleted / this.total) * 100).toFixed(2)}%`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-progress {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: $base-space * 2;
+  width: 100%;
+  color: $black-54;
+  @include font-size(12px);
+  &__bar {
+    width: 100%;
+    max-width: 160px;
+    box-shadow: 0 0 0 1px $black-10;
+    border-radius: $border-radius-m;
+  }
+  &__data {
+    font-weight: 500;
+  }
+  &__percent {
+    font-weight: lighter;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/annotation/progress/useFeedbackTaskProgressViewModel.ts b/argilla-frontend/components/features/annotation/progress/useFeedbackTaskProgressViewModel.ts
index b9f46c06c0..d7d4febf4c 100644
--- a/argilla-frontend/components/features/annotation/progress/useFeedbackTaskProgressViewModel.ts
+++ b/argilla-frontend/components/features/annotation/progress/useFeedbackTaskProgressViewModel.ts
@@ -9,6 +9,7 @@ import { useMetrics } from "~/v1/infrastructure/storage/MetricsStorage";
 
 interface FeedbackTaskProgressProps {
   datasetId: string;
+  enableFetch?: boolean;
 }
 
 export const useFeedbackTaskProgressViewModel = (
@@ -22,6 +23,8 @@ export const useFeedbackTaskProgressViewModel = (
   };
 
   onBeforeMount(() => {
+    if (!props.enableFetch) return;
+
     useEvents(() => {
       new UpdateMetricsEventHandler();
     });
diff --git a/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue b/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue
index bc7bac272d..6e2f19ee7e 100644
--- a/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue
+++ b/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue
@@ -8,7 +8,6 @@
             class="setting__dataset-name --body1"
             v-html="settings.dataset.name"
           />
-          <BaseBadge :text="settings.dataset.task" />
         </div>
         <base-action-tooltip tooltip="$t('copied')">
           <base-button
diff --git a/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue b/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
index e2d473b889..96dd158078 100644
--- a/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
+++ b/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
@@ -116,6 +116,7 @@ $buttonSize: 34px;
 
 .user {
   position: relative;
+  margin-left: auto;
   z-index: 3;
   &__button {
     user-select: none;
diff --git a/argilla-frontend/components/features/login/components/DecorationShape.vue b/argilla-frontend/components/features/login/components/DecorationShape.vue
index e321cc0936..0c5389109e 100644
--- a/argilla-frontend/components/features/login/components/DecorationShape.vue
+++ b/argilla-frontend/components/features/login/components/DecorationShape.vue
@@ -1,91 +1,131 @@
 <template>
-  <span>
-    <svg
-      class="deco--top"
-      width="381"
-      height="273"
-      viewBox="0 0 381 273"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M49.4543 168.671C131.001 283.218 286.601 306.073 397.175 219.655L397.175 -6.04227C214.413 -6.04227 1.68281 -6.04227 1.68281 -6.04227C-2.99505 54.3839 12.3499 116.551 49.4543 168.671Z"
-        fill="url(#paint0_linear_4458_4403)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_4458_4403"
-          x1="176.672"
-          y1="264.361"
-          x2="219.437"
-          y2="-31.7149"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#FFB097" />
-          <stop offset="1" stop-color="#F73D3D" />
-        </linearGradient>
-      </defs>
-    </svg>
-
-    <svg
-      class="deco--center"
-      width="543"
-      height="420"
-      viewBox="0 0 543 420"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_5185_2603)">
-        <path
-          d="M481.316 122.082C398.97 39.7831 265.575 39.4794 183.228 121.475L61.6838 0C-20.3587 82.2993 -20.3587 215.618 61.9877 297.918C144.334 380.217 277.729 380.217 360.076 298.221L481.62 419.696C563.663 337.701 563.663 204.382 481.316 122.082Z"
-          fill="url(#paint0_linear_5185_2603)"
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_5185_2603"
-          x1="271.652"
-          y1="0"
-          x2="271.652"
-          y2="419.696"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#FFB097" />
-          <stop offset="1" stop-color="#F73D3D" />
-        </linearGradient>
-        <clipPath id="clip0_5185_2603">
-          <rect width="543" height="420" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-
-    <svg
-      class="deco--bottom"
-      width="446"
-      height="255"
-      viewBox="0 0 446 255"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M382.271 78.1171C297.195 -5.55388 159.378 -5.86263 74.3021 77.4996L-4.00006 0.490662L-4.00006 256.883H444.363C452.587 193.414 431.911 126.937 382.271 78.1171Z"
-        fill="url(#paint0_linear_4458_4645)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_4458_4645"
-          x1="221.059"
-          y1="0.490662"
-          x2="221.059"
-          y2="256.883"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#FFB097" />
-          <stop offset="1" stop-color="#F73D3D" />
-        </linearGradient>
-      </defs>
-    </svg>
-  </span>
+  <svg
+    class="deco--bottom"
+    width="771"
+    height="464"
+    viewBox="0 0 771 464"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <ellipse
+      cx="79.5"
+      cy="77.5"
+      rx="79.5"
+      ry="77.5"
+      transform="matrix(-1 0 0 1 515 142)"
+      fill="url(#paint0_linear_5498_324)"
+      fill-opacity="0.8"
+    />
+    <path
+      d="M709.445 146.303C698.068 201.929 638.806 236.924 576.896 224.447C514.985 211.971 473.903 156.755 484.958 101.063L709.445 146.303Z"
+      fill="url(#paint1_linear_5498_324)"
+    />
+    <path
+      d="M730.352 46.0295C718.975 101.656 659.713 136.651 597.802 124.174C535.892 111.698 494.81 56.4815 505.865 0.790103L730.352 46.0295Z"
+      fill="url(#paint2_linear_5498_324)"
+    />
+    <path
+      d="M752.559 330.202C716.44 390.212 638.651 409.697 578.718 373.7L525.406 462.276C465.607 426.058 446.282 348.152 482.4 288.141C518.519 228.13 596.352 208.824 656.285 244.82L709.597 156.244C769.352 192.285 788.677 270.191 752.559 330.202Z"
+      fill="#FF675F"
+    />
+    <path
+      d="M181.513 364.13C181.513 418.886 225.902 463.274 280.658 463.274C335.414 463.274 379.802 418.886 379.802 364.13C379.802 309.374 335.414 264.986 280.658 264.986C225.902 264.986 181.513 309.374 181.513 364.13Z"
+      fill="url(#paint3_linear_5498_324)"
+    />
+    <path
+      d="M183.408 349.102C168.98 381.915 130.381 396.663 97.0533 382.115C63.7256 367.566 48.3363 329.147 62.5518 296.343L183.408 349.102Z"
+      fill="url(#paint4_linear_5498_324)"
+      fill-opacity="0.9"
+    />
+    <path
+      d="M-2.74348e-05 409.436C14.4286 376.623 53.0274 361.874 86.3551 376.423C119.683 390.972 135.072 429.391 120.857 462.194L-2.74348e-05 409.436Z"
+      fill="url(#paint5_linear_5498_324)"
+      fill-opacity="0.9"
+    />
+    <path
+      d="M495.862 457.741C452.044 474.614 402.702 452.418 385.457 408.097C368.212 363.776 389.714 314.082 433.326 297.02L495.862 457.741Z"
+      fill="url(#paint6_linear_5498_324)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_5498_324"
+        x1="-28.8223"
+        y1="59.9977"
+        x2="122.512"
+        y2="271.388"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_5498_324"
+        x1="742.278"
+        y1="193.508"
+        x2="642.695"
+        y2="368.536"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_5498_324"
+        x1="763.185"
+        y1="93.2343"
+        x2="663.602"
+        y2="268.263"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_5498_324"
+        x1="415.747"
+        y1="341.74"
+        x2="220.608"
+        y2="607.46"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_5498_324"
+        x1="106"
+        y1="398.838"
+        x2="79.194"
+        y2="249.951"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_5498_324"
+        x1="69.3754"
+        y1="452.539"
+        x2="42.569"
+        y2="303.651"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear_5498_324"
+        x1="471.878"
+        y1="353.664"
+        x2="358.537"
+        y2="516.005"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.0151877" stop-color="#FF675F" />
+        <stop offset="1" stop-color="#F73D3D" />
+      </linearGradient>
+    </defs>
+  </svg>
 </template>
 
 <style lang="scss" scoped>
@@ -98,25 +138,10 @@
   }
 }
 .deco {
-  &--top {
-    top: 0;
-    right: 0;
-    width: max(300px, 30%);
-    @extend %deco;
-  }
-  &--center {
-    bottom: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: max(400px, 50%);
-    margin: auto;
-    @extend %deco;
-  }
   &--bottom {
+    right: 0;
     bottom: 0;
-    left: 0;
-    width: max(200px, 34%);
+    width: clamp(560px, 70%, 800px);
     @extend %deco;
   }
 }
diff --git a/argilla-frontend/layouts/AuthenticationLayout.vue b/argilla-frontend/layouts/AuthenticationLayout.vue
index 45c41c387f..e1560b5660 100644
--- a/argilla-frontend/layouts/AuthenticationLayout.vue
+++ b/argilla-frontend/layouts/AuthenticationLayout.vue
@@ -35,24 +35,24 @@ export default {
     display: none;
     overflow: hidden;
     @include media(">desktop") {
-      background: $brand-secondary-color;
+      background: linear-gradient(178.31deg, #ffe5d9 1.36%, #ffd1bc 109.14%);
       padding: $base-space * 2;
       display: flex;
-      align-items: center;
-      justify-content: center;
+      align-items: flex-start;
+      justify-content: left;
       width: 60vw;
     }
     &__claim {
       position: relative;
       font-family: $secondary-font-family;
-      max-width: min(80%, 580px);
-      color: palette(white);
+      color: $black-87;
       @include font-size(30px);
       line-height: 1.2em;
       @include media(">desktop") {
-        @include font-size(40px);
-        padding-right: $base-space * 8;
-        padding-top: $base-space * 4;
+        font-size: clamp(40px, 3vw, 60px);
+        padding-left: 12%;
+        padding-top: $base-space * 12;
+        text-wrap: balance;
       }
       &--mobile {
         position: relative;
diff --git a/argilla-frontend/nuxt.config.ts b/argilla-frontend/nuxt.config.ts
index cdcfe3f2ed..6e69b9ca49 100644
--- a/argilla-frontend/nuxt.config.ts
+++ b/argilla-frontend/nuxt.config.ts
@@ -102,16 +102,6 @@ const config: NuxtConfig = {
     "@nuxtjs/auth-next",
     "nuxt-highlightjs",
     "@nuxtjs/i18n",
-    [
-      "nuxt-mq",
-      {
-        breakpoints: {
-          sm: 450,
-          md: 1901,
-          lg: Infinity,
-        },
-      },
-    ],
   ],
 
   i18n: {
diff --git a/argilla-frontend/package.json b/argilla-frontend/package.json
index 07b7117b42..174273b6a3 100644
--- a/argilla-frontend/package.json
+++ b/argilla-frontend/package.json
@@ -37,7 +37,6 @@
     "marked-highlight": "^2.0.1",
     "nuxt": "^2.15.8",
     "nuxt-highlightjs": "^1.0.2",
-    "nuxt-mq": "^2.0.2",
     "pinia": "^2.1.4",
     "sass": "^1.49.9",
     "ts-injecty": "^0.0.22",
diff --git a/argilla-frontend/pages/dataset/_id/settings.vue b/argilla-frontend/pages/dataset/_id/settings.vue
index 73752b46d9..e21ff0d0fd 100644
--- a/argilla-frontend/pages/dataset/_id/settings.vue
+++ b/argilla-frontend/pages/dataset/_id/settings.vue
@@ -42,6 +42,9 @@ export default {
   components: {
     InternalPage,
   },
+  beforeRouteLeave(to, from, next) {
+    this.goToOutside(next);
+  },
   setup() {
     return useDatasetSettingViewModel();
   },
diff --git a/argilla-frontend/pages/dataset/_id/useDatasetSettingViewModel.ts b/argilla-frontend/pages/dataset/_id/useDatasetSettingViewModel.ts
index 5d945ce673..5b8821fddf 100644
--- a/argilla-frontend/pages/dataset/_id/useDatasetSettingViewModel.ts
+++ b/argilla-frontend/pages/dataset/_id/useDatasetSettingViewModel.ts
@@ -94,7 +94,7 @@ export const useDatasetSettingViewModel = () => {
     ];
   });
 
-  const onGoToDataset = () => {
+  const goToDataset = () => {
     if (routes.previousRouteMatchWith(datasetId)) return routes.goBack();
 
     routes.goToFeedbackTaskAnnotationPage(datasetId);
@@ -112,7 +112,7 @@ export const useDatasetSettingViewModel = () => {
     if (datasetSetting.isVectorsModified) return goToTab("vector");
   };
 
-  const goToDataset = () => {
+  const goToOutside = (next) => {
     if (datasetSetting.isModified) {
       return notification.notify({
         message: t("changes_no_submit"),
@@ -120,7 +120,7 @@ export const useDatasetSettingViewModel = () => {
         permanent: true,
         type: "warning",
         onClick() {
-          onGoToDataset();
+          next();
         },
         onClose() {
           goToTabWithModification();
@@ -128,7 +128,7 @@ export const useDatasetSettingViewModel = () => {
       });
     }
 
-    onGoToDataset();
+    next();
   };
 
   onBeforeMount(() => {
@@ -155,6 +155,7 @@ export const useDatasetSettingViewModel = () => {
     isAdminOrOwnerRole,
     datasetId,
     datasetSetting,
+    goToOutside,
     goToDataset,
   };
 };
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index 636969e00d..099bd2e233 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -29,6 +29,7 @@ export default {
   dimension: "Dimension",
   visibleLabels: "Sichtbare labels",
   annotationGuidelines: "Annotationsrichtlinien",
+  guidelines: "Richtlinien",
   noAnnotationGuidelines: "Dieser Datensatz hat keine Annotationsrichtlinien",
   breadcrumbs: {
     home: "start",
@@ -160,7 +161,6 @@ export default {
   spanAnnotation: {
     shortcutHelper: "Halten Sie 'Shift' gedrückt, um Zeichenebene auszuwählen",
     notSupported: "Bereichsannotation wird von Ihrem Browser nicht unterstützt",
-    bulkMode: "Bereichsannotation wird in der Massenansicht nicht unterstützt",
   },
   login: {
     title: "Anmelden",
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index 6d1207a8e0..af12e6df17 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -33,6 +33,7 @@ export default {
   dimension: "Dimension",
   visibleLabels: "Visible labels",
   annotationGuidelines: "Annotation guidelines",
+  guidelines: "Guidelines",
   noAnnotationGuidelines: "This dataset has no annotation guidelines",
   breadcrumbs: {
     home: "Home",
@@ -170,7 +171,6 @@ export default {
   spanAnnotation: {
     shortcutHelper: "Hold 'Shift' to select character level",
     notSupported: "Span annotation is not supported for your browser",
-    bulkMode: "Span annotation is not supported in Bulk view",
   },
   login: {
     title: "Sign in",
diff --git a/argilla-frontend/v1/domain/entities/dataset/Metrics.ts b/argilla-frontend/v1/domain/entities/dataset/Metrics.ts
index ff3dc4b63f..31c80d6e08 100644
--- a/argilla-frontend/v1/domain/entities/dataset/Metrics.ts
+++ b/argilla-frontend/v1/domain/entities/dataset/Metrics.ts
@@ -1,5 +1,6 @@
 export class Metrics {
   public readonly percentage: {
+    pending: number;
     draft: number;
     submitted: number;
     discarded: number;
@@ -13,6 +14,7 @@ export class Metrics {
     public readonly draft: number
   ) {
     this.percentage = {
+      pending: (this.pending * 100) / this.total,
       draft: (this.draft * 100) / this.total,
       submitted: (this.submitted * 100) / this.total,
       discarded: (this.discarded * 100) / this.total,
diff --git a/argilla-frontend/v1/domain/entities/question/Question.test.ts b/argilla-frontend/v1/domain/entities/question/Question.test.ts
index f9ff05162b..2899910c32 100644
--- a/argilla-frontend/v1/domain/entities/question/Question.test.ts
+++ b/argilla-frontend/v1/domain/entities/question/Question.test.ts
@@ -121,6 +121,23 @@ describe("Question", () => {
 
       expect(question.isModified).toBeFalsy();
     });
+
+    test("isModified is false when the question was loaded with response", () => {
+      const question = createTextQuestionMocked();
+
+      question.response({ value: "positive" });
+
+      expect(question.isModified).toBeFalsy();
+    });
+
+    test("isModified is true when the question was loaded with response  and modified after initialization", () => {
+      const question = createTextQuestionMocked();
+      question.response({ value: "positive" });
+
+      question.title = "NEW TITLE";
+
+      expect(question.isModified).toBeTruthy();
+    });
   });
 
   describe("question validation should", () => {
diff --git a/argilla-frontend/v1/domain/entities/question/Question.ts b/argilla-frontend/v1/domain/entities/question/Question.ts
index 8d0e3a9a31..8efcc6a166 100644
--- a/argilla-frontend/v1/domain/entities/question/Question.ts
+++ b/argilla-frontend/v1/domain/entities/question/Question.ts
@@ -18,6 +18,7 @@ interface OriginalQuestion {
   title: string;
   description: string;
   settings: any;
+  answer: QuestionAnswer;
 }
 
 export class Question {
@@ -40,8 +41,6 @@ export class Question {
     this.settings = new QuestionSetting(settings);
 
     this.initialize();
-    this.initializeAnswers();
-    this.initializeOriginal();
   }
 
   private _description: string;
@@ -102,7 +101,8 @@ export class Question {
     return (
       this.title !== this.original.title ||
       this.description !== this.original.description ||
-      !this.settings.isEqual(this.original.settings)
+      !this.settings.isEqual(this.original.settings) ||
+      !this.answer.isEqual(this.original.answer)
     );
   }
 
@@ -140,23 +140,11 @@ export class Question {
     this.answer.clear();
   }
 
-  reloadAnswerFromOptions() {
-    const valuesAnswered = this.answer.valuesAnswered;
-
-    this.initializeAnswers();
-
-    if (valuesAnswered) {
-      this.answer.response({ value: valuesAnswered });
-    }
-  }
-
   restore() {
     this.title = this.original.title;
     this.description = this.original.description;
 
     this.restoreOriginal();
-
-    this.reloadAnswerFromOptions();
   }
 
   update() {
@@ -172,6 +160,8 @@ export class Question {
     if (!answer) return;
 
     this.answer.response(answer);
+
+    this.initializeOriginal();
   }
 
   addSuggestion(suggestion: Suggestion) {
@@ -180,7 +170,7 @@ export class Question {
     this.suggestion = suggestion;
   }
 
-  private createEmptyAnswers(): QuestionAnswer {
+  private createInitialAnswers(): QuestionAnswer {
     if (this.isTextType) {
       return new TextQuestionAnswer(this.type, "");
     }
@@ -245,15 +235,26 @@ export class Question {
         };
       });
     }
+
+    this.initializeAnswers();
+    this.initializeOriginal();
   }
 
   private initializeAnswers() {
-    this.answer = this.createEmptyAnswers();
+    this.answer = this.createInitialAnswers();
   }
 
   private initializeOriginal() {
     const { options, ...rest } = this.settings;
 
+    const originalAnswer = this.createInitialAnswers();
+
+    const valuesAnswered = this.answer.valuesAnswered;
+
+    if (valuesAnswered) {
+      originalAnswer.response({ value: valuesAnswered });
+    }
+
     this.original = {
       title: this.title,
       description: this.description,
@@ -261,6 +262,7 @@ export class Question {
         ...rest,
         options: options?.map((option: string) => option),
       }),
+      answer: originalAnswer,
     };
   }
 
@@ -271,5 +273,13 @@ export class Question {
       ...rest,
       options: options?.map((option: string) => option),
     });
+
+    const valuesAnswered = this.answer.valuesAnswered;
+
+    this.initializeAnswers();
+
+    if (valuesAnswered) {
+      this.answer.response({ value: valuesAnswered });
+    }
   }
 }
diff --git a/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts b/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts
index c3fa86b2bc..0d7b4c99d8 100644
--- a/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts
+++ b/argilla-frontend/v1/domain/entities/question/QuestionAnswer.ts
@@ -22,6 +22,14 @@ export abstract class QuestionAnswer {
     this.fill(this._answer);
   }
 
+  isEqual(answer: QuestionAnswer) {
+    const isEqual =
+      JSON.stringify(this.valuesAnswered) ===
+      JSON.stringify(answer.valuesAnswered);
+
+    return isEqual;
+  }
+
   protected abstract fill(answer: Answer);
   abstract clear();
   abstract get isValid(): boolean;
@@ -99,7 +107,11 @@ export class SpanQuestionAnswer extends QuestionAnswer {
   }
 
   get valuesAnswered(): SpanAnswer[] {
-    return this.values;
+    return this.values.map((value) => ({
+      start: value.start,
+      end: value.end,
+      label: value.label,
+    }));
   }
 }
 
diff --git a/argilla-frontend/v1/domain/entities/record/Record.ts b/argilla-frontend/v1/domain/entities/record/Record.ts
index cf361492ee..33a0600630 100644
--- a/argilla-frontend/v1/domain/entities/record/Record.ts
+++ b/argilla-frontend/v1/domain/entities/record/Record.ts
@@ -76,15 +76,17 @@ export class Record {
   }
 
   answerWith(recordReference: Record) {
-    this.questions.forEach((question) => {
-      const questionReference = recordReference.questions.find(
-        (q) => q.id === question.id
-      );
+    this.questions
+      .filter((q) => !q.isSpanType)
+      .forEach((question) => {
+        const questionReference = recordReference.questions.find(
+          (q) => q.id === question.id
+        );
 
-      if (!questionReference) return;
+        if (!questionReference) return;
 
-      question.clone(questionReference);
-    });
+        question.clone(questionReference);
+      });
   }
 
   initialize() {
diff --git a/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts b/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts
index 3f8536284a..ed6b61f7f9 100644
--- a/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts
+++ b/argilla-frontend/v1/domain/usecases/get-records-by-criteria-use-case.ts
@@ -72,22 +72,25 @@ export class GetRecordsByCriteriaUseCase {
             )
           : null;
 
-        const suggestions = !criteria.page.isBulkMode
-          ? record.suggestions.map((suggestion) => {
-              const question = questions.find(
-                (q) => q.id === suggestion.question_id
-              );
-
-              return new Suggestion(
-                suggestion.id,
-                suggestion.question_id,
-                question.type,
-                suggestion.value,
-                suggestion.score,
-                suggestion.agent
-              );
-            })
-          : [];
+        const suggestions = record.suggestions
+          .map((suggestion) => {
+            const question = questions.find(
+              (q) => q.id === suggestion.question_id
+            );
+
+            if (criteria.page.isBulkMode && !question.isSpanType)
+              return undefined;
+
+            return new Suggestion(
+              suggestion.id,
+              suggestion.question_id,
+              question.type,
+              suggestion.value,
+              suggestion.score,
+              suggestion.agent
+            );
+          })
+          .filter(Boolean);
 
         return new Record(
           record.id,
diff --git a/argilla-frontend/v1/infrastructure/repositories/RecordRepository.ts b/argilla-frontend/v1/infrastructure/repositories/RecordRepository.ts
index c82ac57bee..e0e30adfd3 100644
--- a/argilla-frontend/v1/infrastructure/repositories/RecordRepository.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/RecordRepository.ts
@@ -101,6 +101,16 @@ export class RecordRepository {
         request
       );
 
+      const datasetId =
+        Array.isArray(records) && records.length > 0
+          ? records[0].datasetId
+          : null;
+
+      if (datasetId) {
+        revalidateCache(`/v1/datasets/${datasetId}/progress`);
+        revalidateCache(`/v1/me/datasets/${datasetId}/metrics`);
+      }
+
       return data.items.map(({ item, error }) => {
         if (item) {
           return {
@@ -139,6 +149,9 @@ export class RecordRepository {
         request
       );
 
+      revalidateCache(`/v1/datasets/${record.datasetId}/progress`);
+      revalidateCache(`/v1/me/datasets/${record.datasetId}/metrics`);
+
       return new RecordAnswer(data.id, status, data.values, data.updated_at);
     } catch (error) {
       throw {
diff --git a/argilla-frontend/v1/infrastructure/services/useLocalStorage.ts b/argilla-frontend/v1/infrastructure/services/useLocalStorage.ts
index e0151911ad..f3331172bb 100644
--- a/argilla-frontend/v1/infrastructure/services/useLocalStorage.ts
+++ b/argilla-frontend/v1/infrastructure/services/useLocalStorage.ts
@@ -1,4 +1,4 @@
-type Options = "showShortcutsHelper";
+type Options = "showShortcutsHelper" | "layout";
 
 const STORAGE_KEY = "argilla";
 
diff --git a/argilla-server/CHANGELOG.md b/argilla-server/CHANGELOG.md
index a622904b9c..a6fc455df0 100644
--- a/argilla-server/CHANGELOG.md
+++ b/argilla-server/CHANGELOG.md
@@ -22,6 +22,7 @@ These are the section headers that we use:
 
 ### Fixed
 
+- Fixed error when updating records in bulk with wrong `external_id` but correct record `id`. ([#5014](https://github.com/argilla-io/argilla/pull/5014))
 - Fixed error when searching all record response values. ([#5003](https://github.com/argilla-io/argilla/pull/5003))
 
 ## [1.29.0](https://github.com/argilla-io/argilla/compare/v1.28.0...v1.29.0)
diff --git a/argilla-server/src/argilla_server/bulk/records_bulk.py b/argilla-server/src/argilla_server/bulk/records_bulk.py
index 1719b124e4..0e3d372be5 100644
--- a/argilla-server/src/argilla_server/bulk/records_bulk.py
+++ b/argilla-server/src/argilla_server/bulk/records_bulk.py
@@ -188,7 +188,7 @@ async def upsert_records_bulk(self, dataset: Dataset, bulk_upsert: RecordsBulkUp
         records = []
         async with self._db.begin_nested():
             for record_upsert in bulk_upsert.items:
-                record = found_records.get(record_upsert.external_id or record_upsert.id)
+                record = found_records.get(record_upsert.id) or found_records.get(record_upsert.external_id)
                 if not record:
                     record = Record(
                         fields=record_upsert.fields,
diff --git a/argilla-server/src/argilla_server/validators/records.py b/argilla-server/src/argilla_server/validators/records.py
index 6aba29dbd5..01a80badba 100644
--- a/argilla-server/src/argilla_server/validators/records.py
+++ b/argilla-server/src/argilla_server/validators/records.py
@@ -150,8 +150,9 @@ def _validate_all_bulk_records(self, dataset: Dataset, records_upsert: List[Reco
         for idx, record_upsert in enumerate(records_upsert):
             try:
                 record = self._existing_records_by_external_id_or_record_id.get(
-                    record_upsert.external_id or record_upsert.id
-                )
+                    record_upsert.id
+                ) or self._existing_records_by_external_id_or_record_id.get(record_upsert.external_id)
+
                 if record:
                     RecordUpdateValidator(RecordUpdate.parse_obj(record_upsert)).validate_for(dataset)
                 else:
diff --git a/argilla-server/tests/unit/api/handlers/v1/datasets/records/records_bulk/test_dataset_records_bulk.py b/argilla-server/tests/unit/api/handlers/v1/datasets/records/records_bulk/test_dataset_records_bulk.py
index bfbd65102e..d7e95520d5 100644
--- a/argilla-server/tests/unit/api/handlers/v1/datasets/records/records_bulk/test_dataset_records_bulk.py
+++ b/argilla-server/tests/unit/api/handlers/v1/datasets/records/records_bulk/test_dataset_records_bulk.py
@@ -11,7 +11,7 @@
 #  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.
-
+import uuid
 from uuid import UUID
 
 import pytest
@@ -105,7 +105,7 @@ async def test_update_record_metadata_by_id(
         self, async_client: AsyncClient, db: AsyncSession, owner_auth_header: dict, metadata: dict
     ) -> None:
         dataset = await self.test_dataset()
-        records = await RecordFactory.create_batch(dataset=dataset, size=100)
+        records = await RecordFactory.create_batch(dataset=dataset, size=10)
 
         response = await async_client.put(
             self.url(dataset.id),
@@ -124,7 +124,7 @@ async def test_update_record_metadata_by_external_id(
         self, async_client: AsyncClient, db: AsyncSession, owner_auth_header: dict, metadata: dict
     ):
         dataset = await self.test_dataset()
-        records = await RecordFactory.create_batch(dataset=dataset, size=100)
+        records = await RecordFactory.create_batch(dataset=dataset, size=10)
 
         response = await async_client.put(
             self.url(dataset.id),
@@ -140,6 +140,30 @@ async def test_update_record_metadata_by_external_id(
         for record in updated_records:
             assert record.metadata_ == metadata
 
+    async def test_update_record_metadata_with_invalid_external_id_but_correct_id(
+        self, async_client: AsyncClient, db: AsyncSession, owner_auth_header: dict
+    ):
+        dataset = await self.test_dataset()
+        records = await RecordFactory.create_batch(dataset=dataset, size=10)
+
+        new_metadata = {"whatever": "whatever"}
+        response = await async_client.put(
+            self.url(dataset.id),
+            headers=owner_auth_header,
+            json={
+                "items": [
+                    {"id": str(record.id), "external_id": str(uuid.uuid4()), "metadata": new_metadata}
+                    for record in records
+                ],
+            },
+        )
+
+        assert response.status_code == 200, response.json()
+        assert (await db.execute(select(func.count(Record.id)))).scalar_one() == len(records)
+        updated_records = (await db.execute(select(Record))).scalars().all()
+        for record in updated_records:
+            assert record.metadata_ == new_metadata
+
     async def test_update_record_for_other_dataset(
         self, async_client: AsyncClient, db: AsyncSession, owner_auth_header: dict
     ):
diff --git a/argilla/pdm.lock b/argilla/pdm.lock
index a4c1dbae00..04556ab3e9 100644
--- a/argilla/pdm.lock
+++ b/argilla/pdm.lock
@@ -5,7 +5,7 @@
 groups = ["default", "dev"]
 strategy = ["cross_platform", "inherit_metadata"]
 lock_version = "4.4.1"
-content_hash = "sha256:21d1388229fea007d4f9ba997b02c37cb792ec71e7efb00d02b4c1864560ba38"
+content_hash = "sha256:10269e0bb9a8b44cdcb92d40bc63899c1ace59fd69d17d263a9d5a68067b7970"
 
 [[package]]
 name = "aiohttp"
@@ -1623,6 +1623,7 @@ groups = ["default", "dev"]
 dependencies = [
     "numpy>=1.22.4; python_version < \"3.11\"",
     "numpy>=1.23.2; python_version == \"3.11\"",
+    "numpy>=1.26.0; python_version >= \"3.12\"",
     "python-dateutil>=2.8.2",
     "pytz>=2020.1",
     "tzdata>=2022.7",
diff --git a/argilla/pyproject.toml b/argilla/pyproject.toml
index b57eda2830..2e7832a53f 100644
--- a/argilla/pyproject.toml
+++ b/argilla/pyproject.toml
@@ -4,7 +4,7 @@ description = "The Argilla python server SDK"
 authors = [
     {name = "Argilla", email = "contact@argilla.io"},
 ]
-requires-python = ">=3.9,<3.12"
+requires-python = ">=3.9,<=3.12"
 readme = "README.md"
 license = {text = "Apache 2.0"}
 
diff --git a/argilla/src/argilla/_models/_dataset.py b/argilla/src/argilla/_models/_dataset.py
index 057410556b..cd851752a5 100644
--- a/argilla/src/argilla/_models/_dataset.py
+++ b/argilla/src/argilla/_models/_dataset.py
@@ -17,7 +17,7 @@
 from uuid import UUID
 from typing import Literal
 
-from pydantic import field_serializer
+from pydantic import field_serializer, ConfigDict
 
 from argilla._models import ResourceModel
 
@@ -35,9 +35,10 @@ class DatasetModel(ResourceModel):
     last_activity_at: Optional[datetime] = None
     url: Optional[str] = None
 
-    class Config:
-        validate_assignment = True
-        str_strip_whitespace = True
+    model_config = ConfigDict(
+        validate_assignment=True,
+        str_strip_whitespace=True,
+    )
 
     @field_serializer("last_activity_at", when_used="unless-none")
     def serialize_last_activity_at(self, value: datetime) -> str:
diff --git a/argilla/src/argilla/_models/_user.py b/argilla/src/argilla/_models/_user.py
index 472ccb71e9..ac94dc6465 100644
--- a/argilla/src/argilla/_models/_user.py
+++ b/argilla/src/argilla/_models/_user.py
@@ -15,7 +15,7 @@
 from enum import Enum
 from typing import Optional
 
-from pydantic import field_validator
+from pydantic import field_validator, ConfigDict
 
 from argilla._models import ResourceModel
 
@@ -36,9 +36,10 @@ class UserModel(ResourceModel):
     last_name: Optional[str] = None
     password: Optional[str] = None
 
-    class Config:
-        validate_assignment = True
-        str_strip_whitespace = True
+    model_config = ConfigDict(
+        validate_assignment=True,
+        str_strip_whitespace=True,
+    )
 
     @field_validator("first_name")
     @classmethod
diff --git a/argilla/src/argilla/_models/_workspace.py b/argilla/src/argilla/_models/_workspace.py
index 477b422840..c823d79b04 100644
--- a/argilla/src/argilla/_models/_workspace.py
+++ b/argilla/src/argilla/_models/_workspace.py
@@ -15,7 +15,7 @@
 from argilla._models import ResourceModel
 
 import re
-from pydantic import field_validator
+from pydantic import field_validator, ConfigDict
 
 __all__ = ["WorkspaceModel"]
 
@@ -23,9 +23,10 @@
 class WorkspaceModel(ResourceModel):
     name: str
 
-    class Config:
-        validate_assignment = True
-        str_strip_whitespace = True
+    model_config = ConfigDict(
+        validate_assignment=True,
+        str_strip_whitespace=True,
+    )
 
     @field_validator("name")
     @classmethod
diff --git a/argilla/src/argilla/records/_dataset_records.py b/argilla/src/argilla/records/_dataset_records.py
index 70ddf81029..00028ebd57 100644
--- a/argilla/src/argilla/records/_dataset_records.py
+++ b/argilla/src/argilla/records/_dataset_records.py
@@ -116,6 +116,19 @@ def _fetch_from_server_with_search(self) -> List[RecordModel]:
     def _is_search_query(self) -> bool:
         return bool(self.__query and (self.__query.query or self.__query.filter))
 
+    def to_list(self, flatten: bool) -> List[Dict[str, Any]]:
+        return GenericIO.to_list(records=list(self), flatten=flatten)
+
+    def to_dict(self, flatten: bool, orient: str) -> Dict[str, Any]:
+        data = GenericIO.to_dict(records=list(self), flatten=flatten, orient=orient)
+        return data
+
+    def to_json(self, path: Union[Path, str]) -> Path:
+        return JsonIO.to_json(records=list(self), path=path)
+
+    def to_datasets(self) -> "HFDataset":
+        return HFDatasetsIO.to_datasets(records=list(self))
+
 
 class DatasetRecords(Iterable[Record], LoggingMixin):
     """This class is used to work with records from a dataset and is accessed via `Dataset.records`.
@@ -142,7 +155,7 @@ def __init__(self, client: "Argilla", dataset: "Dataset"):
         self._api = self.__client.api.records
 
     def __iter__(self):
-        return DatasetRecordsIterator(self.__dataset, self.__client)
+        return DatasetRecordsIterator(self.__dataset, self.__client, with_suggestions=True, with_responses=True)
 
     def __call__(
         self,
@@ -286,9 +299,7 @@ def to_dict(self, flatten: bool = False, orient: str = "names") -> Dict[str, Any
             A dictionary of records.
 
         """
-        records = list(self(with_suggestions=True, with_responses=True))
-        data = GenericIO.to_dict(records=records, flatten=flatten, orient=orient)
-        return data
+        return self().to_dict(flatten=flatten, orient=orient)
 
     def to_list(self, flatten: bool = False) -> List[Dict[str, Any]]:
         """
@@ -300,8 +311,7 @@ def to_list(self, flatten: bool = False) -> List[Dict[str, Any]]:
         Returns:
             A list of dictionaries of records.
         """
-        records = list(self(with_suggestions=True, with_responses=True))
-        data = GenericIO.to_list(records=records, flatten=flatten)
+        data = self().to_list(flatten=flatten)
         return data
 
     def to_json(self, path: Union[Path, str]) -> Path:
@@ -315,8 +325,7 @@ def to_json(self, path: Union[Path, str]) -> Path:
             The path to the file where the records were saved.
 
         """
-        records = list(self(with_suggestions=True, with_responses=True))
-        return JsonIO.to_json(records=records, path=path)
+        return self().to_json(path=path)
 
     def from_json(self, path: Union[Path, str]) -> List[Record]:
         """Creates a DatasetRecords object from a disk path to a JSON file.
@@ -340,8 +349,8 @@ def to_datasets(self) -> HFDataset:
             The dataset containing the records.
 
         """
-        records = list(self(with_suggestions=True, with_responses=True))
-        return HFDatasetsIO.to_datasets(records=records)
+
+        return self().to_datasets()
 
     ############################
     # Private methods
diff --git a/argilla/src/argilla/records/_io/_datasets.py b/argilla/src/argilla/records/_io/_datasets.py
index 6fb6229f09..419c36a705 100644
--- a/argilla/src/argilla/records/_io/_datasets.py
+++ b/argilla/src/argilla/records/_io/_datasets.py
@@ -12,7 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-from typing import Dict, List, Union, Optional, Type, TYPE_CHECKING
+from typing import Dict, List, Union, Optional, Type, TYPE_CHECKING, Any
 
 from argilla.records._io._generic import GenericIO
 
@@ -20,16 +20,16 @@
     from argilla.records import Record
 
 
-def _resolve_hf_datasets_type() -> Optional[Type]:
+def _resolve_hf_datasets_type() -> Optional[Type["HFDataset"]]:
     """This function resolves the `datasets.Dataset` type safely in case the datasets package is not installed.
 
     Returns:
         Optional[Type]: The Dataset class definition in case the datasets package is installed. Otherwise, None.
     """
     try:
-        from datasets import Dataset as HFDataset
+        from datasets import Dataset
 
-        return HFDataset
+        return Dataset
     except ImportError:
         return None
 
@@ -39,7 +39,7 @@ def _resolve_hf_datasets_type() -> Optional[Type]:
 
 class HFDatasetsIO:
     @staticmethod
-    def _is_hf_dataset(dataset: HFDataset) -> bool:
+    def _is_hf_dataset(dataset: Any) -> bool:
         """Check if the object is a Hugging Face dataset.
 
         Parameters:
@@ -48,26 +48,28 @@ def _is_hf_dataset(dataset: HFDataset) -> bool:
         Returns:
             bool: True if the object is a Hugging Face dataset, False otherwise.
         """
-        HFDataset = _resolve_hf_datasets_type()
-        return isinstance(dataset, HFDataset)
+        datasets_class = _resolve_hf_datasets_type()
+        if datasets_class is None:
+            return False
+        return isinstance(dataset, datasets_class)
 
     @staticmethod
-    def to_datasets(records: List["Record"]) -> HFDataset:
+    def to_datasets(records: List["Record"]) -> "HFDataset":
         """
         Export the records to a Hugging Face dataset.
 
         Returns:
             The dataset containing the records.
         """
-        HFDataset = _resolve_hf_datasets_type()
-        if HFDataset is None:
+        dataset_class = _resolve_hf_datasets_type()
+        if dataset_class is None:
             raise ImportError("Hugging Face datasets is not installed. Please install it using `pip install datasets`.")
         record_dicts = GenericIO.to_list(records, flatten=True)
-        dataset = HFDataset.from_list(record_dicts)
+        dataset = dataset_class.from_list(record_dicts)
         return dataset
 
     @staticmethod
-    def _record_dicts_from_datasets(dataset: HFDataset) -> List[Dict[str, Union[str, float, int, list]]]:
+    def _record_dicts_from_datasets(dataset: "HFDataset") -> List[Dict[str, Union[str, float, int, list]]]:
         """Creates a dictionaries from a HF dataset that can be passed to DatasetRecords.add or DatasetRecords.update.
 
         Parameters:
diff --git a/argilla/tests/integration/test_export_records.py b/argilla/tests/integration/test_export_records.py
index bffd569080..3465d7e64b 100644
--- a/argilla/tests/integration/test_export_records.py
+++ b/argilla/tests/integration/test_export_records.py
@@ -105,6 +105,37 @@ def test_export_records_list_flattened(client: Argilla, dataset: rg.Dataset):
     assert exported_records[0]["label.suggestion.score"] is None
 
 
+def test_export_record_list_with_filtered_records(client: Argilla, dataset: rg.Dataset):
+    mock_data = [
+        {
+            "text": "Hello World, how are you?",
+            "label": "positive",
+            "id": uuid.uuid4(),
+        },
+        {
+            "text": "Hello World, how are you?",
+            "label": "negative",
+            "id": uuid.uuid4(),
+        },
+        {
+            "text": "Hello World, how are you?",
+            "label": "positive",
+            "id": uuid.uuid4(),
+        },
+    ]
+    dataset.records.log(records=mock_data)
+    exported_records = dataset.records(query=rg.Query(query="hello")).to_list(flatten=True)
+    assert len(exported_records) == len(mock_data)
+    assert isinstance(exported_records, list)
+    assert isinstance(exported_records[0], dict)
+    assert isinstance(exported_records[0]["id"], str)
+    assert isinstance(exported_records[0]["text"], str)
+    assert isinstance(exported_records[0]["label.suggestion"], str)
+    assert exported_records[0]["text"] == "Hello World, how are you?"
+    assert exported_records[0]["label.suggestion"] == "positive"
+    assert exported_records[0]["label.suggestion.score"] is None
+
+
 def test_export_records_list_nested(client: Argilla, dataset: rg.Dataset):
     mock_data = [
         {