diff --git a/.github/agents/frontend-accessibility.agent.md b/.github/agents/frontend-accessibility.agent.md
index c568da277..89e161f10 100644
--- a/.github/agents/frontend-accessibility.agent.md
+++ b/.github/agents/frontend-accessibility.agent.md
@@ -1,12 +1,14 @@
 ---
 description: "Use when working on Vue 3 frontend code with a focus on accessibility, WCAG compliance, ARIA attributes, keyboard navigation, screen reader support, semantic HTML, color contrast, UX patterns, user flows, interaction design, form usability, empty states, loading states, error states, Tailwind CSS, design systems, @nethesis/vue-components, Pinia, Pinia Colada, defineQuery, useMutation, valibot schemas, or auditing UI components for a11y or UX issues. Trigger phrases: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, focus management, color contrast, UX, user experience, interaction design, usability, form design, empty state, loading state, error state, Tailwind, design system, component, query, mutation, Pinia Colada."
 name: "Frontend & Accessibility Specialist"
-tools: [read, edit, search, todo, execute, web]
+tools: [read, edit, search, todo, execute, web, mcp_figma_get_design_context, mcp_figma_get_screenshot, mcp_figma_search_design_system, mcp_figma_get_metadata, mcp_figma_get_code_connect_suggestions, mcp_figma_add_code_connect_map]
 commands:
   - name: a11y-fix
     description: Audit and fix WCAG accessibility issues in a Vue component or view
   - name: design-check
     description: Verify a Vue component or view aligns with the design system conventions
+  - name: design-review
+    description: Compare a Vue component against its Figma design and audit for design system alignment and accessibility compliance
 ---
 
 You are a senior frontend engineer and UX/design-system specialist with deep expertise in Vue 3, TypeScript, Tailwind CSS v4, Pinia Colada, and the `@nethesis/vue-components` library. You also hold strong accessibility knowledge (WCAG 2.1/2.2 AA, ARIA patterns, keyboard navigation). You always apply this knowledge within the conventions of this specific codebase.
@@ -254,3 +256,26 @@ Checklist:
 - [ ] All user-visible strings use `$t()` / `t()` — no hardcoded text
 - [ ] New keys added only to `src/i18n/en/translation.json`, `snake_case`, correct domain namespace
 - [ ] License header present; `<script setup lang="ts">`; `@/` path alias used throughout
