diff --git a/apps/web/package.json b/apps/web/package.json
index 11c86a45fd..4da2126748 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -32,6 +32,7 @@
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-color": "^2.0.3",
     "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-placeholder": "^2.10.2",
     "@tiptap/extension-text-align": "^2.0.3",
     "@tiptap/extension-text-style": "^2.0.3",
     "@tiptap/extension-underline": "^2.0.3",
@@ -53,6 +54,7 @@
     "diff-match-patch": "^1.0.5",
     "echarts": "^5.5.0",
     "ejs": "^3.1.10",
+    "hangul-js": "^0.2.6",
     "hashids": "^2.2.1",
     "highlight.js": "^11.5.1",
     "html-to-image": "^1.9.0",
diff --git a/apps/web/src/common/components/editor/TextEditor.vue b/apps/web/src/common/components/editor/TextEditor.vue
index fc4521d044..f650b49f70 100644
--- a/apps/web/src/common/components/editor/TextEditor.vue
+++ b/apps/web/src/common/components/editor/TextEditor.vue
@@ -5,6 +5,7 @@ import {
 
 import { Color } from '@tiptap/extension-color';
 import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
 import TextAlign from '@tiptap/extension-text-align';
 import TextStyle from '@tiptap/extension-text-style';
 import Underline from '@tiptap/extension-underline';
@@ -23,6 +24,7 @@ interface Props {
     imageUploader?: ImageUploader<any>;
     attachments?: Attachment<any>[];
     invalid?: boolean;
+    placeholder?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
     value: '',
@@ -32,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
     }),
     attachments: () => [],
     invalid: false,
+    placeholder: '',
 });
 const emit = defineEmits<{(e: 'update:value', value: string): void;
     (e: 'update:attachments', attachments: Attachment<any>[]): void;
@@ -60,6 +63,9 @@ onMounted(() => {
                     },
                 },
             }),
+            Placeholder.configure({
+                placeholder: props.placeholder,
+            }),
             Underline,
             Link,
             TextStyle,
@@ -112,6 +118,15 @@ watch([() => props.value, () => props.attachments], ([value, attachments], prev)
             &:focus {
                 @apply outline-none;
             }
+
+            /* Placeholder (at the top) */
+            p.is-editor-empty:first-child::before {
+                @apply text-gray-400;
+                content: attr(data-placeholder);
+                float: left;
+                height: 0;
+                pointer-events: none;
+            }
         }
     }
 }
diff --git a/apps/web/src/common/components/editor/TextEditorViewer.vue b/apps/web/src/common/components/editor/TextEditorViewer.vue
index e4cdcf263a..b0af288449 100644
--- a/apps/web/src/common/components/editor/TextEditorViewer.vue
+++ b/apps/web/src/common/components/editor/TextEditorViewer.vue
@@ -7,12 +7,14 @@ import type { Attachment } from '@/common/components/editor/extensions/image/typ
 import { loadMonospaceFonts } from '@/styles/fonts';
 
 interface Props {
-    contents?: string,
-    attachments?: Attachment[]
+    contents?: string;
+    attachments?: Attachment[];
+    showInBox?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
     contents: '',
     attachments: () => [],
+    showInBox: false,
 });
 
 loadMonospaceFonts();
@@ -22,6 +24,7 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
 <template>
     <!--        eslint-disable-next-line vue/no-v-html-->
     <div class="text-editor-contents"
+         :class="{'contents-box': props.showInBox}"
          v-html="refinedContents"
     />
 </template>
@@ -31,6 +34,10 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
 .text-editor-contents {
     margin-left: 0.1rem;
 
+    &.contents-box {
+        @apply ml-0 p-2 min-h-21 border border-gray-300 rounded-md;
+    }
+
     @mixin all-nodes-style;
 
     img:active {
@@ -41,4 +48,4 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
         @apply ml-1;
     }
 }
-</style>
+</style>ㅕ
diff --git a/apps/web/src/common/components/inputs/LabelsInput.vue b/apps/web/src/common/components/inputs/LabelsInput.vue
new file mode 100644
index 0000000000..2613ddda97
--- /dev/null
+++ b/apps/web/src/common/components/inputs/LabelsInput.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+// CAUTION: this vOnClickOutside is using !! Please do not remove.
+import { vOnClickOutside } from '@vueuse/components';
+import {
+    watch, ref,
+} from 'vue';
+
+import {
+    PIconButton, PLabel, PTextInput,
+} from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+const props = defineProps<{
+    labels?: string[];
+    editable?: boolean;
+}>();
+const emit = defineEmits<{(event: 'update:labels', value: string[]): void;
+}>();
+
+
+const labelList = ref<string[]>([]);
+
+const {
+    value, setValue, isInvalid, invalidText,
+} = useFieldValidator(
+    '',
+    (val: string) => {
+        if (val.length > 30) return i18n.t('DASHBOARDS.CUSTOMIZE.VALIDATION_LIMITED_CHAR_LABEL');
+        if (labelList.value.find((d) => d === val)) return i18n.t('DASHBOARDS.CUSTOMIZE.VALIDATION_DUPLICATED_LABEL');
+        return '';
+    },
+);
+
+const inputMode = ref(false);
+const isInputFocused = ref(false);
+
+const handleClickPlus = async () => {
+    inputMode.value = true;
+    isInputFocused.value = true;
+};
+const handleKeyEscape = () => {
+    inputMode.value = false;
+    setValue('');
+};
+const handleKeyEnter = (e: KeyboardEvent) => {
+    if (e.isComposing || !value.value || isInvalid.value) return;
+    labelList.value.push(value.value);
+    setValue('');
+    emit('update:labels', labelList.value);
+};
+const handleClickDelete = (index: number) => {
+    labelList.value.splice(index, 1);
+    emit('update:labels', labelList.value);
+};
+watch(() => props.labels, (newLabels) => {
+    labelList.value = newLabels || [];
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="flex flex-wrap items-start gap-1 min-h-8"
+         @keydown.esc="handleKeyEscape"
+         @keydown.enter="handleKeyEnter"
+    >
+        <div class="flex flex-wrap items-center gap-1 min-h-6">
+            <p-label
+                v-for="(label, index) in labelList"
+                :key="`dashboard-label-${index}`"
+                :text="label"
+                :deletable="props.editable"
+                @delete="handleClickDelete(index)"
+            />
+            <p-icon-button v-if="!inputMode && props.editable"
+                           class="mr-1"
+                           style-type="tertiary"
+                           name="ic_plus_bold"
+                           size="sm"
+                           shape="square"
+                           @click="handleClickPlus"
+            />
+            <template v-if="!inputMode && !labelList.length">
+                <span v-if="props.editable"
+                      class="text-gray-500 text-xs pt-1 cursor-pointer"
+                      @click="handleClickPlus"
+                >
+                    {{ $t('DASHBOARDS.CUSTOMIZE.ADD_LABEL') }}
+                </span>
+                <div v-else
+                     class="text-gray-300 text-xs"
+                >
+                    {{ $t('DASHBOARDS.CUSTOMIZE.NO_LABEL') }}
+                </div>
+            </template>
+        </div>
+        <div v-if="inputMode"
+             v-on-click-outside="handleKeyEscape"
+             class="min-w-40 max-w-40"
+        >
+            <p-text-input :value="value"
+                          :is-focused="isInputFocused"
+                          :invalid="isInvalid"
+                          block
+                          size="sm"
+                          :placeholder="$t('DASHBOARDS.CUSTOMIZE.ENTER_NEW_LABEL')"
+                          @update:value="setValue"
+                          @update:is-focused="isInputFocused = $event"
+            />
+            <p v-if="isInvalid"
+               class="text-label-sm text-alert mt-1"
+            >
+                {{ invalidText }}
+            </p>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/common/components/modals/DeleteModal.vue b/apps/web/src/common/components/modals/DeleteModal.vue
index 607ee52c05..52590c4399 100644
--- a/apps/web/src/common/components/modals/DeleteModal.vue
+++ b/apps/web/src/common/components/modals/DeleteModal.vue
@@ -12,6 +12,7 @@
                     :hide-header-close-button="hideCloseButton"
                     @confirm="handleConfirm"
                     @close="$emit('close')"
+                    @closed="$emit('closed')"
                     @cancel="$emit('cancel')"
     >
         <template #body>
diff --git a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
index 39f5b9bb7c..c5147a3a18 100644
--- a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
+++ b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
@@ -114,12 +114,20 @@ const handleMenuDescription = (value?: boolean) => {
 const handleMinimizedGnbRail = () => {
     gnbStore.createMinimizeNavRail(!gnbGetters.isMinimizeNavRail);
 };
-const convertGNBMenuToMenuItem = (menuList: DisplayMenu[], menuType: ContextMenuType = 'item'): GNBMenuType[] => menuList.map((menu) => ({
-    ...menu,
-    name: menu.id,
-    type: menuType,
-    disabled: menuType === 'header' && menu.id.includes('cost'),
-}));
+const convertGNBMenuToMenuItem = (menuList: DisplayMenu[], menuType: ContextMenuType = 'item'): GNBMenuType[] => {
+    const results: GNBMenuType[] = [];
+    menuList.forEach((menu) => {
+        if (!menu.hideOnGNB && !menu.hideOnSiteMap) {
+            results.push({
+                ...menu,
+                name: menu.id,
+                type: menuType,
+                disabled: menuType === 'header' && menu.id.includes('cost'),
+            });
+        }
+    });
+    return results;
+};
 const refinedMenuList = (list, value) => {
     const index = list.findIndex((d) => d.id === value);
     if (index !== -1) {
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index 478b56bbdf..0598452484 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -47,6 +47,9 @@ interface Props {
     workspaceId?: string;
     isInitSelectedItem?: boolean;
     block?: boolean;
+    styleType?: string;
+    appearanceType?: 'stack';
+    showDeleteAllButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,6 +67,9 @@ const props = withDefaults(defineProps<Props>(), {
     hideCreateButton: false,
     workspaceId: undefined,
     isInitSelectedItem: false,
+    styleType: undefined,
+    appearanceType: undefined,
+    showDeleteAllButton: undefined,
 });
 
 const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
@@ -303,8 +309,10 @@ watch(() => state._selectedProjectIds, (selectedProjectIds) => {
                            :readonly="props.readonly"
                            :menu-position="props.position"
                            disable-handler
+                           :show-delete-all-button="props.showDeleteAllButton"
+                           :style-type="props.styleType"
                            :block="props.block"
-                           appearance-type="stack"
+                           :appearance-type="props.appearanceType"
                            :is-filterable="!props.readonly"
                            @update:visible-menu="handleUpdateVisibleMenu"
                            @delete-tag="handleDeleteTag"
diff --git a/apps/web/src/common/modules/user/UserSelectDropdown.vue b/apps/web/src/common/modules/user/UserSelectDropdown.vue
index adea15bd46..17138392e5 100644
--- a/apps/web/src/common/modules/user/UserSelectDropdown.vue
+++ b/apps/web/src/common/modules/user/UserSelectDropdown.vue
@@ -28,6 +28,10 @@ const props = withDefaults(defineProps<{
      disabled?: boolean;
      readonly?: boolean;
      userPool?: string[];
+     selectionLabel?: string;
+     appearanceType?: string;
+     styleType?: string;
+     block?: boolean;
 }>(), {
     userId: '',
     userIds: () => [],
@@ -36,6 +40,10 @@ const props = withDefaults(defineProps<{
     invalid: false,
     disabled: false,
     userPool: undefined,
+    selectionLabel: undefined,
+    appearanceType: 'badge',
+    styleType: undefined,
+    block: undefined,
 });
 
 const emit = defineEmits<{(event: 'update:user-ids', value: string[]): void;
@@ -122,7 +130,8 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
 </script>
 
 <template>
-    <p-select-dropdown show-select-marker
+    <p-select-dropdown class="user-select-dropdown"
+                       show-select-marker
                        :selected="selectedUserItems"
                        :handler="userMenuItemsHandler"
                        :page-size="10"
@@ -133,7 +142,16 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
                        :use-fixed-menu-style="useFixedMenuStyle"
                        show-delete-all-button
                        :multi-selectable="props.selectionType === 'multiple'"
-                       appearance-type="badge"
+                       :selection-label="props.selectionLabel"
+                       :appearance-type="props.appearanceType"
+                       :style-type="props.styleType"
+                       :block="props.block"
                        @update:selected="handleUpdateSelectedUserItems"
     />
 </template>
+
+<style scoped lang="postcss">
+.user-select-dropdown {
+    width: fit-content;
+}
+</style>
diff --git a/apps/web/src/lib/access-control/config.ts b/apps/web/src/lib/access-control/config.ts
index 7b71c8c132..147e5e6beb 100644
--- a/apps/web/src/lib/access-control/config.ts
+++ b/apps/web/src/lib/access-control/config.ts
@@ -45,6 +45,9 @@ export const WORKSPACE_OWNER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.NOTIFICATIONS,
     MENU_ID.INFO,
     MENU_ID.NOTICE,
+    MENU_ID.OPS_FLOW,
+    MENU_ID.OPS_FLOW_LANDING,
+    MENU_ID.TASK_BOARD,
 ];
 export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.WORKSPACE_HOME,
@@ -68,6 +71,9 @@ export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.NOTIFICATIONS,
     MENU_ID.INFO,
     MENU_ID.NOTICE,
+    MENU_ID.OPS_FLOW,
+    MENU_ID.OPS_FLOW_LANDING,
+    MENU_ID.TASK_BOARD,
 ];
 
 // HACK: this need to be changed with new SYSTEM domain planning
diff --git a/apps/web/src/lib/menu/config.ts b/apps/web/src/lib/menu/config.ts
index 5ce525a705..590975eb28 100644
--- a/apps/web/src/lib/menu/config.ts
+++ b/apps/web/src/lib/menu/config.ts
@@ -41,6 +41,10 @@ export const MENU_ID = Object.freeze({
     INFO: 'info',
     NOTICE: 'notice',
     METRIC_EXPLORER: 'metric_explorer',
+    OPS_FLOW: 'ops_flow',
+    OPS_FLOW_LANDING: 'ops_flow_landing',
+    TASK_BOARD: 'task_board',
+    TASK_MANAGEMENT: 'task_management',
 } as const);
 
 export type MenuId = typeof MENU_ID[keyof typeof MENU_ID];
diff --git a/apps/web/src/lib/menu/menu-architecture.ts b/apps/web/src/lib/menu/menu-architecture.ts
index 733d69a2c0..c40452cc89 100644
--- a/apps/web/src/lib/menu/menu-architecture.ts
+++ b/apps/web/src/lib/menu/menu-architecture.ts
@@ -41,6 +41,14 @@ export const MENU_LIST: Menu[] = [
             { id: MENU_ID.ESCALATION_POLICY, needPermissionByRole: true },
         ],
     },
+    {
+        id: MENU_ID.OPS_FLOW,
+        needPermissionByRole: true,
+        subMenuList: [
+            { id: MENU_ID.OPS_FLOW_LANDING },
+            { id: MENU_ID.TASK_BOARD },
+        ],
+    },
     {
 
         id: MENU_ID.IAM,
@@ -97,6 +105,12 @@ export const ADMIN_MENU_LIST: Menu[] = [
             { id: MENU_ID.COST_ADVANCED_SETTINGS },
         ],
     },
+    {
+        id: MENU_ID.OPS_FLOW,
+        subMenuList: [
+            { id: MENU_ID.TASK_MANAGEMENT },
+        ],
+    },
     {
         id: MENU_ID.IAM,
         subMenuList: [
diff --git a/apps/web/src/lib/menu/menu-info.ts b/apps/web/src/lib/menu/menu-info.ts
index fd9ed64bde..cd7b0b7c4d 100644
--- a/apps/web/src/lib/menu/menu-info.ts
+++ b/apps/web/src/lib/menu/menu-info.ts
@@ -9,6 +9,7 @@ import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { IAM_ROUTE } from '@/services/iam/routes/route-constant';
 import { INFO_ROUTE } from '@/services/info/routes/route-constant';
 import { MY_PAGE_ROUTE } from '@/services/my-page/routes/route-constant';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
 import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
 import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
 
@@ -249,4 +250,28 @@ export const MENU_INFO_MAP: Record<MenuId, MenuInfo> = Object.freeze({
         translationId: 'MENU.INFO_NOTICE',
         icon: 'ic_gnb_bell',
     },
+    [MENU_ID.OPS_FLOW]: {
+        menuId: MENU_ID.OPS_FLOW,
+        routeName: OPS_FLOW_ROUTE._NAME,
+        translationId: 'MENU.OPS_FLOW',
+        icon: 'ic_gnb_bell', // TODO: change icon
+    },
+    [MENU_ID.OPS_FLOW_LANDING]: {
+        menuId: MENU_ID.OPS_FLOW_LANDING,
+        routeName: OPS_FLOW_ROUTE.LANDING._NAME,
+        translationId: 'OpsFlow Landing', // It will be replaced by task management template
+        icon: 'ic_service_service-desk',
+    },
+    [MENU_ID.TASK_BOARD]: {
+        menuId: MENU_ID.TASK_BOARD,
+        routeName: OPS_FLOW_ROUTE.BOARD._NAME,
+        translationId: 'Board', // It will be replaced by task management template
+        icon: 'ic_service_board',
+    },
+    [MENU_ID.TASK_MANAGEMENT]: {
+        menuId: MENU_ID.TASK_MANAGEMENT,
+        routeName: OPS_FLOW_ROUTE.TASK_MANAGEMENT._NAME,
+        translationId: 'MENU.TASK_MANAGEMENT',
+        icon: 'ic_service_task-management',
+    },
 });
diff --git a/apps/web/src/lib/site-initializer/api-client.ts b/apps/web/src/lib/site-initializer/api-client.ts
index f5a50462bc..aeaa44ca70 100644
--- a/apps/web/src/lib/site-initializer/api-client.ts
+++ b/apps/web/src/lib/site-initializer/api-client.ts
@@ -284,6 +284,16 @@ const getAfterCallApiMap = () => ({
         const allReferenceStore = useAllReferenceStore();
         allReferenceStore.sync('workspace', data);
     },
+    '/identity/workspace/add-package': (data) => {
+        useAllReferenceStore(pinia);
+        const allReferenceStore = useAllReferenceStore();
+        allReferenceStore.sync('workspace', data);
+    },
+    '/identity/workspace/remove-package': (data) => {
+        useAllReferenceStore(pinia);
+        const allReferenceStore = useAllReferenceStore();
+        allReferenceStore.sync('workspace', data);
+    },
 });
 
 const getSessionTimeoutCallback = () => () => {
diff --git a/apps/web/src/lib/site-initializer/index.ts b/apps/web/src/lib/site-initializer/index.ts
index bb6cb7c742..d927d35162 100644
--- a/apps/web/src/lib/site-initializer/index.ts
+++ b/apps/web/src/lib/site-initializer/index.ts
@@ -24,6 +24,7 @@ import { initDomain } from '@/lib/site-initializer/domain';
 import { initDomainSettings } from '@/lib/site-initializer/domain-settings';
 import { initEcharts } from '@/lib/site-initializer/echarts';
 import { initErrorHandler } from '@/lib/site-initializer/error-handler';
+import { initTaskManagementTemplate } from '@/lib/site-initializer/initTaskManagementTemplate';
 import { initModeSetting } from '@/lib/site-initializer/mode-setting';
 import { checkSsoAccessToken } from '@/lib/site-initializer/sso';
 import { initUserAndAuth } from '@/lib/site-initializer/user-auth';
@@ -83,7 +84,19 @@ const init = async () => {
         initEcharts();
         initErrorHandler();
         initRequestIdleCallback();
-        await checkSsoAccessToken();
+        const results = await Promise.allSettled([
+            checkSsoAccessToken(),
+            initTaskManagementTemplate(),
+        ]);
+        const errors: any[] = [];
+        results.forEach((result) => {
+            if (result.status === 'rejected') {
+                errors.push(result.reason);
+            }
+        });
+        if (errors.length > 0) {
+            throw errors;
+        }
     } catch (e) {
         if (!isRouterInitialized) initRouter();
         throw e;
diff --git a/apps/web/src/lib/site-initializer/initTaskManagementTemplate.ts b/apps/web/src/lib/site-initializer/initTaskManagementTemplate.ts
new file mode 100644
index 0000000000..5d96b71168
--- /dev/null
+++ b/apps/web/src/lib/site-initializer/initTaskManagementTemplate.ts
@@ -0,0 +1,13 @@
+import { pinia } from '@/store/pinia';
+
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+export const initTaskManagementTemplate = async () => {
+    const taskManagementTemplateStore = useTaskManagementTemplateStore(pinia);
+    await Promise.allSettled([
+        taskManagementTemplateStore.setInitialTemplateId(),
+        taskManagementTemplateStore.setInitialLandingData(),
+    ]);
+};
diff --git a/apps/web/src/router/admin-routes.ts b/apps/web/src/router/admin-routes.ts
index 6678e42e23..9c93483dd0 100644
--- a/apps/web/src/router/admin-routes.ts
+++ b/apps/web/src/router/admin-routes.ts
@@ -6,6 +6,7 @@ import adminCostExplorerRoutes from '@/services/cost-explorer/routes/admin/route
 import adminDashboardsRoutes from '@/services/dashboards/routes/admin/routes';
 import adminIamRoutes from '@/services/iam/routes/admin/routes';
 import adminInfoRoute from '@/services/info/routes/admin/routes';
+import adminOpsFlowRoutes from '@/services/ops-flow/routes/admin/routes';
 import adminWorkspaceHomeRoutes from '@/services/workspace-home/routes/admin/routes';
 
 
@@ -17,4 +18,5 @@ export const adminRoutes: RouteConfig[] = [
     adminIamRoutes,
     adminAdvancedRoutes,
     adminInfoRoute,
+    adminOpsFlowRoutes,
 ];
diff --git a/apps/web/src/router/constant.ts b/apps/web/src/router/constant.ts
index 7976e1437d..3d43865e7f 100644
--- a/apps/web/src/router/constant.ts
+++ b/apps/web/src/router/constant.ts
@@ -30,9 +30,13 @@ export const EXTERNAL_PAGE_ROUTE = {
     ALERT_PUBLIC_DETAIL: {
         _NAME: 'alert-public-detail',
     },
+    OPS_FLOW_LANDING: {
+        _NAME: 'ops-flow-landing',
+    },
 } as const;
 
 export const EXTERNAL_PAGES = [
     EXTERNAL_PAGE_ROUTE.COST_REPORT_DETAIL._NAME,
     EXTERNAL_PAGE_ROUTE.ALERT_PUBLIC_DETAIL._NAME,
+    EXTERNAL_PAGE_ROUTE.OPS_FLOW_LANDING._NAME,
 ];
diff --git a/apps/web/src/router/external-routes.ts b/apps/web/src/router/external-routes.ts
index 931157bfaf..ad8bdf635c 100644
--- a/apps/web/src/router/external-routes.ts
+++ b/apps/web/src/router/external-routes.ts
@@ -5,6 +5,8 @@ import { EXTERNAL_PAGE_ROUTE } from '@/router/constant';
 import AlertPublicDetailPage from '@/common/pages/AlertPublicDetailPage.vue';
 import CostReportDetailPage from '@/common/pages/CostReportDetailPage.vue';
 
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+
 export const externalRoutes: RouteConfig[] = [
     {
         path: '/cost-report-detail',
@@ -24,4 +26,9 @@ export const externalRoutes: RouteConfig[] = [
         }),
         component: AlertPublicDetailPage,
     },
+    {
+        path: '/ops-flow-landing',
+        name: EXTERNAL_PAGE_ROUTE.OPS_FLOW_LANDING._NAME,
+        redirect: { name: OPS_FLOW_ROUTE.LANDING._NAME },
+    },
 ];
diff --git a/apps/web/src/router/workspace-routes.ts b/apps/web/src/router/workspace-routes.ts
index 132ba5c52b..a35b1f7698 100644
--- a/apps/web/src/router/workspace-routes.ts
+++ b/apps/web/src/router/workspace-routes.ts
@@ -7,6 +7,7 @@ import costExplorerRoute from '@/services/cost-explorer/routes/routes';
 import dashboardsRoute from '@/services/dashboards/routes/routes';
 import iamRoutes from '@/services/iam/routes/routes';
 import infoRoute from '@/services/info/routes/routes';
+import opsFlowRoutes from '@/services/ops-flow/routes/routes';
 import projectRoute from '@/services/project/routes/routes';
 import workspaceHomeRoute from '@/services/workspace-home/routes/routes';
 
@@ -20,4 +21,5 @@ export const workspaceRoutes: RouteConfig[] = [
     alertManagerRoute,
     costExplorerRoute,
     infoRoute,
+    opsFlowRoutes,
 ];
diff --git a/apps/web/src/schema/config/public-config/api-verbs/create.ts b/apps/web/src/schema/config/public-config/api-verbs/create.ts
index 7f970ad312..c119c82a3d 100644
--- a/apps/web/src/schema/config/public-config/api-verbs/create.ts
+++ b/apps/web/src/schema/config/public-config/api-verbs/create.ts
@@ -1,5 +1,8 @@
+import type { ResourceGroupType } from '@/schema/_common/type';
+
 export interface PublicConfigCreateParameters<T = Record<string, any>> {
     name: string;
     data: T;
+    resource_group: ResourceGroupType;
     tags?: Record<string, any>;
 }
diff --git a/apps/web/src/schema/config/public-config/api-verbs/get-accesible-configs.ts b/apps/web/src/schema/config/public-config/api-verbs/get-accesible-configs.ts
new file mode 100644
index 0000000000..0b8e27f8d0
--- /dev/null
+++ b/apps/web/src/schema/config/public-config/api-verbs/get-accesible-configs.ts
@@ -0,0 +1,6 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+export interface PublicConfigGetAccessibleConfigsParameters {
+  query?: Query;
+  name?: string;
+}
diff --git a/apps/web/src/schema/config/public-config/api-verbs/get.ts b/apps/web/src/schema/config/public-config/api-verbs/get.ts
new file mode 100644
index 0000000000..3b45a0cadc
--- /dev/null
+++ b/apps/web/src/schema/config/public-config/api-verbs/get.ts
@@ -0,0 +1,5 @@
+export interface PublicConfigGetParameters {
+    name: string;
+    project_id?: string;
+    workspace_id?: string;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/change-order.ts b/apps/web/src/schema/identity/package/api-verbs/change-order.ts
new file mode 100644
index 0000000000..87c720614f
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/change-order.ts
@@ -0,0 +1,4 @@
+export interface PackageChangeOrderParameters {
+    package_id: string;
+    order: number;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/create.ts b/apps/web/src/schema/identity/package/api-verbs/create.ts
new file mode 100644
index 0000000000..e0e27e9f6a
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/create.ts
@@ -0,0 +1,7 @@
+import type { Tags } from '@/schema/_common/model';
+
+export interface PackageCreateParameters {
+    name: string;
+    description?: string;
+    tags?: Tags;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/delete.ts b/apps/web/src/schema/identity/package/api-verbs/delete.ts
new file mode 100644
index 0000000000..6f9cefd3b8
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/delete.ts
@@ -0,0 +1,3 @@
+export interface PackageDeleteParameters {
+    package_id: string;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/get.ts b/apps/web/src/schema/identity/package/api-verbs/get.ts
new file mode 100644
index 0000000000..b3f456d61d
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface PackageGetParameters {
+    package_id: string;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/list.ts b/apps/web/src/schema/identity/package/api-verbs/list.ts
new file mode 100644
index 0000000000..37cf16cdb0
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/list.ts
@@ -0,0 +1,7 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+export interface PackageListParameters {
+    query?: Query;
+    package_id?: string;
+    name?: string;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/set-default.ts b/apps/web/src/schema/identity/package/api-verbs/set-default.ts
new file mode 100644
index 0000000000..43b2b848f4
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/set-default.ts
@@ -0,0 +1,3 @@
+export interface PackageSetDefaultParameters {
+    package_id: string;
+}
diff --git a/apps/web/src/schema/identity/package/api-verbs/update.ts b/apps/web/src/schema/identity/package/api-verbs/update.ts
new file mode 100644
index 0000000000..48d7f17267
--- /dev/null
+++ b/apps/web/src/schema/identity/package/api-verbs/update.ts
@@ -0,0 +1,8 @@
+import type { Tags } from '@/schema/_common/model';
+
+export interface PackageUpdateParameters {
+    package_id: string;
+    name?: string;
+    description?: string;
+    tags?: Tags;
+}
diff --git a/apps/web/src/schema/identity/package/model.ts b/apps/web/src/schema/identity/package/model.ts
new file mode 100644
index 0000000000..50cab3071d
--- /dev/null
+++ b/apps/web/src/schema/identity/package/model.ts
@@ -0,0 +1,13 @@
+import type { Tags } from '@/schema/_common/model';
+
+export interface PackageModel {
+    package_id: string;
+    name: string;
+    description?: string;
+    order: number;
+    is_default: boolean;
+    tags: Tags;
+    domain_id: string;
+    created_at: string;
+    updated_at: string;
+}
diff --git a/apps/web/src/schema/identity/workspace/api-verbs/add-package.ts b/apps/web/src/schema/identity/workspace/api-verbs/add-package.ts
new file mode 100644
index 0000000000..221ed20173
--- /dev/null
+++ b/apps/web/src/schema/identity/workspace/api-verbs/add-package.ts
@@ -0,0 +1,4 @@
+export interface WorkspaceAddPackageParameters {
+    workspace_id: string;
+    package_id: string;
+}
diff --git a/apps/web/src/schema/identity/workspace/api-verbs/create.ts b/apps/web/src/schema/identity/workspace/api-verbs/create.ts
index a39555a323..0a6c2c51f6 100644
--- a/apps/web/src/schema/identity/workspace/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/workspace/api-verbs/create.ts
@@ -3,4 +3,5 @@ import type { Tags } from '@/schema/_common/model';
 export interface WorkspaceCreateParameters {
     name: string;
     tags?: Tags;
+    package_id?: string;
 }
diff --git a/apps/web/src/schema/identity/workspace/api-verbs/remove-package.ts b/apps/web/src/schema/identity/workspace/api-verbs/remove-package.ts
new file mode 100644
index 0000000000..c76f80c2af
--- /dev/null
+++ b/apps/web/src/schema/identity/workspace/api-verbs/remove-package.ts
@@ -0,0 +1,4 @@
+export interface WorkspaceRemovePackageParameters {
+    workspace_id: string;
+    package_id: string;
+}
diff --git a/apps/web/src/schema/identity/workspace/model.ts b/apps/web/src/schema/identity/workspace/model.ts
index bf2d6f0a9a..622b31e295 100644
--- a/apps/web/src/schema/identity/workspace/model.ts
+++ b/apps/web/src/schema/identity/workspace/model.ts
@@ -6,6 +6,7 @@ export interface WorkspaceModel {
     workspace_id: string;
     name: string;
     state: WorkspaceState;
+    packages: string[];
     tags: Tags;
     is_managed?: boolean;
     reference_id?: string;
diff --git a/apps/web/src/schema/opsflow/_types/task-field-type.ts b/apps/web/src/schema/opsflow/_types/task-field-type.ts
new file mode 100644
index 0000000000..3ae1865769
--- /dev/null
+++ b/apps/web/src/schema/opsflow/_types/task-field-type.ts
@@ -0,0 +1,51 @@
+export type TaskFieldType = |'GLOBAL'
+    |'TEXT'|'PARAGRAPH'|'LABELS'|'DROPDOWN'|'DATE'
+    |'USER'|'ASSET'|'PROJECT'|'PROVIDER'|'SERVICE_ACCOUNT';
+
+export type TaskFieldSelectionType = 'SINGLE'|'MULTI';
+
+/* options */
+export type TaskFieldEnum = {
+    key: string;
+    name: string;
+};
+interface TextTaskFieldOptions {
+    example?: string;
+}
+export interface ParagraphTaskFieldOptions {
+    example?: string;
+}
+export interface DropdownTaskFieldOptions {
+    enums: TaskFieldEnum[];
+}
+interface OtherTaskFieldOptions {
+    [key: string]: never;
+}
+export type TaskFieldOptions = TextTaskFieldOptions | ParagraphTaskFieldOptions | DropdownTaskFieldOptions | OtherTaskFieldOptions;
+
+/* task field */
+interface BaseTaskField {
+    field_id: string;
+    name: string;
+    description?: string;
+    field_type: TaskFieldType;
+    selection_type?: TaskFieldSelectionType;
+    is_required?: boolean;
+    is_primary?: boolean; // whether to display field during task creation
+}
+export interface TextTaskField extends BaseTaskField {
+    field_type: 'TEXT';
+    options?: TextTaskFieldOptions;
+}
+export interface ParagraphTaskField extends BaseTaskField {
+    field_type: 'PARAGRAPH';
+    options?: ParagraphTaskFieldOptions;
+}
+export interface DropdownTaskField extends BaseTaskField {
+    field_type: 'DROPDOWN';
+    options?: DropdownTaskFieldOptions;
+}
+export interface OtherTaskField extends BaseTaskField {
+    field_type: Exclude<TaskFieldType, 'TEXT'|'PARAGRAPH'|'DROPDOWN'>;
+}
+export type TaskField = TextTaskField | ParagraphTaskField | DropdownTaskField | OtherTaskField;
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/create.ts b/apps/web/src/schema/opsflow/comment/api-verbs/create.ts
new file mode 100644
index 0000000000..3dfad8bce1
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/api-verbs/create.ts
@@ -0,0 +1,7 @@
+import type { MentionTargets } from '@/schema/opsflow/comment/type';
+
+export interface CommentCreateParameters {
+    task_id: string;
+    comment: string;
+    mentions?: MentionTargets;
+}
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/delete.ts b/apps/web/src/schema/opsflow/comment/api-verbs/delete.ts
new file mode 100644
index 0000000000..6c823ab977
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/api-verbs/delete.ts
@@ -0,0 +1,3 @@
+export interface CommentDeleteParameters {
+    comment_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/get.ts b/apps/web/src/schema/opsflow/comment/api-verbs/get.ts
new file mode 100644
index 0000000000..130703ac97
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface CommentGetParameters {
+    comment_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/list.ts b/apps/web/src/schema/opsflow/comment/api-verbs/list.ts
new file mode 100644
index 0000000000..4d58e07bd0
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/api-verbs/list.ts
@@ -0,0 +1,14 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+import type { CommentType } from '@/schema/opsflow/comment/type';
+
+export interface CommentListParameters {
+    query?: Query;
+    task_id?: string;
+    comment_id?: string;
+    comment_type?: CommentType;
+    user_id?: string;
+    user_group_id?: string;
+    project_id?: string;
+    workspace_id?: string;
+}
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/update.ts b/apps/web/src/schema/opsflow/comment/api-verbs/update.ts
new file mode 100644
index 0000000000..bdb9a66df7
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/api-verbs/update.ts
@@ -0,0 +1,7 @@
+import type { MentionTargets } from '@/schema/opsflow/comment/type';
+
+export interface CommentUpdateParameters {
+    comment_id: string;
+    comment: string;
+    mentions?: MentionTargets;
+}
diff --git a/apps/web/src/schema/opsflow/comment/model.ts b/apps/web/src/schema/opsflow/comment/model.ts
new file mode 100644
index 0000000000..d08f307f88
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/model.ts
@@ -0,0 +1,16 @@
+import type { CommentType, MentionTargets } from '@/schema/opsflow/comment/type';
+
+export interface CommentModel {
+    comment_id: string;
+    comment: string;
+    comment_type: CommentType;
+    created_by: string;
+    is_edited: boolean;
+    mentions: MentionTargets;
+    task_id: string;
+    project_id: string;
+    workspace_id: string;
+    domain_id: string;
+    created_at: string;
+    updated_at: string;
+}
diff --git a/apps/web/src/schema/opsflow/comment/type.ts b/apps/web/src/schema/opsflow/comment/type.ts
new file mode 100644
index 0000000000..785b6ca9ee
--- /dev/null
+++ b/apps/web/src/schema/opsflow/comment/type.ts
@@ -0,0 +1,5 @@
+export type CommentType = 'TASK_DESCRIPTION'|'COMMENT';
+export interface MentionTargets {
+    USER?: string[];
+    USER_GROUP?: string[];
+}
diff --git a/apps/web/src/schema/opsflow/event/api-verbs/list.ts b/apps/web/src/schema/opsflow/event/api-verbs/list.ts
new file mode 100644
index 0000000000..bceb8facb8
--- /dev/null
+++ b/apps/web/src/schema/opsflow/event/api-verbs/list.ts
@@ -0,0 +1,13 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+import type { EventType } from '@/schema/opsflow/event/type';
+
+export interface EventListParameters {
+    query?: Query;
+    task_id?: string;
+    event_type?: EventType;
+    user_type?: 'USER'|'APP'; // TODO: replace with UserType
+    event_id?: string;
+    project_id?: string;
+    workspace_id?: string;
+}
diff --git a/apps/web/src/schema/opsflow/event/model.ts b/apps/web/src/schema/opsflow/event/model.ts
new file mode 100644
index 0000000000..c365e26ff5
--- /dev/null
+++ b/apps/web/src/schema/opsflow/event/model.ts
@@ -0,0 +1,15 @@
+import type { EventType } from '@/schema/opsflow/event/type';
+
+export interface EventModel {
+    event_id: string;
+    event_type: EventType;
+    name: string;
+    description: string;
+    user_type: 'USER'|'APP'; // TODO: replace with UserType
+    user_id: string;
+    task_id: string;
+    project_id: string;
+    workspace_id: string;
+    domain_id: string;
+    created_at: string;
+}
diff --git a/apps/web/src/schema/opsflow/event/type.ts b/apps/web/src/schema/opsflow/event/type.ts
new file mode 100644
index 0000000000..c9a11fb81c
--- /dev/null
+++ b/apps/web/src/schema/opsflow/event/type.ts
@@ -0,0 +1 @@
+export type EventType = 'CREATED'|'UPDATED'|'CHANGE_STATUS'|'COMMENTED';
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
new file mode 100644
index 0000000000..9c0ae46e28
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
@@ -0,0 +1,13 @@
+import type { Tags } from '@/schema/_common/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskStatusType, TaskStatusOptionWithOptionalId } from '@/schema/opsflow/task/type';
+
+
+export interface TaskCategoryCreateParameters {
+    name: string;
+    description?: string;
+    status_options: Record<TaskStatusType, TaskStatusOptionWithOptionalId[]>;
+    fields?: TaskField[];
+    tags?: Tags;
+    package_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/delete.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/delete.ts
new file mode 100644
index 0000000000..edff2cbf5c
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/delete.ts
@@ -0,0 +1,3 @@
+export interface TaskCategoryDeleteParameters {
+    category_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/get.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/get.ts
new file mode 100644
index 0000000000..283fa9534a
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface TaskCategoryGetParameters {
+    category_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/list.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/list.ts
new file mode 100644
index 0000000000..c5c471c8d9
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/list.ts
@@ -0,0 +1,8 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+export interface TaskCategoryListParameters {
+    query?: Query;
+    category_id?: string;
+    name?: string;
+    include_deleted?: boolean;
+}
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
new file mode 100644
index 0000000000..d5c28948af
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
@@ -0,0 +1,14 @@
+import type { Tags } from '@/schema/_common/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskStatusOptions, TaskStatusOptionWithOptionalId, TaskStatusType } from '@/schema/opsflow/task/type';
+
+export interface TaskCategoryUpdateParameters {
+    category_id: string;
+    name?: string;
+    description?: string;
+    status_options?: TaskStatusOptions|Record<TaskStatusType, TaskStatusOptionWithOptionalId[]>;
+    fields?: TaskField[];
+    force?: boolean;
+    tags?: Tags;
+    package_id?: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-category/model.ts b/apps/web/src/schema/opsflow/task-category/model.ts
new file mode 100644
index 0000000000..08fb0ed7ce
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-category/model.ts
@@ -0,0 +1,18 @@
+import type { Tags } from '@/schema/_common/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskStatusOptions } from '@/schema/opsflow/task/type';
+
+export interface TaskCategoryModel {
+    category_id: string;
+    name: string;
+    state: 'ACTIVE' | 'DELETED';
+    description: string;
+    status_options: TaskStatusOptions;
+    fields:TaskField[];
+    tags: Tags;
+    package_id: string;
+    domain_id: string;
+    created_at: string;
+    updated_at: string;
+    deleted_at: 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
new file mode 100644
index 0000000000..964b11a175
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
@@ -0,0 +1,11 @@
+import type { Tags } from '@/schema/_common/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+export interface TaskTypeCreateParameters {
+    name: string;
+    description?: string;
+    fields?: TaskField[];
+    assignee_pool?: string[];
+    tags?: Tags;
+    category_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/delete.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/delete.ts
new file mode 100644
index 0000000000..a80953d89b
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/delete.ts
@@ -0,0 +1,3 @@
+export interface TaskTypeDeleteParameters {
+    task_type_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/get.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/get.ts
new file mode 100644
index 0000000000..9a4ecb6c7f
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/get.ts
@@ -0,0 +1,4 @@
+export interface TaskTypeGetParameters {
+    task_type_id: string;
+    include_category_fields?: boolean;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/list.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/list.ts
new file mode 100644
index 0000000000..5d02aee1b0
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/list.ts
@@ -0,0 +1,7 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+export interface TaskTypeListParameters {
+    query?: Query;
+    task_type_id?: string;
+    name?: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts
new file mode 100644
index 0000000000..4cb2c5db87
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts
@@ -0,0 +1,7 @@
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+export interface TaskTypeUpdateFieldsParameters {
+    task_type_id: string;
+    fields: TaskField[];
+    force: boolean;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
new file mode 100644
index 0000000000..d66eb5f469
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
@@ -0,0 +1,10 @@
+import type { Tags } from '@/schema/_common/model';
+
+export interface TaskTypeUpdateParameters {
+    task_type_id: string;
+    name?: string;
+    description?: string;
+    assignee_pool?: string[];
+    tags?: Tags;
+    category_id?: string;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/model.ts b/apps/web/src/schema/opsflow/task-type/model.ts
new file mode 100644
index 0000000000..537215f1ce
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/model.ts
@@ -0,0 +1,15 @@
+import type { Tags } from '@/schema/_common/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+export interface TaskTypeModel {
+    task_type_id: string;
+    name: string;
+    description: string;
+    fields: TaskField[];
+    assignee_pool?: string[];
+    tags: Tags;
+    category_id: string;
+    domain_id: string;
+    created_at: string;
+    updated_at: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/change-assignee.ts b/apps/web/src/schema/opsflow/task/api-verbs/change-assignee.ts
new file mode 100644
index 0000000000..9a7a673778
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/change-assignee.ts
@@ -0,0 +1,4 @@
+export interface TaskChangeAssigneeParameters {
+    task_id: string;
+    assignee: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/change-status.ts b/apps/web/src/schema/opsflow/task/api-verbs/change-status.ts
new file mode 100644
index 0000000000..0ef078a089
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/change-status.ts
@@ -0,0 +1,5 @@
+export interface TaskChangeStatusParameters {
+    task_id: string;
+    status_id: string;
+    assignee?: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/create.ts b/apps/web/src/schema/opsflow/task/api-verbs/create.ts
new file mode 100644
index 0000000000..95babaecfe
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/create.ts
@@ -0,0 +1,15 @@
+import type { MentionTargets } from '@/schema/opsflow/comment/type';
+import type { TaskPriority } from '@/schema/opsflow/task/type';
+
+export interface TaskCreateParameters {
+    task_type_id: string;
+    name: string;
+    status_id: string;
+    priority?: TaskPriority;
+    description?: string;
+    files?: string[];
+    mentions?: MentionTargets;
+    assignee?: string;
+    data?: Record<string, any>;
+    project_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/delete.ts b/apps/web/src/schema/opsflow/task/api-verbs/delete.ts
new file mode 100644
index 0000000000..65b6285466
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/delete.ts
@@ -0,0 +1,3 @@
+export interface TaskDeleteParameters {
+    task_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/get.ts b/apps/web/src/schema/opsflow/task/api-verbs/get.ts
new file mode 100644
index 0000000000..8d060d9c2f
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface TaskGetParameters {
+    task_id: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/list.ts b/apps/web/src/schema/opsflow/task/api-verbs/list.ts
new file mode 100644
index 0000000000..54fb135cdb
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/list.ts
@@ -0,0 +1,16 @@
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+import type { TaskPriority, TaskStatusType } from '@/schema/opsflow/task/type';
+
+export interface TaskListParameters {
+    query?: Query;
+    task_id?: string;
+    name?: string;
+    status_id?: string;
+    status_type?: TaskStatusType;
+    priority?: TaskPriority;
+    task_type_id?: string;
+    category_id?: string;
+    project_id?: string;
+    workspace_id?: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/update-description.ts b/apps/web/src/schema/opsflow/task/api-verbs/update-description.ts
new file mode 100644
index 0000000000..efa47e204c
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/update-description.ts
@@ -0,0 +1,9 @@
+import type { FileModel } from '@/schema/file-manager/model';
+import type { MentionTargets } from '@/schema/opsflow/comment/type';
+
+export interface TaskUpdateDescriptionParameters {
+    task_id: string;
+    description?: string;
+    files?: FileModel[];
+    mentions?: MentionTargets;
+}
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/update.ts b/apps/web/src/schema/opsflow/task/api-verbs/update.ts
new file mode 100644
index 0000000000..87a62572e0
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/api-verbs/update.ts
@@ -0,0 +1,9 @@
+import type { TaskPriority } from '@/schema/opsflow/task/type';
+
+export interface TaskUpdateParameters {
+    task_id: string;
+    name?: string;
+    priority?: TaskPriority;
+    data?: Record<string, any>;
+    project_id?: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/constant.ts b/apps/web/src/schema/opsflow/task/constant.ts
new file mode 100644
index 0000000000..2b1fe5840f
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/constant.ts
@@ -0,0 +1 @@
+export const TASK_STATUS_COLOR_NAMES = ['gray200', 'violet200', 'blue200', 'peacock200', 'green200', 'yellow200', 'coral200', 'red200'] as const;
diff --git a/apps/web/src/schema/opsflow/task/model.ts b/apps/web/src/schema/opsflow/task/model.ts
new file mode 100644
index 0000000000..99929a26e0
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/model.ts
@@ -0,0 +1,24 @@
+import type { FileModel } from '@/schema/file-manager/model';
+import type { TaskPriority, TaskStatusType } from '@/schema/opsflow/task/type';
+
+export interface TaskModel {
+    task_id: string;
+    name: string;
+    status_id: string;
+    status_type: TaskStatusType;
+    priority: TaskPriority;
+    description: string;
+    data: Record<string, any>;
+    files?: FileModel[];
+    assignee: string;
+    task_type_id: string;
+    category_id: string;
+    project_id: string;
+    workspace_id: string;
+    domain_id: string;
+    created_by: string;
+    created_at: string;
+    started_at: string;
+    updated_at: string;
+    completed_at: string;
+}
diff --git a/apps/web/src/schema/opsflow/task/type.ts b/apps/web/src/schema/opsflow/task/type.ts
new file mode 100644
index 0000000000..9fdbe2cb88
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task/type.ts
@@ -0,0 +1,15 @@
+import type { TASK_STATUS_COLOR_NAMES } from '@/schema/opsflow/task/constant';
+
+export type TaskStatusType = 'TODO'|'IN_PROGRESS'|'COMPLETED';
+export type TaskStatusColorName = typeof TASK_STATUS_COLOR_NAMES[number];
+export interface TaskStatusOption {
+    status_id: string;
+    name: string;
+    color: TaskStatusColorName;
+    is_default?: boolean;
+}
+export type TaskStatusOptions = Record<TaskStatusType, TaskStatusOption[]>;
+export interface TaskStatusOptionWithOptionalId extends Omit<TaskStatusOption, 'status_id'> {
+    status_id?: string;
+}
+export type TaskPriority = 'LOW'|'MEDIUM'|'HIGH';
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue b/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue
index 70e7ddcbd8..13ab7322fb 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue
@@ -47,6 +47,15 @@ export default defineComponent({
             instance.setPathFrom(from);
         });
     },
+    beforeRouteLeave(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            if (!instance.isConfirmBackModalVisible.value) {
+                instance.isConfirmBackModalVisible.value = true;
+                instance.nextRoute.value = to;
+            }
+        });
+    },
 });
 </script>
 
diff --git a/apps/web/src/services/ops-flow/OpsFlowContainer.vue b/apps/web/src/services/ops-flow/OpsFlowContainer.vue
new file mode 100644
index 0000000000..e03f8b84d3
--- /dev/null
+++ b/apps/web/src/services/ops-flow/OpsFlowContainer.vue
@@ -0,0 +1,28 @@
+<template>
+    <fragment>
+        <vertical-page-layout v-if="route.meta.lsbVisible"
+                              class="ops-flow-container"
+        >
+            <template #sidebar>
+                <ops-flow-l-s-b />
+            </template>
+            <template #default>
+                <router-view />
+            </template>
+        </vertical-page-layout>
+        <general-page-layout v-else>
+            <router-view />
+        </general-page-layout>
+    </fragment>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router/composables';
+
+import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
+import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
+
+import OpsFlowLSB from '@/services/ops-flow/OpsFlowLSB.vue';
+
+const route = useRoute();
+</script>
diff --git a/apps/web/src/services/ops-flow/OpsFlowLSB.vue b/apps/web/src/services/ops-flow/OpsFlowLSB.vue
new file mode 100644
index 0000000000..a6b5b66794
--- /dev/null
+++ b/apps/web/src/services/ops-flow/OpsFlowLSB.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { clone } from 'lodash';
+
+import type { MenuId } from '@/lib/menu/config';
+import { MENU_ID } from '@/lib/menu/config';
+
+import BoardLSB from '@/services/ops-flow/components/BoardLSB.vue';
+
+
+const route = useRoute();
+
+const state = reactive({
+    selectedMenuId: computed(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        const targetMenuId: MenuId = closestRoute?.meta?.menuId;
+        return targetMenuId;
+    }),
+
+});
+</script>
+
+<template>
+    <aside class="sidebar-menu">
+        <board-l-s-b v-if="state.selectedMenuId === MENU_ID.TASK_BOARD" />
+    </aside>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/AssociatedCategories.vue b/apps/web/src/services/ops-flow/components/AssociatedCategories.vue
new file mode 100644
index 0000000000..88f1c4793d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/AssociatedCategories.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PFieldTitle, PDataTable } from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { i18n } from '@/translations';
+
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+
+const fields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: i18n.t('OPSFLOW.NAME') as string,
+        width: '30%',
+    },
+    {
+        name: 'description',
+        label: i18n.t('OPSFLOW.DESCRIPTION') as string,
+        width: '70%',
+    },
+]);
+</script>
+
+<template>
+    <div>
+        <p-field-title class="mb-2"
+                       color="gray"
+        >
+            {{ $t('OPSFLOW.TARGET_LIST', {target: $t('OPSFLOW.CATEGORY')}) }}
+        </p-field-title>
+        <p-data-table :fields="fields"
+                      :items="taskManagementPageStore.getters.associatedCategoriesToPackage"
+        />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/AssociatedTasks.vue b/apps/web/src/services/ops-flow/components/AssociatedTasks.vue
new file mode 100644
index 0000000000..055e91aff7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/AssociatedTasks.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PDataTable } from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n } from '@/translations';
+
+import BoardTaskDescriptionField from '@/services/ops-flow/components/BoardTaskDescriptionField.vue';
+import BoardTaskNameField from '@/services/ops-flow/components/BoardTaskNameField.vue';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const props = defineProps<{
+    tasks: TaskModel[];
+}>();
+const taskTemplateManagementStore = useTaskManagementTemplateStore();
+const fields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: i18n.t('OPSFLOW.FIELD_NAME', { field: taskTemplateManagementStore.templates.task }) as string,
+        width: '14rem',
+    },
+    {
+        name: 'description',
+        label: i18n.t('OPSFLOW.FIELD_DESCRIPTION', { field: taskTemplateManagementStore.templates.task }) as string,
+        width: '20rem',
+    },
+]);
+</script>
+
+<template>
+    <div>
+        <p-data-table :fields="fields"
+                      :items="props.tasks"
+        >
+            <template #col-name-format="{item}">
+                <board-task-name-field :task-id="item.task_id"
+                                       :name="item.name"
+                                       link-new-tab
+                />
+            </template>
+            <template #col-description-format="{item}">
+                <board-task-description-field :description="item.description"
+                                              :files="item.files"
+                />
+            </template>
+        </p-data-table>
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/AssociatedWorkspaces.vue b/apps/web/src/services/ops-flow/components/AssociatedWorkspaces.vue
new file mode 100644
index 0000000000..1a0ef700e4
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/AssociatedWorkspaces.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PFieldTitle, PDataTable } from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+
+const fields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: 'Name',
+        width: '30%',
+    },
+    {
+        name: 'description',
+        label: 'Description',
+        width: '70%',
+    },
+]);
+</script>
+
+<template>
+    <div>
+        <p-field-title class="mb-2">
+            Associated Workspaces
+        </p-field-title>
+        <p-data-table :fields="fields"
+                      :items="taskManagementPageStore.getters.associatedWorkspacesToPackage"
+        />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/BoardLSB.vue b/apps/web/src/services/ops-flow/components/BoardLSB.vue
new file mode 100644
index 0000000000..c5b64f00e3
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardLSB.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+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';
+import LSBLoadingSpinner from '@/common/modules/navigations/new-lsb/LSBLoadingSpinner.vue';
+import LSBRouterButton from '@/common/modules/navigations/new-lsb/LSBRouterButton.vue';
+import LSBRouterItem from '@/common/modules/navigations/new-lsb/LSBRouterItem.vue';
+import LSBTopTitle from '@/common/modules/navigations/new-lsb/LSBTopTitle.vue';
+import type { LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const taskCategoryStore = useTaskCategoryStore();
+const taskCategoryGetters = taskCategoryStore.getters;
+const { getProperRouteLocation } = useProperRouteLocation();
+const predicate: LSBRouterPredicate = (to, currentRoute) => to.query?.categoryId === currentRoute.query.categoryId;
+</script>
+
+<template>
+    <l-s-b-container>
+        <l-s-b-router-button id="all-categories"
+                             icon="ic_dots-4-square"
+                             :to="getProperRouteLocation({
+                                 name: OPS_FLOW_ROUTE.BOARD._NAME
+                             })"
+                             :predicate="predicate"
+        >
+            {{ $t('OPSFLOW.ALL_CATEGORIES') }}
+        </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-loading-spinner :loading="taskCategoryGetters.loading" />
+        <l-s-b-router-item v-for="(category, idx) in taskCategoryGetters.taskCategories"
+                           :id="`${category.category_id}-${idx}`"
+                           :key="`${category.category_id}-${idx}`"
+                           :index="idx"
+                           :to="getProperRouteLocation({
+                               name: OPS_FLOW_ROUTE.BOARD._NAME,
+                               query: { categoryId: category.category_id }
+                           })"
+                           :predicate="predicate"
+        >
+            {{ category.name }}
+        </l-s-b-router-item>
+    </l-s-b-container>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
new file mode 100644
index 0000000000..4e90e6151a
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
@@ -0,0 +1,452 @@
+<script setup lang="ts">
+import {
+    ref, computed, reactive, onBeforeMount, onMounted, onUnmounted,
+} from 'vue';
+
+import { debounce, throttle } from 'lodash';
+
+import {
+    PPaneLayout, PHeading, PButton, PCollapsibleList, PTextBeautifier, getTextHighlightRegex, PContextMenu,
+    useIgnoreWindowArrowKeydownEvents,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { CollapsibleItem } from '@cloudforet/mirinae/types/data-display/collapsible/collapsible-list/type';
+
+import type { CommentModel } from '@/schema/opsflow/comment/model';
+import { i18n } from '@/translations';
+
+import type { UserReferenceItem } from '@/store/reference/user-reference-store';
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useCommentStore } from '@/services/ops-flow/stores/comment-store';
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+
+const props = defineProps<{
+    taskId: string;
+}>();
+
+const taskDetailPageStore = useTaskDetailPageStore();
+const commentStore = useCommentStore();
+const userReferenceStore = useUserReferenceStore();
+const userStore = useUserStore();
+const userId = computed(() => userStore.state.userId);
+const getAuthor = (item: CommentModel) => {
+    const u = item.created_by;
+    return userReferenceStore.getters.userItems[u]?.label ?? u ?? 'Unknown';
+};
+const getWritePermission = (item: CommentModel) => item.created_by === userId.value;
+const comments = computed<CommentModel[]>(() => commentStore.state.itemsByTaskId[props.taskId] ?? []);
+const commentItems = computed<CollapsibleItem<CommentModel>[]>(() => comments.value.map((comment) => ({
+    title: comment.created_at,
+    data: comment,
+})));
+const comment = ref('');
+
+const addingComment = ref<boolean>(false);
+const addComment = async (cmt: string) => {
+    try {
+        addingComment.value = true;
+        await commentStore.create({
+            task_id: props.taskId,
+            comment: cmt,
+        }, true);
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
+    } finally {
+        addingComment.value = false;
+    }
+};
+const addCommentAndApplyToEvents = async (cmt: string) => {
+    if (!cmt.trim().length) return;
+    await addComment(cmt);
+    await taskDetailPageStore.loadNewEvents();
+};
+const handleClickAddComment = () => {
+    addCommentAndApplyToEvents(comment.value);
+    comment.value = '';
+    if (contentEditableDivRef.value) {
+        contentEditableDivRef.value.textContent = '';
+    }
+    if (hiddenDivRef.value) {
+        hiddenDivRef.value.textContent = '';
+    }
+};
+
+// mention
+const allUserItems = computed<SelectDropdownMenuItem[]>(() => (Object.values(userReferenceStore.getters.userItems) as UserReferenceItem[]).map((u) => ({
+    name: u.key,
+    label: u.label || u.name,
+})));
+const refinedUserItems = computed<SelectDropdownMenuItem[]>(() => {
+    const filtered = allUserItems.value.filter((item) => getTextHighlightRegex(keyword.value).test(item.label as string));
+    return filtered.slice(0, 10);
+});
+const mentionTriggerIndex = ref(-1);
+const showSuggestions = ref(false);
+const keyword = ref('');
+const getCaretOffset = (contentsEl: HTMLDivElement) => {
+    let caretOffset = 0;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(contentsEl);
+        preCaretRange.setEnd(range.endContainer, range.endOffset);
+        caretOffset = preCaretRange.toString().length;
+    }
+    return caretOffset;
+};
+const detectMention = debounce(() => {
+    const contentsEl = contentEditableDivRef.value;
+    if (!contentsEl) return;
+
+    const cursorPosition = getCaretOffset(contentsEl);
+    const textBeforeCursor = contentsEl.textContent?.slice(0, cursorPosition) ?? '';
+    const mentionMatch = /@([\p{L}\p{N}_]*)$/u.exec(textBeforeCursor);
+    if (mentionMatch) {
+        mentionTriggerIndex.value = mentionMatch.index;
+        keyword.value = mentionMatch[1];
+        showSuggestions.value = true;
+        calculatePopupPosition();
+        syncScroll();
+    } else {
+        clearMention();
+    }
+}, 200);
+let lastKeyPressed = '';
+const handleInput = (e: InputEvent) => {
+    // Ignore arrow key events when suggestions are shown
+    if (showSuggestions.value && (lastKeyPressed === 'ArrowDown' || lastKeyPressed === 'ArrowUp')) {
+        const selection = window.getSelection();
+        const range = selection?.getRangeAt(0);
+
+        if (!range) return;
+
+        // Get the current text node and its content
+        const textNode = range.startContainer;
+        const textContent = textNode.textContent || '';
+
+        // Remove the keyword and prepare for mention insertion
+        const mentionText = `@${keyword.value}`;
+        const lastAtIndex = textContent.lastIndexOf('@');
+        const beforeMention = textContent.slice(0, lastAtIndex);
+        const afterMention = textContent.slice(range.endOffset);
+        textNode.textContent = beforeMention + mentionText + afterMention;
+        // Move the cursor to the space after the mention
+        const afterCursorPosition = beforeMention.length + mentionText.length;
+        range.setStart(textNode, afterCursorPosition);
+        range.setEnd(textNode, afterCursorPosition);
+        selection?.removeAllRanges(); // clear the current selection
+        selection?.addRange(range); // set the new cursor position
+
+        return;
+    }
+    if (lastKeyPressed === 'Escape' || lastKeyPressed === 'Tab') {
+        return;
+    }
+    if (lastKeyPressed === 'Enter') {
+        return;
+    }
+    comment.value = (e.target as HTMLDivElement).innerText;
+    detectMention(); // detect mention after IME input ends
+};
+useIgnoreWindowArrowKeydownEvents({ predicate: showSuggestions });
+const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+        if (showSuggestions.value) {
+            menuRef.value?.focus();
+        }
+    } else if (showSuggestions.value && (e.key === 'Escape' || e.key === 'Tab' || e.key === ' ')) {
+        clearMention();
+    } else if (e.key === 'Enter') {
+        if (!showSuggestions.value && !e.shiftKey) {
+            addCommentAndApplyToEvents(comment.value);
+            comment.value = '';
+            if (contentEditableDivRef.value) {
+                contentEditableDivRef.value.textContent = '';
+            }
+            if (hiddenDivRef.value) {
+                hiddenDivRef.value.textContent = '';
+            }
+        }
+    }
+
+    lastKeyPressed = e.key; // Track the last key pressed
+};
+const selectSuggestion = (item: SelectDropdownMenuItem) => {
+    const contentsDiv = contentEditableDivRef.value;
+    if (!contentsDiv) return;
+
+    const selection = window.getSelection();
+    const range = selection?.getRangeAt(0);
+
+    if (!range) return;
+
+    // Get the current text node and its content
+    const textNode = range.startContainer;
+    const textContent = textNode.textContent || '';
+
+    // Remove the keyword and prepare for mention insertion
+    const lastAtIndex = textContent.lastIndexOf('@');
+    const beforeMention = textContent.slice(0, lastAtIndex);
+    const afterMention = textContent.slice(range.endOffset);
+    textNode.textContent = beforeMention + afterMention;
+
+    // Create a span element for the selected user mention
+    const mentionSpan = document.createElement('span');
+    mentionSpan.className = 'mention'; // CSS class for styling the mention
+    mentionSpan.textContent = item.label as string; // Display the user label
+    mentionSpan.dataset.userId = item.name; // Store user ID as a dataset attribute
+    mentionSpan.contentEditable = 'false'; // Make the mention non-editable
+
+    // Insert the mentionSpan at the correct position
+    range.setStart(textNode, beforeMention.length);
+    range.setEnd(textNode, beforeMention.length);
+    range.insertNode(mentionSpan);
+
+    // Add a space after the mention for continued typing
+    const space = document.createTextNode(' ');
+    range.setStartAfter(mentionSpan);
+    range.setEndAfter(mentionSpan);
+    range.insertNode(space);
+
+    // Move the cursor to the space after the mention
+    range.setStartAfter(space);
+    range.setEndAfter(space);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    // Reset state after inserting the mention
+    showSuggestions.value = false;
+    keyword.value = '';
+    mentionTriggerIndex.value = -1;
+};
+const containerRef = ref<HTMLDivElement|null>(null);
+/* focus in & out */
+const handleGlobalClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+
+    // Check if the click is outside contentEditableDivRef or menuRef
+    if (containerRef.value?.contains(target)) {
+        detectMention();
+    } else {
+        showSuggestions.value = false;
+    }
+};
+onMounted(() => {
+    document.addEventListener('mousedown', handleGlobalClick);
+});
+onUnmounted(() => {
+    document.removeEventListener('mousedown', handleGlobalClick);
+});
+
+
+const clearMention = () => {
+    showSuggestions.value = false;
+    keyword.value = '';
+    mentionTriggerIndex.value = -1;
+    if (hiddenDivRef.value) {
+        hiddenDivRef.value.textContent = comment.value;
+        // if (comment.value.charCodeAt(comment.value.length - 1) === 10) { // if last character is newline, add zero width space
+        //     hiddenDivRef.value.textContent += '\u200B';
+        // }
+    }
+};
+const handleMenuEsc = () => {
+    clearMention();
+    focusOnInput();
+};
+const focusOnInput = () => {
+    if (contentEditableDivRef.value) {
+        contentEditableDivRef.value.focus();
+    }
+};
+
+const menuRef = ref<any|null>(null);
+const contentEditableDivRef = ref<HTMLDivElement|null>(null);
+const hiddenDivRef = ref<HTMLDivElement|null>(null);
+const popupPosition = reactive({ top: 0, left: 0, width: undefined as number|undefined });
+const POPUP_MIN_WIDTH = 200;
+const POPUP_PAD = 1;
+const calculatePopupPosition = () => {
+    const contentsEl = contentEditableDivRef.value;
+    const hiddenDiv = hiddenDivRef.value;
+    if (!contentsEl || !hiddenDiv) return;
+
+    // initialize hidden div
+    hiddenDiv.textContent = '';
+
+    // append a text node before caret position
+    const beforeCaretTextNode = document.createTextNode(comment.value.slice(0, mentionTriggerIndex.value));
+    hiddenDiv.appendChild(beforeCaretTextNode);
+
+    // append a span element to calculate caret position
+    const caretSpanEl = hiddenDiv.children[0] ?? document.createElement('span');
+    caretSpanEl.textContent = `@${keyword.value}`;
+    hiddenDiv.appendChild(caretSpanEl);
+
+    // append a text node after caret position
+    const afterCaretTextNode = document.createTextNode(comment.value.slice(mentionTriggerIndex.value + caretSpanEl.textContent.length));
+    hiddenDiv.appendChild(afterCaretTextNode);
+
+    // sync scroll of hidden div with textarea to calculate caret position
+    syncScroll();
+
+    // calculate popup position
+    const contentsRect = contentsEl.getBoundingClientRect();
+    const caretRect = caretSpanEl.getBoundingClientRect();
+    const caretBottom = caretRect.bottom > contentsRect.bottom ? contentsRect.bottom : caretRect.bottom;
+    popupPosition.top = caretBottom - contentsRect.top;
+    popupPosition.left = caretRect.left - contentsRect.left - POPUP_PAD;
+
+    // calculate width of popup
+    let width = contentsRect.width - (caretRect.left - contentsRect.left);
+    if (width <= POPUP_MIN_WIDTH) {
+        const diff = POPUP_MIN_WIDTH - width;
+        popupPosition.left -= diff;
+        width = POPUP_MIN_WIDTH;
+    }
+    popupPosition.width = width;
+};
+
+// sync style of hidden div with textarea
+onMounted(() => {
+    if (!hiddenDivRef.value || !contentEditableDivRef.value) return;
+    const contentsEl = contentEditableDivRef.value;
+    const hiddenDiv = hiddenDivRef.value;
+    hiddenDiv.style.font = getComputedStyle(contentsEl).font;
+    hiddenDiv.style.lineHeight = getComputedStyle(contentsEl).lineHeight;
+    hiddenDiv.style.padding = getComputedStyle(contentsEl).padding;
+    hiddenDiv.style.border = getComputedStyle(contentsEl).border;
+    hiddenDiv.style.width = `${contentsEl.offsetWidth}px`;
+    hiddenDiv.style.height = `${contentsEl.offsetHeight}px`;
+    hiddenDiv.style.wordBreak = getComputedStyle(contentsEl).wordBreak;
+});
+
+// sync scroll of hidden div with textarea
+const syncScroll = throttle(() => {
+    const contentsEl = contentEditableDivRef.value as HTMLDivElement;
+    const hiddenDiv = hiddenDivRef.value;
+
+    if (contentsEl && hiddenDiv) {
+        hiddenDiv.scrollTop = contentsEl.scrollTop;
+    }
+}, 100);
+
+// list comments for initial load
+onBeforeMount(async () => {
+    await commentStore.listByTaskId(props.taskId, {
+        query: {
+            sort: [{ key: 'created_at', desc: true }],
+        },
+    });
+});
+</script>
+
+<template>
+    <p-pane-layout class="pt-8 pb-10 px-4">
+        <p-heading class="mb-6"
+                   heading-type="sub"
+                   :title="$t('OPSFLOW.TASK_BOARD.COMMENT')"
+        />
+        <div ref="containerRef"
+             class="relative mb-3"
+        >
+            <div ref="hiddenDivRef"
+                 :style="{
+                     position: 'absolute',
+                     pointerEvents: 'none',
+                     whiteSpace: 'pre-wrap',
+                     visibility: 'hidden',
+                     overflowY: 'auto',
+                 }"
+            />
+            <div ref="contentEditableDivRef"
+                 contenteditable="true"
+                 class="contenteditable-div"
+                 :data-placeholder="$t('OPSFLOW.TASK_BOARD.COMMENT')"
+                 @input="handleInput"
+                 @keydown="handleKeydown"
+                 @scroll="syncScroll"
+            />
+            <p-context-menu v-if="showSuggestions"
+                            ref="menuRef"
+                            :menu="refinedUserItems"
+                            :selected="[]"
+                            :highlight-term="keyword"
+                            :style="{ top: `${popupPosition.top}px`, left: `${popupPosition.left}px`,
+                                      width: `auto`, minWidth: `${POPUP_MIN_WIDTH}px`, maxWidth: `${popupPosition.width}px` }"
+                            class="suggestion-list"
+                            @select="selectSuggestion"
+                            @keyup:up:end="focusOnInput"
+                            @keyup:down:end="focusOnInput"
+                            @keyup:esc="handleMenuEsc"
+            />
+        </div>
+        <p-button class="mb-6"
+                  style-type="tertiary"
+                  :loading="addingComment"
+                  @click="handleClickAddComment"
+        >
+            {{ $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.TASK_BOARD.COMMENT') }) }}
+        </p-button>
+        <p-collapsible-list :items="commentItems"
+                            toggle-position="contents"
+                            :line-clamp="2"
+        >
+            <template #no-styled-title="{data}">
+                <div class="flex w-full gap-1 items-center">
+                    <span class="text-paragraph-md font-bold text-blue-900">{{ getAuthor(data) }}</span>
+                    <span class="flex-grow text-paragraph-sm text-gray-400">{{ data.created_at }}</span>
+                    <action-menu-button v-if="getWritePermission(data)"
+                                        style-type="tertiary"
+                                        size="sm"
+                                        class="flex-shrink-0"
+                                        :menu="['delete']"
+                                        @delete="taskDetailPageStore.openCommentDeleteModal(data)"
+                    />
+                </div>
+            </template>
+            <template #default="{data}">
+                <p-text-beautifier class="whitespace-pre-line"
+                                   :value="data.comment"
+                />
+            </template>
+        </p-collapsible-list>
+    </p-pane-layout>
+</template>
+
+<style scoped lang="postcss">
+.suggestion-list {
+    @apply absolute;
+    z-index: 10;
+}
+.contenteditable-div {
+    @apply text-label-md bg-white border border-gray-300 rounded-md text-gray-900;
+    min-height: 7.75rem;
+    padding: 0.5rem;
+    white-space: pre-wrap;
+    overflow-y: auto;
+    line-height: 1.25rem;
+    outline: none;
+    resize: block;
+    &[data-placeholder]:empty::before {
+        @apply text-gray-400;
+        content: attr(data-placeholder);
+    }
+}
+</style>
+
+<style lang="postcss">
+.mention {
+    @apply bg-violet-150 text-violet-600 rounded-md;
+    padding: 0 2px;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue b/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue
new file mode 100644
index 0000000000..546c9b43cd
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PCollapsiblePanel } from '@cloudforet/mirinae';
+
+import type { FileModel } from '@/schema/file-manager/model';
+
+import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
+
+const props = defineProps<{
+    description?: string;
+    files?: FileModel[];
+}>();
+
+const attachments = computed(() => props.files?.map((d) => ({ fileId: d.file_id, downloadUrl: d.download_url })));
+
+</script>
+
+<template>
+    <p-collapsible-panel v-if="props.description"
+                         class="task-desc-field"
+                         :line-clamp="1"
+    >
+        <text-editor-viewer :contents="props.description"
+                            :attachments="attachments"
+        />
+    </p-collapsible-panel>
+</template>
+
+<style scoped lang="postcss">
+.task-desc-field {
+    padding: 0;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskFilters.vue b/apps/web/src/services/ops-flow/components/BoardTaskFilters.vue
new file mode 100644
index 0000000000..332c8fa54f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskFilters.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import {
+    toRef, computed, ref, watch,
+} from 'vue';
+
+import { isEqual } from 'lodash';
+
+import { PSelectDropdown, PBadge } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useTaskStatusField } from '@/services/ops-flow/composables/use-task-status-field';
+import { useTaskTypeField } from '@/services/ops-flow/composables/use-task-type-field';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type { TaskFilters } from '@/services/ops-flow/types/task-filters-type';
+
+const props = defineProps<{
+    categoryId?: string
+}>();
+const emit = defineEmits<{(event: 'update', value: TaskFilters): void;
+}>();
+
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+/* task type */
+const {
+    selectedTaskTypeItems,
+    taskTypeMenuItemsHandler,
+    setSelectedTaskTypeItems,
+} = useTaskTypeField({
+    categoryId: toRef(props, 'categoryId'),
+    isRequired: true,
+});
+const handleUpdateSelectedTaskTypeItems = (items: SelectDropdownMenuItem[]) => {
+    setSelectedTaskTypeItems(items);
+};
+
+/* status */
+const {
+    selectedStatusItems,
+    statusMenuItemsHandler,
+    setSelectedStatusItems,
+} = useTaskStatusField({
+    categoryId: toRef(props, 'categoryId'),
+    isRequired: true,
+});
+const handleUpdateSelectedStatusItems = (items: SelectDropdownMenuItem[]) => {
+    setSelectedStatusItems(items);
+};
+
+/* project */
+const selectedProjectIds = ref<string[]>([]);
+const handleUpdateSelectedProjectIds = (projectIds: string[]) => {
+    selectedProjectIds.value = projectIds;
+};
+
+/* createdBy */
+const selectedCreatedBy = ref<string[]>([]);
+const handleUpdateCreatedBy = (userIds: string[]) => {
+    selectedCreatedBy.value = userIds;
+};
+
+/* assignee */
+const selectedAssignee = ref<string[]>([]);
+const handleUpdateAssignee = (userIds: string[]) => {
+    selectedAssignee.value = userIds;
+};
+
+/* event */
+const taskFilters = computed<TaskFilters>(() => ({
+    taskType: selectedTaskTypeItems.value.map((d) => d.name),
+    status: selectedStatusItems.value.map((d) => d.name),
+    project: selectedProjectIds.value,
+    createdBy: selectedCreatedBy.value,
+    assignee: selectedAssignee.value,
+}));
+watch(taskFilters, (newValue, oldValue) => {
+    if (!isEqual(newValue, oldValue)) {
+        emit('update', newValue);
+    }
+});
+</script>
+
+<template>
+    <div class="flex flex-wrap gap-4">
+        <p-select-dropdown v-if="props.categoryId"
+                           :selected="selectedTaskTypeItems"
+                           :handler="taskTypeMenuItemsHandler"
+                           :selection-label="taskManagementTemplateStore.templates.Task"
+                           appearance-type="badge"
+                           style-type="rounded"
+                           multi-selectable
+                           show-select-marker
+                           show-delete-all-button
+                           @update:selected="handleUpdateSelectedTaskTypeItems"
+        />
+        <p-select-dropdown v-if="props.categoryId"
+                           :selected="selectedStatusItems"
+                           :handler="statusMenuItemsHandler"
+                           :selection-label="$t('OPSFLOW.STATUS')"
+                           appearance-type="badge"
+                           style-type="rounded"
+                           multi-selectable
+                           show-select-marker
+                           show-delete-all-button
+                           @update:selected="handleUpdateSelectedStatusItems"
+        >
+            <template #menu-item--format="{ item }">
+                <p-badge badge-type="subtle"
+                         :style-type="item.color"
+                >
+                    {{ item.label }}
+                </p-badge>
+            </template>
+        </p-select-dropdown>
+        <project-select-dropdown multi-selectable
+                                 project-selectable
+                                 :selected-project-ids="selectedProjectIds"
+                                 :selection-label="$t('OPSFLOW.PROJECT')"
+                                 style-type="rounded"
+                                 appearance-type="badge"
+                                 show-delete-all-button
+                                 :block="false"
+                                 @update:selected-project-ids="handleUpdateSelectedProjectIds"
+        />
+        <user-select-dropdown multi-selectable
+                              :user-ids="selectedCreatedBy"
+                              :selection-label="$t('OPSFLOW.CREATED_BY')"
+                              style-type="rounded"
+                              appearance-type="badge"
+                              selection-type="multiple"
+                              :block="false"
+                              @update:user-ids="handleUpdateCreatedBy"
+        />
+        <user-select-dropdown multi-selectable
+                              :user-ids="selectedAssignee"
+                              :selection-label="$t('OPSFLOW.ASSIGNEE')"
+                              style-type="rounded"
+                              appearance-type="badge"
+                              selection-type="multiple"
+                              :block="false"
+                              @update:user-ids="handleUpdateAssignee"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue b/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue
new file mode 100644
index 0000000000..e22d40e444
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { PCollapsiblePanel, PLink } from '@cloudforet/mirinae';
+
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+
+const props = defineProps<{
+    taskId: string;
+    name: string;
+    linkNewTab?: boolean;
+}>();
+
+const { getProperRouteLocation } = useProperRouteLocation();
+
+</script>
+
+<template>
+    <p-collapsible-panel class="task-name-field"
+                         :line-clamp="1"
+    >
+        <p-link :text="props.name"
+                :to="getProperRouteLocation({
+                    name: OPS_FLOW_ROUTE.BOARD.TASK_DETAIL._NAME,
+                    params: {taskId: props.taskId},
+                })"
+                :highlight="!props.linkNewTab"
+                :action-icon="props.linkNewTab ? 'internal-link' : 'none'"
+                :new-tab="props.linkNewTab"
+        />
+    </p-collapsible-panel>
+</template>
+
+<style scoped lang="postcss">
+.task-name-field {
+    padding: 0;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
new file mode 100644
index 0000000000..af3ec32ddf
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import {
+    reactive, ref, watch, toRaw, computed,
+} from 'vue';
+
+import { QueryHelper } from '@cloudforet/core-lib/query';
+import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+import {
+    PPaneLayout, PToolbox, PDataTable, PDivider, PBadge,
+} from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
+import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
+
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n } from '@/translations';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+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 { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useBoardPageStore } from '@/services/ops-flow/stores/board-page-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type { TaskFilters } from '@/services/ops-flow/types/task-filters-type';
+
+const boardPageStore = useBoardPageStore();
+const boardPageState = boardPageStore.state;
+const taskStore = useTaskStore();
+const taskTypeStore = useTaskTypeStore();
+const taskCategoryStore = useTaskCategoryStore();
+const userReferenceStore = useUserReferenceStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const loading = ref<boolean>(false);
+const tasks = ref<TaskModel[]|undefined>(undefined);
+const categoriesById = ref<Record<string, TaskCategoryModel>>({});
+const taskTypesById = ref<Record<string, TaskTypeModel>>({});
+
+
+/* table view formatter */
+const getTaskTypeName = (taskTypeId: string) => {
+    const taskType = taskTypesById.value[taskTypeId];
+    return taskType ? taskType.name : taskTypeId;
+};
+const getStatusName = (category: TaskCategoryModel|undefined, statusId: string, statusType: string) => {
+    const statusOptions = category?.status_options[statusType];
+    if (!statusOptions) return statusId;
+    const statusOption = statusOptions.find((option) => option.status_id === statusId);
+    if (!statusOption) {
+        const defaultOption = statusOptions.find((option) => option.is_default);
+        if (defaultOption) return defaultOption.name;
+        return statusId;
+    }
+    return statusOption.name;
+};
+const getStatusStyleType = (category: TaskCategoryModel|undefined, statusId: string, statusType: string) => {
+    const statusOptions = category?.status_options[statusType];
+    if (!statusOptions) return '';
+    const statusOption = statusOptions.find((option) => option.status_id === statusId);
+    if (!statusOption) {
+        const defaultOption = statusOptions.find((option) => option.is_default);
+        if (defaultOption) return defaultOption.color;
+        return '';
+    }
+    return statusOption.color;
+};
+const { getTimezoneDate } = useTimezoneDate();
+
+/* query */
+const search = ref<string>('');
+const pagination = reactive({
+    page: 1,
+    size: 15,
+    total: 0,
+});
+const sort = reactive({
+    key: 'created_at',
+    desc: true,
+});
+const queryHelper = new ApiQueryHelper();
+const getQuery = (filters?: ConsoleFilter[]) => {
+    queryHelper.setFilters(filters ?? [])
+        .setMultiSortV2([toRaw(sort)])
+        .setPage(pagination.page, pagination.size);
+    if (search.value) queryHelper.addFilter({ v: search.value });
+    if (boardPageState.currentCategoryId) queryHelper.addFilter({ k: 'category_id', v: boardPageState.currentCategoryId, o: '=' });
+
+    return queryHelper.dataV2;
+};
+
+/* list */
+const listTask = async (query: Query) => {
+    try {
+        loading.value = true;
+        const results = await taskStore.list({
+            query,
+        });
+        if (results) {
+            tasks.value = results;
+            loading.value = false;
+        }
+    } catch (e) {
+        ErrorHandler.handleError(e);
+        loading.value = false;
+        tasks.value = undefined;
+    }
+};
+let hasCategoriesAndTypesLoaded = false;
+const listCategoriesAndTaskTypes = async () => {
+    if (hasCategoriesAndTypesLoaded) return;
+    const results = await Promise.allSettled([
+        taskCategoryStore.list(),
+        taskTypeStore.list({
+            query: { only: ['task_type_id', 'name'] },
+        }),
+    ]);
+    results.forEach((result, idx) => {
+        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;
+                    });
+                }
+            }
+        }
+    });
+    categoriesById.value = { ...categoriesById.value };
+    taskTypesById.value = { ...taskTypesById.value };
+    hasCategoriesAndTypesLoaded = true;
+};
+
+listCategoriesAndTaskTypes();
+watch(() => boardPageState.currentCategoryId, () => {
+    listTask(getQuery());
+}, { immediate: true });
+
+/* toolbox */
+const handleRefresh = () => {
+    listTask(getQuery());
+};
+const handleChange = (options: ToolboxOptions) => {
+    if (options.searchText !== undefined) search.value = options.searchText;
+    if (options.pageStart !== undefined) pagination.page = options.pageStart;
+    if (options.pageLimit !== undefined) pagination.size = options.pageLimit;
+    if (options.sortBy !== undefined) sort.key = options.sortBy;
+    if (options.sortDesc !== undefined) sort.desc = options.sortDesc;
+    listTask(getQuery());
+};
+
+/* filters */
+const taskFilterHelper = new QueryHelper();
+const handleUpdateFilters = (values: TaskFilters) => {
+    taskFilterHelper.setFilters([]);
+    if (values.taskType.length) taskFilterHelper.addFilter({ k: 'task_type_id', v: values.taskType, o: '=' });
+    if (values.status.length) taskFilterHelper.addFilter({ k: 'status_id', v: values.status, o: '=' });
+    if (values.project.length) taskFilterHelper.addFilter({ k: 'project_id', v: values.project, o: '=' });
+    if (values.createdBy.length) taskFilterHelper.addFilter({ k: 'created_by', v: values.createdBy, o: '=' });
+    if (values.assignee.length) taskFilterHelper.addFilter({ k: 'assignee', v: values.assignee, o: '=' });
+    listTask(getQuery(taskFilterHelper.filters));
+};
+
+/* table */
+const fields = computed<DataTableField[] >(() => [
+    {
+        name: 'name',
+        label: i18n.t('OPSFLOW.TITLE') as string,
+        width: '13rem',
+    },
+    {
+        name: 'description',
+        label: i18n.t('OPSFLOW.DESCRIPTION') as string,
+        width: '15rem',
+    },
+    {
+        name: 'task_type_id',
+        label: taskManagementTemplateStore.templates.TaskType,
+    },
+    {
+        name: 'status_id',
+        label: i18n.t('OPSFLOW.STATUS') as string,
+    },
+    {
+        name: 'project_id',
+        label: i18n.t('OPSFLOW.PROJECT') as string,
+    },
+    {
+        name: 'assignee',
+        label: i18n.t('OPSFLOW.ASSIGNEE') as string,
+    },
+    {
+        name: 'created_by',
+        label: i18n.t('OPSFLOW.CREATED_BY') as string,
+    },
+    {
+        name: 'created_at',
+        label: i18n.t('OPSFLOW.CREATED_AT') as string,
+    },
+]);
+
+</script>
+
+<template>
+    <p-pane-layout class="pt-6">
+        <div class="px-4 pb-4">
+            <p-toolbox class="mb-2"
+                       :search-text="search"
+                       :this-page="pagination.page"
+                       :page-size="pagination.size"
+                       :total-count="pagination.total"
+                       @refresh="handleRefresh"
+                       @change="handleChange"
+            />
+            <p-divider />
+            <div class="mt-6">
+                <board-task-filters :category-id="boardPageState.currentCategoryId"
+                                    @update="handleUpdateFilters"
+                />
+            </div>
+        </div>
+        <p-data-table :fields="fields"
+                      :items="tasks"
+                      :loading="loading"
+                      class="w-auto"
+        >
+            <template #col-name-format="{item}">
+                <board-task-name-field :task-id="item.task_id"
+                                       :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>
+            <template #col-status_id-format="{item}">
+                <p-badge class="ml-2"
+                         badge-type="subtle"
+                         shape="square"
+                         :style-type="getStatusStyleType(categoriesById[item.category_id], item.status_id, item.status_type)"
+                >
+                    {{ getStatusName(categoriesById[item.category_id], item.status_id, item.status_type) }}
+                </p-badge>
+            </template>
+            <template #col-project_id-format="{value}">
+                <project-link-button :project-id="value" />
+            </template>
+            <template #col-assignee-format="{value}">
+                {{ userReferenceStore.getters.userItems[value]?.label || userReferenceStore.getters.userItems[value]?.name || value }}
+            </template>
+            <template #col-created_by-format="{value}">
+                {{ userReferenceStore.getters.userItems[value]?.label || userReferenceStore.getters.userItems[value]?.name || value }}
+            </template>
+            <template #col-created_at-format="{value}">
+                {{ getTimezoneDate(value) }}
+            </template>
+        </p-data-table>
+    </p-pane-layout>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/CommentDeleteModal.vue b/apps/web/src/services/ops-flow/components/CommentDeleteModal.vue
new file mode 100644
index 0000000000..3dd385ce87
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/CommentDeleteModal.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { getParticle, i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useCommentStore } from '@/services/ops-flow/stores/comment-store';
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+
+const taskDetailPageStore = useTaskDetailPageStore();
+const commentStore = useCommentStore();
+const loading = ref<boolean>(false);
+
+const deleteComment = async () => {
+    try {
+        if (!taskDetailPageStore.state.targetComment) throw new Error('targetComment is not defined');
+        loading.value = true;
+        await commentStore.delete(taskDetailPageStore.state.targetComment.comment_id);
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ERR_S_DELETE_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
+    } finally {
+        loading.value = false;
+        taskDetailPageStore.closeCommentDeleteModal();
+    }
+};
+const handleConfirm = async () => {
+    await deleteComment();
+    await taskDetailPageStore.loadNewEvents();
+};
+</script>
+
+<template>
+    <delete-modal :header-title="$t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+                      object: $t('OPSFLOW.TASK_BOARD.COMMENT'),
+                      particle:getParticle($t('OPSFLOW.TASK_BOARD.COMMENT'),'object') })"
+                  :visible="taskDetailPageStore.state.visibleCommentDeleteModal"
+                  :loading="loading"
+                  @close="taskDetailPageStore.closeCommentDeleteModal()"
+                  @cancel="taskDetailPageStore.closeCommentDeleteModal()"
+                  @confirm="handleConfirm"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/components/EnableLandingPanel.vue b/apps/web/src/services/ops-flow/components/EnableLandingPanel.vue
new file mode 100644
index 0000000000..45e9e8336f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/EnableLandingPanel.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+    PPaneLayout, PHeading, PToggleButton,
+} from '@cloudforet/mirinae';
+
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const handleUpdateEnableLanding = (value: boolean) => {
+    if (value === taskManagementTemplateStore.state.enableLanding) {
+        return;
+    }
+    taskManagementTemplateStore.updateLandingData(value);
+};
+</script>
+
+<template>
+    <p-pane-layout class="p-4">
+        <p-heading class="mb-2"
+                   :title="$t('OPSFLOW.TASK_MANAGEMENT.ENABLE_LANDING')"
+                   heading-type="sub"
+        />
+        <p class="mb-4 text-label-md text-gray-600">
+            {{ $t('OPSFLOW.TASK_MANAGEMENT.ENABLE_LANDING_DESC') }}
+        </p>
+        <p-toggle-button show-state-text
+                         :value="taskManagementTemplateStore.state.enableLanding"
+                         @update:value="handleUpdateEnableLanding"
+        />
+    </p-pane-layout>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue b/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
new file mode 100644
index 0000000000..500cad6790
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import { getParticle, i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import AssociatedCategories from '@/services/ops-flow/components/AssociatedCategories.vue';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const packageStore = usePackageStore();
+
+const deletable = computed(() => !taskManagementPageStore.getters.associatedCategoriesToPackage.length
+        && !taskManagementPageStore.getters.associatedWorkspacesToPackage.length);
+const headerTitle = computed(() => (deletable.value
+    ? _i18n.t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+        object: _i18n.t('OPSFLOW.PACKAGE'),
+        particle: getParticle(_i18n.t('OPSFLOW.PACKAGE') as string, 'object'),
+    })
+    : _i18n.t('OPSFLOW.DELETE_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') })));
+
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    loading.value = true;
+    try {
+        if (!taskManagementPageStore.state.targetPackageId) {
+            throw new Error('[Console Error] Cannot delete package without a target package');
+        }
+        await packageStore.delete(taskManagementPageStore.state.targetPackageId);
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }) as string, '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_DELETE_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }) as string);
+    } finally {
+        taskManagementPageStore.closeDeletePackageModal();
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskManagementPageStore.closeDeletePackageModal();
+};
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetPackageId();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskManagementPageStore.state.visibleDeletePackageModal"
+                    theme-color="alert"
+                    :header-title="headerTitle"
+                    :size="deletable ? 'sm' : 'md'"
+                    :loading="loading"
+                    :disabled="!deletable"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #body>
+            <div v-if="!deletable">
+                <div class="mb-6 flex items-end justify-between">
+                    <p class="text-paragraph-lg font-bold ">
+                        {{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.DELETE_UNAVAILABLE') }}
+                    </p>
+                </div>
+                <associated-categories />
+            </div>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/PackageForm.vue b/apps/web/src/services/ops-flow/components/PackageForm.vue
new file mode 100644
index 0000000000..82a42bc3d6
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackageForm.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import {
+    ref, watch, nextTick,
+} from 'vue';
+
+import { isEqual } from 'lodash';
+
+import {
+    POverlayLayout, PFieldGroup, PTextInput, PTextarea, PSelectDropdown, PButton, PRadioGroup, PRadio,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
+
+import { getParticle, i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import PackageUpdateConfirmModal from '@/services/ops-flow/components/PackageUpdateConfirmModal.vue';
+import { useCategoryField } from '@/services/ops-flow/composables/use-category-field';
+import { useWorkspaceField } from '@/services/ops-flow/composables/use-workspace-field';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const taskManagementPageState = taskManagementPageStore.state;
+const taskManagementPageGetters = taskManagementPageStore.getters;
+const packageStore = usePackageStore();
+
+
+
+/* workspace */
+const {
+    selectedWorkspaceItems,
+    workspaceMenuItemsHandler,
+    workspaceValidator,
+    setSelectedWorkspaces,
+    setInitialWorkspaces,
+    applyPackageToWorkspaces,
+    addedWorkspaceItems,
+    removedWorkspaceItems,
+} = useWorkspaceField();
+const workspaceType = ref<'unset'|'specific'>('unset');
+const handleSelectUnsetWorkspace = () => {
+    workspaceType.value = 'unset';
+    setSelectedWorkspaces([]);
+};
+const handleUpdateWorkspaces = (items: SelectDropdownMenuItem[]) => {
+    if (isEqual(items, selectedWorkspaceItems.value)) return;
+    setSelectedWorkspaces(items);
+};
+
+/* category */
+const {
+    selectedCategoryItems,
+    categoryMenuItemsHandler,
+    categoryValidator,
+    setSelectedCategoryItems,
+    setInitialCategoriesByPackageId,
+    applyPackageToCategories,
+    addedCategoryItems,
+    removedCategoryItems,
+} = useCategoryField();
+
+/* form */
+const {
+    forms: {
+        name, description,
+    },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    resetValidations,
+} = useFormValidator({
+    name: '' as string,
+    description: '' as string|undefined,
+    categories: categoryValidator,
+    workspaces: workspaceValidator,
+}, {
+    name(value: string) {
+        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,
+            });
+        }
+        if (packageStore.getters.packages.some((p) => p.package_id !== taskManagementPageState.targetPackageId && p.name === value)) {
+            return _i18n.t('OPSFLOW.VALIDATION.DUPLICATED', { field: _i18n.t('OPSFLOW.NAME') });
+        }
+        return true;
+    },
+});
+
+/* update confirm modal */
+const visibleUpdateConfirmModal = ref(false);
+
+/* form modal */
+const loading = ref(false);
+const handleCancelOrClose = () => {
+    taskManagementPageStore.closePackageForm();
+};
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetPackageId();
+};
+const handleFormConfirm = () => {
+    if (addedWorkspaceItems.value.length || removedWorkspaceItems.value.length
+        || addedCategoryItems.value.length || removedCategoryItems.value.length) {
+        visibleUpdateConfirmModal.value = true;
+    } else {
+        handleUpdateConfirm();
+    }
+};
+const handleUpdateCancel = () => {
+    visibleUpdateConfirmModal.value = false;
+};
+const handleUpdateConfirm = async () => {
+    visibleUpdateConfirmModal.value = false;
+
+    if (!isAllValid.value) {
+        ErrorHandler.handleError(new Error('Invalid form'));
+    }
+    loading.value = true;
+    if (taskManagementPageState.targetPackageId) {
+        try {
+            const updatedPackage = await packageStore.update({
+                package_id: taskManagementPageState.targetPackageId,
+                name: name.value,
+                description: description.value,
+            });
+            // bind workspaces and categories
+            const errorMessages: string[] = [];
+            const responses = await Promise.allSettled([
+                applyPackageToWorkspaces(updatedPackage.package_id),
+                applyPackageToCategories(updatedPackage.package_id),
+            ]);
+            responses.forEach((response) => {
+                if (response.status === 'rejected') {
+                    errorMessages.push(response.reason.message);
+                }
+            });
+            if (errorMessages.length) {
+                throw new Error(errorMessages.join('\n'));
+            }
+            showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }), '');
+        } catch (e) {
+            ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_EDIT_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }));
+        }
+    } else {
+        try {
+            const createdPackage = await packageStore.create({
+                name: name.value,
+                description: description.value,
+                tags: {},
+            });
+            // bind workspaces and categories
+            const errorMessages: string[] = [];
+            const responses = await Promise.allSettled([
+                applyPackageToWorkspaces(createdPackage.package_id),
+                applyPackageToCategories(createdPackage.package_id),
+            ]);
+            responses.forEach((response) => {
+                if (response.status === 'rejected') {
+                    errorMessages.push(response.reason.message);
+                }
+            });
+            if (errorMessages.length) {
+                throw new Error(errorMessages.join('\n'));
+            }
+            showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }), '');
+        } catch (e) {
+            ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_ADD_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }));
+        }
+    }
+    taskManagementPageStore.closePackageForm();
+    loading.value = false;
+};
+
+watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPageGetters.targetPackage], async ([visible, targetPackage], [prevVisible]) => {
+    if (!visible) {
+        if (!prevVisible) return; // prevent initial call
+        await nextTick(); // wait for closing animation
+        setForm({
+            name: '',
+            description: '',
+        });
+        workspaceType.value = 'unset';
+        await setInitialWorkspaces();
+        await setInitialCategoriesByPackageId();
+        resetValidations();
+        return;
+    }
+    if (targetPackage) {
+        setForm({
+            name: targetPackage.name,
+            description: targetPackage.description,
+        });
+        await setInitialWorkspaces(targetPackage.package_id);
+        if (selectedWorkspaceItems.value.length > 0) {
+            workspaceType.value = 'specific';
+        } else {
+            workspaceType.value = 'unset';
+        }
+        await setInitialCategoriesByPackageId(targetPackage.package_id);
+    }
+});
+</script>
+
+
+<template>
+    <fragment>
+        <p-overlay-layout :title="taskManagementPageState.targetPackageId ? $t('OPSFLOW.EDIT_TARGET', { target: $t('OPSFLOW.PACKAGE') }) : $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.PACKAGE') })"
+                          :visible="taskManagementPageState.visiblePackageForm"
+                          @close="handleCancelOrClose"
+                          @closed="handleClosed"
+        >
+            <template #default>
+                <div class="p-6 w-full">
+                    <p-field-group :label="$t('OPSFLOW.NAME')"
+                                   required
+                                   :invalid="!loading && invalidState.name"
+                                   :invalid-text="invalidTexts.name"
+                    >
+                        <template #default="{ invalid }">
+                            <p-text-input :value="name"
+                                          :invalid="invalid"
+                                          @update:value="setForm('name', $event)"
+                            />
+                        </template>
+                    </p-field-group>
+                    <p-field-group :label="$t('OPSFLOW.DESCRIPTION')"
+                                   required
+                                   :invalid="invalidState.description"
+                                   :invalid-text="invalidTexts.description"
+                    >
+                        <p-textarea :value="description"
+                                    :invalid="invalidState.description"
+                                    :placeholder="$t('OPSFLOW.DESCRIBE_FIELD', {
+                                        field: $t('OPSFLOW.PACKAGE'),
+                                        particle: getParticle( $t('OPSFLOW.PACKAGE'), 'object')
+                                    })"
+                                    @update:value="setForm('description', $event)"
+                        />
+                    </p-field-group>
+                    <p-field-group v-if="!taskManagementPageState.targetPackageId
+                                       || taskManagementPageState.targetPackageId !== taskManagementPageGetters.defaultPackage?.package_id"
+                                   :invalid="invalidState.workspaces"
+                                   :invalid-text="invalidTexts.workspaces"
+                                   :label="$t('OPSFLOW.WORKSPACE')"
+                    >
+                        <div class="mt-2">
+                            <p-radio-group>
+                                <p-radio :selected="workspaceType"
+                                         value="unset"
+                                         @change="handleSelectUnsetWorkspace"
+                                >
+                                    {{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.UNSET') }}
+                                </p-radio>
+                                <p-radio :selected="workspaceType"
+                                         value="specific"
+                                         @change="workspaceType = $event"
+                                >
+                                    {{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.SPECIFIC_WORKSPACE') }}
+                                </p-radio>
+                            </p-radio-group>
+                            <p-select-dropdown v-if="workspaceType === 'specific'"
+                                               class="mt-2"
+                                               :selected="selectedWorkspaceItems"
+                                               :invalid="invalidState.workspaces"
+                                               :handler="workspaceMenuItemsHandler"
+                                               :page-size="10"
+                                               appearance-type="badge"
+                                               menu-position="left"
+                                               show-select-marker
+                                               multi-selectable
+                                               use-fixed-menu-style
+                                               block
+                                               show-clear-selection
+                                               is-filterable
+                                               init-selected-with-handler
+                                               @update:selected="handleUpdateWorkspaces"
+                            />
+                        </div>
+                    </p-field-group>
+                    <p-field-group v-if="!taskManagementPageState.targetPackageId
+                                       || taskManagementPageState.targetPackageId !== taskManagementPageGetters.defaultPackage?.package_id"
+                                   :label="$t('OPSFLOW.CATEGORY')"
+                                   :invalid="invalidState.categories"
+                                   :invalid-text="invalidTexts.categories"
+                    >
+                        <p-select-dropdown :selected="selectedCategoryItems"
+                                           :handler="categoryMenuItemsHandler"
+                                           :invalid="invalidState.categories"
+                                           :page-size="10"
+                                           appearance-type="badge"
+                                           show-select-marker
+                                           multi-selectable
+                                           use-fixed-menu-style
+                                           block
+                                           show-clear-selection
+                                           is-filterable
+                                           init-selected-with-handler
+                                           @update:selected="setSelectedCategoryItems"
+                        />
+                    </p-field-group>
+                </div>
+            </template>
+            <template #footer>
+                <div class="py-3 px-6 flex flex-wrap gap-3 justify-end">
+                    <p-button style-type="transparent"
+                              :disabled="loading"
+                              @click="handleCancelOrClose"
+                    >
+                        {{ $t('COMMON.BUTTONS.CANCEL') }}
+                    </p-button>
+                    <p-button style-type="primary"
+                              :loading="loading"
+                              :disabled="!isAllValid"
+                              @click="handleFormConfirm"
+                    >
+                        {{ $t('COMMON.BUTTONS.CONFIRM') }}
+                    </p-button>
+                </div>
+            </template>
+        </p-overlay-layout>
+        <package-update-confirm-modal :visible="visibleUpdateConfirmModal"
+                                      :selected-workspaces="selectedWorkspaceItems"
+                                      :added-workspaces="addedWorkspaceItems"
+                                      :removed-workspaces="removedWorkspaceItems"
+                                      :selected-categories="selectedCategoryItems"
+                                      :added-categories="addedCategoryItems"
+                                      :removed-categories="removedCategoryItems"
+                                      @cancel="handleUpdateCancel"
+                                      @confirm="handleUpdateConfirm"
+        />
+    </fragment>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/PackagePanel.vue b/apps/web/src/services/ops-flow/components/PackagePanel.vue
new file mode 100644
index 0000000000..5e7def9774
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackagePanel.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { reactive, computed } from 'vue';
+
+import {
+    PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PIconButton, PBadge,
+} from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { i18n as _i18n } from '@/translations';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const packageStore = usePackageStore();
+
+const state = reactive({
+    packageFields: computed<DataTableField[]>(() => [
+        {
+            name: 'name',
+            label: _i18n.t('OPSFLOW.NAME') as string,
+            width: '20%',
+        },
+        {
+            name: 'description',
+            label: _i18n.t('OPSFLOW.DESCRIPTION') as string,
+            width: '70%',
+        },
+        {
+            name: 'buttons',
+            label: ' ',
+        },
+    ]),
+    menu: computed<MenuItem[]>(() => [
+        { name: 'edit', icon: 'ic_edit', label: _i18n.t('COMMON.BUTTONS.EDIT') as string },
+        { name: 'set-as-default', icon: 'ic_check-circle', label: _i18n.t('OPSFLOW.SET_AS_DEFAULT') as string },
+        { name: 'delete', icon: 'ic_delete', label: _i18n.t('COMMON.BUTTONS.DELETE') as string },
+    ]),
+    defaultPackageMenu: computed<MenuItem[]>(() => [
+        {
+            name: 'edit', icon: 'ic_edit', label: _i18n.t('COMMON.BUTTONS.EDIT') as string,
+        },
+        {
+            name: 'set-as-default', icon: 'ic_check-circle', label: _i18n.t('OPSFLOW.SET_AS_DEFAULT') as string, disabled: true, iconColor: 'inherit',
+        },
+        {
+            name: 'delete', icon: 'ic_delete', label: _i18n.t('COMMON.BUTTONS.DELETE') as string, disabled: true, iconColor: 'inherit',
+        },
+    ]),
+});
+</script>
+
+<template>
+    <p-pane-layout>
+        <p-heading-layout class="pt-6 px-4 mb-2">
+            <template #heading>
+                <p-heading :title="$t('OPSFLOW.SUPPORT_PACKAGE')"
+                           heading-type="sub"
+                />
+            </template>
+            <template #extra>
+                <p-icon-button name="ic_refresh"
+                               @click="packageStore.list()"
+                />
+                <p-button icon-left="ic_plus_bold"
+                          size="md"
+                          style-type="substitutive"
+                          @click="taskManagementPageStore.openAddPackageForm()"
+                >
+                    {{ $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.PACKAGE') }) }}
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <p class="px-4 mb-6 text-label-md text-gray-600">
+            {{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.DESC') }}
+        </p>
+        <p-data-table :loading="packageStore.getters.loading"
+                      :items="packageStore.getters.packages"
+                      :fields="state.packageFields"
+        >
+            <template #col-name-format="{ item }">
+                <span class="inline-flex items-center gap-2">
+                    {{ item.name }}
+                    <p-badge v-if="item.is_default"
+                             badge-type="solid-outline"
+                             style-type="gray500"
+                    >
+                        {{ $t('OPSFLOW.DEFAULT') }}
+                    </p-badge>
+                </span>
+            </template>
+            <template #col-buttons-format="{ item }">
+                <div class="flex justify-end">
+                    <action-menu-button :menu="item.package_id === taskManagementPageStore.getters.defaultPackage?.package_id
+                                            ? state.defaultPackageMenu
+                                            : state.menu"
+                                        @edit="taskManagementPageStore.openEditPackageForm(item.package_id)"
+                                        @set-as-default="taskManagementPageStore.openSetDefaultPackageModal(item.package_id)"
+                                        @delete="taskManagementPageStore.openDeletePackageModal(item.package_id)"
+                    />
+                </div>
+            </template>
+        </p-data-table>
+    </p-pane-layout>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue b/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
new file mode 100644
index 0000000000..177f73d91d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import { i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const packageStore = usePackageStore();
+
+const loading = ref<boolean>(false);
+const name = computed(() => taskManagementPageStore.getters.targetPackage?.name ?? '');
+const handleConfirm = async () => {
+    loading.value = true;
+    try {
+        if (!taskManagementPageStore.state.targetPackageId) {
+            throw new Error('[Console Error] Cannot set default package without a target package');
+        }
+        await packageStore.setDefaultPackage(taskManagementPageStore.state.targetPackageId);
+        taskManagementPageStore.closeSetDefaultPackageModal();
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_CHANGE_DEFAULT_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_CHANGE_DEFAULT_TARGET', { target: _i18n.t('OPSFLOW.PACKAGE') }));
+    } finally {
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskManagementPageStore.closeSetDefaultPackageModal();
+};
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetPackageId();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskManagementPageStore.state.visibleSetDefaultPackageModal"
+                    size="sm"
+                    :loading="loading"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #header-title>
+            <i18n path="OPSFLOW.TASK_MANAGEMENT.PACKAGE.SET_TARGET_AS_DEFAULT">
+                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                <template #target><strong>{{ name }}</strong></template>
+            </i18n>
+        </template>
+        <template #body>
+            {{ $t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.SET_DEFAULT_DESC') }}
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/PackageUpdateConfirmModal.vue b/apps/web/src/services/ops-flow/components/PackageUpdateConfirmModal.vue
new file mode 100644
index 0000000000..eb316e4ade
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackageUpdateConfirmModal.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+    PButtonModal, PDataTable, PBadge, PCheckbox,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { i18n as _i18n } from '@/translations';
+
+const props = defineProps<{
+    visible: boolean;
+    selectedWorkspaces: SelectDropdownMenuItem[];
+    addedWorkspaces: SelectDropdownMenuItem[];
+    removedWorkspaces: SelectDropdownMenuItem[];
+    selectedCategories: SelectDropdownMenuItem[];
+    addedCategories: SelectDropdownMenuItem[];
+    removedCategories: SelectDropdownMenuItem[];
+}>();
+const emit = defineEmits<{(event: 'cancel'): void;
+    (event: 'confirm'): void;
+}>();
+type DataType = 'category'|'workspace';
+type LinkStatus = 'removed'|'added'|'unchanged';
+interface Item extends SelectDropdownMenuItem {
+    linkStatus: LinkStatus;
+}
+const isAdded = (d: SelectDropdownMenuItem, type: DataType) => {
+    if (type === 'category') {
+        return !!props.addedCategories.find((ac) => ac.name === d.name);
+    }
+    return !!props.addedWorkspaces.find((aw) => aw.name === d.name);
+};
+const isRemoved = (d: SelectDropdownMenuItem, type: DataType) => {
+    if (type === 'category') {
+        return !!props.removedCategories.find((rc) => rc.name === d.name);
+    }
+    return !!props.removedWorkspaces.find((rw) => rw.name === d.name);
+};
+const getLinkStatus = (d: SelectDropdownMenuItem, type: DataType): LinkStatus => {
+    if (isAdded(d, type)) return 'added';
+    if (isRemoved(d, type)) return 'removed';
+    return 'unchanged';
+};
+const getAllItems = (type: DataType): Item[] => {
+    const targetItems = type === 'category' ? props.selectedCategories : props.selectedWorkspaces;
+    const refinedItems: Item[] = targetItems.map((d) => ({
+        ...d,
+        linkStatus: getLinkStatus(d, type),
+    })).sort((a, b) => {
+        if (a.linkStatus === 'added') return -1;
+        if (b.linkStatus === 'added') return 1;
+        return 0;
+    });
+    const targetRemovedItems = type === 'category' ? props.removedCategories : props.removedWorkspaces;
+    const refinedRemovedItems: Item[] = targetRemovedItems.map((d) => ({
+        ...d,
+        linkStatus: 'removed',
+    }));
+    return refinedRemovedItems.concat(refinedItems);
+};
+const workspaceItems = computed<Item[]>(() => getAllItems('workspace'));
+const categoryItems = computed<Item[]>(() => getAllItems('category'));
+const getLinkStatusColor = (status: LinkStatus): string => {
+    switch (status) {
+    case 'added':
+        return 'primary3';
+    case 'removed':
+        return 'red100';
+    default:
+        return 'gray100';
+    }
+};
+const getStatusLabel = (status: LinkStatus): string => {
+    switch (status) {
+    case 'added':
+        return _i18n.t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.ADDED') as string;
+    case 'removed':
+        return _i18n.t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.REMOVED') as string;
+    default:
+        return _i18n.t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.UNCHANGED') as string;
+    }
+};
+const WorkspaceFields = computed<DataTableField[]>(() => [
+    {
+        name: 'label',
+        label: _i18n.t('OPSFLOW.WORKSPACE') as string,
+    },
+    {
+        name: 'linkStatus',
+        label: _i18n.t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.CHANGE_STATUS') as string,
+    },
+]);
+const CategoryFields = computed<DataTableField[]>(() => [
+    {
+        name: 'label',
+        label: _i18n.t('OPSFLOW.CATEGORY') as string,
+    },
+    {
+        name: 'linkStatus',
+        label: _i18n.t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.CHANGE_STATUS') as string,
+    },
+]);
+const originWorkspaces = computed<SelectDropdownMenuItem[]>(() => props.selectedWorkspaces.filter((sw) => !isAdded(sw, 'workspace')));
+const showCheckbox = computed<boolean>(() => !!originWorkspaces.value.length && !!props.removedCategories.length);
+const checked = ref<boolean>(false);
+const handleConfirm = async () => {
+    emit('confirm');
+};
+const handleCloseOrCancel = () => {
+    checked.value = false;
+    emit('cancel');
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    theme-color="primary"
+                    :header-title="$t('OPSFLOW.TASK_MANAGEMENT.PACKAGE.UPDATE_CONFIRMATION')"
+                    size="md"
+                    :disabled="showCheckbox && !checked"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="checked = false"
+    >
+        <template #body>
+            <i18n path="OPSFLOW.TASK_MANAGEMENT.PACKAGE.AFFECTED_DESC"
+                  tag="p"
+                  class="mb-4 text-label-md"
+            >
+                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                <template #category><strong>{{ $tc('OPSFLOW.TASK_MANAGEMENT.PACKAGE.C_CATEGORY',categoryItems.length) }}</strong></template>
+                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                <template #workspace><strong>{{ $tc('OPSFLOW.TASK_MANAGEMENT.PACKAGE.C_WORKSPACE', workspaceItems.length) }}</strong></template>
+            </i18n>
+            <div class="flex flex-wrap gap-6">
+                <p-data-table :fields="WorkspaceFields"
+                              :items="workspaceItems"
+                              row-height-fixed
+                              :table-custom-style="{maxHeight: '400px', minWidth: '250px', width: 'auto', flex: 1}"
+                >
+                    <template #col-linkStatus-format="{value}">
+                        <p-badge badge-type="subtle"
+                                 :style-type="getLinkStatusColor(value)"
+                        >
+                            {{ getStatusLabel(value) }}
+                        </p-badge>
+                    </template>
+                </p-data-table>
+                <p-data-table :fields="CategoryFields"
+                              :items="categoryItems"
+                              row-height-fixed
+                              :table-custom-style="{maxHeight: '400px', minWidth: '250px', width: 'auto', flex: 1}"
+                >
+                    <template #col-linkStatus-format="{value}">
+                        <p-badge badge-type="subtle"
+                                 :style-type="getLinkStatusColor(value)"
+                        >
+                            {{ getStatusLabel(value) }}
+                        </p-badge>
+                    </template>
+                </p-data-table>
+                <div v-if="showCheckbox"
+                     class="flex"
+                >
+                    <p-checkbox :value="true"
+                                :selected="checked"
+                                @change="checked = $event"
+                    />
+                    <i18n path="OPSFLOW.TASK_MANAGEMENT.PACKAGE.UPDATE_CONFIRM_DESC"
+                          class="ml-1 mt-1 text-label-md"
+                    >
+                        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                        <template #is>{{ $tc('OPSFLOW.TASK_MANAGEMENT.PACKAGE.C_IS', removedCategories.length) }}</template>
+                        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                        <template #category>{{ $tc('OPSFLOW.TASK_MANAGEMENT.PACKAGE.C_CATEGORY',removedCategories.length) }}</template>
+                        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                        <template #workspace>{{ $tc('OPSFLOW.TASK_MANAGEMENT.PACKAGE.C_WORKSPACE', selectedWorkspaces.length) }}</template>
+                        <template #workspaceList>
+                            <template v-for="(w, idx) in originWorkspaces">
+                                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                                <strong :key="w.name">{{ w.label }}</strong><template v-if="idx !== originWorkspaces.length - 1">, </template>
+                            </template>
+                        </template>
+                        <template #categoryList>
+                            <template v-for="(c, idx) in removedCategories">
+                                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                                <strong :key="c.name">{{ c.label }}</strong><template v-if="idx !== removedCategories.length - 1">, </template>
+                            </template>
+                        </template>
+                    </i18n>
+                </div>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskAssignModal.vue b/apps/web/src/services/ops-flow/components/TaskAssignModal.vue
new file mode 100644
index 0000000000..b5f0a3593d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskAssignModal.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import {
+    computed, ref, watch,
+} from 'vue';
+
+import { PButtonModal, PToolboxTable, getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+import type { ToolboxTableOptions } from '@cloudforet/mirinae/types/data-display/tables/toolbox-table/type';
+
+import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n } from '@/translations';
+
+import type { UserReferenceItem } from '@/store/reference/user-reference-store';
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskAssignStore } from '@/services/ops-flow/stores/task-assign-store';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+
+const userReferenceStore = useUserReferenceStore();
+const taskAssignStore = useTaskAssignStore();
+const taskStore = useTaskStore();
+const taskContentFormStore = useTaskContentFormStore();
+const taskDetailPageStore = useTaskDetailPageStore();
+
+const fields: DataTableField[] = [
+    { label: 'User ID', name: 'name' },
+    { label: 'Name', name: 'label' },
+];
+
+const allUserReferenceItems = computed<SelectDropdownMenuItem[]>(() => Object.values<UserReferenceItem>(userReferenceStore.getters.userItems).map((u) => ({
+    name: u.key,
+    label: u.label || u.name,
+})));
+const allUserItems = computed<SelectDropdownMenuItem[]>(() => {
+    const assigneePool = taskAssignStore.state.currentAssigneePool;
+    if (assigneePool && assigneePool.length > 0) {
+        return assigneePool.map((d) => (userReferenceStore.getters.userItems[d]
+            ? { name: d, label: userReferenceStore.getters.userItems[d].label || userReferenceStore.getters.userItems[d].name }
+            : { name: d, label: d }));
+    }
+    return allUserReferenceItems.value;
+});
+const loading = computed<boolean>(() => !userReferenceStore.state.items);
+const searchText = ref<string>('');
+const pageStart = ref<number>(1);
+const pageLimit = ref<number>(15);
+const refinedUserItems = computed<SelectDropdownMenuItem[]>(() => {
+    const filtered = allUserItems.value.filter((item) => getTextHighlightRegex(searchText.value).test(item.label as string));
+    const sliced = filtered.slice(pageStart.value - 1, pageStart.value + pageLimit.value - 1);
+    return sliced.map((s) => (s.name === taskAssignStore.state.currentAssignee
+        ? { ...s, disabled: true } : s));
+});
+const getRowSelectable = (item: SelectDropdownMenuItem) => !item.disabled;
+const handleChangeTable = async (options: ToolboxTableOptions = {}) => {
+    if (options.searchText !== undefined) searchText.value = options.searchText;
+    if (options.pageStart !== undefined) pageStart.value = options.pageStart;
+    if (options.pageLimit !== undefined) pageLimit.value = options.pageLimit;
+};
+
+const selectIndex = ref<number[]>([]);
+
+const handleCancelOrClose = () => {
+    taskAssignStore.closeAssignModal();
+};
+
+const updating = ref<boolean>(false);
+const updateTaskAssignee = async (): Promise<TaskModel|undefined> => {
+    try {
+        if (!taskAssignStore.state.taskId) throw new Error('task id is not defined');
+        if (selectIndex.value.length === 0) throw new Error('assignee is not selected');
+        const newTask = await taskStore.changeAssignee(taskAssignStore.state.taskId, refinedUserItems.value[selectIndex.value[0]].name);
+        taskContentFormStore.setAssigneeToOriginTask(newTask.assignee);
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ASSIGN'), '');
+        return newTask;
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_ASSIGN'));
+        return undefined;
+    }
+};
+const handleConfirm = async () => {
+    updating.value = true;
+    const task = await updateTaskAssignee();
+    taskDetailPageStore.loadNewEvents();
+    taskAssignStore.closeAssignModal(task?.assignee);
+    updating.value = false;
+};
+
+watch(() => taskAssignStore.state.visibleAssignModal, (visible) => {
+    if (!visible) {
+        selectIndex.value = [];
+        searchText.value = '';
+        pageStart.value = 1;
+        pageLimit.value = 15;
+    }
+});
+
+</script>
+
+<template>
+    <p-button-modal :visible="taskAssignStore.state.visibleAssignModal"
+                    :header-title="$t('OPSFLOW.TASK_BOARD.ASSIGN_TO')"
+                    size="md"
+                    :loading="loading || updating"
+                    :disabled="selectIndex.length === 0"
+                    @cancel="handleCancelOrClose"
+                    @close="handleCancelOrClose"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <p-toolbox-table :excel-visible="false"
+                             selectable
+                             :multi-select="false"
+                             :fields="fields"
+                             :items="refinedUserItems"
+                             :select-index="selectIndex"
+                             :get-row-selectable="getRowSelectable"
+                             :page-size="15"
+                             :loading="loading"
+                             @update:select-index="selectIndex = $event"
+                             @change="handleChangeTable"
+                             @refresh="handleChangeTable()"
+            />
+        </template>
+    </p-button-modal>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
new file mode 100644
index 0000000000..26e13820f7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+import { PButtonModal } from '@cloudforet/mirinae/';
+
+import { getParticle, i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import AssociatedTasks from '@/services/ops-flow/components/AssociatedTasks.vue';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const taskManagementPageState = taskManagementPageStore.state;
+const taskCategoryStore = useTaskCategoryStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+
+const deletable = computed(() => !taskManagementPageStore.getters.associatedTasksToCategory.length);
+const headerTitle = computed(() => {
+    if (taskManagementPageStore.state.loadingAssociatedTasksToCategory) {
+        return ' ';
+    }
+    return deletable.value
+        ? _i18n.t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+            object: _i18n.t('OPSFLOW.CATEGORY'),
+            particle: getParticle(_i18n.t('OPSFLOW.CATEGORY') as string, 'object'),
+        })
+        : _i18n.t('OPSFLOW.DELETE_TARGET', { target: _i18n.t('OPSFLOW.CATEGORY') });
+});
+
+const loading = ref<boolean>(false);
+const deleteCategory = async (categoryId: string) => {
+    try {
+        await taskCategoryStore.delete(categoryId);
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: _i18n.t('OPSFLOW.CATEGORY') }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_DELETE_TARGET', { target: _i18n.t('OPSFLOW.CATEGORY') }));
+    }
+};
+const handleConfirm = async () => {
+    try {
+        loading.value = true;
+        if (!taskManagementPageState.targetCategoryId) {
+            throw new Error('[Console Error] Cannot delete category without a target category');
+        }
+        await deleteCategory(taskManagementPageState.targetCategoryId);
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to delete category');
+    } finally {
+        taskManagementPageStore.closeDeleteCategoryModal();
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskManagementPageStore.closeDeleteCategoryModal();
+};
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetCategoryId();
+};
+watch(() => taskManagementPageState.visibleDeleteCategoryModal, (visible) => {
+    if (visible) {
+        if (!taskManagementPageState.targetCategoryId) {
+            ErrorHandler.handleError(new Error('[Console Error] Cannot delete category without a target category'));
+            return;
+        }
+        taskManagementPageStore.loadAssociatedTasksToCategory(taskManagementPageState.targetCategoryId);
+    }
+});
+</script>
+
+<template>
+    <p-button-modal :visible="taskManagementPageState.visibleDeleteCategoryModal"
+                    theme-color="alert"
+                    :header-title="headerTitle"
+                    :size="deletable ? 'sm' : 'md'"
+                    :loading="loading"
+                    :loading-backdrop="taskManagementPageState.loadingAssociatedTasksToCategory"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #body>
+            <p v-if="!deletable"
+               class="text-paragraph-lg font-bold mb-4"
+            >
+                {{ $t('OPSFLOW.TASK_MANAGEMENT.CATEGORY.DELETE_CONFIRMATION_DESC', {
+                    tasks: taskManagementTemplateStore.templates.tasks,
+                    particle: getParticle(taskManagementTemplateStore.templates.tasks, 'subject')
+                }) }}
+            </p>
+            <associated-tasks v-if="!deletable"
+                              :tasks="taskManagementPageStore.getters.associatedTasksToCategory"
+            />
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue b/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
new file mode 100644
index 0000000000..638b8350fd
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import {
+    onBeforeMount, ref, watch, nextTick,
+} from 'vue';
+
+import {
+    POverlayLayout, PFieldGroup, PTextInput, PTextarea, PButton,
+} from '@cloudforet/mirinae';
+
+import { i18n, getParticle } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const taskManagementPageState = taskManagementPageStore.state;
+const taskManagementPageGetters = taskManagementPageStore.getters;
+const taskCategoryStore = useTaskCategoryStore();
+
+const {
+    forms: { name, description },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+    resetValidations,
+} = useFormValidator({
+    name: '',
+    description: '',
+}, {
+    name(value: string) {
+        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,
+            });
+        }
+        if (taskCategoryStore.getters.taskCategories.some((p) => taskManagementPageState.targetCategoryId !== p.category_id && p.name === value)) {
+            return i18n.t('OPSFLOW.VALIDATION.DUPLICATED', { topic: i18n.t('OPSFLOW.NAME') });
+        }
+        return true;
+    },
+});
+
+const loading = ref(false);
+const handleCancelOrClose = () => {
+    initForm();
+    taskManagementPageStore.closeCategoryForm();
+};
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetCategoryId();
+};
+const handleConfirm = async () => {
+    if (!isAllValid.value) return;
+
+    try {
+        loading.value = true;
+        if (taskManagementPageState.targetCategoryId) {
+            await taskCategoryStore.update({
+                category_id: taskManagementPageState.targetCategoryId,
+                name: name.value,
+                description: description.value,
+            });
+            showSuccessMessage(i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: i18n.t('OPSFLOW.CATEGORY') }), '');
+        } else {
+            if (!taskManagementPageGetters.defaultPackage) throw Error('Default package is not found');
+            await taskCategoryStore.create({
+                name: name.value,
+                description: description.value,
+                package_id: taskManagementPageGetters.defaultPackage.package_id,
+            });
+            showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: i18n.t('OPSFLOW.CATEGORY') }), '');
+        }
+        taskManagementPageStore.closeCategoryForm();
+    } catch (e) {
+        if (taskManagementPageState.targetCategoryId) {
+            ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_EDIT_TARGET', { target: i18n.t('OPSFLOW.CATEGORY') }));
+        } else {
+            ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_ADD_TARGET', { target: i18n.t('OPSFLOW.CATEGORY') }));
+        }
+    } finally {
+        loading.value = false;
+    }
+};
+
+onBeforeMount(() => {
+    if (taskManagementPageState.targetCategoryId) {
+        const targetCategory = taskCategoryStore.getters.taskCategories.find((p) => p.category_id === taskManagementPageState.targetCategoryId);
+        if (targetCategory) {
+            setForm('name', targetCategory.name);
+            setForm('description', targetCategory.description);
+        }
+    }
+});
+
+watch([() => taskManagementPageState.visibleCategoryForm, () => taskManagementPageGetters.targetCategory], async ([visible, targetCategory], [prevVisible]) => {
+    if (!visible) {
+        if (!prevVisible) return; // prevent initial call
+        await nextTick(); // wait for closing animation
+        setForm({
+            name: '',
+            description: '',
+        });
+        resetValidations();
+        return;
+    }
+    if (targetCategory) {
+        setForm({
+            name: targetCategory.name,
+            description: targetCategory.description,
+        });
+    }
+});
+</script>
+
+<template>
+    <p-overlay-layout :title="taskManagementPageState.targetCategoryId ? $t('OPSFLOW.EDIT_TARGET', { target: $t('OPSFLOW.CATEGORY')})
+                          : $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.CATEGORY')})"
+                      :visible="taskManagementPageState.visibleCategoryForm"
+                      @close="handleCancelOrClose"
+                      @closed="handleClosed"
+    >
+        <template #default>
+            <div class="p-6 w-full">
+                <p-field-group :label="$t('OPSFLOW.NAME')"
+                               required
+                               :invalid="!loading && invalidState.name"
+                               :invalid-text="invalidTexts.name"
+                >
+                    <template #default="{ invalid }">
+                        <p-text-input :value="name"
+                                      :invalid="invalid"
+                                      @update:value="setForm('name', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group :label="$t('OPSFLOW.DESCRIPTION')">
+                    <p-textarea :value="description"
+                                :placeholder="$t('OPSFLOW.DESCRIBE_FIELD', {
+                                    field: $t('OPSFLOW.CATEGORY'),
+                                    particle: getParticle( $t('OPSFLOW.CATEGORY'), 'object')
+                                })"
+                                @update:value="setForm('description', $event)"
+                    />
+                </p-field-group>
+            </div>
+        </template>
+        <template #footer>
+            <div class="py-3 px-6 flex flex-wrap gap-3 justify-end">
+                <p-button style-type="transparent"
+                          :disabled="loading"
+                          @click="handleCancelOrClose"
+                >
+                    {{ $t('COMMON.BUTTONS.CANCEL') }}
+                </p-button>
+                <p-button style-type="primary"
+                          :loading="loading"
+                          :disabled="!isAllValid"
+                          @click="handleConfirm"
+                >
+                    {{ $t('COMMON.BUTTONS.CONFIRM') }}
+                </p-button>
+            </div>
+        </template>
+    </p-overlay-layout>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
new file mode 100644
index 0000000000..fce0dc7dcd
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { reactive, computed } from 'vue';
+
+import {
+    PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PBadge, PIconButton, PLink,
+} from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
+
+import { getParticle, i18n as _i18n } from '@/translations';
+
+import { makeAdminRouteName } from '@/router/helpers/route-helper';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const taskCategoryStore = useTaskCategoryStore();
+const packageStore = usePackageStore();
+
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const state = reactive({
+    categoryFields: computed<DataTableField[]>(() => [
+        {
+            name: 'name',
+            label: _i18n.t('OPSFLOW.NAME') as string,
+            width: '20%',
+        },
+        {
+            name: 'package',
+            label: _i18n.t('OPSFLOW.PACKAGE') as string,
+            width: '10%',
+            sortable: true,
+        },
+        {
+            name: 'description',
+            label: _i18n.t('OPSFLOW.DESCRIPTION') as string,
+            width: '60%',
+        },
+        {
+            name: 'buttons',
+            label: ' ',
+        },
+    ]),
+    packageMap: computed(() => {
+        if (!packageStore.getters.packages) return {};
+        return packageStore.getters.packages.reduce((acc, cur) => {
+            acc[cur.package_id] = cur;
+            return acc;
+        }, {} as Record<string, any>);
+    }),
+});
+
+</script>
+
+<template>
+    <p-pane-layout>
+        <p-heading-layout class="pt-6 px-4 mb-2">
+            <template #heading>
+                <p-heading :title="taskManagementTemplateStore.templates.TaskCategory"
+                           heading-type="sub"
+                />
+            </template>
+            <template #extra>
+                <p-icon-button name="ic_refresh"
+                               @click="taskCategoryStore.list(true)"
+                />
+                <p-button icon-left="ic_plus_bold"
+                          size="md"
+                          style-type="substitutive"
+                          @click="taskManagementPageStore.openAddCategoryForm()"
+                >
+                    {{ $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.CATEGORY')}) }}
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <p class="px-4 mb-6 text-label-md text-gray-600">
+            {{ $t('OPSFLOW.TASK_MANAGEMENT.CATEGORY.DESC', {
+                task: taskManagementTemplateStore.templates.task,
+                tasks: taskManagementTemplateStore.templates.tasks,
+                taskObjectParticle: getParticle(taskManagementTemplateStore.templates.task, 'object'),
+                tasksObjectParticle: getParticle(taskManagementTemplateStore.templates.tasks, 'object'),
+            }) }}
+        </p>
+        <p-data-table :loading="taskCategoryStore.getters.loading"
+                      :items="taskCategoryStore.getters.taskCategories"
+                      :fields="state.categoryFields"
+        >
+            <template #col-name-format="{ item }">
+                <p-link :text="item.name"
+                        :to="{
+                            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL._NAME),
+                            params: { taskCategoryId: item.category_id }
+                        }"
+                        highlight
+                />
+            </template>
+            <template #col-package-format="{ item }">
+                <p-badge shape="square"
+                         badge-type="subtle"
+                         style-type="gray200"
+                         size="md"
+                >
+                    {{ state.packageMap[item.package_id] ? state.packageMap[item.package_id].name : item.package_id }}
+                </p-badge>
+            </template>
+            <template #col-buttons-format="{ item }">
+                <div class="flex justify-end">
+                    <action-menu-button @edit="taskManagementPageStore.openEditCategoryForm(item.category_id)"
+                                        @delete="taskManagementPageStore.openDeleteCategoryModal(item.category_id)"
+                    />
+                </div>
+            </template>
+        </p-data-table>
+    </p-pane-layout>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
new file mode 100644
index 0000000000..0f73b78816
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+
+import { isEqual } from 'lodash';
+
+import {
+    PFieldTitle, PFieldGroup, PSelectDropdown, PPaneLayout, PButton, PBadge,
+} from '@cloudforet/mirinae';
+import type { 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 { i18n } from '@/translations';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useCategoryField } from '@/services/ops-flow/composables/use-category-field';
+import { useTaskStatusField } from '@/services/ops-flow/composables/use-task-status-field';
+import { useTaskTypeField } from '@/services/ops-flow/composables/use-task-type-field';
+import { useTaskAssignStore } from '@/services/ops-flow/stores/task-assign-store';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+const userReferenceStore = useUserReferenceStore();
+const taskAssignStore = useTaskAssignStore();
+const taskStore = useTaskStore();
+const taskDetailPageStore = useTaskDetailPageStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+const userStore = useUserStore();
+
+/* category */
+const {
+    selectedCategoryItems,
+    categoryValidator,
+    categoryMenuItemsHandler,
+    setInitialCategory,
+} = useCategoryField({
+    isRequired: true,
+    hasTaskTypeOnly: true,
+});
+const handleUpdateSelectedCategory = (items: SelectDropdownMenuItem[]) => {
+    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;
+    if (!category) {
+        ErrorHandler.handleError(new Error('Failed to get category'));
+        return;
+    }
+    initRelatedFieldsByCategorySelection(category);
+};
+
+/* task type */
+const {
+    selectedTaskTypeItems,
+    taskTypeValidator,
+    taskTypeMenuItemsHandler,
+    setInitialTaskType,
+} = useTaskTypeField({
+    categoryId: computed(() => taskContentFormGetters.currentCategory?.category_id),
+    isRequired: true,
+});
+const handleUpdateSelectedTaskType = async (items: SelectDropdownMenuItem[]) => {
+    if (isEqual(items, selectedTaskTypeItems)) return;
+    setForm('taskType', items); // set form for validation
+    await taskContentFormStore.setCurrentTaskType(items[0].name); // set current task type to store for other fields
+    const taskType = taskContentFormState.currentTaskType;
+    const category = taskContentFormGetters.currentCategory;
+    if (items.length > 0 && (!category || !taskType)) {
+        ErrorHandler.handleError(new Error('Failed to get category or task type'));
+        return;
+    }
+    if (category && taskType) {
+        initRelatedFieldsByTaskTypeSelection(category, taskType);
+    }
+};
+
+/* status */
+const {
+    selectedStatusItems,
+    taskStatusValidator,
+    statusMenuItemsHandler,
+    setSelectedStatusItems,
+    setInitialStatus,
+} = useTaskStatusField({
+    categoryId: computed(() => taskContentFormGetters.currentCategory?.category_id),
+});
+const changeStatus = async (statusId: string) => {
+    try {
+        if (!taskContentFormState.originTask) {
+            throw new Error('Origin task is not defined');
+        }
+        await taskStore.changeStatus(taskContentFormState.originTask.task_id, statusId);
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_UPDATE_TARGET', { target: i18n.t('OPSFLOW.STATUS') }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_UPDATE_TARGET', { target: i18n.t('OPSFLOW.STATUS') }));
+    }
+};
+const handleUpdateSelectedStatus = async (items: SelectDropdownMenuItem[]) => {
+    const statusId = items[0].name;
+    if (taskContentFormState.statusId === statusId) return;
+    taskContentFormStore.setStatusId(statusId);
+    setSelectedStatusItems(items);
+    if (taskContentFormState.mode === 'view') {
+        await changeStatus(statusId);
+        await taskDetailPageStore.loadNewEvents();
+    }
+};
+
+/* assignee */
+const handleClickAssign = () => {
+    if (!taskContentFormState.currentTaskType) {
+        ErrorHandler.handleError(new Error('Task type is not selected'));
+        return;
+    }
+    if (!taskContentFormState.originTask) {
+        ErrorHandler.handleError(new Error('Origin task is not defined'));
+        return;
+    }
+    taskAssignStore.openAssignModal(taskContentFormState.originTask.task_id, taskContentFormState.originTask.assignee, taskContentFormState.currentTaskType.assignee_pool);
+};
+const assigneeName = computed<string>(() => {
+    const userId = taskContentFormState.originTask?.assignee;
+    if (!userId) return '--';
+    const user = userReferenceStore.getters.userItems[userId];
+    return user?.label || user?.name || userId;
+});
+
+/* form validator */
+const {
+    invalidState,
+    invalidTexts,
+    isAllValid,
+    resetValidation,
+    resetValidations,
+    setForm,
+} = useFormValidator({
+    category: categoryValidator,
+    taskType: taskTypeValidator,
+    status: taskStatusValidator,
+});
+watch(isAllValid, (isValid) => {
+    taskContentFormStore.setIsBaseFormValid(isValid);
+}, { immediate: true });
+
+
+/* form initiation */
+const initRelatedFieldsByCategorySelection = (category: TaskCategoryModel) => {
+    // init selected task type
+    setInitialTaskType();
+    // init selected status
+    const defaultStatus = category.status_options.TODO.find((status) => status.is_default);
+    setInitialStatus(defaultStatus);
+    taskContentFormStore.setStatusId(defaultStatus?.status_id);
+    // reset validations
+    resetValidation('taskType');
+};
+const initRelatedFieldsByTaskTypeSelection = (category: TaskCategoryModel, taskType: TaskTypeModel) => {
+    // init selected task type
+    setInitialTaskType(taskType);
+    // init selected status
+    const defaultStatus = category.status_options.TODO.find((status) => status.is_default);
+    setInitialStatus(defaultStatus);
+    taskContentFormStore.setStatusId(defaultStatus?.status_id);
+};
+
+/* initiation for 'view' mode */
+watch([() => taskContentFormState.originTask, () => taskContentFormGetters.currentCategory, () => taskContentFormState.currentTaskType], async ([task, category, taskType]) => {
+    if (taskContentFormState.mode !== 'view' || !task || !category || !taskType) return;
+    // set category
+    setInitialCategory(task.category_id);
+    // set task type
+    setInitialTaskType(taskType);
+    // set status
+    const statusOption = category.status_options[task.status_type]?.find((status) => status.status_id === task.status_id);
+    setInitialStatus(statusOption);
+}, { immediate: true });
+
+/* initiation for 'create' mode with initial category, task type */
+let hasInitiated = false;
+watch([() => taskContentFormState.currentCategoryId, () => taskContentFormState.currentTaskType], async ([categoryId, taskType]) => {
+    if (hasInitiated) return;
+
+    if (taskContentFormState.mode === 'create' && categoryId) {
+        await setInitialCategory(categoryId);
+        // init selected status
+        const category = taskContentFormGetters.currentCategory;
+        if (category) {
+            const defaultStatus = category.status_options.TODO.find((status) => status.is_default);
+            setInitialStatus(defaultStatus);
+            taskContentFormStore.setStatusId(defaultStatus?.status_id);
+        } else {
+            ErrorHandler.handleError(new Error('Failed to get category'));
+        }
+        // init task type
+        if (taskType) setInitialTaskType(taskType);
+
+        // reset validations
+        resetValidations();
+    }
+
+    hasInitiated = true;
+}, { immediate: true });
+</script>
+
+<template>
+    <component :is="taskContentFormState.mode === 'create' ? 'div' : PPaneLayout"
+               class="flex flex-wrap gap-4"
+               :class="taskContentFormState.mode === 'create' ? '' : 'py-6 px-4'"
+    >
+        <div class="base-form-top-wrapper">
+            <div class="base-form-field-wrapper">
+                <p-field-group :label="taskManagementTemplateStore.templates.TaskCategory"
+                               :style-type="taskContentFormState.mode === 'create' ? 'primary' : 'secondary'"
+                               required
+                               :invalid="invalidState.category"
+                               :invalid-text="invalidTexts.category"
+                >
+                    <p-select-dropdown :selected="selectedCategoryItems"
+                                       :handler="categoryMenuItemsHandler"
+                                       :invalid="invalidState.category"
+                                       :readonly="taskContentFormState.mode === 'view'"
+                                       block
+                                       @update:selected="handleUpdateSelectedCategory"
+                    />
+                </p-field-group>
+            </div>
+            <div class="base-form-field-wrapper">
+                <p-field-group :label="taskManagementTemplateStore.templates.TaskType"
+                               :style-type="taskContentFormState.mode === 'create' ? 'primary' : 'secondary'"
+                               required
+                               :invalid="invalidState.taskType"
+                               :invalid-text="invalidTexts.taskType"
+                >
+                    <p-select-dropdown :selected="selectedTaskTypeItems"
+                                       :handler="taskTypeMenuItemsHandler"
+                                       :invalid="invalidState.taskType"
+                                       :readonly="taskContentFormState.mode === 'view' || !taskContentFormGetters.currentCategory"
+                                       block
+                                       @update:selected="handleUpdateSelectedTaskType"
+                    />
+                </p-field-group>
+            </div>
+        </div>
+        <div v-if="taskContentFormState.mode !== 'create'"
+             class="base-form-top-wrapper"
+        >
+            <div class="base-form-field-wrapper">
+                <p-field-group :label="$t('OPSFLOW.STATUS')"
+                               style-type="secondary"
+                               required
+                               :invalid="invalidState.status"
+                               :invalid-text="invalidTexts.status"
+                >
+                    <p-select-dropdown :selected="selectedStatusItems"
+                                       :handler="statusMenuItemsHandler"
+                                       :invalid="invalidState.status"
+                                       :readonly="!userStore.getters.isDomainAdmin || !taskContentFormGetters.currentCategory"
+                                       block
+                                       @update:selected="handleUpdateSelectedStatus"
+                    >
+                        <template #dropdown-button="item">
+                            <p-badge badge-type="subtle"
+                                     :style-type="item.color"
+                            >
+                                {{ item.label }}
+                            </p-badge>
+                        </template>
+                        <template #menu-item--format="{ item }">
+                            <p-badge badge-type="subtle"
+                                     :style-type="item.color"
+                            >
+                                {{ item.label }}
+                            </p-badge>
+                        </template>
+                    </p-select-dropdown>
+                </p-field-group>
+            </div>
+            <div class="base-form-field-wrapper">
+                <div v-if="taskContentFormState.mode === 'view'">
+                    <div class="flex gap-2 items-center">
+                        <p-field-title size="sm"
+                                       color="gray"
+                        >
+                            {{ userStore.getters.isDomainAdmin ? $t('OPSFLOW.TASK_BOARD.ASSIGN_TO') : $t('OPSFLOW.ASSIGNEE') }}
+                        </p-field-title>
+                        <p-button v-if="userStore.getters.isDomainAdmin"
+                                  size="sm"
+                                  style-type="tertiary"
+                                  @click="handleClickAssign"
+                        >
+                            {{ $t('OPSFLOW.TASK_BOARD.ASSIGN') }}
+                        </p-button>
+                    </div>
+                    <p class="mt-1 text-label-md text-blue-900">
+                        {{ assigneeName }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </component>
+</template>
+
+<style scoped lang="postcss">
+.base-form-top-wrapper {
+    @apply flex-1 flex mobile:flex-wrap gap-4;
+}
+.base-form-field-wrapper {
+    @apply flex-1 min-w-40 mobile:min-w-full flex flex-col gap-1;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskContentTab.vue b/apps/web/src/services/ops-flow/components/TaskContentTab.vue
new file mode 100644
index 0000000000..aa57247c58
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskContentTab.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import TaskContentBaseForm from '@/services/ops-flow/components/TaskContentBaseForm.vue';
+import TaskFieldsForm from '@/services/ops-flow/task-fields-form/TaskFieldsForm.vue';
+</script>
+
+<template>
+    <div class="w-full pt-6 px-4 pb-10">
+        <task-content-base-form class="mb-4" />
+        <task-fields-form />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue
new file mode 100644
index 0000000000..f001541498
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { getParticle, i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const emit = defineEmits<{(event: 'deleted'): void;
+}>();
+const taskDetailPageStore = useTaskDetailPageStore();
+const taskStore = useTaskStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+const loading = ref<boolean>(false);
+
+let hasDeleted = false;
+const deleteTask = async () => {
+    try {
+        if (!taskDetailPageStore.state.taskId) throw new Error('taskId is not defined');
+        loading.value = true;
+        await taskStore.delete(taskDetailPageStore.state.taskId);
+        hasDeleted = true;
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: taskManagementTemplateStore.templates.Task }));
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ERR_S_DELETE_TARGET', { target: taskManagementTemplateStore.templates.Task }));
+    } finally {
+        loading.value = false;
+        taskDetailPageStore.closeTaskDeleteModal();
+    }
+};
+
+const handleConfirm = async () => {
+    await deleteTask();
+};
+const handleClosed = () => {
+    if (hasDeleted) {
+        emit('deleted');
+    }
+    hasDeleted = false;
+};
+</script>
+
+<template>
+    <delete-modal :header-title="$t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+                      object: taskManagementTemplateStore.templates.task,
+                      particle: getParticle(taskManagementTemplateStore.templates.task,'object') })"
+                  :visible="taskDetailPageStore.state.visibleTaskDeleteModal"
+                  :loading="loading"
+                  @close="taskDetailPageStore.closeTaskDeleteModal()"
+                  @cancel="taskDetailPageStore.closeTaskDeleteModal()"
+                  @closed="handleClosed"
+                  @confirm="handleConfirm"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskFieldDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskFieldDeleteModal.vue
new file mode 100644
index 0000000000..0d02f6174f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskFieldDeleteModal.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import { getParticle } from '@/translations';
+
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const props = defineProps<{
+    visible: boolean;
+}>();
+const emit = defineEmits<{(event: 'confirm'): void;
+    (event: 'update:visible', value: boolean): void;
+}>();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const handleConfirm = async () => {
+    emit('confirm');
+    emit('update:visible', false);
+};
+const handleCloseOrCancel = () => {
+    emit('update:visible', false);
+};
+</script>
+
+<template>
+    <p-button-modal :visible="props.visible"
+                    theme-color="alert"
+                    :header-title="$t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+                        object: $t('OPSFLOW.FIELD_GENERATOR.FIELD'),
+                        particle: getParticle($t('OPSFLOW.FIELD_GENERATOR.FIELD'), 'object')
+                    })"
+                    size="md"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+    >
+        <template #body>
+            <div class="mb-4 flex items-end justify-between">
+                <i18n path="OPSFLOW.FIELD_GENERATOR.FIELD_DELETE_DESC"
+                      tag="p"
+                      class="flex items-center text-paragraph-lg font-bold first-letter:capitalize"
+                >
+                    <!-- CAUTION: Do not remove the following comments. They are used to prevent auto-formatting of the template. -->
+                    <!-- In this case, template tags must be in a single line to prevent inserting unnecessary spaces. -->
+                    <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                    <template #field>{{ $t('OPSFLOW.FIELD_GENERATOR.FIELD') }}</template>
+                    <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                    <template #taskType>{{ taskManagementTemplateStore.templates.taskType }}</template>
+                    <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                    <template #task>{{ taskManagementTemplateStore.templates.task }}</template>
+                </i18n>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskManagementTemplatePanel.vue b/apps/web/src/services/ops-flow/components/TaskManagementTemplatePanel.vue
new file mode 100644
index 0000000000..8bc5916096
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskManagementTemplatePanel.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { reactive, computed } from 'vue';
+
+import {
+    PSelectDropdown, PI, PTooltip,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import {
+    TASK_MANAGEMENT_TEMPLATE_TYPES,
+} from '@/services/ops-flow/task-management-templates/constants/task-management-template-constant';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type {
+    TaskManagementTemplateType,
+} from '@/services/ops-flow/task-management-templates/types/task-management-template-type';
+
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+const taskManagementTemplateState = taskManagementTemplateStore.state;
+
+const state = reactive({
+    templateMenuItems: computed<SelectDropdownMenuItem[]>(() => TASK_MANAGEMENT_TEMPLATE_TYPES.map((templateType) => ({
+        name: templateType,
+        label: taskManagementTemplateStore.translate('TemplateName', templateType).value,
+    }))),
+});
+
+const handleSelectTemplate = async (templateId: TaskManagementTemplateType) => {
+    if (templateId === taskManagementTemplateState.templateId) return;
+    await taskManagementTemplateStore.updateTemplateId(templateId);
+};
+</script>
+
+<template>
+    <div class="inline-flex px-4 py-2 rounded-lg bg-gray-150">
+        <div class="flex items-center gap-2 flex-wrap">
+            <div class="inline-flex items-center gap-1 text-gray-700 font-bold">
+                <span class="text-label-md">{{ $t('OPSFLOW.TASK_MANAGEMENT.TEMPLATE_TYPE') }}</span>
+                <p-tooltip :contents="$t('OPSFLOW.TASK_MANAGEMENT.TEMPLATE_DESC')"
+                           position="bottom"
+                           class="tooltip"
+                >
+                    <p-i width="1rem"
+                         height="1rem"
+                         name="ic_info-circle"
+                    />
+                </p-tooltip>
+            </div>
+            <p-select-dropdown :selected="taskManagementTemplateState.templateId"
+                               :menu="state.templateMenuItems"
+                               class="w-64"
+                               style-type="rounded"
+                               @select="handleSelectTemplate"
+            />
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskProgressTab.vue b/apps/web/src/services/ops-flow/components/TaskProgressTab.vue
new file mode 100644
index 0000000000..1d46053ff5
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskProgressTab.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {
+    computed, onBeforeMount, onUnmounted,
+} from 'vue';
+
+import { PDataLoader, PButton } from '@cloudforet/mirinae';
+
+import type { EventModel } from '@/schema/opsflow/event/model';
+
+
+import { useUserStore } from '@/store/user/user-store';
+
+import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
+import VerticalTimelineItem from '@/common/components/vertical-timeline/VerticalTimelineItem.vue';
+
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+
+const taskDetailPageStore = useTaskDetailPageStore();
+const taskDetailPageState = taskDetailPageStore.state;
+const taskDetailPageGetters = taskDetailPageStore.getters;
+const userStore = useUserStore();
+
+const timezone = computed(() => userStore.state.timezone);
+const getStyleType = (item: EventModel) => {
+    if (item.event_type === 'CREATED') return 'gray';
+    if (item.event_type === 'COMMENTED') return 'yellow';
+    return 'violet';
+};
+
+onBeforeMount(async () => {
+    await taskDetailPageStore.listEvents();
+});
+
+onUnmounted(() => {
+    taskDetailPageStore.resetEvents();
+});
+</script>
+
+
+<template>
+    <div class="p-4 pb-0">
+        <p-data-loader :loading="taskDetailPageGetters.firstLoadingEvents"
+                       :data="taskDetailPageState.events"
+        >
+            <vertical-timeline-item
+                v-for="(item, idx) in taskDetailPageState.events"
+                :key="item.event_id"
+                :title="item.name"
+                :description="item.description"
+                :datetime="item.created_at"
+                :timezone="timezone"
+                :style-type="getStyleType(item)"
+                :is-last-item="idx === taskDetailPageState.events.length - 1"
+                class="timeline"
+            >
+                <div class="text-label-sm text-gray-600">
+                    <text-editor-viewer :contents="item.description" />
+                </div>
+            </vertical-timeline-item>
+        </p-data-loader>
+        <div class="flex justify-center mt-6">
+            <p-button v-if="!taskDetailPageGetters.firstLoadingEvents
+                          && taskDetailPageGetters.hasMoreEvents"
+                      icon-right="ic_chevron-down"
+                      size="sm"
+                      style-type="secondary"
+                      :loading="taskDetailPageState.loadingEvents"
+                      @click="taskDetailPageStore.listEvents()"
+            >
+                {{ $t('OPSFLOW.SHOW_MORE') }}
+            </p-button>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusBadge.vue b/apps/web/src/services/ops-flow/components/TaskStatusBadge.vue
new file mode 100644
index 0000000000..7dfeeebc43
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusBadge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { PBadge } from '@cloudforet/mirinae';
+
+const props = defineProps<{
+    name: string;
+    color: string;
+}>();
+</script>
+
+<template>
+    <p-badge badge-type="subtle"
+             shape="square"
+             :style-type="props.color"
+    >
+        {{ props.name }}
+    </p-badge>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
new file mode 100644
index 0000000000..7aca45b91e
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { cloneDeep } from 'lodash';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+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';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import TaskStatusBadge from '@/services/ops-flow/components/TaskStatusBadge.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageState = taskCategoryPageStore.state;
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+const taskCategoryStore = useTaskCategoryStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const defaultStatus = computed<TaskStatusOption|undefined>(() => {
+    if (!taskCategoryPageGetters.targetStatusOption) {
+        ErrorHandler.handleError(new Error('Target status option is required'));
+        return undefined;
+    }
+    const { type } = taskCategoryPageGetters.targetStatusOption;
+    const defaultStatusOption = taskCategoryPageGetters.statusOptions[type].find((p) => p.is_default);
+    if (!defaultStatusOption) {
+        ErrorHandler.handleError(new Error('Default status option is not found'));
+        return undefined;
+    }
+    return defaultStatusOption;
+});
+const deleteStatusOption = async (categoryId: string, allStatusOptions: TaskStatusOptions, targetStatusOption: {
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        const { type, data } = targetStatusOption;
+        const idx = newStatusOptions[type].findIndex((p) => p.status_id === data.status_id);
+        if (idx === -1) throw new Error('Status not found');
+        newStatusOptions[type].splice(idx, 1);
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: _i18n.t('OPSFLOW.STATUS') }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_DELETE_TARGET', { target: _i18n.t('OPSFLOW.STATUS') }));
+    }
+};
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    try {
+        loading.value = true;
+        if (!taskCategoryPageStore.state.currentCategoryId) throw new Error('Category ID is required');
+        await deleteStatusOption(taskCategoryPageStore.state.currentCategoryId, taskCategoryPageStore.getters.statusOptions, taskCategoryPageStore.getters.targetStatusOption);
+        taskCategoryPageStore.closeDeleteStatusModal();
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    } finally {
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskCategoryPageStore.closeDeleteStatusModal();
+};
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetStatus();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskCategoryPageState.visibleStatusDeleteModal"
+                    theme-color="alert"
+                    :header-title="$t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+                        object: $t('OPSFLOW.STATUS'),
+                        particle: getParticle($t('OPSFLOW.STATUS'), 'object'),
+                    })"
+                    size="md"
+                    :loading="loading"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #body>
+            <div class="mb-4 flex items-end justify-between">
+                <i18n path="OPSFLOW.TASK_MANAGEMENT.STATUS.DELETE_CONTINUE"
+                      tag="p"
+                      class="flex items-center text-paragraph-lg font-bold"
+                >
+                    <!-- CAUTION: Do not remove the following comments. They are used to prevent auto-formatting of the template. -->
+                    <!-- In this case, template tags must be in a single line to prevent inserting unnecessary spaces. -->
+                    <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+                    <template #task>{{ taskManagementTemplateStore.templates.task }}</template>
+                    <template #default>
+                        <task-status-badge v-if="defaultStatus"
+                                           class="mx-1 font-normal"
+                                           :name="defaultStatus.name"
+                                           :color="defaultStatus.color"
+                        /><template v-else>
+                            $t{('OPSFLOW.DEFAULT')}
+                        </template>
+                    </template>
+                </i18n>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
new file mode 100644
index 0000000000..fa1bfa05eb
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PI, PBadge } from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+import type { TaskStatusType } from '@/schema/opsflow/task/type';
+import { i18n } from '@/translations';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
+import TaskStatusBadge from '@/services/ops-flow/components/TaskStatusBadge.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+
+const props = defineProps<{
+    index: number;
+    id: string;
+    name: string;
+    color: string;
+    type: TaskStatusType;
+    isDefault?: boolean;
+}>();
+
+const menu = computed<MenuItem[]>(() => [
+    { name: 'edit', icon: 'ic_edit', label: i18n.t('COMMON.BUTTONS.EDIT') },
+    { name: 'set-as-default', icon: 'ic_check-circle', label: i18n.t('OPSFLOW.SET_AS_DEFAULT') },
+    { name: 'delete', icon: 'ic_delete', label: i18n.t('COMMON.BUTTONS.DELETE') },
+]);
+const defaultStatusMenu = computed<MenuItem[]>(() => [
+    {
+        name: 'edit', icon: 'ic_edit', label: i18n.t('COMMON.BUTTONS.EDIT'),
+    },
+    {
+        name: 'set-as-default', icon: 'ic_check-circle', label: i18n.t('OPSFLOW.SET_AS_DEFAULT'), disabled: true, iconColor: 'inherit',
+    },
+    {
+        name: 'delete', icon: 'ic_delete', label: i18n.t('COMMON.BUTTONS.DELETE'), disabled: true, iconColor: 'inherit',
+    },
+]);
+const taskCategoryPageStore = useTaskCategoryPageStore();
+
+const handleEdit = () => {
+    taskCategoryPageStore.openEditStatusForm(props.id, props.type);
+};
+const handleDelete = () => {
+    taskCategoryPageStore.openDeleteStatusModal(props.id, props.type);
+};
+const handleSetDefault = () => {
+    taskCategoryPageStore.openSetDefaultStatusModal(props.id, props.type);
+};
+</script>
+
+<template>
+    <li class="task-status-draggable-item">
+        <p-i name="ic_drag-handle"
+             width="1rem"
+             height="1rem"
+             class="drag-handle"
+        />
+        <div class="flex-grow">
+            <task-status-badge class="ml-2"
+                               :name="props.name"
+                               :color="props.color"
+            />
+            <p-badge v-if="props.isDefault"
+                     class="ml-1"
+                     badge-type="solid-outline"
+                     style-type="gray500"
+                     shape="round"
+            >
+                {{ $t('OPSFLOW.DEFAULT') }}
+            </p-badge>
+        </div>
+        <action-menu-button :menu="props.isDefault ? defaultStatusMenu : menu"
+                            @edit="handleEdit"
+                            @delete="handleDelete"
+                            @set-as-default="handleSetDefault"
+        />
+    </li>
+</template>
+
+<style lang="postcss" scoped>
+.task-status-draggable-item {
+    @apply flex items-center px-2 border border-b-0 border-gray-150;
+    height: 2.625rem;
+    &:first-of-type {
+        @apply rounded-t-lg;
+    }
+    &:last-of-type {
+        @apply rounded-b-lg border-b;
+    }
+    &.ghost {
+        @apply rounded-lg border;
+    }
+    >.drag-handle {
+        cursor: grab;
+    }
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
new file mode 100644
index 0000000000..356e5989c7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import {
+    ref, computed, onBeforeMount, nextTick, watch,
+} from 'vue';
+
+import { cloneDeep } from 'lodash';
+
+import {
+    POverlayLayout, PFieldGroup, PTextInput, PSelectDropdown, PButton, PI,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { TASK_STATUS_COLOR_NAMES } from '@/schema/opsflow/task/constant';
+import type {
+    TaskStatusColorName,
+    TaskStatusOption, TaskStatusOptions,
+    TaskStatusType,
+} from '@/schema/opsflow/task/type';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageState = taskCategoryPageStore.state;
+const taskCategoryStore = useTaskCategoryStore();
+
+/* status type */
+const statusIdAndNames = computed<[id: string, name: string][]>(() => Object.values(taskCategoryPageStore.getters.statusOptions).flat().map((p) => [p.status_id, p.name]));
+const statusTypeItems = computed<SelectDropdownMenuItem[]>(() => [
+    { label: 'To-do', name: 'TODO' },
+    { label: 'In progress', name: 'IN_PROGRESS' },
+    { label: 'Completed', name: 'COMPLETED' },
+]);
+
+/* color chips */
+const {
+    forms: { name, statusType, color },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+    resetValidations,
+} = useFormValidator({
+    name: '',
+    statusType: statusTypeItems.value[0] as SelectDropdownMenuItem,
+    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';
+        const statusId = taskCategoryPageStore.getters.targetStatusOption?.data.status_id;
+        if (statusIdAndNames.value.some((p) => p[1] === value && p[0] !== statusId)) return 'Name already exists';
+        return true;
+    },
+});
+
+const loading = ref(false);
+const handleCancelOrClose = () => {
+    initForm();
+    taskCategoryPageStore.closeStatusForm();
+};
+
+const updateStatusOptions = async (categoryId: string, allStatusOptions: TaskStatusOptions, targetStatusOption: {
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        const { type, data } = targetStatusOption;
+        if (statusType.value.name !== type) {
+            newStatusOptions[statusType.value.name].push({
+                ...data,
+                name: name.value,
+                color: color.value,
+            });
+            newStatusOptions[type] = newStatusOptions[type].filter((p) => p.status_id !== data.status_id);
+        } else {
+            const target = newStatusOptions[type].find((p) => p.status_id === data.status_id);
+            if (!target) throw new Error('[Console Error] Failed to find target status option');
+            target.name = name.value;
+            target.color = color.value;
+        }
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage('Task status option updated successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to update task status option');
+    }
+};
+
+const createStatusOption = async (categoryId: string, allStatusOptions: TaskStatusOptions) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        newStatusOptions[statusType.value.name].push({
+            name: name.value,
+            color: color.value,
+        });
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage('Task status option created successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to create task status option');
+    }
+};
+
+const handleConfirm = async () => {
+    if (!isAllValid.value) return;
+    try {
+        if (!taskCategoryPageState.currentCategoryId) {
+            throw new Error('Category ID is required');
+        }
+        loading.value = true;
+        if (taskCategoryPageStore.getters.targetStatusOption) {
+            await updateStatusOptions(taskCategoryPageState.currentCategoryId, taskCategoryPageStore.getters.statusOptions, taskCategoryPageStore.getters.targetStatusOption);
+        } else {
+            await createStatusOption(taskCategoryPageState.currentCategoryId, taskCategoryPageStore.getters.statusOptions);
+        }
+        taskCategoryPageStore.closeStatusForm();
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    } finally {
+        loading.value = false;
+    }
+};
+
+onBeforeMount(() => {
+    if (taskCategoryPageStore.getters.targetStatusOption) {
+        const { type, data } = taskCategoryPageStore.getters.targetStatusOption;
+        setForm('name', data.name);
+        setForm('statusType', statusTypeItems.value.find((p) => p.name === type) ?? statusTypeItems.value[0]);
+        setForm('color', data.color ?? TASK_STATUS_COLOR_NAMES[0]);
+    }
+});
+
+watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageStore.getters.targetStatusOption], async ([visible, target], [prevVisible]) => {
+    if (!visible) {
+        if (!prevVisible) return; // prevent initial call
+        await nextTick(); // wait for closing animation
+        setForm({
+            name: '',
+            statusType: statusTypeItems.value[0],
+            color: TASK_STATUS_COLOR_NAMES[0],
+        });
+        resetValidations();
+        return;
+    }
+    if (target) {
+        const { type, data } = target;
+        setForm('name', data.name);
+        setForm('statusType', statusTypeItems.value.find((p) => p.name === type) ?? statusTypeItems.value[0]);
+        setForm('color', data.color ?? TASK_STATUS_COLOR_NAMES[0]);
+    }
+});
+
+</script>
+
+<template>
+    <p-overlay-layout :title="taskCategoryPageStore.getters.targetStatusOption ? 'Edit Status' : 'Add Status'"
+                      :visible="taskCategoryPageState.visibleStatusForm"
+                      @close="handleCancelOrClose"
+    >
+        <template #default>
+            <div class="p-6 w-full">
+                <p-field-group label="Name"
+                               required
+                               :invalid="!loading && invalidState.name"
+                               :invalid-text="invalidTexts.name"
+                >
+                    <template #default="{ invalid }">
+                        <p-text-input :value="name"
+                                      :invalid="invalid"
+                                      block
+                                      @update:value="setForm('name', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group v-if="!taskCategoryPageStore.getters.targetStatusOption?.data?.is_default"
+                               label="Status Type"
+                               required
+                               :invalid="!loading && invalidState.statusType"
+                               :invalid-text="invalidTexts.statusType"
+                >
+                    <template #default="{ invalid }">
+                        <p-select-dropdown :selected="[statusType]"
+                                           :menu="statusTypeItems"
+                                           :invalid="invalid"
+                                           block
+                                           @select="setForm('statusType', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group label="Color"
+                               required
+                               :invalid="invalidState.color"
+                               :invalid-text="invalidTexts.color"
+                >
+                    <div class="flex flex-wrap gap-1">
+                        <span v-for="colorName in TASK_STATUS_COLOR_NAMES"
+                              :key="colorName"
+                              :class="colorName"
+                              class="color-picker-chip"
+                              @click="setForm('color', colorName)"
+                        >
+                            <p-i v-if="color === colorName"
+                                 name="ic_check"
+                                 class="chip-check-mark"
+                                 height="1rem"
+                                 width="1rem"
+                                 color="inherit"
+                            />
+                        </span>
+                    </div>
+                </p-field-group>
+            </div>
+        </template>
+        <template #footer>
+            <div class="py-3 px-6 flex flex-wrap gap-1 justify-end">
+                <p-button style-type="transparent"
+                          :disabled="loading"
+                          @click="handleCancelOrClose"
+                >
+                    Cancel
+                </p-button>
+                <p-button style-type="primary"
+                          :loading="loading"
+                          :disabled="!isAllValid"
+                          @click="handleConfirm"
+                >
+                    Confirm
+                </p-button>
+            </div>
+        </template>
+    </p-overlay-layout>
+</template>
+
+<style scoped lang="postcss">
+@define-mixin color-chip-style $theme, $bg-color, $border-color, $text-color, $outline-color {
+    &.$(theme) {
+        background-color: $bg-color;
+        border-color: $border-color;
+        .chip-check-mark {
+            color: $text-color;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                outline-color: $outline-color;
+            }
+        }
+    }
+}
+.color-picker-chip {
+    @apply inline-flex items-center justify-center cursor-pointer rounded-full border;
+    height: 24px;
+    width: 24px;
+    .chip-check-mark {
+        border-radius: 100%;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            outline-width: 2px;
+            outline-style: solid;
+        }
+    }
+
+    @mixin color-chip-style gray200, theme('colors.gray.200'), theme('colors.gray.300'), theme('colors.gray.700'), theme('colors.gray.100');
+    @mixin color-chip-style violet200, theme('colors.violet.200'), theme('colors.violet.300'), theme('colors.violet.700'), theme('colors.violet.100');
+    @mixin color-chip-style blue200, theme('colors.blue.200'), theme('colors.blue.300'), theme('colors.blue.700'), theme('colors.blue.100');
+    @mixin color-chip-style peacock200, theme('colors.peacock.200'), theme('colors.peacock.300'), theme('colors.peacock.700'), theme('colors.peacock.100');
+    @mixin color-chip-style green200, theme('colors.green.200'), theme('colors.green.300'), theme('colors.green.700'), theme('colors.green.100');
+    @mixin color-chip-style yellow200, theme('colors.yellow.200'), theme('colors.yellow.300'), theme('colors.yellow.700'), theme('colors.yellow.100');
+    @mixin color-chip-style coral200, theme('colors.coral.200'), theme('colors.coral.300'), theme('colors.coral.700'), theme('colors.coral.100');
+    @mixin color-chip-style red200, theme('colors.red.200'), theme('colors.red.300'), theme('colors.red.700'), theme('colors.red.100');
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusList.vue b/apps/web/src/services/ops-flow/components/TaskStatusList.vue
new file mode 100644
index 0000000000..cf2674126d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusList.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import draggable from 'vuedraggable';
+
+import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import TaskStatusDraggableItem from '@/services/ops-flow/components/TaskStatusDraggableItem.vue';
+import TaskStatusListFoldButton from '@/services/ops-flow/components/TaskStatusListFoldButton.vue';
+
+const props = defineProps<{
+    header: string;
+    type: TaskStatusType;
+    items: TaskStatusOption[];
+}>();
+const emit = defineEmits<{(event: 'update:items', value: TaskStatusOption[]): void;
+}>();
+
+const isFolded = ref(false);
+
+// `localItems` acts as a proxy for `props.items`, allowing temporary local updates
+// while waiting for asynchronous changes to reflect in the parent.
+const localItems = ref<TaskStatusOption[]>(props.items);
+// `draggableItems` syncs `localItems` with the parent via an `update:items` event,
+// ensuring local changes are reflected in both states.
+const draggableItems = computed<TaskStatusOption[]>({
+    get() {
+        return localItems.value;
+    },
+    set(value: TaskStatusOption[]) {
+        localItems.value = value;
+        emit('update:items', value);
+    },
+});
+
+watch(() => props.items, (newItems) => {
+    localItems.value = newItems;
+});
+
+</script>
+
+<template>
+    <div>
+        <div class="pt-2 pb-1">
+            <task-status-list-fold-button :is-folded.sync="isFolded">
+                {{ props.header }}
+            </task-status-list-fold-button>
+        </div>
+        <div v-show="!isFolded">
+            <draggable v-model="draggableItems"
+                       tag="ol"
+                       draggable=".task-status-draggable-item"
+                       ghost-class="ghost"
+                       handle=".drag-handle"
+            >
+                <task-status-draggable-item v-for="(item, index) in draggableItems"
+                                            :id="item.status_id"
+                                            :key="item.status_id"
+                                            :index="index"
+                                            :name="item.name"
+                                            :color="item.color"
+                                            :type="props.type"
+                                            :is-default="item.is_default"
+                />
+            </draggable>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusListFoldButton.vue b/apps/web/src/services/ops-flow/components/TaskStatusListFoldButton.vue
new file mode 100644
index 0000000000..c9a41c2818
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusListFoldButton.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { PI } from '@cloudforet/mirinae';
+
+const isFolded = ref(false);
+const emit = defineEmits<{(event: 'update:isFolded', value: boolean): void;
+}>();
+const handleClick = () => {
+    isFolded.value = !isFolded.value;
+    emit('update:isFolded', isFolded.value);
+};
+</script>
+
+<template>
+    <button class="inline-flex items-center rounded p-1 pr-3"
+            @click="handleClick"
+    >
+        <p-i :name="isFolded ? 'ic_chevron-right' : 'ic_chevron-down'"
+             height="1.25rem"
+             width="1.25rem"
+             class="flex-shrink-0"
+        />
+        <span class="flex-shrink-0 text-label-md">
+            <slot />
+        </span>
+    </button>
+</template>
+
+<style lang="postcss" scoped>
+button {
+    @media (hover: hover) {
+        &:hover {
+            @apply bg-gray-150;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
new file mode 100644
index 0000000000..d0d78dd0f1
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { cloneDeep } from 'lodash';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+import { i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryStore = useTaskCategoryStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const loading = ref<boolean>(false);
+const name = computed(() => taskCategoryPageStore.getters.targetStatusOption?.data?.name ?? '');
+
+const setAsDefaultStatus = async (categoryId: string, allStatusOptions: TaskStatusOptions, targetStatusOption: {
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        const { type, data } = targetStatusOption;
+        const prevDefault = newStatusOptions[type].find((p) => p.is_default);
+        if (prevDefault) prevDefault.is_default = false;
+        const newDefault = newStatusOptions[type].find((p) => p.status_id === data.status_id);
+        if (!newDefault) throw new Error('Status not found');
+        newDefault.is_default = true;
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: _i18n.t('OPSFLOW.STATUS') }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: _i18n.t('OPSFLOW.STATUS') }));
+    }
+};
+const handleConfirm = async () => {
+    loading.value = true;
+    try {
+        if (!taskCategoryPageStore.state.currentCategoryId) {
+            throw new Error('Category ID is required');
+        }
+        if (!taskCategoryPageStore.getters.targetStatusOption) {
+            throw new Error('[Console Error] Cannot set default status without a target status');
+        }
+        await setAsDefaultStatus(taskCategoryPageStore.state.currentCategoryId, taskCategoryPageStore.getters.statusOptions, taskCategoryPageStore.getters.targetStatusOption);
+        taskCategoryPageStore.closeSetDefaultStatusModal();
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    } finally {
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskCategoryPageStore.closeSetDefaultStatusModal();
+};
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetStatus();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskCategoryPageStore.state.visibleSetDefaultStatusModal"
+                    size="sm"
+                    :loading="loading"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #header-title>
+            <i18n path="OPSFLOW.TASK_MANAGEMENT.STATUS.SET_AS_DEFAULT">
+                Set <template #status>
+                    <strong>{{ name }}</strong>
+                </template> as the default status.
+            </i18n>
+        </template>
+        <template #body>
+            {{ $t('OPSFLOW.TASK_MANAGEMENT.STATUS.SET_DEFAULT_DESC', {tasks: taskManagementTemplateStore.templates.tasks}) }}
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusTree.vue b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
new file mode 100644
index 0000000000..699f35c893
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import TaskStatusList from '@/services/ops-flow/components/TaskStatusList.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryStore = useTaskCategoryStore();
+
+const taskStatusTree = computed<{
+    key: TaskStatusType,
+    name: string,
+}[]>(() => [
+    { key: 'TODO', name: 'To-do' },
+    { key: 'IN_PROGRESS', name: 'In Progress' },
+    { key: 'COMPLETED', name: 'Completed' },
+]);
+
+const handleUpdateItems = async (statusType: TaskStatusType, items: TaskStatusOption[]) => {
+    try {
+        if (!taskCategoryPageStore.state.currentCategoryId) {
+            throw new Error('Category ID is required');
+        }
+        await taskCategoryStore.update({
+            category_id: taskCategoryPageStore.state.currentCategoryId,
+            status_options: {
+                ...taskCategoryPageStore.getters.statusOptions,
+                [statusType]: items,
+            },
+            force: true,
+        });
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: i18n.t('OPSFLOW.STATUS') }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_EDIT_TARGET', { target: i18n.t('OPSFLOW.STATUS') }));
+    }
+};
+</script>
+
+<template>
+    <div>
+        <template v-for="taskStatus in taskStatusTree">
+            <task-status-list :key="taskStatus.key"
+                              :type="taskStatus.key"
+                              :header="taskStatus.name"
+                              :items="taskCategoryPageStore.getters.statusOptions[taskStatus.key]"
+                              @update:items="handleUpdateItems(taskStatus.key, $event)"
+            />
+        </template>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
new file mode 100644
index 0000000000..9a9af6fa82
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+import { PButtonModal, PIconButton } from '@cloudforet/mirinae';
+
+import { getParticle, i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import AssociatedTasks from '@/services/ops-flow/components/AssociatedTasks.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageState = taskCategoryPageStore.state;
+const taskTypeStore = useTaskTypeStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const deletable = computed(() => !taskCategoryPageStore.getters.associatedTasksToType.length);
+const headerTitle = computed(() => {
+    if (taskCategoryPageState.loadingAssociatedTasksToType) {
+        return ' ';
+    }
+    return deletable.value
+        ? _i18n.t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
+            object: taskManagementTemplateStore.templates.TaskType,
+            particle: getParticle(taskManagementTemplateStore.templates.TaskType, 'object'),
+        })
+        : _i18n.t('OPSFLOW.DELETE_TARGET', { target: taskManagementTemplateStore.templates.TaskType });
+});
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    try {
+        loading.value = true;
+        if (!taskCategoryPageState.targetTaskTypeId) {
+            throw new Error('[Console Error] Cannot delete task type without a target task type');
+        }
+        await taskTypeStore.delete(taskCategoryPageState.targetTaskTypeId, taskCategoryPageStore.getters.targetTaskType?.category_id);
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_DELETE_TARGET', { target: taskManagementTemplateStore.templates.TaskType }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_DELETE_TARGET', { target: taskManagementTemplateStore.templates.TaskType }));
+    } finally {
+        taskCategoryPageStore.closeDeleteTaskTypeModal();
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskCategoryPageStore.closeDeleteTaskTypeModal();
+};
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetTaskTypeId();
+};
+const handleRefresh = () => {
+    if (!taskCategoryPageState.targetTaskTypeId) {
+        ErrorHandler.handleError(new Error('[Console Error] Cannot delete task type without a target task type'));
+        return;
+    }
+    taskCategoryPageStore.loadAssociatedTasksToType(taskCategoryPageState.targetTaskTypeId, true);
+};
+
+watch(() => taskCategoryPageState.visibleTaskTypeDeleteModal, (visible) => {
+    if (visible) {
+        if (!taskCategoryPageState.targetTaskTypeId) {
+            ErrorHandler.handleError(new Error('[Console Error] Cannot delete task type without a target task type'));
+            return;
+        }
+        taskCategoryPageStore.loadAssociatedTasksToType(taskCategoryPageState.targetTaskTypeId);
+    }
+});
+</script>
+
+<template>
+    <p-button-modal :visible="taskCategoryPageState.visibleTaskTypeDeleteModal"
+                    theme-color="alert"
+                    :header-title="headerTitle"
+                    :size="deletable ? 'sm' : 'md'"
+                    :loading="loading"
+                    :loading-backdrop="taskCategoryPageState.loadingAssociatedTasksToType"
+                    :disabled="!deletable"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #body>
+            <div v-if="!deletable">
+                <div class="mb-4 flex items-end justify-between">
+                    <p class="text-paragraph-lg font-bold">
+                        {{ $t('OPSFLOW.TASK_MANAGEMENT.TASK_TYPE.DELETE_UNAVAILABLE', {
+                            taskType: taskManagementTemplateStore.templates.TaskType,
+                            tasks: taskManagementTemplateStore.templates.tasks,
+                            particle: getParticle(taskManagementTemplateStore.templates.tasks, 'subject')
+                        }) }}
+                    </p>
+                    <p-icon-button name="ic_refresh"
+                                   @click="handleRefresh"
+                    />
+                </div>
+                <associated-tasks :tasks="taskCategoryPageStore.getters.associatedTasksToType" />
+            </div>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
new file mode 100644
index 0000000000..2c5598d47d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import {
+    ref, nextTick, watch, computed,
+} from 'vue';
+
+import { isEqual, cloneDeep } from 'lodash';
+
+import {
+    POverlayLayout, PFieldGroup, PTextInput, PButton, PTextarea,
+} from '@cloudforet/mirinae';
+
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import { getParticle, i18n as _i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import {
+    useTaskFieldsConfiguration,
+} from '@/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration';
+import TaskFieldsConfiguration from '@/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageState = taskCategoryPageStore.state;
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+const taskTypeStore = useTaskTypeStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const title = computed(() => {
+    if (taskCategoryPageGetters.targetTaskType) {
+        return _i18n.t('OPSFLOW.EDIT_TARGET', { target: taskManagementTemplateStore.templates.TaskType });
+    }
+    return _i18n.t('OPSFLOW.ADD_TARGET', { target: taskManagementTemplateStore.templates.TaskType });
+});
+
+/* task field configuration */
+const {
+    taskFieldsValidator,
+    fields,
+    setFields,
+    addField,
+    removeField,
+    updateFieldValidation,
+    setInitialFields,
+} = useTaskFieldsConfiguration();
+
+/* form validation */
+const {
+    forms: { name, description, assigneePool },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+    resetValidations,
+} = useFormValidator({
+    name: '',
+    description: '',
+    assigneePool: [] as string[],
+    fields: taskFieldsValidator,
+}, {
+    name(value: string) {
+        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,
+            });
+        }
+        if (!taskCategoryPageGetters.taskTypes) return true;
+        const isDuplicated = taskCategoryPageGetters.taskTypes.some((taskType) => taskType.name === value && taskType.task_type_id !== taskCategoryPageGetters.targetTaskType?.task_type_id);
+        if (isDuplicated) return _i18n.t('OPSFLOW.VALIDATION.DUPLICATED', { topic: _i18n.t('OPSFLOW.NAME') });
+        return true;
+    },
+});
+
+const loading = ref(false);
+const handleCancelOrClose = () => {
+    initForm();
+    taskCategoryPageStore.closeTaskTypeForm();
+};
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetTaskTypeId();
+};
+
+const updateTaskTypeFields = async (taskTypeId: string) => {
+    await taskTypeStore.updateFields({
+        task_type_id: taskTypeId,
+        fields: fields.value,
+        force: true,
+    });
+};
+
+const createTaskType = async (categoryId: string) => {
+    try {
+        await taskTypeStore.create({
+            name: name.value,
+            description: description.value,
+            assignee_pool: assigneePool.value,
+            category_id: categoryId,
+            fields: fields.value,
+        });
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: taskManagementTemplateStore.templates.TaskType }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_ADD_TARGET', { target: taskManagementTemplateStore.templates.TaskType }));
+    }
+};
+
+const updateTaskType = async (target: TaskTypeModel) => {
+    try {
+        const promises: Promise<any>[] = [];
+        if (target.name !== name.value
+            || target.description !== description.value
+            || !isEqual(target.assignee_pool, assigneePool.value)
+        ) {
+            promises.push(taskTypeStore.update({
+                task_type_id: target.task_type_id,
+                name: name.value,
+                description: description.value,
+                assignee_pool: assigneePool.value,
+            }));
+        }
+        if (!isEqual(fields.value, target.fields)) {
+            promises.push(updateTaskTypeFields(target.task_type_id));
+        }
+        const result = await Promise.allSettled(promises);
+        const errorMessages: string[] = [];
+        result.forEach((res) => {
+            if (res.status === 'rejected') {
+                errorMessages.push(res.reason.message);
+            }
+        });
+        if (errorMessages.length) {
+            throw new Error(errorMessages.join('\n'));
+        }
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: taskManagementTemplateStore.templates.TaskType }), '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_EDIT_TARGET', { target: taskManagementTemplateStore.templates.TaskType }));
+    }
+};
+
+let initialTaskType: TaskTypeModel|undefined;
+const handleConfirm = async () => {
+    if (!isAllValid.value) return;
+    try {
+        if (!taskCategoryPageState.currentCategoryId) throw new Error('Category ID is not set');
+        loading.value = true;
+        if (initialTaskType) {
+            await updateTaskType(initialTaskType);
+        } else {
+            await createTaskType(taskCategoryPageState.currentCategoryId);
+        }
+        taskCategoryPageStore.closeTaskTypeForm();
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    } finally {
+        loading.value = false;
+    }
+};
+
+watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGetters.targetTaskType], async ([visible, target], [prevVisible]) => {
+    if (!visible) {
+        if (!prevVisible) return; // prevent initial call
+        await nextTick(); // wait for closing animation
+        setForm({
+            name: '',
+            description: '',
+            assigneePool: [],
+        });
+        setInitialFields([]);
+        initialTaskType = undefined;
+        resetValidations();
+        return;
+    }
+    if (target) {
+        initialTaskType = cloneDeep(target);
+        setForm({
+            name: target.name,
+            description: target.description,
+            assigneePool: target.assignee_pool,
+        });
+        setInitialFields(target.fields);
+    }
+});
+
+</script>
+
+<template>
+    <p-overlay-layout :title="title"
+                      :visible="taskCategoryPageState.visibleTaskTypeForm"
+                      size="lg"
+                      @close="handleCancelOrClose"
+                      @closed="handleClosed"
+    >
+        <template #default>
+            <div class="p-6 w-full">
+                <p-field-group :label="$t('OPSFLOW.NAME')"
+                               required
+                               :invalid="!loading && invalidState.name"
+                               :invalid-text="invalidTexts.name"
+                >
+                    <template #default="{ invalid }">
+                        <p-text-input :value="name"
+                                      :invalid="invalid"
+                                      block
+                                      @update:value="setForm('name', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group :label="$t('OPSFLOW.ASSIGNEE_POOL')">
+                    <user-select-dropdown :selected-user-ids="assigneePool"
+                                          selection-type="multiple"
+                                          @update:user-ids="setForm('assigneePool', $event)"
+                    />
+                </p-field-group>
+                <p-field-group :label="$t('OPSFLOW.DESCRIPTION')">
+                    <p-textarea :value="description"
+                                :placeholder="$t('OPSFLOW.DESCRIBE_FIELD', {
+                                    field: taskManagementTemplateStore.templates.taskType ,
+                                    particle: getParticle(taskManagementTemplateStore.templates.taskType , 'object')
+                                })"
+                                @update:value="setForm('description', $event)"
+                    />
+                </p-field-group>
+                <p-field-group :label="$t('OPSFLOW.FIELDS_CONFIG')"
+                               required
+                >
+                    <task-fields-configuration class="mt-2"
+                                               :fields="fields"
+                                               :origin-fields="taskCategoryPageGetters.targetTaskType?.fields"
+                                               @update:fields="setFields"
+                                               @add-field="addField"
+                                               @remove-field="removeField"
+                                               @update-field-validation="updateFieldValidation"
+                    />
+                </p-field-group>
+            </div>
+        </template>
+        <template #footer>
+            <div class="py-3 px-6 flex flex-wrap gap-1 justify-end">
+                <p-button style-type="transparent"
+                          :disabled="loading"
+                          @click="handleCancelOrClose"
+                >
+                    {{ $t('COMMON.BUTTONS.CANCEL') }}
+                </p-button>
+                <p-button style-type="primary"
+                          :loading="loading"
+                          :disabled="!isAllValid"
+                          @click="handleConfirm"
+                >
+                    {{ $t('COMMON.BUTTONS.CONFIRM') }}
+                </p-button>
+            </div>
+        </template>
+    </p-overlay-layout>
+</template>
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
new file mode 100644
index 0000000000..df7e7d2222
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-category-field.ts
@@ -0,0 +1,173 @@
+import { computed, ref } from 'vue';
+
+import { getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { getParticle, i18n } from '@/translations';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+
+interface CategoryItem extends SelectDropdownMenuItem {
+    packageId: string;
+}
+export const useCategoryField = ({
+    isRequired, hasTaskTypeOnly,
+}: {
+    isRequired?: boolean;
+    hasTaskTypeOnly?: boolean;
+} = {}) => {
+    const packageStore = usePackageStore();
+    const taskCategoryStore = useTaskCategoryStore();
+    const taskTypeStore = useTaskTypeStore();
+
+    const categoryValidator = useFieldValidator<SelectDropdownMenuItem[]|CategoryItem[]>(
+        [],
+        isRequired ? (val) => {
+            if (val.length === 0) {
+                return i18n.t('OPSFLOW.VALIDATION.REQUIRED', {
+                    topic: i18n.t('OPSFLOW.CATEGORY'),
+                    particle: getParticle(i18n.t('OPSFLOW.CATEGORY') as string, 'topic'),
+                });
+            }
+            return true;
+        } : undefined,
+    );
+    const selectedCategoryItems = categoryValidator.value;
+    const selectedCategoryIds = computed<string[]>(() => selectedCategoryItems.value.map((c) => c.name));
+
+    const setSelectedCategoryItems = (selectedCategories: CategoryItem[]) => {
+        categoryValidator.setValue(selectedCategories);
+    };
+
+    const allCategoryItems = ref<CategoryItem[]>([]);
+    const categoryItemsByPackage = computed<Record<string, CategoryItem[]>>(() => {
+        const map: Record<string, CategoryItem[]> = {};
+        allCategoryItems.value.forEach((item) => {
+            if (Array.isArray(map[item.packageId])) {
+                map[item.packageId].push(item);
+            } else {
+                map[item.packageId] = [item];
+            }
+        });
+        return map;
+    });
+
+    const loadAllCategoryItems = async (): Promise<CategoryItem[]> => {
+        let taskCategories = await taskCategoryStore.list() ?? [];
+        taskCategories = taskCategories.filter((c) => c.state !== 'DELETED');
+
+        if (hasTaskTypeOnly) {
+            await taskTypeStore.listByCategoryIds(taskCategories.map((c) => c.category_id));
+            return taskCategories.map((c) => {
+                const taskTypes = taskTypeStore.state.itemsByCategoryId[c.category_id];
+                return {
+                    name: c.category_id,
+                    label: c.name,
+                    disabled: !taskTypes || taskTypes.length === 0,
+                    packageId: c.package_id,
+                };
+            });
+        }
+        return taskCategoryStore.getters.taskCategories.map((c) => ({
+            name: c.category_id,
+            label: c.name,
+            packageId: c.package_id,
+        })) || [];
+    };
+    const categoryMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+        allCategoryItems.value = await loadAllCategoryItems();
+        const filteredItems = allCategoryItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
+        const _totalCount = pageStart - 1 + Number(pageLimit);
+        const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+        return {
+            results: _slicedResults,
+            more: _totalCount < filteredItems.length,
+        };
+    };
+
+    const prevSelectedCategoryItems = ref<CategoryItem[]>([]);
+    const setInitialCategoriesByPackageId = async (packageId?: string) => {
+        allCategoryItems.value = await loadAllCategoryItems();
+        prevSelectedCategoryItems.value = packageId ? categoryItemsByPackage.value[packageId] ?? [] : [];
+        categoryValidator.setValue(prevSelectedCategoryItems.value);
+    };
+    const setInitialCategory = async (categoryId: string) => {
+        allCategoryItems.value = await loadAllCategoryItems();
+        prevSelectedCategoryItems.value = allCategoryItems.value.filter((c) => c.name === categoryId && !c.disabled);
+        categoryValidator.setValue(prevSelectedCategoryItems.value);
+    };
+
+
+    const addPackageToCategories = async (packageId: string, categoryIds: string[]) => {
+        const responses = await Promise.allSettled([
+            ...categoryIds.map((categoryId) => taskCategoryStore.update({
+                package_id: packageId,
+                category_id: categoryId,
+            })),
+        ]);
+        const errorMessages: string[] = [];
+        responses.forEach((response, index) => {
+            if (response.status === 'rejected') {
+                errorMessages.push(`- Category ID: ${categoryIds[index]}, Reason: ${response.reason.message}`);
+            }
+        });
+        if (errorMessages.length > 0) {
+            throw new Error(`Failed to add package to categories:\n${errorMessages.join('\n')}`);
+        }
+    };
+    const bindDefaultPackageToCategories = async (categoryIds: string[]) => {
+        if (!packageStore.getters.defaultPackage) throw new Error('Default package not found');
+        const defaultPackageId = packageStore.getters.defaultPackage.package_id;
+        const responses = await Promise.allSettled([
+            ...categoryIds.map((categoryId) => taskCategoryStore.update({
+                package_id: defaultPackageId,
+                category_id: categoryId,
+            })),
+        ]);
+        const errorMessages: string[] = [];
+        responses.forEach((response, index) => {
+            if (response.status === 'rejected') {
+                errorMessages.push(`- Category ID: ${categoryIds[index]}, Reason: ${response.reason.message}`);
+            }
+        });
+        if (errorMessages.length > 0) {
+            throw new Error(`Failed to bind default package to categories:\n${errorMessages.join('\n')}`);
+        }
+    };
+    const addedCategoryItems = computed(() => selectedCategoryItems.value.filter((item) => !prevSelectedCategoryItems.value.some((c) => c.name === item.name)));
+    const removedCategoryItems = computed(() => prevSelectedCategoryItems.value.filter((item) => !selectedCategoryItems.value.some((c) => c.name === item.name)));
+    const applyPackageToCategories = async (packageId: string) => {
+        const addedCategories = addedCategoryItems.value.map((item) => item.name);
+        const removedCategories = removedCategoryItems.value.map((item) => item.name);
+        const responses = await Promise.allSettled([
+            addPackageToCategories(packageId, addedCategories),
+            bindDefaultPackageToCategories(removedCategories),
+        ]);
+        const errorMessages: string[] = [];
+        responses.forEach((response) => {
+            if (response.status === 'rejected') {
+                errorMessages.push(response.reason.message);
+            }
+        });
+        if (errorMessages.length > 0) {
+            throw new Error(`Failed to apply package to categories:\n${errorMessages.join('\n')}`);
+        }
+    };
+
+    return {
+        selectedCategoryItems,
+        selectedCategoryIds,
+        categoryValidator,
+        categoryMenuItemsHandler,
+        setSelectedCategoryItems,
+        setInitialCategoriesByPackageId,
+        setInitialCategory,
+        applyPackageToCategories,
+        addedCategoryItems,
+        removedCategoryItems,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/composables/use-task-status-field.ts b/apps/web/src/services/ops-flow/composables/use-task-status-field.ts
new file mode 100644
index 0000000000..710bdd71de
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-task-status-field.ts
@@ -0,0 +1,104 @@
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+
+import { getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { TaskStatusOption, TaskStatusOptions } from '@/schema/opsflow/task/type';
+import { getParticle, i18n } from '@/translations';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const EMPTY_STATUS_OPTIONS = {
+    TODO: [],
+    IN_PROGRESS: [],
+    COMPLETED: [],
+};
+
+interface StatusItem extends SelectDropdownMenuItem {
+    color?: string;
+}
+
+export const useTaskStatusField = ({
+    isRequired, categoryId,
+}: {
+    categoryId: Ref<string|undefined>;
+    isRequired?: boolean;
+}) => {
+    const taskCategoryStore = useTaskCategoryStore();
+
+    const taskStatusValidator = useFieldValidator<StatusItem[]>(
+        [],
+        isRequired ? (val) => {
+            if (val.length === 0) {
+                return i18n.t('OPSFLOW.VALIDATION.REQUIRED', {
+                    topic: i18n.t('OPSFLOW.STATUS'),
+                    particle: getParticle(i18n.t('OPSFLOW.STATUS') as string, 'topic'),
+                });
+            }
+            return true;
+        } : undefined,
+    );
+    const selectedStatusItems = taskStatusValidator.value;
+    const selectedStatusId = computed<string|undefined>(() => selectedStatusItems.value[0]?.name);
+
+    const setSelectedStatusItems = (selected: StatusItem[]) => {
+        taskStatusValidator.setValue(selected);
+    };
+
+    const allStatusItems = ref<StatusItem[]>([]);
+    const getStatusOptions = async (): Promise<TaskStatusOptions> => {
+        if (!categoryId.value) return EMPTY_STATUS_OPTIONS;
+        const category = await taskCategoryStore.get(categoryId.value);
+        return category?.status_options ?? EMPTY_STATUS_OPTIONS;
+    };
+    const loadAllStatusItems = async () => {
+        const statusOptions = await getStatusOptions();
+        const items: StatusItem[] = [];
+        items.push({ type: 'header', label: 'To-do', name: 'to-do' });
+        items.push({ type: 'divider', name: 'todo-div' });
+        statusOptions.TODO.forEach((status) => {
+            items.push({ name: status.status_id, label: status.name, color: status.color });
+        });
+        items.push({ type: 'header', label: 'In progress', name: 'in-progress' });
+        items.push({ type: 'divider', name: 'in-progress-div' });
+        statusOptions.IN_PROGRESS.forEach((status) => {
+            items.push({ name: status.status_id, label: status.name, color: status.color });
+        });
+        items.push({ type: 'header', label: 'Completed', name: 'completed' });
+        items.push({ type: 'divider', name: 'completed-div' });
+        statusOptions.COMPLETED.forEach((status) => {
+            items.push({ name: status.status_id, label: status.name, color: status.color });
+        });
+        return items;
+    };
+    const statusMenuItemsHandler: AutocompleteHandler = async (keyword: string) => {
+        allStatusItems.value = await loadAllStatusItems();
+        const filteredItems = allStatusItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
+        return {
+            results: filteredItems,
+        };
+    };
+
+    const setInitialStatus = (status?: TaskStatusOption) => {
+        if (status) {
+            setSelectedStatusItems([{
+                name: status.status_id,
+                label: status.name,
+                color: status.color,
+            }]);
+        }
+    };
+
+
+    return {
+        selectedStatusItems,
+        selectedStatusId,
+        taskStatusValidator,
+        statusMenuItemsHandler,
+        setSelectedStatusItems,
+        setInitialStatus,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/composables/use-task-type-field.ts b/apps/web/src/services/ops-flow/composables/use-task-type-field.ts
new file mode 100644
index 0000000000..63a6214549
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-task-type-field.ts
@@ -0,0 +1,79 @@
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+
+import { getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import { getParticle, i18n } from '@/translations';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+export const useTaskTypeField = ({
+    isRequired, categoryId,
+}: {
+    categoryId: Ref<string|undefined>;
+    isRequired?: boolean;
+}) => {
+    const taskTypeStore = useTaskTypeStore();
+    const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+    const taskTypeValidator = useFieldValidator<SelectDropdownMenuItem[]>(
+        [],
+        isRequired ? (val) => {
+            if (val.length === 0) {
+                return i18n.t('OPSFLOW.VALIDATION.REQUIRED', {
+                    topic: taskManagementTemplateStore.templates.taskType,
+                    particle: getParticle(taskManagementTemplateStore.templates.taskType as string, 'topic'),
+                });
+            }
+            return true;
+        } : undefined,
+    );
+    const selectedTaskTypeItems = taskTypeValidator.value;
+    const selectedTaskTypeId = computed<string|undefined>(() => selectedTaskTypeItems.value[0]?.name);
+
+    const setSelectedTaskTypeItems = (selectedTaskTypes: SelectDropdownMenuItem[]) => {
+        taskTypeValidator.setValue(selectedTaskTypes);
+    };
+
+    const allTaskTypeItems = ref<SelectDropdownMenuItem[]>([]);
+    const loadAllTaskTypeItems = async () => {
+        if (!categoryId.value) return [];
+        const taskTypes = await taskTypeStore.listByCategoryId(categoryId.value);
+        if (!taskTypes) return [];
+        return taskTypes.map((t) => ({
+            name: t.task_type_id,
+            label: t.name,
+        })) || [];
+    };
+    const taskTypeMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+        allTaskTypeItems.value = await loadAllTaskTypeItems();
+        const filteredItems = allTaskTypeItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
+        const _totalCount = pageStart - 1 + Number(pageLimit);
+        const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+        return {
+            results: _slicedResults,
+            more: _totalCount < filteredItems.length,
+        };
+    };
+
+    const setInitialTaskType = (taskType?: TaskTypeModel) => {
+        taskTypeValidator.setValue(taskType ? [{ name: taskType.task_type_id, label: taskType.name }] : []);
+    };
+
+
+    return {
+        selectedTaskTypeItems,
+        selectedTaskTypeId,
+        taskTypeValidator,
+        taskTypeMenuItemsHandler,
+        setSelectedTaskTypeItems,
+        setInitialTaskType,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/composables/use-workspace-field.ts b/apps/web/src/services/ops-flow/composables/use-workspace-field.ts
new file mode 100644
index 0000000000..ecc0bf226f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-workspace-field.ts
@@ -0,0 +1,140 @@
+import { computed, ref, toRef } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { WorkspaceAddPackageParameters } from '@/schema/identity/workspace/api-verbs/add-package';
+import type { WorkspaceRemovePackageParameters } from '@/schema/identity/workspace/api-verbs/remove-package';
+
+import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+const WORKSPACE_SELECTION_TYPES = {
+    all: {
+        name: 'all',
+        label: 'All Workspaces',
+    },
+    specific: {
+        name: 'specific',
+        label: 'Specific Workspaces',
+    },
+};
+export type WorkspaceScope = 'unset'|'all'|'specific';
+
+export const useWorkspaceField = () => {
+    const workspaceReferenceStore = useWorkspaceReferenceStore();
+    const workspaceReferenceMap = toRef(workspaceReferenceStore.state, 'items');
+    const workspaceValidator = useFieldValidator<SelectDropdownMenuItem[]>(
+        [],
+    );
+    const selectedWorkspaceItems = workspaceValidator.value;
+    const selectedWorkspaceIds = computed<string[]>(() => selectedWorkspaceItems.value.map((w) => w.name));
+
+    const allWorkspaceItems = computed<SelectDropdownMenuItem[]>(() => (workspaceReferenceMap.value ? Object.values(workspaceReferenceMap.value).map((d) => ({ name: d.key, label: d.label })) : []));
+    const workspaceItemsByPackage = computed<Record<string, SelectDropdownMenuItem[]>>(() => {
+        const map: Record<string, SelectDropdownMenuItem[]> = {};
+        if (!workspaceReferenceMap.value) return map;
+        Object.values(workspaceReferenceMap.value).forEach((item) => {
+            const packages = item.data.packages;
+            if (!packages) return;
+            packages.forEach((p) => {
+                if (Array.isArray(map[p])) {
+                    map[p].push({ name: item.key, label: item.label });
+                } else {
+                    map[p] = [{ name: item.key, label: item.label }];
+                }
+            });
+        });
+        return map;
+    });
+    const workspaceMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+        const filteredItems = allWorkspaceItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
+        const _totalCount = pageStart - 1 + Number(pageLimit);
+        const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+        return {
+            results: _slicedResults,
+            more: _totalCount < filteredItems.length,
+        };
+    };
+
+    const setSelectedWorkspaces = (selectedWorkspaces: SelectDropdownMenuItem[]) => {
+        workspaceValidator.setValue(selectedWorkspaces);
+    };
+
+    const prevSelectedWorkspaceItems = ref<SelectDropdownMenuItem[]>([]);
+    const setInitialWorkspaces = async (packageId?: string) => {
+        await workspaceReferenceStore.load();
+        prevSelectedWorkspaceItems.value = packageId ? workspaceItemsByPackage.value[packageId] ?? [] : [];
+        workspaceValidator.setValue(prevSelectedWorkspaceItems.value);
+    };
+
+
+    const addPackageToWorkspaces = async (packageId: string, workspaceIds: string[]) => {
+        const responses = await Promise.allSettled([
+            ...workspaceIds.map((workspaceId) => SpaceConnector.clientV2.identity.workspace.addPackage<WorkspaceAddPackageParameters>({
+                package_id: packageId,
+                workspace_id: workspaceId,
+            })),
+        ]);
+        const errorMessages: string[] = [];
+        responses.forEach((response, index) => {
+            if (response.status === 'rejected') {
+                errorMessages.push(`- Workspace ID: ${workspaceIds[index]}, Reason: ${response.reason.message}`);
+            }
+        });
+        if (errorMessages.length > 0) {
+            throw new Error(`Failed to add package to workspaces:\n${errorMessages.join('\n')}`);
+        }
+    };
+    const removePackageFromWorkspaces = async (packageId: string, workspaceIds: string[]) => {
+        const responses = await Promise.allSettled([
+            ...workspaceIds.map((workspaceId) => SpaceConnector.clientV2.identity.workspace.removePackage<WorkspaceRemovePackageParameters>({
+                package_id: packageId,
+                workspace_id: workspaceId,
+            })),
+        ]);
+        const errorMessages: string[] = [];
+        responses.forEach((response, index) => {
+            if (response.status === 'rejected') {
+                errorMessages.push(`- Workspace ID: ${workspaceIds[index]}, Reason: ${response.reason.message}`);
+            }
+        });
+        if (errorMessages.length > 0) {
+            throw new Error(`Failed to remove package from workspaces:\n${errorMessages.join('\n')}`);
+        }
+    };
+    const addedWorkspaceItems = computed(() => selectedWorkspaceItems.value.filter((item) => !prevSelectedWorkspaceItems.value.some((w) => w.name === item.name)));
+    const removedWorkspaceItems = computed(() => prevSelectedWorkspaceItems.value.filter((item) => !selectedWorkspaceItems.value.some((w) => w.name === item.name)));
+    const applyPackageToWorkspaces = async (packageId: string) => {
+        const addedWorkspaces = addedWorkspaceItems.value.map((item) => item.name);
+        const removedWorkspaces = removedWorkspaceItems.value.map((item) => item.name);
+        const responses = await Promise.allSettled([
+            addPackageToWorkspaces(packageId, addedWorkspaces),
+            removePackageFromWorkspaces(packageId, removedWorkspaces),
+        ]);
+        const errorMessages: string[] = [];
+        responses.forEach((response) => {
+            if (response.status === 'rejected') {
+                errorMessages.push(response.reason.message);
+            }
+        });
+        if (errorMessages.length > 0) {
+            throw new Error(`Failed to apply package to workspaces:\n${errorMessages.join('\n')}`);
+        }
+    };
+
+    return {
+        WORKSPACE_SELECTION_TYPES,
+        selectedWorkspaceItems,
+        selectedWorkspaceIds,
+        workspaceValidator,
+        workspaceMenuItemsHandler,
+        setSelectedWorkspaces,
+        setInitialWorkspaces,
+        applyPackageToWorkspaces,
+        addedWorkspaceItems,
+        removedWorkspaceItems,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/pages/BoardPage.vue b/apps/web/src/services/ops-flow/pages/BoardPage.vue
new file mode 100644
index 0000000000..7b7c79d862
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/BoardPage.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { watch, computed } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import {
+    PHeadingLayout, PHeading, PButton,
+} from '@cloudforet/mirinae';
+
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import BoardTaskTable from '@/services/ops-flow/components/BoardTaskTable.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useBoardPageStore } from '@/services/ops-flow/stores/board-page-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type { TaskCreatePageQuery } from '@/services/ops-flow/types/task-create-page-type';
+
+const route = useRoute();
+
+const { getProperRouteLocation } = useProperRouteLocation();
+
+const boardPageStore = useBoardPageStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const taskCreatePageLink = computed(() => getProperRouteLocation({
+    name: OPS_FLOW_ROUTE.BOARD.TASK_CREATE._NAME,
+    query: { categoryId: route.query.categoryId } as TaskCreatePageQuery,
+}));
+
+watch(() => route.query.categoryId, (categoryId) => {
+    boardPageStore.setCurrentCategoryId(categoryId as string);
+}, { immediate: true });
+
+</script>
+
+<template>
+    <div>
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading>{{ taskManagementTemplateStore.templates.TaskBoard }}</p-heading>
+            </template>
+            <template #extra>
+                <router-link v-slot="{ navigate }"
+                             :to="taskCreatePageLink"
+                             custom
+                >
+                    <p-button icon-left="ic_plus_bold"
+                              @click="navigate"
+                    >
+                        {{ $t('OPSFLOW.ADD_TARGET', {target: taskManagementTemplateStore.templates.Task}) }}
+                    </p-button>
+                </router-link>
+            </template>
+        </p-heading-layout>
+        <board-task-table />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
new file mode 100644
index 0000000000..3c7ab8fc92
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+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, PDivider, PSelectCard, PEmpty, PRadioGroup, PRadio, PDataLoader,
+} from '@cloudforet/mirinae';
+
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { useFormValidator } from '@/common/composables/form-validator';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type { TaskCreatePageQuery } from '@/services/ops-flow/types/task-create-page-type';
+
+
+const router = useRouter();
+
+const taskCategoryStore = useTaskCategoryStore();
+const taskTypeStore = useTaskTypeStore();
+const taskTypeState = taskTypeStore.state;
+const taskStore = useTaskStore();
+const userStore = useUserStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const { getProperRouteLocation } = useProperRouteLocation();
+
+const loading = ref(true);
+const availableCategories = ref<TaskCategoryModel[]>([]);
+const { forms: { category, taskType }, setForm, isAllValid } = useFormValidator({
+    category: '',
+    taskType: '',
+}, {
+    category(val: string) {
+        return !!val;
+    },
+    taskType(val: string) {
+        return !!val;
+    },
+});
+const tasks = ref<TaskModel[]>([]);
+const userId = computed(() => userStore.state.userId ?? '');
+const taskQueryHelper = new QueryHelper();
+const taskQuery = computed<Query>(() => taskQueryHelper.setFilters([
+    { k: 'created_by', v: userId.value, o: '=' },
+    { k: 'status_type', v: 'COMPLETED', o: '!=' },
+]).apiQuery);
+const handleChangeCategory = async (value: string) => {
+    setForm('category', value);
+    await taskTypeStore.listByCategoryId(value);
+    setForm('taskType', taskTypeState.itemsByCategoryId[value]?.[0]?.task_type_id);
+};
+const handleChangeTaskType = (value: string) => {
+    setForm('taskType', value);
+};
+const goToTaskCreatePage = () => {
+    router.push(getProperRouteLocation({
+        name: OPS_FLOW_ROUTE.BOARD.TASK_CREATE._NAME,
+        query: { categoryId: category.value, taskTypeId: taskType.value } as TaskCreatePageQuery,
+    }));
+};
+
+
+onMounted(async () => {
+    loading.value = true;
+    const allCategories = await taskCategoryStore.list(true);
+    if (!allCategories || !allCategories.length) {
+        loading.value = false;
+        return;
+    }
+    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);
+    tasks.value = await taskStore.list({ query: taskQuery.value }) ?? [];
+    loading.value = false;
+});
+</script>
+
+<template>
+    <div class="ops-flow-landing-page">
+        <div class="mb-6 text-center text-display-md font-bold">
+            {{ taskManagementTemplateStore.templates.TemplateName }}
+        </div>
+        <p-data-loader :loading="loading"
+                       :data="availableCategories"
+                       loader-backdrop-color="gray.100"
+                       class="min-h-72"
+        >
+            <div class="max-w-[712px] mx-auto">
+                <div class="mb-4 pt-4 flex justify-end">
+                    <!--                    <p-field-title label="Active Ticket" />-->
+                    <router-link custom
+                                 :to="getProperRouteLocation({
+                                     name: OPS_FLOW_ROUTE.BOARD._NAME,
+                                     query: {categoryId: category }
+                                 })"
+                    >
+                        <template #default="{navigate}">
+                            <p-button style-type="secondary"
+                                      size="sm"
+                                      class="capitalize"
+                                      @click="navigate"
+                            >
+                                {{ $t('OPSFLOW.TASK_BOARD.VIEW_ALL_TASKS', {tasks: taskManagementTemplateStore.templates.tasks}) }}
+                            </p-button>
+                        </template>
+                    </router-link>
+                </div>
+                <!--                <p-pane-layout class="mb-10 min-h-20 flex items-center justify-center">-->
+                <!--                    <div v-if="tasks.length" /> -->
+                <!--                    <p-empty v-else>-->
+                <!--                        No Active Tickets-->
+                <!--                    </p-empty>-->
+                <!--                </p-pane-layout>-->
+                <p-divider />
+                <div class="mt-10">
+                    <p class="mb-6 text-display-md">
+                        {{ taskManagementTemplateStore.templates.TaskCategory }}
+                    </p>
+                    <div class="flex justify-center">
+                        <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"
+                                           :value="c.category_id"
+                                           :selected="category"
+                                           @change="handleChangeCategory"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div 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>
+                <div class="mt-10 flex justify-end">
+                    <p-button style-type="substitutive"
+                              icon-right="ic_arrow-right"
+                              :disabled="!isAllValid"
+                              @click="goToTaskCreatePage"
+                    >
+                        {{ $t('COMMON.BUTTONS.NEXT') }}
+                    </p-button>
+                </div>
+            </div>
+            <template #no-data>
+                <p-empty class="my-20"
+                         show-image
+                >
+                    {{ $t('OPSFLOW.NO_AVAILABLE_TARGET', {target: taskManagementTemplateStore.templates.TaskCategory }) }}
+                </p-empty>
+            </template>
+        </p-data-loader>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.category-card {
+    @apply w-[352px] py-4;
+}
+</style>
+
diff --git a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
new file mode 100644
index 0000000000..6383c75df0
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
@@ -0,0 +1,156 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
+<script setup lang="ts">
+/* eslint-disable import/first */
+// eslint-disable-next-line import/no-duplicates,import/order
+import {
+    ref, computed, onBeforeMount, onUnmounted,
+    // eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import { useRoute, onBeforeRouteLeave } from 'vue-router/composables';
+
+import {
+    PHeadingLayout, PHeading, PButton, PPaneLayout, PSkeleton,
+} from '@cloudforet/mirinae';
+
+import { i18n as _i18n } from '@/translations';
+
+import { queryStringToString } from '@/lib/router-query-string';
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useConfirmRouteLeave } from '@/common/composables/confirm-route-leave';
+import { useGoBack } from '@/common/composables/go-back';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import TaskContentBaseForm from '@/services/ops-flow/components/TaskContentBaseForm.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import TaskFieldsForm from '@/services/ops-flow/task-fields-form/TaskFieldsForm.vue';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type { BoardPageQuery } from '@/services/ops-flow/types/board-page-type';
+import type { TaskCreatePageQueryValue } from '@/services/ops-flow/types/task-create-page-type';
+
+
+
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+/* route and query */
+const route = useRoute();
+const { getProperRouteLocation } = useProperRouteLocation();
+const categoryId = computed<TaskCreatePageQueryValue['categoryId']>(() => queryStringToString(route.query.categoryId));
+const taskTypeId = computed<TaskCreatePageQueryValue['taskTypeId']>(() => queryStringToString(route.query.taskTypeId));
+
+/* header and back button */
+const loading = false; // computed<boolean>(() => taskCategoryStore.getters.loading);
+const headerTitle = computed<string>(() => _i18n.t('OPSFLOW.CREATE_TARGET', { target: taskManagementTemplateStore.templates.Task }));
+const {
+    setPathFrom,
+    goBack,
+} = useGoBack(getProperRouteLocation({
+    name: OPS_FLOW_ROUTE.BOARD._NAME,
+    query: { categoryId: categoryId.value } as BoardPageQuery,
+}));
+
+/* confirm leave modal */
+const hasCreated = ref(false);
+const {
+    isConfirmLeaveModalVisible,
+    handleBeforeRouteLeave,
+    confirmRouteLeave,
+    stopRouteLeave,
+} = useConfirmRouteLeave({
+    passConfirmation: computed(() => !taskContentFormState.hasUnsavedChanges || hasCreated.value),
+});
+onBeforeRouteLeave(handleBeforeRouteLeave);
+
+/* form button handling */
+const handleConfirm = async () => {
+    if (!taskContentFormGetters.isAllValid) return;
+    hasCreated.value = await taskContentFormStore.createTask();
+    if (hasCreated.value) goBack();
+};
+
+/* lifecycle */
+onBeforeMount(() => {
+    taskContentFormStore.setCurrentCategoryId(categoryId.value);
+    taskContentFormStore.setCurrentTaskType(taskTypeId.value);
+    taskContentFormStore.setMode('create');
+});
+onUnmounted(() => {
+    taskContentFormStore.$reset();
+    taskContentFormStore.$dispose();
+});
+
+/* expose */
+defineExpose({ setPathFrom });
+</script>
+
+<template>
+    <div class="mr-auto max-w-tablet">
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading show-back-button
+                           @click-back-button="goBack"
+                >
+                    <p-skeleton v-if="loading"
+                                height="1.75rem"
+                                width="12rem"
+                    />
+                    <template v-else>
+                        {{ headerTitle }}
+                    </template>
+                </p-heading>
+            </template>
+        </p-heading-layout>
+        <p-pane-layout class="pt-8 px-4 pb-10 mr-auto flex flex-wrap w-full gap-4">
+            <p-heading class="mb-6"
+                       :title="$t('OPSFLOW.TASK_BOARD.TYPE_INFO', {type: taskManagementTemplateStore.templates.TaskType})"
+                       heading-type="sub"
+            />
+            <div class="w-full">
+                <task-content-base-form class="mb-4" />
+                <task-fields-form />
+            </div>
+        </p-pane-layout>
+        <div class="py-3 flex flex-wrap gap-1 justify-end">
+            <p-button style-type="transparent"
+                      @click="goBack()"
+            >
+                {{ $t('COMMON.BUTTONS.CANCEL') }}
+            </p-button>
+            <p-button style-type="primary"
+                      :disabled="!taskContentFormGetters.isAllValid"
+                      @click="handleConfirm"
+            >
+                {{ $t('COMMON.BUTTONS.CONFIRM') }}
+            </p-button>
+        </div>
+        <!-- modals -->
+        <confirm-back-modal :visible="isConfirmLeaveModalVisible"
+                            @confirm="confirmRouteLeave"
+                            @cancel="stopRouteLeave"
+        />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue b/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
new file mode 100644
index 0000000000..e4094f7e8c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
@@ -0,0 +1,241 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void;
+    checkTaskExist(): Promise<boolean>;
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+            instance.checkTaskExist();
+        });
+    },
+});
+</script>
+
+<script setup lang="ts">
+/* eslint-disable import/first */
+// eslint-disable-next-line import/no-duplicates,import/order
+import {
+    computed, watch, onUnmounted, defineAsyncComponent, ref,
+    // eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router/composables';
+
+import {
+    PHeadingLayout, PHeading, PButton, PTab, PSkeleton,
+} from '@cloudforet/mirinae';
+import type { TabItem } from '@cloudforet/mirinae/types/hooks/use-tab/type';
+
+import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n as _i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { queryStringToString } from '@/lib/router-query-string';
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useConfirmRouteLeave } from '@/common/composables/confirm-route-leave';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useGoBack } from '@/common/composables/go-back';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import BoardTaskComment from '@/services/ops-flow/components/BoardTaskComment.vue';
+import CommentDeleteModal from '@/services/ops-flow/components/CommentDeleteModal.vue';
+import TaskAssignModal from '@/services/ops-flow/components/TaskAssignModal.vue';
+import TaskDeleteModal from '@/services/ops-flow/components/TaskDeleteModal.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+import type { BoardPageQuery } from '@/services/ops-flow/types/board-page-type';
+import type { TaskCreatePageQueryValue } from '@/services/ops-flow/types/task-create-page-type';
+
+const TaskContentTab = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskContentTab.vue'));
+const TaskProgressTab = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskProgressTab.vue'));
+
+
+const props = defineProps<{
+    taskId: string;
+}>();
+
+const taskDetailPageStore = useTaskDetailPageStore();
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+const taskStore = useTaskStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+const userStore = useUserStore();
+
+/* task */
+const task = ref<TaskModel|undefined>();
+
+/* route and query */
+const router = useRouter();
+const route = useRoute();
+const categoryId = computed<TaskCreatePageQueryValue['categoryId']>(() => queryStringToString(route.query.categoryId));
+const { getProperRouteLocation } = useProperRouteLocation();
+const {
+    setPathFrom,
+    goBack,
+} = useGoBack(getProperRouteLocation({
+    name: OPS_FLOW_ROUTE.BOARD._NAME,
+    query: { categoryId: categoryId.value } as BoardPageQuery,
+}));
+const checkTaskExist = async () => {
+    try {
+        loading.value = true;
+        const taskId = props.taskId;
+        task.value = await taskStore.get(taskId);
+        loading.value = false;
+        return true;
+    } catch (e: unknown) {
+        goBack();
+        ErrorHandler.handleRequestError(e, 'Failed to get task');
+        return false;
+    }
+};
+
+
+/* header and back button */
+const loading = ref<boolean>(true);
+const headerTitle = computed<string>(() => task?.value?.name ?? '');
+
+
+/* confirm leave modal */
+const hasUpdated = ref(false);
+const {
+    isConfirmLeaveModalVisible,
+    handleBeforeRouteLeave,
+    confirmRouteLeave,
+    stopRouteLeave,
+} = useConfirmRouteLeave({
+    passConfirmation: computed(() => !taskContentFormState.hasUnsavedChanges || hasUpdated.value),
+});
+onBeforeRouteLeave(handleBeforeRouteLeave);
+
+/* tabs */
+const tabs = computed<TabItem<object>[]>(() => [
+    {
+        name: 'content',
+        label: _i18n.t('OPSFLOW.TASK_BOARD.TASK_CONTENT') as string,
+        keepAlive: true,
+    },
+    {
+        name: 'progress',
+        label: _i18n.t('OPSFLOW.TASK_BOARD.TASK_PROGRESS', { task: taskManagementTemplateStore.templates.Task }),
+        keepAlive: true,
+    },
+]);
+const activeTab = ref<'content'|'progress'>('content');
+const handleUpdateActiveTab = (tab: 'content'|'progress') => {
+    activeTab.value = tab;
+    router.replace({
+        hash: `#${tab}`,
+    });
+};
+
+/* form button handling */
+const handleSaveChanges = async () => {
+    if (!taskContentFormGetters.isAllValid) return;
+    hasUpdated.value = await taskContentFormStore.updateTask();
+    if (hasUpdated.value) goBack();
+};
+
+/* lifecycle */
+onUnmounted(() => {
+    taskContentFormStore.$reset();
+    taskContentFormStore.$dispose();
+});
+watch(task, (t) => {
+    if (!t) return; // route guard will get task and go back if task is not found
+    taskDetailPageStore.setCurrentTaskId(props.taskId);
+    if (route.hash === '#progress') {
+        activeTab.value = 'progress';
+    }
+    taskContentFormStore.setMode('view');
+    if (task.value) taskContentFormStore.setCurrentTask(task.value);
+});
+
+/* expose */
+defineExpose({ setPathFrom, checkTaskExist });
+</script>
+
+<template>
+    <div>
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading show-back-button
+                           @click-back-button="goBack"
+                >
+                    <p-skeleton v-if="loading"
+                                height="1.75rem"
+                                width="12rem"
+                    />
+                    <template v-else>
+                        {{ headerTitle }}
+                    </template>
+                </p-heading>
+            </template>
+            <template #extra>
+                <p-button v-if="userStore.getters.isDomainAdmin"
+                          style-type="negative-secondary"
+                          @click="taskDetailPageStore.openTaskDeleteModal()"
+                >
+                    {{ $t('COMMON.BUTTONS.DELETE') }}
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <div class="mr-auto flex flex-wrap w-full gap-4">
+            <div class="flex-1 w-full min-w-[600px] tablet:min-w-full">
+                <p-tab class="w-full"
+                       :tabs="tabs"
+                       :active-tab="activeTab"
+                       @update:active-tab="handleUpdateActiveTab"
+                >
+                    <template #content>
+                        <task-content-tab />
+                    </template>
+                    <template #progress>
+                        <task-progress-tab />
+                    </template>
+                </p-tab>
+                <div v-if="activeTab === 'content' && taskContentFormGetters.isEditable"
+                     class="py-3 flex flex-wrap gap-1 justify-end"
+                >
+                    <p-button style-type="transparent"
+                              @click="goBack()"
+                    >
+                        {{ $t('COMMON.BUTTONS.CANCEL') }}
+                    </p-button>
+                    <p-button style-type="primary"
+                              :disabled="!taskContentFormState.hasUnsavedChanges || !taskContentFormGetters.isAllValid"
+                              @click="handleSaveChanges"
+                    >
+                        {{ $t('COMMON.BUTTONS.CONFIRM') }}
+                    </p-button>
+                </div>
+            </div>
+            <board-task-comment class="flex-1 w-full h-fit min-w-[360px] lg:max-w-[528px] tablet:min-w-full"
+                                :task-id="props.taskId"
+            />
+        </div>
+        <!-- modals -->
+        <confirm-back-modal :visible="isConfirmLeaveModalVisible"
+                            @confirm="confirmRouteLeave"
+                            @cancel="stopRouteLeave"
+        />
+        <comment-delete-modal />
+        <task-assign-modal />
+        <task-delete-modal @deleted="goBack()" />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
new file mode 100644
index 0000000000..3e18f063d2
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
@@ -0,0 +1,145 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
+<script setup lang="ts">
+/* eslint-disable import/first */
+// eslint-disable-next-line import/no-duplicates,import/order
+// eslint-disable-next-line import/no-duplicates
+import { computed, onBeforeMount, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import { PHeading, PTab, PSkeleton } from '@cloudforet/mirinae';
+import type { TabItem } from '@cloudforet/mirinae/types/hooks/use-tab/type';
+
+
+import { i18n } from '@/translations';
+
+import { makeAdminRouteName } from '@/router/helpers/route-helper';
+
+import { useGoBack } from '@/common/composables/go-back';
+
+import TaskStatusDeleteModal from '@/services/ops-flow/components/TaskStatusDeleteModal.vue';
+import TaskStatusForm from '@/services/ops-flow/components/TaskStatusForm.vue';
+import TaskStatusSetDefaultModal from '@/services/ops-flow/components/TaskStatusSetDefaultModal.vue';
+import TaskTypeDeleteModal from '@/services/ops-flow/components/TaskTypeDeleteModal.vue';
+import TaskTypeForm from '@/services/ops-flow/components/TaskTypeForm.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const props = defineProps<{
+    taskCategoryId: string;
+}>();
+const router = useRouter();
+const route = useRoute();
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryStore = useTaskCategoryStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+/* header and back button */
+const loading = computed<boolean>(() => taskCategoryStore.getters.loading);
+const headerTitle = computed<string>(() => taskCategoryPageStore.getters.currentCategory?.name ?? 'No Category');
+const {
+    setPathFrom,
+    handleClickBackButton,
+} = useGoBack({
+    name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT._NAME),
+});
+
+/* tabs */
+const tabs = computed<TabItem<object>[]>(() => [
+    {
+        name: 'status',
+        label: i18n.t('OPSFLOW.STATUS'),
+        keepAlive: true,
+    },
+    {
+        name: 'taskType',
+        label: taskManagementTemplateStore.templates.TaskType,
+        keepAlive: true,
+    },
+]);
+const activeTab = computed(() => {
+    if (route.name === makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.TASK_TYPE._NAME)) return 'taskType';
+    return 'status';
+});
+const handleUpdateActiveTab = (tab: string) => {
+    if (tab === 'taskType') {
+        router.replace({
+            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.TASK_TYPE._NAME),
+            params: {
+                taskCategoryId: props.taskCategoryId,
+            },
+        });
+    } else {
+        router.replace({
+            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.STATUS._NAME),
+            params: {
+                taskCategoryId: props.taskCategoryId,
+            },
+        });
+    }
+};
+
+/* lifecycle */
+onBeforeMount(() => {
+    taskCategoryPageStore.setCurrentCategoryId(props.taskCategoryId);
+});
+onUnmounted(() => {
+    taskCategoryPageStore.$dispose();
+});
+
+/* expose */
+defineExpose({ setPathFrom });
+</script>
+
+<template>
+    <div>
+        <p-heading class="mb-6"
+                   show-back-button
+                   @click-back-button="handleClickBackButton"
+        >
+            <p-skeleton v-if="loading"
+                        height="1.75rem"
+                        width="12rem"
+            />
+            <template v-else>
+                {{ headerTitle }}
+            </template>
+        </p-heading>
+        <p-tab :tabs="tabs"
+               :active-tab="activeTab"
+               @update:active-tab="handleUpdateActiveTab"
+        >
+            <router-view />
+        </p-tab>
+
+        <!-- task status -->
+        <task-status-form />
+        <task-status-delete-modal />
+        <task-status-set-default-modal />
+
+        <!-- task type -->
+        <task-type-form />
+        <task-type-delete-modal />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue
new file mode 100644
index 0000000000..653bdfcbb7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { PHeadingLayout, PHeading, PButton } from '@cloudforet/mirinae';
+
+import TaskStatusTree from '@/services/ops-flow/components/TaskStatusTree.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+</script>
+
+<template>
+    <div class="py-6 px-4">
+        <p-heading-layout>
+            <template #heading>
+                <p-heading heading-type="sub">
+                    {{ $t('OPSFLOW.STATUS') }}
+                </p-heading>
+            </template>
+            <template #extra>
+                <p-button style-type="substitutive"
+                          icon-left="ic_plus_bold"
+                          @click="taskCategoryPageStore.openAddStatusForm()"
+                >
+                    {{ $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.STATUS') }) }}
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <p class="mt-2 text-label-md text-gray-600">
+            {{ $t('OPSFLOW.TASK_MANAGEMENT.STATUS.DESC', { tasks: taskManagementTemplateStore.templates.tasks }) }}
+        </p>
+        <task-status-tree class="mt-4" />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
new file mode 100644
index 0000000000..b8e05c9e16
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    PHeadingLayout, PHeading, PButton, PIconButton, PDataTable,
+} from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { i18n as _i18n } from '@/translations';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+const taskTypeFields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: _i18n.t('OPSFLOW.NAME') as string,
+        width: '20%',
+    },
+    {
+        name: 'description',
+        label: _i18n.t('OPSFLOW.DESCRIPTION') as string,
+        width: '70%',
+    },
+    {
+        name: 'buttons',
+        label: ' ',
+    },
+]);
+</script>
+
+<template>
+    <div class="py-6 px-4">
+        <p-heading-layout>
+            <template #heading>
+                <p-heading heading-type="sub">
+                    {{ taskManagementTemplateStore.templates.TaskType }}
+                </p-heading>
+            </template>
+            <template #extra>
+                <p-icon-button name="ic_refresh"
+                               @click="taskCategoryPageStore.listTaskTypes()"
+                />
+                <p-button style-type="substitutive"
+                          icon-left="ic_plus_bold"
+                          @click="taskCategoryPageStore.openAddTaskTypeForm()"
+                >
+                    {{ $t('OPSFLOW.ADD_TARGET', { target: taskManagementTemplateStore.templates.TaskType }) }}
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <i18n path="OPSFLOW.TASK_MANAGEMENT.TASK_TYPE.DESC"
+              tag="p"
+              class="mt-2 mb-6 text-label-md text-gray-600 first-letter:capitalize"
+        >
+            <!-- CAUTION: Do not remove the following comments. They are used to prevent auto-formatting of the template. -->
+            <!-- In this case, template tags must be in a single line to prevent inserting unnecessary spaces. -->
+            <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+            <template #taskTypes>{{ taskManagementTemplateStore.templates.taskTypes }}</template>
+            <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+            <template #task>{{ taskManagementTemplateStore.templates.task }}</template>
+            <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+            <template #tasks>{{ taskManagementTemplateStore.templates.tasks }}</template>
+            <template #br>
+                <br>
+            </template>
+        </i18n>
+        <p-data-table :loading="!taskCategoryPageGetters.taskTypes"
+                      :items="taskCategoryPageGetters.taskTypes"
+                      :fields="taskTypeFields"
+        >
+            <template #col-buttons-format="{ item }">
+                <div class="flex justify-end">
+                    <action-menu-button @edit="taskCategoryPageStore.openEditTaskTypeForm(item.task_type_id)"
+                                        @delete="taskCategoryPageStore.openDeleteTaskTypeModal(item.task_type_id)"
+                    />
+                </div>
+            </template>
+        </p-data-table>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
new file mode 100644
index 0000000000..3b45fbdf19
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+
+import { PHeading } from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import EnableLandingPanel from '@/services/ops-flow/components/EnableLandingPanel.vue';
+import PackagePanel from '@/services/ops-flow/components/PackagePanel.vue';
+import TaskCategoryPanel from '@/services/ops-flow/components/TaskCategoryPanel.vue';
+import TaskManagementTemplatePanel from '@/services/ops-flow/components/TaskManagementTemplatePanel.vue';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const PackageForm = defineAsyncComponent(() => import('@/services/ops-flow/components/PackageForm.vue'));
+const PackageSetDefaultModal = defineAsyncComponent(() => import('@/services/ops-flow/components/PackageSetDefaultModal.vue'));
+const PackageDeleteModal = defineAsyncComponent(() => import('@/services/ops-flow/components/PackageDeleteModal.vue'));
+
+const TaskCategoryForm = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskCategoryForm.vue'));
+const TaskCategoryDeleteModal = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskCategoryDeleteModal.vue'));
+
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
+
+</script>
+
+<template>
+    <div class="admin-task-management-page">
+        <p-heading class="mb-6"
+                   :title="i18n.t('MENU.TASK_MANAGEMENT')"
+        />
+        <task-management-template-panel class="mb-4" />
+        <package-panel class="mb-4" />
+        <task-category-panel class="mb-4" />
+        <enable-landing-panel v-if="taskManagementTemplateStore.state.templateId !== 'default'" />
+
+        <!-- package modals -->
+        <package-form />
+        <package-set-default-modal />
+        <package-delete-modal />
+
+        <!-- category modals -->
+        <task-category-form />
+        <task-category-delete-modal />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminWorkflowPage.vue b/apps/web/src/services/ops-flow/pages/admin/AdminWorkflowPage.vue
new file mode 100644
index 0000000000..ecd18e8e16
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminWorkflowPage.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="admin-workflow-page" />
+</template>
+
diff --git a/apps/web/src/services/ops-flow/routes/admin/routes.ts b/apps/web/src/services/ops-flow/routes/admin/routes.ts
new file mode 100644
index 0000000000..a0d5173076
--- /dev/null
+++ b/apps/web/src/services/ops-flow/routes/admin/routes.ts
@@ -0,0 +1,66 @@
+import type { RouteConfig } from 'vue-router';
+
+import { makeAdminRouteName } from '@/router/helpers/route-helper';
+
+import { MENU_ID } from '@/lib/menu/config';
+import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+
+const OpsFlowContainer = () => import('@/services/ops-flow/OpsFlowContainer.vue');
+
+const AdminTaskManagementPage = () => import('@/services/ops-flow/pages/admin/AdminTaskManagementPage.vue');
+const AdminTaskCategoryDetailPage = () => import('@/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue');
+const AdminTaskCategoryDetailPageStatusTab = () => import('@/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue');
+const AdminTaskCategoryDetailPageTaskTypeTab = () => import('@/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue');
+
+const adminOpsFlowRoutes: RouteConfig = {
+    path: 'ops-flow',
+    name: makeAdminRouteName(OPS_FLOW_ROUTE._NAME),
+    meta: {
+        menuId: MENU_ID.OPS_FLOW,
+        translationId: MENU_INFO_MAP[MENU_ID.OPS_FLOW].translationId,
+    },
+    redirect: () => ({ name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT._NAME) }),
+    component: OpsFlowContainer,
+    children: [
+        {
+            path: 'task-management',
+            meta: {
+                menuId: MENU_ID.TASK_MANAGEMENT,
+                translationId: MENU_INFO_MAP[MENU_ID.TASK_MANAGEMENT].translationId,
+            },
+            component: { template: '<router-view />' },
+            children: [
+                {
+                    path: '/',
+                    name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT._NAME),
+                    component: AdminTaskManagementPage as any,
+                },
+                {
+                    path: 'task-category/:taskCategoryId',
+                    name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL._NAME),
+                    props: true,
+                    redirect: { name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.STATUS._NAME) },
+                    component: AdminTaskCategoryDetailPage as any,
+                    children: [
+                        {
+                            path: 'status',
+                            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.STATUS._NAME),
+                            props: true,
+                            component: AdminTaskCategoryDetailPageStatusTab as any,
+                        },
+                        {
+                            path: 'task-type',
+                            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.TASK_TYPE._NAME),
+                            props: true,
+                            component: AdminTaskCategoryDetailPageTaskTypeTab as any,
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+
+export default adminOpsFlowRoutes;
diff --git a/apps/web/src/services/ops-flow/routes/route-constant.ts b/apps/web/src/services/ops-flow/routes/route-constant.ts
new file mode 100644
index 0000000000..fd6db46134
--- /dev/null
+++ b/apps/web/src/services/ops-flow/routes/route-constant.ts
@@ -0,0 +1,22 @@
+import { MENU_ID } from '@/lib/menu/config';
+
+export const OPS_FLOW_ROUTE = Object.freeze({
+    _NAME: MENU_ID.OPS_FLOW,
+    LANDING: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.OPS_FLOW_LANDING}` },
+    BOARD: {
+        _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_BOARD}`,
+        TASK_DETAIL: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_BOARD}.task_detail` },
+        TASK_CREATE: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_BOARD}.task_create` },
+    },
+    TASK_MANAGEMENT: {
+        _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}`,
+        TASK_CATEGORY: {
+            DETAIL: {
+                _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail`,
+                STATUS: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail.status` },
+                TASK_TYPE: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail.task_type` },
+            },
+            CREATE: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.create` },
+        },
+    },
+});
diff --git a/apps/web/src/services/ops-flow/routes/routes.ts b/apps/web/src/services/ops-flow/routes/routes.ts
new file mode 100644
index 0000000000..f82ab42e35
--- /dev/null
+++ b/apps/web/src/services/ops-flow/routes/routes.ts
@@ -0,0 +1,67 @@
+import type { RouteConfig } from 'vue-router';
+
+import { pinia } from '@/store/pinia';
+import { useUserStore } from '@/store/user/user-store';
+
+import { getRedirectRouteByPagePermission } from '@/lib/access-control/redirect-route-helper';
+import { MENU_ID } from '@/lib/menu/config';
+import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const OpsFlowContainer = () => import('@/services/ops-flow/OpsFlowContainer.vue');
+
+const OpsFlowLandingPage = () => import('@/services/ops-flow/pages/OpsFlowLandingPage.vue');
+const BoardPage = () => import('@/services/ops-flow/pages/BoardPage.vue');
+const TaskDetailPage = () => import('@/services/ops-flow/pages/TaskDetailPage.vue');
+const TaskCreatePage = () => import('@/services/ops-flow/pages/TaskCreatePage.vue');
+
+const userStore = useUserStore(pinia);
+const taskManagementTemplateStore = useTaskManagementTemplateStore(pinia);
+const opsFlowRoutes: RouteConfig = {
+    path: 'ops-flow',
+    name: OPS_FLOW_ROUTE._NAME,
+    meta: {
+        menuId: MENU_ID.OPS_FLOW,
+        translationId: MENU_INFO_MAP[MENU_ID.OPS_FLOW].translationId,
+    },
+    redirect: (to) => getRedirectRouteByPagePermission(to, userStore.getters.pageAccessPermissionMap),
+    component: OpsFlowContainer,
+    children: [
+        {
+            path: 'landing',
+            name: OPS_FLOW_ROUTE.LANDING._NAME,
+            meta: {
+                menuId: MENU_ID.OPS_FLOW_LANDING,
+                translationId: () => taskManagementTemplateStore.templates.TemplateName,
+            },
+            component: OpsFlowLandingPage as any,
+        },
+        {
+            path: 'board',
+            name: OPS_FLOW_ROUTE.BOARD._NAME,
+            meta: {
+                menuId: MENU_ID.TASK_BOARD,
+                translationId: () => taskManagementTemplateStore.templates.TaskBoard,
+                lsbVisible: true,
+            },
+            component: BoardPage as any,
+        },
+        {
+            path: 'board/task-create',
+            name: OPS_FLOW_ROUTE.BOARD.TASK_CREATE._NAME,
+            component: TaskCreatePage as any,
+        },
+        {
+            path: 'board/:taskId',
+            name: OPS_FLOW_ROUTE.BOARD.TASK_DETAIL._NAME,
+            props: true,
+            component: TaskDetailPage as any,
+        },
+    ],
+};
+
+export default opsFlowRoutes;
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
new file mode 100644
index 0000000000..9e69e0bef3
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
@@ -0,0 +1,99 @@
+import { asyncComputed } from '@vueuse/core';
+import { watch, reactive, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { PackageCreateParameters } from '@/schema/identity/package/api-verbs/create';
+import type { PackageDeleteParameters } from '@/schema/identity/package/api-verbs/delete';
+import type { PackageListParameters } from '@/schema/identity/package/api-verbs/list';
+import type { PackageSetDefaultParameters } from '@/schema/identity/package/api-verbs/set-default';
+import type { PackageUpdateParameters } from '@/schema/identity/package/api-verbs/update';
+import type { PackageModel } from '@/schema/identity/package/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+
+interface UsePackageStoreState {
+    loading: boolean;
+    items?: PackageModel[];
+}
+export const usePackageStore = defineStore('package', () => {
+    const state = reactive<UsePackageStoreState>({
+        loading: false,
+        items: undefined,
+    });
+
+    const getters = {
+        loading: computed(() => state.loading),
+        packages: asyncComputed<PackageModel[]>(async () => {
+            if (state.items === undefined) {
+                await actions.list();
+            }
+            return state.items ?? [];
+        }, [], { lazy: true }),
+        defaultPackage: computed<PackageModel|undefined>(() => getters.packages.find((p) => p.is_default)),
+    };
+
+    const fetchList = getCancellableFetcher<PackageListParameters, ListResponse<PackageModel>>(SpaceConnector.clientV2.identity.package.list);
+    const actions = {
+        async list() {
+            state.loading = true;
+            try {
+                const result = await fetchList({});
+                if (result.status === 'succeed') {
+                    state.items = result.response.results ?? [];
+                }
+            } catch (e) {
+                ErrorHandler.handleError(e);
+            } finally {
+                state.loading = false;
+            }
+        },
+        async create(param: PackageCreateParameters) {
+            const response = await SpaceConnector.clientV2.identity.package.create<PackageCreateParameters, PackageModel>(param);
+            state.items?.push(response);
+            return response;
+        },
+        async update(param: PackageUpdateParameters) {
+            const response = await SpaceConnector.clientV2.identity.package.update<PackageUpdateParameters, PackageModel>(param);
+            state.items = state.items?.map((item) => (item.package_id === response.package_id ? response : item));
+            return response;
+        },
+        async setDefaultPackage(packageId: string) {
+            const prevDefaultPackage = getters.packages.find((p) => p.is_default);
+            if (prevDefaultPackage?.package_id === packageId) return prevDefaultPackage;
+            const response = await SpaceConnector.clientV2.identity.package.setDefault<PackageSetDefaultParameters, PackageModel>({
+                package_id: packageId,
+            });
+            const prev = state.items?.find((p) => p.is_default);
+            if (prev) prev.is_default = false;
+            const current = state.items?.find((p) => p.package_id === packageId);
+            if (current) current.is_default = true;
+            return response;
+        },
+        async delete(packageId: string) {
+            await SpaceConnector.clientV2.identity.package.delete<PackageDeleteParameters, undefined>({
+                package_id: packageId,
+            });
+            state.items = state.items?.filter((item) => item.package_id !== packageId);
+        },
+    };
+    const disposeSelf = () => {
+        const store = usePackageStore();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch(() => appContextStore.getters.globalGrantLoading, (globalGrantLoading) => {
+        if (globalGrantLoading) disposeSelf();
+    });
+    return {
+        getters,
+        ...actions,
+    };
+});
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
new file mode 100644
index 0000000000..af890d42dc
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
@@ -0,0 +1,222 @@
+import { asyncComputed } from '@vueuse/core';
+import type { DeepReadonly } from 'vue';
+import {
+    reactive, computed,
+} from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+
+interface UseTaskCategoryPageStoreState {
+    currentCategoryId?: string;
+    // status
+    visibleStatusForm: boolean;
+    targetStatus: {
+        statusId: string;
+        type: TaskStatusType;
+    }|undefined;
+    visibleStatusDeleteModal: boolean;
+    visibleSetDefaultStatusModal: boolean;
+    // task type
+    visibleTaskTypeForm: boolean;
+    targetTaskTypeId?: string;
+    visibleTaskTypeDeleteModal: boolean;
+    associatedTasksToTypeMap: Record<string, TaskModel[]>;
+    loadingAssociatedTasksToType: boolean;
+}
+
+interface UseTaskCategoryPageStoreGetters {
+    currentCategory: TaskCategoryModel|undefined;
+    // status
+    statusOptions: TaskStatusOptions;
+    targetStatusOption: {
+        type: TaskStatusType;
+        data: TaskStatusOption;
+    }|undefined;
+    // task type
+    taskTypes: TaskTypeModel[]|undefined;
+    targetTaskType: TaskTypeModel|undefined;
+    associatedTasksToType: TaskModel[];
+}
+
+export const useTaskCategoryPageStore = defineStore('task-category-page', () => {
+    const taskCategoryStore = useTaskCategoryStore();
+    const taskTypeStore = useTaskTypeStore();
+    const taskStore = useTaskStore();
+    const state = reactive<UseTaskCategoryPageStoreState>({
+        currentCategoryId: undefined,
+        // status
+        visibleStatusForm: false,
+        targetStatus: undefined,
+        visibleStatusDeleteModal: false,
+        visibleSetDefaultStatusModal: false,
+        // task type
+        visibleTaskTypeForm: false,
+        targetTaskTypeId: undefined,
+        visibleTaskTypeDeleteModal: false,
+        associatedTasksToTypeMap: {},
+        loadingAssociatedTasksToType: false,
+    });
+    const getters: UseTaskCategoryPageStoreGetters = {
+        currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
+        // status
+        statusOptions: computed<TaskStatusOptions>(() => {
+            const category = getters.currentCategory;
+            if (!category) {
+                return {
+                    TODO: [],
+                    IN_PROGRESS: [],
+                    COMPLETED: [],
+                };
+            }
+            return category.status_options;
+        }),
+        targetStatusOption: computed<{
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }|undefined>(() => {
+            if (!state.targetStatus) return undefined;
+            const { statusId, type } = state.targetStatus;
+            const statusOptions = getters.statusOptions;
+            if (!statusOptions) return undefined;
+            const data = statusOptions[type].find((status) => status.status_id === statusId);
+            if (!data) return undefined;
+            return {
+                type,
+                data,
+            };
+        }),
+        // task type
+        taskTypes: asyncComputed<TaskTypeModel[]|undefined>(async () => {
+            if (!state.currentCategoryId) return undefined;
+            if (!taskTypeStore.state.itemsByCategoryId[state.currentCategoryId]) await taskTypeStore.listByCategoryId(state.currentCategoryId);
+            return taskTypeStore.state.itemsByCategoryId[state.currentCategoryId];
+        }, undefined, { lazy: true, onError: ErrorHandler.handleError }),
+        targetTaskType: computed<TaskTypeModel|undefined>(() => {
+            if (!state.targetTaskTypeId) return undefined;
+            return getters.taskTypes?.find((taskType) => taskType.task_type_id === state.targetTaskTypeId);
+        }),
+        associatedTasksToType: computed<DeepReadonly<TaskModel[]>>(() => {
+            if (!state.targetTaskTypeId) return [];
+            const taskTypeId = state.targetTaskTypeId;
+            return state.associatedTasksToTypeMap[taskTypeId] ?? [];
+        }),
+    } as unknown as UseTaskCategoryPageStoreGetters;
+    const actions = {
+        setCurrentCategoryId(categoryId: string) {
+            state.currentCategoryId = categoryId;
+        },
+        // status
+        openAddStatusForm() {
+            state.targetStatus = undefined;
+            state.visibleStatusForm = true;
+        },
+        openEditStatusForm(statusId: string, statusType: TaskStatusType) {
+            state.targetStatus = {
+                statusId,
+                type: statusType,
+            };
+            state.visibleStatusForm = true;
+        },
+        closeStatusForm() {
+            state.visibleStatusForm = false;
+            // do not reset targetStatus here and handle it after the modal is closed
+        },
+        openDeleteStatusModal(statusId: string, statusType: TaskStatusType) {
+            state.targetStatus = {
+                statusId,
+                type: statusType,
+            };
+            state.visibleStatusDeleteModal = true;
+        },
+        closeDeleteStatusModal() {
+            state.visibleStatusDeleteModal = false;
+            // do not reset targetStatus here and handle it after the modal is closed
+        },
+        openSetDefaultStatusModal(statusId: string, statusType: TaskStatusType) {
+            state.targetStatus = {
+                statusId,
+                type: statusType,
+            };
+            state.visibleSetDefaultStatusModal = true;
+        },
+        closeSetDefaultStatusModal() {
+            state.visibleSetDefaultStatusModal = false;
+            // do not reset targetStatus here and handle it after the modal is closed
+        },
+        resetTargetStatus() {
+            state.targetStatus = undefined;
+        },
+        // task type
+        async loadAssociatedTasksToType(taskTypeId: string, force = false) {
+            state.loadingAssociatedTasksToType = true;
+            if (state.associatedTasksToTypeMap[taskTypeId] && !force) {
+                state.loadingAssociatedTasksToType = false;
+                return;
+            }
+
+            try {
+                const tasks = await taskStore.list({
+                    task_type_id: taskTypeId,
+                });
+                if (!tasks) return; // canceled
+                state.associatedTasksToTypeMap = {
+                    ...state.associatedTasksToTypeMap,
+                    [taskTypeId]: tasks,
+                };
+                state.loadingAssociatedTasksToType = false;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loadingAssociatedTasksToType = false;
+            }
+        },
+        async listTaskTypes() {
+            try {
+                if (!state.currentCategoryId) throw new Error('currentCategoryId is not set');
+                const taskTypes = await taskTypeStore.listByCategoryId(state.currentCategoryId, true);
+                return taskTypes;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                return [];
+            }
+        },
+        openAddTaskTypeForm() {
+            state.targetTaskTypeId = undefined;
+            state.visibleTaskTypeForm = true;
+        },
+        openEditTaskTypeForm(taskTypeId: string) {
+            state.targetTaskTypeId = taskTypeId;
+            state.visibleTaskTypeForm = true;
+        },
+        closeTaskTypeForm() {
+            state.visibleTaskTypeForm = false;
+            // do not reset targetTaskTypeId here and handle it after the modal is closed
+        },
+        openDeleteTaskTypeModal(taskTypeId: string) {
+            state.targetTaskTypeId = taskTypeId;
+            state.visibleTaskTypeDeleteModal = true;
+        },
+        closeDeleteTaskTypeModal() {
+            state.visibleTaskTypeDeleteModal = false;
+            // do not reset targetTaskTypeId here and handle it after the modal is closed
+        },
+        resetTargetTaskTypeId() {
+            state.targetTaskTypeId = undefined;
+        },
+    };
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts
new file mode 100644
index 0000000000..f6ad0ef4a0
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts
@@ -0,0 +1,131 @@
+import { reactive, computed, watch } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { TaskCategoryCreateParameters } from '@/schema/opsflow/task-category/api-verbs/create';
+import type { TaskCategoryDeleteParameters } from '@/schema/opsflow/task-category/api-verbs/delete';
+import type { TaskCategoryGetParameters } from '@/schema/opsflow/task-category/api-verbs/get';
+import type { TaskCategoryListParameters } from '@/schema/opsflow/task-category/api-verbs/list';
+import type { TaskCategoryUpdateParameters } from '@/schema/opsflow/task-category/api-verbs/update';
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+
+interface UseTaskCategoryStoreState {
+    loading: boolean;
+    items?: TaskCategoryModel[];
+}
+interface UseTaskCategoryStoreGetters {
+    loading: boolean;
+    taskCategories: TaskCategoryModel[];
+}
+const DEFAULT_STATUS_OPTIONS: TaskCategoryCreateParameters['status_options'] = {
+    TODO: [
+        { name: 'To Do', color: 'blue200', is_default: true },
+    ],
+    IN_PROGRESS: [
+        { name: 'In Progress', color: 'yellow200', is_default: true },
+    ],
+    COMPLETED: [
+        { name: 'Done', color: 'green200', is_default: true },
+    ],
+};
+export const useTaskCategoryStore = defineStore('task-category', () => {
+    const state = reactive<UseTaskCategoryStoreState>({
+        loading: false,
+        items: undefined,
+    });
+
+    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 ?? [];
+        }),
+    } as unknown as UseTaskCategoryStoreGetters; // HACK: to avoid type error
+
+    const fetchList = getCancellableFetcher<TaskCategoryListParameters, ListResponse<TaskCategoryModel>>(SpaceConnector.clientV2.opsflow.taskCategory.list);
+    const actions = {
+        async list(force?: true): Promise<TaskCategoryModel[]|undefined> {
+            if (!force && state.items) return state.items;
+            try {
+                state.loading = true;
+                const result = await fetchList({ include_deleted: true });
+                if (result.status === 'succeed') {
+                    state.loading = false;
+                    state.items = result.response.results ?? [];
+                    return result.response.results ?? [];
+                }
+                return undefined;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loading = false;
+                return undefined;
+            }
+        },
+        async create(params: Omit<TaskCategoryCreateParameters, 'status_options'>) {
+            const response = await SpaceConnector.clientV2.opsflow.taskCategory.create<TaskCategoryCreateParameters, TaskCategoryModel>({
+                ...params,
+                status_options: DEFAULT_STATUS_OPTIONS,
+            });
+            state.items?.push(response);
+            return response;
+        },
+        async update(params: TaskCategoryUpdateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskCategory.update<TaskCategoryUpdateParameters, TaskCategoryModel>(params);
+            const item = state.items?.find((c) => c.category_id === response.category_id);
+            if (item) {
+                Object.assign(item, response);
+            }
+            return response;
+        },
+        async get(categoryId: string) {
+            const category = state.items?.find((item) => item.category_id === categoryId);
+            if (category) return category;
+            const response = await SpaceConnector.clientV2.opsflow.taskCategory.get<TaskCategoryGetParameters, TaskCategoryModel>({
+                category_id: categoryId,
+            });
+            return response;
+        },
+        async delete(categoryId: string) {
+            await SpaceConnector.clientV2.opsflow.taskCategory.delete<TaskCategoryDeleteParameters, TaskCategoryModel>({
+                category_id: categoryId,
+            });
+            state.items = state.items?.filter((item) => item.category_id !== categoryId);
+        },
+        reset() {
+            state.loading = false;
+            state.items = undefined;
+        },
+    };
+
+    const disposeSelf = () => {
+        const store = useTaskCategoryStore();
+        store.reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch(() => appContextStore.getters.globalGrantLoading, (globalGrantLoading) => {
+        if (globalGrantLoading) disposeSelf();
+    });
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
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
new file mode 100644
index 0000000000..ecb7658837
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
@@ -0,0 +1,153 @@
+import type { DeepReadonly } from 'vue';
+import { reactive, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { PackageModel } from '@/schema/identity/package/model';
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+
+import type { WorkspaceItem } from '@/store/reference/workspace-reference-store';
+import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+
+interface UseTaskManagementPageStoreState {
+    // support package
+    visiblePackageForm: boolean;
+    targetPackageId?: string;
+    visibleDeletePackageModal: boolean;
+    visibleSetDefaultPackageModal: boolean;
+    // category
+    visibleCategoryForm: boolean;
+    targetCategoryId?: string;
+    visibleDeleteCategoryModal: boolean;
+    // task
+    associatedTasksToCategoryMap: Record<string, TaskModel[]>;
+    loadingAssociatedTasksToCategory: boolean;
+}
+
+export const useTaskManagementPageStore = defineStore('task-management-page', () => {
+    const packageStore = usePackageStore();
+    const taskCategoryStore = useTaskCategoryStore();
+    const workspaceReferenceStore = useWorkspaceReferenceStore();
+    const taskStore = useTaskStore();
+    const state = reactive<UseTaskManagementPageStoreState>({
+        // support package
+        visiblePackageForm: false,
+        targetPackageId: undefined,
+        visibleDeletePackageModal: false,
+        visibleSetDefaultPackageModal: false,
+        // category
+        visibleCategoryForm: false,
+        targetCategoryId: undefined,
+        visibleDeleteCategoryModal: false,
+        // task
+        associatedTasksToCategoryMap: {},
+        loadingAssociatedTasksToCategory: false,
+    });
+    const getters = {
+        targetPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.package_id === state.targetPackageId)),
+        associatedCategoriesToPackage: computed<DeepReadonly<TaskCategoryModel[]>>(() => taskCategoryStore.getters.taskCategories.filter((c) => c.package_id === state.targetPackageId)),
+        associatedWorkspacesToPackage: computed<WorkspaceItem[]>(() => {
+            const targetPackageId = state.targetPackageId;
+            if (!targetPackageId) return [];
+            const workspaceItems: WorkspaceItem[] = Object.values(workspaceReferenceStore.getters.workspaceItems);
+            return workspaceItems.filter((w) => w.data.packages?.includes(targetPackageId));
+        }),
+        associatedTasksToCategory: computed<DeepReadonly<TaskModel[]>>(() => {
+            if (!state.targetCategoryId) return [];
+            const categoryId = state.targetCategoryId;
+            return state.associatedTasksToCategoryMap[categoryId] ?? [];
+        }),
+        targetCategory: computed<DeepReadonly<TaskCategoryModel>|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.targetCategoryId)),
+        defaultPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.is_default)),
+    };
+    const actions = {
+        // support package
+        openAddPackageForm() {
+            state.targetPackageId = undefined;
+            state.visiblePackageForm = true;
+        },
+        openEditPackageForm(packageId: string) {
+            state.targetPackageId = packageId;
+            state.visiblePackageForm = true;
+        },
+        closePackageForm() {
+            state.visiblePackageForm = false;
+            // do not reset targetPackageId here and handle it after the modal is closed
+        },
+        openDeletePackageModal(packageId: string) {
+            state.targetPackageId = packageId;
+            state.visibleDeletePackageModal = true;
+        },
+        closeDeletePackageModal() {
+            state.visibleDeletePackageModal = false;
+            // do not reset targetPackageId here and handle it after the modal is closed
+        },
+        openSetDefaultPackageModal(packageId: string) {
+            state.targetPackageId = packageId;
+            state.visibleSetDefaultPackageModal = true;
+        },
+        closeSetDefaultPackageModal() {
+            state.visibleSetDefaultPackageModal = false;
+            // do not reset targetPackageId here and handle it after the modal is closed
+        },
+        resetTargetPackageId() {
+            state.targetPackageId = undefined;
+        },
+        // category
+        openAddCategoryForm() {
+            state.targetCategoryId = undefined;
+            state.visibleCategoryForm = true;
+        },
+        openEditCategoryForm(categoryId: string) {
+            state.targetCategoryId = categoryId;
+            state.visibleCategoryForm = true;
+        },
+        closeCategoryForm() {
+            state.visibleCategoryForm = false;
+            // do not reset targetCategoryId here and handle it after the modal is closed
+        },
+        openDeleteCategoryModal(categoryId: string) {
+            state.targetCategoryId = categoryId;
+            state.visibleDeleteCategoryModal = true;
+        },
+        closeDeleteCategoryModal() {
+            state.visibleDeleteCategoryModal = false;
+            // do not reset targetCategoryId here and handle it after the modal is closed
+        },
+        resetTargetCategoryId() {
+            state.targetCategoryId = undefined;
+        },
+        // task
+        async loadAssociatedTasksToCategory(categoryId: string) {
+            state.loadingAssociatedTasksToCategory = true;
+            if (state.associatedTasksToCategoryMap[categoryId]) {
+                state.loadingAssociatedTasksToCategory = false;
+                return;
+            }
+            try {
+                const tasks = await taskStore.list({ category_id: categoryId });
+                if (!tasks) return;
+                state.associatedTasksToCategoryMap = {
+                    ...state.associatedTasksToCategoryMap,
+                    [categoryId]: tasks,
+                };
+                state.loadingAssociatedTasksToCategory = false;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loadingAssociatedTasksToCategory = false;
+            }
+        },
+    };
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
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
new file mode 100644
index 0000000000..35c3708ac7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/board-page-store.ts
@@ -0,0 +1,32 @@
+import type { ComputedRef } from 'vue';
+import { reactive, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+interface UseBoardPageStoreGetters {
+    currentCategory: ComputedRef<TaskCategoryModel|undefined>;
+}
+export const useBoardPageStore = defineStore('board-page', () => {
+    const taskCategoryStore = useTaskCategoryStore();
+
+    const state = reactive({
+        currentCategoryId: '',
+    });
+    const getters: UseBoardPageStoreGetters = {
+        currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
+    };
+    const actions = {
+        setCurrentCategoryId(categoryId: string) {
+            state.currentCategoryId = categoryId;
+        },
+    };
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/comment-store.ts b/apps/web/src/services/ops-flow/stores/comment-store.ts
new file mode 100644
index 0000000000..95fea0bd31
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/comment-store.ts
@@ -0,0 +1,126 @@
+import { computed, reactive, watch } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { CommentCreateParameters } from '@/schema/opsflow/comment/api-verbs/create';
+import type { CommentDeleteParameters } from '@/schema/opsflow/comment/api-verbs/delete';
+import type { CommentGetParameters } from '@/schema/opsflow/comment/api-verbs/get';
+import type { CommentListParameters } from '@/schema/opsflow/comment/api-verbs/list';
+import type { CommentUpdateParameters } from '@/schema/opsflow/comment/api-verbs/update';
+import type { CommentModel } from '@/schema/opsflow/comment/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+interface UseCommentStoreState {
+    itemsByTaskId: Record<string, CommentModel[]|undefined>;
+}
+export const useCommentStore = defineStore('comment', () => {
+    const state = reactive<UseCommentStoreState>({
+        itemsByTaskId: {},
+    });
+
+    const comments = computed<CommentModel[]>(() => Object.values(state.itemsByTaskId).flat().filter((c) => c) as CommentModel[]);
+
+    const fetchList = getCancellableFetcher<CommentListParameters, ListResponse<CommentModel>>(SpaceConnector.clientV2.opsflow.comment.list);
+    const actions = {
+        /*
+         * @return {CommentModel[]|undefined} It returns undefined if the request is canceled.
+         */
+        async listByTaskId(taskId: string, params: CommentListParameters = {}): Promise<CommentModel[]|undefined> {
+            if (state.itemsByTaskId[taskId]) {
+                return state.itemsByTaskId[taskId];
+            }
+            const res = await actions.list({
+                ...params,
+                task_id: taskId,
+            });
+            if (res) {
+                state.itemsByTaskId = { ...state.itemsByTaskId, [taskId]: res };
+            }
+            return res;
+        },
+        /*
+         * @return {CommentModel[]|undefined} It returns undefined if the request is canceled.
+         */
+        async list(params: CommentListParameters = {}): Promise<CommentModel[]|undefined> {
+            const result = await fetchList({
+                ...params,
+                comment_type: 'COMMENT',
+            });
+            if (result.status === 'succeed') {
+                return result.response.results ?? [];
+            }
+            return undefined;
+        },
+        async create(params: CommentCreateParameters, addToFront = false) {
+            const response = await SpaceConnector.clientV2.opsflow.comment.create<CommentCreateParameters, CommentModel>(params);
+            const taskId = response.task_id;
+            if (state.itemsByTaskId[taskId]) {
+                if (addToFront) state.itemsByTaskId[taskId]?.unshift(response);
+                else state.itemsByTaskId[taskId]?.push(response);
+            } else {
+                state.itemsByTaskId[taskId] = [response];
+            }
+            state.itemsByTaskId = { ...state.itemsByTaskId }; // trigger reactivity
+            return response;
+        },
+        async update(params: CommentUpdateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.comment.update<CommentUpdateParameters, CommentModel>(params);
+            const taskId = response.task_id;
+            if (state.itemsByTaskId[taskId]) {
+                const comment = state.itemsByTaskId[taskId]?.find((c) => c.comment_id === response.comment_id);
+                if (comment) {
+                    Object.assign(comment, response);
+                }
+            } else {
+                state.itemsByTaskId[taskId] = [response];
+            }
+            state.itemsByTaskId = { ...state.itemsByTaskId }; // trigger reactivity
+            return response;
+        },
+        async get(commentId: string) {
+            const response = await SpaceConnector.clientV2.opsflow.comment.get<CommentGetParameters, CommentModel>({
+                comment_id: commentId,
+            });
+            if (state.itemsByTaskId[response.task_id]) {
+                const comment = state.itemsByTaskId[response.task_id]?.find((c) => c.comment_id === response.comment_id);
+                if (comment) {
+                    Object.assign(comment, response);
+                }
+            } else {
+                state.itemsByTaskId[response.task_id] = [response];
+            }
+            return response;
+        },
+        async delete(commentId: string) {
+            await SpaceConnector.clientV2.opsflow.comment.delete<CommentDeleteParameters, CommentModel>({
+                comment_id: commentId,
+            });
+            const taskId = comments.value.find((c) => c.comment_id === commentId)?.task_id;
+            if (taskId) {
+                state.itemsByTaskId[taskId] = state.itemsByTaskId[taskId]?.filter((c) => c.comment_id !== commentId);
+            }
+        },
+        reset() {
+            state.itemsByTaskId = {};
+        },
+    };
+
+    const disposeSelf = () => {
+        const store = useCommentStore();
+        store.reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch(() => appContextStore.getters.globalGrantLoading, (globalGrantLoading) => {
+        if (globalGrantLoading) disposeSelf();
+    });
+    return {
+        state,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/task-assign-store.ts b/apps/web/src/services/ops-flow/stores/task-assign-store.ts
new file mode 100644
index 0000000000..0ed00d3c3c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-assign-store.ts
@@ -0,0 +1,34 @@
+import { reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+interface UseTaskAssignStoreState {
+    taskId?: string;
+    currentAssignee?: string;
+    currentAssigneePool?: string[];
+    visibleAssignModal: boolean;
+}
+export const useTaskAssignStore = defineStore('task-assign', () => {
+    const state = reactive<UseTaskAssignStoreState>({
+        taskId: undefined,
+        currentAssignee: undefined,
+        currentAssigneePool: undefined,
+        visibleAssignModal: false,
+    });
+    const actions = {
+        openAssignModal(taskId: string, assignee?: string, assigneePool?: string[]) {
+            state.taskId = taskId;
+            state.currentAssignee = assignee;
+            state.currentAssigneePool = assigneePool;
+            state.visibleAssignModal = true;
+        },
+        closeAssignModal(assignee?: string) {
+            state.currentAssignee = assignee;
+            state.visibleAssignModal = false;
+        },
+    };
+    return {
+        state,
+        ...actions,
+    };
+});
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
new file mode 100644
index 0000000000..aad2a67e7c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
@@ -0,0 +1,239 @@
+import { reactive, computed } from 'vue';
+
+import { isEmpty, isEqual } from 'lodash';
+import { defineStore } from 'pinia';
+
+import type { FileModel } from '@/schema/file-manager/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+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 {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+interface UseTaskContentFormStoreState {
+    originTask?: TaskModel;
+    // base form
+    currentCategoryId?: string;
+    currentTaskType?: TaskTypeModel;
+    statusId?: string;
+    assignee?: string;
+    isBaseFormValid: boolean;
+    // default field form
+    defaultData: Partial<Record<DefaultTaskFieldId, any>>;
+    defaultDataValidationMap: Record<string, boolean>;
+    // task type field form
+    data: Record<string, any>;
+    dataValidationMap: Record<string, boolean>;
+    files: FileModel[];
+    // overall
+    mode: 'create'|'view';
+    hasUnsavedChanges: boolean;
+    createTaskLoading: boolean;
+}
+interface UseTaskContentFormStoreGetters {
+    currentCategory: TaskCategoryModel|undefined;
+    currentFields: TaskField[];
+    isDefaultFieldValid: boolean;
+    isFieldValid: boolean;
+    isAllValid: boolean;
+    isEditable: boolean;
+}
+export const useTaskContentFormStore = defineStore('task-content-form', () => {
+    const taskCategoryStore = useTaskCategoryStore();
+    const taskTypeStore = useTaskTypeStore();
+    const taskStore = useTaskStore();
+    const taskFieldMetadataStore = useTaskFieldMetadataStore();
+    const taskManagementTemplateStore = useTaskManagementTemplateStore();
+    const userStore = useUserStore();
+
+    const state = reactive<UseTaskContentFormStoreState>({
+        originTask: undefined,
+        // base form
+        currentCategoryId: undefined,
+        currentTaskType: undefined,
+        statusId: undefined,
+        assignee: undefined,
+        isBaseFormValid: false,
+        // default field form
+        defaultData: {},
+        defaultDataValidationMap: {},
+        // task type field form
+        data: {},
+        dataValidationMap: {},
+        files: [],
+        // overall
+        mode: 'create',
+        hasUnsavedChanges: false,
+        createTaskLoading: false,
+    });
+    const getters = {
+        // base form
+        currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
+        // task type field form
+        currentFields: computed<TaskField[]>(() => {
+            const taskType = state.currentTaskType;
+            const fields = taskType?.fields ?? [];
+            const isViewMode = state.mode === 'view';
+            return isViewMode ? fields : fields.filter((f) => f.is_primary || f.is_required);
+        }),
+        isDefaultFieldValid: computed<boolean>(() => {
+            if (state.mode === 'view') return state.defaultDataValidationMap[DEFAULT_FIELD_ID_MAP.title] ?? true;
+            return taskFieldMetadataStore.getters.defaultFields.every((field) => state.defaultDataValidationMap[field.field_id]);
+        }),
+        isFieldValid: computed<boolean>(() => getters.currentFields?.every((field) => state.dataValidationMap[field.field_id]) ?? true),
+        // overall
+        isAllValid: computed<boolean>(() => {
+            if (state.mode === 'view') return getters.isDefaultFieldValid;
+            return state.isBaseFormValid && getters.isDefaultFieldValid && getters.isFieldValid;
+        }),
+        isEditable: computed<boolean>(() => {
+            if (state.mode === 'create') return true;
+            if (!state.originTask) return true;
+            if (userStore.getters.isDomainAdmin) return true;
+            if (state.originTask.created_by === userStore.state.userId) return true;
+            return false;
+        }),
+    } as unknown as UseTaskContentFormStoreGetters; // HACK: to avoid type error
+    const actions = {
+        async setCurrentCategoryId(categoryId?: string) {
+            if (state.currentCategoryId === categoryId) return;
+            state.currentCategoryId = categoryId;
+            state.currentTaskType = undefined;
+        },
+        async setCurrentTaskType(taskTypeId?: string) {
+            if (state.currentTaskType?.task_type_id === taskTypeId) return;
+            if (taskTypeId) {
+                if (taskTypeStore.state.fullFieldsItemMap[taskTypeId]) {
+                    state.currentTaskType = taskTypeStore.state.fullFieldsItemMap[taskTypeId];
+                } else {
+                    state.currentTaskType = await taskTypeStore.getWithFullFields(taskTypeId);
+                }
+            } else {
+                state.currentTaskType = undefined;
+            }
+            state.data = {};
+            state.dataValidationMap = {};
+            state.files = [];
+        },
+        setStatusId(statusId?: string) {
+            state.statusId = statusId;
+        },
+        setAssigneeToOriginTask(assignee: string) {
+            if (state.originTask) {
+                state.originTask = { ...state.originTask, assignee };
+            }
+        },
+        setIsBaseFormValid(isValid: boolean) {
+            state.isBaseFormValid = isValid;
+        },
+        // default field form
+        setDefaultFieldData(fieldId: DefaultTaskFieldId, value: any) {
+            state.hasUnsavedChanges = state.defaultData[fieldId] !== value;
+            state.defaultData[fieldId] = value;
+        },
+        setDefaultFieldValidation(fieldId: DefaultTaskFieldId, isValid: boolean) {
+            state.defaultDataValidationMap = { ...state.defaultDataValidationMap, [fieldId]: isValid };
+        },
+        // task type field form
+        setFieldData(fieldId: string, value: any) {
+            state.hasUnsavedChanges = state.data[fieldId] !== value;
+            state.data[fieldId] = value;
+        },
+        setFieldValidation(fieldId: string, isValid: boolean) {
+            state.dataValidationMap = { ...state.dataValidationMap, [fieldId]: isValid };
+        },
+        setFiles(files: FileModel[]) {
+            state.hasUnsavedChanges = !isEqual(state.files, files);
+            state.files = files;
+        },
+        // overall
+        setCurrentTask(task: TaskModel) {
+            state.originTask = task;
+            state.currentCategoryId = task.category_id;
+            actions.setCurrentTaskType(task.task_type_id);
+            state.statusId = task.status_id;
+            state.assignee = task.assignee;
+            state.defaultData = {
+                title: task.name,
+                description: task.description,
+                project: task.project_id ? [task.project_id] : undefined,
+            };
+            state.data = task.data ?? {};
+            state.defaultDataValidationMap = {};
+            state.dataValidationMap = {};
+        },
+        resetFieldsForm() {
+            state.defaultData = {};
+            state.defaultDataValidationMap = {};
+            state.data = {};
+            state.dataValidationMap = {};
+            state.files = [];
+        },
+        setMode(mode: 'create'|'view') {
+            state.mode = mode;
+        },
+        async createTask() {
+            try {
+                if (!state.currentTaskType) throw new Error('Task type is not selected');
+                state.createTaskLoading = true;
+                state.originTask = await taskStore.create({
+                    task_type_id: state.currentTaskType.task_type_id,
+                    name: state.defaultData.title,
+                    status_id: state.statusId as string,
+                    description: state.defaultData.description || undefined,
+                    assignee: state.assignee || undefined,
+                    data: isEmpty(state.data) ? undefined : state.data,
+                    files: state.files.map((f) => f.file_id),
+                    project_id: state.defaultData.project?.[0],
+                });
+                showSuccessMessage(i18n.t('OPSFLOW.ALT_S_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
+                state.createTaskLoading = false;
+                return true;
+            } catch (e) {
+                ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }));
+                state.createTaskLoading = false;
+                return false;
+            }
+        },
+        async updateTask() {
+            try {
+                if (!state.originTask) throw new Error('Origin task is not defined');
+                await taskStore.update({
+                    task_id: state.originTask.task_id,
+                    name: state.defaultData.title,
+                });
+                showSuccessMessage(i18n.t('OPSFLOW.ALT_S_UPDATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
+                return true;
+            } catch (e) {
+                ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_UPDATE_TARGET', { target: taskManagementTemplateStore.templates.task }));
+                return false;
+            }
+        },
+    };
+
+
+
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
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
new file mode 100644
index 0000000000..f050ab7251
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
@@ -0,0 +1,155 @@
+import { computed, reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { CommentModel } from '@/schema/opsflow/comment/model';
+import type { EventListParameters } from '@/schema/opsflow/event/api-verbs/list';
+import type { EventModel } from '@/schema/opsflow/event/model';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+const EVENT_PAGE_SIZE = 10;
+interface UseTaskDetailPageStoreState {
+    // task
+    taskId?: string;
+    visibleTaskDeleteModal: boolean;
+    // events
+    page: number;
+    loadingEvents: boolean;
+    events?: EventModel[];
+    lastTotalCount?: number;
+    // comments
+    visibleCommentDeleteModal: boolean;
+    targetComment?: CommentModel;
+}
+
+interface UseTaskDetailPageStoreGetters {
+    firstLoadingEvents: boolean;
+    hasMoreEvents: boolean;
+}
+
+export const useTaskDetailPageStore = defineStore('task-detail-page', () => {
+    const state = reactive<UseTaskDetailPageStoreState>({
+        // task
+        taskId: undefined,
+        visibleTaskDeleteModal: false,
+        // events
+        page: 1,
+        loadingEvents: true,
+        events: undefined,
+        lastTotalCount: undefined,
+        // comments
+        visibleCommentDeleteModal: false,
+        targetComment: undefined,
+    });
+    const getters: UseTaskDetailPageStoreGetters = {
+        // events
+        firstLoadingEvents: computed<boolean>(() => !state.events),
+        hasMoreEvents: computed<boolean>(() => {
+            if (!state.events) return true;
+            return state.events.length < (state.lastTotalCount ?? 0);
+        }),
+    } as unknown as UseTaskDetailPageStoreGetters; // HACK: to avoid type error
+
+    const listEventsQueryHelper = new ApiQueryHelper()
+        .setMultiSortV2([{ key: 'created_at', desc: true }]);
+    const loadMoreEventsQueryHelper = new ApiQueryHelper()
+        .setTimezone('UTC')
+        .setMultiSortV2([{ key: 'created_at', desc: true }]);
+
+    const fetchEventList = getCancellableFetcher<EventListParameters, ListResponse<EventModel>>(SpaceConnector.clientV2.opsflow.event.list);
+    const actions = {
+        // task
+        setCurrentTaskId(taskId: string) {
+            state.taskId = taskId;
+        },
+        openTaskDeleteModal() {
+            state.visibleTaskDeleteModal = true;
+        },
+        closeTaskDeleteModal() {
+            state.visibleTaskDeleteModal = false;
+        },
+        // events
+        async loadNewEvents() {
+            try {
+                if (!state.taskId) throw new Error('Task ID is not set');
+                if (!state.events?.length) {
+                    await actions.listEvents();
+                    return;
+                }
+
+                loadMoreEventsQueryHelper.setFilters([{
+                    k: 'created_at', v: state.events[0].created_at, o: '>t',
+                }]);
+
+                const res = await fetchEventList({
+                    task_id: state.taskId,
+                    query: loadMoreEventsQueryHelper.dataV2,
+                });
+                if (res.status === 'succeed') {
+                    state.events = res.response.results ? [...res.response.results, ...state.events] : state.events;
+                    state.page += res.response.results?.length ?? 0;
+                }
+            } catch (e) {
+                ErrorHandler.handleError(e);
+            }
+        },
+        async listEvents() {
+            try {
+                if (!state.taskId) throw new Error('Task ID is not set');
+                state.loadingEvents = true;
+                if (state.lastTotalCount && state.events && state.events.length >= state.lastTotalCount) {
+                    state.loadingEvents = false;
+                    return;
+                }
+
+                listEventsQueryHelper.setPage(state.page, EVENT_PAGE_SIZE);
+                const res = await fetchEventList({
+                    task_id: state.taskId,
+                    query: listEventsQueryHelper.dataV2,
+                });
+                if (res.status === 'succeed') {
+                    const totalCount = res.response.total_count ?? 0;
+                    let addedEvents = res.response.results ?? [];
+                    if (state.lastTotalCount && totalCount > state.lastTotalCount) {
+                        const diff = totalCount - state.lastTotalCount;
+                        addedEvents = addedEvents.slice(diff);
+                        await actions.loadNewEvents();
+                    }
+                    state.page += addedEvents.length;
+                    state.events = state.events ? state.events.concat(addedEvents) : addedEvents;
+                    state.lastTotalCount = totalCount;
+                    state.loadingEvents = false;
+                }
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loadingEvents = false;
+            }
+        },
+        resetEvents() {
+            state.page = 1;
+            state.loadingEvents = true;
+            state.events = undefined;
+            state.lastTotalCount = undefined;
+        },
+        // comments
+        openCommentDeleteModal(comment: CommentModel) {
+            state.targetComment = comment;
+            state.visibleCommentDeleteModal = true;
+        },
+        closeCommentDeleteModal() {
+            state.visibleCommentDeleteModal = false;
+            state.targetComment = undefined;
+        },
+    };
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/task-store.ts b/apps/web/src/services/ops-flow/stores/task-store.ts
new file mode 100644
index 0000000000..5cbdeecb52
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-store.ts
@@ -0,0 +1,100 @@
+import { reactive, watch } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { TaskChangeAssigneeParameters } from '@/schema/opsflow/task/api-verbs/change-assignee';
+import type { TaskChangeStatusParameters } from '@/schema/opsflow/task/api-verbs/change-status';
+import type { TaskCreateParameters } from '@/schema/opsflow/task/api-verbs/create';
+import type { TaskDeleteParameters } from '@/schema/opsflow/task/api-verbs/delete';
+import type { TaskGetParameters } from '@/schema/opsflow/task/api-verbs/get';
+import type { TaskListParameters } from '@/schema/opsflow/task/api-verbs/list';
+import type { TaskUpdateParameters } from '@/schema/opsflow/task/api-verbs/update';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+interface UseTaskTypeStoreState {
+    itemsByTaskId: Record<string, TaskModel|undefined>;
+}
+
+export const useTaskStore = defineStore('task', () => {
+    const state = reactive<UseTaskTypeStoreState>({
+        itemsByTaskId: {},
+    });
+
+    const fetchList = getCancellableFetcher<TaskListParameters, ListResponse<TaskModel>>(SpaceConnector.clientV2.opsflow.task.list);
+    const actions = {
+        /*
+         * @return {TaskModel[]|undefined} It returns undefined if the request is canceled.
+         */
+        async list(params: TaskListParameters = {}): Promise<TaskModel[]|undefined> {
+            const result = await fetchList(params);
+            if (result.status === 'succeed') {
+                return result.response.results ?? [];
+            }
+            return undefined;
+        },
+        async create(params: TaskCreateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.task.create<TaskCreateParameters, TaskModel>(params);
+            const taskId = response.task_id;
+            state.itemsByTaskId = { ...state.itemsByTaskId, [taskId]: response };
+            return response;
+        },
+        async update(params: TaskUpdateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.task.update<TaskUpdateParameters, TaskModel>(params);
+            const taskId = response.task_id;
+            state.itemsByTaskId = { ...state.itemsByTaskId, [taskId]: response };
+            return response;
+        },
+        async get(taskId: string) {
+            const response = await SpaceConnector.clientV2.opsflow.task.get<TaskGetParameters, TaskModel>({
+                task_id: taskId,
+            });
+            state.itemsByTaskId = { ...state.itemsByTaskId, [taskId]: response };
+            return response;
+        },
+        async delete(taskId: string) {
+            await SpaceConnector.clientV2.opsflow.task.delete<TaskDeleteParameters, TaskModel>({
+                task_id: taskId,
+            });
+            delete state.itemsByTaskId[taskId];
+        },
+        async changeStatus(taskId: string, statusId: string) {
+            const response = await SpaceConnector.clientV2.opsflow.task.changeStatus<TaskChangeStatusParameters, TaskModel>({
+                task_id: taskId,
+                status_id: statusId,
+            });
+            state.itemsByTaskId = { ...state.itemsByTaskId, [taskId]: response };
+            return response;
+        },
+        async changeAssignee(taskId: string, assignee: string) {
+            const response = await SpaceConnector.clientV2.opsflow.task.changeAssignee<TaskChangeAssigneeParameters, TaskModel>({
+                task_id: taskId,
+                assignee,
+            });
+            state.itemsByTaskId = { ...state.itemsByTaskId, [taskId]: response };
+            return response;
+        },
+        reset() {
+            state.itemsByTaskId = {};
+        },
+    };
+
+    const disposeSelf = () => {
+        const store = useTaskStore();
+        store.reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch(() => appContextStore.getters.globalGrantLoading, (globalGrantLoading) => {
+        if (globalGrantLoading) disposeSelf();
+    });
+    return {
+        state,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/task-type-store.ts b/apps/web/src/services/ops-flow/stores/task-type-store.ts
new file mode 100644
index 0000000000..f5643d9064
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-type-store.ts
@@ -0,0 +1,200 @@
+import { computed, reactive, watch } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { TaskTypeCreateParameters } from '@/schema/opsflow/task-type/api-verbs/create';
+import type { TaskTypeDeleteParameters } from '@/schema/opsflow/task-type/api-verbs/delete';
+import type { TaskTypeGetParameters } from '@/schema/opsflow/task-type/api-verbs/get';
+import type { TaskTypeListParameters } from '@/schema/opsflow/task-type/api-verbs/list';
+import type { TaskTypeUpdateParameters } from '@/schema/opsflow/task-type/api-verbs/update';
+import type { TaskTypeUpdateFieldsParameters } from '@/schema/opsflow/task-type/api-verbs/update-fields';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+interface UseTaskTypeStoreState {
+    loading: boolean;
+    itemsByCategoryId: Record<string, TaskTypeModel[]|undefined>;
+    fullFieldsItemMap: Record<string, TaskTypeModel|undefined>;
+}
+
+export const useTaskTypeStore = defineStore('task-type', () => {
+    const state = reactive<UseTaskTypeStoreState>({
+        loading: false,
+        itemsByCategoryId: {},
+        fullFieldsItemMap: {},
+    });
+
+    const getters = {
+        loading: computed(() => state.loading),
+    };
+
+    const fetchList = getCancellableFetcher<TaskTypeListParameters, ListResponse<TaskTypeModel>>(SpaceConnector.clientV2.opsflow.taskType.list);
+    const fetchGet = getCancellableFetcher<TaskTypeGetParameters, TaskTypeModel>(SpaceConnector.clientV2.opsflow.taskType.get);
+    const actions = {
+        async list(params: TaskTypeListParameters): Promise<TaskTypeModel[]|undefined> {
+            try {
+                state.loading = true;
+                const result = await fetchList(params);
+                if (result.status === 'succeed') {
+                    state.loading = false;
+                    return result.response.results ?? [];
+                }
+                return undefined;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loading = false;
+                return undefined;
+            }
+        },
+        async listByCategoryIds(categoryIds: string[]): Promise<Record<string, TaskTypeModel[]>> {
+            const _categoryIds = categoryIds.filter((categoryId) => !state.itemsByCategoryId[categoryId]);
+            if (_categoryIds.length === 0) {
+                return state.itemsByCategoryId as Record<string, TaskTypeModel[]>;
+            }
+
+            try {
+                state.loading = true;
+                const result = await fetchList({ query: { filter: [{ k: 'category_id', v: _categoryIds, o: 'in' }] } });
+                if (result.status === 'succeed') {
+                    _categoryIds.forEach((categoryId) => {
+                        state.itemsByCategoryId[categoryId] ??= result.response.results?.filter((item) => item.category_id === categoryId) ?? [];
+                    });
+                    state.itemsByCategoryId = { ...state.itemsByCategoryId }; // trigger reactivity
+                    state.loading = false;
+                }
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loading = false;
+            }
+            return state.itemsByCategoryId as Record<string, TaskTypeModel[]>;
+        },
+        async listByCategoryId(categoryId: string, force?: boolean): Promise<TaskTypeModel[]|undefined> {
+            if (state.itemsByCategoryId[categoryId] && !force) {
+                return state.itemsByCategoryId[categoryId] as TaskTypeModel[];
+            }
+
+            try {
+                state.loading = true;
+                const result = await fetchList({ query: { filter: [{ k: 'category_id', v: categoryId, o: 'eq' }] } });
+                if (result.status === 'succeed') {
+                    state.itemsByCategoryId = { ...state.itemsByCategoryId, [categoryId]: result.response.results ?? [] };
+                    state.loading = false;
+                    return result.response.results ?? [];
+                }
+                return undefined;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loading = false;
+                return state.itemsByCategoryId[categoryId];
+            }
+        },
+        async create(params: TaskTypeCreateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.create<TaskTypeCreateParameters, TaskTypeModel>(params);
+            const categoryId = response.category_id;
+            if (state.itemsByCategoryId[categoryId]) {
+                state.itemsByCategoryId = {
+                    ...state.itemsByCategoryId,
+                    [categoryId]: [...state.itemsByCategoryId[categoryId] as TaskTypeModel[], response],
+                };
+            } else {
+                state.itemsByCategoryId = {
+                    ...state.itemsByCategoryId,
+                    [categoryId]: [response],
+                };
+            }
+            return response;
+        },
+        async update(params: TaskTypeUpdateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.update<TaskTypeUpdateParameters, TaskTypeModel>(params);
+            const categoryId = response.category_id;
+            if (state.itemsByCategoryId[categoryId]) {
+                const idx = state.itemsByCategoryId[categoryId]?.findIndex((c) => c.task_type_id === response.task_type_id) ?? -1;
+                if (idx !== -1) {
+                    state.itemsByCategoryId[categoryId]?.splice(idx, 1, response);
+                    state.itemsByCategoryId = { ...state.itemsByCategoryId };
+                }
+            }
+            return response;
+        },
+        async updateFields(params: TaskTypeUpdateFieldsParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.updateFields<TaskTypeUpdateFieldsParameters, TaskTypeModel>(params);
+            const categoryId = response.category_id;
+            if (state.itemsByCategoryId[categoryId]) {
+                const idx = state.itemsByCategoryId[categoryId]?.findIndex((c) => c.task_type_id === response.task_type_id) ?? -1;
+                if (idx !== -1) {
+                    state.itemsByCategoryId[categoryId]?.splice(idx, 1, response);
+                    state.itemsByCategoryId = { ...state.itemsByCategoryId };
+                }
+            }
+            return response;
+        },
+        async getWithFullFields(taskTypeId: string, force?: boolean): Promise<TaskTypeModel|undefined> {
+            if (state.fullFieldsItemMap[taskTypeId] && !force) {
+                return state.fullFieldsItemMap[taskTypeId];
+            }
+            try {
+                const result = await fetchGet({
+                    task_type_id: taskTypeId,
+                    include_category_fields: true,
+                });
+                if (result.status === 'succeed') {
+                    state.fullFieldsItemMap = {
+                        ...state.fullFieldsItemMap,
+                        [taskTypeId]: result.response,
+                    };
+                }
+                return result.response;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                return undefined;
+            }
+        },
+        async delete(taskTypeId: string, categoryId?: string) {
+            await SpaceConnector.clientV2.opsflow.taskType.delete<TaskTypeDeleteParameters, TaskTypeModel>({
+                task_type_id: taskTypeId,
+            });
+            if (categoryId) {
+                state.itemsByCategoryId = {
+                    ...state.itemsByCategoryId,
+                    [categoryId]: state.itemsByCategoryId[categoryId]?.filter((item) => item.task_type_id !== taskTypeId),
+                };
+            } else {
+                const deleted = Object.values(state.itemsByCategoryId).find((items) => items?.find((item) => item.task_type_id === taskTypeId));
+                const _categoryId = deleted?.[0]?.category_id;
+                if (_categoryId) {
+                    state.itemsByCategoryId = {
+                        ...state.itemsByCategoryId,
+                        [_categoryId]: state.itemsByCategoryId[_categoryId]?.filter((item) => item.task_type_id !== taskTypeId),
+                    };
+                }
+            }
+        },
+        reset() {
+            state.loading = false;
+            state.itemsByCategoryId = {};
+            state.fullFieldsItemMap = {};
+        },
+    };
+
+    const disposeSelf = () => {
+        const store = useTaskTypeStore();
+        store.reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch(() => appContextStore.getters.globalGrantLoading, (globalGrantLoading) => {
+        if (globalGrantLoading) disposeSelf();
+    });
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
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
new file mode 100644
index 0000000000..0d5eaa4841
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import {
+    defineAsyncComponent, computed, onBeforeMount, ref, watch,
+} from 'vue';
+
+import { isEqual } from 'lodash';
+
+import {
+    PFieldGroup, PTextInput, PToggleButton, PCheckbox,
+} from '@cloudforet/mirinae';
+
+import type {
+    TaskField,
+    TaskFieldOptions,
+    TaskFieldType,
+} from '@/schema/opsflow/_types/task-field-type';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import {
+    DEFAULT_FIELD_ID_MAP,
+    MULTI_SELECTION_FIELD_TYPES,
+} from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+import {
+    useTaskFieldMetadataStore,
+} from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
+import TaskFieldGeneratorHeader from '@/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue';
+import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+const COMPONENT_MAP: Partial<Record<TaskFieldType, ReturnType<typeof defineAsyncComponent>>> = {
+    DROPDOWN: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/options-generator-templates/DropdownOptionsGenerator.vue')),
+    PARAGRAPH: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue')),
+};
+
+const props = defineProps<{
+    field: TaskField;
+}>();
+const emit = defineEmits<{(event: 'delete'): void;
+    (event: 'update:field', value: TaskField): void;
+    (event: 'update:is-valid', value: boolean): void;
+}>();
+
+const taskFieldMetadataStore = useTaskFieldMetadataStore();
+const taskFieldMetadataStoreGetters = taskFieldMetadataStore.getters;
+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 {
+    value: name, setValue: setName, resetValidation: resetNameValidation, isInvalid: isNameInvalid, validationResult: isNameValid,
+} = useFieldValidator<string|undefined>('', (val?: string) => (val ? val.trim().length > 0 : false));
+const options = ref<TaskFieldOptions>({});
+const isOptionsValid = ref<boolean>(false);
+const isRequired = ref<boolean>(false);
+const isPrimary = ref<boolean>(false);
+const isFolded = ref<boolean>(false);
+const isAllValid = computed<boolean>(() => isNameValid.value && (optionsComponent.value ? isOptionsValid.value : true));
+
+const field = computed<TaskField>(() => {
+    const result: TaskField = {
+        ...props.field,
+        name: name.value,
+        options: options.value,
+        is_required: isRequired.value,
+        is_primary: isPrimary.value,
+    };
+    if (!result.selection_type && MULTI_SELECTION_FIELD_TYPES.includes(props.field.field_type)) {
+        result.selection_type = 'MULTI';
+    }
+    return result;
+});
+const handleRequiredChange = (value: boolean) => {
+    isRequired.value = value;
+    if (value) isPrimary.value = true;
+};
+
+watch(field, (newField) => {
+    if (isEqual(newField, props.field)) return;
+    emit('update:field', newField);
+});
+watch(isAllValid, (isValid) => {
+    emit('update:is-valid', isValid);
+}, { immediate: true });
+
+onBeforeMount(() => {
+    setName(props.field.name ?? fieldMetadata.value.name);
+    resetNameValidation();
+    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);
+    isFolded.value = isDefaultField.value;
+});
+</script>
+
+<template>
+    <div class="bg-white border border-gray-150 rounded-lg">
+        <task-field-generator-header :field-metadata="fieldMetadata"
+                                     :name="name"
+                                     :is-required="isRequired"
+                                     :is-deletable="DEFAULT_FIELD_ID_MAP[props.field.field_type] === undefined"
+                                     :is-folded="isFolded"
+                                     :is-default-field="isDefaultField"
+                                     @update:is-folded="isFolded = $event"
+                                     @delete="emit('delete')"
+        />
+        <div v-if="!isFolded">
+            <div class="py-4 pl-8 pr-2 border-b border-gray-150">
+                <p-field-group :label="$t('OPSFLOW.FIELD_GENERATOR.FIELD_NAME')"
+                               :invalid="isNameInvalid"
+                               required
+                >
+                    <p-text-input :value="name"
+                                  :placeholder="props.field.name || fieldMetadata.name"
+                                  :invalid="isNameInvalid"
+                                  @update:value="setName($event)"
+                    />
+                </p-field-group>
+                <component :is="optionsComponent"
+                           :options="options"
+                           @update:options="options = $event"
+                           @update:is-valid="isOptionsValid = $event"
+                />
+                <p-field-group :label="$t('OPSFLOW.FIELD_GENERATOR.SHOW_TASK_CREATION', {task: taskManagementTemplateStore.templates.Task })"
+                               required
+                               class="mt-4"
+                >
+                    <p class="text-paragraph-sm mb-2">
+                        {{ $t('OPSFLOW.FIELD_GENERATOR.SHOW_TASK_CREATION_DESC') }}
+                    </p>
+                    <!-- HACK: key is used to force re-render when isRequired changes. This is temporary solution. -->
+                    <p-toggle-button :key="String(isRequired)"
+                                     :value.sync="isPrimary"
+                                     :disabled="isRequired || isDefaultField"
+                                     show-state-text
+                                     position="left"
+                    />
+                </p-field-group>
+            </div>
+            <div class="h-9 pl-8 flex items-center">
+                <p-checkbox :selected="isRequired"
+                            :value="true"
+                            :disabled="isDefaultField"
+                            @change="handleRequiredChange"
+                >
+                    {{ $t('OPSFLOW.FIELD_GENERATOR.FIELD_REQUIRED') }}
+                </p-checkbox>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue
new file mode 100644
index 0000000000..68ed92d17c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+
+import { PI, PBadge, PIconButton } from '@cloudforet/mirinae';
+
+
+import TaskFieldTypeIcon from '@/services/ops-flow/task-fields-configuration/components/TaskFieldTypeIcon.vue';
+import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+
+const props = defineProps<{
+    fieldMetadata: TaskFieldTypeMetadata;
+    name: string;
+    isRequired: boolean;
+    isDeletable: boolean;
+    isFolded: boolean;
+    isDefaultField: boolean;
+}>();
+const emit = defineEmits<{(event: 'update:is-folded', value: boolean): void
+    (event: 'delete'): void
+}>();
+
+
+</script>
+
+<template>
+    <div class="p-2 rounded-t-lg border-gray-150 flex items-center"
+         :class="props.isFolded ? 'rounded-b-lg border-b-0' : 'border-b'"
+    >
+        <p-i :name="props.isFolded ? 'ic_chevron-right' : 'ic_chevron-down'"
+             class="flex-shrink-0 cursor-pointer mr-1"
+             @click="emit('update:is-folded', !props.isFolded)"
+        />
+        <task-field-type-icon class="flex-shrink-0"
+                              :icon="fieldMetadata.icon"
+        />
+        <span class="flex-grow text-label-md pl-2">{{ props.name || fieldMetadata.name }}</span>
+        <p-badge v-if="props.isRequired"
+                 class="flex-shrink-0"
+                 badge-type="subtle"
+                 style-type="gray100"
+        >
+            {{ $t('OPSFLOW.FIELD_GENERATOR.REQUIRED') }}
+        </p-badge>
+        <p-icon-button v-if="!isDefaultField"
+                       shape="square"
+                       size="sm"
+                       style-type="transparent"
+                       name="ic_delete"
+                       class="ml-1"
+                       @click="emit('delete')"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue
new file mode 100644
index 0000000000..c7ea536063
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import draggable from 'vuedraggable';
+
+import { PI } from '@cloudforet/mirinae';
+
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import TaskFieldDeleteModal from '@/services/ops-flow/components/TaskFieldDeleteModal.vue';
+import AddTaskFieldButton from '@/services/ops-flow/task-fields-configuration/components/AddTaskFieldButton.vue';
+import { useTaskFieldMetadataStore } from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
+import TaskFieldGenerator from '@/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue';
+import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+
+const props = defineProps<{
+    fields: TaskField[];
+    originFields?: TaskField[];
+}>();
+const emit = defineEmits<{(event: 'update:fields', value: TaskField[]): void;
+    (event: 'add-field', field: TaskFieldTypeMetadata): void;
+    (event: 'remove-field', fieldId: string, index: number): void;
+    (event: 'update-field-validation', fieldId: string, isValid: boolean): void}>();
+
+const taskFieldMetadataStore = useTaskFieldMetadataStore();
+const taskFieldMetadataStoreGetters = taskFieldMetadataStore.getters;
+
+const draggableFields = computed<TaskField[]>({
+    get() {
+        return props.fields;
+    },
+    set(value: TaskField[]) {
+        emit('update:fields', value);
+    },
+});
+
+const visibleFieldDeleteModal = ref<boolean>(false);
+const fieldDeleteTarget = ref<{ field: TaskField, index: number } | undefined>();
+const handleFieldDelete = (field: TaskField, idx: number) => {
+    if (!props.originFields) { // if it is creation mode
+        emit('remove-field', field.field_id, idx);
+        return;
+    }
+    if (!props.originFields.find((f) => f.field_id === field.field_id)) { // if it is newly added field
+        emit('remove-field', field.field_id, idx);
+        return;
+    }
+    fieldDeleteTarget.value = { field, index: idx };
+    visibleFieldDeleteModal.value = true;
+};
+const handleFieldDeleteConfirm = () => {
+    if (!fieldDeleteTarget.value) {
+        ErrorHandler.handleError(new Error('Field delete target is not set'));
+        visibleFieldDeleteModal.value = false;
+        return;
+    }
+    visibleFieldDeleteModal.value = false;
+    emit('remove-field', fieldDeleteTarget.value.field.field_id, fieldDeleteTarget.value.index);
+    fieldDeleteTarget.value = undefined;
+};
+
+</script>
+
+<template>
+    <div>
+        <div class="grid grid-cols-12 rounded-lg border border-gray-200">
+            <div class="col-span-8 p-4 pl-2 rounded-l-lg bg-gray-100 border-r border-gray-200">
+                <div class="flex flex-col gap-2">
+                    <task-field-generator v-for="field in taskFieldMetadataStoreGetters.defaultFields"
+                                          :key="field.field_id"
+                                          :field="field"
+                    />
+                </div>
+                <div class="border-t border-gray-200 mt-4 pt-4">
+                    <draggable v-model="draggableFields"
+                               draggable=".draggable-generator"
+                               handle=".drag-handle"
+                               ghost-class="ghost"
+                               class="flex flex-col gap-2"
+                    >
+                        <div v-for="(field, idx) in draggableFields"
+                             :key="field.field_id"
+                             class="draggable-generator flex"
+                        >
+                            <span class="drag-handle flex-shrink-0 inline-flex items-center justify-center h-9 pr-2">
+                                <p-i name="ic_drag-handle"
+                                     width="1rem"
+                                     height="1rem"
+                                />
+                            </span>
+                            <task-field-generator class="flex-grow"
+                                                  :field="field"
+                                                  @delete="handleFieldDelete(field, idx)"
+                                                  @update:field="draggableFields[idx] = $event"
+                                                  @update:is-valid="emit('update-field-validation', field.field_id, $event)"
+                            />
+                        </div>
+                    </draggable>
+                </div>
+            </div>
+            <div class="col-span-4 right p-4 rounded-r-lg flex flex-col gap-2">
+                <add-task-field-button v-for="field in taskFieldMetadataStoreGetters.taskFieldTypeMetadataList"
+                                       :key="field.type"
+                                       :icon="field.icon"
+                                       :name="field.name"
+                                       @click="emit('add-field', field)"
+                />
+            </div>
+        </div>
+        <task-field-delete-modal :visible="visibleFieldDeleteModal"
+                                 @update:visible="visibleFieldDeleteModal = $event"
+                                 @confirm="handleFieldDeleteConfirm"
+        />
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.drag-handle {
+    cursor: grab;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/components/AddTaskFieldButton.vue b/apps/web/src/services/ops-flow/task-fields-configuration/components/AddTaskFieldButton.vue
new file mode 100644
index 0000000000..7c05fb6c90
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/components/AddTaskFieldButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { PI } from '@cloudforet/mirinae';
+
+import TaskFieldTypeIcon from '@/services/ops-flow/task-fields-configuration/components/TaskFieldTypeIcon.vue';
+
+const props = defineProps<{
+    icon: string;
+    name: string;
+}>();
+const emit = defineEmits<{(event: 'click'): void
+}>();
+</script>
+
+<template>
+    <button class="border border-gray-200 rounded-xl p-2 flex items-center gap-2"
+            @click="emit('click')"
+    >
+        <task-field-type-icon :icon="props.icon" />
+        <span class="flex-grow text-label-md text-left">{{ props.name }}</span>
+        <p-i name="ic_plus"
+             height="1rem"
+             width="1rem"
+        />
+    </button>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/components/DropdownTaskFieldEnumForm.vue b/apps/web/src/services/ops-flow/task-fields-configuration/components/DropdownTaskFieldEnumForm.vue
new file mode 100644
index 0000000000..d3ea8c5419
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/components/DropdownTaskFieldEnumForm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { watch, onBeforeMount } from 'vue';
+
+import {
+    PTextInput,
+} from '@cloudforet/mirinae';
+
+import { useFormValidator } from '@/common/composables/form-validator';
+
+const props = defineProps<{
+    name: string;
+    value: string;
+    index: number;
+    values: string[];
+}>();
+const emit = defineEmits<{(event: 'update:name', value: string): void;
+    (event: 'update:value', value: string): void;
+    (event: 'update:is-valid', value: boolean): void;
+}>();
+
+const {
+    forms: { name, value },
+    setForm, resetValidations,
+    invalidState, isAllValid,
+} = useFormValidator({
+    name: '',
+    value: '',
+}, {
+    name(val: string) {
+        return val.trim().length > 0;
+    },
+    value(val: string) {
+        if (val.trim().length === 0) return false;
+        return !props.values.some((v, i) => v === val && props.index !== i);
+    },
+});
+
+const handleUpdateName = (val: string) => {
+    setForm('name', val);
+    emit('update:name', val);
+};
+const handleUpdateValue = (val: string) => {
+    setForm('value', val);
+    emit('update:value', val);
+};
+
+watch(isAllValid, (isValid) => {
+    emit('update:is-valid', isValid);
+}, { immediate: true });
+
+onBeforeMount(() => {
+    setForm({
+        name: props.name,
+        value: props.value,
+    });
+    resetValidations();
+});
+
+</script>
+
+<template>
+    <div class="w-full flex items-center">
+        <p-text-input class="flex-grow"
+                      :value="name"
+                      :invalid="invalidState.name"
+                      :placeholder="$t('OPSFLOW.NAME')"
+                      block
+                      @update:value="handleUpdateName"
+        />
+        <span class="flex-grow-0 text-gray-300">&nbsp;:&nbsp;</span>
+        <p-text-input class="flex-grow"
+                      :value="value"
+                      :invalid="invalidState.value"
+                      :placeholder="$t('OPSFLOW.KEY')"
+                      block
+                      @update:value="handleUpdateValue"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/components/TaskFieldTypeIcon.vue b/apps/web/src/services/ops-flow/task-fields-configuration/components/TaskFieldTypeIcon.vue
new file mode 100644
index 0000000000..255cbefd30
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/components/TaskFieldTypeIcon.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PI } from '@cloudforet/mirinae';
+
+const props = defineProps<{
+    icon: string;
+}>();
+</script>
+
+<template>
+    <span class="inline-flex items-center justify-center w-5 h-5 bg-gray-150 rounded-md">
+        <p-i :name="props.icon"
+             height="1rem"
+             width="1rem"
+        />
+    </span>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-field-generator.ts b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-field-generator.ts
new file mode 100644
index 0000000000..4b2d780e67
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-field-generator.ts
@@ -0,0 +1,40 @@
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+
+import type { TaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+
+import { useFieldValidator, useFormValidator } from '@/common/composables/form-validator';
+
+import { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+
+export const useTaskFieldGenerator = ({
+    fieldId,
+}: {
+    fieldId: Ref<string>
+}) => {
+    const isDefaultField = computed(() => !!DEFAULT_FIELD_ID_MAP[fieldId.value]);
+    const fieldNameValidator = useFieldValidator<string|undefined>('', (val?: string) => (val ? val.trim().length > 0 : false));
+    const options = ref<TaskFieldOptions>({});
+    const isOptionsValid = ref<boolean>(true);
+    const isRequired = ref<boolean>(false);
+    const isPrimary = ref<boolean>(false);
+    const isFolded = ref<boolean>(false);
+
+    const formValidator = useFormValidator({
+        name: fieldNameValidator,
+    });
+
+    return {
+        isDefaultField,
+        fieldName: fieldNameValidator.value,
+        setFieldName: fieldNameValidator.setValue,
+        isFieldNameInvalid: fieldNameValidator.isInvalid,
+        resetFieldNameValidation: fieldNameValidator.resetValidation,
+        options,
+        isOptionsValid,
+        isRequired,
+        isPrimary,
+        isFolded,
+        isAllValid: formValidator.isAllValid,
+    };
+};
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
new file mode 100644
index 0000000000..c945fe0f8b
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
@@ -0,0 +1,68 @@
+import type { TaskField, TaskFieldSelectionType, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import getRandomId from '@/lib/random-id-generator';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import type {
+    TaskFieldTypeMetadata,
+} from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+
+const DEFAULT_SELECTION_TYPE_MAP: Record<TaskFieldType, TaskFieldSelectionType|undefined> = {
+    GLOBAL: undefined,
+    TEXT: undefined,
+    PARAGRAPH: undefined,
+    LABELS: 'MULTI',
+    DROPDOWN: 'MULTI',
+    DATE: undefined,
+    USER: 'MULTI',
+    ASSET: 'MULTI',
+    PROJECT: 'MULTI',
+    PROVIDER: 'MULTI',
+    SERVICE_ACCOUNT: 'MULTI',
+};
+export const useTaskFieldsConfiguration = () => {
+    const validationMap = new Map<string, boolean>();
+
+    const taskFieldsValidator = useFieldValidator<TaskField[]>([], (_fields) => _fields.every((field) => validationMap.get(field.field_id)));
+    const {
+        value: fields,
+        setValue: setFields,
+        validate: validateFields,
+    } = taskFieldsValidator;
+
+    return {
+        taskFieldsValidator,
+        fields,
+        setFields,
+        addField(field: TaskFieldTypeMetadata) {
+            const fieldId = getRandomId();
+            validationMap.set(fieldId, false);
+            setFields([...fields.value, {
+                field_id: fieldId,
+                field_type: field.type,
+                name: field.name,
+                is_required: false,
+                selection_type: DEFAULT_SELECTION_TYPE_MAP[field.type],
+                is_primary: false,
+                options: {},
+            } as TaskField]);
+        },
+        removeField(fieldId: string) {
+            validationMap.delete(fieldId);
+            setFields(fields.value.filter((field) => field.field_id !== fieldId));
+        },
+        updateFieldValidation(fieldId: string, isValid: boolean) {
+            validationMap.set(fieldId, isValid);
+            // manually trigger validation to update invalid state
+            validateFields();
+        },
+        setInitialFields(initialFields?: TaskField[]) {
+            validationMap.clear();
+            initialFields?.forEach((field) => {
+                validationMap.set(field.field_id, true);
+            });
+            setFields(initialFields ?? []);
+        },
+    };
+};
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts b/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts
new file mode 100644
index 0000000000..16e81e9961
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts
@@ -0,0 +1,13 @@
+export const DEFAULT_FIELD_ID_MAP = {
+    title: 'title',
+    description: 'description',
+    project: 'project',
+} as const;
+export const MULTI_SELECTION_FIELD_TYPES = [
+    'DROPDOWN',
+    'USER',
+    'ASSET',
+    'PROJECT',
+    'PROVIDER',
+    'SERVICE_ACCOUNT',
+];
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/DropdownOptionsGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/DropdownOptionsGenerator.vue
new file mode 100644
index 0000000000..b6fb816409
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/DropdownOptionsGenerator.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import {
+    ref, computed, watch, onBeforeMount, withDefaults,
+} from 'vue';
+import draggable from 'vuedraggable';
+
+import {
+    PFieldTitle, PButton, PIconButton, PI,
+} from '@cloudforet/mirinae';
+
+import type { DropdownTaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+
+import getRandomId from '@/lib/random-id-generator';
+
+import DropdownTaskFieldEnumForm
+    from '@/services/ops-flow/task-fields-configuration/components/DropdownTaskFieldEnumForm.vue';
+import type {
+    ControllableTaskFieldEnum,
+} from '@/services/ops-flow/task-fields-configuration/types/task-field-dropdown-enum-type';
+
+const props = withDefaults(defineProps<{
+    options: DropdownTaskFieldOptions;
+}>(), {
+    options: () => ({
+        enums: [],
+    }),
+});
+const emit = defineEmits<{(event: 'update:options', value: DropdownTaskFieldOptions): void;
+    (event: 'update:is-valid', value: boolean): void;
+}>();
+
+const enums = ref<ControllableTaskFieldEnum[]>([]);
+const updateEnum = (index: number, key: 'key' | 'name', value: string) => {
+    enums.value[index][key] = value;
+    // remove _id from the enum object
+    emit('update:options', {
+        enums: enums.value.map((e) => ({
+            key: e.key,
+            name: e.name,
+        })),
+    });
+};
+
+
+const allKeys = computed<string[]>(() => enums.value.map((item) => item.key));
+const isDeletable = computed<boolean>(() => enums.value.length > 1);
+
+const validationMap = ref<{ [itemId: string]: boolean }>({});
+const isAllValid = computed<boolean>(() => enums.value.every((item) => validationMap.value[item._id]));
+watch(isAllValid, (isValid) => {
+    emit('update:is-valid', isValid);
+}, { immediate: true });
+
+const handleAdd = () => {
+    const newId = getRandomId();
+    enums.value.push({ _id: newId, key: '', name: '' });
+    validationMap.value = { ...validationMap.value, [newId]: false };
+};
+const handleDelete = (index: number) => {
+    const itemId = enums.value[index]._id;
+    enums.value.splice(index, 1);
+    delete validationMap.value[itemId];
+};
+
+onBeforeMount(() => {
+    if (!props.options.enums || !props.options.enums.length) {
+        enums.value = [{ _id: getRandomId(), key: '', name: '' }];
+    } else {
+        enums.value = props.options.enums;
+    }
+    const newValidationMap: { [itemId: string]: boolean } = {};
+    enums.value.forEach((item) => {
+        newValidationMap[item._id] = false;
+    });
+    validationMap.value = newValidationMap;
+});
+</script>
+
+<template>
+    <div>
+        <p-field-title :label="$t('OPSFLOW.FIELD_GENERATOR.VALUE')" />
+        <draggable v-model="enums"
+                   draggable=".draggable-item"
+                   handle=".drag-handle"
+                   ghost-class="ghost"
+                   class="mt-2 flex flex-col gap-1 px-1 py-2 rounded-md border border-gray-200"
+        >
+            <div v-for="(item, idx) in enums"
+                 :key="item._id"
+                 class="draggable-item py-1 flex items-center"
+            >
+                <span class="drag-handle flex-shrink-0 inline-flex items-center justify-center pr-2">
+                    <p-i name="ic_drag-handle"
+                         width="1rem"
+                         height="1rem"
+                    />
+                </span>
+                <dropdown-task-field-enum-form :name="item.name"
+                                               :value="item.key"
+                                               :index="idx"
+                                               :values="allKeys"
+                                               @update:name="updateEnum(idx, 'name', $event)"
+                                               @update:value="updateEnum(idx, 'key', $event)"
+                                               @update:is-valid="validationMap[item._id] = $event"
+                />
+                <p-icon-button shape="square"
+                               size="sm"
+                               style-type="transparent"
+                               name="ic_delete"
+                               :disabled="!isDeletable"
+                               @click="handleDelete(idx)"
+                />
+            </div>
+        </draggable>
+        <p-button style-type="secondary"
+                  icon-left="ic_plus_bold"
+                  class="mt-2"
+                  @click="handleAdd"
+        >
+            {{ $t('OPSFLOW.ADD_TARGET', { target: $t('OPSFLOW.FIELD_GENERATOR.VALUE') }) }}
+        </p-button>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.drag-handle {
+    cursor: grab;
+}
+</style>
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
new file mode 100644
index 0000000000..e23002b27c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DropdownTaskFieldOptions, ParagraphTaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+
+import TextEditor from '@/common/components/editor/TextEditor.vue';
+
+const props = withDefaults(defineProps<{
+    options: ParagraphTaskFieldOptions;
+}>(), {
+    options: () => ({
+        example: '',
+    }),
+});
+const emit = defineEmits<{(event: 'update:options', value: DropdownTaskFieldOptions): void;
+    (event: 'update:is-valid', value: boolean): void;
+}>();
+emit('update:is-valid', true);
+
+</script>
+
+<template>
+    <div>
+        <text-editor :value="props.options.example"
+                     placeholder="Enter the default description to be displayed."
+                     @update:value="emit('update:options', { ...props.options, example: $event })"
+        />
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.text-editor {
+    min-height: 224px;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store.ts b/apps/web/src/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store.ts
new file mode 100644
index 0000000000..58b38b408e
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store.ts
@@ -0,0 +1,73 @@
+import { computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import { i18n } from '@/translations';
+
+import { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
+
+export const useTaskFieldMetadataStore = defineStore('task-field-metadata', () => {
+    const taskManagementTemplateStore = useTaskManagementTemplateStore();
+    const getters = {
+        taskFieldTypeMetadataMap: computed<Record<TaskFieldType, TaskFieldTypeMetadata>>(() => ({
+            GLOBAL: { type: 'GLOBAL', name: i18n.t('OPSFLOW.FIELD_GENERATOR.GLOBAL'), icon: 'ic_global' }, // not used yet
+            TEXT: { type: 'TEXT', name: i18n.t('OPSFLOW.FIELD_GENERATOR.TEXT'), icon: 'ic_short-text' },
+            PARAGRAPH: { type: 'PARAGRAPH', name: i18n.t('OPSFLOW.FIELD_GENERATOR.PARAGRAPH'), icon: 'ic_paragraph' },
+            LABELS: { type: 'LABELS', name: i18n.t('OPSFLOW.FIELD_GENERATOR.LABELS'), icon: 'ic_label' },
+            DROPDOWN: { type: 'DROPDOWN', name: i18n.t('OPSFLOW.FIELD_GENERATOR.DROPDOWN'), icon: 'ic_dropdown' },
+            DATE: { type: 'DATE', name: i18n.t('OPSFLOW.FIELD_GENERATOR.DATE'), icon: 'ic_calendar' },
+            USER: { type: 'USER', name: i18n.t('OPSFLOW.FIELD_GENERATOR.USER'), icon: 'ic_member' },
+            ASSET: { type: 'ASSET', name: i18n.t('OPSFLOW.FIELD_GENERATOR.ASSET'), icon: 'ic_service_asset-inventory' },
+            PROJECT: { type: 'PROJECT', name: i18n.t('OPSFLOW.FIELD_GENERATOR.PROJECT'), icon: 'ic_service_project' },
+            PROVIDER: { type: 'PROVIDER', name: i18n.t('OPSFLOW.FIELD_GENERATOR.PROVIDER'), icon: 'ic_service_provider' }, // not used yet
+            SERVICE_ACCOUNT: { type: 'SERVICE_ACCOUNT', name: i18n.t('OPSFLOW.FIELD_GENERATOR.SERVICE_ACCOUNT'), icon: 'ic_service_service-account' }, // not used yet
+        })),
+        taskFieldTypeMetadataList: computed<TaskFieldTypeMetadata[]>(() => [
+            getters.taskFieldTypeMetadataMap.TEXT,
+            getters.taskFieldTypeMetadataMap.PARAGRAPH,
+            getters.taskFieldTypeMetadataMap.LABELS,
+            getters.taskFieldTypeMetadataMap.DROPDOWN,
+            getters.taskFieldTypeMetadataMap.DATE,
+            getters.taskFieldTypeMetadataMap.ASSET,
+            getters.taskFieldTypeMetadataMap.PROJECT,
+        ]),
+        defaultFields: computed<TaskField[]>(() => [
+            {
+                field_id: DEFAULT_FIELD_ID_MAP.title,
+                name: i18n.t('OPSFLOW.TITLE'),
+                field_type: 'TEXT',
+                is_required: true,
+                is_primary: true,
+                options: {
+                    example: i18n.t('OPSFLOW.FIELD_GENERATOR.TASK_TITLE', { task: taskManagementTemplateStore.templates.Task }),
+                },
+            },
+            {
+                field_id: DEFAULT_FIELD_ID_MAP.project,
+                name: i18n.t('OPSFLOW.FIELD_GENERATOR.PROJECT'),
+                field_type: 'PROJECT',
+                is_required: true,
+                is_primary: true,
+            },
+            {
+                field_id: DEFAULT_FIELD_ID_MAP.description,
+                name: i18n.t('OPSFLOW.DESCRIPTION'),
+                field_type: 'PARAGRAPH',
+                is_required: false,
+                is_primary: true,
+                options: {
+                    example: i18n.t('OPSFLOW.FIELD_GENERATOR.TASK_DESCRIPTION', { task: taskManagementTemplateStore.templates.Task }),
+                },
+            },
+        ]),
+    };
+
+    return {
+        getters,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-dropdown-enum-type.ts b/apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-dropdown-enum-type.ts
new file mode 100644
index 0000000000..eb904ac0da
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-dropdown-enum-type.ts
@@ -0,0 +1,5 @@
+import type { TaskFieldEnum } from '@/schema/opsflow/_types/task-field-type';
+
+export interface ControllableTaskFieldEnum extends TaskFieldEnum {
+    _id: string;
+}
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type.ts b/apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type.ts
new file mode 100644
index 0000000000..a2d5f4583c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type.ts
@@ -0,0 +1,11 @@
+import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import type { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+
+export interface TaskFieldTypeMetadata {
+    type: TaskFieldType;
+    name: string;
+    icon: string;
+}
+
+export type DefaultTaskFieldId = typeof DEFAULT_FIELD_ID_MAP[keyof typeof DEFAULT_FIELD_ID_MAP];
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
new file mode 100644
index 0000000000..871508133f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {
+    defineAsyncComponent, onUnmounted,
+} from 'vue';
+
+import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+import {
+    useTaskFieldMetadataStore,
+} from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
+
+const COMPONENT_MAP: Partial<Record<TaskFieldType, ReturnType<typeof defineAsyncComponent>>> = {
+    TEXT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue')),
+    PARAGRAPH: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue')),
+    LABELS: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue')),
+    DROPDOWN: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue')),
+    DATE: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue')),
+    USER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue')),
+    PROJECT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue')),
+    // ASSET: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue')),
+    // PROVIDER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue')),
+    // SERVICE_ACCOUNT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue')),
+};
+const UnknownTaskField = defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue'));
+
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+const taskFieldMetadataStore = useTaskFieldMetadataStore();
+
+const isEditableFieldInViewMode = (fieldId: string) => fieldId === DEFAULT_FIELD_ID_MAP.title;
+onUnmounted(() => {
+    taskContentFormStore.resetFieldsForm();
+});
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <!-- Default Fields -->
+        <component :is="COMPONENT_MAP[field.field_type] ?? UnknownTaskField"
+                   v-for="field in taskFieldMetadataStore.getters.defaultFields"
+                   :key="field.field_id"
+                   :field="field"
+                   :value="taskContentFormState.defaultData[field.field_id]"
+                   :readonly="taskContentFormState.mode === 'view' ? !(taskContentFormGetters.isEditable && isEditableFieldInViewMode(field.field_id)) : false"
+                   :files="taskContentFormState.files"
+                   @update:value="taskContentFormStore.setDefaultFieldData(field.field_id, $event)"
+                   @update:files="taskContentFormStore.setFiles"
+                   @update:is-valid="taskContentFormStore.setDefaultFieldValidation(field.field_id, $event)"
+        />
+        <!-- Dynamic Fields -->
+        <component :is="COMPONENT_MAP[field.field_type] ?? UnknownTaskField"
+                   v-for="field in taskContentFormGetters.currentFields"
+                   :key="field.field_id"
+                   :field="field"
+                   :value="taskContentFormState.data[field.field_id]"
+                   :readonly="taskContentFormState.mode === 'view'"
+                   :files="taskContentFormState.files"
+                   @update:value="taskContentFormStore.setFieldData(field.field_id, $event)"
+                   @update:files="taskContentFormStore.setFiles"
+                   @update:is-valid="taskContentFormStore.setFieldValidation(field.field_id, $event)"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts b/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts
new file mode 100644
index 0000000000..72409248ce
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts
@@ -0,0 +1,105 @@
+import type { Ref, UnwrapRef } from 'vue';
+import { watch } from 'vue';
+
+import { isEqual } from 'lodash';
+
+import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import { i18n } from '@/translations';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { ValidatorFn } from '@/common/composables/form-validator';
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+type NotRef<T> = T extends Ref<any> ? never : T;
+const stringValidatorTypes: TaskFieldType[] = ['TEXT', 'PARAGRAPH', 'DATE'];
+const stringArrayValidatorTypes: TaskFieldType[] = ['LABELS', 'DROPDOWN', 'USER', 'PROJECT']; // , 'PROVIDER', 'SERVICE_ACCOUNT', 'ASSET'];
+export const useTaskFieldValidation = <TField extends TaskField, TValue>(
+    props: TaskFieldFormProps<TField, NotRef<TValue>>,
+    emit: TaskFieldFormEmits<TValue>,
+) => {
+    const stringValidator: ValidatorFn<TValue> = (val): string|boolean => {
+        if (val === undefined || val === null) {
+            if (props.field.is_required) {
+                return i18n.t('OPSFLOW.VALIDATION.FIELD_REQUIRED');
+            }
+            return true;
+        }
+        if (typeof val !== 'string') {
+            return i18n.t('OPSFLOW.VALIDATION.VALUE_STRING');
+        }
+        if (props.field.is_required && val.trim() === '') {
+            return i18n.t('OPSFLOW.VALIDATION.FIELD_REQUIRED');
+        }
+        return true;
+    };
+
+    const stringArrayValidator: ValidatorFn<TValue> = (val): string|boolean => {
+        if (val === undefined || val === null) {
+            if (props.field.is_required) {
+                return i18n.t('OPSFLOW.VALIDATION.FIELD_REQUIRED');
+            }
+            return true;
+        }
+        if (!Array.isArray(val)) {
+            return i18n.t('OPSFLOW.VALIDATION.VALUE_ARRAY');
+        }
+        // SINGLE case
+        if (!props.field.selection_type || props.field.selection_type === 'SINGLE') {
+            if (val.length > 1) {
+                return i18n.t('OPSFLOW.VALIDATION.VALUE_ONLY_ONE');
+            }
+            if (props.field.is_required && val.length === 0) {
+                return i18n.t('OPSFLOW.VALIDATION.FIELD_REQUIRED');
+            }
+            return true;
+        }
+        // MULTI case
+        if (props.field.is_required && val.length === 0) {
+            return i18n.t('OPSFLOW.VALIDATION.FIELD_REQUIRED');
+        }
+        return true;
+    };
+
+
+    const {
+        value: fieldValue,
+        setValue: setFieldValue,
+        invalidText, isInvalid, validationResult,
+    } = useFieldValidator<TValue>(props.value, (val) => {
+        if (stringValidatorTypes.includes(props.field.field_type)) {
+            return stringValidator(val);
+        }
+        if (stringArrayValidatorTypes.includes(props.field.field_type)) {
+            return stringArrayValidator(val);
+        }
+        ErrorHandler.handleError(new Error(`Unsupported field type: ${props.field.field_type}`));
+        return i18n.t('OPSFLOW.VALIDATION.UNSUPPORTED_FIELD_TYPE');
+    });
+
+    const updateFieldValue = (val: TValue) => {
+        setFieldValue(val as UnwrapRef<TValue>);
+        emit('update:value', val);
+    };
+
+    watch(() => props.value, (val) => {
+        if (isEqual(val, fieldValue)) return;
+        setFieldValue(val as UnwrapRef<TValue>);
+    });
+    watch(validationResult, (val: boolean) => {
+        emit('update:is-valid', val);
+    }, { immediate: true });
+
+    return {
+        fieldValue,
+        setFieldValue,
+        invalidText,
+        isInvalid,
+        isValid: validationResult,
+        updateFieldValue,
+    };
+};
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
new file mode 100644
index 0000000000..aa59174b55
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>AssetFieldForm</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue
new file mode 100644
index 0000000000..be8134a4ff
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    PFieldGroup, PDatetimePicker,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+
+const selectedDates = computed(() => (fieldValue.value ? [fieldValue.value] : []));
+const handleUpdate = (val: string[]) => {
+    updateFieldValue(val[0] ?? '');
+};
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly ||field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <p-datetime-picker class="my-1"
+                           :selected-dates="selectedDates"
+                           :invalid="isInvalid"
+                           :readonly="props.readonly"
+                           @update:selected-dates="handleUpdate"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue
new file mode 100644
index 0000000000..18d1a21692
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    PFieldGroup, PSelectDropdown, getTextHighlightRegex,
+} from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { DropdownTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<DropdownTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+
+interface DropdownItem extends SelectDropdownMenuItem {
+    label: string;
+}
+
+const allItems = computed<DropdownItem[]>(() => {
+    const enums = props.field.options?.enums;
+    if (!Array.isArray(enums)) return [];
+    return enums.map((item) => ({
+        name: item.key,
+        label: item.name,
+    }));
+});
+
+const selectedItems = computed<DropdownItem[]>(() => fieldValue.value?.map((item) => ({
+    name: item,
+    label: allItems.value.find((i) => i.name === item)?.label ?? item,
+})) ?? []);
+const dropdownItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+    const filteredItems = allItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label));
+    const _totalCount = pageStart - 1 + Number(pageLimit);
+    const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+    return {
+        results: _slicedResults,
+        more: _totalCount < filteredItems.length,
+    };
+};
+const handleUpdate = (val: DropdownItem[]) => {
+    updateFieldValue(val.map((item) => item.name));
+};
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly ||field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <p-select-dropdown class="my-1"
+                           show-select-marker
+                           :menu="allItems"
+                           :selected="selectedItems"
+                           :handler="dropdownItemsHandler"
+                           :readonly="props.readonly"
+                           appearance-type="stack"
+                           multi-selectable
+                           block
+                           @update:selected="handleUpdate"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue
new file mode 100644
index 0000000000..7109f01905
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import LabelsInput from '@/common/components/inputs/LabelsInput.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly || field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <labels-input class="my-1"
+                      :labels="fieldValue"
+                      :editable="!props.readonly"
+                      @update:labels="updateFieldValue"
+        />
+    </p-field-group>
+</template>
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
new file mode 100644
index 0000000000..2840ff1cce
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+
+import { isEqual } from 'lodash';
+
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { FileModel } from '@/schema/file-manager/model';
+import type { ParagraphTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import type { Attachment } from '@/common/components/editor/extensions/image/type';
+import TextEditor from '@/common/components/editor/TextEditor.vue';
+import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
+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';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+
+const props = withDefaults(defineProps<TaskFieldFormProps<ParagraphTaskField, string>>(), {
+    files: () => [],
+});
+
+const emit = defineEmits<TaskFieldFormEmits<string>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+
+const { fileUploader } = useFileUploader();
+const { attachments } = useFileAttachments(toRef(props, 'files'));
+const handleUpdateAttachments = (newAttachments: Attachment<FileModel>[]) => {
+    const originFileIds = props.files.map((f) => f.file_id);
+    const newFileIds = newAttachments.map((a) => a.fileId);
+    if (isEqual(originFileIds, newFileIds)) return;
+    const files = newAttachments.map((a) => a.data as FileModel);
+    emit('update:files', files);
+};
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly ||field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <text-editor-viewer v-if="props.readonly"
+                            class="my-1"
+                            :contents="fieldValue"
+                            :attachments="attachments"
+                            show-in-box
+        />
+        <text-editor v-else
+                     class="my-1"
+                     :value="fieldValue"
+                     :image-uploader="fileUploader"
+                     :attachments="attachments"
+                     :placeholder="props.field.options?.example"
+                     :invalid="isInvalid"
+                     @update:value="updateFieldValue"
+                     @update:attachments="handleUpdateAttachments"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue
new file mode 100644
index 0000000000..bc8c51c1cd
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly ||field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <project-select-dropdown class="my-1"
+                                 block
+                                 project-selectable
+                                 :project-group-selectable="false"
+                                 :selected-project-ids="fieldValue"
+                                 :readonly="props.readonly"
+                                 @update:selected-project-ids="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue
new file mode 100644
index 0000000000..7b3f9f170f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>ProviderFieldForm</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue
new file mode 100644
index 0000000000..636fc7d42b
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>ServiceAccountTaskFieldForm</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue
new file mode 100644
index 0000000000..9f20d91a8c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+    PFieldGroup, PTextInput,
+} from '@cloudforet/mirinae';
+
+import type { TextTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type { TaskFieldFormEmits, TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<TextTaskField, string>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly ||field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <p-text-input class="my-1"
+                      :value="fieldValue"
+                      :placeholder="props.field.options?.example"
+                      :invalid="isInvalid"
+                      :readonly="props.readonly"
+                      block
+                      @update:value="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue
new file mode 100644
index 0000000000..eeea9c42a7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<TaskField, any>>();
+
+
+</script>
+
+<template>
+    <p-field-group :label="props.field.name"
+                   :required="props.readonly ||props.field.is_required"
+                   :invalid="!props.readonly"
+                   :invalid-text="props.readonly ? undefined : `${props.field.field_type} is not supported`"
+                   :help-text="props.readonly ? `${props.field.field_type} is not supported` : undefined"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue
new file mode 100644
index 0000000000..f12bd8a3bc
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="props.readonly ||field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <user-select-dropdown class="my-1"
+                              :user-ids="fieldValue"
+                              selection-type="multiple"
+                              :invalid="isInvalid"
+                              :readonly="props.readonly"
+                              @update:user-ids="updateFieldValue"
+        />
+    </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
new file mode 100644
index 0000000000..1abd9830fb
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
@@ -0,0 +1,14 @@
+import type { FileModel } from '@/schema/file-manager/model';
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+export interface TaskFieldFormProps<TField extends TaskField, TValue> {
+  field: TField;
+  value: TValue;
+  readonly?: boolean;
+  files?: FileModel[];
+}
+export interface TaskFieldFormEmits<TValue> {
+  (event: 'update:value', value: TValue): void;
+  (event: 'update:files', value: string[]): void;
+  (event: 'update:is-valid', value: boolean): void;
+}
diff --git a/apps/web/src/services/ops-flow/task-management-templates/constants/task-management-template-constant.ts b/apps/web/src/services/ops-flow/task-management-templates/constants/task-management-template-constant.ts
new file mode 100644
index 0000000000..d05b3610b4
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/constants/task-management-template-constant.ts
@@ -0,0 +1 @@
+export const TASK_MANAGEMENT_TEMPLATE_TYPES = ['default', 'service-desk'] as const;
diff --git a/apps/web/src/services/ops-flow/task-management-templates/stores/use-task-management-template-store.ts b/apps/web/src/services/ops-flow/task-management-templates/stores/use-task-management-template-store.ts
new file mode 100644
index 0000000000..7eeae668be
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/stores/use-task-management-template-store.ts
@@ -0,0 +1,136 @@
+import type { Ref } from 'vue';
+import { reactive, toRef, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { i18n, type SupportLanguage } from '@/translations';
+
+import { useSharedConfigStore } from '@/store/domain/shared-config-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import type {
+    TaskManagementTemplateType,
+} from '@/services/ops-flow/task-management-templates/types/task-management-template-type';
+
+import en from '../translations/en.json';
+import ja from '../translations/ja.json';
+import ko from '../translations/ko.json';
+
+
+interface TaskManagementTemplate {
+    TemplateName: string;
+    Task: string;
+    TaskType: string;
+    TaskBoard: string;
+    TaskCategory: string;
+    taskTypes: string;
+    taskType: string;
+    task: string;
+    tasks: string;
+}
+const messages: Record<SupportLanguage, TaskManagementTemplate> = {
+    en: en as unknown as TaskManagementTemplate,
+    ja: ja as unknown as TaskManagementTemplate,
+    ko: ko as unknown as TaskManagementTemplate,
+};
+
+interface TemplateData {
+    template_id: TaskManagementTemplateType;
+}
+interface LandingData {
+    enabled: boolean;
+}
+interface UseTaskManagementTemplateStoreState {
+    templateId: TaskManagementTemplateType;
+    enableLanding: boolean;
+}
+export const useTaskManagementTemplateStore = defineStore('task-management-template', () => {
+    const sharedConfigStore = useSharedConfigStore();
+    const sharedConfigStoreGetters = sharedConfigStore.getters;
+
+    const templateData = toRef(sharedConfigStoreGetters, 'TASK_TEMPLATE') as unknown as Ref<TemplateData|undefined>;
+    const landingData = toRef(sharedConfigStoreGetters, 'TASK_LANDING') as unknown as Ref<LandingData|undefined>;
+
+    const state = reactive<UseTaskManagementTemplateStoreState>({
+        templateId: 'default',
+        enableLanding: true,
+    });
+
+    const translate = (code: keyof TaskManagementTemplate, type?: TaskManagementTemplateType) => computed(() => {
+        const lang = i18n.locale as SupportLanguage;
+        const _type = type ?? state.templateId;
+        const msg = messages[lang][_type][code] || messages.en[_type][code];
+        return msg;
+    });
+    const templates = computed<TaskManagementTemplate>(() => {
+        const lang = i18n.locale as SupportLanguage;
+        const type = state.templateId;
+        return messages[lang][type] || messages.en[type];
+    });
+    const setInitialTemplateId = async () => {
+        if (templateData.value?.template_id) {
+            state.templateId = templateData.value.template_id;
+            return;
+        }
+        try {
+            const res = await sharedConfigStore.get<TemplateData>('TASK_TEMPLATE');
+            state.templateId = res?.data?.template_id ?? 'default';
+        } catch (e) {
+            ErrorHandler.handleError(e);
+        }
+    };
+    const updateTemplateId = async (templateId: TaskManagementTemplateType) => {
+        const prev = state.templateId;
+        state.templateId = templateId;
+        try {
+            await sharedConfigStore.set<TemplateData>('TASK_TEMPLATE', { template_id: templateId }, 'DOMAIN');
+            showSuccessMessage(i18n.t('OPSFLOW.ALT_S_EDIT_TARGET', { target: i18n.t('OPSFLOW.TASK_MANAGEMENT.TEMPLATE_TYPE') }), '');
+        } catch (e) {
+            ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_EDIT_TARGET', { target: i18n.t('OPSFLOW.TASK_MANAGEMENT.TEMPLATE_TYPE') }));
+            state.templateId = prev;
+        }
+    };
+    const setInitialLandingData = async () => {
+        if (landingData.value?.enabled) {
+            state.enableLanding = landingData.value.enabled;
+            return;
+        }
+        try {
+            const res = await sharedConfigStore.get<LandingData>('TASK_LANDING');
+            state.enableLanding = res?.data?.enabled ?? false;
+        } catch (e) {
+            ErrorHandler.handleError(e);
+        }
+    };
+
+    const updateLandingData = async (enabled: boolean) => {
+        const prev = state.enableLanding;
+        state.enableLanding = enabled;
+        try {
+            await sharedConfigStore.set<LandingData>('TASK_LANDING', { enabled }, 'DOMAIN');
+            showSuccessMessage(
+                enabled
+                    ? i18n.t('OPSFLOW.TASK_MANAGEMENT.ALT_S_ENABLE_LANDING')
+                    : i18n.t('OPSFLOW.TASK_MANAGEMENT.ALT_S_DISABLE_LANDING'),
+                '',
+            );
+        } catch (e) {
+            ErrorHandler.handleRequestError(e, enabled
+                ? i18n.t('OPSFLOW.TASK_MANAGEMENT.ALT_E_ENABLE_LANDING')
+                : i18n.t('OPSFLOW.TASK_MANAGEMENT.ALT_E_DISABLE_LANDING'));
+            state.enableLanding = prev;
+        }
+    };
+    return {
+        state,
+        translate,
+        templates,
+        setInitialTemplateId,
+        setInitialLandingData,
+        updateTemplateId,
+        updateLandingData,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/task-management-templates/translations/en.json b/apps/web/src/services/ops-flow/task-management-templates/translations/en.json
new file mode 100644
index 0000000000..c03bf44fa3
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/translations/en.json
@@ -0,0 +1,24 @@
+{
+	"default": {
+		"Task": "Task",
+		"TaskBoard": "Task Board",
+		"TaskCategory": "Task Category",
+		"TaskType": "Task Type",
+		"TemplateName": "Default",
+		"task": "task",
+		"taskType": "task type",
+		"taskTypes": "task types",
+		"tasks": "tasks"
+	},
+	"service-desk": {
+		"Task": "Ticket",
+		"TaskBoard": "Ticket Board",
+		"TaskCategory": "Support Category",
+		"TaskType": "Request Type",
+		"TemplateName": "Service Desk",
+		"task": "ticket",
+		"taskType": "request type",
+		"taskTypes": "request types",
+		"tasks": "tickets"
+	}
+}
diff --git a/apps/web/src/services/ops-flow/task-management-templates/translations/ja.json b/apps/web/src/services/ops-flow/task-management-templates/translations/ja.json
new file mode 100644
index 0000000000..e7dd42a08a
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/translations/ja.json
@@ -0,0 +1,24 @@
+{
+	"default": {
+		"Task": "",
+		"TaskBoard": "",
+		"TaskCategory": "",
+		"TaskType": "",
+		"TemplateName": "",
+		"task": "",
+		"taskType": "",
+		"taskTypes": "",
+		"tasks": ""
+	},
+	"service-desk": {
+		"Task": "",
+		"TaskBoard": "",
+		"TaskCategory": "",
+		"TaskType": "",
+		"TemplateName": "",
+		"task": "",
+		"taskType": "",
+		"taskTypes": "",
+		"tasks": ""
+	}
+}
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
new file mode 100644
index 0000000000..9b89689c63
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/translations/ko.json
@@ -0,0 +1,24 @@
+{
+	"default": {
+		"Task": "태스크",
+		"TaskBoard": "태스크 보드",
+		"TaskCategory": "태스크 카테고리",
+		"TaskType": "태스크 타입",
+		"TemplateName": "기본",
+		"task": "태스크",
+		"taskType": "태스크 타입",
+		"taskTypes": "태스크 타입",
+		"tasks": "태스크"
+	},
+	"service-desk": {
+		"Task": "티켓",
+		"TaskBoard": "티켓 보드",
+		"TaskCategory": "지원 카테고리",
+		"TaskType": "요청 타입",
+		"TemplateName": "서비스 데스크",
+		"task": "티켓",
+		"taskType": "요청 타입",
+		"taskTypes": "요청 타입",
+		"tasks": "티켓"
+	}
+}
diff --git a/apps/web/src/services/ops-flow/task-management-templates/translations/task-management-template-2.8.babel b/apps/web/src/services/ops-flow/task-management-templates/translations/task-management-template-2.8.babel
new file mode 100644
index 0000000000..c848d21edf
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/translations/task-management-template-2.8.babel
@@ -0,0 +1,452 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<babeledit_project be_version="2.8.0" version="1.2">
+    <!--
+
+    BabelEdit project file
+    https://www.codeandweb.com/babeledit
+
+    This file contains meta data for all translations, but not the translation texts itself.
+    They are stored in framework-specific message files (.json / .vue / .yaml / .properties)
+
+    -->
+    <preset_collections/>
+    <framework>vue-json</framework>
+    <filename>task-management-template-2.8.babel</filename>
+    <source_root_dir/>
+    <folder_node>
+        <name/>
+        <children>
+            <folder_node>
+                <name>default</name>
+                <children>
+                    <concept_node>
+                        <name>Task</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>TaskBoard</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>TaskCategory</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>TaskType</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>TemplateName</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>task</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>taskType</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>taskTypes</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>tasks</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>
+                </children>
+            </folder_node>
+            <folder_node>
+                <name>service-desk</name>
+                <children>
+                    <concept_node>
+                        <name>Task</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>TaskBoard</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>TaskCategory</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>TaskType</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>TemplateName</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>task</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>taskType</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>taskTypes</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>tasks</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>
+                </children>
+            </folder_node>
+        </children>
+    </folder_node>
+    <isTemplateProject>false</isTemplateProject>
+    <languages>
+        <language>
+            <code>en-US</code>
+            <source_id/>
+            <source_file>en.json</source_file>
+        </language>
+        <language>
+            <code>ja-JP</code>
+            <source_id/>
+            <source_file>ja.json</source_file>
+        </language>
+        <language>
+            <code>ko-KR</code>
+            <source_id/>
+            <source_file>ko.json</source_file>
+        </language>
+    </languages>
+    <translation_files>
+        <translation_file>
+            <file>en.json</file>
+        </translation_file>
+        <translation_file>
+            <file>ja.json</file>
+        </translation_file>
+        <translation_file>
+            <file>ko.json</file>
+        </translation_file>
+    </translation_files>
+    <editor_configuration>
+        <save_empty_translations>true</save_empty_translations>
+        <copy_templates>
+            <copy_template>$t('%1')</copy_template>
+            <copy_template/>
+            <copy_template/>
+        </copy_templates>
+    </editor_configuration>
+    <primary_language>en-US</primary_language>
+    <configuration>
+        <indent>tab</indent>
+        <format>namespaced-json</format>
+        <support_arrays>true</support_arrays>
+    </configuration>
+</babeledit_project>
diff --git a/apps/web/src/services/ops-flow/task-management-templates/types/task-management-template-type.ts b/apps/web/src/services/ops-flow/task-management-templates/types/task-management-template-type.ts
new file mode 100644
index 0000000000..ab473f6b07
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-management-templates/types/task-management-template-type.ts
@@ -0,0 +1,5 @@
+import type {
+    TASK_MANAGEMENT_TEMPLATE_TYPES,
+} from '@/services/ops-flow/task-management-templates/constants/task-management-template-constant';
+
+export type TaskManagementTemplateType = typeof TASK_MANAGEMENT_TEMPLATE_TYPES[number];
diff --git a/apps/web/src/services/ops-flow/types/board-page-type.ts b/apps/web/src/services/ops-flow/types/board-page-type.ts
new file mode 100644
index 0000000000..8fe085e4a5
--- /dev/null
+++ b/apps/web/src/services/ops-flow/types/board-page-type.ts
@@ -0,0 +1,10 @@
+import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+
+import type { RouteQueryString } from '@/lib/router-query-string';
+
+export type BoardPageQuery = Partial<Record<'categoryId'|'filters', RouteQueryString>>;
+
+export interface BoardPageQueryValue {
+    categoryId?: string;
+    filters?: ConsoleFilter[];
+}
diff --git a/apps/web/src/services/ops-flow/types/task-create-page-type.ts b/apps/web/src/services/ops-flow/types/task-create-page-type.ts
new file mode 100644
index 0000000000..6132bb769c
--- /dev/null
+++ b/apps/web/src/services/ops-flow/types/task-create-page-type.ts
@@ -0,0 +1,8 @@
+import type { RouteQueryString } from '@/lib/router-query-string';
+
+export type TaskCreatePageQuery = Partial<Record<'categoryId'|'taskTypeId', RouteQueryString>>;
+
+export interface TaskCreatePageQueryValue {
+    categoryId?: string;
+    taskTypeId?: string;
+}
diff --git a/apps/web/src/services/ops-flow/types/task-filters-type.ts b/apps/web/src/services/ops-flow/types/task-filters-type.ts
new file mode 100644
index 0000000000..aa94c47bd8
--- /dev/null
+++ b/apps/web/src/services/ops-flow/types/task-filters-type.ts
@@ -0,0 +1,7 @@
+export interface TaskFilters {
+    taskType: string[];
+    status: string[];
+    project: string[];
+    createdBy: string[];
+    assignee: string[];
+}
diff --git a/apps/web/src/store/display/display-store.ts b/apps/web/src/store/display/display-store.ts
index 87c8f12f49..2972af857b 100644
--- a/apps/web/src/store/display/display-store.ts
+++ b/apps/web/src/store/display/display-store.ts
@@ -37,8 +37,12 @@ import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import {
+    useTaskManagementTemplateStore,
+} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
 
+const verbose = false;
 const filterMenuByRoute = (menuList: DisplayMenu[], router: VueRouter): DisplayMenu[] => menuList.reduce((results, _menu) => {
     const userWorkspaceStore = useUserWorkspaceStore();
     const targetWorkspaceId = userWorkspaceStore.getters.currentWorkspaceId;
@@ -75,16 +79,30 @@ const filterMenuByAccessPermission = (menuList: DisplayMenu[], pagePermissionLis
 
     return results;
 }, [] as DisplayMenu[]);
+
+const taskManagementTemplateStore = useTaskManagementTemplateStore();
 const getDisplayMenuList = (menuList: Menu[], isAdminMode?: boolean, currentWorkspaceId?: string): DisplayMenu[] => menuList.map((d) => {
     const menuInfo: MenuInfo = MENU_INFO_MAP[d.id];
     const routeName = isAdminMode ? makeAdminRouteName(MENU_INFO_MAP[d.id].routeName) : MENU_INFO_MAP[d.id].routeName;
+    let label = i18n.t(menuInfo.translationId);
+    let hideOnGNB = d.hideOnGNB;
+    let hideOnSiteMap = d.hideOnSiteMap;
+    if (d.id === MENU_ID.OPS_FLOW_LANDING) {
+        label = taskManagementTemplateStore.templates.TemplateName;
+        hideOnGNB = taskManagementTemplateStore.state.templateId === 'default' || !taskManagementTemplateStore.state.enableLanding;
+        hideOnSiteMap = taskManagementTemplateStore.state.templateId === 'default' || !taskManagementTemplateStore.state.enableLanding;
+    } else if (d.id === MENU_ID.TASK_BOARD) {
+        label = taskManagementTemplateStore.templates.TaskBoard;
+    }
     return {
         ...d,
         id: d.id,
-        label: i18n.t(menuInfo.translationId),
+        label,
         icon: menuInfo.icon,
         highlightTag: menuInfo.highlightTag,
         to: { name: routeName, params: { workspaceId: currentWorkspaceId } },
+        hideOnGNB,
+        hideOnSiteMap,
         subMenuList: d.subMenuList ? getDisplayMenuList(d.subMenuList, isAdminMode, currentWorkspaceId) : [],
     } as DisplayMenu;
 });
@@ -217,9 +235,11 @@ export const useDisplayStore = defineStore('display-store', () => {
     let notificationListApiToken: CancelTokenSource | undefined;
     const checkNotification = async (): Promise<void> => {
         if (notificationListApiToken) {
+            if (verbose) console.debug('[CHECK NOTI]', ' pending...');
             return;
         }
         try {
+            if (verbose) console.debug('[CHECK NOTI]', ' start');
             notificationListApiToken = axios.CancelToken.source();
 
             const currentTime = dayjs.tz(dayjs.utc(), userStore.state.timezone);
@@ -230,6 +250,7 @@ export const useDisplayStore = defineStore('display-store', () => {
                 currentTime,
                 lastNotificationReadTime,
             );
+            if (verbose) console.debug('[NOTI QUERY.FILTER]', param.query.filter);
             const { total_count } = await SpaceConnector.clientV2.notification.notification.list<NotificationListParameters, ListResponse<NotificationModel>>(param, {
                 cancelToken: notificationListApiToken.token,
             });
@@ -243,17 +264,20 @@ export const useDisplayStore = defineStore('display-store', () => {
             }
         } finally {
             notificationListApiToken = undefined;
+            if (verbose) console.debug('[CHECK NOTI]', ' finished');
         }
     };
 
     let checkNotificationInterval: undefined|ReturnType<typeof setTimeout>;
     const stopCheckNotification = (): void => {
         if (notificationListApiToken) {
+            if (verbose)console.debug('[NOTI API]', 'canceled');
             notificationListApiToken.cancel();
             notificationListApiToken = undefined;
         }
 
         if (checkNotificationInterval) {
+            if (verbose)console.debug('[NOTI INTERVAL]', 'stopped');
             clearInterval(checkNotificationInterval);
             checkNotificationInterval = undefined;
         }
@@ -261,12 +285,15 @@ export const useDisplayStore = defineStore('display-store', () => {
 
     const startCheckNotification = (): void => {
         if (notificationListApiToken) {
+            if (verbose)console.debug('[NOTI API]', 'previous canceled');
             notificationListApiToken.cancel();
             notificationListApiToken = undefined;
         }
         if (checkNotificationInterval) {
+            if (verbose)console.debug('[NOTI INTERVAL]', 'previous stopped');
             clearInterval(checkNotificationInterval);
         } else {
+            if (verbose) console.debug('[NOTI INTERVAL]', 'start');
             checkNotification();
         }
 
diff --git a/apps/web/src/store/domain/constant.ts b/apps/web/src/store/domain/constant.ts
index d62669b4bb..de480a40a2 100644
--- a/apps/web/src/store/domain/constant.ts
+++ b/apps/web/src/store/domain/constant.ts
@@ -1,8 +1,12 @@
 export const DOMAIN_CONFIG_NAMES = {
     EXTRA_MENU: 'console:ext-menu',
     SETTINGS: 'settings',
-    TASK_LANDING: 'console:task-management:landing',
-    TASK_TEMPLATE: 'console:task-management:template',
     DORMANCY_WORKSPACE: 'identity:dormancy:workspace',
     ANOMALY_DETECTION_CONFIGURATION: 'anomaly_detection_configuration',
 } as const;
+
+export const SHARED_CONFIG_NAMES = {
+    TASK_LANDING: 'console:task-management:landing',
+    TASK_TEMPLATE: 'console:task-management:template',
+} as const;
+
diff --git a/apps/web/src/store/domain/shared-config-store.ts b/apps/web/src/store/domain/shared-config-store.ts
new file mode 100644
index 0000000000..13acb7e123
--- /dev/null
+++ b/apps/web/src/store/domain/shared-config-store.ts
@@ -0,0 +1,97 @@
+import type { Ref } from 'vue';
+import { reactive, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { APIError } from '@cloudforet/core-lib/space-connector/error';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ResourceGroupType } from '@/schema/_common/type';
+import type { PublicConfigCreateParameters as SharedConfigCreateParameters } from '@/schema/config/public-config/api-verbs/create';
+import type {
+    PublicConfigGetAccessibleConfigsParameters as SharedConfigGetAccessibleConfigsParameters,
+} from '@/schema/config/public-config/api-verbs/get-accesible-configs';
+import type { PublicConfigUpdateParameters as SharedConfigUpdateParameters } from '@/schema/config/public-config/api-verbs/update';
+import type { PublicConfigModel as SharedConfigModel } from '@/schema/config/public-config/model';
+
+import { SHARED_CONFIG_NAMES } from '@/store/domain/constant';
+import type { SharedConfigKey } from '@/store/domain/type';
+
+
+interface UseSharedConfigStoreState {
+    sharedConfigMap: Partial<Record<SharedConfigKey, SharedConfigModel>>;
+}
+type UseSharedConfigStoreGetters = Record<SharedConfigKey, Ref<SharedConfigModel|undefined>>;
+
+export const useSharedConfigStore = defineStore('shared-config', () => {
+    const state = reactive<UseSharedConfigStoreState>({
+        sharedConfigMap: {},
+    });
+    const _getterObj = {} as UseSharedConfigStoreGetters;
+    Object.keys(SHARED_CONFIG_NAMES).forEach((key) => {
+        _getterObj[key] = computed<SharedConfigModel|undefined>(() => state.sharedConfigMap[key]);
+    });
+    const getters = reactive<UseSharedConfigStoreGetters>(_getterObj);
+
+    const createSharedConfig = async <T extends Record<string, any> = Record<string, any>>(key: SharedConfigKey, data: T, resourceGroup: ResourceGroupType) => {
+        const name = SHARED_CONFIG_NAMES[key];
+        const sharedConfig = await SpaceConnector.clientV2.config.publicConfig.create<SharedConfigCreateParameters, SharedConfigModel<T>>({
+            name,
+            data,
+            resource_group: resourceGroup,
+        });
+        return sharedConfig;
+    };
+    const updateSharedConfig = async <T extends Record<string, any> = Record<string, any>>(key: SharedConfigKey, data: T) => {
+        const name = SHARED_CONFIG_NAMES[key];
+        const sharedConfig = await SpaceConnector.clientV2.config.publicConfig.update<SharedConfigUpdateParameters, SharedConfigModel<T>>({
+            name,
+            data,
+        });
+        return sharedConfig;
+    };
+    const actions = {
+        async get<T extends Record<string, any> = Record<string, any>>(key: SharedConfigKey): Promise<SharedConfigModel<T>|undefined> {
+            const name = SHARED_CONFIG_NAMES[key];
+            if (state.sharedConfigMap[key]) return state.sharedConfigMap[key] as SharedConfigModel<T>;
+            const res = await SpaceConnector.clientV2.config.publicConfig.getAccessibleConfigs<SharedConfigGetAccessibleConfigsParameters, ListResponse<SharedConfigModel<T>>>({
+                name,
+            });
+            const sharedConfig = res.results?.[0];
+            if (sharedConfig) {
+                state.sharedConfigMap = { ...state.sharedConfigMap, [key]: sharedConfig };
+            }
+            return sharedConfig;
+        },
+        async set<T extends Record<string, any> = Record<string, any>>(key: SharedConfigKey, data: T, resourceGroupId?: string) {
+            let sharedConfig: SharedConfigModel<T>;
+            try {
+                sharedConfig = await updateSharedConfig(key, data);
+            } catch (e) {
+                if (e instanceof APIError && e.status === 404) {
+                    let resourceGroup: ResourceGroupType;
+                    if (resourceGroupId === undefined) resourceGroup = 'DOMAIN';
+                    else {
+                        resourceGroup = resourceGroupId.startsWith('project') ? 'PROJECT' : 'WORKSPACE';
+                    }
+                    sharedConfig = await createSharedConfig(key, data, resourceGroup);
+                } else {
+                    throw e;
+                }
+            }
+            state.sharedConfigMap = { ...state.sharedConfigMap, [key]: sharedConfig };
+            return sharedConfig;
+        },
+
+        reset() {
+            state.sharedConfigMap = {};
+        },
+    };
+
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/store/domain/type.ts b/apps/web/src/store/domain/type.ts
index e819f40179..334e3e03f1 100644
--- a/apps/web/src/store/domain/type.ts
+++ b/apps/web/src/store/domain/type.ts
@@ -1,4 +1,4 @@
-import type { DOMAIN_CONFIG_NAMES } from '@/store/domain/constant';
+import type { DOMAIN_CONFIG_NAMES, SHARED_CONFIG_NAMES } from '@/store/domain/constant';
 
 export type ExtendedAuthType = 'GOOGLE_OAUTH2' | 'KEYCLOAK_OIDC' | 'SAML';
 
@@ -19,3 +19,4 @@ export interface ExtraSubMenu {
 }
 
 export type DomainConfigKey = keyof typeof DOMAIN_CONFIG_NAMES;
+export type SharedConfigKey = keyof typeof SHARED_CONFIG_NAMES;
diff --git a/apps/web/src/store/reference/user-reference-store.ts b/apps/web/src/store/reference/user-reference-store.ts
index f1cc5e3474..6c8ad65df2 100644
--- a/apps/web/src/store/reference/user-reference-store.ts
+++ b/apps/web/src/store/reference/user-reference-store.ts
@@ -29,7 +29,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 interface UserResourceItemData {
     roleInfo?: Partial<RoleModel>;
 }
-type UserReferenceItem = Required<Pick<ReferenceItem<UserResourceItemData>, 'key'|'label'|'name'|'data'>>;
+export type UserReferenceItem = Required<Pick<ReferenceItem<UserResourceItemData>, 'key'|'label'|'name'|'data'>>;
 export type UserReferenceMap = ReferenceMap<UserReferenceItem>;
 
 const LOAD_TTL = 1000 * 60 * 60 * 3; // 3 hours
@@ -70,6 +70,7 @@ export const useUserReferenceStore = defineStore('reference-user', () => {
     });
 
     const getters = reactive({
+        loading: computed<boolean>(() => state.items === null),
         userItems: asyncComputed<UserReferenceMap>(async () => {
             if (!userStore.state.currentGrantInfo?.scope || userStore.state.currentGrantInfo?.scope === 'USER') return {};
             if (state.items === null) await load();
diff --git a/apps/web/src/store/reference/workspace-reference-store.ts b/apps/web/src/store/reference/workspace-reference-store.ts
index 04ef639a98..77093c10ba 100644
--- a/apps/web/src/store/reference/workspace-reference-store.ts
+++ b/apps/web/src/store/reference/workspace-reference-store.ts
@@ -18,7 +18,7 @@ import { useUserStore } from '@/store/user/user-store';
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
 
-type PickedWorkspaceModel = Pick<WorkspaceModel, 'state' | 'tags'|'cost_info'|'service_account_count' |'created_at'|'user_count'>;
+type PickedWorkspaceModel = Pick<WorkspaceModel, 'state' | 'tags'|'cost_info'|'service_account_count' |'created_at'|'user_count'|'packages'>;
 export type WorkspaceItem = Required<Pick<ReferenceItem<PickedWorkspaceModel>, 'key'|'label'|'name'|'data'>>;
 export type WorkspaceReferenceMap = ReferenceMap<WorkspaceItem>;
 
@@ -60,7 +60,7 @@ export const useWorkspaceReferenceStore = defineStore('reference-workspace', ()
 
         const params: WorkspaceListParameters = {
             query: {
-                only: ['name', 'workspace_id', 'state', 'tags', 'cost_info', 'service_account_count', 'created_at', 'user_count'],
+                only: ['name', 'workspace_id', 'state', 'tags', 'cost_info', 'service_account_count', 'created_at', 'user_count', 'packages'],
             },
         };
 
@@ -87,6 +87,7 @@ export const useWorkspaceReferenceStore = defineStore('reference-workspace', ()
                     service_account_count: workspace.service_account_count,
                     created_at: workspace.created_at,
                     user_count: workspace.user_count,
+                    packages: workspace.packages,
                 },
             };
         });
@@ -109,6 +110,7 @@ export const useWorkspaceReferenceStore = defineStore('reference-workspace', ()
                     service_account_count: workspace.service_account_count,
                     created_at: workspace.created_at,
                     user_count: workspace.user_count,
+                    packages: workspace.packages,
                 },
             },
         };
diff --git a/apps/web/src/translations/index.ts b/apps/web/src/translations/index.ts
index 73f56e73eb..22b61e3e47 100644
--- a/apps/web/src/translations/index.ts
+++ b/apps/web/src/translations/index.ts
@@ -3,6 +3,8 @@ import type { IVueI18n, LocaleMessageObject } from 'vue-i18n';
 import VueI18n from 'vue-i18n';
 
 
+import { endsWithConsonant } from 'hangul-js';
+
 import en from '@cloudforet/language-pack/en.json';
 import ja from '@cloudforet/language-pack/ja.json';
 import ko from '@cloudforet/language-pack/ko.json';
@@ -29,7 +31,7 @@ const removeEmpty = (obj: any): LocaleMessageObject => Object.keys(obj)
     );
 
 const supportLanguages = ['en', 'ko', 'ja'] as const;
-type SupportLanguage = typeof supportLanguages[number];
+export type SupportLanguage = typeof supportLanguages[number];
 
 const loadLocaleFiles = async (lang: string) => {
     // load necessary files
@@ -38,6 +40,17 @@ const loadLocaleFiles = async (lang: string) => {
         loadDayjsLocale(lang),
     ]);
 };
+const KO_PARTICLES = {
+    topic: ['은', '는'],
+    subject: ['이', '가'],
+    object: ['을', '를'],
+};
+export const getParticle = (word: string, type: 'topic'|'subject'|'object') => {
+    const hasBatchim = endsWithConsonant(word);
+    if (i18n.locale === 'ko') return KO_PARTICLES[type][hasBatchim ? 0 : 1];
+    return '';
+};
+
 
 export const i18n = new VueI18n({
     locale: 'en', // set locale
diff --git a/package-lock.json b/package-lock.json
index e601035393..e22add6e6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -180,6 +180,7 @@
         "@tiptap/core": "^2.0.3",
         "@tiptap/extension-color": "^2.0.3",
         "@tiptap/extension-link": "^2.0.3",
+        "@tiptap/extension-placeholder": "^2.10.2",
         "@tiptap/extension-text-align": "^2.0.3",
         "@tiptap/extension-text-style": "^2.0.3",
         "@tiptap/extension-underline": "^2.0.3",
@@ -201,6 +202,7 @@
         "diff-match-patch": "^1.0.5",
         "echarts": "^5.5.0",
         "ejs": "^3.1.10",
+        "hangul-js": "^0.2.6",
         "hashids": "^2.2.1",
         "highlight.js": "^11.5.1",
         "html-to-image": "^1.9.0",
@@ -1403,6 +1405,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -1427,6 +1430,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
@@ -1438,12 +1442,14 @@
     "node_modules/@babel/code-frame/node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "dev": true
     },
     "node_modules/@babel/compat-data": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.8.tgz",
       "integrity": "sha512-c4IM7OTg6k1Q+AJ153e2mc2QVTezTwnb4VzquwcyiEzGnW0Kedv4do/TrkU98qPeC5LNiMt/QXwIjzYXLBpyZg==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1452,6 +1458,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.7.tgz",
       "integrity": "sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==",
+      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.7",
@@ -1480,12 +1487,14 @@
     "node_modules/@babel/core/node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
     },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1494,6 +1503,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.8.tgz",
       "integrity": "sha512-47DG+6F5SzOi0uEvK4wMShmn5yY0mVjVJoWTphdY2B4Rx9wHgjK7Yhtr0ru6nE+sn0v38mzrWOlah0p/YlHHOQ==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.8",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1533,6 +1543,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz",
       "integrity": "sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==",
+      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.24.8",
         "@babel/helper-validator-option": "^7.24.8",
@@ -1548,6 +1559,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1630,6 +1642,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
       "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -1641,6 +1654,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
       "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
+      "dev": true,
       "dependencies": {
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -1653,6 +1667,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
       "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -1677,6 +1692,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
       "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "dev": true,
       "dependencies": {
         "@babel/traverse": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -1689,6 +1705,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.8.tgz",
       "integrity": "sha512-m4vWKVqvkVAWLXfHCCfff2luJj86U+J0/x+0N3ArG/tP0Fq7zky2dYwMbtPmkc/oulkkbjdL3uWzuoBwQ8R00Q==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.24.7",
         "@babel/helper-module-imports": "^7.24.7",
@@ -1719,6 +1736,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
       "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1761,6 +1779,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
       "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+      "dev": true,
       "dependencies": {
         "@babel/traverse": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -1786,6 +1805,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
       "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -1797,6 +1817,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
       "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1805,6 +1826,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
       "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1813,6 +1835,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
       "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1836,6 +1859,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.7.tgz",
       "integrity": "sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg==",
+      "dev": true,
       "dependencies": {
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -1848,6 +1872,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
@@ -1862,6 +1887,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -1873,6 +1899,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -1886,6 +1913,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -1893,12 +1921,14 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
     },
     "node_modules/@babel/highlight/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -1906,12 +1936,14 @@
     "node_modules/@babel/highlight/node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "dev": true
     },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -1994,22 +2026,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
-      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
@@ -2065,6 +2081,7 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
       "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -2076,6 +2093,7 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
       "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.3"
       },
@@ -2676,6 +2694,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz",
       "integrity": "sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.24.8",
         "@babel/helper-plugin-utils": "^7.24.8",
@@ -3396,6 +3415,7 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -3407,6 +3427,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
       "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/parser": "^7.24.7",
@@ -3420,6 +3441,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.8.tgz",
       "integrity": "sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/generator": "^7.24.8",
@@ -3440,6 +3462,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.8.tgz",
       "integrity": "sha512-SkSBEHwwJRU52QEVZBmMBnE5Ux2/6WU1grdYyOhpbCNxbmJrDuDCphBzKZSO3taf0zztp+qkWlymE5tVL5l0TA==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -4724,6 +4747,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -4737,6 +4761,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -4745,6 +4770,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -4763,12 +4789,14 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -4779,72 +4807,6 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
       "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
     },
-    "node_modules/@linaria/core": {
-      "version": "4.2.9",
-      "resolved": "https://registry.npmjs.org/@linaria/core/-/core-4.2.9.tgz",
-      "integrity": "sha512-ELcu37VNVOT/PU0L6WDIN+aLzNFyJrqoBYT0CucGOCAmODbojUMCv8oJYRbWzA3N34w1t199dN4UFdfRWFG2rg==",
-      "peer": true,
-      "dependencies": {
-        "@linaria/logger": "^4.0.0",
-        "@linaria/tags": "^4.3.4",
-        "@linaria/utils": "^4.3.3"
-      },
-      "engines": {
-        "node": "^12.16.0 || >=13.7.0"
-      }
-    },
-    "node_modules/@linaria/logger": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@linaria/logger/-/logger-4.0.0.tgz",
-      "integrity": "sha512-YnBq0JlDWMEkTOK+tMo5yEVR0f5V//6qMLToGcLhTyM9g9i+IDFn51Z+5q2hLk7RdG4NBPgbcCXYi2w4RKsPeg==",
-      "peer": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": "^12.16.0 || >=13.7.0"
-      }
-    },
-    "node_modules/@linaria/logger/node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "peer": true
-    },
-    "node_modules/@linaria/tags": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/@linaria/tags/-/tags-4.3.5.tgz",
-      "integrity": "sha512-PgaIi8Vv89YOjc6rpKL/uPg2w4k0rAwAYxcqeXqzKqsEAste5rgB8xp1/KUOG0oAOkPd3MRL6Duj+m0ZwJ3g+g==",
-      "peer": true,
-      "dependencies": {
-        "@babel/generator": "^7.20.4",
-        "@linaria/logger": "^4.0.0",
-        "@linaria/utils": "^4.3.4"
-      },
-      "engines": {
-        "node": "^12.16.0 || >=13.7.0"
-      }
-    },
-    "node_modules/@linaria/utils": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@linaria/utils/-/utils-4.3.4.tgz",
-      "integrity": "sha512-vt6WJG54n+KANaqxOfzIIU7aSfFHEWFbnGLsgxL7nASHqO0zezrNA2y2Rrp80zSeTW+wSpbmDM4uJyC9UW1qoA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/core": "^7.20.2",
-        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/traverse": "^7.20.1",
-        "@babel/types": "^7.20.2",
-        "@linaria/logger": "^4.0.0",
-        "babel-merge": "^3.0.0"
-      },
-      "engines": {
-        "node": "^12.16.0 || >=13.7.0"
-      }
-    },
     "node_modules/@lit-labs/react": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
@@ -6235,57 +6197,10 @@
       }
     },
     "node_modules/@remirror/core-constants": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.1.tgz",
-      "integrity": "sha512-ZR4aihtnnT9lMbhh5DEbsriJRlukRXmLZe7HmM+6ufJNNUDoazc75UX26xbgQlNUqgAqMcUdGFAnPc1JwgAdLQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      }
-    },
-    "node_modules/@remirror/core-helpers": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@remirror/core-helpers/-/core-helpers-2.0.3.tgz",
-      "integrity": "sha512-LqIPF4stGG69l9qu/FFicv9d9B+YaItzgDMC5A0CEvDQfKkGD3BfabLmfpnuWbsc06oKGdTduilgWcALLZoYLg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@linaria/core": "4.2.9",
-        "@remirror/core-constants": "^2.0.1",
-        "@remirror/types": "^1.0.1",
-        "@types/object.omit": "^3.0.0",
-        "@types/object.pick": "^1.3.2",
-        "@types/throttle-debounce": "^2.1.0",
-        "case-anything": "^2.1.10",
-        "dash-get": "^1.0.2",
-        "deepmerge": "^4.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "make-error": "^1.3.6",
-        "object.omit": "^3.0.0",
-        "object.pick": "^1.3.0",
-        "throttle-debounce": "^3.0.1"
-      }
-    },
-    "node_modules/@remirror/types": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@remirror/types/-/types-1.0.1.tgz",
-      "integrity": "sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==",
-      "peer": true,
-      "dependencies": {
-        "type-fest": "^2.19.0"
-      }
-    },
-    "node_modules/@remirror/types/node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "peer": true,
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "peer": true
     },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "26.0.1",
@@ -9456,15 +9371,15 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.3.tgz",
-      "integrity": "sha512-jLyVIWAdjjlNzrsRhSE2lVL/7N8228/1R1QtaVU85UlMIwHFAcdzhD8FeiKkqxpTnGpaDVaTy7VNEtEgaYdCyA==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-jYLXbYHTi1stLla/74J8NJizDtcJ/uokhG+1gN4DMWHDujaZOrRZhW98o9gN5BYAp4zv//TVX8H+afLZwKGCKQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/pm": "^2.0.0"
+        "@tiptap/pm": "^2.7.0"
       }
     },
     "node_modules/@tiptap/extension-blockquote": {
@@ -9725,6 +9640,19 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.10.2.tgz",
+      "integrity": "sha512-QWzih69SetWYiylQzHsK29dMR8z1ParfcEw05hy3yyWqXE1DiKEot6rOGV1xenMVEA/SNGYYhQia15Bvco95TA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/extension-strike": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.3.tgz",
@@ -9786,36 +9714,33 @@
       }
     },
     "node_modules/@tiptap/pm": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.0.3.tgz",
-      "integrity": "sha512-I9dsInD89Agdm1QjFRO9dmJtU1ldVSILNPW0pEhv9wYqYVvl4HUj/JMtYNqu2jWrCHNXQcaX/WkdSdvGJtmg5g==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.10.2.tgz",
+      "integrity": "sha512-jEgC79uvuEl51XxulutUJPSlhkoY0xQc9R/G4MQltAi+JxJ+KE/pOxgqziWNxBpgUzQqloupjod0kLhLUL4Cig==",
       "peer": true,
       "dependencies": {
-        "prosemirror-changeset": "^2.2.0",
-        "prosemirror-collab": "^1.3.0",
-        "prosemirror-commands": "^1.3.1",
-        "prosemirror-dropcursor": "^1.5.0",
-        "prosemirror-gapcursor": "^1.3.1",
-        "prosemirror-history": "^1.3.0",
-        "prosemirror-inputrules": "^1.2.0",
-        "prosemirror-keymap": "^1.2.0",
-        "prosemirror-markdown": "^1.10.1",
-        "prosemirror-menu": "^1.2.1",
-        "prosemirror-model": "^1.18.1",
-        "prosemirror-schema-basic": "^1.2.0",
-        "prosemirror-schema-list": "^1.2.2",
-        "prosemirror-state": "^1.4.1",
-        "prosemirror-tables": "^1.3.0",
-        "prosemirror-trailing-node": "^2.0.2",
-        "prosemirror-transform": "^1.7.0",
-        "prosemirror-view": "^1.28.2"
+        "prosemirror-changeset": "^2.2.1",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.23.0",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.1",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.36.0"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
-      },
-      "peerDependencies": {
-        "@tiptap/core": "^2.0.0"
       }
     },
     "node_modules/@tiptap/starter-kit": {
@@ -10435,6 +10360,22 @@
       "integrity": "sha512-km+Vyn3BYm5ytMO13k9KTp27O75rbQ0NFw+U//g+PX7VZyjCioXaRFisqSIJRECljcTv73G3i6BpglNGHgUQ5A==",
       "dev": true
     },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "peer": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/markdown-it/node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "peer": true
+    },
     "node_modules/@types/marked": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.8.tgz",
@@ -10450,6 +10391,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "peer": true
+    },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -10514,18 +10461,6 @@
       "integrity": "sha512-DwCsRqeOWopdEsm5KLTxKVKDSDoj+pzZD1vlwu1GQJ6IF3RhjuleYlRwyRH6MJLGaf3v8wFTnC6wo3yYfz0bnA==",
       "dev": true
     },
-    "node_modules/@types/object.omit": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.0.tgz",
-      "integrity": "sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==",
-      "peer": true
-    },
-    "node_modules/@types/object.pick": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.2.tgz",
-      "integrity": "sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==",
-      "peer": true
-    },
     "node_modules/@types/pako": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.4.tgz",
@@ -10629,12 +10564,6 @@
         "@types/estree": "*"
       }
     },
-    "node_modules/@types/throttle-debounce": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
-      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==",
-      "peer": true
-    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
@@ -13220,28 +13149,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/babel-merge": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/babel-merge/-/babel-merge-3.0.0.tgz",
-      "integrity": "sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==",
-      "peer": true,
-      "dependencies": {
-        "deepmerge": "^2.2.1",
-        "object.omit": "^3.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/babel-merge/node_modules/deepmerge": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -13615,6 +13522,7 @@
       "version": "4.24.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
       "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -13898,6 +13806,7 @@
       "version": "1.0.30001684",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz",
       "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -13913,18 +13822,6 @@
         }
       ]
     },
-    "node_modules/case-anything": {
-      "version": "2.1.13",
-      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz",
-      "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==",
-      "peer": true,
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/cashify": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/cashify/-/cashify-2.5.0.tgz",
@@ -15848,12 +15745,6 @@
       "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-2.0.1.tgz",
       "integrity": "sha512-5TXltWJGc+RdnabUGzhRae1TRq6m4gr+3K2wQX0is5/F2yS6MJXJvLyI3ErAnsAXuJoGqvfVD5icRgim07DrxQ=="
     },
-    "node_modules/dash-get": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/dash-get/-/dash-get-1.0.2.tgz",
-      "integrity": "sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==",
-      "peer": true
-    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -15943,6 +15834,7 @@
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
       "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -16059,15 +15951,6 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
     },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/default-browser-id": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
@@ -16538,7 +16421,8 @@
     "node_modules/electron-to-chromium": {
       "version": "1.5.64",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
-      "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ=="
+      "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==",
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -17232,6 +17116,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -19029,6 +18914,7 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -19311,6 +19197,7 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -19441,6 +19328,11 @@
         "uglify-js": "^3.1.4"
       }
     },
+    "node_modules/hangul-js": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/hangul-js/-/hangul-js-0.2.6.tgz",
+      "integrity": "sha512-48axU8LgjCD30FEs66Xc04/8knxMwCMQw0f67l67rlttW7VXT3qRJgQeHmhiuGwWXGvSbk6YM0fhQlcjE1JFQA=="
+    },
     "node_modules/hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
@@ -20478,6 +20370,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "dependencies": {
         "isobject": "^3.0.1"
       },
@@ -20734,6 +20627,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -21274,6 +21168,7 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -21308,6 +21203,7 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -22050,6 +21946,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -22098,7 +21995,8 @@
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -22176,25 +22074,26 @@
       }
     },
     "node_modules/markdown-it": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
-      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
       "peer": true,
       "dependencies": {
         "argparse": "^2.0.1",
-        "entities": "~3.0.1",
-        "linkify-it": "^4.0.1",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
       },
       "bin": {
-        "markdown-it": "bin/markdown-it.js"
+        "markdown-it": "bin/markdown-it.mjs"
       }
     },
     "node_modules/markdown-it/node_modules/entities": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "peer": true,
       "engines": {
         "node": ">=0.12"
@@ -22203,6 +22102,21 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/markdown-it/node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "peer": true,
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/markdown-it/node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "peer": true
+    },
     "node_modules/markdown-table": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
@@ -23146,9 +23060,9 @@
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
     "node_modules/mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
       "peer": true
     },
     "node_modules/media-typer": {
@@ -24264,7 +24178,8 @@
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true
     },
     "node_modules/nopt": {
       "version": "6.0.0",
@@ -24775,34 +24690,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object.omit": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz",
-      "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==",
-      "peer": true,
-      "dependencies": {
-        "is-extendable": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object.omit/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "peer": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
       "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "dev": true,
       "dependencies": {
         "isobject": "^3.0.1"
       },
@@ -28042,14 +27934,14 @@
       }
     },
     "node_modules/prosemirror-commands": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
-      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz",
+      "integrity": "sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==",
       "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
+        "prosemirror-transform": "^1.10.2"
       }
     },
     "node_modules/prosemirror-dropcursor": {
@@ -28076,9 +27968,9 @@
       }
     },
     "node_modules/prosemirror-history": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.2.tgz",
-      "integrity": "sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
       "peer": true,
       "dependencies": {
         "prosemirror-state": "^1.2.2",
@@ -28088,9 +27980,9 @@
       }
     },
     "node_modules/prosemirror-inputrules": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.1.tgz",
-      "integrity": "sha512-3LrWJX1+ULRh5SZvbIQlwZafOXqp1XuV21MGBu/i5xsztd+9VD15x6OtN6mdqSFI7/8Y77gYUbQ6vwwJ4mr6QQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
+      "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
       "peer": true,
       "dependencies": {
         "prosemirror-state": "^1.0.0",
@@ -28108,19 +28000,20 @@
       }
     },
     "node_modules/prosemirror-markdown": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.11.0.tgz",
-      "integrity": "sha512-yP9mZqPRstjZhhf3yykCQNE3AijxARrHe4e7esV9A+gp4cnGOH4QvrKYPpXLHspNWyvJJ+0URH+iIvV5qP1I2Q==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz",
+      "integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==",
       "peer": true,
       "dependencies": {
-        "markdown-it": "^13.0.1",
-        "prosemirror-model": "^1.0.0"
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.20.0"
       }
     },
     "node_modules/prosemirror-menu": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.2.tgz",
-      "integrity": "sha512-437HIWTq4F9cTX+kPfqZWWm+luJm95Aut/mLUy+9OMrOml0bmWDS26ceC6SNfb2/S94et1sZ186vLO7pDHzxSw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
       "peer": true,
       "dependencies": {
         "crelt": "^1.0.0",
@@ -28130,26 +28023,26 @@
       }
     },
     "node_modules/prosemirror-model": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.2.tgz",
-      "integrity": "sha512-RXl0Waiss4YtJAUY3NzKH0xkJmsZupCIccqcIFoLTIKFlKNbIvFDRl27/kQy1FP8iUAxrjRRfIVvOebnnXJgqQ==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.23.0.tgz",
+      "integrity": "sha512-Q/fgsgl/dlOAW9ILu4OOhYWQbc7TQd4BwKH/RwmUjyVf8682Be4zj3rOYdLnYEcGzyg8LL9Q5IWYKD8tdToreQ==",
       "dependencies": {
         "orderedmap": "^2.0.0"
       }
     },
     "node_modules/prosemirror-schema-basic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz",
-      "integrity": "sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz",
+      "integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==",
       "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.19.0"
       }
     },
     "node_modules/prosemirror-schema-list": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.3.0.tgz",
-      "integrity": "sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.4.1.tgz",
+      "integrity": "sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==",
       "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
@@ -28168,9 +28061,9 @@
       }
     },
     "node_modules/prosemirror-tables": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.4.tgz",
-      "integrity": "sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.1.tgz",
+      "integrity": "sha512-p8WRJNA96jaNQjhJolmbxTzd6M4huRE5xQ8OxjvMhQUP0Nzpo4zz6TztEiwk6aoqGBhz9lxRWR1yRZLlpQN98w==",
       "peer": true,
       "dependencies": {
         "prosemirror-keymap": "^1.1.2",
@@ -28181,20 +28074,18 @@
       }
     },
     "node_modules/prosemirror-trailing-node": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.4.tgz",
-      "integrity": "sha512-0Yl9w7IdHkaCdqR+NE3FOucePME4OmiGcybnF1iasarEILP5U8+4xTnl53yafULjmwcg1SrSG65Hg7Zk2H2v3g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
       "peer": true,
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@remirror/core-constants": "^2.0.1",
-        "@remirror/core-helpers": "^2.0.2",
+        "@remirror/core-constants": "3.0.0",
         "escape-string-regexp": "^4.0.0"
       },
       "peerDependencies": {
-        "prosemirror-model": "^1.19.0",
+        "prosemirror-model": "^1.22.1",
         "prosemirror-state": "^1.4.2",
-        "prosemirror-view": "^1.30.2"
+        "prosemirror-view": "^1.33.8"
       }
     },
     "node_modules/prosemirror-trailing-node/node_modules/escape-string-regexp": {
@@ -28210,19 +28101,19 @@
       }
     },
     "node_modules/prosemirror-transform": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.7.3.tgz",
-      "integrity": "sha512-qDapyx5lqYfxVeUWEw0xTGgeP2S8346QtE7DxkalsXlX89lpzkY6GZfulgfHyk1n4tf74sZ7CcXgcaCcGjsUtA==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz",
+      "integrity": "sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==",
       "dependencies": {
-        "prosemirror-model": "^1.0.0"
+        "prosemirror-model": "^1.21.0"
       }
     },
     "node_modules/prosemirror-view": {
-      "version": "1.31.5",
-      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.31.5.tgz",
-      "integrity": "sha512-tobRCDeCp61elR1d97XE/JTL9FDIfswZpWeNs7GKJjAJvWyMGHWYFCq29850p6bbG2bckP+i9n1vT56RifosbA==",
+      "version": "1.37.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.0.tgz",
+      "integrity": "sha512-z2nkKI1sJzyi7T47Ji/ewBPuIma1RNvQCCYVdV+MqWBV7o4Sa1n94UJCJJ1aQRF/xRkFfyqLGlGFWitIcCOtbg==",
       "dependencies": {
-        "prosemirror-model": "^1.16.0",
+        "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
         "prosemirror-transform": "^1.1.0"
       }
@@ -28446,6 +28337,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/puppeteer-core": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-2.1.1.tgz",
@@ -29104,7 +29004,8 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -32523,15 +32424,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -32629,6 +32521,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -33623,6 +33516,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
       "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -33651,7 +33545,8 @@
     "node_modules/update-browserslist-db/node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
@@ -35256,7 +35151,8 @@
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -36480,6 +36376,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -36498,6 +36395,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "dev": true,
       "requires": {
         "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
@@ -36506,19 +36404,22 @@
         "picocolors": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-          "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+          "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+          "dev": true
         }
       }
     },
     "@babel/compat-data": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.8.tgz",
-      "integrity": "sha512-c4IM7OTg6k1Q+AJ153e2mc2QVTezTwnb4VzquwcyiEzGnW0Kedv4do/TrkU98qPeC5LNiMt/QXwIjzYXLBpyZg=="
+      "integrity": "sha512-c4IM7OTg6k1Q+AJ153e2mc2QVTezTwnb4VzquwcyiEzGnW0Kedv4do/TrkU98qPeC5LNiMt/QXwIjzYXLBpyZg==",
+      "dev": true
     },
     "@babel/core": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.7.tgz",
       "integrity": "sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==",
+      "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.7",
@@ -36540,12 +36441,14 @@
         "convert-source-map": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-          "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+          "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+          "dev": true
         },
         "semver": {
           "version": "6.3.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true
         }
       }
     },
@@ -36553,6 +36456,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.8.tgz",
       "integrity": "sha512-47DG+6F5SzOi0uEvK4wMShmn5yY0mVjVJoWTphdY2B4Rx9wHgjK7Yhtr0ru6nE+sn0v38mzrWOlah0p/YlHHOQ==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.24.8",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -36583,6 +36487,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz",
       "integrity": "sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==",
+      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.24.8",
         "@babel/helper-validator-option": "^7.24.8",
@@ -36594,7 +36499,8 @@
         "semver": {
           "version": "6.3.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true
         }
       }
     },
@@ -36659,6 +36565,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
       "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.24.7"
       }
@@ -36667,6 +36574,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
       "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
+      "dev": true,
       "requires": {
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -36676,6 +36584,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
       "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.24.7"
       }
@@ -36694,6 +36603,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
       "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "dev": true,
       "requires": {
         "@babel/traverse": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -36703,6 +36613,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.8.tgz",
       "integrity": "sha512-m4vWKVqvkVAWLXfHCCfff2luJj86U+J0/x+0N3ArG/tP0Fq7zky2dYwMbtPmkc/oulkkbjdL3uWzuoBwQ8R00Q==",
+      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.24.7",
         "@babel/helper-module-imports": "^7.24.7",
@@ -36723,7 +36634,8 @@
     "@babel/helper-plugin-utils": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
-      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg=="
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+      "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.24.7",
@@ -36751,6 +36663,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
       "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+      "dev": true,
       "requires": {
         "@babel/traverse": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -36770,6 +36683,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
       "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.24.7"
       }
@@ -36777,17 +36691,20 @@
     "@babel/helper-string-parser": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ=="
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "dev": true
     },
     "@babel/helper-validator-identifier": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w=="
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "dev": true
     },
     "@babel/helper-validator-option": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
-      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q=="
+      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "dev": true
     },
     "@babel/helper-wrap-function": {
       "version": "7.24.7",
@@ -36805,6 +36722,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.7.tgz",
       "integrity": "sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg==",
+      "dev": true,
       "requires": {
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -36814,6 +36732,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
+      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
@@ -36825,6 +36744,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -36833,6 +36753,7 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -36843,6 +36764,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -36850,22 +36772,26 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
         },
         "picocolors": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-          "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+          "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+          "dev": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -36917,16 +36843,6 @@
         "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
-    "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
-      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
-      "peer": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      }
-    },
     "@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
@@ -36965,6 +36881,7 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
       "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
@@ -36973,6 +36890,7 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
       "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3"
       }
@@ -37360,6 +37278,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz",
       "integrity": "sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==",
+      "dev": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.24.8",
         "@babel/helper-plugin-utils": "^7.24.8",
@@ -37862,6 +37781,7 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -37870,6 +37790,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
       "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.24.7",
         "@babel/parser": "^7.24.7",
@@ -37880,6 +37801,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.8.tgz",
       "integrity": "sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.24.7",
         "@babel/generator": "^7.24.8",
@@ -37897,6 +37819,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.8.tgz",
       "integrity": "sha512-SkSBEHwwJRU52QEVZBmMBnE5Ux2/6WU1grdYyOhpbCNxbmJrDuDCphBzKZSO3taf0zztp+qkWlymE5tVL5l0TA==",
+      "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.24.8",
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -39269,6 +39192,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
       "requires": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -39278,12 +39202,14 @@
     "@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
     },
     "@jridgewell/set-array": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true
     },
     "@jridgewell/source-map": {
       "version": "0.3.3",
@@ -39299,12 +39225,14 @@
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -39315,62 +39243,6 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
       "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
     },
-    "@linaria/core": {
-      "version": "4.2.9",
-      "resolved": "https://registry.npmjs.org/@linaria/core/-/core-4.2.9.tgz",
-      "integrity": "sha512-ELcu37VNVOT/PU0L6WDIN+aLzNFyJrqoBYT0CucGOCAmODbojUMCv8oJYRbWzA3N34w1t199dN4UFdfRWFG2rg==",
-      "peer": true,
-      "requires": {
-        "@linaria/logger": "^4.0.0",
-        "@linaria/tags": "^4.3.4",
-        "@linaria/utils": "^4.3.3"
-      }
-    },
-    "@linaria/logger": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@linaria/logger/-/logger-4.0.0.tgz",
-      "integrity": "sha512-YnBq0JlDWMEkTOK+tMo5yEVR0f5V//6qMLToGcLhTyM9g9i+IDFn51Z+5q2hLk7RdG4NBPgbcCXYi2w4RKsPeg==",
-      "peer": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "picocolors": "^1.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-          "peer": true
-        }
-      }
-    },
-    "@linaria/tags": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/@linaria/tags/-/tags-4.3.5.tgz",
-      "integrity": "sha512-PgaIi8Vv89YOjc6rpKL/uPg2w4k0rAwAYxcqeXqzKqsEAste5rgB8xp1/KUOG0oAOkPd3MRL6Duj+m0ZwJ3g+g==",
-      "peer": true,
-      "requires": {
-        "@babel/generator": "^7.20.4",
-        "@linaria/logger": "^4.0.0",
-        "@linaria/utils": "^4.3.4"
-      }
-    },
-    "@linaria/utils": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@linaria/utils/-/utils-4.3.4.tgz",
-      "integrity": "sha512-vt6WJG54n+KANaqxOfzIIU7aSfFHEWFbnGLsgxL7nASHqO0zezrNA2y2Rrp80zSeTW+wSpbmDM4uJyC9UW1qoA==",
-      "peer": true,
-      "requires": {
-        "@babel/core": "^7.20.2",
-        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/traverse": "^7.20.1",
-        "@babel/types": "^7.20.2",
-        "@linaria/logger": "^4.0.0",
-        "babel-merge": "^3.0.0"
-      }
-    },
     "@lit-labs/react": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
@@ -40135,53 +40007,10 @@
       }
     },
     "@remirror/core-constants": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.1.tgz",
-      "integrity": "sha512-ZR4aihtnnT9lMbhh5DEbsriJRlukRXmLZe7HmM+6ufJNNUDoazc75UX26xbgQlNUqgAqMcUdGFAnPc1JwgAdLQ==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.21.0"
-      }
-    },
-    "@remirror/core-helpers": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@remirror/core-helpers/-/core-helpers-2.0.3.tgz",
-      "integrity": "sha512-LqIPF4stGG69l9qu/FFicv9d9B+YaItzgDMC5A0CEvDQfKkGD3BfabLmfpnuWbsc06oKGdTduilgWcALLZoYLg==",
-      "peer": true,
-      "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@linaria/core": "4.2.9",
-        "@remirror/core-constants": "^2.0.1",
-        "@remirror/types": "^1.0.1",
-        "@types/object.omit": "^3.0.0",
-        "@types/object.pick": "^1.3.2",
-        "@types/throttle-debounce": "^2.1.0",
-        "case-anything": "^2.1.10",
-        "dash-get": "^1.0.2",
-        "deepmerge": "^4.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "make-error": "^1.3.6",
-        "object.omit": "^3.0.0",
-        "object.pick": "^1.3.0",
-        "throttle-debounce": "^3.0.1"
-      }
-    },
-    "@remirror/types": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@remirror/types/-/types-1.0.1.tgz",
-      "integrity": "sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==",
-      "peer": true,
-      "requires": {
-        "type-fest": "^2.19.0"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "2.19.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-          "peer": true
-        }
-      }
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "peer": true
     },
     "@rollup/plugin-commonjs": {
       "version": "26.0.1",
@@ -42325,9 +42154,9 @@
       "requires": {}
     },
     "@tiptap/core": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.3.tgz",
-      "integrity": "sha512-jLyVIWAdjjlNzrsRhSE2lVL/7N8228/1R1QtaVU85UlMIwHFAcdzhD8FeiKkqxpTnGpaDVaTy7VNEtEgaYdCyA==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-jYLXbYHTi1stLla/74J8NJizDtcJ/uokhG+1gN4DMWHDujaZOrRZhW98o9gN5BYAp4zv//TVX8H+afLZwKGCKQ==",
       "requires": {}
     },
     "@tiptap/extension-blockquote": {
@@ -42456,6 +42285,12 @@
       "integrity": "sha512-a+tKtmj4bU3GVCH1NE8VHWnhVexxX5boTVxsHIr4yGG3UoKo1c5AO7YMaeX2W5xB5iIA+BQqOPCDPEAx34dd2A==",
       "requires": {}
     },
+    "@tiptap/extension-placeholder": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.10.2.tgz",
+      "integrity": "sha512-QWzih69SetWYiylQzHsK29dMR8z1ParfcEw05hy3yyWqXE1DiKEot6rOGV1xenMVEA/SNGYYhQia15Bvco95TA==",
+      "requires": {}
+    },
     "@tiptap/extension-strike": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.3.tgz",
@@ -42487,29 +42322,29 @@
       "requires": {}
     },
     "@tiptap/pm": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.0.3.tgz",
-      "integrity": "sha512-I9dsInD89Agdm1QjFRO9dmJtU1ldVSILNPW0pEhv9wYqYVvl4HUj/JMtYNqu2jWrCHNXQcaX/WkdSdvGJtmg5g==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.10.2.tgz",
+      "integrity": "sha512-jEgC79uvuEl51XxulutUJPSlhkoY0xQc9R/G4MQltAi+JxJ+KE/pOxgqziWNxBpgUzQqloupjod0kLhLUL4Cig==",
       "peer": true,
       "requires": {
-        "prosemirror-changeset": "^2.2.0",
-        "prosemirror-collab": "^1.3.0",
-        "prosemirror-commands": "^1.3.1",
-        "prosemirror-dropcursor": "^1.5.0",
-        "prosemirror-gapcursor": "^1.3.1",
-        "prosemirror-history": "^1.3.0",
-        "prosemirror-inputrules": "^1.2.0",
-        "prosemirror-keymap": "^1.2.0",
-        "prosemirror-markdown": "^1.10.1",
-        "prosemirror-menu": "^1.2.1",
-        "prosemirror-model": "^1.18.1",
-        "prosemirror-schema-basic": "^1.2.0",
-        "prosemirror-schema-list": "^1.2.2",
-        "prosemirror-state": "^1.4.1",
-        "prosemirror-tables": "^1.3.0",
-        "prosemirror-trailing-node": "^2.0.2",
-        "prosemirror-transform": "^1.7.0",
-        "prosemirror-view": "^1.28.2"
+        "prosemirror-changeset": "^2.2.1",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.23.0",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.1",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.36.0"
       }
     },
     "@tiptap/starter-kit": {
@@ -43115,6 +42950,24 @@
       "integrity": "sha512-km+Vyn3BYm5ytMO13k9KTp27O75rbQ0NFw+U//g+PX7VZyjCioXaRFisqSIJRECljcTv73G3i6BpglNGHgUQ5A==",
       "dev": true
     },
+    "@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "peer": true,
+      "requires": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      },
+      "dependencies": {
+        "@types/linkify-it": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+          "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+          "peer": true
+        }
+      }
+    },
     "@types/marked": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.8.tgz",
@@ -43130,6 +42983,12 @@
         "@types/unist": "*"
       }
     },
+    "@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "peer": true
+    },
     "@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -43194,18 +43053,6 @@
       "integrity": "sha512-DwCsRqeOWopdEsm5KLTxKVKDSDoj+pzZD1vlwu1GQJ6IF3RhjuleYlRwyRH6MJLGaf3v8wFTnC6wo3yYfz0bnA==",
       "dev": true
     },
-    "@types/object.omit": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.0.tgz",
-      "integrity": "sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==",
-      "peer": true
-    },
-    "@types/object.pick": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.2.tgz",
-      "integrity": "sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==",
-      "peer": true
-    },
     "@types/pako": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.4.tgz",
@@ -43309,12 +43156,6 @@
         "@types/estree": "*"
       }
     },
-    "@types/throttle-debounce": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
-      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==",
-      "peer": true
-    },
     "@types/trusted-types": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
@@ -45155,24 +44996,6 @@
         }
       }
     },
-    "babel-merge": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/babel-merge/-/babel-merge-3.0.0.tgz",
-      "integrity": "sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==",
-      "peer": true,
-      "requires": {
-        "deepmerge": "^2.2.1",
-        "object.omit": "^3.0.0"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-          "peer": true
-        }
-      }
-    },
     "babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -45495,6 +45318,7 @@
       "version": "4.24.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
       "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
+      "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30001669",
         "electron-to-chromium": "^1.5.41",
@@ -45693,13 +45517,8 @@
     "caniuse-lite": {
       "version": "1.0.30001684",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz",
-      "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ=="
-    },
-    "case-anything": {
-      "version": "2.1.13",
-      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz",
-      "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==",
-      "peer": true
+      "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==",
+      "dev": true
     },
     "cashify": {
       "version": "2.5.0",
@@ -47177,12 +46996,6 @@
       "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-2.0.1.tgz",
       "integrity": "sha512-5TXltWJGc+RdnabUGzhRae1TRq6m4gr+3K2wQX0is5/F2yS6MJXJvLyI3ErAnsAXuJoGqvfVD5icRgim07DrxQ=="
     },
-    "dash-get": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/dash-get/-/dash-get-1.0.2.tgz",
-      "integrity": "sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==",
-      "peer": true
-    },
     "data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -47244,6 +47057,7 @@
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
       "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -47327,12 +47141,6 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
     },
-    "deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "peer": true
-    },
     "default-browser-id": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
@@ -47706,7 +47514,8 @@
     "electron-to-chromium": {
       "version": "1.5.64",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
-      "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ=="
+      "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==",
+      "dev": true
     },
     "emoji-regex": {
       "version": "9.2.2",
@@ -48156,7 +47965,8 @@
     "escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true
     },
     "escape-html": {
       "version": "1.0.3",
@@ -49581,7 +49391,8 @@
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
     },
     "gesto": {
       "version": "1.16.0",
@@ -49786,7 +49597,8 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
     },
     "globalthis": {
       "version": "1.0.3",
@@ -49884,6 +49696,11 @@
         "wordwrap": "^1.0.0"
       }
     },
+    "hangul-js": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/hangul-js/-/hangul-js-0.2.6.tgz",
+      "integrity": "sha512-48axU8LgjCD30FEs66Xc04/8knxMwCMQw0f67l67rlttW7VXT3qRJgQeHmhiuGwWXGvSbk6YM0fhQlcjE1JFQA=="
+    },
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
@@ -50598,6 +50415,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -50773,7 +50591,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true
     },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
@@ -51188,7 +51007,8 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
@@ -51216,7 +51036,8 @@
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -51777,6 +51598,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
       "requires": {
         "yallist": "^3.0.2"
       }
@@ -51815,7 +51637,8 @@
     "make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
     },
     "makeerror": {
       "version": "1.0.12",
@@ -51874,22 +51697,38 @@
       "dev": true
     },
     "markdown-it": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
-      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
       "peer": true,
       "requires": {
         "argparse": "^2.0.1",
-        "entities": "~3.0.1",
-        "linkify-it": "^4.0.1",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
       },
       "dependencies": {
         "entities": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+          "peer": true
+        },
+        "linkify-it": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+          "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+          "peer": true,
+          "requires": {
+            "uc.micro": "^2.0.0"
+          }
+        },
+        "uc.micro": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+          "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
           "peer": true
         }
       }
@@ -52580,9 +52419,9 @@
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
     "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
       "peer": true
     },
     "media-typer": {
@@ -53338,7 +53177,8 @@
     "node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true
     },
     "nopt": {
       "version": "6.0.0",
@@ -53696,30 +53536,11 @@
         "es-abstract": "^1.20.4"
       }
     },
-    "object.omit": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz",
-      "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==",
-      "peer": true,
-      "requires": {
-        "is-extendable": "^1.0.0"
-      },
-      "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "peer": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
       "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -56292,14 +56113,14 @@
       }
     },
     "prosemirror-commands": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
-      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz",
+      "integrity": "sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==",
       "peer": true,
       "requires": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
+        "prosemirror-transform": "^1.10.2"
       }
     },
     "prosemirror-dropcursor": {
@@ -56326,9 +56147,9 @@
       }
     },
     "prosemirror-history": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.2.tgz",
-      "integrity": "sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
       "peer": true,
       "requires": {
         "prosemirror-state": "^1.2.2",
@@ -56338,9 +56159,9 @@
       }
     },
     "prosemirror-inputrules": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.1.tgz",
-      "integrity": "sha512-3LrWJX1+ULRh5SZvbIQlwZafOXqp1XuV21MGBu/i5xsztd+9VD15x6OtN6mdqSFI7/8Y77gYUbQ6vwwJ4mr6QQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
+      "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
       "peer": true,
       "requires": {
         "prosemirror-state": "^1.0.0",
@@ -56358,19 +56179,20 @@
       }
     },
     "prosemirror-markdown": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.11.0.tgz",
-      "integrity": "sha512-yP9mZqPRstjZhhf3yykCQNE3AijxARrHe4e7esV9A+gp4cnGOH4QvrKYPpXLHspNWyvJJ+0URH+iIvV5qP1I2Q==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz",
+      "integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==",
       "peer": true,
       "requires": {
-        "markdown-it": "^13.0.1",
-        "prosemirror-model": "^1.0.0"
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.20.0"
       }
     },
     "prosemirror-menu": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.2.tgz",
-      "integrity": "sha512-437HIWTq4F9cTX+kPfqZWWm+luJm95Aut/mLUy+9OMrOml0bmWDS26ceC6SNfb2/S94et1sZ186vLO7pDHzxSw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
       "peer": true,
       "requires": {
         "crelt": "^1.0.0",
@@ -56380,26 +56202,26 @@
       }
     },
     "prosemirror-model": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.2.tgz",
-      "integrity": "sha512-RXl0Waiss4YtJAUY3NzKH0xkJmsZupCIccqcIFoLTIKFlKNbIvFDRl27/kQy1FP8iUAxrjRRfIVvOebnnXJgqQ==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.23.0.tgz",
+      "integrity": "sha512-Q/fgsgl/dlOAW9ILu4OOhYWQbc7TQd4BwKH/RwmUjyVf8682Be4zj3rOYdLnYEcGzyg8LL9Q5IWYKD8tdToreQ==",
       "requires": {
         "orderedmap": "^2.0.0"
       }
     },
     "prosemirror-schema-basic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz",
-      "integrity": "sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz",
+      "integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==",
       "peer": true,
       "requires": {
         "prosemirror-model": "^1.19.0"
       }
     },
     "prosemirror-schema-list": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.3.0.tgz",
-      "integrity": "sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.4.1.tgz",
+      "integrity": "sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==",
       "peer": true,
       "requires": {
         "prosemirror-model": "^1.0.0",
@@ -56418,9 +56240,9 @@
       }
     },
     "prosemirror-tables": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.4.tgz",
-      "integrity": "sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.1.tgz",
+      "integrity": "sha512-p8WRJNA96jaNQjhJolmbxTzd6M4huRE5xQ8OxjvMhQUP0Nzpo4zz6TztEiwk6aoqGBhz9lxRWR1yRZLlpQN98w==",
       "peer": true,
       "requires": {
         "prosemirror-keymap": "^1.1.2",
@@ -56431,14 +56253,12 @@
       }
     },
     "prosemirror-trailing-node": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.4.tgz",
-      "integrity": "sha512-0Yl9w7IdHkaCdqR+NE3FOucePME4OmiGcybnF1iasarEILP5U8+4xTnl53yafULjmwcg1SrSG65Hg7Zk2H2v3g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
       "peer": true,
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@remirror/core-constants": "^2.0.1",
-        "@remirror/core-helpers": "^2.0.2",
+        "@remirror/core-constants": "3.0.0",
         "escape-string-regexp": "^4.0.0"
       },
       "dependencies": {
@@ -56451,19 +56271,19 @@
       }
     },
     "prosemirror-transform": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.7.3.tgz",
-      "integrity": "sha512-qDapyx5lqYfxVeUWEw0xTGgeP2S8346QtE7DxkalsXlX89lpzkY6GZfulgfHyk1n4tf74sZ7CcXgcaCcGjsUtA==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz",
+      "integrity": "sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==",
       "requires": {
-        "prosemirror-model": "^1.0.0"
+        "prosemirror-model": "^1.21.0"
       }
     },
     "prosemirror-view": {
-      "version": "1.31.5",
-      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.31.5.tgz",
-      "integrity": "sha512-tobRCDeCp61elR1d97XE/JTL9FDIfswZpWeNs7GKJjAJvWyMGHWYFCq29850p6bbG2bckP+i9n1vT56RifosbA==",
+      "version": "1.37.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.0.tgz",
+      "integrity": "sha512-z2nkKI1sJzyi7T47Ji/ewBPuIma1RNvQCCYVdV+MqWBV7o4Sa1n94UJCJJ1aQRF/xRkFfyqLGlGFWitIcCOtbg==",
       "requires": {
-        "prosemirror-model": "^1.16.0",
+        "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
         "prosemirror-transform": "^1.1.0"
       }
@@ -56677,6 +56497,12 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
     },
+    "punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "peer": true
+    },
     "puppeteer-core": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-2.1.1.tgz",
@@ -57180,7 +57006,8 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.15.2",
@@ -59924,12 +59751,6 @@
         "thenify": ">= 3.1.0 < 4"
       }
     },
-    "throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-      "peer": true
-    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -60016,7 +59837,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -60763,6 +60585,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
       "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
+      "dev": true,
       "requires": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.0"
@@ -60771,7 +60594,8 @@
         "picocolors": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-          "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+          "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+          "dev": true
         }
       }
     },
@@ -61611,6 +61435,7 @@
         "@tiptap/core": "^2.0.3",
         "@tiptap/extension-color": "^2.0.3",
         "@tiptap/extension-link": "^2.0.3",
+        "@tiptap/extension-placeholder": "^2.10.2",
         "@tiptap/extension-text-align": "^2.0.3",
         "@tiptap/extension-text-style": "^2.0.3",
         "@tiptap/extension-underline": "^2.0.3",
@@ -61647,6 +61472,7 @@
         "echarts": "^5.5.0",
         "ejs": "^3.1.10",
         "eslint-config-custom": "*",
+        "hangul-js": "^0.2.6",
         "hashids": "^2.2.1",
         "highlight.js": "^11.5.1",
         "html-to-image": "^1.9.0",
@@ -62563,7 +62389,8 @@
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 5669086e1b..da5d5ca6c8 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -233,15 +233,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -254,15 +254,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -654,15 +654,15 @@
                                 <translations>
                                     <translation>
                                         <language>en-US</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                     <translation>
                                         <language>ja-JP</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                     <translation>
                                         <language>ko-KR</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                 </translations>
                             </concept_node>
@@ -801,15 +801,15 @@
                                 <translations>
                                     <translation>
                                         <language>en-US</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                     <translation>
                                         <language>ja-JP</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                     <translation>
                                         <language>ko-KR</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                 </translations>
                             </concept_node>
@@ -822,15 +822,15 @@
                                 <translations>
                                     <translation>
                                         <language>en-US</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                     <translation>
                                         <language>ja-JP</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                     <translation>
                                         <language>ko-KR</language>
-                                        <approved>false</approved>
+                                        <approved>true</approved>
                                     </translation>
                                 </translations>
                             </concept_node>
@@ -3045,15 +3045,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -3491,15 +3491,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -4902,15 +4902,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -4923,15 +4923,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -4944,15 +4944,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -4965,15 +4965,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -4986,15 +4986,15 @@
                                                 <translations>
                                                     <translation>
                                                         <language>en-US</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -6924,15 +6924,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -6945,15 +6945,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -6966,15 +6966,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -6987,15 +6987,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7008,15 +7008,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7029,15 +7029,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7071,15 +7071,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7092,15 +7092,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7113,15 +7113,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7134,15 +7134,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -7155,15 +7155,15 @@
                                         <translations>
                                             <translation>
                                                 <language>en-US</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ja-JP</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                             <translation>
                                                 <language>ko-KR</language>
-                                                <approved>false</approved>
+                                                <approved>true</approved>
                                             </translation>
                                         </translations>
                                     </concept_node>
@@ -12998,6 +12998,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>NEXT</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>PDF_DOWNLOAD_BUTTON</name>
                                 <children>
@@ -70015,6 +70036,27 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>OPS_FLOW</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>PROJECT</name>
                         <definition_loaded>false</definition_loaded>
@@ -70057,6 +70099,48 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>TASK_BOARD</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>TASK_MANAGEMENT</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>WORKSPACE_HOME</name>
                         <definition_loaded>false</definition_loaded>
@@ -76162,49 +76246,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>ALT_E_ADD_TARGET</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_DELETE_TARGET</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_EDIT_TARGET</name>
+                        <name>ALL_CATEGORIES</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76225,28 +76267,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>ALT_S_ADD_TARGET</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_S_DELETE_TARGET</name>
+                        <name>ALT_E_ADD_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76267,7 +76288,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>ALT_S_EDIT_TARGET</name>
+                        <name>ALT_E_ASSIGN</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76288,7 +76309,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>ASSIGNEE_POOL</name>
+                        <name>ALT_E_CHANGE_DEFAULT_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76309,7 +76330,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>DEFAULT</name>
+                        <name>ALT_E_CREATE_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76330,7 +76351,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>DELETE_TARGET</name>
+                        <name>ALT_E_DELETE_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76351,7 +76372,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>DELETE_TARGET_CONFIRMATION</name>
+                        <name>ALT_E_EDIT_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76372,7 +76393,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>DELETE_TARGET_CONFIRMATION2</name>
+                        <name>ALT_E_UPDATE_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76393,7 +76414,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>DESCRIPTION</name>
+                        <name>ALT_S_ADD_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76414,7 +76435,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>EDIT_TARGET</name>
+                        <name>ALT_S_ASSIGN</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76435,7 +76456,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>FIELDS_CONFIG</name>
+                        <name>ALT_S_CHANGE_DEFAULT_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76456,7 +76477,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>FIELD_DESCRIPTION</name>
+                        <name>ALT_S_CREATE_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76477,7 +76498,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>NAME</name>
+                        <name>ALT_S_DELETE_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76498,7 +76519,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>SET_AS_DEFAULT</name>
+                        <name>ALT_S_EDIT_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76519,7 +76540,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>STATUS</name>
+                        <name>ALT_S_UPDATE_TARGET</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76540,7 +76561,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>STATUS_COMPLETED</name>
+                        <name>ASSIGNEE</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76561,7 +76582,7 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>STATUS_IN_PROGRESS</name>
+                        <name>ASSIGNEE_POOL</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76582,7 +76603,238 @@
                         </translations>
                     </concept_node>
                     <concept_node>
-                        <name>STATUS_TODO</name>
+                        <name>CATEGORY</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>
+                        <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_BY</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>CREATE_TARGET</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>DEFAULT</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>DELETE_TARGET</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>DELETE_TARGET_CONFIRMATION</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>DESCRIBE_FIELD</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>DESCRIPTION</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>EDIT_TARGET</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>FIELDS_CONFIG</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>FIELD_DESCRIPTION</name>
                         <definition_loaded>false</definition_loaded>
                         <description/>
                         <comment/>
@@ -76603,10 +76855,10 @@
                         </translations>
                     </concept_node>
                     <folder_node>
-                        <name>TASK_BOARD</name>
+                        <name>FIELD_GENERATOR</name>
                         <children>
                             <concept_node>
-                                <name>TASK_PROGRESS</name>
+                                <name>ASSET</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -76626,112 +76878,8 @@
                                     </translation>
                                 </translations>
                             </concept_node>
-                        </children>
-                    </folder_node>
-                    <folder_node>
-                        <name>TASK_MANAGEMENT</name>
-                        <children>
-                            <folder_node>
-                                <name>STATUS</name>
-                                <children>
-                                    <concept_node>
-                                        <name>DELETE_CONTINUE</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>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>
-                                </children>
-                            </folder_node>
-                            <folder_node>
-                                <name>TASK_TYPE</name>
-                                <children>
-                                    <concept_node>
-                                        <name>DELETE_UNAVAILABLE</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>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>
-                                </children>
-                            </folder_node>
-                        </children>
-                    </folder_node>
-                    <folder_node>
-                        <name>VALIDATION</name>
-                        <children>
                             <concept_node>
-                                <name>DUPLICATED</name>
+                                <name>DATE</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -76752,7 +76900,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>LENGTH_MAX</name>
+                                <name>DROPDOWN</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -76773,7 +76921,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>REQUIRED</name>
+                                <name>FIELD</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -76793,8 +76941,1723 @@
                                     </translation>
                                 </translations>
                             </concept_node>
-                        </children>
-                    </folder_node>
+                            <concept_node>
+                                <name>FIELD_DELETE_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>FIELD_NAME</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>FIELD_REQUIRED</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>GLOBAL</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>LABELS</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>PARAGRAPH</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>PROJECT</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>PROVIDER</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>REQUIRED</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>SERVICE_ACCOUNT</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>SHOW_TASK_CREATION</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>SHOW_TASK_CREATION_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>TASK_DESCRIPTION</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>TASK_TITLE</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>TEXT</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>USER</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>VALUE</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>
+                        </children>
+                    </folder_node>
+                    <concept_node>
+                        <name>FIELD_NAME</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>KEY</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>NAME</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>NO_AVAILABLE_TARGET</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>PACKAGE</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>PROJECT</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>SET_AS_DEFAULT</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>SHOW_MORE</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>STATUS</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>STATUS_COMPLETED</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>STATUS_IN_PROGRESS</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>STATUS_TODO</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>
+                        <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>TARGET_LIST</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>TASK_BOARD</name>
+                        <children>
+                            <concept_node>
+                                <name>ASSIGN</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>ASSIGN_TO</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>COMMENT</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>TASK_CONTENT</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>TASK_PROGRESS</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>TYPE_INFO</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>VIEW_ALL_TASKS</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>
+                        </children>
+                    </folder_node>
+                    <folder_node>
+                        <name>TASK_MANAGEMENT</name>
+                        <children>
+                            <concept_node>
+                                <name>ALT_E_DISABLE_LANDING</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_ENABLE_LANDING</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_S_DISABLE_LANDING</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_S_ENABLE_LANDING</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>CATEGORY</name>
+                                <children>
+                                    <concept_node>
+                                        <name>DELETE_CONFIRMATION_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>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>
+                                </children>
+                            </folder_node>
+                            <concept_node>
+                                <name>ENABLE_LANDING</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>ENABLE_LANDING_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>PACKAGE</name>
+                                <children>
+                                    <concept_node>
+                                        <name>ADDED</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>AFFECTED_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>CHANGE_STATUS</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>C_CATEGORY</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>C_IS</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>C_WORKSPACE</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>DELETE_UNAVAILABLE</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>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>REMOVED</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>SET_DEFAULT_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>SET_TARGET_AS_DEFAULT</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>SPECIFIC_WORKSPACE</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>UNCHANGED</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>UNSET</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>UPDATE_CONFIRMATION</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>UPDATE_CONFIRM_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>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>STATUS</name>
+                                <children>
+                                    <concept_node>
+                                        <name>DELETE_CONTINUE</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>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>SET_AS_DEFAULT</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>SET_DEFAULT_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>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>TASK_TYPE</name>
+                                <children>
+                                    <concept_node>
+                                        <name>DELETE_UNAVAILABLE</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>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>
+                                </children>
+                            </folder_node>
+                            <concept_node>
+                                <name>TEMPLATE_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>TEMPLATE_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>
+                        </children>
+                    </folder_node>
+                    <concept_node>
+                        <name>TITLE</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>
+                            <concept_node>
+                                <name>DUPLICATED</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>FIELD_REQUIRED</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>LENGTH_MAX</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>REQUIRED</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>UNSUPPORTED_FIELD_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>VALUE_ARRAY</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>VALUE_ONLY_ONE</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>VALUE_STRING</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>
+                        </children>
+                    </folder_node>
+                    <concept_node>
+                        <name>WORKSPACE</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>
                 </children>
             </folder_node>
             <folder_node>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index a404de9aa6..ae5c8372ad 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -707,6 +707,7 @@
 			"DONE": "Done",
 			"DOWNLOAD": "Download",
 			"EDIT": "Edit",
+			"NEXT": "Next",
 			"PDF_DOWNLOAD_BUTTON": {
 				"DESKTOP": "desktop",
 				"SUPPORT_PDF_HELP_TEXT": "This feature is not supported on your browser or device. Try again with {chrome} or {edge} browser on {desktop}."
@@ -3830,8 +3831,11 @@
 		"MY_PAGE_ACCOUNT_PROFILE": "Account & Profile",
 		"MY_PAGE_API_KEY": "Access with API & CLI",
 		"MY_PAGE_NOTIFICATIONS": "Notifications Channel",
+		"OPS_FLOW": "OpsFlow",
 		"PROJECT": "Project",
 		"PROVIDER": "Provider",
+		"TASK_BOARD": "{task} Board",
+		"TASK_MANAGEMENT": "Task Management",
 		"WORKSPACE_HOME": "Home"
 	},
 	"MONITORING": {
@@ -4170,6 +4174,138 @@
 		},
 		"SPACEONE_USER": "SpaceONE User "
 	},
+	"OPSFLOW": {
+		"ADD_TARGET": "Add {target}",
+		"ALL_CATEGORIES": "All Categories",
+		"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",
+		"ALT_E_CREATE_TARGET": "Failed to create {target}",
+		"ALT_E_DELETE_TARGET": "Failed to delete {target}",
+		"ALT_E_EDIT_TARGET": "Failed to edit {target}",
+		"ALT_E_UPDATE_TARGET": "Failed to update {target}",
+		"ALT_S_ADD_TARGET": "{target} successfully added",
+		"ALT_S_ASSIGN": "Successfully assigned",
+		"ALT_S_CHANGE_DEFAULT_TARGET": "{target} successfully updated as default",
+		"ALT_S_CREATE_TARGET": "{target} successfully created",
+		"ALT_S_DELETE_TARGET": "{target} successfully deleted",
+		"ALT_S_EDIT_TARGET": "{target} successfully edited",
+		"ALT_S_UPDATE_TARGET": "{target} successfully updated",
+		"ASSIGNEE": "Assignee",
+		"ASSIGNEE_POOL": "Assignee Pool",
+		"CATEGORY": "Category",
+		"CREATED_AT": "Created At",
+		"CREATED_BY": "Created By",
+		"CREATE_TARGET": "Create {target}",
+		"DEFAULT": "Default",
+		"DELETE_TARGET": "Delete {target}",
+		"DELETE_TARGET_CONFIRMATION": "Are you sure you want to delete this {object}?",
+		"DESCRIBE_FIELD": "Description this {field} in a few words.",
+		"DESCRIPTION": "Description",
+		"EDIT_TARGET": "Edit {target}",
+		"FIELDS_CONFIG": "Fields Configuration",
+		"FIELD_DESCRIPTION": "{field} Description",
+		"FIELD_GENERATOR": {
+			"ASSET": "Asset",
+			"DATE": "Date",
+			"DROPDOWN": "Dropdown",
+			"FIELD": "Field",
+			"FIELD_DELETE_DESC": "Deleting the {field} from {taskType} will also remove it from existing {task}.",
+			"FIELD_NAME": "Field Name",
+			"FIELD_REQUIRED": "This Field is Required",
+			"GLOBAL": "Global",
+			"LABELS": "Labels",
+			"PARAGRAPH": "Paragraph",
+			"PROJECT": "Project",
+			"PROVIDER": "Provider",
+			"REQUIRED": "Required",
+			"SERVICE_ACCOUNT": "Service Account",
+			"SHOW_TASK_CREATION": "Show on {task} Creation",
+			"SHOW_TASK_CREATION_DESC": "Display this field during task creation",
+			"TASK_DESCRIPTION": "{task} Description",
+			"TASK_TITLE": "{task} Title",
+			"TEXT": "Short Text",
+			"USER": "User",
+			"VALUE": "Value"
+		},
+		"FIELD_NAME": "{field} Name",
+		"KEY": "Key",
+		"NAME": "Name",
+		"NO_AVAILABLE_TARGET": "No Available {target}",
+		"PACKAGE": "Package",
+		"PROJECT": "Project",
+		"SET_AS_DEFAULT": "Set as Default",
+		"SHOW_MORE": "Show More",
+		"STATUS": "Status",
+		"STATUS_COMPLETED": "Completed",
+		"STATUS_IN_PROGRESS": "In Progress",
+		"STATUS_TODO": "To-do",
+		"SUPPORT_PACKAGE": "Support Package",
+		"TARGET_LIST": "{target} List",
+		"TASK_BOARD": {
+			"ASSIGN": "Assign",
+			"ASSIGN_TO": "Assign to",
+			"COMMENT": "Comment",
+			"TASK_CONTENT": "Content",
+			"TASK_PROGRESS": "{task} Progress",
+			"TYPE_INFO": "{type} Information",
+			"VIEW_ALL_TASKS": "View All {tasks}"
+		},
+		"TASK_MANAGEMENT": {
+			"ALT_E_DISABLE_LANDING": "Failed to disable landing page",
+			"ALT_E_ENABLE_LANDING": "Failed to enable landing page",
+			"ALT_S_DISABLE_LANDING": "Landing page successfully disabled",
+			"ALT_S_ENABLE_LANDING": "Landing page successfully enabled",
+			"CATEGORY": {
+				"DELETE_CONFIRMATION_DESC": "There are {tasks} under this category. Once deleted, the {tasks} cannot be edited. Are you sure you want to proceed?",
+				"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...",
+			"PACKAGE": {
+				"ADDED": "Added",
+				"AFFECTED_DESC": "The affected {workspace} and {category} are as follows.",
+				"CHANGE_STATUS": "Change Status",
+				"C_CATEGORY": "category | categories",
+				"C_IS": "is | are",
+				"C_WORKSPACE": "workspace | workspaces",
+				"DELETE_UNAVAILABLE": "The package cannot be deleted because there are linked categories.",
+				"DESC": "A set of features provided to users based on their contract, representing the full scope of the service.",
+				"REMOVED": "Removed",
+				"SET_DEFAULT_DESC": "This will make it the primary package for related operations.",
+				"SET_TARGET_AS_DEFAULT": "Set {target} as the default package",
+				"SPECIFIC_WORKSPACE": "Specific Workspaces",
+				"UNCHANGED": "Unchanged",
+				"UNSET": "Unset",
+				"UPDATE_CONFIRMATION": "Package Update Confirmation",
+				"UPDATE_CONFIRM_DESC": "Confirm that {category} {categoryList} {is} no longer supported in {workspace} {workspaceList}. "
+			},
+			"STATUS": {
+				"DELETE_CONTINUE": "Deleting this status will automatically change the status of all associated {task} to {default}. Do you want to proceed?",
+				"DESC": "Manage and configure the list of statuses for {tasks}.",
+				"SET_AS_DEFAULT": "Set {status} as the default status",
+				"SET_DEFAULT_DESC": "This will make it the primary status for related {tasks}."
+			},
+			"TASK_TYPE": {
+				"DELETE_UNAVAILABLE": "This {taskType} cannot be deleted because there are {tasks} below it.",
+				"DESC": "{taskTypes} define the fields and data included in a {task}.{br}\nYou can create multiple {taskTypes}, allowing users to select the most suitable one when submitting their {tasks}."
+			},
+			"TEMPLATE_DESC": "Template description",
+			"TEMPLATE_TYPE": "Template Type"
+		},
+		"TITLE": "Title",
+		"VALIDATION": {
+			"DUPLICATED": "{topic} already exists",
+			"FIELD_REQUIRED": "This field is required",
+			"LENGTH_MAX": "{topic} should be less than {length} characters",
+			"REQUIRED": "{topic} is required",
+			"UNSUPPORTED_FIELD_TYPE": "Unsupported field type",
+			"VALUE_ARRAY": "Value must be an array",
+			"VALUE_ONLY_ONE": "Only one value is allowed",
+			"VALUE_STRING": "Value must be a string"
+		},
+		"WORKSPACE": "Workspace"
+	},
 	"PAGE_SCHEMA": {
 		"ACCOUNT": "Account ID",
 		"BASE_INFO": "Base Information",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 34171b13cb..62ff07098a 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -707,6 +707,7 @@
 			"DONE": "完了",
 			"DOWNLOAD": "ダウンロード",
 			"EDIT": "",
+			"NEXT": "",
 			"PDF_DOWNLOAD_BUTTON": {
 				"DESKTOP": "デスクトップ",
 				"SUPPORT_PDF_HELP_TEXT": "この機能は、ご使用のブラウザまたはデバイスではサポートされていません。 {desktop}で{chrome}または{edge}ブラウザを使用して再試行してください。"
@@ -3830,8 +3831,11 @@
 		"MY_PAGE_ACCOUNT_PROFILE": "アカウント&プロフィール",
 		"MY_PAGE_API_KEY": "アクセス設定(API&CLI)",
 		"MY_PAGE_NOTIFICATIONS": "お知らせチャンネル",
+		"OPS_FLOW": "",
 		"PROJECT": "プロジェクト",
 		"PROVIDER": "プロバイダー",
+		"TASK_BOARD": "",
+		"TASK_MANAGEMENT": "",
 		"WORKSPACE_HOME": "ホーム"
 	},
 	"MONITORING": {
@@ -4170,6 +4174,138 @@
 		},
 		"SPACEONE_USER": "SpaceONEユーザー"
 	},
+	"OPSFLOW": {
+		"ADD_TARGET": "",
+		"ALL_CATEGORIES": "",
+		"ALT_E_ADD_TARGET": "",
+		"ALT_E_ASSIGN": "",
+		"ALT_E_CHANGE_DEFAULT_TARGET": "",
+		"ALT_E_CREATE_TARGET": "",
+		"ALT_E_DELETE_TARGET": "",
+		"ALT_E_EDIT_TARGET": "",
+		"ALT_E_UPDATE_TARGET": "",
+		"ALT_S_ADD_TARGET": "",
+		"ALT_S_ASSIGN": "",
+		"ALT_S_CHANGE_DEFAULT_TARGET": "",
+		"ALT_S_CREATE_TARGET": "",
+		"ALT_S_DELETE_TARGET": "",
+		"ALT_S_EDIT_TARGET": "",
+		"ALT_S_UPDATE_TARGET": "",
+		"ASSIGNEE": "",
+		"ASSIGNEE_POOL": "",
+		"CATEGORY": "",
+		"CREATED_AT": "",
+		"CREATED_BY": "",
+		"CREATE_TARGET": "",
+		"DEFAULT": "",
+		"DELETE_TARGET": "",
+		"DELETE_TARGET_CONFIRMATION": "",
+		"DESCRIBE_FIELD": "",
+		"DESCRIPTION": "",
+		"EDIT_TARGET": "",
+		"FIELDS_CONFIG": "",
+		"FIELD_DESCRIPTION": "",
+		"FIELD_GENERATOR": {
+			"ASSET": "",
+			"DATE": "",
+			"DROPDOWN": "",
+			"FIELD": "",
+			"FIELD_DELETE_DESC": "",
+			"FIELD_NAME": "",
+			"FIELD_REQUIRED": "",
+			"GLOBAL": "",
+			"LABELS": "",
+			"PARAGRAPH": "",
+			"PROJECT": "",
+			"PROVIDER": "",
+			"REQUIRED": "",
+			"SERVICE_ACCOUNT": "",
+			"SHOW_TASK_CREATION": "",
+			"SHOW_TASK_CREATION_DESC": "",
+			"TASK_DESCRIPTION": "",
+			"TASK_TITLE": "",
+			"TEXT": "",
+			"USER": "",
+			"VALUE": ""
+		},
+		"FIELD_NAME": "",
+		"KEY": "",
+		"NAME": "",
+		"NO_AVAILABLE_TARGET": "",
+		"PACKAGE": "",
+		"PROJECT": "",
+		"SET_AS_DEFAULT": "",
+		"SHOW_MORE": "",
+		"STATUS": "",
+		"STATUS_COMPLETED": "",
+		"STATUS_IN_PROGRESS": "",
+		"STATUS_TODO": "",
+		"SUPPORT_PACKAGE": "",
+		"TARGET_LIST": "",
+		"TASK_BOARD": {
+			"ASSIGN": "",
+			"ASSIGN_TO": "",
+			"COMMENT": "",
+			"TASK_CONTENT": "",
+			"TASK_PROGRESS": "",
+			"TYPE_INFO": "",
+			"VIEW_ALL_TASKS": ""
+		},
+		"TASK_MANAGEMENT": {
+			"ALT_E_DISABLE_LANDING": "",
+			"ALT_E_ENABLE_LANDING": "",
+			"ALT_S_DISABLE_LANDING": "",
+			"ALT_S_ENABLE_LANDING": "",
+			"CATEGORY": {
+				"DELETE_CONFIRMATION_DESC": "",
+				"DESC": ""
+			},
+			"ENABLE_LANDING": "",
+			"ENABLE_LANDING_DESC": "",
+			"PACKAGE": {
+				"ADDED": "",
+				"AFFECTED_DESC": "",
+				"CHANGE_STATUS": "",
+				"C_CATEGORY": "",
+				"C_IS": "",
+				"C_WORKSPACE": "",
+				"DELETE_UNAVAILABLE": "",
+				"DESC": "",
+				"REMOVED": "",
+				"SET_DEFAULT_DESC": "",
+				"SET_TARGET_AS_DEFAULT": "",
+				"SPECIFIC_WORKSPACE": "",
+				"UNCHANGED": "",
+				"UNSET": "",
+				"UPDATE_CONFIRMATION": "",
+				"UPDATE_CONFIRM_DESC": ""
+			},
+			"STATUS": {
+				"DELETE_CONTINUE": "",
+				"DESC": "",
+				"SET_AS_DEFAULT": "",
+				"SET_DEFAULT_DESC": ""
+			},
+			"TASK_TYPE": {
+				"DELETE_UNAVAILABLE": "",
+				"DESC": ""
+			},
+			"TEMPLATE_DESC": "",
+			"TEMPLATE_TYPE": ""
+		},
+		"TITLE": "",
+		"VALIDATION": {
+			"DUPLICATED": "",
+			"FIELD_REQUIRED": "",
+			"LENGTH_MAX": "",
+			"REQUIRED": "",
+			"UNSUPPORTED_FIELD_TYPE": "",
+			"VALUE_ARRAY": "",
+			"VALUE_ONLY_ONE": "",
+			"VALUE_STRING": ""
+		},
+		"WORKSPACE": ""
+	},
 	"PAGE_SCHEMA": {
 		"ACCOUNT": "アカウントID",
 		"BASE_INFO": "基本情報",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 0ef031e42f..5d92121fb5 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -707,6 +707,7 @@
 			"DONE": "완료",
 			"DOWNLOAD": "다운로드",
 			"EDIT": "수정",
+			"NEXT": "다음",
 			"PDF_DOWNLOAD_BUTTON": {
 				"DESKTOP": "데스크탑",
 				"SUPPORT_PDF_HELP_TEXT": "해당 기능을 지원하지 않는 브라우저 또는 디바이스입니다. {desktop} 환경의 {chrome} 또는 {edge} 브라우저에서 이용해주세요."
@@ -3830,8 +3831,11 @@
 		"MY_PAGE_ACCOUNT_PROFILE": "계정 & 프로필",
 		"MY_PAGE_API_KEY": "API & CLI 설정",
 		"MY_PAGE_NOTIFICATIONS": "알림 채널",
+		"OPS_FLOW": "옵스플로우",
 		"PROJECT": "프로젝트",
 		"PROVIDER": "프로바이더",
+		"TASK_BOARD": "{task} 보드",
+		"TASK_MANAGEMENT": "태스크 관리",
 		"WORKSPACE_HOME": "홈"
 	},
 	"MONITORING": {
@@ -4170,6 +4174,138 @@
 		},
 		"SPACEONE_USER": "스페이스원 사용자 "
 	},
+	"OPSFLOW": {
+		"ADD_TARGET": "{target} 추가",
+		"ALL_CATEGORIES": "모든 카테고리",
+		"ALT_E_ADD_TARGET": "{target} 추가 실패",
+		"ALT_E_ASSIGN": "담당자 할당 실패",
+		"ALT_E_CHANGE_DEFAULT_TARGET": "{target} 기본값 변경 실패",
+		"ALT_E_CREATE_TARGET": "{target} 생성 실패",
+		"ALT_E_DELETE_TARGET": "{target} 삭제 실패",
+		"ALT_E_EDIT_TARGET": "{target} 변경 실패",
+		"ALT_E_UPDATE_TARGET": "{target} 변경 실패",
+		"ALT_S_ADD_TARGET": "{target} 추가 완료",
+		"ALT_S_ASSIGN": "담당자 할당 완료",
+		"ALT_S_CHANGE_DEFAULT_TARGET": "{target} 기본값 변경 완료",
+		"ALT_S_CREATE_TARGET": "{target} 생성 완료",
+		"ALT_S_DELETE_TARGET": "{target} 삭제 완료",
+		"ALT_S_EDIT_TARGET": "{target} 변경 완료",
+		"ALT_S_UPDATE_TARGET": "{target} 변경 완료",
+		"ASSIGNEE": "담당자",
+		"ASSIGNEE_POOL": "담당자 풀",
+		"CATEGORY": "카테고리",
+		"CREATED_AT": "생성일",
+		"CREATED_BY": "생성자",
+		"CREATE_TARGET": "{target} 생성",
+		"DEFAULT": "기본",
+		"DELETE_TARGET": "{target} 삭제",
+		"DELETE_TARGET_CONFIRMATION": "정말 이 {object}{particle} 삭제하시겠습니까?",
+		"DESCRIBE_FIELD": "이 {field}{particle} 간단히 설명해주세요.",
+		"DESCRIPTION": "설명",
+		"EDIT_TARGET": "{target} 변경",
+		"FIELDS_CONFIG": "필드 설정",
+		"FIELD_DESCRIPTION": "{field} 설명",
+		"FIELD_GENERATOR": {
+			"ASSET": "자산",
+			"DATE": "날짜",
+			"DROPDOWN": "드롭다운",
+			"FIELD": "필드",
+			"FIELD_DELETE_DESC": "{taskType}의 {field}를 삭제하면, 기존 {task}에도 해당 필드 삭제가 반영됩니다.",
+			"FIELD_NAME": "필드 이름",
+			"FIELD_REQUIRED": "이 필드는 필수입니다",
+			"GLOBAL": "글로벌",
+			"LABELS": "라벨",
+			"PARAGRAPH": "서식 있는 텍스트",
+			"PROJECT": "프로젝트",
+			"PROVIDER": "프로바이더",
+			"REQUIRED": "필수",
+			"SERVICE_ACCOUNT": "서비스 어카운트",
+			"SHOW_TASK_CREATION": "{task} 생성 시 보이기",
+			"SHOW_TASK_CREATION_DESC": "태스크 생성 시 이 필드를 표시합니다",
+			"TASK_DESCRIPTION": "{task} 설명",
+			"TASK_TITLE": "{task} 제목",
+			"TEXT": "짧은 텍스트",
+			"USER": "사용자",
+			"VALUE": "값"
+		},
+		"FIELD_NAME": "{field} 이름",
+		"KEY": "키",
+		"NAME": "이름",
+		"NO_AVAILABLE_TARGET": "사용 가능한 {target} 없음",
+		"PACKAGE": "패키지",
+		"PROJECT": "프로젝트",
+		"SET_AS_DEFAULT": "기본으로 설정",
+		"SHOW_MORE": "더 보기",
+		"STATUS": "상태",
+		"STATUS_COMPLETED": "완료됨",
+		"STATUS_IN_PROGRESS": "진행 중",
+		"STATUS_TODO": "할 일",
+		"SUPPORT_PACKAGE": "지원 패키지",
+		"TARGET_LIST": "{target} 목록",
+		"TASK_BOARD": {
+			"ASSIGN": "할당하기",
+			"ASSIGN_TO": "담당자 할당",
+			"COMMENT": "댓글",
+			"TASK_CONTENT": "내용",
+			"TASK_PROGRESS": "태스크 진행상황",
+			"TYPE_INFO": "{type} 정보",
+			"VIEW_ALL_TASKS": "모든 {tasks} 보기"
+		},
+		"TASK_MANAGEMENT": {
+			"ALT_E_DISABLE_LANDING": "랜딩 페이지 비활성화 실패",
+			"ALT_E_ENABLE_LANDING": "랜딩 페이지 활성화 실패",
+			"ALT_S_DISABLE_LANDING": "랜딩 페이지 비활성화",
+			"ALT_S_ENABLE_LANDING": "랜딩 페이지 활성화",
+			"CATEGORY": {
+				"DELETE_CONFIRMATION_DESC": "이 카테고리 하위에 {tasks}{particle} 존재합니다. 삭제 시엔 {tasks} 수정이 불가합니다. 그래도 정말 삭제하시겠습니까?",
+				"DESC": "이는 {tasks}의 유형을 그룹화한 것입니다. 사용자는 {task}{taskObjectParticle} 제출할 때 적절한 카테고리를 선택하여 담당자가 {tasks}{tasksObjectParticle} 더 효율적으로 관리할 수 있도록 돕습니다."
+			},
+			"ENABLE_LANDING": "랜딩 페이지 활성화",
+			"ENABLE_LANDING_DESC": "랜딩페이지를 사용하면 어떻게 되는지 Description",
+			"PACKAGE": {
+				"ADDED": "추가됨",
+				"AFFECTED_DESC": "영향 받는 {workspace}와 {category}는 다음과 같습니다.",
+				"CHANGE_STATUS": "변경 여부",
+				"C_CATEGORY": "카테고리",
+				"C_IS": "",
+				"C_WORKSPACE": "워크스페이스",
+				"DELETE_UNAVAILABLE": "연결된 카테고리가 존재하므로 패키지 삭제가 불가합니다.",
+				"DESC": "계약에 따라 사용자에게 제공되는 기능의 집합으로, 전체 서비스의 범위를 나타냅니다.",
+				"REMOVED": "삭제됨",
+				"SET_DEFAULT_DESC": "이 패키지를 관련 작업에 사용할 기본 패키지로 변경합니다.",
+				"SET_TARGET_AS_DEFAULT": "{target} 패키지를 기본으로 설정",
+				"SPECIFIC_WORKSPACE": "워크스페이스 선택",
+				"UNCHANGED": "변경 없음",
+				"UNSET": "설정하지 않음",
+				"UPDATE_CONFIRMATION": "패키지 변경사항 확인",
+				"UPDATE_CONFIRM_DESC": "{workspaceList} 워크스페이스에서는 더 이상 {categoryList} 카테고리를 지원하지 않는 것을 확인했습니다."
+			},
+			"STATUS": {
+				"DELETE_CONTINUE": "이 상태를 삭제하면 연결된 모든 {task}의 상태가 {default}로 일괄 변경됩니다. 계속 하시겠습니까?",
+				"DESC": "{tasks}에 사용할 상태 목록을 설정하고 관리합니다.",
+				"SET_AS_DEFAULT": "{status}를 기본으로 설정",
+				"SET_DEFAULT_DESC": "이 상태가 관련 {tasks}의 기본 상태로 설정됩니다."
+			},
+			"TASK_TYPE": {
+				"DELETE_UNAVAILABLE": "하위 {tasks}{particle} 존재하므로 {taskType} 삭제가 불가합니다.",
+				"DESC": "{taskTypes}은(는) {task}에 포함되는 필드와 데이터를 정의합니다.{br}\n여러 {taskTypes}를 생성할 수 있으며, 사용자는 요청을 제출할 때 가장 적합한 {taskTypes}를 선택할 수 있습니다."
+			},
+			"TEMPLATE_DESC": "템플릿 설명",
+			"TEMPLATE_TYPE": "템플릿 타입"
+		},
+		"TITLE": "제목",
+		"VALIDATION": {
+			"DUPLICATED": "이미 존재하는 {field}입니다",
+			"FIELD_REQUIRED": "이 필드는 필수입니다",
+			"LENGTH_MAX": "{topic}{particle} {length}자 미만이어야 합니다",
+			"REQUIRED": "{topic}{particle} 필수입니다",
+			"UNSUPPORTED_FIELD_TYPE": "지원되지 않는 필드 타입입니다",
+			"VALUE_ARRAY": "값은 배열이어야 합니다",
+			"VALUE_ONLY_ONE": "값은 하나여야 합니다",
+			"VALUE_STRING": "값은 문자열이어야 합니다"
+		},
+		"WORKSPACE": "워크스페이스"
+	},
 	"PAGE_SCHEMA": {
 		"ACCOUNT": "어카운트",
 		"BASE_INFO": "기본 정보",
diff --git a/packages/mirinae/src/data-display/badge/PBadge.vue b/packages/mirinae/src/data-display/badge/PBadge.vue
index 27bba37fe3..af1f147cbf 100644
--- a/packages/mirinae/src/data-display/badge/PBadge.vue
+++ b/packages/mirinae/src/data-display/badge/PBadge.vue
@@ -133,6 +133,7 @@ const state = reactive({
     @mixin subtle peacock200, theme('colors.peacock.200'), theme('colors.peacock.700');
     @mixin subtle coral200, theme('colors.coral.200'), theme('colors.coral.700');
     @mixin subtle red200, theme('colors.red.200'), theme('colors.red.700');
+    @mixin subtle violet200, theme('colors.violet.200'), theme('colors.violet.700');
 }
 
 </style>
diff --git a/packages/mirinae/src/data-display/badge/type.ts b/packages/mirinae/src/data-display/badge/type.ts
index 8341da411d..076b6f614f 100644
--- a/packages/mirinae/src/data-display/badge/type.ts
+++ b/packages/mirinae/src/data-display/badge/type.ts
@@ -45,6 +45,7 @@ export const SUBTLE_STYLE_TYPE = {
     peacock200: 'peacock200',
     coral200: 'coral200',
     red200: 'red200',
+    violet200: 'violet200',
 } as const;
 export const BADGE_STYLE_TYPE = {
     ...SOLID_STYLE_TYPE,
diff --git a/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts b/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts
index 135f11ad3f..cdd4988612 100644
--- a/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts
+++ b/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts
@@ -1,10 +1,10 @@
 import type { COLLAPSIBLE_LIST_THEME, COLLAPSIBLE_LIST_TOGGLE_POSITION } from '@/data-display/collapsible/collapsible-list/config';
 import type { COLLAPSIBLE_TOGGLE_TYPE } from '@/data-display/collapsible/collapsible-toggle/type';
 
-export interface CollapsibleItem {
+export interface CollapsibleItem<T = string> {
     name?: string;
     title?: string;
-    data: string;
+    data: T;
 }
 
 export interface CollapsibleListProps {
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_check-circle.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_check-circle.svg
index 16cfbffcdf..2446c28705 100644
--- a/packages/mirinae/src/foundation/icons/icon-assets/ic_check-circle.svg
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_check-circle.svg
@@ -1,13 +1,4 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<g opacity="0.75">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.79203 4.66246C8.92467 4.27599 7.95563 4.18025 7.02941 4.38952C6.1032 4.59878 5.26944 5.10184 4.6525 5.82367C4.03555 6.5455 3.66846 7.44742 3.60598 8.39493C3.5435 9.34243 3.78898 10.2847 4.30581 11.0813C4.82263 11.8779 5.58311 12.4861 6.47383 12.8152C7.36454 13.1443 8.33777 13.1766 9.24836 12.9073C10.159 12.6381 10.9581 12.0817 11.5267 11.3212C12.0952 10.5607 12.4027 9.63673 12.4032 8.68717V8.23635C12.4032 7.9602 12.6271 7.73635 12.9032 7.73635C13.1794 7.73635 13.4032 7.9602 13.4032 8.23635V8.68746C13.4026 9.85266 13.0253 10.9867 12.3276 11.92C11.6299 12.8532 10.6493 13.5359 9.5319 13.8663C8.41451 14.1967 7.22027 14.157 6.12727 13.7532C5.03428 13.3494 4.1011 12.6031 3.4669 11.6256C2.83271 10.6481 2.53148 9.49181 2.60815 8.32913C2.68481 7.16645 3.13527 6.05971 3.89232 5.17395C4.64938 4.2882 5.67248 3.67089 6.80903 3.4141C7.94558 3.15731 9.1347 3.2748 10.199 3.74904C10.4513 3.86143 10.5646 4.15701 10.4522 4.40925C10.3398 4.66149 10.0443 4.77485 9.79203 4.66246Z" fill="#A8A5CE"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.644 5.40584C12.834 5.60615 12.8257 5.92262 12.6254 6.1127L8.34418 10.1752C8.15918 10.3507 7.87172 10.3589 7.67704 10.1942L5.64579 8.47544C5.43499 8.29707 5.4087 7.98158 5.58707 7.77078C5.76544 7.55998 6.08093 7.53369 6.29173 7.71206L7.9809 9.14136L11.9371 5.3873C12.1374 5.19723 12.4539 5.20552 12.644 5.40584Z" fill="#A8A5CE"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="12.2" height="12.2" fill="white" transform="translate(1.8999 2.40002)"/>
-</clipPath>
-</defs>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.79227 4.16246C8.92491 3.77599 7.95587 3.68025 7.02966 3.88952C6.10344 4.09878 5.26969 4.60184 4.65274 5.32367C4.03579 6.0455 3.6687 6.94742 3.60623 7.89493C3.54375 8.84243 3.78923 9.78474 4.30605 10.5813C4.82288 11.3779 5.58335 11.9861 6.47407 12.3152C7.36479 12.6443 8.33801 12.6766 9.2486 12.4073C10.1592 12.1381 10.9584 11.5817 11.5269 10.8212C12.0955 10.0607 12.4029 9.13673 12.4035 8.18717V7.73635C12.4035 7.4602 12.6273 7.23635 12.9035 7.23635C13.1796 7.23635 13.4035 7.4602 13.4035 7.73635V8.18746C13.4028 9.35266 13.0255 10.4867 12.3278 11.42C11.6302 12.3532 10.6495 13.0359 9.53214 13.3663C8.41476 13.6967 7.22051 13.657 6.12752 13.2532C5.03452 12.8494 4.10134 12.1031 3.46715 11.1256C2.83295 10.1481 2.53173 8.99181 2.60839 7.82913C2.68506 6.66645 3.13551 5.55971 3.89257 4.67395C4.64962 3.7882 5.67272 3.17089 6.80927 2.9141C7.94583 2.65731 9.13494 2.7748 10.1993 3.24904C10.4515 3.36143 10.5649 3.65701 10.4525 3.90925C10.3401 4.16149 10.0445 4.27485 9.79227 4.16246Z" fill="#232533"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6443 4.90578C12.8344 5.10609 12.8261 5.42256 12.6257 5.61264L8.3445 9.67514C8.1595 9.85068 7.87204 9.85887 7.67736 9.69414L5.64611 7.97539C5.43531 7.79701 5.40902 7.48153 5.58739 7.27072C5.76576 7.05992 6.08125 7.03363 6.29205 7.212L7.98122 8.6413L11.9374 4.88725C12.1377 4.69717 12.4542 4.70546 12.6443 4.90578Z" fill="#232533"/>
 </svg>
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_dropdown.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_dropdown.svg
new file mode 100644
index 0000000000..094f1266ba
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_dropdown.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.5 7.5H23.5L25 9.5L26.5 7.5Z" fill="black"/>
+<path d="M16 16H7V18H16V16Z" fill="black"/>
+<path d="M7 21H16V23H7V21Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 29C21.1046 29 22 28.1046 22 27V14H28C29.1046 14 30 13.1046 30 12V5C30 3.89543 29.1046 3 28 3H4C2.89543 3 2 3.89543 2 5V27C2 28.1046 2.89543 29 4 29H20ZM28 5V12H22V5H28ZM20 5L4 5L4 12H20V5ZM4 27L4 14L20 14V27H4Z" fill="black"/>
+</svg>
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_paragraph.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_paragraph.svg
new file mode 100644
index 0000000000..d98cf024bf
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_paragraph.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 4H13C11.1435 4 9.36301 4.7375 8.05025 6.05025C6.7375 7.36301 6 9.14348 6 11C6 12.8565 6.7375 14.637 8.05025 15.9497C9.36301 17.2625 11.1435 18 13 18V28H15V6H20V28H22V6H27V4ZM13 16C11.6739 16 10.4021 15.4732 9.46447 14.5355C8.52678 13.5979 8 12.3261 8 11C8 9.67392 8.52678 8.40215 9.46447 7.46447C10.4021 6.52678 11.6739 6 13 6V16Z" fill="#232533"/>
+</svg>
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_short-text.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_short-text.svg
new file mode 100644
index 0000000000..bf912d7af6
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_short-text.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 12H20V14H25C25.2652 14 25.5196 14.1054 25.7071 14.2929C25.8946 14.4804 26 14.7348 26 15V17H22C21.2046 17.0008 20.442 17.3171 19.8796 17.8796C19.3171 18.442 19.0008 19.2046 19 20V21C19.0008 21.7954 19.3171 22.558 19.8796 23.1204C20.442 23.6829 21.2046 23.9992 22 24H28V15C27.9992 14.2046 27.6829 13.442 27.1204 12.8796C26.558 12.3171 25.7954 12.0008 25 12ZM22 22C21.7348 22 21.4804 21.8946 21.2929 21.7071C21.1054 21.5196 21 21.2652 21 21V20C21 19.7348 21.1054 19.4804 21.2929 19.2929C21.4804 19.1054 21.7348 19 22 19H26V22H22ZM16 24H18L12 7H10L4 24H6L7.694 19H14.307L16 24ZM8.371 17L10.868 9.629H11.134L13.63 17H8.371Z" fill="#232533"/>
+</svg>
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_check-circle.js b/packages/mirinae/src/foundation/icons/p-icons/ic_check-circle.js
index 8f78be7cd0..a4ace8d487 100644
--- a/packages/mirinae/src/foundation/icons/p-icons/ic_check-circle.js
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_check-circle.js
@@ -5,8 +5,8 @@ import icon from 'vue-svgicon'
 icon.register({
   'ic_check-circle': {
     width: 16,
-    height: 17,
-    viewBox: '0 0 16 17',
-    data: '<g opacity=".75" fill-rule="evenodd" clip-rule="evenodd" _fill="#A8A5CE" clip-path="url(#clip0)"><path pid="0" d="M9.792 4.662a4.403 4.403 0 102.611 4.025v-.45a.5.5 0 011 0v.45A5.404 5.404 0 1110.2 3.75a.5.5 0 11-.407.913z"/><path pid="1" d="M12.644 5.406a.5.5 0 01-.019.707l-4.28 4.062a.5.5 0 01-.668.02l-2.031-1.72a.5.5 0 01.646-.763l1.689 1.43 3.956-3.755a.5.5 0 01.707.019z"/></g><defs><clipPath id="clip0"><path pid="2" _fill="#fff" transform="translate(1.9 2.4)" d="M0 0h12.2v12.2H0z"/></clipPath></defs>'
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.792 4.162a4.403 4.403 0 102.611 4.025v-.45a.5.5 0 111 0v.45A5.405 5.405 0 1110.2 3.25a.5.5 0 01-.407.913z" _fill="#232533"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M12.644 4.906a.5.5 0 01-.018.707L8.345 9.675a.5.5 0 01-.668.02l-2.03-1.72a.5.5 0 01.645-.763l1.69 1.43 3.955-3.755a.5.5 0 01.707.019z" _fill="#232533"/>'
   }
 })
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_dropdown.js b/packages/mirinae/src/foundation/icons/p-icons/ic_dropdown.js
new file mode 100644
index 0000000000..9753b28fdc
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_dropdown.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_dropdown': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" d="M26.5 7.5h-3l1.5 2 1.5-2zM16 16H7v2h9v-2zM7 21h9v2H7v-2z" _fill="#000"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M20 29a2 2 0 002-2V14h6a2 2 0 002-2V5a2 2 0 00-2-2H4a2 2 0 00-2 2v22a2 2 0 002 2h16zm8-24v7h-6V5h6zm-8 0H4v7h16V5zM4 27V14h16v13H4z" _fill="#000"/>'
+  }
+})
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_paragraph.js b/packages/mirinae/src/foundation/icons/p-icons/ic_paragraph.js
new file mode 100644
index 0000000000..7535a373b3
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_paragraph.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_paragraph': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" d="M27 4H13a7 7 0 000 14v10h2V6h5v22h2V6h5V4zM13 16a5 5 0 110-10v10z" _fill="#232533"/>'
+  }
+})
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_short-text.js b/packages/mirinae/src/foundation/icons/p-icons/ic_short-text.js
new file mode 100644
index 0000000000..39b4e7bcea
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_short-text.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_short-text': {
+    width: 32,
+    height: 32,
+    viewBox: '0 0 32 32',
+    data: '<path pid="0" d="M25 12h-5v2h5a1 1 0 011 1v2h-4a3.003 3.003 0 00-3 3v1a3.003 3.003 0 003 3h6v-9a3.003 3.003 0 00-3-3zm-3 10a1 1 0 01-1-1v-1a1 1 0 011-1h4v3h-4zm-6 2h2L12 7h-2L4 24h2l1.694-5h6.613L16 24zm-7.629-7l2.497-7.371h.266L13.63 17H8.371z" _fill="#232533"/>'
+  }
+})
diff --git a/packages/mirinae/src/foundation/icons/p-icons/index.js b/packages/mirinae/src/foundation/icons/p-icons/index.js
index 44987e6937..f85446fd5e 100644
--- a/packages/mirinae/src/foundation/icons/p-icons/index.js
+++ b/packages/mirinae/src/foundation/icons/p-icons/index.js
@@ -109,6 +109,7 @@ import './ic_double-line-drag-handle'
 import './ic_download'
 import './ic_drag-handle-alt'
 import './ic_drag-handle'
+import './ic_dropdown'
 import './ic_edit-text'
 import './ic_edit'
 import './ic_editor-code'
@@ -172,6 +173,7 @@ import './ic_no-edit'
 import './ic_no-image'
 import './ic_notification-protocol_envelope'
 import './ic_paper-airplane'
+import './ic_paragraph'
 import './ic_peacock-gradient-circle'
 import './ic_performance-filled'
 import './ic_pin-filled'
@@ -240,6 +242,7 @@ import './ic_settings-filled'
 import './ic_settings'
 import './ic_share-code'
 import './ic_share'
+import './ic_short-text'
 import './ic_sorting-ascending'
 import './ic_sorting-descending'
 import './ic_spanner-filled'