diff --git a/.changeset/dull-taxis-walk.md b/.changeset/dull-taxis-walk.md
new file mode 100644
index 0000000000..8b3f063bec
--- /dev/null
+++ b/.changeset/dull-taxis-walk.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-heureka": major
+---
+
+Adds false positive remediation on the image details page with create and revert. Introduces image version details page to show deployment locations for each image version.
diff --git a/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx b/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx
index fdfb985dc5..1b5fd55811 100644
--- a/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx
+++ b/apps/carbon/src/components/ErrorBoundary/ErrorFallback.tsx
@@ -7,8 +7,9 @@ import React from "react"
 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" />
-)
+const ErrorFallback = ({ error }: FallbackProps) => {
+  const message = error instanceof Error && error.message ? error.message : "An error occurred"
+  return <Message text={message} variant="danger" />
+}
 
 export default ErrorFallback
diff --git a/apps/heureka/.gitignore b/apps/heureka/.gitignore
index 65a986bd60..bd4e876713 100644
--- a/apps/heureka/.gitignore
+++ b/apps/heureka/.gitignore
@@ -33,4 +33,4 @@ npm-debug.log*
 .env.local
 .env.development.local
 .env.test.local
-.env.production.local
+.env.production.local
\ No newline at end of file
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/createRemediation.tsx b/apps/heureka/src/api/createRemediation.tsx
new file mode 100644
index 0000000000..3de224fcda
--- /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
+  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..b4735c3c94
--- /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
+  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..fbc76ec2f5
--- /dev/null
+++ b/apps/heureka/src/api/fetchImageVersions.tsx
@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsDocument, GetImageVersionsQuery, 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<ObservableQuery.Result<GetImageVersionsQuery>> => {
+  const queryKey = [
+    "imageVersions",
+    filter,
+    after,
+    first,
+    firstVulnerabilities,
+    afterVulnerabilities,
+    firstOccurences,
+    afterOccurences,
+  ]
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetImageVersionsQuery>({
+        query: GetImageVersionsDocument,
+        variables: {
+          filter,
+          first,
+          after,
+          firstVulnerabilities,
+          afterVulnerabilities,
+          firstOccurences,
+          afterOccurences,
+        },
+      }),
+  })
+}
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
new file mode 100644
index 0000000000..234284547a
--- /dev/null
+++ b/apps/heureka/src/api/fetchRemediations.tsx
@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ObservableQuery } from "@apollo/client"
+import { GetRemediationsDocument, GetRemediationsQuery, 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<ObservableQuery.Result<GetRemediationsQuery>> => {
+  const queryKey = ["remediations", filter]
+
+  return queryClient.ensureQueryData({
+    queryKey,
+    queryFn: () =>
+      apiClient.query<GetRemediationsQuery>({
+        query: GetRemediationsDocument,
+        variables: {
+          filter,
+        },
+      }),
+  })
+}
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/FalsePositiveModal/FalsePositiveModal.test.tsx b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/FalsePositiveModal.test.tsx
new file mode 100644
index 0000000000..3d07a00a44
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/FalsePositiveModal.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { PortalProvider } from "@cloudoperators/juno-ui-components"
+import { FalsePositiveModal } from "./index"
+
+const defaultProps = {
+  open: true,
+  onClose: () => {},
+  onConfirm: () => Promise.resolve(),
+  vulnerability: "CVE-2024-1234",
+  service: "my-service",
+  image: "my-image",
+}
+
+const renderModal = (props = {}) => {
+  return render(
+    <PortalProvider>
+      <FalsePositiveModal {...defaultProps} {...props} />
+    </PortalProvider>
+  )
+}
+
+describe("FalsePositiveModal", () => {
+  it("renders with title and vulnerability details when open", () => {
+    renderModal()
+    expect(screen.getByRole("heading", { name: "Mark as False Positive" })).toBeInTheDocument()
+    expect(screen.getByText(/Vulnerability:/)).toBeInTheDocument()
+    expect(screen.getByText("CVE-2024-1234")).toBeInTheDocument()
+    expect(screen.getByText(/Service:/)).toBeInTheDocument()
+    expect(screen.getByText("my-service")).toBeInTheDocument()
+    expect(screen.getByText(/Image:/)).toBeInTheDocument()
+    expect(screen.getByText("my-image")).toBeInTheDocument()
+  })
+
+  it("renders Cancel and Mark as False Positive buttons", () => {
+    renderModal()
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Mark as False Positive" })).toBeInTheDocument()
+  })
+
+  it("calls onClose when Cancel is clicked", async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    renderModal({ onClose })
+    await user.click(screen.getByRole("button", { name: "Cancel" }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})
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..b49a30318c
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/FalsePositiveModal/index.tsx
@@ -0,0 +1,167 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useRef, useEffect } from "react"
+import {
+  Modal,
+  ModalFooter,
+  Button,
+  Stack,
+  Textarea,
+  DateTimePicker,
+  Message,
+} from "@cloudoperators/juno-ui-components"
+import { RemediationInput, RemediationTypeValues, SeverityValues } from "../../../../generated/graphql"
+
+type FalsePositiveModalProps = {
+  open: boolean
+  onClose: () => void
+  onConfirm: (input: RemediationInput) => Promise<void>
+  vulnerability: string
+  severity?: string
+  service: string
+  image: string
+  /** Error message to show when createRemediation fails. Shown above the form content. */
+  errorMessage?: string | null
+}
+
+const CONFIRM_LABEL = "Mark as False Positive"
+const CANCEL_LABEL = "Cancel"
+
+const toSeverityValue = (severity: string): SeverityValues | undefined => {
+  if (!severity) return undefined
+  const normalized = severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase()
+  const value = normalized as SeverityValues
+  return Object.values(SeverityValues).includes(value) ? value : undefined
+}
+
+export const FalsePositiveModal: React.FC<FalsePositiveModalProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  vulnerability,
+  severity,
+  service,
+  image,
+  errorMessage,
+}) => {
+  const [description, setDescription] = useState<string>("")
+  const [expirationDate, setExpirationDate] = useState<Date | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [descriptionError, setDescriptionError] = useState<string>("")
+  const isMountedRef = useRef(true)
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
+  const descriptionTrimmed = description.trim()
+
+  const handleConfirm = async () => {
+    if (!descriptionTrimmed) {
+      setDescriptionError("Description is required")
+      return
+    }
+
+    setDescriptionError("")
+    setIsSubmitting(true)
+    try {
+      const input: RemediationInput = {
+        type: RemediationTypeValues.FalsePositive,
+        vulnerability,
+        service,
+        image,
+        description: descriptionTrimmed,
+        ...(severity && { severity: toSeverityValue(severity) }),
+        ...(expirationDate && { expirationDate: expirationDate.toISOString() }),
+      }
+      await onConfirm(input)
+      if (isMountedRef.current) {
+        setDescription("")
+        setExpirationDate(null)
+        onClose()
+      }
+    } catch (error) {
+      console.error("Failed to create remediation:", error)
+      // Error is shown in modal via errorMessage from parent
+    } finally {
+      if (isMountedRef.current) {
+        setIsSubmitting(false)
+      }
+    }
+  }
+
+  const handleClose = () => {
+    setDescription("")
+    setExpirationDate(null)
+    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"
+      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 || !descriptionTrimmed}
+            />
+          </Stack>
+        </ModalFooter>
+      }
+    >
+      <Stack gap="4" direction="vertical">
+        {errorMessage && <Message text={errorMessage} variant="error" />}
+        <div>
+          <strong>Vulnerability:</strong> {vulnerability}
+        </div>
+        <div>
+          <strong>Service:</strong> {service}
+        </div>
+        <div>
+          <strong>Image:</strong> {image}
+        </div>
+        <div>
+          <DateTimePicker
+            label="Expiration Date"
+            value={expirationDate ?? undefined}
+            onChange={(dates) => setExpirationDate(dates?.[0] ?? null)}
+            minDate="today"
+            helptext="Optional. When this false positive should no longer be considered valid."
+          />
+        </div>
+        <div>
+          <Textarea
+            label="Description"
+            placeholder="Add a description explaining why this is a false positive..."
+            value={description}
+            onChange={handleDescriptionChange}
+            rows={4}
+            required
+            invalid={!!descriptionError}
+            errortext={descriptionError || ""}
+          />
+        </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
index 83cd2933bc..355eb454f6 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
@@ -4,12 +4,23 @@
  */
 
 import React, { useState } from "react"
-import { DataGridRow, DataGridCell, Stack } from "@cloudoperators/juno-ui-components"
+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())
@@ -24,56 +35,117 @@ const cellSeverityClasses = (severity: string) => {
 
 type IssuesDataRowProps = {
   issue: ImageVulnerability
+  service: string
+  image: string
+  showFalsePositiveAction?: boolean
+  onFalsePositiveSuccess?: (cveNumber: string) => void | Promise<void>
 }
 
-export const IssuesDataRow = ({ issue }: IssuesDataRowProps) => {
+export const IssuesDataRow = ({
+  issue,
+  service,
+  image,
+  showFalsePositiveAction = true,
+  onFalsePositiveSuccess,
+}: IssuesDataRowProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
-  const { needsExpansion, textRef } = useTextOverflow(issue.description)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [createError, setCreateError] = useState<string | null>(null)
+  const { needsExpansion, textRef } = useTextOverflow(issue?.description || "")
+  const { apiClient } = useRouteContext({ from: "/services/$service" })
+
+  if (!issue || !issue.name) {
+    return null
+  }
 
   const toggleDescription = (e: React.MouseEvent) => {
     e.preventDefault()
     setIsExpanded(!isExpanded)
   }
 
+  const handleFalsePositiveClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const handleModalConfirm = async (input: RemediationInput) => {
+    setCreateError(null)
+    try {
+      await createRemediation({ apiClient, input })
+      setIsModalOpen(false)
+      const cveNumber = issue?.name || "unknown"
+      await onFalsePositiveSuccess?.(cveNumber)
+    } catch (error) {
+      setCreateError(error instanceof Error ? error.message : "Failed to create remediation")
+    }
+  }
+
+  const handleModalClose = () => {
+    setCreateError(null)
+    setIsModalOpen(false)
+  }
+
   return (
-    <DataGridRow>
-      <DataGridCell className="pl-0">
-        <div className={cellSeverityClasses(issue.severity)}>
-          <IssueIcon severity={issue.severity} />
-        </div>
-      </DataGridCell>
+    <>
+      <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>
+        <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="Mark False Positive" onClick={handleFalsePositiveClick} />
+              </PopupMenuOptions>
+            </PopupMenu>
+          </DataGridCell>
+        )}
+      </DataGridRow>
+      {showFalsePositiveAction && (
+        <FalsePositiveModal
+          open={isModalOpen}
+          onClose={handleModalClose}
+          onConfirm={handleModalConfirm}
+          vulnerability={issue.name}
+          severity={issue.severity}
+          service={service}
+          image={image}
+          errorMessage={createError}
+        />
+      )}
+    </>
   )
 }
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 37e73be601..445694e0a5 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/IssuesDataRows/index.tsx
@@ -4,29 +4,40 @@
  */
 
 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
