diff --git a/src/components/FeatureType/SymbologySelector.vue b/src/components/FeatureType/SymbologySelector.vue
index cefaec73cc2fb134eec4a05913d94f8a36b65467..b2dc1389ae1efc846e70d5da3ac5d4da751dfa89 100644
--- a/src/components/FeatureType/SymbologySelector.vue
+++ b/src/components/FeatureType/SymbologySelector.vue
@@ -107,7 +107,7 @@ export default {
           html_name: 'couleur',
           value: '#000000',
         },
-        opacity: 0,
+        opacity: 1,
       }
     };
   },
diff --git a/src/services/map-service.js b/src/services/map-service.js
index 2c253118ea88805b72957f1a4c8255e4baf8c9b4..7388587d0c6b5811a1a46976ef6fea9cf64a82be 100644
--- a/src/services/map-service.js
+++ b/src/services/map-service.js
@@ -340,6 +340,19 @@ const mapService = {
     }
   },
 
+  retrieveFeatureOpacity: function (featureType, properties) {
+    const colorsStyle = featureType.colors_style;
+    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
+      const currentValue = properties[colorsStyle.custom_field_name];
+      if (currentValue) {
+        const colorStyle = colorsStyle.opacities[currentValue];
+        return parseFloat(colorStyle ? colorStyle : featureType.opacity);
+      }
+    }
+    //* parseFloat is not necessary but used for precaution
+    return parseFloat(featureType.opacity);
+  },
+
   addVectorTileLayer: function (url, projectId, featureTypes, formFilters) {
     const format_cfg = {/*featureClass: Feature*/ };
     const mvt = new MVT(format_cfg);
@@ -380,7 +393,9 @@ const mapService = {
           color : '#000000';
 
     const rgbaColor = asArray(colorValue);
-    rgbaColor[3] = 0.5;//opacity
+    console.log({ featureType, properties });
+    //* set opacity from feature-type colors_style
+    rgbaColor[3] = this.retrieveFeatureOpacity(featureType, properties) || 0.5;//opacity
     const hiddenStyle = new Style();
 
     const defaultStyle = new Style(
@@ -493,7 +508,7 @@ const mapService = {
         feature_type = feature.getProperties().feature_type ||
         featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
       }
-    } else { //? TPS: I couldn't find when this code is used, is this still in use ?
+    } else { //? TPD: I couldn't find when this code is used, is this still in use ?
       status = feature.status;
       if (status) status = status.name;
       date_maj = feature.updated_on;
diff --git a/src/views/FeatureType/FeatureTypeSymbology.vue b/src/views/FeatureType/FeatureTypeSymbology.vue
index dac30e570dab4fa66efaab69def34c6756249ca1..57f43bb376a05e1cf9ba12dcf94a61beeb19b9ff 100644
--- a/src/views/FeatureType/FeatureTypeSymbology.vue
+++ b/src/views/FeatureType/FeatureTypeSymbology.vue
@@ -99,7 +99,10 @@
                 feature_type.colors_style.value.icons[option] :
                 null
               "
-              :init-opacity="feature_type.colors_style.opacity"
+              :init-opacity="feature_type.colors_style.value ?
+                feature_type.colors_style.value.opacities[option] :
+                null
+              "
               :geom-type="feature_type.customfield_set.geomType"
               @set="setColorsStyle"
             />
@@ -150,10 +153,12 @@ export default {
           fields: [],
           colors: {},
           icons: {},
+          opacities: {},
           custom_field_name: '',
           value: {
             colors: {},
-            icons: {}
+            icons: {},
+            opacities: {},
           }
         },
       },
@@ -240,12 +245,15 @@ export default {
     ]),
 
     initForm() {
-      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
-      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
+      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color)); //? wouldn't be better to use lodash: https://medium.com/@pmzubar/why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript-b28ac5e36521
+      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon)); //? since the library is already imported ?
       this.form.colors_style = {
         ...this.form.colors_style,
         ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
       };
+      if (!this.form.colors_style.value['opacities']) { //* if the opacity values were never setted (would be better to find out why)
+        this.form.colors_style.value['opacities'] = {};
+      }
       if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
         this.selectedCustomfield =
           this.feature_type.customfield_set.find(
@@ -256,8 +264,6 @@ export default {
 
     setDefaultStyle(e) {
       const { color, icon, opacity } = e.value;
-      console.log({ color, icon, opacity });
-      console.log('this.form', this.form);
       this.form.color = color.value;
       this.form.icon = icon;
       this.form.opacity = opacity;
@@ -266,14 +272,12 @@ export default {
     setColorsStyle(e) {
       const { name, value } = e;
       const { color, icon, opacity } = value;
-      console.log({ color, icon, opacity });
-      console.log(this.form.colors_style.colors);
-      console.log(this.form.colors_style.colors[name]);
       this.form.colors_style.colors[name] = color;
       this.form.colors_style.icons[name] = icon;
-      //this.form.colors_style.icons[name] = icon;
+      this.form.colors_style.opacities[name] = opacity;
       this.form.colors_style.value.colors[name] = color;
       this.form.colors_style.value.icons[name] = icon;
+      this.form.colors_style.value.opacities[name] = opacity; //? why do we need to duplicate values ? for MVT ?
     },
 
     sendFeatureSymbology() {