diff --git a/tinlake-ui/components/Chart/styles.ts b/tinlake-ui/components/Chart/styles.ts
index 757e09bccd..9eb2aaee85 100644
--- a/tinlake-ui/components/Chart/styles.ts
+++ b/tinlake-ui/components/Chart/styles.ts
@@ -1,4 +1,10 @@
+import { ResponsiveContainer } from 'recharts'
 import styled from 'styled-components'
+
+export const StyledResponsiveContainer = styled(ResponsiveContainer)`
+  width: calc(100% + 8px) !important;
+  margin-left: -4px;
+`
 export const ChartTooltip = styled.div`
   padding: 12px 16px;
   font-size: 12px;
diff --git a/tinlake-ui/components/Header/index.tsx b/tinlake-ui/components/Header/index.tsx
index 55a1ab5731..677696a0e4 100644
--- a/tinlake-ui/components/Header/index.tsx
+++ b/tinlake-ui/components/Header/index.tsx
@@ -1,4 +1,3 @@
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay } from '@centrifuge/tinlake-js'
 import { Box, Button, Layer } from 'grommet'
 import { Close as CloseIcon, Menu as MenuIcon } from 'grommet-icons'
@@ -19,6 +18,7 @@ import { getAddressLink } from '../../utils/etherscanLinkGenerator'
 import { toDynamicPrecision } from '../../utils/toDynamicPrecision'
 import { useCFGRewards } from '../../utils/useCFGRewards'
 import { useQueryDebugEthAddress } from '../../utils/useQueryDebugEthAddress'
+import { Tooltip } from '../Tooltip'
 import { Web3Wallet } from '../Web3Wallet'
 
 const { isDemo } = config
@@ -159,11 +159,11 @@ const Header: React.FC<Props> = (props: Props) => {
       <AccountWrapper align="center" direction="row">
         <Holdings>
           <Box pad={{ left: '14px', right: '14px' }}>
-            <AxisTooltip title="View your rewards">{rewardsLink}</AxisTooltip>
+            <Tooltip title="View your rewards">{rewardsLink}</Tooltip>
           </Box>
           {address && (
             <Box pad={{ left: '14px', right: '14px' }}>
-              <AxisTooltip title="View your investment portfolio">{portfolioLink}</AxisTooltip>
+              <Tooltip title="View your investment portfolio">{portfolioLink}</Tooltip>
             </Box>
           )}
         </Holdings>
diff --git a/tinlake-ui/components/Overview/OverviewHeader.tsx b/tinlake-ui/components/Overview/OverviewHeader.tsx
index b3ac5744ae..86186ab9f9 100644
--- a/tinlake-ui/components/Overview/OverviewHeader.tsx
+++ b/tinlake-ui/components/Overview/OverviewHeader.tsx
@@ -120,48 +120,50 @@ const OverviewHeader: React.FC<Props> = (props: Props) => {
           <Heading level="5">{props.selectedPool.metadata.asset}</Heading>
           <Type>Asset type</Type>
         </HeaderBox>
-        <Tooltip id="assetMaturity">
-          <HeaderBox>
-            <Heading level="4">{props.selectedPool.metadata.assetMaturity}</Heading>
-            <Type>Asset maturity</Type>
-          </HeaderBox>
-        </Tooltip>
-        <Tooltip id={dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) ? 'dropApy' : 'dropApr'}>
-          <HeaderBox>
-            <Heading level="4">
-              <TokenLogo src={`/static/DROP_final.svg`} />
-              {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))
-                ? dropYield
-                : toPrecision(feeToInterestRate(dropRate || '0'), 2)}
-              <Unit>%</Unit>
-            </Heading>
-            {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) && (
-              <Box>
-                <Type>DROP APY (30 days)</Type>
-              </Box>
-            )}
-            {!(dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))) && (
-              <Box>
-                <Type>Fixed DROP rate (APR)</Type>
-              </Box>
-            )}
-          </HeaderBox>
-        </Tooltip>
-        <Tooltip id="poolValue">
-          <HeaderBox style={{ borderRight: 'none' }}>
-            <Heading level="4">
-              <TokenLogo src={`/static/currencies/${props.selectedPool.metadata.currencySymbol}.svg`} />
-              {addThousandsSeparators(
-                toPrecision(
-                  baseToDisplay((poolData?.netAssetValue || new BN(0)).add(poolData?.reserve || new BN(0)), 18),
-                  0
-                )
+        <HeaderBox>
+          <Heading level="4">{props.selectedPool.metadata.assetMaturity}</Heading>
+          <Type>
+            <Tooltip id="assetMaturity" underline>
+              Asset maturity
+            </Tooltip>
+          </Type>
+        </HeaderBox>
+        <HeaderBox>
+          <Heading level="4">
+            <TokenLogo src={`/static/DROP_final.svg`} />
+            {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))
+              ? dropYield
+              : toPrecision(feeToInterestRate(dropRate || '0'), 2)}
+            <Unit>%</Unit>
+          </Heading>
+          <Box>
+            <Type>
+              {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) && (
+                <Tooltip id="dropApy" underline>
+                  DROP APY (30 days)
+                </Tooltip>
               )}
-              <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
-            </Heading>
-            <Type>Pool Value</Type>
-          </HeaderBox>
-        </Tooltip>
+              {!(dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))) && (
+                <Tooltip id="dropApr" underline>
+                  Fixed DROP rate (APR)
+                </Tooltip>
+              )}
+            </Type>
+          </Box>
+        </HeaderBox>
+        <HeaderBox width="220px" style={{ borderRight: 'none' }}>
+          <Heading level="4">
+            <TokenLogo src={`/static/currencies/${props.selectedPool.metadata.currencySymbol}.svg`} />
+            {addThousandsSeparators(
+              toPrecision(
+                baseToDisplay((poolData?.netAssetValue || new BN(0)).add(poolData?.reserve || new BN(0)), 18),
+                0
+              )
+            )}
+            <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
+          </Heading>
+          <Type>Pool Value</Type>
+        </HeaderBox>
         <HeaderBox style={{ borderRight: 'none' }}>
           {'addresses' in props.selectedPool &&
           config.featureFlagNewOnboardingPools.includes(props.selectedPool.addresses.ROOT_CONTRACT) ? (
diff --git a/tinlake-ui/components/PoolCapacityLabel/index.tsx b/tinlake-ui/components/PoolCapacityLabel/index.tsx
index 836b8e94a8..6eabd5a76b 100644
--- a/tinlake-ui/components/PoolCapacityLabel/index.tsx
+++ b/tinlake-ui/components/PoolCapacityLabel/index.tsx
@@ -1,5 +1,4 @@
 import { addThousandsSeparators, baseToDisplay, toPrecision } from '@centrifuge/tinlake-js'
-import BN from 'bn.js'
 import * as React from 'react'
 import styled from 'styled-components'
 import { PoolData } from '../../ducks/pools'
@@ -25,9 +24,13 @@ export const PoolCapacityLabel: React.FC<Props> = ({ pool }) => {
     return <Label orange>Oversubscribed</Label>
   }
 
+  if (capacity == null) {
+    return null
+  }
+
   return (
     <Label green>
-      {addThousandsSeparators(toPrecision(baseToDisplay(capacity || new BN(0), 21), 0))}K {currency}
+      {addThousandsSeparators(toPrecision(baseToDisplay(capacity, 21), 0))}K {currency}
     </Label>
   )
 }
diff --git a/tinlake-ui/components/PoolsMetrics/index.tsx b/tinlake-ui/components/PoolsMetrics/index.tsx
index 9f5aa20104..1416b8da2a 100644
--- a/tinlake-ui/components/PoolsMetrics/index.tsx
+++ b/tinlake-ui/components/PoolsMetrics/index.tsx
@@ -1,14 +1,14 @@
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay, ITinlake } from '@centrifuge/tinlake-js'
 import { Box, Button } from 'grommet'
 import { useRouter } from 'next/router'
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { Area, AreaChart, ResponsiveContainer, Tooltip, YAxis } from 'recharts'
+import { Area, AreaChart, ResponsiveContainer, Tooltip as ChartTooltip, YAxis } from 'recharts'
 import { PoolsDailyData, PoolsData } from '../../ducks/pools'
 import { dateToYMD } from '../../utils/date'
 import { useCFGYield } from '../../utils/hooks'
 import NumberDisplay from '../NumberDisplay'
+import { Tooltip } from '../Tooltip'
 import { Cont, Label, TokenLogo, Unit, Value } from './styles'
 
 interface Props {
@@ -40,8 +40,8 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         elevation="small"
         round="xsmall"
         background="white"
-        margin={{ horizontal: '16px', top: 'medium' }}
-        style={{ flex: '1 1 300px', maxWidth: '430px' }}
+        margin={{ horizontal: '16px' }}
+        style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
       >
@@ -67,7 +67,7 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
                   <stop offset="95%" stopColor="#0828BE" stopOpacity={0} />
                 </linearGradient>
               </defs>
-              <Tooltip content={<></>} />
+              <ChartTooltip content={<></>} />
               <YAxis type="number" domain={[0, maxPoolValue]} hide />
               {/* <XAxis dataKey="day" mirror tickFormatter={(val: number) => dateToYMD(val)} /> */}
               <Area
@@ -105,26 +105,29 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         elevation="small"
         round="xsmall"
         background="white"
-        margin={{ horizontal: '16px', top: 'medium' }}
-        style={{ flex: '1 1 300px', maxWidth: '430px' }}
+        margin={{ horizontal: '16px' }}
+        style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
         justify="center"
       >
         <Box>
-          <AxisTooltip title="Tinlake investments earns daily rewards in Centrifuge's native token (CFG). The CFG reward rate is an annualized representation of these rewards based on the current CFG token price. Rewards are independent from the pool's issuer and not guaranteed - please see Investment disclaimer for more details.">
-            <>
-              <Cont style={{ marginTop: '8px' }}>
-                <TokenLogo src={`/static/cfg-white.svg`} />
-                <Value>
-                  <NumberDisplay value={cfgYield} precision={2} />
-                </Value>{' '}
-                <Unit>%</Unit>
-              </Cont>
+          <>
+            <Cont style={{ marginTop: '8px' }}>
+              <TokenLogo src={`/static/cfg-white.svg`} />
+              <Value>
+                <NumberDisplay value={cfgYield} precision={2} />
+              </Value>{' '}
+              <Unit>%</Unit>
+            </Cont>
 
+            <Tooltip
+              title="Tinlake investments earns daily rewards in Centrifuge's native token (CFG). The CFG reward rate is an annualized representation of these rewards based on the current CFG token price. Rewards are independent from the pool's issuer and not guaranteed - please see Investment disclaimer for more details."
+              underline
+            >
               <Label>Reward Rate (APR)</Label>
-            </>
-          </AxisTooltip>
+            </Tooltip>
+          </>
         </Box>
         <Box margin={{ left: 'large' }} justify="center">
           <Button label="Claim CFG" primary onClick={goToRewards} />
diff --git a/tinlake-ui/components/TinlakeExplainer/index.tsx b/tinlake-ui/components/TinlakeExplainer/index.tsx
index 550e66811e..f6c4a44be0 100644
--- a/tinlake-ui/components/TinlakeExplainer/index.tsx
+++ b/tinlake-ui/components/TinlakeExplainer/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import InvestmentDisclaimer from '../Footer/InvestmentDisclaimer'
-import { Container, Primer, Row, Text } from './styles'
+import { Primer, Row, Text } from './styles'
 
 const LearnMore = styled.span`
   text-decoration: underline;
