diff --git a/apps/web/src/common/components/buttons/ActionMenuButton.vue b/apps/web/src/common/components/buttons/ActionMenuButton.vue
new file mode 100644
index 0000000000..5342cc512e
--- /dev/null
+++ b/apps/web/src/common/components/buttons/ActionMenuButton.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core';
+import { ref, computed } from 'vue';
+
+import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+const emit = defineEmits<{(event: 'edit'): void;
+    (event: 'delete'): void;
+}>();
+
+const containerRef = ref<HTMLElement|null>(null);
+const targetRef = ref<HTMLElement|null>(null);
+const menuRef = ref<any|null>(null);
+const visibleMenu = ref<boolean>(false);
+useContextMenuStyle({
+    targetRef,
+    menuRef,
+    visibleMenu,
+    useFixedMenuStyle: true,
+    position: 'right',
+    menuWidth: '192px',
+});
+const menu = computed<MenuItem[]>(() => [
+    { name: 'edit', icon: 'ic_edit', label: 'Edit' },
+    { name: 'delete', icon: 'ic_delete', label: 'Delete' },
+]);
+const toggleMenu = () => {
+    visibleMenu.value = !visibleMenu.value;
+};
+const hideMenu = () => {
+    visibleMenu.value = false;
+};
+onClickOutside(containerRef, hideMenu);
+
+const handleSelectMenu = (item: MenuItem) => {
+    if (item.name === 'edit') {
+        emit('edit');
+    } else if (item.name === 'delete') {
+        emit('delete');
+    }
+    hideMenu();
+};
+</script>
+
+<template>
+    <span ref="containerRef"
+          class="relative"
+    >
+        <p-icon-button ref="targetRef"
+                       name="ic_ellipsis-horizontal"
+                       @click="toggleMenu"
+        />
+        <p-context-menu v-show="visibleMenu"
+                        ref="menuRef"
+                        :menu="menu"
+                        :selected="[]"
+                        class="action-menu"
+                        @select="handleSelectMenu"
+        />
+    </span>
+</template>
+
+<style scoped lang="postcss">
+.action-menu {
+    @apply bg-white;
+    z-index: 1;
+}
+</style>
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 0f4c0b2ced..3416088623 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
@@ -6,7 +6,7 @@ export interface TaskCategoryUpdateParameters {
     category_id: string;
     name?: string;
     description?: string;
-    status_options: TaskStatusOptions;
+    status_options?: TaskStatusOptions;
     fields?: TaskField[];
     force?: boolean;
     tags?: Tags;
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
index 0643987823..964b11a175 100644
--- a/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
+++ b/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
@@ -5,6 +5,7 @@ export interface TaskTypeCreateParameters {
     name: string;
     description?: string;
     fields?: TaskField[];
+    assignee_pool?: string[];
     tags?: Tags;
     category_id: string;
 }
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts b/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
index 222322242b..73a4a8e376 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
@@ -6,6 +6,7 @@ export interface TaskTypeUpdateParameters {
     name?: string;
     description?: string;
     fields?: TaskField[];
+    assignee_pool?: string[];
     tags?: Tags;
     category_id?: string;
 }
diff --git a/apps/web/src/schema/opsflow/task-type/model.ts b/apps/web/src/schema/opsflow/task-type/model.ts
index 5bd439638a..537215f1ce 100644
--- a/apps/web/src/schema/opsflow/task-type/model.ts
+++ b/apps/web/src/schema/opsflow/task-type/model.ts
@@ -6,7 +6,7 @@ export interface TaskTypeModel {
     name: string;
     description: string;
     fields: TaskField[];
-    assignee?: string;
+    assignee_pool?: string[];
     tags: Tags;
     category_id: string;
     domain_id: string;
diff --git a/apps/web/src/services/ops-flow/components/CategoryForm.vue b/apps/web/src/services/ops-flow/components/CategoryForm.vue
index c25ac98108..f0e71f5beb 100644
--- a/apps/web/src/services/ops-flow/components/CategoryForm.vue
+++ b/apps/web/src/services/ops-flow/components/CategoryForm.vue
@@ -47,14 +47,14 @@ const handleConfirm = async () => {
     try {
         loading.value = true;
         if (taskManagementPageState.editTargetCategoryId) {
-            await taskCategoryStore.updateCategory({
+            await taskCategoryStore.update({
                 category_id: taskManagementPageState.editTargetCategoryId,
                 name: name.value,
                 description: description.value,
             });
         } else {
             if (!taskManagementPageGetters.defaultPackage) throw Error('Default package is not found');
-            await taskCategoryStore.createCategory({
+            await taskCategoryStore.create({
                 name: name.value,
                 description: description.value,
                 package_id: taskManagementPageGetters.defaultPackage.package_id,
diff --git a/apps/web/src/services/ops-flow/components/PackageForm.vue b/apps/web/src/services/ops-flow/components/PackageForm.vue
index 5efde013e0..029bd6805d 100644
--- a/apps/web/src/services/ops-flow/components/PackageForm.vue
+++ b/apps/web/src/services/ops-flow/components/PackageForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    onBeforeMount, toRef, ref, computed, watch, nextTick,
+    toRef, ref, computed, watch, nextTick,
 } from 'vue';
 
 import {
@@ -48,7 +48,7 @@ const {
     setInitialCategories,
     applyPackageToCategories,
 } = useCategoryField({
-    defaultPackage: computed<PackageModel|undefined>(() => packageStore.state.packages?.find((p) => p.is_default)),
+    defaultPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.is_default)),
     taskCategoryStore,
 });
 
@@ -70,7 +70,7 @@ const {
     name(value: string) {
         if (!value.trim().length) return 'Name is required';
         if (value.length > 50) return 'Name should be less than 50 characters';
-        if (packageStore.state.packages?.some((p) => p.package_id !== taskManagementPageState.editTargetPackageId && p.name === value)) return 'Name already exists';
+        if (packageStore.getters.packages.some((p) => p.package_id !== taskManagementPageState.editTargetPackageId && p.name === value)) return 'Name already exists';
         return true;
     },
     description(value: string) {
@@ -89,7 +89,7 @@ const handleConfirm = async () => {
     loading.value = true;
     if (taskManagementPageState.editTargetPackageId) {
         try {
-            const updatedPackage = await packageStore.updatePackage({
+            const updatedPackage = await packageStore.update({
                 package_id: taskManagementPageState.editTargetPackageId,
                 name: name.value,
                 description: description.value,
@@ -105,7 +105,7 @@ const handleConfirm = async () => {
         }
     } else {
         try {
-            const createdPackage = await packageStore.createPackage({
+            const createdPackage = await packageStore.create({
                 name: name.value,
                 description: description.value,
                 tags: {},
@@ -123,10 +123,6 @@ const handleConfirm = async () => {
     loading.value = false;
 };
 
-onBeforeMount(() => {
-    workspaceReferenceStore.load();
-});
-
 watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPageGetters.editTargetPackage], async ([visible, targetPackage], [prevVisible]) => {
     if (!visible) {
         if (!prevVisible) return; // prevent initial call
diff --git a/apps/web/src/services/ops-flow/components/SupportPackagePanel.vue b/apps/web/src/services/ops-flow/components/SupportPackagePanel.vue
index 9f1d573b44..d5a571a1da 100644
--- a/apps/web/src/services/ops-flow/components/SupportPackagePanel.vue
+++ b/apps/web/src/services/ops-flow/components/SupportPackagePanel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onBeforeMount, reactive, computed } from 'vue';
+import { reactive, computed } from 'vue';
 
 import {
     PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PIconButton,
 } from '@cloudforet/mirinae';
-import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
@@ -30,10 +30,6 @@ const state = reactive({
         },
     ]),
 });
-
-onBeforeMount(() => {
-    packageStore.fetchPackages();
-});
 </script>
 
 <template>
@@ -59,7 +55,7 @@ onBeforeMount(() => {
             계약에 따라 고객이 이용할 수 있는 기능의 묶음입니다. 전체 서비스의 범위를 나타내며, 하위 카테고를 생성할 수 있습니다.
         </p>
         <p-data-table :loading="packageStore.state.loading"
-                      :items="packageStore.state.packages"
+                      :items="packageStore.getters.packages"
                       :fields="state.packageFields"
         >
             <template #col-buttons-format="{ item }">
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
index cfbf5e1b2c..e8277e87f4 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { onBeforeMount, reactive, computed } from 'vue';
+import { reactive, computed } from 'vue';
 
 import {
-    PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PBadge, PIconButton,
+    PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PBadge, PIconButton, PLink,
 } from '@cloudforet/mirinae';
 import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
 
+import { makeAdminRouteName } from '@/router/helpers/route-helper';
+
+import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 
@@ -37,17 +40,14 @@ const state = reactive({
         },
     ]),
     packageMap: computed(() => {
-        if (!packageStore.state.packages) return {};
-        return packageStore.state.packages.reduce((acc, cur) => {
+        if (!packageStore.getters.packages) return {};
+        return packageStore.getters.packages.reduce((acc, cur) => {
             acc[cur.package_id] = cur;
             return acc;
         }, {} as Record<string, any>);
     }),
 });
 
-onBeforeMount(() => {
-    // taskCategoryStore.fetchCategories();
-});
 </script>
 
 <template>
@@ -76,6 +76,15 @@ onBeforeMount(() => {
                       :items="taskCategoryStore.getters.taskCategories"
                       :fields="state.categoryFields"
         >
+            <template #col-name-format="{ item }">
+                <p-link :text="item.name"
+                        :to="{
+                            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL._NAME),
+                            params: { taskCategoryId: item.category_id }
+                        }"
+                        highlight
+                />
+            </template>
             <template #col-package-format="{ item }">
                 <p-badge shape="square"
                          badge-type="subtle"
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
new file mode 100644
index 0000000000..298be3ce2b
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    loading.value = true;
+    // await taskCategoryPageStore.deleteStatus();
+    taskCategoryPageStore.closeDeleteStatusModal();
+    loading.value = false;
+};
+const handleCloseOrCancel = () => {
+    taskCategoryPageStore.closeDeleteStatusModal();
+};
+</script>
+
+<template>
+    <delete-modal :visible="taskCategoryPageStore.state.visibleStatusDeleteModal"
+                  header-title="Are you sure you want to delete this status?"
+                  size="sm"
+                  :loading="loading"
+                  @confirm="handleConfirm"
+                  @close="handleCloseOrCancel"
+                  @cancel="handleCloseOrCancel"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
new file mode 100644
index 0000000000..e999b926f8
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { PI, PBadge } from '@cloudforet/mirinae';
+
+import type { TaskStatusType } from '@/schema/opsflow/task/type';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+
+const props = defineProps<{
+    index: number;
+    id: string;
+    name: string;
+    color: string;
+    type: TaskStatusType;
+}>();
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+
+const handleEdit = () => {
+    taskCategoryPageStore.openEditStatusForm(props.index, props.type);
+};
+const handleDelete = () => {
+    taskCategoryPageStore.openDeleteStatusModal(props.index, props.type);
+};
+</script>
+
+<template>
+    <li class="task-status-draggable-item">
+        <p-i name="ic_drag-handle"
+             width="1rem"
+             height="1rem"
+             class="drag-handle"
+        />
+        <div class="flex-grow">
+            <p-badge class="ml-2"
+                     badge-type="subtle"
+                     shape="square"
+                     :style-type="props.color"
+            >
+                {{ props.name }}
+            </p-badge>
+        </div>
+        <action-menu-button @edit="handleEdit"
+                            @delete="handleDelete"
+        />
+    </li>
+</template>
+
+<style lang="postcss" scoped>
+.task-status-draggable-item {
+    @apply flex items-center px-2 border border-b-0 border-gray-150;
+    height: 2.625rem;
+    &:first-of-type {
+        @apply rounded-t-lg;
+    }
+    &:last-of-type {
+        @apply rounded-b-lg border-b;
+    }
+    &.ghost {
+        @apply rounded-lg border;
+    }
+    >.drag-handle {
+        cursor: grab;
+    }
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
new file mode 100644
index 0000000000..e3c6726d78
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {
+    ref, computed, onBeforeMount, nextTick, watch,
+} from 'vue';
+
+
+import {
+    POverlayLayout, PFieldGroup, PTextInput, PSelectDropdown, PButton, PI,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+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';
+
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageState = taskCategoryPageStore.state;
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+
+
+/* status type */
+const statusIdAndNames = computed<[id: string, name: string][]>(() => Object.values(taskCategoryPageStore.getters.statusOptions).flat().map((p) => [p.status_id, p.name]));
+const statusTypeItems = computed<SelectDropdownMenuItem[]>(() => [
+    { label: 'To-do', name: 'TODO' },
+    { label: 'In progress', name: 'IN_PROGRESS' },
+    { label: 'Completed', name: 'COMPLETED' },
+]);
+
+/* color chips */
+const TASK_STATUS_COLOR_NAMES = ['gray200', 'violet200', 'blue200', 'peacock200', 'green200', 'yellow200', 'coral200', 'red200'];
+const {
+    forms: { name, statusType, color },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+    resetValidations,
+} = useFormValidator({
+    name: '',
+    statusType: statusTypeItems.value[0] as SelectDropdownMenuItem,
+    color: '',
+}, {
+    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;
+        if (statusIdAndNames.value.some((p) => p[1] === value && p[0] !== statusId)) return 'Name already exists';
+        return true;
+    },
+});
+
+const loading = ref(false);
+const handleCancelOrClose = () => {
+    initForm();
+    taskCategoryPageStore.closeStatusForm();
+};
+
+const handleConfirm = async () => {
+    if (!isAllValid.value) return;
+    if (!taskCategoryPageState.currentCategoryId) return;
+    try {
+        loading.value = true;
+        if (taskCategoryPageGetters.targetStatusOption) {
+            // await taskCategoryStore.update({
+            //
+            // });
+        } else {
+            // await taskCategoryStore.create({
+            // });
+        }
+        taskCategoryPageStore.closeStatusForm();
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to save category');
+        // TODO: handle error
+    } finally {
+        loading.value = false;
+    }
+};
+
+onBeforeMount(() => {
+    if (taskCategoryPageGetters.targetStatusOption) {
+        const { type, data } = taskCategoryPageGetters.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]) => {
+    if (!visible) {
+        if (!prevVisible) return; // prevent initial call
+        await nextTick(); // wait for closing animation
+        setForm({
+            name: '',
+            statusType: statusTypeItems.value[0],
+            color: TASK_STATUS_COLOR_NAMES[0],
+        });
+        resetValidations();
+        return;
+    }
+    if (target) {
+        const { type, data } = target;
+        setForm('name', data.name);
+        setForm('statusType', statusTypeItems.value.find((p) => p.name === type) ?? statusTypeItems.value[0]);
+        setForm('color', data.color ?? TASK_STATUS_COLOR_NAMES[0]);
+    }
+});
+
+</script>
+
+<template>
+    <p-overlay-layout :title="taskCategoryPageGetters.targetStatusOption ? 'Edit Status' : 'Add Status'"
+                      :visible="taskCategoryPageState.visibleStatusForm"
+                      @close="handleCancelOrClose"
+    >
+        <template #default>
+            <div class="p-6 w-full">
+                <p-field-group label="Name"
+                               required
+                               :invalid="!loading && invalidState.name"
+                               :invalid-text="invalidTexts.name"
+                >
+                    <template #default="{ invalid }">
+                        <p-text-input :value="name"
+                                      :invalid="invalid"
+                                      block
+                                      @update:value="setForm('name', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group label="Status Type"
+                               required
+                               :invalid="!loading && invalidState.statusType"
+                               :invalid-text="invalidTexts.statusType"
+                >
+                    <template #default="{ invalid }">
+                        <p-select-dropdown :selected="[statusType]"
+                                           :menu="statusTypeItems"
+                                           :invalid="invalid"
+                                           block
+                                           @select="setForm('statusType', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group label="Color"
+                               required
+                               :invalid="invalidState.color"
+                               :invalid-text="invalidTexts.color"
+                >
+                    <div class="flex flex-wrap gap-1">
+                        <span v-for="colorName in TASK_STATUS_COLOR_NAMES"
+                              :key="colorName"
+                              :class="colorName"
+                              class="color-picker-chip"
+                              @click="setForm('color', colorName)"
+                        >
+                            <p-i v-if="color === colorName"
+                                 name="ic_check"
+                                 class="chip-check-mark"
+                                 height="1rem"
+                                 width="1rem"
+                                 color="inherit"
+                            />
+                        </span>
+                    </div>
+                </p-field-group>
+            </div>
+        </template>
+        <template #footer>
+            <div class="py-3 px-6 flex flex-wrap gap-1 justify-end">
+                <p-button style-type="transparent"
+                          :disabled="loading"
+                          @click="handleCancelOrClose"
+                >
+                    Cancel
+                </p-button>
+                <p-button style-type="primary"
+                          :loading="loading"
+                          :disabled="!isAllValid"
+                          @click="handleConfirm"
+                >
+                    Confirm
+                </p-button>
+            </div>
+        </template>
+    </p-overlay-layout>
+</template>
+
+<style scoped lang="postcss">
+@define-mixin color-chip-style $theme, $bg-color, $border-color, $text-color, $outline-color {
+    &.$(theme) {
+        background-color: $bg-color;
+        border-color: $border-color;
+        .chip-check-mark {
+            color: $text-color;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                outline-color: $outline-color;
+            }
+        }
+    }
+}
+.color-picker-chip {
+    @apply inline-flex items-center justify-center cursor-pointer rounded-full border;
+    height: 24px;
+    width: 24px;
+    .chip-check-mark {
+        border-radius: 100%;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            outline-width: 2px;
+            outline-style: solid;
+        }
+    }
+
+    @mixin color-chip-style gray200, theme('colors.gray.200'), theme('colors.gray.300'), theme('colors.gray.700'), theme('colors.gray.100');
+    @mixin color-chip-style violet200, theme('colors.violet.200'), theme('colors.violet.300'), theme('colors.violet.700'), theme('colors.violet.100');
+    @mixin color-chip-style blue200, theme('colors.blue.200'), theme('colors.blue.300'), theme('colors.blue.700'), theme('colors.blue.100');
+    @mixin color-chip-style peacock200, theme('colors.peacock.200'), theme('colors.peacock.300'), theme('colors.peacock.700'), theme('colors.peacock.100');
+    @mixin color-chip-style green200, theme('colors.green.200'), theme('colors.green.300'), theme('colors.green.700'), theme('colors.green.100');
+    @mixin color-chip-style yellow200, theme('colors.yellow.200'), theme('colors.yellow.300'), theme('colors.yellow.700'), theme('colors.yellow.100');
+    @mixin color-chip-style coral200, theme('colors.coral.200'), theme('colors.coral.300'), theme('colors.coral.700'), theme('colors.coral.100');
+    @mixin color-chip-style red200, theme('colors.red.200'), theme('colors.red.300'), theme('colors.red.700'), theme('colors.red.100');
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusList.vue b/apps/web/src/services/ops-flow/components/TaskStatusList.vue
new file mode 100644
index 0000000000..fa7da4b3df
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusList.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import draggable from 'vuedraggable';
+
+import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import TaskStatusDraggableItem from '@/services/ops-flow/components/TaskStatusDraggableItem.vue';
+import TaskStatusListFoldButton from '@/services/ops-flow/components/TaskStatusListFoldButton.vue';
+
+const props = defineProps<{
+    header: string;
+    type: TaskStatusType;
+    items: TaskStatusOption[];
+}>();
+const emit = defineEmits<{(event: 'update:items', value: TaskStatusOption[]): void;
+}>();
+
+const isFolded = ref(false);
+
+// `localItems` acts as a proxy for `props.items`, allowing temporary local updates
+// while waiting for asynchronous changes to reflect in the parent.
+const localItems = ref<TaskStatusOption[]>(props.items);
+// `draggableItems` syncs `localItems` with the parent via an `update:items` event,
+// ensuring local changes are reflected in both states.
+const draggableItems = computed<TaskStatusOption[]>({
+    get() {
+        return localItems.value;
+    },
+    set(value: TaskStatusOption[]) {
+        localItems.value = value;
+        emit('update:items', value);
+    },
+});
+
+watch(() => props.items, (newItems) => {
+    localItems.value = newItems;
+});
+
+</script>
+
+<template>
+    <div>
+        <div class="pt-2 pb-1">
+            <task-status-list-fold-button :is-folded.sync="isFolded">
+                {{ props.header }}
+            </task-status-list-fold-button>
+        </div>
+        <div v-show="!isFolded">
+            <draggable v-model="draggableItems"
+                       tag="ol"
+                       draggable=".task-status-draggable-item"
+                       ghost-class="ghost"
+                       handle=".drag-handle"
+            >
+                <task-status-draggable-item v-for="(item, index) in draggableItems"
+                                            :id="item.status_id"
+                                            :key="item.status_id"
+                                            :index="index"
+                                            :name="item.name"
+                                            :color="item.color"
+                                            :type="props.type"
+                />
+            </draggable>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusListFoldButton.vue b/apps/web/src/services/ops-flow/components/TaskStatusListFoldButton.vue
new file mode 100644
index 0000000000..c9a41c2818
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusListFoldButton.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { PI } from '@cloudforet/mirinae';
+
+const isFolded = ref(false);
+const emit = defineEmits<{(event: 'update:isFolded', value: boolean): void;
+}>();
+const handleClick = () => {
+    isFolded.value = !isFolded.value;
+    emit('update:isFolded', isFolded.value);
+};
+</script>
+
+<template>
+    <button class="inline-flex items-center rounded p-1 pr-3"
+            @click="handleClick"
+    >
+        <p-i :name="isFolded ? 'ic_chevron-right' : 'ic_chevron-down'"
+             height="1.25rem"
+             width="1.25rem"
+             class="flex-shrink-0"
+        />
+        <span class="flex-shrink-0 text-label-md">
+            <slot />
+        </span>
+    </button>
+</template>
+
+<style lang="postcss" scoped>
+button {
+    @media (hover: hover) {
+        &:hover {
+            @apply bg-gray-150;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusTree.vue b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
new file mode 100644
index 0000000000..7f17438002
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import TaskStatusList from '@/services/ops-flow/components/TaskStatusList.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+const taskCategoryStore = taskCategoryPageStore.taskCategoryStore;
+
+const taskStatusTree = computed<{
+    key: TaskStatusType,
+    name: string,
+}[]>(() => [
+    { key: 'TODO', name: 'To-do' },
+    { key: 'IN_PROGRESS', name: 'In progress' },
+    { 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,
+        },
+    });
+};
+</script>
+
+<template>
+    <div>
+        <template v-for="taskStatus in taskStatusTree">
+            <task-status-list :key="taskStatus.key"
+                              :type="taskStatus.key"
+                              :header="taskStatus.name"
+                              :items="taskCategoryPageGetters.statusOptions[taskStatus.key]"
+                              @update:items="handleUpdateItems(taskStatus.key, $event)"
+            />
+        </template>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
new file mode 100644
index 0000000000..0192bd18dc
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {
+    ref, onBeforeMount, nextTick, watch,
+} from 'vue';
+
+
+import {
+    POverlayLayout, PFieldGroup, PTextInput, PSelectDropdown, PButton, PTextarea,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+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';
+
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageState = taskCategoryPageStore.state;
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+
+
+const {
+    forms: { name, assigneePool, description },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+    resetValidations,
+} = useFormValidator({
+    name: '',
+    assigneePool: [] as SelectDropdownMenuItem,
+    description: '',
+}, {
+    name(value: string) {
+        if (!value.trim().length) return 'Name is required';
+        if (value.length > 50) return 'Name should be less than 50 characters';
+        return true;
+    },
+});
+
+const loading = ref(false);
+const handleCancelOrClose = () => {
+    initForm();
+    taskCategoryPageStore.closeTaskTypeForm();
+};
+
+const handleConfirm = async () => {
+    if (!isAllValid.value) return;
+    if (!taskCategoryPageState.currentCategoryId) return;
+    try {
+        loading.value = true;
+        if (taskCategoryPageGetters.targetTaskType) {
+            // await taskCategoryStore.update({
+            //
+            // });
+        } else {
+            // await taskCategoryStore.create({
+            // });
+        }
+        taskCategoryPageStore.closeStatusForm();
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to save task type');
+        // TODO: handle error
+    } finally {
+        loading.value = false;
+    }
+};
+
+onBeforeMount(() => {
+    if (taskCategoryPageGetters.targetTaskType) {
+        const taskType = taskCategoryPageGetters.targetTaskType;
+        setForm('name', taskType.name);
+        setForm('assigneePool', taskType.assignee_pool);
+        setForm('description', taskType.description);
+    }
+});
+
+watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGetters.targetTaskType], async ([visible, target], [prevVisible]) => {
+    if (!visible) {
+        if (!prevVisible) return; // prevent initial call
+        await nextTick(); // wait for closing animation
+        setForm({
+            name: '',
+            assigneePool: [],
+            description: '',
+        });
+        resetValidations();
+        return;
+    }
+    if (target) {
+        setForm('name', target.name);
+        setForm('assigneePool', target.assignee_pool);
+        setForm('description', target.description);
+    }
+});
+
+</script>
+
+<template>
+    <p-overlay-layout :title="taskCategoryPageGetters.targetTaskType ? 'Edit Ticket Topic' : 'Add Ticket Topic'"
+                      :visible="taskCategoryPageState.visibleTaskTypeForm"
+                      @close="handleCancelOrClose"
+    >
+        <template #default>
+            <div class="p-6 w-full">
+                <p-field-group label="Name"
+                               required
+                               :invalid="!loading && invalidState.name"
+                               :invalid-text="invalidTexts.name"
+                >
+                    <template #default="{ invalid }">
+                        <p-text-input :value="name"
+                                      :invalid="invalid"
+                                      block
+                                      @update:value="setForm('name', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group label="Assignee Pool"
+                               :invalid="!loading && invalidState.assigneePool"
+                               :invalid-text="invalidTexts.assigneePool"
+                >
+                    <template #default="{ invalid }">
+                        <p-select-dropdown :selected="assigneePool"
+                                           :invalid="invalid"
+                                           block
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group label="Description">
+                    <p-textarea :value="description"
+                                placeholder="Describe this ticket type in a few words."
+                                @update:value="setForm('description', $event)"
+                    />
+                </p-field-group>
+            </div>
+        </template>
+        <template #footer>
+            <div class="py-3 px-6 flex flex-wrap gap-1 justify-end">
+                <p-button style-type="transparent"
+                          :disabled="loading"
+                          @click="handleCancelOrClose"
+                >
+                    Cancel
+                </p-button>
+                <p-button style-type="primary"
+                          :loading="loading"
+                          :disabled="!isAllValid"
+                          @click="handleConfirm"
+                >
+                    Confirm
+                </p-button>
+            </div>
+        </template>
+    </p-overlay-layout>
+</template>
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 4722235ba5..f2da10791c 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
@@ -63,7 +63,7 @@ export const useCategoryField = ({
     const addPackageToCategories = async (packageId: string, categoryIds: string[]) => {
         try {
             await Promise.allSettled([
-                ...categoryIds.map((categoryId) => taskCategoryStore.updateCategory({
+                ...categoryIds.map((categoryId) => taskCategoryStore.update({
                     package_id: packageId,
                     category_id: categoryId,
                 })),
@@ -77,7 +77,7 @@ export const useCategoryField = ({
             if (!defaultPackage.value) throw new Error('Default package not found');
             const defaultPackageId = defaultPackage.value.package_id;
             await Promise.allSettled([
-                ...categoryIds.map((categoryId) => taskCategoryStore.updateCategory({
+                ...categoryIds.map((categoryId) => taskCategoryStore.update({
                     package_id: defaultPackageId,
                     category_id: categoryId,
                 })),
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 fab086bd99..bc72a30161 100644
--- a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue
@@ -1,7 +1,130 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
 <script setup lang="ts">
+/* eslint-disable import/first */
+// eslint-disable-next-line import/no-duplicates,import/order
+// eslint-disable-next-line import/no-duplicates
+import { computed, onBeforeMount } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import { PHeading, PTab, PSkeleton } from '@cloudforet/mirinae';
+import type { TabItem } from '@cloudforet/mirinae/types/hooks/use-tab/type';
+
+
+import { makeAdminRouteName } from '@/router/helpers/route-helper';
+
+import { useGoBack } from '@/common/composables/go-back';
+
+import TaskStatusDeleteModal from '@/services/ops-flow/components/TaskStatusDeleteModal.vue';
+import TaskStatusForm from '@/services/ops-flow/components/TaskStatusForm.vue';
+import 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';
+
+const props = defineProps<{
+    taskCategoryId: string;
+}>();
+const router = useRouter();
+const route = useRoute();
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+const taskCategoryPageGetters = taskCategoryPageStore.getters;
+const taskCategoryStore = taskCategoryPageStore.taskCategoryStore;
+
+
+/* header and back button */
+const loading = computed<boolean>(() => taskCategoryStore.state.loading);
+const headerTitle = computed<string>(() => taskCategoryPageGetters.currentCategory?.name ?? 'No Category');
+const {
+    setPathFrom,
+    handleClickBackButton,
+} = useGoBack({
+    name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT._NAME),
+});
+
+/* tabs */
+const tabs = computed<TabItem<object>[]>(() => [
+    {
+        name: 'status',
+        label: 'Status', // TODO: i18n
+        keepAlive: true,
+    },
+    {
+        name: 'taskType',
+        label: 'Ticket Topic', // TODO: i18n & template
+        keepAlive: true,
+    },
+]);
+const activeTab = computed(() => {
+    if (route.name === makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.TASK_TYPE._NAME)) return 'taskType';
+    return 'status';
+});
+const handleUpdateActiveTab = (tab: string) => {
+    if (tab === 'taskType') {
+        router.replace({
+            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.TASK_TYPE._NAME),
+            params: {
+                taskCategoryId: props.taskCategoryId,
+            },
+        });
+    } else {
+        router.replace({
+            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.STATUS._NAME),
+            params: {
+                taskCategoryId: props.taskCategoryId,
+            },
+        });
+    }
+};
+
+/* lifecycle */
+onBeforeMount(() => {
+    taskCategoryPageStore.setCurrentCategoryId(props.taskCategoryId);
+});
 
+/* expose */
+defineExpose({ setPathFrom });
 </script>
 
 <template>
-    <div>detail</div>
+    <div>
+        <p-heading class="mb-6"
+                   show-back-button
+                   @click-back-button="handleClickBackButton"
+        >
+            <p-skeleton v-if="loading"
+                        height="1.75rem"
+                        width="12rem"
+            />
+            <template v-else>
+                {{ headerTitle }}
+            </template>
+        </p-heading>
+        <p-tab :tabs="tabs"
+               :active-tab="activeTab"
+               @update:active-tab="handleUpdateActiveTab"
+        >
+            <router-view />
+        </p-tab>
+        <!-- modals -->
+        <task-status-form />
+        <task-status-delete-modal />
+        <task-type-form />
+    </div>
 </template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue
new file mode 100644
index 0000000000..89f9ea562e
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { PHeadingLayout, PHeading, PButton } from '@cloudforet/mirinae';
+
+import TaskStatusTree from '@/services/ops-flow/components/TaskStatusTree.vue';
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+</script>
+
+<template>
+    <div class="py-6 px-4">
+        <p-heading-layout>
+            <template #heading>
+                <p-heading heading-type="sub">
+                    Status
+                </p-heading>
+            </template>
+            <template #extra>
+                <p-button style-type="substitutive"
+                          icon-left="ic_plus_bold"
+                          @click="taskCategoryPageStore.openAddStatusForm()"
+                >
+                    Add Status
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <p class="mt-2 text-label-md text-gray-600">
+            티켓 상태를 보고 사용자 지정 티켓 상태를 만들어 워크플로우 배치를 향상시키고 고객과의 커뮤니케이션을 개선하세요.
+        </p>
+        <task-status-tree class="mt-4" />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
new file mode 100644
index 0000000000..148fe1aa23
--- /dev/null
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+    PHeadingLayout, PHeading, PButton, PIconButton, PDataTable,
+} from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
+import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
+
+const taskCategoryPageStore = useTaskCategoryPageStore();
+
+const taskTypeFields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: 'Name',
+        width: '20%',
+    },
+    {
+        name: 'description',
+        label: 'Description',
+        width: '70%',
+    },
+    {
+        name: 'buttons',
+        label: ' ',
+    },
+]);
+</script>
+
+<template>
+    <div class="py-6 px-4">
+        <p-heading-layout>
+            <template #heading>
+                <p-heading heading-type="sub">
+                    Ticket Topic
+                </p-heading>
+            </template>
+            <template #extra>
+                <p-icon-button name="ic_refresh" />
+                <p-button style-type="substitutive"
+                          icon-left="ic_plus_bold"
+                          @click="taskCategoryPageStore.openAddTaskTypeForm()"
+                >
+                    Add Ticket Topic
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <p class="mt-2 mb-6 text-label-md text-gray-600">
+            티켓 양식으로 티켓에 포함된 필드와 데이터를 결정합니다. 여러 티켓 양식을 만들 수 있습니다. <br>
+            예를 들어 서비스별로 서로 다른 양식을 만들 수 있습니다. 그런 경우에는 최종 사용자가 적절한 양식을 선택하여 요청을 제출합니다.
+        </p>
+        <p-data-table :loading="!taskCategoryPageStore.getters.taskTypes"
+                      :items="taskCategoryPageStore.getters.taskTypes"
+                      :fields="taskTypeFields"
+        >
+            <template #col-buttons-format="{ item }">
+                <div class="flex justify-end">
+                    <action-menu-button @edit="taskCategoryPageStore.openEditTaskTypeForm(item.task_type_id)"
+                                        @delete="taskCategoryPageStore.openDeleteTaskTypeModal(item.task_type_id)"
+                    />
+                </div>
+            </template>
+        </p-data-table>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
index 3f136ff5d5..67ee420b92 100644
--- a/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
@@ -7,10 +7,6 @@ import PackageForm from '@/services/ops-flow/components/PackageForm.vue';
 import SupportPackagePanel from '@/services/ops-flow/components/SupportPackagePanel.vue';
 import TaskCategoryPanel from '@/services/ops-flow/components/TaskCategoryPanel.vue';
 import TaskManagementTemplatePanel from '@/services/ops-flow/components/TaskManagementTemplatePanel.vue';
-import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
-
-const taskManagementPageStore = useTaskManagementPageStore();
-const taskManagementPageState = taskManagementPageStore.state;
 
 </script>
 
@@ -24,8 +20,8 @@ const taskManagementPageState = taskManagementPageStore.state;
         <task-category-panel class="mb-4" />
         <enable-landing-panel />
         <!-- Overlay Modals -->
-        <package-form :visible="taskManagementPageState.visiblePackageForm" />
-        <category-form :visible="taskManagementPageState.visibleCategoryForm" />
+        <package-form />
+        <category-form />
     </div>
 </template>
 
diff --git a/apps/web/src/services/ops-flow/routes/admin/routes.ts b/apps/web/src/services/ops-flow/routes/admin/routes.ts
index 6847c0c6b5..4d4393b38c 100644
--- a/apps/web/src/services/ops-flow/routes/admin/routes.ts
+++ b/apps/web/src/services/ops-flow/routes/admin/routes.ts
@@ -11,6 +11,8 @@ const OpsFlowContainer = () => import('@/services/ops-flow/OpsFlowContainer.vue'
 
 const AdminTaskManagementPage = () => import('@/services/ops-flow/pages/admin/AdminTaskManagementPage.vue');
 const AdminTaskCategoryDetailPage = () => import('@/services/ops-flow/pages/admin/AdminTaskCategoryDetailPage.vue');
+const AdminTaskCategoryDetailPageStatusTab = () => import('@/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageStatusTab.vue');
+const AdminTaskCategoryDetailPageTaskTypeTab = () => import('@/services/ops-flow/pages/admin/AdminTaskCategoryDetailPageTaskTypeTab.vue');
 const AdminWorkflowPage = () => import('@/services/ops-flow/pages/admin/AdminWorkflowPage.vue');
 
 const adminOpsFlowRoutes: RouteConfig = {
@@ -39,7 +41,23 @@ const adminOpsFlowRoutes: RouteConfig = {
                 {
                     path: 'task-category/:taskCategoryId',
                     name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL._NAME),
+                    props: true,
+                    redirect: { name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.STATUS._NAME) },
                     component: AdminTaskCategoryDetailPage as any,
+                    children: [
+                        {
+                            path: 'status',
+                            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.STATUS._NAME),
+                            props: true,
+                            component: AdminTaskCategoryDetailPageStatusTab as any,
+                        },
+                        {
+                            path: 'task-type',
+                            name: makeAdminRouteName(OPS_FLOW_ROUTE.TASK_MANAGEMENT.TASK_CATEGORY.DETAIL.TASK_TYPE._NAME),
+                            props: true,
+                            component: AdminTaskCategoryDetailPageTaskTypeTab as any,
+                        },
+                    ],
                 },
             ],
         },
diff --git a/apps/web/src/services/ops-flow/routes/route-constant.ts b/apps/web/src/services/ops-flow/routes/route-constant.ts
index c509582360..85ef4550a0 100644
--- a/apps/web/src/services/ops-flow/routes/route-constant.ts
+++ b/apps/web/src/services/ops-flow/routes/route-constant.ts
@@ -15,7 +15,11 @@ export const OPS_FLOW_ROUTE = Object.freeze({
     TASK_MANAGEMENT: {
         _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}`,
         TASK_CATEGORY: {
-            DETAIL: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail` },
+            DETAIL: {
+                _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail`,
+                STATUS: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail.status` },
+                TASK_TYPE: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.detail.task_type` },
+            },
             CREATE: { _NAME: `${MENU_ID.OPS_FLOW}.${MENU_ID.TASK_MANAGEMENT}.task_category.create` },
         },
     },
diff --git a/apps/web/src/services/ops-flow/stores/admin/package-store.ts b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
index ee64ec2ecb..d288b03bb4 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,3 +1,5 @@
+import { asyncComputed } from '@vueuse/core';
+import type { Ref, UnwrapRef } from 'vue';
 import { reactive } from 'vue';
 
 import { defineStore } from 'pinia';
@@ -9,15 +11,28 @@ import type { PackageModel } from '@/schema/identity/package/model';
 
 interface UsePackageStoreState {
     loading: boolean;
-    packages?: PackageModel[];
+    items?: PackageModel[];
+}
+interface UsePackageStoreGetters {
+    packages: Ref<Readonly<PackageModel[]>>
 }
 export const usePackageStore = defineStore('package', () => {
     const state = reactive<UsePackageStoreState>({
         loading: false,
-        packages: undefined,
+        items: undefined,
     });
+
+    const getters = reactive<UsePackageStoreGetters>({
+        packages: asyncComputed<PackageModel[]>(async () => {
+            if (state.items === undefined) {
+                await actions.list();
+            }
+            return state.items ?? [];
+        }, [], { lazy: true }),
+    }) as UnwrapRef<UsePackageStoreGetters>;
+
     const actions = {
-        async fetchPackages() {
+        async list() {
             return new Promise<PackageModel[]>((resolve) => {
                 state.loading = true;
                 setTimeout(() => {
@@ -56,17 +71,17 @@ export const usePackageStore = defineStore('package', () => {
                             updated_at: '2021-09-01T00:00:00',
                         },
                     ];
-                    state.packages = packages;
+                    state.items = packages;
                     state.loading = false;
                     resolve(packages);
                 }, 1000);
             });
         },
-        async createPackage(param: PackageCreateParameters) {
+        async create(param: PackageCreateParameters) {
             return new Promise<PackageModel>((resolve) => {
                 setTimeout(() => {
                     const result: PackageModel = {
-                        package_id: `package_${(state.packages?.length ?? 0) + 1}`,
+                        package_id: `package_${getters.packages.length + 1}`,
                         name: param.name,
                         description: param.description ?? '',
                         order: 4,
@@ -76,15 +91,16 @@ export const usePackageStore = defineStore('package', () => {
                         created_at: '2021-09-01T00:00:00',
                         updated_at: '2021-09-01T00:00:00',
                     };
-                    state.packages?.push(result);
+                    if (state.items) state.items.push(result);
+                    else state.items = [result];
                     resolve(result);
                 }, 1000);
             });
         },
-        async updatePackage(param: PackageUpdateParameters) {
+        async update(param: PackageUpdateParameters) {
             return new Promise<PackageModel>((resolve, reject) => {
                 setTimeout(() => {
-                    const targetPackage = state.packages?.find((p) => p.package_id === param.package_id);
+                    const targetPackage = getters.packages.find((p) => p.package_id === param.package_id);
                     if (targetPackage) {
                         targetPackage.name = param.name ?? targetPackage.name;
                         targetPackage.description = param.description ?? targetPackage.description;
@@ -100,7 +116,7 @@ export const usePackageStore = defineStore('package', () => {
         async setDefaultPackage(packageId: string) {
             return new Promise<PackageModel>((resolve, reject) => {
                 setTimeout(() => {
-                    const targetPackage = state.packages?.find((p) => p.package_id === packageId);
+                    const targetPackage = getters.packages.find((p) => p.package_id === packageId);
                     if (targetPackage) {
                         targetPackage.is_default = true;
                         resolve(targetPackage);
@@ -113,6 +129,7 @@ export const usePackageStore = defineStore('package', () => {
     };
     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
new file mode 100644
index 0000000000..f5cf4c33ad
--- /dev/null
+++ b/apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts
@@ -0,0 +1,154 @@
+import type { ComputedRef, UnwrapRef } from 'vue';
+import { reactive, computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+
+import { useTaskCategoryStore } from '@/services/ops-flow/stores/admin/task-category-store';
+import { useTaskTypeStore } from '@/services/ops-flow/stores/admin/task-type-store';
+
+interface UseTaskCategoryPageStoreState {
+    currentCategoryId?: string;
+    // status
+    visibleStatusForm: boolean;
+    targetStatus: {
+        type: TaskStatusType;
+        index: number;
+    }|undefined;
+    visibleStatusDeleteModal: boolean;
+    // task type
+    visibleTaskTypeForm: boolean;
+    targetTaskTypeId?: string;
+    visibleTaskTypeDeleteModal: boolean;
+}
+
+interface UseTaskCategoryPageStoreGetters {
+    currentCategory: ComputedRef<TaskCategoryModel|undefined>;
+    // status
+    statusOptions: ComputedRef<TaskStatusOptions>;
+    targetStatusOption: ComputedRef<{
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }|undefined>;
+    // task type
+    taskTypes: ComputedRef<TaskTypeModel[]|undefined>;
+    targetTaskType: ComputedRef<TaskTypeModel|undefined>;
+}
+
+export const useTaskCategoryPageStore = defineStore('task-management-category-page', () => {
+    const taskCategoryStore = useTaskCategoryStore();
+    const taskTypeStore = useTaskTypeStore();
+    const state = reactive<UseTaskCategoryPageStoreState>({
+        currentCategoryId: undefined,
+        // status
+        visibleStatusForm: false,
+        targetStatus: undefined,
+        visibleStatusDeleteModal: false,
+        // task type
+        visibleTaskTypeForm: false,
+        targetTaskTypeId: undefined,
+        visibleTaskTypeDeleteModal: false,
+    });
+
+    const getters = reactive<UseTaskCategoryPageStoreGetters>({
+        currentCategory: computed<TaskCategoryModel|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.currentCategoryId)),
+        // status
+        statusOptions: computed<TaskStatusOptions>(() => {
+            const category = getters.currentCategory;
+            if (!category) {
+                return {
+                    TODO: [],
+                    IN_PROGRESS: [],
+                    COMPLETED: [],
+                };
+            }
+            return category.status_options;
+        }),
+        targetStatusOption: computed<{
+            type: TaskStatusType;
+            data: TaskStatusOption;
+        }|undefined>(() => {
+            if (!state.targetStatus) return undefined;
+            const { index, type } = state.targetStatus;
+            const statusOptions = getters.statusOptions;
+            if (!statusOptions) return undefined;
+            return {
+                type,
+                data: statusOptions[type][index],
+            };
+        }),
+        // task type
+        taskTypes: computed<TaskTypeModel[]|undefined>(() => {
+            if (!state.currentCategoryId) return undefined;
+            const allTaskTypes = taskTypeStore.getters.taskTypes;
+            return allTaskTypes.filter((taskType) => taskType.category_id === state.currentCategoryId);
+        }),
+        targetTaskType: computed<TaskTypeModel|undefined>(() => {
+            if (!state.targetTaskTypeId) return undefined;
+            return taskTypeStore.getters.taskTypes.find((taskType) => taskType.task_type_id === state.targetTaskTypeId);
+        }),
+    }) as UnwrapRef<UseTaskCategoryPageStoreGetters>;
+
+    const actions = {
+        setCurrentCategoryId(categoryId: string) {
+            state.currentCategoryId = categoryId;
+        },
+        // status
+        openAddStatusForm() {
+            state.targetStatus = undefined;
+            state.visibleStatusForm = true;
+        },
+        openEditStatusForm(index: number, statusType: TaskStatusType) {
+            state.targetStatus = {
+                index,
+                type: statusType,
+            };
+            state.visibleStatusForm = true;
+        },
+        closeStatusForm() {
+            state.visibleStatusForm = false;
+            state.targetStatus = undefined;
+        },
+        openDeleteStatusModal(index: number, statusType: TaskStatusType) {
+            state.targetStatus = {
+                index,
+                type: statusType,
+            };
+            state.visibleStatusDeleteModal = true;
+        },
+        closeDeleteStatusModal() {
+            state.visibleStatusDeleteModal = false;
+            state.targetStatus = undefined;
+        },
+        // task type
+        openAddTaskTypeForm() {
+            state.targetTaskTypeId = undefined;
+            state.visibleTaskTypeForm = true;
+        },
+        openEditTaskTypeForm(taskTypeId: string) {
+            state.targetTaskTypeId = taskTypeId;
+            state.visibleTaskTypeForm = true;
+        },
+        closeTaskTypeForm() {
+            state.visibleTaskTypeForm = false;
+            state.targetTaskTypeId = undefined;
+        },
+        openDeleteTaskTypeModal(taskTypeId: string) {
+            state.targetTaskTypeId = taskTypeId;
+            state.visibleTaskTypeDeleteModal = true;
+        },
+        closeDeleteTaskTypeModal() {
+            state.visibleTaskTypeDeleteModal = false;
+            state.targetTaskTypeId = undefined;
+        },
+    };
+    return {
+        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 10f4ea14e0..c78eb8a174 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,5 +1,5 @@
 import { asyncComputed } from '@vueuse/core';
-import type { Ref, DeepReadonly } from 'vue';
+import type { Ref } from 'vue';
 import { reactive } from 'vue';
 
 import { defineStore } from 'pinia';
@@ -14,7 +14,7 @@ interface UseTaskCategoryStoreState {
     items?: TaskCategoryModel[];
 }
 interface UseTaskCategoryStoreGetters {
-    taskCategories: Ref<DeepReadonly<TaskCategoryModel[]>>
+    taskCategories: Ref<Readonly<TaskCategoryModel[]>>
 }
 
 export const useTaskCategoryStore = defineStore('task-category', () => {
@@ -26,14 +26,14 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
     const getters = reactive<UseTaskCategoryStoreGetters>({
         taskCategories: asyncComputed<TaskCategoryModel[]>(async () => {
             if (state.items === undefined) {
-                await actions.fetchCategories();
+                await actions.list();
             }
             return state.items ?? [];
         }, [], { lazy: true }),
     });
 
     const actions = {
-        async fetchCategories() {
+        async list() {
             return new Promise<void>((resolve) => {
                 state.loading = true;
                 setTimeout(() => {
@@ -48,7 +48,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'todo_1',
                                         name: '요청',
-                                        color: 'gray',
+                                        color: 'gray200',
                                         is_default: true,
                                     },
                                 ],
@@ -56,7 +56,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'in_progress_1',
                                         name: '진행중',
-                                        color: 'blue',
+                                        color: 'blue200',
                                         is_default: true,
                                     },
                                 ],
@@ -64,19 +64,19 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'complete_1',
                                         name: '완료',
-                                        color: 'green',
+                                        color: 'green200',
                                         is_default: true,
                                     },
                                     {
                                         status_id: 'complete_2',
                                         name: '보류',
-                                        color: 'yellow',
+                                        color: 'yellow200',
                                         is_default: false,
                                     },
                                     {
                                         status_id: 'complete_3',
                                         name: '취소',
-                                        color: 'red',
+                                        color: 'red100',
                                         is_default: false,
                                     },
                                 ],
@@ -97,7 +97,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'todo_1',
                                         name: '요청',
-                                        color: 'gray',
+                                        color: 'gray200',
                                         is_default: true,
                                     },
                                 ],
@@ -105,13 +105,13 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'in_progress_1',
                                         name: '확인중',
-                                        color: 'yellow',
+                                        color: 'yellow200',
                                         is_default: true,
                                     },
                                     {
                                         status_id: 'in_progress_2',
                                         name: '진행중',
-                                        color: 'blue',
+                                        color: 'blue200',
                                         is_default: false,
                                     },
                                 ],
@@ -119,7 +119,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'complete_1',
                                         name: '완료',
-                                        color: 'green',
+                                        color: 'green200',
                                         is_default: true,
                                     },
                                 ],
@@ -139,7 +139,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'todo_1',
                                         name: '요청',
-                                        color: 'gray',
+                                        color: 'gray200',
                                         is_default: true,
                                     },
                                 ],
@@ -147,7 +147,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'in_progress_1',
                                         name: '진행중',
-                                        color: 'blue',
+                                        color: 'blue200',
                                         is_default: false,
                                     },
                                 ],
@@ -155,7 +155,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                                     {
                                         status_id: 'complete_1',
                                         name: '완료',
-                                        color: 'green',
+                                        color: 'green200',
                                         is_default: true,
                                     },
                                 ],
@@ -172,7 +172,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                 }, 1000);
             });
         },
-        async createCategory(param: Omit<TaskCategoryCreateParameters, 'status_options'>) {
+        async create(param: Omit<TaskCategoryCreateParameters, 'status_options'>) {
             return new Promise<TaskCategoryModel>((resolve) => {
                 const result: TaskCategoryModel = {
                     category_id: `category_${(getters.taskCategories.length) + 1}`,
@@ -184,7 +184,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                             {
                                 status_id: 'todo_1',
                                 name: '요청',
-                                color: 'gray',
+                                color: 'gray200',
                                 is_default: true,
                             },
                         ],
@@ -192,7 +192,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                             {
                                 status_id: 'in_progress_1',
                                 name: '진행중',
-                                color: 'blue',
+                                color: 'blue200',
                                 is_default: true,
                             },
                         ],
@@ -200,7 +200,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                             {
                                 status_id: 'complete_1',
                                 name: '완료',
-                                color: 'green',
+                                color: 'green200',
                                 is_default: true,
                             },
                         ],
@@ -215,7 +215,7 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                 resolve(result);
             });
         },
-        async updateCategory(param: Omit<TaskCategoryUpdateParameters, 'status_options'>) {
+        async update(param: TaskCategoryUpdateParameters) {
             return new Promise<TaskCategoryModel>((resolve, reject) => {
                 setTimeout(() => {
                     const targetCategory = state.items?.find((category) => category.category_id === param.category_id);
@@ -224,6 +224,19 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                         if (param.description) targetCategory.description = param.description ?? '';
                         if (param.tags) targetCategory.tags = param.tags ?? {};
                         if (param.package_id) targetCategory.package_id = param.package_id;
+                        if (param.status_options) targetCategory.status_options = param.status_options;
+                        resolve(targetCategory);
+                    } else {
+                        reject(new Error('Category not found'));
+                    }
+                }, 1000);
+            });
+        },
+        async get(categoryId: string) {
+            return new Promise<TaskCategoryModel>((resolve, reject) => {
+                setTimeout(() => {
+                    const targetCategory = state.items?.find((category) => category.category_id === categoryId);
+                    if (targetCategory) {
                         resolve(targetCategory);
                     } else {
                         reject(new Error('Category not found'));
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 ab8f862f1d..ea66b4069b 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
@@ -40,9 +40,9 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         editTargetCategoryId: undefined,
     });
     const getters = reactive<UseTaskManagementPageStoreGetters>({
-        editTargetPackage: computed<PackageModel|undefined>(() => packageStore.state.packages?.find((p) => p.package_id === state.editTargetPackageId)),
+        editTargetPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.package_id === state.editTargetPackageId)),
         editTargetCategory: computed<DeepReadonly<TaskCategoryModel>|undefined>(() => taskCategoryStore.getters.taskCategories.find((c) => c.category_id === state.editTargetCategoryId)),
-        defaultPackage: computed<PackageModel|undefined>(() => packageStore.state.packages?.find((p) => p.is_default)),
+        defaultPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.is_default)),
     });
     const actions = {
         setCurrentTemplateId(templateId: string) {
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
index fe4bcaeaae..e961e337bc 100644
--- 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
@@ -1,3 +1,5 @@
+import { asyncComputed } from '@vueuse/core';
+import type { Ref, UnwrapRef } from 'vue';
 import { reactive } from 'vue';
 
 import { defineStore } from 'pinia';
@@ -7,116 +9,140 @@ import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
 import getRandomId from '@/lib/random-id-generator';
 
 interface UseTaskTypeStoreState {
-    taskTypes?: TaskTypeModel[];
+    items?: TaskTypeModel[];
+}
+
+interface UseTaskTypeStoreGetters {
+    taskTypes: Ref<Readonly<TaskTypeModel[]>>
 }
 
 export const useTaskTypeStore = defineStore('task-type', () => {
     const state = reactive<UseTaskTypeStoreState>({
-        taskTypes: [
-            {
-                task_type_id: 'task_type_1',
-                name: 'Account',
-                description: '계정과 관련된 문의사항',
-                assignee: '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: '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',
-            },
-        ],
+        items: undefined,
     }) as UseTaskTypeStoreState;
-    const actions = {};
+
+    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,
     };
 });