diff --git a/apps/web/src/common/components/buttons/ActionMenuButton.vue b/apps/web/src/common/components/buttons/ActionMenuButton.vue
index 5342cc512e..3934a82bad 100644
--- a/apps/web/src/common/components/buttons/ActionMenuButton.vue
+++ b/apps/web/src/common/components/buttons/ActionMenuButton.vue
@@ -5,8 +5,14 @@ import { ref, computed } from 'vue';
 import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+const props = withDefaults(defineProps<{
+    menu?: MenuItem[];
+}>(), {
+    menu: undefined,
+});
 const emit = defineEmits<{(event: 'edit'): void;
     (event: 'delete'): void;
+    (event: string): void; // for other menu names
 }>();
 
 const containerRef = ref<HTMLElement|null>(null);
@@ -21,7 +27,7 @@ useContextMenuStyle({
     position: 'right',
     menuWidth: '192px',
 });
-const menu = computed<MenuItem[]>(() => [
+const menu = computed<MenuItem[]>(() => props.menu ?? [
     { name: 'edit', icon: 'ic_edit', label: 'Edit' },
     { name: 'delete', icon: 'ic_delete', label: 'Delete' },
 ]);
@@ -34,11 +40,7 @@ const hideMenu = () => {
 onClickOutside(containerRef, hideMenu);
 
 const handleSelectMenu = (item: MenuItem) => {
-    if (item.name === 'edit') {
-        emit('edit');
-    } else if (item.name === 'delete') {
-        emit('delete');
-    }
+    emit(item.name);
     hideMenu();
 };
 </script>
diff --git a/apps/web/src/services/ops-flow/components/AssociatedCategories.vue b/apps/web/src/services/ops-flow/components/AssociatedCategories.vue
new file mode 100644
index 0000000000..df35d76713
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/AssociatedCategories.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PFieldTitle, PDataTable } from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+
+const fields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: 'Name',
+        width: '30%',
+    },
+    {
+        name: 'description',
+        label: 'Description',
+        width: '70%',
+    },
+]);
+</script>
+
+<template>
+    <div>
+        <p-field-title class="mb-2">
+            Category
+        </p-field-title>
+        <p-data-table :fields="fields"
+                      :items="taskManagementPageStore.getters.associatedCategoriesToPackage"
+        />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/AssociatedWorkspaces.vue b/apps/web/src/services/ops-flow/components/AssociatedWorkspaces.vue
new file mode 100644
index 0000000000..1a0ef700e4
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/AssociatedWorkspaces.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PFieldTitle, PDataTable } from '@cloudforet/mirinae';
+import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+
+const fields = computed<DataTableField[]>(() => [
+    {
+        name: 'name',
+        label: 'Name',
+        width: '30%',
+    },
+    {
+        name: 'description',
+        label: 'Description',
+        width: '70%',
+    },
+]);
+</script>
+
+<template>
+    <div>
+        <p-field-title class="mb-2">
+            Associated Workspaces
+        </p-field-title>
+        <p-data-table :fields="fields"
+                      :items="taskManagementPageStore.getters.associatedWorkspacesToPackage"
+        />
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue b/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
new file mode 100644
index 0000000000..34812232bc
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackageDeleteModal.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+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 { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const packageStore = taskManagementPageStore.packageStore;
+
+const deletable = computed(() => !taskManagementPageStore.getters.associatedCategoriesToPackage.length
+        && !taskManagementPageStore.getters.associatedWorkspacesToPackage.length);
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    loading.value = true;
+    try {
+        if (!taskManagementPageStore.state.targetPackageId) {
+            throw new Error('[Console Error] Cannot delete package without a target package');
+        }
+        await packageStore.delete(taskManagementPageStore.state.targetPackageId);
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to delete package');
+    } finally {
+        taskManagementPageStore.closeDeletePackageModal();
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskManagementPageStore.closeDeletePackageModal();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskManagementPageStore.state.visibleDeletePackageModal"
+                    theme-color="alert"
+                    :header-title="deletable ? 'Are you sure you want to delete this package?' : 'Delete Package'"
+                    :size="deletable ? 'sm' : 'md'"
+                    :loading="loading"
+                    :disabled="!deletable"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+    >
+        <template #body>
+            <p v-if="!deletable"
+               class="text-paragraph-lg font-bold mb-4"
+            >
+                To reassign them to a different package, update the associations before deleting.
+            </p>
+            <associated-categories v-if="!!taskManagementPageStore.getters.associatedCategoriesToPackage.length" />
+            <associated-workspaces v-if="!!taskManagementPageStore.getters.associatedWorkspacesToPackage.length" />
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/PackageForm.vue b/apps/web/src/services/ops-flow/components/PackageForm.vue
index 029bd6805d..2d7baf0123 100644
--- a/apps/web/src/services/ops-flow/components/PackageForm.vue
+++ b/apps/web/src/services/ops-flow/components/PackageForm.vue
@@ -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.getters.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.targetPackageId && p.name === value)) return 'Name already exists';
         return true;
     },
     description(value: string) {
@@ -87,10 +87,10 @@ const handleCancelOrClose = () => {
 const handleConfirm = async () => {
     if (!isAllValid.value) return;
     loading.value = true;
-    if (taskManagementPageState.editTargetPackageId) {
+    if (taskManagementPageState.targetPackageId) {
         try {
             const updatedPackage = await packageStore.update({
-                package_id: taskManagementPageState.editTargetPackageId,
+                package_id: taskManagementPageState.targetPackageId,
                 name: name.value,
                 description: description.value,
                 tags: {},
@@ -123,7 +123,7 @@ const handleConfirm = async () => {
     loading.value = false;
 };
 
-watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPageGetters.editTargetPackage], async ([visible, targetPackage], [prevVisible]) => {
+watch([() => taskManagementPageState.visiblePackageForm, () => taskManagementPageGetters.targetPackage], async ([visible, targetPackage], [prevVisible]) => {
     if (!visible) {
         if (!prevVisible) return; // prevent initial call
         await nextTick(); // wait for closing animation
diff --git a/apps/web/src/services/ops-flow/components/SupportPackagePanel.vue b/apps/web/src/services/ops-flow/components/PackagePanel.vue
similarity index 55%
rename from apps/web/src/services/ops-flow/components/SupportPackagePanel.vue
rename to apps/web/src/services/ops-flow/components/PackagePanel.vue
index d5a571a1da..eb98f92971 100644
--- a/apps/web/src/services/ops-flow/components/SupportPackagePanel.vue
+++ b/apps/web/src/services/ops-flow/components/PackagePanel.vue
@@ -2,10 +2,13 @@
 import { reactive, computed } from 'vue';
 
 import {
-    PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PIconButton,
+    PPaneLayout, PHeadingLayout, PHeading, PButton, PDataTable, PIconButton, PBadge,
 } from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
+import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
+
 import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
 
@@ -29,6 +32,11 @@ const state = reactive({
             label: ' ',
         },
     ]),
+    menu: computed<MenuItem[]>(() => [
+        { name: 'edit', icon: 'ic_edit', label: 'Edit' },
+        { name: 'set-as-default', icon: 'ic_check-circle', label: 'Set as Default' },
+        { name: 'delete', icon: 'ic_delete', label: 'Delete' },
+    ]),
 });
 </script>
 
@@ -41,7 +49,9 @@ const state = reactive({
                 />
             </template>
             <template #extra>
-                <p-icon-button name="ic_refresh" />
+                <p-icon-button name="ic_refresh"
+                               @click="packageStore.list()"
+                />
                 <p-button icon-left="ic_plus_bold"
                           size="md"
                           style-type="substitutive"
@@ -58,21 +68,27 @@ const state = reactive({
                       :items="packageStore.getters.packages"
                       :fields="state.packageFields"
         >
+            <template #col-name-format="{ item }">
+                <span class="inline-flex items-center gap-2">
+                    {{ item.name }}
+                    <p-badge v-if="item.is_default"
+                             badge-type="solid-outline"
+                             style-type="gray500"
+                    >
+                        Default
+                    </p-badge>
+                </span>
+            </template>
             <template #col-buttons-format="{ item }">
-                <p-button icon-left="ic_edit"
-                          size="sm"
-                          style-type="tertiary"
-                          @click="taskManagementPageStore.openEditPackageForm(item.package_id)"
-                >
-                    Edit
-                </p-button>
-                <p-button class="ml-2"
-                          icon-left="ic_delete"
-                          size="sm"
-                          style-type="tertiary"
-                >
-                    Delete
-                </p-button>
+                <div class="flex justify-end">
+                    <action-menu-button :menu="item.package_id === taskManagementPageStore.getters.defaultPackage?.package_id
+                                            ? undefined
+                                            : state.menu"
+                                        @edit="taskManagementPageStore.openEditPackageForm(item.package_id)"
+                                        @set-as-default="taskManagementPageStore.openSetDefaultPackageModal(item.package_id)"
+                                        @delete="taskManagementPageStore.openDeletePackageModal(item.package_id)"
+                    />
+                </div>
             </template>
         </p-data-table>
     </p-pane-layout>
diff --git a/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue b/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
new file mode 100644
index 0000000000..bde96a8ac5
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/PackageSetDefaultModal.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const packageStore = taskManagementPageStore.packageStore;
+const loading = ref<boolean>(false);
+const name = computed(() => taskManagementPageStore.getters.targetPackage?.name ?? '');
+const handleConfirm = async () => {
+    loading.value = true;
+    try {
+        if (!taskManagementPageStore.state.targetPackageId) {
+            throw new Error('[Console Error] Cannot set default package without a target package');
+        }
+        await packageStore.setDefaultPackage(taskManagementPageStore.state.targetPackageId);
+        taskManagementPageStore.closeSetDefaultPackageModal();
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to set default package');
+    } finally {
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskManagementPageStore.closeSetDefaultPackageModal();
+};
+</script>
+
+<template>
+    <p-button-modal :visible="taskManagementPageStore.state.visibleSetDefaultPackageModal"
+                    size="sm"
+                    :loading="loading"
+                    @confirm="handleConfirm"
+                    @close="handleCloseOrCancel"
+                    @cancel="handleCloseOrCancel"
+    >
+        <template #header-title>
+            Set <strong>{{ name }}</strong> as the default package.
+        </template>
+        <template #body>
+            This will make it the primary package for related operations.
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
new file mode 100644
index 0000000000..241e074e2d
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryDeleteModal.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
+
+const taskManagementPageStore = useTaskManagementPageStore();
+const taskCategoryStore = taskManagementPageStore.taskCategoryStore;
+
+const loading = ref<boolean>(false);
+const handleConfirm = async () => {
+    try {
+        loading.value = true;
+        if (!taskManagementPageStore.state.targetCategoryId) {
+            throw new Error('[Console Error] Cannot delete category without a target category');
+        }
+        await taskCategoryStore.delete(taskManagementPageStore.state.targetCategoryId);
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Failed to delete category');
+    } finally {
+        taskManagementPageStore.closeDeleteCategoryModal();
+        loading.value = false;
+    }
+};
+const handleCloseOrCancel = () => {
+    taskManagementPageStore.closeDeleteCategoryModal();
+};
+</script>
+
+<template>
+    <delete-modal :visible="taskManagementPageStore.state.visibleDeleteCategoryModal"
+                  header-title="Are you sure you want to delete this category?"
+                  size="sm"
+                  :loading="loading"
+                  @confirm="handleConfirm"
+                  @close="handleCloseOrCancel"
+                  @cancel="handleCloseOrCancel"
+    />
+</template>
diff --git a/apps/web/src/services/ops-flow/components/CategoryForm.vue b/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
similarity index 90%
rename from apps/web/src/services/ops-flow/components/CategoryForm.vue
rename to apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
index f0e71f5beb..0903620910 100644
--- a/apps/web/src/services/ops-flow/components/CategoryForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryForm.vue
@@ -31,7 +31,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 (taskCategoryStore.getters.taskCategories.some((p) => taskManagementPageState.editTargetCategoryId !== p.category_id && p.name === value)) return 'Name already exists';
+        if (taskCategoryStore.getters.taskCategories.some((p) => taskManagementPageState.targetCategoryId !== p.category_id && p.name === value)) return 'Name already exists';
         return true;
     },
 });
@@ -46,9 +46,9 @@ const handleConfirm = async () => {
 
     try {
         loading.value = true;
-        if (taskManagementPageState.editTargetCategoryId) {
+        if (taskManagementPageState.targetCategoryId) {
             await taskCategoryStore.update({
-                category_id: taskManagementPageState.editTargetCategoryId,
+                category_id: taskManagementPageState.targetCategoryId,
                 name: name.value,
                 description: description.value,
             });
@@ -70,8 +70,8 @@ const handleConfirm = async () => {
 };
 
 onBeforeMount(() => {
-    if (taskManagementPageState.editTargetCategoryId) {
-        const targetCategory = taskCategoryStore.getters.taskCategories.find((p) => p.category_id === taskManagementPageState.editTargetCategoryId);
+    if (taskManagementPageState.targetCategoryId) {
+        const targetCategory = taskCategoryStore.getters.taskCategories.find((p) => p.category_id === taskManagementPageState.targetCategoryId);
         if (targetCategory) {
             setForm('name', targetCategory.name);
             setForm('description', targetCategory.description);
@@ -79,7 +79,7 @@ onBeforeMount(() => {
     }
 });
 
-watch([() => taskManagementPageState.visibleCategoryForm, () => taskManagementPageGetters.editTargetCategory], async ([visible, targetCategory], [prevVisible]) => {
+watch([() => taskManagementPageState.visibleCategoryForm, () => taskManagementPageGetters.targetCategory], async ([visible, targetCategory], [prevVisible]) => {
     if (!visible) {
         if (!prevVisible) return; // prevent initial call
         await nextTick(); // wait for closing animation
diff --git a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
index e8277e87f4..b2c683e6aa 100644
--- a/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
+++ b/apps/web/src/services/ops-flow/components/TaskCategoryPanel.vue
@@ -8,6 +8,8 @@ import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables
 
 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 { useTaskManagementPageStore } from '@/services/ops-flow/stores/admin/task-management-page-store';
 
@@ -59,7 +61,9 @@ const state = reactive({
                 />
             </template>
             <template #extra>
-                <p-icon-button name="ic_refresh" />
+                <p-icon-button name="ic_refresh"
+                               @click="taskCategoryStore.list()"
+                />
                 <p-button icon-left="ic_plus_bold"
                           size="md"
                           style-type="substitutive"
@@ -95,20 +99,11 @@ const state = reactive({
                 </p-badge>
             </template>
             <template #col-buttons-format="{ item }">
-                <p-button icon-left="ic_edit"
-                          size="sm"
-                          style-type="tertiary"
-                          @click="taskManagementPageStore.openEditCategoryForm(item.category_id)"
-                >
-                    Edit
-                </p-button>
-                <p-button class="ml-2"
-                          icon-left="ic_delete"
-                          size="sm"
-                          style-type="tertiary"
-                >
-                    Delete
-                </p-button>
+                <div class="flex justify-end">
+                    <action-menu-button @edit="taskManagementPageStore.openEditCategoryForm(item.category_id)"
+                                        @delete="taskManagementPageStore.openDeleteCategoryModal(item.category_id)"
+                    />
+                </div>
             </template>
         </p-data-table>
     </p-pane-layout>
diff --git a/apps/web/src/services/ops-flow/components/TaskFieldsConfiguration.vue b/apps/web/src/services/ops-flow/components/TaskFieldsConfiguration.vue
new file mode 100644
index 0000000000..39a3ed37df
--- /dev/null
+++ b/apps/web/src/services/ops-flow/components/TaskFieldsConfiguration.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+import TaskFieldGenerator from '@/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue';
+</script>
+
+<template>
+    <div class="p-4 pl-2">
+        <task-field-generator />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
index 0192bd18dc..fbb8eb6d4a 100644
--- a/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskTypeForm.vue
@@ -1,27 +1,41 @@
 <script setup lang="ts">
 import {
-    ref, onBeforeMount, nextTick, watch,
+    ref, onBeforeMount, nextTick, watch, toRef,
 } 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 { useUserReferenceStore } from '@/store/reference/user-reference-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 
+import TaskFieldsConfiguration from '@/services/ops-flow/components/TaskFieldsConfiguration.vue';
+import { useAssigneePoolField } from '@/services/ops-flow/composables/use-assignee-pool-field';
 import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store';
 
 
 const taskCategoryPageStore = useTaskCategoryPageStore();
 const taskCategoryPageState = taskCategoryPageStore.state;
 const taskCategoryPageGetters = taskCategoryPageStore.getters;
+const userReferenceStore = useUserReferenceStore();
+
 
+/* assignee pool */
+const {
+    selectedUserItems,
+    userMenuItemsHandler,
+    handleUpdateSelectedUserItems,
+    setInitialUsers,
+} = useAssigneePoolField({
+    userReferenceMap: toRef(userReferenceStore.getters, 'userItems'),
+});
 
 const {
-    forms: { name, assigneePool, description },
+    forms: { name, description },
     invalidState,
     invalidTexts,
     setForm, isAllValid,
@@ -29,7 +43,6 @@ const {
     resetValidations,
 } = useFormValidator({
     name: '',
-    assigneePool: [] as SelectDropdownMenuItem,
     description: '',
 }, {
     name(value: string) {
@@ -71,8 +84,8 @@ onBeforeMount(() => {
     if (taskCategoryPageGetters.targetTaskType) {
         const taskType = taskCategoryPageGetters.targetTaskType;
         setForm('name', taskType.name);
-        setForm('assigneePool', taskType.assignee_pool);
         setForm('description', taskType.description);
+        setInitialUsers(taskType.assignee_pool);
     }
 });
 
@@ -82,16 +95,17 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
         await nextTick(); // wait for closing animation
         setForm({
             name: '',
-            assigneePool: [],
             description: '',
         });
+        setInitialUsers([]);
         resetValidations();
         return;
     }
     if (target) {
         setForm('name', target.name);
-        setForm('assigneePool', target.assignee_pool);
         setForm('description', target.description);
+        setInitialUsers(target.assignee_pool);
+        resetValidations();
     }
 });
 
@@ -122,9 +136,14 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                                :invalid-text="invalidTexts.assigneePool"
                 >
                     <template #default="{ invalid }">
-                        <p-select-dropdown :selected="assigneePool"
+                        <p-select-dropdown show-select-marker
                                            :invalid="invalid"
-                                           block
+                                           :selected="selectedUserItems"
+                                           :handler="userMenuItemsHandler"
+                                           is-filterable
+                                           use-fixed-menu-style
+                                           show-delete-all-button
+                                           @update:selected="handleUpdateSelectedUserItems"
                         />
                     </template>
                 </p-field-group>
@@ -134,6 +153,9 @@ watch([() => taskCategoryPageState.visibleTaskTypeForm, () => taskCategoryPageGe
                                 @update:value="setForm('description', $event)"
                     />
                 </p-field-group>
+                <p-field-group label="Fields Configuration">
+                    <task-fields-configuration />
+                </p-field-group>
             </div>
         </template>
         <template #footer>
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
new file mode 100644
index 0000000000..d53f543dca
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-assignee-pool-field.ts
@@ -0,0 +1,52 @@
+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/pages/admin/AdminTaskManagementPage.vue b/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
index 67ee420b92..e37c31a706 100644
--- a/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
+++ b/apps/web/src/services/ops-flow/pages/admin/AdminTaskManagementPage.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+
 import { PHeading } from '@cloudforet/mirinae';
 
-import CategoryForm from '@/services/ops-flow/components/CategoryForm.vue';
 import EnableLandingPanel from '@/services/ops-flow/components/EnableLandingPanel.vue';
-import PackageForm from '@/services/ops-flow/components/PackageForm.vue';
-import SupportPackagePanel from '@/services/ops-flow/components/SupportPackagePanel.vue';
+import PackagePanel from '@/services/ops-flow/components/PackagePanel.vue';
 import TaskCategoryPanel from '@/services/ops-flow/components/TaskCategoryPanel.vue';
 import TaskManagementTemplatePanel from '@/services/ops-flow/components/TaskManagementTemplatePanel.vue';
 
+const PackageForm = defineAsyncComponent(() => import('@/services/ops-flow/components/PackageForm.vue'));
+const PackageSetDefaultModal = defineAsyncComponent(() => import('@/services/ops-flow/components/PackageSetDefaultModal.vue'));
+const PackageDeleteModal = defineAsyncComponent(() => import('@/services/ops-flow/components/PackageDeleteModal.vue'));
+
+const TaskCategoryForm = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskCategoryForm.vue'));
+const TaskCategoryDeleteModal = defineAsyncComponent(() => import('@/services/ops-flow/components/TaskCategoryDeleteModal.vue'));
+
 </script>
 
 <template>
@@ -16,12 +23,18 @@ import TaskManagementTemplatePanel from '@/services/ops-flow/components/TaskMana
                    title="Task Management"
         />
         <task-management-template-panel class="mb-4" />
-        <support-package-panel class="mb-4" />
+        <package-panel class="mb-4" />
         <task-category-panel class="mb-4" />
         <enable-landing-panel />
-        <!-- Overlay Modals -->
+
+        <!-- package modals -->
         <package-form />
-        <category-form />
+        <package-set-default-modal />
+        <package-delete-modal />
+
+        <!-- category modals -->
+        <task-category-form />
+        <task-category-delete-modal />
     </div>
 </template>
 
diff --git a/apps/web/src/services/ops-flow/stores/admin/package-store.ts b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
index d288b03bb4..0ca2c1a6ab 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
@@ -116,6 +116,9 @@ export const usePackageStore = defineStore('package', () => {
         async setDefaultPackage(packageId: string) {
             return new Promise<PackageModel>((resolve, reject) => {
                 setTimeout(() => {
+                    const prevDefaultPackage = getters.packages.find((p) => p.is_default);
+                    if (prevDefaultPackage?.package_id === packageId) return;
+                    if (prevDefaultPackage) prevDefaultPackage.is_default = false;
                     const targetPackage = getters.packages.find((p) => p.package_id === packageId);
                     if (targetPackage) {
                         targetPackage.is_default = true;
@@ -126,6 +129,19 @@ export const usePackageStore = defineStore('package', () => {
                 }, 1000);
             });
         },
+        async delete(packageId: string) {
+            return new Promise<void>((resolve, reject) => {
+                setTimeout(() => {
+                    const index = state.items?.findIndex((p) => p.package_id === packageId);
+                    if (index !== undefined && index >= 0) {
+                        state.items?.splice(index, 1);
+                        resolve();
+                    } else {
+                        reject(new Error('Package not found'));
+                    }
+                }, 1000);
+            });
+        },
     };
     return {
         state,
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 c78eb8a174..c077209038 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
@@ -244,6 +244,19 @@ export const useTaskCategoryStore = defineStore('task-category', () => {
                 }, 1000);
             });
         },
+        async delete(categoryId: string) {
+            return new Promise<void>((resolve, reject) => {
+                setTimeout(() => {
+                    const targetCategoryIndex = state.items?.findIndex((category) => category.category_id === categoryId);
+                    if (targetCategoryIndex !== undefined && targetCategoryIndex >= 0) {
+                        state.items?.splice(targetCategoryIndex, 1);
+                        resolve();
+                    } else {
+                        reject(new Error('Category not found'));
+                    }
+                }, 1000);
+            });
+        },
     };
     return {
         state,
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 ea66b4069b..351b8f9393 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
@@ -6,6 +6,9 @@ import { defineStore } from 'pinia';
 import type { PackageModel } from '@/schema/identity/package/model';
 import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
 
+import type { WorkspaceItem } from '@/store/reference/workspace-reference-store';
+import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-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';
@@ -14,34 +17,50 @@ interface UseTaskManagementPageStoreState {
     currentTemplateId?: string;
     // support package
     visiblePackageForm: boolean;
-    editTargetPackageId?: string;
+    targetPackageId?: string;
+    visibleDeletePackageModal: boolean;
+    visibleSetDefaultPackageModal: boolean;
     // category
     visibleCategoryForm: boolean;
-    editTargetCategoryId?: string;
+    targetCategoryId?: string;
+    visibleDeleteCategoryModal: boolean;
 }
 
 interface UseTaskManagementPageStoreGetters {
-    editTargetPackage: ComputedRef<PackageModel|undefined>;
-    editTargetCategory: ComputedRef<DeepReadonly<TaskCategoryModel>|undefined>;
+    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>({
         currentTemplateId: 'support-center',
         // support package
         visiblePackageForm: false,
-        editTargetPackageId: undefined,
+        targetPackageId: undefined,
+        visibleDeletePackageModal: false,
+        visibleSetDefaultPackageModal: false,
         // category
         visibleCategoryForm: false,
-        editTargetCategoryId: undefined,
+        targetCategoryId: undefined,
+        visibleDeleteCategoryModal: false,
     });
     const getters = reactive<UseTaskManagementPageStoreGetters>({
-        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)),
+        targetPackage: computed<PackageModel|undefined>(() => packageStore.getters.packages.find((p) => p.package_id === state.targetPackageId)),
+        associatedCategoriesToPackage: computed<DeepReadonly<TaskCategoryModel[]>>(() => taskCategoryStore.getters.taskCategories.filter((c) => c.package_id === state.targetPackageId)),
+        associatedWorkspacesToPackage: computed<WorkspaceItem[]>(() => {
+            const targetPackageId = state.targetPackageId;
+            if (!targetPackageId) return [];
+            const workspaceItems: WorkspaceItem[] = Object.values(workspaceReferenceStore.getters.workspaceItems);
+            return workspaceItems.filter((w) => w.data.packages?.includes(targetPackageId));
+        }),
+        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 = {
@@ -50,29 +69,53 @@ export const useTaskManagementPageStore = defineStore('task-management-page', ()
         },
         // support package
         openAddPackageForm() {
-            state.editTargetPackageId = undefined;
+            state.targetPackageId = undefined;
             state.visiblePackageForm = true;
         },
         openEditPackageForm(packageId: string) {
-            state.editTargetPackageId = packageId;
+            state.targetPackageId = packageId;
             state.visiblePackageForm = true;
         },
         closePackageForm() {
             state.visiblePackageForm = false;
-            state.editTargetPackageId = undefined;
+            state.targetPackageId = undefined;
+        },
+        openDeletePackageModal(packageId: string) {
+            state.targetPackageId = packageId;
+            state.visibleDeletePackageModal = true;
+        },
+        closeDeletePackageModal() {
+            state.visibleDeletePackageModal = false;
+            state.targetPackageId = undefined;
+        },
+        openSetDefaultPackageModal(packageId: string) {
+            state.targetPackageId = packageId;
+            state.visibleSetDefaultPackageModal = true;
+        },
+        closeSetDefaultPackageModal() {
+            state.visibleSetDefaultPackageModal = false;
+            state.targetPackageId = undefined;
         },
         // category
         openAddCategoryForm() {
-            state.editTargetCategoryId = undefined;
+            state.targetCategoryId = undefined;
             state.visibleCategoryForm = true;
         },
         openEditCategoryForm(categoryId: string) {
-            state.editTargetCategoryId = categoryId;
+            state.targetCategoryId = categoryId;
             state.visibleCategoryForm = true;
         },
         closeCategoryForm() {
             state.visibleCategoryForm = false;
-            state.editTargetCategoryId = undefined;
+            state.targetCategoryId = undefined;
+        },
+        openDeleteCategoryModal(categoryId: string) {
+            state.targetCategoryId = categoryId;
+            state.visibleDeleteCategoryModal = true;
+        },
+        closeDeleteCategoryModal() {
+            state.visibleDeleteCategoryModal = false;
+            state.targetCategoryId = undefined;
         },
     };
     return {
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
new file mode 100644
index 0000000000..0e2ef90574
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from 'vue';
+
+import TaskFieldGeneratorDetails from '@/services/ops-flow/task-fields-configuration/TaskFieldGeneratorDetails.vue';
+import TaskFieldGeneratorHeader from '@/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue';
+
+const COMPONENT_MAP = {
+    dropdown: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/DropdownOptionsGenerator.vue')),
+    paragraph: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/ParagraphOptionsGenerator.vue')),
+};
+
+const type = ref('dropdown');
+</script>
+
+<template>
+    <div>
+        <task-field-generator-header />
+        <task-field-generator-details>
+            <template #options>
+                <component :is="COMPONENT_MAP[type]" />
+            </template>
+        </task-field-generator-details>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorDetails.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorDetails.vue
new file mode 100644
index 0000000000..d335fbf243
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorDetails.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import {
+    PFieldGroup, PTextInput, PToggleButton, PCheckbox,
+} from '@cloudforet/mirinae';
+
+const isPrimary = ref(false);
+</script>
+
+<template>
+    <div>
+        <div>
+            <p-field-group label="Field Name"
+                           required
+            >
+                <p-text-input />
+            </p-field-group>
+            <slot name="options" />
+            <p-field-group label="Show on Ticket Creation"
+                           required
+            >
+                <p>Display this field during task creation</p>
+                <p-toggle-button :value.sync="isPrimary"
+                                 show-state-text
+                                 position="left"
+                />
+            </p-field-group>
+        </div>
+        <div>
+            <p-checkbox>
+                This Field is Required
+            </p-checkbox>
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue
new file mode 100644
index 0000000000..496750730e
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGeneratorHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { PI, PBadge, PIconButton } from '@cloudforet/mirinae';
+</script>
+
+<template>
+    <div>
+        <p-i name="ic_chevron-right" />
+        <p-i name="ic_short=text" />
+        Title
+        <p-badge>Required</p-badge>
+        <p-icon-button shape="square"
+                       size="sm"
+                       style-type="transparent"
+                       icon="ic_delete"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/DropdownOptionsGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/DropdownOptionsGenerator.vue
new file mode 100644
index 0000000000..86a2579b3a
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/DropdownOptionsGenerator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { PFieldGroup, PButton } from '@cloudforet/mirinae';
+</script>
+
+<template>
+    <div>
+        <p-field-group label="Value"
+                       required
+        >
+            TBU
+        </p-field-group>
+        <p-button style-type="secondary"
+                  icon-left="ic_plus_bold"
+        >
+            Add Value
+        </p-button>
+    </div>
+</template>
+
diff --git a/apps/web/src/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/ParagraphOptionsGenerator.vue b/apps/web/src/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/ParagraphOptionsGenerator.vue
new file mode 100644
index 0000000000..1ad22f98d0
--- /dev/null
+++ b/apps/web/src/services/ops-flow/task-fields-configuration/task-field-options-generator/options-generators/ParagraphOptionsGenerator.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div>
+        TBU
+    </div>
+</template>
diff --git a/apps/web/src/store/reference/user-reference-store.ts b/apps/web/src/store/reference/user-reference-store.ts
index fd5f37a353..39d5dfc88c 100644
--- a/apps/web/src/store/reference/user-reference-store.ts
+++ b/apps/web/src/store/reference/user-reference-store.ts
@@ -30,7 +30,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 interface UserResourceItemData {
     roleInfo?: Partial<RoleModel>;
 }
-type UserReferenceItem = Required<Pick<ReferenceItem<UserResourceItemData>, 'key'|'label'|'name'|'data'>>;
+export type UserReferenceItem = Required<Pick<ReferenceItem<UserResourceItemData>, 'key'|'label'|'name'|'data'>>;
 export type UserReferenceMap = ReferenceMap<UserReferenceItem>;
 
 const LOAD_TTL = 1000 * 60 * 60 * 3; // 3 hours