diff --git a/apps/web/src/common/components/schedule-setting-form/ScheduleSettingForm.vue b/apps/web/src/common/components/schedule-setting-form/ScheduleSettingForm.vue
index 28f96c6a55..ee3961cf0d 100644
--- a/apps/web/src/common/components/schedule-setting-form/ScheduleSettingForm.vue
+++ b/apps/web/src/common/components/schedule-setting-form/ScheduleSettingForm.vue
@@ -9,18 +9,25 @@ import {
     PFieldGroup, PRadioGroup, PRadio, PI, PSelectButton, PSelectDropdown,
 } from '@cloudforet/mirinae';
 
+import type { ServiceChannelScheduleType } from '@/schema/alert-manager/service-channel/type';
 import { i18n } from '@/translations';
 
 import type {
     ScheduleDayButtonType,
     ScheduleRadioType,
-    ScheduleType,
     ScheduleDayType,
     ScheduleForm,
 } from '@/common/components/schedule-setting-form/schedule-setting-form';
 
 import { blue } from '@/styles/colors';
 
+interface Props {
+    scheduleForm?: ScheduleForm;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    scheduleForm: undefined,
+});
 
 const emit = defineEmits<{(e: 'schedule-form', form: ScheduleForm): void; }>();
 
@@ -50,7 +57,7 @@ const generateHourlyTimeArray = () => range(0, 25).map((h) => ({
     name: h,
 }));
 
