diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormAddLabels.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
similarity index 58%
rename from apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormAddLabels.vue
rename to apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
index 44276d226b..fafe2b8b8b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormAddLabels.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import {
+    onMounted, reactive, ref, watch,
+} from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
 import { random } from 'lodash';
@@ -11,37 +13,47 @@ import {
 import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
-import type { AdditionalLabel } from '@/common/modules/widgets/types/widget-data-table-type';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
+import type { TransformDataTableProps, TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { AddLabelsOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 
-const DATE_FIELD = 'Date';
-const COMPONENT_RANDOM_KEY = `add-labels-${random()}`;
-interface Props {
-    labels: (AdditionalLabel[]|string[]);
+interface AdditionalLabel {
+    name: string;
+    value: string;
 }
 
-const props = defineProps<Props>();
+const DATE_FIELD = 'Date';
+const COMPONENT_RANDOM_KEY = `add-labels-${random()}`;
+const props = defineProps<TransformDataTableProps<AddLabelsOptions>>();
+const emit = defineEmits<{(e: 'update:operator-options', value: AddLabelsOptions): void; }>();
 
-const emit = defineEmits<{ e: 'update:labels'; value: AdditionalLabel[]}>();
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTableId: props.originData?.data_table_id,
+});
+const labelsInfo = ref<AddLabelsOptions['labels']>(props.originData.labels);
 const state = reactive({
-    proxyLabels: useProxyValue<AdditionalLabel[]>('labels', props, emit),
-    groupByKeys: computed<string[]>(() => []),
+    proxyOperatorOptions: useProxyValue<AddLabelsOptions>('operator-options', props, emit),
+    refinedLabels: [] as AdditionalLabel[],
+    // groupByKeys: computed<string[]>(() => []),
 });
 
 /* Helper */
 const getInvalidText = (idx: number): TranslateResult|undefined => {
-    const targetName = state.proxyLabels[idx]?.name;
+    const targetName = state.refinedLabels[idx]?.name;
     if (!targetName) {
         return undefined;
     }
-    if (state.groupByKeys.includes(targetName)) {
-        return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.GROUP_BY_KEY_INVALID');
-    }
+    // if (state.groupByKeys.includes(targetName)) {
+    //     return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.GROUP_BY_KEY_INVALID');
+    // }
     if (targetName === DATE_FIELD) {
         return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.DATE_FIELD_INVALID');
     }
-    if (state.proxyLabels.some((label, lIdx) => lIdx !== idx && label.name === targetName)) {
+    if (state.refinedLabels.some((label, lIdx) => lIdx !== idx && label.name === targetName)) {
         return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.DUPLICATED_LABEL');
     }
     return undefined;
@@ -49,8 +61,8 @@ const getInvalidText = (idx: number): TranslateResult|undefined => {
 
 /* Events */
 const handleClickAddLabel = () => {
-    state.proxyLabels = [
-        ...state.proxyLabels,
+    state.refinedLabels = [
+        ...state.refinedLabels,
         {
             name: '',
             value: '',
@@ -58,17 +70,38 @@ const handleClickAddLabel = () => {
     ];
 };
 const handleRemoveLabel = (idx: number) => {
-    state.proxyLabels = state.proxyLabels.filter((_, index) => index !== idx);
+    state.refinedLabels = state.refinedLabels.filter((_, index) => index !== idx);
 };
+
+/* Watcher */
+watch(() => state.refinedLabels, (_refinedLabels) => {
+    state.proxyOperatorOptions = {
+        ...state.proxyOperatorOptions,
+        labels: _refinedLabels.reduce((acc, label) => {
+            if (label.name && label.value) {
+                acc[label.name] = label.value;
+            }
+            return acc;
+        }, {}),
+    };
+}, { deep: true });
+
+onMounted(() => {
+    state.refinedLabels = Object.entries(labelsInfo.value).map(([name, value]) => ({ name, value }));
+});
 </script>
 
 <template>
-    <div class="widget-form-data-table-card-transform-form-add-labels">
+    <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                        :operator="DATA_TABLE_OPERATOR.ADD_LABELS"
+                                                        :data-table-info.sync="dataTableInfo"
+                                                        class="widget-form-data-table-card-transform-add-labels"
+    >
         <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.ADDITIONAL_LABELS')"
                        required
         >
             <div class="additional-labels-wrapper">
-                <div v-if="state.proxyLabels.length"
+                <div v-if="state.refinedLabels.length"
                      class="field-title-wrapper"
                 >
                     <p-field-title class="field-title"
@@ -84,7 +117,7 @@ const handleRemoveLabel = (idx: number) => {
                                    inline
                     />
                 </div>
-                <div v-for="(labelInfo, idx) in state.proxyLabels"
+                <div v-for="(labelInfo, idx) in state.refinedLabels"
                      :key="`${COMPONENT_RANDOM_KEY}-${idx}`"
                      class="label-wrapper"
                 >
@@ -99,7 +132,7 @@ const handleRemoveLabel = (idx: number) => {
                         />
                         <p-icon-button name="ic_delete"
                                        size="sm"
-                                       :disabled="state.proxyLabels.length === 1"
+                                       :disabled="state.refinedLabels.length === 1"
                                        @click="handleRemoveLabel(idx)"
                         />
                     </div>
@@ -118,11 +151,11 @@ const handleRemoveLabel = (idx: number) => {
                 </p-button>
             </div>
         </p-field-group>
-    </div>
+    </widget-form-data-table-card-transform-form-wrapper>
 </template>
 
 <style scoped lang="postcss">
-.widget-form-data-table-card-transform-form-add-labels {
+.widget-form-data-table-card-transform-add-labels {
     @apply flex flex-col gap-2;
 
     .additional-labels-wrapper {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue
new file mode 100644
index 0000000000..d9e2387c21
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+    reactive, ref, watch,
+} from 'vue';
+
+import { useProxyValue } from '@/common/composables/proxy-state';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import {
+    type DATA_TABLE_OPERATOR,
+} from '@/common/modules/widgets/_constants/data-table-constant';
+import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { ConcatOptions } from '@/common/modules/widgets/types/widget-model';
+
+
+
+const props = defineProps<TransformDataTableProps<ConcatOptions>>();
+const emit = defineEmits<{(e: 'update:operator-options', value: ConcatOptions): void; }>();
+
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTables: props.originData?.data_tables,
+});
+const state = reactive({
+    proxyOperatorOptions: useProxyValue<ConcatOptions>('operator-options', props, emit),
+});
+
+// Update operator options
+watch(dataTableInfo, (_dataTableInfo) => {
+    state.proxyOperatorOptions = {
+        data_tables: _dataTableInfo.dataTables || [],
+    };
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div class="widget-form-data-table-card-transform-concatenate">
+        <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                            :operator="DATA_TABLE_OPERATOR.CONCAT"
+                                                            :data-table-info.sync="dataTableInfo"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index 13cb69b7fe..e1b64e6843 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -10,28 +10,35 @@ import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/
 import { i18n } from '@/translations';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import getRandomId from '@/lib/random-id-generator';
 
 import WidgetFormDataTableCardAlertModal
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardAlertModal.vue';
 import WidgetFormDataTableCardFooter from '@/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue';
 import WidgetFormDataTableCardHeaderTitle
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue';
-import WidgetFormDataTableCardTransformForm
-    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue';
+import WidgetFormDataTableCardTransformAddLabels
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue';
+import WidgetFormDataTableCardTransformConcatenate
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue';
+import WidgetFormDataTableCardTransformEvaluate
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue';
+import WidgetFormDataTableCardTransformJoin
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue';
 import WidgetFormDataTableCardTransformPivotForm
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue';
+import WidgetFormDataTableCardTransformQuery
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue';
 import {
-    DATA_TABLE_TYPE, DATA_TABLE_FIELD_TYPE, type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
+    DATA_TABLE_TYPE, type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type {
-    DataTableAlertModalMode, QueryCondition, EvalExpressions, TransformDataTableInfo, AdditionalLabel,
+    DataTableAlertModalMode, TransformDataTableInfo,
 } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
-    DataTableOperator, JoinType, ConcatOptions, JoinOptions, QueryOptions, EvalOptions,
+    DataTableOperator, JoinType, QueryOptions, EvalOptions,
     DataTableTransformOptions,
-    EvaluateExpression, AddLabelsOptions, AdditionalLabels, PivotOptions,
+    EvaluateExpression, AddLabelsOptions, PivotOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
 
@@ -60,11 +67,11 @@ const state = reactive({
     dataTableName: props.item.name ? props.item.name : `${props.item.operator} Data`,
     applyDisabled: computed(() => {
         const haveSavedName = !!originState.name;
-        const haveRequiredConcatOptions = haveSavedName && state.dataTableInfo.dataTables.length === 2 && !state.dataTableInfo.dataTables.includes(undefined);
-        const haveRequiredJoinOptions = haveSavedName && state.dataTableInfo.dataTables.length === 2 && !state.dataTableInfo.dataTables.includes(undefined) && joinState.joinType;
-        const haveRequiredQueryOptions = haveSavedName && !!state.dataTableInfo.dataTableId && queryState.conditions.filter((cond) => !!cond.value.trim()).length > 0;
-        const haveRequiredEvalOptions = haveSavedName && !!state.dataTableInfo.dataTableId && evalState.expressions.filter((expression) => !!expression.name && !!expression.expression).length > 0;
-        const haveRequiredAddLabels = haveSavedName && !!state.dataTableInfo.dataTableId && addLabelsState.labels.every((label) => !!label.name && !!label.value);
+        const haveRequiredConcatOptions = haveSavedName && valueState.CONCAT.data_tables.length === 2 && !valueState.CONCAT.data_tables.includes(undefined);
+        const haveRequiredJoinOptions = haveSavedName && valueState.JOIN.data_tables.length === 2 && valueState.JOIN.how;
+        const haveRequiredQueryOptions = haveSavedName && !!valueState.QUERY.data_table_id && valueState.QUERY.conditions.filter((cond) => !!cond.trim()).length > 0;
+        const haveRequiredEvalOptions = haveSavedName && !!valueState.EVAL.data_table_id && valueState.EVAL.expressions.every((expression) => !!expression.name && !!expression.expression);
+        const haveRequiredAddLabels = haveSavedName && !!valueState.ADD_LABELS.data_table_id && Object.entries(valueState.ADD_LABELS.labels).every(([name, value]) => !!name && !!value);
         const haveRequiredPivotOptions = haveSavedName && !!valueState.PIVOT.data_table_id && !!valueState.PIVOT.fields?.labels && valueState.PIVOT.fields?.labels?.length > 0
             && !!valueState.PIVOT.fields?.column && !!valueState.PIVOT.fields?.data && (!!valueState.PIVOT.select || !!valueState.PIVOT.limit);
         if (state.operator === 'CONCAT') return !haveRequiredConcatOptions;
@@ -76,40 +83,27 @@ const state = reactive({
         return true;
     }),
     optionsChanged: computed(() => {
-        const dataTablesChanged = !isEqual(state.dataTableInfo.dataTables, originState.dataTableInfo.dataTables);
-        const dataTableIdChanged = state.dataTableInfo.dataTableId !== originState.dataTableInfo.dataTableId;
-        const joinTypeChanged = joinState.joinType !== originState.joinType;
-        const conditionsChanged = !isEqual(queryState.conditions.map((cond) => ({ value: cond.value })).filter((cond) => !!cond.value.trim().length), originState.conditions);
-        const expressionsChanged = !isEqual(evalState.expressions.map((expression) => ({
-            name: expression.name,
-            field_type: expression.fieldType,
-            expression: expression.expression,
+        const concatDataTablesChanged = !isEqual(valueState.CONCAT.data_tables, originState.dataTableInfo.dataTables);
+        const joinDataTablesChanged = !isEqual(valueState.JOIN.data_tables, originState.dataTableInfo.dataTables);
+        const joinTypeChanged = valueState.JOIN.how !== originState.joinType;
+        const queryDataTableIdChanged = valueState.QUERY.data_table_id !== originState.dataTableInfo.dataTableId;
+        const queryConditionsChanged = !isEqual(valueState.QUERY.conditions, originState.queryConditions);
+        const evalDataTableIdChanged = valueState.EVAL.data_table_id !== originState.dataTableInfo.dataTableId;
+        const evalChanged = !isEqual(valueState.EVAL.expressions.map((expression) => ({
+            ...expression,
             ...(expression?.condition ? { condition: expression?.condition } : {}),
-            ...(expression?.else ? { else: expression?.else } : {}),
         })).filter((expression) => !!expression.name && !!expression.expression), originState.expressions);
-        const addLabelsChanged = !isEqual(addLabelsState.labels, originState.labels);
-        if (state.operator === 'CONCAT') return dataTablesChanged;
-        if (state.operator === 'JOIN') return dataTablesChanged || joinTypeChanged;
-        if (state.operator === 'QUERY') return dataTableIdChanged || conditionsChanged;
-        if (state.operator === 'EVAL') return dataTableIdChanged || expressionsChanged;
+        const addLabelsChanged = !isEqual(valueState.ADD_LABELS.labels, originState.labels);
+        if (state.operator === 'CONCAT') return concatDataTablesChanged;
+        if (state.operator === 'JOIN') return joinDataTablesChanged || joinTypeChanged;
+        if (state.operator === 'QUERY') return queryDataTableIdChanged || queryConditionsChanged;
+        if (state.operator === 'EVAL') return evalDataTableIdChanged || evalChanged;
         if (state.operator === 'ADD_LABELS') return addLabelsChanged;
         return false;
     }),
     isUnsaved: computed(() => state.dataTableId.startsWith('UNSAVED-')),
     operator: computed(() => props.item.operator as DataTableOperator),
-    dataTableInfo: {
-        dataTables: [] as string[],
-        dataTableId: undefined,
-    } as TransformDataTableInfo,
     failStatus: false,
-    isLegacyDataTable: computed(() => {
-        if (state.operator === 'EVAL') return false;
-        const evalExpressions = (props.item.options as DataTableTransformOptions).EVAL?.expressions;
-        if (!evalExpressions?.length) return false;
-        const isLegacyEval = typeof evalExpressions[0] === 'string';
-        if (isLegacyEval) return true;
-        return false;
-    }),
     isUnavailable: computed<boolean>(() => props.item.state === 'UNAVAILABLE'),
 });
 
@@ -118,28 +112,13 @@ const modalState = reactive({
     mode: '' as DataTableAlertModalMode,
 });
 
-const joinState = reactive({
-    joinType: undefined as JoinType | undefined,
-});
-
-const queryState = reactive({
-    conditions: [{ key: getRandomId(), value: '' }] as QueryCondition[],
-});
-
-const evalState = reactive({
-    expressions: [{
-        key: getRandomId(), fieldType: DATA_TABLE_FIELD_TYPE.DATA, name: '', expression: '', isCollapsed: false,
-    }] as EvalExpressions[],
-});
-
 const valueState = reactive({
     PIVOT: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT,
-});
-
-const addLabelsState = reactive({
-    labels: [{
-        name: '', value: '',
-    }] as AdditionalLabel[],
+    CONCAT: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.CONCAT,
+    JOIN: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN,
+    EVAL: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL,
+    QUERY: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY,
+    ADD_LABELS: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS,
 });
 
 const originState = reactive({
@@ -148,15 +127,11 @@ const originState = reactive({
         dataTables: props.item.options[state.operator]?.data_tables ?? [] as string[],
         dataTableId: props.item.options[state.operator]?.data_table_id as string,
     })),
-    joinType: computed(() => (props.item.options as DataTableTransformOptions).JOIN?.how as JoinType),
-    conditions: computed(() => ((props.item.options as DataTableTransformOptions).QUERY?.conditions ?? []).map((condition) => ({
-        value: condition,
-    }))),
+    joinType: computed<JoinType|undefined>(() => (props.item.options as DataTableTransformOptions).JOIN?.how),
+    queryConditions: computed<QueryOptions['conditions']>(() => (props.item.options as DataTableTransformOptions).QUERY?.conditions ?? []),
+    // queryOperator: computed<QueryOptions['operator']|undefined>(() => (props.item.options as DataTableTransformOptions).QUERY?.operator),
     expressions: computed<EvaluateExpression[]|string[]>(() => (props.item.options as DataTableTransformOptions).EVAL?.expressions ?? []),
-    labels: computed<AdditionalLabel[]>(() => {
-        const _labels = (props.item.options as DataTableTransformOptions).ADD_LABELS?.labels ?? {};
-        return Object.entries(_labels).map(([name, value]) => ({ name, value }));
-    }),
+    labels: computed<AddLabelsOptions['labels']>(() => (props.item.options as DataTableTransformOptions).ADD_LABELS?.labels ?? {}),
     pivot: computed<PivotOptions|undefined>(() => {
         const _pivot = (props.item.options as DataTableTransformOptions).PIVOT as PivotOptions|undefined;
         if (!_pivot) return cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT);
@@ -175,11 +150,12 @@ const setFailStatus = (status: boolean) => {
     state.failStatus = status;
 };
 const updateDataTable = async (): Promise<DataTableModel|undefined> => {
-    const isValidDataTableId = valueState[state.operator].data_table_id && storeState.dataTables.some((dataTable) => dataTable.data_table_id === valueState[state.operator].data_table_id);
-    const isValidDataTables = state.dataTableInfo.dataTables.length === 2
-        && !state.dataTableInfo.dataTables.includes(undefined)
-        && storeState.dataTables.some((dataTable) => dataTable.data_table_id === state.dataTableInfo.dataTables[0])
-        && storeState.dataTables.some((dataTable) => dataTable.data_table_id === state.dataTableInfo.dataTables[1]);
+    const _targetDataTableId: string|undefined = valueState[state.operator].data_table_id;
+    const _targetDataTables: string[]|undefined = valueState[state.operator].data_tables;
+    const isValidDataTableId = _targetDataTableId && storeState.dataTables.some((dataTable) => dataTable.data_table_id === _targetDataTableId);
+    const isValidDataTables = _targetDataTables?.length === 2
+        && storeState.dataTables.some((dataTable) => dataTable.data_table_id === _targetDataTables[0])
+        && storeState.dataTables.some((dataTable) => dataTable.data_table_id === _targetDataTables[1]);
     if (!isValidDataTableId && !isValidDataTables) {
         showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_WARNING'), '');
         setFailStatus(true);
@@ -188,8 +164,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
 
     // Duplicated Data Field Handling in 'JOIN'
     if (state.operator === 'JOIN') {
-        const firstDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === state.dataTableInfo.dataTables[0]);
-        const secondDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === state.dataTableInfo.dataTables[1]);
+        const firstDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === valueState.JOIN.data_tables[0]);
+        const secondDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === valueState.JOIN.data_tables[1]);
         const firstDataFields = Object.keys(firstDataTable?.data_info ?? {});
         const secondDataFields = Object.keys(secondDataTable?.data_info ?? {});
         const duplicatedDataFields = intersection(firstDataFields, secondDataFields);
@@ -204,25 +180,14 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
         }
     }
     const firstUpdating = state.isUnsaved;
-    const concatOptions: ConcatOptions = {
-        data_tables: state.dataTableInfo.dataTables,
-    };
-    const joinOptions: JoinOptions = {
-        data_tables: state.dataTableInfo.dataTables,
-        how: joinState.joinType as JoinType,
-    };
-    const queryOptions: QueryOptions = {
-        data_table_id: state.dataTableInfo.dataTableId,
-        conditions: queryState.conditions.map((conditionInfo) => conditionInfo.value),
-    };
+    const concatOptions = cloneDeep(valueState.CONCAT);
+    const joinOptions = cloneDeep(valueState.JOIN);
+    const queryOptions = cloneDeep(valueState.QUERY);
     const evalOptions: EvalOptions = {
-        data_table_id: state.dataTableInfo.dataTableId,
-        expressions: evalState.expressions.map((expressionInfo) => ({
-            name: expressionInfo.name,
-            field_type: expressionInfo.fieldType,
-            expression: expressionInfo.expression,
+        data_table_id: valueState.EVAL.data_table_id,
+        expressions: valueState.EVAL.expressions.map((expressionInfo) => ({
+            ...expressionInfo,
             ...(expressionInfo.condition && { condition: expressionInfo.condition }) || {},
-            ...(expressionInfo.else && { else: expressionInfo.else }) || {},
         })).filter((expressionInfo) => !!expressionInfo.name && !!expressionInfo.expression),
     };
     const pivotOptions: PivotOptions = {
@@ -233,16 +198,7 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
         function: valueState.PIVOT.function,
         order_by: valueState.PIVOT.order_by,
     };
-    const _labels: AdditionalLabels = addLabelsState.labels.reduce((acc, label) => {
-        if (label.name && label.value) {
-            acc[label.name] = label.value;
-        }
-        return acc;
-    }, {});
-    const addLabelsOptions: AddLabelsOptions = {
-        data_table_id: state.dataTableInfo.dataTableId,
-        labels: _labels,
-    };
+    const addLabelsOptions = cloneDeep(valueState.ADD_LABELS);
     const options = () => {
         switch (state.operator) {
         case 'CONCAT':
@@ -335,19 +291,25 @@ const handleUpdateDataTable = async () => {
 
 /* Utils */
 const setInitialDataTableForm = () => {
-    // Initial Form Setting
-    state.dataTableInfo = originState.dataTableInfo;
-    joinState.joinType = originState.joinType;
-    queryState.conditions = originState.conditions.length ? originState.conditions.map((cond) => ({ ...cond, key: getRandomId() })) : [{ key: getRandomId(), value: '' }];
-    evalState.expressions = originState.expressions.length ? originState.expressions.map((expression) => ({
-        ...expression,
-        isCollapsed: false,
-        fieldType: expression.field_type,
-        key: getRandomId(),
-    })) : [{
-        key: getRandomId(), name: '', fieldType: DATA_TABLE_FIELD_TYPE.DATA, expression: '', isCollapsed: false,
-    }];
-    addLabelsState.labels = originState.labels.length ? cloneDeep(originState.labels) : [{ name: '', value: '' }];
+    // TODO: check reset
+    const _originDataTables = originState.dataTableInfo.dataTables.length ? cloneDeep(originState.dataTableInfo.dataTables) : [];
+    const _originDataTableId = originState.dataTableInfo.dataTableId;
+    // CONCAT
+    valueState.CONCAT = {
+        data_tables: _originDataTables,
+    };
+    // JOIN
+    valueState.JOIN.data_tables = _originDataTables;
+    valueState.JOIN.how = originState.joinType;
+    // QUERY
+    valueState.QUERY.data_table_id = _originDataTableId;
+    valueState.QUERY.conditions = originState.queryConditions.length ? cloneDeep(originState.queryConditions) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY.conditions);
+    // EVAL
+    valueState.EVAL.data_table_id = _originDataTableId;
+    valueState.EVAL.expressions = originState.expressions.length ? cloneDeep(originState.expressions) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL.expressions);
+    // ADD_LABELS
+    valueState.ADD_LABELS.labels = originState.labels.length ? cloneDeep(originState.labels) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS.labels);
+    // PIVOT
     valueState.PIVOT = originState.pivot ? cloneDeep(originState.pivot) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT);
 };
 
@@ -380,26 +342,39 @@ defineExpose({
                                                       :data-type="DATA_TABLE_TYPE.TRANSFORMED"
                                                       :selected="props.selected"
                                                       :data-table-name.sync="state.dataTableName"
-                                                      :is-legacy-data-table="state.isLegacyDataTable"
             />
         </div>
         <widget-form-data-table-card-transform-pivot-form v-if="state.operator === DATA_TABLE_OPERATOR.PIVOT"
                                                           :base-data-table-id="state.dataTableId"
                                                           :operator-options.sync="valueState.PIVOT"
-                                                          :origin-data="props.item.options[state.operator] ?? cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT)"
+                                                          :origin-data="props.item.options[state.operator]"
         />
-        <widget-form-data-table-card-transform-form v-else
-                                                    :data-table-id="state.dataTableId"
-                                                    :operator="state.operator"
-                                                    :data-table-info.sync="state.dataTableInfo"
-                                                    :join-type.sync="joinState.joinType"
-                                                    :conditions.sync="queryState.conditions"
-                                                    :expressions.sync="evalState.expressions"
-                                                    :labels.sync="addLabelsState.labels"
-                                                    :is-legacy-data-table="state.isLegacyDataTable"
+        <widget-form-data-table-card-transform-concatenate v-if="state.operator === DATA_TABLE_OPERATOR.CONCAT"
+                                                           :base-data-table-id="state.dataTableId"
+                                                           :operator-options.sync="valueState.CONCAT"
+                                                           :origin-data="props.item.options[state.operator]"
+        />
+        <widget-form-data-table-card-transform-join v-else-if="state.operator === DATA_TABLE_OPERATOR.JOIN"
+                                                    :base-data-table-id="state.dataTableId"
+                                                    :operator-options.sync="valueState.JOIN"
+                                                    :origin-data="props.item.options[state.operator]"
+        />
+        <widget-form-data-table-card-transform-evaluate v-else-if="state.operator === DATA_TABLE_OPERATOR.EVAL"
+                                                        :base-data-table-id="state.dataTableId"
+                                                        :operator-options.sync="valueState.EVAL"
+                                                        :origin-data="props.item.options[state.operator]"
+        />
+        <widget-form-data-table-card-transform-query v-else-if="state.operator === DATA_TABLE_OPERATOR.QUERY"
+                                                     :base-data-table-id="state.dataTableId"
+                                                     :operator-options.sync="valueState.QUERY"
+                                                     :origin-data="props.item.options[state.operator]"
+        />
+        <widget-form-data-table-card-transform-add-labels v-if="state.operator === DATA_TABLE_OPERATOR.ADD_LABELS"
+                                                          :base-data-table-id="state.dataTableId"
+                                                          :operator-options.sync="valueState.ADD_LABELS"
+                                                          :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-footer :disabled="state.applyDisabled"
-                                            :is-legacy-data-table="state.isLegacyDataTable"
                                             :changed="state.optionsChanged"
                                             :loading="state.loading"
                                             @delete="handleClickDeleteDataTable"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
similarity index 69%
rename from apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue
rename to apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
index a5779b08d2..6f9c2a4e00 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
+
+import { cloneDeep } from 'lodash';
 
 import {
     PIconButton, PI, PFieldGroup, PSelectButton, PTextInput, PButton, PTextarea, PButtonModal, PToggleButton, PLink, PFieldTitle,
@@ -10,29 +14,32 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import getRandomId from '@/lib/random-id-generator';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
 import WidgetFormDataTableGlobalVariableViewButton
     from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
-import { DATA_TABLE_FIELD_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
-import type { EvalExpressions } from '@/common/modules/widgets/types/widget-data-table-type';
+import { DATA_TABLE_FIELD_TYPE, DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
+import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { EvalOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 
-interface Props {
-    expressions: (EvalExpressions[]|string[]);
-    isLegacyDataTable?: boolean;
-}
+const props = defineProps<TransformDataTableProps<EvalOptions>>();
+const emit = defineEmits<{(e: 'update:operator-options', value: EvalOptions): void; }>();
+
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTableId: props.originData?.data_table_id,
+});
+const expressionsInfo = ref<EvalOptions['expressions']>(cloneDeep(props.originData.expressions) || []);
 
 const CONDITION_PLACEHOLDER = '{{ Product }} == \'A\' & {{ Provider }} == \'B\'';
 const FORMULA_PLACEHOLDER = '{{ Product }}';
-const props = defineProps<Props>();
-
-const emit = defineEmits<{ e: 'update:expressions'; value: EvalExpressions[]}>();
 
 const state = reactive({
-    proxyExpressions: useProxyValue<EvalExpressions[]>('expressions', props, emit),
+    proxyOperatorOptions: useProxyValue<EvalOptions>('operator-options', props, emit),
+    collapsedIndexList: [] as number[],
     fieldTypeMenuItems: computed<MenuItem[]>(() => [
         {
             name: DATA_TABLE_FIELD_TYPE.LABEL,
@@ -48,48 +55,42 @@ const state = reactive({
 
 const modalState = reactive({
     visible: false,
-    currentSelectionKey: undefined as string|undefined,
     currentSelectionName: undefined as string|undefined,
 });
 
 /* Events */
-const handleToggleExpressionCard = (key: string) => {
-    state.proxyExpressions = state.proxyExpressions.map((expression) => {
-        if (expression.key === key) {
-            return {
-                ...expression,
-                isCollapsed: !expression.isCollapsed,
-            };
-        }
-        return expression;
-    });
+const handleToggleExpressionCard = (idx: number) => {
+    if (state.collapsedIndexList.includes(idx)) {
+        state.collapsedIndexList = state.collapsedIndexList.filter((d) => d !== idx);
+    } else {
+        state.collapsedIndexList.push(idx);
+    }
 };
-const handleClickDeleteExpression = (key: string) => {
-    const targetExpression = state.proxyExpressions.find((d) => d.key === key);
+const handleClickDeleteExpression = (idx: number) => {
+    const targetExpression = expressionsInfo.value[idx];
     if (!targetExpression?.name && !targetExpression?.expression) {
-        state.proxyExpressions = state.proxyExpressions.filter((expression) => expression.key !== key);
+        expressionsInfo.value = expressionsInfo.value.filter((d, i) => i !== idx);
         return;
     }
     modalState.visible = true;
-    modalState.currentSelectionKey = key;
     modalState.currentSelectionName = targetExpression?.name;
 };
 const handleConfirmDeleteExpression = () => {
-    if (!modalState.currentSelectionKey) return;
-    state.proxyExpressions = state.proxyExpressions.filter((expression) => expression.key !== modalState.currentSelectionKey);
+    if (!modalState.currentSelectionName) return;
+    expressionsInfo.value = expressionsInfo.value.filter((expression) => expression.name !== modalState.currentSelectionName);
     showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.DELETE_SUCCESS_TOOLTIP', { field_name: modalState.currentSelectionName }), '');
     modalState.visible = false;
-    modalState.currentSelectionKey = undefined;
     modalState.currentSelectionName = undefined;
 };
 const handleCancelModal = () => {
     modalState.visible = false;
-    modalState.currentSelectionKey = undefined;
     modalState.currentSelectionName = undefined;
 };
-const handleChangeFieldValue = (key: string, fieldName: string, value) => {
-    state.proxyExpressions = state.proxyExpressions.map((expression) => {
-        if (expression.key === key) {
+const handleChangeFieldValue = (idx: number, fieldName: string, value: string) => {
+    const targetExpression = expressionsInfo.value[idx];
+    if (!targetExpression) return;
+    expressionsInfo.value = expressionsInfo.value.map((expression, i) => {
+        if (i === idx) {
             return {
                 ...expression,
                 [fieldName]: value,
@@ -98,41 +99,47 @@ const handleChangeFieldValue = (key: string, fieldName: string, value) => {
         return expression;
     });
 };
-const handleClickAddLabel = () => {
-    state.proxyExpressions = [
-        ...state.proxyExpressions,
+const handleClickAddField = () => {
+    expressionsInfo.value = [
+        ...expressionsInfo.value,
         {
-            key: getRandomId(),
-            fieldType: DATA_TABLE_FIELD_TYPE.DATA,
+            field_type: DATA_TABLE_FIELD_TYPE.DATA,
             name: '',
             expression: '',
-            isCollapsed: false,
         },
     ];
 };
-const handleToggleCondition = (key: string) => {
-    const targetExpression = state.proxyExpressions.find((d) => d.key === key);
-    if (!targetExpression) return;
+const handleToggleCondition = (idx: number) => {
+    const targetExpression = expressionsInfo.value[idx];
     if ('condition' in targetExpression) {
         delete targetExpression.condition;
-        delete targetExpression.else;
     } else {
         targetExpression.condition = '';
-        targetExpression.else = '';
     }
-    state.proxyExpressions = [...state.proxyExpressions];
+    expressionsInfo.value = [...expressionsInfo.value];
 };
+
+/* Watcher */
+watch([dataTableInfo, expressionsInfo], ([_dataTableInfo, _expressionsInfo]) => {
+    state.proxyOperatorOptions = {
+        data_table_id: _dataTableInfo.dataTableId,
+        expressions: _expressionsInfo,
+    };
+}, { deep: true, immediate: true });
 </script>
 
 <template>
-    <div class="widget-form-data-table-card-transform-form-evaluate">
-        <template v-if="!props.isLegacyDataTable">
-            <div v-for="(expression) in state.proxyExpressions"
-                 :key="expression.key"
-                 :class="{'expression-form-card': true, collapsed: expression.isCollapsed}"
+    <div class="widget-form-data-table-card-transform-evaluate">
+        <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                            :operator="DATA_TABLE_OPERATOR.EVAL"
+                                                            :data-table-info.sync="dataTableInfo"
+        >
+            <div v-for="(expression, eIdx) in expressionsInfo"
+                 :key="`expression-${eIdx}`"
+                 :class="{'expression-form-card': true, collapsed: state.collapsedIndexList.includes(eIdx)}"
             >
                 <div class="form-header"
-                     @click="handleToggleExpressionCard(expression.key)"
+                     @click="handleToggleExpressionCard(eIdx)"
                 >
                     <div class="title">
                         <p-i name="ic_chevron-down"
@@ -151,8 +158,8 @@ const handleToggleCondition = (key: string) => {
                     </div>
                     <p-icon-button name="ic_delete"
                                    size="sm"
-                                   :disabled="state.proxyExpressions.length === 1"
-                                   @click.stop="handleClickDeleteExpression(expression.key)"
+                                   :disabled="expressionsInfo.length === 1"
+                                   @click.stop="handleClickDeleteExpression(eIdx)"
                     />
                 </div>
                 <div class="form-body">
@@ -165,8 +172,8 @@ const handleToggleCondition = (key: string) => {
                                              :key="`select-button-${selectItem.name}`"
                                              :value="selectItem.name"
                                              style-type="secondary"
-                                             :selected="expression.fieldType"
-                                             @change="handleChangeFieldValue(expression.key, 'fieldType', $event)"
+                                             :selected="expression.field_type"
+                                             @change="handleChangeFieldValue(eIdx, 'field_type', $event)"
                             >
                                 {{ selectItem.label }}
                             </p-select-button>
@@ -204,7 +211,7 @@ const handleToggleCondition = (key: string) => {
                                 <template #right>
                                     <p-toggle-button :value="'condition' in expression"
                                                      class="condition-toggle-button"
-                                                     @change-toggle="handleToggleCondition(expression.key)"
+                                                     @change-toggle="handleToggleCondition(eIdx)"
                                     />
                                 </template>
                             </p-field-title>
@@ -227,7 +234,7 @@ const handleToggleCondition = (key: string) => {
                                 </template>
                                 <p-textarea :value.sync="expression.condition"
                                             :placeholder="CONDITION_PLACEHOLDER"
-                                            @update:value="handleChangeFieldValue(expression.key, 'condition', $event)"
+                                            @update:value="handleChangeFieldValue(eIdx, 'condition', $event)"
                                 />
                             </p-field-group>
                             <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.FORMULA')"
@@ -248,61 +255,18 @@ const handleToggleCondition = (key: string) => {
                                             :placeholder="FORMULA_PLACEHOLDER"
                                 />
                             </p-field-group>
-                            <p-field-group v-if="'condition' in expression"
-                                           :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.ELSE')"
-                                           style-type="secondary"
-                                           required
-                                           class="expression-form"
-                            >
-                                <template #label-extra>
-                                    <p-link href="https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.eval.html"
-                                            :action-icon="ACTION_ICON.EXTERNAL_LINK"
-                                            highlight
-                                            class="external-link"
-                                    >
-                                        Pandas Eval
-                                    </p-link>
-                                </template>
-                                <p-textarea :value="expression.else"
-                                            placeholder="'-'"
-                                            @update:value="handleChangeFieldValue(expression.key, 'else', $event)"
-                                />
-                            </p-field-group>
                         </div>
                     </div>
                 </div>
             </div>
-        </template>
-        <p-field-group v-else
-                       :label="'Expression'"
-                       required
-        >
-            <div class="legacy-expression-wrapper">
-                <div v-for="(expression) in props.expressions"
-                     :key="expression"
-                     class="expressions-wrapper"
-                >
-                    <p-text-input class="label-input"
-                                  block
-                                  :value="expression"
-                                  disabled
-                    />
-                    <p-icon-button name="ic_delete"
-                                   size="sm"
-                                   disabled
-                    />
-                </div>
-            </div>
-        </p-field-group>
-
-        <p-button v-if="!props.isLegacyDataTable"
-                  class="add-field-button"
-                  style-type="tertiary"
-                  icon-left="ic_plus_bold"
-                  @click="handleClickAddLabel"
-        >
-            {{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.ADD_FIELD') }}
-        </p-button>
+            <p-button class="add-field-button"
+                      style-type="tertiary"
+                      icon-left="ic_plus_bold"
+                      @click="handleClickAddField"
+            >
+                {{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.ADD_FIELD') }}
+            </p-button>
+        </widget-form-data-table-card-transform-form-wrapper>
         <p-button-modal :header-title="$t('COMMON.WIDGETS.DATA_TABLE.FORM.EVAL.DELETE_MODAL_TITLE', { field_name: modalState.currentSelectionName })"
                         :visible.sync="modalState.visible"
                         size="sm"
@@ -320,11 +284,11 @@ const handleToggleCondition = (key: string) => {
 </template>
 
 <style scoped lang="postcss">
-.widget-form-data-table-card-transform-form-evaluate {
-    @apply flex flex-col gap-2;
+.widget-form-data-table-card-transform-evaluate {
     .expression-form-card {
         @apply border border-gray-200 rounded-lg;
         padding: 0.625rem 0.5rem;
+        margin-bottom: 0.5rem;
 
         .form-header {
             @apply w-full flex items-center justify-between cursor-pointer;
@@ -400,15 +364,6 @@ const handleToggleCondition = (key: string) => {
         margin-top: 0.5rem;
         width: 6.8125rem;
     }
-    .legacy-expression-wrapper {
-        @apply bg-gray-100 rounded-lg;
-        padding: 0.5rem;
-        margin-top: 0.25rem;
-        .expressions-wrapper {
-            @apply flex gap-1 items-center;
-            margin-bottom: 0.5rem;
-        }
-    }
 }
 
 /* custom design-system component - p-field-group */
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue
deleted file mode 100644
index 1191a0c8e8..0000000000
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue
+++ /dev/null
@@ -1,335 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive } from 'vue';
-
-import {
-    PI, PFieldGroup, PSelectDropdown, PTextInput, PButton, PIconButton, PFieldTitle, PLink,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
-import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
-
-import getRandomId from '@/lib/random-id-generator';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-import WidgetFormDataTableCardTransformDataTableDropdown
-    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue';
-import WidgetFormDataTableCardTransformFormAddLabels
-    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormAddLabels.vue';
-import WidgetFormDataTableCardTransformFormEvaluate
-    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue';
-import WidgetFormDataTableGlobalVariableViewButton
-    from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
-import { DATA_TABLE_OPERATOR, JOIN_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
-import type {
-    QueryCondition, TransformDataTableInfo, EvalExpressions, AdditionalLabel,
-} from '@/common/modules/widgets/types/widget-data-table-type';
-import type {
-    DataTableOperator, JoinType,
-} from '@/common/modules/widgets/types/widget-model';
-
-import { yellow } from '@/styles/colors';
-
-
-
-const CONDITION_PLACEHOLDER = '{{ Product }} == \'A\'';
-interface Props {
-    dataTableId: string;
-    operator: DataTableOperator;
-    dataTableInfo: TransformDataTableInfo;
-    joinType: JoinType|undefined; // Join
-    conditions: QueryCondition[]; // Query
-    expressions: EvalExpressions[]; // Eval
-    labels: AdditionalLabel[]; // Add Labels
-    isLegacyDataTable?: boolean;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{(e: 'update:data-table-info', value: TransformDataTableInfo): void;
-    (e: 'update:join-type', value: JoinType): void;
-    (e: 'update:conditions', value: QueryCondition[]): void;
-    (e: 'update:expressions', value: EvalExpressions[]): void;
-}>();
-
-const state = reactive({
-    operatorMap: computed(() => {
-        if (props.operator === 'CONCAT') return { name: 'Concatenate', icon: 'ic_db-concat' };
-        if (props.operator === 'JOIN') return { name: 'Join', icon: 'ic_join' };
-        if (props.operator === 'QUERY') return { name: 'Query', icon: 'ic_db-where' };
-        if (props.operator === 'EVAL') return { name: 'Evaluate', icon: 'ic_db-evaluation' };
-        if (props.operator === 'ADD_LABELS') return { name: 'Add Labels', icon: '' }; // TODO: Add icon
-        return { name: '', icon: '' };
-    }),
-    proxyDataTableInfo: useProxyValue('dataTableInfo', props, emit),
-});
-
-const joinState = reactive({
-    proxyJoinType: useProxyValue('joinType', props, emit),
-    joinTypeItems: computed<SelectDropdownMenuItem[]>(() => [
-        { label: 'Left Join', name: JOIN_TYPE.LEFT, icon: 'ic_join-left' },
-        { label: 'Right Join', name: JOIN_TYPE.RIGHT, icon: 'ic_join-right' },
-        { label: 'Outer Join', name: JOIN_TYPE.OUTER, icon: 'ic_join-outer' },
-        { label: 'Inner Join', name: JOIN_TYPE.INNER, icon: 'ic_join-inner' },
-    ]),
-});
-
-const queryState = reactive({
-    proxyConditions: useProxyValue('conditions', props, emit),
-});
-
-const evalState = reactive({
-    proxyExpressions: useProxyValue('expressions', props, emit),
-});
-
-const addLabelsState = reactive({
-    proxyLabels: useProxyValue('labels', props, emit),
-});
-
-/* Events */
-const handleChangeCondition = (key: string, value: string) => {
-    const index = queryState.proxyConditions.findIndex((condition) => condition.key === key);
-    if (index !== -1) {
-        queryState.proxyConditions[index].value = value;
-    }
-};
-const handleRemoveCondition = (key: string) => {
-    const index = queryState.proxyConditions.findIndex((condition) => condition.key === key);
-    if (index !== -1) {
-        queryState.proxyConditions.splice(index, 1);
-    }
-};
-const handleClickAddCondition = () => {
-    queryState.proxyConditions = [...queryState.proxyConditions, { key: getRandomId(), value: '' }];
-};
-
-// const handleClickAddFunction = () => {
-//     const newFunction = {
-//         key: getRandomId(),
-//         value: '',
-//     };
-//     evalState.proxyFunctions = [...evalState.proxyFunctions, newFunction];
-// };
-//
-// const handleChangeFunction = (key: string, value: string) => {
-//     const targetIndex = evalState.proxyFunctions.findIndex((functionInfo) => functionInfo.key === key);
-//     if (targetIndex !== -1) {
-//         evalState.proxyFunctions[targetIndex].value = value;
-//     }
-// };
-//
-// const handleRemoveFunction = (key: string) => {
-//     const targetIndex = evalState.proxyFunctions.findIndex((functionInfo) => functionInfo.key === key);
-//     if (targetIndex !== -1) {
-//         evalState.proxyFunctions.splice(targetIndex, 1);
-//     }
-// };
-
-
-</script>
-
-<template>
-    <div class="widget-form-data-table-card-transform-form">
-        <div class="data-table-select-form">
-            <div class="operator">
-                <p-i :name="state.operatorMap.icon"
-                     width="1rem"
-                     height="1rem"
-                />
-                <span>{{ state.operatorMap.name }}</span>
-            </div>
-            <div v-if="props.isLegacyDataTable"
-                 class="legacy-data-table-warning"
-            >
-                <div class="warning-title">
-                    <p-i name="ic_warning-filled"
-                         width="1.25rem"
-                         height="1.25rem"
-                         :color="yellow[500]"
-                    />
-                    <span>
-                        <i18n path="COMMON.WIDGETS.DATA_TABLE.FORM.LEGACY_WARNING_TITLE">
-                            <template #operator>{{ state.operatorMap.name }}</template>
-                        </i18n>
-                    </span>
-                </div>
-                <p class="warning-description">
-                    <i18n path="COMMON.WIDGETS.DATA_TABLE.FORM.LEGACY_WARNING_DESC">
-                        <template #operator>
-                            {{ state.operatorMap.name }}
-                        </template>
-                    </i18n>
-                </p>
-            </div>
-            <!-- Default Dropdown -->
-            <div class="data-table-dropdown-wrapper">
-                <widget-form-data-table-card-transform-data-table-dropdown :data-table-id="props.dataTableId"
-                                                                           :operator="props.operator"
-                                                                           :data-table-info.sync="state.proxyDataTableInfo"
-                                                                           :is-legacy-data-table="props.isLegacyDataTable"
-                />
-            </div>
-            <!-- Join -->
-            <p-field-group v-if="props.operator === DATA_TABLE_OPERATOR.JOIN"
-                           :label="'How'"
-                           required
-            >
-                <p-select-dropdown class="join-type-dropdown"
-                                   :menu="joinState.joinTypeItems"
-                                   :selected.sync="joinState.proxyJoinType"
-                                   block
-                >
-                    <template v-if="joinState.proxyJoinType"
-                              #dropdown-left-area
-                    >
-                        <p-i class="selected-join-type-icon"
-                             :name="joinState.joinTypeItems.find((item) => item.name === joinState.proxyJoinType)?.icon"
-                             width="1rem"
-                             height="1rem"
-                        />
-                    </template>
-                </p-select-dropdown>
-            </p-field-group>
-            <!-- Query -->
-            <div v-if="props.operator === DATA_TABLE_OPERATOR.QUERY"
-                 class="query-wrapper"
-            >
-                <div class="query-type-conditions-title-wrapper">
-                    <p-field-title class="field-title"
-                                   size="md"
-                                   color="dark"
-                    >
-                        <div class="field-title-wrapper">
-                            <span>{{ $t('Condition') }}</span>
-                            <div class="left-area">
-                                <widget-form-data-table-global-variable-view-button />
-                            </div>
-                        </div>
-                    </p-field-title>
-                </div>
-                <div class="query-type-conditions-wrapper">
-                    <div v-for="(conditionInfo, idx) in queryState.proxyConditions"
-                         :key="conditionInfo.key"
-                         class="conditions-wrapper"
-                    >
-                        <p-text-input class="label-input"
-                                      block
-                                      :value="conditionInfo.value"
-                                      :placeholder="CONDITION_PLACEHOLDER"
-                                      @update:value="handleChangeCondition(conditionInfo.key, $event,)"
-                        />
-                        <p-icon-button name="ic_delete"
-                                       size="sm"
-                                       :disabled="idx === 0 && queryState.proxyConditions.length === 1"
-                                       @click="handleRemoveCondition(conditionInfo.key)"
-                        />
-                    </div>
-                    <div class="add-condition-wrapper">
-                        <p-button style-type="tertiary"
-                                  icon-left="ic_plus_bold"
-                                  @click="handleClickAddCondition"
-                        >
-                            Add Condition
-                        </p-button>
-                        <p-link href="https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.query.html"
-                                :action-icon="ACTION_ICON.EXTERNAL_LINK"
-                                highlight
-                                size="sm"
-                                class="external-link"
-                        >
-                            Pandas Query
-                        </p-link>
-                    </div>
-                </div>
-            </div>
-            <!-- Eval -->
-            <widget-form-data-table-card-transform-form-evaluate v-if="props.operator === DATA_TABLE_OPERATOR.EVAL"
-                                                                 :expressions.sync="evalState.proxyExpressions"
-                                                                 :is-legacy-data-table="props.isLegacyDataTable"
-            />
-            <!-- Add Label -->
-            <widget-form-data-table-card-transform-form-add-labels v-if="props.operator === DATA_TABLE_OPERATOR.ADD_LABELS"
-                                                                   :labels.sync="addLabelsState.proxyLabels"
-            />
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.widget-form-data-table-card-transform-form {
-    padding: 0.75rem 1rem;
-
-    .data-table-select-form {
-        .operator {
-            @apply inline-flex items-center gap-1 rounded-md border border-gray-150 bg-gray-100 text-label-sm font-bold text-gray-700;
-            padding: 0.25rem 0.5rem;
-            margin-bottom: 0.5rem;
-        }
-        .query-wrapper {
-            .query-type-conditions-title-wrapper {
-                /* custom design-system component - p-field-title */
-                :deep(.p-field-title) {
-                    .title {
-                        @apply flex;
-                        width: 100%;
-                    }
-                }
-                .field-title {
-                    @apply w-full;
-                    .field-title-wrapper {
-                        @apply flex w-full items-center;
-                        .left-area {
-                            @apply flex flex-1 items-center justify-end;
-                            width: 100%;
-                        }
-                    }
-                }
-            }
-            .query-type-conditions-wrapper {
-                @apply bg-gray-100 rounded-lg;
-                padding: 0.5rem;
-                margin-top: 0.25rem;
-                .conditions-wrapper {
-                    @apply flex gap-1 items-center;
-                    margin-bottom: 0.5rem;
-                }
-                .add-condition-wrapper {
-                    @apply flex;
-                    align-items: center;
-                    justify-content: space-between;
-                }
-            }
-        }
-    }
-    .data-table-dropdown-wrapper {
-        margin-bottom: 1rem;
-    }
-    .join-type-dropdown {
-        .selected-join-type-icon {
-            min-width: 1rem;
-        }
-    }
-
-    .eval-type-functions-wrapper {
-        @apply bg-gray-100 rounded-lg;
-        padding: 0.5rem;
-        margin-top: 0.25rem;
-        .functions-wrapper {
-            @apply flex gap-1 items-center;
-            margin-bottom: 0.5rem;
-        }
-    }
-
-    .legacy-data-table-warning {
-        @apply w-full bg-yellow-100 rounded;
-        padding: 0.5rem 1rem;
-        margin-bottom: 0.5rem;
-        .warning-title {
-            @apply flex items-center gap-1 text-label-lg font-bold text-yellow-700;
-            margin-bottom: 0.25rem;
-        }
-        .warning-description {
-            @apply text-paragraph-md text-gray-900;
-            padding-left: 1.5rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
new file mode 100644
index 0000000000..db9aba07f8
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
+
+import { PFieldGroup, PI, PSelectDropdown } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
+
+import { useProxyValue } from '@/common/composables/proxy-state';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import {
+    type DATA_TABLE_OPERATOR, JOIN_TYPE,
+} from '@/common/modules/widgets/_constants/data-table-constant';
+import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { JoinOptions, JoinType } from '@/common/modules/widgets/types/widget-model';
+
+
+
+const props = defineProps<TransformDataTableProps<JoinOptions>>();
+const emit = defineEmits<{(e: 'update:operator-options', value: JoinOptions): void; }>();
+
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTables: props.originData?.data_tables,
+});
+const howInfo = ref<JoinOptions['how']>(props.originData.how);
+const state = reactive({
+    proxyOperatorOptions: useProxyValue<JoinOptions>('operator-options', props, emit),
+    joinTypeItems: computed<SelectDropdownMenuItem[]>(() => [
+        { label: 'Left Join', name: JOIN_TYPE.LEFT, icon: 'ic_join-left' },
+        { label: 'Right Join', name: JOIN_TYPE.RIGHT, icon: 'ic_join-right' },
+        { label: 'Outer Join', name: JOIN_TYPE.OUTER, icon: 'ic_join-outer' },
+        { label: 'Inner Join', name: JOIN_TYPE.INNER, icon: 'ic_join-inner' },
+    ]),
+});
+
+/* Event */
+const handleUpdateHow = (val: JoinType) => {
+    howInfo.value = val;
+};
+
+/* Watcher */
+watch([dataTableInfo, howInfo], ([_dataTableInfo, _howInfo]) => {
+    state.proxyOperatorOptions = {
+        data_tables: _dataTableInfo.dataTables || [],
+        how: _howInfo,
+    };
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div class="widget-form-data-table-card-transform-concatenate">
+        <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                            :operator="DATA_TABLE_OPERATOR.CONCAT"
+                                                            :data-table-info.sync="dataTableInfo"
+        >
+            <p-field-group :label="'How'"
+                           required
+            >
+                <p-select-dropdown class="join-type-dropdown"
+                                   :menu="state.joinTypeItems"
+                                   :selected="howInfo"
+                                   block
+                                   @update:selected="handleUpdateHow"
+                >
+                    <template v-if="howInfo"
+                              #dropdown-left-area
+                    >
+                        <p-i class="selected-join-type-icon"
+                             :name="state.joinTypeItems.find((item) => item.name === howInfo)?.icon"
+                             width="1rem"
+                             height="1rem"
+                        />
+                    </template>
+                </p-select-dropdown>
+            </p-field-group>
+        </widget-form-data-table-card-transform-form-wrapper>
+    </div>
+</template>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue
new file mode 100644
index 0000000000..fcc8bb94fa
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import {
+    reactive, ref, watch,
+} from 'vue';
+
+import { cloneDeep } from 'lodash';
+
+import {
+    PButton, PIconButton, PTextInput, PFieldTitle, PLink,
+} from '@cloudforet/mirinae';
+import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
+
+import { useProxyValue } from '@/common/composables/proxy-state';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import WidgetFormDataTableGlobalVariableViewButton
+    from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
+import {
+    type DATA_TABLE_OPERATOR,
+} from '@/common/modules/widgets/_constants/data-table-constant';
+import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { QueryOptions } from '@/common/modules/widgets/types/widget-model';
+
+
+
+const CONDITION_PLACEHOLDER = '{{ Product }} == \'A\'';
+const RANDOM_KEY = Math.random();
+
+const props = defineProps<TransformDataTableProps<QueryOptions>>();
+const emit = defineEmits<{(e: 'update:operator-options', value: QueryOptions): void; }>();
+
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTableId: props.originData?.data_table_id,
+});
+const conditionsInfo = ref<QueryOptions['conditions']>(cloneDeep(props.originData.conditions));
+// HACK: remove comments after backend development
+// const operatorInfo = ref<QueryOptions['operator']>(props.originData.operator);
+const state = reactive({
+    proxyOperatorOptions: useProxyValue<QueryOptions>('operator-options', props, emit),
+    // queryOperatorItems: computed<SelectDropdownMenuItem[]>(() => [
+    //     { label: 'And', name: 'AND' },
+    //     { label: 'Or', name: 'OR' },
+    // ]),
+});
+
+/* Event */
+// const handleUpdateOperator = (val: QueryOptions['operator']) => {
+//     operatorInfo.value = val;
+// };
+const handleChangeCondition = (idx: number, value: string) => {
+    conditionsInfo.value[idx] = value;
+    conditionsInfo.value = [...conditionsInfo.value];
+};
+const handleRemoveCondition = (idx: number) => {
+    conditionsInfo.value.splice(idx, 1);
+    conditionsInfo.value = [...conditionsInfo.value];
+};
+const handleClickAddCondition = () => {
+    conditionsInfo.value = [...conditionsInfo.value, ''];
+};
+
+/* Watcher */
+watch([dataTableInfo, conditionsInfo], ([_dataTableInfo, _conditionsInfo]) => {
+    state.proxyOperatorOptions = {
+        data_table_id: _dataTableInfo.dataTableId,
+        conditions: _conditionsInfo,
+    };
+}, { deep: true, immediate: true });
+</script>
+
+<template>
+    <div class="widget-form-data-table-card-transform-query">
+        <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                            :operator="DATA_TABLE_OPERATOR.QUERY"
+                                                            :data-table-info.sync="dataTableInfo"
+        >
+            <div class="title-wrapper">
+                <p-field-title class="field-title"
+                               size="md"
+                               color="dark"
+                >
+                    <div class="field-title-wrapper">
+                        <span>{{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.CONDITION') }}</span>
+                        <div class="left-area">
+                            <widget-form-data-table-global-variable-view-button />
+                        </div>
+                    </div>
+                </p-field-title>
+            </div>
+            <div class="query-type-conditions-wrapper">
+                <!--                <p-select-dropdown class="query-operator-dropdown"-->
+                <!--                                   size="sm"-->
+                <!--                                   :menu="state.queryOperatorItems"-->
+                <!--                                   :selected="operatorInfo"-->
+                <!--                                   @update:selected="handleUpdateOperator"-->
+                <!--                />-->
+                <div v-for="(condition, cIdx) in conditionsInfo"
+                     :key="`condition-${RANDOM_KEY}-${cIdx}`"
+                     class="conditions-wrapper"
+                >
+                    <p-text-input class="label-input"
+                                  block
+                                  :value="condition"
+                                  :placeholder="CONDITION_PLACEHOLDER"
+                                  @update:value="handleChangeCondition(cIdx, $event)"
+                    />
+                    <p-icon-button name="ic_delete"
+                                   size="sm"
+                                   :disabled="conditionsInfo.length === 1"
+                                   @click="handleRemoveCondition(cIdx)"
+                    />
+                </div>
+                <div class="add-condition-wrapper">
+                    <p-button style-type="tertiary"
+                              icon-left="ic_plus_bold"
+                              @click="handleClickAddCondition"
+                    >
+                        {{ $t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_CONDITION') }}
+                    </p-button>
+                    <p-link href="https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.query.html"
+                            :action-icon="ACTION_ICON.EXTERNAL_LINK"
+                            highlight
+                            size="sm"
+                            class="external-link"
+                    >
+                        Pandas Query
+                    </p-link>
+                </div>
+            </div>
+        </widget-form-data-table-card-transform-form-wrapper>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.widget-form-data-table-card-transform-query {
+    /* custom design-system component - p-field-title */
+    :deep(.p-field-title) {
+        .title {
+            @apply flex;
+            width: 100%;
+        }
+    }
+    .field-title {
+        @apply w-full;
+        .field-title-wrapper {
+            @apply flex w-full items-center;
+            .left-area {
+                @apply flex flex-1 items-center justify-end;
+                width: 100%;
+            }
+        }
+    }
+    .query-type-conditions-wrapper {
+        @apply bg-gray-100 rounded-lg;
+        padding: 0.5rem;
+        margin-top: 0.25rem;
+        .query-operator-dropdown {
+            margin-bottom: 0.5rem;
+        }
+        .conditions-wrapper {
+            @apply flex gap-1 items-center;
+            margin-bottom: 0.5rem;
+        }
+        .add-condition-wrapper {
+            @apply flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts b/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
index e05c06c98c..97d026e0d3 100644
--- a/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
+++ b/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
@@ -1,5 +1,7 @@
-
-import type { PivotOptions } from '@/common/modules/widgets/types/widget-model';
+import type {
+    AddLabelsOptions,
+    ConcatOptions, EvalOptions, JoinOptions, PivotOptions, QueryOptions,
+} from '@/common/modules/widgets/types/widget-model';
 
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 
@@ -87,4 +89,30 @@ export const DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP = {
             desc: false,
         },
     } as PivotOptions,
+    CONCAT: {
+        data_tables: [],
+    } as ConcatOptions,
+    JOIN: {
+        data_tables: [],
+        how: undefined,
+    } as JoinOptions,
+    EVAL: {
+        data_table_id: undefined,
+        expressions: [
+            {
+                name: '',
+                field_type: DATA_TABLE_FIELD_TYPE.DATA,
+                expression: '',
+            },
+        ],
+    } as EvalOptions,
+    QUERY: {
+        data_table_id: undefined,
+        conditions: [''],
+        // operator: 'AND',
+    } as QueryOptions,
+    ADD_LABELS: {
+        data_table_id: undefined,
+        labels: { '': '' },
+    } as AddLabelsOptions,
 };
diff --git a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
index bb130d5db0..b6f7d498ad 100644
--- a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
+++ b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
@@ -1,5 +1,6 @@
 import { computed, reactive } from 'vue';
 
+import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -24,7 +25,10 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import getRandomId from '@/lib/random-id-generator';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
+import {
+    DATA_TABLE_TYPE,
+    DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
+} from '@/common/modules/widgets/_constants/data-table-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 import { getDuplicatedDataTableName } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
@@ -211,26 +215,13 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
         },
         createUnsavedTransformDataTable: (operatorType: DataTableOperator) => {
             const options = {
-                JOIN: {
-                    data_tables: [],
-                    how: undefined,
-                },
-                CONCAT: {
-                    data_tables: [],
-                },
-                AGGREGATE: {
-                    data_table_id: undefined,
-                    group_by: [],
-                },
-                QUERY: {
-                    data_table_id: undefined,
-                    conditions: [],
-                },
-                EVAL: {
-                    data_table_id: undefined,
-                    formulas: [],
-                },
-                // TODO: PIVOT, ADD_LABELS, VALUE_MAPPING
+                JOIN: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN),
+                CONCAT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.CONCAT),
+                QUERY: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY),
+                EVAL: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL),
+                PIVOT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT),
+                ADD_LABELS: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS),
+                // TODO: VALUE_MAPPING
             };
             const unsavedTransformData = {
                 data_table_id: `UNSAVED-${getRandomId()}`,
diff --git a/apps/web/src/common/modules/widgets/types/widget-model.ts b/apps/web/src/common/modules/widgets/types/widget-model.ts
index 9dd1858180..081da256b9 100644
--- a/apps/web/src/common/modules/widgets/types/widget-model.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-model.ts
@@ -63,12 +63,13 @@ export interface ConcatOptions {
 
 export interface JoinOptions {
     data_tables: string[];
-    how: JoinType;
+    how?: JoinType;
 }
 
 export interface QueryOptions {
-    data_table_id: string;
+    data_table_id?: string;
     conditions: string[];
+    // operator: 'AND'|'OR';
 }
 
 export interface AggregateOptions {
@@ -77,7 +78,7 @@ export interface AggregateOptions {
 }
 
 export interface EvalOptions {
-    data_table_id: string;
+    data_table_id?: string;
     expressions: EvaluateExpression[];
 }
 
@@ -85,6 +86,7 @@ export interface EvaluateExpression {
     name: string;
     field_type: DataTableFieldType;
     expression: string;
+    condition?: string;
 }
 
 export interface PivotOptions {
@@ -106,7 +108,7 @@ export interface PivotFieldOptions {
 }
 
 export interface AddLabelsOptions {
-    data_table_id: string;
+    data_table_id?: string;
     labels: AdditionalLabels;
 }
 
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 757cb1b60e..918dd5872d 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -22817,6 +22817,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>PIVOT_DESC</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description/>
+                                                <comment/>
+                                                <default_text/>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ja-JP</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>ko-KR</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>QUERY_DESC</name>
                                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index e913340c25..6438e8852f 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -1282,6 +1282,7 @@
 					"JOIN_DESC": "Merge rows from different tables based on a common column. ",
 					"LEGACY_WARNING_DESC": "This ‘{operator}’ format is no longer supported. Please remove it and implement the new data transformation.",
 					"LEGACY_WARNING_TITLE": "Unsupported ‘{operator}’ Format",
+					"PIVOT_DESC": "Summarize data by reorganizing key dimensions.",
 					"QUERY_DESC": "Filter and extract data that meet specific conditions. ",
 					"SELECT_DATA_SOURCE_SUCCESS": "Data successfully changed.",
 					"SELECT_DATA_TABLE_WARNING": "Please save the data table first.",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index bfb4b96d06..9ded0d4df4 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -1282,6 +1282,7 @@
 					"JOIN_DESC": "共通の列に基づいて、異なるテーブルの行を結合します。",
 					"LEGACY_WARNING_DESC": "この「{operator}」形式はサポートされなくなりました。削除して、新しいデータ変換を実装してください。",
 					"LEGACY_WARNING_TITLE": "サポートされていない「{operator}」形式",
+					"PIVOT_DESC": "",
 					"QUERY_DESC": "特定の条件を満たすデータをフィルタリングして抽出します。",
 					"SELECT_DATA_SOURCE_SUCCESS": "データが正常に変更されました。",
 					"SELECT_DATA_TABLE_WARNING": "先にデータテーブルを保存してください。",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 24e0e31e5f..7119c6f58f 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -1282,6 +1282,7 @@
 					"JOIN_DESC": "공통 열을 기준으로 다른 테이블의 행을 병합합니다.",
 					"LEGACY_WARNING_DESC": "이 ‘{operator}’ 형식은 더 이상 지원되지 않습니다. 이 형식을 삭제하고 새로운 데이터 변환을 추가해 주세요.",
 					"LEGACY_WARNING_TITLE": "지원되지 않는 ‘{operator}’ 형식",
+					"PIVOT_DESC": "",
 					"QUERY_DESC": "특정 조건을 충족하는 데이터를 필터링하고 추출합니다.",
 					"SELECT_DATA_SOURCE_SUCCESS": "데이터 수정 완료",
 					"SELECT_DATA_TABLE_WARNING": "데이터 테이블을 먼저 저장하세요.",