diff --git a/src/boot/errorHandling.js b/src/boot/errorHandling.js
index a00beaf9..0308ab84 100644
--- a/src/boot/errorHandling.js
+++ b/src/boot/errorHandling.js
@@ -23,7 +23,7 @@ const errorNotification = function(error, dismiss = false) {
         timeout: dismiss ? 0 : 5000,
         message: `${errorStr}`,
         actions: dismiss ? [
-            { label: this.$t('notification.dismiss_label'), color: 'white' },
+            { label: $t('notification.dismiss_label'), color: 'white' },
         ] : [],
     });
 };
@@ -54,6 +54,10 @@ const successNotification = function(message) {
 
 // ---------- new notification layouts ---------------
 
+let $t = function(message) {
+    return message;
+};
+
 class NotificationAction {
     constructor(payload) {
         this.label     = payload.label;
@@ -70,6 +74,13 @@ const infoIcon  = require('src/assets/icon--info.svg');
 const checkIcon = require('src/assets/icon--check.svg');
 const discoIcon = require('src/assets/icon--disconnected.svg');
 const warningIcon = require('src/assets/icon--warning.svg');
+const icons = {
+    cross: crossIcon,
+    info: infoIcon,
+    check: checkIcon,
+    disco: discoIcon,
+    warning: warningIcon,
+};
 
 const html = `
     <div class="c-notify__container c-notify__container--{type} c-notify__container--{random}">
@@ -92,11 +103,11 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
     // action buttons
     const actions = [];
     const dismiss_btn = {
-        label: this.$t('notification.dismiss_label'),
+        label: $t('notification.dismiss_label'),
         class: 'c-notify__action-btn',
     };
     const link_btn = {
-        label: this.$t('notification.success_see_trx_label'),
+        label: $t('notification.success_see_trx_label'),
         color: 'positive',
         iconRight: 'launch',
         class: 'c-notify__action-btn',
@@ -105,7 +116,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
         },
     };
     const details_btn = {
-        label: this.$t('notification.error_see_details_label'),
+        label: $t('notification.error_see_details_label'),
         class: 'c-notify__action-btn ',
         handler: () => {
             let content = '';
@@ -135,14 +146,14 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
 
             Dialog.create({
                 class: 'c-notify__dialog',
-                title: this.$t('notification.error_details_title'),
+                title: $t('notification.error_details_title'),
                 message: '<q-card-section>' + content + '</q-card-section>',
                 html: true,
             });
         },
     };
     const action_btn = {
-        label: this.$t(payload?.label ?? '') ?? this.$t('notification.error_see_details_label'),
+        label: $t(payload?.label ?? '') ?? $t('notification.error_see_details_label'),
         color: payload?.color ?? type === 'error' ? 'negative' : 'positive',
         iconRight: payload?.iconRight,
         class: 'c-notify__action-btn ' + payload?.class ? payload?.class : '',
@@ -172,7 +183,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
         actions.splice(0, actions.length);
     }
 
-    let final_message = '<span>' + this.$t(message.toString() ?? '') + '</span>';
+    let final_message = '<span>' + $t(message.toString() ?? '') + '</span>';
     if (Array.isArray(message)) {
         final_message = message.map(
             m => ` <${m.tag ?? 'span'} class="${m.class}">${m.text}</${m.tag ?? 'span'}> `,
@@ -208,7 +219,7 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
         '{random}': random,
         '{remember}': remember,
         '{message}': final_message,
-        '{remember-my-choice}': this.$t('notification.dont_show_message_again'),
+        '{remember-my-choice}': $t('notification.dont_show_message_again'),
     };
 
     const finalHtml = replaceAllOccurrences(html, replacements);
@@ -225,75 +236,75 @@ const notifyMessage = function(type, icon, title, message, payload, remember = '
 };
 
 const notifySuccessTransaction = function(link) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'success',
         checkIcon,
-        this.$t('notification.success_title_trx').toUpperCase(),
-        this.$t('notification.success_message_trx'),
+        $t('notification.success_title_trx').toUpperCase(),
+        $t('notification.success_message_trx'),
         link,
     );
 };
 
 const notifySuccessMessage = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'success',
         checkIcon,
-        this.$t('notification.success_title_trx').toUpperCase(),
+        $t('notification.success_title_trx').toUpperCase(),
         message,
         payload,
     );
 };
 
 const notifySuccessCopy = function() {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'success',
         checkIcon,
-        this.$t('notification.success_title_copied').toUpperCase(),
-        this.$t('notification.success_message_copied'),
+        $t('notification.success_title_copied').toUpperCase(),
+        $t('notification.success_message_copied'),
     );
 };
 
 const notifyFailure = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         crossIcon,
-        this.$t('notification.error_title').toUpperCase(),
+        $t('notification.error_title').toUpperCase(),
         message,
         payload,
     );
 };
 
 const notifyFailureWithAction = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         crossIcon,
-        this.$t('notification.error_title').toUpperCase(),
+        $t('notification.error_title').toUpperCase(),
         message,
         new NotificationAction(payload),
     );
 };
 
 const notifyWarningWithAction = function(message, payload) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         warningIcon,
-        this.$t('notification.warning_title').toUpperCase(),
+        $t('notification.warning_title').toUpperCase(),
         message,
         new NotificationAction(payload),
     );
 };
 
 const notifyDisconnected = function() {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'error',
         discoIcon,
-        this.$t('notification.error_title_disconnect'),
-        this.$t('notification.error_message_disconnect'),
+        $t('notification.error_title_disconnect'),
+        $t('notification.error_message_disconnect'),
     );
 };
 
 const notifyNeutralMessage = function(message) {
-    return notifyMessage.bind(this)(
+    return notifyMessage (
         'neutral',
         null,
         null,
@@ -308,7 +319,7 @@ const notifyRememberInfo = function(title, message, payload, key) {
     if (dismissed[id]) {
         return;
     }
-    const notification = notifyMessage.bind(this)(
+    const notification = notifyMessage (
         'info',
         infoIcon,
         title,
@@ -342,25 +353,25 @@ const notifyRememberInfo = function(title, message, payload, key) {
 
 
 export default boot(({ app, store }) => {
-    app.config.globalProperties.$errorNotification           = errorNotification.bind(store);
-    app.config.globalProperties.$unexpectedErrorNotification = unexpectedErrorNotification.bind(store);
-    app.config.globalProperties.$warningNotification         = warningNotification.bind(store);
-    app.config.globalProperties.$successNotification         = successNotification.bind(store);
+    app.config.globalProperties.$errorNotification           = errorNotification;
+    app.config.globalProperties.$unexpectedErrorNotification = unexpectedErrorNotification;
+    app.config.globalProperties.$warningNotification         = warningNotification;
+    app.config.globalProperties.$successNotification         = successNotification;
     store['$errorNotification']                              = app.config.globalProperties.$errorNotification;
     store['$unexpectedErrorNotification']                    = app.config.globalProperties.$unexpectedErrorNotification;
     store['$warningNotification']                            = app.config.globalProperties.$warningNotification;
     store['$successNotification']                            = app.config.globalProperties.$successNotification;
 
     // new Message notifications handlers
-    app.config.globalProperties.$notifySuccessTransaction = notifySuccessTransaction.bind(store);
-    app.config.globalProperties.$notifySuccessMessage     = notifySuccessMessage.bind(store);
-    app.config.globalProperties.$notifySuccessCopy        = notifySuccessCopy.bind(store);
-    app.config.globalProperties.$notifyFailure            = notifyFailure.bind(store);
-    app.config.globalProperties.$notifyFailureWithAction  = notifyFailureWithAction.bind(store);
-    app.config.globalProperties.$notifyWarningWithAction  = notifyWarningWithAction.bind(store);
-    app.config.globalProperties.$notifyDisconnected       = notifyDisconnected.bind(store);
-    app.config.globalProperties.$notifyNeutralMessage     = notifyNeutralMessage.bind(store);
-    app.config.globalProperties.$notifyRememberInfo       = notifyRememberInfo.bind(store);
+    app.config.globalProperties.$notifySuccessTransaction = notifySuccessTransaction;
+    app.config.globalProperties.$notifySuccessMessage     = notifySuccessMessage;
+    app.config.globalProperties.$notifySuccessCopy        = notifySuccessCopy;
+    app.config.globalProperties.$notifyFailure            = notifyFailure;
+    app.config.globalProperties.$notifyFailureWithAction  = notifyFailureWithAction;
+    app.config.globalProperties.$notifyWarningWithAction  = notifyWarningWithAction;
+    app.config.globalProperties.$notifyDisconnected       = notifyDisconnected;
+    app.config.globalProperties.$notifyNeutralMessage     = notifyNeutralMessage;
+    app.config.globalProperties.$notifyRememberInfo       = notifyRememberInfo;
     store['$notifySuccessTransaction']                    = app.config.globalProperties.$notifySuccessTransaction;
     store['$notifySuccessMessage']                        = app.config.globalProperties.$notifySuccessMessage;
     store['$notifySuccessCopy']                           = app.config.globalProperties.$notifySuccessCopy;
@@ -373,7 +384,7 @@ export default boot(({ app, store }) => {
 
     // transaction notifications handlers
     store['$t'] = app.config.globalProperties.$t;
-
+    $t          = app.config.globalProperties.$t;
 });
 
 export {
@@ -386,7 +397,11 @@ export {
     notifySuccessCopy,
     notifyFailure,
     notifyFailureWithAction,
+    notifyWarningWithAction,
     notifyDisconnected,
     notifyNeutralMessage,
     notifyRememberInfo,
+    notifyMessage,
+    icons,
+    NotificationAction,
 };
diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
index d23f71aa..d2f63945 100644
--- a/src/components/AddressField.vue
+++ b/src/components/AddressField.vue
@@ -7,13 +7,9 @@ import { getIcon } from 'src/lib/token-utils';
 import { toChecksumAddress } from 'src/lib/utils';
 
 import CopyButton from 'components/CopyButton.vue';
+import { useStore } from 'vuex';
 
 const props = defineProps({
-    highlightAddress: {
-        type: String,
-        required: false,
-        default: '',
-    },
     address: {
         type: String,
         required: true,
@@ -38,9 +34,12 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    useHighlight: {
+        type: Boolean,
+        default: true,
+    },
 });
 
-const emit = defineEmits(['highlight']);
 
 const displayName = ref('');
 const fullName = ref(toChecksumAddress(props.address));
@@ -61,7 +60,9 @@ const restart = async () => {
     await getDisplay();
 };
 
-
+const $store = useStore();
+const setHighlightAddress = (method: string) => props.useHighlight ? $store.dispatch('general/setHighlightAddress', method) : null;
+const highlightAddress = computed(() => props.useHighlight ? $store.state.general.highlightAddress : '');
 
 watch(() => props.address, async () => {
     restart();
@@ -90,6 +91,7 @@ const getDisplay = async () => {
         return;
     }
     let address = toChecksumAddress(props.address);
+    fullName.value = address;
     if (contractName.value) {
         if(tokenList.value?.tokens){
             tokenList.value.tokens.forEach((token: any) => {
@@ -125,18 +127,14 @@ const loadContract = async () => {
     }
 };
 
-function emitHighlight(val: string) {
-    emit('highlight', val);
-}
-
 </script>
 
 <template>
 <div
     :key="displayName + checksum"
     :class="['c-address-field', props.class]"
-    @mouseover="emitHighlight(checksum)"
-    @mouseleave="emitHighlight('')"
+    @mouseover="setHighlightAddress(checksum)"
+    @mouseleave="setHighlightAddress('')"
 >
     <router-link
         :to="`/${isToken?'token':'address'}/${checksum}`"
diff --git a/src/components/AddressOverview.vue b/src/components/AddressOverview.vue
index 2276f1cf..9f087b91 100644
--- a/src/components/AddressOverview.vue
+++ b/src/components/AddressOverview.vue
@@ -51,6 +51,11 @@ onBeforeMount(() => {
                     width="18"
                 >
                 {{ getBalanceDisplay(tokenQty) }}
+                <ValueField
+                    :value="tokenQty"
+                    :symbol="'TLOS'"
+                    :decimals="WEI_PRECISION"
+                />
             </div>
         </q-card-section>
         <q-card-section v-if="!loadingComplete" >
diff --git a/src/components/ContractMoreInfo.vue b/src/components/ContractMoreInfo.vue
index c7d1286b..332772b8 100644
--- a/src/components/ContractMoreInfo.vue
+++ b/src/components/ContractMoreInfo.vue
@@ -36,6 +36,7 @@ const props = defineProps({
         <AddressField
             :address="props.address"
             :truncate="18"
+            :useHighlight="false"
         />
         <CopyButton
             :text="props.address"
diff --git a/src/components/ContractTab/ContractInterface.vue b/src/components/ContractTab/ContractInterface.vue
index 3d332fb7..e02dab28 100644
--- a/src/components/ContractTab/ContractInterface.vue
+++ b/src/components/ContractTab/ContractInterface.vue
@@ -43,7 +43,7 @@ onMounted(async () => {
 </script>
 
 <template>
-<div class="q-pt-md">
+<div class="c-contract-interface q-pt-md">
     <AppHeaderWallet v-if="props.write" class="c-login-button c-contract-interface__login"/>
     <q-list class="c-contract-interface__container">
         <q-expansion-item
@@ -81,6 +81,13 @@ onMounted(async () => {
         margin-bottom: 0.75rem !important;
         margin-left: 1rem;
     }
+
+    .q-item__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
+
 </style>
diff --git a/src/components/InternalTransactionFlatTable.vue b/src/components/InternalTransactionFlatTable.vue
new file mode 100644
index 00000000..e6bd33ae
--- /dev/null
+++ b/src/components/InternalTransactionFlatTable.vue
@@ -0,0 +1,629 @@
+<script>
+import BlockField from 'components/BlockField';
+import DateField from 'components/DateField';
+import TransactionField from 'components/TransactionField';
+import AddressField from 'components/AddressField';
+import ValueField from 'components/ValueField.vue';
+import { getDirection } from 'src/lib/transaction-utils';
+import { WEI_PRECISION, formatWei } from 'src/lib/utils';
+import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
+
+export default {
+    name: 'InternalTransactionFlatTable',
+    components: {
+        TransactionField,
+        AddressField,
+        DateField,
+        BlockField,
+        ValueField,
+    },
+    props: {
+        address: {
+            type: String,
+            required: true,
+        },
+        page: {
+            type: Number,
+        },
+        pagesize: {
+            type: Number,
+        },
+        filter: {
+            type: Object,
+            default: () => ({}),
+        },
+        initialPageSize: {
+            type: Number,
+            default: 1,
+        },
+        usePagination: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        const columns = [
+            {
+                name: 'hash',
+                label: 'hash',
+                align: 'left',
+            },
+            {
+                name: 'block',
+                label: 'block',
+                align: 'left',
+            },
+            {
+                name: 'date',
+                label: 'date',
+                align: 'left',
+            },
+            {
+                name: 'type',
+                label: 'type',
+                align: 'left',
+            },
+            {
+                name: 'from',
+                label: 'from',
+                align: 'left',
+            },
+            {
+                name: 'direction',
+                label: 'direction',
+                align: 'left',
+            },
+            {
+                name: 'to',
+                label: 'to',
+                align: 'left',
+            },
+            {
+                name: 'value',
+                label: 'value',
+                align: 'right',
+            },
+            {
+                name: 'count',
+                label: 'count',
+                align: 'right',
+            },
+        ];
+
+        return {
+            rows: [],
+            loadingRows: [],
+            columns,
+            transactions: [],
+            pageSize: this.initialPageSize,
+            loading: false,
+            pagination: {
+                sortBy: 'date',
+                descending: true,
+                page: 1,
+                rowsPerPage: 10,
+                rowsNumber: 0,
+            },
+            page_size_options: [10, 20, 50],
+            showDateAge: true,
+            allExpanded: false,
+        };
+    },
+    async created() {
+        // initialization of the translated texts
+        this.columns.filter(t => t.name === 'hash')[0].label = this.$t('components.tx_hash');
+        this.columns.filter(t => t.name === 'block')[0].label = this.$t('components.block');
+        this.columns.filter(t => t.name === 'date')[0].label = this.$t('components.age');
+        this.columns.filter(t => t.name === 'type')[0].label = this.$t('components.approvals.type');
+        this.columns.filter(t => t.name === 'from')[0].label = this.$t('pages.from');
+        this.columns.filter(t => t.name === 'to')[0].label = this.$t('pages.to');
+        this.columns.filter(t => t.name === 'value')[0].label = this.$t('pages.value');
+        this.columns.filter(t => t.name === 'count')[0].label = this.$t('pages.count');
+        if (!this.usePagination) {
+            this.pagination.rowsPerPage = 25;
+            // we need to remove type and count columns
+            this.columns = this.columns.filter(col => col.name !== 'type');
+            this.columns = this.columns.filter(col => col.name !== 'count');
+        }
+        this.loadAllExpanded();
+        this.updateLoadingRows();
+    },
+    watch: {
+        '$route.query.page': {
+            handler(_pag) {
+                let pag = _pag;
+                let page = 1;
+                let size = this.page_size_options[0];
+
+                // we also allow to pass a single number as the page number
+                if (typeof pag === 'number') {
+                    page = pag;
+                } else if (typeof pag === 'string') {
+                    // we also allow to pass a string of two numbers: 'page,rowsPerPage'
+                    const [p, s] = pag.split(',');
+                    page = p;
+                    size = s;
+                }
+
+                this.setPagination(page, size);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        getDirection: getDirection,
+        updateLoadingRows() {
+            this.loadingRows = [];
+            for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
+                this.loadingRows.push(i);
+            }
+        },
+        popstate(event) {
+            const page = event.state.pagination.page;
+            const size = event.state.pagination.size;
+            this.setPagination(page, size);
+        },
+        setPagination(page, size) {
+            if (page) {
+                this.pagination.page = Number(page);
+            }
+
+            if (this.usePagination) {
+                if (size) {
+                    this.pagination.rowsPerPage = Number(size);
+                }
+            } else {
+                this.pagination.rowsPerPage = 0;
+            }
+
+            this.updateLoadingRows();
+            this.onRequest({
+                pagination: this.pagination,
+            });
+        },
+        async onPaginationChange(props) {
+            const { page, rowsPerPage } = props.pagination;
+
+            // we need to change the URL to keep the pagination state by changing the this.$route.query.page
+            // with a string like 'page,rowsPerPage'
+            this.$router.push({
+                // taking care to preserve the current #hash anchor and the current query parameters
+                hash: window.location.hash,
+                query: {
+                    ...this.$route.query,
+                    page: `${page},${rowsPerPage}`,
+                },
+            });
+        },
+        async onRequest(props) {
+            this.loading = true;
+            // this line cleans the table for a second and the components have to be created again (clean)
+            this.rows = [];
+            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+            const path = this.getPath(props);
+            let result = await this.$indexerApi.get(path);
+            if (!this.pagination.rowsNumber) {
+                this.pagination.rowsNumber = result.data.total_count;
+            }
+            this.pagination.page = page;
+            this.pagination.rowsPerPage = rowsPerPage;
+            this.pagination.sortBy = sortBy;
+            this.pagination.descending = descending;
+            this.transactions = [...result.data.results];
+            let totalTraces = 0;
+            let processedTransactions = 0;
+            for (const transaction of this.transactions) {
+                try {
+                    transaction.transfer = false;
+                    transaction.value = formatWei(transaction.value.toLocaleString(0, { useGrouping: false }), 18);
+                    if (transaction.input === '0x') {
+                        continue;
+                    }
+                    if(!transaction.to) {
+                        continue;
+                    }
+                    const contract = await this.$contractManager.getContract(
+                        transaction.to,
+                    );
+                    if (!contract) {
+                        continue;
+                    }
+                    if (totalTraces >= 25 && !this.usePagination) {
+                        // we already have enough data
+                        break;
+                    }
+                    let traces = await this.$indexerApi.get(
+                        '/transaction/' + transaction.hash + '/internal?limit=1000&sort=ASC&offset=0&includeAbi=1',
+                    );
+                    for(const trace of [...traces.data.results]){
+                        trace.hash = trace.transactionHash;
+                    }
+                    transaction.traces = traces.data?.results;
+                    totalTraces += +transaction.traces?.length;
+                    transaction.contract = contract;
+                    transaction.contractAddress = contract.address;
+                    const parsedTransaction = await this.$contractManager.parseContractTransaction(
+                        transaction,
+                        transaction.input,
+                        contract,
+                    );
+                    transaction.parsedTransaction = parsedTransaction;
+                    // Get ERC20 transfer from main function call
+                    let signature = transaction.input.substring(0, 10);
+                    if (
+                        signature &&
+                        TRANSFER_SIGNATURES.includes(signature) &&
+                        transaction.parsedTransaction.args['amount']
+                    ) {
+                        let decimals = transaction.contract.properties?.decimals;
+                        if(transaction.contract && decimals){
+                            transaction.transfer = {
+                                'value': `${formatWei(transaction.parsedTransaction.args['amount'], decimals)}`,
+                                'symbol': transaction.contract.properties.symbol,
+                            };
+                        }
+                    }
+
+                    processedTransactions++;
+                    const entries = [];
+                    transaction.traces.forEach((trace) => {
+                        const entry = {
+                            trx: processedTransactions % 2 === 0 ? 'even' : 'odd',
+                            hash: transaction.hash,
+                            blockNumber: transaction.blockNumber,
+                            timestamp: transaction.timestamp,
+                            type: trace.action.callType,
+                            from: trace.action.from,
+                            to: trace.action.to,
+                            value: trace.action.value,
+                            symbol: 'TLOS',
+                            decimals: WEI_PRECISION,
+                        };
+                        entries.push(entry);
+                    });
+
+                    if (this.usePagination) {
+                        const entry = {
+                            trx: processedTransactions % 2 === 0 ? 'even' : 'odd',
+                            hash: transaction.hash,
+                            blockNumber: transaction.blockNumber,
+                            timestamp: transaction.timestamp,
+                            type: entries[0].type,
+                            from: transaction.from,
+                            to: transaction.to,
+                            value: transaction.value,
+                            symbol: 'TLOS',
+                            decimals: WEI_PRECISION,
+                            traces: entries,
+                            expand: true,
+                        };
+                        this.rows.push(entry);
+                    } else {
+                        this.rows = this.rows.concat(entries);
+                        // we make sure there are no more than 25 rows.
+                        // If we have more than 25 rows, we discard the rest
+                        if (this.rows.length > 25) {
+                            this.rows = this.rows.slice(0, 25);
+                        }
+                    }
+
+                } catch (e) {
+                    console.error(
+                        `Failed to parse data for transaction, error was: ${e.message}`,
+                    );
+                    // notifiy user
+                    this.$q.notify({
+                        message: this.$t('components.failed_to_parse_transaction', { message: e.message }),
+                        color: 'negative',
+                        position: 'top',
+                        timeout: 5000,
+                    });
+                }
+            }
+            this.rows.forEach((row) => {
+                row.expand = this.allExpanded;
+            });
+            this.loading = false;
+        },
+        getPath(props) {
+            const { page, rowsPerPage, descending } = props.pagination;
+            let path;
+            const filter = Object.assign({}, this.filter ? this.filter : {});
+            if (this.address) {
+                path = `/address/${this.address}/transactions`;
+            } else {
+                path = '/transactions';
+            }
+            path += `?limit=${
+                rowsPerPage === 0 ? 25 : rowsPerPage
+            }`;
+
+            if (filter.block) {
+                path += `&block=${filter.block}`;
+            }
+
+            if (filter.hash) {
+                path += `&hash=${filter.hash}`;
+            }
+
+            path += `&offset=${(page - 1) * rowsPerPage}`;
+            path += `&sort=${descending ? 'desc' : 'asc'}`;
+            path += '&includeAbi=1&full=1';
+
+            path += (!this.pagination.rowsNumber) ? '&includePagination=true' : '';  // We only need the count once
+
+            return path;
+        },
+        toggleDateFormat() {
+            this.showDateAge = !this.showDateAge;
+        },
+        toggleAllExpanded() {
+            this.allExpanded = !this.allExpanded;
+            this.rows.forEach((row) => {
+                row.expand = this.allExpanded;
+            });
+            this.saveAllExpanded();
+        },
+        loadAllExpanded() {
+            // we look for the local Storage to see if the user has already expanded all the rows
+            const allExpanded = localStorage.getItem('allExpanded');
+            if (allExpanded) {
+                this.allExpanded = allExpanded === 'true';
+            }
+        },
+        saveAllExpanded() {
+            // we save the state of the allExpanded variable in the local storage
+            localStorage.setItem('allExpanded', this.allExpanded);
+        },
+    },
+};
+</script>
+
+<template>
+<q-table
+    v-model:pagination="pagination"
+    class="c-inttrx-flat__table"
+    :rows="loading? loadingRows : rows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-options="page_size_options"
+    @request="onPaginationChange"
+>
+    <template v-if="!usePagination" v-slot:bottom>
+        <q-card-actions
+            align="center"
+            class="c-inttrx-flat__footer"
+        >
+            <router-link class="c-inttrx-flat__footer-container" :to="{ name: 'txsinternal', query: { a: address } }">
+                <span class="c-inttrx-flat__footer-text"> See all transactions </span>
+                <q-icon name="arrow_forward" class="c-inttrx-flat__footer-icon" />
+            </router-link>
+        </q-card-actions>
+    </template>
+    <template v-slot:header="props">
+        <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <template v-if="col.name === 'date'" >
+                    <div class="c-inttrx-flat__header-age u-flex--center-y" @click="toggleDateFormat">
+                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
+                        <q-icon
+                            class="info-icon"
+                            name="far fa-question-circle"
+                        >
+                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                                {{ $t('components.click_to_change_format') }}
+                            </q-tooltip>
+                        </q-icon>
+                    </div>
+                </template>
+
+                <div v-else-if="col.name === 'count'">
+                    {{ col.label }}
+                    <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                        {{ $t('pages.internal_txns') }}
+                    </q-tooltip>
+                </div>
+                <div v-else>
+                    {{ col.label }}
+                </div>
+            </q-th>
+            <q-th v-if="usePagination" auto-width>
+                <q-btn
+                    :icon="allExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                    flat
+                    round
+                    dense
+                    @click="toggleAllExpanded()"
+                >
+                    <q-tooltip>{{ allExpanded ? $t('components.collapse_all') : $t('components.expand_all') }}</q-tooltip>
+                </q-btn>
+            </q-th>
+        </q-tr>
+    </template>
+    <template v-slot:body="props">
+        <template v-if="loading">
+            <q-tr>
+                <!-- we need to iterate 7 times if usePagination and 10 times if not -->
+                <q-td
+                    v-for="i in (usePagination ? 10 : 7)"
+                    :key="i"
+                >
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+            </q-tr>
+        </template>
+        <template v-else>
+            <q-tr :props="props" :class="props.row.trx">
+                <q-td key="hash" :props="props">
+                    <TransactionField :transaction-hash="props.row.hash" :useHighlight="true"/>
+                </q-td>
+                <q-td key="block" :props="props">
+                    <BlockField :block="props.row.blockNumber"/>
+                </q-td>
+                <q-td key="date" :props="props">
+                    <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
+                </q-td>
+                <q-td key="type" :props="props">
+                    {{ props.row.type }}
+                </q-td>
+                <q-td key="from" :props="props">
+                    <AddressField
+                        v-if="props.row.from"
+                        :key="props.row.from"
+                        :address="props.row.from"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="direction" :props="props">
+                    <span
+                        :class="`direction ${getDirection(address, props.row)}`"
+                    >
+                        {{ $t(`components.transaction.${getDirection(address, props.row)}`).toUpperCase() }}
+                    </span>
+                </q-td>
+                <q-td key="to" :props="props">
+                    <AddressField
+                        v-if="props.row.to"
+                        :key="props.row.to"
+                        :address="props.row.to"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="value" :props="props">
+                    <ValueField
+                        :value="props.row.value"
+                        :symbol="props.row.symbol"
+                        :decimals="props.row.decimals"
+                    />
+                </q-td>
+                <q-td key="count" :props="props">
+                    {{ props.row.traces.length }}
+                </q-td>
+                <q-td v-if="usePagination" auto-width>
+                    <!-- we need a switch to expand the rows below -->
+                    <q-btn
+                        :icon="props.row.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                        flat
+                        round
+                        dense
+                        @click="props.row.expand = !props.row.expand"
+                    />
+                </q-td>
+            </q-tr>
+            <q-tr
+                v-for="(trace, index) in props.row.traces"
+                v-show="props.row.expand"
+                :key="`${trace.hash}-${index}`"
+                :props="props"
+                :class="props.row.trx"
+            >
+                <q-td key="hash" :props="props">
+                    <TransactionField :transaction-hash="trace.hash" :useHighlight="true"/>
+                </q-td>
+                <q-td key="block" :props="props">
+                    <BlockField :block="trace.blockNumber"/>
+                </q-td>
+                <q-td key="date" :props="props">
+                    <DateField :epoch="(trace.timestamp / 1000)" :force-show-age="showDateAge"/>
+                </q-td>
+                <q-td key="type" :props="props">
+                    {{ trace.type }}
+                </q-td>
+                <q-td key="from" :props="props">
+                    <AddressField
+                        v-if="trace.from"
+                        :key="trace.from"
+                        :address="trace.from"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="direction" :props="props">
+                    <span
+                        :class="`direction ${getDirection(address, trace)}`"
+                    >
+                        {{ $t(`components.transaction.${getDirection(address, trace)}`).toUpperCase() }}
+                    </span>
+                </q-td>
+                <q-td key="to" :props="props">
+                    <AddressField
+                        v-if="trace.to"
+                        :key="trace.to"
+                        :address="trace.to"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td key="value" :props="props">
+                    <ValueField
+                        :value="trace.value"
+                        :symbol="trace.symbol"
+                        :decimals="trace.decimals"
+                    />
+                </q-td>
+                <q-td key="count" :props="props" />
+                <q-td v-if="usePagination" auto-width/>
+            </q-tr>
+        </template>
+    </template>
+</q-table>
+</template>
+<style lang="scss">
+
+.odd {
+    background-color: var(--odd-row-bg-color);
+}
+
+.direction {
+  @include direction;
+}
+
+.c-inttrx-flat {
+    .info-icon{
+        margin-left: .25rem;
+        padding-bottom: 0.2rem;
+    }
+
+
+
+    &__table {
+        .q-table__bottom {
+            position: relative;
+        }
+    }
+    &__header-age {
+        gap: 5px;
+    }
+    &__footer {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+        display: flex;
+        gap: 5px;
+        background-color: color-mix(in srgb, white, black 5%);
+
+        &-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+        }
+
+        body.body--dark & {
+            background-color: color-mix(in srgb, $dark, white 5%);
+        }
+
+        &-text {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+        }
+        &:hover {
+            color: var(--q-primary);
+        }
+    }
+
+}
+
+
+</style>
diff --git a/src/components/InternalTransactionTable.vue b/src/components/InternalTransactionTable.vue
index 8a992698..4e16c2ee 100644
--- a/src/components/InternalTransactionTable.vue
+++ b/src/components/InternalTransactionTable.vue
@@ -187,7 +187,7 @@ export default {
                         '/transaction/' + transaction.hash + '/internal?limit=1000&sort=ASC&offset=0&includeAbi=1',
                     );
                     for(const trace of [...traces.data.results]){
-                        trace.hash = trace.transaction_hash;
+                        trace.hash = trace.transactionHash;
                     }
                     transaction.traces = traces.data?.results;
                     transaction.contract = contract;
diff --git a/src/components/MethodField.vue b/src/components/MethodField.vue
index 3459ad1c..faa92f0b 100644
--- a/src/components/MethodField.vue
+++ b/src/components/MethodField.vue
@@ -3,15 +3,11 @@ import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { ZERO_ADDRESSES } from 'src/lib/utils';
+import { useStore } from 'vuex';
 
 const { t: $t } = useI18n();
 
 const props = defineProps({
-    highlightMethod: {
-        type: String,
-        required: false,
-        default: '',
-    },
     trx: {
         type: Object as () => {
             parsedTransaction?: {
@@ -38,13 +34,19 @@ const props = defineProps({
         type: Object,
         default: () => null,
     },
+    useHighlight: {
+        type: Boolean,
+        default: true,
+    },
 });
 
-const emit = defineEmits(['highlight']);
-
 const methodName = ref('');
 const nativeTooltipText = ref('');
 
+const $store = useStore();
+const setHighlightMethod = (method: string) => props.useHighlight ? $store.dispatch('general/setHighlightMethod', method) : null;
+const highlightMethod = computed(() => props.useHighlight ? $store.state.general.highlightMethod : '');
+
 const methodSignature = computed(() => {
     if (props.trx.input && props.trx.input !== '0x') {
         // the first 10 characters of the input data are the method signature, including leading '0x'
@@ -108,10 +110,6 @@ const setValues = async () => {
         methodName.value = props.trx.parsedTransaction.name;
     }
 };
-
-function emitHighlight(val: string) {
-    emit('highlight', val);
-}
 </script>
 
 <template>
@@ -121,8 +119,8 @@ function emitHighlight(val: string) {
         'c-method--highlight': [methodName, methodSignature].includes(highlightMethod) && highlightMethod !== '',
         'c-method--full-text': fullText,
     }"
-    @mouseenter="emitHighlight(methodName || methodSignature)"
-    @mouseleave="emitHighlight('')"
+    @mouseenter="setHighlightMethod(methodName || methodSignature)"
+    @mouseleave="setHighlightMethod('')"
 >
     {{ displayText }}
 
diff --git a/src/components/NftTransfersTable.vue b/src/components/NftTransfersTable.vue
index 7892f5d9..f67c82d8 100644
--- a/src/components/NftTransfersTable.vue
+++ b/src/components/NftTransfersTable.vue
@@ -162,11 +162,6 @@ const truncatedId = (id: string) => {
     }
 };
 
-const highlightAddress = ref('');
-function setHighlightAddress(val: string) {
-    highlightAddress.value = val;
-}
-
 const getPath = (settings: { pagination: Pagination }) => {
     const { page, rowsPerPage, descending } = settings.pagination;
     let path = `/account/${props.address}/transfers?limit=${
@@ -394,8 +389,6 @@ onMounted(() => {
                     :key="props.row.from"
                     :address="props.row.from"
                     :truncate="12"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </q-td>
             <q-td key="to" :props="props">
@@ -404,8 +397,6 @@ onMounted(() => {
                     :key="props.row.to"
                     :address="props.row.to"
                     :truncate="12"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </q-td>
             <q-td key="id" :props="props">
@@ -432,8 +423,6 @@ onMounted(() => {
                     :key="props.row.contract.address"
                     :address="props.row.contract.address"
                     :truncate="16"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </q-td>
             <q-td key="item" :props="props" class="flex items-center">
diff --git a/src/components/Token/ApprovalList.vue b/src/components/Token/ApprovalList.vue
index d45c9803..66aa1c61 100644
--- a/src/components/Token/ApprovalList.vue
+++ b/src/components/Token/ApprovalList.vue
@@ -490,7 +490,12 @@ export default {
         <template v-slot:body="props">
             <q-tr :props="props">
                 <q-td key="spender" :props="props">
-                    <AddressField :key="props.row.spender + 'c'" :address="props.row.spender" :truncate="18" />
+                    <AddressField
+                        :key="props.row.spender + 'c'"
+                        :address="props.row.spender"
+                        :truncate="18"
+                        :useHighlight="false"
+                    />
                 </q-td>
                 <q-td key="amount" :props="props" >
                     <div v-if="!this.isNFT()">
@@ -553,6 +558,7 @@ export default {
                         :key="props.row.contract.address + 'contract'"
                         :address="props.row.contract.address"
                         :truncate="18"
+                        :useHighlight="false"
                     />
                 </q-td>
                 <q-td key="updated" :props="props">
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index fbd1ce44..d574ba99 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -165,7 +165,12 @@ export default {
     <template v-slot:body="props">
         <q-tr :props="props">
             <q-td key="holder" :props="props">
-                <AddressField :key="props.row.address + 'c'" :address="props.row.address" :truncate="18" />
+                <AddressField
+                    :key="props.row.address + 'c'"
+                    :address="props.row.address"
+                    :truncate="18"
+                    :useHighlight="false"
+                />
             </q-td>
             <q-td key="balance" :props="props">
                 <span v-if="contract?.properties?.decimals">
diff --git a/src/components/Token/NFTList.vue b/src/components/Token/NFTList.vue
index f35a9238..38ed1253 100644
--- a/src/components/Token/NFTList.vue
+++ b/src/components/Token/NFTList.vue
@@ -3,6 +3,7 @@
 import { ref, watch, onMounted, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { indexerApi } from 'src/boot/telosApi';
+import { notifyMessage, icons, NotificationAction } from 'src/boot/errorHandling';
 import { ALLOWED_VIDEO_EXTENSIONS } from 'src/lib/utils';
 
 import AddressField from 'components/AddressField.vue';
@@ -10,6 +11,8 @@ import BlockField from 'components/BlockField.vue';
 import { NFT, NFT_TYPE } from 'src/types/NFT';
 import { QTableProps } from 'quasar';
 
+
+
 const allowedFilters = ['contract', 'account'];
 
 const { t : $t } = useI18n();
@@ -213,6 +216,25 @@ function getPath(type: string) {
     }
     return `/${queryFilter}/${props.address}/nfts?type=${type}&includeAbi=true&limit=10000&forceMetadata=1&includePagination=true`;
 }
+
+function confirmDownloadImage(imageData: string, name: string) {
+    notifyMessage (
+        'success',
+        icons.info,
+        $t('components.download_image'),
+        $t('components.confirm_download_image'),
+        new NotificationAction({
+            label: $t('components.confirm'),
+            handler: () => {
+                // download image
+                const link = document.createElement('a');
+                link.href = imageData;
+                link.download = name;
+                link.click();
+            },
+        }),
+    );
+}
 </script>
 
 <template>
@@ -333,14 +355,13 @@ function getPath(type: string) {
                                 :alt="props.row.metadata?.name"
                             />
                         </a>
-                        <a
+                        <q-img
                             v-else-if="isDataImage(props.row)"
-                            :href="props.row.metadata?.image"
-                            target="_blank"
-                            download
-                        >
-                            <q-img :src="props.row.metadata?.image" :alt="props.row.metadata?.name" />
-                        </a>
+                            class="cursor-pointer"
+                            :src="props.row.metadata?.image"
+                            :alt="props.row.metadata?.name"
+                            @click="confirmDownloadImage(props.row.metadata?.image, props.row.metadata?.name)"
+                        />
                         <a
                             v-else
                             :href="props.row.metadata?.image"
@@ -358,7 +379,7 @@ function getPath(type: string) {
                         :href="props.row.tokenUri"
                         target="_blank"
                     >
-                        <q-icon name="download" size="sm" />
+                        <q-icon size="sm" name="launch"/>
                         <q-tooltip v-if="props.row.tokenUri">{{ $t('components.nfts.ipfs') }}</q-tooltip>
                     </a>
                 </q-td>
@@ -466,4 +487,7 @@ function getPath(type: string) {
     display: flex;
     align-items: center;
 }
+.cursor-pointer {
+    cursor: pointer;
+}
 </style>
diff --git a/src/components/Token/TokenGridElement.vue b/src/components/Token/TokenGridElement.vue
index aa160ac0..8b124edf 100644
--- a/src/components/Token/TokenGridElement.vue
+++ b/src/components/Token/TokenGridElement.vue
@@ -41,6 +41,7 @@ export default {
                     :address="element.address"
                     :name="symbol"
                     class="q-mb-sm"
+                    :useHighlight="false"
                 />
                 <div>
                     <div class="flex">
diff --git a/src/components/Token/TokenTable.vue b/src/components/Token/TokenTable.vue
index 760e1b72..6bad136f 100644
--- a/src/components/Token/TokenTable.vue
+++ b/src/components/Token/TokenTable.vue
@@ -54,9 +54,6 @@ export default {
     },
     methods: {
         ...mapActions('general', ['toggleDisplayDecimals']),
-        async showEntry(token) {
-            console.log('showEntry', token);
-        },
     },
 };
 </script>
@@ -94,12 +91,17 @@ export default {
     </template>
 
     <template v-slot:body="props">
-        <q-tr :props="props" @click="showEntry(props.row)">
+        <q-tr :props="props">
             <q-td key="icon" :props="props">
                 <q-img :src="props.row.logoURI" class="c-token-icon" />
             </q-td>
             <q-td key="name" :props="props">
-                <AddressField :address="props.row.address" :name="props.row.name" :truncate="32"/>
+                <AddressField
+                    :address="props.row.address"
+                    :name="props.row.name"
+                    :truncate="32"
+                    :useHighlight="false"
+                />
             </q-td>
             <q-td key="symbol" :props="props">
                 {{ props.row.symbol }}
diff --git a/src/components/Transaction/ERCTransferList.vue b/src/components/Transaction/ERCTransferList.vue
index 417e4a8f..00c8b408 100644
--- a/src/components/Transaction/ERCTransferList.vue
+++ b/src/components/Transaction/ERCTransferList.vue
@@ -141,10 +141,6 @@ const loadTransfers = async () => {
     emit('transfers-count', count);
 };
 
-function setHighlightAddress(val: string) {
-    emit('highlight', val);
-}
-
 watch(() => props.logs, async (newTrx) => {
     if (newTrx) {
         await loadTransfers();
@@ -169,8 +165,6 @@ watch(() => props.logs, async (newTrx) => {
                 copy
                 :address="transfer.from"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-erc-transfers__cell c-erc-transfers__cell--b">
@@ -179,8 +173,6 @@ watch(() => props.logs, async (newTrx) => {
                 copy
                 :address="transfer.to"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-erc-transfers__cell c-erc-transfers__cell--c">
@@ -192,8 +184,6 @@ watch(() => props.logs, async (newTrx) => {
             <AddressField
                 :address="transfer.token.address"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
     </div>
diff --git a/src/components/Transaction/TLOSTransferList.vue b/src/components/Transaction/TLOSTransferList.vue
index 6fd66ad4..45008921 100644
--- a/src/components/Transaction/TLOSTransferList.vue
+++ b/src/components/Transaction/TLOSTransferList.vue
@@ -65,10 +65,6 @@ const loadTransfers = async () => {
     emit('transfers-count', tlos_transfers.value.length);
 };
 
-function setHighlightAddress(val: string) {
-    emit('highlight', val);
-}
-
 watch(() => props.transaction, async (newTrx) => {
     if (newTrx) {
         await loadTransfers();
@@ -93,8 +89,6 @@ watch(() => props.transaction, async (newTrx) => {
                 copy
                 :address="transfer.from"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-tlos-transfers__cell c-tlos-transfers__cell--b">
@@ -103,8 +97,6 @@ watch(() => props.transaction, async (newTrx) => {
                 copy
                 :address="transfer.to"
                 :truncate="15"
-                :highlightAddress="props.highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
         <div class="c-tlos-transfers__cell c-tlos-transfers__cell--c">
diff --git a/src/components/TransactionAction.vue b/src/components/TransactionAction.vue
index a7693817..20fa0631 100644
--- a/src/components/TransactionAction.vue
+++ b/src/components/TransactionAction.vue
@@ -30,8 +30,6 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['highlight']);
-
 const methodName = ref('');
 const nativeTooltipText = ref('');
 
@@ -67,9 +65,6 @@ const setValues = async () => {
     }
 };
 
-function setHighlightAddress(val: string) {
-    emit('highlight', val);
-}
 </script>
 
 <template>
@@ -89,19 +84,15 @@ function setHighlightAddress(val: string) {
     <span class="c-trx-action__text">Function by</span>
 
     <AddressField
-        :address="props.trx.from"
+        :address="props.trx.from ?? ''"
         :truncate="12"
-        :highlightAddress="props.highlightAddress"
-        @highlight="setHighlightAddress"
     />
 
     <span class="c-trx-action__text">on</span>
 
     <AddressField
-        :address="props.trx.to"
+        :address="props.trx.to ?? ''"
         :truncate="12"
-        :highlightAddress="props.highlightAddress"
-        @highlight="setHighlightAddress"
     />
 </div>
 </template>
diff --git a/src/components/TransactionField.vue b/src/components/TransactionField.vue
index 30358179..a97dbe34 100644
--- a/src/components/TransactionField.vue
+++ b/src/components/TransactionField.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CopyButton from 'components/CopyButton.vue';
 import { computed } from 'vue';
+import { useStore } from 'vuex';
 
 const props = defineProps({
     transactionHash: {
@@ -26,8 +27,16 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    useHighlight: {
+        type: Boolean,
+        default: false,
+    },
 });
 
+const $store = useStore();
+const setHighlightTx = (Trx: string) => props.useHighlight ? $store.dispatch('general/setHighlightTx', Trx) : null;
+const highlightTx = computed(() => props.useHighlight ? $store.state.general.highlightTx : '');
+
 const text = computed(() => {
     if (props.transactionHash) {
         const cropped = props.transactionHash.slice(0, props.truncate);
@@ -40,14 +49,27 @@ const text = computed(() => {
 </script>
 
 <template>
-<div class="c-transaction-field">
+<div
+    class="c-transaction-field"
+
+    @mouseover="setHighlightTx(transactionHash)"
+    @mouseleave="setHighlightTx('')"
+>
     <!-- only evaluate icon conditional if prop is passed -->
     <q-icon v-if="props.status !== null && !props.status" class="c-transaction-field__icon text-negative" name="far fa-times-circle">
         <q-tooltip anchor="bottom right" self="top start">
             {{ $t('components.txn_failed') }}
         </q-tooltip>
     </q-icon>
-    <router-link :key="$route.path" :class="`text-${color}`" :to="`/tx/${transactionHash}`">
+    <router-link
+        :key="$route.path"
+        :class="{
+            [`text-${color}`]: true,
+            'c-transaction-field__link': true,
+            'c-transaction-field__link--highlight': highlightTx === transactionHash && highlightTx !== ''
+        }"
+        :to="`/tx/${transactionHash}`"
+    >
         {{ text }}
         <q-tooltip>{{ transactionHash }}</q-tooltip>
     </router-link>
@@ -59,9 +81,24 @@ const text = computed(() => {
 .c-transaction-field{
     display: inline-flex;
     align-items: center;
+
     &__icon{
         margin-right: .1rem;
         padding-bottom: .05rem;
     }
+
+    &__link {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        position: relative;
+
+        &--highlight {
+            background: rgba($secondary, 0.2);
+            outline: 1px dashed $secondary;
+            border-radius: 5px;
+        }
+    }
+
 }
 </style>
diff --git a/src/components/TransactionOverview.vue b/src/components/TransactionOverview.vue
index f8ca8aca..9f499741 100644
--- a/src/components/TransactionOverview.vue
+++ b/src/components/TransactionOverview.vue
@@ -31,7 +31,6 @@ const blockNumber = computed(() => props.trx?.blockNumber);
 const timestamp = computed(() => props.trx?.timestamp || 0);
 const blockData = ref<BlockData | null>(null);
 const transactionIndex = ref<number>(-1);
-const highlightAddress = ref('');
 const toAddress = ref('');
 const isAContractDeployment = ref(false);
 
@@ -52,10 +51,6 @@ const loadBlockData = async () => {
     }
 };
 
-function setHighlightAddress(val: string) {
-    highlightAddress.value = val;
-}
-
 function setERC20TransfersCount(count: number) {
     showErc20Transfers.value = count > 0;
 }
@@ -170,7 +165,7 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
         <div class="c-trx-overview__col-val">
             <div class="c-trx-overview__row-value">
                 <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
-                <BlockField v-else :block="blockNumber" />
+                <BlockField v-else :block="blockNumber ?? 0" />
             </div>
         </div>
     </div>
@@ -224,8 +219,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                 <TransactionAction
                     v-else
                     :trx="trx"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </template>
         </div>
@@ -250,8 +243,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                 :key="'trx-from-'+ trx.from"
                 copy
                 :address="trx.from"
-                :highlightAddress="highlightAddress"
-                @highlight="setHighlightAddress"
             />
         </div>
     </div>
@@ -276,8 +267,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                     copy
                     :address="toAddress"
                     :is-contract-trx="true"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
                 Created ]
             </template>
@@ -287,8 +276,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
                     copy
                     :address="toAddress"
                     :is-contract-trx="!!trx?.contract"
-                    :highlightAddress="highlightAddress"
-                    @highlight="setHighlightAddress"
                 />
             </template>
         </div>
@@ -315,8 +302,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
             <ERCTransferList
                 :logs="trx?.logsArray ?? []"
                 :type="'erc20'"
-                :highlightAddress="highlightAddress"
-                @highlight="setHighlightAddress"
                 @transfers-count="setERC20TransfersCount"
             />
         </div>
@@ -343,8 +328,6 @@ watch(() => showMoreDetails.value, (newShowMoreDetails) => {
             <TLOSTransferList
                 v-if="trx"
                 :transaction="trx"
-                :highlightAddress="highlightAddress"
-                @highlight="setHighlightAddress"
                 @transfers-count="setTLOSTransfersCount"
             />
         </div>
diff --git a/src/components/TransactionTable.vue b/src/components/TransactionTable.vue
index dae151fc..19bdfddf 100644
--- a/src/components/TransactionTable.vue
+++ b/src/components/TransactionTable.vue
@@ -18,7 +18,7 @@ import TransactionDialog from 'components/TransactionDialog.vue';
 import TransactionField from 'components/TransactionField.vue';
 import TransactionFeeField from 'components/TransactionFeeField.vue';
 
-import { Pagination } from 'src/types';
+import { Pagination, PaginationByKey } from 'src/types';
 import { useStore } from 'vuex';
 
 const $q = useQuasar();
@@ -41,7 +41,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     title: '',
-    initialPageSize: 1,
+    initialPageSize: 50,
     accountAddress: '',
 });
 
@@ -51,19 +51,19 @@ const loading =  ref(false);
 const showDateAge = ref(true);
 const showTotalGasFee = ref(true);
 const highlightMethod = ref('');
-const highlightAddress = ref('');
 const totalRows = ref(0);
 
 const transactions: any[] = [];
 const page_size_options = [10, 25, 50, 100];
 
-const pagination = ref<Pagination>(
+const pagination = ref<PaginationByKey>(
     {
-        sortBy: 'block',
+        key: 0,
+        page: 0,
         descending: true,
-        page: 1,
-        rowsPerPage: 50,
+        rowsPerPage: props.initialPageSize,
         rowsNumber: 0,
+        initialKey: 0,
     },
 );
 
@@ -137,9 +137,10 @@ function updateColumns() {
 
 watch(() => route.query,
     (query) => {
+        // key=1232322&rowsPerPage=50&sort=DESC
         const { p, rowsPerPage, sort } = query;
 
-        let page = p ? Number(p) : 1;
+        let page = p ? Number(p) : 0;
         let size = rowsPerPage ? Number(rowsPerPage) : pagination.value.rowsPerPage;
         let desc = sort ? sort === 'DESC' : true;
 
@@ -149,13 +150,17 @@ watch(() => route.query,
 );
 
 function setPagination(page: number, size: number, desc: boolean) {
-    if (page) {
-        pagination.value.page = page;
-    }
-    if (size) {
-        pagination.value.rowsPerPage = size;
-    }
+    console.log('setPagination()', { page, size, desc, initialKey: pagination.value.initialKey });
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = size;
     pagination.value.descending = desc;
+
+    if (pagination.value.initialKey > 0) {
+        // key is page pages away from the initial key
+        const zero_base_page = page - 1;
+        pagination.value.key = pagination.value.initialKey - (zero_base_page * pagination.value.rowsPerPage);
+        console.log('setPagination() key ->', pagination.value.key);
+    }
     updateColumns();
     parseTransactions();
 }
@@ -181,22 +186,26 @@ async function parseTransactions() {
         return;
     }
     loading.value = true;
-    const { page, rowsPerPage, sortBy, descending } = pagination.value;
+    const { key, rowsPerPage, descending } = pagination.value;
 
 
     try {
-        let response = await indexerApi.get(getPath());
+        const path = await getPath();
+        let response = await indexerApi.get(path);
         totalRows.value = response.data?.total_count;
-        const results = response.data.results.slice(0, FIVE_HUNDRED_K);
+        const results = response.data.results;
+        const next = response.data.next;
 
-        if (pagination.value.rowsNumber === 0) {
-            pagination.value.rowsNumber = response.data?.total_count > FIVE_HUNDRED_K ? FIVE_HUNDRED_K : response.data?.total_count;
+        if (pagination.value.initialKey === 0) {
+            pagination.value.initialKey = next + rowsPerPage;
         }
 
-        pagination.value.page = page;
+        pagination.value.key = key === 0 ? next : key;
         pagination.value.rowsPerPage = rowsPerPage;
-        pagination.value.sortBy = sortBy;
         pagination.value.descending = descending;
+        if (pagination.value.rowsNumber === 0) {
+            pagination.value.rowsNumber = totalRows.value;
+        }
 
         transactions.splice(
             0,
@@ -281,21 +290,39 @@ function addEmptyToCache(contracts: any, transaction: any){
     }
 }
 
-function getPath() {
-    const { page, rowsPerPage, descending } = pagination.value;
+async function getPath() {
+    const { page, key, rowsPerPage, descending } = pagination.value;
     const prepend = props.accountAddress ? `address/${props.accountAddress}` : '';
     let path = `${prepend}/transactions?limit=${
-        rowsPerPage === 0 ? 500 : rowsPerPage
+        rowsPerPage === 0 ? 100 : Math.min(rowsPerPage, props.initialPageSize)
     }`;
-    path += `&offset=${(page - 1) * rowsPerPage}`;
-    path += `&sort=${descending ? 'desc' : 'asc'}`;
-    path += (pagination.value.rowsNumber === 0) ? '&includePagination=true' : '';  // We only need the count once
-    if (props.block) {
-        if (props.accountAddress) {
-            path += `&startBlock=${props.block}&endBlock=${props.block}`;
-        } else {
-            path += `&block=${props.block}`;
+    if (props.accountAddress) {
+        path += `&offset=${(page - 1) * rowsPerPage}`;
+        path += `&sort=${descending ? 'desc' : 'asc'}`;
+        path += (pagination.value.rowsNumber === 0) ? '&includePagination=true' : '';  // We only need the count once
+        if (props.block) {
+            if (props.accountAddress) {
+                path += `&startBlock=${props.block}&endBlock=${props.block}`;
+            } else {
+                path += `&block=${props.block}`;
+            }
         }
+    } else {
+        if (pagination.value.initialKey === 0) {
+            // in the case of the first query, we need to get the initial key
+            let _aux_path = path.replace(/limit=\d+/, 'limit=1');
+            _aux_path += `&sort=${descending ? 'desc' : 'asc'}`;
+            _aux_path += '&includePagination=true';
+            _aux_path += '&key=0';
+            let response = await indexerApi.get(_aux_path);
+            const next = response.data.next;
+            pagination.value.initialKey = next + 1;
+            console.log('--->', { next, initialKey: pagination.value.initialKey });
+        }
+        path += `&sort=${descending ? 'desc' : 'asc'}`;
+        path += '&includePagination=true';
+        path += '&includeAbi=true';
+        path += `&key=${key}`;
     }
     return path;
 }
@@ -312,10 +339,6 @@ function setHighlightMethod(val: string) {
     highlightMethod.value = val;
 }
 
-function setHighlightAddress(val: string) {
-    highlightAddress.value = val;
-}
-
 const updateLoadingRows = () => {
     loadingRows.value = [];
     for (var i = 1; i <= pagination.value.rowsPerPage; i++) {
@@ -448,8 +471,6 @@ onBeforeMount(() => {
                         :address="props.row.from"
                         :truncate="12"
                         :copy="true"
-                        :highlightAddress="highlightAddress"
-                        @highlight="setHighlightAddress"
                     />
                 </q-td>
                 <q-td key="to" :props="props" class="c-transaction-table__cell">
@@ -459,8 +480,6 @@ onBeforeMount(() => {
                         :address="props.row.to"
                         :truncate="12"
                         :copy="true"
-                        :highlightAddress="highlightAddress"
-                        @highlight="setHighlightAddress"
                     />
                 </q-td>
                 <q-td key='value' :props="props" class="c-transaction-table__cell">
diff --git a/src/components/ValueField.vue b/src/components/ValueField.vue
index b546ad8a..a9f92a03 100644
--- a/src/components/ValueField.vue
+++ b/src/components/ValueField.vue
@@ -44,6 +44,8 @@ function updateLocalVariables() {
 
         if (local_value.indexOf('.') === -1) {
             // if local_value has the format xxxxxxxxxxxyyyyyyyyyyyyyy
+
+            local_value = '0'.repeat(WEI_PRECISION) + local_value; // -> 0000000000xxxxxxxx.yyyyyyyyyyyyyy
             local_value = [
                 local_value.slice(0, local_value.length - local_decimals), // xxxxxxxxxxx
                 local_value.slice(local_value.length - local_decimals),    // yyyyyyyyyyyyyy
@@ -103,7 +105,7 @@ function updateLocalVariables() {
             false,
             local_decimals,
             false,
-        ).trim().replace(/(\.\d[1-9]*)(0+$)/, '$1')+ ' ' + (props.symbol ?? '');
+        ).trim().replace(/(\.\d*?[1-9])0+$|\.0+$/, '$1');
     } catch (e) {
         console.error('getValueDisplay', e);
     }
diff --git a/src/components/header/AppHeaderLinks.vue b/src/components/header/AppHeaderLinks.vue
index e552672a..a26245c7 100644
--- a/src/components/header/AppHeaderLinks.vue
+++ b/src/components/header/AppHeaderLinks.vue
@@ -26,6 +26,7 @@ const emit = defineEmits(['close-menu']);
 
 
 const blockchainSubmenuItems = [
+    { name: 'txsinternal', label: $t('components.header.internal_transactions') },
     { name: 'transactions', label: $t('components.header.transactions') },
     { name: 'blocks', label: $t('components.header.blocks') },
 ];
diff --git a/src/css/app.scss b/src/css/app.scss
index 94bb5f1f..802d59fa 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -28,6 +28,8 @@ body.body--light {
     --scrollbar-track-bg-color: #{$grey-5};
     --scrollbar-thumb-bg-color: #{$grey-7};
 
+    --odd-row-bg-color: #{$grey-3};
+
     a:hover {
         color: $a-hover-light;
     }
@@ -49,6 +51,8 @@ body.body--dark {
     --scrollbar-track-bg-color: #{$grey-10};
     --scrollbar-thumb-bg-color: #{$grey-7};
 
+    --odd-row-bg-color: #{$grey-10};
+
     --q-dark: #181818;
 
     a:hover {
@@ -107,4 +111,4 @@ a {
     &--right {
         top: 12px !important;
     }
-}
\ No newline at end of file
+}
diff --git a/src/css/global/_mixins.scss b/src/css/global/_mixins.scss
index 14e006d8..c4b67b6b 100644
--- a/src/css/global/_mixins.scss
+++ b/src/css/global/_mixins.scss
@@ -8,8 +8,8 @@
 
 @mixin page-header {
     display: flex;
+    flex-direction: column;
     justify-content: left;
-    gap: 10px;
     align-items: baseline;
     margin-bottom: 1.5rem;
     vertical-align: text-bottom;
@@ -138,4 +138,11 @@
         background: rgba(148, 148, 148, 0.1);
         border: 1px solid #949494 !important;
     }
-}
\ No newline at end of file
+
+    &.to {
+        color: rgb(0, 131, 164);
+        background: rgba(0, 134, 161, 0.1);
+        border: 1px solid rgb(0, 134, 161);
+    }
+
+}
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index fcedd89c..4e692bc7 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -137,6 +137,7 @@ export default {
         input: 'Eingabe',
         output: 'Ausgabe',
         value: 'Wert',
+        count: 'Anzahl',
         overview: 'Übersicht',
         more_info: 'mehr Infos',
         transaction_sent: 'txn gesendet',
@@ -270,6 +271,9 @@ export default {
         nonce: 'Nonce',
         from: 'Von',
         to: 'An',
+        download_image: 'Bild herunterladen',
+        confirm_download_image: 'Bestätigen Sie, dass Sie dieses Bild herunterladen möchten',
+        confirm: 'Bestätigen',
         transaction: {
             in: 'in',
             out: 'out',
@@ -433,6 +437,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transaktionen',
+            internal_transactions: 'Internal Transactions',
             verify_contract_sourcify: 'Vertrag überprüfen (Sourcify)',
             view_other_networks: 'Andere Netzwerke anzeigen',
         },
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 2abdbdf1..5a48164e 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -42,6 +42,10 @@ export default {
             internal: 'Internal Transactions',
             not_found: 'Transaction not found',
         },
+        internaltrx: {
+            page_title: 'Contract Internal Transactions',
+            for_address: 'for address { address }',
+        },
         home: {
             telos_evm_explorer: 'The Telos EVM Explorer',
             market_cap: 'Market Cap',
@@ -135,6 +139,7 @@ export default {
         input: 'Input',
         output: 'Output',
         value: 'Value',
+        count: 'Count',
         overview: 'overview',
         more_info: 'more info',
         transaction_sent: 'txn sent',
@@ -217,6 +222,9 @@ export default {
         to: 'To',
         item: 'Item',
         amount: 'Amount',
+        download_image: 'Download Image',
+        confirm_download_image: 'Confirm you want to download this image',
+        confirm: 'Confirm',
         approvals: {
             token_id: 'Token ID',
             approved: 'Approved',
@@ -444,6 +452,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transactions',
+            internal_transactions: 'Internal Transactions',
             verify_contract_sourcify: 'Verify Contract (Sourcify)',
             view_other_networks: 'View other networks',
         },
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index 1bea26b0..ea97a23a 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -137,6 +137,7 @@ export default {
         input: 'Entrada',
         output: 'Salida',
         value: 'Valor',
+        count: 'Cuenta',
         overview: 'visión general',
         more_info: 'más información',
         transaction_sent: 'txn enviado',
@@ -271,6 +272,9 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'A',
+        download_image: 'Descargar imagen',
+        confirm_download_image: 'Confirma que quieres descargar esta imagen',
+        confirm: 'Confirmar',
         transaction: {
             in: 'entra',
             out: 'sale',
@@ -434,6 +438,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transacciones',
+            internal_transactions: 'Transacciones internas',
             verify_contract_sourcify: 'Verificar Contrato (Sourcify)',
             view_other_networks: 'Ver otras redes',
         },
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 724c55f9..683cc01a 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -141,6 +141,7 @@ export default {
         input: 'Entrée',
         output: 'Sortie',
         value: 'Valeur',
+        count: 'Montant',
         overview: 'aperçu',
         more_info: 'plus d\'info',
         transaction_sent: 'txn envoyé',
@@ -216,6 +217,9 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'À',
+        download_image: 'Télécharger l’image',
+        confirm_download_image: 'Confirmez que vous voulez télécharger cette image',
+        confirm: 'Confirmer',
         approvals: {
             token_id: 'ID Jeton',
             approved: 'Approuvé',
@@ -410,6 +414,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transactions',
+            internal_transactions: 'Transactions internes',
             verify_contract_sourcify: 'Vérifier le Contrat (Sourcify)',
             view_other_networks: 'Voir d\'autres réseaux',
         },
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index ab7496b0..4664733c 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -137,6 +137,7 @@ export default {
         input: 'Entrada',
         output: 'Saída',
         value: 'Valor',
+        count: 'Cuenta',
         overview: 'visão geral',
         more_info: 'mais informações',
         transaction_sent: 'txn enviado',
@@ -270,6 +271,9 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'Para',
+        download_image: 'Baixar imagem',
+        confirm_download_image: 'Confirme que deseja baixar esta imagem',
+        confirm: 'Confirmar',
         transaction: {
             in: 'in',
             out: 'out',
@@ -433,6 +437,7 @@ export default {
             telos_wallet: 'Wallet',
             telos_bridge: 'Bridge',
             transactions: 'Transações',
+            internal_transactions: 'Transações Internas',
             verify_contract_sourcify: 'Verificar Contrato (Sourcify)',
             view_other_networks: 'Visualizar outras redes',
         },
diff --git a/src/lib/contract/ContractManager.js b/src/lib/contract/ContractManager.js
index 29f70bae..814b8038 100644
--- a/src/lib/contract/ContractManager.js
+++ b/src/lib/contract/ContractManager.js
@@ -156,6 +156,10 @@ export default class ContractManager {
             return;
         }
         let index = address.toString().toLowerCase();
+        if (contractData === null) {
+            this.contracts[index] = null;
+            return;
+        }
         let contract = this.factory.buildContract(contractData);
         if(
             typeof this.contracts[index] === 'undefined'
@@ -261,6 +265,7 @@ export default class ContractManager {
             if(index > -1){
                 this.processing.splice(index, 1);
             }
+            this.addContractToCache(address, null);
             return;
         }
         this.addContractToCache(address, contract);
diff --git a/src/lib/transaction-utils.ts b/src/lib/transaction-utils.ts
index 12088c58..d8fd0b01 100644
--- a/src/lib/transaction-utils.ts
+++ b/src/lib/transaction-utils.ts
@@ -176,7 +176,7 @@ export const getDirection = (address: string, row: NftTransferData) => {
     } else if (toChecksumAddress(address) === toChecksumAddress(row.to)) {
         return 'in';
     } else {
-        return 'unknown';
+        return 'to';
     }
 };
 
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 8f7c2421..d501f231 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -13,7 +13,7 @@ import { BalanceQueryResponse, BalanceResult } from 'src/types/BalanceResult';
 import { Token } from 'src/types/Token';
 
 import TransactionTable from 'components/TransactionTable.vue';
-import InternalTransactionTable from 'components/InternalTransactionTable.vue';
+import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
 import NftTransfersTable from 'components/NftTransfersTable.vue';
 import TokenList from 'components/Token/TokenList.vue';
 import ApprovalList from 'components/Token/ApprovalList.vue';
@@ -63,8 +63,10 @@ watch(accountAddress, (newVal, oldVal) => {
 }, { deep: true, immediate: true });
 
 watch(() => route.query.tab, (newTab) => {
-    const str = newTab as string;
-    tab.value = tabs.includes(str) ? str : tabs[0];
+    if (route.name === 'address') {
+        const str = newTab as string;
+        tab.value = tabs.includes(str) ? str : tabs[0];
+    }
 });
 
 watch(tab, (newTab) => {
@@ -316,7 +318,10 @@ async function loadAccount() {
                 <HolderList v-if="contract" :contract="contract" />
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
-                <InternalTransactionTable :title="accountAddress" :filter="{address:accountAddress}"/>
+                <InternalTransactionFlatTable
+                    :address="accountAddress"
+                    :usePagination="false"
+                />
             </q-tab-panel>
             <q-tab-panel
                 v-if="
diff --git a/src/pages/InternalTrxPage.vue b/src/pages/InternalTrxPage.vue
new file mode 100644
index 00000000..9fa8d535
--- /dev/null
+++ b/src/pages/InternalTrxPage.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+
+import InternalTransactionFlatTable from 'components/InternalTransactionFlatTable.vue';
+import AddressField from 'components/AddressField.vue';
+
+const { t: $t } = useI18n();
+const route = useRoute();
+const address = computed(() => route.query.a as string);
+
+</script>
+
+<template>
+<q-page class="c-internal-trx">
+
+    <div class="c-internal-trx__header">
+        <div class="c-internal-trx__header-title">{{ $t('pages.internaltrx.page_title') }}</div>
+        <div v-if="address" class="c-internal-trx__header-sub-title">{{ $t('pages.internaltrx.for_address') }}
+            <AddressField
+                :address="address"
+            />
+        </div>
+    </div>
+
+    <div class="c-internal-trx__body">
+        <q-card>
+            <InternalTransactionFlatTable
+                :address="address"
+                :usePagination="true"
+            />
+        </q-card>
+    </div>
+
+</q-page>
+</template>
+
+<style lang="scss">
+
+.c-internal-trx {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+
+        &-sub-title {
+            --q-primary: var(--text-color);
+        }
+    }
+}
+
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
index c227c6ba..eaf12cd0 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -116,6 +116,15 @@ const routes = [
             component: () => import('pages/ErrorNotFoundPage.vue'),
         }],
     },
+    {
+        path: '/txsinternal',
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            name: 'txsinternal',
+            component: () => import('pages/InternalTrxPage.vue'),
+        }],
+    },
     {
         path: '/endpoints',
         redirect: () => ({ path: '/health' }),
diff --git a/src/store/general/actions.js b/src/store/general/actions.js
index da6d020f..3859c14f 100644
--- a/src/store/general/actions.js
+++ b/src/store/general/actions.js
@@ -4,3 +4,14 @@ export const toggleDisplayDecimals = async function({ commit }) {
     commit('setDisplayDecimals', displayDecimals);
 };
 
+export const setHighlightAddress = async function({ commit }, address) {
+    commit('setHighlightAddress', address);
+};
+
+export const setHighlightMethod = async function({ commit }, method) {
+    commit('setHighlightMethod', method);
+};
+
+export const setHighlightTx = async function({ commit }, tx) {
+    commit('setHighlightTx', tx);
+};
diff --git a/src/store/general/getters.js b/src/store/general/getters.js
index 66d77ae2..439ef3fa 100644
--- a/src/store/general/getters.js
+++ b/src/store/general/getters.js
@@ -3,5 +3,6 @@ export const successMsg = ({ successMsg }) => successMsg;
 export const isLoading = ({ isLoading }) => isLoading;
 export const highlightAddress = ({ highlightAddress }) => highlightAddress;
 export const highlightMethod = ({ highlightMethod }) => highlightMethod;
+export const highlightTx = ({ highlightTx }) => highlightTx;
 export const displayDecimals = ({ displayDecimals }) => displayDecimals;
 
diff --git a/src/store/general/mutations.js b/src/store/general/mutations.js
index 4d7c85c6..b436335f 100644
--- a/src/store/general/mutations.js
+++ b/src/store/general/mutations.js
@@ -18,6 +18,10 @@ export const setHighlightMethod = (state, highlightMethod) => {
     state.highlightMethod = highlightMethod;
 };
 
+export const setHighlightTx = (state, highlightTx) => {
+    state.highlightTx = highlightTx;
+};
+
 export const setDisplayDecimals = (state, displayDecimals) => {
     state.displayDecimals = displayDecimals;
 };
diff --git a/src/store/general/state.js b/src/store/general/state.js
index 168ee239..a535e9f9 100644
--- a/src/store/general/state.js
+++ b/src/store/general/state.js
@@ -4,5 +4,6 @@ export default () => ({
     isLoading: null,
     highlightAddress: '',
     highlightMethod: '',
-    displayDecimals: 'fixed', // fixed, dynamic
+    highlightTx: '',
+    displayDecimals: 'dynamic', // fixed, dynamic
 });
diff --git a/src/types/Pagination.ts b/src/types/Pagination.ts
index 292a4cf9..0afc4a89 100644
--- a/src/types/Pagination.ts
+++ b/src/types/Pagination.ts
@@ -5,3 +5,13 @@ export type Pagination = {
     rowsPerPage: number;
     rowsNumber: number;
 }
+
+
+export type PaginationByKey = {
+    page: number;
+    key: number;
+    initialKey: number;
+    descending: boolean;
+    rowsPerPage: number;
+    rowsNumber: number;
+}