diff --git a/.github/workflows/argilla-frontend.build-push-dev-frontend-docker.yml b/.github/workflows/argilla-frontend.build-push-dev-frontend-docker.yml
index d1c110a615..8f43c5cd93 100644
--- a/.github/workflows/argilla-frontend.build-push-dev-frontend-docker.yml
+++ b/.github/workflows/argilla-frontend.build-push-dev-frontend-docker.yml
@@ -62,8 +62,8 @@ jobs:
 
       - name: Build Frontend
         run: |
-            npm install
-            npm run build
+          npm install
+          npm run build
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
@@ -91,7 +91,7 @@ jobs:
       # Authenticate in GCP using Workload Identity Federation, so we can push the Docker image to the Google Cloud Artifact Registry
       - name: Authenticate to Google Cloud
         id: google-auth
-        uses: 'google-github-actions/auth@v1'
+        uses: "google-github-actions/auth@v1"
         with:
           token_format: access_token
           workload_identity_provider: ${{ secrets.GOOGLE_CLOUD_WIP }}
diff --git a/.github/workflows/argilla-frontend.deploy-environment.yml b/.github/workflows/argilla-frontend.deploy-environment.yml
index 3e52d0c088..34aecac033 100644
--- a/.github/workflows/argilla-frontend.deploy-environment.yml
+++ b/.github/workflows/argilla-frontend.deploy-environment.yml
@@ -1,7 +1,6 @@
 name: Deploy Argilla environment
 
 on:
-
   workflow_dispatch:
     inputs:
       image-name:
diff --git a/.github/workflows/argilla-frontend.yml b/.github/workflows/argilla-frontend.yml
index 91cf387bdf..3c3bdba738 100644
--- a/.github/workflows/argilla-frontend.yml
+++ b/.github/workflows/argilla-frontend.yml
@@ -11,6 +11,11 @@ on:
     paths:
       - "argilla-frontend/**"
 
+permissions:
+  contents: read
+  id-token: write
+  pull-requests: write
+
 jobs:
   build:
     name: Build argilla-frontend
diff --git a/.github/workflows/argilla-server.yml b/.github/workflows/argilla-server.yml
index 6e9e7c5b04..6952ff8906 100644
--- a/.github/workflows/argilla-server.yml
+++ b/.github/workflows/argilla-server.yml
@@ -17,6 +17,9 @@ on:
     paths:
       - "argilla-server/**"
 
+permissions:
+  id-token: write
+
 jobs:
   build:
     name: Build `argilla-server` package
diff --git a/.github/workflows/argilla.yml b/.github/workflows/argilla.yml
index ea15b5f045..413a943982 100644
--- a/.github/workflows/argilla.yml
+++ b/.github/workflows/argilla.yml
@@ -17,6 +17,9 @@ on:
     paths:
       - "argilla/**"
 
+permissions:
+  id-token: write
+
 jobs:
   build:
     services:
@@ -85,8 +88,6 @@ jobs:
       # contents: read
       # IMPORTANT: this permission is mandatory for trusted publishing on PyPI
       id-token: write
-      # This permission is needed for creating tags
-      contents: write
 
     needs:
       - build
diff --git a/.github/workflows/close-inactive-issues-bot.yml b/.github/workflows/close-inactive-issues-bot.yml
index e61f938830..fa43996511 100644
--- a/.github/workflows/close-inactive-issues-bot.yml
+++ b/.github/workflows/close-inactive-issues-bot.yml
@@ -3,6 +3,10 @@ on:
   schedule:
     - cron: "30 1 * * *"
 
+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
   close-issues:
     runs-on: ubuntu-latest
diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md
index c8e1d4f904..40cc59bc36 100644
--- a/argilla-frontend/CHANGELOG.md
+++ b/argilla-frontend/CHANGELOG.md
@@ -18,19 +18,24 @@ These are the section headers that we use:
 
 ## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)
 
