diff --git a/src/components/BlockTransactionsTable.vue b/src/components/BlockTransactionsTable.vue
new file mode 100644
index 00000000..118cfdd0
--- /dev/null
+++ b/src/components/BlockTransactionsTable.vue
@@ -0,0 +1,989 @@
+<script lang="ts">
+import {
+    Action,
+    PaginationSettings,
+    TransactionTableRow,
+    Token,
+} from 'src/types';
+import {
+    computed,
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    ref,
+    toRefs,
+    watch,
+} from 'vue';
+import DateField from 'src/components/DateField.vue';
+import AccountFormat from 'src/components/transaction/AccountFormat.vue';
+import ActionFormat from 'src/components/transaction/ActionFormat.vue';
+import DataFormat from 'src/components/transaction/DataFormat.vue';
+import AccountSearch from 'src/components/AccountSearch.vue';
+import TokenSearch from 'src/components/TokenSearch.vue';
+import { api } from 'src/api';
+import { useRoute, useRouter } from 'vue-router';
+import { QBtnDropdown, QPopupProxy, QTable } from 'quasar';
+import { Chain } from 'src/types/Chain';
+import { getChain } from 'src/config/ConfigManager';
+const chain: Chain = getChain();
+
+const TWO_SECONDS = 2000;
+
+const pageSizeOptions = [10, 20, 50, 100, 200];
+
+const getStoredRowSetting = () => {
+    const savedRowsPerPage = localStorage.getItem('txRowsPerPage');
+    let rowsPerPageNum = parseInt(savedRowsPerPage);
+    // if saved value was NOT integer (valid)
+    if (isNaN(rowsPerPageNum)) {
+        // then use a valid value and replace invalid value in localStorage
+        rowsPerPageNum = pageSizeOptions[0];
+        localStorage.setItem('txRowsPerPage', rowsPerPageNum.toString());
+    }
+    return rowsPerPageNum;
+};
+
+export default defineComponent({
+    name: 'BlockTransactionsTable',
+    components: {
+        DateField,
+        AccountFormat,
+        ActionFormat,
+        DataFormat,
+        AccountSearch,
+        TokenSearch,
+    },
+    props: {
+        account: {
+            type: String || null,
+            required: false,
+            default: null,
+        },
+        actions: {
+            type: Object as PropType<Action[]>,
+            required: false,
+            default: null,
+        },
+        showTransferLabel: {
+            // show/hide send/receive label for transfers
+            type: Boolean,
+            default: false,
+        },
+        toggleEnabled: {
+            type: Boolean,
+            default: true,
+        },
+        filtersEnabled: {
+            type: Boolean,
+            default: true,
+        },
+        showPaginationExtras: {
+            // show/hide pagination "last" button and total row count
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props) {
+        const route = useRoute();
+        const router = useRouter();
+        const { account, actions } = toRefs(props);
+        const columns = [
+            {
+                name: 'transaction',
+                required: true,
+                label: 'TRANSACTION',
+                align: 'left',
+                field: 'transaction',
+                sortable: true,
+            },
+            {
+                name: 'timestamp',
+                required: true,
+                align: 'left',
+                label: 'TIMESTAMP',
+                field: 'timestamp',
+                sortable: true,
+            },
+            {
+                name: 'action',
+                required: true,
+                align: 'left',
+                label: 'ACTION',
+                field: 'action',
+                sortable: true,
+            },
+            {
+                name: 'data',
+                required: true,
+                align: 'left',
+                label: 'DATA',
+                field: 'data',
+            },
+        ];
+        const rows = ref<TransactionTableRow[]>([]);
+        const totalRows = ref<number>(0);
+        const filteredRows = ref<TransactionTableRow[]>([]);
+        const loading = ref<boolean>(false);
+        const showPagesSizes = ref<boolean>(false);
+        const switchPageSelector = () => {
+            showPagesSizes.value = !showPagesSizes.value;
+        };
+        const changePageSize = async (size: number) => {
+            paginationSettings.value.rowsPerPage = size;
+            paginationSettings.value.page = 1;
+            await onPaginationChange({ pagination: paginationSettings.value });
+            localStorage.setItem('txRowsPerPage', size.toString());
+        };
+        const changePagination = async (page: number, size: number) => {
+            paginationSettings.value.page = page;
+            paginationSettings.value.rowsPerPage = size;
+            await onPaginationChange({ pagination: paginationSettings.value });
+        };
+
+        const pagination = computed(
+            () => (route.query['page'] as string) || `1,${getStoredRowSetting()}`,
+        );
+        const paginationSettings = ref<PaginationSettings>({
+            sortBy: 'timestamp',
+            descending: true,
+            page: 1,
+            rowsPerPage: getStoredRowSetting(),
+            rowsNumber: 10000,
+        });
+
+        const enableLiveTransactions = ref<boolean>(props.toggleEnabled);
+        const currentFirstAction = ref<number>(0);
+
+        // actions filter
+        const auxModel = ref('');
+        const actionsModel = ref('');
+        const actionsDisplay = computed(() => {
+            if (actionsModel.value) {
+                const list = actionsModel.value.split(',');
+                return list.length > 1 ? list[0] + '...' : list[0];
+            }
+            return '';
+        });
+
+        // accounts filter
+        const showAccountFilter = ref<boolean>(chain.getFiltersSupported('notified'));
+        const accountsModel = ref('');
+        const accountsDisplay = computed(() => {
+            if (accountsModel.value) {
+                const list = accountsModel.value.split(',');
+                return list.length > 1 ? list[0] + '...' : list[0];
+            }
+            return '';
+        });
+
+        // token filter
+        const showTokenFilter = ref(false);
+        const tokenModel = ref(null as Token | null);
+        const tokenDisplay = computed(() => {
+            if (tokenModel.value) {
+                return tokenModel.value?.symbol ?? '';
+            }
+            return '';
+        });
+        void api.getTokens().then((tokens) => {
+            if (tokens.length > 0) {
+                showTokenFilter.value = true;
+            }
+        });
+
+        // date filter
+        const now = new Date().toISOString();
+        const fromDateModel = ref('');
+        const toDateModel = ref<string>(now);
+        const dateDisplay = computed(() => {
+            try {
+                if (fromDateModel.value !== '' || toDateModel.value !== now) {
+                    if (fromDateModel.value === '') {
+                        return 'Until ' + toDateModel.value.split('T')[0];
+                    } else if (toDateModel.value === now) {
+                        return 'Since ' + fromDateModel.value.split('T')[0];
+                    } else {
+                        return (
+                            fromDateModel.value.split('T')[0] +
+              ' - ' +
+              toDateModel.value.split('T')[0]
+                        );
+                    }
+                }
+            } catch (e) {
+                console.error(e);
+            }
+            return '';
+        });
+
+        const interval = ref<number>(null);
+        const showAge = ref<boolean>(localStorage.getItem('showAge') === 'true');
+
+        const isTransaction = computed(
+            () => account.value !== null && account.value.length > 12,
+        );
+        const tableTitle = computed(() =>
+            isTransaction.value ? 'Actions' : 'Latest Transactions',
+        );
+
+        const lastPage = computed(() => {
+            const rowsPerPage = paginationSettings.value.rowsPerPage;
+            const rowsNumber = totalRows.value;
+            return Math.ceil(rowsNumber / rowsPerPage);
+        });
+
+        const hasActions = computed(() => actions.value !== null);
+        const clearFilters = (): void => {
+            accountsModel.value = '';
+            actionsModel.value = '';
+            tokenModel.value = null;
+            fromDateModel.value = '';
+            toDateModel.value = now;
+        };
+        const filter = computed(() => (
+            accountsDisplay.value +
+            actionsDisplay.value +
+            dateDisplay.value +
+            tokenDisplay.value
+        ));
+
+        const filterRows = () => {
+            filteredRows.value = rows.value;
+        };
+        const loadTableData = async (): Promise<void> => {
+            let tableData: Action[] = [];
+            if (isTransaction.value) {
+                tableData = (await api.getTransaction(account.value)).actions;
+            } else if (hasActions.value) {
+                tableData = actions.value;
+            } else {
+                const page = paginationSettings.value.page;
+                let limit = paginationSettings.value.rowsPerPage;
+                const notified = accountsModel.value ?? '';
+                const after = fromDateModel.value !== '' ? new Date(fromDateModel.value).toISOString() : '';
+                const before = toDateModel.value !== now ? new Date(toDateModel.value).toISOString() : '';
+                const sort = paginationSettings.value.descending ? 'desc' : 'asc';
+                const extras: {[key:string]:string} = {};
+
+                if (tokenModel.value) {
+                    extras['act.account'] = tokenModel.value.contract;
+                    // Increase limit to allow for filtering
+                    limit = limit * 3;
+                }
+                if (actionsModel.value) {
+                    extras['act.name'] = actionsModel.value;
+                }
+
+                const response = await api.getTransactions({
+                    page,
+                    limit,
+                    account: account.value,
+                    notified,
+                    before,
+                    after,
+                    sort,
+                    extras,
+                });
+                tableData = response.data.actions;
+                totalRows.value = response.data.total.value;
+            }
+
+            if (tableData) {
+                if (tokenModel.value) {
+                    tableData = tableData.filter(
+                        item => (item.act.data as {quantity?:string})?.quantity?.includes(tokenModel.value.symbol),
+                    );
+                }
+
+                const flattenedData: TransactionTableRow[] = [];
+                tableData.forEach((action) => {
+                    const actionsArray = action.act?.data ? [action] : [];
+                    actionsArray.forEach((act) => {
+                        flattenedData.push({
+                            name: act.trx_id,
+                            transaction: { id: act.trx_id, type: 'transaction' },
+                            timestamp: act['@timestamp'] || act.timestamp,
+                            action: act,
+                            data: {
+                                data: act.act.data,
+                                name: act.act.name,
+                            },
+                            actions: actionsArray.map(a => ({
+                                name: a.trx_id,
+                                transaction: { id: a.trx_id, type: 'transaction' },
+                                timestamp: a['@timestamp'] || a.timestamp,
+                                action: a,
+                                data: {
+                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                                    data: a.act.data,
+                                    name: a.act.name,
+                                },
+                            })),
+                        });
+                    });
+                });
+
+                // Apply pagination after filtering
+                const startIndex = (paginationSettings.value.page - 1) * paginationSettings.value.rowsPerPage;
+                rows.value = flattenedData.slice(startIndex, startIndex + paginationSettings.value.rowsPerPage);
+                totalRows.value = flattenedData.length;
+            }
+            void filterRows();
+        };
+
+        const onRequest = async (props: {
+            pagination: {
+                page: number;
+                rowsPerPage: number;
+                sortBy: string;
+                descending: boolean;
+            };
+        }) => {
+            loading.value = true;
+            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+            paginationSettings.value.page = page;
+            paginationSettings.value.rowsPerPage = rowsPerPage;
+            paginationSettings.value.sortBy = sortBy;
+            paginationSettings.value.descending = descending;
+            await loadTableData();
+            loading.value = false;
+        };
+
+        const onPaginationChange = async (props: {
+          pagination: {
+            page: number;
+            rowsPerPage: number;
+            sortBy: string;
+            descending: boolean;
+          };
+        }) => {
+            const { page, rowsPerPage } = props.pagination;
+
+            // we need to change the URL to keep the pagination state by changing the route.query.page
+            // with a string like 'page,rowsPerPage'
+            await router.push({
+                // taking care to preserve the current #hash anchor and the current query parameters
+                hash: window.location.hash,
+                query: {
+                    ...route.query,
+                    page: `${page},${rowsPerPage}`,
+                },
+            });
+        };
+
+        const applyPagination = async (
+            page: string | number,
+            size: string | number,
+        ) => {
+            if (page) {
+                paginationSettings.value.page = Number(page);
+            }
+            if (size) {
+                paginationSettings.value.rowsPerPage = Number(size);
+            }
+            await onRequest({
+                pagination: paginationSettings.value,
+            });
+        };
+
+        const checkIsMultiLine = (data: string): boolean => data.length > 0 && data.split('\n').length > 1;
+
+        const setLiveTransactionInterval = () => {
+            currentFirstAction.value = 0;
+            clearInterval(interval.value);
+            interval.value = window.setInterval(() => {
+                void loadTableData();
+            }, TWO_SECONDS);
+        };
+
+        const clearLiveTransactionInterval = () => {
+            clearInterval(interval.value);
+        };
+
+        onBeforeUnmount(() => {
+            clearLiveTransactionInterval();
+        });
+
+        watch([account, actions], async () => {
+            void loadTableData();
+            await changePagination(1, paginationSettings.value.rowsPerPage);
+        });
+
+        watch(filter, async () => {
+            if (paginationSettings.value.page !== 1) {
+                await changePagination(1, paginationSettings.value.rowsPerPage);
+            } else {
+                enableLiveTransactions.value = false;
+                await loadTableData();
+            }
+        });
+
+        watch(showAge, (val) => {
+            localStorage.setItem('showAge', val ? 'true' : 'false');
+        });
+
+        const updateLiveTransactionState = async () => {
+            if (enableLiveTransactions.value) {
+                clearFilters();
+                if (paginationSettings.value.page !== 1){
+                    await changePagination(1, paginationSettings.value.rowsPerPage);
+                }
+                setLiveTransactionInterval();
+            }else {
+                clearLiveTransactionInterval();
+            }
+        };
+
+        watch(enableLiveTransactions, () => {
+            void updateLiveTransactionState();
+        });
+
+        onMounted(() => {
+            void updateLiveTransactionState();
+        });
+
+        // create a watch for pagination and make sure it is called immediately
+        watch(
+            () => pagination.value,
+            async () => {
+                let pageValue = pagination.value;
+                let page = 1;
+                let size = getStoredRowSetting();
+
+                // we also allow to pass a single number as the page number
+                if (typeof pageValue === 'number') {
+                    page = pageValue;
+                } else if (typeof pageValue === 'string') {
+                    // we also allow to pass a string of two numbers: 'page,rowsPerPage'
+                    const [p, s] = pageValue.split(',');
+                    page = Number(p);
+                    size = Number(s);
+                }
+                // automatically disable live transactions on navigation from front page
+                if (page !== 1) {
+                    enableLiveTransactions.value = false;
+                }
+                await applyPagination(page, size);
+            },
+            { immediate: true },
+        );
+
+        const toggleDropdown = (ref: unknown) => {
+            const drop: QBtnDropdown = ref as QBtnDropdown;
+            drop.toggle();
+        };
+
+        const hidePopup = (ref: unknown) => {
+            const drop: QPopupProxy = ref as QPopupProxy;
+            drop.hide();
+        };
+
+        const moveTablePage = (ref: unknown, dir: 'next' | 'prev' | 'first' | 'last') => {
+            const table: QTable = ref as QTable;
+            if (dir === 'next') {
+                table.nextPage();
+            } else if (dir === 'prev') {
+                table.prevPage();
+            } else if (dir === 'first') {
+                table.firstPage();
+            } else if (dir === 'last') {
+                void changePagination(lastPage.value, paginationSettings.value.rowsPerPage);
+            }
+        };
+
+        return {
+            columns,
+            rows,
+            filteredRows,
+            loading,
+            showPagesSizes,
+            paginationSettings,
+            fromDateModel,
+            toDateModel,
+            dateDisplay,
+            actionsDisplay,
+            actionsModel,
+            auxModel,
+            accountsDisplay,
+            accountsModel,
+            showAccountFilter,
+            tokenDisplay,
+            tokenModel,
+            showTokenFilter,
+            interval,
+            showAge,
+            tableTitle,
+            lastPage,
+            hasActions,
+            filter,
+            onRequest,
+            loadTableData,
+            checkIsMultiLine,
+            filterRows,
+            totalRows,
+            pageSizeOptions,
+            changePageSize,
+            switchPageSelector,
+            applyPagination,
+            changePagination,
+            onPaginationChange,
+            clearFilters,
+            enableLiveTransactions,
+            toggleDropdown,
+            hidePopup,
+            moveTablePage,
+        };
+    },
+});
+</script>
+
+<template>
+
+<div class="row col-12 q-mt-xs justify-center text-left trx-table container-max-width">
+    <div class="row trx-table--main-container">
+        <div class="row col-12 q-mt-lg">
+            <!-- Left column-->
+            <div class="col-auto q-mr-xl justify-start trx-table--topleft-col">
+                <div class="row flex-grow-1">
+                    <div class="col">
+                        <!-- -- Title ---->
+                        <p class="trx-table--title">{{ tableTitle }}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <q-toggle
+                            v-model="showAge"
+                            left-label
+                            label="Show timestamp as relative"
+                        />
+                    </div>
+                </div>
+                <div v-if="toggleEnabled" class="row">
+                    <div class="col">
+                        <q-toggle
+                            v-model="enableLiveTransactions"
+                            left-label
+                            label="Live transactions"
+                            :disable="paginationSettings.page !== 1"
+                        />
+                    </div>
+                </div>
+            </div>
+            <!-- Right column-->
+            <div v-if="filtersEnabled" class="col trx-table--topright-col">
+                <div class="row justify-end q-mb-xl">
+                    <!-- -- Filters    ---->
+                    <div class="col-auto row flex trx-table--filter-buttons">
+                        <q-btn
+                            v-if="filter !== ''"
+                            dense
+                            flat
+                            round
+                            icon="close"
+                            color="primary"
+                            @click="clearFilters"
+                        ><span class="q-pr-sm">clear filters</span></q-btn>
+                        <q-btn-dropdown
+                            v-if="showAccountFilter"
+                            ref="accounts_dropdown"
+                            class="q-ml-xs q-mr-xs button-primary q-btn--no-text-transform"
+                            no-caps
+                            :color="accountsDisplay === '' ? 'primary': 'secondary'"
+                            :label="accountsDisplay === '' ? 'Accounts' : accountsDisplay"
+                            @click="accountsModel = ''"
+                        >
+                            <div class="q-pa-md dropdown-filter">
+                                <div class="row">
+                                    <AccountSearch v-model="accountsModel" @update:model-value="toggleDropdown($refs.accounts_dropdown)"/>
+                                </div>
+                            </div>
+                        </q-btn-dropdown>
+                        <q-btn-dropdown
+                            ref="actions_dropdown"
+                            class="q-ml-xs q-mr-xs button-primary q-btn--no-text-transform"
+                            :color="actionsDisplay === '' ? 'primary': 'secondary'"
+                            :label="actionsDisplay === '' ? 'Actions' : actionsDisplay"
+                        >
+                            <div class="q-pa-md dropdown-filter">
+                                <div class="row">
+                                    <q-input
+                                        v-model="auxModel"
+                                        filled
+                                        dense
+                                        label="actions"
+                                        placeholder="transfer, sellrex, etc."
+                                        @blur="actionsModel = auxModel; toggleDropdown($refs.actions_dropdown)"
+                                        @keyup.enter="actionsModel = auxModel; toggleDropdown($refs.actions_dropdown)"
+                                    >
+                                        <template v-slot:prepend>
+                                            <q-icon class="cursor-pointer" name="search"/>
+                                        </template>
+                                        <template v-slot:append>
+                                            <q-btn size="sm" color="primary" @click="actionsModel = auxModel; toggleDropdown($refs.actions_dropdown)">OK</q-btn>
+                                        </template>
+                                    </q-input>
+                                </div>
+                            </div>
+                        </q-btn-dropdown>
+                        <q-btn-dropdown class="q-ml-xs q-mr-xs button-primary q-btn--no-text-transform" :color="dateDisplay === '' ? 'primary': 'secondary'" :label="dateDisplay === '' ? 'Date' : dateDisplay">
+                            <div class="q-pa-md dropdown-filter">
+                                <div class="row">
+                                    <q-input
+                                        v-model="fromDateModel"
+                                        filled
+                                        dense
+                                        label="From"
+                                    >
+                                        <template v-slot:prepend>
+                                            <q-icon class="cursor-pointer" name="event">
+                                                <q-popup-proxy cover="" transition-show="scale" transition-hide="scale">
+                                                    <q-date v-model="fromDateModel" mask="YYYY-MM-DD HH:mm">
+                                                        <div class="row items-center justify-end">
+                                                            <q-btn
+                                                                v-close-popup
+                                                                label="Close"
+                                                                color="primary"
+                                                                flat
+                                                            />
+                                                        </div>
+                                                    </q-date>
+                                                </q-popup-proxy>
+                                            </q-icon>
+                                        </template>
+                                        <template v-slot:append>
+                                            <q-icon class="cursor-pointer" name="access_time">
+                                                <q-popup-proxy cover="cover" transition-show="scale" transition-hide="scale">
+                                                    <q-time v-model="fromDateModel" mask="YYYY-MM-DD HH:mm" format24h>
+                                                        <div class="row items-center justify-end">
+                                                            <q-btn
+                                                                v-close-popup
+                                                                label="Close"
+                                                                color="primary"
+                                                                flat
+                                                            />
+                                                        </div>
+                                                    </q-time>
+                                                </q-popup-proxy>
+                                            </q-icon>
+                                        </template>
+                                    </q-input>
+                                </div>
+                                <div class="row justify-center full-width q-py-xs">
+                                    <q-icon name="arrow_downward"/>
+                                </div>
+                                <div class="row">
+                                    <q-input
+                                        v-model="toDateModel"
+                                        filled
+                                        dense
+                                        label="To"
+                                    >
+                                        <template v-slot:prepend>
+                                            <q-icon class="cursor-pointer" name="event">
+                                                <q-popup-proxy cover="cover" transition-show="scale" transition-hide="scale">
+                                                    <q-date v-model="toDateModel" mask="YYYY-MM-DD HH:mm">
+                                                        <div class="row items-center justify-end">
+                                                            <q-btn
+                                                                v-close-popup
+                                                                label="Close"
+                                                                color="primary"
+                                                                flat
+                                                            />
+                                                        </div>
+                                                    </q-date>
+                                                </q-popup-proxy>
+                                            </q-icon>
+                                        </template>
+                                        <template v-slot:append>
+                                            <q-icon class="cursor-pointer" name="access_time">
+                                                <q-popup-proxy cover="" transition-show="scale" transition-hide="scale">
+                                                    <q-time v-model="toDateModel" mask="YYYY-MM-DD HH:mm" format24h>
+                                                        <div class="row items-center justify-end">
+                                                            <q-btn
+                                                                v-close-popup
+                                                                label="Close"
+                                                                color="primary"
+                                                                flat
+                                                            />
+                                                        </div>
+                                                    </q-time>
+                                                </q-popup-proxy>
+                                            </q-icon>
+                                        </template>
+                                    </q-input>
+                                </div>
+                            </div>
+                        </q-btn-dropdown>
+                        <q-btn-dropdown
+                            v-if="showTokenFilter"
+                            ref="token_dropdown"
+                            class="q-ml-xs q-mr-xs button-primary q-btn--no-text-transform"
+                            :color="!tokenDisplay ? 'primary': 'secondary'"
+                            :label="!tokenDisplay ? 'Token' : tokenDisplay"
+                        >
+                            <div class="q-pa-md dropdown-filter">
+                                <div class="row">
+                                    <TokenSearch v-model="tokenModel" @update:model-value="toggleDropdown($refs.token_dropdown)"/>
+                                </div>
+                            </div>
+                        </q-btn-dropdown>
+                    </div>
+                </div>
+                <div v-if="showPaginationExtras" class="row justify-end">
+                    Viewing {{ paginationSettings.rowsPerPage > totalRows ? totalRows : paginationSettings.rowsPerPage }}
+                    of {{ totalRows === 10000 ? ' over ' : ''}} {{ totalRows.toLocaleString() }} total transactions
+                </div>
+            </div>
+        </div>
+        <q-separator class="row col-12 q-mt-md separator"/>
+        <div class="row col-12 table-container">
+            <q-table
+                ref="main_table"
+                v-model:pagination="paginationSettings"
+                class="q-mt-lg row trx-table--fixed-layout"
+                flat
+                table-header-class="table-header"
+                hide-pagination
+                :rows="filteredRows"
+                :columns="columns"
+                :row-key="row => row.name + row.action.action_ordinal +row.transaction.id"
+                :bordered="false"
+                :square="true"
+                :loading="loading"
+                :rows-per-page-options="pageSizeOptions"
+                :dense="$q.screen.width < 1024"
+                @request="onPaginationChange"
+            >
+                <template v-slot:header="props">
+                    <q-tr :props="props">
+                        <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
+                    </q-tr>
+                </template>
+                <template v-slot:body="props">
+                    <q-tr :props="props">
+                        <q-td>
+                            <AccountFormat :account="props.row.transaction.id" :type="props.row.transaction.type"/>
+                        </q-td>
+                        <q-td>
+                            <DateField :timestamp="props.row.timestamp" :showAge="showAge"/>
+                        </q-td>
+                        <q-td>
+                            <div
+                                v-for="action in props.row.actions"
+                                :key="action.action.action_ordinal"
+                                class="row justify-left text-weight-light"
+                            >
+                                <div class="col-auto">
+                                    <div class="q-pt-xs">
+                                        <ActionFormat :action="action.action" :showTransferLabel="showTransferLabel" :account="account"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </q-td>
+                        <q-td>
+                            <DataFormat
+                                v-if="props.row.actions.length === 1"
+                                :actionData="props.row.data.data"
+                                :actionName="props.row.data.name "
+                                :use-color="false"
+                            />
+                        </q-td>
+                    </q-tr>
+                    <q-tr
+                        v-for="action in props.row.actions"
+                        v-show="props.expand"
+                        :key="action.action.action_ordinal"
+                        class="expanded-row"
+                        :props="props"
+                    >
+                        <q-td auto-width/>
+                        <q-td>
+                            <AccountFormat :account="props.row.transaction.id" :type="props.row.transaction.type"/>
+                        </q-td>
+                        <q-td>
+                            <DateField :timestamp="action.timestamp" :showAge="showAge"/>
+                        </q-td>
+                        <q-td>
+                            <div class="row justify-left text-weight-light">
+                                <ActionFormat :action="action.action"/>
+                            </div>
+                        </q-td>
+                        <q-td>
+                            <DataFormat :actionData="action.data.data" :actionName="action.data.name " :use-color="false"/>
+                        </q-td>
+                    </q-tr>
+                </template>
+            </q-table>
+        </div>
+        <div class="row col-12 items-center justify-end q-mt-md q-mb-sm">
+            <!-- records per page selector-->
+            <div class="col-auto">
+                <small>Rows per page: &nbsp; {{ paginationSettings.rowsPerPage }}</small>
+                <!-- dropdown button to select number of rows per page-->
+                <q-icon :name="showPagesSizes ? 'expand_more' : 'expand_less'" size="sm" @click="switchPageSelector">
+                    <q-popup-proxy ref="page_size_selector" transition-show="scale" transition-hide="scale">
+                        <q-list>
+                            <q-item v-for="size in pageSizeOptions" :key="size" class="cursor-pointer">
+                                <q-item-section @click="changePageSize(size); hidePopup($refs.page_size_selector)">{{ size }}</q-item-section>
+                            </q-item>
+                        </q-list>
+                    </q-popup-proxy>
+                </q-icon>
+            </div>
+            <q-space />
+            <div class="col-auto">
+                <q-btn
+                    size="sm"
+                    color="primary"
+                    outline
+                    :disable="paginationSettings.page === 1"
+                    @click="moveTablePage($refs.main_table, 'first')"
+                >
+                    First
+                </q-btn>
+
+                <q-btn
+                    size="sm"
+                    color="primary"
+                    outline
+                    class="q-mx-sm"
+                    :disable="paginationSettings.page === 1"
+                    @click="moveTablePage($refs.main_table, 'prev')"
+                >
+                    <q-icon name="chevron_left" size="xs" />
+                </q-btn>
+
+                <small>
+                    Page {{ paginationSettings.page }}
+                    {{ (showPaginationExtras && enableLiveTransactions === false) ? (lastPage === 0 ? ` of 1` : ` of ${lastPage}`) : '' }}
+                </small>
+
+                <q-btn
+                    size="sm"
+                    color="primary"
+                    outline
+                    class="q-mx-sm"
+                    :disable="paginationSettings.page === lastPage || totalRows < paginationSettings.rowsPerPage"
+                    @click="moveTablePage($refs.main_table, 'next')"
+                >
+                    <q-icon name="chevron_right" size="xs" />
+                </q-btn>
+
+                <q-btn
+                    v-if="showPaginationExtras && enableLiveTransactions === false"
+                    size="sm"
+                    color="primary"
+                    outline
+                    :disable="paginationSettings.page === lastPage || lastPage === 0"
+                    @click="moveTablePage($refs.main_table, 'last')"
+                >
+                    Last
+                </q-btn>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<style lang="sass">
+$medium:920px
+
+.trx-table--title
+  font-size: 22.75px
+  font-style: normal
+  font-weight: 400
+  line-height: 27px
+
+.trx-table--main-container
+  width: 90%
+
+.trx-table--filter-buttons
+  gap: 10px 0px
+.trx-table--fixed-layout
+  .q-table
+    table-layout: fixed
+    tbody td
+      height: 3.25rem
+      vertical-align: items-center
+    tbody td:first-child
+      word-break: break-all
+    th:nth-child(1)
+      width: 15%
+    th:nth-child(2)
+      width: 17%
+    th:nth-child(3)
+      width: 27%
+    th:nth-child(4)
+      width: 41%
+
+.q-table--no-wrap td
+  word-break: break-all
+  white-space: unset
+
+.q-table td div
+  overflow-y: clip
+  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1)
+
+  &.row-expanded
+    max-height: 1000px
+    transition: max-height 2s ease-out
+
+.expand-icon
+  padding-left: 2rem
+  cursor: pointer
+
+.table-container
+    overflow-x: auto
+
+.table-header
+    color: #000000 !important
+    opacity: 0.5
+
+.hover-dec
+  text-decoration: none
+  &:hover
+    text-decoration: underline
+
+.dropdown-filter
+  max-width: 300px
+
+.expanded-row
+  background: var(--q-color-producer-card-background)
+
+.q-btn.q-btn--no-text-transform
+  text-transform: none
+
+@media screen and (max-width: $medium)
+  .trx-table--topright-col
+    justify-content: end
+  .trx-table--topleft-col, .trx-table--topright-col
+    display: flex
+    padding-left: 16px
+    padding-right: 16px
+    min-width: 100% !important
+  .trx-table--main-container
+    width: 100%
+  .trx-table--fixed-layout
+    min-width: 620px
+    .q-table
+      table-layout: auto
+      tbody td:first-child
+        word-break: break-all
+      th:nth-child(1)
+        width: 12%
+      th:nth-child(2)
+        width: 17%
+      th:nth-child(3)
+        width: 17%
+      th:nth-child(4)
+        width: 54%
+
+@media screen and (max-width: 665px)
+  .trx-table--topleft-col, .trx-table--topright-col
+    display: block
+
+</style>
diff --git a/src/components/TransactionsTable.vue b/src/components/TransactionsTable.vue
index 41cf2b53..d83e682c 100644
--- a/src/components/TransactionsTable.vue
+++ b/src/components/TransactionsTable.vue
@@ -251,8 +251,9 @@ export default defineComponent({
         const filterRows = () => {
             filteredRows.value = rows.value;
         };
+
         const loadTableData = async (): Promise<void> => {
-            let tableData: Action[] = [];
+            let tableData: Action[];
             if (isTransaction.value) {
                 tableData = (await api.getTransaction(account.value)).actions;
             } else if (hasActions.value) {
@@ -260,21 +261,46 @@ export default defineComponent({
             } else {
                 const page = paginationSettings.value.page;
                 let limit = paginationSettings.value.rowsPerPage;
-                const notified = accountsModel.value ?? '';
-                const after = fromDateModel.value !== '' ? new Date(fromDateModel.value).toISOString() : '';
-                const before = toDateModel.value !== now ? new Date(toDateModel.value).toISOString() : '';
-                const sort = paginationSettings.value.descending ? 'desc' : 'asc';
-                const extras: {[key:string]:string} = {};
 
-                if (tokenModel.value) {
-                    extras['act.account'] = tokenModel.value.contract;
-                    // Increase limit to allow for filtering
-                    limit = limit * 3;
+                let notified = accountsModel.value ?? '';
+                let after = '';
+                let before = '';
+                if (toDateModel.value !== now) {
+                    before = new Date(toDateModel.value).toISOString();
+                }
+                if (fromDateModel.value !== '') {
+                    after = new Date(fromDateModel.value).toISOString();
                 }
+                const sort = paginationSettings.value.descending ? 'desc' : 'asc';
+
+                let extras: {[key:string]:string} | null = tokenModel.value ? { 'act.account': tokenModel.value.contract } : null;
                 if (actionsModel.value) {
-                    extras['act.name'] = actionsModel.value;
+                    extras = extras ? {
+                        ...extras,
+                        'act.name': actionsModel.value,
+                    } : {
+                        'act.name': actionsModel.value,
+                    };
+                }
+
+                if (page > 1 && currentFirstAction.value === 0) {
+                    currentFirstAction.value = rows.value[0]?.action.global_sequence;
                 }
 
+                if (currentFirstAction.value > 0) {
+                    extras = extras ? {
+                        ...extras,
+                        'global_sequence': '0-' + currentFirstAction.value.toString(),
+                    } : {
+                        'global_sequence': '0-' + currentFirstAction.value.toString(),
+                    };
+                }
+
+                // if token is selected, we need to get all transactions and filter them
+                // so we eventually will need more than the current page size
+                if (tokenModel.value) {
+                    limit = 100;
+                }
                 const response = await api.getTransactions({
                     page,
                     limit,
@@ -292,42 +318,36 @@ export default defineComponent({
             if (tableData) {
                 if (tokenModel.value) {
                     tableData = tableData.filter(
-                        item => (item.act.data as {quantity?:string})?.quantity?.includes(tokenModel.value.symbol),
+                        item => (item.act.data as {quantity?:string}).quantity?.includes(tokenModel.value.symbol),
                     );
-                }
 
-                const flattenedData: TransactionTableRow[] = [];
-                tableData.forEach((action) => {
-                    const actionsArray = action.act?.data ? [action] : [];
-                    actionsArray.forEach((act) => {
-                        flattenedData.push({
-                            name: act.trx_id,
-                            transaction: { id: act.trx_id, type: 'transaction' },
-                            timestamp: act['@timestamp'] || act.timestamp,
-                            action: act,
-                            data: {
-                                data: act.act.data,
-                                name: act.act.name,
-                            },
-                            actions: actionsArray.map(a => ({
-                                name: a.trx_id,
-                                transaction: { id: a.trx_id, type: 'transaction' },
-                                timestamp: a['@timestamp'] || a.timestamp,
-                                action: a,
-                                data: {
-                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                                    data: a.act.data,
-                                    name: a.act.name,
-                                },
-                            })),
-                        });
-                    });
-                });
+                    // take only the first aginationSettings.value.rowsPerPage items
+                    tableData = tableData.slice(0, paginationSettings.value.rowsPerPage);
+                }
 
-                // Apply pagination after filtering
-                const startIndex = (paginationSettings.value.page - 1) * paginationSettings.value.rowsPerPage;
-                rows.value = flattenedData.slice(startIndex, startIndex + paginationSettings.value.rowsPerPage);
-                totalRows.value = flattenedData.length;
+                rows.value = tableData.map(item => ({
+                    name: item.trx_id,
+                    transaction: { id: item.trx_id, type: 'transaction' },
+                    timestamp: item['@timestamp'] || item.timestamp,
+                    action: item,
+                    data: hasActions.value
+                        ? { data: item.data, name: item.account }
+                        : { data: item.act.data, name: item.act.name },
+                    actions: [
+                        {
+                            name: item.trx_id,
+                            transaction: { id: item.trx_id, type: 'transaction' },
+                            timestamp: item['@timestamp'],
+                            action: item,
+                            data: hasActions.value
+                                ? {
+                                    data: item.data,
+                                    name: item.account,
+                                }
+                                : { data: item.act.data as unknown, name: item.act.name },
+                        },
+                    ],
+                }));
             }
             void filterRows();
         };
diff --git a/src/pages/Block.vue b/src/pages/Block.vue
index 221c1328..ae32134f 100644
--- a/src/pages/Block.vue
+++ b/src/pages/Block.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, watch } from 'vue';
-import TransactionTable from 'src/components/TransactionsTable.vue';
+import BlockTransactionsTable from 'src/components/BlockTransactionsTable.vue';
 import BlockCard from 'components/BlockCard.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { api } from 'src/api';
@@ -78,7 +78,7 @@ export default defineComponent({
         };
     },
     components: {
-        TransactionTable,
+        BlockTransactionsTable,
         BlockCard,
     },
 });
@@ -112,7 +112,7 @@ export default defineComponent({
         </div>
     </div>
     <div class="q-pt-lg container-max-width">
-        <TransactionTable :actions="Actions" :toggleEnabled="false"/>
+        <BlockTransactionsTable :actions="Actions" :toggleEnabled="false"/>
     </div>
 </div>
 
diff --git a/src/pages/TransactionPage.vue b/src/pages/TransactionPage.vue
index 4a174b08..20b23c16 100644
--- a/src/pages/TransactionPage.vue
+++ b/src/pages/TransactionPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, computed, watch } from 'vue';
-import TransactionsTable from 'src/components/TransactionsTable.vue';
+import BlockTransactionsTable from 'src/components/BlockTransactionsTable.vue';
 import TransactionCard from 'components/transaction/TransactionCard.vue';
 import TraceTree from 'components/transaction/TraceTree.vue';
 import JsonViewer from 'vue-json-viewer';
@@ -35,7 +35,7 @@ export default defineComponent({
         };
     },
     components: {
-        TransactionsTable,
+        BlockTransactionsTable,
         TransactionCard,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         JsonViewer,
@@ -103,7 +103,7 @@ export default defineComponent({
             <q-separator color="grey-8"/>
             <q-tab-panels v-model="tab" class="tab-panel">
                 <q-tab-panel name="actions">
-                    <TransactionsTable :account="Array.isArray(transaction) ? transaction[0] : transaction" :toggleEnabled="false" />
+                    <BlockTransactionsTable :account="Array.isArray(transaction) ? transaction[0] : transaction" :toggleEnabled="false" />
                 </q-tab-panel>
                 <q-tab-panel name="traces" class="container-max-width">
                     <TraceTree/>