diff --git a/apps/web/src/common/components/inputs/LabelsInput.vue b/apps/web/src/common/components/inputs/LabelsInput.vue
new file mode 100644
index 0000000000..a2f3c87856
--- /dev/null
+++ b/apps/web/src/common/components/inputs/LabelsInput.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+// CAUTION: this vOnClickOutside is using !! Please do not remove.
+import { vOnClickOutside } from '@vueuse/components';
+import {
+    watch, ref,
+} from 'vue';
+
+import {
+    PIconButton, PLabel, PTextInput,
+} from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+const props = defineProps<{
+    labels?: string[];
+    editable?: boolean;
+}>();
+const emit = defineEmits<{(event: 'update:labels', value: string[]): void;
+}>();
+
+
+const labelList = ref<string[]>([]);
+
+const {
+    value, setValue, isInvalid, invalidText,
+} = useFieldValidator(
+    '',
+    (val: string) => {
+        if (val.length > 30) return i18n.t('DASHBOARDS.CUSTOMIZE.VALIDATION_LIMITED_CHAR_LABEL');
+        if (labelList.value.find((d) => d === val)) return i18n.t('DASHBOARDS.CUSTOMIZE.VALIDATION_DUPLICATED_LABEL');
+        return '';
+    },
+);
+
+const inputMode = ref(false);
+const isInputFocused = ref(false);
+
+const handleClickPlus = async () => {
+    inputMode.value = true;
+    isInputFocused.value = true;
+};
+const handleKeyEscape = () => {
+    inputMode.value = false;
+    setValue('');
+};
+const handleKeyEnter = (e: KeyboardEvent) => {
+    if (e.isComposing || !value.value || isInvalid) return;
+    labelList.value.push(value.value);
+    setValue('');
+    emit('update:labels', labelList.value);
+};
+const handleClickDelete = (index: number) => {
+    labelList.value.splice(index, 1);
+    emit('update:labels', labelList.value);
+};
+watch(() => props.labels, (newLabels) => {
+    labelList.value = newLabels || [];
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="flex flex-wrap items-start gap-1 min-h-8"
+         @keydown.esc="handleKeyEscape"
+         @keydown.enter="handleKeyEnter"
+    >
+        <div class="flex flex-wrap items-center gap-1 min-h-6">
+            <p-label
+                v-for="(label, index) in labelList"
+                :key="`dashboard-label-${index}`"
+                :text="label"
+                :deletable="props.editable"
+                @delete="handleClickDelete(index)"
+            />
+            <p-icon-button v-if="!inputMode && props.editable"
+                           class="mr-1"
+                           style-type="tertiary"
+                           name="ic_plus_bold"
+                           size="sm"
+                           shape="square"
+                           @click="handleClickPlus"
+            />
+            <template v-if="!inputMode && !labelList.length">
+                <span v-if="props.editable"
+                      class="text-gray-500 text-xs pt-1 cursor-pointer"
+                      @click="handleClickPlus"
+                >
+                    {{ $t('DASHBOARDS.CUSTOMIZE.ADD_LABEL') }}
+                </span>
+                <div v-else
+                     class="flex items-center justify-center w-full h-20 text-gray-300"
+                >
+                    {{ $t('DASHBOARDS.CUSTOMIZE.NO_LABEL') }}
+                </div>
+            </template>
+        </div>
+        <div v-if="inputMode"
+             v-on-click-outside="handleKeyEscape"
+             class="min-w-40 max-w-40"
+        >
+            <p-text-input :value="value"
+                          :is-focused="isInputFocused"
+                          :invalid="isInvalid"
+                          block
+                          size="sm"
+                          :placeholder="$t('DASHBOARDS.CUSTOMIZE.ENTER_NEW_LABEL')"
+                          @update:value="setValue"
+                          @update:is-focused="isInputFocused = $event"
+            />
+            <p v-if="isInvalid"
+               class="text-label-sm text-alert mt-1"
+            >
+                {{ invalidText }}
+            </p>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/common/modules/user/UserSelectDropdown.vue b/apps/web/src/common/modules/user/UserSelectDropdown.vue
new file mode 100644
index 0000000000..f4beefb5ee
--- /dev/null
+++ b/apps/web/src/common/modules/user/UserSelectDropdown.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import {
+    ref, computed, toRef, watch,
+} from 'vue';
+
+import { isEqual } from 'lodash';
+
+import { PSelectDropdown, getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { UserReferenceMap } from '@/store/reference/user-reference-store';
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+interface UserDropdownItem extends SelectDropdownMenuItem {
+    name: string;
+    label: string;
+}
+
+const props = withDefaults(defineProps<{
+     userId?: string;
+     userIds?: string[];
+     selectionType?: 'single'|'multiple';
+     useFixedMenuStyle?: boolean;
+     invalid?: boolean;
+     disabled?: boolean;
+     userPool?: string[];
+}>(), {
+    userId: '',
+    userIds: () => [],
+    selectionType: 'single',
+    useFixedMenuStyle: false,
+    invalid: false,
+    disabled: false,
+    userPool: undefined,
+});
+
+const emit = defineEmits<{(event: 'update:user-ids', value: string[]): void;
+    (event: 'update:user-id', value: string): void;
+}>();
+
+const userReferenceStore = useUserReferenceStore();
+const loading = computed(() => userReferenceStore.getters.loading);
+const userReferenceMap: Ref<Readonly<UserReferenceMap>> = toRef(userReferenceStore.getters, 'userItems');
+const allUserItems = computed<UserDropdownItem[]>(() => {
+    if (props.userPool && props.userPool.length > 0) {
+        return props.userPool.map((userId) => ({
+            name: userId,
+            label: userReferenceMap.value[userId]?.label ?? userId,
+        }));
+    }
+    return Object.values(userReferenceMap.value).map((u: UserReferenceMap[string]) => ({
+        name: u.key,
+        label: u.label,
+    }));
+});
+const selectedUserItems = ref<SelectDropdownMenuItem[]>([]);
+const userMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+    const filteredItems = allUserItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label));
+    const _totalCount = pageStart - 1 + pageLimit;
+    const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+    return {
+        results: _slicedResults,
+        more: _totalCount < filteredItems.length,
+    };
+};
+
+const currentUserIds = computed<string[]>(() => selectedUserItems.value.map((item) => item.name));
+const currentUserId = computed<string | undefined>(() => currentUserIds.value[0]);
+
+const handleUpdateSelectedUserItems = (selectedUsers: SelectDropdownMenuItem[]) => {
+    if (isEqual(selectedUsers, selectedUserItems.value)) return; // prevent unnecessary update
+    selectedUserItems.value = selectedUsers; // it updates currentUserId and currentUserIds automatically
+    if (props.selectionType === 'single') {
+        if (currentUserId.value === props.userId) return; // prevent unnecessary update
+        emit('update:user-id', selectedUsers[0]?.name ?? '');
+    } else {
+        if (isEqual(currentUserIds.value, props.userIds)) return; // prevent unnecessary update
+        emit('update:user-ids', currentUserIds.value);
+    }
+};
+const initSingleType = (_userId?: string) => {
+    if (currentUserId.value === _userId) {
+        return;
+    }
+    selectedUserItems.value = _userId ? [{
+        name: _userId,
+        label: userReferenceMap.value[_userId]?.label ?? _userId,
+    }] : [];
+};
+const initMultipleType = (_userIds?: string[]) => {
+    try {
+        if (!Array.isArray(_userIds)) {
+            throw new Error('userIds should be an array');
+        }
+        if (isEqual(currentUserIds.value, _userIds)) {
+            return;
+        }
+        selectedUserItems.value = _userIds.map((userId) => ({
+            name: userId,
+            label: userReferenceMap.value[userId]?.label ?? userId,
+            selected: true,
+        }));
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
+};
+
+watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId, newUserIds]) => {
+    if (_loading) return;
+    if (props.selectionType === 'single') {
+        if (currentUserId.value === newUserId) return; // prevent infinite loop
+        initSingleType(newUserId);
+    } else {
+        if (isEqual(currentUserIds.value, newUserIds)) return; // prevent infinite loop
+        initMultipleType(newUserIds);
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-select-dropdown show-select-marker
+                       :selected="selectedUserItems"
+                       :handler="userMenuItemsHandler"
+                       is-filterable
+                       :invalid="props.invalid"
+                       :disabled="props.disabled"
+                       :use-fixed-menu-style="useFixedMenuStyle"
+                       show-delete-all-button
+                       :multi-selectable="props.selectionType === 'multiple'"
+                       appearance-type="badge"
+                       @update:selected="handleUpdateSelectedUserItems"
+    />
+</template>
diff --git a/apps/web/src/schema/opsflow/_types/task-field-type.ts b/apps/web/src/schema/opsflow/_types/task-field-type.ts
index dd2d74ed59..3ae1865769 100644
--- a/apps/web/src/schema/opsflow/_types/task-field-type.ts
+++ b/apps/web/src/schema/opsflow/_types/task-field-type.ts
@@ -10,10 +10,10 @@ export type TaskFieldEnum = {
     name: string;
 };
 interface TextTaskFieldOptions {
-    example: string;
+    example?: string;
 }
 export interface ParagraphTaskFieldOptions {
-    example: string;
+    example?: string;
 }
 export interface DropdownTaskFieldOptions {
     enums: TaskFieldEnum[];
@@ -33,20 +33,19 @@ interface BaseTaskField {
     is_required?: boolean;
     is_primary?: boolean; // whether to display field during task creation
 }
-interface TextTaskField extends BaseTaskField {
+export interface TextTaskField extends BaseTaskField {
     field_type: 'TEXT';
-    options: TextTaskFieldOptions;
+    options?: TextTaskFieldOptions;
 }
-interface ParagraphTaskField extends BaseTaskField {
+export interface ParagraphTaskField extends BaseTaskField {
     field_type: 'PARAGRAPH';
-    options: ParagraphTaskFieldOptions;
+    options?: ParagraphTaskFieldOptions;
 }
-interface DropdownTaskField extends BaseTaskField {
+export interface DropdownTaskField extends BaseTaskField {
     field_type: 'DROPDOWN';
-    options: DropdownTaskFieldOptions;
+    options?: DropdownTaskFieldOptions;
 }
-interface OtherTaskField extends BaseTaskField {
+export interface OtherTaskField extends BaseTaskField {
     field_type: Exclude<TaskFieldType, 'TEXT'|'PARAGRAPH'|'DROPDOWN'>;
-    options: object;
 }
 export type TaskField = TextTaskField | ParagraphTaskField | DropdownTaskField | OtherTaskField;
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
index 9f8cbf9cdc..9c0ae46e28 100644
--- a/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
@@ -1,10 +1,7 @@
 import type { Tags } from '@/schema/_common/model';
 import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusType, TaskStatusOptionWithOptionalId } from '@/schema/opsflow/task/type';
 
-interface TaskStatusOptionWithOptionalId extends Omit<TaskStatusOption, 'status_id'> {
-    status_id?: string;
-}
 
 export interface TaskCategoryCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts b/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
index 3416088623..d5c28948af 100644
--- a/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
+++ b/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
@@ -1,12 +1,12 @@
 import type { Tags } from '@/schema/_common/model';
 import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskStatusOptions } from '@/schema/opsflow/task/type';
+import type { TaskStatusOptions, TaskStatusOptionWithOptionalId, TaskStatusType } from '@/schema/opsflow/task/type';
 
 export interface TaskCategoryUpdateParameters {
     category_id: string;
     name?: string;
     description?: string;
-    status_options?: TaskStatusOptions;
+    status_options?: TaskStatusOptions|Record<TaskStatusType, TaskStatusOptionWithOptionalId[]>;
     fields?: TaskField[];
     force?: boolean;
     tags?: Tags;
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts
new file mode 100644
index 0000000000..94054bc262
--- /dev/null
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts
@@ -0,0 +1,8 @@
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+export interface TaskTypeUpdateFieldsParameters {
+    task_type_id: string;
+    fields: TaskField[];
+    category_id: string;
+    force: boolean;
+}
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
index 73a4a8e376..d66eb5f469 100644
--- a/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
@@ -1,11 +1,9 @@
 import type { Tags } from '@/schema/_common/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
 
 export interface TaskTypeUpdateParameters {
     task_type_id: string;
     name?: string;
     description?: string;
-    fields?: TaskField[];
     assignee_pool?: string[];
     tags?: Tags;
     category_id?: string;
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/create.ts b/apps/web/src/schema/opsflow/task/api-verbs/create.ts
index f249744361..1c9f6b4beb 100644
--- a/apps/web/src/schema/opsflow/task/api-verbs/create.ts
+++ b/apps/web/src/schema/opsflow/task/api-verbs/create.ts
@@ -5,7 +5,7 @@ import type { TaskPriority } from '@/schema/opsflow/task/type';
 export interface TaskCreateParameters {
     task_type_id: string;
     name: string;
-    status: string;
+    status_id: string;
     priority?: TaskPriority;
     description?: string;
     files?: FileModel[];
diff --git a/apps/web/src/schema/opsflow/task/model.ts b/apps/web/src/schema/opsflow/task/model.ts
index a8571c581b..b5d0cc1654 100644
--- a/apps/web/src/schema/opsflow/task/model.ts
+++ b/apps/web/src/schema/opsflow/task/model.ts
@@ -10,6 +10,7 @@ export interface TaskModel {
     description: string;
     data: Record<string, any>;
     files: FileModel[];
+    assignee: string;
     task_type_id: string;
     category_id: string;
     project_id: string;
diff --git a/apps/web/src/schema/opsflow/task/type.ts b/apps/web/src/schema/opsflow/task/type.ts
index aac84ca6fc..9fdbe2cb88 100644
--- a/apps/web/src/schema/opsflow/task/type.ts
+++ b/apps/web/src/schema/opsflow/task/type.ts
@@ -1,7 +1,7 @@
 import type { TASK_STATUS_COLOR_NAMES } from '@/schema/opsflow/task/constant';
 
 export type TaskStatusType = 'TODO'|'IN_PROGRESS'|'COMPLETED';
-type TaskStatusColorName = typeof TASK_STATUS_COLOR_NAMES[number];
+export type TaskStatusColorName = typeof TASK_STATUS_COLOR_NAMES[number];
 export interface TaskStatusOption {
     status_id: string;
     name: string;
@@ -9,4 +9,7 @@ export interface TaskStatusOption {
     is_default?: boolean;
 }
 export type TaskStatusOptions = Record<TaskStatusType, TaskStatusOption[]>;
+export interface TaskStatusOptionWithOptionalId extends Omit<TaskStatusOption, 'status_id'> {
+    status_id?: string;
+}
 export type TaskPriority = 'LOW'|'MEDIUM'|'HIGH';
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue b/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue
index 70e7ddcbd8..13ab7322fb 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorCreatePage.vue
@@ -47,6 +47,15 @@ export default defineComponent({
             instance.setPathFrom(from);
         });
     },
+    beforeRouteLeave(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            if (!instance.isConfirmBackModalVisible.value) {
+                instance.isConfirmBackModalVisible.value = true;
+                instance.nextRoute.value = to;
+            }
+        });
+    },
 });
 </script>
 
diff --git a/apps/web/src/services/ops-flow/OpsFlowContainer.vue b/apps/web/src/services/ops-flow/OpsFlowContainer.vue
index f7b8aefea2..e03f8b84d3 100644
--- a/apps/web/src/services/ops-flow/OpsFlowContainer.vue
+++ b/apps/web/src/services/ops-flow/OpsFlowContainer.vue
@@ -1,26 +1,28 @@
 <template>
     <fragment>
-        <general-page-layout>
+        <vertical-page-layout v-if="route.meta.lsbVisible"
+                              class="ops-flow-container"
+        >
+            <template #sidebar>
+                <ops-flow-l-s-b />
+            </template>
+            <template #default>
+                <router-view />
+            </template>
+        </vertical-page-layout>
+        <general-page-layout v-else>
             <router-view />
         </general-page-layout>
     </fragment>
 </template>
 
-<script lang="ts">
-import {
-    defineComponent,
-} from 'vue';
+<script setup lang="ts">
+import { useRoute } from 'vue-router/composables';
 
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
+import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
 
-export default defineComponent({
-    name: 'OpsFlowContainer',
-    components: {
-        GeneralPageLayout,
-    },
-    setup() {
-        return {
-        };
-    },
-});
+import OpsFlowLSB from '@/services/ops-flow/OpsFlowLSB.vue';
+
+const route = useRoute();
 </script>
diff --git a/apps/web/src/services/ops-flow/OpsFlowLSB.vue b/apps/web/src/services/ops-flow/OpsFlowLSB.vue
new file mode 100644
index 0000000000..fe730ddeec
--- /dev/null
+++ b/apps/web/src/services/ops-flow/OpsFlowLSB.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { clone } from 'lodash';
+
+import type { MenuId } from '@/lib/menu/config';
+import { MENU_ID } from '@/lib/menu/config';
+
+import BoardLSB from '@/services/ops-flow/components/BoardLSB.vue';
+
+
+const route = useRoute();
+
+const state = reactive({
+    selectedMenuId: computed(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        const targetMenuId: MenuId = closestRoute?.meta?.menuId;
+        return targetMenuId;
+    }),
+
+});
+</script>
+
+<template>
+    <aside class="sidebar-menu">
+        <board-l-s-b v-if="state.selectedMenuId === MENU_ID.BOARD" />
+    </aside>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/BoardLSB.vue b/apps/web/src/services/ops-flow/components/BoardLSB.vue
new file mode 100644
index 0000000000..81753e4ec1
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardLSB.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
+import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
+import LSBLoadingSpinner from '@/common/modules/navigations/new-lsb/LSBLoadingSpinner.vue';
+import LSBRouterButton from '@/common/modules/navigations/new-lsb/LSBRouterButton.vue';
+import LSBRouterItem from '@/common/modules/navigations/new-lsb/LSBRouterItem.vue';
+import LSBTopTitle from '@/common/modules/navigations/new-lsb/LSBTopTitle.vue';
+import type { LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const taskCategoryStore = useTaskCategoryStore();
+const taskCategoryGetters = taskCategoryStore.getters;
+const { getProperRouteLocation } = useProperRouteLocation();
+const predicate: LSBRouterPredicate = (to, currentRoute) => to.query?.categoryId === currentRoute.query.categoryId;
+</script>
+
+<template>
+    <l-s-b-container>
+        <l-s-b-router-button id="all-categories"
+                             icon="ic_dots-4-square"
+                             :to="getProperRouteLocation({
+                                 name: OPS_FLOW_ROUTE.BOARD._NAME
+                             })"
+                             :predicate="predicate"
+        >
+            All Categories
+        </l-s-b-router-button>
+        <l-s-b-divider />
+        <l-s-b-top-title>Category</l-s-b-top-title>
+        <l-s-b-loading-spinner :loading="taskCategoryGetters.loading" />
+        <l-s-b-router-item v-for="(category, idx) in taskCategoryGetters.taskCategories"
+                           :id="`${category.category_id}-${idx}`"
+                           :key="`${category.category_id}-${idx}`"
+                           :index="idx"
+                           :to="getProperRouteLocation({
+                               name: OPS_FLOW_ROUTE.BOARD._NAME,
+                               query: { categoryId: category.category_id }
+                           })"
+                           :predicate="predicate"
+        >
+            {{ category.name }}
+        </l-s-b-router-item>
+    </l-s-b-container>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
new file mode 100644
index 0000000000..97bab07269
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import {
+    PPaneLayout, PHeading, PButton, PTextarea, PCollapsibleList, PTextBeautifier,
+} from '@cloudforet/mirinae';
+import type { CollapsibleItem } from '@cloudforet/mirinae/types/data-display/collapsible/collapsible-list/type';
+
+import type { CommentModel } from '@/schema/opsflow/comment/model';
+
+const comments = ref<CommentModel[]>([
+    {
+        comment_id: 'comment_1',
+        comment: 'This is a comment',
+        comment_type: 'COMMENT',
+        is_edited: false,
+        mentions: {
+            USER: ['wanzargen@mz.co.kr'],
+        },
+        task_id: 'task_1',
+        project_id: 'project_1',
+        domain_id: 'domain_1',
+        workspace_id: 'workspace_1',
+        created_at: '2021-09-01T00:00:00Z',
+        updated_at: '2021-09-01T00:00:00Z',
+    },
+    {
+        comment_id: 'comment_2',
+        comment: 'This is a comment 2',
+        comment_type: 'COMMENT',
+        is_edited: false,
+        mentions: {},
+        task_id: 'task_1',
+        project_id: 'project_1',
+        domain_id: 'domain_1',
+        workspace_id: 'workspace_1',
+        created_at: '2021-09-02T00:00:00Z',
+        updated_at: '2021-09-02T00:00:00Z',
+    },
+]);
+const commentItems = computed<CollapsibleItem<CommentModel>[]>(() => comments.value.map((comment) => ({
+    title: comment.created_at,
+    data: comment,
+})));
+</script>
+
+<template>
+    <p-pane-layout class="pt-8 pb-10 px-4">
+        <p-heading class="mb-6"
+                   heading-type="sub"
+                   title="Comment"
+        />
+        <p-textarea class="mb-3"
+                    placehoder="Add Comment"
+        />
+        <p-button class="mb-6"
+                  style-type="tertiary"
+        >
+            Add Comment
+        </p-button>
+        <p-collapsible-list :items="commentItems"
+                            toggle-position="contents"
+                            :line-clamp="2"
+        >
+            <template #no-styled-title="{data}">
+                <div class="flex gap-1">
+                    <span class="text-paragraph-md font-bold text-blue-900">Author</span>
+                    <span class="text-paragraph-sm text-gray-400">{{ data.created_at }}</span>
+                </div>
+            </template>
+            <template #default="{data}">
+                <p-text-beautifier class="whitespace-pre-line"
+                                   :value="data.comment"
+                />
+            </template>
+        </p-collapsible-list>
+    </p-pane-layout>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
new file mode 100644
index 0000000000..9512eb2534
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import {
+    reactive, ref, watch, toRaw,
+} from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+import {
+    PPaneLayout, PToolbox, PDataTable, PDivider,
+} from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
+import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
+
+import type { TaskModel } from '@/schema/opsflow/task/model';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useBoardPageStore } from '@/services/ops-flow/stores/board-page-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+
+const boardPageStore = useBoardPageStore();
+const boardPageState = boardPageStore.state;
+const taskStore = useTaskStore();
+
+const loading = ref<boolean>(false);
+const tasks = ref<TaskModel[]|undefined>(undefined);
+
+/* query */
+const search = ref<string>('');
+const pagination = reactive({
+    page: 1,
+    size: 15,
+    total: 0,
+});
+const sort = reactive({
+    key: 'created_at',
+    desc: true,
+});
+const queryHelper = new ApiQueryHelper();
+const getQuery = () => {
+    queryHelper.setFilters([
+        { k: 'category_id', v: boardPageState.currentCategoryId, o: '=' },
+        { v: search.value },
+    ])
+        .setMultiSortV2([toRaw(sort)])
+        .setPage(pagination.page, pagination.size);
+
+    return queryHelper.dataV2;
+};
+
+/* list */
+const listTask = async (query: Query) => {
+    try {
+        loading.value = true;
+        const results = await taskStore.list({
+            query,
+        });
+        if (results) {
+            tasks.value = results;
+            loading.value = false;
+        }
+    } catch (e) {
+        ErrorHandler.handleError(e);
+        loading.value = false;
+        tasks.value = undefined;
+    }
+};
+
+watch(() => boardPageState.currentCategoryId, () => {
+    listTask(getQuery());
+}, { immediate: true });
+
+/* toolbox */
+const handleChange = (options: ToolboxOptions) => {
+    if (options.searchText !== undefined) search.value = options.searchText;
+    if (options.pageStart !== undefined) pagination.page = options.pageStart;
+    if (options.pageLimit !== undefined) pagination.size = options.pageLimit;
+    if (options.sortBy !== undefined) sort.key = options.sortBy;
+    if (options.sortDesc !== undefined) sort.desc = options.sortDesc;
+    listTask(getQuery());
+};
+
+/* table */
+const fields: DataTableField[] = [
+    {
+        name: 'name',
+        label: 'Title',
+    },
+    {
+        name: 'description',
+        label: 'Description',
+    },
+    {
+        name: 'task_type_id',
+        label: 'Topic',
+    },
+    {
+        name: 'status_id',
+        label: 'Status',
+    },
+    {
+        name: 'project_id',
+        label: 'Project',
+    },
+    {
+        name: 'assignee',
+        label: 'Assignee',
+    },
+    {
+        name: 'created_at',
+        label: 'Created At',
+    },
+];
+</script>
+
+<template>
+    <p-pane-layout class="pt-6">
+        <div class="px-4 pb-4">
+            <p-toolbox class="mb-2"
+                       :search-text="search"
+                       :this-page="pagination.page"
+                       :page-size="pagination.size"
+                       :total-count="pagination.total"
+                       @change="handleChange"
+            />
+            <p-divider />
+            <div class="mt-6">
+                filters
+            </div>
+        </div>
+        <p-data-table :fields="fields"
+                      :items="tasks"
+        />
+    </p-pane-layout>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue b/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
index 767ecae4fe..da0b2b345d 100644
--- a/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
@@ -9,10 +9,11 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import AssociatedCategories from '@/services/ops-flow/components/AssociatedCategories.vue';
 import AssociatedWorkspaces from '@/services/ops-flow/components/AssociatedWorkspaces.vue';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 const taskManagementPageStore = useTaskManagementPageStore();
