diff --git a/apps/storybook/.eslintrc.js b/apps/storybook/.eslintrc.js
index f69cc2e9c2..d6a43deefb 100755
--- a/apps/storybook/.eslintrc.js
+++ b/apps/storybook/.eslintrc.js
@@ -1,6 +1,6 @@
-export default {
+module.exports = {
     root: false,
-    extends: ["custom"],
+    extends: ['custom'],
     rules: {
         // eslint-plugin-import rules
         'import/order': [
@@ -49,4 +49,4 @@ export default {
             typescript: {},
         },
     },
-};
\ No newline at end of file
+};
diff --git a/apps/storybook/tailwind.config.js b/apps/storybook/tailwind.config.js
index 5242e4b58d..bd0032c88f 100644
--- a/apps/storybook/tailwind.config.js
+++ b/apps/storybook/tailwind.config.js
@@ -1,4 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const tailwindConfig = require('../../packages/mirinae/tailwind.config.cjs');
 
-module.exports = tailwindConfig;
+module.exports = {
+    content: [
+        '../../packages/mirinae/src/**/*.{js,ts,jsx,tsx,vue}',
+    ],
+    theme: tailwindConfig.theme,
+    variants: tailwindConfig.variants,
+    plugins: tailwindConfig.plugins,
+};
diff --git a/apps/web/package.json b/apps/web/package.json
index e16e6602f9..84731787cd 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.0-dev264",
+  "version": "2.0.0-dev278",
   "private": true,
   "description": "Cloudforet Console Web Application",
   "author": "Cloudforet",
diff --git a/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero.png b/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero.png
new file mode 100644
index 0000000000..355be57694
Binary files /dev/null and b/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero.png differ
diff --git a/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero@2x.png b/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero@2x.png
new file mode 100644
index 0000000000..cce88c77a7
Binary files /dev/null and b/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero@2x.png differ
diff --git a/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero@3x.png b/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero@3x.png
new file mode 100644
index 0000000000..a432f3f3c7
Binary files /dev/null and b/apps/web/public/images/opsflow-landing/img_landing_service-desk_hero@3x.png differ
diff --git a/apps/web/src/common/components/editor/TextEditor.vue b/apps/web/src/common/components/editor/TextEditor.vue
index ec12a0950d..30ccf031ea 100644
--- a/apps/web/src/common/components/editor/TextEditor.vue
+++ b/apps/web/src/common/components/editor/TextEditor.vue
@@ -14,33 +14,32 @@ import type { AnyExtension } from '@tiptap/vue-2';
 import { Editor, EditorContent } from '@tiptap/vue-2';
 import { Markdown } from 'tiptap-markdown';
 
+import { PTextarea } from '@cloudforet/mirinae';
+
 import { createImageExtension } from '@/common/components/editor/extensions/image';
-import { getAttachmentIds, setAttachmentsToContents } from '@/common/components/editor/extensions/image/helper';
-import type { Attachment, ImageUploader } from '@/common/components/editor/extensions/image/type';
+import type { ImageUploader } from '@/common/components/editor/extensions/image/type';
 import MenuBar from '@/common/components/editor/MenuBar.vue';
+import type { TextEditorContentsType } from '@/common/components/editor/type';
 
 import { loadMonospaceFonts } from '@/styles/fonts';
 
 interface Props {
     value?: string;
     imageUploader?: ImageUploader;
-    attachments?: Attachment[];
     invalid?: boolean;
     placeholder?: string;
-    contentType?: 'html'|'markdown';
+    contentsType?: TextEditorContentsType;
     showUndoRedoButtons?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
     value: '',
     imageUploader: undefined,
-    attachments: () => [],
     invalid: false,
     placeholder: '',
-    contentType: 'html',
+    contentsType: 'html',
     showUndoRedoButtons: true,
 });
 const emit = defineEmits<{(e: 'update:value', value: string): void;
-    (e: 'update:attachment-ids', attachmentIds: string[]): void;
 }>();
 
 loadMonospaceFonts();
@@ -68,13 +67,13 @@ const getExtensions = (): AnyExtension[] => {
     ];
 
     // add extensions based on content type
