diff --git a/apps/explorer/src/app/components/blocks/block-data.tsx b/apps/explorer/src/app/components/blocks/block-data.tsx
new file mode 100644
index 000000000..419c3b235
--- /dev/null
+++ b/apps/explorer/src/app/components/blocks/block-data.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
+import { Link } from 'react-router-dom';
+import { SecondsAgo } from '../seconds-ago';
+import { Table, TableRow, TableCell } from '../table';
+
+interface BlockProps {
+  block: BlockMeta;
+}
+
+export const BlockData = ({ block }: BlockProps) => {
+  return (
+    <Table aria-label={`Data for block ${block.header?.height}`}>
+      <TableRow dataTestId="block-row" modifier="background">
+        <TableCell
+          dataTestId="block-height"
+          className="pl-4 py-2"
+          aria-label="Block height"
+        >
+          <Link
+            to={`/blocks/${block.header?.height}`}
+            className="text-vega-yellow"
+          >
+            {block.header?.height}
+          </Link>
+        </TableCell>
+        <TableCell
+          dataTestId="num-txs"
+          className="px-8 text-center"
+          aria-label="Number of transactions"
+        >
+          {block.num_txs === '1'
+            ? '1 transaction'
+            : `${block.num_txs} transactions`}
+        </TableCell>
+        <TableCell
+          dataTestId="validator-link"
+          className="px-8 text-center"
+          aria-label="Validator"
+        >
+          <Link to={`/validators/${block.header?.proposer_address}`}>
+            {block.header.proposer_address}
+          </Link>
+        </TableCell>
+        <TableCell
+          dataTestId="block-time"
+          className="text-center pr-28 text-neutral-300"
+          aria-label="Block genesis"
+        >
+          <SecondsAgo date={block.header?.time} />
+        </TableCell>
+      </TableRow>
+    </Table>
+  );
+};
diff --git a/apps/explorer/src/app/components/blocks/blocks-data.tsx b/apps/explorer/src/app/components/blocks/blocks-data.tsx
new file mode 100644
index 000000000..1111235c2
--- /dev/null
+++ b/apps/explorer/src/app/components/blocks/blocks-data.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { TendermintBlockchainResponse } from '../../routes/blocks/tendermint-blockchain-response';
+import { BlockData } from './block-data';
+
+interface BlocksProps {
+  data: TendermintBlockchainResponse | undefined;
+  className?: string;
+}
+
+export const BlocksData = ({ data, className }: BlocksProps) => {
+  if (!data?.result) {
+    return <div className={className}>Awaiting block data</div>;
+  }
+
+  return (
+    <ul
+      aria-label={`Showing ${data.result?.block_metas.length} most recently loaded blocks`}
+      className={className}
+    >
+      {data.result?.block_metas?.map((block, index) => {
+        return (
+          <li key={index} data-testid="block-row">
+            <BlockData block={block} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
diff --git a/apps/explorer/src/app/components/blocks/home/blocks-refetch.tsx b/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
similarity index 100%
rename from apps/explorer/src/app/components/blocks/home/blocks-refetch.tsx
rename to apps/explorer/src/app/components/blocks/blocks-refetch.tsx
diff --git a/apps/explorer/src/app/components/blocks/home/blocks-table.tsx b/apps/explorer/src/app/components/blocks/home/blocks-table.tsx
deleted file mode 100644
index 9c69f89ad..000000000
--- a/apps/explorer/src/app/components/blocks/home/blocks-table.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-blockchain-response';
-import { Link } from 'react-router-dom';
-import { SecondsAgo } from '../../seconds-ago';
-import { TxsPerBlock } from '../../txs/txs-per-block';
-import { Table, TableRow, TableCell } from '../../table';
-
-interface BlocksProps {
-  data: TendermintBlockchainResponse | undefined;
-  showTransactions?: boolean;
-}
-
-export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
-  if (!data?.result) {
-    return <div className="mb-28">Awaiting block data</div>;
-  }
-
-  return (
-    <Table>
-      {data.result?.block_metas?.map((block, index) => {
-        return (
-          <React.Fragment key={index}>
-            <TableRow dataTestId="block-row" modifier="background">
-              <TableCell dataTestId="block-height" className="pl-4 py-2">
-                <Link
-                  to={`/blocks/${block.header?.height}`}
-                  className="text-vega-yellow"
-                >
-                  {block.header?.height}
-                </Link>
-              </TableCell>
-              <TableCell dataTestId="num-txs" className="px-8 text-center">
-                {block.num_txs === '1'
-                  ? '1 transaction'
-                  : `${block.num_txs} transactions`}
-              </TableCell>
-              <TableCell
-                dataTestId="validator-link"
-                className="px-8 text-center"
-              >
-                <Link to={`/validators/${block.header?.proposer_address}`}>
-                  {block.header.proposer_address}
-                </Link>
-              </TableCell>
-              <TableCell
-                dataTestId="block-time"
-                className="text-center pr-28 text-neutral-300"
-              >
-                <SecondsAgo date={block.header?.time} />
-              </TableCell>
-            </TableRow>
-            {showTransactions && (
-              <TableRow>
-                <TxsPerBlock blockHeight={block.header?.height} />
-              </TableRow>
-            )}
-          </React.Fragment>
-        );
-      })}
-    </Table>
-  );
-};
diff --git a/apps/explorer/src/app/components/blocks/index.tsx b/apps/explorer/src/app/components/blocks/index.tsx
index f829fcae7..2f4a52141 100644
--- a/apps/explorer/src/app/components/blocks/index.tsx
+++ b/apps/explorer/src/app/components/blocks/index.tsx
@@ -1,2 +1,3 @@
-export { BlocksTable } from './home/blocks-table';
-export { BlocksRefetch } from './home/blocks-refetch';
+export { BlocksData } from './blocks-data';
+export { BlockData } from './block-data';
+export { BlocksRefetch } from './blocks-refetch';
diff --git a/apps/explorer/src/app/components/table/index.tsx b/apps/explorer/src/app/components/table/index.tsx
index ba62f2de2..59fe44991 100644
--- a/apps/explorer/src/app/components/table/index.tsx
+++ b/apps/explorer/src/app/components/table/index.tsx
@@ -1,59 +1,70 @@
 import React, { ThHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
-interface TableProps {
-  children: React.ReactNode;
-}
-
-interface TableHeaderProps extends ThHTMLAttributes<HTMLTableRowElement> {
+interface TableProps extends ThHTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
   className?: string;
 }
 
-interface TableChildProps {
+interface TableHeaderProps
+  extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableRowProps extends ThHTMLAttributes<HTMLTableRowElement> {
   children: React.ReactNode;
   className?: string;
   dataTestId?: string;
   modifier?: 'bordered' | 'background';
 }
 
-export const Table = ({ children }: TableProps) => {
+interface TableCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
+  children: React.ReactNode;
+  className?: string;
+  dataTestId?: string;
+  modifier?: 'bordered' | 'background';
+}
+
+export const Table = ({ children, className, ...props }: TableProps) => {
+  const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
   return (
-    <div className="overflow-x-auto whitespace-nowrap mb-28">
-      <table className="w-full">
+    <div className={classes}>
+      <table className="w-full" {...props}>
         <tbody>{children}</tbody>
       </table>
     </div>
   );
 };
 
-export const TableRow = ({
-  children,
-  className,
-  dataTestId,
-  modifier,
-}: TableChildProps) => {
-  const cellClasses = classnames(className, {
-    'border-b border-white-40': modifier === 'bordered',
-    'bg-white-25 border-b-4 border-b-black': modifier === 'background',
-  });
-  return (
-    <tr className={cellClasses} data-testid={dataTestId || null}>
-      {children}
-    </tr>
-  );
-};
-
 export const TableHeader = ({
   children,
   className,
   ...props
 }: TableHeaderProps) => {
   const cellClasses = classnames(className, {
-    'text-left, font-normal': props?.scope === 'row',
+    'text-left font-normal': props?.scope === 'row',
   });
   return (
-    <tr className={cellClasses} {...props}>
+    <th className={cellClasses} {...props}>
+      {children}
+    </th>
+  );
+};
+
+export const TableRow = ({
+  children,
+  className,
+  dataTestId,
+  modifier,
+  ...props
+}: TableRowProps) => {
+  const cellClasses = classnames(className, {
+    'border-b border-white-40': modifier === 'bordered',
+    'bg-white-25 border-b-4 border-b-black': modifier === 'background',
+  });
+  return (
+    <tr className={cellClasses} data-testid={dataTestId || null} {...props}>
       {children}
     </tr>
   );
@@ -64,12 +75,13 @@ export const TableCell = ({
   className,
   dataTestId,
   modifier,
-}: TableChildProps) => {
+  ...props
+}: TableCellProps) => {
   const cellClasses = classnames(className, {
     'py-4': modifier === 'bordered',
   });
   return (
-    <td className={cellClasses} data-testid={dataTestId || null}>
+    <td className={cellClasses} data-testid={dataTestId || null} {...props}>
       {children}
     </td>
   );
diff --git a/apps/explorer/src/app/components/txs/home/txs-data.tsx b/apps/explorer/src/app/components/txs/home/txs-data.tsx
new file mode 100644
index 000000000..005bd4854
--- /dev/null
+++ b/apps/explorer/src/app/components/txs/home/txs-data.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-blockchain-response';
+import { BlockData } from '../../blocks';
+import { TxsPerBlock } from '../txs-per-block';
+
+interface TxsProps {
+  data: TendermintBlockchainResponse | undefined;
+  className?: string;
+}
+
+export const TxsData = ({ data, className }: TxsProps) => {
+  if (!data?.result) {
+    return <div className={className}>Awaiting block data</div>;
+  }
+
+  return (
+    <ul
+      aria-label={`Showing ${data.result?.block_metas.length} most recently loaded blocks and transactions`}
+      className={className}
+    >
+      {data.result?.block_metas?.map((block, index) => {
+        return (
+          <li key={index} data-testid="block-row">
+            <BlockData block={block} />
+            <TxsPerBlock blockHeight={block.header.height} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
diff --git a/apps/explorer/src/app/components/txs/index.tsx b/apps/explorer/src/app/components/txs/index.tsx
index c46ae93ef..b27e867fd 100644
--- a/apps/explorer/src/app/components/txs/index.tsx
+++ b/apps/explorer/src/app/components/txs/index.tsx
@@ -1,3 +1,4 @@
 export { TxDetails } from './id/tx-details';
 export { TxContent } from './id/tx-content';
-export { TxList } from './home/tx-list';
+export { TxList } from './pending/tx-list';
+export { TxsData } from './home/txs-data';
diff --git a/apps/explorer/src/app/components/txs/home/tx-list.tsx b/apps/explorer/src/app/components/txs/pending/tx-list.tsx
similarity index 100%
rename from apps/explorer/src/app/components/txs/home/tx-list.tsx
rename to apps/explorer/src/app/components/txs/pending/tx-list.tsx
diff --git a/apps/explorer/src/app/routes/blocks/home/index.tsx b/apps/explorer/src/app/routes/blocks/home/index.tsx
index 0c71a77d3..28d572153 100644
--- a/apps/explorer/src/app/routes/blocks/home/index.tsx
+++ b/apps/explorer/src/app/routes/blocks/home/index.tsx
@@ -2,7 +2,7 @@ import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlockchainResponse } from '../tendermint-blockchain-response';
 import { RouteTitle } from '../../../components/route-title';
-import { BlocksTable, BlocksRefetch } from '../../../components/blocks';
+import { BlocksData, BlocksRefetch } from '../../../components/blocks';
 import { JumpToBlock } from '../../../components/jump-to-block';
 
 const Blocks = () => {
@@ -17,7 +17,7 @@ const Blocks = () => {
     <section>
       <RouteTitle>Blocks</RouteTitle>
       <BlocksRefetch refetch={refetch} />
-      <BlocksTable data={data} />
+      <BlocksData data={data} className="mb-28" />
       <JumpToBlock />
     </section>
   );
diff --git a/apps/explorer/src/app/routes/blocks/id/index.tsx b/apps/explorer/src/app/routes/blocks/id/index.tsx
index a646cecba..32539e5b8 100644
--- a/apps/explorer/src/app/routes/blocks/id/index.tsx
+++ b/apps/explorer/src/app/routes/blocks/id/index.tsx
@@ -30,7 +30,7 @@ const Block = () => {
   return (
     <section>
       <RouteTitle>BLOCK {block}</RouteTitle>
-      <Table>
+      <Table className="mb-28">
         <TableRow modifier="bordered">
           <TableHeader scope="row">Mined by</TableHeader>
           <TableCell modifier="bordered">
diff --git a/apps/explorer/src/app/routes/txs/home/index.tsx b/apps/explorer/src/app/routes/txs/home/index.tsx
index b5969dbd3..21144f509 100644
--- a/apps/explorer/src/app/routes/txs/home/index.tsx
+++ b/apps/explorer/src/app/routes/txs/home/index.tsx
@@ -2,7 +2,8 @@ import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlockchainResponse } from '../../blocks/tendermint-blockchain-response';
 import { DATA_SOURCES } from '../../../config';
 import { RouteTitle } from '../../../components/route-title';
-import { BlocksTable, BlocksRefetch } from '../../../components/blocks';
+import { BlocksRefetch } from '../../../components/blocks';
+import { TxsData } from '../../../components/txs';
 import { JumpToBlock } from '../../../components/jump-to-block';
 
 const Txs = () => {
@@ -17,7 +18,7 @@ const Txs = () => {
     <section>
       <RouteTitle>Transactions</RouteTitle>
       <BlocksRefetch refetch={refetch} />
-      <BlocksTable data={data} showTransactions={true} />
+      <TxsData data={data} />
       <JumpToBlock />
     </section>
   );