diff --git a/app/components/form/index-setting.js b/app/components/form/index-setting.js
deleted file mode 100644
index 8c5657b..0000000
--- a/app/components/form/index-setting.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { action } from '@ember/object';
-import { capitalize } from '@ember/string';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class FormIndexSettingComponent extends Component {
-  @tracked value;
-
-  constructor() {
-    super(...arguments);
-
-    const fnName = `get${capitalize(this.args.name)}`;
-
-    this.args.index[fnName]().then((result) => {
-      this.value = JSON.stringify(result);
-    });
-  }
-
-  get capitalizeName() {
-    return capitalize(this.args.name);
-  }
-
-  @action
-  save(event) {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const data = formData.get(this.args.name);
-    const fnName = `update${this.capitalizeName}`;
-
-    this.args.index[fnName](JSON.parse(data));
-  }
-
-  @action
-  async cancel() {
-    const fnName = `get${this.capitalizeName}`;
-    const oldValue = await this.args.index[fnName]();
-
-    this.value = JSON.stringify(oldValue);
-  }
-
-  @action
-  async reset() {
-    const fnName = `reset${this.capitalizeName}`;
-
-    this.args.index[fnName]();
-  }
-}
diff --git a/app/components/form/index-setting.hbs b/app/components/index-setting.hbs
similarity index 55%
rename from app/components/form/index-setting.hbs
rename to app/components/index-setting.hbs
index b1c3b53..c39da73 100644
--- a/app/components/form/index-setting.hbs
+++ b/app/components/index-setting.hbs
@@ -1,4 +1,4 @@
-<form class='mb-4' {{on 'submit' this.save}}>
+<FormElement>
   <InputTextarea
     @label={{namelize @name}}
     @name={{@name}}
@@ -7,7 +7,7 @@
     @onChange={{set this 'value'}}
   />
 
-  <Button type='submit' @text='Save' @style='primary' />
-  <Button @text='Cancel' @onClick={{this.cancel}} />
+  <Button @text='Save' @style='primary' @onClick={{this.save}} />
+  <Button @text='Cancel' @onClick={{this.setInitialValue}} />
   <Button @text='Reset' @onClick={{this.reset}} />
-</form>
+</FormElement>
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
new file mode 100644
index 0000000..9a3aa65
--- /dev/null
+++ b/app/components/index-setting.js
@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormIndexSettingComponent extends Component {
+  @tracked value;
+
+  constructor() {
+    super(...arguments);
+
+    this.setInitialValue();
+  }
+
+  @action
+  save() {
+    this.args.index.updateSetting(this.args.name, JSON.parse(this.value));
+  }
+
+  @action
+  async setInitialValue() {
+    const value = await this.args.index.getSetting(this.args.name);
+
+    this.value = JSON.stringify(value);
+  }
+
+  @action
+  async reset() {
+    this.args.index.resetSetting(this.args.name);
+  }
+}
diff --git a/app/models/index.js b/app/models/index.js
index 93999a6..3abcac3 100644
--- a/app/models/index.js
+++ b/app/models/index.js
@@ -2,6 +2,7 @@ import query from '../utils/query';
 // import { TrackedArray } from 'tracked-built-ins';
 // import { trackedFunction } from 'ember-resources/util/function';
 import Document from './document';
+import { dasherize } from '@ember/string';
 
 export default class Index {
   constructor(data = {}) {
@@ -66,6 +67,23 @@ export default class Index {
     });
   }
 
+  getSetting(name) {
+    return query(`${this.path}/settings/${dasherize(name)}`);
+  }
+
+  updateSetting(name, value) {
+    return query(`${this.path}/settings/${dasherize(name)}`, {
+      method: 'PUT',
+      body: JSON.stringify(value),
+    });
+  }
+
+  resetSetting(name) {
+    return query(`${this.path}/settings/${dasherize(name)}`, {
+      method: 'DELETE',
+    });
+  }
+
   getDisplayedAttributes() {
     return query(`${this.path}/settings/displayed-attributes`);
   }
@@ -83,6 +101,23 @@ export default class Index {
     });
   }
 
+  getDistinctAttribute() {
+    return query(`${this.path}/settings/distinct-attribute`);
+  }
+
+  updateDistinctAttribute(value) {
+    return query(`${this.path}/settings/distinct-attribute`, {
+      method: 'PUT',
+      body: JSON.stringify(value),
+    });
+  }
+
+  resetDistinctAttribute() {
+    return query(`${this.path}/settings/distinct-attribute`, {
+      method: 'DELETE',
+    });
+  }
+
   // getSearchableAttributes() {
   //   return query(`${this.path}/settings/searchable-attributes`);
   // }
diff --git a/app/routes/admin/indexes/item/settings.js b/app/routes/admin/indexes/item/settings.js
index bdb4ede..5be6546 100644
--- a/app/routes/admin/indexes/item/settings.js
+++ b/app/routes/admin/indexes/item/settings.js
@@ -1,11 +1,3 @@
 import Route from '@ember/routing/route';
-// import { hash } from 'rsvp';
 
-export default class AdminIndexesItemSettingsRoute extends Route {
-  // async model() {
-  //   const index = this.modelFor('admin.indexes.item');
-  //   return hash({
-  //     index,
-  //   });
-  // }
-}
+export default class AdminIndexesItemSettingsRoute extends Route {}
diff --git a/app/templates/admin/indexes/item/settings.hbs b/app/templates/admin/indexes/item/settings.hbs
index f1fd56d..cbba176 100644
--- a/app/templates/admin/indexes/item/settings.hbs
+++ b/app/templates/admin/indexes/item/settings.hbs
@@ -1,10 +1,13 @@
-{{! <Headers::H2 @title="Displayed attributes"/> }}
-
-<Form::IndexSetting
+<IndexSetting
   @name='displayedAttributes'
   @index={{@model}}
 />
 
+<IndexSetting
+  @name='distinctAttribute'
+  @index={{@model}}
+/>
+
 {{!-- <label class="text-xl mb-2 block">
   Displayed attributes
 </label>
diff --git a/tests/integration/components/form/index-setting-test.js b/tests/integration/components/index-setting-test.js
similarity index 77%
rename from tests/integration/components/form/index-setting-test.js
rename to tests/integration/components/index-setting-test.js
index b2f04d1..aa889a1 100644
--- a/tests/integration/components/form/index-setting-test.js
+++ b/tests/integration/components/index-setting-test.js
@@ -3,22 +3,22 @@ import { setupRenderingTest } from 'meiliadmin/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | form/index-setting', function (hooks) {
+module('Integration | Component | index-setting', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.set('myAction', function(val) { ... });
 
-    await render(hbs`<Form::IndexSetting />`);
+    await render(hbs`<IndexSetting />`);
 
     assert.dom(this.element).hasText('');
 
     // Template block usage:
     await render(hbs`
-      <Form::IndexSetting>
+      <IndexSetting>
         template block text
-      </Form::IndexSetting>
+      </IndexSetting>
     `);
 
     assert.dom(this.element).hasText('template block text');