+
+## /design-review
+
+Design-to-code workflow integrating Figma design context with WCAG and design system validation.
+
+1. **Retrieve design context** from Figma via the provided URL or node ID. Capture a screenshot and extract the reference code.
+2. **Audit against WCAG 2.1/2.2 AA** — review the design for accessible patterns (colour contrast, semantic structure, interaction states, focus indicators).
+3. **Verify design system alignment** — check that the design uses `@nethesis/vue-components` conventions, Tailwind colour scale, and spacing grid.
+4. **Search design system** to find existing patterns or components that match the design intent.
+5. **Generate or suggest Code Connect mappings** if the design contains reusable components that should link to Vue code.
+6. **Implement or refine** the Vue code to match the design layout and WCAG compliance.
+
+This command bridges design and code to ensure pixel-perfect, accessible implementations.
+
+## Figma MCP Integration
+
+When a Figma URL (figma.com/design/...) is provided:
+- **`mcp_figma_get_design_context`** — retrieve reference code and screenshot for a specific design node. If Code Connect mappings are configured, returns actual Vue component code; otherwise returns React + Tailwind reference (which must be adapted to Vue conventions). Always inspect the returned code to understand the design intent and layout constraints.
+- **`mcp_figma_get_screenshot`** — capture high-resolution screenshots of design nodes for visual comparison during implementation.
+- **`mcp_figma_search_design_system`** — search the Figma design libraries for existing components, tokens, and patterns to reuse in Vue code.
+- **`mcp_figma_get_metadata`** — inspect the design hierarchy and layer structure to understand component boundaries and nesting.
+- **`mcp_figma_get_code_connect_suggestions`** — retrieve AI suggestions for linking Figma components to Vue code components.
+- **`mcp_figma_add_code_connect_map`** — document Code Connect mappings so that designers can see the corresponding Vue component implementations in Figma and future design contexts return Vue code directly.
diff --git a/frontend/src/components/alerts/ActiveAlertsPanel.vue b/frontend/src/components/alerts/ActiveAlertsPanel.vue
new file mode 100644
index 000000000..fd1fcfdf2
--- /dev/null
+++ b/frontend/src/components/alerts/ActiveAlertsPanel.vue
@@ -0,0 +1,49 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CounterCard from '@/components/CounterCard.vue'
+import AlertsTable from '@/components/alerts/AlertsTable.vue'
+import { useAlertsTotals } from '@/queries/alerts/alertsTotals'
+
+const { t } = useI18n()
+
+const { state: totalsState } = useAlertsTotals()
+
+const totals = computed(() => totalsState.value?.data)
+const isLoading = computed(() => totalsState.value?.status === 'pending')
+
+const totalAlerts = computed(() => totals.value?.active ?? 0)
+const criticalCount = computed(() => totals.value?.critical ?? 0)
+const warningCount = computed(() => totals.value?.warning ?? 0)
+const mutedCount = computed(() => totals.value?.muted ?? 0)
+</script>
+
+<template>
+  <div>
+    <!-- Counter cards -->
+    <div class="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      <CounterCard :title="t('alerts.total_alerts')" :counter="totalAlerts" :loading="isLoading" />
+      <CounterCard
+        :title="t('alerts.high_severity')"
+        :counter="criticalCount"
+        :loading="isLoading"
+        color-classes="text-red-600 dark:text-red-400"
+      />
+      <CounterCard
+        :title="t('alerts.medium_severity')"
+        :counter="warningCount"
+        :loading="isLoading"
+        color-classes="text-orange-600 dark:text-orange-400"
+      />
+      <CounterCard :title="t('alerts.muted')" :counter="mutedCount" :loading="isLoading" />
+    </div>
+
+    <!-- Alerts table -->
+    <AlertsTable />
+  </div>
+</template>
diff --git a/frontend/src/components/alerts/AlertNotificationsPanel.vue b/frontend/src/components/alerts/AlertNotificationsPanel.vue
new file mode 100644
index 000000000..69b435443
--- /dev/null
+++ b/frontend/src/components/alerts/AlertNotificationsPanel.vue
@@ -0,0 +1,12 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <!-- Notifications panel — coming soon -->
+  </div>
+</template>
diff --git a/frontend/src/components/alerts/AlertsTable.vue b/frontend/src/components/alerts/AlertsTable.vue
new file mode 100644
index 000000000..2dabaccc8
--- /dev/null
+++ b/frontend/src/components/alerts/AlertsTable.vue
@@ -0,0 +1,425 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  faArrowsRotate,
+  faBellSlash,
+  faCircleCheck,
+  faEye,
+  faMagnifyingGlass,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  NeBadgeV2,
+  NeButton,
+  NeDropdown,
+  NeDropdownFilter,
+  NeEmptyState,
+  NeInlineNotification,
+  NePaginator,
+  NeSortDropdown,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  NeTooltip,
+  type FilterOption,
+  type NeBadgeV2Kind,
+  type NeDropdownItem,
+} from '@nethesis/vue-components'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAlerts } from '@/queries/alerts/alerts'
+import { getAlertSummary, type Alert } from '@/lib/alerts'
+import { formatDateTime, formatTimeAgo } from '@/lib/dateTime'
+import { canManageAlerts, canManageSystems } from '@/lib/permissions'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
+import OrganizationIcon from '@/components/organizations/OrganizationIcon.vue'
+import OrganizationLink from '@/components/applications/OrganizationLink.vue'
+import MuteAlertDrawer from '@/components/alerts/MuteAlertDrawer.vue'
+
+const { t, locale } = useI18n()
+
+const {
+  state,
+  asyncStatus,
+  pageNum,
+  pageSize,
+  sortBy,
+  sortDirection,
+  severityFilters,
+  alertnameFilters,
+  systemKeyFilters,
+  organizationIds,
+  areDefaultFiltersApplied,
+  resetFilters,
+  refetch,
+} = useAlerts()
+
+const alerts = computed(() => state.value.data?.alerts ?? [])
+const pagination = computed(() => state.value.data?.pagination)
+
+const isNoDataEmptyStateShown = computed(
+  () => !alerts.value.length && state.value.status === 'success' && areDefaultFiltersApplied(),
+)
+
+const isNoMatchEmptyStateShown = computed(
+  () => !alerts.value.length && state.value.status === 'success' && !areDefaultFiltersApplied(),
+)
+
+const noEmptyStateShown = computed(
+  () => !isNoDataEmptyStateShown.value && !isNoMatchEmptyStateShown.value,
+)
+
+// ── Filter options ─────────────────────────────────────────────────────────────
+
+const severityFilterOptions: FilterOption[] = [
+  { id: 'critical', label: t('alerts.severity_high') },
+  { id: 'warning', label: t('alerts.severity_medium') },
+  { id: 'info', label: t('alerts.severity_low') },
+]
+
+const alertNameFilterOptions = computed<FilterOption[]>(() => {
+  const names = [...new Set(alerts.value.map((a) => a.labels?.alertname).filter(Boolean))]
+  return names.map((name) => ({ id: name, label: name }))
+})
+
+const systemFilterOptions = computed<FilterOption[]>(() => {
+  const keys = [...new Set(alerts.value.map((a) => a.labels?.system_key).filter(Boolean))]
+  return keys.map((key) => ({ id: key, label: key }))
+})
+
+const organizationFilterOptions = computed<FilterOption[]>(() => {
+  const orgIds = [...new Set(alerts.value.map((a) => a.labels?.organization_id).filter(Boolean))]
+  return orgIds.map((id) => ({ id, label: id }))
+})
+
+// ── Sort ────────────────────────────────────────────────────────────────────────
+
+const sortDescending = computed({
+  get: () => sortDirection.value === 'desc',
+  set: (val: boolean) => {
+    sortDirection.value = val ? 'desc' : 'asc'
+  },
+})
+
+// ── Severity badge ─────────────────────────────────────────────────────────────
+
+function getSeverityBadgeKind(severity?: string): NeBadgeV2Kind {
+  switch (severity?.toLowerCase()) {
+    case 'critical':
+      return 'rose'
+    case 'warning':
+      return 'amber'
+    case 'info':
+      return 'blue'
+    default:
+      return 'gray'
+  }
+}
+
+// ── Mute alert drawer ────────────────────────────────────────────────────────────
+
+const selectedAlert = ref<Alert | undefined>(undefined)
+const isMuteDrawerShown = ref(false)
+
+function showMuteDrawer(alert: Alert) {
+  selectedAlert.value = alert
+  isMuteDrawerShown.value = true
+}
+
+function getKebabMenuItems(alert: Alert): NeDropdownItem[] {
+  const items: NeDropdownItem[] = []
+  if (canManageSystems()) {
+    items.push({
+      id: 'muteAlert',
+      label: t('alerts.mute_alert'),
+      icon: faBellSlash,
+      action: () => showMuteDrawer(alert),
+    })
+  }
+  return items
+}
+
+// ── Reload ──────────────────────────────────────────────────────────────────────
+
+function handleReload() {
+  refetch()
+}
+</script>
+
+<template>
+  <div>
+    <!-- Error notification -->
+    <NeInlineNotification
+      v-if="state.status === 'error'"
+      kind="error"
+      :title="$t('alerts.cannot_retrieve_alerts')"
+      class="mb-6"
+    />
+
+    <!-- Toolbar -->
+    <div class="mb-6 flex items-center gap-4">
+      <div class="flex w-full items-end justify-between gap-4">
+        <!-- Filters -->
+        <div class="flex flex-wrap items-center gap-4">
+          <!-- Severity filter -->
+          <NeDropdownFilter
+            v-model="severityFilters"
+            kind="checkbox"
+            :label="t('alerts.filter_severity')"
+            :options="severityFilterOptions"
+            :show-clear-filter="false"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            @update:model-value="() => (pageNum = 1)"
+          />
+          <!-- Alert name filter -->
+          <NeDropdownFilter
+            v-model="alertnameFilters"
+            kind="checkbox"
+            :label="t('alerts.filter_alert')"
+            :options="alertNameFilterOptions"
+            :show-clear-filter="false"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            @update:model-value="() => (pageNum = 1)"
+          />
+          <!-- System filter -->
+          <NeDropdownFilter
+            v-model="systemKeyFilters"
+            kind="checkbox"
+            :label="t('alerts.filter_system')"
+            :options="systemFilterOptions"
+            :show-clear-filter="false"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            @update:model-value="() => (pageNum = 1)"
+          />
+          <!-- Organization filter -->
+          <NeDropdownFilter
+            v-model="organizationIds"
+            kind="checkbox"
+            :label="t('alerts.filter_organization')"
+            :options="organizationFilterOptions"
+            :show-clear-filter="false"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            @update:model-value="() => (pageNum = 1)"
+          />
+          <!-- Sort -->
+          <NeSortDropdown
+            v-model:sort-key="sortBy"
+            v-model:sort-descending="sortDescending"
+            :label="t('sort.sort')"
+            :options="[
+              { id: 'starts_at', label: t('alerts.started') },
+              { id: 'severity', label: t('alerts.severity') },
+              { id: 'alertname', label: t('alerts.alertname') },
+            ]"
+            :open-menu-aria-label="t('ne_dropdown.open_menu')"
+            :sort-by-label="t('sort.sort_by')"
+            :sort-direction-label="t('sort.direction')"
+            :ascending-label="t('sort.ascending')"
+            :descending-label="t('sort.descending')"
+          />
+          <!-- Reset filters -->
+          <NeButton kind="tertiary" @click="resetFilters">
+            {{ t('common.reset_filters') }}
+          </NeButton>
+        </div>
+        <!-- Right-side actions -->
+        <div class="flex items-center gap-3">
+          <!-- Update indicator -->
+          <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
+          <!-- Reload button -->
+          <NeButton kind="secondary" size="md" @click="handleReload">
+            <template #prefix>
+              <FontAwesomeIcon :icon="faArrowsRotate" class="h-4 w-4" aria-hidden="true" />
+            </template>
+            {{ t('alerts.reload_alerts') }}
+          </NeButton>
+          <!-- Create silence button -->
+          <NeButton v-if="canManageAlerts()" kind="primary" size="md" @click="() => {}">
+            {{ t('alerts.create_silence') }}
+          </NeButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty state: no data -->
+    <NeEmptyState
+      v-if="isNoDataEmptyStateShown"
+      :title="$t('alerts.no_active_alerts')"
+      :description="$t('alerts.no_active_alerts_description')"
+      :icon="faCircleCheck"
+      class="bg-white dark:bg-gray-950"
+    />
+
+    <!-- Empty state: no matches -->
+    <NeEmptyState
+      v-else-if="isNoMatchEmptyStateShown"
+      :title="$t('alerts.no_alerts_found')"
+      :description="$t('common.try_changing_search_filters')"
+      :icon="faMagnifyingGlass"
+      class="bg-white dark:bg-gray-950"
+    >
+      <NeButton kind="tertiary" @click="resetFilters">
+        {{ $t('common.reset_filters') }}
+      </NeButton>
+    </NeEmptyState>
+
+    <!-- Alerts table -->
+    <NeTable
+      v-if="noEmptyStateShown"
+      :sort-key="sortBy"
+      :sort-descending="sortDirection === 'desc'"
+      :aria-label="$t('alerts.title')"
+      card-breakpoint="xl"
+      :loading="state.status === 'pending'"
+      :skeleton-columns="5"
+      :skeleton-rows="7"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ $t('alerts.severity') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('alerts.alertname') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('alerts.system') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('alerts.organization') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('alerts.started') }}</NeTableHeadCell>
+        <NeTableHeadCell>
+          <!-- no header for actions -->
+        </NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="alert in alerts" :key="alert.fingerprint">
+          <!-- Severity -->
+          <NeTableCell :data-label="$t('alerts.severity')">
+            <NeBadgeV2 :kind="getSeverityBadgeKind(alert.labels?.severity)">
+              {{ t(`alerts.severity_${alert.labels?.severity}`) }}
+            </NeBadgeV2>
+          </NeTableCell>
+          <!-- Alert -->
+          <NeTableCell :data-label="$t('alerts.alertname')">
+            <div>
+              <p class="font-medium">{{ alert.labels?.alertname || '-' }}</p>
+              <p
+                v-if="getAlertSummary(alert, locale)"
+                class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5"
+              >
+                {{ getAlertSummary(alert, locale) }}
+              </p>
+            </div>
+          </NeTableCell>
+          <!-- System -->
+          <NeTableCell :data-label="$t('alerts.system')">
+            <router-link
+              v-if="alert.labels?.system_id"
+              :to="{ name: 'system_detail', params: { systemId: alert.labels.system_id } }"
+              class="cursor-pointer font-medium hover:underline"
+            >
+              <div class="flex items-center gap-2">
+                <SystemLogo :system="alert.labels?.system_type" />
+                {{ alert.labels.system_name || alert.labels.system_key }}
+              </div>
+            </router-link>
+            <span v-else>-</span>
+          </NeTableCell>
+          <!-- Organization -->
+          <NeTableCell :data-label="$t('alerts.organization')">
+            <div
+              v-if="alert.labels?.organization_name || alert.labels?.organization_id"
+              class="flex items-center gap-2"
+            >
+              <NeTooltip
+                v-if="alert.labels?.organization_type"
+                placement="top"
+                trigger-event="mouseenter focus"
+                class="shrink-0"
+              >
+                <template #trigger>
+                  <OrganizationIcon :org-type="alert.labels.organization_type" size="sm" />
+                </template>
+                <template #content>
+                  {{ t(`organizations.${alert.labels.organization_type}`) }}
+                </template>
+              </NeTooltip>
+              <OrganizationLink
+                :organization="{
+                  logto_id: alert.labels?.organization_id,
+                  name: alert.labels?.organization_name || alert.labels?.organization_id || '-',
+                  type: alert.labels?.organization_type || '',
+                }"
+              />
+            </div>
+            <span v-else>-</span>
+          </NeTableCell>
+          <!-- Started at -->
+          <NeTableCell :data-label="$t('alerts.started')">
+            <p>{{ formatTimeAgo(alert.startsAt, $t) }}</p>
+            <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5">
+              {{ formatDateTime(new Date(alert.startsAt), locale) }}
+            </p>
+          </NeTableCell>
+          <!-- Actions -->
+          <NeTableCell :data-label="$t('common.actions')">
+            <div class="-ml-2.5 flex gap-2 xl:ml-0 xl:justify-end">
+              <NeButton kind="tertiary" size="sm" @click="() => {}">
+                <template #prefix>
+                  <FontAwesomeIcon :icon="faEye" class="h-4 w-4" aria-hidden="true" />
+                </template>
+                {{ $t('alerts.view_details') }}
+              </NeButton>
+              <!-- kebab menu -->
+              <NeDropdown :items="getKebabMenuItems(alert)" :align-to-right="true" />
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template v-if="pagination" #paginator>
+        <NePaginator
+          :current-page="pageNum"
+          :total-rows="pagination.total_count"
+          :page-size="pageSize"
+          :page-sizes="[10, 25, 50, 100]"
+          :nav-pagination-label="$t('ne_table.pagination')"
+          :next-label="$t('ne_table.go_to_next_page')"
+          :previous-label="$t('ne_table.go_to_previous_page')"
+          :range-of-total-label="$t('ne_table.of')"
+          :page-size-label="$t('ne_table.show')"
+          @select-page="(page: number) => (pageNum = page)"
+          @select-page-size="
+            (size: number) => {
+              pageSize = size
+              pageNum = 1
+            }
+          "
+        />
+      </template>
+    </NeTable>
+
+    <!-- Mute alert drawer -->
+    <MuteAlertDrawer
+      :is-shown="isMuteDrawerShown"
+      :alert="selectedAlert"
+      @close="isMuteDrawerShown = false"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/alerts/MuteAlertDrawer.vue b/frontend/src/components/alerts/MuteAlertDrawer.vue
new file mode 100644
index 000000000..71a126b34
--- /dev/null
+++ b/frontend/src/components/alerts/MuteAlertDrawer.vue
@@ -0,0 +1,178 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeButton,
+  NeInlineNotification,
+  NeSideDrawer,
+  NeTextArea,
+  NeTextInput,
+  focusElement,
+} from '@nethesis/vue-components'
+import { ref, useTemplateRef } from 'vue'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import { useI18n } from 'vue-i18n'
+import {
+  ALERTS_ALERTS_KEY,
+  ALERTS_SILENCES_KEY,
+  ALERTS_TOTALS_KEY,
+  createSystemAlertSilence,
+  type Alert,
+} from '@/lib/alerts'
+import { useNotificationsStore } from '@/stores/notifications'
+
+const { isShown = false, alert = undefined } = defineProps<{
+  isShown: boolean
+  alert: Alert | undefined
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const queryCache = useQueryCache()
+const notificationsStore = useNotificationsStore()
+
+const endsAt = ref('')
+const notes = ref('')
+const endsAtRef = useTemplateRef<HTMLInputElement>('endsAtRef')
+const endsAtError = ref('')
+
+const {
+  mutate: muteAlertMutate,
+  isLoading: muteAlertLoading,
+  reset: muteAlertReset,
+  error: muteAlertError,
+} = useMutation({
+  mutation: async () => {
+    if (!alert?.labels?.system_id) return
+    return createSystemAlertSilence(
+      alert.labels.system_id,
+      alert.fingerprint,
+      notes.value.trim() || undefined,
+      endsAt.value ? new Date(endsAt.value).toISOString() : undefined,
+    )
+  },
+  onSuccess() {
+    const alertname = alert?.labels?.alertname ?? ''
+    setTimeout(() => {
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t('alerts.alert_muted'),
+        description: t('alerts.alert_muted_description', { name: alertname }),
+      })
+    }, 500)
+    closeDrawer()
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [ALERTS_ALERTS_KEY] })
+    queryCache.invalidateQueries({ key: [ALERTS_SILENCES_KEY] })
+    queryCache.invalidateQueries({ key: [ALERTS_TOTALS_KEY] })
+  },
+})
+
+function onShow() {
+  clearErrors()
+  endsAt.value = ''
+  notes.value = ''
+  focusElement(endsAtRef)
+}
+
+function closeDrawer() {
+  emit('close')
+}
+
+function clearErrors() {
+  muteAlertReset()
+  endsAtError.value = ''
+}
+
+function validate(): boolean {
+  clearErrors()
+  if (!endsAt.value) {
+    endsAtError.value = t('alerts.mute_until_date_required')
+    return false
+  }
+  if (new Date(endsAt.value) <= new Date()) {
+    endsAtError.value = t('alerts.mute_until_date_future')
+    return false
+  }
+  return true
+}
+
+function handleSubmit() {
+  if (!validate()) return
+  muteAlertMutate()
+}
+
+function getMinDateTime(): string {
+  const d = new Date(Date.now() + 60_000)
+  return d.toISOString().slice(0, 16)
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="isShown"
+    :title="t('alerts.mute_alert_title', { alertname: alert?.labels?.alertname ?? '' })"
+    :close-aria-label="$t('common.shell.close_side_drawer')"
+    @show="onShow"
+    @close="closeDrawer"
+  >
+    <form @submit.prevent="handleSubmit">
+      <div class="space-y-6">
+        <!-- Mute until date/time -->
+        <NeTextInput
+          ref="endsAtRef"
+          v-model="endsAt"
+          type="datetime-local"
+          :label="t('alerts.mute_until_date')"
+          :min="getMinDateTime()"
+          :invalid-message="endsAtError"
+          :disabled="muteAlertLoading"
+        />
+        <!-- Notes (optional) -->
+        <NeTextArea
+          v-model="notes"
+          :label="t('alerts.mute_notes')"
+          :placeholder="t('alerts.mute_notes_placeholder')"
+          :optional="true"
+          :optional-label="t('common.optional')"
+          :disabled="muteAlertLoading"
+        />
+        <!-- Error notification -->
+        <NeInlineNotification
+          v-if="muteAlertError"
+          kind="error"
+          :title="t('alerts.cannot_mute_alert')"
+          :description="(muteAlertError as Error).message"
+        />
+      </div>
+      <!-- footer -->
+      <hr class="my-8" />
+      <div class="flex justify-end">
+        <NeButton
+          kind="tertiary"
+          size="lg"
+          class="mr-3"
+          :disabled="muteAlertLoading"
+          @click.prevent="closeDrawer"
+        >
+          {{ $t('common.cancel') }}
+        </NeButton>
+        <NeButton
+          type="submit"
+          kind="primary"
+          size="lg"
+          :disabled="muteAlertLoading"
+          :loading="muteAlertLoading"
+          @click.prevent="handleSubmit"
+        >
+          {{ t('alerts.mute_alert') }}
+        </NeButton>
+      </div>
+    </form>
+  </NeSideDrawer>
+</template>
diff --git a/frontend/src/components/shell/SideMenu.vue b/frontend/src/components/shell/SideMenu.vue
index 9bf6b7c7e..599731309 100644
--- a/frontend/src/components/shell/SideMenu.vue
+++ b/frontend/src/components/shell/SideMenu.vue
@@ -21,7 +21,7 @@ import {
   faBuilding as fasBuilding,
   faUserGroup as fasUserGroup,
   faServer as fasServer,
-  faBell,
+  faWarning,
 } from '@fortawesome/free-solid-svg-icons'
 import { faGridOne as fasGridOne } from '@nethesis/nethesis-solid-svg-icons'
 import {
@@ -74,6 +74,15 @@ const navigation = computed(() => {
     })
   }
 
+  if (loginStore.isOwner) {
+    menuItems.push({
+      name: 'alerts.alerts_title',
+      to: 'alerts',
+      solidIcon: faWarning,
+      lightIcon: faWarning,
+    })
+  }
+
   if (canReadApplications()) {
     menuItems.push({
       name: 'applications.title',
@@ -119,15 +128,6 @@ const navigation = computed(() => {
     })
   }
 
-  if (loginStore.isOwner) {
-    menuItems.push({
-      name: 'alerting.alerting_title',
-      to: 'alerting',
-      solidIcon: faBell,
-      lightIcon: faBell,
-    })
-  }
-
   return menuItems
 })
 
diff --git a/frontend/src/components/systems/DisableSystemAlertSilenceModal.vue b/frontend/src/components/systems/DisableSystemAlertSilenceModal.vue
deleted file mode 100644
index 4e7fb928d..000000000
--- a/frontend/src/components/systems/DisableSystemAlertSilenceModal.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import { NeInlineNotification, NeModal } from '@nethesis/vue-components'
-import { useMutation } from '@pinia/colada'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import {
-  deleteSystemAlertSilence,
-  getAlertSilenceIds,
-  getAlertSummary,
-  type Alert,
-} from '@/lib/alerting'
-import { useNotificationsStore } from '@/stores/notifications'
-
-const {
-  visible = false,
-  alert = undefined,
-  systemId = '',
-} = defineProps<{
-  visible: boolean
-  alert: Alert | undefined
-  systemId: string
-}>()
-
-const emit = defineEmits(['close', 'success'])
-
-const { t, locale } = useI18n()
-const notificationsStore = useNotificationsStore()
-
-const alertName = computed(() => {
-  if (!alert) {
-    return '-'
-  }
-  return alert.labels.alertname || getAlertSummary(alert, locale.value) || alert.fingerprint
-})
-
-const silenceIds = computed(() => {
-  return alert ? getAlertSilenceIds(alert) : []
-})
-
-const silenceCountText = computed(() => {
-  return t('alerting.silences_count', { num: silenceIds.value.length }, silenceIds.value.length)
-})
-
-const {
-  mutate: deleteSilenceMutate,
-  isLoading: deleteSilenceLoading,
-  reset: deleteSilenceReset,
-  error: deleteSilenceError,
-} = useMutation({
-  mutation: async ({ systemId, silenceIds }: { systemId: string; silenceIds: string[] }) => {
-    for (const silenceId of silenceIds) {
-      await deleteSystemAlertSilence(systemId, silenceId)
-    }
-  },
-  onSuccess() {
-    const updatedAlertName = alertName.value
-
-    setTimeout(() => {
-      notificationsStore.createNotification({
-        kind: 'success',
-        title: t('alerting.silence_disabled'),
-        description: t('alerting.silence_disabled_description', {
-          name: updatedAlertName,
-        }),
-      })
-    }, 500)
-
-    emit('success')
-  },
-  onError: (error) => {
-    console.error('Error disabling alert silence:', error)
-  },
-})
-
-function onShow() {
-  deleteSilenceReset()
-}
-
-function onPrimaryClick() {
-  if (!alert || !systemId || silenceIds.value.length === 0) {
-    return
-  }
-
-  deleteSilenceMutate({
-    systemId,
-    silenceIds: silenceIds.value,
-  })
-}
-</script>
-
-<template>
-  <NeModal
-    :visible="visible"
-    :title="$t('alerting.disable_silence')"
-    kind="warning"
-    :primary-label="$t('alerting.disable_silence')"
-    :cancel-label="$t('common.cancel')"
-    :primary-button-disabled="deleteSilenceLoading || silenceIds.length === 0"
-    :primary-button-loading="deleteSilenceLoading"
-    :close-aria-label="$t('common.close')"
-    @close="emit('close')"
-    @primary-click="onPrimaryClick"
-    @show="onShow"
-  >
-    <div class="space-y-4">
-      <p>
-        {{ t('alerting.disable_silence_confirmation', { name: alertName }) }}
-      </p>
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        {{ $t('alerting.disable_silence_notice', { count: silenceCountText }) }}
-      </p>
-      <NeInlineNotification
-        v-if="deleteSilenceError?.message"
-        kind="error"
-        :title="$t('alerting.cannot_disable_silence')"
-        :description="deleteSilenceError.message"
-      />
-    </div>
-  </NeModal>
-</template>
diff --git a/frontend/src/components/systems/SilenceSystemAlertModal.vue b/frontend/src/components/systems/SilenceSystemAlertModal.vue
deleted file mode 100644
index 79bf486c5..000000000
--- a/frontend/src/components/systems/SilenceSystemAlertModal.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import { NeInlineNotification, NeModal, NeTextArea, NeTextInput } from '@nethesis/vue-components'
-import { useMutation } from '@pinia/colada'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { createSystemAlertSilence, getAlertSummary, type Alert } from '@/lib/alerting'
-import { useNotificationsStore } from '@/stores/notifications'
-
-const {
-  visible = false,
-  alert = undefined,
-  systemId = '',
-} = defineProps<{
-  visible: boolean
-  alert: Alert | undefined
-  systemId: string
-}>()
-
-const emit = defineEmits(['close', 'success'])
-
-const { t, locale } = useI18n()
-const notificationsStore = useNotificationsStore()
-const comment = ref('')
-const endAt = ref('')
-
-const alertName = computed(() => {
-  if (!alert) {
-    return '-'
-  }
-  return alert.labels.alertname || getAlertSummary(alert, locale.value) || alert.fingerprint
-})
-
-function defaultEndAt() {
-  const d = new Date(Date.now() + 4 * 60 * 60 * 1000)
-  // datetime-local requires "YYYY-MM-DDTHH:MM"
-  return d.toISOString().slice(0, 16)
-}
-
-const {
-  mutate: createSilenceMutate,
-  isLoading: createSilenceLoading,
-  reset: createSilenceReset,
-  error: createSilenceError,
-} = useMutation({
-  mutation: ({
-    systemId,
-    fingerprint,
-    comment,
-    endAt,
-  }: {
-    systemId: string
-    fingerprint: string
-    comment?: string
-    endAt?: string
-  }) => {
-    return createSystemAlertSilence(systemId, fingerprint, comment, endAt)
-  },
-  onSuccess() {
-    const silencedAlertName = alertName.value
-
-    setTimeout(() => {
-      notificationsStore.createNotification({
-        kind: 'success',
-        title: t('alerting.alert_silenced'),
-        description: t('alerting.alert_silenced_description', {
-          name: silencedAlertName,
-        }),
-      })
-    }, 500)
-
-    emit('success')
-  },
-  onError: (error) => {
-    console.error('Error silencing alert:', error)
-  },
-})
-
-function onShow() {
-  comment.value = ''
-  endAt.value = defaultEndAt()
-  createSilenceReset()
-}
-
-function onPrimaryClick() {
-  if (!alert || !systemId) {
-    return
-  }
-
-  // Convert the datetime-local value to a full RFC3339 string
-  const endAtRfc3339 = endAt.value ? new Date(endAt.value).toISOString() : undefined
-
-  createSilenceMutate({
-    systemId,
-    fingerprint: alert.fingerprint,
-    comment: comment.value,
-    endAt: endAtRfc3339,
-  })
-}
-</script>
-
-<template>
-  <NeModal
-    :visible="visible"
-    :title="$t('alerting.silence_alert')"
-    kind="warning"
-    :primary-label="$t('alerting.silence_alert')"
-    :cancel-label="$t('common.cancel')"
-    :primary-button-disabled="createSilenceLoading || !alert"
-    :primary-button-loading="createSilenceLoading"
-    :close-aria-label="$t('common.close')"
-    @close="emit('close')"
-    @primary-click="onPrimaryClick"
-    @show="onShow"
-  >
-    <div class="space-y-4">
-      <p>
-        {{ t('alerting.silence_alert_confirmation', { name: alertName }) }}
-      </p>
-      <NeTextInput
-        v-model="endAt"
-        type="datetime-local"
-        :label="$t('alerting.silence_end_at')"
-        :helper-text="$t('alerting.silence_end_at_helper')"
-      />
-      <NeTextArea
-        v-model="comment"
-        :label="$t('alerting.silence_comment')"
-        :helper-text="$t('alerting.silence_comment_helper')"
-        :optional="true"
-        :optional-label="$t('common.optional')"
-      />
-      <NeInlineNotification
-        v-if="createSilenceError?.message"
-        kind="error"
-        :title="$t('alerting.cannot_silence_alert')"
-        :description="createSilenceError.message"
-      />
-    </div>
-  </NeModal>
-</template>
diff --git a/frontend/src/components/systems/SystemActiveAlertsCard.vue b/frontend/src/components/systems/SystemActiveAlertsCard.vue
deleted file mode 100644
index b2528cdb5..000000000
--- a/frontend/src/components/systems/SystemActiveAlertsCard.vue
+++ /dev/null
@@ -1,429 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import {
-  NeBadgeV2,
-  NeButton,
-  NeCard,
-  NeEmptyState,
-  NeHeading,
-  NeInlineNotification,
-  NeSkeleton,
-  NeTable,
-  NeTableBody,
-  NeTableCell,
-  NeTableHead,
-  NeTableHeadCell,
-  NeTableRow,
-  NeTooltip,
-  type NeBadgeV2Kind,
-} from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faBell,
-  faBellSlash,
-  faExclamationTriangle,
-  faCircleInfo,
-} from '@fortawesome/free-solid-svg-icons'
-import { useSystemDetail } from '@/queries/systems/systemDetail'
-import { useLoginStore } from '@/stores/login'
-import {
-  getAlertDescription,
-  getAlertSilenceIds,
-  getAlertSummary,
-  getSystemActiveAlerts,
-  isAlertSilenced,
-  type Alert,
-} from '@/lib/alerting'
-import { ref, watch, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
-import { canManageSystems } from '@/lib/permissions'
-import SilenceSystemAlertModal from './SilenceSystemAlertModal.vue'
-import DisableSystemAlertSilenceModal from './DisableSystemAlertSilenceModal.vue'
-import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
-
-const { refreshNonce = 0, refreshPending = false } = defineProps<{
-  refreshNonce?: number
-  refreshPending?: boolean
-}>()
-const emit = defineEmits(['alerting-action-success'])
-const { locale, t } = useI18n()
-const loginStore = useLoginStore()
-const { state: systemDetail } = useSystemDetail()
-
-const alerts = ref<Alert[]>([])
-const isLoading = ref(false)
-const error = ref<string | null>(null)
-const currentAlert = ref<Alert | undefined>()
-const isShownSilenceAlertModal = ref(false)
-const isShownDisableSilenceModal = ref(false)
-const loadedSystemId = ref('')
-
-const systemId = computed(() => systemDetail.value.data?.id || '')
-const activeAlertsCount = computed(() => alerts.value.length)
-const silencedAlertsCount = computed(() => alerts.value.filter(isAlertSilenced).length)
-const sortedAlerts = computed(() => {
-  const stateOrder: Record<string, number> = {
-    active: 0,
-    suppressed: 1,
-    unprocessed: 2,
-  }
-
-  return [...alerts.value].sort((firstAlert, secondAlert) => {
-    const firstStateOrder = stateOrder[firstAlert.status?.state?.toLowerCase() || ''] ?? 99
-    const secondStateOrder = stateOrder[secondAlert.status?.state?.toLowerCase() || ''] ?? 99
-
-    if (firstStateOrder !== secondStateOrder) {
-      return firstStateOrder - secondStateOrder
-    }
-
-    const firstStartsAt = firstAlert.startsAt ? Date.parse(firstAlert.startsAt) : 0
-    const secondStartsAt = secondAlert.startsAt ? Date.parse(secondAlert.startsAt) : 0
-    if (firstStartsAt !== secondStartsAt) {
-      return secondStartsAt - firstStartsAt
-    }
-
-    return (firstAlert.labels.alertname || '').localeCompare(secondAlert.labels.alertname || '')
-  })
-})
-let requestId = 0
-
-function getAlertSummaryText(alert: Alert) {
-  return getAlertSummary(alert, locale.value)
-}
-
-function getAlertDescriptionText(alert: Alert) {
-  const description = getAlertDescription(alert, locale.value)
-  return description !== getAlertSummaryText(alert) ? description : ''
-}
-
-async function loadAlerts(sysId: string, options: { reset?: boolean } = {}) {
-  const currentRequestId = ++requestId
-
-  if (!sysId || !loginStore.jwtToken) {
-    alerts.value = []
-    error.value = null
-    isLoading.value = false
-    loadedSystemId.value = ''
-    return
-  }
-
-  isLoading.value = true
-  error.value = null
-  if (options.reset || loadedSystemId.value !== sysId) {
-    alerts.value = []
-  }
-
-  try {
-    const systemAlerts = await getSystemActiveAlerts(sysId)
-    if (currentRequestId !== requestId) {
-      return
-    }
-
-    alerts.value = systemAlerts
-    loadedSystemId.value = sysId
-  } catch (e: unknown) {
-    if (currentRequestId !== requestId) {
-      return
-    }
-
-    error.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    if (currentRequestId === requestId) {
-      isLoading.value = false
-    }
-  }
-}
-
-function showSilenceAlertModal(alert: Alert) {
-  currentAlert.value = alert
-  isShownDisableSilenceModal.value = false
-  isShownSilenceAlertModal.value = true
-}
-
-function closeAlertActionModals() {
-  isShownSilenceAlertModal.value = false
-  isShownDisableSilenceModal.value = false
-  currentAlert.value = undefined
-}
-
-function onAlertActionSuccess() {
-  closeAlertActionModals()
-  emit('alerting-action-success')
-}
-
-watch(
-  systemId,
-  (sysId) => {
-    void loadAlerts(sysId)
-  },
-  { immediate: true },
-)
-
-watch(
-  () => refreshPending,
-  (pending) => {
-    if (!pending || !systemId.value) {
-      return
-    }
-
-    requestId += 1
-    isLoading.value = true
-    error.value = null
-    alerts.value = []
-  },
-)
-
-watch(
-  () => refreshNonce,
-  () => {
-    if (!systemId.value) {
-      return
-    }
-
-    void loadAlerts(systemId.value, { reset: true })
-  },
-)
-
-function getSeverityBadgeKind(severity: string | undefined): NeBadgeV2Kind {
-  switch (severity?.toLowerCase()) {
-    case 'critical':
-      return 'rose'
-    case 'warning':
-      return 'amber'
-    case 'info':
-      return 'blue'
-    default:
-      return 'gray'
-  }
-}
-
-function getStateBadgeKind(state: string | undefined): NeBadgeV2Kind {
-  switch (state?.toLowerCase()) {
-    case 'active':
-      return 'rose'
-    case 'suppressed':
-      return 'gray'
-    case 'unprocessed':
-      return 'amber'
-    default:
-      return 'gray'
-  }
-}
-
-function getAlertStateLabel(state: string | undefined) {
-  switch (state?.toLowerCase()) {
-    case 'active':
-      return t('alerting.state_active')
-    case 'suppressed':
-      return t('alerting.state_suppressed')
-    case 'unprocessed':
-      return t('alerting.state_unprocessed')
-    default:
-      return state || '-'
-  }
-}
-
-function getAlertSilenceCountText(alert: Alert) {
-  const silenceIds = getAlertSilenceIds(alert)
-  if (!silenceIds.length) {
-    return '-'
-  }
-
-  return t('alerting.silences_count', { num: silenceIds.length }, silenceIds.length)
-}
-
-function isSuppressed(alert: Alert) {
-  return alert.status?.state?.toLowerCase() === 'suppressed'
-}
-
-function formatAlertDetails(alert: Alert): string {
-  const lines: string[] = []
-
-  // Labels section
-  if (Object.keys(alert.labels).length > 0) {
-    lines.push('Labels:')
-    Object.entries(alert.labels).forEach(([key, value]) => {
-      lines.push(`  ${key}: ${value}`)
-    })
-  }
-
-  // Annotations section
-  if (Object.keys(alert.annotations).length > 0) {
-    lines.push('Annotations:')
-    Object.entries(alert.annotations).forEach(([key, value]) => {
-      lines.push(`  ${key}: ${value}`)
-    })
-  }
-
-  // Fingerprint
-  if (alert.fingerprint) {
-    lines.push(`Fingerprint: ${alert.fingerprint}`)
-  }
-
-  // Generator URL
-  if (alert.generatorURL) {
-    lines.push(`Generator: ${alert.generatorURL}`)
-  }
-
-  return lines.join('\n') || 'No additional details'
-}
-</script>
-
-<template>
-  <NeCard class="col-span-full">
-    <div class="mb-4 flex flex-col items-start justify-between gap-4 xl:flex-row">
-      <div class="flex flex-wrap items-center gap-2">
-        <FontAwesomeIcon :icon="faBell" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
-        <NeHeading tag="h6">{{ $t('alerting.active_alerts_card_title') }}</NeHeading>
-        <NeBadgeV2 :kind="activeAlertsCount ? 'rose' : 'gray'" size="xs">
-          {{ activeAlertsCount }}
-        </NeBadgeV2>
-        <NeBadgeV2 v-if="silencedAlertsCount" kind="gray" size="xs">
-          {{
-            $t('alerting.silenced_alerts_count', { num: silencedAlertsCount }, silencedAlertsCount)
-          }}
-        </NeBadgeV2>
-        <NeBadgeV2 kind="gray" size="xs" class="ml-1">ALPHA</NeBadgeV2>
-      </div>
-      <UpdatingSpinner v-if="isLoading && alerts.length > 0" />
-    </div>
-
-    <NeInlineNotification
-      v-if="error"
-      kind="error"
-      :title="$t('alerting.cannot_retrieve_system_alerts')"
-      :description="error"
-      class="mb-4"
-    />
-
-    <NeSkeleton v-if="isLoading && !alerts.length" :lines="6" />
-    <NeEmptyState
-      v-else-if="!alerts.length && !error"
-      :title="$t('alerting.no_active_alerts')"
-      :description="$t('alerting.no_active_alerts_description')"
-      :icon="faBell"
-    />
-    <NeTable
-      v-else-if="alerts.length"
-      :aria-label="$t('alerting.active_alerts_card_title')"
-      card-breakpoint="lg"
-    >
-      <NeTableHead>
-        <NeTableHeadCell>{{ $t('alerting.alertname') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.severity') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('common.status') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.summary') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.starts_at') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.silences') }}</NeTableHeadCell>
-        <NeTableHeadCell v-if="canManageSystems()">{{ $t('common.actions') }}</NeTableHeadCell>
-      </NeTableHead>
-      <NeTableBody>
-        <NeTableRow
-          v-for="alert in sortedAlerts"
-          :key="alert.fingerprint"
-          :class="isSuppressed(alert) ? 'opacity-50' : ''"
-        >
-          <NeTableCell :data-label="$t('alerting.alertname')">
-            <div class="flex items-center gap-2">
-              <FontAwesomeIcon
-                :icon="faExclamationTriangle"
-                class="h-4 w-4 shrink-0 text-amber-500"
-                aria-hidden="true"
-              />
-              <span class="font-medium">{{ alert.labels.alertname || '-' }}</span>
-            </div>
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.severity')">
-            <NeBadgeV2
-              v-if="alert.labels.severity"
-              :kind="getSeverityBadgeKind(alert.labels.severity)"
-              size="xs"
-            >
-              {{ alert.labels.severity }}
-            </NeBadgeV2>
-            <span v-else>-</span>
-          </NeTableCell>
-          <NeTableCell :data-label="$t('common.status')">
-            <NeBadgeV2 :kind="getStateBadgeKind(alert.status?.state)" size="xs">
-              {{ getAlertStateLabel(alert.status?.state) }}
-            </NeBadgeV2>
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.summary')">
-            <div class="space-y-1">
-              <div class="flex items-start justify-between gap-2">
-                <div class="flex-1">
-                  <div class="dark:text-tertiary-neutral font-medium text-gray-700">
-                    {{ getAlertSummaryText(alert) || '-' }}
-                  </div>
-                  <div
-                    v-if="getAlertDescriptionText(alert)"
-                    class="text-tertiary-neutral text-sm dark:text-gray-400"
-                  >
-                    {{ getAlertDescriptionText(alert) }}
-                  </div>
-                </div>
-                <NeTooltip :placement="'left'" :trigger-event="'click'" class="shrink-0">
-                  <template #trigger>
-                    <NeButton
-                      kind="tertiary"
-                      size="sm"
-                      class="!p-2"
-                      :title="$t('alerting.view_alert_details')"
-                    >
-                      <FontAwesomeIcon :icon="faCircleInfo" aria-hidden="true" />
-                    </NeButton>
-                  </template>
-                  <template #content>
-                    <div
-                      class="max-w-sm rounded bg-gray-900 p-2 text-sm break-words whitespace-pre-wrap text-gray-50 dark:bg-gray-800"
-                    >
-                      {{ formatAlertDetails(alert) }}
-                    </div>
-                  </template>
-                </NeTooltip>
-              </div>
-            </div>
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.starts_at')">
-            {{ alert.startsAt ? formatDateTimeNoSeconds(new Date(alert.startsAt), locale) : '-' }}
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.silences')">
-            <NeBadgeV2 v-if="isAlertSilenced(alert)" kind="gray" size="xs">
-              {{ getAlertSilenceCountText(alert) }}
-            </NeBadgeV2>
-            <span v-else>-</span>
-          </NeTableCell>
-          <NeTableCell v-if="canManageSystems()" :data-label="$t('common.actions')">
-            <div v-if="!isSuppressed(alert)" class="-ml-2.5 flex gap-2 xl:ml-0 xl:justify-end">
-              <NeButton kind="tertiary" size="sm" @click="showSilenceAlertModal(alert)">
-                <template #prefix>
-                  <FontAwesomeIcon :icon="faBellSlash" aria-hidden="true" />
-                </template>
-                {{ $t('alerting.silence_alert') }}
-              </NeButton>
-            </div>
-          </NeTableCell>
-        </NeTableRow>
-      </NeTableBody>
-    </NeTable>
-    <SilenceSystemAlertModal
-      :visible="isShownSilenceAlertModal"
-      :alert="currentAlert"
-      :system-id="systemId"
-      @close="closeAlertActionModals"
-      @success="onAlertActionSuccess"
-    />
-    <DisableSystemAlertSilenceModal
-      :visible="isShownDisableSilenceModal"
-      :alert="currentAlert"
-      :system-id="systemId"
-      @close="closeAlertActionModals"
-      @success="onAlertActionSuccess"
-    />
-  </NeCard>
-</template>
diff --git a/frontend/src/components/systems/SystemAlertHistoryPanel.vue b/frontend/src/components/systems/SystemAlertHistoryPanel.vue
deleted file mode 100644
index cbedf88b6..000000000
--- a/frontend/src/components/systems/SystemAlertHistoryPanel.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import {
-  NeBadgeV2,
-  NeCard,
-  NeTable,
-  NeTableHead,
-  NeTableHeadCell,
-  NeTableBody,
-  NeTableRow,
-  NeTableCell,
-  NePaginator,
-  NeEmptyState,
-  NeHeading,
-  NeInlineNotification,
-  NeSkeleton,
-  type NeBadgeV2Kind,
-} from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faBell } from '@fortawesome/free-solid-svg-icons'
-import { useAlertHistory } from '@/queries/systems/alertHistory'
-import { getAlertSummary } from '@/lib/alerting'
-import { useI18n } from 'vue-i18n'
-import { onBeforeUnmount, ref } from 'vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
-import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
-import SystemActiveAlertsCard from './SystemActiveAlertsCard.vue'
-import SystemAlertSilencesCard from './SystemAlertSilencesCard.vue'
-
-const { locale } = useI18n()
-const { state, asyncStatus, pageNum, pageSize } = useAlertHistory()
-const alertingRefreshNonce = ref(0)
-const isAlertingRefreshPending = ref(false)
-let alertingRefreshTimer: ReturnType<typeof setTimeout> | null = null
-
-function scheduleAlertingRefresh() {
-  if (alertingRefreshTimer) {
-    clearTimeout(alertingRefreshTimer)
-  }
-
-  isAlertingRefreshPending.value = true
-  alertingRefreshTimer = setTimeout(() => {
-    alertingRefreshNonce.value += 1
-    isAlertingRefreshPending.value = false
-    alertingRefreshTimer = null
-  }, 1000)
-}
-
-onBeforeUnmount(() => {
-  if (alertingRefreshTimer) {
-    clearTimeout(alertingRefreshTimer)
-  }
-})
-
-function getSeverityBadgeKind(severity: string | null | undefined): NeBadgeV2Kind {
-  switch (severity?.toLowerCase()) {
-    case 'critical':
-      return 'rose'
-    case 'warning':
-      return 'amber'
-    case 'info':
-      return 'blue'
-    default:
-      return 'gray'
-  }
-}
-</script>
-
-<template>
-  <div>
-    <SystemActiveAlertsCard
-      class="mb-8"
-      :refresh-nonce="alertingRefreshNonce"
-      :refresh-pending="isAlertingRefreshPending"
-      @alerting-action-success="scheduleAlertingRefresh"
-    />
-    <SystemAlertSilencesCard
-      class="mb-8"
-      :refresh-nonce="alertingRefreshNonce"
-      :refresh-pending="isAlertingRefreshPending"
-      @alerting-action-success="scheduleAlertingRefresh"
-    />
-
-    <NeCard class="col-span-full">
-      <div class="mb-4 flex flex-col items-start justify-between gap-4 xl:flex-row">
-        <div>
-          <NeHeading tag="h6" class="mb-2">{{ $t('alerting.alert_history') }}</NeHeading>
-          <div class="max-w-2xl text-gray-500 dark:text-gray-400">
-            {{ $t('alerting.history_tab_description') }}
-          </div>
-        </div>
-        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
-      </div>
-
-      <!-- error -->
-      <NeInlineNotification
-        v-if="state.status === 'error'"
-        kind="error"
-        :title="$t('alerting.cannot_retrieve_alert_history')"
-        :description="state.error?.message"
-        class="mb-4"
-      />
-
-      <!-- loading skeleton -->
-      <NeSkeleton v-else-if="state.status === 'pending'" :lines="8" />
-
-      <!-- empty state -->
-      <NeEmptyState
-        v-else-if="!state.data?.alerts.length"
-        :title="$t('alerting.no_alert_history')"
-        :description="$t('alerting.no_alert_history_description')"
-        :icon="faBell"
-      />
-
-      <!-- table -->
-      <template v-else>
-        <NeTable :aria-label="$t('alerting.alert_history')" card-breakpoint="md">
-          <NeTableHead>
-            <NeTableHeadCell>{{ $t('alerting.alertname') }}</NeTableHeadCell>
-            <NeTableHeadCell>{{ $t('alerting.severity') }}</NeTableHeadCell>
-            <NeTableHeadCell>{{ $t('common.status') }}</NeTableHeadCell>
-            <NeTableHeadCell>{{ $t('alerting.summary') }}</NeTableHeadCell>
-            <NeTableHeadCell>{{ $t('alerting.starts_at') }}</NeTableHeadCell>
-            <NeTableHeadCell>{{ $t('alerting.ends_at') }}</NeTableHeadCell>
-          </NeTableHead>
-          <NeTableBody>
-            <NeTableRow v-for="alert in state.data.alerts" :key="alert.id">
-              <NeTableCell :data-label="$t('alerting.alertname')">
-                <div class="flex items-center gap-2">
-                  <FontAwesomeIcon
-                    :icon="faBell"
-                    class="h-4 w-4 shrink-0 text-gray-400"
-                    aria-hidden="true"
-                  />
-                  <span class="font-medium">{{ alert.alertname }}</span>
-                </div>
-              </NeTableCell>
-              <NeTableCell :data-label="$t('alerting.severity')">
-                <NeBadgeV2
-                  v-if="alert.severity"
-                  :kind="getSeverityBadgeKind(alert.severity)"
-                  size="xs"
-                >
-                  {{ alert.severity }}
-                </NeBadgeV2>
-                <span v-else>-</span>
-              </NeTableCell>
-              <NeTableCell :data-label="$t('common.status')">
-                <NeBadgeV2 kind="gray" size="xs">{{ alert.status }}</NeBadgeV2>
-              </NeTableCell>
-              <NeTableCell :data-label="$t('alerting.summary')">
-                {{ getAlertSummary(alert, locale) || alert.summary || '-' }}
-              </NeTableCell>
-              <NeTableCell :data-label="$t('alerting.starts_at')">
-                {{
-                  alert.starts_at ? formatDateTimeNoSeconds(new Date(alert.starts_at), locale) : '-'
-                }}
-              </NeTableCell>
-              <NeTableCell :data-label="$t('alerting.ends_at')">
-                {{ alert.ends_at ? formatDateTimeNoSeconds(new Date(alert.ends_at), locale) : '-' }}
-              </NeTableCell>
-            </NeTableRow>
-          </NeTableBody>
-        </NeTable>
-
-        <!-- pagination -->
-        <NePaginator
-          v-if="state.data.pagination"
-          :current-page="pageNum"
-          :total-rows="state.data.pagination.total_count"
-          :page-size="pageSize"
-          :page-sizes="[5, 10, 25, 50, 100]"
-          :nav-pagination-label="$t('ne_table.pagination')"
-          :next-label="$t('ne_table.go_to_next_page')"
-          :previous-label="$t('ne_table.go_to_previous_page')"
-          :range-of-total-label="$t('ne_table.of')"
-          :page-size-label="$t('ne_table.show')"
-          class="mt-6"
-          @select-page="pageNum = $event"
-          @select-page-size="pageSize = $event"
-        />
-      </template>
-    </NeCard>
-  </div>
-</template>
diff --git a/frontend/src/components/systems/SystemAlertSilencesCard.vue b/frontend/src/components/systems/SystemAlertSilencesCard.vue
deleted file mode 100644
index 3f29bba42..000000000
--- a/frontend/src/components/systems/SystemAlertSilencesCard.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import {
-  NeBadgeV2,
-  NeButton,
-  NeCard,
-  NeEmptyState,
-  NeHeading,
-  NeInlineNotification,
-  NeSkeleton,
-  NeTable,
-  NeTableBody,
-  NeTableCell,
-  NeTableHead,
-  NeTableHeadCell,
-  NeTableRow,
-  type NeBadgeV2Kind,
-} from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faBellSlash, faTrash } from '@fortawesome/free-solid-svg-icons'
-import { useSystemDetail } from '@/queries/systems/systemDetail'
-import { useLoginStore } from '@/stores/login'
-import {
-  deleteSystemAlertSilence,
-  getSystemAlertSilences,
-  type AlertmanagerSilence,
-} from '@/lib/alerting'
-import { ref, watch, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
-import { canManageSystems } from '@/lib/permissions'
-import { useNotificationsStore } from '@/stores/notifications'
-import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
-
-const { refreshNonce = 0, refreshPending = false } = defineProps<{
-  refreshNonce?: number
-  refreshPending?: boolean
-}>()
-const emit = defineEmits(['alerting-action-success'])
-const { locale, t } = useI18n()
-const loginStore = useLoginStore()
-const notificationsStore = useNotificationsStore()
-const { state: systemDetail } = useSystemDetail()
-
-const silences = ref<AlertmanagerSilence[]>([])
-const isLoading = ref(false)
-const error = ref<string | null>(null)
-const deletingId = ref<string | null>(null)
-const loadedSystemId = ref('')
-let requestId = 0
-
-const systemId = computed(() => systemDetail.value.data?.id || '')
-
-function getSilenceBadgeKind(state: string | undefined): NeBadgeV2Kind {
-  switch (state?.toLowerCase()) {
-    case 'active':
-      return 'green'
-    case 'pending':
-      return 'amber'
-    default:
-      return 'gray'
-  }
-}
-
-function getSilenceStateLabel(state: string | undefined) {
-  switch (state?.toLowerCase()) {
-    case 'active':
-      return t('alerting.silence_status_active')
-    case 'pending':
-      return t('alerting.silence_status_pending')
-    default:
-      return state || '-'
-  }
-}
-
-function getSilencedAlertName(silence: AlertmanagerSilence): string {
-  return silence.matchers.find((m) => m.name === 'alertname')?.value || '-'
-}
-
-async function loadSilences(sysId: string, options: { reset?: boolean } = {}) {
-  const currentRequestId = ++requestId
-
-  if (!sysId || !loginStore.jwtToken) {
-    silences.value = []
-    error.value = null
-    isLoading.value = false
-    loadedSystemId.value = ''
-    return
-  }
-
-  isLoading.value = true
-  error.value = null
-  if (options.reset || loadedSystemId.value !== sysId) {
-    silences.value = []
-  }
-
-  try {
-    const result = await getSystemAlertSilences(sysId)
-    if (currentRequestId !== requestId) {
-      return
-    }
-    silences.value = result
-    loadedSystemId.value = sysId
-  } catch (e: unknown) {
-    if (currentRequestId !== requestId) {
-      return
-    }
-    error.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    if (currentRequestId === requestId) {
-      isLoading.value = false
-    }
-  }
-}
-
-async function deleteSilence(silenceId: string) {
-  const sysId = systemId.value
-  if (!sysId) {
-    return
-  }
-
-  deletingId.value = silenceId
-
-  try {
-    await deleteSystemAlertSilence(sysId, silenceId)
-    notificationsStore.createNotification({
-      kind: 'success',
-      title: t('alerting.silence_deleted'),
-      description: t('alerting.silence_deleted_description'),
-    })
-    emit('alerting-action-success')
-  } catch (e: unknown) {
-    notificationsStore.createNotification({
-      kind: 'error',
-      title: t('alerting.cannot_delete_silence'),
-      description: e instanceof Error ? e.message : String(e),
-    })
-  } finally {
-    deletingId.value = null
-  }
-}
-
-watch(
-  systemId,
-  (sysId) => {
-    void loadSilences(sysId)
-  },
-  { immediate: true },
-)
-
-watch(
-  () => refreshPending,
-  (pending) => {
-    if (!pending || !systemId.value) {
-      return
-    }
-
-    requestId += 1
-    isLoading.value = true
-    error.value = null
-    silences.value = []
-  },
-)
-
-watch(
-  () => refreshNonce,
-  () => {
-    if (!systemId.value) {
-      return
-    }
-
-    void loadSilences(systemId.value, { reset: true })
-  },
-)
-</script>
-
-<template>
-  <NeCard class="col-span-full">
-    <div class="mb-4 flex flex-col items-start justify-between gap-4 xl:flex-row">
-      <div class="flex flex-wrap items-center gap-2">
-        <FontAwesomeIcon :icon="faBellSlash" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
-        <NeHeading tag="h6">{{ $t('alerting.silences_card_title') }}</NeHeading>
-        <NeBadgeV2 kind="gray" size="xs">{{ silences.length }}</NeBadgeV2>
-      </div>
-      <UpdatingSpinner v-if="isLoading && silences.length > 0" />
-    </div>
-
-    <NeInlineNotification
-      v-if="error"
-      kind="error"
-      :title="$t('alerting.cannot_retrieve_silences')"
-      :description="error"
-      class="mb-4"
-    />
-
-    <NeSkeleton v-if="isLoading && !silences.length" :lines="4" />
-    <NeEmptyState
-      v-else-if="!silences.length && !error"
-      :title="$t('alerting.no_silences')"
-      :description="$t('alerting.no_silences_description')"
-      :icon="faBellSlash"
-    />
-    <NeTable
-      v-else-if="silences.length"
-      :aria-label="$t('alerting.silences_card_title')"
-      card-breakpoint="lg"
-    >
-      <NeTableHead>
-        <NeTableHeadCell>{{ $t('alerting.alertname') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('common.status') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.silence_comment') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.silence_created_by') }}</NeTableHeadCell>
-        <NeTableHeadCell>{{ $t('alerting.ends_at') }}</NeTableHeadCell>
-        <NeTableHeadCell v-if="canManageSystems()">{{ $t('common.actions') }}</NeTableHeadCell>
-      </NeTableHead>
-      <NeTableBody>
-        <NeTableRow v-for="silence in silences" :key="silence.id">
-          <NeTableCell :data-label="$t('alerting.alertname')">
-            <span class="font-medium">{{ getSilencedAlertName(silence) }}</span>
-          </NeTableCell>
-          <NeTableCell :data-label="$t('common.status')">
-            <NeBadgeV2 :kind="getSilenceBadgeKind(silence.status?.state)" size="xs">
-              {{ getSilenceStateLabel(silence.status?.state) }}
-            </NeBadgeV2>
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.silence_comment')">
-            {{ silence.comment || '-' }}
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.silence_created_by')">
-            {{ silence.createdBy || '-' }}
-          </NeTableCell>
-          <NeTableCell :data-label="$t('alerting.ends_at')">
-            {{ silence.endsAt ? formatDateTimeNoSeconds(new Date(silence.endsAt), locale) : '-' }}
-          </NeTableCell>
-          <NeTableCell v-if="canManageSystems()" :data-label="$t('common.actions')">
-            <div class="-ml-2.5 flex gap-2 xl:ml-0 xl:justify-end">
-              <NeButton
-                kind="tertiary"
-                size="sm"
-                :disabled="deletingId === silence.id"
-                :loading="deletingId === silence.id"
-                @click="deleteSilence(silence.id)"
-              >
-                <template #prefix>
-                  <FontAwesomeIcon :icon="faTrash" aria-hidden="true" />
-                </template>
-                {{ $t('alerting.disable_silence') }}
-              </NeButton>
-            </div>
-          </NeTableCell>
-        </NeTableRow>
-      </NeTableBody>
-    </NeTable>
-  </NeCard>
-</template>
diff --git a/frontend/src/components/systems/SystemBackupsPanel.vue b/frontend/src/components/systems/SystemBackupsPanel.vue
index fd0c6f805..0949d46dd 100644
--- a/frontend/src/components/systems/SystemBackupsPanel.vue
+++ b/frontend/src/components/systems/SystemBackupsPanel.vue
@@ -6,20 +6,18 @@
 <script setup lang="ts">
 import {
   NeButton,
-  NeCard,
   NeDropdown,
   type NeDropdownItem,
   NeEmptyState,
-  NeHeading,
   NeInlineNotification,
-  NeSkeleton,
+  NeProgressBar,
   NeTable,
   NeTableBody,
   NeTableCell,
   NeTableHead,
   NeTableHeadCell,
   NeTableRow,
-  NeTooltip,
+  byteFormat1024,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -34,9 +32,7 @@ import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   BACKUP_MAX_SIZE_PER_SYSTEM,
-  BACKUP_MAX_SLOTS_PER_SYSTEM,
   deleteBackup,
-  formatBackupSize,
   getBackupDownloadUrl,
   SYSTEM_BACKUPS_KEY,
   type BackupMetadata,
@@ -58,11 +54,19 @@ function refresh() {
   queryCache.invalidateQueries({ key: [SYSTEM_BACKUPS_KEY] })
 }
 
-const maxSlotsLabel = BACKUP_MAX_SLOTS_PER_SYSTEM
-const maxSizeLabel = formatBackupSize(BACKUP_MAX_SIZE_PER_SYSTEM)
-
-const slotsUsed = computed(() => state.value.data?.slots_used ?? 0)
 const quotaUsedBytes = computed(() => state.value.data?.quota_used_bytes ?? 0)
+const quotaPercentage = computed(() => {
+  const used = quotaUsedBytes.value
+  return Math.round((used / BACKUP_MAX_SIZE_PER_SYSTEM) * 100)
+})
+
+const isEmptyStateShown = computed(() => {
+  return !state.value.data?.backups?.length && state.value.status === 'success'
+})
+
+const isTableShown = computed(() => {
+  return state.value.status !== 'error' && !isEmptyStateShown.value
+})
 
 // Download flow: ask backend for a short-lived presigned URL and follow
 // it from the browser. We do not inline the redirect because the
@@ -168,158 +172,115 @@ function getKebabMenuItems(backup: BackupMetadata): NeDropdownItem[] {
 </script>
 
 <template>
-  <NeCard>
-    <div class="mb-6 flex flex-col items-start justify-between gap-4 xl:flex-row">
-      <div>
-        <NeHeading tag="h6" class="mb-2">{{ $t('backups.title') }}</NeHeading>
-        <div class="max-w-2xl text-gray-500 dark:text-gray-400">
-          {{ $t('backups.page_description') }}
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
-        <NeButton
-          kind="tertiary"
-          size="sm"
-          :disabled="asyncStatus === 'loading'"
-          @click="refresh()"
-        >
-          <template #prefix>
-            <FontAwesomeIcon :icon="faArrowsRotate" aria-hidden="true" />
-          </template>
-          {{ $t('backups.refresh') }}
-        </NeButton>
-      </div>
+  <!-- page description -->
+  <div class="mb-6">
+    <div class="max-w-2xl text-gray-500 dark:text-gray-400">
+      {{ $t('backups.page_description') }}
     </div>
+  </div>
 
-    <!-- retention / usage summary -->
-    <div
-      v-if="state.status === 'success' && state.data"
-      class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-3"
-    >
-      <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
-        <div class="text-xs text-gray-500 dark:text-gray-400">
-          {{ $t('backups.slots_usage') }}
-        </div>
-        <div class="mt-1 text-lg font-medium">
-          {{
-            $t('backups.slots_used_of_max', {
-              used: slotsUsed,
-              max: maxSlotsLabel,
-            })
-          }}
-        </div>
-      </div>
-      <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
-        <div class="text-xs text-gray-500 dark:text-gray-400">
+  <!-- storage usage progress bar and reload button -->
+  <div class="mb-6 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
+    <div class="flex-1 md:max-w-64">
+      <div class="mb-2 flex items-center justify-between">
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
           {{ $t('backups.storage_usage') }}
-        </div>
-        <div class="mt-1 text-lg font-medium">
-          {{ formatBackupSize(quotaUsedBytes) }} / {{ maxSizeLabel }}
-        </div>
-      </div>
-      <div class="rounded-md border border-gray-200 p-3 sm:col-span-1 dark:border-gray-700">
-        <div class="text-xs text-gray-500 dark:text-gray-400">
-          {{ $t('backups.retention_policy') }}
-        </div>
-        <div class="text-tertiary-neutral dark:text-tertiary-neutral mt-1 text-sm">
-          {{
-            $t('backups.retention_policy_description', {
-              slots: maxSlotsLabel,
-              size: maxSizeLabel,
-            })
-          }}
-        </div>
+        </span>
+        <span class="text-sm text-gray-500 dark:text-gray-400">
+          {{ byteFormat1024(quotaUsedBytes) }} / {{ byteFormat1024(BACKUP_MAX_SIZE_PER_SYSTEM) }}
+        </span>
       </div>
+      <NeProgressBar :progress="quotaPercentage" size="sm" />
     </div>
 
-    <!-- error -->
-    <NeInlineNotification
-      v-if="state.status === 'error'"
-      kind="error"
-      :title="$t('backups.cannot_retrieve_backups')"
-      :description="state.error?.message"
-      class="mb-4"
-    />
+    <div class="flex items-center justify-end gap-4">
+      <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
+      <NeButton kind="tertiary" :disabled="asyncStatus === 'loading'" @click="refresh()">
+        <template #prefix>
+          <FontAwesomeIcon :icon="faArrowsRotate" aria-hidden="true" />
+        </template>
+        {{ $t('backups.reload_backups') }}
+      </NeButton>
+    </div>
+  </div>
 
-    <!-- loading skeleton -->
-    <NeSkeleton v-else-if="state.status === 'pending'" :lines="8" />
+  <!-- error -->
+  <NeInlineNotification
+    v-if="state.status === 'error'"
+    kind="error"
+    :title="$t('backups.cannot_retrieve_backups')"
+    :description="state.error?.message"
+    class="mb-4"
+  />
 
-    <!-- empty -->
-    <NeEmptyState
-      v-else-if="!state.data?.backups?.length"
-      :title="$t('backups.no_backups')"
-      :description="$t('backups.no_backups_description')"
-      :icon="faBoxArchive"
-    />
+  <!-- empty state -->
+  <NeEmptyState
+    v-else-if="isEmptyStateShown"
+    :title="$t('backups.no_backups')"
+    :description="$t('backups.no_backups_description')"
+    :icon="faBoxArchive"
+  />
 
-    <!-- table -->
-    <template v-else>
-      <NeTable :aria-label="$t('backups.title')" card-breakpoint="md">
-        <NeTableHead>
-          <NeTableHeadCell>{{ $t('backups.uploaded_at') }}</NeTableHeadCell>
-          <NeTableHeadCell>{{ $t('backups.filename') }}</NeTableHeadCell>
-          <NeTableHeadCell>{{ $t('backups.size') }}</NeTableHeadCell>
-          <NeTableHeadCell>{{ $t('backups.sha256') }}</NeTableHeadCell>
-          <NeTableHeadCell>
-            <!-- no header for actions -->
-          </NeTableHeadCell>
-        </NeTableHead>
-        <NeTableBody>
-          <NeTableRow v-for="backup in state.data.backups" :key="backup.id">
-            <NeTableCell :data-label="$t('backups.uploaded_at')">
-              {{ formatDateTimeNoSeconds(new Date(backup.uploaded_at), locale) }}
-            </NeTableCell>
-            <NeTableCell :data-label="$t('backups.filename')">
-              <div class="flex items-center gap-2">
-                <FontAwesomeIcon
-                  :icon="faBoxArchive"
-                  class="h-4 w-4 shrink-0 text-gray-400"
-                  aria-hidden="true"
-                />
-                <span class="font-medium break-all">{{ backup.filename || backup.id }}</span>
-              </div>
-            </NeTableCell>
-            <NeTableCell :data-label="$t('backups.size')">
-              {{ formatBackupSize(backup.size) }}
-            </NeTableCell>
-            <NeTableCell :data-label="$t('backups.sha256')">
-              <NeTooltip v-if="backup.sha256" placement="top">
-                <template #trigger>
-                  <code class="text-xs">{{ backup.sha256.slice(0, 12) }}…</code>
-                </template>
-                <template #content>
-                  <code class="text-xs break-all">{{ backup.sha256 }}</code>
-                </template>
-              </NeTooltip>
-              <span v-else>-</span>
-            </NeTableCell>
-            <NeTableCell :data-label="$t('backups.actions')">
-              <div class="flex justify-end">
-                <NeDropdown :items="getKebabMenuItems(backup)" :align-to-right="true" />
-              </div>
-            </NeTableCell>
-          </NeTableRow>
-        </NeTableBody>
-      </NeTable>
-    </template>
+  <!-- table -->
+  <template v-if="isTableShown">
+    <NeTable
+      :aria-label="$t('backups.title')"
+      card-breakpoint="md"
+      :loading="state.status === 'pending'"
+      :skeleton-columns="4"
+      :skeleton-rows="7"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ $t('backups.date') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('backups.filename') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('backups.size') }}</NeTableHeadCell>
+        <NeTableHeadCell>
+          <!-- no header for actions -->
+        </NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="backup in state.data?.backups" :key="backup.id">
+          <NeTableCell :data-label="$t('backups.date')">
+            {{ formatDateTimeNoSeconds(new Date(backup.uploaded_at), locale) }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('backups.filename')">
+            <div class="flex items-center gap-2">
+              <FontAwesomeIcon
+                :icon="faBoxArchive"
+                class="h-4 w-4 shrink-0 text-gray-400"
+                aria-hidden="true"
+              />
+              <span class="font-medium break-all">{{ backup.filename || backup.id }}</span>
+            </div>
+          </NeTableCell>
+          <NeTableCell :data-label="$t('backups.size')">
+            {{ byteFormat1024(backup.size) }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('backups.actions')">
+            <div class="-ml-2.5 flex gap-2 md:ml-0 md:justify-end">
+              <NeDropdown :items="getKebabMenuItems(backup)" :align-to-right="true" />
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </template>
 
-    <DeleteObjectModal
-      :visible="deleteVisible"
-      :title="$t('backups.delete_backup')"
-      :primary-label="$t('backups.delete')"
-      :deleting="deleteBackupLoading"
-      :confirmation-message="
-        $t('backups.delete_backup_confirmation', {
-          filename: deleteTargetFilename,
-          date: deleteTargetDate,
-        })
-      "
-      :error-title="$t('backups.cannot_delete_backup')"
-      :error-description="deleteBackupError?.message"
-      @show="onDeleteShow"
-      @close="closeDelete"
-      @primary-click="deleteTarget && deleteBackupMutate(deleteTarget)"
-    />
-  </NeCard>
+  <DeleteObjectModal
+    :visible="deleteVisible"
+    :title="$t('backups.delete_backup')"
+    :primary-label="$t('backups.delete')"
+    :deleting="deleteBackupLoading"
+    :confirmation-message="
+      $t('backups.delete_backup_confirmation', {
+        filename: deleteTargetFilename,
+        date: deleteTargetDate,
+      })
+    "
+    :error-title="$t('backups.cannot_delete_backup')"
+    :error-description="deleteBackupError?.message"
+    @show="onDeleteShow"
+    @close="closeDelete"
+    @primary-click="deleteTarget && deleteBackupMutate(deleteTarget)"
+  />
 </template>
diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index 5a1e44121..0e4412ec3 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -35,7 +35,7 @@ const { state: latestInventory } = useLatestInventory()
 const { state: activeAlerts } = useSystemActiveAlerts()
 const { state: systemBackups } = useSystemBackups()
 
-const activeAlertsCount = computed(() => activeAlerts.value.data?.length ?? 0)
+const activeAlertsCount = computed(() => activeAlerts.value?.data?.alerts?.length ?? 0)
 const backupsCount = computed(() => systemBackups.value.data?.backups?.length ?? 0)
 const hasActiveAlerts = computed(() => activeAlertsCount.value > 0)
 const hasBackups = computed(() => backupsCount.value > 0)
@@ -193,7 +193,7 @@ const timezone = computed(() => {
       <!-- alerts indicator -->
       <DataItem>
         <template #label>
-          {{ $t('alerting.title') }}
+          {{ $t('alerts.title') }}
         </template>
         <template #data>
           <div class="flex items-center gap-2">
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 1f319255d..12f7d596a 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -783,45 +783,40 @@
   },
   "backups": {
     "title": "Backups",
-    "page_description": "Configuration snapshots uploaded by this system. Each file is end-to-end encrypted on the appliance — only the system that created it can decrypt its contents.",
-    "uploaded_at": "Uploaded at",
+    "page_description": "Configuration snapshots uploaded by this system, end-to-end encrypted so only the system that created them can decrypt the contents. At most 10 backups are retained, with up to 500 MB total storage; older entries are automatically deleted when these limits are reached.",
+    "date": "Date",
     "filename": "Filename",
     "size": "Size",
-    "sha256": "SHA-256",
     "actions": "Actions",
     "download": "Download",
     "delete": "Delete",
     "no_backups": "No backups yet",
     "no_backups_description": "This system has not uploaded any configuration backup. Backups are created automatically by the appliance on a daily schedule.",
     "cannot_retrieve_backups": "Cannot retrieve backups",
-    "retention_policy": "Retention policy",
-    "retention_policy_description": "The ingest side keeps at most {slots} backups per system, up to {size} of total storage. Beyond any of those caps the oldest entry is pruned automatically at upload time.",
     "storage_usage": "Storage used",
-    "slots_usage": "Backups kept",
-    "slots_used_of_max": "{used} of {max}",
     "delete_backup": "Delete backup",
-    "delete_backup_confirmation": "Are you sure you want to delete {filename}, uploaded on {date}? This action cannot be undone.",
-    "refresh": "Refresh",
+    "delete_backup_confirmation": "Backup snapshot {filename} uploaded on {date} will be deleted. This action cannot be undone.",
+    "reload_backups": "Reload backups",
     "cannot_delete_backup": "Cannot delete backup",
     "backup_deleted": "Backup deleted",
-    "backup_deleted_description": "{filename} has been removed.",
+    "backup_deleted_description": "Backup snapshot {filename} has been deleted.",
     "cannot_download_backup": "Cannot download backup"
   },
-  "alerting": {
+  "alerts": {
     "title": "Alerts",
-    "config_title": "Alerting Configuration",
+    "config_title": "Alerts Configuration",
     "alpha_notice": "ALPHA \u2013 This section has no final design. UI may change.",
     "cannot_retrieve_alerts": "Cannot retrieve alerts",
     "no_alerts": "No alerts found",
     "no_alerts_description": "There are currently no active alerts for this company",
-    "no_alerts_found": "No alerts match the current filters",
+    "no_alerts_found": "No alerts found",
     "active_alerts": "Active Alerts",
     "alert_history": "Alert History",
-    "alertname": "Alert name",
+    "alertname": "Alert",
     "severity": "Severity",
     "state": "State",
     "system_key": "System key",
-    "starts_at": "Started at",
+    "started": "Started",
     "ends_at": "Ended at",
     "summary": "Summary",
     "description": "Description",
@@ -835,15 +830,21 @@
     "state_active": "Active",
     "state_suppressed": "Suppressed",
     "state_unprocessed": "Unprocessed",
-    "severity_critical": "Critical",
-    "severity_warning": "Warning",
-    "severity_info": "Info",
+    "severity_high": "High",
+    "severity_medium": "Medium",
+    "severity_low": "Low",
+    "severity_critical": "High",
+    "severity_warning": "Medium",
+    "severity_info": "Low",
+    "high_severity": "High severity",
+    "medium_severity": "Medium severity",
+    "low_severity": "Low severity",
     "cannot_retrieve_alert_history": "Cannot retrieve alert history",
     "no_alert_history": "No alert history",
     "no_alert_history_description": "No resolved alerts found for this system",
     "no_alert_history_found": "No alert history matches the current filters",
-    "config_page_description": "View and manage the alerting configuration for your company",
-    "cannot_retrieve_config": "Cannot retrieve alerting configuration",
+    "config_page_description": "View and manage the alerts configuration for your company",
+    "cannot_retrieve_config": "Cannot retrieve alerts configuration",
     "config_json": "Configuration (JSON)",
     "config_yaml": "Configuration (YAML)",
     "mail_enabled": "Email notifications",
@@ -856,16 +857,16 @@
     "per_severity_overrides": "Per-severity overrides",
     "per_system_overrides": "Per-system overrides",
     "no_config": "No configuration found",
-    "no_config_description": "Alerting is not configured for this company",
+    "no_config_description": "Alerts is not configured for this company",
     "edit_config": "Edit configuration",
     "save_config": "Save configuration",
     "disable_alerts": "Disable all alerts",
     "disable_alerts_confirmation": "Are you sure you want to disable all alerts? This will send a blackhole configuration to Alertmanager.",
     "config_saved": "Configuration saved",
-    "config_saved_description": "Alerting configuration has been updated successfully",
+    "config_saved_description": "Alerts configuration has been updated successfully",
     "alerts_disabled": "Alerts disabled",
     "alerts_disabled_description": "All alerts have been disabled successfully",
-    "cannot_save_config": "Cannot save alerting configuration",
+    "cannot_save_config": "Cannot save alerts configuration",
     "cannot_disable_alerts": "Cannot disable alerts",
     "raw_yaml": "Raw YAML",
     "structured": "Structured",
@@ -878,7 +879,7 @@
     "active_alerts_count": "{num} active alert | {num} active alerts",
     "silenced_alerts_count": "{num} silenced | {num} silenced",
     "no_active_alerts": "No active alerts",
-    "no_active_alerts_description": "This system has no active alerts",
+    "no_active_alerts_description": "All systems are operational",
     "silences": "Silences",
     "silences_count": "{num} silence | {num} silences",
     "silence_alert": "Silence alert",
@@ -909,10 +910,39 @@
     "history_tab_description": "History of resolved alerts for this system",
     "cannot_retrieve_system_alerts": "Cannot retrieve active alerts for this system",
     "cannot_retrieve_organizations": "Cannot retrieve companies",
-    "alerting_title": "Alerting",
-    "alerting_page_description": "View active alerts and manage alerting configuration for any company",
-    "view_alert_details": "View alert details",
+    "alerts_title": "Alerts",
+    "alerts_page_description": "View active alerts and manage alerts configuration for any company",
+    "view_details": "View details",
     "select_organization": "Company",
-    "no_organizations_description": "There are no companies available for alerting"
+    "no_organizations_description": "There are no companies available for alerts",
+    "active_alerts_tab": "Active alerts",
+    "notifications_tab": "Notifications",
+    "total_alerts": "Total alerts",
+    "muted": "Muted",
+    "system": "System",
+    "organization": "Company",
+    "reload_alerts": "Reload alerts",
+    "create_silence": "Create silence",
+    "status_active": "Active",
+    "status_suppressed": "Suppressed",
+    "status_resolved": "Resolved",
+    "filter_severity": "Severity",
+    "filter_alert": "Alert",
+    "filter_system": "System",
+    "filter_organization": "Company",
+    "mute_alert": "Mute alert",
+    "mute_alert_title": "Mute {alertname} alert",
+    "mute_until_date": "Mute the alert until this date",
+    "mute_notes": "Notes",
+    "mute_notes_placeholder": "Add a note for this alarm",
+    "mute_until_date_required": "Please choose a date and time",
+    "mute_until_date_future": "The date must be in the future",
+    "alert_muted": "Alert muted",
+    "alert_muted_description": "A silence has been created for {name}.",
+    "cannot_mute_alert": "Cannot mute alert"
+  },
+  "ne_tabs": {
+    "tabs": "Tabs",
+    "select_a_tab": "Select a tab"
   }
 }
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index cc305ce90..c3d48e980 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -644,113 +644,5 @@
     "backup_deleted": "Backup eliminato",
     "backup_deleted_description": "{filename} è stato rimosso.",
     "cannot_download_backup": "Impossibile scaricare il backup"
-  },
-  "alerting": {
-    "title": "Avvisi",
-    "config_title": "Configurazione avvisi",
-    "alpha_notice": "ALPHA – Questa sezione non ha un design definitivo. L'interfaccia potrebbe cambiare.",
-    "cannot_retrieve_alerts": "Impossibile recuperare gli avvisi",
-    "no_alerts": "Nessun avviso trovato",
-    "no_alerts_description": "Non ci sono avvisi attivi per questa organizzazione",
-    "no_alerts_found": "Nessun avviso corrisponde ai filtri attuali",
-    "active_alerts": "Avvisi attivi",
-    "alert_history": "Storico avvisi",
-    "alertname": "Nome avviso",
-    "severity": "Gravità",
-    "state": "Stato",
-    "system_key": "Chiave sistema",
-    "starts_at": "Iniziato il",
-    "ends_at": "Terminato il",
-    "summary": "Sommario",
-    "description": "Descrizione",
-    "labels": "Etichette",
-    "annotations": "Annotazioni",
-    "fingerprint": "Impronta",
-    "receiver": "Destinatario",
-    "filter_by_state": "Filtra per stato",
-    "filter_by_severity": "Filtra per gravità",
-    "filter_by_system_key": "Filtra per chiave sistema",
-    "state_active": "Attivo",
-    "state_suppressed": "Soppresso",
-    "state_unprocessed": "Non elaborato",
-    "severity_critical": "Critico",
-    "severity_warning": "Avviso",
-    "severity_info": "Info",
-    "cannot_retrieve_alert_history": "Impossibile recuperare lo storico avvisi",
-    "no_alert_history": "Nessuno storico avvisi",
-    "no_alert_history_description": "Nessun avviso risolto trovato per questo sistema",
-    "no_alert_history_found": "Nessuno storico corrisponde ai filtri attuali",
-    "config_page_description": "Visualizza e gestisci la configurazione degli avvisi per la tua organizzazione",
-    "cannot_retrieve_config": "Impossibile recuperare la configurazione degli avvisi",
-    "config_json": "Configurazione (JSON)",
-    "config_yaml": "Configurazione (YAML)",
-    "mail_enabled": "Notifiche email",
-    "webhook_enabled": "Notifiche webhook",
-    "telegram_enabled": "Notifiche Telegram",
-    "mail_addresses": "Indirizzi email",
-    "webhook_receivers": "Destinatari webhook",
-    "telegram_receivers": "Destinatari Telegram",
-    "email_template_lang": "Lingua template (email e Telegram)",
-    "per_severity_overrides": "Override per gravità",
-    "per_system_overrides": "Override per sistema",
-    "no_config": "Nessuna configurazione trovata",
-    "no_config_description": "Gli avvisi non sono configurati per questa organizzazione",
-    "edit_config": "Modifica configurazione",
-    "save_config": "Salva configurazione",
-    "disable_alerts": "Disabilita tutti gli avvisi",
-    "disable_alerts_confirmation": "Sei sicuro di voler disabilitare tutti gli avvisi? Verrà inviata una configurazione blackhole ad Alertmanager.",
-    "config_saved": "Configurazione salvata",
-    "config_saved_description": "La configurazione degli avvisi è stata aggiornata con successo",
-    "alerts_disabled": "Avvisi disabilitati",
-    "alerts_disabled_description": "Tutti gli avvisi sono stati disabilitati con successo",
-    "cannot_save_config": "Impossibile salvare la configurazione degli avvisi",
-    "cannot_disable_alerts": "Impossibile disabilitare gli avvisi",
-    "raw_yaml": "YAML grezzo",
-    "structured": "Strutturato",
-    "view_mode": "Modalità visualizzazione",
-    "copy_yaml": "Copia YAML",
-    "yaml_copied": "YAML copiato!",
-    "config_editor": "Editor configurazione",
-    "paste_json_config": "Incolla configurazione JSON",
-    "active_alerts_card_title": "Avvisi attivi",
-    "active_alerts_count": "{num} avviso attivo | {num} avvisi attivi",
-    "silenced_alerts_count": "{num} silenziato | {num} silenziati",
-    "no_active_alerts": "Nessun avviso attivo",
-    "no_active_alerts_description": "Questo sistema non ha avvisi attivi",
-    "silences": "Silenziamenti",
-    "silences_count": "{num} silenziamento | {num} silenziamenti",
-    "silence_alert": "Silenzia avviso",
-    "silence_alert_confirmation": "Creare una silenziazione per l'avviso attivo {name}?",
-    "silence_end_at": "Data e ora di fine",
-    "silence_end_at_helper": "Il silenziamento scadrà a questa data e ora.",
-    "silence_comment": "Commento",
-    "silence_comment_helper": "Aggiungi una nota facoltativa per la silenziazione.",
-    "cannot_silence_alert": "Impossibile silenziare l'avviso",
-    "alert_silenced": "Avviso silenziato",
-    "alert_silenced_description": "E' stata creata una silenziazione per {name}.",
-    "silences_card_title": "Silenziamenti",
-    "no_silences": "Nessun silenziamento",
-    "no_silences_description": "Nessun silenziamento attivo o in attesa per questo sistema",
-    "silence_created_by": "Creato da",
-    "silence_status_active": "Attivo",
-    "silence_status_pending": "In attesa",
-    "cannot_retrieve_silences": "Impossibile recuperare i silenziamenti",
-    "silence_deleted": "Silenziamento eliminato",
-    "silence_deleted_description": "Il silenziamento è stato eliminato con successo.",
-    "cannot_delete_silence": "Impossibile eliminare il silenziamento",
-    "disable_silence": "Disabilita silenziamento",
-    "disable_silence_confirmation": "Disabilitare il silenziamento per l'avviso {name}?",
-    "disable_silence_notice": "Questa azione rimuove {count} che stanno sopprimendo questo avviso.",
-    "cannot_disable_silence": "Impossibile disabilitare il silenziamento",
-    "silence_disabled": "Silenziamento disabilitato",
-    "silence_disabled_description": "Il silenziamento è stato disabilitato per {name}.",
-    "history_tab_description": "Storico degli avvisi risolti per questo sistema",
-    "cannot_retrieve_system_alerts": "Impossibile recuperare gli avvisi attivi per questo sistema",
-    "cannot_retrieve_organizations": "Impossibile recuperare le organizzazioni",
-    "alerting_title": "Alerting",
-    "alerting_page_description": "Visualizza gli avvisi attivi e gestisci la configurazione degli avvisi per qualsiasi organizzazione",
-    "view_alert_details": "Visualizza i dettagli dell'avviso",
-    "select_organization": "Organizzazione",
-    "no_organizations_description": "Non ci sono organizzazioni disponibili per l'alerting"
   }
 }
diff --git a/frontend/src/lib/alerting.ts b/frontend/src/lib/alerting.ts
deleted file mode 100644
index fc5c52277..000000000
--- a/frontend/src/lib/alerting.ts
+++ /dev/null
@@ -1,329 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import axios from 'axios'
-import { API_URL } from './config'
-import { useLoginStore } from '@/stores/login'
-import { type Pagination } from './common'
-
-export const ALERTING_CONFIG_KEY = 'alertingConfig'
-export const ALERTING_ALERTS_KEY = 'alertingAlerts'
-export const ALERT_HISTORY_KEY = 'alertHistory'
-export const ALERT_HISTORY_TABLE_ID = 'alertHistoryTable'
-export const SYSTEM_ALERT_SILENCES_KEY = 'systemAlertSilences'
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface WebhookReceiver {
-  name: string
-  url: string
-}
-
-export interface TelegramReceiver {
-  bot_token: string
-  chat_id: number
-}
-
-export interface SeverityOverride {
-  severity: 'critical' | 'warning' | 'info'
-  mail_enabled?: boolean
-  webhook_enabled?: boolean
-  telegram_enabled?: boolean
-  mail_addresses?: string[]
-  webhook_receivers?: WebhookReceiver[]
-  telegram_receivers?: TelegramReceiver[]
-}
-
-export interface SystemOverride {
-  system_key: string
-  mail_enabled?: boolean
-  webhook_enabled?: boolean
-  telegram_enabled?: boolean
-  mail_addresses?: string[]
-  webhook_receivers?: WebhookReceiver[]
-  telegram_receivers?: TelegramReceiver[]
-}
-
-export interface AlertingConfig {
-  mail_enabled: boolean
-  webhook_enabled: boolean
-  telegram_enabled: boolean
-  mail_addresses: string[]
-  webhook_receivers: WebhookReceiver[]
-  telegram_receivers: TelegramReceiver[]
-  severities?: SeverityOverride[]
-  systems?: SystemOverride[]
-  email_template_lang?: string
-}
-
-export interface AlertStatus {
-  state: string
-  silencedBy: string[]
-  inhibitedBy: string[]
-}
-
-export interface Alert {
-  labels: Record<string, string>
-  annotations: Record<string, string>
-  status: AlertStatus
-  startsAt: string
-  endsAt: string
-  fingerprint: string
-  generatorURL?: string
-  receivers?: { name: string }[]
-}
-
-export interface AlertmanagerSilenceStatus {
-  state: 'active' | 'expired' | 'pending'
-}
-
-export interface AlertmanagerMatcher {
-  name: string
-  value: string
-  isRegex: boolean
-}
-
-export interface AlertmanagerSilence {
-  id: string
-  matchers: AlertmanagerMatcher[]
-  startsAt: string
-  endsAt: string
-  updatedAt: string
-  createdBy: string
-  comment: string
-  status: AlertmanagerSilenceStatus
-}
-
-export interface AlertHistoryRecord {
-  id: number
-  system_key: string
-  alertname: string
-  severity: string | null
-  status: string
-  fingerprint: string
-  starts_at: string
-  ends_at: string | null
-  summary: string | null
-  labels: Record<string, string>
-  annotations: Record<string, string>
-  receiver: string | null
-  created_at: string
-}
-
-// ── API functions ─────────────────────────────────────────────────────────────
-
-interface AlertingConfigResponse {
-  code: number
-  message: string
-  data: {
-    config: AlertingConfig | string
-  }
-}
-
-interface AlertsResponse {
-  code: number
-  message: string
-  data: {
-    alerts: Alert[]
-  }
-}
-
-interface AlertHistoryResponse {
-  code: number
-  message: string
-  data: {
-    alerts: AlertHistoryRecord[]
-    pagination: Pagination
-  }
-}
-
-interface CreateSystemAlertSilenceResponse {
-  code: number
-  message: string
-  data: {
-    silence_id: string
-  }
-}
-
-interface SystemAlertSilencesResponse {
-  code: number
-  message: string
-  data: {
-    silences: AlertmanagerSilence[]
-  }
-}
-
-export const getAlertingConfig = (organizationId: string, format?: 'yaml') => {
-  const loginStore = useLoginStore()
-  const params = new URLSearchParams({ organization_id: organizationId })
-  if (format) {
-    params.append('format', format)
-  }
-
-  return axios
-    .get<AlertingConfigResponse>(`${API_URL}/alerts/config?${params}`, {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    })
-    .then((res) => res.data.data.config)
-}
-
-export const postAlertingConfig = (organizationId: string, config: AlertingConfig) => {
-  const loginStore = useLoginStore()
-
-  return axios.post(`${API_URL}/alerts/config?organization_id=${organizationId}`, config, {
-    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-  })
-}
-
-export const deleteAlertingConfig = (organizationId: string) => {
-  const loginStore = useLoginStore()
-
-  return axios.delete(`${API_URL}/alerts/config?organization_id=${organizationId}`, {
-    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-  })
-}
-
-export const getAlerts = (
-  organizationId: string,
-  state?: string,
-  severity?: string,
-  systemKey?: string,
-) => {
-  const loginStore = useLoginStore()
-  const params = new URLSearchParams({ organization_id: organizationId })
-  if (state) params.append('state', state)
-  if (severity) params.append('severity', severity)
-  if (systemKey) params.append('system_key', systemKey)
-
-  return axios
-    .get<AlertsResponse>(`${API_URL}/alerts?${params}`, {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    })
-    .then((res) => res.data.data.alerts)
-}
-
-export const getSystemAlertHistory = (
-  systemId: string,
-  page: number,
-  pageSize: number,
-  sortBy: string,
-  sortDescending: boolean,
-) => {
-  const loginStore = useLoginStore()
-  const params = new URLSearchParams({
-    page: page.toString(),
-    page_size: pageSize.toString(),
-    sort_by: sortBy,
-    sort_direction: sortDescending ? 'desc' : 'asc',
-  })
-
-  return axios
-    .get<AlertHistoryResponse>(`${API_URL}/systems/${systemId}/alerts/history?${params}`, {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    })
-    .then((res) => res.data.data)
-}
-
-// Get active alerts for a specific system via the dedicated endpoint
-export const getSystemActiveAlerts = (systemId: string) => {
-  const loginStore = useLoginStore()
-  return axios
-    .get<AlertsResponse>(`${API_URL}/systems/${systemId}/alerts`, {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    })
-    .then((res) => res.data.data.alerts)
-}
-
-export const getSystemAlertSilences = (systemId: string) => {
-  const loginStore = useLoginStore()
-  return axios
-    .get<SystemAlertSilencesResponse>(`${API_URL}/systems/${systemId}/alerts/silences`, {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    })
-    .then((res) => res.data.data.silences)
-}
-
-export const createSystemAlertSilence = (
-  systemId: string,
-  fingerprint: string,
-  comment?: string,
-  endAt?: string,
-) => {
-  const loginStore = useLoginStore()
-  const payload: Record<string, unknown> = { fingerprint }
-  if (comment?.trim()) {
-    payload.comment = comment.trim()
-  }
-  if (endAt) {
-    payload.end_at = endAt
-  }
-
-  return axios
-    .post<CreateSystemAlertSilenceResponse>(
-      `${API_URL}/systems/${systemId}/alerts/silences`,
-      payload,
-      {
-        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-      },
-    )
-    .then((res) => res.data.data)
-}
-
-export const deleteSystemAlertSilence = (systemId: string, silenceId: string) => {
-  const loginStore = useLoginStore()
-
-  return axios.delete(
-    `${API_URL}/systems/${systemId}/alerts/silences/${encodeURIComponent(silenceId)}`,
-    {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    },
-  )
-}
-
-type AlertAnnotationKey = 'summary' | 'description'
-type AlertWithAnnotations = {
-  annotations?: Record<string, string | null | undefined>
-}
-
-const DEFAULT_ALERT_LOCALE = 'en'
-
-function getAlertAnnotation(
-  alert: AlertWithAnnotations,
-  annotationKey: AlertAnnotationKey,
-  locale: string,
-) {
-  const annotations = alert.annotations ?? {}
-  const normalizedLocale = locale.split('-')[0].toLowerCase() || DEFAULT_ALERT_LOCALE
-  const candidateKeys = Array.from(
-    new Set([
-      `${annotationKey}_${normalizedLocale}`,
-      annotationKey,
-      `${annotationKey}_${DEFAULT_ALERT_LOCALE}`,
-    ]),
-  )
-
-  for (const key of candidateKeys) {
-    const value = annotations[key]
-    if (typeof value === 'string' && value.trim()) {
-      return value.trim()
-    }
-  }
-
-  return ''
-}
-
-export const getAlertSummary = (alert: AlertWithAnnotations, locale: string) => {
-  return getAlertAnnotation(alert, 'summary', locale)
-}
-
-export const getAlertDescription = (alert: AlertWithAnnotations, locale: string) => {
-  return getAlertAnnotation(alert, 'description', locale)
-}
-
-export const getAlertSilenceIds = (alert: Alert) => {
-  return Array.from(new Set((alert.status?.silencedBy || []).filter((silenceId) => !!silenceId)))
-}
-
-export const isAlertSilenced = (alert: Alert) => {
-  return getAlertSilenceIds(alert).length > 0
-}
diff --git a/frontend/src/lib/alerting.test.ts b/frontend/src/lib/alerts.test.ts
similarity index 99%
rename from frontend/src/lib/alerting.test.ts
rename to frontend/src/lib/alerts.test.ts
index d971bc99d..817b0f233 100644
--- a/frontend/src/lib/alerting.test.ts
+++ b/frontend/src/lib/alerts.test.ts
@@ -8,7 +8,7 @@ import {
   getAlertSummary,
   isAlertSilenced,
   type Alert,
-} from './alerting'
+} from './alerts'
 
 const baseAlert: Alert = {
   labels: {},
diff --git a/frontend/src/lib/alerts.ts b/frontend/src/lib/alerts.ts
new file mode 100644
index 000000000..0a4c52553
--- /dev/null
+++ b/frontend/src/lib/alerts.ts
@@ -0,0 +1,735 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL } from './config'
+import { useLoginStore } from '@/stores/login'
+import { type Pagination } from './common'
+
+export const ALERTS_CONFIG_KEY = 'alertsConfig'
+export const ALERTS_ALERTS_KEY = 'alertsAlerts'
+export const ALERTS_TOTALS_KEY = 'alertsTotals'
+export const ALERTS_TREND_KEY = 'alertsTrend'
+export const ALERTS_STATS_KEY = 'alertsStats'
+export const ALERTS_HISTORY_KEY = 'alertsHistory'
+export const ALERT_HISTORY_KEY = 'alertHistory'
+export const ALERT_ACTIVITY_KEY = 'alertActivity'
+export const ALERTS_SILENCES_KEY = 'alertsSilences'
+export const ALERT_SILENCES_KEY = 'alertSilences'
+export const ALERT_HISTORY_TABLE_ID = 'alertHistoryTable'
+export const SYSTEM_ALERT_SILENCES_KEY = 'systemAlertSilences'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface ChannelToggles {
+  email?: boolean | null
+  webhook?: boolean | null
+  telegram?: boolean | null
+}
+
+export interface EmailRecipient {
+  address: string
+  severities?: string[]
+  language?: 'en' | 'it'
+  format?: 'html' | 'plain'
+}
+
+export interface WebhookRecipient {
+  name: string
+  url: string
+  severities?: string[]
+}
+
+export interface TelegramRecipient {
+  bot_token: string
+  chat_id: number
+  severities?: string[]
+}
+
+export interface AlertingConfigLayer {
+  enabled: ChannelToggles
+  email_recipients: EmailRecipient[]
+  webhook_recipients: WebhookRecipient[]
+  telegram_recipients: TelegramRecipient[]
+}
+
+export type AlertState = 'active' | 'suppressed' | 'unprocessed'
+
+export interface AlertStatus {
+  state: AlertState
+  silencedBy: string[]
+  inhibitedBy: string[]
+}
+
+export interface ActiveAlert {
+  fingerprint: string
+  labels: Record<string, string>
+  annotations: Record<string, string>
+  status: AlertStatus
+  startsAt: string
+  endsAt: string
+  generatorURL?: string
+}
+
+export type Alert = ActiveAlert
+
+export interface AlertmanagerSilenceStatus {
+  state: 'active' | 'expired' | 'pending'
+}
+
+export interface AlertmanagerMatcher {
+  name: string
+  value: string
+  isRegex: boolean
+}
+
+export interface AlertmanagerSilence {
+  id: string
+  matchers: AlertmanagerMatcher[]
+  startsAt: string
+  endsAt: string
+  updatedAt: string
+  createdBy: string
+  comment: string
+  status: AlertmanagerSilenceStatus
+}
+
+export interface AlertHistoryRecord {
+  id: number
+  system_key: string
+  alertname: string
+  severity: string | null
+  status: string
+  fingerprint: string
+  starts_at: string
+  ends_at: string | null
+  summary: string | null
+  labels: Record<string, string>
+  annotations: Record<string, string>
+  receiver: string | null
+  created_at: string
+}
+
+// ── API functions ─────────────────────────────────────────────────────────────
+
+interface AlertsConfigResponse {
+  code: number
+  message: string
+  data: AlertingConfigLayer & {
+    updated_by_name?: string | null
+    updated_at?: string | null
+  }
+}
+
+interface AlertsResponse {
+  code: number
+  message: string
+  data: {
+    alerts: Alert[]
+    pagination?: Pagination
+    warnings?: string[]
+  }
+}
+
+interface AlertsTotalsResponse {
+  code: number
+  message: string
+  data: {
+    active: number
+    critical: number
+    warning: number
+    info: number
+    muted: number
+    history: number
+    warnings?: string[]
+  }
+}
+
+interface AlertNameCount {
+  alertname: string
+  count: number
+}
+
+interface SystemKeyCount {
+  system_key: string
+  count: number
+}
+
+interface AlertStats {
+  total: number
+  by_severity: Record<string, number>
+  top_alertnames: AlertNameCount[]
+  top_systems: SystemKeyCount[]
+  mttr_seconds?: number
+  mtbf_seconds?: number
+}
+
+interface AlertsStatsResponse {
+  code: number
+  message: string
+  data: AlertStats
+}
+
+interface TrendDataPoint {
+  date: string
+  count: number
+}
+
+interface TrendResponse {
+  period: number
+  period_label: string
+  current_total: number
+  previous_total: number
+  delta: number
+  delta_percentage: number
+  trend: 'up' | 'down' | 'stable'
+  data_points: TrendDataPoint[]
+}
+
+interface AlertsTrendResponse {
+  code: number
+  message: string
+  data: TrendResponse
+}
+
+interface AlertHistoryResponse {
+  code: number
+  message: string
+  data: {
+    alerts: AlertHistoryRecord[]
+    pagination: Pagination
+  }
+}
+
+interface AlertActivityEntry {
+  id: number
+  organization_id: string
+  fingerprint: string
+  action: 'silenced' | 'silence_updated' | 'unsilenced'
+  actor_user_id?: string
+  actor_name?: string
+  silence_id?: string
+  details: Record<string, unknown>
+  created_at: string
+}
+
+interface AlertActivityResponse {
+  code: number
+  message: string
+  data: {
+    events: AlertActivityEntry[]
+  }
+}
+
+interface CreateSystemAlertSilenceResponse {
+  code: number
+  message: string
+  data: {
+    silence_id: string
+  }
+}
+
+interface SystemAlertSilencesResponse {
+  code: number
+  message: string
+  data: {
+    silences: AlertmanagerSilence[]
+  }
+}
+
+export const getAlertsConfig = (format?: 'yaml') => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+  if (format) {
+    params.append('format', format)
+  }
+
+  return axios
+    .get<AlertsConfigResponse>(`${API_URL}/alerts/config?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getAlertsTotals = (organizationIds?: string | string[], include?: 'descendants') => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  if (organizationIds) {
+    const orgIds = Array.isArray(organizationIds) ? organizationIds : [organizationIds]
+    orgIds.forEach((id) => params.append('organization_id', id))
+  }
+
+  if (include === 'descendants') {
+    params.append('include', 'descendants')
+  }
+
+  return axios
+    .get<AlertsTotalsResponse>(`${API_URL}/alerts/totals?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getAlertsTrend = (
+  organizationIds?: string | string[],
+  include?: 'descendants',
+  period: 7 | 30 | 180 | 365 = 7,
+) => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  if (organizationIds) {
+    const orgIds = Array.isArray(organizationIds) ? organizationIds : [organizationIds]
+    orgIds.forEach((id) => params.append('organization_id', id))
+  }
+
+  if (include === 'descendants') {
+    params.append('include', 'descendants')
+  }
+
+  params.append('period', period.toString())
+
+  return axios
+    .get<AlertsTrendResponse>(`${API_URL}/alerts/trend?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getAlertsStats = (organizationIds?: string | string[], include?: 'descendants') => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  if (organizationIds) {
+    const orgIds = Array.isArray(organizationIds) ? organizationIds : [organizationIds]
+    orgIds.forEach((id) => params.append('organization_id', id))
+  }
+
+  if (include === 'descendants') {
+    params.append('include', 'descendants')
+  }
+
+  return axios
+    .get<AlertsStatsResponse>(`${API_URL}/alerts/stats?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getAlertsHistory = (
+  organizationIds?: string | string[],
+  page: number = 1,
+  pageSize: number = 50,
+  sortBy: string = 'starts_at',
+  sortDirection: 'asc' | 'desc' = 'desc',
+  include?: 'descendants',
+) => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  if (organizationIds) {
+    const orgIds = Array.isArray(organizationIds) ? organizationIds : [organizationIds]
+    orgIds.forEach((id) => params.append('organization_id', id))
+  }
+
+  if (include === 'descendants') {
+    params.append('include', 'descendants')
+  }
+
+  params.append('page', page.toString())
+  params.append('page_size', Math.min(pageSize, 100).toString())
+  params.append('sort_by', sortBy)
+  params.append('sort_direction', sortDirection)
+
+  return axios
+    .get<AlertHistoryResponse>(`${API_URL}/alerts/history?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getAlertActivity = (fingerprint: string, page: number = 1, pageSize: number = 50) => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  params.append('page', page.toString())
+  params.append('page_size', Math.min(pageSize, 100).toString())
+
+  return axios
+    .get<AlertActivityResponse>(
+      `${API_URL}/alerts/activity/${encodeURIComponent(fingerprint)}?${params}`,
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const getAlertsSilences = (
+  organizationIds?: string | string[],
+  page: number = 1,
+  pageSize: number = 50,
+  include?: 'descendants',
+) => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  if (organizationIds) {
+    const orgIds = Array.isArray(organizationIds) ? organizationIds : [organizationIds]
+    orgIds.forEach((id) => params.append('organization_id', id))
+  }
+
+  if (include === 'descendants') {
+    params.append('include', 'descendants')
+  }
+
+  params.append('page', page.toString())
+  params.append('page_size', Math.min(pageSize, 100).toString())
+
+  return axios
+    .get<SystemAlertSilencesResponse>(`${API_URL}/alerts/silences?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const createAlertSilence = (
+  fingerprint: string,
+  organizationId?: string,
+  systemId?: string,
+  comment?: string,
+  endAt?: string,
+) => {
+  const loginStore = useLoginStore()
+  const payload: Record<string, unknown> = { fingerprint }
+
+  if (comment?.trim()) {
+    payload.comment = comment.trim()
+  }
+  if (endAt) {
+    payload.end_at = endAt
+  }
+  if (organizationId) {
+    payload.organization_id = organizationId
+  }
+  if (systemId) {
+    payload.system_id = systemId
+  }
+
+  return axios
+    .post<CreateSystemAlertSilenceResponse>(`${API_URL}/alerts/silences`, payload, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getAlertSilence = (silenceId: string) => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .get<{
+      code: number
+      message: string
+      data: { silence: AlertmanagerSilence }
+    }>(`${API_URL}/alerts/silences/${encodeURIComponent(silenceId)}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data.silence)
+}
+
+export const updateAlertSilence = (silenceId: string, comment?: string, endAt?: string) => {
+  const loginStore = useLoginStore()
+  const payload: Record<string, unknown> = {}
+
+  if (comment !== undefined) {
+    payload.comment = comment
+  }
+  if (endAt) {
+    payload.end_at = endAt
+  }
+
+  return axios.put(`${API_URL}/alerts/silences/${encodeURIComponent(silenceId)}`, payload, {
+    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+  })
+}
+
+export const deleteAlertSilence = (silenceId: string) => {
+  const loginStore = useLoginStore()
+
+  return axios.delete(`${API_URL}/alerts/silences/${encodeURIComponent(silenceId)}`, {
+    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+  })
+}
+
+export const postAlertsConfig = (config: AlertingConfigLayer) => {
+  const loginStore = useLoginStore()
+
+  return axios.post(`${API_URL}/alerts/config`, config, {
+    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+  })
+}
+
+export const deleteAlertsConfig = () => {
+  const loginStore = useLoginStore()
+
+  return axios.delete(`${API_URL}/alerts/config`, {
+    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+  })
+}
+
+export const getAlerts = (
+  organizationIds?: string | string[],
+  page: number = 1,
+  pageSize: number = 50,
+  sortBy: 'starts_at' | 'severity' | 'alertname' | 'status' = 'starts_at',
+  sortDirection: 'asc' | 'desc' = 'desc',
+  statusFilters?: string | string[],
+  severityFilters?: string | string[],
+  systemKeyFilters?: string | string[],
+  alertnameFilters?: string | string[],
+  include?: 'descendants',
+) => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams()
+
+  // Add organization_id(s)
+  if (organizationIds) {
+    const orgIds = Array.isArray(organizationIds) ? organizationIds : [organizationIds]
+    orgIds.forEach((id) => params.append('organization_id', id))
+  }
+
+  // Add include parameter
+  if (include === 'descendants') {
+    params.append('include', 'descendants')
+  }
+
+  // Add pagination
+  params.append('page', page.toString())
+  params.append('page_size', Math.min(pageSize, 100).toString())
+
+  // Add sorting
+  params.append('sort_by', sortBy)
+  params.append('sort_direction', sortDirection)
+
+  // Add status filters (renamed from state)
+  if (statusFilters) {
+    const statuses = Array.isArray(statusFilters) ? statusFilters : [statusFilters]
+    statuses.forEach((status) => params.append('status', status))
+  }
+
+  // Add severity filters
+  if (severityFilters) {
+    const severities = Array.isArray(severityFilters) ? severityFilters : [severityFilters]
+    severities.forEach((severity) => params.append('severity', severity))
+  }
+
+  // Add system_key filters
+  if (systemKeyFilters) {
+    const keys = Array.isArray(systemKeyFilters) ? systemKeyFilters : [systemKeyFilters]
+    keys.forEach((key) => params.append('system_key', key))
+  }
+
+  // Add alertname filters
+  if (alertnameFilters) {
+    const names = Array.isArray(alertnameFilters) ? alertnameFilters : [alertnameFilters]
+    names.forEach((name) => params.append('alertname', name))
+  }
+
+  return axios
+    .get<AlertsResponse>(`${API_URL}/alerts?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getSystemAlertHistory = (
+  systemId: string,
+  page: number = 1,
+  pageSize: number = 50,
+  sortBy: string = 'starts_at',
+  sortDescending: boolean = true,
+) => {
+  const loginStore = useLoginStore()
+  const params = new URLSearchParams({
+    page: page.toString(),
+    page_size: Math.min(pageSize, 100).toString(),
+    sort_by: sortBy,
+    sort_direction: sortDescending ? 'desc' : 'asc',
+  })
+
+  return axios
+    .get<AlertHistoryResponse>(`${API_URL}/systems/${systemId}/alerts/history?${params}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+// Get active alerts for a specific system via the dedicated endpoint
+export const getSystemActiveAlerts = (systemId: string) => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<AlertsResponse>(`${API_URL}/systems/${systemId}/alerts`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const getSystemAlertSilences = (systemId: string) => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<SystemAlertSilencesResponse>(`${API_URL}/systems/${systemId}/alerts/silences`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data.silences)
+}
+
+export const getSystemAlertSilence = (systemId: string, silenceId: string) => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .get<{
+      code: number
+      message: string
+      data: { silence: AlertmanagerSilence }
+    }>(`${API_URL}/systems/${systemId}/alerts/silences/${encodeURIComponent(silenceId)}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data.silence)
+}
+
+export const createSystemAlertSilence = (
+  systemId: string,
+  fingerprint: string,
+  comment?: string,
+  endAt?: string,
+) => {
+  const loginStore = useLoginStore()
+  const payload: Record<string, unknown> = { fingerprint }
+  if (comment?.trim()) {
+    payload.comment = comment.trim()
+  }
+  if (endAt) {
+    payload.end_at = endAt
+  }
+
+  return axios
+    .post<CreateSystemAlertSilenceResponse>(
+      `${API_URL}/systems/${systemId}/alerts/silences`,
+      payload,
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const updateSystemAlertSilence = (
+  systemId: string,
+  silenceId: string,
+  comment?: string,
+  endAt?: string,
+) => {
+  const loginStore = useLoginStore()
+  const payload: Record<string, unknown> = {}
+
+  if (comment !== undefined) {
+    payload.comment = comment
+  }
+  if (endAt) {
+    payload.end_at = endAt
+  }
+
+  return axios.put(
+    `${API_URL}/systems/${systemId}/alerts/silences/${encodeURIComponent(silenceId)}`,
+    payload,
+    {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    },
+  )
+}
+
+export const deleteSystemAlertSilence = (systemId: string, silenceId: string) => {
+  const loginStore = useLoginStore()
+
+  return axios.delete(
+    `${API_URL}/systems/${systemId}/alerts/silences/${encodeURIComponent(silenceId)}`,
+    {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    },
+  )
+}
+
+type AlertAnnotationKey = 'summary' | 'description'
+type AlertWithAnnotations = {
+  annotations?: Record<string, string | null | undefined>
+}
+
+const DEFAULT_ALERT_LOCALE = 'en'
+
+function getAlertAnnotation(
+  alert: AlertWithAnnotations,
+  annotationKey: AlertAnnotationKey,
+  locale: string,
+) {
+  const annotations = alert.annotations ?? {}
+  const normalizedLocale = locale.split('-')[0].toLowerCase() || DEFAULT_ALERT_LOCALE
+  const candidateKeys = Array.from(
+    new Set([
+      `${annotationKey}_${normalizedLocale}`,
+      annotationKey,
+      `${annotationKey}_${DEFAULT_ALERT_LOCALE}`,
+    ]),
+  )
+
+  for (const key of candidateKeys) {
+    const value = annotations[key]
+    if (typeof value === 'string' && value.trim()) {
+      return value.trim()
+    }
+  }
+
+  return ''
+}
+
+export const getAlertSummary = (alert: AlertWithAnnotations, locale: string) => {
+  return getAlertAnnotation(alert, 'summary', locale)
+}
+
+export const getAlertDescription = (alert: AlertWithAnnotations, locale: string) => {
+  return getAlertAnnotation(alert, 'description', locale)
+}
+
+export const getAlertSilenceIds = (alert: Alert) => {
+  return Array.from(new Set((alert.status?.silencedBy || []).filter((silenceId) => !!silenceId)))
+}
+
+export const isAlertSilenced = (alert: Alert) => {
+  return getAlertSilenceIds(alert).length > 0
+}
+
+export const getStatusBadgeColor = (status?: string) => {
+  switch (status?.toLowerCase()) {
+    case 'active':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+    case 'suppressed':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+    case 'resolved':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
+  }
+}
+
+export const getSeverityBadgeColor = (severity?: string) => {
+  switch (severity?.toLowerCase()) {
+    case 'critical':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+    case 'warning':
+      return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200'
+    case 'info':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
+  }
+}
diff --git a/frontend/src/lib/backups.test.ts b/frontend/src/lib/backups.test.ts
deleted file mode 100644
index 7159e916a..000000000
--- a/frontend/src/lib/backups.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { describe, expect, it } from 'vitest'
-import { formatBackupSize } from './backups'
-
-describe('formatBackupSize', () => {
-  it('returns bytes as-is below 1 KiB', () => {
-    expect(formatBackupSize(0)).toBe('0 B')
-    expect(formatBackupSize(1)).toBe('1 B')
-    expect(formatBackupSize(512)).toBe('512 B')
-    expect(formatBackupSize(1023)).toBe('1023 B')
-  })
-
-  it('switches to KB at 1024 bytes', () => {
-    expect(formatBackupSize(1024)).toBe('1.00 KB')
-    expect(formatBackupSize(1536)).toBe('1.50 KB')
-  })
-
-  it('formats MB, GB and TB tiers', () => {
-    expect(formatBackupSize(1024 * 1024)).toBe('1.00 MB')
-    expect(formatBackupSize(500 * 1024 * 1024)).toBe('500 MB')
-    expect(formatBackupSize(1024 * 1024 * 1024)).toBe('1.00 GB')
-    expect(formatBackupSize(1024 * 1024 * 1024 * 1024)).toBe('1.00 TB')
-  })
-
-  it('picks decimal precision based on magnitude', () => {
-    // < 10 → 2 decimals
-    expect(formatBackupSize(1.23 * 1024 * 1024)).toBe('1.23 MB')
-    // 10..99 → 1 decimal
-    expect(formatBackupSize(12.34 * 1024 * 1024)).toBe('12.3 MB')
-    // >= 100 → no decimals
-    expect(formatBackupSize(123.45 * 1024 * 1024)).toBe('123 MB')
-  })
-
-  it('caps the unit at TB for very large values', () => {
-    const tenPetabytes = 10 * 1024 * 1024 * 1024 * 1024 * 1024
-    expect(formatBackupSize(tenPetabytes)).toMatch(/TB$/)
-  })
-
-  it('returns "-" for invalid inputs', () => {
-    expect(formatBackupSize(NaN)).toBe('-')
-    expect(formatBackupSize(-1)).toBe('-')
-    expect(formatBackupSize(-0.5)).toBe('-')
-    expect(formatBackupSize(Infinity)).toBe('-')
-  })
-})
diff --git a/frontend/src/lib/backups.ts b/frontend/src/lib/backups.ts
index 0dce2dc49..449fe82fb 100644
--- a/frontend/src/lib/backups.ts
+++ b/frontend/src/lib/backups.ts
@@ -46,7 +46,6 @@ export interface BackupDownloadResponse {
 //    does not currently surface these values so we render them from
 //    constants and update them here if the server-side defaults shift. ──
 
-export const BACKUP_MAX_SLOTS_PER_SYSTEM = 10
 export const BACKUP_MAX_SIZE_PER_SYSTEM = 500 * 1024 * 1024
 
 // ── API ───────────────────────────────────────────────────────────────────────
@@ -81,18 +80,3 @@ export const deleteBackup = (systemId: string, backupId: string) => {
     headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
   })
 }
-
-// ── Formatting helpers ────────────────────────────────────────────────────────
-
-export function formatBackupSize(bytes: number): string {
-  if (!Number.isFinite(bytes) || bytes < 0) return '-'
-  if (bytes < 1024) return `${bytes} B`
-  const units = ['KB', 'MB', 'GB', 'TB']
-  let value = bytes / 1024
-  let unit = 0
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024
-    unit++
-  }
-  return `${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)} ${units[unit]}`
-}
diff --git a/frontend/src/lib/permissions.ts b/frontend/src/lib/permissions.ts
index afb463fbc..8e480df93 100644
--- a/frontend/src/lib/permissions.ts
+++ b/frontend/src/lib/permissions.ts
@@ -21,7 +21,8 @@ const DESTROY_RESELLERS = 'destroy:resellers'
 const DESTROY_CUSTOMERS = 'destroy:customers'
 const DESTROY_USERS = 'destroy:users'
 const DESTROY_SYSTEMS = 'destroy:systems'
-const MANAGE_ALERTING = 'manage:systems'
+const READ_ALERTS = 'read:alerts'
+const MANAGE_ALERTS = 'manage:alerts'
 
 export const canReadDistributors = () => {
   const loginStore = useLoginStore()
@@ -113,7 +114,12 @@ export const canDestroySystems = () => {
   return loginStore.permissions.includes(DESTROY_SYSTEMS)
 }
 
-export const canManageAlerting = () => {
+export const canManageAlerts = () => {
   const loginStore = useLoginStore()
-  return loginStore.permissions.includes(MANAGE_ALERTING)
+  return loginStore.permissions.includes(MANAGE_ALERTS)
+}
+
+export const canReadAlerts = () => {
+  const loginStore = useLoginStore()
+  return loginStore.permissions.includes(READ_ALERTS)
 }
diff --git a/frontend/src/queries/alerting/alertingConfig.ts b/frontend/src/queries/alerting/alertingConfig.ts
deleted file mode 100644
index 4e580197c..000000000
--- a/frontend/src/queries/alerting/alertingConfig.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { getAlertingConfig, ALERTING_CONFIG_KEY } from '@/lib/alerting'
-import { useLoginStore } from '@/stores/login'
-import { defineQuery, useQuery } from '@pinia/colada'
-import { ref } from 'vue'
-
-export const useAlertingConfig = defineQuery(() => {
-  const loginStore = useLoginStore()
-  const organizationId = ref(loginStore.userInfo?.organization_id || '')
-  const format = ref<'yaml' | undefined>(undefined)
-
-  const { state, asyncStatus, ...rest } = useQuery({
-    key: () => [ALERTING_CONFIG_KEY, organizationId.value, format.value ?? 'json'],
-    enabled: () => !!loginStore.jwtToken && !!organizationId.value,
-    query: () => getAlertingConfig(organizationId.value, format.value),
-  })
-
-  return {
-    ...rest,
-    state,
-    asyncStatus,
-    organizationId,
-    format,
-  }
-})
diff --git a/frontend/src/queries/alerting/alerts.ts b/frontend/src/queries/alerting/alerts.ts
deleted file mode 100644
index 5edd8cfad..000000000
--- a/frontend/src/queries/alerting/alerts.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { getAlerts, ALERTING_ALERTS_KEY } from '@/lib/alerting'
-import { useLoginStore } from '@/stores/login'
-import { defineQuery, useQuery } from '@pinia/colada'
-import { ref } from 'vue'
-
-export const useAlerts = defineQuery(() => {
-  const loginStore = useLoginStore()
-  const organizationId = ref('')
-  const stateFilter = ref<string[]>([])
-  const severityFilter = ref<string[]>([])
-  const systemKeyFilter = ref('')
-
-  const { state, asyncStatus, ...rest } = useQuery({
-    key: () => [
-      ALERTING_ALERTS_KEY,
-      organizationId.value,
-      stateFilter.value.join(','),
-      severityFilter.value.join(','),
-      systemKeyFilter.value,
-    ],
-    enabled: () => !!loginStore.jwtToken && !!organizationId.value,
-    query: () =>
-      getAlerts(
-        organizationId.value,
-        stateFilter.value[0] || undefined,
-        severityFilter.value[0] || undefined,
-        systemKeyFilter.value || undefined,
-      ),
-  })
-
-  const resetFilters = () => {
-    stateFilter.value = []
-    severityFilter.value = []
-    systemKeyFilter.value = ''
-  }
-
-  const areDefaultFiltersApplied = () => {
-    return !stateFilter.value.length && !severityFilter.value.length && !systemKeyFilter.value
-  }
-
-  return {
-    ...rest,
-    state,
-    asyncStatus,
-    organizationId,
-    stateFilter,
-    severityFilter,
-    systemKeyFilter,
-    resetFilters,
-    areDefaultFiltersApplied,
-  }
-})
diff --git a/frontend/src/queries/alerts/alertActivity.ts b/frontend/src/queries/alerts/alertActivity.ts
new file mode 100644
index 000000000..5427270ed
--- /dev/null
+++ b/frontend/src/queries/alerts/alertActivity.ts
@@ -0,0 +1,27 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertActivity, ALERT_ACTIVITY_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertActivity = (fingerprint: string | undefined) => {
+  const loginStore = useLoginStore()
+  const pageNum = ref(1)
+  const pageSize = ref(50)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [ALERT_ACTIVITY_KEY, fingerprint as string, pageNum.value, pageSize.value],
+    enabled: () => !!loginStore.jwtToken && !!fingerprint,
+    query: () => getAlertActivity(fingerprint!, pageNum.value, pageSize.value),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    pageNum,
+    pageSize,
+  }
+}
diff --git a/frontend/src/queries/alerts/alerts.ts b/frontend/src/queries/alerts/alerts.ts
new file mode 100644
index 000000000..4c50947a5
--- /dev/null
+++ b/frontend/src/queries/alerts/alerts.ts
@@ -0,0 +1,126 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlerts, ALERTS_ALERTS_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlerts = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const organizationIds = ref<string[]>([])
+  const pageNum = ref(1)
+  const pageSize = ref(50)
+  const sortBy = ref<'starts_at' | 'severity' | 'alertname' | 'status'>('starts_at')
+  const sortDirection = ref<'asc' | 'desc'>('desc')
+  const statusFilters = ref<string[]>([])
+  const severityFilters = ref<string[]>([])
+  const systemKeyFilters = ref<string[]>([])
+  const alertnameFilters = ref<string[]>([])
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      ALERTS_ALERTS_KEY,
+      organizationIds.value.join(','),
+      pageNum.value,
+      pageSize.value,
+      sortBy.value,
+      sortDirection.value,
+      statusFilters.value.join(','),
+      severityFilters.value.join(','),
+      systemKeyFilters.value.join(','),
+      alertnameFilters.value.join(','),
+    ],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAlerts(
+        organizationIds.value.length > 0 ? organizationIds.value : undefined,
+        pageNum.value,
+        pageSize.value,
+        sortBy.value,
+        sortDirection.value,
+        statusFilters.value.length > 0 ? statusFilters.value : undefined,
+        severityFilters.value.length > 0 ? severityFilters.value : undefined,
+        systemKeyFilters.value.length > 0 ? systemKeyFilters.value : undefined,
+        alertnameFilters.value.length > 0 ? alertnameFilters.value : undefined,
+      ),
+  })
+
+  const resetFilters = () => {
+    statusFilters.value = []
+    severityFilters.value = []
+    systemKeyFilters.value = []
+    alertnameFilters.value = []
+    pageNum.value = 1
+  }
+
+  const areDefaultFiltersApplied = () => {
+    return (
+      !statusFilters.value.length &&
+      !severityFilters.value.length &&
+      !systemKeyFilters.value.length &&
+      !alertnameFilters.value.length
+    )
+  }
+
+  const toggleStatusFilter = (status: string) => {
+    const idx = statusFilters.value.indexOf(status)
+    if (idx >= 0) {
+      statusFilters.value.splice(idx, 1)
+    } else {
+      statusFilters.value.push(status)
+    }
+    pageNum.value = 1
+  }
+
+  const toggleSeverityFilter = (severity: string) => {
+    const idx = severityFilters.value.indexOf(severity)
+    if (idx >= 0) {
+      severityFilters.value.splice(idx, 1)
+    } else {
+      severityFilters.value.push(severity)
+    }
+    pageNum.value = 1
+  }
+
+  const toggleSystemKeyFilter = (systemKey: string) => {
+    const idx = systemKeyFilters.value.indexOf(systemKey)
+    if (idx >= 0) {
+      systemKeyFilters.value.splice(idx, 1)
+    } else {
+      systemKeyFilters.value.push(systemKey)
+    }
+    pageNum.value = 1
+  }
+
+  const toggleAlertNameFilter = (alertname: string) => {
+    const idx = alertnameFilters.value.indexOf(alertname)
+    if (idx >= 0) {
+      alertnameFilters.value.splice(idx, 1)
+    } else {
+      alertnameFilters.value.push(alertname)
+    }
+    pageNum.value = 1
+  }
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    organizationIds,
+    pageNum,
+    pageSize,
+    sortBy,
+    sortDirection,
+    statusFilters,
+    severityFilters,
+    systemKeyFilters,
+    alertnameFilters,
+    resetFilters,
+    areDefaultFiltersApplied,
+    toggleStatusFilter,
+    toggleSeverityFilter,
+    toggleSystemKeyFilter,
+    toggleAlertNameFilter,
+  }
+})
diff --git a/frontend/src/queries/alerts/alertsConfig.ts b/frontend/src/queries/alerts/alertsConfig.ts
new file mode 100644
index 000000000..f8ad85539
--- /dev/null
+++ b/frontend/src/queries/alerts/alertsConfig.ts
@@ -0,0 +1,25 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertsConfig, ALERTS_CONFIG_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertsConfig = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const format = ref<'yaml' | undefined>(undefined)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [ALERTS_CONFIG_KEY, format.value ?? 'json'],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getAlertsConfig(format.value),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    format,
+  }
+})
diff --git a/frontend/src/queries/alerts/alertsHistory.ts b/frontend/src/queries/alerts/alertsHistory.ts
new file mode 100644
index 000000000..5b7b69b53
--- /dev/null
+++ b/frontend/src/queries/alerts/alertsHistory.ts
@@ -0,0 +1,51 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertsHistory, ALERTS_HISTORY_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertsHistory = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const organizationIds = ref<string[]>([])
+  const pageNum = ref(1)
+  const pageSize = ref(50)
+  const sortBy = ref('starts_at')
+  const sortDirection = ref<'asc' | 'desc'>('desc')
+  const includeDescendants = ref(false)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      ALERTS_HISTORY_KEY,
+      organizationIds.value.join(','),
+      pageNum.value,
+      pageSize.value,
+      sortBy.value,
+      sortDirection.value,
+      includeDescendants.value,
+    ],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAlertsHistory(
+        organizationIds.value.length > 0 ? organizationIds.value : undefined,
+        pageNum.value,
+        pageSize.value,
+        sortBy.value,
+        sortDirection.value,
+        includeDescendants.value ? 'descendants' : undefined,
+      ),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    organizationIds,
+    pageNum,
+    pageSize,
+    sortBy,
+    sortDirection,
+    includeDescendants,
+  }
+})
diff --git a/frontend/src/queries/alerts/alertsSilences.ts b/frontend/src/queries/alerts/alertsSilences.ts
new file mode 100644
index 000000000..25021ddf9
--- /dev/null
+++ b/frontend/src/queries/alerts/alertsSilences.ts
@@ -0,0 +1,43 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertsSilences, ALERTS_SILENCES_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertsSilences = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const organizationIds = ref<string[]>([])
+  const pageNum = ref(1)
+  const pageSize = ref(50)
+  const includeDescendants = ref(false)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      ALERTS_SILENCES_KEY,
+      organizationIds.value.join(','),
+      pageNum.value,
+      pageSize.value,
+      includeDescendants.value,
+    ],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAlertsSilences(
+        organizationIds.value.length > 0 ? organizationIds.value : undefined,
+        pageNum.value,
+        pageSize.value,
+        includeDescendants.value ? 'descendants' : undefined,
+      ),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    organizationIds,
+    pageNum,
+    pageSize,
+    includeDescendants,
+  }
+})
diff --git a/frontend/src/queries/alerts/alertsStats.ts b/frontend/src/queries/alerts/alertsStats.ts
new file mode 100644
index 000000000..269970550
--- /dev/null
+++ b/frontend/src/queries/alerts/alertsStats.ts
@@ -0,0 +1,31 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertsStats, ALERTS_STATS_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertsStats = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const organizationIds = ref<string[]>([])
+  const includeDescendants = ref(false)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [ALERTS_STATS_KEY, organizationIds.value.join(','), includeDescendants.value],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAlertsStats(
+        organizationIds.value.length > 0 ? organizationIds.value : undefined,
+        includeDescendants.value ? 'descendants' : undefined,
+      ),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    organizationIds,
+    includeDescendants,
+  }
+})
diff --git a/frontend/src/queries/alerts/alertsTotals.ts b/frontend/src/queries/alerts/alertsTotals.ts
new file mode 100644
index 000000000..3b6aca0ab
--- /dev/null
+++ b/frontend/src/queries/alerts/alertsTotals.ts
@@ -0,0 +1,31 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertsTotals, ALERTS_TOTALS_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertsTotals = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const organizationIds = ref<string[]>([])
+  const includeDescendants = ref(false)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [ALERTS_TOTALS_KEY, organizationIds.value.join(','), includeDescendants.value],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAlertsTotals(
+        organizationIds.value.length > 0 ? organizationIds.value : undefined,
+        includeDescendants.value ? 'descendants' : undefined,
+      ),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    organizationIds,
+    includeDescendants,
+  }
+})
diff --git a/frontend/src/queries/alerts/alertsTrend.ts b/frontend/src/queries/alerts/alertsTrend.ts
new file mode 100644
index 000000000..3cef1ae59
--- /dev/null
+++ b/frontend/src/queries/alerts/alertsTrend.ts
@@ -0,0 +1,39 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getAlertsTrend, ALERTS_TREND_KEY } from '@/lib/alerts'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { ref } from 'vue'
+
+export const useAlertsTrend = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const organizationIds = ref<string[]>([])
+  const includeDescendants = ref(false)
+  const period = ref<7 | 30 | 180 | 365>(7)
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      ALERTS_TREND_KEY,
+      organizationIds.value.join(','),
+      includeDescendants.value,
+      period.value,
+    ],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAlertsTrend(
+        organizationIds.value.length > 0 ? organizationIds.value : undefined,
+        includeDescendants.value ? 'descendants' : undefined,
+        period.value,
+      ),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    organizationIds,
+    includeDescendants,
+    period,
+  }
+})
diff --git a/frontend/src/queries/systems/activeAlerts.ts b/frontend/src/queries/systems/activeAlerts.ts
index bc1ab3681..29f7d50b9 100644
--- a/frontend/src/queries/systems/activeAlerts.ts
+++ b/frontend/src/queries/systems/activeAlerts.ts
@@ -1,7 +1,7 @@
 //  Copyright (C) 2026 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import { getSystemActiveAlerts } from '@/lib/alerting'
