diff --git a/packages/cacti-ledger-browser/package.json b/packages/cacti-ledger-browser/package.json
index e9e2816f28..cc5e78453b 100644
--- a/packages/cacti-ledger-browser/package.json
+++ b/packages/cacti-ledger-browser/package.json
@@ -66,6 +66,7 @@
     "@supabase/supabase-js": "1.35.6",
     "@tanstack/react-query": "5.29.2",
     "apexcharts": "3.45.2",
+    "buffer": "6.0.3",
     "ethers": "6.12.1",
     "react": "18.2.0",
     "react-apexcharts": "1.4.1",
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/eth/pages/Dashboard/Dashboard.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/eth/pages/Dashboard/Dashboard.tsx
index fe5aa3a080..58b3779806 100644
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/eth/pages/Dashboard/Dashboard.tsx
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/eth/pages/Dashboard/Dashboard.tsx
@@ -1,34 +1,14 @@
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
-import { SvgIconComponent } from "@mui/icons-material";
 import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined";
 import HubIcon from "@mui/icons-material/Hub";
 
 import PageTitle from "../../../../components/ui/PageTitle";
+import TitleWithIcon from "../../../../components/ui/TitleWithIcon";
 import TransactionSummary from "./TransactionSummary";
 import BlockSummary from "./BlockSummary";
 