+  onFalsePositiveSuccess: (cveNumber: string) => void | Promise<void>
 }
 
-export const IssuesDataRows = ({ issuesPromise }: IssuesDataRowsProps) => {
+export const IssuesDataRows = ({ issuesPromise, service, image, onFalsePositiveSuccess }: 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} />
-  ))
+  return vulnerabilities
+    .filter((vulnerability) => vulnerability && vulnerability.name)
+    .map((vulnerability) => (
+      <IssuesDataRow
+        key={vulnerability.id || vulnerability.name}
+        issue={vulnerability}
+        service={service}
+        image={image}
+        onFalsePositiveSuccess={onFalsePositiveSuccess}
+      />
+    ))
 }
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/RemediatedIssueDataRow.test.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/RemediatedIssueDataRow.test.tsx
new file mode 100644
index 0000000000..e5956f3035
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/RemediatedIssueDataRow.test.tsx
@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { RemediatedIssueDataRow } from "./index"
+import type { ImageVulnerability } from "../../../../../Services/utils"
+
+const mockIssue: ImageVulnerability = {
+  id: "vul-1",
+  name: "CVE-2024-1234",
+  severity: "High",
+  earliestTargetRemediationDate: "2024-12-31T00:00:00Z",
+  description: "A test vulnerability description.",
+  sourceUrl: "https://nvd.nist.gov/vuln/detail/CVE-2024-1234",
+}
+
+describe("RemediatedIssueDataRow", () => {
+  it("renders issue name and description", () => {
+    render(<RemediatedIssueDataRow issue={mockIssue} onSelect={() => {}} />)
+    expect(screen.getByText("CVE-2024-1234")).toBeInTheDocument()
+    expect(screen.getByText("A test vulnerability description.")).toBeInTheDocument()
+  })
+
+  it("calls onSelect when row is clicked", async () => {
+    const onSelect = vi.fn()
+    const user = userEvent.setup()
+    render(<RemediatedIssueDataRow issue={mockIssue} onSelect={onSelect} />)
+    await user.click(screen.getByText("CVE-2024-1234"))
+    expect(onSelect).toHaveBeenCalledTimes(1)
+  })
+
+  it("returns null when issue has no name", () => {
+    const { container } = render(<RemediatedIssueDataRow issue={{ ...mockIssue, name: "" }} onSelect={() => {}} />)
+    expect(container.firstChild).toBeNull()
+  })
+})
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..ec3091b403
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssueDataRow/index.tsx
@@ -0,0 +1,103 @@
+/*
+ * 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 } 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 RemediatedIssueDataRowProps = {
+  issue: ImageVulnerability
+  selected?: boolean
+  onSelect: () => void
+}
+
+export const RemediatedIssueDataRow = ({ issue, selected, onSelect }: RemediatedIssueDataRowProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { needsExpansion, textRef } = useTextOverflow(issue?.description || "")
+
+  const toggleDescription = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsExpanded((prev) => !prev)
+  }
+
+  if (!issue?.name) {
+    return null
+  }
+
+  return (
+    <DataGridRow
+      onClick={onSelect}
+      className={selected ? "bg-theme-background-selected cursor-pointer" : "cursor-pointer"}
+    >
+      <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"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <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 className="min-w-0">
+        <Stack gap="2" direction="vertical">
+          <span
+            ref={textRef}
+            className={isExpanded ? "" : "whitespace-nowrap overflow-hidden text-ellipsis max-w-full"}
+          >
+            {issue.description}
+          </span>
+          {issue.description && needsExpansion && (
+            <a
+              href="#"
+              onClick={(e) => {
+                e.stopPropagation()
+                toggleDescription(e)
+              }}
+              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/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssuesDataRows.test.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssuesDataRows.test.tsx
new file mode 100644
index 0000000000..f0774125b3
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/RemediatedIssuesDataRows.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { act, render, screen } from "@testing-library/react"
+import { ObservableQuery } from "@apollo/client"
+import { RemediatedIssuesDataRows } from "./index"
+import { GetImagesQuery, GetRemediationsQuery } from "../../../../../generated/graphql"
+
+const emptyImagesPromise = Promise.resolve({
+  data: {
+    Images: {
+      edges: [],
+      pageInfo: { pageNumber: 1, pages: [], __typename: "PageInfo" },
+      __typename: "ImageConnection",
+    },
+  },
+  loading: false,
+  networkStatus: 7,
+  error: undefined,
+  partial: false,
+  dataState: "complete" as const,
+}) as unknown as Promise<ObservableQuery.Result<GetImagesQuery>>
+
+const emptyRemediationsPromise = Promise.resolve({
+  data: {
+    Remediations: {
+      edges: [],
+      pageInfo: { pageNumber: 1, pages: [], __typename: "PageInfo" },
+      __typename: "RemediationConnection",
+    },
+  },
+  loading: false,
+  networkStatus: 7,
+  error: undefined,
+  partial: false,
+  dataState: "complete" as const,
+}) as unknown as Promise<ObservableQuery.Result<GetRemediationsQuery>>
+
+describe("RemediatedIssuesDataRows", () => {
+  it("renders empty state when there are no remediated vulnerabilities", async () => {
+    await act(async () => {
+      render(
+        <Suspense fallback={<div>Loading...</div>}>
+          <RemediatedIssuesDataRows
+            issuesPromise={emptyImagesPromise}
+            remediationsPromise={emptyRemediationsPromise}
+            selectedVulnerabilityName={null}
+            onSelectVulnerability={() => {}}
+          />
+        </Suspense>
+      )
+    })
+    expect(await screen.findByText("No remediated vulnerabilities found!")).toBeInTheDocument()
+  })
+})
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..5c67b81ec5
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediatedIssuesDataRows/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { getNormalizedImageVulnerabilitiesResponse } from "../../../../Services/utils"
+import { GetRemediationsQuery } from "../../../../../generated/graphql"
+import { GetImagesQuery } from "../../../../../generated/graphql"
+
+const COLUMN_SPAN = 4
+
+type RemediatedIssuesDataRowsProps = {
+  issuesPromise: Promise<ObservableQuery.Result<GetImagesQuery>>
+  remediationsPromise: Promise<ObservableQuery.Result<GetRemediationsQuery>>
+  selectedVulnerabilityName: string | null
+  onSelectVulnerability: (vulnerabilityName: string | null) => void
+}
+
+export const RemediatedIssuesDataRows = ({
+  issuesPromise,
+  remediationsPromise,
+  selectedVulnerabilityName,
+  onSelectVulnerability,
+}: RemediatedIssuesDataRowsProps) => {
+  const issuesResult = use(issuesPromise)
+  const remediationsResult = use(remediationsPromise)
+  const { error: issuesError, data: issuesData } = issuesResult
+  const { data: remediationsData } = remediationsResult
+  // Support both Apollo result (.data) and raw query data (e.g. from React Query cache)
+  const queryData = (issuesData ?? (issuesResult as unknown as GetImagesQuery)) as GetImagesQuery | undefined
+  const { vulnerabilities } = getNormalizedImageVulnerabilitiesResponse(queryData)
+  // Keep remediations loaded for future remediation-actions panel
+  getNormalizedRemediationsResponse(remediationsData as GetRemediationsQuery | undefined)
+  if (issuesError) {
+    return (
+      <EmptyDataGridRow colSpan={COLUMN_SPAN}>
+        Error loading remediated vulnerabilities: {issuesError.message}
+      </EmptyDataGridRow>
+    )
+  }
+
+  if (vulnerabilities.length === 0) {
+    return <EmptyDataGridRow colSpan={COLUMN_SPAN}>No remediated vulnerabilities found!</EmptyDataGridRow>
+  }
+
+  return (
+    <>
+      {vulnerabilities.map((issue) => (
+        <RemediatedIssueDataRow
+          key={issue.id}
+          issue={issue}
+          selected={selectedVulnerabilityName === issue.name}
+          onSelect={() => onSelectVulnerability(issue.name)}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediationHistoryPanel/RemediationHistoryPanel.test.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediationHistoryPanel/RemediationHistoryPanel.test.tsx
new file mode 100644
index 0000000000..28843a5043
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediationHistoryPanel/RemediationHistoryPanel.test.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 from "react"
+import { render, screen } from "@testing-library/react"
+import { createMemoryHistory, createRootRoute, createRoute, Outlet, RouterProvider } from "@tanstack/react-router"
+import { PortalProvider } from "@cloudoperators/juno-ui-components"
+import { RemediationHistoryPanel } from "./index"
+import { getTestRouter } from "../../../../../mocks/getTestRouter"
+
+const renderPanel = (vulnerability: string | null = null) => {
+  const rootRoute = createRootRoute({
+    component: () => <Outlet />,
+  })
+  const testRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/services/$service",
+    component: () => (
+      <RemediationHistoryPanel service="my-service" image="my-image" vulnerability={vulnerability} onClose={() => {}} />
+    ),
+  })
+  const routeTree = rootRoute.addChildren([testRoute])
+  const router = getTestRouter({
+    routeTree,
+    history: createMemoryHistory({
+      initialEntries: ["/services/my-service"],
+    }),
+  })
+  return render(
+    <PortalProvider>
+      <RouterProvider router={router} />
+    </PortalProvider>
+  )
+}
+
+describe("RemediationHistoryPanel", () => {
+  it("renders without crashing when vulnerability is null (panel closed)", () => {
+    renderPanel(null)
+    expect(screen.queryByText("Revert False Positive")).not.toBeInTheDocument()
+  })
+})
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediationHistoryPanel/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediationHistoryPanel/index.tsx
new file mode 100644
index 0000000000..8877c220f2
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/RemediationHistoryPanel/index.tsx
@@ -0,0 +1,192 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, Suspense, use, useState } from "react"
+import { useRouteContext } from "@tanstack/react-router"
+import {
+  Panel,
+  PanelBody,
+  DataGrid,
+  DataGridRow,
+  DataGridHeadCell,
+  DataGridCell,
+  PopupMenu,
+  PopupMenuOptions,
+  PopupMenuItem,
+  Toast,
+  Stack,
+} from "@cloudoperators/juno-ui-components"
+import { fetchRemediations } from "../../../../../api/fetchRemediations"
+import { deleteRemediation } from "../../../../../api/deleteRemediation"
+import { getNormalizedRemediationsResponse } from "../../../../Services/utils"
+import { GetRemediationsQuery } from "../../../../../generated/graphql"
+import { ErrorBoundary } from "../../../../common/ErrorBoundary"
+import { EmptyDataGridRow } from "../../../../common/EmptyDataGridRow"
+import { LoadingDataRow } from "../../../../common/LoadingDataRow"
+import { getErrorDataRowComponent } from "../../../../common/getErrorDataRow"
+import type { RemediatedVulnerability } from "../../../../Services/utils"
+
+type RemediationHistoryPanelProps = {
+  service: string
+  image: string
+  vulnerability: string | null
+  onClose: () => void
+  /** Called after a successful revert so the parent can refetch getRemediations and getImages. */
+  onRevertSuccess?: () => void | Promise<void>
+}
+
+const COLUMN_SPAN = 6
+
+function formatDateTime(value: string | null): string {
+  if (!value) return "—"
+  try {
+    const d = new Date(value)
+    return Number.isNaN(d.getTime())
+      ? value
+      : d.toLocaleDateString("en-GB", { year: "numeric", month: "short", day: "numeric" })
+  } catch {
+    return value
+  }
+}
+
+const RemediationHistoryTable = ({
+  remediationsPromise,
+  onRevert,
+}: {
+  remediationsPromise: ReturnType<typeof fetchRemediations>
+  onRevert: (remediationId: string) => Promise<void>
+}) => {
+  const [revertingId, setRevertingId] = useState<string | null>(null)
+  const { error, data } = use(remediationsPromise)
+  const { remediatedVulnerabilities } = getNormalizedRemediationsResponse(data as GetRemediationsQuery | undefined)
+
+  const handleRevert = async (r: RemediatedVulnerability) => {
+    setRevertingId(r.remediationId)
+    try {
+      await onRevert(r.remediationId)
+    } finally {
+      setRevertingId(null)
+    }
+  }
+
+  if (error) {
+    return <EmptyDataGridRow colSpan={COLUMN_SPAN}>Error loading remediations: {error.message}</EmptyDataGridRow>
+  }
+
+  if (remediatedVulnerabilities.length === 0) {
+    return <EmptyDataGridRow colSpan={COLUMN_SPAN}>No remediations found for this vulnerability.</EmptyDataGridRow>
+  }
+
+  return (
+    <>
+      {remediatedVulnerabilities.map((r: RemediatedVulnerability) => (
+        <DataGridRow key={r.remediationId}>
+          <DataGridCell className="whitespace-nowrap">{formatDateTime(r.expirationDate)}</DataGridCell>
+          <DataGridCell className="whitespace-nowrap">{formatDateTime(r.remediationDate)}</DataGridCell>
+          <DataGridCell>{r.remediatedBy ?? "—"}</DataGridCell>
+          <DataGridCell>{r.type ?? "—"}</DataGridCell>
+          <DataGridCell>{r.description ?? "—"}</DataGridCell>
+          <DataGridCell className="cursor-default interactive" onClick={(e) => e.stopPropagation()}>
+            <PopupMenu icon="moreVert" className="whitespace-nowrap" disabled={!!revertingId}>
+              <PopupMenuOptions>
+                <PopupMenuItem
+                  label={revertingId === r.remediationId ? "Reverting..." : "Revert False Positive"}
+                  onClick={() => handleRevert(r)}
+                  disabled={!!revertingId}
+                />
+              </PopupMenuOptions>
+            </PopupMenu>
+          </DataGridCell>
+        </DataGridRow>
+      ))}
+    </>
+  )
+}
+
+type RevertMessage = { variant: "success" | "error"; text: string }
+
+export const RemediationHistoryPanel = ({
+  service,
+  image,
+  vulnerability,
+  onClose,
+  onRevertSuccess,
+}: RemediationHistoryPanelProps) => {
+  const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
+  const [revertMessage, setRevertMessage] = useState<RevertMessage | null>(null)
+
+  const remediationsPromise = useMemo(() => {
+    if (!vulnerability) return null
+
+    return fetchRemediations({
+      apiClient,
+      queryClient,
+      filter: {
+        service: [service],
+        image: [image],
+        vulnerability: [vulnerability],
+      },
+    })
+  }, [service, image, vulnerability, apiClient, queryClient])
+
+  const handleRevert = async (remediationId: string) => {
+    try {
+      await deleteRemediation({ apiClient, remediationId })
+      await onRevertSuccess?.()
+      const text = `Vulnerability ${vulnerability ?? "unknown"} reverted from false positive successfully.`
+      setRevertMessage({ variant: "success", text })
+    } catch (err) {
+      setRevertMessage({
+        variant: "error",
+        text: err instanceof Error ? err.message : "Failed to delete remediation",
+      })
+    }
+  }
+
+  return (
+    <Panel
+      heading={vulnerability ? `Remediations for ${vulnerability}` : undefined}
+      opened={!!vulnerability}
+      onClose={onClose}
+      size="large"
+    >
+      <PanelBody>
+        {revertMessage && (
+          <Stack direction="vertical" gap="2" className="jn-mb-4">
+            <Toast
+              variant={revertMessage.variant}
+              autoDismiss
+              autoDismissTimeout={5000}
+              onDismiss={() => setRevertMessage(null)}
+            >
+              {revertMessage.text}
+            </Toast>
+          </Stack>
+        )}
+        {remediationsPromise && (
+          <ErrorBoundary
+            displayErrorMessage
+            fallbackRender={getErrorDataRowComponent({ colspan: COLUMN_SPAN })}
+            resetKeys={[remediationsPromise]}
+          >
+            <DataGrid columns={COLUMN_SPAN} cellVerticalAlignment="top">
+              <DataGridRow>
+                <DataGridHeadCell>Expiration Date</DataGridHeadCell>
+                <DataGridHeadCell>Remediation Date</DataGridHeadCell>
+                <DataGridHeadCell>Remediated By</DataGridHeadCell>
+                <DataGridHeadCell>Type</DataGridHeadCell>
+                <DataGridHeadCell>Description</DataGridHeadCell>
+                <DataGridHeadCell>Actions</DataGridHeadCell>
+              </DataGridRow>
+              <Suspense fallback={<LoadingDataRow colSpan={COLUMN_SPAN} />}>
+                <RemediationHistoryTable remediationsPromise={remediationsPromise} onRevert={handleRevert} />
+              </Suspense>
+            </DataGrid>
+          </ErrorBoundary>
+        )}
+      </PanelBody>
+    </Panel>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
index 2b882f7f66..916f2102e6 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageIssuesList/index.tsx
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Suspense, useState } from "react"
-import { useRouteContext } from "@tanstack/react-router"
+import React, { Suspense, useState, useCallback, useEffect } from "react"
+import { useNavigate, useRouteContext } from "@tanstack/react-router"
 import {
   DataGrid,
   DataGridRow,
@@ -12,44 +12,58 @@ import {
   Icon,
   Stack,
   SearchInput,
-  ContentHeading,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+  Message,
 } from "@cloudoperators/juno-ui-components"
 import { getNormalizedImageVulnerabilitiesResponse, ServiceImage } from "../../../Services/utils"
+import type { VulnerabilityFilter } from "../../../../generated/graphql"
 import { fetchImages } from "../../../../api/fetchImages"
+import { fetchRemediations } from "../../../../api/fetchRemediations"
 import { IssuesDataRows } from "./IssuesDataRows"
+import { RemediatedIssuesDataRows } from "./RemediatedIssuesDataRows"
+import { RemediationHistoryPanel } from "./RemediationHistoryPanel"
 import { CursorPagination } from "../../../common/CursorPagination"
 import { ErrorBoundary } from "../../../common/ErrorBoundary"
 import { getErrorDataRowComponent } from "../../../common/getErrorDataRow"
 import { LoadingDataRow } from "../../../common/LoadingDataRow"
+import type { VulnerabilitiesTabValue } from "../index"
 
 type ImageIssuesListProps = {
   service: string
   image: ServiceImage
+  vulnerabilitiesTab?: VulnerabilitiesTabValue
+  /** CVE number when remediation history panel is open (from vulRemediations search param). */
+  vulRemediations?: string
 }
 
-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,
-  })
-
+const VulnerabilitiesTabContent = ({
+  service,
+  image,
+  setSearchTerm,
+  setPageCursor,
+  issuesPromise,
+  successMessage,
+  onFalsePositiveSuccess,
+}: {
+  service: string
+  image: ServiceImage
+  setSearchTerm: (term: string | undefined) => void
+  setPageCursor: (cursor: string | null | undefined) => void
+  issuesPromise: ReturnType<typeof fetchImages>
+  successMessage: string | null
+  onFalsePositiveSuccess: (cveNumber: string) => void | Promise<void>
+}) => {
   return (
     <>
-      <Stack gap="2" className="mb-4 mt-8">
-        <ContentHeading>Vulnerabilities</ContentHeading>
+      {successMessage && (
+        <div className="mb-4 mt-4">
+          <Message text={successMessage} variant="success" />
+        </div>
+      )}
+      <Stack gap="2" className="mb-4 mt-4">
         <SearchInput
           placeholder="Search for CVE number"
           className="w-96 ml-auto"
@@ -59,7 +73,7 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
           }}
         />
       </Stack>
