diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
index 54ce6a92e6..58c34a028b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -6,7 +6,7 @@ import type { TranslateResult } from 'vue-i18n';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PButton, PPopover, PSelectCard, PI,
+    PButton, PPopover, PSelectCard, PI, PDivider,
 } from '@cloudforet/mirinae';
 import { POPOVER_TRIGGER } from '@cloudforet/mirinae/src/data-display/popover/type';
 
@@ -397,7 +397,7 @@ watch(() => state.showPopover, (val) => {
                             {{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TRANSFORMATIONS') }}
                         </div>
                     </div>
-                    <div class="content-part">
+                    <div class="content-part flex">
                         <div class="left-part">
                             <p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(0, 2)"
                                            :key="operatorInfo.key"
@@ -423,6 +423,9 @@ watch(() => state.showPopover, (val) => {
                                 </div>
                             </p-select-card>
                         </div>
+                        <p-divider class="content-divider"
+                                   vertical
+                        />
                         <div class="right-part">
                             <p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(2)"
                                            :key="operatorInfo.key"
@@ -497,7 +500,7 @@ watch(() => state.showPopover, (val) => {
     .data-source-popper-operator-wrapper {
         //display: flex;
         //flex-direction: column;
-        width: 43rem;
+        width: 43.5rem;
         padding: 1rem;
 
         .conetent {
@@ -514,16 +517,20 @@ watch(() => state.showPopover, (val) => {
             }
 
             .content-part {
-                @apply grid grid-cols-12;
+                overflow-y: scroll;
                 max-height: 22.5rem;
-                overflow: auto;
-                gap: 0.5rem;
+                height: auto;
+
                 .left-part, .right-part {
-                    @apply col-span-6;
+                    height: 100%;
                     display: flex;
                     flex-direction: column;
                     gap: 0.5rem;
                 }
+                .content-divider {
+                    margin: 0 1.125rem;
+                    height: 30.125rem;
+                }
             }
 
             .operator-card-contents {
@@ -616,6 +623,7 @@ watch(() => state.showPopover, (val) => {
 
 /* custom design-system component - p-select-card */
 :deep(.p-select-card) {
+    height: 5.625rem;
     padding: 1rem;
     .select-card-contents {
         @apply flex justify-start items-center;
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
index 4b06637bde..e5c8a18b29 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
@@ -50,11 +50,22 @@ export const widgetValidatorRegistry: WidgetValidatorRegistry = {
         }
         return !!fieldValue.data;
     },
-    formatRules: (fieldValue: FormatRulesValue, widgetConfig) => {
+    formatRules: (fieldValue: FormatRulesValue, widgetConfig, allValueMap) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const formatRulesOptions = (_fieldsSchema.formatRules?.options ?? {}) as FormatRulesOptions;
         const type = formatRulesOptions.formatRulesType;
 
+        if (formatRulesOptions.useField) {
+            if (formatRulesOptions.dependentField) {
+                const dependentValue: string|string[]|undefined = allValueMap?.[formatRulesOptions.dependentField]?.value?.data;
+                if (!dependentValue) return !!fieldValue.field;
+                if (Array.isArray(dependentValue)) {
+                    return !dependentValue.includes(fieldValue.field);
+                }
+                return dependentValue !== fieldValue.field;
+            }
+            return !!fieldValue.field;
+        }
         if (type === FORMAT_RULE_TYPE.textThreshold) {
             return fieldValue.rules.every((d) => !!d.text && !!d.color);
         }
@@ -64,9 +75,6 @@ export const widgetValidatorRegistry: WidgetValidatorRegistry = {
         if (type === FORMAT_RULE_TYPE.textNumberThreshold) {
             return fieldValue.rules.every((d) => !!d.text && !!d.number && !!d.color);
         }
-        if (formatRulesOptions.useField) {
-            return !!fieldValue.field;
-        }
         return true;
     },
     categoryBy: (fieldValue: CategoryByValue, widgetConfig) => {
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
index d88a61b20c..912f729007 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
@@ -48,7 +48,6 @@ export default class WidgetFieldValueManager {
         dataTable: PublicDataTableModel|PrivateDataTableModel,
         originData: WidgetFieldValueMap,
     ) {
-        console.debug('WidgetFieldValueManager.constructor()', widgetConfig, dataTable, originData);
         this.widgetConfig = widgetConfig;
         this.dataTable = dataTable;
         this.widgetInvalid = !dataTable;
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
index f5cade9d4c..3e7b43476b 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
@@ -38,6 +38,19 @@ const state = reactive({
     fieldValue: computed<FormatRulesValue>(() => props.fieldManager.data[FIELD_KEY].value),
     type: computed<FormatRulesType>(() => props.widgetFieldSchema?.options?.formatRulesType as FormatRulesType),
     invalid: computed(() => !validator(state.fieldValue, props.widgetConfig)),
+    fieldInvalid: computed(() => {
+        if (!props.widgetFieldSchema?.options?.useField) return false;
+        if (state.fieldValue.field === undefined) return true;
+        const dependentField = props.widgetFieldSchema?.options?.dependentField;
+        const dependentValue: string|string[]|undefined = props.fieldManager.data[dependentField]?.value?.data;
+        if (dependentField && dependentValue) {
+            if (Array.isArray(dependentValue)) {
+                return dependentValue.includes(state.fieldValue.field);
+            }
+            return dependentValue === state.fieldValue.field;
+        }
+        return false;
+    }),
     selectedField: computed<string|undefined>(() => {
         if (props.widgetFieldSchema?.options?.useField) {
             return state.fieldValue.field;
@@ -98,7 +111,7 @@ const handleUpdateField = (val: string) => {
                 <p-select-dropdown :menu="state.menuItems"
                                    :selected="state.selectedField"
                                    use-fixed-menu-style
-                                   :invalid="state.selectedField === undefined"
+                                   :invalid="state.fieldInvalid"
                                    block
                                    @update:selected="handleUpdateField"
                 />
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/type.ts b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/type.ts
index 5d3e827c27..d614401d81 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/type.ts
+++ b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/type.ts
@@ -16,6 +16,7 @@ export interface FormatRulesValue {
 export interface FormatRulesOptions {
     useField?: boolean;
     dataTarget?: FieldDataTargetType;
+    dependentField?: string; // groupBy field, xAxis field, yAxis field.. etc.
     formatRulesType: FormatRulesType;
     description?: string;
     baseColor?: string;
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts
index 5bd494a74d..7c862a2380 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts
@@ -26,6 +26,7 @@ const colorCodedHeatmap: WidgetConfig = {
             options: {
                 dataTarget: 'labels_info',
                 useField: true,
+                dependentField: 'groupBy',
                 formatRulesType: FORMAT_RULE_TYPE.textThreshold,
                 description: 'COMMON.WIDGETS.ADVANCED_FORMAT_RULES.COLOR_CODED_HEATMAP_DESC',
             },