+import { getSystemActiveAlerts } from '@/lib/alerts'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useQuery } from '@pinia/colada'
 import { useRoute } from 'vue-router'
diff --git a/frontend/src/queries/systems/alertHistory.ts b/frontend/src/queries/systems/alertHistory.ts
index 5cf21fad3..e50687031 100644
--- a/frontend/src/queries/systems/alertHistory.ts
+++ b/frontend/src/queries/systems/alertHistory.ts
@@ -1,10 +1,10 @@
 //  Copyright (C) 2026 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import { getSystemAlertHistory, ALERT_HISTORY_KEY } from '@/lib/alerting'
+import { getSystemAlertHistory, ALERT_HISTORY_KEY } from '@/lib/alerts'
 import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
 import { useLoginStore } from '@/stores/login'
-import { ALERT_HISTORY_TABLE_ID } from '@/lib/alerting'
+import { ALERT_HISTORY_TABLE_ID } from '@/lib/alerts'
 import { defineQuery, useQuery } from '@pinia/colada'
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 455414ad0..d44a8521e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -81,9 +81,9 @@ const router = createRouter({
       component: () => import('../views/ApplicationDetailView.vue'),
     },
     {
-      path: '/alerting',
-      name: 'alerting',
-      component: () => import('../views/AlertingView.vue'),
+      path: '/alerts',
+      name: 'alerts',
+      component: () => import('../views/AlertsView.vue'),
     },
     {
       path: '/distributors/:companyId',
diff --git a/frontend/src/views/AlertingView.vue b/frontend/src/views/AlertingView.vue
deleted file mode 100644
index 1b6ef6c61..000000000
--- a/frontend/src/views/AlertingView.vue
+++ /dev/null
@@ -1,878 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-
-<script setup lang="ts">
-import {
-  NeBadgeV2,
-  NeButton,
-  NeCard,
-  NeCombobox,
-  NeDropdownFilter,
-  NeEmptyState,
-  NeHeading,
-  NeInlineNotification,
-  NeSkeleton,
-  NeTable,
-  NeTableBody,
-  NeTableCell,
-  NeTableHead,
-  NeTableHeadCell,
-  NeTableRow,
-  NeTabs,
-  NeTextArea,
-  NeTextInput,
-  type FilterOption,
-  type NeBadgeV2Kind,
-  type NeComboboxOption,
-  type Tab,
-} from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faBell,
-  faArrowsRotate,
-  faExclamationTriangle,
-  faCog,
-  faCheck,
-  faCopy,
-  faXmark,
-  faTrash,
-  faPenToSquare,
-} from '@fortawesome/free-solid-svg-icons'
-import { useTabs } from '@/composables/useTabs'
-import { useLoginStore } from '@/stores/login'
-import { useAlerts } from '@/queries/alerting/alerts'
-import {
-  getAlertDescription,
-  getAlertSummary,
-  getAlertingConfig,
-  postAlertingConfig,
-  deleteAlertingConfig,
-  type Alert,
-  type AlertingConfig,
-} from '@/lib/alerting'
-import { useI18n } from 'vue-i18n'
-import { computed, ref, watch } from 'vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
-import DataItem from '@/components/DataItem.vue'
-import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
-import { useNotificationsStore } from '@/stores/notifications'
-import { useQuery } from '@pinia/colada'
-import { organizationsQuery } from '@/queries/organizations/organizations'
-import { getOrganizationIcon } from '@/lib/organizations/organizations'
-
-const { t, locale } = useI18n()
-const loginStore = useLoginStore()
-const notificationsStore = useNotificationsStore()
-
-// ── Organisation selector ──────────────────────────────────────────────────────
-const { state: orgsState } = useQuery({
-  ...organizationsQuery,
-  enabled: () => !!loginStore.jwtToken && loginStore.isOwner,
-})
-
-const organizationOptions = computed((): NeComboboxOption[] => {
-  return (orgsState.value.data ?? [])
-    .filter((o) => o.type.toLowerCase() !== 'owner')
-    .map((o) => ({
-      id: o.logto_id,
-      label: o.name,
-      description: o.type,
-      icon: getOrganizationIcon(o.type),
-    }))
-})
-
-const selectedOrgId = ref('')
-
-// ── Page tabs (Alerts / Configuration) ────────────────────────────────────────
-const { tabs: pageTabs, selectedTab: selectedPageTab } = useTabs([
-  { name: 'alerts', label: t('alerting.title') },
-  { name: 'config', label: t('alerting.config_title') },
-])
-
-// ── Alerts ─────────────────────────────────────────────────────────────────────
-const {
-  state: alertsState,
-  asyncStatus: alertsAsyncStatus,
-  refetch: refetchAlerts,
-  organizationId: alertsOrgId,
-  stateFilter,
-  severityFilter,
-  systemKeyFilter,
-  resetFilters,
-  areDefaultFiltersApplied,
-} = useAlerts()
-
-const isOrganizationsLoading = computed(
-  () => loginStore.loadingUserInfo || orgsState.value.status === 'pending',
-)
-const hasSelectableOrganizations = computed(() => organizationOptions.value.length > 0)
-const hasSelectedOrganization = computed(() => !!selectedOrgId.value)
-const activeAlertsCount = computed(() => alertsState.value.data?.length ?? 0)
-const activeAlertsCountLabel = computed(() =>
-  t('alerting.active_alerts_count', { num: activeAlertsCount.value }, activeAlertsCount.value),
-)
-
-const systemKeyInput = ref('')
-
-const stateFilterOptions = ref<FilterOption[]>([
-  { id: 'active', label: t('alerting.state_active') },
-  { id: 'suppressed', label: t('alerting.state_suppressed') },
-  { id: 'unprocessed', label: t('alerting.state_unprocessed') },
-])
-
-const severityFilterOptions = ref<FilterOption[]>([
-  { id: 'critical', label: t('alerting.severity_critical') },
-  { id: 'warning', label: t('alerting.severity_warning') },
-  { id: 'info', label: t('alerting.severity_info') },
-])
-
-const hasActiveFilters = computed(() => !areDefaultFiltersApplied())
-
-function getAlertSummaryText(alert: Alert) {
-  return getAlertSummary(alert, locale.value)
-}
-
-function getAlertDescriptionText(alert: Alert) {
-  const description = getAlertDescription(alert, locale.value)
-  return description !== getAlertSummaryText(alert) ? description : ''
-}
-
-function applySystemKeyFilter() {
-  systemKeyFilter.value = systemKeyInput.value.trim()
-}
-
-function clearAllFilters() {
-  systemKeyInput.value = ''
-  resetFilters()
-}
-
-function getSeverityBadgeKind(severity: string | undefined): NeBadgeV2Kind {
-  switch (severity?.toLowerCase()) {
-    case 'critical':
-      return 'rose'
-    case 'warning':
-      return 'amber'
-    case 'info':
-      return 'blue'
-    default:
-      return 'gray'
-  }
-}
-
-function getStateBadgeKind(stateVal: string | undefined): NeBadgeV2Kind {
-  switch (stateVal?.toLowerCase()) {
-    case 'active':
-      return 'rose'
-    case 'suppressed':
-      return 'gray'
-    default:
-      return 'gray'
-  }
-}
-
-// ── Config ─────────────────────────────────────────────────────────────────────
-const configTabs = ref<Tab[]>([
-  { name: 'structured', label: t('alerting.structured') },
-  { name: 'yaml', label: t('alerting.raw_yaml') },
-])
-const selectedConfigTab = ref('structured')
-
-const config = ref<AlertingConfig | null>(null)
-const rawYaml = ref<string>('')
-const isLoading = ref(false)
-const fetchError = ref<string | null>(null)
-const isSaving = ref(false)
-const isDisabling = ref(false)
-const saveError = ref<string | null>(null)
-const disableError = ref<string | null>(null)
-const isEditMode = ref(false)
-const editJson = ref('')
-const editJsonError = ref<string | null>(null)
-const isConfirmDisable = ref(false)
-let configRequestId = 0
-
-watch(
-  organizationOptions,
-  (options) => {
-    if (!options.length) {
-      selectedOrgId.value = ''
-      return
-    }
-
-    if (!options.some(({ id }) => id === selectedOrgId.value)) {
-      selectedOrgId.value = options[0].id
-    }
-  },
-  { immediate: true },
-)
-
-watch(
-  selectedOrgId,
-  (id) => {
-    alertsOrgId.value = id
-  },
-  { immediate: true },
-)
-
-async function fetchConfig(orgId: string) {
-  const requestId = ++configRequestId
-
-  if (!orgId) {
-    config.value = null
-    rawYaml.value = ''
-    fetchError.value = null
-    isLoading.value = false
-    return
-  }
-
-  isLoading.value = true
-  fetchError.value = null
-  config.value = null
-  rawYaml.value = ''
-
-  try {
-    const [jsonCfg, yamlCfg] = await Promise.all([
-      getAlertingConfig(orgId),
-      getAlertingConfig(orgId, 'yaml'),
-    ])
-    if (requestId !== configRequestId) {
-      return
-    }
-
-    config.value = jsonCfg as AlertingConfig
-    rawYaml.value = (yamlCfg as string) || ''
-  } catch (e: unknown) {
-    if (requestId !== configRequestId) {
-      return
-    }
-
-    fetchError.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    if (requestId === configRequestId) {
-      isLoading.value = false
-    }
-  }
-}
-
-watch(
-  selectedOrgId,
-  (id) => {
-    isEditMode.value = false
-    isConfirmDisable.value = false
-    fetchConfig(id)
-  },
-  { immediate: true },
-)
-
-const yamlCopied = ref(false)
-async function copyYaml() {
-  await navigator.clipboard.writeText(rawYaml.value)
-  yamlCopied.value = true
-  setTimeout(() => (yamlCopied.value = false), 2000)
-}
-
-function startEdit() {
-  editJson.value = JSON.stringify(config.value ?? {}, null, 2)
-  editJsonError.value = null
-  isEditMode.value = true
-}
-
-function cancelEdit() {
-  isEditMode.value = false
-  editJsonError.value = null
-}
-
-async function saveConfig() {
-  editJsonError.value = null
-  let parsed: AlertingConfig
-  try {
-    parsed = JSON.parse(editJson.value)
-  } catch {
-    editJsonError.value = 'Invalid JSON'
-    return
-  }
-
-  isSaving.value = true
-  saveError.value = null
-  try {
-    await postAlertingConfig(selectedOrgId.value, parsed)
-    isEditMode.value = false
-    notificationsStore.createNotification({
-      kind: 'success',
-      title: t('alerting.config_saved'),
-      description: t('alerting.config_saved_description'),
-    })
-    await fetchConfig(selectedOrgId.value)
-  } catch (e: unknown) {
-    saveError.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    isSaving.value = false
-  }
-}
-
-async function disableAlerts() {
-  isDisabling.value = true
-  disableError.value = null
-  isConfirmDisable.value = false
-  try {
-    await deleteAlertingConfig(selectedOrgId.value)
-    notificationsStore.createNotification({
-      kind: 'success',
-      title: t('alerting.alerts_disabled'),
-      description: t('alerting.alerts_disabled_description'),
-    })
-    await fetchConfig(selectedOrgId.value)
-  } catch (e: unknown) {
-    disableError.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    isDisabling.value = false
-  }
-}
-
-function formatMailAddresses(addresses: string[] | undefined) {
-  if (!addresses || addresses.length === 0) return '-'
-  return addresses.join(', ')
-}
-
-// ── Owner-only guard ───────────────────────────────────────────────────────────
-const isOwner = computed(() => loginStore.isOwner)
-</script>
-
-<template>
-  <div>
-    <!-- access denied -->
-    <NeInlineNotification
-      v-if="!isOwner"
-      kind="error"
-      :title="$t('common.access_denied')"
-      :description="$t('common.this_section_is_accessible_only_by_owner')"
-    />
-
-    <template v-else>
-      <!-- header -->
-      <div class="mb-6 flex items-start justify-between gap-4">
-        <div>
-          <div class="mb-1 flex items-center gap-3">
-            <NeHeading tag="h3">{{ $t('alerting.alerting_title') }}</NeHeading>
-            <NeBadgeV2 kind="amber" size="sm">ALPHA</NeBadgeV2>
-          </div>
-          <p class="max-w-2xl text-sm text-gray-500 dark:text-gray-400">
-            {{ $t('alerting.alerting_page_description') }}
-          </p>
-          <NeInlineNotification
-            kind="warning"
-            :title="$t('alerting.alpha_notice')"
-            class="mt-3 max-w-2xl"
-          />
-        </div>
-      </div>
-
-      <NeInlineNotification
-        v-if="orgsState.status === 'error'"
-        kind="error"
-        :title="$t('alerting.cannot_retrieve_organizations')"
-        :description="orgsState.error?.message"
-        class="mb-6"
-      />
-
-      <NeSkeleton v-else-if="isOrganizationsLoading" :lines="8" />
-
-      <NeEmptyState
-        v-else-if="!hasSelectableOrganizations"
-        :title="$t('organizations.no_organizations')"
-        :description="$t('alerting.no_organizations_description')"
-        :icon="faBell"
-      />
-
-      <template v-else>
-        <!-- org selector -->
-        <div class="mb-6 max-w-sm">
-          <NeCombobox
-            v-model="selectedOrgId"
-            :options="organizationOptions"
-            :label="$t('alerting.select_organization')"
-            :placeholder="$t('organizations.choose_organization')"
-            :no-results-label="$t('ne_combobox.no_results')"
-            :limited-options-label="$t('ne_combobox.limited_options_label')"
-            :no-options-label="$t('organizations.no_organizations')"
-            :selected-label="$t('ne_combobox.selected')"
-            :user-input-label="$t('ne_combobox.user_input_label')"
-            :optional-label="$t('common.optional')"
-          />
-          <p
-            v-if="hasSelectedOrganization && alertsState.status === 'success'"
-            class="mt-2 text-sm text-gray-500 dark:text-gray-400"
-          >
-            {{ activeAlertsCountLabel }}
-          </p>
-        </div>
-
-        <!-- page tabs -->
-        <NeTabs
-          :tabs="pageTabs"
-          :selected="selectedPageTab"
-          :sr-tabs-label="$t('ne_tabs.tabs')"
-          :sr-select-tab-label="$t('ne_tabs.select_a_tab')"
-          class="mb-6"
-          @select-tab="selectedPageTab = $event"
-        />
-
-        <!-- ══ ALERTS TAB ══════════════════════════════════════════════════════ -->
-        <template v-if="selectedPageTab === 'alerts'">
-          <!-- toolbar -->
-          <div class="mb-4 flex items-center justify-between gap-4">
-            <div class="flex flex-wrap items-center gap-3">
-              <NeDropdownFilter
-                v-model="stateFilter"
-                kind="checkbox"
-                :label="$t('alerting.filter_by_state')"
-                :options="stateFilterOptions"
-                :clear-filter-label="$t('ne_dropdown_filter.clear_filter')"
-                :open-menu-aria-label="$t('ne_dropdown_filter.open_filter')"
-                :no-options-label="$t('ne_dropdown_filter.no_options')"
-                :more-options-hidden-label="$t('ne_dropdown_filter.more_options_hidden')"
-                :clear-search-label="$t('ne_dropdown_filter.clear_search')"
-              />
-              <NeDropdownFilter
-                v-model="severityFilter"
-                kind="checkbox"
-                :label="$t('alerting.filter_by_severity')"
-                :options="severityFilterOptions"
-                :clear-filter-label="$t('ne_dropdown_filter.clear_filter')"
-                :open-menu-aria-label="$t('ne_dropdown_filter.open_filter')"
-                :no-options-label="$t('ne_dropdown_filter.no_options')"
-                :more-options-hidden-label="$t('ne_dropdown_filter.more_options_hidden')"
-                :clear-search-label="$t('ne_dropdown_filter.clear_search')"
-              />
-              <div class="flex items-center gap-2">
-                <NeTextInput
-                  v-model="systemKeyInput"
-                  :placeholder="$t('alerting.filter_by_system_key')"
-                  class="max-w-xs"
-                  @keyup.enter="applySystemKeyFilter"
-                />
-                <NeButton kind="secondary" size="sm" @click="applySystemKeyFilter">
-                  {{ $t('common.search') }}
-                </NeButton>
-              </div>
-              <NeButton v-if="hasActiveFilters" kind="tertiary" size="sm" @click="clearAllFilters">
-                {{ $t('common.reset_filters') }}
-              </NeButton>
-            </div>
-            <div class="flex shrink-0 items-center gap-2">
-              <UpdatingSpinner
-                v-if="alertsAsyncStatus === 'loading' && alertsState.status !== 'pending'"
-              />
-              <NeButton kind="tertiary" size="sm" @click="refetchAlerts()">
-                <template #prefix>
-                  <FontAwesomeIcon :icon="faArrowsRotate" />
-                </template>
-              </NeButton>
-            </div>
-          </div>
-
-          <!-- error -->
-          <NeInlineNotification
-            v-if="alertsState.status === 'error'"
-            kind="error"
-            :title="$t('alerting.cannot_retrieve_alerts')"
-            :description="alertsState.error?.message"
-            class="mb-6"
-          />
-
-          <!-- loading skeleton -->
-          <NeSkeleton v-else-if="alertsState.status === 'pending'" :lines="6" />
-
-          <!-- empty with defaults -->
-          <NeEmptyState
-            v-else-if="!alertsState.data?.length && !hasActiveFilters"
-            :title="$t('alerting.no_alerts')"
-            :description="$t('alerting.no_alerts_description')"
-            :icon="faBell"
-          />
-
-          <!-- empty with filters -->
-          <NeEmptyState
-            v-else-if="!alertsState.data?.length"
-            :title="$t('alerting.no_alerts_found')"
-            :description="$t('common.try_changing_search_filters')"
-            :icon="faBell"
-          />
-
-          <!-- alerts table -->
-          <NeTable v-else :aria-label="$t('alerting.active_alerts')" card-breakpoint="md">
-            <NeTableHead>
-              <NeTableHeadCell>{{ $t('alerting.alertname') }}</NeTableHeadCell>
-              <NeTableHeadCell>{{ $t('alerting.severity') }}</NeTableHeadCell>
-              <NeTableHeadCell>{{ $t('alerting.state') }}</NeTableHeadCell>
-              <NeTableHeadCell>{{ $t('alerting.system_key') }}</NeTableHeadCell>
-              <NeTableHeadCell>{{ $t('alerting.summary') }}</NeTableHeadCell>
-              <NeTableHeadCell>{{ $t('alerting.description') }}</NeTableHeadCell>
-              <NeTableHeadCell>{{ $t('alerting.starts_at') }}</NeTableHeadCell>
-            </NeTableHead>
-            <NeTableBody>
-              <NeTableRow v-for="alert in alertsState.data" :key="alert.fingerprint">
-                <NeTableCell :data-label="$t('alerting.alertname')">
-                  <div class="flex items-center gap-2">
-                    <FontAwesomeIcon
-                      :icon="faExclamationTriangle"
-                      :class="[
-                        'h-4 w-4 shrink-0',
-                        alert.labels.severity === 'critical'
-                          ? 'text-red-500'
-                          : alert.labels.severity === 'warning'
-                            ? 'text-amber-500'
-                            : 'text-blue-400',
-                      ]"
-                      aria-hidden="true"
-                    />
-                    <span class="font-medium">{{ alert.labels.alertname || '-' }}</span>
-                  </div>
-                </NeTableCell>
-                <NeTableCell :data-label="$t('alerting.severity')">
-                  <NeBadgeV2
-                    v-if="alert.labels.severity"
-                    :kind="getSeverityBadgeKind(alert.labels.severity)"
-                    size="xs"
-                  >
-                    {{ alert.labels.severity }}
-                  </NeBadgeV2>
-                  <span v-else>-</span>
-                </NeTableCell>
-                <NeTableCell :data-label="$t('alerting.state')">
-                  <NeBadgeV2 :kind="getStateBadgeKind(alert.status?.state)" size="xs">
-                    {{ alert.status?.state || '-' }}
-                  </NeBadgeV2>
-                </NeTableCell>
-                <NeTableCell :data-label="$t('alerting.system_key')">
-                  <span class="font-mono text-xs">{{ alert.labels.system_key || '-' }}</span>
-                </NeTableCell>
-                <NeTableCell :data-label="$t('alerting.summary')">
-                  <div class="max-w-md break-words whitespace-normal">
-                    {{ getAlertSummaryText(alert) || '-' }}
-                  </div>
-                </NeTableCell>
-                <NeTableCell :data-label="$t('alerting.description')">
-                  <div class="max-w-md break-words whitespace-normal">
-                    {{ getAlertDescriptionText(alert) || '-' }}
-                  </div>
-                </NeTableCell>
-                <NeTableCell :data-label="$t('alerting.starts_at')">
-                  {{
-                    alert.startsAt ? formatDateTimeNoSeconds(new Date(alert.startsAt), locale) : '-'
-                  }}
-                </NeTableCell>
-              </NeTableRow>
-            </NeTableBody>
-          </NeTable>
-        </template>
-
-        <!-- ══ CONFIGURATION TAB ══════════════════════════════════════════════ -->
-        <template v-else-if="selectedPageTab === 'config'">
-          <!-- errors -->
-          <NeInlineNotification
-            v-if="fetchError"
-            kind="error"
-            :title="$t('alerting.cannot_retrieve_config')"
-            :description="fetchError"
-            class="mb-6"
-          />
-          <NeInlineNotification
-            v-if="saveError"
-            kind="error"
-            :title="$t('alerting.cannot_save_config')"
-            :description="saveError"
-            class="mb-6"
-          />
-          <NeInlineNotification
-            v-if="disableError"
-            kind="error"
-            :title="$t('alerting.cannot_disable_alerts')"
-            :description="disableError"
-            class="mb-6"
-          />
-
-          <!-- loading skeleton -->
-          <NeSkeleton v-if="isLoading && !config" :lines="10" />
-
-          <template v-else-if="config || rawYaml">
-            <!-- config sub-tabs -->
-            <NeTabs
-              :tabs="configTabs"
-              :selected="selectedConfigTab"
-              :sr-tabs-label="$t('ne_tabs.tabs')"
-              :sr-select-tab-label="$t('ne_tabs.select_a_tab')"
-              class="mb-6"
-              @select-tab="selectedConfigTab = $event"
-            />
-
-            <!-- structured view -->
-            <template v-if="selectedConfigTab === 'structured'">
-              <!-- edit mode -->
-              <template v-if="isEditMode">
-                <NeCard class="mb-6">
-                  <NeHeading tag="h6" class="mb-4">{{ $t('alerting.config_editor') }}</NeHeading>
-                  <NeInlineNotification
-                    v-if="editJsonError"
-                    kind="error"
-                    :title="editJsonError"
-                    class="mb-4"
-                  />
-                  <NeTextArea
-                    v-model="editJson"
-                    :rows="20"
-                    :label="$t('alerting.paste_json_config')"
-                    class="font-mono text-xs"
-                  />
-                  <div class="mt-4 flex gap-3">
-                    <NeButton kind="primary" :loading="isSaving" @click="saveConfig">
-                      <template #prefix>
-                        <FontAwesomeIcon :icon="faCheck" />
-                      </template>
-                      {{ $t('alerting.save_config') }}
-                    </NeButton>
-                    <NeButton kind="tertiary" :disabled="isSaving" @click="cancelEdit">
-                      <template #prefix>
-                        <FontAwesomeIcon :icon="faXmark" />
-                      </template>
-                      {{ $t('common.cancel') }}
-                    </NeButton>
-                  </div>
-                </NeCard>
-              </template>
-
-              <!-- view mode -->
-              <template v-else>
-                <NeCard class="mb-6">
-                  <div class="mb-4 flex items-center justify-between gap-4">
-                    <div class="flex items-center gap-2">
-                      <NeHeading tag="h6">{{ $t('alerting.config_json') }}</NeHeading>
-                      <UpdatingSpinner v-if="isLoading" />
-                    </div>
-                    <NeButton kind="tertiary" size="sm" @click="startEdit">
-                      <template #prefix>
-                        <FontAwesomeIcon :icon="faPenToSquare" />
-                      </template>
-                      {{ $t('alerting.edit_config') }}
-                    </NeButton>
-                  </div>
-
-                  <div v-if="config" class="divide-y divide-gray-200 dark:divide-gray-700">
-                    <DataItem>
-                      <template #label>{{ $t('alerting.mail_enabled') }}</template>
-                      <template #data>
-                        <NeBadgeV2 :kind="config.mail_enabled ? 'green' : 'gray'" size="xs">
-                          {{ config.mail_enabled ? $t('common.enabled') : $t('common.disabled') }}
-                        </NeBadgeV2>
-                      </template>
-                    </DataItem>
-                    <DataItem>
-                      <template #label>{{ $t('alerting.mail_addresses') }}</template>
-                      <template #data>{{ formatMailAddresses(config.mail_addresses) }}</template>
-                    </DataItem>
-                    <DataItem>
-                      <template #label>{{ $t('alerting.webhook_enabled') }}</template>
-                      <template #data>
-                        <NeBadgeV2 :kind="config.webhook_enabled ? 'green' : 'gray'" size="xs">
-                          {{
-                            config.webhook_enabled ? $t('common.enabled') : $t('common.disabled')
-                          }}
-                        </NeBadgeV2>
-                      </template>
-                    </DataItem>
-                    <DataItem v-if="config.webhook_receivers?.length">
-                      <template #label>{{ $t('alerting.webhook_receivers') }}</template>
-                      <template #data>
-                        <div class="space-y-1">
-                          <div
-                            v-for="recv in config.webhook_receivers"
-                            :key="recv.name"
-                            class="font-mono text-xs"
-                          >
-                            {{ recv.name }}: {{ recv.url }}
-                          </div>
-                        </div>
-                      </template>
-                    </DataItem>
-                    <DataItem>
-                      <template #label>{{ $t('alerting.telegram_enabled') }}</template>
-                      <template #data>
-                        <NeBadgeV2 :kind="config.telegram_enabled ? 'green' : 'gray'" size="xs">
-                          {{
-                            config.telegram_enabled ? $t('common.enabled') : $t('common.disabled')
-                          }}
-                        </NeBadgeV2>
-                      </template>
-                    </DataItem>
-                    <DataItem v-if="config.telegram_receivers?.length">
-                      <template #label>{{ $t('alerting.telegram_receivers') }}</template>
-                      <template #data>
-                        <div class="space-y-1">
-                          <div
-                            v-for="(recv, idx) in config.telegram_receivers"
-                            :key="idx"
-                            class="font-mono text-xs"
-                          >
-                            chat_id: {{ recv.chat_id }}
-                          </div>
-                        </div>
-                      </template>
-                    </DataItem>
-                    <DataItem v-if="config.email_template_lang">
-                      <template #label>{{ $t('alerting.email_template_lang') }}</template>
-                      <template #data>{{ config.email_template_lang }}</template>
-                    </DataItem>
-                  </div>
-
-                  <div v-if="config?.severities?.length" class="mt-6">
-                    <NeHeading tag="h6" class="mb-3">
-                      {{ $t('alerting.per_severity_overrides') }}
-                    </NeHeading>
-                    <div
-                      v-for="sv in config.severities"
-                      :key="sv.severity"
-                      class="mb-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700"
-                    >
-                      <div class="mb-2 flex items-center gap-2">
-                        <NeBadgeV2
-                          :kind="
-                            sv.severity === 'critical'
-                              ? 'rose'
-                              : sv.severity === 'warning'
-                                ? 'amber'
-                                : 'blue'
-                          "
-                          size="xs"
-                        >
-                          {{ sv.severity }}
-                        </NeBadgeV2>
-                      </div>
-                      <div class="grid grid-cols-2 gap-2 text-sm">
-                        <div>{{ $t('alerting.mail_enabled') }}: {{ sv.mail_enabled ?? '-' }}</div>
-                        <div>
-                          {{ $t('alerting.webhook_enabled') }}: {{ sv.webhook_enabled ?? '-' }}
-                        </div>
-                        <div>
-                          {{ $t('alerting.telegram_enabled') }}: {{ sv.telegram_enabled ?? '-' }}
-                        </div>
-                        <div v-if="sv.mail_addresses?.length">
-                          {{ $t('alerting.mail_addresses') }}: {{ sv.mail_addresses.join(', ') }}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div v-if="config?.systems?.length" class="mt-6">
-                    <NeHeading tag="h6" class="mb-3">
-                      {{ $t('alerting.per_system_overrides') }}
-                    </NeHeading>
-                    <div
-                      v-for="sys in config.systems"
-                      :key="sys.system_key"
-                      class="mb-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700"
-                    >
-                      <div class="mb-2 font-mono text-xs text-gray-500">{{ sys.system_key }}</div>
-                      <div class="grid grid-cols-2 gap-2 text-sm">
-                        <div>{{ $t('alerting.mail_enabled') }}: {{ sys.mail_enabled ?? '-' }}</div>
-                        <div>
-                          {{ $t('alerting.webhook_enabled') }}: {{ sys.webhook_enabled ?? '-' }}
-                        </div>
-                        <div>
-                          {{ $t('alerting.telegram_enabled') }}: {{ sys.telegram_enabled ?? '-' }}
-                        </div>
-                        <div v-if="sys.mail_addresses?.length">
-                          {{ $t('alerting.mail_addresses') }}: {{ sys.mail_addresses.join(', ') }}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </NeCard>
-
-                <!-- disable alerts section -->
-                <NeCard>
-                  <NeHeading tag="h6" class="mb-3 text-red-600 dark:text-red-400">
-                    <FontAwesomeIcon :icon="faTrash" class="mr-2 h-4 w-4" />
-                    {{ $t('alerting.disable_alerts') }}
-                  </NeHeading>
-                  <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">
-                    {{ $t('alerting.disable_alerts_confirmation') }}
-                  </p>
-                  <template v-if="!isConfirmDisable">
-                    <NeButton kind="danger" size="sm" @click="isConfirmDisable = true">
-                      <template #prefix>
-                        <FontAwesomeIcon :icon="faTrash" />
-                      </template>
-                      {{ $t('alerting.disable_alerts') }}
-                    </NeButton>
-                  </template>
-                  <template v-else>
-                    <div class="flex items-center gap-3">
-                      <NeButton kind="danger" :loading="isDisabling" @click="disableAlerts">
-                        <template #prefix>
-                          <FontAwesomeIcon :icon="faCheck" />
-                        </template>
-                        {{ $t('common.delete') }}
-                      </NeButton>
-                      <NeButton
-                        kind="tertiary"
-                        :disabled="isDisabling"
-                        @click="isConfirmDisable = false"
-                      >
-                        {{ $t('common.cancel') }}
-                      </NeButton>
-                    </div>
-                  </template>
-                </NeCard>
-              </template>
-            </template>
-
-            <!-- YAML view -->
-            <template v-else-if="selectedConfigTab === 'yaml'">
-              <NeCard>
-                <div class="mb-4 flex items-center justify-between gap-4">
-                  <NeHeading tag="h6">{{ $t('alerting.raw_yaml') }}</NeHeading>
-                  <NeButton kind="tertiary" size="sm" @click="copyYaml">
-                    <template #prefix>
-                      <FontAwesomeIcon :icon="yamlCopied ? faCheck : faCopy" />
-                    </template>
-                    {{ yamlCopied ? $t('alerting.yaml_copied') : $t('alerting.copy_yaml') }}
-                  </NeButton>
-                </div>
-                <pre
-                  class="overflow-auto rounded-lg bg-gray-50 p-4 font-mono text-xs text-gray-800 dark:bg-gray-800 dark:text-gray-200"
-                  >{{ rawYaml || $t('alerting.no_config') }}</pre
-                >
-              </NeCard>
-            </template>
-          </template>
-
-          <!-- no config fallback -->
-          <NeCard v-else-if="!isLoading">
-            <div class="py-8 text-center text-gray-500 dark:text-gray-400">
-              <FontAwesomeIcon :icon="faCog" class="mb-3 h-12 w-12 opacity-30" />
-              <p class="text-lg font-semibold">{{ $t('alerting.no_config') }}</p>
-              <p class="mt-1 text-sm">{{ $t('alerting.no_config_description') }}</p>
-              <NeButton
-                kind="primary"
-                class="mt-4"
-                @click="
-                  () => {
-                    isEditMode = true
-                    selectedConfigTab = 'structured'
-                  }
-                "
-              >
-                <template #prefix>
-                  <FontAwesomeIcon :icon="faPenToSquare" />
-                </template>
-                {{ $t('alerting.edit_config') }}
-              </NeButton>
-            </div>
-          </NeCard>
-        </template>
-      </template>
-    </template>
-  </div>
-</template>
diff --git a/frontend/src/views/AlertsView.vue b/frontend/src/views/AlertsView.vue
new file mode 100644
index 000000000..f7fb15813
--- /dev/null
+++ b/frontend/src/views/AlertsView.vue
@@ -0,0 +1,40 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { NeHeading, NeTabs } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { useTabs } from '@/composables/useTabs'
+import ActiveAlertsPanel from '@/components/alerts/ActiveAlertsPanel.vue'
+import AlertNotificationsPanel from '@/components/alerts/AlertNotificationsPanel.vue'
+
+const { t } = useI18n()
+
+const { tabs, selectedTab } = useTabs([
+  { name: 'active_alerts', label: t('alerts.active_alerts_tab') },
+  { name: 'notifications', label: t('alerts.notifications_tab') },
+])
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <NeHeading tag="h3" class="mb-7">{{ $t('alerts.title') }}</NeHeading>
+
+    <!-- Tab switcher -->
+    <NeTabs
+      :tabs="tabs"
+      :selected="selectedTab"
+      :sr-tabs-label="t('ne_tabs.tabs')"
+      :sr-select-tab-label="t('ne_tabs.select_a_tab')"
+      class="mb-8"
+      @select-tab="selectedTab = $event"
+    />
+
+    <!-- Tab content -->
+    <ActiveAlertsPanel v-if="selectedTab === 'active_alerts'" />
+    <AlertNotificationsPanel v-else-if="selectedTab === 'notifications'" />
+  </div>
+</template>
diff --git a/frontend/src/views/SystemDetailView.vue b/frontend/src/views/SystemDetailView.vue
index cee1fed5d..b0f4506aa 100644
--- a/frontend/src/views/SystemDetailView.vue
+++ b/frontend/src/views/SystemDetailView.vue
@@ -20,7 +20,6 @@ import { useTabs } from '@/composables/useTabs'
 import { useI18n } from 'vue-i18n'
 import SystemOverviewPanel from '@/components/systems/SystemOverviewPanel.vue'
 import SystemChangeHistoryPanel from '@/components/systems/SystemChangeHistoryPanel.vue'