-      <DataGrid columns={4} minContentColumns={[0, 1, 2]} cellVerticalAlignment="top">
+      <DataGrid columns={5} minContentColumns={[0, 1, 2, 4]} cellVerticalAlignment="top">
         <DataGridRow>
           <DataGridHeadCell>
             <Icon icon="monitorHeart" />
@@ -67,16 +81,22 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
           <DataGridHeadCell>Vulnerability</DataGridHeadCell>
           <DataGridHeadCell>Target Date</DataGridHeadCell>
           <DataGridHeadCell>Description</DataGridHeadCell>
+          <DataGridHeadCell>Actions</DataGridHeadCell>
         </DataGridRow>
 
         {issuesPromise && (
           <ErrorBoundary
             displayErrorMessage
-            fallbackRender={getErrorDataRowComponent({ colspan: 4 })}
+            fallbackRender={getErrorDataRowComponent({ colspan: 5 })}
             resetKeys={[issuesPromise]}
           >
-            <Suspense fallback={<LoadingDataRow colSpan={4} />}>
-              <IssuesDataRows issuesPromise={issuesPromise} />
+            <Suspense fallback={<LoadingDataRow colSpan={5} />}>
+              <IssuesDataRows
+                issuesPromise={issuesPromise}
+                service={service}
+                image={image.repository}
+                onFalsePositiveSuccess={onFalsePositiveSuccess}
+              />
             </Suspense>
           </ErrorBoundary>
         )}
@@ -95,3 +115,256 @@ export const ImageIssuesList = ({ service, image }: ImageIssuesListProps) => {
     </>
   )
 }
