diff --git a/tinlake-ui/components/Loan/List/index.tsx b/tinlake-ui/components/Loan/List/index.tsx
index d86a65ad9f..0de05fd56c 100644
--- a/tinlake-ui/components/Loan/List/index.tsx
+++ b/tinlake-ui/components/Loan/List/index.tsx
@@ -29,69 +29,74 @@ class LoanList extends React.Component<Props> {
     const { loans } = this.props
     return (
       <Box pad="medium" elevation="small" round="xsmall" margin={{ bottom: 'medium' }} background="white">
-        <DataTable
-          style={{ tableLayout: 'auto' }}
-          data={loans}
-          sort={{ direction: 'desc', property: 'loanId' }}
-          pad="xsmall"
-          sortable
-          onClickRow={this.clickRow as any}
-          columns={[
-            { header: <HeaderCell text={'Asset ID'}></HeaderCell>, property: 'loanId', align: 'end' },
-            {
-              header: 'NFT ID',
-              primary: true,
-              property: 'tokenId',
-              align: 'end',
-              render: (l: SortableLoan) => (
-                <Box style={{ maxWidth: '150px' }}>
-                  <DisplayField as={'span'} value={hexToInt(bnToHex(l.tokenId).toString())} />
-                </Box>
-              ),
-            },
-            {
-              header: 'Outstanding (DAI)',
-              property: 'debtNum',
-              align: 'end',
-              render: (l: SortableLoan) => <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.debt, 18)} />,
-            },
-            {
-              header: 'Available for Financing (DAI)',
-              property: 'principalNum',
-              align: 'end',
-              render: (l: SortableLoan) => (
-                <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.principal, 18)} />
-              ),
-            },
-            {
-              header: <HeaderCell text={'Financing Fee'}></HeaderCell>,
-              property: 'interestRateNum',
-              align: 'end',
-              render: (l: SortableLoan) =>
-                l.status === 'Repaid' ? (
-                  '-'
-                ) : (
-                  <NumberDisplay suffix=" %" precision={2} value={feeToInterestRate(l.interestRate)} />
+        {loans.length > 0 && (
+          <DataTable
+            style={{ tableLayout: 'auto' }}
+            data={loans}
+            sort={{ direction: 'desc', property: 'loanId' }}
+            pad="xsmall"
+            sortable
+            onClickRow={this.clickRow as any}
+            columns={[
+              { header: <HeaderCell text={'Asset ID'}></HeaderCell>, property: 'loanId', align: 'end' },
+              {
+                header: 'NFT ID',
+                primary: true,
+                property: 'tokenId',
+                align: 'end',
+                render: (l: SortableLoan) => (
+                  <Box style={{ maxWidth: '150px' }}>
+                    <DisplayField as={'span'} value={hexToInt(bnToHex(l.tokenId).toString())} />
+                  </Box>
                 ),
-            },
-            {
-              header: 'Status',
-              property: 'status',
-              align: 'end',
-              render: (l: SortableLoan) => l.status,
-            },
-            {
-              header: '',
-              property: 'id',
-              align: 'center',
-              sortable: false,
-              size: '36px',
-              render: (_l: SortableLoan) => {
-                return <ChevronRight />
               },
-            },
-          ]}
-        />
+              {
+                header: 'Outstanding (DAI)',
+                property: 'debtNum',
+                align: 'end',
+                render: (l: SortableLoan) => (
+                  <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.debt, 18)} />
+                ),
+              },
+              {
+                header: 'Available for Financing (DAI)',
+                property: 'principalNum',
+                align: 'end',
+                render: (l: SortableLoan) => (
+                  <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.principal, 18)} />
+                ),
+              },
+              {
+                header: <HeaderCell text={'Financing Fee'}></HeaderCell>,
+                property: 'interestRateNum',
+                align: 'end',
+                render: (l: SortableLoan) =>
+                  l.status === 'Repaid' ? (
+                    '-'
+                  ) : (
+                    <NumberDisplay suffix=" %" precision={2} value={feeToInterestRate(l.interestRate)} />
+                  ),
+              },
+              {
+                header: 'Status',
+                property: 'status',
+                align: 'end',
+                render: (l: SortableLoan) => l.status,
+              },
+              {
+                header: '',
+                property: 'id',
+                align: 'center',
+                sortable: false,
+                size: '36px',
+                render: (_l: SortableLoan) => {
+                  return <ChevronRight />
+                },
+              },
+            ]}
+          />
+        )}
+        {loans.length === 0 && <Text>No assets have been originated.</Text>}
       </Box>
     )
   }
