diff --git a/frontend/components/tasks/toolbar/forms/FormAutoLabeling.vue b/frontend/components/tasks/toolbar/forms/FormAutoLabeling.vue
new file mode 100644
index 00000000..462cb031
--- /dev/null
+++ b/frontend/components/tasks/toolbar/forms/FormAutoLabeling.vue
@@ -0,0 +1,48 @@
+<template>
+  <base-card
+    title="Settings"
+    :cancel-text="$t('generic.close')"
+    @cancel="$emit('click:cancel')"
+  >
+    <template #content>
+      <h3>Auto Labeling</h3>
+      <p>
+        The auto labeling allows users to annotate data automatically.
+        It enables them to speed up annotating data.
+        You only have to correct labels which are mislabeled by the system and annotate labels which aren’t labeled by it.
+      </p>
+      <p>
+        Notice that you can't use this feature unless the project administrators configure the auto labeling.
+        Also, depending on the configuration, it will take some cost for the administrators(e.g. In the case of configuring some paid service like AWS or GCP).
+      </p>
+      <v-switch
+        :value="isEnabled"
+        :error-messages="errorMessage"
+        @change="$('input', $event)"
+      />
+    </template>
+  </base-card>
+</template>
+
+<script>
+import BaseCard from '@/components/utils/BaseCard'
+
+export default {
+  components: {
+    BaseCard
+  },
+
+  props: {
+    isEnabled: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+      required: true
+    }
+  }
+}
+</script>