diff --git a/src/components/FeatureType/SymbologySelector.vue b/src/components/FeatureType/SymbologySelector.vue
index 83bb06538a1d1a093f92399681ae9c40a184a14f..cefaec73cc2fb134eec4a05913d94f8a36b65467 100644
--- a/src/components/FeatureType/SymbologySelector.vue
+++ b/src/components/FeatureType/SymbologySelector.vue
@@ -18,10 +18,10 @@
         <label>Opacité &nbsp;<span>(%)</span></label>
         <div class="range-container">
           <input
+            v-model="form.opacity"
             type="range"
             min="0"
             max="1"
-            v-model="form.opacity"
             step="0.01"
           >
           <output class="range-output-bubble">
@@ -83,8 +83,8 @@ export default {
       default: 'circle'
     },
     initOpacity: {
-      type: Number,
-      default: 1
+      type: String,
+      default: '1'
     },
     geomType: {
       type: String,
diff --git a/src/views/FeatureType/FeatureTypeSymbology.vue b/src/views/FeatureType/FeatureTypeSymbology.vue
index 39ac0a9915a6a98059e2b3c4518b20d1ea53b316..dac30e570dab4fa66efaab69def34c6756249ca1 100644
--- a/src/views/FeatureType/FeatureTypeSymbology.vue
+++ b/src/views/FeatureType/FeatureTypeSymbology.vue
@@ -50,6 +50,7 @@
           v-if="feature_type"
           :init-color="feature_type.color"
           :init-icon="feature_type.icon"
+          :init-opacity="feature_type.opacity"
           :geom-type="feature_type.geom_type"
           @set="setDefaultStyle"
         />
@@ -98,6 +99,7 @@
                 feature_type.colors_style.value.icons[option] :
                 null
               "
+              :init-opacity="feature_type.colors_style.opacity"
               :geom-type="feature_type.customfield_set.geomType"
               @set="setColorsStyle"
             />
@@ -253,17 +255,25 @@ export default {
     },
 
     setDefaultStyle(e) {
-      const value  = e.value;
-      this.form.color = value.color.value;
-      this.form.icon = value.icon;
+      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;
     },
 
     setColorsStyle(e) {
       const { name, value } = e;
-      this.form.colors_style.colors[name] = value.color;
-      this.form.colors_style.icons[name] = value.icon;
-      this.form.colors_style.value.colors[name] = value.color;
-      this.form.colors_style.value.icons[name] = value.icon;
+      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.value.colors[name] = color;
+      this.form.colors_style.value.icons[name] = icon;
     },
 
     sendFeatureSymbology() {