diff --git a/explorer/src/lib/components/alert/Alert.css b/explorer/src/lib/components/alert/Alert.css
new file mode 100644
index 0000000000..53f38788c3
--- /dev/null
+++ b/explorer/src/lib/components/alert/Alert.css
@@ -0,0 +1,9 @@
+.alert {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 400px;
+ justify-content: center;
+ align-items: center;
+ gap: 0.625rem;
+}
diff --git a/explorer/src/lib/components/alert/Alert.svelte b/explorer/src/lib/components/alert/Alert.svelte
new file mode 100644
index 0000000000..1778c29be5
--- /dev/null
+++ b/explorer/src/lib/components/alert/Alert.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
+ {#if error}
+ There was an error fetching the data.
+ {error?.message ?? ""}
+ {:else if hasEmptyData}
+ No data to display
+ {/if}
+
+ {#if error}
+
diff --git a/explorer/src/lib/components/blocks-card/BlocksCard.svelte b/explorer/src/lib/components/blocks-card/BlocksCard.svelte
new file mode 100644
index 0000000000..1713a8864d
--- /dev/null
+++ b/explorer/src/lib/components/blocks-card/BlocksCard.svelte
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ {#if error || hasEmptyData}
+
+ {:else if blocks}
+ {#if clientWidth > 768}
+
+ {:else}
+
+ {#each blocks as block (block)}
+
+ {/each}
+
+ {/if}
+ {/if}
+
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.svelte b/explorer/src/lib/components/blocks-list/BlocksList.svelte
index 1bdc450be2..5fb8b794e9 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.svelte
+++ b/explorer/src/lib/components/blocks-list/BlocksList.svelte
@@ -2,10 +2,9 @@
+
+
+
+
+ # Block
+ Fee
+ Txn(s)
+ Rewards
+
+
+
+ {#each data as block (block)}
+
+
+ {numberFormatter(block.header.height)}
+ {getRelativeTimeString(block.header.date, "long")}
+
+
+ AVG:
+ {numberFormatter(block.transactions.stats.averageGasPrice)}
+ TOTAL:
+ {numberFormatter(block.transactions.stats.gasUsed)}
+
+ {numberFormatter(block.transactions.data.length)}
+
+
+ {/each}
+
+
diff --git a/explorer/src/lib/components/data-card/DataCard.css b/explorer/src/lib/components/data-card/DataCard.css
new file mode 100644
index 0000000000..2f690a17e8
--- /dev/null
+++ b/explorer/src/lib/components/data-card/DataCard.css
@@ -0,0 +1,18 @@
+.data-card {
+ padding: 1rem 0;
+}
+
+.data-card__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 1.125rem 1rem;
+}
+
+.data-card__header-title {
+ font-weight: 400;
+ text-transform: uppercase;
+ font-size: 1.125rem;
+ line-height: 32.2px;
+ letter-spacing: -1%;
+}
diff --git a/explorer/src/lib/components/data-card/DataCard.svelte b/explorer/src/lib/components/data-card/DataCard.svelte
new file mode 100644
index 0000000000..8cacb8e6b3
--- /dev/null
+++ b/explorer/src/lib/components/data-card/DataCard.svelte
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index 1f7900e1a9..8db3bcb982 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -1,15 +1,20 @@
+export { default as Alert } from "./alert/Alert.svelte";
export { default as AppAnchor } from "./app-anchor/AppAnchor.svelte";
export { default as AppImage } from "./app-image/AppImage.svelte";
export { default as BlockDetails } from "./block-details/BlockDetails.svelte";
+export { default as BlocksCard } from "./blocks-card/BlocksCard.svelte";
export { default as BlocksList } from "./blocks-list/BlocksList.svelte";
+export { default as BlocksTable } from "./blocks-table/BlocksTable.svelte";
+export { default as DataCard } from "./data-card/DataCard.svelte";
export { default as DataGuard } from "./data-guard/DataGuard.svelte";
export { default as DetailList } from "./detail-list/DetailList.svelte";
export { default as Footer } from "./footer/Footer.svelte";
export { default as ListItem } from "./list-item/ListItem.svelte";
export { default as Navbar } from "./navbar/Navbar.svelte";
-export { default as RetryFetch } from "./retry-fetch/RetryFetch.svelte";
export { default as SearchNotification } from "./search-notification/SearchNotification.svelte";
export { default as TextboxAndButton } from "./textbox-and-button/TextboxAndButton.svelte";
export { default as TransactionDetails } from "./transaction-details/TransactionDetails.svelte";
+export { default as TransactionsCard } from "./transactions-card/TransactionsCard.svelte";
export { default as TransactionsList } from "./transactions-list/TransactionsList.svelte";
+export { default as TransactionsTable } from "./transactions-table/TransactionsTable.svelte";
export { default as WorldMap } from "./world-map/WorldMap.svelte";
diff --git a/explorer/src/lib/components/retry-fetch/RetryFetch.css b/explorer/src/lib/components/retry-fetch/RetryFetch.css
deleted file mode 100644
index 08a8f4e722..0000000000
--- a/explorer/src/lib/components/retry-fetch/RetryFetch.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.retry-fetch {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 788px;
- justify-content: center;
- align-items: center;
- gap: 0.625rem;
-}
\ No newline at end of file
diff --git a/explorer/src/lib/components/retry-fetch/RetryFetch.svelte b/explorer/src/lib/components/retry-fetch/RetryFetch.svelte
deleted file mode 100644
index 0f334d18cb..0000000000
--- a/explorer/src/lib/components/retry-fetch/RetryFetch.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
- There was an error fetching the data.
-
\ No newline at end of file
diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
new file mode 100644
index 0000000000..9dbed83cbc
--- /dev/null
+++ b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ {#if error || hasEmptyData}
+
+ {:else if txs}
+ {#if clientWidth > 768}
+
+ {:else}
+
+ {#each txs as tx (tx)}
+
+ {/each}
+
+ {/if}
+ {/if}
+
diff --git a/explorer/src/lib/components/transactions-table/TransactionsTable.css b/explorer/src/lib/components/transactions-table/TransactionsTable.css
new file mode 100644
index 0000000000..73fbef722c
--- /dev/null
+++ b/explorer/src/lib/components/transactions-table/TransactionsTable.css
@@ -0,0 +1,16 @@
+.transaction__link {
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.transaction__fee-price-label,
+.transaction__fee-limit-label {
+ font-weight: 500;
+}
+
+.transaction__time {
+ display: block;
+ font-size: 0.75rem;
+ color: var(--color-text-secondary);
+ margin-top: 0.2rem;
+}
diff --git a/explorer/src/lib/components/transactions-table/TransactionsTable.svelte b/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
new file mode 100644
index 0000000000..154f98b4c6
--- /dev/null
+++ b/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+ Hash
+ Gas
+ Fee
+ Status
+ Type
+
+
+
+ {#each data as transaction (transaction)}
+
+
+ {middleEllipsis(transaction.blockhash, HASH_CHARS_LENGTH)}
+ {getRelativeTimeString(transaction.date, "long")}
+
+
+ PRICE:
+ {numberFormatter(transaction.gasprice)}
+ LIMIT:
+ {numberFormatter(transaction.gaslimit)}
+
+
+
+
+
+
+
+ {/each}
+
+
diff --git a/explorer/src/lib/containers/index.js b/explorer/src/lib/containers/index.js
index 8cebf2ab1d..0293d57451 100644
--- a/explorer/src/lib/containers/index.js
+++ b/explorer/src/lib/containers/index.js
@@ -1,3 +1,2 @@
-export { default as LatestBlocks } from "./latest-blocks/LatestBlocks.svelte";
export { default as SearchField } from "./search-field/SearchField.svelte";
export { default as StatisticsPanel } from "./statistics-panel/StatisticsPanel.svelte";
diff --git a/explorer/src/lib/containers/latest-blocks/LatestBlocks.css b/explorer/src/lib/containers/latest-blocks/LatestBlocks.css
deleted file mode 100644
index 03606cdaeb..0000000000
--- a/explorer/src/lib/containers/latest-blocks/LatestBlocks.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.blocks {
- padding: 1rem 0;
-}
-
-.blocks-mobile {
- display: flex;
- flex-direction: column;
- gap: 0.625rem;
-}
-
-.blocks__header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 1.125rem 1rem;
-}
-
-.blocks__header-title {
- font-weight: 400;
- text-transform: uppercase;
- font-size: 1.125rem;
- line-height: 32.2px;
- letter-spacing: -1%;
-}
-
-.block__fee-avg-label,
-.block__fee-total-label {
- font-weight: 500;
-}
-
-.block__time {
- display: block;
- font-size: 0.75rem;
- color: var(--color-text-secondary);
- margin-top: 0.2rem;
-}
diff --git a/explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte b/explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte
deleted file mode 100644
index 208a6d723a..0000000000
--- a/explorer/src/lib/containers/latest-blocks/LatestBlocks.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-
-
-
-
-
- {#if error}
-
- {:else if blocks}
- {#if clientWidth > 768}
-
-
-
- # Block
- Fee
- Txn(s)
- Rewards
-
-
-
- {#each blocks as block (block)}
-
-
- {numberFormatter(block.header.height)}
- {getRelativeTimeString(block.header.date, "long")}
-
-
- AVG:
- {numberFormatter(block.transactions.stats.averageGasPrice)}
- TOTAL:
- {numberFormatter(block.transactions.stats.gasUsed)}
-
- {numberFormatter(block.transactions.data.length)}
-
-
- {/each}
-
-
- {:else}
-
- {#each blocks as block (block)}
-
- {/each}
-
- {/if}
- {/if}
-
diff --git a/explorer/src/lib/containers/latest-tx/LatestTx.css b/explorer/src/lib/containers/latest-tx/LatestTx.css
deleted file mode 100644
index 4ef58434bf..0000000000
--- a/explorer/src/lib/containers/latest-tx/LatestTx.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.transactions {
- padding: 1rem 0;
-}
-
-.transactions-mobile {
- display: flex;
- flex-direction: column;
- gap: 0.625rem;
-}
-
-.transactions__header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 1.125rem 1rem;
-}
-
-.transactions__header-title {
- font-weight: 400;
- text-transform: uppercase;
- font-size: 1.125rem;
- line-height: 32.2px;
- letter-spacing: -1%;
-}
-
-.transaction__fee-price-label,
-.transaction__fee-limit-label {
- font-weight: 500;
-}
-
-.transaction__time {
- display: block;
- font-size: 0.75rem;
- color: var(--color-text-secondary);
- margin-top: 0.2rem;
-}
diff --git a/explorer/src/lib/containers/latest-tx/LatestTx.svelte b/explorer/src/lib/containers/latest-tx/LatestTx.svelte
deleted file mode 100644
index 82b35c361e..0000000000
--- a/explorer/src/lib/containers/latest-tx/LatestTx.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-
-
-
-
-
- {#if error}
-
- {:else if txs}
- {#if clientWidth > 768}
-
-
-
- Hash
- Gas
- Fee
- Status
- Type
-
-
-
- {#each txs as transaction (transaction)}
-
-
- {middleEllipsis(transaction.blockhash, HASH_CHARS_LENGTH)}
- {getRelativeTimeString(transaction.date, "long")}
-
-
- PRICE:
- {numberFormatter(transaction.gasprice)}
- LIMIT:
- {numberFormatter(transaction.gaslimit)}
-
-
-
-
-
-
-
- {/each}
-
-
- {:else}
-
- {#each txs as transaction (transaction)}
-
- {/each}
-
- {/if}
- {/if}
-
diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte
index 7653c93cc7..e7c03ac5ef 100644
--- a/explorer/src/routes/+page.svelte
+++ b/explorer/src/routes/+page.svelte
@@ -1,12 +1,10 @@
- pollingDataStore.start()}
className="tables-layout"
blocks={$pollingDataStore.data?.blocks}
error={$pollingDataStore.error}
loading={$pollingDataStore.isLoading}
/>
- pollingDataStore.start()}
className="tables-layout"
txs={$pollingDataStore.data?.transactions}
error={$pollingDataStore.error}
diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte
index cdaebacf28..23e6baf784 100644
--- a/explorer/src/routes/blocks/block/+page.svelte
+++ b/explorer/src/routes/blocks/block/+page.svelte
@@ -1,37 +1,23 @@