diff --git a/io.sc.platform.lcdp.frontend/src/views/theme/Grid.vue b/io.sc.platform.lcdp.frontend/src/views/theme/Grid.vue
index 4f6f5e22..ebd0fd71 100644
--- a/io.sc.platform.lcdp.frontend/src/views/theme/Grid.vue
+++ b/io.sc.platform.lcdp.frontend/src/views/theme/Grid.vue
@@ -1,17 +1,41 @@
 <template>
   <div class="row">
     <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10">
-      <w-color-input v-model="$gc.theme.grid['headBgColor']" :label="$t('theme.grid.headBgColor')" class="p-1" dense outlined restore></w-color-input>
+      <w-color-input
+        v-model="$gc.theme.grid['headBgColor']"
+        :label="$t('theme.grid.headBgColor')"
+        class="p-1"
+        dense
+        outlined
+        restore
+        @update:model-value="colorChanged"
+      ></w-color-input>
     </div>
   </div>
   <div class="row">
     <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10">
-      <w-color-input v-model="$gc.theme.grid['stickyBgColor']" :label="$t('theme.grid.stickyBgColor')" class="p-1" dense outlined restore></w-color-input>
+      <w-color-input
+        v-model="$gc.theme.grid['stickyBgColor']"
+        :label="$t('theme.grid.stickyBgColor')"
+        class="p-1"
+        dense
+        outlined
+        restore
+        @update:model-value="colorChanged"
+      ></w-color-input>
     </div>
   </div>
   <div class="row">
     <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10">
-      <w-color-input v-model="$gc.theme.grid['borderColor']" :label="$t('theme.grid.borderColor')" class="p-1" dense outlined restore></w-color-input>
+      <w-color-input
+        v-model="$gc.theme.grid['borderColor']"
+        :label="$t('theme.grid.borderColor')"
+        class="p-1"
+        dense
+        outlined
+        restore
+        @update:model-value="colorChanged"
+      ></w-color-input>
     </div>
   </div>
 </template>