diff --git a/argilla-frontend/assets/icons/assign.js b/argilla-frontend/assets/icons/assign.js
new file mode 100644
index 0000000000..7b2e3b1989
--- /dev/null
+++ b/argilla-frontend/assets/icons/assign.js
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'assign': {
+    width: 10,
+    height: 10,
+    viewBox: '0 0 10 10',
+    data: '<path pid="0" d="M1.625 2.75c.416 0 .78-.226.974-.563h3.526a1.125 1.125 0 010 2.25h-2.25a2.25 2.25 0 000 4.5h3.526a1.125 1.125 0 100-1.124H3.875a1.125 1.125 0 010-2.25h2.25a2.25 2.25 0 000-4.5H2.599a1.125 1.125 0 10-.974 1.687z"/>'
+  }
+})
\ No newline at end of file
diff --git a/argilla-frontend/assets/icons/index.js b/argilla-frontend/assets/icons/index.js
index d37bfc43ea..085380a8d1 100644
--- a/argilla-frontend/assets/icons/index.js
+++ b/argilla-frontend/assets/icons/index.js
@@ -1,6 +1,7 @@
 /* eslint-disable */
 require('./arrow-down')
 require('./arrow-up')
+require('./assign')
 require('./bulk-mode')
 require('./change-height')
 require('./check')
@@ -34,6 +35,7 @@ require('./meatballs')
 require('./minimize-arrows')
 require('./no-matching')
 require('./pen')
+require('./plus')
 require('./progress')
 require('./refresh')
 require('./reset')
diff --git a/argilla-frontend/assets/icons/plus.js b/argilla-frontend/assets/icons/plus.js
new file mode 100644
index 0000000000..14753da524
--- /dev/null
+++ b/argilla-frontend/assets/icons/plus.js
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'plus': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" d="M8 2a.75.75 0 00-.75.75v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5A.75.75 0 008 2z" _fill="#000" fill-opacity=".87"/>'
+  }
+})
\ No newline at end of file
diff --git a/argilla-frontend/assets/scss/abstract/variables/_themes.scss b/argilla-frontend/assets/scss/abstract/variables/_themes.scss
index f6330425b4..5790fae4ae 100644
--- a/argilla-frontend/assets/scss/abstract/variables/_themes.scss
+++ b/argilla-frontend/assets/scss/abstract/variables/_themes.scss
@@ -76,6 +76,8 @@
   --bg-banner-warning: hsl(47, 83%, 91%);
   --bg-banner-error: hsl(3, 100%, 92%);
   --bg-tooltip: var(--color-dark-grey);
+  --bg-config-card: hsl(227, 100%, 90%);
+  --bg-congig-alert: hsl(41, 100%, 82%, 0.8);
   --fg-chat-1: #488d81;
   --fg-chat-2: #e07be0;
   --fg-chat-3: #fd926a;
@@ -146,6 +148,8 @@
   --bg-banner-warning: hsl(47, 83%, 16%);
   --bg-banner-error: hsl(3, 100%, 20%);
   --bg-tooltip: hsl(207, 9%, 32%);
+  --bg-config-card: hsla(227, 100%, 82%, 30%);
+  --bg-congig-alert: hsl(41, 100%, 82%, 0.4);
   --fg-chat-1: #628e87;
   --fg-chat-2: #af6daf;
   --fg-chat-3: #cd8065;
diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss
index 07e4362888..515b5e505f 100644
--- a/argilla-frontend/assets/scss/base/base.scss
+++ b/argilla-frontend/assets/scss/base/base.scss
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
 html {
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
diff --git a/argilla-frontend/components/base/base-card/BaseCard.vue b/argilla-frontend/components/base/base-card/BaseCard.vue
index f6f9968fe3..af4e8aa6b8 100644
--- a/argilla-frontend/components/base/base-card/BaseCard.vue
+++ b/argilla-frontend/components/base/base-card/BaseCard.vue
@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .card {
   display: flex;
   align-items: flex-end;
diff --git a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
index fa8a5b7874..1acd7afd66 100644
--- a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
+++ b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
@@ -1,15 +1,18 @@
 <template>
-  <div class="resizable" :class="resizing ? '--h-resizing' : null">
-    <div class="resizable__up">
+  <div class="resizable-h" :class="resizing ? '--h-resizing' : null">
+    <div class="resizable-h__up">
       <slot name="up" />
     </div>
 
-    <div class="resizable__bar" ref="resizableBar">
-      <div class="resizable__bar__inner" />
+    <div class="resizable-h__bar" ref="resizableBar">
+      <div class="resizable-h__bar__inner" />
+    </div>
+    <div class="resizable-h__down" v-if="!collapsable">
+      <slot name="down" />
     </div>
-
     <BaseCollapsablePanel
-      class="resizable__down"
+      v-else
+      class="resizable-h__down"
       :class="isExpanded ? '--expanded' : null"
       :is-expanded="isExpanded"
       @toggle-expand="toggleExpand"
@@ -38,6 +41,17 @@ export default {
       type: String,
       default: "h-rz",
     },
+    collapsable: {
+      type: Boolean,
+      default: false,
+    },
+    minHeightPercent: {
+      type: Number,
+      default: 50,
+    },
+    topPercentHeight: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -80,20 +94,35 @@ export default {
       });
     },
   },
