diff --git a/.storybook/main.ts b/.storybook/main.ts
index 65a554ea..2fdbaf44 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -14,7 +14,6 @@ const config: StorybookConfig = {
     typescript: {
         reactDocgen: "react-docgen-typescript",
     },
-    docs: {},
     staticDirs: ["../src/static"],
 };
 export default config;
diff --git a/src/components/Atoms/Timestamp/Timestamp.stories.tsx b/src/components/Atoms/Timestamp/Timestamp.stories.tsx
index 259d9370..302ce1f6 100644
--- a/src/components/Atoms/Timestamp/Timestamp.stories.tsx
+++ b/src/components/Atoms/Timestamp/Timestamp.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof TimestampComponent>;
 
 export const Timestamp: Story = {
     args: {
-        timestamp: "November 15 2023 15:31:59",
+        timestamp: new Date(),
         defaultType: "descriptive",
     },
 };
diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx
index 8822a706..d47afaec 100644
--- a/src/components/Atoms/Timestamp/Timestamp.tsx
+++ b/src/components/Atoms/Timestamp/Timestamp.tsx
@@ -12,12 +12,15 @@ export const Timestamp: React.FC<TimestampProps> = ({
     );
 
     return (
-        <span className="inline-flex items-center gap-x-1 text-foreground-light dark:text-foreground-dark">
+        <span className="inline-flex items-center gap-x-1">
             {timestampParser(
                 timestamp,
                 relativeTime ? "relative" : "descriptive"
             )}
-            <button onClick={() => setRelativeTime(!relativeTime)}>
+            <button
+                onClick={() => setRelativeTime(!relativeTime)}
+                className="text-foreground-light opacity-75 dark:text-foreground-dark"
+            >
                 <ClockIcon />
             </button>
         </span>
diff --git a/src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx b/src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx
index b4436098..ff452a13 100644
--- a/src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx
+++ b/src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx
@@ -10,7 +10,6 @@ import { defaultErrorMessage } from "@/utils/constants/shared.constants";
 export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
     chain_name,
     address,
-    ...props
 }) => {
     const { covalentClient } = useGoldRush();
 
@@ -46,10 +45,6 @@ export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
     }, [chain_name, address]);
 
     return (
-        <Transactions
-            {...props}
-            errorMessage={errorMessage}
-            maybeResult={maybeResult}
-        />
+        <Transactions errorMessage={errorMessage} maybeResult={maybeResult} />
     );
 };
diff --git a/src/components/Molecules/Block/BlockTransactions/BlockTransactions.tsx b/src/components/Molecules/Block/BlockTransactions/BlockTransactions.tsx
index 35a34ff0..44db7196 100644
--- a/src/components/Molecules/Block/BlockTransactions/BlockTransactions.tsx
+++ b/src/components/Molecules/Block/BlockTransactions/BlockTransactions.tsx
@@ -10,7 +10,6 @@ import { type CovalentAPIError } from "@/utils/types/shared.types";
 export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
     chain_name,
     block_height,
-    ...props
 }) => {
     const { covalentClient } = useGoldRush();
 
@@ -46,10 +45,6 @@ export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
     }, [chain_name, block_height]);
 
     return (
-        <Transactions
-            {...props}
-            errorMessage={errorMessage}
-            maybeResult={maybeResult}
-        />
+        <Transactions errorMessage={errorMessage} maybeResult={maybeResult} />
     );
 };
