diff --git a/inventory/src/components/dashboard/PurchaseMetrics.tsx b/inventory/src/components/dashboard/PurchaseMetrics.tsx
index 4a7ce67..6a015da 100644
--- a/inventory/src/components/dashboard/PurchaseMetrics.tsx
+++ b/inventory/src/components/dashboard/PurchaseMetrics.tsx
@@ -33,7 +33,7 @@ const COLORS = [
 ]
 
 const renderActiveShape = (props: any) => {
-  const { cx, cy, innerRadius, vendor, cost } = props;
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, vendor, cost } = props;
   
   // Split vendor name into words and create lines of max 12 chars
   const words = vendor.split(' ');
@@ -52,6 +52,24 @@ const renderActiveShape = (props: any) => {
 
   return (
     <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius - 1}
+        outerRadius={outerRadius + 4}
+        fill={fill}
+      />
       {lines.map((line, i) => (
         <text 
           key={i}
@@ -75,7 +93,6 @@ const renderActiveShape = (props: any) => {
       >
         {formatCurrency(cost)}
       </text>
-      {props.children}
     </g>
   );
 };
@@ -149,9 +166,9 @@ export function PurchaseMetrics() {
             </div>
           </div>
           <div className="flex-1">
-            <div className="flex flex-col">
+            <div className="flex flex-col gap-1">
               <div className="text-md flex justify-center font-medium">Purchase Orders By Vendor</div>
-              <div className="h-[200px]">
+              <div className="h-[180px]">
                 <ResponsiveContainer width="100%" height="100%">
                   <PieChart>
                     <Pie
@@ -162,7 +179,7 @@ export function PurchaseMetrics() {
                       cy="50%"
                       innerRadius={60}
                       outerRadius={80}
-                      paddingAngle={2}
+                      paddingAngle={1}
                       activeIndex={activeIndex}
                       activeShape={renderActiveShape}
                       onMouseEnter={(_, index) => setActiveIndex(index)}
@@ -171,7 +188,7 @@ export function PurchaseMetrics() {
                       {data?.vendorOrders?.map((entry, index) => (
                         <Cell 
                           key={entry.vendor}
-                          fill={COLORS[index % COLORS.length]} 
+                          fill={COLORS[index % COLORS.length]}
                         />
                       ))}
                     </Pie>
diff --git a/inventory/src/components/dashboard/StockMetrics.tsx b/inventory/src/components/dashboard/StockMetrics.tsx
index 108a80a..62c53e3 100644
--- a/inventory/src/components/dashboard/StockMetrics.tsx
+++ b/inventory/src/components/dashboard/StockMetrics.tsx
@@ -33,7 +33,7 @@ const COLORS = [
 ]
 
 const renderActiveShape = (props: any) => {
-  const { cx, cy, innerRadius, brand, retail } = props;
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, brand, retail } = props;
   
   // Split brand name into words and create lines of max 12 chars
   const words = brand.split(' ');
@@ -52,6 +52,24 @@ const renderActiveShape = (props: any) => {
 
   return (
     <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius - 1}
+        outerRadius={outerRadius + 4}
+        fill={fill}
+      />
       {lines.map((line, i) => (
         <text 
           key={i}
@@ -75,7 +93,6 @@ const renderActiveShape = (props: any) => {
       >
         {formatCurrency(retail)}
       </text>
-      {props.children}
     </g>
   );
 };
@@ -149,9 +166,9 @@ export function StockMetrics() {
             </div>
           </div>
           <div className="flex-1">
-            <div className="flex flex-col">
-              <div className="text-md flex justify-center font-medium ">Stock Retail By Brand</div>
-              <div className="h-[200px]">
+            <div className="flex flex-col gap-1">
+              <div className="text-md flex justify-center font-medium">Stock Retail By Brand</div>
+              <div className="h-[180px]">
                 <ResponsiveContainer width="100%" height="100%">
                   <PieChart>
                     <Pie
@@ -162,7 +179,7 @@ export function StockMetrics() {
                       cy="50%"
                       innerRadius={60}
                       outerRadius={80}
-                      paddingAngle={2}
+                      paddingAngle={1}
                       activeIndex={activeIndex}
                       activeShape={renderActiveShape}
                       onMouseEnter={(_, index) => setActiveIndex(index)}
@@ -172,7 +189,6 @@ export function StockMetrics() {
                         <Cell 
                           key={entry.brand}
                           fill={COLORS[index % COLORS.length]}
-                          style={{ filter: activeIndex === index ? 'brightness(1.2)' : undefined }}
                         />
                       ))}
                     </Pie>