diff --git a/libs/ui-toolkit/package.json b/libs/ui-toolkit/package.json
index 755c3bda7..c1ff2b802 100644
--- a/libs/ui-toolkit/package.json
+++ b/libs/ui-toolkit/package.json
@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.12.3"
+  "version": "0.12.4"
 }
diff --git a/libs/ui-toolkit/src/components/healthbar/healthbar.tsx b/libs/ui-toolkit/src/components/healthbar/healthbar.tsx
index 39c9684f4..2c1d17686 100644
--- a/libs/ui-toolkit/src/components/healthbar/healthbar.tsx
+++ b/libs/ui-toolkit/src/components/healthbar/healthbar.tsx
@@ -1,5 +1,8 @@
 import classNames from 'classnames';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { BigNumber } from 'bignumber.js';
 import { getIntentBackground, Intent } from '../../utils/intent';
@@ -74,13 +77,17 @@ const Level = ({
     .multipliedBy(100)
     .toNumber();
 
+  const formattedFee = fee
+    ? formatNumberPercentage(new BigNumber(fee).times(100), 2)
+    : '-';
+
   const tooltipContent = (
     <>
       <div className="mt-1.5 inline-flex">
         <Indicator variant={intent} />
       </div>
       <span>
-        {fee}% {t('Fee')}
+        {formattedFee}% {t('Fee')}
       </span>
       <div className="flex  flex-col">
         <span>
@@ -179,7 +186,7 @@ export const HealthBar = ({
                   opacity={opacity}
                   fee={fee}
                   prevLevel={prevLevel}
-                  decimals={0}
+                  decimals={decimals}
                   intent={intent}
                   key={'healthbar-segment-' + index}
                 />
diff --git a/libs/utils/package.json b/libs/utils/package.json
index 6a29da3e3..11e4fe61e 100644
--- a/libs/utils/package.json
+++ b/libs/utils/package.json
@@ -1,5 +1,5 @@
 {
   "name": "@vegaprotocol/utils",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "commonjs"
 }