+
+const RemediatedVulnerabilitiesTabContent = ({
+  service,
+  image,
+  setSearchTerm,
+  issuesPromise,
+  remediationsPromise,
+  setPageCursor,
+  successMessage,
+  onDataRefresh,
+  selectedVulnerability,
+  onSelectVulnerability,
+}: {
+  service: string
+  image: string
+  setSearchTerm: (term: string | undefined) => void
+  issuesPromise: ReturnType<typeof fetchImages>
+  remediationsPromise: ReturnType<typeof fetchRemediations>
+  setPageCursor: (cursor: string | null | undefined) => void
+  successMessage: string | null
+  onDataRefresh?: () => void | Promise<void>
+  selectedVulnerability: string | null
+  onSelectVulnerability: (cve: string | null) => void
+}) => {
+  return (
+    <>
+      {successMessage && (
+        <div className="mb-4 mt-4">
+          <Message text={successMessage} variant="success" />
+        </div>
+      )}
+      <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>
+      <div className="mt-4">
+        <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, remediationsPromise]}
+            >
+              <Suspense fallback={<LoadingDataRow colSpan={4} />}>
+                <RemediatedIssuesDataRows
+                  issuesPromise={issuesPromise}
+                  remediationsPromise={remediationsPromise}
+                  selectedVulnerabilityName={selectedVulnerability}
+                  onSelectVulnerability={onSelectVulnerability}
+                />
+              </Suspense>
+            </ErrorBoundary>
+          )}
+        </DataGrid>
+        {issuesPromise && (
+          <ErrorBoundary resetKeys={[issuesPromise]}>
+            <Suspense>
+              <CursorPagination
+                dataPromise={issuesPromise}
+                dataNormalizationMethod={getNormalizedImageVulnerabilitiesResponse}
+                goToPage={setPageCursor}
+              />
+            </Suspense>
+          </ErrorBoundary>
+        )}
+      </div>
+      <RemediationHistoryPanel
+        service={service}
+        image={image}
+        vulnerability={selectedVulnerability}
+        onClose={() => onSelectVulnerability(null)}
+        onRevertSuccess={onDataRefresh}
+      />
+    </>
+  )
+}
+
+const SUCCESS_MESSAGE_DURATION_MS = 5000
+
+export const ImageIssuesList = ({
+  service,
+  image,
+  vulnerabilitiesTab = "active",
+  vulRemediations,
+}: ImageIssuesListProps) => {
+  const { apiClient, queryClient } = useRouteContext({ from: "/services/$service" })
+  const navigate = useNavigate()
+  const [searchTerm, setSearchTerm] = useState<string | undefined>(undefined)
+  const [remediatedSearchTerm, setRemediatedSearchTerm] = useState<string | undefined>(undefined)
+  const [pageCursor, setPageCursor] = useState<string | null | undefined>(undefined)
+  const [remediatedPageCursor, setRemediatedPageCursor] = useState<string | null | undefined>(undefined)
+  const selectedTabIndex = vulnerabilitiesTab === "remediated" ? 1 : 0
+  const handleTabSelect = useCallback(
+    (index: number) => {
+      const list: VulnerabilitiesTabValue = index === 1 ? "remediated" : "active"
+      navigate({
+        to: "/services/$service/images/$image",
+        params: { service, image: image.repository },
+        search: { vulnerabilitiesList: list, vulRemediations: list === "remediated" ? vulRemediations : undefined },
+        replace: true,
+      })
+    },
+    [navigate, service, image.repository, vulRemediations]
+  )
+  const handleRemediationPanelVulnerabilityChange = useCallback(
+    (cve: string | null) => {
+      navigate({
+        to: "/services/$service/images/$image",
+        params: { service, image: image.repository },
+        search: { vulnerabilitiesList: "remediated", vulRemediations: cve ?? undefined },
+        replace: true,
+      })
+    },
+    [navigate, service, image.repository]
+  )
+  const [vulnerabilitiesSuccessMessage, setVulnerabilitiesSuccessMessage] = useState<string | null>(null)
+  const [remediatedSuccessMessage, setRemediatedSuccessMessage] = useState<string | null>(null)
+  const [, setRefreshKey] = useState(0)
+
+  const refreshIssuesData = useCallback(async () => {
+    await queryClient.refetchQueries({ queryKey: ["remediations"] })
+    await queryClient.refetchQueries({ queryKey: ["images"] })
+    setRefreshKey((k) => k + 1)
+  }, [queryClient])
+
+  const openVulFilter = {
+    status: "open",
+    ...(searchTerm ? { search: [searchTerm] } : {}),
+  }
+  const remediatedVulFilter = {
+    status: "remediated",
+    ...(remediatedSearchTerm ? { search: [remediatedSearchTerm] } : {}),
+  }
+
+  const issuesPromise = fetchImages({
+    apiClient,
+    queryClient,
+    filter: {
+      service: [service],
+      repository: [image.repository],
+    },
+    firstVulnerabilities: 20,
+    afterVulnerabilities: pageCursor,
+    vulFilter: openVulFilter as VulnerabilityFilter,
+  })
+
+  const remediatedIssuesPromise = fetchImages({
+    apiClient,
+    queryClient,
+    filter: {
+      service: [service],
+      repository: [image.repository],
+    },
+    firstVulnerabilities: 20,
+    afterVulnerabilities: remediatedPageCursor,
+    vulFilter: remediatedVulFilter as VulnerabilityFilter,
+  })
+
+  useEffect(() => {
+    setRemediatedPageCursor(undefined)
+  }, [remediatedSearchTerm])
+
+  const remediationsPromise = fetchRemediations({
+    apiClient,
+    queryClient,
+    filter: {
+      service: [service],
+      image: [image.repository],
+    },
+  })
+
+  useEffect(() => {
+    if (!vulnerabilitiesSuccessMessage) return
+    const timer = setTimeout(() => setVulnerabilitiesSuccessMessage(null), SUCCESS_MESSAGE_DURATION_MS)
+    return () => clearTimeout(timer)
+  }, [vulnerabilitiesSuccessMessage])
+
+  useEffect(() => {
+    if (!remediatedSuccessMessage) return
+    const timer = setTimeout(() => setRemediatedSuccessMessage(null), SUCCESS_MESSAGE_DURATION_MS)
+    return () => clearTimeout(timer)
+  }, [remediatedSuccessMessage])
+
+  const VulnerabilitiesTab = () => {
+    const handleFalsePositiveSuccess = useCallback(
+      async (cveNumber: string) => {
+        await refreshIssuesData()
+        const text = `Vulnerability ${cveNumber} marked as false positive successfully.`
+        setVulnerabilitiesSuccessMessage(text)
+      },
+      [refreshIssuesData]
+    )
+
+    return (
+      <VulnerabilitiesTabContent
+        service={service}
+        image={image}
+        setSearchTerm={setSearchTerm}
+        setPageCursor={setPageCursor}
+        issuesPromise={issuesPromise}
+        successMessage={vulnerabilitiesSuccessMessage}
+        onFalsePositiveSuccess={handleFalsePositiveSuccess}
+      />
+    )
+  }
+
+  const RemediatedVulnerabilitiesTab = () => {
+    return (
+      <RemediatedVulnerabilitiesTabContent
+        service={service}
+        image={image.repository}
+        setSearchTerm={setRemediatedSearchTerm}
+        issuesPromise={remediatedIssuesPromise}
+        remediationsPromise={remediationsPromise}
+        setPageCursor={setRemediatedPageCursor}
+        successMessage={remediatedSuccessMessage}
+        onDataRefresh={refreshIssuesData}
+        selectedVulnerability={vulRemediations ?? null}
+        onSelectVulnerability={handleRemediationPanelVulnerabilityChange}
+      />
+    )
+  }
+
+  return (
+    <>
+      <Tabs selectedIndex={selectedTabIndex} onSelect={handleTabSelect} variant="content">
+        <TabList>
+          <Tab label="Active Vulnerabilities" />
+          <Tab label="Remediated Vulnerabilities" />
+        </TabList>
+        <TabPanel>
+          <VulnerabilitiesTab />
+        </TabPanel>
+        <TabPanel>
+          <RemediatedVulnerabilitiesTab />
+        </TabPanel>
+      </Tabs>
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/ImageVersionOccurrences.tsx b/apps/heureka/src/components/Service/ImageDetails/ImageVersionOccurrences.tsx
index 6e29f9f8e6..ce6fa49d26 100644
--- a/apps/heureka/src/components/Service/ImageDetails/ImageVersionOccurrences.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageVersionOccurrences.tsx
@@ -99,7 +99,7 @@ const ImageVersionOccurrences = ({ imageVersion }: ImageVersionOccurrencesProps)
         ))}
 
       <div className="advance-link">
-        <a href="#" rel="noopener noreferrer" onClick={onShowMoreClicked}>
+        <a href="#" onClick={onShowMoreClicked}>
           <Stack alignment="center">
             {displayOccurrences ? "Hide Occurrences" : "Display Occurrences"}
             <Icon color="global-text" icon={displayOccurrences ? "expandLess" : "expandMore"} />
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..37ea8ab249
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageDetails/ImageVersionsList/index.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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 { Stack, Icon } from "@cloudoperators/juno-ui-components"
+import { useNavigate } from "@tanstack/react-router"
+import { ImageVersion } from "../../../Services/utils"
+import SectionContentHeading from "../../../common/SectionContentHeading"
+import { getShortSha256 } from "../../../../utils"
+
+const VERSIONS_INITIAL = 30
+
+type ImageVersionsListProps = {
+  versions: ImageVersion[]
+  service: string
+  imageRepository: string
+}
+
+export const ImageVersionsList = ({ versions, service, imageRepository }: ImageVersionsListProps) => {
+  const [showAllVersions, setShowAllVersions] = useState(false)
+  const navigate = useNavigate()
+  const displayedVersions = showAllVersions ? versions : versions.slice(0, VERSIONS_INITIAL)
+  const hasMoreVersions = versions.length > VERSIONS_INITIAL
+
+  const handleVersionClick = (version: string) => {
+    navigate({
+      to: "/services/$service/images/$image/versions/$version",
+      params: {
+        service: encodeURIComponent(service),
+        image: encodeURIComponent(imageRepository),
+        version: encodeURIComponent(version),
+      },
+      search: {},
+    })
+  }
+
+  if (!versions || versions.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <SectionContentHeading>Image Versions</SectionContentHeading>
+      <div className="grid grid-cols-[repeat(auto-fill,_minmax(5rem,_auto))] gap-x-4 gap-y-1 mt-4">
+        {displayedVersions.map((version) => (
+          <a
+            key={version.id}
+            href="#"
+            title={version.version}
+            onClick={(e) => {
+              e.preventDefault()
+              handleVersionClick(version.version)
+            }}
+            className="link-hover w-fit"
+          >
+            {getShortSha256(version.version)}
+          </a>
+        ))}
+      </div>
+      {hasMoreVersions && (
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault()
+            setShowAllVersions((prev) => !prev)
+          }}
+          className="link-hover mt-2 inline-flex items-center gap-1"
+        >
+          {showAllVersions ? (
+            <Stack alignment="center" direction="horizontal" gap="1">
+              <span>Show less</span>
+              <Icon color="global-text" icon="expandLess" />
+            </Stack>
+          ) : (
+            <Stack alignment="center" direction="horizontal" gap="1">
+              <span>Show more ({versions.length - VERSIONS_INITIAL} more)</span>
+              <Icon color="global-text" icon="expandMore" />
+            </Stack>
+          )}
+        </a>
+      )}
+    </>
+  )
+}
diff --git a/apps/heureka/src/components/Service/ImageDetails/index.tsx b/apps/heureka/src/components/Service/ImageDetails/index.tsx
index 3ff52d7884..006d33dae5 100644
--- a/apps/heureka/src/components/Service/ImageDetails/index.tsx
+++ b/apps/heureka/src/components/Service/ImageDetails/index.tsx
@@ -3,29 +3,70 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { use } from "react"
-import { Stack, Pill, DataGrid, DataGridRow, DataGridHeadCell, DataGridCell } from "@cloudoperators/juno-ui-components"
+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 { getShortSha256 } from "../../../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"
+
+export type VulnerabilitiesTabValue = "active" | "remediated"
 
 type ImageDetailsProps = {
-  imagesPromise: Promise<GetImagesQueryResult>
+  imagesPromise: Promise<ObservableQuery.Result<GetImagesQuery>>
   imageRepository: string
   service: string
+  vulnerabilitiesTab?: VulnerabilitiesTabValue
+  /** CVE number when remediation history panel is open (from vulRemediations search param). */
+  vulRemediations?: string
 }
 