-interface TitleWithIconProps {
-  icon: SvgIconComponent;
-  children: React.ReactNode;
-}
-
-const TitleWithIcon: React.FC<TitleWithIconProps> = ({
-  children,
-  icon: Icon,
-}) => {
-  return (
-    <Box display="flex" alignItems="center" marginBottom={2}>
-      <Icon sx={{ fontSize: 35 }} color="primary" />
-      <Typography variant="h6" component="h3" marginLeft={1}>
-        {children}
-      </Typography>
-    </Box>
-  );
-};
-
 function Dashboard() {
   return (
     <Box>
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/BlockList/BlockList.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/BlockList/BlockList.tsx
new file mode 100644
index 0000000000..b3bfc8944a
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/BlockList/BlockList.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import { fabricAllBlocksQuery } from "../../queries";
+import { blockColumnsConfig } from "./blockColumnsConfig";
+import type { UITableListingPaginationActionProps } from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
+import UITableListing from "../../../../components/ui/UITableListing/UITableListing";
+
+/**
+ * List of columns that can be rendered in a block list table
+ */
+export type BlockListColumn = keyof typeof blockColumnsConfig;
+
+/**
+ * BlockList properties.
+ */
+export interface BlockListProps {
+  footerComponent: React.ComponentType<UITableListingPaginationActionProps>;
+  columns: BlockListColumn[];
+  rowsPerPage: number;
+  tableSize?: "small" | "medium";
+}
+
+/**
+ * BlockList - Show table with fabric blocks.
+ *
+ * @param footerComponent component will be rendered in a footer of a transaction list table.
+ * @param columns list of columns to be rendered.
+ * @param rowsPerPage how many rows to show per page.
+ */
+const BlockList: React.FC<BlockListProps> = ({
+  footerComponent,
+  columns,
+  rowsPerPage,
+  tableSize,
+}) => {
+  return (
+    <UITableListing
+      queryFunction={fabricAllBlocksQuery}
+      label="block"
+      columnConfig={blockColumnsConfig}
+      footerComponent={footerComponent}
+      columns={columns}
+      rowsPerPage={rowsPerPage}
+      tableSize={tableSize}
+    />
+  );
+};
+
+export default BlockList;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/BlockList/blockColumnsConfig.ts b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/BlockList/blockColumnsConfig.ts
new file mode 100644
index 0000000000..09d561fbdf
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/BlockList/blockColumnsConfig.ts
@@ -0,0 +1,20 @@
+/**
+ * Component user can select columns to be rendered in a table list.
+ * Possible fields and their configurations are defined in here.
+ */
+export const blockColumnsConfig = {
+  number: {
+    name: "Number",
+    field: "number",
+  },
+  hash: {
+    name: "Hash",
+    field: "hash",
+    isLongString: true,
+    isUnique: true,
+  },
+  txCount: {
+    name: "Transaction Count",
+    field: "transaction_count",
+  },
+};
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/CertificateDetails/CertificateDetailsBox.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/CertificateDetails/CertificateDetailsBox.tsx
new file mode 100644
index 0000000000..df79eac865
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/CertificateDetails/CertificateDetailsBox.tsx
@@ -0,0 +1,169 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import { styled } from "@mui/material/styles";
+
+import { FabricCertificate } from "../../fabric-supabase-types";
+import StackedRowItems from "../ui/StackedRowItems";
+
+const ListHeaderTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  fontWeight: "bold",
+}));
+
+const TextFieldDisabledBlackFont = styled(TextField)(() => ({
+  "& .MuiInputBase-input.Mui-disabled": {
+    WebkitTextFillColor: "black",
+  },
+}));
+
+function formatDateString(date: string | undefined) {
+  if (date) {
+    return new Date(date).toLocaleDateString();
+  }
+
+  return "-";
+}
+
+function formatCertificateAttr(attr: string | null | undefined) {
+  if (attr) {
+    return attr;
+  }
+
+  return "-";
+}
+
+function formatCertificateSubject(
+  certificate: FabricCertificate,
+  fieldPrefix: "issuer" | "subject",
+) {
+  return (
+    <ul style={{ margin: 0 }}>
+      <li>
+        <StackedRowItems>
+          <ListHeaderTypography>Common Name:</ListHeaderTypography>
+          <Typography>
+            {formatCertificateAttr(certificate[`${fieldPrefix}_common_name`])}
+          </Typography>
+        </StackedRowItems>
+      </li>
+      <li>
+        <StackedRowItems>
+          <ListHeaderTypography>Organization:</ListHeaderTypography>
+          <Typography>
+            {formatCertificateAttr(certificate[`${fieldPrefix}_org`])}
+          </Typography>
+        </StackedRowItems>
+      </li>
+      <li>
+        <StackedRowItems>
+          <ListHeaderTypography>Organization Unit:</ListHeaderTypography>
+          <Typography>
+            {formatCertificateAttr(certificate[`${fieldPrefix}_org_unit`])}
+          </Typography>
+        </StackedRowItems>
+      </li>
+      <li>
+        <StackedRowItems>
+          <ListHeaderTypography>Country:</ListHeaderTypography>
+          <Typography>
+            {formatCertificateAttr(certificate[`${fieldPrefix}_country`])}
+          </Typography>
+        </StackedRowItems>
+      </li>
+      <li>
+        <StackedRowItems>
+          <ListHeaderTypography>Locality:</ListHeaderTypography>
+          <Typography>
+            {formatCertificateAttr(certificate[`${fieldPrefix}_locality`])}
+          </Typography>
+        </StackedRowItems>
+      </li>
+      <li>
+        <StackedRowItems>
+          <ListHeaderTypography>State:</ListHeaderTypography>
+          <Typography>
+            {formatCertificateAttr(certificate[`${fieldPrefix}_state`])}
+          </Typography>
+        </StackedRowItems>
+      </li>
+    </ul>
+  );
+}
+
+export interface CertificateDetailsBoxProps {
+  certificate: FabricCertificate | undefined;
+}
+
+/**
+ * Detailed information of provided fabric certificate.
+ * @param certificate: Fabric certificate from the DB.
+ */
+export default function CertificateDetailsBox({
+  certificate,
+}: CertificateDetailsBoxProps) {
+  return (
+    <Box>
+      <StackedRowItems>
+        <ListHeaderTypography>Serial Number:</ListHeaderTypography>
+        <Typography>
+          {formatCertificateAttr(certificate?.serial_number)}
+        </Typography>
+      </StackedRowItems>
+      <StackedRowItems>
+        <ListHeaderTypography>Valid From:</ListHeaderTypography>
+        <Typography>
+          {formatCertificateAttr(formatDateString(certificate?.valid_from))}
+        </Typography>
+      </StackedRowItems>
+      <StackedRowItems>
+        <ListHeaderTypography>Valid To:</ListHeaderTypography>
+        <Typography>
+          {formatCertificateAttr(formatDateString(certificate?.valid_to))}
+        </Typography>
+      </StackedRowItems>
+      <StackedRowItems>
+        <ListHeaderTypography>Alt Name:</ListHeaderTypography>
+        <Typography>
+          {formatCertificateAttr(certificate?.subject_alt_name)}
+        </Typography>
+      </StackedRowItems>
+
+      {certificate ? (
+        <>
+          <ListHeaderTypography marginTop={2}>Subject:</ListHeaderTypography>
+          {formatCertificateSubject(certificate, "subject")}
+        </>
+      ) : (
+        <StackedRowItems>
+          <ListHeaderTypography>Subject:</ListHeaderTypography>
+          <Typography>-</Typography>
+        </StackedRowItems>
+      )}
+
+      {certificate ? (
+        <>
+          <ListHeaderTypography marginTop={2}>Issuer:</ListHeaderTypography>
+          {formatCertificateSubject(certificate, "issuer")}
+        </>
+      ) : (
+        <StackedRowItems>
+          <ListHeaderTypography>Issuer:</ListHeaderTypography>
+          <Typography>-</Typography>
+        </StackedRowItems>
+      )}
+
+      <ListHeaderTypography marginTop={2}>
+        Certificate (PEM):
+      </ListHeaderTypography>
+      <TextFieldDisabledBlackFont
+        disabled
+        fullWidth
+        rows={5}
+        multiline
+        size="small"
+        value={certificate?.pem ?? ""}
+      />
+    </Box>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/CertificateDetails/CertificateDialogButton.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/CertificateDetails/CertificateDialogButton.tsx
new file mode 100644
index 0000000000..107cb668a9
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/CertificateDetails/CertificateDialogButton.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+
+import CertificateDetailsBox from "./CertificateDetailsBox";
+import { fabricCertificate } from "../../queries";
+import { useNotification } from "../../../../common/context/NotificationContext";
+
+export interface CertificateDialogButtonProps {
+  certId: string | null;
+}
+
+/**
+ * Show a button with certificate common name and organization, that will
+ * open a dialog with full certificate details on click.
+ *
+ * @warn Fetches the certificate from DB when mounted.
+ *
+ * @param certId ID of the certificate in database.
+ */
+export default function CertificateDialogButton({
+  certId,
+}: CertificateDialogButtonProps) {
+  const { showNotification } = useNotification();
+  const [openDialog, setOpenDialog] = React.useState(false);
+
+  const { isError, data, error } = useQuery({
+    ...fabricCertificate(certId ?? ""),
+    enabled: !!certId,
+  });
+
+  React.useEffect(() => {
+    isError &&
+      showNotification(
+        `Could not fetch creator certificate: ${error}`,
+        "error",
+      );
+  }, [isError]);
+
+  let creatorName = "unknownName";
+  if (data?.subject_common_name) {
+    creatorName = data.subject_common_name;
+  }
+
+  let creatorOrg = "unknownOrg";
+  if (data?.subject_org) {
+    creatorOrg = data.subject_org;
+  } else if (data?.subject_org_unit) {
+    creatorOrg = data.subject_org_unit;
+  }
+
+  return (
+    <>
+      <Button
+        disabled={!data}
+        style={{ textTransform: "none" }}
+        variant="outlined"
+        onClick={() => setOpenDialog(true)}
+      >
+        {creatorName}@{creatorOrg}
+      </Button>
+      <Dialog onClose={() => setOpenDialog(false)} open={openDialog}>
+        <DialogTitle color="primary">Certificate Details</DialogTitle>
+        <DialogContent>
+          <CertificateDetailsBox certificate={data} />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenAccount.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenAccount.tsx
deleted file mode 100644
index 565880406c..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenAccount.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import styles from "./TokenHeader.module.css";
-import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
-
-function TokenAccount(props: any) {
-  return (
-    <div className={styles["token-account"]}>
-      <span>
-        {" "}
-        <span className={styles["token-account-icon"]}>
-          <AccountBalanceWalletIcon />
-        </span>{" "}
-        {props.accountNum}
-      </span>
-    </div>
-  );
-}
-
-export default TokenAccount;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenHeader.module.css b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenHeader.module.css
deleted file mode 100644
index 2d9ef9600c..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenHeader.module.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.token-header {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1rem;
-}
-
-.token-details {
-    width: 100%;
-    height: min-content;
-    border: 1px solid rgb(240, 236, 236);
-    border-radius: 10px;
-    gap: 3rem;
-    padding: 1rem 2rem;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    background-color: rgb(247, 245, 245);
-}
-
-.token-details div {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.token-icon {
-    height: 100%;
-    transform: translateY(10%);
-    color: rgb(34, 70, 70);
-}
-
-.token-account {
-    font-size: 16px;
-    width: 100%;
-    height: min-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgb(247, 245, 245);
-    border-radius: 10px;
-    padding: 1rem;
-    padding-left: 2rem;
-}
-
-.token-account span {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-}
-
-.token-account-icon {
-    color: rgb(22, 92, 65);
-    font-size: 28px;
-    height: 30px;
-    width: 30px;
-}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenHeader.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenHeader.tsx
deleted file mode 100644
index fa846452d1..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TokenHeader/TokenHeader.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { supabase } from "../../../../common/supabase-client";
-import { TokenMetadata20 } from "../../../../common/supabase-types";
-import TokenAccount from "./TokenAccount";
-
-
-import styles from "./TokenHeader.module.css";
-import { useEffect, useState } from "react";
-
-function TokenHeader(props: any) {
-  const [tokenData, setTokenData] = useState<TokenMetadata20 | any>();
-
-  const fetchData = async () => {
-    try {
-      const { data } = await supabase
-        .from(`token_metadata_erc20`)
-        .select("*")
-        .match({ address: props.token_address });
-      console.log(data);
-      if (data?.[0]) {
-        setTokenData(data[0]);
-      } else {
-        throw new Error("Failed to load token details");
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  return (
-    <div className={styles["token-header"]}>
-      <TokenAccount accountNum={props.accountNum} />
-      <div className={styles["token-details"]}>
-        <p>
-          <b>Address:</b> {props.token_address}
-        </p>
-        <p>
-          <b>Created at:</b> {tokenData?.created_at}
-        </p>
-        <p>
-          <b>Total supply: </b>
-          {tokenData?.total_supply}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default TokenHeader;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TransactionList/TransactionList.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TransactionList/TransactionList.tsx
new file mode 100644
index 0000000000..01d56ff6ed
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TransactionList/TransactionList.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { UseQueryOptions } from "@tanstack/react-query";
+import { transactionColumnsConfig } from "./transactionColumnsConfig";
+import type { UITableListingPaginationActionProps } from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
+import UITableListing from "../../../../components/ui/UITableListing/UITableListing";
+
+/**
+ * List of columns that can be rendered in a transaction list table
+ */
+export type TransactionListColumn = keyof typeof transactionColumnsConfig;
+
+/**
+ * TransactionList properties.
+ */
+export interface TransactionListProps<T> {
+  queryFunction: (
+    page: number,
+    pageSize: number,
+  ) => UseQueryOptions<T[], any, any, any>;
+  footerComponent: React.ComponentType<UITableListingPaginationActionProps>;
+  columns: TransactionListColumn[];
+  rowsPerPage: number;
+  tableSize?: "small" | "medium";
+}
+
+/**
+ * TransactionList - Show table with fabric transactions.
+ *
+ * @param footerComponent component will be rendered in a footer of a transaction list table.
+ * @param columns list of columns to be rendered.
+ * @param rowsPerPage how many rows to show per page.
+ */
+
+export default function TransactionList<
+  T extends {
+    [key: string]: any;
+  },
+>({
+  queryFunction,
+  footerComponent,
+  columns,
+  rowsPerPage,
+  tableSize,
+}: TransactionListProps<T>) {
+  const navigate = useNavigate();
+
+  return (
+    <UITableListing
+      queryFunction={queryFunction}
+      label="transaction"
+      columnConfig={transactionColumnsConfig}
+      footerComponent={footerComponent}
+      columns={columns}
+      rowsPerPage={rowsPerPage}
+      tableSize={tableSize}
+      onClick={(row) => navigate(`../transaction/${row.hash}`)}
+    />
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TransactionList/transactionColumnsConfig.ts b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TransactionList/transactionColumnsConfig.ts
new file mode 100644
index 0000000000..71d0d75f04
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/TransactionList/transactionColumnsConfig.ts
@@ -0,0 +1,36 @@
+/**
+ * Component user can select columns to be rendered in transaction list.
+ * Possible fields and their configurations are defined in transactionColumnsConfig.
+ */
+export const transactionColumnsConfig = {
+  hash: {
+    name: "Hash",
+    field: "hash",
+    isLongString: true,
+    isUnique: true,
+  },
+  timestamp: {
+    name: "Timestamp",
+    field: "timestamp",
+  },
+  type: {
+    name: "Type",
+    field: "type",
+  },
+  epoch: {
+    name: "Epoch",
+    field: "epoch",
+  },
+  channel_id: {
+    name: "Channel ID",
+    field: "channel_id",
+  },
+  protocol_version: {
+    name: "Proto Version",
+    field: "protocol_version",
+  },
+  block: {
+    name: "Block",
+    field: "block_number",
+  },
+};
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/ui/StackedRowItems.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/ui/StackedRowItems.tsx
new file mode 100644
index 0000000000..e22fab4fe4
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/components/ui/StackedRowItems.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import Stack from "@mui/material/Stack";
+
+export interface StackedRowItemsProps {
+  children: React.ReactElement[];
+}
+
+/**
+ * Simple component that puts all the children in a row, space-between with minimal spacing 1.
+ * Uses MUI Stack.
+ */
+export default function StackedRowItems({ children }: StackedRowItemsProps) {
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      spacing={{ xs: 1 }}
+    >
+      {children}
+    </Stack>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/fabric-supabase-types.ts b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/fabric-supabase-types.ts
new file mode 100644
index 0000000000..4c16f694ff
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/fabric-supabase-types.ts
@@ -0,0 +1,57 @@
+export interface FabricBlock {
+  id: number;
+  number: number;
+  hash: string;
+  transaction_count: number;
+}
+
+export interface FabricTransaction {
+  block_id: string | null;
+  block_number: number | null;
+  channel_id: string;
+  epoch: number;
+  hash: string;
+  id: string;
+  protocol_version: number;
+  timestamp: string;
+  type: string;
+}
+
+export interface FabricTransactionAction {
+  chaincode_id: string;
+  creator_certificate_id: string | null;
+  creator_msp_id: string;
+  function_args: string | null;
+  function_name: string | null;
+  id: string;
+  transaction_id: string | null;
+}
+
+export interface FabricTransactionActionEndorsement {
+  certificate_id: string;
+  id: string;
+  mspid: string;
+  signature: string;
+  transaction_action_id: string | null;
+}
+
+export interface FabricCertificate {
+  id: string;
+  issuer_common_name: string | null;
+  issuer_country: string | null;
+  issuer_locality: string | null;
+  issuer_org: string | null;
+  issuer_org_unit: string | null;
+  issuer_state: string | null;
+  pem: string;
+  serial_number: string;
+  subject_alt_name: string;
+  subject_common_name: string | null;
+  subject_country: string | null;
+  subject_locality: string | null;
+  subject_org: string | null;
+  subject_org_unit: string | null;
+  subject_state: string | null;
+  valid_from: string;
+  valid_to: string;
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/index.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/index.tsx
index 2cc2e4c150..e534033c98 100644
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/index.tsx
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/index.tsx
@@ -1,10 +1,9 @@
-import DashFabric from "./pages/DashFabric/DashFabric";
-import TransactionsFabric from "./pages/TransactionsFabric/TransactionsFabric";
-import BlocksFabric from "./pages/BlocksFabric/BlocksFabric";
-import FabricTransaction from "./pages/FabricTransaction/FabricTransaction";
-import FabricBlock from "./pages/FabricBlock/FabricBlock";
-import { Outlet } from "react-router-dom";
 import { AppConfig } from "../../common/types/app";
+import Dashboard from "./pages/Dashboard/Dashboard";
+import Blocks from "./pages/Blocks/Blocks";
+import Transactions from "./pages/Transactions/Transactions";
+import { Outlet } from "react-router-dom";
+import TransactionDetails from "./pages/TransactionDetails/TransactionDetails";
 
 const fabricConfig: AppConfig = {
   name: "Fabric",
@@ -17,33 +16,27 @@ const fabricConfig: AppConfig = {
   ],
   routes: [
     {
-      element: <DashFabric />,
-    },
-    {
-      path: "transactions",
-      element: <TransactionsFabric />,
+      element: <Dashboard />,
     },
     {
       path: "blocks",
-      element: <BlocksFabric />,
+      element: <Blocks />,
     },
     {
-      path: "txn-details",
-      element: <Outlet />,
-      children: [
-        {
-          path: ":id",
-          element: <FabricTransaction />,
-        },
-      ],
+      path: "transactions",
+      element: <Transactions />,
     },
     {
-      path: "block-details",
+      path: "transaction",
       element: <Outlet />,
       children: [
         {
-          path: ":id",
-          element: <FabricBlock />,
+          path: ":hash",
+          element: (
+            <div>
+              <TransactionDetails />
+            </div>
+          ),
         },
       ],
     },
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Blocks/Blocks.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Blocks/Blocks.tsx
new file mode 100644
index 0000000000..ca33a57301
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Blocks/Blocks.tsx
@@ -0,0 +1,18 @@
+import Box from "@mui/material/Box";
+import PageTitleWithGoBack from "../../../../components/ui/PageTitleWithGoBack";
+import BlockList from "../../components/BlockList/BlockList";
+import TablePaginationAction from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
+
+export default function Blocks() {
+  return (
+    <Box>
+      <PageTitleWithGoBack>Blocks</PageTitleWithGoBack>
+      <BlockList
+        footerComponent={TablePaginationAction}
+        columns={["number", "hash", "txCount"]}
+        rowsPerPage={40}
+        tableSize="small"
+      />
+    </Box>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/BlocksFabric/BlocksFabric.module.css b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/BlocksFabric/BlocksFabric.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/BlocksFabric/BlocksFabric.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/BlocksFabric/BlocksFabric.tsx
deleted file mode 100644
index 55a404ace4..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/BlocksFabric/BlocksFabric.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { supabase } from "../../../../common/supabase-client";
-import CardWrapper from "../../../../components/ui/CardWrapper";
-import { Block } from "../../../../common/supabase-types";
-import styles from "./BlocksFabric.module.css";
-import { useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-
-type ObjectKey = keyof typeof styles;
-
-const BlocksFabric = () => {
-  const navigate = useNavigate();
-  const [block, setBlock] = useState<Block[]>([]);
-
-  const blocksTableProps = {
-    onClick: {
-      action: (param: string) => {
-        navigate(`/fabric/block-details/${param}`);
-      },
-      prop: "id",
-    },
-    schema: [
-      { display: "created at", objProp: ["created_at"] },
-      { display: "block number", objProp: ["block_number"] },
-      { display: "channel name", objProp: ["channel_id"] },
-      { display: "hash", objProp: ["data_hash"] },
-      { display: "transactions count", objProp: ["tx_count"] },
-    ],
-  };
-
-  const fetchBlock = async () => {
-    try {
-      const { data, error } = await supabase.from("fabric_blocks").select("*");
-      if (data) {
-        setBlock(data);
-      }
-      if (error) {
-        console.error(error.message);
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-
-  useEffect(() => {
-    fetchBlock();
-  }, []);
-
-  return (
-    <div className={styles["blocks" as ObjectKey]}>
-      <CardWrapper
-        columns={blocksTableProps}
-        data={block}
-        title={"Blocks"}
-        display={"All"}
-        filters={["block_number", "data_hash"]}
-        trimmed={false}
-      ></CardWrapper>
-    </div>
-  );
-};
-
-export default BlocksFabric;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/DashFabric/DashFabric.module.css b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/DashFabric/DashFabric.module.css
deleted file mode 100644
index f75a30b767..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/DashFabric/DashFabric.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.dashboard-wrapper {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-}
-
-@media (max-width: 1699px) {
-    .dashboard-wrapper {
-        flex-direction: column;
-    }
-}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/DashFabric/DashFabric.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/DashFabric/DashFabric.tsx
deleted file mode 100644
index dedc76e96f..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/DashFabric/DashFabric.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { supabase } from "../../../../common/supabase-client";
-import CardWrapper from "../../../../components/ui/CardWrapper";
-import { Transaction } from "../../../../common/supabase-types";
-import { Block } from "../../../../common/supabase-types";
-import styles from "./DashFabric.module.css";
-import { useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-
-function DashFabric() {
-  const navigate = useNavigate();
-  const [transaction, setTransaction] = useState<Transaction[]>([]);
-  const [block, setBlock] = useState<Block[]>([]);
-
-  const txnTableProps = {
-    onClick: {
-      action: (param: string) => {
-        navigate(`/fabric/txn-details/${param}`);
-      },
-      prop: "id",
-    },
-    schema: [
-      { display: "created at", objProp: ["created_at"] },
-      { display: "transaction id", objProp: ["transaction_id"] },
-      { display: "channel name", objProp: ["channel_id"] },
-      { display: "block id", objProp: ["block_id"] },
-      { display: "status", objProp: ["status"] },
-    ],
-  };
-
-  const blocksTableProps = {
-    onClick: {
-      action: (param: string) => {
-        navigate(`/fabric/block-details/${param}`);
-      },
-      prop: "id",
-    },
-    schema: [
-      { display: "created at", objProp: ["created_at"] },
-      { display: "block number", objProp: ["block_number"] },
-      { display: "channel name", objProp: ["channel_id"] },
-      { display: "hash", objProp: ["data_hash"] },
-      { display: "transactions count", objProp: ["tx_count"] },
-    ],
-  };
-
-  const fetchTransactions = async () => {
-    try {
-      const { data, error } = await supabase
-        .from("fabric_transactions")
-        .select("*");
-      if (data) {
-        setTransaction(data);
-      }
-      if (error) {
-        console.error(error.message);
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-
-  const fetchBlock = async () => {
-    try {
-      const { data, error } = await supabase.from("fabric_blocks").select("*");
-      if (data) {
-        setBlock(data);
-      }
-      if (error) {
-        console.error(error.message);
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-
-  useEffect(() => {
-    fetchBlock();
-    fetchTransactions();
-  }, []);
-
-  return (
-    <div>
-      <div className={styles["dashboard-wrapper"]}>
-        <CardWrapper
-          columns={txnTableProps}
-          title="Transactions"
-          display="wide"
-          trimmed={true}
-          data={transaction}
-        ></CardWrapper>
-        <CardWrapper
-          columns={blocksTableProps}
-          title="Blocks"
-          display="wide"
-          trimmed={true}
-          data={block}
-        ></CardWrapper>
-      </div>
-    </div>
-  );
-}
-
-export default DashFabric;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/BlockSummary.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/BlockSummary.tsx
new file mode 100644
index 0000000000..ccb5a7bba2
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/BlockSummary.tsx
@@ -0,0 +1,31 @@
+import { Link as RouterLink } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import BlockList from "../../components/BlockList/BlockList";
+
+function BlockListViewAllAction() {
+  return (
+    <Box display={"flex"}>
+      <Box flexGrow={1}></Box>
+      <Button
+        component={RouterLink}
+        to={"blocks"}
+        sx={{ margin: 1 }}
+        color="secondary"
+      >
+        View all
+      </Button>
+    </Box>
+  );
+}
+
+export default function BlockSummary() {
+  return (
+    <BlockList
+      footerComponent={BlockListViewAllAction}
+      columns={["number", "hash"]}
+      rowsPerPage={15}
+      tableSize="medium"
+    />
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/Dashboard.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000000..58b3779806
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/Dashboard.tsx
@@ -0,0 +1,37 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Divider from "@mui/material/Divider";
+import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined";
+import HubIcon from "@mui/icons-material/Hub";
+
+import PageTitle from "../../../../components/ui/PageTitle";
+import TitleWithIcon from "../../../../components/ui/TitleWithIcon";
+import TransactionSummary from "./TransactionSummary";
+import BlockSummary from "./BlockSummary";
+
+function Dashboard() {
+  return (
+    <Box>
+      <PageTitle>Dashboard</PageTitle>
+      <Stack
+        direction={{ lg: "column", xl: "row" }}
+        spacing={5}
+        divider={<Divider orientation="vertical" flexItem />}
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Box width={"80%"}>
+          <TitleWithIcon icon={HubIcon}>Blocks</TitleWithIcon>
+          <BlockSummary />
+        </Box>
+
+        <Box width={"80%"}>
+          <TitleWithIcon icon={ReceiptOutlinedIcon}>Transactions</TitleWithIcon>
+          <TransactionSummary />
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default Dashboard;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/TransactionSummary.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/TransactionSummary.tsx
new file mode 100644
index 0000000000..676e54185b
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Dashboard/TransactionSummary.tsx
@@ -0,0 +1,33 @@
+import { Link as RouterLink } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import TransactionList from "../../components/TransactionList/TransactionList";
+import { fabricAllTransactionsQuery } from "../../queries";
+
+function TransactionListViewAllAction() {
+  return (
+    <Box display={"flex"}>
+      <Box flexGrow={1}></Box>
+      <Button
+        component={RouterLink}
+        to={"transactions"}
+        sx={{ margin: 1 }}
+        color="secondary"
+      >
+        View all
+      </Button>
+    </Box>
+  );
+}
+
+export default function TransactionSummary() {
+  return (
+    <TransactionList
+      queryFunction={fabricAllTransactionsQuery}
+      footerComponent={TransactionListViewAllAction}
+      columns={["hash", "timestamp", "channel_id"]}
+      rowsPerPage={15}
+      tableSize="medium"
+    />
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricBlock/FabricBlock.module.css b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricBlock/FabricBlock.module.css
deleted file mode 100644
index 5bfa3e269e..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricBlock/FabricBlock.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.details-card {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    border: 1px solid rgb(230, 224, 224);
-    border-radius: 10px;
-    padding: 1.5rem 2rem;
-}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricBlock/FabricBlock.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricBlock/FabricBlock.tsx
deleted file mode 100644
index 9232711631..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricBlock/FabricBlock.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import styles from "./FabricBlock.module.css";
-
-import { supabase } from "../../../../common/supabase-client";
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-
-const FabricBlock = () => {
-  const [details, setDetails] = useState<any>({});
-  const params = useParams();
-
-  const fetchData = async () => {
-    try {
-      const { data, error } = await supabase
-        .from("fabric_blocks")
-        .select("*")
-        .match({ id: params.id });
-      if (data?.[0]) {
-        setDetails(data[0]);
-      } else {
-        throw new Error("Failed to load block details");
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  return (
-    <div>
-      <div className={styles["details-card"]}>
-        {details ? (
-          <>
-            <h1>Block Details</h1>
-            <p>
-              <b> ID:</b> {details.id}{" "}
-            </p>
-            <p>
-              {" "}
-              <b>Block Number: </b>
-              {details.block_number}
-            </p>
-            <p>
-              <b>Hash: </b>
-              {details.data_hash}
-            </p>
-            <p>
-              <b>Tx Count: </b>
-              {details.tx_count}
-            </p>
-            <p>
-              <b>Created at: </b>
-              {details.created_at}
-            </p>
-            <p>
-              {" "}
-              <b>Previous Blockhash: </b>
-              {details.prev_blockhash}
-            </p>
-            <p>
-              {" "}
-              <b>Channel name: </b>
-              {details.channel_id}
-            </p>
-          </>
-        ) : (
-          <div>Failed to load details</div>
-        )}
-      </div>
-    </div>
-  );
-};
-export default FabricBlock;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricTransaction/FabricTransaction.module.css b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricTransaction/FabricTransaction.module.css
deleted file mode 100644
index 15fab73ab7..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricTransaction/FabricTransaction.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.details-card {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    border: 1px solid rgb(230, 224, 224);
-    border-radius: 10px;
-    padding: 1.5rem 2rem;
-}
-
-.details-bytes-wrap {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-.details-bytes {
-    width: 30vw;
-    font-size: 14px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    resize: horizontal;
-}
\ No newline at end of file
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricTransaction/FabricTransaction.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricTransaction/FabricTransaction.tsx
deleted file mode 100644
index 8a749087c2..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/FabricTransaction/FabricTransaction.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import styles from "./FabricTransaction.module.css";
-import { supabase } from "../../../../common/supabase-client";
-import Button from "../../../../components/ui/Button";
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-
-const notify = () =>
-  alert("Success! Creator ID Bytes was successfully copied to the clipboard.");
-// toast("Success! Creator ID Bytes was successfully copied to the clipboard.");
-
-function FabricTransaction() {
-  const [details, setDetails] = useState<any>({});
-  const params = useParams();
-
-  const fetchData = async () => {
-    try {
-      const { data, error } = await supabase
-        .from("fabric_transactions")
-        .select("*")
-        .match({ id: params.id });
-      if (data?.[0]) {
-        console.log(data);
-        setDetails(data[0]);
-      } else {
-        throw new Error("Failed to load block details");
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const copyIdToClipboard = () => {
-    navigator.clipboard.writeText(details.creator_id_bytes);
-    notify();
-  };
-
-  return (
-    <div>
-      <div className={styles["details-card"]}>
-        {details ? (
-          <>
-            <>
-              <h1>Transaction Details</h1>
-              <p>
-                <b>Created at: </b>
-                {details.created_at}
-              </p>
-              <p>
-                <b> Block ID:</b> {details.block_id}{" "}
-              </p>
-              <p>
-                {" "}
-                <b>Transaction ID: </b>
-                {details.transaction_id}
-              </p>
-              <p>
-                {" "}
-                <b>Channel name: </b>
-                {details.channel_id}
-              </p>
-              <p>
-                {" "}
-                <b>Status </b>
-                {details.status}
-              </p>
-              <p>
-                {" "}
-                <b>Type </b>
-                {details.type}
-              </p>
-            </>
-            <p>
-              {" "}
-              <b>Chaincode Name: </b>
-              {details.chaincode_name}
-            </p>
-            <p className={styles["details-bytes-wrap"]}>
-              {" "}
-              <b>Creator ID Bytes: </b>
-              <span className={styles["details-bytes"]}>
-                {" "}
-                {details.creator_id_bytes}
-              </span>
-              <Button onClick={copyIdToClipboard}>
-                {" "}
-                <ContentCopyIcon /> Get Full ID{" "}
-              </Button>
-            </p>
-            <p>
-              {" "}
-              <b>Creator nonce: </b>
-              {details.creator_nonce}
-            </p>
-            <p>
-              {" "}
-              <b>Creator MSP ID: </b>
-              {details.creator_msp_id}
-            </p>
-            <p>
-              {" "}
-              <b>Endorser MSP ID: </b>
-              {details.endorser_msp_id}
-            </p>
-            <p>
-              {" "}
-              <b>Payload Proposal Hash: </b>
-              {details.payload_proposal_hash}
-            </p>
-          </>
-        ) : (
-          <div>Failed to load details</div>
-        )}
-      </div>
-      {/* <Toaster /> */}
-    </div>
-  );
-}
-export default FabricTransaction;
-
-{
-  /*
-            <p>
-              {" "}
-              <b>Validation Code </b>
-              {details.validation_code}
-            </p>
-                   <p>
-              {" "}
-              <b>Network name: </b>
-              {details.network_name}
-            </p>
-    */
-}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TranactionInfoCard.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TranactionInfoCard.tsx
new file mode 100644
index 0000000000..055874a698
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TranactionInfoCard.tsx
@@ -0,0 +1,64 @@
+import { styled } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Skeleton from "@mui/material/Skeleton";
+
+import { FabricTransaction } from "../../fabric-supabase-types";
+import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
+import StackedRowItems from "../../components/ui/StackedRowItems";
+
+const ListHeaderTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  fontWeight: "bold",
+}));
+
+export interface TranactionInfoCardProps {
+  tx?: FabricTransaction;
+}
+
+/**
+ * Card with basic transaction information.
+ *
+ * @param tx transaction object from a database
+ */
+export default function TranactionInfoCard({ tx }: TranactionInfoCardProps) {
+  if (!tx) {
+    return <Skeleton variant="rounded" width="100%" height={250} />;
+  }
+
+  return (
+    <Paper sx={{ padding: 2 }}>
+      <Stack spacing={1}>
+        <StackedRowItems>
+          <ListHeaderTypography>Common Name:</ListHeaderTypography>
+          <ShortenedTypography text={tx.hash} maxWidth={350} />
+        </StackedRowItems>
+        <StackedRowItems>
+          <ListHeaderTypography>Timestamp:</ListHeaderTypography>
+          <Typography>{new Date(tx.timestamp).toLocaleString()}</Typography>
+        </StackedRowItems>
+        <StackedRowItems>
+          <ListHeaderTypography>Block Number:</ListHeaderTypography>
+          <Typography>{tx.block_number ?? "unknown"}</Typography>
+        </StackedRowItems>
+        <StackedRowItems>
+          <ListHeaderTypography>Channel ID:</ListHeaderTypography>
+          <Typography>{tx.channel_id}</Typography>
+        </StackedRowItems>
+        <StackedRowItems>
+          <ListHeaderTypography>Type:</ListHeaderTypography>
+          <Typography>{tx.type}</Typography>
+        </StackedRowItems>
+        <StackedRowItems>
+          <ListHeaderTypography>Epoch:</ListHeaderTypography>
+          <Typography>{tx.epoch}</Typography>
+        </StackedRowItems>
+        <StackedRowItems>
+          <ListHeaderTypography>Protocol Version:</ListHeaderTypography>
+          <Typography>{tx.protocol_version}</Typography>
+        </StackedRowItems>
+      </Stack>
+    </Paper>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionActionEndorsementsTable.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionActionEndorsementsTable.tsx
new file mode 100644
index 0000000000..afe4d5b9c4
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionActionEndorsementsTable.tsx
@@ -0,0 +1,71 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+
+import { fabricActionEndorsements } from "../../queries";
+import { useNotification } from "../../../../common/context/NotificationContext";
+import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
+import CertificateDialogButton from "../../components/CertificateDetails/CertificateDialogButton";
+
+export interface TransactionActionEndorsementsTableProps {
+  actionId: string;
+}
+
+/**
+ * Table of transaction action endorsements.
+ *
+ * @warn Fetches the endorsements from a database - don't mount when not needed.
+ *
+ * @param actionId ID of an action in a database
+ */
+export default function TransactionActionEndorsementsTable({
+  actionId,
+}: TransactionActionEndorsementsTableProps) {
+  const { showNotification } = useNotification();
+
+  const { isError, data, error } = useQuery({
+    ...fabricActionEndorsements(actionId),
+  });
+  const displayData = data ?? [];
+
+  React.useEffect(() => {
+    isError &&
+      showNotification(
+        `Could not fetch action endorsements: ${error}`,
+        "error",
+      );
+  }, [isError]);
+
+  return (
+    <TableContainer component={Box}>
+      <Table aria-label="action endorsements table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Signature </TableCell>
+            <TableCell align="right">Msp ID</TableCell>
+            <TableCell align="right">Identity</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {displayData.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell>
+                <ShortenedTypography maxWidth={400} text={row.signature} />
+              </TableCell>
+              <TableCell align="right">{row.mspid}</TableCell>
+              <TableCell align="right">
+                <CertificateDialogButton certId={row.certificate_id} />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionActionsTable.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionActionsTable.tsx
new file mode 100644
index 0000000000..947e3ed890
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionActionsTable.tsx
@@ -0,0 +1,254 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Buffer } from "buffer";
+import { styled, useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import IconButton from "@mui/material/IconButton";
+import Table from "@mui/material/Table";
+import Stack from "@mui/material/Stack";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import TextField from "@mui/material/TextField";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+
+import { fabricTransactionActions } from "../../queries";
+import { FabricTransactionAction } from "../../fabric-supabase-types";
+import {
+  StyledTableCellHeader,
+  StyledTableCell,
+} from "../../../../components/ui/UITableListing/StyledTableCell";
+import CertificateDialogButton from "../../components/CertificateDetails/CertificateDialogButton";
+import TransactionActionEndorsementsTable from "./TransactionActionEndorsementsTable";
+import { useNotification } from "../../../../common/context/NotificationContext";
+
+const TextFieldDisabledBlackFont = styled(TextField)(() => ({
+  "& .MuiInputBase-input.Mui-disabled": {
+    WebkitTextFillColor: "black",
+  },
+}));
+
+interface ExpandableActionRowProps {
+  row: FabricTransactionAction;
+}
+
+/**
+ * Single action row that can be expanded to show more details.
+ *
+ * @param row action row from a database
+ */
+function ExpandableActionRow({ row }: ExpandableActionRowProps) {
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
+  const [showFunctionArgs, setShowFunctionArgs] = React.useState(true);
+  const [showActionCreator, setShowActionCreator] = React.useState(false);
+  const [showActionEndorsements, setShowActionEndorsements] =
+    React.useState(false);
+
+  const functionArgs = (row.function_args ?? "").split(",").filter((a) => !!a);
+  const decodedFunctionArgs = functionArgs.map((a) =>
+    Buffer.from(a.substring(2), "hex").toString("utf-8"),
+  );
+
+  return (
+    <React.Fragment>
+      {/* Basic row entry */}
+      <TableRow
+        sx={{
+          "& > *": { borderBottom: "unset" },
+        }}
+      >
+        <StyledTableCell
+          component="th"
+          scope="row"
+          sx={{
+            fontWeight: "bold",
+            color: theme.palette.secondary.main,
+          }}
+        >
+          {row.function_name}
+        </StyledTableCell>
+        <StyledTableCell align="right">
+          {decodedFunctionArgs.length}
+        </StyledTableCell>
+        <StyledTableCell align="right">{row.chaincode_id}</StyledTableCell>
+        <StyledTableCell align="right">{row.creator_msp_id}</StyledTableCell>
+        <StyledTableCell align="right">
+          <IconButton
+            aria-label="expand action details"
+            size="small"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
+        </StyledTableCell>
+      </TableRow>
+
+      {/* Expanded row details */}
+      <TableRow>
+        {/* Green strip on the left */}
+        <TableCell
+          style={{
+            padding: 0,
+            paddingLeft: 30,
+            backgroundColor: theme.palette.primary.light,
+          }}
+          colSpan={6}
+        >
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ padding: 1, paddingLeft: 2, backgroundColor: "white" }}>
+              {/* Function Args */}
+              <Box>
+                <Stack direction="row" alignItems="center">
+                  <Typography variant="body2" fontWeight="bold">
+                    Function Args
+                  </Typography>
+                  <IconButton
+                    aria-label="expand function args"
+                    size="small"
+                    onClick={() => setShowFunctionArgs(!showFunctionArgs)}
+                  >
+                    {showFunctionArgs ? (
+                      <KeyboardArrowUpIcon />
+                    ) : (
+                      <KeyboardArrowDownIcon />
+                    )}
+                  </IconButton>
+                </Stack>
+                {showFunctionArgs ? (
+                  <ol>
+                    {decodedFunctionArgs.map((a) => (
+                      <li key={a} style={{ margin: 10 }}>
+                        <TextFieldDisabledBlackFont
+                          disabled
+                          fullWidth
+                          maxRows={7}
+                          multiline
+                          size="small"
+                          value={a}
+                        />
+                      </li>
+                    ))}
+                  </ol>
+                ) : undefined}
+              </Box>
+
+              {/* Creator */}
+              <Box marginTop={2}>
+                <Stack direction="row" alignItems="center">
+                  <Typography variant="body2" fontWeight="bold">
+                    Creator ({row.creator_msp_id})
+                  </Typography>
+                  <IconButton
+                    aria-label="expand creator certificate details"
+                    size="small"
+                    onClick={() => setShowActionCreator(!showActionCreator)}
+                  >
+                    {showActionCreator ? (
+                      <KeyboardArrowUpIcon />
+                    ) : (
+                      <KeyboardArrowDownIcon />
+                    )}
+                  </IconButton>
+                </Stack>
+                {showActionCreator ? (
+                  <CertificateDialogButton
+                    certId={row.creator_certificate_id}
+                  />
+                ) : undefined}
+              </Box>
+
+              {/* Endorsements */}
+              <Box marginTop={2}>
+                <Stack direction="row" alignItems="center">
+                  <Typography variant="body2" fontWeight="bold">
+                    Endorsements
+                  </Typography>
+                  <IconButton
+                    aria-label="expand endorsements list"
+                    size="small"
+                    onClick={() =>
+                      setShowActionEndorsements(!showActionEndorsements)
+                    }
+                  >
+                    {showActionEndorsements ? (
+                      <KeyboardArrowUpIcon />
+                    ) : (
+                      <KeyboardArrowDownIcon />
+                    )}
+                  </IconButton>
+                </Stack>
+                {showActionEndorsements ? (
+                  <TransactionActionEndorsementsTable actionId={row.id} />
+                ) : undefined}
+              </Box>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+}
+
+export interface TransactionActionsTableProps {
+  txId?: string;
+}
+
+/**
+ * Table with actions of the specified transaction.
+ * Fetches the needed data from a database.
+ *
+ * @param txId transaction id in the database (not hash!)
+ */
+export default function TransactionActionsTable({
+  txId,
+}: TransactionActionsTableProps) {
+  const { showNotification } = useNotification();
+
+  const { isError, data, error } = useQuery({
+    ...fabricTransactionActions(txId ?? ""),
+    enabled: !!txId,
+  });
+  const displayData = data ?? [];
+
+  React.useEffect(() => {
+    isError &&
+      showNotification(
+        `Could not fetch transaction actions: ${error}`,
+        "error",
+      );
+  }, [isError]);
+
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="transaction actions">
+        <TableHead>
+          <TableRow>
+            <StyledTableCellHeader>Function Name</StyledTableCellHeader>
+            <StyledTableCellHeader align="right">
+              Args Count
+            </StyledTableCellHeader>
+            <StyledTableCellHeader align="right">
+              Chaincode ID
+            </StyledTableCellHeader>
+            <StyledTableCellHeader align="right">
+              Creator MSP ID
+            </StyledTableCellHeader>
+            <StyledTableCellHeader align="right" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {displayData.map((row) => (
+            <ExpandableActionRow key={row.id} row={row} />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionDetails.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionDetails.tsx
new file mode 100644
index 0000000000..3bc0edc8d3
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionDetails/TransactionDetails.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import TranactionInfoCard from "./TranactionInfoCard";
+import { fabricTransactionByHash } from "../../queries";
+import { useNotification } from "../../../../common/context/NotificationContext";
+import PageTitleWithGoBack from "../../../../components/ui/PageTitleWithGoBack";
+import TransactionActionsTable from "./TransactionActionsTable";
+
+/**
+ * Transaction details page, must be called with valid `hash` in a param.
+ * Fetched transaction details from a database.
+ */
+export default function TransactionDetails() {
+  const { showNotification } = useNotification();
+  const navigate = useNavigate();
+  const { hash } = useParams();
+  if (!hash) {
+    showNotification(`Invalid transaction hash provided: ${hash}`, "error");
+    navigate(".."); // Go to home
+    return null;
+  }
+
+  const { isError, isPending, data, error } = useQuery(
+    fabricTransactionByHash(hash),
+  );
+
+  React.useEffect(() => {
+    isError &&
+      showNotification(
+        `Could not fetch transaction details: ${error}`,
+        "error",
+      );
+  }, [isError]);
+
+  return (
+    <Box>
+      <PageTitleWithGoBack>Transaction Details</PageTitleWithGoBack>
+      {isPending && (
+        <CircularProgress
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            zIndex: 9999,
+          }}
+        />
+      )}
+      <Box width={"50%"}>
+        <TranactionInfoCard key={data?.hash ?? "tx-info-loading"} tx={data} />
+      </Box>
+
+      <Box width={"80%"}>
+        <Typography
+          variant="h4"
+          color="secondary.main"
+          marginTop={4}
+          marginBottom={2}
+        >
+          Actions
+        </Typography>
+        <TransactionActionsTable
+          key={data?.hash ?? "tx-actions-loading"}
+          txId={data?.id}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Transactions/Transactions.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Transactions/Transactions.tsx
new file mode 100644
index 0000000000..1ffb31953d
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/Transactions/Transactions.tsx
@@ -0,0 +1,20 @@
+import Box from "@mui/material/Box";
+import TransactionList from "../../components/TransactionList/TransactionList";
+import PageTitleWithGoBack from "../../../../components/ui/PageTitleWithGoBack";
+import UITableListingPaginationAction from "../../../../components/ui/UITableListing/UITableListingPaginationAction";
+import { fabricAllTransactionsQuery } from "../../queries";
+
+export default function Transactions() {
+  return (
+    <Box>
+      <PageTitleWithGoBack>Transactions</PageTitleWithGoBack>
+      <TransactionList
+        queryFunction={fabricAllTransactionsQuery}
+        footerComponent={UITableListingPaginationAction}
+        columns={["hash", "block", "timestamp", "channel_id", "type"]}
+        rowsPerPage={40}
+        tableSize="small"
+      />
+    </Box>
+  );
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionsFabric/TransactionsFabric.module.css b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionsFabric/TransactionsFabric.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionsFabric/TransactionsFabric.tsx b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionsFabric/TransactionsFabric.tsx
deleted file mode 100644
index 234355fddc..0000000000
--- a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/pages/TransactionsFabric/TransactionsFabric.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { supabase } from "../../../../common/supabase-client";
-import { Transaction } from "../../../../common/supabase-types";
-import CardWrapper from "../../../../components/ui/CardWrapper";
-import styles from "./TransactionsFabric.module.css";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-function TransactionsFabric() {
-  const navigate = useNavigate();
-  const [transactions, setTransactions] = useState<Transaction[]>([]);
-
-  const txnTableProps = {
-    onClick: {
-      action: (param: string) => {
-        navigate(`/fabric/txn-details/${param}`);
-      },
-      prop: "id",
-    },
-    schema: [
-      { display: "created at", objProp: ["created_at"] },
-      { display: "transaction id", objProp: ["transaction_id"] },
-      { display: "channel name", objProp: ["channel_id"] },
-      { display: "block id", objProp: ["block_id"] },
-      { display: "status", objProp: ["status"] },
-    ],
-  };
-
-  const fetchTransactions = async () => {
-    try {
-      const { data } = await supabase.from("fabric_transactions").select("*");
-      if (data) {
-        setTransactions(data);
-      } else {
-        throw new Error("Failed to load transactions");
-      }
-    } catch (error: any) {
-      console.error(error.message);
-    }
-  };
-
-  useEffect(() => {
-    fetchTransactions();
-  }, []);
-
-  return (
-    <div className={styles["transactions"]}>
-      <CardWrapper
-        columns={txnTableProps}
-        title={"Transactions"}
-        display={"All"}
-        data={transactions}
-        filters={["transaction_id", "block_id"]}
-        trimmed={false}
-      ></CardWrapper>
-    </div>
-  );
-}
-
-export default TransactionsFabric;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/queries.ts b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/queries.ts
new file mode 100644
index 0000000000..1bb444189d
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/apps/fabric/queries.ts
@@ -0,0 +1,200 @@
+/**
+ * File containing all react-query functions used by this app.
+ * @todo Move to separate directory if this file becomes too complex.
+ */
+
+import { createClient } from "@supabase/supabase-js";
+import { queryOptions } from "@tanstack/react-query";
+import {
+  FabricBlock,
+  FabricCertificate,
+  FabricTransaction,
+  FabricTransactionAction,
+  FabricTransactionActionEndorsement,
+} from "./fabric-supabase-types";
+
+// TODO - Configure for an app
+const supabaseQueryKey = "supabase:fabric";
+const supabaseUrl = "http://localhost:8000";
+const supabaseKey = "__SUPABASE_KEY__";
+export const supabase = createClient(supabaseUrl, supabaseKey, {
+  schema: "fabric",
+});
+
+function createQueryKey(
+  tableName: string,
+  pagination: { page: number; pageSize: number },
+) {
+  return [tableName, { pagination }];
+}
+
+/**
+ * Get all recorded fabric blocks.
+ * Returns `queryOptions` to be used as argument to `useQuery` from `react-query`.
+ * Supports paging.
+ */
+export function fabricAllBlocksQuery(page: number, pageSize: number) {
+  const fromIndex = page * pageSize;
+  const toIndex = fromIndex + pageSize - 1;
+  const tableName = "block";
+  return queryOptions({
+    queryKey: [supabaseQueryKey, createQueryKey(tableName, { page, pageSize })],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from(tableName)
+        .select()
+        .order("number", { ascending: false })
+        .range(fromIndex, toIndex);
+
+      if (error) {
+        throw new Error(
+          `Could not get data from '${tableName}' table: ${error.message}`,
+        );
+      }
+
+      return data as FabricBlock[];
+    },
+  });
+}
+
+/**
+ * Get all recorded fabric transactions.
+ * Returns `queryOptions` to be used as argument to `useQuery` from `react-query`.
+ * Supports paging.
+ */
+export function fabricAllTransactionsQuery(page: number, pageSize: number) {
+  const fromIndex = page * pageSize;
+  const toIndex = fromIndex + pageSize - 1;
+  const tableName = "transaction";
+
+  return queryOptions({
+    queryKey: [supabaseQueryKey, createQueryKey(tableName, { page, pageSize })],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from(tableName)
+        .select()
+        .order("block_number", { ascending: false })
+        .range(fromIndex, toIndex);
+
+      if (error) {
+        throw new Error(
+          `Could not get data from '${tableName}' table: ${error.message}`,
+        );
+      }
+
+      return data as FabricTransaction[];
+    },
+  });
+}
+
+/**
+ * Get transaction object form the database using it's hash.
+ */
+export function fabricTransactionByHash(hash: string) {
+  const tableName = "transaction";
+
+  return queryOptions({
+    queryKey: [supabaseQueryKey, tableName, hash],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from(tableName)
+        .select()
+        .match({ hash });
+
+      if (error) {
+        throw new Error(
+          `Could not get transaction with hash ${hash}: ${error.message}`,
+        );
+      }
+
+      if (data.length !== 1) {
+        throw new Error(
+          `Invalid response when getting transaction with hash ${hash}: ${data}`,
+        );
+      }
+
+      return data.pop() as FabricTransaction;
+    },
+  });
+}
+
+/**
+ * Get transaction actions form the database using parent transaction id.
+ */
+export function fabricTransactionActions(txId: string) {
+  const tableName = "transaction_action";
+
+  return queryOptions({
+    queryKey: [supabaseQueryKey, tableName, txId],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from(tableName)
+        .select()
+        .match({ transaction_id: txId });
+
+      if (error) {
+        throw new Error(
+          `Could not get actions of transaction with ID ${txId}: ${error.message}`,
+        );
+      }
+
+      return data as FabricTransactionAction[];
+    },
+  });
+}
+
+/**
+ * Get fabric certificate using it's ID.
+ */
+export function fabricCertificate(id: string) {
+  const tableName = "certificate";
+
+  return queryOptions({
+    queryKey: [supabaseQueryKey, tableName, id],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from(tableName)
+        .select()
+        .match({ id });
+
+      if (error) {
+        throw new Error(
+          `Could not get certificate with ID ${id}: ${error.message}`,
+        );
+      }
+
+      if (data.length !== 1) {
+        throw new Error(
+          `Invalid response when getting certificate with id ${id}: ${data}`,
+        );
+      }
+
+      return data.pop() as FabricCertificate;
+    },
+  });
+}
+
+/**
+ *  Get transaction action endorsements form the database using parent action id.
+ */
+export function fabricActionEndorsements(actionId: string) {
+  const tableName = "transaction_action_endorsement";
+
+  return queryOptions({
+    queryKey: [supabaseQueryKey, tableName, actionId],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from(tableName)
+        .select()
+        .match({ transaction_action_id: actionId });
+
+      if (error) {
+        throw new Error(
+          `Could not get endorsements of action with ID ${actionId}: ${error.message}`,
+        );
+      }
+
+      return data as FabricTransactionActionEndorsement[];
+    },
+  });
+}
diff --git a/packages/cacti-ledger-browser/src/main/typescript/components/ui/TitleWithIcon.tsx b/packages/cacti-ledger-browser/src/main/typescript/components/ui/TitleWithIcon.tsx
new file mode 100644
index 0000000000..ce55791ac2
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/components/ui/TitleWithIcon.tsx
@@ -0,0 +1,24 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { SvgIconComponent } from "@mui/icons-material";
+
+interface TitleWithIconProps {
+  icon: SvgIconComponent;
+  children: React.ReactNode;
+}
+
+const TitleWithIcon: React.FC<TitleWithIconProps> = ({
+  children,
+  icon: Icon,
+}) => {
+  return (
+    <Box display="flex" alignItems="center" marginBottom={2}>
+      <Icon sx={{ fontSize: 35 }} color="primary" />
+      <Typography variant="h6" component="h3" marginLeft={1}>
+        {children}
+      </Typography>
+    </Box>
+  );
+};
+
+export default TitleWithIcon;
diff --git a/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/ClickableTableRow.tsx b/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/ClickableTableRow.tsx
new file mode 100644
index 0000000000..c67f25dced
--- /dev/null
+++ b/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/ClickableTableRow.tsx
@@ -0,0 +1,12 @@
+import TableRow from "@mui/material/TableRow";
+import { styled } from "@mui/material/styles";
+
+export const ClickableTableRow = styled(TableRow)(({ theme }) => ({
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: theme.palette.grey[200],
+    "& .MuiTableCell-root": {
+      color: theme.palette.secondary.main,
+    },
+  },
+}));
diff --git a/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/UITableListing.tsx b/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/UITableListing.tsx
index 1ec138d12b..6d206f8793 100644
--- a/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/UITableListing.tsx
+++ b/packages/cacti-ledger-browser/src/main/typescript/components/ui/UITableListing/UITableListing.tsx
@@ -21,6 +21,7 @@ import {
   tableCellHeight,
 } from "./StyledTableCell";
 import type { UITableListingPaginationActionProps } from "./UITableListingPaginationAction";
+import { ClickableTableRow } from "./ClickableTableRow";
 
 /**
  * Table column configuration entry
@@ -55,6 +56,7 @@ export interface UITableListingProps<T> {
   columns: string[];
   rowsPerPage: number;
   tableSize?: "small" | "medium";
+  onClick?: (row: Record<string, unknown>) => void;
 }
 
 function getKeyField(columnConfig: ColumnConfigType) {
@@ -83,6 +85,22 @@ function formatCellValue(config: ColumnConfigEntry, value: any) {
   return value;
 }
 
+function createTableRow(
+  row: Record<string, unknown>,
+  columns: string[],
+  columnConfig: ColumnConfigType,
+) {
+  return columns.map((colName) => {
+    const config = columnConfig[colName];
+    const value = row[config.field];
+    return (
+      <StyledTableCell key={`${row.number}-${colName}`}>
+        {formatCellValue(config, value)}
+      </StyledTableCell>
+    );
+  });
+}
+
 /**
  * UITableListing - Show table with paged data fetched from react-query.
  *
@@ -106,6 +124,7 @@ export default function UITableListing<
   columns,
   rowsPerPage,
   tableSize,
+  onClick,
 }: UITableListingProps<T>) {
   const [page, setPage] = React.useState(0);
   const { isError, isPending, data, error, refetch } = useQuery({
@@ -154,19 +173,24 @@ export default function UITableListing<
             </TableRow>
           </TableHead>
           <TableBody>
-            {displayData.map((row) => (
-              <TableRow key={row[getKeyField(columnConfig)]}>
-                {columns.map((colName) => {
-                  const config = columnConfig[colName];
-                  const value = row[config.field];
-                  return (
-                    <StyledTableCell key={`${row.number}-${colName}`}>
-                      {formatCellValue(config, value)}
-                    </StyledTableCell>
-                  );
-                })}
-              </TableRow>
-            ))}
+            {displayData.map((row) => {
+              if (onClick) {
+                return (
+                  <ClickableTableRow
+                    key={row[getKeyField(columnConfig)]}
+                    onClick={() => onClick(row)}
+                  >
+                    {createTableRow(row, columns, columnConfig)}
+                  </ClickableTableRow>
+                );
+              } else {
+                return (
+                  <TableRow key={row[getKeyField(columnConfig)]}>
+                    {createTableRow(row, columns, columnConfig)}
+                  </TableRow>
+                );
+              }
+            })}
             {emptyRows > 0 && (
               <TableRow style={{ height: tableCellHeight * emptyRows }}>
                 <StyledTableCell colSpan={6} />
diff --git a/yarn.lock b/yarn.lock
index 2fd51ff343..97e583b1c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9059,6 +9059,7 @@ __metadata:
     "@types/react-dom": "npm:18.2.17"
     "@vitejs/plugin-react": "npm:4.2.1"
     apexcharts: "npm:3.45.2"
+    buffer: "npm:6.0.3"
     ethers: "npm:6.12.1"
     react: "npm:18.2.0"
     react-apexcharts: "npm:1.4.1"