-const packageStore = taskManagementPageStore.packageStore;
+const packageStore = usePackageStore();
 
 const deletable = computed(() => !taskManagementPageStore.getters.associatedCategoriesToPackage.length
         && !taskManagementPageStore.getters.associatedWorkspacesToPackage.length);
@@ -35,6 +36,9 @@ const handleConfirm = async () => {
 const handleCloseOrCancel = () => {
     taskManagementPageStore.closeDeletePackageModal();
 };
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetPackageId();
+};
 </script>
 
 <template>
@@ -47,6 +51,7 @@ const handleCloseOrCancel = () => {
                     @confirm="handleConfirm"
                     @close="handleCloseOrCancel"
                     @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
     >
         <template #body>
             <p v-if="!deletable"
diff --git a/apps/web/src/services/ops-flow/components/PackageForm.vue b/apps/web/src/services/ops-flow/components/PackageForm.vue
index 627e2d5877..a8774a447b 100644
--- a/apps/web/src/services/ops-flow/components/PackageForm.vue
+++ b/apps/web/src/services/ops-flow/components/PackageForm.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
 import {
-    toRef, ref, computed, watch, nextTick,
+    ref, watch, nextTick,
 } from 'vue';
 
 import {
     POverlayLayout, PFieldGroup, PTextInput, PTextarea, PSelectDropdown, PButton,
 } from '@cloudforet/mirinae';
 
-import type { PackageModel } from '@/schema/identity/package/model';
-
-import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
-
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -18,14 +14,13 @@ import { useFormValidator } from '@/common/composables/form-validator';
 
 import { useCategoryField } from '@/services/ops-flow/composables/use-category-field';
 import { useWorkspaceField } from '@/services/ops-flow/composables/use-workspace-field';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
-const workspaceReferenceStore = useWorkspaceReferenceStore();
 const taskManagementPageStore = useTaskManagementPageStore();
 const taskManagementPageState = taskManagementPageStore.state;
 const taskManagementPageGetters = taskManagementPageStore.getters;
-const packageStore = taskManagementPageStore.packageStore;
-const taskCategoryStore = taskManagementPageStore.taskCategoryStore;
+const packageStore = usePackageStore();
 
 
 
@@ -37,22 +32,17 @@ const {
     handleUpdateSelectedWorkspaces,
     setInitialWorkspaces,
     applyPackageToWorkspaces,
-} = useWorkspaceField({
-    workspaceReferenceMap: toRef(workspaceReferenceStore.state, 'items'),
-});
+} = useWorkspaceField();
 
 /* category */
 const {
     selectedCategoryItems,
     categoryMenuItemsHandler,
     categoryValidator,
-    handleUpdateSelectedCategories,
-    setInitialCategories,
+    setSelectedCategoryItems,
+    setInitialCategoriesByPackageId,
     applyPackageToCategories,
-} = useCategoryField({
-    defaultPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.is_default)),
-    taskCategoryStore,
-});
+} = useCategoryField();
 
 /* form */
 const {
@@ -82,6 +72,9 @@ const loading = ref(false);
 const handleCancelOrClose = () => {
     taskManagementPageStore.closePackageForm();
 };
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetPackageId();
+};
 
 const handleConfirm = async () => {
     if (!isAllValid.value) return;
@@ -151,7 +144,7 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag
             description: '',
         });
         setInitialWorkspaces();
-        setInitialCategories();
+        await setInitialCategoriesByPackageId();
         resetValidations();
         return;
     }
@@ -161,7 +154,7 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag
             description: targetPackage.description,
         });
         setInitialWorkspaces(targetPackage.package_id);
-        setInitialCategories(targetPackage.package_id);
+        await setInitialCategoriesByPackageId(targetPackage.package_id);
     }
 });
 </script>
@@ -171,6 +164,7 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag
     <p-overlay-layout title="Add Package"
                       :visible="taskManagementPageState.visiblePackageForm"
                       @close="handleCancelOrClose"
+                      @closed="handleClosed"
     >
         <template #default>
             <div class="p-6 w-full">
@@ -234,7 +228,7 @@ watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPag
                                        show-clear-selection
                                        is-filterable
                                        init-selected-with-handler
-                                       @update:selected="handleUpdateSelectedCategories"
+                                       @update:selected="setSelectedCategoryItems"
                     />
                 </p-field-group>
             </div>
diff --git a/apps/web/src/services/ops-flow/components/PackagePanel.vue b/apps/web/src/services/ops-flow/components/PackagePanel.vue
index 0d77601d7a..f79c0185c0 100644
--- a/apps/web/src/services/ops-flow/components/PackagePanel.vue
+++ b/apps/web/src/services/ops-flow/components/PackagePanel.vue
@@ -9,11 +9,12 @@ import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tabl
 
 import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
 
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 
 const taskManagementPageStore = useTaskManagementPageStore();
