From 12bfc52ee6ffa8ff1682a7445edbe52e2391292a Mon Sep 17 00:00:00 2001
From: Hoda <107242553+hodanoori@users.noreply.github.com>
Date: Thu, 8 Jan 2026 09:38:37 +0100
Subject: [PATCH 01/11] feat(heureka): adds image details page (#1393)

* feat(heureka): adds image details page

* chore(heureka): removes image details panel

* feat(heureka): navigate from service panel to image details page

* chore(heureka): adds changeset

* chore(heureka): adjusts tests

* chore(heureka): makes navigation checks generic

* chore(heureka): makes navigation checks generic

* fix(heureka): fixes prettier issue

* feat(heureka): improves navigation and url definition

* chore(heureka): adjusts test
---
 .changeset/sixty-worms-play.md                |   5 +
 apps/heureka/src/api/createRemediation.tsx    |  33 ++
 apps/heureka/src/api/deleteRemediation.tsx    |  29 ++
 apps/heureka/src/api/fetchImageVersions.tsx   |  67 +++
 apps/heureka/src/api/fetchRemediations.tsx    |  35 ++
 .../ImageDetails/FalsePositiveModal/index.tsx |  94 ++++
 .../IssuesDataRows/IssuesDataRow/index.tsx    | 135 ++++++
 .../ImageIssuesList/IssuesDataRows/index.tsx  |  14 +-
 .../RemediatedIssueDataRow/index.tsx          |  97 +++++
 .../RemediatedIssuesDataRows/index.tsx        |  59 +++
 .../ImageDetails/ImageIssuesList/index.tsx    | 150 +++++++
 .../ImageVersionOccurrences.tsx               |   0
 .../ImageDetails/ImageVersionsList/index.tsx  |  74 ++++
 .../components/Service/ImageDetails/index.tsx | 142 ++++++
 .../IssuesDataRows/IssuesDataRow/index.tsx    |  79 ----
 .../ImageIssuesList/index.tsx                 |  97 -----
 .../Service/ImageDetailsPanel/index.tsx       |  88 ----
 .../ImageVersionIssuesDataRows/index.tsx      |  43 ++
 .../ImageVersionIssuesList/index.tsx          |  57 +++
 .../ImageVersionOccurrences.tsx               | 115 +++++
 .../Service/ImageVersionDetails/index.tsx     | 124 ++++++
 apps/heureka/src/components/Service/index.tsx |  58 +--
 .../ServicesList/ServicePanel.test.tsx        |   4 +-
 .../Services/ServicesList/ServicePanel.tsx    |  44 +-
 apps/heureka/src/components/Services/utils.ts | 212 +++++++++
 .../src/components/common/Navigation.tsx      |  47 +-
 apps/heureka/src/generated/graphql.ts         | 403 +++++++++++++++++-
 .../Remediations/createRemediation.graphql    |  21 +
 .../Remediations/deleteRemediation.graphql    |   7 +
 .../Remediations/getRemediations.graphql      |  19 +
 .../graphql/Services/getImageVersions.graphql |  97 +++++
 apps/heureka/src/routeTree.gen.ts             |  83 +++-
 apps/heureka/src/routes/services/$service.tsx |  40 +-
 .../services/$service/images/$image.tsx       |  57 +++
 .../images/$image/versions/$version.tsx       |  56 +++
 35 files changed, 2332 insertions(+), 353 deletions(-)
 create mode 100644 .changeset/sixty-worms-play.md
 create mode 100644 apps/heureka/src/api/createRemediation.tsx
 create mode 100644 apps/heureka/src/api/deleteRemediation.tsx
 create mode 100644 apps/heureka/src/api/fetchImageVersions.tsx
 create mode 100644 apps/heureka/src/api/fetchRemediations.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
 rename apps/heureka/src/components/Service/{ImageDetailsPanel => ImageDetails}/ImageIssuesList/IssuesDataRows/index.tsx (67%)
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
 rename apps/heureka/src/components/Service/{ImageDetailsPanel => ImageDetails}/ImageVersionOccurrences.tsx (100%)
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageDetails/index.tsx
 delete mode 100644 apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
 delete mode 100644 apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/index.tsx
 delete mode 100644 apps/heureka/src/components/Service/ImageDetailsPanel/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionOccurrences.tsx
 create mode 100644 apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
 create mode 100644 apps/heureka/src/graphql/Remediations/createRemediation.graphql
 create mode 100644 apps/heureka/src/graphql/Remediations/deleteRemediation.graphql
 create mode 100644 apps/heureka/src/graphql/Remediations/getRemediations.graphql
 create mode 100644 apps/heureka/src/graphql/Services/getImageVersions.graphql
 create mode 100644 apps/heureka/src/routes/services/$service/images/$image.tsx
 create mode 100644 apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx

diff --git a/.changeset/sixty-worms-play.md b/.changeset/sixty-worms-play.md
new file mode 100644
index 0000000000..2704986b59
--- /dev/null
+++ b/.changeset/sixty-worms-play.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-heureka": patch
+---
+
+Adds image details page and removes image details panel
diff --git a/apps/heureka/src/api/createRemediation.tsx b/apps/heureka/src/api/createRemediation.tsx
new file mode 100644
index 0000000000..4830d0922e
--- /dev/null
+++ b/apps/heureka/src/api/createRemediation.tsx
@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApolloClient } from "@apollo/client"
+import {
+  CreateRemediationDocument,
+  CreateRemediationMutation,
+  CreateRemediationMutationVariables,
+  RemediationInput,
+} from "../generated/graphql"
+
+type CreateRemediationParams = {
+  apiClient: ApolloClient<unknown>
+  input: RemediationInput
+}
+
+export const createRemediation = async ({
+  apiClient,
+  input,
+}: CreateRemediationParams): Promise<CreateRemediationMutation["createRemediation"]> => {
+  const result = await apiClient.mutate<CreateRemediationMutation, CreateRemediationMutationVariables>({
+    mutation: CreateRemediationDocument,
+    variables: { input },
+  })
+
+  if (!result.data?.createRemediation) {
+    throw new Error("Failed to create remediation")
+  }
+
+  return result.data.createRemediation
+}
diff --git a/apps/heureka/src/api/deleteRemediation.tsx b/apps/heureka/src/api/deleteRemediation.tsx
new file mode 100644
index 0000000000..3563ca4e11
--- /dev/null
+++ b/apps/heureka/src/api/deleteRemediation.tsx
@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApolloClient } from "@apollo/client"
+import {
+  DeleteRemediationDocument,
+  DeleteRemediationMutation,
+  DeleteRemediationMutationVariables,
+} from "../generated/graphql"
+
+type DeleteRemediationParams = {
+  apiClient: ApolloClient<unknown>
+  remediationId: string
+}
+
+export const deleteRemediation = async ({ apiClient, remediationId }: DeleteRemediationParams): Promise<string> => {
+  const result = await apiClient.mutate<DeleteRemediationMutation, DeleteRemediationMutationVariables>({
+    mutation: DeleteRemediationDocument,
+    variables: { id: remediationId },
+  })
+
+  if (!result.data?.deleteRemediation) {
+    throw new Error("Failed to delete remediation")
+  }
+
+  return result.data.deleteRemediation
+}
diff --git a/apps/heureka/src/api/fetchImageVersions.tsx b/apps/heureka/src/api/fetchImageVersions.tsx
new file mode 100644
index 0000000000..5d1c579668
--- /dev/null
+++ b/apps/heureka/src/api/fetchImageVersions.tsx
@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  GetImageVersionsDocument,
+  GetImageVersionsQuery,
+  GetImageVersionsQueryResult,
+  ImageVersionFilter,
+} from "../generated/graphql"
+import { RouteContext } from "../routes/-types"
+
+type FetchImageVersionsParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
+  filter: ImageVersionFilter
+  after?: string | null
+  first?: number
+  firstVulnerabilities?: number
+  afterVulnerabilities?: string | null
+  firstOccurences?: number
+  afterOccurences?: string | null
+}
+
+export const fetchImageVersions = ({
+  queryClient,
+  apiClient,
+  filter,
+  after,
+  first,
+  firstVulnerabilities,
+  afterVulnerabilities,
+  firstOccurences,
+  afterOccurences,
+}: FetchImageVersionsParams): Promise<GetImageVersionsQueryResult> => {
+  const queryKey = [
+    "imageVersions",
+    filter,
+    after,
+    first,
+    firstVulnerabilities,
+    afterVulnerabilities,
+    firstOccurences,
+    afterOccurences,
+  ]
+
+  // Invalidate cache first to ensure queryFn is always called (forces network request)
+  // Then use ensureQueryData to maintain promise stability (like other fetch functions)
+  queryClient.invalidateQueries({ queryKey })
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetImageVersionsQuery>({
+        query: GetImageVersionsDocument,
+        variables: {
+          filter,
+          first,
+          after,
+          firstVulnerabilities,
+          afterVulnerabilities,
+          firstOccurences,
+          afterOccurences,
+        },
+        fetchPolicy: "network-only", // Force network request to always fetch fresh data
+      }),
+  })
+}
diff --git a/apps/heureka/src/api/fetchRemediations.tsx b/apps/heureka/src/api/fetchRemediations.tsx
new file mode 100644
index 0000000000..e2cf8b125f
--- /dev/null
+++ b/apps/heureka/src/api/fetchRemediations.tsx
@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  GetRemediationsDocument,
+  GetRemediationsQuery,
+  GetRemediationsQueryResult,
+  RemediationFilter,
+} from "../generated/graphql"
+import { RouteContext } from "../routes/-types"
+
+type FetchRemediationsParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
+  filter?: RemediationFilter
+}
+
+export const fetchRemediations = ({
+  queryClient,
+  apiClient,
+  filter,
+}: FetchRemediationsParams): Promise<GetRemediationsQueryResult> => {
+  const queryKey = ["remediations", filter]
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetRemediationsQuery>({
+        query: GetRemediationsDocument,
+        variables: {
+          filter,
+        },
+      }),
+  })
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
new file mode 100644
index 0000000000..6ab4ea3a05
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from "react"
+import { Modal, ModalFooter, Button, Stack, Textarea } from "@cloudoperators/juno-ui-components"
+import { RemediationInput, RemediationTypeValues } from "../../../../generated/graphql"
+
+type FalsePositiveModalProps = {
+  open: boolean
+  onClose: () => void
+  onConfirm: (input: RemediationInput) => Promise<void>
+  vulnerability: string
+  service: string
+  image: string
+}
+
+const CONFIRM_LABEL = "Mark as False Positive"
+const CANCEL_LABEL = "Cancel"
+
+export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  vulnerability,
+  service,
+  image,
+}) => {
+  const [description, setDescription] = useState<string>("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleConfirm = async () => {
+    setIsSubmitting(true)
+    try {
+      const input: RemediationInput = {
+        type: RemediationTypeValues.FalsePositive,
+        vulnerability,
+        service,
+        image,
+        description: description || undefined,
+      }
+      await onConfirm(input)
+      setDescription("")
+    } catch (error) {
+      console.error("Failed to create remediation:", error)
+      // Error handling is done in the parent component
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleClose = () => {
+    setDescription("")
+    onClose()
+  }
+
+  return (
+    <Modal
+      title="Mark as False Positive"
+      open={open}
+      onCancel={handleClose}
+      modalFooter={
+        <ModalFooter>
+          <Stack direction="horizontal" gap="2" distribution="end" className="w-full">
+            <Button onClick={handleClose} label={CANCEL_LABEL} disabled={isSubmitting} />
+            <Button onClick={handleConfirm} label={CONFIRM_LABEL} variant="primary" disabled={isSubmitting} />
+          </Stack>
+        </ModalFooter>
+      }
+    >
+      <Stack gap="4" direction="vertical">
+        <div>
+          <strong>Vulnerability:</strong> {vulnerability}
+        </div>
+        <div>
+          <strong>Service:</strong> {service}
+        </div>
+        <div>
+          <strong>Image:</strong> {image}
+        </div>
+        <div>
+          <Textarea
+            label="Description (optional)"
+            placeholder="Add a description explaining why this is a false positive..."
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={4}
+          />
+        </div>
+      </Stack>
+    </Modal>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
new file mode 100644
index 0000000000..692122b581
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
@@ -0,0 +1,135 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from "react"
+import {
+  DataGridRow,
+  DataGridCell,
+  Stack,
+  PopupMenu,
+  PopupMenuOptions,
+  PopupMenuItem,
+} from "@cloudoperators/juno-ui-components"
+import { Icon } from "@cloudoperators/juno-ui-components"
+import { IssueIcon } from "../../../../../common/IssueIcon"
+import { IssueTimestamp } from "../../../../../common/IssueTimestamp"
+import { ImageVulnerability } from "../../../../../Services/utils"
+import { getSeverityColor, useTextOverflow } from "../../../../../../utils"
+import { FalsePositiveModal } from "../../../FalsePositiveModal"
+import { useRouteContext } from "@tanstack/react-router"
+import { createRemediation } from "../../../../../../api/createRemediation"
+import { RemediationInput } from "../../../../../../generated/graphql"
+
+const cellSeverityClasses = (severity: string) => {
+  const borderColor = getSeverityColor(severity.toLowerCase())
+
+  return `
+    border-l-2
+    ${borderColor}
+    h-full
+    pl-5
+  `
+}
+
+type IssuesDataRowProps = {
+  issue: ImageVulnerability
+  service: string
+  image: string
+  showFalsePositiveAction?: boolean
+}
+
+export const IssuesDataRow = ({ issue, service, image, showFalsePositiveAction = true }: IssuesDataRowProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const { needsExpansion, textRef } = useTextOverflow(issue.description)
+  const { apiClient } = useRouteContext({ from: "/services/$service" })
+
+  const toggleDescription = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsExpanded(!isExpanded)
+  }
+
+  const handleFalsePositiveClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const handleModalConfirm = async (input: RemediationInput) => {
+    try {
+      await createRemediation({ apiClient, input })
+      setIsModalOpen(false)
+      // Optionally show a success message or refresh data
+    } catch (error) {
+      console.error("Failed to create remediation:", error)
+      // Optionally show an error message
+    }
+  }
+
+  const handleModalClose = () => {
+    setIsModalOpen(false)
+  }
+
+  return (
+    <>
+      <DataGridRow>
+        <DataGridCell className="pl-0">
+          <div className={cellSeverityClasses(issue.severity)}>
+            <IssueIcon severity={issue.severity} />
+          </div>
+        </DataGridCell>
+
+        <DataGridCell className="whitespace-nowrap">
+          <Stack gap="2" direction="vertical">
+            <span>{issue.name}</span>
+            {issue.sourceUrl && issue.sourceUrl !== "-" && (
+              <a href={issue.sourceUrl} target="_blank" rel="noopener noreferrer" className="link-hover">
+                <Stack gap="1.5" alignment="center">
+                  <Icon icon="openInNew" size="16" />
+                  <span>Vulnerability source</span>
+                </Stack>
+              </a>
+            )}
+          </Stack>
+        </DataGridCell>
+        <DataGridCell className="whitespace-nowrap">
+          <IssueTimestamp targetDate={issue.earliestTargetRemediationDate} />
+        </DataGridCell>
+        <DataGridCell>
+          <Stack gap="2" direction="vertical">
+            <span ref={textRef} className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis"}>
+              {issue.description}
+            </span>
+            {issue.description && needsExpansion && (
+              <a href="#" onClick={toggleDescription} className="link-hover">
+                <Stack alignment="center">
+                  {isExpanded ? "Show less" : "Show more"}
+                  <Icon color="global-text" icon={isExpanded ? "expandLess" : "expandMore"} />
+                </Stack>
+              </a>
+            )}
+          </Stack>
+        </DataGridCell>
+        {showFalsePositiveAction && (
+          <DataGridCell className="cursor-default interactive" onClick={(e) => e.stopPropagation()}>
+            <PopupMenu icon="moreVert" className="whitespace-nowrap">
+              <PopupMenuOptions>
+                <PopupMenuItem label="False-positive" onClick={handleFalsePositiveClick} />
+              </PopupMenuOptions>
+            </PopupMenu>
+          </DataGridCell>
+        )}
+      </DataGridRow>
+      {showFalsePositiveAction && (
+        <FalsePositiveModal
+          open={isModalOpen}
+          onClose={handleModalClose}
+          onConfirm={handleModalConfirm}
+          vulnerability={issue.name}
+          service={service}
+          image={image}
+        />
+      )}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
similarity index 67%
rename from apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/index.tsx
rename to apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
index 37e73be601..4913b38174 100644
--- a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
@@ -4,29 +4,31 @@
  */
 
 import React, { use } from "react"
-import { ApolloQueryResult } from "@apollo/client"
+import { ObservableQuery } from "@apollo/client"
 import { EmptyDataGridRow } from "../../../../common/EmptyDataGridRow"
 import { IssuesDataRow } from "./IssuesDataRow"
 import { getNormalizedImageVulnerabilitiesResponse } from "../../../../Services/utils"
 import { GetImagesQuery } from "../../../../../generated/graphql"
 
 type IssuesDataRowsProps = {
-  issuesPromise: Promise<ApolloQueryResult<GetImagesQuery>>
+  issuesPromise: Promise<ObservableQuery.Result<GetImagesQuery>>
+  service: string
+  image: string
 }
 
-export const IssuesDataRows = ({ issuesPromise }: IssuesDataRowsProps) => {
+export const IssuesDataRows = ({ issuesPromise, service, image }: IssuesDataRowsProps) => {
   const { error, data } = use(issuesPromise)
   const { vulnerabilities } = getNormalizedImageVulnerabilitiesResponse(data as GetImagesQuery | undefined)
 
   if (error) {
-    return <EmptyDataGridRow colSpan={4}>Error loading vulnerabilities: {error.message}</EmptyDataGridRow>
+    return <EmptyDataGridRow colSpan={5}>Error loading vulnerabilities: {error.message}</EmptyDataGridRow>
   }
 
   if (vulnerabilities.length === 0) {
-    return <EmptyDataGridRow colSpan={4}>No vulnerabilities found! 🚀</EmptyDataGridRow>
+    return <EmptyDataGridRow colSpan={5}>No vulnerabilities found! 🚀</EmptyDataGridRow>
   }
 
   return vulnerabilities.map((vulnerability) => (
-    <IssuesDataRow key={vulnerability.id || vulnerability.name} issue={vulnerability} />
+    <IssuesDataRow key={vulnerability.id || vulnerability.name} issue={vulnerability} service={service} image={image} />
   ))
 }
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/index.tsx
new file mode 100644
index 0000000000..fde6e8ec46
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/index.tsx
@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from "react"
+import {
+  DataGridRow,
+  DataGridCell,
+  Stack,
+  PopupMenu,
+  PopupMenuOptions,
+  PopupMenuItem,
+} from "@cloudoperators/juno-ui-components"
+import { Icon } from "@cloudoperators/juno-ui-components"
+import { RemediatedVulnerability } from "../../../../../Services/utils"
+import { useTextOverflow } from "../../../../../../utils"
+
+const cellSeverityClasses = () => {
+  // For remediated vulnerabilities, we don't have severity info
+  // Using a neutral border color
+  return `
+    border-l-2
+    border-theme-default
+    h-full
+    pl-5
+  `
+}
+
+type RemediatedIssueDataRowProps = {
+  remediation: RemediatedVulnerability
+  onRevert: (remediationId: string) => Promise<void>
+}
+
+export const RemediatedIssueDataRow = ({ remediation, onRevert }: RemediatedIssueDataRowProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isReverting, setIsReverting] = useState(false)
+  const { needsExpansion, textRef } = useTextOverflow(remediation.description || "")
+
+  const toggleDescription = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsExpanded(!isExpanded)
+  }
+
+  const handleRevertClick = async () => {
+    setIsReverting(true)
+    try {
+      await onRevert(remediation.remediationId)
+    } catch (error) {
+      console.error("Failed to revert remediation:", error)
+    } finally {
+      setIsReverting(false)
+    }
+  }
+
+  return (
+    <DataGridRow>
+      <DataGridCell className="pl-0">
+        <div className={cellSeverityClasses()}>
+          <Icon icon="checkCircle" color="success" />
+        </div>
+      </DataGridCell>
+
+      <DataGridCell className="whitespace-nowrap">
+        <Stack gap="2" direction="vertical">
+          <span>{remediation.vulnerability || "N/A"}</span>
+        </Stack>
+      </DataGridCell>
+      <DataGridCell>
+        <Stack gap="2" direction="vertical">
+          <span ref={textRef} className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis"}>
+            {remediation.description || "No description available"}
+          </span>
+          {remediation.description && needsExpansion && (
+            <a href="#" onClick={toggleDescription} className="link-hover">
+              <Stack alignment="center">
+                {isExpanded ? "Show less" : "Show more"}
+                <Icon color="global-text" icon={isExpanded ? "expandLess" : "expandMore"} />
+              </Stack>
+            </a>
+          )}
+        </Stack>
+      </DataGridCell>
+      <DataGridCell className="cursor-default interactive" onClick={(e) => e.stopPropagation()}>
+        <PopupMenu icon="moreVert" className="whitespace-nowrap" disabled={isReverting}>
+          <PopupMenuOptions>
+            <PopupMenuItem
+              label={isReverting ? "Reverting..." : "Revert false positive"}
+              onClick={handleRevertClick}
+              disabled={isReverting}
+            />
+          </PopupMenuOptions>
+        </PopupMenu>
+      </DataGridCell>
+    </DataGridRow>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
new file mode 100644
index 0000000000..cb7e8b4c6c
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { use } from "react"
+import { ObservableQuery } from "@apollo/client"
+import { EmptyDataGridRow } from "../../../../common/EmptyDataGridRow"
+import { RemediatedIssueDataRow } from "./RemediatedIssueDataRow"
+import { getNormalizedRemediationsResponse } from "../../../../Services/utils"
+import { GetRemediationsQuery } from "../../../../../generated/graphql"
+import { useRouteContext } from "@tanstack/react-router"
+import { deleteRemediation } from "../../../../../api/deleteRemediation"
+
+type RemediatedIssuesDataRowsProps = {
+  remediationsPromise: Promise<ObservableQuery.Result<GetRemediationsQuery>>
+  service: string
+  image: string
+}
+
+export const RemediatedIssuesDataRows = ({ remediationsPromise, service, image }: RemediatedIssuesDataRowsProps) => {
+  const { error, data } = use(remediationsPromise)
+  const { remediatedVulnerabilities } = getNormalizedRemediationsResponse(data as GetRemediationsQuery | undefined)
+  const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
+
+  const handleRevert = async (remediationId: string) => {
+    try {
+      await deleteRemediation({ apiClient, remediationId })
+      // Invalidate queries to refresh the data
+      queryClient.invalidateQueries({ queryKey: ["remediations"] })
+      queryClient.invalidateQueries({ queryKey: ["images"] })
+    } catch (error) {
+      console.error("Failed to delete remediation:", error)
+      throw error
+    }
+  }
+
+  if (error) {
+    return <EmptyDataGridRow colSpan={4}>Error loading remediated vulnerabilities: {error.message}</EmptyDataGridRow>
+  }
+
+  if (remediatedVulnerabilities.length === 0) {
+    return <EmptyDataGridRow colSpan={4}>No remediated vulnerabilities found!</EmptyDataGridRow>
+  }
+
+  return (
+    <>
+      {remediatedVulnerabilities.map((remediation) => (
+        <RemediatedIssueDataRow
+          key={remediation.remediationId}
+          remediation={remediation}
+          service={service}
+          image={image}
+          onRevert={handleRevert}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
new file mode 100644
index 0000000000..47a78a62c4
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
@@ -0,0 +1,150 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Suspense, useState } from "react"
+import { useRouteContext } from "@tanstack/react-router"
+import {
+  DataGrid,
+  DataGridRow,
+  DataGridHeadCell,
+  Icon,
+  Stack,
+  SearchInput,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+} from "@cloudoperators/juno-ui-components"
+import { getNormalizedImageVulnerabilitiesResponse, ServiceImage } from "../../../Services/utils"
+import { fetchImages } from "../../../../api/fetchImages"
+import { fetchRemediations } from "../../../../api/fetchRemediations"
+import { IssuesDataRows } from "./IssuesDataRows"
+import { RemediatedIssuesDataRows } from "./RemediatedIssuesDataRows"
+import { CursorPagination } from "../../../common/CursorPagination"
+import { ErrorBoundary } from "../../../common/ErrorBoundary"
+import { getErrorDataRowComponent } from "../../../common/getErrorDataRow"
+import { LoadingDataRow } from "../../../common/LoadingDataRow"
+
+type ImageIssuesListProps = {
+  service: string
+  image: ServiceImage
+}
+
+export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
+  const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
+  const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined)
+  const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0)
+
+  const vulFilter = searchTerm ? { search: [searchTerm] } : undefined
+
+  const issuesPromise = fetchImages({
+    apiClient,
+    queryClient,
+    filter: {
+      service: [service],
+      repository: [image.repository],
+    },
+    firstVulnerabilities: 20,
+    afterVulnerabilities: pageCursor,
+    vulFilter,
+  })
+
+  const remediationsPromise = fetchRemediations({
+    apiClient,
+    queryClient,
+    filter: {
+      service: [service],
+      image: [image.repository],
+    },
+  })
+
+  return (
+    <>
+      <Stack gap="2" className="mb-4 mt-8">
+        {selectedTabIndex === 0 && (
+          <SearchInput
+            placeholder="Search for CVE number"
+            className="w-96 ml-auto"
+            onSearch={(search) => setSearchTerm(search || "")}
+            onClear={() => {
+              setSearchTerm("")
+            }}
+          />
+        )}
+      </Stack>
+      <Tabs selectedIndex={selectedTabIndex} onSelect={setSelectedTabIndex} variant="content">
+        <TabList>
+          <Tab label="Vulnerabilities" />
+          <Tab label="Remediated Vulnerabilities" />
+        </TabList>
+        <TabPanel>
+          <DataGrid columns={5} minContentColumns={[0, 1, 2, 4]} cellVerticalAlignment="top">
+            <DataGridRow>
+              <DataGridHeadCell>
+                <Icon icon="monitorHeart" />
+              </DataGridHeadCell>
+              <DataGridHeadCell>Vulnerability</DataGridHeadCell>
+              <DataGridHeadCell>Target Date</DataGridHeadCell>
+              <DataGridHeadCell>Description</DataGridHeadCell>
+              <DataGridHeadCell>Actions</DataGridHeadCell>
+            </DataGridRow>
+
+            {issuesPromise && (
+              <ErrorBoundary
+                displayErrorMessage
+                fallbackRender={getErrorDataRowComponent({ colspan: 5 })}
+                resetKeys={[issuesPromise]}
+              >
+                <Suspense fallback={<LoadingDataRow colSpan={5} />}>
+                  <IssuesDataRows issuesPromise={issuesPromise} service={service} image={image.repository} />
+                </Suspense>
+              </ErrorBoundary>
+            )}
+          </DataGrid>
+          {issuesPromise && (
+            <ErrorBoundary resetKeys={[issuesPromise]}>
+              <Suspense>
+                <CursorPagination
+                  dataPromise={issuesPromise}
+                  dataNormalizationMethod={getNormalizedImageVulnerabilitiesResponse}
+                  goToPage={setPageCursor}
+                />
+              </Suspense>
+            </ErrorBoundary>
+          )}
+        </TabPanel>
+        <TabPanel>
+          <DataGrid columns={4} minContentColumns={[0, 1, 3]} cellVerticalAlignment="top">
+            <DataGridRow>
+              <DataGridHeadCell>
+                <Icon icon="monitorHeart" />
+              </DataGridHeadCell>
+              <DataGridHeadCell>Vulnerability</DataGridHeadCell>
+              <DataGridHeadCell>Description</DataGridHeadCell>
+              <DataGridHeadCell>Actions</DataGridHeadCell>
+            </DataGridRow>
+
+            {remediationsPromise && (
+              <ErrorBoundary
+                displayErrorMessage
+                fallbackRender={getErrorDataRowComponent({ colspan: 4 })}
+                resetKeys={[remediationsPromise]}
+              >
+                <Suspense fallback={<LoadingDataRow colSpan={4} />}>
+                  <RemediatedIssuesDataRows
+                    remediationsPromise={remediationsPromise}
+                    service={service}
+                    image={image.repository}
+                  />
+                </Suspense>
+              </ErrorBoundary>
+            )}
+          </DataGrid>
+        </TabPanel>
+      </Tabs>
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageVersionOccurrences.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageVersionOccurrences.tsx
similarity index 100%
rename from apps/heureka/src/components/Service/ImageDetailsPanel/ImageVersionOccurrences.tsx
rename to apps/heureka/src/components/Service/ImageDetails/ImageVersionOccurrences.tsx
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
new file mode 100644
index 0000000000..65e9dc2270
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
@@ -0,0 +1,74 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, MouseEvent } from "react"
+import { Stack, Icon } from "@cloudoperators/juno-ui-components"
+import { useNavigate } from "@tanstack/react-router"
+import { ImageVersion } from "../../../Services/utils"
+import SectionContentHeading from "../../../common/SectionContentHeading"
+
+type ImageVersionsListProps = {
+  versions: ImageVersion[]
+  service: string
+  imageRepository: string
+}
+
+export const ImageVersionsList = ({ versions, service, imageRepository }: ImageVersionsListProps) => {
+  const [displayVersions, setDisplayVersions] = useState(false)
+  const navigate = useNavigate()
+
+  const onShowMoreClicked = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    setDisplayVersions(!displayVersions)
+  }
+
+  const handleVersionClick = (version: string) => {
+    navigate({
+      to: "/services/$service/images/$image/versions/$version",
+      params: { service, image: imageRepository, version },
+    })
+  }
+
+  if (!versions || versions.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <SectionContentHeading>Image Versions</SectionContentHeading>
+      {displayVersions && (
+        <div className="my-4">
+          <Stack gap="2" direction="vertical">
+            {versions.map((version) => (
+              <a
+                key={version.id}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleVersionClick(version.version)
+                }}
+                className="link-hover"
+              >
+                <Stack gap="2" direction="horizontal" alignment="center">
+                  <Icon icon="code" size="16" />
+                  <span>{version.version}</span>
+                </Stack>
+              </a>
+            ))}
+          </Stack>
+        </div>
+      )}
+
+      <div className="advance-link">
+        <a href="#" rel="noopener noreferrer" onClick={onShowMoreClicked}>
+          <Stack alignment="center">
+            {displayVersions ? "Hide Versions" : "Display Versions"}
+            <Icon color="global-text" icon={displayVersions ? "expandLess" : "expandMore"} />
+          </Stack>
+        </a>
+      </div>
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/index.tsx b/apps/heureka/src/components/Service/ImageDetails/index.tsx
new file mode 100644
index 0000000000..c26947a07e
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/index.tsx
@@ -0,0 +1,142 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { use, useState } from "react"
+import {
+  Stack,
+  Pill,
+  DataGrid,
+  DataGridRow,
+  DataGridHeadCell,
+  DataGridCell,
+  Icon,
+} from "@cloudoperators/juno-ui-components"
+import { useNavigate } from "@tanstack/react-router"
+import { getNormalizedImagesResponse, ServiceImage } from "../../Services/utils"
+import { IssueCountsPerSeverityLevel } from "../../common/IssueCountsPerSeverityLevel"
+import SectionContentHeading from "../../common/SectionContentHeading"
+import { ImageIssuesList } from "./ImageIssuesList"
+import { GetImagesQuery, GetImagesQueryResult } from "../../../generated/graphql"
+
+type ImageDetailsProps = {
+  imagesPromise: Promise<GetImagesQueryResult>
+  imageRepository: string
+  service: string
+}
+
+export const ImageDetails = ({ imagesPromise, imageRepository, service }: ImageDetailsProps) => {
+  const { data } = use(imagesPromise)
+  const { images } = getNormalizedImagesResponse(data as GetImagesQuery | undefined)
+  const image = images.find((img: ServiceImage) => img.repository === imageRepository)
+  const [showAllVersions, setShowAllVersions] = useState(false)
+  const navigate = useNavigate()
+
+  if (!image) {
+    return null
+  }
+
+  const handleVersionClick = (version: string) => {
+    navigate({
+      to: "/services/$service/images/$image/versions/$version",
+      params: { service, image: imageRepository, version },
+    })
+  }
+
+  const versions = image.versions || []
+  const displayedVersions = showAllVersions ? versions : versions.slice(0, 3)
+  const hasMoreVersions = versions.length > 3
+
+  return (
+    <>
+      <SectionContentHeading>Image {image.repository}</SectionContentHeading>
+
+      {/* Image Information Section */}
+      <DataGrid columns={2} gridColumnTemplate="20% auto" className="mb-6">
+        <DataGridRow>
+          <DataGridHeadCell>Details</DataGridHeadCell>
+          <DataGridCell>
+            <Stack gap="1" direction="horizontal" wrap>
+              <Pill
+                pillKey="repository"
+                pillKeyLabel="repository"
+                pillValue={image.repository}
+                pillValueLabel={image.repository}
+              />
+              {image.versionsCount !== undefined && image.versionsCount > 0 && (
+                <Pill
+                  pillKey="versions"
+                  pillKeyLabel="versions"
+                  pillValue={image.versionsCount.toString()}
+                  pillValueLabel={image.versionsCount.toString()}
+                />
+              )}
+            </Stack>
+          </DataGridCell>
+        </DataGridRow>
+        <DataGridRow>
+          <DataGridHeadCell>Vulnerabilities Counts</DataGridHeadCell>
+          <DataGridCell>
+            <IssueCountsPerSeverityLevel counts={image.vulnerabilityCounts} />
+          </DataGridCell>
+        </DataGridRow>
+        {versions.length > 0 && (
+          <DataGridRow>
+            <DataGridHeadCell>Versions ({versions.length})</DataGridHeadCell>
+            <DataGridCell>
+              <Stack gap="2" direction="vertical">
+                {displayedVersions.map((version) => (
+                  <a
+                    key={version.id}
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      handleVersionClick(version.version)
+                    }}
+                    className="link-hover"
+                  >
+                    <span>{version.version}</span>
+                  </a>
+                ))}
+                {hasMoreVersions && !showAllVersions && (
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      setShowAllVersions(true)
+                    }}
+                    className="link-hover"
+                  >
+                    <Stack alignment="center" direction="horizontal" gap="1">
+                      <span>Show all</span>
+                      <Icon color="global-text" icon="expandMore" />
+                    </Stack>
+                  </a>
+                )}
+                {hasMoreVersions && showAllVersions && (
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      setShowAllVersions(false)
+                    }}
+                    className="link-hover"
+                  >
+                    <Stack alignment="center" direction="horizontal" gap="1">
+                      <span>Show less</span>
+                      <Icon color="global-text" icon="expandLess" />
+                    </Stack>
+                  </a>
+                )}
+              </Stack>
+            </DataGridCell>
+          </DataGridRow>
+        )}
+      </DataGrid>
+
+      {/* Issues List Section */}
+      {service && imageRepository && image && <ImageIssuesList service={service} image={image} />}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx b/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
deleted file mode 100644
index 83cd2933bc..0000000000
--- a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState } from "react"
-import { DataGridRow, DataGridCell, Stack } from "@cloudoperators/juno-ui-components"
-import { Icon } from "@cloudoperators/juno-ui-components"
-import { IssueIcon } from "../../../../../common/IssueIcon"
-import { IssueTimestamp } from "../../../../../common/IssueTimestamp"
-import { ImageVulnerability } from "../../../../../Services/utils"
-import { getSeverityColor, useTextOverflow } from "../../../../../../utils"
-
-const cellSeverityClasses = (severity: string) => {
-  const borderColor = getSeverityColor(severity.toLowerCase())
-
-  return `
-    border-l-2
-    ${borderColor}
-    h-full
-    pl-5
-  `
-}
-
-type IssuesDataRowProps = {
-  issue: ImageVulnerability
-}
-
-export const IssuesDataRow = ({ issue }: IssuesDataRowProps) => {
-  const [isExpanded, setIsExpanded] = useState(false)
-  const { needsExpansion, textRef } = useTextOverflow(issue.description)
-
-  const toggleDescription = (e: React.MouseEvent) => {
-    e.preventDefault()
-    setIsExpanded(!isExpanded)
-  }
-
-  return (
-    <DataGridRow>
-      <DataGridCell className="pl-0">
-        <div className={cellSeverityClasses(issue.severity)}>
-          <IssueIcon severity={issue.severity} />
-        </div>
-      </DataGridCell>
-
-      <DataGridCell className="whitespace-nowrap">
-        <Stack gap="2" direction="vertical">
-          <span>{issue.name}</span>
-          {issue.sourceUrl && issue.sourceUrl !== "-" && (
-            <a href={issue.sourceUrl} target="_blank" rel="noopener noreferrer" className="link-hover">
-              <Stack gap="1.5" alignment="center">
-                <Icon icon="openInNew" size="16" />
-                <span>Vulnerability source</span>
-              </Stack>
-            </a>
-          )}
-        </Stack>
-      </DataGridCell>
-      <DataGridCell className="whitespace-nowrap">
-        <IssueTimestamp targetDate={issue.earliestTargetRemediationDate} />
-      </DataGridCell>
-      <DataGridCell>
-        <Stack gap="2" direction="vertical">
-          <span ref={textRef} className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis"}>
-            {issue.description}
-          </span>
-          {issue.description && needsExpansion && (
-            <a href="#" onClick={toggleDescription} className="link-hover">
-              <Stack alignment="center">
-                {isExpanded ? "Show less" : "Show more"}
-                <Icon color="global-text" icon={isExpanded ? "expandLess" : "expandMore"} />
-              </Stack>
-            </a>
-          )}
-        </Stack>
-      </DataGridCell>
-    </DataGridRow>
-  )
-}
diff --git a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/index.tsx
deleted file mode 100644
index 2b882f7f66..0000000000
--- a/apps/heureka/src/components/Service/ImageDetailsPanel/ImageIssuesList/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { Suspense, useState } from "react"
-import { useRouteContext } from "@tanstack/react-router"
-import {
-  DataGrid,
-  DataGridRow,
-  DataGridHeadCell,
-  Icon,
-  Stack,
-  SearchInput,
-  ContentHeading,
-} from "@cloudoperators/juno-ui-components"
-import { getNormalizedImageVulnerabilitiesResponse, ServiceImage } from "../../../Services/utils"
-import { fetchImages } from "../../../../api/fetchImages"
-import { IssuesDataRows } from "./IssuesDataRows"
-import { CursorPagination } from "../../../common/CursorPagination"
-import { ErrorBoundary } from "../../../common/ErrorBoundary"
-import { getErrorDataRowComponent } from "../../../common/getErrorDataRow"
-import { LoadingDataRow } from "../../../common/LoadingDataRow"
-
-type ImageIssuesListProps = {
-  service: string
-  image: ServiceImage
-}
-
-export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
-  const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
-  const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined)
-  const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
-
-  const vulFilter = searchTerm ? { search: [searchTerm] } : undefined
-
-  const issuesPromise = fetchImages({
-    apiClient,
-    queryClient,
-    filter: {
-      service: [service],
-      repository: [image.repository],
-    },
-    firstVulnerabilities: 20,
-    afterVulnerabilities: pageCursor,
-    vulFilter,
-  })
-
-  return (
-    <>
-      <Stack gap="2" className="mb-4 mt-8">
-        <ContentHeading>Vulnerabilities</ContentHeading>
-        <SearchInput
-          placeholder="Search for CVE number"
-          className="w-96 ml-auto"
-          onSearch={(search) => setSearchTerm(search || "")}
-          onClear={() => {
-            setSearchTerm("")
-          }}
-        />
-      </Stack>
-      <DataGrid columns={4} minContentColumns={[0, 1, 2]} cellVerticalAlignment="top">
-        <DataGridRow>
-          <DataGridHeadCell>
-            <Icon icon="monitorHeart" />
-          </DataGridHeadCell>
-          <DataGridHeadCell>Vulnerability</DataGridHeadCell>
-          <DataGridHeadCell>Target Date</DataGridHeadCell>
-          <DataGridHeadCell>Description</DataGridHeadCell>
-        </DataGridRow>
-
-        {issuesPromise && (
-          <ErrorBoundary
-            displayErrorMessage
-            fallbackRender={getErrorDataRowComponent({ colspan: 4 })}
-            resetKeys={[issuesPromise]}
-          >
-            <Suspense fallback={<LoadingDataRow colSpan={4} />}>
-              <IssuesDataRows issuesPromise={issuesPromise} />
-            </Suspense>
-          </ErrorBoundary>
-        )}
-      </DataGrid>
-      {issuesPromise && (
-        <ErrorBoundary resetKeys={[issuesPromise]}>
-          <Suspense>
-            <CursorPagination
-              dataPromise={issuesPromise}
-              dataNormalizationMethod={getNormalizedImageVulnerabilitiesResponse}
-              goToPage={setPageCursor}
-            />
-          </Suspense>
-        </ErrorBoundary>
-      )}
-    </>
-  )
-}
diff --git a/apps/heureka/src/components/Service/ImageDetailsPanel/index.tsx b/apps/heureka/src/components/Service/ImageDetailsPanel/index.tsx
deleted file mode 100644
index 3d6f200123..0000000000
--- a/apps/heureka/src/components/Service/ImageDetailsPanel/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { use } from "react"
-import {
-  Panel,
-  PanelBody,
-  Stack,
-  Pill,
-  DataGrid,
-  DataGridRow,
-  DataGridHeadCell,
-  DataGridCell,
-} from "@cloudoperators/juno-ui-components"
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router"
-import { ApolloQueryResult } from "@apollo/client"
-import { getNormalizedImagesResponse, ServiceImage } from "../../Services/utils"
-import { IssueCountsPerSeverityLevel } from "../../common/IssueCountsPerSeverityLevel"
-import { ImageIssuesList } from "./ImageIssuesList"
-import { GetImagesQuery } from "../../../generated/graphql"
-
-type ImageDetailsPanelProps = {
-  imagesPromise: Promise<ApolloQueryResult<GetImagesQuery>>
-}
-
-export const ImageDetailsPanel = ({ imagesPromise }: ImageDetailsPanelProps) => {
-  const navigate = useNavigate()
-  const { service } = useParams({ from: "/services/$service" })
-  const { image: selectedImageRepository } = useSearch({ from: "/services/$service" })
-  const { data } = use(imagesPromise)
-  const { images } = getNormalizedImagesResponse(data as GetImagesQuery | undefined)
-  const image = images.find((img: ServiceImage) => img.repository === selectedImageRepository)
-
-  if (!image) {
-    return null
-  }
-
-  return (
-    <Panel
-      heading={`Image ${image.repository} Information`}
-      opened={!!service}
-      onClose={() =>
-        navigate({
-          to: "/services/$service",
-          params: { service },
-        })
-      }
-      size="large"
-    >
-      <PanelBody>
-        <DataGrid columns={2} gridColumnTemplate="20% auto">
-          <DataGridRow>
-            <DataGridHeadCell>Details</DataGridHeadCell>
-            <DataGridCell>
-              <Stack gap="1" direction="horizontal" wrap>
-                <Pill
-                  pillKey="repository"
-                  pillKeyLabel="repository"
-                  pillValue={image.repository}
-                  pillValueLabel={image.repository}
-                />
-                {image.versionsCount !== undefined && image.versionsCount > 0 && (
-                  <Pill
-                    pillKey="versions"
-                    pillKeyLabel="versions"
-                    pillValue={image.versionsCount.toString()}
-                    pillValueLabel={image.versionsCount.toString()}
-                  />
-                )}
-              </Stack>
-            </DataGridCell>
-          </DataGridRow>
-          <DataGridRow>
-            <DataGridHeadCell>Vulnerabilities Counts</DataGridHeadCell>
-            <DataGridCell>
-              <IssueCountsPerSeverityLevel counts={image.vulnerabilityCounts} />
-            </DataGridCell>
-          </DataGridRow>
-        </DataGrid>
-
-        {/* Second Section: Issues List */}
-        {service && selectedImageRepository && image && <ImageIssuesList service={service} image={image} />}
-      </PanelBody>
-    </Panel>
-  )
-}
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
new file mode 100644
index 0000000000..e37fa9ea77
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { use } from "react"
+import { GetImageVersionsQueryResult } from "../../../../../generated/graphql"
+import { EmptyDataGridRow } from "../../../../common/EmptyDataGridRow"
+import { IssuesDataRow } from "../../../ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow"
+import { getNormalizedImageVersionDetailsResponse } from "../../../../Services/utils"
+
+type ImageVersionIssuesDataRowsProps = {
+  issuesPromise: Promise<GetImageVersionsQueryResult>
+  service: string
+  image: string
+}
+
+export const ImageVersionIssuesDataRows = ({ issuesPromise, service, image }: ImageVersionIssuesDataRowsProps) => {
+  const { error, data } = use(issuesPromise)
+  const { imageVersion: versionDetails } = getNormalizedImageVersionDetailsResponse(data)
+
+  if (error) {
+    return <EmptyDataGridRow colSpan={4}>Error loading vulnerabilities: {error.message}</EmptyDataGridRow>
+  }
+
+  if (!versionDetails || !versionDetails.vulnerabilities || versionDetails.vulnerabilities.length === 0) {
+    return <EmptyDataGridRow colSpan={4}>No vulnerabilities found! 🚀</EmptyDataGridRow>
+  }
+
+  return (
+    <>
+      {versionDetails.vulnerabilities.map((vulnerability) => (
+        <IssuesDataRow
+          key={vulnerability.id || vulnerability.name}
+          issue={vulnerability}
+          service={service}
+          image={image}
+          showFalsePositiveAction={false}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
new file mode 100644
index 0000000000..41b40057dc
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Suspense } from "react"
+import {
+  DataGrid,
+  DataGridRow,
+  DataGridHeadCell,
+  Icon,
+  Stack,
+  ContentHeading,
+} from "@cloudoperators/juno-ui-components"
+import { GetImageVersionsQueryResult } from "../../../../generated/graphql"
+import { ImageVersionIssuesDataRows } from "./ImageVersionIssuesDataRows"
+import { ErrorBoundary } from "../../../common/ErrorBoundary"
+import { getErrorDataRowComponent } from "../../../common/getErrorDataRow"
+import { LoadingDataRow } from "../../../common/LoadingDataRow"
+
+type ImageVersionIssuesListProps = {
+  issuesPromise: Promise<GetImageVersionsQueryResult>
+  service: string
+  image: string
+}
+
+export const ImageVersionIssuesList = ({ issuesPromise, service, image }: ImageVersionIssuesListProps) => {
+  return (
+    <>
+      <Stack gap="2" className="mb-4 mt-8">
+        <ContentHeading>Vulnerabilities</ContentHeading>
+      </Stack>
+      <DataGrid columns={4} minContentColumns={[0, 1, 2]} cellVerticalAlignment="top">
+        <DataGridRow>
+          <DataGridHeadCell>
+            <Icon icon="monitorHeart" />
+          </DataGridHeadCell>
+          <DataGridHeadCell>Vulnerability</DataGridHeadCell>
+          <DataGridHeadCell>Target Date</DataGridHeadCell>
+          <DataGridHeadCell>Description</DataGridHeadCell>
+        </DataGridRow>
+
+        {issuesPromise && (
+          <ErrorBoundary
+            displayErrorMessage
+            fallbackRender={getErrorDataRowComponent({ colspan: 4 })}
+            resetKeys={[issuesPromise]}
+          >
+            <Suspense fallback={<LoadingDataRow colSpan={4} />}>
+              <ImageVersionIssuesDataRows issuesPromise={issuesPromise} service={service} image={image} />
+            </Suspense>
+          </ErrorBoundary>
+        )}
+      </DataGrid>
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionOccurrences.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionOccurrences.tsx
new file mode 100644
index 0000000000..67a14374be
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionOccurrences.tsx
@@ -0,0 +1,115 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, MouseEvent, useEffect } from "react"
+import { Box, Stack, Tooltip, TooltipTrigger, TooltipContent, Icon } from "@cloudoperators/juno-ui-components"
+import { ServiceImageVersion, ComponentInstance } from "../../Services/utils"
+
+type ToolTipBoxType = {
+  instance: ComponentInstance
+}
+
+const BoxWithTooltip = ({ instance }: ToolTipBoxType) => (
+  <Box className="text-sm text-theme-light">
+    <Stack>
+      <div className="text-sm whitespace-nowrap overflow-hidden text-ellipsis w-full">{instance?.pod || "--"}</div>
+      <Tooltip triggerEvent="hover">
+        <TooltipTrigger>
+          <Icon icon="info" size="18" className="cursor-pointer hover:text-theme-primary" />
+        </TooltipTrigger>
+        <TooltipContent>
+          <span> Namespace: {instance?.namespace || "--"}</span>
+          <br />
+          <span> Region: {instance?.region || "--"}</span>
+          <br />
+          <span> Cluster: {instance?.cluster || "--"}</span>
+          <br />
+          <span> Container: {instance?.container || "--"}</span>
+          <br />
+          <span> Pod: {instance?.pod || "--"}</span>
+        </TooltipContent>
+      </Tooltip>
+    </Stack>
+    <div className="text-sm whitespace-nowrap">{instance?.cluster || "--"}</div>
+  </Box>
+)
+
+/**
+ *  Groups instances by namespace and container, and calculates the minimum width for the grid based on the longest pod name.
+ *  Also limits the number of instances displayed to a maximum value.
+ * @param instances
+ * @param maxInstances
+ * @returns
+ */
+const groupInstances = (instances: ComponentInstance[]) => {
+  const grouped: Record<string, Record<string, ComponentInstance[]>> = {} // Namespace -> Container -> Instances
+
+  instances.forEach((instance) => {
+    // Use parsed fields from ccrn
+    const namespace = instance.namespace || "Unknown"
+    const container = instance.container || "All"
+
+    if (!grouped[namespace]) grouped[namespace] = {}
+    if (!grouped[namespace][container]) grouped[namespace][container] = []
+
+    grouped[namespace][container].push(instance)
+  })
+
+  return grouped
+}
+
+type ImageVersionOccurrencesProps = {
+  imageVersion: ServiceImageVersion
+}
+
+const ImageVersionOccurrences = ({ imageVersion }: ImageVersionOccurrencesProps) => {
+  const [displayOccurrences, setDisplayOccurrences] = useState(false)
+  const componentInstances = imageVersion.componentInstances || []
+  const grouped = groupInstances(componentInstances)
+
+  useEffect(() => {
+    // Reset state when myProp changes
+    setDisplayOccurrences(false)
+  }, [imageVersion])
+
+  const onShowMoreClicked = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    setDisplayOccurrences(!displayOccurrences)
+  }
+
+  return (
+    <>
+      {displayOccurrences &&
+        grouped &&
+        Object.entries(grouped).map(([namespace, containers]) => (
+          <div key={namespace}>
+            {Object.entries(containers).map(([container, instances]) => (
+              <div className="my-2" key={`${namespace}-${container}`}>
+                <div className="mb-4">
+                  Namespace <b>{namespace}</b> - Container <b>{container}</b>
+                </div>
+                <div className="grid grid-cols-[repeat(auto-fill,_minmax(240px,_1fr))] gap-2">
+                  {instances.map((item, i) => (
+                    <BoxWithTooltip key={item.id || i} instance={item} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+
+      <div className="advance-link">
+        <a href="#" rel="noopener noreferrer" onClick={onShowMoreClicked}>
+          <Stack alignment="center">
+            {displayOccurrences ? "Hide Occurrences" : "Display Occurrences"}
+            <Icon color="global-text" icon={displayOccurrences ? "expandLess" : "expandMore"} />
+          </Stack>
+        </a>
+      </div>
+    </>
+  )
+}
+
+export default ImageVersionOccurrences
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
new file mode 100644
index 0000000000..c28533d0c2
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
@@ -0,0 +1,124 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { use } from "react"
+import { Stack, Pill, DataGrid, DataGridRow, DataGridHeadCell, DataGridCell } from "@cloudoperators/juno-ui-components"
+import { getNormalizedImageVersionsResponse } from "../../Services/utils"
+import ImageVersionOccurrences from "./ImageVersionOccurrences"
+import { IssueCountsPerSeverityLevel } from "../../common/IssueCountsPerSeverityLevel"
+import SectionContentHeading from "../../common/SectionContentHeading"
+import { ImageVersionIssuesList } from "./ImageVersionIssuesList"
+import { GetImageVersionsQuery, GetImageVersionsQueryResult } from "../../../generated/graphql"
+
+type ImageVersionDetailsProps = {
+  imageVersionsPromise: Promise<GetImageVersionsQueryResult>
+  imageVersion: string
+  service: string
+  imageRepository: string
+}
+
+export const ImageVersionDetails = ({
+  imageVersionsPromise,
+  imageVersion: selectedImageVersion,
+  service,
+  imageRepository,
+}: ImageVersionDetailsProps) => {
+  const { data, error } = use(imageVersionsPromise)
+
+  if (error) {
+    return <div>Error loading image version: {error.message}</div>
+  }
+
+  const { imageVersions } = getNormalizedImageVersionsResponse(data as GetImageVersionsQuery | undefined)
+  // Since we're querying for a specific version, we should get exactly one result
+  const imageVersion = imageVersions[0]
+
+  if (!imageVersion) {
+    return (
+      <div>
+        <p>Image version not found: {selectedImageVersion}</p>
+        <p>Available versions: {imageVersions.map((v) => v.version).join(", ") || "none"}</p>
+        <p>Data: {JSON.stringify(data, null, 2)}</p>
+      </div>
+    )
+  }
+
+  // Format version string: show first 9 chars after "sha", then "...", then last 5 chars
+  const formatVersion = (version: string): string => {
+    if (!version) return version
+
+    // Check if it starts with "sha" (e.g., "sha256:...")
+    const shaMatch = version.match(/^(sha[^:]*:)(.+)$/)
+    if (shaMatch) {
+      const prefix = shaMatch[1] // e.g., "sha256:"
+      const hash = shaMatch[2] // The actual hash part
+
+      if (hash.length <= 14) {
+        // If hash is short enough, return as is
+        return version
+      }
+
+      // Show first 9 chars of hash, then "...", then last 5 chars
+      return `${prefix}${hash.substring(0, 9)}...${hash.substring(hash.length - 5)}`
+    }
+
+    // If it doesn't match the pattern, return as is
+    return version
+  }
+
+  return (
+    <>
+      <SectionContentHeading>
+        Image {imageVersion.repository || imageRepository} - Version {formatVersion(imageVersion.version)}
+      </SectionContentHeading>
+
+      <DataGrid columns={2} gridColumnTemplate="20% auto" className="mb-6">
+        <DataGridRow>
+          <DataGridHeadCell>Details</DataGridHeadCell>
+          <DataGridCell>
+            <Stack gap="1" direction="horizontal" wrap>
+              {imageVersion.tag && (
+                <Pill pillKey="tag" pillKeyLabel="tag" pillValue={imageVersion.tag} pillValueLabel={imageVersion.tag} />
+              )}
+              <Pill
+                pillKey="repository"
+                pillKeyLabel="repository"
+                pillValue={imageVersion.repository || imageRepository}
+                pillValueLabel={imageVersion.repository || imageRepository}
+              />
+              <Pill
+                pillKey="version"
+                pillKeyLabel="version"
+                pillValue={imageVersion.version}
+                pillValueLabel={imageVersion.version}
+              />
+            </Stack>
+          </DataGridCell>
+        </DataGridRow>
+        <DataGridRow>
+          <DataGridHeadCell>Vulnerabilities Counts</DataGridHeadCell>
+          <DataGridCell>
+            <IssueCountsPerSeverityLevel counts={imageVersion.issueCounts} />
+          </DataGridCell>
+        </DataGridRow>
+        <DataGridRow>
+          <DataGridHeadCell className="whitespace-nowrap">{`Occurrences (${imageVersion.componentInstancesCount || 0})`}</DataGridHeadCell>
+          <DataGridCell>
+            <ImageVersionOccurrences imageVersion={imageVersion} />
+          </DataGridCell>
+        </DataGridRow>
+      </DataGrid>
+
+      {/* Second Section: Issues List */}
+      {service && selectedImageVersion && imageVersion && (
+        <ImageVersionIssuesList
+          issuesPromise={imageVersionsPromise}
+          service={service}
+          image={imageVersion.repository || imageRepository}
+        />
+      )}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/index.tsx b/apps/heureka/src/components/Service/index.tsx
index d16a2bd696..0f3cd850c9 100644
--- a/apps/heureka/src/components/Service/index.tsx
+++ b/apps/heureka/src/components/Service/index.tsx
@@ -4,14 +4,12 @@
  */
 
 import React, { Suspense, useEffect, useState } from "react"
-import { useLoaderData, useNavigate, useParams, useRouteContext, useSearch } from "@tanstack/react-router"
+import { Outlet, useLoaderData, useMatchRoute, useNavigate, useParams, useRouteContext } from "@tanstack/react-router"
 import { Spinner } from "@cloudoperators/juno-ui-components"
-import { ApolloQueryResult } from "@apollo/client"
 import { ServiceImages } from "../common/ServiceImages"
-import { ImageDetailsPanel } from "./ImageDetailsPanel"
 import { ServiceDetails } from "./ServiceDetails"
 import { fetchImages } from "../../api/fetchImages"
-import { GetImagesQuery } from "../../generated/graphql"
+import { GetImagesQueryResult } from "../../generated/graphql"
 import { ErrorBoundary } from "../common/ErrorBoundary"
 
 export const Service = () => {
@@ -19,12 +17,21 @@ export const Service = () => {
   const { queryClient, apiClient } = useRouteContext({ from: "/services/$service" })
   const { servicePromise } = useLoaderData({ from: "/services/$service" })
   const { service } = useParams({ from: "/services/$service" })
-  const { image: selectedImageRepository } = useSearch({ from: "/services/$service" })
   const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
-  const [imagesPromise, setImagesPromise] = useState<Promise<ApolloQueryResult<GetImagesQuery>> | undefined>(undefined)
+  const [imagesPromise, setImagesPromise] = useState<Promise<GetImagesQueryResult> | undefined>(undefined)
 
-  // refetch images only when the page cursor changes
+  // Check if we're on a child route (image details page or version details page)
+  const matchRoute = useMatchRoute()
+  const isOnImageDetailsPage = matchRoute({ to: "/services/$service/images/$image" })
+  const isOnVersionDetailsPage = matchRoute({ to: "/services/$service/images/$image/versions/$version" })
+
+  // refetch images only when the page cursor changes, but not when on version details page
   useEffect(() => {
+    // Don't fetch images if we're on the version details page
+    if (isOnVersionDetailsPage) {
+      return
+    }
+
     const promise = fetchImages({
       queryClient,
       apiClient,
@@ -34,8 +41,14 @@ export const Service = () => {
       after: pageCursor,
     })
     setImagesPromise(promise)
-  }, [pageCursor, service, queryClient, apiClient])
+  }, [pageCursor, service, queryClient, apiClient, isOnVersionDetailsPage])
+
+  // If we're on a child route (image details or version details), just render the outlet
+  if (isOnImageDetailsPage || isOnVersionDetailsPage) {
+    return <Outlet />
+  }
 
+  // Otherwise, render the service details and images list
   return (
     <>
       <ErrorBoundary displayErrorMessage>
@@ -44,25 +57,16 @@ export const Service = () => {
         </Suspense>
       </ErrorBoundary>
       {imagesPromise && (
-        <>
-          <ServiceImages
-            selectedImage={selectedImageRepository}
-            imagesPromise={imagesPromise}
-            onImageItemClick={(image) => {
-              navigate({
-                to: "/services/$service",
-                params: { service },
-                search: { image: image.repository },
-              })
-            }}
-            goToPage={setPageCursor}
-          />
-          <ErrorBoundary>
-            <Suspense>
-              <ImageDetailsPanel imagesPromise={imagesPromise} />
-            </Suspense>
-          </ErrorBoundary>
-        </>
+        <ServiceImages
+          imagesPromise={imagesPromise}
+          onImageItemClick={(image) => {
+            navigate({
+              to: "/services/$service/images/$image",
+              params: { service, image: image.repository },
+            })
+          }}
+          goToPage={setPageCursor}
+        />
       )}
     </>
   )
diff --git a/apps/heureka/src/components/Services/ServicesList/ServicePanel.test.tsx b/apps/heureka/src/components/Services/ServicesList/ServicePanel.test.tsx
index dd9848a84b..33762c5024 100644
--- a/apps/heureka/src/components/Services/ServicesList/ServicePanel.test.tsx
+++ b/apps/heureka/src/components/Services/ServicesList/ServicePanel.test.tsx
@@ -67,9 +67,9 @@ describe("ServicePanel", () => {
     expect(router.state.location.href).toBe("/services/alpha")
   })
 
-  it("should navigate to service details page with image selected", async () => {
+  it("should navigate to image details page when image is selected", async () => {
     const { user, router } = await act(() => renderComponent())
     await user.click(screen.getAllByText("Show Details")[0])
-    expect(router.state.location.href).toBe("/services/alpha?image=repo1")
+    expect(router.state.location.href).toBe("/services/alpha/images/repo1")
   })
 })
diff --git a/apps/heureka/src/components/Services/ServicesList/ServicePanel.tsx b/apps/heureka/src/components/Services/ServicesList/ServicePanel.tsx
index 621fb83ded..bcf52b5db5 100644
--- a/apps/heureka/src/components/Services/ServicesList/ServicePanel.tsx
+++ b/apps/heureka/src/components/Services/ServicesList/ServicePanel.tsx
@@ -3,24 +3,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 import { useNavigate, useRouteContext, useSearch } from "@tanstack/react-router"
 import { Panel, PanelBody } from "@cloudoperators/juno-ui-components"
-import { capitalizeFirstLetter } from "../../../utils"
 import { ServiceImages } from "../../common/ServiceImages"
-import { ServiceImage } from "../utils"
 import { fetchImages } from "../../../api/fetchImages"
 import { ErrorBoundary } from "../../common/ErrorBoundary"
+import { ServiceImage } from "../utils"
+
+const capitalizeFirstLetter = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
 
 export const ServicePanel = () => {
   const navigate = useNavigate()
   const { queryClient, apiClient } = useRouteContext({ from: "/services/" })
   const { service } = useSearch({ from: "/services/" })
-  const [currentPageCursor, setCurrentPageCursor] = React.useState<string | null | undefined>(undefined)
+  const [currentPageCursor, setCurrentPageCursor] = useState<string | null | undefined>(undefined)
 
-  // create a promise to fetch images
-  const imagesPromise = service
-    ? fetchImages({
+  // Create a promise for images that changes with pagination
+  const imagesPromise = useMemo(() => {
+    if (service) {
+      return fetchImages({
         queryClient,
         apiClient,
         filter: {
@@ -28,14 +32,16 @@ export const ServicePanel = () => {
         },
         after: currentPageCursor,
       })
-    : undefined
+    }
+    return undefined
+  }, [service, currentPageCursor, queryClient, apiClient])
 
   const closeServiceOverviewPanel = useCallback(() => {
     navigate({
       to: "/services",
       search: (prev) => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { service, ...rest } = prev
+        const { service, ...rest } = prev // we're omitting 'service' from the deps so route does not reload when it changes
         return { ...rest }
       },
     })
@@ -44,11 +50,19 @@ export const ServicePanel = () => {
   const goToServiceDetailsPage = useCallback(
     (image?: ServiceImage) => {
       if (service) {
-        navigate({
-          to: "/services/$service",
-          params: { service: service },
-          search: { image: image?.repository },
-        })
+        if (image) {
+          // Navigate to image details page
+          navigate({
+            to: "/services/$service/images/$image",
+            params: { service: service, image: image.repository },
+          })
+        } else {
+          // Navigate to service details page (no specific image)
+          navigate({
+            to: "/services/$service",
+            params: { service: service },
+          })
+        }
       }
     },
     [navigate, service]
@@ -62,7 +76,7 @@ export const ServicePanel = () => {
       size="large"
     >
       <PanelBody>
-        <ErrorBoundary>
+        <ErrorBoundary displayErrorMessage>
           {service && imagesPromise && (
             <ServiceImages
               displayActions
diff --git a/apps/heureka/src/components/Services/utils.ts b/apps/heureka/src/components/Services/utils.ts
index 10a32d0d65..d866f15cae 100644
--- a/apps/heureka/src/components/Services/utils.ts
+++ b/apps/heureka/src/components/Services/utils.ts
@@ -13,6 +13,7 @@ import {
   ServiceFilter,
   GetServiceFiltersQuery,
   GetImagesQuery,
+  GetRemediationsQuery,
 } from "../../generated/graphql"
 import { Filter, FilterSettings, SelectedFilter, ServiceFilterReduced } from "../common/Filters/types"
 import { ServiceType } from "../types"
@@ -262,6 +263,20 @@ export type ImageVulnerability = {
   sourceUrl: string
 }
 
+export type RemediatedVulnerability = {
+  id: string
+  remediationId: string
+  type: string | null
+  description: string | null
+  service: string | null
+  image: string | null
+  vulnerability: string | null
+  vulnerabilityId: string | null
+  remediationDate: string | null
+  remediatedBy: string | null
+  expirationDate: string | null
+}
+
 type NormalizedServiceImageVulnerabilities = {
   vulnerabilities: ImageVulnerability[]
   totalImageVulnerabilities: number
@@ -400,3 +415,200 @@ export const sanitizeFilterSettings = (filters: Filter[], filterSettings: Filter
     selectedFilters: validFilters,
   }
 }
+
+// Types for ImageVersion details (will be properly typed after codegen)
+export type ImageVersionDetails = {
+  id: string
+  tag?: string | null
+  repository?: string | null
+  version: string
+  vulnerabilityCounts: IssuesCountsType
+  occurrences?: ComponentInstance[]
+  vulnerabilities?: ImageVulnerability[]
+}
+
+// Alias for compatibility with old panel structure
+export type ServiceImageVersion = {
+  id: string
+  tag?: string | null
+  repository?: string | null
+  version: string
+  issueCounts: IssuesCountsType
+  componentInstances?: ComponentInstance[]
+  componentInstancesCount?: number
+  vulnerabilities?: ImageVulnerability[]
+}
+
+type NormalizedImageVersionDetails = {
+  imageVersion: ImageVersionDetails | null
+  totalCount: number
+  pages: Page[]
+  pageNumber: number
+}
+
+// Normalization function for GetImageVersions query
+export const getNormalizedImageVersionDetailsResponse = (
+  data: any // Will be GetImageVersionsQuery after codegen
+): NormalizedImageVersionDetails => {
+  if (!data?.ImageVersions?.edges?.[0]?.node) {
+    return {
+      imageVersion: null,
+      totalCount: 0,
+      pages: [],
+      pageNumber: 1,
+    }
+  }
+
+  const imageVersionNode = data.ImageVersions.edges[0].node
+  const vulnerabilitiesEdges = imageVersionNode.vulnerabilities?.edges || []
+  const occurrencesEdges = imageVersionNode.occurences?.edges || []
+  const vulnerabilitiesPageInfo = imageVersionNode.vulnerabilities?.pageInfo
+
+  const vulnerabilities: ImageVulnerability[] = vulnerabilitiesEdges
+    .filter((edge: any) => edge !== null && edge.node !== null)
+    .map((edge: any) => {
+      const node = edge.node
+      return {
+        id: node.id || "",
+        severity: node.severity || "",
+        name: node.name || "",
+        earliestTargetRemediationDate: node.earliestTargetRemediationDate || "",
+        description: node.description || "",
+        sourceUrl: node.sourceUrl || "",
+      }
+    })
+
+  // Helper function to parse ccrn string and extract fields
+  const parseCcrn = (
+    ccrn: string
+  ): { cluster?: string; namespace?: string; pod?: string; container?: string; region?: string } => {
+    if (!ccrn) return {}
+
+    const result: { cluster?: string; namespace?: string; pod?: string; container?: string; region?: string } = {}
+
+    // Parse ccrn format: "ccrn: apiVersion=..., kind=container, cluster=..., namespace=..., pod=..., name=..."
+    const clusterMatch = ccrn.match(/cluster=([^,]+)/)
+    const namespaceMatch = ccrn.match(/namespace=([^,]+)/)
+    const podMatch = ccrn.match(/pod=([^,]+)/)
+    const nameMatch = ccrn.match(/name=([^,]+)/)
+
+    if (clusterMatch) result.cluster = clusterMatch[1].trim()
+    if (namespaceMatch) result.namespace = namespaceMatch[1].trim()
+    if (podMatch) result.pod = podMatch[1].trim()
+    if (nameMatch) result.container = nameMatch[1].trim()
+
+    // Extract region from cluster name if it follows a pattern like s-eu-nl-1 (region would be "eu")
+    if (result.cluster) {
+      const regionMatch = result.cluster.match(/^[^-]+-([^-]+)-/)
+      if (regionMatch) result.region = regionMatch[1]
+    }
+
+    return result
+  }
+
+  const occurrences: ComponentInstance[] = occurrencesEdges
+    .filter((edge: any) => edge !== null && edge.node !== null)
+    .map((edge: any) => {
+      const node = edge.node
+      const ccrn = node.ccrn || ""
+      const parsed = parseCcrn(ccrn)
+
+      return {
+        id: node.id || "",
+        ccrn: ccrn,
+        componentVersionId: node.componentVersionId || "",
+        cluster: parsed.cluster || "",
+        namespace: parsed.namespace || "",
+        pod: parsed.pod || "",
+        container: parsed.container || "",
+        region: parsed.region || "",
+      }
+    })
+
+  const imageVersion: ImageVersionDetails = {
+    id: imageVersionNode.id || "",
+    tag: imageVersionNode.tag || null,
+    repository: imageVersionNode.repository || null,
+    version: imageVersionNode.version || "",
+    vulnerabilityCounts: imageVersionNode.vulnerabilityCounts || {
+      critical: 0,
+      high: 0,
+      medium: 0,
+      low: 0,
+      none: 0,
+      total: 0,
+    },
+    occurrences,
+    vulnerabilities,
+  }
+
+  const pages = vulnerabilitiesPageInfo?.pages?.filter((edge: any): edge is Page => edge !== null) || []
+  const pageNumber = vulnerabilitiesPageInfo?.pageNumber || 1
+  const hasNoResults = vulnerabilities.length === 0 || !vulnerabilitiesPageInfo
+
+  return {
+    imageVersion,
+    totalCount: hasNoResults ? 0 : vulnerabilities.length,
+    pages,
+    pageNumber,
+  }
+}
+
+// Normalization function that returns array of image versions (for compatibility with old panel)
+export const getNormalizedImageVersionsResponse = (
+  data: any // Will be GetImageVersionsQuery after codegen
+): { imageVersions: ServiceImageVersion[] } => {
+  const normalized = getNormalizedImageVersionDetailsResponse(data)
+
+  if (!normalized.imageVersion) {
+    return { imageVersions: [] }
+  }
+
+  const serviceImageVersion: ServiceImageVersion = {
+    id: normalized.imageVersion.id,
+    tag: normalized.imageVersion.tag,
+    repository: normalized.imageVersion.repository,
+    version: normalized.imageVersion.version,
+    issueCounts: normalized.imageVersion.vulnerabilityCounts,
+    componentInstances: normalized.imageVersion.occurrences,
+    componentInstancesCount: normalized.imageVersion.occurrences?.length || 0,
+    vulnerabilities: normalized.imageVersion.vulnerabilities,
+  }
+
+  return {
+    imageVersions: [serviceImageVersion],
+  }
+}
+
+export const getNormalizedRemediationsResponse = (
+  data: GetRemediationsQuery | undefined
+): { remediatedVulnerabilities: RemediatedVulnerability[] } => {
+  if (!data?.Remediations?.edges) {
+    return {
+      remediatedVulnerabilities: [],
+    }
+  }
+
+  const remediatedVulnerabilities: RemediatedVulnerability[] = data.Remediations.edges
+    .filter((edge): edge is NonNullable<typeof edge> => edge !== null && edge.node !== null)
+    .map((edge) => {
+      const node = edge.node
+      return {
+        id: node.vulnerability || "",
+        remediationId: node.id || "",
+        type: node.type || null,
+        description: node.description || null,
+        service: node.service || null,
+        image: node.image || null,
+        vulnerability: node.vulnerability || null,
+        vulnerabilityId: null,
+        remediationDate: null,
+        remediatedBy: null,
+        expirationDate: null,
+      }
+    })
+
+  return {
+    remediatedVulnerabilities,
+  }
+}
diff --git a/apps/heureka/src/components/common/Navigation.tsx b/apps/heureka/src/components/common/Navigation.tsx
index 8e11cf88e7..4e4afb0934 100644
--- a/apps/heureka/src/components/common/Navigation.tsx
+++ b/apps/heureka/src/components/common/Navigation.tsx
@@ -12,6 +12,11 @@ type NavigationItemType = {
   value: string
 }
 
+type SavedRouteState = {
+  search: AnySchema
+  params: Record<string, string>
+}
+
 const navigationItems: NavigationItemType[] = [
   {
     label: "Services",
@@ -24,22 +29,46 @@ const navigationItems: NavigationItemType[] = [
 ]
 
 export const Navigation = () => {
-  const visitedPages = useRef<Record<string, AnySchema>>({})
+  const visitedPages = useRef<Record<string, SavedRouteState>>({})
   const navigate = useNavigate()
   const matches = useMatches()
 
-  const handleTabSelect = (link: React.ReactNode) => {
-    // Save the current pages's URL state to restore it later
+  const persistCurrentPageState = () => {
     const currentPath = matches[matches.length - 1].routeId
-    visitedPages.current[currentPath] = matches[matches.length - 1].search
-    if (typeof link === "string") {
-      navigate({
-        to: link,
-        search: visitedPages.current[link] ?? {}, // restore the url state of the target page
-      })
+    // Get the first segment of the current path (e.g., "/services/" from "/services/$services/$image")
+    const firstSegment = currentPath.split("/").slice(0, 2).join("/") + "/"
+
+    // Remove any existing entries that start with the same segment
+    Object.keys(visitedPages.current).forEach((path) => {
+      if (path.startsWith(firstSegment)) {
+        delete visitedPages.current[path]
+      }
+    })
+
+    visitedPages.current[currentPath] = {
+      search: matches[matches.length - 1].search,
+      params: matches[matches.length - 1].params,
     }
   }
 
+  const handleTabSelect = (link: React.ReactNode) => {
+    // Ensure the activeItem is a string before proceeding
+    if (typeof link !== "string") return
+
+    // Save the current pages's URL state to restore it later
+    persistCurrentPageState()
+
+    // Check if we have previously visited a page that starts with the target link
+    const previouslyVisitedPath = Object.keys(visitedPages.current).filter((path) => path.startsWith(link))
+    const to = previouslyVisitedPath.length > 0 ? previouslyVisitedPath[0] : link
+
+    navigate({
+      to,
+      params: visitedPages.current[to]?.params ?? {},
+      search: visitedPages.current[to]?.search ?? {},
+    })
+  }
+
   const getActiveItem = () => {
     const currentPath = matches[matches.length - 1].routeId
     const activeItem = navigationItems.find((item) => currentPath.includes(item.value))
diff --git a/apps/heureka/src/generated/graphql.ts b/apps/heureka/src/generated/graphql.ts
index 6f5e43b44e..480f772264 100644
--- a/apps/heureka/src/generated/graphql.ts
+++ b/apps/heureka/src/generated/graphql.ts
@@ -143,7 +143,10 @@ export type Component = Node & {
   componentVersions?: Maybe<ComponentVersionConnection>
   id: Scalars["ID"]["output"]
   metadata?: Maybe<Metadata>
+  organization?: Maybe<Scalars["String"]["output"]>
+  repository?: Maybe<Scalars["String"]["output"]>
   type?: Maybe<ComponentTypeValues>
+  url?: Maybe<Scalars["String"]["output"]>
 }
 
 export type ComponentComponentVersionsArgs = {
@@ -168,7 +171,8 @@ export type ComponentEdge = Edge & {
 
 export type ComponentFilter = {
   componentCcrn?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
-  componentVersionRepository?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  organization?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  repository?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
   serviceCcrn?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
   state?: InputMaybe<Array<StateFilter>>
 }
@@ -184,7 +188,10 @@ export type ComponentFilterValueComponentCcrnArgs = {
 
 export type ComponentInput = {
   ccrn?: InputMaybe<Scalars["String"]["input"]>
+  organization?: InputMaybe<Scalars["String"]["input"]>
+  repository?: InputMaybe<Scalars["String"]["input"]>
   type?: InputMaybe<ComponentTypeValues>
+  url?: InputMaybe<Scalars["String"]["input"]>
 }
 
 export type ComponentInstance = Node & {
@@ -572,6 +579,52 @@ export type ImageFilter = {
   service?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
 }
 
+export type ImageVersion = Node & {
+  __typename?: "ImageVersion"
+  id: Scalars["ID"]["output"]
+  metadata?: Maybe<Metadata>
+  occurences?: Maybe<ComponentInstanceConnection>
+  repository?: Maybe<Scalars["String"]["output"]>
+  tag?: Maybe<Scalars["String"]["output"]>
+  version?: Maybe<Scalars["String"]["output"]>
+  vulnerabilities?: Maybe<VulnerabilityConnection>
+  vulnerabilityCounts?: Maybe<SeverityCounts>
+}
+
+export type ImageVersionOccurencesArgs = {
+  after?: InputMaybe<Scalars["String"]["input"]>
+  first?: InputMaybe<Scalars["Int"]["input"]>
+}
+
+export type ImageVersionVulnerabilitiesArgs = {
+  after?: InputMaybe<Scalars["String"]["input"]>
+  filter?: InputMaybe<VulnerabilityFilter>
+  first?: InputMaybe<Scalars["Int"]["input"]>
+}
+
+export type ImageVersionConnection = Connection & {
+  __typename?: "ImageVersionConnection"
+  counts?: Maybe<SeverityCounts>
+  edges: Array<Maybe<ImageVersionEdge>>
+  pageInfo?: Maybe<PageInfo>
+  totalCount: Scalars["Int"]["output"]
+}
+
+export type ImageVersionEdge = Edge & {
+  __typename?: "ImageVersionEdge"
+  cursor?: Maybe<Scalars["String"]["output"]>
+  node: ImageVersion
+}
+
+export type ImageVersionFilter = {
+  image?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  repository?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  service?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  state?: InputMaybe<Array<StateFilter>>
+  tag?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  version?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+}
+
 export type Issue = Node & {
   __typename?: "Issue"
   activities?: Maybe<ActivityConnection>
@@ -1315,6 +1368,38 @@ export type PageInfo = {
   pages?: Maybe<Array<Maybe<Page>>>
 }
 
+export type Patch = Node & {
+  __typename?: "Patch"
+  componentVersionId?: Maybe<Scalars["ID"]["output"]>
+  componentVersionName?: Maybe<Scalars["String"]["output"]>
+  id: Scalars["ID"]["output"]
+  metadata?: Maybe<Metadata>
+  serviceId?: Maybe<Scalars["ID"]["output"]>
+  serviceName?: Maybe<Scalars["String"]["output"]>
+}
+
+export type PatchConnection = Connection & {
+  __typename?: "PatchConnection"
+  edges?: Maybe<Array<Maybe<PatchEdge>>>
+  pageInfo?: Maybe<PageInfo>
+  totalCount: Scalars["Int"]["output"]
+}
+
+export type PatchEdge = Edge & {
+  __typename?: "PatchEdge"
+  cursor?: Maybe<Scalars["String"]["output"]>
+  node: Patch
+}
+
+export type PatchFilter = {
+  componentVersionId?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  componentVersionName?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  id?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  serviceId?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  serviceName?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  state?: InputMaybe<Array<StateFilter>>
+}
+
 export type Query = {
   __typename?: "Query"
   Activities?: Maybe<ActivityConnection>
@@ -1324,6 +1409,7 @@ export type Query = {
   ComponentVersions?: Maybe<ComponentVersionConnection>
   Components?: Maybe<ComponentConnection>
   Evidences?: Maybe<EvidenceConnection>
+  ImageVersions?: Maybe<ImageVersionConnection>
   Images?: Maybe<ImageConnection>
   IssueCounts?: Maybe<SeverityCounts>
   IssueMatchChanges?: Maybe<IssueMatchChangeConnection>
@@ -1332,6 +1418,7 @@ export type Query = {
   IssueRepositories?: Maybe<IssueRepositoryConnection>
   IssueVariants?: Maybe<IssueVariantConnection>
   Issues?: Maybe<IssueConnection>
+  Patches?: Maybe<PatchConnection>
   Remediations?: Maybe<RemediationConnection>
   ScannerRunTagFilterValues?: Maybe<Array<Maybe<Scalars["String"]["output"]>>>
   ScannerRuns?: Maybe<ScannerRunConnection>
@@ -1375,6 +1462,12 @@ export type QueryEvidencesArgs = {
   first?: InputMaybe<Scalars["Int"]["input"]>
 }
 
+export type QueryImageVersionsArgs = {
+  after?: InputMaybe<Scalars["String"]["input"]>
+  filter?: InputMaybe<ImageVersionFilter>
+  first?: InputMaybe<Scalars["Int"]["input"]>
+}
+
 export type QueryImagesArgs = {
   after?: InputMaybe<Scalars["String"]["input"]>
   filter?: InputMaybe<ImageFilter>
@@ -1417,6 +1510,12 @@ export type QueryIssuesArgs = {
   orderBy?: InputMaybe<Array<InputMaybe<IssueOrderBy>>>
 }
 
+export type QueryPatchesArgs = {
+  after?: InputMaybe<Scalars["String"]["input"]>
+  filter?: InputMaybe<PatchFilter>
+  first?: InputMaybe<Scalars["Int"]["input"]>
+}
+
 export type QueryRemediationsArgs = {
   after?: InputMaybe<Scalars["String"]["input"]>
   filter?: InputMaybe<RemediationFilter>
@@ -1897,6 +1996,152 @@ export type VulnerabilityFilterValue = {
   supportGroup?: Maybe<FilterItem>
 }
 
+export type CreateRemediationMutationVariables = Exact<{
+  input: RemediationInput
+}>
+
+export type CreateRemediationMutation = {
+  __typename?: "Mutation"
+  createRemediation: {
+    __typename?: "Remediation"
+    id: string
+    description?: string | null
+    expirationDate?: any | null
+    image?: string | null
+    imageId?: string | null
+    remediatedBy?: string | null
+    remediationDate?: any | null
+    service?: string | null
+    serviceId?: string | null
+    type?: RemediationTypeValues | null
+    vulnerability?: string | null
+    vulnerabilityId?: string | null
+  }
+}
+
+export type DeleteRemediationMutationVariables = Exact<{
+  id: Scalars["ID"]["input"]
+}>
+
+export type DeleteRemediationMutation = { __typename?: "Mutation"; deleteRemediation: string }
+
+export type GetRemediationsQueryVariables = Exact<{
+  filter?: InputMaybe<RemediationFilter>
+}>
+
+export type GetRemediationsQuery = {
+  __typename?: "Query"
+  Remediations?: {
+    __typename?: "RemediationConnection"
+    totalCount: number
+    edges?: Array<{
+      __typename?: "RemediationEdge"
+      node: {
+        __typename?: "Remediation"
+        id: string
+        type?: RemediationTypeValues | null
+        description?: string | null
+        service?: string | null
+        image?: string | null
+        vulnerability?: string | null
+      }
+    } | null> | null
+  } | null
+}
+
+export type GetImageVersionsQueryVariables = Exact<{
+  filter?: InputMaybe<ImageVersionFilter>
+  first?: InputMaybe<Scalars["Int"]["input"]>
+  after?: InputMaybe<Scalars["String"]["input"]>
+  firstVulnerabilities?: InputMaybe<Scalars["Int"]["input"]>
+  afterVulnerabilities?: InputMaybe<Scalars["String"]["input"]>
+  firstOccurences?: InputMaybe<Scalars["Int"]["input"]>
+  afterOccurences?: InputMaybe<Scalars["String"]["input"]>
+}>
+
+export type GetImageVersionsQuery = {
+  __typename?: "Query"
+  ImageVersions?: {
+    __typename?: "ImageVersionConnection"
+    totalCount: number
+    counts?: {
+      __typename?: "SeverityCounts"
+      critical: number
+      high: number
+      medium: number
+      low: number
+      none: number
+      total: number
+    } | null
+    edges: Array<{
+      __typename?: "ImageVersionEdge"
+      node: {
+        __typename?: "ImageVersion"
+        id: string
+        tag?: string | null
+        repository?: string | null
+        version?: string | null
+        vulnerabilityCounts?: {
+          __typename?: "SeverityCounts"
+          critical: number
+          high: number
+          medium: number
+          low: number
+          none: number
+          total: number
+        } | null
+        occurences?: {
+          __typename?: "ComponentInstanceConnection"
+          edges: Array<{
+            __typename?: "ComponentInstanceEdge"
+            node: {
+              __typename?: "ComponentInstance"
+              id: string
+              ccrn?: string | null
+              componentVersionId?: string | null
+            }
+          } | null>
+        } | null
+        vulnerabilities?: {
+          __typename?: "VulnerabilityConnection"
+          edges: Array<{
+            __typename?: "VulnerabilityEdge"
+            node: {
+              __typename?: "Vulnerability"
+              id: string
+              severity?: SeverityValues | null
+              name?: string | null
+              sourceUrl?: string | null
+              earliestTargetRemediationDate?: any | null
+              description?: string | null
+            }
+          } | null>
+          pageInfo?: {
+            __typename?: "PageInfo"
+            pageNumber?: number | null
+            pages?: Array<{ __typename?: "Page"; after?: string | null; pageNumber?: number | null } | null> | null
+          } | null
+        } | null
+      }
+    } | null>
+    pageInfo?: {
+      __typename?: "PageInfo"
+      hasNextPage?: boolean | null
+      hasPreviousPage?: boolean | null
+      isValidPage?: boolean | null
+      pageNumber?: number | null
+      nextPageAfter?: string | null
+      pages?: Array<{
+        __typename?: "Page"
+        after?: string | null
+        isCurrent?: boolean | null
+        pageNumber?: number | null
+        pageCount?: number | null
+      } | null> | null
+    } | null
+  } | null
+}
+
 export type GetImagesQueryVariables = Exact<{
   imgFilter?: InputMaybe<ImageFilter>
   vulFilter?: InputMaybe<VulnerabilityFilter>
@@ -2146,6 +2391,146 @@ export type GetVulnerabilityFiltersQuery = {
   } | null
 }
 
+export const CreateRemediationDocument = gql`
+  mutation CreateRemediation($input: RemediationInput!) {
+    createRemediation(input: $input) {
+      id
+      description
+      expirationDate
+      image
+      imageId
+      remediatedBy
+      remediationDate
+      service
+      serviceId
+      type
+      vulnerability
+      vulnerabilityId
+    }
+  }
+`
+export type CreateRemediationMutationFn = Apollo.MutationFunction<
+  CreateRemediationMutation,
+  CreateRemediationMutationVariables
+>
+export type CreateRemediationMutationResult = Apollo.MutationResult<CreateRemediationMutation>
+export type CreateRemediationMutationOptions = Apollo.BaseMutationOptions<
+  CreateRemediationMutation,
+  CreateRemediationMutationVariables
+>
+export const DeleteRemediationDocument = gql`
+  mutation DeleteRemediation($id: ID!) {
+    deleteRemediation(id: $id)
+  }
+`
+export type DeleteRemediationMutationFn = Apollo.MutationFunction<
+  DeleteRemediationMutation,
+  DeleteRemediationMutationVariables
+>
+export type DeleteRemediationMutationResult = Apollo.MutationResult<DeleteRemediationMutation>
+export type DeleteRemediationMutationOptions = Apollo.BaseMutationOptions<
+  DeleteRemediationMutation,
+  DeleteRemediationMutationVariables
+>
+export const GetRemediationsDocument = gql`
+  query GetRemediations($filter: RemediationFilter) {
+    Remediations(filter: $filter) {
+      edges {
+        node {
+          id
+          type
+          description
+          service
+          image
+          vulnerability
+        }
+      }
+      totalCount
+    }
+  }
+`
+export type GetRemediationsQueryResult = Apollo.QueryResult<GetRemediationsQuery, GetRemediationsQueryVariables>
+export const GetImageVersionsDocument = gql`
+  query GetImageVersions(
+    $filter: ImageVersionFilter
+    $first: Int
+    $after: String
+    $firstVulnerabilities: Int
+    $afterVulnerabilities: String
+    $firstOccurences: Int
+    $afterOccurences: String
+  ) {
+    ImageVersions(first: $first, after: $after, filter: $filter) {
+      counts {
+        critical
+        high
+        medium
+        low
+        none
+        total
+      }
+      edges {
+        node {
+          id
+          tag
+          repository
+          version
+          vulnerabilityCounts {
+            critical
+            high
+            medium
+            low
+            none
+            total
+          }
+          occurences(first: $firstOccurences, after: $afterOccurences) {
+            edges {
+              node {
+                id
+                ccrn
+                componentVersionId
+              }
+            }
+          }
+          vulnerabilities(first: $firstVulnerabilities, after: $afterVulnerabilities) {
+            edges {
+              node {
+                id
+                severity
+                name
+                sourceUrl
+                earliestTargetRemediationDate
+                description
+              }
+            }
+            pageInfo {
+              pageNumber
+              pages {
+                after
+                pageNumber
+              }
+            }
+          }
+        }
+      }
+      totalCount
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        isValidPage
+        pageNumber
+        nextPageAfter
+        pages {
+          after
+          isCurrent
+          pageNumber
+          pageCount
+        }
+      }
+    }
+  }
+`
+export type GetImageVersionsQueryResult = Apollo.QueryResult<GetImageVersionsQuery, GetImageVersionsQueryVariables>
 export const GetImagesDocument = gql`
   query GetImages(
     $imgFilter: ImageFilter
@@ -2225,7 +2610,7 @@ export const GetImagesDocument = gql`
     }
   }
 `
-export type GetImagesQueryResult = Apollo.ApolloQueryResult<GetImagesQuery>
+export type GetImagesQueryResult = Apollo.QueryResult<GetImagesQuery, GetImagesQueryVariables>
 export const GetServiceFiltersDocument = gql`
   query GetServiceFilters {
     ServiceFilterValues {
@@ -2242,7 +2627,7 @@ export const GetServiceFiltersDocument = gql`
     }
   }
 `
-export type GetServiceFiltersQueryResult = Apollo.ApolloQueryResult<GetServiceFiltersQuery>
+export type GetServiceFiltersQueryResult = Apollo.QueryResult<GetServiceFiltersQuery, GetServiceFiltersQueryVariables>
 export const GetServicesDocument = gql`
   query GetServices($filter: ServiceFilter, $first: Int, $after: String, $orderBy: [ServiceOrderBy]) {
     Services(filter: $filter, first: $first, after: $after, orderBy: $orderBy) {
@@ -2295,7 +2680,7 @@ export const GetServicesDocument = gql`
     }
   }
 `
-export type GetServicesQueryResult = Apollo.ApolloQueryResult<GetServicesQuery>
+export type GetServicesQueryResult = Apollo.QueryResult<GetServicesQuery, GetServicesQueryVariables>
 export const GetVulnerabilitiesDocument = gql`
   query GetVulnerabilities(
     $filter: VulnerabilityFilter
@@ -2354,7 +2739,10 @@ export const GetVulnerabilitiesDocument = gql`
     }
   }
 `
-export type GetVulnerabilitiesQueryResult = Apollo.ApolloQueryResult<GetVulnerabilitiesQuery>
+export type GetVulnerabilitiesQueryResult = Apollo.QueryResult<
+  GetVulnerabilitiesQuery,
+  GetVulnerabilitiesQueryVariables
+>
 export const GetVulnerabilityFiltersDocument = gql`
   query GetVulnerabilityFilters {
     VulnerabilityFilterValues {
@@ -2371,4 +2759,7 @@ export const GetVulnerabilityFiltersDocument = gql`
     }
   }
 `
-export type GetVulnerabilityFiltersQueryResult = Apollo.ApolloQueryResult<GetVulnerabilityFiltersQuery>
+export type GetVulnerabilityFiltersQueryResult = Apollo.QueryResult<
+  GetVulnerabilityFiltersQuery,
+  GetVulnerabilityFiltersQueryVariables
+>
diff --git a/apps/heureka/src/graphql/Remediations/createRemediation.graphql b/apps/heureka/src/graphql/Remediations/createRemediation.graphql
new file mode 100644
index 0000000000..ae5adcd029
--- /dev/null
+++ b/apps/heureka/src/graphql/Remediations/createRemediation.graphql
@@ -0,0 +1,21 @@
+#SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+#SPDX-License-Identifier: Apache-2.0
+
+mutation CreateRemediation($input: RemediationInput!) {
+  createRemediation(input: $input) {
+    id
+    description
+    expirationDate
+    image
+    imageId
+    remediatedBy
+    remediationDate
+    service
+    serviceId
+    type
+    vulnerability
+    vulnerabilityId
+  }
+}
+
+
diff --git a/apps/heureka/src/graphql/Remediations/deleteRemediation.graphql b/apps/heureka/src/graphql/Remediations/deleteRemediation.graphql
new file mode 100644
index 0000000000..78ea7756a2
--- /dev/null
+++ b/apps/heureka/src/graphql/Remediations/deleteRemediation.graphql
@@ -0,0 +1,7 @@
+#SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+#SPDX-License-Identifier: Apache-2.0
+
+mutation DeleteRemediation($id: ID!) {
+  deleteRemediation(id: $id)
+}
+
diff --git a/apps/heureka/src/graphql/Remediations/getRemediations.graphql b/apps/heureka/src/graphql/Remediations/getRemediations.graphql
new file mode 100644
index 0000000000..793a03d413
--- /dev/null
+++ b/apps/heureka/src/graphql/Remediations/getRemediations.graphql
@@ -0,0 +1,19 @@
+#SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+#SPDX-License-Identifier: Apache-2.0
+
+query GetRemediations($filter: RemediationFilter) {
+  Remediations(filter: $filter) {
+    edges {
+      node {
+        id
+        type
+        description
+        service
+        image
+        vulnerability
+      }
+    }
+    totalCount
+  }
+}
+
diff --git a/apps/heureka/src/graphql/Services/getImageVersions.graphql b/apps/heureka/src/graphql/Services/getImageVersions.graphql
new file mode 100644
index 0000000000..bad1a6dc25
--- /dev/null
+++ b/apps/heureka/src/graphql/Services/getImageVersions.graphql
@@ -0,0 +1,97 @@
+#SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+#SPDX-License-Identifier: Apache-2.0
+
+query GetImageVersions(
+    $filter: ImageVersionFilter
+    $first: Int
+    $after: String
+    $firstVulnerabilities: Int
+    $afterVulnerabilities: String
+    $firstOccurences: Int
+    $afterOccurences: String
+) {
+  # This query is designed for listing the ImageVersions of a Service
+  # - It's ordered by Vulnerability Count per default, then by Repository
+  # - Default page size is 10, but can be overridden by the $first parameter
+  ImageVersions(first: $first, after: $after, filter: $filter) {
+    # Counts will result in a subquery. Request only if needed.
+    # Counts number of Vulnerabilities per severity
+    counts{
+      critical
+      high
+      medium
+      low
+      none
+      total
+    }
+    edges{
+      node{
+        id
+        tag
+        repository
+        version
+        # Counts will result in a subquery. Request only if needed.
+        # Counts number of Vulnerabilities per severity
+        vulnerabilityCounts{
+          critical
+          high
+          medium
+          low
+          none
+          total
+        }
+        # Default page size is 10, but can be overridden by the $first parameter
+        occurences(first: $firstOccurences, after: $afterOccurences){
+          edges{
+            node{
+              id
+              ccrn
+              componentVersionId
+            }
+          }
+        }
+        # - Only returns Issues of type Vulnerability
+        # - Only returns Issues with at least one IssueMatch with status "new"
+        # - It's ordered by severity per default
+        # - Default page size is 10, but can be overridden by the $first parameter
+        vulnerabilities(first: $firstVulnerabilities, after: $afterVulnerabilities){
+          edges{
+            node{
+              id
+              severity
+              name
+              sourceUrl
+              earliestTargetRemediationDate
+              description
+            }
+          }
+          # Requesting pageInfo will result in a subquery. Request only if needed.
+          pageInfo{
+            pageNumber
+            pages{
+              after
+              pageNumber
+            }
+          }
+        }
+      }
+    }
+    # Total count will result in a subquery. Request only if needed.
+    totalCount
+    # Requesting pageInfo will result in a subquery. Request only if needed.
+    pageInfo {
+        hasNextPage
+        hasPreviousPage
+        isValidPage
+        pageNumber
+        nextPageAfter
+        pages {
+            after
+            isCurrent
+            pageNumber
+            pageCount
+        }
+    }
+  }
+}
+
diff --git a/apps/heureka/src/routeTree.gen.ts b/apps/heureka/src/routeTree.gen.ts
index 1fb7227f9e..2ff0e24d50 100644
--- a/apps/heureka/src/routeTree.gen.ts
+++ b/apps/heureka/src/routeTree.gen.ts
@@ -15,6 +15,8 @@ import { Route as IndexRouteImport } from './routes/index'
 import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
 import { Route as ServicesIndexRouteImport } from './routes/services/index'
 import { Route as ServicesServiceRouteImport } from './routes/services/$service'
+import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
+import { Route as ServicesServiceImagesImageVersionsVersionRouteImport } from './routes/services/$service/images/$image/versions/$version'
 
 const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
   id: '/vulnerabilities',
@@ -46,29 +48,47 @@ const ServicesServiceRoute = ServicesServiceRouteImport.update({
   path: '/$service',
   getParentRoute: () => ServicesRouteRoute,
 } as any)
+const ServicesServiceImagesImageRoute =
+  ServicesServiceImagesImageRouteImport.update({
+    id: '/images/$image',
+    path: '/images/$image',
+    getParentRoute: () => ServicesServiceRoute,
+  } as any)
+const ServicesServiceImagesImageVersionsVersionRoute =
+  ServicesServiceImagesImageVersionsVersionRouteImport.update({
+    id: '/versions/$version',
+    path: '/versions/$version',
+    getParentRoute: () => ServicesServiceImagesImageRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/services': typeof ServicesRouteRouteWithChildren
   '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRoute
+  '/services/$service': typeof ServicesServiceRouteWithChildren
   '/services/': typeof ServicesIndexRoute
   '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/services/$service': typeof ServicesServiceRoute
+  '/services/$service': typeof ServicesServiceRouteWithChildren
   '/services': typeof ServicesIndexRoute
   '/vulnerabilities': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/services': typeof ServicesRouteRouteWithChildren
   '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRoute
+  '/services/$service': typeof ServicesServiceRouteWithChildren
   '/services/': typeof ServicesIndexRoute
   '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -79,8 +99,16 @@ export interface FileRouteTypes {
     | '/services/$service'
     | '/services/'
     | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/services/$service' | '/services' | '/vulnerabilities'
+  to:
+    | '/'
+    | '/services/$service'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
   id:
     | '__root__'
     | '/'
@@ -89,6 +117,8 @@ export interface FileRouteTypes {
     | '/services/$service'
     | '/services/'
     | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -141,16 +171,57 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ServicesServiceRouteImport
       parentRoute: typeof ServicesRouteRoute
     }
+    '/services/$service/images/$image': {
+      id: '/services/$service/images/$image'
+      path: '/images/$image'
+      fullPath: '/services/$service/images/$image'
+      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
+      parentRoute: typeof ServicesServiceRoute
+    }
+    '/services/$service/images/$image/versions/$version': {
+      id: '/services/$service/images/$image/versions/$version'
+      path: '/versions/$version'
+      fullPath: '/services/$service/images/$image/versions/$version'
+      preLoaderRoute: typeof ServicesServiceImagesImageVersionsVersionRouteImport
+      parentRoute: typeof ServicesServiceImagesImageRoute
+    }
   }
 }
 
+interface ServicesServiceImagesImageRouteChildren {
+  ServicesServiceImagesImageVersionsVersionRoute: typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+
+const ServicesServiceImagesImageRouteChildren: ServicesServiceImagesImageRouteChildren =
+  {
+    ServicesServiceImagesImageVersionsVersionRoute:
+      ServicesServiceImagesImageVersionsVersionRoute,
+  }
+
+const ServicesServiceImagesImageRouteWithChildren =
+  ServicesServiceImagesImageRoute._addFileChildren(
+    ServicesServiceImagesImageRouteChildren,
+  )
+
+interface ServicesServiceRouteChildren {
+  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRouteWithChildren
+}
+
+const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
+  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRouteWithChildren,
+}
+
+const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
+  ServicesServiceRouteChildren,
+)
+
 interface ServicesRouteRouteChildren {
-  ServicesServiceRoute: typeof ServicesServiceRoute
+  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
   ServicesIndexRoute: typeof ServicesIndexRoute
 }
 
 const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
-  ServicesServiceRoute: ServicesServiceRoute,
+  ServicesServiceRoute: ServicesServiceRouteWithChildren,
   ServicesIndexRoute: ServicesIndexRoute,
 }
 
diff --git a/apps/heureka/src/routes/services/$service.tsx b/apps/heureka/src/routes/services/$service.tsx
index cb455ec5bf..0ce4e3ae9d 100644
--- a/apps/heureka/src/routes/services/$service.tsx
+++ b/apps/heureka/src/routes/services/$service.tsx
@@ -4,30 +4,34 @@
  */
 
 import { createFileRoute } from "@tanstack/react-router"
-import { z } from "zod"
 import { Service } from "../../components/Service"
 import { fetchService } from "../../api/fetchService"
-
-const serviceSearchSchema = z.object({
-  image: z.string().optional(),
-})
+import { NetworkStatus } from "@apollo/client"
+import { GetServicesQueryResult } from "../../generated/graphql"
 
 export const Route = createFileRoute("/services/$service")({
-  validateSearch: serviceSearchSchema,
   shouldReload: false,
-  loaderDeps: ({ search }) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { image, ...rest } = search // we're omitting 'image' from the deps so route does not reload when it changes
-    return { ...rest }
-  },
-  loader: ({ context, params: { service } }) => {
+  loader: ({ context, params: { service }, location }) => {
     const { queryClient, apiClient } = context
-    // create a promise to fetch the service
-    const servicePromise = fetchService({
-      queryClient,
-      apiClient,
-      service,
-    })
+
+    // Skip fetching service if we're on the image details page or version details page
+    // Check if the pathname includes "/images/" which indicates we're on an image details or version details route
+    const isOnImageOrVersionDetailsPage = location.pathname.includes("/images/")
+
+    // Return a no-op promise if on image or version details page to avoid unnecessary fetch
+    // ServiceDetails component won't render on these pages, so this promise won't be used
+    const servicePromise: Promise<GetServicesQueryResult> = isOnImageOrVersionDetailsPage
+      ? Promise.resolve({
+          data: { Services: { edges: [], totalCount: 0, pageInfo: null } },
+          loading: false,
+          networkStatus: NetworkStatus.ready,
+          partial: false,
+        } as unknown as GetServicesQueryResult)
+      : fetchService({
+          queryClient,
+          apiClient,
+          service,
+        })
 
     return {
       servicePromise,
diff --git a/apps/heureka/src/routes/services/$service/images/$image.tsx b/apps/heureka/src/routes/services/$service/images/$image.tsx
new file mode 100644
index 0000000000..f970c068e6
--- /dev/null
+++ b/apps/heureka/src/routes/services/$service/images/$image.tsx
@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Suspense } from "react"
+import { createFileRoute, Outlet, useMatchRoute } from "@tanstack/react-router"
+import { ImageDetails } from "../../../../components/Service/ImageDetails"
+import { fetchImages } from "../../../../api/fetchImages"
+import { Spinner } from "@cloudoperators/juno-ui-components"
+import { ErrorBoundary } from "../../../../components/common/ErrorBoundary"
+
+export const Route = createFileRoute("/services/$service/images/$image")({
+  shouldReload: false,
+  loader: ({ context, params: { service, image } }) => {
+    const { queryClient, apiClient } = context
+    // create a promise to fetch the images for this service
+    const imagesPromise = fetchImages({
+      queryClient,
+      apiClient,
+      filter: {
+        service: [service],
+        repository: [image],
+      },
+      firstVersions: 100, // Fetch versions for the image
+    })
+
+    return {
+      imagesPromise,
+      crumb: {
+        label: image,
+      },
+    }
+  },
+  component: ImageDetailsPage,
+})
+
+function ImageDetailsPage() {
+  const { imagesPromise } = Route.useLoaderData()
+  const { service, image } = Route.useParams()
+  const matchRoute = useMatchRoute()
+  const isOnVersionDetailsPage = matchRoute({ to: "/services/$service/images/$image/versions/$version" })
+
+  // If we're on a child route (version details), just render the outlet
+  if (isOnVersionDetailsPage) {
+    return <Outlet />
+  }
+
+  // Otherwise, render the image details
+  return (
+    <ErrorBoundary displayErrorMessage>
+      <Suspense fallback={<Spinner className="mt-4" />}>
+        <ImageDetails imagesPromise={imagesPromise} imageRepository={image} service={service} />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
diff --git a/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx b/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx
new file mode 100644
index 0000000000..6fb76ad4a6
--- /dev/null
+++ b/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx
@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Suspense } from "react"
+import { createFileRoute } from "@tanstack/react-router"
+import { ImageVersionDetails } from "../../../../../../components/Service/ImageVersionDetails"
+import { fetchImageVersions } from "../../../../../../api/fetchImageVersions"
+import { Spinner } from "@cloudoperators/juno-ui-components"
+import { ErrorBoundary } from "../../../../../../components/common/ErrorBoundary"
+
+export const Route = createFileRoute("/services/$service/images/$image/versions/$version")({
+  shouldReload: false,
+  loader: ({ context, params: { service, image, version } }) => {
+    const { queryClient, apiClient } = context
+    // create a promise to fetch the image versions for this service, image, and version
+    const imageVersionsPromise = fetchImageVersions({
+      queryClient,
+      apiClient,
+      filter: {
+        service: [service],
+        repository: [image],
+        version: [version],
+      },
+      firstVulnerabilities: 20,
+      firstOccurences: 100,
+    })
+
+    return {
+      imageVersionsPromise,
+      crumb: {
+        label: version,
+      },
+    }
+  },
+  component: ImageVersionDetailsPage,
+})
+
+function ImageVersionDetailsPage() {
+  const { imageVersionsPromise } = Route.useLoaderData()
+  const { service, image, version } = Route.useParams()
+
+  return (
+    <ErrorBoundary displayErrorMessage>
+      <Suspense fallback={<Spinner className="mt-4" />}>
+        <ImageVersionDetails
+          imageVersionsPromise={imageVersionsPromise}
+          imageVersion={version}
+          service={service}
+          imageRepository={image}
+        />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}

From 5d21f3df95c5bc4b073146d79192f60cadf0059f Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 09:23:21 +0100
Subject: [PATCH 02/11] feat(heureka): put the search box inside the
 vulnerabilities top navigation item

---
 apps/heureka/src/api/createRemediation.tsx    |  2 +-
 apps/heureka/src/api/deleteRemediation.tsx    |  2 +-
 .../RemediatedIssuesDataRows/index.tsx        | 12 ++------
 .../ImageDetails/ImageIssuesList/index.tsx    | 29 ++++++++-----------
 .../ImageDetails/ImageVersionsList/index.tsx  |  2 +-
 5 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/apps/heureka/src/api/createRemediation.tsx b/apps/heureka/src/api/createRemediation.tsx
index 4830d0922e..3de224fcda 100644
--- a/apps/heureka/src/api/createRemediation.tsx
+++ b/apps/heureka/src/api/createRemediation.tsx
@@ -12,7 +12,7 @@ import {
 } from "../generated/graphql"
 
 type CreateRemediationParams = {
-  apiClient: ApolloClient<unknown>
+  apiClient: ApolloClient
   input: RemediationInput
 }
 
diff --git a/apps/heureka/src/api/deleteRemediation.tsx b/apps/heureka/src/api/deleteRemediation.tsx
index 3563ca4e11..b4735c3c94 100644
--- a/apps/heureka/src/api/deleteRemediation.tsx
+++ b/apps/heureka/src/api/deleteRemediation.tsx
@@ -11,7 +11,7 @@ import {
 } from "../generated/graphql"
 
 type DeleteRemediationParams = {
-  apiClient: ApolloClient<unknown>
+  apiClient: ApolloClient
   remediationId: string
 }
 
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
index cb7e8b4c6c..e765e25c0e 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
@@ -14,11 +14,9 @@ import { deleteRemediation } from "../../../../../api/deleteRemediation"
 
 type RemediatedIssuesDataRowsProps = {
   remediationsPromise: Promise<ObservableQuery.Result<GetRemediationsQuery>>
-  service: string
-  image: string
 }
 
-export const RemediatedIssuesDataRows = ({ remediationsPromise, service, image }: RemediatedIssuesDataRowsProps) => {
+export const RemediatedIssuesDataRows = ({ remediationsPromise }: RemediatedIssuesDataRowsProps) => {
   const { error, data } = use(remediationsPromise)
   const { remediatedVulnerabilities } = getNormalizedRemediationsResponse(data as GetRemediationsQuery | undefined)
   const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
@@ -46,13 +44,7 @@ export const RemediatedIssuesDataRows = ({ remediationsPromise, service, image }
   return (
     <>
       {remediatedVulnerabilities.map((remediation) => (
-        <RemediatedIssueDataRow
-          key={remediation.remediationId}
-          remediation={remediation}
-          service={service}
-          image={image}
-          onRevert={handleRevert}
-        />
+        <RemediatedIssueDataRow key={remediation.remediationId} remediation={remediation} onRevert={handleRevert} />
       ))}
     </>
   )
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
index 47a78a62c4..6508c19b52 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
@@ -63,24 +63,22 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
 
   return (
     <>
-      <Stack gap="2" className="mb-4 mt-8">
-        {selectedTabIndex === 0 && (
-          <SearchInput
-            placeholder="Search for CVE number"
-            className="w-96 ml-auto"
-            onSearch={(search) => setSearchTerm(search || "")}
-            onClear={() => {
-              setSearchTerm("")
-            }}
-          />
-        )}
-      </Stack>
       <Tabs selectedIndex={selectedTabIndex} onSelect={setSelectedTabIndex} variant="content">
         <TabList>
           <Tab label="Vulnerabilities" />
           <Tab label="Remediated Vulnerabilities" />
         </TabList>
         <TabPanel>
+          <Stack gap="2" className="mb-4 mt-4">
+            <SearchInput
+              placeholder="Search for CVE number"
+              className="w-96 ml-auto"
+              onSearch={(search) => setSearchTerm(search || "")}
+              onClear={() => {
+                setSearchTerm("")
+              }}
+            />
+          </Stack>
           <DataGrid columns={5} minContentColumns={[0, 1, 2, 4]} cellVerticalAlignment="top">
             <DataGridRow>
               <DataGridHeadCell>
@@ -117,6 +115,7 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
           )}
         </TabPanel>
         <TabPanel>
+          <div className="mb-4 mt-4" />
           <DataGrid columns={4} minContentColumns={[0, 1, 3]} cellVerticalAlignment="top">
             <DataGridRow>
               <DataGridHeadCell>
@@ -134,11 +133,7 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
                 resetKeys={[remediationsPromise]}
               >
                 <Suspense fallback={<LoadingDataRow colSpan={4} />}>
-                  <RemediatedIssuesDataRows
-                    remediationsPromise={remediationsPromise}
-                    service={service}
-                    image={image.repository}
-                  />
+                  <RemediatedIssuesDataRows remediationsPromise={remediationsPromise} />
                 </Suspense>
               </ErrorBoundary>
             )}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
index 65e9dc2270..f25ab148eb 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
@@ -52,7 +52,7 @@ export const ImageVersionsList = ({ versions, service, imageRepository }: ImageV
                 className="link-hover"
               >
                 <Stack gap="2" direction="horizontal" alignment="center">
-                  <Icon icon="code" size="16" />
+                  <Icon icon="info" size="16" />
                   <span>{version.version}</span>
                 </Stack>
               </a>

From 864acdb7d29172ba66d037677f78d1a2fd4d2563 Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 09:57:41 +0100
Subject: [PATCH 03/11] chore(heureka): extends codegen to be adjusted with
 apollo client V4

---
 apps/heureka/codegen.ts                       |  5 +++
 apps/heureka/src/api/fetchImageVersions.tsx   | 10 ++----
 apps/heureka/src/api/fetchImages.tsx          |  4 +--
 apps/heureka/src/api/fetchRemediations.tsx    | 10 ++----
 apps/heureka/src/api/fetchService.tsx         |  4 +--
 .../components/Service/ImageDetails/index.tsx |  5 +--
 .../ImageVersionIssuesDataRows/index.tsx      |  5 +--
 .../ImageVersionIssuesList/index.tsx          |  5 +--
 .../Service/ImageVersionDetails/index.tsx     |  5 +--
 apps/heureka/src/components/Service/index.tsx |  7 ++--
 apps/heureka/src/generated/graphql.ts         | 32 -------------------
 apps/heureka/src/routes/services/$service.tsx |  8 ++---
 12 files changed, 36 insertions(+), 64 deletions(-)

diff --git a/apps/heureka/codegen.ts b/apps/heureka/codegen.ts
index cb3ef40dad..1db7c86a0c 100644
--- a/apps/heureka/codegen.ts
+++ b/apps/heureka/codegen.ts
@@ -21,6 +21,11 @@ const config: CodegenConfig = {
         withHooks: false,
         withHOC: false,
         withComponent: false,
+        // Apollo Client v4 removed several legacy exported helper types (e.g. QueryResult, MutationFunction).
+        // Prevent codegen from generating those helper type aliases so the generated file stays compatible.
+        withResultType: false,
+        withMutationFn: false,
+        withMutationOptionsType: false,
       },
     },
   },
diff --git a/apps/heureka/src/api/fetchImageVersions.tsx b/apps/heureka/src/api/fetchImageVersions.tsx
index 5d1c579668..60f868bd84 100644
--- a/apps/heureka/src/api/fetchImageVersions.tsx
+++ b/apps/heureka/src/api/fetchImageVersions.tsx
@@ -3,12 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  GetImageVersionsDocument,
-  GetImageVersionsQuery,
-  GetImageVersionsQueryResult,
-  ImageVersionFilter,
-} from "../generated/graphql"
+import { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsDocument, GetImageVersionsQuery, ImageVersionFilter } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
 
 type FetchImageVersionsParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
@@ -31,7 +27,7 @@ export const fetchImageVersions = ({
   afterVulnerabilities,
   firstOccurences,
   afterOccurences,
-}: FetchImageVersionsParams): Promise<GetImageVersionsQueryResult> => {
+}: FetchImageVersionsParams): Promise<ObservableQuery.Result<GetImageVersionsQuery>> => {
   const queryKey = [
     "imageVersions",
     filter,
diff --git a/apps/heureka/src/api/fetchImages.tsx b/apps/heureka/src/api/fetchImages.tsx
index c8a16b026e..a4216842b8 100644
--- a/apps/heureka/src/api/fetchImages.tsx
+++ b/apps/heureka/src/api/fetchImages.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ApolloQueryResult } from "@apollo/client"
+import { ObservableQuery } from "@apollo/client"
 import { GetImagesDocument, GetImagesQuery, ImageFilter, VulnerabilityFilter } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
 
@@ -29,7 +29,7 @@ export const fetchImages = ({
   firstVersions,
   afterVersions,
   vulFilter,
-}: FetchImagesParams): Promise<ApolloQueryResult<GetImagesQuery>> => {
+}: FetchImagesParams): Promise<ObservableQuery.Result<GetImagesQuery>> => {
   return queryClient.ensureQueryData({
     queryKey: [
       "images",
diff --git a/apps/heureka/src/api/fetchRemediations.tsx b/apps/heureka/src/api/fetchRemediations.tsx
index e2cf8b125f..234284547a 100644
--- a/apps/heureka/src/api/fetchRemediations.tsx
+++ b/apps/heureka/src/api/fetchRemediations.tsx
@@ -3,12 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  GetRemediationsDocument,
-  GetRemediationsQuery,
-  GetRemediationsQueryResult,
-  RemediationFilter,
-} from "../generated/graphql"
+import { ObservableQuery } from "@apollo/client"
+import { GetRemediationsDocument, GetRemediationsQuery, RemediationFilter } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
 
 type FetchRemediationsParams = Pick<RouteContext, "queryClient" | "apiClient"> & {
@@ -19,7 +15,7 @@ export const fetchRemediations = ({
   queryClient,
   apiClient,
   filter,
-}: FetchRemediationsParams): Promise<GetRemediationsQueryResult> => {
+}: FetchRemediationsParams): Promise<ObservableQuery.Result<GetRemediationsQuery>> => {
   const queryKey = ["remediations", filter]
 
   return queryClient.ensureQueryData({
diff --git a/apps/heureka/src/api/fetchService.tsx b/apps/heureka/src/api/fetchService.tsx
index 3ec3344fe4..cdbe2f47da 100644
--- a/apps/heureka/src/api/fetchService.tsx
+++ b/apps/heureka/src/api/fetchService.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ApolloQueryResult } from "@apollo/client"
+import { ObservableQuery } from "@apollo/client"
 import { GetServicesDocument, GetServicesQuery, OrderDirection, ServiceOrderByField } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
 
@@ -15,7 +15,7 @@ export const fetchService = ({
   queryClient,
   apiClient,
   service,
-}: FetchServiceParams): Promise<ApolloQueryResult<GetServicesQuery>> => {
+}: FetchServiceParams): Promise<ObservableQuery.Result<GetServicesQuery>> => {
   return queryClient.ensureQueryData({
     queryKey: ["services", service],
     queryFn: () =>
diff --git a/apps/heureka/src/components/Service/ImageDetails/index.tsx b/apps/heureka/src/components/Service/ImageDetails/index.tsx
index c26947a07e..06ca996e07 100644
--- a/apps/heureka/src/components/Service/ImageDetails/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/index.tsx
@@ -18,10 +18,11 @@ import { getNormalizedImagesResponse, ServiceImage } from "../../Services/utils"
 import { IssueCountsPerSeverityLevel } from "../../common/IssueCountsPerSeverityLevel"
 import SectionContentHeading from "../../common/SectionContentHeading"
 import { ImageIssuesList } from "./ImageIssuesList"
-import { GetImagesQuery, GetImagesQueryResult } from "../../../generated/graphql"
+import { ObservableQuery } from "@apollo/client"
+import { GetImagesQuery } from "../../../generated/graphql"
 
 type ImageDetailsProps = {
-  imagesPromise: Promise<GetImagesQueryResult>
+  imagesPromise: Promise<ObservableQuery.Result<GetImagesQuery>>
   imageRepository: string
   service: string
 }
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
index e37fa9ea77..3d3b0288be 100644
--- a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
@@ -4,13 +4,14 @@
  */
 
 import React, { use } from "react"
-import { GetImageVersionsQueryResult } from "../../../../../generated/graphql"
+import { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsQuery } from "../../../../../generated/graphql"
 import { EmptyDataGridRow } from "../../../../common/EmptyDataGridRow"
 import { IssuesDataRow } from "../../../ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow"
 import { getNormalizedImageVersionDetailsResponse } from "../../../../Services/utils"
 
 type ImageVersionIssuesDataRowsProps = {
-  issuesPromise: Promise<GetImageVersionsQueryResult>
+  issuesPromise: Promise<ObservableQuery.Result<GetImageVersionsQuery>>
   service: string
   image: string
 }
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
index 41b40057dc..61241f4998 100644
--- a/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
@@ -12,14 +12,15 @@ import {
   Stack,
   ContentHeading,
 } from "@cloudoperators/juno-ui-components"
-import { GetImageVersionsQueryResult } from "../../../../generated/graphql"
+import { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsQuery } from "../../../../generated/graphql"
 import { ImageVersionIssuesDataRows } from "./ImageVersionIssuesDataRows"
 import { ErrorBoundary } from "../../../common/ErrorBoundary"
 import { getErrorDataRowComponent } from "../../../common/getErrorDataRow"
 import { LoadingDataRow } from "../../../common/LoadingDataRow"
 
 type ImageVersionIssuesListProps = {
-  issuesPromise: Promise<GetImageVersionsQueryResult>
+  issuesPromise: Promise<ObservableQuery.Result<GetImageVersionsQuery>>
   service: string
   image: string
 }
diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
index c28533d0c2..42d8c0a70d 100644
--- a/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
@@ -10,10 +10,11 @@ import ImageVersionOccurrences from "./ImageVersionOccurrences"
 import { IssueCountsPerSeverityLevel } from "../../common/IssueCountsPerSeverityLevel"
 import SectionContentHeading from "../../common/SectionContentHeading"
 import { ImageVersionIssuesList } from "./ImageVersionIssuesList"
-import { GetImageVersionsQuery, GetImageVersionsQueryResult } from "../../../generated/graphql"
+import { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsQuery } from "../../../generated/graphql"
 
 type ImageVersionDetailsProps = {
-  imageVersionsPromise: Promise<GetImageVersionsQueryResult>
+  imageVersionsPromise: Promise<ObservableQuery.Result<GetImageVersionsQuery>>
   imageVersion: string
   service: string
   imageRepository: string
diff --git a/apps/heureka/src/components/Service/index.tsx b/apps/heureka/src/components/Service/index.tsx
index 0f3cd850c9..e8adc227ac 100644
--- a/apps/heureka/src/components/Service/index.tsx
+++ b/apps/heureka/src/components/Service/index.tsx
@@ -6,10 +6,11 @@
 import React, { Suspense, useEffect, useState } from "react"
 import { Outlet, useLoaderData, useMatchRoute, useNavigate, useParams, useRouteContext } from "@tanstack/react-router"
 import { Spinner } from "@cloudoperators/juno-ui-components"
+import { ObservableQuery } from "@apollo/client"
 import { ServiceImages } from "../common/ServiceImages"
 import { ServiceDetails } from "./ServiceDetails"
 import { fetchImages } from "../../api/fetchImages"
-import { GetImagesQueryResult } from "../../generated/graphql"
+import { GetImagesQuery } from "../../generated/graphql"
 import { ErrorBoundary } from "../common/ErrorBoundary"
 
 export const Service = () => {
@@ -18,7 +19,9 @@ export const Service = () => {
   const { servicePromise } = useLoaderData({ from: "/services/$service" })
   const { service } = useParams({ from: "/services/$service" })
   const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
-  const [imagesPromise, setImagesPromise] = useState<Promise<GetImagesQueryResult> | undefined>(undefined)
+  const [imagesPromise, setImagesPromise] = useState<Promise<ObservableQuery.Result<GetImagesQuery>> | undefined>(
+    undefined
+  )
 
   // Check if we're on a child route (image details page or version details page)
   const matchRoute = useMatchRoute()
diff --git a/apps/heureka/src/generated/graphql.ts b/apps/heureka/src/generated/graphql.ts
index 480f772264..7f7fa6092e 100644
--- a/apps/heureka/src/generated/graphql.ts
+++ b/apps/heureka/src/generated/graphql.ts
@@ -1,5 +1,4 @@
 import { gql } from "@apollo/client"
-import * as Apollo from "@apollo/client"
 export type Maybe<T> = T | null
 export type InputMaybe<T> = Maybe<T>
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] }
@@ -2409,29 +2408,11 @@ export const CreateRemediationDocument = gql`
     }
   }
 `
-export type CreateRemediationMutationFn = Apollo.MutationFunction<
-  CreateRemediationMutation,
-  CreateRemediationMutationVariables
->
-export type CreateRemediationMutationResult = Apollo.MutationResult<CreateRemediationMutation>
-export type CreateRemediationMutationOptions = Apollo.BaseMutationOptions<
-  CreateRemediationMutation,
-  CreateRemediationMutationVariables
->
 export const DeleteRemediationDocument = gql`
   mutation DeleteRemediation($id: ID!) {
     deleteRemediation(id: $id)
   }
 `
-export type DeleteRemediationMutationFn = Apollo.MutationFunction<
-  DeleteRemediationMutation,
-  DeleteRemediationMutationVariables
->
-export type DeleteRemediationMutationResult = Apollo.MutationResult<DeleteRemediationMutation>
-export type DeleteRemediationMutationOptions = Apollo.BaseMutationOptions<
-  DeleteRemediationMutation,
-  DeleteRemediationMutationVariables
->
 export const GetRemediationsDocument = gql`
   query GetRemediations($filter: RemediationFilter) {
     Remediations(filter: $filter) {
@@ -2449,7 +2430,6 @@ export const GetRemediationsDocument = gql`
     }
   }
 `
-export type GetRemediationsQueryResult = Apollo.QueryResult<GetRemediationsQuery, GetRemediationsQueryVariables>
 export const GetImageVersionsDocument = gql`
   query GetImageVersions(
     $filter: ImageVersionFilter
@@ -2530,7 +2510,6 @@ export const GetImageVersionsDocument = gql`
     }
   }
 `
-export type GetImageVersionsQueryResult = Apollo.QueryResult<GetImageVersionsQuery, GetImageVersionsQueryVariables>
 export const GetImagesDocument = gql`
   query GetImages(
     $imgFilter: ImageFilter
@@ -2610,7 +2589,6 @@ export const GetImagesDocument = gql`
     }
   }
 `
-export type GetImagesQueryResult = Apollo.QueryResult<GetImagesQuery, GetImagesQueryVariables>
 export const GetServiceFiltersDocument = gql`
   query GetServiceFilters {
     ServiceFilterValues {
@@ -2627,7 +2605,6 @@ export const GetServiceFiltersDocument = gql`
     }
   }
 `
-export type GetServiceFiltersQueryResult = Apollo.QueryResult<GetServiceFiltersQuery, GetServiceFiltersQueryVariables>
 export const GetServicesDocument = gql`
   query GetServices($filter: ServiceFilter, $first: Int, $after: String, $orderBy: [ServiceOrderBy]) {
     Services(filter: $filter, first: $first, after: $after, orderBy: $orderBy) {
@@ -2680,7 +2657,6 @@ export const GetServicesDocument = gql`
     }
   }
 `
-export type GetServicesQueryResult = Apollo.QueryResult<GetServicesQuery, GetServicesQueryVariables>
 export const GetVulnerabilitiesDocument = gql`
   query GetVulnerabilities(
     $filter: VulnerabilityFilter
@@ -2739,10 +2715,6 @@ export const GetVulnerabilitiesDocument = gql`
     }
   }
 `
-export type GetVulnerabilitiesQueryResult = Apollo.QueryResult<
-  GetVulnerabilitiesQuery,
-  GetVulnerabilitiesQueryVariables
->
 export const GetVulnerabilityFiltersDocument = gql`
   query GetVulnerabilityFilters {
     VulnerabilityFilterValues {
@@ -2759,7 +2731,3 @@ export const GetVulnerabilityFiltersDocument = gql`
     }
   }
 `
-export type GetVulnerabilityFiltersQueryResult = Apollo.QueryResult<
-  GetVulnerabilityFiltersQuery,
-  GetVulnerabilityFiltersQueryVariables
->
diff --git a/apps/heureka/src/routes/services/$service.tsx b/apps/heureka/src/routes/services/$service.tsx
index 0ce4e3ae9d..d2ce179f11 100644
--- a/apps/heureka/src/routes/services/$service.tsx
+++ b/apps/heureka/src/routes/services/$service.tsx
@@ -6,8 +6,8 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { Service } from "../../components/Service"
 import { fetchService } from "../../api/fetchService"
-import { NetworkStatus } from "@apollo/client"
-import { GetServicesQueryResult } from "../../generated/graphql"
+import { NetworkStatus, ObservableQuery } from "@apollo/client"
+import { GetServicesQuery } from "../../generated/graphql"
 
 export const Route = createFileRoute("/services/$service")({
   shouldReload: false,
@@ -20,13 +20,13 @@ export const Route = createFileRoute("/services/$service")({
 
     // Return a no-op promise if on image or version details page to avoid unnecessary fetch
     // ServiceDetails component won't render on these pages, so this promise won't be used
-    const servicePromise: Promise<GetServicesQueryResult> = isOnImageOrVersionDetailsPage
+    const servicePromise: Promise<ObservableQuery.Result<GetServicesQuery>> = isOnImageOrVersionDetailsPage
       ? Promise.resolve({
           data: { Services: { edges: [], totalCount: 0, pageInfo: null } },
           loading: false,
           networkStatus: NetworkStatus.ready,
           partial: false,
-        } as unknown as GetServicesQueryResult)
+        } as unknown as ObservableQuery.Result<GetServicesQuery>)
       : fetchService({
           queryClient,
           apiClient,

From 35ab5a065f06481072d69138571e0086306dda55 Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 13:28:59 +0100
Subject: [PATCH 04/11] chore(heureka): display the seven chars after sha256
 based on github pattern for breadcrumb

---
 .../Service/ImageVersionDetails/index.tsx     | 26 ++-----------------
 .../images/$image/versions/$version.tsx       |  3 ++-
 apps/heureka/src/utils.ts                     | 19 ++++++++++++++
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
index 42d8c0a70d..e7717f1259 100644
--- a/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
@@ -12,6 +12,7 @@ import SectionContentHeading from "../../common/SectionContentHeading"
 import { ImageVersionIssuesList } from "./ImageVersionIssuesList"
 import { ObservableQuery } from "@apollo/client"
 import { GetImageVersionsQuery } from "../../../generated/graphql"
+import { getShortSha256 } from "../../../utils"
 
 type ImageVersionDetailsProps = {
   imageVersionsPromise: Promise<ObservableQuery.Result<GetImageVersionsQuery>>
@@ -46,33 +47,10 @@ export const ImageVersionDetails = ({
     )
   }
 
-  // Format version string: show first 9 chars after "sha", then "...", then last 5 chars
-  const formatVersion = (version: string): string => {
-    if (!version) return version
-
-    // Check if it starts with "sha" (e.g., "sha256:...")
-    const shaMatch = version.match(/^(sha[^:]*:)(.+)$/)
-    if (shaMatch) {
-      const prefix = shaMatch[1] // e.g., "sha256:"
-      const hash = shaMatch[2] // The actual hash part
-
-      if (hash.length <= 14) {
-        // If hash is short enough, return as is
-        return version
-      }
-
-      // Show first 9 chars of hash, then "...", then last 5 chars
-      return `${prefix}${hash.substring(0, 9)}...${hash.substring(hash.length - 5)}`
-    }
-
-    // If it doesn't match the pattern, return as is
-    return version
-  }
-
   return (
     <>
       <SectionContentHeading>
-        Image {imageVersion.repository || imageRepository} - Version {formatVersion(imageVersion.version)}
+        Image {imageVersion.repository || imageRepository} - Version {getShortSha256(imageVersion.version)}
       </SectionContentHeading>
 
       <DataGrid columns={2} gridColumnTemplate="20% auto" className="mb-6">
diff --git a/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx b/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx
index 6fb76ad4a6..6c7c9ea742 100644
--- a/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx
+++ b/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx
@@ -9,6 +9,7 @@ import { ImageVersionDetails } from "../../../../../../components/Service/ImageV
 import { fetchImageVersions } from "../../../../../../api/fetchImageVersions"
 import { Spinner } from "@cloudoperators/juno-ui-components"
 import { ErrorBoundary } from "../../../../../../components/common/ErrorBoundary"
+import { getShortSha256 } from "../../../../../../utils"
 
 export const Route = createFileRoute("/services/$service/images/$image/versions/$version")({
   shouldReload: false,
@@ -30,7 +31,7 @@ export const Route = createFileRoute("/services/$service/images/$image/versions/
     return {
       imageVersionsPromise,
       crumb: {
-        label: version,
+        label: getShortSha256(version),
       },
     }
   },
diff --git a/apps/heureka/src/utils.ts b/apps/heureka/src/utils.ts
index 10ae355c9d..b3ff3c2da4 100644
--- a/apps/heureka/src/utils.ts
+++ b/apps/heureka/src/utils.ts
@@ -94,3 +94,22 @@ export const mapObject = <T, U>(obj: Record<string, T>, iteratee: (value: T, key
   })
   return result
 }
+
+/**
+ * Extracts the first 7 characters after "sha256:" from a version string.
+ * If the version doesn't match the pattern, returns the original version.
+ * @param version - The version string (e.g., "sha256:abc123def456...")
+ * @returns The first 7 characters after "sha256:" or the original version
+ */
+export const getShortSha256 = (version: string): string => {
+  if (!version) return version
+
+  // Check if it starts with "sha256:"
+  const sha256Match = version.match(/^sha256:(.{7})/)
+  if (sha256Match) {
+    return sha256Match[1] // Return the first 7 characters after "sha256:"
+  }
+
+  // If it doesn't match the pattern, return as is
+  return version
+}

From 4bc758ba77b3597dba2e32b1400124bd0d89d500 Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 14:12:05 +0100
Subject: [PATCH 05/11] feat(heureka): adds messages to remediation actions

---
 apps/heureka/package.json                     |   1 +
 apps/heureka/src/App.tsx                      |  33 ++--
 .../ImageDetails/FalsePositiveModal/index.tsx |  32 +++-
 .../IssuesDataRows/IssuesDataRow/index.tsx    |  20 ++-
 .../ImageIssuesList/IssuesDataRows/index.tsx  |  19 ++-
 .../RemediatedIssuesDataRows/index.tsx        |  10 +-
 .../ImageDetails/ImageIssuesList/index.tsx    |  52 ++++++-
 apps/heureka/src/routes/__root.tsx            |   2 +
 apps/heureka/turbo.json                       |  30 +++-
 pnpm-lock.yaml                                | 144 ++----------------
 10 files changed, 178 insertions(+), 165 deletions(-)

diff --git a/apps/heureka/package.json b/apps/heureka/package.json
index 39e48091c6..0e938fb3a9 100644
--- a/apps/heureka/package.json
+++ b/apps/heureka/package.json
@@ -28,6 +28,7 @@
     "clean:cache": "rm -rf .turbo"
   },
   "dependencies": {
+    "@cloudoperators/juno-messages-provider": "workspace:*",
     "@cloudoperators/juno-ui-components": "workspace:*",
     "@cloudoperators/juno-url-state-provider": "workspace:*",
     "@tanstack/react-query": "5.90.12",
diff --git a/apps/heureka/src/App.tsx b/apps/heureka/src/App.tsx
index 674dbff54e..89043e2516 100644
--- a/apps/heureka/src/App.tsx
+++ b/apps/heureka/src/App.tsx
@@ -9,6 +9,7 @@ import { createRouter, RouterProvider, createHashHistory, createBrowserHistory }
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AppShell, AppShellProvider, PageHeader } from "@cloudoperators/juno-ui-components"
 import { encodeV2, decodeV2 } from "@cloudoperators/juno-url-state-provider"
+import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import styles from "./styles.css?inline"
 import { ErrorBoundary } from "./components/common/ErrorBoundary"
 import { getClient } from "./apollo-client"
@@ -87,21 +88,23 @@ const App = (props: AppProps) => {
   return (
     <QueryClientProvider client={queryClient}>
       <ApolloProvider client={apiClient}>
-        <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
-          {/* load styles inside the shadow dom */}
-          <style>{styles.toString()}</style>
-          <StrictMode>
-            <AppShell embedded={props.embedded} pageHeader={<PageHeader applicationName="Heureka" />}>
-              <ErrorBoundary>
-                <StrictMode>
-                  <StoreProvider>
-                    <RouterProvider basepath={props.basePath || "/"} router={router} />
-                  </StoreProvider>
-                </StrictMode>
-              </ErrorBoundary>
-            </AppShell>
-          </StrictMode>
-        </AppShellProvider>
+        <MessagesProvider>
+          <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
+            {/* load styles inside the shadow dom */}
+            <style>{styles.toString()}</style>
+            <StrictMode>
+              <AppShell embedded={props.embedded} pageHeader={<PageHeader applicationName="Heureka" />}>
+                <ErrorBoundary>
+                  <StrictMode>
+                    <StoreProvider>
+                      <RouterProvider basepath={props.basePath || "/"} router={router} />
+                    </StoreProvider>
+                  </StrictMode>
+                </ErrorBoundary>
+              </AppShell>
+            </StrictMode>
+          </AppShellProvider>
+        </MessagesProvider>
       </ApolloProvider>
     </QueryClientProvider>
   )
diff --git a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
index 6ab4ea3a05..3e02b96945 100644
--- a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
@@ -29,8 +29,16 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
 }) => {
   const [description, setDescription] = useState<string>("")
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [descriptionError, setDescriptionError] = useState<string>("")
 
   const handleConfirm = async () => {
+    // Validate description
+    if (!description.trim()) {
+      setDescriptionError("Description is required")
+      return
+    }
+
+    setDescriptionError("")
     setIsSubmitting(true)
     try {
       const input: RemediationInput = {
@@ -38,7 +46,7 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
         vulnerability,
         service,
         image,
-        description: description || undefined,
+        description: description.trim(),
       }
       await onConfirm(input)
       setDescription("")
@@ -52,9 +60,18 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
 
   const handleClose = () => {
     setDescription("")
+    setDescriptionError("")
     onClose()
   }
 
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(e.target.value)
+    // Clear error when user starts typing
+    if (descriptionError) {
+      setDescriptionError("")
+    }
+  }
+
   return (
     <Modal
       title="Mark as False Positive"
@@ -64,7 +81,12 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
         <ModalFooter>
           <Stack direction="horizontal" gap="2" distribution="end" className="w-full">
             <Button onClick={handleClose} label={CANCEL_LABEL} disabled={isSubmitting} />
-            <Button onClick={handleConfirm} label={CONFIRM_LABEL} variant="primary" disabled={isSubmitting} />
+            <Button
+              onClick={handleConfirm}
+              label={CONFIRM_LABEL}
+              variant="primary"
+              disabled={isSubmitting || !description.trim()}
+            />
           </Stack>
         </ModalFooter>
       }
@@ -81,11 +103,13 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
         </div>
         <div>
           <Textarea
-            label="Description (optional)"
+            label="Description *"
             placeholder="Add a description explaining why this is a false positive..."
             value={description}
-            onChange={(e) => setDescription(e.target.value)}
+            onChange={handleDescriptionChange}
             rows={4}
+            required
+            error={descriptionError || undefined}
           />
         </div>
       </Stack>
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
index 692122b581..c185a81a21 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
@@ -38,13 +38,22 @@ type IssuesDataRowProps = {
   service: string
   image: string
   showFalsePositiveAction?: boolean
+  onFalsePositiveSuccess?: () => void
+  onFalsePositiveError?: (error: Error) => void
 }
 
-export const IssuesDataRow = ({ issue, service, image, showFalsePositiveAction = true }: IssuesDataRowProps) => {
+export const IssuesDataRow = ({
+  issue,
+  service,
+  image,
+  showFalsePositiveAction = true,
+  onFalsePositiveSuccess,
+  onFalsePositiveError,
+}: IssuesDataRowProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const { needsExpansion, textRef } = useTextOverflow(issue.description)
-  const { apiClient } = useRouteContext({ from: "/services/$service" })
+  const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
 
   const toggleDescription = (e: React.MouseEvent) => {
     e.preventDefault()
@@ -59,10 +68,13 @@ export const IssuesDataRow = ({ issue, service, image, showFalsePositiveAction =
     try {
       await createRemediation({ apiClient, input })
       setIsModalOpen(false)
-      // Optionally show a success message or refresh data
+      // Invalidate queries to refresh the data
+      queryClient.invalidateQueries({ queryKey: ["images"] })
+      queryClient.invalidateQueries({ queryKey: ["remediations"] })
+      onFalsePositiveSuccess?.()
     } catch (error) {
       console.error("Failed to create remediation:", error)
-      // Optionally show an error message
+      onFalsePositiveError?.(error instanceof Error ? error : new Error("Failed to create remediation"))
     }
   }
 
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
index 4913b38174..e42b45762c 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
@@ -14,9 +14,17 @@ type IssuesDataRowsProps = {
   issuesPromise: Promise<ObservableQuery.Result<GetImagesQuery>>
   service: string
   image: string
+  onFalsePositiveSuccess: () => void
+  onFalsePositiveError: (error: Error) => void
 }
 
-export const IssuesDataRows = ({ issuesPromise, service, image }: IssuesDataRowsProps) => {
+export const IssuesDataRows = ({
+  issuesPromise,
+  service,
+  image,
+  onFalsePositiveSuccess,
+  onFalsePositiveError,
+}: IssuesDataRowsProps) => {
   const { error, data } = use(issuesPromise)
   const { vulnerabilities } = getNormalizedImageVulnerabilitiesResponse(data as GetImagesQuery | undefined)
 
@@ -29,6 +37,13 @@ export const IssuesDataRows = ({ issuesPromise, service, image }: IssuesDataRows
   }
 
   return vulnerabilities.map((vulnerability) => (
-    <IssuesDataRow key={vulnerability.id || vulnerability.name} issue={vulnerability} service={service} image={image} />
+    <IssuesDataRow
+      key={vulnerability.id || vulnerability.name}
+      issue={vulnerability}
+      service={service}
+      image={image}
+      onFalsePositiveSuccess={onFalsePositiveSuccess}
+      onFalsePositiveError={onFalsePositiveError}
+    />
   ))
 }
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
index e765e25c0e..8c349a7572 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
@@ -14,9 +14,15 @@ import { deleteRemediation } from "../../../../../api/deleteRemediation"
 
 type RemediatedIssuesDataRowsProps = {
   remediationsPromise: Promise<ObservableQuery.Result<GetRemediationsQuery>>
+  onRevertSuccess: () => void
+  onRevertError: (error: Error) => void
 }
 
-export const RemediatedIssuesDataRows = ({ remediationsPromise }: RemediatedIssuesDataRowsProps) => {
+export const RemediatedIssuesDataRows = ({
+  remediationsPromise,
+  onRevertSuccess,
+  onRevertError,
+}: RemediatedIssuesDataRowsProps) => {
   const { error, data } = use(remediationsPromise)
   const { remediatedVulnerabilities } = getNormalizedRemediationsResponse(data as GetRemediationsQuery | undefined)
   const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
@@ -27,8 +33,10 @@ export const RemediatedIssuesDataRows = ({ remediationsPromise }: RemediatedIssu
       // Invalidate queries to refresh the data
       queryClient.invalidateQueries({ queryKey: ["remediations"] })
       queryClient.invalidateQueries({ queryKey: ["images"] })
+      onRevertSuccess()
     } catch (error) {
       console.error("Failed to delete remediation:", error)
+      onRevertError(error instanceof Error ? error : new Error("Failed to revert false positive"))
       throw error
     }
   }
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
index 6508c19b52..ea85950dc0 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Suspense, useState } from "react"
+import React, { Suspense, useState, useCallback } from "react"
 import { useRouteContext } from "@tanstack/react-router"
 import {
   DataGrid,
@@ -17,6 +17,7 @@ import {
   Tab,
   TabPanel,
 } from "@cloudoperators/juno-ui-components"
+import { useActions } from "@cloudoperators/juno-messages-provider"
 import { getNormalizedImageVulnerabilitiesResponse, ServiceImage } from "../../../Services/utils"
 import { fetchImages } from "../../../../api/fetchImages"
 import { fetchRemediations } from "../../../../api/fetchRemediations"
@@ -34,6 +35,7 @@ type ImageIssuesListProps = {
 
 export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
   const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
+  const { addMessage } = useActions()
   const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined)
   const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
   const [selectedTabIndex, setSelectedTabIndex] = useState(0)
@@ -61,6 +63,40 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
     },
   })
 
+  const handleFalsePositiveSuccess = useCallback(() => {
+    addMessage({
+      variant: "success",
+      text: "Vulnerability marked as false positive successfully.",
+    })
+  }, [addMessage])
+
+  const handleFalsePositiveError = useCallback(
+    (error: Error) => {
+      addMessage({
+        variant: "error",
+        text: `Failed to mark as false positive: ${error.message}`,
+      })
+    },
+    [addMessage]
+  )
+
+  const handleRevertSuccess = useCallback(() => {
+    addMessage({
+      variant: "success",
+      text: "False positive reverted successfully.",
+    })
+  }, [addMessage])
+
+  const handleRevertError = useCallback(
+    (error: Error) => {
+      addMessage({
+        variant: "error",
+        text: `Failed to revert false positive: ${error.message}`,
+      })
+    },
+    [addMessage]
+  )
+
   return (
     <>
       <Tabs selectedIndex={selectedTabIndex} onSelect={setSelectedTabIndex} variant="content">
@@ -97,7 +133,13 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
                 resetKeys={[issuesPromise]}
               >
                 <Suspense fallback={<LoadingDataRow colSpan={5} />}>
-                  <IssuesDataRows issuesPromise={issuesPromise} service={service} image={image.repository} />
+                  <IssuesDataRows
+                    issuesPromise={issuesPromise}
+                    service={service}
+                    image={image.repository}
+                    onFalsePositiveSuccess={handleFalsePositiveSuccess}
+                    onFalsePositiveError={handleFalsePositiveError}
+                  />
                 </Suspense>
               </ErrorBoundary>
             )}
@@ -133,7 +175,11 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
                 resetKeys={[remediationsPromise]}
               >
                 <Suspense fallback={<LoadingDataRow colSpan={4} />}>
-                  <RemediatedIssuesDataRows remediationsPromise={remediationsPromise} />
+                  <RemediatedIssuesDataRows
+                    remediationsPromise={remediationsPromise}
+                    onRevertSuccess={handleRevertSuccess}
+                    onRevertError={handleRevertError}
+                  />
                 </Suspense>
               </ErrorBoundary>
             )}
diff --git a/apps/heureka/src/routes/__root.tsx b/apps/heureka/src/routes/__root.tsx
index 4d5b54c152..9cf4b0cf56 100644
--- a/apps/heureka/src/routes/__root.tsx
+++ b/apps/heureka/src/routes/__root.tsx
@@ -6,6 +6,7 @@
 import React from "react"
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router"
 import { Container } from "@cloudoperators/juno-ui-components/index"
+import { Messages } from "@cloudoperators/juno-messages-provider"
 import { Breadcrumb } from "../components/common/Breadcrumb"
 import { Navigation } from "../components/common/Navigation"
 import { RouteContext } from "./-types"
@@ -22,6 +23,7 @@ function Root({ error }: { error?: Error }) {
       <Navigation />
       <Container py px>
         <Breadcrumb />
+        <Messages className="mb-4" />
         {error ? <ErrorMessage error={error} /> : <Outlet />}
       </Container>
     </>
diff --git a/apps/heureka/turbo.json b/apps/heureka/turbo.json
index ad49bf44e1..980a977a41 100644
--- a/apps/heureka/turbo.json
+++ b/apps/heureka/turbo.json
@@ -2,19 +2,39 @@
   "extends": ["//"],
   "tasks": {
     "dev": {
-      "dependsOn": ["@cloudoperators/juno-ui-components#build", "@cloudoperators/juno-url-state-provider#build"]
+      "dependsOn": [
+        "@cloudoperators/juno-ui-components#build",
+        "@cloudoperators/juno-messages-provider#build",
+        "@cloudoperators/juno-url-state-provider#build"
+      ]
     },
     "test": {
-      "dependsOn": ["@cloudoperators/juno-ui-components#build", "@cloudoperators/juno-url-state-provider#build"]
+      "dependsOn": [
+        "@cloudoperators/juno-ui-components#build",
+        "@cloudoperators/juno-messages-provider#build",
+        "@cloudoperators/juno-url-state-provider#build"
+      ]
     },
     "build": {
-      "dependsOn": ["@cloudoperators/juno-ui-components#build", "@cloudoperators/juno-url-state-provider#build"]
+      "dependsOn": [
+        "@cloudoperators/juno-ui-components#build",
+        "@cloudoperators/juno-messages-provider#build",
+        "@cloudoperators/juno-url-state-provider#build"
+      ]
     },
     "typecheck": {
-      "dependsOn": ["@cloudoperators/juno-ui-components#build", "@cloudoperators/juno-url-state-provider#build"]
+      "dependsOn": [
+        "@cloudoperators/juno-ui-components#build",
+        "@cloudoperators/juno-messages-provider#build",
+        "@cloudoperators/juno-url-state-provider#build"
+      ]
     },
     "build:static": {
-      "dependsOn": ["@cloudoperators/juno-ui-components#build", "@cloudoperators/juno-url-state-provider#build"]
+      "dependsOn": [
+        "@cloudoperators/juno-ui-components#build",
+        "@cloudoperators/juno-messages-provider#build",
+        "@cloudoperators/juno-url-state-provider#build"
+      ]
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2aa25e3f9f..445943fc74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -400,6 +400,9 @@ importers:
 
   apps/heureka:
     dependencies:
+      '@cloudoperators/juno-messages-provider':
+        specifier: workspace:*
+        version: link:../../packages/messages-provider
       '@cloudoperators/juno-ui-components':
         specifier: workspace:*
         version: link:../../packages/ui-components
@@ -742,7 +745,7 @@ importers:
         version: 9.1.2(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-prettier:
         specifier: 5.5.4
-        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@9.1.2(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.6.2)
+        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@9.1.2(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.7.4)
       eslint-plugin-react:
         specifier: 7.37.5
         version: 7.37.5(eslint@9.39.2(jiti@2.6.1))
@@ -766,10 +769,10 @@ importers:
         version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
       vite-plugin-dts:
         specifier: 4.5.4
-        version: 4.5.4(@types/node@24.10.4)(rollup@4.50.1)(typescript@5.9.2)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))
+        version: 4.5.4(@types/node@24.10.4)(rollup@4.50.1)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))
       vitest:
         specifier: 3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.4)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.2))(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.4)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
 
   packages/messages-provider:
     dependencies:
@@ -915,7 +918,7 @@ importers:
         version: 4.7.0(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))
       eslint-plugin-storybook:
         specifier: 9.1.16
-        version: 9.1.16(eslint@9.35.0(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.7.4)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)))(typescript@5.9.3)
+        version: 9.1.16(eslint@9.39.2(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.7.4)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)))(typescript@5.9.3)
       flatpickr:
         specifier: 4.6.13
         version: 4.6.13
@@ -10887,13 +10890,13 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.46.2(eslint@9.35.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.46.2(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 8.46.2
       '@typescript-eslint/types': 8.46.2
       '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      eslint: 9.35.0(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -10954,15 +10957,6 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.2))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))':
-    dependencies:
-      '@vitest/spy': 3.2.4
-      estree-walker: 3.0.3
-      magic-string: 0.30.19
-    optionalDependencies:
-      msw: 2.12.4(@types/node@24.10.4)(typescript@5.9.2)
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
-
   '@vitest/mocker@3.2.4(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.2.4
@@ -11039,19 +11033,6 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
-  '@vue/language-core@2.2.0(typescript@5.9.2)':
-    dependencies:
-      '@volar/language-core': 2.4.14
-      '@vue/compiler-dom': 3.5.14
-      '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.14
-      alien-signals: 0.4.14
-      minimatch: 9.0.5
-      muggle-string: 0.4.1
-      path-browserify: 1.0.1
-    optionalDependencies:
-      typescript: 5.9.2
-
   '@vue/language-core@2.2.0(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.14
@@ -12123,16 +12104,6 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@9.1.2(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.6.2):
-    dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
-      prettier: 3.6.2
-      prettier-linter-helpers: 1.0.0
-      synckit: 0.11.8
-    optionalDependencies:
-      '@types/eslint': 9.6.1
-      eslint-config-prettier: 9.1.2(eslint@9.39.2(jiti@2.6.1))
-
   eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@9.1.2(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.7.4):
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
@@ -12169,10 +12140,10 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@9.1.16(eslint@9.35.0(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.7.4)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)))(typescript@5.9.3):
+  eslint-plugin-storybook@9.1.16(eslint@9.39.2(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.7.4)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.46.2(eslint@9.35.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.35.0(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.46.2(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 9.1.17(@testing-library/dom@10.4.0)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.7.4)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))
     transitivePeerDependencies:
       - supports-color
@@ -13698,32 +13669,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msw@2.12.4(@types/node@24.10.4)(typescript@5.9.2):
-    dependencies:
-      '@inquirer/confirm': 5.1.10(@types/node@24.10.4)
-      '@mswjs/interceptors': 0.40.0
-      '@open-draft/deferred-promise': 2.2.0
-      '@types/statuses': 2.0.6
-      cookie: 1.0.2
-      graphql: 16.12.0
-      headers-polyfill: 4.0.3
-      is-node-process: 1.2.0
-      outvariant: 1.4.3
-      path-to-regexp: 6.3.0
-      picocolors: 1.1.1
-      rettime: 0.7.0
-      statuses: 2.0.2
-      strict-event-emitter: 0.5.1
-      tough-cookie: 6.0.0
-      type-fest: 5.3.0
-      until-async: 3.0.2
-      yargs: 17.7.2
-    optionalDependencies:
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - '@types/node'
-    optional: true
-
   msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3):
     dependencies:
       '@inquirer/confirm': 5.1.10(@types/node@24.10.4)
@@ -15159,25 +15104,6 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-dts@4.5.4(@types/node@24.10.4)(rollup@4.50.1)(typescript@5.9.2)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)):
-    dependencies:
-      '@microsoft/api-extractor': 7.52.8(@types/node@24.10.4)
-      '@rollup/pluginutils': 5.3.0(rollup@4.50.1)
-      '@volar/typescript': 2.4.14
-      '@vue/language-core': 2.2.0(typescript@5.9.2)
-      compare-versions: 6.1.1
-      debug: 4.4.1
-      kolorist: 1.8.0
-      local-pkg: 1.1.1
-      magic-string: 0.30.19
-      typescript: 5.9.2
-    optionalDependencies:
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - rollup
-      - supports-color
-
   vite-plugin-dts@4.5.4(@types/node@24.10.4)(rollup@4.50.1)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)):
     dependencies:
       '@microsoft/api-extractor': 7.52.8(@types/node@24.10.4)
@@ -15245,50 +15171,6 @@ snapshots:
       tsx: 4.19.4
       yaml: 2.8.0
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.4)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.2))(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0):
-    dependencies:
-      '@types/chai': 5.2.2
-      '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.2))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0))
-      '@vitest/pretty-format': 3.2.4
-      '@vitest/runner': 3.2.4
-      '@vitest/snapshot': 3.2.4
-      '@vitest/spy': 3.2.4
-      '@vitest/utils': 3.2.4
-      chai: 5.2.0
-      debug: 4.4.1
-      expect-type: 1.2.1
-      magic-string: 0.30.19
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      std-env: 3.9.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.2
-      tinyglobby: 0.2.15
-      tinypool: 1.1.1
-      tinyrainbow: 2.0.0
-      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
-      vite-node: 3.2.4(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/debug': 4.1.12
-      '@types/node': 24.10.4
-      '@vitest/ui': 3.2.4(vitest@3.2.4)
-      jsdom: 26.1.0
-    transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
   vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.4)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))(sass@1.81.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.0):
     dependencies:
       '@types/chai': 5.2.2

From d48b23758bdc6fab37c7f284485be5f198edd80e Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 14:25:16 +0100
Subject: [PATCH 06/11] chore(heureka): fix typescheck

---
 .../Service/ImageDetails/FalsePositiveModal/index.tsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
index 3e02b96945..941935a1b1 100644
--- a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
@@ -109,7 +109,8 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
             onChange={handleDescriptionChange}
             rows={4}
             required
-            error={descriptionError || undefined}
+            invalid={!!descriptionError}
+            errortext={descriptionError || ""}
           />
         </div>
       </Stack>

From 0242166ac30b00ea94147bc8ab47e0c9992f484c Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 15:02:08 +0100
Subject: [PATCH 07/11] chore(heureka): resolve conflicts

---
 .../47bdfeb4-171667e7834cccb09550425293473b93 | 250 ++++++++++++++++++
 .../8f01cd30-171667e7834cccb09550425293473b93 | 215 +++++++++++++++
 .../b9535391-8e78c6a2aa5abf50cb613cac7a8439e5 |   9 +
 .../fc788b62-171667e7834cccb09550425293473b93 | 250 ++++++++++++++++++
 pnpm-lock.yaml                                |   3 +
 5 files changed, 727 insertions(+)
 create mode 100644 apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93
 create mode 100644 apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93
 create mode 100644 apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5
 create mode 100644 apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93

diff --git a/apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93 b/apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93
new file mode 100644
index 0000000000..2ff0e24d50
--- /dev/null
+++ b/apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93
@@ -0,0 +1,250 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as VulnerabilitiesRouteRouteImport } from './routes/vulnerabilities/route'
+import { Route as ServicesRouteRouteImport } from './routes/services/route'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
+import { Route as ServicesIndexRouteImport } from './routes/services/index'
+import { Route as ServicesServiceRouteImport } from './routes/services/$service'
+import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
+import { Route as ServicesServiceImagesImageVersionsVersionRouteImport } from './routes/services/$service/images/$image/versions/$version'
+
+const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
+  id: '/vulnerabilities',
+  path: '/vulnerabilities',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ServicesRouteRoute = ServicesRouteRouteImport.update({
+  id: '/services',
+  path: '/services',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const VulnerabilitiesIndexRoute = VulnerabilitiesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => VulnerabilitiesRouteRoute,
+} as any)
+const ServicesIndexRoute = ServicesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ServicesRouteRoute,
+} as any)
+const ServicesServiceRoute = ServicesServiceRouteImport.update({
+  id: '/$service',
+  path: '/$service',
+  getParentRoute: () => ServicesRouteRoute,
+} as any)
+const ServicesServiceImagesImageRoute =
+  ServicesServiceImagesImageRouteImport.update({
+    id: '/images/$image',
+    path: '/images/$image',
+    getParentRoute: () => ServicesServiceRoute,
+  } as any)
+const ServicesServiceImagesImageVersionsVersionRoute =
+  ServicesServiceImagesImageVersionsVersionRouteImport.update({
+    id: '/versions/$version',
+    path: '/versions/$version',
+    getParentRoute: () => ServicesServiceImagesImageRoute,
+  } as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/services': typeof ServicesRouteRouteWithChildren
+  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services/': typeof ServicesIndexRoute
+  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services': typeof ServicesIndexRoute
+  '/vulnerabilities': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/services': typeof ServicesRouteRouteWithChildren
+  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services/': typeof ServicesIndexRoute
+  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service'
+    | '/services/'
+    | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/services/$service'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
+  id:
+    | '__root__'
+    | '/'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service'
+    | '/services/'
+    | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ServicesRouteRoute: typeof ServicesRouteRouteWithChildren
+  VulnerabilitiesRouteRoute: typeof VulnerabilitiesRouteRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/vulnerabilities': {
+      id: '/vulnerabilities'
+      path: '/vulnerabilities'
+      fullPath: '/vulnerabilities'
+      preLoaderRoute: typeof VulnerabilitiesRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/services': {
+      id: '/services'
+      path: '/services'
+      fullPath: '/services'
+      preLoaderRoute: typeof ServicesRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/vulnerabilities/': {
+      id: '/vulnerabilities/'
+      path: '/'
+      fullPath: '/vulnerabilities/'
+      preLoaderRoute: typeof VulnerabilitiesIndexRouteImport
+      parentRoute: typeof VulnerabilitiesRouteRoute
+    }
+    '/services/': {
+      id: '/services/'
+      path: '/'
+      fullPath: '/services/'
+      preLoaderRoute: typeof ServicesIndexRouteImport
+      parentRoute: typeof ServicesRouteRoute
+    }
+    '/services/$service': {
+      id: '/services/$service'
+      path: '/$service'
+      fullPath: '/services/$service'
+      preLoaderRoute: typeof ServicesServiceRouteImport
+      parentRoute: typeof ServicesRouteRoute
+    }
+    '/services/$service/images/$image': {
+      id: '/services/$service/images/$image'
+      path: '/images/$image'
+      fullPath: '/services/$service/images/$image'
+      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
+      parentRoute: typeof ServicesServiceRoute
+    }
+    '/services/$service/images/$image/versions/$version': {
+      id: '/services/$service/images/$image/versions/$version'
+      path: '/versions/$version'
+      fullPath: '/services/$service/images/$image/versions/$version'
+      preLoaderRoute: typeof ServicesServiceImagesImageVersionsVersionRouteImport
+      parentRoute: typeof ServicesServiceImagesImageRoute
+    }
+  }
+}
+
+interface ServicesServiceImagesImageRouteChildren {
+  ServicesServiceImagesImageVersionsVersionRoute: typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+
+const ServicesServiceImagesImageRouteChildren: ServicesServiceImagesImageRouteChildren =
+  {
+    ServicesServiceImagesImageVersionsVersionRoute:
+      ServicesServiceImagesImageVersionsVersionRoute,
+  }
+
+const ServicesServiceImagesImageRouteWithChildren =
+  ServicesServiceImagesImageRoute._addFileChildren(
+    ServicesServiceImagesImageRouteChildren,
+  )
+
+interface ServicesServiceRouteChildren {
+  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRouteWithChildren
+}
+
+const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
+  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRouteWithChildren,
+}
+
+const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
+  ServicesServiceRouteChildren,
+)
+
+interface ServicesRouteRouteChildren {
+  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
+  ServicesIndexRoute: typeof ServicesIndexRoute
+}
+
+const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
+  ServicesServiceRoute: ServicesServiceRouteWithChildren,
+  ServicesIndexRoute: ServicesIndexRoute,
+}
+
+const ServicesRouteRouteWithChildren = ServicesRouteRoute._addFileChildren(
+  ServicesRouteRouteChildren,
+)
+
+interface VulnerabilitiesRouteRouteChildren {
+  VulnerabilitiesIndexRoute: typeof VulnerabilitiesIndexRoute
+}
+
+const VulnerabilitiesRouteRouteChildren: VulnerabilitiesRouteRouteChildren = {
+  VulnerabilitiesIndexRoute: VulnerabilitiesIndexRoute,
+}
+
+const VulnerabilitiesRouteRouteWithChildren =
+  VulnerabilitiesRouteRoute._addFileChildren(VulnerabilitiesRouteRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ServicesRouteRoute: ServicesRouteRouteWithChildren,
+  VulnerabilitiesRouteRoute: VulnerabilitiesRouteRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
diff --git a/apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93 b/apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93
new file mode 100644
index 0000000000..af6de7f0ac
--- /dev/null
+++ b/apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93
@@ -0,0 +1,215 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as VulnerabilitiesRouteRouteImport } from './routes/vulnerabilities/route'
+import { Route as ServicesRouteRouteImport } from './routes/services/route'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
+import { Route as ServicesIndexRouteImport } from './routes/services/index'
+import { Route as ServicesServiceRouteImport } from './routes/services/$service'
+import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
+
+const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
+  id: '/vulnerabilities',
+  path: '/vulnerabilities',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ServicesRouteRoute = ServicesRouteRouteImport.update({
+  id: '/services',
+  path: '/services',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const VulnerabilitiesIndexRoute = VulnerabilitiesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => VulnerabilitiesRouteRoute,
+} as any)
+const ServicesIndexRoute = ServicesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ServicesRouteRoute,
+} as any)
+const ServicesServiceRoute = ServicesServiceRouteImport.update({
+  id: '/$service',
+  path: '/$service',
+  getParentRoute: () => ServicesRouteRoute,
+} as any)
+const ServicesServiceImagesImageRoute =
+  ServicesServiceImagesImageRouteImport.update({
+    id: '/images/$image',
+    path: '/images/$image',
+    getParentRoute: () => ServicesServiceRoute,
+  } as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/services': typeof ServicesRouteRouteWithChildren
+  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services/': typeof ServicesIndexRoute
+  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services': typeof ServicesIndexRoute
+  '/vulnerabilities': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/services': typeof ServicesRouteRouteWithChildren
+  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services/': typeof ServicesIndexRoute
+  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service'
+    | '/services/'
+    | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/services/$service'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service/images/$image'
+  id:
+    | '__root__'
+    | '/'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service'
+    | '/services/'
+    | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ServicesRouteRoute: typeof ServicesRouteRouteWithChildren
+  VulnerabilitiesRouteRoute: typeof VulnerabilitiesRouteRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/vulnerabilities': {
+      id: '/vulnerabilities'
+      path: '/vulnerabilities'
+      fullPath: '/vulnerabilities'
+      preLoaderRoute: typeof VulnerabilitiesRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/services': {
+      id: '/services'
+      path: '/services'
+      fullPath: '/services'
+      preLoaderRoute: typeof ServicesRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/vulnerabilities/': {
+      id: '/vulnerabilities/'
+      path: '/'
+      fullPath: '/vulnerabilities/'
+      preLoaderRoute: typeof VulnerabilitiesIndexRouteImport
+      parentRoute: typeof VulnerabilitiesRouteRoute
+    }
+    '/services/': {
+      id: '/services/'
+      path: '/'
+      fullPath: '/services/'
+      preLoaderRoute: typeof ServicesIndexRouteImport
+      parentRoute: typeof ServicesRouteRoute
+    }
+    '/services/$service': {
+      id: '/services/$service'
+      path: '/$service'
+      fullPath: '/services/$service'
+      preLoaderRoute: typeof ServicesServiceRouteImport
+      parentRoute: typeof ServicesRouteRoute
+    }
+    '/services/$service/images/$image': {
+      id: '/services/$service/images/$image'
+      path: '/images/$image'
+      fullPath: '/services/$service/images/$image'
+      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
+      parentRoute: typeof ServicesServiceRoute
+    }
+  }
+}
+
+interface ServicesServiceRouteChildren {
+  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRoute
+}
+
+const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
+  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRoute,
+}
+
+const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
+  ServicesServiceRouteChildren,
+)
+
+interface ServicesRouteRouteChildren {
+  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
+  ServicesIndexRoute: typeof ServicesIndexRoute
+}
+
+const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
+  ServicesServiceRoute: ServicesServiceRouteWithChildren,
+  ServicesIndexRoute: ServicesIndexRoute,
+}
+
+const ServicesRouteRouteWithChildren = ServicesRouteRoute._addFileChildren(
+  ServicesRouteRouteChildren,
+)
+
+interface VulnerabilitiesRouteRouteChildren {
+  VulnerabilitiesIndexRoute: typeof VulnerabilitiesIndexRoute
+}
+
+const VulnerabilitiesRouteRouteChildren: VulnerabilitiesRouteRouteChildren = {
+  VulnerabilitiesIndexRoute: VulnerabilitiesIndexRoute,
+}
+
+const VulnerabilitiesRouteRouteWithChildren =
+  VulnerabilitiesRouteRoute._addFileChildren(VulnerabilitiesRouteRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ServicesRouteRoute: ServicesRouteRouteWithChildren,
+  VulnerabilitiesRouteRoute: VulnerabilitiesRouteRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
diff --git a/apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5 b/apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5
new file mode 100644
index 0000000000..ff5ebe0fc8
--- /dev/null
+++ b/apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/services/$service')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/services/$service"!</div>
+}
diff --git a/apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93 b/apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93
new file mode 100644
index 0000000000..2ff0e24d50
--- /dev/null
+++ b/apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93
@@ -0,0 +1,250 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as VulnerabilitiesRouteRouteImport } from './routes/vulnerabilities/route'
+import { Route as ServicesRouteRouteImport } from './routes/services/route'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
+import { Route as ServicesIndexRouteImport } from './routes/services/index'
+import { Route as ServicesServiceRouteImport } from './routes/services/$service'
+import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
+import { Route as ServicesServiceImagesImageVersionsVersionRouteImport } from './routes/services/$service/images/$image/versions/$version'
+
+const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
+  id: '/vulnerabilities',
+  path: '/vulnerabilities',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ServicesRouteRoute = ServicesRouteRouteImport.update({
+  id: '/services',
+  path: '/services',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const VulnerabilitiesIndexRoute = VulnerabilitiesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => VulnerabilitiesRouteRoute,
+} as any)
+const ServicesIndexRoute = ServicesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ServicesRouteRoute,
+} as any)
+const ServicesServiceRoute = ServicesServiceRouteImport.update({
+  id: '/$service',
+  path: '/$service',
+  getParentRoute: () => ServicesRouteRoute,
+} as any)
+const ServicesServiceImagesImageRoute =
+  ServicesServiceImagesImageRouteImport.update({
+    id: '/images/$image',
+    path: '/images/$image',
+    getParentRoute: () => ServicesServiceRoute,
+  } as any)
+const ServicesServiceImagesImageVersionsVersionRoute =
+  ServicesServiceImagesImageVersionsVersionRouteImport.update({
+    id: '/versions/$version',
+    path: '/versions/$version',
+    getParentRoute: () => ServicesServiceImagesImageRoute,
+  } as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/services': typeof ServicesRouteRouteWithChildren
+  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services/': typeof ServicesIndexRoute
+  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services': typeof ServicesIndexRoute
+  '/vulnerabilities': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/services': typeof ServicesRouteRouteWithChildren
+  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
+  '/services/$service': typeof ServicesServiceRouteWithChildren
+  '/services/': typeof ServicesIndexRoute
+  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service'
+    | '/services/'
+    | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/services/$service'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
+  id:
+    | '__root__'
+    | '/'
+    | '/services'
+    | '/vulnerabilities'
+    | '/services/$service'
+    | '/services/'
+    | '/vulnerabilities/'
+    | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ServicesRouteRoute: typeof ServicesRouteRouteWithChildren
+  VulnerabilitiesRouteRoute: typeof VulnerabilitiesRouteRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/vulnerabilities': {
+      id: '/vulnerabilities'
+      path: '/vulnerabilities'
+      fullPath: '/vulnerabilities'
+      preLoaderRoute: typeof VulnerabilitiesRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/services': {
+      id: '/services'
+      path: '/services'
+      fullPath: '/services'
+      preLoaderRoute: typeof ServicesRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/vulnerabilities/': {
+      id: '/vulnerabilities/'
+      path: '/'
+      fullPath: '/vulnerabilities/'
+      preLoaderRoute: typeof VulnerabilitiesIndexRouteImport
+      parentRoute: typeof VulnerabilitiesRouteRoute
+    }
+    '/services/': {
+      id: '/services/'
+      path: '/'
+      fullPath: '/services/'
+      preLoaderRoute: typeof ServicesIndexRouteImport
+      parentRoute: typeof ServicesRouteRoute
+    }
+    '/services/$service': {
+      id: '/services/$service'
+      path: '/$service'
+      fullPath: '/services/$service'
+      preLoaderRoute: typeof ServicesServiceRouteImport
+      parentRoute: typeof ServicesRouteRoute
+    }
+    '/services/$service/images/$image': {
+      id: '/services/$service/images/$image'
+      path: '/images/$image'
+      fullPath: '/services/$service/images/$image'
+      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
+      parentRoute: typeof ServicesServiceRoute
+    }
+    '/services/$service/images/$image/versions/$version': {
+      id: '/services/$service/images/$image/versions/$version'
+      path: '/versions/$version'
+      fullPath: '/services/$service/images/$image/versions/$version'
+      preLoaderRoute: typeof ServicesServiceImagesImageVersionsVersionRouteImport
+      parentRoute: typeof ServicesServiceImagesImageRoute
+    }
+  }
+}
+
+interface ServicesServiceImagesImageRouteChildren {
+  ServicesServiceImagesImageVersionsVersionRoute: typeof ServicesServiceImagesImageVersionsVersionRoute
+}
+
+const ServicesServiceImagesImageRouteChildren: ServicesServiceImagesImageRouteChildren =
+  {
+    ServicesServiceImagesImageVersionsVersionRoute:
+      ServicesServiceImagesImageVersionsVersionRoute,
+  }
+
+const ServicesServiceImagesImageRouteWithChildren =
+  ServicesServiceImagesImageRoute._addFileChildren(
+    ServicesServiceImagesImageRouteChildren,
+  )
+
+interface ServicesServiceRouteChildren {
+  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRouteWithChildren
+}
+
+const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
+  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRouteWithChildren,
+}
+
+const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
+  ServicesServiceRouteChildren,
+)
+
+interface ServicesRouteRouteChildren {
+  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
+  ServicesIndexRoute: typeof ServicesIndexRoute
+}
+
+const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
+  ServicesServiceRoute: ServicesServiceRouteWithChildren,
+  ServicesIndexRoute: ServicesIndexRoute,
+}
+
+const ServicesRouteRouteWithChildren = ServicesRouteRoute._addFileChildren(
+  ServicesRouteRouteChildren,
+)
+
+interface VulnerabilitiesRouteRouteChildren {
+  VulnerabilitiesIndexRoute: typeof VulnerabilitiesIndexRoute
+}
+
+const VulnerabilitiesRouteRouteChildren: VulnerabilitiesRouteRouteChildren = {
+  VulnerabilitiesIndexRoute: VulnerabilitiesIndexRoute,
+}
+
+const VulnerabilitiesRouteRouteWithChildren =
+  VulnerabilitiesRouteRoute._addFileChildren(VulnerabilitiesRouteRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ServicesRouteRoute: ServicesRouteRouteWithChildren,
+  VulnerabilitiesRouteRoute: VulnerabilitiesRouteRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87bd0d4f20..de4d509f39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -409,6 +409,9 @@ importers:
 
   apps/heureka:
     dependencies:
+      '@cloudoperators/juno-messages-provider':
+        specifier: workspace:*
+        version: link:../../packages/messages-provider
       '@cloudoperators/juno-ui-components':
         specifier: workspace:*
         version: link:../../packages/ui-components

From 43b8fb6b87e8c0816a6aff587ed314a8225131a1 Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 15:06:13 +0100
Subject: [PATCH 08/11] chore(heureka): adds changeset

---
 .changeset/dull-taxis-walk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dull-taxis-walk.md

diff --git a/.changeset/dull-taxis-walk.md b/.changeset/dull-taxis-walk.md
new file mode 100644
index 0000000000..3e67fd98ee
--- /dev/null
+++ b/.changeset/dull-taxis-walk.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-heureka": major
+---
+
+adds false positive actions and image version details page

From 17260fdc18002b660e72fd370003c2a72c00ed0b Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 15:11:10 +0100
Subject: [PATCH 09/11] chore: ignore TanStack Router cache directory
 (.tanstack)

---
 .gitignore                                    |   3 +
 apps/heureka/.gitignore                       |   3 +
 .../47bdfeb4-171667e7834cccb09550425293473b93 | 250 ------------------
 .../8f01cd30-171667e7834cccb09550425293473b93 | 215 ---------------
 .../b9535391-8e78c6a2aa5abf50cb613cac7a8439e5 |   9 -
 .../fc788b62-171667e7834cccb09550425293473b93 | 250 ------------------
 6 files changed, 6 insertions(+), 724 deletions(-)
 delete mode 100644 apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93
 delete mode 100644 apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93
 delete mode 100644 apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5
 delete mode 100644 apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93

diff --git a/.gitignore b/.gitignore
index 764c6d53cd..c5ca99efce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,9 @@ vite.config.*.timestamp-*
 # pnpm local package store (if configured locally)
 .pnpm-store/
 
+# TanStack Router cache directory
+.tanstack/
+
 # act artifacts needed for testing workflows
 .secrets
 .env
diff --git a/apps/heureka/.gitignore b/apps/heureka/.gitignore
index 65a986bd60..b24fa6e237 100644
--- a/apps/heureka/.gitignore
+++ b/apps/heureka/.gitignore
@@ -34,3 +34,6 @@ npm-debug.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# TanStack Router cache directory
+.tanstack/
diff --git a/apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93 b/apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93
deleted file mode 100644
index 2ff0e24d50..0000000000
--- a/apps/heureka/.tanstack/tmp/47bdfeb4-171667e7834cccb09550425293473b93
+++ /dev/null
@@ -1,250 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as VulnerabilitiesRouteRouteImport } from './routes/vulnerabilities/route'
-import { Route as ServicesRouteRouteImport } from './routes/services/route'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
-import { Route as ServicesIndexRouteImport } from './routes/services/index'
-import { Route as ServicesServiceRouteImport } from './routes/services/$service'
-import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
-import { Route as ServicesServiceImagesImageVersionsVersionRouteImport } from './routes/services/$service/images/$image/versions/$version'
-
-const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
-  id: '/vulnerabilities',
-  path: '/vulnerabilities',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ServicesRouteRoute = ServicesRouteRouteImport.update({
-  id: '/services',
-  path: '/services',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const VulnerabilitiesIndexRoute = VulnerabilitiesIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => VulnerabilitiesRouteRoute,
-} as any)
-const ServicesIndexRoute = ServicesIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => ServicesRouteRoute,
-} as any)
-const ServicesServiceRoute = ServicesServiceRouteImport.update({
-  id: '/$service',
-  path: '/$service',
-  getParentRoute: () => ServicesRouteRoute,
-} as any)
-const ServicesServiceImagesImageRoute =
-  ServicesServiceImagesImageRouteImport.update({
-    id: '/images/$image',
-    path: '/images/$image',
-    getParentRoute: () => ServicesServiceRoute,
-  } as any)
-const ServicesServiceImagesImageVersionsVersionRoute =
-  ServicesServiceImagesImageVersionsVersionRouteImport.update({
-    id: '/versions/$version',
-    path: '/versions/$version',
-    getParentRoute: () => ServicesServiceImagesImageRoute,
-  } as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/services': typeof ServicesRouteRouteWithChildren
-  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services/': typeof ServicesIndexRoute
-  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
-  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services': typeof ServicesIndexRoute
-  '/vulnerabilities': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
-  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/services': typeof ServicesRouteRouteWithChildren
-  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services/': typeof ServicesIndexRoute
-  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
-  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service'
-    | '/services/'
-    | '/vulnerabilities/'
-    | '/services/$service/images/$image'
-    | '/services/$service/images/$image/versions/$version'
-  fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/services/$service'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service/images/$image'
-    | '/services/$service/images/$image/versions/$version'
-  id:
-    | '__root__'
-    | '/'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service'
-    | '/services/'
-    | '/vulnerabilities/'
-    | '/services/$service/images/$image'
-    | '/services/$service/images/$image/versions/$version'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  ServicesRouteRoute: typeof ServicesRouteRouteWithChildren
-  VulnerabilitiesRouteRoute: typeof VulnerabilitiesRouteRouteWithChildren
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/vulnerabilities': {
-      id: '/vulnerabilities'
-      path: '/vulnerabilities'
-      fullPath: '/vulnerabilities'
-      preLoaderRoute: typeof VulnerabilitiesRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/services': {
-      id: '/services'
-      path: '/services'
-      fullPath: '/services'
-      preLoaderRoute: typeof ServicesRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/vulnerabilities/': {
-      id: '/vulnerabilities/'
-      path: '/'
-      fullPath: '/vulnerabilities/'
-      preLoaderRoute: typeof VulnerabilitiesIndexRouteImport
-      parentRoute: typeof VulnerabilitiesRouteRoute
-    }
-    '/services/': {
-      id: '/services/'
-      path: '/'
-      fullPath: '/services/'
-      preLoaderRoute: typeof ServicesIndexRouteImport
-      parentRoute: typeof ServicesRouteRoute
-    }
-    '/services/$service': {
-      id: '/services/$service'
-      path: '/$service'
-      fullPath: '/services/$service'
-      preLoaderRoute: typeof ServicesServiceRouteImport
-      parentRoute: typeof ServicesRouteRoute
-    }
-    '/services/$service/images/$image': {
-      id: '/services/$service/images/$image'
-      path: '/images/$image'
-      fullPath: '/services/$service/images/$image'
-      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
-      parentRoute: typeof ServicesServiceRoute
-    }
-    '/services/$service/images/$image/versions/$version': {
-      id: '/services/$service/images/$image/versions/$version'
-      path: '/versions/$version'
-      fullPath: '/services/$service/images/$image/versions/$version'
-      preLoaderRoute: typeof ServicesServiceImagesImageVersionsVersionRouteImport
-      parentRoute: typeof ServicesServiceImagesImageRoute
-    }
-  }
-}
-
-interface ServicesServiceImagesImageRouteChildren {
-  ServicesServiceImagesImageVersionsVersionRoute: typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-
-const ServicesServiceImagesImageRouteChildren: ServicesServiceImagesImageRouteChildren =
-  {
-    ServicesServiceImagesImageVersionsVersionRoute:
-      ServicesServiceImagesImageVersionsVersionRoute,
-  }
-
-const ServicesServiceImagesImageRouteWithChildren =
-  ServicesServiceImagesImageRoute._addFileChildren(
-    ServicesServiceImagesImageRouteChildren,
-  )
-
-interface ServicesServiceRouteChildren {
-  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRouteWithChildren
-}
-
-const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
-  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRouteWithChildren,
-}
-
-const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
-  ServicesServiceRouteChildren,
-)
-
-interface ServicesRouteRouteChildren {
-  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
-  ServicesIndexRoute: typeof ServicesIndexRoute
-}
-
-const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
-  ServicesServiceRoute: ServicesServiceRouteWithChildren,
-  ServicesIndexRoute: ServicesIndexRoute,
-}
-
-const ServicesRouteRouteWithChildren = ServicesRouteRoute._addFileChildren(
-  ServicesRouteRouteChildren,
-)
-
-interface VulnerabilitiesRouteRouteChildren {
-  VulnerabilitiesIndexRoute: typeof VulnerabilitiesIndexRoute
-}
-
-const VulnerabilitiesRouteRouteChildren: VulnerabilitiesRouteRouteChildren = {
-  VulnerabilitiesIndexRoute: VulnerabilitiesIndexRoute,
-}
-
-const VulnerabilitiesRouteRouteWithChildren =
-  VulnerabilitiesRouteRoute._addFileChildren(VulnerabilitiesRouteRouteChildren)
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  ServicesRouteRoute: ServicesRouteRouteWithChildren,
-  VulnerabilitiesRouteRoute: VulnerabilitiesRouteRouteWithChildren,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
diff --git a/apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93 b/apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93
deleted file mode 100644
index af6de7f0ac..0000000000
--- a/apps/heureka/.tanstack/tmp/8f01cd30-171667e7834cccb09550425293473b93
+++ /dev/null
@@ -1,215 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as VulnerabilitiesRouteRouteImport } from './routes/vulnerabilities/route'
-import { Route as ServicesRouteRouteImport } from './routes/services/route'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
-import { Route as ServicesIndexRouteImport } from './routes/services/index'
-import { Route as ServicesServiceRouteImport } from './routes/services/$service'
-import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
-
-const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
-  id: '/vulnerabilities',
-  path: '/vulnerabilities',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ServicesRouteRoute = ServicesRouteRouteImport.update({
-  id: '/services',
-  path: '/services',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const VulnerabilitiesIndexRoute = VulnerabilitiesIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => VulnerabilitiesRouteRoute,
-} as any)
-const ServicesIndexRoute = ServicesIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => ServicesRouteRoute,
-} as any)
-const ServicesServiceRoute = ServicesServiceRouteImport.update({
-  id: '/$service',
-  path: '/$service',
-  getParentRoute: () => ServicesRouteRoute,
-} as any)
-const ServicesServiceImagesImageRoute =
-  ServicesServiceImagesImageRouteImport.update({
-    id: '/images/$image',
-    path: '/images/$image',
-    getParentRoute: () => ServicesServiceRoute,
-  } as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/services': typeof ServicesRouteRouteWithChildren
-  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services/': typeof ServicesIndexRoute
-  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services': typeof ServicesIndexRoute
-  '/vulnerabilities': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/services': typeof ServicesRouteRouteWithChildren
-  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services/': typeof ServicesIndexRoute
-  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service'
-    | '/services/'
-    | '/vulnerabilities/'
-    | '/services/$service/images/$image'
-  fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/services/$service'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service/images/$image'
-  id:
-    | '__root__'
-    | '/'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service'
-    | '/services/'
-    | '/vulnerabilities/'
-    | '/services/$service/images/$image'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  ServicesRouteRoute: typeof ServicesRouteRouteWithChildren
-  VulnerabilitiesRouteRoute: typeof VulnerabilitiesRouteRouteWithChildren
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/vulnerabilities': {
-      id: '/vulnerabilities'
-      path: '/vulnerabilities'
-      fullPath: '/vulnerabilities'
-      preLoaderRoute: typeof VulnerabilitiesRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/services': {
-      id: '/services'
-      path: '/services'
-      fullPath: '/services'
-      preLoaderRoute: typeof ServicesRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/vulnerabilities/': {
-      id: '/vulnerabilities/'
-      path: '/'
-      fullPath: '/vulnerabilities/'
-      preLoaderRoute: typeof VulnerabilitiesIndexRouteImport
-      parentRoute: typeof VulnerabilitiesRouteRoute
-    }
-    '/services/': {
-      id: '/services/'
-      path: '/'
-      fullPath: '/services/'
-      preLoaderRoute: typeof ServicesIndexRouteImport
-      parentRoute: typeof ServicesRouteRoute
-    }
-    '/services/$service': {
-      id: '/services/$service'
-      path: '/$service'
-      fullPath: '/services/$service'
-      preLoaderRoute: typeof ServicesServiceRouteImport
-      parentRoute: typeof ServicesRouteRoute
-    }
-    '/services/$service/images/$image': {
-      id: '/services/$service/images/$image'
-      path: '/images/$image'
-      fullPath: '/services/$service/images/$image'
-      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
-      parentRoute: typeof ServicesServiceRoute
-    }
-  }
-}
-
-interface ServicesServiceRouteChildren {
-  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRoute
-}
-
-const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
-  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRoute,
-}
-
-const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
-  ServicesServiceRouteChildren,
-)
-
-interface ServicesRouteRouteChildren {
-  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
-  ServicesIndexRoute: typeof ServicesIndexRoute
-}
-
-const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
-  ServicesServiceRoute: ServicesServiceRouteWithChildren,
-  ServicesIndexRoute: ServicesIndexRoute,
-}
-
-const ServicesRouteRouteWithChildren = ServicesRouteRoute._addFileChildren(
-  ServicesRouteRouteChildren,
-)
-
-interface VulnerabilitiesRouteRouteChildren {
-  VulnerabilitiesIndexRoute: typeof VulnerabilitiesIndexRoute
-}
-
-const VulnerabilitiesRouteRouteChildren: VulnerabilitiesRouteRouteChildren = {
-  VulnerabilitiesIndexRoute: VulnerabilitiesIndexRoute,
-}
-
-const VulnerabilitiesRouteRouteWithChildren =
-  VulnerabilitiesRouteRoute._addFileChildren(VulnerabilitiesRouteRouteChildren)
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  ServicesRouteRoute: ServicesRouteRouteWithChildren,
-  VulnerabilitiesRouteRoute: VulnerabilitiesRouteRouteWithChildren,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
diff --git a/apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5 b/apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5
deleted file mode 100644
index ff5ebe0fc8..0000000000
--- a/apps/heureka/.tanstack/tmp/b9535391-8e78c6a2aa5abf50cb613cac7a8439e5
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/services/$service')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return <div>Hello "/services/$service"!</div>
-}
diff --git a/apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93 b/apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93
deleted file mode 100644
index 2ff0e24d50..0000000000
--- a/apps/heureka/.tanstack/tmp/fc788b62-171667e7834cccb09550425293473b93
+++ /dev/null
@@ -1,250 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as VulnerabilitiesRouteRouteImport } from './routes/vulnerabilities/route'
-import { Route as ServicesRouteRouteImport } from './routes/services/route'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabilities/index'
-import { Route as ServicesIndexRouteImport } from './routes/services/index'
-import { Route as ServicesServiceRouteImport } from './routes/services/$service'
-import { Route as ServicesServiceImagesImageRouteImport } from './routes/services/$service/images/$image'
-import { Route as ServicesServiceImagesImageVersionsVersionRouteImport } from './routes/services/$service/images/$image/versions/$version'
-
-const VulnerabilitiesRouteRoute = VulnerabilitiesRouteRouteImport.update({
-  id: '/vulnerabilities',
-  path: '/vulnerabilities',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ServicesRouteRoute = ServicesRouteRouteImport.update({
-  id: '/services',
-  path: '/services',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const VulnerabilitiesIndexRoute = VulnerabilitiesIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => VulnerabilitiesRouteRoute,
-} as any)
-const ServicesIndexRoute = ServicesIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => ServicesRouteRoute,
-} as any)
-const ServicesServiceRoute = ServicesServiceRouteImport.update({
-  id: '/$service',
-  path: '/$service',
-  getParentRoute: () => ServicesRouteRoute,
-} as any)
-const ServicesServiceImagesImageRoute =
-  ServicesServiceImagesImageRouteImport.update({
-    id: '/images/$image',
-    path: '/images/$image',
-    getParentRoute: () => ServicesServiceRoute,
-  } as any)
-const ServicesServiceImagesImageVersionsVersionRoute =
-  ServicesServiceImagesImageVersionsVersionRouteImport.update({
-    id: '/versions/$version',
-    path: '/versions/$version',
-    getParentRoute: () => ServicesServiceImagesImageRoute,
-  } as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/services': typeof ServicesRouteRouteWithChildren
-  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services/': typeof ServicesIndexRoute
-  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
-  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services': typeof ServicesIndexRoute
-  '/vulnerabilities': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
-  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/services': typeof ServicesRouteRouteWithChildren
-  '/vulnerabilities': typeof VulnerabilitiesRouteRouteWithChildren
-  '/services/$service': typeof ServicesServiceRouteWithChildren
-  '/services/': typeof ServicesIndexRoute
-  '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
-  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service'
-    | '/services/'
-    | '/vulnerabilities/'
-    | '/services/$service/images/$image'
-    | '/services/$service/images/$image/versions/$version'
-  fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/services/$service'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service/images/$image'
-    | '/services/$service/images/$image/versions/$version'
-  id:
-    | '__root__'
-    | '/'
-    | '/services'
-    | '/vulnerabilities'
-    | '/services/$service'
-    | '/services/'
-    | '/vulnerabilities/'
-    | '/services/$service/images/$image'
-    | '/services/$service/images/$image/versions/$version'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  ServicesRouteRoute: typeof ServicesRouteRouteWithChildren
-  VulnerabilitiesRouteRoute: typeof VulnerabilitiesRouteRouteWithChildren
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/vulnerabilities': {
-      id: '/vulnerabilities'
-      path: '/vulnerabilities'
-      fullPath: '/vulnerabilities'
-      preLoaderRoute: typeof VulnerabilitiesRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/services': {
-      id: '/services'
-      path: '/services'
-      fullPath: '/services'
-      preLoaderRoute: typeof ServicesRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/vulnerabilities/': {
-      id: '/vulnerabilities/'
-      path: '/'
-      fullPath: '/vulnerabilities/'
-      preLoaderRoute: typeof VulnerabilitiesIndexRouteImport
-      parentRoute: typeof VulnerabilitiesRouteRoute
-    }
-    '/services/': {
-      id: '/services/'
-      path: '/'
-      fullPath: '/services/'
-      preLoaderRoute: typeof ServicesIndexRouteImport
-      parentRoute: typeof ServicesRouteRoute
-    }
-    '/services/$service': {
-      id: '/services/$service'
-      path: '/$service'
-      fullPath: '/services/$service'
-      preLoaderRoute: typeof ServicesServiceRouteImport
-      parentRoute: typeof ServicesRouteRoute
-    }
-    '/services/$service/images/$image': {
-      id: '/services/$service/images/$image'
-      path: '/images/$image'
-      fullPath: '/services/$service/images/$image'
-      preLoaderRoute: typeof ServicesServiceImagesImageRouteImport
-      parentRoute: typeof ServicesServiceRoute
-    }
-    '/services/$service/images/$image/versions/$version': {
-      id: '/services/$service/images/$image/versions/$version'
-      path: '/versions/$version'
-      fullPath: '/services/$service/images/$image/versions/$version'
-      preLoaderRoute: typeof ServicesServiceImagesImageVersionsVersionRouteImport
-      parentRoute: typeof ServicesServiceImagesImageRoute
-    }
-  }
-}
-
-interface ServicesServiceImagesImageRouteChildren {
-  ServicesServiceImagesImageVersionsVersionRoute: typeof ServicesServiceImagesImageVersionsVersionRoute
-}
-
-const ServicesServiceImagesImageRouteChildren: ServicesServiceImagesImageRouteChildren =
-  {
-    ServicesServiceImagesImageVersionsVersionRoute:
-      ServicesServiceImagesImageVersionsVersionRoute,
-  }
-
-const ServicesServiceImagesImageRouteWithChildren =
-  ServicesServiceImagesImageRoute._addFileChildren(
-    ServicesServiceImagesImageRouteChildren,
-  )
-
-interface ServicesServiceRouteChildren {
-  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRouteWithChildren
-}
-
-const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
-  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRouteWithChildren,
-}
-
-const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
-  ServicesServiceRouteChildren,
-)
-
-interface ServicesRouteRouteChildren {
-  ServicesServiceRoute: typeof ServicesServiceRouteWithChildren
-  ServicesIndexRoute: typeof ServicesIndexRoute
-}
-
-const ServicesRouteRouteChildren: ServicesRouteRouteChildren = {
-  ServicesServiceRoute: ServicesServiceRouteWithChildren,
-  ServicesIndexRoute: ServicesIndexRoute,
-}
-
-const ServicesRouteRouteWithChildren = ServicesRouteRoute._addFileChildren(
-  ServicesRouteRouteChildren,
-)
-
-interface VulnerabilitiesRouteRouteChildren {
-  VulnerabilitiesIndexRoute: typeof VulnerabilitiesIndexRoute
-}
-
-const VulnerabilitiesRouteRouteChildren: VulnerabilitiesRouteRouteChildren = {
-  VulnerabilitiesIndexRoute: VulnerabilitiesIndexRoute,
-}
-
-const VulnerabilitiesRouteRouteWithChildren =
-  VulnerabilitiesRouteRoute._addFileChildren(VulnerabilitiesRouteRouteChildren)
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  ServicesRouteRoute: ServicesRouteRouteWithChildren,
-  VulnerabilitiesRouteRoute: VulnerabilitiesRouteRouteWithChildren,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()