+### Added
+
+- Added new dataset configurator to import datasets from Hugging Face using Argilla UI. ([#5532](https://github.com/argilla-io/argilla/pull/5532))
+
 ### Fixed
-- Refine German translations and update non-localized UI elements [#5632](https://github.com/argilla-io/argilla/pull/5632)
+
+- Refine German translations and update non-localized UI elements. ([#5632](https://github.com/argilla-io/argilla/pull/5632))
 
 ## [2.3.0](https://github.com/argilla-io/argilla/compare/v2.2.0...v2.3.0)
 
 ### Added
 
-- Added new field `CustomField` [#5462](https://github.com/argilla-io/argilla/pull/5462)
+- Added new field `CustomField`. ([#5462](https://github.com/argilla-io/argilla/pull/5462))
 
 ### Fixed
 
-- Fix autofill form on sign-in page [#5522](https://github.com/argilla-io/argilla/pull/5522)
-- Support copy on clipboard for no secure context [#5535](https://github.com/argilla-io/argilla/pull/5535)
+- Fix autofill form on sign-in page. ([#5522](https://github.com/argilla-io/argilla/pull/5522))
+- Support copy on clipboard for no secure context. ([#5535](https://github.com/argilla-io/argilla/pull/5535))
 
 ## [2.2.0](https://github.com/argilla-io/argilla/compare/v2.1.0...v2.2.0)
 
diff --git a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
index be999a18fb..449900e8d1 100644
--- a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
+++ b/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue
@@ -2,9 +2,9 @@
   <div
     class="panel"
     :class="[
-    !isExpanded ? '--collapsed' : undefined,
-    hideOnDesktop ? '--mobile' : undefined,
-  ]"
+      !isExpanded ? '--collapsed' : undefined,
+      hideOnDesktop ? '--mobile' : undefined,
+    ]"
   >
     <BaseButton
       class="panel__header"
diff --git a/argilla-frontend/components/base/base-input/BaseInput.vue b/argilla-frontend/components/base/base-input/BaseInput.vue
index 0ff4e9a522..a87b7d6c38 100644
--- a/argilla-frontend/components/base/base-input/BaseInput.vue
+++ b/argilla-frontend/components/base/base-input/BaseInput.vue
@@ -46,6 +46,10 @@ export default {
       type: String,
       default: "text",
     },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -66,7 +70,9 @@ export default {
       this.setParentPlaceholder();
       this.handleMaxLength();
       this.updateValues();
-      this.$refs.input.focus();
+      if (this.autofocus) {
+        this.$refs.input.focus();
+      }
     });
   },
 };
diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
index ed9eb83abc..cda4e92796 100644
--- a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
+++ b/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue
@@ -19,7 +19,7 @@
           @mouseenter="hoveredRange = range"
           @mouseleave="hoveredRange = null"
         >
-        <div class="progress__bar" :style="{ background: 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-search-bar/BaseSearchBar.vue b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
index dde37d0dcc..7a05d3e42a 100644
--- a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
+++ b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
@@ -17,7 +17,13 @@
 
 <template>
   <base-input-container class="search-area" :class="filter ? 'active' : null">
-    <svgicon name="search" width="20" height="20" color="#acacac" aria-hidden="true" />
+    <svgicon
+      name="search"
+      width="20"
+      height="20"
+      color="#acacac"
+      aria-hidden="true"
+    />
     <base-input
       class="search-area__input"
       role="search"
diff --git a/argilla-frontend/components/base/base-separator/BaseSeparator.vue b/argilla-frontend/components/base/base-separator/BaseSeparator.vue
index cf13dab093..1322287b4d 100644
--- a/argilla-frontend/components/base/base-separator/BaseSeparator.vue
+++ b/argilla-frontend/components/base/base-separator/BaseSeparator.vue
@@ -8,7 +8,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .separator {
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--bg-opacity-10);
   width: 100%;
 }
 </style>
diff --git a/argilla-frontend/components/base/base-table/BaseTableInfo.vue b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
index 077fd4b080..e4d014e38e 100644
--- a/argilla-frontend/components/base/base-table/BaseTableInfo.vue
+++ b/argilla-frontend/components/base/base-table/BaseTableInfo.vue
@@ -19,7 +19,11 @@
     <div class="table-info" role="table">
       <div class="table-info__header">
         <slot name="columns">
-          <div class="table-info__item" role="columnheader" aria-label="Table Header">
+          <div
+            class="table-info__item"
+            role="columnheader"
+            aria-label="Table Header"
+          >
             <div
               v-for="(column, key) in columns"
               :key="key"
@@ -43,7 +47,12 @@
                 :aria-label="'Sort by ' + column.name"
                 :aria-sort="sortOrder === 'asc' ? 'descending' : 'ascending'"
               >
-                <svgicon width="18" height="18" name="sort" aria-hidden="true"/>
+                <svgicon
+                  width="18"
+                  height="18"
+                  name="sort"
+                  aria-hidden="true"
+                />
                 <span>{{ column.name }}</span>
               </button>
               <button v-else :data-title="column.tooltip">
@@ -57,7 +66,13 @@
       <template v-else>
         <div class="table-info__body" ref="table" aria-label="Table Body">
           <ul role="rowgroup">
-            <li v-for="item in filteredResults" :key="item.id" :id="item.id" role="row" :aria-label="'Row for ' + item.id">
+            <li
+              v-for="item in filteredResults"
+              :key="item.id"
+              :id="item.id"
+              role="row"
+              :aria-label="'Row for ' + item.id"
+            >
               <nuxt-link :to="rowLink(item)" class="table-info__item">
                 <span
                   v-for="(column, idx) in columns"
@@ -66,7 +81,11 @@
                   role="cell"
                 >
                   <span :class="column.class">
-                    <span v-if="column.actions" role="group" aria-label="Row actions">
+                    <span
+                      v-if="column.actions"
+                      role="group"
+                      aria-label="Row actions"
+                    >
                       <div class="table-info__actions">
                         <p
                           class="table-info__main"
@@ -111,7 +130,7 @@
                     <nuxt-link v-else-if="column.link" :to="column.link(item)">
                       {{ itemValue(item, column) }}
                     </nuxt-link>
-                    <span v-else >{{ itemValue(item, column) }}</span>
+                    <span v-else>{{ itemValue(item, column) }}</span>
                     <span v-if="column.component">
                       <component
                         :aria-label="column.component.name"
diff --git a/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue b/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue
index bea76feb1f..e0e832d0d7 100644
--- a/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue
+++ b/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue
@@ -5,7 +5,7 @@
       @click="openFilter(column)"
       :class="[visibleFilter || selectedOptions.length ? 'active' : '']"
     >
-      <svgicon name="filter" width="16" aria-hidden="true"/>
+      <svgicon name="filter" width="16" aria-hidden="true" />
       {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">
diff --git a/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue b/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue
index 32906305af..3f9be0ca3e 100644
--- a/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue
+++ b/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div class="topbar" role="banner" aria-label="Top navigation bar">
-    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon"/>
+    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon" />
     <slot />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue b/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue
index 6acd6fe4bc..803dc3e980 100644
--- a/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue
@@ -8,8 +8,12 @@
       <template slot="dropdown-header">
         <BaseButton
           class="record-menu__header"
-          :aria-label="(dropdownIsVisible? 'Collapse' : 'Expand') + ' Record Dropdown for Extra Information'">
-          <svgicon name="kebab" width="20" height="20" aria-hidden="true"/>
+          :aria-label="
+            (dropdownIsVisible ? 'Collapse' : 'Expand') +
+            ' Record Dropdown for Extra Information'
+          "
+        >
+          <svgicon name="kebab" width="20" height="20" aria-hidden="true" />
         </BaseButton>
       </template>
       <template slot="dropdown-content">
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 cd068b623d..a58c25ce32 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
@@ -7,7 +7,11 @@
     aria-label="Data Record Field"
   >
     <div class="title-area --body2">
-      <span class="text_field_component__title-content" v-text="title" :aria-label="'Field Name: ' + title" />
+      <span
+        class="text_field_component__title-content"
+        v-text="title"
+        :aria-label="'Field Name: ' + title"
+      />
       <BaseActionTooltip
         class="text_field_component__tooltip"
         :tooltip="$t('copied')"
@@ -20,11 +24,21 @@
           @click.prevent="$copyToClipboard(fieldText)"
           role="button"
         >
-          <svgicon color="#acacac" name="copy" width="18" height="18" aria-hidden="true"/>
+          <svgicon
+            color="#acacac"
+            name="copy"
+            width="18"
+            height="18"
+            aria-hidden="true"
+          />
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div id="fields-content" class="text_field_component__area --body1" :aria-label="'Data entry for Field: ' + title" >
+    <div
+      id="fields-content"
+      class="text_field_component__area --body1"
+      :aria-label="'Data entry for Field: ' + title"
+    >
       <p
         :class="[
           allowOverlapping
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 9b529155d0..b1ea862522 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
@@ -1,7 +1,16 @@
 <template>
   <div>
-    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" :aria-label="legend" />
-    <div class="questions" role="list" aria-label="List of annotation questions">
+    <p
+      v-if="legend"
+      class="questions__title --body3 --light"
+      v-text="legend"
+      :aria-label="legend"
+    />
+    <div
+      class="questions"
+      role="list"
+      aria-label="List of annotation questions"
+    >
       <div
         v-for="(question, index) in questions"
         :key="question.id"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
index d5ad5d710f..93df66a3c1 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
@@ -24,7 +24,12 @@
           :text="getSuggestedAgent(item)"
           minimalist
         >
-          <svgicon width="6" name="draggable" :id="`${item.value}-icon`" aria-label="Dragging Icon"/>
+          <svgicon
+            width="6"
+            name="draggable"
+            :id="`${item.value}-icon`"
+            aria-label="Dragging Icon"
+          />
           <span
             class="draggable__rank-card__title"
             v-text="item.text"
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 5591d70fb7..5debe06aae 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
@@ -1,8 +1,13 @@
 <template>
   <div class="wrapper">
     <QuestionHeaderComponent :question="question" />
-    <div class="question__warning" v-if="warningMessage" role="status" aria-live="polite">
-      <svgicon name="danger" width="16" height="16" aria-hidden="true"/>
+    <div
+      class="question__warning"
+      v-if="warningMessage"
+      role="status"
+      aria-live="polite"
+    >
+      <svgicon name="danger" width="16" height="16" aria-hidden="true" />
       <span v-text="warningMessage" />
     </div>
     <EntityLabelSelectionComponent
diff --git a/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue b/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue
index 877faad20e..0137884056 100644
--- a/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue
+++ b/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue
@@ -15,7 +15,7 @@
           width="20"
           height="20"
           name="change-height"
-          aria-hidden="true"/></BaseButton
+          aria-hidden="true" /></BaseButton
     ></template>
     <template slot="dropdown-content">
       <div class="view-config__content">
diff --git a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue b/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
index 47d6acabe0..c24b60c356 100644
--- a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
+++ b/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
@@ -25,7 +25,12 @@
           :data-title="$t('status')"
         >
           {{ currentOptionName }}
-          <svgicon name="chevron-down" width="8" height="8" aria-hidden="true"/>
+          <svgicon
+            name="chevron-down"
+            width="8"
+            height="8"
+            aria-hidden="true"
+          />
         </BaseButton>
       </span>
       <span slot="dropdown-content">
diff --git a/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue b/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue
index 2a04edb000..1901241f58 100644
--- a/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue
+++ b/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue
@@ -1,6 +1,12 @@
 <template>
   <div :class="isButtonActive ? 'filter-button--active' : 'filter-button'">
-    <svgicon v-if="iconName" :name="iconName" width="16" height="16" aria-hidden="true" />
+    <svgicon
+      v-if="iconName"
+      :name="iconName"
+      width="16"
+      height="16"
+      aria-hidden="true"
+    />
     <BaseButton class="filter-button__button">{{ buttonName }}</BaseButton>
     <slot></slot>
     <svgicon
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue b/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
index d6a2b09a5b..61e05f09c3 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="import-data">
     <BaseButton
-      class="primary"
+      class="primary import-data__button"
       @click.prevent="visibleSnippet = !visibleSnippet"
       >{{ $t("datasetCreation.importData") }}</BaseButton
     >
@@ -79,6 +79,12 @@ export default {
     top: $base-space;
     right: $base-space;
   }
+  &__button.button {
+    background: hsl(0, 1%, 18%);
+    &:hover {
+      background: hsl(0, 1%, 22%);
+    }
+  }
 }
 .fade-enter-active,
 .fade-leave-active {
diff --git a/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue b/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
index dc26e48fff..9c54d1eca7 100644
--- a/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
@@ -34,7 +34,12 @@
             @click="selectMetadataCategory(null)"
           >
             <span v-text="visibleCategory.title" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div class="metadata-filter__content">
             <LabelsSelector
diff --git a/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue b/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue
index 607ae99bc6..8b0a9fb424 100644
--- a/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue
@@ -27,7 +27,12 @@
         <template v-else>
           <div class="responses-filter__header" @click="selectResponse(null)">
             <span v-text="selectedResponse.name" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div class="responses-filter__content">
             <LabelsSelector
diff --git a/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue b/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
index a6fcd0de29..00fbf0f384 100644
--- a/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
@@ -25,7 +25,7 @@
       class="search-area__icon --search"
       :data-title="$t('search')"
     >
-      <svgicon name="search" width="16" height="16" aria-hidden="true"/>
+      <svgicon name="search" width="16" height="16" aria-hidden="true" />
     </BaseButton>
     <input
       ref="searchRef"
@@ -58,7 +58,7 @@
           <span class="search-area__fields__header__text">{{
             selectedField.title
           }}</span>
-          <svgicon name="chevron-down" height="8" aria-hidden="true"/>
+          <svgicon name="chevron-down" height="8" aria-hidden="true" />
         </span>
       </template>
       <template slot="dropdown-content">
diff --git a/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue b/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue
index ba0e87d7c9..7463677d82 100644
--- a/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue
+++ b/argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue
@@ -36,7 +36,10 @@
         width="16"
         height="16"
         :name="category.sort === 'asc' ? 'arrow-up' : 'arrow-down'"
-        :aria-label="'Change sort direction to ' + (category.sort === 'asc' ? 'up' : 'down')"
+        :aria-label="
+          'Change sort direction to ' +
+          (category.sort === 'asc' ? 'up' : 'down')
+        "
       />
     </BaseButton>
     <BaseButton
diff --git a/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue b/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue
index f21ea14424..05ea4a2a3d 100644
--- a/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue
@@ -31,7 +31,12 @@
             @click="selectSuggestion(null)"
           >
             <span v-text="selectedSuggestion.name" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div>
             <CategoriesSelector
diff --git a/argilla-frontend/components/features/annotation/pagination/Pagination.vue b/argilla-frontend/components/features/annotation/pagination/Pagination.vue
index 3b0b7dcd71..534be68307 100644
--- a/argilla-frontend/components/features/annotation/pagination/Pagination.vue
+++ b/argilla-frontend/components/features/annotation/pagination/Pagination.vue
@@ -10,7 +10,7 @@
       :aria-disabled="isFirstPage"
       @click="goToPrevPage"
     >
-      <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+      <svgicon name="chevron-left" width="12" height="12" aria-hidden="true" />
     </BaseButton>
 
     <BaseButton
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue
index c3ad312ed1..94a7462b8d 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue
@@ -72,7 +72,7 @@
         >
         <Validation
           v-if="!dataset.isValid"
-          :validations="translatedValidations"
+          :validations="firstTranslatedValidation"
         />
       </form>
     </dialog>
@@ -105,6 +105,9 @@ export default {
     },
   },
   computed: {
+    firstTranslatedValidation() {
+      return [this.translatedValidations[0]];
+    },
     translatedValidations() {
       return this.dataset.validate().question.map((validation) => {
         return this.$t(validation);
@@ -140,8 +143,8 @@ export default {
   position: absolute;
   right: 0;
   left: 0;
-  width: calc(100% - $base-space * 3);
-  bottom: $base-space;
+  width: 100%;
+  bottom: -4px;
   display: block;
   margin-left: auto;
   padding: 0;
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue
index 21a8cd4960..ca79107926 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue
@@ -29,23 +29,32 @@
               class="config-form__draggable-area"
               :list="dataset.selectedSubset.fields"
               :group="{ name: 'fields' }"
+              ghost-class="config-form__ghost"
               :disabled="isFocused"
+              @start="drag = true"
+              @end="drag = false"
             >
-              <DatasetConfigurationField
-                v-for="field in dataset.selectedSubset.fields.filter(
-                  (f) => f.name !== dataset.mappings.external_id
-                )"
-                :key="field.name"
-                :field="field"
-                :available-types="
-                  availableFieldTypes.filter(
-                    (a) =>
-                      a.value === 'no mapping' ||
-                      a.value === field.originalType.value
-                  )
-                "
-                @is-focused="isFocused = $event"
-              />
+              <transition-group
+                class="config-form__draggable-area-wrapper"
+                type="transition"
+                :name="!drag ? 'flip-list' : null"
+              >
+                <DatasetConfigurationField
+                  v-for="field in dataset.selectedSubset.fields.filter(
+                    (f) => f.name !== dataset.mappings.external_id
+                  )"
+                  :key="field.name"
+                  :field="field"
+                  :available-types="
+                    availableFieldTypes.filter(
+                      (a) =>
+                        a.value === 'no mapping' ||
+                        a.value === field.originalType.value
+                    )
+                  "
+                  @is-focused="isFocused = $event"
+                />
+              </transition-group>
             </draggable>
           </div>
         </div>
@@ -70,40 +79,47 @@
             <draggable
               v-if="dataset.selectedSubset.questions.length"
               class="config-form__draggable-area"
+              ghost-class="config-form__ghost"
               :list="dataset.selectedSubset.questions"
               :group="{ name: 'questions' }"
               :disabled="isFocused"
             >
-              <DatasetConfigurationQuestion
-                v-for="question in dataset.selectedSubset.questions"
-                :key="question.name"
-                :question="question"
-                :columns="dataset.selectedSubset.columns"
-                :remove-is-allowed="true"
-                :available-types="availableQuestionTypes"
-                @remove="dataset.selectedSubset.removeQuestion(question.name)"
-                @change-type="onTypeIsChanged(question.name, $event)"
-                @is-focused="isFocused = $event"
-              />
-            </draggable>
-            <div class="config-form__button-area">
-              <BaseButton
-                class="primary"
-                @click.prevent="
-                  visibleDatasetCreationDialog = !visibleDatasetCreationDialog
-                "
-                >{{ $t("datasetCreation.button") }}</BaseButton
+              <transition-group
+                class="config-form__draggable-area-wrapper"
+                type="transition"
+                :name="!drag ? 'flip-list' : null"
               >
-              <DatasetConfigurationDialog
-                v-if="visibleDatasetCreationDialog"
-                :dataset="dataset"
-                :is-loading="isLoading"
-                @close-dialog="visibleDatasetCreationDialog = false"
-                @create-dataset="createDataset"
-              />
-            </div>
+                <DatasetConfigurationQuestion
+                  v-for="question in dataset.selectedSubset.questions"
+                  :key="question.name"
+                  :question="question"
+                  :columns="dataset.selectedSubset.columns"
+                  :remove-is-allowed="true"
+                  :available-types="availableQuestionTypes"
+                  @remove="dataset.selectedSubset.removeQuestion(question.name)"
+                  @change-type="onTypeIsChanged(question.name, $event)"
+                  @is-focused="isFocused = $event"
+                />
+              </transition-group>
+            </draggable>
           </div>
         </div>
+        <div class="config-form__button-area">
+          <BaseButton
+            class="primary"
+            @click.prevent="
+              visibleDatasetCreationDialog = !visibleDatasetCreationDialog
+            "
+            >{{ $t("datasetCreation.button") }}</BaseButton
+          >
+          <DatasetConfigurationDialog
+            v-if="visibleDatasetCreationDialog"
+            :dataset="dataset"
+            :is-loading="isLoading"
+            @close-dialog="visibleDatasetCreationDialog = false"
+            @create-dataset="createDataset"
+          />
+        </div>
       </div>
     </div>
   </section>
@@ -123,6 +139,7 @@ export default {
     return {
       isFocused: false,
       visibleDatasetCreationDialog: false,
+      drag: false,
     };
   },
   methods: {
@@ -149,21 +166,22 @@ export default {
 .config-form {
   display: flex;
   flex-direction: column;
+  height: 100%;
   gap: $base-space;
   padding: $base-space * 2;
-  height: 100%;
-  max-width: 1000px;
-  margin: 0 auto;
   &__content {
     display: flex;
-    justify-content: center;
     gap: $base-space * 2;
     min-height: 0;
+    height: 100%;
     @include media("<tablet") {
       flex-direction: column;
     }
   }
   &__col-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $base-space * 2;
     position: relative;
     width: 100%;
     max-width: 440px;
@@ -172,6 +190,7 @@ export default {
     display: flex;
     flex-direction: column;
     height: 100%;
+    min-height: 0;
     background: var(--bg-accent-grey-1);
     border: 1px solid var(--bg-opacity-6);
     border-radius: $border-radius-m;
@@ -190,9 +209,6 @@ export default {
       gap: $base-space;
       overflow: auto;
       height: 100%;
-      &.--questions {
-        padding-bottom: $base-space * 9;
-      }
     }
   }
   &__draggable-area {
@@ -200,6 +216,15 @@ export default {
     flex-direction: column;
     gap: $base-space;
   }
+  &__draggable-area-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $base-space;
+  }
+  &__ghost {
+    opacity: 0.5;
+    background: lime;
+  }
   &__selector {
     &__intro {
       display: block;
@@ -217,14 +242,13 @@ export default {
   }
   &__button-area {
     display: flex;
-    justify-content: right;
-    position: absolute;
-    bottom: 1px;
-    right: 1px;
-    left: 1px;
-    background: var(--bg-accent-grey-1);
-    padding: $base-space * 2;
-    border-radius: $border-radius-m;
+    .button {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+  .flip-list-move {
+    transition: transform 0.3s;
   }
 }
 </style>
diff --git a/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue b/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
index df7794292c..e04925b77b 100644
--- a/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
+++ b/argilla-frontend/components/features/global/user/UserAvatarTooltip.vue
@@ -1,6 +1,11 @@
 <template>
   <div v-if="$auth.loggedIn" v-click-outside="close" class="user">
-    <a class="user__button" @click.prevent="showSelector" role="button" aria-label="User Button">
+    <a
+      class="user__button"
+      @click.prevent="showSelector"
+      role="button"
+      aria-label="User Button"
+    >
       {{ user.avatar }}
     </a>
     <div v-if="visibleSelector && user" class="user__content">
diff --git a/argilla-frontend/components/features/home/sidebar/DatasetBadge.vue b/argilla-frontend/components/features/home/sidebar/DatasetBadge.vue
index d82086e8cc..4b66f46258 100644
--- a/argilla-frontend/components/features/home/sidebar/DatasetBadge.vue
+++ b/argilla-frontend/components/features/home/sidebar/DatasetBadge.vue
@@ -31,19 +31,20 @@ export default {
   display: flex;
   align-items: center;
   min-height: 26px;
-  box-shadow: 0 0 1px 1px var(--bg-opacity-10);
-  border-radius: $border-radius;
+  border: 1px solid var(--bg-opacity-10);
+  border-radius: $border-radius-l;
+  @include font-size(13px);
 
   &__icon-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: calc($base-space / 1.5) $base-space;
-    border-radius: $border-radius;
+    padding: calc($base-space / 1.8) $base-space;
+    border-radius: $border-radius-l;
     background: linear-gradient(
-      180deg,
-      hsl(from v-bind(color) h s l / 1%) 0%,
-      hsl(from v-bind(color) h s l / 10%) 100%
+      90deg,
+      hsl(from v-bind(color) h s l / 10%) 0%,
+      hsl(from v-bind(color) h s l / 1%) 100%
     );
   }
   &__icon {
@@ -54,7 +55,8 @@ export default {
   &__text {
     font-weight: 400;
     color: var(--fg-secondary);
-    padding: calc($base-space / 2) $base-space;
+    padding: calc($base-space / 2) $base-space calc($base-space / 2)
+      calc($base-space / 2);
   }
 }
 </style>
diff --git a/argilla-frontend/components/features/home/sidebar/ExampleDatasetCard.vue b/argilla-frontend/components/features/home/sidebar/ExampleDatasetCard.vue
index fa39eb6174..520e92e397 100644
--- a/argilla-frontend/components/features/home/sidebar/ExampleDatasetCard.vue
+++ b/argilla-frontend/components/features/home/sidebar/ExampleDatasetCard.vue
@@ -36,12 +36,16 @@ export default {
 .example-dataset {
   &.button {
     width: 100%;
+    max-width: 75%;
     padding: $base-space * 2;
     border: 1px solid var(--bg-opacity-6);
     border-radius: $border-radius-m;
     background: var(--bg-accent-grey-2);
     color: var(--fg-primary);
     text-align: left;
+    @include media("<desktop") {
+      max-width: 100%;
+    }
     &:hover {
       background: var(--bg-accent-grey-3);
       border: 1px solid var(--bg-opacity-10);
@@ -55,6 +59,8 @@ export default {
   &__title {
     margin: 0;
     color: var(--fg-primary);
+    white-space: pre-line;
+    @include line-height(18px);
   }
   &__tags {
     display: flex;
diff --git a/argilla-frontend/components/features/home/sidebar/ImportFromHub.vue b/argilla-frontend/components/features/home/sidebar/ImportFromHub.vue
index fa86394c1f..264fbc55e6 100644
--- a/argilla-frontend/components/features/home/sidebar/ImportFromHub.vue
+++ b/argilla-frontend/components/features/home/sidebar/ImportFromHub.vue
@@ -36,6 +36,7 @@
               aria-hidden="true"
             ></svgicon>
             <BaseInput
+              autofocus
               v-model="repositoryId"
               :placeholder="$t('home.pasteRepoIdPlaceholder')"
             />
diff --git a/argilla-frontend/components/features/home/sidebar/LinkCard.vue b/argilla-frontend/components/features/home/sidebar/LinkCard.vue
index fb37a7bb77..0a012f8eb3 100644
--- a/argilla-frontend/components/features/home/sidebar/LinkCard.vue
+++ b/argilla-frontend/components/features/home/sidebar/LinkCard.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseButton class="guide-link" target="_blank" :href="link">
     <div class="guide-link__content">
-      <BaseBadge :text="badge" class="guide-link__badge" />
+      <p class="guide-link__type">{{ type }}</p>
       <p class="guide-link__title">{{ text }}</p>
     </div>
   </BaseButton>
@@ -10,7 +10,7 @@
 <script>
 export default {
   props: {
-    badge: {
+    type: {
       type: String,
       required: true,
     },
@@ -29,13 +29,16 @@ export default {
 <style lang="scss" scoped>
 .guide-link {
   &.button {
-    width: 100%;
+    max-width: 75%;
     padding: $base-space * 2;
     border: 1px solid var(--bg-opacity-6);
     border-radius: $border-radius-m;
     background: var(--bg-accent-grey-2);
     color: var(--fg-primary);
     text-align: left;
+    @include media("<desktop") {
+      max-width: 100%;
+    }
     &:hover {
       background: var(--bg-accent-grey-3);
       border: 1px solid var(--bg-opacity-10);
@@ -46,9 +49,10 @@ export default {
     flex-direction: column;
     gap: $base-space * 2;
   }
-  &__badge.badge {
-    background: hsl(from hsl(235, 24%, 60%) h s l / 20%);
-    border-color: hsl(from hsl(235, 24%, 60%) h s l / 30%);
+  &__type {
+    margin: 0;
+    color: var(--fg-tertiary);
+    @include font-size(12px);
   }
   &__title {
     margin: 0;
diff --git a/argilla-frontend/components/features/home/sidebar/useImportFromPython.ts b/argilla-frontend/components/features/home/sidebar/useImportFromPython.ts
index f11e315d4d..77e95a9616 100644
--- a/argilla-frontend/components/features/home/sidebar/useImportFromPython.ts
+++ b/argilla-frontend/components/features/home/sidebar/useImportFromPython.ts
@@ -39,6 +39,8 @@ dataset = rg.Dataset(
     settings=settings,
 )
 
+dataset.create()
+
 records = [
     {
         "text": "Do you need oxygen to breathe?",
diff --git a/argilla-frontend/layouts/Home.vue b/argilla-frontend/layouts/Home.vue
index bc6762d816..887e939dee 100644
--- a/argilla-frontend/layouts/Home.vue
+++ b/argilla-frontend/layouts/Home.vue
@@ -59,7 +59,7 @@ export default {
     padding: $base-space * 4;
     background: var(--bg-accent-grey-3);
     @include media(">tablet") {
-      width: clamp(300px, 36vw, 600px);
+      width: clamp(300px, 39vw, 600px);
     }
   }
 }
diff --git a/argilla-frontend/pages/new/_id.vue b/argilla-frontend/pages/_id.vue
similarity index 83%
rename from argilla-frontend/pages/new/_id.vue
rename to argilla-frontend/pages/_id.vue
index 004f240ada..fa803e909c 100644
--- a/argilla-frontend/pages/new/_id.vue
+++ b/argilla-frontend/pages/_id.vue
@@ -3,8 +3,7 @@
     <HeaderFeedbackTask
       :breadcrumbs="[
         { link: '/', name: $t('breadcrumbs.home') },
-        { name: 'new' },
-        { name: datasetConfig?.repoId },
+        { name: repoIdWithoutOrg },
       ]"
     >
       <template slot="badge">
@@ -31,6 +30,11 @@ export default {
   setup() {
     return useNewDatasetViewModel();
   },
+  computed: {
+    repoIdWithoutOrg() {
+      return this.datasetConfig?.repoId?.split("/")[1];
+    },
+  },
 };
 </script>
 
@@ -40,7 +44,7 @@ export default {
   display: flex;
   flex-direction: column;
   &__header-badge {
-    background-color: hsl(from var(--bg-config-card) h 30% 50%);
+    background-color: hsl(from var(--color-brand) h 70% 60%);
     padding: calc($base-space / 2) $base-space;
     border-radius: $border-radius;
     margin: 0;
diff --git a/argilla-frontend/pages/index.vue b/argilla-frontend/pages/index.vue
index 82f3f403a3..e008190ebe 100644
--- a/argilla-frontend/pages/index.vue
+++ b/argilla-frontend/pages/index.vue
@@ -50,6 +50,7 @@
           />
           <ImportFromPython v-if="!showImportDatasetInput" />
         </div>
+        <BaseSeparator />
         <div class="home__sidebar__content">
           <p
             class="home__sidebar__title"
@@ -75,12 +76,12 @@
           <p class="home__sidebar__subtitle" v-text="$t('home.guidesText')" />
           <div class="home__sidebar__cards">
             <LinkCard
-              badge="How to guide"
+              type="How to guide"
               text="Annotate your dataset"
               link="https://docs.argilla.io/dev/how_to_guides/annotate/"
             />
             <LinkCard
-              badge="How to guide"
+              type="How to guide"
               text="Query and filter records"
               link="https://docs.argilla.io/dev/how_to_guides/query/"
             />
diff --git a/argilla-frontend/pages/useHomeViewModel.ts b/argilla-frontend/pages/useHomeViewModel.ts
index 3f574bc868..73f1b5c255 100644
--- a/argilla-frontend/pages/useHomeViewModel.ts
+++ b/argilla-frontend/pages/useHomeViewModel.ts
@@ -50,12 +50,12 @@ export const useHomeViewModel = () => {
       rows: "15K",
     },
     {
-      repoId: "fancyzhx/ag_news",
-      task: "Text Classification",
-      tags: ["topic-classification"],
-      icon: "text-classification",
-      color: "hsl(25, 95%, 53%)",
-      rows: "127K",
+      repoId: "dvilasuero/finepersonas-v0.1-tiny-flux-schnell",
+      task: "Text to Image",
+      tags: ["synthetic", "rlaif"],
+      icon: "text-to-image",
+      color: "hsl(38, 92%, 50%)",
+      rows: "350",
     },
   ];
 
diff --git a/argilla-frontend/pages/new/useNewDatasetViewModel.ts b/argilla-frontend/pages/useNewDatasetViewModel.ts
similarity index 100%
rename from argilla-frontend/pages/new/useNewDatasetViewModel.ts
rename to argilla-frontend/pages/useNewDatasetViewModel.ts
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index ab9b33831e..c27e28097d 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -35,7 +35,8 @@ export default {
   annotationGuidelines: "Annotationsrichtlinien",
   guidelines: "Richtlinien",
   taskDistribution: "Annotationsverteilung",
-  minimumSubmittedResponses: "Erforderliche Mindestanzahl an eingereichten Antworten",
+  minimumSubmittedResponses:
+    "Erforderliche Mindestanzahl an eingereichten Antworten",
   taskDistributionTooltip:
     "Eine Aufgabe ist abgeschlossen, wenn alle Datensätze die \nMindestanzahl an eingereichten Antworten haben.",
   noAnnotationGuidelines: "Dieser Datensatz hat keine Annotationsrichtlinien",
@@ -49,11 +50,11 @@ export default {
       "Der Datensatz ist leer. Sie können Datensätze mit dem Python SDK hinzufügen. Siehe <a href='https://docs.argilla.io/latest/how_to_guides/record/'>Dokumentation</a> zum Hinzufügen von Einträgen.",
     taskDistributionCompleted: "🎉 Die Aufgabe ist erledigt!",
     noSubmittedRecords: "Sie haben noch keinen Datensatz eingereicht",
-    noRecordsFound: "Sie haben keine {status} Datensätze, welche Ihrer Anfrage entsprechen",
+    noRecordsFound:
+      "Sie haben keine {status} Datensätze, welche Ihrer Anfrage entsprechen",
     noRecords: "Sie haben keine {status} Datensätze",
     noPendingRecordsToAnnotate: "🎉 Die Aufgabe ist erledigt!",
-    noDraftRecordsToReview:
-      "Sie haben keine Entwürfe zu prüfen",
+    noDraftRecordsToReview: "Sie haben keine Entwürfe zu prüfen",
   },
   breadcrumbs: {
     home: "Start",
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index c0f8ce1547..c9d9ae7c36 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -258,13 +258,13 @@ export default {
     },
   },
   home: {
-    argillaDatasets: "Argilla datasets",
+    argillaDatasets: "Your datasets",
     none: "None yet",
     importTitle: "Import a dataset from Hugging Face Hub",
     importText:
       "Start with a dataset from the Hub by simply pasting the repository name",
     importButton: "Import dataset",
-    importFromHub: "Import from Hub",
+    importFromHub: "Import dataset from Hugging Face",
     importFromPython: "Import from Python",
     importFromPythonHFWarning:
       "If you're using a private Space, check the <a target='_blank' href='https://docs.argilla.io/latest/getting_started/how-to-configure-argilla-on-huggingface/#how-to-use-private-spaces'>docs</a>.",
@@ -272,7 +272,7 @@ export default {
     exampleDatasetsText: "Explore these example datasets",
     guidesTitle: "Not familiar with Argilla?",
     guidesText: "Take a look at these guides:",
-    pasteRepoIdPlaceholder: "Paste a repo id",
+    pasteRepoIdPlaceholder: "Paste a repo id e.g., stanfordnlp/imdb",
     demoLink:
       "Log into this <a href='https://huggingface.co/spaces/argilla/argilla-template-space' target='_blank'>demo</a> to try Argilla out",
   },
diff --git a/argilla-frontend/translation/es.js b/argilla-frontend/translation/es.js
index 991df244de..3eac0eaaef 100644
--- a/argilla-frontend/translation/es.js
+++ b/argilla-frontend/translation/es.js
@@ -256,13 +256,13 @@ export default {
     },
   },
   home: {
-    argillaDatasets: "Datasets de Argilla",
+    argillaDatasets: "Tus datasets",
     none: "Sin datasets",
     importTitle: "Importar un dataset desde Hugging Face Hub",
     importText:
       "Comienza con un conjunto de datos del Hub simplemente pegando el nombre del repositorio",
     importButton: "Importar dataset",
-    importFromHub: "Importar desde el Hub",
+    importFromHub: "Importar dataset desde Hugging Face",
     importFromPython: "Importar desde Python",
     importFromPythonHFWarning:
       "Si estás usando un Espacio privado, consulta la <a target='_blank' href='https://docs.argilla.io/latest/getting_started/how-to-configure-argilla-on-huggingface/#how-to-use-private-spaces'>documentación</a>.",
@@ -270,7 +270,7 @@ export default {
     exampleDatasetsText: "Explora estos datasets de ejemplo",
     guidesTitle: "¿No conoce Argilla?",
     guidesText: "Echa un vistazo a estas guías:",
-    pasteRepoIdPlaceholder: "Pega un repo id",
+    pasteRepoIdPlaceholder: "Pega un repo id id p.ej., stanfordnlp/imdb",
     demoLink:
       "Entra en esta <a href='https://huggingface.co/spaces/argilla/argilla-template-space' target='_blank'>demo</a> para probar Argilla",
   },
diff --git a/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts b/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts
index 5ba9be5010..5debcf218b 100644
--- a/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts
+++ b/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts
@@ -50,9 +50,9 @@ export class CreateDatasetUseCase {
       await this.datasetRepository.import(datasetCreated, dataset);
 
       let retries = 0;
-      const debounce = Debounce.from(1000);
+      const debounce = Debounce.from(3000);
 
-      while (retries < 5) {
+      while (retries < 10) {
         revalidateCache(`/v1/datasets/${datasetCreated}/progress`);
 
         const progress = await this.datasetRepository.getProgress(
diff --git a/argilla-frontend/v1/infrastructure/services/useRoutes.ts b/argilla-frontend/v1/infrastructure/services/useRoutes.ts
index 5c5de969ee..b4f1c2ba45 100644
--- a/argilla-frontend/v1/infrastructure/services/useRoutes.ts
+++ b/argilla-frontend/v1/infrastructure/services/useRoutes.ts
@@ -24,7 +24,7 @@ export const ROUTES = {
   annotationPage: (datasetId: string) =>
     `/dataset/${datasetId}/annotation-mode`,
   settings: (id: string) => `/dataset/${id}/settings`,
-  importDatasetFromHub: (id: string) => `/new/${encodeURIComponent(id)}`,
+  importDatasetFromHub: (id: string) => `/${encodeURIComponent(id)}`,
 };
 
 export const useRoutes = () => {
diff --git a/argilla-server/CHANGELOG.md b/argilla-server/CHANGELOG.md
index fc4f3b6ec5..9c385b82a2 100644
--- a/argilla-server/CHANGELOG.md
+++ b/argilla-server/CHANGELOG.md
@@ -20,6 +20,7 @@ These are the section headers that we use:
 
 ### Added
 
+- Added new `POST /api/v1/datasets/:dataset_id/import` to import datasets from Hugging Face as a background job. ([#5572](https://github.com/argilla-io/argilla/pull/5572))
 - Added new `metadata` attribute for endpoints getting, creating and updating Datasets so now it is possible to store metadata associated to a dataset. ([#5586](https://github.com/argilla-io/argilla/pull/5586))
 - Added new validation to avoid the creation of records with empty `fields` attributes. ([#5639](https://github.com/argilla-io/argilla/pull/5639))
 
@@ -31,11 +32,8 @@ These are the section headers that we use:
 
 ### Removed
 
-- Removed name pattern restrictions for Fields. ([#5573](https://github.com/argilla-io/argilla/pull/5573))
-- Removed name pattern restrictions for Questions. ([#5573](https://github.com/argilla-io/argilla/pull/5573))
-- Removed name pattern restrictions for Metadata Properties. ([#5573](https://github.com/argilla-io/argilla/pull/5573))
-- Removed name pattern restrictions for Vector Settings. ([#5573](https://github.com/argilla-io/argilla/pull/5573))
-- Removed name pattern validation for Workspaces, Datasets, and Users. ([#5575](https://github.com/argilla-io/argilla/pull/5575))
+- Removed name pattern restrictions for Fields, Questions, Metadata Properties and Vector Settings. ([#5573](https://github.com/argilla-io/argilla/pull/5573))
+- Removed name pattern validation for Datasets, Workspaces and Users. ([#5575](https://github.com/argilla-io/argilla/pull/5575))
 
 ### Fixed
 
diff --git a/argilla-server/src/argilla_server/api/handlers/v1/datasets/datasets.py b/argilla-server/src/argilla_server/api/handlers/v1/datasets/datasets.py
index 4a49fa6484..75ffda240c 100644
--- a/argilla-server/src/argilla_server/api/handlers/v1/datasets/datasets.py
+++ b/argilla-server/src/argilla_server/api/handlers/v1/datasets/datasets.py
@@ -313,7 +313,6 @@ async def update_dataset(
     return await datasets.update_dataset(db, dataset, dataset_update.dict(exclude_unset=True))
 
 
-# TODO: Maybe change /import to /import-from-hub?
 @router.post("/datasets/{dataset_id}/import", status_code=status.HTTP_202_ACCEPTED, response_model=JobSchema)
 async def import_dataset_from_hub(
     *,
diff --git a/argilla/CHANGELOG.md b/argilla/CHANGELOG.md
index 6772799b7b..b3374854cf 100644
--- a/argilla/CHANGELOG.md
+++ b/argilla/CHANGELOG.md
@@ -18,8 +18,13 @@ These are the section headers that we use:
 
 ## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)
 
+### Added
+
+- Added `Argilla.deploy_on_spaces` to deploy the Argilla server on Hugging Face Spaces. ([#5547](https://github.com/argilla-io/argilla/pull/5547))
+
 ### Changed
 
+- Changed `Dataset.from_hub` method to open configure URL when `settings="ui"`. ([#5622](https://github.com/argilla-io/argilla/pull/5622))
 - Terms metadata properties accept other values than `str`. ([#5594](https://github.com/argilla-io/argilla/pull/5594))
 - Added support for `with_vectors` while fetching records along with a search query. ([#5638](https://github.com/argilla-io/argilla/pull/5638))
 
@@ -36,7 +41,7 @@ These are the section headers that we use:
 - Added `limit` argument when fetching records. ([#5525](https://github.com/argilla-io/argilla/pull/5525)
 - Added similarity search support. ([#5546](https://github.com/argilla-io/argilla/pull/5546))
 - Added filter support for `id`, `_server_id`, `inserted_at` and `updated_at` record attributes. ([#5545](https://github.com/argilla-io/argilla/pull/5545))
-- Added support to read argilla credentials from colab secrets. ([#5541](https://github.com/argilla-io/argilla/pull/5541)))
+- Added support to read argilla credentials from colab secrets. ([#5541](https://github.com/argilla-io/argilla/pull/5541))
 
 ### Changed
 
diff --git a/argilla/src/argilla/_helpers/_deploy.py b/argilla/src/argilla/_helpers/_deploy.py
index 3928061df3..afdb952410 100644
--- a/argilla/src/argilla/_helpers/_deploy.py
+++ b/argilla/src/argilla/_helpers/_deploy.py
@@ -91,7 +91,7 @@ def deploy_on_spaces(
                 hf_api.restart_space(repo_id=repo_id)
             warnings.warn(
                 f"Space {repo_id} already exists. Using provided API key. If client authentication fails, go to "
-                "https://huggingface.co/spaces/{repo_id} to login with OAuth and get the correct API key.",
+                f"https://huggingface.co/spaces/{repo_id} to login with OAuth and get the correct API key.",
                 stacklevel=2,
             )
         else:
diff --git a/argilla/src/argilla/datasets/_io/_hub.py b/argilla/src/argilla/datasets/_io/_hub.py
index bdde05d239..a2914022e7 100644
--- a/argilla/src/argilla/datasets/_io/_hub.py
+++ b/argilla/src/argilla/datasets/_io/_hub.py
@@ -321,6 +321,8 @@ def _get_sample_hf_record(hf_dataset: "HFDataset") -> Dict:
     @classmethod
     def _run_settings_ui(cls, repo_id: str, subset: str, split: str, client: Optional["Argilla"] = None) -> str:
         from urllib.parse import quote_plus, urlencode
+        from argilla.client import Argilla
+
         import webbrowser
 
         client = client or Argilla._get_default()