-import SystemAlertHistoryPanel from '@/components/systems/SystemAlertHistoryPanel.vue'
 import SystemBackupsPanel from '@/components/systems/SystemBackupsPanel.vue'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
 import { useSystemReachability } from '@/queries/systems/systemReachability'
@@ -33,7 +32,7 @@ const { state: reachabilityState, asyncStatus: reachabilityAsyncStatus } = useSy
 const { tabs, selectedTab } = useTabs([
   { name: 'overview', label: t('system_detail.overview') },
   { name: 'change_history', label: t('system_detail.change_history') },
-  { name: 'alert_history', label: t('alerting.title') },
+  { name: 'alert_history', label: t('alerts.title') },
   { name: 'backups', label: t('backups.title') },
 ])
 
@@ -131,7 +130,7 @@ const openSystem = () => {
     />
     <SystemOverviewPanel v-if="selectedTab === 'overview'" />
     <SystemChangeHistoryPanel v-else-if="selectedTab === 'change_history'" />
-    <SystemAlertHistoryPanel v-else-if="selectedTab === 'alert_history'" />
+    <!-- <SystemAlertHistoryPanel v-else-if="selectedTab === 'alert_history'" /> -->
     <SystemBackupsPanel v-else-if="selectedTab === 'backups'" />
   </div>
 </template>