+
   mounted() {
     this.resizer = this.$refs.resizableBar;
     this.upSide = this.resizer.previousElementSibling;
     this.downSide = this.resizer.nextElementSibling;
 
     this.limitElementHeight(this.upSide);
+    if (!this.collapsable) {
+      this.limitElementHeight(this.downSide);
+    }
 
     this.resizer.addEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
 
     const savedPosition = this.getPosition();
-    this.isExpanded = savedPosition?.isExpanded ?? false;
-    this.upSide.style.height = savedPosition?.isExpanded
-      ? savedPosition?.position
-      : "100%";
+    if (savedPosition) {
+      if (savedPosition.isExpanded) {
+        this.isExpanded = savedPosition.isExpanded;
+        this.upSide.style.height = savedPosition.position;
+      } else {
+        this.isExpanded = false;
+        this.upSide.style.height = "100%";
+      }
+    } else if (this.topPercentHeight) {
+      this.isExpanded = false;
+      this.upSide.style.height = `${this.topPercentHeight}%`;
+    } else {
+      this.isExpanded = false;
+      this.upSide.style.height = "100%";
+    }
   },
   destroyed() {
     this.resizer.removeEventListener(EVENT.MOUSE_DOWN, this.mouseDownHandler);
@@ -102,7 +131,7 @@ export default {
     savePosition() {},
     limitElementHeight(element) {
       element.style["max-height"] = "100%";
-      element.style["min-height"] = "50%";
+      element.style["min-height"] = `${this.minHeightPercent}%`;
     },
     savePositionOnStartResizing(e) {
       this.upSidePrevPosition = {
@@ -169,11 +198,11 @@ export default {
 $resizabla-bar-color: #6794fe;
 $collapsed-panel-height: 50px;
 $resizable-bar-width: $base-space;
-.resizable {
+.resizable-h {
   $this: &;
   display: flex;
-  justify-content: space-between;
   flex-direction: column;
+  justify-content: space-between;
   height: 100%;
   min-height: 0;
   width: 100%;
@@ -190,6 +219,8 @@ $resizable-bar-width: $base-space;
     margin-bottom: calc(-#{$resizable-bar-width} / 2);
     @include media("<desktop") {
       height: auto !important;
+      max-height: none !important;
+      min-height: auto !important;
     }
     .--h-resizing & {
       transition: none;
@@ -203,11 +234,17 @@ $resizable-bar-width: $base-space;
     flex-direction: column;
     justify-content: center;
     min-height: $collapsed-panel-height;
+    margin-top: calc(-#{$resizable-bar-width} / 2);
     &.panel {
       @include media(">=desktop") {
         border: none;
       }
     }
+    @include media("<desktop") {
+      height: auto !important;
+      max-height: none !important;
+      min-height: auto !important;
+    }
   }
 
   &__bar {
diff --git a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
index a8314c71f2..1c1f95cb90 100644
--- a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
+++ b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="resizable" :class="resizing ? '--v-resizing' : ''">
-    <div class="resizable__left"><slot name="left" /></div>
+  <div class="resizable-v" :class="resizing ? '--v-resizing' : ''">
+    <div class="resizable-v__left"><slot name="left" /></div>
 
-    <div class="resizable__bar" ref="resizableBar">
-      <div class="resizable__bar__inner" />
+    <div class="resizable-v__bar" ref="resizableBar">
+      <div class="resizable-v__bar__inner" />
     </div>
 
-    <div class="resizable__right"><slot name="right" /></div>
+    <div class="resizable-v__right"><slot name="right" /></div>
     <slot></slot>
   </div>
 </template>
@@ -26,6 +26,13 @@ export default {
       type: String,
       default: "v-rz",
     },
+    minWidthPercent: {
+      type: Number,
+      default: 38,
+    },
+    leftPercentWidth: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -52,6 +59,8 @@ export default {
     const savedPosition = this.getPosition();
     if (savedPosition) {
       this.leftSide.style.width = savedPosition;
+    } else if (this.leftPercentWidth) {
+      this.leftSide.style.width = `${this.leftPercentWidth}%`;
     }
   },
   destroyed() {
@@ -59,8 +68,8 @@ export default {
   },
   methods: {
     limitElementWidth(element) {
-      element.style["max-width"] = "62%";
-      element.style["min-width"] = "38%";
+      element.style["max-width"] = `${100 - this.minWidthPercent}%`;
+      element.style["min-width"] = `${this.minWidthPercent}%`;
     },
     savePositionOnStartResizing(e) {
       this.leftSidePrevPosition = {
@@ -107,13 +116,17 @@ export default {
 $resizabla-bar-color: #6794fe;
 $resizable-bar-width: $base-space;
 
-.resizable {
+.resizable-v {
   $this: &;
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   height: 100%;
   min-height: 0;
   width: 100%;
+  @include media("<desktop") {
+    flex-direction: column;
+  }
   &.--v-resizing {
     user-select: none;
   }
diff --git a/argilla-frontend/components/features/annotation/container/fields/Record.vue b/argilla-frontend/components/features/annotation/container/fields/Record.vue
index dc9dd4b690..63317f61d0 100644
--- a/argilla-frontend/components/features/annotation/container/fields/Record.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/Record.vue
@@ -11,7 +11,10 @@
         :datasetVectors="datasetVectors"
         :selectedRecords="selectedRecords"
         @on-select-record="onSelectedRecord"
-      />
+        ><template slot="intro">
+          <slot name="intro" />
+        </template>
+      </RecordFieldsHeader>
       <div class="record__content">
         <RecordFields
           :record="record"
@@ -48,7 +51,7 @@ export default {
   computed: {
     spanQuestionsAnswers() {
       return this.record?.questions
-        .filter((q) => q.isSpanType)
+        ?.filter((q) => q.isSpanType)
         .map((q) => ({
           id: q.id,
           answer: q.answer.values,
@@ -61,7 +64,7 @@ export default {
       handler() {
         if (
           this.record?.questions
-            .filter((q) => q.isSpanType)
+            ?.filter((q) => q.isSpanType)
             .some((q) => q.isAnswerModified)
         ) {
           this.onSelectedRecord(true);
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordFields.vue b/argilla-frontend/components/features/annotation/container/fields/RecordFields.vue
index 2ce0ceaa6b..ed8f523649 100644
--- a/argilla-frontend/components/features/annotation/container/fields/RecordFields.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/RecordFields.vue
@@ -83,7 +83,7 @@ export default {
   },
   computed: {
     spanQuestions() {
-      return this.record?.questions.filter((q) => q.isSpanType);
+      return this.record?.questions?.filter((q) => q.isSpanType);
     },
   },
 };
@@ -95,7 +95,5 @@ export default {
   flex-direction: column;
   gap: $base-space;
   min-width: 0;
-  height: 100%;
-  min-height: 0;
 }
 </style>
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordFieldsHeader.vue b/argilla-frontend/components/features/annotation/container/fields/RecordFieldsHeader.vue
index 6d87a9ac5e..660268a7ce 100644
--- a/argilla-frontend/components/features/annotation/container/fields/RecordFieldsHeader.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/RecordFieldsHeader.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="fields__header">
+    <slot name="intro"></slot>
     <div class="fields__header--left">
       <BaseCheckbox
         v-if="Array.isArray(selectedRecords)"
diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue b/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
index be4736b86e..d5c84d3ef4 100644
--- a/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="record.status"
     :key="record.status"
     :class="['status-tag', getStatusInfo.class]"
     :title="getStatusInfo.name"
diff --git a/argilla-frontend/components/features/annotation/container/fields/custom-field/CustomField.vue b/argilla-frontend/components/features/annotation/container/fields/custom-field/CustomField.vue
index b3493cd41b..aa34dcf89c 100644
--- a/argilla-frontend/components/features/annotation/container/fields/custom-field/CustomField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/custom-field/CustomField.vue
@@ -52,7 +52,7 @@ export default {
     },
     sdkRecord: {
       type: Object,
-      required: true,
+      default: () => ({}),
     },
   },
   computed: {
diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
index e5c54f43f7..958cf315e9 100644
--- a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -9,6 +9,7 @@
         <HorizontalResizable
           :id="`${recordCriteria.datasetId}-r-h-rz`"
           class="wrapper__left"
+          collapsable
         >
           <template #up>
             <section class="wrapper__records">
@@ -119,6 +120,7 @@
         <HorizontalResizable
           :id="`${recordCriteria.datasetId}-q-h-rz}`"
           class="wrapper__right"
+          collapsable
         >
           <template #up>
             <QuestionsForm
@@ -445,7 +447,7 @@ export default {
   }
   &__left {
     @include media("<desktop") {
-      :deep(.resizable__down) {
+      :deep(.resizable-h__down) {
         display: none;
       }
     }
diff --git a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
index e449d6de36..0f88a6ae73 100644
--- a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
+++ b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
@@ -4,6 +4,7 @@
       <HorizontalResizable
         :id="`${recordCriteria.datasetId}-r-h-rz`"
         class="wrapper__left"
+        collapsable
       >
         <template #up>
           <section class="wrapper__records">
@@ -52,6 +53,7 @@
       <HorizontalResizable
         :id="`${recordCriteria.datasetId}-q-h-rz}`"
         class="wrapper__right"
+        collapsable
       >
         <template #up>
           <QuestionsForm
@@ -176,7 +178,7 @@ export default {
   }
   &__left {
     @include media("<desktop") {
-      :deep(.resizable__down) {
+      :deep(.resizable-h__down) {
         display: none;
       }
     }
diff --git a/argilla-frontend/components/features/dataset-creation/DatasetCreation.vue b/argilla-frontend/components/features/dataset-creation/DatasetCreation.vue
new file mode 100644
index 0000000000..bc09f0e2e1
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/DatasetCreation.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="dataset-creation">
+    <main class="container">
+      <div class="dataset-creation__intro">
+        <h1 class="dataset-creation__title">Welcome</h1>
+        <h2 class="dataset-creation__subtitle">
+          For more information on how to get started with Argilla please refer
+          to the documentation.
+        </h2>
+      </div>
+      <div class="dataset-creation__card card --hf">
+        <h1 class="card__title">Start from an existing dataset</h1>
+        <h2 class="card__subtitle">
+          Easily load an existing dataset from the 🤗 Hugging Face Hub
+        </h2>
+        <p class="card__text">
+          Paste a repository ID of the dataset you want to work with
+        </p>
+        <div class="dataset-creation__paste">
+          <BaseInputContainer class="dataset-creation__input">
+            <BaseInput v-model="repositoryId" placeholder="Repository ID" />
+          </BaseInputContainer>
+          <BaseButton class="primary" @click="loadDatasetFromHF"
+            >Import Dataset</BaseButton
+          >
+        </div>
+      </div>
+      <div class="dataset-creation__card card">
+        <h1 class="card__title">
+          Fully configure the dataset from Argilla SDK
+        </h1>
+        <h2 class="card__subtitle">Recommended for custom datasets.</h2>
+        <p class="card__text">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda,
+          ut sed excepturi repellendus sequi expedita, et tempora quibusdam
+          laudantium debitis eos dolorum quidem id cupiditate iusto illum vel
+          sunt reiciendis.
+        </p>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    repositoryId: "argilla/FinePersonas-v0.1",
+  }),
+  methods: {
+    loadDatasetFromHF() {
+      this.$emit("load-dataset-from-hf", this.repositoryId.trim());
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-creation {
+  height: 100%;
+  background-color: var(--bg-accent-grey-1);
+  min-height: 0;
+  &__title {
+    @include font-size(32px);
+  }
+  &__subtitle {
+    @include font-size(18px);
+    font-weight: 400;
+    margin-bottom: 0;
+  }
+  &__card {
+    padding: $base-space * 3;
+    border-radius: $border-radius-m;
+    border: 1px solid var(--bg-opacity-10);
+    background: var(--bg-opacity-4);
+    &.--hf {
+      border-color: hsla(50, 100%, 50%, 0.8);
+      background: hsla(50, 100%, 50%, 0.12);
+    }
+  }
+  &__paste {
+    display: flex;
+    gap: $base-space * 2;
+  }
+  &__input {
+    width: 300px;
+    padding: 0 $base-space;
+    border-radius: $border-radius;
+    border: 1px solid var(--bg-opacity-10);
+    background: var(--bg-accent-grey-1);
+    &:focus-within {
+      border-color: var(--fg-cuaternary);
+    }
+    input {
+      @include input-placeholder {
+        color: var(--fg-tertiary);
+      }
+    }
+  }
+}
+.card {
+  &__title {
+    margin-top: 0;
+    @include font-size(24px);
+    font-weight: 500;
+  }
+  &__subtitle {
+    margin-top: 0;
+    @include font-size(16px);
+    @include line-height(24px);
+    font-weight: 400;
+  }
+  &__text {
+    margin-top: 0;
+    color: var(--fg-secondary);
+    @include font-size(14px);
+    @include line-height(24px);
+    font-weight: 300;
+  }
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: $base-space * 4;
+  height: 100%;
+  max-width: 1500px;
+  padding: $base-space * 4 $base-space * 8;
+  margin: 0 auto;
+  overflow: auto;
+  @include media("<desktop") {
+    padding: $base-space * 2;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue
new file mode 100644
index 0000000000..3ee5a6afc7
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="dataset-config">
+    <HorizontalResizable
+      :min-height-percent="30"
+      :top-percent-height="34"
+      :id="`dataset-config-r-h-rz`"
+      class="wrapper"
+    >
+      <template #up>
+        <VerticalResizable
+          :id="`dataset-config-left-t-v-rz`"
+          :left-percent-width="64"
+        >
+          <template #left>
+            <div class="dataset-config__fields">
+              <Record
+                v-if="firstRecord"
+                :key="JSON.stringify(dataset.mappedFields)"
+                :recordCriteria="{
+                  committed: {
+                    searchText: {
+                      value: {
+                        text: '',
+                      },
+                    },
+                  },
+                }"
+                :record="{
+                  fields: dataset.createFields(firstRecord),
+                }"
+                ><template slot="intro">
+                  <span class="dataset-config__dataset-preview"
+                    >Record preview
+                  </span></template
+                >
+              </Record>
+            </div>
+          </template>
+          <template #right>
+            <div class="dataset-config__questions-wrapper">
+              <p
+                v-if="!dataset.questions.length"
+                class="dataset-config__empty-questions"
+                v-text="'Your questions'"
+              />
+
+              <QuestionsComponent
+                class="dataset-config__questions"
+                v-else
+                :questions="dataset.questions"
+              />
+            </div>
+          </template>
+        </VerticalResizable>
+      </template>
+      <template #down>
+        <VerticalResizable
+          class="dataset-config__down"
+          :id="`dataset-preview-t-v-rz`"
+          :left-percent-width="36"
+        >
+          <template #left>
+            <div class="dataset-config__preview">
+              <iframe
+                v-if="!!dataset.repoId"
+                :src="`https://huggingface.co/datasets/${dataset.repoId}/embed/viewer/ParaphraseRC/train`"
+                frameborder="0"
+                width="100%"
+                height="500px"
+              ></iframe>
+            </div>
+          </template>
+          <template #right>
+            <div class="dataset-config__configuration">
+              <DatasetConfigurationForm
+                :dataset="dataset"
+                @change-subset="$emit('change-subset', $event)"
+              />
+            </div>
+          </template>
+        </VerticalResizable>
+      </template>
+    </HorizontalResizable>
+  </div>
+</template>
+
+<script>
+import { useDatasetConfiguration } from "./useDatasetConfiguration";
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.getFirstRecord(this.dataset);
+  },
+  setup() {
+    return useDatasetConfiguration();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  @include media("<desktop") {
+    overflow: auto;
+  }
+}
+.dataset-config {
+  height: 100%;
+  min-height: 0;
+  &__fields {
+    width: 100%;
+    height: 100%;
+    padding: $base-space * 2;
+    :deep(.record) {
+      border-style: dashed;
+      border-color: var(--bg-opacity-10);
+    }
+  }
+  &__down {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    :deep(.resizable-v__left) {
+      background: var(--bg-accent-grey-1);
+    }
+  }
+  &__preview {
+    align-items: flex-start;
+    justify-items: center;
+    padding: $base-space * 2;
+    width: 40vw;
+    height: 100%;
+    overflow: auto;
+  }
+  &__empty-questions {
+    width: 100%;
+    text-align: center;
+    padding: $base-space * 4;
+    color: var(--fg-secondary);
+    background-color: var(--bg-accent-grey-1);
+    border: 1px dashed var(--bg-opacity-10);
+    border-radius: $border-radius-m;
+    margin: 0;
+    @include font-size(16px);
+  }
+  &__dataset-preview {
+    color: var(--fg-secondary);
+    @include font-size(16px);
+  }
+  &__questions-wrapper {
+    width: 100%;
+    height: 100%;
+    padding: $base-space * 2;
+    overflow: auto;
+  }
+  &__questions {
+    background: var(--bg-form);
+    border: 1px solid var(--bg-opacity-6);
+    border-radius: $border-radius-m;
+    display: flex;
+    flex-direction: column;
+    gap: $base-space * 2;
+    overflow: auto;
+    padding: $base-space * 2;
+    position: relative;
+    scroll-behavior: smooth;
+  }
+  &__configuration {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue
new file mode 100644
index 0000000000..d8cd44aca5
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationDialog.vue
@@ -0,0 +1,150 @@
+<template>
+  <transition name="fade" appear>
+    <dialog class="dataset-config-dialog" v-click-outside="closeDialog">
+      <form
+        class="dataset-config-dialog__content"
+        @submit.prevent="createDataset"
+      >
+        <h1 class="dataset-config-dialog__title">
+          Create the dataset in Argilla
+        </h1>
+        <div class="dataset-config-dialog__row">
+          <label class="dataset-config-dialog__label" for="datasetName"
+            >Dataset name</label
+          >
+          <DatasetConfigurationInput
+            id="datasetName"
+            v-model="dataset.name"
+            placeholder="Name"
+          />
+        </div>
+        <div class="dataset-config-dialog__row">
+          <label class="dataset-config-dialog__label">Assign a workspace</label>
+          <DatasetConfigurationSelector
+            :options="workspaces"
+            v-model="dataset.workspace"
+          />
+        </div>
+
+        <div
+          class="dataset-config-dialog__row"
+          v-if="dataset.selectedSubset.splits?.length > 1"
+        >
+          <label class="dataset-config-dialog__label">Select a split</label>
+          <DatasetConfigurationSelector
+            class="config-form__selector"
+            :options="dataset.selectedSubset.splits"
+            v-model="dataset.selectedSplit"
+          />
+        </div>
+        <p class="dataset-config-dialog__info">
+          The created dataset will include the first 10K rows and further
+          records can be logged via the python SDK.
+        </p>
+        <BaseButton
+          :disabled="!dataset.name || !dataset.workspace"
+          :loading="isLoading"
+          type="submit"
+          class="dataset-config-dialog__button primary full"
+          >Create dataset</BaseButton
+        >
+      </form>
+    </dialog>
+  </transition>
+</template>
+<script>
+import { useDatasetConfigurationNameAndWorkspace } from "./useDatasetConfigurationNameAndWorkspace";
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    closeDialog() {
+      this.$emit("close-dialog");
+    },
+    createDataset() {
+      this.$emit("create-dataset");
+    },
+  },
+  setup() {
+    return useDatasetConfigurationNameAndWorkspace();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-config-dialog {
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: calc(100% - $base-space * 3);
+  bottom: $base-space;
+  display: block;
+  margin-left: auto;
+  padding: 0;
+  border: 1px solid var(--bg-opacity-10);
+  border-radius: $border-radius-m;
+  box-shadow: $shadow;
+  z-index: 1;
+  &__header {
+    padding: $base-space * 2;
+    border-top-left-radius: $border-radius-m;
+    border-top-right-radius: $border-radius-m;
+    background: linear-gradient(
+      90deg,
+      hsla(227, 31%, 57%, 0.1) 0%,
+      hsla(227, 56%, 52%, 0) 100%
+    );
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $base-space;
+    padding: $base-space * 2;
+  }
+  &__row {
+    display: flex;
+    flex-direction: column;
+    gap: calc($base-space / 2);
+  }
+  &__title {
+    font-weight: 500;
+    @include font-size(16px);
+    margin: 0 0 $base-space 0;
+  }
+  &__label {
+    font-weight: 400;
+    @include font-size(14px);
+  }
+  &__info {
+    font-weight: 400;
+    @include font-size(11px);
+    color: var(--fg-tertiary);
+    margin-bottom: 0;
+  }
+  &__button.button {
+    justify-content: center;
+  }
+  .selector {
+    &.dropdown {
+      @include font-size(12px);
+    }
+  }
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.4s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue
new file mode 100644
index 0000000000..2e2e9f51a0
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue
@@ -0,0 +1,221 @@
+<template>
+  <section class="config-form">
+    <div class="config-form__content">
+      <div class="config-form__col-wrapper">
+        <div
+          class="config-form__col"
+          v-if="dataset.selectedSubset.fields.length"
+        >
+          <div class="config-form__col__header">
+            Fields
+            <div class="config-form__subset" v-if="dataset.subsets.length > 1">
+              Subset:
+              <DatasetConfigurationSelector
+                class="config-form__selector"
+                :options="dataset.subsets"
+                :value="dataset.selectedSubset.name"
+                @onValueChange="$emit('change-subset', $event)"
+              >
+                <template slot="optionsIntro">
+                  <span class="config-form__selector__intro"
+                    >Your can create a dataset from only one subset.
+                  </span>
+                </template>
+              </DatasetConfigurationSelector>
+            </div>
+          </div>
+          <div class="config-form__col__content">
+            <draggable
+              class="config-form__draggable-area"
+              :list="dataset.selectedSubset.fields"
+              :group="{ name: 'fields' }"
+              :disabled="isFocused"
+            >
+              <DatasetConfigurationField
+                v-for="field in dataset.selectedSubset.fields.filter(
+                  (f) => f.name !== dataset.mappings.external_id
+                )"
+                :key="field.name"
+                :field="field"
+                :available-types="availableFieldTypes"
+                @is-focused="isFocused = $event"
+              />
+            </draggable>
+          </div>
+        </div>
+      </div>
+      <div class="config-form__col-wrapper">
+        <div class="config-form__col">
+          <div class="config-form__col__header">
+            Questions
+            <DatasetConfigurationAddQuestion
+              :options="[
+                'text',
+                'label_selection',
+                'multi_label_selection',
+                'rating',
+                'ranking',
+                'span',
+              ]"
+              @add-question="addQuestion($event)"
+            />
+          </div>
+          <div class="config-form__col__content --questions">
+            <draggable
+              v-if="dataset.selectedSubset.questions.length"
+              class="config-form__draggable-area"
+              :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
+                "
+                >Create Dataset</BaseButton
+              >
+              <DatasetConfigurationDialog
+                v-if="visibleDatasetCreationDialog"
+                :dataset="dataset"
+                :is-loading="isLoading"
+                @close-dialog="visibleDatasetCreationDialog = false"
+                @create-dataset="createDataset"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { useDatasetConfigurationForm } from "./useDatasetConfigurationForm";
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFocused: false,
+      visibleDatasetCreationDialog: false,
+    };
+  },
+  methods: {
+    createDataset() {
+      this.create(this.dataset);
+    },
+    addQuestion(type) {
+      const questionName = `${type} ${this.dataset.selectedSubset.questions.length}`;
+      this.dataset.selectedSubset.addQuestion(questionName, { type });
+    },
+    onTypeIsChanged(name, type) {
+      this.dataset.selectedSubset.addQuestion(name, {
+        type: type.value,
+      });
+    },
+  },
+  setup() {
+    return useDatasetConfigurationForm();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.config-form {
+  display: flex;
+  flex-direction: column;
+  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;
+  }
+  &__col-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 440px;
+  }
+  &__col {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-accent-grey-1);
+    border: 1px solid var(--bg-opacity-6);
+    border-radius: $border-radius-m;
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      min-height: $base-space * 7;
+      align-items: center;
+      padding: $base-space * 2 $base-space * 2 $base-space $base-space * 2;
+      font-weight: 500;
+    }
+    &__content {
+      display: flex;
+      flex-direction: column;
+      padding: $base-space $base-space * 2 $base-space * 2;
+      gap: $base-space;
+      overflow: auto;
+      height: 100%;
+      &.--questions {
+        padding-bottom: $base-space * 9;
+      }
+    }
+  }
+  &__draggable-area {
+    display: flex;
+    flex-direction: column;
+    gap: $base-space;
+  }
+  &__selector {
+    &__intro {
+      display: block;
+      padding: 4px;
+      background: var(--bg-congig-alert);
+      @include font-size(12px);
+      @include line-height(16px);
+    }
+  }
+  &__subset {
+    display: flex;
+    gap: $base-space;
+    align-items: center;
+    font-weight: 400;
+  }
+  &__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;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/fields/DatasetConfigurationField.vue b/argilla-frontend/components/features/dataset-creation/configuration/fields/DatasetConfigurationField.vue
new file mode 100644
index 0000000000..1743c0c2dd
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/fields/DatasetConfigurationField.vue
@@ -0,0 +1,57 @@
+<template>
+  <DatasetConfigurationCard
+    :item="field"
+    config-type="field"
+    :available-types="availableTypes"
+    @is-focused="$emit('is-focused', $event)"
+  >
+    <BaseCheckbox
+      class="config-card__required"
+      v-if="!hasNoMapping"
+      :value="field.required"
+      @input="field.required = !field.required"
+    >
+      Required field</BaseCheckbox
+    >
+  </DatasetConfigurationCard>
+</template>
+
+<script>
+export default {
+  props: {
+    field: {
+      type: Object,
+      required: true,
+    },
+    availableTypes: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    hasNoMapping() {
+      return this.field.type.value === "no mapping";
+    },
+  },
+  model: {
+    prop: "type",
+    event: "change",
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.config-card__required {
+  display: flex;
+  gap: $base-space;
+  margin-top: $base-space;
+  @include font-size(12px);
+  flex-flow: row-reverse;
+  justify-content: flex-end;
+  &:deep(.checkbox__container) {
+    margin: 0;
+    border-color: var(--bg-opacity-20);
+    background: var(--bg-accent-grey-1);
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue
new file mode 100644
index 0000000000..84d1234e7b
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue
@@ -0,0 +1,95 @@
+<template>
+  <BaseDropdown
+    class="add-question-selector"
+    :visible="dropdownIsVisible"
+    @visibility="onVisibility"
+    v-if="options.length"
+  >
+    <template slot="dropdown-header">
+      <BaseButton class="add-question-selector__button"
+        ><span class="add-question-selector__button-icon"
+          ><svgicon name="plus" /></span
+      ></BaseButton>
+    </template>
+    <template slot="dropdown-content">
+      <ul class="add-question-selector__options">
+        <li
+          class="add-question-selector__option"
+          v-for="option in options"
+          :key="option"
+          @click="selectOption(option)"
+        >
+          {{ $t(`config.question.${option}`) }}
+        </li>
+      </ul>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script>
+import "assets/icons/plus";
+export default {
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dropdownIsVisible: false,
+    };
+  },
+  methods: {
+    onVisibility(value) {
+      this.dropdownIsVisible = value;
+    },
+    selectOption(option) {
+      this.$emit("add-question", option, option);
+
+      this.dropdownIsVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.add-question-selector {
+  user-select: none;
+  font-weight: 500;
+  &__button {
+    padding: 0;
+    color: var(--fg-primary);
+  }
+  &__button-icon {
+    padding: $base-space;
+    border-radius: $border-radius;
+    border: 1px dashed var(--bg-opacity-20);
+  }
+
+  :deep(.dropdown__content) {
+    min-width: 100%;
+    top: 0;
+    left: auto;
+    right: calc(100% + $base-space);
+  }
+
+  &__options {
+    min-width: 100%;
+    list-style: none;
+    padding: calc($base-space / 2);
+    margin: 0;
+  }
+  &__option {
+    padding: calc($base-space / 2);
+    border-radius: $border-radius;
+    transition: all 0.2s ease-in;
+    width: max-content;
+    min-width: 100%;
+    cursor: pointer;
+    &:hover {
+      background: var(--bg-opacity-4);
+      transition: all 0.2s ease-out;
+    }
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationColumnSelector.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationColumnSelector.vue
new file mode 100644
index 0000000000..c0fbf1304a
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationColumnSelector.vue
@@ -0,0 +1,141 @@
+<template>
+  <BaseDropdown
+    class="column-selector"
+    :visible="dropdownIsVisible"
+    @visibility="onVisibility"
+    v-if="options.length"
+  >
+    <template slot="dropdown-header">
+      <svgicon name="assign" height="12" />
+      Map to column
+      <span v-if="!noMapping" class="column-selector__chip" v-text="value" />
+    </template>
+    <template slot="dropdown-content">
+      <span class="column-selector__options__intro">Column</span>
+      <ul class="column-selector__options">
+        <li
+          :class="
+            option === value
+              ? 'column-selector__option--selected'
+              : 'column-selector__option'
+          "
+          v-for="(option, index) in filteredOptions"
+          :key="index"
+          @click="selectOption(option)"
+        >
+          {{ option?.name ?? option }}
+        </li>
+      </ul>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script>
+import "assets/icons/assign";
+export default {
+  props: {
+    value: {
+      type: [Object, String],
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  model: {
+    prop: "value",
+    event: "onValueChange",
+  },
+  data() {
+    return {
+      dropdownIsVisible: false,
+    };
+  },
+  computed: {
+    filteredOptions() {
+      return this.options.filter(
+        (option) => JSON.stringify(option) !== JSON.stringify(this.value)
+      );
+    },
+    noMapping() {
+      return this.value === "no mapping";
+    },
+  },
+  methods: {
+    onVisibility(value) {
+      this.dropdownIsVisible = value;
+    },
+    selectOption(option) {
+      this.$emit("onValueChange", option);
+
+      this.dropdownIsVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.column-selector {
+  user-select: none;
+  font-weight: 400;
+
+  :deep(.dropdown__header) {
+    display: flex;
+    gap: $base-space;
+    flex-wrap: wrap;
+    min-height: $base-space * 4;
+    border: none;
+    color: var(--fg-cuaternary);
+    &:hover {
+      background: none;
+    }
+  }
+
+  :deep(.dropdown__content) {
+    bottom: 0;
+    top: auto;
+    right: auto;
+    min-width: 140px;
+  }
+
+  &__options {
+    min-width: 100%;
+    list-style: none;
+    padding: calc($base-space / 2);
+    margin: 0;
+    max-height: 120px;
+    overflow-y: auto;
+    &__intro {
+      display: block;
+      padding: 2px;
+      font-weight: 300;
+    }
+  }
+  &__chip {
+    padding: calc($base-space / 2) $base-space;
+    border-radius: $border-radius-m;
+    background: var(--bg-accent-grey-1);
+    color: var(--fg-cuaternary);
+    @include font-size(12px);
+  }
+  &__option {
+    padding: calc($base-space / 2);
+    border-radius: $border-radius;
+    transition: all 0.2s ease-in;
+    width: max-content;
+    min-width: 100%;
+    cursor: pointer;
+    &:hover {
+      background: var(--bg-opacity-4);
+      transition: all 0.2s ease-out;
+    }
+    &--selected {
+      background: var(--bg-opacity-4);
+      @extend .column-selector__option;
+    }
+  }
+  .svg-icon {
+    flex-shrink: 0;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationInput.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationInput.vue
new file mode 100644
index 0000000000..12d660f63e
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationInput.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="dataset-config__input-container">
+    <input
+      type="text"
+      :value="value"
+      @input="onInput($event.target.value)"
+      @focus="$emit('is-focused', true)"
+      @blur="$emit('is-focused', false)"
+      :placeholder="placeholder"
+      class="dataset-config__input"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+  model: {
+    prop: "value",
+    event: "on-value-change",
+  },
+  methods: {
+    onInput(value) {
+      this.$emit("on-value-change", value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-config__input-container {
+  width: 100%;
+  padding: 0 $base-space;
+  border-radius: $border-radius;
+  border: 1px solid var(--bg-opacity-10);
+  background: var(--bg-accent-grey-1);
+  &:focus-within {
+    border-color: var(--fg-cuaternary);
+  }
+}
+.dataset-config__input {
+  height: calc($base-space * 4 - 2px);
+  padding: 0;
+  border: none;
+  background: none;
+  width: 100%;
+  outline: none;
+  color: var(--fg-secondary);
+  @include font-size(12px);
+  @include input-placeholder {
+    color: var(--fg-tertiary);
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationLabels.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationLabels.vue
new file mode 100644
index 0000000000..69840ec0b1
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationLabels.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="dataset-config-label__input-container">
+      <input
+        :class="{ error: error }"
+        type="text"
+        :value="optionsJoinedByCommas"
+        @input="onInput($event.target.value)"
+        @focus.stop="onFocus"
+        @blur="onBlur"
+        :placeholder="placeholder"
+        class="dataset-config-label__input"
+      />
+    </div>
+    <label
+      class="dataset-config-label__label --error"
+      v-if="error"
+      v-text="error"
+    />
+    <label
+      v-else
+      class="dataset-config-label__label"
+      v-text="`Use coma to separate labels`"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      error: "",
+      isDirty: false,
+    };
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+  model: {
+    prop: "value",
+    event: "on-value-change",
+  },
+  computed: {
+    optionsJoinedByCommas() {
+      return this.value.map((item) => item.text).join(",");
+    },
+  },
+  watch: {
+    error(newValue) {
+      if (this.isDirty && newValue) {
+        this.validateOptions();
+      }
+    },
+  },
+  methods: {
+    validateOptions() {
+      const options = this.value.map((item) => item.text);
+      if (!options.length) {
+        this.error = "At least two labels are required";
+      } else if (options.some((option) => !option)) {
+        this.error = "Empty labels are not allowed";
+      } else {
+        this.error = "";
+      }
+    },
+    onFocus() {
+      this.$emit("is-focused", true);
+    },
+    onBlur() {
+      this.isDirty = true;
+      this.validateOptions();
+      this.$emit("is-focused", false);
+    },
+    onInput(inputValue) {
+      const optionsArray = inputValue.split(",");
+      const trimmedOptionsArray = optionsArray.map((text) => ({
+        value: text.trim(),
+        id: text.trim(),
+        text: text.trim(),
+      }));
+      this.$emit("on-value-change", trimmedOptionsArray);
+      if (this.isDirty) {
+        this.validateOptions();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-config-label {
+  &__input-container {
+    width: 100%;
+    padding: 0 $base-space;
+    border-radius: $border-radius;
+    border: 1px solid var(--bg-opacity-10);
+    background: var(--bg-accent-grey-1);
+    &:focus-within {
+      border-color: var(--fg-cuaternary);
+    }
+  }
+  &__input {
+    height: calc($base-space * 4 - 2px);
+    padding: 0;
+    border: none;
+    background: none;
+    width: 100%;
+    outline: none;
+    color: var(--fg-secondary);
+    @include font-size(12px);
+    @include input-placeholder {
+      color: var(--fg-tertiary);
+    }
+  }
+  &__label {
+    color: var(--fg-secondary);
+    @include font-size(12px);
+    &--error {
+      color: var(--fg-error);
+    }
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue
new file mode 100644
index 0000000000..9c9fb5a1d2
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue
@@ -0,0 +1,128 @@
+<template>
+  <DatasetConfigurationCard
+    :item="question"
+    config-type="question"
+    :available-types="availableTypes"
+    @is-focused="$emit('is-focused', $event)"
+    @change-type="$emit('change-type', $event)"
+  >
+    <BaseButton
+      class="config-card__remove"
+      @click="remove"
+      v-if="removeIsAllowed"
+      ><svgicon name="close"
+    /></BaseButton>
+
+    <template v-if="noMapping">
+      <DatasetConfigurationLabels
+        v-if="
+          question.settings.type.isSingleLabelType ||
+          question.settings.type.isMultiLabelType
+        "
+        v-model="question.settings.options"
+        @is-focused="$emit('is-focused', $event)"
+      />
+      <DatasetConfigurationSpan
+        v-else-if="question.settings.type.isSpanType"
+        v-model="question.settings.options"
+        @is-focused="$emit('is-focused', $event)"
+      />
+      <DatasetConfigurationRating
+        v-else-if="question.settings.type.isRatingType"
+        v-model="question.settings.options"
+        @is-focused="$emit('is-focused', $event)"
+      />
+      <DatasetConfigurationRanking
+        v-else-if="question.settings.type.isRankingType"
+        v-model="question.settings.options"
+        @is-focused="$emit('is-focused', $event)"
+      />
+    </template>
+    <span class="separator"></span>
+    <DatasetConfigurationColumnSelector
+      v-if="!hiddenColumnSelector"
+      class="config-card__type"
+      :options="columns"
+      v-model="question.column"
+    />
+    <BaseCheckbox
+      class="config-card__required"
+      :value="question.required"
+      @input="question.required = !question.required"
+    >
+      Required question</BaseCheckbox
+    >
+  </DatasetConfigurationCard>
+</template>
+
+<script>
+import "assets/icons/close";
+export default {
+  props: {
+    question: {
+      type: Object,
+      required: true,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    removeIsAllowed: {
+      type: Boolean,
+      default: false,
+    },
+    availableTypes: {
+      type: Array,
+      required: true,
+    },
+  },
+  model: {
+    prop: "type",
+    event: "change",
+  },
+  computed: {
+    noMapping() {
+      return this.question.column === "no mapping";
+    },
+    hiddenColumnSelector() {
+      return (
+        this.question.settings.type.isRankingType ||
+        this.question.settings.type.isSpanType
+      );
+    },
+  },
+  methods: {
+    remove() {
+      this.$emit("remove");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.config-card {
+  &__remove.button {
+    position: absolute;
+    top: $base-space * 1.5;
+    right: $base-space * 1.5;
+    padding: 0;
+  }
+  &__required {
+    display: flex;
+    gap: $base-space;
+    @include font-size(12px);
+    flex-flow: row-reverse;
+    justify-content: flex-end;
+    &:deep(.checkbox__container) {
+      margin: 0;
+      border-color: var(--bg-opacity-20);
+      background: var(--bg-accent-grey-1);
+    }
+  }
+  .separator {
+    width: 100%;
+    height: 1px;
+    background: var(--bg-opacity-6);
+    margin-top: calc($base-space / 2);
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRanking.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRanking.vue
new file mode 100644
index 0000000000..0affc3a895
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRanking.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="dataset-config-ranking">
+    <div
+      class="dataset-config-ranking__input-container"
+      v-for="(item, index) in value"
+      :key="index"
+    >
+      <input
+        type="text"
+        :value="item.value"
+        @input="onInput(index, $event.target.value)"
+        @focus="$emit('is-focused', true)"
+        @blur="$emit('is-focused', false)"
+        :placeholder="placeholder"
+        class="dataset-config-ranking__input"
+      />
+      <BaseButton
+        v-if="value.length >= 3"
+        @click="removeOption(item)"
+        class="dataset-config-ranking__remove-button"
+      >
+        <svgicon name="close" width="12" color="var(--fg-tertiary)" />
+      </BaseButton>
+    </div>
+    <BaseButton
+      @click="addOption"
+      class="secondary small dataset-config-ranking__add-button"
+      ><svgicon name="plus" width="12" color="var(--fg-secondary)" /> Include
+      option</BaseButton
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+  model: {
+    prop: "value",
+    event: "on-value-change",
+  },
+  methods: {
+    removeOption(item) {
+      const newValue = this.value.filter((value) => value !== item);
+      this.$emit("on-value-change", newValue);
+    },
+    addOption() {
+      const newValue = [
+        ...this.value,
+        {
+          value: `option ${this.value.length + 1}`,
+          text: `option ${this.value.length + 1}`,
+        },
+      ];
+      this.$emit("on-value-change", newValue);
+    },
+    onInput(index, value) {
+      const newValue = this.value.map((item, i) =>
+        i === index ? { ...item, value } : item
+      );
+      this.$emit("on-value-change", newValue);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-config-ranking {
+  display: flex;
+  flex-direction: column;
+  gap: $base-space;
+  &__input-container {
+    display: flex;
+    align-items: center;
+    align-content: space-between;
+    width: 100%;
+    padding: 0 $base-space;
+    border-radius: $border-radius;
+    border: 1px solid var(--bg-opacity-10);
+    background: var(--bg-accent-grey-1);
+    &:focus-within {
+      border-color: var(--fg-cuaternary);
+    }
+  }
+  &__input {
+    height: calc($base-space * 4 - 2px);
+    padding: 0;
+    border: none;
+    background: none;
+    width: 100%;
+    outline: none;
+    color: var(--fg-secondary);
+    @include input-placeholder {
+      color: var(--fg-tertiary);
+    }
+  }
+  &__remove-button.button {
+    padding: 0;
+  }
+  &__add-button {
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue
new file mode 100644
index 0000000000..eef874c642
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="dataset-config-rating__input-container">
+    <input
+      type="number"
+      min="2"
+      :value="value.length"
+      @input="onInput($event.target.value)"
+      @focus="$emit('is-focused', true)"
+      @blur="$emit('is-focused', false)"
+      :placeholder="placeholder"
+      class="dataset-config-rating__input"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+  model: {
+    prop: "value",
+    event: "on-value-change",
+  },
+  computed: {
+    namesJoinedByCommas() {
+      return this.value.map((item) => item.name).join(", ");
+    },
+  },
+  methods: {
+    onInput(inputValue) {
+      const valuesArray = Array.from({ length: inputValue }, (_, i) => ({
+        value: i + 1,
+      }));
+      this.$emit("on-value-change", valuesArray);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-config-rating__input-container {
+  width: 100px;
+  padding: 0 $base-space;
+  border-radius: $border-radius;
+  border: 1px solid var(--bg-opacity-10);
+  background: var(--bg-accent-grey-1);
+  &:focus-within {
+    border-color: var(--fg-cuaternary);
+  }
+}
+.dataset-config-rating__input {
+  height: calc($base-space * 4 - 2px);
+  padding: 0;
+  border: none;
+  background: none;
+  width: 100%;
+  outline: none;
+  color: var(--fg-secondary);
+  @include input-placeholder {
+    color: var(--fg-tertiary);
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationSpan.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationSpan.vue
new file mode 100644
index 0000000000..bb44c4f253
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationSpan.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="dataset-config-label__input-container">
+      <input
+        :class="{ error: error }"
+        type="text"
+        :value="optionsJoinedByCommas"
+        @input="onInput($event.target.value)"
+        @focus="onFocus"
+        @blur="onBlur"
+        :placeholder="placeholder"
+        class="dataset-config-label__input"
+      />
+    </div>
+    <label
+      class="dataset-config-label__label --error"
+      v-if="error"
+      v-text="error"
+    />
+    <label
+      v-else
+      class="dataset-config-label__label"
+      v-text="`Use coma to separate labels`"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      error: "",
+      isDirty: false,
+    };
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+  model: {
+    prop: "value",
+    event: "on-value-change",
+  },
+  computed: {
+    optionsJoinedByCommas() {
+      return this.value.map((item) => item.text).join(",");
+    },
+  },
+  watch: {
+    error(newValue) {
+      if (this.isDirty && newValue) {
+        this.validateOptions();
+      }
+    },
+  },
+  methods: {
+    validateOptions() {
+      const options = this.value.map((item) => item.text);
+      if (!options.length) {
+        this.error = "At least two labels are required";
+      } else if (options.some((option) => !option)) {
+        this.error = "Empty labels are not allowed";
+      } else {
+        this.error = "";
+      }
+    },
+    onFocus() {
+      this.$emit("is-focused", true);
+    },
+    onBlur() {
+      this.isDirty = true;
+      this.validateOptions();
+      this.$emit("is-focused", false);
+    },
+    onInput(inputValue) {
+      const optionsArray = inputValue.split(",");
+      const trimmedOptionsArray = optionsArray.map((text) => ({
+        value: text.trim(),
+        id: text.trim(),
+        text: text.trim(),
+        color: this.$color.generate(text),
+      }));
+      this.$emit("on-value-change", trimmedOptionsArray);
+      if (this.isDirty) {
+        this.validateOptions();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dataset-config-label {
+  &__input-container {
+    width: 100%;
+    padding: 0 $base-space;
+    border-radius: $border-radius;
+    border: 1px solid var(--bg-opacity-10);
+    background: var(--bg-accent-grey-1);
+    &:focus-within {
+      border-color: var(--fg-cuaternary);
+    }
+  }
+  &__input {
+    height: calc($base-space * 4 - 2px);
+    padding: 0;
+    border: none;
+    background: none;
+    width: 100%;
+    outline: none;
+    color: var(--fg-secondary);
+    @include font-size(12px);
+    @include input-placeholder {
+      color: var(--fg-tertiary);
+    }
+  }
+  &__label {
+    color: var(--fg-secondary);
+    @include font-size(12px);
+    &--error {
+      color: var(--fg-error);
+    }
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue
new file mode 100644
index 0000000000..46d6a33e0c
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="config-card__wrapper">
+    <div class="config-card">
+      <div class="config-card__content" :class="item.type.replace(/ /g, '')">
+        <h3 class="config-card__title">
+          <svgicon
+            class="config-card__icon"
+            width="6"
+            name="draggable"
+            color="var(--bg-opacity-20)"
+          />{{ item.name }}
+          <span v-if="item.dtype" class="config-card__dtype">{{
+            item.dtype
+          }}</span>
+        </h3>
+        <slot name="header" />
+        <div class="config-card__row">
+          <DatasetConfigurationChipsSelector
+            :id="item.name"
+            :type="configType"
+            class="config-card__type"
+            :options="availableTypes"
+            @onValueChange="$emit('change-type', $event)"
+            v-model="item.type"
+          />
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "assets/icons/draggable";
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    configType: {
+      type: String,
+      required: true,
+    },
+    availableTypes: {
+      type: Array,
+      required: true,
+    },
+    removeIsAllowed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasNoMapping() {
+      return this.item.type.value === "no mapping";
+    },
+  },
+  model: {
+    prop: "type",
+    event: "change",
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$validate-color: hsl(216, 55%, 54%);
+$error-color: hsl(3, 100%, 69%);
+$no-mapping-color: hsl(0, 0%, 50%);
+.config-card {
+  $this: &;
+  position: relative;
+  border-radius: $base-space * 2;
+  border: 1px solid hsl(from var(--bg-config-card) h s 86%);
+  background: var(--bg-config-card);
+  transition: all 0.3s ease-in;
+  &__wrapper {
+    border-radius: $base-space * 2;
+    background: var(--bg-accent-grey-1);
+    transition: all 0.3s ease-in;
+    cursor: pointer;
+    &:hover {
+      transition: all 0.2s ease-in;
+      box-shadow: 0 0 3px 1px var(--bg-opacity-10);
+      .config-card__icon {
+        opacity: 1;
+      }
+    }
+  }
+  &__content {
+    padding: $base-space * 2;
+    display: flex;
+    flex-direction: column;
+    gap: $base-space;
+  }
+  &__title {
+    display: flex;
+    gap: $base-space;
+    align-items: center;
+    margin: 0;
+    font-weight: 500;
+    @include font-size(14px);
+  }
+  &__icon {
+    position: absolute;
+    left: 6px;
+    top: 19px;
+    opacity: 0;
+  }
+  &__dtype {
+    font-family: monospace, monospace;
+    color: var(--fg-secondary);
+    font-weight: 400;
+    @include font-size(10px);
+  }
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: $base-space;
+    width: 100%;
+  }
+  &__type {
+    flex: 1;
+  }
+  :deep(.chip-selector__input + label) {
+    background: hsl(from var(--bg-accent-grey-1) h s l / 60%);
+    border-color: hsl(from var(--bg-config-card) h s 86%);
+  }
+  :deep(.chip-selector__input:checked + label) {
+    background: var(--bg-accent-grey-1);
+  }
+  &:has(.nomapping) {
+    border-color: var(--bg-opacity-10);
+    background: hsl(from var(--bg-config-card) h 40% 96%);
+    :deep(.chip-selector__input + label) {
+      background: hsl(from var(--bg-accent-grey-1) h s l / 50%);
+      border-color: var(--bg-opacity-10);
+    }
+    :deep(.chip-selector__input:checked + label) {
+      background: var(--bg-accent-grey-1);
+    }
+  }
+  &:has(.error) {
+    background: hsla(from $error-color h s l / 0.16);
+  }
+  &:deep(.re-switch-label) {
+    @include font-size(13px);
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue
new file mode 100644
index 0000000000..cdd4132796
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue
@@ -0,0 +1,90 @@
+<template>
+  <ul class="chip-selector__options">
+    <li
+      class="chip-selector__option"
+      v-for="option in options"
+      :key="`${id}-${option.value}`"
+      @click="selectOption(option)"
+    >
+      <input
+        class="chip-selector__input"
+        :id="`${id}-${option.value}`"
+        type="radio"
+        :checked="option.value === value.value"
+        @change="selectOption(option)"
+      />
+      <label :for="`${id}-${option.value}`">{{
+        $t(`config.${type}.${option}`)
+      }}</label>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [Object, String],
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  model: {
+    prop: "value",
+    event: "onValueChange",
+  },
+  methods: {
+    selectOption(option) {
+      this.$emit("onValueChange", option);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chip-selector {
+  &__options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $base-space;
+    padding: 0;
+    margin: $base-space 0 $base-space 0;
+  }
+  &__option {
+    list-style: none;
+  }
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 1px solid var(--fg-opacity-4);
+    & + label {
+      display: inline-block;
+      padding: calc($base-space / 2) $base-space;
+      border-radius: $border-radius-m;
+      background: hsl(from var(--bg-accent-grey-1) h s l / 80%);
+      cursor: pointer;
+      transition: all 0.2s ease-in;
+      border: 1px solid hsl(from var(--bg-accent-grey-1) h s l / 80%);
+      @include font-size(12px);
+    }
+    &:checked + label {
+      border-color: var(--fg-cuaternary) !important;
+      color: var(--fg-cuaternary) !important;
+      background: var(--bg-accent-grey-1) !important;
+    }
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationSelector.vue b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationSelector.vue
new file mode 100644
index 0000000000..6a6da0e19c
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationSelector.vue
@@ -0,0 +1,115 @@
+<template>
+  <BaseDropdown
+    class="selector"
+    :visible="dropdownIsVisible"
+    @visibility="onVisibility"
+    v-if="options.length"
+  >
+    <template slot="dropdown-header">
+      {{ value?.name ?? value ?? "Select" }}
+      <svgicon name="chevron-down" height="8" />
+    </template>
+    <template slot="dropdown-content">
+      <slot name="optionsIntro" />
+      <ul class="selector__options">
+        <li
+          :class="
+            option === value ? 'selector__option--selected' : 'selector__option'
+          "
+          v-for="(option, index) in filteredOptions"
+          :key="index"
+          @click="selectOption(option)"
+        >
+          {{ option?.name ?? option }}
+        </li>
+      </ul>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [Object, String],
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  model: {
+    prop: "value",
+    event: "onValueChange",
+  },
+  data() {
+    return {
+      dropdownIsVisible: false,
+    };
+  },
+  computed: {
+    filteredOptions() {
+      return this.options.filter(
+        (option) => JSON.stringify(option) !== JSON.stringify(this.value)
+      );
+    },
+  },
+  methods: {
+    onVisibility(value) {
+      this.dropdownIsVisible = value;
+    },
+    selectOption(option) {
+      this.$emit("onValueChange", option);
+
+      this.dropdownIsVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.selector {
+  user-select: none;
+  font-weight: 400;
+
+  :deep(.dropdown__header) {
+    justify-content: space-between;
+    height: $base-space * 4;
+    padding: 0 $base-space;
+    background: var(--bg-opacity-4);
+    border: none;
+  }
+
+  :deep(.dropdown__content) {
+    min-width: 100%;
+  }
+
+  &__options {
+    min-width: 100%;
+    list-style: none;
+    padding: calc($base-space / 2);
+    margin: 0;
+    max-height: 120px;
+    overflow-y: auto;
+  }
+  &__option {
+    padding: calc($base-space / 2);
+    border-radius: $border-radius;
+    transition: all 0.2s ease-in;
+    width: max-content;
+    min-width: 100%;
+    cursor: pointer;
+    &:hover {
+      background: var(--bg-opacity-4);
+      transition: all 0.2s ease-out;
+    }
+    &--selected {
+      background: var(--bg-opacity-4);
+      @extend .selector__option;
+    }
+  }
+  .svg-icon {
+    flex-shrink: 0;
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfiguration.ts b/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfiguration.ts
new file mode 100644
index 0000000000..0dbb5d3bc8
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfiguration.ts
@@ -0,0 +1,17 @@
+import { useResolve } from "ts-injecty";
+import { ref } from "vue";
+import { GetFirstRecordFromHub } from "~/v1/domain/usecases/get-first-record-from-hub";
+
+export const useDatasetConfiguration = () => {
+  const firstRecord = ref(null);
+  const getFirstRecordUseCase = useResolve(GetFirstRecordFromHub);
+
+  const getFirstRecord = async (dataset: any) => {
+    firstRecord.value = await getFirstRecordUseCase.execute(dataset);
+  };
+
+  return {
+    firstRecord,
+    getFirstRecord,
+  };
+};
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfigurationForm.ts b/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfigurationForm.ts
new file mode 100644
index 0000000000..a05a308a83
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfigurationForm.ts
@@ -0,0 +1,29 @@
+import { useResolve } from "ts-injecty";
+import { ref } from "vue-demi";
+import { availableFieldTypes } from "~/v1/domain/entities/hub/FieldCreation";
+import { availableQuestionTypes } from "~/v1/domain/entities/hub/QuestionCreation";
+import { CreateDatasetUseCase } from "~/v1/domain/usecases/create-dataset-use-case";
+import { useRoutes } from "~/v1/infrastructure/services";
+
+export const useDatasetConfigurationForm = () => {
+  const { goToFeedbackTaskAnnotationPage } = useRoutes();
+  const createDatasetUseCase = useResolve(CreateDatasetUseCase);
+  const isLoading = ref(false);
+
+  const create = async (dataset: any) => {
+    isLoading.value = true; //
+    const datasetId = await createDatasetUseCase.execute(dataset);
+    isLoading.value = false;
+
+    if (!datasetId) return;
+
+    goToFeedbackTaskAnnotationPage(datasetId);
+  };
+
+  return {
+    availableFieldTypes,
+    availableQuestionTypes,
+    create,
+    isLoading,
+  };
+};
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfigurationNameAndWorkspace.ts b/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfigurationNameAndWorkspace.ts
new file mode 100644
index 0000000000..4a53fd7c76
--- /dev/null
+++ b/argilla-frontend/components/features/dataset-creation/configuration/useDatasetConfigurationNameAndWorkspace.ts
@@ -0,0 +1,17 @@
+import { useFetch } from "@nuxtjs/composition-api";
+import { useResolve } from "ts-injecty";
+import { ref } from "vue-demi";
+import { GetWorkspacesUseCase } from "~/v1/domain/usecases/get-workspaces-use-case";
+
+export const useDatasetConfigurationNameAndWorkspace = () => {
+  const workspaces = ref<any[]>([]);
+  const getWorkspacesUseCase = useResolve(GetWorkspacesUseCase);
+
+  useFetch(async () => {
+    workspaces.value = await getWorkspacesUseCase.execute();
+  });
+
+  return {
+    workspaces,
+  };
+};
diff --git a/argilla-frontend/pages/new-dataset/index.vue b/argilla-frontend/pages/new-dataset/index.vue
new file mode 100644
index 0000000000..75b23e9e58
--- /dev/null
+++ b/argilla-frontend/pages/new-dataset/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="new-dataset">
+    <HeaderFeedbackTask :breadcrumbs="[{ link: {}, name: 'Home' }]" />
+    <DatasetCreation
+      v-if="!datasetConfig"
+      @load-dataset-from-hf="onLoadDatasetFromHF"
+    />
+    <DatasetConfiguration
+      v-else
+      :dataset="datasetConfig"
+      @change-subset="changeSubset($event)"
+    />
+  </div>
+</template>
+
+<script>
+import { useNewDatasetViewModel } from "./useNewDatasetViewModel";
+
+export default {
+  methods: {
+    onLoadDatasetFromHF(repoId) {
+      this.getNewDatasetByRepoId(repoId);
+    },
+  },
+  setup() {
+    return useNewDatasetViewModel();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.new-dataset {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/argilla-frontend/pages/new-dataset/useNewDatasetViewModel.ts b/argilla-frontend/pages/new-dataset/useNewDatasetViewModel.ts
new file mode 100644
index 0000000000..edb471aa53
--- /dev/null
+++ b/argilla-frontend/pages/new-dataset/useNewDatasetViewModel.ts
@@ -0,0 +1,22 @@
+import { useResolve } from "ts-injecty";
+import { ref } from "@nuxtjs/composition-api";
+import { GetDatasetCreationUseCase } from "~/v1/domain/usecases/get-dataset-creation-use-case";
+
+export const useNewDatasetViewModel = () => {
+  const datasetConfig = ref();
+  const getDatasetCreationUseCase = useResolve(GetDatasetCreationUseCase);
+
+  const getNewDatasetByRepoId = async (repositoryId: string) => {
+    datasetConfig.value = await getDatasetCreationUseCase.execute(repositoryId);
+  };
+
+  const changeSubset = (name: string) => {
+    datasetConfig.value.changeSubset(name);
+  };
+
+  return {
+    getNewDatasetByRepoId,
+    changeSubset,
+    datasetConfig,
+  };
+};
diff --git a/argilla-frontend/static/icons/assign.svg b/argilla-frontend/static/icons/assign.svg
new file mode 100644
index 0000000000..de967d6627
--- /dev/null
+++ b/argilla-frontend/static/icons/assign.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.625 2.75C2.04141 2.75 2.40498 2.52376 2.59949 2.1875H6.125C6.74632 2.1875 7.25 2.69118 7.25 3.3125C7.25 3.93382 6.74632 4.4375 6.125 4.4375H3.875C2.63236 4.4375 1.625 5.44486 1.625 6.6875C1.625 7.93014 2.63236 8.9375 3.875 8.9375H7.40051C7.59502 9.27376 7.95859 9.5 8.375 9.5C8.99632 9.5 9.5 8.99632 9.5 8.375C9.5 7.75368 8.99632 7.25 8.375 7.25C7.95859 7.25 7.59502 7.47624 7.40051 7.8125H3.875C3.25368 7.8125 2.75 7.30882 2.75 6.6875C2.75 6.06618 3.25368 5.5625 3.875 5.5625H6.125C7.36764 5.5625 8.375 4.55514 8.375 3.3125C8.375 2.06986 7.36764 1.0625 6.125 1.0625H2.5995C2.40498 0.726237 2.04141 0.5 1.625 0.5C1.00368 0.5 0.5 1.00368 0.5 1.625C0.5 2.24632 1.00368 2.75 1.625 2.75Z" />
+</svg>
diff --git a/argilla-frontend/static/icons/plus.svg b/argilla-frontend/static/icons/plus.svg
new file mode 100644
index 0000000000..9e120452cf
--- /dev/null
+++ b/argilla-frontend/static/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2C7.58579 2 7.25 2.33579 7.25 2.75V7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H7.25V13.25C7.25 13.6642 7.58579 14 8 14C8.41421 14 8.75 13.6642 8.75 13.25V8.75H13.25C13.6642 8.75 14 8.41421 14 8C14 7.58579 13.6642 7.25 13.25 7.25H8.75V2.75C8.75 2.33579 8.41421 2 8 2Z" fill="black" fill-opacity="0.87"/>
+</svg>
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index c5f5be7ce3..587052caaa 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -255,6 +255,23 @@ export default {
       team: "Team progress",
     },
   },
+  config: {
+    field: {
+      text: "Text field",
+      chat: "Chat field",
+      image: "Image field",
+      "no mapping": "No mapping",
+    },
+    question: {
+      text: "Text",
+      rating: "Rating",
+      label_selection: "Label",
+      ranking: "Ranking",
+      multi_label_selection: "Multi-label",
+      span: "Span",
+      "no mapping": "No mapping",
+    },
+  },
   persistentStorage: {
     adminOrOwner:
       "Persistent storage is not enabled. All data will be lost if this space restarts. Go to the space settings to enable it.",
diff --git a/argilla-frontend/v1/di/di.ts b/argilla-frontend/v1/di/di.ts
index af262ad841..bf499d9f81 100644
--- a/argilla-frontend/v1/di/di.ts
+++ b/argilla-frontend/v1/di/di.ts
@@ -8,7 +8,7 @@ import {
   UpdateMetricsEventHandler,
   UpdateTeamProgressEventHandler,
 } from "../infrastructure/events";
-import { LoadUserUseCase } from "../domain/usecases/load-user-use-case";
+
 import { useAxiosExtension } from "@/v1/infrastructure/services/useAxiosExtension";
 
 import {
@@ -25,6 +25,8 @@ import {
   WorkspaceRepository,
   AuthRepository,
   UserRepository,
+  HubRepository,
+  JobRepository,
 } from "@/v1/infrastructure/repositories";
 
 import { useRole, useRoutes } from "@/v1/infrastructure/services";
@@ -34,6 +36,7 @@ import { useDatasets } from "@/v1/infrastructure/storage/DatasetsStorage";
 import { useMetrics } from "@/v1/infrastructure/storage/MetricsStorage";
 import { useDatasetSetting } from "@/v1/infrastructure/storage/DatasetSettingStorage";
 
+import { GetDatasetCreationUseCase } from "@/v1/domain/usecases/get-dataset-creation-use-case";
 import { GetDatasetsUseCase } from "@/v1/domain/usecases/get-datasets-use-case";
 import { GetDatasetByIdUseCase } from "@/v1/domain/usecases/get-dataset-by-id-use-case";
 import { GetDatasetProgressUseCase } from "@/v1/domain/usecases/get-dataset-progress-use-case";
@@ -60,6 +63,9 @@ import { OAuthLoginUseCase } from "@/v1/domain/usecases/oauth-login-use-case";
 import { GetEnvironmentUseCase } from "@/v1/domain/usecases/get-environment-use-case";
 import { GetWorkspacesUseCase } from "@/v1/domain/usecases/get-workspaces-use-case";
 import { GetDatasetQuestionsGroupedUseCase } from "@/v1/domain/usecases/get-dataset-questions-grouped-use-case";
+import { LoadUserUseCase } from "@/v1/domain/usecases/load-user-use-case";
+import { CreateDatasetUseCase } from "@/v1/domain/usecases/create-dataset-use-case";
+import { GetFirstRecordFromHub } from "@/v1/domain/usecases/get-first-record-from-hub";
 import { AuthLoginUseCase } from "@/v1/domain/usecases/auth-login-use-case";
 
 export const loadDependencyContainer = (context: Context) => {
@@ -69,6 +75,7 @@ export const loadDependencyContainer = (context: Context) => {
   const dependencies = [
     register(UpdateMetricsEventHandler).build(),
     register(UpdateTeamProgressEventHandler).build(),
+    register(HubRepository).withDependency(useAxios).build(),
     register(DatasetRepository).withDependency(useAxios).build(),
     register(RecordRepository).withDependency(useAxios).build(),
     register(QuestionRepository).withDependency(useAxios).build(),
@@ -78,12 +85,15 @@ export const loadDependencyContainer = (context: Context) => {
     register(VectorRepository).withDependency(useAxios).build(),
     register(AgentRepository).withDependency(useAxios).build(),
     register(WorkspaceRepository).withDependency(useAxios).build(),
+    register(JobRepository).withDependency(useAxios).build(),
 
     register(OAuthRepository).withDependencies(useAxios, useRoutes).build(),
     register(EnvironmentRepository).withDependency(useAxios).build(),
     register(AuthRepository).withDependency(useAxios).build(),
     register(UserRepository).withDependency(useAxios).build(),
 
+    register(GetDatasetCreationUseCase).withDependency(HubRepository).build(),
+
     register(DeleteDatasetUseCase).withDependency(DatasetRepository).build(),
 
     register(GetWorkspacesUseCase).withDependency(WorkspaceRepository).build(),
@@ -204,6 +214,18 @@ export const loadDependencyContainer = (context: Context) => {
     register(AuthLoginUseCase)
       .withDependencies(useAuth, AuthRepository, LoadUserUseCase)
       .build(),
+
+    register(CreateDatasetUseCase)
+      .withDependencies(
+        DatasetRepository,
+        WorkspaceRepository,
+        QuestionRepository,
+        FieldRepository,
+        MetadataRepository
+      )
+      .build(),
+
+    register(GetFirstRecordFromHub).withDependency(HubRepository).build(),
   ];
 
   Container.register(dependencies);
diff --git a/argilla-frontend/v1/domain/entities/dataset/Progress.ts b/argilla-frontend/v1/domain/entities/dataset/Progress.ts
index 27bad1e0d5..f6bbf16781 100644
--- a/argilla-frontend/v1/domain/entities/dataset/Progress.ts
+++ b/argilla-frontend/v1/domain/entities/dataset/Progress.ts
@@ -19,6 +19,10 @@ export class Progress {
     };
   }
 
+  get hasAtLeastTenRecord() {
+    return this.total >= 10;
+  }
+
   get isCompleted() {
     if (!this.hasMetrics) return false;
     if (this.total === 0) return false;
diff --git a/argilla-frontend/v1/domain/entities/field/Field.ts b/argilla-frontend/v1/domain/entities/field/Field.ts
index 04cf2e01b0..ade48c5881 100644
--- a/argilla-frontend/v1/domain/entities/field/Field.ts
+++ b/argilla-frontend/v1/domain/entities/field/Field.ts
@@ -1,11 +1,28 @@
+import { FieldType } from "./FieldType";
+
 interface OriginalField {
   title: string;
   settings: any;
 }
 
+const adaptContentForChatField = (content: any) => {
+  if (Array.isArray(content)) return content;
+
+  return [
+    {
+      content,
+      role: "user",
+    },
+  ];
+};
+
+const adaptContentForImageField = (content: any) => {
+  return content?.src ?? content;
+};
+
 export class Field {
   private original: OriginalField;
-  public readonly content: string;
+  public readonly content: string | any | unknown[];
 
   public readonly sdkRecord?: unknown;
 
@@ -19,33 +36,36 @@ export class Field {
     record?: any
   ) {
     this.initializeOriginal();
+    this.content = record?.fields[name] ?? "";
 
     if (this.isCustomType) {
       this.sdkRecord = record;
       this.content = settings.template;
-    } else {
-      this.content = record?.fields[name] ?? "";
+    } else if (this.isChatType) {
+      this.content = adaptContentForChatField(this.content);
+    } else if (this.isImageType) {
+      this.content = adaptContentForImageField(this.content);
     }
   }
 
   get isTextType() {
-    return this.type === "text";
+    return this.type.isTextType;
   }
 
   get isImageType() {
-    return this.type === "image";
+    return this.type.isImageType;
   }
 
   get isChatType() {
-    return this.type === "chat";
+    return this.type.isChatType;
   }
 
   get isCustomType() {
-    return this.type === "custom";
+    return this.type.isCustomType;
   }
 
   private get type() {
-    return this.settings?.type?.toLowerCase() ?? null;
+    return FieldType.from(this.settings?.type);
   }
 
   get isModified(): boolean {
diff --git a/argilla-frontend/v1/domain/entities/field/FieldType.ts b/argilla-frontend/v1/domain/entities/field/FieldType.ts
new file mode 100644
index 0000000000..c325b79e53
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/field/FieldType.ts
@@ -0,0 +1,29 @@
+export class FieldType extends String {
+  private constructor(value: string) {
+    super(value);
+  }
+
+  public get value(): string {
+    return this.toLowerCase();
+  }
+
+  public static from(value: string): FieldType {
+    return new FieldType(value);
+  }
+
+  public get isTextType(): boolean {
+    return this.value === "text";
+  }
+
+  public get isImageType(): boolean {
+    return this.value === "image";
+  }
+
+  public get isChatType(): boolean {
+    return this.value === "chat";
+  }
+
+  public get isCustomType(): boolean {
+    return this.value === "custom";
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/hub/DatasetCreation.test.ts b/argilla-frontend/v1/domain/entities/hub/DatasetCreation.test.ts
new file mode 100644
index 0000000000..fc668c7792
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/DatasetCreation.test.ts
@@ -0,0 +1,296 @@
+import { DatasetCreationBuilder } from "./DatasetCreationBuilder";
+
+const datasetInfo = {
+  default: {
+    description: "",
+    citation: "",
+    homepage: "",
+    license: "",
+    features: {
+      text_field: {
+        dtype: "string",
+        _type: "Value",
+      },
+      image_field: {
+        dtype: "string",
+        _type: "Image",
+      },
+      label_question: {
+        names: ["positive", "negative"],
+        _type: "ClassLabel",
+      },
+      chat_field: [
+        {
+          content: {
+            dtype: "string",
+            _type: "Value",
+          },
+          role: {
+            dtype: "string",
+            _type: "Value",
+          },
+        },
+      ],
+      metadata: {
+        dtype: "int32",
+        _type: "Value",
+      },
+    },
+    builder_name: "parquet",
+    dataset_name: "duorc",
+    config_name: "SelfRC",
+    version: {
+      version_str: "0.0.0",
+      major: 0,
+      minor: 0,
+      patch: 0,
+    },
+    splits: {
+      train: {
+        name: "train",
+        num_bytes: 248966361,
+        num_examples: 60721,
+        dataset_name: null,
+      },
+      validation: {
+        name: "validation",
+        num_bytes: 56359392,
+        num_examples: 12961,
+        dataset_name: null,
+      },
+      test: {
+        name: "test",
+        num_bytes: 51022318,
+        num_examples: 12559,
+        dataset_name: null,
+      },
+    },
+    download_size: 21001846,
+    dataset_size: 356348071,
+  },
+};
+
+describe("DatasetCreation", () => {
+  describe("build should", () => {
+    it("create text field", () => {
+      const builder = new DatasetCreationBuilder("FAKE", datasetInfo);
+
+      const datasetCreation = builder.build();
+
+      const firstField = datasetCreation.fields[0];
+
+      expect(firstField.name).toBe("text_field");
+      expect(firstField.type.isTextType).toBeTruthy();
+      expect(firstField.required).toBeFalsy();
+    });
+
+    it("create image field", () => {
+      const builder = new DatasetCreationBuilder("FAKE", datasetInfo);
+
+      const datasetCreation = builder.build();
+
+      const secondField = datasetCreation.fields[1];
+
+      expect(secondField.name).toBe("image_field");
+      expect(secondField.type.isImageType).toBeTruthy();
+      expect(secondField.required).toBeFalsy();
+    });
+
+    it("create label question", () => {
+      const builder = new DatasetCreationBuilder("FAKE", datasetInfo);
+
+      const datasetCreation = builder.build();
+
+      const labelQuestion = datasetCreation.questions[0];
+
+      expect(labelQuestion.name).toBe("label_question");
+      expect(labelQuestion.type.isSingleLabelType).toBeTruthy();
+      expect(labelQuestion.required).toBeTruthy();
+      expect(labelQuestion.options).toEqual([
+        {
+          text: "positive",
+          value: "positive",
+        },
+        {
+          text: "negative",
+          value: "negative",
+        },
+      ]);
+    });
+
+    it("create a required field if the dataset has just one field", () => {
+      const datasetInfoWithOneField = {
+        default: {
+          ...datasetInfo.default,
+          features: {
+            text_field: {
+              dtype: "string",
+              _type: "Value",
+            },
+          },
+        },
+      };
+
+      const builder = new DatasetCreationBuilder(
+        "FAKE",
+        datasetInfoWithOneField
+      );
+
+      const datasetCreation = builder.build();
+
+      const field = datasetCreation.fields[0];
+
+      expect(field.name).toBe("text_field");
+      expect(field.type.isTextType).toBeTruthy();
+      expect(field.required).toBeTruthy();
+      expect(datasetCreation.fields.length).toBe(1);
+    });
+
+    it("create a required question if the dataset has just one field", () => {
+      const datasetInfoWithOneQuestion = {
+        default: {
+          ...datasetInfo.default,
+          features: {
+            label_question: {
+              names: ["positive", "negative"],
+              _type: "ClassLabel",
+            },
+          },
+        },
+      };
+
+      const builder = new DatasetCreationBuilder(
+        "FAKE",
+        datasetInfoWithOneQuestion
+      );
+
+      const datasetCreation = builder.build();
+
+      const question = datasetCreation.questions[0];
+
+      expect(question.name).toBe("label_question");
+      expect(question.type.isSingleLabelType).toBeTruthy();
+      expect(question.required).toBeTruthy();
+      expect(datasetCreation.questions.length).toBe(1);
+    });
+
+    it("create a chat field", () => {
+      const builder = new DatasetCreationBuilder("FAKE", datasetInfo);
+
+      const datasetCreation = builder.build();
+
+      const chatField = datasetCreation.fields[2];
+
+      expect(chatField.name).toBe("chat_field");
+      expect(chatField.type.isChatType).toBeTruthy();
+      expect(chatField.required).toBeFalsy();
+    });
+
+    it("get no mapped feature", () => {
+      const builder = new DatasetCreationBuilder("FAKE", {
+        default: {
+          ...datasetInfo.default,
+          features: {
+            no_mapped: {
+              dtype: "NO",
+              _type: "NO",
+            },
+          },
+        },
+      });
+
+      const datasetCreation = builder.build();
+
+      expect(
+        datasetCreation.fields.filter((f) => f.type.value === "no mapping")
+          .length
+      ).toBe(1);
+    });
+
+    it("create metadata", () => {
+      const builder = new DatasetCreationBuilder("FAKE", datasetInfo);
+
+      const datasetCreation = builder.build();
+
+      const metadata = datasetCreation.metadata[0];
+
+      expect(metadata.name).toBe("metadata");
+      expect(metadata.title).toBe("metadata");
+    });
+  });
+
+  describe("addQuestions should", () => {
+    it("add single label", () => {
+      const datasetInfoWithNoQuestions = {
+        default: {
+          ...datasetInfo.default,
+          features: {},
+        },
+      };
+      const builder = new DatasetCreationBuilder(
+        "FAKE",
+        datasetInfoWithNoQuestions
+      );
+
+      const datasetCreation = builder.build();
+
+      datasetCreation.selectedSubset.addQuestion("First", {
+        type: "label_selection",
+      });
+
+      const firstQuestion = datasetCreation.questions[0];
+      expect(firstQuestion.name).toBe("First");
+      expect(firstQuestion.type.isSingleLabelType).toBeTruthy();
+      expect(firstQuestion.options).toEqual([
+        {
+          id: "1",
+          text: "positive",
+          value: "positive",
+        },
+        {
+          id: "2",
+          text: "negative",
+          value: "negative",
+        },
+        {
+          id: "3",
+          text: "neutral",
+          value: "neutral",
+        },
+      ]);
+    });
+
+    it("add ranking question", () => {
+      const datasetInfoWithNoQuestions = {
+        default: {
+          ...datasetInfo.default,
+          features: {},
+        },
+      };
+      const builder = new DatasetCreationBuilder(
+        "FAKE",
+        datasetInfoWithNoQuestions
+      );
+
+      const datasetCreation = builder.build();
+
+      datasetCreation.selectedSubset.addQuestion("First", {
+        type: "ranking",
+      });
+
+      const firstQuestion = datasetCreation.questions[0];
+      expect(firstQuestion.name).toBe("First");
+      expect(firstQuestion.type.isRankingType).toBeTruthy();
+      expect(firstQuestion.options).toEqual([
+        {
+          value: "option1",
+          text: "Option 1",
+        },
+        {
+          value: "option2",
+          text: "Option 2",
+        },
+      ]);
+    });
+  });
+});
diff --git a/argilla-frontend/v1/domain/entities/hub/DatasetCreation.ts b/argilla-frontend/v1/domain/entities/hub/DatasetCreation.ts
new file mode 100644
index 0000000000..43fcdc8279
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/DatasetCreation.ts
@@ -0,0 +1,100 @@
+import { Field } from "../field/Field";
+import { Workspace } from "../workspace/Workspace";
+import { Subset } from "./Subset";
+
+export class DatasetCreation {
+  public selectedSubset: Subset;
+
+  public readonly firstRecord: {};
+  public workspace: Workspace;
+
+  constructor(
+    public readonly repoId: string,
+    public name: string,
+    private readonly subset: Subset[]
+  ) {
+    this.selectedSubset = subset[0];
+  }
+
+  changeSubset(name: string) {
+    this.selectedSubset = this.subset.find((s) => s.name === name);
+  }
+
+  get hasMoreThanOneSubset() {
+    return this.subset.length > 1;
+  }
+
+  get subsets() {
+    return this.subset.map((s) => s.name);
+  }
+
+  get fields() {
+    return this.selectedSubset.fields;
+  }
+
+  get mappedFields() {
+    return this.fields.filter(
+      (f) => f.type.value !== "no mapping" && f.name !== "id"
+    );
+  }
+
+  get questions() {
+    return this.selectedSubset.questions;
+  }
+
+  get mappedQuestions() {
+    return this.questions.filter((q) => q.column !== "no mapping");
+  }
+
+  get metadata() {
+    return this.selectedSubset.metadata;
+  }
+
+  get columns() {
+    return this.selectedSubset.columns;
+  }
+
+  get mappings() {
+    const mappings: {
+      fields: { source: string; target: string }[];
+      metadata: { source: string; target: string }[];
+      suggestions: { source: string; target: string }[];
+      external_id?: string;
+    } = {
+      fields: this.mappedFields.map((field) => ({
+        source: field.name,
+        target: field.name,
+      })),
+      metadata: this.metadata.map((metadata) => ({
+        source: metadata.name,
+        target: metadata.name,
+      })),
+      suggestions: this.mappedQuestions.map((question) => ({
+        source: question.column,
+        target: question.name,
+      })),
+    };
+
+    if (this.fields.some((f) => f.name === "id")) {
+      mappings.external_id = "id";
+    }
+
+    return mappings;
+  }
+
+  createFields(firstRawRecord: unknown): Field[] {
+    return this.mappedFields.map((field) => {
+      return new Field(
+        field.name,
+        field.name,
+        field.title,
+        this.name,
+        field.required,
+        field.settings,
+        {
+          fields: firstRawRecord,
+        }
+      );
+    });
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/hub/DatasetCreationBuilder.ts b/argilla-frontend/v1/domain/entities/hub/DatasetCreationBuilder.ts
new file mode 100644
index 0000000000..b05c976f66
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/DatasetCreationBuilder.ts
@@ -0,0 +1,27 @@
+import { DatasetCreation } from "./DatasetCreation";
+import { Subset } from "./Subset";
+
+export interface Feature {
+  dtype: "string" | "int32" | "int64";
+  _type: "Value" | "Image" | "ClassLabel";
+  names?: string[];
+}
+
+export class DatasetCreationBuilder {
+  private readonly subsets: Subset[] = [];
+  private readonly datasetName: string;
+  constructor(private readonly repoId: string, datasetInfo: any) {
+    const firstKey = Object.keys(datasetInfo)[0];
+    const defaultSubset = datasetInfo[firstKey];
+
+    this.datasetName = defaultSubset.dataset_name;
+
+    for (const [name, value] of Object.entries<Feature>(datasetInfo)) {
+      this.subsets.push(new Subset(name, value));
+    }
+  }
+
+  build(): DatasetCreation {
+    return new DatasetCreation(this.repoId, this.datasetName, this.subsets);
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/hub/FieldCreation.ts b/argilla-frontend/v1/domain/entities/hub/FieldCreation.ts
new file mode 100644
index 0000000000..dcca389bd7
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/FieldCreation.ts
@@ -0,0 +1,70 @@
+import { FieldType } from "../field/FieldType";
+
+export const noMapping = FieldType.from("no mapping");
+
+export const availableFieldTypes = [
+  noMapping,
+  FieldType.from("text"),
+  FieldType.from("image"),
+  FieldType.from("chat"),
+];
+
+export type FieldCreationTypes = "no mapping" | "text" | "image" | "chat";
+
+export class FieldCreation {
+  public required = false;
+  public title: string;
+  public readonly settings: { type: FieldType };
+
+  private constructor(
+    public readonly name: string,
+    type: string,
+    public readonly dtype: string
+  ) {
+    this.title = this.name;
+
+    this.settings = {
+      type: FieldType.from(type),
+    };
+  }
+
+  get type(): FieldType {
+    return this.settings.type;
+  }
+
+  set type(value: FieldType) {
+    this.settings.type = value;
+  }
+
+  get isTextType() {
+    return this.type.isTextType;
+  }
+
+  get isImageType() {
+    return this.type.isImageType;
+  }
+
+  get isChatType() {
+    return this.type.isChatType;
+  }
+
+  get isCustomType() {
+    return this.type.isCustomType;
+  }
+
+  markAsRequired() {
+    this.required = true;
+  }
+
+  public static from(
+    name: string,
+    type: FieldCreationTypes,
+    dtype: string
+  ): FieldCreation | null {
+    if (availableFieldTypes.map((t) => t.value).includes(type)) {
+      return new FieldCreation(name, type, dtype);
+    }
+
+    return null;
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/hub/MetadataCreation.ts b/argilla-frontend/v1/domain/entities/hub/MetadataCreation.ts
new file mode 100644
index 0000000000..36f3db37d4
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/MetadataCreation.ts
@@ -0,0 +1,45 @@
+import { MetadataType } from "../metadata/MetadataType";
+
+export const availableMetadataTypes = [
+  MetadataType.from("int32"),
+  MetadataType.from("int64"),
+  MetadataType.from("float32"),
+  MetadataType.from("float64"),
+  MetadataType.from("terms"),
+];
+
+const ADAPTED_TYPES = {
+  int32: "integer",
+  int64: "integer",
+  float32: "float",
+  float64: "float",
+};
+
+export type MetadataTypes = "int32" | "int64" | "float32" | "float64";
+
+export class MetadataCreation {
+  public readonly type: MetadataType;
+  private constructor(
+    public readonly name: string,
+    type: string,
+    public title?: string
+  ) {
+    this.title ??= this.name;
+    this.type = MetadataType.from(type);
+  }
+
+  public static from(
+    name: string,
+    type: MetadataTypes | string
+  ): MetadataCreation | null {
+    if (availableMetadataTypes.map((t) => t.value).includes(type)) {
+      return new MetadataCreation(name, type);
+    }
+
+    return null;
+  }
+
+  get adapteType() {
+    return ADAPTED_TYPES[this.type.value];
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts b/argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts
new file mode 100644
index 0000000000..226050a3bf
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts
@@ -0,0 +1,157 @@
+import { Color } from "../color/Color";
+import { Guard } from "../error";
+import {
+  MultiLabelQuestionAnswer,
+  QuestionAnswer,
+  RankingQuestionAnswer,
+  RatingLabelQuestionAnswer,
+  SingleLabelQuestionAnswer,
+  SpanQuestionAnswer,
+  TextQuestionAnswer,
+} from "../question/QuestionAnswer";
+import {
+  QuestionSetting,
+  QuestionPrototype,
+} from "../question/QuestionSetting";
+import { QuestionType } from "../question/QuestionType";
+
+export const availableQuestionTypes = [
+  QuestionType.from("label_selection"),
+  QuestionType.from("multi_label_selection"),
+  QuestionType.from("ranking"),
+  QuestionType.from("text"),
+  QuestionType.from("span"),
+  QuestionType.from("rating"),
+];
+
+export class QuestionCreation {
+  public settings: QuestionSetting;
+  public title: string;
+  public readonly id: string;
+  public required: boolean;
+  constructor(
+    public readonly name: string,
+    settings: QuestionPrototype,
+    public column: string = "no mapping"
+  ) {
+    this.settings = new QuestionSetting(settings);
+    this.title = this.name;
+    this.id = this.name;
+
+    this.initialize();
+  }
+
+  get type() {
+    return this.settings.type;
+  }
+
+  set type(value: QuestionType) {
+    this.settings.type = value;
+  }
+
+  get options() {
+    return this.settings.options;
+  }
+
+  markAsRequired() {
+    this.required = true;
+  }
+
+  get isTextType(): boolean {
+    return this.type.isTextType;
+  }
+
+  get isSpanType(): boolean {
+    return this.type.isSpanType;
+  }
+
+  get isRatingType(): boolean {
+    return this.type.isRatingType;
+  }
+
+  get isMultiLabelType(): boolean {
+    return this.type.isMultiLabelType;
+  }
+
+  get isSingleLabelType(): boolean {
+    return this.type.isSingleLabelType;
+  }
+
+  get isRankingType(): boolean {
+    return this.type.isRankingType;
+  }
+
+  get answer(): QuestionAnswer {
+    return this.createInitialAnswers();
+  }
+
+  public setSettings(settings: QuestionPrototype) {
+    this.settings = new QuestionSetting(settings);
+    this.initialize();
+  }
+
+  private initialize() {
+    if (this.isSpanType) {
+      this.settings.options = this.settings.options.map((option) => {
+        return {
+          ...option,
+          color: option.color
+            ? Color.from(option.color)
+            : Color.generate(option.value),
+        };
+      });
+    }
+
+    this.markAsRequired();
+  }
+
+  private createInitialAnswers(): QuestionAnswer {
+    if (this.isTextType) {
+      return new TextQuestionAnswer(this.type, "");
+    }
+
+    if (this.isSpanType) {
+      return new SpanQuestionAnswer(
+        this.type,
+        this.name,
+        this.settings.options
+      );
+    }
+
+    if (this.isRatingType) {
+      return new RatingLabelQuestionAnswer(
+        this.type,
+        this.name,
+        this.settings.options
+      );
+    }
+
+    if (this.isMultiLabelType) {
+      return new MultiLabelQuestionAnswer(
+        this.type,
+        this.name,
+        this.settings.options
+      );
+    }
+
+    if (this.isSingleLabelType) {
+      return new SingleLabelQuestionAnswer(
+        this.type,
+        this.name,
+        this.settings.options
+      );
+    }
+
+    if (this.isRankingType) {
+      return new RankingQuestionAnswer(
+        this.type,
+        this.name,
+        this.settings.options
+      );
+    }
+
+    Guard.throw(
+      `Question answer for type ${this.type} is not implemented yet.`
+    );
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/hub/Subset.ts b/argilla-frontend/v1/domain/entities/hub/Subset.ts
new file mode 100644
index 0000000000..4e34dd2aef
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/hub/Subset.ts
@@ -0,0 +1,221 @@
+import { QuestionPrototype } from "../question/QuestionSetting";
+import { Feature } from "./DatasetCreationBuilder";
+import { FieldCreation } from "./FieldCreation";
+import { MetadataTypes, MetadataCreation } from "./MetadataCreation";
+import { QuestionCreation } from "./QuestionCreation";
+
+type Structure = {
+  name: string;
+  options?: string[];
+  structure?: Structure[];
+  kindObject?: "Value" | "Image" | "ClassLabel";
+  type?: "string" | MetadataTypes;
+};
+
+export class Subset {
+  public readonly fields: FieldCreation[] = [];
+  public readonly questions: QuestionCreation[] = [];
+  public readonly metadata: MetadataCreation[] = [];
+  private readonly structures: Structure[] = [];
+  private readonly splits: any[];
+  public selectedSplit: any;
+
+  constructor(public readonly name: string, datasetInfo: any) {
+    this.splits = Object.entries(datasetInfo.splits).map(([name, value]) => {
+      return {
+        name,
+        value,
+      };
+    });
+
+    this.selectedSplit = this.splits[0];
+
+    for (const [name, value] of Object.entries<Feature>(datasetInfo.features)) {
+      if (Array.isArray(value)) {
+        this.structures.push({
+          name,
+          structure: value.map((v) => {
+            const [key, value] = Object.entries<any>(v)[0];
+
+            return {
+              name: key,
+              kindObject: value._type,
+              type: value.dtype,
+            };
+          }),
+        });
+      } else {
+        this.structures.push({
+          name,
+          options: value.names,
+          kindObject: value._type,
+          type: value.dtype,
+        });
+      }
+    }
+
+    for (const structure of this.structures) {
+      if (this.tryToCreateFields(structure)) continue;
+
+      if (this.tryToCreateQuestion(structure)) continue;
+
+      if (this.tryToCreateMetadata(structure)) continue;
+
+      this.createNoMappedFields(structure);
+    }
+
+    this.setDefaultValues();
+  }
+
+  public get columns() {
+    const columnNames = this.structures.map((f) => f.name);
+    return ["no mapping", ...columnNames];
+  }
+
+  private setDefaultValues() {
+    if (this.questions.length === 1) {
+      this.questions[0].markAsRequired();
+    }
+
+    if (this.fields.length === 1) {
+      this.fields[0].markAsRequired();
+    }
+  }
+
+  private tryToCreateQuestion(structure: Structure) {
+    if (this.isASingleLabel(structure)) {
+      this.questions.push(
+        new QuestionCreation(
+          structure.name,
+          {
+            type: "label_selection",
+            options: structure.options.map((o) => ({
+              text: o,
+              value: o,
+            })),
+          },
+          structure.name
+        )
+      );
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private tryToCreateFields(structure: Structure) {
+    const getFieldType = (structure: Structure) => {
+      if (structure.kindObject === "Value" && structure.type === "string")
+        return "text";
+
+      if (structure.kindObject === "Image") return "image";
+
+      if (structure.structure?.length > 0) return "chat";
+    };
+
+    const field = FieldCreation.from(
+      structure.name,
+      getFieldType(structure),
+      structure.type
+    );
+
+    if (field) {
+      this.fields.push(field);
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private tryToCreateMetadata(structure: Structure) {
+    const metadata = MetadataCreation.from(structure.name, structure.type);
+
+    if (metadata) {
+      this.metadata.push(metadata);
+
+      return true;
+    }
+
+    return false;
+  }
+
+  private createNoMappedFields(structure: Structure) {
+    this.fields.push(
+      FieldCreation.from(structure.name, "no mapping", structure.type)
+    );
+  }
+
+  private isASingleLabel(structure: Structure) {
+    return structure.kindObject === "ClassLabel";
+  }
+
+  public removeQuestion(name: string) {
+    const index = this.questions.findIndex((q) => q.name === name);
+    if (index !== -1) {
+      this.questions.splice(index, 1);
+    }
+  }
+
+  public addQuestion(name: string, settings: QuestionPrototype) {
+    const { type } = settings;
+    if (type === "label_selection") {
+      settings.options = [
+        { text: "positive", id: "1", value: "positive" },
+        { text: "negative", id: "2", value: "negative" },
+        { text: "neutral", id: "3", value: "neutral" },
+      ];
+    }
+
+    if (type === "multi_label_selection") {
+      settings.options = [
+        { text: "news", id: "1", value: "news" },
+        { text: "sports", id: "2", value: "sports" },
+        { text: "international", id: "3", value: "international" },
+        { text: "politics", id: "4", value: "politics" },
+      ];
+    }
+
+    if (type === "rating") {
+      settings.options = [
+        { value: 1 },
+        { value: 2 },
+        { value: 3 },
+        { value: 4 },
+        { value: 5 },
+      ];
+    }
+
+    if (type === "ranking") {
+      settings.options = [
+        { text: "Option 1", value: "option1" },
+        { text: "Option 2", value: "option2" },
+      ];
+    }
+
+    if (type === "span") {
+      settings.options = [
+        { text: "organisation", id: "1", value: "organisation" },
+        { text: "person", id: "2", value: "person" },
+        { text: "event", id: "3", value: "event" },
+      ];
+      settings.allow_overlapping = true;
+      settings.field = "text";
+    }
+
+    if (type === "text") {
+      settings.options = [];
+    }
+
+    const currentQuestion = this.questions.find((q) => q.name === name);
+
+    if (currentQuestion) {
+      currentQuestion?.setSettings(settings);
+
+      return;
+    }
+
+    this.questions.push(new QuestionCreation(name, settings));
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/metadata/MetadataType.ts b/argilla-frontend/v1/domain/entities/metadata/MetadataType.ts
new file mode 100644
index 0000000000..15afb2bc7b
--- /dev/null
+++ b/argilla-frontend/v1/domain/entities/metadata/MetadataType.ts
@@ -0,0 +1,25 @@
+export class MetadataType extends String {
+  private constructor(value: string) {
+    super(value);
+  }
+
+  public get value(): string {
+    return this.toLowerCase();
+  }
+
+  public static from(value: string): MetadataType {
+    return new MetadataType(value);
+  }
+
+  public get isIntType(): boolean {
+    return this.value === "int32" || this.value === "int64";
+  }
+
+  public get isFloatType(): boolean {
+    return this.value === "float32" || this.value === "float64";
+  }
+
+  public get isTermsType(): boolean {
+    return this.value === "terms";
+  }
+}
diff --git a/argilla-frontend/v1/domain/entities/question/Question.ts b/argilla-frontend/v1/domain/entities/question/Question.ts
index 15e8fb6851..53758321b3 100644
--- a/argilla-frontend/v1/domain/entities/question/Question.ts
+++ b/argilla-frontend/v1/domain/entities/question/Question.ts
@@ -70,7 +70,7 @@ export class Question {
   }
 
   public get type(): QuestionType {
-    return QuestionType.from(this.settings.type);
+    return this.settings.type;
   }
 
   public get isRankingType(): boolean {
@@ -273,6 +273,7 @@ export class Question {
       description: this.description,
       settings: new QuestionSetting({
         ...rest,
+        type: this.settings.type.value,
         options: options?.map((option: string) => option),
       }),
       answer: originalAnswer,
@@ -284,6 +285,7 @@ export class Question {
 
     this.settings = new QuestionSetting({
       ...rest,
+      type: this.original.settings.type.value,
       options: options?.map((option: string) => option),
     });
 
diff --git a/argilla-frontend/v1/domain/entities/question/QuestionSetting.test.ts b/argilla-frontend/v1/domain/entities/question/QuestionSetting.test.ts
index 72448cc031..339c9359ae 100644
--- a/argilla-frontend/v1/domain/entities/question/QuestionSetting.test.ts
+++ b/argilla-frontend/v1/domain/entities/question/QuestionSetting.test.ts
@@ -3,54 +3,89 @@ import { QuestionSetting } from "./QuestionSetting";
 describe("QuestionSetting", () => {
   describe("suggestionFirst", () => {
     test("return true when options_order is suggestion", () => {
-      const setting = new QuestionSetting({ options_order: "suggestion" });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options_order: "suggestion",
+      });
       expect(setting.suggestionFirst).toBeTruthy();
     });
     test("return false when options_order is natural", () => {
-      const setting = new QuestionSetting({ options_order: "natural" });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options_order: "natural",
+      });
       expect(setting.suggestionFirst).toBeFalsy();
     });
   });
 
   describe("isEqual", () => {
     test("return false when options_order is different", () => {
-      const setting = new QuestionSetting({ options_order: "suggestion" });
-      const setting2 = new QuestionSetting({ options_order: "natural" });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options_order: "suggestion",
+      });
+      const setting2 = new QuestionSetting({
+        type: "label_selection",
+        options_order: "natural",
+      });
       expect(setting.isEqual(setting2)).toBeFalsy();
     });
 
     test("return false when use_markdown is different", () => {
-      const setting = new QuestionSetting({ use_markdown: true });
-      const setting2 = new QuestionSetting({ use_markdown: false });
+      const setting = new QuestionSetting({ type: "text", use_markdown: true });
+      const setting2 = new QuestionSetting({
+        type: "text",
+        use_markdown: false,
+      });
       expect(setting.isEqual(setting2)).toBeFalsy();
     });
 
     test("return false when visible_options is different", () => {
-      const setting = new QuestionSetting({ visible_options: 1 });
-      const setting2 = new QuestionSetting({ visible_options: 2 });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        visible_options: 1,
+      });
+      const setting2 = new QuestionSetting({
+        type: "label_selection",
+        visible_options: 2,
+      });
       expect(setting.isEqual(setting2)).toBeFalsy();
     });
 
     test("return false when options are different", () => {
-      const setting = new QuestionSetting({ options: ["a"] });
-      const setting2 = new QuestionSetting({ options: ["b"] });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options: ["a"],
+      });
+      const setting2 = new QuestionSetting({
+        type: "label_selection",
+        options: ["b"],
+      });
       expect(setting.isEqual(setting2)).toBeFalsy();
     });
 
     test("return false if options are in different positions", () => {
-      const setting = new QuestionSetting({ options: ["a", "b"] });
-      const setting2 = new QuestionSetting({ options: ["b", "a"] });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options: ["a", "b"],
+      });
+      const setting2 = new QuestionSetting({
+        type: "label_selection",
+        options: ["b", "a"],
+      });
       expect(setting.isEqual(setting2)).toBeFalsy();
     });
 
     test("return true when all properties are the same", () => {
       const setting = new QuestionSetting({
+        type: "label_selection",
         options_order: "suggestion",
         use_markdown: true,
         visible_options: 1,
         options: ["a"],
       });
       const setting2 = new QuestionSetting({
+        type: "label_selection",
         options_order: "suggestion",
         use_markdown: true,
         visible_options: 1,
@@ -62,17 +97,24 @@ describe("QuestionSetting", () => {
 
   describe("shouldShowVisibleOptions", () => {
     test("return false when options are less than 3", () => {
-      const setting = new QuestionSetting({ options: ["a", "b"] });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options: ["a", "b"],
+      });
       expect(setting.shouldShowVisibleOptions).toBeFalsy();
     });
 
     test("return false when visible_options is not present", () => {
-      const setting = new QuestionSetting({ options: ["a", "b", "c"] });
+      const setting = new QuestionSetting({
+        type: "label_selection",
+        options: ["a", "b", "c"],
+      });
       expect(setting.shouldShowVisibleOptions).toBeFalsy();
     });
 
     test("return true when options are more than 3 and visible_options is present", () => {
       const setting = new QuestionSetting({
+        type: "label_selection",
         options: ["a", "b", "c", "d"],
         visible_options: 3,
       });
diff --git a/argilla-frontend/v1/domain/entities/question/QuestionSetting.ts b/argilla-frontend/v1/domain/entities/question/QuestionSetting.ts
index 55d6d071c8..24235ee5f2 100644
--- a/argilla-frontend/v1/domain/entities/question/QuestionSetting.ts
+++ b/argilla-frontend/v1/domain/entities/question/QuestionSetting.ts
@@ -1,11 +1,18 @@
-export class QuestionSetting {
-  type:
-    | "text"
-    | "ranking"
-    | "multi_label_selection"
-    | "label_selection"
-    | "span";
+import { QuestionType, QuestionTypes } from "./QuestionType";
+
+export interface QuestionPrototype {
+  type: QuestionTypes;
+  use_markdown?: boolean;
+  visible_options?: number;
+  options?: any[];
+  options_order?: "natural" | "suggestion";
+  allow_overlapping?: boolean;
+  allow_character_annotation?: boolean;
+  field?: string;
+}
 
+export class QuestionSetting {
+  type: QuestionType;
   use_markdown: boolean;
   visible_options: number;
   allow_overlapping: boolean;
@@ -14,8 +21,8 @@ export class QuestionSetting {
   options: any;
   options_order: "natural" | "suggestion";
 
-  constructor(private readonly settings: any) {
-    this.type = settings.type;
+  constructor(settings: QuestionPrototype) {
+    this.type = QuestionType.from(settings.type);
 
     this.use_markdown = settings.use_markdown;
     this.visible_options = settings.visible_options;
@@ -37,7 +44,7 @@ export class QuestionSetting {
   }
 
   get shouldShowVisibleOptions() {
-    return this.options?.length > 3 && "visible_options" in this.settings;
+    return this.options?.length > 3 && !!this.visible_options;
   }
 
   isEqual(setting: QuestionSetting) {
diff --git a/argilla-frontend/v1/domain/entities/question/QuestionType.ts b/argilla-frontend/v1/domain/entities/question/QuestionType.ts
index 4bb5da9bc9..bf8316e773 100644
--- a/argilla-frontend/v1/domain/entities/question/QuestionType.ts
+++ b/argilla-frontend/v1/domain/entities/question/QuestionType.ts
@@ -1,14 +1,35 @@
+const availableQuestionTypes = [
+  "label_selection",
+  "multi_label_selection",
+  "ranking",
+  "text",
+  "span",
+  "rating",
+];
+
+export type QuestionTypes =
+  | "label_selection"
+  | "multi_label_selection"
+  | "ranking"
+  | "text"
+  | "span"
+  | "rating";
+
 export class QuestionType extends String {
   private constructor(value: string) {
     super(value);
   }
 
-  public get value(): string {
-    return this.toLowerCase();
+  public get value(): QuestionTypes {
+    return this.toLowerCase() as QuestionTypes;
   }
 
-  public static from(value: string): QuestionType {
-    return new QuestionType(value);
+  public static from(value: string): QuestionType | null {
+    if (availableQuestionTypes.includes(value)) {
+      return new QuestionType(value);
+    }
+
+    return null;
   }
 
   public get isRankingType(): boolean {
diff --git a/argilla-frontend/v1/domain/services/IDatasetRepository.ts b/argilla-frontend/v1/domain/services/IDatasetRepository.ts
index 7389aefb3d..0a0280ce1d 100644
--- a/argilla-frontend/v1/domain/services/IDatasetRepository.ts
+++ b/argilla-frontend/v1/domain/services/IDatasetRepository.ts
@@ -1,7 +1,14 @@
 import { Dataset } from "../entities/dataset/Dataset";
 import { Progress } from "../entities/dataset/Progress";
+import { DatasetCreation } from "../entities/hub/DatasetCreation";
+
+export type DatasetId = string;
+export type JobId = string;
 
 export interface IDatasetRepository {
+  create(dataset: DatasetCreation): Promise<DatasetId>;
+  publish(datasetId: string): Promise<boolean>;
+  import(datasetId: DatasetId, creation: DatasetCreation): Promise<JobId>;
   getById(id: string): Promise<Dataset>;
   getAll(): Promise<Dataset[]>;
   delete(datasetId: string);
diff --git a/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts b/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts
new file mode 100644
index 0000000000..5ba9be5010
--- /dev/null
+++ b/argilla-frontend/v1/domain/usecases/create-dataset-use-case.ts
@@ -0,0 +1,77 @@
+import { DatasetCreation } from "../entities/hub/DatasetCreation";
+import { Workspace } from "../entities/workspace/Workspace";
+import { DatasetId, IDatasetRepository } from "../services/IDatasetRepository";
+import { Debounce } from "~/v1/infrastructure/services";
+import {
+  FieldRepository,
+  MetadataRepository,
+  QuestionRepository,
+  revalidateCache,
+  WorkspaceRepository,
+} from "~/v1/infrastructure/repositories";
+
+export class CreateDatasetUseCase {
+  constructor(
+    private readonly datasetRepository: IDatasetRepository,
+    private readonly workspaceRepository: WorkspaceRepository,
+    private readonly questionRepository: QuestionRepository,
+    private readonly fieldRepository: FieldRepository,
+    private readonly metadataRepository: MetadataRepository
+  ) {}
+
+  async execute(dataset: DatasetCreation): Promise<DatasetId | null> {
+    if (!dataset.workspace.id) {
+      const workspace = await this.workspaceRepository.create(
+        dataset.workspace.name
+      );
+
+      dataset.workspace = new Workspace(workspace.id, workspace.name);
+    }
+
+    const datasetCreated = await this.datasetRepository.create(dataset);
+
+    if (!datasetCreated) return null;
+
+    try {
+      for (const field of dataset.mappedFields) {
+        await this.fieldRepository.create(datasetCreated, field);
+      }
+
+      for (const question of dataset.questions) {
+        await this.questionRepository.create(datasetCreated, question);
+      }
+
+      for (const metadata of dataset.metadata) {
+        await this.metadataRepository.create(datasetCreated, metadata);
+      }
+
+      await this.datasetRepository.publish(datasetCreated);
+
+      await this.datasetRepository.import(datasetCreated, dataset);
+
+      let retries = 0;
+      const debounce = Debounce.from(1000);
+
+      while (retries < 5) {
+        revalidateCache(`/v1/datasets/${datasetCreated}/progress`);
+
+        const progress = await this.datasetRepository.getProgress(
+          datasetCreated
+        );
+
+        if (progress.hasAtLeastTenRecord) {
+          break;
+        }
+
+        await debounce.wait();
+        retries++;
+      }
+
+      return datasetCreated;
+    } catch {
+      this.datasetRepository.delete(datasetCreated);
+
+      return null;
+    }
+  }
+}
diff --git a/argilla-frontend/v1/domain/usecases/dataset-setting/get-dataset-settings-use-case.ts b/argilla-frontend/v1/domain/usecases/dataset-setting/get-dataset-settings-use-case.ts
index 74b8f94a46..09b80851a9 100644
--- a/argilla-frontend/v1/domain/usecases/dataset-setting/get-dataset-settings-use-case.ts
+++ b/argilla-frontend/v1/domain/usecases/dataset-setting/get-dataset-settings-use-case.ts
@@ -77,7 +77,6 @@ export class GetDatasetSettingsUseCase {
         datasetId,
         question.title,
         question.required,
-
         question.settings
       );
     });
diff --git a/argilla-frontend/v1/domain/usecases/get-dataset-creation-use-case.ts b/argilla-frontend/v1/domain/usecases/get-dataset-creation-use-case.ts
new file mode 100644
index 0000000000..5f0c7a3c5a
--- /dev/null
+++ b/argilla-frontend/v1/domain/usecases/get-dataset-creation-use-case.ts
@@ -0,0 +1,14 @@
+import { DatasetCreationBuilder } from "../entities/hub/DatasetCreationBuilder";
+import { HubRepository } from "~/v1/infrastructure/repositories/HubRepository";
+
+export class GetDatasetCreationUseCase {
+  constructor(private readonly hubRepository: HubRepository) {}
+
+  async execute(repoId: string) {
+    const datasetInfo = await this.hubRepository.getDatasetCreation(repoId);
+
+    const datasetCreation = new DatasetCreationBuilder(repoId, datasetInfo);
+
+    return datasetCreation.build();
+  }
+}
diff --git a/argilla-frontend/v1/domain/usecases/get-first-record-from-hub.ts b/argilla-frontend/v1/domain/usecases/get-first-record-from-hub.ts
new file mode 100644
index 0000000000..1d51b0fd7c
--- /dev/null
+++ b/argilla-frontend/v1/domain/usecases/get-first-record-from-hub.ts
@@ -0,0 +1,10 @@
+import { DatasetCreation } from "../entities/hub/DatasetCreation";
+import { HubRepository } from "~/v1/infrastructure/repositories";
+
+export class GetFirstRecordFromHub {
+  constructor(private readonly hubRepository: HubRepository) {}
+
+  execute(dataset: DatasetCreation) {
+    return this.hubRepository.getFirstRecord(dataset);
+  }
+}
diff --git a/argilla-frontend/v1/infrastructure/repositories/DatasetRepository.ts b/argilla-frontend/v1/infrastructure/repositories/DatasetRepository.ts
index dadc199b8c..f834e6de97 100644
--- a/argilla-frontend/v1/infrastructure/repositories/DatasetRepository.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/DatasetRepository.ts
@@ -3,28 +3,98 @@ import {
   BackendDataset,
   BackendDatasetFeedbackTaskResponse,
   BackendDatasetWithWorkspace,
+  BackendJob,
   BackendProgress,
   BackendUpdateDataset,
 } from "../types/dataset";
 import { Response } from "../types";
 import { largeCache, revalidateCache } from "./AxiosCache";
-import { IDatasetRepository } from "@/v1/domain/services/IDatasetRepository";
+import {
+  DatasetId,
+  IDatasetRepository,
+  JobId,
+} from "@/v1/domain/services/IDatasetRepository";
 import { Dataset } from "~/v1/domain/entities/dataset/Dataset";
 import { Progress } from "~/v1/domain/entities/dataset/Progress";
+import { DatasetCreation } from "~/v1/domain/entities/hub/DatasetCreation";
 
 export const DATASET_API_ERRORS = {
   ERROR_FETCHING_FEEDBACK_DATASETS: "ERROR_FETCHING_FEEDBACK_DATASETS",
   ERROR_FETCHING_WORKSPACES: "ERROR_FETCHING_WORKSPACES",
   ERROR_FETCHING_DATASET_INFO: "ERROR_FETCHING_DATASET_INFO",
+  ERROR_CREATING_DATASET: "ERROR_CREATING_DATASET",
   ERROR_FETCHING_WORKSPACE_INFO: "ERROR_FETCHING_WORKSPACE_INFO",
   ERROR_PATCHING_DATASET_GUIDELINES: "ERROR_PATCHING_DATASET_GUIDELINES",
   ERROR_DELETING_DATASET: "ERROR_DELETING_DATASET",
   ERROR_FETCHING_DATASET_PROGRESS: "ERROR_FETCHING_DATASET_PROGRESS",
+  ERROR_PUBLISHING_DATASET: "ERROR_PUBLISHING_DATASET",
+  ERROR_IMPORTING_DATASET: "ERROR_IMPORTING_DATASET",
 };
 
 export class DatasetRepository implements IDatasetRepository {
   constructor(private readonly axios: NuxtAxiosInstance) {}
 
+  async create(dataset: DatasetCreation): Promise<DatasetId> {
+    try {
+      const { data } = await this.axios.post<BackendDataset>("/v1/datasets", {
+        name: dataset.name,
+        workspace_id: dataset.workspace.id,
+
+        metadata: {
+          repoId: dataset.repoId,
+          subset: dataset.selectedSubset.name,
+          split: dataset.selectedSubset.selectedSplit.name,
+          mapping: dataset.mappings,
+        },
+      });
+
+      return data.id;
+    } catch (err) {
+      throw {
+        response: DATASET_API_ERRORS.ERROR_CREATING_DATASET,
+      };
+    }
+  }
+
+  async publish(datasetId: string): Promise<boolean> {
+    try {
+      const { data } = await this.axios.put(
+        `/v1/datasets/${datasetId}/publish`
+      );
+
+      revalidateCache(`/v1/datasets/${datasetId}`);
+
+      return data.id === datasetId;
+    } catch (err) {
+      throw {
+        response: DATASET_API_ERRORS.ERROR_PUBLISHING_DATASET,
+      };
+    }
+  }
+
+  async import(
+    datasetId: DatasetId,
+    creation: DatasetCreation
+  ): Promise<JobId> {
+    try {
+      const { data } = await this.axios.post<BackendJob>(
+        `/v1/datasets/${datasetId}/import`,
+        {
+          name: creation.repoId,
+          subset: creation.selectedSubset.name,
+          split: creation.selectedSubset.selectedSplit.name,
+          mapping: creation.mappings,
+        }
+      );
+
+      return data.id;
+    } catch (err) {
+      throw {
+        response: DATASET_API_ERRORS.ERROR_IMPORTING_DATASET,
+      };
+    }
+  }
+
   async getById(id: string): Promise<Dataset> {
     const dataset = await this.getDatasetById(id);
     const workspace = await this.getWorkspaceById(dataset.workspace_id);
diff --git a/argilla-frontend/v1/infrastructure/repositories/FieldRepository.ts b/argilla-frontend/v1/infrastructure/repositories/FieldRepository.ts
index 49d1ee234e..d5cf0fada5 100644
--- a/argilla-frontend/v1/infrastructure/repositories/FieldRepository.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/FieldRepository.ts
@@ -2,6 +2,7 @@ import { type NuxtAxiosInstance } from "@nuxtjs/axios";
 import { BackendField, Response } from "../types/";
 import { mediumCache, revalidateCache } from "./AxiosCache";
 import { Field } from "~/v1/domain/entities/field/Field";
+import { FieldCreation } from "~/v1/domain/entities/hub/FieldCreation";
 
 export const enum FIELD_API_ERRORS {
   GET_QUESTIONS = "ERROR_FETCHING_FIELDS",
@@ -11,6 +12,26 @@ export const enum FIELD_API_ERRORS {
 export class FieldRepository {
   constructor(private readonly axios: NuxtAxiosInstance) {}
 
+  async create(datasetId: string, field: FieldCreation): Promise<BackendField> {
+    try {
+      const { data } = await this.axios.post<BackendField>(
+        `/v1/datasets/${datasetId}/fields`,
+        {
+          name: field.name,
+          title: field.title,
+          required: field.required,
+          settings: field.settings,
+        }
+      );
+
+      return data;
+    } catch (err) {
+      throw {
+        response: FIELD_API_ERRORS.UPDATE,
+      };
+    }
+  }
+
   async getFields(datasetId: string): Promise<BackendField[]> {
     try {
       const { data } = await this.axios.get<Response<BackendField[]>>(
diff --git a/argilla-frontend/v1/infrastructure/repositories/HubRepository.ts b/argilla-frontend/v1/infrastructure/repositories/HubRepository.ts
new file mode 100644
index 0000000000..3a7478f51d
--- /dev/null
+++ b/argilla-frontend/v1/infrastructure/repositories/HubRepository.ts
@@ -0,0 +1,37 @@
+import { type NuxtAxiosInstance } from "@nuxtjs/axios";
+import { DatasetCreation } from "~/v1/domain/entities/hub/DatasetCreation";
+
+export class HubRepository {
+  constructor(private axios: NuxtAxiosInstance) {}
+
+  async getDatasetCreation(repoId: string): Promise<any> {
+    try {
+      const { data } = await this.axios.get(
+        `https://datasets-server.huggingface.co/info?dataset=${encodeURIComponent(
+          repoId
+        )}`
+      );
+
+      return data.dataset_info;
+    } catch {
+      return {};
+    }
+  }
+
+  async getFirstRecord(dataset: DatasetCreation): Promise<any> {
+    try {
+      const { repoId, selectedSubset } = dataset;
+      const { data } = await this.axios.get(
+        `https://datasets-server.huggingface.co/first-rows?dataset=${encodeURIComponent(
+          repoId
+        )}&split=${selectedSubset.selectedSplit.name}&config=${
+          selectedSubset.name
+        }`
+      );
+
+      return data.rows[0].row;
+    } catch {
+      return {};
+    }
+  }
+}
diff --git a/argilla-frontend/v1/infrastructure/repositories/JobRepository.ts b/argilla-frontend/v1/infrastructure/repositories/JobRepository.ts
new file mode 100644
index 0000000000..3023614495
--- /dev/null
+++ b/argilla-frontend/v1/infrastructure/repositories/JobRepository.ts
@@ -0,0 +1,32 @@
+import { type NuxtAxiosInstance } from "@nuxtjs/axios";
+import { BackendJob } from "../types/dataset";
+
+class JobStatus {
+  constructor(public readonly jobId: string, public readonly status: string) {}
+
+  get isQueued() {
+    return this.status === "queued";
+  }
+
+  get isStarted() {
+    return this.status === "started";
+  }
+
+  get isFailed() {
+    return this.status === "failed";
+  }
+}
+
+export class JobRepository {
+  constructor(private readonly axios: NuxtAxiosInstance) {}
+
+  async getJobStatus(jobId: string): Promise<JobStatus> {
+    try {
+      const { data } = await this.axios.get<BackendJob>(`/v1/jobs/${jobId}`);
+
+      return new JobStatus(data.id, data.status);
+    } catch {
+      return new JobStatus(jobId, "failed");
+    }
+  }
+}
diff --git a/argilla-frontend/v1/infrastructure/repositories/MetadataRepository.ts b/argilla-frontend/v1/infrastructure/repositories/MetadataRepository.ts
index 8a796a0216..a00ebe4f0f 100644
--- a/argilla-frontend/v1/infrastructure/repositories/MetadataRepository.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/MetadataRepository.ts
@@ -3,10 +3,13 @@ import { BackendMetadata, Response } from "../types";
 import { MetadataMetricsRepository } from "./MetadataMetricsRepository";
 import { mediumCache, revalidateCache } from "./AxiosCache";
 import { Metadata } from "~/v1/domain/entities/metadata/Metadata";
+import { MetadataCreation } from "~/v1/domain/entities/hub/MetadataCreation";
+import { DatasetId } from "~/v1/domain/services/IDatasetRepository";
 
 const METADATA_API_ERRORS = {
   ERROR_FETCHING_METADATA: "ERROR_FETCHING_METADATA",
   ERROR_UPDATING_METADATA: "ERROR_UPDATING_METADATA",
+  ERROR_CREATING_METADATA: "ERROR_CREATING_METADATA",
 };
 
 export class MetadataRepository {
@@ -60,6 +63,32 @@ export class MetadataRepository {
     }
   }
 
+  async create(
+    datasetId: DatasetId,
+    metadata: MetadataCreation
+  ): Promise<BackendMetadata> {
+    try {
+      const { data } = await this.axios.post<BackendMetadata>(
+        `/v1/datasets/${datasetId}/metadata-properties`,
+        {
+          name: metadata.name,
+          title: metadata.title,
+          settings: {
+            type: metadata.adapteType,
+          },
+        }
+      );
+
+      revalidateCache(`/v1/datasets/${datasetId}/metadata-properties`);
+
+      return data;
+    } catch (err) {
+      throw {
+        response: METADATA_API_ERRORS.ERROR_CREATING_METADATA,
+      };
+    }
+  }
+
   private createRequest({
     title,
     visibleForAnnotators,
diff --git a/argilla-frontend/v1/infrastructure/repositories/QuestionRepository.ts b/argilla-frontend/v1/infrastructure/repositories/QuestionRepository.ts
index 48bc5396ba..a6e47e0e1e 100644
--- a/argilla-frontend/v1/infrastructure/repositories/QuestionRepository.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/QuestionRepository.ts
@@ -3,6 +3,8 @@ import { Response, BackendQuestion } from "../types";
 import { mediumCache, revalidateCache } from "./AxiosCache";
 import { Question } from "~/v1/domain/entities/question/Question";
 import { IQuestionRepository } from "~/v1/domain/services/IQuestionRepository";
+import { QuestionCreation } from "~/v1/domain/entities/hub/QuestionCreation";
+import { DatasetId } from "~/v1/domain/services/IDatasetRepository";
 
 export const enum QUESTION_API_ERRORS {
   GET_QUESTIONS = "ERROR_FETCHING_QUESTIONS",
@@ -12,6 +14,29 @@ export const enum QUESTION_API_ERRORS {
 export class QuestionRepository implements IQuestionRepository {
   constructor(private readonly axios: NuxtAxiosInstance) {}
 
+  async create(
+    datasetId: DatasetId,
+    question: QuestionCreation
+  ): Promise<BackendQuestion> {
+    try {
+      const { data } = await this.axios.post<BackendQuestion>(
+        `/v1/datasets/${datasetId}/questions`,
+        {
+          name: question.name,
+          title: question.title,
+          required: question.required,
+          settings: question.settings,
+        }
+      );
+
+      return data;
+    } catch (err) {
+      throw {
+        response: QUESTION_API_ERRORS.UPDATE,
+      };
+    }
+  }
+
   async getQuestions(datasetId: string): Promise<BackendQuestion[]> {
     try {
       const { data } = await this.axios.get<Response<BackendQuestion[]>>(
@@ -55,7 +80,7 @@ export class QuestionRepository implements IQuestionRepository {
     return {
       title,
       description: newDescription,
-      settings,
+      settings: settings as any,
     };
   }
 }
diff --git a/argilla-frontend/v1/infrastructure/repositories/WorkspaceRepository.ts b/argilla-frontend/v1/infrastructure/repositories/WorkspaceRepository.ts
index e0613601c2..d072d00da4 100644
--- a/argilla-frontend/v1/infrastructure/repositories/WorkspaceRepository.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/WorkspaceRepository.ts
@@ -1,6 +1,6 @@
 import { type NuxtAxiosInstance } from "@nuxtjs/axios";
 import { Response } from "../types";
-import { mediumCache } from "./AxiosCache";
+import { mediumCache, revalidateCache } from "./AxiosCache";
 
 interface BackendWorkspace {
   id: string;
@@ -9,6 +9,7 @@ interface BackendWorkspace {
 
 const enum WORKSPACES_API_ERRORS {
   GET_WORKSPACES = "GET_WORKSPACES",
+  CREATE_WORKSPACE = "CREATE_WORKSPACE",
 }
 
 export class WorkspaceRepository {
@@ -27,4 +28,23 @@ export class WorkspaceRepository {
       };
     }
   }
+
+  async create(name: string): Promise<BackendWorkspace> {
+    try {
+      const { data } = await this.axios.post<BackendWorkspace>(
+        "/v1/workspaces",
+        {
+          name,
+        }
+      );
+
+      revalidateCache("/v1/me/workspaces");
+
+      return data;
+    } catch (err) {
+      throw {
+        response: WORKSPACES_API_ERRORS.CREATE_WORKSPACE,
+      };
+    }
+  }
 }
diff --git a/argilla-frontend/v1/infrastructure/repositories/index.ts b/argilla-frontend/v1/infrastructure/repositories/index.ts
index f8fe9642c3..8503c2cad2 100644
--- a/argilla-frontend/v1/infrastructure/repositories/index.ts
+++ b/argilla-frontend/v1/infrastructure/repositories/index.ts
@@ -4,6 +4,8 @@ export * from "./AxiosCache";
 export * from "./DatasetRepository";
 export * from "./EnvironmentRepository";
 export * from "./FieldRepository";
+export * from "./HubRepository";
+export * from "./JobRepository";
 export * from "./MetadataMetricsRepository";
 export * from "./MetadataRepository";
 export * from "./MetricsRepository";
diff --git a/argilla-frontend/v1/infrastructure/services/useDebounce.ts b/argilla-frontend/v1/infrastructure/services/useDebounce.ts
index e89ed067e0..f20ce9b003 100644
--- a/argilla-frontend/v1/infrastructure/services/useDebounce.ts
+++ b/argilla-frontend/v1/infrastructure/services/useDebounce.ts
@@ -1,6 +1,10 @@
-class Debounce {
+export class Debounce {
   private timer: NodeJS.Timeout;
-  constructor(private readonly milliSeconds: number) {}
+  private constructor(private readonly milliSeconds: number) {}
+
+  static from(milliSeconds: number) {
+    return new Debounce(milliSeconds);
+  }
 
   wait() {
     this.stop();
@@ -21,7 +25,7 @@ class Debounce {
 }
 
 export const useDebounce = (milliSeconds: number) => {
-  const debounce = new Debounce(milliSeconds);
+  const debounce = Debounce.from(milliSeconds);
 
   return debounce;
 };
diff --git a/argilla-frontend/v1/infrastructure/types/dataset.ts b/argilla-frontend/v1/infrastructure/types/dataset.ts
index f4f330f99d..4bdc11ebef 100644
--- a/argilla-frontend/v1/infrastructure/types/dataset.ts
+++ b/argilla-frontend/v1/infrastructure/types/dataset.ts
@@ -43,3 +43,8 @@ export interface BackendProgress {
   completed: number;
   pending: number;
 }
+
+export interface BackendJob {
+  id: string;
+  status: string;
+}