diff --git a/apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue b/apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue
index 7f9ebb3510..d57a85fd06 100644
--- a/apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue
@@ -119,9 +119,9 @@ const getAssetInfo = (assetId: string) => {
                     --
                 </span>
                 <template v-else>
-                    <div v-for="(item, idx) in value.slice(0, 3)"
+                    <div v-for="(item, idx) in value"
                          :key="`resource-item-${idx}`"
-                         class="flex items-center justify-between"
+                         class="resource-item-wrapper flex items-center justify-between"
                     >
                         <p class="resource-item truncate">
                             {{ item?.name }}
@@ -131,7 +131,7 @@ const getAssetInfo = (assetId: string) => {
                                     name: ASSET_INVENTORY_ROUTE.CLOUD_SERVICE.DETAIL._NAME,
                                     params: getAssetInfo(item.asset_id)
                                 }"
-                                size="sm"
+                                size="md"
                                 highlight
                                 action-icon="internal-link"
                                 new-tab
@@ -151,7 +151,7 @@ const getAssetInfo = (assetId: string) => {
                                 serviceId: value
                             }
                         }"
-                        size="sm"
+                        size="md"
                         highlight
                         action-icon="internal-link"
                         new-tab
@@ -172,3 +172,22 @@ const getAssetInfo = (assetId: string) => {
         </p-definition-table>
     </p-pane-layout>
 </template>
+
+<style scoped lang="postcss">
+.alert-detail-info-table {
+    .resource-item-wrapper {
+        & + .resource-item-wrapper {
+            @apply relative;
+            margin-top: 1rem;
+            &::before {
+                @apply absolute border-t border-gray-200;
+                content: '';
+                top: -0.5rem;
+                left: 0;
+                width: 100%;
+                height: 0.125rem;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue b/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue
index 1e936afd54..5f6c4e23c8 100644
--- a/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue
+++ b/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue
@@ -252,9 +252,9 @@ watch(() => route.query, async (query) => {
                 />
             </template>
             <template #toolbox-bottom>
-                <div class="quick-filter-wrapper flex justify-between mr-4 mb-4 ml-4">
+                <div class="quick-filter-wrapper flex flex-col mr-4 mb-4 ml-4 gap-2">
                     <div class="status-filter-wrapper">
-                        <span>{{ $t('ALERT_MANAGER.STATUS') }}</span>
+                        <span class="label">{{ $t('ALERT_MANAGER.STATUS') }}</span>
                         <p-divider class="divider"
                                    vertical
                         />
@@ -262,13 +262,14 @@ watch(() => route.query, async (query) => {
                                          :key="idx"
                                          :selected="filterState.selectedStatusFilter"
                                          :value="item.name"
+                                         class="status"
                                          @change="handleSelectFilter('status', item.name)"
                         >
                             {{ item.label }}
                         </p-select-status>
                     </div>
                     <div class="status-filter-wrapper">
-                        <span>{{ $t('ALERT_MANAGER.ALERTS.LABEL_URGENCY') }}</span>
+                        <span class="label">{{ $t('ALERT_MANAGER.ALERTS.LABEL_URGENCY') }}</span>
                         <p-divider class="divider"
                                    vertical
                         />
@@ -276,6 +277,7 @@ watch(() => route.query, async (query) => {
                                          :key="idx"
                                          :selected="filterState.selectedUrgencyFilter"
                                          :value="item.name"
+                                         class="status"
                                          @change="handleSelectFilter('urgency', item.name)"
                         >
                             {{ item.label }}
@@ -374,14 +376,21 @@ watch(() => route.query, async (query) => {
     }
     .quick-filter-wrapper {
         .status-filter-wrapper {
-            @apply flex items-center flex-wrap text-label-md text-gray-600;
+            @apply flex items-center flex-wrap text-label-sm;
             gap: 0.75rem;
-            margin-top: -0.5rem;
+            padding-top: 0.125rem;
+            padding-bottom: 0.125rem;
+            .label {
+                @apply font-bold;
+            }
             .divider {
                 height: 1rem;
                 padding-top: 0.25rem;
                 padding-bottom: 0.25rem;
             }
+            .status {
+                @apply text-label-md;
+            }
         }
 
         @screen mobile {
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
index 5ac94738af..52872d2a4f 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
@@ -180,8 +180,10 @@ watch(() => storeState.serviceInfo.service_id, (service_id) => {
                                  height="0.75rem"
                                  :color="red[200]"
                             />
-                            <span>{{ $t('ALERT_MANAGER.ALERTS.LOW') }}:</span>
-                            <span>{{ item.low }}</span>
+                            <p class="flex gap-1 text-gray-700">
+                                <span>{{ $t('ALERT_MANAGER.ALERTS.LOW') }}:</span>
+                                <span>{{ item.low }}</span>
+                            </p>
                         </div>
                     </div>
                 </p-pane-layout>
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
index 47b039efd9..93c4248f7f 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    reactive, computed, watch,
+    reactive, computed, watch, onUnmounted,
 } from 'vue';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
@@ -77,6 +77,7 @@ const storeState = reactive({
     serviceId: computed<string>(() => serviceDetailPageState.serviceInfo.service_id),
     defaultEscalationPolicyId: computed<string>(() => serviceDetailPageState.serviceInfo.escalation_policy_id),
     timezone: computed<string>(() => serviceDetailPageGetters.timezone),
+    selectedEscalationPolicyId: computed<string|undefined>(() => serviceDetailPageState.selectedEscalationPolicyId),
 });
 const state = reactive({
     loading: false,
@@ -95,6 +96,9 @@ const escalationPolicyListApiQueryHelper = new ApiQueryHelper().setSort('created
 const queryTagHelper = useQueryTags({ keyItemSets: ESCALATION_POLICY_MANAGEMENT_TABLE_KEY_ITEMS_SETS });
 const { queryTags } = queryTagHelper;
 
+const initSelectedEscalationPolicy = () => {
+    state.selectIndex = state.items.findIndex((item) => item.escalation_policy_id === storeState.selectedEscalationPolicyId);
+};
 const getConnectChannelCount = (rules: EscalationPolicyRulesType[]): number => {
     const allChannels = rules.flatMap((item) => item.channels);
     const uniqueChannels = new Set(allChannels);
@@ -152,10 +156,18 @@ const fetchEscalationPolicyList = async () => {
     }
 };
 
+watch([() => storeState.selectedEscalationPolicyId, () => state.items], ([id]) => {
+    if (!id) return;
+    initSelectedEscalationPolicy();
+}, { immediate: true });
 watch(() => storeState.serviceId, (id) => {
     if (!id) return;
     fetchEscalationPolicyList();
 }, { immediate: true });
+
+onUnmounted(() => {
+    serviceDetailPageStore.setSelectedEscalationPolicyId(undefined);
+});
 </script>
 
 <template>
diff --git a/apps/web/src/services/alert-manager/components/ServiceList.vue b/apps/web/src/services/alert-manager/components/ServiceList.vue
index 79c9fbeb3d..cc69225803 100644
--- a/apps/web/src/services/alert-manager/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceList.vue
@@ -99,7 +99,10 @@ const handleClickServiceItem = (id: string) => {
         },
     }));
 };
-const handleClickEscalationPolicy = (id: string) => {
+const handleClickEscalationPolicy = (id: string, escalationPolicyId: string) => {
+    if (id) {
+        serviceDetailPageStore.setSelectedEscalationPolicyId(escalationPolicyId);
+    }
     router.push(getProperRouteLocation({
         name: ALERT_MANAGER_ROUTE.SERVICE.DETAIL._NAME,
         params: {
@@ -208,7 +211,7 @@ onMounted(async () => {
                                         <p class="title text-gray-700">
                                             {{ $t('ALERT_MANAGER.SERVICE.OPEN_ALERTS') }}
                                         </p>
-                                        <p class="count font-medium">
+                                        <p class="text-display-md font-medium">
                                             {{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0)
                                                 + (item?.alerts.ACKNOWLEDGED?.HIGH || 0) + (item?.alerts.ACKNOWLEDGED?.LOW || 0) }}
                                         </p>
@@ -234,7 +237,7 @@ onMounted(async () => {
                                                 <p class="count">
                                                     {{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0) }}
                                                 </p>
-                                                <div class="ml-2 text-gray-700">
+                                                <div class="ml-2 text-label-sm text-gray-700">
                                                     <span class="pl-1">{{ $t('ALERT_MANAGER.ALERTS.HIGH') }}:</span>
                                                     <span> {{ item?.alerts.TRIGGERED?.HIGH || 0 }}</span>
                                                 </div>
@@ -283,11 +286,11 @@ onMounted(async () => {
                                             </span>
                                         </div>
                                     </div>
-                                    <div class="flex flex-col items-end">
+                                    <div class="flex flex-col gap-1 items-end">
                                         <p class="title">
                                             {{ $t('ALERT_MANAGER.ESCALATION_POLICY.TITLE', { cnt: 11 }) }}
                                         </p>
-                                        <p-text-button @click.stop="handleClickEscalationPolicy(item.service_id)">
+                                        <p-text-button @click.stop="handleClickEscalationPolicy(item.service_id, item.escalation_policy_id)">
                                             <p class="truncate text-blue-700 pr-1 pl-1">
                                                 {{ getEscalationPolicyName(item.escalation_policy_id) }}
                                             </p>
@@ -337,6 +340,7 @@ onMounted(async () => {
             width: 28rem;
             max-width: 28rem;
             padding: 1.25rem 1.5rem 1.5rem;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
             .card-inner-wrapper {
                 @apply flex flex-col w-full;
                 gap: 1.25rem;
@@ -346,11 +350,19 @@ onMounted(async () => {
                         @apply relative flex flex-col;
                         gap: 0.25rem;
                         width: calc(50% - 1rem);
+                        &::before {
+                            @apply absolute;
+                            content: '';
+                            width: 0.063rem;
+                            height: 100%;
+                            top: 0;
+                            left: 0;
+                        }
                         .title {
-                            @apply text-label-md;
+                            @apply text-label-md font-medium;
                         }
                         .count {
-                            @apply text-display-md;
+                            @apply text-display-sm;
                         }
                         .triggered-info {
                             @apply flex items-center;
@@ -358,24 +370,20 @@ onMounted(async () => {
                         &.triggered {
                             padding-left: 1rem;
                             &::before {
-                                @apply absolute bg-red-400;
-                                content: '';
-                                width: 0.063rem;
-                                height: 100%;
-                                top: 0;
-                                left: 0;
+                                @apply bg-red-400;
+                            }
+                        }
+                        &.acknowledged {
+                            padding-left: 1rem;
+                            &::before {
+                                @apply bg-gray-300;
                             }
                         }
                         &.healthy {
                             @apply flex justify-center;
                             padding-left: 1rem;
                             &::before {
-                                @apply absolute bg-green-400;
-                                content: '';
-                                width: 0.063rem;
-                                height: 100%;
-                                top: 0;
-                                left: 0;
+                                @apply bg-green-400;
                             }
                         }
                     }
diff --git a/apps/web/src/services/alert-manager/constants/alert-table-constant.ts b/apps/web/src/services/alert-manager/constants/alert-table-constant.ts
index f639df0cb7..53be910ae2 100644
--- a/apps/web/src/services/alert-manager/constants/alert-table-constant.ts
+++ b/apps/web/src/services/alert-manager/constants/alert-table-constant.ts
@@ -18,7 +18,6 @@ export const ALERT_MANAGEMENT_TABLE_FIELDS: DataTableFieldType[] = [
     { name: 'status', label: 'Status' },
     { name: 'service_id', label: 'Service' },
     { name: 'urgency', label: 'Urgency' },
-    { name: 'triggered_type', label: 'Category' },
     { name: 'resources', label: 'Resource', width: '20rem' },
     { name: 'created_at', label: 'Created at' },
 ];
@@ -28,14 +27,12 @@ export const ALERT_MANAGEMENT_TABLE_HANDLER: AlertManagementTableHandlerType = {
         items: [
             { name: 'alert_id', label: 'Alert ID' },
             { name: 'title', label: 'Title' },
-            { name: 'triggered_type', label: 'Category' },
             { name: 'resource.resource_type', label: 'Resource Name' },
         ],
     }],
     valueHandlerMap: {
         alert_id: makeDistinctValueHandler('alert_manager.Alert', 'alert_id'),
         title: makeDistinctValueHandler('alert_manager.Alert', 'title'),
-        triggered_type: makeDistinctValueHandler('alert_manager.Alert', 'triggered_type'),
         'resource.resource_type': makeDistinctValueHandler('alert_manager.Alert', 'resource.resource_type'),
     },
 };
@@ -45,9 +42,6 @@ export const ALERT_EXCEL_FIELDS: ExcelDataField[] = [
     { key: 'status', name: 'Status' },
     { key: 'service_id', name: 'Service' },
     { key: 'urgency', name: 'Urgency' },
-    { key: 'triggered_type', name: 'Category' },
     { key: 'resources', name: 'Resource' },
     { key: 'created_at', name: 'Created at' },
-    // { key: 'resolved_by', name: 'Resolved by' },
-    // { key: 'acknowledged_by', name: 'Acknowledged by' },
 ];
diff --git a/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts b/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
index 3fdf6a12f1..56cdfb9292 100644
--- a/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
+++ b/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
@@ -37,6 +37,7 @@ interface ServiceFormStoreState {
     notificationProtocolList: ProtocolCardItemType[];
     selectedWebhookId?: string;
     selectedNotificationId?: string;
+    selectedEscalationPolicyId?: string;
 }
 interface ServiceFormStoreGetters {
     serviceInfo: ComputedRef<Service>;
@@ -61,6 +62,7 @@ export const useServiceDetailPageStore = defineStore('page-service-detail', () =
         notificationProtocolList: [],
         selectedWebhookId: undefined,
         selectedNotificationId: undefined,
+        selectedEscalationPolicyId: undefined,
     });
 
     const getters = reactive<ServiceFormStoreGetters>({
@@ -108,6 +110,9 @@ export const useServiceDetailPageStore = defineStore('page-service-detail', () =
         setSelectedNotificationId(id?: string) {
             state.selectedNotificationId = id;
         },
+        setSelectedEscalationPolicyId(id?: string) {
+            state.selectedEscalationPolicyId = id;
+        },
     };
 
     const actions = {
@@ -118,6 +123,7 @@ export const useServiceDetailPageStore = defineStore('page-service-detail', () =
             state.notificationProtocolList = [];
             state.selectedWebhookId = undefined;
             state.selectedNotificationId = undefined;
+            state.selectedEscalationPolicyId = undefined;
         },
         async fetchServiceDetailData(id: string) {
             state.loading = true;