-export const ImageDetails = ({ imagesPromise, imageRepository, service }: ImageDetailsProps) => {
+export const ImageDetails = ({
+  imagesPromise,
+  imageRepository,
+  service,
+  vulnerabilitiesTab = "active",
+  vulRemediations,
+}: 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: encodeURIComponent(service),
+        image: encodeURIComponent(imageRepository),
+        version: encodeURIComponent(version),
+      },
+      search: {},
+    })
+  }
+
+  const versions = image.versions || []
+  const VERSIONS_INITIAL = 30
+  const displayedVersions = showAllVersions ? versions : versions.slice(0, VERSIONS_INITIAL)
+  const hasMoreVersions = versions.length > VERSIONS_INITIAL
+
   return (
     <>
       <SectionContentHeading>Image {image.repository}</SectionContentHeading>
@@ -59,10 +100,62 @@ export const ImageDetails = ({ imagesPromise, imageRepository, service }: ImageD
             <IssueCountsPerSeverityLevel counts={image.vulnerabilityCounts} />
           </DataGridCell>
         </DataGridRow>
+        {versions.length > 0 && (
+          <DataGridRow>
+            <DataGridHeadCell>Versions ({versions.length})</DataGridHeadCell>
+            <DataGridCell>
+              <div className="grid grid-cols-[repeat(auto-fill,_minmax(5rem,_auto))] gap-x-4 gap-y-1">
+                {displayedVersions.map((version) => (
+                  <a
+                    key={version.id}
+                    href="#"
+                    title={version.version}
+                    onClick={(e) => {
+                      e.preventDefault()
+                      handleVersionClick(version.version)
+                    }}
+                    className="link-hover w-fit"
+                  >
+                    {getShortSha256(version.version)}
+                  </a>
+                ))}
+              </div>
+              {hasMoreVersions && (
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setShowAllVersions((prev) => !prev)
+                  }}
+                  className="link-hover mt-2 inline-flex items-center gap-1"
+                >
+                  {showAllVersions ? (
+                    <>
+                      <span>Show less ...</span>
+                      <Icon color="global-text" icon="expandLess" />
+                    </>
+                  ) : (
+                    <>
+                      <span>Show ({versions.length - VERSIONS_INITIAL} more ...)</span>
+                      <Icon color="global-text" icon="expandMore" />
+                    </>
+                  )}
+                </a>
+              )}
+            </DataGridCell>
+          </DataGridRow>
+        )}
       </DataGrid>
 
       {/* Issues List Section */}