diff --git a/tinlake-ui/components/OnboardModal/index.tsx b/tinlake-ui/components/OnboardModal/index.tsx
index f6b1dee356..4450e29e1b 100644
--- a/tinlake-ui/components/OnboardModal/index.tsx
+++ b/tinlake-ui/components/OnboardModal/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import config, { Pool, UpcomingPool } from '../../config'
-import { AuthState, ensureAuthed } from '../../ducks/auth'
+import { ensureAuthed } from '../../ducks/auth'
 import { PoolData as PoolDataV3, PoolState } from '../../ducks/pool'
 import { PoolsState } from '../../ducks/pools'
 import { PoolLink } from '../PoolLink'
@@ -25,7 +25,6 @@ const OnboardModal: React.FC<Props> = (props: Props) => {
   const router = useRouter()
   const dispatch = useDispatch()
 
-  const authState = useSelector<any, AuthState>((state) => state.auth)
   const pools = useSelector<any, PoolsState>((state) => state.pools)
   const pool = useSelector<any, PoolState>((state) => state.pool)
   const poolData = pool?.data as PoolDataV3 | undefined
@@ -90,10 +89,6 @@ const OnboardModal: React.FC<Props> = (props: Props) => {
     getOnboardingStatus()
   }, [pools])
 
-  React.useEffect(() => {
-    console.log(authState.authState)
-  }, [authState.authState])
-
   return (
     <>
       {(poolData?.senior?.inMemberlist || poolData?.junior?.inMemberlist) && (
diff --git a/tinlake-ui/components/Overview/index.tsx b/tinlake-ui/components/Overview/index.tsx
index 40213ffb46..f29a1ec0d1 100644
--- a/tinlake-ui/components/Overview/index.tsx
+++ b/tinlake-ui/components/Overview/index.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import InvestAction from '../../components/InvestAction'
 import OnboardModal from '../../components/OnboardModal'
 import { PoolLink } from '../../components/PoolLink'
+import PoolTitle from '../../components/PoolTitle'
 import config, { Pool, UpcomingPool } from '../../config'
 import InvestmentOverview from '../../containers/Investment/View/InvestmentOverview'
 import { PoolState } from '../../ducks/pool'
@@ -21,7 +22,7 @@ const Overview: React.FC<Props> = (props: Props) => {
     <Box margin={{ bottom: 'large', top: 'medium' }}>
       {!isUpcoming && (
         <>
-          <Heading level="4">Pool Overview of {props.selectedPool.metadata.name} </Heading>
+          <PoolTitle pool={props.selectedPool} page="Pool Overview" />
           <InvestmentOverview selectedPool={props.selectedPool} tinlake={props.tinlake} />
         </>
       )}
diff --git a/tinlake-ui/components/PoolTitle/index.tsx b/tinlake-ui/components/PoolTitle/index.tsx
new file mode 100644
index 0000000000..2a2920fe73
--- /dev/null
+++ b/tinlake-ui/components/PoolTitle/index.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { Pool, UpcomingPool } from '../../config'
+
+interface Props {
+  pool: Pool | UpcomingPool
+  page: string
+}
+
+const PoolTitle: React.FC<Props> = (props: Props) => {
+  return (
+    <Wrapper>
+      <Icon
+        src={
+          props.pool.metadata.media?.icon || 'https://storage.googleapis.com/tinlake/pool-media/icon-placeholder.svg'
+        }
+      />
+      <PageTitle>
+        <PageName>{props.page}</PageName>
+        <PoolName>{props.pool.metadata.name}</PoolName>
+      </PageTitle>
+    </Wrapper>
+  )
+}
+
+export default PoolTitle
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 12px 0 36px 8px;
+`
+
+const Icon = styled.img`
+  width: 40px;
+  height: 40px;
+  margin: 4px 16px 0 0;
+`
+
+const PageTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const PageName = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  margin: 0;
+`
+
+const PoolName = styled.h2`
+  font-size: 13px;
+  font-weight: bold;
+  margin: 0;
+  color: #979797;
+`
diff --git a/tinlake-ui/components/TINRatioBar/index.tsx b/tinlake-ui/components/TINRatioBar/index.tsx
index 9447a6ccc4..b8704a18fd 100644
--- a/tinlake-ui/components/TINRatioBar/index.tsx
+++ b/tinlake-ui/components/TINRatioBar/index.tsx
@@ -61,13 +61,6 @@ export const TINRatioBar: React.FC<Props> = (props: Props) => {
       const newSegments = [...minSegments, ...maxSegments]
 
       setSegments(newSegments)
-    } else {
-      setSegments([
-        {
-          width: 100,
-          backgroundColor: '#D8D8D8',
-        },
-      ])
     }
   }, [props.min, props.current, props.max])
 
diff --git a/tinlake-ui/components/TinlakeExplainer/index.tsx b/tinlake-ui/components/TinlakeExplainer/index.tsx
index fe642adf55..a6f4c46d38 100644
--- a/tinlake-ui/components/TinlakeExplainer/index.tsx
+++ b/tinlake-ui/components/TinlakeExplainer/index.tsx
@@ -1,4 +1,4 @@
-import { Anchor } from 'grommet'
+import { Box, Button } from 'grommet'
 import { FormDown } from 'grommet-icons'
 import * as React from 'react'
 import { Btn, Caret, Container, Primer, Row, Text } from './styles'
@@ -27,12 +27,17 @@ const TinlakeExplainer: React.FC = () => {
           tokenized real-world assets such as invoices, mortgages or streaming royalties. Tinlake’s smart contract
           platform coordinates the different parties required to structure, administer and finance collateralized pools
           of these real-world assets.
-          <Anchor
-            margin={{ left: 'xsmall', top: 'small' }}
-            href="https://centrifuge.io/products/tinlake/"
-            target="_blank"
-            label="Learn more"
-          />
+          <Box justify="center">
+            <Box margin={{ bottom: 'small', left: 'auto', right: 'auto' }}>
+              <Button
+                primary
+                label="Read more about Tinlake"
+                href="https://centrifuge.io/products/tinlake/"
+                target="_blank"
+                fill={false}
+              />
+            </Box>
+          </Box>
         </Text>
       )}
     </Container>
diff --git a/tinlake-ui/components/Tooltip/index.tsx b/tinlake-ui/components/Tooltip/index.tsx
index 444f924b73..2d5ab768fb 100644
--- a/tinlake-ui/components/Tooltip/index.tsx
+++ b/tinlake-ui/components/Tooltip/index.tsx
@@ -7,6 +7,22 @@ interface Props {
   children: React.ReactNode
 }
 
+// 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;
+//     }
+//   }
+// `
+
 export const Tooltip: React.FC<Props> = (props: Props) => {
   return props.id in tooltips ? (
     <AxisTooltip
diff --git a/tinlake-ui/containers/Investment/View/EpochOverview.tsx b/tinlake-ui/containers/Investment/View/EpochOverview.tsx
index 37beb887c8..b9d0d4722d 100644
--- a/tinlake-ui/containers/Investment/View/EpochOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/EpochOverview.tsx
@@ -42,27 +42,18 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
 
   const isAdmin = props.auth?.permissions?.canSetMinimumJuniorRatio
 
-  const [open, setOpen] = React.useState(true)
+  const [open, setOpen] = React.useState(false)
 
   return (
-    <>
+    <Box background="#eee" pad={{ horizontal: '34px', bottom: 'xsmall' }} round="xsmall" margin={{ bottom: 'medium' }}>
       <Heading level="4" onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }}>
-        Show Epoch Details
+        Epoch Details
         <Caret>
           <FormDown style={{ transform: open ? 'rotate(-180deg)' : '' }} />
         </Caret>
       </Heading>
       {open && (
-        <Box
-          direction="row"
-          justify="between"
-          gap="medium"
-          elevation="small"
-          round="xsmall"
-          pad="medium"
-          background="white"
-          margin={{ bottom: 'medium' }}
-        >
+        <Box direction="row" justify="between" margin={{ bottom: 'medium' }}>
           <Box width="420px" margin={{ bottom: 'medium' }}>
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
@@ -288,7 +279,7 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
           </Box>
         </Box>
       )}
-    </>
+    </Box>
   )
 }
 
diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index 69ab7c74e2..7f1ef7f9a6 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -57,6 +57,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
   const maxJuniorRatio = poolData ? parseRatio(poolData.maxJuniorRatio) : undefined
 
   React.useEffect(() => {
+    // sign()
     dispatch(loadLoans(props.tinlake))
   }, [props.selectedPool])
 
diff --git a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
index d4160168ee..66befb7631 100644
--- a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
@@ -110,118 +110,120 @@ const TrancheOverview: React.FC<Props> = (props: Props) => {
   }, [hasPendingCollection, hasPendingOrder])
 
   return (
-    <Box width="420px" pad="medium" elevation="small" round="xsmall" margin={{ bottom: 'medium' }} background="white">
-      <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
-        <Heading level="5" margin={'0'}>
-          <TokenLogo src={`/static/${token}_final.svg`} />
-          {trancheData?.inMemberlist === true ? `${token} Balance` : token}
-        </Heading>
-        <Heading level="5" margin={{ left: 'auto', top: '0', bottom: '0' }}>
-          {trancheData?.inMemberlist === true && (
-            <LoadingValue done={balance !== undefined} height={22}>
-              {addThousandsSeparators(toPrecision(baseToDisplay(balance || '0', 18), 4))}
-            </LoadingValue>
-          )}
-        </Heading>
-      </Box>
-      <Table>
-        <TableBody>
-          <TableRow>
-            <TableCell scope="row">Current Price</TableCell>
-            <TableCell style={{ textAlign: 'end' }}>
-              <LoadingValue done={tokenPrice !== undefined}>
-                {addThousandsSeparators(toPrecision(baseToDisplay(tokenPrice || '0', 27), 4))}
-              </LoadingValue>
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell scope="row" border={{ color: 'transparent' }}>
-              Your {token} Value
-            </TableCell>
-            <TableCell style={{ textAlign: 'end' }} border={{ color: 'transparent' }}>
-              <LoadingValue done={value !== undefined}>
-                {addThousandsSeparators(toPrecision(baseToDisplay(value || '0', 18), 4))} DAI
+    <Box>
+      <Box width="420px" pad="medium" elevation="small" round="xsmall" margin={{ bottom: 'medium' }} background="white">
+        <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
+          <Heading level="5" margin={'0'}>
+            <TokenLogo src={`/static/${token}_final.svg`} />
+            {trancheData?.inMemberlist === true ? `${token} Balance` : token}
+          </Heading>
+          <Heading level="5" margin={{ left: 'auto', top: '0', bottom: '0' }}>
+            {trancheData?.inMemberlist === true && (
+              <LoadingValue done={balance !== undefined} height={22}>
+                {addThousandsSeparators(toPrecision(baseToDisplay(balance || '0', 18), 4))}
               </LoadingValue>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      {trancheData?.inMemberlist === true && (
-        <>
-          {card === 'home' && (
-            <>
-              {epochData?.isBlockedState && (
-                <Info>
-                  <Heading level="6" margin={{ bottom: 'xsmall' }}>
-                    Computing orders
-                  </Heading>
-                  The Epoch has just been closed and the order executions are currently being computed. Until the next
-                  Epoch opens, you cannot submit new orders.
-                  {epochData?.minChallengePeriodEnd !== 0 && (
-                    <MinTimeRemaining>
-                      Minimum time remaining:{' '}
-                      {secondsToHms(epochData.minChallengePeriodEnd + 60 - new Date().getTime() / 1000)}
-                    </MinTimeRemaining>
-                  )}
-                </Info>
-              )}
-
-              {!epochData?.isBlockedState && (
-                <Box gap="small" justify="end" direction="row" margin={{ top: 'small' }}>
-                  <Button
-                    primary
-                    label="Invest"
-                    onClick={() => setCard('invest')}
-                    disabled={epochData?.isBlockedState === true}
-                  />
-                  <Button
-                    primary
-                    label="Redeem"
-                    onClick={() => setCard('redeem')}
-                    disabled={balance === '0' || epochData?.isBlockedState === true}
-                  />
-                </Box>
-              )}
-            </>
-          )}
-          {card === 'order' && (
-            <OrderCard
-              {...props}
-              tinlake={props.tinlake}
-              setCard={setCard}
-              disbursements={disbursements}
-              tokenPrice={tokenPrice || '0'}
-              updateTrancheData={updateTrancheData}
-            />
-          )}
-          {card === 'collect' && (
-            <CollectCard
-              {...props}
-              setCard={setCard}
-              disbursements={disbursements}
-              tokenPrice={tokenPrice || '0'}
-              updateTrancheData={updateTrancheData}
-            />
-          )}
-          {card === 'invest' && <InvestCard {...props} setCard={setCard} updateTrancheData={updateTrancheData} />}
-          {card === 'redeem' && <RedeemCard {...props} setCard={setCard} updateTrancheData={updateTrancheData} />}
-
-          {trancheData?.token && trancheData.token.length > 0 && trancheData.token.length < 7 && (
-            <AddWalletLink onClick={addToWallet}>Add {trancheData?.token} to your wallet</AddWalletLink>
-          )}
-        </>
-      )}
-      {trancheData?.inMemberlist === false && (
-        <Info>
-          <Heading level="6" margin={{ bottom: 'xsmall' }}>
-            Interested in investing?
+            )}
           </Heading>
-          If you want to learn more get started with your onboarding process.
-          <Box justify="end" margin={{ top: 'small' }}>
-            <InvestAction pool={props.pool} />
-          </Box>
-        </Info>
-      )}
+        </Box>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell scope="row">Current Price</TableCell>
+              <TableCell style={{ textAlign: 'end' }}>
+                <LoadingValue done={tokenPrice !== undefined}>
+                  {addThousandsSeparators(toPrecision(baseToDisplay(tokenPrice || '0', 27), 4))}
+                </LoadingValue>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell scope="row" border={{ color: 'transparent' }}>
+                Your {token} Value
+              </TableCell>
+              <TableCell style={{ textAlign: 'end' }} border={{ color: 'transparent' }}>
+                <LoadingValue done={value !== undefined}>
+                  {addThousandsSeparators(toPrecision(baseToDisplay(value || '0', 18), 4))} DAI
+                </LoadingValue>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        {trancheData?.inMemberlist === true && (
+          <>
+            {card === 'home' && (
+              <>
+                {epochData?.isBlockedState && (
+                  <Info>
+                    <Heading level="6" margin={{ bottom: 'xsmall' }}>
+                      Computing orders
+                    </Heading>
+                    The Epoch has just been closed and the order executions are currently being computed. Until the next
+                    Epoch opens, you cannot submit new orders.
+                    {epochData?.minChallengePeriodEnd !== 0 && (
+                      <MinTimeRemaining>
+                        Minimum time remaining:{' '}
+                        {secondsToHms(epochData.minChallengePeriodEnd + 60 - new Date().getTime() / 1000)}
+                      </MinTimeRemaining>
+                    )}
+                  </Info>
+                )}
+
+                {!epochData?.isBlockedState && (
+                  <Box gap="small" justify="end" direction="row" margin={{ top: 'small' }}>
+                    <Button
+                      primary
+                      label="Invest"
+                      onClick={() => setCard('invest')}
+                      disabled={epochData?.isBlockedState === true}
+                    />
+                    <Button
+                      primary
+                      label="Redeem"
+                      onClick={() => setCard('redeem')}
+                      disabled={balance === '0' || epochData?.isBlockedState === true}
+                    />
+                  </Box>
+                )}
+              </>
+            )}
+            {card === 'order' && (
+              <OrderCard
+                {...props}
+                tinlake={props.tinlake}
+                setCard={setCard}
+                disbursements={disbursements}
+                tokenPrice={tokenPrice || '0'}
+                updateTrancheData={updateTrancheData}
+              />
+            )}
+            {card === 'collect' && (
+              <CollectCard
+                {...props}
+                setCard={setCard}
+                disbursements={disbursements}
+                tokenPrice={tokenPrice || '0'}
+                updateTrancheData={updateTrancheData}
+              />
+            )}
+            {card === 'invest' && <InvestCard {...props} setCard={setCard} updateTrancheData={updateTrancheData} />}
+            {card === 'redeem' && <RedeemCard {...props} setCard={setCard} updateTrancheData={updateTrancheData} />}
+
+            {trancheData?.token && trancheData.token.length > 0 && trancheData.token.length < 7 && (
+              <AddWalletLink onClick={addToWallet}>Add {trancheData?.token} to your wallet</AddWalletLink>
+            )}
+          </>
+        )}
+        {trancheData?.inMemberlist === false && (
+          <Info>
+            <Heading level="6" margin={{ bottom: 'xsmall' }}>
+              Interested in investing?
+            </Heading>
+            If you want to learn more get started with your onboarding process.
+            <Box justify="end" margin={{ top: 'small' }}>
+              <InvestAction pool={props.pool} />
+            </Box>
+          </Info>
+        )}
+      </Box>
     </Box>
   )
 }
