diff --git a/src/components/risk-handling/RiskHandlingRow.tsx b/src/components/risk-handling/RiskHandlingRow.tsx
new file mode 100644
index 0000000..5adeef0
--- /dev/null
+++ b/src/components/risk-handling/RiskHandlingRow.tsx
@@ -0,0 +1,118 @@
+// Copyright (C) 2024 Tim Bastin, l3montree UG (haftungsbeschränkt)
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { FlawByPackage } from "@/types/api/api";
+import { classNames } from "@/utils/common";
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { flexRender, Row } from "@tanstack/react-table";
+import React, { FunctionComponent } from "react";
+import FlawState from "../common/FlawState";
+import { useRouter } from "next/router";
+
+interface Props {
+  row: Row<FlawByPackage>;
+  index: number;
+  arrLength: number;
+}
+const RiskHandlingRow: FunctionComponent<Props> = ({
+  row,
+  index,
+  arrLength,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const router = useRouter();
+  return (
+    <>
+      <tr
+        onClick={() => setIsOpen((prev) => !prev)}
+        className={classNames(
+          "relative cursor-pointer align-top transition-all",
+          index === arrLength - 1 || isOpen ? "" : "border-b",
+          index % 2 != 0 && "bg-card",
+          "hover:bg-gray-50 dark:hover:bg-secondary",
+        )}
+        key={row.id}
+      >
+        <td className="text-center align-middle">
+          {isOpen ? (
+            <ChevronDownIcon className="mx-auto w-4 text-muted-foreground" />
+          ) : (
+            <ChevronRightIcon className="mx-auto w-4 text-muted-foreground" />
+          )}
+        </td>
+        {row.getVisibleCells().map((cell, i) => (
+          <td className="p-4" key={cell.id}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </td>
+        ))}
+      </tr>
+      {isOpen && (
+        <tr
+          className={classNames(
+            "relative cursor-pointer bg-background align-top transition-all",
+            index === arrLength - 1 ? "" : "border-b",
+            index % 2 != 0 && "bg-card",
+          )}
+        >
+          <td colSpan={6}>
+            <div className="m-2 ml-12">
+              <table className="w-full table-fixed rounded border">
+                <thead
+                  className={classNames(
+                    "w-full text-left",
+                    index % 2 == 0 ? "bg-card" : "bg-background",
+                  )}
+                >
+                  <tr className="">
+                    <th className="w-40 p-4">State</th>
+                    <th className="w-40 p-4">CVE</th>
+                    <th className="w-40 p-4">Risk</th>
+                    <th className="w-full p-4">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {row.original.flaws?.map((flaw) => (
+                    <tr
+                      onClick={() =>
+                        router.push(router.asPath + "/../flaws/" + flaw.id)
+                      }
+                      className="border-b align-baseline             hover:bg-gray-50 dark:hover:bg-secondary"
+                      key={flaw.id}
+                    >
+                      <td className="p-4">
+                        <div className="flex flex-row">
+                          <FlawState state={flaw.state} />
+                        </div>
+                      </td>
+                      <td className="p-4">{flaw.cveId}</td>
+                      <td className="p-4">{flaw.rawRiskAssessment}</td>
+                      <td className="p-4" colSpan={2}>
+                        <div className="line-clamp-3">
+                          {flaw.cve?.description}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
+
+export default RiskHandlingRow;
diff --git a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/risk-handling.tsx b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/risk-handling.tsx
index 482a3e3..eeb97c6 100644
--- a/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/risk-handling.tsx
+++ b/src/pages/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/risk-handling.tsx
@@ -1,6 +1,3 @@
-import DateString from "@/components/common/DateString";
-import Filter from "@/components/common/Filter";
-import FlawState from "@/components/common/FlawState";
 import SortingCaret from "@/components/common/SortingCaret";
 import { middleware } from "@/decorators/middleware";
 import { withAsset } from "@/decorators/withAsset";
@@ -9,16 +6,8 @@ import { useActiveAsset } from "@/hooks/useActiveAsset";
 import { useActiveOrg } from "@/hooks/useActiveOrg";
 import { useActiveProject } from "@/hooks/useActiveProject";
 import { useAssetMenu } from "@/hooks/useAssetMenu";
-import { useColumnVisibility } from "@/hooks/useColumnVisibility";
 import useFilter from "@/hooks/useFilter";
-import {
-  FilterableColumnDef,
-  dateOperators,
-  numberOperators,
-  stringOperators,
-} from "@/services/filter";
-import { AssetDTO, FlawWithCVE, Paged } from "@/types/api/api";
-import { ViewColumnsIcon } from "@heroicons/react/24/outline";
+import { AssetDTO, FlawByPackage, FlawWithCVE, Paged } from "@/types/api/api";
 import {
   createColumnHelper,
   flexRender,
@@ -34,109 +23,29 @@ import Page from "../../../../../../components/Page";
 import { withOrgs } from "../../../../../../decorators/withOrgs";
 import { withSession } from "../../../../../../decorators/withSession";
 import { getApiClientFromContext } from "../../../../../../services/devGuardApi";
-import {
-  beautifyPurl,
-  classNames,
-  extractVersion,
-} from "../../../../../../utils/common";
+import { beautifyPurl, classNames } from "../../../../../../utils/common";
 
 import CustomPagination from "@/components/common/CustomPagination";
 import EcosystemImage from "@/components/common/EcosystemImage";
 import EmptyList from "@/components/common/EmptyList";
 import Section from "@/components/common/Section";
 import { Badge } from "@/components/ui/badge";
-import { buttonVariants } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { withOrganization } from "@/decorators/withOrganization";
 import { debounce } from "lodash";
 import { Loader2 } from "lucide-react";
+import RiskHandlingRow from "@/components/risk-handling/RiskHandlingRow";
 
 interface Props {
   asset: AssetDTO;
-  flaws: Paged<FlawWithCVE>;
+  flaws: Paged<FlawByPackage>;
 }
 
-const columnHelper = createColumnHelper<FlawWithCVE>();
+const columnHelper = createColumnHelper<FlawByPackage>();
 
 const columnsDef = [
   {
-    ...columnHelper.accessor("state", {
-      header: "State",
-      enableSorting: true,
-      id: "state",
-      cell: (row) => (
-        <div className="flex flex-row">
-          <FlawState state={row.getValue()} />
-        </div>
-      ),
-    }),
-    operators: stringOperators,
-    filterValues: ["open", "fixed", "ignored"],
-  },
-  {
-    ...columnHelper.accessor("cve.cve", {
-      header: "CVE",
-      enableSorting: true,
-      id: "cve.cve",
-      cell: (row) => (
-        <div>
-          <span className="whitespace-nowrap">{row.getValue()}</span>
-        </div>
-      ),
-    }),
-  },
-  {
-    ...columnHelper.accessor("rawRiskAssessment", {
-      header: "Risk",
-      id: "rawRiskAssessment",
-      enableSorting: true,
-      cell: (row) => row.getValue(),
-    }),
-  },
-  {
-    ...columnHelper.accessor("cve.cisaExploitAdd", {
-      header: "CISA Exploit Add",
-      id: "cve.cisaExploitAdd",
-      enableSorting: true,
-      cell: (row) => {
-        const value = row.getValue();
-        if (!value) {
-          return null;
-        }
-        return <DateString date={new Date(value)} />;
-      },
-    }),
-  },
-  {
-    ...columnHelper.accessor("cve.cisaActionDue", {
-      header: "CISA Action Due",
-      id: "cve.cisaActionDue",
-      enableSorting: true,
-      cell: (row) => {
-        const value = row.getValue();
-        if (!value) {
-          return null;
-        }
-        return <DateString date={new Date(value)} />;
-      },
-    }),
-  },
-  {
-    ...columnHelper.accessor("cve.cisaRequiredAction", {
-      header: "CISA Required Action",
-      id: "cve.cisaRequiredAction",
-      enableSorting: true,
-      cell: (row) => row.getValue(),
-    }),
-  },
-  {
-    ...columnHelper.accessor("arbitraryJsonData.packageName", {
+    ...columnHelper.accessor("packageName", {
       header: "Package",
       id: "packageName",
       cell: (row) => (
@@ -149,110 +58,57 @@ const columnsDef = [
       ),
     }),
   },
+
   {
-    ...columnHelper.accessor("component.purlOrCpe", {
-      header: "Installed Version",
-      id: "installedVersion",
-      cell: (row) => (
-        <span className="whitespace-nowrap">
-          {extractVersion(row.getValue())}
-        </span>
-      ),
-    }),
-  },
-  {
-    ...columnHelper.accessor("arbitraryJsonData.fixedVersion", {
-      header: "Fixed in Version",
-      id: "fixedVersion",
-      cell: (row) => (
-        <span className="whitespace-nowrap">
-          {beautifyPurl(row.getValue() as string)}
-        </span>
-      ),
-    }),
-  },
-  {
-    ...columnHelper.accessor("cve.description", {
-      header: "Message",
-      id: "message",
+    ...columnHelper.accessor("maxRisk", {
+      header: "Max Risk",
       enableSorting: true,
+      id: "max_risk",
       cell: (row) => (
-        <div className="line-clamp-3 max-w-5xl">
-          <p>{row.getValue()}</p>
+        <div>
+          <span className="whitespace-nowrap">{row.getValue()}</span>
         </div>
       ),
     }),
   },
   {
-    ...columnHelper.accessor("cve.cvss", {
-      header: "Base CVSS",
+    ...columnHelper.accessor("avgRisk", {
+      header: "Average Risk",
+      id: "avg_risk",
       enableSorting: true,
-      id: "cve.cvss",
-      cell: (row) => row.getValue(),
+      cell: (row) => row.getValue().toFixed(2),
     }),
-    operators: numberOperators,
   },
   {
-    ...columnHelper.accessor("cve.severity", {
-      header: "Severity",
+    ...columnHelper.accessor("totalRisk", {
+      header: "Total Risk",
+      id: "total_risk",
       enableSorting: true,
-      id: "cve.severity",
-      cell: (row) => (
-        <span className="whitespace-nowrap">{row.getValue()}</span>
-      ),
+      cell: (row) => row.getValue().toFixed(2),
     }),
   },
   {
-    ...columnHelper.accessor("cve.epss", {
-      header: "Exploit Prediction Scoring System",
-      id: "cve.epss",
+    ...columnHelper.accessor("flawCount", {
+      header: "Flaw Count",
+      id: "flaw_count",
       enableSorting: true,
       cell: (row) => row.getValue(),
     }),
-    operators: numberOperators,
-  },
-
-  {
-    ...columnHelper.accessor("createdAt", {
-      header: "First reported",
-      id: "createdAt",
-      enableSorting: true,
-      cell: (row) => (
-        <span className="whitespace-nowrap">
-          <DateString date={new Date(row.getValue())} />
-        </span>
-      ),
-    }),
-    operators: dateOperators,
   },
 ];
 
 const Index: FunctionComponent<Props> = (props) => {
   const { sortingState, handleSort } = useFilter();
-  const { visibleColumns, setVisibleColumns } = useColumnVisibility(
-    "scaTable",
-    {
-      "cve.cisaActionDue": false,
-      "cve.cisaExploitAdd": false,
-      "cve.cisaRequiredAction": false,
-      "cve.severity": false,
-      "cve.epss": false,
-      "cve.cvss": false,
-      "cve.createdAt": false,
-    },
-  );
+
   const table = useReactTable({
     columns: columnsDef,
     data: props.flaws.data,
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: handleSort,
-    onColumnVisibilityChange: (v) => {
-      setVisibleColumns(v);
-    },
+
     manualSorting: true,
     state: {
       sorting: sortingState,
-      columnVisibility: visibleColumns,
     },
   });
 
@@ -360,43 +216,6 @@ const Index: FunctionComponent<Props> = (props) => {
           forceVertical
           title="Identified Risks"
           description="This table shows all the identified risks for this asset."
-          Button={
-            <div className="mb-4 flex flex-row gap-2">
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  className={buttonVariants({
-                    variant: "secondary",
-                  })}
-                >
-                  <ViewColumnsIcon className="mr-2 h-4 w-4" />
-                  Columns
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  {table.getAllLeafColumns().map((column) => {
-                    return (
-                      <DropdownMenuCheckboxItem
-                        checked={visibleColumns[column.id] !== false}
-                        onCheckedChange={() =>
-                          setVisibleColumns((prev) => ({
-                            ...prev,
-                            [column.id]: !prev[column.id],
-                          }))
-                        }
-                        key={column.id}
-                      >
-                        {(column.columnDef.header as string) ?? ""}
-                      </DropdownMenuCheckboxItem>
-                    );
-                  })}
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <Filter
-                columnsDef={columnsDef.filter(
-                  (c): c is FilterableColumnDef => "operators" in c,
-                )}
-              />
-            </div>
-          }
         >
           <div className="relative">
             <Input
@@ -416,6 +235,7 @@ const Index: FunctionComponent<Props> = (props) => {
                 <thead className="border-b bg-card text-foreground">
                   {table.getHeaderGroups().map((headerGroup) => (
                     <tr key={headerGroup.id}>
+                      <th className="w-6" />
                       {headerGroup.headers.map((header) => (
                         <th
                           className="w-40 cursor-pointer break-normal p-4 text-left"
@@ -445,27 +265,12 @@ const Index: FunctionComponent<Props> = (props) => {
                 </thead>
                 <tbody className="text-sm text-foreground">
                   {table.getRowModel().rows.map((row, i, arr) => (
-                    <tr
-                      onClick={() => {
-                        router.push(r + "/flaws/" + row.original.id);
-                      }}
-                      className={classNames(
-                        "relative cursor-pointer align-top transition-all",
-                        i === arr.length - 1 ? "" : "border-b",
-                        i % 2 != 0 && "bg-card",
-                        "hover:bg-gray-50 dark:hover:bg-secondary",
-                      )}
-                      key={row.id}
-                    >
-                      {row.getVisibleCells().map((cell, i) => (
-                        <td className="p-4" key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
-                        </td>
-                      ))}
-                    </tr>
+                    <RiskHandlingRow
+                      row={row}
+                      index={i}
+                      arrLength={arr.length}
+                      key={row.original.packageName}
+                    />
                   ))}
                 </tbody>
               </table>
diff --git a/src/types/api/api.ts b/src/types/api/api.ts
index 51c2ec6..95bc60e 100644
--- a/src/types/api/api.ts
+++ b/src/types/api/api.ts
@@ -299,3 +299,12 @@ export interface AffectedPackage {
   PackageName: string;
   PurlWithVersion: string;
 }
+
+export interface FlawByPackage {
+  packageName: string;
+  maxRisk: number;
+  totalRisk: number;
+  flawCount: number;
+  avgRisk: number;
+  flaws: FlawWithCVE[];
+}
diff --git a/src/utils/common.ts b/src/utils/common.ts
index e91813c..e16de61 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -143,6 +143,9 @@ export const getEcosystem = (packageName: string) => {
 };
 
 export const beautifyPurl = (purl: string) => {
+  if (!purl) {
+    return "";
+  }
   const parts = purl.split("@");
   let first = parts[0];
   // remove everything before the first slash