diff --git a/frontend/src/pages/Risk/VulnerabilityPieChart.tsx b/frontend/src/pages/Risk/VulnerabilityPieChart.tsx
index a0f09a3c..cc39f517 100644
--- a/frontend/src/pages/Risk/VulnerabilityPieChart.tsx
+++ b/frontend/src/pages/Risk/VulnerabilityPieChart.tsx
@@ -1,9 +1,16 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { ResponsivePie } from '@nivo/pie';
+import {
+  ResponsivePie,
+  ComputedDatum,
+  PieTooltipProps,
+  PieCustomLayerProps,
+  ResponsivePieCanvas
+} from '@nivo/pie';
 import { Paper } from '@mui/material';
 import { Point } from './Risk';
 import * as RiskStyles from './style';
+import { arc } from 'd3-shape';
 
 const VulnerabilityPieChart = (props: {
   title: string;
@@ -14,20 +21,77 @@ const VulnerabilityPieChart = (props: {
   const history = useHistory();
   const { title, data, colors, type } = props;
   const { cardRoot, cardSmall, header, chartSmall } = RiskStyles.classesRisk;
+
+  // console.log('VulnerabilityPieChart props:', props); // Debugging
+
+  // const getTooltip = ({ datum }: PieTooltipProps<any>) => {
+  //   const totalValue = data.reduce((acc, curr) => acc + curr.value, 0);
+  //   const percentage = ((datum.value / totalValue) * 100).toFixed(2);
+  //   return (
+  //     <div
+  //       role="tooltip"
+  //       aria-label={`${datum.id}: ${datum.value} (${percentage}%)`}
+  //     >
+  //       <strong>
+  //         {datum.id}: {datum.value} ({percentage}%)
+  //       </strong>
+  //     </div>
+  //   );
+  // };
+
+  // const customLayer = (props: PieCustomLayerProps<any>) => {
+  //   const pieArc = arc<any>()
+  //     .innerRadius(0)
+  //     .outerRadius(Math.min(props.centerX, props.centerY));
+
+  //   return (
+  //     <g>
+  //       {props.dataWithArc.map((arcDatum) => {
+  //         const centroid = pieArc.centroid(arcDatum.arc);
+  //         const percentage = (
+  //           (arcDatum.value / data.reduce((acc, curr) => acc + curr.value, 0)) *
+  //           100
+  //         ).toFixed(2);
+  //         return (
+  //           <g
+  //             key={arcDatum.id}
+  //             transform={`translate(${centroid[0]},${centroid[1]})`}
+  //           ></g>
+  //         );
+  //       })}
+  //     </g>
+  //   );
+  // };
+
+  const ariaLabel =
+    `${title} pie chart. ` +
+    data
+      .map(
+        (point) =>
+          `${point.id}: ${point.value} (${(
+            (point.value / data.reduce((acc, curr) => acc + curr.value, 0)) *
+            100
+          ).toFixed(2)}%)`
+      )
+      .join(', ');
+
   return (
     <Paper elevation={0} className={cardRoot}>
       <div className={cardSmall}>
         <div className={header}>
           <h2>{title}</h2>
         </div>
-        <div className={chartSmall}>
-          <ResponsivePie
+        <div className={chartSmall} aria-label={ariaLabel}>
+          {/* <div role="img" aria-label={ariaLabel}> */}
+          <ResponsivePieCanvas
             data={data as any}
             innerRadius={0.5}
             padAngle={0.7}
-            arcLabelsSkipAngle={10}
-            arcLinkLabelsSkipAngle={10}
             colors={colors}
+            cornerRadius={3}
+            sortByValue={true}
+            activeOuterRadiusOffset={8}
+            borderWidth={1}
             margin={{
               left: 30,
               right: 50,
@@ -39,10 +103,144 @@ const VulnerabilityPieChart = (props: {
                 history.push(`/inventory/vulnerabilities?severity=${event.id}`);
               }
             }}
+            // arcLabel={(datum) => `${datum.id} (${datum.value})`}
+            // arcLinkLabel={(datum) => `${datum.id}: ${datum.value}`}
+            arcLabel={(datum) => `(${datum.value})`}
+            arcLabelsSkipAngle={10}
+            arcLabelsTextColor={{
+              from: 'color',
+              modifiers: [['darker', 3]]
+            }}
+            arcLinkLabelsSkipAngle={10}
+            arcLinkLabel={(datum) => `${datum.id}`}
+            arcLinkLabelsThickness={3}
+            arcLinkLabelsColor={{ from: 'color' }}
+            arcLinkLabelsTextColor={{
+              from: 'color',
+              modifiers: [['darker', 3]]
+            }}
+            defs={[
+              {
+                id: 'dots',
+                type: 'patternDots',
+                background: 'inherit',
+                color: 'rgba(255, 255, 255, 0.3)',
+                size: 4,
+                padding: 1,
+                stagger: true
+              },
+              {
+                id: 'lines',
+                type: 'patternLines',
+                background: 'inherit',
+                color: 'rgba(255, 255, 255, 0.3)',
+                rotation: -45,
+                lineWidth: 6,
+                spacing: 10
+              }
+            ]}
+            fill={[
+              {
+                match: {
+                  id: 'High'
+                },
+                id: 'dots'
+              },
+              {
+                match: {
+                  id: 'Medium'
+                },
+                id: 'dots'
+              },
+              {
+                match: {
+                  id: 'Low'
+                },
+                id: 'dots'
+              },
+              {
+                match: {
+                  id: 'Critical'
+                },
+                id: 'dots'
+              },
+              {
+                match: {
+                  id: 'scala'
+                },
+                id: 'lines'
+              },
+              {
+                match: {
+                  id: 'lisp'
+                },
+                id: 'lines'
+              },
+              {
+                match: {
+                  id: 'elixir'
+                },
+                id: 'lines'
+              },
+              {
+                match: {
+                  id: 'javascript'
+                },
+                id: 'lines'
+              }
+            ]}
+            // legends={[
+            //   {
+            //     anchor: 'right',
+            //     direction: 'column',
+            //     justify: false,
+            //     translateX: 60,
+            //     translateY: 56,
+            //     itemsSpacing: 6,
+            //     itemWidth: 100,
+            //     itemHeight: 18,
+            //     itemTextColor: '#999',
+            //     itemDirection: 'left-to-right',
+            //     itemOpacity: 1,
+            //     symbolSize: 18,
+            //     symbolShape: 'circle',
+            //     effects: [
+            //       {
+            //         on: 'hover',
+            //         style: {
+            //           itemTextColor: '#000'
+            //         }
+            //       }
+            //     ]
+            //   }
+            // ]}
+            legends={[
+              {
+                anchor: 'bottom-left',
+                direction: 'column',
+                justify: false,
+                translateX: 0,
+                translateY: 0,
+                itemWidth: 25,
+                itemHeight: 20,
+                itemsSpacing: 0,
+                symbolSize: 20,
+                itemDirection: 'left-to-right'
+              }
+            ]}
+            layers={[
+              'arcs',
+              'arcLabels',
+              'arcLinkLabels',
+              'legends'
+              //customLayer
+            ]}
           />
+          {/* </div> */}
         </div>
       </div>
     </Paper>
   );
 };
+
 export default VulnerabilityPieChart;