diff --git a/tinlake-ui/containers/Investment/View/index.tsx b/tinlake-ui/containers/Investment/View/index.tsx
index dacb6de75f..9622205545 100644
--- a/tinlake-ui/containers/Investment/View/index.tsx
+++ b/tinlake-ui/containers/Investment/View/index.tsx
@@ -2,6 +2,7 @@ import { ITinlake } from '@centrifuge/tinlake-js'
 import { Box, Heading } from 'grommet'
 import * as React from 'react'
 import { connect, useDispatch, useSelector } from 'react-redux'
+import PoolTitle from '../../../components/PoolTitle'
 import { Pool } from '../../../config'
 import { AuthState, PermissionsV3 } from '../../../ducks/auth'
 import { loadPool } from '../../../ducks/pool'
@@ -31,7 +32,8 @@ const InvestmentsView: React.FC<Props> = (props: Props) => {
 
   return (
     <Box margin={{ top: 'medium' }}>
-      <Heading level="4">Invest/Redeem in {props.activePool?.metadata.name}</Heading>
+      <PoolTitle pool={props.activePool} page="Investments" />
+
       <Box direction="row" justify="between" gap="medium" margin={{ bottom: 'large' }}>
         <TrancheOverview pool={props.activePool} tinlake={props.tinlake} tranche="senior" />
         <TrancheOverview pool={props.activePool} tinlake={props.tinlake} tranche="junior" />
diff --git a/tinlake-ui/pages/pool/[root]/[slug]/assets/index.tsx b/tinlake-ui/pages/pool/[root]/[slug]/assets/index.tsx
index 09c24baec8..6dda054a00 100644
--- a/tinlake-ui/pages/pool/[root]/[slug]/assets/index.tsx
+++ b/tinlake-ui/pages/pool/[root]/[slug]/assets/index.tsx
@@ -7,6 +7,7 @@ import Auth from '../../../../../components/Auth'
 import Container from '../../../../../components/Container'
 import Header from '../../../../../components/Header'
 import { PoolLink } from '../../../../../components/PoolLink'
+import PoolTitle from '../../../../../components/PoolTitle'
 import WithFooter from '../../../../../components/WithFooter'
 import WithTinlake from '../../../../../components/WithTinlake'
 import config, { Pool } from '../../../../../config'
@@ -45,7 +46,8 @@ class LoanListPage extends React.Component<Props> {
                     render={(auth) => (
                       <Box>
                         <Box direction="row" margin={{ top: 'medium' }} justify="between">
-                          <Heading level="4">Asset Overview of {pool.metadata.name}</Heading>
+                          <PoolTitle pool={this.props.pool} page="Assets" />
+
                           <Box pad={{ top: 'small' }}>
                             <PoolLink href={'/assets/issue'}>
                               <Button primary label="Lock NFT" />
diff --git a/tinlake-ui/pages/pool/[root]/[slug]/demo/value-nft.tsx b/tinlake-ui/pages/pool/[root]/[slug]/demo/value-nft.tsx
index ed9174dfb7..81941dcb02 100644
--- a/tinlake-ui/pages/pool/[root]/[slug]/demo/value-nft.tsx
+++ b/tinlake-ui/pages/pool/[root]/[slug]/demo/value-nft.tsx
@@ -46,7 +46,7 @@ class ValueNFTPage extends React.Component<Props> {
                     render={(auth) => (
                       <Box>
                         <SecondaryHeader>
-                          <Box direction="row" gap="small" align="center">
+                          <Box direction="row" gap="small" align="center" margin={{ top: 'medium' }}>
                             <BackLink href={'/assets'} />
                             <Heading level="3">Value NFT</Heading>
                           </Box>