diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 5a24e53d..90243c77 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -123,6 +123,7 @@ export interface CardConfig {
   fontSize?: number;
   showUnit?: boolean;
   textAlign?: "center" | "right" | "left";
+  decorations?: { [key: string]: string };
 }
 
 export interface TextConfig {
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index a2f01a42..fc0b00ca 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -32,6 +32,7 @@ limitations under the License. -->
         :config="{
           i: 0,
           ...graph,
+          decorations: graph?.decorations,
           metricConfig: config.metricConfig,
           expressions: config.expressions || [],
           typesOfMQE: typesOfMQE || [],
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 62248e94..dc36d47f 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -32,7 +32,8 @@ limitations under the License. -->
           :data="states.source"
           :config="{
             ...graph,
-            legend: (dashboardStore.selectedGrid.graph || {}).legend,
+            decorations: dashboardStore.selectedGrid.graph?.decorations,
+            legend: dashboardStore.selectedGrid.graph?.legend,
             i: dashboardStore.selectedGrid.i,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
             relatedTrace: dashboardStore.selectedGrid.relatedTrace,
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue b/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
index fd1176a4..ffcc4079 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
@@ -38,16 +38,12 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
 
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
-  const decorations = ref<{ [key: string]: string }>(graph.decorations || {});
-  const keys = ref<string[]>(graph.decorations ? Object.keys(graph.decorations) : [""]);
+  const decorations = ref<{ [key: string]: string }>(dashboardStore.selectedGrid.decorations || {});
+  const keys = ref<string[]>(dashboardStore.selectedGrid.decorations ? Object.keys(decorations.value) : [""]);
 
   function changeKeys(event: any, index: number) {
     const params = event.target.textContent || "";
     const list = Object.keys(decorations.value);
-    if (!list[index]) {
-      return;
-    }
     if (params) {
       decorations.value[params] = decorations.value[list[index]];
     }
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index db73fe39..a652c891 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -51,6 +51,7 @@ limitations under the License. -->
         :data="state.source"
         :config="{
           ...data.graph,
+          decorations: data.graph?.decorations,
           i: data.i,
           id: data.id,
           metricConfig: data.metricConfig || [],
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index ff5b2c33..0c4b34da 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -22,7 +22,7 @@ limitations under the License. -->
       justifyContent: config.textAlign || 'center',
     }"
   >
-    {{ singleVal }}
+    {{ decorations[singleVal] || singleVal }}
     <span class="unit" v-show="config.showUnit && unit">
       {{ decodeURIComponent(unit) }}
     </span>
@@ -48,11 +48,13 @@ limitations under the License. -->
         showUnit: true,
         textAlign: "center",
         metricConfig: [],
+        decorations: {},
       }),
     },
   });
   const { t } = useI18n();
   const metricConfig = computed(() => props.config.metricConfig || []);
+  const decorations = computed(() => props.config.decorations || {});
   const key = computed(() => Object.keys(props.data)[0]);
   const singleVal = computed(() =>
     Array.isArray(props.data[key.value]) ? props.data[key.value][0] : props.data[key.value],