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/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx
new file mode 100644
index 000000000..c856ad847
--- /dev/null
+++ b/centrifuge-app/src/components/Report/DataFilter.tsx
@@ -0,0 +1,385 @@
+import { Loan, Pool } from '@centrifuge/centrifuge-js'
+import { useGetNetworkName } from '@centrifuge/centrifuge-react'
+import {
+  AnchorButton,
+  Box,
+  Button,
+  DateInput,
+  IconBalanceSheet,
+  IconCashflow,
+  IconDownload,
+  IconProfitAndLoss,
+  SearchInput,
+  Select,
+  Shelf,
+} from '@centrifuge/fabric'
+import * as React from 'react'
+import { useNavigate } from 'react-router'
+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 = {
+  pool: Pool
+}
+
+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)
+  const navigate = useNavigate()
+  const basePath = useBasePath()
+
+  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' },
+  ]
+
+  return (
+    <Shelf
+      alignItems="center"
+      flexWrap="wrap"
+      gap={2}
+      p={2}
+      borderWidth={0}
+      borderBottomWidth={1}
+      borderStyle="solid"
+      borderColor="borderPrimary"
+    >
+      <Button
+        variant="secondary"
+        icon={<IconBalanceSheet />}
+        onClick={() => navigate(`${basePath}/${pool.id}/reporting/balance-sheet`)}
+      >
+        Balance sheet
+      </Button>
+      <Button
+        variant="secondary"
+        icon={<IconProfitAndLoss />}
+        onClick={() => navigate(`${basePath}/${pool.id}/reporting/profit-and-loss`)}
+      >
+        Profit & loss
+      </Button>
+      <Button
+        variant="secondary"
+        icon={<IconCashflow />}
+        onClick={() => navigate(`${basePath}/${pool.id}/reporting/cash-flow-statement`)}
+      >
+        Cash flow
+      </Button>
+
+      {!['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/ReportFilter.tsx b/centrifuge-app/src/components/Report/ReportFilter.tsx
index 72193d630..3ed858089 100644
--- a/centrifuge-app/src/components/Report/ReportFilter.tsx
+++ b/centrifuge-app/src/components/Report/ReportFilter.tsx
@@ -1,197 +1,96 @@
-import { Loan, Pool } from '@centrifuge/centrifuge-js'
-import { useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { AnchorButton, Box, DateInput, SearchInput, Select, Shelf } from '@centrifuge/fabric'
+import { 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 { 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 { GroupBy, ReportContext } from './ReportContext'
+
+interface StyledButtonProps {
+  selected?: boolean
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
+  margin-right: 12px;
+  & > span {
+    background-color: ${({ selected, theme }) =>
+      selected ? theme.colors.backgroundPrimary : theme.colors.backgroundInverted};
+    color: ${({ selected, theme }) => (selected ? theme.colors.textPrimary : theme.colors.textInverted)};
+  }
+
+  &:hover > span {
+    background-color: ${({ selected, theme }) =>
+      selected ? theme.colors.backgroundPrimary : theme.colors.backgroundHover};
+    color: ${({ selected, theme }) => (selected ? theme.colors.textPrimary : theme.colors.textHover)};
+  }
+`
 
 type ReportFilterProps = {
   pool: Pool
 }
 
 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)
+  const { csvData, setStartDate, startDate, endDate, setEndDate, groupBy, setGroupBy, report } =
+    React.useContext(ReportContext)
   const navigate = useNavigate()
   const basePath = useBasePath()
 
-  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' },
-  ]
-
   return (
     <Shelf
       alignItems="center"
       flexWrap="wrap"
       gap={2}
-      p={2}
-      borderWidth={0}
-      borderBottomWidth={1}
+      padding={2}
+      marginX={[1, 6]}
+      marginY={2}
+      borderWidth={[0, 1]}
+      borderRadius={6}
       borderStyle="solid"
       borderColor="borderPrimary"
+      justifyContent="space-between"
     >
-      <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)} />
-        </>
-      )}
-
-      {(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} /> })) ?? []),
-          ]}
-        />
-      )}
+      <Box display="flex">
+        <StyledButton
+          selected={report === 'balance-sheet'}
+          variant="secondary"
+          icon={<IconBalanceSheet />}
+          onClick={() => navigate(`${basePath}/${pool.id}/reporting/balance-sheet`)}
+        >
+          Balance sheet
+        </StyledButton>
+        <StyledButton
+          selected={report === 'profit-and-loss'}
+          variant="secondary"
+          icon={<IconProfitAndLoss />}
+          onClick={() => navigate(`${basePath}/${pool.id}/reporting/profit-and-loss`)}
+        >
+          Profit & loss
+        </StyledButton>
+        <StyledButton
+          selected={report === 'cash-flow-statement'}
+          variant="secondary"
+          icon={<IconCashflow />}
+          onClick={() => navigate(`${basePath}/${pool.id}/reporting/cash-flow-statement`)}
+        >
+          Cash flow
+        </StyledButton>
+      </Box>
 
-      {['balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && (
-        <>
+      <Box display="flex">
+        <Box marginRight={2}>
           <Select
             name="balanceSheetGroupBy"
-            label="Group by"
             onChange={(event) => {
               setGroupBy(event.target.value as GroupBy)
             }}
@@ -203,154 +102,42 @@ export function ReportFilter({ pool }: ReportFilterProps) {
               { label: 'Quarterly', value: 'quarter' },
               { label: 'Yearly', value: 'year' },
             ]}
+            hideBorder
           />
+        </Box>
+        <Box marginRight={2}>
           {groupBy === 'day' && (
-            <DateInput label="Day" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+            <DateInput row 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}
-        </>
-      )}
+        </Box>
+        {groupBy === 'month' || groupBy === 'daily' ? (
+          <>
+            <Box marginRight={2}>
+              <DateInput
+                row
+                label="From"
+                value={startDate}
+                max={endDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </Box>
+            <DateInput row label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+          </>
+        ) : null}
+      </Box>
 
-      {['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 href={csvData?.dataUrl} download={csvData?.fileName} variant="primary" small disabled={!csvData}>
-          Export CSV
+      <Box>
+        <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/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/IconBalanceSheet.svg
index 89a2407fc..ec8f772b9 100644
--- a/fabric/src/icon-svg/IconBalanceSheet.svg
+++ b/fabric/src/icon-svg/IconBalanceSheet.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/IconCashflow.svg
index 798a162bc..4a8ff3024 100644
--- a/fabric/src/icon-svg/IconCashflow.svg
+++ b/fabric/src/icon-svg/IconCashflow.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="#252B34" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/fabric/src/icon-svg/IconProfitAndLoss.svg b/fabric/src/icon-svg/IconProfitAndLoss.svg
index 5223d3810..601971402 100644
--- a/fabric/src/icon-svg/IconProfitAndLoss.svg
+++ b/fabric/src/icon-svg/IconProfitAndLoss.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="#252B34" 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..d10a5d692 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',
 
@@ -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,