@@ -20,7 +20,7 @@ const TinlakeExplainer: React.FC = () => {
   const [open, setOpen] = React.useState(false)
 
   return (
-    <Container>
+    <div>
       <Row onClick={() => setOpen(!open)} role="button">
         <Primer>
           Tinlake is an open market place of real-world asset pools. Investments earn rewards in CFG token.{' '}
@@ -48,7 +48,7 @@ const TinlakeExplainer: React.FC = () => {
       )}
 
       <InvestmentDisclaimer isOpen={modalIsOpen} onClose={closeModal} />
-    </Container>
+    </div>
   )
 }
 
diff --git a/tinlake-ui/components/TinlakeExplainer/styles.ts b/tinlake-ui/components/TinlakeExplainer/styles.ts
index a13e7ff0af..df994a8590 100644
--- a/tinlake-ui/components/TinlakeExplainer/styles.ts
+++ b/tinlake-ui/components/TinlakeExplainer/styles.ts
@@ -1,9 +1,5 @@
 import styled from 'styled-components'
 
-export const Container = styled.div`
-  padding-bottom: 12px;
-`
-
 export const Row = styled.div`
   cursor: pointer;
   display: flex;
diff --git a/tinlake-ui/components/Tooltip/index.tsx b/tinlake-ui/components/Tooltip/index.tsx
index 2d5ab768fb..cdab490eb4 100644
--- a/tinlake-ui/components/Tooltip/index.tsx
+++ b/tinlake-ui/components/Tooltip/index.tsx
@@ -1,45 +1,72 @@
 import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import * as React from 'react'
+import styled from 'styled-components'
 import tooltips from '../../static/tooltips.json'
 
-interface Props {
-  id: keyof typeof tooltips
+interface BaseProps {
   children: React.ReactNode
+  underline?: boolean
+}
+
+interface PropsWithID extends BaseProps {
+  id: keyof typeof tooltips
 }
 
-// TODO: this is an experiment for better indicating tooltips, but should be improved upon at a later time
-// const Wrapper = styled.div`
-//   &:hover {
-//     &::after {
-//       content: ' ?';
-//       margin-left: 8px;
-//       background: rgba(0, 0, 0, 0.8);
-//       color: #fff;
-//       padding: 3px 7px 3px 4px;
-//       font-weight: bold;
-//       border-radius: 100%;
-//       font-size: 12px;
-//     }
-//   }
-// `
+interface PropsWithoutID extends BaseProps {
+  title: string
+  link?: string
+  description?: string
+}
+
+interface Tooltip {
+  title: string
+  link?: string
+  description?: string
+}
+
+type Props = PropsWithID | PropsWithoutID
+
+const Wrapper = styled.span<{ underline?: boolean; fix?: boolean }>`
+  [data-tip] > *,
+  [data-tip] {
+    border-bottom: ${(props) => (props.underline ? '1px dotted #bbbbbb' : undefined)};
+  }
+  /* react-tooltip doesn't play nice with SSR, so this dirty fix prevents a black line from showing on tooltip buttons */
+  .__react_component_tooltip {
+    ${(props) => props.fix && `display: none;`}
+  }
+`
+
+let serverHandoffComplete = false
 
 export const Tooltip: React.FC<Props> = (props: Props) => {
-  return props.id in tooltips ? (
-    <AxisTooltip
-      title={tooltips[props.id].title}
-      description={tooltips[props.id].description}
-      link={
-        'link' in tooltips[props.id]
-          ? {
-              text: 'Learn more',
-              url: (tooltips[props.id] as any).link,
-            }
-          : undefined
-      }
-    >
-      {props.children}
-    </AxisTooltip>
-  ) : (
-    <>{props.children}</>
+  const { title, link, description } = 'id' in props ? (tooltips[props.id] as Tooltip) : props
+  const [fix, setFix] = React.useState(serverHandoffComplete ? false : true)
+
+  React.useEffect(() => {
+    serverHandoffComplete = true
+
+    if (fix) {
+      setFix(false)
+    }
+  }, [])
+
+  return (
+    <Wrapper underline={props.underline} fix={fix}>
+      <AxisTooltip
+        title={title}
+        description={description}
+        link={
+          link
+            ? {
+                text: 'Learn more',
+                url: link,
+              }
+            : undefined
+        }
+      >
+        {props.children}
+      </AxisTooltip>
+    </Wrapper>
   )
 }
diff --git a/tinlake-ui/containers/ClaimRewards/index.tsx b/tinlake-ui/containers/ClaimRewards/index.tsx
index ed7fda7511..ce838c420d 100644
--- a/tinlake-ui/containers/ClaimRewards/index.tsx
+++ b/tinlake-ui/containers/ClaimRewards/index.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Anchor, Box, Button } from 'grommet'
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import Alert from '../../components/Alert'
+import { Tooltip } from '../../components/Tooltip'
 import { PortfolioState } from '../../ducks/portfolio'
 import { RewardsState } from '../../ducks/rewards'
 import { TransactionStatus } from '../../ducks/transactions'