-const handleSelectScheduleType = (type: ScheduleType) => {
+const handleSelectScheduleType = (type: ServiceChannelScheduleType) => {
     if (type === 'WEEK_DAY') {
         state.selectedDayButton = state.days.slice(0, 5).map((day) => day.name);
     } else if (type === 'ALL_DAY') {
@@ -71,6 +78,14 @@ const handleSelectDropdown = (type: 'start' | 'end', value: number) => {
     }
 };
 
+watch(() => props.scheduleForm, (scheduleForm) => {
+    if (scheduleForm) {
+        state.selectedRadioIdx = state.scheduleTypeList.findIndex((item) => item.name === props.scheduleForm?.type);
+        state.selectedDayButton = props.scheduleForm?.days || [];
+        state.start = props.scheduleForm?.start || 9;
+        state.end = props.scheduleForm?.end || 18;
+    }
+}, { immediate: true });
 watch([() => state.selectedRadioIdx, () => state.selectedDayButton, () => state.start, () => state.end], ([selectedRadioIdx, selectedDayButton, start, end]) => {
     emit('schedule-form', {
         type: state.scheduleTypeList[selectedRadioIdx].name,
diff --git a/apps/web/src/common/components/schedule-setting-form/schedule-setting-form.ts b/apps/web/src/common/components/schedule-setting-form/schedule-setting-form.ts
index f462230330..85a541c2f7 100644
--- a/apps/web/src/common/components/schedule-setting-form/schedule-setting-form.ts
+++ b/apps/web/src/common/components/schedule-setting-form/schedule-setting-form.ts
@@ -1,10 +1,11 @@
 import type { TranslateResult } from 'vue-i18n';
 
-export type ScheduleType = 'ALL_DAY' | 'WEEK_DAY' | 'CUSTOM';
+import type { ServiceChannelScheduleType } from '@/schema/alert-manager/service-channel/type';
+
 export type ScheduleDayType = 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT' | 'SUN';
 
 export type ScheduleRadioType = {
-    name: ScheduleType;
+    name: ServiceChannelScheduleType;
     label: TranslateResult;
 };
 export type ScheduleDayButtonType = {
@@ -13,7 +14,7 @@ export type ScheduleDayButtonType = {
 };
 
 export type ScheduleForm = {
-    type: ScheduleType;
+    type: ServiceChannelScheduleType;
     days: ScheduleDayType[];
     start: number;
     end: number;
diff --git a/apps/web/src/services/alert-manager-v2/components/NotificationsCreateForm.vue b/apps/web/src/services/alert-manager-v2/components/NotificationsCreateForm.vue
index 1c03a23712..c772760758 100644
--- a/apps/web/src/services/alert-manager-v2/components/NotificationsCreateForm.vue
+++ b/apps/web/src/services/alert-manager-v2/components/NotificationsCreateForm.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
 
-import { zipObject } from 'lodash';
-
 import {
     PFieldGroup, PLazyImg, PTextInput, PRadioGroup, PRadio, PPaneLayout,
 } from '@cloudforet/mirinae';
 
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
-import type { ServiceChannelScheduleDayType } from '@/schema/alert-manager/service-channel/type';
 import { i18n } from '@/translations';
 
 import { assetUrlConverter } from '@/lib/helper/asset-helper';
 
-import type { ScheduleDayType, ScheduleForm } from '@/common/components/schedule-setting-form/schedule-setting-form';
+import type { ScheduleForm } from '@/common/components/schedule-setting-form/schedule-setting-form';
 import ScheduleSettingForm from '@/common/components/schedule-setting-form/ScheduleSettingForm.vue';
 import { useFormValidator } from '@/common/composables/form-validator';
 import type { SelectedUserDropdownIdsType } from '@/common/modules/user/typte';
 import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
 
+import { createScheduleMap } from '@/services/alert-manager-v2/composables/form-data';
 import { useServiceCreateFormStore } from '@/services/alert-manager-v2/stores/service-create-form-store';
 import type { CreatedNotificationInfoType, UserRadioType } from '@/services/alert-manager-v2/types/alert-manager-type';
 
@@ -59,14 +57,7 @@ const {
     invalidTexts,
 } = useFormValidator({
     name: '',
-}, {
-    name(value: string) {
-        if (value.length >= 40) {
-            return i18n.t('ALERT_MANAGER.WEBHOOK.VALIDATION_NAME_MAX');
-        }
-        return '';
-    },
-});
+}, {});
 
 const handleScheduleForm = (form: ScheduleForm) => {
     state.scheduleForm = form;
@@ -75,19 +66,6 @@ const handleChangeRadio = () => {
     state.selectedMemberItems = [];
 };
 
-const createScheduleMap = (scheduleForm: ScheduleForm): Record<ScheduleDayType, ServiceChannelScheduleDayType> => {
-    const allDays: ScheduleDayType[] = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
-    const { days, start, end } = scheduleForm;
-
-    const refinedDays = allDays.map((day) => ({
-        is_scheduled: days.includes(day),
-        start,
-        end,
-    }));
-
-    return zipObject(allDays, refinedDays) as Record<ScheduleDayType, ServiceChannelScheduleDayType>;
-};
-
 watch([() => name.value, () => state.scheduleForm, () => state.selectedRadioIdx, () => state.selectedMemberItems], ([nameVal, scheduleForm, selectedRadioIdx, selectedMemberItems]) => {
     emit('change-form', {
         name: nameVal,
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotifications.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotifications.vue
index 82e752ab8a..bde3820e40 100644
--- a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotifications.vue
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotifications.vue
@@ -22,7 +22,6 @@ import type { NotificationProtocolModel } from '@/schema/alert-manager/notificat
 import type { ServiceChannelListParameters } from '@/schema/alert-manager/service-channel/api-verbs/list';
 import { SERVICE_CHANNEL_STATE } from '@/schema/alert-manager/service-channel/constants';
 import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
-import type { WebhookModel } from '@/schema/alert-manager/webhook/model';
 import { i18n as _i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -37,6 +36,12 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useQueryTags } from '@/common/composables/query-tags';
 
+import ServiceDetailTabsNotificationsDeleteModal
+    from '@/services/alert-manager-v2/components/ServiceDetailTabsNotificationsDeleteModal.vue';
+import ServiceDetailTabsNotificationsTableModal
+    from '@/services/alert-manager-v2/components/ServiceDetailTabsNotificationsTableModal.vue';
+import ServiceDetailTabsNotificationsUpdateModal
+    from '@/services/alert-manager-v2/components/ServiceDetailTabsNotificationsUpdateModal.vue';
 import { alertManagerStateFormatter } from '@/services/alert-manager-v2/composables/refined-table-data';
 import { SERVICE_TAB_HEIGHT } from '@/services/alert-manager-v2/constants/common-constant';
 import {
@@ -46,7 +51,7 @@ import {
 } from '@/services/alert-manager-v2/constants/notification-table-constant';
 import { ALERT_MANAGER_ROUTE_V2 } from '@/services/alert-manager-v2/routes/route-constant';
 import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
-import type { ProtocolInfo } from '@/services/alert-manager-v2/types/alert-manager-type';
+import type { ProtocolInfo, NotificationsModalType } from '@/services/alert-manager-v2/types/alert-manager-type';
 
 interface Props {
     tableHeight: number;
@@ -71,25 +76,25 @@ const tableState = reactive({
     actionMenu: computed<MenuItem[]>(() => ([
         {
             type: 'item',
-            name: 'enable',
+            name: 'ENABLE',
             label: _i18n.t('ALERT_MANAGER.ENABLE'),
             disabled: state.selectedItem?.state === SERVICE_CHANNEL_STATE.ENABLED,
         },
         {
             type: 'item',
-            name: 'disable',
+            name: 'DISABLE',
             label: _i18n.t('ALERT_MANAGER.DISABLED'),
             disabled: state.selectedItem?.state === SERVICE_CHANNEL_STATE.DISABLED,
         },
         { type: 'divider' },
         {
             type: 'item',
-            name: 'update',
+            name: 'UPDATE',
             label: _i18n.t('ALERT_MANAGER.UPDATE'),
         },
         {
             type: 'item',
-            name: 'delete',
+            name: 'DELETE',
             label: _i18n.t('ALERT_MANAGER.DELETE'),
         },
     ])),
@@ -106,7 +111,11 @@ const state = reactive({
     items: [] as ServiceChannelModel[],
     totalCount: 0,
     selectIndex: undefined as number|undefined,
-    selectedItem: computed<WebhookModel>(() => state.items[state.selectIndex]),
+    selectedItem: computed<ServiceChannelModel>(() => state.items[state.selectIndex]),
+});
+const modalState = reactive({
+    visible: false,
+    type: undefined as NotificationsModalType|undefined,
 });
 
 const notificationsListApiQueryHelper = new ApiQueryHelper().setSort('created_at', true)
@@ -122,13 +131,19 @@ const getProtocolInfo = (id: string): ProtocolInfo => {
         icon: plugin?.icon || '',
     };
 };
+const handleCloseModal = () => {
+    state.selectIndex = undefined;
+    fetchNotificationList();
+    serviceDetailPageStore.setSelectedNotificationId(undefined);
+};
 const handleClickCreateButton = () => {
     router.push(getProperRouteLocation({
         name: ALERT_MANAGER_ROUTE_V2.SERVICE.DETAIL.NOTIFICATIONS.CREATE._NAME,
     }));
 };
-const handleSelectDropdownItem = (name) => {
-    console.log('TODO: handleSelectDropdownItem', name);
+const handleSelectDropdownItem = (name: NotificationsModalType) => {
+    modalState.visible = true;
+    modalState.type = name;
 };
 const handleChangeToolbox = async (options: any = {}) => {
     if (options.queryTags !== undefined) queryTagHelper.setQueryTags(options.queryTags);
@@ -185,70 +200,89 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <p-toolbox-table class="service-detail-tabs-notifications"
-                     search-type="query"
-                     selectable
-                     sortable
-                     exportable
-                     :multi-select="false"
-                     :loading="state.loading"
-                     :total-count="state.totalCount"
-                     :items="state.items"
-                     :fields="tableState.fields"
-                     :select-index="[state.selectIndex]"
-                     :query-tags="queryTags"
-                     :key-item-sets="NOTIFICATION_MANAGEMENT_TABLE_HANDLER.keyItemSets"
-                     :value-handler-map="NOTIFICATION_MANAGEMENT_TABLE_HANDLER.valueHandlerMap"
-                     :style="{height: `${props.tableHeight - SERVICE_TAB_HEIGHT}px`}"
-                     @change="handleChangeToolbox"
-                     @refresh="handleChangeToolbox()"
-                     @export="handleExportExcel"
-                     @select="handleSelectTableRow"
-    >
-        <template #toolbox-top>
-            <p-heading-layout class="pt-8 px-4">
-                <template #heading>
-                    <p-heading heading-type="sub"
-                               use-total-count
-                               :total-count="state.totalCount"
-                               :title="$t('ALERT_MANAGER.NOTIFICATIONS.TITLE')"
+    <div>
+        <p-toolbox-table class="service-detail-tabs-notifications"
+                         search-type="query"
+                         selectable
+                         sortable
+                         exportable
+                         :multi-select="false"
+                         :loading="state.loading"
+                         :total-count="state.totalCount"
+                         :items="state.items"
+                         :fields="tableState.fields"
+                         :select-index="[state.selectIndex]"
+                         :query-tags="queryTags"
+                         :key-item-sets="NOTIFICATION_MANAGEMENT_TABLE_HANDLER.keyItemSets"
+                         :value-handler-map="NOTIFICATION_MANAGEMENT_TABLE_HANDLER.valueHandlerMap"
+                         :style="{height: `${props.tableHeight - SERVICE_TAB_HEIGHT}px`}"
+                         @change="handleChangeToolbox"
+                         @refresh="handleChangeToolbox()"
+                         @export="handleExportExcel"
+                         @select="handleSelectTableRow"
+        >
+            <template #toolbox-top>
+                <p-heading-layout class="pt-8 px-4">
+                    <template #heading>
+                        <p-heading heading-type="sub"
+                                   use-total-count
+                                   :total-count="state.totalCount"
+                                   :title="$t('ALERT_MANAGER.NOTIFICATIONS.TITLE')"
+                        />
+                    </template>
+                    <template #extra>
+                        <p-button style-type="primary"
+                                  icon-left="ic_plus_bold"
+                                  @click="handleClickCreateButton"
+                        >
+                            {{ $t('ALERT_MANAGER.CREATE') }}
+                        </p-button>
+                    </template>
+                </p-heading-layout>
+            </template>
+            <template #toolbox-left>
+                <p-select-dropdown :menu="tableState.actionMenu"
+                                   :disabled="!state.selectedItem"
+                                   reset-selection-on-menu-close
+                                   :placeholder="$t('ALERT_MANAGER.ACTION')"
+                                   @select="handleSelectDropdownItem"
+                />
+            </template>
+            <template #col-state-format="{ value }">
+                <p-status
+                    class="capitalize"
+                    v-bind="alertManagerStateFormatter(value)"
+                />
+            </template>
+            <template #col-protocol_id-format="{value}">
+                <div class="col-channel">
+                    <p-lazy-img :src="assetUrlConverter(getProtocolInfo(value).icon)"
+                                width="1rem"
+                                height="1rem"
+                                class="service-img"
                     />
-                </template>
-                <template #extra>
-                    <p-button style-type="primary"
-                              icon-left="ic_plus_bold"
-                              @click="handleClickCreateButton"
-                    >
-                        {{ $t('ALERT_MANAGER.CREATE') }}
-                    </p-button>
-                </template>
-            </p-heading-layout>
-        </template>
-        <template #toolbox-left>
-            <p-select-dropdown :menu="tableState.actionMenu"
-                               :disabled="!state.selectedItem"
-                               reset-selection-on-menu-close
-                               :placeholder="$t('ALERT_MANAGER.ACTION')"
-                               @select="handleSelectDropdownItem"
+                    <span>{{ getProtocolInfo(value).name }}</span>
+                </div>
+            </template>
+        </p-toolbox-table>
+        <div v-if="modalState.visible">
+            <service-detail-tabs-notifications-update-modal v-if="modalState.type === 'UPDATE'"
+                                                            :visible.sync="modalState.visible"
+                                                            :selected-item="state.selectedItem"
+                                                            @close="handleCloseModal"
             />
-        </template>
-        <template #col-state-format="{ value }">
-            <p-status
-                class="capitalize"
-                v-bind="alertManagerStateFormatter(value)"
+            <service-detail-tabs-notifications-delete-modal v-else-if="modalState.type === 'DELETE'"
+                                                            :visible.sync="modalState.visible"
+                                                            :selected-item="state.selectedItem"
+                                                            @close="handleCloseModal"
             />
-        </template>
-        <template #col-protocol_id-format="{value}">
-            <div class="col-channel">
-                <p-lazy-img :src="assetUrlConverter(getProtocolInfo(value).icon)"
-                            width="1rem"
-                            height="1rem"
-                            class="service-img"
-                />
-                <span>{{ getProtocolInfo(value).name }}</span>
-            </div>
-        </template>
-    </p-toolbox-table>
+            <service-detail-tabs-notifications-table-modal v-else
+                                                           :visible.sync="modalState.visible"
+                                                           :selected-item="state.selectedItem"
+                                                           @close="handleCloseModal"
+            />
+        </div>
+    </div>
 </template>
 
 <style scoped lang="postcss">
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsDeleteModal.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsDeleteModal.vue
new file mode 100644
index 0000000000..67911cf720
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsDeleteModal.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { ServiceChannelDeleteParameters } from '@/schema/alert-manager/service-channel/api-verbs/delete';
+import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+interface Props {
+    selectedItem?: ServiceChannelModel;
+    visible?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    selectedItem: undefined,
+    visible: false,
+});
+
+const emit = defineEmits<{(e: 'close'): void,
+    (e: 'update:visible'): void
+}>();
+
+const state = reactive({
+    loading: false,
+    proxyVisible: useProxyValue('visible', props, emit),
+});
+
+const handleConfirm = async () => {
+    state.loading = true;
+    try {
+        await SpaceConnector.clientV2.alertManager.serviceChannel.delete<ServiceChannelDeleteParameters>({
+            channel_id: props.selectedItem?.channel_id || '',
+        });
+        state.proxyVisible = false;
+        emit('close');
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+    } finally {
+        state.loading = false;
+    }
+};
+</script>
+
+<template>
+    <delete-modal :header-title="$t('ALERT_MANAGER.NOTIFICATIONS.MODAL_DELETE_TITLE')"
+                  :confirm-text="$t('ALERT_MANAGER.NOTIFICATIONS.MODAL_DELETE_BUTTON')"
+                  :visible.sync="state.proxyVisible"
+                  :loading="state.loading"
+                  @confirm="handleConfirm"
+    />
+</template>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsTableModal.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsTableModal.vue
new file mode 100644
index 0000000000..f14b54df69
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsTableModal.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PTableCheckModal, PLazyImg, PStatus } from '@cloudforet/mirinae';
+
+import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
+import type { ServiceChannelDisableParameters } from '@/schema/alert-manager/service-channel/api-verbs/disable';
+import type { ServiceChannelEnableParameters } from '@/schema/alert-manager/service-channel/api-verbs/enable';
+import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
+import { WEBHOOK_STATE } from '@/schema/alert-manager/webhook/constants';
+import { i18n } from '@/translations';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
+
+import { assetUrlConverter } from '@/lib/helper/asset-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import { alertManagerStateFormatter } from '@/services/alert-manager-v2/composables/refined-table-data';
+import { NOTIFICATION_MANAGEMENT_TABLE_FIELDS } from '@/services/alert-manager-v2/constants/notification-table-constant';
+import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
+import type { ProtocolInfo } from '@/services/alert-manager-v2/types/alert-manager-type';
+
+interface Props {
+    selectedItem?: ServiceChannelModel;
+    visible?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    selectedItem: undefined,
+    visible: false,
+});
+
+const allReferenceStore = useAllReferenceStore();
+const allReferenceGetters = allReferenceStore.getters;
+const serviceDetailPageStore = useServiceDetailPageStore();
+const serviceDetailPageState = serviceDetailPageStore.state;
+
+const storeState = reactive({
+    plugins: computed<PluginReferenceMap>(() => allReferenceGetters.plugin),
+    notificationProtocolList: computed<NotificationProtocolModel[]>(() => serviceDetailPageState.notificationProtocolList),
+});
+
+const emit = defineEmits<{(e: 'close'): void;
+    (e: 'update:visible'): void
+}>();
+
+const state = reactive({
+    loading: false,
+    headerTitle: computed<TranslateResult>(() => {
+        if (props.selectedItem?.state === WEBHOOK_STATE.ENABLED) {
+            return i18n.t('ALERT_MANAGER.WEBHOOK.MODAL_DISABLE_TITLE');
+        }
+        return i18n.t('ALERT_MANAGER.WEBHOOK.MODAL_ENABLE_TITLE');
+    }),
+    proxyVisible: useProxyValue('visible', props, emit),
+});
+
+const getProtocolInfo = (id: string): ProtocolInfo => {
+    const protocol = storeState.notificationProtocolList.find((item) => item.protocol_id === id);
+    const plugin = storeState.plugins[protocol?.plugin_info.plugin_id || ''];
+    return {
+        name: protocol?.name || '',
+        icon: plugin?.icon || '',
+    };
+};
+const handleConfirm = async () => {
+    state.loading = true;
+    try {
+        if (props.selectedItem?.state === WEBHOOK_STATE.ENABLED) {
+            await SpaceConnector.clientV2.alertManager.serviceChannel.disable<ServiceChannelDisableParameters>({
+                channel_id: props.selectedItem?.channel_id || '',
+            });
+        } else {
+            await SpaceConnector.clientV2.alertManager.serviceChannel.enable<ServiceChannelEnableParameters>({
+                channel_id: props.selectedItem?.channel_id || '',
+            });
+        }
+        state.proxyVisible = false;
+        emit('close');
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+    } finally {
+        state.loading = false;
+    }
+};
+</script>
+
+<template>
+    <p-table-check-modal :visible.sync="state.proxyVisible"
+                         :header-title="state.headerTitle"
+                         :theme-color="props.selectedItem?.state === WEBHOOK_STATE.ENABLED ? 'alert' : 'primary'"
+                         :fields="NOTIFICATION_MANAGEMENT_TABLE_FIELDS"
+                         :loading="state.loading"
+                         :items="[props.selectedItem]"
+                         modal-size="md"
+                         @confirm="handleConfirm"
+    >
+        <template #col-state-format="{ value }">
+            <p-status
+                class="capitalize"
+                v-bind="alertManagerStateFormatter(value)"
+            />
+        </template>
+        <template #col-protocol_id-format="{value}">
+            <div class="flex items-center gap-2">
+                <p-lazy-img :src="assetUrlConverter(getProtocolInfo(value).icon)"
+                            width="1rem"
+                            height="1rem"
+                            class="service-img"
+                />
+                <span>{{ getProtocolInfo(value).name }}</span>
+            </div>
+        </template>
+    </p-table-check-modal>
+</template>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsUpdateModal.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsUpdateModal.vue
new file mode 100644
index 0000000000..e241c21e68
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsNotificationsUpdateModal.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup>
+import {
+    computed, reactive, watch,
+} from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import {
+    PButtonModal, PFieldGroup, PTextInput, PRadio, PRadioGroup, PPaneLayout, PLazyImg,
+} from '@cloudforet/mirinae';
+
+import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
+import type { ServiceChannelUpdateParameters } from '@/schema/alert-manager/service-channel/api-verbs/update';
+import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
+import type { ServiceChannelScheduleInfoType, ServiceChannelScheduleType } from '@/schema/alert-manager/service-channel/type';
+import { i18n } from '@/translations';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
+
+import { assetUrlConverter } from '@/lib/helper/asset-helper';
+
+import type { ScheduleForm, ScheduleDayType } from '@/common/components/schedule-setting-form/schedule-setting-form';
+import ScheduleSettingForm from '@/common/components/schedule-setting-form/ScheduleSettingForm.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+import { useProxyValue } from '@/common/composables/proxy-state';
+import type { SelectedUserDropdownIdsType } from '@/common/modules/user/typte';
+import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
+
+import { createScheduleMap } from '@/services/alert-manager-v2/composables/form-data';
+import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
+import type { UserRadioType, ProtocolInfo } from '@/services/alert-manager-v2/types/alert-manager-type';
+
+
+interface Props {
+    selectedItem?: ServiceChannelModel;
+    visible?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    selectedItem: undefined,
+    visible: false,
+});
+
+const allReferenceStore = useAllReferenceStore();
+const allReferenceGetters = allReferenceStore.getters;
+const serviceDetailPageStore = useServiceDetailPageStore();
+const serviceDetailPageState = serviceDetailPageStore.state;
+
+const emit = defineEmits<{(e: 'close'): void;
+    (e: 'update:visible'): void
+}>();
+
+const storeState = reactive({
+    notificationProtocolList: computed<NotificationProtocolModel[]>(() => serviceDetailPageState.notificationProtocolList),
+    plugins: computed<PluginReferenceMap>(() => allReferenceGetters.plugin),
+});
+const state = reactive({
+    loading: false,
+    proxyVisible: useProxyValue('visible', props, emit),
+
+    scheduleForm: {} as ScheduleForm,
+    radioMenuList: computed<UserRadioType[]>(() => ([
+        {
+            label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.ALL_MEMBER'),
+            name: 'ALL_MEMBER',
+        },
+        {
+            label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.USER_GROUP'),
+            name: 'USER_GROUP',
+        },
+        {
+            label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.MODAL.SPECIFIC_USER'),
+            name: 'USER',
+        },
+    ])),
+    selectedRadioIdx: 0,
+    selectedMemberItems: [] as SelectedUserDropdownIdsType[],
+});
+
+const {
+    forms: {
+        name,
+    },
+    setForm,
+} = useFormValidator({
+    name: '',
+}, {});
+
+const getProtocolInfo = (id: string): ProtocolInfo => {
+    const protocol = storeState.notificationProtocolList.find((item) => item.protocol_id === id);
+    const plugin = storeState.plugins[protocol?.plugin_info.plugin_id || ''];
+    return {
+        name: protocol?.name || '',
+        icon: plugin?.icon || '',
+    };
+};
+const handleChangeRadio = () => {
+    state.selectedMemberItems = [];
+};
+const handleScheduleForm = (form: ScheduleForm) => {
+    state.scheduleForm = form;
+};
+
+const transformToScheduleForm = (data: ServiceChannelScheduleInfoType): ScheduleForm => {
+    const type: ServiceChannelScheduleType = data.SCHEDULE_TYPE;
+
+    const days: ScheduleDayType[] = Object.keys(data)
+        .filter((day) => ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'].includes(day))
+        .filter((day) => data[day].is_scheduled !== false) as ScheduleDayType[];
+
+    const start = data[days[0]]?.start || 0;
+    const end = data[days[0]]?.end || 0;
+
+    return {
+        type,
+        days,
+        start,
+        end,
+    };
+};
+
+const handleConfirm = async () => {
+    state.loading = true;
+    try {
+        await SpaceConnector.clientV2.alertManager.serviceChannel.update<ServiceChannelUpdateParameters>({
+            channel_id: props.selectedItem?.channel_id || '',
+            name: name.value,
+            schedule: {
+                SCHEDULE_TYPE: state.scheduleForm.type,
+                ...createScheduleMap(state.scheduleForm),
+            },
+            data: {
+                FORWARD_TYPE: state.radioMenuList[state.selectedRadioIdx].name,
+                USER_GROUP: state.selectedRadioIdx === 1 ? state.selectedMemberItems.map((item) => item.value) : undefined,
+                USER: state.selectedRadioIdx === 2 ? state.selectedMemberItems.map((item) => item.value) : undefined,
+            },
+        });
+        state.proxyVisible = false;
+        emit('close');
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+    } finally {
+        state.loading = false;
+    }
+};
+
+watch(() => props.selectedItem, (selectedItem) => {
+    if (selectedItem) {
+        setForm('name', selectedItem.name);
+        state.selectedRadioIdx = state.radioMenuList.findIndex((item) => item.name === selectedItem?.data.FORWARD_TYPE);
+        if (state.selectedRadioIdx !== 0) {
+            const userList: SelectedUserDropdownIdsType[] = selectedItem.data.USER?.map((i) => ({
+                type: 'USER',
+                value: i,
+            })) || [];
+            const userGroupList: SelectedUserDropdownIdsType[] = selectedItem.data.USER_GROUP?.map((i) => ({
+                type: 'USER_GROUP',
+                value: i,
+            })) || [];
+            state.selectedMemberItems = [...userList, ...userGroupList];
+        }
+        state.scheduleForm = transformToScheduleForm(selectedItem.schedule);
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal class="service-detail-tabs-notifications-update-modal"
+                    :header-title="$t('ALERT_MANAGER.NOTIFICATIONS.MODAL_UPDATE_TITLE')"
+                    :visible.sync="state.proxyVisible"
+                    :loading="state.loading"
+                    :disalbed="name === ''"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <div class="bg-gray-100 p-4">
+                <p-pane-layout class="pt-6 px-4 pb-4">
+                    <p class="pb-4 text-display-md">
+                        {{ $t('ALERT_MANAGER.NOTIFICATIONS.BASE_INFO_TITLE') }}
+                    </p>
+                    <div class="bg-gray-100 inline-flex w-full items-center mb-4 py-2 px-4 gap-2 rounded-md">
+                        <p-lazy-img :src="assetUrlConverter(getProtocolInfo(props.selectedItem.protocol_id).icon)"
+                                    width="3rem"
+                                    height="3rem"
+                                    class="service-img"
+                        />
+                        <span>{{ getProtocolInfo(props.selectedItem.protocol_id).name }}</span>
+                    </div>
+                    <p-field-group :label="$t('ALERT_MANAGER.NOTIFICATIONS.CHANNEL_NAME')"
+                                   class="pt-2"
+                                   required
+                    >
+                        <template #default="{invalid}">
+                            <p-text-input :value="name"
+                                          block
+                                          :invalid="invalid"
+                                          class="mb-2"
+                                          @update:value="setForm('name', $event)"
+                            />
+                        </template>
+                    </p-field-group>
+                    <p-field-group :label="$t('ALERT_MANAGER.NOTIFICATIONS.USER')"
+                                   required
+                    >
+                        <template #default>
+                            <div class="flex flex-col mt-1 gap-2">
+                                <p-radio-group>
+                                    <p-radio v-for="(item, idx) in state.radioMenuList"
+                                             :key="`notification-scope-${idx}`"
+                                             v-model="state.selectedRadioIdx"
+                                             :value="idx"
+                                             @change="handleChangeRadio"
+                                    >
+                                        <span class="radio-item">
+                                            {{ item.label }}
+                                        </span>
+                                    </p-radio>
+                                </p-radio-group>
+                                <user-select-dropdown v-if="state.selectedRadioIdx !== 0"
+                                                      selection-type="multiple"
+                                                      appearance-type="stack"
+                                                      use-fixed-menu-style
+                                                      :show-category-title="false"
+                                                      :show-user-group-list="state.selectedRadioIdx === 1"
+                                                      :show-user-list="state.selectedRadioIdx === 2"
+                                                      :selected-ids.sync="state.selectedMemberItems"
+                                />
+                            </div>
+                        </template>
+                    </p-field-group>
+                </p-pane-layout>
+                <div class="pt-2">
+                    <p-pane-layout class="pt-6 px-4 pb-4">
+                        <p class="pb-4 text-display-md">
+                            {{ $t('ALERT_MANAGER.NOTIFICATIONS.SCHEDULE') }}
+                        </p>
+                        <schedule-setting-form :schedule-form="state.scheduleForm"
+                                               @schedule-form="handleScheduleForm"
+                        />
+                    </p-pane-layout>
+                </div>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.service-detail-tabs-webhook-update-modal {
+    .webhook-item {
+        @apply flex items-center w-full;
+        margin-bottom: 1.5rem;
+        gap: 1rem;
+        .info {
+            @apply flex flex-col;
+            gap: 0.125rem;
+            flex: 1;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsWebhook.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsWebhook.vue
index 05d733cb82..4ee6fc80bd 100644
--- a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsWebhook.vue
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsWebhook.vue
@@ -134,7 +134,7 @@ const handleClickCreateButton = () => {
         name: ALERT_MANAGER_ROUTE_V2.SERVICE.DETAIL.WEBHOOK.CREATE._NAME,
     }));
 };
-const handleSelectDropdownItem = (name) => {
+const handleSelectDropdownItem = (name: WebhookModalType) => {
     modalState.visible = true;
     modalState.type = name;
 };
@@ -279,7 +279,7 @@ onUnmounted(() => {
                                                       :selected-item="state.selectedItem"
                                                       @close="handleCloseModal"
             />
-            <service-detail-tabs-webhook-delete-modal v-if="modalState.type === 'DELETE'"
+            <service-detail-tabs-webhook-delete-modal v-else-if="modalState.type === 'DELETE'"
                                                       :visible.sync="modalState.visible"
                                                       :selected-item="state.selectedItem"
                                                       @close="handleCloseModal"
diff --git a/apps/web/src/services/alert-manager-v2/composables/form-data.ts b/apps/web/src/services/alert-manager-v2/composables/form-data.ts
new file mode 100644
index 0000000000..bb1233b1a6
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/composables/form-data.ts
@@ -0,0 +1,18 @@
+import { zipObject } from 'lodash';
+
+import type { ServiceChannelScheduleDayType } from '@/schema/alert-manager/service-channel/type';
+
+import type { ScheduleDayType, ScheduleForm } from '@/common/components/schedule-setting-form/schedule-setting-form';
+
+export const createScheduleMap = (scheduleForm: ScheduleForm): Record<ScheduleDayType, ServiceChannelScheduleDayType> => {
+    const allDays: ScheduleDayType[] = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
+    const { days, start, end } = scheduleForm;
+
+    const refinedDays = allDays.map((day) => ({
+        is_scheduled: days.includes(day),
+        start,
+        end,
+    }));
+
+    return zipObject(allDays, refinedDays) as Record<ScheduleDayType, ServiceChannelScheduleDayType>;
+};
diff --git a/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts b/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts
index 91601d037e..bec0bd0b54 100644
--- a/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts
+++ b/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts
@@ -54,6 +54,7 @@ export type ProtocolInfo = {
     name: string;
     icon: string;
 };
+export type NotificationsModalType = 'UPDATE' | 'ENABLE' | 'DISABLE' | 'DELETE';
 
 export type EscalationPolicyRadioType = {
     label: TranslateResult,
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 7b72edaee4..ab75af0102 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -2053,6 +2053,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>BASE_INFO_TITLE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>CHANNEL_NAME</name>
                                 <definition_loaded>false</definition_loaded>
@@ -2179,6 +2200,111 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>MODAL_DELETE_BUTTON</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>MODAL_DELETE_TITLE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>MODAL_DISABLE_TITLE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>MODAL_ENABLE_TITLE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>MODAL_UPDATE_TITLE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>MONDAY</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 80a6bd613c..789a2b6ea7 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -103,12 +103,18 @@
 			"ALL_MEMBER": "All Members in Service",
 			"ALL_NOTIFICATIONS": "All Notifications",
 			"ALL_TIME": "All Time",
+			"BASE_INFO_TITLE": "Base Information",
 			"CHANNEL_NAME": "Channel Name",
 			"CREATE_TITLE": "Create Notifications",
 			"CUSTOM": "Custom",
 			"DAY": "Day",
 			"FRIDAY": "Friday",
 			"HIGH_NOTIFICATIONS_ONLY": "High Urgency Notifications Only",
+			"MODAL_DELETE_BUTTON": "Delete this Notification",
+			"MODAL_DELETE_TITLE": "Are you sure you want to Delete Notifications Channel?",
+			"MODAL_DISABLE_TITLE": "Are you sure you want to disable selected Notification below?",
+			"MODAL_ENABLE_TITLE": "Are you sure you want to enable selected Notification below?",
+			"MODAL_UPDATE_TITLE": "Update Notification",
 			"MONDAY": "Monday",
 			"NOTIFICATIONS_CHANNEL": "Notifications Channel",
 			"NOTIFICATION_POLICY": "Notification Policy",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 64a5491b53..d2155546a1 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -103,12 +103,18 @@
 			"ALL_MEMBER": "",
 			"ALL_NOTIFICATIONS": "全ての通知",
 			"ALL_TIME": "すべての時間",
+			"BASE_INFO_TITLE": "基本情報",
 			"CHANNEL_NAME": "チャンネル名",
 			"CREATE_TITLE": "",
 			"CUSTOM": "カスタム",
 			"DAY": "日",
 			"FRIDAY": "",
 			"HIGH_NOTIFICATIONS_ONLY": "",
+			"MODAL_DELETE_BUTTON": "",
+			"MODAL_DELETE_TITLE": "この通知チャネルを削除しますか？",
+			"MODAL_DISABLE_TITLE": "",
+			"MODAL_ENABLE_TITLE": "",
+			"MODAL_UPDATE_TITLE": "",
 			"MONDAY": "",
 			"NOTIFICATIONS_CHANNEL": "通知チャネル",
 			"NOTIFICATION_POLICY": "通知ポリシー",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 30f080de6c..ae614254df 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -103,12 +103,18 @@
 			"ALL_MEMBER": "",
 			"ALL_NOTIFICATIONS": "모든 알림 받기",
 			"ALL_TIME": "모든 시간",
+			"BASE_INFO_TITLE": "기본 정보",
 			"CHANNEL_NAME": "채널명",
 			"CREATE_TITLE": "",
 			"CUSTOM": "기간 선택",
 			"DAY": "일",
 			"FRIDAY": "",
 			"HIGH_NOTIFICATIONS_ONLY": "",
+			"MODAL_DELETE_BUTTON": "",
+			"MODAL_DELETE_TITLE": "이 알림 채널을 삭제하시겠습니까?",
+			"MODAL_DISABLE_TITLE": "",
+			"MODAL_ENABLE_TITLE": "",
+			"MODAL_UPDATE_TITLE": "",
 			"MONDAY": "",
 			"NOTIFICATIONS_CHANNEL": "알림 채널",
 			"NOTIFICATION_POLICY": "알림 정책",