diff --git a/src/components/PercentageGauge.tsx b/src/components/PercentageGauge.tsx
new file mode 100644
index 0000000..23af8f7
--- /dev/null
+++ b/src/components/PercentageGauge.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+type PercentageGaugeProps = {
+  perc: number;
+  bgFull: string;
+  bgPerc: string;
+  textPerc: string;
+};
+
+const PercentageGauge: React.FC<PercentageGaugeProps> = ({
+  perc,
+  bgFull,
+  bgPerc,
+  textPerc,
+}) => (
+  <div className="w-60 h-6 border-l-2 border-gray-400 relative">
+    <div className="flex absolute w-full h-full">
+      <div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div>
+    </div>
+    <div className="flex absolute w-full h-full">
+      <div
+        className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
+        style={{ width: `${perc}%` }}
+      ></div>
+    </div>
+    <div
+      className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`}
+    >
+      <span className="m-auto">{perc}%</span>
+    </div>
+  </div>
+);
+
+export default React.memo(PercentageGauge);
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index a9ffd85..9005d12 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -1,12 +1,9 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAngleRight,
-  faBurn,
-  faCoins,
-} from "@fortawesome/free-solid-svg-icons";
+import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
 import FormattedBalance from "../components/FormattedBalance";
 import { TransactionData } from "../types";
+import PercentageGauge from "../components/PercentageGauge";
 
 type RewardSplitProps = {
   txData: TransactionData;
@@ -20,49 +17,43 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
     100;
 
   return (
-    <div className="space-y-2">
-      <div
-        className="self-center w-40 border rounded border-gray-200"
-        title="Burnt Fees Percentage"
-      >
-        <div className="w-full h-5 rounded bg-orange-500 relative">
-          <div
-            className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
-            style={{ width: `${100 - burntPerc}%` }}
-          ></div>
-          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-orange-800">
-            <span className="m-auto">{burntPerc}%</span>
-          </div>
+    <div className="inline-block">
+      <div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
+        <PercentageGauge
+          perc={burntPerc}
+          bgFull="bg-orange-100"
+          bgPerc="bg-orange-500"
+          textPerc="text-orange-800"
+        />
+        <div className="flex items-baseline space-x-1">
+          <span className="flex space-x-1 text-orange-500">
+            <span title="Burnt fees">
+              <FontAwesomeIcon icon={faBurn} size="1x" />
+            </span>
+            <span>
+              <span className="line-through">
+                <FormattedBalance value={burntFees} />
+              </span>{" "}
+              Ether
+            </span>
+          </span>
         </div>
-      </div>
-      <div className="flex items-baseline space-x-1 text-sm">
-        <span className="text-gray-500">
-          <FontAwesomeIcon icon={faAngleRight} size="1x" />
-        </span>
-        <span className="flex space-x-1 text-orange-500">
-          <span title="Burnt fees">
-            <FontAwesomeIcon icon={faBurn} size="1x" />
+        <PercentageGauge
+          perc={100 - burntPerc}
+          bgFull="bg-yellow-100"
+          bgPerc="bg-yellow-300"
+          textPerc="text-yellow-700"
+        />
+        <div className="flex items-baseline space-x-1">
+          <span className="flex space-x-1">
+            <span className="text-yellow-300" title="Miner fees">
+              <FontAwesomeIcon icon={faCoins} size="1x" />
+            </span>
+            <span>
+              <FormattedBalance value={minerReward} /> Ether
+            </span>
           </span>
-          <span>
-            <span className="line-through">
-              <FormattedBalance value={burntFees} />
-            </span>{" "}
-            Ether
-          </span>
-        </span>
-      </div>
-      <div className="flex items-baseline space-x-1 text-sm">
-        <span className="text-gray-500">
-          <FontAwesomeIcon icon={faAngleRight} size="1x" />
-        </span>
-        <span className="flex space-x-1">
-          <span className="text-yellow-300" title="Miner fees">
-            <FontAwesomeIcon icon={faCoins} size="1x" />
-          </span>
-          <span>
-            <FormattedBalance value={minerReward} /> Ether
-          </span>
-        </span>
+        </div>
       </div>
     </div>
   );