diff --git a/backend/app/stack_provisioning/graylog/schema/provision.py b/backend/app/stack_provisioning/graylog/schema/provision.py
index 8f3623e30..7ff2ff00c 100644
--- a/backend/app/stack_provisioning/graylog/schema/provision.py
+++ b/backend/app/stack_provisioning/graylog/schema/provision.py
@@ -14,10 +14,10 @@ class AvailableContentPacks(str, Enum):
         " Pipelines, and Lookup Tables for Wazuh logs and the SOCFortress SIEM stack."
     )
     # ! COMMENTING OUT UNTIL READY ! #
-    # SOCFORTRESS_FORTINET_INPUT_SYSLOG_TCP = "The Fortinet Input Syslog TCP content pack"
-    # SOCFORTRESS_FORTINET_INPUT_SYSLOG_UDP = "The Fortinet Input Syslog UDP content pack"
-    # SOCFORTRESS_FORTINET_PROCESSING_PIPELINE = "The Fortinet Processing Pipeline content pack"
-    # SOCFORTRESS_FORTINET_STREAM = "The Fortinet Stream content pack"
+    SOCFORTRESS_FORTINET_INPUT_SYSLOG_TCP = "The Fortinet Input Syslog TCP content pack"
+    SOCFORTRESS_FORTINET_INPUT_SYSLOG_UDP = "The Fortinet Input Syslog UDP content pack"
+    SOCFORTRESS_FORTINET_PROCESSING_PIPELINE = "The Fortinet Processing Pipeline content pack"
+    SOCFORTRESS_FORTINET_STREAM = "The Fortinet Stream content pack"
 
 
 class ContentPackKeywords(BaseModel):
diff --git a/frontend/src/api/monitoringAlerts.ts b/frontend/src/api/monitoringAlerts.ts
index bf0607268..b1f97708d 100644
--- a/frontend/src/api/monitoringAlerts.ts
+++ b/frontend/src/api/monitoringAlerts.ts
@@ -1,6 +1,6 @@
 import { type FlaskBaseResponse } from "@/types/flask.d"
 import { HttpClient } from "./httpClient"
-import type { AvailableMonitoringAlert } from "@/types/monitoringAlerts.d"
+import type { AvailableMonitoringAlert, MonitoringAlert } from "@/types/monitoringAlerts.d"
 
 export interface ProvisionsMonitoringAlertParams {
 	searchWithinLast: number
@@ -42,5 +42,17 @@ export default {
 	},
 	customProvision(payload: CustomProvisionPayload) {
 		return HttpClient.post<FlaskBaseResponse>(`/monitoring_alert/provision/custom`, payload)
+	},
+	listAll(signal?: AbortSignal) {
+		return HttpClient.get<FlaskBaseResponse & { monitoring_alerts: MonitoringAlert[] }>(
+			`/monitoring_alert/list`,
+			signal ? { signal } : {}
+		)
+	},
+	invoke(alertId: number) {
+		return HttpClient.post<FlaskBaseResponse>(`/monitoring_alert/invoke/${alertId}`)
+	},
+	delete(alertId: number) {
+		return HttpClient.delete<FlaskBaseResponse>(`/monitoring_alert/${alertId}`)
 	}
 }
diff --git a/frontend/src/assets/scss/helpers.scss b/frontend/src/assets/scss/helpers.scss
index 296f097c5..976de0461 100644
--- a/frontend/src/assets/scss/helpers.scss
+++ b/frontend/src/assets/scss/helpers.scss
@@ -69,7 +69,7 @@
 	}
 }
 