From 6325218cf2936ed75a566bd3745179f09176aab9 Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Tue, 20 Jan 2026 15:15:59 +0100
Subject: [PATCH 10/11] chore(heureka): improves changeset text

---
 .changeset/dull-taxis-walk.md                 |   2 +-
 .../ImageDetails/FalsePositiveModal/index.tsx |   2 +-
 .../IssuesDataRows/IssuesDataRow/index.tsx    |  16 +-
 .../ImageIssuesList/IssuesDataRows/index.tsx  |  26 +-
 .../RemediatedIssuesDataRows/index.tsx        |  16 +-
 .../ImageDetails/ImageIssuesList/index.tsx    | 302 +++++++++++-------
 apps/heureka/src/routes/__root.tsx            |   2 -
 7 files changed, 228 insertions(+), 138 deletions(-)

diff --git a/.changeset/dull-taxis-walk.md b/.changeset/dull-taxis-walk.md
index 3e67fd98ee..389c6c6937 100644
--- a/.changeset/dull-taxis-walk.md
+++ b/.changeset/dull-taxis-walk.md
@@ -2,4 +2,4 @@
 "@cloudoperators/juno-app-heureka": major
 ---
 
-adds false positive actions and image version details page
+Adds false positive remediation action to image details page with create and delete functionality. Introduces image version details page to display deployment locations for each image version.
diff --git a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
index 941935a1b1..f3e4aa5c91 100644
--- a/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
@@ -103,7 +103,7 @@ export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
         </div>
         <div>
           <Textarea
