diff --git a/argilla-frontend/assets/scss/abstract/placeholders/_placeholders.scss b/argilla-frontend/assets/scss/abstract/placeholders/_placeholders.scss
index b4b87879d7..c34163ab42 100644
--- a/argilla-frontend/assets/scss/abstract/placeholders/_placeholders.scss
+++ b/argilla-frontend/assets/scss/abstract/placeholders/_placeholders.scss
@@ -108,16 +108,6 @@
   margin: 0 auto;
   padding: 4em;
 }
-%collapsable-if-metrics {
-  padding-right: calc($sidebarMenuWidth + 56px);
-  transition: padding 0.25s linear 0.2s;
-  .--metrics & {
-    @include media(">desktop") {
-      padding-right: calc($sidebarWidth + 25px);
-      transition: padding 0.25s linear;
-    }
-  }
-}
 
 %clear {
   @include font-size(13px);
diff --git a/argilla-frontend/assets/scss/abstract/variables/_variables.scss b/argilla-frontend/assets/scss/abstract/variables/_variables.scss
index 09ca4b1c31..1a37bc2a16 100644
--- a/argilla-frontend/assets/scss/abstract/variables/_variables.scss
+++ b/argilla-frontend/assets/scss/abstract/variables/_variables.scss
@@ -202,12 +202,7 @@ $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
 
 // topbar
-$topbarHeight: 56px;
-
-// sidebar
-$sidebarPanelWidth: 280px;
-$sidebarMenuWidth: 70px;
-$sidebarWidth: $sidebarPanelWidth + $sidebarMenuWidth;
+$topbarHeight: $base-space * 7;
 
 // record
 $record-reference-border-color: palette(apricot, dark);
diff --git a/argilla-frontend/components/base/base-pagination/BasePagination.spec.js b/argilla-frontend/components/base/base-pagination/BasePagination.spec.js
deleted file mode 100644
index 725a29240d..0000000000
--- a/argilla-frontend/components/base/base-pagination/BasePagination.spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BasePagination from "./BasePagination";
-import "@/plugins/plugins/filters";
-
-let wrapper = null;
-const options = {
-  propsData: {
-    totalItems: 500,
-    paginationSettings: {
-      disabledShortCutPagination: false,
-      maxRecordsLimit: 10000,
-      page: 2,
-      pageSizeOptions: [1, 10, 20, 50, 100],
-      size: 10,
-    },
-    onePage: false,
-    visiblePagesRange: 5,
-  },
-};
-beforeEach(() => {
-  wrapper = shallowMount(BasePagination, options);
-});
-
-afterEach(() => {
-  wrapper.destroy();
-});
-
-describe("BasePagination", () => {
-  it("render the component", () => {
-    expect(wrapper.is(BasePagination)).toBe(true);
-  });
-  it("emit event when previous is clicked", async () => {
-    return prevNextButtonEmition(".pagination__arrow--prev", -1);
-  });
-  it("emit event when next is clicked", async () => {
-    return prevNextButtonEmition(".pagination__arrow--next", 1);
-  });
-  it("emit event when page is clicked", async () => {
-    const page = wrapper.find(".pagination__number");
-    page.trigger("click");
-    wrapper.vm.$nextTick();
-    expect(wrapper.emitted("changePage")).toStrictEqual([
-      [Number(page.text()), wrapper.vm.paginationSettings.size],
-    ]);
-  });
-  it("should remove pagination buttons when records are 0", async () => {
-    await wrapper.setProps({
-      totalItems: 0,
-    });
-    expect(wrapper.find(".pagination").exists()).toBe(false);
-  });
-  it("should only render records number if one page is active", async () => {
-    await wrapper.setProps({
-      onePage: true,
-    });
-    expect(wrapper.find(".pagination").exists()).toBe(false);
-    expect(wrapper.find(".pagination__selector").exists()).toBe(false);
-  });
-});
-
-const prevNextButtonEmition = async (className, value) => {
-  const button = wrapper.find(className);
-  button.trigger("click");
-  wrapper.vm.$nextTick();
-  expect(wrapper.emitted("changePage")).toStrictEqual([
-    [
-      wrapper.vm.paginationSettings.page + value,
-      wrapper.vm.paginationSettings.size,
-    ],
-  ]);
-};
diff --git a/argilla-frontend/components/base/base-pagination/BasePagination.vue b/argilla-frontend/components/base/base-pagination/BasePagination.vue
deleted file mode 100644
index beb161428b..0000000000
--- a/argilla-frontend/components/base/base-pagination/BasePagination.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<!--
-  - coding=utf-8
-  - Copyright 2021-present, the Recognai S.L. team.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="pagination__container">
-    <template v-if="!onePage">
-      <div v-click-outside="closePageSizeSelector" class="pagination__selector">
-        <span class="pagination__selector__title">Records per page:</span>
-        <div class="pagination__selector__content">
-          <a href="#" @click.prevent="showOptions = !showOptions">
-            {{ paginationSize }}
-            <svgicon name="chevron-up" width="12" height="12" />
-          </a>
-          <ul v-if="showOptions">
-            <li v-for="item in availableItemsPerPage" :key="item">
-              <a href="#" @click.prevent="changePageSize(item)">{{ item }}</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div v-if="totalItems > paginationSize" class="pagination">
-        <a
-          href="#"
-          class="pagination__arrow pagination__arrow--prev"
-          :class="currentPage <= 1 ? 'is-disabled' : null"
-          @click.prevent="prevPage"
-        >
-          <svgicon name="chevron-left" width="8" height="8" /> Prev
-        </a>
-        <ul class="pagination__numbers">
-          <li v-if="totalPages > 1 && !pages.includes(1)">
-            <a
-              href="#"
-              class="pagination__number"
-              :class="currentPage === 1 ? 'is-current' : null"
-              @click.prevent="changePage(1)"
-            >
-              {{ 1 }}
-            </a>
-          </li>
-          <li v-if="pages.length && totalPages > 1 && !pages.includes(1 + 1)">
-            ...
-          </li>
-          <template v-if="totalPages > 1">
-            <li v-for="i in pages" :key="i">
-              <a
-                href="#"
-                class="pagination__number"
-                :class="currentPage === i ? 'is-current' : null"
-                @click.prevent="changePage(i)"
-              >
-                {{ i }}
-              </a>
-            </li>
-          </template>
-          <li v-if="pages.length && !pages.includes(totalPages - 1)">...</li>
-          <li v-if="!pages.includes(totalPages)">
-            <a
-              href="#"
-              class="pagination__number"
-              :class="currentPage === totalPages ? 'is-current' : null"
-              @click.prevent="changePage(totalPages)"
-            >
-              {{ totalPages }}
-            </a>
-          </li>
-        </ul>
-        <a
-          href="#"
-          class="pagination__arrow pagination__arrow--next"
-          :class="currentPage >= totalPages ? 'is-disabled' : null"
-          @click.prevent="nextPage"
-        >
-          Next <svgicon name="chevron-right" width="8" height="8" />
-        </a>
-      </div>
-    </template>
-    <div class="pagination__info">
-      <template v-if="!onePage">
-        <strong>
-          {{ currentPaginationPosition }}
-        </strong>
-        of
-      </template>
-      <span class="total-records">{{ totalItems | formatNumber }} </span>
-      records
-    </div>
-  </div>
-</template>
-
-<script>
-import "assets/icons/chevron-left";
-import "assets/icons/chevron-right";
-import "assets/icons/chevron-up";
-
-export default {
-  props: {
-    totalItems: {
-      type: Number,
-      required: true,
-    },
-    paginationSettings: {
-      type: Object,
-      required: true,
-    },
-    onePage: {
-      type: Boolean,
-      default: false,
-    },
-    visiblePagesRange: {
-      type: Number,
-      default: 5,
-      validator: function (value) {
-        return value > 1 && value % 2 != 0;
-      },
-    },
-  },
-  data() {
-    return {
-      showOptions: false,
-    };
-  },
-  computed: {
-    totalPages() {
-      return Math.ceil(this.paginableTotalItems / this.paginationSettings.size);
-    },
-    paginableTotalItems() {
-      return this.totalItems >= this.maxRecordsLimit
-        ? this.maxRecordsLimit
-        : this.totalItems;
-    },
-    paginationSize() {
-      return this.paginationSettings.size;
-    },
-    maxRecordsLimit() {
-      return this.paginationSettings.maxRecordsLimit;
-    },
-    availableItemsPerPage() {
-      return this.paginationSettings.pageSizeOptions.filter(
-        (p) => p !== this.paginationSize
-      );
-    },
-    currentPaginationPosition() {
-      return this.isSingleRecordPage
-        ? this.currentPage
-        : this.currentPaginationRange;
-    },
-    currentPaginationRange() {
-      return `${this.currentRangeFrom} - ${this.currentRangeTo}`;
-    },
-    currentRangeFrom() {
-      return this.paginationSize * this.currentPage - (this.paginationSize - 1);
-    },
-    currentRangeTo() {
-      return this.paginationSize * this.currentPage > this.totalItems
-        ? this.totalItems
-        : this.paginationSize * this.currentPage;
-    },
-    currentPage() {
-      return this.paginationSettings.page;
-    },
-    isSingleRecordPage() {
-      return this.paginationSize === 1;
-    },
-    pages() {
-      const rangeOfPages = (this.visiblePagesRange - 1) / 2;
-      let start = this.currentPage - rangeOfPages;
-      start = start > 0 ? start : 1;
-      let end = this.currentPage + rangeOfPages;
-      end = end < this.totalPages ? end : this.totalPages;
-      const pages = [];
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-      return pages;
-    },
-    formattedLimit() {
-      return this.$options.filters.formatNumber(this.maxRecordsLimit);
-    },
-    message() {
-      return `<p>
-                You cannot go through more than ${this.formattedLimit} records.
-                To explore more records, you can combine queries, filters, and sorting to reduce your search results.
-                Visit this
-                <a
-                  href="${this.$config.documentationSiteQueryDatasets}"
-                  target="_blank"
-                >
-                  guide</a
-                > for using advanced queries.
-              </p>`;
-    },
-  },
-  watch: {
-    currentPage(newValue) {
-      this.isLastPageEqualToLimitSimilaritySearch(newValue) &&
-        this.showNotification();
-    },
-  },
-  mounted() {
-    window.addEventListener("keydown", this.keyDown);
-    this.isLastPageEqualToLimitSimilaritySearch(this.currentPage) &&
-      this.showNotification();
-  },
-  destroyed() {
-    window.removeEventListener("keydown", this.keyDown);
-  },
-  methods: {
-    nextPage() {
-      if (this.currentPage < this.totalPages) {
-        this.$emit("changePage", this.currentPage + 1, this.paginationSize);
-      }
-    },
-    prevPage() {
-      if (this.currentPage > 1) {
-        this.$emit("changePage", this.currentPage - 1, this.paginationSize);
-      }
-    },
-    changePage(pageNumber) {
-      this.$emit("changePage", pageNumber, this.paginationSize);
-    },
-    changePageSize(pageSize) {
-      this.showOptions = false;
-
-      this.$emit(
-        "changePage",
-        this.paginationSize === pageSize ? this.currentPage : 1,
-        pageSize
-      );
-    },
-    closePageSizeSelector() {
-      this.showOptions = false;
-    },
-    keyDown(event) {
-      const arrowRight = event.keyCode === 39;
-      const arrowLeft = event.keyCode === 37;
-      const allowPagination =
-        !this.paginationSettings.disabledShortCutPagination &&
-        !this.isEditableAreaFocused(event);
-      if (allowPagination) {
-        if (arrowRight) {
-          this.nextPage();
-        } else if (arrowLeft) {
-          this.prevPage();
-        }
-      }
-    },
-    isEditableAreaFocused(event) {
-      return (
-        event.target.tagName?.toLowerCase() === "input" ||
-        event.target.contentEditable?.toLowerCase() === "true"
-      );
-    },
-    showNotification() {
-      this.$notification.notify({
-        message: this.message,
-        type: "warning",
-      });
-    },
-    isLastPageEqualToLimitSimilaritySearch(pageNumber) {
-      return pageNumber === this.maxRecordsLimit / this.paginationSize;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-$pagination-size: 30px;
-.pagination {
-  $self: &;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-  font-weight: 400;
-  &__container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: $sidebarMenuWidth;
-    display: flex;
-    align-items: center;
-    background: palette(grey, 800);
-    border-top: 1px solid palette(grey, 600);
-    min-height: 63px;
-    z-index: 99;
-    padding-right: 56px;
-    padding-left: 4em;
-    .--metrics & {
-      @include media(">desktop") {
-        padding-right: calc(294px + 10px);
-        transition: padding 0.1s ease-in-out;
-      }
-    }
-  }
-  &__arrow {
-    background: transparent;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: $pagination-size;
-    padding: 0 10px;
-    transition: color 200ms ease-in-out;
-    outline: none;
-    border-radius: $border-radius;
-    svg {
-      margin-top: 1px;
-    }
-    &:hover {
-      transition: all 0.3s ease-in-out;
-      background: $black-4;
-    }
-    &--next {
-      margin-left: 1em;
-      svg {
-        margin-left: 0.5em;
-      }
-    }
-    &--prev {
-      margin-right: 1em;
-      svg {
-        margin-right: 0.5em;
-      }
-    }
-    &.is-disabled {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-  }
-  &__numbers {
-    display: flex;
-    align-items: center;
-    list-style: none;
-    padding-left: 0;
-    @include font-size(14px);
-    #{$self}__number {
-      transition: all 0.3s ease-in-out;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-decoration: none;
-      min-width: $pagination-size;
-      height: $pagination-size;
-      border-radius: $border-radius;
-      margin: auto 0.5em;
-      outline: none;
-      padding: 5px;
-      &:hover {
-        transition: all 0.3s ease-in-out;
-        background: $black-4;
-      }
-      &.is-current {
-        pointer-events: none;
-        font-weight: 600;
-        background: $black-4;
-      }
-    }
-  }
-  &__selector {
-    position: relative;
-    margin-right: 3em;
-    display: flex;
-    align-items: center;
-    color: $black-54;
-    &__content {
-      position: relative;
-      & > a {
-        color: $black-54;
-        border: 1px solid palette(grey, 600);
-      }
-    }
-    &__title {
-      display: block;
-      color: $black-54;
-      margin-right: 1em;
-      @include font-size(12px);
-    }
-    ul {
-      list-style: none;
-      background: palette(white);
-      padding: 0;
-      display: block;
-      position: absolute;
-      bottom: 3em;
-      left: 0;
-      right: 0;
-      box-shadow: $shadow;
-      border-radius: $border-radius;
-      li {
-        &:first-child:hover a {
-          border-top-left-radius: $border-radius;
-          border-top-right-radius: $border-radius;
-        }
-        &:last-child:hover a {
-          border-bottom-left-radius: $border-radius;
-          border-bottom-right-radius: $border-radius;
-        }
-      }
-      a {
-        display: block;
-        border-radius: 1px;
-        margin: 2px;
-        color: $black-54;
-        &:hover {
-          background: $black-4;
-        }
-      }
-    }
-    a {
-      display: block;
-      outline: none;
-      text-decoration: none;
-      background: palette(white);
-      padding: 0.5em 1em;
-      border-radius: $border-radius;
-      .svg-icon {
-        margin-left: 1em;
-        margin-bottom: 2px;
-      }
-    }
-  }
-  &__info {
-    margin-left: auto;
-    margin-right: 0;
-    color: $black-54;
-    font-weight: 400;
-    @include font-size(13px);
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue b/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue
new file mode 100644
index 0000000000..23049fc4c2
--- /dev/null
+++ b/argilla-frontend/components/features/annotation/guidelines/AnnotationGuidelines.vue
@@ -0,0 +1,18 @@
+<template>
+  <RenderMarkdownBaseComponent
+    class="--body1 description__text"
+    :markdown="guidelines"
+  />
+</template>
+
+<script>
+export default {
+  name: "SettingsInfo",
+  props: {
+    guidelines: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
similarity index 85%
rename from argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskProgress.vue
rename to argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
index f34d6378d2..32fabd92b6 100644
--- a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskProgress.vue
+++ b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
@@ -16,23 +16,23 @@
   -->
 
 <template>
-  <div>
+  <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">{{
-        metrics.progress | percent
+        datasetMetrics.progress | percent
       }}</span>
     </div>
     <div class="metrics__numbers">
-      <span v-text="metrics.responded" />/{{ metrics.total }}
+      <span v-text="datasetMetrics.responded" />/{{ datasetMetrics.total }}
     </div>
     <BaseProgress
       re-mode="determinate"
       :multiple="true"
-      :progress="metrics.percentage.submitted"
-      :progress-secondary="metrics.percentage.discarded"
-      :progress-tertiary="metrics.percentage.draft"
+      :progress="datasetMetrics.percentage.submitted"
+      :progress-secondary="datasetMetrics.percentage.discarded"
+      :progress-tertiary="datasetMetrics.percentage.draft"
       :progress-bg="pendingColor"
       :color="submittedColor"
       :color-secondary="discardedColor"
@@ -64,11 +64,12 @@
 
 <script>
 import { RecordStatus } from "~/v1/domain/entities/record/RecordStatus";
+import { useFeedbackTaskProgressViewModel } from "./useFeedbackTaskProgressViewModel";
 
 export default {
   props: {
-    metrics: {
-      type: Object,
+    datasetId: {
+      type: String,
       required: true,
     },
   },
@@ -78,22 +79,22 @@ export default {
         {
           name: RecordStatus.pending.name,
           color: this.pendingColor,
-          progress: this.metrics.pending,
+          progress: this.datasetMetrics.pending,
         },
         {
           name: RecordStatus.draft.name,
           color: this.draftColor,
-          progress: this.metrics.draft,
+          progress: this.datasetMetrics.draft,
         },
         {
           name: RecordStatus.submitted.name,
           color: this.submittedColor,
-          progress: this.metrics.submitted,
+          progress: this.datasetMetrics.submitted,
         },
         {
           name: RecordStatus.discarded.name,
           color: this.discardedColor,
-          progress: this.metrics.discarded,
+          progress: this.datasetMetrics.discarded,
         },
       ];
     },
@@ -115,8 +116,12 @@ export default {
       return progress && this.$options.filters.formatNumber(progress);
     },
   },
+  setup(props) {
+    return useFeedbackTaskProgressViewModel(props);
+  },
 };
 </script>
+
 <style lang="scss" scoped>
 .scroll {
   max-height: calc(100vh - 270px);
diff --git a/argilla-frontend/components/features/annotation/sidebar/useFeedbackTaskProgressViewModel.ts b/argilla-frontend/components/features/annotation/progress/useFeedbackTaskProgressViewModel.ts
similarity index 100%
rename from argilla-frontend/components/features/annotation/sidebar/useFeedbackTaskProgressViewModel.ts
rename to argilla-frontend/components/features/annotation/progress/useFeedbackTaskProgressViewModel.ts
diff --git a/argilla-frontend/components/features/annotation/sidebar/HelpShortcut.vue b/argilla-frontend/components/features/annotation/shortcuts/AnnotationHelpShortcut.vue
similarity index 100%
rename from argilla-frontend/components/features/annotation/sidebar/HelpShortcut.vue
rename to argilla-frontend/components/features/annotation/shortcuts/AnnotationHelpShortcut.vue
diff --git a/argilla-frontend/components/features/annotation/sidebar/FeedbackTaskProgress.vue b/argilla-frontend/components/features/annotation/sidebar/FeedbackTaskProgress.vue
deleted file mode 100644
index fa408c7cc9..0000000000
--- a/argilla-frontend/components/features/annotation/sidebar/FeedbackTaskProgress.vue
+++ /dev/null
@@ -1,39 +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>
-  <SidebarFeedbackTaskProgress
-    v-if="datasetMetrics.hasMetrics"
-    :metrics="datasetMetrics"
-  />
-</template>
-
-<script>
-import { useFeedbackTaskProgressViewModel } from "./useFeedbackTaskProgressViewModel";
-
-export default {
-  props: {
-    datasetId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    return useFeedbackTaskProgressViewModel(props);
-  },
-};
-</script>
diff --git a/argilla-frontend/components/features/annotation/sidebar/SidebarFeedbackTaskContainer.vue b/argilla-frontend/components/features/annotation/sidebar/SidebarFeedbackTaskContainer.vue
deleted file mode 100644
index c9028957ac..0000000000
--- a/argilla-frontend/components/features/annotation/sidebar/SidebarFeedbackTaskContainer.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <div class="sidebar__container">
-    <SidebarFeedbackTaskPanel v-if="isPanelVisible" @close-panel="closePanel">
-      <HelpShortcut v-if="currentPanel === 'help-shortcut'" />
-      <FeedbackTaskProgress
-        v-else-if="currentPanel === 'metrics'"
-        :datasetId="datasetId"
-      />
-    </SidebarFeedbackTaskPanel>
-    <SidebarFeedbackTask
-      @on-click-sidebar-action="onClickSidebarAction"
-      :sidebar-items="sidebarItems"
-      :active-buttons="[currentPanel, currentMode]"
-      :expanded-component="currentPanel"
-    />
-  </div>
-</template>
-
-<script>
-import "assets/icons/progress";
-import "assets/icons/refresh";
-import "assets/icons/shortcuts";
-
-export default {
-  props: {
-    datasetId: {
-      type: String,
-      required: true,
-    },
-  },
-  data: () => ({
-    currentPanel: null,
-    currentMode: "annotate",
-    isPanelVisible: false,
-  }),
-  created() {
-    this.sidebarItems = {
-      firstGroup: {
-        buttonType: "expandable",
-        buttons: [
-          {
-            id: "metrics",
-            tooltip: this.$t("sidebar.progressTooltip"),
-            icon: "progress",
-            action: "show-metrics",
-            type: "expandable",
-            component: "FeedbackTaskProgress",
-          },
-        ],
-      },
-      secondGroup: {
-        buttonType: "default",
-        buttons: [
-          {
-            id: "refresh",
-            tooltip: this.$t("sidebar.refreshTooltip"),
-            icon: "refresh",
-            group: this.$t("refresh"),
-            type: "non-expandable",
-            action: "refresh",
-          },
-        ],
-      },
-      bottomGroup: {
-        buttonType: "expandable",
-        buttons: [
-          {
-            id: "help-shortcut",
-            tooltip: this.$t("sidebar.shortcutsTooltip"),
-            icon: "shortcuts",
-            action: "show-help",
-            type: "custom-expandable",
-            component: "HelpShortcut",
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    onClickSidebarAction(group, info) {
-      switch (group.toUpperCase()) {
-        case "FIRSTGROUP":
-          this.togglePanel(info);
-          break;
-        case "SECONDGROUP":
-          this.$emit("refresh");
-          break;
-        case "BOTTOMGROUP":
-          this.togglePanel(info);
-          break;
-        default:
-          console.warn(info);
-      }
-    },
-    togglePanel(panelContent) {
-      this.currentPanel =
-        this.currentPanel !== panelContent ? panelContent : null;
-
-      this.isPanelVisible = !!this.currentPanel;
-
-      $nuxt.$emit("on-sidebar-toggle-panel", this.isPanelVisible);
-    },
-    closePanel() {
-      this.isPanelVisible = false;
-      this.currentPanel = null;
-      $nuxt.$emit("on-sidebar-toggle-panel", null);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.sidebar {
-  &__container {
-    position: fixed;
-    display: flex;
-    right: 0;
-    z-index: 1;
-    pointer-events: none;
-    @include media("<=tablet") {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/IconButton.vue b/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/IconButton.vue
deleted file mode 100644
index bcdc1caa6f..0000000000
--- a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/IconButton.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <BaseButton
-    class="icon-button"
-    :class="sidebarButtonClass"
-    :data-title="tooltip"
-    @on-click="onClickIcon"
-  >
-    <i
-      :key="showBadge"
-      class="icon-button__icon"
-      v-badge="{
-        showBadge: showBadge,
-        verticalPosition: badgeVerticalPosition,
-        horizontalPosition: badgeHorizontalPosition,
-        borderColor: badgeBorderColor,
-        size: badgeSize,
-      }"
-    >
-      <svgicon :name="icon" :width="iconSize" :height="iconSize" />
-    </i>
-  </BaseButton>
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    iconSize: {
-      type: String,
-      default: "28",
-    },
-    tooltip: {
-      type: String,
-    },
-    showBadge: {
-      type: Boolean,
-      default: false,
-    },
-    badgeVerticalPosition: {
-      type: String,
-      default: "top",
-    },
-    badgeHorizontalPosition: {
-      type: String,
-      default: "right",
-    },
-    badgeSize: {
-      type: String,
-      default: "8px",
-    },
-    badgeBorderColor: {
-      type: String,
-    },
-    buttonType: {
-      type: String,
-    },
-    isButtonActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    sidebarButtonClass() {
-      return [this.buttonTypeClass, this.buttonStateClass];
-    },
-    buttonTypeClass() {
-      return this.buttonType;
-    },
-    buttonStateClass() {
-      return this.isButtonActive ? "active" : null;
-    },
-  },
-  methods: {
-    onClickIcon() {
-      this.$emit("on-button-action", this.id);
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.icon-button {
-  @include resetButtonStyles();
-  width: 100%;
-  display: flex;
-  padding: 0;
-  overflow: visible;
-  border-radius: 0;
-  &__icon {
-    display: block;
-    text-align: center;
-    margin: auto;
-    box-sizing: content-box;
-    .svg-icon {
-      padding: 0.5em;
-      fill: palette(grey, 100);
-    }
-  }
-  &.non-expandable {
-    &:hover {
-      .svg-icon {
-        background: palette(grey, 600);
-        border-radius: $border-radius;
-      }
-    }
-  }
-  &.active {
-    &.non-expandable {
-      .svg-icon {
-        background: palette(grey, 600);
-        border-radius: $border-radius;
-      }
-    }
-    &.expandable {
-      position: relative;
-      transition: none;
-      .svg-icon {
-        animation: move-horizontal 0.2s ease-in-out 0.2s;
-        animation-fill-mode: backwards;
-      }
-      &.active {
-        border-left: 2px solid palette(grey, 100);
-      }
-    }
-  }
-}
-
-@keyframes move-horizontal {
-  0% {
-    transform: translateX(0.3em);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-.icon-button[data-title] {
-  position: relative;
-  @extend %has-tooltip--left;
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTask.vue b/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTask.vue
deleted file mode 100644
index a226736516..0000000000
--- a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTask.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<!--
-  - coding=utf-8
-  - Copyright 2021-present, the Recognai S.L. team.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="sidebar" :class="expandedComponent && '--expanded'">
-    <SidebarFeedbackTaskButtonGroup
-      v-for="group in sidebarGroups"
-      :key="group"
-      :group-name="group"
-      :group-button-type="getButtonType(group)"
-      :groupItems="filteredSidebarItemsByGroup(group)"
-      :active-buttons="activeButtons"
-      @on-click-sidebar-action="onClickSidebarAction"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    sidebarItems: {
-      type: Object,
-      required: true,
-    },
-    activeButtons: {
-      type: Array,
-      required: true,
-    },
-    expandedComponent: {
-      type: String,
-      default: null,
-    },
-  },
-  computed: {
-    sidebarGroups() {
-      return Object.keys(this.sidebarItems);
-    },
-  },
-  methods: {
-    filteredSidebarItemsByGroup(group) {
-      return this.sidebarItems[group].buttons;
-    },
-    getButtonType(group) {
-      return this.sidebarItems[group].buttonType;
-    },
-    onClickSidebarAction(group, id) {
-      this.$emit("on-click-sidebar-action", group, id);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-$sidebar-button-size: 45px;
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-  top: 0;
-  width: $sidebar-button-size;
-  min-width: $sidebar-button-size;
-  min-height: calc(100vh - $topbarHeight);
-  min-width: $sidebarMenuWidth;
-  background: palette(grey, 700);
-  border-left: 1px solid $black-10;
-  box-shadow: none;
-  pointer-events: all;
-  transition: box-shadow 0.2s ease-in-out 0.4s;
-  // TODO - Only for MVP
-  padding-top: $base-space * 2;
-  &.--expanded {
-    box-shadow: inset 1px 1px 5px -2px #c7c7c7;
-    transition: box-shadow 0.2s ease-in-out;
-  }
-  p {
-    text-align: center;
-    font-weight: 600;
-    @include font-size(12px);
-    margin-bottom: 0.5em;
-  }
-  a {
-    position: relative;
-    display: block;
-    outline: none;
-  }
-  &__info {
-    position: relative;
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskButtonGroup.vue b/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskButtonGroup.vue
deleted file mode 100644
index 755342a774..0000000000
--- a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskButtonGroup.vue
+++ /dev/null
@@ -1,88 +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>
-  <span class="sidebar__info" :class="groupName">
-    <IconButton
-      v-for="{ id, icon, tooltip, type } in groupItems"
-      :id="id"
-      :key="id"
-      :icon="icon"
-      :tooltip="tooltip"
-      :class="type"
-      :button-type="groupButtonType"
-      :is-button-active="checkIfButtonIsActive(id)"
-      @on-button-action="onAction(id)"
-    />
-  </span>
-</template>
-
-<script>
-export default {
-  props: {
-    groupItems: {
-      type: Array,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
-    groupButtonType: {
-      type: String,
-      required: true,
-    },
-    activeButtons: {
-      type: Array,
-      required: true,
-    },
-  },
-  methods: {
-    checkIfButtonIsActive(id) {
-      return this.activeButtons.includes(id);
-    },
-    onAction(id) {
-      this.$emit("on-click-sidebar-action", this.groupName, id);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.sidebar {
-  &__info {
-    position: relative;
-    &__title {
-      margin-bottom: 0.5em;
-      text-align: center;
-      font-weight: 600;
-      @include font-size(12px);
-      text-transform: capitalize;
-    }
-    &.bottomGroup {
-      margin-top: auto;
-      margin-bottom: $base-space * 2;
-    }
-    .custom-expandable :deep(svg) {
-      fill: palette(purple, 200);
-      border-radius: $border-radius;
-      max-height: 20px;
-      max-width: 20px;
-    }
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskPanel.vue b/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskPanel.vue
deleted file mode 100644
index 05065f7a28..0000000000
--- a/argilla-frontend/components/features/annotation/sidebar/sidebar-feedback-task/SidebarFeedbackTaskPanel.vue
+++ /dev/null
@@ -1,154 +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="show-panel" appear>
-    <aside class="sidebar">
-      <div class="sidebar__content">
-        <base-button
-          @click.prevent="closePanel"
-          :class="{ 'zoom-out': animated }"
-          @animationend="animated = false"
-          class="sidebar__close-button"
-        >
-          <svgicon name="chevron-right" width="12" height="12"></svgicon>
-        </base-button>
-        <transition name="fade" appear duration="500" mode="out-in">
-          <slot></slot>
-        </transition>
-      </div>
-    </aside>
-  </transition>
-</template>
-<script>
-import "assets/icons/chevron-right";
-export default {
-  data: () => {
-    return {
-      animated: false,
-    };
-  },
-  methods: {
-    closePanel() {
-      this.$emit("close-panel");
-      this.animated = true;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.sidebar {
-  $this: &;
-  width: $sidebarPanelWidth;
-  position: relative;
-  top: 0;
-  right: 0;
-  background: palette(grey, 700);
-  padding: 1em 1.5em 0 1.5em;
-  border-left: 1px solid palette(grey, 600);
-  overflow: visible;
-  pointer-events: all;
-  &:hover {
-    #{$this}__close-button:not(.zoom-out) {
-      opacity: 1;
-      transform: scale(1);
-      transition: transform 0.15s ease-in-out;
-    }
-  }
-  &__close-button {
-    position: absolute;
-    left: -2.5em;
-    top: 1px;
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    background: palette(grey, 600);
-    opacity: 0;
-    outline: 0;
-    border-radius: $border-radius-s;
-    transform: scale(0);
-    &.zoom-out {
-      opacity: 1;
-      animation: zoom-out 0.3s ease-out forwards;
-    }
-    .svg-icon {
-      color: palette(blue, 300);
-    }
-  }
-  &__content {
-    display: block;
-    position: relative;
-    color: $black-54;
-  }
-  &__content {
-    @include font-size(13px);
-    &:first-child {
-      padding-top: 0;
-    }
-  }
-}
-
-.show-panel-enter-active {
-  animation: slide 0.4s ease-out;
-}
-.show-panel-leave-active {
-  animation: slide 0.4s reverse ease-in;
-}
-.show-panel-enter-active {
-  .sidebar__content {
-    opacity: 0;
-    animation: fade 0.2s ease-out 0.3s;
-  }
-}
-.show-panel-leave-active {
-  .sidebar__content {
-    opacity: 0;
-    animation: fade 0.1s reverse ease-in;
-  }
-}
-@keyframes slide {
-  0% {
-    right: -$sidebarPanelWidth + 1px;
-  }
-  100% {
-    right: 0;
-  }
-}
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes zoom-out {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/datasets/DatasetsTable.vue b/argilla-frontend/components/features/datasets/DatasetsTable.vue
index fecfc89ff1..bc3e363da7 100644
--- a/argilla-frontend/components/features/datasets/DatasetsTable.vue
+++ b/argilla-frontend/components/features/datasets/DatasetsTable.vue
@@ -209,7 +209,7 @@ export default {
 .container {
   display: flex;
   justify-content: center;
-  padding: 0 calc($sidebarMenuWidth + 4em) 0 4em;
+  padding: 0 4em;
   @include media("<=tablet") {
     padding: 0 $base-space * 2;
   }
diff --git a/argilla-frontend/components/features/global/sidebar/SidebarButton.vue b/argilla-frontend/components/features/global/sidebar/SidebarButton.vue
deleted file mode 100644
index 1ead6582b1..0000000000
--- a/argilla-frontend/components/features/global/sidebar/SidebarButton.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <button
-    class="sidebar-button"
-    :class="sidebarButtonClass"
-    :data-title="tooltip"
-    @click="$emit('button-action', id)"
-  >
-    <svgicon :name="icon"></svgicon>
-  </button>
-</template>
-
-<script>
-import "assets/icons/refresh";
-import "assets/icons/exploration";
-import "assets/icons/hand-labeling";
-import "assets/icons/weak-labeling";
-import "assets/icons/progress";
-import "assets/icons/stats";
-export default {
-  props: {
-    activeView: {
-      type: Array,
-      default: () => [],
-    },
-    tooltip: {
-      type: String,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    buttonType: {
-      type: String,
-      validator: (value) => {
-        return ["Mode", "Metrics", "Refresh"].includes(value);
-      },
-    },
-  },
-  computed: {
-    isActive() {
-      return this.activeView.includes(this.id);
-    },
-    sidebarButtonClass() {
-      return [this.buttonTypeClass, this.buttonStateClass];
-    },
-    buttonTypeClass() {
-      return this.buttonType?.toLowerCase();
-    },
-    buttonStateClass() {
-      return this.isActive ? "active" : null;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.sidebar-button {
-  @include resetButtonStyles();
-  width: 100%;
-  display: flex;
-  margin-bottom: 0.5em;
-  &.mode {
-    &:hover {
-      .svg-icon {
-        background: palette(grey, 600);
-        border-radius: $border-radius;
-      }
-    }
-  }
-  &.active {
-    &.mode {
-      .svg-icon {
-        background: palette(grey, 600);
-        border-radius: $border-radius;
-      }
-    }
-    &.metrics {
-      position: relative;
-      .svg-icon {
-        animation: move-horizontal 0.2s ease-in-out 0.2s;
-        animation-fill-mode: backwards;
-      }
-      &.active {
-        border-left: 2px solid palette(grey, 100);
-      }
-    }
-  }
-  &:hover {
-    cursor: pointer;
-  }
-}
-.svg-icon {
-  display: block;
-  text-align: center;
-  margin: auto;
-  width: 28px;
-  height: 28px;
-  fill: palette(grey, 100);
-  padding: 0.5em;
-  box-sizing: content-box;
-}
-
-@keyframes move-horizontal {
-  0% {
-    transform: translateX(0.3em);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-</style>
diff --git a/argilla-frontend/components/features/global/sidebar/SidebarMenu.vue b/argilla-frontend/components/features/global/sidebar/SidebarMenu.vue
deleted file mode 100644
index 15cd373d5b..0000000000
--- a/argilla-frontend/components/features/global/sidebar/SidebarMenu.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<!--
-  - coding=utf-8
-  - Copyright 2021-present, the Recognai S.L. team.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="sidebar">
-    <div v-for="group in sidebarGroups" :key="group" class="sidebar__info">
-      <p>{{ group }}</p>
-      <sidebar-button
-        v-for="{ id, icon, tooltip, action } in filteredSidebarItemsByGroup(
-          group
-        )"
-        :id="id"
-        :key="id"
-        :active-view="[viewMode, currentMetric]"
-        :icon="icon"
-        :tooltip="tooltip"
-        :button-type="group"
-        @button-action="onAction(action, id)"
-      />
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    dataset: {
-      type: Object,
-      requried: false,
-      default: undefined,
-    },
-    sidebarItems: {
-      type: Array,
-    },
-    currentMetric: {
-      type: String,
-    },
-  },
-  computed: {
-    filteredSidebarItems() {
-      return this.sidebarItems.filter(
-        (item) =>
-          item.group !== "Metrics" || this.metricsByViewMode.includes(item.id)
-      );
-    },
-    metricsByViewMode() {
-      return this.sidebarItems.find(
-        (item) => item.id === this.dataset.viewSettings.viewMode
-      ).relatedMetrics;
-    },
-    sidebarGroups() {
-      const groups = [
-        ...new Set(this.sidebarItems.map((button) => button.group)),
-      ];
-      return groups;
-    },
-    viewMode() {
-      if (this.isDatasetView) {
-        return this.dataset.viewSettings.viewMode;
-      }
-      return undefined;
-    },
-    isDatasetView() {
-      return this.dataset !== undefined;
-    },
-  },
-  methods: {
-    filteredSidebarItemsByGroup(group) {
-      return this.filteredSidebarItems.filter(
-        (button) => button.group === group
-      );
-    },
-    onAction(action, id) {
-      this.$emit(action, id);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-  top: 0;
-  width: 45px;
-  min-height: calc(100vh - $topbarHeight);
-  min-width: $sidebarMenuWidth;
-  background: palette(grey, 700);
-  box-shadow: none;
-  pointer-events: all;
-  transition: box-shadow 0.2s ease-in-out 0.4s;
-  @include media("<=tablet") {
-    display: none;
-  }
-  .--metrics & {
-    box-shadow: inset 1px 1px 5px -2px #c7c7c7;
-    transition: box-shadow 0.2s ease-in-out;
-  }
-  p {
-    text-align: center;
-    font-weight: 600;
-    @include font-size(12px);
-    margin-bottom: 0.5em;
-  }
-  a {
-    position: relative;
-    display: block;
-    outline: none;
-  }
-  &__info {
-    position: relative;
-  }
-}
-button[data-title] {
-  position: relative;
-  @extend %has-tooltip--left;
-}
-</style>
diff --git a/argilla-frontend/components/features/global/sidebar/SidebarPanel.vue b/argilla-frontend/components/features/global/sidebar/SidebarPanel.vue
deleted file mode 100644
index 8587023223..0000000000
--- a/argilla-frontend/components/features/global/sidebar/SidebarPanel.vue
+++ /dev/null
@@ -1,185 +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>
-  <aside class="sidebar">
-    <div class="sidebar__wrapper">
-      <div class="sidebar__content">
-        <a
-          href="#"
-          @click.prevent="closePanel"
-          :class="{ 'zoom-out': animated }"
-          @animationend="animated = false"
-          class="sidebar__close-button"
-          ><svgicon name="chevron-right" width="12" height="12"></svgicon
-        ></a>
-        <slot></slot>
-      </div>
-    </div>
-  </aside>
-</template>
-<script>
-import "assets/icons/chevron-right";
-export default {
-  data: () => {
-    return {
-      animated: false,
-    };
-  },
-  props: {
-    dataset: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    closePanel() {
-      this.$emit("close-panel");
-      this.animated = true;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.sidebar {
-  $this: &;
-  width: $sidebarPanelWidth;
-  position: relative;
-  top: 0;
-  right: -$sidebarPanelWidth + 1px;
-  background: palette(grey, 700);
-  padding: 1em 1.5em;
-  transition: right 0.25s linear 0.2s;
-  border-left: 1px solid palette(grey, 600);
-  &:hover {
-    #{$this}__close-button:not(.zoom-out) {
-      opacity: 1;
-      transform: scale(1);
-      transition: transform 0.15s ease-in-out;
-    }
-  }
-  &__close-button {
-    position: absolute;
-    left: -2.5em;
-    top: 1px;
-    border-radius: $border-radius-s;
-    background: palette(grey, 600);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    transform: scale(0);
-    overflow: hidden;
-    opacity: 0;
-    outline: 0;
-    &.zoom-out {
-      opacity: 1;
-      animation: zoom-out 0.3s ease-out forwards;
-    }
-    .svg-icon {
-      color: palette(blue, 300);
-    }
-  }
-  &__content {
-    display: block;
-    position: relative;
-    opacity: 0;
-    transition: opacity 0.1s ease-out 0.6s;
-    color: $black-54;
-  }
-  &.visible {
-    overflow: visible;
-    right: 0;
-    transition: right 0.25s linear;
-    .sidebar__content {
-      transition: opacity 0.1s ease-in-out 0.2s;
-      opacity: 1;
-    }
-  }
-  @include media(">desktop") {
-    margin-left: 1em;
-    display: block !important;
-    right: -$sidebarPanelWidth + 1px;
-  }
-  &__content {
-    @include font-size(13px);
-    &:first-child {
-      padding-top: 0;
-    }
-  }
-  :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;
-      li {
-        display: flex;
-        align-items: center;
-        margin-bottom: $base-space;
-        @include font-size(13px);
-      }
-      &__name {
-        display: block;
-        width: calc(100% - 40px);
-        hyphens: auto;
-        word-break: break-word;
-      }
-      &__counter {
-        margin-right: 0;
-        margin-left: auto;
-      }
-    }
-  }
-}
-
-@keyframes zoom-out {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-</style>
diff --git a/argilla-frontend/layouts/AnnotationPage.vue b/argilla-frontend/layouts/AnnotationPage.vue
new file mode 100644
index 0000000000..cd26301d83
--- /dev/null
+++ b/argilla-frontend/layouts/AnnotationPage.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="layout">
+    <div class="header-area">
+      <slot name="header">here is the header</slot>
+    </div>
+    <div class="center-area">
+      <slot name="center">here is the center content</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AnnotationPagesLayout",
+};
+</script>
+
+<style lang="scss" scoped>
+$gap-width: $base-space * 2;
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  grid-template-areas:
+    "header"
+    "center";
+  height: 100vh;
+  transition: 0.4s ease-in-out;
+  @include media("<desktop") {
+    height: 100svh;
+  }
+}
+
+.header-area {
+  grid-area: header;
+}
+.center-area {
+  grid-area: center;
+  min-width: 0;
+  @include media("<desktop") {
+    min-height: 0;
+  }
+}
+</style>
diff --git a/argilla-frontend/layouts/HeaderAndTopAndOneColumn.vue b/argilla-frontend/layouts/HeaderAndTopAndOneColumn.vue
deleted file mode 100644
index 6c1a600d18..0000000000
--- a/argilla-frontend/layouts/HeaderAndTopAndOneColumn.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div class="layout" :class="layoutClass">
-    <div class="header-area">
-      <slot name="header">here is the header</slot>
-    </div>
-    <div class="sidebar-area">
-      <slot name="sidebar-right">here is the sidebar content left</slot>
-    </div>
-    <div class="center-area">
-      <slot name="center">here is the center content</slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HeaderAndTopAndOneColumnsLayout",
-  data: () => {
-    return {
-      showPanel: false,
-    };
-  },
-  computed: {
-    layoutClass() {
-      return this.showPanel ? "--panel" : null;
-    },
-  },
-  created() {
-    this.$nuxt.$on("on-sidebar-toggle-panel", (value) => {
-      this.showPanel = value;
-    });
-  },
-  beforeDestroy() {
-    this.$nuxt.$off("on-sidebar-toggle-panel");
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-$gap-width: $base-space * 2;
-.layout {
-  display: grid;
-  grid-template-columns: 1fr $sidebarMenuWidth;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
-  grid-template-areas:
-    "header header"
-    "center sidebar";
-  height: 100vh;
-  transition: 0.4s ease-in-out;
-  @include media("<desktop") {
-    height: 100svh;
-    grid-template-areas:
-      "header header"
-      "center center";
-  }
-  &.--panel {
-    @include media(">desktop") {
-      grid-template-columns: 1fr $sidebarWidth;
-      transition: 0.4s ease-out;
-    }
-  }
-}
-
-.header-area {
-  grid-area: header;
-}
-.sidebar-area {
-  grid-area: sidebar;
-}
-.center-area {
-  grid-area: center;
-  min-width: 0;
-  @include media("<desktop") {
-    min-height: 0;
-  }
-}
-</style>
diff --git a/argilla-frontend/pages/dataset/_id/annotation-mode/index.component.spec.js b/argilla-frontend/pages/dataset/_id/annotation-mode/index.component.spec.js
index 22dd3f3326..8e8a95402c 100644
--- a/argilla-frontend/pages/dataset/_id/annotation-mode/index.component.spec.js
+++ b/argilla-frontend/pages/dataset/_id/annotation-mode/index.component.spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import AnnotationModePage from "./index";
-import HeaderAndTopAndOneColumn from "@/layouts/HeaderAndTopAndOneColumn";
+import AnnotationPage from "@/layouts/AnnotationPage";
 import { setActivePinia, createPinia } from "pinia";
 import { GetDatasetByIdUseCase } from "@/v1/domain/usecases/get-dataset-by-id-use-case";
 import { useResolveMock } from "~/v1/di/__mocks__/useResolveMock";
@@ -52,9 +52,7 @@ describe("AnnotationModePage", () => {
 
     expect(wrapper.is(AnnotationModePage)).toBe(true);
 
-    const headerComponentWrapper = wrapper.findComponent(
-      HeaderAndTopAndOneColumn
-    );
+    const headerComponentWrapper = wrapper.findComponent(AnnotationPage);
 
     expect(headerComponentWrapper.exists()).toBeTruthy();
   });
@@ -85,9 +83,7 @@ describe("AnnotationModePage", () => {
     const wrapper = shallowMount(AnnotationModePage, options);
 
     expect(wrapper.is(AnnotationModePage)).toBe(true);
-    const headerComponentWrapper = wrapper.findComponent(
-      HeaderAndTopAndOneColumn
-    );
+    const headerComponentWrapper = wrapper.findComponent(AnnotationPage);
 
     expect(headerComponentWrapper.exists()).toBeTruthy();
   });
diff --git a/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue b/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue
index ca6e8cd9d6..840a5eb39f 100644
--- a/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue
+++ b/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <BaseLoading v-if="isLoadingDataset" />
-    <HeaderAndTopAndOneColumn :key="refreshKey">
+    <AnnotationPage>
       <template v-slot:header>
         <HeaderFeedbackTask
           :key="datasetId"
@@ -27,42 +27,32 @@
           />
         </BaseModal>
       </template>
-      <template v-slot:sidebar-right>
-        <SidebarFeedbackTaskContainer
-          :datasetId="datasetId"
-          @refresh="refresh()"
-        />
-      </template>
       <template v-slot:center>
         <PersistentStorageBanner />
         <RecordFeedbackTaskAndQuestionnaire :recordCriteria="recordCriteria" />
       </template>
-    </HeaderAndTopAndOneColumn>
+    </AnnotationPage>
   </div>
 </template>
 
 <script>
-import HeaderAndTopAndOneColumn from "@/layouts/HeaderAndTopAndOneColumn";
+import AnnotationPage from "@/layouts/AnnotationPage";
 import { useAnnotationModeViewModel } from "./useAnnotationModeViewModel";
 
 export default {
   name: "DatasetPage",
   components: {
-    HeaderAndTopAndOneColumn,
+    AnnotationPage,
   },
   data() {
     return {
       visibleTrainModal: false,
-      refreshKey: 0,
     };
   },
   methods: {
     showTrainModal(value) {
       this.visibleTrainModal = value;
     },
-    refresh() {
-      this.refreshKey += 1;
-    },
   },
   watch: {
     "recordCriteria.committed"() {
diff --git a/argilla-frontend/pages/datasets/index.vue b/argilla-frontend/pages/datasets/index.vue
index 52574d7664..d8d3bd1744 100644
--- a/argilla-frontend/pages/datasets/index.vue
+++ b/argilla-frontend/pages/datasets/index.vue
@@ -34,19 +34,6 @@
           :datasets="datasets.datasets"
         />
       </div>
-      <sidebar-menu
-        class="home__sidebar"
-        @refresh="$fetch"
-        :sidebar-items="[
-          {
-            id: 'refresh',
-            tooltip: $t('sidebar.refreshTooltip'),
-            icon: 'refresh',
-            group: $t('refresh'),
-            action: 'refresh',
-          },
-        ]"
-      />
     </div>
   </div>
 </template>
@@ -79,17 +66,10 @@ export default {
       max-height: 100svh;
     }
   }
-  &__sidebar.sidebar {
-    position: fixed;
-    top: 56px;
-    right: 0;
-    border-left: 1px solid palette(grey, 600);
-  }
   &__header {
     min-height: $topbarHeight;
   }
   &__banner {
-    margin-right: $sidebarMenuWidth;
     width: auto;
   }
   &__table {
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index b7befb6097..636969e00d 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -18,11 +18,6 @@ export default {
   refresh: "Refresh",
   typeYourText: "Type your text",
   all: "Alle",
-  sidebar: {
-    progressTooltip: "Fortschritt",
-    refreshTooltip: "Aktualisieren",
-    shortcutsTooltip: "Tastenkürzel",
-  },
   title: "Titel",
   description: "Beschreibung",
   labels: "Labels",
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index 5d87645f84..6d1207a8e0 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -18,11 +18,6 @@ export default {
   refresh: "Refresh",
   typeYourText: "Type your text",
   all: "All",
-  sidebar: {
-    progressTooltip: "Progress",
-    refreshTooltip: "Refresh",
-    shortcutsTooltip: "Shortcuts",
-  },
   value: "Value",
   title: "Title",
   description: "Description",
diff --git a/argilla-sdk/docs/scripts/gen_changelog.py b/argilla-sdk/docs/scripts/gen_changelog.py
new file mode 100644
index 0000000000..14792149bc
--- /dev/null
+++ b/argilla-sdk/docs/scripts/gen_changelog.py
@@ -0,0 +1,47 @@
+# Copyright 2024-present, Argilla, Inc.
+#
+# 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.
+
+import os
+
+import requests
+import base64
+import mkdocs_gen_files
+
+
+REPOSITORY = "argilla-io/argilla"
+CHANGELOG_PATH = "argilla/CHANGELOG.md"
+RETRIEVED_BRANCH = "develop"
+
+DATA_PATH = "community/changelog.md"
+
+GITHUB_ACCESS_TOKEN = os.environ["GITHUB_ACCESS_TOKEN"]
+
+
+def fetch_file_from_github(repository, changelog_path, branch, auth_token):
+    headers = {"Authorization": f"Bearer {auth_token}", "Accept": "application/vnd.github.v3+json"}
+
+    owner, repo_name = repository.split("/")
+    changelog_url = f"https://api.github.com/repos/{owner}/{repo_name}/contents/{changelog_path}?ref={branch}"
+
+    print(f"Fetching CHANGELOG.md from {changelog_url}...")
+    response = requests.get(changelog_url, headers=headers)
+
+    content = base64.b64decode(response.json()["content"]).decode("utf-8")
+
+    return content
+
+
+with mkdocs_gen_files.open(DATA_PATH, "w") as f:
+    content = fetch_file_from_github(REPOSITORY, CHANGELOG_PATH, RETRIEVED_BRANCH, GITHUB_ACCESS_TOKEN)
+    f.write(content)
diff --git a/argilla-sdk/mkdocs.yml b/argilla-sdk/mkdocs.yml
index 2e909eb1ca..4dccc15382 100644
--- a/argilla-sdk/mkdocs.yml
+++ b/argilla-sdk/mkdocs.yml
@@ -101,10 +101,11 @@ markdown_extensions:
 plugins:
   - search
   - open-in-new-tab
-  # - gen-files:
-  #     scripts:
-  #       - docs/scripts/gen_popular_issues.py
-  #       - docs/scripts/gen_ref_pages.py
+  - gen-files:
+      scripts:
+        - docs/scripts/gen_changelog.py
+        - docs/scripts/gen_popular_issues.py
+        # - docs/scripts/gen_ref_pages.py
   - literate-nav:
       nav_file: SUMMARY.md
   - section-index
@@ -145,6 +146,7 @@ nav:
   - Community:
     - community/index.md
     - How to contribute?: community/contributor.md
-    # - Issue dashboard: community/popular_issues.md
+    - Issue dashboard: community/popular_issues.md
+    - Changelog: community/changelog.md
   - UI Demo ↗:
     - https://demo.argilla.io/sign-in?auth=ZGVtbzoxMjM0NTY3OA==
\ No newline at end of file