@@ -89,6 +89,7 @@ const ClaimRewards: React.FC<Props> = ({ activeLink }: Props) => {
                     description={`Your unclaimed rewards on this Centrifuge Chain account can be higher than the rewards you earned on the connected
                       Ethereum account if you have set this Centrifuge Chain account as recipient for multiple
                       Ethereum accounts.`}
+                    underline
                   >
                     <Small>
                       Your unclaimed rewards are higher than the rewards on the connected Ethereum account. Learn why...
@@ -139,6 +140,7 @@ const ClaimRewards: React.FC<Props> = ({ activeLink }: Props) => {
                   description={`Your claimed rewards on this Centrifuge Chain account can be higher than the rewards you earned on the connected Ethereum
                       account if you have set this Centrifuge Chain account as recipient for multiple Ethereum
                       accounts.`}
+                  underline
                 >
                   <Small>
                     Your claimed rewards are higher than the rewards on the connected Ethereum account. Learn why...
diff --git a/tinlake-ui/containers/Dashboard/index.tsx b/tinlake-ui/containers/Dashboard/index.tsx
index bb8b74ef8f..b286f47e59 100644
--- a/tinlake-ui/containers/Dashboard/index.tsx
+++ b/tinlake-ui/containers/Dashboard/index.tsx
@@ -30,10 +30,10 @@ const Dashboard: React.FC<Props> = (props: Props) => {
       ) : (
         pools.data && (
           <Box basis={'full'}>
-            <Box margin={{ top: 'medium', bottom: 'none' }} direction="row">
+            <Box margin={{ top: 'large', bottom: 'none' }} direction="row">
               <TinlakeExplainer />
             </Box>
-            <Box direction="row" gap="large" margin={{ bottom: 'medium', top: 'medium' }} justify="center" wrap>
+            <Box direction="row" gap="large" margin={{ bottom: 'medium', top: 'large' }} justify="center" wrap>
               <PoolsMetrics pools={pools.data} tinlake={props.tinlake} />
             </Box>
             <PoolList poolsData={pools.data} />
diff --git a/tinlake-ui/containers/Investment/View/EpochOverview.tsx b/tinlake-ui/containers/Investment/View/EpochOverview.tsx
index 4045f6e08f..2e0638b431 100644
--- a/tinlake-ui/containers/Investment/View/EpochOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/EpochOverview.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay, ITinlake } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Box, Button, Table, TableBody, TableCell, TableHeader, TableRow } from 'grommet'
@@ -9,6 +8,7 @@ import { connect, useSelector } from 'react-redux'
 import styled from 'styled-components'
 import { SolverResult } from '../../../../tinlake.js/dist/services/solver/solver'
 import { LoadingValue } from '../../../components/LoadingValue/index'
+import { Tooltip } from '../../../components/Tooltip'
 import { Pool } from '../../../config'
 import { AuthState } from '../../../ducks/auth'
 import { EpochData, PoolData, PoolState } from '../../../ducks/pool'
@@ -162,8 +162,8 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
 
             {epochData?.state === 'open' && (
               <Tooltip
-                title="Tinlake epochs have a minimum duration of 24 hours. Once the minimum duration has passed, the epoch will be closed and, if possible, the orders will be executed.
-              "
+                title="Tinlake epochs have a minimum duration of 24 hours. Once the minimum duration has passed, the epoch will be closed and, if possible, the orders will be executed."
+                underline
               >
                 <h5>{secondsToHms(epochData?.minimumEpochTimeLeft || 0)} until end of minimum duration</h5>
               </Tooltip>
@@ -171,34 +171,52 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
             {epochData?.state === 'can-be-closed' && (
               <>
                 {getSolutionState() === 'to-be-closed' && (
-                  <Tooltip title="The minimum epoch duration has passed and will soon be closed automatically. All locked orders will be executed.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed and will soon be closed automatically. All locked orders will be executed."
+                    underline
+                  >
                     <h5>To be closed</h5>
                   </Tooltip>
                 )}
                 {getSolutionState() === 'no-orders-locked' && (
-                  <Tooltip title="The minimum epoch duration has passed but currently no orders are locked. The epoch will be closed once orders are locked and can be executed.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed but currently no orders are locked. The epoch will be closed once orders are locked and can be executed."
+                    underline
+                  >
                     <h5>No orders locked</h5>
                   </Tooltip>
                 )}
                 {getSolutionState() === 'no-executions' && (
-                  <Tooltip title="The minimum epoch duration has passed but the locked orders cannot be executed. This may be because the pool is oversubscribed or no liquidity is available for redemptions. The epoch will be closed and orders executed as soon as the pool state changes or liquidity is provided.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed but the locked orders cannot be executed. This may be because the pool is oversubscribed or no liquidity is available for redemptions. The epoch will be closed and orders executed as soon as the pool state changes or liquidity is provided."
+                    underline
+                  >
                     <h5>Locked orders cannot be executed</h5>
                   </Tooltip>
                 )}
                 {getSolutionState() === 'partial-executions' && (
-                  <Tooltip title="The minimum epoch duration has passed but only a fraction of the locked orders could be executed. The epoch is not automatically closed to avoid unsustainable gas fees for small transaction amounts.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed but only a fraction of the locked orders could be executed. The epoch is not automatically closed to avoid unsustainable gas fees for small transaction amounts."
+                    underline
+                  >
                     <h5>Locked orders can only be partially executed</h5>
                   </Tooltip>
                 )}
               </>
             )}
             {epochData?.state === 'in-submission-period' && (
-              <Tooltip title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed.">
+              <Tooltip
+                title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed."
+                underline
+              >
                 <h5>Minimum {secondsToHms(epochData?.challengeTime || 0)} remaining</h5>
               </Tooltip>
             )}
             {epochData?.state === 'in-challenge-period' && (
-              <Tooltip title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed.">
+              <Tooltip
+                title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed."
+                underline
+              >
                 <h5>
                   {secondsToHms((epochData?.minChallengePeriodEnd || 0) + 60 - new Date().getTime() / 1000)}{' '}
                   remaining...
@@ -206,7 +224,10 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
               </Tooltip>
             )}
             {epochData?.state === 'challenge-period-ended' && (
-              <Tooltip title="The epoch has been closed and orders have been computed. The orders will be executed shortly.">
+              <Tooltip
+                title="The epoch has been closed and orders have been computed. The orders will be executed shortly."
+                underline
+              >
                 <h5>To be closed</h5>
               </Tooltip>
             )}
@@ -506,7 +527,6 @@ const EpochState = styled.div`
     font-size: 14px;
     margin: 0 0 0 14px;
     color: #777777;
-    border-bottom: 1px dotted #777777;
   }
 `
 
diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index 8e816d6312..5e7e806aae 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -104,12 +104,14 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
           round="xsmall"
           margin={{ bottom: 'medium' }}
           background="white"
-          style={{ flex: '1 1 40%' }}
+          style={{ flex: '1 1 35%' }}
         >
           <Box>
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
-                <Tooltip id="assetValue">Asset Value</Tooltip>
+                <Tooltip id="assetValue" underline>
+                  Asset Value
+                </Tooltip>
               </Heading>
               <Heading level="5" margin={{ left: 'auto', top: '0', bottom: '0' }}>
                 <LoadingValue done={poolData?.netAssetValue !== undefined}>
@@ -138,7 +140,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
                 </TableRow>
                 <TableRow>
                   <TableCell scope="row">
-                    <Tooltip id="financingFee">Average Financing Fee</Tooltip>
+                    <Tooltip id="financingFee" underline>
+                      Average Financing Fee
+                    </Tooltip>
                   </TableCell>
                   <TableCell style={{ textAlign: 'end' }}>
                     <LoadingValue done={avgInterestRate !== undefined}>
@@ -163,7 +167,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
 
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
-                <Tooltip id="poolValue">Reserve</Tooltip>
+                <Tooltip id="reserve" underline>
+                  Reserve
+                </Tooltip>
               </Heading>
               <Heading level="5" margin={{ left: 'auto', top: '0', bottom: '0' }}>
                 <LoadingValue done={poolData?.reserve !== undefined}>
@@ -177,7 +183,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <TableBody>
                 <TableRow>
                   <TableCell scope="row" border={{ color: 'transparent' }}>
-                    <Tooltip id="reserveRatio">Reserve Ratio</Tooltip>
+                    <Tooltip id="reserveRatio" underline>
+                      Reserve Ratio
+                    </Tooltip>
                   </TableCell>
                   <TableCell style={{ textAlign: 'end' }} border={{ color: 'transparent' }}>
                     <LoadingValue done={reserveRatio !== undefined}>
@@ -203,7 +211,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <Box direction="column">
                 <Heading level="5" margin={{ bottom: 'xsmall', top: '0' }}>
                   <TokenLogo src={`/static/DROP_final.svg`} />
-                  <Tooltip id="dropValue">DROP Tranche Value</Tooltip>
+                  DROP Tranche Value
                 </Heading>
                 <TrancheNote>Senior tranche</TrancheNote>
                 <TrancheNote>Lower risk, stable return</TrancheNote>
@@ -242,13 +250,14 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
 
           <Box margin={{ top: 'small', bottom: 'medium' }} style={{ textAlign: 'center' }}>
             <div>
-              <Tooltip id="tinRiskBuffer">
-                DROP is currently protected by a<br />
-                <span style={{ fontWeight: 'bold' }}>
-                  {toPrecision((Math.round((currentJuniorRatio || 0) * 10000) / 100).toString(), 2)}% TIN buffer
-                </span>{' '}
-                (min: {toPrecision((Math.round((minJuniorRatio || 0) * 10000) / 100).toString(), 2)}%)
-              </Tooltip>
+              DROP is currently protected by a<br />
+              <span style={{ fontWeight: 'bold' }}>
+                {toPrecision((Math.round((currentJuniorRatio || 0) * 10000) / 100).toString(), 2)}%{' '}
+                <Tooltip id="tinRiskBuffer" underline>
+                  TIN buffer
+                </Tooltip>
+              </span>{' '}
+              (min: {toPrecision((Math.round((minJuniorRatio || 0) * 10000) / 100).toString(), 2)}%)
             </div>
           </Box>
 
@@ -261,7 +270,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <Box direction="column">
                 <Heading level="5" margin={{ bottom: 'xsmall', top: '0' }}>
                   <TokenLogo src={`/static/TIN_final.svg`} />
-                  <Tooltip id="tinValue">TIN Tranche Value</Tooltip>
+                  TIN Tranche Value
                 </Heading>
                 <TrancheNote>Junior tranche</TrancheNote>
                 <TrancheNote>Higher risk, variable return</TrancheNote>
diff --git a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
index 1bff4431a2..97df46fc4f 100644
--- a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
@@ -1,4 +1,3 @@
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay, feeToInterestRate, ITinlake } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Anchor, Box, Button, Heading, Table, TableBody, TableCell, TableRow } from 'grommet'
@@ -9,6 +8,7 @@ import styled from 'styled-components'
 import InvestAction from '../../../components/InvestAction'
 import { LoadingValue } from '../../../components/LoadingValue/index'
 import { PoolLink } from '../../../components/PoolLink'
+import { Tooltip } from '../../../components/Tooltip'
 import config, { Pool } from '../../../config'
 import { ensureAuthed } from '../../../ducks/auth'
 import { loadPool, PoolState } from '../../../ducks/pool'
@@ -315,7 +315,7 @@ const TrancheOverview: React.FC<Props> = (props: Props) => {
             config.featureFlagNewOnboardingPools.includes(props.pool.addresses.ROOT_CONTRACT))) && (
           <>
             <Info>
-              <AxisTooltip title="DROP tokens earn yield on the outstanding assets at the fixed DROP rate (APR). The current yield may deviate due to compounding effects or unused liquidity in the pool reserve. The current 30d DROP APY is the annualized return of the pool's DROP token over the last 30 days.">
+              <Tooltip title="DROP tokens earn yield on the outstanding assets at the fixed DROP rate (APR). The current yield may deviate due to compounding effects or unused liquidity in the pool reserve. The current 30d DROP APY is the annualized return of the pool's DROP token over the last 30 days.">
                 {dropYield && !(pool?.data?.netAssetValue.isZero() && pool?.data?.reserve.isZero()) && (
                   <>
                     Current DROP yield (30d APY): <b>{dropYield}%</b>
@@ -326,7 +326,7 @@ const TrancheOverview: React.FC<Props> = (props: Props) => {
                 <b>{toPrecision(feeToInterestRate(trancheData?.interestRate || new BN(0)), 2)}%</b>
                 <br />
                 Minimum investment amount: <b>5000 {props.pool?.metadata.currencySymbol || 'DAI'}</b>
-              </AxisTooltip>
+              </Tooltip>
             </Info>
             <Box gap="small" justify="end" direction="row" margin={{ top: 'medium' }}>
               <PoolLink href={'/onboarding'}>
diff --git a/tinlake-ui/containers/Loan/Overview/index.tsx b/tinlake-ui/containers/Loan/Overview/index.tsx
index 21e4d9c1c7..7506e26608 100644
--- a/tinlake-ui/containers/Loan/Overview/index.tsx
+++ b/tinlake-ui/containers/Loan/Overview/index.tsx
@@ -3,7 +3,7 @@ import BN from 'bn.js'
 import { Box, Button, Heading, Table, TableBody, TableCell, TableRow } from 'grommet'
 import * as React from 'react'
 import { connect, useDispatch, useSelector } from 'react-redux'
-import { Area, AreaChart, ResponsiveContainer, Tooltip } from 'recharts'
+import { Area, AreaChart, Tooltip } from 'recharts'
 import {
   ChartTooltip,
   ChartTooltipColor,
@@ -11,6 +11,7 @@ import {
   ChartTooltipLine,
   ChartTooltipTitle,
   ChartTooltipValue,
+  StyledResponsiveContainer,
 } from '../../../components/Chart/styles'
 import { LoadingValue } from '../../../components/LoadingValue/index'
 import { Pool } from '../../../config'
@@ -258,7 +259,7 @@ const LoanOverview: React.FC<Props> = (props: Props) => {
             </Heading>
           </Box>
           {assetDataWithToday.length > 0 && (
-            <ResponsiveContainer>
+            <StyledResponsiveContainer>
               <AreaChart data={assetDataWithToday} margin={{ top: 4, right: 4, left: 4, bottom: 4 }}>
                 <defs>
                   <linearGradient id="colorAssetValue" x1="0" y1="0" x2="0" y2="1">
@@ -293,7 +294,7 @@ const LoanOverview: React.FC<Props> = (props: Props) => {
                   name="Reserve"
                 />
               </AreaChart>
-            </ResponsiveContainer>
+            </StyledResponsiveContainer>
           )}
         </Box>
       </Box>
diff --git a/tinlake-ui/containers/Portfolio/index.tsx b/tinlake-ui/containers/Portfolio/index.tsx
index b4dd3b0bf3..c81142f4ee 100644
--- a/tinlake-ui/containers/Portfolio/index.tsx
+++ b/tinlake-ui/containers/Portfolio/index.tsx
@@ -1,5 +1,4 @@
 import { DisplayField } from '@centrifuge/axis-display-field'
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Box, Button, Heading } from 'grommet'
@@ -24,6 +23,7 @@ import {
   Unit,
 } from '../../components/PoolList/styles'
 import { Cont, Label as MetricLabel, TokenLogo, Value } from '../../components/PoolsMetrics/styles'
+import { Tooltip } from '../../components/Tooltip'
 import { IpfsPools, Pool } from '../../config'
 import { loadPools, PoolData, PoolsState } from '../../ducks/pools'
 import { loadPortfolio, PortfolioState, TokenBalance } from '../../ducks/portfolio'
@@ -162,7 +162,9 @@ const Portfolio: React.FC<Props> = (props: Props) => {
             </HeaderCol>
             <HeaderCol>
               <HeaderTitle>
-                <AxisTooltip title="Token prices for this overview are updated daily">Current Price</AxisTooltip>
+                <Tooltip underline title="Token prices for this overview are updated daily">
+                  Current Price
+                </Tooltip>
               </HeaderTitle>
             </HeaderCol>
             <HeaderCol>
diff --git a/tinlake-ui/containers/SetCentAccount/index.tsx b/tinlake-ui/containers/SetCentAccount/index.tsx
index 49dde504cc..0a1b8f8898 100644
--- a/tinlake-ui/containers/SetCentAccount/index.tsx
+++ b/tinlake-ui/containers/SetCentAccount/index.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@centrifuge/axis-tooltip'
 import { ITinlake } from '@centrifuge/tinlake-js'
 import { Box, Button, Select } from 'grommet'
 import { CircleAlert } from 'grommet-icons'
 import * as React from 'react'
 import { connect, useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
+import { Tooltip } from '../../components/Tooltip'
 import { AuthState } from '../../ducks/auth'
 import { CentChainWalletState, InjectedAccount } from '../../ducks/centChainWallet'
 import { createTransaction, TransactionProps, useTransactionState } from '../../ducks/transactions'
@@ -109,6 +109,7 @@ const SetCentAccount: React.FC<Props> = ({ createTransaction, tinlake }: Props)
         <Tooltip
           title="Why so slow?"
           description={`Communication between the Ethereum blockchain and our Centrifuge Chain is semi-automated. Every link transaction on Ethereum will be observed by a relayer, a proof will be generated, and that proof will be committed on Centrfiuge Chain. This process is running only once per day.`}
+          underline
         >
           <Small>Why so slow?</Small>
         </Tooltip>
@@ -168,6 +169,7 @@ const SetCentAccount: React.FC<Props> = ({ createTransaction, tinlake }: Props)
         description={`Your address may show up ${
           selectedCentAcc ? `as ${shortAddr(selectedCentAcc.addrInjected)}` : 'differently'
         } in the Polkadot extension. In the extension settings, change the display address format to "Centrifuge Chain" to see your address in the right format.`}
+        underline
       >
         <Small>Unexpected/wrong addresses?</Small>
       </Tooltip>
diff --git a/tinlake-ui/package.json b/tinlake-ui/package.json
index a6808444c6..b0bbcdff6c 100644
--- a/tinlake-ui/package.json
+++ b/tinlake-ui/package.json
@@ -40,7 +40,7 @@
     "@centrifuge/axis-spinner": "0.4.2-develop.109",
     "@centrifuge/axis-theme": "0.4.2-develop.145",
     "@centrifuge/axis-token-input": "0.4.1-develop.c79e643.146+c79e643",
-    "@centrifuge/axis-tooltip": "0.4.2-develop.6d6e183.148",
+    "@centrifuge/axis-tooltip": "0.4.2-develop.3ad09d7.144+3ad09d7",
     "@centrifuge/axis-utils": "0.4.2-develop.109",
     "@centrifuge/onboarding-api": "workspace:*",
     "@centrifuge/tinlake-js": "workspace:*",
diff --git a/tinlake-ui/static/tooltips.json b/tinlake-ui/static/tooltips.json
index d07977b9fe..dc1b12faee 100644
--- a/tinlake-ui/static/tooltips.json
+++ b/tinlake-ui/static/tooltips.json
@@ -81,6 +81,10 @@
     "title": "Financing Fee",
     "description": "Annual interest rate (APR) at which the interest for the outstanding financing is accrued with compounding per second."
   },
+  "reserve": {
+    "title": "Reserve",
+    "description": "The Reserve is the current liquidity in the pool that is not deployed to finance assets. It is available for redemption by investors and asset originations by the Asset Originator."
+  },
   "reserveRatio": {
     "title": "Reserve Ratio",
     "description": "The Reserve Ratio expresses the reserve in relation to the pool value and gives an indication of the current liquidity of the pool. A high reserve ration indicates high liquidity of the pool which fosters immediate redemptions for investors but may also drag down effective returns."
diff --git a/yarn.lock b/yarn.lock
index 795f30c67f..2224f92b56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2425,15 +2425,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@centrifuge/axis-tooltip@npm:0.4.2-develop.6d6e183.148":
-  version: 0.4.2-develop.6d6e183.148
-  resolution: "@centrifuge/axis-tooltip@npm:0.4.2-develop.6d6e183.148"
+"@centrifuge/axis-tooltip@npm:0.4.2-develop.3ad09d7.144+3ad09d7":
+  version: 0.4.2-develop.3ad09d7.144
+  resolution: "@centrifuge/axis-tooltip@npm:0.4.2-develop.3ad09d7.144"
   peerDependencies:
     grommet: 2.7.x
     react: ">= 16.6.1"
     react-dom: ">= 16.6.1"
     styled-components: ">= 4.x"
-  checksum: 4788979abccf83ce98f61810aff526d13cc1e777f255cffec06b1150d28dcdea525d679c2f9958cb242990bbb2dcf00f2e7a5f5de7c8d51145ef10ab16a5226d
+  checksum: 31e3bb401ca73ca3ddf8f2f97bfd456279b437490c9c85e9759d034267d7a9a11519ac1c9c8e4b7293fbd45425b2eaec686e67eddfd325f55b5a9a85c830403e
   languageName: node
   linkType: hard
 
@@ -2763,7 +2763,7 @@ __metadata:
     "@centrifuge/axis-spinner": 0.4.2-develop.109
     "@centrifuge/axis-theme": 0.4.2-develop.145
     "@centrifuge/axis-token-input": 0.4.1-develop.c79e643.146+c79e643
-    "@centrifuge/axis-tooltip": 0.4.2-develop.6d6e183.148
+    "@centrifuge/axis-tooltip": 0.4.2-develop.3ad09d7.144+3ad09d7
     "@centrifuge/axis-utils": 0.4.2-develop.109
     "@centrifuge/onboarding-api": "workspace:*"
     "@centrifuge/tinlake-js": "workspace:*"