diff --git a/apps/web/src/api-clients/opsflow/_types/task-field-type.ts b/apps/web/src/api-clients/opsflow/_types/task-field-type.ts
index 1cb2a8e12a..ee7c81085b 100644
--- a/apps/web/src/api-clients/opsflow/_types/task-field-type.ts
+++ b/apps/web/src/api-clients/opsflow/_types/task-field-type.ts
@@ -17,7 +17,8 @@ export interface TaskFieldOptions { // union of all task field options
 }
 
 /* task field options by type */
-interface TextTaskFieldOptions {
+export interface TextTaskFieldOptions {
+    description?: string;
     example?: string;
     max_length?: number;
 }
diff --git a/apps/web/src/api-clients/opsflow/task-category/composables/use-task-category-api.ts b/apps/web/src/api-clients/opsflow/task-category/composables/use-task-category-api.ts
index e69de29bb2..0ddeca22a7 100644
--- a/apps/web/src/api-clients/opsflow/task-category/composables/use-task-category-api.ts
+++ b/apps/web/src/api-clients/opsflow/task-category/composables/use-task-category-api.ts
@@ -0,0 +1,55 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { TaskCategoryCreateParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/create';
+import type { TaskCategoryDeleteParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/delete';
+import type { TaskCategoryGetParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/get';
+import type { TaskCategoryListParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/list';
+import type { TaskCategoryUpdateParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/update';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+
+interface UseTaskCategoryApiReturn {
+    taskCategoryQueryKey: ComputedRef<QueryKey>;
+    taskCategoryListQueryKey: ComputedRef<QueryKey>;
+    taskCategoryAPI: {
+        create: (params: TaskCategoryCreateParameters) => Promise<TaskCategoryModel>;
+        update: (params: TaskCategoryUpdateParameters) => Promise<TaskCategoryModel>;
+        delete: (params: TaskCategoryDeleteParameters) => Promise<void>;
+        get: (params: TaskCategoryGetParameters) => Promise<TaskCategoryModel>;
+        list: (params: TaskCategoryListParameters) => Promise<ListResponse<TaskCategoryModel>>;
+    }
+}
+
+export const useTaskCategoryApi = (): UseTaskCategoryApiReturn => {
+    const taskCategoryQueryKey = useAPIQueryKey('opsflow/task-category/get');
+    const taskCategoryListQueryKey = useAPIQueryKey('opsflow/task-category/list');
+
+    const actions = {
+        async create(params: TaskCategoryCreateParameters) {
+            return SpaceConnector.clientV2.opsflow.taskCategory.create<TaskCategoryCreateParameters, TaskCategoryModel>(params);
+        },
+        async update(params: TaskCategoryUpdateParameters) {
+            return SpaceConnector.clientV2.opsflow.taskCategory.update<TaskCategoryUpdateParameters, TaskCategoryModel>(params);
+        },
+        async delete(params: TaskCategoryDeleteParameters) {
+            return SpaceConnector.clientV2.opsflow.taskCategory.delete<TaskCategoryDeleteParameters>(params);
+        },
+        async get(params: TaskCategoryGetParameters) {
+            return SpaceConnector.clientV2.opsflow.taskCategory.get<TaskCategoryGetParameters, TaskCategoryModel>(params);
+        },
+        async list(params: TaskCategoryListParameters) {
+            return SpaceConnector.clientV2.opsflow.taskCategory.list<TaskCategoryListParameters, ListResponse<TaskCategoryModel>>(params);
+        },
+    };
+
+    return {
+        taskCategoryQueryKey,
+        taskCategoryListQueryKey,
+        taskCategoryAPI: actions,
+    };
+};
diff --git a/apps/web/src/api-clients/opsflow/task-type/composables/use-task-type-api.ts b/apps/web/src/api-clients/opsflow/task-type/composables/use-task-type-api.ts
index e69de29bb2..e0bf5089b4 100644
--- a/apps/web/src/api-clients/opsflow/task-type/composables/use-task-type-api.ts
+++ b/apps/web/src/api-clients/opsflow/task-type/composables/use-task-type-api.ts
@@ -0,0 +1,60 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { TaskTypeCreateParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/create';
+import type { TaskTypeDeleteParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/delete';
+import type { TaskTypeGetParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/get';
+import type { TaskTypeListParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/list';
+import type { TaskTypeUpdateParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/update';
+import type { TaskTypeUpdateFieldsParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/update-fields';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+
+interface UseTaskTypeApiReturn {
+    taskTypeQueryKey: ComputedRef<QueryKey>;
+    taskTypeListQueryKey: ComputedRef<QueryKey>;
+    taskTypeAPI: {
+        create: (params: TaskTypeCreateParameters) => Promise<TaskTypeModel>;
+        update: (params: TaskTypeUpdateParameters) => Promise<TaskTypeModel>;
+        delete: (params: TaskTypeDeleteParameters) => Promise<void>;
+        get: (params: TaskTypeGetParameters) => Promise<TaskTypeModel>;
+        list: (params: TaskTypeListParameters) => Promise<ListResponse<TaskTypeModel>>;
+        updateFields: (params: TaskTypeUpdateFieldsParameters) => Promise<TaskTypeModel>;
+    }
+}
+
+export const useTaskTypeApi = (): UseTaskTypeApiReturn => {
+    const taskTypeQueryKey = useAPIQueryKey('opsflow/task-type/get');
+    const taskTypeListQueryKey = useAPIQueryKey('opsflow/task-type/list');
+
+    const actions = {
+        async create(params: TaskTypeCreateParameters) {
+            return SpaceConnector.clientV2.opsflow.taskType.create<TaskTypeCreateParameters, TaskTypeModel>(params);
+        },
+        async update(params: TaskTypeUpdateParameters) {
+            return SpaceConnector.clientV2.opsflow.taskType.update<TaskTypeUpdateParameters, TaskTypeModel>(params);
+        },
+        async delete(params: TaskTypeDeleteParameters) {
+            return SpaceConnector.clientV2.opsflow.taskType.delete<TaskTypeDeleteParameters>(params);
+        },
+        async get(params: TaskTypeGetParameters) {
+            return SpaceConnector.clientV2.opsflow.taskType.get<TaskTypeGetParameters, TaskTypeModel>(params);
+        },
+        async list(params: TaskTypeListParameters) {
+            return SpaceConnector.clientV2.opsflow.taskType.list<TaskTypeListParameters, ListResponse<TaskTypeModel>>(params);
+        },
+        async updateFields(params: TaskTypeUpdateFieldsParameters) {
+            return SpaceConnector.clientV2.opsflow.taskType.updateFields<TaskTypeUpdateFieldsParameters, TaskTypeModel>(params);
+        },
+    };
+
+    return {
+        taskTypeQueryKey,
+        taskTypeListQueryKey,
+        taskTypeAPI: actions,
+    };
+};
diff --git a/apps/web/src/api-clients/opsflow/task/composables/use-task-api.ts b/apps/web/src/api-clients/opsflow/task/composables/use-task-api.ts
index e69de29bb2..e60c0f83de 100644
--- a/apps/web/src/api-clients/opsflow/task/composables/use-task-api.ts
+++ b/apps/web/src/api-clients/opsflow/task/composables/use-task-api.ts
@@ -0,0 +1,70 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { TaskChangeAssigneeParameters } from '@/api-clients/opsflow/task/schema/api-verbs/change-assignee';
+import type { TaskChangeStatusParameters } from '@/api-clients/opsflow/task/schema/api-verbs/change-status';
+import type { TaskCreateParameters } from '@/api-clients/opsflow/task/schema/api-verbs/create';
+import type { TaskDeleteParameters } from '@/api-clients/opsflow/task/schema/api-verbs/delete';
+import type { TaskGetParameters } from '@/api-clients/opsflow/task/schema/api-verbs/get';
+import type { TaskListParameters } from '@/api-clients/opsflow/task/schema/api-verbs/list';
+import type { TaskUpdateParameters } from '@/api-clients/opsflow/task/schema/api-verbs/update';
+import type { TaskUpdateDescriptionParameters } from '@/api-clients/opsflow/task/schema/api-verbs/update-description';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
+
+interface UseTaskApiReturn {
+    taskQueryKey: ComputedRef<QueryKey>;
+    taskListQueryKey: ComputedRef<QueryKey>;
+    taskAPI: {
+        create: (params: TaskCreateParameters) => Promise<TaskModel>;
+        update: (params: TaskUpdateParameters) => Promise<TaskModel>;
+        delete: (params: TaskDeleteParameters) => Promise<void>;
+        get: (params: TaskGetParameters) => Promise<TaskModel>;
+        list: (params: TaskListParameters) => Promise<ListResponse<TaskModel>>;
+        changeAssignee: (params: TaskChangeAssigneeParameters) => Promise<TaskModel>;
+        changeStatus: (params: TaskChangeStatusParameters) => Promise<TaskModel>;
+        updateDescription: (params: TaskUpdateDescriptionParameters) => Promise<TaskModel>;
+    }
+}
+
+export const useTaskApi = (): UseTaskApiReturn => {
+    const taskQueryKey = useAPIQueryKey('opsflow/task/get');
+    const taskListQueryKey = useAPIQueryKey('opsflow/task/list');
+
+    const actions = {
+        async create(params: TaskCreateParameters) {
+            return SpaceConnector.clientV2.opsflow.task.create<TaskCreateParameters, TaskModel>(params);
+        },
+        async update(params: TaskUpdateParameters) {
+            return SpaceConnector.clientV2.opsflow.task.update<TaskUpdateParameters, TaskModel>(params);
+        },
+        async delete(params: TaskDeleteParameters) {
+            return SpaceConnector.clientV2.opsflow.task.delete<TaskDeleteParameters>(params);
+        },
+        async get(params: TaskGetParameters) {
+            return SpaceConnector.clientV2.opsflow.task.get<TaskGetParameters, TaskModel>(params);
+        },
+        async list(params: TaskListParameters) {
+            return SpaceConnector.clientV2.opsflow.task.list<TaskListParameters, ListResponse<TaskModel>>(params);
+        },
+        async changeAssignee(params: TaskChangeAssigneeParameters) {
+            return SpaceConnector.clientV2.opsflow.task.changeAssignee<TaskChangeAssigneeParameters, TaskModel>(params);
+        },
+        async changeStatus(params: TaskChangeStatusParameters) {
+            return SpaceConnector.clientV2.opsflow.task.changeStatus<TaskChangeStatusParameters, TaskModel>(params);
+        },
+        async updateDescription(params: TaskUpdateDescriptionParameters) {
+            return SpaceConnector.clientV2.opsflow.task.updateDescription<TaskUpdateDescriptionParameters, TaskModel>(params);
+        },
+    };
+
+    return {
+        taskQueryKey,
+        taskListQueryKey,
+        taskAPI: actions,
+    };
+};
diff --git a/apps/web/src/common/components/editor/text-editor-nodes.pcss b/apps/web/src/common/components/editor/text-editor-nodes.pcss
index 8602905579..a39d91c52a 100644
--- a/apps/web/src/common/components/editor/text-editor-nodes.pcss
+++ b/apps/web/src/common/components/editor/text-editor-nodes.pcss
@@ -157,6 +157,7 @@
         @apply bg-gray-100 rounded-lg;
         margin-top: 0.75rem;
         padding: 0.5rem 1rem;
+        white-space: pre-wrap;
         > code {
             font-family: $font-code;
             font-size: 0.875rem;
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue b/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue
index 125cbdc1ed..5a7a2d92e4 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskNameField.vue
@@ -25,9 +25,11 @@ const props = defineProps<{
                         taskId: props.taskId,
                     },
                 }"
+                class="leading-lg"
                 :highlight="!props.linkNewTab"
                 :action-icon="props.linkNewTab ? 'internal-link' : 'none'"
                 :new-tab="props.linkNewTab"
+                line-height="1.25"
         />
     </p-collapsible-panel>
 </template>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
index b16db8fe1b..c0be3b96cd 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import {
-    reactive, ref, watch, toRaw, computed,
+    reactive, ref, toRaw, computed,
+    watch,
 } from 'vue';
 
+import { useQuery } from '@tanstack/vue-query';
+
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+import type { APIError } from '@cloudforet/core-lib/space-connector/error';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 import {
@@ -15,6 +19,7 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 
 import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
 import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import { useTaskApi } from '@/api-clients/opsflow/task/composables/use-task-api';
 import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n } from '@/translations';
 
@@ -26,7 +31,6 @@ import ProjectLinkButton from '@/common/modules/project/ProjectLinkButton.vue';
 
 import BoardTaskFilters from '@/services/ops-flow/components/BoardTaskFilters.vue';
 import BoardTaskNameField from '@/services/ops-flow/components/BoardTaskNameField.vue';
-import { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 import {
@@ -39,14 +43,12 @@ const props = defineProps<{
     relatedAssets?: string[];
     tag?: string;
 }>();
+
 const taskTypeStore = useTaskTypeStore();
 const taskCategoryStore = useTaskCategoryStore();
 const userReferenceStore = useUserReferenceStore();
 const taskManagementTemplateStore = useTaskManagementTemplateStore();
 
-const loading = ref<boolean>(false);
-const taskAPI = useTaskAPI();
-const tasks = ref<TaskModel[]|undefined>(undefined);
 const categoriesById = computed<Record<string, TaskCategoryModel>>(() => {
     const map = {} as Record<string, TaskCategoryModel>;
     taskCategoryStore.getters.taskCategoriesIncludingDeleted.forEach((category) => {
@@ -86,7 +88,7 @@ const getStatusStyleType = (category: TaskCategoryModel|undefined, statusId: str
 };
 const { getTimezoneDate, getDuration } = useTimezoneDate();
 
-/* query */
+/* api query */
 const search = ref<string>('');
 const pagination = reactive({
     page: 1,
@@ -97,38 +99,59 @@ const sort = reactive({
     key: 'created_at',
     desc: true,
 });
-const queryHelper = new ApiQueryHelper();
-const getQuery = (filters?: ConsoleFilter[]) => {
-    queryHelper.setFilters(filters ?? [])
+const taskFilters = ref<ConsoleFilter[]>([]);
+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: '=' });
+    taskFilters.value = _taskFilterHelper.filters;
+};
+const _taskListQueryHelper = new ApiQueryHelper();
+const taskListApiQuery = computed<Query>(() => {
+    _taskListQueryHelper.setFilters(taskFilters.value)
         .setMultiSortV2([toRaw(sort)])
         .setPage(pagination.page, pagination.size);
-    if (search.value) queryHelper.addFilter({ v: search.value });
-    if (props.categoryId) queryHelper.addFilter({ k: 'category_id', v: props.categoryId, o: '=' });
-    if (props.relatedAssets) queryHelper.addFilter({ k: 'related_asset_id', v: props.relatedAssets, o: '=' });
-
-    return queryHelper.dataV2;
-};
+    if (search.value) _taskListQueryHelper.addFilter({ v: search.value });
+    if (props.categoryId) _taskListQueryHelper.addFilter({ k: 'category_id', v: props.categoryId, o: '=' });
+    if (props.relatedAssets) _taskListQueryHelper.addFilter({ k: 'related_asset_id', v: props.relatedAssets, o: '=' });
+    return _taskListQueryHelper.dataV2;
+});
 
 /* list */
-const listTask = async (query: Query) => {
-    try {
-        loading.value = true;
-        const results = await taskAPI.list({
-            query,
+const { taskListQueryKey, taskAPI } = useTaskApi();
+const hasCategoriesAndTypesLoaded = ref<boolean>(false);
+
+const {
+    data: tasks, error, refetch, isLoading,
+} = useQuery<TaskModel[], APIError>({
+    queryKey: computed(() => [
+        taskListQueryKey.value,
+        taskListApiQuery.value,
+        props.categoryId,
+    ]),
+    queryFn: async ({ queryKey }) => {
+        const { results } = await taskAPI.list({
+            query: queryKey[1] as Query,
         });
-        if (results) {
-            tasks.value = results;
-            loading.value = false;
-        }
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        loading.value = false;
-        tasks.value = undefined;
-    }
-};
-let hasCategoriesAndTypesLoaded = false;
+        return results ?? [];
+    },
+    enabled: computed(() => hasCategoriesAndTypesLoaded.value),
+    retry: false,
+    // time control
+    gcTime: 1000 * 60 * 2, // 2 minutes
+    staleTime: 1000 * 30, // 30 seconds
+});
+
+watch(error, (err) => {
+    if (err) ErrorHandler.handleError(err);
+});
+
 const listCategoriesAndTaskTypes = async () => {
-    if (hasCategoriesAndTypesLoaded) return;
+    if (hasCategoriesAndTypesLoaded.value) return;
     const results = await Promise.allSettled([
         taskCategoryStore.list(),
         taskTypeStore.list({
@@ -146,17 +169,15 @@ const listCategoriesAndTaskTypes = async () => {
         }
     });
     taskTypesById.value = { ...taskTypesById.value };
-    hasCategoriesAndTypesLoaded = true;
+    hasCategoriesAndTypesLoaded.value = true;
 };
 
 listCategoriesAndTaskTypes();
-watch(() => props.categoryId, () => {
-    listTask(getQuery());
-}, { immediate: true });
 
 /* toolbox */
 const handleRefresh = () => {
-    listTask(getQuery());
+    refetch();
+    // refetch({ throwOnError: true, cancelRefetch: false });
 };
 const handleChange = (options: ToolboxOptions) => {
     if (options.searchText !== undefined) search.value = options.searchText;
@@ -164,19 +185,6 @@ const handleChange = (options: ToolboxOptions) => {
     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 */
@@ -240,7 +248,7 @@ const fields = computed<DataTableField[] >(() => [
         </div>
         <p-data-table :fields="fields"
                       :items="tasks"
-                      :loading="loading"
+                      :loading="isLoading"
                       class="w-auto"
         >
             <template #col-name-format="{item}">
diff --git a/apps/web/src/services/ops-flow/components/TaskAssignModal.vue b/apps/web/src/services/ops-flow/components/TaskAssignModal.vue
index 9e535990e1..a8bad4a647 100644
--- a/apps/web/src/services/ops-flow/components/TaskAssignModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskAssignModal.vue
@@ -8,7 +8,8 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 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 { useTaskApi } from '@/api-clients/opsflow/task/composables/use-task-api';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n } from '@/translations';
 
 import type { UserReferenceItem } from '@/store/reference/user-reference-store';
@@ -18,7 +19,6 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 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';
@@ -28,7 +28,7 @@ const taskAssignStore = useTaskAssignStore();
 const taskContentFormStore = useTaskContentFormStore();
 const taskDetailPageStore = useTaskDetailPageStore();
 
-const taskAPI = useTaskAPI();
+const { taskAPI } = useTaskApi();
 
 const fields: DataTableField[] = [
     { label: 'User ID', name: 'name' },
@@ -76,7 +76,10 @@ 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 taskAPI.changeAssignee(taskAssignStore.state.taskId, refinedUserItems.value[selectIndex.value[0]].name);
+        const newTask = await taskAPI.changeAssignee({
+            task_id: taskAssignStore.state.taskId,
+            assignee: refinedUserItems.value[selectIndex.value[0]].name,
+        });
         taskContentFormStore.setAssigneeToOriginTask(newTask.assignee);
         showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ASSIGN'), '');
         return newTask;
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
index dd30dd0ab6..502b9e8cd2 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import {
-    ref, computed, watch, onBeforeUnmount,
+    ref, computed,
 } from 'vue';
 
 import { PButtonModal } from '@cloudforet/mirinae/';
 
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { getParticle, i18n as _i18n } from '@/translations';
 
+import type { WorkspaceItem } from '@/store/reference/workspace-reference-store';
+import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
+
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -18,15 +22,17 @@ import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
+import { useAssociatedTasksQuery } from '../composables/use-associated-tasks-query';
+
 const taskManagementPageStore = useTaskManagementPageStore();
 const taskManagementPageState = taskManagementPageStore.state;
 const taskCategoryStore = useTaskCategoryStore();
 const taskManagementTemplateStore = useTaskManagementTemplateStore();
+const workspaceReferenceStore = useWorkspaceReferenceStore();
 
-
-const deletable = computed(() => !taskManagementPageStore.getters.associatedTasksToCategory.length);
+const deletable = computed(() => !tasks.value?.length);
 const headerTitle = computed(() => {
-    if (taskManagementPageStore.state.loadingAssociatedTasksToCategory) {
+    if (isLoading.value) {
         return ' ';
     }
     return deletable.value
@@ -37,7 +43,7 @@ const headerTitle = computed(() => {
         : _i18n.t('OPSFLOW.DELETE_TARGET', { target: _i18n.t('OPSFLOW.CATEGORY') });
 });
 
-const loading = ref<boolean>(false);
+const isDeleting = ref<boolean>(false);
 const deleteCategory = async (categoryId: string) => {
     try {
         await taskCategoryStore.delete(categoryId);
@@ -48,7 +54,7 @@ const deleteCategory = async (categoryId: string) => {
 };
 const handleConfirm = async () => {
     try {
-        loading.value = true;
+        isDeleting.value = true;
         if (!taskManagementPageState.targetCategoryId) {
             throw new Error('[Console Error] Cannot delete category without a target category');
         }
@@ -57,7 +63,7 @@ const handleConfirm = async () => {
         ErrorHandler.handleRequestError(e, 'Failed to delete category');
     } finally {
         taskManagementPageStore.closeDeleteCategoryModal();
-        loading.value = false;
+        isDeleting.value = false;
     }
 };
 const handleCloseOrCancel = () => {
@@ -66,17 +72,31 @@ const handleCloseOrCancel = () => {
 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);
-    }
+
+
+/* load associated tasks */
+const {
+    tasks, isLoading,
+} = useAssociatedTasksQuery({
+    queryKey: computed(() => ({ category_id: taskManagementPageState.targetCategoryId })),
+    enabled: computed(() => !!taskManagementPageState.visibleDeleteCategoryModal && !!taskManagementPageState.targetCategoryId),
 });
-onBeforeUnmount(() => {
-    taskManagementPageStore.flushAssociatedTasksToCategoryMap();
+
+/*
+ * Filters tasks to only include tasks that were created in workspaces bound to the package of the selected category
+ * Used to check if there are any tasks that would be affected by deleting this category
+ *
+ * 선택된 카테고리의 패키지와 바인딩된 워크스페이스에서 생성된 태스크만 필터링
+ * 이 카테고리를 삭제할 때 영향을 받을 태스크가 있는지 확인하는데 사용
+ */
+const filteredTasksByWorkspace = computed<TaskModel[]>(() => {
+    if (!tasks.value?.length || !taskManagementPageStore.getters.targetCategory) return [];
+    const targetCategory = taskManagementPageStore.getters.targetCategory;
+    const packageId = targetCategory?.package_id;
+    if (!packageId) return [];
+    const workspaceItems: WorkspaceItem[] = Object.values(workspaceReferenceStore.getters.workspaceItems);
+    const relatedWorkspaceIds = workspaceItems.filter((w) => w.data.packages?.includes(packageId)).map((w) => w.key);
+    return tasks.value.filter((t) => relatedWorkspaceIds.includes(t.workspace_id));
 });
 </script>
 
@@ -85,25 +105,23 @@ onBeforeUnmount(() => {
                     theme-color="alert"
                     :header-title="headerTitle"
                     :size="deletable ? 'sm' : 'md'"
-                    :loading="loading"
-                    :loading-backdrop="taskManagementPageState.loadingAssociatedTasksToCategory"
+                    :is-loading="isDeleting"
+                    :loading-backdrop="isLoading"
                     @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"
-            />
+            <div v-if="!deletable">
+                <p 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 :tasks="filteredTasksByWorkspace" />
+            </div>
         </template>
     </p-button-modal>
 </template>
diff --git a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
index 898a900faa..7d346da2b5 100644
--- a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
@@ -10,6 +10,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 
 import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
 import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import { useTaskApi } from '@/api-clients/opsflow/task/composables/use-task-api';
 import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import type { TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n } from '@/translations';
@@ -23,7 +24,6 @@ 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 { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { useTaskStatusField } from '@/services/ops-flow/composables/use-task-status-field';
 import { useTaskTypeField } from '@/services/ops-flow/composables/use-task-type-field';
 import { TASK_STATUS_LABELS } from '@/services/ops-flow/constants/task-status-label-constant';
@@ -71,6 +71,10 @@ const handleUpdateSelectedCategory = (items: SelectDropdownMenuItem[]) => {
     }
     initRelatedFieldsByCategorySelection(category);
 };
+const taskCategoryDesciprion = computed<string>(() => {
+    if (!taskContentFormGetters.currentCategory) return '';
+    return taskContentFormGetters.currentCategory.description;
+});
 
 /* task type */
 const {
@@ -96,9 +100,13 @@ const handleUpdateSelectedTaskType = async (items: SelectDropdownMenuItem[]) =>
         initRelatedFieldsByTaskTypeSelection(category, taskType);
     }
 };
+const taskTypeDescription = computed<string>(() => {
+    if (!taskContentFormState.currentTaskType) return '';
+    return taskContentFormState.currentTaskType.description;
+});
 
 /* status */
-const taskAPI = useTaskAPI();
+const { taskAPI } = useTaskApi();
 const {
     selectedStatusItems,
     taskStatusValidator,
@@ -114,7 +122,10 @@ const changeStatus = async (statusId: string) => {
         if (!taskContentFormState.originTask) {
             throw new Error('Origin task is not defined');
         }
-        await taskAPI.changeStatus(taskContentFormState.originTask.task_id, statusId);
+        await taskAPI.changeStatus({
+            task_id: taskContentFormState.originTask.task_id,
+            status_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') }));
@@ -272,50 +283,57 @@ createModeInitWatchStop = watch([() => taskContentFormState.currentCategoryId, (
 
 <template>
     <component :is="isCreateMode ? 'div' : PPaneLayout"
-               class="flex flex-wrap gap-4"
+               class="flex flex-wrap"
                :class="isCreateMode ? '' : 'py-6 px-4'"
     >
         <div v-if="!taskContentFormState.isArchivedTask"
-             class="base-form-top-wrapper"
+             class="w-full"
         >
-            <div class="base-form-field-wrapper">
-                <p-field-group :label="taskManagementTemplateStore.templates.TaskCategory"
-                               :style-type="isCreateMode ? 'primary' : 'secondary'"
-                               required
-                               :invalid="isCreateMode && invalidState.category"
-                               :invalid-text="invalidTexts.category"
-                >
-                    <template #default="{invalid}">
-                        <p-select-dropdown :selected="selectedCategoryItems"
-                                           :handler="categoryMenuItemsHandler"
-                                           :page-size="10"
-                                           :invalid="invalid"
-                                           :readonly="!isCreateMode"
-                                           block
-                                           @update:selected="handleUpdateSelectedCategory"
-                        />
-                    </template>
-                </p-field-group>
-            </div>
-            <div class="base-form-field-wrapper">
-                <p-field-group :label="taskManagementTemplateStore.templates.TaskType"
-                               :style-type="isCreateMode ? 'primary' : 'secondary'"
-                               required
-                               :invalid="!isCreateMode && invalidState.taskType"
-                               :invalid-text="invalidTexts.taskType"
-                >
-                    <template #default="{invalid}">
-                        <p-select-dropdown :selected="selectedTaskTypeItems"
-                                           :handler="taskTypeMenuItemsHandler"
-                                           :page-size="10"
-                                           :invalid="invalid"
-                                           :readonly="!isCreateMode || !taskContentFormGetters.currentCategory"
-                                           block
-                                           @update:selected="handleUpdateSelectedTaskType"
-                        />
-                    </template>
-                </p-field-group>
+            <div class="base-form-top-wrapper">
+                <div class="base-form-field-wrapper">
+                    <p-field-group :label="taskManagementTemplateStore.templates.TaskCategory"
+                                   :style-type="isCreateMode ? 'primary' : 'secondary'"
+                                   required
+                                   :invalid="isCreateMode && invalidState.category"
+                                   :invalid-text="invalidTexts.category"
+                    >
+                        <template #default="{invalid}">
+                            <p-select-dropdown :selected="selectedCategoryItems"
+                                               :handler="categoryMenuItemsHandler"
+                                               :page-size="10"
+                                               :invalid="invalid"
+                                               :readonly="!isCreateMode"
+                                               block
+                                               @update:selected="handleUpdateSelectedCategory"
+                            />
+                        </template>
+                    </p-field-group>
+                </div>
+                <div class="base-form-field-wrapper">
+                    <p-field-group :label="taskManagementTemplateStore.templates.TaskType"
+                                   :style-type="isCreateMode ? 'primary' : 'secondary'"
+                                   required
+                                   :invalid="!isCreateMode && invalidState.taskType"
+                                   :invalid-text="invalidTexts.taskType"
+                    >
+                        <template #default="{invalid}">
+                            <p-select-dropdown :selected="selectedTaskTypeItems"
+                                               :handler="taskTypeMenuItemsHandler"
+                                               :page-size="10"
+                                               :invalid="invalid"
+                                               :readonly="!isCreateMode || !taskContentFormGetters.currentCategory"
+                                               block
+                                               @update:selected="handleUpdateSelectedTaskType"
+                            />
+                        </template>
+                    </p-field-group>
+                </div>
             </div>
+            <p class="min-h-5 text-label-md text-gray-600">
+                {{ taskCategoryDesciprion }}
+                {{ taskCategoryDesciprion && taskTypeDescription ? ' | ' : '' }}
+                {{ taskTypeDescription }}
+            </p>
         </div>
         <div v-if="!isCreateMode"
              class="base-form-top-wrapper"
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
index be1f43f090..3cffc89d76 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
@@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash';
 
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
index fa1bfa05eb..cae3825b4f 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
@@ -4,7 +4,7 @@ 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 type { TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n } from '@/translations';
 
 import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusList.vue b/apps/web/src/services/ops-flow/components/TaskStatusList.vue
index cf2674126d..d822d5e8b6 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusList.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusList.vue
@@ -2,11 +2,12 @@
 import { computed, ref, watch } from 'vue';
 import draggable from 'vuedraggable';
 
-import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusType } from '@/api-clients/opsflow/task/schema/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;
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
index 6fb2cb6945..c9a4ba5b05 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
@@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash';
 
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
index 9a9af6fa82..297defc912 100644
--- a/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed } from 'vue';
 
 import { PButtonModal, PIconButton } from '@cloudforet/mirinae';
 
@@ -16,16 +16,16 @@ import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
+import { useAssociatedTasksQuery } from '../composables/use-associated-tasks-query';
+
 const taskCategoryPageStore = useTaskCategoryPageStore();
 const taskCategoryPageState = taskCategoryPageStore.state;
 const taskTypeStore = useTaskTypeStore();
 const taskManagementTemplateStore = useTaskManagementTemplateStore();
 
-const deletable = computed(() => !taskCategoryPageStore.getters.associatedTasksToType.length);
+const deletable = computed(() => !tasks.value?.length);
 const headerTitle = computed(() => {
-    if (taskCategoryPageState.loadingAssociatedTasksToType) {
-        return ' ';
-    }
+    if (isLoading.value) return ' ';
     return deletable.value
         ? _i18n.t('OPSFLOW.DELETE_TARGET_CONFIRMATION', {
             object: taskManagementTemplateStore.templates.TaskType,
@@ -33,10 +33,21 @@ const headerTitle = computed(() => {
         })
         : _i18n.t('OPSFLOW.DELETE_TARGET', { target: taskManagementTemplateStore.templates.TaskType });
 });
-const loading = ref<boolean>(false);
+const isDeleting = ref<boolean>(false);
+
+/* load associated tasks */
+const {
+    tasks, isLoading, refetch,
+} = useAssociatedTasksQuery({
+    queryKey: computed(() => ({ task_type_id: taskCategoryPageState.targetTaskTypeId })),
+    enabled: computed(() => !!taskCategoryPageState.visibleTaskTypeDeleteModal && !!taskCategoryPageState.targetTaskTypeId),
+});
+
+
+/* events */
 const handleConfirm = async () => {
     try {
-        loading.value = true;
+        isDeleting.value = true;
         if (!taskCategoryPageState.targetTaskTypeId) {
             throw new Error('[Console Error] Cannot delete task type without a target task type');
         }
@@ -46,7 +57,7 @@ const handleConfirm = async () => {
         ErrorHandler.handleRequestError(e, _i18n.t('OPSFLOW.ALT_E_DELETE_TARGET', { target: taskManagementTemplateStore.templates.TaskType }));
     } finally {
         taskCategoryPageStore.closeDeleteTaskTypeModal();
-        loading.value = false;
+        isDeleting.value = false;
     }
 };
 const handleCloseOrCancel = () => {
@@ -56,22 +67,8 @@ 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);
+    refetch();
 };
-
-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>
@@ -79,8 +76,8 @@ watch(() => taskCategoryPageState.visibleTaskTypeDeleteModal, (visible) => {
                     theme-color="alert"
                     :header-title="headerTitle"
                     :size="deletable ? 'sm' : 'md'"
-                    :loading="loading"
-                    :loading-backdrop="taskCategoryPageState.loadingAssociatedTasksToType"
+                    :loading="isDeleting"
+                    :loading-backdrop="isLoading"
                     :disabled="!deletable"
                     @confirm="handleConfirm"
                     @close="handleCloseOrCancel"
@@ -101,7 +98,7 @@ watch(() => taskCategoryPageState.visibleTaskTypeDeleteModal, (visible) => {
                                    @click="handleRefresh"
                     />
                 </div>
-                <associated-tasks :tasks="taskCategoryPageStore.getters.associatedTasksToType" />
+                <associated-tasks :tasks="tasks ?? []" />
             </div>
         </template>
     </p-button-modal>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
index d2a464df3c..26ee39639b 100644
--- a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
@@ -9,7 +9,7 @@ import {
     POverlayLayout, PFieldGroup, PTextInput, PButton, PTextarea, PRadioGroup, PRadio,
 } from '@cloudforet/mirinae';
 
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -28,6 +28,7 @@ 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;
@@ -270,10 +271,10 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                 </p-field-group>
                 <p-field-group :label="$t('OPSFLOW.DESCRIPTION')">
                     <p-textarea :value="description"
-                                :placeholder="$t('OPSFLOW.DESCRIBE_FIELD', {
+                                :placeholder="String($t('OPSFLOW.DESCRIBE_FIELD', {
                                     field: taskManagementTemplateStore.templates.taskType ,
                                     particle: getParticle(taskManagementTemplateStore.templates.taskType , 'object')
-                                })"
+                                }))"
                                 @update:value="setForm('description', $event)"
                     />
                 </p-field-group>
@@ -281,7 +282,7 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                                required
                 >
                     <task-fields-configuration class="mt-2"
-                                               :scope="scope"
+                                               :require-project="scope === 'PROJECT'"
                                                :fields="fields"
                                                :origin-fields="taskCategoryPageGetters.targetTaskType?.fields"
                                                @update:fields="setFields"
diff --git a/apps/web/src/services/ops-flow/composables/use-associated-tasks-query.ts b/apps/web/src/services/ops-flow/composables/use-associated-tasks-query.ts
new file mode 100644
index 0000000000..7386d9679b
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-associated-tasks-query.ts
@@ -0,0 +1,52 @@
+import type { Ref } from 'vue';
+import { computed, watch } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+import { useQuery } from '@tanstack/vue-query';
+
+import type { APIError } from '@cloudforet/core-lib/space-connector/error';
+
+import { useTaskApi } from '@/api-clients/opsflow/task/composables/use-task-api';
+import type { TaskListParameters } from '@/api-clients/opsflow/task/schema/api-verbs/list';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+
+export const useAssociatedTasksQuery = ({
+    queryKey,
+    enabled,
+}: {
+  queryKey: Ref<TaskListParameters>;
+  enabled: Ref<boolean>;
+}) => {
+    const { taskListQueryKey, taskAPI } = useTaskApi();
+    const {
+        data: tasks, isLoading, isError, refetch,
+    } = useQuery<TaskModel[], APIError, TaskModel[], [QueryKey, TaskListParameters]>({
+        queryKey: computed(() => [
+            taskListQueryKey.value,
+            queryKey.value,
+        ]),
+        queryFn: async ({ queryKey: qk }) => {
+            const [, params] = qk;
+            const { results } = await taskAPI.list(params);
+            return results ?? [];
+        },
+        enabled,
+        // time control
+        gcTime: 1000 * 60 * 2, // 2 minutes
+        staleTime: 1000 * 30, // 30 seconds
+    });
+    watch(isError, (error) => {
+        if (error) {
+            ErrorHandler.handleError(error);
+        }
+    });
+
+    return {
+        tasks,
+        isLoading,
+        refetch,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/composables/use-task-api.ts b/apps/web/src/services/ops-flow/composables/use-task-api.ts
deleted file mode 100644
index 71515a5be3..0000000000
--- a/apps/web/src/services/ops-flow/composables/use-task-api.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
-
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { TaskChangeAssigneeParameters } from '@/api-clients/opsflow/task/schema/api-verbs/change-assignee';
-import type { TaskChangeStatusParameters } from '@/api-clients/opsflow/task/schema/api-verbs/change-status';
-import type { TaskCreateParameters } from '@/api-clients/opsflow/task/schema/api-verbs/create';
-import type { TaskDeleteParameters } from '@/api-clients/opsflow/task/schema/api-verbs/delete';
-import type { TaskGetParameters } from '@/api-clients/opsflow/task/schema/api-verbs/get';
-import type { TaskListParameters } from '@/api-clients/opsflow/task/schema/api-verbs/list';
-import type { TaskUpdateParameters } from '@/api-clients/opsflow/task/schema/api-verbs/update';
-import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
-
-
-export const useTaskAPI = () => {
-    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);
-            return response;
-        },
-        async update(params: TaskUpdateParameters) {
-            const response = await SpaceConnector.clientV2.opsflow.task.update<TaskUpdateParameters, TaskModel>(params);
-            return response;
-        },
-        async get(taskId: string) {
-            const response = await SpaceConnector.clientV2.opsflow.task.get<TaskGetParameters, TaskModel>({
-                task_id: taskId,
-            });
-            return response;
-        },
-        async delete(taskId: string) {
-            await SpaceConnector.clientV2.opsflow.task.delete<TaskDeleteParameters, TaskModel>({
-                task_id: taskId,
-            });
-        },
-        async changeStatus(taskId: string, statusId: string) {
-            const response = await SpaceConnector.clientV2.opsflow.task.changeStatus<TaskChangeStatusParameters, TaskModel>({
-                task_id: taskId,
-                status_id: statusId,
-            });
-            return response;
-        },
-        async changeAssignee(taskId: string, assignee: string) {
-            const response = await SpaceConnector.clientV2.opsflow.task.changeAssignee<TaskChangeAssigneeParameters, TaskModel>({
-                task_id: taskId,
-                assignee,
-            });
-            return response;
-        },
-    };
-
-    return {
-        ...actions,
-    };
-};
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
index c108ec7604..cbc76158d8 100644
--- 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
@@ -4,7 +4,7 @@ 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 type { TaskStatusOption, TaskStatusOptions } from '@/api-clients/opsflow/task/schema/type';
 import { getParticle, i18n } from '@/translations';
 
 import { useFieldValidator } from '@/common/composables/form-validator';
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
index 63a6214549..a9e25c8b4b 100644
--- 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
@@ -4,7 +4,7 @@ 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 type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 import { getParticle, i18n } from '@/translations';
 
 import { useFieldValidator } from '@/common/composables/form-validator';
@@ -14,6 +14,7 @@ import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
+
 export const useTaskTypeField = ({
     isRequired, categoryId,
 }: {
diff --git a/apps/web/src/services/ops-flow/constants/task-status-label-constant.ts b/apps/web/src/services/ops-flow/constants/task-status-label-constant.ts
index 47e4dffdaf..a50a21821e 100644
--- a/apps/web/src/services/ops-flow/constants/task-status-label-constant.ts
+++ b/apps/web/src/services/ops-flow/constants/task-status-label-constant.ts
@@ -1,4 +1,4 @@
-import type { TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 
 export const TASK_STATUS_LABELS: Record<TaskStatusType, string> = {
     TODO: 'To Do',
diff --git a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
index 338e8e856b..fde499e124 100644
--- a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
+++ b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
@@ -1,24 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, 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, PHeading, PSelectCard, PEmpty, PDataLoader,
 } from '@cloudforet/mirinae';
 
-
 import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
-import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
-
-import { useUserStore } from '@/store/user/user-store';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
-import { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
@@ -33,7 +26,6 @@ const router = useRouter();
 const taskCategoryStore = useTaskCategoryStore();
 const taskTypeStore = useTaskTypeStore();
 const taskTypeState = taskTypeStore.state;
-const userStore = useUserStore();
 const taskManagementTemplateStore = useTaskManagementTemplateStore();
 
 const { getProperRouteLocation } = useProperRouteLocation();
@@ -53,14 +45,6 @@ const { forms: { category, taskType }, setForm, isAllValid } = useFormValidator(
         return !!val;
     },
 });
-const taskAPI = useTaskAPI();
-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);
@@ -88,7 +72,6 @@ onMounted(async () => {
     await taskTypeStore.listByCategoryIds(allCategories.map((c) => c.category_id));
     availableCategories.value = allCategories.filter((c) => taskTypeState.itemsByCategoryId[c.category_id]?.length);
     setForm('category', '');
-    tasks.value = await taskAPI.list({ query: taskQuery.value }) ?? [];
     loading.value = false;
 });
 </script>
diff --git a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
index d1725689dc..5c5f3067f4 100644
--- a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
+++ b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
@@ -20,28 +20,36 @@ export default defineComponent({
 /* eslint-disable import/first */
 // eslint-disable-next-line import/no-duplicates,import/order
 import {
-    ref, computed, onBeforeMount, onUnmounted,
+    computed, onBeforeMount, onUnmounted,
     // eslint-disable-next-line import/no-duplicates
 } from 'vue';
 import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router/composables';
 
+import { QueryClient, useMutation } from '@tanstack/vue-query';
+import { isEmpty } from 'lodash';
+
+import type { APIError } from '@cloudforet/core-lib/space-connector/error';
 import {
     PHeadingLayout, PHeading, PButton, PPaneLayout, PSkeleton,
 } from '@cloudforet/mirinae';
 
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import { useTaskApi } from '@/api-clients/opsflow/task/composables/use-task-api';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n as _i18n } from '@/translations';
 
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 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 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 { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
 import TaskFieldsForm from '@/services/ops-flow/task-fields-form/TaskFieldsForm.vue';
 import {
     useTaskManagementTemplateStore,
@@ -51,6 +59,7 @@ import type { TaskCreatePageQueryValue } from '@/services/ops-flow/types/task-cr
 
 
 
+
 const taskContentFormStore = useTaskContentFormStore();
 const taskContentFormState = taskContentFormStore.state;
 const taskContentFormGetters = taskContentFormStore.getters;
@@ -82,8 +91,35 @@ const handleClickBack = () => {
     goBack();
 };
 
+/* create task */
+const { taskAPI, taskListQueryKey } = useTaskApi();
+const queryClient = new QueryClient();
+const { data: createdTask, mutateAsync: createTaskMutation, isPending: isCreating } = useMutation<TaskModel, APIError>({
+    mutationFn: async () => {
+        if (!taskContentFormState.currentTaskType) throw new Error('Task type is not selected');
+        const res = await taskAPI.create({
+            task_type_id: taskContentFormState.currentTaskType.task_type_id,
+            name: taskContentFormState.defaultData[DEFAULT_FIELD_ID_MAP.title],
+            status_id: taskContentFormState.statusId as string,
+            description: taskContentFormState.defaultData[DEFAULT_FIELD_ID_MAP.description] || undefined,
+            assignee: taskContentFormState.assignee || undefined,
+            data: isEmpty(taskContentFormState.data) ? undefined : taskContentFormState.data,
+            files: taskContentFormState.fileIds,
+            project_id: taskContentFormState.currentTaskType.require_project ? taskContentFormState.defaultData[DEFAULT_FIELD_ID_MAP.project] : '*',
+        });
+        return res;
+    },
+    onSuccess: () => {
+        // Invalidate task list query to avoid using stale data
+        queryClient.invalidateQueries({ queryKey: taskListQueryKey });
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
+    },
+    onError: (error) => {
+        ErrorHandler.handleRequestError(error, _i18n.t('OPSFLOW.ALT_E_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }));
+    },
+});
+
 /* confirm leave modal */
-const createdTask = ref<TaskModel|undefined>(undefined);
 const {
     isConfirmLeaveModalVisible,
     handleBeforeRouteLeave,
@@ -95,12 +131,9 @@ const {
 onBeforeRouteLeave(handleBeforeRouteLeave);
 
 /* form button handling */
-const creating = ref(false);
 const handleConfirm = async () => {
     if (!taskContentFormGetters.isAllValid) return;
-    creating.value = true;
-    createdTask.value = await taskContentFormStore.createTask();
-    creating.value = false;
+    await createTaskMutation();
     if (createdTask.value) {
         goBack();
     }
@@ -150,13 +183,13 @@ defineExpose({ setPathFrom });
         </p-pane-layout>
         <div class="py-3 flex flex-wrap gap-1 justify-end">
             <p-button style-type="transparent"
-                      :disabled="creating"
+                      :disabled="isCreating"
                       @click="goBack()"
             >
                 {{ $t('COMMON.BUTTONS.CANCEL') }}
             </p-button>
             <p-button style-type="primary"
-                      :loading="creating"
+                      :loading="isCreating"
                       :disabled="!taskContentFormGetters.isAllValid"
                       @click="handleConfirm"
             >
diff --git a/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue b/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
index 3052d05de9..c7b6216ba0 100644
--- a/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
+++ b/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
@@ -2,17 +2,20 @@
 // 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;
+            if (!instance.setPathFrom) {
+                console.error('setPathFrom is not defined');
+                return;
+            }
             instance.setPathFrom(from);
-            instance.checkTaskExist();
         });
     },
 });
@@ -27,16 +30,22 @@ import {
 } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router/composables';
 
+import type { QueryKey } from '@tanstack/vue-query';
+import { QueryClient, useMutation, useQuery } from '@tanstack/vue-query';
+
+import type { APIError } from '@cloudforet/core-lib/space-connector/error';
 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 { useTaskApi } from '@/api-clients/opsflow/task/composables/use-task-api';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
 
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import { queryStringToString } from '@/lib/router-query-string';
 
 import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
@@ -49,8 +58,8 @@ import BoardTaskComment from '@/services/ops-flow/components/BoardTaskComment.vu
 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 { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 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 {
     useTaskManagementTemplateStore,
@@ -58,6 +67,8 @@ import {
 import type { BoardPageQuery } from '@/services/ops-flow/types/board-page-type';
 import type { TaskCreatePageQueryValue } from '@/services/ops-flow/types/task-create-page-type';
 
+import { DEFAULT_FIELD_ID_MAP } from '../task-fields-configuration/constants/default-field-constant';
+
 const TaskContentTab = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskContentTab.vue'));
 const TaskProgressTab = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskProgressTab.vue'));
 
@@ -67,56 +78,60 @@ const props = defineProps<{
 }>();
 
 const taskDetailPageStore = useTaskDetailPageStore();
+const taskContentFormStore = useTaskContentFormStore();
 const taskManagementTemplateStore = useTaskManagementTemplateStore();
 const userStore = useUserStore();
 
-/* task */
-const taskAPI = useTaskAPI();
-const task = ref<TaskModel|undefined>();
-
-/* route and query */
+/* route */
 const router = useRouter();
 const route = useRoute();
-const categoryId = computed<TaskCreatePageQueryValue['categoryId']>(() => queryStringToString(route.query.categoryId));
 const { getProperRouteLocation } = useProperRouteLocation();
+const categoryId = computed<TaskCreatePageQueryValue['categoryId']>(() => queryStringToString(route.query.categoryId));
+const error = ref<APIError | null>(null);
 const {
+    pathFrom,
     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 taskAPI.get(taskId);
-        loading.value = false;
-        return true;
-    } catch (e: unknown) {
+watch(error, (err) => {
+    if (err) {
         goBack();
-        ErrorHandler.handleRequestError(e, 'Failed to get task');
-        return false;
+        ErrorHandler.handleRequestError(err, 'Failed to get task');
     }
-};
-
-
-/* header and back button */
-const loading = ref<boolean>(true);
-const headerTitle = computed<string>(() => task?.value?.name ?? '');
-
+});
 
-/* confirm leave modal */
-const hasUpdated = ref(false);
+/* task */
+const { taskListQueryKey, taskQueryKey, taskAPI } = useTaskApi();
+const taskDetailQueryKey = computed<QueryKey>(() => [
+    taskQueryKey.value,
+    props.taskId,
+]);
 const {
-    isConfirmLeaveModalVisible,
-    handleBeforeRouteLeave,
-    confirmRouteLeave,
-    stopRouteLeave,
-} = useConfirmRouteLeave({
-    passConfirmation: computed(() => !taskDetailPageStore.getters.hasUnsavedChanges || hasUpdated.value),
+    data: task,
+    isLoading: loading,
+} = useQuery<TaskModel, APIError>({
+    queryKey: taskDetailQueryKey,
+    queryFn: async ({ queryKey }) => {
+        const taskId = queryKey[1] as string;
+        try {
+            const result = await taskAPI.get({ task_id: taskId });
+            return result;
+        } catch (e) {
+            error.value = e as APIError;
+            throw e;
+        }
+    },
+    enabled: computed(() => !!props.taskId && !!pathFrom.value),
+    retry: false,
+    gcTime: 0,
+    staleTime: 0,
 });
-onBeforeRouteLeave(handleBeforeRouteLeave);
+
+/* header and back button */
+const headerTitle = computed<string>(() => task.value?.name ?? '');
 
 /* tabs */
 const tabs = computed<TabItem<object>[]>(() => [
@@ -139,13 +154,49 @@ const handleUpdateActiveTab = (tab: 'content'|'progress') => {
     });
 };
 
+/* update task */
+const queryClient = new QueryClient();
+const { isSuccess, mutateAsync: updateTaskMutation, isPending: isUpdating } = useMutation<TaskModel, APIError>({
+    mutationFn: async () => {
+        if (!task.value) throw new Error('Origin task is not defined');
+        const res = await taskAPI.update({
+            task_id: task.value.task_id,
+            name: taskContentFormStore.state.defaultData[DEFAULT_FIELD_ID_MAP.title],
+        });
+        return res;
+    },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: [
+                taskListQueryKey,
+                taskQueryKey,
+            ],
+        });
+        showSuccessMessage(_i18n.t('OPSFLOW.ALT_S_UPDATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
+        taskContentFormStore.resetUnsavedChanges();
+    },
+    onError: (error) => {
+        ErrorHandler.handleRequestError(error, _i18n.t('OPSFLOW.ALT_E_UPDATE_TARGET', { target: taskManagementTemplateStore.templates.task }));
+    },
+});
+
 /* form button handling */
 const handleSaveChanges = async () => {
     if (!taskDetailPageStore.getters.isFormValid) return;
-    hasUpdated.value = await taskDetailPageStore.updateTask();
-    // if (hasUpdated.value) goBack();
+    await updateTaskMutation();
 };
 
+/* confirm leave modal */
+const {
+    isConfirmLeaveModalVisible,
+    handleBeforeRouteLeave,
+    confirmRouteLeave,
+    stopRouteLeave,
+} = useConfirmRouteLeave({
+    passConfirmation: computed(() => !taskDetailPageStore.getters.hasUnsavedChanges || isSuccess.value),
+});
+onBeforeRouteLeave(handleBeforeRouteLeave);
+
 /* lifecycle */
 onUnmounted(() => {
     taskDetailPageStore.$reset();
@@ -156,13 +207,11 @@ watch(task, (t) => {
     if (route.hash === '#progress') {
         activeTab.value = 'progress';
     }
-    if (task.value) {
-        taskDetailPageStore.setCurrentTask(task.value);
-    }
+    taskDetailPageStore.setCurrentTask(t);
 });
 
 /* expose */
-defineExpose({ setPathFrom, checkTaskExist });
+defineExpose({ setPathFrom });
 </script>
 
 <template>
@@ -207,21 +256,23 @@ defineExpose({ setPathFrom, checkTaskExist });
                        @update:active-tab="handleUpdateActiveTab"
                 >
                     <template #content>
-                        <task-content-tab />
+                        <task-content-tab :task-id="props.taskId" />
                     </template>
                     <template #progress>
-                        <task-progress-tab />
+                        <task-progress-tab :task-id="props.taskId" />
                     </template>
                 </p-tab>
                 <div v-if="activeTab === 'content' && taskDetailPageStore.getters.isEditable"
                      class="py-3 flex flex-wrap gap-1 justify-end"
                 >
                     <p-button style-type="transparent"
+                              :disabled="isUpdating"
                               @click="goBack()"
                     >
                         {{ $t('COMMON.BUTTONS.CANCEL') }}
                     </p-button>
                     <p-button style-type="primary"
+                              :loading="isUpdating"
                               :disabled="!taskDetailPageStore.getters.hasUnsavedChanges || !taskDetailPageStore.getters.isFormValid"
                               @click="handleSaveChanges"
                     >
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
index 8169e099b2..d14dcd2c03 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
@@ -1,22 +1,20 @@
 import { asyncComputed } from '@vueuse/core';
-import type { DeepReadonly } from 'vue';
 import {
     reactive, computed, onUnmounted, onMounted,
 } 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 type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 
+
 interface UseTaskCategoryPageStoreState {
     currentCategoryId?: string;
     // status
@@ -31,8 +29,6 @@ interface UseTaskCategoryPageStoreState {
     visibleTaskTypeForm: boolean;
     targetTaskTypeId?: string;
     visibleTaskTypeDeleteModal: boolean;
-    associatedTasksToTypeMap: Record<string, TaskModel[]>;
-    loadingAssociatedTasksToType: boolean;
 }
 
 interface UseTaskCategoryPageStoreGetters {
@@ -46,7 +42,6 @@ interface UseTaskCategoryPageStoreGetters {
     // task type
     taskTypes: TaskTypeModel[]|undefined;
     targetTaskType: TaskTypeModel|undefined;
-    associatedTasksToType: TaskModel[];
 }
 
 export const useTaskCategoryPageStore = defineStore('task-category-page', () => {
@@ -63,8 +58,6 @@ export const useTaskCategoryPageStore = defineStore('task-category-page', () =>
         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)),
@@ -105,14 +98,8 @@ export const useTaskCategoryPageStore = defineStore('task-category-page', () =>
             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 taskData = useTaskAPI();
     const actions = {
         setCurrentCategoryId(categoryId: string) {
             state.currentCategoryId = categoryId;
@@ -158,29 +145,6 @@ export const useTaskCategoryPageStore = defineStore('task-category-page', () =>
         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 taskData.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');
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
index 14a6333905..fa14c9096c 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
@@ -6,15 +6,12 @@ import {
 import { defineStore } from 'pinia';
 
 import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
-import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import type { PackageModel } from '@/schema/identity/package/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 { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 
@@ -28,16 +25,12 @@ interface UseTaskManagementPageStoreState {
     visibleCategoryForm: boolean;
     targetCategoryId?: string;
     visibleDeleteCategoryModal: boolean;
-    // task
-    associatedTasksToCategoryMap: Record<string, TaskModel[]>;
-    loadingAssociatedTasksToCategory: boolean;
 }
 
 interface UseTaskManagementPageStoreGetters {
     targetPackage: PackageModel|undefined;
     associatedCategoriesToPackage: TaskCategoryModel[];
     associatedWorkspacesToPackage: WorkspaceItem[];
-    associatedTasksToCategory: TaskModel[];
     targetCategory: TaskCategoryModel|undefined;
     defaultPackage: PackageModel|undefined;
 }
@@ -46,7 +39,6 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
     const packageStore = usePackageStore();
     const taskCategoryStore = useTaskCategoryStore();
     const workspaceReferenceStore = useWorkspaceReferenceStore();
-    const taskAPI = useTaskAPI();
     const state = reactive<UseTaskManagementPageStoreState>({
         // support package
         visiblePackageForm: false,
@@ -57,9 +49,6 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         visibleCategoryForm: false,
         targetCategoryId: undefined,
         visibleDeleteCategoryModal: false,
-        // task
-        associatedTasksToCategoryMap: {},
-        loadingAssociatedTasksToCategory: false,
     });
     const getters: UseTaskManagementPageStoreGetters = {
         targetPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.package_id === state.targetPackageId)),
@@ -70,16 +59,6 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
             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;
-            const packageId = getters.targetCategory?.package_id;
-            if (!packageId) return [];
-            const workspaceItems: WorkspaceItem[] = Object.values(workspaceReferenceStore.getters.workspaceItems);
-            const relatedWorkspaceIds = workspaceItems.filter((w) => w.data.packages?.includes(packageId)).map((w) => w.key);
-            const allTasks = state.associatedTasksToCategoryMap[categoryId] ?? [];
-            return allTasks.filter((t) => relatedWorkspaceIds.includes(t.workspace_id));
-        }),
         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)),
     } as unknown as UseTaskManagementPageStoreGetters; // HACK: to avoid type error
@@ -140,29 +119,6 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         resetTargetCategoryId() {
             state.targetCategoryId = undefined;
         },
-        // task
-        async loadAssociatedTasksToCategory(categoryId: string) {
-            state.loadingAssociatedTasksToCategory = true;
-            if (state.associatedTasksToCategoryMap[categoryId]) {
-                state.loadingAssociatedTasksToCategory = false;
-                return;
-            }
-            try {
-                const tasks = await taskAPI.list({ category_id: categoryId });
-                if (!tasks) return;
-                state.associatedTasksToCategoryMap = {
-                    ...state.associatedTasksToCategoryMap,
-                    [categoryId]: tasks,
-                };
-                state.loadingAssociatedTasksToCategory = false;
-            } catch (e) {
-                ErrorHandler.handleError(e);
-                state.loadingAssociatedTasksToCategory = false;
-            }
-        },
-        flushAssociatedTasksToCategoryMap() {
-            state.associatedTasksToCategoryMap = {};
-        },
     };
 
     onMounted(() => {
diff --git a/apps/web/src/services/ops-flow/stores/board-page-store.ts b/apps/web/src/services/ops-flow/stores/board-page-store.ts
index bd325c60e5..6e14655cde 100644
--- a/apps/web/src/services/ops-flow/stores/board-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/board-page-store.ts
@@ -5,10 +5,12 @@ import {
 
 import { defineStore } from 'pinia';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
 
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 
+
+
 interface UseBoardPageStoreGetters {
     currentCategory: ComputedRef<TaskCategoryModel|undefined>;
 }
diff --git a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
index d8c53fc327..adbd2ba49a 100644
--- a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
@@ -1,6 +1,6 @@
 import { reactive, computed, onMounted } from 'vue';
 
-import { isEmpty, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 import { defineStore } from 'pinia';
 
 import { APIError } from '@cloudforet/core-lib/space-connector/error';
@@ -9,15 +9,11 @@ import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
 import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
 import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 import type { TaskModel } from '@/api-clients/opsflow/task/schema/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 { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-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';
@@ -26,9 +22,6 @@ import {
 } from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
 import type { DefaultTaskFieldId } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
 import type { References } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
-import {
-    useTaskManagementTemplateStore,
-} from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
 interface UseTaskContentFormStoreState {
     originTask?: TaskModel;
@@ -50,7 +43,6 @@ interface UseTaskContentFormStoreState {
     // overall
     mode: 'create'|'view'|'create-minimal';
     hasUnsavedChanges: boolean;
-    createTaskLoading: boolean;
 }
 interface UseTaskContentFormStoreGetters {
     currentCategory: TaskCategoryModel|undefined;
@@ -66,7 +58,6 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
     const taskCategoryStore = useTaskCategoryStore();
     const taskTypeStore = useTaskTypeStore();
     const taskFieldMetadataStore = useTaskFieldMetadataStore();
-    const taskManagementTemplateStore = useTaskManagementTemplateStore();
     const userStore = useUserStore();
 
     const state = reactive<UseTaskContentFormStoreState>({
@@ -89,7 +80,6 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
         // overall
         mode: 'create',
         hasUnsavedChanges: false,
-        createTaskLoading: false,
     });
     const getters = {
         // base form
@@ -132,7 +122,6 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
         }),
     } as unknown as UseTaskContentFormStoreGetters; // HACK: to avoid type error
 
-    const taskAPI = useTaskAPI();
     const actions = {
         setCurrentCategoryId(categoryId?: string) {
             if (state.currentCategoryId === categoryId) return;
@@ -225,43 +214,8 @@ export const useTaskContentFormStore = defineStore('task-content-form', () => {
         setMode(mode: 'create'|'view'|'create-minimal') {
             state.mode = mode;
         },
-        async createTask(): Promise<TaskModel|undefined> {
-            try {
-                if (!state.currentTaskType) throw new Error('Task type is not selected');
-                state.createTaskLoading = true;
-                state.originTask = await taskAPI.create({
-                    task_type_id: state.currentTaskType.task_type_id,
-                    name: state.defaultData[DEFAULT_FIELD_ID_MAP.title],
-                    status_id: state.statusId as string,
-                    description: state.defaultData[DEFAULT_FIELD_ID_MAP.description] || undefined,
-                    assignee: state.assignee || undefined,
-                    data: isEmpty(state.data) ? undefined : state.data,
-                    files: state.fileIds,
-                    project_id: state.currentTaskType.require_project ? state.defaultData[DEFAULT_FIELD_ID_MAP.project] : '*',
-                });
-                showSuccessMessage(i18n.t('OPSFLOW.ALT_S_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
-                state.createTaskLoading = false;
-                return state.originTask;
-            } catch (e) {
-                ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_CREATE_TARGET', { target: taskManagementTemplateStore.templates.task }));
-                state.createTaskLoading = false;
-                return undefined;
-            }
-        },
-        async updateTask() {
-            try {
-                if (!state.originTask) throw new Error('Origin task is not defined');
-                state.originTask = await taskAPI.update({
-                    task_id: state.originTask.task_id,
-                    name: state.defaultData[DEFAULT_FIELD_ID_MAP.title],
-                });
-                showSuccessMessage(i18n.t('OPSFLOW.ALT_S_UPDATE_TARGET', { target: taskManagementTemplateStore.templates.task }), '');
-                state.hasUnsavedChanges = false;
-                return true;
-            } catch (e) {
-                ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_UPDATE_TARGET', { target: taskManagementTemplateStore.templates.task }));
-                return false;
-            }
+        resetUnsavedChanges() {
+            state.hasUnsavedChanges = false;
         },
     };
 
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
index af213cd822..1f72a5ce11 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
@@ -13,7 +13,7 @@ import type {
     TaskField,
     TaskFieldOptions,
     TaskFieldType,
-} from '@/schema/opsflow/_types/task-field-type';
+} from '@/api-clients/opsflow/_types/task-field-type';
 import { getParticle, i18n } from '@/translations';
 
 import InfoTooltip from '@/common/components/guidance/InfoTooltip.vue';
@@ -29,9 +29,10 @@ import {
 } 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 {
+    MutableTaskField,
     OptionalMutableTaskField,
 } from '@/services/ops-flow/task-fields-configuration/types/mutable-task-field-type';
-import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+import type { DefaultTaskFieldId, 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';
@@ -39,14 +40,16 @@ import {
 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')),
+    TEXT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/options-generator-templates/TextOptionsGenerator.vue')),
 };
 
 const props = defineProps<{
-    field: OptionalMutableTaskField;
+    field: OptionalMutableTaskField; // _field_id is optional because it is only required for editable case.
     allFields: OptionalMutableTaskField[];
+    editable?: boolean;
 }>();
 const emit = defineEmits<{(event: 'delete'): void;
-    (event: 'update:field', value: TaskField): void;
+    (event: 'update:field', value: MutableTaskField): void; // _field_id is required only for editable case.
     (event: 'update:is-valid', value: boolean): void;
 }>();
 
@@ -57,7 +60,7 @@ const taskManagementTemplateStore = useTaskManagementTemplateStore();
 const fieldMetadata = computed<TaskFieldTypeMetadata>(() => taskFieldMetadataStoreGetters.taskFieldTypeMetadataMap[props.field.field_type]);
 const optionsComponent = computed<ReturnType<typeof defineAsyncComponent>|undefined>(() => COMPONENT_MAP[props.field.field_type]);
 
-const isDefaultField = computed(() => Object.values(DEFAULT_FIELD_ID_MAP).includes(props.field.field_id));
+const isDefaultField = computed(() => Object.values(DEFAULT_FIELD_ID_MAP).includes(props.field.field_id as DefaultTaskFieldId));
 
 /* input type */
 const inputTypes = computed<{ name: string; label: string; }[]>(() => [
@@ -68,7 +71,7 @@ const inputType = ref<string>('form');
 const handleChangeInputType = (value: string) => {
     if (value === 'json') {
         const taskField = cloneDeep(field.value);
-        delete taskField._field_id;
+        delete taskField._field_id; // remove hidden field id from json so that it can not be modified
         jsonCode.value = JSON.stringify(taskField);
     } else {
         applyJsonCodeToStates(jsonCode.value);
@@ -86,7 +89,7 @@ const {
         });
     }
     if (props.allFields.some((f) => {
-        const id = f._field_id || f.field_id;
+        const id = f._field_id || f.field_id; // some fields do not have _field_id because they are not editable.
         return id === val && id !== props.field._field_id;
     })) {
         return i18n.t('OPSFLOW.VALIDATION.DUPLICATED', {
@@ -96,7 +99,7 @@ const {
     return true;
 });
 const isFieldIdChanged = computed(() => {
-    if (isDefaultField.value) return true;
+    if (!props.editable) return true;
     return fieldId.value !== props.field._field_id;
 });
 const handleClickUndoFieldId = () => {
@@ -140,7 +143,7 @@ const isPrimary = ref<boolean>(true);
 const isFolded = ref<boolean>(false);
 
 /* validation */
-const isAllValid = computed<boolean>(() => (isDefaultField.value ? isFieldIdValid.value : true)
+const isAllValid = computed<boolean>(() => (props.editable ? isFieldIdValid.value : true)
     && isNameValid.value
     && (optionsComponent.value ? isOptionsValid.value : true));
 
@@ -194,7 +197,7 @@ const handleUpdateJsonCode = (code: string) => {
 
 watch(field, (newField) => {
     if (isEqual(newField, props.field)) return;
-    emit('update:field', newField);
+    emit('update:field', newField as MutableTaskField);
 });
 watch(isAllValid, (isValid) => {
     emit('update:is-valid', isValid);
@@ -228,7 +231,7 @@ onBeforeMount(() => {
             <div class="py-4 pl-8 pr-2 border-gray-150"
                  :class="{ 'border-b': inputType === 'form' }"
             >
-                <div v-if="!isDefaultField"
+                <div v-if="props.editable"
                      class="float-right flex justify-end gap-1 mb-4"
                 >
                     <template v-for="type in inputTypes">
@@ -244,17 +247,17 @@ onBeforeMount(() => {
                     </template>
                 </div>
                 <template v-if="inputType === 'form'">
-                    <p-field-group v-if="!isDefaultField"
+                    <p-field-group v-if="props.editable"
                                    :label="$t('OPSFLOW.FIELD_ID', {field: $t('OPSFLOW.FIELD_GENERATOR.FIELD')})"
                                    :invalid="isFieldIdInvalid"
                                    :invalid-text="fieldIdInvalidText"
                                    required
                     >
                         <template #label-extra>
-                            <info-tooltip :contents="$t('OPSFLOW.FIELD_GENERATOR.FIELD_ID_EDIT_DESC', {
+                            <info-tooltip :contents="String($t('OPSFLOW.FIELD_GENERATOR.FIELD_ID_EDIT_DESC', {
                                               task: taskManagementTemplateStore.templates.task,
                                               tasks: taskManagementTemplateStore.templates.tasks,
-                                          })"
+                                          }))"
                                           size="sm"
                             />
                         </template>
@@ -262,7 +265,7 @@ onBeforeMount(() => {
                             <span>
                                 <p-text-input :value="fieldId"
                                               :invalid="isFieldIdInvalid"
-                                              :readonly="isDefaultField"
+                                              :readonly="!props.editable"
                                               @update:value="setFieldId"
                                 />
                                 <changed-mark v-if="isFieldIdChanged" />
@@ -283,12 +286,13 @@ onBeforeMount(() => {
                         <p-text-input :value="name"
                                       :placeholder="props.field.name || fieldMetadata.name"
                                       :invalid="isNameInvalid"
-                                      :readonly="isDefaultField"
+                                      :readonly="!props.editable"
                                       @update:value="setName"
                         />
                     </p-field-group>
                     <component :is="optionsComponent"
                                :options="options"
+                               :editable="props.editable"
                                @update:options="handleUpdateOptions"
                                @update:is-valid="handleUpdateOptionsValidation"
                     />
@@ -302,7 +306,7 @@ onBeforeMount(() => {
                         <!-- 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"
+                                         :disabled="isRequired || !props.editable"
                                          show-state-text
                                          position="left"
                         />
@@ -324,7 +328,7 @@ onBeforeMount(() => {
             >
                 <p-checkbox :selected="isRequired"
                             :value="true"
-                            :disabled="isDefaultField"
+                            :disabled="!props.editable"
                             @change="handleRequiredChange"
                 >
                     {{ $t('OPSFLOW.FIELD_GENERATOR.FIELD_REQUIRED') }}
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
index 638eb8f6f4..b94669f613 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue
@@ -8,7 +8,7 @@ import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-conf
 
 const props = defineProps<{
     fieldMetadata: TaskFieldTypeMetadata;
-    name: string;
+    name?: string;
     isRequired: boolean;
     isDeletable: boolean;
     isFolded: boolean;
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
index 2bc55cc3f8..a692ae7a7f 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue
@@ -4,8 +4,9 @@ import draggable from 'vuedraggable';
 
 import { PI } from '@cloudforet/mirinae';
 
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -16,8 +17,9 @@ import TaskFieldGenerator from '@/services/ops-flow/task-fields-configuration/Ta
 import type { MutableTaskField } from '@/services/ops-flow/task-fields-configuration/types/mutable-task-field-type';
 import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
 
+
 const props = defineProps<{
-    scope: TaskTypeModel['scope'];
+    requireProject: TaskTypeModel['require_project'];
     fields: MutableTaskField[];
     originFields?: TaskField[];
 }>();
@@ -30,14 +32,8 @@ const taskFieldMetadataStore = useTaskFieldMetadataStore();
 const taskFieldMetadataStoreGetters = taskFieldMetadataStore.getters;
 
 const defaultFields = computed<TaskField[]>(() => {
-    switch (props.scope) {
-    case 'WORKSPACE':
-        return taskFieldMetadataStoreGetters.workspaceScopeDefaultFields;
-    case 'PROJECT':
-        return taskFieldMetadataStoreGetters.projectScopeDefaultFields;
-    default:
-        return taskFieldMetadataStoreGetters.workspaceScopeDefaultFields;
-    }
+    if (props.requireProject) return taskFieldMetadataStoreGetters.projectScopeDefaultFields;
+    return taskFieldMetadataStoreGetters.workspaceScopeDefaultFields;
 });
 const draggableFields = computed<MutableTaskField[]>({
     get() {
@@ -106,6 +102,7 @@ const handleFieldDeleteConfirm = () => {
                             <task-field-generator class="flex-grow"
                                                   :field="field"
                                                   :all-fields="draggableFields"
+                                                  editable
                                                   @delete="handleFieldDelete(field, idx)"
                                                   @update:field="draggableFields[idx] = $event"
                                                   @update:is-valid="emit('update-field-validation', field._field_id, $event)"
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
index 4b2d780e67..1ce2a9f6a1 100644
--- 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
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue';
 import { ref, computed } from 'vue';
 
-import type { TaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskFieldOptions } from '@/api-clients/opsflow/_types/task-field-type';
 
 import { useFieldValidator, useFormValidator } from '@/common/composables/form-validator';
 
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
index c72d7ecda7..938cf9b31e 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts
@@ -1,4 +1,4 @@
-import type { TaskField, TaskFieldSelectionType, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldSelectionType, TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 
 import getRandomId from '@/lib/random-id-generator';
 
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
index 6102835749..eca4897db0 100644
--- 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
@@ -10,7 +10,7 @@ import {
     PFieldTitle, PButton, PIconButton, PI,
 } from '@cloudforet/mirinae';
 
-import type { DropdownTaskFieldOptions, TaskFieldEnum } from '@/schema/opsflow/_types/task-field-type';
+import type { DropdownTaskFieldOptions, TaskFieldEnum } from '@/api-clients/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
 import getRandomId from '@/lib/random-id-generator';
@@ -130,7 +130,7 @@ watch(() => props.options, (op) => {
 </script>
 
 <template>
-    <div>
+    <div v-if="props.editable">
         <p-field-title :label="$t('OPSFLOW.FIELD_GENERATOR.VALUE')" />
         <draggable v-model="enums"
                    draggable=".draggable-item"
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
index d86ab775c0..45860ce4bc 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ParagraphTaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+import type { ParagraphTaskFieldOptions } from '@/api-clients/opsflow/_types/task-field-type';
 
 import TextEditor from '@/common/components/editor/TextEditor.vue';
 
@@ -20,8 +20,9 @@ emit('update:is-valid', true);
 
 <template>
     <div>
-        <text-editor :value="props.options.example"
-                     :placeholder="$t('OPSFLOW.FIELD_GENERATOR.ENTER_DEFAULT_DESCRIPTION')"
+        <text-editor :class="{'pointer-events-none': !props.editable}"
+                     :value="props.options.example"
+                     :placeholder="String($t('OPSFLOW.FIELD_GENERATOR.ENTER_DEFAULT_DESCRIPTION'))"
                      contents-type="markdown"
                      @update:value="emit('update:options', { ...props.options, example: $event })"
         />
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/TextOptionsGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/TextOptionsGenerator.vue
new file mode 100644
index 0000000000..3380095f65
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/TextOptionsGenerator.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { PFieldGroup, PTextInput } from '@cloudforet/mirinae';
+
+import type { TextTaskFieldOptions } from '@/api-clients/opsflow/_types/task-field-type';
+
+import type {
+    OptionsGeneratorEmit,
+    OptionsGeneratorProps,
+} from '@/services/ops-flow/task-fields-configuration/types/options-generator-type';
+
+const props = withDefaults(defineProps<OptionsGeneratorProps<TextTaskFieldOptions>>(), {
+    options: () => ({
+        description: '',
+    }),
+});
+const emit = defineEmits<OptionsGeneratorEmit<TextTaskFieldOptions>>();
+emit('update:is-valid', true);
+
+</script>
+
+<template>
+    <div>
+        <p-field-group v-if="props.editable || props.options.description"
+                       label="Field Description"
+                       :required="!props.editable"
+        >
+            <p-text-input v-if="props.editable"
+                          :value="props.options.description"
+                          placeholder="Enter description"
+                          @update:value="emit('update:options', { ...props.options, description: $event })"
+            />
+            <p v-else
+               class="text-label-md"
+            >
+                {{ props.options.description }}
+            </p>
+        </p-field-group>
+    </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
index 361723108a..3831586124 100644
--- 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
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { defineStore } from 'pinia';
 
-import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldType } from '@/api-clients/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';
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/types/mutable-task-field-type.ts b/apps/web/src/services/ops-flow/task-fields-configuration/types/mutable-task-field-type.ts
index 2a6d522a18..64d5a9cc72 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/types/mutable-task-field-type.ts
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/types/mutable-task-field-type.ts
@@ -1,4 +1,4 @@
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 export type MutableTaskField = TaskField & {
     _field_id: string; // original field_id. immutable. it must be removed when saving
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/types/options-generator-type.ts b/apps/web/src/services/ops-flow/task-fields-configuration/types/options-generator-type.ts
index dc0efdc4e5..523cc6c79a 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/types/options-generator-type.ts
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/types/options-generator-type.ts
@@ -1,7 +1,8 @@
-import type { TaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskFieldOptions } from '@/api-clients/opsflow/_types/task-field-type';
 
 export interface OptionsGeneratorProps<Options extends TaskFieldOptions> {
     options: Options;
+    editable?: boolean;
 }
 
 export interface OptionsGeneratorEmit<Options extends TaskFieldOptions> {
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
index d25cf78f2f..23e151488a 100644
--- 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
@@ -1,4 +1,4 @@
-import type { TaskFieldEnum } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskFieldEnum } from '@/api-clients/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
index a2d5f4583c..6461baed77 100644
--- 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
@@ -1,4 +1,4 @@
-import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 
 import type { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
 
diff --git a/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
index 3a90685ef8..b279037778 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
@@ -3,7 +3,7 @@ import {
     defineAsyncComponent, onUnmounted,
 } from 'vue';
 
-import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskFieldType } from '@/api-clients/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';
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
index a640755abd..16cf14edf0 100644
--- 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
@@ -3,7 +3,7 @@ import { watch } from 'vue';
 
 import { isEqual } from 'lodash';
 
-import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
index 4710437712..c5c6ccf83a 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
@@ -8,9 +8,9 @@ import {
 import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-context-menu-attach/use-context-menu-attach';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { OtherTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
-import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
 import type {
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
index f585a865c7..342f29dd79 100644
--- 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
@@ -5,7 +5,7 @@ import {
     PFieldGroup, PDatetimePicker,
 } from '@cloudforet/mirinae';
 
-import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
 import type {
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
index 18d1a21692..9beccd8a7c 100644
--- 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
@@ -6,7 +6,7 @@ import {
 } 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 type { DropdownTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
 import type {
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
index 7109f01905..fee27c4bb8 100644
--- 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
@@ -3,7 +3,7 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import LabelsInput from '@/common/components/inputs/LabelsInput.vue';
 
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
index 2ffaff83b7..9f4ce5818d 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
@@ -5,7 +5,7 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { ParagraphTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { ParagraphTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import TextEditor from '@/common/components/editor/TextEditor.vue';
 import TextEditorViewer from '@/common/components/editor/TextEditorViewer.vue';
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
index d9b52535b8..679deae981 100644
--- 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
@@ -5,7 +5,7 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { ProjectTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { ProjectTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
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
index 054ea42fa5..ba921d16f8 100644
--- 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
@@ -9,7 +9,7 @@ import { isEqual } from 'lodash';
 import { PFieldGroup, PSelectDropdown, getTextHighlightRegex } from '@cloudforet/mirinae';
 import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import type { ServiceAccountReferenceMap } from '@/store/reference/service-account-reference-store';
 import {
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
index 9f20d91a8c..36c4144454 100644
--- 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
@@ -3,7 +3,7 @@ import {
     PFieldGroup, PTextInput,
 } from '@cloudforet/mirinae';
 
-import type { TextTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TextTaskField } from '@/api-clients/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';
@@ -27,7 +27,7 @@ const {
     >
         <p-text-input class="my-1"
                       :value="fieldValue"
-                      :placeholder="props.field.options?.example"
+                      :placeholder="props.field.options?.description"
                       :invalid="isInvalid"
                       :readonly="props.readonly"
                       block
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
index eeea9c42a7..fe5e73d7fc 100644
--- 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
@@ -3,7 +3,7 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 
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
index f4594a440b..751af373b2 100644
--- 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
@@ -3,7 +3,7 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
 
diff --git a/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
index a38450d60a..b646eb2d89 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
+++ b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
@@ -1,5 +1,5 @@
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
 import type { FileModel } from '@/schema/file-manager/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
 
 export interface References {
   project_id?: string;
diff --git a/packages/mirinae/src/data-display/collapsible/collapsible-panel/composables/use-text-clamper.ts b/packages/mirinae/src/data-display/collapsible/collapsible-panel/composables/use-text-clamper.ts
index 378d2d6a67..b46c18f629 100644
--- a/packages/mirinae/src/data-display/collapsible/collapsible-panel/composables/use-text-clamper.ts
+++ b/packages/mirinae/src/data-display/collapsible/collapsible-panel/composables/use-text-clamper.ts
@@ -161,7 +161,7 @@ export const useDeepTextClamper = (lineClamp : number):TextClamper => {
             webkitLineClamp: element.style.webkitLineClamp,
             overflow: element.style.overflow,
         };
-        element.style.display = '-webkit-box';
+        element.style.display = '-webkit-inline-box';
         element.style.webkitBoxOrient = 'vertical';
         element.style.webkitLineClamp = `${lineLimit}`;
         element.style.overflow = 'hidden';
@@ -195,7 +195,7 @@ export const useSimpleTextClamper = (PAD: number, lineClamp: number): TextClampe
     };
 
     const applyClampStyle = (element: HTMLElement) => {
-        element.style.display = '-webkit-box';
+        element.style.display = '-webkit-inline-box';
         element.style.webkitBoxOrient = 'vertical';
         element.style.webkitLineClamp = `${lineClamp}`;
         element.style.overflow = 'hidden';
diff --git a/packages/mirinae/src/navigation/link/PLink.mdx b/packages/mirinae/src/navigation/link/PLink.mdx
index 46353dbc9d..95f54128bd 100644
--- a/packages/mirinae/src/navigation/link/PLink.mdx
+++ b/packages/mirinae/src/navigation/link/PLink.mdx
@@ -71,6 +71,12 @@ This component prevents the propagation of the click event by default.
 ## Use Anchor Scroll
 <Canvas of={PLinkStories.UseAnchorScroll} />
 
+<br/>
+<br/>
+
+## Line Height
+<Canvas of={PLinkStories.LineHeight} />
+
 ## Playground
 <Canvas of={PLinkStories.Playground} />
 <Controls of={PLinkStories.Playground} />
diff --git a/packages/mirinae/src/navigation/link/PLink.stories.ts b/packages/mirinae/src/navigation/link/PLink.stories.ts
index 3cb16f909c..f185c7d94a 100644
--- a/packages/mirinae/src/navigation/link/PLink.stories.ts
+++ b/packages/mirinae/src/navigation/link/PLink.stories.ts
@@ -45,6 +45,7 @@ const Template: Story = {
                     :new-tab="newTab"
                     :href="href"
                     :to="to"
+                    :line-height="lineHeight"
                 >
                     <span v-if="defaultSlot" v-html="defaultSlot"/>
                 </p-link>
@@ -184,6 +185,20 @@ export const UseAnchorScroll: Story = {
     }),
 };
 
+export const LineHeight: Story = {
+    render: () => ({
+        components: { PLink },
+        router,
+        template: `
+            <div>
+                <span class="block border border-gray-300 overflow-clip"><p-link href="https://www.google.com">Without line height</p-link></span><br/>
+                <span class="border border-gray-300"><p-link line-height="1.5" href="https://www.google.com">With line height 1.5</p-link></span><br/>
+                <span class="border border-gray-300"><p-link line-height="2" href="https://www.google.com">With line height 2</p-link></span><br/>
+            </div>
+        `,
+    }),
+};
+
 export const Playground: Story = {
     ...Template,
 };
diff --git a/packages/mirinae/src/navigation/link/PLink.vue b/packages/mirinae/src/navigation/link/PLink.vue
index b32caeb22b..df77c8f1e5 100644
--- a/packages/mirinae/src/navigation/link/PLink.vue
+++ b/packages/mirinae/src/navigation/link/PLink.vue
@@ -21,7 +21,9 @@
                          color="inherit"
                          class="icon"
                     />
-                    <span class="text">
+                    <span class="text"
+                          :style="{lineHeight: props.lineHeight}"
+                    >
                         <slot v-bind="{...$props}">
                             {{ props.text }}
                         </slot>
@@ -60,6 +62,7 @@ interface LinkProps {
     href?: string;
     to?: Location;
     useAnchorScroll?: boolean;
+    lineHeight?: string;
 }
 
 const props = withDefaults(defineProps<LinkProps>(), {
@@ -70,6 +73,7 @@ const props = withDefaults(defineProps<LinkProps>(), {
     href: undefined,
     to: undefined,
     useAnchorScroll: false,
+    lineHeight: undefined,
 });
 
 const linkRef = ref<HTMLElement|null>(null);
diff --git a/packages/mirinae/src/navigation/link/story-helper.ts b/packages/mirinae/src/navigation/link/story-helper.ts
index 4d8c3a3a1c..c9a9fd25f8 100644
--- a/packages/mirinae/src/navigation/link/story-helper.ts
+++ b/packages/mirinae/src/navigation/link/story-helper.ts
@@ -15,6 +15,7 @@ export const getLinkArgs = (): Args => ({
     href: 'https://cloudforet.io',
     to: undefined,
     useAnchorScroll: false,
+    lineHeight: undefined,
     defaultSlot: null,
 
 });
@@ -180,6 +181,21 @@ export const getLinkArgTypes = (): ArgTypes => ({
             },
         },
     },
+    lineHeight: {
+        name: 'lineHeight',
+        type: { name: 'string' },
+        description: 'Line height of link text.',
+        table: {
+            type: {
+                summary: 'string',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: 'undefined',
+            },
+        },
+        control: 'text',
+    },
     defaultSlot: {
         name: 'default',
         description: 'Slot for text',