-const packageStore = taskManagementPageStore.packageStore;
+const packageStore = usePackageStore();
 
 const state = reactive({
     packageFields: computed<DataTableField[]>(() => [
@@ -75,7 +76,7 @@ const state = reactive({
         <p class="px-4 mb-6 text-label-md text-gray-600">
             계약에 따라 고객이 이용할 수 있는 기능의 묶음입니다. 전체 서비스의 범위를 나타내며, 하위 카테고를 생성할 수 있습니다.
         </p>
-        <p-data-table :loading="packageStore.state.loading"
+        <p-data-table :loading="packageStore.getters.loading"
                       :items="packageStore.getters.packages"
                       :fields="state.packageFields"
         >
diff --git a/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue b/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
index 8e779560c2..6ca4f81c5c 100644
--- a/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
+++ b/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
@@ -7,10 +7,12 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 const taskManagementPageStore = useTaskManagementPageStore();
-const packageStore = taskManagementPageStore.packageStore;
+const packageStore = usePackageStore();
+
 const loading = ref<boolean>(false);
 const name = computed(() => taskManagementPageStore.getters.targetPackage?.name ?? '');
 const handleConfirm = async () => {
@@ -31,6 +33,9 @@ const handleConfirm = async () => {
 const handleCloseOrCancel = () => {
     taskManagementPageStore.closeSetDefaultPackageModal();
 };
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetPackageId();
+};
 </script>
 
 <template>
@@ -40,6 +45,7 @@ const handleCloseOrCancel = () => {
                     @confirm="handleConfirm"
                     @close="handleCloseOrCancel"
                     @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
     >
         <template #header-title>
             Set <strong>{{ name }}</strong> as the default package.
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
index 241e074e2d..925c44c55c 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
@@ -4,10 +4,11 @@ import { ref } from 'vue';
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 const taskManagementPageStore = useTaskManagementPageStore();
-const taskCategoryStore = taskManagementPageStore.taskCategoryStore;
+const taskCategoryStore = useTaskCategoryStore();
 
 const loading = ref<boolean>(false);
 const handleConfirm = async () => {
@@ -27,6 +28,9 @@ const handleConfirm = async () => {
 const handleCloseOrCancel = () => {
     taskManagementPageStore.closeDeleteCategoryModal();
 };
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetCategoryId();
+};
 </script>
 
 <template>
@@ -37,5 +41,6 @@ const handleCloseOrCancel = () => {
                   @confirm="handleConfirm"
                   @close="handleCloseOrCancel"
                   @cancel="handleCloseOrCancel"
+                  @closed="handleClosed"
     />
 </template>
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue b/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
index 0903620910..53a6ff5964 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
@@ -10,12 +10,13 @@ import {
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 const taskManagementPageStore = useTaskManagementPageStore();
 const taskManagementPageState = taskManagementPageStore.state;
 const taskManagementPageGetters = taskManagementPageStore.getters;
-const taskCategoryStore = taskManagementPageStore.taskCategoryStore;
+const taskCategoryStore = useTaskCategoryStore();
 
 const {
     forms: { name, description },
@@ -41,6 +42,9 @@ const handleCancelOrClose = () => {
     initForm();
     taskManagementPageStore.closeCategoryForm();
 };
+const handleClosed = () => {
+    taskManagementPageStore.resetTargetCategoryId();
+};
 const handleConfirm = async () => {
     if (!isAllValid.value) return;
 
@@ -103,6 +107,7 @@ watch([() => taskManagementPageState.visibleCategoryForm, () => taskManagementPa
     <p-overlay-layout title="Add Category"
                       :visible="taskManagementPageState.visibleCategoryForm"
                       @close="handleCancelOrClose"
+                      @closed="handleClosed"
     >
         <template #default>
             <div class="p-6 w-full">
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
index e84144d69d..2c689ad644 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
@@ -11,14 +11,16 @@ import { makeAdminRouteName } from '@/router/helpers/route-helper';
 import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
 
 import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
 const taskManagementPageStore = useTaskManagementPageStore();
-const taskCategoryStore = taskManagementPageStore.taskCategoryStore;
-const packageStore = taskManagementPageStore.packageStore;
+const taskCategoryStore = useTaskCategoryStore();
+const packageStore = usePackageStore();
 
 const taskManagementTemplateStore = useTaskManagementTemplateStore();
 
@@ -66,7 +68,7 @@ const state = reactive({
             </template>
             <template #extra>
                 <p-icon-button name="ic_refresh"
-                               @click="taskCategoryStore.list()"
+                               @click="taskCategoryStore.list(true)"
                 />
                 <p-button icon-left="ic_plus_bold"
                           size="md"
@@ -80,7 +82,7 @@ const state = reactive({
         <p class="px-4 mb-6 text-label-md text-gray-600">
             티켓의 유형을 그룹화한 것입니다. 고객은 티켓을 제출할 때 적절한 카테고리를 선택하여 담당자가 티켓을 효율적으로 관리할 수 있게 돕습니다.
         </p>
-        <p-data-table :loading="taskCategoryStore.state.loading"
+        <p-data-table :loading="taskCategoryStore.getters.loading"
                       :items="taskCategoryStore.getters.taskCategories"
                       :fields="state.categoryFields"
         >
diff --git a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
new file mode 100644
index 0000000000..5eb55bf993
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+
+import {
+    PFieldGroup, PSelectDropdown, PPaneLayout,
+} from '@cloudforet/mirinae';
+
+import { useFieldValidator, useFormValidator } from '@/common/composables/form-validator';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useCategoryField } from '@/services/ops-flow/composables/use-category-field';
+import { useTaskStatusField } from '@/services/ops-flow/composables/use-task-status-field';
+import { useTaskTypeField } from '@/services/ops-flow/composables/use-task-type-field';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+
+/* category */
+const {
+    selectedCategoryItems,
+    categoryValidator,
+    categoryMenuItemsHandler,
+    setInitialCategory,
+} = useCategoryField({
+    isRequired: true,
+    hasTaskTypeOnly: true,
+});
+const handleUpdateSelectedCategory = (items) => {
+    taskContentFormStore.setCurrentCategoryId(items[0].name);
+    // watcher automatically updates forms
+};
+
+/* task type */
+const {
+    selectedTaskTypeItems,
+    taskTypeValidator,
+    taskTypeMenuItemsHandler,
+    setInitialTaskType,
+} = useTaskTypeField({
+    categoryId: computed(() => taskContentFormGetters.currentCategory?.category_id),
+    isRequired: true,
+});
+const handleUpdateSelectedTaskType = (items) => {
+    taskContentFormStore.setCurrentTaskTypeId(items[0].name);
+    // watcher automatically updates forms
+};
+
+/* status */
+const {
+    selectedStatusItems,
+    taskStatusValidator,
+    statusMenuItemsHandler,
+    setSelectedStatusItems,
+    setInitialStatus,
+} = useTaskStatusField({
+    categoryId: computed(() => taskContentFormGetters.currentCategory?.category_id),
+    isRequired: true,
+});
+const handleUpdateSelectedStatus = (items) => {
+    taskContentFormStore.setStatusId(items[0].name);
+    setSelectedStatusItems(items);
+};
+
+/* assignee */
+const assigneeValidator = useFieldValidator('', (value) => {
+    if (!taskContentFormGetters.currentCategory || !taskContentFormGetters.currentTaskType) return true;
+    if (!value) return 'Assignee is required';
+    return true;
+});
+const assignee = assigneeValidator.value;
+const handleUpdateSelectedAssignee = (userId?: string) => {
+    taskContentFormStore.setAssignee(userId);
+    assigneeValidator.setValue(userId ?? '');
+};
+
+/* form validator */
+const {
+    invalidState,
+    invalidTexts,
+    isAllValid,
+    resetValidations,
+} = useFormValidator({
+    category: categoryValidator,
+    taskType: taskTypeValidator,
+    status: taskStatusValidator,
+    assignee: assigneeValidator,
+});
+watch(isAllValid, (isValid) => {
+    taskContentFormStore.setIsBaseFormValid(isValid);
+}, { immediate: true });
+
+/* automatically initiate and update form */
+watch(() => taskContentFormGetters.currentCategory, async (currentCategory) => {
+    if (currentCategory) {
+        // init selected category
+        await setInitialCategory(currentCategory.category_id);
+        // init selected task type
+        setInitialTaskType();
+        // init selected status
+        const defaultStatus = currentCategory.status_options.TODO.find((status) => status.is_default);
+        setInitialStatus(defaultStatus);
+        taskContentFormStore.setStatusId(defaultStatus?.status_id);
+        // init selected assignee
+        assigneeValidator.setValue('');
+    }
+    resetValidations();
+}, { immediate: true });
+watch(() => taskContentFormGetters.currentTaskType, (currentTaskType) => {
+    if (currentTaskType) {
+        // init selected task type
+        setInitialTaskType(currentTaskType.task_type_id);
+        // init selected assignee
+        assigneeValidator.setValue('');
+    }
+    resetValidations();
+}, { immediate: true });
+</script>
+
+<template>
+    <component :is="taskContentFormState.mode === 'create-minimal' ? 'div' : PPaneLayout"
+               class="flex flex-wrap gap-4"
+               :class="taskContentFormState.mode === 'create-minimal' ? '' : 'py-6 px-4'"
+    >
+        <div class="base-form-top-wrapper">
+            <div class="base-form-field-wrapper">
+                <p-field-group label="Category"
+                               :style-type="taskContentFormState.mode === 'create-minimal' ? 'primary' : 'secondary'"
+                               required
+                               :invalid="invalidState.category"
+                               :invalid-text="invalidTexts.category"
+                >
+                    <p-select-dropdown :selected="selectedCategoryItems"
+                                       :handler="categoryMenuItemsHandler"
+                                       :invalid="invalidState.category"
+                                       block
+                                       @update:selected="handleUpdateSelectedCategory"
+                    />
+                </p-field-group>
+            </div>
+            <div class="base-form-field-wrapper">
+                <p-field-group label="Type"
+                               :style-type="taskContentFormState.mode === 'create-minimal' ? 'primary' : 'secondary'"
+                               required
+                               :invalid="invalidState.taskType"
+                               :invalid-text="invalidTexts.taskType"
+                >
+                    <p-select-dropdown :selected="selectedTaskTypeItems"
+                                       :handler="taskTypeMenuItemsHandler"
+                                       :invalid="invalidState.taskType"
+                                       :disabled="!taskContentFormGetters.currentCategory"
+                                       block
+                                       @update:selected="handleUpdateSelectedTaskType"
+                    />
+                </p-field-group>
+            </div>
+        </div>
+        <div v-if="taskContentFormState.mode !== 'create-minimal'"
+             class="base-form-top-wrapper"
+        >
+            <div class="base-form-field-wrapper">
+                <p-field-group label="Status"
+                               style-type="secondary"
+                               required
+                               :invalid="invalidState.status"
+                               :invalid-text="invalidTexts.status"
+                >
+                    <p-select-dropdown :selected="selectedStatusItems"
+                                       :handler="statusMenuItemsHandler"
+                                       :invalid="invalidState.status"
+                                       :disabled="!taskContentFormGetters.currentCategory"
+                                       block
+                                       @update:selected="handleUpdateSelectedStatus"
+                    />
+                </p-field-group>
+            </div>
+            <div class="base-form-field-wrapper">
+                <!--                <div class="flex gap-2">-->
+                <!--                    <p-field-title size="md"-->
+                <!--                                   color="gray"-->
+                <!--                    >-->
+                <!--                        Assign to-->
+                <!--                    </p-field-title>-->
+                <!--                </div>-->
+                <p-field-group label="Assign to"
+                               style-type="secondary"
+                               required
+                               :invalid="invalidState.assignee"
+                               :invalid-text="invalidTexts.assignee"
+                >
+                    <user-select-dropdown :user-id="assignee"
+                                          :invalid="invalidState.assignee"
+                                          :disabled="!taskContentFormGetters.currentTaskType"
+                                          :user-pool="taskContentFormGetters.currentTaskType?.assignee_pool"
+                                          @update:user-id="handleUpdateSelectedAssignee"
+                    />
+                </p-field-group>
+            </div>
+        </div>
+    </component>
+</template>
+
+<style scoped lang="postcss">
+.base-form-top-wrapper {
+    @apply flex-1 flex mobile:flex-wrap gap-4;
+}
+.base-form-field-wrapper {
+    @apply flex-1 min-w-40 mobile:min-w-full flex flex-col gap-1;
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskCreateProgressTab.vue b/apps/web/src/services/ops-flow/components/TaskCreateProgressTab.vue
new file mode 100644
index 0000000000..440e85577d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskCreateProgressTab.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>progress</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
index 298be3ce2b..a6103098bd 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
@@ -1,21 +1,61 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { cloneDeep } from 'lodash';
+
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 
 const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryStore = useTaskCategoryStore();
+
+const deleteStatusOption = async (categoryId: string, allStatusOptions: TaskStatusOptions, targetStatusOption: {
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        const { type, data } = targetStatusOption;
+        const idx = newStatusOptions[type].findIndex((p) => p.status_id === data.status_id);
+        if (idx === -1) throw new Error('Status not found');
+        newStatusOptions[type].splice(idx, 1);
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage('Task status deleted successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to delete task status');
+    }
+};
 const loading = ref<boolean>(false);
 const handleConfirm = async () => {
-    loading.value = true;
-    // await taskCategoryPageStore.deleteStatus();
-    taskCategoryPageStore.closeDeleteStatusModal();
-    loading.value = false;
+    try {
+        loading.value = true;
+        if (!taskCategoryPageStore.state.currentCategoryId) throw new Error('Category ID is required');
+        await deleteStatusOption(taskCategoryPageStore.state.currentCategoryId, taskCategoryPageStore.getters.statusOptions, taskCategoryPageStore.getters.targetStatusOption);
+        taskCategoryPageStore.closeDeleteStatusModal();
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    } finally {
+        loading.value = false;
+    }
 };
 const handleCloseOrCancel = () => {
     taskCategoryPageStore.closeDeleteStatusModal();
 };
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetStatus();
+};
 </script>
 
 <template>
@@ -26,5 +66,6 @@ const handleCloseOrCancel = () => {
                   @confirm="handleConfirm"
                   @close="handleCloseOrCancel"
                   @cancel="handleCloseOrCancel"
+                  @closed="handleClosed"
     />
 </template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
index 16cc8a0359..f7725907a5 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
@@ -39,10 +39,13 @@ const defaultStatusMenu = computed<MenuItem[]>(() => [
 const taskCategoryPageStore = useTaskCategoryPageStore();
 
 const handleEdit = () => {
-    taskCategoryPageStore.openEditStatusForm(props.index, props.type);
+    taskCategoryPageStore.openEditStatusForm(props.id, props.type);
 };
 const handleDelete = () => {
-    taskCategoryPageStore.openDeleteStatusModal(props.index, props.type);
+    taskCategoryPageStore.openDeleteStatusModal(props.id, props.type);
+};
+const handleSetDefault = () => {
+    taskCategoryPageStore.openSetDefaultStatusModal(props.id, props.type);
 };
 </script>
 
@@ -73,6 +76,7 @@ const handleDelete = () => {
         <action-menu-button :menu="props.isDefault ? defaultStatusMenu : menu"
                             @edit="handleEdit"
                             @delete="handleDelete"
+                            @set-as-default="handleSetDefault"
         />
     </li>
 </template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
index df80bd41b1..356e5989c7 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
@@ -3,6 +3,7 @@ import {
     ref, computed, onBeforeMount, nextTick, watch,
 } from 'vue';
 
+import { cloneDeep } from 'lodash';
 
 import {
     POverlayLayout, PFieldGroup, PTextInput, PSelectDropdown, PButton, PI,
@@ -10,17 +11,23 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { TASK_STATUS_COLOR_NAMES } from '@/schema/opsflow/task/constant';
+import type {
+    TaskStatusColorName,
+    TaskStatusOption, TaskStatusOptions,
+    TaskStatusType,
+} from '@/schema/opsflow/task/type';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
-
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 
 const taskCategoryPageStore = useTaskCategoryPageStore();
 const taskCategoryPageState = taskCategoryPageStore.state;
-const taskCategoryPageGetters = taskCategoryPageStore.getters;
-
+const taskCategoryStore = useTaskCategoryStore();
 
 /* status type */
 const statusIdAndNames = computed<[id: string, name: string][]>(() => Object.values(taskCategoryPageStore.getters.statusOptions).flat().map((p) => [p.status_id, p.name]));
@@ -41,12 +48,12 @@ const {
 } = useFormValidator({
     name: '',
     statusType: statusTypeItems.value[0] as SelectDropdownMenuItem,
-    color: '',
+    color: TASK_STATUS_COLOR_NAMES[0] as TaskStatusColorName,
 }, {
     name(value: string) {
         if (!value.trim().length) return 'Name is required';
         if (value.length > 50) return 'Name should be less than 50 characters';
-        const statusId = taskCategoryPageGetters.targetStatusOption?.data.status_id;
+        const statusId = taskCategoryPageStore.getters.targetStatusOption?.data.status_id;
         if (statusIdAndNames.value.some((p) => p[1] === value && p[0] !== statusId)) return 'Name already exists';
         return true;
     },
@@ -58,38 +65,87 @@ const handleCancelOrClose = () => {
     taskCategoryPageStore.closeStatusForm();
 };
 
+const updateStatusOptions = async (categoryId: string, allStatusOptions: TaskStatusOptions, targetStatusOption: {
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        const { type, data } = targetStatusOption;
+        if (statusType.value.name !== type) {
+            newStatusOptions[statusType.value.name].push({
+                ...data,
+                name: name.value,
+                color: color.value,
+            });
+            newStatusOptions[type] = newStatusOptions[type].filter((p) => p.status_id !== data.status_id);
+        } else {
+            const target = newStatusOptions[type].find((p) => p.status_id === data.status_id);
+            if (!target) throw new Error('[Console Error] Failed to find target status option');
+            target.name = name.value;
+            target.color = color.value;
+        }
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage('Task status option updated successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to update task status option');
+    }
+};
+
+const createStatusOption = async (categoryId: string, allStatusOptions: TaskStatusOptions) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        newStatusOptions[statusType.value.name].push({
+            name: name.value,
+            color: color.value,
+        });
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage('Task status option created successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to create task status option');
+    }
+};
+
 const handleConfirm = async () => {
     if (!isAllValid.value) return;
-    if (!taskCategoryPageState.currentCategoryId) return;
     try {
+        if (!taskCategoryPageState.currentCategoryId) {
+            throw new Error('Category ID is required');
+        }
         loading.value = true;
-        if (taskCategoryPageGetters.targetStatusOption) {
-            // await taskCategoryStore.update({
-            //
-            // });
+        if (taskCategoryPageStore.getters.targetStatusOption) {
+            await updateStatusOptions(taskCategoryPageState.currentCategoryId, taskCategoryPageStore.getters.statusOptions, taskCategoryPageStore.getters.targetStatusOption);
         } else {
-            // await taskCategoryStore.create({
-            // });
+            await createStatusOption(taskCategoryPageState.currentCategoryId, taskCategoryPageStore.getters.statusOptions);
         }
         taskCategoryPageStore.closeStatusForm();
     } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Failed to save category');
-        // TODO: handle error
+        ErrorHandler.handleError(e);
     } finally {
         loading.value = false;
     }
 };
 
 onBeforeMount(() => {
-    if (taskCategoryPageGetters.targetStatusOption) {
-        const { type, data } = taskCategoryPageGetters.targetStatusOption;
+    if (taskCategoryPageStore.getters.targetStatusOption) {
+        const { type, data } = taskCategoryPageStore.getters.targetStatusOption;
         setForm('name', data.name);
         setForm('statusType', statusTypeItems.value.find((p) => p.name === type) ?? statusTypeItems.value[0]);
         setForm('color', data.color ?? TASK_STATUS_COLOR_NAMES[0]);
     }
 });
 
-watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageGetters.targetStatusOption], async ([visible, target], [prevVisible]) => {
+watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageStore.getters.targetStatusOption], async ([visible, target], [prevVisible]) => {
     if (!visible) {
         if (!prevVisible) return; // prevent initial call
         await nextTick(); // wait for closing animation
@@ -112,7 +168,7 @@ watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageGett
 </script>
 
 <template>
-    <p-overlay-layout :title="taskCategoryPageGetters.targetStatusOption ? 'Edit Status' : 'Add Status'"
+    <p-overlay-layout :title="taskCategoryPageStore.getters.targetStatusOption ? 'Edit Status' : 'Add Status'"
                       :visible="taskCategoryPageState.visibleStatusForm"
                       @close="handleCancelOrClose"
     >
@@ -131,7 +187,7 @@ watch([() => taskCategoryPageState.visibleStatusForm, () => taskCategoryPageGett
                         />
                     </template>
                 </p-field-group>
-                <p-field-group v-if="!taskCategoryPageGetters.targetStatusOption?.data?.is_default"
+                <p-field-group v-if="!taskCategoryPageStore.getters.targetStatusOption?.data?.is_default"
                                label="Status Type"
                                required
                                :invalid="!loading && invalidState.statusType"
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
new file mode 100644
index 0000000000..c9502a452b
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { cloneDeep } from 'lodash';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryStore = useTaskCategoryStore();
+
+const loading = ref<boolean>(false);
+const name = computed(() => taskCategoryPageStore.getters.targetStatusOption?.data?.name ?? '');
+
+const setAsDefaultStatus = async (categoryId: string, allStatusOptions: TaskStatusOptions, targetStatusOption: {
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }) => {
+    try {
+        const newStatusOptions = cloneDeep(allStatusOptions);
+        const { type, data } = targetStatusOption;
+        const prevDefault = newStatusOptions[type].find((p) => p.is_default);
+        if (prevDefault) prevDefault.is_default = false;
+        const newDefault = newStatusOptions[type].find((p) => p.status_id === data.status_id);
+        if (!newDefault) throw new Error('Status not found');
+        newDefault.is_default = true;
+
+        await taskCategoryStore.update({
+            category_id: categoryId,
+            status_options: newStatusOptions,
+            force: true,
+        });
+        showSuccessMessage('Task status set as default successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to set task status as default');
+    }
+};
+const handleConfirm = async () => {
+    loading.value = true;
+    try {
+        if (!taskCategoryPageStore.state.currentCategoryId) {
+            throw new Error('Category ID is required');
+        }
+        if (!taskCategoryPageStore.getters.targetStatusOption) {
+            throw new Error('[Console Error] Cannot set default status without a target status');
+        }
+        await setAsDefaultStatus(taskCategoryPageStore.state.currentCategoryId, taskCategoryPageStore.getters.statusOptions, taskCategoryPageStore.getters.targetStatusOption);
+        taskCategoryPageStore.closeSetDefaultStatusModal();
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    } finally {
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskCategoryPageStore.closeSetDefaultStatusModal();
+};
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetStatus();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskCategoryPageStore.state.visibleSetDefaultStatusModal"
+                    size="sm"
+                    :loading="loading"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+                    @closed="handleClosed"
+    >
+        <template #header-title>
+            Set <strong>{{ name }}</strong> as the default status.
+        </template>
+        <template #body>
+            This will make it the primary status for related operations.
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusTree.vue b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
index 7f17438002..04d7e60a0d 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
@@ -3,12 +3,16 @@ import { computed } from 'vue';
 
 import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
 
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
 import TaskStatusList from '@/services/ops-flow/components/TaskStatusList.vue';
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 
 const taskCategoryPageStore = useTaskCategoryPageStore();
-const taskCategoryPageGetters = taskCategoryPageStore.getters;
-const taskCategoryStore = taskCategoryPageStore.taskCategoryStore;
+const taskCategoryStore = useTaskCategoryStore();
 
 const taskStatusTree = computed<{
     key: TaskStatusType,
@@ -19,15 +23,22 @@ const taskStatusTree = computed<{
     { key: 'COMPLETED', name: 'Completed' },
 ]);
 
-const handleUpdateItems = (statusType: TaskStatusType, items: TaskStatusOption[]) => {
-    if (!taskCategoryPageStore.state.currentCategoryId) return;
-    taskCategoryStore.update({
-        category_id: taskCategoryPageStore.state.currentCategoryId,
-        status_options: {
-            ...taskCategoryPageGetters.statusOptions,
-            [statusType]: items,
-        },
-    });
+const handleUpdateItems = async (statusType: TaskStatusType, items: TaskStatusOption[]) => {
+    try {
+        if (!taskCategoryPageStore.state.currentCategoryId) {
+            throw new Error('Category ID is required');
+        }
+        await taskCategoryStore.update({
+            category_id: taskCategoryPageStore.state.currentCategoryId,
+            status_options: {
+                ...taskCategoryPageStore.getters.statusOptions,
+                [statusType]: items,
+            },
+        });
+        showSuccessMessage('Task status options updated successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to update task status options');
+    }
 };
 </script>
 
@@ -37,7 +48,7 @@ const handleUpdateItems = (statusType: TaskStatusType, items: TaskStatusOption[]
             <task-status-list :key="taskStatus.key"
                               :type="taskStatus.key"
                               :header="taskStatus.name"
-                              :items="taskCategoryPageGetters.statusOptions[taskStatus.key]"
+                              :items="taskCategoryPageStore.getters.statusOptions[taskStatus.key]"
                               @update:items="handleUpdateItems(taskStatus.key, $event)"
             />
         </template>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
new file mode 100644
index 0000000000..cf038823b2
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskTypeDeleteModal.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskTypeStore = useTaskTypeStore();
+
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    try {
+        loading.value = true;
+        if (!taskCategoryPageStore.state.targetTaskTypeId) {
+            throw new Error('[Console Error] Cannot delete task type without a target task type');
+        }
+        await taskTypeStore.delete(taskCategoryPageStore.state.targetTaskTypeId, taskCategoryPageStore.getters.targetTaskType?.category_id);
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to delete task type');
+    } finally {
+        taskCategoryPageStore.closeDeleteTaskTypeModal();
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskCategoryPageStore.closeDeleteTaskTypeModal();
+};
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetTaskTypeId();
+};
+</script>
+
+<template>
+    <delete-modal :visible="taskCategoryPageStore.state.visibleTaskTypeDeleteModal"
+                  header-title="Are you sure you want to delete this task type?"
+                  size="sm"
+                  :loading="loading"
+                  @confirm="handleConfirm"
+                  @close="handleCloseOrCancel"
+                  @cancel="handleCloseOrCancel"
+                  @closed="handleClosed"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
index a249ce14cc..11e27f1aaa 100644
--- a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
 import {
-    ref, nextTick, watch, toRef,
+    ref, nextTick, watch,
 } from 'vue';
 
+import { isEqual } from 'lodash';
 
 import {
-    POverlayLayout, PFieldGroup, PTextInput, PSelectDropdown, PButton, PTextarea,
+    POverlayLayout, PFieldGroup, PTextInput, PButton, PTextarea,
 } from '@cloudforet/mirinae';
 
-import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
 
-import { useAssigneePoolField } from '@/services/ops-flow/composables/use-assignee-pool-field';
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 import {
     useTaskFieldsConfiguration,
 } from '@/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration';
@@ -24,22 +28,13 @@ import TaskFieldsConfiguration from '@/services/ops-flow/task-fields-configurati
 const taskCategoryPageStore = useTaskCategoryPageStore();
 const taskCategoryPageState = taskCategoryPageStore.state;
 const taskCategoryPageGetters = taskCategoryPageStore.getters;
-const userReferenceStore = useUserReferenceStore();
-
+const taskTypeStore = useTaskTypeStore();
 
-/* assignee pool */
-const {
-    selectedUserItems,
-    userMenuItemsHandler,
-    handleUpdateSelectedUserItems,
-    setInitialUsers,
-} = useAssigneePoolField({
-    userReferenceMap: toRef(userReferenceStore.getters, 'userItems'),
-});
 
 /* task field configuration */
 const {
     taskFieldsValidator,
+    fields,
     setFields,
     addField,
     removeField,
@@ -49,7 +44,7 @@ const {
 
 /* form validation */
 const {
-    forms: { name, description, fields },
+    forms: { name, description, assigneePool },
     invalidState,
     invalidTexts,
     setForm, isAllValid,
@@ -58,11 +53,15 @@ const {
 } = useFormValidator({
     name: '',
     description: '',
+    assigneePool: [] as string[],
     fields: taskFieldsValidator,
 }, {
     name(value: string) {
         if (!value.trim().length) return 'Name is required';
         if (value.length > 50) return 'Name should be less than 50 characters';
+        if (!taskCategoryPageGetters.taskTypes) return true;
+        const isDuplicated = taskCategoryPageGetters.taskTypes.some((taskType) => taskType.name === value && taskType.task_type_id !== taskCategoryPageGetters.targetTaskType?.task_type_id);
+        if (isDuplicated) return 'Name already exists';
         return true;
     },
 });
@@ -72,24 +71,79 @@ const handleCancelOrClose = () => {
     initForm();
     taskCategoryPageStore.closeTaskTypeForm();
 };
+const handleClosed = () => {
+    taskCategoryPageStore.resetTargetTaskTypeId();
+};
+
+const updateTaskTypeFields = async (taskTypeId: string, categoryId: string) => {
+    await taskTypeStore.updateFields({
+        task_type_id: taskTypeId,
+        fields: fields.value,
+        category_id: categoryId,
+        force: true,
+    });
+};
+
+const createTaskType = async (categoryId: string) => {
+    try {
+        await taskTypeStore.create({
+            name: name.value,
+            description: description.value,
+            assignee_pool: assigneePool.value,
+            category_id: categoryId,
+            fields: fields.value,
+        });
+        showSuccessMessage('Task type created successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to create task type');
+    }
+};
+const updateTaskType = async (initialTaskType: TaskTypeModel) => {
+    try {
+        const promises: Promise<any>[] = [];
+        if (initialTaskType.name !== name.value
+            || initialTaskType.description !== description.value
+            || !isEqual(initialTaskType.assignee_pool, assigneePool.value)
+        ) {
+            promises.push(taskTypeStore.update({
+                task_type_id: initialTaskType.task_type_id,
+                name: name.value,
+                description: description.value,
+                assignee_pool: assigneePool.value,
+            }));
+        }
+        if (!isEqual(fields.value, initialTaskType.fields)) {
+            promises.push(updateTaskTypeFields(initialTaskType.task_type_id, initialTaskType.category_id));
+        }
+        const result = await Promise.allSettled(promises);
+        const errorMessages: string[] = [];
+        result.forEach((res) => {
+            if (res.status === 'rejected') {
+                errorMessages.push(res.reason.message);
+            }
+        });
+        if (errorMessages.length) {
+            throw new Error(errorMessages.join('\n'));
+        }
+        showSuccessMessage('Task type updated successfully', '');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to update task type');
+    }
+};
 
 const handleConfirm = async () => {
     if (!isAllValid.value) return;
-    if (!taskCategoryPageState.currentCategoryId) return;
     try {
+        if (!taskCategoryPageState.currentCategoryId) throw new Error('Category ID is not set');
         loading.value = true;
         if (taskCategoryPageGetters.targetTaskType) {
-            // await taskCategoryStore.update({
-            //
-            // });
+            await updateTaskType(taskCategoryPageGetters.targetTaskType);
         } else {
-            // await taskCategoryStore.create({
-            // });
+            await createTaskType(taskCategoryPageState.currentCategoryId);
         }
-        taskCategoryPageStore.closeStatusForm();
+        taskCategoryPageStore.closeTaskTypeForm();
     } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Failed to save task type');
-        // TODO: handle error
+        ErrorHandler.handleError(e);
     } finally {
         loading.value = false;
     }
@@ -102,16 +156,18 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
         setForm({
             name: '',
             description: '',
+            assigneePool: [],
         });
-        setInitialUsers([]);
         setInitialFields([]);
         resetValidations();
         return;
     }
     if (target) {
-        setForm('name', target.name);
-        setForm('description', target.description);
-        setInitialUsers(target.assignee_pool);
+        setForm({
+            name: target.name,
+            description: target.description,
+            assigneePool: target.assignee_pool,
+        });
         setInitialFields(target.fields);
     }
 });
@@ -123,6 +179,7 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                       :visible="taskCategoryPageState.visibleTaskTypeForm"
                       size="lg"
                       @close="handleCancelOrClose"
+                      @closed="handleClosed"
     >
         <template #default>
             <div class="p-6 w-full">
@@ -139,21 +196,11 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                         />
                     </template>
                 </p-field-group>
-                <p-field-group label="Assignee Pool"
-                               :invalid="!loading && invalidState.assigneePool"
-                               :invalid-text="invalidTexts.assigneePool"
-                >
-                    <template #default="{ invalid }">
-                        <p-select-dropdown show-select-marker
-                                           :invalid="invalid"
-                                           :selected="selectedUserItems"
-                                           :handler="userMenuItemsHandler"
-                                           is-filterable
-                                           use-fixed-menu-style
-                                           show-delete-all-button
-                                           @update:selected="handleUpdateSelectedUserItems"
-                        />
-                    </template>
+                <p-field-group label="Assignee Pool">
+                    <user-select-dropdown :selected-user-ids="assigneePool"
+                                          selection-type="multiple"
+                                          @update:user-ids="setForm('assigneePool', $event)"
+                    />
                 </p-field-group>
                 <p-field-group label="Description">
                     <p-textarea :value="description"
diff --git a/apps/web/src/services/ops-flow/composables/use-assignee-pool-field.ts b/apps/web/src/services/ops-flow/composables/use-assignee-pool-field.ts
deleted file mode 100644
index d53f543dca..0000000000
--- a/apps/web/src/services/ops-flow/composables/use-assignee-pool-field.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Ref } from 'vue';
-import { ref, computed } from 'vue';
-
-import { getTextHighlightRegex } from '@cloudforet/mirinae';
-import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-
-interface UserDropdownItem {
-    name: string;
-    label: string;
-    isUserGroup?: boolean;
-}
-export const useAssigneePoolField = ({
-    userReferenceMap,
-}: {
-    userReferenceMap: Ref<UserReferenceMap>;
-}) => {
-    const allUserItems = computed<UserDropdownItem[]>(() => Object.values(userReferenceMap.value).map((u) => ({
-        name: u.key,
-        label: u.label,
-        isUserGroup: false, // TODO: Implement isUserGroup
-    })));
-    const selectedUserItems = ref<SelectDropdownMenuItem[]>([]);
-    const userMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
-        const filteredItems = allUserItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label));
-        const _totalCount = pageStart - 1 + Number(pageLimit);
-        const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
-        return {
-            results: _slicedResults,
-            more: _totalCount < filteredItems.length,
-        };
-    };
-    const handleUpdateSelectedUserItems = (selectedUsers: SelectDropdownMenuItem[]) => {
-        selectedUserItems.value = selectedUsers;
-    };
-    const prevSelectedUsers = ref<string[]>([]);
-    const setInitialUsers = (initialUsers?: string[]) => {
-        prevSelectedUsers.value = initialUsers ?? [];
-        selectedUserItems.value = allUserItems.value.filter((item) => prevSelectedUsers.value.includes(item.name)).map((item) => ({
-            ...item,
-            selected: true,
-        }));
-    };
-
-    return {
-        selectedUserItems,
-        userMenuItemsHandler,
-        handleUpdateSelectedUserItems,
-        setInitialUsers,
-    };
-};
diff --git a/apps/web/src/services/ops-flow/composables/use-category-field.ts b/apps/web/src/services/ops-flow/composables/use-category-field.ts
index f2da10791c..5c40276d98 100644
--- a/apps/web/src/services/ops-flow/composables/use-category-field.ts
+++ b/apps/web/src/services/ops-flow/composables/use-category-field.ts
@@ -1,36 +1,42 @@
-import type { Ref, DeepReadonly } from 'vue';
 import { computed, ref } from 'vue';
 
 import { getTextHighlightRegex } from '@cloudforet/mirinae';
 import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { PackageModel } from '@/schema/identity/package/model';
-
 import { useFieldValidator } from '@/common/composables/form-validator';
 
-import type { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 
 interface CategoryItem extends SelectDropdownMenuItem {
     packageId: string;
 }
 export const useCategoryField = ({
-    defaultPackage,
-    taskCategoryStore,
+    isRequired, hasTaskTypeOnly,
 }: {
-    defaultPackage: DeepReadonly<Ref<PackageModel|undefined>>;
-    taskCategoryStore: ReturnType<typeof useTaskCategoryStore>
-}) => {
+    isRequired?: boolean;
+    hasTaskTypeOnly?: boolean;
+} = {}) => {
+    const packageStore = usePackageStore();
+    const taskCategoryStore = useTaskCategoryStore();
+    const taskTypeStore = useTaskTypeStore();
+
     const categoryValidator = useFieldValidator<CategoryItem[]>(
         [],
+        isRequired ? (val) => {
+            if (val.length === 0) return 'Please select a category';
+            return true;
+        } : undefined,
     );
     const selectedCategoryItems = categoryValidator.value;
     const selectedCategoryIds = computed<string[]>(() => selectedCategoryItems.value.map((c) => c.name));
 
-    const handleUpdateSelectedCategories = (selectedCategories: CategoryItem[]) => {
+    const setSelectedCategoryItems = (selectedCategories: CategoryItem[]) => {
         categoryValidator.setValue(selectedCategories);
     };
 
-    const allCategoryItems = computed<CategoryItem[]>(() => taskCategoryStore.getters.taskCategories.map((c) => ({ name: c.category_id, label: c.name, packageId: c.package_id })) || []);
+    const allCategoryItems = ref<CategoryItem[]>([]);
     const categoryItemsByPackage = computed<Record<string, CategoryItem[]>>(() => {
         const map: Record<string, CategoryItem[]> = {};
         allCategoryItems.value.forEach((item) => {
@@ -42,7 +48,29 @@ export const useCategoryField = ({
         });
         return map;
     });
+
+    const loadAllCategoryItems = async (): Promise<CategoryItem[]> => {
+        const taskCategories = await taskCategoryStore.list() ?? [];
+
+        if (hasTaskTypeOnly) {
+            await taskTypeStore.listByCategoryIds(taskCategories.map((c) => c.category_id));
+            return taskCategories.filter((c) => {
+                const taskTypes = taskTypeStore.state.itemsByCategoryId[c.category_id];
+                return taskTypes && taskTypes.length > 0;
+            }).map((c) => ({
+                name: c.category_id,
+                label: c.name,
+                packageId: c.package_id,
+            }));
+        }
+        return taskCategoryStore.getters.taskCategories.map((c) => ({
+            name: c.category_id,
+            label: c.name,
+            packageId: c.package_id,
+        })) || [];
+    };
     const categoryMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+        allCategoryItems.value = await loadAllCategoryItems();
         const filteredItems = allCategoryItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
         const _totalCount = pageStart - 1 + Number(pageLimit);
         const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
@@ -54,10 +82,15 @@ export const useCategoryField = ({
 
     const prevSelectedCategoryItems = ref<CategoryItem[]>([]);
     const prevSelectedCategoryIds = computed<string[]>(() => prevSelectedCategoryItems.value.map((c) => c.name));
-    const setInitialCategories = (packageId?: string) => {
+    const setInitialCategoriesByPackageId = (packageId?: string) => {
         prevSelectedCategoryItems.value = packageId ? categoryItemsByPackage.value[packageId] ?? [] : [];
         categoryValidator.setValue(prevSelectedCategoryItems.value);
     };
+    const setInitialCategory = async (categoryId: string) => {
+        allCategoryItems.value = await loadAllCategoryItems();
+        prevSelectedCategoryItems.value = allCategoryItems.value.filter((c) => c.name === categoryId);
+        categoryValidator.setValue(prevSelectedCategoryItems.value);
+    };
 
 
     const addPackageToCategories = async (packageId: string, categoryIds: string[]) => {
@@ -74,8 +107,8 @@ export const useCategoryField = ({
     };
     const bindDefaultPackageToCategories = async (categoryIds: string[]) => {
         try {
-            if (!defaultPackage.value) throw new Error('Default package not found');
-            const defaultPackageId = defaultPackage.value.package_id;
+            if (!packageStore.getters.defaultPackage) throw new Error('Default package not found');
+            const defaultPackageId = packageStore.getters.defaultPackage.package_id;
             await Promise.allSettled([
                 ...categoryIds.map((categoryId) => taskCategoryStore.update({
                     package_id: defaultPackageId,
@@ -104,8 +137,9 @@ export const useCategoryField = ({
         selectedCategoryIds,
         categoryValidator,
         categoryMenuItemsHandler,
-        handleUpdateSelectedCategories,
-        setInitialCategories,
+        setSelectedCategoryItems,
+        setInitialCategoriesByPackageId,
+        setInitialCategory,
         applyPackageToCategories,
     };
 };
diff --git a/apps/web/src/services/ops-flow/composables/use-task-status-field.ts b/apps/web/src/services/ops-flow/composables/use-task-status-field.ts
new file mode 100644
index 0000000000..6e0a2bb271
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-task-status-field.ts
@@ -0,0 +1,93 @@
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+
+import { getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { TaskStatusOption, TaskStatusOptions } from '@/schema/opsflow/task/type';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+const EMPTY_STATUS_OPTIONS = {
+    TODO: [],
+    IN_PROGRESS: [],
+    COMPLETED: [],
+};
+
+export const useTaskStatusField = ({
+    isRequired, categoryId,
+}: {
+    categoryId: Ref<string|undefined>;
+    isRequired?: boolean;
+}) => {
+    const taskCategoryStore = useTaskCategoryStore();
+
+    const taskStatusValidator = useFieldValidator<SelectDropdownMenuItem[]>(
+        [],
+        isRequired ? (val) => {
+            if (val.length === 0) return 'Please select a status';
+            return true;
+        } : undefined,
+    );
+    const selectedStatusItems = taskStatusValidator.value;
+    const selectedStatusId = computed<string|undefined>(() => selectedStatusItems.value[0]?.name);
+
+    const setSelectedStatusItems = (selected: SelectDropdownMenuItem[]) => {
+        taskStatusValidator.setValue(selected);
+    };
+
+    const allStatusItems = ref<SelectDropdownMenuItem[]>([]);
+    const getStatusOptions = async (): Promise<TaskStatusOptions> => {
+        if (!categoryId.value) return EMPTY_STATUS_OPTIONS;
+        const category = await taskCategoryStore.get(categoryId.value);
+        return category?.status_options ?? EMPTY_STATUS_OPTIONS;
+    };
+    const loadAllStatusItems = async () => {
+        const statusOptions = await getStatusOptions();
+        const items: SelectDropdownMenuItem[] = [];
+        items.push({ type: 'header', label: 'To do', name: 'todo' });
+        items.push({ type: 'divider', name: 'todo-div' });
+        statusOptions.TODO.forEach((status) => {
+            items.push({ name: status.status_id, label: status.name });
+        });
+        items.push({ type: 'header', label: 'In progress', name: 'in-porgress' });
+        items.push({ type: 'divider', name: 'in-progress-div' });
+        statusOptions.IN_PROGRESS.forEach((status) => {
+            items.push({ name: status.status_id, label: status.name });
+        });
+        items.push({ type: 'header', label: 'Completed', name: 'completed' });
+        items.push({ type: 'divider', name: 'completed-div' });
+        statusOptions.COMPLETED.forEach((status) => {
+            items.push({ name: status.status_id, label: status.name });
+        });
+        return items;
+    };
+    const statusMenuItemsHandler: AutocompleteHandler = async (keyword: string) => {
+        allStatusItems.value = await loadAllStatusItems();
+        const filteredItems = allStatusItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
+        return {
+            results: filteredItems,
+        };
+    };
+
+    const setInitialStatus = (status?: TaskStatusOption) => {
+        if (status) {
+            setSelectedStatusItems([{
+                name: status.status_id,
+                label: status.name,
+            }]);
+        }
+    };
+
+
+    return {
+        selectedStatusItems,
+        selectedStatusId,
+        taskStatusValidator,
+        statusMenuItemsHandler,
+        setSelectedStatusItems,
+        setInitialStatus,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/composables/use-task-type-field.ts b/apps/web/src/services/ops-flow/composables/use-task-type-field.ts
new file mode 100644
index 0000000000..5bdd45d9bb
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-task-type-field.ts
@@ -0,0 +1,72 @@
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+
+import { getTextHighlightRegex } from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+
+export const useTaskTypeField = ({
+    isRequired, categoryId,
+}: {
+    categoryId: Ref<string|undefined>;
+    isRequired?: boolean;
+}) => {
+    const taskTypeStore = useTaskTypeStore();
+
+    const taskTypeValidator = useFieldValidator<SelectDropdownMenuItem[]>(
+        [],
+        isRequired ? (val) => {
+            if (val.length === 0) return 'Please select a task type';
+            return true;
+        } : undefined,
+    );
+    const selectedTaskTypeItems = taskTypeValidator.value;
+    const selectedTaskTypeId = computed<string|undefined>(() => selectedTaskTypeItems.value[0]?.name);
+
+    const setSelectedTaskTypeItems = (selectedTaskTypes: SelectDropdownMenuItem[]) => {
+        taskTypeValidator.setValue(selectedTaskTypes);
+    };
+
+    const allTaskTypeItems = ref<SelectDropdownMenuItem[]>([]);
+    const loadAllTaskTypeItems = async () => {
+        if (!categoryId.value) return [];
+        const taskTypes = await taskTypeStore.listByCategoryId(categoryId.value);
+        if (!taskTypes) return [];
+        return taskTypes.map((t) => ({
+            name: t.task_type_id,
+            label: t.name,
+        })) || [];
+    };
+    const taskTypeMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+        allTaskTypeItems.value = await loadAllTaskTypeItems();
+        const filteredItems = allTaskTypeItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label as string));
+        const _totalCount = pageStart - 1 + Number(pageLimit);
+        const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+        return {
+            results: _slicedResults,
+            more: _totalCount < filteredItems.length,
+        };
+    };
+
+    const setInitialTaskType = (taskTypeId?: string) => {
+        if (!taskTypeId) {
+            taskTypeValidator.setValue([]);
+            return;
+        }
+        const currentTaskTypeItem = allTaskTypeItems.value.find((item) => item.name === taskTypeId);
+        taskTypeValidator.setValue(currentTaskTypeItem ? [currentTaskTypeItem] : []);
+    };
+
+
+    return {
+        selectedTaskTypeItems,
+        selectedTaskTypeId,
+        taskTypeValidator,
+        taskTypeMenuItemsHandler,
+        setSelectedTaskTypeItems,
+        setInitialTaskType,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/composables/use-workspace-field.ts b/apps/web/src/services/ops-flow/composables/use-workspace-field.ts
index 7085ffadc8..b3bf123fa9 100644
--- a/apps/web/src/services/ops-flow/composables/use-workspace-field.ts
+++ b/apps/web/src/services/ops-flow/composables/use-workspace-field.ts
@@ -1,5 +1,4 @@
-import type { Ref } from 'vue';
-import { computed, ref } from 'vue';
+import { computed, ref, toRef } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getTextHighlightRegex } from '@cloudforet/mirinae';
@@ -8,7 +7,7 @@ import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mi
 import type { WorkspaceAddPackageParameters } from '@/schema/identity/workspace/api-verbs/add-package';
 import type { WorkspaceRemovePackageParameters } from '@/schema/identity/workspace/api-verbs/remove-package';
 
-import type { WorkspaceReferenceMap } from '@/store/reference/workspace-reference-store';
+import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
 
 import { useFieldValidator } from '@/common/composables/form-validator';
 
@@ -24,11 +23,9 @@ const WORKSPACE_SELECTION_TYPES = {
 };
 export type WorkspaceScope = 'unset'|'all'|'specific';
 
-export const useWorkspaceField = ({
-    workspaceReferenceMap,
-}: {
-    workspaceReferenceMap: Ref<WorkspaceReferenceMap|null>;
-}) => {
+export const useWorkspaceField = () => {
+    const workspaceReferenceStore = useWorkspaceReferenceStore();
+    const workspaceReferenceMap = toRef(workspaceReferenceStore.state, 'items');
     const workspaceValidator = useFieldValidator<SelectDropdownMenuItem[]>(
         [],
     );
diff --git a/apps/web/src/services/ops-flow/pages/BoardPage.vue b/apps/web/src/services/ops-flow/pages/BoardPage.vue
index 3d55c81b7e..db580acb3a 100644
--- a/apps/web/src/services/ops-flow/pages/BoardPage.vue
+++ b/apps/web/src/services/ops-flow/pages/BoardPage.vue
@@ -1,8 +1,55 @@
 <script setup lang="ts">
+import { watch, computed } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import {
+    PHeadingLayout, PHeading, PButton,
+} from '@cloudforet/mirinae';
+
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import BoardTaskTable from '@/services/ops-flow/components/BoardTaskTable.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useBoardPageStore } from '@/services/ops-flow/stores/board-page-store';
+import type { TaskCreatePageQuery } from '@/services/ops-flow/types/task-create-page-type';
+
+const route = useRoute();
+
+const { getProperRouteLocation } = useProperRouteLocation();
+
+const boardPageStore = useBoardPageStore();
+
+const taskCreatePageLink = computed(() => getProperRouteLocation({
+    name: OPS_FLOW_ROUTE.BOARD.TASK_CREATE._NAME,
+    query: { categoryId: route.query.categoryId } as TaskCreatePageQuery,
+}));
+
+watch(() => route.query.categoryId, (categoryId) => {
+    boardPageStore.setCurrentCategoryId(categoryId as string);
+});
 
 </script>
 
 <template>
-    <div class="board-page" />
+    <div>
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading>Board</p-heading>
+            </template>
+            <template #extra>
+                <router-link v-slot="{ navigate }"
+                             :to="taskCreatePageLink"
+                             custom
+                >
+                    <p-button icon-left="ic_plus_bold"
+                              @click="navigate"
+                    >
+                        Create Ticket
+                    </p-button>
+                </router-link>
+            </template>
+        </p-heading-layout>
+        <board-task-table />
+    </div>
 </template>
 
diff --git a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
index 033f5317a0..9ff2b0ddd8 100644
--- a/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
+++ b/apps/web/src/services/ops-flow/pages/TaskCreatePage.vue
@@ -1,8 +1,152 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
 <script setup lang="ts">
+/* eslint-disable import/first */
+// eslint-disable-next-line import/no-duplicates,import/order
+import {
+    ref, computed, onBeforeMount, onUnmounted,
+    // eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import { useRoute, onBeforeRouteLeave } from 'vue-router/composables';
+
+import {
+    PHeadingLayout, PHeading, PButton, PPaneLayout, PSkeleton,
+} from '@cloudforet/mirinae';
+
+import { queryStringToString } from '@/lib/router-query-string';
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useConfirmRouteLeave } from '@/common/composables/confirm-route-leave';
+import { useGoBack } from '@/common/composables/go-back';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import TaskContentBaseForm from '@/services/ops-flow/components/TaskContentBaseForm.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import TaskFieldsForm from '@/services/ops-flow/task-fields-form/TaskFieldsForm.vue';
+import type { BoardPageQuery } from '@/services/ops-flow/types/board-page-type';
+import type { TaskCreatePageQueryValue } from '@/services/ops-flow/types/task-create-page-type';
+
+
+
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+
+/* route and query */
+const route = useRoute();
+const { getProperRouteLocation } = useProperRouteLocation();
+const categoryId = computed<TaskCreatePageQueryValue['categoryId']>(() => queryStringToString(route.query.categoryId));
+
+/* header and back button */
+const loading = false; // computed<boolean>(() => taskCategoryStore.getters.loading);
+const headerTitle = 'Create Ticket'; // computed<string>(() => taskCategoryPageStore.getters.currentCategory?.name ?? 'No Category');
+const {
+    setPathFrom,
+    goBack,
+} = useGoBack(getProperRouteLocation({
+    name: OPS_FLOW_ROUTE.BOARD._NAME,
+    query: { categoryId: categoryId.value } as BoardPageQuery,
+}));
+
+/* confirm leave modal */
+const hasCreated = ref(false);
+const {
+    isConfirmLeaveModalVisible,
+    handleBeforeRouteLeave,
+    confirmRouteLeave,
+    stopRouteLeave,
+} = useConfirmRouteLeave({
+    passConfirmation: computed(() => !taskContentFormState.hasUnsavedChanges || hasCreated.value),
+});
+onBeforeRouteLeave(handleBeforeRouteLeave);
+
+/* form button handling */
+const handleConfirm = async () => {
+    if (!taskContentFormGetters.isAllValid) return;
+    hasCreated.value = await taskContentFormStore.createTask();
+    if (hasCreated.value) goBack();
+};
+
+/* lifecycle */
+onBeforeMount(() => {
+    taskContentFormStore.setCurrentCategoryId(categoryId.value);
+    if (route.hash === '#minimal') {
+        taskContentFormStore.setMode('create-minimal');
+    } else {
+        taskContentFormStore.setMode('create');
+    }
+});
+onUnmounted(() => {
+    taskContentFormStore.$reset();
+    taskContentFormStore.$dispose();
+});
 
+/* expose */
+defineExpose({ setPathFrom });
 </script>
 
 <template>
-    <div class="task-create-page" />
+    <div class="mr-auto max-w-tablet">
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading show-back-button
+                           @click-back-button="goBack"
+                >
+                    <p-skeleton v-if="loading"
+                                height="1.75rem"
+                                width="12rem"
+                    />
+                    <template v-else>
+                        {{ headerTitle }}
+                    </template>
+                </p-heading>
+            </template>
+        </p-heading-layout>
+        <p-pane-layout class="pt-8 px-4 pb-10 mr-auto flex flex-wrap w-full gap-4">
+            <p-heading class="mb-6"
+                       title="Type Information"
+                       heading-type="sub"
+            />
+            <div class="w-full">
+                <task-content-base-form class="mb-4" />
+                <task-fields-form />
+            </div>
+        </p-pane-layout>
+        <div class="py-3 flex flex-wrap gap-1 justify-end">
+            <p-button style-type="transparent"
+                      @click="goBack()"
+            >
+                Cancel
+            </p-button>
+            <p-button style-type="primary"
+                      :disabled="!taskContentFormGetters.isAllValid"
+                      @click="handleConfirm"
+            >
+                Confirm
+            </p-button>
+        </div>
+        <!-- modals -->
+        <confirm-back-modal :visible="isConfirmLeaveModalVisible"
+                            @confirm="confirmRouteLeave"
+                            @cancel="stopRouteLeave"
+        />
+    </div>
 </template>
 
diff --git a/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue b/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
index d1f461941e..58d9bb0566 100644
--- a/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
+++ b/apps/web/src/services/ops-flow/pages/TaskDetailPage.vue
@@ -1,7 +1,193 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
 <script setup lang="ts">
+/* eslint-disable import/first */
+// eslint-disable-next-line import/no-duplicates,import/order
+import {
+    computed, onBeforeMount, onUnmounted, defineAsyncComponent, ref,
+    // eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router/composables';
+
+import {
+    PHeadingLayout, PHeading, PButton, PTab, PSkeleton,
+} from '@cloudforet/mirinae';
+import type { TabItem } from '@cloudforet/mirinae/types/hooks/use-tab/type';
+
+import { queryStringToString } from '@/lib/router-query-string';
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useConfirmRouteLeave } from '@/common/composables/confirm-route-leave';
+import { useGoBack } from '@/common/composables/go-back';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+
+import BoardTaskComment from '@/services/ops-flow/components/BoardTaskComment.vue';
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import type { BoardPageQuery } from '@/services/ops-flow/types/board-page-type';
+import type { TaskCreatePageQueryValue } from '@/services/ops-flow/types/task-create-page-type';
+
+const TaskContentBaseForm = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskContentBaseForm.vue'));
+const TaskFieldsForm = defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/TaskFieldsForm.vue'));
+const TaskCreateProgressTab = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskCreateProgressTab.vue'));
+
 
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+
+/* route and query */
+const router = useRouter();
+const route = useRoute();
+const categoryId = computed<TaskCreatePageQueryValue['categoryId']>(() => queryStringToString(route.query.categoryId));
+const { getProperRouteLocation } = useProperRouteLocation();
+
+
+/* header and back button */
+const loading = false; // computed<boolean>(() => taskCategoryStore.getters.loading);
+const headerTitle = 'Inquiry Service Request'; // computed<string>(() => taskCategoryPageStore.getters.currentCategory?.name ?? 'No Category');
+const {
+    setPathFrom,
+    goBack,
+} = useGoBack(getProperRouteLocation({
+    name: OPS_FLOW_ROUTE.BOARD._NAME,
+    query: { categoryId: route.query.categoryId } as BoardPageQuery,
+}), true);
+
+/* confirm leave modal */
+const {
+    isConfirmLeaveModalVisible,
+    handleBeforeRouteLeave,
+    confirmRouteLeave,
+    stopRouteLeave,
+} = useConfirmRouteLeave({
+    passConfirmation: computed(() => !taskContentFormState.hasUnsavedChanges),
+});
+onBeforeRouteLeave(handleBeforeRouteLeave);
+
+/* tabs */
+const tabs = computed<TabItem<object>[]>(() => [
+    {
+        name: 'content',
+        label: 'Content', // TODO: i18n
+        keepAlive: true,
+    },
+    {
+        name: 'progress',
+        label: 'Progress', // TODO: i18n & template
+        keepAlive: true,
+    },
+]);
+const activeTab = ref<'content'|'progress'>('content');
+const handleUpdateActiveTab = (tab: 'content'|'progress') => {
+    activeTab.value = tab;
+    router.replace({
+        hash: `#${tab}`,
+    });
+};
+
+/* form button handling */
+const handleSaveChanges = async () => {
+    if (!taskContentFormGetters.isAllValid) return;
+    const result = await taskContentFormStore.createTask();
+    if (result) goBack();
+};
+
+/* lifecycle */
+onBeforeMount(() => {
+    taskContentFormStore.setCurrentCategoryId(categoryId.value);
+    if (route.hash === '#progress') {
+        activeTab.value = 'progress';
+    }
+    taskContentFormStore.setMode('view'); // TODO: differentiate by user permission
+});
+onUnmounted(() => {
+    taskContentFormStore.$reset();
+    taskContentFormStore.$dispose();
+});
+
+/* expose */
+defineExpose({ setPathFrom });
 </script>
 
 <template>
-    <div class="task-detail-page" />
+    <div>
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading show-back-button
+                           @click-back-button="goBack"
+                >
+                    <p-skeleton v-if="loading"
+                                height="1.75rem"
+                                width="12rem"
+                    />
+                    <template v-else>
+                        {{ headerTitle }}
+                    </template>
+                </p-heading>
+            </template>
+            <template #extra>
+                <p-button style-type="negative-secondary">
+                    Delete
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <div class="mr-auto flex flex-wrap w-full gap-4">
+            <div class="flex-1 w-full min-w-[600px] tablet:min-w-full">
+                <p-tab class="w-full"
+                       :tabs="tabs"
+                       :active-tab="activeTab"
+                       @update:active-tab="handleUpdateActiveTab"
+                >
+                    <template #content>
+                        <div class="w-full">
+                            <task-content-base-form class="mb-4" />
+                            <task-fields-form />
+                        </div>
+                    </template>
+                    <template #progress>
+                        <task-create-progress-tab />
+                    </template>
+                </p-tab>
+                <div v-if="taskContentFormState.mode === 'edit'"
+                     class="py-3 flex flex-wrap gap-1 justify-end"
+                >
+                    <p-button style-type="transparent"
+                              @click="goBack()"
+                    >
+                        Cancel
+                    </p-button>
+                    <p-button style-type="primary"
+                              :disabled="!taskContentFormGetters.isAllValid"
+                              @click="handleSaveChanges"
+                    >
+                        Confirm
+                    </p-button>
+                </div>
+            </div>
+            <board-task-comment class="flex-1 w-full min-w-[360px] lg:max-w-[528px] tablet:min-w-full" />
+        </div>
+        <!-- modals -->
+        <confirm-back-modal :visible="isConfirmLeaveModalVisible"
+                            @confirm="confirmRouteLeave"
+                            @cancel="stopRouteLeave"
+        />
+    </div>
 </template>
+
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
index bc72a30161..990852d20a 100644
--- a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
@@ -20,7 +20,7 @@ export default defineComponent({
 /* eslint-disable import/first */
 // eslint-disable-next-line import/no-duplicates,import/order
 // eslint-disable-next-line import/no-duplicates
-import { computed, onBeforeMount } from 'vue';
+import { computed, onBeforeMount, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
 import { PHeading, PTab, PSkeleton } from '@cloudforet/mirinae';
@@ -33,9 +33,12 @@ import { useGoBack } from '@/common/composables/go-back';
 
 import TaskStatusDeleteModal from '@/services/ops-flow/components/TaskStatusDeleteModal.vue';
 import TaskStatusForm from '@/services/ops-flow/components/TaskStatusForm.vue';
+import TaskStatusSetDefaultModal from '@/services/ops-flow/components/TaskStatusSetDefaultModal.vue';
+import TaskTypeDeleteModal from '@/services/ops-flow/components/TaskTypeDeleteModal.vue';
 import TaskTypeForm from '@/services/ops-flow/components/TaskTypeForm.vue';
 import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
 
 const props = defineProps<{
     taskCategoryId: string;
@@ -44,13 +47,12 @@ const router = useRouter();
 const route = useRoute();
 
 const taskCategoryPageStore = useTaskCategoryPageStore();
-const taskCategoryPageGetters = taskCategoryPageStore.getters;
-const taskCategoryStore = taskCategoryPageStore.taskCategoryStore;
+const taskCategoryStore = useTaskCategoryStore();
 
 
 /* header and back button */
-const loading = computed<boolean>(() => taskCategoryStore.state.loading);
-const headerTitle = computed<string>(() => taskCategoryPageGetters.currentCategory?.name ?? 'No Category');
+const loading = computed<boolean>(() => taskCategoryStore.getters.loading);
+const headerTitle = computed<string>(() => taskCategoryPageStore.getters.currentCategory?.name ?? 'No Category');
 const {
     setPathFrom,
     handleClickBackButton,
@@ -97,6 +99,9 @@ const handleUpdateActiveTab = (tab: string) => {
 onBeforeMount(() => {
     taskCategoryPageStore.setCurrentCategoryId(props.taskCategoryId);
 });
+onUnmounted(() => {
+    taskCategoryPageStore.$dispose();
+});
 
 /* expose */
 defineExpose({ setPathFrom });
@@ -122,9 +127,14 @@ defineExpose({ setPathFrom });
         >
             <router-view />
         </p-tab>
-        <!-- modals -->
+
+        <!-- task status -->
         <task-status-form />
         <task-status-delete-modal />
+        <task-status-set-default-modal />
+
+        <!-- task type -->
         <task-type-form />
+        <task-type-delete-modal />
     </div>
 </template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
index 148fe1aa23..5c7579f6b9 100644
--- a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
@@ -10,7 +10,9 @@ import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
 
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
 
+
 const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
 
 const taskTypeFields = computed<DataTableField[]>(() => [
     {
@@ -39,7 +41,9 @@ const taskTypeFields = computed<DataTableField[]>(() => [
                 </p-heading>
             </template>
             <template #extra>
-                <p-icon-button name="ic_refresh" />
+                <p-icon-button name="ic_refresh"
+                               @click="taskCategoryPageStore.listTaskTypes()"
+                />
                 <p-button style-type="substitutive"
                           icon-left="ic_plus_bold"
                           @click="taskCategoryPageStore.openAddTaskTypeForm()"
@@ -52,8 +56,8 @@ const taskTypeFields = computed<DataTableField[]>(() => [
             티켓 양식으로 티켓에 포함된 필드와 데이터를 결정합니다. 여러 티켓 양식을 만들 수 있습니다. <br>
             예를 들어 서비스별로 서로 다른 양식을 만들 수 있습니다. 그런 경우에는 최종 사용자가 적절한 양식을 선택하여 요청을 제출합니다.
         </p>
-        <p-data-table :loading="!taskCategoryPageStore.getters.taskTypes"
-                      :items="taskCategoryPageStore.getters.taskTypes"
+        <p-data-table :loading="!taskCategoryPageGetters.taskTypes"
+                      :items="taskCategoryPageGetters.taskTypes"
                       :fields="taskTypeFields"
         >
             <template #col-buttons-format="{ item }">
diff --git a/apps/web/src/services/ops-flow/routes/routes.ts b/apps/web/src/services/ops-flow/routes/routes.ts
index ba3b319466..a1ece4a86c 100644
--- a/apps/web/src/services/ops-flow/routes/routes.ts
+++ b/apps/web/src/services/ops-flow/routes/routes.ts
@@ -40,21 +40,20 @@ const opsFlowRoutes: RouteConfig = {
             meta: {
                 menuId: MENU_ID.BOARD,
                 translationId: MENU_INFO_MAP[MENU_ID.BOARD].translationId,
+                lsbVisible: true,
             },
             component: BoardPage as any,
-            children: [
-                {
-                    path: ':taskId',
-                    name: OPS_FLOW_ROUTE.BOARD.TASK_DETAIL._NAME,
-                    props: true,
-                    component: TaskDetailPage as any,
-                },
-                {
-                    path: 'task-create',
-                    name: OPS_FLOW_ROUTE.BOARD.TASK_CREATE._NAME,
-                    component: TaskCreatePage as any,
-                },
-            ],
+        },
+        {
+            path: 'board/task-create',
+            name: OPS_FLOW_ROUTE.BOARD.TASK_CREATE._NAME,
+            component: TaskCreatePage as any,
+        },
+        {
+            path: 'board/:taskId',
+            name: OPS_FLOW_ROUTE.BOARD.TASK_DETAIL._NAME,
+            props: true,
+            component: TaskDetailPage as any,
         },
     ],
 };
diff --git a/apps/web/src/services/ops-flow/stores/admin/package-store.ts b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
index 08bda782dc..fcedaedd8f 100644
--- a/apps/web/src/services/ops-flow/stores/admin/package-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
@@ -1,6 +1,5 @@
 import { asyncComputed } from '@vueuse/core';
-import type { Ref, UnwrapRef } from 'vue';
-import { reactive } from 'vue';
+import { watch, reactive, computed } from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -15,6 +14,8 @@ import type { PackageSetDefaultParameters } from '@/schema/identity/package/api-
 import type { PackageUpdateParameters } from '@/schema/identity/package/api-verbs/update';
 import type { PackageModel } from '@/schema/identity/package/model';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 
@@ -22,23 +23,22 @@ interface UsePackageStoreState {
     loading: boolean;
     items?: PackageModel[];
 }
-interface UsePackageStoreGetters {
-    packages: Ref<Readonly<PackageModel[]>>
-}
 export const usePackageStore = defineStore('package', () => {
     const state = reactive<UsePackageStoreState>({
         loading: false,
         items: undefined,
     });
 
-    const getters = reactive<UsePackageStoreGetters>({
+    const getters = {
+        loading: computed(() => state.loading),
         packages: asyncComputed<PackageModel[]>(async () => {
             if (state.items === undefined) {
                 await actions.list();
             }
             return state.items ?? [];
         }, [], { lazy: true }),
-    }) as UnwrapRef<UsePackageStoreGetters>;
+        defaultPackage: computed<PackageModel|undefined>(() => getters.packages.find((p) => p.is_default)),
+    };
 
     const fetchList = getCancellableFetcher<PackageListParameters, ListResponse<PackageModel>>(SpaceConnector.clientV2.identity.package.list);
     const actions = {
@@ -47,7 +47,7 @@ export const usePackageStore = defineStore('package', () => {
             try {
                 const result = await fetchList({});
                 if (result.status === 'succeed') {
-                    state.items = result.response.results;
+                    state.items = result.response.results ?? [];
                 }
             } catch (e) {
                 ErrorHandler.handleError(e);
@@ -57,28 +57,42 @@ export const usePackageStore = defineStore('package', () => {
         },
         async create(param: PackageCreateParameters) {
             const response = await SpaceConnector.clientV2.identity.package.create<PackageCreateParameters, PackageModel>(param);
+            state.items?.push(response);
             return response;
         },
         async update(param: PackageUpdateParameters) {
             const response = await SpaceConnector.clientV2.identity.package.update<PackageUpdateParameters, PackageModel>(param);
+            state.items = state.items?.map((item) => (item.package_id === response.package_id ? response : item));
             return response;
         },
         async setDefaultPackage(packageId: string) {
             const prevDefaultPackage = getters.packages.find((p) => p.is_default);
             if (prevDefaultPackage?.package_id === packageId) return prevDefaultPackage;
-            const response = await SpaceConnector.clientV2.identity.package.setDefaultPackage<PackageSetDefaultParameters, PackageModel>({
+            const response = await SpaceConnector.clientV2.identity.package.setDefault<PackageSetDefaultParameters, PackageModel>({
                 package_id: packageId,
             });
+            const prev = state.items?.find((p) => p.is_default);
+            if (prev) prev.is_default = false;
+            const current = state.items?.find((p) => p.package_id === packageId);
+            if (current) current.is_default = true;
             return response;
         },
         async delete(packageId: string) {
             await SpaceConnector.clientV2.identity.package.delete<PackageDeleteParameters, undefined>({
                 package_id: packageId,
             });
+            state.items = state.items?.filter((item) => item.package_id !== packageId);
         },
     };
+    const disposeSelf = () => {
+        const store = usePackageStore();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch(() => appContextStore.getters.isAdminMode, () => {
+        disposeSelf();
+    });
     return {
-        state,
         getters,
         ...actions,
     };
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
index f5cf4c33ad..b7d8fbd519 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,5 +1,7 @@
-import type { ComputedRef, UnwrapRef } from 'vue';
-import { reactive, computed } from 'vue';
+import { asyncComputed } from '@vueuse/core';
+import {
+    reactive, computed,
+} from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -7,18 +9,21 @@ import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
 import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
 import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
-import { useTaskTypeStore } from '@/services/ops-flow/stores/admin/task-type-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 
 interface UseTaskCategoryPageStoreState {
     currentCategoryId?: string;
     // status
     visibleStatusForm: boolean;
     targetStatus: {
+        statusId: string;
         type: TaskStatusType;
-        index: number;
     }|undefined;
     visibleStatusDeleteModal: boolean;
+    visibleSetDefaultStatusModal: boolean;
     // task type
     visibleTaskTypeForm: boolean;
     targetTaskTypeId?: string;
@@ -26,19 +31,19 @@ interface UseTaskCategoryPageStoreState {
 }
 
 interface UseTaskCategoryPageStoreGetters {
-    currentCategory: ComputedRef<TaskCategoryModel|undefined>;
+    currentCategory: TaskCategoryModel|undefined;
     // status
-    statusOptions: ComputedRef<TaskStatusOptions>;
-    targetStatusOption: ComputedRef<{
-            type: TaskStatusType;
-            data: TaskStatusOption;
-        }|undefined>;
+    statusOptions: TaskStatusOptions;
+    targetStatusOption: {
+        type: TaskStatusType;
+        data: TaskStatusOption;
+    }|undefined;
     // task type
-    taskTypes: ComputedRef<TaskTypeModel[]|undefined>;
-    targetTaskType: ComputedRef<TaskTypeModel|undefined>;
+    taskTypes: TaskTypeModel[]|undefined;
+    targetTaskType: TaskTypeModel|undefined;
 }
 
-export const useTaskCategoryPageStore = defineStore('task-management-category-page', () => {
+export const useTaskCategoryPageStore = defineStore('task-category-page', () => {
     const taskCategoryStore = useTaskCategoryStore();
     const taskTypeStore = useTaskTypeStore();
     const state = reactive<UseTaskCategoryPageStoreState>({
@@ -47,13 +52,13 @@ export const useTaskCategoryPageStore = defineStore('task-management-category-pa
         visibleStatusForm: false,
         targetStatus: undefined,
         visibleStatusDeleteModal: false,
+        visibleSetDefaultStatusModal: false,
         // task type
         visibleTaskTypeForm: false,
         targetTaskTypeId: undefined,
         visibleTaskTypeDeleteModal: false,
     });
-
-    const getters = reactive<UseTaskCategoryPageStoreGetters>({
+    const getters: UseTaskCategoryPageStoreGetters = {
         currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
         // status
         statusOptions: computed<TaskStatusOptions>(() => {
@@ -72,26 +77,27 @@ export const useTaskCategoryPageStore = defineStore('task-management-category-pa
             data: TaskStatusOption;
         }|undefined>(() => {
             if (!state.targetStatus) return undefined;
-            const { index, type } = state.targetStatus;
+            const { statusId, type } = state.targetStatus;
             const statusOptions = getters.statusOptions;
             if (!statusOptions) return undefined;
+            const data = statusOptions[type].find((status) => status.status_id === statusId);
+            if (!data) return undefined;
             return {
                 type,
-                data: statusOptions[type][index],
+                data,
             };
         }),
         // task type
-        taskTypes: computed<TaskTypeModel[]|undefined>(() => {
+        taskTypes: asyncComputed<TaskTypeModel[]|undefined>(async () => {
             if (!state.currentCategoryId) return undefined;
-            const allTaskTypes = taskTypeStore.getters.taskTypes;
-            return allTaskTypes.filter((taskType) => taskType.category_id === state.currentCategoryId);
-        }),
+            if (!taskTypeStore.state.itemsByCategoryId[state.currentCategoryId]) await taskTypeStore.listByCategoryId(state.currentCategoryId);
+            return taskTypeStore.state.itemsByCategoryId[state.currentCategoryId];
+        }, undefined, { lazy: true, onError: ErrorHandler.handleError }),
         targetTaskType: computed<TaskTypeModel|undefined>(() => {
             if (!state.targetTaskTypeId) return undefined;
-            return taskTypeStore.getters.taskTypes.find((taskType) => taskType.task_type_id === state.targetTaskTypeId);
+            return getters.taskTypes?.find((taskType) => taskType.task_type_id === state.targetTaskTypeId);
         }),
-    }) as UnwrapRef<UseTaskCategoryPageStoreGetters>;
-
+    } as unknown as UseTaskCategoryPageStoreGetters;
     const actions = {
         setCurrentCategoryId(categoryId: string) {
             state.currentCategoryId = categoryId;
@@ -101,29 +107,53 @@ export const useTaskCategoryPageStore = defineStore('task-management-category-pa
             state.targetStatus = undefined;
             state.visibleStatusForm = true;
         },
-        openEditStatusForm(index: number, statusType: TaskStatusType) {
+        openEditStatusForm(statusId: string, statusType: TaskStatusType) {
             state.targetStatus = {
-                index,
+                statusId,
                 type: statusType,
             };
             state.visibleStatusForm = true;
         },
         closeStatusForm() {
             state.visibleStatusForm = false;
-            state.targetStatus = undefined;
+            // do not reset targetStatus here and handle it after the modal is closed
         },
-        openDeleteStatusModal(index: number, statusType: TaskStatusType) {
+        openDeleteStatusModal(statusId: string, statusType: TaskStatusType) {
             state.targetStatus = {
-                index,
+                statusId,
                 type: statusType,
             };
             state.visibleStatusDeleteModal = true;
         },
         closeDeleteStatusModal() {
             state.visibleStatusDeleteModal = false;
+            // do not reset targetStatus here and handle it after the modal is closed
+        },
+        openSetDefaultStatusModal(statusId: string, statusType: TaskStatusType) {
+            state.targetStatus = {
+                statusId,
+                type: statusType,
+            };
+            state.visibleSetDefaultStatusModal = true;
+        },
+        closeSetDefaultStatusModal() {
+            state.visibleSetDefaultStatusModal = false;
+            // do not reset targetStatus here and handle it after the modal is closed
+        },
+        resetTargetStatus() {
             state.targetStatus = undefined;
         },
         // task type
+        async listTaskTypes() {
+            try {
+                if (!state.currentCategoryId) throw new Error('currentCategoryId is not set');
+                const taskTypes = await taskTypeStore.listByCategoryId(state.currentCategoryId, true);
+                return taskTypes;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                return [];
+            }
+        },
         openAddTaskTypeForm() {
             state.targetTaskTypeId = undefined;
             state.visibleTaskTypeForm = true;
@@ -134,7 +164,7 @@ export const useTaskCategoryPageStore = defineStore('task-management-category-pa
         },
         closeTaskTypeForm() {
             state.visibleTaskTypeForm = false;
-            state.targetTaskTypeId = undefined;
+            // do not reset targetTaskTypeId here and handle it after the modal is closed
         },
         openDeleteTaskTypeModal(taskTypeId: string) {
             state.targetTaskTypeId = taskTypeId;
@@ -142,6 +172,9 @@ export const useTaskCategoryPageStore = defineStore('task-management-category-pa
         },
         closeDeleteTaskTypeModal() {
             state.visibleTaskTypeDeleteModal = false;
+            // do not reset targetTaskTypeId here and handle it after the modal is closed
+        },
+        resetTargetTaskTypeId() {
             state.targetTaskTypeId = undefined;
         },
     };
@@ -149,6 +182,5 @@ export const useTaskCategoryPageStore = defineStore('task-management-category-pa
         state,
         getters,
         ...actions,
-        taskCategoryStore,
     };
 });
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts
index e8fd80cf34..1daece9994 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-category-store.ts
@@ -1,6 +1,4 @@
-import { asyncComputed } from '@vueuse/core';
-import type { Ref } from 'vue';
-import { reactive } from 'vue';
+import { reactive, computed, watch } from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -9,11 +7,14 @@ import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/canc
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { TaskCategoryCreateParameters } from '@/schema/opsflow/task-category/api-verbs/create';
+import type { TaskCategoryDeleteParameters } from '@/schema/opsflow/task-category/api-verbs/delete';
 import type { TaskCategoryGetParameters } from '@/schema/opsflow/task-category/api-verbs/get';
 import type { TaskCategoryListParameters } from '@/schema/opsflow/task-category/api-verbs/list';
 import type { TaskCategoryUpdateParameters } from '@/schema/opsflow/task-category/api-verbs/update';
 import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 
@@ -21,9 +22,6 @@ interface UseTaskCategoryStoreState {
     loading: boolean;
     items?: TaskCategoryModel[];
 }
-interface UseTaskCategoryStoreGetters {
-    taskCategories: Ref<Readonly<TaskCategoryModel[]>>
-}
 const DEFAULT_STATUS_OPTIONS: TaskCategoryCreateParameters['status_options'] = {
     TODO: [
         { name: 'To Do', color: 'blue200', is_default: true },
@@ -39,56 +37,84 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
     const state = reactive<UseTaskCategoryStoreState>({
         loading: false,
         items: undefined,
-    }) as UseTaskCategoryStoreState;
+    });
 
-    const getters = reactive<UseTaskCategoryStoreGetters>({
-        taskCategories: asyncComputed<TaskCategoryModel[]>(async () => {
+    const getters = {
+        loading: computed<boolean>(() => state.loading),
+        taskCategories: computed<TaskCategoryModel[]>(() => {
             if (state.items === undefined) {
-                await actions.list();
+                actions.list();
             }
             return state.items ?? [];
-        }, [], { lazy: true }),
-    });
+        }),
+    };
 
 
-    const fetchList = getCancellableFetcher<TaskCategoryListParameters, ListResponse<TaskCategoryModel>>(SpaceConnector.client.opsFlow.taskCategory.list);
+    const fetchList = getCancellableFetcher<TaskCategoryListParameters, ListResponse<TaskCategoryModel>>(SpaceConnector.clientV2.opsflow.taskCategory.list);
     const actions = {
-        async list() {
-            state.loading = true;
+        async list(paramsOrForce?: TaskCategoryListParameters|true): Promise<TaskCategoryModel[]|undefined> {
+            const force = paramsOrForce === true;
+            if (!force && state.items) return state.items;
+            const params = force ? undefined : paramsOrForce;
             try {
-                const result = await fetchList({});
+                state.loading = true;
+                const result = await fetchList(params ?? {});
                 if (result.status === 'succeed') {
-                    state.items = result.response.results;
+                    state.loading = false;
+                    if (params) {
+                        return result.response.results ?? [];
+                    }
+                    state.items = result.response.results ?? [];
+                    return result.response.results ?? [];
                 }
+                return undefined;
             } catch (e) {
                 ErrorHandler.handleError(e);
-            } finally {
                 state.loading = false;
+                return undefined;
             }
         },
         async create(params: Omit<TaskCategoryCreateParameters, 'status_options'>) {
-            const response = await SpaceConnector.client.opsFlow.taskCategory.create<TaskCategoryCreateParameters, TaskCategoryModel>({
+            const response = await SpaceConnector.clientV2.opsflow.taskCategory.create<TaskCategoryCreateParameters, TaskCategoryModel>({
                 ...params,
                 status_options: DEFAULT_STATUS_OPTIONS,
             });
+            state.items?.push(response);
             return response;
         },
         async update(params: TaskCategoryUpdateParameters) {
-            const response = await SpaceConnector.client.opsFlow.taskCategory.update<TaskCategoryUpdateParameters, TaskCategoryModel>(params);
+            const response = await SpaceConnector.clientV2.opsflow.taskCategory.update<TaskCategoryUpdateParameters, TaskCategoryModel>(params);
+            const item = state.items?.find((c) => c.category_id === response.category_id);
+            if (item) {
+                Object.assign(item, response);
+            }
             return response;
         },
         async get(categoryId: string) {
-            const response = await SpaceConnector.client.opsFlow.taskCategory.update<TaskCategoryGetParameters, TaskCategoryModel>({
+            const category = state.items?.find((item) => item.category_id === categoryId);
+            if (category) return category;
+            const response = await SpaceConnector.clientV2.opsflow.taskCategory.get<TaskCategoryGetParameters, TaskCategoryModel>({
                 category_id: categoryId,
             });
             return response;
         },
         async delete(categoryId: string) {
-            await SpaceConnector.client.opsFlow.taskCategory.delete({
+            await SpaceConnector.clientV2.opsflow.taskCategory.delete<TaskCategoryDeleteParameters, TaskCategoryModel>({
                 category_id: categoryId,
             });
+            state.items = state.items?.filter((item) => item.category_id !== categoryId);
         },
     };
+
+    const disposeSelf = () => {
+        const store = useTaskCategoryStore();
+        store.$reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch([() => appContextStore.getters.isAdminMode, () => appContextStore.getters.workspaceId], () => {
+        disposeSelf();
+    });
     return {
         state,
         getters,
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
index b758e4d568..65ad0408f5 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
@@ -1,4 +1,4 @@
-import type { ComputedRef, DeepReadonly } from 'vue';
+import type { DeepReadonly } from 'vue';
 import { reactive, computed } from 'vue';
 
 import { defineStore } from 'pinia';
@@ -11,7 +11,6 @@ import { useWorkspaceReferenceStore } from '@/store/reference/workspace-referenc
 
 import { usePackageStore } from '@/services/ops-flow/stores/admin/package-store';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
-// import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 
 interface UseTaskManagementPageStoreState {
     // support package
@@ -25,19 +24,10 @@ interface UseTaskManagementPageStoreState {
     visibleDeleteCategoryModal: boolean;
 }
 
-interface UseTaskManagementPageStoreGetters {
-    targetPackage: ComputedRef<PackageModel|undefined>;
-    associatedCategoriesToPackage: ComputedRef<DeepReadonly<TaskCategoryModel[]>>;
-    associatedWorkspacesToPackage: ComputedRef<WorkspaceItem[]>;
-    targetCategory: ComputedRef<DeepReadonly<TaskCategoryModel>|undefined>;
-    defaultPackage: ComputedRef<PackageModel|undefined>;
-}
-
 export const useTaskManagementPageStore = defineStore('task-management-page', () => {
     const packageStore = usePackageStore();
     const taskCategoryStore = useTaskCategoryStore();
     const workspaceReferenceStore = useWorkspaceReferenceStore();
-    // const taskTypeStore = useTaskTypeStore();
     const state = reactive<UseTaskManagementPageStoreState>({
         // support package
         visiblePackageForm: false,
@@ -49,7 +39,7 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         targetCategoryId: undefined,
         visibleDeleteCategoryModal: false,
     });
-    const getters = reactive<UseTaskManagementPageStoreGetters>({
+    const getters = {
         targetPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.package_id === state.targetPackageId)),
         associatedCategoriesToPackage: computed<DeepReadonly<TaskCategoryModel[]>>(() => taskCategoryStore.getters.taskCategories.filter((c) => c.package_id === state.targetPackageId)),
         associatedWorkspacesToPackage: computed<WorkspaceItem[]>(() => {
@@ -60,7 +50,7 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         }),
         targetCategory: computed<DeepReadonly<TaskCategoryModel>|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.targetCategoryId)),
         defaultPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.is_default)),
-    });
+    };
     const actions = {
         // support package
         openAddPackageForm() {
@@ -73,7 +63,7 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         },
         closePackageForm() {
             state.visiblePackageForm = false;
-            state.targetPackageId = undefined;
+            // do not reset targetPackageId here and handle it after the modal is closed
         },
         openDeletePackageModal(packageId: string) {
             state.targetPackageId = packageId;
@@ -81,7 +71,7 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         },
         closeDeletePackageModal() {
             state.visibleDeletePackageModal = false;
-            state.targetPackageId = undefined;
+            // do not reset targetPackageId here and handle it after the modal is closed
         },
         openSetDefaultPackageModal(packageId: string) {
             state.targetPackageId = packageId;
@@ -89,6 +79,9 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         },
         closeSetDefaultPackageModal() {
             state.visibleSetDefaultPackageModal = false;
+            // do not reset targetPackageId here and handle it after the modal is closed
+        },
+        resetTargetPackageId() {
             state.targetPackageId = undefined;
         },
         // category
@@ -102,7 +95,7 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         },
         closeCategoryForm() {
             state.visibleCategoryForm = false;
-            state.targetCategoryId = undefined;
+            // do not reset targetCategoryId here and handle it after the modal is closed
         },
         openDeleteCategoryModal(categoryId: string) {
             state.targetCategoryId = categoryId;
@@ -110,12 +103,13 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         },
         closeDeleteCategoryModal() {
             state.visibleDeleteCategoryModal = false;
+            // do not reset targetCategoryId here and handle it after the modal is closed
+        },
+        resetTargetCategoryId() {
             state.targetCategoryId = undefined;
         },
     };
     return {
-        packageStore,
-        taskCategoryStore,
         state,
         getters,
         ...actions,
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-type-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-type-store.ts
deleted file mode 100644
index e961e337bc..0000000000
--- a/apps/web/src/services/ops-flow/stores/admin/task-type-store.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { asyncComputed } from '@vueuse/core';
-import type { Ref, UnwrapRef } from 'vue';
-import { reactive } from 'vue';
-
-import { defineStore } from 'pinia';
-
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
-
-import getRandomId from '@/lib/random-id-generator';
-
-interface UseTaskTypeStoreState {
-    items?: TaskTypeModel[];
-}
-
-interface UseTaskTypeStoreGetters {
-    taskTypes: Ref<Readonly<TaskTypeModel[]>>
-}
-
-export const useTaskTypeStore = defineStore('task-type', () => {
-    const state = reactive<UseTaskTypeStoreState>({
-        items: undefined,
-    }) as UseTaskTypeStoreState;
-
-    const getters = reactive<UseTaskTypeStoreGetters>({
-        taskTypes: asyncComputed<TaskTypeModel[]>(async () => {
-            if (!state.items) {
-                await actions.list();
-            }
-            return state.items ?? [];
-        }, [], { lazy: true }),
-    }) as UnwrapRef<UseTaskTypeStoreGetters>;
-
-    const actions = {
-        async list() {
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    state.items = [
-                        {
-                            task_type_id: 'task_type_1',
-                            name: 'Account',
-                            description: '계정과 관련된 문의사항',
-                            assignee_pool: ['wanjin@mz.co.kr'],
-                            fields: [
-                                {
-                                    field_id: getRandomId(),
-                                    name: '제목',
-                                    field_type: 'TEXT',
-                                    is_required: true,
-                                    is_primary: true,
-                                },
-                                {
-                                    field_id: getRandomId(),
-                                    name: '설명',
-                                    field_type: 'PARAGRAPH',
-                                    is_required: false,
-                                    is_primary: true,
-                                },
-                            ],
-                            category_id: 'category_1',
-                            tags: {},
-                            domain_id: '1',
-                            created_at: '2021-09-01T00:00:00',
-                            updated_at: '2021-09-01T00:00:00',
-                        },
-                        {
-                            task_type_id: 'task_type_2',
-                            name: 'Invoice',
-                            description: '청구서와 관련된 문의사항',
-                            assignee_pool: ['bokjang@mz.co.kr'],
-                            fields: [
-                                {
-                                    field_id: getRandomId(),
-                                    name: '제목',
-                                    field_type: 'TEXT',
-                                    is_required: true,
-                                    is_primary: true,
-                                },
-                                {
-                                    field_id: getRandomId(),
-                                    name: '설명',
-                                    field_type: 'PARAGRAPH',
-                                    is_required: true,
-                                    is_primary: true,
-                                },
-                                {
-                                    field_id: getRandomId(),
-                                    name: '서비스',
-                                    field_type: 'DROPDOWN',
-                                    options: ['서비스1', '서비스2', '서비스3'],
-                                    is_required: false,
-                                },
-                                {
-                                    field_id: getRandomId(),
-                                    name: '연결된 자산',
-                                    field_type: 'ASSET',
-                                    is_required: false,
-                                },
-                                {
-                                    field_id: getRandomId(),
-                                    name: '담당자',
-                                    field_type: 'USER',
-                                    is_required: false,
-                                },
-                            ],
-                            category_id: 'category_1',
-                            tags: {},
-                            domain_id: '1',
-                            created_at: '2021-09-01T00:00:00',
-                            updated_at: '2021-09-01T00:00:00',
-                        },
-                        {
-                            task_type_id: 'task_type_3',
-                            name: 'Billing',
-                            description: '빌링과 관련된 문의사항',
-                            fields: [
-                                {
-                                    field_id: getRandomId(),
-                                    name: '제목',
-                                    field_type: 'TEXT',
-                                    is_required: true,
-                                    is_primary: true,
-                                },
-                                {
-                                    field_id: getRandomId(),
-                                    name: '설명',
-                                    field_type: 'PARAGRAPH',
-                                    is_required: false,
-                                    is_primary: false,
-                                },
-                            ],
-                            category_id: 'category_2',
-                            tags: {},
-                            domain_id: '1',
-                            created_at: '2021-09-01T00:00:00',
-                            updated_at: '2021-09-01T00:00:00',
-                        },
-                    ];
-                    resolve(state.items);
-                }, 1000);
-            });
-        },
-    };
-    return {
-        state,
-        getters,
-        ...actions,
-    };
-});
diff --git a/apps/web/src/services/ops-flow/stores/board-page-store.ts b/apps/web/src/services/ops-flow/stores/board-page-store.ts
new file mode 100644
index 0000000000..35c3708ac7
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/board-page-store.ts
@@ -0,0 +1,32 @@
+import type { ComputedRef } from 'vue';
+import { reactive, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+
+interface UseBoardPageStoreGetters {
+    currentCategory: ComputedRef<TaskCategoryModel|undefined>;
+}
+export const useBoardPageStore = defineStore('board-page', () => {
+    const taskCategoryStore = useTaskCategoryStore();
+
+    const state = reactive({
+        currentCategoryId: '',
+    });
+    const getters: UseBoardPageStoreGetters = {
+        currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
+    };
+    const actions = {
+        setCurrentCategoryId(categoryId: string) {
+            state.currentCategoryId = categoryId;
+        },
+    };
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
new file mode 100644
index 0000000000..7e63de624e
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
@@ -0,0 +1,166 @@
+import { reactive, computed } from 'vue';
+
+import { isEmpty } from 'lodash';
+import { defineStore } from 'pinia';
+
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskStore } from '@/services/ops-flow/stores/task-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
+import {
+    useTaskFieldMetadataStore,
+} from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
+import type { DefaultTaskFieldId } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
+
+interface UseTaskCreatePageStoreState {
+    // base form
+    currentCategoryId?: string;
+    currentTaskTypeId?: string;
+    statusId?: string;
+    assignee?: string;
+    isBaseFormValid: boolean;
+    // default field form
+    defaultData: Partial<Record<DefaultTaskFieldId, any>>;
+    defaultDataValidationMap: Record<string, boolean>;
+    // task type field form
+    data: Record<string, any>;
+    dataValidationMap: Record<string, boolean>;
+    // overall
+    mode: 'create-minimal'|'create'|'edit'|'view'; // create-minimal: create task without status and assignee
+    hasUnsavedChanges: boolean;
+    createTaskLoading: boolean;
+}
+interface UseTaskCreatePageStoreGetters {
+    currentCategory: TaskCategoryModel|undefined;
+    currentTaskType: TaskTypeModel|undefined;
+    currentFields: TaskField[];
+    isDefaultFieldValid: boolean;
+    isFieldValid: boolean;
+    isAllValid: boolean;
+}
+export const useTaskContentFormStore = defineStore('task-content-form', () => {
+    const taskCategoryStore = useTaskCategoryStore();
+    const taskTypeStore = useTaskTypeStore();
+    const taskStore = useTaskStore();
+    const taskFieldMetadataStore = useTaskFieldMetadataStore();
+
+    const state = reactive<UseTaskCreatePageStoreState>({
+        // base form
+        currentCategoryId: undefined,
+        currentTaskTypeId: undefined,
+        statusId: undefined,
+        assignee: undefined,
+        isBaseFormValid: false,
+        // default field form
+        defaultData: {},
+        defaultDataValidationMap: {},
+        // task type field form
+        data: {},
+        dataValidationMap: {},
+        // overall
+        mode: 'create',
+        hasUnsavedChanges: false,
+        createTaskLoading: false,
+    });
+    const getters = {
+        // base form
+        currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
+        currentTaskType: computed<TaskTypeModel|undefined>(() => {
+            if (!state.currentCategoryId || !state.currentTaskTypeId) return undefined;
+            if (!taskTypeStore.state.itemsByCategoryId[state.currentCategoryId]) {
+                taskTypeStore.listByCategoryId(state.currentCategoryId);
+            }
+            return taskTypeStore.state.itemsByCategoryId[state.currentCategoryId]?.find((t) => t.task_type_id === state.currentTaskTypeId);
+        }),
+        // task type field form
+        currentFields: computed<TaskField[]>(() => {
+            const taskType = getters.currentTaskType;
+            return taskType ? taskType.fields : [];
+        }),
+        isDefaultFieldValid: computed<boolean>(() => taskFieldMetadataStore.getters.defaultFields.every((field) => state.defaultDataValidationMap[field.field_id])),
+        isFieldValid: computed<boolean>(() => getters.currentFields?.every((field) => state.dataValidationMap[field.field_id]) ?? true),
+        // overall
+        isAllValid: computed<boolean>(() => state.isBaseFormValid && getters.isDefaultFieldValid && getters.isFieldValid),
+    } as unknown as UseTaskCreatePageStoreGetters; // HACK: to avoid type error
+    const actions = {
+        setCurrentCategoryId(categoryId?: string) {
+            if (state.currentCategoryId === categoryId) return;
+            state.currentCategoryId = categoryId;
+            state.currentTaskTypeId = undefined;
+        },
+        setCurrentTaskTypeId(taskTypeId?: string) {
+            if (state.currentTaskTypeId === taskTypeId) return;
+            state.currentTaskTypeId = taskTypeId;
+            state.data = {};
+            state.dataValidationMap = {};
+        },
+        setStatusId(statusId?: string) {
+            state.statusId = statusId;
+        },
+        setAssignee(assignee?: string) {
+            state.assignee = assignee;
+        },
+        setIsBaseFormValid(isValid: boolean) {
+            state.isBaseFormValid = isValid;
+        },
+        // default field form
+        setDefaultFieldData(fieldId: DefaultTaskFieldId, value: any) {
+            state.defaultData[fieldId] = value;
+            state.hasUnsavedChanges = true;
+        },
+        setDefaultFieldValidation(fieldId: DefaultTaskFieldId, isValid: boolean) {
+            state.defaultDataValidationMap = { ...state.defaultDataValidationMap, [fieldId]: isValid };
+        },
+        // task type field form
+        setFieldData(fieldId: string, value: any) {
+            state.data[fieldId] = value;
+            state.hasUnsavedChanges = true;
+        },
+        setFieldValidation(fieldId: string, isValid: boolean) {
+            state.dataValidationMap = { ...state.dataValidationMap, [fieldId]: isValid };
+        },
+        // overall
+        resetFieldsForm() {
+            state.defaultData = {};
+            state.defaultDataValidationMap = {};
+            state.data = {};
+            state.dataValidationMap = {};
+        },
+        setMode(mode: 'create-minimal'|'create'|'edit'|'view') {
+            state.mode = mode;
+        },
+        async createTask() {
+            try {
+                state.createTaskLoading = true;
+                await taskStore.create({
+                    task_type_id: state.currentTaskTypeId as string,
+                    name: state.defaultData.title,
+                    status_id: state.statusId as string,
+                    description: state.defaultData.description || undefined,
+                    assignee: state.assignee || undefined,
+                    data: isEmpty(state.data) ? undefined : state.data,
+                    project_id: state.defaultData.project?.[0],
+                });
+                showSuccessMessage('Task created successfully', '');
+                state.createTaskLoading = false;
+                return true;
+            } catch (e) {
+                ErrorHandler.handleRequestError(e, 'Failed to create task');
+                state.createTaskLoading = false;
+                return false;
+            }
+        },
+    };
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/task-store.ts b/apps/web/src/services/ops-flow/stores/task-store.ts
new file mode 100644
index 0000000000..ac21d812df
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-store.ts
@@ -0,0 +1,79 @@
+import { reactive, watch } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { TaskCreateParameters } from '@/schema/opsflow/task/api-verbs/create';
+import type { TaskDeleteParameters } from '@/schema/opsflow/task/api-verbs/delete';
+import type { TaskGetParameters } from '@/schema/opsflow/task/api-verbs/get';
+import type { TaskListParameters } from '@/schema/opsflow/task/api-verbs/list';
+import type { TaskUpdateParameters } from '@/schema/opsflow/task/api-verbs/update';
+import type { TaskModel } from '@/schema/opsflow/task/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+interface UseTaskTypeStoreState {
+    itemsByTaskId: Record<string, TaskModel|undefined>;
+}
+
+export const useTaskStore = defineStore('task', () => {
+    const state = reactive<UseTaskTypeStoreState>({
+        itemsByTaskId: {},
+    });
+
+    const fetchList = getCancellableFetcher<TaskListParameters, ListResponse<TaskModel>>(SpaceConnector.clientV2.opsflow.task.list);
+    const actions = {
+        /*
+         * @return {TaskModel[]|undefined} It returns undefined if the request is canceled.
+         */
+        async list(params: TaskListParameters = {}): Promise<TaskModel[]|undefined> {
+            const result = await fetchList(params);
+            if (result.status === 'succeed') {
+                return result.response.results ?? [];
+            }
+            return undefined;
+        },
+        async create(params: TaskCreateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.task.create<TaskCreateParameters, TaskModel>(params);
+            const taskId = response.task_type_id;
+            state.itemsByTaskId[taskId] = response;
+            return response;
+        },
+        async update(params: TaskUpdateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.task.update<TaskUpdateParameters, TaskModel>(params);
+            const taskId = response.task_type_id;
+            state.itemsByTaskId[taskId] = response;
+            return response;
+        },
+        async get(taskId: string) {
+            const response = await SpaceConnector.clientV2.opsflow.task.get<TaskGetParameters, TaskModel>({
+                task_id: taskId,
+            });
+            state.itemsByTaskId[taskId] = response;
+            return response;
+        },
+        async delete(taskId: string) {
+            await SpaceConnector.clientV2.opsflow.task.delete<TaskDeleteParameters, TaskModel>({
+                task_id: taskId,
+            });
+            delete state.itemsByTaskId[taskId];
+        },
+    };
+
+    const disposeSelf = () => {
+        const store = useTaskStore();
+        store.$reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch([() => appContextStore.getters.isAdminMode, () => appContextStore.getters.workspaceId], () => {
+        disposeSelf();
+    });
+    return {
+        state,
+        ...actions,
+    };
+});
diff --git a/apps/web/src/services/ops-flow/stores/task-type-store.ts b/apps/web/src/services/ops-flow/stores/task-type-store.ts
new file mode 100644
index 0000000000..bdb2c6f8e2
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/task-type-store.ts
@@ -0,0 +1,161 @@
+import { computed, reactive, watch } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { TaskTypeCreateParameters } from '@/schema/opsflow/task-type/api-verbs/create';
+import type { TaskTypeDeleteParameters } from '@/schema/opsflow/task-type/api-verbs/delete';
+import type { TaskTypeGetParameters } from '@/schema/opsflow/task-type/api-verbs/get';
+import type { TaskTypeListParameters } from '@/schema/opsflow/task-type/api-verbs/list';
+import type { TaskTypeUpdateParameters } from '@/schema/opsflow/task-type/api-verbs/update';
+import type { TaskTypeUpdateFieldsParameters } from '@/schema/opsflow/task-type/api-verbs/update-fields';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+interface UseTaskTypeStoreState {
+    loading: boolean;
+    itemsByCategoryId: Record<string, TaskTypeModel[]|undefined>;
+}
+
+export const useTaskTypeStore = defineStore('task-type', () => {
+    const state = reactive<UseTaskTypeStoreState>({
+        loading: false,
+        itemsByCategoryId: {},
+    });
+
+    const getters = {
+        loading: computed(() => state.loading),
+    };
+
+    const fetchList = getCancellableFetcher<TaskTypeListParameters, ListResponse<TaskTypeModel>>(SpaceConnector.clientV2.opsflow.taskType.list);
+    const actions = {
+        async listByCategoryIds(categoryIds: string[]): Promise<Record<string, TaskTypeModel[]>> {
+            const _categoryIds = categoryIds.filter((categoryId) => !state.itemsByCategoryId[categoryId]);
+            if (_categoryIds.length === 0) {
+                return state.itemsByCategoryId as Record<string, TaskTypeModel[]>;
+            }
+
+            try {
+                state.loading = true;
+                const result = await fetchList({ query: { filter: [{ k: 'category_id', v: _categoryIds, o: 'in' }] } });
+                if (result.status === 'succeed') {
+                    _categoryIds.forEach((categoryId) => {
+                        state.itemsByCategoryId[categoryId] ??= result.response.results?.filter((item) => item.category_id === categoryId) ?? [];
+                    });
+                    state.itemsByCategoryId = { ...state.itemsByCategoryId }; // trigger reactivity
+                    state.loading = false;
+                }
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loading = false;
+            }
+            return state.itemsByCategoryId as Record<string, TaskTypeModel[]>;
+        },
+        async listByCategoryId(categoryId: string, force?: boolean): Promise<TaskTypeModel[]|undefined> {
+            if (state.itemsByCategoryId[categoryId] && !force) {
+                return state.itemsByCategoryId[categoryId] as TaskTypeModel[];
+            }
+
+            try {
+                state.loading = true;
+                const result = await fetchList({ query: { filter: [{ k: 'category_id', v: categoryId, o: 'eq' }] } });
+                if (result.status === 'succeed') {
+                    state.itemsByCategoryId = { ...state.itemsByCategoryId, [categoryId]: result.response.results ?? [] };
+                    state.loading = false;
+                    return result.response.results ?? [];
+                }
+                return undefined;
+            } catch (e) {
+                ErrorHandler.handleError(e);
+                state.loading = false;
+                return state.itemsByCategoryId[categoryId];
+            }
+        },
+        async create(params: TaskTypeCreateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.create<TaskTypeCreateParameters, TaskTypeModel>(params);
+            const categoryId = response.category_id;
+            if (state.itemsByCategoryId[categoryId]) {
+                state.itemsByCategoryId = {
+                    ...state.itemsByCategoryId,
+                    [categoryId]: [...state.itemsByCategoryId[categoryId] as TaskTypeModel[], response],
+                };
+            } else {
+                state.itemsByCategoryId = {
+                    ...state.itemsByCategoryId,
+                    [categoryId]: [response],
+                };
+            }
+            return response;
+        },
+        async update(params: TaskTypeUpdateParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.update<TaskTypeUpdateParameters, TaskTypeModel>(params);
+            const categoryId = response.category_id;
+            const item = state.itemsByCategoryId[categoryId]?.find((c) => c.category_id === categoryId);
+            if (item) {
+                Object.assign(item, response);
+            }
+            return response;
+        },
+        async updateFields(params: TaskTypeUpdateFieldsParameters) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.updateFields<TaskTypeUpdateFieldsParameters, TaskTypeModel>(params);
+            const categoryId = response.category_id;
+            const item = state.itemsByCategoryId[categoryId]?.find((c) => c.category_id === categoryId);
+            if (item) {
+                Object.assign(item, response);
+            }
+            return response;
+        },
+        async get(taskTypeId: string) {
+            const response = await SpaceConnector.clientV2.opsflow.taskType.get<TaskTypeGetParameters, TaskTypeModel>({
+                task_type_id: taskTypeId,
+            });
+            const categoryId = response.category_id;
+            const item = state.itemsByCategoryId[categoryId]?.find((c) => c.category_id === categoryId);
+            if (item) {
+                Object.assign(item, response);
+            }
+            return response;
+        },
+        async delete(taskTypeId: string, categoryId?: string) {
+            await SpaceConnector.clientV2.opsflow.taskType.delete<TaskTypeDeleteParameters, TaskTypeModel>({
+                task_type_id: taskTypeId,
+            });
+            if (categoryId) {
+                state.itemsByCategoryId = {
+                    ...state.itemsByCategoryId,
+                    [categoryId]: state.itemsByCategoryId[categoryId]?.filter((item) => item.task_type_id !== taskTypeId),
+                };
+            } else {
+                const deleted = Object.values(state.itemsByCategoryId).find((items) => items?.find((item) => item.task_type_id === taskTypeId));
+                const _categoryId = deleted?.[0]?.category_id;
+                if (_categoryId) {
+                    state.itemsByCategoryId = {
+                        ...state.itemsByCategoryId,
+                        [_categoryId]: state.itemsByCategoryId[_categoryId]?.filter((item) => item.task_type_id !== taskTypeId),
+                    };
+                }
+            }
+        },
+    };
+
+    const disposeSelf = () => {
+        const store = useTaskTypeStore();
+        store.$reset();
+        store.$dispose();
+    };
+    const appContextStore = useAppContextStore();
+    watch([() => appContextStore.getters.isAdminMode, () => appContextStore.getters.workspaceId], () => {
+        disposeSelf();
+    });
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
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 438d1483b8..c945fe0f8b 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 } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldSelectionType, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
 
 import getRandomId from '@/lib/random-id-generator';
 
@@ -8,6 +8,19 @@ import type {
     TaskFieldTypeMetadata,
 } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
 
+const DEFAULT_SELECTION_TYPE_MAP: Record<TaskFieldType, TaskFieldSelectionType|undefined> = {
+    GLOBAL: undefined,
+    TEXT: undefined,
+    PARAGRAPH: undefined,
+    LABELS: 'MULTI',
+    DROPDOWN: 'MULTI',
+    DATE: undefined,
+    USER: 'MULTI',
+    ASSET: 'MULTI',
+    PROJECT: 'MULTI',
+    PROVIDER: 'MULTI',
+    SERVICE_ACCOUNT: 'MULTI',
+};
 export const useTaskFieldsConfiguration = () => {
     const validationMap = new Map<string, boolean>();
 
@@ -20,6 +33,7 @@ export const useTaskFieldsConfiguration = () => {
 
     return {
         taskFieldsValidator,
+        fields,
         setFields,
         addField(field: TaskFieldTypeMetadata) {
             const fieldId = getRandomId();
@@ -29,10 +43,10 @@ export const useTaskFieldsConfiguration = () => {
                 field_type: field.type,
                 name: field.name,
                 is_required: false,
+                selection_type: DEFAULT_SELECTION_TYPE_MAP[field.type],
                 is_primary: false,
-                is_folded: false,
                 options: {},
-            }]);
+            } as TaskField]);
         },
         removeField(fieldId: string) {
             validationMap.delete(fieldId);
@@ -43,12 +57,12 @@ export const useTaskFieldsConfiguration = () => {
             // manually trigger validation to update invalid state
             validateFields();
         },
-        setInitialFields(initialFields: TaskField[]) {
+        setInitialFields(initialFields?: TaskField[]) {
             validationMap.clear();
-            initialFields.forEach((field) => {
+            initialFields?.forEach((field) => {
                 validationMap.set(field.field_id, true);
             });
-            setFields(initialFields);
+            setFields(initialFields ?? []);
         },
     };
 };
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts b/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts
index 9e4adecf9a..2467c92892 100644
--- a/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/constants/default-field-constant.ts
@@ -1,4 +1,5 @@
 export const DEFAULT_FIELD_ID_MAP = {
     title: 'title',
-    content: 'content',
-};
+    description: 'description',
+    project: 'project',
+} as const;
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 a4b94dc5bb..6fe1bf79e7 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
@@ -1,4 +1,4 @@
-import { computed, reactive } from 'vue';
+import { computed } from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -9,7 +9,7 @@ import type { TaskFieldTypeMetadata } from '@/services/ops-flow/task-fields-conf
 
 export const useTaskFieldMetadataStore = defineStore('task-field-metadata', () => {
     // TODO: i18n
-    const getters = reactive({
+    const getters = {
         taskFieldTypeMetadataMap: computed<Record<TaskFieldType, TaskFieldTypeMetadata>>(() => ({
             GLOBAL: { type: 'GLOBAL', name: 'Global', icon: 'ic_global' }, // not used yet
             TEXT: { type: 'TEXT', name: 'Short Text', icon: 'ic_short-text' },
@@ -20,6 +20,8 @@ export const useTaskFieldMetadataStore = defineStore('task-field-metadata', () =
             USER: { type: 'USER', name: 'User', icon: 'ic_member' },
             ASSET: { type: 'ASSET', name: 'Asset', icon: 'ic_service_asset-inventory' },
             PROJECT: { type: 'PROJECT', name: 'Project', icon: 'ic_service_project' },
+            PROVIDER: { type: 'PROVIDER', name: 'Provider', icon: 'ic_service_provider' }, // not used yet
+            SERVICE_ACCOUNT: { type: 'SERVICE_ACCOUNT', name: 'Service Account', icon: 'ic_service_service-account' }, // not used yet
         })),
         taskFieldTypeMetadataList: computed<TaskFieldTypeMetadata[]>(() => [
             getters.taskFieldTypeMetadataMap.TEXT,
@@ -38,16 +40,29 @@ export const useTaskFieldMetadataStore = defineStore('task-field-metadata', () =
                 field_type: 'TEXT',
                 is_required: true,
                 is_primary: true,
+                options: {
+                    example: 'Task Title',
+                },
             },
             {
-                field_id: DEFAULT_FIELD_ID_MAP.content,
-                name: 'Content', // TODO: i18n
-                field_type: 'PARAGRAPH',
+                field_id: DEFAULT_FIELD_ID_MAP.project,
+                name: 'Project', // TODO: i18n
+                field_type: 'PROJECT',
                 is_required: true,
                 is_primary: true,
             },
+            {
+                field_id: DEFAULT_FIELD_ID_MAP.description,
+                name: 'Description', // TODO: i18n
+                field_type: 'PARAGRAPH',
+                is_required: false,
+                is_primary: true,
+                options: {
+                    example: 'Task Description',
+                },
+            },
         ]),
-    });
+    };
 
     return {
         getters,
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 b57e6f30de..a2d5f4583c 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,7 +1,11 @@
 import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
 
+import type { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
+
 export interface TaskFieldTypeMetadata {
     type: TaskFieldType;
     name: string;
     icon: string;
 }
+
+export type DefaultTaskFieldId = typeof DEFAULT_FIELD_ID_MAP[keyof typeof DEFAULT_FIELD_ID_MAP];
diff --git a/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
new file mode 100644
index 0000000000..4866819351
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+    defineAsyncComponent, onUnmounted,
+} from 'vue';
+
+import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
+import {
+    useTaskFieldMetadataStore,
+} from '@/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store';
+
+const COMPONENT_MAP: Partial<Record<TaskFieldType, ReturnType<typeof defineAsyncComponent>>> = {
+    TEXT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue')),
+    PARAGRAPH: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue')),
+    LABELS: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue')),
+    DROPDOWN: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue')),
+    DATE: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue')),
+    USER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue')),
+    PROJECT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue')),
+    // ASSET: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue')),
+    // PROVIDER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue')),
+    // SERVICE_ACCOUNT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue')),
+};
+const UnknownTaskField = defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue'));
+
+const taskContentFormStore = useTaskContentFormStore();
+const taskContentFormState = taskContentFormStore.state;
+const taskContentFormGetters = taskContentFormStore.getters;
+const taskFieldMetadataStore = useTaskFieldMetadataStore();
+
+onUnmounted(() => {
+    taskContentFormStore.resetFieldsForm();
+});
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <!-- Default Fields -->
+        <component :is="COMPONENT_MAP[field.field_type] ?? UnknownTaskField"
+                   v-for="field in taskFieldMetadataStore.getters.defaultFields"
+                   :key="field.field_id"
+                   :field="field"
+                   :value="taskContentFormState.defaultData[field.field_id]"
+                   @update:value="taskContentFormStore.setDefaultFieldData(field.field_id, $event)"
+                   @update:is-valid="taskContentFormStore.setDefaultFieldValidation(field.field_id, $event)"
+        />
+        <!-- Dynamic Fields -->
+        <component :is="COMPONENT_MAP[field.field_type] ?? UnknownTaskField"
+                   v-for="field in taskContentFormGetters.currentFields"
+                   :key="field.field_id"
+                   :field="field"
+                   :value="taskContentFormState.data[field.field_id]"
+                   @update:value="taskContentFormStore.setFieldData(field.field_id, $event)"
+                   @update:is-valid="taskContentFormStore.setFieldValidation(field.field_id, $event)"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts b/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts
new file mode 100644
index 0000000000..a4bf477398
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts
@@ -0,0 +1,98 @@
+import type { Ref, UnwrapRef } from 'vue';
+import { watch } from 'vue';
+
+import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { ValidatorFn } from '@/common/composables/form-validator';
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+type NotRef<T> = T extends Ref<any> ? never : T;
+const stringValidatorTypes: TaskFieldType[] = ['TEXT', 'PARAGRAPH', 'DATE'];
+const stringArrayValidatorTypes: TaskFieldType[] = ['LABELS', 'DROPDOWN', 'USER', 'PROJECT']; // , 'PROVIDER', 'SERVICE_ACCOUNT', 'ASSET'];
+export const useTaskFieldValidation = <TField extends TaskField, TValue>(
+    props: TaskFieldFormProps<TField, NotRef<TValue>>,
+    emit: TaskFieldFormEmits<TValue>,
+) => {
+    const stringValidator: ValidatorFn<TValue> = (val): string|boolean => {
+        if (val === undefined || val === null) {
+            if (props.field.is_required) {
+                return 'This field is required';
+            }
+            return true;
+        }
+        if (typeof val !== 'string') {
+            return 'Value must be a string';
+        }
+        if (props.field.is_required && val.trim() === '') {
+            return 'This field is required';
+        }
+        return true;
+    };
+
+    const stringArrayValidator: ValidatorFn<TValue> = (val): string|boolean => {
+        if (val === undefined || val === null) {
+            if (props.field.is_required) {
+                return 'This field is required';
+            }
+            return true;
+        }
+        if (!Array.isArray(val)) {
+            return 'Value must be an array';
+        }
+        // SINGLE case
+        if (!props.field.selection_type || props.field.selection_type === 'SINGLE') {
+            if (val.length > 1) {
+                return 'Only one value is allowed';
+            }
+            if (props.field.is_required && val.length === 0) {
+                return 'This field is required';
+            }
+            return true;
+        }
+        // MULTI case
+        if (props.field.is_required && val.length === 0) {
+            return 'This field is required';
+        }
+        return true;
+    };
+
+
+    const {
+        value: fieldValue,
+        setValue: setFieldValue,
+        invalidText, isInvalid, validationResult,
+    } = useFieldValidator<TValue>(props.value, (val) => {
+        if (stringValidatorTypes.includes(props.field.field_type)) {
+            return stringValidator(val);
+        }
+        if (stringArrayValidatorTypes.includes(props.field.field_type)) {
+            return stringArrayValidator(val);
+        }
+        ErrorHandler.handleError(new Error(`Unsupported field type: ${props.field.field_type}`));
+        return 'Unsupported field type';
+    });
+
+    const updateFieldValue = (val: TValue) => {
+        setFieldValue(val as UnwrapRef<TValue>);
+        emit('update:value', val);
+    };
+
+    watch(validationResult, (val: boolean) => {
+        emit('update:is-valid', val);
+    }, { immediate: true });
+
+    return {
+        fieldValue,
+        setFieldValue,
+        invalidText,
+        isInvalid,
+        isValid: validationResult,
+        updateFieldValue,
+    };
+};
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
new file mode 100644
index 0000000000..aa59174b55
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>AssetFieldForm</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue
new file mode 100644
index 0000000000..ec8d78bf06
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    PFieldGroup, PDatetimePicker,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+
+const selectedDates = computed(() => (fieldValue.value ? [fieldValue.value] : []));
+const handleUpdate = (val: string[]) => {
+    updateFieldValue(val[0] ?? '');
+};
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <p-datetime-picker class="my-1"
+                           :selected-dates="selectedDates"
+                           :invalid="isInvalid"
+                           @update:selected-dates="handleUpdate"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue
new file mode 100644
index 0000000000..63d42faa96
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    PFieldGroup, PSelectDropdown, getTextHighlightRegex,
+} from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { DropdownTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<DropdownTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+
+interface DropdownItem extends SelectDropdownMenuItem {
+    label: string;
+}
+
+const allItems = computed<DropdownItem[]>(() => {
+    if (!props.field.options?.enums) return [];
+    return props.field.options.enums.map((item) => ({
+        name: item.key,
+        label: item.name,
+    }));
+});
+
+const selectedItems = computed<DropdownItem[]>(() => fieldValue.value.map((item) => ({
+    name: item,
+    label: allItems.value.find((i) => i.name === item)?.label ?? item,
+})));
+const dropdownItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+    const filteredItems = allItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label));
+    const _totalCount = pageStart - 1 + Number(pageLimit);
+    const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+    return {
+        results: _slicedResults,
+        more: _totalCount < filteredItems.length,
+    };
+};
+const handleUpdate = (val: DropdownItem[]) => {
+    updateFieldValue(val.map((item) => item.name));
+};
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <p-select-dropdown class="my-1"
+                           show-select-marker
+                           :selected="selectedItems"
+                           :handler="dropdownItemsHandler"
+                           is-filterable
+                           show-delete-all-button
+                           @update:selected="handleUpdate"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue
new file mode 100644
index 0000000000..ae9a98db73
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import LabelsInput from '@/common/components/inputs/LabelsInput.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <labels-input class="my-1"
+                      :labels="fieldValue"
+                      editable
+                      @update:value="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
new file mode 100644
index 0000000000..836c8041fb
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { ParagraphTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import TextEditor from '@/common/components/editor/TextEditor.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<ParagraphTaskField, string>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <text-editor class="my-1"
+                     :value="fieldValue"
+                     :placeholder="props.field.options?.example"
+                     :invalid="isInvalid"
+                     @update:value="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue
new file mode 100644
index 0000000000..74f4b06ed1
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <project-select-dropdown class="my-1"
+                                 project-selectable
+                                 :project-group-selectable="false"
+                                 :selected-project-ids="fieldValue"
+                                 @update:selected-project-ids="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue
new file mode 100644
index 0000000000..7b3f9f170f
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>ProviderFieldForm</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue
new file mode 100644
index 0000000000..636fc7d42b
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>ServiceAccountTaskFieldForm</div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue
new file mode 100644
index 0000000000..78185d5b95
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/TextTaskField.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+    PFieldGroup, PTextInput,
+} from '@cloudforet/mirinae';
+
+import type { TextTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type { TaskFieldFormEmits, TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<TextTaskField, string>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <p-text-input class="my-1"
+                      :value="fieldValue"
+                      :placeholder="props.field.options?.example"
+                      :invalid="isInvalid"
+                      block
+                      @update:value="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue
new file mode 100644
index 0000000000..06a394c0fe
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<TaskField, any>>();
+
+
+</script>
+
+<template>
+    <p-field-group :label="props.field.name"
+                   :required="props.field.is_required"
+                   :invalid="true"
+                   :invalid-text="`${props.field.field_type} is not supported`"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue
new file mode 100644
index 0000000000..42d4aeffc8
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type {
+    TaskFieldFormEmits,
+    TaskFieldFormProps,
+} from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
+
+const emit = defineEmits<TaskFieldFormEmits<string[]>>();
+
+const {
+    fieldValue, updateFieldValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation(props, emit);
+</script>
+
+<template>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+                   no-spacing
+    >
+        <user-select-dropdown class="my-1"
+                              :user-ids="fieldValue"
+                              selection-type="multiple"
+                              :invalid="isInvalid"
+                              @update:user-ids="updateFieldValue"
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
new file mode 100644
index 0000000000..56f6755319
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-form/types/task-field-form-type.ts
@@ -0,0 +1,10 @@
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+export interface TaskFieldFormProps<TField extends TaskField, TValue> {
+  field: TField;
+  value: TValue;
+}
+export interface TaskFieldFormEmits<TValue> {
+  (event: 'update:value', value: TValue): void;
+  (event: 'update:is-valid', value: boolean): void;
+}
diff --git a/apps/web/src/services/ops-flow/types/board-page-type.ts b/apps/web/src/services/ops-flow/types/board-page-type.ts
new file mode 100644
index 0000000000..8fe085e4a5
--- /dev/null
+++ b/apps/web/src/services/ops-flow/types/board-page-type.ts
@@ -0,0 +1,10 @@
+import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+
+import type { RouteQueryString } from '@/lib/router-query-string';
+
+export type BoardPageQuery = Partial<Record<'categoryId'|'filters', RouteQueryString>>;
+
+export interface BoardPageQueryValue {
+    categoryId?: string;
+    filters?: ConsoleFilter[];
+}
diff --git a/apps/web/src/services/ops-flow/types/task-create-page-type.ts b/apps/web/src/services/ops-flow/types/task-create-page-type.ts
new file mode 100644
index 0000000000..a8c111af24
--- /dev/null
+++ b/apps/web/src/services/ops-flow/types/task-create-page-type.ts
@@ -0,0 +1,7 @@
+import type { RouteQueryString } from '@/lib/router-query-string';
+
+export type TaskCreatePageQuery = Partial<Record<'categoryId', RouteQueryString>>;
+
+export interface TaskCreatePageQueryValue {
+    categoryId?: string;
+}
diff --git a/apps/web/src/store/reference/user-reference-store.ts b/apps/web/src/store/reference/user-reference-store.ts
index 39d5dfc88c..b8e4715402 100644
--- a/apps/web/src/store/reference/user-reference-store.ts
+++ b/apps/web/src/store/reference/user-reference-store.ts
@@ -70,6 +70,7 @@ export const useUserReferenceStore = defineStore('reference-user', () => {
     });
 
     const getters = reactive({
+        loading: computed<boolean>(() => state.items === null),
         userItems: asyncComputed<UserReferenceMap>(async () => {
             if (store.getters['user/getCurrentGrantInfo'].scope === 'USER') return {};
             if (state.items === null) await load();
diff --git a/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts b/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts
index 135f11ad3f..cdd4988612 100644
--- a/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts
+++ b/packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts
@@ -1,10 +1,10 @@
 import type { COLLAPSIBLE_LIST_THEME, COLLAPSIBLE_LIST_TOGGLE_POSITION } from '@/data-display/collapsible/collapsible-list/config';
 import type { COLLAPSIBLE_TOGGLE_TYPE } from '@/data-display/collapsible/collapsible-toggle/type';
 
-export interface CollapsibleItem {
+export interface CollapsibleItem<T = string> {
     name?: string;
     title?: string;
-    data: string;
+    data: T;
 }
 
 export interface CollapsibleListProps {