diff --git a/__tests__/components/Modals/vault/VaultBorrowings.test.tsx b/__tests__/components/Modals/vault/VaultBorrowings.test.tsx
index 5b61807e..0c597050 100644
--- a/__tests__/components/Modals/vault/VaultBorrowings.test.tsx
+++ b/__tests__/components/Modals/vault/VaultBorrowings.test.tsx
@@ -26,7 +26,11 @@ jest.mock('hooks/broadcast/useDepositVault', () => jest.fn(() => ({ actions: []
 
 jest.mock('components/DisplayCurrency')
 
-jest.mock('hooks/useHealthComputer', () => jest.fn(() => ({ computeMaxBorrowAmount: () => {} })))
+jest.mock('hooks/useHealthComputer', () =>
+  jest.fn(() => ({
+    computeMaxBorrowAmount: () => {},
+  })),
+)
 
 const mockedDisplayCurrency = jest
   .mocked(DisplayCurrency)
@@ -49,13 +53,6 @@ describe('<VaultBorrowings />', () => {
   const defaultProps: VaultBorrowingsProps = {
     primaryAsset: ASSETS[0],
     secondaryAsset: ASSETS[1],
-    updatedAccount: {
-      id: 'test',
-      deposits: [],
-      debts: [],
-      vaults: [],
-      lends: [],
-    },
     vault: mockedVault,
     borrowings: [],
     deposits: [],
diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx
index ef40253f..4de61323 100644
--- a/src/components/Account/AccountDetails.tsx
+++ b/src/components/Account/AccountDetails.tsx
@@ -6,8 +6,8 @@ import AccountComposition from 'components/Account/AccountComposition'
 import Card from 'components/Card'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
-import { Gauge } from 'components/Gauge'
-import { ChevronLeft, ChevronRight, Heart } from 'components/Icons'
+import { HealthGauge } from 'components/HealthGauge'
+import { ChevronLeft, ChevronRight } from 'components/Icons'
 import Text from 'components/Text'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
@@ -83,7 +83,7 @@ function AccountDetails(props: Props) {
           'flex flex-wrap w-16 group/details relative',
           'border rounded-base border-white/20',
           'bg-white/5 backdrop-blur-sticky transition-colors duration-300',
-          'hover:bg-white/20 hover:cursor-pointer ',
+          'hover:bg-white/10 hover:cursor-pointer ',
         )}
         onClick={() => setIsExpanded(!isExpanded)}
       >
@@ -97,18 +97,10 @@ function AccountDetails(props: Props) {
           {isExpanded ? <ChevronRight className='w-2' /> : <ChevronLeft className='w-2' />}
         </div>
         <div className='flex flex-wrap justify-center w-full py-4'>
-          <Gauge tooltip='Health Factor' percentage={health} icon={<Heart />} />
+          <HealthGauge health={health} />
           <Text size='2xs' className='mb-0.5 mt-1 w-full text-center text-white/50'>
-            Health
+            Account Health
           </Text>
-          <div className='flex'>
-            <FormattedNumber
-              className={'w-full text-center text-xs'}
-              amount={health}
-              options={{ maxDecimals: 0, minDecimals: 0, suffix: '%' }}
-              animate
-            />
-          </div>
         </div>
         <div className='w-full py-4 border-t border-white/20'>
           <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
diff --git a/src/components/Account/AccountHealth.tsx b/src/components/Account/AccountHealth.tsx
deleted file mode 100644
index 6ed7340f..00000000
--- a/src/components/Account/AccountHealth.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import classNames from 'classnames'
-
-import { Heart } from 'components/Icons'
-import Text from 'components/Text'
-import { Tooltip } from 'components/Tooltip'
-import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { REDUCE_MOTION_KEY } from 'constants/localStore'
-import useLocalStorage from 'hooks/useLocalStorage'
-
-interface Props {
-  health: number
-  hasLabel?: boolean
-  classNames?: string
-}
-
-export default function AccountHealth(props: Props) {
-  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
-  const healthBarWidth = (props.health / 100) * 53
-
-  return (
-    <div className={classNames('flex items-center gap-1.5', props.classNames)}>
-      <div className='flex flex-auto w-3 h-4'>
-        <Heart />
-      </div>
-      {props.hasLabel && (
-        <Text size='xs' className='pr-0.5 text-white/70'>
-          Health
-        </Text>
-      )}
-      <div className='flex flex-shrink'>
-        <Tooltip content={`Account Health: ${props.health}%`} type='info'>
-          <svg width='100%' viewBox='0 0 53 4' fill='none' xmlns='http://www.w3.org/2000/svg'>
-            <rect width='53' height='4' rx='2' fill='white' fillOpacity='0.1' />
-            <rect
-              width={healthBarWidth}
-              height='4'
-              rx='2'
-              fill='url(#bar)'
-              style={{
-                transition: reduceMotion ? 'none' : 'width 1s ease',
-              }}
-            />
-            <defs>
-              <linearGradient
-                id='bar'
-                x1='0%'
-                y1='0%'
-                x2='100%'
-                y2='0%'
-                gradientUnits='userSpaceOnUse'
-              >
-                <stop stopColor='#FF645F' />
-                <stop offset='0.5' stopColor='#FFB1AE' />
-                <stop offset='1' stopColor='#FFD5D3' />
-              </linearGradient>
-            </defs>
-          </svg>
-        </Tooltip>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/Account/AccountStats.tsx b/src/components/Account/AccountStats.tsx
index f0ffd797..07b18fee 100644
--- a/src/components/Account/AccountStats.tsx
+++ b/src/components/Account/AccountStats.tsx
@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
 
-import AccountHealth from 'components/Account/AccountHealth'
+import HealthBar from 'components/Account/HealthBar'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
-import { ArrowChartLineUp } from 'components/Icons'
+import { ArrowChartLineUp, Heart } from 'components/Icons'
+import Text from 'components/Text'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
 import useHealthComputer from 'hooks/useHealthComputer'
@@ -40,21 +41,27 @@ export default function AccountStats(props: Props) {
     [props.account, borrowAssetsData, lendingAssetsData, prices],
   )
   return (
-    <div className='flex-wrap w-full'>
+    <div className='flex flex-wrap w-full'>
       <DisplayCurrency
         coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, positionBalance)}
         className='w-full text-xl'
       />
       <div className='flex items-center justify-between w-full mt-1'>
-        <span className='flex flex-wrap'>
+        <div className='flex items-center'>
           <ArrowChartLineUp className='w-4 mr-1' />
           <FormattedNumber
             className='text-xs text-white/70'
             amount={apr.toNumber()}
             options={{ prefix: 'APR: ', suffix: '%', minDecimals: 2, maxDecimals: 2 }}
           />
-        </span>
-        <AccountHealth health={health} classNames='w-[140px]' hasLabel />
+        </div>
+        <div className='flex items-center gap-1'>
+          <Heart className='w-3' />
+          <Text size='xs' className='w-auto mr-1 text-white/70'>
+            Health
+          </Text>
+          <HealthBar health={health} classNames='w-[92px] h-0.5' hasLabel />
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Account/AccountSummary.tsx b/src/components/Account/AccountSummary.tsx
index 959bbe4e..35f05cd6 100644
--- a/src/components/Account/AccountSummary.tsx
+++ b/src/components/Account/AccountSummary.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from 'react'
+import { HTMLAttributes, useMemo } from 'react'
 
+import classNames from 'classnames'
 import Accordion from 'components/Accordion'
 import AccountBalancesTable from 'components/Account/AccountBalancesTable'
 import AccountComposition from 'components/Account/AccountComposition'
-import AccountHealth from 'components/Account/AccountHealth'
+import HealthBar from 'components/Account/HealthBar'
 import Card from 'components/Card'
 import DisplayCurrency from 'components/DisplayCurrency'
-import { FormattedNumber } from 'components/FormattedNumber'
 import Text from 'components/Text'
 import { BN_ZERO } from 'constants/math'
 import { ORACLE_DENOM } from 'constants/oracle'
@@ -17,6 +17,7 @@ import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableDa
 import usePrices from 'hooks/usePrices'
 import { BNCoin } from 'types/classes/BNCoin'
 import { calculateAccountBalanceValue, calculateAccountLeverage } from 'utils/accounts'
+import { formatLeverage } from 'utils/formatters'
 
 interface Props {
   account: Account
@@ -49,24 +50,19 @@ export default function AccountSummary(props: Props) {
   if (!props.account) return null
 
   return (
-    <div className='h-[546px] min-w-[345px] basis-[345px] overflow-y-scroll scrollbar-hide'>
+    <div className='h-[546px] min-w-[370px] basis-[370px] overflow-y-scroll scrollbar-hide'>
       <Card className='mb-4 h-min min-w-fit bg-white/10' contentClassName='flex'>
-        <Item title='Networth'>
+        <Item label='Net worth' classNames='flex-1'>
           <DisplayCurrency
             coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalance)}
-            className='text-xs'
+            className='text-sm'
           />
         </Item>
-        <Item title='Leverage'>
-          <FormattedNumber
-            className='text-xs'
-            amount={leverage.toNumber()}
-            options={{ minDecimals: 2, maxDecimals: 2, suffix: 'x' }}
-            animate
-          />
+        <Item label='Leverage' classNames='flex-1'>
+          <Text size='sm'>{formatLeverage(leverage.toNumber())}</Text>
         </Item>
-        <Item title='Account Health'>
-          <AccountHealth health={health} />
+        <Item label='Account health'>
+          <HealthBar health={health} classNames='w-[184px] h-1' />
         </Item>
       </Card>
       <Accordion
@@ -100,16 +96,24 @@ export default function AccountSummary(props: Props) {
   )
 }
 
-function Item(props: React.HTMLAttributes<HTMLDivElement>) {
+interface ItemProps extends HTMLAttributes<HTMLDivElement> {
+  label: string
+  classNames?: string
+}
+
+function Item(props: ItemProps) {
   return (
     <div
-      className='flex flex-wrap items-center gap-1 px-4 py-2 border-r border-r-white/10'
+      className={classNames(
+        'flex flex-col justify-around px-3 py-1 border-r border-r-white/10',
+        props.classNames,
+      )}
       {...props}
     >
-      <Text size='xs' className='w-full text-white/50'>
-        {props.title}
+      <Text size='2xs' className='text-white/50 whitespace-nowrap'>
+        {props.label}
       </Text>
-      {props.children}
+      <div className='flex h-4.5 w-full'>{props.children}</div>
     </div>
   )
 }
diff --git a/src/components/Account/HealthBar.tsx b/src/components/Account/HealthBar.tsx
new file mode 100644
index 00000000..c8198f15
--- /dev/null
+++ b/src/components/Account/HealthBar.tsx
@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+
+import { Tooltip } from 'components/Tooltip'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import useHealthColorAndLabel from 'hooks/useHealthColorAndLabel'
+import useLocalStorage from 'hooks/useLocalStorage'
+
+interface Props {
+  health: number
+  hasLabel?: boolean
+  classNames?: string
+}
+
+function calculateHealth(health: number) {
+  const firstBarEnd = 43
+  const secondBarStart = 46
+  const secondBarEnd = 93
+  const thirdBarStart = 96
+  const thirdBarEnd = 184
+
+  if (health <= 10) return (firstBarEnd / 10) * health
+  if (health <= 30) return ((secondBarEnd - secondBarStart) / 20) * (health - 10) + secondBarStart
+  if (health <= 100) return ((thirdBarEnd - thirdBarStart) / 70) * (health - 30) + thirdBarStart
+}
+
+export default function HealthBar(props: Props) {
+  const { health } = props
+  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const [color, label] = useHealthColorAndLabel(health, 'fill-')
+  const width = calculateHealth(health)
+
+  return (
+    <Tooltip content={label} type='info' className='flex items-center w-full'>
+      <div className={classNames('flex max-w-[184px] max-h-1', props.classNames)}>
+        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 184 4'>
+          <mask id='healthBarMask'>
+            <path fill='#FFFFFF' d='M0,2c0-1.1,0.9-2,2-2h41.6v4H2C0.9,4,0,3.1,0,2z' />
+            <rect x='46' fill='#FFFFFF' width='47' height='4' />
+            <path fill='#FFFFFF' d='M95.5,0H182c1.1,0,2,0.9,2,2s-0.9,2-2,2H95.5V0z' />
+          </mask>
+          <rect className='fill-white/10' width='184' height='4' mask='url(#healthBarMask)' />
+          <rect
+            className={classNames(color, !reduceMotion && 'transition-all duration-500')}
+            width={width}
+            height='4'
+            mask='url(#healthBarMask)'
+          />
+        </svg>
+      </div>
+    </Tooltip>
+  )
+}
diff --git a/src/components/HealthGauge.tsx b/src/components/HealthGauge.tsx
new file mode 100644
index 00000000..ebaa365a
--- /dev/null
+++ b/src/components/HealthGauge.tsx
@@ -0,0 +1,96 @@
+import classNames from 'classnames'
+import { useMemo } from 'react'
+
+import { Heart } from 'components/Icons'
+import { Tooltip } from 'components/Tooltip'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { REDUCE_MOTION_KEY } from 'constants/localStore'
+import useHealthColorAndLabel from 'hooks/useHealthColorAndLabel'
+import useLocalStorage from 'hooks/useLocalStorage'
+import { computeHealthGaugePercentage } from 'utils/accounts'
+
+interface Props {
+  diameter?: number
+  health: number
+}
+
+const RADIUS = 350
+const ROTATION = {
+  rotate: '-126deg',
+  transformOrigin: 'center',
+}
+
+export const HealthGauge = ({ diameter = 40, health = 0 }: Props) => {
+  const [color, label] = useHealthColorAndLabel(health, 'text-')
+  const [reduceMotion] = useLocalStorage<boolean>(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion)
+  const percentage = useMemo(() => computeHealthGaugePercentage(health), [health])
+
+  return (
+    <Tooltip type='info' content={label}>
+      <div
+        className={classNames(
+          'relative grid place-items-center',
+          `w-${diameter / 4} h-${diameter / 4}`,
+        )}
+      >
+        <Heart className='text-white/50' width={20} />
+        <svg
+          version='1.1'
+          xmlns='http://www.w3.org/2000/svg'
+          x='0px'
+          y='0px'
+          viewBox='0 0 700 700'
+          className='absolute'
+        >
+          <mask id='mask'>
+            <g transform='matrix(-0.5,0.866025,-0.866025,-0.5,827.404,221.632)'>
+              <path
+                fill='white'
+                d='M585.2,594.5C577.4,594.5 569.5,591.7 563.3,586.1C549.9,574 548.8,553.3 560.9,539.8C601.3,494.9 626,439.5 632.3,379.4C638.6,319.3 626,259.9 595.8,207.7C586.8,192 592.1,172 607.8,162.9C623.5,153.8 643.5,159.2 652.6,174.9C689.8,239.2 705.3,312.3 697.5,386.3C689.7,460.2 659.3,528.5 609.6,583.7C603,590.9 594.1,594.5 585.2,594.5Z'
+              />
+            </g>
+            <g transform='matrix(-0.5,0.866025,-0.866025,-0.5,827.404,221.632)'>
+              <path
+                fill='white'
+                d='M561.7,147C553.9,147 546,144.2 539.8,138.6C494.9,98.2 439.5,73.5 379.4,67.2C319.4,60.9 259.9,73.5 207.6,103.7C191.9,112.8 171.9,107.4 162.8,91.7C153.7,76 159.1,56 174.8,46.9C239.2,9.7 312.3,-5.8 386.2,2C460.1,9.8 528.4,40.2 583.6,89.9C597,102 598.1,122.7 586,136.2C579.6,143.3 570.7,147 561.7,147Z'
+              />
+            </g>
+            <g transform='matrix(-0.5,0.866025,-0.866025,-0.5,827.404,221.632)'>
+              <path
+                fill='white'
+                d='M349.6,699.3C328.4,699.3 307.1,697.4 285.9,693.5C204.1,678.3 130.2,634.4 77.9,569.8C25.6,505.2 -2.1,423.8 0.1,340.6C2.3,257.4 34.1,177.6 89.8,115.8C101.9,102.4 122.7,101.3 136.1,113.4C149.5,125.5 150.6,146.2 138.5,159.7C93.3,209.9 67.4,274.8 65.6,342.4C63.8,410 86.3,476.1 128.8,528.6C171.3,581.1 231.4,616.8 297.8,629.2C364.2,641.5 433.1,629.7 491.6,595.9C507.3,586.8 527.3,592.2 536.4,607.9C545.4,623.6 540.1,643.6 524.4,652.7C471,683.4 410.6,699.3 349.6,699.3Z'
+              />
+            </g>
+          </mask>
+          <circle
+            r={RADIUS}
+            cx={RADIUS}
+            cy={RADIUS}
+            fill='white'
+            fillOpacity={0.2}
+            mask='url(#mask)'
+            style={ROTATION}
+          />
+          <circle
+            r={316}
+            cx={RADIUS}
+            cy={RADIUS}
+            fill='transparent'
+            strokeWidth={64}
+            pathLength={100}
+            strokeDasharray={100}
+            strokeDashoffset={percentage}
+            strokeLinecap='round'
+            style={ROTATION}
+            mask='url(#mask)'
+            className={classNames(
+              color,
+              'stroke-current',
+              !reduceMotion && 'transition-color transition-[stroke-dashoffset] duration-500',
+            )}
+          />
+        </svg>
+      </div>
+    </Tooltip>
+  )
+}
diff --git a/src/components/Icons/TooltipArrow.svg b/src/components/Icons/TooltipArrow.svg
new file mode 100644
index 00000000..2afafdab
--- /dev/null
+++ b/src/components/Icons/TooltipArrow.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.86824 5.48057C4.48435 6.15239 3.51565 6.15239 3.13176 5.48057L0 0L8 0L4.86824 5.48057Z"
+          fill="currentColor"
+    />
+</svg>
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index 9989a95e..ae5dc083 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -46,6 +46,7 @@ export { default as StarFilled } from 'components/Icons/StarFilled.svg'
 export { default as StarOutlined } from 'components/Icons/StarOutlined.svg'
 export { default as Subtract } from 'components/Icons/Subtract.svg'
 export { default as SwapIcon } from 'components/Icons/SwapIcon.svg'
+export { default as TooltipArrow } from 'components/Icons/TooltipArrow.svg'
 export { default as TrashBin } from 'components/Icons/TrashBin.svg'
 export { default as VerticalThreeLine } from 'components/Icons/VerticalThreeLine.svg'
 export { default as Wallet } from 'components/Icons/Wallet.svg'
diff --git a/src/components/Modals/Vault/VaultDeposits.tsx b/src/components/Modals/Vault/VaultDeposits.tsx
index 22ad0a55..8d3a4618 100644
--- a/src/components/Modals/Vault/VaultDeposits.tsx
+++ b/src/components/Modals/Vault/VaultDeposits.tsx
@@ -14,7 +14,7 @@ import { BN_ZERO } from 'constants/math'
 import usePrice from 'hooks/usePrice'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
-import { accumulateAmounts, getAmount } from 'utils/accounts'
+import { accumulateAmounts } from 'utils/accounts'
 import { findCoinByDenom } from 'utils/assets'
 import { BN } from 'utils/helpers'
 
diff --git a/src/components/Tooltip/TooltipContent.tsx b/src/components/Tooltip/TooltipContent.tsx
index 4a8c4334..f6cbb521 100644
--- a/src/components/Tooltip/TooltipContent.tsx
+++ b/src/components/Tooltip/TooltipContent.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { ReactNode } from 'react'
 
-import { ExclamationMarkCircled } from 'components/Icons'
+import { TooltipArrow } from 'components/Icons'
 import Text from 'components/Text'
 
 import { TooltipType } from '.'
@@ -13,19 +13,35 @@ interface Props {
 
 export default function TooltipContent(props: Props) {
   return (
-    <div
-      className={classNames(
-        'flex max-w-[320px] flex-1 gap-2 rounded-sm p-3 text-xs shadow-tooltip backdrop-blur-lg',
-        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
-        props.type === 'info' && 'bg-white/20',
-        props.type === 'warning' && 'bg-warning',
-        props.type === 'error' && 'bg-error',
-      )}
-    >
-      <div>
-        <ExclamationMarkCircled className='w-5 gap-3 text-white' />
+    <div>
+      <div
+        className={classNames(
+          'flex max-w-[320px] flex-1 gap-2 rounded-sm py-0.5 px-2 text-sm shadow-tooltip backdrop-blur-lg',
+          props.type === 'info' && 'bg-white/20',
+          props.type === 'warning' && 'bg-warning',
+          props.type === 'error' && 'bg-error',
+        )}
+      >
+        {typeof props.content === 'string' ? (
+          <Text size='sm' className='font-semibold'>
+            {props.content}
+          </Text>
+        ) : (
+          props.content
+        )}
       </div>
-      {typeof props.content === 'string' ? <Text size='sm'>{props.content}</Text> : props.content}
+      {
+        <div data-popper-arrow=''>
+          <TooltipArrow
+            width={8}
+            className={classNames(
+              props.type === 'info' && 'text-white/20',
+              props.type === 'warning' && 'text-warning',
+              props.type === 'error' && 'text-error',
+            )}
+          />
+        </div>
+      }
     </div>
   )
 }
diff --git a/src/hooks/useHealthColorAndLabel.ts b/src/hooks/useHealthColorAndLabel.ts
new file mode 100644
index 00000000..dbfce6a7
--- /dev/null
+++ b/src/hooks/useHealthColorAndLabel.ts
@@ -0,0 +1,5 @@
+export default function useHealthColorAndLabel(health: number, colorPrefix: string) {
+  if (health > 30) return [`${colorPrefix}violet-500`, 'Healthy']
+  if (health > 10) return [`${colorPrefix}yellow-300`, 'Attention']
+  return [`${colorPrefix}martian-red`, 'Liquidation risk']
+}
diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts
index 75de0fe2..0ed2c298 100644
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@@ -70,7 +70,7 @@ export const calculateAccountApr = (
 
   let totalLendsInterestValue = BN_ZERO
   let totalVaultsInterestValue = BN_ZERO
-  let totalDeptsInterestValue = BN_ZERO
+  let totalDebtInterestValue = BN_ZERO
 
   lends?.forEach((lend) => {
     const asset = getAssetByDenom(lend.denom)
@@ -104,15 +104,13 @@ export const calculateAccountApr = (
       borrowAssetsData.find((borrowAsset) => borrowAsset.asset.denom === debt.denom)?.borrowRate ??
       0
     const positionInterest = amount.multipliedBy(price).multipliedBy(apr)
-    totalDeptsInterestValue = totalDeptsInterestValue.plus(positionInterest)
+    totalDebtInterestValue = totalDebtInterestValue.plus(positionInterest)
   })
 
   const totalInterstValue = totalLendsInterestValue
     .plus(totalVaultsInterestValue)
-    .minus(totalDeptsInterestValue)
-  const totalApr = totalInterstValue.dividedBy(totalValue).times(100)
-
-  return totalApr
+    .minus(totalDebtInterestValue)
+  return totalInterstValue.dividedBy(totalValue).times(100)
 }
 
 export const calculateAccountBorrowRate = (
@@ -206,3 +204,27 @@ export function cloneAccount(account: Account): Account {
     })),
   }
 }
+
+export function computeHealthGaugePercentage(health: number) {
+  const ATTENTION_CUTOFF = 10
+  const HEALTHY_CUTOFF = 30
+  const HEALTHY_BAR_SIZE = 55
+  const UNHEALTHY_BAR_SIZE = 21
+  const GAP_SIZE = 3
+
+  if (health > HEALTHY_CUTOFF) {
+    const basePercentage = 100 - HEALTHY_BAR_SIZE
+    const additionalPercentage =
+      ((health - HEALTHY_CUTOFF) / (100 - HEALTHY_CUTOFF)) * HEALTHY_BAR_SIZE
+    return 100 - (basePercentage + additionalPercentage + GAP_SIZE)
+  }
+
+  if (health > ATTENTION_CUTOFF) {
+    const basePercentage = UNHEALTHY_BAR_SIZE
+    const additionalPercentage =
+      ((health - ATTENTION_CUTOFF) / (HEALTHY_CUTOFF - ATTENTION_CUTOFF)) * UNHEALTHY_BAR_SIZE
+    return 100 - (basePercentage + additionalPercentage + GAP_SIZE)
+  }
+
+  return 100 - (health / ATTENTION_CUTOFF) * UNHEALTHY_BAR_SIZE
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d235bf2..e07cca96 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,11 @@ module.exports = {
     'text-4xl',
     'text-5xl-caps',
     'text-5xl',
+    'text-yellow-300',
+    'text-violet-500',
+    'fill-yellow-300',
+    'fill-violet-500',
+    'fill-martian-red',
     'w-2',
   ],
   theme: {
@@ -60,7 +65,7 @@ module.exports = {
         overlay: '0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.2)',
         button: '0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.2)',
         tooltip:
-          '0 3px 4px rgba(0, 0, 0, 0.14), 0 3px 3px rgba(0, 0, 0, 0.12), 0 1px 8px rgba(0, 0, 0, 0.2)',
+          '0 3px 4px rgba(0, 0, 0, 0.04), 0 3px 3px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.04)',
       },
       brightness: {
         30: '.3',
@@ -222,160 +227,161 @@ module.exports = {
         h2: { fontSize: '9px', lineHeight: '56px' },
         h3: { fontSize: '30px', lineHeight: '40px' },
         h4: { fontSize: '24px', lineHeight: '36px', fontWeight: theme('fontWeight.normal') },
-      }),
-        addUtilities({
-          '.blur-orb-primary': {
-            filter: 'blur(clamp(50px, 8vw, 100px))',
-          },
-          '.blur-orb-secondary': {
-            filter: 'blur(clamp(60px, 20vw, 140px))',
-          },
-          '.blur-orb-tertiary': {
-            filter: 'blur(clamp(60px, 10vw, 110px))',
-          },
-          '.border-glas': {
-            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))',
-            mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-            '-webkit-mask-composite': 'xor',
-            maskComposite: 'exclude',
-          },
-          '.glow-line': {
-            x: 0,
-            y: 0,
-            fill: 'transparent',
-            stroke: '#FFF',
-            strokeWidth: '0.5',
-            strokeDasharray: '20px 30px',
-          },
-          '.glow-hover': {
-            strokeDashoffset: '-80px',
-            transition: 'stroke-dashoffset 1000ms ease-in',
-          },
-          '.gradient-atom': {
-            background: 'linear-gradient(to bottom, #2e3148, #6f7390)',
-          },
-          '.gradient-axlusdc': {
-            background: 'linear-gradient(to bottom, #1f5c9e, #478edc)',
-          },
-          '.gradient-card': {
-            background:
-              'linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
-          },
-          '.gradient-card-content': {
-            backgroundImage: 'linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05))',
-          },
-          '.gradient-hatched': {
-            backgroundImage:
-              'linear-gradient(135deg,transparent 33.33%,#826d6b 33.33%,#826d6b 50%,transparent 50%,transparent 83.33%,#826d6b 83.33%,#826d6b 100%)',
-            backgroundSize: '5px 5px',
-          },
-          '.gradient-header': {
-            background:
-              'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%)',
-          },
-          '.gradient-limit': {
-            background:
-              'linear-gradient(to right,#15bfa9 20.9%,#5e4bb1 49.68%,#382685 82.55%,#c83333 100%)',
-          },
-          '.gradient-mars': {
-            background: 'linear-gradient(to bottom, #a03b45, #c83333)',
-          },
-          '.gradient-osmo': {
-            background: 'linear-gradient(to bottom, #3a02e2, #e700ca)',
-          },
-          '.gradient-popover': {
-            background:
-              'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
-          },
-          '.gradient-primary-to-secondary': {
-            background: 'linear-gradient(180deg, #7F78E8 0%, #926AC8 100%)',
-          },
-          '.gradient-secondary-to-primary': {
-            background: 'linear-gradient(180deg, #926AC8 100%, #7F78E8 0%)',
-          },
-          '.gradient-tooltip': {
-            background:
-              'linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%)',
-          },
-          '.gradient-active-tab': {
-            background:
-              'linear-gradient(270deg, rgba(186, 8, 189, 0.764896) 0%, rgba(255, 160, 187, 0.88641) 23.77%, rgba(48, 29, 24, 0.26) 99.2%)',
-          },
-          '.number': {
-            whiteSpace: 'nowrap',
-            fontFeatureSettings: '"tnum" on',
-          },
-          '.text-3xs': { fontSize: '9px', lineHeight: '12px' },
-          '.text-3xs-caps': {
-            fontSize: '9px',
-            lineHeight: '12px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.semibold'),
-            letterSpacing: theme('letterSpacing.wide'),
-          },
-          '.text-2xs': { fontSize: '10px', lineHeight: '16px' },
-          '.text-2xs-caps': {
-            fontSize: '10px',
-            lineHeight: '16px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.semibold'),
-            letterSpacing: theme('letterSpacing.wide'),
-          },
-          '.text-xs-caps': {
-            fontSize: '12px',
-            lineHeight: '16px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.semibold'),
-            letterSpacing: theme('letterSpacing.wider'),
-          },
-          '.text-sm-caps': {
-            fontSize: '14px',
-            lineHeight: '20px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.semibold'),
-            letterSpacing: theme('letterSpacing.wider'),
-          },
-          '.text-base-caps': {
-            fontSize: '16px',
-            lineHeight: '20px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.semibold'),
-            letterSpacing: theme('letterSpacing.wider'),
-          },
-          '.text-lg-caps': {
-            fontSize: '17px',
-            lineHeight: '24px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.semibold'),
-            letterSpacing: theme('letterSpacing.wider'),
-          },
-          '.text-xl-caps': {
-            fontSize: '19px',
-            lineHeight: '28px',
-            textTransform: 'uppercase',
-            fontWeight: theme('fontWeight.light'),
-            letterSpacing: theme('letterSpacing.widest'),
-          },
-          '.text-2xl-caps': {
-            fontSize: '21px',
-            lineHeight: '32px',
-            textTransform: 'uppercase',
-            letterSpacing: theme('letterSpacing.wider'),
-          },
-          '.text-3xl-caps': {
-            fontSize: '24px',
-            lineHeight: '36px',
-            textTransform: 'uppercase',
-            letterSpacing: theme('letterSpacing.wider'),
-          },
-          '.text-4xl-caps': { fontSize: '30px', lineHeight: '40px', textTransform: 'uppercase' },
-          '.text-5xl-caps': {
-            fontSize: '39px',
-            lineHeight: '56px',
-            textTransform: 'uppercase',
-            letterSpacing: '9px',
-          },
-        })
+      })
+
+      addUtilities({
+        '.blur-orb-primary': {
+          filter: 'blur(clamp(50px, 8vw, 100px))',
+        },
+        '.blur-orb-secondary': {
+          filter: 'blur(clamp(60px, 20vw, 140px))',
+        },
+        '.blur-orb-tertiary': {
+          filter: 'blur(clamp(60px, 10vw, 110px))',
+        },
+        '.border-glas': {
+          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))',
+          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+          '-webkit-mask-composite': 'xor',
+          maskComposite: 'exclude',
+        },
+        '.glow-line': {
+          x: 0,
+          y: 0,
+          fill: 'transparent',
+          stroke: '#FFF',
+          strokeWidth: '0.5',
+          strokeDasharray: '20px 30px',
+        },
+        '.glow-hover': {
+          strokeDashoffset: '-80px',
+          transition: 'stroke-dashoffset 1000ms ease-in',
+        },
+        '.gradient-atom': {
+          background: 'linear-gradient(to bottom, #2e3148, #6f7390)',
+        },
+        '.gradient-axlusdc': {
+          background: 'linear-gradient(to bottom, #1f5c9e, #478edc)',
+        },
+        '.gradient-card': {
+          background:
+            'linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
+        },
+        '.gradient-card-content': {
+          backgroundImage: 'linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05))',
+        },
+        '.gradient-hatched': {
+          backgroundImage:
+            'linear-gradient(135deg,transparent 33.33%,#826d6b 33.33%,#826d6b 50%,transparent 50%,transparent 83.33%,#826d6b 83.33%,#826d6b 100%)',
+          backgroundSize: '5px 5px',
+        },
+        '.gradient-header': {
+          background:
+            'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%)',
+        },
+        '.gradient-limit': {
+          background:
+            'linear-gradient(to right,#15bfa9 20.9%,#5e4bb1 49.68%,#382685 82.55%,#c83333 100%)',
+        },
+        '.gradient-mars': {
+          background: 'linear-gradient(to bottom, #a03b45, #c83333)',
+        },
+        '.gradient-osmo': {
+          background: 'linear-gradient(to bottom, #3a02e2, #e700ca)',
+        },
+        '.gradient-popover': {
+          background:
+            'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
+        },
+        '.gradient-primary-to-secondary': {
+          background: 'linear-gradient(180deg, #7F78E8 0%, #926AC8 100%)',
+        },
+        '.gradient-secondary-to-primary': {
+          background: 'linear-gradient(180deg, #926AC8 100%, #7F78E8 0%)',
+        },
+        '.gradient-tooltip': {
+          background:
+            'linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%)',
+        },
+        '.gradient-active-tab': {
+          background:
+            'linear-gradient(270deg, rgba(186, 8, 189, 0.764896) 0%, rgba(255, 160, 187, 0.88641) 23.77%, rgba(48, 29, 24, 0.26) 99.2%)',
+        },
+        '.number': {
+          whiteSpace: 'nowrap',
+          fontFeatureSettings: '"tnum" on',
+        },
+        '.text-3xs': { fontSize: '9px', lineHeight: '12px' },
+        '.text-3xs-caps': {
+          fontSize: '9px',
+          lineHeight: '12px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.semibold'),
+          letterSpacing: theme('letterSpacing.wide'),
+        },
+        '.text-2xs': { fontSize: '10px', lineHeight: '16px' },
+        '.text-2xs-caps': {
+          fontSize: '10px',
+          lineHeight: '16px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.semibold'),
+          letterSpacing: theme('letterSpacing.wide'),
+        },
+        '.text-xs-caps': {
+          fontSize: '12px',
+          lineHeight: '16px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.semibold'),
+          letterSpacing: theme('letterSpacing.wider'),
+        },
+        '.text-sm-caps': {
+          fontSize: '14px',
+          lineHeight: '20px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.semibold'),
+          letterSpacing: theme('letterSpacing.wider'),
+        },
+        '.text-base-caps': {
+          fontSize: '16px',
+          lineHeight: '20px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.semibold'),
+          letterSpacing: theme('letterSpacing.wider'),
+        },
+        '.text-lg-caps': {
+          fontSize: '17px',
+          lineHeight: '24px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.semibold'),
+          letterSpacing: theme('letterSpacing.wider'),
+        },
+        '.text-xl-caps': {
+          fontSize: '19px',
+          lineHeight: '28px',
+          textTransform: 'uppercase',
+          fontWeight: theme('fontWeight.light'),
+          letterSpacing: theme('letterSpacing.widest'),
+        },
+        '.text-2xl-caps': {
+          fontSize: '21px',
+          lineHeight: '32px',
+          textTransform: 'uppercase',
+          letterSpacing: theme('letterSpacing.wider'),
+        },
+        '.text-3xl-caps': {
+          fontSize: '24px',
+          lineHeight: '36px',
+          textTransform: 'uppercase',
+          letterSpacing: theme('letterSpacing.wider'),
+        },
+        '.text-4xl-caps': { fontSize: '30px', lineHeight: '40px', textTransform: 'uppercase' },
+        '.text-5xl-caps': {
+          fontSize: '39px',
+          lineHeight: '56px',
+          textTransform: 'uppercase',
+          letterSpacing: '9px',
+        },
+      })
     }),
   ],
 }