diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
index 12849dc65..43e18ab6e 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
@@ -47,4 +47,11 @@
   @media (max-width: 420px) {
     padding-left: 0;
   }
+}
+
+::ng-deep .chart {
+  overflow: visible;
+  & > div, & > div > svg {
+    overflow: visible !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
index 2d94cad50..c957a4837 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
@@ -4,6 +4,17 @@ import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.inte
 import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
 import { MiningStats } from '../../../services/mining.service';
 
+function lighten(color, p): { r, g, b } {
+  return {
+    r: color.r + ((255 - color.r) * p),
+    g: color.g + ((255 - color.g) * p),
+    b: color.b + ((255 - color.b) * p),
+  };
+}
+
+function toRGB({r,g,b}): string {
+  return `rgb(${r},${g},${b})`;
+}
 
 @Component({
   selector: 'app-active-acceleration-box',
@@ -43,57 +54,32 @@ export class ActiveAccelerationBox implements OnChanges {
       pools[pool.poolUniqueId] = pool;
     }
 
-    const getDataItem = (value, color, tooltip) => ({
+    const getDataItem = (value, color, tooltip, emphasis) => ({
       value,
+      name: tooltip,
       itemStyle: {
         color,
-        borderColor: 'rgba(0,0,0,0)',
-        borderWidth: 1,
       },
-      avoidLabelOverlap: false,
-      label: {
-        show: false,
-      },
-      labelLine: {
-        show: false
-      },
-      emphasis: {
-        disabled: true,
-      },
-      tooltip: {
-        show: true,
-        backgroundColor: 'rgba(17, 19, 31, 1)',
-        borderRadius: 4,
-        shadowColor: 'rgba(0, 0, 0, 0.5)',
-        textStyle: {
-          color: 'var(--tooltip-grey)',
-        },
-        borderColor: '#000',
-        formatter: () => {
-          return tooltip;
-        }
-      }
     });
 
-    let totalAcceleratedHashrate = 0;
-    for (const poolId of poolList || []) {
+    const acceleratingPools = (poolList || []).filter(id => pools[id]).sort((a,b) => pools[a].lastEstimatedHashrate - pools[b].lastEstimatedHashrate);
+    const totalAcceleratedHashrate = acceleratingPools.reduce((total, pool) => total + pools[pool].lastEstimatedHashrate, 0);
+    acceleratingPools.forEach((poolId, index) => {
       const pool = pools[poolId];
-      if (!pool) {
-        continue;
-      }
-      totalAcceleratedHashrate += pool.lastEstimatedHashrate;
-    }
+      data.push(getDataItem(
+        pool.lastEstimatedHashrate,
+        toRGB(lighten({ r: 147, g: 57, b: 244 }, index * .08)),
+        `${((pool.lastEstimatedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1)}% ${pool.name} accelerating`,
+        true,
+      ) as PieSeriesOption);
+    })
     this.acceleratedByPercentage = ((totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1) + '%';
-    data.push(getDataItem(
-      totalAcceleratedHashrate,
-      'var(--mainnet-alt)',
-      `${this.acceleratedByPercentage} accelerating`,
-    ) as PieSeriesOption);
     const notAcceleratedByPercentage = ((1 - (totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate)) * 100).toFixed(1) + '%';
     data.push(getDataItem(
       (this.miningStats.lastEstimatedHashrate - totalAcceleratedHashrate),
       'rgba(127, 127, 127, 0.3)',
       `${notAcceleratedByPercentage} not accelerating`,
+      false,
     ) as PieSeriesOption);
 
     return data;
@@ -111,11 +97,28 @@ export class ActiveAccelerationBox implements OnChanges {
       tooltip: {
         show: true,
         trigger: 'item',
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: 'var(--tooltip-grey)',
+        },
+        borderColor: '#000',
+        formatter: (item) => {
+          return item.name;
+        }
       },
       series: [
         {
           type: 'pie',
           radius: '100%',
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          animationDuration: 0,
           data: this.getChartData(pools),
         }
       ]