diff --git a/src/components/Molecules/Block/BlocksList/BlocksList.stories.tsx b/src/components/Molecules/Block/BlocksList/BlocksList.stories.tsx
new file mode 100644
index 00000000..0534cd81
--- /dev/null
+++ b/src/components/Molecules/Block/BlocksList/BlocksList.stories.tsx
@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { BlocksList as BlocksListComponent } from "./BlocksList";
+
+type Story = StoryObj<typeof BlocksListComponent>;
+
+const meta: Meta<typeof BlocksListComponent> = {
+    title: "Molecules/Block/Blocks List",
+    component: BlocksListComponent,
+};
+
+export default meta;
+
+export const BlocksList: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+    },
+};
diff --git a/src/components/Molecules/Block/BlocksList/BlocksList.tsx b/src/components/Molecules/Block/BlocksList/BlocksList.tsx
new file mode 100644
index 00000000..3ddac9bf
--- /dev/null
+++ b/src/components/Molecules/Block/BlocksList/BlocksList.tsx
@@ -0,0 +1,140 @@
+import { Address } from "@/components/Atoms";
+import { Timestamp } from "@/components/Atoms";
+import { TableHeaderSorting, TableList } from "@/components/Shared";
+import { defaultErrorMessage } from "@/utils/constants/shared.constants";
+import { timestampParser } from "@/utils/functions";
+import { None, Some, type Option } from "@/utils/option";
+import { useGoldRush } from "@/utils/store";
+import { type BlocksListProps } from "@/utils/types/molecules.types";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { type Pagination, type Block } from "@covalenthq/client-sdk";
+import { type ColumnDef } from "@tanstack/react-table";
+import { useCallback, useEffect, useState } from "react";
+
+export const BlocksList: React.FC<BlocksListProps> = ({
+    chain_name,
+    page_size = 10,
+}) => {
+    const { covalentClient } = useGoldRush();
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [maybeResult, setMaybeResult] =
+        useState<Option<Block[] | null>>(None);
+    const [pagination, setPagination] = useState<Pagination | null>(null);
+
+    useEffect(() => {
+        updateResult(null);
+    }, [chain_name, page_size]);
+
+    const updateResult = useCallback(
+        async (_pagination: Pagination | null) => {
+            try {
+                setMaybeResult(None);
+                setErrorMessage(null);
+                const { data, ...error } =
+                    await covalentClient.BaseService.getBlockHeightsByPage(
+                        chain_name,
+                        timestampParser(new Date(), "YYYY MM DD"),
+                        "2100-01-01",
+                        {
+                            pageNumber: _pagination?.page_number ?? 0,
+                            pageSize: _pagination?.page_size ?? page_size,
+                        }
+                    );
+                if (error.error) {
+                    throw error;
+                }
+                setPagination(data.pagination);
+                setMaybeResult(new Some(data.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        },
+        [chain_name]
+    );
+
+    const handleOnChangePagination = (updatedPagination: Pagination) => {
+        setPagination(updatedPagination);
+        updateResult(updatedPagination);
+    };
+
+    const columns: ColumnDef<Block>[] = [
+        {
+            accessorKey: "height",
+            id: "height",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Height"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => row.original.height.toLocaleString(),
+        },
+        {
+            accessorKey: "signed_at",
+            id: "signed_at",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Signed At"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.original.signed_at}
+                    defaultType="relative"
+                />
+            ),
+        },
+        {
+            accessorKey: "block_hash",
+            id: "block_hash",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Block Hash"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => <Address address={row.original.block_hash} />,
+        },
+        {
+            accessorKey: "gas_used",
+            id: "gas_used",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Gas Used"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) =>
+                `${((row.original.gas_used / row.original.gas_limit) * 100).toFixed(2)}%`,
+        },
+        {
+            accessorKey: "gas_limit",
+            id: "gas_limit",
+            header: ({ column }) => (
+                <TableHeaderSorting<Block>
+                    align="left"
+                    header="Gas Limit"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => row.original.gas_limit.toLocaleString(),
+        },
+    ];
+
+    return (
+        <TableList<Block>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+            pagination={pagination}
+            onChangePaginationHandler={handleOnChangePagination}
+        />
+    );
+};
diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
index 904ef790..4dadc0f6 100644
--- a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
+++ b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx
@@ -1,7 +1,5 @@
-import { Address } from "@/components/Atoms";
 import { Timestamp } from "@/components/Atoms";
 import { CardDetail } from "@/components/Shared";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -12,19 +10,11 @@ import { timestampParser } from "@/utils/functions";
 import { None, Some, type Option } from "@/utils/option";
 import { useGoldRush } from "@/utils/store";
 import { type LatestBlocksProps } from "@/utils/types/molecules.types";
-import {
-    type CovalentAPIError,
-    type CardDetailProps,
-} from "@/utils/types/shared.types";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
 import { type Block } from "@covalenthq/client-sdk";
-import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { useEffect, useState } from "react";
 
-export const LatestBlocks: React.FC<LatestBlocksProps> = ({
-    chain_name,
-    limit = 5,
-    on_view_details,
-}) => {
+export const LatestBlocks: React.FC<LatestBlocksProps> = ({ chain_name }) => {
     const { covalentClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [maybeResult, setMaybeResult] =
@@ -32,16 +22,16 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
 
     useEffect(() => {
         (async () => {
-            setMaybeResult(None);
-            setErrorMessage(null);
             try {
+                setMaybeResult(None);
+                setErrorMessage(null);
                 const { data, ...error } =
                     await covalentClient.BaseService.getBlockHeightsByPage(
                         chain_name,
                         timestampParser(new Date(), "YYYY MM DD"),
                         "2100-01-01",
                         {
-                            pageSize: limit,
+                            pageSize: 5,
                         }
                     );
                 if (error.error) {
@@ -54,85 +44,67 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
                 console.error(error);
             }
         })();
-    }, [chain_name, limit]);
+    }, [chain_name]);
 
-    return maybeResult.match({
-        None: () => (
-            <>
-                {new Array(limit).fill(null).map(() => (
-                    <Skeleton key={Math.random()} size={GRK_SIZES.LARGE} />
-                ))}
-            </>
-        ),
-        Some: (blocks) =>
-            errorMessage ? (
-                <p className="col-span-5">{errorMessage}</p>
-            ) : blocks ? (
-                blocks.map((block) => (
-                    <Card
-                        key={block.height}
-                        className="flex w-full flex-col rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white"
-                    >
-                        {(
-                            [
-                                {
-                                    heading: "BLOCK HEIGHT",
-                                    content: block.height.toLocaleString(),
-                                },
-                                {
-                                    heading: "SIGNED AT",
-                                    content: (
-                                        <Timestamp
-                                            timestamp={block.signed_at}
-                                            defaultType="relative"
-                                        />
-                                    ),
-                                },
-                                {
-                                    heading: "BLOCK HASH",
-                                    content: (
-                                        <Address
-                                            address={block.block_hash}
-                                            show_copy_icon={false}
-                                        />
-                                    ),
-                                },
-                                {
-                                    heading: "GAS USED",
-                                    content: `${(
-                                        (block.gas_used / block.gas_limit) *
-                                        100
-                                    ).toFixed(2)}%`,
-                                },
-                                {
-                                    heading: "GAS LIMIT",
-                                    content: block.gas_limit.toLocaleString(),
-                                },
-                            ] as CardDetailProps[]
-                        ).map((props) => (
-                            <CardDetail
-                                key={props.heading?.toString()}
-                                wrapperClassName="flex justify-between"
-                                {...props}
-                            />
-                        ))}
+    return (
+        <Card className="flex w-full flex-col rounded border border-secondary-light px-4 dark:border-secondary-dark dark:bg-background-dark dark:text-white">
+            {maybeResult.match({
+                None: () =>
+                    new Array(5).fill(null).map(() => (
+                        <div
+                            key={Math.random()}
+                            className="grid grid-cols-2 border-b border-secondary-light py-4 last:border-b-0 dark:border-secondary-dark"
+                        >
+                            {Array(2)
+                                .fill(null)
+                                .map(() => (
+                                    <Skeleton
+                                        key={Math.random()}
+                                        size={GRK_SIZES.LARGE}
+                                    />
+                                ))}
+                        </div>
+                    )),
+                Some: (blocks) =>
+                    errorMessage ? (
+                        <p className="col-span-5">{errorMessage}</p>
+                    ) : blocks ? (
+                        blocks.map(
+                            ({ gas_limit, gas_used, height, signed_at }) => (
+                                <div
+                                    key={height}
+                                    className="grid grid-cols-2 items-center border-b border-secondary-light py-4 last:border-b-0 dark:border-secondary-dark"
+                                >
+                                    <CardDetail
+                                        heading={
+                                            <Timestamp
+                                                timestamp={signed_at}
+                                                defaultType="relative"
+                                            />
+                                        }
+                                        content={
+                                            <p className="text-base">
+                                                {height.toLocaleString()}
+                                            </p>
+                                        }
+                                        wrapperClassName="flex flex-col-reverse"
+                                    />
 
-                        {on_view_details ? (
-                            <Button
-                                variant="ghost"
-                                className="mx-auto mb-2 mt-4 flex items-center justify-center gap-x-2 text-sm"
-                                onClick={() => on_view_details(block)}
-                            >
-                                View Block Details
-                                <ExternalLinkIcon />
-                            </Button>
-                        ) : (
-                            <></>
-                        )}
-                    </Card>
-                ))
-            ) : (
-                <></>
-            ),
-    });
+                                    <CardDetail
+                                        heading={"GAS USED"}
+                                        content={`${(
+                                            (gas_used / gas_limit) *
+                                            100
+                                        ).toFixed(2)}%`}
+                                        subtext={`of ${gas_limit.toLocaleString()}`}
+                                    />
+                                </div>
+                            )
+                        )
+                    ) : (
+                        <></>
+                    ),
+            })}
+        </Card>
+    );
 };
diff --git a/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx b/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx
index ee43f5e3..874c22b1 100644
--- a/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx
+++ b/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx
@@ -12,11 +12,6 @@ export default meta;
 
 export const ChainSelector: Story = {
     args: {
-        chain_options: [
-            "eth-mainnet",
-            "matic-mainnet",
-            "arbitrum-mainnet",
-            "solana-mainnet",
-        ],
+        chain_options: [1, 10, "arbitrum-mainnet", "solana-mainnet"],
     },
 };
diff --git a/src/components/Molecules/ChainSelector/ChainSelector.tsx b/src/components/Molecules/ChainSelector/ChainSelector.tsx
index f95075a6..a95dd151 100644
--- a/src/components/Molecules/ChainSelector/ChainSelector.tsx
+++ b/src/components/Molecules/ChainSelector/ChainSelector.tsx
@@ -15,7 +15,7 @@ import { useMemo, useState } from "react";
 import { CheckIcon, DoubleArrowDownIcon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button";
 import { type ChainSelectorProps } from "@/utils/types/molecules.types";
-import { type ChainItem, type Chain } from "@covalenthq/client-sdk";
+import { type ChainItem } from "@covalenthq/client-sdk";
 import { CommandLoading } from "cmdk";
 import { Skeleton } from "@/components/ui/skeleton";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
@@ -31,12 +31,19 @@ export const ChainSelector: React.FC<ChainSelectorProps> = ({
         if (!chains) {
             return null;
         }
-        const chainOptionsSet = new Set(chain_options);
-        if (chainOptionsSet.size === 0) {
-            return chains;
-        }
 
-        return chains.filter(({ name }) => chainOptionsSet.has(name as Chain));
+        return chain_options.reduce((acc: ChainItem[], nameOrId) => {
+            const foundChain: ChainItem | null =
+                chains.find(
+                    ({ name, chain_id }) =>
+                        name === nameOrId ||
+                        chain_id.toString() === nameOrId.toString()
+                ) ?? null;
+            if (foundChain) {
+                acc.push(foundChain);
+            }
+            return acc;
+        }, []);
     }, [chains, chain_options]);
 
     return (
diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
index 40fb7724..9ef7952f 100644
--- a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
+++ b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx
@@ -1,6 +1,5 @@
-import { Address } from "@/components/Atoms";
+import { Address, Timestamp } from "@/components/Atoms";
 import { CardDetail } from "@/components/Shared";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -11,18 +10,12 @@ import { timestampParser } from "@/utils/functions";
 import { None, Some, type Option } from "@/utils/option";
 import { useGoldRush } from "@/utils/store";
 import { type LatestTransactionsProps } from "@/utils/types/molecules.types";
-import {
-    type CovalentAPIError,
-    type CardDetailProps,
-} from "@/utils/types/shared.types";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
 import { type Transaction } from "@covalenthq/client-sdk";
-import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { useEffect, useState } from "react";
 
 export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
     chain_name,
-    limit = 5,
-    on_view_details,
 }) => {
     const { covalentClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -31,9 +24,9 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
 
     useEffect(() => {
         (async () => {
-            setMaybeResult(None);
-            setErrorMessage(null);
             try {
+                setMaybeResult(None);
+                setErrorMessage(null);
                 const { data: blockData, ...blockError } =
                     await covalentClient.BaseService.getBlockHeightsByPage(
                         chain_name,
@@ -62,90 +55,104 @@ export const LatestTransactions: React.FC<LatestTransactionsProps> = ({
                     setErrorMessage(txError.error_message);
                     throw txError;
                 }
-                setMaybeResult(new Some(txData.items.slice(-limit)));
+                setMaybeResult(new Some(txData.items.slice(-5)));
             } catch (error: CovalentAPIError | any) {
                 setErrorMessage(error?.error_message ?? defaultErrorMessage);
                 setMaybeResult(new Some(null));
                 console.error(error);
             }
         })();
-    }, [chain_name, limit]);
+    }, [chain_name]);
+
+    return (
+        <Card className="flex w-full flex-col rounded border border-secondary-light px-4 dark:border-secondary-dark dark:bg-background-dark dark:text-white">
+            {maybeResult.match({
+                None: () =>
+                    new Array(5).fill(null).map(() => (
+                        <div
+                            key={Math.random()}
+                            className="grid grid-cols-3 border-b border-secondary-light py-4 last:border-b-0 dark:border-secondary-dark"
+                        >
+                            {Array(3)
+                                .fill(null)
+                                .map(() => (
+                                    <Skeleton
+                                        key={Math.random()}
+                                        size={GRK_SIZES.LARGE}
+                                    />
+                                ))}
+                        </div>
+                    )),
+                Some: (txs) =>
+                    errorMessage ? (
+                        <p className="col-span-5">{errorMessage}</p>
+                    ) : txs ? (
+                        txs.map(
+                            ({
+                                block_signed_at,
+                                tx_hash,
+                                from_address,
+                                to_address,
+                                value,
+                                gas_metadata,
+                                pretty_value_quote,
+                            }) => (
+                                <div
+                                    key={tx_hash}
+                                    className="grid grid-cols-3 items-center border-b border-secondary-light py-4 last:border-b-0 dark:border-secondary-dark"
+                                >
+                                    <CardDetail
+                                        content={
+                                            <p className="text-base">
+                                                <Address address={tx_hash} />
+                                            </p>
+                                        }
+                                        heading={
+                                            <Timestamp
+                                                timestamp={block_signed_at}
+                                                defaultType="relative"
+                                            />
+                                        }
+                                        wrapperClassName="flex flex-col-reverse"
+                                    />
 
-    return maybeResult.match({
-        None: () => (
-            <>
-                {new Array(limit).fill(null).map(() => (
-                    <Skeleton key={Math.random()} size={GRK_SIZES.LARGE} />
-                ))}
-            </>
-        ),
-        Some: (result) =>
-            errorMessage ? (
-                <p className="col-span-5">{errorMessage}</p>
-            ) : result ? (
-                result.map((tx) => (
-                    <Card
-                        key={tx.tx_hash}
-                        className="flex w-full flex-col rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white"
-                    >
-                        {(
-                            [
-                                {
-                                    heading: "TRANSACTION HASH",
-                                    content: <Address address={tx.tx_hash} />,
-                                },
-                                {
-                                    heading: "BLOCK HEIGHT",
-                                    content: tx.block_height.toLocaleString(),
-                                },
-                                {
-                                    heading: "FROM",
-                                    content: (
-                                        <Address address={tx.from_address} />
-                                    ),
-                                },
-                                {
-                                    heading: "TO",
-                                    content: (
-                                        <Address address={tx.to_address} />
-                                    ),
-                                },
-                                {
-                                    heading: "VALUE",
-                                    content: `${
-                                        Number(tx.value) /
-                                        Math.pow(
-                                            10,
-                                            tx.gas_metadata.contract_decimals
-                                        )
-                                    } ${tx.gas_metadata.contract_ticker_symbol}`,
-                                    subtext: tx.pretty_value_quote,
-                                },
-                            ] as CardDetailProps[]
-                        ).map((props) => (
-                            <CardDetail
-                                key={props.heading?.toString()}
-                                wrapperClassName="flex justify-between"
-                                {...props}
-                            />
-                        ))}
+                                    <div>
+                                        <CardDetail
+                                            heading={<div>FROM</div>}
+                                            content={
+                                                <Address
+                                                    address={from_address}
+                                                />
+                                            }
+                                            wrapperClassName="flex gap-x-2"
+                                        />
+                                        <CardDetail
+                                            heading={<div>TO</div>}
+                                            content={
+                                                <Address address={to_address} />
+                                            }
+                                            wrapperClassName="flex gap-x-2"
+                                        />
+                                    </div>
 
-                        {on_view_details ? (
-                            <Button
-                                variant="ghost"
-                                className="mx-auto mb-2 mt-4 flex items-center justify-center gap-x-2 text-sm"
-                                onClick={() => on_view_details(tx)}
-                            >
-                                View Transaction Details
-                                <ExternalLinkIcon />
-                            </Button>
-                        ) : (
-                            <></>
-                        )}
-                    </Card>
-                ))
-            ) : (
-                <></>
-            ),
-    });
+                                    <CardDetail
+                                        content={`${
+                                            Number(value) /
+                                            Math.pow(
+                                                10,
+                                                gas_metadata.contract_decimals
+                                            )
+                                        } ${gas_metadata.contract_ticker_symbol}`}
+                                        heading={pretty_value_quote}
+                                        wrapperClassName="flex flex-col-reverse"
+                                    />
+                                </div>
+                            )
+                        )
+                    ) : (
+                        <></>
+                    ),
+            })}
+        </Card>
+    );
 };
diff --git a/src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx
new file mode 100644
index 00000000..0b165f55
--- /dev/null
+++ b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx
@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TransactionsList as TransactionsListComponent } from "./TransactionsList";
+
+type Story = StoryObj<typeof TransactionsListComponent>;
+
+const meta: Meta<typeof TransactionsListComponent> = {
+    title: "Molecules/Transaction/Transactions List",
+    component: TransactionsListComponent,
+};
+
+export default meta;
+
+export const TransactionsList: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+    },
+};
diff --git a/src/components/Molecules/Transaction/TransactionsList/TransactionsList.tsx b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.tsx
new file mode 100644
index 00000000..dc8dd8db
--- /dev/null
+++ b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.tsx
@@ -0,0 +1,172 @@
+import { Address, Timestamp } from "@/components/Atoms";
+import { TableHeaderSorting, TableList } from "@/components/Shared";
+import { defaultErrorMessage } from "@/utils/constants/shared.constants";
+import { timestampParser } from "@/utils/functions";
+import { None, Some, type Option } from "@/utils/option";
+import { useGoldRush } from "@/utils/store";
+import { type TransactionsListProps } from "@/utils/types/molecules.types";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import {
+    calculatePrettyBalance,
+    type Transaction,
+} from "@covalenthq/client-sdk";
+import { type ColumnDef } from "@tanstack/react-table";
+import { useEffect, useState } from "react";
+
+export const TransactionsList: React.FC<TransactionsListProps> = ({
+    chain_name,
+}) => {
+    const { covalentClient } = useGoldRush();
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [maybeResult, setMaybeResult] =
+        useState<Option<Transaction[] | null>>(None);
+
+    useEffect(() => {
+        (async () => {
+            try {
+                setMaybeResult(None);
+                setErrorMessage(null);
+                const { data: blockData, ...blockError } =
+                    await covalentClient.BaseService.getBlockHeightsByPage(
+                        chain_name,
+                        timestampParser(new Date(), "YYYY MM DD"),
+                        "2100-01-01",
+                        {
+                            pageSize: 1,
+                        }
+                    );
+                if (blockError.error) {
+                    setErrorMessage(blockError.error_message);
+                    throw blockError;
+                }
+                const latestBlock = blockData.items[0];
+                const { data: txData, ...txError } =
+                    await covalentClient.TransactionService.getTransactionsForBlock(
+                        chain_name,
+                        latestBlock.height - 2,
+                        {
+                            noLogs: true,
+                            quoteCurrency: "USD",
+                            withSafe: false,
+                        }
+                    );
+                if (txError.error) {
+                    setErrorMessage(txError.error_message);
+                    throw txError;
+                }
+                setMaybeResult(new Some(txData.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        })();
+    }, [chain_name]);
+
+    const columns: ColumnDef<Transaction>[] = [
+        {
+            accessorKey: "tx_hash",
+            id: "tx_hash",
+            header: "Transaction Hash",
+            cell: ({ row }) => <Address address={row.original.tx_hash} />,
+        },
+        {
+            accessorKey: "block_signed_at",
+            id: "block_signed_at",
+            header: ({ column }) => (
+                <TableHeaderSorting<Transaction>
+                    align="left"
+                    header="Signed At"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <Timestamp
+                    timestamp={row.original.block_signed_at}
+                    defaultType="relative"
+                />
+            ),
+        },
+        {
+            accessorKey: "block_height",
+            id: "block_height",
+            header: ({ column }) => (
+                <TableHeaderSorting<Transaction>
+                    align="left"
+                    header="Block Height"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => row.original.block_height.toLocaleString(),
+        },
+        {
+            accessorKey: "from",
+            id: "from",
+            header: "From",
+            cell: ({ row }) => <Address address={row.original.from_address} />,
+        },
+        {
+            accessorKey: "to",
+            id: "to",
+            header: "To",
+            cell: ({ row }) => <Address address={row.original.to_address} />,
+        },
+        {
+            accessorKey: "value",
+            id: "value",
+            header: ({ column }) => (
+                <TableHeaderSorting<Transaction>
+                    align="left"
+                    header="Value"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <div>
+                    {Number(row.original.value) /
+                        Math.pow(
+                            10,
+                            row.original.gas_metadata.contract_decimals
+                        )}{" "}
+                    {row.original.gas_metadata.contract_ticker_symbol}
+                    <p className="text-xs opacity-80">
+                        {row.original.pretty_value_quote}
+                    </p>
+                </div>
+            ),
+        },
+        {
+            accessorKey: "tx_fee",
+            id: "tx_fee",
+            header: ({ column }) => (
+                <TableHeaderSorting<Transaction>
+                    align="left"
+                    header="Fee"
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => (
+                <div>
+                    {calculatePrettyBalance(
+                        BigInt(row.original.fees_paid || 0)!,
+                        row.original.gas_metadata.contract_decimals,
+                        true,
+                        4
+                    )}{" "}
+                    {row.original.gas_metadata.contract_ticker_symbol}
+                    <p className="text-xs opacity-80">
+                        {row.original.pretty_gas_quote}
+                    </p>
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <TableList<Transaction>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+        />
+    );
+};
diff --git a/src/components/Molecules/index.ts b/src/components/Molecules/index.ts
index 44ee0f43..7fe6f281 100644
--- a/src/components/Molecules/index.ts
+++ b/src/components/Molecules/index.ts
@@ -4,6 +4,7 @@ export { AddressDetails } from "./Address/AddressDetails/AddressDetails";
 export { AddressTransactions } from "./Address/AddressTransactions/AddressTransactions";
 export { BlockDetails } from "./Block/BlockDetails/BlockDetails";
 export { BlockTransactions } from "./Block/BlockTransactions/BlockTransactions";
+export { BlocksList } from "./Block/BlocksList/BlocksList";
 export { LatestBlocks } from "./Block/LatestBlocks/LatestBlocks";
 export { ChainSelector } from "./ChainSelector/ChainSelector";
 export { GasCard } from "./GasCard/GasCard";
@@ -22,6 +23,7 @@ export { TokenTransfersList } from "./Token/TokenTransfersList/TokenTransfersLis
 export { LatestTransactions } from "./Transaction/LatestTransactions/LatestTransactions";
 export { TransactionDetails } from "./Transaction/TransactionDetails/TransactionDetails";
 export { TransactionReceipt } from "./Transaction/TransactionReceipt/TransactionReceipt";
+export { TransactionsList } from "./Transaction/TransactionsList/TransactionsList";
 export { XYKPoolDetails } from "./XYK/Pool/XYKPoolDetails/XYKPoolDetails";
 export { XYKPoolList } from "./XYK/Pool/XYKPoolList/XYKPoolList";
 export { XYKPoolTimeseries } from "./XYK/Pool/XYKPoolTimeseries/XYKPoolTimeseries";
diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx
index d794e983..67b8902d 100644
--- a/src/components/Shared/Transactions.tsx
+++ b/src/components/Shared/Transactions.tsx
@@ -3,25 +3,16 @@ import {
     type Transaction,
 } from "@covalenthq/client-sdk";
 import { type ColumnDef } from "@tanstack/react-table";
-import { IconWrapper, TableHeaderSorting, TableList } from ".";
+import { TableHeaderSorting, TableList } from ".";
 import { type TransactionsProps } from "@/utils/types/shared.types";
 import { Address } from "@/components/Atoms";
-import {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuLabel,
-    DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
+
 import { Timestamp } from "@/components/Atoms";
+import { Some } from "@/utils/option";
 
 export const Transactions: React.FC<TransactionsProps> = ({
-    on_goldrush_receipt_click,
-    on_native_explorer_click,
-    on_transaction_click,
-    errorMessage,
-    maybeResult,
+    errorMessage = null,
+    maybeResult = new Some(null),
 }) => {
     const columns: ColumnDef<Transaction>[] = [
         {
@@ -34,32 +25,7 @@ export const Transactions: React.FC<TransactionsProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return (
-                    <div className="flex items-center gap-3">
-                        {on_transaction_click ? (
-                            <div
-                                className={
-                                    on_transaction_click
-                                        ? "cursor-pointer hover:opacity-75"
-                                        : ""
-                                }
-                                onClick={() => {
-                                    if (on_transaction_click) {
-                                        on_transaction_click(row.original);
-                                    }
-                                }}
-                            >
-                                <Address address={row.original.tx_hash} />
-                            </div>
-                        ) : (
-                            <p className="flex flex-col text-base">
-                                <Address address={row.original.tx_hash} />
-                            </p>
-                        )}
-                    </div>
-                );
-            },
+            cell: ({ row }) => <Address address={row.original.tx_hash} />,
         },
         {
             id: "block_height",
@@ -181,58 +147,6 @@ export const Transactions: React.FC<TransactionsProps> = ({
                 );
             },
         },
-        {
-            id: "actions",
-            cell: ({ row }) => {
-                if (!on_native_explorer_click && !on_goldrush_receipt_click)
-                    return;
-                return (
-                    <div className="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="ml-auto  ">
-                                    <span className="sr-only">Open menu</span>
-                                    <IconWrapper icon_class_name="expand_more" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                                {on_native_explorer_click && (
-                                    <DropdownMenuItem
-                                        onClick={() => {
-                                            on_native_explorer_click(
-                                                row.original
-                                            );
-                                        }}
-                                    >
-                                        <IconWrapper
-                                            icon_class_name="open_in_new"
-                                            class_name="mr-2"
-                                        />{" "}
-                                        View on explorer
-                                    </DropdownMenuItem>
-                                )}
-                                {on_goldrush_receipt_click && (
-                                    <DropdownMenuItem
-                                        onClick={() => {
-                                            on_goldrush_receipt_click(
-                                                row.original
-                                            );
-                                        }}
-                                    >
-                                        <IconWrapper
-                                            icon_class_name="open_in_new"
-                                            class_name="mr-2"
-                                        />{" "}
-                                        View goldrush receipt
-                                    </DropdownMenuItem>
-                                )}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                );
-            },
-        },
     ];
 
     return (
diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts
index ed3357d7..d9d7c98d 100644
--- a/src/utils/types/molecules.types.ts
+++ b/src/utils/types/molecules.types.ts
@@ -5,9 +5,9 @@ import type {
 } from "@covalenthq/client-sdk";
 import {
     type BalanceItem,
-    type Block,
     type Chain,
     type ChainActivityEvent,
+    type ChainID,
     type ChainItem,
     type NftTokenContractBalanceItem,
     type PoolWithTimeseries,
@@ -19,7 +19,6 @@ import {
     type DECODED_ACTION,
     type DECODED_EVENT_CATEGORY,
 } from "../constants/shared.constants";
-import { type TransactionsProps } from "./shared.types";
 
 export interface AddressActivityDetailsProps {
     address: string;
@@ -51,20 +50,26 @@ export interface BlockDetailsProps {
     height: number;
 }
 
+export interface BlocksListProps {
+    chain_name: Chain;
+    page_size?: number;
+}
+
 export interface LatestBlocksProps {
     chain_name: Chain;
-    limit?: number;
-    on_view_details?: (block: Block) => void;
+    page_size?: number;
 }
 
-export interface LatestPriceProps {
+export interface TransactionsListProps {
     chain_name: Chain;
 }
 
 export interface LatestTransactionsProps {
     chain_name: Chain;
-    limit?: number;
-    on_view_details?: (block: Transaction) => void;
+}
+
+export interface LatestPriceProps {
+    chain_name: Chain;
 }
 
 export interface GasCardProps {
@@ -78,7 +83,7 @@ export interface AddressDetailsProps {
 }
 
 export interface ChainSelectorProps {
-    chain_options?: Chain[];
+    chain_options?: (Chain | ChainID)[];
     onChangeChain?: (chain: ChainItem) => unknown;
 }
 
@@ -130,7 +135,7 @@ export interface AddressTransactionsProps {
     address: string;
 }
 
-export interface BlockTransactionsProps extends TransactionsProps {
+export interface BlockTransactionsProps {
     chain_name: Chain;
     block_height: number;
 }
diff --git a/src/utils/types/shared.types.ts b/src/utils/types/shared.types.ts
index 1b7eff6c..fa8f4293 100644
--- a/src/utils/types/shared.types.ts
+++ b/src/utils/types/shared.types.ts
@@ -42,9 +42,6 @@ export interface IconWrapperProps {
 }
 
 export interface TransactionsProps {
-    on_native_explorer_click?: Function;
-    on_goldrush_receipt_click?: Function;
-    on_transaction_click?: Function;
     maybeResult: Option<Transaction[] | null>;
     errorMessage: string | null;
 }