diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index bad3411b0..90a754f7b 100644
--- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
+++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -221,7 +221,6 @@ function PoolPerformanceChart() {
 
     return result
   }
-
   return (
     <Stack gap={2} padding={20}>
       <Stack flexDirection="row" justifyContent="space-between" alignItems="center" mb={12}>
@@ -501,8 +500,9 @@ function CustomLegend({
   )
 }
 
-const CustomTick = ({ x, y, payload }: any) => {
+export const CustomTick = ({ x, y, payload }: any) => {
   const theme = useTheme()
+
   return (
     <g transform={`translate(${x},${y})`}>
       <text
diff --git a/centrifuge-app/src/components/Charts/SimpleBarChart.tsx b/centrifuge-app/src/components/Charts/SimpleBarChart.tsx
new file mode 100644
index 000000000..9d3e71e3f
--- /dev/null
+++ b/centrifuge-app/src/components/Charts/SimpleBarChart.tsx
@@ -0,0 +1,101 @@
+import { CurrencyBalance, CurrencyMetadata } from '@centrifuge/centrifuge-js'
+import { Shelf, Text } from '@centrifuge/fabric'
+import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { useTheme } from 'styled-components'
+import { formatDate } from '../../../src/utils/date'
+import { formatBalance, formatBalanceAbbreviated } from '../../../src/utils/formatting'
+import { LoadBoundary } from '../LoadBoundary'
+import { CustomTick } from './PoolPerformanceChart'
+import { TooltipContainer, TooltipTitle } from './Tooltip'
+
+type SimpleBarChartProps = {
+  currency?: CurrencyMetadata
+  data: { name: string; yAxis: number }[]
+}
+
+export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
+  const theme = useTheme()
+
+  const getOneDayPerMonth = () => {
+    const seenMonths = new Set<string>()
+    const result: string[] = []
+
+    data.forEach((item) => {
+      const date = new Date(item.name)
+      const month = date.getMonth() + 1
+      const year = date.getFullYear()
+      const monthYear = `${year}-${month}`
+
+      if (!seenMonths.has(monthYear)) {
+        seenMonths.add(monthYear)
+        result.push(item.name)
+      }
+    })
+
+    return result
+  }
+
+  if (!data.length)
+    return (
+      <Shelf justifyContent="center">
+        <Text>No data available</Text>
+      </Shelf>
+    )
+
+  return (
+    <LoadBoundary>
+      <ResponsiveContainer width="100%" height={200}>
+        <BarChart width={500} height={300} data={data} barSize={10} barGap={10}>
+          <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
+          <XAxis
+            dy={4}
+            interval={0}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={10}
+            type="category"
+            dataKey="name"
+            ticks={getOneDayPerMonth()}
+            tick={<CustomTick />}
+            angle={45}
+          />
+          <YAxis
+            tickFormatter={(tick: number) => {
+              const balance = new CurrencyBalance(tick, currency?.decimals || 0)
+              return formatBalanceAbbreviated(balance, '', 0)
+            }}
+            tick={{ fontSize: 10, color: theme.colors.textPrimary }}
+            tickLine={false}
+            axisLine={false}
+            dataKey="yAxis"
+          />
+          <ReferenceLine y={0} stroke={theme.colors.textSecondary} />
+
+          <Tooltip
+            cursor={false}
+            content={({ payload }) => {
+              if (payload && payload?.length > 0) {
+                return (
+                  <TooltipContainer>
+                    <TooltipTitle>{formatDate(payload[0].payload.name)}</TooltipTitle>
+                    {payload.map((item) => (
+                      <Text variant="body3">{formatBalance(item.value as number, currency)}</Text>
+                    ))}
+                  </TooltipContainer>
+                )
+              }
+            }}
+          />
+          <Bar
+            dataKey="yAxis"
+            name="yAxis"
+            fill={theme.colors.backgroundTertiary}
+            strokeWidth={0}
+            fillOpacity={1}
+            maxBarSize={20}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </LoadBoundary>
+  )
+}
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
index 0ae6b99f0..c852234dd 100644
--- a/centrifuge-app/src/components/DataTable.tsx
+++ b/centrifuge-app/src/components/DataTable.tsx
@@ -60,6 +60,7 @@ export type Column = {
   align?: string
   sortKey?: string
   width?: string
+  isLabel?: boolean
 }
 const sorter = <T extends Record<string, any>>(data: Array<T>, order: OrderBy, sortKey?: string) => {
   if (!sortKey) return data
@@ -149,33 +150,36 @@ export const DataTable = <T extends Record<string, any>>({
           tabIndex={onRowClicked ? 0 : undefined}
         >
           {columns.map((col, index) => (
-            <DataCol variant="body2" align={col?.align} key={index}>
-              {col.cell(row, i)}
-            </DataCol>
-          ))}
-        </DataRow>
-      ))}
-      {sortedAndPaginatedData?.map((row, i) => (
-        <DataRow
-          data-testId={`data-table-row-${i}-${groupIndex ?? 0}`}
-          hoverable={hoverable}
-          as={onRowClicked ? Link : 'div'}
-          to={onRowClicked ? onRowClicked(row) : undefined}
-          key={keyField ? row[keyField] : i}
-          tabIndex={onRowClicked ? 0 : undefined}
-        >
-          {columns.map((col, index) => (
-            <DataCol
-              data-testId={`data-table-col-${i}-${groupIndex ?? 0}-${col.header}`}
-              variant="body2"
-              align={col?.align}
-              key={index}
-            >
+            <DataCol variant="body2" align={col?.align} key={index} isLabel={col.isLabel}>
               {col.cell(row, i)}
             </DataCol>
           ))}
         </DataRow>
       ))}
+      {sortedAndPaginatedData?.map((row, i) => {
+        return (
+          <DataRow
+            data-testId={`data-table-row-${i}-${groupIndex ?? 0}`}
+            hoverable={hoverable}
+            as={onRowClicked ? Link : 'div'}
+            to={onRowClicked ? onRowClicked(row) : undefined}
+            key={keyField ? row[keyField] : i}
+            tabIndex={onRowClicked ? 0 : undefined}
+          >
+            {columns.map((col, index) => (
+              <DataCol
+                data-testId={`data-table-col-${i}-${groupIndex ?? 0}-${col.header}`}
+                variant="body2"
+                align={col?.align}
+                key={index}
+                isLabel={col.isLabel}
+              >
+                {col.cell(row, i)}
+              </DataCol>
+            ))}
+          </DataRow>
+        )
+      })}
       {/* summary row is not included in sorting */}
       {summary && (
         <DataRow data-testId={`row-summary-${groupIndex ?? 0}`}>
@@ -241,8 +245,8 @@ export const DataRow = styled(Row)<any>`
     })}
 `
 
-export const DataCol = styled(Text)<{ align: Column['align'] }>`
-  background: initial;
+export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean }>`
+  background: ${({ isLabel, theme }) => (isLabel ? theme.colors.backgroundSecondary : 'initial')};
   border: none;
   padding: 8px 16px;
   display: flex;
diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
index 1388461e0..b5238987d 100644
--- a/centrifuge-app/src/components/IssuerSection.tsx
+++ b/centrifuge-app/src/components/IssuerSection.tsx
@@ -28,9 +28,9 @@ type IssuerSectionProps = {
 }
 
 const reportLinks = [
-  { label: 'Balance sheet', href: '/balance-sheet', icon: <IconBalanceSheet /> },
-  { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss /> },
-  { label: 'Cashflow statement', href: '/cash-flow-statement', icon: <IconCashflow /> },
+  { label: 'Balance sheet', href: '/balance-sheet', icon: <IconBalanceSheet color="backgroundPrimary" /> },
+  { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss color="backgroundPrimary" /> },
+  { label: 'Cashflow statement', href: '/cash-flow-statement', icon: <IconCashflow color="backgroundPrimary" /> },
 ]
 
 const StyledRouterTextLink = styled(RouterTextLink)`
@@ -78,7 +78,7 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
                 {link.label}
               </StyledRouterTextLink>
             </Box>
-            <IconChevronRight color="white" />
+            <IconChevronRight color="backgroundPrimary" />
           </Box>
         ))}
       </Box>
diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
index b8de592ca..db5cd3088 100644
--- a/centrifuge-app/src/components/LayoutBase/index.tsx
+++ b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -12,6 +12,7 @@ import {
   FooterContainer,
   Inner,
   LogoContainer,
+  MobileBar,
   Root,
   ToolbarContainer,
   WalletContainer,
@@ -30,19 +31,30 @@ export function LayoutBase(): JSX.Element {
           </WalletInner>
         </WalletPositioner>
       </WalletContainer>
-      <Inner>
-        <LogoContainer>
-          <LogoLink />
-        </LogoContainer>
-        <ToolbarContainer as="aside">
-          <Menu />
-        </ToolbarContainer>
-        {isMedium && (
+      {isMedium ? (
+        <Inner>
+          <LogoContainer>
+            <LogoLink />
+          </LogoContainer>
+          <ToolbarContainer as="aside">
+            <Menu />
+          </ToolbarContainer>
           <FooterContainer>
             <Footer />
           </FooterContainer>
-        )}
-      </Inner>
+        </Inner>
+      ) : (
+        <>
+          <LogoContainer>
+            <LogoLink />
+          </LogoContainer>
+          <MobileBar>
+            <ToolbarContainer as="aside">
+              <Menu />
+            </ToolbarContainer>
+          </MobileBar>
+        </>
+      )}
       <ContentWrapper>
         <Outlet />
       </ContentWrapper>
diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
index 252f54ee0..0a3be4b86 100644
--- a/centrifuge-app/src/components/LayoutBase/styles.tsx
+++ b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -26,34 +26,51 @@ export const Root = styled(Box)`
     }
   }
 `
-
 export const Inner = styled(Grid)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: transparent;
-  height: 100vh;
-  width: 100vw;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
-  overflow-y: auto;
   z-index: 2;
   padding-bottom: 1rem;
+  width: 100vw;
+  bottom: 0;
+  overflow-y: auto;
+
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
     width: 6vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
     overflow: visible;
+    height: 100vh;
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     width: 15vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
     padding-left: 16px;
+    height: 100vh;
   }
 `
 
+export const MobileBar = styled(Box)`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
+  background-color: ${({ theme }) => theme.colors.backgroundInverted};
+  padding: 1rem;
+  border-top: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
 export const HeaderBackground = styled(Box)`
   z-index: ${({ theme }) => theme.zIndices.header};
   position: sticky;
@@ -75,8 +92,10 @@ export const HeaderBackground = styled(Box)`
 export const LogoContainer = styled(Stack)`
   background-color: ${({ theme }) => theme.colors.backgroundInverted};
   z-index: ${({ theme }) => theme.zIndices.header};
-  position: sticky;
+  position: absolute;
   top: 0;
+  width: 100%;
+  z-index: 0;
 
   height: ${HEADER_HEIGHT}px;
   justify-content: center;
@@ -96,7 +115,7 @@ export const LogoContainer = styled(Stack)`
 `
 
 export const WalletContainer = styled(Stack)`
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   z-index: ${({ theme }) => theme.zIndices.header};
@@ -106,6 +125,9 @@ export const WalletContainer = styled(Stack)`
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     margin-right: 20px;
+    position: fixed;
+    top: 0;
+    right: 0;
   }
 `
 
@@ -120,11 +142,11 @@ export const WalletInner = styled(Stack)`
   justify-content: center;
   pointer-events: auto;
   width: 250px;
-  margin-right: 40px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
     height: 50px;
+    margin-right: 40px;
   }
 `
 
diff --git a/centrifuge-app/src/components/Report/BalanceSheet.tsx b/centrifuge-app/src/components/Report/BalanceSheet.tsx
index fee1b7f3b..61fb06098 100644
--- a/centrifuge-app/src/components/Report/BalanceSheet.tsx
+++ b/centrifuge-app/src/components/Report/BalanceSheet.tsx
@@ -20,7 +20,7 @@ type Row = TableDataRow & {
 }
 
 export function BalanceSheet({ pool }: { pool: Pool }) {
-  const { startDate, endDate, groupBy, setCsvData } = React.useContext(ReportContext)
+  const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext)
 
   const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => {
     const today = new Date()
@@ -71,6 +71,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
           <Text variant={row.heading ? 'heading4' : row.bold ? 'interactive2' : 'body3'}>{row.name}</Text>
         ),
         width: '200px',
+        isLabel: true,
       },
     ]
       .concat(
@@ -88,6 +89,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
             </Text>
           ),
           width: '170px',
+          isLabel: false,
         }))
       )
       .concat({
@@ -95,6 +97,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
         header: '',
         cell: () => <span />,
         width: '1fr',
+        isLabel: false,
       })
   }, [poolStates])
 
@@ -239,6 +242,12 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [assetValuationRecords, trancheRecords])
 
+  React.useEffect(() => {
+    if (poolStates?.length) {
+      setReportData(poolStates)
+    }
+  }, [poolStates])
+
   if (!poolStates) {
     return <Spinner mt={2} />
   }
diff --git a/centrifuge-app/src/components/Report/CashflowStatement.tsx b/centrifuge-app/src/components/Report/CashflowStatement.tsx
index 9647f85bd..a0f025f0e 100644
--- a/centrifuge-app/src/components/Report/CashflowStatement.tsx
+++ b/centrifuge-app/src/components/Report/CashflowStatement.tsx
@@ -1,5 +1,5 @@
 import { CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
+import { DailyPoolState, Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
 import { formatBalance } from '@centrifuge/centrifuge-react'
 import { Text, Tooltip } from '@centrifuge/fabric'
 import * as React from 'react'
@@ -26,7 +26,7 @@ type Row = TableDataRow & {
 }
 
 export function CashflowStatement({ pool }: { pool: Pool }) {
-  const { startDate, endDate, groupBy, setCsvData } = React.useContext(ReportContext)
+  const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext)
   const { data: poolMetadata } = usePoolMetadata(pool)
 
   const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => {
@@ -323,6 +323,18 @@ export function CashflowStatement({ pool }: { pool: Pool }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [grossCashflowRecords, netCashflowRecords])
 
+  React.useEffect(() => {
+    if (poolStates && Object.keys(poolStates).length > 0) {
+      const fullPoolStates: DailyPoolState[] = Object.values(poolStates).map((partialState) => {
+        return {
+          ...partialState,
+        } as DailyPoolState
+      })
+
+      setReportData(fullPoolStates)
+    }
+  }, [poolStates])
+
   if (!poolStates) {
     return <Spinner mt={2} />
   }
diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx
new file mode 100644
index 000000000..b42752075
--- /dev/null
+++ b/centrifuge-app/src/components/Report/DataFilter.tsx
@@ -0,0 +1,361 @@
+import { Loan, Pool } from '@centrifuge/centrifuge-js'
+import { useGetNetworkName } from '@centrifuge/centrifuge-react'
+import { AnchorButton, Box, DateInput, IconDownload, SearchInput, Select, Shelf } from '@centrifuge/fabric'
+import * as React from 'react'
+import { useNavigate } from 'react-router'
+import { usePool } from '../../../src/utils/usePools'
+import { nftMetadataSchema } from '../../schemas'
+import { useBasePath } from '../../utils/useBasePath'
+import { useActiveDomains } from '../../utils/useLiquidityPools'
+import { useLoans } from '../../utils/useLoans'
+import { useMetadata } from '../../utils/useMetadata'
+import { useCentNFT } from '../../utils/useNFTs'
+import { useDebugFlags } from '../DebugFlags'
+import { GroupBy, Report, ReportContext } from './ReportContext'
+import { formatPoolFeeTransactionType } from './utils'
+
+type ReportFilterProps = {
+  poolId: string
+}
+
+export function DataFilter({ poolId }: ReportFilterProps) {
+  const {
+    csvData,
+    setStartDate,
+    startDate,
+    endDate,
+    setEndDate,
+    report,
+    loanStatus,
+    setLoanStatus,
+    txType,
+    setTxType,
+    groupBy,
+    setGroupBy,
+    activeTranche,
+    setActiveTranche,
+    address,
+    setAddress,
+    network,
+    setNetwork,
+    loan,
+    setLoan,
+  } = React.useContext(ReportContext)
+  const navigate = useNavigate()
+  const basePath = useBasePath()
+  const pool = usePool(poolId) as Pool
+
+  const { data: domains } = useActiveDomains(pool.id)
+  const getNetworkName = useGetNetworkName()
+  const loans = useLoans(pool.id) as Loan[] | undefined
+
+  const { showOracleTx } = useDebugFlags()
+
+  const reportOptions: { label: string; value: Report }[] = [
+    { label: 'Investor transactions', value: 'investor-tx' },
+    { label: 'Asset transactions', value: 'asset-tx' },
+    { label: 'Fee transactions', value: 'fee-tx' },
+    ...(showOracleTx === true ? [{ label: 'Oracle transactions', value: 'oracle-tx' as Report }] : []),
+    { label: 'Token price', value: 'token-price' },
+    { label: 'Asset list', value: 'asset-list' },
+    { label: 'Investor list', value: 'investor-list' },
+  ]
+
+  return (
+    <Shelf
+      alignItems="center"
+      flexWrap="wrap"
+      gap={2}
+      p={2}
+      borderWidth={0}
+      borderBottomWidth={1}
+      borderStyle="solid"
+      borderColor="borderPrimary"
+    >
+      <Select
+        name="report"
+        label="Report"
+        options={reportOptions}
+        value={report}
+        onChange={(event: { target: { value: any } }) => {
+          if (event.target.value) {
+            navigate(`${basePath}/${pool.id}/data/${event.target.value}`)
+          }
+        }}
+      />
+
+      {!['investor-list', 'asset-list', 'balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && (
+        <>
+          <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
+          <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+        </>
+      )}
+
+      {['pool-balance', 'token-price'].includes(report) && (
+        <Select
+          name="groupBy"
+          label="Group by"
+          options={[
+            {
+              label: 'Day',
+              value: 'day',
+            },
+            {
+              label: 'Month',
+              value: 'month',
+            },
+          ]}
+          value={groupBy}
+          onChange={(event) => {
+            if (event.target.value) {
+              setGroupBy(event.target.value as GroupBy)
+            }
+          }}
+        />
+      )}
+
+      {report === 'asset-list' && (
+        <>
+          <Select
+            name="loanStatus"
+            label="Status"
+            options={[
+              {
+                label: 'All',
+                value: 'all',
+              },
+              {
+                label: 'Ongoing',
+                value: 'ongoing',
+              },
+              {
+                label: 'Repaid',
+                value: 'repaid',
+              },
+              {
+                label: 'Overdue',
+                value: 'overdue',
+              },
+            ]}
+            value={loanStatus}
+            onChange={(event) => {
+              setLoanStatus(event.target.value)
+            }}
+          />
+          <DateInput label="Day" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+        </>
+      )}
+
+      {(report === 'investor-list' || report === 'investor-tx') && (
+        <Select
+          name="activeTranche"
+          label="Token"
+          options={[
+            {
+              label: 'All tokens',
+              value: 'all',
+            },
+            ...pool.tranches.map((token) => {
+              return {
+                label: token.currency.name,
+                value: token.id,
+              }
+            }),
+          ]}
+          value={activeTranche}
+          onChange={(event) => {
+            if (event.target.value) {
+              setActiveTranche(event.target.value)
+            }
+          }}
+        />
+      )}
+      {report === 'asset-tx' && (
+        <Select
+          name="loan"
+          label="Asset"
+          onChange={(event) => {
+            setLoan(event.target.value)
+          }}
+          value={loan}
+          options={[
+            { label: 'All', value: 'all' },
+            ...(loans?.map((l) => ({ value: l.id, label: <LoanOption loan={l as Loan} key={l.id} /> })) ?? []),
+          ]}
+        />
+      )}
+
+      {['balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && (
+        <>
+          <Select
+            name="balanceSheetGroupBy"
+            onChange={(event) => {
+              setGroupBy(event.target.value as GroupBy)
+            }}
+            value={groupBy}
+            options={[
+              { label: 'Day', value: 'day' },
+              { label: 'Daily', value: 'daily' },
+              { label: 'Monthly', value: 'month' },
+              { label: 'Quarterly', value: 'quarter' },
+              { label: 'Yearly', value: 'year' },
+            ]}
+            hideBorder
+          />
+          {groupBy === 'day' && (
+            <DateInput label="Day" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+          )}
+          {groupBy === 'month' || groupBy === 'daily' ? (
+            <>
+              <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
+              <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+            </>
+          ) : null}
+        </>
+      )}
+
+      {['investor-tx', 'asset-tx', 'fee-tx'].includes(report) && (
+        <Select
+          name="txType"
+          label="Transaction type"
+          options={
+            report === 'investor-tx'
+              ? [
+                  {
+                    label: 'All',
+                    value: 'all',
+                  },
+                  {
+                    label: 'Submitted orders',
+                    value: 'orders',
+                  },
+                  {
+                    label: 'Executed orders',
+                    value: 'executions',
+                  },
+                  {
+                    label: 'Transfers',
+                    value: 'transfers',
+                  },
+                ]
+              : report === 'asset-tx'
+              ? [
+                  {
+                    label: 'All',
+                    value: 'all',
+                  },
+                  {
+                    label: 'Created',
+                    value: 'Created',
+                  },
+                  {
+                    label: 'Financed',
+                    value: 'Financed',
+                  },
+                  {
+                    label: 'Repaid',
+                    value: 'Repaid',
+                  },
+                  {
+                    label: 'Priced',
+                    value: 'Priced',
+                  },
+                  {
+                    label: 'Closed',
+                    value: 'Closed',
+                  },
+                ]
+              : [
+                  {
+                    label: 'All',
+                    value: 'all',
+                  },
+                  {
+                    label: formatPoolFeeTransactionType('CHARGED'),
+                    value: 'CHARGED',
+                  },
+                  {
+                    label: formatPoolFeeTransactionType('UNCHARGED'),
+                    value: 'UNCHARGED',
+                  },
+                  {
+                    label: formatPoolFeeTransactionType('ACCRUED'),
+                    value: 'ACCRUED',
+                  },
+                  {
+                    label: formatPoolFeeTransactionType('PAID'),
+                    value: 'PAID',
+                  },
+                ]
+          }
+          value={txType}
+          onChange={(event) => {
+            if (event.target.value) {
+              setTxType(event.target.value)
+            }
+          }}
+        />
+      )}
+      {['investor-tx', 'investor-list'].includes(report) && (
+        <>
+          <Select
+            name="network"
+            label="Network"
+            options={[
+              {
+                label: 'All',
+                value: 'all',
+              },
+              {
+                label: 'Centrifuge',
+                value: 'centrifuge',
+              },
+              ...(domains ?? []).map((domain) => {
+                return {
+                  label: getNetworkName(domain.chainId),
+                  value: String(domain.chainId),
+                }
+              }),
+            ]}
+            value={network}
+            onChange={(e) => {
+              const { value } = e.target
+              if (value) {
+                setNetwork(isNaN(Number(value)) ? value : Number(value))
+              }
+            }}
+          />
+          <SearchInput
+            name="address"
+            label="Address"
+            placeholder="Filter by address..."
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+          />
+        </>
+      )}
+      <Box ml="auto">
+        <AnchorButton
+          disabled={!csvData}
+          download={csvData?.fileName}
+          href={csvData?.dataUrl}
+          icon={<IconDownload />}
+          small
+          variant="inverted"
+        >
+          CSV
+        </AnchorButton>
+      </Box>
+    </Shelf>
+  )
+}
+
+function LoanOption({ loan }: { loan: Loan }) {
+  const nft = useCentNFT(loan.asset.collectionId, loan.asset.nftId, false, false)
+  const { data: metadata } = useMetadata(nft?.metadataUri, nftMetadataSchema)
+  return (
+    <option value={loan.id}>
+      {loan.id} - {metadata?.name}
+    </option>
+  )
+}
diff --git a/centrifuge-app/src/components/Report/PoolReportPage.tsx b/centrifuge-app/src/components/Report/PoolReportPage.tsx
index 820f62c75..c2f012475 100644
--- a/centrifuge-app/src/components/Report/PoolReportPage.tsx
+++ b/centrifuge-app/src/components/Report/PoolReportPage.tsx
@@ -1,34 +1,37 @@
 import { Pool } from '@centrifuge/centrifuge-js'
 import * as React from 'react'
-import { useParams } from 'react-router'
+import { useLocation, useParams } from 'react-router'
 import { ReportComponent } from '.'
-import { usePool } from '../../utils/usePools'
+import { usePool } from '../../../src/utils/usePools'
 import { LoadBoundary } from '../LoadBoundary'
 import { Spinner } from '../Spinner'
+import { DataFilter } from './DataFilter'
 import { ReportContextProvider } from './ReportContext'
 import { ReportFilter } from './ReportFilter'
 
 export function PoolReportPage({ header }: { header: React.ReactNode }) {
-  const { pid: poolId } = useParams<{ pid: string }>()
-  if (!poolId) throw new Error('Pool not found')
+  const params = useParams<{ pid: string; '*': string }>()
+  const location = useLocation()
+  const { pid: poolId } = params
 
-  const pool = usePool(poolId) as Pool
+  if (!poolId) throw new Error('Pool not found')
 
   return (
     <ReportContextProvider>
       {header}
 
-      {pool && <ReportFilter pool={pool} />}
+      {location.pathname.includes('reporting') ? <ReportFilter poolId={poolId} /> : <DataFilter poolId={poolId} />}
 
       <LoadBoundary>
-        <PoolDetailReporting pool={pool} />
+        <PoolDetailReporting poolId={poolId} />
       </LoadBoundary>
     </ReportContextProvider>
   )
 }
 
-function PoolDetailReporting({ pool }: { pool: Pool }) {
-  if (!pool) {
+function PoolDetailReporting({ poolId }: { poolId: string }) {
+  const pool = usePool(poolId) as Pool
+  if (!poolId || !pool) {
     return <Spinner mt={2} />
   }
 
diff --git a/centrifuge-app/src/components/Report/ProfitAndLoss.tsx b/centrifuge-app/src/components/Report/ProfitAndLoss.tsx
index cadd57ca5..783c29265 100644
--- a/centrifuge-app/src/components/Report/ProfitAndLoss.tsx
+++ b/centrifuge-app/src/components/Report/ProfitAndLoss.tsx
@@ -1,5 +1,5 @@
 import { CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
+import { DailyPoolState, Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
 import { formatBalance } from '@centrifuge/centrifuge-react'
 import { Text, Tooltip } from '@centrifuge/fabric'
 import * as React from 'react'
@@ -25,7 +25,7 @@ type Row = TableDataRow & {
 }
 
 export function ProfitAndLoss({ pool }: { pool: Pool }) {
-  const { startDate, endDate, groupBy, setCsvData } = React.useContext(ReportContext)
+  const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext)
   const { data: poolMetadata } = usePoolMetadata(pool)
 
   const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => {
@@ -89,6 +89,7 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) {
             <Text variant={row.heading ? 'heading4' : row.bold ? 'interactive2' : 'body3'}>{row.name}</Text>
           ),
         width: '240px',
+        isLabel: true,
       },
     ]
       .concat(
@@ -102,6 +103,7 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) {
             </Text>
           ),
           width: '170px',
+          isLabel: false,
         }))
       )
       .concat({
@@ -109,6 +111,7 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) {
         header: '',
         cell: () => <span />,
         width: '1fr',
+        isLabel: false,
       })
   }, [poolStates, groupBy])
 
@@ -334,6 +337,18 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profitAndLossRecords, feesRecords, totalProfitRecords])
 
+  React.useEffect(() => {
+    if (poolStates && Object.keys(poolStates).length > 0) {
+      const fullPoolStates: DailyPoolState[] = Object.values(poolStates).map((partialState) => {
+        return {
+          ...partialState,
+        } as DailyPoolState
+      })
+
+      setReportData(fullPoolStates)
+    }
+  }, [poolStates])
+
   if (!poolStates) {
     return <Spinner mt={2} />
   }
diff --git a/centrifuge-app/src/components/Report/ReportContext.tsx b/centrifuge-app/src/components/Report/ReportContext.tsx
index e9a9876c1..9579b3fca 100644
--- a/centrifuge-app/src/components/Report/ReportContext.tsx
+++ b/centrifuge-app/src/components/Report/ReportContext.tsx
@@ -1,3 +1,4 @@
+import { DailyPoolState } from '@centrifuge/centrifuge-js'
 import * as React from 'react'
 import { useParams } from 'react-router'
 import { useSearchParams } from 'react-router-dom'
@@ -49,6 +50,9 @@ export type ReportContextType = {
 
   loan: string
   setLoan: (type: string) => void
+
+  reportData: DailyPoolState[]
+  setReportData: (type: DailyPoolState[]) => void
 }
 
 export type CsvDataProps = {
@@ -78,6 +82,7 @@ export function ReportContextProvider({ children }: { children: React.ReactNode
   const [address, setAddress] = React.useState(searchParams.get('address') || '')
   const [network, setNetwork] = React.useState<string | number>(searchParams.get('network') || 'all')
   const [loan, setLoan] = React.useState(searchParams.get('loan') || '')
+  const [reportData, setReportData] = React.useState<DailyPoolState[]>([])
 
   React.useEffect(() => {
     const startDate = searchParams.get('from')
@@ -170,6 +175,8 @@ export function ReportContextProvider({ children }: { children: React.ReactNode
         setNetwork: (value: any) => updateParamValues('network', value),
         loan,
         setLoan: (value: string) => updateParamValues('asset', value),
+        reportData,
+        setReportData,
       }}
     >
       {children}
diff --git a/centrifuge-app/src/components/Report/ReportFilter.tsx b/centrifuge-app/src/components/Report/ReportFilter.tsx
index 72193d630..c53cc8dc4 100644
--- a/centrifuge-app/src/components/Report/ReportFilter.tsx
+++ b/centrifuge-app/src/components/Report/ReportFilter.tsx
@@ -1,356 +1,197 @@
-import { Loan, Pool } from '@centrifuge/centrifuge-js'
-import { useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { AnchorButton, Box, DateInput, SearchInput, Select, Shelf } from '@centrifuge/fabric'
+import { CurrencyBalance, DailyPoolState, Pool } from '@centrifuge/centrifuge-js'
+import {
+  AnchorButton,
+  Box,
+  Button,
+  DateInput,
+  IconBalanceSheet,
+  IconCashflow,
+  IconDownload,
+  IconProfitAndLoss,
+  Select,
+  Shelf,
+} from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
-import { nftMetadataSchema } from '../../schemas'
+import styled from 'styled-components'
+import { usePool, usePoolMetadata } from '../../../src/utils/usePools'
 import { useBasePath } from '../../utils/useBasePath'
-import { useActiveDomains } from '../../utils/useLiquidityPools'
-import { useLoans } from '../../utils/useLoans'
-import { useMetadata } from '../../utils/useMetadata'
-import { useCentNFT } from '../../utils/useNFTs'
-import { useDebugFlags } from '../DebugFlags'
-import { GroupBy, Report, ReportContext } from './ReportContext'
-import { formatPoolFeeTransactionType } from './utils'
+import { SimpleBarChart } from '../Charts/SimpleBarChart'
+import { GroupBy, ReportContext } from './ReportContext'
+
+interface StyledButtonProps {
+  selected?: boolean
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
+  margin-bottom: 12px;
+  margin-right: 12px;
+  @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {
+    margin-bottom: 0;
+  }
+  & > span {
+    border-color: ${({ selected, theme }) => (selected ? 'transparent' : theme.colors.backgroundInverted)};
+  }
+  &:hover > span {
+    border-color: ${({ selected, theme }) => (selected ? 'transparent' : theme.colors.backgroundInverted)};
+    color: ${({ selected, theme }) => (!selected ? theme.colors.textPrimary : theme.colors.textInverted)};
+  }
+`
 
 type ReportFilterProps = {
-  pool: Pool
+  poolId: string
 }
 
-export function ReportFilter({ pool }: ReportFilterProps) {
-  const {
-    csvData,
-    setStartDate,
-    startDate,
-    endDate,
-    setEndDate,
-    report,
-    loanStatus,
-    setLoanStatus,
-    txType,
-    setTxType,
-    groupBy,
-    setGroupBy,
-    activeTranche,
-    setActiveTranche,
-    address,
-    setAddress,
-    network,
-    setNetwork,
-    loan,
-    setLoan,
-  } = React.useContext(ReportContext)
+export function ReportFilter({ poolId }: ReportFilterProps) {
+  const { csvData, setStartDate, startDate, endDate, setEndDate, groupBy, setGroupBy, report, reportData } =
+    React.useContext(ReportContext)
   const navigate = useNavigate()
   const basePath = useBasePath()
+  const pool = usePool(poolId) as Pool
+  const metadata = usePoolMetadata(pool as Pool)
 
-  const { data: domains } = useActiveDomains(pool.id)
-  const getNetworkName = useGetNetworkName()
-  const loans = useLoans(pool.id) as Loan[] | undefined
-
-  const { showOracleTx } = useDebugFlags()
-
-  const reportOptions: { label: string; value: Report }[] = [
-    { label: 'Balance sheet', value: 'balance-sheet' },
-    { label: 'Profit & loss', value: 'profit-and-loss' },
-    { label: 'Cash flow statement', value: 'cash-flow-statement' },
-    { label: 'Investor transactions', value: 'investor-tx' },
-    { label: 'Asset transactions', value: 'asset-tx' },
-    { label: 'Fee transactions', value: 'fee-tx' },
-    ...(showOracleTx === true ? [{ label: 'Oracle transactions', value: 'oracle-tx' as Report }] : []),
-    // { label: 'Pool balance', value: 'pool-balance' },
-    { label: 'Token price', value: 'token-price' },
-    { label: 'Asset list', value: 'asset-list' },
-    { label: 'Investor list', value: 'investor-list' },
-  ]
+  const transformDataChart = React.useMemo(() => {
+    if (!reportData.length) return
+    if (report === 'balance-sheet') {
+      return reportData.map((data: DailyPoolState) => ({
+        name: data.timestamp,
+        yAxis: new CurrencyBalance(data.poolState.netAssetValue, pool.currency.decimals).toNumber(),
+      }))
+    } else if (report === 'profit-and-loss') {
+      return reportData.map((data: DailyPoolState) => {
+        return {
+          name: data.timestamp,
+          yAxis: (metadata?.data?.pool?.asset.class === 'Private credit'
+            ? data.poolState.sumInterestRepaidAmountByPeriod
+                .add(data.poolState.sumInterestAccruedByPeriod)
+                .add(data.poolState.sumUnscheduledRepaidAmountByPeriod)
+                .sub(data.poolState.sumDebtWrittenOffByPeriod)
+            : data.poolState.sumUnrealizedProfitByPeriod
+                .add(data.poolState.sumInterestRepaidAmountByPeriod)
+                .add(data.poolState.sumUnscheduledRepaidAmountByPeriod)
+          )
+            .sub(data.poolState.sumPoolFeesChargedAmountByPeriod)
+            .sub(data.poolState.sumPoolFeesAccruedAmountByPeriod)
+            .toNumber(),
+        }
+      })
+    } else {
+      return reportData.map((data: DailyPoolState) => {
+        return {
+          name: data.timestamp,
+          yAxis: data.poolState.sumPrincipalRepaidAmountByPeriod
+            .sub(data.poolState.sumBorrowedAmountByPeriod)
+            .add(data.poolState.sumInterestRepaidAmountByPeriod)
+            .add(data.poolState.sumUnscheduledRepaidAmountByPeriod)
+            .sub(data.poolState.sumPoolFeesPaidAmountByPeriod)
+            .add(data.poolState.sumInvestedAmountByPeriod)
+            .sub(data.poolState.sumRedeemedAmountByPeriod)
+            .toNumber(),
+        }
+      })
+    }
+  }, [report, reportData])
 
   return (
     <Shelf
-      alignItems="center"
-      flexWrap="wrap"
-      gap={2}
-      p={2}
-      borderWidth={0}
-      borderBottomWidth={1}
+      padding={2}
+      margin={2}
+      borderRadius={6}
       borderStyle="solid"
       borderColor="borderPrimary"
+      borderWidth={[0, 1]}
+      flexDirection="column"
     >
-      <Select
-        name="report"
-        label="Report"
-        options={reportOptions}
-        value={report}
-        onChange={(event: { target: { value: any } }) => {
-          if (event.target.value) {
-            navigate(`${basePath}/${pool.id}/reporting/${event.target.value}`)
-          }
-        }}
-      />
-
-      {!['investor-list', 'asset-list', 'balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && (
-        <>
-          <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
-          <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
-        </>
-      )}
-
-      {['pool-balance', 'token-price'].includes(report) && (
-        <Select
-          name="groupBy"
-          label="Group by"
-          options={[
-            {
-              label: 'Day',
-              value: 'day',
-            },
-            {
-              label: 'Month',
-              value: 'month',
-            },
-          ]}
-          value={groupBy}
-          onChange={(event) => {
-            if (event.target.value) {
-              setGroupBy(event.target.value as GroupBy)
-            }
-          }}
-        />
-      )}
-
-      {report === 'asset-list' && (
-        <>
-          <Select
-            name="loanStatus"
-            label="Status"
-            options={[
-              {
-                label: 'All',
-                value: 'all',
-              },
-              {
-                label: 'Ongoing',
-                value: 'ongoing',
-              },
-              {
-                label: 'Repaid',
-                value: 'repaid',
-              },
-              {
-                label: 'Overdue',
-                value: 'overdue',
-              },
-            ]}
-            value={loanStatus}
-            onChange={(event) => {
-              setLoanStatus(event.target.value)
-            }}
-          />
-          <DateInput label="Day" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
-        </>
-      )}
+      <Shelf alignItems="center" flexWrap="wrap" justifyContent="space-between" width="100%">
+        <Shelf flexDirection={['column', 'row']}>
+          <StyledButton
+            selected={report === 'balance-sheet'}
+            variant={report === 'balance-sheet' ? 'secondary' : 'tertiary'}
+            icon={<IconBalanceSheet size={18} />}
+            onClick={() => navigate(`${basePath}/${pool.id}/reporting/balance-sheet`)}
+          >
+            Balance sheet
+          </StyledButton>
+          <StyledButton
+            selected={report === 'profit-and-loss'}
+            variant={report === 'profit-and-loss' ? 'secondary' : 'tertiary'}
+            icon={<IconProfitAndLoss size={18} />}
+            onClick={() => navigate(`${basePath}/${pool.id}/reporting/profit-and-loss`)}
+          >
+            Profit & loss
+          </StyledButton>
+          <StyledButton
+            selected={report === 'cash-flow-statement'}
+            variant={report === 'cash-flow-statement' ? 'secondary' : 'tertiary'}
+            icon={<IconCashflow size={18} />}
+            onClick={() => navigate(`${basePath}/${pool.id}/reporting/cash-flow-statement`)}
+          >
+            Cash flow
+          </StyledButton>
+        </Shelf>
 
-      {(report === 'investor-list' || report === 'investor-tx') && (
-        <Select
-          name="activeTranche"
-          label="Token"
-          options={[
-            {
-              label: 'All tokens',
-              value: 'all',
-            },
-            ...pool.tranches.map((token) => {
-              return {
-                label: token.currency.name,
-                value: token.id,
-              }
-            }),
-          ]}
-          value={activeTranche}
-          onChange={(event) => {
-            if (event.target.value) {
-              setActiveTranche(event.target.value)
-            }
-          }}
-        />
-      )}
-      {report === 'asset-tx' && (
-        <Select
-          name="loan"
-          label="Asset"
-          onChange={(event) => {
-            setLoan(event.target.value)
-          }}
-          value={loan}
-          options={[
-            { label: 'All', value: 'all' },
-            ...(loans?.map((l) => ({ value: l.id, label: <LoanOption loan={l as Loan} key={l.id} /> })) ?? []),
-          ]}
-        />
-      )}
-
-      {['balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && (
-        <>
-          <Select
-            name="balanceSheetGroupBy"
-            label="Group by"
-            onChange={(event) => {
-              setGroupBy(event.target.value as GroupBy)
-            }}
-            value={groupBy}
-            options={[
-              { label: 'Day', value: 'day' },
-              { label: 'Daily', value: 'daily' },
-              { label: 'Monthly', value: 'month' },
-              { label: 'Quarterly', value: 'quarter' },
-              { label: 'Yearly', value: 'year' },
-            ]}
-          />
-          {groupBy === 'day' && (
-            <DateInput label="Day" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
-          )}
+        <Shelf flexDirection={['column', 'row']}>
+          <Box marginRight={2}>
+            <Select
+              name="balanceSheetGroupBy"
+              onChange={(event) => {
+                setGroupBy(event.target.value as GroupBy)
+              }}
+              value={groupBy}
+              options={[
+                { label: 'Day', value: 'day' },
+                { label: 'Daily', value: 'daily' },
+                { label: 'Monthly', value: 'month' },
+                { label: 'Quarterly', value: 'quarter' },
+                { label: 'Yearly', value: 'year' },
+              ]}
+              hideBorder
+            />
+          </Box>
+          <Box marginRight={2}>
+            {groupBy === 'day' && (
+              <DateInput row label="Day" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+            )}
+          </Box>
           {groupBy === 'month' || groupBy === 'daily' ? (
             <>
-              <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
-              <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+              <Box marginRight={2}>
+                <DateInput
+                  row
+                  label="From"
+                  value={startDate}
+                  max={endDate}
+                  onChange={(e) => setStartDate(e.target.value)}
+                />
+              </Box>
+              <Box marginRight={2}>
+                <DateInput
+                  row
+                  label="To"
+                  value={endDate}
+                  min={startDate}
+                  onChange={(e) => setEndDate(e.target.value)}
+                />
+              </Box>
             </>
           ) : null}
-        </>
-      )}
-
-      {['investor-tx', 'asset-tx', 'fee-tx'].includes(report) && (
-        <Select
-          name="txType"
-          label="Transaction type"
-          options={
-            report === 'investor-tx'
-              ? [
-                  {
-                    label: 'All',
-                    value: 'all',
-                  },
-                  {
-                    label: 'Submitted orders',
-                    value: 'orders',
-                  },
-                  {
-                    label: 'Executed orders',
-                    value: 'executions',
-                  },
-                  {
-                    label: 'Transfers',
-                    value: 'transfers',
-                  },
-                ]
-              : report === 'asset-tx'
-              ? [
-                  {
-                    label: 'All',
-                    value: 'all',
-                  },
-                  {
-                    label: 'Created',
-                    value: 'Created',
-                  },
-                  {
-                    label: 'Financed',
-                    value: 'Financed',
-                  },
-                  {
-                    label: 'Repaid',
-                    value: 'Repaid',
-                  },
-                  {
-                    label: 'Priced',
-                    value: 'Priced',
-                  },
-                  {
-                    label: 'Closed',
-                    value: 'Closed',
-                  },
-                ]
-              : [
-                  {
-                    label: 'All',
-                    value: 'all',
-                  },
-                  {
-                    label: formatPoolFeeTransactionType('CHARGED'),
-                    value: 'CHARGED',
-                  },
-                  {
-                    label: formatPoolFeeTransactionType('UNCHARGED'),
-                    value: 'UNCHARGED',
-                  },
-                  {
-                    label: formatPoolFeeTransactionType('ACCRUED'),
-                    value: 'ACCRUED',
-                  },
-                  {
-                    label: formatPoolFeeTransactionType('PAID'),
-                    value: 'PAID',
-                  },
-                ]
-          }
-          value={txType}
-          onChange={(event) => {
-            if (event.target.value) {
-              setTxType(event.target.value)
-            }
-          }}
-        />
+          <AnchorButton
+            disabled={!csvData}
+            download={csvData?.fileName}
+            href={csvData?.dataUrl}
+            icon={<IconDownload size={18} />}
+            small
+            variant="inverted"
+          >
+            CSV
+          </AnchorButton>
+        </Shelf>
+      </Shelf>
+      {transformDataChart?.length && (
+        <Box mt={4} width="100%" height={200} marginLeft="-50px">
+          <SimpleBarChart data={transformDataChart} currency={pool.currency} />
+        </Box>
       )}
-      {['investor-tx', 'investor-list'].includes(report) && (
-        <>
-          <Select
-            name="network"
-            label="Network"
-            options={[
-              {
-                label: 'All',
-                value: 'all',
-              },
-              {
-                label: 'Centrifuge',
-                value: 'centrifuge',
-              },
-              ...(domains ?? []).map((domain) => {
-                return {
-                  label: getNetworkName(domain.chainId),
-                  value: String(domain.chainId),
-                }
-              }),
-            ]}
-            value={network}
-            onChange={(e) => {
-              const { value } = e.target
-              if (value) {
-                setNetwork(isNaN(Number(value)) ? value : Number(value))
-              }
-            }}
-          />
-          <SearchInput
-            name="address"
-            label="Address"
-            placeholder="Filter by address..."
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-          />
-        </>
-      )}
-      <Box ml="auto">
-        <AnchorButton href={csvData?.dataUrl} download={csvData?.fileName} variant="primary" small disabled={!csvData}>
-          Export CSV
-        </AnchorButton>
-      </Box>
     </Shelf>
   )
 }
-
-function LoanOption({ loan }: { loan: Loan }) {
-  const nft = useCentNFT(loan.asset.collectionId, loan.asset.nftId, false, false)
-  const { data: metadata } = useMetadata(nft?.metadataUri, nftMetadataSchema)
-  return (
-    <option value={loan.id}>
-      {loan.id} - {metadata?.name}
-    </option>
-  )
-}
diff --git a/centrifuge-app/src/components/Report/index.tsx b/centrifuge-app/src/components/Report/index.tsx
index 3836463b0..6e0d73c19 100644
--- a/centrifuge-app/src/components/Report/index.tsx
+++ b/centrifuge-app/src/components/Report/index.tsx
@@ -2,7 +2,6 @@ import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
 import { Box, Shelf, Text } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import * as React from 'react'
-import { formatDate } from '../../utils/date'
 import { AssetList } from './AssetList'
 import { AssetTransactions } from './AssetTransactions'
 import { BalanceSheet } from './BalanceSheet'
@@ -23,20 +22,11 @@ export type TableDataRow = {
 }
 
 export function ReportComponent({ pool }: { pool: Pool }) {
-  const { report, startDate, endDate } = React.useContext(ReportContext)
+  const { report } = React.useContext(ReportContext)
 
   return (
     <Box pb={6}>
-      <Shelf p={2} justifyContent="space-between">
-        <Text as="span" variant="body3" color="textSecondary">
-          {!['investor-list', 'asset-list'].includes(report) && (
-            <>
-              {startDate ? formatDate(startDate) : 'The beginning of time'}
-              {' - '}
-              {endDate ? formatDate(endDate) : 'now'}
-            </>
-          )}
-        </Text>
+      <Shelf justifyContent="space-between">
         {['pool-balance', 'asset-list'].includes(report) && pool && (
           <Text as="span" variant="body3" color="textSecondary">
             All amounts are in {pool.currency.symbol}
diff --git a/centrifuge-app/src/pages/IssuerPool/Header.tsx b/centrifuge-app/src/pages/IssuerPool/Header.tsx
index e484bf85b..334d64e2e 100644
--- a/centrifuge-app/src/pages/IssuerPool/Header.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Header.tsx
@@ -77,7 +77,8 @@ export function IssuerPoolHeader({ actions }: Props) {
         <NavigationTabsItem to={`${basePath}/${pid}`}>Overview</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/assets`}>Assets</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/liquidity`}>Liquidity</NavigationTabsItem>
-        {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reporting</NavigationTabsItem>}
+        {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reports</NavigationTabsItem>}
+        {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/data`}>Data</NavigationTabsItem>}
         <NavigationTabsItem to={`${basePath}/${pid}/investors`}>Investors</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/configuration`}>Configuration</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/access`}>Access</NavigationTabsItem>
diff --git a/centrifuge-app/src/pages/IssuerPool/index.tsx b/centrifuge-app/src/pages/IssuerPool/index.tsx
index e08846e39..8bfe1a8c4 100644
--- a/centrifuge-app/src/pages/IssuerPool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/index.tsx
@@ -32,6 +32,8 @@ export default function IssuerPoolPage() {
         <Route path="liquidity" element={<IssuerPoolLiquidityPage />} />
         <Route path="reporting" element={<IssuerPoolReportingPage />} />
         <Route path="reporting/:report" element={<IssuerPoolReportingPage />} />
+        <Route path="data" element={<IssuerPoolReportingPage />} />
+        <Route path="data/:report" element={<IssuerPoolReportingPage />} />
         <Route path="pricing" element={<IssuerPoolPricingPage />} />
         <Route path="fees" element={<IssuerPoolFeesPage />} />
       </Routes>
diff --git a/centrifuge-app/src/pages/Pool/Header.tsx b/centrifuge-app/src/pages/Pool/Header.tsx
index 7a1b5bd9f..c9d1a7e99 100644
--- a/centrifuge-app/src/pages/Pool/Header.tsx
+++ b/centrifuge-app/src/pages/Pool/Header.tsx
@@ -63,7 +63,8 @@ export function PoolDetailHeader({ actions }: Props) {
           <NavigationTabsItem to={`${basePath}/${pid}`}>Overview</NavigationTabsItem>
           <NavigationTabsItem to={`${basePath}/${pid}/assets`}>Assets</NavigationTabsItem>
           <NavigationTabsItem to={`${basePath}/${pid}/liquidity`}>Liquidity</NavigationTabsItem>
-          {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reporting</NavigationTabsItem>}
+          {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reports</NavigationTabsItem>}
+          {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/data`}>Data</NavigationTabsItem>}
           {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/fees`}>Fees</NavigationTabsItem>}
         </NavigationTabs>
       </Shelf>
diff --git a/centrifuge-app/src/pages/Pool/index.tsx b/centrifuge-app/src/pages/Pool/index.tsx
index ff51232aa..ffc823386 100644
--- a/centrifuge-app/src/pages/Pool/index.tsx
+++ b/centrifuge-app/src/pages/Pool/index.tsx
@@ -10,7 +10,9 @@ export default function PoolDetailPage() {
     <Routes>
       <Route path="/" element={<PoolDetailOverviewTab />} />
       <Route path="reporting/:report" element={<PoolDetailReportingTab />} />
+      <Route path="data/:report" element={<PoolDetailReportingTab />} />
       <Route path="reporting" element={<PoolDetailReportingTab />} />
+      <Route path="data" element={<PoolDetailReportingTab />} />
       <Route path="liquidity" element={<PoolDetailLiquidityTab />} />
       <Route path="assets" element={<PoolDetailAssetsTab />} />
       <Route path="fees" element={<PoolFeesTab />} />
diff --git a/centrifuge-app/src/utils/formatting.ts b/centrifuge-app/src/utils/formatting.ts
index 4db8c2d82..b301b0e91 100644
--- a/centrifuge-app/src/utils/formatting.ts
+++ b/centrifuge-app/src/utils/formatting.ts
@@ -35,15 +35,18 @@ export function formatBalanceAbbreviated(
       ? amount.toNumber()
       : amount
   let formattedAmount = ''
-  if (amountNumber >= 1e9) {
+  const absAmount = Math.abs(amountNumber)
+
+  if (absAmount >= 1e9) {
     formattedAmount = `${(amountNumber / 1e9).toFixed(decimals)}B`
-  } else if (amountNumber >= 1e6) {
+  } else if (absAmount >= 1e6) {
     formattedAmount = `${(amountNumber / 1e6).toFixed(decimals)}M`
-  } else if (amountNumber > 999) {
+  } else if (absAmount > 999) {
     formattedAmount = `${(amountNumber / 1e3).toFixed(decimals)}K`
   } else {
     formattedAmount = `${amountNumber.toFixed(decimals)}`
   }
+
   return currency ? `${formattedAmount} ${currency}` : formattedAmount
 }
 
diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
index e89aab653..47a32bd63 100644
--- a/fabric/src/components/Button/WalletButton.tsx
+++ b/fabric/src/components/Button/WalletButton.tsx
@@ -30,6 +30,12 @@ const StyledButton = styled.button`
   outline: 0;
   border-radius: 40px;
   white-space: nowrap;
+  & > span {
+    border-color: ${({ theme }) => theme.colors.backgroundPrimary};
+    :hover {
+      border-color: ${({ theme }) => theme.colors.backgroundPrimary};
+    }
+  }
 `
 
 const IdenticonWrapper = styled(Flex)({
diff --git a/fabric/src/components/InputUnit/index.tsx b/fabric/src/components/InputUnit/index.tsx
index 2a5d9c336..109ccd95e 100644
--- a/fabric/src/components/InputUnit/index.tsx
+++ b/fabric/src/components/InputUnit/index.tsx
@@ -15,15 +15,21 @@ export type InputUnitProps = {
   errorMessage?: string
   inputElement?: React.ReactNode
   disabled?: boolean
+  row?: boolean
 }
 
-export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElement, disabled }: InputUnitProps) {
+export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElement, disabled, row }: InputUnitProps) {
   const defaultId = React.useId()
   id ??= defaultId
+
   return (
     <IdContext.Provider value={id}>
-      <Stack gap={1}>
-        {label && <InputLabel disabled={disabled}>{label}</InputLabel>}
+      <Stack gap={1} flexDirection={row ? 'row' : 'column'} alignItems="center">
+        {label && (
+          <InputLabel row={row} disabled={disabled}>
+            {row ? `${label}:` : ''}
+          </InputLabel>
+        )}
         <Text
           variant="body2"
           color={disabled ? 'textDisabled' : 'textPrimary'}
@@ -46,9 +52,22 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
   )
 }
 
-export function InputLabel({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
+export function InputLabel({
+  children,
+  disabled,
+  row,
+}: {
+  children: React.ReactNode
+  disabled?: boolean
+  row?: boolean
+}) {
   return (
-    <Text variant="label2" color={disabled ? 'textDisabled' : 'textPrimary'} as="label" htmlFor={useContextId()}>
+    <Text
+      variant={row ? 'heading3' : 'label2'}
+      color={disabled ? 'textDisabled' : 'textPrimary'}
+      as="label"
+      htmlFor={useContextId()}
+    >
       {children}
     </Text>
   )
diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
index 49d98d7ca..9c12220b7 100644
--- a/fabric/src/components/TextInput/index.tsx
+++ b/fabric/src/components/TextInput/index.tsx
@@ -11,6 +11,7 @@ export type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> &
   InputUnitProps & {
     action?: React.ReactNode
     symbol?: React.ReactNode
+    row?: boolean
   }
 export type TextAreaInputProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
   InputUnitProps & {
@@ -113,11 +114,12 @@ export function TextInputBox(
   props: Omit<TextInputProps, 'label' | 'secondaryLabel'> & {
     error?: boolean
     inputRef?: React.Ref<HTMLInputElement>
+    row?: boolean
   }
 ) {
-  const { error, disabled, action, symbol, inputRef, inputElement, ...inputProps } = props
+  const { error, disabled, action, symbol, inputRef, inputElement, row, ...inputProps } = props
   return (
-    <StyledInputBox alignItems="stretch" height="input">
+    <StyledInputBox hideBorder={!!row} alignItems="stretch" height="input">
       {inputElement ?? <StyledTextInput disabled={disabled} {...inputProps} id={useContextId()} ref={inputRef} />}
       {symbol && (
         <Flex alignSelf="center" pr={1}>
@@ -167,9 +169,10 @@ export function SearchInput({ label, secondaryLabel, disabled, errorMessage, id,
   )
 }
 
-export function DateInput({ label, secondaryLabel, disabled, errorMessage, id, ...inputProps }: TextInputProps) {
+export function DateInput({ label, secondaryLabel, disabled, errorMessage, id, row, ...inputProps }: TextInputProps) {
   const defaultId = React.useId()
   id ??= defaultId
+
   return (
     <InputUnit
       id={id}
@@ -177,12 +180,14 @@ export function DateInput({ label, secondaryLabel, disabled, errorMessage, id, .
       secondaryLabel={secondaryLabel}
       disabled={disabled}
       errorMessage={errorMessage}
+      row={row}
       inputElement={
         <TextInputBox
           type="date"
           disabled={disabled}
           error={!!errorMessage}
           required // hides the reset button in Firefox
+          row={row}
           {...inputProps}
         />
       }
diff --git a/fabric/src/icon-svg/IconBalanceSheet.svg b/fabric/src/icon-svg/Icon-balance-sheet.svg
similarity index 94%
rename from fabric/src/icon-svg/IconBalanceSheet.svg
rename to fabric/src/icon-svg/Icon-balance-sheet.svg
index 89a2407fc..ec8f772b9 100644
--- a/fabric/src/icon-svg/IconBalanceSheet.svg
+++ b/fabric/src/icon-svg/Icon-balance-sheet.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.08389 10.4704H7.08389M12.9172 10.4704H17.9172M10.0006 5.47038V17.137M10.0006 5.47038C11.1512 5.47038 12.0839 4.53764 12.0839 3.38704M10.0006 5.47038C8.84996 5.47038 7.91722 4.53764 7.91722 3.38704M3.33389 17.137L16.6672 17.137M3.33389 3.38705L7.91722 3.38704M7.91722 3.38704C7.91722 2.23645 8.84996 1.30371 10.0006 1.30371C11.1512 1.30371 12.0839 2.23645 12.0839 3.38704M12.0839 3.38704L16.6672 3.38704M7.40092 11.584C7.06701 12.8625 5.93231 13.8037 4.58389 13.8037C3.23547 13.8037 2.10077 12.8625 1.76686 11.584C1.73958 11.4795 1.72594 11.4273 1.72462 11.2186C1.72381 11.0907 1.77136 10.7957 1.81232 10.6745C1.87915 10.4767 1.95148 10.3651 2.09615 10.1419L4.58389 6.30371L7.07163 10.1419C7.2163 10.3651 7.28864 10.4767 7.35546 10.6745C7.39642 10.7957 7.44397 11.0907 7.44316 11.2186C7.44185 11.4273 7.42821 11.4795 7.40092 11.584ZM18.2343 11.584C17.9003 12.8625 16.7656 13.8037 15.4172 13.8037C14.0688 13.8037 12.9341 12.8625 12.6002 11.584C12.5729 11.4795 12.5593 11.4273 12.558 11.2186C12.5571 11.0907 12.6047 10.7957 12.6457 10.6745C12.7125 10.4767 12.7848 10.3651 12.9295 10.1419L15.4172 6.30371L17.905 10.1419C18.0496 10.3651 18.122 10.4767 18.1888 10.6745C18.2298 10.7957 18.2773 11.0907 18.2765 11.2186C18.2752 11.4273 18.2615 11.4795 18.2343 11.584Z" stroke="#91969B" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.08389 10.4704H7.08389M12.9172 10.4704H17.9172M10.0006 5.47038V17.137M10.0006 5.47038C11.1512 5.47038 12.0839 4.53764 12.0839 3.38704M10.0006 5.47038C8.84996 5.47038 7.91722 4.53764 7.91722 3.38704M3.33389 17.137L16.6672 17.137M3.33389 3.38705L7.91722 3.38704M7.91722 3.38704C7.91722 2.23645 8.84996 1.30371 10.0006 1.30371C11.1512 1.30371 12.0839 2.23645 12.0839 3.38704M12.0839 3.38704L16.6672 3.38704M7.40092 11.584C7.06701 12.8625 5.93231 13.8037 4.58389 13.8037C3.23547 13.8037 2.10077 12.8625 1.76686 11.584C1.73958 11.4795 1.72594 11.4273 1.72462 11.2186C1.72381 11.0907 1.77136 10.7957 1.81232 10.6745C1.87915 10.4767 1.95148 10.3651 2.09615 10.1419L4.58389 6.30371L7.07163 10.1419C7.2163 10.3651 7.28864 10.4767 7.35546 10.6745C7.39642 10.7957 7.44397 11.0907 7.44316 11.2186C7.44185 11.4273 7.42821 11.4795 7.40092 11.584ZM18.2343 11.584C17.9003 12.8625 16.7656 13.8037 15.4172 13.8037C14.0688 13.8037 12.9341 12.8625 12.6002 11.584C12.5729 11.4795 12.5593 11.4273 12.558 11.2186C12.5571 11.0907 12.6047 10.7957 12.6457 10.6745C12.7125 10.4767 12.7848 10.3651 12.9295 10.1419L15.4172 6.30371L17.905 10.1419C18.0496 10.3651 18.122 10.4767 18.1888 10.6745C18.2298 10.7957 18.2773 11.0907 18.2765 11.2186C18.2752 11.4273 18.2615 11.4795 18.2343 11.584Z" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/fabric/src/icon-svg/IconCashflow.svg b/fabric/src/icon-svg/Icon-cashflow.svg
similarity index 85%
rename from fabric/src/icon-svg/IconCashflow.svg
rename to fabric/src/icon-svg/Icon-cashflow.svg
index 798a162bc..b254ea200 100644
--- a/fabric/src/icon-svg/IconCashflow.svg
+++ b/fabric/src/icon-svg/Icon-cashflow.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 13.6367V17.6367M16 11.6367V17.6367M12 7.63672V17.6367M7.8 21.6367H16.2C17.8802 21.6367 18.7202 21.6367 19.362 21.3097C19.9265 21.0221 20.3854 20.5632 20.673 19.9987C21 19.357 21 18.5169 21 16.8367V8.43672C21 6.75656 21 5.91648 20.673 5.27475C20.3854 4.71026 19.9265 4.25132 19.362 3.9637C18.7202 3.63672 17.8802 3.63672 16.2 3.63672H7.8C6.11984 3.63672 5.27976 3.63672 4.63803 3.9637C4.07354 4.25132 3.6146 4.71026 3.32698 5.27475C3 5.91648 3 6.75656 3 8.43672V16.8367C3 18.5169 3 19.357 3.32698 19.9987C3.6146 20.5632 4.07354 21.0221 4.63803 21.3097C5.27976 21.6367 6.11984 21.6367 7.8 21.6367Z" stroke="#91969B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 13.6367V17.6367M16 11.6367V17.6367M12 7.63672V17.6367M7.8 21.6367H16.2C17.8802 21.6367 18.7202 21.6367 19.362 21.3097C19.9265 21.0221 20.3854 20.5632 20.673 19.9987C21 19.357 21 18.5169 21 16.8367V8.43672C21 6.75656 21 5.91648 20.673 5.27475C20.3854 4.71026 19.9265 4.25132 19.362 3.9637C18.7202 3.63672 17.8802 3.63672 16.2 3.63672H7.8C6.11984 3.63672 5.27976 3.63672 4.63803 3.9637C4.07354 4.25132 3.6146 4.71026 3.32698 5.27475C3 5.91648 3 6.75656 3 8.43672V16.8367C3 18.5169 3 19.357 3.32698 19.9987C3.6146 20.5632 4.07354 21.0221 4.63803 21.3097C5.27976 21.6367 6.11984 21.6367 7.8 21.6367Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/fabric/src/icon-svg/IconProfitAndLoss.svg b/fabric/src/icon-svg/Icon-profit-and-loss.svg
similarity index 86%
rename from fabric/src/icon-svg/IconProfitAndLoss.svg
rename to fabric/src/icon-svg/Icon-profit-and-loss.svg
index 5223d3810..f544e3050 100644
--- a/fabric/src/icon-svg/IconProfitAndLoss.svg
+++ b/fabric/src/icon-svg/Icon-profit-and-loss.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 19.1367H2.6C2.03995 19.1367 1.75992 19.1367 1.54601 19.0277C1.35785 18.9319 1.20487 18.7789 1.10899 18.5907C1 18.3768 1 18.0968 1 17.5367V1.13672M19 5.13672L13.5657 10.571C13.3677 10.769 13.2687 10.868 13.1545 10.9051C13.0541 10.9378 12.9459 10.9378 12.8455 10.9051C12.7313 10.868 12.6323 10.769 12.4343 10.571L10.5657 8.7024C10.3677 8.5044 10.2687 8.40539 10.1545 8.3683C10.0541 8.33567 9.94591 8.33567 9.84549 8.3683C9.73133 8.40539 9.63232 8.5044 9.43431 8.7024L5 13.1367M19 5.13672H15M19 5.13672V9.13672" stroke="#91969B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 19.1367H2.6C2.03995 19.1367 1.75992 19.1367 1.54601 19.0277C1.35785 18.9319 1.20487 18.7789 1.10899 18.5907C1 18.3768 1 18.0968 1 17.5367V1.13672M19 5.13672L13.5657 10.571C13.3677 10.769 13.2687 10.868 13.1545 10.9051C13.0541 10.9378 12.9459 10.9378 12.8455 10.9051C12.7313 10.868 12.6323 10.769 12.4343 10.571L10.5657 8.7024C10.3677 8.5044 10.2687 8.40539 10.1545 8.3683C10.0541 8.33567 9.94591 8.33567 9.84549 8.3683C9.73133 8.40539 9.63232 8.5044 9.43431 8.7024L5 13.1367M19 5.13672H15M19 5.13672V9.13672" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
index ebb7bf98a..c24d2aa39 100644
--- a/fabric/src/theme/tokens/theme.ts
+++ b/fabric/src/theme/tokens/theme.ts
@@ -1,4 +1,4 @@
-import { black, blackScale, blueScale, gold, grayScale, yellowScale } from './colors'
+import { black, blueScale, gold, grayScale, yellowScale } from './colors'
 
 const statusDefault = grayScale[800]
 const statusInfo = blueScale[500]
@@ -65,19 +65,19 @@ const colors = {
   shadowButtonPrimary: 'transparent',
 
   backgroundButtonSecondary: black,
-  backgroundButtonSecondaryFocus: blackScale[500],
-  backgroundButtonSecondaryHover: blackScale[500],
-  backgroundButtonSecondaryPressed: blackScale[500],
+  backgroundButtonSecondaryFocus: black,
+  backgroundButtonSecondaryHover: black,
+  backgroundButtonSecondaryPressed: black,
   backgroundButtonSecondaryDisabled: grayScale[300],
   textButtonSecondary: 'white',
-  textButtonSecondaryFocus: gold,
-  textButtonSecondaryHover: gold,
-  textButtonSecondaryPressed: gold,
+  textButtonSecondaryFocus: 'white',
+  textButtonSecondaryHover: 'white',
+  textButtonSecondaryPressed: 'white',
   textButtonSecondaryDisabled: grayScale[500],
-  borderButtonSecondary: grayScale[300],
-  borderButtonSecondaryFocus: gold,
-  borderButtonSecondaryHover: gold,
-  borderButtonSecondaryPressed: gold,
+  borderButtonSecondary: black,
+  borderButtonSecondaryFocus: black,
+  borderButtonSecondaryHover: black,
+  borderButtonSecondaryPressed: black,
   borderButtonSecondaryDisabled: 'transparent',
   shadowButtonSecondary: 'transparent',
 
@@ -90,7 +90,7 @@ const colors = {
   textButtonTertiaryFocus: gold,
   textButtonTertiaryHover: gold,
   textButtonTertiaryPressed: gold,
-  textButtonTertiaryDisabled: gold,
+  textButtonTertiaryDisabled: grayScale[300],
   borderButtonTertiary: 'transparent',
   borderButtonTertiaryFocus: 'transparent',
   borderButtonTertiaryHover: 'transparent',
@@ -103,9 +103,9 @@ const colors = {
   backgroundButtonInvertedPressed: grayScale[100],
   backgroundButtonInvertedDisabled: grayScale[100],
   textButtonInverted: black,
-  textButtonInvertedFocus: grayScale[600],
-  textButtonInvertedHover: grayScale[600],
-  textButtonInvertedPressed: grayScale[600],
+  textButtonInvertedFocus: black,
+  textButtonInvertedHover: black,
+  textButtonInvertedPressed: black,
   textButtonInvertedDisabled: grayScale[500],
   borderButtonInverted: grayScale[100],
   borderButtonInvertedFocus: black,