-.overlay {
+.over-layer {
 	background-color: rgba(var(--bg-body-rgb), 0.8);
 	position: absolute;
 	top: 0;
diff --git a/frontend/src/components/agents/OverviewSection.vue b/frontend/src/components/agents/OverviewSection.vue
index 458bab8db..adfe84afd 100644
--- a/frontend/src/components/agents/OverviewSection.vue
+++ b/frontend/src/components/agents/OverviewSection.vue
@@ -7,7 +7,7 @@
 					<template v-if="item.key === 'customer_code'">
 						<code
 							class="cursor-pointer text-primary-color"
-							@click="gotoCustomer(item.val)"
+							@click="gotoCustomer({ code: item.val })"
 							v-if="item.val && item.val !== '-'"
 						>
 							{{ item.val }}
@@ -31,7 +31,7 @@ import { type Agent } from "@/types/agents.d"
 import { useSettingsStore } from "@/stores/settings"
 import KVCard from "@/components/common/KVCard.vue"
 import Icon from "@/components/common/Icon.vue"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{
 	agent: Agent
@@ -39,8 +39,8 @@ const props = defineProps<{
 const { agent } = toRefs(props)
 
 const LinkIcon = "carbon:launch"
-const router = useRouter()
 const dFormats = useSettingsStore().dateFormat
+const { gotoCustomer } = useGoto()
 
 const propsSanitized = computed(() => {
 	const obj = []
@@ -56,10 +56,6 @@ const propsSanitized = computed(() => {
 
 	return obj
 })
-
-function gotoCustomer(code: string | number) {
-	router.push({ name: "Customers", query: { code } })
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/alerts/Alert.vue b/frontend/src/components/alerts/Alert.vue
index 816dc34ef..40418e40d 100644
--- a/frontend/src/components/alerts/Alert.vue
+++ b/frontend/src/components/alerts/Alert.vue
@@ -47,7 +47,7 @@
 								agent_id:
 								<code
 									class="cursor-pointer text-primary-color"
-									@click="gotoAgentPage(alert._source.agent_id)"
+									@click="gotoAgent(alert._source.agent_id)"
 								>
 									{{ alert._source.agent_id }}
 									<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
@@ -65,7 +65,7 @@
 								agent_labels_customer:
 								<code
 									class="cursor-pointer text-primary-color"
-									@click="gotoCustomer(alert._source.agent_labels_customer)"
+									@click="gotoCustomer({ code: alert._source.agent_labels_customer })"
 								>
 									{{ alert._source.agent_labels_customer }}
 									<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
@@ -131,13 +131,16 @@
 							<template #key>{{ key }}</template>
 							<template #value>
 								<template v-if="key === 'agent_id'">
-									<code class="cursor-pointer text-primary-color" @click="gotoAgentPage(value + '')">
+									<code class="cursor-pointer text-primary-color" @click="gotoAgent(value + '')">
 										{{ value }}
 										<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 									</code>
 								</template>
 								<template v-else-if="key === 'agent_labels_customer'">
-									<code class="cursor-pointer text-primary-color" @click="gotoCustomer(value + '')">
+									<code
+										class="cursor-pointer text-primary-color"
+										@click="gotoCustomer(value ? { code: value.toString() } : undefined)"
+									>
 										{{ value }}
 										<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 									</code>
@@ -226,9 +229,9 @@ const AlertActions = defineAsyncComponent(() => import("./AlertActions.vue"))
 import type { Alert } from "@/types/alerts.d"
 import { SimpleJsonViewer } from "vue-sjv"
 import "@/assets/scss/vuesjv-override.scss"
-import { useRouter } from "vue-router"
 import _pick from "lodash/pick"
 import KVCard from "@/components/common/KVCard.vue"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{ alert: Alert; hideActions?: boolean }>()
 const { alert, hideActions } = toRefs(props)
@@ -240,7 +243,7 @@ const MailIcon = "carbon:email"
 const AgentIcon = "carbon:police"
 const LinkIcon = "carbon:launch"
 
-const router = useRouter()
+const { gotoCustomer, gotoAgent } = useGoto()
 const loading = ref(false)
 const showDetails = ref(false)
 const dFormats = useSettingsStore().dateFormat
@@ -257,14 +260,6 @@ const agentProperties = computed(() => {
 		"agent_name"
 	])
 })
-
-function gotoAgentPage(agentId: string) {
-	router.push({ name: "Agent", params: { id: agentId } })
-}
-
-function gotoCustomer(code: string | number) {
-	router.push({ name: "Customers", query: { code } })
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/alerts/AlertsSummary.vue b/frontend/src/components/alerts/AlertsSummary.vue
index 999ec68cd..7ad078b93 100644
--- a/frontend/src/components/alerts/AlertsSummary.vue
+++ b/frontend/src/components/alerts/AlertsSummary.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="alert-summary flex flex-col">
 		<div class="header-box flex justify-between gap-4">
-			<div class="id flex items-center gap-2" @click="gotoIndicesPage(alertsSummary.index_name)">
+			<div class="id flex items-center gap-2" @click="gotoIndex(alertsSummary.index_name)">
 				<IndexIcon :health="alertsSummary.indexStats?.health" color v-if="alertsSummary.indexStats?.health" />
 				<Icon :name="PlaceholderIcon" v-else :size="18" />
 
@@ -50,8 +50,8 @@ import Alert from "./Alert.vue"
 import IndexIcon from "@/components/indices/IndexIcon.vue"
 import Icon from "@/components/common/Icon.vue"
 import type { IndexStats } from "@/types/indices.d"
-import { useRouter } from "vue-router"
 import { ref } from "vue"
+import { useGoto } from "@/composables/useGoto"
 
 export interface AlertsSummaryExt extends AlertsSummary {
 	indexStats?: IndexStats
@@ -63,12 +63,8 @@ const ExpandIcon = "carbon:chevron-down"
 const PlaceholderIcon = "ph:question"
 const LinkIcon = "carbon:launch"
 
-const router = useRouter()
 const showAllAlerts = ref(false)
-
-function gotoIndicesPage(index: string) {
-	router.push({ name: "Indices", query: { index_name: index } })
-}
+const { gotoIndex } = useGoto()
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/common/Badge.vue b/frontend/src/components/common/Badge.vue
index 3304fcf05..8c6f084db 100644
--- a/frontend/src/components/common/Badge.vue
+++ b/frontend/src/components/common/Badge.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+// TODO: refactor
 const { type, hintCursor, pointCursor, color, href, fluid } = defineProps<{
 	type?: "splitted" | "muted" | "active" | "cursor"
 	hintCursor?: boolean
diff --git a/frontend/src/components/common/SearchDialog.vue b/frontend/src/components/common/SearchDialog.vue
index e96e85ba1..da8880bf7 100644
--- a/frontend/src/components/common/SearchDialog.vue
+++ b/frontend/src/components/common/SearchDialog.vue
@@ -75,13 +75,13 @@ import { computed, onMounted, ref } from "vue"
 import { NText, NModal, NCard, NDivider, NAvatar, NScrollbar, type ScrollbarInst } from "naive-ui"
 import { useMagicKeys, whenever } from "@vueuse/core"
 import Highlighter from "vue-highlight-words"
-import { useRouter } from "vue-router"
 import { useThemeSwitch } from "@/composables/useThemeSwitch"
 import { useFullscreenSwitch } from "@/composables/useFullscreenSwitch"
 import { useSearchDialog } from "@/composables/useSearchDialog"
 import { getOS } from "@/utils"
 import Icon from "@/components/common/Icon.vue"
 import { emitter } from "@/emitter"
+import { useGoto } from "@/composables/useGoto"
 
 const SearchIcon = "ion:search-outline"
 const ArrowEnterIcon = "fluent:arrow-enter-left-24-regular"
@@ -111,13 +111,12 @@ interface Group {
 }
 type Groups = Group[]
 
-const router = useRouter()
-
 const showSearchBox = ref(false)
 const search = ref("")
 const activeItem = ref<null | string | number>(null)
 const commandIcon = ref("⌘")
 const scrollContent = ref<(ScrollbarInst & { $el: any }) | null>(null)
+const { gotoCustomer, gotoSocAlerts, gotoAlerts, gotoConnectors } = useGoto()
 
 const groups = ref<Groups>([
 	{
@@ -130,7 +129,7 @@ const groups = ref<Groups>([
 				title: "Add a Customer",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Customers", query: { action: "add-customer" } })
+					gotoCustomer({ action: "add-customer" })
 					emitter.emit("action:add-customer")
 				}
 			},
@@ -141,7 +140,7 @@ const groups = ref<Groups>([
 				title: "Configure a connector",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Connectors" })
+					gotoConnectors()
 				}
 			},
 			{
@@ -151,7 +150,7 @@ const groups = ref<Groups>([
 				title: "View Escalated Alerts",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Soc-Alerts" })
+					gotoSocAlerts()
 				}
 			},
 			{
@@ -161,7 +160,7 @@ const groups = ref<Groups>([
 				title: "View Identified Alerts",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Alerts" })
+					gotoAlerts()
 				}
 			}
 		]
diff --git a/frontend/src/components/customers/CustomerAgents.vue b/frontend/src/components/customers/CustomerAgents.vue
index 940af6847..deb73acad 100644
--- a/frontend/src/components/customers/CustomerAgents.vue
+++ b/frontend/src/components/customers/CustomerAgents.vue
@@ -8,7 +8,7 @@
 				bg-secondary
 				show-actions
 				@delete="getAgents()"
-				@click="gotoAgentPage(agent)"
+				@click="gotoAgent(agent.agent_id)"
 				class="item-appear item-appear-bottom item-appear-005"
 			/>
 			<n-empty v-if="!list.length" description="No Agents found" class="justify-center h-48" />
@@ -22,8 +22,8 @@ import AgentCard from "@/components/agents/AgentCard.vue"
 import Api from "@/api"
 import { useMessage, NSpin, NEmpty } from "naive-ui"
 import type { Customer } from "@/types/customers.d"
-import { useRouter } from "vue-router"
 import type { Agent } from "@/types/agents.d"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{
 	customer: Customer
@@ -31,14 +31,10 @@ const props = defineProps<{
 const { customer } = toRefs(props)
 
 const loading = ref(false)
-const router = useRouter()
+const { gotoAgent } = useGoto()
 const message = useMessage()
 const list = ref<Agent[] | []>([])
 
-function gotoAgentPage(agent: Agent) {
-	router.push({ name: "Agent", params: { id: agent.agent_id } })
-}
-
 function getAgents() {
 	loading.value = true
 
diff --git a/frontend/src/components/customers/healthcheck/CustomerHealthcheckItem.vue b/frontend/src/components/customers/healthcheck/CustomerHealthcheckItem.vue
index 5d7345b83..1d6efa164 100644
--- a/frontend/src/components/customers/healthcheck/CustomerHealthcheckItem.vue
+++ b/frontend/src/components/customers/healthcheck/CustomerHealthcheckItem.vue
@@ -49,7 +49,7 @@
 					<div class="flex flex-col gap-1">
 						<div class="box">
 							agent_id:
-							<code class="cursor-pointer text-primary-color" @click="gotoAgentPage(healthData.agent_id)">
+							<code class="cursor-pointer text-primary-color" @click="gotoAgent(healthData.agent_id)">
 								{{ healthData.agent_id }}
 								<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 							</code>
@@ -92,7 +92,7 @@ import type { CustomerAgentHealth, CustomerHealthcheckSource } from "@/types/cus
 import dayjs from "@/utils/dayjs"
 import { iconFromOs } from "@/utils"
 import { useSettingsStore } from "@/stores/settings"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const { healthData, source, bgSecondary, type } = defineProps<{
 	healthData: CustomerAgentHealth
@@ -106,7 +106,7 @@ const AgentIcon = "carbon:police"
 const LinkIcon = "carbon:launch"
 
 const showDetails = ref(false)
-const router = useRouter()
+const { gotoAgent } = useGoto()
 
 const agentVersion = computed(() => {
 	let agent = ""
@@ -142,10 +142,6 @@ const dFormats = useSettingsStore().dateFormat
 function formatDate(timestamp: string | number, utc: boolean = true): string {
 	return dayjs(timestamp).utc(utc).format(dFormats.datetimesec)
 }
-
-function gotoAgentPage(agentId: string) {
-	router.push({ name: "Agent", params: { id: agentId } })
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/graylog/Alerts/Item.vue b/frontend/src/components/graylog/Alerts/Item.vue
index 9807e571c..7e18bc775 100644
--- a/frontend/src/components/graylog/Alerts/Item.vue
+++ b/frontend/src/components/graylog/Alerts/Item.vue
@@ -30,10 +30,7 @@
 						</div>
 						<div class="box">
 							index_name:
-							<code
-								class="cursor-pointer text-primary-color"
-								@click="gotoIndicesPage(alertsEvent.index_name)"
-							>
+							<code class="cursor-pointer text-primary-color" @click="gotoIndex(alertsEvent.index_name)">
 								{{ alertsEvent.index_name }}
 								<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 							</code>
@@ -95,7 +92,7 @@ import { NPopover, NTimeline, NTimelineItem } from "naive-ui"
 import { useSettingsStore } from "@/stores/settings"
 import { formatDate } from "@/utils"
 import Icon from "@/components/common/Icon.vue"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const { alertsEvent } = defineProps<{ alertsEvent: AlertsEventElement }>()
 
@@ -107,17 +104,13 @@ const InfoIcon = "carbon:information"
 const TimeIcon = "carbon:time"
 const LinkIcon = "carbon:launch"
 
-const router = useRouter()
 const dFormats = useSettingsStore().dateFormat
+const { gotoIndex } = useGoto()
 
 function formatDateTime(timestamp: string): string {
 	return formatDate(timestamp, dFormats.datetimesec).toString()
 }
 
-function gotoIndicesPage(index: string) {
-	router.push({ name: "Indices", query: { index_name: index } })
-}
-
 function gotoEventsPage(event_definition_id: string) {
 	emit("clickEvent", event_definition_id)
 }
diff --git a/frontend/src/components/graylog/Metrics/UncommittedEntries.vue b/frontend/src/components/graylog/Metrics/UncommittedEntries.vue
index a34433be6..c629652bf 100644
--- a/frontend/src/components/graylog/Metrics/UncommittedEntries.vue
+++ b/frontend/src/components/graylog/Metrics/UncommittedEntries.vue
@@ -13,7 +13,7 @@
 			</div>
 		</div>
 		<div class="footer">
-			<n-button type="primary" ghost icon-placement="right" @click="gotoMessages()">
+			<n-button type="primary" ghost icon-placement="right" @click="gotoGraylogManagement('messages')">
 				<template #icon>
 					<Icon :name="LinkIcon" :size="14"></Icon>
 				</template>
@@ -27,20 +27,19 @@
 import Icon from "@/components/common/Icon.vue"
 import { NButton } from "naive-ui"
 import { computed, ref, toRefs } from "vue"
-import { useRouter } from "vue-router"
 import { useThemeStore } from "@/stores/theme"
 import dayjs from "@/utils/dayjs"
 import "@/assets/scss/apexchart-override.scss"
 import { watch } from "vue"
 import { usHealthcheckStore } from "@/stores/healthcheck"
 import apexchart from "vue3-apexcharts"
+import { useGoto } from "@/composables/useGoto"
 
 const UNCOMMITTED_JOURNAL_ENTRIES_THRESHOLD = usHealthcheckStore().uncommittedJournalEntriesThreshold
 
 const props = defineProps<{
 	value: number
 }>()
-const router = useRouter()
 const { value } = toRefs(props)
 
 const LinkIcon = "carbon:launch"
@@ -48,15 +47,12 @@ const DangerIcon = "majesticons:exclamation-line"
 
 const style = computed<{ [key: string]: any }>(() => useThemeStore().style)
 const isThemeDark = computed(() => useThemeStore().isThemeDark)
+const { gotoGraylogManagement } = useGoto()
 
 const isWarning = computed<boolean>(() => {
 	return value.value > UNCOMMITTED_JOURNAL_ENTRIES_THRESHOLD
 })
 
-function gotoMessages() {
-	router.push({ name: "Graylog-Management" })
-}
-
 const series = ref<{ name: string; data: any }[]>([
 	{
 		name: "Entries",
diff --git a/frontend/src/components/license/LicenseCheckoutResponse.vue b/frontend/src/components/license/LicenseCheckoutResponse.vue
index 289b67734..4644ec0d6 100644
--- a/frontend/src/components/license/LicenseCheckoutResponse.vue
+++ b/frontend/src/components/license/LicenseCheckoutResponse.vue
@@ -35,7 +35,7 @@ import Api from "@/api"
 import { NButton, NCard, NSpin, useMessage } from "naive-ui"
 import Icon from "@/components/common/Icon.vue"
 import type { LicenseKey } from "@/types/license"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{ type: "success" | "error"; data?: { email?: string } }>()
 const { type, data } = toRefs(props)
@@ -43,7 +43,7 @@ const { type, data } = toRefs(props)
 const ErrorIcon = "majesticons:exclamation-line"
 const LicenseIcon = "carbon:license"
 const CheckIcon = "carbon:checkmark-outline"
-const router = useRouter()
+const { gotoLicense } = useGoto()
 const message = useMessage()
 const loadingLicense = ref(false)
 const license = ref<LicenseKey | null>(null)
@@ -70,10 +70,6 @@ function getLicense(email: string) {
 		})
 }
 
-function gotoLicense() {
-	router.push({ name: "License" })
-}
-
 onBeforeMount(() => {
 	if (data.value?.email) {
 		getLicense(data.value.email)
diff --git a/frontend/src/components/license/LicenseFeatureOverlay.vue b/frontend/src/components/license/LicenseFeatureOverlay.vue
index df32dce06..48cac26ec 100644
--- a/frontend/src/components/license/LicenseFeatureOverlay.vue
+++ b/frontend/src/components/license/LicenseFeatureOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="overlay feature-overlay" v-if="showBanner">
+	<div class="over-layer feature-layer" v-if="showBanner">
 		<n-alert title="Feature required">
 			<template #icon>
 				<Icon :name="AlertIcon" :size="18"></Icon>
@@ -26,23 +26,19 @@
 import { ref } from "vue"
 import { NAlert, NButton } from "naive-ui"
 import Icon from "@/components/common/Icon.vue"
-import { useRouter } from "vue-router"
 import Api from "@/api"
 import { onBeforeMount } from "vue"
 import type { LicenseFeatures } from "@/types/license"
+import { useGoto } from "@/composables/useGoto"
 
 const { feature } = defineProps<{ feature: LicenseFeatures }>()
 
 const LicenseIcon = "carbon:license"
 const AlertIcon = "mdi:alert-outline"
 
-const router = useRouter()
+const { gotoLicense } = useGoto()
 const showBanner = ref(false)
 
-function gotoLicense() {
-	router.push({ name: "License" })
-}
-
 function checkFeature(feature: LicenseFeatures) {
 	Api.license
 		.isFeatureEnabled(feature)
diff --git a/frontend/src/components/license/bkp/LicenseCheckout.vue b/frontend/src/components/license/bkp/LicenseCheckout.vue
index 00e785296..99a10ecb4 100644
--- a/frontend/src/components/license/bkp/LicenseCheckout.vue
+++ b/frontend/src/components/license/bkp/LicenseCheckout.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { NButton, NSpin, NModal, useMessage } from "naive-ui"
+import { NButton, NModal, useMessage } from "naive-ui"
 import Icon from "@/components/common/Icon.vue"
 import Api from "@/api"
 import { onBeforeMount, ref } from "vue"
diff --git a/frontend/src/components/monitoringAlerts/Item.vue b/frontend/src/components/monitoringAlerts/Item.vue
new file mode 100644
index 000000000..53e22bc86
--- /dev/null
+++ b/frontend/src/components/monitoringAlerts/Item.vue
@@ -0,0 +1,142 @@
+<template>
+	<n-spin :show="loading" :description="loadingDelete ? 'Deleting' : 'Invoking'">
+		<div class="monitoring-alerts-item flex flex-col gap-2 px-5 py-3" :class="{ embedded }">
+			<div class="header-box flex justify-between">
+				<div class="id flex items-center">#{{ alert.id }}</div>
+			</div>
+			<div class="main-box flex items-center justify-between gap-4">
+				<div class="content">
+					<div class="title">{{ alert.alert_id }}</div>
+
+					<div class="badges-box flex flex-wrap items-center gap-3 mt-4">
+						<Badge type="active" class="cursor-pointer" @click="gotoIndex(alert.alert_index)">
+							<template #iconRight>
+								<Icon :name="LinkIcon" :size="14"></Icon>
+							</template>
+							<template #label>Index / {{ alert.alert_index }}</template>
+						</Badge>
+
+						<Badge
+							type="active"
+							class="cursor-pointer"
+							@click="gotoCustomer({ code: alert.customer_code })"
+						>
+							<template #iconRight>
+								<Icon :name="LinkIcon" :size="14"></Icon>
+							</template>
+							<template #label>Customer #{{ alert.customer_code }}</template>
+						</Badge>
+
+						<Badge type="splitted">
+							<template #label>Source</template>
+							<template #value>{{ alert.alert_source }}</template>
+						</Badge>
+					</div>
+				</div>
+
+				<AlertActions
+					class="actions-box"
+					:alert="alert"
+					@deleted="emit('deleted')"
+					@invoked="emit('invoked')"
+					@startDeleting="loadingDelete = true"
+					@stopDeleting="loadingDelete = false"
+					@startInvoking="loadingInvoke = true"
+					@stopInvoking="loadingInvoke = false"
+				/>
+			</div>
+			<div class="footer-box flex justify-between items-center gap-3">
+				<AlertActions
+					class="actions-box !flex-row"
+					:alert="alert"
+					size="small"
+					inline
+					@deleted="emit('deleted')"
+					@invoked="emit('invoked')"
+					@startDeleting="loadingDelete = true"
+					@stopDeleting="loadingDelete = false"
+					@startInvoking="loadingInvoke = true"
+					@stopInvoking="loadingInvoke = false"
+				/>
+			</div>
+		</div>
+	</n-spin>
+</template>
+
+<script setup lang="ts">
+import Icon from "@/components/common/Icon.vue"
+import Badge from "@/components/common/Badge.vue"
+import { computed, ref } from "vue"
+import AlertActions from "./ItemActions.vue"
+import { NSpin } from "naive-ui"
+import { useGoto } from "@/composables/useGoto"
+import type { MonitoringAlert } from "@/types/monitoringAlerts"
+
+const { alert, embedded } = defineProps<{
+	alert: MonitoringAlert
+	embedded?: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: "deleted"): void
+	(e: "invoked"): void
+}>()
+
+const LinkIcon = "carbon:launch"
+
+const { gotoCustomer, gotoIndex } = useGoto()
+const loadingDelete = ref(false)
+const loadingInvoke = ref(false)
+const loading = computed(() => loadingDelete.value || loadingInvoke.value)
+</script>
+
+<style lang="scss" scoped>
+.monitoring-alerts-item {
+	&:not(.embedded) {
+		border-radius: var(--border-radius);
+		background-color: var(--bg-color);
+		border: var(--border-small-050);
+	}
+	border-top: var(--border-small-050);
+	transition: all 0.2s var(--bezier-ease);
+	min-height: 100px;
+
+	.header-box {
+		font-family: var(--font-family-mono);
+		font-size: 13px;
+		.id {
+			word-break: break-word;
+			color: var(--fg-secondary-color);
+			line-height: 1.2;
+		}
+	}
+
+	.main-box {
+		word-break: break-word;
+	}
+
+	.footer-box {
+		font-size: 13px;
+		margin-top: 10px;
+		display: none;
+	}
+
+	&:not(.embedded) {
+		&:hover {
+			border-color: var(--primary-color);
+		}
+	}
+
+	@container (max-width: 550px) {
+		.main-box {
+			.actions-box {
+				display: none;
+			}
+		}
+
+		.footer-box {
+			display: flex;
+		}
+	}
+}
+</style>
diff --git a/frontend/src/components/monitoringAlerts/ItemActions.vue b/frontend/src/components/monitoringAlerts/ItemActions.vue
new file mode 100644
index 000000000..a6665387c
--- /dev/null
+++ b/frontend/src/components/monitoringAlerts/ItemActions.vue
@@ -0,0 +1,128 @@
+<template>
+	<div class="alert-actions flex flex-col gap-3 justify-center" :class="{ '!flex-row': inline }">
+		<n-button :loading="loadingInvoke" type="success" secondary :size="size" @click="invoke()">
+			<template #icon><Icon :name="InvokeIcon"></Icon></template>
+			Invoke
+		</n-button>
+		<n-button :loading="loadingDelete" :size="size" type="error" secondary @click="handleDelete()">
+			<template #icon><Icon :name="DeleteIcon"></Icon></template>
+			Delete
+		</n-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { NButton, useDialog, useMessage } from "naive-ui"
+import Icon from "@/components/common/Icon.vue"
+import Api from "@/api"
+import { computed, watch, ref } from "vue"
+import type { Size } from "naive-ui/es/button/src/interface"
+import type { MonitoringAlert } from "@/types/monitoringAlerts"
+
+const emit = defineEmits<{
+	(e: "startInvoking"): void
+	(e: "stopInvoking"): void
+	(e: "startDeleting"): void
+	(e: "stopDeleting"): void
+	(e: "startLoading"): void
+	(e: "stopLoading"): void
+	(e: "invoked"): void
+	(e: "deleted"): void
+}>()
+
+const { alert, size, inline } = defineProps<{
+	alert: MonitoringAlert
+	size?: Size
+	inline?: boolean
+}>()
+
+const DeleteIcon = "ph:trash"
+const InvokeIcon = "carbon:play"
+
+const dialog = useDialog()
+const message = useMessage()
+const loadingInvoke = ref(false)
+const loadingDelete = ref(false)
+const loading = computed(() => loadingInvoke.value || loadingDelete.value)
+
+watch(loading, val => {
+	if (val) {
+		emit("startLoading")
+	} else {
+		emit("stopLoading")
+	}
+})
+
+watch(loadingInvoke, val => {
+	if (val) {
+		emit("startInvoking")
+	} else {
+		emit("stopInvoking")
+	}
+})
+
+watch(loadingDelete, val => {
+	if (val) {
+		emit("startDeleting")
+	} else {
+		emit("stopDeleting")
+	}
+})
+
+function invoke() {
+	loadingInvoke.value = true
+
+	Api.monitoringAlerts
+		.invoke(alert.id)
+		.then(res => {
+			if (res.data.success) {
+				emit("invoked")
+				message.success(res.data?.message || "Alert invoked successfully")
+			} else {
+				message.warning(res.data?.message || "An error occurred. Please try again later.")
+			}
+		})
+		.catch(err => {
+			message.error(err.response?.data?.message || "An error occurred. Please try again later.")
+		})
+		.finally(() => {
+			loadingInvoke.value = false
+		})
+}
+
+function handleDelete() {
+	dialog.warning({
+		title: "Confirm",
+		content: "This will delete the alert, are you sure you want to proceed?",
+		positiveText: "Yes I'm sure",
+		negativeText: "Cancel",
+		onPositiveClick: () => {
+			deleteAlert()
+		},
+		onNegativeClick: () => {
+			message.info("Delete canceled")
+		}
+	})
+}
+
+function deleteAlert() {
+	loadingDelete.value = true
+
+	Api.monitoringAlerts
+		.delete(alert.id)
+		.then(res => {
+			if (res.data.success) {
+				emit("deleted")
+				message.success(res.data?.message || "Alert deleted successfully.")
+			} else {
+				message.warning(res.data?.message || "An error occurred. Please try again later.")
+			}
+		})
+		.catch(err => {
+			message.error(err.response?.data?.message || "An error occurred. Please try again later.")
+		})
+		.finally(() => {
+			loadingDelete.value = false
+		})
+}
+</script>
diff --git a/frontend/src/components/monitoringAlerts/List.vue b/frontend/src/components/monitoringAlerts/List.vue
new file mode 100644
index 000000000..018b327a9
--- /dev/null
+++ b/frontend/src/components/monitoringAlerts/List.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="monitoring-alerts-list">
+		<div class="header flex items-center justify-end gap-2" ref="header">
+			<div class="info grow flex gap-2">
+				<n-popover overlap placement="bottom-start">
+					<template #trigger>
+						<div class="bg-color border-radius">
+							<n-button size="small" class="!cursor-help">
+								<template #icon>
+									<Icon :name="InfoIcon"></Icon>
+								</template>
+							</n-button>
+						</div>
+					</template>
+					<div class="flex flex-col gap-2">
+						<div class="box">
+							Total :
+							<code>{{ total }}</code>
+						</div>
+					</div>
+				</n-popover>
+			</div>
+			<n-pagination
+				v-model:page="currentPage"
+				v-model:page-size="pageSize"
+				:page-slot="pageSlot"
+				:show-size-picker="showSizePicker"
+				:page-sizes="pageSizes"
+				:item-count="total"
+				:simple="simpleMode"
+			/>
+		</div>
+		<n-spin :show="loading">
+			<div class="list my-3">
+				<template v-if="monitoringAlerts.length">
+					<Alert
+						v-for="alert of itemsPaginated"
+						:key="alert.id"
+						:alert="alert"
+						@deleted="getData()"
+						@invoked="getData()"
+						class="item-appear item-appear-bottom item-appear-005 mb-2"
+					/>
+				</template>
+				<template v-else>
+					<n-empty description="No items found" class="justify-center h-48" v-if="!loading" />
+				</template>
+			</div>
+		</n-spin>
+		<div class="footer flex justify-end">
+			<n-pagination
+				v-model:page="currentPage"
+				:page-size="pageSize"
+				:item-count="total"
+				:page-slot="6"
+				v-if="itemsPaginated.length > 3"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeMount, computed } from "vue"
+import { useMessage, NSpin, NPopover, NButton, NEmpty, NPagination } from "naive-ui"
+import Api from "@/api"
+import Icon from "@/components/common/Icon.vue"
+import { useResizeObserver } from "@vueuse/core"
+import Alert from "./Item.vue"
+import type { MonitoringAlert } from "@/types/monitoringAlerts.d"
+
+const message = useMessage()
+const loading = ref(false)
+const monitoringAlerts = ref<MonitoringAlert[]>([])
+
+const pageSize = ref(25)
+const currentPage = ref(1)
+const simpleMode = ref(false)
+const showSizePicker = ref(true)
+const pageSizes = [10, 25, 50, 100]
+const header = ref()
+const pageSlot = ref(8)
+
+const itemsPaginated = computed(() => {
+	const from = (currentPage.value - 1) * pageSize.value
+	const to = currentPage.value * pageSize.value
+
+	return monitoringAlerts.value.slice(from, to)
+})
+
+const InfoIcon = "carbon:information"
+
+const total = computed<number>(() => {
+	return monitoringAlerts.value.length || 0
+})
+
+function getData() {
+	loading.value = true
+
+	Api.monitoringAlerts
+		.listAll()
+		.then(res => {
+			if (res.data.success) {
+				monitoringAlerts.value = res.data?.monitoring_alerts || []
+			} else {
+				message.warning(res.data?.message || "An error occurred. Please try again later.")
+			}
+		})
+		.catch(err => {
+			monitoringAlerts.value = []
+
+			message.error(err.response?.data?.message || "An error occurred. Please try again later.")
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
+
+useResizeObserver(header, entries => {
+	const entry = entries[0]
+	const { width } = entry.contentRect
+
+	pageSlot.value = width < 700 ? 5 : 8
+	simpleMode.value = width < 550
+})
+
+onBeforeMount(() => {
+	getData()
+})
+</script>
+
+<style lang="scss" scoped>
+.monitoring-alerts-list {
+	.list {
+		container-type: inline-size;
+		min-height: 200px;
+	}
+}
+</style>
diff --git a/frontend/src/components/overview/AgentsCard.vue b/frontend/src/components/overview/AgentsCard.vue
index fc86b9ee1..eeb6a915e 100644
--- a/frontend/src/components/overview/AgentsCard.vue
+++ b/frontend/src/components/overview/AgentsCard.vue
@@ -5,7 +5,7 @@
 			firstLabel="Total"
 			hovered
 			class="cursor-pointer"
-			@click="gotoAgentsPage()"
+			@click="gotoAgent()"
 			:value="total"
 			secondLabel="Online"
 			:subValue="onlineTotal"
@@ -25,10 +25,10 @@ import CardStatsDouble from "@/components/common/CardStatsDouble.vue"
 import CardStatsIcon from "@/components/common/CardStatsIcon.vue"
 import Api from "@/api"
 import { useMessage, NSpin } from "naive-ui"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const AgentsIcon = "carbon:network-3"
-const router = useRouter()
+const { gotoAgent } = useGoto()
 const message = useMessage()
 const loading = ref(false)
 const agents = ref<Agent[]>([])
@@ -61,10 +61,6 @@ function getData() {
 		})
 }
 
-function gotoAgentsPage() {
-	router.push({ name: "Agents" })
-}
-
 onBeforeMount(() => {
 	getData()
 })
diff --git a/frontend/src/components/overview/CustomersCard.vue b/frontend/src/components/overview/CustomersCard.vue
index 1131c2595..f8a0e883f 100644
--- a/frontend/src/components/overview/CustomersCard.vue
+++ b/frontend/src/components/overview/CustomersCard.vue
@@ -6,7 +6,7 @@
 			:vertical="vertical"
 			hovered
 			class="cursor-pointer h-full"
-			@click="gotoCustomersPage()"
+			@click="gotoCustomer()"
 		>
 			<template #icon>
 				<CardStatsIcon :iconName="CustomersIcon" boxed :boxSize="40"></CardStatsIcon>
@@ -22,7 +22,7 @@ import CardStats from "@/components/common/CardStats.vue"
 import Api from "@/api"
 import { useMessage, NSpin } from "naive-ui"
 import type { Customer } from "@/types/customers.d"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{
 	vertical?: boolean
@@ -30,7 +30,7 @@ const props = defineProps<{
 const { vertical } = toRefs(props)
 
 const CustomersIcon = "carbon:user-multiple"
-const router = useRouter()
+const { gotoCustomer } = useGoto()
 const message = useMessage()
 const loading = ref(false)
 const customers = ref<Customer[]>([])
@@ -59,10 +59,6 @@ function getData() {
 		})
 }
 
-function gotoCustomersPage() {
-	router.push({ name: "Customers" })
-}
-
 onBeforeMount(() => {
 	getData()
 })
diff --git a/frontend/src/components/overview/HealthcheckCard.vue b/frontend/src/components/overview/HealthcheckCard.vue
index 6486ff69b..6987b08ff 100644
--- a/frontend/src/components/overview/HealthcheckCard.vue
+++ b/frontend/src/components/overview/HealthcheckCard.vue
@@ -6,7 +6,7 @@
 			:value="total"
 			hovered
 			class="cursor-pointer"
-			@click="gotoHealthcheckPage()"
+			@click="gotoHealthcheck()"
 			secondLabel="Critical"
 			:subValue="criticalTotal"
 			:secondStatus="criticalTotal ? 'warning' : undefined"
@@ -30,11 +30,11 @@ import CardStatsIcon from "@/components/common/CardStatsIcon.vue"
 import Api from "@/api"
 import { useMessage, NSpin } from "naive-ui"
 import { InfluxDBAlertLevel, type InfluxDBAlert } from "@/types/healthchecks.d"
-import { useRouter } from "vue-router"
 import { useThemeStore } from "@/stores/theme"
+import { useGoto } from "@/composables/useGoto"
 
 const HealthcheckIcon = "ph:heartbeat"
-const router = useRouter()
+const { gotoHealthcheck } = useGoto()
 const message = useMessage()
 const loading = ref(false)
 const healthcheck = ref<InfluxDBAlert[]>([])
@@ -71,10 +71,6 @@ function getData() {
 		})
 }
 
-function gotoHealthcheckPage() {
-	router.push({ name: "Healthcheck" })
-}
-
 onBeforeMount(() => {
 	getData()
 })
diff --git a/frontend/src/components/overview/SocAlertsCard.vue b/frontend/src/components/overview/SocAlertsCard.vue
index 80452c7f7..52e58ba0a 100644
--- a/frontend/src/components/overview/SocAlertsCard.vue
+++ b/frontend/src/components/overview/SocAlertsCard.vue
@@ -6,7 +6,7 @@
 			:vertical="vertical"
 			hovered
 			class="cursor-pointer h-full"
-			@click="gotoSocAlertsPage()"
+			@click="gotoSocAlerts()"
 		>
 			<template #icon>
 				<CardStatsIcon :iconName="SOCIcon" boxed :boxSize="40"></CardStatsIcon>
@@ -22,7 +22,7 @@ import CardStats from "@/components/common/CardStats.vue"
 import Api from "@/api"
 import { useMessage, NSpin } from "naive-ui"
 import type { SocAlert } from "@/types/soc/alert.d"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{
 	vertical?: boolean
@@ -30,7 +30,7 @@ const props = defineProps<{
 const { vertical } = toRefs(props)
 
 const SOCIcon = "carbon:security"
-const router = useRouter()
+const { gotoSocAlerts } = useGoto()
 const message = useMessage()
 const loading = ref(false)
 const alerts = ref<SocAlert[]>([])
@@ -59,10 +59,6 @@ function getData() {
 		})
 }
 
-function gotoSocAlertsPage() {
-	router.push({ name: "Soc-Alerts" })
-}
-
 onBeforeMount(() => {
 	getData()
 })
diff --git a/frontend/src/components/scheduler/JobActions.vue b/frontend/src/components/scheduler/JobActions.vue
index ae1797f0c..f5095f231 100644
--- a/frontend/src/components/scheduler/JobActions.vue
+++ b/frontend/src/components/scheduler/JobActions.vue
@@ -38,7 +38,7 @@
 		v-model:show="showForm"
 		display-directive="show"
 		preset="card"
-		:style="{ maxWidth: 'min(450px, 90vw)', minHeight: 'min(300px, 90vh)', overflow: 'hidden' }"
+		:style="{ maxWidth: 'min(450px, 90vw)', overflow: 'hidden' }"
 		:title="`Update ${job.name}`"
 		:bordered="false"
 		segmented
diff --git a/frontend/src/components/soc/SocAlerts/SocAlertAssetsItem.vue b/frontend/src/components/soc/SocAlerts/SocAlertAssetsItem.vue
index 9dd9e71ea..a659d9b44 100644
--- a/frontend/src/components/soc/SocAlerts/SocAlertAssetsItem.vue
+++ b/frontend/src/components/soc/SocAlerts/SocAlertAssetsItem.vue
@@ -47,7 +47,7 @@
 							<template #label>Updated</template>
 							<template #value>{{ formatDate(asset.date_update) }}</template>
 						</Badge>
-						<Badge type="active" class="cursor-pointer" @click="gotoAgentPage(asset.asset_tags)">
+						<Badge type="active" class="cursor-pointer" @click="gotoAgent(asset.asset_tags)">
 							<template #iconRight>
 								<Icon :name="LinkIcon" :size="14"></Icon>
 							</template>
@@ -76,7 +76,7 @@
 								<template v-if="key === 'asset_tags'">
 									<code
 										class="cursor-pointer text-primary-color"
-										@click="gotoAgentPage(value)"
+										@click="gotoAgent(value)"
 										v-if="value && value !== '-'"
 									>
 										{{ value }}
@@ -132,15 +132,15 @@ import _omit from "lodash/omit"
 import dayjs from "@/utils/dayjs"
 import { isUrlLike } from "@/utils"
 import type { SocAlertAsset } from "@/types/soc/asset.d"
-import { useRouter } from "vue-router"
 import { useSettingsStore } from "@/stores/settings"
+import { useGoto } from "@/composables/useGoto"
 
 const { asset } = defineProps<{ asset: SocAlertAsset }>()
 
 const InfoIcon = "carbon:information"
 const ClockIcon = "carbon:time"
 const LinkIcon = "carbon:launch"
-const router = useRouter()
+const { gotoAgent } = useGoto()
 const showDetails = ref(false)
 
 const dFormats = useSettingsStore().dateFormat
@@ -173,10 +173,6 @@ const assetType = computed(() => {
 	return asset.asset_type || {}
 })
 
-function gotoAgentPage(agentId: string) {
-	router.push({ name: "Agent", params: { id: agentId } })
-}
-
 const formatDate = (date: string, useSec = false) => {
 	const datejs = dayjs(date)
 	if (!datejs.isValid()) return date
diff --git a/frontend/src/components/soc/SocAlerts/SocAlertItem.vue b/frontend/src/components/soc/SocAlerts/SocAlertItem.vue
index a79bedac6..a4ee88413 100644
--- a/frontend/src/components/soc/SocAlerts/SocAlertItem.vue
+++ b/frontend/src/components/soc/SocAlerts/SocAlertItem.vue
@@ -2,7 +2,7 @@
 	<n-spin
 		:show="loading"
 		:description="loadingDelete ? 'Deleting Soc Alert' : 'Loading Soc Alert'"
-		class="soc-alert-item flex flex-col gap-0"
+		class="soc-alert-item flex flex-col gap-0 min-h-36 pb-2"
 		:class="{ bookmarked: isBookmark, highlight, embedded }"
 		:id="'alert-' + alert?.alert_id"
 	>
@@ -115,7 +115,7 @@
 								>
 									<code
 										class="cursor-pointer text-primary-color"
-										@click="gotoCustomer(alert.customer.customer_code)"
+										@click="gotoCustomer({ code: alert.customer.customer_code })"
 									>
 										{{ alert.customer?.customer_name || alert.customer.customer_code || "-" }}
 										<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
@@ -214,7 +214,10 @@
 							<template #key>{{ key }}</template>
 							<template #value>
 								<template v-if="key === 'customer_code' && value && value !== 'Customer Not Found'">
-									<code class="cursor-pointer text-primary-color" @click="gotoCustomer(value)">
+									<code
+										class="cursor-pointer text-primary-color"
+										@click="gotoCustomer({ code: value })"
+									>
 										#{{ value }}
 										<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 									</code>
@@ -232,7 +235,7 @@
 							type="active"
 							style="max-width: 145px"
 							class="cursor-pointer"
-							@click="gotoUsersPage(ownerId)"
+							@click="gotoSocUsers(ownerId)"
 						>
 							<template #iconRight>
 								<Icon :name="LinkIcon" :size="14"></Icon>
@@ -327,7 +330,7 @@ import {
 import { useSettingsStore } from "@/stores/settings"
 import dayjs from "@/utils/dayjs"
 import type { SocUser } from "@/types/soc/user.d"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const checked = defineModel<boolean>("checked", { default: false })
 
@@ -383,8 +386,8 @@ const showBadges = ref(false)
 const loadingDelete = ref(false)
 const loadingData = ref(false)
 const loadingBookmark = ref(false)
-const router = useRouter()
 const message = useMessage()
+const { gotoCustomer, gotoSocUsers } = useGoto()
 
 const alert = ref(alertData.value || null)
 
@@ -448,10 +451,6 @@ function updateAlert(alertUpdated: SocAlert) {
 	}
 }
 
-function gotoUsersPage(userId?: string | number) {
-	router.push({ name: "Soc-Users", query: userId ? { user_id: userId } : {} })
-}
-
 function getAlert(id: string | number, cb?: () => void) {
 	loadingData.value = true
 
@@ -492,10 +491,6 @@ function deleted() {
 	emit("deleted")
 }
 
-function gotoCustomer(code: string | number | { [key: string]: any }) {
-	router.push({ name: "Customers", query: { code: code.toString() } })
-}
-
 watch(checked, val => {
 	emit("check", val)
 	if (val) {
diff --git a/frontend/src/components/soc/SocCases/SocCaseItem.vue b/frontend/src/components/soc/SocCases/SocCaseItem.vue
index 2ee0ccbfe..ec94bd798 100644
--- a/frontend/src/components/soc/SocCases/SocCaseItem.vue
+++ b/frontend/src/components/soc/SocCases/SocCaseItem.vue
@@ -174,7 +174,7 @@
 										>
 											<code
 												class="cursor-pointer text-primary-color"
-												@click="gotoCustomer(value)"
+												@click="gotoCustomer({ code: value })"
 											>
 												#{{ value }}
 												<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
@@ -275,7 +275,7 @@ import dayjs from "@/utils/dayjs"
 import { type SocCase, StateName, type SocCaseExt } from "@/types/soc/case.d"
 import _omit from "lodash/omit"
 import _split from "lodash/split"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const { caseData, caseId, embedded, hideSocCaseAction, hideSocAlertLink } = defineProps<{
 	caseData?: SocCase
@@ -297,7 +297,7 @@ const OwnerIcon = "carbon:user-military"
 const StatusIcon = "fluent:status-20-regular"
 const AddIcon = "carbon:add-alt"
 
-const router = useRouter()
+const { gotoCustomer } = useGoto()
 const showSocAlertDetails = ref(false)
 const showDetails = ref(false)
 const loadingDetails = ref(false)
@@ -430,10 +430,6 @@ function getDetails() {
 	}
 }
 
-function gotoCustomer(code: string | number) {
-	router.push({ name: "Customers", query: { code } })
-}
-
 watch(showDetails, val => {
 	if (val && !extendedInfo.value) {
 		getDetails()
diff --git a/frontend/src/components/soc/SocCases/SocCaseItemActions.vue b/frontend/src/components/soc/SocCases/SocCaseItemActions.vue
index ea7b10df6..0657dd3f3 100644
--- a/frontend/src/components/soc/SocCases/SocCaseItemActions.vue
+++ b/frontend/src/components/soc/SocCases/SocCaseItemActions.vue
@@ -114,7 +114,7 @@ function reopenCase() {
 function handleDelete() {
 	dialog.warning({
 		title: "Confirm",
-		content: "This will delete the case are you sure you want to proceed?",
+		content: "This will delete the case, are you sure you want to proceed?",
 		positiveText: "Yes I'm sure",
 		negativeText: "Cancel",
 		onPositiveClick: () => {
diff --git a/frontend/src/composables/useGoto.ts b/frontend/src/composables/useGoto.ts
new file mode 100644
index 000000000..2f575a00d
--- /dev/null
+++ b/frontend/src/composables/useGoto.ts
@@ -0,0 +1,78 @@
+import { useRouter } from "vue-router"
+
+export function useGoto() {
+	const router = useRouter()
+
+	function gotoCustomer(params?: { code?: string | number | { [key: string]: any }; action?: "add-customer" }) {
+		if (params?.code) {
+			router.push({ name: "Customers", query: { code: params.code.toString() } })
+		} else if (params?.action) {
+			router.push({ name: "Customers", query: { action: params.action.toString() } })
+		} else {
+			router.push({ name: "Customers" })
+		}
+	}
+
+	function gotoAgent(agentId?: string | number) {
+		if (agentId) {
+			router.push({ name: "Agent", params: { id: agentId.toString() } })
+		} else {
+			router.push({ name: "Agents" })
+		}
+	}
+
+	function gotoIndex(indexName?: string) {
+		router.push({ name: "Indices", query: indexName ? { index_name: indexName } : {} })
+	}
+
+	function gotoLicense() {
+		router.push({ name: "License" })
+	}
+
+	function gotoHealthcheck() {
+		router.push({ name: "Healthcheck" })
+	}
+
+	function gotoGraylogMetrics() {
+		router.push({ name: "Graylog-Metrics" })
+	}
+
+	function gotoGraylogManagement(tabName?: "messages" | "alerts" | "events" | "streams" | "provisioning" | "inputs") {
+		router.push({ name: "Graylog-Management", hash: tabName ? `#${tabName}` : undefined })
+	}
+
+	function gotoSocAlerts() {
+		router.push({ name: "Soc-Alerts" })
+	}
+
+	function gotoAlerts() {
+		router.push({ name: "Alerts" })
+	}
+
+	function gotoConnectors() {
+		router.push({ name: "Connectors" })
+	}
+
+	function gotoGraylogPipelines(rule?: string) {
+		router.push({ name: "Graylog-Pipelines", query: rule ? { rule } : {} })
+	}
+
+	function gotoSocUsers(userId?: string | number) {
+		router.push({ name: "Soc-Users", query: userId ? { user_id: userId } : {} })
+	}
+
+	return {
+		gotoCustomer,
+		gotoAgent,
+		gotoIndex,
+		gotoLicense,
+		gotoHealthcheck,
+		gotoGraylogMetrics,
+		gotoGraylogManagement,
+		gotoSocAlerts,
+		gotoGraylogPipelines,
+		gotoSocUsers,
+		gotoAlerts,
+		gotoConnectors
+	}
+}
diff --git a/frontend/src/composables/useHealthchecksNotify.ts b/frontend/src/composables/useHealthchecksNotify.ts
index 895165b80..214400376 100644
--- a/frontend/src/composables/useHealthchecksNotify.ts
+++ b/frontend/src/composables/useHealthchecksNotify.ts
@@ -2,13 +2,13 @@ import { computed, watch } from "vue"
 import { usHealthcheckStore } from "@/stores/healthcheck"
 import { useNotifications, type Notification } from "./useNotifications"
 import { IndexHealth } from "@/types/indices.d"
-import { useRouter } from "vue-router"
 import _capitalize from "lodash/capitalize"
+import { useGoto } from "./useGoto"
 
 export function useHealthchecksNotify() {
 	return {
 		init: () => {
-			const router = useRouter()
+			const { gotoHealthcheck, gotoIndex, gotoGraylogMetrics } = useGoto()
 
 			const uncommittedJournalEntriesThreshold = usHealthcheckStore().uncommittedJournalEntriesThreshold
 			const uncommittedJournalEntries = computed(() => usHealthcheckStore().uncommittedJournalEntries)
@@ -29,7 +29,7 @@ export function useHealthchecksNotify() {
 						read: false,
 						date: new Date(),
 						action() {
-							router.push({ name: "Graylog-Metrics" })
+							gotoGraylogMetrics()
 						},
 						actionTitle: "See Graylog Metrics"
 					}
@@ -55,7 +55,7 @@ export function useHealthchecksNotify() {
 						read: false,
 						date: new Date(),
 						action() {
-							router.push({ name: "Indices" })
+							gotoIndex()
 						},
 						actionTitle: "See Cluster"
 					}
@@ -81,7 +81,7 @@ export function useHealthchecksNotify() {
 						read: false,
 						date: new Date(),
 						action() {
-							router.push({ name: "Healthcheck" })
+							gotoHealthcheck()
 						},
 						actionTitle: "See Healthcheck"
 					}
diff --git a/frontend/src/layouts/common/Navbar/items.tsx b/frontend/src/layouts/common/Navbar/items.tsx
index 77fffd441..1099700af 100644
--- a/frontend/src/layouts/common/Navbar/items.tsx
+++ b/frontend/src/layouts/common/Navbar/items.tsx
@@ -194,6 +194,19 @@ export default function getItems(mode: "vertical" | "horizontal", collapsed: boo
 							{ default: () => "Users" }
 						),
 					key: "Soc-Users"
+				},
+				{
+					label: () =>
+						h(
+							RouterLink,
+							{
+								to: {
+									name: "Soc-PendingAlerts"
+								}
+							},
+							{ default: () => "Pending Alerts" }
+						),
+					key: "Soc-PendingAlerts"
 				}
 			]
 		},
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 42e5d41b8..c16d6de63 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -117,6 +117,12 @@ const router = createRouter({
 					name: "Soc-Users",
 					component: () => import("@/views/soc/Users.vue"),
 					meta: { title: "SOC Users" }
+				},
+				{
+					path: "pending-alerts",
+					name: "Soc-PendingAlerts",
+					component: () => import("@/views/soc/PendingAlerts.vue"),
+					meta: { title: "SOC Pending Alerts" }
 				}
 			]
 		},
diff --git a/frontend/src/types/monitoringAlerts.d.ts b/frontend/src/types/monitoringAlerts.d.ts
index 64a42dca3..15302eb9e 100644
--- a/frontend/src/types/monitoringAlerts.d.ts
+++ b/frontend/src/types/monitoringAlerts.d.ts
@@ -2,3 +2,11 @@ export interface AvailableMonitoringAlert {
 	name: string
 	value: string
 }
+
+export interface MonitoringAlert {
+	id: number
+	alert_id: string
+	alert_index: string
+	customer_code: string
+	alert_source: string
+}
diff --git a/frontend/src/views/Overview.vue b/frontend/src/views/Overview.vue
index 6d831678b..19d5388fc 100644
--- a/frontend/src/views/Overview.vue
+++ b/frontend/src/views/Overview.vue
@@ -36,7 +36,7 @@
 			</div>
 		</div>
 		<div class="section">
-			<IndicesMarquee @click="gotoIndicesPage" />
+			<IndicesMarquee @click="gotoIndex($event.index)" />
 		</div>
 		<div class="section">
 			<div class="columns">
@@ -49,7 +49,7 @@
 			</div>
 		</div>
 		<div class="section">
-			<PipeList minHeight="28px" @open-rule="gotoPipelinesPage($event)" />
+			<PipeList minHeight="28px" @open-rule="gotoGraylogPipelines($event)" />
 		</div>
 
 		<n-drawer
@@ -73,7 +73,6 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import { NButton, NDrawer, NDrawerContent } from "naive-ui"
-import { useRouter } from "vue-router"
 import ClusterHealth from "@/components/indices/ClusterHealth.vue"
 import NodeAllocation from "@/components/indices/NodeAllocation.vue"
 import IndicesMarquee from "@/components/indices/Marquee.vue"
@@ -85,23 +84,15 @@ import HealthcheckCard from "@/components/overview/HealthcheckCard.vue"
 // import SocAlertsCard from "@/components/overview/SocAlertsCard.vue"
 import CustomersCard from "@/components/overview/CustomersCard.vue"
 import PipeList from "@/components/graylog/Pipelines/PipeList.vue"
-import type { IndexStats } from "@/types/indices.d"
 import { useResizeObserver } from "@vueuse/core"
 import Icon from "@/components/common/Icon.vue"
+import { useGoto } from "@/composables/useGoto"
 
 const QuickActionsIcon = "ant-design:thunderbolt-outlined"
-const router = useRouter()
 const page = ref()
 const cardDirection = ref<"horizontal" | "vertical">("horizontal")
 const showQuickActions = ref(false)
-
-function gotoIndicesPage(index: IndexStats) {
-	router.push({ name: "Indices", query: { index_name: index.index } })
-}
-
-function gotoPipelinesPage(rule: string) {
-	router.push({ name: "Graylog-Pipelines", query: { rule } })
-}
+const { gotoIndex, gotoGraylogPipelines } = useGoto()
 
 useResizeObserver(page, entries => {
 	const entry = entries[0]
diff --git a/frontend/src/views/ReportCreation.vue b/frontend/src/views/ReportCreation.vue
index d31207a8d..417f832e6 100644
--- a/frontend/src/views/ReportCreation.vue
+++ b/frontend/src/views/ReportCreation.vue
@@ -8,7 +8,7 @@
 			hide-panels-select
 		/>
 		<ReportPanels :timerange="timerange" :org="org" :dashboard="dashboard" :panels="panels" />
-		<div class="overlay mobile-overlay">
+		<div class="over-layer mobile-layer">
 			<n-alert>
 				<template #icon>
 					<Icon :name="AlertIcon" :size="18"></Icon>
@@ -45,7 +45,7 @@ const panels = ref<Panel[]>([])
 	overflow: hidden;
 	position: relative;
 
-	.mobile-overlay {
+	.mobile-layer {
 		display: none;
 		@media (max-width: $sidebar-bp) {
 			display: flex;
diff --git a/frontend/src/views/agents/Agents.vue b/frontend/src/views/agents/Agents.vue
index 19071e437..817c1e94a 100644
--- a/frontend/src/views/agents/Agents.vue
+++ b/frontend/src/views/agents/Agents.vue
@@ -10,7 +10,7 @@
 					:agents-critical="agentsCritical"
 					:agents-online="agentsOnline"
 					@sync="syncAgents()"
-					@click="gotoAgentPage"
+					@click="gotoAgent($event.agent_id)"
 				/>
 			</div>
 			<div class="main grow flex flex-col overflow-hidden">
@@ -24,7 +24,7 @@
 									:agent="agent"
 									show-actions
 									@delete="syncAgents()"
-									@click="gotoAgentPage(agent)"
+									@click="gotoAgent(agent.agent_id)"
 									class="item-appear item-appear-bottom item-appear-005"
 								/>
 							</template>
@@ -58,12 +58,12 @@ import { AgentStatus, type Agent } from "@/types/agents.d"
 import AgentCard from "@/components/agents/AgentCard.vue"
 import AgentToolbar from "@/components/agents/AgentToolbar.vue"
 import Api from "@/api"
-import { useRouter } from "vue-router"
 import { useMessage, NSpin, NScrollbar, NEmpty, NPagination } from "naive-ui"
 import _debounce from "lodash/debounce"
+import { useGoto } from "@/composables/useGoto"
 
 const message = useMessage()
-const router = useRouter()
+const { gotoAgent } = useGoto()
 const loadingAgents = ref(false)
 const loadingSync = ref(false)
 const agents = ref<Agent[]>([])
@@ -106,10 +106,6 @@ const agentsOnline = computed(() => {
 	return agents.value.filter(({ wazuh_agent_status }) => wazuh_agent_status === AgentStatus.Active)
 })
 
-function gotoAgentPage(agent: Agent) {
-	router.push({ name: "Agent", params: { id: agent.agent_id } })
-}
-
 function getAgents() {
 	loadingAgents.value = true
 
diff --git a/frontend/src/views/agents/Overview.vue b/frontend/src/views/agents/Overview.vue
index 23e15007b..c5544eb2f 100644
--- a/frontend/src/views/agents/Overview.vue
+++ b/frontend/src/views/agents/Overview.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="page">
 		<div class="agent-toolbar">
-			<div class="back-btn" @click="gotoAgents()">
+			<div class="back-btn" @click="gotoAgent()">
 				<Icon :name="ArrowIcon" :size="16"></Icon>
 				<span>Agents list</span>
 			</div>
@@ -125,11 +125,13 @@ import ArtifactsCollect from "@/components/artifacts/ArtifactsCollect.vue"
 import ArtifactsCommand from "@/components/artifacts/ArtifactsCommand.vue"
 import ArtifactsQuarantine from "@/components/artifacts/ArtifactsQuarantine.vue"
 import ActiveResponseAgent from "@/components/activeResponse/ActiveResponseAgent.vue"
+import { useGoto } from "@/composables/useGoto"
 
 const StarIcon = "carbon:star"
 const QuarantinedIcon = "ph:seal-warning-light"
 const ArrowIcon = "carbon:arrow-left"
 
+const { gotoAgent } = useGoto()
 const message = useMessage()
 const router = useRouter()
 const dialog = useDialog()
@@ -159,12 +161,12 @@ function getAgent() {
 					agent.value = res.data.agents[0] || null
 				} else {
 					message.error(res.data?.message || "An error occurred. Please try again later.")
-					gotoAgents()
+					gotoAgent()
 				}
 			})
 			.catch(err => {
 				message.error(err.response?.data?.message || "An error occurred. Please try again later.")
-				gotoAgents()
+				gotoAgent()
 			})
 			.finally(() => {
 				loadingAgent.value = false
@@ -201,7 +203,7 @@ function handleDelete() {
 				loadingAgent.value = true
 			},
 			cbSuccess: () => {
-				gotoAgents()
+				gotoAgent()
 			},
 			cbAfter: () => {
 				loadingAgent.value = false
@@ -210,10 +212,6 @@ function handleDelete() {
 	}
 }
 
-function gotoAgents() {
-	router.push({ name: "Agents" })
-}
-
 onBeforeMount(() => {
 	if (route.params.id) {
 		agentId.value = route.params.id.toString()
diff --git a/frontend/src/views/soc/PendingAlerts.vue b/frontend/src/views/soc/PendingAlerts.vue
new file mode 100644
index 000000000..2f9c3de0f
--- /dev/null
+++ b/frontend/src/views/soc/PendingAlerts.vue
@@ -0,0 +1,9 @@
+<template>
+	<div class="page">
+		<MonitoringAlerts />
+	</div>
+</template>
+
+<script setup lang="ts">
+import MonitoringAlerts from "@/components/monitoringAlerts/List.vue"
+</script>