diff --git a/package-lock.json b/package-lock.json
index b97b5e1ccb5cd3bb97abdb38ecd4be6de9711e06..a0b0d016fa8a592eee3720a160f8ce89058d0278 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "geocontrib-frontend",
-  "version": "2.3.1",
+  "version": "2.3.2-rc2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7260,8 +7260,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index a090d84b15f3f20b1c4bc9a90a7fc2482078d19d..8f55afdbe57b2ad2089383f64f4e017bdb6981cb 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "leaflet": "^1.5.1",
     "leaflet-draw": "^1.0.4",
     "leaflet.vectorgrid": "^1.3.0",
+    "lodash": "^4.17.21",
     "pbf": "^3.2.1",
     "register-service-worker": "^1.7.1",
     "sortablejs": "^1.14.0",
diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js
index d8f26b86541ecb7a200869673c6a7bf6efca7690..6b15ea11fdbe55de80682ddacab7d6e0e6089866 100644
--- a/src/assets/js/map-util.js
+++ b/src/assets/js/map-util.js
@@ -372,7 +372,6 @@ const mapUtil = {
     features.forEach((feature) => {
 
       const featureProperties = feature.properties ? feature.properties : feature;
-
       const featureType = featureTypes.find((ft) => ft.slug === (featureProperties.feature_type.slug || featureProperties.feature_type));
       let filters = [];
       if (filter) {
diff --git a/src/views/feature_type/Feature_type_symbology.vue b/src/views/feature_type/Feature_type_symbology.vue
index 87fd4dbf66b56747fbc9e6578843d0d96e9bde99..619efa1d9a4b0b74e802bf234f98c421d343e3ab 100644
--- a/src/views/feature_type/Feature_type_symbology.vue
+++ b/src/views/feature_type/Feature_type_symbology.vue
@@ -87,6 +87,7 @@
         <button
           class="ui teal icon button margin-25"
           type="button"
+          :disabled="!canSaveSymbology"
           @click="sendFeatureSymbology"
         >
           <i class="white save icon"></i>
@@ -99,6 +100,7 @@
 
 <script>
 import frag from 'vue-frag';
+import { isEqual } from 'lodash';
 
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
 
@@ -126,13 +128,16 @@ export default {
         icon: 'circle',
         colors_style: {
           fields: [],
+          colors: {},
+          icons: {},
+          custom_field_name: '',
           value: {
             colors: {},
-            icons: {},
-            custom_field_name: '',
-          },
+            icons: {}
+          }
         },
-      }
+      },
+      canSaveSymbology: false
     }
   },
 
@@ -151,14 +156,31 @@ export default {
 
   watch: {
     selectedCustomfield(newValue) {
-      this.form.colors_style.value.custom_field_name = newValue;
+      this.form.colors_style.custom_field_name = newValue;
     },
     feature_type(newValue) {
       if (newValue) {
         // Init form
-        this.form.color = newValue.color;
-        this.form.icon = newValue.icon;
-        this.form.colors_style = newValue.colors_style;
+        this.form.color = JSON.parse(JSON.stringify(newValue.color));
+        this.form.icon = JSON.parse(JSON.stringify(newValue.icon));
+        this.form.colors_style = {
+          ...this.form.colors_style,
+          ...JSON.parse(JSON.stringify(newValue.colors_style))
+        };
+      }
+    },
+    form: {
+      deep: true,
+      handler(newValue) {
+        if (isEqual(newValue, {
+          color: this.feature_type.color, 
+          icon: this.feature_type.icon,
+          colors_style: this.feature_type.colors_style
+        })) {
+          this.canSaveSymbology = false;
+        } else {
+          this.canSaveSymbology = true;
+        }
       }
     }
   },
@@ -170,9 +192,12 @@ export default {
     this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
     if (this.feature_type) {
       // Init form
-      this.form.color = this.feature_type.color;
-      this.form.icon = this.feature_type.icon;
-      this.form.colors_style = this.feature_type.colors_style;
+      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
+      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
+      this.form.colors_style = {
+        ...this.form.colors_style,
+        ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
+      };
     }
   },
 
@@ -196,6 +221,8 @@ export default {
 
     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;
     },