-    if (props.contentType === 'html') {
+    if (props.contentsType === 'html') {
         extensions.push(Color);
         extensions.push(TextAlign.configure({
             types: ['heading', 'paragraph'],
         }));
     }
-    if (props.contentType === 'markdown') {
+    if (props.contentsType === 'markdown') {
         extensions.push(Markdown);
     }
 
@@ -87,18 +86,17 @@ const getExtensions = (): AnyExtension[] => {
 
 onMounted(() => {
     editor.value = new Editor({
-        content: setAttachmentsToContents(props.value, props.attachments),
+        content: props.value,
         extensions: getExtensions(),
         onUpdate: () => {
             let content = '';
             if (!editor.value) return;
-            if (props.contentType === 'html') {
+            if (props.contentsType === 'html') {
                 content = editor.value?.getHTML() ?? '';
             } else {
                 content = editor.value.storage.markdown.getMarkdown() ?? '';
             }
             emit('update:value', content);
-            emit('update:attachment-ids', getAttachmentIds(editor.value));
         },
     });
 });
@@ -107,42 +105,50 @@ onBeforeUnmount(() => {
     if (editor.value) editor.value.destroy();
 });
 
-watch([() => props.value, () => props.attachments], ([value, attachments], prev) => {
+watch(() => props.value, (value) => {
     if (!editor.value) return;
-    let isSame;
-    if (props.contentType === 'html') {
-        isSame = editor.value.getHTML() === value;
+
+    let contents: string;
+    if (props.contentsType === 'html') {
+        contents = editor.value?.getHTML() ?? '';
     } else {
-        isSame = editor.value.storage.markdown.getMarkdown() === value;
+        contents = editor.value.storage.markdown.getMarkdown() ?? '';
     }
-    if (isSame) return;
-    let newContents = value;
-    if (attachments !== prev[1]) newContents = setAttachmentsToContents(value, attachments);
-    editor.value.commands.setContent(newContents, false);
+    if (contents === value) return; // prevent infinite loop.
+
+    editor.value.commands.setContent(value, false);
 });
 </script>
 
 <template>
-    <div v-if="editor"
-         class="text-editor"
-         :class="{invalid: props.invalid}"
-    >
-        <menu-bar :editor="editor"
-                  :use-color="props.contentType === 'html'"
-                  :use-text-align="props.contentType === 'html'"
-                  :use-image="!!props.imageUploader"
-                  :show-undo-redo-buttons="props.showUndoRedoButtons"
-        />
-        <editor-content class="editor-content"
-                        :editor="editor"
+    <div class="text-editor">
+        <p-textarea v-if="props.contentsType === 'plain'"
+                    :value="props.value"
+                    :placeholder="props.placeholder"
+                    :invalid="props.invalid"
+                    @update:value="emit('update:value', $event)"
         />
+        <div v-else-if="editor"
+             class="editor"
+             :class="{invalid: props.invalid}"
+        >
+            <menu-bar :editor="editor"
+                      :use-color="props.contentsType === 'html'"
+                      :use-text-align="props.contentsType === 'html'"
+                      :use-image="!!props.imageUploader"
+                      :show-undo-redo-buttons="props.showUndoRedoButtons"
+            />
+            <editor-content class="editor-content"
+                            :editor="editor"
+            />
+        </div>
     </div>
 </template>
 
 <style lang="postcss">
 @import './text-editor-nodes.pcss';
 .text-editor {
-    > .editor-content {
+    > .editor .editor-content {
         .ProseMirror {
             @mixin all-nodes-style;
             min-height: inherit;
@@ -166,26 +172,18 @@ watch([() => props.value, () => props.attachments], ([value, attachments], prev)
 .text-editor {
     @apply bg-white border border-gray-200 rounded-lg;
     min-height: 356px;
-    > .editor-content {
+    > .editor {
         min-height: inherit;
-        padding: 0.75rem 1rem 1.125rem 1rem;
-    }
-    &:focus-within {
-        @apply border-secondary;
-    }
-    &.invalid {
-        @apply border-alert;
-    }
-    >.suggestion-list {
-        @apply absolute;
-        z-index: 10;
+        > .editor-content {
+            min-height: inherit;
+            padding: 0.75rem 1rem 1.125rem 1rem;
+        }
+        &:focus-within {
+            @apply border-secondary;
+        }
+        &.invalid {
+            @apply border-alert;
+        }
     }
 }
 </style>
-
-<style lang="postcss">
-.mention {
-    @apply bg-violet-150 text-violet-600 rounded-md;
-    padding: 0 2px;
-}
-</style>
diff --git a/apps/web/src/common/components/editor/TextEditorViewer.vue b/apps/web/src/common/components/editor/TextEditorViewer.vue
index 2bde824d40..2050e92fff 100644
--- a/apps/web/src/common/components/editor/TextEditorViewer.vue
+++ b/apps/web/src/common/components/editor/TextEditorViewer.vue
@@ -1,45 +1,62 @@
 <script setup lang="ts">
-import { computed, toRef } from 'vue';
+import {
+    computed, watch, nextTick, ref, toRef,
+} from 'vue';
 
 import DOMPurify from 'dompurify';
 
 import { useMarkdown } from '@cloudforet/mirinae';
 
-import { setAttachmentsToContents } from '@/common/components/editor/extensions/image/helper';
-import type { Attachment } from '@/common/components/editor/extensions/image/type';
+import type { TextEditorContentsType } from '@/common/components/editor/type';
 
 import { loadMonospaceFonts } from '@/styles/fonts';
 
 interface Props {
     contents?: string;
-    attachments?: Attachment[];
     showInBox?: boolean
-    contentType?: 'html'|'markdown';
+    contentsType?: TextEditorContentsType;
 }
 const props = withDefaults(defineProps<Props>(), {
     contents: '',
-    attachments: () => [],
     showInBox: false,
-    contentType: 'html',
+    contentsType: 'plain',
 });
 
 loadMonospaceFonts();
+
 const { sanitizedHtml } = useMarkdown({
     value: toRef(props, 'contents'),
     inlineCodeClass: 'inline-code',
 });
 const refinedContents = computed(() => {
-    if (props.contentType === 'markdown') {
+    if (props.contentsType === 'markdown') {
         return sanitizedHtml.value;
+    } if (props.contentsType === 'html') {
+        return DOMPurify.sanitize(props.contents);
     }
-    const sanitized = DOMPurify.sanitize(props.contents);
-    return setAttachmentsToContents(sanitized, props.attachments);
+    // plain
+    return props.contents;
+});
+
+const htmlContainer = ref<null|HTMLElement>(null);
+const addErrorHandlers = (container: HTMLElement) => {
+    container.querySelectorAll('img').forEach((img) => {
+        img.onerror = () => {
+            img.setAttribute('error', 'true');
+        };
+    });
+};
+watch([refinedContents, htmlContainer], async ([, container]) => {
+    if (!container) return;
+    await nextTick();
+    addErrorHandlers(container);
 });
 </script>
 
 <template>
     <!--        eslint-disable-next-line vue/no-v-html-->
-    <div class="text-editor-contents"
+    <div ref="htmlContainer"
+         class="text-editor-contents"
          :class="{'contents-box': props.showInBox}"
          v-html="refinedContents"
     />
diff --git a/apps/web/src/common/components/editor/extensions/image/helper.ts b/apps/web/src/common/components/editor/extensions/image/helper.ts
index c3c3109e08..de3cf62ac1 100644
--- a/apps/web/src/common/components/editor/extensions/image/helper.ts
+++ b/apps/web/src/common/components/editor/extensions/image/helper.ts
@@ -1,47 +1,2 @@
-import type { Editor } from '@tiptap/vue-2';
-
-import type { Attachment } from '@/common/components/editor/extensions/image/type';
-
 // such as <p></p>
 export const emptyHtmlRegExp = /<[^/>][^>]*><\/[^>]+>/;
-
-export const getAttachmentIds = (editor: Editor): string[] => {
-    const contentsEl = editor.contentComponent?.$el;
-    if (!contentsEl) return [];
-    const imageElements = contentsEl.getElementsByTagName('img');
-    return Array.from(imageElements)
-        .reduce((results, imageElement) => {
-            const fileId = imageElement.getAttribute('file-id');
-            const src = imageElement.getAttribute('src');
-            if (fileId && src) {
-                results.push(fileId);
-            }
-
-            return results;
-        }, [] as string[]);
-};
-
-export const setAttachmentsToContents = (contents: string, attachments: Attachment[]): string => {
-    if (attachments.length === 0) return contents;
-
-    const contentsEl = document.createElement('div');
-    contentsEl.innerHTML = contents.trim();
-
-    const attachmentsMap = {};
-    attachments.forEach(({ fileId, downloadUrl }) => {
-        attachmentsMap[fileId] = downloadUrl;
-    });
-
-    const imageElements = contentsEl.getElementsByTagName('img');
-    Array.from(imageElements)
-        .forEach((imageElement) => {
-            const fileId = imageElement.getAttribute('file-id');
-            if (fileId && attachmentsMap[fileId]) {
-                imageElement.setAttribute('src', attachmentsMap[fileId]);
-            }
-        });
-
-    const newContents = contentsEl.innerHTML;
-    contentsEl.remove();
-    return newContents;
-};
diff --git a/apps/web/src/common/components/editor/extensions/image/index.ts b/apps/web/src/common/components/editor/extensions/image/index.ts
index 6974d0d9da..cf1f67c66a 100644
--- a/apps/web/src/common/components/editor/extensions/image/index.ts
+++ b/apps/web/src/common/components/editor/extensions/image/index.ts
@@ -1,4 +1,4 @@
-import { Node, nodeInputRule } from '@tiptap/core';
+import { Node, nodeInputRule, mergeAttributes } from '@tiptap/core';
 
 import type { ImageUploader } from '@/common/components/editor/extensions/image/type';
 
@@ -19,16 +19,19 @@ export const createImageExtension = (uploadFn: ImageUploader) => Node.create({
     inline: true,
     group: 'inline',
     draggable: true,
-    addAttributes: () => ({
-        src: {},
-        alt: { default: null },
-        title: { default: null },
-        'file-id': {},
-        'data-loading': { default: false }, // for loading spinner
-        style: { default: null }, // for loading spinner
-        width: { default: 'auto' },
-        height: { default: 'auto' },
-    }),
+    addAttributes() {
+        return {
+            src: {},
+            alt: { default: null },
+            title: { default: null },
+            'file-id': {},
+            'data-loading': { default: false }, // for loading spinner
+            style: { default: null }, // for loading spinner
+            width: { default: 'auto' },
+            height: { default: 'auto' },
+            error: { default: null },
+        };
+    },
     parseHTML: () => [
         {
             tag: 'img[src]',
@@ -43,12 +46,16 @@ export const createImageExtension = (uploadFn: ImageUploader) => Node.create({
                     style: element.getAttribute('style'),
                     width: element.getAttribute('width'),
                     height: element.getAttribute('height'),
+                    error: element.getAttribute('error'),
                 };
             },
         },
     ],
-    renderHTML: ({ HTMLAttributes }) => ['img', HTMLAttributes],
-
+    renderHTML({ HTMLAttributes }) {
+        return ['img', mergeAttributes(HTMLAttributes, {
+            onerror: "this.setAttribute('error', 'true')",
+        })];
+    },
     // eslint-disable-next-line no-unused-vars
     addCommands(this: any) {
         return (attrs) => (state, dispatch) => {
diff --git a/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts b/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts
index c7a3a14d4d..6fa73bacbf 100644
--- a/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts
+++ b/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts
@@ -30,12 +30,12 @@ export const dropImagePlugin = (upload: ImageUploader) => new Plugin({
 
                             // upload and replace the loading node with the uploaded image node
                             upload(image).then(({ downloadUrl, fileId }) => {
-                                const node = schema.nodes.image.create({
+                                const imageNode = schema.nodes.image.create({
                                     src: downloadUrl,
                                     'file-id': fileId,
                                 });
                                 const loadingPos = view.state.selection.anchor - 1; // get the position of the loading node
-                                const transaction = view.state.tr.setNodeMarkup(loadingPos, schema.nodes.image, node.attrs);
+                                const transaction = view.state.tr.setNodeMarkup(loadingPos, schema.nodes.image, imageNode.attrs);
                                 view.dispatch(transaction);
                             });
                         }
@@ -88,12 +88,12 @@ export const dropImagePlugin = (upload: ImageUploader) => new Plugin({
 
                         // upload and replace the loading node with the uploaded image node
                         const { downloadUrl, fileId } = await upload(image);
-                        const node = schema.nodes.image.create({
+                        const imageNode = schema.nodes.image.create({
                             src: downloadUrl,
                             'file-id': fileId,
                         });
                         const loadingPos = view.state.selection.anchor - 1; // get the position of the loading node
-                        const transaction = view.state.tr.setNodeMarkup(loadingPos, schema.nodes.image, node.attrs);
+                        const transaction = view.state.tr.setNodeMarkup(loadingPos, schema.nodes.image, imageNode.attrs);
                         view.dispatch(transaction);
                     } else {
                         reader.onload = (readerEvent) => {
diff --git a/apps/web/src/common/components/editor/text-editor-nodes.pcss b/apps/web/src/common/components/editor/text-editor-nodes.pcss
index fbbab3d450..8602905579 100644
--- a/apps/web/src/common/components/editor/text-editor-nodes.pcss
+++ b/apps/web/src/common/components/editor/text-editor-nodes.pcss
@@ -144,6 +144,12 @@
         &.ProseMirror-selectednode, &:active {
             outline: theme('colors.blue.300') solid 2px;
         }
+        &:not([src]),
+        &[src=""],
+        &[src^="data:image/"]:not([src*=","]),
+        &[error="true"] {
+            content: url('/images/no-image.png');
+        }
     }
 
     /* code block */
diff --git a/apps/web/src/common/components/editor/type.ts b/apps/web/src/common/components/editor/type.ts
new file mode 100644
index 0000000000..e99b135490
--- /dev/null
+++ b/apps/web/src/common/components/editor/type.ts
@@ -0,0 +1 @@
+export type TextEditorContentsType = 'html' | 'markdown' | 'plain';
diff --git a/apps/web/src/common/components/select/DataSelector.vue b/apps/web/src/common/components/select/DataSelector.vue
index 31a5387bb4..cad77fc629 100644
--- a/apps/web/src/common/components/select/DataSelector.vue
+++ b/apps/web/src/common/components/select/DataSelector.vue
@@ -14,8 +14,11 @@ const props = defineProps<{
     label?: string;
     menu?: DataSelectorItem[];
     handler?: MenuAttachHandler<DataSelectorItem>;
+    showSelectMarker?: boolean;
+    multiSelectable?: boolean;
 }>();
 const emit = defineEmits<{(e: 'update:selected', value: DataSelectorItem[]): void;
+    (e: 'update:search-text', value: string): void;
 }>();
 
 const searchText = ref('');
@@ -38,6 +41,7 @@ const {
 });
 const handleUpdateSearchText = debounce((text: string) => {
     searchText.value = text;
+    emit('update:search-text', searchText.value);
     reloadMenu();
 }, 200);
 
@@ -72,6 +76,8 @@ watch([() => props.menu, () => props.handler], () => {
                             :search-text="searchText"
                             searchable
                             :selected="selected"
+                            :show-select-marker="props.showSelectMarker"
+                            :multi-selectable="props.multiSelectable"
                             @click-show-more="showMoreMenu()"
                             @update:search-text="handleUpdateSearchText"
                             @update:selected="handleUpdateSelected"
diff --git a/apps/web/src/common/composables/editor-content-transformer/index.ts b/apps/web/src/common/composables/editor-content-transformer/index.ts
index a4355e481c..b6c0d7b69d 100644
--- a/apps/web/src/common/composables/editor-content-transformer/index.ts
+++ b/apps/web/src/common/composables/editor-content-transformer/index.ts
@@ -1,32 +1,63 @@
-import type { ComputedRef, Ref } from 'vue';
-import { computed } from 'vue';
+import { debouncedWatch } from '@vueuse/core';
+import type { Ref } from 'vue';
+import {
+    ref, isRef, watch, isReadonly,
+} from 'vue';
+
+import { isEqual } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-export const useEditorContentTransformer = (op?: {
-    value: ComputedRef<string>|Ref<string>;
-    contentType?: 'html'|'markdown';
+import type { ContentsType } from '@/schema/_common/type';
+
+import { getFileDownloadUrl } from '@/lib/file-manager';
+import type { FileManagerResourceGroupType } from '@/lib/file-manager/type';
+
+const getRef = <T>(v: T|Ref<T>|Readonly<Ref<T>>): Ref<T> => {
+    if (isRef<T>(v)) {
+        if (isReadonly(v)) {
+            const nv = ref<T>(v.value) as Ref<T>;
+            watch(v, (value) => { // sync readonly ref
+                if (nv.value !== value) nv.value = value;
+            });
+            return nv;
+        }
+        return v;
+    }
+    return ref<T>(v) as Ref<T>;
+};
+const decodeHtmlEntities = (encodedHtml: string): string => new DOMParser().parseFromString(encodedHtml, 'text/html').documentElement.textContent ?? '';
+
+export const useEditorContentTransformer = (op: {
+    contents?: string|Ref<string>|Readonly<Ref<string>>;
+    contentsType: ContentsType|Ref<ContentsType>;
+    fileIds?: string[]|Ref<string[]>|Readonly<Ref<string[]>>;
+    resourceGroup: FileManagerResourceGroupType|Ref<FileManagerResourceGroupType>;
+    resourceId?: string|Ref<string|undefined>;
 }) => {
-    const { value, contentType = 'html' } = op || {};
+    const contents = getRef<string>(op.contents ?? '');
+    const fileIds = getRef<string[]>(op.fileIds ?? []);
+    const contentsType = isRef(op.contentsType) ? op.contentsType : ref<ContentsType>(op.contentsType);
+    const resourceGroup = isRef(op.resourceGroup) ? op.resourceGroup : ref<FileManagerResourceGroupType>(op.resourceGroup);
+    const resourceId = getRef<string|undefined>(op.resourceId);
+
     const baseUri = SpaceConnector.restClient.getUri();
 
     const replaceImageUrl = (url: string): string => {
         const pattern = new RegExp(`${baseUri}/files/[^/]+/(file-[^?]+)\\?token=.*`);
         const match = url.match(pattern);
-        if (match && match[1]) {
-            return `{${match[1]}}`; // Extract only the fileId and return it in the format {fileId}.
-        }
-        return url;
+        // Extract only the fileId and return it in the format <fileId>.
+        return match?.[1] ? `@@${match[1]}@@` : url;
     };
 
-    const transformHtmlContent = (content: string): string => {
+    const transformHtmlContentForUpload = (content: string): string => {
         const imagePattern = /<img\s+[^>]*src="([^"]+)"[^>]*>/g;
         return content.replace(imagePattern, (match, url) => {
             const newUrl = replaceImageUrl(url);
             return match.replace(url, newUrl);
         });
     };
-    const transformMarkdownContent = (content: string): string => {
+    const transformMarkdownContentForUpload = (content: string): string => {
         const markdownImagePattern = /!\[([^\]]*)\]\(([^)]+)\)/g;
         return content.replace(markdownImagePattern, (match, altText, url) => {
             const newUrl = replaceImageUrl(url);
@@ -34,18 +65,78 @@ export const useEditorContentTransformer = (op?: {
         });
     };
 
-    const transformEditorContent = (content: string): string => {
-        if (contentType === 'markdown') {
-            return transformMarkdownContent(content);
+    const transformEditorContentForUpload = (content: string): string => {
+        if (contentsType.value === 'markdown') {
+            return transformMarkdownContentForUpload(content);
         }
-        return transformHtmlContent(content);
+        return transformHtmlContentForUpload(content);
     };
 
+    const htmlFileImagePattern = /<img\s+[^>]*src="@@(file-.+?)@@"[^>]*>/g;
+    const transformHtmlContentForView = (content: string): string => {
+        const decodedHtml = decodeHtmlEntities(content);
+        return decodedHtml.replace(htmlFileImagePattern, (match, url) => {
+            const newUrl = getFileDownloadUrl(replaceImageUrl(url), resourceGroup.value);
+            return match.replace(url, newUrl);
+        });
+    };
 
-    const transformedEditorContent = computed(() => transformEditorContent(value ? value.value : ''));
+    const markdownFileImagePattern = /!\[([^\]]*)\]\(@@(file-.+?)@@\)/g;
+    const transformMarkdownContentForView = (content: string): string => {
+        const decodedMarkdown = decodeHtmlEntities(content);
+        const result = decodedMarkdown.replace(markdownFileImagePattern, (match, altText, fileId) => `![${altText}](${getFileDownloadUrl(fileId, resourceGroup.value)})`);
+        return result;
+    };
+
+    const transformEditorContentForView = (content: string): string => {
+        if (contentsType.value === 'markdown') {
+            return transformMarkdownContentForView(content);
+        }
+        return transformHtmlContentForView(content);
+    };
+
+    const getFileIdsFromContents = (content: string): string[] => {
+        if (contentsType.value === 'markdown') {
+            return Array.from(content.matchAll(markdownFileImagePattern)).map((match) => match[2]);
+        }
+        return Array.from(content.matchAll(htmlFileImagePattern)).map((match) => match[1]);
+    };
+
+    const editorContents = ref<string>(transformEditorContentForView(contents.value));
+    const updateEditorContents = (newContents: string) => {
+        editorContents.value = newContents;
+    };
+
+    // When contents(from server) is changed, update editorContents(view data)
+    watch(contents, (c) => {
+        const ec = transformEditorContentForView(c);
+        if (editorContents.value !== ec) {
+            editorContents.value = ec;
+        }
+    });
+    // When editorContents(view data) is changed by input, update contents(for server)
+    debouncedWatch(editorContents, (ec) => {
+        const c = transformEditorContentForUpload(ec);
+        if (contents.value !== c) {
+            contents.value = c;
+            const newFileIds = getFileIdsFromContents(c);
+            if (!isEqual(fileIds.value, newFileIds)) {
+                fileIds.value = newFileIds;
+            }
+        }
+    }, { debounce: 300 });
 
+    // When resourceGroup or resourceId is changed, update editorContents(view data)
+    watch([resourceGroup, resourceId, contentsType], () => {
+        editorContents.value = transformEditorContentForView(contents.value);
+    });
     return {
-        transformedEditorContent,
-        transformEditorContent,
+        editorContents,
+        contents,
+        fileIds,
+        transformEditorContentForUpload,
+        transformEditorContentForView,
+        getFileIdsFromContents,
+        updateEditorContents,
     };
 };
diff --git a/apps/web/src/common/composables/file-attachments/index.ts b/apps/web/src/common/composables/file-attachments/index.ts
deleted file mode 100644
index 53af0990a5..0000000000
--- a/apps/web/src/common/composables/file-attachments/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { ComputedRef, Ref } from 'vue';
-import { computed } from 'vue';
-
-import type { ResourceGroupType } from '@/schema/_common/type';
-import type { FileModel } from '@/schema/file-manager/model';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-
-import { getFileDownloadUrl } from '@/lib/file-manager';
-
-import type { Attachment } from '@/common/components/editor/extensions/image/type';
-
-export const useFileAttachments = (files: ComputedRef<FileModel[]>|Ref<FileModel[]>) => {
-    const appContextStore = useAppContextStore();
-    const appContextGetters = appContextStore.getters;
-    const resourceGroup = computed<Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'>>(() => {
-        if (appContextGetters.isAdminMode) return 'DOMAIN';
-        return 'WORKSPACE';
-    });
-
-    const attachments = computed<Attachment[]>(() => {
-        if (files.value.length === 0) return [];
-
-        return files.value.map((file, idx) => ({
-            downloadUrl: getFileDownloadUrl(file.file_id, resourceGroup.value),
-            fileId: files.value[idx].file_id,
-        }));
-    });
-
-    return {
-        attachments,
-    };
-};
diff --git a/apps/web/src/common/composables/file-uploader/index.ts b/apps/web/src/common/composables/file-uploader/index.ts
index a865323e64..fb69e5b80f 100644
--- a/apps/web/src/common/composables/file-uploader/index.ts
+++ b/apps/web/src/common/composables/file-uploader/index.ts
@@ -1,22 +1,21 @@
-import { computed } from 'vue';
-
-import type { ResourceGroupType } from '@/schema/_common/type';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
+import type { Ref } from 'vue';
+import { isRef } from 'vue';
 
 import { uploadFileAndGetFileInfo } from '@/lib/file-manager';
+import type { FileManagerResourceGroupType } from '@/lib/file-manager/type';
 
 
-export const useFileUploader = () => {
-    const appContextStore = useAppContextStore();
-    const appContextGetters = appContextStore.getters;
-    const resourceGroup = computed<Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'>>(() => {
-        if (appContextGetters.isAdminMode) return 'DOMAIN';
-        return 'WORKSPACE';
-    });
-    return {
-        fileUploader(file: File) {
-            return uploadFileAndGetFileInfo(file, resourceGroup.value);
-        },
-    };
-};
+export const useFileUploader = ({
+    resourceGroup, resourceId,
+}: {
+    resourceGroup: FileManagerResourceGroupType|Ref<FileManagerResourceGroupType>;
+    resourceId?: string|Ref<string|undefined>;
+}) => ({
+    fileUploader(file: File) {
+        return uploadFileAndGetFileInfo(
+            file,
+            isRef(resourceGroup) ? resourceGroup.value : resourceGroup,
+            isRef(resourceId) ? resourceId.value : resourceId,
+        );
+    },
+});
diff --git a/apps/web/src/common/composables/timezone-date/index.ts b/apps/web/src/common/composables/timezone-date/index.ts
index a3d718df83..7b8d6491c8 100644
--- a/apps/web/src/common/composables/timezone-date/index.ts
+++ b/apps/web/src/common/composables/timezone-date/index.ts
@@ -3,6 +3,8 @@ import { computed } from 'vue';
 
 import dayjs from 'dayjs';
 
+import { durationFormatter } from '@cloudforet/utils';
+
 import { useUserStore } from '@/store/user/user-store';
 
 interface UseTimezoneDateOptions {
@@ -14,8 +16,13 @@ export const useTimezoneDate = ({
     const userStore = useUserStore();
     const getTimezoneDate = (_date: string): string => dayjs.utc(_date).tz(userStore.state.timezone ?? 'UTC').format('YYYY/MM/DD HH:mm:ss');
     const timezoneDate = date ? computed(() => getTimezoneDate(date.value)) : undefined;
+    const getDuration = (started: string, finished?: string) => {
+        const ended = finished ?? dayjs.utc().toISOString();
+        return durationFormatter(started, ended, userStore.state.timezone ?? 'UTC');
+    };
     return {
         getTimezoneDate,
+        getDuration,
         timezoneDate,
     };
 };
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue b/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue
index a861c7739a..217117ecc1 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue
@@ -253,6 +253,7 @@ onUnmounted(() => {
                 @apply block;
                 margin-right: 0.125rem;
                 margin-left: auto;
+                flex-shrink: 0;
                 &:hover {
                     transform: scale(1.3);
                 }
diff --git a/apps/web/src/common/modules/popup/notice/modules/NoticePopupItem.vue b/apps/web/src/common/modules/popup/notice/modules/NoticePopupItem.vue
index b943960a33..838833dda4 100644
--- a/apps/web/src/common/modules/popup/notice/modules/NoticePopupItem.vue
+++ b/apps/web/src/common/modules/popup/notice/modules/NoticePopupItem.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { computedAsync } from '@vueuse/core';
-import { reactive } from 'vue';
+import { reactive, computed } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PButtonModal, PDivider, PButton,
 } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { PostGetParameters } from '@/schema/board/post/api-verbs/get';
 import type { PostModel } from '@/schema/board/post/model';
-import type { FileModel } from '@/schema/file-manager/model';
 
 import { useNoticeStore } from '@/store/notice';
 import { useUserStore } from '@/store/user/user-store';
@@ -18,8 +14,7 @@ import { useUserStore } from '@/store/user/user-store';
 import { isMobile } from '@/lib/helper/cross-browsing-helper';
 
 import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFileAttachments } from '@/common/composables/file-attachments';
+import { useEditorContentTransformer } from '@/common/composables/editor-content-transformer';
 
 const props = withDefaults(defineProps<{
     popupIndex: number|string;
@@ -33,20 +28,14 @@ const userStore = useUserStore();
 const state = reactive({
     popupVisible: true,
 });
-const files = computedAsync<FileModel[]>(async () => {
-    const notice = props.item;
-    if (!notice) return [];
-    try {
-        const result: PostModel = await SpaceConnector.clientV2.board.post.get<PostGetParameters, PostModel>({
-            post_id: notice.post_id,
-        });
-        return result.files;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return [];
-    }
+const contentsType = computed(() => (props.item ? props.item.contents_type ?? 'markdown' : 'markdown'));
+const {
+    editorContents,
+} = useEditorContentTransformer({
+    contents: computed(() => (props.item ? props.item.contents : '')),
+    contentsType,
+    resourceGroup: 'DOMAIN',
 });
-const { attachments } = useFileAttachments(files);
 
 const handleClose = async (neverShowPopup?: boolean): Promise<void> => {
     state.popupVisible = false;
@@ -58,26 +47,26 @@ const handleClose = async (neverShowPopup?: boolean): Promise<void> => {
 </script>
 
 <template>
-    <p-button-modal :visible="state.popupVisible"
+    <p-button-modal :visible="state.popupVisible && !!props.item"
                     :backdrop="false"
                     hide-header
                     hide-header-close-button
                     hide-footer-close-button
                     size="md"
-                    :absolute="props.popupIndex * 1.5 + (isMobile() ? 0.75 : 7.5)"
+                    :absolute="Number(props.popupIndex) * 1.5 + (isMobile() ? 0.75 : 7.5)"
                     class="notice-popup"
                     @confirm="handleClose"
     >
         <template #body>
             <h1 class="notice-popup-title">
-                {{ item.title }}
+                {{ props.item ? props.item.title : '' }}
             </h1>
             <div class="notice-popup-info">
                 <span class="notice-popup-author">{{ iso8601Formatter(item.updated_at, userStore.state.timezone) }} · {{ item.writer }}</span>
             </div>
             <p-divider class="!my-4" />
-            <text-editor-viewer :contents="item.contents"
-                                :attachments="attachments"
+            <text-editor-viewer :contents="editorContents"
+                                :contents-type="contentsType"
             />
         </template>
         <template #footer-extra>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
index 01a17ee239..45089fe064 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';
 
@@ -135,6 +135,12 @@ const state = reactive({
             description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.QUERY_DESC'),
             icon: 'ic_db-where',
         },
+        {
+            key: DATA_TABLE_OPERATOR.AGGREGATE,
+            name: 'Aggregate',
+            description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.AGGREGATE_DESC'),
+            icon: 'ic_db-dimensions',
+        },
         {
             key: DATA_TABLE_OPERATOR.VALUE_MAPPING,
             name: 'Value Mapping',
@@ -149,7 +155,7 @@ const state = reactive({
         },
         {
             key: DATA_TABLE_OPERATOR.PIVOT,
-            name: 'Pivot',
+            name: 'Pivot Table',
             description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.PIVOT_DESC'),
             icon: 'ic_db-pivot-table',
         },
@@ -388,61 +394,70 @@ watch(() => state.showPopover, (val) => {
             <div v-else
                  class="data-source-popper-operator-wrapper"
             >
-                <div class="left-part">
-                    <div class="part-title">
-                        {{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.MERGE') }}
-                    </div>
-                    <p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(0, 2)"
-                                   :key="operatorInfo.key"
-                                   value="operatorKey"
-                                   label="a"
-                                   block
-                                   @click="handleClickOperator(operatorInfo.key)"
-                    >
-                        <div class="operator-card-contents">
-                            <p-i :name="operatorInfo.icon"
-                                 width="1rem"
-                                 height="1rem"
-                                 color="inherit"
-                            />
-                            <div class="contents-wrapper">
-                                <p class="name">
-                                    {{ operatorInfo.name }}
-                                </p>
-                                <p class="description">
-                                    {{ operatorInfo.description }}
-                                </p>
-                            </div>
+                <div class="conetent">
+                    <div class="content-header flex items-center justify-between">
+                        <div class="part-title">
+                            {{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.MERGE') }}
+                        </div>
+                        <div class="part-title">
+                            {{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TRANSFORMATIONS') }}
                         </div>
-                    </p-select-card>
-                </div>
-                <div class="right-part">
-                    <div class="part-title">
-                        {{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TRANSFORMATIONS') }}
                     </div>
-                    <p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(2)"
-                                   :key="operatorInfo.key"
-                                   value="operatorKey"
-                                   label="a"
-                                   block
-                                   @click="handleClickOperator(operatorInfo.key)"
-                    >
-                        <div class="operator-card-contents">
-                            <p-i :name="operatorInfo.icon"
-                                 width="1rem"
-                                 height="1rem"
-                                 color="inherit"
-                            />
-                            <div class="contents-wrapper">
-                                <p class="name">
-                                    {{ operatorInfo.name }}
-                                </p>
-                                <p class="description">
-                                    {{ operatorInfo.description }}
-                                </p>
-                            </div>
+                    <div class="content-part flex">
+                        <div class="left-part">
+                            <p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(0, 2)"
+                                           :key="operatorInfo.key"
+                                           value="operatorKey"
+                                           label="a"
+                                           block
+                                           @click="handleClickOperator(operatorInfo.key)"
+                            >
+                                <div class="operator-card-contents">
+                                    <p-i :name="operatorInfo.icon"
+                                         width="1rem"
+                                         height="1rem"
+                                         color="inherit"
+                                    />
+                                    <div class="contents-wrapper">
+                                        <p class="name">
+                                            {{ operatorInfo.name }}
+                                        </p>
+                                        <p class="description">
+                                            {{ operatorInfo.description }}
+                                        </p>
+                                    </div>
+                                </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"
+                                           value="operatorKey"
+                                           label="a"
+                                           block
+                                           @click="handleClickOperator(operatorInfo.key)"
+                            >
+                                <div class="operator-card-contents">
+                                    <p-i :name="operatorInfo.icon"
+                                         width="1rem"
+                                         height="1rem"
+                                         color="inherit"
+                                    />
+                                    <div class="contents-wrapper">
+                                        <p class="name">
+                                            {{ operatorInfo.name }}
+                                        </p>
+                                        <p class="description">
+                                            {{ operatorInfo.description }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </p-select-card>
                         </div>
-                    </p-select-card>
+                    </div>
                 </div>
             </div>
         </template>
@@ -489,34 +504,66 @@ watch(() => state.showPopover, (val) => {
         padding: 1rem;
     }
     .data-source-popper-operator-wrapper {
-        @apply grid grid-cols-12;
         //display: flex;
         //flex-direction: column;
-        gap: 0.5rem;
-        width: 43rem;
+        width: 43.5rem;
         padding: 1rem;
 
-        .left-part, .right-part {
-            @apply col-span-6;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-        .part-title {
-            @apply text-label-sm text-gray-700;
-            font-weight: bold;
-        }
+        .conetent {
+            width: 100%;
+            height: 24rem;
+
+            .content-header {
+                .part-title {
+                    @apply text-label-sm text-gray-700;
+                    width: calc(50% - 0.25rem);
+                    font-weight: bold;
+                }
+                padding-bottom: 0.5rem;
+            }
 
-        .operator-card-contents {
-            @apply flex gap-1;
-            .contents-wrapper {
-                width: calc(100% - 1.25rem);
-                .name {
-                    @apply text-label-md font-bold text-gray-900;
-                    margin-bottom: 0.25rem;
+            .content-part {
+                overflow-y: scroll;
+                max-height: 22.5rem;
+                height: auto;
+
+                .left-part, .right-part {
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+
+                    /* 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;
+                            flex-direction: row;
+                            .p-lazy-img {
+                                margin-right: 0.25rem;
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
                 }
-                .description {
-                    @apply text-label-md text-gray-500;
+                .content-divider {
+                    margin: 0 1.125rem;
+                    height: 30.125rem;
+                }
+            }
+
+            .operator-card-contents {
+                @apply flex gap-1;
+                .contents-wrapper {
+                    width: calc(100% - 1.25rem);
+                    .name {
+                        @apply text-label-md font-bold text-gray-900;
+                        margin-bottom: 0.25rem;
+                    }
+                    .description {
+                        @apply text-label-md text-gray-500;
+                    }
                 }
             }
         }
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue
index 1a2fe23464..cd0bcba7db 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue
@@ -19,7 +19,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
 
-import { showInfoMessage } from '@/lib/helper/notice-alert-helper';
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
 import { useCostDataSourceFilterMenuItems } from '@/common/composables/data-source/use-cost-data-source-filter-menu-items';
 import { useProxyValue } from '@/common/composables/proxy-state';
@@ -49,7 +49,7 @@ interface Props {
     /* Validation */
     formInvalid: boolean;
 }
-const MAX_GROUP_BY_COUNT = 3;
+const MAX_GROUP_BY_COUNT = 5;
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:filter', value: Record<string, string[]>): void;
     (e: 'update:selected-group-by-items', value: any[]): void;
@@ -168,7 +168,7 @@ const handleClickTimeDiffDate = (timeDiffDate: string) => {
 const handleUpdateSelectedGroupBy = (selectedItem: SelectDropdownMenuItem, isSelected: boolean) => {
     if (isSelected && (state.proxySelectedGroupByItems.length > MAX_GROUP_BY_COUNT)) {
         state.proxySelectedGroupByItems = state.proxySelectedGroupByItems.filter((d) => d.name !== selectedItem.name);
-        showInfoMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ALT_E_ADD_GROUP_BY'), '');
+        showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ALT_E_ADD_GROUP_BY'), '');
     }
 };
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
index c70910e3a1..c308441cb0 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
@@ -5,6 +5,7 @@ import {
 } from 'vue';
 
 import {
+    debounce,
     isArray,
     isEmpty, unset,
 } from 'lodash';
@@ -113,6 +114,7 @@ const state = reactive({
         metric_id: props.sourceId,
     })),
     selectedItemsMap: getInitialSelectedItemsMap() as Record<string, DataTableQueryFilterForDropdown>,
+    searchText: '',
 });
 const assetFilterState = reactive({
     refinedLabelKeys: computed(() => {
@@ -133,21 +135,26 @@ const {
     showContextMenu,
     hideContextMenu,
     initiateMenu,
-    // reloadMenu,
+    reloadMenu,
     showMoreMenu,
 } = useContextMenuController({
     targetRef,
     contextMenuRef,
-    // useFixedStyle: true,
+    useMenuFiltering: true,
     useReorderBySelection: true,
     menu: toRef(state, 'filterItems'),
     selected: toRef(state, 'selectedItems'),
+    searchText: toRef(state, 'searchText'),
     pageSize: 10,
 });
 onClickOutside(containerRef, hideContextMenu);
 
 
 /* Event */
+const handleUpdateSearchText = debounce((text: string) => {
+    state.searchText = text;
+    reloadMenu();
+}, 200);
 const handleUpdateFilter = (filterKey: string, filter: DataTableQueryFilterForDropdown) => {
     state.selectedItemsMap[filterKey] = { ...filter };
 
@@ -368,12 +375,14 @@ onMounted(() => {
                                 :loading="state.loading"
                                 :menu="refinedMenu"
                                 :selected="state.selectedItems"
+                                searchable
                                 multi-selectable
                                 show-select-marker
                                 show-clear-selection
                                 @select="handleSelectAddFilterMenuItem"
                                 @clear-selection="handleClearAddFilterMenuItems"
                                 @click-show-more="handleClickShowMore"
+                                @update:search-text="handleUpdateSearchText"
                 />
             </div>
         </div>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
new file mode 100644
index 0000000000..5a5e703c88
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
+
+import { cloneDeep } from 'lodash';
+
+import {
+    PFieldGroup, PSelectDropdown,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
+import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
+
+import { i18n } from '@/translations';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+import { useProxyValue } from '@/common/composables/proxy-state';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import {
+    DATA_TABLE_OPERATOR,
+} from '@/common/modules/widgets/_constants/data-table-constant';
+import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { AggregateOptions } from '@/common/modules/widgets/types/widget-model';
+
+
+
+const props = defineProps<TransformDataTableProps<AggregateOptions>>();
+const emit = defineEmits<{(e: 'update:operator-options', value: AggregateOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
+const widgetGenerateStore = useWidgetGenerateStore();
+const widgetGenerateState = widgetGenerateStore.state;
+
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTableId: props.originData?.data_table_id,
+});
+const groupByInfo = ref<AggregateOptions['group_by']>(cloneDeep(props.originData.group_by));
+const functionInfo = ref<AggregateOptions['function']>(cloneDeep(props.originData.function));
+const storeState = reactive({
+    dataTables: computed(() => widgetGenerateState.dataTables),
+});
+const state = reactive({
+    proxyOperatorOptions: useProxyValue<AggregateOptions>('operator-options', props, emit),
+    selectedDataTable: computed(() => storeState.dataTables.find((dataTable) => dataTable.data_table_id === dataTableInfo.value.dataTableId)),
+    invalid: computed<boolean>(() => {
+        if (!state.proxyOperatorOptions?.data_table_id) return true;
+        if (!state.proxyOperatorOptions.group_by?.length) return true;
+        return false;
+    }),
+    groupByFieldItems: computed<MenuItem[]>(() => {
+        if (!state.selectedDataTable) return [];
+        const labelsInfo = state.selectedDataTable.labels_info;
+        return Object.keys(labelsInfo).map((key) => ({
+            name: key,
+            label: key,
+        }));
+    }),
+    selectedGroupByItems: computed(() => {
+        if (!groupByInfo.value) return [];
+        return groupByInfo.value.map((groupBy) => ({
+            name: groupBy,
+            label: groupBy,
+        }));
+    }),
+});
+
+/* Event */
+const handleUpdateSelectedGroupBy = (selected: SelectDropdownMenuItem[]) => {
+    const selectedGroupByItems = selected.map((item) => item.name);
+    groupByInfo.value = selectedGroupByItems;
+};
+const handleUpdateSelectGroupBy = (selectedItem: SelectDropdownMenuItem, isSelected: boolean) => {
+    if (isSelected && groupByInfo.value.length > 4) {
+        groupByInfo.value = groupByInfo.value.filter((groupBy) => groupBy !== selectedItem.name);
+        showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ALT_E_ADD_GROUP_BY'), '');
+    }
+};
+
+/* Watcher */
+watch([dataTableInfo, groupByInfo, functionInfo], ([_dataTableInfo, _groupByInfo, _functionInfo]) => {
+    state.proxyOperatorOptions = {
+        data_table_id: _dataTableInfo.dataTableId,
+        group_by: _groupByInfo,
+        function: _functionInfo,
+    };
+}, { deep: true, immediate: true });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="widget-form-data-table-card-transform-aggregate">
+        <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                            :operator="DATA_TABLE_OPERATOR.AGGREGATE"
+                                                            :data-table-info.sync="dataTableInfo"
+        >
+            <p-field-group :label="$t('COMMON.WIDGETS.DIMENSIONS')"
+                           :help-text="$t('COMMON.WIDGETS.DIMENSIONS_DESC')"
+                           style-type="secondary"
+                           required
+                           class="criteria-field"
+            >
+                <p-select-dropdown :menu="state.groupByFieldItems"
+                                   :selected="state.selectedGroupByItems"
+                                   multi-selectable
+                                   appearance-type="badge"
+                                   :page-size="10"
+                                   show-select-marker
+                                   is-filterable
+                                   block
+                                   @update:selected="handleUpdateSelectedGroupBy"
+                                   @select="handleUpdateSelectGroupBy"
+                />
+            </p-field-group>
+        </widget-form-data-table-card-transform-form-wrapper>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.widget-form-data-table-card-transform-aggregate {
+    /* custom design-system component - p-field-title */
+    :deep(.p-field-title) {
+        .title {
+            @apply flex;
+            width: 100%;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index 8fdf6140c0..ec2ba58574 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -20,6 +20,8 @@ import WidgetFormDataTableCardHeaderTitle
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue';
 import WidgetFormDataTableCardTransformAddLabels
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue';
+import WidgetFormDataTableCardTransformAggregate
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue';
 import WidgetFormDataTableCardTransformConcatenate
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue';
 import WidgetFormDataTableCardTransformEvaluate
@@ -43,7 +45,7 @@ import type {
     DataTableOperator, QueryOptions, EvalOptions,
     DataTableTransformOptions,
     AddLabelsOptions, PivotOptions,
-    JoinOptions, ValueMappingOptions, ConcatOptions,
+    JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction,
 } from '@/common/modules/widgets/types/widget-model';
 
 
@@ -92,6 +94,7 @@ const valueState = reactive({
     JOIN: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN,
     EVAL: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL,
     QUERY: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY,
+    AGGREGATE: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.AGGREGATE,
     ADD_LABELS: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS,
     VALUE_MAPPING: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING,
 });
@@ -101,6 +104,7 @@ const invalidState = reactive({
     JOIN: false,
     EVAL: false,
     QUERY: false,
+    AGGREGATE: false,
     ADD_LABELS: false,
     VALUE_MAPPING: false,
 });
@@ -115,6 +119,7 @@ const originState = reactive({
     JOIN: computed<JoinOptions|undefined>(() => props.item.options.JOIN),
     QUERY: computed<QueryOptions|undefined>(() => props.item.options.QUERY),
     EVAL: computed<EvalOptions|undefined>(() => props.item.options.EVAL),
+    AGGREGATE: computed<AggregateOptions|undefined>(() => props.item.options.AGGREGATE),
     ADD_LABELS: computed<AddLabelsOptions|undefined>(() => props.item.options.ADD_LABELS),
     VALUE_MAPPING: computed<ValueMappingOptions|undefined>(() => props.item.options.VALUE_MAPPING),
     PIVOT: computed<PivotOptions|undefined>(() => {
@@ -134,6 +139,15 @@ const originState = reactive({
 const setFailStatus = (status: boolean) => {
     state.failStatus = status;
 };
+const getAggregateFunctionMap = () => {
+    const referenceDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === valueState.AGGREGATE.data_table_id);
+    if (!referenceDataTable) return {};
+    const dataFields = Object.keys(referenceDataTable.data_info ?? {});
+    return dataFields.reduce((acc, dataField) => {
+        acc[dataField] = 'sum';
+        return acc;
+    }, {} as AggregateFunction);
+};
 const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     const _targetDataTableId: string|undefined = valueState[state.operator].data_table_id;
     const _targetDataTables: string[]|undefined = valueState[state.operator].data_tables;
@@ -168,6 +182,7 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     const concatOptions = cloneDeep(valueState.CONCAT);
     const joinOptions = cloneDeep(valueState.JOIN);
     const queryOptions = cloneDeep(valueState.QUERY);
+    const aggregateOptions = cloneDeep(valueState.AGGREGATE);
     const valueMappingOptions = cloneDeep(valueState.VALUE_MAPPING);
     const evalOptions: EvalOptions = {
         data_table_id: valueState.EVAL.data_table_id,
@@ -195,6 +210,11 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
             return queryOptions;
         case 'EVAL':
             return evalOptions;
+        case 'AGGREGATE':
+            return {
+                ...aggregateOptions,
+                function: getAggregateFunctionMap(),
+            };
         case 'PIVOT':
             return pivotOptions;
         case 'ADD_LABELS':
@@ -281,6 +301,7 @@ const setInitialDataTableForm = () => {
     valueState.JOIN = !isEmpty(originState.JOIN) ? cloneDeep(originState.JOIN) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN);
     valueState.QUERY = !isEmpty(originState.QUERY) ? cloneDeep(originState.QUERY) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY);
     valueState.EVAL = !isEmpty(originState.EVAL) ? cloneDeep(originState.EVAL) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL);
+    valueState.AGGREGATE = !isEmpty(originState.AGGREGATE) ? cloneDeep(originState.AGGREGATE) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.AGGREGATE);
     valueState.ADD_LABELS = !isEmpty(originState.ADD_LABELS) ? cloneDeep(originState.ADD_LABELS) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS);
     valueState.PIVOT = originState.PIVOT ? cloneDeep(originState.PIVOT) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT);
     valueState.VALUE_MAPPING = !isEmpty(originState.VALUE_MAPPING) ? cloneDeep(originState.VALUE_MAPPING) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING);
@@ -354,6 +375,13 @@ defineExpose({
                                                      :invalid.sync="invalidState.QUERY"
                                                      :origin-data="props.item.options[state.operator]"
         />
+        <widget-form-data-table-card-transform-aggregate v-else-if="state.operator === DATA_TABLE_OPERATOR.AGGREGATE"
+                                                         :key="`aggregate-${state.resetKey}`"
+                                                         :base-data-table-id="state.dataTableId"
+                                                         :operator-options.sync="valueState.AGGREGATE"
+                                                         :invalid.sync="invalidState.AGGREGATE"
+                                                         :origin-data="props.item.options[state.operator]"
+        />
         <widget-form-data-table-card-transform-add-labels v-if="state.operator === DATA_TABLE_OPERATOR.ADD_LABELS"
                                                           :key="`add-labels-${state.resetKey}`"
                                                           :base-data-table-id="state.dataTableId"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
index 0567346cf9..8720d9bfc9 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -24,7 +24,6 @@ import WidgetFormDataTableCardTransformFormWrapper
 import WidgetFormDataTableGlobalVariableViewButton
     from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
 import { DATA_TABLE_FIELD_TYPE, DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
-import { isFieldNameValid } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { EvalOptions } from '@/common/modules/widgets/types/widget-model';
@@ -68,8 +67,8 @@ const state = reactive({
     globalVariablePopperVisible: false,
     invalid: computed<boolean>(() => {
         if (!state.proxyOperatorOptions.data_table_id) return true;
-        const fieldNames = expressionsInfo.value.map((d) => d.name);
-        if (fieldNames.length !== new Set(fieldNames).size) return true;
+        // const fieldNames = expressionsInfo.value.map((d) => d.name);
+        // if (fieldNames.length !== new Set(fieldNames).size) return true;
         if (!expressionsInfo.value.every((d) => !!d.name && !!d.expression)) return true;
         if (expressionsInfo.value.some((d) => !isFieldNameValid(d.name, storeState.currentDataTable))) return true;
         return false;
@@ -87,6 +86,12 @@ const getInvalidFieldNameText = (fieldName?: string): TranslateResult|undefined
     if (!isFieldNameValid(fieldName, storeState.currentDataTable)) return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DUPLICATED_FIELD_NAME');
     return undefined;
 };
+const isFieldNameValid = (fieldName: string, dataTable?: PublicDataTableModel|PrivateDataTableModel): boolean => {
+    if (!dataTable) return true;
+    const _dataInfoKeys = Object.keys(dataTable.data_info || {});
+    return !_dataInfoKeys.includes(fieldName);
+};
+
 
 /* Events */
 const handleToggleExpressionCard = (idx: number) => {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue
index 3ee125c781..1b57bb8f55 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue
@@ -27,6 +27,7 @@ const state = reactive({
         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 === 'AGGREGATE') return { name: 'Aggregate', icon: 'ic_db-dimensions' };
         if (props.operator === 'PIVOT') return { name: 'Pivot', icon: 'ic_db-pivot-table' };
         if (props.operator === 'VALUE_MAPPING') return { name: 'Value Mapping', icon: 'ic_db-value-mapping' };
         if (props.operator === 'ADD_LABELS') return { name: 'Additional Labels', icon: 'ic_db-additional-labels' };
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
index 7783ce38c7..0ead9cdce5 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
@@ -70,14 +70,13 @@ const state = reactive({
     }),
     invalid: computed<boolean>(() => {
         if (!state.proxyOperatorOptions.data_table_id) return true;
-        if (!state.proxyOperatorOptions.fields?.labels?.length) return true;
         if (!state.proxyOperatorOptions.fields?.column) return true;
         if (!state.proxyOperatorOptions.fields?.data) return true;
         if (!state.proxyOperatorOptions.select?.length && !state.proxyOperatorOptions.limit && state.proxyOperatorOptions?.fields?.column !== 'Date') return true;
         return false;
     }),
     columnFieldInvalid: computed<boolean>(() => {
-        if (state.labelFieldItems.length === 1) return true;
+        if (!state.labelFieldItems.length) return true;
         return false;
     }),
     valueTypeItems: computed<MenuItem[]>(() => [
@@ -204,7 +203,7 @@ const getUniqueValues = (data: Record<string, string>[], key: string): string[]
 };
 
 // Reset with changing data table
-watch(dataTableInfo, (_dataTableInfo) => {
+watch([dataTableInfo, () => state.selectedDataTable], ([_dataTableInfo]) => {
     if (_dataTableInfo.dataTableId) {
         const defaultData = cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT);
         state.selectedValueType = 'auto';
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
index b9f95c7455..366319b63a 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -136,7 +136,37 @@ const handleUpdateBasedOn = (key: string) => {
     keyInfo.value = key;
 };
 const handleUpdateOperator = (idx: number, operator: 'eq'|'regex') => {
-    casesInfo.value[idx].operator = operator;
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            operator,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
+};
+const handleUpdatePattern = (idx: number, pattern: string) => {
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            match: pattern,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
+};
+const handleUpdateValue = (idx: number, value: string) => {
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            value,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
 };
 
 // Update operator options
@@ -242,8 +272,9 @@ watch(() => state.invalid, (_invalid) => {
                                    required
                                    class="col-span-8"
                     >
-                        <p-text-input v-model="_case.match"
+                        <p-text-input :value="_case.match"
                                       block
+                                      @update:value="handleUpdatePattern(cIdx, $event)"
                         />
                     </p-field-group>
                 </div>
@@ -251,8 +282,9 @@ watch(() => state.invalid, (_invalid) => {
                                style-type="secondary"
                                required
                 >
-                    <p-text-input v-model="_case.value"
+                    <p-text-input :value="_case.value"
                                   block
+                                  @update:value="handleUpdateValue(cIdx, $event)"
                     />
                 </p-field-group>
             </div>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
index 3b59915d42..2d9452ddcf 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
@@ -99,6 +99,11 @@ const handleClickContinue = async () => {
             if (widgetGenerateState.widget?.state === 'ACTIVE') {
                 _updateParams.state = 'INACTIVE';
             }
+            if (widgetGenerateState.widget?.options?.widgetHeader) {
+                _updateParams.options = {
+                    widgetHeader: widgetGenerateState.widget?.options?.widgetHeader,
+                };
+            }
             await widgetGenerateStore.updateWidget(_updateParams);
         }
         widgetGenerateStore.setOverlayStep(2);
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
index 7007a9a42c..8660ae4b90 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -6,6 +6,7 @@ import {
 
 import { useQuery } from '@tanstack/vue-query';
 import bytes from 'bytes';
+import { sortBy } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -14,7 +15,6 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 import { byteFormatter, numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { Page } from '@/schema/_common/type';
 import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
 import type { DataTableLoadParameters } from '@/schema/dashboard/public-data-table/api-verbs/load';
@@ -34,6 +34,7 @@ import {
 } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
 import { gray, white } from '@/styles/colors';
@@ -50,13 +51,9 @@ interface PreviewTableField {
     type: 'LABEL' | 'DATA' | 'DIVIDER';
     name: string;
     sortKey?: string;
+    reference?: 'project'|'workspace'|'region'|'serviceAccount';
 }
 
-type DataTableLoadData = ListResponse<{
-    [key: string]: string|number;
-}>;
-
-
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const widgetGenerateStore = useWidgetGenerateStore();
@@ -78,11 +75,12 @@ const storeState = reactive({
 });
 
 const state = reactive({
-    data: computed<DataTableLoadData | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     labelFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(storeState.selectedDataTable?.labels_info ?? {})))),
     dataFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(storeState.selectedDataTable?.data_info ?? {})))),
     dataInfo: computed<DataInfo|undefined>(() => storeState.selectedDataTable?.data_info),
     isPivot: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    pivotColumn: computed<string|undefined>(() => storeState.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.fields?.column),
     isAutoTypeColumnPivot: computed<boolean>(() => state.isPivot && !!storeState.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.limit),
     // pivotSortKeys: computed<string[]>(() => (state.isPivot ? storeState.selectedDataTable?.sort_keys ?? [] : [])),
     fields: computed<PreviewTableField[]>(() => {
@@ -93,10 +91,25 @@ const state = reactive({
             }];
         }
 
-        // const sortBySortKeys = (targetArray: string[]): string[] => sortBy(targetArray, (item) => {
-        //     const index = state.pivotSortKeys.indexOf(item);
-        //     return index === -1 ? Infinity : index;
-        // });
+        const dataFields: PreviewTableField[] = [];
+        if (state.isPivot) {
+            const headers = state.data.order ?? [];
+            sortBy(state.dataFields, (field) => {
+                const index = headers.indexOf(field);
+                return index === -1 ? Infinity : index;
+            }).forEach((field) => {
+                dataFields.push({
+                    name: field,
+                    type: 'DATA',
+                    reference: state.pivotColumn,
+                });
+            });
+        } else {
+            dataFields.push(...state.dataFields.map((key) => ({
+                type: 'DATA',
+                name: key,
+            })));
+        }
 
         return [
             ...state.labelFields.map((key) => ({
@@ -117,10 +130,7 @@ const state = reactive({
                 type: 'DIVIDER',
                 name: '',
             },
-            ...state.dataFields.map((key) => ({
-                type: 'DATA',
-                name: key,
-            })),
+            ...dataFields,
         ];
     }),
     isSeparatedDataTable: computed(() => !Object.keys(storeState.selectedDataTable?.labels_info ?? {}).includes('Date')),
@@ -204,7 +214,8 @@ const getValue = (item, field: PreviewTableField) => {
     if (field.type === 'LABEL' && Object.keys(REFERENCE_FIELD_MAP).includes(field.name)) {
         const referenceKey = REFERENCE_FIELD_MAP[field.name];
         const referenceValueKey = item[field.name];
-        return storeState[referenceKey][referenceValueKey]?.label || storeState[referenceKey][referenceValueKey]?.name || referenceValueKey || '-';
+        const referenceItem = storeState[referenceKey]?.[referenceValueKey];
+        return referenceItem?.label || referenceItem?.name || referenceValueKey || '-';
     }
     if (field.type === 'DATA') {
         return itemValue ? valueFormatter(itemValue, field) : '-';
@@ -212,14 +223,23 @@ const getValue = (item, field: PreviewTableField) => {
     return item[field.name] || '-';
 };
 
+const getFieldName = (field: PreviewTableField) => {
+    if (field.type === 'DATA' && !!field.reference && Object.keys(REFERENCE_FIELD_MAP).includes(field.reference)) {
+        const referenceKey = REFERENCE_FIELD_MAP[field.reference];
+        const refernceItem = storeState[referenceKey]?.[field.name];
+        return refernceItem?.label || refernceItem?.name || field.name;
+    }
+    return field.name;
+};
+
 const getSortIcon = (field: PreviewTableField) => {
-    if (field.type === 'LABEL') {
-        if (!state.sortBy.some((d) => d.key === field.sortKey || d.key === field.name)) {
-            return 'ic_caret-down';
-        }
-        return state.sortBy[0]?.desc ? 'ic_caret-down-filled' : 'ic_caret-up-filled';
+    // if (field.type === 'LABEL') {
+    if (!state.sortBy.some((d) => d.key === field.sortKey || d.key === field.name)) {
+        return 'ic_caret-down';
     }
-    return '';
+    return state.sortBy[0]?.desc ? 'ic_caret-down-filled' : 'ic_caret-up-filled';
+    // }
+    // return '';
 };
 
 // const getTimeDiffSubText = (field: PreviewTableField): string => {
@@ -230,10 +250,10 @@ const getSortIcon = (field: PreviewTableField) => {
 //     return `( ${value} ${key} )`;
 // };
 
-const fetchWidgetData = async (params: DataTableLoadParameters): Promise<DataTableLoadData> => {
+const fetchWidgetData = async (params: DataTableLoadParameters): Promise<WidgetLoadResponse> => {
     const defaultFetcher = storeState.selectedDataTableId?.startsWith('private')
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, DataTableLoadData>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, DataTableLoadData>;
+        ? SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, WidgetLoadResponse>
+        : SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, WidgetLoadResponse>;
     const res = await defaultFetcher(params);
     return res;
 };
@@ -330,12 +350,11 @@ onUnmounted(() => {
                         <span v-else
                               :class="{'th-contents': true, 'data-field': field.type === 'DATA'}"
                         >
-                            {{ field.name }}
+                            {{ getFieldName(field) }}
                             <!--                            <span v-if="state.dataInfo?.[field.name]?.timediff"-->
                             <!--                                  class="timediff-sub-text"-->
                             <!--                            >{{ getTimeDiffSubText(field) }}</span>-->
-                            <p-i v-if="field.type === 'LABEL'"
-                                 :name="getSortIcon(field)"
+                            <p-i :name="getSortIcon(field)"
                                  class="sort-icon"
                                  @click="handleClickSort(field.name)"
                             />
@@ -429,11 +448,6 @@ onUnmounted(() => {
             @apply text-gray-500 float-right my-px;
             &:hover { cursor: pointer; }
         }
-        &:last-child {
-            .th-contents:not(.has-icon) {
-                padding-right: 1rem;
-            }
-        }
     }
 
     .toolbox-left-wrapper {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
index a738c85c30..6ccb7d9f58 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { cloneDeep } from 'lodash';
+import { cloneDeep, sortBy } from 'lodash';
 
 import {
     PFieldGroup, PSelectDropdown, PButton, PI, PButtonModal, PTooltip,
@@ -18,6 +18,7 @@ import NewMark from '@/common/components/marks/NewMark.vue';
 import { DATA_TABLE_OPERATOR, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
 import { CONSOLE_WIDGET_CONFIG } from '@/common/modules/widgets/_constants/widget-config-list-constant';
+import { UNSUPPORTED_CHARTS_IN_PIVOT } from '@/common/modules/widgets/_constants/widget-constant';
 import {
     getWidgetFieldComponent,
 } from '@/common/modules/widgets/_helpers/widget-component-helper';
@@ -35,7 +36,7 @@ const FORM_TITLE_MAP = {
     REQUIRED_FIELDS: 'REQUIRED_FIELDS',
     OPTIONAL_FIELDS: 'OPTIONAL_FIELDS',
 };
-const DATE_CONFIG_FIELD_KEYS = ['granularity', 'dateRange'];
+const DATE_CONFIG_FIELD_KEYS = ['granularity', 'dateFormat', 'dateRange'];
 
 interface Props {
     widgetValidationInvalid?: boolean;
@@ -44,7 +45,6 @@ interface Props {
 }
 
 type DataTableModel = PrivateDataTableModel|PublicDataTableModel;
-const UNSUPPORTED_CHARTS_IN_PIVOT = ['numberCard', 'gauge', 'geoMap', 'treemap', 'pieChart', 'colorCodedHeatmap', 'sankeyChart'];
 const props = defineProps<Props>();
 
 const widgetGenerateStore = useWidgetGenerateStore();
@@ -63,9 +63,16 @@ const state = reactive({
     defaultValidationConfig: computed(() => state.widgetConfig.meta?.defaultValidationConfig),
     widgetDefaultValidationModalVisible: false,
     formErrorModalValue: undefined as number|undefined,
-    widgetDateConfigSchemaMap: computed(() => Object.entries(state.widgetConfig.requiredFieldsSchema).filter(([key]) => DATE_CONFIG_FIELD_KEYS.includes(key))),
+    widgetDateConfigSchemaMap: computed(() => {
+        const dateConfigFields = Object.entries({
+            ...state.widgetConfig.requiredFieldsSchema,
+            ...state.widgetConfig.optionalFieldsSchema,
+        })
+            .filter(([key]) => DATE_CONFIG_FIELD_KEYS.includes(key));
+        return sortBy(dateConfigFields, ([key]) => DATE_CONFIG_FIELD_KEYS.indexOf(key));
+    }),
     widgetRequiredFieldSchemaMap: computed(() => Object.entries(state.widgetConfig.requiredFieldsSchema).filter(([key]) => !DATE_CONFIG_FIELD_KEYS.includes(key))),
-    widgetOptionalFieldSchemaMap: computed(() => Object.entries(state.widgetConfig.optionalFieldsSchema)),
+    widgetOptionalFieldSchemaMap: computed(() => Object.entries(state.widgetConfig.optionalFieldsSchema).filter(([key]) => !DATE_CONFIG_FIELD_KEYS.includes(key))),
     // display
     collapsedTitleMap: {
         [FORM_TITLE_MAP.DATE_CONFIG]: false,
@@ -148,10 +155,10 @@ const changeWidgetType = (widgetName: string) => {
     checkDefaultValidation();
 };
 
-// const checkFormDependencies = (changedFieldName: string):string[] => state.widgetConfigDependencies[changedFieldName] || [];
-
 onMounted(() => {
-    checkDefaultValidation();
+    if (widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetGenerateState.selectedWidgetName)) {
+        changeWidgetType('table');
+    } else checkDefaultValidation();
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-date-range.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-date-range.ts
index 511edccbfa..687e950a1b 100644
--- a/apps/web/src/common/modules/widgets/_composables/use-widget-date-range.ts
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-date-range.ts
@@ -103,8 +103,8 @@ export const useWidgetDateRange = (options: UseWidgetDateRangeOptions): UseWidge
                 }
             } else if (relativeDateRangeValue === 'lastQuarter') {
                 if (thisMonth >= 1 && thisMonth <= 3) {
-                    _start = `${thisYear}-10-01`;
-                    _end = `${thisYear}-12-31`;
+                    _start = `${thisYear - 1}-10-01`;
+                    _end = `${thisYear - 1}-12-31`;
                 } else if (thisMonth >= 4 && thisMonth <= 6) {
                     _start = `${thisYear}-01-01`;
                     _end = `${thisYear}-03-31`;
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 023ec455c9..12779cab26 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,6 +1,7 @@
 import type {
     AddLabelsOptions,
     ConcatOptions, EvalOptions, JoinOptions, PivotOptions, QueryOptions, ValueMappingOptions,
+    AggregateOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
@@ -21,7 +22,7 @@ export const DATA_TABLE_OPERATOR = {
     CONCAT: 'CONCAT',
     JOIN: 'JOIN',
     QUERY: 'QUERY',
-    // AGGREGATE: 'AGGREGATE',
+    AGGREGATE: 'AGGREGATE',
     EVAL: 'EVAL',
     PIVOT: 'PIVOT',
     ADD_LABELS: 'ADD_LABELS',
@@ -113,6 +114,11 @@ export const DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP = {
         conditions: [''],
         // operator: 'AND',
     } as QueryOptions,
+    AGGREGATE: {
+        data_table_id: undefined,
+        group_by: [],
+        function: {},
+    } as AggregateOptions,
     ADD_LABELS: {
         data_table_id: undefined,
         labels: { '': '' },
diff --git a/apps/web/src/common/modules/widgets/_constants/widget-constant.ts b/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
index 9b4ac0e7f6..b574d7e560 100644
--- a/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
+++ b/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
@@ -13,3 +13,5 @@ export const REFERENCE_FIELD_MAP = {
 } as const;
 
 export const WIDGET_LOAD_STALE_TIME = 1000 * 60 * 10;
+
+export const UNSUPPORTED_CHARTS_IN_PIVOT = ['gauge', 'geoMap', 'treemap', 'pieChart', 'colorCodedHeatmap', 'sankeyChart'];
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 b592ea8acf..05fcf4da90 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
@@ -278,6 +278,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
                 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),
+                AGGREGATE: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.AGGREGATE),
                 PIVOT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT),
                 ADD_LABELS: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS),
                 VALUE_MAPPING: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING),
@@ -314,7 +315,14 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
                         vars: dashboardDetailGetters.dashboardInfo?.vars || {},
                     });
                     if (state.widget?.state === 'ACTIVE') {
-                        await actions.updateWidget({ state: 'INACTIVE' });
+                        await actions.updateWidget({
+                            state: 'INACTIVE',
+                            options: {
+                                widgetHeader: {
+                                    ...state.widget?.options?.widgetHeader,
+                                },
+                            },
+                        });
                     }
                 }
                 state.dataTables = state.dataTables.map((dataTable) => (dataTable.data_table_id === result.data_table_id ? result : dataTable));
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
index 84aabb2fcc..2beb9a421b 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
@@ -1,3 +1,5 @@
+import { cloneDeep } from 'lodash';
+
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import {
     COLOR_SCHEMA, DATA_FIELD_HEATMAP_COLOR, DATE_FORMAT, DEFAULT_COMPARISON_COLOR, NUMBER_FORMAT, TABLE_DEFAULT_MINIMUM_WIDTH, WIDGET_HEIGHT,
@@ -88,7 +90,9 @@ export const widgetFieldDefaultValueMap: DefaultValueRegistry = {
     },
     groupBy: {},
     widgetHeader: {
-        toggleValue: false,
+        toggleValue: true,
+        title: '',
+        description: '',
     },
     icon: {
         toggleValue: true,
@@ -146,7 +150,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const dataFieldOptions = (_fieldsSchema.dataField?.options ?? {}) as DataFieldOptions;
 
-        const result = widgetFieldDefaultValueMap.dataField;
+        const result = cloneDeep(widgetFieldDefaultValueMap.dataField);
 
         const isPivotDataTable = dataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
         if (isPivotDataTable) { // if pivot dataTable, always multiSelectable
@@ -170,7 +174,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const formatRulesOptions = (_fieldsSchema.formatRules?.options ?? {}) as FormatRulesOptions;
 
-        let result = widgetFieldDefaultValueMap.formatRules;
+        let result = cloneDeep(widgetFieldDefaultValueMap.formatRules);
 
         if (formatRulesOptions.default || formatRulesOptions.baseColor) {
             result = {
@@ -192,7 +196,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const categoryByOptions = (_fieldsSchema.categoryBy?.options ?? {}) as CategoryByOptions;
 
-        const result = widgetFieldDefaultValueMap.categoryBy;
+        const result = cloneDeep(widgetFieldDefaultValueMap.categoryBy);
 
         const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[categoryByOptions.dataTarget] ?? {}));
 
@@ -206,7 +210,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const stackByOptions = (_fieldsSchema.stackBy?.options ?? {}) as StackByOptions;
 
-        const result = widgetFieldDefaultValueMap.categoryBy;
+        const result = cloneDeep(widgetFieldDefaultValueMap.categoryBy);
 
         const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[stackByOptions.dataTarget] ?? {}));
 
@@ -220,7 +224,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const xAxisOptions = (_fieldsSchema.xAxis?.options ?? {}) as XAxisOptions;
 
-        const result = widgetFieldDefaultValueMap.categoryBy;
+        const result = cloneDeep(widgetFieldDefaultValueMap.categoryBy);
 
         const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[xAxisOptions.dataTarget] ?? {}));
 
@@ -234,7 +238,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const yAxisOptions = (_fieldsSchema.yAxis?.options ?? {}) as YAxisOptions;
 
-        const result = widgetFieldDefaultValueMap.categoryBy;
+        const result = cloneDeep(widgetFieldDefaultValueMap.categoryBy);
 
         const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[yAxisOptions.dataTarget] ?? {}));
 
@@ -254,14 +258,14 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 colorValue: COLOR_SCHEMA[colorSchemaOptions.default],
             };
         }
-        return widgetFieldDefaultValueMap.colorSchema;
+        return cloneDeep(widgetFieldDefaultValueMap.colorSchema);
     },
     comparison: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const comparisonOptions = (_fieldsSchema.comparison?.options ?? {}) as ComparisonOptions;
 
         if (comparisonOptions.toggle) {
-            return widgetFieldDefaultValueMap.comparison;
+            return cloneDeep(widgetFieldDefaultValueMap.comparison);
         }
 
         return {
@@ -273,14 +277,14 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const tableColumnComparisonOptions = (_fieldsSchema.tableColumnComparison?.options ?? {}) as TableColumnComparisonOptions;
 
         if (tableColumnComparisonOptions.toggle) {
-            return widgetFieldDefaultValueMap.tableColumnComparison;
+            return cloneDeep(widgetFieldDefaultValueMap.tableColumnComparison);
         }
 
         return {
             toggleValue: false,
         };
     },
-    customTableColumnWidth: () => widgetFieldDefaultValueMap.customTableColumnWidth,
+    customTableColumnWidth: () => cloneDeep(widgetFieldDefaultValueMap.customTableColumnWidth),
     dataFieldHeatmapColor: (widgetConfig, dataTable) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const dataFieldheatmapColorOptions = (_fieldsSchema.dataFieldHeatmapColor?.options ?? {}) as DataFieldHeatmapColorOptions;
@@ -290,7 +294,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
         const fieldKeys = isPivotDataTable ? [columnFieldForPivot] : dataKeys;
 
-        const result: DataFieldHeatmapColorValue = widgetFieldDefaultValueMap.dataFieldHeatmapColor;
+        const result: DataFieldHeatmapColorValue = cloneDeep(widgetFieldDefaultValueMap.dataFieldHeatmapColor);
         fieldKeys.forEach((key) => {
             result[key] = {
                 colorInfo: dataFieldheatmapColorOptions?.default ?? DATA_FIELD_HEATMAP_COLOR.NONE.key,
@@ -309,24 +313,26 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
             };
         }
 
-        return widgetFieldDefaultValueMap.dateFormat;
+        return cloneDeep(widgetFieldDefaultValueMap.dateFormat);
     },
-    dateRange: () => widgetFieldDefaultValueMap.dateRange,
-    displayAnnotation: () => widgetFieldDefaultValueMap.displayAnnotation,
-    displaySeriesLabel: () => widgetFieldDefaultValueMap.displaySeriesLabel,
-    granularity: () => widgetFieldDefaultValueMap.granularity,
+    dateRange: () => cloneDeep(widgetFieldDefaultValueMap.dateRange),
+    displayAnnotation: () => cloneDeep(widgetFieldDefaultValueMap.displayAnnotation),
+    displaySeriesLabel: () => cloneDeep(widgetFieldDefaultValueMap.displaySeriesLabel),
+    granularity: () => cloneDeep(widgetFieldDefaultValueMap.granularity),
     groupBy: (widgetConfig, dataTable) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const groupByOptions = (_fieldsSchema.groupBy?.options ?? {}) as GroupByOptions;
 
-        const result = widgetFieldDefaultValueMap.groupBy;
+        const result = cloneDeep(widgetFieldDefaultValueMap.groupBy);
 
         let fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[groupByOptions.dataTarget] ?? {}));
         if (groupByOptions.fixedValue) {
             fieldKeys = fieldKeys.filter((key) => key === groupByOptions.fixedValue);
         }
 
-        result.data = groupByOptions.multiSelectable ? [fieldKeys?.[0]] : fieldKeys?.[0];
+        if (fieldKeys.length === 0) {
+            result.data = groupByOptions.multiSelectable ? [] : undefined;
+        } else result.data = groupByOptions.multiSelectable ? [fieldKeys?.[0]] : fieldKeys?.[0];
 
         if (!groupByOptions.hideCount) {
             result.count = groupByOptions.defaultMaxCount ? groupByOptions.defaultMaxCount : 5;
@@ -334,12 +340,19 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
 
         return result;
     },
-    widgetHeader: () => widgetFieldDefaultValueMap.widgetHeader,
+    widgetHeader: (widgetConfig) => {
+        const result = cloneDeep(widgetFieldDefaultValueMap.widgetHeader);
+
+        return {
+            ...result,
+            title: widgetConfig.meta.title,
+        };
+    },
     icon: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const iconOptions = (_fieldsSchema.icon?.options ?? {}) as IconOptions;
 
-        const initialValue = widgetFieldDefaultValueMap.icon;
+        const initialValue = cloneDeep(widgetFieldDefaultValueMap.icon);
 
         if (iconOptions.toggle) {
             const defaultIcon = ICON_FIELD_ITEMS.find((item) => item.name === iconOptions.default);
@@ -356,7 +369,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const legendOptions = (_fieldsSchema.legend?.options ?? {}) as LegendOptions;
 
-        const initialValue = widgetFieldDefaultValueMap.legend;
+        const initialValue = cloneDeep(widgetFieldDefaultValueMap.legend);
 
         if (legendOptions.toggle) {
             return {
@@ -375,7 +388,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 max: maxOptions.default,
             };
         }
-        return widgetFieldDefaultValueMap.max;
+        return cloneDeep(widgetFieldDefaultValueMap.max);
     },
     min: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -386,7 +399,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 min: minOptions.default,
             };
         }
-        return widgetFieldDefaultValueMap.min;
+        return cloneDeep(widgetFieldDefaultValueMap.min);
     },
     missingValue: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -397,7 +410,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 type: missingValueOptions.default,
             };
         }
-        return widgetFieldDefaultValueMap.missingValue;
+        return cloneDeep(widgetFieldDefaultValueMap.missingValue);
     },
     numberFormat: (widgetConfig, dataTable) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -408,7 +421,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
         const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
         const fieldKeys = isPivotDataTable ? [columnFieldForPivot] : dataKeys;
 
-        const result: NumberFormatValue = widgetFieldDefaultValueMap.numberFormat;
+        const result: NumberFormatValue = cloneDeep(widgetFieldDefaultValueMap.numberFormat);
         fieldKeys.forEach((key) => {
             result[key] = {
                 format: numberFormatOptions.default ?? NUMBER_FORMAT.AUTO,
@@ -426,7 +439,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
             };
         }
 
-        return widgetFieldDefaultValueMap.pieChartType;
+        return cloneDeep(widgetFieldDefaultValueMap.pieChartType);
     },
     subTotal: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -439,7 +452,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
             };
         }
 
-        return widgetFieldDefaultValueMap.subTotal;
+        return cloneDeep(widgetFieldDefaultValueMap.subTotal);
     },
     total: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -452,13 +465,13 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
             };
         }
 
-        return widgetFieldDefaultValueMap.total;
+        return cloneDeep(widgetFieldDefaultValueMap.total);
     },
     tableColumnWidth: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const tableColumnWidthOptions = (_fieldsSchema.tableColumnWidth?.options ?? {}) as TableColumnWidthOptions;
 
-        const initialValue = widgetFieldDefaultValueMap.tableColumnWidth;
+        const initialValue = cloneDeep(widgetFieldDefaultValueMap.tableColumnWidth);
 
         if (tableColumnWidthOptions.defaultMinimumWidth || tableColumnWidthOptions.defaultFixedWidth) {
             return {
@@ -478,7 +491,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 toggleValue: true,
             };
         }
-        return widgetFieldDefaultValueMap.textWrap;
+        return cloneDeep(widgetFieldDefaultValueMap.textWrap);
     },
     tooltipNumberFormat: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -489,7 +502,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 toggleValue: true,
             };
         }
-        return widgetFieldDefaultValueMap.tooltipNumberFormat;
+        return cloneDeep(widgetFieldDefaultValueMap.tooltipNumberFormat);
     },
     widgetHeight: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
@@ -500,7 +513,7 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
                 type: widgetHeightOptions.default,
             };
         }
-        return widgetFieldDefaultValueMap.widgetHeight;
+        return cloneDeep(widgetFieldDefaultValueMap.widgetHeight);
     },
     sankeyDimensions: (widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
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 e08d1a2ba4..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) => {
@@ -137,9 +145,10 @@ export const widgetValidatorRegistry: WidgetValidatorRegistry = {
         if (groupByOptions.fixedValue && fieldValue.data !== groupByOptions.fixedValue) return false;
         if (groupByOptions.hideCount && !!fieldValue.count) return false;
         if (!groupByOptions.hideCount && groupByOptions.max && groupByOptions.defaultMaxCount && (!fieldValue.count || fieldValue.count > groupByOptions.max)) return false;
-        if (groupByOptions.multiSelectable && (!Array.isArray(fieldValue.data) || !fieldValue.data.length)) return false;
+        if (groupByOptions.multiSelectable && !Array.isArray(fieldValue.data)) return false;
         if (groupByOptions.excludeDateField && fieldValue.data === 'Date') return false;
-        return !!fieldValue.data;
+        // return !!fieldValue.data;
+        return true;
     },
     sankeyDimensions: (fieldValue: SankeyDimensionsValue, widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
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..04c0eadf86 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;
@@ -117,14 +116,20 @@ export default class WidgetFieldValueManager {
 
     updateWidgetType(newWidgetConfig: WidgetConfig): void {
         this.updateWidgetConfig(newWidgetConfig);
-        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue({}, newWidgetConfig, this.dataTable));
+        const originDataWithExistingHeaderValue = {
+            widgetHeader: this.originData.value.widgetHeader,
+        };
+        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue(originDataWithExistingHeaderValue, newWidgetConfig, this.dataTable));
         this.validationErrors = {};
     }
 
     updateDataTableAndOriginData(dataTable: PublicDataTableModel|PrivateDataTableModel, data: WidgetFieldValueMap): void {
         this.dataTable = dataTable;
-        this.originData.value = { ...data };
-        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue(data, this.widgetConfig, dataTable));
+        this.originData.value = {
+            ...data,
+            widgetHeader: this.originData.value.widgetHeader,
+        };
+        this.updateModifiedData(WidgetFieldValueManager.applyDefaultValue(this.originData.value, this.widgetConfig, dataTable));
         this.validationErrors = {};
     }
 }
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
index fe5dcef4ef..d7a39a5e56 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
@@ -274,10 +274,10 @@ watch(() => state.granularity, () => {
                         <div v-if="state.fieldValue?.options?.value === 'custom'"
                              class="custom-advanced-range-selector"
                         >
-                            <div class="select-wrapper">
+                            <div class="select-wrapper flex gap-2">
                                 <!--Inherit CASE-->
                                 <template v-if="state.fieldValue?.inherit">
-                                    <p-field-group class="selector-field-group"
+                                    <p-field-group class="selector-field-group-custom"
                                                    required
                                     >
                                         <template #label>
@@ -295,14 +295,14 @@ watch(() => state.granularity, () => {
                                                            @select="handleSelectCustomValue('start', $event)"
                                         />
                                     </p-field-group>
-                                    <p-field-group class="selector-field-group"
+                                    <p-field-group class="selector-field-group-custom"
                                                    required
                                     >
                                         <template #label>
                                             <span class="field-label">
                                                 {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }}
                                                 <span class="granularity-unit">
-                                                    ({{ GRANULARITY_UNIT_MAP[state.granularity]?.sigular }})
+                                                    ({{ GRANULARITY_UNIT_MAP[state.granularity]?.singular }})
                                                 </span>
                                             </span>
                                         </template>
@@ -416,100 +416,87 @@ watch(() => state.granularity, () => {
                         <div v-else-if="state.fieldValue?.options?.value === 'advanced'"
                              class="custom-advanced-range-selector"
                         >
-                            <div class="select-wrapper">
-                                <p-field-group class="selector-field-group"
-                                               required
-                                >
-                                    <template #label>
+                            <div class="select-wrapper flex gap-2 flex-col">
+                                <div class="selector-field-group-advanced rounded-lg">
+                                    <div class="selector-header flex gap-1 items-center bg-gray-100 rounded-t-lg">
                                         <span class="field-label">
-                                            {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.START') }}
+                                            {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.START') }} :
                                         </span>
-                                    </template>
-                                    <div class="advanced-field-content">
-                                        <div class="range-preview">
+                                        <span class="range-preview">
                                             {{ dateRange.start }}
-                                        </div>
-                                        <div class="advanced-content-wrapper">
-                                            <div class="operator">
-                                                <span>Today</span>
-                                                <p-select-dropdown class="advanced-selector"
-                                                                   :menu="state.advancedOperatorMenuItems"
-                                                                   :selected="state.fieldValue?.options?.start_operator"
-                                                                   :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
-                                                                   @update:selected="handleSelectAdvancedOperator('start_operator', $event)"
-                                                >
-                                                    <template #dropdown-button="item">
-                                                        <div class="selected">
-                                                            <p-i :name="item?.icon"
-                                                                 width="1rem"
-                                                                 height="1rem"
-                                                            />
-                                                            <span>{{ item?.label }}</span>
-                                                        </div>
-                                                    </template>
-                                                </p-select-dropdown>
-                                            </div>
-                                            <div class="value">
-                                                <p-text-input class="advanced-input"
-                                                              type="number"
-                                                              :value="state.fieldValue?.options?.start"
-                                                              :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
-                                                              @update:value="handleUpdateAdvancedValue('start', $event)"
-                                                />
-                                                <span>{{ GRANULARITY_UNIT_MAP[state.granularity]?.plural }}</span>
-                                            </div>
+                                        </span>
+                                    </div>
+                                    <div class="advanced-field-content">
+                                        <div class="advanced-content-wrapper flex gap-1 items-center">
+                                            <p-select-dropdown class="advanced-selector"
+                                                               :menu="state.advancedOperatorMenuItems"
+                                                               :selected="state.fieldValue?.options?.start_operator"
+                                                               :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                               @update:selected="handleSelectAdvancedOperator('start_operator', $event)"
+                                            >
+                                                <template #dropdown-button="item">
+                                                    <div class="selected">
+                                                        <p-i :name="item?.icon"
+                                                             width="1rem"
+                                                             height="1rem"
+                                                        />
+                                                        <span>{{ item?.label }}</span>
+                                                    </div>
+                                                </template>
+                                            </p-select-dropdown>
+                                            <p-text-input class="advanced-input"
+                                                          type="number"
+                                                          size="md"
+                                                          :value="state.fieldValue?.options?.start"
+                                                          :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                          @update:value="handleUpdateAdvancedValue('start', $event)"
+                                            />
+                                            <span class="granularity-unit">{{ GRANULARITY_UNIT_MAP[state.granularity]?.plural }}</span>
                                         </div>
                                     </div>
-                                </p-field-group>
-                                <p-field-group class="selector-field-group"
-                                               required
-                                >
-                                    <template #label>
+                                </div>
+                                <div class="selector-field-group-advanced  rounded-lg">
+                                    <div class="selector-header flex gap-1 items-center bg-gray-100 rounded-t-lg">
                                         <span class="field-label">
-                                            {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }}
+                                            {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }} :
                                         </span>
-                                    </template>
-                                    <div class="advanced-field-content">
-                                        <div class="range-preview">
+                                        <span class="range-preview">
                                             {{ dateRange.end }}
-                                        </div>
-                                        <div class="advanced-content-wrapper">
-                                            <div class="operator">
-                                                <span>Today</span>
-                                                <p-select-dropdown class="advanced-selector"
-                                                                   :menu="state.advancedOperatorMenuItems"
-                                                                   :selected="state.fieldValue?.options?.end_operator"
-                                                                   :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
-                                                                   @update:selected="handleSelectAdvancedOperator('end_operator', $event)"
-                                                >
-                                                    <template #dropdown-button="item">
-                                                        <div class="selected">
-                                                            <p-i :name="item?.icon"
-                                                                 width="1rem"
-                                                                 height="1rem"
-                                                            />
-                                                            <span>{{ item?.label }}</span>
-                                                        </div>
-                                                    </template>
-                                                </p-select-dropdown>
-                                            </div>
-                                            <div class="value">
-                                                <p-text-input class="advanced-input"
-                                                              type="number"
-                                                              :value="state.fieldValue?.options?.end"
-                                                              :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
-                                                              @update:value="handleUpdateAdvancedValue('end', $event)"
-                                                />
-                                                <span>{{ GRANULARITY_UNIT_MAP[state.granularity]?.plural }}</span>
-                                            </div>
+                                        </span>
+                                    </div>
+                                    <div class="advanced-field-content">
+                                        <div class="advanced-content-wrapper flex gap-1 items-center">
+                                            <p-select-dropdown class="advanced-selector"
+                                                               :menu="state.advancedOperatorMenuItems"
+                                                               :selected="state.fieldValue?.options?.end_operator"
+                                                               :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                               @update:selected="handleSelectAdvancedOperator('end_operator', $event)"
+                                            >
+                                                <template #dropdown-button="item">
+                                                    <div class="selected">
+                                                        <p-i :name="item?.icon"
+                                                             width="1rem"
+                                                             height="1rem"
+                                                        />
+                                                        <span>{{ item?.label }}</span>
+                                                    </div>
+                                                </template>
+                                            </p-select-dropdown>
+                                            <p-text-input class="advanced-input"
+                                                          type="number"
+                                                          :value="state.fieldValue?.options?.end"
+                                                          :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                          @update:value="handleUpdateAdvancedValue('end', $event)"
+                                            />
+                                            <span class="granularity-unit">{{ GRANULARITY_UNIT_MAP[state.granularity]?.plural }}</span>
                                         </div>
                                     </div>
-                                </p-field-group>
+                                </div>
                             </div>
                             <p v-if="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
                                class="invalid-text"
                             >
-                                checkInvalidCustomValue(state.fieldValue, state.granularity).text }}
+                                {{ checkInvalidCustomValue(state.fieldValue, state.granularity).text }}
                             </p>
                         </div>
                         <div v-else
@@ -554,8 +541,7 @@ watch(() => state.granularity, () => {
                 }
                 .custom-advanced-range-selector {
                     .select-wrapper {
-                        @apply flex gap-2;
-                        .selector-field-group {
+                        .selector-field-group-custom {
                             width: calc(50% - 0.25rem);
                             .field-label {
                                 @apply text-label-sm text-gray-900 font-bold;
@@ -563,22 +549,23 @@ watch(() => state.granularity, () => {
                                     @apply text-gray-500 font-normal;
                                 }
                             }
-                            .advanced-field-content {
-                                @apply rounded-l;
+                        }
+                        .selector-field-group-advanced {
+                            width: 100%;
+                            .selector-header {
+                                padding: 0.5rem 0.75rem;
+                                .field-label {
+                                    @apply text-label-sm text-gray-900 font-bold;
+                                }
                                 .range-preview {
-                                    @apply bg-gray-100 text-label-md text-gray-900 rounded-t-lg;
-                                    padding: 0.375rem 0.75rem;
+                                    @apply text-label-md text-gray-900;
                                 }
+                            }
+                            .advanced-field-content {
+                                @apply rounded-l;
                                 .advanced-content-wrapper {
                                     @apply border border-gray-150 rounded-b-lg;
                                     padding: 0.75rem 0.5rem;
-                                    .operator {
-                                        @apply flex items-center gap-1 flex-wrap;
-                                        margin-bottom: 0.25rem;
-                                    }
-                                    .value {
-                                        @apply flex items-center gap-1 flex-wrap;
-                                    }
                                     .advanced-selector {
                                         @apply flex-1;
                                         .selected {
@@ -589,6 +576,9 @@ watch(() => state.granularity, () => {
                                         @apply flex-1;
                                         min-width: 6.5rem;
                                     }
+                                    .granularity-unit {
+                                        @apply text-label-md text-gray-900;
+                                    }
                                 }
                             }
                         }
@@ -621,4 +611,11 @@ watch(() => state.granularity, () => {
 :deep(.p-datetime-picker) {
     width: 100%;
 }
+
+/* custom design-system component - p-field-group */
+:deep(.p-text-input) {
+    .input-container {
+        max-height: 2rem;
+    }
+}
 </style>
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/_widget-fields/header/WidgetHeaderField.vue b/apps/web/src/common/modules/widgets/_widget-fields/header/WidgetHeaderField.vue
index b8ca355f65..d78191f1e7 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/header/WidgetHeaderField.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/header/WidgetHeaderField.vue
@@ -36,7 +36,6 @@ const state = reactive({
 
 /* Event */
 const handleToggleWidgetHeader = (value: boolean) => {
-    console.debug('[[HEADER]] - toggle', value);
     if (value) {
         props.fieldManager.setFieldValue(FIELD_KEY, {
             toggleValue: true,
@@ -52,8 +51,6 @@ const handleToggleWidgetHeader = (value: boolean) => {
     }
 };
 const handleUpdateValue = (key: string, value: string) => {
-    console.debug('[[HEADER]] - value', key, value);
-
     props.fieldManager.setFieldValue(FIELD_KEY, {
         ...state.fieldValue,
         [key]: value?.trim() || '',
diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/widget-config.ts
index 80d23a65f9..33b14aa037 100644
--- a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/widget-config.ts
@@ -6,6 +6,9 @@ const clusteredColumnChart: WidgetConfig = {
     meta: {
         title: 'Clustered Column Chart',
         sizes: ['md', 'full'],
+        defaultValidationConfig: {
+            defaultMaxCount: 1,
+        },
     },
     requiredFieldsSchema: {
         granularity: {},
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 40bfcb453f..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
@@ -19,7 +19,6 @@ const colorCodedHeatmap: WidgetConfig = {
             options: {
                 dataTarget: 'labels_info',
                 hideCount: true,
-                defaultIndex: 0,
                 excludeDateField: true,
             },
         },
@@ -27,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',
             },
diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/heatmap/widget-config.ts
index 6355a0becd..22d15fb752 100644
--- a/apps/web/src/common/modules/widgets/_widgets/heatmap/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/heatmap/widget-config.ts
@@ -18,7 +18,6 @@ const heatmap: WidgetConfig = {
                 dataTarget: 'labels_info',
                 defaultMaxCount: 10,
                 max: 10,
-                defaultIndex: 0,
             },
         },
         dataField: {
diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
index e88ac0707d..be3222bea5 100644
--- a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
@@ -261,8 +261,9 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
                 formatter: (p) => {
                     if (!p.value) return '';
                     const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                    const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _dataFields;
+                    const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _dataField;
                     const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
+
                     return getFormattedNumber(p.value, numberFormat, _unit);
                 },
             },
diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/line-chart/widget-config.ts
index e53f780682..323d28ddf6 100644
--- a/apps/web/src/common/modules/widgets/_widgets/line-chart/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/line-chart/widget-config.ts
@@ -6,6 +6,9 @@ const lineChart: WidgetConfig = {
     meta: {
         title: 'Line Chart',
         sizes: ['md', 'full'],
+        defaultValidationConfig: {
+            defaultMaxCount: 1,
+        },
     },
     requiredFieldsSchema: {
         granularity: {},
diff --git a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
index 6cc5f98a00..b665c3c69e 100644
--- a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
@@ -23,7 +23,9 @@ import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
 import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
+import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
+import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
@@ -64,12 +66,19 @@ const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
     previousLoading: false,
+    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResults.value?.[0].data || null),
     previousData: computed<WidgetLoadResponse | null>(() => queryResults.value?.[1]?.data || null),
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
-    previousValue: computed<number>(() => state.previousData?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] ?? 0),
-    currentValue: computed<number>(() => state.data?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] ?? 0),
+    previousValue: computed<number>(() => {
+        if (state.isPivotDataTable) return state.previousData?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
+        return state.previousData?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] ?? 0;
+    }),
+    currentValue: computed<number>(() => {
+        if (state.isPivotDataTable) return state.data?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
+        return state.data?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] ?? 0;
+    }),
     valueText: computed<string|undefined>(() => getFormattedNumber(state.currentValue, widgetOptionsState.numberFormatInfo?.[widgetOptionsState.dataFieldInfo?.data as string], state.unit)),
 
     iconName: computed<string|undefined>(() => widgetOptionsState.iconInfo?.icon?.name),
diff --git a/apps/web/src/common/modules/widgets/_widgets/pie-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/pie-chart/widget-config.ts
index 6435b00537..d7a7278315 100644
--- a/apps/web/src/common/modules/widgets/_widgets/pie-chart/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/pie-chart/widget-config.ts
@@ -19,7 +19,6 @@ const pieChart: WidgetConfig = {
                 dataTarget: 'labels_info',
                 defaultMaxCount: 10,
                 max: 15,
-                defaultIndex: 0,
             },
         },
         pieChartType: {
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-area-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/stacked-area-chart/widget-config.ts
index 2a56e26056..23ff5b1abb 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-area-chart/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-area-chart/widget-config.ts
@@ -6,6 +6,9 @@ const stackedAreaChart: WidgetConfig = {
     meta: {
         title: 'Area Chart',
         sizes: ['md', 'full'],
+        defaultValidationConfig: {
+            defaultMaxCount: 1,
+        },
     },
     requiredFieldsSchema: {
         granularity: {},
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts
index d05d67f2c4..e2a714545a 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts
@@ -18,7 +18,6 @@ const stackedHorizontalBarChart: WidgetConfig = {
                 dataTarget: 'labels_info',
                 defaultMaxCount: 4,
                 max: 8,
-                defaultIndex: 0,
                 excludeDateField: true,
             },
         },
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
index 3bc339732f..23a73bf0f1 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
@@ -216,7 +216,7 @@ const getHeatmapColorStyle = (item: TableDataItem, field: TableWidgetField) => {
     const BASE_OPACITY = 0.1;
     const _style: Record<string, string> = {};
     const heatmapSkipCondition = field.fieldInfo?.type === 'labelField'
-        || field?.fieldInfo?.additionalType === 'comparison' || field.name === SUB_TOTAL_NAME;
+        || field.name === SUB_TOTAL_NAME;
     if (heatmapSkipCondition) return _style;
 
     const _dataField = field.name;
@@ -327,8 +327,8 @@ const getFieldWidth = (field: TableWidgetField): string|undefined => {
                             'last-label': colIndex === props.fields.filter((_field) => _field.fieldInfo?.type === 'labelField').length - 1,
                             'sub-total': field.name === SUB_TOTAL_NAME,
                             'sub-total-freeze': field.name === SUB_TOTAL_NAME && props.subTotalInfo?.freeze,
-                            'total': item[props.fields[0].name] === 'Total' && props.items?.length === rowIndex + 1,
-                            'total-freeze': item[props.fields[0].name] === 'Total' && props.items?.length === rowIndex + 1 && props.totalInfo?.freeze,
+                            'total': (item[props.fields[0].name] === 'Total' || props.totalInfo?.toggleValue) && props.items?.length === rowIndex + 1,
+                            'total-freeze': (item[props.fields[0].name] === 'Total' || props.totalInfo?.toggleValue) && props.items?.length === rowIndex + 1 && props.totalInfo?.freeze,
                         }"
                         :style="{
                             minWidth: getFieldMinWidth(field),
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 cc753edd95..f73cea4396 100644
--- a/apps/web/src/common/modules/widgets/types/widget-model.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-model.ts
@@ -75,8 +75,12 @@ export interface QueryOptions {
 }
 
 export interface AggregateOptions {
-    data_table_id: string;
+    data_table_id?: string;
     group_by: string[];
+    function: AggregateFunction;
+}
+export interface AggregateFunction {
+    [key: string]: 'sum'|'max'|'min'|'mean';
 }
 
 export interface EvalOptions {
diff --git a/apps/web/src/lib/file-manager/index.ts b/apps/web/src/lib/file-manager/index.ts
index 9bc7824424..02bbf1f222 100644
--- a/apps/web/src/lib/file-manager/index.ts
+++ b/apps/web/src/lib/file-manager/index.ts
@@ -1,29 +1,30 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ResourceGroupType } from '@/schema/_common/type';
 import type { FileModel } from '@/schema/file-manager/model';
 
+import type { FileManagerResourceGroupType } from '@/lib/file-manager/type';
+
 import type { Attachment } from '@/common/components/editor/extensions/image/type';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 
-type FileManagerResourceGroupType = Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'USER'>;
-
-
-const uploadFile = async (file: File, resourceGroup: FileManagerResourceGroupType): Promise<FileModel> => {
+const uploadFile = async (file: File, resourceGroup: FileManagerResourceGroupType, resourceId?: string): Promise<FileModel> => {
     const formData = new FormData();
-    formData.append('files', file);
-
+    formData.append('file', file);
     let resourceGroupPath: string;
+    let params = '';
     if (resourceGroup === 'DOMAIN') {
         resourceGroupPath = 'domain';
     } else if (resourceGroup === 'WORKSPACE') {
         resourceGroupPath = 'workspace';
     } else if (resourceGroup === 'USER') {
         resourceGroupPath = 'user';
+    } else if (resourceGroup === 'PROJECT') {
+        resourceGroupPath = 'project';
+        params = resourceId ? `?project_id=${resourceId}` : '';
     } else { resourceGroupPath = 'public'; }
 
-    const response = await SpaceConnector.restClient.post(`/files/${resourceGroupPath}/upload`, formData, {
+    const response = await SpaceConnector.restClient.post(`/files/${resourceGroupPath}/upload${params}`, formData, {
         headers: {
             'Content-Type': 'multipart/form-data',
         },
@@ -41,13 +42,15 @@ export const getFileDownloadUrl = (fileId: string, resourceGroup: FileManagerRes
         resourceGroupPath = 'workspace';
     } else if (resourceGroup === 'USER') {
         resourceGroupPath = 'user';
+    } else if (resourceGroup === 'PROJECT') {
+        resourceGroupPath = 'project';
     } else { resourceGroupPath = 'public'; }
 
     return `${baseUri}/files/${resourceGroupPath}/${fileId}?token=${SpaceConnector.getAccessToken()}`;
 };
-export const uploadFileAndGetFileInfo = async (file: File, resourceGroup: FileManagerResourceGroupType): Promise<Attachment> => {
+export const uploadFileAndGetFileInfo = async (file: File, resourceGroup: FileManagerResourceGroupType, resourceId?: string): Promise<Attachment> => {
     try {
-        const fileModel = await uploadFile(file, resourceGroup);
+        const fileModel = await uploadFile(file, resourceGroup, resourceId);
         return {
             downloadUrl: getFileDownloadUrl(fileModel.file_id, resourceGroup),
             fileId: fileModel.file_id,
@@ -55,7 +58,7 @@ export const uploadFileAndGetFileInfo = async (file: File, resourceGroup: FileMa
     } catch (e) {
         ErrorHandler.handleError(e);
         return {
-            downloadUrl: `${window.location.origin}/images/no-image.png`,
+            downloadUrl: '',
             fileId: '',
         };
     }
diff --git a/apps/web/src/lib/file-manager/type.ts b/apps/web/src/lib/file-manager/type.ts
new file mode 100644
index 0000000000..12f05e0248
--- /dev/null
+++ b/apps/web/src/lib/file-manager/type.ts
@@ -0,0 +1,3 @@
+import type { ResourceGroupType } from '@/schema/_common/type';
+
+export type FileManagerResourceGroupType = ResourceGroupType|'USER'|'PUBLIC';
diff --git a/apps/web/src/lib/helper/file-download-helper/index.ts b/apps/web/src/lib/helper/file-download-helper/index.ts
index 6a90fa70f1..a8b99ea6d9 100644
--- a/apps/web/src/lib/helper/file-download-helper/index.ts
+++ b/apps/web/src/lib/helper/file-download-helper/index.ts
@@ -113,7 +113,7 @@ export const downloadExcelByExportFetcher = async (excelExportFetcher:() => Prom
     try {
         const exportResponse:ExportResponse = await excelExportFetcher();
         if (exportResponse) {
-            await downloadByFileUrl(exportResponse.download_url);
+            await downloadByFileUrl(`${exportResponse.download_url}?token=${SpaceConnector.getAccessToken()}`);
             setTimeout(() => {
                 showSuccessMessage(i18n.t('COMMON.EXCEL.ALT_S_DOWNLOAD_SUCCESS'), '');
             }, 500);
diff --git a/apps/web/src/lib/variable-models/_base/resource-variable-model.ts b/apps/web/src/lib/variable-models/_base/resource-variable-model.ts
index 9aca7f87d9..966d1691bc 100644
--- a/apps/web/src/lib/variable-models/_base/resource-variable-model.ts
+++ b/apps/web/src/lib/variable-models/_base/resource-variable-model.ts
@@ -26,9 +26,9 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
         nameKey: 'name',
     };
 
-    #response: ListResponse = { results: [] };
+    #response: ListResponse<T> = { results: [] };
 
-    #fetcher?: ReturnType<typeof getCancellableFetcher<object, { results?: string[]; total_count?: number }>>;
+    #fetcher?: ReturnType<typeof getCancellableFetcher<object, { results?: T[]|string[]; total_count?: number }>>;
 
     constructor(config: VariableModelConstructorConfig = {}) {
         if (config.key) this._meta.key = config.key;
@@ -39,7 +39,7 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
         this.#fetcher = this.#getFetcher();
     }
 
-    nameFormatter(data: any): string {
+    nameFormatter(data: T): string {
         return data[this._meta.nameKey];
     }
 
@@ -77,7 +77,7 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
         return [this._meta.idKey, this._meta.nameKey];
     }
 
-    #getFetcher(dataKey?: string): ReturnType<typeof getCancellableFetcher<object, { results?: string[]; total_count?: number }>>|undefined {
+    #getFetcher(dataKey?: string): ReturnType<typeof getCancellableFetcher<object, { results?: T[]|string[]; total_count?: number }>>|undefined {
         if (!this._meta.resourceType) return undefined;
         const apiPath = this._meta.resourceType.split('.').map((d) => camelCase(d));
 
@@ -150,7 +150,7 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
                 v: query.search ?? '',
                 o: '' as ConsoleFilterOperator,
             }));
-            apiQueryHelper.setFilters(searchFilters);
+            apiQueryHelper.setOrFilters(searchFilters);
         }
         if (query.start !== undefined && query.limit !== undefined) {
             apiQueryHelper.setPage(query.start, query.limit);
@@ -170,7 +170,7 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
         };
     }
 
-    async list(query: ListQuery = {}): Promise<ListResponse> {
+    async list(query: ListQuery = {}): Promise<ListResponse<T>> {
         try {
             if (!this.#fetcher) {
                 this.#fetcher = this.#getFetcher();
@@ -185,7 +185,7 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
                     more = (query.start * query.limit) < response.total_count;
                 }
                 this.#response = {
-                    results: response.results ? response.results.map((d) => ({ key: d[this._meta.idKey], name: this.nameFormatter(d) })) : [],
+                    results: response.results ? response.results.map((d) => ({ key: d[this._meta.idKey], name: this.nameFormatter(d), data: d })) : [],
                     more,
                 };
             }
@@ -196,7 +196,7 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
         }
     }
 
-    stat(dataKey: string, presetValues?: string[]): (query?: ListQuery) => Promise<ListResponse> {
+    stat(dataKey: string, presetValues?: string[]): (query?: ListQuery) => Promise<ListResponse<T>> {
         const _dataKey = dataKey;
         return async (query: ListQuery = {}) => {
             try {
@@ -216,11 +216,11 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
                     const _presetValues = presetValues;
                     const _resultsWithPreset = [
                         ...(query.start === 1 ? (_presetValues ?? []).map((d) => ({ name: d, key: d })) : []),
-                        ...(response.results?.filter((d) => !_presetValues?.includes(d)).map((d) => ({ key: d, name: d })) ?? []),
+                        ...((response.results as string[])?.filter((d) => !_presetValues?.includes(d)).map((d) => ({ key: d, name: d })) ?? []),
                     ];
 
                     this.#response = {
-                        results: _presetValues ? _resultsWithPreset : (response.results ?? []).map((d) => ({ key: d, name: d })),
+                        results: _presetValues ? _resultsWithPreset : (response.results ?? []).map((d) => ({ key: d, name: d, data: d })),
                         more,
                     };
                 }
diff --git a/apps/web/src/lib/variable-models/_base/types.ts b/apps/web/src/lib/variable-models/_base/types.ts
index 76ee2e9e06..86d940a829 100644
--- a/apps/web/src/lib/variable-models/_base/types.ts
+++ b/apps/web/src/lib/variable-models/_base/types.ts
@@ -77,12 +77,13 @@ export interface ListQuery {
     filters?: string[]; // to filter selected items
     options?: Record<string, any>; // for custom options by config
 }
-export interface ListResponse {
-    results: Value[];
+export interface ListResponse<T=any> {
+    results: Value<T>[];
     more?: boolean;
 }
-export interface Value {
+export interface Value<T=any> {
     key: string;
     name: string;
+    data?: T;
 }
 
diff --git a/apps/web/src/lib/variable-models/managed-model/resource-model/cloud-service-variable-model.ts b/apps/web/src/lib/variable-models/managed-model/resource-model/cloud-service-variable-model.ts
index c8983a5c3f..3b8f650afb 100644
--- a/apps/web/src/lib/variable-models/managed-model/resource-model/cloud-service-variable-model.ts
+++ b/apps/web/src/lib/variable-models/managed-model/resource-model/cloud-service-variable-model.ts
@@ -15,8 +15,16 @@ export default class CloudServiceVariableModel extends ResourceVariableModel<Clo
         resourceType: 'inventory.CloudService',
         idKey: 'cloud_service_id',
         nameKey: 'name',
+        _only: ['cloud_service_id', 'name', 'provider', 'cloud_service_group', 'cloud_service_type', 'reference.resource_id', 'ip_addresses'],
+        _searchTargets: ['name', 'reference.resource_id', 'ip_addresses'],
     };
 
+    nameFormatter(data): string {
+        const name: string|undefined = data[this._meta.nameKey];
+        const resourceId: string = data.reference?.resource_id; // resourceId is always exist
+        return name ? `${name} (${resourceId})` : resourceId;
+    }
+
     constructor(config: VariableModelConstructorConfig = {}) {
         super(config);
         this._meta = CloudServiceVariableModel.meta;
diff --git a/apps/web/src/lib/variable-models/variable-model-menu-handler.ts b/apps/web/src/lib/variable-models/variable-model-menu-handler.ts
index 1a65d36334..65cd9d018f 100644
--- a/apps/web/src/lib/variable-models/variable-model-menu-handler.ts
+++ b/apps/web/src/lib/variable-models/variable-model-menu-handler.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue';
 import { isRef } from 'vue';
 
-import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-context-menu-attach/use-context-menu-attach';
 
 import type { VariableModel } from '@/lib/variable-models/_base/types';
 
@@ -19,7 +19,12 @@ const _getTitle = (modelInfo: VariableModelMenuHandlerInfo) => {
 };
 
 type Options = Record<string, any>;
-export const getVariableModelMenuHandler = (variableModelInfoList: VariableModelMenuHandlerInfo[], options: Options|Ref<Options> = {}): AutocompleteHandler => {
+interface Item<T> {
+    label: string;
+    name: string;
+    data: T;
+}
+export const getVariableModelMenuHandler = <T=any>(variableModelInfoList: VariableModelMenuHandlerInfo[], options: Options|Ref<Options> = {}): MenuAttachHandler<Item<T>> => {
     const _variableModelInfoList = variableModelInfoList;
     return async (inputText: string, pageStart, pageLimit, filters, resultIndex) => {
         const _query = {
@@ -42,6 +47,7 @@ export const getVariableModelMenuHandler = (variableModelInfoList: VariableModel
                 results: result.results.map((d) => ({
                     name: d.key,
                     label: d.name,
+                    data: d.data,
                 })),
                 more: result.more,
                 title: _getTitle(_variableModelInfoList[resIndex]),
@@ -68,7 +74,7 @@ export const getVariableModelMenuHandler = (variableModelInfoList: VariableModel
             if (i !== resultIndex) return { results: [], title: _getTitle(modelInfo) };
             return {
                 results: response.results.map((d) => ({
-                    name: d.key, label: d.name,
+                    name: d.key, label: d.name, data: d.data,
                 })),
                 more: response.more,
                 title: _getTitle(modelInfo),
diff --git a/apps/web/src/schema/_common/type.ts b/apps/web/src/schema/_common/type.ts
index fae3902b32..7857281650 100644
--- a/apps/web/src/schema/_common/type.ts
+++ b/apps/web/src/schema/_common/type.ts
@@ -6,3 +6,5 @@ export interface Page {
     start: number;
     limit: number;
 }
+
+export type ContentsType = 'html' | 'markdown' | 'plain';
diff --git a/apps/web/src/schema/board/post/model.ts b/apps/web/src/schema/board/post/model.ts
index f68e87b2e9..2c8f92433a 100644
--- a/apps/web/src/schema/board/post/model.ts
+++ b/apps/web/src/schema/board/post/model.ts
@@ -1,9 +1,10 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType, ContentsType } from '@/schema/_common/type';
 import type { PostBoardType } from '@/schema/board/post/type';
 import type { FileModel } from '@/schema/file-manager/model';
 
 export interface PostModel {
     board_type: PostBoardType;
+    contents_type: ContentsType;
     post_id: string;
     category: string;
     title: string;
diff --git a/apps/web/src/schema/opsflow/event/model.ts b/apps/web/src/schema/opsflow/event/model.ts
index 81528519d8..5cfd995baa 100644
--- a/apps/web/src/schema/opsflow/event/model.ts
+++ b/apps/web/src/schema/opsflow/event/model.ts
@@ -5,8 +5,8 @@ export interface EventModel {
     event_type: EventType;
     name: string;
     description: string;
-    user_type: 'USER'|'APP'; // TODO: replace with UserType
-    user_id: string;
+    created_type: string;
+    created_by: string;
     additional_info: EventAdditionalInfo;
     task_id: string;
     project_id: string;
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
index 56c69f5b39..f8f400e4a2 100644
--- a/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
@@ -1,11 +1,10 @@
 import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
 import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
 
 export interface TaskTypeCreateParameters {
     name: string;
     description?: string;
-    scope?: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
+    require_project?: boolean;
     fields?: TaskField[];
     assignee_pool?: string[];
     tags?: Tags;
diff --git a/apps/web/src/schema/opsflow/task-type/model.ts b/apps/web/src/schema/opsflow/task-type/model.ts
index 075200b2ea..23113a3c40 100644
--- a/apps/web/src/schema/opsflow/task-type/model.ts
+++ b/apps/web/src/schema/opsflow/task-type/model.ts
@@ -1,12 +1,11 @@
 import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
 import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
 
 export interface TaskTypeModel {
     task_type_id: string;
     name: string;
     description: string;
-    scope: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
+    require_project: boolean;
     fields: TaskField[];
     assignee_pool?: string[];
     tags: Tags;
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/create.ts b/apps/web/src/schema/opsflow/task/api-verbs/create.ts
index c098169773..95babaecfe 100644
--- a/apps/web/src/schema/opsflow/task/api-verbs/create.ts
+++ b/apps/web/src/schema/opsflow/task/api-verbs/create.ts
@@ -1,4 +1,3 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
 import type { MentionTargets } from '@/schema/opsflow/comment/type';
 import type { TaskPriority } from '@/schema/opsflow/task/type';
 
@@ -12,6 +11,5 @@ export interface TaskCreateParameters {
     mentions?: MentionTargets;
     assignee?: string;
     data?: Record<string, any>;
-    project_id?: string;
-    resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
+    project_id: string;
 }
diff --git a/apps/web/src/schema/opsflow/task/model.ts b/apps/web/src/schema/opsflow/task/model.ts
index 2d561292b2..9d7ed0c9b8 100644
--- a/apps/web/src/schema/opsflow/task/model.ts
+++ b/apps/web/src/schema/opsflow/task/model.ts
@@ -1,4 +1,3 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
 import type { FileModel } from '@/schema/file-manager/model';
 import type { TaskPriority, TaskStatusType } from '@/schema/opsflow/task/type';
 
@@ -7,6 +6,7 @@ export interface TaskModel {
     name: string;
     status_id: string;
     status_type: TaskStatusType;
+    related_assets?: string[];
     priority: TaskPriority;
     description: string;
     data: Record<string, any>;
@@ -14,8 +14,7 @@ export interface TaskModel {
     assignee: string;
     task_type_id: string;
     category_id: string;
-    project_id?: string;
-    resource_group: Extract<ResourceGroupType, 'WORKSPACE' | 'PROJECT'>;
+    project_id: string;
     workspace_id: string;
     domain_id: string;
     created_by: string;
diff --git a/apps/web/src/services/iam/components/UserManagementAddModal.vue b/apps/web/src/services/iam/components/UserManagementAddModal.vue
index 686983cd2d..672d83f90d 100644
--- a/apps/web/src/services/iam/components/UserManagementAddModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddModal.vue
@@ -63,7 +63,7 @@ const state = reactive({
             return baseCondition;
         }
         const baseCondition = state.userList.length === 0 || isEmpty(state.role);
-        if (state.localUserItem.length > 0 && !state.isResetPassword) {
+        if (state.resetPasswordVisible && !state.isResetPassword) {
             return state.password === '' || baseCondition;
         }
         return baseCondition;
diff --git a/apps/web/src/services/iam/components/UserManagementAddUser.vue b/apps/web/src/services/iam/components/UserManagementAddUser.vue
index 61a5495a56..5201160990 100644
--- a/apps/web/src/services/iam/components/UserManagementAddUser.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddUser.vue
@@ -146,6 +146,7 @@ const clickOutside = () => {
 const handleSelectMenuItem = async (menuItem: AddModalMenuItem) => {
     if (!state.selectedItems.some((item) => item.name === menuItem.name)) {
         state.selectedItems.unshift(menuItem);
+        emit('change-input', { userList: state.selectedItems });
     }
     hideMenu();
     resetValidationState();
diff --git a/apps/web/src/services/info/components/NoticeDetail.vue b/apps/web/src/services/info/components/NoticeDetail.vue
index d772efc739..ddb2d8ea36 100644
--- a/apps/web/src/services/info/components/NoticeDetail.vue
+++ b/apps/web/src/services/info/components/NoticeDetail.vue
@@ -17,7 +17,6 @@ import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { PostListParameters } from '@/schema/board/post/api-verbs/list';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { PostModel } from '@/schema/board/post/model';
-import type { FileModel } from '@/schema/file-manager/model';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -26,8 +25,8 @@ import { useNoticeStore } from '@/store/notice';
 import { useUserStore } from '@/store/user/user-store';
 
 import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
+import { useEditorContentTransformer } from '@/common/composables/editor-content-transformer';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFileAttachments } from '@/common/composables/file-attachments';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
@@ -81,8 +80,14 @@ const state = reactive({
     popoverVisible: false,
 });
 
-const files = computed<FileModel[]>(() => state.noticePostData?.files ?? []);
-const { attachments } = useFileAttachments(files);
+const contentsType = computed(() => state.noticePostData?.contents_type ?? 'markdown');
+const {
+    editorContents,
+} = useEditorContentTransformer({
+    contents: computed(() => state.noticePostData?.contents ?? ''),
+    contentsType,
+    resourceGroup: 'DOMAIN',
+});
 
 /* Api */
 const getNextPostData = async (createdAt: string) => {
@@ -240,8 +245,8 @@ watch(() => props.postId, (postId) => {
                 <div v-if="state.noticePostData"
                      class="text-editor-wrapper"
                 >
-                    <text-editor-viewer :contents="state.noticePostData.contents"
-                                        :attachments="attachments"
+                    <text-editor-viewer :contents="editorContents"
+                                        :contents-type="contentsType"
                     />
                 </div>
             </p-data-loader>
diff --git a/apps/web/src/services/info/components/NoticeForm.vue b/apps/web/src/services/info/components/NoticeForm.vue
index 00a91773b9..5424e9539c 100644
--- a/apps/web/src/services/info/components/NoticeForm.vue
+++ b/apps/web/src/services/info/components/NoticeForm.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import {
+    computed, reactive, watch, toRef, ref,
+} from 'vue';
+
+import { isEqual } from 'lodash';
 
 import {
     PButton,
@@ -13,7 +17,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import { SpaceRouter } from '@/router';
 import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ContentsType, ResourceGroupType } from '@/schema/_common/type';
 import type { PostUpdateParameters } from '@/schema/board/post/api-verbs/update';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
@@ -25,8 +29,8 @@ import { useUserStore } from '@/store/user/user-store';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import { emptyHtmlRegExp } from '@/common/components/editor/extensions/image/helper';
-import type { Attachment } from '@/common/components/editor/extensions/image/type';
 import TextEditor from '@/common/components/editor/TextEditor.vue';
+import { useEditorContentTransformer } from '@/common/composables/editor-content-transformer';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFileUploader } from '@/common/composables/file-uploader';
 import { useFormValidator } from '@/common/composables/form-validator';
@@ -59,7 +63,7 @@ const storeState = reactive({
 const state = reactive({
     isPinned: false,
     isPopup: false,
-    attachments: [] as Attachment[],
+    fileIds: [] as string[],
 });
 const workspaceState = reactive({
     selectedItems: [] as WorkspaceDropdownMenuItem[],
@@ -92,18 +96,32 @@ const {
     },
 });
 
+const contentsType = ref<ContentsType>('markdown');
+const resourceGroup = 'DOMAIN';
+const { fileUploader } = useFileUploader({ resourceGroup });
+const {
+    contents: uploadContents,
+    editorContents,
+} = useEditorContentTransformer({
+    contentsType,
+    resourceGroup,
+    fileIds: toRef(state, 'fileIds'), // auto update to state.fileIds
+    contents,
+});
+watch(uploadContents, (d) => {
+    setForm('contents', d);
+});
 const formData = computed<Omit<PostUpdateParameters, 'post_id'>>(() => ({
     title: noticeTitle.value,
     writer: writerName.value,
     contents: contents.value,
-    files: state.attachments.map(({ fileId }) => fileId) as string[],
+    files: state.fileIds,
     options: {
         is_pinned: state.isPinned,
         is_popup: state.isPopup,
     },
 }));
 
-const { fileUploader } = useFileUploader();
 const { getProperRouteLocation } = useProperRouteLocation();
 
 
@@ -136,8 +154,19 @@ const handleCreateNotice = async () => {
 };
 const handleEditNotice = async () => {
     try {
+        const originData = noticeDetailState.post;
+        if (!originData) throw new Error('Origin data is not found');
+        const postData: Omit<PostUpdateParameters, 'post_id'> = {};
+        if (originData.title !== formData.value.title) postData.title = formData.value.title;
+        if (originData.writer !== formData.value.writer) postData.writer = formData.value.writer;
+        if (originData.contents !== formData.value.contents) postData.contents = formData.value.contents;
+        if (!isEqual(originData.files, formData.value.files)) {
+            postData.files = formData.value.files?.filter((f) => !!f);
+        }
+        if (!isEqual(originData.options, formData.value.options)) postData.options = formData.value.options;
+
         await noticeDetailStore.updateNoticePost({
-            ...formData.value,
+            ...postData,
             workspaces: workspaceState.selectedRadioIdx === 0 ? [] : workspaceState.selectedItems.map((item) => item.name),
         });
         showSuccessMessage(i18n.t('INFO.NOTICE.FORM.ALT_S_UPDATE_NOTICE'), '');
@@ -153,10 +182,11 @@ watch([() => noticeDetailState.post, () => noticeDetailState.loading], async ([n
     // INIT STATES
     state.isPinned = notice?.options?.is_pinned ?? false;
     state.isPopup = notice?.options?.is_popup ?? false;
-    state.attachments = notice?.files?.map((file) => ({ fileId: file.file_id, downloadUrl: file.download_url ?? '' })) ?? [];
+    state.fileIds = notice?.files?.map((file) => file.file_id) ?? [];
     setForm('writerName', notice?.writer ?? storeState.userName);
     setForm('noticeTitle', notice?.title ?? '');
     setForm('contents', notice?.contents ?? '');
+    contentsType.value = notice?.contents_type ?? 'markdown';
 
     if (notice?.workspaces?.includes('*')) {
         workspaceState.selectedRadioIdx = 0;
@@ -240,11 +270,11 @@ watch([() => noticeDetailState.post, () => noticeDetailState.loading], async ([n
                                :invalid-text="invalidTexts.contents"
                 >
                     <template #default="{invalid}">
-                        <text-editor :value="contents"
-                                     :attachments.sync="state.attachments"
+                        <text-editor :value="editorContents"
                                      :image-uploader="fileUploader"
                                      :invalid="invalid"
-                                     @update:value="(d) => setForm('contents', d)"
+                                     :contents-type="contentsType"
+                                     @update:value="editorContents = $event"
                         />
                     </template>
                 </p-field-group>
diff --git a/apps/web/src/services/info/stores/notice-detail-store.ts b/apps/web/src/services/info/stores/notice-detail-store.ts
index 4c05ffeb18..a22d244270 100644
--- a/apps/web/src/services/info/stores/notice-detail-store.ts
+++ b/apps/web/src/services/info/stores/notice-detail-store.ts
@@ -24,6 +24,7 @@ export const useNoticeDetailStore = defineStore('notice-detail', () => {
     const actions = {
         getNoticePost: async (postId: string) => {
             try {
+                if (state.loading) return;
                 state.loading = true;
                 const result = await SpaceConnector.clientV2.board.post.get<PostGetParameters, PostModel>({
                     post_id: postId,
diff --git a/apps/web/src/services/ops-flow/components/BoardLSB.vue b/apps/web/src/services/ops-flow/components/BoardLSB.vue
index f3bb709870..17c4acf687 100644
--- a/apps/web/src/services/ops-flow/components/BoardLSB.vue
+++ b/apps/web/src/services/ops-flow/components/BoardLSB.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
 import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
@@ -10,11 +12,19 @@ import type { LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/ty
 
 import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
 const taskCategoryStore = useTaskCategoryStore();
 const taskCategoryGetters = taskCategoryStore.getters;
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 const predicate: LSBRouterPredicate = (to, currentRoute) => to.query?.categoryId === currentRoute.query.categoryId;
+
+onMounted(() => {
+    taskCategoryStore.list();
+});
 </script>
 
 <template>
@@ -26,10 +36,12 @@ const predicate: LSBRouterPredicate = (to, currentRoute) => to.query?.categoryId
                              })"
                              :predicate="predicate"
         >
-            {{ $t('OPSFLOW.ALL_CATEGORIES') }}
+            <span class="capitalize">{{ $t('OPSFLOW.ALL_TASKS', {
+                tasks: taskManagementTemplateStore.templates.tasks
+            }) }}</span>
         </l-s-b-router-button>
         <l-s-b-divider />
-        <l-s-b-top-title>{{ $t('OPSFLOW.CATEGORY') }}</l-s-b-top-title>
+        <l-s-b-top-title>{{ taskManagementTemplateStore.templates.TaskCategory }}</l-s-b-top-title>
         <l-s-b-loading-spinner :loading="taskCategoryGetters.loading" />
         <l-s-b-router-item v-for="(category, idx) in taskCategoryGetters.taskCategories"
                            :id="`${category.category_id}-${idx}`"
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
index 602b59a48b..99a6936e4a 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
@@ -115,7 +115,7 @@ onUnmounted(() => {
         />
         <div class="mb-3">
             <text-editor :placeholder="$t('OPSFLOW.TASK_BOARD.COMMENT')"
-                         content-type="markdown"
+                         contents-type="markdown"
                          :show-undo-redo-buttons="false"
                          :value="contents"
                          :style="{minHeight: '5rem'}"
@@ -162,7 +162,7 @@ onUnmounted(() => {
             </template>
             <template #default="{data}">
                 <div :class="{'pl-10': !!data.source}">
-                    <text-editor-viewer content-type="markdown"
+                    <text-editor-viewer contents-type="markdown"
                                         :contents="data.comment"
                     />
                 </div>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue b/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue
index a9a7979e4f..b46c27cb6c 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue
@@ -6,14 +6,19 @@ import { PCollapsiblePanel } from '@cloudforet/mirinae';
 import type { FileModel } from '@/schema/file-manager/model';
 
 import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
+import { useEditorContentTransformer } from '@/common/composables/editor-content-transformer';
 
 const props = defineProps<{
     description?: string;
     files?: FileModel[];
 }>();
 
-const attachments = computed(() => props.files?.map((d) => ({ fileId: d.file_id, downloadUrl: d.download_url })));
 
+const { editorContents } = useEditorContentTransformer({
+    contents: computed(() => props.description ?? ''),
+    contentsType: 'markdown',
+    resourceGroup: 'PROJECT',
+});
 </script>
 
 <template>
@@ -21,9 +26,8 @@ const attachments = computed(() => props.files?.map((d) => ({ fileId: d.file_id,
                          class="task-desc-field"
                          :line-clamp="1"
     >
-        <text-editor-viewer :contents="props.description"
-                            :attachments="attachments"
-                            content-type="markdown"
+        <text-editor-viewer :contents="editorContents"
+                            contents-type="markdown"
         />
     </p-collapsible-panel>
 </template>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
index 6ba7a918c5..42af46faaa 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
@@ -24,7 +24,6 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useTimezoneDate } from '@/common/composables/timezone-date';
 import ProjectLinkButton from '@/common/modules/project/ProjectLinkButton.vue';
 
-import BoardTaskDescriptionField from '@/services/ops-flow/components/BoardTaskDescriptionField.vue';
 import BoardTaskFilters from '@/services/ops-flow/components/BoardTaskFilters.vue';
 import BoardTaskNameField from '@/services/ops-flow/components/BoardTaskNameField.vue';
 import { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
@@ -48,7 +47,13 @@ const taskManagementTemplateStore = useTaskManagementTemplateStore();
 const loading = ref<boolean>(false);
 const taskAPI = useTaskAPI();
 const tasks = ref<TaskModel[]|undefined>(undefined);
-const categoriesById = ref<Record<string, TaskCategoryModel>>({});
+const categoriesById = computed<Record<string, TaskCategoryModel>>(() => {
+    const map = {} as Record<string, TaskCategoryModel>;
+    taskCategoryStore.getters.taskCategoriesIncludingDeleted.forEach((category) => {
+        map[category.category_id] = category;
+    });
+    return map;
+});
 const taskTypesById = ref<Record<string, TaskTypeModel>>({});
 
 
@@ -79,7 +84,7 @@ const getStatusStyleType = (category: TaskCategoryModel|undefined, statusId: str
     }
     return statusOption.color;
 };
-const { getTimezoneDate } = useTimezoneDate();
+const { getTimezoneDate, getDuration } = useTimezoneDate();
 
 /* query */
 const search = ref<string>('');
@@ -99,7 +104,7 @@ const getQuery = (filters?: ConsoleFilter[]) => {
         .setPage(pagination.page, pagination.size);
     if (search.value) queryHelper.addFilter({ v: search.value });
     if (props.categoryId) queryHelper.addFilter({ k: 'category_id', v: props.categoryId, o: '=' });
-    if (props.relatedAssets) queryHelper.addFilter({ k: 'related_assets', v: props.relatedAssets, o: '=' });
+    if (props.relatedAssets) queryHelper.addFilter({ k: 'related_asset_id', v: props.relatedAssets, o: '=' });
 
     return queryHelper.dataV2;
 };
@@ -130,26 +135,16 @@ const listCategoriesAndTaskTypes = async () => {
             query: { only: ['task_type_id', 'name'] },
         }),
     ]);
-    results.forEach((result, idx) => {
+    results.forEach((result) => {
         if (result.status === 'fulfilled') {
-            if (idx === 0) { // category case
-                const categories = result.value;
-                if (categories) {
-                    categories.forEach((category) => {
-                        categoriesById.value[category.category_id] = category;
-                    });
-                }
-            } else { // type case
-                const taskTypes = result.value;
-                if (taskTypes) {
-                    taskTypes.forEach((taskType) => {
-                        taskTypesById.value[taskType.task_type_id] = taskType;
-                    });
-                }
+            const taskTypes = result.value;
+            if (taskTypes) {
+                taskTypes.forEach((taskType) => {
+                    taskTypesById.value[taskType.task_type_id] = taskType;
+                });
             }
         }
     });
-    categoriesById.value = { ...categoriesById.value };
     taskTypesById.value = { ...taskTypesById.value };
     hasCategoriesAndTypesLoaded = true;
 };
@@ -189,12 +184,7 @@ const fields = computed<DataTableField[] >(() => [
     {
         name: 'name',
         label: i18n.t('OPSFLOW.TITLE') as string,
-        width: '18rem',
-    },
-    {
-        name: 'description',
-        label: i18n.t('OPSFLOW.DESCRIPTION') as string,
-        width: '20rem',
+        width: '30rem',
     },
     {
         name: 'task_type_id',
@@ -220,6 +210,10 @@ const fields = computed<DataTableField[] >(() => [
         name: 'created_at',
         label: i18n.t('OPSFLOW.CREATED_AT') as string,
     },
+    {
+        name: 'total_duration',
+        label: i18n.t('OPSFLOW.TOTAL_DURATION') as string,
+    },
 ]);
 
 </script>
@@ -255,11 +249,6 @@ const fields = computed<DataTableField[] >(() => [
                                        :name="item.name"
                 />
             </template>
-            <template #col-description-format="{item}">
-                <board-task-description-field :description="item.description"
-                                              :files="item.files"
-                />
-            </template>
             <template #col-task_type_id-format="{value}">
                 {{ getTaskTypeName(value) }}
             </template>
@@ -286,6 +275,14 @@ const fields = computed<DataTableField[] >(() => [
             <template #col-created_at-format="{value}">
                 {{ getTimezoneDate(value) }}
             </template>
+            <template #col-total_duration-format="{item}">
+                <template v-if="item.status_type === 'COMPLETED'">
+                    {{ getDuration(item.created_at, item.completed_at) }}
+                </template>
+                <template v-else>
+                    {{ getDuration(item.created_at) }}
+                </template>
+            </template>
         </p-data-table>
     </component>
 </template>
diff --git a/apps/web/src/services/ops-flow/components/PackageForm.vue b/apps/web/src/services/ops-flow/components/PackageForm.vue
index 82a42bc3d6..1ce1604027 100644
--- a/apps/web/src/services/ops-flow/components/PackageForm.vue
+++ b/apps/web/src/services/ops-flow/components/PackageForm.vue
@@ -53,6 +53,7 @@ const handleUpdateWorkspaces = (items: SelectDropdownMenuItem[]) => {
 
 /* category */
 const {
+    preloadCategories,
     selectedCategoryItems,
     categoryMenuItemsHandler,
     categoryValidator,
@@ -193,7 +194,8 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag
         });
         workspaceType.value = 'unset';
         await setInitialWorkspaces();
-        await setInitialCategoriesByPackageId();
+        await preloadCategories();
+        setInitialCategoriesByPackageId();
         resetValidations();
         return;
     }
@@ -208,7 +210,8 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag
         } else {
             workspaceType.value = 'unset';
         }
-        await setInitialCategoriesByPackageId(targetPackage.package_id);
+        await preloadCategories();
+        setInitialCategoriesByPackageId(targetPackage.package_id);
     }
 });
 </script>
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
index ee46a6d712..f36060bb60 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, computed } from 'vue';
+import { reactive, computed, onMounted } from 'vue';
 
 import {
     PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PBadge, PIconButton, PLink,
@@ -58,6 +58,10 @@ const state = reactive({
     }),
 });
 
+onMounted(() => {
+    if (!taskCategoryStore.state.loading) taskCategoryStore.list();
+});
+
 </script>
 
 <template>
diff --git a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
index 59c98ad26a..24b17eceed 100644
--- a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
@@ -51,6 +51,7 @@ const isMinimalCreateMode = computed(() => taskContentFormState.mode === 'create
 
 /* category */
 const {
+    preloadCategories,
     selectedCategoryItems,
     categoryValidator,
     categoryMenuItemsHandler,
@@ -60,6 +61,7 @@ const {
     hasTaskTypeOnly: true,
 });
 const handleUpdateSelectedCategory = (items: SelectDropdownMenuItem[]) => {
+    if (isEqual(items, selectedCategoryItems.value)) return;
     setForm('category', items); // set form for validation
     taskContentFormStore.setCurrentCategoryId(items[0].name); // set current category id to store for other fields
     const category = taskContentFormGetters.currentCategory;
@@ -194,7 +196,7 @@ const initForViewMode = async (task?: TaskModel) => {
 
     if (!task) return;
     // set category
-    await setInitialCategory(task.category_id);
+    setInitialCategory(task.category_id);
     taskContentFormStore.setCurrentCategoryId(task.category_id);
     // set task type
     await taskContentFormStore.setCurrentTaskType(task.task_type_id);
@@ -216,7 +218,7 @@ const initForCreateMode = async (categoryId?: string, taskType?: TaskTypeModel)
 
     if (!categoryId) return;
 
-    await setInitialCategory(categoryId);
+    setInitialCategory(categoryId);
     // init selected status
     const category = taskContentFormGetters.currentCategory;
     if (category) {
@@ -246,6 +248,9 @@ viewModeInitWatchStop = watch(() => taskContentFormState.originTask, async (task
         viewModeInitWatchStop = null;
         return;
     }
+
+    await preloadCategories();
+
     if (!isCreateMode.value) await initForViewMode(task);
 }, { immediate: true });
 createModeInitWatchStop = watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.currentTaskType], async ([categoryId, taskType]) => {
@@ -255,13 +260,14 @@ createModeInitWatchStop = watch([() => taskContentFormState.currentCategoryId, (
         return;
     }
 
-    if (isCreateMode.value) {
-        await initForCreateMode(categoryId);
-    } else if (isMinimalCreateMode.value) { // minimal create mode always has task type (from landing page)
-        if (!taskType) return;
-        await initForCreateMode(categoryId, taskType);
-    }
+    await preloadCategories();
+
+    if (!isCreateMode.value) return;
+    if (isMinimalCreateMode.value && !taskType) return; // minimal create is from landing page. task type is already selected and must be initialized.
+
+    await initForCreateMode(categoryId, taskType);
 }, { immediate: true });
+
 </script>
 
 <template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
index 8f52de0b9c..2b0113da3d 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
@@ -16,6 +16,7 @@ import type {
     TaskStatusOption, TaskStatusOptions,
     TaskStatusType,
 } from '@/schema/opsflow/task/type';
+import { getParticle, i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -52,10 +53,21 @@ const {
     color: TASK_STATUS_COLOR_NAMES[0] as TaskStatusColorName,
 }, {
     name(value: string) {
-        if (!value.trim().length) return 'Name is required';
-        if (value.length > 50) return 'Name should be less than 50 characters';
+        if (!value.trim().length) {
+            return _i18n.t('OPSFLOW.VALIDATION.REQUIRED', {
+                topic: _i18n.t('OPSFLOW.NAME'),
+                particle: getParticle(_i18n.t('OPSFLOW.NAME') as string, 'topic'),
+            });
+        }
+        if (value.length > 50) {
+            return _i18n.t('OPSFLOW.VALIDATION.LENGTH_MAX', {
+                topic: _i18n.t('OPSFLOW.NAME'),
+                particle: getParticle(_i18n.t('OPSFLOW.NAME') as string, 'topic'),
+                length: 50,
+            });
+        }
         const statusId = taskCategoryPageStore.getters.targetStatusOption?.data.status_id;
-        if (statusIdAndNames.value.some((p) => p[1] === value && p[0] !== statusId)) return 'Name already exists';
+        if (statusIdAndNames.value.some((p) => p[1] === value && p[0] !== statusId)) return _i18n.t('OPSFLOW.VALIDATION.DUPLICATED', { topic: _i18n.t('OPSFLOW.NAME') });
         return true;
     },
 });
@@ -169,13 +181,17 @@ watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageStor
 </script>
 
 <template>
-    <p-overlay-layout :title="taskCategoryPageStore.getters.targetStatusOption ? 'Edit Status' : 'Add Status'"
+    <p-overlay-layout :title="taskCategoryPageStore.getters.targetStatusOption ? $t('OPSFLOW.EDIT_TARGET', {
+                          target: $t('OPSFLOW.STATUS'),
+                      }) : $t('OPSFLOW.ADD_TARGET', {
+                          target: $t('OPSFLOW.STATUS'),
+                      })"
                       :visible="taskCategoryPageState.visibleStatusForm"
                       @close="handleCancelOrClose"
     >
         <template #default>
             <div class="p-6 w-full">
-                <p-field-group label="Name"
+                <p-field-group :label="$t('OPSFLOW.NAME')"
                                required
                                :invalid="!loading && invalidState.name"
                                :invalid-text="invalidTexts.name"
@@ -189,7 +205,7 @@ watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageStor
                     </template>
                 </p-field-group>
                 <p-field-group v-if="!taskCategoryPageStore.getters.targetStatusOption?.data?.is_default"
-                               label="Status Type"
+                               :label="$t('OPSFLOW.STATUS_TYPE')"
                                required
                                :invalid="!loading && invalidState.statusType"
                                :invalid-text="invalidTexts.statusType"
@@ -203,7 +219,7 @@ watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageStor
                         />
                     </template>
                 </p-field-group>
-                <p-field-group label="Color"
+                <p-field-group :label="$t('OPSFLOW.COLOR')"
                                required
                                :invalid="invalidState.color"
                                :invalid-text="invalidTexts.color"
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
index 2b29fc7c80..d2a464df3c 100644
--- a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
@@ -42,7 +42,7 @@ const title = computed(() => {
 });
 
 /* scope */
-type Scope = TaskTypeModel['scope'];
+type Scope = 'PROJECT'|'WORKSPACE';
 const scopeValidator = useFieldValidator<Scope>('PROJECT', (val) => {
     if (!val) {
         return _i18n.t('OPSFLOW.VALIDATION.REQUIRED', {
@@ -53,6 +53,9 @@ const scopeValidator = useFieldValidator<Scope>('PROJECT', (val) => {
     return true;
 });
 const { value: scope, setValue: setScope } = scopeValidator;
+const handleChangeScope = (val: Scope) => {
+    setScope(val);
+};
 
 /* task field configuration */
 const {
@@ -122,7 +125,7 @@ const createTaskType = async (categoryId: string) => {
     try {
         await taskTypeStore.create({
             name: name.value,
-            scope: scope.value,
+            require_project: scope.value === 'PROJECT',
             assignee_pool: assigneePool.value,
             description: description.value,
             category_id: categoryId,
@@ -192,6 +195,7 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
         await nextTick(); // wait for closing animation
         setForm({
             name: '',
+            scope: 'PROJECT',
             description: '',
             assigneePool: [],
         });
@@ -204,6 +208,7 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
         initialTaskType = cloneDeep(target);
         setForm({
             name: target.name,
+            scope: target.require_project ? 'PROJECT' : 'WORKSPACE',
             description: target.description,
             assigneePool: target.assignee_pool,
         });
@@ -242,13 +247,13 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                     <p-radio-group>
                         <p-radio :selected="scope"
                                  value="PROJECT"
-                                 @change="setScope"
+                                 @change="handleChangeScope"
                         >
                             {{ $t('OPSFLOW.PROJECT') }}
                         </p-radio>
                         <p-radio :selected="scope"
                                  value="WORKSPACE"
-                                 @change="setScope"
+                                 @change="handleChangeScope"
                         >
                             {{ $t('OPSFLOW.WORKSPACE') }}
                         </p-radio>
diff --git a/apps/web/src/services/ops-flow/composables/use-category-field.ts b/apps/web/src/services/ops-flow/composables/use-category-field.ts
index 76cae71c59..690b45f3b9 100644
--- a/apps/web/src/services/ops-flow/composables/use-category-field.ts
+++ b/apps/web/src/services/ops-flow/composables/use-category-field.ts
@@ -3,6 +3,8 @@ import { computed, ref } from 'vue';
 import { getTextHighlightRegex } from '@cloudforet/mirinae';
 import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
 import { getParticle, i18n } from '@/translations';
 
 import { useFieldValidator } from '@/common/composables/form-validator';
@@ -43,26 +45,19 @@ export const useCategoryField = ({
         categoryValidator.setValue(selectedCategories);
     };
 
-    const dropdownCategoryItems = ref<CategoryItem[]>([]);
-    const categoryItemsByPackage = computed<Record<string, CategoryItem[]>>(() => {
-        const map: Record<string, CategoryItem[]> = {};
-        dropdownCategoryItems.value.forEach((item) => {
-            if (Array.isArray(map[item.packageId])) {
-                map[item.packageId].push(item);
-            } else {
-                map[item.packageId] = [item];
-            }
-        });
-        return map;
-    });
-
-    const loadDropdownCategoryItems = async (): Promise<CategoryItem[]> => {
-        const taskCategories = await taskCategoryStore.list() ?? [];
+    const taskCategories = computed<TaskCategoryModel[]>(() => taskCategoryStore.getters.taskCategoriesIncludingDeleted);
+    const taskTypesByCategoryId = computed<Record<string, TaskTypeModel[]|undefined>>(() => taskTypeStore.state.itemsByCategoryId);
+    const preloadCategories = async () => {
+        await taskCategoryStore.list();
+        if (hasTaskTypeOnly) {
+            await taskTypeStore.listByCategoryIds(taskCategories.value.map((c) => c.category_id));
+        }
+    };
 
+    const dropdownCategoryItems = computed<CategoryItem[]>(() => {
         if (hasTaskTypeOnly) {
-            await taskTypeStore.listByCategoryIds(taskCategories.map((c) => c.category_id));
-            return taskCategories.map((c) => {
-                const taskTypes = taskTypeStore.state.itemsByCategoryId[c.category_id];
+            return taskCategories.value.filter((c) => c.state !== 'DELETED').map((c) => {
+                const taskTypes = taskTypesByCategoryId.value[c.category_id];
                 return {
                     name: c.category_id,
                     label: c.name,
@@ -71,14 +66,25 @@ export const useCategoryField = ({
                 };
             });
         }
-        return taskCategoryStore.getters.taskCategories.map((c) => ({
+        return taskCategories.value.map((c) => ({
             name: c.category_id,
             label: c.name,
             packageId: c.package_id,
         }) || []);
-    };
-    const categoryMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
-        dropdownCategoryItems.value = await loadDropdownCategoryItems();
+    });
+    const categoryItemsByPackage = computed<Record<string, CategoryItem[]>>(() => {
+        const map: Record<string, CategoryItem[]> = {};
+        dropdownCategoryItems.value.forEach((item) => {
+            if (Array.isArray(map[item.packageId])) {
+                map[item.packageId].push(item);
+            } else {
+                map[item.packageId] = [item];
+            }
+        });
+        return map;
+    });
+
+    const categoryMenuItemsHandler: AutocompleteHandler = (keyword: string, pageStart = 1, pageLimit = 10) => {
         const filteredItems = dropdownCategoryItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
         const _totalCount = pageStart - 1 + Number(pageLimit);
         const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
@@ -89,13 +95,11 @@ export const useCategoryField = ({
     };
 
     const prevSelectedCategoryItems = ref<CategoryItem[]>([]);
-    const setInitialCategoriesByPackageId = async (packageId?: string) => {
-        dropdownCategoryItems.value = await loadDropdownCategoryItems();
+    const setInitialCategoriesByPackageId = (packageId?: string) => {
         prevSelectedCategoryItems.value = packageId ? categoryItemsByPackage.value[packageId] ?? [] : [];
         categoryValidator.setValue(prevSelectedCategoryItems.value);
     };
-    const setInitialCategory = async (categoryId: string) => {
-        dropdownCategoryItems.value = await loadDropdownCategoryItems();
+    const setInitialCategory = (categoryId: string) => {
         prevSelectedCategoryItems.value = taskCategoryStore.getters.taskCategoriesIncludingDeleted.filter((c) => c.category_id === categoryId).map((c) => ({
             name: c.category_id,
             label: c.name,
@@ -162,6 +166,7 @@ export const useCategoryField = ({
     };
 
     return {
+        preloadCategories,
         selectedCategoryItems,
         selectedCategoryIds,
         categoryValidator,
diff --git a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
index defeaeb396..a99a52adf0 100644
--- a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
+++ b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router/composables';
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 import {
-    PButton, PHeading, PSelectCard, PEmpty, PRadioGroup, PRadio, PDataLoader,
+    PButton, PHeading, PSelectCard, PEmpty, PDataLoader,
 } from '@cloudforet/mirinae';
 
 import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
@@ -63,7 +63,7 @@ const taskQuery = computed<Query>(() => taskQueryHelper.setFilters([
 const handleChangeCategory = async (value: string) => {
     setForm('category', value);
     await taskTypeStore.listByCategoryId(value);
-    setForm('taskType', taskTypeState.itemsByCategoryId[value]?.[0]?.task_type_id);
+    setForm('taskType', '');
 };
 const handleChangeTaskType = (value: string) => {
     setForm('taskType', value);
@@ -86,7 +86,7 @@ onMounted(async () => {
     }
     await taskTypeStore.listByCategoryIds(allCategories.map((c) => c.category_id));
     availableCategories.value = allCategories.filter((c) => taskTypeState.itemsByCategoryId[c.category_id]?.length);
-    setForm('category', availableCategories.value[0]?.category_id);
+    setForm('category', '');
     tasks.value = await taskAPI.list({ query: taskQuery.value }) ?? [];
     loading.value = false;
 });
@@ -104,8 +104,11 @@ onMounted(async () => {
                         {{ taskManagementTemplateStore.templates.landingDescription }}
                     </p>
                 </div>
-                <div class="max-w-96 mobile:w-96">
-                    <img src="@/assets/images/landing/img_landing_service-desk_hero.png">
+                <div class="max-w-96 mobile:w-96 flex justify-center">
+                    <img src="/images/opsflow-landing/img_landing_service-desk_hero.png"
+                         srcset="/images/opsflow-landing/img_landing_service-desk_hero@2x.png 2x,
+                         /images/opsflow-landing/img_landing_service-desk_hero@3x.png 3x"
+                    >
                 </div>
             </div>
             <p-data-loader :loading="loading"
@@ -122,31 +125,52 @@ onMounted(async () => {
                             <div class="grid grid-cols-2 gap-4 justify-center items-center">
                                 <p-select-card v-for="c in availableCategories"
                                                :key="c.category_id"
-                                               class="category-card"
-                                               :label="c.name"
+                                               class="select-card"
                                                :value="c.category_id"
                                                :selected="category"
                                                @change="handleChangeCategory"
-                                />
+                                >
+                                    <div class="w-full px-6 text-center">
+                                        <p class="text-label-md font-bold truncate">
+                                            {{ c.name }}
+                                        </p>
+                                        <p class="mt-1 truncate text-label-md text-gray-500">
+                                            {{ c.description }}
+                                        </p>
+                                    </div>
+                                </p-select-card>
                             </div>
                         </div>
                     </div>
-                    <div class="mt-10">
+                    <div v-if="category"
+                         class="mt-10"
+                    >
                         <p class="mb-6 text-display-md">
                             {{ taskManagementTemplateStore.templates.TaskType }}
                         </p>
-                        <p-radio-group v-if="category">
-                            <p-radio v-for="t in taskTypeState.itemsByCategoryId[category]"
-                                     :key="t.task_type_id"
-                                     :value="t.task_type_id"
-                                     :selected="taskType"
-                                     @change="handleChangeTaskType"
-                            >
-                                {{ t.name }}
-                            </p-radio>
-                        </p-radio-group>
+                        <div class="flex justify-center">
+                            <div class="grid grid-cols-2 gap-4 justify-center items-center">
+                                <p-select-card v-for="t in taskTypeState.itemsByCategoryId[category]"
+                                               :key="t.task_type_id"
+                                               class="select-card"
+                                               :label="t.name"
+                                               :value="t.task_type_id"
+                                               :selected="taskType"
+                                               @change="handleChangeTaskType"
+                                >
+                                    <div class="w-full px-6 text-center">
+                                        <p class="text-label-md font-bold truncate">
+                                            {{ t.name }}
+                                        </p>
+                                        <p class="mt-1 truncate text-label-md text-gray-500">
+                                            {{ t.description }}
+                                        </p>
+                                    </div>
+                                </p-select-card>
+                            </div>
+                        </div>
                     </div>
-                    <div class="mt-10 flex justify-end">
+                    <div class="my-10 flex justify-end">
                         <p-button v-if="hasReadWriteAccess"
                                   style-type="substitutive"
                                   icon-right="ic_arrow-right"
@@ -181,8 +205,11 @@ onMounted(async () => {
         background-size: 115% 240%;
     }
 }
-.category-card {
-    @apply w-[352px] py-4;
+.select-card {
+    width: 352px;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    height: 4.5rem;
 }
 </style>
 
diff --git a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
index 30f026c8ff..d1725689dc 100644
--- a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
+++ b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
@@ -95,9 +95,12 @@ const {
 onBeforeRouteLeave(handleBeforeRouteLeave);
 
 /* form button handling */
+const creating = ref(false);
 const handleConfirm = async () => {
     if (!taskContentFormGetters.isAllValid) return;
+    creating.value = true;
     createdTask.value = await taskContentFormStore.createTask();
+    creating.value = false;
     if (createdTask.value) {
         goBack();
     }
@@ -147,11 +150,13 @@ defineExpose({ setPathFrom });
         </p-pane-layout>
         <div class="py-3 flex flex-wrap gap-1 justify-end">
             <p-button style-type="transparent"
+                      :disabled="creating"
                       @click="goBack()"
             >
                 {{ $t('COMMON.BUTTONS.CANCEL') }}
             </p-button>
             <p-button style-type="primary"
+                      :loading="creating"
                       :disabled="!taskContentFormGetters.isAllValid"
                       @click="handleConfirm"
             >
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
index 70df5f598e..c11866a5b8 100644
--- a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
@@ -26,7 +26,7 @@ const taskTypeFields = computed<DataTableField[]>(() => [
         width: '20%',
     },
     {
-        name: 'scope',
+        name: 'require_project',
         label: _i18n.t('OPSFLOW.SCOPE') as string,
         width: '12%',
     },
@@ -82,11 +82,11 @@ const taskTypeFields = computed<DataTableField[]>(() => [
                       :items="taskCategoryPageGetters.taskTypes"
                       :fields="taskTypeFields"
         >
-            <template #col-scope-format="{ value }">
-                <p-badge :style-type="value === 'WORKSPACE' ? 'secondary1' : 'primary'"
+            <template #col-require_project-format="{ value }">
+                <p-badge :style-type="value ? 'primary' : 'secondary1'"
                          badge-type="solid-outline"
                 >
-                    {{ $t(`OPSFLOW.${value ?? 'WORKSPACE'}`) }}
+                    {{ $t(`OPSFLOW.${value ? 'PROJECT' : 'WORKSPACE'}`) }}
                 </p-badge>
             </template>
             <template #col-buttons-format="{ item }">
diff --git a/apps/web/src/services/ops-flow/stores/admin/package-store.ts b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
index b1f51eb37a..2076fda226 100644
--- a/apps/web/src/services/ops-flow/stores/admin/package-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
@@ -87,6 +87,7 @@ export const usePackageStore = defineStore('package', () => {
     };
     const disposeSelf = () => {
         const store = usePackageStore();
+        store.$reset();
         store.$dispose();
     };
     const appContextStore = useAppContextStore();
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
index 68633562cc..8169e099b2 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
@@ -1,7 +1,7 @@
 import { asyncComputed } from '@vueuse/core';
 import type { DeepReadonly } from 'vue';
 import {
-    reactive, computed,
+    reactive, computed, onUnmounted, onMounted,
 } from 'vue';
 
 import { defineStore } from 'pinia';
@@ -215,6 +215,20 @@ export const useTaskCategoryPageStore = defineStore('task-category-page', () =>
             state.targetTaskTypeId = undefined;
         },
     };
+
+    onMounted(() => {
+        if (!taskCategoryStore.state.loading) taskCategoryStore.list();
+    });
+
+
+    const disposeSelf = () => {
+        const store = useTaskCategoryPageStore();
+        store.$reset();
+        store.$dispose();
+    };
+    onUnmounted(() => {
+        disposeSelf();
+    });
     return {
         state,
         getters,
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
index e1ee19c57c..725a95307f 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
@@ -1,5 +1,7 @@
 import type { DeepReadonly } from 'vue';
-import { reactive, computed } from 'vue';
+import {
+    reactive, computed, onUnmounted, onMounted,
+} from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -162,6 +164,20 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
             state.associatedTasksToCategoryMap = {};
         },
     };
+
+    onMounted(() => {
+        if (!taskCategoryStore.state.loading) taskCategoryStore.list();
+    });
+
+
+    const disposeSelf = () => {
+        const store = useTaskManagementPageStore();
+        store.$reset();
+        store.$dispose();
+    };
+    onUnmounted(() => {
+        disposeSelf();
+    });
     return {
         state,
         getters,
diff --git a/apps/web/src/services/ops-flow/stores/board-page-store.ts b/apps/web/src/services/ops-flow/stores/board-page-store.ts
index 1cbedf3b4a..bd325c60e5 100644
--- a/apps/web/src/services/ops-flow/stores/board-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/board-page-store.ts
@@ -1,5 +1,7 @@
 import type { ComputedRef } from 'vue';
-import { reactive, computed } from 'vue';
+import {
+    reactive, computed, onUnmounted, onMounted,
+} from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -24,6 +26,19 @@ export const useBoardPageStore = defineStore('board-page', () => {
             state.currentCategoryId = categoryId;
         },
     };
+
+    onMounted(() => {
+        if (!taskCategoryStore.state.loading) taskCategoryStore.list();
+    });
+
+    const disposeSelf = () => {
+        const store = useBoardPageStore();
+        store.$reset();
+        store.$dispose();
+    };
+    onUnmounted(() => {
+        disposeSelf();
+    });
     return {
         state,
         getters,
diff --git a/apps/web/src/services/ops-flow/stores/task-category-store.ts b/apps/web/src/services/ops-flow/stores/task-category-store.ts
index 42a930887f..10cb9fdc12 100644
--- a/apps/web/src/services/ops-flow/stores/task-category-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-category-store.ts
@@ -47,18 +47,8 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
 
     const getters: UseTaskCategoryStoreGetters = {
         loading: computed<boolean>(() => state.loading),
-        taskCategories: computed<TaskCategoryModel[]>(() => {
-            if (state.items === undefined) {
-                actions.list();
-            }
-            return state.items?.filter((item) => item.state !== 'DELETED') ?? [];
-        }),
-        taskCategoriesIncludingDeleted: computed<TaskCategoryModel[]>(() => {
-            if (state.items === undefined) {
-                actions.list();
-            }
-            return state.items ?? [];
-        }),
+        taskCategories: computed<TaskCategoryModel[]>(() => state.items?.filter((item) => item.state !== 'DELETED') ?? []),
+        taskCategoriesIncludingDeleted: computed<TaskCategoryModel[]>(() => state.items ?? []),
     } as unknown as UseTaskCategoryStoreGetters; // HACK: to avoid type error
 
     const fetchList = getCancellableFetcher<TaskCategoryListParameters, ListResponse<TaskCategoryModel>>(SpaceConnector.clientV2.opsflow.taskCategory.list);
diff --git a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
index b522eadfc9..c408f4e0b9 100644
--- a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
@@ -1,4 +1,4 @@
-import { reactive, computed } from 'vue';
+import { reactive, computed, onMounted } from 'vue';
 
 import { isEmpty, isEqual } from 'lodash';
 import { defineStore } from 'pinia';
@@ -25,6 +25,7 @@ import {
     useTaskFieldMetadataStore,
 } from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
 import type { DefaultTaskFieldId } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+import type { References } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
@@ -59,6 +60,7 @@ interface UseTaskContentFormStoreGetters {
     isFieldValid: boolean;
     isAllValid: boolean;
     isEditable: boolean;
+    references: References;
 }
 export const useTaskContentFormStore = defineStore('task-content-form', () => {
     const taskCategoryStore = useTaskCategoryStore();
@@ -100,15 +102,9 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
             return isViewMode ? fields : fields.filter((f) => f.is_primary || f.is_required);
         }),
         defaultFields: computed<TaskField[]>(() => {
-            const scope = state.currentTaskType?.scope;
-            switch (scope) {
-            case 'WORKSPACE':
-                return taskFieldMetadataStore.getters.workspaceScopeDefaultFields;
-            case 'PROJECT':
-                return taskFieldMetadataStore.getters.projectScopeDefaultFields;
-            default:
-                return taskFieldMetadataStore.getters.workspaceScopeDefaultFields;
-            }
+            const projectRequired = state.currentTaskType?.require_project;
+            if (projectRequired) return taskFieldMetadataStore.getters.projectScopeDefaultFields;
+            return taskFieldMetadataStore.getters.workspaceScopeDefaultFields;
         }),
         isDefaultFieldValid: computed<boolean>(() => {
             if (state.mode === 'view') return state.defaultDataValidationMap[DEFAULT_FIELD_ID_MAP.title] ?? true;
@@ -128,6 +124,12 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
             // if (state.originTask.created_by === userStore.state.userId) return true;
             return false;
         }),
+        references: computed<References>(() => {
+            const projectRequired = state.currentTaskType?.require_project;
+            return {
+                project_id: projectRequired ? state.defaultData[DEFAULT_FIELD_ID_MAP.project] : '*',
+            };
+        }),
     } as unknown as UseTaskContentFormStoreGetters; // HACK: to avoid type error
 
     const taskAPI = useTaskAPI();
@@ -206,7 +208,7 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
             state.defaultData = {
                 [DEFAULT_FIELD_ID_MAP.title]: task.name,
                 [DEFAULT_FIELD_ID_MAP.description]: task.description,
-                [DEFAULT_FIELD_ID_MAP.project]: task.project_id ? [task.project_id] : undefined,
+                [DEFAULT_FIELD_ID_MAP.project]: task.project_id,
             };
             state.data = task.data ?? {};
             state.fileIds = task.files?.map((f) => f.file_id) ?? [];
@@ -235,8 +237,7 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
                     assignee: state.assignee || undefined,
                     data: isEmpty(state.data) ? undefined : state.data,
                     files: state.fileIds,
-                    project_id: state.defaultData[DEFAULT_FIELD_ID_MAP.project]?.[0],
-                    resource_group: state.currentTaskType.scope,
+                    project_id: state.currentTaskType.require_project ? state.defaultData[DEFAULT_FIELD_ID_MAP.project] : '*',
                 });
                 showSuccessMessage(i18n.t('OPSFLOW.ALT_S_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
                 state.createTaskLoading = false;
@@ -264,6 +265,9 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
         },
     };
 
+    onMounted(() => {
+        if (!taskCategoryStore.state.loading) taskCategoryStore.list();
+    });
 
 
     return {
diff --git a/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts b/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
index 6248bb50dd..e20fa73d94 100644
--- a/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
@@ -170,7 +170,13 @@ export const useTaskDetailPageStore = defineStore('task-detail-page', () => {
         },
     };
 
+    const disposeSelf = () => {
+        const store = useTaskDetailPageStore();
+        store.$reset();
+        store.$dispose();
+    };
     onUnmounted(() => {
+        disposeSelf();
         taskContentFormStore.$reset();
         taskContentFormStore.$dispose();
     });
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
index ae5f504490..af213cd822 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
@@ -57,7 +57,7 @@ const taskManagementTemplateStore = useTaskManagementTemplateStore();
 const fieldMetadata = computed<TaskFieldTypeMetadata>(() => taskFieldMetadataStoreGetters.taskFieldTypeMetadataMap[props.field.field_type]);
 const optionsComponent = computed<ReturnType<typeof defineAsyncComponent>|undefined>(() => COMPONENT_MAP[props.field.field_type]);
 
-const isDefaultField = computed(() => !!DEFAULT_FIELD_ID_MAP[props.field.field_id]);
+const isDefaultField = computed(() => Object.values(DEFAULT_FIELD_ID_MAP).includes(props.field.field_id));
 
 /* input type */
 const inputTypes = computed<{ name: string; label: string; }[]>(() => [
@@ -136,7 +136,7 @@ const handleRequiredChange = (value: boolean) => {
 };
 
 /* other field properties */
-const isPrimary = ref<boolean>(false);
+const isPrimary = ref<boolean>(true);
 const isFolded = ref<boolean>(false);
 
 /* validation */
@@ -207,7 +207,7 @@ onBeforeMount(() => {
     options.value = props.field.options ?? {};
     isOptionsValid.value = false;
     isRequired.value = props.field.is_required ?? isDefaultField.value;
-    isPrimary.value = props.field.is_required ? true : (props.field.is_primary ?? isDefaultField.value);
+    isPrimary.value = props.field.is_primary ?? true;
     isFolded.value = isDefaultField.value;
     jsonCode.value = JSON.stringify(props.field);
 });
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
index 5899688e7e..c72d7ecda7 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
@@ -46,7 +46,7 @@ export const useTaskFieldsConfiguration = () => {
                 name: field.name,
                 is_required: false,
                 selection_type: DEFAULT_SELECTION_TYPE_MAP[field.type],
-                is_primary: false,
+                is_primary: true,
                 options: {},
             } as MutableTaskField]);
         },
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
index 39801c94e0..d86ab775c0 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
@@ -22,6 +22,7 @@ emit('update:is-valid', true);
     <div>
         <text-editor :value="props.options.example"
                      :placeholder="$t('OPSFLOW.FIELD_GENERATOR.ENTER_DEFAULT_DESCRIPTION')"
+                     contents-type="markdown"
                      @update:value="emit('update:options', { ...props.options, example: $event })"
         />
     </div>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
index 683d856cc1..3a90685ef8 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
@@ -42,6 +42,7 @@ onUnmounted(() => {
                    :value="taskContentFormState.defaultData[field.field_id]"
                    :readonly="taskContentFormState.mode === 'view' ? !(taskContentFormGetters.isEditable && isEditableFieldInViewMode(field.field_id)) : false"
                    :files="taskContentFormState.originTask?.files"
+                   :references="taskContentFormGetters.references"
                    @update:value="taskContentFormStore.setDefaultFieldData(field.field_id, $event)"
                    @update:file-ids="taskContentFormStore.setFileIds"
                    @update:is-valid="taskContentFormStore.setDefaultFieldValidation(field.field_id, $event)"
@@ -54,6 +55,7 @@ onUnmounted(() => {
                    :value="taskContentFormState.data[field.field_id]"
                    :readonly="taskContentFormState.mode === 'view'"
                    :files="taskContentFormState.originTask?.files"
+                   :references="taskContentFormGetters.references"
                    @update:value="taskContentFormStore.setFieldData(field.field_id, $event)"
                    @update:file-ids="taskContentFormStore.setFileIds"
                    @update:is-valid="taskContentFormStore.setFieldValidation(field.field_id, $event)"
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
index 63cf4b08c7..b0c8472e2d 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PFieldGroup,
+    PFieldGroup, PLink, PLazyImg,
 } from '@cloudforet/mirinae';
 import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-context-menu-attach/use-context-menu-attach';
 
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
+import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
 import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
-import type { CloudServiceTypeItem } from '@/store/reference/cloud-service-type-reference-store';
+import type {
+    CloudServiceTypeItem,
+    CloudServiceTypeReferenceMap,
+} from '@/store/reference/cloud-service-type-reference-store';
 import {
     useCloudServiceTypeReferenceStore,
 } from '@/store/reference/cloud-service-type-reference-store';
@@ -19,7 +26,10 @@ import { getVariableModelMenuHandler } from '@/lib/variable-models/variable-mode
 
 import DataSelector from '@/common/components/select/DataSelector.vue';
 import type { DataSelectorItem } from '@/common/components/select/type';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
+import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
 import type {
     TaskFieldFormEmits,
@@ -30,37 +40,58 @@ const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
 const emit = defineEmits<TaskFieldFormEmits<string[]>>();
 
 const {
-    fieldValue, updateFieldValue,
+    updateFieldValue,
     isInvalid, invalidText,
 } = useTaskFieldValidation(props, emit);
 
 const cloudServiceTypeReferenceStore = useCloudServiceTypeReferenceStore();
-const cloudServiceTypeItems = computed<CloudServiceTypeItem[]>(() => Object.values(cloudServiceTypeReferenceStore.getters.cloudServiceTypeItems));
 
-const cloudServiceOptions = computed<Record<string, string>>(() => ({
-    cloud_service_type: selectedStates.value[0]?.[0]?.name,
-}));
-const cloudServiceHandler = getVariableModelMenuHandler([{ variableModel: new VariableModelFactory({ type: 'MANAGED', managedModelKey: 'cloud_service' }) }], cloudServiceOptions);
+
+const cloudServiceTypeReferenceMap = computed<CloudServiceTypeReferenceMap>(() => cloudServiceTypeReferenceStore.getters.cloudServiceTypeItems);
+const cloudServiceTypeItems = computed<CloudServiceTypeItem[]>(() => Object.values(cloudServiceTypeReferenceMap.value));
+
+interface CloudDataSelectorItem extends DataSelectorItem {
+    data: CloudServiceModel|CloudServiceTypeItem;
+    imageUrl?: string;
+}
+
+const cloudServiceOptions = computed<Record<string, any>>(() => {
+    if (!relatedAssetInfo.value) return {};
+    return {
+        provider: relatedAssetInfo.value.provider,
+        cloud_service_group: relatedAssetInfo.value.group,
+        cloud_service_type: relatedAssetInfo.value.type,
+    };
+});
+const cloudServiceVariableModel = new VariableModelFactory({ type: 'MANAGED', managedModelKey: 'cloud_service' });
+const cloudServiceHandler = getVariableModelMenuHandler<CloudServiceModel>(
+    [{ variableModel: cloudServiceVariableModel }],
+    cloudServiceOptions,
+);
+
 
 type Step = {
     name: string;
-} & ({ menu?: DataSelectorItem[]; } | { handler?: MenuAttachHandler<DataSelectorItem>; });
+} & ({ menu?: CloudDataSelectorItem[]; } | { handler?: MenuAttachHandler<CloudDataSelectorItem>; });
+const step1Menu = computed<CloudDataSelectorItem[]>(() => cloudServiceTypeItems.value.map((item) => ({
+    name: item.key,
+    label: item.label,
+    imageUrl: item.icon,
+    data: item,
+})));
+const emptyMenu = [];
 const steps = computed<Step[]>(() => [
     {
-        name: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_1.CATEGORY') as string,
-        menu: cloudServiceTypeItems.value.map((item) => ({
-            type: 'item',
-            name: item.key,
-            label: item.label,
-            imageUrl: item.icon,
-        })),
+        name: i18n.t('OPSFLOW.FIELD_GENERATOR.GROUP_TYPE') as string,
+        menu: step1Menu.value,
     },
     {
-        name: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_1.CATEGORY') as string,
-        handler: cloudServiceHandler,
+        name: i18n.t('OPSFLOW.NAME') as string,
+        menu: emptyMenu,
+        handler: relatedAssetInfo.value ? cloudServiceHandler : undefined,
     },
 ]);
-const selectedStates = ref<DataSelectorItem[][]>([]);
+const selectedStates = ref<CloudDataSelectorItem[][]>([]);
 
 const getStepKey = (idx: number): string => {
     if (idx === 0) return '--';
@@ -68,17 +99,76 @@ const getStepKey = (idx: number): string => {
     return selectedStates.value[idx - 1].map((d) => d.name).join(', ');
 };
 const handleUpdateSearchKey = (stepIdx: number) => {
-    if (stepIdx === 0) {
-        selectedStates.value.splice(stepIdx, 1, []);
-    }
+    selectedStates.value = selectedStates.value.map((d, idx) => {
+        if (idx > stepIdx) return [];
+        return d;
+    });
 };
-const handleUpdateSelected = (stepIdx: number, selected: DataSelectorItem[]) => {
+const handleUpdateSelected = (stepIdx: number, selected: CloudDataSelectorItem[]) => {
     selectedStates.value.splice(stepIdx, 1, selected);
 
     if (stepIdx === steps.value.length - 1) {
         updateFieldValue(selected.map((item) => item.name));
+        relatedAssets.value = selected.map((item) => item.data as CloudServiceModel);
     }
 };
+
+const { getProperRouteLocation } = useProperRouteLocation();
+
+interface RelatedAssetInfo {
+    provider: string; group: string; type: string; icon?: string;
+}
+type RelatedAsset = Partial<Pick<CloudServiceModel, 'cloud_service_group'|'cloud_service_type'|'provider'|'name'|'reference'>> & Pick<CloudServiceModel, 'cloud_service_id'>;
+const getIcon = (asset: RelatedAssetInfo): string|undefined => {
+    const key = `${asset.provider}.${asset.group}.${asset.type}`;
+    return cloudServiceTypeItems.value.find((item) => item.data.cloud_service_type_key === key)?.icon;
+};
+const relatedAssetInfo = computed<RelatedAssetInfo|undefined>(() => {
+    if (props.readonly) {
+        const asset = relatedAssets.value[0] as CloudServiceModel|undefined;
+        if (!asset) return undefined;
+        return {
+            provider: asset.provider,
+            group: asset.cloud_service_group,
+            type: asset.cloud_service_type,
+        };
+    }
+    const selected = selectedStates.value[0];
+    if (!selected?.[0]) return undefined;
+    const item = selected[0].data as CloudServiceTypeItem;
+    const [provider, group, type] = item.data.cloud_service_type_key.split('.');
+    return {
+        provider,
+        group,
+        type,
+        icon: item.icon,
+    };
+});
+const relatedAssets = ref<RelatedAsset[]>([]);
+const loading = ref(false);
+const error = ref<unknown|null>(null);
+onMounted(async () => {
+    if (props.readonly && props.value) {
+        try {
+            loading.value = true;
+            const res = await SpaceConnector.clientV2.inventory.cloudService.list<CloudServiceListParameters, ListResponse<CloudServiceModel>>({
+                query: {
+                    only: ['cloud_service_id', 'cloud_service_type', 'cloud_service_group', 'provider', 'name', 'reference.resource_id'],
+                    filter: [{
+                        k: 'cloud_service_id', v: props.value, o: 'in',
+                    }],
+                },
+            });
+            relatedAssets.value = res.results ?? [];
+        } catch (e) {
+            ErrorHandler.handleError(e);
+            error.value = e;
+            relatedAssets.value = props.value.map((cloudServiceId) => ({ cloud_service_id: cloudServiceId }));
+        } finally {
+            loading.value = false;
+        }
+    }
+});
 </script>
 
 <template>
@@ -88,24 +178,63 @@ const handleUpdateSelected = (stepIdx: number, selected: DataSelectorItem[]) =>
                    :invalid-text="invalidText"
                    no-spacing
     >
-        <div v-if="props.readonly">
-            {{ fieldValue.value ? fieldValue.value.join(', ') : '' }}
+        <div v-if="!props.readonly">
+            <div class="mt-1 flex overflow-x-auto border border-gray-200 rounded-lg"
+                 :class="{'border-red-500': isInvalid}"
+            >
+                <div v-for="(step, idx) in steps"
+                     :key="idx"
+                     class="flex-1 data-select-col"
+                >
+                    <data-selector :key="getStepKey(idx)"
+                                   :label="step.name"
+                                   :menu="step.menu"
+                                   :handler="step.handler"
+                                   :multi-selectable="idx === steps.length - 1"
+                                   :show-select-marker="idx === steps.length - 1"
+                                   @update:search-text="handleUpdateSearchKey(idx, $event)"
+                                   @update:selected="handleUpdateSelected(idx, $event)"
+                    />
+                </div>
+            </div>
         </div>
-        <div v-else
-             class="mt-1 flex overflow-x-auto border border-gray-200 rounded-lg"
-             :class="{'border-red-500': isInvalid}"
+        <div v-if="relatedAssetInfo"
+             class="pt-1"
         >
-            <div v-for="(step, idx) in steps"
-                 :key="idx"
-                 class="flex-1 data-select-col"
-            >
-                <data-selector :key="getStepKey(idx)"
-                               :label="step.name"
-                               :menu="step.menu"
-                               :handler="step.handler"
-                               @update:search-text="handleUpdateSearchKey(idx, $event)"
-                               @update:selected="handleUpdateSelected(idx, $event)"
+            <div class="flex items-center gap-1">
+                <p-lazy-img :src="getIcon(relatedAssetInfo)"
+                            :loading="loading"
+                            width="1.25rem"
+                            height="1.25rem"
                 />
+                <span class="pl-1 text-label-md">{{ relatedAssetInfo.group }} > {{ relatedAssetInfo.type }}</span>
+            </div>
+            <div class="mt-1 flex flex-wrap gap-1">
+                <div v-for="asset in relatedAssets"
+                     :key="asset.cloud_service_id"
+                >
+                    <p-link v-if="!error"
+                            new-tab
+                            highlight
+                            action-icon="internal-link"
+                            :to="getProperRouteLocation({
+                                name: ASSET_INVENTORY_ROUTE.CLOUD_SERVICE.DETAIL._NAME,
+                                params: {
+                                    provider: asset.provider,
+                                    group: asset.cloud_service_group,
+                                    name: asset.cloud_service_type,
+                                },
+                                query: {
+                                    filters: [JSON.stringify([asset.cloud_service_id, 'cloud_service_id'])],
+                                },
+                            })"
+                    >
+                        <span class="pl-1 text-label-md">{{ asset.name }} ({{ asset.reference.resource_id }})</span>
+                    </p-link>
+                    <span v-else
+                          class="pl-1 text-label-md"
+                    >{{ asset.cloud_service_id }}</span>
+                </div>
             </div>
         </div>
     </p-field-group>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
index 6e42a92f6e..2ffaff83b7 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { toRef, ref } from 'vue';
-
-import { isEqual } from 'lodash';
+import { watch, computed } from 'vue';
 
 import {
     PFieldGroup,
@@ -12,7 +10,6 @@ import type { ParagraphTaskField } from '@/schema/opsflow/_types/task-field-type
 import TextEditor from '@/common/components/editor/TextEditor.vue';
 import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
 import { useEditorContentTransformer } from '@/common/composables/editor-content-transformer';
-import { useFileAttachments } from '@/common/composables/file-attachments';
 import { useFileUploader } from '@/common/composables/file-uploader';
 
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
@@ -22,31 +19,35 @@ import type {
 } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 
 
-const props = withDefaults(defineProps<TaskFieldFormProps<ParagraphTaskField, string>>(), {
+const props = withDefaults(defineProps<TaskFieldFormProps<ParagraphTaskField, string|undefined>>(), {
     files: () => [],
 });
 
-const emit = defineEmits<TaskFieldFormEmits<string>>();
+const emit = defineEmits<TaskFieldFormEmits<string|undefined>>();
 
 const {
     fieldValue, updateFieldValue,
     isInvalid, invalidText,
 } = useTaskFieldValidation(props, emit);
 
-const { fileUploader } = useFileUploader();
-const { attachments } = useFileAttachments(toRef(props, 'files'));
-const handleUpdateAttachmentIds = (attachmentIds: string[]) => {
-    const originFileIds = props.files.map((f) => f.file_id);
-    if (isEqual(originFileIds, attachmentIds)) return;
-    emit('update:file-ids', attachmentIds);
-};
+const { fileUploader } = useFileUploader({
+    resourceGroup: 'PROJECT',
+});
+const {
+    contents,
+    editorContents,
+    fileIds,
+} = useEditorContentTransformer({
+    contents: computed(() => fieldValue.value ?? ''),
+    contentsType: 'markdown',
+    resourceGroup: 'PROJECT',
+    fileIds: props.files.map((f) => f.file_id),
+});
 
-const editorContent = ref(fieldValue.value);
-const { transformEditorContent } = useEditorContentTransformer();
-const handleUpdateEditorContent = (val: string) => {
-    editorContent.value = val;
-    updateFieldValue(transformEditorContent(val));
-};
+watch(contents, updateFieldValue);
+watch(fileIds, (ids) => {
+    emit('update:file-ids', ids);
+});
 </script>
 
 <template>
@@ -58,21 +59,18 @@ const handleUpdateEditorContent = (val: string) => {
     >
         <text-editor-viewer v-if="props.readonly"
                             class="my-1"
-                            :contents="fieldValue"
-                            :attachments="attachments"
+                            :contents="editorContents"
                             show-in-box
-                            content-type="markdown"
+                            contents-type="markdown"
         />
         <text-editor v-else
                      class="my-1"
-                     :value="editorContent"
+                     :value="editorContents"
                      :image-uploader="fileUploader"
-                     :attachments="attachments"
                      :placeholder="props.field.options?.example"
                      :invalid="isInvalid"
-                     content-type="markdown"
-                     @update:value="handleUpdateEditorContent"
-                     @update:attachment-ids="handleUpdateAttachmentIds"
+                     contents-type="markdown"
+                     @update:value="editorContents = $event"
         />
     </p-field-group>
 </template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
index a455108d4f..a38450d60a 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
+++ b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
@@ -1,11 +1,15 @@
 import type { FileModel } from '@/schema/file-manager/model';
 import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
 
+export interface References {
+  project_id?: string;
+}
 export interface TaskFieldFormProps<TField extends TaskField, TValue> {
   field: TField;
   value: TValue;
   readonly?: boolean;
   files?: FileModel[];
+  references?: References;
 }
 export interface TaskFieldFormEmits<TValue> {
   (event: 'update:value', value: TValue): void;
diff --git a/apps/web/src/services/ops-flow/task-management-templates/translations/ko.json b/apps/web/src/services/ops-flow/task-management-templates/translations/ko.json
index f470301228..285c834c68 100644
--- a/apps/web/src/services/ops-flow/task-management-templates/translations/ko.json
+++ b/apps/web/src/services/ops-flow/task-management-templates/translations/ko.json
@@ -16,7 +16,7 @@
 		"TaskCategory": "지원 카테고리",
 		"TaskType": "요청 타입",
 		"TemplateName": "서비스 데스크",
-		"landingDescription": "지원 요청을 쉽게 제출하고 추적하세요. 아래에서 카테고리와 요청 유형을 선택하여 시작하세요. 계정 관리, 청구 문의, 서비스 요청 등 어떤 도움이 필요하든지, Service Desk가 필요한 지원을 제공합니다.",
+		"landingDescription": "지원 요청을 간편하게 등록하고 관리할 수 있는 공간입니다.카테고리와 요청 유형을 선택하여 문제 해결을 시작하세요. 계정 관리, 결제 관련 문의, 서비스 요청 등 다양한 지원을 제공해드립니다.",
 		"task": "티켓",
 		"taskType": "요청 타입",
 		"taskTypes": "요청 타입",
diff --git a/package-lock.json b/package-lock.json
index e4f5e23300..8b85af85e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cloudforet-console",
-  "version": "2.0.0-dev264",
+  "version": "2.0.0-dev278",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cloudforet-console",
-      "version": "2.0.0-dev264",
+      "version": "2.0.0-dev278",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -166,7 +166,7 @@
       }
     },
     "apps/web": {
-      "version": "2.0.0-dev264",
+      "version": "2.0.0-dev278",
       "license": "Apache-2.0",
       "dependencies": {
         "@amcharts/amcharts5": "^5.4.7",
diff --git a/package.json b/package.json
index a68fc00235..6a9de9b0db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloudforet-console",
-  "version": "2.0.0-dev264",
+  "version": "2.0.0-dev278",
   "private": true,
   "workspaces": [
     "apps/*",
diff --git a/packages/core-lib/src/query/index.ts b/packages/core-lib/src/query/index.ts
index f6e45fb5b0..e92148cd84 100644
--- a/packages/core-lib/src/query/index.ts
+++ b/packages/core-lib/src/query/index.ts
@@ -225,7 +225,7 @@ export class QueryHelper {
 
     setOrFilters(orFilters: Required<ConsoleFilter>[]): this {
         orFilters.forEach((f) => {
-            if (f.k === undefined || f.o === undefined || f.o === '') {
+            if (f.k === undefined || f.o === undefined) {
                 throw new Error('QueryHelper: orFilter must have key and operator');
             }
         });
@@ -240,7 +240,7 @@ export class QueryHelper {
 
     addOrFilter(...orFilters: Required<ConsoleFilter>[]): this {
         orFilters.forEach((f) => {
-            if (f.k === undefined || f.o === undefined || f.o === '') {
+            if (f.k === undefined || f.o === undefined) {
                 throw new Error('QueryHelper: orFilter must have key and operator');
             }
         });
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index cf024808b7..3ce55f60d8 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -29330,6 +29330,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>AGGREGATE_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>ALT_E_ADD_GROUP_BY</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -30772,6 +30793,48 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>DIMENSIONS</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>DIMENSIONS_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>
                             <folder_node>
                                 <name>DISPLAY_ANNOTATION</name>
                                 <children>
@@ -45881,6 +45944,48 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>SANKEY_AXIS</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>SANKEY_AXIS_WARNING</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>STACK_BY</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -85919,7 +86024,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>ALL_CATEGORIES</name>
+                        <name>ALL_TASKS</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -86296,6 +86401,27 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>COLOR</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>CREATED_AT</name>
                         <definition_loaded>false</definition_loaded>
@@ -86761,6 +86887,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>GROUP_TYPE</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>JSON</name>
                                 <definition_loaded>false</definition_loaded>
@@ -87393,6 +87540,27 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>STATUS_TYPE</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>SUPPORT_PACKAGE</name>
                         <definition_loaded>false</definition_loaded>
@@ -88515,6 +88683,27 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>TOTAL_DURATION</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>
                     <folder_node>
                         <name>VALIDATION</name>
                         <children>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index f28479d405..768b63af36 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -1608,7 +1608,8 @@
 					"ADD_LABELS_DESC": "Add labels to enhance data clarity.",
 					"ADD_RULE": "Add Rule",
 					"ADVANCED_OPTIONS": "Advanced Options",
-					"ALT_E_ADD_GROUP_BY": "There can be a maximum of 3 group-by options.",
+					"AGGREGATE_DESC": "Combine and group label fields using aggregation",
+					"ALT_E_ADD_GROUP_BY": "There can be a maximum of 5 group-by options.",
 					"BASED_ON": "Based On",
 					"CASES": "Cases",
 					"CONCAT_DESC": "Combines multiple tables into one by stacking them.",
@@ -1644,7 +1645,7 @@
 					"FIELD_TYPE": "Field Type",
 					"FILTERS": "Filters",
 					"GROUP_BY": "Group by",
-					"GROUP_BY_HELP_TEXT": "Select up to 3 options to customize your view.",
+					"GROUP_BY_HELP_TEXT": "Select up to 5 options to customize your view.",
 					"JOIN_DESC": "Merge rows from different tables based on a common column. ",
 					"LEFT_KEY": "Left Key",
 					"LEFT_TABLE": "Left Table",
@@ -1682,6 +1683,8 @@
 			},
 			"DEFAULT_WIDTH": "Default Width",
 			"DELETE": "Delete",
+			"DIMENSIONS": "Dimensions",
+			"DIMENSIONS_DESC": "Select up to 3 options to customize your view.",
 			"DISPLAY_ANNOTATION": {
 				"DISPLAY_ANNOTATION": "Additional Info",
 				"INVALID_VALUE": "Please enter info.",
@@ -2501,6 +2504,7 @@
 					"DATE_RANGE_INVALID_RANGE_TEXT": "The start date must be earlier than the end date.",
 					"DEPRECATED_OPTION": "Deprecated Option",
 					"DESCRIPTION": "Description",
+					"DIMENSIONS": "Dimensions",
 					"DYNAMIC_FIELD": "Dynamic Field",
 					"EDIT_DATA": "Edit Data",
 					"END": "End",
@@ -4693,7 +4697,7 @@
 	},
 	"OPSFLOW": {
 		"ADD_TARGET": "Add {target}",
-		"ALL_CATEGORIES": "All Categories",
+		"ALL_TASKS": "All {tasks}",
 		"ALT_E_ADD_TARGET": "Failed to add {target}",
 		"ALT_E_ASSIGN": "Failed to assign member",
 		"ALT_E_CHANGE_DEFAULT_TARGET": "Failed to update {target} as default",
@@ -4711,6 +4715,7 @@
 		"ASSIGNEE": "Assignee",
 		"ASSIGNEE_POOL": "Assignee Pool",
 		"CATEGORY": "Category",
+		"COLOR": "Color",
 		"CREATED_AT": "Created At",
 		"CREATED_BY": "Created By",
 		"CREATE_TARGET": "Create {target}",
@@ -4734,6 +4739,7 @@
 			"FIELD_REQUIRED": "This Field is Required",
 			"FORM": "Form Input",
 			"GLOBAL": "Global",
+			"GROUP_TYPE": "Group > Type",
 			"JSON": "JSON Input",
 			"KEY": "Key",
 			"LABELS": "Labels",
@@ -4765,6 +4771,7 @@
 		"STATUS_COMPLETED": "Completed",
 		"STATUS_IN_PROGRESS": "In Progress",
 		"STATUS_TODO": "To-do",
+		"STATUS_TYPE": "Status Type",
 		"SUPPORT_PACKAGE": "Support Package",
 		"TARGET_LIST": "{target} List",
 		"TASK_BOARD": {
@@ -4796,7 +4803,7 @@
 				"DESC": "This groups types of {tasks}. Users select the appropriate category when submitting a {task}, helping the assignee manage {tasks} more efficiently."
 			},
 			"ENABLE_LANDING": "Enable Landing Page",
-			"ENABLE_LANDING_DESC": "Landing Page Description...",
+			"ENABLE_LANDING_DESC": "The landing page will be displayed under the OpsFlow.",
 			"PACKAGE": {
 				"ADDED": "Added",
 				"AFFECTED_DESC": "The affected {workspace} and {category} are as follows.",
@@ -4829,6 +4836,7 @@
 			"TEMPLATE_TYPE": "Template Type"
 		},
 		"TITLE": "Title",
+		"TOTAL_DURATION": "Total Duration",
 		"VALIDATION": {
 			"DUPLICATED": "{topic} already exists",
 			"ENUM_KEY_DUPLICATED": "Duplicate key found.",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index c2dbcc589b..79c07a5a37 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -1608,7 +1608,8 @@
 					"ADD_LABELS_DESC": "データの明確性を高めるためにラベルを追加してください。",
 					"ADD_RULE": "ルール追加",
 					"ADVANCED_OPTIONS": "詳細オプション",
-					"ALT_E_ADD_GROUP_BY": "最大で3つのグループ化オプションを選択できます。",
+					"AGGREGATE_DESC": "ラベルフィールドを結合およびグループ化して集計します。",
+					"ALT_E_ADD_GROUP_BY": "最大で5つのグループ化オプションを選択できます。",
 					"BASED_ON": "基準",
 					"CASES": "ケース",
 					"CONCAT_DESC": "複数のテーブルを1つに結合します。",
@@ -1644,7 +1645,7 @@
 					"FIELD_TYPE": "フィールドタイプ",
 					"FILTERS": "フィルター",
 					"GROUP_BY": "グループ別統計(Group by)",
-					"GROUP_BY_HELP_TEXT": "最大3つのオプションを選択して、ビューをお好みの形式で設定してください。",
+					"GROUP_BY_HELP_TEXT": "最大5つのオプションを選択して、ビューをお好みの形式で設定してください。",
 					"JOIN_DESC": "共通の列に基づいて、異なるテーブルの行を結合します。",
 					"LEFT_KEY": "左キー",
 					"LEFT_TABLE": "左テーブル",
@@ -1682,6 +1683,8 @@
 			},
 			"DEFAULT_WIDTH": "デフォルト幅",
 			"DELETE": "削除",
+			"DIMENSIONS": "",
+			"DIMENSIONS_DESC": "",
 			"DISPLAY_ANNOTATION": {
 				"DISPLAY_ANNOTATION": "追加情報",
 				"INVALID_VALUE": "情報を入力してください。",
@@ -2501,6 +2504,7 @@
 					"DATE_RANGE_INVALID_RANGE_TEXT": "開始日は終了日より前である必要があります。",
 					"DEPRECATED_OPTION": "非推奨オプション",
 					"DESCRIPTION": "説明",
+					"DIMENSIONS": "",
 					"DYNAMIC_FIELD": "ダイナミックフィールド",
 					"EDIT_DATA": "データを編集",
 					"END": "終了",
@@ -4693,7 +4697,7 @@
 	},
 	"OPSFLOW": {
 		"ADD_TARGET": "",
-		"ALL_CATEGORIES": "",
+		"ALL_TASKS": "",
 		"ALT_E_ADD_TARGET": "",
 		"ALT_E_ASSIGN": "",
 		"ALT_E_CHANGE_DEFAULT_TARGET": "",
@@ -4711,6 +4715,7 @@
 		"ASSIGNEE": "",
 		"ASSIGNEE_POOL": "",
 		"CATEGORY": "",
+		"COLOR": "",
 		"CREATED_AT": "",
 		"CREATED_BY": "",
 		"CREATE_TARGET": "",
@@ -4734,6 +4739,7 @@
 			"FIELD_REQUIRED": "",
 			"FORM": "",
 			"GLOBAL": "",
+			"GROUP_TYPE": "",
 			"JSON": "",
 			"KEY": "",
 			"LABELS": "",
@@ -4765,6 +4771,7 @@
 		"STATUS_COMPLETED": "",
 		"STATUS_IN_PROGRESS": "",
 		"STATUS_TODO": "",
+		"STATUS_TYPE": "",
 		"SUPPORT_PACKAGE": "",
 		"TARGET_LIST": "",
 		"TASK_BOARD": {
@@ -4829,6 +4836,7 @@
 			"TEMPLATE_TYPE": ""
 		},
 		"TITLE": "",
+		"TOTAL_DURATION": "",
 		"VALIDATION": {
 			"DUPLICATED": "",
 			"ENUM_KEY_DUPLICATED": "",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index e2530b3a11..bff86870ed 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -1132,7 +1132,7 @@
 			"HEADING1": "개요 1",
 			"HEADING2": "개요 2",
 			"HEADING3": "개요 3",
-			"NORMAL_TEXT": "바탕 글"
+			"NORMAL_TEXT": "본문"
 		},
 		"ERROR": {
 			"403_MSG": "이 페이지에 접근할 권한이 없습니다.",
@@ -1608,7 +1608,8 @@
 					"ADD_LABELS_DESC": "데이터의 명확성을 높이기 위해 레이블을 추가하세요.",
 					"ADD_RULE": "규칙 추가",
 					"ADVANCED_OPTIONS": "고급 설정 옵션",
-					"ALT_E_ADD_GROUP_BY": "Group-by는 최대 3개까지만 선택이 가능합니다.",
+					"AGGREGATE_DESC": "레이블 필드를 결합하고 그룹화하여 집계합니다.",
+					"ALT_E_ADD_GROUP_BY": "Group-by는 최대 5개까지만 선택이 가능합니다.",
 					"BASED_ON": "기준",
 					"CASES": "조건",
 					"CONCAT_DESC": "여러 테이블을 하나로 결합합니다.",
@@ -1644,7 +1645,7 @@
 					"FIELD_TYPE": "필드 타입",
 					"FILTERS": "필터",
 					"GROUP_BY": "그룹별 통계(Group by)",
-					"GROUP_BY_HELP_TEXT": "최대 3개의 옵션을 선택하여 보기를 원하는 방식으로 설정하세요.",
+					"GROUP_BY_HELP_TEXT": "최대 5개의 옵션을 선택하여 보기를 원하는 방식으로 설정하세요.",
 					"JOIN_DESC": "공통 열을 기준으로 다른 테이블의 행을 병합합니다.",
 					"LEFT_KEY": "왼쪽 키",
 					"LEFT_TABLE": "왼쪽 테이블",
@@ -1682,6 +1683,8 @@
 			},
 			"DEFAULT_WIDTH": "기본 너비",
 			"DELETE": "삭제",
+			"DIMENSIONS": "",
+			"DIMENSIONS_DESC": "",
 			"DISPLAY_ANNOTATION": {
 				"DISPLAY_ANNOTATION": "부가 정보 표시",
 				"INVALID_VALUE": "추가로 표시할 내용을 입력해주세요.",
@@ -2501,6 +2504,7 @@
 					"DATE_RANGE_INVALID_RANGE_TEXT": "시작 날짜는 종료 날짜보다 이전이어야 합니다.",
 					"DEPRECATED_OPTION": "지원 중지된 옵션",
 					"DESCRIPTION": "설명",
+					"DIMENSIONS": "",
 					"DYNAMIC_FIELD": "변동 데이터 필드",
 					"EDIT_DATA": "데이터 수정",
 					"END": "종료",
@@ -4693,7 +4697,7 @@
 	},
 	"OPSFLOW": {
 		"ADD_TARGET": "{target} 추가",
-		"ALL_CATEGORIES": "모든 카테고리",
+		"ALL_TASKS": "모든 {tasks}",
 		"ALT_E_ADD_TARGET": "{target} 추가 실패",
 		"ALT_E_ASSIGN": "담당자 할당 실패",
 		"ALT_E_CHANGE_DEFAULT_TARGET": "{target} 기본값 변경 실패",
@@ -4711,6 +4715,7 @@
 		"ASSIGNEE": "담당자",
 		"ASSIGNEE_POOL": "담당자 풀",
 		"CATEGORY": "카테고리",
+		"COLOR": "색상",
 		"CREATED_AT": "생성일",
 		"CREATED_BY": "생성자",
 		"CREATE_TARGET": "{target} 생성",
@@ -4734,6 +4739,7 @@
 			"FIELD_REQUIRED": "이 필드는 필수입니다",
 			"FORM": "폼 입력",
 			"GLOBAL": "글로벌",
+			"GROUP_TYPE": "그룹 > 타입",
 			"JSON": "JSON 입력",
 			"KEY": "키",
 			"LABELS": "라벨",
@@ -4765,6 +4771,7 @@
 		"STATUS_COMPLETED": "완료됨",
 		"STATUS_IN_PROGRESS": "진행 중",
 		"STATUS_TODO": "할 일",
+		"STATUS_TYPE": "상태 타입",
 		"SUPPORT_PACKAGE": "지원 패키지",
 		"TARGET_LIST": "{target} 목록",
 		"TASK_BOARD": {
@@ -4796,7 +4803,7 @@
 				"DESC": "이는 {tasks}의 유형을 그룹화한 것입니다. 사용자는 {task}{taskObjectParticle} 제출할 때 적절한 카테고리를 선택하여 담당자가 {tasks}{tasksObjectParticle} 더 효율적으로 관리할 수 있도록 돕습니다."
 			},
 			"ENABLE_LANDING": "랜딩 페이지 활성화",
-			"ENABLE_LANDING_DESC": "랜딩페이지를 사용하면 어떻게 되는지 Description",
+			"ENABLE_LANDING_DESC": "OpsFlow 메뉴 아래에 랜딩 페이지가 표시됩니다.",
 			"PACKAGE": {
 				"ADDED": "추가됨",
 				"AFFECTED_DESC": "영향 받는 {workspace}와 {category}는 다음과 같습니다.",
@@ -4829,6 +4836,7 @@
 			"TEMPLATE_TYPE": "템플릿 타입"
 		},
 		"TITLE": "제목",
+		"TOTAL_DURATION": "총 소요 시간",
 		"VALIDATION": {
 			"DUPLICATED": "이미 존재하는 {field}입니다",
 			"ENUM_KEY_DUPLICATED": "중복된 키가 존재합니다.",