-      {service && imageRepository && image && <ImageIssuesList service={service} image={image} />}
+      {service && imageRepository && image && (
+        <ImageIssuesList
+          service={service}
+          image={image}
+          vulnerabilitiesTab={vulnerabilitiesTab}
+          vulRemediations={vulRemediations}
+        />
+      )}
     </>
   )
 }
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..5b65ddeedf
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/ImageVersionIssuesDataRows/index.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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 { 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<ObservableQuery.Result<GetImageVersionsQuery>>
+  service: string
+  image: string
+}
+
+export const ImageVersionIssuesDataRows = ({ issuesPromise, service, image }: ImageVersionIssuesDataRowsProps) => {
+  const { error, data } = use(issuesPromise)
+  const { imageVersion: versionDetails } = getNormalizedImageVersionDetailsResponse(
+    data as GetImageVersionsQuery | undefined
+  )
+
+  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..61241f4998
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionIssuesList/index.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { 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<ObservableQuery.Result<GetImageVersionsQuery>>
+  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..1b9710b8e6
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/ImageVersionOccurrences.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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>
+          <Stack gap="1" direction="vertical">
+            <span>Namespace: {instance?.namespace || "--"}</span>
+            <span>Region: {instance?.region || "--"}</span>
+            <span>Cluster: {instance?.cluster || "--"}</span>
+            <span>Container: {instance?.container || "--"}</span>
+            <span>Pod: {instance?.pod || "--"}</span>
+          </Stack>
+        </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..d86a8c7a30
--- /dev/null
+++ b/apps/heureka/src/components/Service/ImageVersionDetails/index.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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 { ObservableQuery } from "@apollo/client"
+import { GetImageVersionsQuery } from "../../../generated/graphql"
+import { getShortSha256 } from "../../../utils"
+
+type ImageVersionDetailsProps = {
+  imageVersionsPromise: Promise<ObservableQuery.Result<GetImageVersionsQuery>>
+  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)
+  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>
+    )
+  }
+
+  return (
+    <>
+      <SectionContentHeading>
+        Image {imageVersion.repository || imageRepository} - Version {getShortSha256(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 5fe33ce23a..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,14 +19,22 @@ 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)
+  // 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
+  // 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,
@@ -35,10 +44,10 @@ 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), just render the outlet
-  if (isOnImageDetailsPage) {
+  // If we're on a child route (image details or version details), just render the outlet
+  if (isOnImageDetailsPage || isOnVersionDetailsPage) {
     return <Outlet />
   }
 
diff --git a/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/ServiceDataRow.tsx b/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/ServiceDataRow.tsx
index bc29591b65..0648d8ce02 100644
--- a/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/ServiceDataRow.tsx
+++ b/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/ServiceDataRow.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react"
-import { DataGridRow, DataGridCell, Pill, Stack, Button } from "@cloudoperators/juno-ui-components"
+import { DataGridRow, DataGridCell, Pill, Stack } from "@cloudoperators/juno-ui-components"
 import { SeverityCount } from "../../../common/SeverityCount"
 import { ServiceType } from "../../../types"
 
@@ -38,10 +38,9 @@ type ServiceDataRowProps = {
   item: ServiceType
   selected: boolean
   onItemClick: () => void
-  onServiceDetailClick: () => void
 }
 
-export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailClick }: ServiceDataRowProps) => (
+export const ServiceDataRow = ({ item, selected, onItemClick }: ServiceDataRowProps) => (
   <DataGridRow className="cursor-pointer" isSelected={selected} onClick={onItemClick}>
     <DataGridCell>{item.name}</DataGridCell>
     {/* Due to UX designer feedback, when showing counts with severity icons in datagrid cells,
@@ -64,8 +63,5 @@ export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailCli
     <DataGridCell>
       <ServiceDetails serviceDetails={item.serviceDetails} />
     </DataGridCell>
-    <DataGridCell className="cursor-default interactive" onClick={(e) => e.stopPropagation()}>
-      <Button label="Show Details" onClick={onServiceDetailClick} size="small" className="whitespace-nowrap" />
-    </DataGridCell>
   </DataGridRow>
 )
diff --git a/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/index.tsx b/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/index.tsx
index f1c1402d94..09e06a9dda 100644
--- a/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/index.tsx
+++ b/apps/heureka/src/components/Services/ServicesList/ServicesDataRows/index.tsx
@@ -12,7 +12,7 @@ import { getNormalizedServicesResponse } from "../../utils"
 import { ApolloQueryResult } from "@apollo/client"
 import { GetServicesQuery } from "../../../../generated/graphql"
 
-const COLUMN_SPAN = 8
+const COLUMN_SPAN = 7
 
 type ServicesDataRowsProps = {
   servicesPromise: Promise<ApolloQueryResult<GetServicesQuery>>
@@ -24,19 +24,15 @@ export const ServicesDataRows = ({ servicesPromise }: ServicesDataRowsProps) =>
   const { error, data } = use(servicesPromise)
   const { services } = getNormalizedServicesResponse(data)
 
-  const openServiceOverviewPanel = useCallback((service: ServiceType) => {
-    navigate({
-      to: "/services",
-      search: (prev) => ({ ...prev, service: service.name }), // copy the existing search params and add new `service` param
-    })
-  }, [])
-
-  const goToServiceDetailsPage = useCallback((service: ServiceType) => {
-    navigate({
-      to: "/services/$service",
-      params: { service: service.name },
-    })
-  }, [])
+  const goToServiceDetailsPage = useCallback(
+    (serviceItem: ServiceType) => {
+      navigate({
+        to: "/services/$service",
+        params: { service: serviceItem.name },
+      })
+    },
+    [navigate]
+  )
 
   if (error) {
     return <EmptyDataGridRow colSpan={COLUMN_SPAN}>Error loading services</EmptyDataGridRow>
@@ -51,8 +47,7 @@ export const ServicesDataRows = ({ servicesPromise }: ServicesDataRowsProps) =>
       key={item.id}
       item={item}
       selected={item.name === service}
-      onItemClick={() => openServiceOverviewPanel(item)}
-      onServiceDetailClick={() => goToServiceDetailsPage(item)}
+      onItemClick={() => goToServiceDetailsPage(item)}
     />
   ))
 }
diff --git a/apps/heureka/src/components/Services/ServicesList/index.test.tsx b/apps/heureka/src/components/Services/ServicesList/index.test.tsx
index 11e2411ee5..81c860e828 100644
--- a/apps/heureka/src/components/Services/ServicesList/index.test.tsx
+++ b/apps/heureka/src/components/Services/ServicesList/index.test.tsx
@@ -8,10 +8,9 @@ import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { createMemoryHistory, createRootRoute, createRoute, Outlet, RouterProvider } from "@tanstack/react-router"
 import { PortalProvider } from "@cloudoperators/juno-ui-components/index"
-import * as fetchImages from "../../../api/fetchImages"
 import { ServicesList } from "./index"
 import { getTestRouter } from "../../../mocks/getTestRouter"
-import { mockImagesPromise, mockServicesPromise } from "../../../mocks/promises"
+import { mockServicesPromise } from "../../../mocks/promises"
 
 const renderComponent = () => {
   const rootRoute = createRootRoute({
@@ -50,20 +49,11 @@ describe("ServicesList", () => {
     expect(await screen.findByText("alpha")).toBeInTheDocument()
   })
 
-  it("should render service panel when clicking on a service", async () => {
-    vitest.spyOn(fetchImages, "fetchImages").mockReturnValue(mockImagesPromise)
+  it("should navigate to service details page when clicking on a service row", async () => {
     const { user, router } = await act(() => renderComponent())
 
-    //click on the service
     await user.click(await screen.findByText("alpha"))
 
-    //expect the url to change
-    expect(router.state.location.href).toBe("/services?service=alpha")
-
-    // expect the service panel to be opened
-    expect(await screen.findByText("Alpha Overview")).toBeInTheDocument()
-
-    // expect the image version to be displayed
-    expect(await screen.findByText("repo1")).toBeInTheDocument()
+    expect(router.state.location.pathname).toBe("/services/alpha")
   })
 })
diff --git a/apps/heureka/src/components/Services/ServicesList/index.tsx b/apps/heureka/src/components/Services/ServicesList/index.tsx
index 3968f3fd64..f78a09a08d 100644
--- a/apps/heureka/src/components/Services/ServicesList/index.tsx
+++ b/apps/heureka/src/components/Services/ServicesList/index.tsx
@@ -15,7 +15,7 @@ import { ErrorBoundary } from "../../common/ErrorBoundary"
 import { LoadingDataRow } from "../../common/LoadingDataRow"
 import { getErrorDataRowComponent } from "../../common/getErrorDataRow"
 
-const COLUMN_SPAN = 8
+const COLUMN_SPAN = 7
 
 export const ServicesList = () => {
   const { queryClient, apiClient } = useRouteContext({ from: "/services/" })
@@ -54,7 +54,6 @@ export const ServicesList = () => {
             Vulnerability Counts
           </DataGridHeadCell>
           <DataGridHeadCell>Details</DataGridHeadCell>
-          <DataGridHeadCell></DataGridHeadCell>
         </DataGridRow>
         <ErrorBoundary
           displayErrorMessage
diff --git a/apps/heureka/src/components/Services/utils.ts b/apps/heureka/src/components/Services/utils.ts
index 10a32d0d65..278623ba88 100644
--- a/apps/heureka/src/components/Services/utils.ts
+++ b/apps/heureka/src/components/Services/utils.ts
@@ -13,6 +13,10 @@ import {
   ServiceFilter,
   GetServiceFiltersQuery,
   GetImagesQuery,
+  GetRemediationsQuery,
+  GetImageVersionsQuery,
+  VulnerabilityEdge,
+  ComponentInstanceEdge,
 } from "../../generated/graphql"
 import { Filter, FilterSettings, SelectedFilter, ServiceFilterReduced } from "../common/Filters/types"
 import { ServiceType } from "../types"
@@ -262,6 +266,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
@@ -270,11 +288,34 @@ type NormalizedServiceImageVulnerabilities = {
   totalCount: number
 }
 
+// Extract the type for vulnerability edge from GetImagesQuery structure
+type ImageNodeFromQuery = NonNullable<NonNullable<NonNullable<GetImagesQuery["Images"]>["edges"]>[number]>["node"]
+type VulnerabilityEdgeFromQuery =
+  NonNullable<NonNullable<ImageNodeFromQuery>["vulnerabilities"]>["edges"] extends Array<infer E | null> ? E : never
+
+function extractVulnerabilitiesFromImageNode(imageNode: ImageNodeFromQuery): ImageVulnerability[] {
+  const edges = imageNode?.vulnerabilities?.edges || []
+  return edges
+    .filter((edge): edge is NonNullable<VulnerabilityEdgeFromQuery> => edge !== null && edge?.node != null)
+    .map((edge) => {
+      const node = edge.node
+      return {
+        id: node.id || "",
+        severity: node.severity || "",
+        name: node.name || "",
+        earliestTargetRemediationDate: node.earliestTargetRemediationDate || "",
+        description: node.description || "",
+        sourceUrl: node.sourceUrl || "",
+      }
+    })
+}
+
 export const getNormalizedImageVulnerabilitiesResponse = (
   // Apollo Client's use() hook can return DeepPartialObject<GetImagesQuery> during loading
   data: GetImagesQuery | undefined
 ): NormalizedServiceImageVulnerabilities => {
-  if (!data?.Images?.edges?.[0]?.node) {
+  const edges = data?.Images?.edges
+  if (!edges?.length) {
     return {
       vulnerabilities: [],
       totalImageVulnerabilities: 0,
@@ -284,46 +325,34 @@ export const getNormalizedImageVulnerabilitiesResponse = (
     }
   }
 
-  const imageNode = data.Images.edges[0].node
-  const vulnerabilitiesEdges = imageNode.vulnerabilities?.edges || []
-  const vulnerabilitiesPageInfo = imageNode.vulnerabilities?.pageInfo
-
-  // Extract the type for vulnerability edge from GetImagesQuery structure
-  type VulnerabilityEdge = NonNullable<
-    NonNullable<NonNullable<NonNullable<GetImagesQuery["Images"]>["edges"]>[0]>["node"]
-  >["vulnerabilities"] extends infer V
-    ? V extends { edges: Array<infer E | null> }
-      ? E
-      : never
-    : never
-
-  const vulnerabilities: ImageVulnerability[] = vulnerabilitiesEdges
-    .filter((edge): edge is NonNullable<VulnerabilityEdge> => edge !== null && edge.node !== null)
-    .map((edge) => {
-      const node = edge.node
-      return {
-        id: node.id || "",
-        severity: node.severity || "",
-        name: node.name || "",
-        earliestTargetRemediationDate: node.earliestTargetRemediationDate || "",
-        description: node.description || "",
-        sourceUrl: node.sourceUrl || "",
-      }
-    })
+  // Aggregate vulnerabilities from all image edges (handles vulFilter responses that may return multiple nodes or different shapes)
+  const allVulnerabilities: ImageVulnerability[] = []
+  let vulnerabilitiesPageInfo: NonNullable<NonNullable<ImageNodeFromQuery>["vulnerabilities"]>["pageInfo"] = null
+  let totalImageVulnerabilities = 0
+
+  for (const edge of edges) {
+    const node = edge?.node
+    if (!node) continue
+    const vulns = extractVulnerabilitiesFromImageNode(node)
+    allVulnerabilities.push(...vulns)
+    if (node.vulnerabilityCounts?.total != null) {
+      totalImageVulnerabilities = Math.max(totalImageVulnerabilities, node.vulnerabilityCounts.total)
+    }
+    if (node.vulnerabilities?.pageInfo && !vulnerabilitiesPageInfo) {
+      vulnerabilitiesPageInfo = node.vulnerabilities.pageInfo
+    }
+  }
 
-  const totalImageVulnerabilities = imageNode.vulnerabilityCounts?.total ?? 0
-  const pages = vulnerabilitiesPageInfo?.pages?.filter((edge): edge is Page => edge !== null) || []
+  const pages = vulnerabilitiesPageInfo?.pages?.filter((p): p is Page => p !== null) || []
   const pageNumber = vulnerabilitiesPageInfo?.pageNumber || 1
-
-  // When vulnerabilities.edges is [] or vulnerabilities.pageInfo is null, there are no results
-  const hasNoResults = vulnerabilities.length === 0 || !vulnerabilitiesPageInfo
+  const hasNoResults = allVulnerabilities.length === 0 || !vulnerabilitiesPageInfo
 
   return {
-    vulnerabilities,
+    vulnerabilities: allVulnerabilities,
     totalImageVulnerabilities,
     pages,
     pageNumber,
-    totalCount: hasNoResults ? 0 : vulnerabilities.length,
+    totalCount: hasNoResults ? 0 : allVulnerabilities.length,
   }
 }
 
@@ -400,3 +429,205 @@ 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: GetImageVersionsQuery | undefined
+): 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: VulnerabilityEdge | null | undefined): edge is VulnerabilityEdge => edge != null && edge.node != null
+    )
+    .map((edge: VulnerabilityEdge) => {
+      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: ComponentInstanceEdge | null | undefined): edge is ComponentInstanceEdge =>
+        edge != null && edge.node != null
+    )
+    .map((edge: ComponentInstanceEdge) => {
+      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: GetImageVersionsQuery | undefined
+): { 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: node.remediationDate != null ? String(node.remediationDate) : null,
+        remediatedBy: node.remediatedBy ?? null,
+        expirationDate: node.expirationDate != null ? String(node.expirationDate) : null,
+      }
+    })
+
+  return {
+    remediatedVulnerabilities,
+  }
+}
diff --git a/apps/heureka/src/generated/graphql.ts b/apps/heureka/src/generated/graphql.ts
index 6f5e43b44e..fb5466fdb7 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] }
@@ -22,7 +21,6 @@ export type Activity = Node & {
   __typename?: "Activity"
   evidences?: Maybe<EvidenceConnection>
   id: Scalars["ID"]["output"]
-  issueMatchChanges?: Maybe<IssueMatchChangeConnection>
   issues?: Maybe<IssueConnection>
   metadata?: Maybe<Metadata>
   services?: Maybe<ServiceConnection>
@@ -35,12 +33,6 @@ export type ActivityEvidencesArgs = {
   first?: InputMaybe<Scalars["Int"]["input"]>
 }
 
-export type ActivityIssueMatchChangesArgs = {
-  after?: InputMaybe<Scalars["String"]["input"]>
-  filter?: InputMaybe<IssueMatchChangeFilter>
-  first?: InputMaybe<Scalars["Int"]["input"]>
-}
-
 export type ActivityIssuesArgs = {
   after?: InputMaybe<Scalars["String"]["input"]>
   filter?: InputMaybe<IssueFilter>
@@ -143,7 +135,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 +163,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 +180,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 +571,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>
@@ -659,7 +704,6 @@ export type IssueMatch = Node & {
   id: Scalars["ID"]["output"]
   issue: Issue
   issueId?: Maybe<Scalars["String"]["output"]>
-  issueMatchChanges?: Maybe<IssueMatchChangeConnection>
   metadata?: Maybe<Metadata>
   remediationDate?: Maybe<Scalars["DateTime"]["output"]>
   severity?: Maybe<Severity>
@@ -681,52 +725,6 @@ export type IssueMatchEvidencesArgs = {
   first?: InputMaybe<Scalars["Int"]["input"]>
 }
 
-export type IssueMatchIssueMatchChangesArgs = {
-  after?: InputMaybe<Scalars["String"]["input"]>
-  filter?: InputMaybe<IssueMatchChangeFilter>
-  first?: InputMaybe<Scalars["Int"]["input"]>
-}
-
-export type IssueMatchChange = Node & {
-  __typename?: "IssueMatchChange"
-  action?: Maybe<IssueMatchChangeActions>
-  activity: Activity
-  activityId?: Maybe<Scalars["String"]["output"]>
-  id: Scalars["ID"]["output"]
-  issueMatch: IssueMatch
-  issueMatchId?: Maybe<Scalars["String"]["output"]>
-  metadata?: Maybe<Metadata>
-}
-
-export enum IssueMatchChangeActions {
-  Add = "add",
-  Remove = "remove",
-}
-
-export type IssueMatchChangeConnection = Connection & {
-  __typename?: "IssueMatchChangeConnection"
-  edges?: Maybe<Array<Maybe<IssueMatchChangeEdge>>>
-  pageInfo?: Maybe<PageInfo>
-  totalCount: Scalars["Int"]["output"]
-}
-
-export type IssueMatchChangeEdge = Edge & {
-  __typename?: "IssueMatchChangeEdge"
-  cursor?: Maybe<Scalars["String"]["output"]>
-  node: IssueMatchChange
-}
-
-export type IssueMatchChangeFilter = {
-  action?: InputMaybe<Array<InputMaybe<IssueMatchChangeActions>>>
-  state?: InputMaybe<Array<StateFilter>>
-}
-
-export type IssueMatchChangeInput = {
-  action?: InputMaybe<IssueMatchChangeActions>
-  activityId?: InputMaybe<Scalars["String"]["input"]>
-  issueMatchId?: InputMaybe<Scalars["String"]["input"]>
-}
-
 export type IssueMatchConnection = Connection & {
   __typename?: "IssueMatchConnection"
   edges?: Maybe<Array<Maybe<IssueMatchEdge>>>
@@ -965,7 +963,6 @@ export type Mutation = {
   createEvidence: Evidence
   createIssue: Issue
   createIssueMatch: IssueMatch
-  createIssueMatchChange: IssueMatchChange
   createIssueRepository: IssueRepository
   createIssueVariant: IssueVariant
   createRemediation: Remediation
@@ -980,7 +977,6 @@ export type Mutation = {
   deleteEvidence: Scalars["String"]["output"]
   deleteIssue: Scalars["String"]["output"]
   deleteIssueMatch: Scalars["String"]["output"]
-  deleteIssueMatchChange: Scalars["String"]["output"]
   deleteIssueRepository: Scalars["String"]["output"]
   deleteIssueVariant: Scalars["String"]["output"]
   deleteRemediation: Scalars["String"]["output"]
@@ -1003,7 +999,6 @@ export type Mutation = {
   updateEvidence: Evidence
   updateIssue: Issue
   updateIssueMatch: IssueMatch
-  updateIssueMatchChange: IssueMatchChange
   updateIssueRepository: IssueRepository
   updateIssueVariant: IssueVariant
   updateRemediation: Remediation
@@ -1085,10 +1080,6 @@ export type MutationCreateIssueMatchArgs = {
   input: IssueMatchInput
 }
 
-export type MutationCreateIssueMatchChangeArgs = {
-  input: IssueMatchChangeInput
-}
-
 export type MutationCreateIssueRepositoryArgs = {
   input: IssueRepositoryInput
 }
@@ -1145,10 +1136,6 @@ export type MutationDeleteIssueMatchArgs = {
   id: Scalars["ID"]["input"]
 }
 
-export type MutationDeleteIssueMatchChangeArgs = {
-  id: Scalars["ID"]["input"]
-}
-
 export type MutationDeleteIssueRepositoryArgs = {
   id: Scalars["ID"]["input"]
 }
@@ -1253,11 +1240,6 @@ export type MutationUpdateIssueMatchArgs = {
   input: IssueMatchInput
 }
 
-export type MutationUpdateIssueMatchChangeArgs = {
-  id: Scalars["ID"]["input"]
-  input: IssueMatchChangeInput
-}
-
 export type MutationUpdateIssueRepositoryArgs = {
   id: Scalars["ID"]["input"]
   input: IssueRepositoryInput
@@ -1315,6 +1297,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,14 +1338,15 @@ export type Query = {
   ComponentVersions?: Maybe<ComponentVersionConnection>
   Components?: Maybe<ComponentConnection>
   Evidences?: Maybe<EvidenceConnection>
+  ImageVersions?: Maybe<ImageVersionConnection>
   Images?: Maybe<ImageConnection>
   IssueCounts?: Maybe<SeverityCounts>
-  IssueMatchChanges?: Maybe<IssueMatchChangeConnection>
   IssueMatchFilterValues?: Maybe<IssueMatchFilterValue>
   IssueMatches?: Maybe<IssueMatchConnection>
   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 +1390,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>
@@ -1385,12 +1406,6 @@ export type QueryIssueCountsArgs = {
   filter?: InputMaybe<IssueFilter>
 }
 
-export type QueryIssueMatchChangesArgs = {
-  after?: InputMaybe<Scalars["String"]["input"]>
-  filter?: InputMaybe<IssueMatchChangeFilter>
-  first?: InputMaybe<Scalars["Int"]["input"]>
-}
-
 export type QueryIssueMatchesArgs = {
   after?: InputMaybe<Scalars["String"]["input"]>
   filter?: InputMaybe<IssueMatchFilter>
@@ -1417,10 +1432,17 @@ 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>
   first?: InputMaybe<Scalars["Int"]["input"]>
+  orderBy?: InputMaybe<Array<InputMaybe<RemediationOrderBy>>>
 }
 
 export type QueryScannerRunsArgs = {
@@ -1467,6 +1489,7 @@ export type Remediation = Node & {
   remediationDate?: Maybe<Scalars["DateTime"]["output"]>
   service?: Maybe<Scalars["String"]["output"]>
   serviceId?: Maybe<Scalars["ID"]["output"]>
+  severity?: Maybe<SeverityValues>
   type?: Maybe<RemediationTypeValues>
   vulnerability?: Maybe<Scalars["String"]["output"]>
   vulnerabilityId?: Maybe<Scalars["ID"]["output"]>
@@ -1487,7 +1510,9 @@ export type RemediationEdge = Edge & {
 
 export type RemediationFilter = {
   image?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  search?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
   service?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
+  severity?: InputMaybe<Array<InputMaybe<SeverityValues>>>
   state?: InputMaybe<Array<StateFilter>>
   type?: InputMaybe<Array<InputMaybe<RemediationTypeValues>>>
   vulnerability?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
@@ -1500,12 +1525,26 @@ export type RemediationInput = {
   remediatedBy?: InputMaybe<Scalars["String"]["input"]>
   remediationDate?: InputMaybe<Scalars["DateTime"]["input"]>
   service?: InputMaybe<Scalars["String"]["input"]>
+  severity?: InputMaybe<SeverityValues>
   type?: InputMaybe<RemediationTypeValues>
   vulnerability?: InputMaybe<Scalars["String"]["input"]>
 }
 
+export type RemediationOrderBy = {
+  by?: InputMaybe<RemediationOrderByField>
+  direction?: InputMaybe<OrderDirection>
+}
+
+export enum RemediationOrderByField {
+  Severity = "severity",
+  Vulnerability = "vulnerability",
+}
+
 export enum RemediationTypeValues {
   FalsePositive = "false_positive",
+  Mitigation = "mitigation",
+  Rescore = "rescore",
+  RiskAccepted = "risk_accepted",
 }
 
 export type ScannerRun = Node & {
@@ -1600,6 +1639,7 @@ export type ServiceRemediationsArgs = {
   after?: InputMaybe<Scalars["String"]["input"]>
   filter?: InputMaybe<RemediationFilter>
   first?: InputMaybe<Scalars["Int"]["input"]>
+  orderBy?: InputMaybe<Array<InputMaybe<RemediationOrderBy>>>
 }
 
 export type ServiceSupportGroupsArgs = {
@@ -1887,6 +1927,7 @@ export type VulnerabilityFilter = {
   search?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
   service?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
   severity?: InputMaybe<Array<InputMaybe<SeverityValues>>>
+  status?: InputMaybe<VulnerabilityStatus>
   supportGroup?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>
 }
 
@@ -1897,6 +1938,162 @@ export type VulnerabilityFilterValue = {
   supportGroup?: Maybe<FilterItem>
 }
 
+export enum VulnerabilityStatus {
+  All = "all",
+  Open = "open",
+  Remediated = "remediated",
+}
+
+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
+    severity?: SeverityValues | 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
+        expirationDate?: any | null
+        remediationDate?: any | null
+        remediatedBy?: 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 +2343,130 @@ export type GetVulnerabilityFiltersQuery = {
   } | null
 }
 
+export const CreateRemediationDocument = gql`
+  mutation CreateRemediation($input: RemediationInput!) {
+    createRemediation(input: $input) {
+      id
+      description
+      expirationDate
+      image
+      imageId
+      remediatedBy
+      remediationDate
+      service
+      serviceId
+      severity
+      type
+      vulnerability
+      vulnerabilityId
+    }
+  }
+`
+export const DeleteRemediationDocument = gql`
+  mutation DeleteRemediation($id: ID!) {
+    deleteRemediation(id: $id)
+  }
+`
+export const GetRemediationsDocument = gql`
+  query GetRemediations($filter: RemediationFilter) {
+    Remediations(filter: $filter) {
+      edges {
+        node {
+          id
+          type
+          description
+          service
+          image
+          vulnerability
+          expirationDate
+          remediationDate
+          remediatedBy
+        }
+      }
+      totalCount
+    }
+  }
+`
+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 const GetImagesDocument = gql`
   query GetImages(
     $imgFilter: ImageFilter
@@ -2225,7 +2546,6 @@ export const GetImagesDocument = gql`
     }
   }
 `
-export type GetImagesQueryResult = Apollo.ApolloQueryResult<GetImagesQuery>
 export const GetServiceFiltersDocument = gql`
   query GetServiceFilters {
     ServiceFilterValues {
@@ -2242,7 +2562,6 @@ export const GetServiceFiltersDocument = gql`
     }
   }
 `
-export type GetServiceFiltersQueryResult = Apollo.ApolloQueryResult<GetServiceFiltersQuery>
 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 +2614,6 @@ export const GetServicesDocument = gql`
     }
   }
 `
-export type GetServicesQueryResult = Apollo.ApolloQueryResult<GetServicesQuery>
 export const GetVulnerabilitiesDocument = gql`
   query GetVulnerabilities(
     $filter: VulnerabilityFilter
@@ -2354,7 +2672,6 @@ export const GetVulnerabilitiesDocument = gql`
     }
   }
 `
-export type GetVulnerabilitiesQueryResult = Apollo.ApolloQueryResult<GetVulnerabilitiesQuery>
 export const GetVulnerabilityFiltersDocument = gql`
   query GetVulnerabilityFilters {
     VulnerabilityFilterValues {
@@ -2371,4 +2688,3 @@ export const GetVulnerabilityFiltersDocument = gql`
     }
   }
 `
-export type GetVulnerabilityFiltersQueryResult = Apollo.ApolloQueryResult<GetVulnerabilityFiltersQuery>
diff --git a/apps/heureka/src/graphql/Remediations/createRemediation.graphql b/apps/heureka/src/graphql/Remediations/createRemediation.graphql
new file mode 100644
index 0000000000..4e32a790d8
--- /dev/null
+++ b/apps/heureka/src/graphql/Remediations/createRemediation.graphql
@@ -0,0 +1,22 @@
+#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
+    severity
+    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..023be7d7ab
--- /dev/null
+++ b/apps/heureka/src/graphql/Remediations/getRemediations.graphql
@@ -0,0 +1,22 @@
+#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
+        expirationDate
+        remediationDate
+        remediatedBy
+      }
+    }
+    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 af6de7f0ac..2ff0e24d50 100644
--- a/apps/heureka/src/routeTree.gen.ts
+++ b/apps/heureka/src/routeTree.gen.ts
@@ -16,6 +16,7 @@ import { Route as VulnerabilitiesIndexRouteImport } from './routes/vulnerabiliti
 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',
@@ -53,6 +54,12 @@ const ServicesServiceImagesImageRoute =
     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
@@ -61,14 +68,16 @@ export interface FileRoutesByFullPath {
   '/services/$service': typeof ServicesServiceRouteWithChildren
   '/services/': typeof ServicesIndexRoute
   '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
+  '/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 ServicesServiceImagesImageRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -78,7 +87,8 @@ export interface FileRoutesById {
   '/services/$service': typeof ServicesServiceRouteWithChildren
   '/services/': typeof ServicesIndexRoute
   '/vulnerabilities/': typeof VulnerabilitiesIndexRoute
-  '/services/$service/images/$image': typeof ServicesServiceImagesImageRoute
+  '/services/$service/images/$image': typeof ServicesServiceImagesImageRouteWithChildren
+  '/services/$service/images/$image/versions/$version': typeof ServicesServiceImagesImageVersionsVersionRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -90,6 +100,7 @@ export interface FileRouteTypes {
     | '/services/'
     | '/vulnerabilities/'
     | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -97,6 +108,7 @@ export interface FileRouteTypes {
     | '/services'
     | '/vulnerabilities'
     | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
   id:
     | '__root__'
     | '/'
@@ -106,6 +118,7 @@ export interface FileRouteTypes {
     | '/services/'
     | '/vulnerabilities/'
     | '/services/$service/images/$image'
+    | '/services/$service/images/$image/versions/$version'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -165,15 +178,37 @@ declare module '@tanstack/react-router' {
       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 ServicesServiceImagesImageRoute
+  ServicesServiceImagesImageRoute: typeof ServicesServiceImagesImageRouteWithChildren
 }
 
 const ServicesServiceRouteChildren: ServicesServiceRouteChildren = {
-  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRoute,
+  ServicesServiceImagesImageRoute: ServicesServiceImagesImageRouteWithChildren,
 }
 
 const ServicesServiceRouteWithChildren = ServicesServiceRoute._addFileChildren(
diff --git a/apps/heureka/src/routes/services/$service.tsx b/apps/heureka/src/routes/services/$service.tsx
index 41d107e362..d2ce179f11 100644
--- a/apps/heureka/src/routes/services/$service.tsx
+++ b/apps/heureka/src/routes/services/$service.tsx
@@ -6,17 +6,32 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { Service } from "../../components/Service"
 import { fetchService } from "../../api/fetchService"
+import { NetworkStatus, ObservableQuery } from "@apollo/client"
+import { GetServicesQuery } from "../../generated/graphql"
 
 export const Route = createFileRoute("/services/$service")({
   shouldReload: false,
-  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<ObservableQuery.Result<GetServicesQuery>> = isOnImageOrVersionDetailsPage
+      ? Promise.resolve({
+          data: { Services: { edges: [], totalCount: 0, pageInfo: null } },
+          loading: false,
+          networkStatus: NetworkStatus.ready,
+          partial: false,
+        } as unknown as ObservableQuery.Result<GetServicesQuery>)
+      : 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
index 12f2ccd172..2480e79a0a 100644
--- a/apps/heureka/src/routes/services/$service/images/$image.tsx
+++ b/apps/heureka/src/routes/services/$service/images/$image.tsx
@@ -4,13 +4,22 @@
  */
 
 import React, { Suspense } from "react"
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, Outlet, useMatchRoute } from "@tanstack/react-router"
+import { z } from "zod"
 import { ImageDetails } from "../../../../components/Service/ImageDetails"
 import { fetchImages } from "../../../../api/fetchImages"
 import { Spinner } from "@cloudoperators/juno-ui-components"
 import { ErrorBoundary } from "../../../../components/common/ErrorBoundary"
 
+const imageDetailsSearchSchema = z.object({
+  vulnerabilitiesList: z.enum(["active", "remediated"]).default("active"),
+  vulRemediations: z.string().optional(),
+})
+
+export type ImageDetailsSearchParams = z.infer<typeof imageDetailsSearchSchema>
+
 export const Route = createFileRoute("/services/$service/images/$image")({
+  validateSearch: imageDetailsSearchSchema,
   shouldReload: false,
   loader: ({ context, params: { service, image } }) => {
     const { queryClient, apiClient } = context
@@ -22,6 +31,7 @@ export const Route = createFileRoute("/services/$service/images/$image")({
         service: [service],
         repository: [image],
       },
+      firstVersions: 100, // Fetch versions for the image
     })
 
     return {
@@ -37,11 +47,29 @@ export const Route = createFileRoute("/services/$service/images/$image")({
 function ImageDetailsPage() {
   const { imagesPromise } = Route.useLoaderData()
   const { service, image } = Route.useParams()
+  const search = Route.useSearch()
+  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 />
+  }
+
+  const vulnerabilitiesTab = search.vulnerabilitiesList
+  const vulRemediations = search.vulRemediations
 
+  // Otherwise, render the image details
   return (
     <ErrorBoundary displayErrorMessage>
       <Suspense fallback={<Spinner className="mt-4" />}>
-        <ImageDetails imagesPromise={imagesPromise} imageRepository={image} service={service} />
+        <ImageDetails
+          imagesPromise={imagesPromise}
+          imageRepository={image}
+          service={service}
+          vulnerabilitiesTab={vulnerabilitiesTab}
+          vulRemediations={vulRemediations}
+        />
       </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..726722369e
--- /dev/null
+++ b/apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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"
+import { getShortSha256 } from "../../../../../../utils"
+
+export const Route = createFileRoute("/services/$service/images/$image/versions/$version")({
+  shouldReload: false,
+  loader: ({ context, params: { service, image, version } }) => {
+    const { queryClient, apiClient } = context
+    const decodedService = decodeURIComponent(service)
+    const decodedImage = decodeURIComponent(image)
+    const decodedVersion = decodeURIComponent(version)
+    const imageVersionsPromise = fetchImageVersions({
+      queryClient,
+      apiClient,
+      filter: {
+        service: [decodedService],
+        repository: [decodedImage],
+        version: [decodedVersion],
+      },
+      firstVulnerabilities: 20,
+      firstOccurences: 100,
+    })
+
+    return {
+      imageVersionsPromise,
+      crumb: {
+        label: getShortSha256(decodedVersion),
+      },
+      decodedParams: { service: decodedService, image: decodedImage, version: decodedVersion },
+    }
+  },
+  component: ImageVersionDetailsPage,
+})
+
+function ImageVersionDetailsPage() {
+  const { imageVersionsPromise, decodedParams } = Route.useLoaderData()
+  const { service, image, version } = decodedParams
+
+  return (
+    <ErrorBoundary displayErrorMessage>
+      <Suspense fallback={<Spinner className="mt-4" />}>
+        <ImageVersionDetails
+          imageVersionsPromise={imageVersionsPromise}
+          imageVersion={version}
+          service={service}
+          imageRepository={image}
+        />
+      </Suspense>
+    </ErrorBoundary>
+  )
+}
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
+}
diff --git a/apps/heureka/turbo.json b/apps/heureka/turbo.json
index ad49bf44e1..ae8bcc7cc4 100644
--- a/apps/heureka/turbo.json
+++ b/apps/heureka/turbo.json
@@ -2,19 +2,34 @@
   "extends": ["//"],
   "tasks": {
     "dev": {
-      "dependsOn": ["@cloudoperators/juno-ui-components#build", "@cloudoperators/juno-url-state-provider#build"]
+      "dependsOn": [
+        "@cloudoperators/juno-ui-components#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-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-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-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-url-state-provider#build"
+      ]
     }
   }
 }
diff --git a/packages/url-state-provider/package.json b/packages/url-state-provider/package.json
index 4caa357af3..afd1683fd6 100644
--- a/packages/url-state-provider/package.json
+++ b/packages/url-state-provider/package.json
@@ -22,6 +22,7 @@
     "build"
   ],
   "license": "Apache-2.0",
+  "type": "module",
   "engines": {
     "node": ">=20.0.0",
     "pnpm": ">=8.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e99b2828f..dfc9c54c67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -742,7 +742,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.8.0)
       eslint-plugin-react:
         specifier: 7.37.5
         version: 7.37.5(eslint@9.39.2(jiti@2.6.1))
@@ -766,10 +766,10 @@ importers:
         version: 7.3.1(@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.1(@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.1(@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.7(@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.7(@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 +915,7 @@ importers:
         version: 4.7.0(vite@7.3.1(@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.17
-        version: 9.1.17(eslint@9.35.0(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.7(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.8.0)(vite@7.3.1(@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.17(eslint@9.39.2(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.7(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.8.0)(vite@7.3.1(@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
@@ -2712,36 +2712,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -2862,56 +2868,67 @@ packages:
     resolution: {integrity: sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.50.1':
     resolution: {integrity: sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.50.1':
     resolution: {integrity: sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.50.1':
     resolution: {integrity: sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.50.1':
     resolution: {integrity: sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.50.1':
     resolution: {integrity: sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.50.1':
     resolution: {integrity: sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.50.1':
     resolution: {integrity: sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.50.1':
     resolution: {integrity: sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.50.1':
     resolution: {integrity: sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.50.1':
     resolution: {integrity: sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.50.1':
     resolution: {integrity: sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==}
@@ -3175,24 +3192,28 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.12.14':
     resolution: {integrity: sha512-ZkOOIpSMXuPAjfOXEIAEQcrPOgLi6CaXvA5W+GYnpIpFG21Nd0qb0WbwFRv4K8BRtl993Q21v0gPpOaFHU+wdA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.12.14':
     resolution: {integrity: sha512-71EPPccwJiJUxd2aMwNlTfom2mqWEWYGdbeTju01tzSHsEuD7E6ePlgC3P3ngBqB3urj41qKs87z7zPOswT5Iw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.12.14':
     resolution: {integrity: sha512-nImF1hZJqKTcl0WWjHqlelOhvuB9rU9kHIw/CmISBUZXogjLIvGyop1TtJNz0ULcz2Oxr3Q2YpwfrzsgvgbGkA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.12.14':
     resolution: {integrity: sha512-sABFQFxSuStFoxvEWZUHWYldtB1B4A9eDNFd4Ty50q7cemxp7uoscFoaCqfXSGNBwwBwpS5EiPB6YN4y6hqmLQ==}
@@ -3268,24 +3289,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -5553,24 +5578,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -10704,13 +10733,13 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.51.0(eslint@9.35.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.51.0(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.51.0
       '@typescript-eslint/types': 8.51.0
       '@typescript-eslint/typescript-estree': 8.51.0(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
@@ -10771,15 +10800,6 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(msw@2.12.7(@types/node@24.10.4)(typescript@5.9.2))(vite@7.3.1(@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.7(@types/node@24.10.4)(typescript@5.9.2)
-      vite: 7.3.1(@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.7(@types/node@24.10.4)(typescript@5.9.3))(vite@7.3.1(@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
@@ -10856,19 +10876,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
@@ -11944,16 +11951,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.8.0):
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
@@ -11990,10 +11987,10 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@9.1.17(eslint@9.35.0(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.7(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.8.0)(vite@7.3.1(@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.17(eslint@9.39.2(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(msw@2.12.7(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.8.0)(vite@7.3.1(@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.51.0(eslint@9.35.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.35.0(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.51.0(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.7(@types/node@24.10.4)(typescript@5.9.3))(prettier@3.8.0)(vite@7.3.1(@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
@@ -13519,32 +13516,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msw@2.12.7(@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.7(@types/node@24.10.4)(typescript@5.9.3):
     dependencies:
       '@inquirer/confirm': 5.1.10(@types/node@24.10.4)
@@ -14977,25 +14948,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.1(@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.1(@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.1(@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)
@@ -15063,50 +15015,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.7(@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.7(@types/node@24.10.4)(typescript@5.9.2))(vite@7.3.1(@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.1(@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.7(@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