-            label="Description *"
+            label="Description"
             placeholder="Add a description explaining why this is a false positive..."
             value={description}
             onChange={handleDescriptionChange}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
index c185a81a21..275c759fc3 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/IssuesDataRow/index.tsx
@@ -38,8 +38,8 @@ type IssuesDataRowProps = {
   service: string
   image: string
   showFalsePositiveAction?: boolean
-  onFalsePositiveSuccess?: () => void
-  onFalsePositiveError?: (error: Error) => void
+  onFalsePositiveSuccess?: (cveNumber: string) => void
+  onFalsePositiveError?: (error: Error, cveNumber: string) => void
 }
 
 export const IssuesDataRow = ({
@@ -52,9 +52,13 @@ export const IssuesDataRow = ({
 }: IssuesDataRowProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const { needsExpansion, textRef } = useTextOverflow(issue.description)
+  const { needsExpansion, textRef } = useTextOverflow(issue?.description || "")
   const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
 
+  if (!issue || !issue.name) {
+    return null
+  }
+
   const toggleDescription = (e: React.MouseEvent) => {
     e.preventDefault()
     setIsExpanded(!isExpanded)
@@ -71,10 +75,12 @@ export const IssuesDataRow = ({
       // Invalidate queries to refresh the data
       queryClient.invalidateQueries({ queryKey: ["images"] })
       queryClient.invalidateQueries({ queryKey: ["remediations"] })
-      onFalsePositiveSuccess?.()
+      const cveNumber = issue?.name || "unknown"
+      onFalsePositiveSuccess?.(cveNumber)
     } catch (error) {
       console.error("Failed to create remediation:", error)
-      onFalsePositiveError?.(error instanceof Error ? error : new Error("Failed to create remediation"))
+      const cveNumber = issue?.name || "unknown"
+      onFalsePositiveError?.(error instanceof Error ? error : new Error("Failed to create remediation"), cveNumber)
     }
   }
 
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
index e42b45762c..f6445468ab 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
@@ -14,8 +14,8 @@ type IssuesDataRowsProps = {
   issuesPromise: Promise<ObservableQuery.Result<GetImagesQuery>>
   service: string
   image: string
-  onFalsePositiveSuccess: () => void
-  onFalsePositiveError: (error: Error) => void
+  onFalsePositiveSuccess: (cveNumber: string) => void
+  onFalsePositiveError: (error: Error, cveNumber: string) => void
 }
 
 export const IssuesDataRows = ({
@@ -36,14 +36,16 @@ export const IssuesDataRows = ({
     return <EmptyDataGridRow colSpan={5}>No vulnerabilities found! 🚀</EmptyDataGridRow>
   }
 
-  return vulnerabilities.map((vulnerability) => (
-    <IssuesDataRow
-      key={vulnerability.id || vulnerability.name}
-      issue={vulnerability}
-      service={service}
-      image={image}
-      onFalsePositiveSuccess={onFalsePositiveSuccess}
-      onFalsePositiveError={onFalsePositiveError}
-    />
-  ))
+  return vulnerabilities
+    .filter((vulnerability) => vulnerability && vulnerability.name)
+    .map((vulnerability) => (
+      <IssuesDataRow
+        key={vulnerability.id || vulnerability.name}
+        issue={vulnerability}
+        service={service}
+        image={image}
+        onFalsePositiveSuccess={onFalsePositiveSuccess}
+        onFalsePositiveError={onFalsePositiveError}
+      />
+    ))
 }
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
index 8c349a7572..3ad4422966 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
@@ -14,8 +14,8 @@ import { deleteRemediation } from "../../../../../api/deleteRemediation"
 
 type RemediatedIssuesDataRowsProps = {
   remediationsPromise: Promise<ObservableQuery.Result<GetRemediationsQuery>>
-  onRevertSuccess: () => void
-  onRevertError: (error: Error) => void
+  onRevertSuccess: (cveNumber: string) => void
+  onRevertError: (error: Error, cveNumber: string) => void
 }
 
 export const RemediatedIssuesDataRows = ({
@@ -27,16 +27,16 @@ export const RemediatedIssuesDataRows = ({
   const { remediatedVulnerabilities } = getNormalizedRemediationsResponse(data as GetRemediationsQuery | undefined)
   const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
 
-  const handleRevert = async (remediationId: string) => {
+  const handleRevert = async (remediationId: string, cveNumber: string) => {
     try {
       await deleteRemediation({ apiClient, remediationId })
       // Invalidate queries to refresh the data
       queryClient.invalidateQueries({ queryKey: ["remediations"] })
       queryClient.invalidateQueries({ queryKey: ["images"] })
-      onRevertSuccess()
+      onRevertSuccess(cveNumber)
     } catch (error) {
       console.error("Failed to delete remediation:", error)
-      onRevertError(error instanceof Error ? error : new Error("Failed to revert false positive"))
+      onRevertError(error instanceof Error ? error : new Error("Failed to revert false positive"), cveNumber)
       throw error
     }
   }
@@ -52,7 +52,11 @@ export const RemediatedIssuesDataRows = ({
   return (
     <>
       {remediatedVulnerabilities.map((remediation) => (
-        <RemediatedIssueDataRow key={remediation.remediationId} remediation={remediation} onRevert={handleRevert} />
+        <RemediatedIssueDataRow
+          key={remediation.remediationId}
+          remediation={remediation}
+          onRevert={(remediationId) => handleRevert(remediationId, remediation.vulnerability || "N/A")}
+        />
       ))}
     </>
   )
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
index ea85950dc0..aef1702fe5 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
@@ -17,7 +17,7 @@ import {
   Tab,
   TabPanel,
 } from "@cloudoperators/juno-ui-components"
-import { useActions } from "@cloudoperators/juno-messages-provider"
+import { useActions, Messages, MessagesProvider } from "@cloudoperators/juno-messages-provider"
 import { getNormalizedImageVulnerabilitiesResponse, ServiceImage } from "../../../Services/utils"
 import { fetchImages } from "../../../../api/fetchImages"
 import { fetchRemediations } from "../../../../api/fetchRemediations"
@@ -33,9 +33,126 @@ type ImageIssuesListProps = {
   image: ServiceImage
 }
 
+const VulnerabilitiesTabContent = ({
+  service,
+  image,
+  setSearchTerm,
+  setPageCursor,
+  issuesPromise,
+  onFalsePositiveSuccess,
+  onFalsePositiveError,
+}: {
+  service: string
+  image: ServiceImage
+  setSearchTerm: (term: string | undefined) => void
+  setPageCursor: (cursor: string | null | undefined) => void
+  issuesPromise: ReturnType<typeof fetchImages>
+  onFalsePositiveSuccess: (cveNumber: string) => void
+  onFalsePositiveError: (error: Error, cveNumber: string) => void
+}) => {
+  return (
+    <>
+      <Messages className="mb-4 mt-4" />
+      <Stack gap="2" className="mb-4 mt-4">
+        <SearchInput
+          placeholder="Search for CVE number"
+          className="w-96 ml-auto"
+          onSearch={(search) => setSearchTerm(search || "")}
+          onClear={() => {
+            setSearchTerm("")
+          }}
+        />
+      </Stack>
+      <DataGrid columns={5} minContentColumns={[0, 1, 2, 4]} cellVerticalAlignment="top">
+        <DataGridRow>
+          <DataGridHeadCell>
+            <Icon icon="monitorHeart" />
+          </DataGridHeadCell>
+          <DataGridHeadCell>Vulnerability</DataGridHeadCell>
+          <DataGridHeadCell>Target Date</DataGridHeadCell>
+          <DataGridHeadCell>Description</DataGridHeadCell>
+          <DataGridHeadCell>Actions</DataGridHeadCell>
+        </DataGridRow>
+
+        {issuesPromise && (
+          <ErrorBoundary
+            displayErrorMessage
+            fallbackRender={getErrorDataRowComponent({ colspan: 5 })}
+            resetKeys={[issuesPromise]}
+          >
+            <Suspense fallback={<LoadingDataRow colSpan={5} />}>
+              <IssuesDataRows
+                issuesPromise={issuesPromise}
+                service={service}
+                image={image.repository}
+                onFalsePositiveSuccess={onFalsePositiveSuccess}
+                onFalsePositiveError={onFalsePositiveError}
+              />
+            </Suspense>
+          </ErrorBoundary>
+        )}
+      </DataGrid>
+      {issuesPromise && (
+        <ErrorBoundary resetKeys={[issuesPromise]}>
+          <Suspense>
+            <CursorPagination
+              dataPromise={issuesPromise}
+              dataNormalizationMethod={getNormalizedImageVulnerabilitiesResponse}
+              goToPage={setPageCursor}
+            />
+          </Suspense>
+        </ErrorBoundary>
+      )}
+    </>
+  )
+}
+
+const RemediatedVulnerabilitiesTabContent = ({
+  remediationsPromise,
+  onRevertSuccess,
+  onRevertError,
+}: {
+  remediationsPromise: ReturnType<typeof fetchRemediations>
+  onRevertSuccess: (cveNumber: string) => void
+  onRevertError: (error: Error, cveNumber: string) => void
+}) => {
+  return (
+    <>
+      <Messages className="mb-4 mt-4" />
+      <div className="mt-4">
+        <DataGrid columns={4} minContentColumns={[0, 1, 3]} cellVerticalAlignment="top">
+          <DataGridRow>
+            <DataGridHeadCell>
+              <Icon icon="monitorHeart" />
+            </DataGridHeadCell>
+            <DataGridHeadCell>Vulnerability</DataGridHeadCell>
+            <DataGridHeadCell>Description</DataGridHeadCell>
+            <DataGridHeadCell>Actions</DataGridHeadCell>
+          </DataGridRow>
+
+          {remediationsPromise && (
+            <ErrorBoundary
+              displayErrorMessage
+              fallbackRender={getErrorDataRowComponent({ colspan: 4 })}
+              resetKeys={[remediationsPromise]}
+            >
+              <Suspense fallback={<LoadingDataRow colSpan={4} />}>
+                <RemediatedIssuesDataRows
+                  remediationsPromise={remediationsPromise}
+                  onRevertSuccess={onRevertSuccess}
+                  onRevertError={onRevertError}
+                />
+              </Suspense>
+            </ErrorBoundary>
+          )}
+        </DataGrid>
+      </div>
+    </>
+  )
+}
+
 export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
   const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
-  const { addMessage } = useActions()
   const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined)
   const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
   const [selectedTabIndex, setSelectedTabIndex] = useState(0)
@@ -63,39 +180,73 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
     },
   })
 
-  const handleFalsePositiveSuccess = useCallback(() => {
-    addMessage({
-      variant: "success",
-      text: "Vulnerability marked as false positive successfully.",
-    })
-  }, [addMessage])
-
-  const handleFalsePositiveError = useCallback(
-    (error: Error) => {
-      addMessage({
-        variant: "error",
-        text: `Failed to mark as false positive: ${error.message}`,
-      })
-    },
-    [addMessage]
-  )
+  const VulnerabilitiesTab = () => {
+    const { addMessage } = useActions()
 
-  const handleRevertSuccess = useCallback(() => {
-    addMessage({
-      variant: "success",
-      text: "False positive reverted successfully.",
-    })
-  }, [addMessage])
-
-  const handleRevertError = useCallback(
-    (error: Error) => {
-      addMessage({
-        variant: "error",
-        text: `Failed to revert false positive: ${error.message}`,
-      })
-    },
-    [addMessage]
-  )
+    const handleFalsePositiveSuccess = useCallback(
+      (cveNumber: string) => {
+        addMessage({
+          variant: "success",
+          text: `Vulnerability ${cveNumber} marked as false positive successfully.`,
+        })
+      },
+      [addMessage]
+    )
+
+    const handleFalsePositiveError = useCallback(
+      (error: Error, cveNumber: string) => {
+        addMessage({
+          variant: "error",
+          text: `Failed to mark ${cveNumber} as false positive: ${error.message}`,
+        })
+      },
+      [addMessage]
+    )
+
+    return (
+      <VulnerabilitiesTabContent
+        service={service}
+        image={image}
+        setSearchTerm={setSearchTerm}
+        setPageCursor={setPageCursor}
+        issuesPromise={issuesPromise}
+        onFalsePositiveSuccess={handleFalsePositiveSuccess}
+        onFalsePositiveError={handleFalsePositiveError}
+      />
+    )
+  }
+
+  const RemediatedVulnerabilitiesTab = () => {
+    const { addMessage } = useActions()
+
+    const handleRevertSuccess = useCallback(
+      (cveNumber: string) => {
+        addMessage({
+          variant: "success",
+          text: `False positive for ${cveNumber} reverted successfully.`,
+        })
+      },
+      [addMessage]
+    )
+
+    const handleRevertError = useCallback(
+      (error: Error, cveNumber: string) => {
+        addMessage({
+          variant: "error",
+          text: `Failed to revert false positive for ${cveNumber}: ${error.message}`,
+        })
+      },
+      [addMessage]
+    )
+
+    return (
+      <RemediatedVulnerabilitiesTabContent
+        remediationsPromise={remediationsPromise}
+        onRevertSuccess={handleRevertSuccess}
+        onRevertError={handleRevertError}
+      />
+    )
+  }
 
   return (
     <>
@@ -105,85 +256,14 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
           <Tab label="Remediated Vulnerabilities" />
         </TabList>
         <TabPanel>
-          <Stack gap="2" className="mb-4 mt-4">
-            <SearchInput
-              placeholder="Search for CVE number"
-              className="w-96 ml-auto"
-              onSearch={(search) => setSearchTerm(search || "")}
-              onClear={() => {
-                setSearchTerm("")
-              }}
-            />
-          </Stack>
-          <DataGrid columns={5} minContentColumns={[0, 1, 2, 4]} cellVerticalAlignment="top">
-            <DataGridRow>
-              <DataGridHeadCell>
-                <Icon icon="monitorHeart" />
-              </DataGridHeadCell>
-              <DataGridHeadCell>Vulnerability</DataGridHeadCell>
-              <DataGridHeadCell>Target Date</DataGridHeadCell>
-              <DataGridHeadCell>Description</DataGridHeadCell>
-              <DataGridHeadCell>Actions</DataGridHeadCell>
-            </DataGridRow>
-
-            {issuesPromise && (
-              <ErrorBoundary
-                displayErrorMessage
-                fallbackRender={getErrorDataRowComponent({ colspan: 5 })}
-                resetKeys={[issuesPromise]}
-              >
-                <Suspense fallback={<LoadingDataRow colSpan={5} />}>
-                  <IssuesDataRows
-                    issuesPromise={issuesPromise}
-                    service={service}
-                    image={image.repository}
-                    onFalsePositiveSuccess={handleFalsePositiveSuccess}
-                    onFalsePositiveError={handleFalsePositiveError}
-                  />
-                </Suspense>
-              </ErrorBoundary>
-            )}
-          </DataGrid>
-          {issuesPromise && (
-            <ErrorBoundary resetKeys={[issuesPromise]}>
-              <Suspense>
-                <CursorPagination
-                  dataPromise={issuesPromise}
-                  dataNormalizationMethod={getNormalizedImageVulnerabilitiesResponse}
-                  goToPage={setPageCursor}
-                />
-              </Suspense>
-            </ErrorBoundary>
-          )}
+          <MessagesProvider>
+            <VulnerabilitiesTab />
+          </MessagesProvider>
         </TabPanel>
         <TabPanel>
-          <div className="mb-4 mt-4" />
-          <DataGrid columns={4} minContentColumns={[0, 1, 3]} cellVerticalAlignment="top">
-            <DataGridRow>
-              <DataGridHeadCell>
-                <Icon icon="monitorHeart" />
-              </DataGridHeadCell>
-              <DataGridHeadCell>Vulnerability</DataGridHeadCell>
-              <DataGridHeadCell>Description</DataGridHeadCell>
-              <DataGridHeadCell>Actions</DataGridHeadCell>
-            </DataGridRow>
-
-            {remediationsPromise && (
-              <ErrorBoundary
-                displayErrorMessage
-                fallbackRender={getErrorDataRowComponent({ colspan: 4 })}
-                resetKeys={[remediationsPromise]}
-              >
-                <Suspense fallback={<LoadingDataRow colSpan={4} />}>
-                  <RemediatedIssuesDataRows
-                    remediationsPromise={remediationsPromise}
-                    onRevertSuccess={handleRevertSuccess}
-                    onRevertError={handleRevertError}
-                  />
-                </Suspense>
-              </ErrorBoundary>
-            )}
-          </DataGrid>
+          <MessagesProvider>
+            <RemediatedVulnerabilitiesTab />
+          </MessagesProvider>
         </TabPanel>
       </Tabs>
     </>
diff --git a/apps/heureka/src/routes/__root.tsx b/apps/heureka/src/routes/__root.tsx
index 9cf4b0cf56..4d5b54c152 100644
--- a/apps/heureka/src/routes/__root.tsx
+++ b/apps/heureka/src/routes/__root.tsx
@@ -6,7 +6,6 @@
 import React from "react"
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router"
 import { Container } from "@cloudoperators/juno-ui-components/index"
-import { Messages } from "@cloudoperators/juno-messages-provider"
 import { Breadcrumb } from "../components/common/Breadcrumb"
 import { Navigation } from "../components/common/Navigation"
 import { RouteContext } from "./-types"
@@ -23,7 +22,6 @@ function Root({ error }: { error?: Error }) {
       <Navigation />
       <Container py px>
         <Breadcrumb />
-        <Messages className="mb-4" />
         {error ? <ErrorMessage error={error} /> : <Outlet />}
       </Container>
     </>

From eeddd1f72e14efc9dcd312fbffe4996be2ab81e8 Mon Sep 17 00:00:00 2001
From: Hoda Noori <hoda.noori@sap.com>
Date: Wed, 4 Feb 2026 10:25:07 +0100
Subject: [PATCH 11/11] fix(carbon): remove unnecessary type assertion in
 ErrorFallback

---
 apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx b/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx
index fdfb985dc5..156e8ca313 100644
--- a/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx
+++ b/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx
@@ -8,7 +8,7 @@ import { FallbackProps } from "react-error-boundary"
 import { Message } from "@cloudoperators/juno-ui-components"
 
 const ErrorFallback = ({ error }: FallbackProps) => (
-  <Message text={(error as Error)?.message || "An error occurred"} variant="danger" />
+  <Message text={error?.message || "An error occurred"} variant="danger" />
 )
 
 export default ErrorFallback