diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index 62cac924e93bcb9b8a9f15b527a659122ebb5f6a..8533e81199afd553e5f09de336ea7de963593052 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -207,9 +207,8 @@ export default {
       },
       // * create an array, because backend expects an array
       set(newValue) {
-        console.log("arrayOption")
         this.form.options.value = this.trimWhiteSpace(newValue).split(",");
-        this.updateStore(true);
+        this.updateStore();
       },
     },
   },
@@ -232,7 +231,7 @@ export default {
         this.customForm.dataKey
       );
     },
-    updateStore(updateColorStyles) {
+    updateStore() {
       const data = {
         dataKey: this.customForm.dataKey,
         label: this.form.label.value,
@@ -242,10 +241,9 @@ export default {
         options: this.form.options.value,
       };
       this.$store.commit("feature_type/UPDATE_CUSTOM_FORM", data);
-      if (updateColorStyles) {
-        this.$emit("update:new-list-value");
-      }
-
+      /* if (this.form.field_type.value === "list") {
+        this.$emit("newlistvalue");
+      } */
     },
     trimWhiteSpace(string) {
       // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation
diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js
index dcdb1fe06b068eb1477e8980f672fe3a566e9e0a..f91b176acebcc9dae4b8ceb87831828d775e5b1d 100644
--- a/src/store/modules/feature_type.js
+++ b/src/store/modules/feature_type.js
@@ -7,6 +7,7 @@ const feature_type = {
   namespaced: true,
   state: {
     form: null,
+    colorsStyleList: [],
     customForms: [],
     current_feature_type_slug: null,
     feature_types: [],
@@ -35,7 +36,11 @@ const feature_type = {
     },
     UPDATE_CUSTOM_FORM(state, payload) {
       const index = state.customForms.findIndex((el) => el.dataKey === payload.dataKey);
-      if (index !== -1) state.customForms[index] = payload
+      if (index !== -1) {
+        state.customForms[index] = payload;
+         //* trigger update of available options for colors style in feature_type_edit
+        state.colorsStyleList = state.customForms.filter(cust => cust.options && cust.options.length)
+      }
     },
     REMOVE_CUSTOM_FORM(state, payload) {
       state.customForms = state.customForms.filter(form => form.dataKey !== payload);
@@ -55,7 +60,7 @@ const feature_type = {
       (el) => el.slug === state.current_feature_type_slug
     ),
     //* filter options of special field that is of type list to select a color
-   // colorsStyleList: (state) => state.customForms.filter(cust => cust.options && cust.options.length),
+    // colorsStyleList: (state) => state.customForms.filter(cust => cust.options && cust.options.length),
   },
   actions: {
     GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index f6245410a3a413ba710a83e175389a3677cdaa82..6fe9b1477637de3f8cfce72bf387f518df10a9b8 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -72,13 +72,13 @@
 
         <!--  //* s'affiche après sélection d'option de type liste dans type de champ -->
         <div
-          v-if="colorsStyleOptions.length > 0"
+          v-if="colorsStyleList.length > 0"
           class="custom_style"
           id="id_style_container"
         >
           <div class="list_selection" id="id_list_selection">
             <Dropdown
-              :options="colorsStyleOptions"
+              :options="colorsStyleList"
               :selected="selected_colors_style"
               :selection.sync="selected_colors_style"
               :placeholder="'Sélectionner la liste de valeurs'"
@@ -95,7 +95,7 @@
                 :name="key"
                 type="color"
                 :value="value"
-                @input="updateColorStyles"
+                @input="setColorStyles"
               />
             </div>
           </div>
@@ -109,7 +109,6 @@
             :key="form.dataKey"
             :dataKey="form.dataKey"
             :customForm="form"
-            v-on:new-list-value="updateColorStylesOptions"
           />
         </div>
 
@@ -173,6 +172,7 @@ export default {
       action: "create",
       dataKey: 0,
       error: null,
+      //colorsStyleOptions: [],
       geomTypeChoices: [
         { value: "linestring", name: "Ligne" },
         { value: "point", name: "Point" },
@@ -181,7 +181,7 @@ export default {
       form: {
         colors_style: {
           //value: null,
-          options: [],
+          // options: [],
           fields: [],
           value: {
             colors: {},
@@ -233,8 +233,8 @@ export default {
 
   computed: {
     ...mapGetters(["project"]),
-    ...mapState("feature_type", ["customForms"]),
-    ...mapGetters("feature_type", ["feature_type", /* "colorsStyleList" */]),
+    ...mapState("feature_type", ["customForms", "colorsStyleList"]),
+    ...mapGetters("feature_type", ["feature_type" /* "colorsStyleList" */]),
     selectedGeomType: {
       get() {
         const currentGeomType = this.geomTypeChoices.find(
@@ -256,19 +256,16 @@ export default {
         return this.form.colors_style.value.custom_field_name;
       },
       set(newValue) {
-        //console.log(newValue)
-        this.form.colors_style.value.custom_field_name = newValue;
+        console.log("selectedColorsStyle", newValue);
+        const newColorsStyle = {
+          colors: { [newValue.options[0]]: "#000000", [newValue.options[1]]: "#000000" },
+          custom_field_name: newValue.name,
+        };
+        this.form.colors_style.value = newColorsStyle;
+        //this.updateColorsFields();
         this.updateStore();
       },
     },
-    colorsStyleOptions: function () {
-      //const options = customForms.filter(cust => cust.options && cust.options.length)
-      console.log(this.customForms)
-      const list_value_array = this.customForms.filter(cust => cust.options && cust.options.length);
-      const labels = list_value_array.map((el) => el.label);
-      console.log(list_value_array, labels)
-      return labels
-    },
   },
 
   watch: {
@@ -319,13 +316,16 @@ export default {
       this.updateStore();
     },
 
-    updateColorStylesOptions() {
-      console.log("updateColorStylesOptions")
-    }
-,
-    updateColorStyles(event) {
-      console.log(event.target.name);
-      console.log(event.target.value);
+    /* updateColorsFields() {
+      console.log("updateColorsFields");
+      const colorsStyleValue = {
+        colors: { Boon: "#008f51", Poolvoerde: "#935100" },
+        custom_field_name: "source",
+      };
+      // this.form.colors_style.value.colors = colorsStyleValue;
+    }, */
+
+    setColorStyles(event) {
       const { name, value } = event.target;
       this.form.colors_style.value.colors[name] = value;
     },